Add app shell with left nav; split dashboard into top-level pages

Introduce a Layout shell with a collapsible left sidebar (state persisted
to localStorage) that becomes a hamburger drawer under md. Break the single
Dashboard into routed pages — Overview (summary tiles + node bar), Services,
Scheduled, Programs, Gateway, Mesh — nested under the shared Layout via an
Outlet. Centralize useEventStream in Layout (drop the per-page duplicates),
repoint detail-page back links at their section pages, and remove the now-dead
SectionHeader component / SECTION_HEADERS map (each page owns its header).

app/src/components/Layout.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from "react"
+import { Link, NavLink, Outlet } from "react-router-dom"
+import {
+  ChevronLeft,
+  ChevronRight,
+  Clock,
+  Globe,
+  LayoutDashboard,
+  Menu,
+  Package,
+  Server,
+  Share2,
+  X,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+import { useEventStream } from "@/services/api/hooks"
+
+const NAV = [
+  { to: "/", label: "Overview", icon: LayoutDashboard, end: true },
+  { to: "/services", label: "Services", icon: Server, end: false },
+  { to: "/scheduled", label: "Scheduled", icon: Clock, end: false },
+  { to: "/programs", label: "Programs", icon: Package, end: false },
+  { to: "/gateway", label: "Gateway", icon: Globe, end: false },
+  { to: "/mesh", label: "Mesh", icon: Share2, end: false },
+]
+
+const COLLAPSE_KEY = "castle-nav-collapsed"
+
+function NavItems({ collapsed, onNavigate }: { collapsed: boolean; onNavigate?: () => void }) {
+  return (
+    <nav className="flex-1 px-2 py-3 space-y-1 overflow-y-auto">
+      {NAV.map(({ to, label, icon: Icon, end }) => (
+        <NavLink
+          key={to}
+          to={to}
+          end={end}
+          onClick={onNavigate}
+          title={collapsed ? label : undefined}
+          className={({ isActive }) =>
+            cn(
+              "flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+              collapsed && "justify-center px-0",
+              isActive
+                ? "bg-[var(--primary)]/10 text-[var(--foreground)] font-medium"
+                : "text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--card)]",
+            )
+          }
+        >
+          <Icon size={18} className="shrink-0" />
+          {!collapsed && <span>{label}</span>}
+        </NavLink>
+      ))}
+    </nav>
+  )
+}
+
+function Brand({ collapsed, onClick }: { collapsed?: boolean; onClick?: () => void }) {
+  return (
+    <Link to="/" onClick={onClick} className="font-bold text-lg truncate">
+      {collapsed ? "C" : "Castle"}
+    </Link>
+  )
+}
+
+export function Layout() {
+  useEventStream()
+  const [collapsed, setCollapsed] = useState(() => localStorage.getItem(COLLAPSE_KEY) === "1")
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  useEffect(() => {
+    localStorage.setItem(COLLAPSE_KEY, collapsed ? "1" : "0")
+  }, [collapsed])
+
+  return (
+    <div className="min-h-screen bg-[var(--background)]">
+      {/* Mobile top bar */}
+      <header className="md:hidden fixed top-0 inset-x-0 h-14 z-40 flex items-center gap-3 px-4 border-b border-[var(--border)] bg-[var(--background)]">
+        <button
+          onClick={() => setMobileOpen(true)}
+          aria-label="Open menu"
+          className="text-[var(--muted)] hover:text-[var(--foreground)] transition-colors"
+        >
+          <Menu size={22} />
+        </button>
+        <Brand />
+      </header>
+
+      {/* Mobile drawer */}
+      {mobileOpen && (
+        <div className="md:hidden fixed inset-0 z-50">
+          <div className="absolute inset-0 bg-black/60" onClick={() => setMobileOpen(false)} />
+          <aside className="absolute left-0 top-0 h-full w-64 flex flex-col bg-[var(--background)] border-r border-[var(--border)]">
+            <div className="h-14 flex items-center justify-between px-4 border-b border-[var(--border)]">
+              <Brand onClick={() => setMobileOpen(false)} />
+              <button
+                onClick={() => setMobileOpen(false)}
+                aria-label="Close menu"
+                className="text-[var(--muted)] hover:text-[var(--foreground)] transition-colors"
+              >
+                <X size={20} />
+              </button>
+            </div>
+            <NavItems collapsed={false} onNavigate={() => setMobileOpen(false)} />
+          </aside>
+        </div>
+      )}
+
+      {/* Desktop sidebar */}
+      <aside
+        className={cn(
+          "hidden md:flex fixed top-0 left-0 h-full flex-col border-r border-[var(--border)] bg-[var(--background)] transition-[width] duration-200",
+          collapsed ? "w-16" : "w-56",
+        )}
+      >
+        <div
+          className={cn(
+            "h-14 flex items-center border-b border-[var(--border)]",
+            collapsed ? "justify-center" : "px-4",
+          )}
+        >
+          <Brand collapsed={collapsed} />
+        </div>
+        <NavItems collapsed={collapsed} />
+        <button
+          onClick={() => setCollapsed((c) => !c)}
+          title={collapsed ? "Expand" : "Collapse"}
+          className={cn(
+            "h-12 flex items-center gap-3 border-t border-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)] transition-colors",
+            collapsed ? "justify-center" : "px-4",
+          )}
+        >
+          {collapsed ? (
+            <ChevronRight size={18} />
+          ) : (
+            <>
+              <ChevronLeft size={18} />
+              <span className="text-sm">Collapse</span>
+            </>
+          )}
+        </button>
+      </aside>
+
+      {/* Main content */}
+      <main
+        className={cn(
+          "min-w-0 pt-14 md:pt-0 transition-[padding] duration-200",
+          collapsed ? "md:pl-16" : "md:pl-56",
+        )}
+      >
+        <Outlet />
+      </main>
+    </div>
+  )
+}

app/src/components/PageHeader.tsx

@@ -0,0 +1,17 @@
+interface PageHeaderProps {
+  title: string
+  subtitle?: string
+  actions?: React.ReactNode
+}
+
+export function PageHeader({ title, subtitle, actions }: PageHeaderProps) {
+  return (
+    <div className="flex items-start justify-between gap-4 mb-6">
+      <div>
+        <h1 className="text-2xl font-bold">{title}</h1>
+        {subtitle && <p className="text-sm text-[var(--muted)] mt-1">{subtitle}</p>}
+      </div>
+      {actions && <div className="shrink-0">{actions}</div>}
+    </div>
+  )
+}

app/src/components/ScheduledSection.tsx

@@ -2,7 +2,6 @@ import { Link } from "react-router-dom"
 import { Play, RefreshCw, Square } from "lucide-react"
 import type { JobSummary, HealthStatus } from "@/types"
 import { useServiceAction } from "@/services/api/hooks"
-import { SectionHeader } from "./SectionHeader"
 import { StackBadge } from "./StackBadge"
 
 interface ScheduledSectionProps {
@@ -14,10 +13,8 @@ export function ScheduledSection({ jobs, statuses }: ScheduledSectionProps) {
   const statusMap = new Map(statuses.map((s) => [s.id, s]))
 
   return (
-    <section>
+    <div className="border border-[var(--border)] rounded-lg overflow-x-auto">
-      <SectionHeader section="scheduled" />
+      <table className="w-full min-w-[36rem] text-sm">
-      <div className="border border-[var(--border)] rounded-lg overflow-x-auto">
-        <table className="w-full min-w-[36rem] text-sm">
           <thead>
             <tr className="bg-[var(--card)] border-b border-[var(--border)] text-left">
               <th className="px-3 py-2 font-medium text-[var(--muted)]">Name</th>
@@ -33,8 +30,7 @@ export function ScheduledSection({ jobs, statuses }: ScheduledSectionProps) {
             ))}
           </tbody>
         </table>
-      </div>
+    </div>
-    </section>
   )
 }
 

app/src/components/SectionHeader.tsx

@@ -1,11 +0,0 @@
-import { SECTION_HEADERS } from "@/lib/labels"
-
-export function SectionHeader({ section }: { section: string }) {
-  const info = SECTION_HEADERS[section]
-  return (
-    <div className="mb-3">
-      <h2 className="text-lg font-semibold">{info?.title ?? section}</h2>
-      <p className="text-sm text-[var(--muted)]">{info?.subtitle}</p>
-    </div>
-  )
-}

app/src/components/ServiceSection.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from "react"
 import type { ServiceSummary, HealthStatus } from "@/types"
 import { ServiceCard } from "./ServiceCard"
-import { SectionHeader } from "./SectionHeader"
 
 interface ServiceSectionProps {
   services: ServiceSummary[]
@@ -12,13 +11,10 @@ export function ServiceSection({ services, statuses }: ServiceSectionProps) {
   const statusMap = useMemo(() => new Map(statuses.map((s) => [s.id, s])), [statuses])
 
   return (
-    <section>
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <SectionHeader section="service" />
+      {services.map((svc) => (
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <ServiceCard key={svc.id} service={svc} health={statusMap.get(svc.id)} />
-        {services.map((svc) => (
+      ))}
-          <ServiceCard key={svc.id} service={svc} health={statusMap.get(svc.id)} />
+    </div>
-        ))}
-      </div>
-    </section>
   )
 }

app/src/lib/labels.ts

@@ -31,12 +31,6 @@ export const STACK_LABELS: Record<string, string> = {
   remote: "Remote",
 }
 
-export const SECTION_HEADERS: Record<string, { title: string; subtitle: string }> = {
-  service: { title: "Services", subtitle: "Long-running processes" },
-  scheduled: { title: "Scheduled Jobs", subtitle: "Systemd timers" },
-  program: { title: "Programs", subtitle: "Software catalog" },
-}
-
 export function runnerLabel(runner: string): string {
   return RUNNER_LABELS[runner] ?? runner
 }

app/src/pages/Dashboard.tsx

@@ -1,97 +0,0 @@
-import { useState } from "react"
-import { Plus } from "lucide-react"
-import { useServices, useJobs, usePrograms, useStatus, useGateway, useNodes, useMeshStatus, useEventStream } from "@/services/api/hooks"
-import { GatewayPanel } from "@/components/GatewayPanel"
-import { MeshPanel } from "@/components/MeshPanel"
-import { NodeBar } from "@/components/NodeBar"
-import { ServiceSection } from "@/components/ServiceSection"
-import { ScheduledSection } from "@/components/ScheduledSection"
-import { ProgramTable } from "@/components/ProgramTable"
-import { SectionHeader } from "@/components/SectionHeader"
-import { CreateDeploymentForm } from "@/components/detail/CreateDeploymentForm"
-
-
-export function Dashboard() {
-  useEventStream()
-  const { data: services, isLoading: loadingServices } = useServices()
-  const { data: jobs, isLoading: loadingJobs } = useJobs()
-  const { data: programs, isLoading: loadingPrograms } = usePrograms()
-  const { data: statusResp } = useStatus()
-  const { data: gateway } = useGateway()
-  const { data: nodes } = useNodes()
-  const { data: mesh } = useMeshStatus()
-  const [creating, setCreating] = useState<"service" | "job" | null>(null)
-
-  const statuses = statusResp?.statuses ?? []
-  const isLoading = loadingServices || loadingJobs || loadingPrograms
-  const existing =
-    creating === "service"
-      ? (services ?? []).map((s) => s.id)
-      : (jobs ?? []).map((j) => j.id)
-
-  return (
-    <div className="max-w-6xl mx-auto px-6 py-8">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold">Castle</h1>
-        <p className="text-[var(--muted)] mt-1">Personal software platform</p>
-      </div>
-
-      {nodes && <NodeBar nodes={nodes} />}
-
-      {gateway && (
-        <div className="mb-6">
-          <GatewayPanel gateway={gateway} statuses={statuses} />
-        </div>
-      )}
-
-      {mesh && (
-        <div className="mb-10">
-          <MeshPanel mesh={mesh} />
-        </div>
-      )}
-
-      <div className="flex items-center gap-2 mb-6">
-        <button
-          onClick={() => setCreating(creating === "service" ? null : "service")}
-          className="flex items-center gap-1 px-3 py-1.5 text-sm rounded border border-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)] hover:border-[var(--primary)] transition-colors"
-        >
-          <Plus size={14} /> Add service
-        </button>
-        <button
-          onClick={() => setCreating(creating === "job" ? null : "job")}
-          className="flex items-center gap-1 px-3 py-1.5 text-sm rounded border border-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)] hover:border-[var(--primary)] transition-colors"
-        >
-          <Plus size={14} /> Add job
-        </button>
-      </div>
-      {creating && (
-        <div className="mb-6 max-w-2xl">
-          <CreateDeploymentForm
-            kind={creating}
-            existingNames={existing}
-            onCancel={() => setCreating(null)}
-          />
-        </div>
-      )}
-
-      {isLoading ? (
-        <p className="text-[var(--muted)]">Loading...</p>
-      ) : (
-        <div className="space-y-10">
-          {services && services.length > 0 && (
-            <ServiceSection services={services} statuses={statuses} />
-          )}
-          {jobs && jobs.length > 0 && (
-            <ScheduledSection jobs={jobs} statuses={statuses} />
-          )}
-          {programs && programs.length > 0 && (
-            <section>
-              <SectionHeader section="program" />
-              <ProgramTable programs={programs} />
-            </section>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

app/src/pages/GatewayPage.tsx

@@ -0,0 +1,23 @@
+import { useGateway, useStatus } from "@/services/api/hooks"
+import { GatewayPanel } from "@/components/GatewayPanel"
+import { PageHeader } from "@/components/PageHeader"
+
+export function GatewayPage() {
+  const { data: gateway, isLoading } = useGateway()
+  const { data: statusResp } = useStatus()
+  const statuses = statusResp?.statuses ?? []
+
+  return (
+    <div className="max-w-6xl mx-auto px-6 py-8">
+      <PageHeader title="Gateway" subtitle="Reverse proxy and routes" />
+
+      {isLoading ? (
+        <p className="text-[var(--muted)]">Loading...</p>
+      ) : gateway ? (
+        <GatewayPanel gateway={gateway} statuses={statuses} />
+      ) : (
+        <p className="text-[var(--muted)]">Gateway unavailable.</p>
+      )}
+    </div>
+  )
+}

app/src/pages/MeshPage.tsx

@@ -0,0 +1,27 @@
+import { useMeshStatus, useNodes } from "@/services/api/hooks"
+import { MeshPanel } from "@/components/MeshPanel"
+import { NodeBar } from "@/components/NodeBar"
+import { PageHeader } from "@/components/PageHeader"
+
+export function MeshPage() {
+  const { data: mesh, isLoading } = useMeshStatus()
+  const { data: nodes } = useNodes()
+
+  return (
+    <div className="max-w-6xl mx-auto px-6 py-8">
+      <PageHeader title="Mesh" subtitle="Multi-node discovery and coordination" />
+
+      {nodes && <NodeBar nodes={nodes} />}
+
+      {isLoading ? (
+        <p className="text-[var(--muted)]">Loading...</p>
+      ) : mesh?.enabled ? (
+        <MeshPanel mesh={mesh} />
+      ) : (
+        <p className="text-[var(--muted)]">
+          Mesh coordination is disabled on this node.
+        </p>
+      )}
+    </div>
+  )
+}

app/src/pages/Overview.tsx

@@ -0,0 +1,93 @@
+import { Link } from "react-router-dom"
+import { Clock, Globe, Package, Server, Share2 } from "lucide-react"
+import {
+  useGateway,
+  useJobs,
+  useMeshStatus,
+  useNodes,
+  usePrograms,
+  useServices,
+  useStatus,
+} from "@/services/api/hooks"
+import { NodeBar } from "@/components/NodeBar"
+import { PageHeader } from "@/components/PageHeader"
+
+export function Overview() {
+  const { data: services } = useServices()
+  const { data: jobs } = useJobs()
+  const { data: programs } = usePrograms()
+  const { data: statusResp } = useStatus()
+  const { data: gateway } = useGateway()
+  const { data: mesh } = useMeshStatus()
+  const { data: nodes } = useNodes()
+
+  const statuses = statusResp?.statuses ?? []
+  const upCount = (ids: string[]) =>
+    statuses.filter((s) => ids.includes(s.id) && s.status === "up").length
+
+  const serviceIds = (services ?? []).map((s) => s.id)
+  const routeCount = gateway?.routes?.length ?? 0
+
+  const tiles = [
+    {
+      to: "/services",
+      icon: Server,
+      label: "Services",
+      value: services?.length ?? 0,
+      detail: services ? `${upCount(serviceIds)} up` : "",
+    },
+    {
+      to: "/scheduled",
+      icon: Clock,
+      label: "Scheduled",
+      value: jobs?.length ?? 0,
+      detail: jobs ? `${jobs.length === 1 ? "job" : "jobs"}` : "",
+    },
+    {
+      to: "/programs",
+      icon: Package,
+      label: "Programs",
+      value: programs?.length ?? 0,
+      detail: programs ? "in catalog" : "",
+    },
+    {
+      to: "/gateway",
+      icon: Globe,
+      label: "Gateway",
+      value: routeCount,
+      detail: gateway ? `tls: ${gateway.tls ?? "off"}` : "",
+    },
+    {
+      to: "/mesh",
+      icon: Share2,
+      label: "Mesh",
+      value: mesh?.enabled ? mesh.peer_count : "—",
+      detail: mesh?.enabled ? "peers" : "disabled",
+    },
+  ]
+
+  return (
+    <div className="max-w-6xl mx-auto px-6 py-8">
+      <PageHeader title="Castle" subtitle="Personal software platform" />
+
+      {nodes && <NodeBar nodes={nodes} />}
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+        {tiles.map(({ to, icon: Icon, label, value, detail }) => (
+          <Link
+            key={to}
+            to={to}
+            className="flex flex-col gap-2 rounded-lg border border-[var(--border)] bg-[var(--card)] p-4 hover:border-[var(--primary)] transition-colors"
+          >
+            <div className="flex items-center gap-2 text-[var(--muted)]">
+              <Icon size={16} />
+              <span className="text-sm">{label}</span>
+            </div>
+            <div className="text-2xl font-bold">{value}</div>
+            <div className="text-xs text-[var(--muted)]">{detail}</div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}

app/src/pages/ProgramDetail.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react"
 import { useParams } from "react-router-dom"
-import { useProgram, useEventStream } from "@/services/api/hooks"
+import { useProgram } from "@/services/api/hooks"
 import { runnerLabel, subdomainUrl } from "@/lib/labels"
 import { DetailHeader } from "@/components/detail/DetailHeader"
 import { ConfigPanel } from "@/components/detail/ConfigPanel"
@@ -8,7 +8,6 @@ import { DeploymentsSection } from "@/components/detail/DeploymentsSection"
 import { ProgramActions, ActionOutputPanel, type ActionOutput } from "@/components/ProgramActions"
 
 export function ProgramDetailPage() {
-  useEventStream()
   const { name } = useParams<{ name: string }>()
   const { data: deployment, isLoading, error, refetch } = useProgram(name ?? "")
   const [actionOutput, setActionOutput] = useState<ActionOutput | null>(null)
@@ -39,7 +38,7 @@ export function ProgramDetailPage() {
   return (
     <div className="max-w-3xl mx-auto px-6 py-8">
       <DetailHeader
-        backTo="/"
+        backTo="/programs"
         backLabel="Back to Programs"
         name={deployment.id}
         behavior={deployment.behavior}

app/src/pages/Programs.tsx

@@ -0,0 +1,21 @@
+import { usePrograms } from "@/services/api/hooks"
+import { ProgramTable } from "@/components/ProgramTable"
+import { PageHeader } from "@/components/PageHeader"
+
+export function Programs() {
+  const { data: programs, isLoading } = usePrograms()
+
+  return (
+    <div className="max-w-6xl mx-auto px-6 py-8">
+      <PageHeader title="Programs" subtitle="Software catalog" />
+
+      {isLoading ? (
+        <p className="text-[var(--muted)]">Loading...</p>
+      ) : programs && programs.length > 0 ? (
+        <ProgramTable programs={programs} />
+      ) : (
+        <p className="text-[var(--muted)]">No programs yet.</p>
+      )}
+    </div>
+  )
+}

app/src/pages/Scheduled.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react"
+import { Plus } from "lucide-react"
+import { useJobs, useStatus } from "@/services/api/hooks"
+import { ScheduledSection } from "@/components/ScheduledSection"
+import { PageHeader } from "@/components/PageHeader"
+import { CreateDeploymentForm } from "@/components/detail/CreateDeploymentForm"
+
+export function Scheduled() {
+  const { data: jobs, isLoading } = useJobs()
+  const { data: statusResp } = useStatus()
+  const [creating, setCreating] = useState(false)
+
+  const statuses = statusResp?.statuses ?? []
+  const existing = (jobs ?? []).map((j) => j.id)
+
+  return (
+    <div className="max-w-6xl mx-auto px-6 py-8">
+      <PageHeader
+        title="Scheduled"
+        subtitle="Systemd timers"
+        actions={
+          <button
+            onClick={() => setCreating((c) => !c)}
+            className="flex items-center gap-1 px-3 py-1.5 text-sm rounded border border-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)] hover:border-[var(--primary)] transition-colors"
+          >
+            <Plus size={14} /> Add job
+          </button>
+        }
+      />
+
+      {creating && (
+        <div className="mb-6 max-w-2xl">
+          <CreateDeploymentForm
+            kind="job"
+            existingNames={existing}
+            onCancel={() => setCreating(false)}
+          />
+        </div>
+      )}
+
+      {isLoading ? (
+        <p className="text-[var(--muted)]">Loading...</p>
+      ) : jobs && jobs.length > 0 ? (
+        <ScheduledSection jobs={jobs} statuses={statuses} />
+      ) : (
+        <p className="text-[var(--muted)]">No scheduled jobs yet.</p>
+      )}
+    </div>
+  )
+}

app/src/pages/ScheduledDetail.tsx

@@ -1,6 +1,6 @@
 import { useParams } from "react-router-dom"
 import { Clock } from "lucide-react"
-import { useJob, useStatus, useEventStream } from "@/services/api/hooks"
+import { useJob, useStatus } from "@/services/api/hooks"
 import { LogViewer } from "@/components/LogViewer"
 import { DetailHeader } from "@/components/detail/DetailHeader"
 import { ServiceControls } from "@/components/detail/ServiceControls"
@@ -8,7 +8,6 @@ import { SystemdPanel } from "@/components/detail/SystemdPanel"
 import { ConfigPanel } from "@/components/detail/ConfigPanel"
 
 export function ScheduledDetailPage() {
-  useEventStream()
   const { name } = useParams<{ name: string }>()
   const { data: deployment, isLoading, error, refetch } = useJob(name ?? "")
   const { data: statusResp } = useStatus()
@@ -32,7 +31,7 @@ export function ScheduledDetailPage() {
   return (
     <div className="max-w-3xl mx-auto px-6 py-8">
       <DetailHeader
-        backTo="/"
+        backTo="/scheduled"
         backLabel="Back to Jobs"
         name={deployment.id}
         stack={deployment.stack}

app/src/pages/ServiceDetail.tsx

@@ -1,6 +1,6 @@
 import { useParams, Link } from "react-router-dom"
 import { Server, ExternalLink, Terminal } from "lucide-react"
-import { useService, useStatus, useEventStream, useCaddyfile } from "@/services/api/hooks"
+import { useService, useStatus, useCaddyfile } from "@/services/api/hooks"
 import { runnerLabel, subdomainUrl } from "@/lib/labels"
 import { HealthBadge } from "@/components/HealthBadge"
 import { LogViewer } from "@/components/LogViewer"
@@ -10,7 +10,6 @@ import { SystemdPanel } from "@/components/detail/SystemdPanel"
 import { ConfigPanel } from "@/components/detail/ConfigPanel"
 
 export function ServiceDetailPage() {
-  useEventStream()
   const { name } = useParams<{ name: string }>()
   const { data: deployment, isLoading, error, refetch } = useService(name ?? "")
   const { data: statusResp } = useStatus()
@@ -36,7 +35,7 @@ export function ServiceDetailPage() {
   return (
     <div className="max-w-3xl mx-auto px-6 py-8">
       <DetailHeader
-        backTo="/"
+        backTo="/services"
         backLabel="Back to Services"
         name={deployment.id}
         behavior="daemon"

app/src/pages/Services.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react"
+import { Plus } from "lucide-react"
+import { useServices, useStatus } from "@/services/api/hooks"
+import { ServiceSection } from "@/components/ServiceSection"
+import { PageHeader } from "@/components/PageHeader"
+import { CreateDeploymentForm } from "@/components/detail/CreateDeploymentForm"
+
+export function Services() {
+  const { data: services, isLoading } = useServices()
+  const { data: statusResp } = useStatus()
+  const [creating, setCreating] = useState(false)
+
+  const statuses = statusResp?.statuses ?? []
+  const existing = (services ?? []).map((s) => s.id)
+
+  return (
+    <div className="max-w-6xl mx-auto px-6 py-8">
+      <PageHeader
+        title="Services"
+        subtitle="Long-running processes"
+        actions={
+          <button
+            onClick={() => setCreating((c) => !c)}
+            className="flex items-center gap-1 px-3 py-1.5 text-sm rounded border border-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)] hover:border-[var(--primary)] transition-colors"
+          >
+            <Plus size={14} /> Add service
+          </button>
+        }
+      />
+
+      {creating && (
+        <div className="mb-6 max-w-2xl">
+          <CreateDeploymentForm
+            kind="service"
+            existingNames={existing}
+            onCancel={() => setCreating(false)}
+          />
+        </div>
+      )}
+
+      {isLoading ? (
+        <p className="text-[var(--muted)]">Loading...</p>
+      ) : services && services.length > 0 ? (
+        <ServiceSection services={services} statuses={statuses} />
+      ) : (
+        <p className="text-[var(--muted)]">No services yet.</p>
+      )}
+    </div>
+  )
+}

app/src/router/routes.tsx

@@ -1,5 +1,11 @@
 import { createBrowserRouter } from "react-router-dom"
-import { Dashboard } from "@/pages/Dashboard"
+import { Layout } from "@/components/Layout"
+import { Overview } from "@/pages/Overview"
+import { Services } from "@/pages/Services"
+import { Scheduled } from "@/pages/Scheduled"
+import { Programs } from "@/pages/Programs"
+import { GatewayPage } from "@/pages/GatewayPage"
+import { MeshPage } from "@/pages/MeshPage"
 import { ServiceDetailPage } from "@/pages/ServiceDetail"
 import { ScheduledDetailPage } from "@/pages/ScheduledDetail"
 import { ProgramDetailPage } from "@/pages/ProgramDetail"
@@ -9,26 +15,19 @@ import { NodeDetailPage } from "@/pages/NodeDetail"
 export const router = createBrowserRouter([
   {
     path: "/",
-    element: <Dashboard />,
+    element: <Layout />,
-  },
+    children: [
-  {
+      { index: true, element: <Overview /> },
-    path: "/services/:name",
+      { path: "services", element: <Services /> },
-    element: <ServiceDetailPage />,
+      { path: "scheduled", element: <Scheduled /> },
-  },
+      { path: "programs", element: <Programs /> },
-  {
+      { path: "gateway", element: <GatewayPage /> },
-    path: "/jobs/:name",
+      { path: "mesh", element: <MeshPage /> },
-    element: <ScheduledDetailPage />,
+      { path: "services/:name", element: <ServiceDetailPage /> },
-  },
+      { path: "jobs/:name", element: <ScheduledDetailPage /> },
-  {
+      { path: "programs/:name", element: <ProgramDetailPage /> },
-    path: "/programs/:name",
+      { path: "deployment/:name", element: <ProgramRedirect /> },
-    element: <ProgramDetailPage />,
+      { path: "node/:hostname", element: <NodeDetailPage /> },
-  },
+    ],
-  {
-    path: "/deployment/:name",
-    element: <ProgramRedirect />,
-  },
-  {
-    path: "/node/:hostname",
-    element: <NodeDetailPage />,
   },
 ])