fix: e2e QA hardening — honest runtime URLs, health, and read-only anon UI

Backend:
- managed DB provisioning: attach DB containers to the platform network and
  probe the container IP, fixing the 127.0.0.1 reachability failure inside
  the backend container; log provisioning failures
- stop fabricating connection URLs when provisioning produced none
- template deploys now carry port + health_check into service runtime fields
- service health probed over the project network (backend joins it) instead
  of an in-container wget that fails on shell-less images
- runtime/public/connection URLs rewrite loopback to the request Host so
  links are usable for LAN/remote clients

Frontend:
- service Networking panel shows real runtime URLs/ports/health instead of
  hardcoded containr.dev + 8080->443
- anonymous views hide all mutation controls (new project, add service,
  group, context menu)
- project cards: remove decorative svcN labels; badge says DOWN only when
  zero services run, IDLE when empty, DEGRADED for partial
- mobile projects header no longer clips (fluid search width)
- unknown routes render a not-found page instead of silently redirecting

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

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

app/backend/internal/api/databases.go

@@ -23,6 +23,7 @@ import (
 
 	dockercontainer "github.com/docker/docker/api/types/container"
 	"github.com/docker/docker/api/types/mount"
+	"github.com/docker/docker/api/types/network"
 	"github.com/docker/docker/api/types/registry"
 	"github.com/docker/go-connections/nat"
 	"github.com/gin-gonic/gin"
@@ -196,7 +197,7 @@ func (h *DatabaseHandler) GetDatabases(c *gin.Context) {
 				db.Backups = DatabaseBackupConfig{Backups: []DatabaseBackup{}}
 			}
 			db.Settings = h.generateMockSettings()
-			db.ConnectionURL = h.resolveConnectionURL(db)
+			db.ConnectionURL = rewriteLoopbackURL(h.resolveConnectionURL(db), requestHostname(c))
 		} else {
 			db.Backups = DatabaseBackupConfig{Backups: []DatabaseBackup{}}
 			db.ConnectionURL = ""
@@ -235,7 +236,7 @@ func (h *DatabaseHandler) GetDatabase(c *gin.Context) {
 			db.Backups = DatabaseBackupConfig{Backups: []DatabaseBackup{}}
 		}
 		db.Settings = h.generateMockSettings()
-		db.ConnectionURL = h.resolveConnectionURL(db)
+		db.ConnectionURL = rewriteLoopbackURL(h.resolveConnectionURL(db), requestHostname(c))
 	} else {
 		db.Backups = DatabaseBackupConfig{Backups: []DatabaseBackup{}}
 		db.ConnectionURL = ""
@@ -942,33 +943,47 @@ func (h *DatabaseHandler) generateMockSettings() DatabaseSettings {
 	}
 }
 
+// resolveConnectionURL returns the stored connection URL for privileged
+// viewers, or "" when the runtime has not produced one (not provisioned yet).
 func (h *DatabaseHandler) resolveConnectionURL(db DatabaseService) string {
-	if strings.TrimSpace(db.ConnectionURL) != "" {
+	return strings.TrimSpace(db.ConnectionURL)
-		return db.ConnectionURL
-	}
-	return h.generateConnectionURL(db)
 }
 
-func (h *DatabaseHandler) generateConnectionURL(db DatabaseService) string {
+// requestHostname returns the host the client used to reach the API, without
-	safeName := sanitizeDBIdentifier(db.Name, "app")
+// the port. Empty when it cannot be determined.
-	switch db.Type {
+func requestHostname(c *gin.Context) string {
-	case "postgresql":
+	host := strings.TrimSpace(c.Request.Host)
-		return fmt.Sprintf("postgresql://user:password@%s.containr.local:5432/%s", safeName, safeName)
+	if host == "" {
-	case "redis":
-		return fmt.Sprintf("redis://%s.containr.local:6379", safeName)
-	case "dragonfly":
-		return fmt.Sprintf("redis://%s.containr.local:6379", safeName)
-	case "mysql":
-		return fmt.Sprintf("mysql://user:password@%s.containr.local:3306/%s", safeName, safeName)
-	case "mariadb":
-		return fmt.Sprintf("mysql://user:password@%s.containr.local:3306/%s", safeName, safeName)
-	case "mongodb":
-		return fmt.Sprintf("mongodb://user:password@%s.containr.local:27017/%s", safeName, safeName)
-	case "clickhouse":
-		return fmt.Sprintf("http://%s.containr.local:8123", safeName)
-	default:
 		return ""
 	}
+	if h, _, err := net.SplitHostPort(host); err == nil {
+		return strings.Trim(h, "[]")
+	}
+	return strings.Trim(host, "[]")
+}
+
+// rewriteLoopbackURL swaps loopback/unspecified hosts in rawURL for the host
+// the caller actually used, so URLs handed to remote browsers are usable.
+func rewriteLoopbackURL(rawURL, host string) string {
+	if rawURL == "" || host == "" {
+		return rawURL
+	}
+	u, err := url.Parse(rawURL)
+	if err != nil {
+		return rawURL
+	}
+	switch strings.ToLower(u.Hostname()) {
+	case "localhost", "127.0.0.1", "0.0.0.0", "::1", "":
+	default:
+		return rawURL
+	}
+	port := u.Port()
+	if port == "" {
+		u.Host = host
+	} else {
+		u.Host = net.JoinHostPort(host, port)
+	}
+	return u.String()
 }
 
 func (h *DatabaseHandler) reconcileManagedDatabaseState(ctx context.Context, db DatabaseService) DatabaseService {
@@ -1223,13 +1238,13 @@ func (h *DatabaseHandler) provisionDatabaseWithVariables(databaseID, databaseNam
 	defer cancel()
 
 	if h.dockerClient == nil {
-		fallbackURL := h.generateConnectionURL(DatabaseService{Name: databaseName, Type: dbType})
+		_ = h.setDatabaseStatusAndConnection(databaseID, "running", sql.NullString{})
-		_ = h.setDatabaseStatusAndConnection(databaseID, "running", sql.NullString{String: fallbackURL, Valid: fallbackURL != ""})
 		return
 	}
 
 	connectionURL, err := h.provisionDatabaseRuntime(ctx, databaseID, databaseName, dbType, runtimeVariables)
 	if err != nil {
+		log.Printf("containr: managed database %s (%s) provisioning failed: %v", databaseID, dbType, err)
 		_ = h.setDatabaseStatusAndConnection(databaseID, "error", sql.NullString{})
 		return
 	}
@@ -1337,7 +1352,7 @@ func (h *DatabaseHandler) provisionDatabaseRuntime(ctx context.Context, database
 	if err != nil {
 		return "", err
 	}
-	if err := waitForRuntimePortReadiness(ctx, hostPort); err != nil {
+	if err := h.waitForDatabaseReadiness(ctx, containerID, hostPort, plan.Port.Port()); err != nil {
 		return "", err
 	}
 
@@ -1371,12 +1386,24 @@ func (h *DatabaseHandler) resolvePublishedHostPort(ctx context.Context, containe
 	return "", fmt.Errorf("published host port not available")
 }
 
-func waitForRuntimePortReadiness(ctx context.Context, hostPort string) error {
+// waitForDatabaseReadiness probes the database's TCP port until it accepts a
-	addr := net.JoinHostPort("127.0.0.1", strings.TrimSpace(hostPort))
+// connection. The published port lives on host loopback, which a containerized
-	deadline := time.Now().Add(30 * time.Second)
+// backend cannot reach; in that case the database is additionally attached to
+// the backend's own network and probed by container IP.
+func (h *DatabaseHandler) waitForDatabaseReadiness(ctx context.Context, containerID, hostPort, containerPort string) error {
+	probeAddr := net.JoinHostPort("127.0.0.1", strings.TrimSpace(hostPort))
+	if backendNet := h.dockerClient.OwnNetworkName(ctx); backendNet != "" {
+		if err := h.dockerClient.ConnectNetwork(ctx, backendNet, containerID, network.EndpointSettings{}); err != nil {
+			log.Printf("containr: attach database %s to %s failed: %v", containerID, backendNet, err)
+		}
+		if ip := h.containerIPOnNetwork(ctx, containerID, backendNet); ip != "" {
+			probeAddr = net.JoinHostPort(ip, containerPort)
+		}
+	}
 
+	deadline := time.Now().Add(30 * time.Second)
 	for time.Now().Before(deadline) {
-		conn, err := net.DialTimeout("tcp", addr, 1500*time.Millisecond)
+		conn, err := net.DialTimeout("tcp", probeAddr, 1500*time.Millisecond)
 		if err == nil {
 			_ = conn.Close()
 			return nil
@@ -1389,7 +1416,18 @@ func waitForRuntimePortReadiness(ctx context.Context, hostPort string) error {
 		}
 	}
 
-	return fmt.Errorf("database runtime did not become reachable on %s", addr)
+	return fmt.Errorf("database runtime did not become reachable on %s", probeAddr)
+}
+
+func (h *DatabaseHandler) containerIPOnNetwork(ctx context.Context, containerID, networkName string) string {
+	inspect, err := h.dockerClient.GetContainer(ctx, containerID)
+	if err != nil || inspect.NetworkSettings == nil {
+		return ""
+	}
+	if ep, ok := inspect.NetworkSettings.Networks[networkName]; ok && ep != nil {
+		return strings.TrimSpace(ep.IPAddress)
+	}
+	return ""
 }
 
 func (h *DatabaseHandler) ensureImage(ctx context.Context, imageRef string) error {

app/backend/internal/api/databases_test.go

@@ -51,15 +51,16 @@ func TestDatabaseConnectionURLAndDefaultVersion(t *testing.T) {
 	}
 
 	for _, tc := range cases {
-		url := handler.generateConnectionURL(DatabaseService{
+		plan, err := buildDatabaseRuntimePlan(tc.dbType, "example", nil)
-			Type: tc.dbType,
+		if err != nil {
-			Name: "example",
+			t.Fatalf("buildDatabaseRuntimePlan(%q) failed: %v", tc.dbType, err)
-		})
-		if url == "" {
-			t.Fatalf("generateConnectionURL returned empty for type %q", tc.dbType)
 		}
+		url := plan.ConnectionURL("15432")
 		if len(tc.urlContains) > 0 && !strings.HasPrefix(url, tc.urlContains) {
-			t.Fatalf("generateConnectionURL(%q) = %q, expected prefix %q", tc.dbType, url, tc.urlContains)
+			t.Fatalf("ConnectionURL(%q) = %q, expected prefix %q", tc.dbType, url, tc.urlContains)
+		}
+		if !strings.Contains(url, ":15432") {
+			t.Fatalf("ConnectionURL(%q) = %q, expected published port", tc.dbType, url)
 		}
 
 		gotVersion := handler.getDefaultVersion(tc.dbType)
@@ -69,6 +70,17 @@ func TestDatabaseConnectionURLAndDefaultVersion(t *testing.T) {
 	}
 }
 
+func TestResolveConnectionURLNeverFabricates(t *testing.T) {
+	handler := &DatabaseHandler{}
+
+	if got := handler.resolveConnectionURL(DatabaseService{Type: "postgresql", Name: "example"}); got != "" {
+		t.Fatalf("resolveConnectionURL with no stored URL = %q, want empty", got)
+	}
+	if got := handler.resolveConnectionURL(DatabaseService{ConnectionURL: "postgresql://u:p@localhost:15432/db"}); got != "postgresql://u:p@localhost:15432/db" {
+		t.Fatalf("resolveConnectionURL = %q, want stored URL", got)
+	}
+}
+
 func TestBuildDatabaseRuntimePlanSupportsAllTypes(t *testing.T) {
 	cases := []struct {
 		dbType        string
@@ -199,3 +211,23 @@ func TestHumanReadableBytes(t *testing.T) {
 		}
 	}
 }
+
+func TestRewriteLoopbackURL(t *testing.T) {
+	tests := []struct {
+		name, raw, host, want string
+	}{
+		{"service url", "http://localhost:35981", "10.0.0.182", "http://10.0.0.182:35981"},
+		{"db url keeps creds", "postgresql://u:p@localhost:35432/db?sslmode=disable", "10.0.0.182", "postgresql://u:[email protected]:35432/db?sslmode=disable"},
+		{"ipv4 loopback", "redis://:[email protected]:36379/0", "host.lan", "redis://:[email protected]:36379/0"},
+		{"unspecified", "http://0.0.0.0:9000/x", "10.0.0.182", "http://10.0.0.182:9000/x"},
+		{"external host untouched", "https://example.com:443/x", "10.0.0.182", "https://example.com:443/x"},
+		{"empty raw", "", "10.0.0.182", ""},
+		{"empty host", "http://localhost:35981", "", "http://localhost:35981"},
+		{"no port", "http://localhost/path", "10.0.0.182", "http://10.0.0.182/path"},
+	}
+	for _, tt := range tests {
+		if got := rewriteLoopbackURL(tt.raw, tt.host); got != tt.want {
+			t.Errorf("%s: rewriteLoopbackURL(%q,%q) = %q, want %q", tt.name, tt.raw, tt.host, got, tt.want)
+		}
+	}
+}

app/backend/internal/api/runtime.go

@@ -283,6 +283,12 @@ func handleGetServiceRuntime(c *gin.Context) {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
 		return
 	}
+	engine.ProbeServiceHealth(c.Request.Context(), state, service.ProjectID.String(), service.Name, service.Port, service.HealthCheckPath)
+	if host := requestHostname(c); host != "" {
+		for i, u := range state.URLs {
+			state.URLs[i] = rewriteLoopbackURL(u, host)
+		}
+	}
 	c.JSON(http.StatusOK, gin.H{"runtime": state})
 }
 
@@ -418,7 +424,7 @@ func liveServiceStatus(c *gin.Context, db *database.DB, service *Service) {
 	if service.Domain != "" {
 		service.PublicURL = "https://" + service.Domain
 	} else if len(state.URLs) > 0 {
-		service.PublicURL = state.URLs[0]
+		service.PublicURL = rewriteLoopbackURL(state.URLs[0], requestHostname(c))
 	}
 }
 

app/backend/internal/api/templates.go

@@ -336,6 +336,16 @@ func handleCreateFromTemplate(c *gin.Context) {
 		return
 	}
 
+	// sqlc's schema predates the runtime columns; port and healthcheck_path are
+	// written via raw SQL like every other service mutation path.
+	if _, err = tx.ExecContext(ctx,
+		`UPDATE services SET port = $1, healthcheck_path = $2 WHERE id = $3`,
+		config.Port, strings.TrimSpace(config.HealthCheck), serviceID,
+	); err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to create service from template"})
+		return
+	}
+
 	for key, value := range envVars {
 		if strings.TrimSpace(key) == "" {
 			continue
@@ -731,7 +741,7 @@ func SeedTemplates() []ServiceTemplate {
 			Name:        "Background Worker",
 			Description: "Background job processing service",
 			Category:    "worker",
-			Logo:        "https://cdn.simpleicons.org/terminal",
+			Logo:        "https://cdn.simpleicons.org/gnubash",
 			Config:      `{"type":"worker","runtime":"node","build_command":"npm install","start_command":"npm run worker"}`,
 			Variables:   `[{"key":"WORKER_CONCURRENCY","label":"Concurrency","default":"4","required":false,"secret":false}]`,
 			IsOfficial:  true,
@@ -741,7 +751,7 @@ func SeedTemplates() []ServiceTemplate {
 			Name:        "Cron Job",
 			Description: "Scheduled task runner",
 			Category:    "cron",
-			Logo:        "https://cdn.simpleicons.org/clock",
+			Logo:        "https://cdn.simpleicons.org/clockify",
 			Config:      `{"type":"cron","runtime":"node","build_command":"npm install","start_command":"npm run cron"}`,
 			Variables:   `[{"key":"CRON_SCHEDULE","label":"Schedule","default":"0 * * * *","required":true,"secret":false}]`,
 			IsOfficial:  true,

app/backend/internal/deployment/runtime.go

@@ -6,6 +6,7 @@ import (
 	"encoding/hex"
 	"encoding/json"
 	"fmt"
+	"net/http"
 	"sort"
 	"strings"
 	"time"
@@ -58,7 +59,9 @@ type RuntimeState struct {
 	Desired    int                `json:"desired"`
 	Containers []RuntimeContainer `json:"containers"`
 	URLs       []string           `json:"urls"`
-	Status     string             `json:"status"` // running, degraded, stopped
+	Ports      []uint16           `json:"ports"`
+	Health     string             `json:"health,omitempty"` // healthy, unhealthy, unreachable
+	Status     string             `json:"status"`           // running, degraded, stopped
 }
 
 func projectNetworkName(projectID string) string {
@@ -243,15 +246,6 @@ func (de *DeploymentEngine) createReplica(ctx context.Context, spec RuntimeSpec,
 		// Always publish an ephemeral host port for direct access; a configured
 		// domain is additionally routed via Traefik when the edge network exists.
 		cfg.PortBindings = nat.PortMap{port: []nat.PortBinding{{HostIP: "0.0.0.0", HostPort: ""}}}
-		if spec.HealthPath != "" {
-			cfg.Healthcheck = &container.HealthConfig{
-				Test:        []string{"CMD-SHELL", fmt.Sprintf("wget -q -O /dev/null http://127.0.0.1:%d%s || exit 1", spec.Port, spec.HealthPath)},
-				Interval:    30 * time.Second,
-				Timeout:     5 * time.Second,
-				Retries:     3,
-				StartPeriod: 10 * time.Second,
-			}
-		}
 	}
 
 	id, err := de.dockerClient.CreateContainer(ctx, cfg)
@@ -282,6 +276,7 @@ func (de *DeploymentEngine) RuntimeState(ctx context.Context, serviceID string,
 		for _, p := range c.Ports {
 			if p.PublicPort != 0 {
 				state.URLs = append(state.URLs, fmt.Sprintf("http://localhost:%d", p.PublicPort))
+				state.Ports = append(state.Ports, p.PublicPort)
 			}
 		}
 	}
@@ -299,6 +294,57 @@ func (de *DeploymentEngine) RuntimeState(ctx context.Context, serviceID string,
 	return state, nil
 }
 
+// ProbeServiceHealth performs an HTTP GET on healthPath and records the
+// outcome on state.Health. When the backend runs containerized it first
+// attaches to the service's project network and probes the service by DNS
+// name — this works for every image (no shell or wget required inside the
+// container) and checks the service itself, not the published edge. A
+// host-run backend falls back to probing the published host port.
+func (de *DeploymentEngine) ProbeServiceHealth(ctx context.Context, state *RuntimeState, projectID, serviceName string, port int, healthPath string) {
+	if state == nil {
+		return
+	}
+	state.Health = ""
+	if healthPath == "" || port <= 0 {
+		return
+	}
+	if !strings.HasPrefix(healthPath, "/") {
+		healthPath = "/" + healthPath
+	}
+
+	probeURL := ""
+	if networkName := projectNetworkName(projectID); networkName != "" {
+		if err := de.dockerClient.ConnectSelfToNetwork(ctx, networkName); err == nil {
+			probeURL = fmt.Sprintf("http://%s:%d%s", serviceName, port, healthPath)
+		}
+	}
+	if probeURL == "" && len(state.Ports) > 0 {
+		probeURL = fmt.Sprintf("http://%s:%d%s", de.dockerClient.HostProbeHost(ctx), state.Ports[0], healthPath)
+	}
+	if probeURL == "" {
+		return
+	}
+
+	reqCtx, cancel := context.WithTimeout(ctx, 3*time.Second)
+	defer cancel()
+	req, err := http.NewRequestWithContext(reqCtx, http.MethodGet, probeURL, nil)
+	if err != nil {
+		state.Health = "unreachable"
+		return
+	}
+	resp, err := http.DefaultClient.Do(req)
+	if err != nil {
+		state.Health = "unreachable"
+		return
+	}
+	defer resp.Body.Close()
+	if resp.StatusCode >= 200 && resp.StatusCode < 400 {
+		state.Health = "healthy"
+		return
+	}
+	state.Health = "unhealthy"
+}
+
 // StopService stops (but keeps) all replicas of a service.
 func (de *DeploymentEngine) StopService(ctx context.Context, serviceID string) error {
 	containers, err := de.ListServiceContainers(ctx, serviceID)

app/backend/internal/docker/client.go

@@ -6,6 +6,9 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
+	"os"
+	"sort"
+	"strings"
 	"time"
 
 	"github.com/docker/docker/api/types"
@@ -23,7 +26,8 @@ import (
 
 // Client wraps the Docker client with additional functionality
 type Client struct {
-	cli *client.Client
+	cli       *client.Client
+	probeHost string
 }
 
 // NewClient creates a new Docker client
@@ -45,6 +49,75 @@ func NewClient() (*Client, error) {
 	return &Client{cli: cli}, nil
 }
 
+// HostProbeHost returns an address through which host-published container
+// ports are reachable. When this process runs inside a container, host
+// loopback is unreachable; the bridge gateway IP routes to ports published
+// on 0.0.0.0. Result is cached for the process lifetime.
+func (c *Client) HostProbeHost(ctx context.Context) string {
+	if c.probeHost != "" {
+		return c.probeHost
+	}
+	host := "127.0.0.1"
+	if self, err := c.self(ctx); err == nil && self.NetworkSettings != nil {
+		for _, n := range self.NetworkSettings.Networks {
+			if n != nil && n.Gateway != "" {
+				host = n.Gateway
+				break
+			}
+		}
+	}
+	c.probeHost = host
+	return host
+}
+
+// OwnNetworkName returns the name of the platform network this process's
+// container is attached to, or "" when not running containerized. Per-project
+// and default Docker networks are never selected; among remaining networks
+// the lexicographically first wins so the choice is deterministic.
+func (c *Client) OwnNetworkName(ctx context.Context) string {
+	self, err := c.self(ctx)
+	if err != nil || self.NetworkSettings == nil {
+		return ""
+	}
+	names := make([]string, 0, len(self.NetworkSettings.Networks))
+	for name := range self.NetworkSettings.Networks {
+		switch {
+		case name == "bridge" || name == "host" || name == "none":
+		case strings.HasPrefix(name, "containr-proj-"):
+		default:
+			names = append(names, name)
+		}
+	}
+	sort.Strings(names)
+	if len(names) == 0 {
+		return ""
+	}
+	return names[0]
+}
+
+// self inspects the container this process runs in (hostname == container ID).
+func (c *Client) self(ctx context.Context) (types.ContainerJSON, error) {
+	hostname, err := os.Hostname()
+	if err != nil || hostname == "" {
+		return types.ContainerJSON{}, fmt.Errorf("hostname unavailable")
+	}
+	return c.cli.ContainerInspect(ctx, hostname)
+}
+
+// ConnectSelfToNetwork attaches this process's container to the given network.
+// No-op when already attached or when not running containerized.
+func (c *Client) ConnectSelfToNetwork(ctx context.Context, networkName string) error {
+	hostname, err := os.Hostname()
+	if err != nil || hostname == "" {
+		return fmt.Errorf("hostname unavailable")
+	}
+	err = c.cli.NetworkConnect(ctx, networkName, hostname, &network.EndpointSettings{})
+	if err != nil && strings.Contains(strings.ToLower(err.Error()), "already exists") {
+		return nil
+	}
+	return err
+}
+
 // ListContainers returns all containers
 func (c *Client) ListContainers(ctx context.Context, all bool) ([]types.Container, error) {
 	return c.cli.ContainerList(ctx, container.ListOptions{

app/frontend/src/app/App.tsx

@@ -1,6 +1,6 @@
 import { Link, Navigate, Outlet, Route, Routes, useLocation } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
-import { ShieldCheck } from 'lucide-react';
+import { Compass, ShieldCheck } from 'lucide-react';
 import { PlatformShell } from './layout/PlatformShell';
 import { ProjectsPage } from '@/features/projects/pages/ProjectsPage';
 import { ProjectWorkspacePage } from '@/features/workspace/pages/ProjectWorkspacePage';
@@ -103,6 +103,26 @@ function AdminRequired() {
   return <Outlet />;
 }
 
+function NotFoundPage() {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4 px-6 text-center">
+      <Compass size={32} className="text-[var(--text-tertiary)]" />
+      <div>
+        <h1 className="text-lg font-semibold text-[var(--text-primary)]">Page not found</h1>
+        <p className="mt-1 max-w-sm text-sm text-[var(--text-secondary)]">
+          The page you are looking for does not exist or was moved.
+        </p>
+      </div>
+      <Link
+        to="/"
+        className="rounded-[var(--radius-md)] border border-[var(--border-default)] px-4 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+      >
+        Back to home
+      </Link>
+    </div>
+  );
+}
+
 export default function App() {
   return (
     <ErrorBoundary>
@@ -138,14 +158,14 @@ export default function App() {
           <Route element={<AdminRequired />}>
             <Route path="/admin" element={<AdminPage />} />
           </Route>
+
+          <Route path="*" element={<NotFoundPage />} />
         </Route>
 
         {/* Full-bleed design demo — renders its own chrome, no app shell */}
         <Route element={<AuthRequired />}>
           <Route path="/metrics-demo" element={<ServiceMetricsDashboard />} />
         </Route>
-
-        <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </ErrorBoundary>
   );

app/frontend/src/features/projects/pages/ProjectsPage.tsx

@@ -25,10 +25,10 @@ const demoDeploys = [
   { id: 'd4', name: 'Marketing Site', project: 'Growth Surface', status: 'DEPLOYED', when: '2h' },
 ];
 
-function getHealthStatus(stats: ProjectStats): 'healthy' | 'degraded' | 'critical' {
+function getHealthStatus(stats: ProjectStats): 'healthy' | 'idle' | 'degraded' | 'critical' {
-  if (stats.service_count === 0) return 'healthy';
+  if (stats.service_count === 0) return 'idle';
   if (stats.running_services === stats.service_count) return 'healthy';
-  if (stats.running_services >= stats.service_count / 2) return 'degraded';
+  if (stats.running_services > 0) return 'degraded';
   return 'critical';
 }
 
@@ -36,6 +36,8 @@ function healthBadge(health: ReturnType<typeof getHealthStatus>) {
   switch (health) {
     case 'healthy':
       return { label: 'RUNNING', cls: 'v-st-ok' };
+    case 'idle':
+      return { label: 'IDLE', cls: '' };
     case 'degraded':
       return { label: 'DEGRADED', cls: 'v-st-warn' };
     case 'critical':
@@ -70,7 +72,6 @@ function MiniCanvas({ project }: { project: ProjectEntity }) {
       {Array.from({ length: shown }).map((_, i) => (
         <div key={i} className="v-node" style={positions[i]}>
           <b className={`v-nd ${i < running ? '' : 'r'}`} />
-          svc{i + 1}
         </div>
       ))}
       {extra > 0 ? (
@@ -85,6 +86,7 @@ function ProjectCard({ project, href }: { project: ProjectEntity; href: string }
   const health = getHealthStatus(project.stats);
   const badge = healthBadge(health);
   const envOk = health === 'healthy';
+  const envLabel = envOk ? 'production' : health === 'idle' ? 'idle' : health === 'critical' ? 'down' : 'degraded';
 
   return (
     <article
@@ -101,10 +103,10 @@ function ProjectCard({ project, href }: { project: ProjectEntity; href: string }
       <div className="v-mono mt-3 flex items-center gap-2 text-[10.5px] text-[var(--text-tertiary)]">
         <i
           className="inline-block h-1.5 w-1.5 rounded-full"
-          style={{ background: envOk ? 'var(--success)' : 'var(--warning)' }}
+          style={{ background: envOk ? 'var(--success)' : health === 'idle' ? 'var(--text-tertiary)' : health === 'critical' ? 'var(--error)' : 'var(--warning)' }}
         />
         <span className="text-[var(--text-secondary)]">
-          {envOk ? 'production' : 'degraded'}
+          {envLabel}
         </span>
         <span>·</span>
         <span>
@@ -220,7 +222,7 @@ export function ProjectsPage() {
             </p>
           </div>
           <div className="flex items-center gap-2.5">
-            <div className="search-box" style={{ width: 240 }}>
+            <div className="search-box" style={{ width: 'min(240px, 42vw)' }}>
               <Search size={13} />
               <input
                 value={search}
@@ -230,9 +232,11 @@ export function ProjectsPage() {
                 style={{ fontSize: 11.5 }}
               />
             </div>
-            <button onClick={openCreate} className="v-btn">
+            {signedIn && (
-              + new project
+              <button onClick={openCreate} className="v-btn">
-            </button>
+                + new project
+              </button>
+            )}
           </div>
         </div>
 

app/frontend/src/features/service/pages/ServiceDetailPage.tsx

@@ -972,31 +972,60 @@ export function ServiceDetailPage() {
                     <p className="text-sm font-medium text-[var(--text-primary)]">Networking</p>
                     <p className="text-xs text-[var(--text-tertiary)]">Public endpoints and ports</p>
                   </div>
+                  {runtimeQuery.data?.health === 'healthy' && (
+                    <span className="ml-auto v-st v-st-ok">HEALTHY</span>
+                  )}
+                  {runtimeQuery.data?.health === 'unhealthy' && (
+                    <span className="ml-auto v-st v-st-fail">UNHEALTHY</span>
+                  )}
                 </div>
-                
+
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div className="flex items-center justify-between p-3 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
+                  {service.domain && (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center justify-between p-3 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
-                      <div className="w-2 h-2 rounded-full bg-[var(--success)]" />
+                      <div className="flex items-center gap-2">
-                      <span className="text-xs text-[var(--text-secondary)]">HTTPS</span>
+                        <div className="w-2 h-2 rounded-full bg-[var(--success)]" />
+                        <span className="text-xs text-[var(--text-secondary)]">Domain</span>
+                      </div>
+                      <a
+                        href={`https://${service.domain}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="mono text-xs text-[var(--accent-primary)] hover:underline"
+                      >
+                        {service.domain}
+                      </a>
                     </div>
-                    <a 
+                  )}
-                      href={`https://${service.name}.containr.dev`}
+                  {(runtimeQuery.data?.urls ?? []).map((url) => (
-                      target="_blank"
+                    <div key={url} className="flex items-center justify-between p-3 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
-                      rel="noopener noreferrer"
+                      <div className="flex items-center gap-2">
-                      className="mono text-xs text-[var(--accent-primary)] hover:underline"
+                        <div className="w-2 h-2 rounded-full bg-[var(--success)]" />
-                    >
+                        <span className="text-xs text-[var(--text-secondary)]">HTTP</span>
-                      {service.name}.containr.dev
+                      </div>
-                    </a>
+                      <a
-                  </div>
+                        href={url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="mono text-xs text-[var(--accent-primary)] hover:underline"
+                      >
+                        {url.replace(/^https?:\/\//, '')}
+                      </a>
+                    </div>
+                  ))}
                   <div className="flex items-center justify-between p-3 rounded-lg bg-[var(--surface-muted)] border border-[var(--border-subtle)]">
                     <div className="flex items-center gap-2">
                       <div className="w-2 h-2 rounded-full bg-[var(--accent-secondary)]" />
-                      <span className="text-xs text-[var(--text-secondary)]">Port</span>
+                      <span className="text-xs text-[var(--text-secondary)]">Internal</span>
                     </div>
-                    <span className="mono text-xs text-[var(--text-primary)]">8080 → 443</span>
+                    <span className="mono text-xs text-[var(--text-primary)]">{service.name}{service.port ? `:${service.port}` : ''}</span>
                   </div>
                 </div>
+                {!service.domain && (runtimeQuery.data?.urls ?? []).length === 0 && (
+                  <p className="mt-3 text-xs text-[var(--text-tertiary)]">
+                    No public endpoint. Publish a port or set a domain in Settings → Networking to expose this service.
+                  </p>
+                )}
               </div>
             )}
           </div>

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

@@ -1099,15 +1099,17 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
             ))}
           </div>
         )}
-        <button
+        {!readOnly && (
-          type="button"
+          <button
-          onClick={() => addGroup()}
+            type="button"
-          className="canvas-pill canvas-pill-btn h-8 px-3 flex items-center gap-1.5 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+            onClick={() => addGroup()}
-          title="Add group"
+            className="canvas-pill canvas-pill-btn h-8 px-3 flex items-center gap-1.5 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-        >
+            title="Add group"
-          <Layers size={13} />
+          >
-          Group
+            <Layers size={13} />
-        </button>
+            Group
+          </button>
+        )}
       </div>
 
       {/* Floating: zoom controls (bottom-left) */}
@@ -1170,15 +1172,17 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
               Add a service from a git repo or Docker image - it runs on a private network with the rest of this
               project.
             </p>
-            <button
+            {!readOnly && (
-              type="button"
+              <button
-              onClick={onAddService}
+                type="button"
-              className="inline-flex items-center gap-2 h-9 px-4 rounded-lg text-[var(--accent-on)] text-sm font-medium shadow-lg"
+                onClick={onAddService}
-              style={{ background: 'var(--accent-primary)' }}
+                className="inline-flex items-center gap-2 h-9 px-4 rounded-lg text-[var(--accent-on)] text-sm font-medium shadow-lg"
-            >
+                style={{ background: 'var(--accent-primary)' }}
-              <Plus size={15} />
+              >
-              Add Service
+                <Plus size={15} />
-            </button>
+                Add Service
+              </button>
+            )}
           </div>
         </div>
       )}
@@ -1191,32 +1195,36 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
         >
           {contextMenu.kind === 'pane' && (
             <>
-              <button
+              {!readOnly && (
-                type="button"
+                <>
-                onClick={() => {
+                  <button
-                  setContextMenu(null);
+                    type="button"
-                  onAddService();
+                    onClick={() => {
-                }}
+                      setContextMenu(null);
-                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] transition-colors"
+                      onAddService();
-              >
+                    }}
-                <Plus size={13} />
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] transition-colors"
-                Add service
+                  >
-              </button>
+                    <Plus size={13} />
-              <button
+                    Add service
-                type="button"
+                  </button>
-                onClick={() => {
+                  <button
-                  const at =
+                    type="button"
-                    contextMenu.flowX !== undefined && contextMenu.flowY !== undefined
+                    onClick={() => {
-                      ? { x: contextMenu.flowX, y: contextMenu.flowY }
+                      const at =
-                      : undefined;
+                        contextMenu.flowX !== undefined && contextMenu.flowY !== undefined
-                  setContextMenu(null);
+                          ? { x: contextMenu.flowX, y: contextMenu.flowY }
-                  addGroup(at);
+                          : undefined;
-                }}
+                      setContextMenu(null);
-                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] transition-colors"
+                      addGroup(at);
-              >
+                    }}
-                <Layers size={13} />
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] transition-colors"
-                Add group here
+                  >
-              </button>
+                    <Layers size={13} />
+                    Add group here
+                  </button>
+                </>
+              )}
               <div className="border-t border-[var(--border-subtle)] mt-1 pt-1">
                 <button
                   type="button"

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

@@ -719,7 +719,7 @@ export function ProjectWorkspacePage() {
             <Search size={12} />
             <kbd className="px-1 py-0.5 rounded bg-[var(--surface-card)] text-[10px] font-mono">⌘K</kbd>
           </button>
-          {!isDemoMode && (
+          {!isDemoMode && signedIn && (
             <button
               onClick={openAddService}
               className="flex items-center gap-1.5 h-8 px-3 rounded-[var(--radius-md)] text-[var(--accent-on)] text-xs font-semibold shadow-lg hover:shadow-xl transition-all"
@@ -742,7 +742,7 @@ export function ProjectWorkspacePage() {
             onAddService={openAddService}
             onOpenService={(serviceId) => navigate(serviceHref(serviceId))}
             onOpenSection={(serviceId, section) => navigate(serviceSectionHref(serviceId, section))}
-            readOnly={isDemoMode}
+            readOnly={isDemoMode || !signedIn}
           />
           {isDemoMode && (
             <div className="absolute top-4 left-1/2 -translate-x-1/2 pointer-events-none">

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

@@ -68,6 +68,8 @@ export type ServiceRuntime = {
   desired: number;
   status: 'running' | 'degraded' | 'stopped';
   urls: string[];
+  ports: number[];
+  health?: 'healthy' | 'unhealthy' | 'unreachable' | '';
   containers: RuntimeContainer[];
 };
 
@@ -1080,16 +1082,15 @@ export async function deleteService(serviceId: string): Promise<void> {
   });
 }
 
+function normalizeRuntime(runtime?: ServiceRuntime): ServiceRuntime {
+  const state = runtime ?? { desired: 0, status: 'stopped' as const, urls: [], ports: [], containers: [] };
+  // The API emits null (not []) for empty collections — coerce at the boundary.
+  return { ...state, urls: state.urls ?? [], ports: state.ports ?? [], containers: state.containers ?? [] };
+}
+
 export async function getServiceRuntime(serviceId: string): Promise<ServiceRuntime> {
   const payload = await requestJson<{ runtime?: ServiceRuntime }>(`/services/${serviceId}/runtime`);
-  return (
+  return normalizeRuntime(payload.runtime);
-    payload.runtime ?? {
-      desired: 0,
-      status: 'stopped',
-      urls: [],
-      containers: [],
-    }
-  );
 }
 
 async function serviceAction(serviceId: string, action: 'start' | 'stop' | 'restart'): Promise<void> {
@@ -1104,7 +1105,7 @@ export async function redeployService(serviceId: string): Promise<ServiceRuntime
   const payload = await requestJson<{ runtime?: ServiceRuntime }>(`/services/${serviceId}/redeploy`, {
     method: 'POST',
   });
-  return payload.runtime ?? { desired: 0, status: 'stopped', urls: [], containers: [] };
+  return normalizeRuntime(payload.runtime);
 }
 
 function normalizeServiceVariables(rows: RawServiceVariable[] | undefined): ServiceVariable[] {