fix: reject duplicate env var keys with 400 instead of deduplicating

Replace deduplicateEnvPairs with validateEnvPairs that returns a 400 Bad Request error when duplicate keys are submitted, instead of silently deduplicating (last wins). Ref: #158
fix: dedup env var keys, add IDOR test, enforce body size limit
2026-03-10 18:37:07 -07:00 · 2026-03-10 18:14:20 -07:00 · 2026-03-10 17:42:50 -07:00 · 2026-03-10 12:25:35 -07:00 · 2026-03-10 11:37:55 -07:00 · 2026-03-10 11:23:36 -07:00
17 changed files with 1203 additions and 673 deletions
--- a/14
+++ b/14
@@ -1,4 +1,4 @@
-.PHONY: all build lint fmt fmt-check test check clean
+.PHONY: all build lint fmt fmt-check test check clean docker hooks

 BINARY := upaasd
 VERSION := $(shell git describe --tags --always --dirty 2>/dev/null || echo "dev")
@@ -22,12 +22,22 @@ fmt-check:
 	@test -z "$$(gofmt -l .)" || (echo "Files not formatted:" && gofmt -l . && exit 1)

 test:
-	go test -v -race -cover ./...
+	go test -v -race -cover -timeout 30s ./...

 # 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/
--- a/README.md
+++ b/README.md
@@ -110,11 +110,14 @@ chi Router ──► Middleware Stack ──► Handler
 ### Commands

 ```bash
-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
+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)
 ```

 ### Commit Requirements
--- a/internal/handlers/app.go
+++ b/internal/handlers/app.go
@@ -54,12 +54,18 @@ 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 == "" {
@@ -100,6 +106,9 @@ func (h *Handlers) HandleAppCreate() http.HandlerFunc { //nolint:funlen // valid
 				RepoURL:        repoURL,
 				Branch:         branch,
 				DockerfilePath: dockerfilePath,
+				DockerNetwork:  dockerNetwork,
+				NtfyTopic:      ntfyTopic,
+				SlackWebhook:   slackWebhook,
 			},
 		)
 		if createErr != nil {
@@ -894,50 +903,92 @@ func (h *Handlers) addKeyValueToApp(
 	http.Redirect(writer, request, "/apps/"+application.ID, http.StatusSeeOther)
 }

-// HandleEnvVarAdd handles adding an environment variable.
-func (h *Handlers) HandleEnvVarAdd() http.HandlerFunc {
-	return func(writer http.ResponseWriter, request *http.Request) {
-		h.addKeyValueToApp(
-			writer,
-			request,
-			func(ctx context.Context, application *models.App, key, value string) error {
-				envVar := models.NewEnvVar(h.db)
-				envVar.AppID = application.ID
-				envVar.Key = key
-				envVar.Value = value
-
-				return envVar.Save(ctx)
-			},
-		)
-	}
+// envPairJSON represents a key-value pair in the JSON request body.
+type envPairJSON struct {
+	Key   string `json:"key"`
+	Value string `json:"value"`
 }

-// HandleEnvVarDelete handles deleting an environment variable.
-func (h *Handlers) HandleEnvVarDelete() http.HandlerFunc {
+// envVarMaxBodyBytes is the maximum allowed request body size for env var saves (1 MB).
+const envVarMaxBodyBytes = 1 << 20
+
+// validateEnvPairs validates env var pairs.
+// It rejects empty keys and duplicate keys (returns a non-empty error string).
+func validateEnvPairs(pairs []envPairJSON) ([]models.EnvVarPair, string) {
+	seen := make(map[string]bool, len(pairs))
+
+	result := make([]models.EnvVarPair, 0, len(pairs))
+
+	for _, p := range pairs {
+		trimmedKey := strings.TrimSpace(p.Key)
+		if trimmedKey == "" {
+			return nil, "empty environment variable key is not allowed"
+		}
+
+		if seen[trimmedKey] {
+			return nil, "duplicate environment variable key: " + trimmedKey
+		}
+
+		seen[trimmedKey] = true
+
+		result = append(result, models.EnvVarPair{Key: trimmedKey, Value: p.Value})
+	}
+
+	return result, ""
+}
+
+// HandleEnvVarSave handles bulk saving of all environment variables.
+// It reads a JSON array of {key, value} objects from the request body,
+// deletes all existing env vars for the app, and inserts the full
+// submitted set atomically within a database transaction.
+// Duplicate keys are rejected with a 400 Bad Request error.
+func (h *Handlers) HandleEnvVarSave() http.HandlerFunc {
 	return func(writer http.ResponseWriter, request *http.Request) {
 		appID := chi.URLParam(request, "id")
-		envVarIDStr := chi.URLParam(request, "varID")

-		envVarID, parseErr := strconv.ParseInt(envVarIDStr, 10, 64)
-		if parseErr != nil {
+		application, findErr := models.FindApp(request.Context(), h.db, appID)
+		if findErr != nil || application == nil {
 			http.NotFound(writer, request)

 			return
 		}

-		envVar, findErr := models.FindEnvVar(request.Context(), h.db, envVarID)
-		if findErr != nil || envVar == nil || envVar.AppID != appID {
-			http.NotFound(writer, request)
+		// Limit request body size to prevent abuse
+		request.Body = http.MaxBytesReader(writer, request.Body, envVarMaxBodyBytes)
+
+		var pairs []envPairJSON
+
+		decodeErr := json.NewDecoder(request.Body).Decode(&pairs)
+		if decodeErr != nil {
+			h.respondJSON(writer, request, map[string]string{
+				"error": "invalid request body",
+			}, http.StatusBadRequest)

 			return
 		}

-		deleteErr := envVar.Delete(request.Context())
-		if deleteErr != nil {
-			h.log.Error("failed to delete env var", "error", deleteErr)
+		modelPairs, validationErr := validateEnvPairs(pairs)
+		if validationErr != "" {
+			h.respondJSON(writer, request, map[string]string{
+				"error": validationErr,
+			}, http.StatusBadRequest)
+
+			return
 		}

-		http.Redirect(writer, request, "/apps/"+appID, http.StatusSeeOther)
+		replaceErr := models.ReplaceEnvVarsByAppID(
+			request.Context(), h.db, application.ID, modelPairs,
+		)
+		if replaceErr != nil {
+			h.log.Error("failed to replace env vars", "error", replaceErr)
+			h.respondJSON(writer, request, map[string]string{
+				"error": "failed to save environment variables",
+			}, http.StatusInternalServerError)
+
+			return
+		}
+
+		h.respondJSON(writer, request, map[string]bool{"ok": true}, http.StatusOK)
 	}
 }

@@ -1196,59 +1247,6 @@ func ValidateVolumePath(p string) error {
 	return nil
 }

-// HandleEnvVarEdit handles editing an existing environment variable.
-func (h *Handlers) HandleEnvVarEdit() http.HandlerFunc {
-	return func(writer http.ResponseWriter, request *http.Request) {
-		appID := chi.URLParam(request, "id")
-		envVarIDStr := chi.URLParam(request, "varID")
-
-		envVarID, parseErr := strconv.ParseInt(envVarIDStr, 10, 64)
-		if parseErr != nil {
-			http.NotFound(writer, request)
-
-			return
-		}
-
-		envVar, findErr := models.FindEnvVar(request.Context(), h.db, envVarID)
-		if findErr != nil || envVar == nil || envVar.AppID != appID {
-			http.NotFound(writer, request)
-
-			return
-		}
-
-		formErr := request.ParseForm()
-		if formErr != nil {
-			http.Error(writer, "Bad Request", http.StatusBadRequest)
-
-			return
-		}
-
-		key := request.FormValue("key")
-		value := request.FormValue("value")
-
-		if key == "" || value == "" {
-			http.Redirect(writer, request, "/apps/"+appID, http.StatusSeeOther)
-
-			return
-		}
-
-		envVar.Key = key
-		envVar.Value = value
-
-		saveErr := envVar.Save(request.Context())
-		if saveErr != nil {
-			h.log.Error("failed to update env var", "error", saveErr)
-		}
-
-		http.Redirect(
-			writer,
-			request,
-			"/apps/"+appID+"?success=env-updated",
-			http.StatusSeeOther,
-		)
-	}
-}
-
 // HandleLabelEdit handles editing an existing label.
 func (h *Handlers) HandleLabelEdit() http.HandlerFunc {
 	return func(writer http.ResponseWriter, request *http.Request) {
--- a/internal/handlers/handlers_test.go
+++ b/internal/handlers/handlers_test.go
@@ -560,45 +560,242 @@ func testOwnershipVerification(t *testing.T, cfg ownedResourceTestConfig) {
 	cfg.verifyFn(t, testCtx, resourceID)
 }

-// TestDeleteEnvVarOwnershipVerification tests that deleting an env var
-// via another app's URL path returns 404 (IDOR prevention).
-func TestDeleteEnvVarOwnershipVerification(t *testing.T) { //nolint:dupl // intentionally similar IDOR test pattern
+// TestHandleEnvVarSaveBulk tests that HandleEnvVarSave replaces all env vars
+// for an app with the submitted set (monolithic delete-all + insert-all).
+func TestHandleEnvVarSaveBulk(t *testing.T) {
 	t.Parallel()

-	testOwnershipVerification(t, ownedResourceTestConfig{
-		appPrefix1: "envvar-owner-app",
-		appPrefix2: "envvar-other-app",
-		createFn: func(t *testing.T, tc *testContext, ownerApp *models.App) int64 {
-			t.Helper()
+	testCtx := setupTestHandlers(t)
+	createdApp := createTestApp(t, testCtx, "envvar-bulk-app")

-			envVar := models.NewEnvVar(tc.database)
-			envVar.AppID = ownerApp.ID
-			envVar.Key = "SECRET"
-			envVar.Value = "hunter2"
-			require.NoError(t, envVar.Save(context.Background()))
+	// Create some pre-existing env vars
+	for _, kv := range [][2]string{{"OLD_KEY", "old_value"}, {"REMOVE_ME", "gone"}} {
+		ev := models.NewEnvVar(testCtx.database)
+		ev.AppID = createdApp.ID
+		ev.Key = kv[0]
+		ev.Value = kv[1]
+		require.NoError(t, ev.Save(context.Background()))
+	}

-			return envVar.ID
-		},
-		deletePath: func(appID string, resourceID int64) string {
-			return "/apps/" + appID + "/env/" + strconv.FormatInt(resourceID, 10) + "/delete"
-		},
-		chiParams: func(appID string, resourceID int64) map[string]string {
-			return map[string]string{"id": appID, "varID": strconv.FormatInt(resourceID, 10)}
-		},
-		handler: func(h *handlers.Handlers) http.HandlerFunc { return h.HandleEnvVarDelete() },
-		verifyFn: func(t *testing.T, tc *testContext, resourceID int64) {
-			t.Helper()
+	// Submit a new set as a JSON array of key/value objects
+	body := `[{"key":"NEW_KEY","value":"new_value"},{"key":"ANOTHER","value":"42"}]`

-			found, findErr := models.FindEnvVar(context.Background(), tc.database, resourceID)
-			require.NoError(t, findErr)
-			assert.NotNil(t, found, "env var should still exist after IDOR attempt")
-		},
-	})
+	r := chi.NewRouter()
+	r.Post("/apps/{id}/env", testCtx.handlers.HandleEnvVarSave())
+
+	request := httptest.NewRequest(
+		http.MethodPost,
+		"/apps/"+createdApp.ID+"/env",
+		strings.NewReader(body),
+	)
+	request.Header.Set("Content-Type", "application/json")
+
+	recorder := httptest.NewRecorder()
+	r.ServeHTTP(recorder, request)
+
+	assert.Equal(t, http.StatusOK, recorder.Code)
+
+	// Verify old env vars are gone and new ones exist
+	envVars, err := models.FindEnvVarsByAppID(
+		context.Background(), testCtx.database, createdApp.ID,
+	)
+	require.NoError(t, err)
+	assert.Len(t, envVars, 2)
+
+	keys := make(map[string]string)
+	for _, ev := range envVars {
+		keys[ev.Key] = ev.Value
+	}
+
+	assert.Equal(t, "new_value", keys["NEW_KEY"])
+	assert.Equal(t, "42", keys["ANOTHER"])
+	assert.Empty(t, keys["OLD_KEY"], "old env vars should be deleted")
+	assert.Empty(t, keys["REMOVE_ME"], "old env vars should be deleted")
+}
+
+// TestHandleEnvVarSaveAppNotFound tests that HandleEnvVarSave returns 404
+// for a non-existent app.
+func TestHandleEnvVarSaveAppNotFound(t *testing.T) {
+	t.Parallel()
+
+	testCtx := setupTestHandlers(t)
+
+	body := `[{"key":"KEY","value":"value"}]`
+
+	r := chi.NewRouter()
+	r.Post("/apps/{id}/env", testCtx.handlers.HandleEnvVarSave())
+
+	request := httptest.NewRequest(
+		http.MethodPost,
+		"/apps/nonexistent-id/env",
+		strings.NewReader(body),
+	)
+	request.Header.Set("Content-Type", "application/json")
+
+	recorder := httptest.NewRecorder()
+	r.ServeHTTP(recorder, request)
+
+	assert.Equal(t, http.StatusNotFound, recorder.Code)
+}
+
+// TestHandleEnvVarSaveEmptyKeyRejected verifies that submitting a JSON
+// array containing an entry with an empty key returns 400.
+func TestHandleEnvVarSaveEmptyKeyRejected(t *testing.T) {
+	t.Parallel()
+
+	testCtx := setupTestHandlers(t)
+	createdApp := createTestApp(t, testCtx, "envvar-emptykey-app")
+
+	body := `[{"key":"VALID_KEY","value":"ok"},{"key":"","value":"bad"}]`
+
+	r := chi.NewRouter()
+	r.Post("/apps/{id}/env", testCtx.handlers.HandleEnvVarSave())
+
+	request := httptest.NewRequest(
+		http.MethodPost,
+		"/apps/"+createdApp.ID+"/env",
+		strings.NewReader(body),
+	)
+	request.Header.Set("Content-Type", "application/json")
+
+	recorder := httptest.NewRecorder()
+	r.ServeHTTP(recorder, request)
+
+	assert.Equal(t, http.StatusBadRequest, recorder.Code)
+}
+
+// TestHandleEnvVarSaveDuplicateKeyRejected verifies that when the client
+// sends duplicate keys, the server rejects them with 400 Bad Request.
+func TestHandleEnvVarSaveDuplicateKeyRejected(t *testing.T) {
+	t.Parallel()
+
+	testCtx := setupTestHandlers(t)
+	createdApp := createTestApp(t, testCtx, "envvar-dedup-app")
+
+	// Send two entries with the same key — should be rejected
+	body := `[{"key":"FOO","value":"first"},{"key":"BAR","value":"bar"},{"key":"FOO","value":"second"}]`
+
+	r := chi.NewRouter()
+	r.Post("/apps/{id}/env", testCtx.handlers.HandleEnvVarSave())
+
+	request := httptest.NewRequest(
+		http.MethodPost,
+		"/apps/"+createdApp.ID+"/env",
+		strings.NewReader(body),
+	)
+	request.Header.Set("Content-Type", "application/json")
+
+	recorder := httptest.NewRecorder()
+	r.ServeHTTP(recorder, request)
+
+	assert.Equal(t, http.StatusBadRequest, recorder.Code)
+	assert.Contains(t, recorder.Body.String(), "duplicate environment variable key: FOO")
+}
+
+// TestHandleEnvVarSaveCrossAppIsolation verifies that posting env vars
+// to appA's endpoint does not affect appB's env vars (IDOR prevention).
+func TestHandleEnvVarSaveCrossAppIsolation(t *testing.T) {
+	t.Parallel()
+
+	testCtx := setupTestHandlers(t)
+	appA := createTestApp(t, testCtx, "envvar-iso-appA")
+	appB := createTestApp(t, testCtx, "envvar-iso-appB")
+
+	// Give appB some env vars
+	for _, kv := range [][2]string{{"B_KEY1", "b_val1"}, {"B_KEY2", "b_val2"}} {
+		ev := models.NewEnvVar(testCtx.database)
+		ev.AppID = appB.ID
+		ev.Key = kv[0]
+		ev.Value = kv[1]
+		require.NoError(t, ev.Save(context.Background()))
+	}
+
+	// POST new env vars to appA's endpoint
+	body := `[{"key":"A_KEY","value":"a_val"}]`
+
+	r := chi.NewRouter()
+	r.Post("/apps/{id}/env", testCtx.handlers.HandleEnvVarSave())
+
+	request := httptest.NewRequest(
+		http.MethodPost,
+		"/apps/"+appA.ID+"/env",
+		strings.NewReader(body),
+	)
+	request.Header.Set("Content-Type", "application/json")
+
+	recorder := httptest.NewRecorder()
+	r.ServeHTTP(recorder, request)
+
+	assert.Equal(t, http.StatusOK, recorder.Code)
+
+	// Verify appA has exactly what we sent
+	appAVars, err := models.FindEnvVarsByAppID(
+		context.Background(), testCtx.database, appA.ID,
+	)
+	require.NoError(t, err)
+	assert.Len(t, appAVars, 1)
+	assert.Equal(t, "A_KEY", appAVars[0].Key)
+
+	// Verify appB's env vars are completely untouched
+	appBVars, err := models.FindEnvVarsByAppID(
+		context.Background(), testCtx.database, appB.ID,
+	)
+	require.NoError(t, err)
+	assert.Len(t, appBVars, 2, "appB env vars must not be affected")
+
+	bKeys := make(map[string]string)
+	for _, ev := range appBVars {
+		bKeys[ev.Key] = ev.Value
+	}
+
+	assert.Equal(t, "b_val1", bKeys["B_KEY1"])
+	assert.Equal(t, "b_val2", bKeys["B_KEY2"])
+}
+
+// TestHandleEnvVarSaveBodySizeLimit verifies that a request body
+// exceeding the 1 MB limit is rejected.
+func TestHandleEnvVarSaveBodySizeLimit(t *testing.T) {
+	t.Parallel()
+
+	testCtx := setupTestHandlers(t)
+	createdApp := createTestApp(t, testCtx, "envvar-sizelimit-app")
+
+	// Build a JSON body that exceeds 1 MB
+	// Each entry is ~30 bytes; 40000 entries ≈ 1.2 MB
+	var sb strings.Builder
+
+	sb.WriteString("[")
+
+	for i := range 40000 {
+		if i > 0 {
+			sb.WriteString(",")
+		}
+
+		sb.WriteString(`{"key":"K` + strconv.Itoa(i) + `","value":"val"}`)
+	}
+
+	sb.WriteString("]")
+
+	r := chi.NewRouter()
+	r.Post("/apps/{id}/env", testCtx.handlers.HandleEnvVarSave())
+
+	request := httptest.NewRequest(
+		http.MethodPost,
+		"/apps/"+createdApp.ID+"/env",
+		strings.NewReader(sb.String()),
+	)
+	request.Header.Set("Content-Type", "application/json")
+
+	recorder := httptest.NewRecorder()
+	r.ServeHTTP(recorder, request)
+
+	assert.Equal(t, http.StatusBadRequest, recorder.Code,
+		"oversized body should be rejected with 400")
 }

 // TestDeleteLabelOwnershipVerification tests that deleting a label
 // via another app's URL path returns 404 (IDOR prevention).
-func TestDeleteLabelOwnershipVerification(t *testing.T) { //nolint:dupl // intentionally similar IDOR test pattern
+func TestDeleteLabelOwnershipVerification(t *testing.T) {
 	t.Parallel()

 	testOwnershipVerification(t, ownedResourceTestConfig{
@@ -714,41 +911,43 @@ func TestDeletePortOwnershipVerification(t *testing.T) {
 	assert.NotNil(t, found, "port should still exist after IDOR attempt")
 }

-// TestHandleEnvVarDeleteUsesCorrectRouteParam verifies that HandleEnvVarDelete
-// reads the "varID" chi URL parameter (matching the route definition {varID}),
-// not a mismatched name like "envID".
-func TestHandleEnvVarDeleteUsesCorrectRouteParam(t *testing.T) {
+// TestHandleEnvVarSaveEmptyClears verifies that submitting an empty JSON
+// array deletes all existing env vars for the app.
+func TestHandleEnvVarSaveEmptyClears(t *testing.T) {
 	t.Parallel()

 	testCtx := setupTestHandlers(t)
+	createdApp := createTestApp(t, testCtx, "envvar-clear-app")

-	createdApp := createTestApp(t, testCtx, "envdelete-param-app")
+	// Create a pre-existing env var
+	ev := models.NewEnvVar(testCtx.database)
+	ev.AppID = createdApp.ID
+	ev.Key = "DELETE_ME"
+	ev.Value = "gone"
+	require.NoError(t, ev.Save(context.Background()))

-	envVar := models.NewEnvVar(testCtx.database)
-	envVar.AppID = createdApp.ID
-	envVar.Key = "DELETE_ME"
-	envVar.Value = "gone"
-	require.NoError(t, envVar.Save(context.Background()))
-
-	// Use chi router with the real route pattern to test param name
+	// Submit empty JSON array
 	r := chi.NewRouter()
-	r.Post("/apps/{id}/env-vars/{varID}/delete", testCtx.handlers.HandleEnvVarDelete())
+	r.Post("/apps/{id}/env", testCtx.handlers.HandleEnvVarSave())

 	request := httptest.NewRequest(
 		http.MethodPost,
-		"/apps/"+createdApp.ID+"/env-vars/"+strconv.FormatInt(envVar.ID, 10)+"/delete",
-		nil,
+		"/apps/"+createdApp.ID+"/env",
+		strings.NewReader("[]"),
 	)
-	recorder := httptest.NewRecorder()
+	request.Header.Set("Content-Type", "application/json")

+	recorder := httptest.NewRecorder()
 	r.ServeHTTP(recorder, request)

-	assert.Equal(t, http.StatusSeeOther, recorder.Code)
+	assert.Equal(t, http.StatusOK, recorder.Code)

-	// Verify the env var was actually deleted
-	found, findErr := models.FindEnvVar(context.Background(), testCtx.database, envVar.ID)
-	require.NoError(t, findErr)
-	assert.Nil(t, found, "env var should be deleted when using correct route param")
+	// Verify all env vars are gone
+	envVars, err := models.FindEnvVarsByAppID(
+		context.Background(), testCtx.database, createdApp.ID,
+	)
+	require.NoError(t, err)
+	assert.Empty(t, envVars, "all env vars should be deleted")
 }

 // TestHandleVolumeAddValidatesPaths verifies that HandleVolumeAdd validates
--- a/internal/handlers/webhook_events.go
+++ b/internal/handlers/webhook_events.go
@@ -0,0 +1,56 @@
+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)
+	}
+}
--- a/internal/models/env_var.go
+++ b/internal/models/env_var.go
@@ -1,4 +1,3 @@
-//nolint:dupl // Active Record pattern - similar structure to label.go is intentional
 package models

 import (
@@ -129,13 +128,48 @@ func FindEnvVarsByAppID(
 	return envVars, rows.Err()
 }

-// DeleteEnvVarsByAppID deletes all env vars for an app.
-func DeleteEnvVarsByAppID(
+// EnvVarPair is a key-value pair for bulk env var operations.
+type EnvVarPair struct {
+	Key   string
+	Value string
+}
+
+// ReplaceEnvVarsByAppID atomically replaces all env vars for an app
+// within a single database transaction. It deletes all existing env
+// vars and inserts the provided pairs. If any operation fails, the
+// entire transaction is rolled back.
+func ReplaceEnvVarsByAppID(
 	ctx context.Context,
 	db *database.Database,
 	appID string,
+	pairs []EnvVarPair,
 ) error {
-	_, err := db.Exec(ctx, "DELETE FROM app_env_vars WHERE app_id = ?", appID)
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return fmt.Errorf("beginning transaction: %w", err)
+	}

-	return err
+	defer func() { _ = tx.Rollback() }()
+
+	_, err = tx.ExecContext(ctx, "DELETE FROM app_env_vars WHERE app_id = ?", appID)
+	if err != nil {
+		return fmt.Errorf("deleting env vars: %w", err)
+	}
+
+	for _, p := range pairs {
+		_, err = tx.ExecContext(ctx,
+			"INSERT INTO app_env_vars (app_id, key, value) VALUES (?, ?, ?)",
+			appID, p.Key, p.Value,
+		)
+		if err != nil {
+			return fmt.Errorf("inserting env var %q: %w", p.Key, err)
+		}
+	}
+
+	err = tx.Commit()
+	if err != nil {
+		return fmt.Errorf("committing transaction: %w", err)
+	}
+
+	return nil
 }
--- a/internal/models/label.go
+++ b/internal/models/label.go
@@ -1,4 +1,3 @@
-//nolint:dupl // Active Record pattern - similar structure to env_var.go is intentional
 package models

 import (
--- a/internal/models/webhook_event.go
+++ b/internal/models/webhook_event.go
@@ -52,6 +52,20 @@ 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 (
--- a/internal/server/routes.go
+++ b/internal/server/routes.go
@@ -70,6 +70,7 @@ 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())
@@ -81,10 +82,8 @@ func (s *Server) SetupRoutes() {
 			r.Post("/apps/{id}/stop", s.handlers.HandleAppStop())
 			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())
+			// Environment variables (monolithic bulk save)
+			r.Post("/apps/{id}/env", s.handlers.HandleEnvVarSave())

 			// Labels
 			r.Post("/apps/{id}/labels", s.handlers.HandleLabelAdd())
--- a/static/js/app-detail.js
+++ b/static/js/app-detail.js
@@ -6,189 +6,312 @@
 */

 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,
+    // ============================================
+    // Environment Variable Editor Component
+    // ============================================
+    Alpine.data("envVarEditor", (appId) => ({
+        vars: [],
+        editIdx: -1,
+        editKey: "",
+        editVal: "",
+        appId: appId,

-    init() {
-      this.deploying = Alpine.store("utils").isDeploying(this.appStatus);
-      this.fetchAll();
-      this._schedulePoll();
+        init() {
+            this.vars = Array.from(this.$el.querySelectorAll(".env-init")).map(
+                (span) => ({
+                    key: span.dataset.key,
+                    value: span.dataset.value,
+                }),
+            );
+        },

-      // Set up scroll listeners after DOM is ready
-      this.$nextTick(() => {
-        this._initScrollTracking(this.$refs.containerLogsWrapper, '_containerAutoScroll');
-        this._initScrollTracking(this.$refs.buildLogsWrapper, '_buildAutoScroll');
-      });
-    },
+        startEdit(i) {
+            this.editIdx = i;
+            this.editKey = this.vars[i].key;
+            this.editVal = this.vars[i].value;
+        },

-    _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);
-    },
+        saveEdit(i) {
+            this.vars[i] = { key: this.editKey, value: this.editVal };
+            this.editIdx = -1;
+            this.submitAll();
+        },

-    _initScrollTracking(el, flag) {
-      if (!el) return;
-      el.addEventListener('scroll', () => {
-        this[flag] = Alpine.store("utils").isScrolledToBottom(el);
-      }, { passive: true });
-    },
+        removeVar(i) {
+            if (!window.confirm("Delete this environment variable?")) {
+                return;
+            }

-    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();
-    },
+            this.vars.splice(i, 1);
+            this.submitAll();
+        },

-    _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;
-    },
+        addVar(keyEl, valEl) {
+            const k = keyEl.value.trim();
+            const v = valEl.value.trim();

-    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);
+            if (!k) {
+                return;
+            }

-        // Re-schedule polling when deployment state changes
-        if (this.deploying !== wasDeploying) {
-          this._schedulePoll();
-        }
+            this.vars.push({ key: k, value: v });
+            this.submitAll();
+        },

-        if (
-          data.latestDeploymentID &&
-          data.latestDeploymentID !== this.currentDeploymentId
-        ) {
-          this.currentDeploymentId = data.latestDeploymentID;
-          this.showBuildLogs = true;
-          this.fetchBuildLogs();
-        }
-      } catch (err) {
-        console.error("Status fetch error:", err);
-      }
-    },
+        submitAll() {
+            const csrfInput = this.$el.querySelector(
+                'input[name="gorilla.csrf.Token"]',
+            );
+            const csrfToken = csrfInput ? csrfInput.value : "";

-    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";
-      }
-    },
+            fetch("/apps/" + this.appId + "/env", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "X-CSRF-Token": csrfToken,
+                },
+                body: JSON.stringify(
+                    this.vars.map((e) => ({ key: e.key, value: e.value })),
+                ),
+            })
+                .then((res) => {
+                    if (res.ok) {
+                        window.location.reload();
+                        return;
+                    }
+                    res.json()
+                        .then((data) => {
+                            window.alert(
+                                data.error ||
+                                    "Failed to save environment variables.",
+                            );
+                        })
+                        .catch(() => {
+                            window.alert(
+                                "Failed to save environment variables.",
+                            );
+                        });
+                })
+                .catch(() => {
+                    window.alert(
+                        "Network error: could not save environment variables.",
+                    );
+                });
+        },
+    }));

-    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";
-      }
-    },
+    // ============================================
+    // App Detail Page Component
+    // ============================================
+    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,

-    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);
-      }
-    },
+        init() {
+            this.deploying = Alpine.store("utils").isDeploying(this.appStatus);
+            this.fetchAll();
+            this._schedulePoll();

-    submitDeploy() {
-      this.deploying = true;
-    },
+            // Set up scroll listeners after DOM is ready
+            this.$nextTick(() => {
+                this._initScrollTracking(
+                    this.$refs.containerLogsWrapper,
+                    "_containerAutoScroll",
+                );
+                this._initScrollTracking(
+                    this.$refs.buildLogsWrapper,
+                    "_buildAutoScroll",
+                );
+            });
+        },

-    get statusBadgeClass() {
-      return Alpine.store("utils").statusBadgeClass(this.appStatus);
-    },
+        _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);
+        },

-    get statusLabel() {
-      return Alpine.store("utils").statusLabel(this.appStatus);
-    },
+        _initScrollTracking(el, flag) {
+            if (!el) return;
+            el.addEventListener(
+                "scroll",
+                () => {
+                    this[flag] = Alpine.store("utils").isScrolledToBottom(el);
+                },
+                { passive: true },
+            );
+        },

-    get containerStatusBadgeClass() {
-      return (
-        Alpine.store("utils").statusBadgeClass(this.containerStatus) +
-        " text-xs"
-      );
-    },
+        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();
+        },

-    get containerStatusLabel() {
-      return Alpine.store("utils").statusLabel(this.containerStatus);
-    },
+        _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;
+        },

-    get buildStatusBadgeClass() {
-      return (
-        Alpine.store("utils").statusBadgeClass(this.buildStatus) + " text-xs"
-      );
-    },
+        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);

-    get buildStatusLabel() {
-      return Alpine.store("utils").statusLabel(this.buildStatus);
-    },
+                // Re-schedule polling when deployment state changes
+                if (this.deploying !== wasDeploying) {
+                    this._schedulePoll();
+                }

-    deploymentStatusClass(status) {
-      return Alpine.store("utils").statusBadgeClass(status);
-    },
+                if (
+                    data.latestDeploymentID &&
+                    data.latestDeploymentID !== this.currentDeploymentId
+                ) {
+                    this.currentDeploymentId = data.latestDeploymentID;
+                    this.showBuildLogs = true;
+                    this.fetchBuildLogs();
+                }
+            } catch (err) {
+                console.error("Status fetch error:", err);
+            }
+        },

-    deploymentStatusLabel(status) {
-      return Alpine.store("utils").statusLabel(status);
-    },
+        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";
+            }
+        },

-    formatTime(isoTime) {
-      return Alpine.store("utils").formatRelativeTime(isoTime);
-    },
-  }));
+        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);
+            }
+        },
+
+        submitDeploy() {
+            this.deploying = true;
+        },
+
+        get statusBadgeClass() {
+            return Alpine.store("utils").statusBadgeClass(this.appStatus);
+        },
+
+        get statusLabel() {
+            return Alpine.store("utils").statusLabel(this.appStatus);
+        },
+
+        get containerStatusBadgeClass() {
+            return (
+                Alpine.store("utils").statusBadgeClass(this.containerStatus) +
+                " text-xs"
+            );
+        },
+
+        get containerStatusLabel() {
+            return Alpine.store("utils").statusLabel(this.containerStatus);
+        },
+
+        get buildStatusBadgeClass() {
+            return (
+                Alpine.store("utils").statusBadgeClass(this.buildStatus) +
+                " text-xs"
+            );
+        },
+
+        get buildStatusLabel() {
+            return Alpine.store("utils").statusLabel(this.buildStatus);
+        },
+
+        deploymentStatusClass(status) {
+            return Alpine.store("utils").statusBadgeClass(status);
+        },
+
+        deploymentStatusLabel(status) {
+            return Alpine.store("utils").statusLabel(status);
+        },
+
+        formatTime(isoTime) {
+            return Alpine.store("utils").formatRelativeTime(isoTime);
+        },
+    }));
 });
--- a/static/js/components.js
+++ b/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);
+        },
+    }));
 });
--- a/static/js/dashboard.js
+++ b/static/js/dashboard.js
@@ -5,17 +5,18 @@
 */

 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);
+        },
+    }));
 });
--- a/static/js/deployment.js
+++ b/static/js/deployment.js
@@ -6,171 +6,180 @@
 */

 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);
+        },
+    }));
 });
--- a/static/js/utils.js
+++ b/static/js/utils.js
@@ -5,139 +5,144 @@
 */

 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);
+        }
+    });
 });
--- a/templates/app_detail.html
+++ b/templates/app_detail.html
@@ -77,7 +77,10 @@

    <!-- Webhook URL -->
    <div class="card p-6 mb-6">
-        <h2 class="section-title mb-4">Webhook URL</h2>
+        <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>
        <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>
@@ -98,9 +101,10 @@
    </div>

    <!-- Environment Variables -->
-    <div class="card p-6 mb-6">
+    <div class="card p-6 mb-6" x-data="envVarEditor('{{.App.ID}}')">
        <h2 class="section-title mb-4">Environment Variables</h2>
-        {{if .EnvVars}}
+        {{range .EnvVars}}<span class="env-init hidden" data-key="{{.Key}}" data-value="{{.Value}}"></span>{{end}}
+        <template x-if="vars.length > 0">
        <div class="overflow-x-auto mb-4">
            <table class="table">
                <thead class="table-header">
@@ -111,47 +115,43 @@
                    </tr>
                </thead>
                <tbody class="table-body">
-                    {{range .EnvVars}}
-                    <tr x-data="{ editing: false }">
-                        <template x-if="!editing">
-                            <td class="font-mono font-medium">{{.Key}}</td>
+                    <template x-for="(env, idx) in vars" :key="idx">
+                    <tr>
+                        <template x-if="editIdx !== idx">
+                            <td class="font-mono font-medium" x-text="env.key"></td>
                        </template>
-                        <template x-if="!editing">
-                            <td class="font-mono text-gray-500">{{.Value}}</td>
+                        <template x-if="editIdx !== idx">
+                            <td class="font-mono text-gray-500" x-text="env.value"></td>
                        </template>
-                        <template x-if="!editing">
+                        <template x-if="editIdx !== idx">
                            <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)">
-                                    {{ $.CSRFField }}
-                                    <button type="submit" class="text-error-500 hover:text-error-700 text-sm">Delete</button>
-                                </form>
+                                <button @click="startEdit(idx)" class="text-primary-600 hover:text-primary-800 text-sm mr-2">Edit</button>
+                                <button @click="removeVar(idx)" class="text-error-500 hover:text-error-700 text-sm">Delete</button>
                            </td>
                        </template>
-                        <template x-if="editing">
+                        <template x-if="editIdx === idx">
                            <td colspan="3">
-                                <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">
+                                <form @submit.prevent="saveEdit(idx)" class="flex gap-2 items-center">
+                                    <input type="text" x-model="editKey" required class="input flex-1 font-mono text-sm">
+                                    <input type="text" x-model="editVal" required class="input flex-1 font-mono text-sm">
                                    <button type="submit" class="btn-primary text-sm">Save</button>
-                                    <button type="button" @click="editing = false" class="text-gray-500 hover:text-gray-700 text-sm">Cancel</button>
+                                    <button type="button" @click="editIdx = -1" class="text-gray-500 hover:text-gray-700 text-sm">Cancel</button>
                                </form>
                                <p class="text-xs text-amber-600 mt-1">⚠ Container restart needed after env var changes.</p>
                            </td>
                        </template>
                    </tr>
-                    {{end}}
+                    </template>
                </tbody>
            </table>
        </div>
-        {{end}}
-        <form method="POST" action="/apps/{{.App.ID}}/env" 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">
+        </template>
+        <form @submit.prevent="addVar($refs.newKey, $refs.newVal)" class="flex flex-col sm:flex-row gap-2">
+            <input x-ref="newKey" type="text" placeholder="KEY" required class="input flex-1 font-mono text-sm">
+            <input x-ref="newVal" type="text" placeholder="value" required class="input flex-1 font-mono text-sm">
            <button type="submit" class="btn-primary">Add</button>
        </form>
+        <div class="hidden">{{ .CSRFField }}</div>
    </div>

    <!-- Labels -->
--- a/templates/templates.go
+++ b/templates/templates.go
@@ -44,6 +44,7 @@ func initTemplates() {
 		"app_detail.html",
 		"app_edit.html",
 		"deployments.html",
+		"webhook_events.html",
 	}

 	pageTemplates = make(map[string]*template.Template)
--- a/templates/webhook_events.html
+++ b/templates/webhook_events.html
@@ -0,0 +1,79 @@
+{{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}}
Author	SHA1	Message	Date
clawbot	316ccae665	fix: reject duplicate env var keys with 400 instead of deduplicating All checks were successful Check / check (pull_request) Successful in 3m18s Details Replace deduplicateEnvPairs with validateEnvPairs that returns a 400 Bad Request error when duplicate keys are submitted, instead of silently deduplicating (last wins). Ref: #158	2026-03-10 18:37:07 -07:00
clawbot	eaf3d48eae	fix: dedup env var keys, add IDOR test, enforce body size limit All checks were successful Check / check (pull_request) Successful in 3m30s Details - Server-side duplicate key dedup (last wins) via deduplicateEnvPairs helper - Cross-app isolation test verifying env var save scopes by app_id - http.MaxBytesReader wraps request body with 1MB limit - Test for oversized body rejection (400)	2026-03-10 18:14:20 -07:00
user	609ce1d0d3	fix: remove dead DeleteEnvVarsByAppID and add empty-key 400 test All checks were successful Check / check (pull_request) Successful in 3m11s Details - Remove DeleteEnvVarsByAppID() which became dead code after ReplaceEnvVarsByAppID() was introduced (handles deletion internally within its transaction). - Add TestHandleEnvVarSaveEmptyKeyRejected to verify that POSTing a JSON array with an empty key returns 400 Bad Request. Addresses review advisories on PR #158.	2026-03-10 17:42:50 -07:00
clawbot	5a986aa8fd	fix: transactional env var save, empty key validation, frontend error handling All checks were successful Check / check (pull_request) Successful in 4s Details - Wrap DELETE + INSERTs in a database transaction via new ReplaceEnvVarsByAppID() to prevent silent data loss on partial insert failure. Rollback on any error; return 500 instead of 200. - Add server-side validation rejecting entries with empty keys (returns 400 with error message). - Add frontend error handling for non-2xx responses with user-visible alert messages. - Remove stale //nolint:dupl directives (files no longer duplicate).	2026-03-10 12:25:35 -07:00
clawbot	df6aad9b21	refactor: POST env vars as JSON array instead of KEY=value string All checks were successful Check / check (pull_request) Successful in 4s Details Replace the string-serialized KEY=value format with a proper JSON array of {key, value} objects for the env var save endpoint. Frontend changes: - envVarEditor.submitAll() now uses fetch() with Content-Type: application/json and X-CSRF-Token header instead of form submission - Sends JSON array: [{"key":"FOO","value":"bar"}, ...] - Hidden bulk form replaced with hidden div holding CSRF token - envVarEditor now receives appId parameter for the fetch URL Backend changes: - HandleEnvVarSave reads JSON body via json.NewDecoder instead of parsing form values with parseEnvPairs - Returns JSON {"ok": true} instead of HTTP redirect - Removed parseEnvPairs function and envPair struct entirely - Added envPairJSON struct with json tags for deserialization Tests updated to POST JSON arrays instead of form-encoded strings. Closes #163	2026-03-10 11:37:55 -07:00
clawbot	3f96f4f81b	fix: match original table UI with immediate per-action submission All checks were successful Check / check (pull_request) Successful in 4s Details Replace the Save All workflow with the original per-action behavior: - Edit row: shows Save/Cancel buttons, submits full set immediately - Delete row: shows confirmation dialog, submits full set immediately - Add row: submits full set immediately on Add click Moves Alpine.js logic into a proper envVarEditor component in app-detail.js. Initializes env var data from hidden span elements with data attributes for safe HTML escaping. All actions collect the complete env var set and POST to the single bulk endpoint POST /apps/{id}/env — no Save All button needed.	2026-03-10 11:23:36 -07:00
user	690b7d4590	feat: restore table UI with monolithic env var submission All checks were successful Check / check (pull_request) Successful in 3m18s Details Keep the original table-based UI with individual key/value rows, edit/delete buttons, and add form. Use Alpine.js to manage the env var list client-side. On form submit, all env vars are collected into a hidden textarea field and POSTed as a single bulk request. The server-side handler (HandleEnvVarSave) atomically replaces all env vars: DELETE all existing + INSERT the full submitted set. This combines the fix for issue #156 (env var 404) with the monolithic list approach from issue #163. closes #156 closes #163	2026-03-10 11:18:46 -07:00
clawbot	b3cda1515f	feat: monolithic env var editing (bulk save, no per-var CRUD) All checks were successful Check / check (pull_request) Successful in 4s Details Replace individual env var add/edit/delete with a single bulk save endpoint. The UI now shows a textarea with KEY=VALUE lines. On save, all existing env vars are deleted and the full submitted set is inserted. - Replace HandleEnvVarAdd, HandleEnvVarEdit, HandleEnvVarDelete with HandleEnvVarSave - Collapse 3 routes into single POST /apps/{id}/env - Template uses textarea instead of per-row edit/delete forms - No individual env var IDs exposed in the UI - Extract parseEnvPairs helper to keep cyclomatic complexity low - Use strings.SplitSeq per modernize linter - Update tests for new bulk save behavior closes #156 closes #163	2026-03-10 11:05:19 -07:00
Jeffrey Paul	4aaeffdffc	Merge branch 'main' into fix/issue-156-env-vars-404 All checks were successful Check / check (pull_request) Successful in 1m42s Details	2026-03-10 18:54:32 +01:00
clawbot	e1dc865226	feat: add webhook event history UI page (#164 ) All checks were successful Check / check (push) Successful in 4s Details ## Summary Adds a per-app webhook event history page at `/apps/{id}/webhooks` showing received webhook events with match/no-match status. ## Changes - New template `webhook_events.html` — displays webhook events in a table with time, event type, branch, commit SHA (linked when URL available), and match status badges - New handler `HandleAppWebhookEvents()` in `webhook_events.go` — fetches app and its webhook events (limit 100) - New route `GET /apps/{id}/webhooks` — registered in protected routes group - Template registration — added `webhook_events.html` to the template cache in `templates.go` - Model enhancement — added `ShortCommit()` method to `WebhookEvent` for truncated SHA display - App detail link — added "Event History" link in the Webhook URL card on the app detail page ## UI Follows the existing UI patterns (Tailwind CSS classes, Alpine.js `relativeTime`, badge styles, empty state, back-navigation). The page mirrors the deployments history page layout. closes [#85](#85) Co-authored-by: clawbot <clawbot@noreply.git.eeqj.de> Reviewed-on: #164 Co-authored-by: clawbot <clawbot@noreply.example.org> Co-committed-by: clawbot <clawbot@noreply.example.org>	2026-03-10 18:53:58 +01:00
Jeffrey Paul	48c9297627	Merge branch 'main' into fix/issue-156-env-vars-404 All checks were successful Check / check (pull_request) Successful in 3m21s Details	2026-03-10 01:09:25 +01:00
clawbot	49ff625ac4	fix: add missing Makefile targets (docker, hooks) and test timeout (#159 ) All checks were successful Check / check (push) Successful in 4s Details ## Changes - Add `docker` target (`docker build .`) - Add `hooks` target (installs pre-commit hook running `make check`) - Add 30-second timeout to `test` target (`-timeout 30s`) - Update `.PHONY` to include new targets - Update README to document all Makefile targets (`fmt-check`, `docker`, `hooks`) - Run `make fmt` to fix JS formatting via prettier `docker build .` passes ✅ closes #136, closes #137 <!-- session: agent:sdlc-manager:subagent:44375174-444b-43bf-a341-2def7ebb9fdf --> Co-authored-by: clawbot <clawbot@noreply.git.eeqj.de> Co-authored-by: Jeffrey Paul <sneak@noreply.example.org> Reviewed-on: #159 Co-authored-by: clawbot <clawbot@noreply.example.org> Co-committed-by: clawbot <clawbot@noreply.example.org>	2026-03-10 01:09:15 +01:00
Jeffrey Paul	2d04ff85aa	Merge branch 'main' into fix/issue-156-env-vars-404 All checks were successful Check / check (pull_request) Successful in 1m40s Details	2026-03-10 01:08:05 +01:00
clawbot	ab63670043	fix: pass notification settings from create form to service (#160 ) All checks were successful Check / check (push) Successful in 3m49s Details ## Summary `HandleAppCreate` was not reading `docker_network`, `ntfy_topic`, or `slack_webhook` form values from the create app form. These fields were silently dropped during app creation, even though: - `app_new.html` had the form fields - `CreateAppInput` had the corresponding struct fields - `CreateApp` already handled them correctly The edit/update flow was unaffected — the bug was exclusively in the create path. ## Changes - Read `docker_network`, `ntfy_topic`, `slack_webhook` form values in `HandleAppCreate` - Pass them to `CreateAppInput` - Include them in template re-render data (preserves values on validation errors) closes #157 <!-- session: agent:sdlc-manager:subagent:1fb3582d-1eff-4309-b166-df5046a1b885 --> Co-authored-by: clawbot <clawbot@noreply.git.eeqj.de> Reviewed-on: #160 Co-authored-by: clawbot <clawbot@noreply.example.org> Co-committed-by: clawbot <clawbot@noreply.example.org>	2026-03-10 01:01:32 +01:00
clawbot	30f81078bd	fix: use /env routes for env var CRUD, fixing 404 on env var forms All checks were successful Check / check (pull_request) Successful in 3m7s Details 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	2026-03-06 03:50:17 -08:00