@porkytheblack/garage-dashboard 0.1.0

package/app/(app)/credentials/form.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import * as React from "react";
+import { Check, Eye, EyeOff } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/shared";
+import { DialogFooter } from "@/components/ui/dialog";
+
+/** One labeled form row: a 13px label stacked over its control, with an
+ * optional hint line beneath. The shared unit of the credentials modals. */
+export function Field({
+  label,
+  hint,
+  className,
+  children,
+}: {
+  label: React.ReactNode;
+  hint?: React.ReactNode;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={cn("space-y-1.5", className)}>
+      <Label>{label}</Label>
+      {children}
+      {hint && <p className="text-[12px] leading-relaxed text-faint">{hint}</p>}
+    </div>
+  );
+}
+
+/** Two fields side by side on a comfortable gap — the modals' paired rows. */
+export function FieldRow({ children }: { children: React.ReactNode }) {
+  return <div className="grid grid-cols-2 gap-4">{children}</div>;
+}
+
+/** A secret-key input with a show/hide toggle. Masks by default; reveals in
+ * monospace so a pasted key reads cleanly. Same focus ring as `Input`. */
+export function KeyInput({
+  value,
+  onChange,
+  placeholder,
+  autoFocus,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  autoFocus?: boolean;
+}) {
+  const [shown, setShown] = React.useState(false);
+  return (
+    <div className="relative">
+      <Input
+        type={shown ? "text" : "password"}
+        autoFocus={autoFocus}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className={cn("pr-9", shown && value && "font-mono text-[12.5px]")}
+      />
+      <button
+        type="button"
+        onClick={() => setShown((s) => !s)}
+        title={shown ? "Hide key" : "Show key"}
+        className="absolute right-1 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded text-faint transition-colors hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+      >
+        {shown ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
+        <span className="sr-only">{shown ? "Hide key" : "Show key"}</span>
+      </button>
+    </div>
+  );
+}
+
+/** Post-save verification beat: a tinted band that reports whether the key
+ * actually works. Success counts the live models; failure shows the classified
+ * message from `verifyProvider`. Mirrors the `ErrorState` tint idiom. */
+export function VerifyBanner({ state }: { state: { ok: true; models: number } | { ok: false; message: string } }) {
+  if (state.ok) {
+    return (
+      <div className="flex animate-fade-in items-center gap-2.5 rounded-lg border border-success/30 bg-success/[0.08] px-4 py-3 text-[13px]">
+        <Check className="size-4 shrink-0 text-success" />
+        <span className="text-foreground/90">
+          Key verified — <span className="font-medium text-foreground">{state.models}</span> model{state.models === 1 ? "" : "s"} available
+        </span>
+      </div>
+    );
+  }
+  return (
+    <div className="flex animate-fade-in items-start gap-2.5 rounded-lg border border-destructive/25 bg-destructive/[0.07] px-4 py-3 text-[13px]">
+      <span className="mt-1 size-1.5 shrink-0 rounded-full bg-destructive" />
+      <span className="text-foreground/90">{state.message}</span>
+    </div>
+  );
+}
+
+/** Standard modal footer: a quiet Cancel and a right-aligned primary action
+ * that shows a spinner while its submit is in flight. */
+export function ModalFooter({
+  onCancel,
+  onSubmit,
+  submitLabel,
+  busy,
+  disabled,
+}: {
+  onCancel: () => void;
+  onSubmit: () => void;
+  submitLabel: string;
+  busy: boolean;
+  disabled?: boolean;
+}) {
+  return (
+    <DialogFooter>
+      <Button variant="ghost" onClick={onCancel} disabled={busy}>
+        Cancel
+      </Button>
+      <Button onClick={onSubmit} disabled={busy || disabled}>
+        {busy ? <Spinner /> : null} {submitLabel}
+      </Button>
+    </DialogFooter>
+  );
+}
+
+/** Convert a label into a url-safe slug — drives the `custom-<slug>` preview. */
+export function slugify(s: string): string {
+  return s
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}

package/app/(app)/credentials/model-combobox.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown, CloudOff, CornerDownLeft, Eye, Sparkles } from "lucide-react";
+import { api } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command";
+
+type Fetched = { status: "loading" | "ok" | "error"; models: string[]; modalities?: Record<string, string[]>; error?: string };
+
+/** Session-lived cache of live model lists, keyed by provider id. */
+const liveCache = new Map<string, Fetched>();
+
+/**
+ * Model picker: searches the provider's OWN model list (fetched live through
+ * the Garage, key server-side) with the static catalog as a fallback group and
+ * a free-text escape hatch. No more typing model ids from memory.
+ */
+export function ModelCombobox({
+  providerId,
+  catalog,
+  value,
+  onChange,
+  defaultOpen = false,
+}: {
+  providerId: string;
+  catalog: string[];
+  value: string;
+  onChange: (model: string) => void;
+  defaultOpen?: boolean;
+}) {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const [search, setSearch] = React.useState("");
+  const [live, setLive] = React.useState<Fetched | null>(providerId ? (liveCache.get(providerId) ?? null) : null);
+
+  React.useEffect(() => {
+    if (!open || !providerId) return;
+    const cached = liveCache.get(providerId);
+    if (cached && cached.status !== "error") {
+      setLive(cached);
+      return;
+    }
+    const loading: Fetched = { status: "loading", models: [] };
+    liveCache.set(providerId, loading);
+    setLive(loading);
+    api<{ models: string[]; modalities?: Record<string, string[]> }>(`/models/providers/${providerId}/models`)
+      .then((r) => {
+        const ok: Fetched = { status: "ok", models: r.models ?? [], modalities: r.modalities };
+        liveCache.set(providerId, ok);
+        setLive(ok);
+      })
+      .catch((e) => {
+        const err: Fetched = { status: "error", models: [], error: e instanceof Error ? e.message : "unavailable" };
+        liveCache.set(providerId, err);
+        setLive(err);
+      });
+  }, [open, providerId]);
+
+  const liveModels = live?.status === "ok" ? live.models : [];
+  const catalogExtra = catalog.filter((m) => !liveModels.includes(m));
+  const exact = liveModels.includes(search) || catalogExtra.includes(search);
+
+  const pick = (model: string) => {
+    onChange(model);
+    setOpen(false);
+    setSearch("");
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          disabled={!providerId}
+          className={cn(
+            "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors",
+            "hover:border-border-strong focus-visible:border-ring/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+          )}
+        >
+          <span className={cn("truncate font-mono text-[12.5px]", value ? "text-foreground" : "font-sans text-[13px] text-muted-foreground/60")}>
+            {value || "Pick a model…"}
+          </span>
+          <ChevronsUpDown className="size-3.5 shrink-0 text-faint" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+        <Command shouldFilter={live?.status !== "loading"}>
+          <CommandInput placeholder="Search models…" value={search} onValueChange={setSearch} />
+          <CommandList>
+            {live?.status === "loading" && (
+              <div className="space-y-1.5 p-2" aria-label="Loading models">
+                {[88, 64, 76, 56].map((w, i) => (
+                  <div key={i} className="skeleton h-6" style={{ width: `${w}%` }} />
+                ))}
+              </div>
+            )}
+
+            {live?.status === "error" && (
+              <div className="flex items-start gap-2 border-b border-border/60 px-3 py-2.5 text-[12px] text-muted-foreground">
+                <CloudOff className="mt-0.5 size-3.5 shrink-0 text-faint" />
+                Live list unavailable — pick from the catalog or type a model id.
+              </div>
+            )}
+
+            {live?.status !== "loading" && <CommandEmpty>No matching models.</CommandEmpty>}
+
+            {liveModels.length > 0 && (
+              <CommandGroup heading={`From ${providerId}`}>
+                {liveModels.map((m, i) => (
+                  <CommandItem key={m} value={m} onSelect={pick} className="animate-slide-up font-mono text-[12.5px]" style={{ animationDelay: `${Math.min(i, 12) * 18}ms`, animationFillMode: "backwards" }}>
+                    <Sparkles className="size-3.5 text-brand/70" />
+                    <span className="flex-1 truncate">{m}</span>
+                    {live?.modalities?.[m]?.includes("image") && <Eye className="size-3 text-faint" aria-label="vision-capable" />}
+                    <Check className={cn("size-3.5 text-brand transition-opacity", value === m ? "opacity-100" : "opacity-0")} />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+
+            {catalogExtra.length > 0 && live?.status !== "loading" && (
+              <CommandGroup heading="Catalog">
+                {catalogExtra.map((m, i) => (
+                  <CommandItem key={m} value={m} onSelect={pick} className="animate-slide-up font-mono text-[12.5px] text-muted-foreground" style={{ animationDelay: `${Math.min(liveModels.length + i, 14) * 18}ms`, animationFillMode: "backwards" }}>
+                    <span className="size-3.5" />
+                    <span className="flex-1 truncate">{m}</span>
+                    <Check className={cn("size-3.5 text-brand transition-opacity", value === m ? "opacity-100" : "opacity-0")} />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+
+            {search.trim() && !exact && live?.status !== "loading" && (
+              <CommandGroup forceMount heading="Custom">
+                <CommandItem value={search} onSelect={() => pick(search.trim())} className="text-[13px]">
+                  <CornerDownLeft className="size-3.5 text-faint" />
+                  <span className="truncate">
+                    Use “<span className="font-mono text-[12.5px]">{search.trim()}</span>”
+                  </span>
+                </CommandItem>
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,126 @@
+"use client";
+
+import { Eye, Cpu, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { useQuery } from "@/lib/hooks";
+import { api } from "@/lib/api";
+import { compact, timeAgo } from "@/lib/format";
+import { Page, PageHeader, Loading, EmptyState, ErrorState, ConfirmButton } from "@/components/shared";
+import { SectionHeading } from "@/components/primitives";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { AddProviderModal } from "./add-provider-modal";
+import { AddProfileModal } from "./add-profile-modal";
+import { EditProviderModal } from "./edit-provider-modal";
+import { EditReasoningModal } from "./edit-reasoning-modal";
+import type { Catalog, ProviderWire, ProfileWire } from "@/lib/types";
+
+export default function CredentialsPage() {
+  const providers = useQuery<{ providers: ProviderWire[] }>("/models/providers");
+  const profiles = useQuery<{ profiles: ProfileWire[]; active_profile_id: string | null }>("/models/profiles");
+  const catalog = useQuery<Catalog>("/models/catalog");
+
+  const run = async (fn: () => Promise<unknown>, ok: string, reload: () => void) => {
+    try {
+      await fn();
+      reload();
+      toast.success(ok);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  const provs = providers.data?.providers ?? [];
+  const profs = profiles.data?.profiles ?? [];
+  const activeId = profiles.data?.active_profile_id;
+
+  return (
+    <Page>
+      <PageHeader title="Models" description="Model providers and the profiles sessions inherit by default. API keys are stored by the credential adapter and never returned." />
+
+      <section className="mb-9">
+        <SectionHeading eyebrow="Credentials" title="Providers" action={<AddProviderModal catalog={catalog.data} onSaved={providers.reload} />} />
+        {providers.error && <ErrorState message={providers.error} className="mb-3" />}
+        <div className="surface overflow-hidden">
+          {providers.loading ? (
+            <Loading />
+          ) : provs.length === 0 ? (
+            <EmptyState icon={Cpu} title="No providers configured" description="Add a provider to give sessions a model to run on." />
+          ) : (
+            <div className="divide-y divide-border/60">
+              {provs.map((p) => (
+                <div key={p.id} className="group flex items-center gap-3 px-3.5 py-2.5 transition-colors hover:bg-surface-2">
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-1.5 truncate text-[13.5px] text-foreground">
+                      <span className="truncate font-medium">{p.id}</span>
+                      {p.based_on && <span className="text-[12px] font-normal text-faint">· based on {p.based_on}</span>}
+                    </div>
+                    <div className="truncate text-[11.5px] text-faint">
+                      {p.adapter ? `${p.type} · ${p.adapter}` : p.type}
+                      {p.base_url && <span className="ml-1.5 font-mono text-[12px]">{p.base_url}</span>}
+                    </div>
+                  </div>
+                  {p.has_api_key ? (
+                    <span className="inline-flex shrink-0 items-center gap-1.5 text-[11.5px] font-medium text-success">
+                      <span className="size-1.5 rounded-full bg-success" /> key set
+                    </span>
+                  ) : (
+                    <span className="shrink-0 text-[11.5px] text-faint">no key</span>
+                  )}
+                  <div className="flex shrink-0 items-center gap-0.5">
+                    <EditProviderModal provider={p} onSaved={providers.reload} />
+                    <ConfirmButton label="" icon={Trash2} onConfirm={() => run(() => api(`/models/providers/${p.id}`, { method: "DELETE" }), "Provider removed", providers.reload)} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+
+      <section>
+        <SectionHeading eyebrow="Defaults" title="Profiles" action={<AddProfileModal providers={provs} catalog={catalog.data} onSaved={profiles.reload} />} />
+        <div className="surface overflow-hidden">
+          {profiles.loading ? (
+            <Loading />
+          ) : profs.length === 0 ? (
+            <EmptyState icon={Cpu} title="No profiles" description="A profile pairs a provider with a model (and optional reasoning effort)." />
+          ) : (
+            <div className="divide-y divide-border/60">
+              {profs.map((p) => (
+                <div key={p.id} className="group flex items-center gap-3 px-3.5 py-2.5 transition-colors hover:bg-surface-2">
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2 truncate text-[13.5px] text-foreground">
+                      <span className="truncate font-medium">{p.label}</span>
+                      {p.id === activeId && <Badge variant="brand">Default</Badge>}
+                    </div>
+                    <div className="truncate font-mono text-[12px] text-faint">{p.provider_id} · {p.model}</div>
+                  </div>
+                  {p.reasoning_label && p.reasoning_label !== "off" && (
+                    <Badge variant="outline" className="shrink-0">{p.reasoning_label}</Badge>
+                  )}
+                  {p.input_modalities?.includes("image") && (
+                    <Eye className="hidden size-3.5 shrink-0 text-faint md:block" aria-label="vision-capable" />
+                  )}
+                  {p.context_limit != null && (
+                    <span className="tnum hidden shrink-0 text-[12px] text-faint md:block">{compact(p.context_limit)} ctx</span>
+                  )}
+                  <span className="tnum hidden w-14 shrink-0 text-right text-[12px] text-faint sm:block">{timeAgo(p.last_used_at)}</span>
+                  <div className="flex shrink-0 items-center gap-0.5">
+                    {p.id !== activeId && (
+                      <Button variant="ghost" size="sm" onClick={() => run(() => api(`/models/profiles/${p.id}/activate`, { method: "POST" }), "Profile activated", profiles.reload)}>
+                        Make default
+                      </Button>
+                    )}
+                    <EditReasoningModal profile={p} onSaved={profiles.reload} />
+                    <ConfirmButton label="" icon={Trash2} onConfirm={() => run(() => api(`/models/profiles/${p.id}`, { method: "DELETE" }), "Profile removed", profiles.reload)} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    </Page>
+  );
+}

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

@@ -0,0 +1,164 @@
+"use client";
+
+import { useState } from "react";
+import { KeyRound, Plus } from "lucide-react";
+import { toast } from "sonner";
+import { useQuery } from "@/lib/hooks";
+import { api } from "@/lib/api";
+import { Page, PageHeader, Loading, EmptyState, ErrorState, ConfirmButton, SecretReveal, Spinner } from "@/components/shared";
+import { timeAgo } from "@/lib/format";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogTrigger } from "@/components/ui/dialog";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
+import type { ApiKeyPublic } from "@/lib/types";
+
+/** One key, dense but legible — name + prefix, scopes, and quiet timestamps. */
+function KeyRow({ k, onRevoke }: { k: ApiKeyPublic; onRevoke: () => void }) {
+  return (
+    <div className={cn("flex items-center gap-3 px-3.5 py-2.5", k.revoked && "opacity-50")}>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className={cn("truncate text-[13.5px] font-medium text-foreground", k.revoked && "line-through")}>{k.name}</span>
+          {k.revoked && <Badge variant="destructive">revoked</Badge>}
+        </div>
+        <div className="truncate font-mono text-[12px] text-faint">{k.keyPrefix}…</div>
+      </div>
+      <div className="hidden flex-wrap gap-1 sm:flex">
+        {k.scopes.map((s) => (
+          <Badge key={s} variant="outline">
+            {s}
+          </Badge>
+        ))}
+      </div>
+      <div className="hidden w-20 shrink-0 text-right sm:block">
+        <div className="tnum text-[12px] text-muted-foreground">{timeAgo(k.createdAt)}</div>
+        <div className="text-[11px] text-faint">created</div>
+      </div>
+      <div className="w-20 shrink-0 text-right">
+        <div className="tnum text-[12px] text-muted-foreground">{timeAgo(k.lastUsed)}</div>
+        <div className="text-[11px] text-faint">last used</div>
+      </div>
+      <div className="flex w-[88px] shrink-0 justify-end">{!k.revoked && <ConfirmButton label="Revoke" onConfirm={onRevoke} />}</div>
+    </div>
+  );
+}
+
+export default function KeysPage() {
+  const { data, loading, error, reload } = useQuery<{ data: ApiKeyPublic[] }>("/keys");
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [scope, setScope] = useState("admin");
+  const [busy, setBusy] = useState(false);
+  const [minted, setMinted] = useState<string | null>(null);
+
+  const create = async () => {
+    setBusy(true);
+    try {
+      const res = await api<{ data: { key: string } }>("/keys", { method: "POST", body: { name: name.trim() || "api-key", scopes: [scope] } });
+      setMinted(res.data.key);
+      reload();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Mint failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const close = () => {
+    setOpen(false);
+    setName("");
+    setMinted(null);
+  };
+
+  const revoke = async (id: string) => {
+    try {
+      await api(`/keys/${id}`, { method: "DELETE" });
+      toast.success("Key revoked");
+      reload();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Revoke failed");
+    }
+  };
+
+  const keys = data?.data ?? [];
+
+  return (
+    <Page>
+      <PageHeader
+        title="API Keys"
+        description="Keys for the REST API and the MCP server. Use one as GLORP_API_KEY, or send it as a Bearer token."
+        actions={
+          <Dialog open={open} onOpenChange={(o) => (o ? setOpen(true) : close())}>
+            <DialogTrigger asChild>
+              <Button>
+                <Plus /> Mint key
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Mint API key</DialogTitle>
+                <DialogDescription>The raw key is shown once. Store it somewhere safe.</DialogDescription>
+              </DialogHeader>
+              {minted ? (
+                <SecretReveal value={minted} />
+              ) : (
+                <div className="space-y-4">
+                  <div className="space-y-1.5">
+                    <Label>Name</Label>
+                    <Input autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="mcp-server" />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label>Scope</Label>
+                    <Select value={scope} onValueChange={setScope}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="admin">admin — full control</SelectItem>
+                        <SelectItem value="session">session — manage sessions only</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              )}
+              <DialogFooter>
+                {minted ? (
+                  <Button onClick={close}>Done</Button>
+                ) : (
+                  <>
+                    <Button variant="ghost" onClick={close} disabled={busy}>
+                      Cancel
+                    </Button>
+                    <Button onClick={create} disabled={busy}>
+                      {busy ? <Spinner /> : <KeyRound />} Mint key
+                    </Button>
+                  </>
+                )}
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        }
+      />
+
+      {error && <ErrorState message={error} className="mb-4" />}
+
+      <div className="surface overflow-hidden">
+        {loading ? (
+          <Loading />
+        ) : keys.length === 0 ? (
+          <EmptyState icon={KeyRound} title="No API keys" description="Mint one for a client or the MCP server." />
+        ) : (
+          <div className="divide-y divide-border/60">
+            {keys.map((k) => (
+              <KeyRow key={k.id} k={k} onRevoke={() => revoke(k.id)} />
+            ))}
+          </div>
+        )}
+      </div>
+    </Page>
+  );
+}

package/app/(app)/layout.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { usePathname } from "next/navigation";
+import { useAuth } from "@/lib/auth";
+import { AppSidebar } from "@/components/app-sidebar";
+import { AppTopbar } from "@/components/app-topbar";
+import { Loading } from "@/components/shared";
+import { BrandLockup } from "@/components/brand";
+
+const TITLES: Record<string, string> = {
+  "/": "Fleet",
+  "/sessions": "Sessions",
+  "/namespaces": "Namespaces",
+  "/workspaces": "Workspaces",
+  "/provisioning": "Provisioning",
+  "/credentials": "Models",
+  "/keys": "API Keys",
+};
+
+function titleFor(pathname: string): string {
+  if (TITLES[pathname]) return TITLES[pathname];
+  if (pathname.startsWith("/sessions/")) return "Session";
+  const top = "/" + (pathname.split("/")[1] ?? "");
+  return TITLES[top] ?? "Garage";
+}
+
+export default function AppLayout({ children }: { children: ReactNode }) {
+  const { ready, identity } = useAuth();
+  const pathname = usePathname();
+
+  // While auth resolves (or during the redirect to /login), keep it calm.
+  if (!ready || !identity) {
+    return (
+      <div className="grid min-h-screen place-items-center gap-6">
+        <div className="flex flex-col items-center gap-5">
+          <BrandLockup />
+          <Loading label="Connecting to Garage…" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="app-backdrop flex min-h-screen">
+      <AppSidebar />
+      <div className="flex h-screen min-w-0 flex-1 flex-col">
+        <AppTopbar title={titleFor(pathname)} />
+        <main className="min-h-0 flex-1 overflow-hidden">{children}</main>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+"use client";
+
+import { KeyRound, Layers, Trash2 } from "lucide-react";
+import { timeAgo } from "@/lib/format";
+import { ConfirmButton } from "@/components/shared";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import type { NamespaceDto } from "@/lib/types";
+
+/** A single tenant partition: identity (name + slug) on the left, weight + actions trailing. */
+export function NamespaceRow({
+  n,
+  onMint,
+  onDelete,
+}: {
+  n: NamespaceDto;
+  onMint: (n: NamespaceDto) => void;
+  onDelete: (id: string) => void;
+}) {
+  const count = n.session_count ?? 0;
+  return (
+    <div className="group flex items-center gap-3 px-3.5 py-2.5 transition-colors hover:bg-surface-2">
+      <Layers className="size-4 shrink-0 text-faint" />
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="truncate text-[13.5px] font-medium text-foreground">{n.name}</span>
+          {n.is_default && (
+            <Badge variant="outline" className="shrink-0">
+              default
+            </Badge>
+          )}
+        </div>
+        <div className="truncate font-mono text-[12px] text-faint">{n.slug}</div>
+      </div>
+      <span className="tnum hidden w-20 shrink-0 text-right text-[12px] text-muted-foreground sm:block">
+        {count} {count === 1 ? "session" : "sessions"}
+      </span>
+      <span className="tnum hidden w-12 shrink-0 text-right text-[12px] text-faint md:block">{timeAgo(n.created_at)}</span>
+      <div className="flex shrink-0 items-center gap-1">
+        <Button variant="ghost" size="sm" className="text-muted-foreground" onClick={() => onMint(n)}>
+          <KeyRound /> Mint key
+        </Button>
+        {!n.is_default && <ConfirmButton label="" icon={Trash2} onConfirm={() => onDelete(n.id)} />}
+      </div>
+    </div>
+  );
+}