fix: move writeLogsToFile doc comment to correct position

The buildRegistryAuths function was inserted between the writeLogsToFile
doc comment and the writeLogsToFile function body, causing Go to treat
the writeLogsToFile comment as part of buildRegistryAuths godoc.

Move the writeLogsToFile comment to sit directly above its function,
and keep only the buildRegistryAuths comment above buildRegistryAuths.

Makefile

@@ -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/

README.md

@@ -9,6 +9,7 @@ A simple self-hosted PaaS that auto-deploys Docker containers from Git repositor
 - Per-app UUID-based webhook URLs for Gitea integration
 - Branch filtering - only deploy on configured branch changes
 - Environment variables, labels, and volume mounts per app
+- Private Docker registry authentication for base images
 - Docker builds via socket access
 - Notifications via ntfy and Slack-compatible webhooks
 - Simple server-rendered UI with Tailwind CSS
@@ -110,11 +111,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

internal/database/migrations/007_add_registry_credentials.sql

@@ -0,0 +1,11 @@
+-- Add registry credentials for private Docker registry authentication during builds
+CREATE TABLE registry_credentials (
+    id INTEGER PRIMARY KEY,
+    app_id TEXT NOT NULL REFERENCES apps(id) ON DELETE CASCADE,
+    registry TEXT NOT NULL,
+    username TEXT NOT NULL,
+    password TEXT NOT NULL,
+    UNIQUE(app_id, registry)
+);
+
+CREATE INDEX idx_registry_credentials_app_id ON registry_credentials(app_id);

internal/docker/auth_test.go

@@ -0,0 +1,96 @@
+package docker //nolint:testpackage // tests unexported buildAuthConfigs
+
+import (
+	"testing"
+)
+
+func TestBuildAuthConfigsEmpty(t *testing.T) {
+	t.Parallel()
+
+	result := buildAuthConfigs(nil)
+	if len(result) != 0 {
+		t.Errorf("expected empty map, got %d entries", len(result))
+	}
+}
+
+func TestBuildAuthConfigsSingle(t *testing.T) {
+	t.Parallel()
+
+	auths := []RegistryAuth{
+		{
+			Registry: "registry.example.com",
+			Username: "user",
+			Password: "pass",
+		},
+	}
+
+	result := buildAuthConfigs(auths)
+
+	if len(result) != 1 {
+		t.Fatalf("expected 1 entry, got %d", len(result))
+	}
+
+	cfg, ok := result["registry.example.com"]
+	if !ok {
+		t.Fatal("expected registry.example.com key")
+	}
+
+	if cfg.Username != "user" {
+		t.Errorf("expected username 'user', got %q", cfg.Username)
+	}
+
+	if cfg.Password != "pass" {
+		t.Errorf("expected password 'pass', got %q", cfg.Password)
+	}
+
+	if cfg.ServerAddress != "registry.example.com" {
+		t.Errorf("expected server address 'registry.example.com', got %q", cfg.ServerAddress)
+	}
+}
+
+func TestBuildAuthConfigsMultiple(t *testing.T) {
+	t.Parallel()
+
+	auths := []RegistryAuth{
+		{Registry: "ghcr.io", Username: "ghuser", Password: "ghtoken"},
+		{Registry: "docker.io", Username: "dkuser", Password: "dktoken"},
+	}
+
+	result := buildAuthConfigs(auths)
+
+	if len(result) != 2 {
+		t.Fatalf("expected 2 entries, got %d", len(result))
+	}
+
+	ghcr := result["ghcr.io"]
+	if ghcr.Username != "ghuser" || ghcr.Password != "ghtoken" {
+		t.Errorf("unexpected ghcr.io config: %+v", ghcr)
+	}
+
+	dkr := result["docker.io"]
+	if dkr.Username != "dkuser" || dkr.Password != "dktoken" {
+		t.Errorf("unexpected docker.io config: %+v", dkr)
+	}
+}
+
+func TestRegistryAuthStruct(t *testing.T) {
+	t.Parallel()
+
+	auth := RegistryAuth{
+		Registry: "registry.example.com",
+		Username: "testuser",
+		Password: "testpass",
+	}
+
+	if auth.Registry != "registry.example.com" {
+		t.Errorf("expected registry 'registry.example.com', got %q", auth.Registry)
+	}
+
+	if auth.Username != "testuser" {
+		t.Errorf("expected username 'testuser', got %q", auth.Username)
+	}
+
+	if auth.Password != "testpass" {
+		t.Errorf("expected password 'testpass', got %q", auth.Password)
+	}
+}

internal/docker/client.go

@@ -20,6 +20,7 @@ import (
 	"github.com/docker/docker/api/types/image"
 	"github.com/docker/docker/api/types/mount"
 	"github.com/docker/docker/api/types/network"
+	"github.com/docker/docker/api/types/registry"
 	"github.com/docker/docker/client"
 	"github.com/docker/docker/pkg/archive"
 	"github.com/docker/go-connections/nat"
@@ -105,12 +106,20 @@ func (c *Client) IsConnected() bool {
 	return c.docker != nil
 }
 
+// RegistryAuth contains authentication credentials for a Docker registry.
+type RegistryAuth struct {
+	Registry string
+	Username string
+	Password string //nolint:gosec // credential field required for registry auth
+}
+
 // BuildImageOptions contains options for building an image.
 type BuildImageOptions struct {
 	ContextDir     string
 	DockerfilePath string
 	Tags           []string
-	LogWriter      io.Writer // Optional writer for build output
+	LogWriter      io.Writer      // Optional writer for build output
+	RegistryAuths  []RegistryAuth // Optional registry credentials for pulling private base images
 }
 
 // BuildImage builds a Docker image from a context directory.
@@ -161,6 +170,21 @@ type PortMapping struct {
 	Protocol      string // "tcp" or "udp"
 }
 
+// buildAuthConfigs converts RegistryAuth slices into Docker's AuthConfigs map.
+func buildAuthConfigs(auths []RegistryAuth) map[string]registry.AuthConfig {
+	configs := make(map[string]registry.AuthConfig, len(auths))
+
+	for _, auth := range auths {
+		configs[auth.Registry] = registry.AuthConfig{
+			Username:      auth.Username,
+			Password:      auth.Password,
+			ServerAddress: auth.Registry,
+		}
+	}
+
+	return configs
+}
+
 // buildPortConfig converts port mappings to Docker port configuration.
 func buildPortConfig(ports []PortMapping) (nat.PortSet, nat.PortMap) {
 	exposedPorts := make(nat.PortSet)
@@ -513,12 +537,18 @@ func (c *Client) performBuild(
 	}()
 
 	// Build image
-	resp, err := c.docker.ImageBuild(ctx, tarArchive, dockertypes.ImageBuildOptions{
+	buildOpts := dockertypes.ImageBuildOptions{
 		Dockerfile: opts.DockerfilePath,
 		Tags:       opts.Tags,
 		Remove:     true,
 		NoCache:    false,
-	})
+	}
+
+	if len(opts.RegistryAuths) > 0 {
+		buildOpts.AuthConfigs = buildAuthConfigs(opts.RegistryAuths)
+	}
+
+	resp, err := c.docker.ImageBuild(ctx, tarArchive, buildOpts)
 	if err != nil {
 		return "", fmt.Errorf("failed to build image: %w", err)
 	}

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 {
@@ -139,6 +148,7 @@ func (h *Handlers) HandleAppDetail() http.HandlerFunc {
 		labels, _ := application.GetLabels(request.Context())
 		volumes, _ := application.GetVolumes(request.Context())
 		ports, _ := application.GetPorts(request.Context())
+		registryCreds, _ := application.GetRegistryCredentials(request.Context())
 		deployments, _ := application.GetDeployments(
 			request.Context(),
 			recentDeploymentsLimit,
@@ -154,16 +164,17 @@ func (h *Handlers) HandleAppDetail() http.HandlerFunc {
 		deployKey := formatDeployKey(application.SSHPublicKey, application.CreatedAt, application.Name)
 
 		data := h.addGlobals(map[string]any{
-			"App":              application,
-			"EnvVars":          envVars,
-			"Labels":           labels,
-			"Volumes":          volumes,
-			"Ports":            ports,
-			"Deployments":      deployments,
-			"LatestDeployment": latestDeployment,
-			"WebhookURL":       webhookURL,
-			"DeployKey":        deployKey,
-			"Success":          request.URL.Query().Get("success"),
+			"App":                 application,
+			"EnvVars":             envVars,
+			"Labels":              labels,
+			"Volumes":             volumes,
+			"Ports":               ports,
+			"RegistryCredentials": registryCreds,
+			"Deployments":         deployments,
+			"LatestDeployment":    latestDeployment,
+			"WebhookURL":          webhookURL,
+			"DeployKey":           deployKey,
+			"Success":             request.URL.Query().Get("success"),
 		}, request)
 
 		h.renderTemplate(writer, tmpl, "app_detail.html", data)
@@ -894,50 +905,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 +1249,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) {
@@ -1384,3 +1384,126 @@ func formatDeployKey(pubKey string, createdAt time.Time, appName string) string
 
 	return parts[0] + " " + parts[1] + " " + comment
 }
+
+// HandleRegistryCredentialAdd handles adding a registry credential.
+func (h *Handlers) HandleRegistryCredentialAdd() http.HandlerFunc {
+	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 || application == nil {
+			http.NotFound(writer, request)
+
+			return
+		}
+
+		parseErr := request.ParseForm()
+		if parseErr != nil {
+			http.Error(writer, "Bad Request", http.StatusBadRequest)
+
+			return
+		}
+
+		registryURL := strings.TrimSpace(request.FormValue("registry"))
+		username := strings.TrimSpace(request.FormValue("username"))
+		password := request.FormValue("password")
+
+		if registryURL == "" || username == "" || password == "" {
+			http.Redirect(writer, request, "/apps/"+appID, http.StatusSeeOther)
+
+			return
+		}
+
+		cred := models.NewRegistryCredential(h.db)
+		cred.AppID = appID
+		cred.Registry = registryURL
+		cred.Username = username
+		cred.Password = password
+
+		saveErr := cred.Save(request.Context())
+		if saveErr != nil {
+			h.log.Error("failed to save registry credential", "error", saveErr)
+		}
+
+		http.Redirect(writer, request, "/apps/"+appID, http.StatusSeeOther)
+	}
+}
+
+// HandleRegistryCredentialEdit handles editing an existing registry credential.
+func (h *Handlers) HandleRegistryCredentialEdit() http.HandlerFunc {
+	return func(writer http.ResponseWriter, request *http.Request) {
+		appID := chi.URLParam(request, "id")
+		credIDStr := chi.URLParam(request, "credID")
+
+		credID, parseErr := strconv.ParseInt(credIDStr, 10, 64)
+		if parseErr != nil {
+			http.NotFound(writer, request)
+
+			return
+		}
+
+		cred, findErr := models.FindRegistryCredential(request.Context(), h.db, credID)
+		if findErr != nil || cred == nil || cred.AppID != appID {
+			http.NotFound(writer, request)
+
+			return
+		}
+
+		formErr := request.ParseForm()
+		if formErr != nil {
+			http.Error(writer, "Bad Request", http.StatusBadRequest)
+
+			return
+		}
+
+		registryURL := strings.TrimSpace(request.FormValue("registry"))
+		username := strings.TrimSpace(request.FormValue("username"))
+		password := request.FormValue("password")
+
+		if registryURL == "" || username == "" || password == "" {
+			http.Redirect(writer, request, "/apps/"+appID, http.StatusSeeOther)
+
+			return
+		}
+
+		cred.Registry = registryURL
+		cred.Username = username
+		cred.Password = password
+
+		saveErr := cred.Save(request.Context())
+		if saveErr != nil {
+			h.log.Error("failed to update registry credential", "error", saveErr)
+		}
+
+		http.Redirect(writer, request, "/apps/"+appID, http.StatusSeeOther)
+	}
+}
+
+// HandleRegistryCredentialDelete handles deleting a registry credential.
+func (h *Handlers) HandleRegistryCredentialDelete() http.HandlerFunc {
+	return func(writer http.ResponseWriter, request *http.Request) {
+		appID := chi.URLParam(request, "id")
+		credIDStr := chi.URLParam(request, "credID")
+
+		credID, parseErr := strconv.ParseInt(credIDStr, 10, 64)
+		if parseErr != nil {
+			http.NotFound(writer, request)
+
+			return
+		}
+
+		cred, findErr := models.FindRegistryCredential(request.Context(), h.db, credID)
+		if findErr != nil || cred == nil || cred.AppID != appID {
+			http.NotFound(writer, request)
+
+			return
+		}
+
+		deleteErr := cred.Delete(request.Context())
+		if deleteErr != nil {
+			h.log.Error("failed to delete registry credential", "error", deleteErr)
+		}
+
+		http.Redirect(writer, request, "/apps/"+appID, http.StatusSeeOther)
+	}
+}

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

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

internal/models/app.go

@@ -119,6 +119,11 @@ func (a *App) GetWebhookEvents(
 	return FindWebhookEventsByAppID(ctx, a.db, a.ID, limit)
 }
 
+// GetRegistryCredentials returns all registry credentials for the app.
+func (a *App) GetRegistryCredentials(ctx context.Context) ([]*RegistryCredential, error) {
+	return FindRegistryCredentialsByAppID(ctx, a.db, a.ID)
+}
+
 func (a *App) exists(ctx context.Context) bool {
 	if a.ID == "" {
 		return false

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
 }

internal/models/label.go

@@ -1,4 +1,3 @@
-//nolint:dupl // Active Record pattern - similar structure to env_var.go is intentional
 package models
 
 import (

internal/models/models_test.go

@@ -23,6 +23,7 @@ const (
 	testBranch    = "main"
 	testValue     = "value"
 	testEventType = "push"
+	testUser      = "user"
 )
 
 func setupTestDB(t *testing.T) (*database.Database, func()) {
@@ -704,6 +705,127 @@ func TestAppGetWebhookEvents(t *testing.T) {
 	assert.Len(t, events, 1)
 }
 
+// RegistryCredential Tests.
+
+func TestRegistryCredentialCreateAndFind(t *testing.T) {
+	t.Parallel()
+
+	testDB, cleanup := setupTestDB(t)
+	defer cleanup()
+
+	app := createTestApp(t, testDB)
+
+	cred := models.NewRegistryCredential(testDB)
+	cred.AppID = app.ID
+	cred.Registry = "registry.example.com"
+	cred.Username = "myuser"
+	cred.Password = "mypassword"
+
+	err := cred.Save(context.Background())
+	require.NoError(t, err)
+	assert.NotZero(t, cred.ID)
+
+	creds, err := models.FindRegistryCredentialsByAppID(
+		context.Background(), testDB, app.ID,
+	)
+	require.NoError(t, err)
+	require.Len(t, creds, 1)
+	assert.Equal(t, "registry.example.com", creds[0].Registry)
+	assert.Equal(t, "myuser", creds[0].Username)
+	assert.Equal(t, "mypassword", creds[0].Password)
+}
+
+func TestRegistryCredentialUpdate(t *testing.T) {
+	t.Parallel()
+
+	testDB, cleanup := setupTestDB(t)
+	defer cleanup()
+
+	app := createTestApp(t, testDB)
+
+	cred := models.NewRegistryCredential(testDB)
+	cred.AppID = app.ID
+	cred.Registry = "old.registry.com"
+	cred.Username = "olduser"
+	cred.Password = "oldpass"
+
+	err := cred.Save(context.Background())
+	require.NoError(t, err)
+
+	cred.Registry = "new.registry.com"
+	cred.Username = "newuser"
+	cred.Password = "newpass"
+
+	err = cred.Save(context.Background())
+	require.NoError(t, err)
+
+	found, err := models.FindRegistryCredential(context.Background(), testDB, cred.ID)
+	require.NoError(t, err)
+	require.NotNil(t, found)
+	assert.Equal(t, "new.registry.com", found.Registry)
+	assert.Equal(t, "newuser", found.Username)
+	assert.Equal(t, "newpass", found.Password)
+}
+
+func TestRegistryCredentialDelete(t *testing.T) {
+	t.Parallel()
+
+	testDB, cleanup := setupTestDB(t)
+	defer cleanup()
+
+	app := createTestApp(t, testDB)
+
+	cred := models.NewRegistryCredential(testDB)
+	cred.AppID = app.ID
+	cred.Registry = "delete.registry.com"
+	cred.Username = testUser
+	cred.Password = "pass"
+
+	err := cred.Save(context.Background())
+	require.NoError(t, err)
+
+	err = cred.Delete(context.Background())
+	require.NoError(t, err)
+
+	creds, err := models.FindRegistryCredentialsByAppID(
+		context.Background(), testDB, app.ID,
+	)
+	require.NoError(t, err)
+	assert.Empty(t, creds)
+}
+
+func TestRegistryCredentialFindByIDNotFound(t *testing.T) {
+	t.Parallel()
+
+	testDB, cleanup := setupTestDB(t)
+	defer cleanup()
+
+	found, err := models.FindRegistryCredential(context.Background(), testDB, 99999)
+	require.NoError(t, err)
+	assert.Nil(t, found)
+}
+
+func TestAppGetRegistryCredentials(t *testing.T) {
+	t.Parallel()
+
+	testDB, cleanup := setupTestDB(t)
+	defer cleanup()
+
+	app := createTestApp(t, testDB)
+
+	cred := models.NewRegistryCredential(testDB)
+	cred.AppID = app.ID
+	cred.Registry = "ghcr.io"
+	cred.Username = testUser
+	cred.Password = "token"
+	_ = cred.Save(context.Background())
+
+	creds, err := app.GetRegistryCredentials(context.Background())
+	require.NoError(t, err)
+	assert.Len(t, creds, 1)
+	assert.Equal(t, "ghcr.io", creds[0].Registry)
+}
+
 // Cascade Delete Tests.
 
 //nolint:funlen // Test function with many assertions - acceptable for integration tests
@@ -749,6 +871,13 @@ func TestCascadeDelete(t *testing.T) {
 		deploy.Status = models.DeploymentStatusSuccess
 		_ = deploy.Save(context.Background())
 
+		regCred := models.NewRegistryCredential(testDB)
+		regCred.AppID = app.ID
+		regCred.Registry = "registry.example.com"
+		regCred.Username = testUser
+		regCred.Password = "pass"
+		_ = regCred.Save(context.Background())
+
 		// Delete app.
 		err := app.Delete(context.Background())
 		require.NoError(t, err)
@@ -778,6 +907,11 @@ func TestCascadeDelete(t *testing.T) {
 			context.Background(), testDB, app.ID, 10,
 		)
 		assert.Empty(t, deployments)
+
+		regCreds, _ := models.FindRegistryCredentialsByAppID(
+			context.Background(), testDB, app.ID,
+		)
+		assert.Empty(t, regCreds)
 	})
 }
 

internal/models/registry_credential.go

@@ -0,0 +1,130 @@
+package models
+
+import (
+	"context"
+	"database/sql"
+	"errors"
+	"fmt"
+
+	"sneak.berlin/go/upaas/internal/database"
+)
+
+// RegistryCredential represents authentication credentials for a private Docker registry.
+type RegistryCredential struct {
+	db *database.Database
+
+	ID       int64
+	AppID    string
+	Registry string
+	Username string
+	Password string //nolint:gosec // credential field required for registry auth
+}
+
+// NewRegistryCredential creates a new RegistryCredential with a database reference.
+func NewRegistryCredential(db *database.Database) *RegistryCredential {
+	return &RegistryCredential{db: db}
+}
+
+// Save inserts or updates the registry credential in the database.
+func (r *RegistryCredential) Save(ctx context.Context) error {
+	if r.ID == 0 {
+		return r.insert(ctx)
+	}
+
+	return r.update(ctx)
+}
+
+// Delete removes the registry credential from the database.
+func (r *RegistryCredential) Delete(ctx context.Context) error {
+	_, err := r.db.Exec(ctx, "DELETE FROM registry_credentials WHERE id = ?", r.ID)
+
+	return err
+}
+
+func (r *RegistryCredential) insert(ctx context.Context) error {
+	query := "INSERT INTO registry_credentials (app_id, registry, username, password) VALUES (?, ?, ?, ?)"
+
+	result, err := r.db.Exec(ctx, query, r.AppID, r.Registry, r.Username, r.Password)
+	if err != nil {
+		return err
+	}
+
+	id, err := result.LastInsertId()
+	if err != nil {
+		return err
+	}
+
+	r.ID = id
+
+	return nil
+}
+
+func (r *RegistryCredential) update(ctx context.Context) error {
+	query := "UPDATE registry_credentials SET registry = ?, username = ?, password = ? WHERE id = ?"
+
+	_, err := r.db.Exec(ctx, query, r.Registry, r.Username, r.Password, r.ID)
+
+	return err
+}
+
+// FindRegistryCredential finds a registry credential by ID.
+//
+//nolint:nilnil // returning nil,nil is idiomatic for "not found" in Active Record
+func FindRegistryCredential(
+	ctx context.Context,
+	db *database.Database,
+	id int64,
+) (*RegistryCredential, error) {
+	cred := NewRegistryCredential(db)
+
+	row := db.QueryRow(ctx,
+		"SELECT id, app_id, registry, username, password FROM registry_credentials WHERE id = ?",
+		id,
+	)
+
+	err := row.Scan(&cred.ID, &cred.AppID, &cred.Registry, &cred.Username, &cred.Password)
+	if err != nil {
+		if errors.Is(err, sql.ErrNoRows) {
+			return nil, nil
+		}
+
+		return nil, fmt.Errorf("scanning registry credential: %w", err)
+	}
+
+	return cred, nil
+}
+
+// FindRegistryCredentialsByAppID finds all registry credentials for an app.
+func FindRegistryCredentialsByAppID(
+	ctx context.Context,
+	db *database.Database,
+	appID string,
+) ([]*RegistryCredential, error) {
+	query := `
+		SELECT id, app_id, registry, username, password FROM registry_credentials
+		WHERE app_id = ? ORDER BY registry`
+
+	rows, err := db.Query(ctx, query, appID)
+	if err != nil {
+		return nil, fmt.Errorf("querying registry credentials by app: %w", err)
+	}
+
+	defer func() { _ = rows.Close() }()
+
+	var creds []*RegistryCredential
+
+	for rows.Next() {
+		cred := NewRegistryCredential(db)
+
+		scanErr := rows.Scan(
+			&cred.ID, &cred.AppID, &cred.Registry, &cred.Username, &cred.Password,
+		)
+		if scanErr != nil {
+			return nil, scanErr
+		}
+
+		creds = append(creds, cred)
+	}
+
+	return creds, rows.Err()
+}

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 (

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", s.handlers.HandleEnvVarAdd())
-			r.Post("/apps/{id}/env/{varID}/edit", s.handlers.HandleEnvVarEdit())
-			r.Post("/apps/{id}/env/{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())
@@ -99,6 +98,11 @@ func (s *Server) SetupRoutes() {
 			// Ports
 			r.Post("/apps/{id}/ports", s.handlers.HandlePortAdd())
 			r.Post("/apps/{id}/ports/{portID}/delete", s.handlers.HandlePortDelete())
+
+			// Registry Credentials
+			r.Post("/apps/{id}/registry-credentials", s.handlers.HandleRegistryCredentialAdd())
+			r.Post("/apps/{id}/registry-credentials/{credID}/edit", s.handlers.HandleRegistryCredentialEdit())
+			r.Post("/apps/{id}/registry-credentials/{credID}/delete", s.handlers.HandleRegistryCredentialDelete())
 		})
 	})
 

internal/service/deploy/deploy.go

@@ -830,6 +830,13 @@ func (svc *Service) buildImage(
 	logWriter := newDeploymentLogWriter(ctx, deployment)
 	defer logWriter.Close()
 
+	// Fetch registry credentials for private base images
+	registryAuths, err := svc.buildRegistryAuths(ctx, app)
+	if err != nil {
+		svc.log.Warn("failed to fetch registry credentials", "error", err, "app", app.Name)
+		// Continue without auth — public images will still work
+	}
+
 	// BuildImage creates a tar archive from the local filesystem,
 	// so it needs the container path where files exist, not the host path.
 	imageID, err := svc.docker.BuildImage(ctx, docker.BuildImageOptions{
@@ -837,6 +844,7 @@ func (svc *Service) buildImage(
 		DockerfilePath: app.DockerfilePath,
 		Tags:           []string{imageTag},
 		LogWriter:      logWriter,
+		RegistryAuths:  registryAuths,
 	})
 	if err != nil {
 		svc.notify.NotifyBuildFailed(ctx, app, deployment, err)
@@ -1227,6 +1235,34 @@ func (svc *Service) failDeployment(
 	_ = app.Save(ctx)
 }
 
+// buildRegistryAuths fetches registry credentials for an app and converts them
+// to Docker RegistryAuth objects for use during image builds.
+func (svc *Service) buildRegistryAuths(
+	ctx context.Context,
+	app *models.App,
+) ([]docker.RegistryAuth, error) {
+	creds, err := app.GetRegistryCredentials(ctx)
+	if err != nil {
+		return nil, fmt.Errorf("failed to get registry credentials: %w", err)
+	}
+
+	if len(creds) == 0 {
+		return nil, nil
+	}
+
+	auths := make([]docker.RegistryAuth, 0, len(creds))
+
+	for _, cred := range creds {
+		auths = append(auths, docker.RegistryAuth{
+			Registry: cred.Registry,
+			Username: cred.Username,
+			Password: cred.Password,
+		})
+	}
+
+	return auths, nil
+}
+
 // writeLogsToFile writes the deployment logs to a file on disk.
 // Structure: DataDir/logs/<hostname>/<appname>/<appname>_<sha>_<timestamp>.log.txt
 func (svc *Service) writeLogsToFile(app *models.App, deployment *models.Deployment) {

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);
+        },
+    }));
 });

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,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);
+        },
+    }));
 });

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);
+        },
+    }));
 });

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);
+        }
+    });
 });

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,33 +115,91 @@
                     </tr>
                 </thead>
                 <tbody class="table-body">
-                    {{range .EnvVars}}
+                    <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="editIdx !== idx">
+                            <td class="font-mono text-gray-500" x-text="env.value"></td>
+                        </template>
+                        <template x-if="editIdx !== idx">
+                            <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>
+                            </td>
+                        </template>
+                        <template x-if="editIdx === idx">
+                            <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">
+                                    <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>
+                                </form>
+                                <p class="text-xs text-amber-600 mt-1">⚠ Container restart needed after env var changes.</p>
+                            </td>
+                        </template>
+                    </tr>
+                    </template>
+                </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">
+            <button type="submit" class="btn-primary">Add</button>
+        </form>
+        <div class="hidden">{{ .CSRFField }}</div>
+    </div>
+
+    <!-- Registry Credentials -->
+    <div class="card p-6 mb-6">
+        <h2 class="section-title mb-4">Registry Credentials</h2>
+        <p class="text-sm text-gray-500 mb-3">Authenticate to private Docker registries when pulling base images during builds.</p>
+        {{if .RegistryCredentials}}
+        <div class="overflow-x-auto mb-4">
+            <table class="table">
+                <thead class="table-header">
+                    <tr>
+                        <th>Registry</th>
+                        <th>Username</th>
+                        <th>Password</th>
+                        <th class="text-right">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="table-body">
+                    {{range .RegistryCredentials}}
                     <tr x-data="{ editing: false }">
                         <template x-if="!editing">
-                            <td class="font-mono font-medium">{{.Key}}</td>
+                            <td class="font-mono">{{.Registry}}</td>
                         </template>
                         <template x-if="!editing">
-                            <td class="font-mono text-gray-500">{{.Value}}</td>
+                            <td class="font-mono">{{.Username}}</td>
+                        </template>
+                        <template x-if="!editing">
+                            <td class="font-mono text-gray-400">••••••••</td>
                         </template>
                         <template x-if="!editing">
                             <td class="text-right">
                                 <button @click="editing = true" class="text-primary-600 hover:text-primary-800 text-sm mr-2">Edit</button>
-                                <form method="POST" action="/apps/{{$.App.ID}}/env/{{.ID}}/delete" class="inline" x-data="confirmAction('Delete this environment variable?')" @submit="confirm($event)">
+                                <form method="POST" action="/apps/{{$.App.ID}}/registry-credentials/{{.ID}}/delete" class="inline" x-data="confirmAction('Delete this registry credential?')" @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="editing">
-                            <td colspan="3">
-                                <form method="POST" action="/apps/{{$.App.ID}}/env/{{.ID}}/edit" class="flex gap-2 items-center">
+                            <td colspan="4">
+                                <form method="POST" action="/apps/{{$.App.ID}}/registry-credentials/{{.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">
+                                    <input type="text" name="registry" value="{{.Registry}}" required class="input flex-1 font-mono text-sm" placeholder="registry.example.com">
+                                    <input type="text" name="username" value="{{.Username}}" required class="input flex-1 font-mono text-sm" placeholder="username">
+                                    <input type="password" name="password" required class="input flex-1 font-mono text-sm" placeholder="password">
                                     <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>
                                 </form>
-                                <p class="text-xs text-amber-600 mt-1">⚠ Container restart needed after env var changes.</p>
                             </td>
                         </template>
                     </tr>
@@ -146,10 +208,11 @@
             </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">
+        <form method="POST" action="/apps/{{.App.ID}}/registry-credentials" class="flex flex-col sm:flex-row gap-2">
+            {{ .CSRFField }}
+            <input type="text" name="registry" placeholder="registry.example.com" required class="input flex-1 font-mono text-sm">
+            <input type="text" name="username" placeholder="username" required class="input flex-1 font-mono text-sm">
+            <input type="password" name="password" placeholder="password" required class="input flex-1 font-mono text-sm">
             <button type="submit" class="btn-primary">Add</button>
         </form>
     </div>

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)

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