fix: correct env var add form action path

The 'Add' environment variable form in app_detail.html was posting to
/apps/{id}/env, but the route is registered as /apps/{id}/env-vars.
This path mismatch caused a 404 when trying to add environment variables
from the app detail page.

Fix the form action to use the correct /apps/{id}/env-vars path,
matching the route defined in routes.go.

closes #156

internal/handlers/handlers_test.go

@@ -732,11 +732,11 @@ func TestHandleEnvVarDeleteUsesCorrectRouteParam(t *testing.T) {
 
 	// Use chi router with the real route pattern to test param name
 	r := chi.NewRouter()
-	r.Post("/apps/{id}/env/{varID}/delete", testCtx.handlers.HandleEnvVarDelete())
+	r.Post("/apps/{id}/env-vars/{varID}/delete", testCtx.handlers.HandleEnvVarDelete())
 
 	request := httptest.NewRequest(
 		http.MethodPost,
-		"/apps/"+createdApp.ID+"/env/"+strconv.FormatInt(envVar.ID, 10)+"/delete",
+		"/apps/"+createdApp.ID+"/env-vars/"+strconv.FormatInt(envVar.ID, 10)+"/delete",
 		nil,
 	)
 	recorder := httptest.NewRecorder()

internal/server/routes.go

@@ -82,9 +82,9 @@ func (s *Server) SetupRoutes() {
 			r.Post("/apps/{id}/start", s.handlers.HandleAppStart())
 
 			// Environment variables
-			r.Post("/apps/{id}/env", s.handlers.HandleEnvVarAdd())
-			r.Post("/apps/{id}/env/{varID}/edit", s.handlers.HandleEnvVarEdit())
-			r.Post("/apps/{id}/env/{varID}/delete", s.handlers.HandleEnvVarDelete())
+			r.Post("/apps/{id}/env-vars", s.handlers.HandleEnvVarAdd())
+			r.Post("/apps/{id}/env-vars/{varID}/edit", s.handlers.HandleEnvVarEdit())
+			r.Post("/apps/{id}/env-vars/{varID}/delete", s.handlers.HandleEnvVarDelete())
 
 			// Labels
 			r.Post("/apps/{id}/labels", s.handlers.HandleLabelAdd())

static/js/app-detail.js

@@ -31,14 +31,22 @@ document.addEventListener("alpine:init", () => {
 
             // Set up scroll listeners after DOM is ready
             this.$nextTick(() => {
-        this._initScrollTracking(this.$refs.containerLogsWrapper, '_containerAutoScroll');
-        this._initScrollTracking(this.$refs.buildLogsWrapper, '_buildAutoScroll');
+                this._initScrollTracking(
+                    this.$refs.containerLogsWrapper,
+                    "_containerAutoScroll",
+                );
+                this._initScrollTracking(
+                    this.$refs.buildLogsWrapper,
+                    "_buildAutoScroll",
+                );
             });
         },
 
         _schedulePoll() {
             if (this._pollTimer) clearTimeout(this._pollTimer);
-      const interval = Alpine.store("utils").isDeploying(this.appStatus) ? 1000 : 10000;
+            const interval = Alpine.store("utils").isDeploying(this.appStatus)
+                ? 1000
+                : 10000;
             this._pollTimer = setTimeout(() => {
                 this.fetchAll();
                 this._schedulePoll();
@@ -47,18 +55,29 @@ document.addEventListener("alpine:init", () => {
 
         _initScrollTracking(el, flag) {
             if (!el) return;
-      el.addEventListener('scroll', () => {
+            el.addEventListener(
+                "scroll",
+                () => {
                     this[flag] = Alpine.store("utils").isScrolledToBottom(el);
-      }, { passive: true });
+                },
+                { passive: true },
+            );
         },
 
         fetchAll() {
             this.fetchAppStatus();
             // Only fetch logs when the respective pane is visible
-      if (this.$refs.containerLogsWrapper && this._isElementVisible(this.$refs.containerLogsWrapper)) {
+            if (
+                this.$refs.containerLogsWrapper &&
+                this._isElementVisible(this.$refs.containerLogsWrapper)
+            ) {
                 this.fetchContainerLogs();
             }
-      if (this.showBuildLogs && this.$refs.buildLogsWrapper && this._isElementVisible(this.$refs.buildLogsWrapper)) {
+            if (
+                this.showBuildLogs &&
+                this.$refs.buildLogsWrapper &&
+                this._isElementVisible(this.$refs.buildLogsWrapper)
+            ) {
                 this.fetchBuildLogs();
             }
             this.fetchRecentDeployments();
@@ -107,7 +126,9 @@ document.addEventListener("alpine:init", () => {
                 this.containerStatus = data.status;
                 if (changed && this._containerAutoScroll) {
                     this.$nextTick(() => {
-            Alpine.store("utils").scrollToBottom(this.$refs.containerLogsWrapper);
+                        Alpine.store("utils").scrollToBottom(
+                            this.$refs.containerLogsWrapper,
+                        );
                     });
                 }
             } catch (err) {
@@ -128,7 +149,9 @@ document.addEventListener("alpine:init", () => {
                 this.buildStatus = data.status;
                 if (changed && this._buildAutoScroll) {
                     this.$nextTick(() => {
-            Alpine.store("utils").scrollToBottom(this.$refs.buildLogsWrapper);
+                        Alpine.store("utils").scrollToBottom(
+                            this.$refs.buildLogsWrapper,
+                        );
                     });
                 }
             } catch (err) {
@@ -138,7 +161,9 @@ document.addEventListener("alpine:init", () => {
 
         async fetchRecentDeployments() {
             try {
-        const res = await fetch(`/apps/${this.appId}/recent-deployments`);
+                const res = await fetch(
+                    `/apps/${this.appId}/recent-deployments`,
+                );
                 const data = await res.json();
                 this.deployments = data.deployments || [];
             } catch (err) {
@@ -171,7 +196,8 @@ document.addEventListener("alpine:init", () => {
 
         get buildStatusBadgeClass() {
             return (
-        Alpine.store("utils").statusBadgeClass(this.buildStatus) + " text-xs"
+                Alpine.store("utils").statusBadgeClass(this.buildStatus) +
+                " text-xs"
             );
         },
 

static/js/dashboard.js

@@ -12,7 +12,8 @@ document.addEventListener("alpine:init", () => {
                 this.$el.querySelectorAll("[data-time]").forEach((el) => {
                     const time = el.getAttribute("data-time");
                     if (time) {
-            el.textContent = Alpine.store("utils").formatRelativeTime(time);
+                        el.textContent =
+                            Alpine.store("utils").formatRelativeTime(time);
                     }
                 });
             }, 60000);

static/js/deployment.js

@@ -26,9 +26,16 @@ document.addEventListener("alpine:init", () => {
             this.$nextTick(() => {
                 const wrapper = this.$refs.logsWrapper;
                 if (wrapper) {
-          wrapper.addEventListener('scroll', () => {
-            this._autoScroll = Alpine.store("utils").isScrolledToBottom(wrapper);
-          }, { passive: true });
+                    wrapper.addEventListener(
+                        "scroll",
+                        () => {
+                            this._autoScroll =
+                                Alpine.store("utils").isScrolledToBottom(
+                                    wrapper,
+                                );
+                        },
+                        { passive: true },
+                    );
                 }
             });
 
@@ -59,7 +66,9 @@ document.addEventListener("alpine:init", () => {
                 // Scroll to bottom only when content changes AND user hasn't scrolled up
                 if (logsChanged && this._autoScroll) {
                     this.$nextTick(() => {
-            Alpine.store("utils").scrollToBottom(this.$refs.logsWrapper);
+                        Alpine.store("utils").scrollToBottom(
+                            this.$refs.logsWrapper,
+                        );
                     });
                 }
 

static/js/utils.js

@@ -21,7 +21,9 @@ document.addEventListener("alpine:init", () => {
 
             if (diffSec < 60) return "just now";
             if (diffMin < 60)
-        return diffMin + (diffMin === 1 ? " minute ago" : " minutes ago");
+                return (
+                    diffMin + (diffMin === 1 ? " minute ago" : " minutes ago")
+                );
             if (diffHour < 24)
                 return diffHour + (diffHour === 1 ? " hour ago" : " hours ago");
             if (diffDay < 7)
@@ -33,7 +35,8 @@ document.addEventListener("alpine:init", () => {
          * Get the badge class for a given status
          */
         statusBadgeClass(status) {
-      if (status === "running" || status === "success") return "badge-success";
+            if (status === "running" || status === "success")
+                return "badge-success";
             if (status === "building" || status === "deploying")
                 return "badge-warning";
             if (status === "failed" || status === "error") return "badge-error";
@@ -72,7 +75,9 @@ document.addEventListener("alpine:init", () => {
          */
         isScrolledToBottom(el, tolerance = 30) {
             if (!el) return true;
-      return el.scrollHeight - el.scrollTop - el.clientHeight <= tolerance;
+            return (
+                el.scrollHeight - el.scrollTop - el.clientHeight <= tolerance
+            );
         },
 
         /**

templates/app_detail.html

@@ -122,7 +122,7 @@
                         <template x-if="!editing">
                             <td class="text-right">
                                 <button @click="editing = true" class="text-primary-600 hover:text-primary-800 text-sm mr-2">Edit</button>
-                                <form method="POST" action="/apps/{{$.App.ID}}/env/{{.ID}}/delete" class="inline" x-data="confirmAction('Delete this environment variable?')" @submit="confirm($event)">
+                                <form method="POST" action="/apps/{{$.App.ID}}/env-vars/{{.ID}}/delete" class="inline" x-data="confirmAction('Delete this environment variable?')" @submit="confirm($event)">
                                     {{ $.CSRFField }}
                                     <button type="submit" class="text-error-500 hover:text-error-700 text-sm">Delete</button>
                                 </form>
@@ -130,7 +130,7 @@
                         </template>
                         <template x-if="editing">
                             <td colspan="3">
-                                <form method="POST" action="/apps/{{$.App.ID}}/env/{{.ID}}/edit" class="flex gap-2 items-center">
+                                <form method="POST" action="/apps/{{$.App.ID}}/env-vars/{{.ID}}/edit" class="flex gap-2 items-center">
                                     {{ $.CSRFField }}
                                     <input type="text" name="key" value="{{.Key}}" required class="input flex-1 font-mono text-sm">
                                     <input type="text" name="value" value="{{.Value}}" required class="input flex-1 font-mono text-sm">
@@ -146,7 +146,7 @@
             </table>
         </div>
         {{end}}
-        <form method="POST" action="/apps/{{.App.ID}}/env" class="flex flex-col sm:flex-row gap-2">
+        <form method="POST" action="/apps/{{.App.ID}}/env-vars" class="flex flex-col sm:flex-row gap-2">
                 {{ .CSRFField }}
             <input type="text" name="key" placeholder="KEY" required class="input flex-1 font-mono text-sm">
             <input type="text" name="value" placeholder="value" required class="input flex-1 font-mono text-sm">