@porkytheblack/garage-dashboard 0.1.0

package/.env.example

@@ -0,0 +1,3 @@
+# Base URL of the running Garage server (REST + WebSocket).
+# The dashboard talks to it directly from the browser using the admin JWT.
+NEXT_PUBLIC_GARAGE_URL=http://127.0.0.1:4271

package/DESIGN.md

@@ -0,0 +1,90 @@
+# Garage design language — "sap & sunlight"
+
+Refined, product-grade UI in two modes: **dark "pine at dusk"** (green-black
+surfaces, luminous sap green, solar amber) and **light "warm paper"** (cream
+surfaces, pine ink, darkened sap). Calm confidence: deliberate hierarchy,
+depth from hairline borders + a top sheen (never heavy drop shadows on
+surfaces), one sap-green accent used sparingly. The two modes share ONE
+structure — only hues shift, and they shift inside globals.css, never in
+components. The reference implementations are the Fleet
+console (`app/(app)/page.tsx`, `components/fleet/*`) and the app shell
+(`components/app-sidebar.tsx`, `components/app-topbar.tsx`). When in doubt,
+imitate those files.
+
+## Tokens (globals.css / tailwind.config.ts)
+
+- **Elevation ladder** — surfaces climb, never jump:
+  `bg-background` (page) → `bg-card` (containers) → `bg-surface-2` (bands,
+  hovers, insets) → `bg-elevated` (highest inline emphasis). Overlays
+  (dialogs/menus) sit on `bg-popover` + `shadow-elevated`.
+- **Borders**: `border-border` everywhere; `border-border-strong` only for
+  emphasis/hover. Dividers inside lists: `divide-border/60`.
+- **Brand**: `brand` (sap green) for primary actions, active nav, focus,
+  live accents; `brand-strong` for hover/links. Brand should touch few
+  pixels. Green/amber/teal values are darker in light mode for contrast on
+  cream — always use the token, never a literal, and it stays legible.
+- **Quiet scale** (3 weights of gray text): `text-foreground` (content) →
+  `text-muted-foreground` (secondary) → `text-faint` (hints, icons, meta).
+  Decorative icons default to `text-faint`.
+- **Semantic**: `success` (running/live), `warning` (solar amber —
+  provisioning/working/caution), `destructive` (red clay — errors/dangerous
+  actions). Tint surfaces with `/10`–`/[0.07]` alphas and `/25`–`/30`
+  borders, as in `ErrorState`.
+
+## Utilities & shadows
+
+- `.surface` = card + border + `shadow-card` (the standard container).
+- `shadow-sheen` inner top highlight for small chips/buttons.
+- Shadows + sheen + `.skeleton` shimmer are CSS variables (`--shadow-card`,
+  `--shadow-elevated`, `--sheen`, `--shimmer`) tuned per mode in globals.css
+  — never write a literal box-shadow with a baked-in tint.
+- `shadow-elevated` for overlays only. `shadow-glow` for hero focus moments
+  (one per screen, e.g. the launch composer's `focus-within`).
+- `.text-display` for hero headings; `.tnum` on every numeric column;
+  `.skeleton` for loading blocks; `.app-backdrop` only on full-screen roots
+  outside the app shell (e.g. login).
+
+## Type scale
+
+- Page title: `PageHeader` (22px semibold tight). Section: `SectionHeading`
+  (eyebrow 11px uppercase tracking-wider text-faint + 15px semibold title).
+- Body 13.5px · secondary 13px · meta 12–12.5px · hints 11.5px `text-faint`
+  · mono `font-mono` 12–12.5px. Never `text-base` or larger outside heroes.
+- Keyboard hints: `<kbd className="rounded border border-border bg-surface-2 px-1 py-0.5 font-mono text-[10px]">`.
+
+## Composition patterns
+
+- Lists/tables live inside a `.surface` with `overflow-hidden`; optional
+  header band: `border-b border-border/70 bg-surface-2/40 px-3.5 py-2`.
+- Dense rows: `px-3.5 py-2.5`, hover `hover:bg-surface-2`, trailing chevron
+  that nudges on hover (`group-hover:translate-x-0.5`). Numeric columns
+  right-aligned with `.tnum`.
+- Live state: `SessionStatus` (pulse-ring on running states). Poll lists that
+  should feel alive: `useQuery(path, [], 4000)` — it refreshes silently.
+- Empty/error/loading: always `EmptyState` / `ErrorState` / `Loading` or
+  `.skeleton` — never a bare "No data" string.
+- Forms: `Label` 13px + control per row, `gap-4`+ between rows; dialogs get a
+  clear title + one-line description; primary action right-aligned in footer.
+- Motion: `animate-fade-in` for page mounts (built into `Page`),
+  `animate-slide-up` for hero/section entrances, transitions ~150ms. No
+  animation on data refresh.
+
+## Primitives — compose, don't reinvent
+
+`Page`, `PageHeader`, `SectionHeading`, `Metric`, `EmptyState`, `ErrorState`,
+`SessionStatus`, `Loading`, `Spinner`, `CopyButton`, `ConfirmButton`,
+`SecretReveal` (from `components/shared.tsx`, `components/primitives.tsx`)
+plus the shadcn primitives in `components/ui/`.
+
+## Hard rules
+
+- Two modes, one structure: every screen must hold up in light AND dark.
+  No new color literals — tokens only. Mode-specific styling means a token
+  (or `--var`) tuned in globals.css, not a `dark:` utility in a component.
+- Theme plumbing: boot script in `app/layout.tsx`, `useTheme` in
+  `lib/theme.ts`, `ThemeToggle` in the topbar. localStorage `garage.theme`,
+  absent = follow OS.
+- Keep every file under 200 lines; split before exceeding.
+- Don't restyle by overriding primitives with long `className` chains — if a
+  pattern repeats three times, it belongs in a shared component.
+- Visual changes must not alter API calls, data flow, or component contracts.

package/README.md

@@ -0,0 +1,62 @@
+# Garage Dashboard
+
+A clean, professional console for the Glorp **Garage** orchestration layer. It
+talks directly to a running Garage server's REST + WebSocket API and gives you
+live observability and control over the core primitives:
+
+- **Sessions** — list, create, destroy, and watch a session's live event stream;
+  send messages and abort runs.
+- **Agents** — inspect and manage a session's multi-agent roster.
+- **Messages** — the agent's latest answer and task list per session.
+- **Namespaces** — create/delete tenant partitions and mint namespace-bound keys.
+- **Workspaces** — manage the host directories sessions run against.
+- **Provisioning** — launch sessions from declarative setup templates.
+- **Credentials** — model providers and the profiles sessions inherit.
+- **API Keys** — mint/revoke keys for the REST API and the MCP server.
+
+## Auth
+
+The dashboard signs in with the admin identity provisioned on the Garage server:
+
+```bash
+export GARAGE_ADMIN_USER=admin
+export GARAGE_ADMIN_PASSWORD=change-me
+export GARAGE_JWT_SECRET=$(openssl rand -hex 32)   # optional; derived from the password if unset
+```
+
+Login exchanges these for a short-lived JWT, which the browser then sends as a
+Bearer token on every API request (and as `?api_key=` on the WebSocket).
+
+## Run
+
+```bash
+cd dashboard
+cp .env.example .env.local         # point NEXT_PUBLIC_GARAGE_URL at your Garage
+bun install
+bun run dev                        # http://localhost:3270
+
+# in another terminal, with admin env vars set:
+glorp garage                       # the Garage API on http://127.0.0.1:4271
+```
+
+For a non-loopback Garage bind, API-key auth is enforced automatically — the
+admin JWT satisfies it (admin scope). On loopback, the API is open but the
+dashboard still requires login when admin credentials are configured.
+
+## Build
+
+```bash
+bun run build && bun run start
+```
+
+The dashboard holds no server-side secrets: it is a pure client of the Garage
+API, configured via `NEXT_PUBLIC_GARAGE_URL` (baked into the bundle at build).
+
+## Design system
+
+Built on **Tailwind CSS + shadcn/ui** (Radix primitives) with a graphite
+monochrome theme — tokens live in `app/globals.css`, primitives in
+`components/ui/`, and the Garage brand mark in `components/brand.tsx`. The app is
+session-centric: the session view (`/sessions/[id]`) hosts the live chat with
+**Chat · Tasks · Agents · Details** tabs, so agents and messages aren't separate
+pages.

package/app/(app)/credentials/add-profile-modal.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+import { Plus } from "lucide-react";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger } from "@/components/ui/dialog";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
+import { Field, FieldRow, ModalFooter } from "./form";
+import { ModelCombobox } from "./model-combobox";
+import type { Catalog, ProviderWire } from "@/lib/types";
+
+/** Add a (provider, model) profile. Reasoning effort is configured afterwards on
+ * the profile row — so a model stays a single entry, the way the TUI works. */
+export function AddProfileModal({ providers, catalog, onSaved }: { providers: ProviderWire[]; catalog: Catalog | null; onSaved: () => void }) {
+  const [open, setOpen] = React.useState(false);
+  const [providerId, setProviderId] = React.useState("");
+  const [model, setModel] = React.useState("");
+  const [label, setLabel] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+
+  React.useEffect(() => {
+    if (open && !providerId && providers[0]) setProviderId(providers[0].id);
+  }, [open, providers, providerId]);
+
+  const suggestions = React.useMemo(() => {
+    const prov = providers.find((p) => p.id === providerId);
+    const key = prov?.based_on ?? providerId;
+    return catalog?.providers.find((c) => c.id === key)?.default_models ?? [];
+  }, [providers, catalog, providerId]);
+
+
+  const save = async () => {
+    if (!providerId || !model.trim()) {
+      toast.error("Provider and model are required.");
+      return;
+    }
+    setBusy(true);
+    try {
+      await api("/models/profiles", {
+        method: "POST",
+        body: {
+          providerId,
+          model: model.trim(),
+          label: label.trim() || undefined,
+          activate: true,
+        },
+      });
+      toast.success("Profile added & activated");
+      onSaved();
+      setOpen(false);
+      setModel("");
+      setLabel("");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed to add profile");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="secondary" size="sm" disabled={providers.length === 0}>
+          <Plus /> Add model
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add model</DialogTitle>
+          <DialogDescription>Pair a provider with a model. Set reasoning effort afterwards from the model’s row.</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-5">
+          <FieldRow>
+            <Field label="Provider">
+              <Select
+                value={providerId}
+                onValueChange={(id) => {
+                  setProviderId(id);
+                  setModel("");
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select…" />
+                </SelectTrigger>
+                <SelectContent>
+                  {providers.map((p) => (
+                    <SelectItem key={p.id} value={p.id}>
+                      {p.id}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field label="Model">
+              <ModelCombobox providerId={providerId} catalog={suggestions} value={model} onChange={setModel} />
+            </Field>
+          </FieldRow>
+          <FieldRow>
+            <Field label="Label (optional)">
+              <Input value={label} onChange={(e) => setLabel(e.target.value)} placeholder={`${providerId || "provider"} · ${model || "model"}`} />
+            </Field>
+            <Field label="Context window" hint="Detected automatically from the model catalog. Override per provider under its edit dialog if needed.">
+              <div className="flex h-9 items-center rounded-md border border-border/60 bg-surface-2/40 px-3 text-[13px] text-muted-foreground">Auto</div>
+            </Field>
+          </FieldRow>
+        </div>
+
+        <ModalFooter onCancel={() => setOpen(false)} onSubmit={save} submitLabel="Add model" busy={busy} />
+      </DialogContent>
+    </Dialog>
+  );
+}

package/app/(app)/credentials/add-provider-modal.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import * as React from "react";
+import { Plus } from "lucide-react";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import { verifyProvider } from "@/lib/verify-provider";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger } from "@/components/ui/dialog";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
+import { Field, FieldRow, KeyInput, ModalFooter, VerifyBanner, slugify } from "./form";
+import type { Catalog } from "@/lib/types";
+
+const CUSTOM = "__custom__";
+const NONE = "__none__";
+type Verdict = { ok: true; models: number } | { ok: false; message: string };
+
+export function AddProviderModal({ catalog, onSaved }: { catalog: Catalog | null; onSaved: () => void }) {
+  const known = catalog?.providers ?? [];
+  const adapters = catalog?.adapters ?? [];
+
+  const [open, setOpen] = React.useState(false);
+  const [choice, setChoice] = React.useState("");
+  const [name, setName] = React.useState("");
+  const [apiKey, setApiKey] = React.useState("");
+  const [baseURL, setBaseURL] = React.useState("");
+  const [adapter, setAdapter] = React.useState(adapters[0]?.id ?? "openai-compat");
+  const [basedOn, setBasedOn] = React.useState(NONE);
+  const [contextLimit, setContextLimit] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [verdict, setVerdict] = React.useState<Verdict | null>(null);
+
+  const isCustom = choice === CUSTOM;
+  const meta = known.find((p) => p.id === choice);
+  const slug = slugify(name);
+  const id = isCustom ? (slug ? `custom-${slug}` : "") : choice;
+  const needsKey = isCustom ? false : meta?.needs_api_key ?? true;
+
+  React.useEffect(() => {
+    if (!open) {
+      setChoice(""); setName(""); setApiKey(""); setBaseURL(""); setBasedOn(NONE); setContextLimit(""); setVerdict(null);
+    }
+  }, [open]);
+
+  const save = async () => {
+    if (!id) {
+      toast.error(isCustom ? "Name the custom endpoint." : "Pick a provider.");
+      return;
+    }
+    setBusy(true);
+    setVerdict(null);
+    try {
+      await api("/models/providers", {
+        method: "POST",
+        body: {
+          id,
+          type: isCustom ? "custom" : "known",
+          apiKey: apiKey.trim() || undefined,
+          baseURL: isCustom ? baseURL.trim() || undefined : undefined,
+          ...(isCustom ? { adapter } : {}),
+          ...(isCustom && basedOn !== NONE ? { basedOn } : {}),
+          ...(contextLimit.trim() ? { contextLimit: Number(contextLimit) } : {}),
+        },
+      });
+      onSaved();
+      const v = await verifyProvider(id);
+      if (v.ok) {
+        setVerdict({ ok: true, models: v.models.length });
+        setTimeout(() => setOpen(false), 900);
+      } else {
+        setVerdict({ ok: false, message: v.message });
+      }
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed to save provider");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const failed = verdict && !verdict.ok;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="secondary" size="sm">
+          <Plus /> Add provider
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add provider</DialogTitle>
+          <DialogDescription>Pick a known provider, or wire up a custom OpenAI-compatible endpoint.</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-5">
+          <Field label="Provider" hint={meta?.description}>
+            <Select value={choice} onValueChange={(v) => { setChoice(v); setVerdict(null); }}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select a provider…" />
+              </SelectTrigger>
+              <SelectContent>
+                {known.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>{p.label}</SelectItem>
+                ))}
+                <SelectItem value={CUSTOM}>Custom (OpenAI-compatible)…</SelectItem>
+              </SelectContent>
+            </Select>
+          </Field>
+
+          {isCustom && (
+            <FieldRow>
+              <Field label="Name" hint={id ? <>id: <span className="font-mono text-faint">{id}</span></> : "Becomes custom-<slug>"}>
+                <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="My proxy" />
+              </Field>
+              <Field label="Adapter" hint="OpenAI-compatible">
+                <Select value={adapter} onValueChange={setAdapter}>
+                  <SelectTrigger><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {adapters.map((a) => (<SelectItem key={a.id} value={a.id}>{a.label}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </Field>
+            </FieldRow>
+          )}
+
+          {(choice || isCustom) && (
+            <Field
+              label={needsKey ? "API key" : "API key (optional)"}
+              hint={!isCustom && meta?.env_var ? <>Usually the key from <span className="font-mono">${meta.env_var}</span>.</> : undefined}
+            >
+              <KeyInput value={apiKey} onChange={setApiKey} placeholder={needsKey ? "Paste the API key" : "Leave blank if none"} />
+            </Field>
+          )}
+
+          {isCustom && (
+            <>
+              <Field label="Base URL">
+                <Input value={baseURL} onChange={(e) => setBaseURL(e.target.value)} placeholder="https://…/v1" />
+              </Field>
+              <FieldRow>
+                <Field label="Based on" hint="Borrow a known provider's models">
+                  <Select value={basedOn} onValueChange={setBasedOn}>
+                    <SelectTrigger><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value={NONE}>None</SelectItem>
+                      {known.map((p) => (<SelectItem key={p.id} value={p.id}>{p.label}</SelectItem>))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+                <Field label="Context limit">
+                  <Input inputMode="numeric" value={contextLimit} onChange={(e) => setContextLimit(e.target.value)} placeholder="e.g. 200000" />
+                </Field>
+              </FieldRow>
+            </>
+          )}
+
+          {verdict && <VerifyBanner state={verdict} />}
+        </div>
+
+        {failed ? (
+          <div className="flex justify-end gap-2 sm:flex-row">
+            <Button variant="ghost" onClick={() => setOpen(false)}>Keep anyway</Button>
+            <Button onClick={() => setVerdict(null)}>Fix key</Button>
+          </div>
+        ) : (
+          <ModalFooter onCancel={() => setOpen(false)} onSubmit={save} submitLabel="Save provider" busy={busy} disabled={!!verdict} />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/app/(app)/credentials/edit-provider-modal.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import * as React from "react";
+import { Pencil } from "lucide-react";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import { verifyProvider } from "@/lib/verify-provider";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger } from "@/components/ui/dialog";
+import { Field, FieldRow, KeyInput, ModalFooter, VerifyBanner } from "./form";
+import type { ProviderWire } from "@/lib/types";
+
+type Verdict = { ok: true; models: number } | { ok: false; message: string };
+
+/** Update an existing provider's API key (and optionally base URL / context
+ * limit). Other fields are preserved server-side, so leaving the key blank
+ * keeps the current one. A rotated key is verified live after saving. */
+export function EditProviderModal({ provider, onSaved }: { provider: ProviderWire; onSaved: () => void }) {
+  const [open, setOpen] = React.useState(false);
+  const [apiKey, setApiKey] = React.useState("");
+  const [baseURL, setBaseURL] = React.useState(provider.base_url ?? "");
+  const [contextLimit, setContextLimit] = React.useState(provider.context_limit ? String(provider.context_limit) : "");
+  const [busy, setBusy] = React.useState(false);
+  const [verdict, setVerdict] = React.useState<Verdict | null>(null);
+
+  const rotated = apiKey.trim().length > 0;
+
+  const save = async () => {
+    setBusy(true);
+    setVerdict(null);
+    try {
+      await api("/models/providers", {
+        method: "POST",
+        body: {
+          id: provider.id,
+          ...(rotated ? { apiKey: apiKey.trim() } : {}),
+          ...(baseURL.trim() ? { baseURL: baseURL.trim() } : {}),
+          ...(contextLimit.trim() ? { contextLimit: Number(contextLimit) } : {}),
+        },
+      });
+      onSaved();
+      if (!rotated) {
+        toast.success("Provider updated");
+        setOpen(false);
+        return;
+      }
+      const v = await verifyProvider(provider.id);
+      if (v.ok) {
+        setVerdict({ ok: true, models: v.models.length });
+        setApiKey("");
+        setTimeout(() => setOpen(false), 900);
+      } else {
+        setVerdict({ ok: false, message: v.message });
+      }
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Update failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const failed = verdict && !verdict.ok;
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { setOpen(o); if (!o) { setApiKey(""); setVerdict(null); } }}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="icon-sm" className="text-muted-foreground" title="Edit provider">
+          <Pencil />
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit {provider.id}</DialogTitle>
+          <DialogDescription>Rotate the API key or adjust the endpoint. Anything left blank keeps its current value.</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-5">
+          <Field label="API key">
+            <KeyInput
+              autoFocus
+              value={apiKey}
+              onChange={setApiKey}
+              placeholder={provider.has_api_key ? "•••• stored — leave blank to keep" : "Set an API key"}
+            />
+          </Field>
+          <FieldRow>
+            <Field label="Base URL">
+              <Input value={baseURL} onChange={(e) => setBaseURL(e.target.value)} placeholder="https://…/v1" />
+            </Field>
+            <Field label="Context limit">
+              <Input inputMode="numeric" value={contextLimit} onChange={(e) => setContextLimit(e.target.value)} placeholder="e.g. 200000" />
+            </Field>
+          </FieldRow>
+          {verdict && <VerifyBanner state={verdict} />}
+        </div>
+        {failed ? (
+          <div className="flex justify-end gap-2 sm:flex-row">
+            <Button variant="ghost" onClick={() => setOpen(false)}>Keep anyway</Button>
+            <Button onClick={() => setVerdict(null)}>Fix key</Button>
+          </div>
+        ) : (
+          <ModalFooter onCancel={() => setOpen(false)} onSubmit={save} submitLabel="Save" busy={busy} disabled={!!verdict} />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/app/(app)/credentials/edit-reasoning-modal.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import * as React from "react";
+import { Sparkles } from "lucide-react";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/shared";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger } from "@/components/ui/dialog";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
+import { Field, ModalFooter } from "./form";
+import type { ProfileWire, ReasoningOption } from "@/lib/types";
+
+/** Change a profile's reasoning effort in place (mirrors the TUI `r` cycle):
+ * one model entry, with reasoning as an editable attribute — not a duplicate. */
+export function EditReasoningModal({ profile, onSaved }: { profile: ProfileWire; onSaved: () => void }) {
+  const [open, setOpen] = React.useState(false);
+  const [opts, setOpts] = React.useState<ReasoningOption[] | null>(null);
+  const [idx, setIdx] = React.useState("0");
+  const [busy, setBusy] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!open) return;
+    setOpts(null);
+    const q = `?provider=${encodeURIComponent(profile.provider_id)}&model=${encodeURIComponent(profile.model)}`;
+    api<{ options: ReasoningOption[] }>(`/models/reasoning-options${q}`)
+      .then((r) => {
+        setOpts(r.options);
+        const cur = JSON.stringify(profile.reasoning ?? { kind: "off" });
+        const found = r.options.findIndex((o) => JSON.stringify(o.value) === cur);
+        setIdx(String(found >= 0 ? found : 0));
+      })
+      .catch(() => setOpts([]));
+  }, [open, profile.provider_id, profile.model, profile.reasoning]);
+
+  const save = async () => {
+    if (!opts) return;
+    setBusy(true);
+    try {
+      await api(`/models/profiles/${profile.id}/reasoning`, { method: "POST", body: { reasoning: opts[Number(idx)]?.value ?? { kind: "off" } } });
+      toast.success("Reasoning updated");
+      onSaved();
+      setOpen(false);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Update failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="sm" className="text-muted-foreground" title="Reasoning effort">
+          <Sparkles /> Reasoning
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Reasoning effort</DialogTitle>
+          <DialogDescription>
+            {profile.provider_id} · <span className="font-mono">{profile.model}</span> — sets the thinking effort this model uses.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-5">
+          {opts === null ? (
+            <div className="flex items-center justify-center gap-2.5 py-6 text-[13px] text-muted-foreground">
+              <Spinner /> Loading effort levels…
+            </div>
+          ) : opts.length === 0 ? (
+            <p className="rounded-lg border border-border bg-surface-2/40 px-4 py-3 text-[13px] text-muted-foreground">
+              This model doesn’t expose reasoning controls.
+            </p>
+          ) : (
+            <Field label="Effort">
+              <Select value={idx} onValueChange={setIdx}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {opts.map((o, i) => (
+                    <SelectItem key={i} value={String(i)}>
+                      {o.label}
+                      {o.description ? ` — ${o.description}` : ""}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+          )}
+        </div>
+        <ModalFooter onCancel={() => setOpen(false)} onSubmit={save} submitLabel="Save" busy={busy} disabled={!opts || opts.length === 0} />
+      </DialogContent>
+    </Dialog>
+  );
+}