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