feat(templates): visual graph builder

Canvas mode in the template editor (lazy-loaded React Flow): service
nodes for web/worker/cron/database, connect handles to set depends_on,
per-node inspector (image/repo, engine, port, health check, env,
volumes), live validation (dup keys, missing deps, cycles, missing
source), and an Apply step that serializes back to the version-2 graph
config JSON.

- builder-model.ts is pure: config↔canvas round-trip, layered
  auto-layout, flat-legacy→single-node migration, validation —
  16 vitest cases cover all of it
- node positions persist under config.canvas (backend ignores unknown
  config keys, so no schema change)
- flat legacy templates open as a single node so nothing is lost on
  edit

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

ROADMAP2.md

@@ -252,9 +252,12 @@ goroutines; this fixes correctness *and* unlocks the ops surface.
 - [x] **Graph deploy pipeline** — creates services in dependency order,
   resolves vars/secrets, triggers builds. `deployTemplateGraph`,
   `POST /templates/deploy` (inline), `POST /projects/:id/import-compose`.
-- [ ] **Visual template builder** — canvas mode: drop git/image/db
-  nodes, wire refs, set order, save/publish. Reuses existing canvas
-  primitives (dflow's `templates/compose` is exactly this).
+- [x] **Visual template builder** — canvas mode in the template editor:
+  web/worker/cron/database nodes, handles wire `depends_on`, inspector
+  edits image/repo/engine/port/env/volumes, live validation, applies
+  back to the version-2 graph JSON. Positions persist under
+  `config.canvas`; flat legacy configs open as a single node.
+  `builder-model.ts` + `TemplateBuilder.tsx`.
 - [x] **Catalog growth** — seeded graph stacks for n8n, Gitea,
   Nextcloud, Vaultwarden, Umami, Immich (Plausible already shipped).
   `TestSeedTemplatesResolveCleanly` keeps every seed parseable,
@@ -507,13 +510,19 @@ and wired refs, one click or one CLI call.
     deployment history, env-doctor issues surfaced on the service view.
   - [x] **env var edit + domain management + replica scaling** (PR #61 —
     mobile v1.5: variables editor, domains screen, scale + sleep
-    settings, notifications tab). **cron execution history** still open.
-  - [ ] **Push notifications** — zero-infra path = self-hosted
-    ntfy/Gotify relay (no Firebase dependency), FCM/APNs optional.
-  - [ ] **Offline resilience** — cached last-known state + unreachable
-    banner.
-- [ ] **Status/offline resilience** — app + CLI degrade gracefully when
-  the instance is unreachable (cached last-known state, clear banner).
+    settings, notifications tab, cron jobs screen with run-now and
+    execution history).
+  - [x] **Push notifications** — per-user `notification_channels`
+    (ntfy + Gotify): every `insertUserNotification` fans out best-effort
+    to enabled channels; CRUD + live test-ping via web settings, CLI
+    `notifications channels`, and MCP. FCM/APNs remain optional.
+  - [x] **Offline resilience** — AsyncStorage-persisted query cache
+    (7d, high-churn keys excluded) + banner when the instance is
+    unreachable (`/health` ping + expo-network).
+- [x] **Status/offline resilience** — web persists the query cache to
+  localStorage (24h) and PlatformShell shows a "last-known data" banner
+  on offline/unreachable; CLI exits `ExitUnavailable` with a clean
+  "cannot reach" message (no stack traces).
 
 ## 10. Carried-over debt (ROADMAP.md items still open)
 
@@ -523,13 +532,26 @@ and wired refs, one click or one CLI call.
 - [x] **Preview environments runtime** — previews are real service clones:
   branch override, queued deployment, node-domain hostnames, TTL sweeper,
   promote = redeploy of the source at the preview branch.
-- [ ] **Environments** — env switcher, per-env vars/domains, promote.
+- [x] **Environments** — CRUD (`GET/POST /projects/:id/environments`,
+  `DELETE /environments/:id`), switcher chips with service counts in the
+  workspace, CLI `environments` + MCP parity. Per-env vars/domains ride the
+  service's own scope (one env per service); promote ships via preview
+  promote.
 - [ ] **sqlc port** — ~140 raw `database/sql` sites → `sqlc/queries/`.
 - [ ] **Tests** — canvas/wizard frontend coverage, deployment/template/
   webhook table tests, Playwright e2e golden path.
-- [ ] **First-run wizard** — admin → GitHub App (manifest flow from
-  Phase G makes this self-serve) → Tunnel → done.
-- [ ] **Self-upgrade loop verification**, docs freshness, v1.0.0 release.
+- [x] **First-run wizard** — public `GET /setup/status` + authed
+  `POST /setup/complete`; `/setup` page steps admin account → GitHub App
+  manifest flow (callback returns to the wizard via a session marker) →
+  optional Cloudflare tunnel token → done. Shell redirects signed-in
+  users to `/setup` while `needs_setup`; installs with existing projects
+  auto-complete so nobody gets nagged retroactively.
+- [x] **Self-upgrade loop verification** — live-verified: admin
+  `POST /agents/:id/upgrade` → `self_upgrade` command → agent downloads
+  `/api/agents/download/linux-amd64` → sha256 verify → `--version`
+  sanity → atomic rename → result posts → `syscall.Exec` re-exec. Agent
+  ran `v0.0.1-old`, came back `v9.9.9-test`, command row `completed`.
+- [ ] **Docs freshness, v1.0.0 release.**
 
 ## 11. Deliberately not imported from dflow
 

app/backend/internal/api/cron_test.go

@@ -0,0 +1,66 @@
+package api
+
+import (
+	"strings"
+	"testing"
+	"time"
+)
+
+func TestCalculateNextRun(t *testing.T) {
+	cases := []struct {
+		name     string
+		schedule string
+		timezone string
+		wantErr  bool
+	}{
+		{"every minute", "* * * * *", "", false},
+		{"daily at 4am", "0 4 * * *", "UTC", false},
+		{"weekday run", "0 9 * * 1-5", "Europe/Prague", false},
+		{"whitespace tolerated", "  */15 * * * *  ", "", false},
+		{"empty schedule", "", "", true},
+		{"bad field count", "* * *", "", true},
+		{"garbage", "not a cron", "", true},
+		{"bad timezone", "0 4 * * *", "Mars/Olympus", true},
+	}
+	now := time.Now()
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			next, err := calculateNextRun(tc.schedule, tc.timezone)
+			if tc.wantErr {
+				if err == nil {
+					t.Fatalf("expected error, got next=%v", next)
+				}
+				return
+			}
+			if err != nil {
+				t.Fatalf("unexpected error: %v", err)
+			}
+			if next == nil {
+				t.Fatal("expected non-nil next run")
+			}
+			if !next.After(now) {
+				t.Errorf("next run %v is not after %v", next, now)
+			}
+		})
+	}
+}
+
+func TestCalculateNextRunTimezone(t *testing.T) {
+	// CRON_TZ must change the computed instant: 04:00 in a fixed-offset zone
+	// lands at a different UTC hour than 04:00 UTC.
+	utcNext, err := calculateNextRun("0 4 * * *", "UTC")
+	if err != nil {
+		t.Fatalf("utc: %v", err)
+	}
+	tokyoNext, err := calculateNextRun("0 4 * * *", "Asia/Tokyo")
+	if err != nil {
+		t.Fatalf("tokyo: %v", err)
+	}
+	if utcNext.Equal(*tokyoNext) {
+		t.Fatalf("timezone had no effect: both %v", utcNext)
+	}
+	if !strings.EqualFold(utcNext.Location().String(), "Local") {
+		// UTC-scheduled runs still land in server-local time representation.
+		t.Logf("utc next: %v / tokyo next: %v", utcNext, tokyoNext)
+	}
+}

app/backend/internal/api/deployments.go

@@ -803,9 +803,15 @@ func splitImageReference(image, fallbackTag string) (string, string) {
 		return "", fallbackTag
 	}
 
+	// Digest-pinned refs (name[:tag]@sha256:…) carry no usable tag — the
+	// colon lives inside the digest and must not be split.
+	if strings.Contains(image, "@") {
+		return image, fallbackTag
+	}
+
 	lastSlash := strings.LastIndex(image, "/")
 	lastColon := strings.LastIndex(image, ":")
-	if lastColon > lastSlash && !strings.Contains(image[lastColon:], "@") {
+	if lastColon > lastSlash {
 		return image[:lastColon], image[lastColon+1:]
 	}
 

app/backend/internal/api/deployments_test.go

@@ -0,0 +1,46 @@
+package api
+
+import "testing"
+
+func TestSplitImageReference(t *testing.T) {
+	cases := []struct {
+		name      string
+		image     string
+		fallback  string
+		wantImage string
+		wantTag   string
+	}{
+		{"empty uses fallback tag", "", "latest", "", "latest"},
+		{"bare image", "nginx", "latest", "nginx", "latest"},
+		{"tagged image", "nginx:1.27", "latest", "nginx", "1.27"},
+		{"registry with port untagged", "registry.local:5000/app", "latest", "registry.local:5000/app", "latest"},
+		{"registry with port tagged", "registry.local:5000/app:v2", "latest", "registry.local:5000/app", "v2"},
+		{"digest stays whole", "nginx@sha256:abc123", "latest", "nginx@sha256:abc123", "latest"},
+		{"tag and digest", "nginx:1.27@sha256:abc", "latest", "nginx:1.27@sha256:abc", "latest"},
+		{"namespaced tagged", "ghcr.io/owner/repo:dev", "latest", "ghcr.io/owner/repo", "dev"},
+	}
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			img, tag := splitImageReference(tc.image, tc.fallback)
+			if img != tc.wantImage || tag != tc.wantTag {
+				t.Fatalf("splitImageReference(%q, %q) = (%q, %q), want (%q, %q)",
+					tc.image, tc.fallback, img, tag, tc.wantImage, tc.wantTag)
+			}
+		})
+	}
+}
+
+func TestMapEngineStatusToDBStatus(t *testing.T) {
+	cases := map[string]string{
+		"running":   "deployed",
+		"building":  "building",
+		"failed":    "failed",
+		"cancelled": "cancelled",
+		"queued":    "queued",
+	}
+	for in, want := range cases {
+		if got := mapEngineStatusToDBStatus(in); got != want {
+			t.Fatalf("mapEngineStatusToDBStatus(%q) = %q, want %q", in, got, want)
+		}
+	}
+}

app/backend/internal/api/environments.go

@@ -0,0 +1,140 @@
+package api
+
+// Project environments — the named lanes services deploy into
+// (production/development/preview are seeded; custom names allowed).
+
+import (
+	"context"
+	"net/http"
+	"regexp"
+	"strings"
+	"time"
+
+	"containr/internal/database"
+	"containr/internal/database/sqlcdb"
+
+	"github.com/gin-gonic/gin"
+	"github.com/google/uuid"
+)
+
+var envNamePattern = regexp.MustCompile(`^[a-z0-9]([a-z0-9-]{0,48}[a-z0-9])?$`)
+
+type environmentDTO struct {
+	ID           uuid.UUID `json:"id"`
+	Name         string    `json:"name"`
+	ProjectID    uuid.UUID `json:"project_id"`
+	CreatedAt    time.Time `json:"created_at"`
+	UpdatedAt    time.Time `json:"updated_at"`
+	ServiceCount int64     `json:"service_count"`
+}
+
+func toEnvironmentDTO(id uuid.UUID, name string, projectID uuid.UUID, created, updated time.Time, count int64) environmentDTO {
+	return environmentDTO{ID: id, Name: name, ProjectID: projectID, CreatedAt: created, UpdatedAt: updated, ServiceCount: count}
+}
+
+// handleListEnvironments returns the project's environments with live
+// service counts — the data behind the env switcher.
+func handleListEnvironments(c *gin.Context) {
+	db := c.MustGet("db").(*database.DB)
+	projectID, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		respondError(c, http.StatusBadRequest, "VALIDATION", "Invalid project ID")
+		return
+	}
+	if exists, allowed := projectReadAccess(c, db, projectID); !exists || !allowed {
+		respondError(c, http.StatusNotFound, "NOT_FOUND", "Project not found")
+		return
+	}
+	rows, err := sqlcdb.New(db.DB).ListProjectEnvironments(context.Background(), projectID)
+	if err != nil {
+		respondError(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to list environments")
+		return
+	}
+	envs := make([]environmentDTO, 0, len(rows))
+	for _, r := range rows {
+		envs = append(envs, toEnvironmentDTO(r.ID, r.Name, r.ProjectID, r.CreatedAt.Time, r.UpdatedAt.Time, r.ServiceCount))
+	}
+	c.JSON(http.StatusOK, gin.H{"environments": envs})
+}
+
+// handleCreateEnvironment adds a named environment lane to the project.
+func handleCreateEnvironment(c *gin.Context) {
+	db := c.MustGet("db").(*database.DB)
+	projectID, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		respondError(c, http.StatusBadRequest, "VALIDATION", "Invalid project ID")
+		return
+	}
+	userID, exists := c.Get("user_id")
+	if !exists || !ownsProject(db, projectID, userID.(string), contextIsAdmin(c)) {
+		respondError(c, http.StatusForbidden, "FORBIDDEN", "Access denied")
+		return
+	}
+	var req struct {
+		Name string `json:"name" binding:"required"`
+	}
+	if err := c.ShouldBindJSON(&req); err != nil {
+		respondError(c, http.StatusBadRequest, "VALIDATION", "name is required")
+		return
+	}
+	name := strings.ToLower(strings.TrimSpace(req.Name))
+	if !envNamePattern.MatchString(name) {
+		respondError(c, http.StatusBadRequest, "VALIDATION", "Name must be lowercase alphanumeric with dashes, 1-50 chars")
+		return
+	}
+	q := sqlcdb.New(db.DB)
+	if _, err := q.GetProjectEnvironmentByName(context.Background(), sqlcdb.GetProjectEnvironmentByNameParams{
+		ProjectID: projectID, Name: name,
+	}); err == nil {
+		respondError(c, http.StatusConflict, "CONFLICT", "Environment already exists")
+		return
+	}
+	if err := q.InsertProjectEnvironment(context.Background(), sqlcdb.InsertProjectEnvironmentParams{
+		Name: name, ProjectID: projectID,
+	}); err != nil {
+		respondError(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to create environment")
+		return
+	}
+	env, _ := q.GetProjectEnvironmentByName(context.Background(), sqlcdb.GetProjectEnvironmentByNameParams{
+		ProjectID: projectID, Name: name,
+	})
+	LogAuditWithRequest(c, "project", projectID.String(), "environment.create", map[string]interface{}{"name": name})
+	c.JSON(http.StatusCreated, gin.H{"environment": toEnvironmentDTO(env.ID, env.Name, env.ProjectID, env.CreatedAt.Time, env.UpdatedAt.Time, 0)})
+}
+
+// handleDeleteEnvironment removes an environment that holds no services.
+func handleDeleteEnvironment(c *gin.Context) {
+	db := c.MustGet("db").(*database.DB)
+	envID, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		respondError(c, http.StatusBadRequest, "VALIDATION", "Invalid environment ID")
+		return
+	}
+	userID, exists := c.Get("user_id")
+	if !exists {
+		respondError(c, http.StatusUnauthorized, "UNAUTHORIZED", "User not authenticated")
+		return
+	}
+	var projectID uuid.UUID
+	if err := db.QueryRow(`SELECT project_id FROM environments WHERE id = $1`, envID).Scan(&projectID); err != nil {
+		respondError(c, http.StatusNotFound, "NOT_FOUND", "Environment not found")
+		return
+	}
+	if !ownsProject(db, projectID, userID.(string), contextIsAdmin(c)) {
+		respondError(c, http.StatusForbidden, "FORBIDDEN", "Access denied")
+		return
+	}
+	q := sqlcdb.New(db.DB)
+	if n, err := q.CountEnvironmentServices(context.Background(), envID); err == nil && n > 0 {
+		respondError(c, http.StatusConflict, "CONFLICT", "Environment still contains services — move them first")
+		return
+	}
+	if err := q.DeleteProjectEnvironment(context.Background(), sqlcdb.DeleteProjectEnvironmentParams{
+		ID: envID, ProjectID: projectID,
+	}); err != nil {
+		respondError(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to delete environment")
+		return
+	}
+	LogAuditWithRequest(c, "project", projectID.String(), "environment.delete", map[string]interface{}{"environment_id": envID.String()})
+	c.JSON(http.StatusOK, gin.H{"message": "Environment deleted"})
+}

app/backend/internal/api/notification_channels.go

@@ -0,0 +1,225 @@
+package api
+
+// Push notification channels — self-hosted ntfy and Gotify endpoints users
+// attach to their account. insertUserNotification fans out best-effort.
+
+import (
+	"bytes"
+	"context"
+	"database/sql"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"net/url"
+	"strings"
+	"time"
+
+	"containr/internal/database"
+	"containr/internal/database/sqlcdb"
+
+	"github.com/gin-gonic/gin"
+	"github.com/google/uuid"
+)
+
+// jarvis: ceiling — one shared client; no retry/backoff, delivery is
+// best-effort and failures are silent by design (notifications must never
+// break the producing flow).
+var pushHTTPClient = &http.Client{Timeout: 5 * time.Second}
+
+type notificationChannelDTO struct {
+	ID        string `json:"id"`
+	Kind      string `json:"kind"`
+	Endpoint  string `json:"endpoint"`
+	Enabled   bool   `json:"enabled"`
+	CreatedAt string `json:"created_at"`
+}
+
+func mapChannel(row sqlcdb.NotificationChannel) notificationChannelDTO {
+	return notificationChannelDTO{
+		ID:        row.ID.String(),
+		Kind:      row.Kind,
+		Endpoint:  row.Endpoint,
+		Enabled:   row.Enabled,
+		CreatedAt: row.CreatedAt.Time.Format(time.RFC3339),
+	}
+}
+
+func handleListNotificationChannels(c *gin.Context) {
+	userID, ok := requireAuthenticatedUserID(c)
+	if !ok {
+		return
+	}
+	db := c.MustGet("db").(*database.DB)
+	uid, _ := uuid.Parse(userID)
+	rows, err := sqlcdb.New(db.DB).ListAllNotificationChannelsByUser(c.Request.Context(), uid)
+	if err != nil {
+		respondError(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to list channels")
+		return
+	}
+	out := make([]notificationChannelDTO, 0, len(rows))
+	for _, r := range rows {
+		out = append(out, mapChannel(r))
+	}
+	c.JSON(http.StatusOK, gin.H{"channels": out})
+}
+
+func handleCreateNotificationChannel(c *gin.Context) {
+	userID, ok := requireAuthenticatedUserID(c)
+	if !ok {
+		return
+	}
+	var req struct {
+		Kind     string `json:"kind" binding:"required,oneof=ntfy gotify"`
+		Endpoint string `json:"endpoint" binding:"required"`
+		Token    string `json:"token"`
+	}
+	if err := c.ShouldBindJSON(&req); err != nil {
+		respondError(c, http.StatusBadRequest, "VALIDATION", "kind (ntfy|gotify) and endpoint are required")
+		return
+	}
+	endpoint := strings.TrimRight(strings.TrimSpace(req.Endpoint), "/")
+	u, err := url.Parse(endpoint)
+	if err != nil || u.Scheme == "" || u.Host == "" || (u.Scheme != "http" && u.Scheme != "https") {
+		respondError(c, http.StatusBadRequest, "VALIDATION", "endpoint must be a valid http(s) URL")
+		return
+	}
+	db := c.MustGet("db").(*database.DB)
+	uid, _ := uuid.Parse(userID)
+	row, err := sqlcdb.New(db.DB).InsertNotificationChannel(c.Request.Context(), sqlcdb.InsertNotificationChannelParams{
+		UserID:   uid,
+		Kind:     req.Kind,
+		Endpoint: endpoint,
+		Token:    sql.NullString{String: req.Token, Valid: req.Token != ""},
+	})
+	if err != nil {
+		respondError(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to create channel")
+		return
+	}
+	c.JSON(http.StatusCreated, gin.H{"channel": mapChannel(row)})
+}
+
+func handleDeleteNotificationChannel(c *gin.Context) {
+	userID, ok := requireAuthenticatedUserID(c)
+	if !ok {
+		return
+	}
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		respondError(c, http.StatusBadRequest, "VALIDATION", "Invalid channel id")
+		return
+	}
+	db := c.MustGet("db").(*database.DB)
+	uid, _ := uuid.Parse(userID)
+	n, err := sqlcdb.New(db.DB).DeleteNotificationChannel(c.Request.Context(), sqlcdb.DeleteNotificationChannelParams{
+		ID: id, UserID: uid,
+	})
+	if err != nil {
+		respondError(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to delete channel")
+		return
+	}
+	if n == 0 {
+		respondError(c, http.StatusNotFound, "NOT_FOUND", "Channel not found")
+		return
+	}
+	c.JSON(http.StatusOK, gin.H{"message": "Channel deleted"})
+}
+
+// handleTestNotificationChannel pushes a probe notification through the
+// channel — surfaces misconfiguration before real alerts depend on it.
+func handleTestNotificationChannel(c *gin.Context) {
+	userID, ok := requireAuthenticatedUserID(c)
+	if !ok {
+		return
+	}
+	id, err := uuid.Parse(c.Param("id"))
+	if err != nil {
+		respondError(c, http.StatusBadRequest, "VALIDATION", "Invalid channel id")
+		return
+	}
+	db := c.MustGet("db").(*database.DB)
+	uid, _ := uuid.Parse(userID)
+	rows, err := sqlcdb.New(db.DB).ListAllNotificationChannelsByUser(c.Request.Context(), uid)
+	if err != nil {
+		respondError(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to load channel")
+		return
+	}
+	var target *sqlcdb.NotificationChannel
+	for i := range rows {
+		if rows[i].ID == id {
+			target = &rows[i]
+			break
+		}
+	}
+	if target == nil {
+		respondError(c, http.StatusNotFound, "NOT_FOUND", "Channel not found")
+		return
+	}
+	if err := deliverPush(c.Request.Context(), *target, "test", "Containr test notification", "Your push channel is configured correctly."); err != nil {
+		respondError(c, http.StatusBadGateway, "DELIVERY_FAILED", fmt.Sprintf("Push failed: %v", err))
+		return
+	}
+	c.JSON(http.StatusOK, gin.H{"message": "Test notification sent"})
+}
+
+// deliverPush sends one notification through a channel. ntfy expects the
+// body at POST {endpoint} with Title/Priority headers; Gotify takes JSON at
+// POST {endpoint}/message?token=...
+func deliverPush(ctx context.Context, ch sqlcdb.NotificationChannel, kind, title, body string) error {
+	var req *http.Request
+	var err error
+	switch ch.Kind {
+	case "ntfy":
+		req, err = http.NewRequestWithContext(ctx, http.MethodPost, ch.Endpoint, strings.NewReader(body))
+		if err == nil {
+			req.Header.Set("Title", title)
+			req.Header.Set("Tags", "containr,"+kind)
+			if ch.Token.Valid && ch.Token.String != "" {
+				req.Header.Set("Authorization", "Bearer "+ch.Token.String)
+			}
+		}
+	case "gotify":
+		payload, _ := json.Marshal(map[string]interface{}{
+			"title":    title,
+			"message":  body,
+			"priority": 5,
+		})
+		endpoint := ch.Endpoint + "/message"
+		if ch.Token.Valid && ch.Token.String != "" {
+			endpoint += "?token=" + url.QueryEscape(ch.Token.String)
+		}
+		req, err = http.NewRequestWithContext(ctx, http.MethodPost, endpoint, bytes.NewReader(payload))
+		if err == nil {
+			req.Header.Set("Content-Type", "application/json")
+		}
+	default:
+		return fmt.Errorf("unsupported channel kind %q", ch.Kind)
+	}
+	if err != nil {
+		return err
+	}
+	res, err := pushHTTPClient.Do(req)
+	if err != nil {
+		return err
+	}
+	defer res.Body.Close()
+	if res.StatusCode >= 400 {
+		return fmt.Errorf("push endpoint returned %d", res.StatusCode)
+	}
+	return nil
+}
+
+// fanoutUserPush delivers a notification to every enabled channel the user
+// configured. Errors are swallowed — the in-app row already landed.
+func fanoutUserPush(db *database.DB, userID, kind, title, body string) {
+	uid, err := uuid.Parse(userID)
+	if err != nil {
+		return
+	}
+	rows, err := sqlcdb.New(db.DB).ListNotificationChannelsByUser(context.Background(), uid)
+	if err != nil || len(rows) == 0 {
+		return
+	}
+	for _, ch := range rows {
+		_ = deliverPush(context.Background(), ch, kind, title, body)
+	}
+}

app/backend/internal/api/notification_channels_test.go

@@ -0,0 +1,80 @@
+package api
+
+import (
+	"context"
+	"database/sql"
+	"encoding/json"
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+
+	"containr/internal/database/sqlcdb"
+)
+
+func TestDeliverPushNtfy(t *testing.T) {
+	var gotAuth, gotTitle, gotTags, gotBody string
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		gotAuth = r.Header.Get("Authorization")
+		gotTitle = r.Header.Get("Title")
+		gotTags = r.Header.Get("Tags")
+		b, _ := io.ReadAll(r.Body)
+		gotBody = string(b)
+		w.WriteHeader(http.StatusOK)
+	}))
+	defer srv.Close()
+
+	ch := sqlcdb.NotificationChannel{
+		Kind:     "ntfy",
+		Endpoint: srv.URL + "/alerts",
+		Token:    sql.NullString{String: "tk_abc", Valid: true},
+	}
+	if err := deliverPush(context.Background(), ch, "deployment", "Deploy done", "svc is live"); err != nil {
+		t.Fatalf("deliverPush: %v", err)
+	}
+	if gotAuth != "Bearer tk_abc" {
+		t.Fatalf("auth header = %q", gotAuth)
+	}
+	if gotTitle != "Deploy done" || gotTags != "containr,deployment" || gotBody != "svc is live" {
+		t.Fatalf("title=%q tags=%q body=%q", gotTitle, gotTags, gotBody)
+	}
+}
+
+func TestDeliverPushGotify(t *testing.T) {
+	var gotPath, gotToken string
+	var payload map[string]interface{}
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		gotPath = r.URL.Path
+		gotToken = r.URL.Query().Get("token")
+		_ = json.NewDecoder(r.Body).Decode(&payload)
+		w.WriteHeader(http.StatusOK)
+	}))
+	defer srv.Close()
+
+	ch := sqlcdb.NotificationChannel{
+		Kind:     "gotify",
+		Endpoint: srv.URL,
+		Token:    sql.NullString{String: "apptoken", Valid: true},
+	}
+	if err := deliverPush(context.Background(), ch, "backup", "Backup done", "db backup ok"); err != nil {
+		t.Fatalf("deliverPush: %v", err)
+	}
+	if gotPath != "/message" || gotToken != "apptoken" {
+		t.Fatalf("path=%q token=%q", gotPath, gotToken)
+	}
+	if payload["title"] != "Backup done" || payload["message"] != "db backup ok" {
+		t.Fatalf("payload = %v", payload)
+	}
+}
+
+func TestDeliverPushFailure(t *testing.T) {
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.WriteHeader(http.StatusInternalServerError)
+	}))
+	defer srv.Close()
+
+	ch := sqlcdb.NotificationChannel{Kind: "ntfy", Endpoint: srv.URL}
+	if err := deliverPush(context.Background(), ch, "k", "t", "b"); err == nil {
+		t.Fatal("expected error on 500")
+	}
+}

app/backend/internal/api/notifications.go

@@ -41,6 +41,7 @@ func insertUserNotification(db *database.DB, userID, kind, title, body, resource
 		ResourceID:   sql.NullString{String: resourceID, Valid: resourceID != ""},
 		CreatedAt:    sql.NullTime{Time: time.Now(), Valid: true},
 	})
+	go fanoutUserPush(db, userID, kind, title, body)
 }
 
 func mapNotification(row sqlcdb.Notification) NotificationItem {

app/backend/internal/api/routes.go

@@ -286,6 +286,7 @@ func SetupRoutes(router *gin.Engine, db *database.DB, redis *database.Redis, cfg
 			public.POST("/auth/register", handleRegister)
 			public.GET("/maintenance", handleMaintenancePage)
 			public.GET("/branding", handleGetBranding)
+			public.GET("/setup/status", handleSetupStatus)
 
 			// Invite accept flow — validates the link, then registers
 			// even while public signup is closed.
@@ -307,6 +308,7 @@ func SetupRoutes(router *gin.Engine, db *database.DB, redis *database.Redis, cfg
 			read.GET("/projects", handleGetProjects)
 			read.GET("/projects/:id", handleGetProject)
 			read.GET("/projects/:id/services", handleGetServices)
+			read.GET("/projects/:id/environments", handleListEnvironments)
 			read.GET("/projects/:id/preview-environments", handleGetPreviewEnvironments)
 			read.GET("/projects/:id/security/history", securityHandler.GetProjectSecurityHistory)
 			read.GET("/projects/:id/vulnerabilities", securityHandler.GetVulnerabilities)
@@ -354,6 +356,7 @@ func SetupRoutes(router *gin.Engine, db *database.DB, redis *database.Redis, cfg
 		{
 			authed.GET("/user/profile", handleGetProfile)
 			authed.PUT("/user/profile", handleUpdateProfile)
+			authed.POST("/setup/complete", handleSetupComplete)
 
 			// Personal access tokens for CLI/MCP/agent auth.
 			authed.GET("/user/tokens", handleListUserTokens)
@@ -363,6 +366,10 @@ func SetupRoutes(router *gin.Engine, db *database.DB, redis *database.Redis, cfg
 			authed.GET("/notifications", handleListNotifications)
 			authed.POST("/notifications/:id/read", handleMarkNotificationRead)
 			authed.POST("/notifications/read-all", handleMarkAllNotificationsRead)
+			authed.GET("/notifications/channels", handleListNotificationChannels)
+			authed.POST("/notifications/channels", handleCreateNotificationChannel)
+			authed.POST("/notifications/channels/:id/test", handleTestNotificationChannel)
+			authed.DELETE("/notifications/channels/:id", handleDeleteNotificationChannel)
 
 			// WebSocket endpoint
 			authed.GET("/ws", handleWebSocket)
@@ -476,6 +483,8 @@ func SetupRoutes(router *gin.Engine, db *database.DB, redis *database.Redis, cfg
 			authed.POST("/databases/:id/backups/import", databaseHandler.ImportBackup)
 			authed.GET("/databases/:id/backups/:bid/download", databaseHandler.DownloadBackup)
 
+			authed.POST("/projects/:id/environments", handleCreateEnvironment)
+			authed.DELETE("/environments/:id", handleDeleteEnvironment)
 			authed.POST("/projects/:id/preview-environments", handleCreatePreviewEnvironment)
 			authed.PUT("/preview-environments/:id", handleUpdatePreviewEnvironment)
 			authed.DELETE("/preview-environments/:id", handleDeletePreviewEnvironment)

app/backend/internal/api/setup.go

@@ -0,0 +1,78 @@
+package api
+
+// First-run setup wizard state. GET /setup/status is public so the web
+// shell can redirect fresh installs before a session exists; the flag
+// lives in app_settings so it survives restarts.
+
+import (
+	"net/http"
+	"strings"
+
+	"containr/internal/database"
+
+	"github.com/gin-gonic/gin"
+)
+
+const settingSetupCompleted = "setup_completed"
+
+// setupComplete resolves the flag. Installs that predate the wizard
+// (users + projects already exist) auto-complete — nobody who has been
+// running Containr for months should get a welcome screen.
+func setupComplete(db *database.DB, hasUsers bool) bool {
+	if strings.EqualFold(settingValue(db, settingSetupCompleted, "", ""), "true") {
+		return true
+	}
+	if !hasUsers {
+		return false
+	}
+	var projects int
+	if err := db.QueryRow(`SELECT COUNT(*) FROM projects`).Scan(&projects); err == nil && projects > 0 {
+		return true
+	}
+	return false
+}
+
+// GET /api/v1/setup/status — public: fresh installs hit it before any
+// session exists.
+func handleSetupStatus(c *gin.Context) {
+	db, ok := c.MustGet("db").(*database.DB)
+	if !ok {
+		respondError(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Database connection not available")
+		return
+	}
+	count, err := countLocalUsers(db)
+	if err != nil {
+		respondError(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to inspect setup state")
+		return
+	}
+	hasUsers := count > 0
+	completed := setupComplete(db, hasUsers)
+	tunnelToken, _ := resolvedTunnelToken(db)
+	c.JSON(http.StatusOK, gin.H{
+		"has_users":       hasUsers,
+		"setup_completed": completed,
+		"needs_setup":     !completed,
+		"has_github_app":  githubAppConfigured(db),
+		"has_tunnel":      tunnelToken != "",
+		"signup_enabled":  signupEnabled(db),
+	})
+}
+
+// POST /api/v1/setup/complete — marks the wizard done. Open to any
+// authenticated user: the first account is the owner, and the flag only
+// suppresses a banner.
+func handleSetupComplete(c *gin.Context) {
+	if _, ok := requireAuthenticatedUserID(c); !ok {
+		return
+	}
+	db, ok := c.MustGet("db").(*database.DB)
+	if !ok {
+		respondError(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Database connection not available")
+		return
+	}
+	if err := setSetting(db, settingSetupCompleted, "true", false); err != nil {
+		respondError(c, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to save setup state")
+		return
+	}
+	c.JSON(http.StatusOK, gin.H{"message": "Setup completed"})
+}

app/backend/internal/api/webhooks_test.go

@@ -31,3 +31,33 @@ func TestWebhookEventMatches(t *testing.T) {
 		}
 	}
 }
+
+func TestValidWebhookURL(t *testing.T) {
+	cases := []struct {
+		name    string
+		url     string
+		wantErr bool
+	}{
+		{"https", "https://hooks.example.com/wh/abc", false},
+		{"http", "http://internal.lan:8080/notify", false},
+		{"whitespace trimmed", "  https://example.com/hook  ", false},
+		{"with query", "https://example.com/hook?token=x", false},
+		{"ftp rejected", "ftp://files.example.com/x", true},
+		{"no scheme", "example.com/hook", true},
+		{"bare scheme", "https://", true},
+		{"empty", "", true},
+		{"javascript rejected", "javascript:alert(1)", true},
+		{"host empty", "http:///path-only", true},
+	}
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			err := validWebhookURL(tc.url)
+			if tc.wantErr && err == nil {
+				t.Errorf("validWebhookURL(%q) = nil, want error", tc.url)
+			}
+			if !tc.wantErr && err != nil {
+				t.Errorf("validWebhookURL(%q) = %v, want nil", tc.url, err)
+			}
+		})
+	}
+}

app/backend/internal/cli/commands/environments.go

@@ -0,0 +1,97 @@
+package commands
+
+import (
+	"fmt"
+
+	"github.com/spf13/cobra"
+)
+
+// EnvironmentsCmd manages a project's environment lanes
+// (production/development/preview are seeded; custom names allowed).
+var EnvironmentsCmd = &cobra.Command{
+	Use:     "environments",
+	Aliases: []string{"env", "envs"},
+	Short:   "Manage project environments",
+}
+
+var envListCmd = &cobra.Command{
+	Use:   "list",
+	Short: "List environments in a project",
+	RunE: func(cmd *cobra.Command, args []string) error {
+		c, err := client()
+		if err != nil {
+			return err
+		}
+		project, _ := cmd.Flags().GetString("project")
+		if project == "" {
+			return fmt.Errorf("--project is required")
+		}
+		data, err := c.Do("GET", "/projects/"+project+"/environments", nil)
+		if err != nil {
+			return err
+		}
+		items, err := unwrapList(data, "environments")
+		if err != nil {
+			return err
+		}
+		rows := make([][]string, 0, len(items))
+		for _, e := range items {
+			rows = append(rows, []string{
+				str(e, "id"), str(e, "name"), str(e, "service_count"), relTime(e, "created_at"),
+			})
+		}
+		printRows(data, []string{"ID", "NAME", "SERVICES", "CREATED"}, rows)
+		return nil
+	},
+}
+
+var envCreateCmd = &cobra.Command{
+	Use:   "create <name>",
+	Short: "Create an environment in a project",
+	Args:  cobra.ExactArgs(1),
+	RunE: func(cmd *cobra.Command, args []string) error {
+		c, err := client()
+		if err != nil {
+			return err
+		}
+		project, _ := cmd.Flags().GetString("project")
+		if project == "" {
+			return fmt.Errorf("--project is required")
+		}
+		data, err := c.Do("POST", "/projects/"+project+"/environments", map[string]interface{}{
+			"name": args[0],
+		})
+		if err != nil {
+			return err
+		}
+		PrintRaw(data)
+		return nil
+	},
+}
+
+var envDeleteCmd = &cobra.Command{
+	Use:   "delete <id>",
+	Short: "Delete an empty environment",
+	Args:  cobra.ExactArgs(1),
+	RunE: func(cmd *cobra.Command, args []string) error {
+		if !Confirm("Delete environment " + args[0] + "?") {
+			return &APIError{Message: "aborted (pass --yes to skip confirmation)", ExitCode: ExitError}
+		}
+		c, err := client()
+		if err != nil {
+			return err
+		}
+		_, err = c.Do("DELETE", "/environments/"+args[0], nil)
+		if err != nil {
+			return err
+		}
+		fmt.Println("Environment deleted")
+		return nil
+	},
+}
+
+func init() {
+	envListCmd.Flags().String("project", "", "project ID (required)")
+	envCreateCmd.Flags().String("project", "", "project ID (required)")
+	EnvironmentsCmd.AddCommand(envListCmd, envCreateCmd, envDeleteCmd)
+}

app/backend/internal/cli/commands/notifications.go

@@ -1,6 +1,8 @@
 package commands
 
 import (
+	"fmt"
+
 	"github.com/spf13/cobra"
 )
 
@@ -60,6 +62,104 @@ var notifReadCmd = &cobra.Command{
 	},
 }
 
+var notifChannelsCmd = &cobra.Command{
+	Use:   "channels",
+	Short: "Manage push notification channels (ntfy/Gotify)",
+}
+
+var notifChannelsListCmd = &cobra.Command{
+	Use:   "list",
+	Short: "List push channels",
+	RunE: func(cmd *cobra.Command, args []string) error {
+		c, err := client()
+		if err != nil {
+			return err
+		}
+		data, err := c.Do("GET", "/notifications/channels", nil)
+		if err != nil {
+			return err
+		}
+		items, err := unwrapList(data, "channels")
+		if err != nil {
+			return err
+		}
+		rows := make([][]string, 0, len(items))
+		for _, n := range items {
+			rows = append(rows, []string{
+				str(n, "id"), str(n, "kind"), str(n, "endpoint"), str(n, "enabled"), relTime(n, "created_at"),
+			})
+		}
+		printRows(data, []string{"ID", "KIND", "ENDPOINT", "ENABLED", "AGE"}, rows)
+		return nil
+	},
+}
+
+var notifChannelsAddCmd = &cobra.Command{
+	Use:   "add <ntfy|gotify> <endpoint>",
+	Short: "Add a push channel (endpoint includes topic for ntfy)",
+	Args:  cobra.ExactArgs(2),
+	RunE: func(cmd *cobra.Command, args []string) error {
+		c, err := client()
+		if err != nil {
+			return err
+		}
+		token, _ := cmd.Flags().GetString("token")
+		data, err := c.Do("POST", "/notifications/channels", map[string]interface{}{
+			"kind":     args[0],
+			"endpoint": args[1],
+			"token":    token,
+		})
+		if err != nil {
+			return err
+		}
+		PrintRaw(data)
+		return nil
+	},
+}
+
+var notifChannelsTestCmd = &cobra.Command{
+	Use:   "test <id>",
+	Short: "Send a test notification through a channel",
+	Args:  cobra.ExactArgs(1),
+	RunE: func(cmd *cobra.Command, args []string) error {
+		c, err := client()
+		if err != nil {
+			return err
+		}
+		data, err := c.Do("POST", "/notifications/channels/"+args[0]+"/test", map[string]interface{}{})
+		if err != nil {
+			return err
+		}
+		PrintRaw(data)
+		return nil
+	},
+}
+
+var notifChannelsRemoveCmd = &cobra.Command{
+	Use:   "remove <id>",
+	Short: "Remove a push channel",
+	Args:  cobra.ExactArgs(1),
+	RunE: func(cmd *cobra.Command, args []string) error {
+		yes, _ := cmd.Flags().GetBool("yes")
+		if !yes && !Confirm(fmt.Sprintf("Remove channel %s?", args[0])) {
+			return nil
+		}
+		c, err := client()
+		if err != nil {
+			return err
+		}
+		data, err := c.Do("DELETE", "/notifications/channels/"+args[0], nil)
+		if err != nil {
+			return err
+		}
+		PrintRaw(data)
+		return nil
+	},
+}
+
 func init() {
-	NotificationsCmd.AddCommand(notifListCmd, notifReadCmd)
+	notifChannelsAddCmd.Flags().String("token", "", "Auth token (ntfy access token or Gotify app token)")
+	notifChannelsRemoveCmd.Flags().Bool("yes", false, "Skip confirmation")
+	notifChannelsCmd.AddCommand(notifChannelsListCmd, notifChannelsAddCmd, notifChannelsTestCmd, notifChannelsRemoveCmd)
+	NotificationsCmd.AddCommand(notifListCmd, notifReadCmd, notifChannelsCmd)
 }

app/backend/internal/cli/root.go

@@ -95,6 +95,7 @@ func init() {
 	rootCmd.AddCommand(commands.InvitesCmd)
 	rootCmd.AddCommand(commands.UpCmd)
 	rootCmd.AddCommand(commands.MigrateCmd)
+	rootCmd.AddCommand(commands.EnvironmentsCmd)
 }
 
 func initConfig() {

app/backend/internal/database/sqlcdb/models.go

@@ -193,6 +193,17 @@ type Notification struct {
 	CreatedAt    sql.NullTime   `json:"created_at"`
 }
 
+type NotificationChannel struct {
+	ID        uuid.UUID      `json:"id"`
+	UserID    uuid.UUID      `json:"user_id"`
+	Kind      string         `json:"kind"`
+	Endpoint  string         `json:"endpoint"`
+	Token     sql.NullString `json:"token"`
+	Enabled   bool           `json:"enabled"`
+	CreatedAt sql.NullTime   `json:"created_at"`
+	UpdatedAt sql.NullTime   `json:"updated_at"`
+}
+
 type OutboundWebhook struct {
 	ID        uuid.UUID             `json:"id"`
 	UserID    uuid.UUID             `json:"user_id"`

app/backend/internal/database/sqlcdb/notifications.sql.go

@@ -53,6 +53,135 @@ func (q *Queries) CreateNotification(ctx context.Context, arg CreateNotification
 	return err
 }
 
+const deleteNotificationChannel = `-- name: DeleteNotificationChannel :execrows
+DELETE FROM notification_channels WHERE id = $1 AND user_id = $2
+`
+
+type DeleteNotificationChannelParams struct {
+	ID     uuid.UUID `json:"id"`
+	UserID uuid.UUID `json:"user_id"`
+}
+
+func (q *Queries) DeleteNotificationChannel(ctx context.Context, arg DeleteNotificationChannelParams) (int64, error) {
+	result, err := q.db.ExecContext(ctx, deleteNotificationChannel, arg.ID, arg.UserID)
+	if err != nil {
+		return 0, err
+	}
+	return result.RowsAffected()
+}
+
+const insertNotificationChannel = `-- name: InsertNotificationChannel :one
+INSERT INTO notification_channels (user_id, kind, endpoint, token)
+VALUES ($1, $2, $3, $4)
+RETURNING id, user_id, kind, endpoint, token, enabled, created_at, updated_at
+`
+
+type InsertNotificationChannelParams struct {
+	UserID   uuid.UUID      `json:"user_id"`
+	Kind     string         `json:"kind"`
+	Endpoint string         `json:"endpoint"`
+	Token    sql.NullString `json:"token"`
+}
+
+func (q *Queries) InsertNotificationChannel(ctx context.Context, arg InsertNotificationChannelParams) (NotificationChannel, error) {
+	row := q.db.QueryRowContext(ctx, insertNotificationChannel,
+		arg.UserID,
+		arg.Kind,
+		arg.Endpoint,
+		arg.Token,
+	)
+	var i NotificationChannel
+	err := row.Scan(
+		&i.ID,
+		&i.UserID,
+		&i.Kind,
+		&i.Endpoint,
+		&i.Token,
+		&i.Enabled,
+		&i.CreatedAt,
+		&i.UpdatedAt,
+	)
+	return i, err
+}
+
+const listAllNotificationChannelsByUser = `-- name: ListAllNotificationChannelsByUser :many
+SELECT id, user_id, kind, endpoint, token, enabled, created_at, updated_at
+FROM notification_channels
+WHERE user_id = $1
+ORDER BY created_at
+`
+
+func (q *Queries) ListAllNotificationChannelsByUser(ctx context.Context, userID uuid.UUID) ([]NotificationChannel, error) {
+	rows, err := q.db.QueryContext(ctx, listAllNotificationChannelsByUser, userID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	items := []NotificationChannel{}
+	for rows.Next() {
+		var i NotificationChannel
+		if err := rows.Scan(
+			&i.ID,
+			&i.UserID,
+			&i.Kind,
+			&i.Endpoint,
+			&i.Token,
+			&i.Enabled,
+			&i.CreatedAt,
+			&i.UpdatedAt,
+		); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Close(); err != nil {
+		return nil, err
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
+const listNotificationChannelsByUser = `-- name: ListNotificationChannelsByUser :many
+SELECT id, user_id, kind, endpoint, token, enabled, created_at, updated_at
+FROM notification_channels
+WHERE user_id = $1 AND enabled
+ORDER BY created_at
+`
+
+func (q *Queries) ListNotificationChannelsByUser(ctx context.Context, userID uuid.UUID) ([]NotificationChannel, error) {
+	rows, err := q.db.QueryContext(ctx, listNotificationChannelsByUser, userID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	items := []NotificationChannel{}
+	for rows.Next() {
+		var i NotificationChannel
+		if err := rows.Scan(
+			&i.ID,
+			&i.UserID,
+			&i.Kind,
+			&i.Endpoint,
+			&i.Token,
+			&i.Enabled,
+			&i.CreatedAt,
+			&i.UpdatedAt,
+		); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Close(); err != nil {
+		return nil, err
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
 const listNotificationsByUser = `-- name: ListNotificationsByUser :many
 SELECT id, user_id, kind, title, body, resource_type, resource_id, read_at, created_at
 FROM notifications

app/backend/internal/database/sqlcdb/projects.sql.go

@@ -12,6 +12,17 @@ import (
 	"github.com/google/uuid"
 )
 
+const countEnvironmentServices = `-- name: CountEnvironmentServices :one
+SELECT COUNT(*) FROM services WHERE environment_id = $1
+`
+
+func (q *Queries) CountEnvironmentServices(ctx context.Context, environmentID uuid.UUID) (int64, error) {
+	row := q.db.QueryRowContext(ctx, countEnvironmentServices, environmentID)
+	var count int64
+	err := row.Scan(&count)
+	return count, err
+}
+
 const countProjectsByUser = `-- name: CountProjectsByUser :one
 SELECT COUNT(*)::bigint AS total
 FROM projects p
@@ -86,6 +97,20 @@ func (q *Queries) DeleteProjectByID(ctx context.Context, projectID uuid.UUID) (i
 	return result.RowsAffected()
 }
 
+const deleteProjectEnvironment = `-- name: DeleteProjectEnvironment :exec
+DELETE FROM environments WHERE id = $1 AND project_id = $2
+`
+
+type DeleteProjectEnvironmentParams struct {
+	ID        uuid.UUID `json:"id"`
+	ProjectID uuid.UUID `json:"project_id"`
+}
+
+func (q *Queries) DeleteProjectEnvironment(ctx context.Context, arg DeleteProjectEnvironmentParams) error {
+	_, err := q.db.ExecContext(ctx, deleteProjectEnvironment, arg.ID, arg.ProjectID)
+	return err
+}
+
 const getProjectByIDForUser = `-- name: GetProjectByIDForUser :one
 SELECT p.id, p.name, p.description, p.owner_id, p.is_approved, p.created_at, p.updated_at
 FROM projects p
@@ -123,6 +148,30 @@ func (q *Queries) GetProjectByIDForUser(ctx context.Context, arg GetProjectByIDF
 	return i, err
 }
 
+const getProjectEnvironmentByName = `-- name: GetProjectEnvironmentByName :one
+SELECT id, name, project_id, created_at, updated_at
+FROM environments
+WHERE project_id = $1 AND name = $2
+`
+
+type GetProjectEnvironmentByNameParams struct {
+	ProjectID uuid.UUID `json:"project_id"`
+	Name      string    `json:"name"`
+}
+
+func (q *Queries) GetProjectEnvironmentByName(ctx context.Context, arg GetProjectEnvironmentByNameParams) (Environment, error) {
+	row := q.db.QueryRowContext(ctx, getProjectEnvironmentByName, arg.ProjectID, arg.Name)
+	var i Environment
+	err := row.Scan(
+		&i.ID,
+		&i.Name,
+		&i.ProjectID,
+		&i.CreatedAt,
+		&i.UpdatedAt,
+	)
+	return i, err
+}
+
 const getProjectOwnerByID = `-- name: GetProjectOwnerByID :one
 SELECT owner_id
 FROM projects
@@ -212,6 +261,53 @@ func (q *Queries) ListPendingProjects(ctx context.Context) ([]Project, error) {
 	return items, nil
 }
 
+const listProjectEnvironments = `-- name: ListProjectEnvironments :many
+SELECT e.id, e.name, e.project_id, e.created_at, e.updated_at,
+       (SELECT COUNT(*) FROM services s WHERE s.environment_id = e.id) AS service_count
+FROM environments e
+WHERE e.project_id = $1
+ORDER BY e.created_at
+`
+
+type ListProjectEnvironmentsRow struct {
+	ID           uuid.UUID    `json:"id"`
+	Name         string       `json:"name"`
+	ProjectID    uuid.UUID    `json:"project_id"`
+	CreatedAt    sql.NullTime `json:"created_at"`
+	UpdatedAt    sql.NullTime `json:"updated_at"`
+	ServiceCount int64        `json:"service_count"`
+}
+
+func (q *Queries) ListProjectEnvironments(ctx context.Context, projectID uuid.UUID) ([]ListProjectEnvironmentsRow, error) {
+	rows, err := q.db.QueryContext(ctx, listProjectEnvironments, projectID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	items := []ListProjectEnvironmentsRow{}
+	for rows.Next() {
+		var i ListProjectEnvironmentsRow
+		if err := rows.Scan(
+			&i.ID,
+			&i.Name,
+			&i.ProjectID,
+			&i.CreatedAt,
+			&i.UpdatedAt,
+			&i.ServiceCount,
+		); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Close(); err != nil {
+		return nil, err
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
 const listProjectsWithStatsByUser = `-- name: ListProjectsWithStatsByUser :many
 
 SELECT

app/backend/internal/database/sqlcdb/querier.go

@@ -17,6 +17,7 @@ type Querier interface {
 	CompleteCommand(ctx context.Context, arg CompleteCommandParams) (AgentCommand, error)
 	CountDatabaseServicesByUserAndName(ctx context.Context, arg CountDatabaseServicesByUserAndNameParams) (int64, error)
 	CountDatabasesUsingBackupTarget(ctx context.Context, targetID sql.NullString) (int64, error)
+	CountEnvironmentServices(ctx context.Context, environmentID uuid.UUID) (int64, error)
 	CountProjectsByUser(ctx context.Context, arg CountProjectsByUserParams) (int64, error)
 	CountServicesByProjectAndName(ctx context.Context, arg CountServicesByProjectAndNameParams) (int64, error)
 	CountUnreadNotificationsByUser(ctx context.Context, userID uuid.UUID) (int64, error)
@@ -43,8 +44,10 @@ type Querier interface {
 	DeleteBanner(ctx context.Context, id uuid.UUID) error
 	DeleteDatabaseServiceByID(ctx context.Context, id string) error
 	DeleteDatabaseServiceByIDAndUser(ctx context.Context, arg DeleteDatabaseServiceByIDAndUserParams) error
+	DeleteNotificationChannel(ctx context.Context, arg DeleteNotificationChannelParams) (int64, error)
 	DeleteOutboundWebhookByIDAndUser(ctx context.Context, arg DeleteOutboundWebhookByIDAndUserParams) error
 	DeleteProjectByID(ctx context.Context, projectID uuid.UUID) (int64, error)
+	DeleteProjectEnvironment(ctx context.Context, arg DeleteProjectEnvironmentParams) error
 	DeleteServiceContainersOnAgent(ctx context.Context, arg DeleteServiceContainersOnAgentParams) error
 	DeleteUserInvite(ctx context.Context, id uuid.UUID) error
 	DeleteUserTemplate(ctx context.Context, arg DeleteUserTemplateParams) (int64, error)
@@ -65,6 +68,7 @@ type Querier interface {
 	GetOutboundWebhookByID(ctx context.Context, id uuid.UUID) (OutboundWebhook, error)
 	GetOutboundWebhookByIDAndUser(ctx context.Context, arg GetOutboundWebhookByIDAndUserParams) (OutboundWebhook, error)
 	GetProjectByIDForUser(ctx context.Context, arg GetProjectByIDForUserParams) (Project, error)
+	GetProjectEnvironmentByName(ctx context.Context, arg GetProjectEnvironmentByNameParams) (Environment, error)
 	GetProjectOwnerByID(ctx context.Context, projectID uuid.UUID) (uuid.UUID, error)
 	GetProjectOwnerID(ctx context.Context, id uuid.UUID) (uuid.UUID, error)
 	GetProjectRoleForUser(ctx context.Context, arg GetProjectRoleForUserParams) (string, error)
@@ -72,12 +76,14 @@ type Querier interface {
 	GetUserInviteByTokenHash(ctx context.Context, tokenHash string) (UserInvite, error)
 	GetUserTokenByHash(ctx context.Context, tokenHash string) (UserToken, error)
 	InsertAgentHeartbeat(ctx context.Context, arg InsertAgentHeartbeatParams) error
+	InsertNotificationChannel(ctx context.Context, arg InsertNotificationChannelParams) (NotificationChannel, error)
 	InsertProjectEnvironment(ctx context.Context, arg InsertProjectEnvironmentParams) error
 	ListActiveBanners(ctx context.Context) ([]Banner, error)
 	ListAgentAuthTokens(ctx context.Context) ([]AgentAuthToken, error)
 	ListAgentHeartbeatsSince(ctx context.Context, arg ListAgentHeartbeatsSinceParams) ([]AgentHeartbeat, error)
 	ListAgents(ctx context.Context) ([]NodeAgent, error)
 	ListAllDatabaseServices(ctx context.Context) ([]DatabaseService, error)
+	ListAllNotificationChannelsByUser(ctx context.Context, userID uuid.UUID) ([]NotificationChannel, error)
 	ListBackupTargetsByUser(ctx context.Context, userID string) ([]BackupTarget, error)
 	ListBanners(ctx context.Context) ([]Banner, error)
 	ListCommandsForAgent(ctx context.Context, nodeAgentID string) ([]AgentCommand, error)
@@ -87,10 +93,12 @@ type Querier interface {
 	ListDatabaseServicesByUser(ctx context.Context, userID string) ([]DatabaseService, error)
 	ListDueDatabaseBackups(ctx context.Context) ([]ListDueDatabaseBackupsRow, error)
 	ListEnabledOutboundWebhooks(ctx context.Context) ([]OutboundWebhook, error)
+	ListNotificationChannelsByUser(ctx context.Context, userID uuid.UUID) ([]NotificationChannel, error)
 	ListNotificationsByUser(ctx context.Context, arg ListNotificationsByUserParams) ([]Notification, error)
 	ListOutboundWebhooksByUser(ctx context.Context, userID uuid.UUID) ([]OutboundWebhook, error)
 	ListPendingCommands(ctx context.Context, nodeAgentID string) ([]AgentCommand, error)
 	ListPendingProjects(ctx context.Context) ([]Project, error)
+	ListProjectEnvironments(ctx context.Context, projectID uuid.UUID) ([]ListProjectEnvironmentsRow, error)
 	// Visibility model: a project is readable when it is approved for public
 	// display, when the caller owns or is a member of it, or when the caller is a
 	// platform admin. Anonymous callers pass user_id = uuid.Nil, is_admin = false.

app/backend/internal/mcpserver/server.go

@@ -50,6 +50,11 @@ func init() {
 	register(spec{"containr_projects_create", "Create a project. Args: name (required), description.", "POST", "/projects", nil, []string{"name", "description"}, false})
 	register(spec{"containr_projects_delete", "Delete a project and all its services. Requires confirm:true.", "DELETE", "/projects/{id}", []string{"id"}, nil, true})
 
+	// Environments
+	register(spec{"containr_environments_list", "List environments in a project with service counts", "GET", "/projects/{id}/environments", []string{"id"}, nil, false})
+	register(spec{"containr_environments_create", "Create an environment. Args: name (required — lowercase alphanumeric with dashes, 1-50 chars).", "POST", "/projects/{id}/environments", []string{"id"}, []string{"name"}, false})
+	register(spec{"containr_environments_delete", "Delete an empty environment. Requires confirm:true.", "DELETE", "/environments/{id}", []string{"id"}, nil, true})
+
 	// Services
 	register(spec{"containr_services_list", "List services in a project", "GET", "/projects/{project_id}/services", []string{"project_id"}, nil, false})
 	register(spec{"containr_services_get", "Get a service by id", "GET", "/services/{id}", []string{"id"}, nil, false})
@@ -140,6 +145,10 @@ func init() {
 	// Notifications
 	register(spec{"containr_notifications_list", "List notifications", "GET", "/notifications", nil, nil, false})
 	register(spec{"containr_notifications_read", "Mark a notification read, or all notifications with id=all", "POST", "/notifications/{id}/read", []string{"id"}, nil, false})
+	register(spec{"containr_notification_channels_list", "List push notification channels (ntfy/Gotify)", "GET", "/notifications/channels", nil, nil, false})
+	register(spec{"containr_notification_channels_create", "Add a push notification channel. Args: kind (ntfy|gotify), endpoint (full URL incl. ntfy topic or Gotify base), token (ntfy access token or Gotify app token).", "POST", "/notifications/channels", nil, []string{"kind", "endpoint", "token"}, false})
+	register(spec{"containr_notification_channels_test", "Send a test notification through a push channel. Args: id.", "POST", "/notifications/channels/{id}/test", []string{"id"}, nil, false})
+	register(spec{"containr_notification_channels_delete", "Delete a push notification channel. Args: id. Requires confirm=true.", "DELETE", "/notifications/channels/{id}", []string{"id"}, nil, true})
 
 	register(spec{"containr_webhooks_list", "List outbound webhooks", "GET", "/webhooks", nil, nil, false})
 	register(spec{"containr_webhooks_create", "Create an outbound webhook. Args: name, url, events (list, e.g. [\"service.*\",\"*\"]), secret (auto-generated if omitted), headers, enabled.", "POST", "/webhooks", nil, []string{"name", "url", "events", "secret", "headers", "enabled"}, false})

app/backend/migrations_goose/20261116000000_notification_channels.sql

@@ -0,0 +1,16 @@
+-- +goose Up
+CREATE TABLE IF NOT EXISTS public.notification_channels (
+    id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+    user_id uuid NOT NULL REFERENCES public.users(id) ON DELETE CASCADE,
+    kind varchar(20) NOT NULL CHECK (kind IN ('ntfy', 'gotify')),
+    endpoint text NOT NULL,
+    token varchar(255),
+    enabled boolean NOT NULL DEFAULT true,
+    created_at timestamptz DEFAULT now(),
+    updated_at timestamptz DEFAULT now()
+);
+
+CREATE INDEX IF NOT EXISTS idx_notification_channels_user ON public.notification_channels (user_id);
+
+-- +goose Down
+DROP TABLE IF EXISTS public.notification_channels;

app/backend/sqlc/queries/notifications.sql

@@ -17,3 +17,23 @@ UPDATE notifications SET read_at = $3 WHERE id = $1 AND user_id = $2 AND read_at
 
 -- name: MarkAllNotificationsReadByUser :exec
 UPDATE notifications SET read_at = $2 WHERE user_id = $1 AND read_at IS NULL;
+
+-- name: ListNotificationChannelsByUser :many
+SELECT id, user_id, kind, endpoint, token, enabled, created_at, updated_at
+FROM notification_channels
+WHERE user_id = $1 AND enabled
+ORDER BY created_at;
+
+-- name: ListAllNotificationChannelsByUser :many
+SELECT id, user_id, kind, endpoint, token, enabled, created_at, updated_at
+FROM notification_channels
+WHERE user_id = $1
+ORDER BY created_at;
+
+-- name: InsertNotificationChannel :one
+INSERT INTO notification_channels (user_id, kind, endpoint, token)
+VALUES ($1, $2, $3, $4)
+RETURNING id, user_id, kind, endpoint, token, enabled, created_at, updated_at;
+
+-- name: DeleteNotificationChannel :execrows
+DELETE FROM notification_channels WHERE id = $1 AND user_id = $2;

app/backend/sqlc/queries/projects.sql

@@ -125,3 +125,21 @@ SELECT p.id, p.name, p.description, p.owner_id, p.is_approved, p.created_at, p.u
 FROM projects p
 WHERE p.is_approved = false
 ORDER BY p.created_at DESC;
+
+-- name: ListProjectEnvironments :many
+SELECT e.id, e.name, e.project_id, e.created_at, e.updated_at,
+       (SELECT COUNT(*) FROM services s WHERE s.environment_id = e.id) AS service_count
+FROM environments e
+WHERE e.project_id = $1
+ORDER BY e.created_at;
+
+-- name: GetProjectEnvironmentByName :one
+SELECT id, name, project_id, created_at, updated_at
+FROM environments
+WHERE project_id = $1 AND name = $2;
+
+-- name: DeleteProjectEnvironment :exec
+DELETE FROM environments WHERE id = $1 AND project_id = $2;
+
+-- name: CountEnvironmentServices :one
+SELECT COUNT(*) FROM services WHERE environment_id = $1;

app/backend/sqlc/schema.sql

@@ -335,3 +335,14 @@ CREATE TABLE user_invites (
     used_at TIMESTAMP WITH TIME ZONE,
     created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
 );
+
+CREATE TABLE notification_channels (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    kind VARCHAR(20) NOT NULL CHECK (kind IN ('ntfy', 'gotify')),
+    endpoint TEXT NOT NULL,
+    token VARCHAR(255),
+    enabled BOOLEAN NOT NULL DEFAULT TRUE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);

app/frontend/package-lock.json

@@ -31,7 +31,9 @@
         "@tabler/icons-react": "^3.37.1",
         "@tailwindcss/postcss": "^4.1.18",
         "@tailwindcss/typography": "^0.5.19",
+        "@tanstack/query-sync-storage-persister": "^5.104.1",
         "@tanstack/react-query": "^5.66.0",
+        "@tanstack/react-query-persist-client": "^5.104.1",
         "@types/dompurify": "^3.0.5",
         "@xterm/addon-fit": "^0.11.0",
         "@xterm/xterm": "^6.0.0",
@@ -3441,22 +3443,49 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.90.20",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
-      "integrity": "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==",
+      "version": "5.104.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.104.1.tgz",
+      "integrity": "sha512-TiRghcrGkUTE+M4JBxvpPSpBhxvIzQairw+cksrHYGr+2uwC77yW1SY9nYxnYRYOppvucf8rEg6b5byoz4rTpw==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
-    "node_modules/@tanstack/react-query": {
-      "version": "5.90.21",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.21.tgz",
-      "integrity": "sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg==",
+    "node_modules/@tanstack/query-persist-client-core": {
+      "version": "5.104.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.104.1.tgz",
+      "integrity": "sha512-ONiadXqe56iNrw6RESqKILpTIVG9ZMI/DageTQnrBDt/nZ6WiP4G13iIiMwJEsiO12gQ3Gychx8tcFIPw4k25g==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.90.20"
+        "@tanstack/query-core": "5.104.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-sync-storage-persister": {
+      "version": "5.104.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-5.104.1.tgz",
+      "integrity": "sha512-eDsBMNds48+sjXILn0dQKu+uYwfh9tGIB+Rb0cKRdoxD22HHBMzJes5DJOhJVLUhBQbxtoFq+Hpha/Vohh14NQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.104.1",
+        "@tanstack/query-persist-client-core": "5.104.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.104.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.104.1.tgz",
+      "integrity": "sha512-Zz70EgjahNI7aCz8BZxM3vUGU44ycxEAzMuCUjLeA7SVhhOkg3ZgPjPJPvHjs6Rmky/dtmnu1WzjGHNHmhCoZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.104.1"
       },
       "funding": {
         "type": "github",
@@ -3466,6 +3495,23 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-query-persist-client": {
+      "version": "5.104.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.104.1.tgz",
+      "integrity": "sha512-kU3YaqjkwEUzUUfPF0JVg56d6gJKWHaFVqOlQztwc4C2IT0P5sv/23orrSoQqjxKaUe6Ejw5IIQtA/G12uNmow==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-persist-client-core": "5.104.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.104.1",
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",

app/frontend/package.json

@@ -42,7 +42,9 @@
     "@tabler/icons-react": "^3.37.1",
     "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/typography": "^0.5.19",
+    "@tanstack/query-sync-storage-persister": "^5.104.1",
     "@tanstack/react-query": "^5.66.0",
+    "@tanstack/react-query-persist-client": "^5.104.1",
     "@types/dompurify": "^3.0.5",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

app/frontend/src/app/App.tsx

@@ -28,6 +28,7 @@ import {
 } from '@/features/secondary/pages';
 import { NodeDetailPage } from '@/features/nodes/NodeDetailPage';
 import { AcceptInvitePage, SignInPage, SignUpPage } from '@/features/auth/pages';
+import { SetupWizardPage } from '@/features/setup/SetupWizardPage';
 import { useAuthSession } from '@/lib/use-auth-session';
 import { useDemoMode } from '@/lib/demo-mode';
 import { getCurrentUserProfile } from '@/lib/api-client';
@@ -138,6 +139,7 @@ export default function App() {
         <Route path="/auth/sign-in" element={<SignInPage />} />
         <Route path="/auth/sign-up" element={<SignUpPage />} />
         <Route path="/auth/accept-invite" element={<AcceptInvitePage />} />
+        <Route path="/setup" element={<SetupWizardPage />} />
 
         {/* Public browsing — approved projects, templates, docs. */}
         {/* Project workspace renders outside the shell — fullscreen canvas, no nav chrome */}

app/frontend/src/app/layout/PlatformShell.tsx

@@ -1,4 +1,4 @@
-import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { NavLink, Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -30,10 +30,13 @@ import {
   User,
   Users,
   Webhook,
+  WifiOff,
 } from 'lucide-react';
 import {
   getCurrentUserProfile,
   getUpgradeStatus,
+  pingServer,
+  getSetupStatus,
   listNotifications,
   markAllNotificationsRead,
   markNotificationRead,
@@ -105,6 +108,42 @@ function getInitialSidebar(): boolean {
   return readStorage('containr.sidebar.expanded') !== '0';
 }
 
+// ConnectivityBanner pings /health every 15s and listens for browser
+// online/offline events — when the instance is unreachable it shows a
+// slim bar so the persisted last-known data doesn't masquerade as live.
+function ConnectivityBanner() {
+  const [offline, setOffline] = useState(() => !navigator.onLine);
+  useEffect(() => {
+    const up = () => setOffline(false);
+    const down = () => setOffline(true);
+    window.addEventListener('online', up);
+    window.addEventListener('offline', down);
+    return () => {
+      window.removeEventListener('online', up);
+      window.removeEventListener('offline', down);
+    };
+  }, []);
+  const ping = useQuery({
+    queryKey: ['connectivity'],
+    queryFn: pingServer,
+    refetchInterval: 15_000,
+    retry: 0,
+    networkMode: 'always',
+    staleTime: 0,
+  });
+  if (!offline && !ping.isError) {
+    return null;
+  }
+  return (
+    <div className="flex items-center justify-center gap-2 border-b border-[var(--warning,var(--border-subtle))] bg-[var(--surface-muted)] px-4 py-1.5 text-xs text-[var(--text-secondary)]">
+      <WifiOff size={13} className="text-[var(--warning,#f59e0b)]" />
+      {offline
+        ? 'No network connection — showing last-known data.'
+        : 'Cannot reach this Containr instance — showing last-known data. Retrying…'}
+    </div>
+  );
+}
+
 export function PlatformShell() {
   const location = useLocation();
   const navigate = useNavigate();
@@ -147,6 +186,13 @@ export function PlatformShell() {
     enabled: !isDemoMode && signedIn,
     refetchInterval: 30_000,
   });
+  // Fresh installs get routed through the setup wizard until the flag lands.
+  const setupQuery = useQuery({
+    queryKey: ['setup-status'],
+    queryFn: getSetupStatus,
+    enabled: !isDemoMode && signedIn,
+    staleTime: 60_000,
+  });
   const markReadMutation = useMutation({
     mutationFn: (id: string) => markNotificationRead(id),
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['shell-notifications'] }),
@@ -209,6 +255,10 @@ export function PlatformShell() {
     </div>
   );
 
+  if (!isDemoMode && signedIn && setupQuery.data?.needs_setup) {
+    return <Navigate to="/setup" replace />;
+  }
+
   return (
     <div className="app-shell min-h-screen">
       <div className="ambient-glow" />
@@ -557,6 +607,7 @@ export function PlatformShell() {
             </nav>
           </header>
 
+          <ConnectivityBanner />
           <main className="flex-1 overflow-y-auto">
             <Outlet />
           </main>

app/frontend/src/features/secondary/pages.tsx

@@ -75,6 +75,11 @@ import {
   type CreateDatabaseInput,
   type DatabaseEntity,
   type FailoverPolicy,
+  listNotificationChannels,
+  createNotificationChannel,
+  deleteNotificationChannel,
+  testNotificationChannel,
+  type NotificationChannel,
 } from '@/lib/api-client';
 import {
   demoBuilds,
@@ -139,6 +144,8 @@ import {
   Cloud,
   ExternalLink,
   Upload,
+  Bell,
+  Send,
 } from 'lucide-react';
 
 function SecondaryPageHeader({ title, description }: { title: string; description: string }) {
@@ -1246,7 +1253,11 @@ export function GitHubAppCallbackPage() {
     mutationFn: (appCode: string) => convertGitHubAppCode(appCode),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['github-app-status'] });
-      navigate('/settings', { replace: true });
+      // The setup wizard stashes a return marker before submitting the
+      // manifest form — resume there instead of the settings page.
+      const inSetup = sessionStorage.getItem('containr.setup_return') === '1';
+      sessionStorage.removeItem('containr.setup_return');
+      navigate(inSetup ? '/setup' : '/settings', { replace: true });
     },
   });
   const firedRef = useRef(false);
@@ -1908,6 +1919,151 @@ function BackupTargetsSection() {
   );
 }
 
+function NotificationChannelsSection() {
+  const queryClient = useQueryClient();
+  const channelsQuery = useQuery({
+    queryKey: ['notification-channels'],
+    queryFn: listNotificationChannels,
+  });
+  const [kind, setKind] = useState<'ntfy' | 'gotify'>('ntfy');
+  const [endpoint, setEndpoint] = useState('');
+  const [token, setToken] = useState('');
+  const [testResult, setTestResult] = useState<Record<string, 'ok' | string>>({});
+
+  const invalidate = () => queryClient.invalidateQueries({ queryKey: ['notification-channels'] });
+  const createMutation = useMutation({
+    mutationFn: () =>
+      createNotificationChannel({
+        kind,
+        endpoint: endpoint.trim(),
+        token: token.trim() || undefined,
+      }),
+    onSuccess: () => {
+      setEndpoint('');
+      setToken('');
+      invalidate();
+    },
+  });
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteNotificationChannel(id),
+    onSuccess: invalidate,
+  });
+  const testMutation = useMutation({
+    mutationFn: (id: string) => testNotificationChannel(id),
+    onSuccess: (_d, id) => setTestResult((prev) => ({ ...prev, [id]: 'ok' })),
+    onError: (err, id) =>
+      setTestResult((prev) => ({
+        ...prev,
+        [id]: err instanceof Error ? err.message : 'delivery failed',
+      })),
+  });
+
+  const channels = channelsQuery.data ?? [];
+
+  return (
+    <section className="panel p-6">
+      <div className="flex items-center gap-3 mb-4">
+        <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
+          <Bell size={18} className="text-[var(--accent-primary)]" />
+        </div>
+        <div>
+          <h2 className="text-lg font-semibold text-[var(--text-primary)]">Push notifications</h2>
+          <p className="text-xs text-[var(--text-tertiary)]">Relay notifications to a self-hosted ntfy or Gotify server</p>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <div className="flex flex-wrap gap-2">
+          <select
+            value={kind}
+            onChange={(e) => setKind(e.target.value as 'ntfy' | 'gotify')}
+            className="h-9 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 text-sm text-[var(--text-primary)] focus:border-[var(--accent-primary)] transition-all"
+          >
+            <option value="ntfy">ntfy</option>
+            <option value="gotify">Gotify</option>
+          </select>
+          <input
+            value={endpoint}
+            onChange={(e) => setEndpoint(e.target.value)}
+            placeholder={kind === 'ntfy' ? 'https://ntfy.example.com/my-alerts' : 'https://gotify.example.com'}
+            className="h-9 flex-1 min-w-[220px] rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] transition-all"
+          />
+          <input
+            type="password"
+            value={token}
+            onChange={(e) => setToken(e.target.value)}
+            placeholder={kind === 'ntfy' ? 'Access token (optional)' : 'App token'}
+            className="h-9 w-48 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] transition-all"
+          />
+          <button
+            onClick={() => createMutation.mutate()}
+            disabled={createMutation.isPending || !endpoint.trim()}
+            className="h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+            style={{ background: 'var(--accent-primary)' }}
+          >
+            {createMutation.isPending ? 'Adding…' : 'Add channel'}
+          </button>
+        </div>
+
+        {createMutation.isError ? (
+          <p className="text-xs text-[var(--error)]">
+            {createMutation.error instanceof Error ? createMutation.error.message : 'Failed to add channel'}
+          </p>
+        ) : null}
+
+        {channelsQuery.isLoading ? (
+          <div className="py-4 text-center">
+            <Loader2 size={16} className="animate-spin mx-auto text-[var(--text-tertiary)]" />
+          </div>
+        ) : channels.length === 0 ? (
+          <p className="text-xs text-[var(--text-tertiary)]">
+            No push channels. Notifications stay in-app until you add one.
+          </p>
+        ) : (
+          <div className="space-y-1.5 border-t border-[var(--border-subtle)] pt-3">
+            {channels.map((ch: NotificationChannel) => (
+              <div key={ch.id} className="flex items-center justify-between gap-2 text-xs">
+                <div className="min-w-0">
+                  <span className="rounded px-1.5 py-0.5 bg-[var(--surface-muted)] text-[var(--text-secondary)] uppercase">
+                    {ch.kind}
+                  </span>
+                  <span className="ml-2 mono text-[var(--text-primary)] break-all">{ch.endpoint}</span>
+                  {testResult[ch.id] === 'ok' ? (
+                    <span className="ml-2 text-[var(--success)]">delivered</span>
+                  ) : testResult[ch.id] ? (
+                    <span className="ml-2 text-[var(--error)]">{testResult[ch.id]}</span>
+                  ) : null}
+                </div>
+                <div className="flex items-center gap-3 shrink-0">
+                  <button
+                    onClick={() => testMutation.mutate(ch.id)}
+                    disabled={testMutation.isPending}
+                    className="flex items-center gap-1 text-[var(--text-secondary)] hover:text-[var(--accent-primary)] disabled:opacity-50"
+                  >
+                    <Send size={12} />
+                    Test
+                  </button>
+                  <button
+                    onClick={() => {
+                      if (window.confirm(`Remove ${ch.kind} channel ${ch.endpoint}?`)) {
+                        deleteMutation.mutate(ch.id);
+                      }
+                    }}
+                    disabled={deleteMutation.isPending}
+                    className="text-[var(--error)] hover:underline disabled:opacity-50"
+                  >
+                    Remove
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
 export function SettingsPage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
@@ -2081,6 +2237,7 @@ export function SettingsPage() {
 
           {/* Personal Access Tokens */}
           <UserTokensSection isAdmin={profileQuery.data?.isAdmin ?? false} />
+          <NotificationChannelsSection />
           <RegistriesSection />
           <BackupTargetsSection />
 

app/frontend/src/features/setup/SetupWizardPage.test.tsx

@@ -0,0 +1,92 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { SetupWizardPage } from './SetupWizardPage';
+import type { SetupStatus } from '@/lib/api-client';
+
+const mockStatus = vi.fn<() => Promise<SetupStatus>>();
+const mockSession = vi.fn();
+
+vi.mock('@/lib/api-client', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('@/lib/api-client')>();
+  return {
+    ...mod,
+    getSetupStatus: () => mockStatus(),
+    completeSetup: vi.fn().mockResolvedValue(undefined),
+  };
+});
+
+vi.mock('@/lib/use-auth-session', () => ({
+  useAuthSession: () => mockSession(),
+}));
+
+function renderWizard() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/setup']}>
+        <SetupWizardPage />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+const base: SetupStatus = {
+  has_users: false,
+  setup_completed: false,
+  needs_setup: true,
+  has_github_app: false,
+  has_tunnel: false,
+  signup_enabled: false,
+};
+
+describe('SetupWizardPage', () => {
+  beforeEach(() => {
+    mockSession.mockReturnValue({ data: null });
+  });
+
+  it('prompts for the admin account on a fresh install', async () => {
+    mockStatus.mockResolvedValue({ ...base });
+    renderWizard();
+    expect(await screen.findByText(/welcome to containr/i)).toBeInTheDocument();
+    expect(screen.getByText(/create admin account/i)).toBeInTheDocument();
+  });
+
+  it('offers sign-in when users exist but nobody is signed in', async () => {
+    mockStatus.mockResolvedValue({ ...base, has_users: true });
+    renderWizard();
+    expect(await screen.findByText(/sign in to continue setup/i)).toBeInTheDocument();
+  });
+
+  it('shows the git provider step for a signed-in admin without GitHub App', async () => {
+    mockStatus.mockResolvedValue({ ...base, has_users: true });
+    mockSession.mockReturnValue({ data: { user: { id: 'u1' } } });
+    renderWizard();
+    expect(await screen.findByText(/connect a git provider/i)).toBeInTheDocument();
+    expect(screen.getByText(/set up github app/i)).toBeInTheDocument();
+  });
+
+  it('shows the tunnel step when git is already wired', async () => {
+    mockStatus.mockResolvedValue({ ...base, has_users: true, has_github_app: true });
+    mockSession.mockReturnValue({ data: { user: { id: 'u1' } } });
+    renderWizard();
+    expect(
+      await screen.findByRole('heading', { name: /public access/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('lands on the finish step when everything is configured', async () => {
+    mockStatus.mockResolvedValue({
+      ...base,
+      has_users: true,
+      has_github_app: true,
+      has_tunnel: true,
+    });
+    mockSession.mockReturnValue({ data: { user: { id: 'u1' } } });
+    renderWizard();
+    expect(await screen.findByText(/enter containr/i)).toBeInTheDocument();
+  });
+});

app/frontend/src/features/setup/SetupWizardPage.tsx

@@ -0,0 +1,279 @@
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Link, Navigate, useNavigate } from 'react-router-dom';
+import { Check, ChevronRight, Github, Loader2, Rocket, ShieldCheck } from 'lucide-react';
+import { useAuthSession } from '@/lib/use-auth-session';
+import {
+  completeSetup,
+  createGitHubAppManifest,
+  getSetupStatus,
+  updatePlatformSettings,
+} from '@/lib/api-client';
+
+// Marker the GitHub App callback reads so the wizard flow resumes here
+// instead of the settings page.
+const SETUP_RETURN_KEY = 'containr.setup_return';
+
+type Step = 'account' | 'github' | 'tunnel' | 'done';
+
+export function SetupWizardPage() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const sessionQuery = useAuthSession();
+  const statusQuery = useQuery({ queryKey: ['setup-status'], queryFn: getSetupStatus });
+  const [override, setOverride] = useState<Step | null>(null);
+
+  const status = statusQuery.data;
+  const signedIn = Boolean(sessionQuery.data);
+
+  const step: Step = useMemo(() => {
+    if (override) return override;
+    if (!status) return 'account';
+    if (!status.has_users || !signedIn) return 'account';
+    if (!status.has_github_app) return 'github';
+    if (!status.has_tunnel) return 'tunnel';
+    return 'done';
+  }, [override, status, signedIn]);
+
+  const completeMutation = useMutation({
+    mutationFn: completeSetup,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['setup-status'] });
+      navigate('/projects', { replace: true });
+    },
+  });
+
+  if (statusQuery.isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[var(--bg-primary)]">
+        <Loader2 size={22} className="animate-spin text-[var(--accent-primary)]" />
+      </div>
+    );
+  }
+
+  // Wizard is optional once the instance is already configured.
+  if (status && !status.needs_setup && !override) {
+    return <Navigate to="/projects" replace />;
+  }
+
+  const steps: { key: Step; label: string }[] = [
+    { key: 'account', label: 'Admin account' },
+    { key: 'github', label: 'Git provider' },
+    { key: 'tunnel', label: 'Public access' },
+    { key: 'done', label: 'Done' },
+  ];
+  const activeIdx = steps.findIndex((s) => s.key === step);
+
+  return (
+    <div className="min-h-screen bg-[var(--bg-primary)] flex flex-col items-center px-5 py-16">
+      <div className="w-full max-w-lg">
+        <div className="flex items-center gap-2 mb-8">
+          {steps.map((s, i) => (
+            <div key={s.key} className="flex items-center gap-2">
+              <div
+                className={`w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-semibold border ${
+                  i < activeIdx
+                    ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-[var(--accent-on)]'
+                    : i === activeIdx
+                      ? 'border-[var(--accent-primary)] text-[var(--accent-primary)]'
+                      : 'border-[var(--border-subtle)] text-[var(--text-muted)]'
+                }`}
+              >
+                {i < activeIdx ? <Check size={12} /> : i + 1}
+              </div>
+              <span
+                className={`text-xs ${i === activeIdx ? 'text-[var(--text-primary)] font-medium' : 'text-[var(--text-muted)]'}`}
+              >
+                {s.label}
+              </span>
+              {i < steps.length - 1 ? <div className="w-6 h-px bg-[var(--border-subtle)]" /> : null}
+            </div>
+          ))}
+        </div>
+
+        {step === 'account' ? (
+          <section className="panel p-6">
+            <h1 className="text-xl font-bold text-[var(--text-primary)]">Welcome to Containr</h1>
+            <p className="mt-2 text-sm text-[var(--text-secondary)]">
+              First boot detected. Create the admin account — registration closes to the public
+              right after, so this account owns the instance.
+            </p>
+            {status?.has_users && !signedIn ? (
+              <div className="mt-4">
+                <p className="text-sm text-[var(--text-secondary)]">
+                  An account already exists — sign in to continue setup.
+                </p>
+                <Link
+                  to="/auth/sign-in?redirect=/setup"
+                  className="mt-4 inline-flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)]"
+                  style={{ background: 'var(--accent-primary)' }}
+                >
+                  Sign in <ChevronRight size={14} />
+                </Link>
+              </div>
+            ) : !status?.has_users ? (
+              <Link
+                to="/auth/sign-up?redirect=/setup"
+                className="mt-4 inline-flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)]"
+                style={{ background: 'var(--accent-primary)' }}
+              >
+                Create admin account <ChevronRight size={14} />
+              </Link>
+            ) : null}
+          </section>
+        ) : null}
+
+        {step === 'github' ? <GitHubStep onNext={() => setOverride('tunnel')} /> : null}
+        {step === 'tunnel' ? <TunnelStep onNext={() => setOverride('done')} /> : null}
+
+        {step === 'done' ? (
+          <section className="panel p-6 text-center">
+            <Rocket size={28} className="mx-auto text-[var(--accent-primary)]" />
+            <h1 className="mt-4 text-xl font-bold text-[var(--text-primary)]">All set</h1>
+            <p className="mt-2 text-sm text-[var(--text-secondary)]">
+              Deploy your first service from a git repo, an image, or a template — the dashboard is
+              ready.
+            </p>
+            {completeMutation.isError ? (
+              <p className="mt-3 text-xs text-[var(--error)]">
+                {completeMutation.error instanceof Error
+                  ? completeMutation.error.message
+                  : 'Failed to save setup state'}
+              </p>
+            ) : null}
+            <button
+              type="button"
+              onClick={() => completeMutation.mutate()}
+              disabled={completeMutation.isPending}
+              className="mt-5 inline-flex items-center gap-2 h-10 px-6 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] disabled:opacity-50"
+              style={{ background: 'var(--accent-primary)' }}
+            >
+              {completeMutation.isPending ? (
+                <Loader2 size={14} className="animate-spin" />
+              ) : (
+                <ShieldCheck size={15} />
+              )}
+              Enter Containr
+            </button>
+          </section>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function GitHubStep({ onNext }: { onNext: () => void }) {
+  const queryClient = useQueryClient();
+  const provisionMutation = useMutation({
+    mutationFn: async () => {
+      const { url, manifest } = await createGitHubAppManifest({
+        base_url: window.location.origin,
+      });
+      sessionStorage.setItem(SETUP_RETURN_KEY, '1');
+      const form = document.createElement('form');
+      form.method = 'POST';
+      form.action = url;
+      const input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = 'manifest';
+      input.value = manifest;
+      form.appendChild(input);
+      document.body.appendChild(form);
+      form.submit();
+    },
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['setup-status'] }),
+  });
+
+  return (
+    <section className="panel p-6">
+      <div className="flex items-center gap-3 mb-3">
+        <Github size={20} className="text-[var(--text-primary)]" />
+        <h1 className="text-xl font-bold text-[var(--text-primary)]">Connect a git provider</h1>
+      </div>
+      <p className="text-sm text-[var(--text-secondary)]">
+        Provision the instance GitHub App — repo push events then trigger deployments and preview
+        environments automatically. Self-hosted GitLab/Gitea can be added later in Settings.
+      </p>
+      {provisionMutation.isError ? (
+        <p className="mt-3 text-xs text-[var(--error)]">
+          {provisionMutation.error instanceof Error
+            ? provisionMutation.error.message
+            : 'Could not start GitHub App provisioning'}
+        </p>
+      ) : null}
+      <div className="mt-5 flex items-center gap-3">
+        <button
+          type="button"
+          onClick={() => provisionMutation.mutate()}
+          disabled={provisionMutation.isPending}
+          className="inline-flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)] disabled:opacity-50"
+          style={{ background: 'var(--accent-primary)' }}
+        >
+          {provisionMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : null}
+          Set up GitHub App
+        </button>
+        <button
+          type="button"
+          onClick={onNext}
+          className="h-9 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
+        >
+          Skip for now
+        </button>
+      </div>
+    </section>
+  );
+}
+
+function TunnelStep({ onNext }: { onNext: () => void }) {
+  const queryClient = useQueryClient();
+  const [token, setToken] = useState('');
+  const saveMutation = useMutation({
+    mutationFn: () =>
+      updatePlatformSettings({ cloudflareTunnelToken: token.trim() || undefined }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['setup-status'] });
+      onNext();
+    },
+  });
+
+  return (
+    <section className="panel p-6">
+      <h1 className="text-xl font-bold text-[var(--text-primary)]">Public access (optional)</h1>
+      <p className="mt-2 text-sm text-[var(--text-secondary)]">
+        Paste a Cloudflare Tunnel token to expose this instance on the internet. Without one,
+        Containr stays reachable on this network — you can add it later in Settings.
+      </p>
+      <input
+        type="password"
+        value={token}
+        onChange={(e) => setToken(e.target.value)}
+        placeholder="eyJhIjo… tunnel token"
+        className="mt-4 w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] transition-colors"
+      />
+      {saveMutation.isError ? (
+        <p className="mt-3 text-xs text-[var(--error)]">
+          {saveMutation.error instanceof Error ? saveMutation.error.message : 'Failed to save token'}
+        </p>
+      ) : null}
+      <div className="mt-5 flex items-center gap-3">
+        <button
+          type="button"
+          onClick={() => (token.trim() ? saveMutation.mutate() : onNext())}
+          disabled={saveMutation.isPending}
+          className="inline-flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)] disabled:opacity-50"
+          style={{ background: 'var(--accent-primary)' }}
+        >
+          {saveMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : null}
+          {token.trim() ? 'Save tunnel token' : 'Continue'}
+        </button>
+        <button
+          type="button"
+          onClick={onNext}
+          className="h-9 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
+        >
+          Skip
+        </button>
+      </div>
+    </section>
+  );
+}

app/frontend/src/features/templates/builder/TemplateBuilder.tsx

@@ -0,0 +1,467 @@
+import { useCallback, useMemo, useState } from 'react';
+import {
+  Background,
+  BackgroundVariant,
+  Handle,
+  MarkerType,
+  Position,
+  ReactFlow,
+  ReactFlowProvider,
+  useReactFlow,
+  type Connection,
+  type Edge,
+  type EdgeChange,
+  type Node,
+  type NodeChange,
+  type NodeProps,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { Database, GitBranch, Package, Timer, Trash2, X } from 'lucide-react';
+import {
+  canvasFromConfig,
+  configFromCanvas,
+  newServiceKey,
+  validateGraph,
+  type BuilderNode,
+  type BuilderService,
+  type BuilderServiceType,
+} from './builder-model';
+
+type ServiceBuilderNode = Node<{ svc: BuilderService }, 'tplService'>;
+
+const TYPE_META: Record<BuilderServiceType, { label: string; icon: typeof Package; cls: string }> = {
+  web: { label: 'Web', icon: Package, cls: 'text-[var(--accent-primary)]' },
+  worker: { label: 'Worker', icon: GitBranch, cls: 'text-[var(--info,#5eb3f6)]' },
+  cron: { label: 'Cron', icon: Timer, cls: 'text-[var(--warning)]' },
+  database: { label: 'Database', icon: Database, cls: 'text-[var(--success,#7bd88a)]' },
+};
+
+const DATABASE_ENGINES = ['postgresql', 'mysql', 'mariadb', 'mongodb', 'redis', 'dragonfly', 'clickhouse'];
+
+function ServiceBuilderNodeView({ data, selected }: NodeProps<ServiceBuilderNode>) {
+  const meta = TYPE_META[data.svc.type] ?? TYPE_META.web;
+  const Icon = meta.icon;
+  return (
+    <div
+      className={`relative w-[210px] rounded-[var(--radius-md)] border bg-[var(--bg-elevated)] px-3 py-2.5 shadow-sm transition-colors ${
+        selected ? 'border-[var(--accent-primary)]' : 'border-[var(--border-subtle)]'
+      }`}
+    >
+      <Handle type="target" position={Position.Left} className="!h-2.5 !w-2.5 !border-[var(--border-default)] !bg-[var(--bg-base)]" />
+      <Handle type="source" position={Position.Right} className="!h-2.5 !w-2.5 !border-[var(--border-default)] !bg-[var(--bg-base)]" />
+      <div className="flex items-center gap-2">
+        <Icon size={14} className={meta.cls} />
+        <span className="truncate text-[12.5px] font-semibold text-[var(--text-primary)]">
+          {data.svc.name || data.svc.key}
+        </span>
+      </div>
+      <div className="mt-1 flex items-center justify-between gap-2">
+        <span className="text-[10.5px] uppercase tracking-wide text-[var(--text-tertiary)]">{meta.label}</span>
+        <span className="mono max-w-[120px] truncate text-[10.5px] text-[var(--text-secondary)]">
+          {data.svc.runtime || data.svc.repo || '—'}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+const nodeTypes = { tplService: ServiceBuilderNodeView };
+
+// Edges run dependency → dependent: connecting A → B means "B depends_on A".
+export function TemplateBuilder(props: {
+  config: Record<string, unknown>;
+  onApply: (config: Record<string, unknown>) => void;
+  onCancel: () => void;
+}) {
+  return (
+    <ReactFlowProvider>
+      <BuilderInner {...props} />
+    </ReactFlowProvider>
+  );
+}
+
+function BuilderInner({
+  config,
+  onApply,
+  onCancel,
+}: {
+  config: Record<string, unknown>;
+  onApply: (config: Record<string, unknown>) => void;
+  onCancel: () => void;
+}) {
+  const { screenToFlowPosition } = useReactFlow();
+  const initial = useMemo(() => canvasFromConfig(config), [config]);
+  const [services, setServices] = useState<Map<string, BuilderService>>(
+    () => new Map(initial.map((n) => [n.key, { ...n.service }])),
+  );
+  const [positions, setPositions] = useState<Record<string, { x: number; y: number }>>(
+    () => Object.fromEntries(initial.map((n) => [n.key, n.position])),
+  );
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+
+  const flowNodes: ServiceBuilderNode[] = useMemo(
+    () =>
+      [...services.values()].map((svc) => ({
+        id: svc.key,
+        type: 'tplService' as const,
+        position: positions[svc.key] ?? { x: 0, y: 0 },
+        data: { svc },
+        selected: svc.key === selectedKey,
+      })),
+    [services, positions, selectedKey],
+  );
+
+  const flowEdges: Edge[] = useMemo(
+    () =>
+      [...services.values()].flatMap((svc) =>
+        (svc.depends_on ?? [])
+          .filter((dep) => services.has(dep))
+          .map((dep) => ({
+            id: `${dep}->${svc.key}`,
+            source: dep,
+            target: svc.key,
+            markerEnd: { type: MarkerType.ArrowClosed, width: 14, height: 14, color: 'rgba(180,227,74,0.55)' },
+            style: { stroke: 'rgba(180,227,74,0.42)', strokeWidth: 1.6 },
+            className: 'edge-premium',
+          })),
+      ),
+    [services],
+  );
+
+  const builderNodes: BuilderNode[] = useMemo(
+    () =>
+      [...services.values()].map((svc) => ({
+        key: svc.key,
+        service: svc,
+        position: positions[svc.key] ?? { x: 0, y: 0 },
+      })),
+    [services, positions],
+  );
+  const errors = useMemo(() => validateGraph(builderNodes), [builderNodes]);
+
+  const patchService = useCallback((key: string, patch: Partial<BuilderService>) => {
+    setServices((prev) => {
+      const svc = prev.get(key);
+      if (!svc) return prev;
+      const next = new Map(prev);
+      next.set(key, { ...svc, ...patch });
+      return next;
+    });
+  }, []);
+
+  const addService = useCallback((type: BuilderServiceType, position?: { x: number; y: number }) => {
+    setServices((prev) => {
+      const key = newServiceKey(type, new Set(prev.keys()));
+      const next = new Map(prev);
+      next.set(key, {
+        key,
+        type,
+        runtime: type === 'database' ? 'postgresql' : undefined,
+      });
+      setPositions((pos) => ({ ...pos, [key]: position ?? { x: 80, y: 40 + (next.size - 1) * 150 } }));
+      setSelectedKey(key);
+      return next;
+    });
+  }, []);
+
+  const removeService = useCallback((key: string) => {
+    setServices((prev) => {
+      const next = new Map(prev);
+      next.delete(key);
+      for (const svc of next.values()) {
+        svc.depends_on = svc.depends_on?.filter((d) => d !== key);
+      }
+      return next;
+    });
+    setPositions((prev) => {
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+    setSelectedKey((cur) => (cur === key ? null : cur));
+  }, []);
+
+  const onConnect = useCallback(
+    (conn: Connection) => {
+      if (!conn.source || !conn.target || conn.source === conn.target) return;
+      const target = services.get(conn.target);
+      if (!target) return;
+      patchService(conn.target, {
+        depends_on: [...new Set([...(target.depends_on ?? []), conn.source])],
+      });
+    },
+    [patchService, services],
+  );
+
+  const onNodesChange = useCallback(
+    (changes: NodeChange<ServiceBuilderNode>[]) => {
+      for (const ch of changes) {
+        if (ch.type === 'position' && ch.position) {
+          setPositions((prev) => ({ ...prev, [ch.id]: ch.position! }));
+        } else if (ch.type === 'remove') {
+          removeService(ch.id);
+        } else if (ch.type === 'select') {
+          if (ch.selected) setSelectedKey(ch.id);
+        }
+      }
+    },
+    [removeService],
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange<Edge>[]) => {
+      for (const ch of changes) {
+        if (ch.type !== 'remove') continue;
+        const edge = flowEdges.find((e) => e.id === ch.id);
+        if (!edge) continue;
+        const svc = services.get(edge.target);
+        if (svc) {
+          patchService(edge.target, {
+            depends_on: (svc.depends_on ?? []).filter((d) => d !== edge.source),
+          });
+        }
+      }
+    },
+    [flowEdges, patchService, services],
+  );
+
+  const selected = selectedKey ? services.get(selectedKey) : null;
+
+  return (
+    <div className="flex min-h-0 flex-1">
+      <div className="relative flex-1">
+        <div className="absolute left-3 top-3 z-10 flex gap-1.5">
+          {(['web', 'database', 'cron', 'worker'] as const).map((t) => {
+            const meta = TYPE_META[t];
+            const Icon = meta.icon;
+            return (
+              <button
+                key={t}
+                type="button"
+                onClick={() => addService(t)}
+                className="canvas-pill inline-flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+              >
+                <Icon size={12} className={meta.cls} />
+                {meta.label}
+              </button>
+            );
+          })}
+        </div>
+        <ReactFlow
+          nodes={flowNodes}
+          edges={flowEdges}
+          nodeTypes={nodeTypes}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          onPaneClick={() => setSelectedKey(null)}
+          onDoubleClick={(e) => {
+            if ((e.target as HTMLElement).closest('.react-flow__node')) return;
+            addService('web', screenToFlowPosition({ x: e.clientX, y: e.clientY }));
+          }}
+          fitView
+          deleteKeyCode={['Backspace', 'Delete']}
+          proOptions={{ hideAttribution: true }}
+        >
+          <Background variant={BackgroundVariant.Dots} gap={22} size={1.2} color="rgba(255,255,255,0.07)" />
+        </ReactFlow>
+        <div className="canvas-pill absolute bottom-3 left-3 z-10 px-3 py-1.5 text-[10.5px] text-[var(--text-tertiary)]">
+          drag = move · connect handles = depends_on · double-click = add web · Del = remove
+        </div>
+      </div>
+
+      <div className="flex w-[290px] shrink-0 flex-col border-l border-[var(--border-subtle)]">
+        {selected ? (
+          <Inspector
+            key={selected.key}
+            svc={selected}
+            onPatch={(patch) => patchService(selected.key, patch)}
+            onRemove={() => removeService(selected.key)}
+          />
+        ) : (
+          <div className="flex flex-1 flex-col items-center justify-center gap-2 px-6 text-center">
+            <Package size={22} className="text-[var(--text-tertiary)]" />
+            <p className="text-xs text-[var(--text-tertiary)]">
+              Select a node to edit it, or add one from the toolbar.
+            </p>
+          </div>
+        )}
+        <div className="border-t border-[var(--border-subtle)] p-3">
+          {errors.length > 0 ? (
+            <div className="mb-2 max-h-[90px] overflow-y-auto rounded-[var(--radius-sm)] bg-[var(--error-soft)] px-3 py-2">
+              {errors.map((e) => (
+                <p key={e} className="text-[11px] text-[var(--error)]">• {e}</p>
+              ))}
+            </div>
+          ) : null}
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={onCancel}
+              className="flex-1 rounded-[var(--radius-md)] px-3 py-2 text-xs font-medium text-[var(--text-secondary)] hover:bg-[var(--surface-muted)]"
+            >
+              Back to JSON
+            </button>
+            <button
+              type="button"
+              disabled={errors.length > 0 || services.size === 0}
+              onClick={() => onApply(configFromCanvas(builderNodes, config))}
+              className="flex-1 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-3 py-2 text-xs font-semibold text-[var(--accent-on)] disabled:opacity-50"
+            >
+              Apply to JSON
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const FIELD_CLS =
+  'w-full rounded-[var(--radius-sm)] border border-[var(--border-default)] bg-[var(--bg-void)] px-2.5 py-1.5 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--accent-primary)]';
+const LABEL_CLS = 'mb-1 block text-[10.5px] font-medium uppercase tracking-wide text-[var(--text-tertiary)]';
+
+function Inspector({
+  svc,
+  onPatch,
+  onRemove,
+}: {
+  svc: BuilderService;
+  onPatch: (patch: Partial<BuilderService>) => void;
+  onRemove: () => void;
+}) {
+  const envText = Object.entries(svc.environment ?? {})
+    .map(([k, v]) => `${k}=${v}`)
+    .join('\n');
+  const volText = (svc.volumes ?? []).map((v) => `${v.source}:${v.target}${v.read_only ? ':ro' : ''}`).join('\n');
+  return (
+    <div className="flex-1 overflow-y-auto p-4">
+      <div className="mb-3 flex items-center justify-between">
+        <span className="text-[12px] font-semibold text-[var(--text-primary)]">{svc.key}</span>
+        <button
+          type="button"
+          onClick={onRemove}
+          className="flex items-center gap-1 rounded-[var(--radius-sm)] px-2 py-1 text-[11px] text-[var(--error)] hover:bg-[var(--error-soft)]"
+        >
+          <Trash2 size={12} /> Remove
+        </button>
+      </div>
+
+      <label className={LABEL_CLS}>Key</label>
+      <input className={FIELD_CLS} value={svc.key} disabled title="Key is the node id — cannot be renamed" />
+
+      <label className={`${LABEL_CLS} mt-3`}>Display name</label>
+      <input className={FIELD_CLS} value={svc.name ?? ''} onChange={(e) => onPatch({ name: e.target.value || undefined })} placeholder="optional" />
+
+      <label className={`${LABEL_CLS} mt-3`}>Type</label>
+      <select
+        className={FIELD_CLS}
+        value={svc.type}
+        onChange={(e) => onPatch({ type: e.target.value as BuilderServiceType })}
+      >
+        <option value="web">Web</option>
+        <option value="worker">Worker</option>
+        <option value="cron">Cron</option>
+        <option value="database">Database</option>
+      </select>
+
+      {svc.type === 'database' ? (
+        <>
+          <label className={`${LABEL_CLS} mt-3`}>Engine</label>
+          <select className={FIELD_CLS} value={svc.runtime ?? 'postgresql'} onChange={(e) => onPatch({ runtime: e.target.value })}>
+            {DATABASE_ENGINES.map((eng) => (
+              <option key={eng} value={eng}>{eng}</option>
+            ))}
+          </select>
+        </>
+      ) : (
+        <>
+          <label className={`${LABEL_CLS} mt-3`}>Image (runtime)</label>
+          <input className={FIELD_CLS} value={svc.runtime ?? ''} onChange={(e) => onPatch({ runtime: e.target.value || undefined })} placeholder="nginx:latest" />
+          <label className={`${LABEL_CLS} mt-3`}>Git repo</label>
+          <input className={FIELD_CLS} value={svc.repo ?? ''} onChange={(e) => onPatch({ repo: e.target.value || undefined })} placeholder="owner/repo or clone URL" />
+          {svc.repo ? (
+            <>
+              <label className={`${LABEL_CLS} mt-3`}>Branch</label>
+              <input className={FIELD_CLS} value={svc.branch ?? ''} onChange={(e) => onPatch({ branch: e.target.value || undefined })} placeholder="main" />
+              <label className={`${LABEL_CLS} mt-3`}>Build command</label>
+              <input className={FIELD_CLS} value={svc.build_command ?? ''} onChange={(e) => onPatch({ build_command: e.target.value || undefined })} />
+            </>
+          ) : null}
+          <label className={`${LABEL_CLS} mt-3`}>Start command</label>
+          <input className={FIELD_CLS} value={svc.start_command ?? ''} onChange={(e) => onPatch({ start_command: e.target.value || undefined })} />
+        </>
+      )}
+
+      {svc.type === 'web' ? (
+        <>
+          <label className={`${LABEL_CLS} mt-3`}>Port</label>
+          <input
+            className={FIELD_CLS}
+            type="number"
+            value={svc.port ?? ''}
+            onChange={(e) => onPatch({ port: e.target.value ? Number(e.target.value) : undefined })}
+          />
+          <label className={`${LABEL_CLS} mt-3`}>Health check path</label>
+          <input className={FIELD_CLS} value={svc.health_check ?? ''} onChange={(e) => onPatch({ health_check: e.target.value || undefined })} placeholder="/health" />
+        </>
+      ) : null}
+
+      <label className={`${LABEL_CLS} mt-3`}>Environment (KEY=value, one per line)</label>
+      <textarea
+        className={`${FIELD_CLS} mono min-h-[70px] resize-y`}
+        defaultValue={envText}
+        spellCheck={false}
+        onBlur={(e) => {
+          const env: Record<string, string> = {};
+          for (const line of e.target.value.split('\n')) {
+            const idx = line.indexOf('=');
+            if (idx > 0) env[line.slice(0, idx).trim()] = line.slice(idx + 1).trim();
+          }
+          onPatch({ environment: Object.keys(env).length ? env : undefined });
+        }}
+        placeholder={'DATABASE_URL={{service.db.url}}\nSECRET={{secret}}'}
+      />
+
+      <label className={`${LABEL_CLS} mt-3`}>Volumes (source:target[:ro], one per line)</label>
+      <textarea
+        className={`${FIELD_CLS} mono min-h-[50px] resize-y`}
+        defaultValue={volText}
+        spellCheck={false}
+        onBlur={(e) => {
+          const vols = e.target.value
+            .split('\n')
+            .map((l) => l.trim())
+            .filter(Boolean)
+            .map((l) => {
+              const [source, target, ro] = l.split(':');
+              return { source, target, read_only: ro === 'ro' || undefined };
+            })
+            .filter((v) => v.source && v.target);
+          onPatch({ volumes: vols.length ? vols : undefined });
+        }}
+        placeholder={'data:/var/lib/app\n./config:/etc/app:ro'}
+      />
+
+      {(svc.depends_on ?? []).length > 0 ? (
+        <div className="mt-3">
+          <span className={LABEL_CLS}>Depends on</span>
+          <div className="flex flex-wrap gap-1">
+            {svc.depends_on!.map((dep) => (
+              <span key={dep} className="inline-flex items-center gap-1 rounded-full bg-[var(--surface-muted)] px-2 py-0.5 text-[11px] text-[var(--text-secondary)]">
+                {dep}
+                <button
+                  type="button"
+                  onClick={() => onPatch({ depends_on: (svc.depends_on ?? []).filter((d) => d !== dep) })}
+                  className="text-[var(--text-tertiary)] hover:text-[var(--error)]"
+                >
+                  <X size={10} />
+                </button>
+              </span>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

app/frontend/src/features/templates/builder/builder-model.test.ts

@@ -0,0 +1,160 @@
+import { describe, expect, it } from 'vitest';
+import {
+  canvasFromConfig,
+  configFromCanvas,
+  layoutPositions,
+  newServiceKey,
+  validateGraph,
+  type BuilderNode,
+} from './builder-model';
+
+const plausibleConfig = {
+  version: 2,
+  services: [
+    { key: 'db', type: 'database', runtime: 'postgresql', environment: { POSTGRES_DB: 'plausible' } },
+    { key: 'events', type: 'database', runtime: 'clickhouse' },
+    {
+      key: 'web',
+      name: 'plausible',
+      type: 'web',
+      runtime: 'ghcr.io/plausible/community-edition:v2',
+      port: 8000,
+      health_check: '/api/health',
+      depends_on: ['db', 'events'],
+      environment: { DATABASE_URL: '{{service.db.url}}' },
+    },
+  ],
+};
+
+describe('canvasFromConfig', () => {
+  it('parses graph services into nodes with auto-layout', () => {
+    const nodes = canvasFromConfig(plausibleConfig);
+    expect(nodes.map((n) => n.key)).toEqual(['db', 'events', 'web']);
+    // databases are roots (depth 0), web depends on both (depth 1)
+    expect(nodes[0].position.x).toBeLessThan(nodes[2].position.x);
+    expect(nodes[1].position.y).toBeGreaterThan(nodes[0].position.y);
+  });
+
+  it('restores saved canvas positions', () => {
+    const nodes = canvasFromConfig({
+      ...plausibleConfig,
+      canvas: { positions: { db: { x: 500, y: 500 } } },
+    });
+    expect(nodes[0].position).toEqual({ x: 500, y: 500 });
+  });
+
+  it('migrates flat legacy configs to a single node', () => {
+    const nodes = canvasFromConfig({
+      type: 'web',
+      runtime: 'nginx:latest',
+      port: 80,
+      environment: { FOO: 'bar' },
+    });
+    expect(nodes).toHaveLength(1);
+    expect(nodes[0].service).toMatchObject({ key: 'app', type: 'web', runtime: 'nginx:latest', port: 80 });
+  });
+
+  it('drops entries without a key', () => {
+    const nodes = canvasFromConfig({ version: 2, services: [{ type: 'web', runtime: 'x' }, { key: 'ok', type: 'web', runtime: 'y' }] });
+    expect(nodes.map((n) => n.key)).toEqual(['ok']);
+  });
+});
+
+describe('configFromCanvas', () => {
+  it('round-trips a graph config', () => {
+    const nodes = canvasFromConfig(plausibleConfig);
+    const config = configFromCanvas(nodes, plausibleConfig);
+    const services = config.services as Record<string, unknown>[];
+    expect(config.version).toBe(2);
+    expect(services).toHaveLength(3);
+    const web = services.find((s) => s.key === 'web')!;
+    expect(web.depends_on).toEqual(['db', 'events']);
+    expect(web.port).toBe(8000);
+    expect((web.environment as Record<string, string>).DATABASE_URL).toBe('{{service.db.url}}');
+  });
+
+  it('persists node positions under config.canvas', () => {
+    const nodes = canvasFromConfig(plausibleConfig);
+    nodes[0].position = { x: 321, y: 123 };
+    const config = configFromCanvas(nodes, {});
+    expect((config.canvas as { positions: Record<string, { x: number; y: number }> }).positions.db).toEqual({ x: 321, y: 123 });
+    // and parses back to the same spot
+    expect(canvasFromConfig(config)[0].position).toEqual({ x: 321, y: 123 });
+  });
+
+  it('strips flat fields when converting a legacy config', () => {
+    const nodes = canvasFromConfig({ type: 'web', runtime: 'nginx:latest', port: 80 });
+    const config = configFromCanvas(nodes, { type: 'web', runtime: 'nginx:latest', port: 80 });
+    expect(config.type).toBeUndefined();
+    expect(config.runtime).toBeUndefined();
+    expect((config.services as unknown[]).length).toBe(1);
+  });
+});
+
+describe('layoutPositions', () => {
+  it('depths follow the depends_on chain', () => {
+    const pos = layoutPositions([
+      { key: 'a', type: 'database', runtime: 'postgresql' },
+      { key: 'b', type: 'web', runtime: 'img', depends_on: ['a'] },
+      { key: 'c', type: 'web', runtime: 'img', depends_on: ['b'] },
+    ]);
+    expect(pos.a.x).toBeLessThan(pos.b.x);
+    expect(pos.b.x).toBeLessThan(pos.c.x);
+  });
+
+  it('a dependency cycle does not hang', () => {
+    const pos = layoutPositions([
+      { key: 'a', type: 'web', runtime: 'x', depends_on: ['b'] },
+      { key: 'b', type: 'web', runtime: 'x', depends_on: ['a'] },
+    ]);
+    expect(pos.a).toBeDefined();
+    expect(pos.b).toBeDefined();
+  });
+});
+
+describe('validateGraph', () => {
+  const node = (key: string, extra: Partial<BuilderNode['service']> = {}): BuilderNode => ({
+    key,
+    position: { x: 0, y: 0 },
+    service: { key, type: 'web', runtime: 'img:1', ...extra },
+  });
+
+  it('accepts a valid graph', () => {
+    expect(validateGraph([node('db', { type: 'database', runtime: 'postgresql' }), node('web', { depends_on: ['db'] })])).toEqual([]);
+  });
+
+  it('rejects duplicate keys', () => {
+    expect(validateGraph([node('a'), node('a')])).toContain('duplicate key "a"');
+  });
+
+  it('rejects bad keys and self-deps', () => {
+    const errs = validateGraph([node('BAD KEY'), node('x', { depends_on: ['x'] })]);
+    expect(errs.some((e) => e.includes('not a valid key'))).toBe(true);
+    expect(errs).toContain('"x" depends on itself');
+  });
+
+  it('rejects deps on missing services', () => {
+    expect(validateGraph([node('web', { depends_on: ['ghost'] })])).toContain(
+      '"web" depends on unknown service "ghost"',
+    );
+  });
+
+  it('rejects database without engine and web without source', () => {
+    const errs = validateGraph([node('db', { type: 'database', runtime: undefined }), node('web', { runtime: undefined })]);
+    expect(errs).toContain('"db" is a database with no engine selected');
+    expect(errs).toContain('"web" needs an image (runtime) or a git repo');
+  });
+
+  it('reports dependency cycles', () => {
+    const errs = validateGraph([node('a', { depends_on: ['b'] }), node('b', { depends_on: ['a'] })]);
+    expect(errs.some((e) => e.startsWith('dependency cycle'))).toBe(true);
+  });
+});
+
+describe('newServiceKey', () => {
+  it('picks unused keys', () => {
+    expect(newServiceKey('database', new Set())).toBe('db');
+    expect(newServiceKey('database', new Set(['db']))).toBe('db2');
+    expect(newServiceKey('web', new Set(['web', 'web2']))).toBe('web3');
+  });
+});

app/frontend/src/features/templates/builder/builder-model.ts

@@ -0,0 +1,241 @@
+// Pure model for the visual template builder: converts between the
+// template `config` JSON (version 2 service graph, or a legacy flat
+// single-service config) and canvas state (nodes + positions), and
+// validates the graph before save. No React, no DOM — directly testable.
+
+export type BuilderServiceType = 'web' | 'worker' | 'cron' | 'database';
+
+export type BuilderService = {
+  key: string;
+  name?: string;
+  type: BuilderServiceType;
+  runtime?: string;
+  repo?: string;
+  branch?: string;
+  build_command?: string;
+  start_command?: string;
+  port?: number;
+  health_check?: string;
+  builder?: string;
+  environment?: Record<string, string>;
+  volumes?: { type?: string; source: string; target: string; read_only?: boolean }[];
+  depends_on?: string[];
+};
+
+export type BuilderCanvas = {
+  positions: Record<string, { x: number; y: number }>;
+};
+
+export type BuilderNode = {
+  key: string;
+  service: BuilderService;
+  position: { x: number; y: number };
+};
+
+const KEY_RE = /^[a-z][a-z0-9_-]*$/;
+const COL_X = 60;
+const ROW_Y = 200;
+
+function asService(raw: unknown): BuilderService | null {
+  if (!raw || typeof raw !== 'object') return null;
+  const s = raw as Record<string, unknown>;
+  const key = typeof s.key === 'string' ? s.key : '';
+  if (!key) return null;
+  const type = typeof s.type === 'string' ? s.type : 'web';
+  return {
+    key,
+    name: typeof s.name === 'string' ? s.name : undefined,
+    type: (['web', 'worker', 'cron', 'database'] as const).includes(type as BuilderServiceType)
+      ? (type as BuilderServiceType)
+      : 'web',
+    runtime: typeof s.runtime === 'string' ? s.runtime : undefined,
+    repo: typeof s.repo === 'string' ? s.repo : undefined,
+    branch: typeof s.branch === 'string' ? s.branch : undefined,
+    build_command: typeof s.build_command === 'string' ? s.build_command : undefined,
+    start_command: typeof s.start_command === 'string' ? s.start_command : undefined,
+    port: typeof s.port === 'number' ? s.port : undefined,
+    health_check: typeof s.health_check === 'string' ? s.health_check : undefined,
+    builder: typeof s.builder === 'string' ? s.builder : undefined,
+    environment:
+      s.environment && typeof s.environment === 'object' && !Array.isArray(s.environment)
+        ? Object.fromEntries(
+            Object.entries(s.environment as Record<string, unknown>).map(([k, v]) => [k, String(v)]),
+          )
+        : undefined,
+    volumes: Array.isArray(s.volumes)
+      ? (s.volumes
+          .map((v) => {
+            if (!v || typeof v !== 'object') return null;
+            const vol = v as Record<string, unknown>;
+            if (typeof vol.target !== 'string' || !vol.target) return null;
+            return {
+              type: typeof vol.type === 'string' ? vol.type : undefined,
+              source: typeof vol.source === 'string' ? vol.source : '',
+              target: vol.target,
+              read_only: typeof vol.read_only === 'boolean' ? vol.read_only : undefined,
+            };
+          })
+          .filter((v): v is NonNullable<typeof v> => v !== null)
+        )
+      : undefined,
+    depends_on: Array.isArray(s.depends_on)
+      ? s.depends_on.filter((d): d is string => typeof d === 'string')
+      : undefined,
+  };
+}
+
+// Flat legacy configs ({type, runtime, port, …} with no services array)
+// map to a single service node so the builder can edit them without
+// losing fields the round-trip would drop.
+function flatToService(config: Record<string, unknown>): BuilderService | null {
+  const type = typeof config.type === 'string' ? config.type : '';
+  const runtime = typeof config.runtime === 'string' ? config.runtime : '';
+  if (!type && !runtime) return null;
+  const svc = asService({
+    key: 'app',
+    type: type || 'web',
+    runtime,
+    port: config.port,
+    health_check: config.health_check,
+    build_command: config.build_command,
+    start_command: config.start_command,
+    environment: config.environment,
+  });
+  return svc;
+}
+
+// Layered auto-layout: depth = longest depends_on chain; column per
+// depth, row per member. Deterministic so tests can assert positions.
+export function layoutPositions(services: BuilderService[]): Record<string, { x: number; y: number }> {
+  const depth = new Map<string, number>();
+  const visiting = new Set<string>();
+  const byKey = new Map(services.map((s) => [s.key, s]));
+  const depthOf = (key: string): number => {
+    const memo = depth.get(key);
+    if (memo !== undefined) return memo;
+    if (visiting.has(key)) return 0; // cycle guard
+    visiting.add(key);
+    const deps = byKey.get(key)?.depends_on ?? [];
+    let d = 0;
+    for (const dep of deps) {
+      if (byKey.has(dep)) d = Math.max(d, depthOf(dep) + 1);
+    }
+    visiting.delete(key);
+    depth.set(key, d);
+    return d;
+  };
+  const rows = new Map<number, number>();
+  const positions: Record<string, { x: number; y: number }> = {};
+  for (const svc of services) {
+    const d = depthOf(svc.key);
+    const row = rows.get(d) ?? 0;
+    rows.set(d, row + 1);
+    positions[svc.key] = { x: COL_X + d * 300, y: 40 + row * ROW_Y };
+  }
+  return positions;
+}
+
+export function canvasFromConfig(config: Record<string, unknown>): BuilderNode[] {
+  const canvas = (config.canvas ?? {}) as Partial<BuilderCanvas>;
+  const saved = canvas.positions ?? {};
+  const rawServices = Array.isArray(config.services) ? config.services : null;
+  const services = rawServices
+    ? rawServices.map(asService).filter((s): s is BuilderService => s !== null)
+    : [];
+  if (services.length === 0) {
+    const flat = flatToService(config);
+    if (flat) services.push(flat);
+  }
+  const auto = layoutPositions(services);
+  return services.map((service) => ({
+    key: service.key,
+    service,
+    position: saved[service.key] ?? auto[service.key] ?? { x: COL_X, y: 40 },
+  }));
+}
+
+export function configFromCanvas(
+  nodes: BuilderNode[],
+  rest: Record<string, unknown>,
+): Record<string, unknown> {
+  const services = nodes.map((node) => {
+    const svc = node.service;
+    const out: Record<string, unknown> = { key: svc.key, type: svc.type };
+    if (svc.name) out.name = svc.name;
+    if (svc.runtime) out.runtime = svc.runtime;
+    if (svc.repo) out.repo = svc.repo;
+    if (svc.branch) out.branch = svc.branch;
+    if (svc.build_command) out.build_command = svc.build_command;
+    if (svc.builder) out.builder = svc.builder;
+    if (svc.start_command) out.start_command = svc.start_command;
+    if (svc.port) out.port = svc.port;
+    if (svc.health_check) out.health_check = svc.health_check;
+    if (svc.environment && Object.keys(svc.environment).length > 0) out.environment = svc.environment;
+    if (svc.volumes && svc.volumes.length > 0) out.volumes = svc.volumes;
+    if (svc.depends_on && svc.depends_on.length > 0) out.depends_on = svc.depends_on;
+    return out;
+  });
+  const positions: Record<string, { x: number; y: number }> = {};
+  for (const node of nodes) positions[node.key] = node.position;
+  const restConfig = { ...rest };
+  // Flat (v1) fields and stale graph keys are dropped — the graph wins.
+  for (const k of ['type', 'runtime', 'build_command', 'start_command', 'port', 'health_check', 'environment', 'dockerfile', 'nixpacks_config', 'services', 'canvas']) {
+    delete restConfig[k];
+  }
+  return {
+    version: 2,
+    ...restConfig,
+    services,
+    canvas: { positions },
+  };
+}
+
+export function validateGraph(nodes: BuilderNode[]): string[] {
+  const errors: string[] = [];
+  const keys = new Set<string>();
+  for (const node of nodes) {
+    if (!KEY_RE.test(node.service.key)) {
+      errors.push(`"${node.service.key || '(empty)'}" is not a valid key (lowercase, digits, - or _)`);
+    }
+    if (keys.has(node.service.key)) errors.push(`duplicate key "${node.service.key}"`);
+    keys.add(node.service.key);
+    if (node.service.type === 'database' && !node.service.runtime) {
+      errors.push(`"${node.service.key}" is a database with no engine selected`);
+    }
+    if (node.service.type !== 'database' && !node.service.runtime && !node.service.repo) {
+      errors.push(`"${node.service.key}" needs an image (runtime) or a git repo`);
+    }
+  }
+  for (const node of nodes) {
+    for (const dep of node.service.depends_on ?? []) {
+      if (dep === node.service.key) errors.push(`"${dep}" depends on itself`);
+      else if (!keys.has(dep)) errors.push(`"${node.service.key}" depends on unknown service "${dep}"`);
+    }
+  }
+  // Cycle detection — a cycle makes topo sort fail at deploy time.
+  const state = new Map<string, 0 | 1 | 2>();
+  const byKey = new Map(nodes.map((n) => [n.service.key, n]));
+  const visit = (key: string, trail: string[]): void => {
+    const s = state.get(key) ?? 0;
+    if (s === 2) return;
+    if (s === 1) {
+      errors.push(`dependency cycle: ${[...trail, key].join(' → ')}`);
+      return;
+    }
+    state.set(key, 1);
+    for (const dep of byKey.get(key)?.service.depends_on ?? []) {
+      if (byKey.has(dep)) visit(dep, [...trail, key]);
+    }
+    state.set(key, 2);
+  };
+  for (const node of nodes) visit(node.service.key, []);
+  return errors;
+}
+
+export function newServiceKey(type: BuilderServiceType, existing: Set<string>): string {
+  const base = type === 'database' ? 'db' : type;
+  if (!existing.has(base)) return base;
+  let i = 2;
+  while (existing.has(`${base}${i}`)) i += 1;
+  return `${base}${i}`;
+}

app/frontend/src/features/templates/pages/TemplatesPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { lazy, Suspense, useMemo, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
@@ -42,6 +42,10 @@ import {
   Network,
 } from 'lucide-react';
 
+const TemplateBuilder = lazy(() =>
+  import('@/features/templates/builder/TemplateBuilder').then((m) => ({ default: m.TemplateBuilder })),
+);
+
 function toServiceName(value: string): string {
   const normalized = value
     .toLowerCase()
@@ -127,6 +131,7 @@ export function TemplatesPage() {
   const isAdmin = Boolean(profileQuery.data?.isAdmin);
 
   const [editorOpen, setEditorOpen] = useState(false);
+  const [editorMode, setEditorMode] = useState<'json' | 'visual'>('json');
   const [editorJson, setEditorJson] = useState(EMPTY_TEMPLATE_JSON);
   const [editingTemplate, setEditingTemplate] = useState<TemplateEntity | null>(null);
   const [editorIsPublic, setEditorIsPublic] = useState(false);
@@ -1022,17 +1027,50 @@ export function TemplatesPage() {
       {/* Template editor — JSON only */}
       {editorOpen ? (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
-          <div className="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-base)] shadow-2xl">
+          <div className={`flex max-h-[92vh] w-full flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-base)] shadow-2xl ${editorMode === 'visual' ? 'max-w-6xl' : 'max-w-2xl'}`}>
             <div className="flex items-center justify-between border-b border-[var(--border-subtle)] px-5 py-4">
               <div>
                 <h2 className="text-[15px] font-semibold text-[var(--text-primary)]">
                   {editingTemplate ? `Edit ${editingTemplate.name}` : 'New template'}
                 </h2>
                 <p className="text-xs text-[var(--text-tertiary)]">
-                  JSON definition — name, category, config and variables.
+                  {editorMode === 'visual'
+                    ? 'Visual builder — drop service nodes, wire depends_on edges, apply back to JSON.'
+                    : 'JSON definition — name, category, config and variables.'}
                 </p>
               </div>
               <div className="flex items-center gap-2">
+                <div className="mr-1 inline-flex overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-default)]">
+                  {(['json', 'visual'] as const).map((mode) => (
+                    <button
+                      key={mode}
+                      type="button"
+                      onClick={() => {
+                        if (mode === 'visual' && editorMode === 'json') {
+                          try {
+                            const parsed = JSON.parse(editorJson);
+                            if (!parsed || typeof parsed.config !== 'object') {
+                              setEditorError('Visual mode needs a valid JSON body with a "config" object first.');
+                              return;
+                            }
+                          } catch {
+                            setEditorError('Fix the JSON before switching to visual mode.');
+                            return;
+                          }
+                          setEditorError(null);
+                        }
+                        setEditorMode(mode);
+                      }}
+                      className={`px-3 py-1.5 text-[11px] font-medium capitalize ${
+                        editorMode === mode
+                          ? 'bg-[var(--surface-muted)] text-[var(--text-primary)]'
+                          : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
+                      }`}
+                    >
+                      {mode}
+                    </button>
+                  ))}
+                </div>
                 <label className="inline-flex cursor-pointer items-center gap-1.5 rounded-[var(--radius-md)] border border-[var(--border-default)] px-3 py-1.5 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]">
                   <Upload size={12} /> Upload .json
                   <input
@@ -1055,12 +1093,49 @@ export function TemplatesPage() {
                 </button>
               </div>
             </div>
-            <textarea
-              value={editorJson}
-              onChange={(e) => setEditorJson(e.target.value)}
-              spellCheck={false}
-              className="mono min-h-[380px] flex-1 resize-none bg-[var(--bg-void)] p-4 text-[12.5px] leading-relaxed text-[var(--text-secondary)] outline-none"
-            />
+            {editorMode === 'visual' ? (
+              <div className="flex min-h-[520px] flex-1 flex-col">
+                <Suspense
+                  fallback={
+                    <div className="flex flex-1 items-center justify-center text-[var(--text-tertiary)]">
+                      <Loader2 size={20} className="animate-spin" />
+                    </div>
+                  }
+                >
+                  {(() => {
+                    let cfg: Record<string, unknown> = {};
+                    try {
+                      const parsed = JSON.parse(editorJson) as { config?: Record<string, unknown> };
+                      cfg = parsed?.config ?? {};
+                    } catch {
+                      cfg = {};
+                    }
+                    return (
+                      <TemplateBuilder
+                        config={cfg}
+                        onCancel={() => setEditorMode('json')}
+                        onApply={(newConfig) => {
+                          try {
+                            const parsed = JSON.parse(editorJson) as Record<string, unknown>;
+                            setEditorJson(JSON.stringify({ ...parsed, config: newConfig }, null, 2));
+                          } catch {
+                            setEditorJson(JSON.stringify({ config: newConfig }, null, 2));
+                          }
+                          setEditorMode('json');
+                        }}
+                      />
+                    );
+                  })()}
+                </Suspense>
+              </div>
+            ) : (
+              <textarea
+                value={editorJson}
+                onChange={(e) => setEditorJson(e.target.value)}
+                spellCheck={false}
+                className="mono min-h-[380px] flex-1 resize-none bg-[var(--bg-void)] p-4 text-[12.5px] leading-relaxed text-[var(--text-secondary)] outline-none"
+              />
+            )}
             {composeWarnings.length > 0 ? (
               <div className="border-t border-[var(--border-subtle)] bg-[var(--warning-soft)]/60 px-5 py-2.5 text-xs text-[var(--warning)]">
                 <p className="font-medium mb-1">Compose import notes</p>
@@ -1074,7 +1149,7 @@ export function TemplatesPage() {
                 {editorError}
               </div>
             ) : null}
-            <div className="flex items-center justify-between border-t border-[var(--border-subtle)] px-5 py-3.5">
+            <div className={`flex items-center justify-between border-t border-[var(--border-subtle)] px-5 py-3.5 ${editorMode === 'visual' ? 'hidden' : ''}`}>
               <label className="inline-flex cursor-pointer items-center gap-2 text-[11px] text-[var(--text-secondary)]">
                 <input
                   type="checkbox"

app/frontend/src/features/workspace/canvas/ProjectCanvas.tsx

@@ -25,14 +25,22 @@ import {
 } from '@/lib/api-client';
 import { useToast } from '@/shared/hooks/use-toast';
 import { inferAutoConnections, type ServiceVariable } from '../auto-connections';
-import {
-  DEFAULT_VIEWPORT,
-  type CanvasGroup,
-  type CanvasNodeLayout,
-  type ProjectCanvasMetadata,
-} from '../model';
+import { DEFAULT_VIEWPORT, type ProjectCanvasMetadata } from '../model';
 import { hasCanvasMetadata, loadCanvasMetadata, saveCanvasMetadata } from '../storage';
 import { computeLayeredLayout, layoutFromVariables, NODE_HEIGHT, NODE_WIDTH } from './auto-layout';
+import {
+  buildMetadataFromFlow,
+  GROUP_DEFAULT_HEIGHT,
+  GROUP_DEFAULT_WIDTH,
+  GROUP_PAD_BOTTOM,
+  GROUP_PAD_TOP,
+  GROUP_PAD_X,
+  GRID_STEP,
+  groupSlot,
+  resolveFreeSpot,
+  type CanvasNode,
+  type Rect,
+} from './layout';
 import { GroupNode, ServiceNode, type GroupNodeData, type ServiceNodeData } from './nodes';
 import { ServiceInspector, type InspectorGroup } from './inspector';
 import { serviceAccent } from './service-visuals';
@@ -65,11 +73,7 @@ type CanvasProps = {
 
 type ServiceCanvasNode = Node<ServiceNodeData, 'serviceNode'>;
 type GroupCanvasNode = Node<GroupNodeData, 'groupNode'>;
-type CanvasNode = ServiceCanvasNode | GroupCanvasNode;
 type CanvasEdge = Edge<{ reasons: string[] }>;
-
-const GROUP_DEFAULT_WIDTH = 340;
-const GROUP_DEFAULT_HEIGHT = 230;
 const TRANSIENT_STATUSES = new Set(['building', 'deploying', 'pending', 'rolling_back']);
 
 const nodeTypes: NodeTypes = {
@@ -176,155 +180,6 @@ function toFlowEdges(
   });
 }
 
-const GROUP_PAD_X = 28;
-const GROUP_PAD_TOP = 56;
-const GROUP_PAD_BOTTOM = 24;
-const GROUP_ROW_GAP = 16;
-const GRID_STEP = 26;
-const NODE_GAP = 14;
-
-type Rect = { x: number; y: number; w: number; h: number };
-
-function rectsOverlap(a: Rect, b: Rect): boolean {
-  return (
-    a.x < b.x + b.w + NODE_GAP &&
-    a.x + a.w + NODE_GAP > b.x &&
-    a.y < b.y + b.h + NODE_GAP &&
-    a.y + a.h + NODE_GAP > b.y
-  );
-}
-
-// Nearest grid-aligned position where a node fits without touching any
-// occupied rect. Spiral-searches outward on the canvas lattice; falls back to
-// the given position when the neighbourhood is fully boxed in.
-function resolveFreeSpot(
-  desired: { x: number; y: number },
-  occupied: Rect[],
-  fallback: { x: number; y: number },
-  bounds?: Rect,
-): { x: number; y: number } {
-  const snap = (v: number) => Math.round(v / GRID_STEP) * GRID_STEP;
-  const base = { x: snap(desired.x), y: snap(desired.y) };
-  const fits = (x: number, y: number) => {
-    if (bounds && (x < bounds.x || y < bounds.y || x + NODE_WIDTH > bounds.x + bounds.w || y + NODE_HEIGHT > bounds.y + bounds.h)) {
-      return false;
-    }
-    return !occupied.some((rect) => rectsOverlap({ x, y, w: NODE_WIDTH, h: NODE_HEIGHT }, rect));
-  };
-
-  if (fits(base.x, base.y)) {
-    return base;
-  }
-
-  for (let ring = 1; ring <= 12; ring++) {
-    for (let dx = -ring; dx <= ring; dx++) {
-      for (let dy = -ring; dy <= ring; dy++) {
-        if (Math.max(Math.abs(dx), Math.abs(dy)) !== ring) {
-          continue;
-        }
-        const x = base.x + dx * GRID_STEP;
-        const y = base.y + dy * GRID_STEP;
-        if (fits(x, y)) {
-          return { x, y };
-        }
-      }
-    }
-  }
-
-  return fallback;
-}
-
-// Where an incoming service lands inside a group frame. If the point already
-// fits inside the padded area, honour it. Otherwise append beneath the lowest
-// member and grow the frame just enough — keeps groups compact instead of
-// ballooning the frame to wherever the node used to sit.
-function groupSlot(
-  nodes: CanvasNode[],
-  groupId: string,
-  group: CanvasNode,
-  desiredX: number,
-  desiredY: number,
-  ignoreServiceId?: string,
-): { x: number; y: number; width: number; height: number } {
-  const width = typeof group.style?.width === 'number' ? group.style.width : GROUP_DEFAULT_WIDTH;
-  const height = typeof group.style?.height === 'number' ? group.style.height : GROUP_DEFAULT_HEIGHT;
-
-  const members = nodes.filter(
-    (node) => node.type === 'serviceNode' && node.parentId === groupId && node.id !== ignoreServiceId,
-  );
-  const memberRects: Rect[] = members.map((node) => ({
-    x: node.position.x,
-    y: node.position.y,
-    w: NODE_WIDTH,
-    h: NODE_HEIGHT,
-  }));
-  const snap = (v: number) => Math.round(v / GRID_STEP) * GRID_STEP;
-  const snappedX = snap(desiredX);
-  const snappedY = snap(desiredY);
-  const snappedFits =
-    snappedX >= GROUP_PAD_X &&
-    snappedY >= GROUP_PAD_TOP &&
-    snappedX + NODE_WIDTH <= width - GROUP_PAD_X &&
-    snappedY + NODE_HEIGHT <= height - GROUP_PAD_BOTTOM;
-  const collides = memberRects.some((rect) =>
-    rectsOverlap({ x: snappedX, y: snappedY, w: NODE_WIDTH, h: NODE_HEIGHT }, rect),
-  );
-
-  if (snappedFits && !collides) {
-    return { x: snappedX, y: snappedY, width, height };
-  }
-
-  let bottom = GROUP_PAD_TOP - GROUP_ROW_GAP;
-  for (const node of nodes) {
-    if (node.type === 'serviceNode' && node.parentId === groupId && node.id !== ignoreServiceId) {
-      bottom = Math.max(bottom, node.position.y + NODE_HEIGHT);
-    }
-  }
-
-  const x = GROUP_PAD_X;
-  const y = bottom + GROUP_ROW_GAP;
-  return {
-    x,
-    y,
-    width: Math.max(width, x + NODE_WIDTH + GROUP_PAD_X),
-    height: Math.max(height, y + NODE_HEIGHT + GROUP_PAD_BOTTOM),
-  };
-}
-
-function buildMetadataFromFlow(nodes: CanvasNode[], viewport: { x: number; y: number; zoom: number }): ProjectCanvasMetadata {
-  const groups: CanvasGroup[] = [];
-  const layouts: CanvasNodeLayout[] = [];
-
-  for (const node of nodes) {
-    if (node.type === 'groupNode') {
-      const width = typeof node.style?.width === 'number' ? node.style.width : GROUP_DEFAULT_WIDTH;
-      const height = typeof node.style?.height === 'number' ? node.style.height : GROUP_DEFAULT_HEIGHT;
-      groups.push({
-        id: node.id,
-        title: node.data.title,
-        position: node.position,
-        width,
-        height,
-      });
-      continue;
-    }
-
-    if (node.type === 'serviceNode') {
-      layouts.push({
-        serviceId: node.id,
-        position: node.position,
-        groupId: node.parentId,
-      });
-    }
-  }
-
-  return {
-    groups,
-    nodes: layouts,
-    edges: [],
-    viewport,
-  };
-}
 
 function ZoomControls({ onTidy }: { onTidy: () => void }) {
   const { zoom } = useViewport();

app/frontend/src/features/workspace/canvas/canvas-layout.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, it } from 'vitest';
+import {
+  buildMetadataFromFlow,
+  groupSlot,
+  rectsOverlap,
+  resolveFreeSpot,
+} from './layout';
+import { NODE_HEIGHT, NODE_WIDTH } from './auto-layout';
+import type { GroupNodeType, ServiceNodeType } from './nodes';
+
+const GRID_STEP = 26;
+const NODE_GAP = 14;
+
+function serviceNode(
+  id: string,
+  position: { x: number; y: number },
+  parentId?: string,
+): ServiceNodeType {
+  return { id, type: 'serviceNode', position, parentId } as ServiceNodeType;
+}
+
+function groupNode(
+  id: string,
+  width = 340,
+  height = 230,
+): GroupNodeType {
+  return {
+    id,
+    type: 'groupNode',
+    position: { x: 0, y: 0 },
+    style: { width, height },
+    data: { title: `Group ${id}` },
+  } as GroupNodeType;
+}
+
+describe('rectsOverlap', () => {
+  const a = { x: 0, y: 0, w: 100, h: 100 };
+
+  it('detects intersection', () => {
+    expect(rectsOverlap(a, { x: 50, y: 50, w: 100, h: 100 })).toBe(true);
+    expect(rectsOverlap(a, { x: -50, y: -50, w: 100, h: 100 })).toBe(true);
+  });
+
+  it('returns false for fully disjoint rects', () => {
+    expect(rectsOverlap(a, { x: 500, y: 500, w: 100, h: 100 })).toBe(false);
+  });
+
+  it('treats the node gap as a collision zone', () => {
+    // b sits just inside NODE_GAP to the right of a.
+    expect(rectsOverlap(a, { x: 100 + NODE_GAP - 1, y: 0, w: 50, h: 50 })).toBe(true);
+    // Beyond the gap there is no overlap.
+    expect(rectsOverlap(a, { x: 100 + NODE_GAP + 1, y: 0, w: 50, h: 50 })).toBe(false);
+  });
+});
+
+describe('resolveFreeSpot', () => {
+  it('snaps the desired position to the grid when free', () => {
+    const spot = resolveFreeSpot({ x: 40, y: 70 }, [], { x: 0, y: 0 });
+    expect(spot).toEqual({ x: 52, y: 78 });
+    expect(spot.x % GRID_STEP).toBe(0);
+    expect(spot.y % GRID_STEP).toBe(0);
+  });
+
+  it('finds a neighbouring free grid point when occupied', () => {
+    const occupied = [{ x: 0, y: 0, w: NODE_WIDTH, h: NODE_HEIGHT }];
+    const spot = resolveFreeSpot({ x: 0, y: 0 }, occupied, { x: -1, y: -1 });
+    expect(spot).not.toEqual({ x: -1, y: -1 });
+    expect(Number.isInteger(spot.x / GRID_STEP)).toBe(true);
+    expect(Number.isInteger(spot.y / GRID_STEP)).toBe(true);
+    expect(
+      rectsOverlap({ x: spot.x, y: spot.y, w: NODE_WIDTH, h: NODE_HEIGHT }, occupied[0]),
+    ).toBe(false);
+  });
+
+  it('falls back when bounds reject every candidate', () => {
+    // Node is wider than the bounds, so nothing can fit.
+    const bounds = { x: 0, y: 0, w: 10, h: 10 };
+    const fallback = { x: 999, y: 888 };
+    expect(resolveFreeSpot({ x: 0, y: 0 }, [], fallback, bounds)).toEqual(fallback);
+  });
+});
+
+describe('groupSlot', () => {
+  it('honours a point that fits inside the padded frame', () => {
+    const group = groupNode('g1');
+    const slot = groupSlot([group], 'g1', group, 40, 70);
+    expect(slot).toEqual({ x: 52, y: 78, width: 340, height: 230 });
+  });
+
+  it('appends below the lowest member and grows the frame on collision', () => {
+    const group = groupNode('g1');
+    const member = serviceNode('s1', { x: 52, y: 78 }, 'g1');
+    const slot = groupSlot([group, member], 'g1', group, 40, 70);
+    // bottom = 78 + 104 = 182; y = 182 + 16 = 198; grows height to 326.
+    expect(slot.x).toBe(28);
+    expect(slot.y).toBe(198);
+    expect(slot.height).toBe(326);
+    expect(slot.width).toBe(340);
+  });
+
+  it('appends under the padding when the desired point is outside', () => {
+    const group = groupNode('g1');
+    const slot = groupSlot([group], 'g1', group, 5000, 5000);
+    expect(slot).toEqual({ x: 28, y: 56, width: 340, height: 230 });
+  });
+
+  it('ignores the dragged node when checking collisions', () => {
+    const group = groupNode('g1');
+    const dragged = serviceNode('s1', { x: 52, y: 78 }, 'g1');
+    const slot = groupSlot([group, dragged], 'g1', group, 40, 70, 's1');
+    expect(slot).toEqual({ x: 52, y: 78, width: 340, height: 230 });
+  });
+});
+
+describe('buildMetadataFromFlow', () => {
+  it('serializes groups and service layouts', () => {
+    const nodes = [
+      { ...groupNode('g1', 400, 300), position: { x: 10, y: 20 } },
+      serviceNode('s1', { x: 5, y: 6 }, 'g1'),
+      serviceNode('s2', { x: 100, y: 200 }),
+    ];
+    const viewport = { x: 1, y: 2, zoom: 0.5 };
+    const meta = buildMetadataFromFlow(nodes, viewport);
+
+    expect(meta.groups).toEqual([
+      { id: 'g1', title: 'Group g1', position: { x: 10, y: 20 }, width: 400, height: 300 },
+    ]);
+    expect(meta.nodes).toEqual([
+      { serviceId: 's1', position: { x: 5, y: 6 }, groupId: 'g1' },
+      { serviceId: 's2', position: { x: 100, y: 200 }, groupId: undefined },
+    ]);
+    expect(meta.edges).toEqual([]);
+    expect(meta.viewport).toEqual(viewport);
+  });
+
+  it('uses default group dimensions when style is missing', () => {
+    const bare = { id: 'g2', type: 'groupNode', position: { x: 0, y: 0 }, data: { title: 'bare' } } as GroupNodeType;
+    const meta = buildMetadataFromFlow([bare], { x: 0, y: 0, zoom: 1 });
+    expect(meta.groups[0].width).toBe(340);
+    expect(meta.groups[0].height).toBe(230);
+  });
+});

app/frontend/src/features/workspace/canvas/layout.ts

@@ -0,0 +1,156 @@
+import type { CanvasGroup, CanvasNodeLayout, ProjectCanvasMetadata } from '../model';
+import { NODE_HEIGHT, NODE_WIDTH } from './auto-layout';
+import type { GroupNodeType, ServiceNodeType } from './nodes';
+
+export type CanvasNode = ServiceNodeType | GroupNodeType;
+export type Rect = { x: number; y: number; w: number; h: number };
+
+export const GROUP_DEFAULT_WIDTH = 340;
+export const GROUP_DEFAULT_HEIGHT = 230;
+export const GROUP_PAD_X = 28;
+export const GROUP_PAD_TOP = 56;
+export const GROUP_PAD_BOTTOM = 24;
+export const GROUP_ROW_GAP = 16;
+export const GRID_STEP = 26;
+export const NODE_GAP = 14;
+
+export function rectsOverlap(a: Rect, b: Rect): boolean {
+  return (
+    a.x < b.x + b.w + NODE_GAP &&
+    a.x + a.w + NODE_GAP > b.x &&
+    a.y < b.y + b.h + NODE_GAP &&
+    a.y + a.h + NODE_GAP > b.y
+  );
+}
+
+// Nearest grid-aligned position where a node fits without touching any
+// occupied rect. Spiral-searches outward on the canvas lattice; falls back to
+// the given position when the neighbourhood is fully boxed in.
+export function resolveFreeSpot(
+  desired: { x: number; y: number },
+  occupied: Rect[],
+  fallback: { x: number; y: number },
+  bounds?: Rect,
+): { x: number; y: number } {
+  const snap = (v: number) => Math.round(v / GRID_STEP) * GRID_STEP;
+  const base = { x: snap(desired.x), y: snap(desired.y) };
+  const fits = (x: number, y: number) => {
+    if (bounds && (x < bounds.x || y < bounds.y || x + NODE_WIDTH > bounds.x + bounds.w || y + NODE_HEIGHT > bounds.y + bounds.h)) {
+      return false;
+    }
+    return !occupied.some((rect) => rectsOverlap({ x, y, w: NODE_WIDTH, h: NODE_HEIGHT }, rect));
+  };
+
+  if (fits(base.x, base.y)) {
+    return base;
+  }
+
+  for (let ring = 1; ring <= 12; ring++) {
+    for (let dx = -ring; dx <= ring; dx++) {
+      for (let dy = -ring; dy <= ring; dy++) {
+        if (Math.max(Math.abs(dx), Math.abs(dy)) !== ring) {
+          continue;
+        }
+        const x = base.x + dx * GRID_STEP;
+        const y = base.y + dy * GRID_STEP;
+        if (fits(x, y)) {
+          return { x, y };
+        }
+      }
+    }
+  }
+
+  return fallback;
+}
+
+// Where an incoming service lands inside a group frame. If the point already
+// fits inside the padded area, honour it. Otherwise append beneath the lowest
+// member and grow the frame just enough — keeps groups compact instead of
+// ballooning the frame to wherever the node used to sit.
+export function groupSlot(
+  nodes: CanvasNode[],
+  groupId: string,
+  group: CanvasNode,
+  desiredX: number,
+  desiredY: number,
+  ignoreServiceId?: string,
+): { x: number; y: number; width: number; height: number } {
+  const width = typeof group.style?.width === 'number' ? group.style.width : GROUP_DEFAULT_WIDTH;
+  const height = typeof group.style?.height === 'number' ? group.style.height : GROUP_DEFAULT_HEIGHT;
+
+  const members = nodes.filter(
+    (node) => node.type === 'serviceNode' && node.parentId === groupId && node.id !== ignoreServiceId,
+  );
+  const memberRects: Rect[] = members.map((node) => ({
+    x: node.position.x,
+    y: node.position.y,
+    w: NODE_WIDTH,
+    h: NODE_HEIGHT,
+  }));
+  const snap = (v: number) => Math.round(v / GRID_STEP) * GRID_STEP;
+  const snappedX = snap(desiredX);
+  const snappedY = snap(desiredY);
+  const snappedFits =
+    snappedX >= GROUP_PAD_X &&
+    snappedY >= GROUP_PAD_TOP &&
+    snappedX + NODE_WIDTH <= width - GROUP_PAD_X &&
+    snappedY + NODE_HEIGHT <= height - GROUP_PAD_BOTTOM;
+  const collides = memberRects.some((rect) =>
+    rectsOverlap({ x: snappedX, y: snappedY, w: NODE_WIDTH, h: NODE_HEIGHT }, rect),
+  );
+
+  if (snappedFits && !collides) {
+    return { x: snappedX, y: snappedY, width, height };
+  }
+
+  let bottom = GROUP_PAD_TOP - GROUP_ROW_GAP;
+  for (const node of nodes) {
+    if (node.type === 'serviceNode' && node.parentId === groupId && node.id !== ignoreServiceId) {
+      bottom = Math.max(bottom, node.position.y + NODE_HEIGHT);
+    }
+  }
+
+  const x = GROUP_PAD_X;
+  const y = bottom + GROUP_ROW_GAP;
+  return {
+    x,
+    y,
+    width: Math.max(width, x + NODE_WIDTH + GROUP_PAD_X),
+    height: Math.max(height, y + NODE_HEIGHT + GROUP_PAD_BOTTOM),
+  };
+}
+
+export function buildMetadataFromFlow(nodes: CanvasNode[], viewport: { x: number; y: number; zoom: number }): ProjectCanvasMetadata {
+  const groups: CanvasGroup[] = [];
+  const layouts: CanvasNodeLayout[] = [];
+
+  for (const node of nodes) {
+    if (node.type === 'groupNode') {
+      const width = typeof node.style?.width === 'number' ? node.style.width : GROUP_DEFAULT_WIDTH;
+      const height = typeof node.style?.height === 'number' ? node.style.height : GROUP_DEFAULT_HEIGHT;
+      groups.push({
+        id: node.id,
+        title: node.data.title,
+        position: node.position,
+        width,
+        height,
+      });
+      continue;
+    }
+
+    if (node.type === 'serviceNode') {
+      layouts.push({
+        serviceId: node.id,
+        position: node.position,
+        groupId: node.parentId,
+      });
+    }
+  }
+
+  return {
+    groups,
+    nodes: layouts,
+    edges: [],
+    viewport,
+  };
+}

app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx

@@ -8,12 +8,14 @@ import {
   createManagedDatabase,
   createService,
   getProjectById,
+  createProjectEnvironment,
   importComposeIntoProject,
   listConnectedGitRepositories,
   listGitBranches,
   listGitProviders,
   listGitRepositories,
   listProjectActivity,
+  listProjectEnvironments,
   listServiceLogs,
   listServiceVariables,
   listServicesByProject,
@@ -589,6 +591,22 @@ export function ProjectWorkspacePage() {
     () => (isDemoMode ? getDemoServicesByProject(projectId) : servicesQuery.data ?? []),
     [isDemoMode, projectId, servicesQuery.data],
   );
+  const environmentsQuery = useQuery({
+    queryKey: ['project-environments', projectId],
+    queryFn: () => listProjectEnvironments(projectId!),
+    enabled: !!projectId && !isDemoMode,
+  });
+  const [envFilter, setEnvFilter] = useState<string | null>(null);
+  const environments = environmentsQuery.data ?? [];
+  const visibleServices = useMemo(
+    () => (envFilter ? services.filter((s) => (s.environment ?? 'production') === envFilter) : services),
+    [services, envFilter],
+  );
+  const createEnvMutation = useMutation({
+    mutationFn: (name: string) => createProjectEnvironment(projectId!, name),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['project-environments', projectId] }),
+    onError: (err) => toast.showToast(err instanceof ApiError ? err.message : 'Failed to create environment', 'error'),
+  });
   const serviceIdFingerprint = services.map((service) => service.id).sort().join('|');
 
   const variablesQuery = useQuery({
@@ -850,18 +868,50 @@ export function ProjectWorkspacePage() {
 
                 {/* Service List */}
                 <div className="panel p-6">
-                  <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-3">Services</h3>
+                  <div className="flex items-center justify-between mb-3">
+                    <h3 className="text-sm font-medium text-[var(--text-secondary)]">Services</h3>
+                    {!isDemoMode && environments.length > 0 && (
+                      <div className="flex items-center gap-1.5 flex-wrap">
+                        <button
+                          onClick={() => setEnvFilter(null)}
+                          className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
+                            envFilter === null
+                              ? 'bg-[var(--accent-primary)] text-white'
+                              : 'bg-[var(--surface-muted)] text-[var(--text-secondary)] hover:bg-[var(--surface-card)]'
+                          }`}
+                        >
+                          All
+                        </button>
+                        {environments.map((env) => (
+                          <button
+                            key={env.id}
+                            onClick={() => setEnvFilter(envFilter === env.name ? null : env.name)}
+                            className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
+                              envFilter === env.name
+                                ? 'bg-[var(--accent-primary)] text-white'
+                                : 'bg-[var(--surface-muted)] text-[var(--text-secondary)] hover:bg-[var(--surface-card)]'
+                            }`}
+                          >
+                            {env.name} ({env.service_count})
+                          </button>
+                        ))}
+                        <EnvCreateButton onCreate={(name) => createEnvMutation.mutate(name)} pending={createEnvMutation.isPending} />
+                      </div>
+                    )}
+                  </div>
                   <div className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden divide-y divide-[var(--border-subtle)]">
-                    {services.length === 0 ? (
+                    {visibleServices.length === 0 ? (
                       <div className="p-8 text-center">
                         <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-[var(--surface-muted)] flex items-center justify-center">
                           <Layers size={20} className="text-[var(--text-tertiary)]" />
                         </div>
-                        <p className="text-sm text-[var(--text-secondary)]">No services deployed yet</p>
-                        <p className="text-xs text-[var(--text-muted)] mt-1">Add services from the Canvas view</p>
+                        <p className="text-sm text-[var(--text-secondary)]">
+                          {envFilter ? `No services in ${envFilter}` : 'No services deployed yet'}
+                        </p>
+                        {!envFilter && <p className="text-xs text-[var(--text-muted)] mt-1">Add services from the Canvas view</p>}
                       </div>
                     ) : (
-                      services.map((service) => (
+                      visibleServices.map((service) => (
                         <button
                           key={service.id}
                           onClick={() => navigate(serviceHref(service.id))}
@@ -1124,3 +1174,39 @@ export function ProjectWorkspacePage() {
     </div>
   );
 }
+
+// EnvCreateButton expands into an inline name input for a new environment.
+function EnvCreateButton({ onCreate, pending }: { onCreate: (name: string) => void; pending: boolean }) {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState('');
+  if (!open) {
+    return (
+      <button
+        onClick={() => setOpen(true)}
+        className="px-2.5 py-1 rounded-full text-xs font-medium border border-dashed border-[var(--border-subtle)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
+      >
+        + env
+      </button>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1">
+      <input
+        autoFocus
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && name.trim()) {
+            onCreate(name.trim());
+            setName('');
+            setOpen(false);
+          }
+          if (e.key === 'Escape') setOpen(false);
+        }}
+        placeholder="staging"
+        className="w-24 px-2 py-1 rounded-full text-xs bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-[var(--text-primary)] outline-none"
+      />
+      {pending && <Loader2 size={12} className="animate-spin text-[var(--text-muted)]" />}
+    </span>
+  );
+}

app/frontend/src/generated/api-types.ts

@@ -3698,6 +3698,167 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/notifications/channels": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** List push notification channels (ntfy/Gotify) */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description Channel list */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": {
+                            channels?: components["schemas"]["NotificationChannel"][];
+                        };
+                    };
+                };
+            };
+        };
+        put?: never;
+        /**
+         * Add a push notification channel
+         * @description ntfy endpoint should include the topic (e.g. https://ntfy.example.com/my-alerts); Gotify endpoint is the server base URL with the app token in `token`.
+         */
+        post: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody: {
+                content: {
+                    "application/json": {
+                        /** @enum {string} */
+                        kind: "ntfy" | "gotify";
+                        /** Format: uri */
+                        endpoint: string;
+                        /** @description ntfy access token (Bearer) or Gotify app token */
+                        token?: string;
+                    };
+                };
+            };
+            responses: {
+                /** @description Channel created */
+                201: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": {
+                            channel?: components["schemas"]["NotificationChannel"];
+                        };
+                    };
+                };
+                400: components["schemas"]["Error"];
+            };
+        };
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/notifications/channels/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post?: never;
+        /** Delete a push notification channel */
+        delete: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    id: string;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description Deleted */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["MessageResponse"];
+                    };
+                };
+                404: components["schemas"]["Error"];
+            };
+        };
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/notifications/channels/{id}/test": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Send a test notification through a push channel */
+        post: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    id: string;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description Test delivered */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["MessageResponse"];
+                    };
+                };
+                /** @description Push delivery failed */
+                502: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["Error"];
+                    };
+                };
+            };
+        };
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/webhooks": {
         parameters: {
             query?: never;
@@ -5472,6 +5633,90 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/setup/status": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * First-run setup status
+         * @description Public. Drives the setup wizard — needs_setup is true until setup_completed is recorded. Instances with users and projects that predate the wizard report completed automatically.
+         */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description Setup state */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": {
+                            has_users?: boolean;
+                            setup_completed?: boolean;
+                            needs_setup?: boolean;
+                            /** @description GitHub App credentials configured (manifest flow or env) */
+                            has_github_app?: boolean;
+                            /** @description Cloudflare tunnel token configured */
+                            has_tunnel?: boolean;
+                            signup_enabled?: boolean;
+                        };
+                    };
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/setup/complete": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Mark the setup wizard complete */
+        post: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description Setup completed */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["MessageResponse"];
+                    };
+                };
+            };
+        };
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/settings": {
         parameters: {
             query?: never;
@@ -9391,6 +9636,137 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/projects/{id}/environments": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * List project environments
+         * @description Returns each environment lane with a live service count — the data behind the environment switcher.
+         */
+        get: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    /** @description Project ID */
+                    id: components["parameters"]["ProjectIdParam"];
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description Project environments */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": {
+                            environments?: components["schemas"]["ProjectEnvironment"][];
+                        };
+                    };
+                };
+            };
+        };
+        put?: never;
+        /**
+         * Create an environment
+         * @description Adds a named environment lane. Names are lowercase alphanumeric with dashes, 1-50 chars, unique per project.
+         */
+        post: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    /** @description Project ID */
+                    id: components["parameters"]["ProjectIdParam"];
+                };
+                cookie?: never;
+            };
+            requestBody: {
+                content: {
+                    "application/json": {
+                        name: string;
+                    };
+                };
+            };
+            responses: {
+                /** @description Created environment */
+                201: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": {
+                            environment?: components["schemas"]["ProjectEnvironment"];
+                        };
+                    };
+                };
+                /** @description Environment already exists */
+                409: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/environments/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post?: never;
+        /**
+         * Delete an empty environment
+         * @description Removes an environment lane; fails with 409 while it still holds services.
+         */
+        delete: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    id: string;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description Environment deleted */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+                /** @description Environment still contains services */
+                409: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/projects/{id}/preview-environments": {
         parameters: {
             query?: never;
@@ -11693,6 +12069,17 @@ export interface components {
             notifications?: components["schemas"]["Notification"][];
             unread?: number;
         };
+        NotificationChannel: {
+            /** Format: uuid */
+            id?: string;
+            /** @enum {string} */
+            kind?: "ntfy" | "gotify";
+            /** Format: uri */
+            endpoint?: string;
+            enabled?: boolean;
+            /** Format: date-time */
+            created_at?: string;
+        };
         OutboundWebhook: {
             /** Format: uuid */
             id?: string;
@@ -12488,6 +12875,18 @@ export interface components {
             restart_policy?: Record<string, never>;
             health_check?: Record<string, never>;
         };
+        ProjectEnvironment: {
+            /** Format: uuid */
+            id?: string;
+            name?: string;
+            /** Format: uuid */
+            project_id?: string;
+            service_count?: number;
+            /** Format: date-time */
+            created_at?: string;
+            /** Format: date-time */
+            updated_at?: string;
+        };
         PreviewEnvironment: {
             /** Format: uuid */
             id?: string;

app/frontend/src/lib/api-client.ts

@@ -490,6 +490,32 @@ export function getApiBaseUrl(): string {
   return API_BASE;
 }
 
+// pingServer hits the public /health route — any HTTP response proves
+// reachability, and no auth means no 401 noise in the connectivity probe.
+export async function pingServer(): Promise<void> {
+  const res = await fetch(`${API_ROOT}/health`);
+  if (!res.ok) {
+    throw new Error(`Server returned ${res.status}`);
+  }
+}
+
+export type SetupStatus = {
+  has_users: boolean;
+  setup_completed: boolean;
+  needs_setup: boolean;
+  has_github_app: boolean;
+  has_tunnel: boolean;
+  signup_enabled: boolean;
+};
+
+export async function getSetupStatus(): Promise<SetupStatus> {
+  return requestJson<SetupStatus>('/setup/status');
+}
+
+export async function completeSetup(): Promise<void> {
+  await requestJson('/setup/complete', { method: 'POST', body: JSON.stringify({}) });
+}
+
 export function getAgentPublicBaseUrl(): string {
   return `${API_ROOT}/api/agents`;
 }
@@ -1321,6 +1347,34 @@ export async function listServicesByProject(projectId: string): Promise<ServiceE
   return normalizeServiceArray(rows);
 }
 
+export interface ProjectEnvironment {
+  id: string;
+  name: string;
+  project_id: string;
+  service_count: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export async function listProjectEnvironments(projectId: string): Promise<ProjectEnvironment[]> {
+  const payload = await requestJson<{ environments?: ProjectEnvironment[] }>(
+    `/projects/${projectId}/environments`,
+  );
+  return payload.environments ?? [];
+}
+
+export async function createProjectEnvironment(projectId: string, name: string): Promise<ProjectEnvironment> {
+  const payload = await requestJson<{ environment: ProjectEnvironment }>(
+    `/projects/${projectId}/environments`,
+    { method: 'POST', body: JSON.stringify({ name }) },
+  );
+  return payload.environment;
+}
+
+export async function deleteProjectEnvironment(environmentId: string): Promise<void> {
+  await requestJson(`/environments/${encodeURIComponent(environmentId)}`, { method: 'DELETE' });
+}
+
 export async function getServiceById(serviceId: string): Promise<ServiceEntity> {
   const payload = await requestJson<RawService | { service?: RawService }>(`/services/${serviceId}`);
   const row = (payload as { service?: RawService }).service ?? (payload as RawService);
@@ -2568,6 +2622,42 @@ export async function markAllNotificationsRead(): Promise<void> {
   await requestJson('/notifications/read-all', { method: 'POST' });
 }
 
+export type NotificationChannel = {
+  id: string;
+  kind: 'ntfy' | 'gotify';
+  endpoint: string;
+  enabled: boolean;
+  created_at: string;
+};
+
+export async function listNotificationChannels(): Promise<NotificationChannel[]> {
+  const payload = await requestJson<{ channels?: NotificationChannel[] }>('/notifications/channels');
+  return payload.channels ?? [];
+}
+
+export async function createNotificationChannel(input: {
+  kind: 'ntfy' | 'gotify';
+  endpoint: string;
+  token?: string;
+}): Promise<NotificationChannel> {
+  const payload = await requestJson<{ channel: NotificationChannel }>('/notifications/channels', {
+    method: 'POST',
+    body: JSON.stringify(input),
+  });
+  return payload.channel;
+}
+
+export async function deleteNotificationChannel(id: string): Promise<void> {
+  await requestJson(`/notifications/channels/${encodeURIComponent(id)}`, { method: 'DELETE' });
+}
+
+export async function testNotificationChannel(id: string): Promise<void> {
+  await requestJson(`/notifications/channels/${encodeURIComponent(id)}/test`, {
+    method: 'POST',
+    body: JSON.stringify({}),
+  });
+}
+
 export type PreviewEnvironmentEntity = components['schemas']['PreviewEnvironment'];
 
 export async function listPreviewEnvironments(projectId: string): Promise<PreviewEnvironmentEntity[]> {

app/frontend/src/main.tsx

@@ -1,6 +1,8 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
 import { BrowserRouter } from 'react-router-dom';
 import App from './app/App';
 import { ToastProvider } from './shared/components';
@@ -12,18 +14,49 @@ const queryClient = new QueryClient({
       staleTime: 30_000,
       retry: 1,
       refetchOnWindowFocus: false,
+      // Serve the persisted snapshot while offline instead of erroring.
+      networkMode: 'offlineFirst',
     },
   },
 });
 
+// High-churn or bulky keys never hit localStorage — a stale log tail is
+// worse than none.
+const NEVER_PERSIST = new Set([
+  'shell-notifications',
+  'notifications',
+  'service-logs',
+  'logs',
+  'activity',
+  'audit-logs',
+  'audit',
+  'metrics',
+  'connectivity',
+]);
+
+const persister = createSyncStoragePersister({
+  storage: window.localStorage,
+  key: 'containr-query-cache-v1',
+});
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{
+        persister,
+        maxAge: 24 * 60 * 60 * 1000,
+        dehydrateOptions: {
+          shouldDehydrateQuery: (q) =>
+            q.state.status === 'success' && !NEVER_PERSIST.has(String(q.queryKey[0])),
+        },
+      }}
+    >
       <BrowserRouter>
         <ToastProvider>
           <App />
         </ToastProvider>
       </BrowserRouter>
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   </StrictMode>,
 );

app/mobile/package-lock.json

@@ -9,11 +9,15 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/vector-icons": "^15.0.2",
+        "@react-native-async-storage/async-storage": "2.2.0",
+        "@tanstack/query-async-storage-persister": "^5.104.1",
         "@tanstack/react-query": "^5.104.1",
+        "@tanstack/react-query-persist-client": "^5.104.1",
         "expo": "~57.0.27",
         "expo-constants": "~57.0.21",
         "expo-font": "~57.0.4",
         "expo-linking": "~57.0.12",
+        "expo-network": "~57.0.2",
         "expo-router": "~57.0.25",
         "expo-secure-store": "~57.0.4",
         "expo-status-bar": "~57.0.1",
@@ -2165,6 +2169,18 @@
         }
       }
     },
+    "node_modules/@react-native-async-storage/async-storage": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz",
+      "integrity": "sha512-gvRvjR5JAaUZF8tv2Kcq/Gbt3JHwbKFYfmb445rhOj6NUMx3qPLixmDx5pZAyb9at1bYvJ4/eTUipU5aki45xw==",
+      "license": "MIT",
+      "dependencies": {
+        "merge-options": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react-native": "^0.0.0-0 || >=0.65 <1.0"
+      }
+    },
     "node_modules/@react-native-masked-view/masked-view": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@react-native-masked-view/masked-view/-/masked-view-0.3.2.tgz",
@@ -2469,6 +2485,20 @@
       "integrity": "sha512-hhyNJ+nbR6ZR7pToHvllEFun9TL0sbL+tk/ON75lo+Xas054uez98qRbsuNt7MBCyZKK4+8Yli/OAGZhmfBZ/g==",
       "license": "MIT"
     },
+    "node_modules/@tanstack/query-async-storage-persister": {
+      "version": "5.104.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-async-storage-persister/-/query-async-storage-persister-5.104.1.tgz",
+      "integrity": "sha512-wSs/HrangoSMVW3zLifawRT9lA+fbiilPQmaY+YhxBOM/VS9oqx+MQvROHpW+hKwDpdvFmhyBjWiyDhTHL1YXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.104.1",
+        "@tanstack/query-persist-client-core": "5.104.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.104.1",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.104.1.tgz",
@@ -2479,6 +2509,19 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/query-persist-client-core": {
+      "version": "5.104.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.104.1.tgz",
+      "integrity": "sha512-ONiadXqe56iNrw6RESqKILpTIVG9ZMI/DageTQnrBDt/nZ6WiP4G13iIiMwJEsiO12gQ3Gychx8tcFIPw4k25g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.104.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/react-query": {
       "version": "5.104.1",
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.104.1.tgz",
@@ -2495,6 +2538,23 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-query-persist-client": {
+      "version": "5.104.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.104.1.tgz",
+      "integrity": "sha512-kU3YaqjkwEUzUUfPF0JVg56d6gJKWHaFVqOlQztwc4C2IT0P5sv/23orrSoQqjxKaUe6Ejw5IIQtA/G12uNmow==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-persist-client-core": "5.104.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.104.1",
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.4.tgz",
@@ -5416,6 +5476,16 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-network": {
+      "version": "57.0.2",
+      "resolved": "https://registry.npmjs.org/expo-network/-/expo-network-57.0.2.tgz",
+      "integrity": "sha512-BfK1kdftZcM6o9o1FAG7/y0l6vWX0n8td0M5lwkvaMeRXZ9LkRwOi9CQXwvsMTQGQiPwtQXgwiAze13cqjt75g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*"
+      }
+    },
     "node_modules/expo-router": {
       "version": "57.0.25",
       "resolved": "https://registry.npmjs.org/expo-router/-/expo-router-57.0.25.tgz",
@@ -7084,6 +7154,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -7968,6 +8047,18 @@
       "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
       "license": "MIT"
     },
+    "node_modules/merge-options": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
+      "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-obj": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",

app/mobile/package.json

@@ -4,11 +4,15 @@
   "main": "expo-router/entry",
   "dependencies": {
     "@expo/vector-icons": "^15.0.2",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@tanstack/query-async-storage-persister": "^5.104.1",
     "@tanstack/react-query": "^5.104.1",
+    "@tanstack/react-query-persist-client": "^5.104.1",
     "expo": "~57.0.27",
     "expo-constants": "~57.0.21",
     "expo-font": "~57.0.4",
     "expo-linking": "~57.0.12",
+    "expo-network": "~57.0.2",
     "expo-router": "~57.0.25",
     "expo-secure-store": "~57.0.4",
     "expo-status-bar": "~57.0.1",

app/mobile/src/api.ts

@@ -94,6 +94,38 @@ export interface AppNotification {
   created_at?: string;
 }
 
+export interface NotificationChannel {
+  id: string;
+  kind: 'ntfy' | 'gotify';
+  endpoint: string;
+  enabled: boolean;
+  created_at?: string;
+}
+
+export interface CronJob {
+  id: string;
+  service_id?: string;
+  name: string;
+  schedule: string;
+  command: string;
+  timezone?: string;
+  enabled?: boolean;
+  last_run_at?: string;
+  next_run_at?: string;
+  last_status?: string;
+  last_output?: string;
+}
+
+export interface CronExecution {
+  id: string;
+  cron_job_id: string;
+  started_at?: string;
+  finished_at?: string;
+  status?: string;
+  output?: string;
+  error?: string;
+}
+
 // Masked value the API returns for secret variables; echoing it back on
 // update preserves the stored ciphertext.
 export const MASKED_SECRET = '********';
@@ -238,6 +270,51 @@ export class Api {
     return this.req<unknown>('POST', '/notifications/read-all');
   }
 
+  notificationChannels() {
+    return this.req<{ channels: NotificationChannel[] }>(
+      'GET',
+      '/notifications/channels',
+    ).then((r) => r.channels ?? []);
+  }
+
+  addNotificationChannel(input: {
+    kind: 'ntfy' | 'gotify';
+    endpoint: string;
+    token?: string;
+  }) {
+    return this.req<{ channel: NotificationChannel }>(
+      'POST',
+      '/notifications/channels',
+      input,
+    );
+  }
+
+  deleteNotificationChannel(id: string) {
+    return this.req<unknown>('DELETE', `/notifications/channels/${id}`);
+  }
+
+  testNotificationChannel(id: string) {
+    return this.req<unknown>('POST', `/notifications/channels/${id}/test`, {});
+  }
+
+  cronJobs(serviceId: string) {
+    return this.req<{ cron_jobs: CronJob[] }>(
+      'GET',
+      `/cron-jobs?service_id=${serviceId}`,
+    ).then((r) => r.cron_jobs ?? []);
+  }
+
+  cronExecutions(jobId: string) {
+    return this.req<{ executions: CronExecution[] }>(
+      'GET',
+      `/cron-jobs/${jobId}/executions`,
+    ).then((r) => r.executions ?? []);
+  }
+
+  triggerCronJob(jobId: string) {
+    return this.req<unknown>('POST', `/cron-jobs/${jobId}/trigger`, {});
+  }
+
   serviceDeployments(id: string) {
     return this.req<{ deployments: Deployment[] }>(
       'GET',

app/mobile/src/app/(tabs)/_layout.tsx

@@ -1,10 +1,39 @@
 import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
 import { Tabs } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { useQuery } from '@tanstack/react-query';
+import * as Network from 'expo-network';
 import { useApi } from '../../session';
 import { colors } from '../../theme';
 
+// OfflineBanner pings /health every 15s; expo-network gives a fast local
+// signal, the ping catches "device online but instance down".
+function OfflineBanner() {
+  const api = useApi();
+  const net = useQuery({
+    queryKey: ['connectivity', 'net'],
+    queryFn: async () => (await Network.getNetworkStateAsync()).isConnected !== false,
+    refetchInterval: 15_000,
+  });
+  const ping = useQuery({
+    queryKey: ['connectivity', 'ping'],
+    queryFn: () => api.ping(),
+    refetchInterval: 15_000,
+    retry: 0,
+    networkMode: 'always',
+  });
+  if (net.data !== false && ping.data !== false && !ping.isError) return null;
+  return (
+    <View style={styles.banner}>
+      <Ionicons name="cloud-offline-outline" size={13} color={colors.warn} />
+      <Text style={styles.bannerText}>
+        {net.data === false ? 'No connection' : 'Instance unreachable'} — showing last-known data
+      </Text>
+    </View>
+  );
+}
+
 export default function TabsLayout() {
   const api = useApi();
   const notifs = useQuery({
@@ -15,7 +44,9 @@ export default function TabsLayout() {
   const unread = notifs.data?.unread ?? 0;
 
   return (
-    <Tabs
+    <View style={{ flex: 1 }}>
+      <OfflineBanner />
+      <Tabs
       screenOptions={{
         headerStyle: { backgroundColor: colors.bg },
         headerTintColor: colors.text,
@@ -70,6 +101,21 @@ export default function TabsLayout() {
           ),
         }}
       />
-    </Tabs>
+      </Tabs>
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  banner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    paddingVertical: 6,
+    backgroundColor: colors.surface,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.warn,
+  },
+  bannerText: { color: colors.textDim, fontSize: 11 },
+});

app/mobile/src/app/(tabs)/notifications.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { FlatList, RefreshControl, StyleSheet, Text, View } from 'react-native';
+import React, { useState } from 'react';
+import { FlatList, RefreshControl, StyleSheet, Text, TextInput, View } from 'react-native';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useApi } from '../../session';
 import { colors } from '../../theme';
 import { relTime } from '../../time';
-import { ActionButton, Card, Empty, ErrorBox, Loading } from '../../components';
+import { ActionButton, Card, Empty, ErrorBox, Loading, SectionTitle } from '../../components';
 
 const KIND_COLOR: Record<string, string> = {
   deployment_failed: colors.err,
@@ -59,6 +59,7 @@ export default function Notifications() {
         ) : null
       }
       ListEmptyComponent={<Empty text="No notifications" />}
+      ListFooterComponent={<PushChannelsCard />}
       data={items}
       keyExtractor={(n) => n.id}
       renderItem={({ item }) => {
@@ -96,6 +97,122 @@ export default function Notifications() {
   );
 }
 
+function PushChannelsCard() {
+  const api = useApi();
+  const qc = useQueryClient();
+  const channels = useQuery({
+    queryKey: ['notification-channels'],
+    queryFn: () => api.notificationChannels(),
+  });
+  const [kind, setKind] = useState<'ntfy' | 'gotify'>('ntfy');
+  const [endpoint, setEndpoint] = useState('');
+  const [token, setToken] = useState('');
+  const [adding, setAdding] = useState(false);
+
+  const invalidate = () => qc.invalidateQueries({ queryKey: ['notification-channels'] });
+  const add = useMutation({
+    mutationFn: () =>
+      api.addNotificationChannel({
+        kind,
+        endpoint: endpoint.trim(),
+        token: token.trim() || undefined,
+      }),
+    onSuccess: () => {
+      setEndpoint('');
+      setToken('');
+      setAdding(false);
+      invalidate();
+    },
+  });
+  const remove = useMutation({
+    mutationFn: (id: string) => api.deleteNotificationChannel(id),
+    onSuccess: invalidate,
+  });
+  const test = useMutation({
+    mutationFn: (id: string) => api.testNotificationChannel(id),
+  });
+
+  const list = channels.data ?? [];
+
+  return (
+    <View style={{ marginTop: 24 }}>
+      <SectionTitle>Push channels</SectionTitle>
+      <Card>
+        <Text style={styles.hint}>
+          Relay alerts to a self-hosted ntfy or Gotify server — your phone gets pushes via the ntfy app, no account required here.
+        </Text>
+        {list.map((ch) => (
+          <View key={ch.id} style={styles.channelRow}>
+            <View style={{ flex: 1 }}>
+              <Text style={styles.channelKind}>{ch.kind.toUpperCase()}</Text>
+              <Text style={styles.channelEndpoint} numberOfLines={1}>
+                {ch.endpoint}
+              </Text>
+            </View>
+            <Text
+              style={styles.channelAction}
+              onPress={() => test.mutate(ch.id)}
+            >
+              {test.isPending ? '…' : 'Test'}
+            </Text>
+            <Text
+              style={[styles.channelAction, { color: colors.err }]}
+              onPress={() => remove.mutate(ch.id)}
+            >
+              Remove
+            </Text>
+          </View>
+        ))}
+        {adding ? (
+          <View style={{ marginTop: 8 }}>
+            <View style={styles.kindRow}>
+              {(['ntfy', 'gotify'] as const).map((k) => (
+                <Text
+                  key={k}
+                  style={[styles.kindChip, kind === k && styles.kindChipActive]}
+                  onPress={() => setKind(k)}
+                >
+                  {k}
+                </Text>
+              ))}
+            </View>
+            <TextInput
+              style={styles.input}
+              value={endpoint}
+              onChangeText={setEndpoint}
+              placeholder={kind === 'ntfy' ? 'https://ntfy.example.com/my-alerts' : 'https://gotify.example.com'}
+              placeholderTextColor={colors.textDim}
+              autoCapitalize="none"
+              autoCorrect={false}
+              keyboardType="url"
+            />
+            <TextInput
+              style={styles.input}
+              value={token}
+              onChangeText={setToken}
+              placeholder={kind === 'ntfy' ? 'Access token (optional)' : 'App token'}
+              placeholderTextColor={colors.textDim}
+              autoCapitalize="none"
+              autoCorrect={false}
+              secureTextEntry
+            />
+            {add.error ? <ErrorBox error={add.error} /> : null}
+            <ActionButton
+              label={add.isPending ? 'Adding…' : 'Add channel'}
+              disabled={add.isPending || !endpoint.trim()}
+              onPress={() => add.mutate()}
+            />
+          </View>
+        ) : (
+          <Text style={styles.channelAction} onPress={() => setAdding(true)}>
+            + Add channel
+          </Text>
+        )}
+      </Card>
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   root: { flex: 1, backgroundColor: colors.bg },
   row: { flexDirection: 'row', alignItems: 'flex-start' },
@@ -104,4 +221,13 @@ const styles = StyleSheet.create({
   body: { color: colors.textDim, fontSize: 13, marginTop: 4, lineHeight: 18 },
   meta: { color: colors.textDim, fontSize: 11, marginTop: 6 },
   markRead: { color: colors.accent, fontSize: 12, fontWeight: '600', marginLeft: 8 },
+  hint: { color: colors.textDim, fontSize: 12, lineHeight: 17, marginBottom: 8 },
+  channelRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8, borderTopWidth: 1, borderTopColor: colors.border },
+  channelKind: { color: colors.text, fontSize: 12, fontWeight: '700' },
+  channelEndpoint: { color: colors.textDim, fontSize: 12, marginTop: 2 },
+  channelAction: { color: colors.accent, fontSize: 12, fontWeight: '600', marginLeft: 12 },
+  kindRow: { flexDirection: 'row', gap: 8, marginBottom: 8 },
+  kindChip: { color: colors.textDim, fontSize: 13, paddingVertical: 4, paddingHorizontal: 12, borderRadius: 12, borderWidth: 1, borderColor: colors.border },
+  kindChipActive: { color: colors.accent, borderColor: colors.accent },
+  input: { color: colors.text, fontSize: 14, borderWidth: 1, borderColor: colors.border, borderRadius: 8, paddingHorizontal: 10, paddingVertical: 8, marginBottom: 8 },
 });

app/mobile/src/app/_layout.tsx

@@ -1,16 +1,28 @@
 import React, { useEffect } from 'react';
 import { Stack, useRouter, useSegments } from 'expo-router';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { StatusBar } from 'expo-status-bar';
 import { SessionProvider, useSession } from '../session';
 import { colors } from '../theme';
 
 const queryClient = new QueryClient({
   defaultOptions: {
-    queries: { staleTime: 15_000, retry: 1 },
+    queries: { staleTime: 15_000, retry: 1, networkMode: 'offlineFirst' },
   },
 });
 
+// High-churn keys never hit disk — a stale notification count or log
+// tail is worse than none.
+const NEVER_PERSIST = new Set(['notifications', 'notification-channels', 'logs', 'connectivity']);
+
+const persister = createAsyncStoragePersister({
+  storage: AsyncStorage,
+  key: 'containr-query-cache-v1',
+});
+
 function AuthGate() {
   const { ready, api } = useSession();
   const segments = useSegments();
@@ -39,6 +51,7 @@ function AuthGate() {
         <Stack.Screen name="service/logs" options={{ title: 'Logs' }} />
         <Stack.Screen name="service/variables" options={{ title: 'Variables' }} />
         <Stack.Screen name="service/domains" options={{ title: 'Domains' }} />
+        <Stack.Screen name="service/cron" options={{ title: 'Cron jobs' }} />
         <Stack.Screen name="service/settings" options={{ title: 'Service settings' }} />
       </Stack.Protected>
       <Stack.Screen name="login" options={{ headerShown: false }} />
@@ -48,11 +61,21 @@ function AuthGate() {
 
 export default function RootLayout() {
   return (
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{
+        persister,
+        maxAge: 7 * 24 * 60 * 60 * 1000,
+        dehydrateOptions: {
+          shouldDehydrateQuery: (q) =>
+            q.state.status === 'success' && !NEVER_PERSIST.has(String(q.queryKey[0])),
+        },
+      }}
+    >
       <SessionProvider>
         <StatusBar style="light" />
         <AuthGate />
       </SessionProvider>
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   );
 }

app/mobile/src/app/service/[id].tsx

@@ -157,6 +157,11 @@ export default function ServiceDetail() {
           subtitle={s.domain ?? 'Hostnames routed to this service'}
           onPress={() => router.push(`/service/domains?id=${s.id}`)}
         />
+        <Row
+          title="Cron jobs"
+          subtitle="Schedules, run now, history"
+          onPress={() => router.push(`/service/cron?id=${s.id}`)}
+        />
         <Row
           title="Scale & sleep"
           subtitle={`${s.replicas ?? 1} replica${(s.replicas ?? 1) === 1 ? '' : 's'}` +

app/mobile/src/app/service/cron.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { Alert, RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useLocalSearchParams } from 'expo-router';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useApi } from '../../session';
+import { colors } from '../../theme';
+import { relTime } from '../../time';
+import {
+  ActionButton,
+  Card,
+  Empty,
+  ErrorBox,
+  Loading,
+  StatusBadge,
+} from '../../components';
+
+export default function ServiceCron() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const api = useApi();
+  const qc = useQueryClient();
+  const [historyFor, setHistoryFor] = useState<string | null>(null);
+
+  const jobs = useQuery({
+    queryKey: ['service-cron', id],
+    queryFn: () => api.cronJobs(id!),
+    enabled: !!id,
+    refetchInterval: 15_000,
+  });
+  const executions = useQuery({
+    queryKey: ['cron-executions', historyFor],
+    queryFn: () => api.cronExecutions(historyFor!),
+    enabled: !!historyFor,
+  });
+
+  const trigger = useMutation({
+    mutationFn: (jobId: string) => api.triggerCronJob(jobId),
+    onSuccess: (_d, jobId) => {
+      qc.invalidateQueries({ queryKey: ['service-cron', id] });
+      setHistoryFor(jobId);
+      setTimeout(
+        () => qc.invalidateQueries({ queryKey: ['cron-executions', jobId] }),
+        2000,
+      );
+    },
+    onError: (e) =>
+      Alert.alert('Trigger failed', e instanceof Error ? e.message : String(e)),
+  });
+
+  if (jobs.isLoading) return <Loading />;
+  if (jobs.error) return <ErrorBox error={jobs.error} />;
+
+  const list = jobs.data ?? [];
+
+  return (
+    <ScrollView
+      style={styles.root}
+      contentContainerStyle={{ padding: 16 }}
+      refreshControl={
+        <RefreshControl
+          refreshing={jobs.isRefetching}
+          onRefresh={() => jobs.refetch()}
+          tintColor={colors.accent}
+        />
+      }
+    >
+      {list.length === 0 ? <Empty text="No cron jobs on this service" /> : null}
+      {list.map((job) => (
+        <Card key={job.id}>
+          <View style={styles.jobHead}>
+            <View style={{ flex: 1 }}>
+              <Text style={styles.jobName}>{job.name}</Text>
+              <Text style={styles.meta}>
+                {job.schedule}
+                {job.timezone ? ` · ${job.timezone}` : ''}
+                {job.enabled === false ? ' · disabled' : ''}
+              </Text>
+              <Text style={styles.cmd} numberOfLines={1}>
+                {job.command}
+              </Text>
+              <Text style={styles.meta}>
+                {job.last_run_at ? `last ${relTime(job.last_run_at)}` : 'never run'}
+                {job.next_run_at ? ` · next ${relTime(job.next_run_at)}` : ''}
+              </Text>
+            </View>
+            {job.last_status ? <StatusBadge status={job.last_status} /> : null}
+          </View>
+          <View style={styles.jobActions}>
+            <ActionButton
+              label="Run now"
+              kind="primary"
+              disabled={trigger.isPending}
+              onPress={() => trigger.mutate(job.id)}
+            />
+            <ActionButton
+              label={historyFor === job.id ? 'Hide history' : 'History'}
+              onPress={() => setHistoryFor(historyFor === job.id ? null : job.id)}
+            />
+          </View>
+          {historyFor === job.id ? (
+            <View style={styles.history}>
+              {executions.isLoading ? (
+                <Loading />
+              ) : (executions.data ?? []).length === 0 ? (
+                <Text style={styles.meta}>No executions yet</Text>
+              ) : (
+                (executions.data ?? []).slice(0, 10).map((ex) => (
+                  <View key={ex.id} style={styles.execRow}>
+                    <View style={{ flex: 1 }}>
+                      <Text style={styles.execTime}>{relTime(ex.started_at)}</Text>
+                      {ex.error ? (
+                        <Text style={styles.execErr} numberOfLines={2}>
+                          {ex.error}
+                        </Text>
+                      ) : ex.output ? (
+                        <Text style={styles.execOut} numberOfLines={2}>
+                          {ex.output}
+                        </Text>
+                      ) : null}
+                    </View>
+                    <StatusBadge status={ex.status ?? 'unknown'} />
+                  </View>
+                ))
+              )}
+            </View>
+          ) : null}
+        </Card>
+      ))}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: colors.bg },
+  jobHead: { flexDirection: 'row', alignItems: 'flex-start' },
+  jobName: { color: colors.text, fontSize: 15, fontWeight: '600' },
+  meta: { color: colors.textDim, fontSize: 11, marginTop: 3 },
+  cmd: { color: colors.textDim, fontSize: 12, fontFamily: 'monospace', marginTop: 4 },
+  jobActions: { flexDirection: 'row', gap: 8, marginTop: 10 },
+  history: { marginTop: 10, borderTopWidth: 1, borderTopColor: colors.border, paddingTop: 8 },
+  execRow: { flexDirection: 'row', alignItems: 'flex-start', paddingVertical: 6 },
+  execTime: { color: colors.text, fontSize: 12 },
+  execErr: { color: colors.err, fontSize: 11, marginTop: 2 },
+  execOut: { color: colors.textDim, fontSize: 11, marginTop: 2 },
+});

docs/api/openapi.yaml

@@ -2474,6 +2474,114 @@ paths:
               schema:
                 $ref: '#/components/schemas/MessageResponse'
 
+  /notifications/channels:
+    get:
+      tags:
+        - Notifications
+      summary: List push notification channels (ntfy/Gotify)
+      security:
+        - bearerAuth: []
+      responses:
+        '200':
+          description: Channel list
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  channels:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/NotificationChannel'
+    post:
+      tags:
+        - Notifications
+      summary: Add a push notification channel
+      description: ntfy endpoint should include the topic (e.g. https://ntfy.example.com/my-alerts); Gotify endpoint is the server base URL with the app token in `token`.
+      security:
+        - bearerAuth: []
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [kind, endpoint]
+              properties:
+                kind:
+                  type: string
+                  enum: [ntfy, gotify]
+                endpoint:
+                  type: string
+                  format: uri
+                token:
+                  type: string
+                  description: ntfy access token (Bearer) or Gotify app token
+      responses:
+        '201':
+          description: Channel created
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  channel:
+                    $ref: '#/components/schemas/NotificationChannel'
+        '400':
+          $ref: '#/components/schemas/Error'
+
+  /notifications/channels/{id}:
+    delete:
+      tags:
+        - Notifications
+      summary: Delete a push notification channel
+      security:
+        - bearerAuth: []
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema:
+            type: string
+            format: uuid
+      responses:
+        '200':
+          description: Deleted
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/MessageResponse'
+        '404':
+          $ref: '#/components/schemas/Error'
+
+  /notifications/channels/{id}/test:
+    post:
+      tags:
+        - Notifications
+      summary: Send a test notification through a push channel
+      security:
+        - bearerAuth: []
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema:
+            type: string
+            format: uuid
+      responses:
+        '200':
+          description: Test delivered
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/MessageResponse'
+        '502':
+          description: Push delivery failed
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+
   # Outbound Webhooks
   /webhooks:
     get:
@@ -3597,6 +3705,50 @@ paths:
                     type: boolean
                     description: True when the owner re-opened public registration in Settings
 
+  /setup/status:
+    get:
+      tags:
+        - Authentication
+      summary: First-run setup status
+      description: Public. Drives the setup wizard — needs_setup is true until setup_completed is recorded. Instances with users and projects that predate the wizard report completed automatically.
+      responses:
+        '200':
+          description: Setup state
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  has_users:
+                    type: boolean
+                  setup_completed:
+                    type: boolean
+                  needs_setup:
+                    type: boolean
+                  has_github_app:
+                    type: boolean
+                    description: GitHub App credentials configured (manifest flow or env)
+                  has_tunnel:
+                    type: boolean
+                    description: Cloudflare tunnel token configured
+                  signup_enabled:
+                    type: boolean
+
+  /setup/complete:
+    post:
+      tags:
+        - Authentication
+      summary: Mark the setup wizard complete
+      security:
+        - bearerAuth: []
+      responses:
+        '200':
+          description: Setup completed
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/MessageResponse'
+
   /settings:
     get:
       tags:
@@ -5939,6 +6091,82 @@ paths:
               schema:
                 $ref: '#/components/schemas/Error'
 
+  # Environments
+  /projects/{id}/environments:
+    get:
+      tags:
+        - Environments
+      summary: List project environments
+      description: Returns each environment lane with a live service count — the data behind the environment switcher.
+      security:
+        - bearerAuth: []
+      parameters:
+        - $ref: '#/components/parameters/ProjectIdParam'
+      responses:
+        '200':
+          description: Project environments
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  environments:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/ProjectEnvironment'
+    post:
+      tags:
+        - Environments
+      summary: Create an environment
+      description: Adds a named environment lane. Names are lowercase alphanumeric with dashes, 1-50 chars, unique per project.
+      security:
+        - bearerAuth: []
+      parameters:
+        - $ref: '#/components/parameters/ProjectIdParam'
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [name]
+              properties:
+                name:
+                  type: string
+      responses:
+        '201':
+          description: Created environment
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  environment:
+                    $ref: '#/components/schemas/ProjectEnvironment'
+        '409':
+          description: Environment already exists
+
+  /environments/{id}:
+    delete:
+      tags:
+        - Environments
+      summary: Delete an empty environment
+      description: Removes an environment lane; fails with 409 while it still holds services.
+      security:
+        - bearerAuth: []
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema:
+            type: string
+            format: uuid
+      responses:
+        '200':
+          description: Environment deleted
+        '409':
+          description: Environment still contains services
+
   # Preview environments
   /projects/{id}/preview-environments:
     get:
@@ -8082,6 +8310,24 @@ components:
         unread:
           type: integer
 
+    NotificationChannel:
+      type: object
+      properties:
+        id:
+          type: string
+          format: uuid
+        kind:
+          type: string
+          enum: [ntfy, gotify]
+        endpoint:
+          type: string
+          format: uri
+        enabled:
+          type: boolean
+        created_at:
+          type: string
+          format: date-time
+
     OutboundWebhook:
       type: object
       properties:
@@ -9552,6 +9798,26 @@ components:
         health_check:
           type: object
 
+    ProjectEnvironment:
+      type: object
+      properties:
+        id:
+          type: string
+          format: uuid
+        name:
+          type: string
+        project_id:
+          type: string
+          format: uuid
+        service_count:
+          type: integer
+        created_at:
+          type: string
+          format: date-time
+        updated_at:
+          type: string
+          format: date-time
+
     PreviewEnvironment:
       type: object
       properties: