@porkytheblack/garage-dashboard 0.1.0

package/app/(app)/namespaces/mint-dialog.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { SecretReveal, Spinner } from "@/components/shared";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import type { NamespaceDto } from "@/lib/types";
+
+/** Mints a namespace-bound key, then reveals it once. Restyled to the form idiom. */
+export function MintKeyDialog({
+  namespace,
+  keyName,
+  minted,
+  busy,
+  onKeyName,
+  onMint,
+  onClose,
+}: {
+  namespace: NamespaceDto | null;
+  keyName: string;
+  minted: string | null;
+  busy: boolean;
+  onKeyName: (v: string) => void;
+  onMint: () => void;
+  onClose: () => void;
+}) {
+  return (
+    <Dialog open={!!namespace} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Mint key for {namespace?.name}</DialogTitle>
+          <DialogDescription>A namespace-bound key may act only within this namespace.</DialogDescription>
+        </DialogHeader>
+        {minted ? (
+          <div className="space-y-2">
+            <p className="text-[13px] text-muted-foreground">Copy this key now — it won&apos;t be shown again.</p>
+            <SecretReveal value={minted} />
+          </div>
+        ) : (
+          <div className="space-y-1.5">
+            <Label>Key name</Label>
+            <Input autoFocus value={keyName} onChange={(e) => onKeyName(e.target.value)} placeholder="ci-runner" />
+          </div>
+        )}
+        <DialogFooter>
+          {minted ? (
+            <Button onClick={onClose}>Done</Button>
+          ) : (
+            <>
+              <Button variant="ghost" onClick={onClose} disabled={busy}>
+                Cancel
+              </Button>
+              <Button onClick={onMint} disabled={busy}>
+                {busy ? <Spinner /> : <KeyRound />} Mint key
+              </Button>
+            </>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/app/(app)/namespaces/page.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState } from "react";
+import { Boxes, Plus } from "lucide-react";
+import { toast } from "sonner";
+import { useQuery } from "@/lib/hooks";
+import { api } from "@/lib/api";
+import { Page, PageHeader, Loading, EmptyState, ErrorState, Spinner } from "@/components/shared";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogTrigger } from "@/components/ui/dialog";
+import { NamespaceRow } from "./list";
+import { MintKeyDialog } from "./mint-dialog";
+import type { NamespaceDto } from "@/lib/types";
+
+export default function NamespacesPage() {
+  const { data, loading, error, reload } = useQuery<{ namespaces: NamespaceDto[] }>("/namespaces");
+  const [createOpen, setCreateOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const [mintFor, setMintFor] = useState<NamespaceDto | null>(null);
+  const [keyName, setKeyName] = useState("");
+  const [minted, setMinted] = useState<string | null>(null);
+
+  const create = async () => {
+    setBusy(true);
+    try {
+      await api("/namespaces", { method: "POST", body: { name: name.trim() } });
+      setCreateOpen(false);
+      setName("");
+      reload();
+      toast.success("Namespace created");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Create failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const destroy = async (id: string) => {
+    try {
+      await api(`/namespaces/${id}`, { method: "DELETE" });
+      toast.success("Namespace deleted");
+      reload();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Delete failed");
+    }
+  };
+
+  const mint = async () => {
+    if (!mintFor) return;
+    setBusy(true);
+    try {
+      const res = await api<{ data: { key: string } }>(`/namespaces/${mintFor.id}/keys`, {
+        method: "POST",
+        body: { name: keyName.trim() || "namespace-key" },
+      });
+      setMinted(res.data.key);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Mint failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const closeMint = () => {
+    setMintFor(null);
+    setKeyName("");
+    setMinted(null);
+  };
+
+  const namespaces = data?.namespaces ?? [];
+
+  return (
+    <Page>
+      <PageHeader
+        title="Namespaces"
+        description="Isolated tenant partitions — each owns its workspaces, sessions, credentials, and keys."
+        actions={
+          <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+            <DialogTrigger asChild>
+              <Button>
+                <Plus /> New namespace
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>New namespace</DialogTitle>
+                <DialogDescription>A fresh tenant partition with its own isolated resources.</DialogDescription>
+              </DialogHeader>
+              <div className="space-y-1.5">
+                <Label>Name</Label>
+                <Input autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="acme-corp" />
+              </div>
+              <DialogFooter>
+                <Button variant="ghost" onClick={() => setCreateOpen(false)} disabled={busy}>
+                  Cancel
+                </Button>
+                <Button onClick={create} disabled={busy || !name.trim()}>
+                  {busy ? <Spinner /> : null} Create
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        }
+      />
+
+      {error && <ErrorState message={error} className="mb-4" />}
+
+      <div className="surface overflow-hidden">
+        {loading ? (
+          <Loading />
+        ) : namespaces.length === 0 ? (
+          <EmptyState icon={Boxes} title="No namespaces" description="Create one to partition tenants and their resources." />
+        ) : (
+          <div className="divide-y divide-border/60">
+            {namespaces.map((n) => (
+              <NamespaceRow key={n.id} n={n} onMint={setMintFor} onDelete={destroy} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <MintKeyDialog
+        namespace={mintFor}
+        keyName={keyName}
+        minted={minted}
+        busy={busy}
+        onKeyName={setKeyName}
+        onMint={mint}
+        onClose={closeMint}
+      />
+    </Page>
+  );
+}

package/app/(app)/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import * as React from "react";
+import { Activity, CircleDashed, FolderGit2, Gauge } from "lucide-react";
+import { useQuery } from "@/lib/hooks";
+import { compact } from "@/lib/format";
+import { ErrorState } from "@/components/shared";
+import { Metric } from "@/components/primitives";
+import { LaunchComposer } from "@/components/fleet/launch";
+import { ActiveSessions } from "@/components/fleet/lanes";
+import { OnboardingFlow } from "@/components/fleet/onboarding";
+import type { SessionDto, WorkspaceDto, ProfileDto } from "@/lib/types";
+
+const SKIP_KEY = "garage.onboarding.skipped";
+
+export default function FleetPage() {
+  // The fleet is live: poll sessions so running/idle counts and lanes stay fresh.
+  const sessions = useQuery<{ sessions: SessionDto[]; total: number }>("/sessions", [], 4000);
+  const workspaces = useQuery<{ workspaces: WorkspaceDto[] }>("/workspaces");
+  const profiles = useQuery<{ profiles: ProfileDto[]; active_profile_id?: string | null }>("/models/profiles");
+
+  const [skipped, setSkipped] = React.useState(false);
+  React.useEffect(() => {
+    setSkipped(sessionStorage.getItem(SKIP_KEY) === "1");
+  }, []);
+
+  const all = sessions.data?.sessions ?? [];
+  const live = all.filter((s) => s.state !== "destroyed");
+  const running = live.filter((s) => s.state === "busy" || s.state === "provisioning").length;
+  const idle = live.filter((s) => s.state === "idle").length;
+  const wsCount = workspaces.data?.workspaces?.length ?? 0;
+  const tokensOut = live.reduce((n, s) => n + (s.tokens_out ?? 0), 0);
+  const ready = !sessions.loading || all.length > 0;
+  const v = (n: number) => (ready ? n : "—");
+
+  // Zero-state: no model means the Fleet can't launch — guide setup instead.
+  const profs = profiles.data?.profiles ?? [];
+  const onboard = !profiles.loading && profs.length === 0 && !skipped;
+  // Hide metrics until there's something to count.
+  const showMetrics = live.length > 0 && running + idle + wsCount + tokensOut > 0;
+
+  if (onboard) {
+    return (
+      <div className="h-full overflow-y-auto">
+        <div className="mx-auto w-full max-w-[1080px] animate-fade-in px-6 py-10 md:px-9 md:py-12">
+          <OnboardingFlow
+            workspaces={workspaces.data?.workspaces ?? []}
+            profiles={profs}
+            onDone={profiles.reload}
+            onSkip={() => {
+              sessionStorage.setItem(SKIP_KEY, "1");
+              setSkipped(true);
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="mx-auto w-full max-w-[1080px] animate-fade-in px-6 py-10 md:px-9 md:py-12">
+        <div className="mx-auto max-w-2xl">
+          <LaunchComposer
+            workspaces={workspaces.data?.workspaces ?? []}
+            profiles={profs}
+            defaultModelLabel={profs.find((p) => p.id === profiles.data?.active_profile_id)?.label ?? null}
+          />
+        </div>
+
+        {showMetrics && (
+          <div className="mt-11 grid grid-cols-2 gap-3 lg:grid-cols-4">
+            <Metric label="Running" value={v(running)} icon={Activity} tone="success" hint="busy or provisioning" />
+            <Metric label="Idle" value={v(idle)} icon={CircleDashed} hint="loaded, awaiting work" />
+            <Metric label="Workspaces" value={ready ? wsCount : "—"} icon={FolderGit2} hint="in this namespace" />
+            <Metric label="Tokens out" value={ready ? compact(tokensOut) : "—"} icon={Gauge} tone="brand" hint="across live sessions" />
+          </div>
+        )}
+
+        {sessions.error && <ErrorState message={sessions.error} className="mt-8" />}
+
+        <ActiveSessions sessions={live} className="mt-9" />
+      </div>
+    </div>
+  );
+}

package/app/(app)/provisioning/page.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronRight, Rocket, GitBranch, Terminal, Files } from "lucide-react";
+import { useQuery } from "@/lib/hooks";
+import { Page, PageHeader, Loading, EmptyState, ErrorState } from "@/components/shared";
+import { SectionHeading } from "@/components/primitives";
+import { plural } from "@/lib/format";
+import { ProvisionDialog } from "@/components/provisioning/provision-dialog";
+import type { TemplateSummaryDto } from "@/lib/types";
+
+/** One template, dense but legible — click anywhere to review & provision. */
+function TemplateRow({ t, onLaunch }: { t: TemplateSummaryDto; onLaunch: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onLaunch}
+      className="group flex w-full items-center gap-3 px-3.5 py-3 text-left transition-colors hover:bg-surface-2"
+    >
+      <span className="grid size-8 shrink-0 place-items-center rounded-lg border border-border bg-surface-2 text-faint shadow-sheen transition-colors group-hover:text-brand">
+        <Rocket className="size-4" />
+      </span>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-[13.5px] font-medium text-foreground">{t.name}</div>
+        <div className="truncate text-[12px] text-muted-foreground">{t.description ?? "No description."}</div>
+      </div>
+      <span className="tnum hidden w-14 shrink-0 text-right text-[12px] text-faint sm:block">{plural(t.step_count ?? 0, "step")}</span>
+      <ChevronRight className="size-4 shrink-0 text-faint/60 transition-transform group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
+    </button>
+  );
+}
+
+export default function ProvisioningPage() {
+  const { data, loading, error } = useQuery<{ templates: TemplateSummaryDto[] }>("/templates");
+  const [launch, setLaunch] = useState<TemplateSummaryDto | null>(null);
+
+  const templates = data?.templates ?? [];
+
+  return (
+    <Page>
+      <PageHeader title="Provisioning" description="Reproducible setup recipes that prepare a fresh workspace before an agent starts." />
+
+      <div className="surface mb-6 flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:gap-6">
+        <p className="max-w-2xl text-[13px] leading-relaxed text-muted-foreground">
+          A <span className="text-foreground">template</span> is an ordered list of steps — it can clone a repo, run setup commands, and copy files, with{" "}
+          <code className="rounded bg-surface-2 px-1 py-0.5 font-mono text-[11px]">{"{param}"}</code> placeholders you fill in when provisioning.
+        </p>
+        <div className="flex shrink-0 gap-4 text-[12px] text-faint">
+          <span className="flex items-center gap-1.5"><GitBranch className="size-3.5" /> clone</span>
+          <span className="flex items-center gap-1.5"><Terminal className="size-3.5" /> shell</span>
+          <span className="flex items-center gap-1.5"><Files className="size-3.5" /> copy</span>
+        </div>
+      </div>
+
+      {error && <ErrorState message={error} className="mb-4" />}
+
+      <SectionHeading eyebrow="Library" title="Templates" />
+
+      {loading ? (
+        <div className="surface">
+          <Loading />
+        </div>
+      ) : templates.length === 0 ? (
+        <div className="surface">
+          <EmptyState
+            icon={Rocket}
+            title="No templates"
+            description="Drop a JSON template (name, description, steps[]) into the Garage templates directory to provision workspaces here."
+          />
+        </div>
+      ) : (
+        <div className="surface overflow-hidden">
+          <div className="divide-y divide-border/60">
+            {templates.map((t) => (
+              <TemplateRow key={t.name} t={t} onLaunch={() => setLaunch(t)} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      <ProvisionDialog template={launch} onClose={() => setLaunch(null)} />
+    </Page>
+  );
+}

package/app/(app)/sessions/[id]/page.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { use, useState } from "react";
+import Link from "next/link";
+import { ArrowLeft, CircleStop, FolderGit2, PanelRightClose, PanelRightOpen } from "lucide-react";
+import { useQuery } from "@/lib/hooks";
+import { useAuth } from "@/lib/auth";
+import { useSession } from "@/lib/useSession";
+import { baseName } from "@/lib/format";
+import { cn } from "@/lib/utils";
+import { SessionStatus, Loading, ErrorState } from "@/components/shared";
+import { Conversation } from "@/components/chat/conversation";
+import { Composer } from "@/components/chat/composer";
+import { PermissionPrompt } from "@/components/chat/permission-prompt";
+import { Inspector } from "@/components/session/inspector";
+import { ModelSwitcher } from "@/components/session/model-switcher";
+import { SessionSwitcher } from "@/components/session/session-switcher";
+import { ReasoningKnob } from "@/components/session/reasoning-knob";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import type { SessionDto, ProfileWire } from "@/lib/types";
+
+export default function SessionPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const { data: session, loading, error } = useQuery<SessionDto>(`/sessions/${id}`);
+  const profiles = useQuery<{ profiles: ProfileWire[] }>("/models/profiles");
+
+  const { identity } = useAuth();
+  const live = useSession(id);
+  // The agent (and therefore its command catalogue) is built lazily on the
+  // first WS connect — refetch once the socket is live so the slash menu has
+  // real data instead of the pre-build empty list.
+  const extensions = useQuery<{ slash: Array<{ name: string; description: string }> }>(`/sessions/${id}/extensions`, [live.connected]);
+  // /quit and /help are TUI affordances — the dashboard has its own surfaces.
+  const commands = (extensions.data?.slash ?? []).filter((c) => c.name !== "/quit" && c.name !== "/help");
+  const [panel, setPanel] = useState(true);
+  const [pickedModel, setPickedModel] = useState<string | null>(null);
+
+  const title = live.title ?? session?.title ?? "Untitled session";
+  // Prefer the live signal: once the socket is connected the REST snapshot's
+  // lifecycle (e.g. a stale "provisioning") no longer reflects reality.
+  const state = live.busy ? "busy" : live.connected ? "idle" : session?.state ?? "idle";
+  const mode = live.mode ?? session?.permission_mode ?? "normal";
+  const currentModel = pickedModel ?? session?.model_label ?? null;
+  const currentProfile = (profiles.data?.profiles ?? []).find((p) => p.label === currentModel) ?? null;
+  // false = catalog says text-only; null = unknown model — don't block.
+  const imageSupport = currentProfile?.input_modalities ? currentProfile.input_modalities.includes("image") : null;
+  const permSlots = live.slots.filter((s) => s.isPermissionRequest);
+  const userInitial = (identity?.user ?? "U").slice(0, 1).toUpperCase();
+
+  const swap = (profileId: string, label: string) => {
+    live.swapProfile(profileId);
+    setPickedModel(label);
+    toast.success(`Model set to ${label}`);
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex shrink-0 items-start justify-between gap-3 border-b border-border px-6 py-3.5">
+        <div className="min-w-0">
+          <div className="mb-1.5 flex items-center gap-1.5 text-[12px] text-faint">
+            <Link href="/sessions" className="inline-flex items-center gap-1 transition-colors hover:text-foreground">
+              <ArrowLeft className="size-3" /> Sessions
+            </Link>
+            {session?.workspace && (
+              <>
+                <span className="text-faint/50">/</span>
+                <span className="inline-flex items-center gap-1">
+                  <FolderGit2 className="size-3" /> {baseName(session.workspace)}
+                </span>
+              </>
+            )}
+          </div>
+          <div className="flex min-w-0 items-center gap-3">
+            <SessionSwitcher currentId={id} title={title} />
+            <SessionStatus state={state} className="shrink-0" />
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-2.5">
+          {/* Honest status: surface silent model waits and queued messages
+              instead of looking frozen. */}
+          {live.busy && live.waitingSec != null && (
+            <span className="inline-flex items-center gap-1.5 rounded-full border border-warning/30 bg-warning/10 px-2.5 py-0.5 text-[11.5px] font-medium text-warning">
+              <span className="relative grid size-1.5 place-items-center">
+                <span className="absolute size-1.5 rounded-full bg-warning opacity-60 animate-pulse-ring" />
+                <span className="relative size-1.5 rounded-full bg-warning" />
+              </span>
+              waiting on model · {live.waitingSec}s
+            </span>
+          )}
+          {live.queueDepth > 0 && (
+            <span className="tnum rounded-full border border-border bg-surface-2 px-2.5 py-0.5 text-[11.5px] font-medium text-muted-foreground">
+              {live.queueDepth} queued
+            </span>
+          )}
+          <span className={cn("inline-flex items-center gap-1.5 text-[12px] font-medium", live.connected ? "text-success" : "text-faint")}>
+            <span className="relative grid size-2 place-items-center">
+              {live.connected && <span className="absolute size-2 rounded-full bg-success opacity-60 animate-pulse-ring" />}
+              <span className={cn("relative size-2 rounded-full", live.connected ? "bg-success" : "bg-faint")} />
+            </span>
+            {live.connected ? "live" : "offline"}
+          </span>
+          {live.busy && (
+            <Button size="sm" variant="secondary" onClick={live.abort}>
+              <CircleStop /> Stop
+            </Button>
+          )}
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            className="hidden text-muted-foreground md:inline-flex"
+            onClick={() => setPanel((p) => !p)}
+            title={panel ? "Hide panel" : "Show panel"}
+          >
+            {panel ? <PanelRightClose /> : <PanelRightOpen />}
+          </Button>
+        </div>
+      </div>
+
+      {loading && <Loading label="Loading session…" />}
+      {error && (
+        <div className="p-6">
+          <ErrorState message={error} />
+        </div>
+      )}
+
+      {session && (
+        <div className="flex min-h-0 flex-1">
+          <div className="flex min-w-0 flex-1 flex-col">
+            <Conversation items={live.items} streaming={live.streaming} busy={live.busy} userInitial={userInitial} className="flex-1" />
+            {permSlots.length > 0 && (
+              <div className="px-6 md:px-8">
+                <div className="w-full space-y-2 pb-1">
+                  {permSlots.map((s) => (
+                    <PermissionPrompt key={s.slotId} slot={s} onResolve={live.resolvePermission} />
+                  ))}
+                </div>
+              </div>
+            )}
+            <Composer
+              busy={live.busy}
+              disabled={!live.connected}
+              onSend={live.send}
+              onStop={live.abort}
+              commands={commands}
+              imageSupport={imageSupport}
+              controls={
+                <>
+                  <ModelSwitcher profiles={profiles.data?.profiles ?? []} current={currentModel} onSwap={swap} />
+                  <ReasoningKnob
+                    profiles={profiles.data?.profiles ?? []}
+                    currentLabel={currentModel}
+                    onSwapped={(id, label) => {
+                      swap(id, label);
+                      profiles.reload();
+                    }}
+                  />
+                </>
+              }
+            />
+          </div>
+
+          {panel && (
+            <aside className="hidden w-[340px] shrink-0 flex-col border-l border-border md:flex">
+              <Inspector
+                session={session}
+                stats={live.stats}
+                tasks={live.tasks}
+                agents={live.agents}
+                activeAgentId={live.activeAgentId}
+                mode={mode}
+                busyRefresh={live.busy}
+                onMode={live.setMode}
+                onSwitchAgent={live.switchAgent}
+                onAddAgent={live.addAgent}
+                onRemoveAgent={live.removeAgent}
+              />
+            </aside>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/app/(app)/sessions/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { ChevronRight, MessageSquare, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { useQuery } from "@/lib/hooks";
+import { api } from "@/lib/api";
+import { Page, PageHeader, Loading, EmptyState, ErrorState, SessionStatus, ConfirmButton } from "@/components/shared";
+import { timeAgo, compact } from "@/lib/format";
+import { NewSessionDialog } from "@/components/session/new-session-dialog";
+import type { SessionDto, WorkspaceDto, ProfileDto } from "@/lib/types";
+
+const RANK: Record<string, number> = { busy: 0, provisioning: 1, error: 2, idle: 3, destroyed: 4 };
+const rank = (s: SessionDto) => RANK[s.state] ?? 3;
+
+/** One session in the registry: status, title + model, token/turn columns, activity. */
+function SessionRow({ s, onOpen, onDelete }: { s: SessionDto; onOpen: () => void; onDelete: () => void }) {
+  const tokens = (s.tokens_in ?? 0) + (s.tokens_out ?? 0);
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onOpen}
+      onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && (e.preventDefault(), onOpen())}
+      className="group flex cursor-pointer items-center gap-3 px-3.5 py-2.5 transition-colors hover:bg-surface-2"
+    >
+      <SessionStatus state={s.state} className="w-[104px] shrink-0" />
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-[13.5px] text-foreground">{s.title ?? "Untitled session"}</div>
+        <div className="truncate text-[11.5px] text-faint">{s.model_label ?? "Default model"}</div>
+      </div>
+      <span className="tnum hidden w-16 shrink-0 text-right text-[12px] text-muted-foreground sm:block">{compact(tokens)} tok</span>
+      <span className="tnum hidden w-12 shrink-0 text-right text-[12px] text-faint md:block">{s.turn_count} {s.turn_count === 1 ? "turn" : "turns"}</span>
+      <span className="tnum w-12 shrink-0 text-right text-[12px] text-faint">{timeAgo(s.last_activity)}</span>
+      <span onClick={(e) => e.stopPropagation()} className="shrink-0">
+        <ConfirmButton label="" icon={Trash2} onConfirm={onDelete} />
+      </span>
+      <ChevronRight className="size-4 shrink-0 text-faint/60 transition-transform group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
+    </div>
+  );
+}
+
+export default function SessionsPage() {
+  const router = useRouter();
+  const { data, loading, error, reload } = useQuery<{ sessions: SessionDto[]; total: number }>("/sessions", [], 4000);
+  const workspaces = useQuery<{ workspaces: WorkspaceDto[] }>("/workspaces");
+  const profiles = useQuery<{ profiles: ProfileDto[] }>("/models/profiles");
+
+  const destroy = async (id: string) => {
+    try {
+      await api(`/sessions/${id}`, { method: "DELETE" });
+      toast.success("Session destroyed");
+      reload();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Delete failed");
+    }
+  };
+
+  const sessions = [...(data?.sessions ?? [])].sort(
+    (a, b) => rank(a) - rank(b) || b.last_activity.localeCompare(a.last_activity),
+  );
+
+  return (
+    <Page>
+      <PageHeader
+        title="Sessions"
+        description="Every agent session in this namespace — live, idle, or rehydratable from disk."
+        actions={<NewSessionDialog workspaces={workspaces.data?.workspaces ?? []} profiles={profiles.data?.profiles ?? []} />}
+      />
+
+      {error && <ErrorState message={error} className="mb-4" />}
+
+      <div className="surface overflow-hidden">
+        {loading ? (
+          <Loading />
+        ) : sessions.length === 0 ? (
+          <EmptyState icon={MessageSquare} title="No sessions yet" description="Launch one to put an agent to work — it runs in a sandboxed workspace." />
+        ) : (
+          <div className="divide-y divide-border/60">
+            {sessions.map((s) => (
+              <SessionRow key={s.id} s={s} onOpen={() => router.push(`/sessions/${s.id}`)} onDelete={() => destroy(s.id)} />
+            ))}
+          </div>
+        )}
+      </div>
+    </Page>
+  );
+}