merge: resolve main into feat/app-demo-polish

.gitignore

@@ -123,3 +123,4 @@ bin
 ref/
 .playwright-mcp/
 canvas-*.png
+.vercel

.vercelignore

@@ -0,0 +1,2 @@
+/*
+!/site

app/backend/cmd/dumptemplates/main.go

@@ -0,0 +1,24 @@
+// dumptemplates prints the seeded official template catalog as JSON in the same
+// shape as GET /api/v1/templates. The landing site (site/templates.json) uses it
+// as the offline fallback catalog: `go run ./cmd/dumptemplates > ../../site/templates.json`.
+package main
+
+import (
+	"containr/internal/api"
+	"encoding/json"
+	"fmt"
+	"os"
+)
+
+func main() {
+	out := struct {
+		Templates []api.ServiceTemplate `json:"templates"`
+	}{Templates: api.SeedTemplates()}
+
+	enc := json.NewEncoder(os.Stdout)
+	enc.SetIndent("", "  ")
+	if err := enc.Encode(out); err != nil {
+		fmt.Fprintln(os.Stderr, "encode:", err)
+		os.Exit(1)
+	}
+}

app/backend/internal/api/templates.go

@@ -28,6 +28,7 @@ type ServiceTemplate struct {
 	Variables   string    `json:"variables" db:"variables"`
 	IsOfficial  bool      `json:"is_official" db:"is_official"`
 	OwnerID     string    `json:"owner_id,omitempty" db:"owner_id"`
+	IsPublic    bool      `json:"is_public" db:"is_public"`
 	CreatedAt   time.Time `json:"created_at" db:"created_at"`
 	UpdatedAt   time.Time `json:"updated_at" db:"updated_at"`
 }
@@ -383,6 +384,7 @@ type templateWriteRequest struct {
 	Logo        string          `json:"logo"`
 	Config      json.RawMessage `json:"config" binding:"required"`
 	Variables   json.RawMessage `json:"variables"`
+	IsPublic    bool            `json:"is_public"`
 }
 
 var templateCategories = map[string]bool{
@@ -483,6 +485,7 @@ func handleCreateTemplate(c *gin.Context) {
 		Config:      req.Config,
 		Variables:   templateVariablesParam(req.Variables),
 		OwnerID:     uuid.NullUUID{UUID: ownerUUID, Valid: true},
+		IsPublic:    req.IsPublic,
 	}); err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to create template"})
 		return
@@ -529,6 +532,7 @@ func handleUpdateTemplate(c *gin.Context) {
 		Logo:        nullableText(req.Logo),
 		Config:      req.Config,
 		Variables:   templateVariablesParam(req.Variables),
+		IsPublic:    req.IsPublic,
 		ID:          templateID,
 		OwnerID:     uuid.NullUUID{UUID: ownerUUID, Valid: true},
 	})
@@ -1013,10 +1017,11 @@ func defaultTemplateResources(serviceType string) (cpu, memory string) {
 	}
 }
 
-// templateVisibleTo reports whether the caller may see a template: official
+// templateVisibleTo reports whether the caller may see a template: official and
-// templates are public, user templates are owner/admin only.
+// published (is_public) templates are public, other user templates are
+// owner/admin only.
 func templateVisibleTo(c *gin.Context, t ServiceTemplate) bool {
-	if t.IsOfficial {
+	if t.IsOfficial || t.IsPublic {
 		return true
 	}
 	if contextIsAdmin(c) {
@@ -1047,6 +1052,7 @@ func mapSQLCTemplate(row sqlcdb.ServiceTemplate) ServiceTemplate {
 		Variables:   variables,
 		IsOfficial:  row.IsOfficial.Valid && row.IsOfficial.Bool,
 		OwnerID:     ownerID,
+		IsPublic:    row.IsPublic,
 		CreatedAt:   templateNullTime(row.CreatedAt),
 		UpdatedAt:   templateNullTime(row.UpdatedAt),
 	}

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

@@ -207,6 +207,7 @@ type ServiceTemplate struct {
 	Variables   pqtype.NullRawMessage `json:"variables"`
 	IsOfficial  sql.NullBool          `json:"is_official"`
 	OwnerID     uuid.NullUUID         `json:"owner_id"`
+	IsPublic    bool                  `json:"is_public"`
 	CreatedAt   sql.NullTime          `json:"created_at"`
 	UpdatedAt   sql.NullTime          `json:"updated_at"`
 }

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

@@ -125,7 +125,7 @@ func (q *Queries) CreateServiceFromTemplate(ctx context.Context, arg CreateServi
 }
 
 const createUserTemplate = `-- name: CreateUserTemplate :exec
-INSERT INTO service_templates (id, name, description, category, logo, config, variables, is_official, owner_id)
+INSERT INTO service_templates (id, name, description, category, logo, config, variables, is_official, owner_id, is_public)
 VALUES (
     $1,
     $2,
@@ -135,7 +135,8 @@ VALUES (
     $6,
     $7,
     false,
-    $8
+    $8,
+    $9
 )
 `
 
@@ -148,6 +149,7 @@ type CreateUserTemplateParams struct {
 	Config      json.RawMessage       `json:"config"`
 	Variables   pqtype.NullRawMessage `json:"variables"`
 	OwnerID     uuid.NullUUID         `json:"owner_id"`
+	IsPublic    bool                  `json:"is_public"`
 }
 
 func (q *Queries) CreateUserTemplate(ctx context.Context, arg CreateUserTemplateParams) error {
@@ -160,6 +162,7 @@ func (q *Queries) CreateUserTemplate(ctx context.Context, arg CreateUserTemplate
 		arg.Config,
 		arg.Variables,
 		arg.OwnerID,
+		arg.IsPublic,
 	)
 	return err
 }
@@ -198,7 +201,7 @@ func (q *Queries) GetProjectOwnerID(ctx context.Context, id uuid.UUID) (uuid.UUI
 }
 
 const getServiceTemplateByID = `-- name: GetServiceTemplateByID :one
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
 WHERE id = $1
 `
@@ -216,6 +219,7 @@ func (q *Queries) GetServiceTemplateByID(ctx context.Context, id string) (Servic
 		&i.Variables,
 		&i.IsOfficial,
 		&i.OwnerID,
+		&i.IsPublic,
 		&i.CreatedAt,
 		&i.UpdatedAt,
 	)
@@ -223,10 +227,10 @@ func (q *Queries) GetServiceTemplateByID(ctx context.Context, id string) (Servic
 }
 
 const listServiceTemplatesByCategoryForUser = `-- name: ListServiceTemplatesByCategoryForUser :many
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
 WHERE category = $1
-  AND (is_official = true OR owner_id = $2)
+  AND (is_official = true OR is_public = true OR owner_id = $2)
 ORDER BY is_official DESC, name ASC
 `
 
@@ -254,6 +258,7 @@ func (q *Queries) ListServiceTemplatesByCategoryForUser(ctx context.Context, arg
 			&i.Variables,
 			&i.IsOfficial,
 			&i.OwnerID,
+			&i.IsPublic,
 			&i.CreatedAt,
 			&i.UpdatedAt,
 		); err != nil {
@@ -271,9 +276,9 @@ func (q *Queries) ListServiceTemplatesByCategoryForUser(ctx context.Context, arg
 }
 
 const listServiceTemplatesForUser = `-- name: ListServiceTemplatesForUser :many
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
-WHERE is_official = true OR owner_id = $1
+WHERE is_official = true OR is_public = true OR owner_id = $1
 ORDER BY is_official DESC, name ASC
 `
 
@@ -296,6 +301,7 @@ func (q *Queries) ListServiceTemplatesForUser(ctx context.Context, ownerID uuid.
 			&i.Variables,
 			&i.IsOfficial,
 			&i.OwnerID,
+			&i.IsPublic,
 			&i.CreatedAt,
 			&i.UpdatedAt,
 		); err != nil {
@@ -320,9 +326,10 @@ SET name = $1,
     logo = $4,
     config = $5,
     variables = $6,
+    is_public = $7,
     updated_at = NOW()
-WHERE id = $7
+WHERE id = $8
-  AND owner_id = $8
+  AND owner_id = $9
   AND is_official = false
 `
 
@@ -333,6 +340,7 @@ type UpdateUserTemplateParams struct {
 	Logo        sql.NullString        `json:"logo"`
 	Config      json.RawMessage       `json:"config"`
 	Variables   pqtype.NullRawMessage `json:"variables"`
+	IsPublic    bool                  `json:"is_public"`
 	ID          string                `json:"id"`
 	OwnerID     uuid.NullUUID         `json:"owner_id"`
 }
@@ -345,6 +353,7 @@ func (q *Queries) UpdateUserTemplate(ctx context.Context, arg UpdateUserTemplate
 		arg.Logo,
 		arg.Config,
 		arg.Variables,
+		arg.IsPublic,
 		arg.ID,
 		arg.OwnerID,
 	)

app/backend/migrations_goose/20260924120000_template_publishing.sql

@@ -0,0 +1,11 @@
+-- +goose Up
+-- Railway-style template publishing: owners can mark a user template public so
+-- it appears in the anonymous catalog (GET /api/v1/templates) and on the
+-- landing page. Official templates stay official; is_public only matters for
+-- user templates.
+ALTER TABLE public.service_templates ADD COLUMN IF NOT EXISTS is_public boolean NOT NULL DEFAULT false;
+CREATE INDEX IF NOT EXISTS idx_service_templates_public ON public.service_templates(is_public) WHERE is_public;
+
+-- +goose Down
+DROP INDEX IF EXISTS public.idx_service_templates_public;
+ALTER TABLE public.service_templates DROP COLUMN IF EXISTS is_public;

app/backend/sqlc/queries/templates.sql

@@ -1,18 +1,18 @@
 -- name: ListServiceTemplatesForUser :many
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
-WHERE is_official = true OR owner_id = sqlc.narg(owner_id)
+WHERE is_official = true OR is_public = true OR owner_id = sqlc.narg(owner_id)
 ORDER BY is_official DESC, name ASC;
 
 -- name: ListServiceTemplatesByCategoryForUser :many
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
 WHERE category = sqlc.arg(category)
-  AND (is_official = true OR owner_id = sqlc.narg(owner_id))
+  AND (is_official = true OR is_public = true OR owner_id = sqlc.narg(owner_id))
 ORDER BY is_official DESC, name ASC;
 
 -- name: GetServiceTemplateByID :one
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
 WHERE id = $1;
 
@@ -39,7 +39,7 @@ SET name = EXCLUDED.name,
     updated_at = NOW();
 
 -- name: CreateUserTemplate :exec
-INSERT INTO service_templates (id, name, description, category, logo, config, variables, is_official, owner_id)
+INSERT INTO service_templates (id, name, description, category, logo, config, variables, is_official, owner_id, is_public)
 VALUES (
     sqlc.arg(id),
     sqlc.arg(name),
@@ -49,7 +49,8 @@ VALUES (
     sqlc.arg(config),
     sqlc.narg(variables),
     false,
-    sqlc.arg(owner_id)
+    sqlc.arg(owner_id),
+    sqlc.arg(is_public)
 );
 
 -- name: UpdateUserTemplate :execrows
@@ -60,6 +61,7 @@ SET name = sqlc.arg(name),
     logo = sqlc.narg(logo),
     config = sqlc.arg(config),
     variables = sqlc.narg(variables),
+    is_public = sqlc.arg(is_public),
     updated_at = NOW()
 WHERE id = sqlc.arg(id)
   AND owner_id = sqlc.arg(owner_id)

app/backend/sqlc/schema.sql

@@ -84,6 +84,7 @@ CREATE TABLE service_templates (
     variables JSONB DEFAULT '[]',
     is_official BOOLEAN DEFAULT false,
     owner_id UUID,
+    is_public BOOLEAN NOT NULL DEFAULT false,
     created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
     updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
 );

app/frontend/src/app/App.tsx

@@ -112,10 +112,12 @@ export default function App() {
         <Route path="/auth/sign-up" element={<SignUpPage />} />
 
         {/* Public browsing — approved projects, templates, docs. */}
-        <Route element={<PlatformShell />}>
+        {/* Project workspace renders outside the shell — fullscreen canvas, no nav chrome */}
-          <Route path="/projects" element={<ProjectsPage />} />
         <Route path="/projects/:projectId" element={<ProjectWorkspacePage />} />
         <Route path="/projects/:projectId/services/:serviceId" element={<ServiceDetailPage />} />
+
+        <Route element={<PlatformShell />}>
+          <Route path="/projects" element={<ProjectsPage />} />
           <Route path="/templates" element={<TemplatesPage />} />
           <Route path="/databases" element={<DatabasesPage />} />
           <Route path="/ha" element={<HighAvailabilityPage />} />

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

@@ -64,6 +64,8 @@ import {
   demoVulnerabilities,
   getDemoServicesByProject,
 } from '@/lib/demo-data';
+import { ServiceIcon } from '@/features/workspace/canvas/ServiceIcon';
+import { serviceAccent } from '@/features/workspace/canvas/service-visuals';
 import { DocsBrowser } from '@/features/docs/DocsBrowser';
 import { useAuthSession } from '@/lib/use-auth-session';
 import { useDemoMode } from '@/lib/demo-mode';
@@ -1699,8 +1701,14 @@ export function DatabasesPage() {
                     onClick={() => setExpandedId(expanded ? null : (db.id ?? null))}
                     className="flex w-full items-center gap-3 p-4 text-left"
                   >
-                    <div className="w-9 h-9 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center shrink-0">
+                    <div
-                      <Database size={17} className="text-[var(--accent-primary)]" />
+                      className="w-9 h-9 rounded-[var(--radius-md)] flex items-center justify-center shrink-0"
+                      style={{
+                        background: `${serviceAccent({ name: db.type })}1c`,
+                        color: serviceAccent({ name: db.type }),
+                      }}
+                    >
+                      <ServiceIcon service={{ name: db.type, type: 'database' }} size={17} />
                     </div>
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2">

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import {
   createDeployment,
   deleteService,
@@ -37,6 +37,8 @@ import {
 } from '@/lib/api-client';
 import { getDemoProjectById, getDemoServiceById, getDemoCronJobsByService } from '@/lib/demo-data';
 import { useDemoMode } from '@/lib/demo-mode';
+import { ServiceIcon } from '@/features/workspace/canvas/ServiceIcon';
+import { serviceAccent } from '@/features/workspace/canvas/service-visuals';
 import { useAuthSession } from '@/lib/use-auth-session';
 import { getCurrentUserProfile } from '@/lib/api-client';
 import { parseDotenv, validateVariableRows, type VariableDraft } from '../variable-utils';
@@ -122,6 +124,7 @@ function StatusBadge({ status }: { status: string }) {
 export function ServiceDetailPage() {
   const { projectId = '', serviceId = '' } = useParams<{ projectId: string; serviceId: string }>();
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const queryClient = useQueryClient();
   const isDemoMode = useDemoMode();
   const sessionQuery = useAuthSession({ enabled: !isDemoMode });
@@ -134,7 +137,10 @@ export function ServiceDetailPage() {
   });
   const isAdmin = Boolean(profileQuery.data?.isAdmin);
 
-  const [activeSection, setActiveSection] = useState<ServiceSection>('metrics');
+  const [activeSection, setActiveSection] = useState<ServiceSection>(() => {
+    const requested = searchParams.get('section');
+    return sectionItems.some((item) => item.key === requested) ? (requested as ServiceSection) : 'metrics';
+  });
   const [logTail, setLogTail] = useState('100');
   const [varDrafts, setVarDrafts] = useState<VariableDraft[] | null>(null);
   const [bulkOpen, setBulkOpen] = useState(false);
@@ -382,7 +388,7 @@ export function ServiceDetailPage() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['project-services', projectId] });
       queryClient.invalidateQueries({ queryKey: ['projects'] });
-      navigate(`/projects/${projectId}`);
+      navigate(isDemoMode ? `/projects/${projectId}?demo=1` : `/projects/${projectId}`);
     },
   });
 
@@ -595,13 +601,12 @@ export function ServiceDetailPage() {
           style={{
             width: '46px',
             height: '46px',
-            background: 'var(--accent-primary)',
+            background: `${serviceAccent(service)}1f`,
+            color: serviceAccent(service),
             marginRight: '14px'
           }}
         >
-          <svg width="22" height="22" viewBox="0 0 24 24" fill="white">
+          <ServiceIcon service={service} size={22} />
-            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/>
-          </svg>
         </div>
         <div>
           <div className="flex items-center" style={{ gap: '10px' }}>

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

@@ -125,6 +125,7 @@ export function TemplatesPage() {
   const [editorOpen, setEditorOpen] = useState(false);
   const [editorJson, setEditorJson] = useState(EMPTY_TEMPLATE_JSON);
   const [editingTemplate, setEditingTemplate] = useState<TemplateEntity | null>(null);
+  const [editorIsPublic, setEditorIsPublic] = useState(false);
   const [editorError, setEditorError] = useState<string | null>(null);
 
   const [categoryFilter, setCategoryFilter] = useState('');
@@ -346,6 +347,7 @@ export function TemplatesPage() {
   const openCreateEditor = () => {
     setEditingTemplate(null);
     setEditorJson(EMPTY_TEMPLATE_JSON);
+    setEditorIsPublic(false);
     setEditorError(null);
     setEditorOpen(true);
   };
@@ -378,6 +380,7 @@ export function TemplatesPage() {
         2,
       ),
     );
+    setEditorIsPublic(template.isPublic);
     setEditorError(null);
     setEditorOpen(true);
   };
@@ -402,6 +405,7 @@ export function TemplatesPage() {
       logo: body.logo ?? '',
       config: body.config as Record<string, unknown>,
       variables: Array.isArray(body.variables) ? body.variables : [],
+      isPublic: editorIsPublic,
     });
   };
 
@@ -571,6 +575,11 @@ export function TemplatesPage() {
                                   Mine
                                 </span>
                               ) : null}
+                              {!template.isOfficial && template.isPublic ? (
+                                <span className="px-1.5 py-0.5 rounded bg-[var(--info-soft)] text-[var(--info)] text-[10px] font-semibold">
+                                  Public
+                                </span>
+                              ) : null}
                             </div>
                             <div className="flex items-center gap-2 mt-1">
                               <span 
@@ -646,6 +655,11 @@ export function TemplatesPage() {
                             Official
                           </span>
                         )}
+                        {!selectedDetail.template.isOfficial && selectedDetail.template.isPublic && (
+                          <span className="px-2 py-0.5 rounded-full bg-[var(--info-soft)] text-[var(--info)] text-xs font-medium">
+                            Public
+                          </span>
+                        )}
                       </div>
                       <p className="text-sm text-[var(--text-secondary)] mt-1">{selectedDetail.template.description}</p>
                     </div>
@@ -921,9 +935,15 @@ export function TemplatesPage() {
               </div>
             ) : null}
             <div className="flex items-center justify-between border-t border-[var(--border-subtle)] px-5 py-3.5">
-              <p className="text-[11px] text-[var(--text-tertiary)]">
+              <label className="inline-flex cursor-pointer items-center gap-2 text-[11px] text-[var(--text-secondary)]">
-                Saved as a user template — only you (and admins) can edit or delete it.
+                <input
-              </p>
+                  type="checkbox"
+                  checked={editorIsPublic}
+                  onChange={(e) => setEditorIsPublic(e.target.checked)}
+                  className="h-3.5 w-3.5 accent-[var(--accent-primary)]"
+                />
+                List in the public catalog - anyone browsing this instance can see and deploy it.
+              </label>
               <div className="flex items-center gap-2">
                 <button
                   type="button"

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

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import { serviceIcon, serviceIconUrl, serviceTypeIcon, type ServiceIconInput } from './service-visuals';
+
+export function ServiceIcon({
+  service,
+  size = 16,
+}: {
+  service: ServiceIconInput;
+  size?: number;
+}) {
+  const [failed, setFailed] = useState(false);
+  const brand = serviceIcon(service);
+  if (brand && !failed) {
+    return (
+      <img
+        src={serviceIconUrl(brand)}
+        width={size}
+        height={size}
+        alt=""
+        loading="lazy"
+        onError={() => setFailed(true)}
+      />
+    );
+  }
+  return serviceTypeIcon(service.type ?? 'service', size);
+}

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

@@ -0,0 +1,112 @@
+import type { ServiceEntity } from '@/lib/api-client';
+import type { ServiceVariable } from '../auto-connections';
+import { inferAutoConnections } from '../auto-connections';
+
+export const NODE_WIDTH = 240;
+export const NODE_HEIGHT = 104;
+// Multiples of the 26px canvas grid so laid-out nodes land on the lattice.
+export const COL_GAP = 338;
+export const ROW_GAP = 182;
+
+type LinkEdge = { sourceServiceId: string; targetServiceId: string };
+
+// Layered left-to-right layout: a service's depth is the longest chain of
+// dependencies beneath it, so consumers sit left and datastores right.
+// Unconnected services get their own trailing column separated by a gap.
+export function computeLayeredLayout(
+  services: ServiceEntity[],
+  edges: LinkEdge[],
+): Map<string, { x: number; y: number }> {
+  const positions = new Map<string, { x: number; y: number }>();
+  if (services.length === 0) {
+    return positions;
+  }
+
+  const ids = new Set(services.map((service) => service.id));
+  const outgoing = new Map<string, string[]>();
+  const connected = new Set<string>();
+
+  for (const edge of edges) {
+    if (!ids.has(edge.sourceServiceId) || !ids.has(edge.targetServiceId)) {
+      continue;
+    }
+    connected.add(edge.sourceServiceId);
+    connected.add(edge.targetServiceId);
+    const list = outgoing.get(edge.sourceServiceId) ?? [];
+    list.push(edge.targetServiceId);
+    outgoing.set(edge.sourceServiceId, list);
+  }
+
+  const depthMemo = new Map<string, number>();
+  const depthOf = (id: string, trail: Set<string>): number => {
+    const memoized = depthMemo.get(id);
+    if (memoized !== undefined) {
+      return memoized;
+    }
+    if (trail.has(id)) {
+      return 0; // cycle guard
+    }
+    trail.add(id);
+    let best = 0;
+    for (const target of outgoing.get(id) ?? []) {
+      best = Math.max(best, depthOf(target, trail) + 1);
+    }
+    trail.delete(id);
+    depthMemo.set(id, best);
+    return best;
+  };
+
+  const connectedServices = services
+    .filter((service) => connected.has(service.id))
+    .sort((a, b) => a.name.localeCompare(b.name));
+  const looseServices = services
+    .filter((service) => !connected.has(service.id))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  const depthById = new Map(connectedServices.map((service) => [service.id, depthOf(service.id, new Set())]));
+  const maxDepth = Math.max(0, ...depthById.values());
+
+  // Column = maxDepth - depth so deeper consumers render further left.
+  const columns = new Map<number, ServiceEntity[]>();
+  for (const service of connectedServices) {
+    const col = maxDepth - (depthById.get(service.id) ?? 0);
+    const list = columns.get(col) ?? [];
+    list.push(service);
+    columns.set(col, list);
+  }
+
+  const connectedColCount = columns.size;
+  const maxRows = Math.max(
+    1,
+    ...Array.from(columns.values()).map((list) => list.length),
+    looseServices.length,
+  );
+
+  const gridOffset = (value: number) => Math.round(value / 26) * 26;
+
+  for (const [col, list] of columns) {
+    const offsetY = gridOffset(((maxRows - list.length) * ROW_GAP) / 2);
+    list.forEach((service, row) => {
+      positions.set(service.id, { x: col * COL_GAP, y: offsetY + row * ROW_GAP });
+    });
+  }
+
+  looseServices.forEach((service, row) => {
+    const col = connectedColCount > 0 ? connectedColCount : 0;
+    const offsetY = gridOffset(((maxRows - looseServices.length) * ROW_GAP) / 2);
+    positions.set(service.id, { x: col * COL_GAP, y: offsetY + row * ROW_GAP });
+  });
+
+  return positions;
+}
+
+export function layoutFromVariables(
+  services: ServiceEntity[],
+  variablesByService: Record<string, ServiceVariable[]>,
+): Map<string, { x: number; y: number }> {
+  const links = inferAutoConnections(services, variablesByService);
+  return computeLayeredLayout(
+    services,
+    links.map((link) => link.edge),
+  );
+}

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

@@ -0,0 +1,415 @@
+import type { ServiceEntity } from '@/lib/api-client';
+import { serviceStatusClass } from '@/lib/api-client';
+import type { ServiceVariable } from '../auto-connections';
+import { ServiceIcon } from './ServiceIcon';
+import { serviceAccent } from './service-visuals';
+import { formatRelative } from '@/lib/time';
+import {
+  ArrowUpRight,
+  Copy,
+  Globe,
+  KeyRound,
+  Layers,
+  Link2,
+  Loader2,
+  Play,
+  Rocket,
+  Square,
+  Trash2,
+  X,
+} from 'lucide-react';
+import { useState } from 'react';
+
+export type InspectorGroup = { id: string; title: string };
+export type InspectorConnection = {
+  id: string;
+  outbound: boolean;
+  peer: string;
+  peerId: string;
+  reasons: string[];
+};
+
+export type InspectorActions = {
+  deploy: () => void;
+  start: () => void;
+  restart: () => void;
+  stop: () => void;
+  remove: () => void;
+  pending: boolean;
+  deployPending: boolean;
+  restartPending: boolean;
+};
+
+function statusLabel(status: string): string {
+  switch (status) {
+    case 'running':
+      return 'Online';
+    case 'deployed':
+      return 'Deployed';
+    case 'building':
+      return 'Building';
+    case 'deploying':
+      return 'Deploying';
+    case 'pending':
+      return 'Pending';
+    case 'failed':
+      return 'Failed';
+    case 'stopped':
+      return 'Stopped';
+    case 'rolling_back':
+      return 'Rolling back';
+    default:
+      return status;
+  }
+}
+
+function statusColor(status: string): string {
+  switch (status) {
+    case 'running':
+    case 'deployed':
+      return 'var(--success)';
+    case 'failed':
+      return 'var(--error)';
+    case 'building':
+    case 'deploying':
+    case 'pending':
+    case 'rolling_back':
+      return 'var(--warning)';
+    default:
+      return 'var(--text-tertiary)';
+  }
+}
+
+function Section({ title, children, action }: { title: string; children: React.ReactNode; action?: React.ReactNode }) {
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-1.5">
+        <p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)]">{title}</p>
+        {action}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function SectionLink({ onClick, children }: { onClick: () => void; children: React.ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="text-[10px] text-[var(--accent-primary)] hover:underline flex items-center gap-0.5"
+    >
+      {children}
+      <ArrowUpRight size={9} />
+    </button>
+  );
+}
+
+export function ServiceInspector({
+  service,
+  variables,
+  connections,
+  groups,
+  groupId,
+  readOnly,
+  actions,
+  onClose,
+  onOpenService,
+  onOpenSection,
+  onSelectPeer,
+  onAssignGroup,
+  onNewGroupFor,
+}: {
+  service: ServiceEntity;
+  variables: ServiceVariable[];
+  connections: InspectorConnection[];
+  groups: InspectorGroup[];
+  groupId: string | undefined;
+  readOnly?: boolean;
+  actions: InspectorActions;
+  onClose: () => void;
+  onOpenService: (serviceId: string) => void;
+  onOpenSection: (serviceId: string, section: string) => void;
+  onSelectPeer: (serviceId: string) => void;
+  onAssignGroup: (serviceId: string, groupId: string | null) => void;
+  onNewGroupFor: (serviceId: string) => void;
+}) {
+  const accent = serviceAccent(service);
+  const publicUrl = service.domain ? `https://${service.domain}` : service.publicUrl;
+  const [copied, setCopied] = useState(false);
+
+  const copyAddress = () => {
+    const text = publicUrl ?? (service.port ? `${service.name}:${service.port}` : service.name);
+    void navigator.clipboard?.writeText(text).then(() => {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    });
+  };
+
+  const configRows: [string, string | undefined][] = [
+    ['Image', service.image],
+    ['Command', service.command],
+    ['Port', service.port ? String(service.port) : undefined],
+    ['Domain', service.domain],
+    ['Git repo', service.gitRepo],
+    ['Branch', service.gitBranch],
+    ['Build path', service.buildPath],
+    ['CPU', service.cpu],
+    ['Memory', service.memory],
+    ['Restart', service.restartPolicy],
+    ['Healthcheck', service.healthcheckPath],
+  ];
+  const visibleConfig = configRows.filter(([, value]) => value);
+
+  return (
+    <aside className="canvas-inspector absolute right-4 top-4 bottom-4 w-[312px] panel-glass flex flex-col overflow-hidden">
+      <div className="flex items-center gap-3 px-4 pt-4 pb-3 border-b border-[var(--border-subtle)]">
+        <div
+          className="w-9 h-9 rounded-[var(--radius-md)] flex items-center justify-center flex-shrink-0"
+          style={{ background: `${accent}1c`, color: accent }}
+        >
+          <ServiceIcon service={service} size={16} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h3 className="text-sm font-semibold text-[var(--text-primary)] truncate">{service.name}</h3>
+          <div className="flex items-center gap-1.5 text-[11px] text-[var(--text-tertiary)]">
+            <span className={`status-dot ${serviceStatusClass(service.status)}`} />
+            <span style={{ color: statusColor(service.status) }}>{statusLabel(service.status)}</span>
+            <span>· {service.type}</span>
+            {service.environment && service.environment !== 'production' && <span>· {service.environment}</span>}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="w-7 h-7 rounded-md flex items-center justify-center text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-muted)]"
+          title="Close (Esc)"
+        >
+          <X size={14} />
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-4 py-3 space-y-4">
+        {(publicUrl || service.port) && (
+          <Section title="Address">
+            <div className="flex items-center gap-1.5 group">
+              <Globe size={11} className="text-[var(--text-tertiary)] flex-shrink-0" />
+              {publicUrl ? (
+                <a
+                  href={publicUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="mono text-[11px] text-[var(--accent-primary)] hover:underline break-all"
+                >
+                  {publicUrl.replace(/^https?:\/\//, '')}
+                </a>
+              ) : (
+                <span className="mono text-[11px] text-[var(--text-secondary)]">
+                  {service.name}:{service.port}
+                </span>
+              )}
+              <button
+                type="button"
+                onClick={copyAddress}
+                className="ml-auto text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
+                title="Copy address"
+              >
+                {copied ? <span className="text-[10px] text-[var(--success)]">Copied</span> : <Copy size={11} />}
+              </button>
+            </div>
+            {publicUrl && service.port ? (
+              <p className="mono text-[10.5px] text-[var(--text-tertiary)] mt-0.5 pl-4">
+                {service.name}:{service.port}
+              </p>
+            ) : null}
+          </Section>
+        )}
+
+        <Section title="Group">
+          <div className="flex items-center gap-2">
+            <Layers size={11} className="text-[var(--text-tertiary)] flex-shrink-0" />
+            <select
+              value={groupId ?? ''}
+              onChange={(event) => {
+                const next = event.target.value;
+                if (next === '__new__') {
+                  onNewGroupFor(service.id);
+                  return;
+                }
+                onAssignGroup(service.id, next === '' ? null : next);
+              }}
+              className="nodrag flex-1 h-7 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-2 text-[11px] text-[var(--text-primary)] outline-none focus:border-[var(--accent-primary)]"
+            >
+              <option value="">Ungrouped</option>
+              {groups.map((group) => (
+                <option key={group.id} value={group.id}>
+                  {group.title}
+                </option>
+              ))}
+              <option value="__new__">+ New group…</option>
+            </select>
+          </div>
+        </Section>
+
+        <Section
+          title={`Variables (${variables.length})`}
+          action={
+            <SectionLink onClick={() => onOpenSection(service.id, 'variables')}>
+              Manage
+            </SectionLink>
+          }
+        >
+          {variables.length === 0 ? (
+            <p className="text-[11px] text-[var(--text-muted)]">No variables yet.</p>
+          ) : (
+            <div className="space-y-1">
+              {variables.slice(0, 6).map((variable) => (
+                <div
+                  key={variable.key}
+                  className="flex items-center gap-2 px-2 py-1.5 rounded-[var(--radius-sm)] bg-[var(--surface-muted)]/50"
+                >
+                  <KeyRound size={9} className="text-[var(--text-tertiary)] flex-shrink-0" />
+                  <span className="mono text-[10px] text-[var(--text-primary)] truncate font-medium">
+                    {variable.key}
+                  </span>
+                  <span className="mono text-[10px] text-[var(--text-tertiary)] truncate ml-auto max-w-[130px]" title={variable.isSecret ? 'Secret' : variable.value}>
+                    {variable.isSecret ? '••••••••' : variable.value}
+                  </span>
+                </div>
+              ))}
+              {variables.length > 6 && (
+                <p className="text-[10px] text-[var(--text-muted)] pl-1">+{variables.length - 6} more</p>
+              )}
+            </div>
+          )}
+        </Section>
+
+        <Section
+          title="Config"
+          action={
+            <SectionLink onClick={() => onOpenSection(service.id, 'config')}>
+              Edit
+            </SectionLink>
+          }
+        >
+          {visibleConfig.length === 0 ? (
+            <p className="text-[11px] text-[var(--text-muted)]">No configuration set.</p>
+          ) : (
+            <dl className="space-y-1">
+              {visibleConfig.map(([label, value]) => (
+                <div key={label} className="flex items-baseline gap-2">
+                  <dt className="text-[10px] text-[var(--text-muted)] w-[70px] flex-shrink-0">{label}</dt>
+                  <dd className="mono text-[10.5px] text-[var(--text-secondary)] truncate" title={value}>
+                    {value}
+                  </dd>
+                </div>
+              ))}
+              {(service.replicas ?? 0) > 0 && (
+                <div className="flex items-baseline gap-2">
+                  <dt className="text-[10px] text-[var(--text-muted)] w-[70px] flex-shrink-0">Replicas</dt>
+                  <dd className="mono text-[10.5px] text-[var(--text-secondary)]">{service.replicas}</dd>
+                </div>
+              )}
+            </dl>
+          )}
+        </Section>
+
+        <Section title={`Connections (${connections.length})`}>
+          {connections.length === 0 ? (
+            <p className="text-[11px] text-[var(--text-muted)]">
+              No inferred connections. Reference another service via{' '}
+              <span className="mono">{'{{variable}}'}</span> placeholders in env vars.
+            </p>
+          ) : (
+            <div className="space-y-1.5">
+              {connections.map((conn) => (
+                <button
+                  key={conn.id}
+                  type="button"
+                  onClick={() => onSelectPeer(conn.peerId)}
+                  className="w-full text-left px-2.5 py-2 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] bg-[var(--surface-muted)]/40 hover:bg-[var(--surface-muted)] transition-colors"
+                >
+                  <div className="flex items-center gap-1.5 text-[11px] text-[var(--text-primary)]">
+                    <Link2 size={10} className="text-[var(--accent-primary)] flex-shrink-0" />
+                    <span className="truncate font-medium">{conn.outbound ? `→ ${conn.peer}` : `← ${conn.peer}`}</span>
+                  </div>
+                  <p className="mono text-[9.5px] text-[var(--text-tertiary)] truncate mt-0.5 pl-4">
+                    {conn.reasons.join(' · ')}
+                  </p>
+                </button>
+              ))}
+            </div>
+          )}
+        </Section>
+
+        {service.updatedAt && (
+          <p className="text-[10px] text-[var(--text-muted)] pt-1">
+            Updated {formatRelative(service.updatedAt)}
+          </p>
+        )}
+      </div>
+
+      <div className="border-t border-[var(--border-subtle)] px-4 py-3 space-y-2">
+        <button
+          type="button"
+          onClick={() => onOpenService(service.id)}
+          className="w-full flex items-center justify-center gap-2 h-9 rounded-[var(--radius-md)] text-[var(--accent-on)] text-[13px] font-medium"
+          style={{ background: 'var(--accent-primary)' }}
+        >
+          <ArrowUpRight size={14} />
+          Open service
+        </button>
+        <div className="grid grid-cols-3 gap-1.5">
+          <button
+            type="button"
+            disabled={actions.pending || readOnly}
+            onClick={actions.deploy}
+            className="flex items-center justify-center gap-1 h-8 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors disabled:opacity-40"
+          >
+            {actions.deployPending ? <Loader2 size={11} className="animate-spin" /> : <Rocket size={11} />}
+            Deploy
+          </button>
+          {service.status !== 'running' ? (
+            <button
+              type="button"
+              disabled={actions.pending || readOnly}
+              onClick={actions.start}
+              className="flex items-center justify-center gap-1 h-8 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors disabled:opacity-40"
+            >
+              <Play size={11} />
+              Start
+            </button>
+          ) : (
+            <button
+              type="button"
+              disabled={actions.pending || readOnly}
+              onClick={actions.restart}
+              className="flex items-center justify-center gap-1 h-8 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors disabled:opacity-40"
+            >
+              {actions.restartPending ? <Loader2 size={11} className="animate-spin" /> : <Play size={11} />}
+              Restart
+            </button>
+          )}
+          <button
+            type="button"
+            disabled={actions.pending || readOnly || service.status !== 'running'}
+            onClick={actions.stop}
+            className="flex items-center justify-center gap-1 h-8 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors disabled:opacity-40"
+          >
+            <Square size={11} />
+            Stop
+          </button>
+        </div>
+        <button
+          type="button"
+          disabled={actions.pending || readOnly}
+          onClick={actions.remove}
+          className="w-full flex items-center justify-center gap-1.5 h-8 rounded-[var(--radius-sm)] text-[11px] font-medium text-[var(--error)] hover:bg-[var(--error-soft)] transition-colors disabled:opacity-40"
+        >
+          <Trash2 size={11} />
+          Delete service
+        </button>
+      </div>
+    </aside>
+  );
+}

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

@@ -1,8 +1,10 @@
 import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
 import type { ServiceEntity } from '@/lib/api-client';
 import { serviceStatusClass } from '@/lib/api-client';
-import { Box, Globe, Database, Terminal, ExternalLink, Copy, Layers } from 'lucide-react';
+import { Box, ExternalLink, Copy, Layers, Loader2 } from 'lucide-react';
 import { useState } from 'react';
+import { serviceIcon, serviceAccent } from './service-visuals';
+import { ServiceIcon } from './ServiceIcon';
 
 export type ServiceNodeData = {
   service: ServiceEntity;
@@ -12,37 +14,13 @@ export type ServiceNodeData = {
 
 export type GroupNodeData = {
   title: string;
+  onRename?: (groupId: string, title: string) => void;
+  renameNonce?: number;
 };
 
 export type ServiceNodeType = Node<ServiceNodeData, 'serviceNode'>;
 export type GroupNodeType = Node<GroupNodeData, 'groupNode'>;
 
-function renderServiceTypeIcon(type: string, size = 18) {
-  switch (type) {
-    case 'web':
-      return <Globe size={size} />;
-    case 'database':
-      return <Database size={size} />;
-    case 'worker':
-      return <Terminal size={size} />;
-    default:
-      return <Box size={size} />;
-  }
-}
-
-function serviceTypeColor(type: string): string {
-  switch (type) {
-    case 'web':
-      return '#7ab8ff';
-    case 'database':
-      return '#b4e34a';
-    case 'worker':
-      return 'var(--accent-primary)';
-    default:
-      return '#9295a4';
-  }
-}
-
 function statusLabel(status: string): string {
   switch (status) {
     case 'running':
@@ -72,27 +50,30 @@ function statusColor(status: string): string {
   }
 }
 
+const TRANSIENT_STATUSES = new Set(['building', 'deploying', 'pending', 'rolling_back']);
+
 export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
   const { service, selected } = data;
-  const typeColor = serviceTypeColor(service.type);
+  const brand = serviceIcon(service);
+  const typeColor = brand?.color ?? serviceAccent(service);
   const replicas = service.replicas ?? 0;
   const stateColor = statusColor(service.status);
+  const isTransient = TRANSIENT_STATUSES.has(service.status);
 
   const publicUrl = service.domain ? `https://${service.domain}` : service.publicUrl;
   const internalAddr = service.port ? `${service.name}:${service.port}` : service.name;
 
   return (
     <div
-      className={`rounded-[var(--radius-lg)] border transition-all duration-200 group relative overflow-hidden ${
+      className={`w-full rounded-[var(--radius-lg)] border transition-[border-color,box-shadow,transform] duration-150 group relative overflow-hidden ${
         selected
-          ? 'border-[var(--accent-primary)] bg-[var(--accent-primary-soft)] shadow-lg shadow-[var(--accent-primary-glow)]'
+          ? 'border-[var(--accent-primary)] bg-[var(--accent-primary-soft)] shadow-[0_0_0_1px_var(--accent-primary),0_12px_36px_rgba(0,0,0,0.5)]'
-          : 'border-[var(--border-subtle)] bg-[var(--surface-card)] hover:border-[var(--border-default)] hover:shadow-lg'
+          : 'border-[var(--border-subtle)] bg-[var(--surface-card)] hover:border-[var(--border-default)] hover:shadow-[0_12px_32px_rgba(0,0,0,0.45)] hover:-translate-y-px'
       }`}
-      style={{ minWidth: 220, maxWidth: 280 }}
     >
       <div
         className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
-        style={{ background: `${typeColor}10` }}
+        style={{ background: `${typeColor}08` }}
       />
 
       <Handle id="t-l" type="target" position={Position.Left} className="!opacity-0 !w-2 !h-2 !border-0" />
@@ -105,22 +86,26 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
         style={{ background: stateColor }}
       />
 
-      <div className="relative p-4">
+      <div className="relative px-3.5 pt-3.5 pb-3">
-        <div className="flex items-start gap-3 mb-3">
+        <div className="flex items-center gap-3 mb-2.5">
           <div
-            className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 transition-all duration-200 ${
+            className="w-9 h-9 rounded-[var(--radius-md)] flex items-center justify-center flex-shrink-0 transition-all duration-200"
-              selected ? 'ring-2 ring-white/20' : ''
-            }`}
             style={{
-              background: selected ? typeColor : `${typeColor}20`,
+              background: selected && !brand ? typeColor : `${typeColor}1c`,
-              color: selected ? 'white' : typeColor,
+              color: selected && !brand ? 'var(--bg-void)' : typeColor,
             }}
           >
-            {renderServiceTypeIcon(service.type, 18)}
+            {isTransient ? (
+              <Loader2 size={16} className="animate-spin" />
+            ) : (
+              <ServiceIcon service={service} size={17} />
+            )}
           </div>
-          <div className="min-w-0 flex-1 pt-0.5">
+          <div className="min-w-0 flex-1">
-            <h4 className="font-semibold text-sm text-[var(--text-primary)] truncate tracking-tight">{service.name}</h4>
+            <h4 className="font-semibold text-[13px] leading-tight text-[var(--text-primary)] truncate tracking-tight">
-            <p className="text-[11px] text-[var(--text-tertiary)] truncate mt-0.5">
+              {service.name}
+            </h4>
+            <p className="text-[10.5px] text-[var(--text-tertiary)] truncate mt-0.5">
               {service.type}
               {service.environment && service.environment !== 'production' ? ` · ${service.environment}` : ''}
             </p>
@@ -133,7 +118,7 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
           )}
         </div>
 
-        <div className="flex items-center gap-2 mb-3 px-2.5 py-1.5 rounded-lg bg-[var(--surface-muted)]/50 border border-[var(--border-subtle)]/50 group/addr">
+        <div className="flex items-center gap-2 mb-2.5 px-2.5 py-1.5 rounded-[var(--radius-sm)] bg-[var(--surface-muted)]/60 border border-[var(--border-subtle)]/60 group/addr">
           <ExternalLink size={10} className="text-[var(--text-tertiary)] flex-shrink-0" />
           {publicUrl ? (
             <a
@@ -141,12 +126,12 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
               target="_blank"
               rel="noopener noreferrer"
               onClick={(e) => e.stopPropagation()}
-              className="text-[10px] text-[var(--accent-primary)] truncate mono hover:underline"
+              className="text-[10.5px] text-[var(--accent-primary)] truncate mono hover:underline"
             >
               {publicUrl.replace(/^https?:\/\//, '')}
             </a>
           ) : (
-            <span className="text-[10px] text-[var(--text-secondary)] truncate mono" title="Internal network address">
+            <span className="text-[10.5px] text-[var(--text-secondary)] truncate mono" title="Internal network address">
               {internalAddr}
             </span>
           )}
@@ -164,14 +149,14 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
         </div>
 
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1.5">
             <span className={`status-dot ${serviceStatusClass(service.status)}`} />
-            <span className="text-[11px] font-semibold tracking-wide uppercase" style={{ color: stateColor }}>
+            <span className="text-[10px] font-semibold tracking-[0.08em] uppercase" style={{ color: stateColor }}>
               {statusLabel(service.status)}
             </span>
           </div>
           {service.image && (
-            <span className="text-[10px] text-[var(--text-tertiary)] truncate mono max-w-[120px]" title={service.image}>
+            <span className="text-[9.5px] text-[var(--text-muted)] truncate mono max-w-[110px]" title={service.image}>
               {service.image}
             </span>
           )}
@@ -181,29 +166,40 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
   );
 }
 
-export function GroupNode({ data }: NodeProps<GroupNodeType>) {
+export function GroupNode({ id, data }: NodeProps<GroupNodeType>) {
   const [isHovered, setIsHovered] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(data.title);
+
+  // Context-menu rename requests bump the nonce; enter edit mode when it
+  // changes. Render-phase state adjustment — the React-sanctioned pattern.
+  const [seenRenameNonce, setSeenRenameNonce] = useState(data.renameNonce ?? 0);
+  const incomingNonce = data.renameNonce ?? 0;
+  if (incomingNonce > seenRenameNonce) {
+    setSeenRenameNonce(incomingNonce);
+    setDraft(data.title);
+    setEditing(true);
+  }
+
+  const commit = () => {
+    const next = draft.trim() || data.title;
+    setEditing(false);
+    if (next !== data.title) {
+      data.onRename?.(id, next);
+    }
+  };
 
   return (
     <div
-      className="h-full w-full rounded-[var(--radius-xl)] border-2 border-dashed transition-all duration-200 relative overflow-hidden"
+      className="h-full w-full rounded-[var(--radius-xl)] border-2 border-dashed transition-all duration-200 relative"
       style={{
-        borderColor: isHovered ? 'var(--accent-primary)' : 'var(--border-default)',
+        borderColor: isHovered ? 'var(--border-strong)' : 'var(--border-default)',
-        background: isHovered ? 'rgba(232, 49, 106, 0.03)' : 'var(--surface-muted)/30',
+        background: isHovered ? 'var(--accent-primary-soft)' : 'rgba(255,255,255,0.02)',
       }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <div
-        className="absolute inset-0 opacity-0 transition-opacity duration-300 pointer-events-none"
-        style={{
-          background: 'rgba(232,49,106,0.03)',
-          opacity: isHovered ? 1 : 0,
-        }}
-      />
-
       <div className="relative p-4">
-        <div className="flex items-center justify-between">
         <div className="flex items-center gap-2.5">
           <div
             className="w-7 h-7 rounded-lg flex items-center justify-center transition-colors duration-200"
@@ -214,8 +210,34 @@ export function GroupNode({ data }: NodeProps<GroupNodeType>) {
           >
             <Box size={14} />
           </div>
-            <h3 className="text-sm font-semibold text-[var(--text-primary)] tracking-tight">{data.title}</h3>
+          {editing ? (
-          </div>
+            <input
+              autoFocus
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onBlur={commit}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') commit();
+                if (e.key === 'Escape') {
+                  setDraft(data.title);
+                  setEditing(false);
+                }
+              }}
+              className="nodrag h-7 px-2 rounded-[var(--radius-sm)] border border-[var(--border-default)] bg-[var(--surface-card)] text-sm font-semibold text-[var(--text-primary)] outline-none focus:border-[var(--accent-primary)]"
+            />
+          ) : (
+            <h3
+              className="text-sm font-semibold text-[var(--text-primary)] tracking-tight"
+              onDoubleClick={(e) => {
+                e.stopPropagation();
+                setDraft(data.title);
+                setEditing(true);
+              }}
+              title="Double-click to rename"
+            >
+              {data.title}
+            </h3>
+          )}
         </div>
 
         <p

app/frontend/src/features/workspace/canvas/service-visuals.tsx

@@ -0,0 +1,112 @@
+import { Box, Globe, Database, Terminal, Clock } from 'lucide-react';
+
+export function serviceTypeIcon(type: string, size = 18) {
+  switch (type) {
+    case 'web':
+      return <Globe size={size} />;
+    case 'database':
+      return <Database size={size} />;
+    case 'worker':
+      return <Terminal size={size} />;
+    case 'cron':
+      return <Clock size={size} />;
+    default:
+      return <Box size={size} />;
+  }
+}
+
+export function serviceTypeColor(type: string): string {
+  switch (type) {
+    case 'web':
+      return '#7ab8ff';
+    case 'database':
+      return '#b4e34a';
+    case 'worker':
+      return '#f2c94c';
+    case 'cron':
+      return '#f2994a';
+    default:
+      return '#9295a4';
+  }
+}
+
+export type ServiceBrandIcon = {
+  slug: string;
+  color: string;
+};
+
+const TECH_ICONS: (ServiceBrandIcon & { patterns: RegExp[] })[] = [
+  { slug: 'postgresql', color: '#7ab8ff', patterns: [/postgres/i, /postgis/i] },
+  { slug: 'redis', color: '#ff6b6b', patterns: [/redis/i, /dragonfly/i, /valkey/i, /keydb/i] },
+  { slug: 'mysql', color: '#5ba4e5', patterns: [/mysql/i] },
+  { slug: 'mariadb', color: '#4ea5ff', patterns: [/mariadb/i] },
+  { slug: 'mongodb', color: '#47a248', patterns: [/mongo/i] },
+  { slug: 'clickhouse', color: '#ffcc01', patterns: [/clickhouse/i] },
+  { slug: 'couchdb', color: '#e42528', patterns: [/couchdb/i] },
+  { slug: 'sqlite', color: '#69b7e4', patterns: [/sqlite/i] },
+  { slug: 'influxdb', color: '#22adf6', patterns: [/influx/i] },
+  { slug: 'elasticsearch', color: '#fec514', patterns: [/elastic/i, /opensearch/i] },
+  { slug: 'meilisearch', color: '#ff5caa', patterns: [/meili/i] },
+  { slug: 'typesense', color: '#d90368', patterns: [/typesense/i] },
+  { slug: 'qdrant', color: '#dc244c', patterns: [/qdrant/i] },
+  { slug: 'weaviate', color: '#01c9a7', patterns: [/weaviate/i] },
+  { slug: 'minio', color: '#c72e49', patterns: [/minio/i] },
+  { slug: 'rabbitmq', color: '#ff6600', patterns: [/rabbitmq/i, /rabbit/i] },
+  { slug: 'apachekafka', color: '#d6dae4', patterns: [/kafka/i] },
+  { slug: 'natsdotio', color: '#8be1d3', patterns: [/\bnats/i] },
+  { slug: 'nginx', color: '#009639', patterns: [/nginx/i] },
+  { slug: 'caddy', color: '#1f88c0', patterns: [/caddy/i] },
+  { slug: 'traefikproxy', color: '#24a1c1', patterns: [/traefik/i] },
+  { slug: 'nodedotjs', color: '#5fa04e', patterns: [/node(?=[:\-\d]|$)/i, /nodejs/i] },
+  { slug: 'go', color: '#00add8', patterns: [/golang/i, /(?:^|[^a-z])go(?=[:\-\d]|$)/i] },
+  { slug: 'python', color: '#6fa8dc', patterns: [/python/i, /\bpy(?:thon)?(?=[:\-\d]|$)/i] },
+  { slug: 'rust', color: '#f74c00', patterns: [/rust/i] },
+  { slug: 'php', color: '#8892bf', patterns: [/php/i] },
+  { slug: 'ruby', color: '#cc342d', patterns: [/ruby/i, /rails/i] },
+  { slug: 'openjdk', color: '#e6a23c', patterns: [/java/i, /openjdk/i, /jdk/i, /jre/i] },
+  { slug: 'dotnet', color: '#6f4bd8', patterns: [/dotnet/i, /aspnet/i] },
+  { slug: 'deno', color: '#70ffaf', patterns: [/\bdeno/i] },
+  { slug: 'bun', color: '#f9f1e1', patterns: [/bun(?=[:\-\d]|$)/i] },
+  { slug: 'react', color: '#61dafb', patterns: [/react/i] },
+  { slug: 'vuedotjs', color: '#4fc08d', patterns: [/vue/i] },
+  { slug: 'angular', color: '#dd0031', patterns: [/angular/i] },
+  { slug: 'svelte', color: '#ff3e00', patterns: [/svelte/i] },
+  { slug: 'nextdotjs', color: '#e6edf3', patterns: [/nextjs/i, /next\.js/i] },
+  { slug: 'nuxtdotjs', color: '#00dc82', patterns: [/nuxt/i] },
+  { slug: 'astro', color: '#ff5d01', patterns: [/astro/i] },
+  { slug: 'prometheus', color: '#e6522c', patterns: [/prometheus/i] },
+  { slug: 'grafana', color: '#f46800', patterns: [/grafana/i] },
+  { slug: 'uptimekuma', color: '#5cdd8b', patterns: [/uptime.?kuma/i, /\bkuma/i] },
+  { slug: 'n8n', color: '#ea4b71', patterns: [/n8n/i] },
+  { slug: 'wordpress', color: '#4b9cd3', patterns: [/wordpress/i, /\bwp-/i] },
+  { slug: 'ghost', color: '#a8b8c4', patterns: [/ghost/i] },
+  { slug: 'nextcloud', color: '#0082c9', patterns: [/nextcloud/i] },
+  { slug: 'immich', color: '#7c9ef5', patterns: [/immich/i] },
+  { slug: 'supabase', color: '#3fcf8e', patterns: [/supabase/i] },
+  { slug: 'pocketbase', color: '#b8dbe4', patterns: [/pocketbase/i] },
+  { slug: 'keycloak', color: '#d6dae4', patterns: [/keycloak/i] },
+  { slug: 'authentik', color: '#fd4b2d', patterns: [/authentik/i] },
+  { slug: 'portainer', color: '#13bef9', patterns: [/portainer/i] },
+  { slug: 'docker', color: '#2496ed', patterns: [/docker/i, /dind/i] },
+  { slug: 'kubernetes', color: '#326ce5', patterns: [/kubernetes/i, /\bk8s/i] },
+];
+
+export type ServiceIconInput = { image?: string; name?: string; type?: string };
+
+export function serviceIcon(service: ServiceIconInput): ServiceBrandIcon | null {
+  const text = `${service.image ?? ''} ${service.name ?? ''}`.toLowerCase();
+  for (const icon of TECH_ICONS) {
+    if (icon.patterns.some((pattern) => pattern.test(text))) {
+      return icon;
+    }
+  }
+  return null;
+}
+
+export function serviceIconUrl(icon: ServiceBrandIcon): string {
+  return `https://cdn.simpleicons.org/${icon.slug}/${icon.color.replace('#', '')}`;
+}
+
+export function serviceAccent(service: ServiceIconInput): string {
+  return serviceIcon(service)?.color ?? serviceTypeColor(service.type ?? 'service');
+}

app/frontend/src/features/workspace/model.ts

@@ -44,14 +44,17 @@ export const DEFAULT_VIEWPORT: CanvasViewport = {
   zoom: 1,
 };
 
-export function createDefaultCanvasMetadata(services: ServiceEntity[]): ProjectCanvasMetadata {
+export function createDefaultCanvasMetadata(
+  services: ServiceEntity[],
+  layout?: Map<string, CanvasPoint>,
+): ProjectCanvasMetadata {
   const nodes = services.map((service, index) => {
     const col = index % 3;
     const row = Math.floor(index / 3);
 
     return {
       serviceId: service.id,
-      position: {
+      position: layout?.get(service.id) ?? {
         x: 70 + col * 260,
         y: 80 + row * 170,
       },

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

@@ -621,6 +621,8 @@ export function ProjectWorkspacePage() {
     isDemoMode
       ? `/projects/${projectId}/services/${serviceId}?demo=1`
       : `/projects/${projectId}/services/${serviceId}`;
+  const serviceSectionHref = (serviceId: string, section: string) =>
+    `${serviceHref(serviceId)}${isDemoMode ? '&' : '?'}section=${section}`;
 
   if (!isDemoMode && projectQuery.isLoading) {
     return (
@@ -645,7 +647,7 @@ export function ProjectWorkspacePage() {
             This project may have been deleted or you don't have access.
           </p>
           <button
-            onClick={() => navigate('/projects')}
+            onClick={() => navigate(isDemoMode ? '/projects?demo=1' : '/projects')}
             className="mt-6 px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm font-medium hover:border-[var(--border-default)] transition-colors"
           >
             Back to Projects
@@ -655,91 +657,29 @@ export function ProjectWorkspacePage() {
     );
   }
 
+  const canvasView = activeView === 'canvas';
+
+  const projectsHref = isDemoMode ? '/projects?demo=1' : '/projects';
+
   return (
-    <div className="min-h-screen">
+    <div className="flex h-dvh min-h-0 flex-col bg-[var(--bg-void)]">
-      {/* Header */}
+      {/* Slim workspace bar — tabs + project meta, canvas fills everything below */}
-      <div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
+      <div className="flex h-12 shrink-0 items-center gap-3 border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/80 px-4 backdrop-blur-sm">
-        <div className="w-full px-8 py-4">
-          <div className="flex items-center justify-between gap-4">
-            <div className="flex items-center gap-4">
         <button
-                onClick={() => navigate('/projects')}
+          onClick={() => navigate(projectsHref)}
-                className="flex items-center gap-2 text-sm text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors"
+          className="flex items-center gap-1.5 text-xs text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors shrink-0"
         >
-                <ArrowLeft size={16} />
+          <ArrowLeft size={14} />
-                <span>Projects</span>
+          <span className="hidden sm:inline">Projects</span>
         </button>
-              <div className="w-px h-5 bg-[var(--border-subtle)]" />
+        <div className="w-px h-4 bg-[var(--border-subtle)] shrink-0" />
-              <div>
+        <h1 className="v-title text-sm shrink-0 min-w-0 truncate">{project.name}<span className="v-cursor">_</span></h1>
-                <h1 className="v-title">{project.name}<span className="v-cursor">_</span></h1>
+        <span className="hidden lg:flex items-center gap-1.5 text-[11px] text-[var(--text-tertiary)] shrink-0">
-                <p className="text-sm text-[var(--text-secondary)]">{project.description || 'No description'}</p>
+          {services.length} service{services.length !== 1 ? 's' : ''} · {runningServices} running
-              </div>
+        </span>
-            </div>
 
-            <div className="flex items-center gap-6">
+        {/* View tabs */}
-              {/* Stats */}
+        <nav className="flex items-center gap-0.5 rounded-full bg-[var(--surface-muted)] border border-[var(--border-subtle)] p-0.5 mx-2 overflow-x-auto min-w-0">
-              <div className="hidden md:flex items-center gap-6">
-                <div className="text-center">
-                  <p className="text-2xl font-semibold text-[var(--text-primary)]">{services.length}</p>
-                  <p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)]">Services</p>
-                </div>
-                <div className="text-center">
-                  <p className="text-2xl font-semibold text-[var(--success)]">{runningServices}</p>
-                  <p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)]">Running</p>
-                </div>
-                <div className="w-px h-8 bg-[var(--border-subtle)]" />
-                <LiveIndicator isLive={runningServices > 0} />
-                <div className="w-px h-8 bg-[var(--border-subtle)]" />
-                <div className="flex items-center gap-1.5 text-xs text-[var(--text-tertiary)]">
-                  <Clock size={12} />
-                  <span>{formatRelative(project.updatedAt)}</span>
-                </div>
-              </div>
-
-              {/* Search / Command Palette */}
-              <button
-                onClick={() => setCommandPaletteOpen(true)}
-                className="hidden md:flex items-center gap-2 h-9 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-muted)] text-sm hover:border-[var(--border-default)] hover:text-[var(--text-secondary)] transition-colors"
-              >
-                <Search size={14} />
-                <span>Search...</span>
-                <kbd className="ml-2 px-1.5 py-0.5 rounded bg-[var(--surface-card)] text-[10px] font-mono">⌘K</kbd>
-              </button>
-
-              {/* Add Service Button */}
-              {!isDemoMode && (
-                <button
-                  onClick={openAddService}
-                  className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg hover:shadow-xl transition-all"
-                  style={{ background: 'var(--accent-primary)' }}
-                >
-                  <Plus size={16} />
-                  <span className="hidden sm:inline">Add Service</span>
-                </button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Demo Mode Banner */}
-      {isDemoMode && (
-        <div className="w-full px-8 py-4">
-          <div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
-            <div className="flex items-center gap-2 text-sm text-[var(--warning)]">
-              <Sparkles size={16} />
-              <span>Demo mode active — using sample data for preview</span>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Main Content */}
-      <div className="w-full px-8 py-6">
-        <div className="grid grid-cols-1 lg:grid-cols-[200px_1fr] gap-6">
-          {/* Sidebar Navigation */}
-          <aside className="lg:sticky lg:top-6 lg:h-fit">
-            <nav className="flex lg:flex-col gap-1 overflow-x-auto lg:overflow-visible pb-2 lg:pb-0">
           {viewItems.filter((item) => signedIn || !item.authOnly).map((item) => {
             const active = activeView === item.key;
             const Icon = item.icon;
@@ -751,35 +691,82 @@ export function ProjectWorkspacePage() {
                   next.set('view', item.key);
                   return next;
                 })}
-                    className={`flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-md)] transition-all whitespace-nowrap ${
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all whitespace-nowrap ${
                   active
-                        ? 'bg-[var(--accent-primary-soft)] text-[var(--accent-primary)]'
+                    ? 'bg-[var(--surface-card)] text-[var(--text-primary)] shadow-sm'
-                        : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-muted)]'
+                    : 'text-[var(--text-tertiary)] hover:text-[var(--text-secondary)]'
                 }`}
               >
-                    <Icon size={18} />
+                <Icon size={13} />
-                    <span className="text-sm font-medium">{item.label}</span>
+                <span className="hidden md:inline">{item.label}</span>
-                    {active && (
-                      <div className="hidden lg:block absolute left-0 w-0.5 h-5 bg-[var(--accent-primary)] rounded-full" />
-                    )}
               </button>
             );
           })}
         </nav>
-          </aside>
 
-          {/* Content Area */}
+        <div className="ml-auto flex items-center gap-2 shrink-0">
-          <section className="min-w-0">
+          <div className="hidden xl:block">
-            {activeView === 'canvas' && (
+            <LiveIndicator isLive={runningServices > 0} />
+          </div>
+          <span className="hidden xl:flex items-center gap-1.5 text-[11px] text-[var(--text-tertiary)]">
+            <Clock size={11} />
+            {formatRelative(project.updatedAt)}
+          </span>
+          <button
+            onClick={() => setCommandPaletteOpen(true)}
+            className="hidden md:flex items-center gap-2 h-8 px-2.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-muted)] text-xs hover:border-[var(--border-default)] hover:text-[var(--text-secondary)] transition-colors"
+          >
+            <Search size={12} />
+            <kbd className="px-1 py-0.5 rounded bg-[var(--surface-card)] text-[10px] font-mono">⌘K</kbd>
+          </button>
+          {!isDemoMode && (
+            <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"
+              style={{ background: 'var(--accent-primary)' }}
+            >
+              <Plus size={14} />
+              <span className="hidden sm:inline">Add Service</span>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Content */}
+      {canvasView ? (
+        <div className="relative flex-1 min-h-0">
           <ProjectCanvas
             projectId={project.id}
             services={services}
             variablesByService={variablesByService}
             onAddService={openAddService}
             onOpenService={(serviceId) => navigate(serviceHref(serviceId))}
+            onOpenSection={(serviceId, section) => navigate(serviceSectionHref(serviceId, section))}
+            readOnly={isDemoMode}
           />
+          {isDemoMode && (
+            <div className="absolute top-4 left-1/2 -translate-x-1/2 pointer-events-none">
+              <span className="canvas-pill flex items-center gap-1.5 px-3 py-1.5 text-[11px] font-medium text-[var(--warning)]">
+                <Sparkles size={12} />
+                Demo data
+              </span>
+            </div>
           )}
-
+        </div>
+      ) : (
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        {isDemoMode && (
+          <div className="w-full px-8 pt-6">
+            <div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
+              <div className="flex items-center gap-2 text-sm text-[var(--warning)]">
+                <Sparkles size={16} />
+                <span>Demo mode active - using sample data for preview</span>
+              </div>
+            </div>
+          </div>
+        )}
+        <div className="w-full px-8 py-6">
+          <section className="min-w-0">
             {activeView === 'observability' && (
               <div className="space-y-6">
                 {/* Health Summary */}
@@ -966,6 +953,7 @@ export function ProjectWorkspacePage() {
           </section>
         </div>
       </div>
+      )}
 
       {/* Create Service Dialog */}
       {!isDemoMode && (

app/frontend/src/features/workspace/storage.ts

@@ -171,9 +171,13 @@ export function saveCanvasMetadata(projectId: string, metadata: ProjectCanvasMet
   canvasStorage()?.setItem(canvasStorageKey(projectId), JSON.stringify(metadata));
 }
 
-export function loadCanvasMetadata(projectId: string, services: ServiceEntity[]): ProjectCanvasMetadata {
+export function loadCanvasMetadata(
+  projectId: string,
+  services: ServiceEntity[],
+  layout?: Map<string, { x: number; y: number }>,
+): ProjectCanvasMetadata {
   const key = canvasStorageKey(projectId);
-  const fallback = createDefaultCanvasMetadata(services);
+  const fallback = createDefaultCanvasMetadata(services, layout);
   const serviceIds = new Set(services.map((service) => service.id));
 
   const raw = canvasStorage()?.getItem(key);
@@ -195,7 +199,14 @@ export function loadCanvasMetadata(projectId: string, services: ServiceEntity[])
     const nodeMap = new Map(parsed.nodes.map((node) => [node.serviceId, node]));
     const normalizedNodes: CanvasNodeLayout[] = [];
 
-    for (const [index, service] of services.entries()) {
+    // Services added after the layout was saved park in a trailing column to
+    // the right of everything placed so far, instead of overlapping nodes the
+    // user already arranged.
+    const placedXs = parsed.nodes.map((node) => node.position.x);
+    let parkedRow = 0;
+    const parkedX = placedXs.length > 0 ? Math.max(...placedXs) + 320 : 70;
+
+    for (const service of services) {
       const existing = nodeMap.get(service.id);
       if (existing) {
         normalizedNodes.push({
@@ -206,15 +217,14 @@ export function loadCanvasMetadata(projectId: string, services: ServiceEntity[])
         continue;
       }
 
-      const col = index % 3;
+      const parked = layout?.get(service.id);
-      const row = Math.floor(index / 3);
       normalizedNodes.push({
         serviceId: service.id,
-        position: {
+        position: parked ?? { x: parkedX, y: 80 + parkedRow * 160 },
-          x: 70 + col * 260,
-          y: 80 + row * 170,
-        },
       });
+      if (!parked) {
+        parkedRow += 1;
+      }
     }
 
     const seenEdgeIds = new Set<string>();

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

@@ -7806,6 +7806,8 @@ export interface components {
             is_official?: boolean;
             /** @description Owning user ID for user-created templates; null for official presets */
             owner_id?: string | null;
+            /** @description Whether a user-created template is published to the public catalog */
+            is_public?: boolean;
             /**
              * Format: date-time
              * @description Creation timestamp
@@ -7830,6 +7832,8 @@ export interface components {
             config: Record<string, never>;
             /** @description Configurable variables exposed at deploy time */
             variables?: components["schemas"]["TemplateVariable"][];
+            /** @description Publish this template to the public catalog (visible anonymously) */
+            is_public?: boolean;
         };
         TemplateConfig: {
             /** @description Service type for created service */

app/frontend/src/index.css

@@ -634,13 +634,13 @@ textarea {
 .edge-premium .react-flow__edge-path {
   stroke-linecap: round;
   stroke-linejoin: round;
-  filter: drop-shadow(0 0 4px rgba(156, 126, 240, 0.3));
+  filter: drop-shadow(0 0 4px rgba(180, 227, 74, 0.25));
   transition: filter 0.2s ease, stroke-width 0.2s ease;
 }
 
 .edge-premium:hover .react-flow__edge-path {
-  filter: drop-shadow(0 0 8px rgba(156, 126, 240, 0.5));
+  filter: drop-shadow(0 0 8px rgba(180, 227, 74, 0.45));
-  stroke-width: 3px;
+  stroke-width: 2.6px;
 }
 
 /* ============================================
@@ -1685,3 +1685,86 @@ textarea {
   margin: 24px 0;
 }
 .docs-article img { max-width: 100%; border-radius: var(--radius-md); }
+
+/* ============================================
+   CANVAS — fullscreen workspace graph
+   ============================================ */
+
+/* Floating glass pills (zoom controls, env filter, hints) */
+.canvas-pill {
+  display: inline-flex;
+  align-items: center;
+  background: rgba(19, 21, 24, 0.82);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--border-default);
+  border-radius: 999px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+.canvas-pill-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  height: 30px;
+  padding: 0 6px;
+  border-radius: 999px;
+  color: var(--text-tertiary);
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.canvas-pill-btn:hover {
+  color: var(--text-primary);
+  background: var(--surface-muted);
+}
+
+/* React Flow pane affordances */
+.react-flow__pane {
+  cursor: grab;
+}
+.react-flow__pane.dragging {
+  cursor: grabbing;
+}
+.react-flow__node.selectable:focus {
+  outline: none;
+}
+
+/* Marquee selection tint */
+.react-flow__selection {
+  background: var(--accent-primary-soft);
+  border: 1px solid var(--border-strong);
+}
+
+/* MiniMap — match surface card, dimmed nodes */
+.react-flow__minimap {
+  border-radius: var(--radius-md) !important;
+  border: 1px solid var(--border-default);
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+.react-flow__minimap-svg {
+  display: block;
+}
+
+/* Inspector panel entrance */
+.canvas-inspector {
+  animation: canvas-panel-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes canvas-panel-in {
+  from {
+    opacity: 0;
+    transform: translateX(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .canvas-inspector {
+    animation: none;
+  }
+}

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

@@ -124,6 +124,7 @@ export type TemplateEntity = {
   variablesRaw: string;
   isOfficial: boolean;
   ownerId: string | null;
+  isPublic: boolean;
   createdAt?: string;
   updatedAt?: string;
 };
@@ -618,6 +619,7 @@ function normalizeTemplate(template: RawServiceTemplate): TemplateEntity | null
     variablesRaw: template.variables ?? '',
     isOfficial: Boolean(template.is_official),
     ownerId: template.owner_id ?? null,
+    isPublic: Boolean(template.is_public),
     createdAt: template.created_at,
     updatedAt: template.updated_at,
   };
@@ -1361,6 +1363,7 @@ export type TemplateWriteInput = {
   logo?: string;
   config: Record<string, unknown>;
   variables?: TemplateVariableEntity[];
+  isPublic?: boolean;
 };
 
 function templateWriteBody(input: TemplateWriteInput): string {
@@ -1371,6 +1374,7 @@ function templateWriteBody(input: TemplateWriteInput): string {
     logo: input.logo ?? '',
     config: input.config,
     variables: input.variables ?? [],
+    is_public: input.isPublic ?? false,
   });
 }
 

app/frontend/src/lib/demo-data.ts

@@ -26,9 +26,9 @@ export const demoProjects: ProjectEntity[] = [
     createdAt: '2026-03-12T09:30:00Z',
     updatedAt: '2026-03-31T09:10:00Z',
     stats: {
-      service_count: 4,
+      service_count: 5,
       deployment_count: 27,
-      running_services: 3,
+      running_services: 4,
       last_deployment: '2026-03-31T08:42:00Z',
     },
   },
@@ -71,9 +71,11 @@ export const demoServicesByProject: Record<string, ServiceEntity[]> = {
       type: 'web',
       status: 'running',
       environment: 'production',
-      image: 'ghcr.io/containr/web:2026.03.31',
+      image: 'ghcr.io/containr/web-react:v42',
       command: 'npm run serve',
       gitBranch: 'main',
+      port: 3000,
+      domain: 'web.containr.local',
       createdAt: '2026-03-12T10:00:00Z',
       updatedAt: '2026-03-31T08:42:00Z',
     },
@@ -84,9 +86,11 @@ export const demoServicesByProject: Record<string, ServiceEntity[]> = {
       type: 'web',
       status: 'running',
       environment: 'production',
-      image: 'ghcr.io/containr/api:2026.03.31',
+      image: 'ghcr.io/containr/api-go:v2.4.1',
       command: './server',
       gitBranch: 'main',
+      port: 8080,
+      domain: 'api.containr.local',
       createdAt: '2026-03-12T10:02:00Z',
       updatedAt: '2026-03-31T08:43:00Z',
     },
@@ -97,9 +101,10 @@ export const demoServicesByProject: Record<string, ServiceEntity[]> = {
       type: 'worker',
       status: 'building',
       environment: 'production',
-      image: 'ghcr.io/containr/worker:2026.03.31',
+      image: 'ghcr.io/containr/worker:edge',
       command: './worker',
       gitBranch: 'main',
+      port: 9100,
       createdAt: '2026-03-12T10:05:00Z',
       updatedAt: '2026-03-31T08:44:00Z',
     },
@@ -110,12 +115,27 @@ export const demoServicesByProject: Record<string, ServiceEntity[]> = {
       type: 'database',
       status: 'running',
       environment: 'production',
-      image: 'postgres:15-alpine',
+      image: 'postgres:16',
       command: 'postgres',
       gitBranch: 'main',
+      port: 5432,
       createdAt: '2026-03-12T10:08:00Z',
       updatedAt: '2026-03-31T08:40:00Z',
     },
+    {
+      id: 'demo-svc-redis',
+      projectId: 'demo-project-core',
+      name: 'Redis Cache',
+      type: 'database',
+      status: 'running',
+      environment: 'production',
+      image: 'dragonfly:1.25',
+      command: 'redis-server',
+      gitBranch: 'main',
+      port: 6379,
+      createdAt: '2026-03-12T10:12:00Z',
+      updatedAt: '2026-03-31T08:40:00Z',
+    },
   ],
   'demo-project-growth': [
     {
@@ -125,9 +145,11 @@ export const demoServicesByProject: Record<string, ServiceEntity[]> = {
       type: 'web',
       status: 'running',
       environment: 'production',
-      image: 'ghcr.io/containr/marketing:latest',
+      image: 'nginx:1.27-alpine',
-      command: 'npm run start',
+      command: 'nginx -g daemon off;',
       gitBranch: 'main',
+      port: 8080,
+      domain: 'growth.containr.local',
       createdAt: '2026-03-03T09:00:00Z',
       updatedAt: '2026-03-30T12:10:00Z',
     },
@@ -138,9 +160,10 @@ export const demoServicesByProject: Record<string, ServiceEntity[]> = {
       type: 'web',
       status: 'running',
       environment: 'production',
-      image: 'ghcr.io/containr/campaign-api:latest',
+      image: 'node:20-alpine',
       command: './api',
       gitBranch: 'main',
+      port: 3000,
       createdAt: '2026-03-03T09:04:00Z',
       updatedAt: '2026-03-30T12:08:00Z',
     },
@@ -151,9 +174,10 @@ export const demoServicesByProject: Record<string, ServiceEntity[]> = {
       type: 'database',
       status: 'running',
       environment: 'production',
-      image: 'redis:7-alpine',
+      image: 'dragonfly:1.25',
       command: 'redis-server',
       gitBranch: 'main',
+      port: 6379,
       createdAt: '2026-03-03T09:07:00Z',
       updatedAt: '2026-03-30T12:07:00Z',
     },
@@ -166,9 +190,10 @@ export const demoServicesByProject: Record<string, ServiceEntity[]> = {
       type: 'web',
       status: 'running',
       environment: 'production',
-      image: 'ghcr.io/containr/inference-api:latest',
+      image: 'python:3.12-slim',
       command: './serve',
       gitBranch: 'main',
+      port: 8000,
       createdAt: '2026-02-18T08:00:00Z',
       updatedAt: '2026-03-29T18:00:00Z',
     },
@@ -179,7 +204,7 @@ export const demoServicesByProject: Record<string, ServiceEntity[]> = {
       type: 'worker',
       status: 'failed',
       environment: 'production',
-      image: 'ghcr.io/containr/evaluator:latest',
+      image: 'python:3.12-slim',
       command: './run-jobs',
       gitBranch: 'main',
       createdAt: '2026-02-18T08:03:00Z',
@@ -211,6 +236,7 @@ export const demoVariablesByProject: Record<string, Record<string, ServiceVariab
       ] satisfies ServiceVariable[]
     ),
     'demo-svc-postgres': [],
+    'demo-svc-redis': [],
   },
   'demo-project-growth': {
     'demo-growth-site': (
@@ -594,6 +620,7 @@ export const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
   {
     id: 'tpl-go',
@@ -605,6 +632,7 @@ export const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
   {
     id: 'tpl-postgres',
@@ -616,6 +644,7 @@ export const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
   {
     id: 'tpl-mysql',
@@ -627,6 +656,7 @@ export const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
   {
     id: 'tpl-mariadb',
@@ -638,6 +668,7 @@ export const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
   {
     id: 'tpl-clickhouse',
@@ -649,6 +680,7 @@ export const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
   {
     id: 'tpl-dragonfly',
@@ -660,6 +692,7 @@ export const demoTemplates: TemplateEntity[] = [
     variablesRaw: '[]',
     isOfficial: true,
     ownerId: null,
+    isPublic: false,
   },
 ];
 

docs/api/openapi.yaml

@@ -5216,6 +5216,9 @@ components:
           type: string
           nullable: true
           description: Owning user ID for user-created templates; null for official presets
+        is_public:
+          type: boolean
+          description: Whether a user-created template is published to the public catalog
         created_at:
           type: string
           format: date-time
@@ -5251,6 +5254,9 @@ components:
           items:
             $ref: '#/components/schemas/TemplateVariable'
           description: Configurable variables exposed at deploy time
+        is_public:
+          type: boolean
+          description: Publish this template to the public catalog (visible anonymously)
 
     TemplateConfig:
       type: object

site/.gitignore

@@ -0,0 +1,2 @@
+.vercel
+.env*

site/containr.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#cdf06f"/>
+      <stop offset="1" stop-color="#7fb524"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="15" fill="url(#bg)"/>
+  <g fill="none" stroke="#131507" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="15" y="18" width="34" height="26" rx="4"/>
+    <path d="M23 18v26M31 18v26M39 18v26"/>
+    <path d="M20 51h24"/>
+  </g>
+</svg>

site/index.html

@@ -0,0 +1,379 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Containr - Self-hosted platform for containerized services</title>
+<meta name="description" content="Containr turns any Docker host into a full deployment platform. Visual project canvases, git-push builds, managed databases, preview environments, and HA failover on your own hardware.">
+<meta property="og:title" content="Containr">
+<meta property="og:description" content="Railway-style project canvases on your own hardware. Open source, MIT licensed.">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://containr-lyart.vercel.app/">
+<meta property="og:image" content="https://containr-lyart.vercel.app/screenshots/canvas.png">
+<link rel="canonical" href="https://containr-lyart.vercel.app/">
+<meta name="theme-color" content="#0c0d0f">
+<link rel="icon" type="image/svg+xml" href="containr.svg">
+<script>document.documentElement.classList.add('js');</script>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<nav>
+  <div class="wrap nav-inner">
+    <a href="#" class="brand">
+      <img src="containr.svg" alt="Containr logo">
+      contain<em>r</em>
+    </a>
+    <div class="nav-links">
+      <a href="#features">Features</a>
+      <a href="#product">Product</a>
+      <a href="templates.html">Templates</a>
+      <a href="https://github.com/Dvorinka/Containr/tree/main/docs/guides" target="_blank" rel="noopener">Docs</a>
+    </div>
+    <div class="nav-right">
+      <a class="gh-link" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener" aria-label="Containr on GitHub">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
+      </a>
+      <a class="btn btn-primary" href="#install">Get started</a>
+    </div>
+  </div>
+</nav>
+
+<header class="hero">
+  <div class="wrap">
+    <span class="pill">
+      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><rect x="3" y="7" width="18" height="12" rx="2"/><path d="M8 7v12M13 7v12M18 7v12M6 22h12"/></svg>
+      Self-hosted PaaS · MIT license
+    </span>
+    <h1>Deploy containers on <em>your own cloud</em></h1>
+    <p class="sub">Containr turns a Docker host into a full deployment platform. Git builds, managed databases, previews, failover.</p>
+    <div class="hero-cta">
+      <a class="btn btn-primary" href="#install">
+        Get started
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
+      </a>
+      <a class="btn btn-ghost" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener">View on GitHub</a>
+    </div>
+
+    <div class="shot-frame reveal">
+      <div class="shot-bar"><span class="addr">containr &#8250; core-platform &#8250; canvas</span></div>
+      <div class="cv" aria-label="Containr project canvas preview">
+        <div class="cv-top">
+          <span class="cv-back">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
+            Projects
+          </span>
+          <b>Core Platform<span class="cv-cursor">_</span></b>
+          <span class="cv-meta">5 services &#183; 4 running</span>
+          <span class="cv-tabs">
+            <i class="on">Canvas</i><i>Observability</i><i>Logs</i><i>Settings</i>
+          </span>
+          <span class="cv-active">&#9679; ACTIVE</span>
+        </div>
+        <div class="cv-stage">
+          <svg class="cv-edges" viewBox="0 0 1000 360" preserveAspectRatio="none" aria-hidden="true">
+            <path d="M 222 101 C 287 101 287 177 358 177" />
+            <path class="live" d="M 222 238 C 287 238 287 177 358 177" />
+            <path d="M 536 168 C 618 168 618 83 706 83" />
+            <path d="M 536 195 C 618 195 618 216 706 216" />
+          </svg>
+          <svg class="cv-edges-m" viewBox="0 0 1000 360" preserveAspectRatio="none" aria-hidden="true">
+            <path d="M 468 105 C 494 105 494 185 520 185" />
+            <path class="live" d="M 468 278 C 494 278 494 185 520 185" />
+            <path d="M 949 62 C 985 62 985 155 949 155" />
+            <path d="M 949 300 C 985 300 985 215 949 215" />
+          </svg>
+
+          <div class="cv-pill env"><i></i>production<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></div>
+
+          <div class="cv-node cv-n1">
+            <div class="cv-row">
+              <span class="cv-ic" style="background:rgba(97,218,251,.14);color:#61dafb"><img src="https://cdn.simpleicons.org/react/61dafb" alt="" onerror="this.replaceWith('R')"></span>
+              <div><h4>Web Frontend</h4><p>web</p></div>
+            </div>
+            <div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg><span>web.containr.local</span></div>
+            <div class="cv-foot"><span class="cv-st run"></span><em>running</em><code>ghcr.io/web:v42</code></div>
+          </div>
+
+          <div class="cv-node cv-n2">
+            <div class="cv-row">
+              <span class="cv-ic" style="background:rgba(180,227,74,.14);color:var(--accent)"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 17 6-6-6-6M12 19h8"/></svg></span>
+              <div><h4>Queue Worker</h4><p>worker</p></div>
+            </div>
+            <div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 9 6 6M15 9l-6 6"/></svg><span>queue-worker</span></div>
+            <div class="cv-foot"><span class="cv-st dep"></span><em style="color:#f2c94c">deploying</em><code>worker:edge</code></div>
+          </div>
+
+          <div class="cv-node sel cv-n3">
+            <div class="cv-row">
+              <span class="cv-ic" style="background:rgba(0,173,216,.14);color:#00add8"><img src="https://cdn.simpleicons.org/go/00add8" alt="" onerror="this.replaceWith('G')"></span>
+              <div><h4>API Gateway</h4><p>web &#183; 2 replicas</p></div>
+            </div>
+            <div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg><span>api.containr.local</span></div>
+            <div class="cv-foot"><span class="cv-st run"></span><em>running</em><code>api:v2.4.1</code></div>
+          </div>
+
+          <div class="cv-node cv-n4">
+            <div class="cv-row">
+              <span class="cv-ic" style="background:rgba(65,105,225,.16);color:#7ab8ff"><img src="https://cdn.simpleicons.org/postgresql/7ab8ff" alt="" onerror="this.replaceWith('P')"></span>
+              <div><h4>Postgres</h4><p>database</p></div>
+            </div>
+            <div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/></svg><span>postgres:5432</span></div>
+            <div class="cv-foot"><span class="cv-st run"></span><em>running</em><code>postgres:16</code></div>
+          </div>
+
+          <div class="cv-node cv-n5">
+            <div class="cv-row">
+              <span class="cv-ic" style="background:rgba(255,68,68,.13);color:#ff6b6b"><img src="https://cdn.simpleicons.org/redis/ff6b6b" alt="" onerror="this.replaceWith('R')"></span>
+              <div><h4>Redis Cache</h4><p>database</p></div>
+            </div>
+            <div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/></svg><span>redis:6379</span></div>
+            <div class="cv-foot"><span class="cv-st run"></span><em>running</em><code>dragonfly:1</code></div>
+          </div>
+
+          <div class="cv-pill zoom">
+            <span>&#8722;</span><b>100%</b><span>+</span><i></i>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 15-4.5 4.5M9 15l6-6M8 4l.9 2.6L11.5 8 9 9.5 6.4 8 8 5.4zM19 13l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7zM13 3l.6 1.7L15.3 5l-1.7.6L13 7.3 12.4 5.6 10.7 5l1.7-.6z"/></svg>
+          </div>
+          <div class="cv-minimap"><i style="left:6%;top:14%"></i><i style="left:6%;top:52%"></i><i style="left:38%;top:35%"></i><i style="left:72%;top:9%"></i><i style="left:72%;top:46%"></i></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+
+<div class="install" id="install">
+  <div class="wrap">
+    <div class="install-inner reveal">
+      <div class="install-copy">
+        <h2>One command, running stack</h2>
+        <p>Requires Docker and openssl. Installs into ./containr, never overwrites your .env.</p>
+      </div>
+      <div class="cmd">
+        <code id="install-cmd">curl -fsSL https://raw.githubusercontent.com/Dvorinka/Containr/main/install.sh | bash</code>
+        <button class="copy-btn" id="copy-btn" aria-label="Copy install command">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<section id="features">
+  <div class="wrap">
+    <div class="sec-head reveal">
+      <h2>A control plane, not a pile of YAML</h2>
+      <p>Everything a deployment platform needs, running on hardware you already own. One install, one dashboard.</p>
+    </div>
+    <div class="bento">
+      <div class="cell wide reveal">
+        <div>
+          <div class="icon">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/><path d="M10 6.5h5.5a2 2 0 0 1 2 2V14M6.5 10v5.5a2 2 0 0 0 2 2H14"/></svg>
+          </div>
+          <h3>Visual project canvas</h3>
+          <p>Services appear as nodes on a Railway-style canvas. Drag, group, and wire them together; connections and shared variables are inferred automatically. Start, stop, restart, or roll back with a right-click.</p>
+        </div>
+        <div class="cell-media"><img src="screenshots/service-detail.png" alt="Service view with metrics, logs, and configuration tabs" loading="lazy"></div>
+      </div>
+      <div class="cell tinted reveal">
+        <div class="icon">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/><path d="M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></svg>
+        </div>
+        <h3>Managed databases</h3>
+        <p>Provision engines from the dashboard, with backups and restore built in.</p>
+        <div class="chips">
+          <span>PostgreSQL</span><span>MySQL</span><span>MariaDB</span><span>MongoDB</span><span>Redis</span><span>Dragonfly</span><span>ClickHouse</span>
+        </div>
+      </div>
+      <div class="cell reveal">
+        <div class="icon">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/><path d="M8 7.5 10.5 16M16 7.5 13.5 16M8.5 6h7"/></svg>
+        </div>
+        <h3>Private networking</h3>
+        <p>Every project gets an isolated Docker network. Services reach each other by name.</p>
+        <div class="snippet">web:3000 <b>&#8594;</b> ${{service.KEY}}</div>
+      </div>
+      <div class="cell reveal">
+        <div class="icon">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v12"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="6" r="2.5"/><path d="M18 8.5a5 5 0 0 1-5 5H9"/></svg>
+        </div>
+        <h3>Git-push deploys</h3>
+        <p>Connect GitHub, GitLab, Bitbucket, or Gitea. Builds, history, and image rollback included.</p>
+      </div>
+      <div class="cell reveal">
+        <div class="icon">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>
+        </div>
+        <h3>HA and autoscaling</h3>
+        <p>Failover policies, health checks, node agents, and metric-driven replica scaling.</p>
+      </div>
+      <div class="cell reveal">
+        <div class="icon">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 6v6c0 5 3.4 8.6 8 10 4.6-1.4 8-5 8-10V6l-8-4Z"/><path d="m9 12 2 2 4-4"/></svg>
+        </div>
+        <h3>Admin and audit</h3>
+        <p>Approval console, user management, audit logs, and vulnerability scans behind sign-in.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="product">
+  <div class="wrap">
+    <div class="sec-head reveal">
+      <h2>The whole fleet on one screen</h2>
+      <p>Logs, metrics, builds, and rollbacks without leaving the dashboard. Host telemetry included.</p>
+    </div>
+    <div class="gallery reveal">
+      <div class="shot-tabs" role="tablist" aria-label="Product screenshots">
+        <button class="shot-tab on" role="tab" aria-selected="true" data-shot="dashboard" data-cap="Projects dashboard with host CPU, memory, and disk telemetry.">Dashboard</button>
+        <button class="shot-tab" role="tab" aria-selected="false" data-shot="canvas" data-cap="Visual service canvas with auto-inferred connections.">Canvas</button>
+        <button class="shot-tab" role="tab" aria-selected="false" data-shot="service-detail" data-cap="Service detail with metrics, logs, and config tabs.">Service detail</button>
+        <button class="shot-tab" role="tab" aria-selected="false" data-shot="databases" data-cap="Managed databases with backup and restore.">Databases</button>
+      </div>
+      <img id="gallery-img" src="screenshots/dashboard.png" alt="Containr dashboard" loading="lazy">
+      <p class="cap" id="gallery-cap">Projects dashboard with host CPU, memory, and disk telemetry.</p>
+    </div>
+  </div>
+</section>
+
+<section id="templates">
+  <div class="wrap">
+    <div class="sec-head reveal">
+      <h2>A catalog worth browsing</h2>
+      <p>Thirty official templates plus community presets. <a href="templates.html" style="color: var(--accent);">Browse the full catalog</a> or publish your own.</p>
+    </div>
+    <div class="marquee reveal" aria-label="Template catalog">
+      <div class="marquee-track" id="marquee-track">
+        <span class="tpl"><img src="https://cdn.simpleicons.org/n8n/8b919e" alt="" loading="lazy" onerror="this.remove()">n8n</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/nextcloud/8b919e" alt="" loading="lazy" onerror="this.remove()">Nextcloud</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/immich/8b919e" alt="" loading="lazy" onerror="this.remove()">Immich</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/vaultwarden/8b919e" alt="" loading="lazy" onerror="this.remove()">Vaultwarden</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/grafana/8b919e" alt="" loading="lazy" onerror="this.remove()">Grafana</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/supabase/8b919e" alt="" loading="lazy" onerror="this.remove()">Supabase</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/gitea/8b919e" alt="" loading="lazy" onerror="this.remove()">Gitea</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/uptimekuma/8b919e" alt="" loading="lazy" onerror="this.remove()">Uptime Kuma</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/pihole/8b919e" alt="" loading="lazy" onerror="this.remove()">Pi-hole</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/jellyfin/8b919e" alt="" loading="lazy" onerror="this.remove()">Jellyfin</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/meilisearch/8b919e" alt="" loading="lazy" onerror="this.remove()">Meilisearch</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/mastodon/8b919e" alt="" loading="lazy" onerror="this.remove()">Mastodon</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/homeassistant/8b919e" alt="" loading="lazy" onerror="this.remove()">Home Assistant</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/plausibleanalytics/8b919e" alt="" loading="lazy" onerror="this.remove()">Plausible</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/minio/8b919e" alt="" loading="lazy" onerror="this.remove()">MinIO</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/appwrite/8b919e" alt="" loading="lazy" onerror="this.remove()">Appwrite</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section>
+  <div class="wrap">
+    <div class="sec-head reveal">
+      <h2>Open for visitors, locked for owners</h2>
+      <p>The platform doubles as a public showcase. Approved projects are browsable anonymously; secrets never are.</p>
+    </div>
+    <div class="access reveal">
+      <div>
+        <h3>Anonymous</h3>
+        <ul>
+          <li>Browse approved projects</li>
+          <li>Template catalog and docs</li>
+          <li>HA status overview</li>
+        </ul>
+      </div>
+      <div>
+        <h3>Signed in</h3>
+        <ul>
+          <li>Projects, services, databases</li>
+          <li>Logs, variables, builds, deploys</li>
+          <li>Custom templates</li>
+        </ul>
+      </div>
+      <div>
+        <h3>Admin</h3>
+        <ul>
+          <li>Project approval and moderation</li>
+          <li>User flags and agent tokens</li>
+          <li>Platform settings</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+
+<div class="cta">
+  <div class="wrap reveal">
+    <h2>Run your own cloud.</h2>
+    <p>One Docker host is all it takes. Free, open source, and yours to keep.</p>
+    <div class="hero-cta">
+      <a class="btn btn-primary" href="#install">
+        Get started
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
+      </a>
+      <a class="btn btn-ghost" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener">Star on GitHub</a>
+    </div>
+  </div>
+</div>
+
+<footer>
+  <div class="wrap foot">
+    <span class="l"><img src="containr.svg" alt="">Containr - MIT License</span>
+    <nav>
+      <a href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener">GitHub</a>
+      <a href="https://github.com/Dvorinka/Containr/tree/main/docs" target="_blank" rel="noopener">Docs</a>
+      <a href="https://github.com/Dvorinka/Containr/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Contribute</a>
+      <a href="https://github.com/Dvorinka/Containr/blob/main/SECURITY.md" target="_blank" rel="noopener">Security</a>
+    </nav>
+  </div>
+</footer>
+
+<script>
+  // Copy install command
+  document.getElementById('copy-btn').addEventListener('click', async (e) => {
+    const cmd = document.getElementById('install-cmd').textContent;
+    try {
+      await navigator.clipboard.writeText(cmd);
+    } catch {
+      const r = document.createRange();
+      r.selectNodeContents(document.getElementById('install-cmd'));
+      const s = getSelection();
+      s.removeAllRanges();
+      s.addRange(r);
+    }
+    const btn = e.currentTarget;
+    btn.style.color = 'var(--accent)';
+    setTimeout(() => (btn.style.color = ''), 1200);
+  });
+
+  // Screenshot gallery tabs
+  const img = document.getElementById('gallery-img');
+  const cap = document.getElementById('gallery-cap');
+  document.querySelectorAll('.shot-tab').forEach((tab) => {
+    tab.addEventListener('click', () => {
+      document.querySelectorAll('.shot-tab').forEach((t) => {
+        t.classList.remove('on');
+        t.setAttribute('aria-selected', 'false');
+      });
+      tab.classList.add('on');
+      tab.setAttribute('aria-selected', 'true');
+      img.src = 'screenshots/' + tab.dataset.shot + '.png';
+      img.alt = 'Containr ' + tab.textContent.trim() + ' screenshot';
+      cap.textContent = tab.dataset.cap;
+    });
+  });
+
+  // Duplicate marquee track for seamless loop
+  const track = document.getElementById('marquee-track');
+  track.innerHTML += track.innerHTML;
+
+  // Scroll reveal
+  const io = new IntersectionObserver(
+    (entries) => entries.forEach((en) => en.isIntersecting && en.target.classList.add('in')),
+    { threshold: 0.12 }
+  );
+  document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
+</script>
+</body>
+</html>

site/style.css

@@ -0,0 +1,624 @@
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('fonts/inter-latin.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('fonts/inter-latin-ext.woff2') format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  @font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 400 800;
+    font-display: swap;
+    src: url('fonts/jbmono-latin.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  @font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 400 800;
+    font-display: swap;
+    src: url('fonts/jbmono-latin-ext.woff2') format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+
+  :root {
+    --bg-void: #0c0d0f;
+    --bg-base: #0e0f12;
+    --surface-card: #131518;
+    --surface-card-hover: #1a1d22;
+    --surface-muted: #1a1d22;
+    --border-subtle: rgba(255, 255, 255, 0.06);
+    --border-default: rgba(255, 255, 255, 0.1);
+    --border-strong: rgba(255, 255, 255, 0.18);
+    --text-primary: #ecedf0;
+    --text-secondary: #8b919e;
+    --text-tertiary: #575d68;
+    --accent: #b4e34a;
+    --accent-dim: rgba(180, 227, 74, 0.12);
+    --accent-on: #131507;
+    --mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
+    --sans: 'Inter', system-ui, -apple-system, sans-serif;
+    --radius: 14px;
+    --radius-sm: 9px;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html { scroll-behavior: smooth; }
+  body {
+    font-family: var(--sans);
+    background: var(--bg-void);
+    color: var(--text-secondary);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.5;
+  }
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: radial-gradient(1000px 480px at 50% -8%, rgba(180, 227, 74, 0.05), transparent 60%);
+    pointer-events: none;
+  }
+  ::selection { background: rgba(180, 227, 74, 0.25); color: var(--text-primary); }
+
+  a { color: inherit; text-decoration: none; }
+  img { display: block; max-width: 100%; }
+  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
+
+  /* ---------- nav ---------- */
+  nav {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    border-bottom: 1px solid var(--border-subtle);
+    background: rgba(14, 15, 18, 0.82);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+  }
+  .nav-inner {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    gap: 28px;
+  }
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    font-weight: 800;
+    font-size: 15px;
+    letter-spacing: -0.02em;
+    color: var(--text-primary);
+  }
+  .brand img { width: 26px; height: 26px; border-radius: 7px; }
+  .brand em { font-style: normal; color: var(--accent); }
+  .nav-links { display: flex; gap: 4px; margin-left: 8px; }
+  .nav-links a {
+    font-size: 13px;
+    padding: 6px 12px;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    transition: color 0.15s, background 0.15s;
+  }
+  .nav-links a:hover { color: var(--text-primary); background: var(--surface-muted); }
+  .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
+  .gh-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-subtle);
+    color: var(--text-secondary);
+    transition: color 0.15s, border-color 0.15s;
+  }
+  .gh-link:hover { color: var(--text-primary); border-color: var(--border-strong); }
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 13px;
+    font-weight: 600;
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: transform 0.15s, border-color 0.15s, background 0.15s;
+    white-space: nowrap;
+  }
+  .btn-primary { background: var(--accent); color: var(--accent-on); }
+  .btn-primary:hover { transform: translateY(-1px); }
+  .btn-ghost { border-color: var(--border-default); color: var(--text-secondary); }
+  .btn-ghost:hover { color: var(--text-primary); border-color: var(--border-strong); }
+
+  /* ---------- hero ---------- */
+  .hero { padding: 84px 0 0; }
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-tertiary);
+    border: 1px solid var(--border-subtle);
+    background: var(--surface-card);
+    padding: 6px 14px;
+    border-radius: 999px;
+  }
+  .pill svg { color: var(--accent); }
+  .hero h1 {
+    margin-top: 22px;
+    font-size: clamp(34px, 5.4vw, 58px);
+    font-weight: 800;
+    letter-spacing: -0.035em;
+    line-height: 1.06;
+    color: var(--text-primary);
+    max-width: 22ch;
+  }
+  .hero h1 em { font-style: normal; color: var(--accent); }
+  .hero .sub {
+    margin-top: 18px;
+    font-size: 15.5px;
+    line-height: 1.65;
+    max-width: 46ch;
+  }
+  .hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
+  .hero-cta .btn { font-size: 14px; padding: 11px 22px; }
+
+  .shot-frame {
+    margin-top: 56px;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius);
+    background: var(--surface-card);
+    overflow: hidden;
+    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
+  }
+  .shot-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 9px 14px;
+    border-bottom: 1px solid var(--border-subtle);
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--text-tertiary);
+  }
+  .shot-bar .addr {
+    flex: 1;
+    text-align: center;
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    padding: 3px 0;
+    max-width: 320px;
+    margin: 0 auto;
+  }
+  .shot-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
+
+  /* ---------- install ---------- */
+  .install { padding: 72px 0 0; }
+  .install-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 28px;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius);
+    background: var(--bg-base);
+    padding: 26px 30px;
+    flex-wrap: wrap;
+  }
+  .install-copy h2 { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
+  .install-copy p { font-size: 13px; margin-top: 4px; }
+  .cmd {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    font-family: var(--mono);
+    font-size: 12.5px;
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    max-width: 100%;
+  }
+  .cmd code {
+    padding: 11px 14px;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .cmd code::-webkit-scrollbar { display: none; }
+  .cmd code::before { content: '$ '; color: var(--accent); }
+  .copy-btn {
+    border: none;
+    border-left: 1px solid var(--border-subtle);
+    background: transparent;
+    color: var(--text-tertiary);
+    padding: 11px 13px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    transition: color 0.15s, background 0.15s;
+    flex-shrink: 0;
+  }
+  .copy-btn:hover { color: var(--accent); background: var(--surface-muted); }
+
+  /* ---------- sections ---------- */
+  section { padding: 96px 0 0; }
+  .sec-head { margin-bottom: 40px; }
+  .sec-head h2 {
+    font-size: clamp(24px, 3vw, 32px);
+    font-weight: 800;
+    letter-spacing: -0.025em;
+    color: var(--text-primary);
+    max-width: 22ch;
+  }
+  .sec-head p { margin-top: 10px; font-size: 14.5px; max-width: 56ch; }
+
+  /* ---------- bento ---------- */
+  .bento {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 14px;
+  }
+  .cell {
+    grid-column: span 2;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius);
+    background: var(--surface-card);
+    padding: 22px;
+    transition: border-color 0.15s, transform 0.15s;
+    position: relative;
+    overflow: hidden;
+  }
+  .cell:hover { border-color: var(--border-default); transform: translateY(-2px); }
+  .cell.wide { grid-column: span 4; display: flex; gap: 26px; align-items: stretch; }
+  .cell h3 { font-size: 14.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
+  .cell p { font-size: 12.5px; line-height: 1.6; margin-top: 8px; color: var(--text-tertiary); }
+  .cell .icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background: var(--accent-dim);
+    color: var(--accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 14px;
+  }
+  .cell.wide .icon { margin-bottom: 12px; }
+  .cell-media {
+    flex: 0 0 46%;
+    border-radius: 10px;
+    overflow: hidden;
+    border: 1px solid var(--border-subtle);
+    align-self: center;
+  }
+  .cell-media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
+  .cell.tinted { background: linear-gradient(160deg, rgba(180, 227, 74, 0.09), rgba(180, 227, 74, 0.02) 55%), var(--surface-card); }
+  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
+  .chips span {
+    font-family: var(--mono);
+    font-size: 10.5px;
+    color: var(--text-secondary);
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    padding: 3px 8px;
+  }
+  .snippet {
+    margin-top: 14px;
+    font-family: var(--mono);
+    font-size: 11.5px;
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    padding: 10px 12px;
+    color: var(--text-secondary);
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-width: none;
+  }
+  .snippet b { color: var(--accent); font-weight: 500; }
+
+  /* ---------- screenshots ---------- */
+  .shot-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
+  .shot-tab {
+    font-family: var(--mono);
+    font-size: 11.5px;
+    color: var(--text-tertiary);
+    background: transparent;
+    border: 1px solid var(--border-subtle);
+    border-radius: 999px;
+    padding: 7px 15px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  .shot-tab:hover { color: var(--text-secondary); border-color: var(--border-default); }
+  .shot-tab.on { color: var(--accent); border-color: rgba(180, 227, 74, 0.4); background: var(--accent-dim); }
+  .gallery img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border-default); }
+  .gallery .cap { font-size: 12.5px; color: var(--text-tertiary); margin-top: 12px; }
+
+  /* ---------- templates marquee ---------- */
+  .marquee {
+    overflow: hidden;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius);
+    background: var(--bg-base);
+    padding: 18px 0;
+    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+  }
+  .marquee-track {
+    display: flex;
+    gap: 10px;
+    width: max-content;
+    animation: scroll 46s linear infinite;
+  }
+  @keyframes scroll { to { transform: translateX(-50%); } }
+  .tpl {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-subtle);
+    background: var(--surface-card);
+    border-radius: 999px;
+    padding: 8px 16px;
+    white-space: nowrap;
+  }
+  .tpl img { width: 15px; height: 15px; }
+
+  /* ---------- access ---------- */
+  .access {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0;
+    border-top: 1px solid var(--border-subtle);
+  }
+  .access > div { padding: 28px 28px 4px 0; }
+  .access > div + div { padding-left: 28px; border-left: 1px solid var(--border-subtle); }
+  .access h3 {
+    font-family: var(--mono);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--accent);
+  }
+  .access ul { list-style: none; margin-top: 14px; }
+  .access li { font-size: 13px; padding: 5px 0; color: var(--text-secondary); }
+  .access li::before { content: '- '; color: var(--text-tertiary); }
+
+  /* ---------- cta ---------- */
+  .cta { text-align: center; padding: 110px 0; }
+  .cta h2 {
+    font-size: clamp(30px, 4.5vw, 46px);
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    color: var(--text-primary);
+  }
+  .cta p { margin: 14px auto 0; font-size: 14.5px; max-width: 46ch; }
+  .cta .hero-cta { justify-content: center; }
+
+  /* ---------- footer ---------- */
+  footer { border-top: 1px solid var(--border-subtle); }
+  .foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26px 0;
+    font-size: 12.5px;
+    color: var(--text-tertiary);
+    flex-wrap: wrap;
+    gap: 14px;
+  }
+  .foot .l { display: flex; align-items: center; gap: 8px; }
+  .foot img { width: 18px; height: 18px; border-radius: 5px; }
+  .foot nav { display: flex; gap: 20px; position: static; border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
+  .foot nav a:hover { color: var(--text-primary); }
+
+  /* ---------- reveal (JS-gated: content stays visible without JS) ---------- */
+  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
+  .js .reveal.in { opacity: 1; transform: none; }
+
+  @media (prefers-reduced-motion: reduce) {
+    html { scroll-behavior: auto; }
+    .marquee-track { animation: none; }
+    .reveal { opacity: 1; transform: none; transition: none; }
+    .btn-primary:hover, .cell:hover { transform: none; }
+  }
+
+  /* ---------- responsive ---------- */
+  @media (max-width: 860px) {
+    .nav-links { display: none; }
+    .bento { grid-template-columns: repeat(2, 1fr); }
+    .cell, .cell.wide { grid-column: span 2; }
+    .cell.wide { flex-direction: column; }
+    .cell-media { flex: none; }
+    .access { grid-template-columns: 1fr; }
+    .access > div { padding: 22px 0; }
+    .access > div + div { padding-left: 0; border-left: none; border-top: 1px solid var(--border-subtle); }
+    section { padding: 72px 0 0; }
+    .hero { padding-top: 56px; }
+  }
+  @media (max-width: 520px) {
+    .bento { grid-template-columns: 1fr; }
+    .cell, .cell.wide { grid-column: span 1; }
+    .install-inner { padding: 20px; }
+  }
+
+  /* ---------- hero canvas mockup ---------- */
+  .cv { background: #0a0b0d; }
+  .cv-top {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 9px 16px;
+    border-bottom: 1px solid var(--border-subtle);
+    background: #101216;
+  }
+  .cv-back { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-tertiary); }
+  .cv-top b { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
+  .cv-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-tertiary); }
+  .cv-tabs {
+    margin-left: auto;
+    display: inline-flex;
+    gap: 2px;
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: 999px;
+    padding: 3px;
+  }
+  .cv-tabs i { font-style: normal; font-size: 10.5px; color: var(--text-tertiary); padding: 4px 11px; border-radius: 999px; }
+  .cv-tabs i.on { color: var(--text-primary); background: var(--surface-muted); }
+  .cv-active { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: #5ee6a0; }
+  .cv-cursor { font-style: normal; color: var(--accent); animation: cv-blink 1.1s steps(2, start) infinite; }
+  @keyframes cv-blink { to { visibility: hidden; } }
+
+  .cv-stage {
+    position: relative;
+    height: 380px;
+    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
+    background-size: 22px 22px;
+    overflow: hidden;
+  }
+  .cv-edges, .cv-edges-m { position: absolute; inset: 0; width: 100%; height: 100%; }
+  .cv-edges-m { display: none; }
+  .cv-edges path, .cv-edges-m path {
+    fill: none;
+    stroke: rgba(180, 227, 74, 0.42);
+    stroke-width: 2;
+    stroke-linecap: round;
+    filter: drop-shadow(0 0 4px rgba(180, 227, 74, 0.25));
+  }
+  .cv-edges .live, .cv-edges-m .live { stroke-dasharray: 7 9; animation: cv-dash 1.1s linear infinite; }
+  @keyframes cv-dash { to { stroke-dashoffset: -16; } }
+
+  .cv-node {
+    position: absolute;
+    width: 200px;
+    background: var(--surface-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: 14px;
+    padding: 12px 12px 10px;
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
+    transition: border-color 0.2s;
+  }
+  .cv-node:hover { border-color: var(--border-default); }
+  .cv-node.sel {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px var(--accent), 0 16px 44px rgba(0, 0, 0, 0.55);
+  }
+  .cv-n1 { left: 3.2%; top: 12%; }
+  .cv-n2 { left: 3.2%; top: 50%; }
+  .cv-n3 { left: 35.2%; top: 33%; }
+  .cv-n4 { left: 70%; top: 7%; }
+  .cv-n5 { left: 70%; top: 44%; }
+  .cv-row { display: flex; align-items: center; gap: 10px; }
+  .cv-ic {
+    width: 34px; height: 34px;
+    border-radius: 9px;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    font-weight: 800; font-size: 14px;
+  }
+  .cv-ic img { width: 18px; height: 18px; }
+  .cv-node h4 { font-size: 12.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
+  .cv-row p { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }
+  .cv-addr {
+    display: flex; align-items: center; gap: 6px;
+    margin-top: 10px;
+    padding: 5px 8px;
+    background: rgba(26, 29, 34, 0.55);
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    color: var(--text-tertiary);
+  }
+  .cv-addr span {
+    font-family: var(--mono); font-size: 9.5px; color: var(--text-secondary);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .cv-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
+  .cv-st { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+  .cv-st.run { background: #5ee6a0; }
+  .cv-st.dep { background: #f2c94c; animation: cv-pulse 1.4s ease-in-out infinite; }
+  @keyframes cv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+  .cv-foot em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5ee6a0; }
+  .cv-foot code {
+    margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--text-tertiary);
+    max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+
+  .cv-pill {
+    position: absolute;
+    display: inline-flex; align-items: center; gap: 7px;
+    background: rgba(19, 21, 24, 0.85);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--border-default);
+    border-radius: 999px;
+    padding: 6px 12px;
+    font-family: var(--mono); font-size: 10px; color: var(--text-secondary);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
+  }
+  .cv-pill.env { left: 14px; top: 14px; }
+  .cv-pill.env i { width: 6px; height: 6px; border-radius: 50%; background: #5ee6a0; }
+  .cv-pill.env svg { color: var(--text-tertiary); }
+  .cv-pill.zoom { left: 14px; bottom: 14px; padding: 5px 11px; gap: 9px; }
+  .cv-pill.zoom b { font-weight: 500; font-size: 10px; }
+  .cv-pill.zoom i { width: 1px; height: 12px; background: var(--border-subtle); }
+  .cv-pill.zoom svg { color: var(--text-tertiary); }
+  .cv-chip {
+    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
+    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
+    color: var(--accent); background: var(--accent-dim);
+    border: 1px solid rgba(180, 227, 74, 0.3);
+    border-radius: 999px; padding: 4px 10px;
+  }
+  .cv-minimap {
+    position: absolute; right: 14px; bottom: 14px;
+    width: 112px; height: 68px;
+    border: 1px solid var(--border-default); border-radius: 8px;
+    background: #0e1013; overflow: hidden;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
+  }
+  .cv-minimap i { position: absolute; width: 15px; height: 10px; border-radius: 2px; background: rgba(180, 227, 74, 0.45); }
+
+  @media (max-width: 720px) {
+    .cv-stage { height: 360px; }
+    .cv-edges { display: none; }
+    .cv-edges-m { display: block; }
+    .cv-node { width: 150px; padding: 9px 9px 8px; border-radius: 11px; }
+    .cv-node h4 { font-size: 11px; }
+    .cv-ic { width: 27px; height: 27px; border-radius: 7px; }
+    .cv-ic img { width: 14px; height: 14px; }
+    .cv-addr span { font-size: 8.5px; }
+    .cv-foot code { display: none; }
+    .cv-n1 { left: 4%; top: 14%; }
+    .cv-n2 { left: 4%; top: 62%; }
+    .cv-n3 { left: 52%; top: 36%; }
+    .cv-n4 { left: 52%; top: 2%; }
+    .cv-n5 { left: 52%; top: 68%; }
+    .cv-back, .cv-meta, .cv-minimap, .cv-pill.zoom { display: none; }
+    .cv-tabs i:not(.on) { display: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cv-edges .live, .cv-edges-m .live, .cv-st.dep, .cv-cursor { animation: none; }
+  }

site/templates.html

@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Template catalog - Containr</title>
+<meta name="description" content="Deploy-ready service templates for Containr. Official presets plus community templates published from live instances.">
+<meta name="theme-color" content="#0c0d0f">
+<link rel="icon" type="image/svg+xml" href="containr.svg">
+<script>document.documentElement.classList.add('js');</script>
+<link rel="stylesheet" href="style.css">
+<style>
+  .tpl-hero { padding: 72px 0 0; }
+  .tpl-hero h1 {
+    font-size: clamp(28px, 4vw, 42px);
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    color: var(--text-primary);
+    max-width: 20ch;
+  }
+  .tpl-hero .sub { margin-top: 12px; font-size: 15px; max-width: 56ch; }
+  .source-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    margin-top: 16px;
+    font-family: var(--mono);
+    font-size: 10.5px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-tertiary);
+  }
+  .source-tag i {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--text-tertiary);
+  }
+  .source-tag.live i { background: var(--accent); }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 36px 0 22px;
+    flex-wrap: wrap;
+  }
+  .search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 220px;
+    max-width: 340px;
+    background: var(--surface-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    padding: 9px 13px;
+    color: var(--text-tertiary);
+  }
+  .search input {
+    flex: 1;
+    background: none;
+    border: none;
+    outline: none;
+    color: var(--text-primary);
+    font-size: 13px;
+    font-family: var(--sans);
+  }
+  .search input::placeholder { color: var(--text-tertiary); }
+  .cats { display: flex; gap: 6px; flex-wrap: wrap; }
+  .cat {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--text-tertiary);
+    background: transparent;
+    border: 1px solid var(--border-subtle);
+    border-radius: 999px;
+    padding: 7px 13px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  .cat:hover { color: var(--text-secondary); border-color: var(--border-default); }
+  .cat.on { color: var(--accent); border-color: rgba(180, 227, 74, 0.4); background: var(--accent-dim); }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 14px;
+    padding-bottom: 96px;
+  }
+  .tcard {
+    text-align: left;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius);
+    background: var(--surface-card);
+    padding: 20px;
+    cursor: pointer;
+    transition: border-color 0.15s, transform 0.15s;
+    font-family: var(--sans);
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+  }
+  .tcard:hover { border-color: var(--border-default); transform: translateY(-2px); }
+  .tcard .top { display: flex; align-items: center; gap: 12px; }
+  .tcard .logo {
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    background: var(--surface-muted);
+    border: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    flex-shrink: 0;
+    font-weight: 800;
+    font-size: 15px;
+    color: var(--accent);
+  }
+  .tcard .logo img { width: 20px; height: 20px; }
+  .tcard h3 { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
+  .badge {
+    font-size: 9.5px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    border-radius: 999px;
+    padding: 2px 8px;
+    flex-shrink: 0;
+  }
+  .badge-official { background: rgba(242, 201, 76, 0.12); color: #f2c94c; }
+  .badge-community { background: var(--accent-dim); color: var(--accent); }
+  .tcard .desc {
+    margin-top: 12px;
+    font-size: 12.5px;
+    line-height: 1.55;
+    color: var(--text-tertiary);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    flex: 1;
+  }
+  .tcard .meta {
+    margin-top: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--mono);
+    font-size: 10.5px;
+    color: var(--text-tertiary);
+  }
+  .tcard .meta .catname { color: var(--accent); }
+  .tcard .meta .rt { margin-left: auto; }
+
+  .grid .empty {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 60px 0;
+    color: var(--text-tertiary);
+    font-size: 13px;
+  }
+  .publish-card {
+    border: 1px dashed var(--border-default);
+    background: transparent;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 8px;
+  }
+  .publish-card:hover { border-color: rgba(180, 227, 74, 0.4); }
+  .publish-card .plus {
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+    background: var(--accent-dim);
+    color: var(--accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .publish-card h3 { color: var(--text-secondary); }
+  .publish-card p { font-size: 12px; color: var(--text-tertiary); max-width: 26ch; }
+
+  /* ---------- detail modal ---------- */
+  .modal-back {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+  }
+  .modal {
+    width: 100%;
+    max-width: 640px;
+    max-height: 86vh;
+    overflow-y: auto;
+    background: var(--bg-base);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius);
+    padding: 26px 28px;
+  }
+  .modal .mhead { display: flex; align-items: flex-start; gap: 14px; }
+  .modal .mhead .logo {
+    width: 46px;
+    height: 46px;
+    border-radius: 12px;
+    background: var(--surface-muted);
+    border: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+    font-size: 18px;
+    color: var(--accent);
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .modal .mhead .logo img { width: 24px; height: 24px; }
+  .modal .mhead h2 { font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
+  .modal .mhead .badges { display: flex; gap: 6px; margin-top: 6px; }
+  .modal .x {
+    margin-left: auto;
+    background: none;
+    border: none;
+    color: var(--text-tertiary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 6px;
+  }
+  .modal .x:hover { color: var(--text-primary); background: var(--surface-muted); }
+  .modal .mdesc { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
+  .msec { margin-top: 22px; }
+  .msec h4 {
+    font-family: var(--mono);
+    font-size: 10.5px;
+    font-weight: 600;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-tertiary);
+    margin-bottom: 10px;
+  }
+  .kv { display: flex; flex-wrap: wrap; gap: 8px; }
+  .kv span {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--text-secondary);
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    padding: 5px 10px;
+  }
+  .kv span b { color: var(--text-tertiary); font-weight: 500; }
+  .vars { display: grid; gap: 6px; }
+  .vrow {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 12px;
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    padding: 8px 12px;
+  }
+  .vrow code { font-family: var(--mono); font-size: 11.5px; color: var(--text-primary); }
+  .vrow .lbl { color: var(--text-tertiary); font-size: 11.5px; }
+  .vrow .tags { margin-left: auto; display: flex; gap: 5px; }
+  .vrow .tags i {
+    font-style: normal;
+    font-family: var(--mono);
+    font-size: 9px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 2px 7px;
+    border-radius: 999px;
+    background: var(--surface-muted);
+    color: var(--text-tertiary);
+  }
+  .vrow .tags i.req { color: var(--accent); background: var(--accent-dim); }
+  .vrow .tags i.sec { color: #f2c94c; background: rgba(242, 201, 76, 0.1); }
+  .mfoot { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
+  .hint { margin-top: 16px; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.6; }
+  .hint code { font-family: var(--mono); color: var(--text-secondary); }
+
+  [hidden] { display: none !important; }
+
+  @media (max-width: 900px) {
+    .grid { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 560px) {
+    .grid { grid-template-columns: 1fr; }
+    .modal { padding: 20px; }
+  }
+</style>
+</head>
+<body>
+
+<nav>
+  <div class="wrap nav-inner">
+    <a href="index.html" class="brand">
+      <img src="containr.svg" alt="Containr logo">
+      contain<em>r</em>
+    </a>
+    <div class="nav-links">
+      <a href="index.html#features">Features</a>
+      <a href="index.html#product">Product</a>
+      <a href="templates.html">Templates</a>
+      <a href="https://github.com/Dvorinka/Containr/tree/main/docs/guides" target="_blank" rel="noopener">Docs</a>
+    </div>
+    <div class="nav-right">
+      <a class="gh-link" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener" aria-label="Containr on GitHub">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
+      </a>
+      <a class="btn btn-primary" href="index.html#install">Get started</a>
+    </div>
+  </div>
+</nav>
+
+<header class="tpl-hero">
+  <div class="wrap">
+    <h1>Template catalog</h1>
+    <p class="sub">Deploy-ready service presets plus templates published by the community. Pick one, import it into your instance, deploy.</p>
+    <span class="source-tag" id="source-tag"><i></i><span id="source-label">loading catalog</span></span>
+
+    <div class="toolbar">
+      <label class="search">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
+        <input id="q" type="search" placeholder="Search templates" autocomplete="off">
+      </label>
+      <div class="cats" id="cats"></div>
+    </div>
+  </div>
+</header>
+
+<main>
+  <div class="wrap">
+    <div class="grid" id="grid"></div>
+  </div>
+</main>
+
+<div class="modal-back" id="modal-back" hidden>
+  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="m-title">
+    <div class="mhead">
+      <span class="logo" id="m-logo"></span>
+      <div>
+        <h2 id="m-title"></h2>
+        <div class="badges" id="m-badges"></div>
+      </div>
+      <button class="x" id="m-close" aria-label="Close">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+      </button>
+    </div>
+    <p class="mdesc" id="m-desc"></p>
+    <div class="msec" id="m-meta-sec">
+      <h4>Runtime</h4>
+      <div class="kv" id="m-meta"></div>
+    </div>
+    <div class="msec" id="m-vars-sec" hidden>
+      <h4>Variables</h4>
+      <div class="vars" id="m-vars"></div>
+    </div>
+    <div class="mfoot">
+      <button class="btn btn-primary" id="m-copy">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+        Copy template JSON
+      </button>
+      <a class="btn btn-ghost" href="https://github.com/Dvorinka/Containr/tree/main/docs/guides" target="_blank" rel="noopener">Deploy guide</a>
+    </div>
+    <p class="hint">In your instance: <code>Templates &rarr; New template &rarr; Upload .json</code> (or paste the copied JSON). Deploy it to any project from there.</p>
+  </div>
+</div>
+
+<footer>
+  <div class="wrap foot">
+    <span class="l"><img src="containr.svg" alt="">Containr - MIT License</span>
+    <nav>
+      <a href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener">GitHub</a>
+      <a href="https://github.com/Dvorinka/Containr/tree/main/docs" target="_blank" rel="noopener">Docs</a>
+      <a href="https://github.com/Dvorinka/Containr/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Contribute</a>
+      <a href="https://github.com/Dvorinka/Containr/blob/main/SECURITY.md" target="_blank" rel="noopener">Security</a>
+    </nav>
+  </div>
+</footer>
+
+<script>
+  // The catalog comes from a live Containr instance when one is configured.
+  // Point it at an instance once with ?api=https://host (persisted in
+  // localStorage); with no instance configured the bundled official
+  // snapshot renders immediately.
+  const params = new URLSearchParams(location.search);
+  const paramApi = params.get('api');
+  if (paramApi) localStorage.setItem('containr-api', paramApi.replace(/\/$/, ''));
+  const API_BASE = (localStorage.getItem('containr-api') || '').replace(/\/$/, '');
+
+  const grid = document.getElementById('grid');
+  const catsEl = document.getElementById('cats');
+  const qEl = document.getElementById('q');
+  const sourceTag = document.getElementById('source-tag');
+  const sourceLabel = document.getElementById('source-label');
+
+  let templates = [];
+  let activeCat = '';
+  let query = '';
+  let current = null;
+
+  const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+
+  async function loadTemplates() {
+    if (API_BASE) {
+      const ctrl = new AbortController();
+      const timer = setTimeout(() => ctrl.abort(), 4000);
+      try {
+        const res = await fetch(API_BASE + '/api/v1/templates', { signal: ctrl.signal });
+        if (!res.ok) throw new Error('api ' + res.status);
+        const data = await res.json();
+        const list = Array.isArray(data.templates) ? data.templates : [];
+        if (!list.length) throw new Error('empty catalog');
+        setTemplates(list, 'live: ' + API_BASE.replace(/^https?:\/\//, ''), true);
+        return;
+      } catch {
+        // fall through to the bundled snapshot
+      } finally {
+        clearTimeout(timer);
+      }
+    }
+    const res = await fetch('templates.json');
+    const data = await res.json();
+    setTemplates(data.templates || [], 'official snapshot - connect an instance with ?api=', false);
+  }
+
+  function setTemplates(list, label, live) {
+    const seen = new Set();
+    templates = list.filter((t) => t && t.id && !seen.has(t.id) && seen.add(t.id));
+    sourceLabel.textContent = label;
+    sourceTag.classList.toggle('live', live);
+    renderCats();
+    render();
+  }
+
+  function runtime(t) {
+    try { return (JSON.parse(t.config || '{}').runtime || ''); } catch { return ''; }
+  }
+  function cfg(t) {
+    try { return JSON.parse(t.config || '{}'); } catch { return {}; }
+  }
+  function vars(t) {
+    try { const v = JSON.parse(t.variables || '[]'); return Array.isArray(v) ? v : []; } catch { return []; }
+  }
+
+  const CATS = [['', 'All'], ['web', 'Web'], ['frontend', 'Frontend'], ['database', 'Databases'], ['app', 'Apps'], ['worker', 'Workers'], ['cron', 'Cron'], ['custom', 'Custom']];
+
+  function renderCats() {
+    const present = new Set(templates.map((t) => (t.category || 'custom').toLowerCase()));
+    catsEl.innerHTML = CATS.filter(([k]) => k === '' || present.has(k))
+      .map(([k, label]) => `<button class="cat${k === activeCat ? ' on' : ''}" data-cat="${k}">${label}</button>`)
+      .join('');
+    catsEl.querySelectorAll('.cat').forEach((b) =>
+      b.addEventListener('click', () => { activeCat = b.dataset.cat; renderCats(); render(); })
+    );
+  }
+
+  function logoHtml(t, size) {
+    const letter = esc((t.name || '?').trim().charAt(0).toUpperCase());
+    if (t.logo) {
+      return `<img src="${esc(t.logo)}" alt="" loading="lazy" onerror="this.outerHTML='${letter}'">`;
+    }
+    return letter;
+  }
+
+  function badge(t) {
+    if (t.is_official) return '<span class="badge badge-official">Official</span>';
+    return '<span class="badge badge-community">Community</span>';
+  }
+
+  function filtered() {
+    const q = query.toLowerCase();
+    return templates.filter((t) => {
+      if (activeCat && (t.category || '').toLowerCase() !== activeCat) return false;
+      if (!q) return true;
+      return (t.name + ' ' + (t.description || '') + ' ' + (t.category || '')).toLowerCase().includes(q);
+    });
+  }
+
+  function render() {
+    const list = filtered();
+    let html = list.map((t) => `
+      <button class="tcard" data-id="${esc(t.id)}">
+        <div class="top">
+          <span class="logo">${logoHtml(t)}</span>
+          <h3>${esc(t.name)}</h3>
+          ${badge(t)}
+        </div>
+        <p class="desc">${esc(t.description || 'No description.')}</p>
+        <div class="meta"><span class="catname">${esc(t.category || 'custom')}</span><span class="rt">${esc(runtime(t))}</span></div>
+      </button>`).join('');
+
+    html += `
+      <button class="tcard publish-card" id="publish-card">
+        <span class="plus">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+        </span>
+        <h3>Publish yours</h3>
+        <p>Any template you mark public in your instance shows up in the catalog.</p>
+      </button>`;
+
+    if (!list.length) {
+      html += '<div class="empty">Nothing matches. Try a different search or category.</div>';
+    }
+
+    grid.innerHTML = html;
+    grid.querySelectorAll('.tcard[data-id]').forEach((card) =>
+      card.addEventListener('click', () => openModal(templates.find((t) => t.id === card.dataset.id)))
+    );
+    document.getElementById('publish-card').addEventListener('click', () => {
+      document.getElementById('modal-back').hidden = false;
+      showPublish();
+    });
+  }
+
+  // ---------- modal ----------
+  const back = document.getElementById('modal-back');
+  const closeModal = () => (back.hidden = true);
+  document.getElementById('m-close').addEventListener('click', closeModal);
+  back.addEventListener('click', (e) => { if (e.target === back) closeModal(); });
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
+
+  function openModal(t) {
+    if (!t) return;
+    current = t;
+    document.getElementById('m-logo').innerHTML = logoHtml(t);
+    document.getElementById('m-title').textContent = t.name;
+    document.getElementById('m-badges').innerHTML =
+      badge(t) + `<span class="badge" style="background:var(--surface-muted);color:var(--text-tertiary)">${esc(t.category || 'custom')}</span>`;
+    document.getElementById('m-desc').textContent = t.description || 'No description.';
+
+    const c = cfg(t);
+    const meta = [];
+    if (c.type) meta.push(['type', c.type]);
+    if (c.runtime) meta.push(['runtime', c.runtime]);
+    if (c.port) meta.push(['port', c.port]);
+    if (c.build_command) meta.push(['build', c.build_command]);
+    if (c.start_command) meta.push(['start', c.start_command]);
+    if (c.health_check) meta.push(['health', c.health_check]);
+    document.getElementById('m-meta').innerHTML = meta.length
+      ? meta.map(([k, v]) => `<span><b>${esc(k)}</b> ${esc(String(v))}</span>`).join('')
+      : '<span>self-contained image</span>';
+
+    const vs = vars(t);
+    const varsSec = document.getElementById('m-vars-sec');
+    varsSec.hidden = vs.length === 0;
+    document.getElementById('m-vars').innerHTML = vs.map((v) => `
+      <div class="vrow">
+        <code>${esc(v.key)}</code>
+        <span class="lbl">${esc(v.label || '')}</span>
+        <span class="tags">
+          ${v.required ? '<i class="req">required</i>' : ''}
+          ${v.secret ? '<i class="sec">secret</i>' : ''}
+        </span>
+      </div>`).join('');
+
+    back.hidden = false;
+  }
+
+  function showPublish() {
+    document.getElementById('m-logo').innerHTML = '+';
+    document.getElementById('m-title').textContent = 'Publish a template';
+    document.getElementById('m-badges').innerHTML = '<span class="badge badge-community">Community</span>';
+    document.getElementById('m-desc').textContent =
+      'Templates are published from inside a running Containr instance. Create a template (or edit one you own), tick "List in the public catalog", and it becomes browsable and deployable by anyone who can reach that instance.';
+    document.getElementById('m-meta').innerHTML =
+      '<span><b>1</b> Templates &rarr; New template</span><span><b>2</b> paste or upload JSON</span><span><b>3</b> tick public catalog</span>';
+    document.getElementById('m-vars-sec').hidden = true;
+    current = null;
+  }
+
+  document.getElementById('m-copy').addEventListener('click', async (e) => {
+    if (!current) return;
+    const c = cfg(current);
+    const payload = JSON.stringify({
+      name: current.name,
+      description: current.description || '',
+      category: current.category || 'custom',
+      logo: current.logo || '',
+      config: c,
+      variables: vars(current),
+    }, null, 2);
+    try { await navigator.clipboard.writeText(payload); } catch {}
+    const btn = e.currentTarget;
+    btn.style.color = 'var(--accent)';
+    setTimeout(() => (btn.style.color = ''), 1200);
+  });
+
+  let debounce;
+  qEl.addEventListener('input', () => {
+    clearTimeout(debounce);
+    debounce = setTimeout(() => { query = qEl.value.trim(); render(); }, 120);
+  });
+
+  loadTemplates();
+</script>
+</body>
+</html>

site/templates.json

@@ -0,0 +1,394 @@
+{
+  "templates": [
+    {
+      "id": "tpl-nodejs",
+      "name": "Node.js Application",
+      "description": "Generic Node.js application with automatic dependency detection",
+      "category": "web",
+      "logo": "https://cdn.simpleicons.org/node.js",
+      "config": "{\"type\":\"web\",\"runtime\":\"node\",\"build_command\":\"npm install && npm run build\",\"start_command\":\"npm start\",\"port\":3000,\"health_check\":\"/health\"}",
+      "variables": "[{\"key\":\"NODE_ENV\",\"label\":\"Node Environment\",\"default\":\"production\",\"required\":false,\"secret\":false},{\"key\":\"NPM_TOKEN\",\"label\":\"NPM Token\",\"default\":\"\",\"required\":false,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-react",
+      "name": "React Application",
+      "description": "React single-page application with Vite",
+      "category": "frontend",
+      "logo": "https://cdn.simpleicons.org/react",
+      "config": "{\"type\":\"web\",\"runtime\":\"node\",\"build_command\":\"npm install && npm run build\",\"start_command\":\"npx serve -s dist\",\"port\":3000}",
+      "variables": "[{\"key\":\"VITE_API_URL\",\"label\":\"API URL\",\"default\":\"\",\"required\":true,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-python",
+      "name": "Python Application",
+      "description": "Python application with FastAPI/Flask support",
+      "category": "web",
+      "logo": "https://cdn.simpleicons.org/python",
+      "config": "{\"type\":\"web\",\"runtime\":\"python\",\"build_command\":\"pip install -r requirements.txt\",\"start_command\":\"python main.py\",\"port\":8000}",
+      "variables": "[{\"key\":\"PYTHON_VERSION\",\"label\":\"Python Version\",\"default\":\"3.11\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-go",
+      "name": "Go Application",
+      "description": "Go backend service",
+      "category": "web",
+      "logo": "https://cdn.simpleicons.org/go",
+      "config": "{\"type\":\"web\",\"runtime\":\"go\",\"build_command\":\"go build -o app .\",\"start_command\":\"./app\",\"port\":8080}",
+      "variables": "[{\"key\":\"GO_VERSION\",\"label\":\"Go Version\",\"default\":\"1.21\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-postgres",
+      "name": "PostgreSQL Database",
+      "description": "Managed PostgreSQL database",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/postgresql",
+      "config": "{\"type\":\"database\",\"runtime\":\"postgres\",\"port\":5432}",
+      "variables": "[{\"key\":\"POSTGRES_USER\",\"label\":\"Username\",\"default\":\"postgres\",\"required\":true,\"secret\":false},{\"key\":\"POSTGRES_PASSWORD\",\"label\":\"Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"POSTGRES_DB\",\"label\":\"Database Name\",\"default\":\"app\",\"required\":true,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-redis",
+      "name": "Redis Cache",
+      "description": "In-memory data store",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/redis",
+      "config": "{\"type\":\"database\",\"runtime\":\"redis\",\"port\":6379}",
+      "variables": "[{\"key\":\"REDIS_PASSWORD\",\"label\":\"Password\",\"default\":\"\",\"required\":false,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-mongodb",
+      "name": "MongoDB Database",
+      "description": "NoSQL document database",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/mongodb",
+      "config": "{\"type\":\"database\",\"runtime\":\"mongodb\",\"port\":27017}",
+      "variables": "[{\"key\":\"MONGO_INITDB_ROOT_USERNAME\",\"label\":\"Root Username\",\"default\":\"admin\",\"required\":true,\"secret\":false},{\"key\":\"MONGO_INITDB_ROOT_PASSWORD\",\"label\":\"Root Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-mysql",
+      "name": "MySQL Database",
+      "description": "Managed MySQL database service",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/mysql",
+      "config": "{\"type\":\"database\",\"runtime\":\"mysql\",\"port\":3306}",
+      "variables": "[{\"key\":\"MYSQL_DATABASE\",\"label\":\"Database Name\",\"default\":\"app\",\"required\":true,\"secret\":false},{\"key\":\"MYSQL_USER\",\"label\":\"Username\",\"default\":\"app\",\"required\":true,\"secret\":false},{\"key\":\"MYSQL_PASSWORD\",\"label\":\"User Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"MYSQL_ROOT_PASSWORD\",\"label\":\"Root Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-mariadb",
+      "name": "MariaDB Database",
+      "description": "Managed MariaDB database service",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/mariadb",
+      "config": "{\"type\":\"database\",\"runtime\":\"mariadb\",\"port\":3306}",
+      "variables": "[{\"key\":\"MARIADB_DATABASE\",\"label\":\"Database Name\",\"default\":\"app\",\"required\":true,\"secret\":false},{\"key\":\"MARIADB_USER\",\"label\":\"Username\",\"default\":\"app\",\"required\":true,\"secret\":false},{\"key\":\"MARIADB_PASSWORD\",\"label\":\"User Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"MARIADB_ROOT_PASSWORD\",\"label\":\"Root Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-clickhouse",
+      "name": "ClickHouse Database",
+      "description": "Column-oriented analytics database",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/clickhouse",
+      "config": "{\"type\":\"database\",\"runtime\":\"clickhouse\",\"port\":8123}",
+      "variables": "[{\"key\":\"CLICKHOUSE_DB\",\"label\":\"Database Name\",\"default\":\"app\",\"required\":false,\"secret\":false},{\"key\":\"CLICKHOUSE_USER\",\"label\":\"Username\",\"default\":\"default\",\"required\":false,\"secret\":false},{\"key\":\"CLICKHOUSE_PASSWORD\",\"label\":\"Password\",\"default\":\"\",\"required\":false,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-dragonfly",
+      "name": "Dragonfly Database",
+      "description": "Redis-compatible in-memory data store powered by Dragonfly",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/redis",
+      "config": "{\"type\":\"database\",\"runtime\":\"dragonfly\",\"port\":6379}",
+      "variables": "[{\"key\":\"DRAGONFLY_PASSWORD\",\"label\":\"Password\",\"default\":\"\",\"required\":false,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-worker",
+      "name": "Background Worker",
+      "description": "Background job processing service",
+      "category": "worker",
+      "logo": "",
+      "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}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-cron",
+      "name": "Cron Job",
+      "description": "Scheduled task runner",
+      "category": "cron",
+      "logo": "",
+      "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}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-docker",
+      "name": "Docker Image",
+      "description": "Deploy from any Docker image",
+      "category": "custom",
+      "logo": "https://cdn.simpleicons.org/docker",
+      "config": "{\"type\":\"web\",\"runtime\":\"docker\",\"port\":80}",
+      "variables": "[{\"key\":\"IMAGE\",\"label\":\"Docker Image\",\"default\":\"\",\"required\":true,\"secret\":false},{\"key\":\"TAG\",\"label\":\"Image Tag\",\"default\":\"latest\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-nextcloud",
+      "name": "Nextcloud",
+      "description": "Self-hosted file sync, share and collaboration platform",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/nextcloud",
+      "config": "{\"type\":\"web\",\"runtime\":\"nextcloud:30-apache\",\"port\":80,\"health_check\":\"/status.php\"}",
+      "variables": "[{\"key\":\"NEXTCLOUD_ADMIN_USER\",\"label\":\"Admin User\",\"default\":\"admin\",\"required\":false,\"secret\":false},{\"key\":\"NEXTCLOUD_ADMIN_PASSWORD\",\"label\":\"Admin Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"NEXTCLOUD_TRUSTED_DOMAINS\",\"label\":\"Trusted Domains\",\"default\":\"\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-gitea",
+      "name": "Gitea",
+      "description": "Lightweight self-hosted Git service",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/gitea",
+      "config": "{\"type\":\"web\",\"runtime\":\"gitea/gitea:1\",\"port\":3000,\"health_check\":\"/api/healthz\"}",
+      "variables": "[{\"key\":\"GITEA__server__DOMAIN\",\"label\":\"Server Domain\",\"default\":\"localhost\",\"required\":false,\"secret\":false},{\"key\":\"GITEA__server__ROOT_URL\",\"label\":\"Root URL\",\"default\":\"\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-ghost",
+      "name": "Ghost",
+      "description": "Independent publishing platform for blogs and newsletters",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/ghost",
+      "config": "{\"type\":\"web\",\"runtime\":\"ghost:5-alpine\",\"port\":2368,\"health_check\":\"/ghost/api/admin/site/\"}",
+      "variables": "[{\"key\":\"url\",\"label\":\"Public URL\",\"default\":\"\",\"required\":true,\"secret\":false},{\"key\":\"database__client\",\"label\":\"Database Client\",\"default\":\"sqlite3\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-uptime-kuma",
+      "name": "Uptime Kuma",
+      "description": "Self-hosted monitoring tool for services and websites",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/uptimekuma",
+      "config": "{\"type\":\"web\",\"runtime\":\"louislam/uptime-kuma:1\",\"port\":3001,\"health_check\":\"/\"}",
+      "variables": "[]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-vaultwarden",
+      "name": "Vaultwarden",
+      "description": "Lightweight Bitwarden-compatible password manager",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/bitwarden",
+      "config": "{\"type\":\"web\",\"runtime\":\"vaultwarden/server:latest\",\"port\":80,\"health_check\":\"/alive\"}",
+      "variables": "[{\"key\":\"ADMIN_TOKEN\",\"label\":\"Admin Token\",\"default\":\"\",\"required\":false,\"secret\":true},{\"key\":\"SIGNUPS_ALLOWED\",\"label\":\"Allow Signups\",\"default\":\"false\",\"required\":false,\"secret\":false},{\"key\":\"DOMAIN\",\"label\":\"Domain URL\",\"default\":\"\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-jellyfin",
+      "name": "Jellyfin",
+      "description": "Free software media system for movies, shows and music",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/jellyfin",
+      "config": "{\"type\":\"web\",\"runtime\":\"jellyfin/jellyfin:latest\",\"port\":8096,\"health_check\":\"/health\"}",
+      "variables": "[]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-n8n",
+      "name": "n8n",
+      "description": "Workflow automation tool with hundreds of integrations",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/n8n",
+      "config": "{\"type\":\"web\",\"runtime\":\"n8nio/n8n:latest\",\"port\":5678,\"health_check\":\"/healthz\"}",
+      "variables": "[{\"key\":\"N8N_HOST\",\"label\":\"Hostname\",\"default\":\"\",\"required\":false,\"secret\":false},{\"key\":\"N8N_ENCRYPTION_KEY\",\"label\":\"Encryption Key\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"WEBHOOK_URL\",\"label\":\"Webhook URL\",\"default\":\"\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-grafana",
+      "name": "Grafana",
+      "description": "Observability dashboards for metrics, logs and traces",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/grafana",
+      "config": "{\"type\":\"web\",\"runtime\":\"grafana/grafana:latest\",\"port\":3000,\"health_check\":\"/api/health\"}",
+      "variables": "[{\"key\":\"GF_SECURITY_ADMIN_PASSWORD\",\"label\":\"Admin Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-immich",
+      "name": "Immich",
+      "description": "Self-hosted photo and video backup",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/immich",
+      "config": "{\"type\":\"web\",\"runtime\":\"ghcr.io/immich-app/immich-server:release\",\"port\":2283,\"health_check\":\"/api/server/ping\"}",
+      "variables": "[{\"key\":\"DB_PASSWORD\",\"label\":\"Database Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"DB_HOSTNAME\",\"label\":\"Database Host\",\"default\":\"\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-meilisearch",
+      "name": "Meilisearch",
+      "description": "Fast, typo-tolerant search engine API",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/meilisearch",
+      "config": "{\"type\":\"web\",\"runtime\":\"getmeili/meilisearch:v1\",\"port\":7700,\"health_check\":\"/health\"}",
+      "variables": "[{\"key\":\"MEILI_MASTER_KEY\",\"label\":\"Master Key\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"MEILI_ENV\",\"label\":\"Environment\",\"default\":\"production\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-plausible",
+      "name": "Plausible Analytics",
+      "description": "Lightweight, privacy-friendly web analytics",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/plausibleanalytics",
+      "config": "{\"type\":\"web\",\"runtime\":\"ghcr.io/plausible/community-edition:v2\",\"port\":8000,\"health_check\":\"/api/health\"}",
+      "variables": "[{\"key\":\"BASE_URL\",\"label\":\"Base URL\",\"default\":\"\",\"required\":true,\"secret\":false},{\"key\":\"SECRET_KEY_BASE\",\"label\":\"Secret Key Base\",\"default\":\"\",\"required\":true,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-minio",
+      "name": "MinIO",
+      "description": "S3-compatible object storage",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/minio",
+      "config": "{\"type\":\"web\",\"runtime\":\"minio/minio:latest\",\"start_command\":\"server /data --console-address \\\":9001\\\"\",\"port\":9001,\"health_check\":\"/minio/health/live\"}",
+      "variables": "[{\"key\":\"MINIO_ROOT_USER\",\"label\":\"Root User\",\"default\":\"minioadmin\",\"required\":true,\"secret\":false},{\"key\":\"MINIO_ROOT_PASSWORD\",\"label\":\"Root Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-appwrite",
+      "name": "Appwrite",
+      "description": "Backend-as-a-service for web and mobile apps",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/appwrite",
+      "config": "{\"type\":\"web\",\"runtime\":\"appwrite/appwrite:1.6\",\"port\":80,\"health_check\":\"/health\"}",
+      "variables": "[]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-wordpress",
+      "name": "WordPress",
+      "description": "Classic CMS powering a large share of the web",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/wordpress",
+      "config": "{\"type\":\"web\",\"runtime\":\"wordpress:6-apache\",\"port\":80,\"health_check\":\"/wp-login.php\"}",
+      "variables": "[{\"key\":\"WORDPRESS_DB_HOST\",\"label\":\"Database Host\",\"default\":\"\",\"required\":true,\"secret\":false},{\"key\":\"WORDPRESS_DB_USER\",\"label\":\"Database User\",\"default\":\"wordpress\",\"required\":true,\"secret\":false},{\"key\":\"WORDPRESS_DB_PASSWORD\",\"label\":\"Database Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"WORDPRESS_DB_NAME\",\"label\":\"Database Name\",\"default\":\"wordpress\",\"required\":true,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-paperless",
+      "name": "Paperless-ngx",
+      "description": "Document management system with OCR",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/paperlessngx",
+      "config": "{\"type\":\"web\",\"runtime\":\"ghcr.io/paperless-ngx/paperless-ngx:latest\",\"port\":8000,\"health_check\":\"/api/\"}",
+      "variables": "[{\"key\":\"PAPERLESS_ADMIN_PASSWORD\",\"label\":\"Admin Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"PAPERLESS_URL\",\"label\":\"Public URL\",\"default\":\"\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-ntfy",
+      "name": "ntfy",
+      "description": "Push notification service over HTTP",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/ntfy",
+      "config": "{\"type\":\"web\",\"runtime\":\"binwiederhier/ntfy:latest\",\"start_command\":\"serve\",\"port\":80,\"health_check\":\"/v1/health\"}",
+      "variables": "[]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    }
+  ]
+}