chore: update module path to sneak.berlin/go/upaas (fixes #143)

.dockerignore

@@ -1,10 +0,0 @@
-.git
-bin/
-.editorconfig
-.vscode/
-.idea/
-*.test
-LICENSE
-CONVENTIONS.md
-REPO_POLICIES.md
-README.md

.editorconfig

@@ -1,15 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-indent_style = space
-indent_size = 2
-
-[*.go]
-indent_style = tab
-
-[Makefile]
-indent_style = tab

.gitignore

@@ -1,31 +0,0 @@
-# OS
-.DS_Store
-Thumbs.db
-
-# Editors
-*.swp
-*.swo
-*~
-*.bak
-.idea/
-.vscode/
-*.sublime-*
-
-# Node
-node_modules/
-
-# Environment / secrets
-.env
-.env.*
-*.pem
-*.key
-
-# Go
-bin/
-*.exe
-*.exe~
-*.dll
-*.so
-*.dylib
-*.test
-*.out

Dockerfile

@@ -1,32 +1,35 @@
-# Lint stage — fast feedback on formatting and lint issues
-# golangci/golangci-lint:v2.10.1
-FROM golangci/golangci-lint@sha256:ea84d14c2fef724411be7dc45e09e6ef721d748315252b02df19a7e3113ee763 AS lint
-
-WORKDIR /src
-COPY go.mod go.sum ./
-RUN go mod download
-
-COPY . .
-
-RUN make fmt-check
-RUN make lint
-
-# Build stage — tests and compilation
+# Build stage
 # golang:1.25-alpine
 FROM golang@sha256:f6751d823c26342f9506c03797d2527668d095b0a15f1862cddb4d927a7a4ced AS builder
 
-# Force BuildKit to run the lint stage by creating a stage dependency
-COPY --from=lint /src/go.sum /dev/null
-
 RUN apk add --no-cache git make gcc musl-dev
 
+# Install golangci-lint v2 (pre-built binary — go install fails in alpine due to missing linker)
+RUN set -e; \
+    GOLANGCI_VERSION="2.10.1"; \
+    case "$(uname -m)" in \
+        x86_64)  ARCH="amd64"; SHA256="dfa775874cf0561b404a02a8f4481fc69b28091da95aa697259820d429b09c99" ;; \
+        aarch64) ARCH="arm64"; SHA256="6652b42ae02915eb2f9cb2a2e0cac99514c8eded8388d88ae3e06e1a52c00de8" ;; \
+        *) echo "unsupported arch: $(uname -m)" >&2; exit 1 ;; \
+    esac; \
+    wget -q -O /tmp/golangci-lint.tar.gz \
+        "https://github.com/golangci/golangci-lint/releases/download/v${GOLANGCI_VERSION}/golangci-lint-${GOLANGCI_VERSION}-linux-${ARCH}.tar.gz"; \
+    echo "${SHA256}  /tmp/golangci-lint.tar.gz" | sha256sum -c -; \
+    tar -xzf /tmp/golangci-lint.tar.gz -C /usr/local/bin --strip-components=1 "golangci-lint-${GOLANGCI_VERSION}-linux-${ARCH}/golangci-lint"; \
+    rm /tmp/golangci-lint.tar.gz; \
+    golangci-lint version
+RUN go install golang.org/x/tools/cmd/goimports@009367f5c17a8d4c45a961a3a509277190a9a6f0 # v0.42.0
+
 WORKDIR /src
 COPY go.mod go.sum ./
 RUN go mod download
 
 COPY . .
 
-RUN make test
+# Run all checks - build fails if any check fails
+RUN make check
+
+# Build the binary
 RUN make build
 
 # Runtime stage

Makefile

@@ -1,4 +1,4 @@
-.PHONY: all build lint fmt fmt-check test check clean docker hooks
+.PHONY: all build lint fmt test check clean
 
 BINARY := upaasd
 VERSION := $(shell git describe --tags --always --dirty 2>/dev/null || echo "dev")
@@ -18,26 +18,21 @@ fmt:
 	goimports -w .
 	npx prettier --write --tab-width 4 static/js/*.js
 
-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
+check:
+	@echo "==> Checking formatting..."
+	@test -z "$$(gofmt -l .)" || (echo "Files not formatted:" && gofmt -l . && exit 1)
+	@echo "==> Running linter..."
+	golangci-lint run --config .golangci.yml ./...
+	@echo "==> Running tests..."
+	go test -v -race ./...
+	@echo "==> Building..."
+	go build -ldflags "$(LDFLAGS)" -o /dev/null ./cmd/upaasd
 	@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

REPO_POLICIES.md

@@ -1,188 +0,0 @@
----
-title: Repository Policies
-last_modified: 2026-02-22
----
-
-This document covers repository structure, tooling, and workflow standards. Code
-style conventions are in separate documents:
-
-- [Code Styleguide](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE.md)
-  (general, bash, Docker)
-- [Go](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE_GO.md)
-- [JavaScript](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE_JS.md)
-- [Python](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE_PYTHON.md)
-- [Go HTTP Server Conventions](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/GO_HTTP_SERVER_CONVENTIONS.md)
-
----
-
-- Cross-project documentation (such as this file) must include
-  `last_modified: YYYY-MM-DD` in the YAML front matter so it can be kept in sync
-  with the authoritative source as policies evolve.
-
-- **ALL external references must be pinned by cryptographic hash.** This
-  includes Docker base images, Go modules, npm packages, GitHub Actions, and
-  anything else fetched from a remote source. Version tags (`@v4`, `@latest`,
-  `:3.21`, etc.) are server-mutable and therefore remote code execution
-  vulnerabilities. The ONLY acceptable way to reference an external dependency
-  is by its content hash (Docker `@sha256:...`, Go module hash in `go.sum`, npm
-  integrity hash in lockfile, GitHub Actions `@<commit-sha>`). No exceptions.
-  This also means never `curl | bash` to install tools like pyenv, nvm, rustup,
-  etc. Instead, download a specific release archive from GitHub, verify its hash
-  (hardcoded in the Dockerfile or script), and only then install. Unverified
-  install scripts are arbitrary remote code execution. This is the single most
-  important rule in this document. Double-check every external reference in
-  every file before committing. There are zero exceptions to this rule.
-
-- Every repo with software must have a root `Makefile` with these targets:
-  `make test`, `make lint`, `make fmt` (writes), `make fmt-check` (read-only),
-  `make check` (prereqs: `test`, `lint`, `fmt-check`), `make docker`, and
-  `make hooks` (installs pre-commit hook). A model Makefile is at
-  `https://git.eeqj.de/sneak/prompts/raw/branch/main/Makefile`.
-
-- Always use Makefile targets (`make fmt`, `make test`, `make lint`, etc.)
-  instead of invoking the underlying tools directly. The Makefile is the single
-  source of truth for how these operations are run.
-
-- The Makefile is authoritative documentation for how the repo is used. Beyond
-  the required targets above, it should have targets for every common operation:
-  running a local development server (`make run`, `make dev`), re-initializing
-  or migrating the database (`make db-reset`, `make migrate`), building
-  artifacts (`make build`), generating code, seeding data, or anything else a
-  developer would do regularly. If someone checks out the repo and types
-  `make<tab>`, they should see every meaningful operation available. A new
-  contributor should be able to understand the entire development workflow by
-  reading the Makefile.
-
-- Every repo should have a `Dockerfile`. All Dockerfiles must run `make check`
-  as a build step so the build fails if the branch is not green. For non-server
-  repos, the Dockerfile should bring up a development environment and run
-  `make check`. For server repos, `make check` should run as an early build
-  stage before the final image is assembled.
-
-- Every repo should have a Gitea Actions workflow (`.gitea/workflows/`) that
-  runs `docker build .` on push. Since the Dockerfile already runs `make check`,
-  a successful build implies all checks pass.
-
-- Use platform-standard formatters: `black` for Python, `prettier` for
-  JS/CSS/Markdown/HTML, `go fmt` for Go. Always use default configuration with
-  two exceptions: four-space indents (except Go), and `proseWrap: always` for
-  Markdown (hard-wrap at 80 columns). Documentation and writing repos (Markdown,
-  HTML, CSS) should also have `.prettierrc` and `.prettierignore`.
-
-- Pre-commit hook: `make check` if local testing is possible, otherwise
-  `make lint && make fmt-check`. The Makefile should provide a `make hooks`
-  target to install the pre-commit hook.
-
-- All repos with software must have tests that run via the platform-standard
-  test framework (`go test`, `pytest`, `jest`/`vitest`, etc.). If no meaningful
-  tests exist yet, add the most minimal test possible — e.g. importing the
-  module under test to verify it compiles/parses. There is no excuse for
-  `make test` to be a no-op.
-
-- `make test` must complete in under 20 seconds. Add a 30-second timeout in the
-  Makefile.
-
-- Docker builds must complete in under 5 minutes.
-
-- `make check` must not modify any files in the repo. Tests may use temporary
-  directories.
-
-- `main` must always pass `make check`, no exceptions.
-
-- Never commit secrets. `.env` files, credentials, API keys, and private keys
-  must be in `.gitignore`. No exceptions.
-
-- `.gitignore` should be comprehensive from the start: OS files (`.DS_Store`),
-  editor files (`.swp`, `*~`), language build artifacts, and `node_modules/`.
-  Fetch the standard `.gitignore` from
-  `https://git.eeqj.de/sneak/prompts/raw/branch/main/.gitignore` when setting up
-  a new repo.
-
-- Never use `git add -A` or `git add .`. Always stage files explicitly by name.
-
-- Never force-push to `main`.
-
-- Make all changes on a feature branch. You can do whatever you want on a
-  feature branch.
-
-- `.golangci.yml` is standardized and must _NEVER_ be modified by an agent, only
-  manually by the user. Fetch from
-  `https://git.eeqj.de/sneak/prompts/raw/branch/main/.golangci.yml`.
-
-- When pinning images or packages by hash, add a comment above the reference
-  with the version and date (YYYY-MM-DD).
-
-- Use `yarn`, not `npm`.
-
-- Write all dates as YYYY-MM-DD (ISO 8601).
-
-- Simple projects should be configured with environment variables.
-
-- Dockerized web services listen on port 8080 by default, overridable with
-  `PORT`.
-
-- `README.md` is the primary documentation. Required sections:
-    - **Description**: First line must include the project name, purpose,
-      category (web server, SPA, CLI tool, etc.), license, and author. Example:
-      "µPaaS is an MIT-licensed Go web application by @sneak that receives
-      git-frontend webhooks and deploys applications via Docker in realtime."
-    - **Getting Started**: Copy-pasteable install/usage code block.
-    - **Rationale**: Why does this exist?
-    - **Design**: How is the program structured?
-    - **TODO**: Update meticulously, even between commits. When planning, put
-      the todo list in the README so a new agent can pick up where the last one
-      left off.
-    - **License**: MIT, GPL, or WTFPL. Ask the user for new projects. Include a
-      `LICENSE` file in the repo root and a License section in the README.
-    - **Author**: [@sneak](https://sneak.berlin).
-
-- First commit of a new repo should contain only `README.md`.
-
-- Go module root: `sneak.berlin/go/<name>`. Always run `go mod tidy` before
-  committing.
-
-- Use SemVer.
-
-- Database migrations live in `internal/db/migrations/` and must be embedded in
-  the binary.
-  - `000_migration.sql` — contains ONLY the creation of the migrations tracking
-    table itself. Nothing else.
-  - `001_schema.sql` — the full application schema.
-  - **Pre-1.0.0:** never add additional migration files (002, 003, etc.). There
-    is no installed base to migrate. Edit `001_schema.sql` directly.
-  - **Post-1.0.0:** add new numbered migration files for each schema change.
-    Never edit existing migrations after release.
-
-- All repos should have an `.editorconfig` enforcing the project's indentation
-  settings.
-
-- Avoid putting files in the repo root unless necessary. Root should contain
-  only project-level config files (`README.md`, `Makefile`, `Dockerfile`,
-  `LICENSE`, `.gitignore`, `.editorconfig`, `REPO_POLICIES.md`, and
-  language-specific config). Everything else goes in a subdirectory. Canonical
-  subdirectory names:
-    - `bin/` — executable scripts and tools
-    - `cmd/` — Go command entrypoints
-    - `configs/` — configuration templates and examples
-    - `deploy/` — deployment manifests (k8s, compose, terraform)
-    - `docs/` — documentation and markdown (README.md stays in root)
-    - `internal/` — Go internal packages
-    - `internal/db/migrations/` — database migrations
-    - `pkg/` — Go library packages
-    - `share/` — systemd units, data files
-    - `static/` — static assets (images, fonts, etc.)
-    - `web/` — web frontend source
-
-- When setting up a new repo, files from the `prompts` repo may be used as
-  templates. Fetch them from
-  `https://git.eeqj.de/sneak/prompts/raw/branch/main/<path>`.
-
-- New repos must contain at minimum:
-    - `README.md`, `.git`, `.gitignore`, `.editorconfig`
-    - `LICENSE`, `REPO_POLICIES.md` (copy from the `prompts` repo)
-    - `Makefile`
-    - `Dockerfile`, `.dockerignore`
-    - `.gitea/workflows/check.yml`
-    - Go: `go.mod`, `go.sum`, `.golangci.yml`
-    - JS: `package.json`, `yarn.lock`, `.prettierrc`, `.prettierignore`
-    - Python: `pyproject.toml`

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 {
@@ -903,69 +894,50 @@ func (h *Handlers) addKeyValueToApp(
 	http.Redirect(writer, request, "/apps/"+application.ID, http.StatusSeeOther)
 }
 
-// envPairJSON represents a key-value pair in the JSON request body.
-type envPairJSON struct {
-	Key   string `json:"key"`
-	Value string `json:"value"`
+// 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)
+			},
+		)
+	}
 }
 
-// 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.
-func (h *Handlers) HandleEnvVarSave() http.HandlerFunc {
+// HandleEnvVarDelete handles deleting an environment variable.
+func (h *Handlers) HandleEnvVarDelete() http.HandlerFunc {
 	return func(writer http.ResponseWriter, request *http.Request) {
 		appID := chi.URLParam(request, "id")
+		envVarIDStr := chi.URLParam(request, "varID")
 
-		application, findErr := models.FindApp(request.Context(), h.db, appID)
-		if findErr != nil || application == nil {
+		envVarID, parseErr := strconv.ParseInt(envVarIDStr, 10, 64)
+		if parseErr != nil {
 			http.NotFound(writer, request)
 
 			return
 		}
 
-		var pairs []envPairJSON
-
-		decodeErr := json.NewDecoder(request.Body).Decode(&pairs)
-		if decodeErr != nil {
-			http.Error(writer, "Bad Request", http.StatusBadRequest)
+		envVar, findErr := models.FindEnvVar(request.Context(), h.db, envVarID)
+		if findErr != nil || envVar == nil || envVar.AppID != appID {
+			http.NotFound(writer, request)
 
 			return
 		}
 
-		ctx := request.Context()
-
-		// Delete all existing env vars for this app
-		deleteErr := models.DeleteEnvVarsByAppID(ctx, h.db, application.ID)
+		deleteErr := envVar.Delete(request.Context())
 		if deleteErr != nil {
-			h.log.Error("failed to delete env vars", "error", deleteErr)
-			http.Error(
-				writer,
-				"Internal Server Error",
-				http.StatusInternalServerError,
-			)
-
-			return
+			h.log.Error("failed to delete env var", "error", deleteErr)
 		}
 
-		// Insert the full new set
-		for _, p := range pairs {
-			envVar := models.NewEnvVar(h.db)
-			envVar.AppID = application.ID
-			envVar.Key = p.Key
-			envVar.Value = p.Value
-
-			saveErr := envVar.Save(ctx)
-			if saveErr != nil {
-				h.log.Error(
-					"failed to save env var",
-					"key", p.Key,
-					"error", saveErr,
-				)
-			}
-		}
-
-		h.respondJSON(writer, request, map[string]bool{"ok": true}, http.StatusOK)
+		http.Redirect(writer, request, "/apps/"+appID, http.StatusSeeOther)
 	}
 }
 
@@ -1224,6 +1196,59 @@ 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) {

internal/handlers/handlers_test.go

@@ -560,87 +560,45 @@ func testOwnershipVerification(t *testing.T, cfg ownedResourceTestConfig) {
 	cfg.verifyFn(t, testCtx, resourceID)
 }
 
-// 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) {
+// 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
 	t.Parallel()
 
-	testCtx := setupTestHandlers(t)
-	createdApp := createTestApp(t, testCtx, "envvar-bulk-app")
+	testOwnershipVerification(t, ownedResourceTestConfig{
+		appPrefix1: "envvar-owner-app",
+		appPrefix2: "envvar-other-app",
+		createFn: func(t *testing.T, tc *testContext, ownerApp *models.App) int64 {
+			t.Helper()
 
-	// 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()))
-	}
+			envVar := models.NewEnvVar(tc.database)
+			envVar.AppID = ownerApp.ID
+			envVar.Key = "SECRET"
+			envVar.Value = "hunter2"
+			require.NoError(t, envVar.Save(context.Background()))
 
-	// Submit a new set as a JSON array of key/value objects
-	body := `[{"key":"NEW_KEY","value":"new_value"},{"key":"ANOTHER","value":"42"}]`
+			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()
 
-	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)
+			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")
+		},
+	})
 }
 
 // TestDeleteLabelOwnershipVerification tests that deleting a label
 // via another app's URL path returns 404 (IDOR prevention).
-func TestDeleteLabelOwnershipVerification(t *testing.T) {
+func TestDeleteLabelOwnershipVerification(t *testing.T) { //nolint:dupl // intentionally similar IDOR test pattern
 	t.Parallel()
 
 	testOwnershipVerification(t, ownedResourceTestConfig{
@@ -756,43 +714,41 @@ func TestDeletePortOwnershipVerification(t *testing.T) {
 	assert.NotNil(t, found, "port should still exist after IDOR attempt")
 }
 
-// TestHandleEnvVarSaveEmptyClears verifies that submitting an empty JSON
-// array deletes all existing env vars for the app.
-func TestHandleEnvVarSaveEmptyClears(t *testing.T) {
+// 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) {
 	t.Parallel()
 
 	testCtx := setupTestHandlers(t)
-	createdApp := createTestApp(t, testCtx, "envvar-clear-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()))
+	createdApp := createTestApp(t, testCtx, "envdelete-param-app")
 
-	// Submit empty JSON array
+	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
 	r := chi.NewRouter()
-	r.Post("/apps/{id}/env", testCtx.handlers.HandleEnvVarSave())
+	r.Post("/apps/{id}/env-vars/{varID}/delete", testCtx.handlers.HandleEnvVarDelete())
 
 	request := httptest.NewRequest(
 		http.MethodPost,
-		"/apps/"+createdApp.ID+"/env",
-		strings.NewReader("[]"),
+		"/apps/"+createdApp.ID+"/env-vars/"+strconv.FormatInt(envVar.ID, 10)+"/delete",
+		nil,
 	)
-	request.Header.Set("Content-Type", "application/json")
-
 	recorder := httptest.NewRecorder()
+
 	r.ServeHTTP(recorder, request)
 
-	assert.Equal(t, http.StatusOK, recorder.Code)
+	assert.Equal(t, http.StatusSeeOther, recorder.Code)
 
-	// 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")
+	// 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")
 }
 
 // TestHandleVolumeAddValidatesPaths verifies that HandleVolumeAdd validates

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())
@@ -82,8 +81,10 @@ func (s *Server) SetupRoutes() {
 			r.Post("/apps/{id}/stop", s.handlers.HandleAppStop())
 			r.Post("/apps/{id}/start", s.handlers.HandleAppStart())
 
-			// Environment variables (monolithic bulk save)
-			r.Post("/apps/{id}/env", s.handlers.HandleEnvVarSave())
+			// 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())
 
 			// Labels
 			r.Post("/apps/{id}/labels", s.handlers.HandleLabelAdd())

static/js/app-detail.js

@@ -6,293 +6,189 @@
  */
 
 document.addEventListener("alpine:init", () => {
-    // ============================================
-    // Environment Variable Editor Component
-    // ============================================
-    Alpine.data("envVarEditor", (appId) => ({
-        vars: [],
-        editIdx: -1,
-        editKey: "",
-        editVal: "",
-        appId: appId,
+  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.vars = Array.from(this.$el.querySelectorAll(".env-init")).map(
-                (span) => ({
-                    key: span.dataset.key,
-                    value: span.dataset.value,
-                }),
-            );
-        },
+    init() {
+      this.deploying = Alpine.store("utils").isDeploying(this.appStatus);
+      this.fetchAll();
+      this._schedulePoll();
 
-        startEdit(i) {
-            this.editIdx = i;
-            this.editKey = this.vars[i].key;
-            this.editVal = this.vars[i].value;
-        },
+      // Set up scroll listeners after DOM is ready
+      this.$nextTick(() => {
+        this._initScrollTracking(this.$refs.containerLogsWrapper, '_containerAutoScroll');
+        this._initScrollTracking(this.$refs.buildLogsWrapper, '_buildAutoScroll');
+      });
+    },
 
-        saveEdit(i) {
-            this.vars[i] = { key: this.editKey, value: this.editVal };
-            this.editIdx = -1;
-            this.submitAll();
-        },
+    _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);
+    },
 
-        removeVar(i) {
-            if (!window.confirm("Delete this environment variable?")) {
-                return;
-            }
+    _initScrollTracking(el, flag) {
+      if (!el) return;
+      el.addEventListener('scroll', () => {
+        this[flag] = Alpine.store("utils").isScrolledToBottom(el);
+      }, { passive: true });
+    },
 
-            this.vars.splice(i, 1);
-            this.submitAll();
-        },
+    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();
+    },
 
-        addVar(keyEl, valEl) {
-            const k = keyEl.value.trim();
-            const v = valEl.value.trim();
+    _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;
+    },
 
-            if (!k) {
-                return;
-            }
+    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);
 
-            this.vars.push({ key: k, value: v });
-            this.submitAll();
-        },
+        // Re-schedule polling when deployment state changes
+        if (this.deploying !== wasDeploying) {
+          this._schedulePoll();
+        }
 
-        submitAll() {
-            const csrfInput = this.$el.querySelector(
-                'input[name="gorilla.csrf.Token"]',
-            );
-            const csrfToken = csrfInput ? csrfInput.value : "";
+        if (
+          data.latestDeploymentID &&
+          data.latestDeploymentID !== this.currentDeploymentId
+        ) {
+          this.currentDeploymentId = data.latestDeploymentID;
+          this.showBuildLogs = true;
+          this.fetchBuildLogs();
+        }
+      } catch (err) {
+        console.error("Status fetch error:", err);
+      }
+    },
 
-            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();
-                }
-            });
-        },
-    }));
+    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";
+      }
+    },
 
-    // ============================================
-    // 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 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";
+      }
+    },
 
-        init() {
-            this.deploying = Alpine.store("utils").isDeploying(this.appStatus);
-            this.fetchAll();
-            this._schedulePoll();
+    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);
+      }
+    },
 
-            // Set up scroll listeners after DOM is ready
-            this.$nextTick(() => {
-                this._initScrollTracking(
-                    this.$refs.containerLogsWrapper,
-                    "_containerAutoScroll",
-                );
-                this._initScrollTracking(
-                    this.$refs.buildLogsWrapper,
-                    "_buildAutoScroll",
-                );
-            });
-        },
+    submitDeploy() {
+      this.deploying = true;
+    },
 
-        _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 statusBadgeClass() {
+      return Alpine.store("utils").statusBadgeClass(this.appStatus);
+    },
 
-        _initScrollTracking(el, flag) {
-            if (!el) return;
-            el.addEventListener(
-                "scroll",
-                () => {
-                    this[flag] = Alpine.store("utils").isScrolledToBottom(el);
-                },
-                { passive: true },
-            );
-        },
+    get statusLabel() {
+      return Alpine.store("utils").statusLabel(this.appStatus);
+    },
 
-        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 containerStatusBadgeClass() {
+      return (
+        Alpine.store("utils").statusBadgeClass(this.containerStatus) +
+        " text-xs"
+      );
+    },
 
-        _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 containerStatusLabel() {
+      return Alpine.store("utils").statusLabel(this.containerStatus);
+    },
 
-        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 buildStatusBadgeClass() {
+      return (
+        Alpine.store("utils").statusBadgeClass(this.buildStatus) + " text-xs"
+      );
+    },
 
-                // Re-schedule polling when deployment state changes
-                if (this.deploying !== wasDeploying) {
-                    this._schedulePoll();
-                }
+    get buildStatusLabel() {
+      return Alpine.store("utils").statusLabel(this.buildStatus);
+    },
 
-                if (
-                    data.latestDeploymentID &&
-                    data.latestDeploymentID !== this.currentDeploymentId
-                ) {
-                    this.currentDeploymentId = data.latestDeploymentID;
-                    this.showBuildLogs = true;
-                    this.fetchBuildLogs();
-                }
-            } catch (err) {
-                console.error("Status fetch error:", err);
-            }
-        },
+    deploymentStatusClass(status) {
+      return Alpine.store("utils").statusBadgeClass(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";
-            }
-        },
+    deploymentStatusLabel(status) {
+      return Alpine.store("utils").statusLabel(status);
+    },
 
-        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);
-        },
-    }));
+    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>
@@ -101,10 +98,9 @@
     </div>
 
     <!-- Environment Variables -->
-    <div class="card p-6 mb-6" x-data="envVarEditor('{{.App.ID}}')">
+    <div class="card p-6 mb-6">
         <h2 class="section-title mb-4">Environment Variables</h2>
-        {{range .EnvVars}}<span class="env-init hidden" data-key="{{.Key}}" data-value="{{.Value}}"></span>{{end}}
-        <template x-if="vars.length > 0">
+        {{if .EnvVars}}
         <div class="overflow-x-auto mb-4">
             <table class="table">
                 <thead class="table-header">
@@ -115,43 +111,47 @@
                     </tr>
                 </thead>
                 <tbody class="table-body">
-                    <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>
+                    {{range .EnvVars}}
+                    <tr x-data="{ editing: false }">
+                        <template x-if="!editing">
+                            <td class="font-mono font-medium">{{.Key}}</td>
                         </template>
-                        <template x-if="editIdx !== idx">
-                            <td class="font-mono text-gray-500" x-text="env.value"></td>
+                        <template x-if="!editing">
+                            <td class="font-mono text-gray-500">{{.Value}}</td>
                         </template>
-                        <template x-if="editIdx !== idx">
+                        <template x-if="!editing">
                             <td class="text-right">
-                                <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>
+                                <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>
                             </td>
                         </template>
-                        <template x-if="editIdx === idx">
+                        <template x-if="editing">
                             <td colspan="3">
-                                <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">
+                                <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">
                                     <button type="submit" class="btn-primary text-sm">Save</button>
-                                    <button type="button" @click="editIdx = -1" class="text-gray-500 hover:text-gray-700 text-sm">Cancel</button>
+                                    <button type="button" @click="editing = false" 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>
-                    </template>
+                    {{end}}
                 </tbody>
             </table>
         </div>
-        </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">
+        {{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">
             <button type="submit" class="btn-primary">Add</button>
         </form>
-        <div class="hidden">{{ .CSRFField }}</div>
     </div>
 
     <!-- Labels -->

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}}