fix: use /env routes for env var CRUD, fixing 404 on env var forms

Change route patterns in routes.go from /env-vars to /env and update
edit/delete form actions in app_detail.html to match. The add form
already used /env and was correct.

Update test route setup to match the new /env paths.

Closes #156

Makefile

@@ -1,4 +1,4 @@
-.PHONY: all build lint fmt fmt-check test check clean docker hooks
+.PHONY: all build lint fmt fmt-check test check clean
 
 BINARY := upaasd
 VERSION := $(shell git describe --tags --always --dirty 2>/dev/null || echo "dev")
@@ -22,22 +22,12 @@ fmt-check:
 	@test -z "$$(gofmt -l .)" || (echo "Files not formatted:" && gofmt -l . && exit 1)
 
 test:
-	go test -v -race -cover -timeout 30s ./...
+	go test -v -race -cover ./...
 
 # Check runs all validation without making changes
 # Used by CI and Docker build - fails if anything is wrong
 check: fmt-check lint test
 	@echo "==> All checks passed!"
 
-docker:
-	docker build .
-
-hooks:
-	@echo "Installing pre-commit hook..."
-	@mkdir -p .git/hooks
-	@printf '#!/bin/sh\nmake check\n' > .git/hooks/pre-commit
-	@chmod +x .git/hooks/pre-commit
-	@echo "Pre-commit hook installed."
-
 clean:
 	rm -rf bin/

README.md

@@ -110,14 +110,11 @@ chi Router ──► Middleware Stack ──► Handler
 ### Commands
 
 ```bash
-make fmt       # Format code
-make fmt-check # Check formatting (read-only, fails if unformatted)
-make lint      # Run comprehensive linting
-make test      # Run tests with race detection (30s timeout)
-make check     # Verify everything passes (fmt-check, lint, test)
-make build     # Build binary
-make docker    # Build Docker image
-make hooks     # Install pre-commit hook (runs make check)
+make fmt      # Format code
+make lint     # Run comprehensive linting
+make test     # Run tests with race detection
+make check    # Verify everything passes (lint, test, build, format)
+make build    # Build binary
 ```
 
 ### Commit Requirements

internal/handlers/app.go

@@ -54,18 +54,12 @@ func (h *Handlers) HandleAppCreate() http.HandlerFunc { //nolint:funlen // valid
 		repoURL := request.FormValue("repo_url")
 		branch := request.FormValue("branch")
 		dockerfilePath := request.FormValue("dockerfile_path")
-		dockerNetwork := request.FormValue("docker_network")
-		ntfyTopic := request.FormValue("ntfy_topic")
-		slackWebhook := request.FormValue("slack_webhook")
 
 		data := h.addGlobals(map[string]any{
 			"Name":           name,
 			"RepoURL":        repoURL,
 			"Branch":         branch,
 			"DockerfilePath": dockerfilePath,
-			"DockerNetwork":  dockerNetwork,
-			"NtfyTopic":      ntfyTopic,
-			"SlackWebhook":   slackWebhook,
 		}, request)
 
 		if name == "" || repoURL == "" {
@@ -106,9 +100,6 @@ func (h *Handlers) HandleAppCreate() http.HandlerFunc { //nolint:funlen // valid
 				RepoURL:        repoURL,
 				Branch:         branch,
 				DockerfilePath: dockerfilePath,
-				DockerNetwork:  dockerNetwork,
-				NtfyTopic:      ntfyTopic,
-				SlackWebhook:   slackWebhook,
 			},
 		)
 		if createErr != nil {

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-vars/{varID}/delete", testCtx.handlers.HandleEnvVarDelete())
+	r.Post("/apps/{id}/env/{varID}/delete", testCtx.handlers.HandleEnvVarDelete())
 
 	request := httptest.NewRequest(
 		http.MethodPost,
-		"/apps/"+createdApp.ID+"/env-vars/"+strconv.FormatInt(envVar.ID, 10)+"/delete",
+		"/apps/"+createdApp.ID+"/env/"+strconv.FormatInt(envVar.ID, 10)+"/delete",
 		nil,
 	)
 	recorder := httptest.NewRecorder()

internal/handlers/webhook_events.go

@@ -1,56 +0,0 @@
-package handlers
-
-import (
-	"net/http"
-
-	"github.com/go-chi/chi/v5"
-
-	"sneak.berlin/go/upaas/internal/models"
-	"sneak.berlin/go/upaas/templates"
-)
-
-// webhookEventsLimit is the number of webhook events to show in history.
-const webhookEventsLimit = 100
-
-// HandleAppWebhookEvents returns the webhook event history handler.
-func (h *Handlers) HandleAppWebhookEvents() http.HandlerFunc {
-	tmpl := templates.GetParsed()
-
-	return func(writer http.ResponseWriter, request *http.Request) {
-		appID := chi.URLParam(request, "id")
-
-		application, findErr := models.FindApp(request.Context(), h.db, appID)
-		if findErr != nil {
-			h.log.Error("failed to find app", "error", findErr)
-			http.Error(writer, "Internal Server Error", http.StatusInternalServerError)
-
-			return
-		}
-
-		if application == nil {
-			http.NotFound(writer, request)
-
-			return
-		}
-
-		events, eventsErr := application.GetWebhookEvents(
-			request.Context(),
-			webhookEventsLimit,
-		)
-		if eventsErr != nil {
-			h.log.Error("failed to get webhook events",
-				"error", eventsErr,
-				"app", appID,
-			)
-
-			events = []*models.WebhookEvent{}
-		}
-
-		data := h.addGlobals(map[string]any{
-			"App":    application,
-			"Events": events,
-		}, request)
-
-		h.renderTemplate(writer, tmpl, "webhook_events.html", data)
-	}
-}

internal/models/webhook_event.go

@@ -52,20 +52,6 @@ func (w *WebhookEvent) Reload(ctx context.Context) error {
 	return w.scan(row)
 }
 
-// ShortCommit returns a truncated commit SHA for display.
-func (w *WebhookEvent) ShortCommit() string {
-	if !w.CommitSHA.Valid {
-		return ""
-	}
-
-	sha := w.CommitSHA.String
-	if len(sha) > shortCommitLength {
-		return sha[:shortCommitLength]
-	}
-
-	return sha
-}
-
 func (w *WebhookEvent) insert(ctx context.Context) error {
 	query := `
 		INSERT INTO webhook_events (

internal/server/routes.go

@@ -70,7 +70,6 @@ func (s *Server) SetupRoutes() {
 			r.Post("/apps/{id}/deploy", s.handlers.HandleAppDeploy())
 			r.Post("/apps/{id}/deployments/cancel", s.handlers.HandleCancelDeploy())
 			r.Get("/apps/{id}/deployments", s.handlers.HandleAppDeployments())
-			r.Get("/apps/{id}/webhooks", s.handlers.HandleAppWebhookEvents())
 			r.Get("/apps/{id}/deployments/{deploymentID}/logs", s.handlers.HandleDeploymentLogsAPI())
 			r.Get("/apps/{id}/deployments/{deploymentID}/download", s.handlers.HandleDeploymentLogDownload())
 			r.Get("/apps/{id}/logs", s.handlers.HandleAppLogs())
@@ -83,9 +82,9 @@ func (s *Server) SetupRoutes() {
 			r.Post("/apps/{id}/start", s.handlers.HandleAppStart())
 
 			// Environment variables
-			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())
+			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())
 
 			// Labels
 			r.Post("/apps/{id}/labels", s.handlers.HandleLabelAdd())

static/js/app-detail.js

@@ -6,215 +6,189 @@
  */
 
 document.addEventListener("alpine:init", () => {
-    Alpine.data("appDetail", (config) => ({
-        appId: config.appId,
-        currentDeploymentId: config.initialDeploymentId,
-        appStatus: config.initialStatus || "unknown",
-        containerLogs: "Loading container logs...",
-        containerStatus: "unknown",
-        buildLogs: config.initialDeploymentId
-            ? "Loading build logs..."
-            : "No deployments yet",
-        buildStatus: config.initialBuildStatus || "unknown",
-        showBuildLogs: !!config.initialDeploymentId,
-        deploying: false,
-        deployments: [],
-        // Track whether user wants auto-scroll (per log pane)
-        _containerAutoScroll: true,
-        _buildAutoScroll: true,
-        _pollTimer: null,
+  Alpine.data("appDetail", (config) => ({
+    appId: config.appId,
+    currentDeploymentId: config.initialDeploymentId,
+    appStatus: config.initialStatus || "unknown",
+    containerLogs: "Loading container logs...",
+    containerStatus: "unknown",
+    buildLogs: config.initialDeploymentId
+      ? "Loading build logs..."
+      : "No deployments yet",
+    buildStatus: config.initialBuildStatus || "unknown",
+    showBuildLogs: !!config.initialDeploymentId,
+    deploying: false,
+    deployments: [],
+    // Track whether user wants auto-scroll (per log pane)
+    _containerAutoScroll: true,
+    _buildAutoScroll: true,
+    _pollTimer: null,
 
-        init() {
-            this.deploying = Alpine.store("utils").isDeploying(this.appStatus);
-            this.fetchAll();
-            this._schedulePoll();
+    init() {
+      this.deploying = Alpine.store("utils").isDeploying(this.appStatus);
+      this.fetchAll();
+      this._schedulePoll();
 
-            // Set up scroll listeners after DOM is ready
-            this.$nextTick(() => {
-                this._initScrollTracking(
-                    this.$refs.containerLogsWrapper,
-                    "_containerAutoScroll",
-                );
-                this._initScrollTracking(
-                    this.$refs.buildLogsWrapper,
-                    "_buildAutoScroll",
-                );
-            });
-        },
+      // Set up scroll listeners after DOM is ready
+      this.$nextTick(() => {
+        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;
-            this._pollTimer = setTimeout(() => {
-                this.fetchAll();
-                this._schedulePoll();
-            }, interval);
-        },
+    _schedulePoll() {
+      if (this._pollTimer) clearTimeout(this._pollTimer);
+      const interval = Alpine.store("utils").isDeploying(this.appStatus) ? 1000 : 10000;
+      this._pollTimer = setTimeout(() => {
+        this.fetchAll();
+        this._schedulePoll();
+      }, interval);
+    },
 
-        _initScrollTracking(el, flag) {
-            if (!el) return;
-            el.addEventListener(
-                "scroll",
-                () => {
-                    this[flag] = Alpine.store("utils").isScrolledToBottom(el);
-                },
-                { passive: true },
-            );
-        },
+    _initScrollTracking(el, flag) {
+      if (!el) return;
+      el.addEventListener('scroll', () => {
+        this[flag] = Alpine.store("utils").isScrolledToBottom(el);
+      }, { passive: true });
+    },
 
-        fetchAll() {
-            this.fetchAppStatus();
-            // Only fetch logs when the respective pane is visible
-            if (
-                this.$refs.containerLogsWrapper &&
-                this._isElementVisible(this.$refs.containerLogsWrapper)
-            ) {
-                this.fetchContainerLogs();
-            }
-            if (
-                this.showBuildLogs &&
-                this.$refs.buildLogsWrapper &&
-                this._isElementVisible(this.$refs.buildLogsWrapper)
-            ) {
-                this.fetchBuildLogs();
-            }
-            this.fetchRecentDeployments();
-        },
+    fetchAll() {
+      this.fetchAppStatus();
+      // Only fetch logs when the respective pane is visible
+      if (this.$refs.containerLogsWrapper && this._isElementVisible(this.$refs.containerLogsWrapper)) {
+        this.fetchContainerLogs();
+      }
+      if (this.showBuildLogs && this.$refs.buildLogsWrapper && this._isElementVisible(this.$refs.buildLogsWrapper)) {
+        this.fetchBuildLogs();
+      }
+      this.fetchRecentDeployments();
+    },
 
-        _isElementVisible(el) {
-            if (!el) return false;
-            // Check if element is in viewport (roughly)
-            const rect = el.getBoundingClientRect();
-            return rect.bottom > 0 && rect.top < window.innerHeight;
-        },
+    _isElementVisible(el) {
+      if (!el) return false;
+      // Check if element is in viewport (roughly)
+      const rect = el.getBoundingClientRect();
+      return rect.bottom > 0 && rect.top < window.innerHeight;
+    },
 
-        async fetchAppStatus() {
-            try {
-                const res = await fetch(`/apps/${this.appId}/status`);
-                const data = await res.json();
-                const wasDeploying = this.deploying;
-                this.appStatus = data.status;
-                this.deploying = Alpine.store("utils").isDeploying(data.status);
+    async fetchAppStatus() {
+      try {
+        const res = await fetch(`/apps/${this.appId}/status`);
+        const data = await res.json();
+        const wasDeploying = this.deploying;
+        this.appStatus = data.status;
+        this.deploying = Alpine.store("utils").isDeploying(data.status);
 
-                // Re-schedule polling when deployment state changes
-                if (this.deploying !== wasDeploying) {
-                    this._schedulePoll();
-                }
+        // Re-schedule polling when deployment state changes
+        if (this.deploying !== wasDeploying) {
+          this._schedulePoll();
+        }
 
-                if (
-                    data.latestDeploymentID &&
-                    data.latestDeploymentID !== this.currentDeploymentId
-                ) {
-                    this.currentDeploymentId = data.latestDeploymentID;
-                    this.showBuildLogs = true;
-                    this.fetchBuildLogs();
-                }
-            } catch (err) {
-                console.error("Status fetch error:", err);
-            }
-        },
+        if (
+          data.latestDeploymentID &&
+          data.latestDeploymentID !== this.currentDeploymentId
+        ) {
+          this.currentDeploymentId = data.latestDeploymentID;
+          this.showBuildLogs = true;
+          this.fetchBuildLogs();
+        }
+      } catch (err) {
+        console.error("Status fetch error:", err);
+      }
+    },
 
-        async fetchContainerLogs() {
-            try {
-                const res = await fetch(`/apps/${this.appId}/container-logs`);
-                const data = await res.json();
-                const newLogs = data.logs || "No logs available";
-                const changed = newLogs !== this.containerLogs;
-                this.containerLogs = newLogs;
-                this.containerStatus = data.status;
-                if (changed && this._containerAutoScroll) {
-                    this.$nextTick(() => {
-                        Alpine.store("utils").scrollToBottom(
-                            this.$refs.containerLogsWrapper,
-                        );
-                    });
-                }
-            } catch (err) {
-                this.containerLogs = "Failed to fetch logs";
-            }
-        },
+    async fetchContainerLogs() {
+      try {
+        const res = await fetch(`/apps/${this.appId}/container-logs`);
+        const data = await res.json();
+        const newLogs = data.logs || "No logs available";
+        const changed = newLogs !== this.containerLogs;
+        this.containerLogs = newLogs;
+        this.containerStatus = data.status;
+        if (changed && this._containerAutoScroll) {
+          this.$nextTick(() => {
+            Alpine.store("utils").scrollToBottom(this.$refs.containerLogsWrapper);
+          });
+        }
+      } catch (err) {
+        this.containerLogs = "Failed to fetch logs";
+      }
+    },
 
-        async fetchBuildLogs() {
-            if (!this.currentDeploymentId) return;
-            try {
-                const res = await fetch(
-                    `/apps/${this.appId}/deployments/${this.currentDeploymentId}/logs`,
-                );
-                const data = await res.json();
-                const newLogs = data.logs || "No build logs available";
-                const changed = newLogs !== this.buildLogs;
-                this.buildLogs = newLogs;
-                this.buildStatus = data.status;
-                if (changed && this._buildAutoScroll) {
-                    this.$nextTick(() => {
-                        Alpine.store("utils").scrollToBottom(
-                            this.$refs.buildLogsWrapper,
-                        );
-                    });
-                }
-            } catch (err) {
-                this.buildLogs = "Failed to fetch logs";
-            }
-        },
+    async fetchBuildLogs() {
+      if (!this.currentDeploymentId) return;
+      try {
+        const res = await fetch(
+          `/apps/${this.appId}/deployments/${this.currentDeploymentId}/logs`,
+        );
+        const data = await res.json();
+        const newLogs = data.logs || "No build logs available";
+        const changed = newLogs !== this.buildLogs;
+        this.buildLogs = newLogs;
+        this.buildStatus = data.status;
+        if (changed && this._buildAutoScroll) {
+          this.$nextTick(() => {
+            Alpine.store("utils").scrollToBottom(this.$refs.buildLogsWrapper);
+          });
+        }
+      } catch (err) {
+        this.buildLogs = "Failed to fetch logs";
+      }
+    },
 
-        async fetchRecentDeployments() {
-            try {
-                const res = await fetch(
-                    `/apps/${this.appId}/recent-deployments`,
-                );
-                const data = await res.json();
-                this.deployments = data.deployments || [];
-            } catch (err) {
-                console.error("Deployments fetch error:", err);
-            }
-        },
+    async fetchRecentDeployments() {
+      try {
+        const res = await fetch(`/apps/${this.appId}/recent-deployments`);
+        const data = await res.json();
+        this.deployments = data.deployments || [];
+      } catch (err) {
+        console.error("Deployments fetch error:", err);
+      }
+    },
 
-        submitDeploy() {
-            this.deploying = true;
-        },
+    submitDeploy() {
+      this.deploying = true;
+    },
 
-        get statusBadgeClass() {
-            return Alpine.store("utils").statusBadgeClass(this.appStatus);
-        },
+    get statusBadgeClass() {
+      return Alpine.store("utils").statusBadgeClass(this.appStatus);
+    },
 
-        get statusLabel() {
-            return Alpine.store("utils").statusLabel(this.appStatus);
-        },
+    get statusLabel() {
+      return Alpine.store("utils").statusLabel(this.appStatus);
+    },
 
-        get containerStatusBadgeClass() {
-            return (
-                Alpine.store("utils").statusBadgeClass(this.containerStatus) +
-                " text-xs"
-            );
-        },
+    get containerStatusBadgeClass() {
+      return (
+        Alpine.store("utils").statusBadgeClass(this.containerStatus) +
+        " text-xs"
+      );
+    },
 
-        get containerStatusLabel() {
-            return Alpine.store("utils").statusLabel(this.containerStatus);
-        },
+    get containerStatusLabel() {
+      return Alpine.store("utils").statusLabel(this.containerStatus);
+    },
 
-        get buildStatusBadgeClass() {
-            return (
-                Alpine.store("utils").statusBadgeClass(this.buildStatus) +
-                " text-xs"
-            );
-        },
+    get buildStatusBadgeClass() {
+      return (
+        Alpine.store("utils").statusBadgeClass(this.buildStatus) + " text-xs"
+      );
+    },
 
-        get buildStatusLabel() {
-            return Alpine.store("utils").statusLabel(this.buildStatus);
-        },
+    get buildStatusLabel() {
+      return Alpine.store("utils").statusLabel(this.buildStatus);
+    },
 
-        deploymentStatusClass(status) {
-            return Alpine.store("utils").statusBadgeClass(status);
-        },
+    deploymentStatusClass(status) {
+      return Alpine.store("utils").statusBadgeClass(status);
+    },
 
-        deploymentStatusLabel(status) {
-            return Alpine.store("utils").statusLabel(status);
-        },
+    deploymentStatusLabel(status) {
+      return Alpine.store("utils").statusLabel(status);
+    },
 
-        formatTime(isoTime) {
-            return Alpine.store("utils").formatRelativeTime(isoTime);
-        },
-    }));
+    formatTime(isoTime) {
+      return Alpine.store("utils").formatRelativeTime(isoTime);
+    },
+  }));
 });

static/js/components.js

@@ -6,66 +6,66 @@
  */
 
 document.addEventListener("alpine:init", () => {
-    // ============================================
-    // Copy Button Component
-    // ============================================
-    Alpine.data("copyButton", (targetId) => ({
-        copied: false,
-        async copy() {
-            const target = document.getElementById(targetId);
-            if (!target) return;
-            const text = target.textContent || target.value;
-            const success = await Alpine.store("utils").copyToClipboard(text);
-            if (success) {
-                this.copied = true;
-                setTimeout(() => {
-                    this.copied = false;
-                }, 2000);
-            }
-        },
-    }));
+  // ============================================
+  // Copy Button Component
+  // ============================================
+  Alpine.data("copyButton", (targetId) => ({
+    copied: false,
+    async copy() {
+      const target = document.getElementById(targetId);
+      if (!target) return;
+      const text = target.textContent || target.value;
+      const success = await Alpine.store("utils").copyToClipboard(text);
+      if (success) {
+        this.copied = true;
+        setTimeout(() => {
+          this.copied = false;
+        }, 2000);
+      }
+    },
+  }));
 
-    // ============================================
-    // Confirm Action Component
-    // ============================================
-    Alpine.data("confirmAction", (message) => ({
-        confirm(event) {
-            if (!window.confirm(message)) {
-                event.preventDefault();
-            }
-        },
-    }));
+  // ============================================
+  // Confirm Action Component
+  // ============================================
+  Alpine.data("confirmAction", (message) => ({
+    confirm(event) {
+      if (!window.confirm(message)) {
+        event.preventDefault();
+      }
+    },
+  }));
 
-    // ============================================
-    // Auto-dismiss Alert Component
-    // ============================================
-    Alpine.data("autoDismiss", (delay = 5000) => ({
-        show: true,
-        init() {
-            setTimeout(() => {
-                this.dismiss();
-            }, delay);
-        },
-        dismiss() {
-            this.show = false;
-            setTimeout(() => {
-                this.$el.remove();
-            }, 300);
-        },
-    }));
+  // ============================================
+  // Auto-dismiss Alert Component
+  // ============================================
+  Alpine.data("autoDismiss", (delay = 5000) => ({
+    show: true,
+    init() {
+      setTimeout(() => {
+        this.dismiss();
+      }, delay);
+    },
+    dismiss() {
+      this.show = false;
+      setTimeout(() => {
+        this.$el.remove();
+      }, 300);
+    },
+  }));
 
-    // ============================================
-    // Relative Time Component
-    // ============================================
-    Alpine.data("relativeTime", (isoTime) => ({
-        display: "",
-        init() {
-            this.update();
-            // Update every minute
-            setInterval(() => this.update(), 60000);
-        },
-        update() {
-            this.display = Alpine.store("utils").formatRelativeTime(isoTime);
-        },
-    }));
+  // ============================================
+  // Relative Time Component
+  // ============================================
+  Alpine.data("relativeTime", (isoTime) => ({
+    display: "",
+    init() {
+      this.update();
+      // Update every minute
+      setInterval(() => this.update(), 60000);
+    },
+    update() {
+      this.display = Alpine.store("utils").formatRelativeTime(isoTime);
+    },
+  }));
 });

static/js/dashboard.js

@@ -5,18 +5,17 @@
  */
 
 document.addEventListener("alpine:init", () => {
-    Alpine.data("dashboard", () => ({
-        init() {
-            // Update relative times every minute
-            setInterval(() => {
-                this.$el.querySelectorAll("[data-time]").forEach((el) => {
-                    const time = el.getAttribute("data-time");
-                    if (time) {
-                        el.textContent =
-                            Alpine.store("utils").formatRelativeTime(time);
-                    }
-                });
-            }, 60000);
-        },
-    }));
+  Alpine.data("dashboard", () => ({
+    init() {
+      // Update relative times every minute
+      setInterval(() => {
+        this.$el.querySelectorAll("[data-time]").forEach((el) => {
+          const time = el.getAttribute("data-time");
+          if (time) {
+            el.textContent = Alpine.store("utils").formatRelativeTime(time);
+          }
+        });
+      }, 60000);
+    },
+  }));
 });

static/js/deployment.js

@@ -6,180 +6,171 @@
  */
 
 document.addEventListener("alpine:init", () => {
-    // ============================================
-    // Deployment Card Component (for individual deployment cards)
-    // ============================================
-    Alpine.data("deploymentCard", (config) => ({
-        appId: config.appId,
-        deploymentId: config.deploymentId,
-        logs: "",
-        status: config.status || "",
-        pollInterval: null,
-        _autoScroll: true,
+  // ============================================
+  // Deployment Card Component (for individual deployment cards)
+  // ============================================
+  Alpine.data("deploymentCard", (config) => ({
+    appId: config.appId,
+    deploymentId: config.deploymentId,
+    logs: "",
+    status: config.status || "",
+    pollInterval: null,
+    _autoScroll: true,
 
-        init() {
-            // Read initial logs from script tag (avoids escaping issues)
-            const initialLogsEl = this.$el.querySelector(".initial-logs");
-            this.logs = initialLogsEl?.dataset.logs || "Loading...";
+    init() {
+      // Read initial logs from script tag (avoids escaping issues)
+      const initialLogsEl = this.$el.querySelector(".initial-logs");
+      this.logs = initialLogsEl?.dataset.logs || "Loading...";
 
-            // Set up scroll tracking
-            this.$nextTick(() => {
-                const wrapper = this.$refs.logsWrapper;
-                if (wrapper) {
-                    wrapper.addEventListener(
-                        "scroll",
-                        () => {
-                            this._autoScroll =
-                                Alpine.store("utils").isScrolledToBottom(
-                                    wrapper,
-                                );
-                        },
-                        { passive: true },
-                    );
-                }
-            });
+      // Set up scroll tracking
+      this.$nextTick(() => {
+        const wrapper = this.$refs.logsWrapper;
+        if (wrapper) {
+          wrapper.addEventListener('scroll', () => {
+            this._autoScroll = Alpine.store("utils").isScrolledToBottom(wrapper);
+          }, { passive: true });
+        }
+      });
 
-            // Only poll if deployment is in progress
-            if (Alpine.store("utils").isDeploying(this.status)) {
-                this.fetchLogs();
-                this.pollInterval = setInterval(() => this.fetchLogs(), 1000);
-            }
-        },
+      // Only poll if deployment is in progress
+      if (Alpine.store("utils").isDeploying(this.status)) {
+        this.fetchLogs();
+        this.pollInterval = setInterval(() => this.fetchLogs(), 1000);
+      }
+    },
 
-        destroy() {
-            if (this.pollInterval) {
-                clearInterval(this.pollInterval);
-            }
-        },
+    destroy() {
+      if (this.pollInterval) {
+        clearInterval(this.pollInterval);
+      }
+    },
 
-        async fetchLogs() {
-            try {
-                const res = await fetch(
-                    `/apps/${this.appId}/deployments/${this.deploymentId}/logs`,
-                );
-                const data = await res.json();
-                const newLogs = data.logs || "No logs available";
-                const logsChanged = newLogs !== this.logs;
-                this.logs = newLogs;
-                this.status = data.status;
+    async fetchLogs() {
+      try {
+        const res = await fetch(
+          `/apps/${this.appId}/deployments/${this.deploymentId}/logs`,
+        );
+        const data = await res.json();
+        const newLogs = data.logs || "No logs available";
+        const logsChanged = newLogs !== this.logs;
+        this.logs = newLogs;
+        this.status = data.status;
 
-                // 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,
-                        );
-                    });
-                }
+        // 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);
+          });
+        }
 
-                // Stop polling if deployment is done
-                if (!Alpine.store("utils").isDeploying(data.status)) {
-                    if (this.pollInterval) {
-                        clearInterval(this.pollInterval);
-                        this.pollInterval = null;
-                    }
-                    // Reload page to show final state with duration etc
-                    window.location.reload();
-                }
-            } catch (err) {
-                console.error("Logs fetch error:", err);
-            }
-        },
+        // Stop polling if deployment is done
+        if (!Alpine.store("utils").isDeploying(data.status)) {
+          if (this.pollInterval) {
+            clearInterval(this.pollInterval);
+            this.pollInterval = null;
+          }
+          // Reload page to show final state with duration etc
+          window.location.reload();
+        }
+      } catch (err) {
+        console.error("Logs fetch error:", err);
+      }
+    },
 
-        get statusBadgeClass() {
-            return Alpine.store("utils").statusBadgeClass(this.status);
-        },
+    get statusBadgeClass() {
+      return Alpine.store("utils").statusBadgeClass(this.status);
+    },
 
-        get statusLabel() {
-            return Alpine.store("utils").statusLabel(this.status);
-        },
-    }));
+    get statusLabel() {
+      return Alpine.store("utils").statusLabel(this.status);
+    },
+  }));
 
-    // ============================================
-    // Deployments History Page Component
-    // ============================================
-    Alpine.data("deploymentsPage", (config) => ({
-        appId: config.appId,
-        currentDeploymentId: null,
-        isDeploying: false,
+  // ============================================
+  // Deployments History Page Component
+  // ============================================
+  Alpine.data("deploymentsPage", (config) => ({
+    appId: config.appId,
+    currentDeploymentId: null,
+    isDeploying: false,
 
-        init() {
-            // Check for in-progress deployments on page load
-            const inProgressCard = document.querySelector(
-                '[data-status="building"], [data-status="deploying"]',
-            );
-            if (inProgressCard) {
-                this.currentDeploymentId = parseInt(
-                    inProgressCard.getAttribute("data-deployment-id"),
-                    10,
-                );
-                this.isDeploying = true;
-            }
+    init() {
+      // Check for in-progress deployments on page load
+      const inProgressCard = document.querySelector(
+        '[data-status="building"], [data-status="deploying"]',
+      );
+      if (inProgressCard) {
+        this.currentDeploymentId = parseInt(
+          inProgressCard.getAttribute("data-deployment-id"),
+          10,
+        );
+        this.isDeploying = true;
+      }
 
-            this.fetchAppStatus();
-            this._scheduleStatusPoll();
-        },
+      this.fetchAppStatus();
+      this._scheduleStatusPoll();
+    },
 
-        _statusPollTimer: null,
+    _statusPollTimer: null,
 
-        _scheduleStatusPoll() {
-            if (this._statusPollTimer) clearTimeout(this._statusPollTimer);
-            const interval = this.isDeploying ? 1000 : 10000;
-            this._statusPollTimer = setTimeout(() => {
-                this.fetchAppStatus();
-                this._scheduleStatusPoll();
-            }, interval);
-        },
+    _scheduleStatusPoll() {
+      if (this._statusPollTimer) clearTimeout(this._statusPollTimer);
+      const interval = this.isDeploying ? 1000 : 10000;
+      this._statusPollTimer = setTimeout(() => {
+        this.fetchAppStatus();
+        this._scheduleStatusPoll();
+      }, interval);
+    },
 
-        async fetchAppStatus() {
-            try {
-                const res = await fetch(`/apps/${this.appId}/status`);
-                const data = await res.json();
-                // Use deployment status, not app status - it's more reliable during transitions
-                const deploying = Alpine.store("utils").isDeploying(
-                    data.latestDeploymentStatus,
-                );
+    async fetchAppStatus() {
+      try {
+        const res = await fetch(`/apps/${this.appId}/status`);
+        const data = await res.json();
+        // Use deployment status, not app status - it's more reliable during transitions
+        const deploying = Alpine.store("utils").isDeploying(
+          data.latestDeploymentStatus,
+        );
 
-                // Detect new deployment
-                if (
-                    data.latestDeploymentID &&
-                    data.latestDeploymentID !== this.currentDeploymentId
-                ) {
-                    // Check if we have a card for this deployment
-                    const hasCard = document.querySelector(
-                        `[data-deployment-id="${data.latestDeploymentID}"]`,
-                    );
+        // Detect new deployment
+        if (
+          data.latestDeploymentID &&
+          data.latestDeploymentID !== this.currentDeploymentId
+        ) {
+          // Check if we have a card for this deployment
+          const hasCard = document.querySelector(
+            `[data-deployment-id="${data.latestDeploymentID}"]`,
+          );
 
-                    if (deploying && !hasCard) {
-                        // New deployment started but no card exists - reload to show it
-                        window.location.reload();
+          if (deploying && !hasCard) {
+            // New deployment started but no card exists - reload to show it
+            window.location.reload();
 
-                        return;
-                    }
+            return;
+          }
 
-                    this.currentDeploymentId = data.latestDeploymentID;
-                }
+          this.currentDeploymentId = data.latestDeploymentID;
+        }
 
-                // Update deploying state based on latest deployment status
-                if (deploying && !this.isDeploying) {
-                    this.isDeploying = true;
-                    this._scheduleStatusPoll(); // Switch to fast polling
-                } else if (!deploying && this.isDeploying) {
-                    // Deployment finished - reload to show final state
-                    this.isDeploying = false;
-                    window.location.reload();
-                }
-            } catch (err) {
-                console.error("Status fetch error:", err);
-            }
-        },
+        // Update deploying state based on latest deployment status
+        if (deploying && !this.isDeploying) {
+          this.isDeploying = true;
+          this._scheduleStatusPoll(); // Switch to fast polling
+        } else if (!deploying && this.isDeploying) {
+          // Deployment finished - reload to show final state
+          this.isDeploying = false;
+          window.location.reload();
+        }
+      } catch (err) {
+        console.error("Status fetch error:", err);
+      }
+    },
 
-        submitDeploy() {
-            this.isDeploying = true;
-        },
+    submitDeploy() {
+      this.isDeploying = true;
+    },
 
-        formatTime(isoTime) {
-            return Alpine.store("utils").formatRelativeTime(isoTime);
-        },
-    }));
+    formatTime(isoTime) {
+      return Alpine.store("utils").formatRelativeTime(isoTime);
+    },
+  }));
 });

static/js/utils.js

@@ -5,144 +5,139 @@
  */
 
 document.addEventListener("alpine:init", () => {
-    Alpine.store("utils", {
-        /**
-         * Format a date string as relative time (e.g., "5 minutes ago")
-         */
-        formatRelativeTime(dateStr) {
-            if (!dateStr) return "";
-            const date = new Date(dateStr);
-            const now = new Date();
-            const diffMs = now - date;
-            const diffSec = Math.floor(diffMs / 1000);
-            const diffMin = Math.floor(diffSec / 60);
-            const diffHour = Math.floor(diffMin / 60);
-            const diffDay = Math.floor(diffHour / 24);
+  Alpine.store("utils", {
+    /**
+     * Format a date string as relative time (e.g., "5 minutes ago")
+     */
+    formatRelativeTime(dateStr) {
+      if (!dateStr) return "";
+      const date = new Date(dateStr);
+      const now = new Date();
+      const diffMs = now - date;
+      const diffSec = Math.floor(diffMs / 1000);
+      const diffMin = Math.floor(diffSec / 60);
+      const diffHour = Math.floor(diffMin / 60);
+      const diffDay = Math.floor(diffHour / 24);
 
-            if (diffSec < 60) return "just now";
-            if (diffMin < 60)
-                return (
-                    diffMin + (diffMin === 1 ? " minute ago" : " minutes ago")
-                );
-            if (diffHour < 24)
-                return diffHour + (diffHour === 1 ? " hour ago" : " hours ago");
-            if (diffDay < 7)
-                return diffDay + (diffDay === 1 ? " day ago" : " days ago");
-            return date.toLocaleDateString();
-        },
+      if (diffSec < 60) return "just now";
+      if (diffMin < 60)
+        return diffMin + (diffMin === 1 ? " minute ago" : " minutes ago");
+      if (diffHour < 24)
+        return diffHour + (diffHour === 1 ? " hour ago" : " hours ago");
+      if (diffDay < 7)
+        return diffDay + (diffDay === 1 ? " day ago" : " days ago");
+      return date.toLocaleDateString();
+    },
 
-        /**
-         * Get the badge class for a given status
-         */
-        statusBadgeClass(status) {
-            if (status === "running" || status === "success")
-                return "badge-success";
-            if (status === "building" || status === "deploying")
-                return "badge-warning";
-            if (status === "failed" || status === "error") return "badge-error";
-            return "badge-neutral";
-        },
+    /**
+     * Get the badge class for a given status
+     */
+    statusBadgeClass(status) {
+      if (status === "running" || status === "success") return "badge-success";
+      if (status === "building" || status === "deploying")
+        return "badge-warning";
+      if (status === "failed" || status === "error") return "badge-error";
+      return "badge-neutral";
+    },
 
-        /**
-         * Format status for display (capitalize first letter)
-         */
-        statusLabel(status) {
-            if (!status) return "";
-            return status.charAt(0).toUpperCase() + status.slice(1);
-        },
+    /**
+     * Format status for display (capitalize first letter)
+     */
+    statusLabel(status) {
+      if (!status) return "";
+      return status.charAt(0).toUpperCase() + status.slice(1);
+    },
 
-        /**
-         * Check if status indicates active deployment
-         */
-        isDeploying(status) {
-            return status === "building" || status === "deploying";
-        },
+    /**
+     * Check if status indicates active deployment
+     */
+    isDeploying(status) {
+      return status === "building" || status === "deploying";
+    },
 
-        /**
-         * Scroll an element to the bottom
-         */
-        scrollToBottom(el) {
-            if (el) {
-                requestAnimationFrame(() => {
-                    el.scrollTop = el.scrollHeight;
-                });
-            }
-        },
+    /**
+     * Scroll an element to the bottom
+     */
+    scrollToBottom(el) {
+      if (el) {
+        requestAnimationFrame(() => {
+          el.scrollTop = el.scrollHeight;
+        });
+      }
+    },
 
-        /**
-         * Check if a scrollable element is at (or near) the bottom.
-         * Tolerance of 30px accounts for rounding and partial lines.
-         */
-        isScrolledToBottom(el, tolerance = 30) {
-            if (!el) return true;
-            return (
-                el.scrollHeight - el.scrollTop - el.clientHeight <= tolerance
-            );
-        },
+    /**
+     * Check if a scrollable element is at (or near) the bottom.
+     * Tolerance of 30px accounts for rounding and partial lines.
+     */
+    isScrolledToBottom(el, tolerance = 30) {
+      if (!el) return true;
+      return el.scrollHeight - el.scrollTop - el.clientHeight <= tolerance;
+    },
 
-        /**
-         * Copy text to clipboard
-         */
-        async copyToClipboard(text, button) {
-            try {
-                await navigator.clipboard.writeText(text);
-                return true;
-            } catch (err) {
-                // Fallback for older browsers
-                const textArea = document.createElement("textarea");
-                textArea.value = text;
-                textArea.style.position = "fixed";
-                textArea.style.left = "-9999px";
-                document.body.appendChild(textArea);
-                textArea.select();
-                try {
-                    document.execCommand("copy");
-                    document.body.removeChild(textArea);
-                    return true;
-                } catch (e) {
-                    document.body.removeChild(textArea);
-                    return false;
-                }
-            }
-        },
-    });
+    /**
+     * Copy text to clipboard
+     */
+    async copyToClipboard(text, button) {
+      try {
+        await navigator.clipboard.writeText(text);
+        return true;
+      } catch (err) {
+        // Fallback for older browsers
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        textArea.style.position = "fixed";
+        textArea.style.left = "-9999px";
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+          document.execCommand("copy");
+          document.body.removeChild(textArea);
+          return true;
+        } catch (e) {
+          document.body.removeChild(textArea);
+          return false;
+        }
+      }
+    },
+  });
 });
 
 // ============================================
 // Legacy support - expose utilities globally
 // ============================================
 window.upaas = {
-    // These are kept for backwards compatibility but templates should use Alpine.js
-    formatRelativeTime(dateStr) {
-        if (!dateStr) return "";
-        const date = new Date(dateStr);
-        const now = new Date();
-        const diffMs = now - date;
-        const diffSec = Math.floor(diffMs / 1000);
-        const diffMin = Math.floor(diffSec / 60);
-        const diffHour = Math.floor(diffMin / 60);
-        const diffDay = Math.floor(diffHour / 24);
+  // These are kept for backwards compatibility but templates should use Alpine.js
+  formatRelativeTime(dateStr) {
+    if (!dateStr) return "";
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = now - date;
+    const diffSec = Math.floor(diffMs / 1000);
+    const diffMin = Math.floor(diffSec / 60);
+    const diffHour = Math.floor(diffMin / 60);
+    const diffDay = Math.floor(diffHour / 24);
 
-        if (diffSec < 60) return "just now";
-        if (diffMin < 60)
-            return diffMin + (diffMin === 1 ? " minute ago" : " minutes ago");
-        if (diffHour < 24)
-            return diffHour + (diffHour === 1 ? " hour ago" : " hours ago");
-        if (diffDay < 7)
-            return diffDay + (diffDay === 1 ? " day ago" : " days ago");
-        return date.toLocaleDateString();
-    },
-    // Placeholder functions - templates should migrate to Alpine.js
-    initAppDetailPage() {},
-    initDeploymentsPage() {},
+    if (diffSec < 60) return "just now";
+    if (diffMin < 60)
+      return diffMin + (diffMin === 1 ? " minute ago" : " minutes ago");
+    if (diffHour < 24)
+      return diffHour + (diffHour === 1 ? " hour ago" : " hours ago");
+    if (diffDay < 7)
+      return diffDay + (diffDay === 1 ? " day ago" : " days ago");
+    return date.toLocaleDateString();
+  },
+  // Placeholder functions - templates should migrate to Alpine.js
+  initAppDetailPage() {},
+  initDeploymentsPage() {},
 };
 
 // Update relative times on page load for non-Alpine elements
 document.addEventListener("DOMContentLoaded", () => {
-    document.querySelectorAll(".relative-time[data-time]").forEach((el) => {
-        const time = el.getAttribute("data-time");
-        if (time) {
-            el.textContent = window.upaas.formatRelativeTime(time);
-        }
-    });
+  document.querySelectorAll(".relative-time[data-time]").forEach((el) => {
+    const time = el.getAttribute("data-time");
+    if (time) {
+      el.textContent = window.upaas.formatRelativeTime(time);
+    }
+  });
 });

templates/app_detail.html

@@ -77,10 +77,7 @@
 
     <!-- Webhook URL -->
     <div class="card p-6 mb-6">
-        <div class="flex items-center justify-between mb-4">
-            <h2 class="section-title">Webhook URL</h2>
-            <a href="/apps/{{.App.ID}}/webhooks" class="text-primary-600 hover:text-primary-800 text-sm">Event History</a>
-        </div>
+        <h2 class="section-title mb-4">Webhook URL</h2>
         <p class="text-sm text-gray-500 mb-3">Add this URL as a push webhook in your Gitea repository:</p>
         <div class="copy-field" x-data="copyButton('webhook-url')">
             <code id="webhook-url" class="copy-field-value text-xs">{{.WebhookURL}}</code>
@@ -125,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-vars/{{.ID}}/delete" class="inline" x-data="confirmAction('Delete this environment variable?')" @submit="confirm($event)">
+                                <form method="POST" action="/apps/{{$.App.ID}}/env/{{.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>
@@ -133,7 +130,7 @@
                         </template>
                         <template x-if="editing">
                             <td colspan="3">
-                                <form method="POST" action="/apps/{{$.App.ID}}/env-vars/{{.ID}}/edit" class="flex gap-2 items-center">
+                                <form method="POST" action="/apps/{{$.App.ID}}/env/{{.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">

templates/templates.go

@@ -44,7 +44,6 @@ func initTemplates() {
 		"app_detail.html",
 		"app_edit.html",
 		"deployments.html",
-		"webhook_events.html",
 	}
 
 	pageTemplates = make(map[string]*template.Template)

templates/webhook_events.html

@@ -1,79 +0,0 @@
-{{template "base" .}}
-
-{{define "title"}}Webhook Events - {{.App.Name}} - µPaaS{{end}}
-
-{{define "content"}}
-{{template "nav" .}}
-
-<main class="max-w-4xl mx-auto px-4 py-8">
-    <div class="mb-6">
-        <a href="/apps/{{.App.ID}}" class="text-primary-600 hover:text-primary-800 inline-flex items-center">
-            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
-            </svg>
-            Back to {{.App.Name}}
-        </a>
-    </div>
-
-    <div class="section-header">
-        <h1 class="text-2xl font-medium text-gray-900">Webhook Events</h1>
-    </div>
-
-    {{if .Events}}
-    <div class="card overflow-hidden">
-        <table class="table">
-            <thead class="table-header">
-                <tr>
-                    <th>Time</th>
-                    <th>Event</th>
-                    <th>Branch</th>
-                    <th>Commit</th>
-                    <th>Status</th>
-                </tr>
-            </thead>
-            <tbody class="table-body">
-                {{range .Events}}
-                <tr>
-                    <td class="text-gray-500 text-sm whitespace-nowrap">
-                        <span x-data="relativeTime('{{.CreatedAt.Format `2006-01-02T15:04:05Z07:00`}}')" x-text="display" class="cursor-default" title="{{.CreatedAt.Format `2006-01-02 15:04:05`}}"></span>
-                    </td>
-                    <td class="text-gray-700 text-sm">{{.EventType}}</td>
-                    <td class="font-mono text-gray-500 text-sm">{{.Branch}}</td>
-                    <td class="font-mono text-gray-500 text-xs">
-                        {{if and .CommitSHA.Valid .CommitURL.Valid}}
-                        <a href="{{.CommitURL.String}}" target="_blank" rel="noopener noreferrer" class="text-primary-600 hover:text-primary-800">{{.ShortCommit}}</a>
-                        {{else if .CommitSHA.Valid}}
-                        {{.ShortCommit}}
-                        {{else}}
-                        <span class="text-gray-400">-</span>
-                        {{end}}
-                    </td>
-                    <td>
-                        {{if .Matched}}
-                            {{if .Processed}}
-                            <span class="badge-success">Matched</span>
-                            {{else}}
-                            <span class="badge-warning">Matched (pending)</span>
-                            {{end}}
-                        {{else}}
-                        <span class="badge-neutral">No match</span>
-                        {{end}}
-                    </td>
-                </tr>
-                {{end}}
-            </tbody>
-        </table>
-    </div>
-    {{else}}
-    <div class="card">
-        <div class="empty-state">
-            <svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
-            </svg>
-            <h3 class="empty-state-title">No webhook events yet</h3>
-            <p class="empty-state-description">Webhook events will appear here once your repository sends push notifications.</p>
-        </div>
-    </div>
-    {{end}}
-</main>
-{{end}}