aigetwey 1.0.1

package/dashboard/src/components/ProviderDetail.tsx

@@ -0,0 +1,566 @@
+"use client";
+
+import { useEffect, useState, useCallback, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { adminApi } from "@/lib/client";
+import { Lamp } from "@/components/Lamp";
+import { Badge, FormatBadge } from "@/components/Badge";
+import { CooldownTimer } from "@/components/CooldownTimer";
+import { RichCard, CardTitle } from "@/components/RichCard";
+import { Button, Input, Field } from "@/components/Button";
+import { Icon } from "@/components/Icon";
+import { fmt, Empty } from "@/components/ui";
+import { ModelSelectModal, type DiscoveredModel } from "@/components/ModelSelectModal";
+import { CapacityBadges } from "@/components/CapacityBadges";
+import { ConfirmModal } from "@/components/ConfirmModal";
+import type { MaskedConfig, MaskedProvider, ProviderSnapshot, PingResult } from "@/lib/gateway";
+
+export function ProviderDetail({ id }: { id: string }) {
+  const router = useRouter();
+  const [provider, setProvider] = useState<MaskedProvider | null>(null);
+  const [health, setHealth] = useState<ProviderSnapshot | null>(null);
+  const [error, setError] = useState("");
+  const [ping, setPing] = useState<PingResult | null>(null);
+  const [busy, setBusy] = useState("");
+  const [newKey, setNewKey] = useState("");
+  const [newKeyName, setNewKeyName] = useState("");
+  const [editIdx, setEditIdx] = useState<number | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editVal, setEditVal] = useState("");
+  const [newModel, setNewModel] = useState("");
+  const [modelFilter, setModelFilter] = useState("");
+  const [discovered, setDiscovered] = useState<DiscoveredModel[] | null>(null);
+  const [modelTest, setModelTest] = useState<Record<string, "testing" | "ok" | "fail">>({});
+  const [keyTest, setKeyTest] = useState<Record<number, "testing" | PingResult>>({});
+  const [testingAll, setTestingAll] = useState(false);
+  const [testAllSummary, setTestAllSummary] = useState<{ total: number; passed: number; failed: number } | null>(null);
+  const stopTestAll = useRef(false);
+  const [editingConn, setEditingConn] = useState(false);
+  const [connUrl, setConnUrl] = useState("");
+  const [connPrefix, setConnPrefix] = useState("");
+  const [revealedKeys, setRevealedKeys] = useState<Record<number, string>>({});
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  async function testModel(mid: string) {
+    setModelTest((t) => ({ ...t, [mid]: "testing" }));
+    const r = await adminApi.testModel(id, mid);
+    setModelTest((t) => ({ ...t, [mid]: r.ok && r.data?.ok ? "ok" : "fail" }));
+  }
+
+  async function testKey(i: number) {
+    setKeyTest((t) => ({ ...t, [i]: "testing" }));
+    const r = await adminApi.testKey(id, i);
+    setKeyTest((t) => ({ ...t, [i]: r.data ?? { ok: false, reachable: false, status: 0, error: r.error } }));
+  }
+
+  async function testAllKeys(count: number) {
+    stopTestAll.current = false;
+    setTestingAll(true);
+    setTestAllSummary(null);
+    setKeyTest({});
+    let passed = 0;
+    let failed = 0;
+    for (let i = 0; i < count; i++) {
+      if (stopTestAll.current) break;
+      setKeyTest((t) => ({ ...t, [i]: "testing" }));
+      const r = await adminApi.testKey(id, i);
+      const result = r.data ?? { ok: false, reachable: false, status: 0, error: r.error };
+      setKeyTest((t) => ({ ...t, [i]: result }));
+      if (result.ok) passed++;
+      else failed++;
+      if (i < count - 1 && !stopTestAll.current) await new Promise((resolve) => setTimeout(resolve, 500));
+    }
+    setTestingAll(false);
+    setTestAllSummary({ total: count, passed, failed });
+  }
+
+  const reload = useCallback(async () => {
+    const [cfgRes, provRes] = await Promise.all([fetch("/api/gw/admin/config"), adminApi.providers()]);
+    if (!cfgRes.ok) {
+      setError("could not reach the gateway");
+      return;
+    }
+    const cfg = (await cfgRes.json()) as MaskedConfig;
+    const p = cfg.providers.find((x) => x.id === id) ?? null;
+    if (!p) {
+      setError(`provider "${id}" not found`);
+      return;
+    }
+    setError("");
+    setProvider(p);
+    setHealth(provRes.data?.providers.find((x) => x.id === id) ?? null);
+  }, [id]);
+
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+
+  if (error) return <Empty>{error}</Empty>;
+  if (!provider) return <Empty>Loading…</Empty>;
+
+  const keys = provider.api_keys ?? (provider.api_key ? [provider.api_key] : []);
+  const q = modelFilter.trim().toLowerCase();
+  const shownModels = q ? provider.models.filter((m) => m.id.toLowerCase().includes(q)) : provider.models;
+
+  async function run(label: string, fn: () => Promise<{ ok: boolean; error?: string }>) {
+    setBusy(label);
+    const res = await fn();
+    setBusy("");
+    if (!res.ok) setError(res.error ?? "action failed");
+    else {
+      setError("");
+      await reload();
+    }
+  }
+
+  return (
+    <div>
+      <button onClick={() => router.push("/providers")} className="mb-4 inline-flex items-center gap-1 text-[12px] text-text-muted hover:text-text">
+        <Icon name="arrow_back" size={15} /> Providers
+      </button>
+
+      <div className="mb-6 flex items-center gap-3">
+        <Lamp state={health?.keys.some((k) => k.healthy) ?? true ? "live" : "down"} />
+        <div>
+          <h1 className="text-[22px] font-semibold tracking-tight text-text">{provider.name || provider.id}</h1>
+          {provider.name && <span className="text-[12px] text-text-subtle">{provider.id}/</span>}
+        </div>
+        <FormatBadge format={provider.format} />
+        {provider.free && <Badge tone="info">free</Badge>}
+        {provider.service_account && <Badge tone="info">service-account</Badge>}
+        {provider.disabled && <Badge tone="warn">disabled</Badge>}
+
+        {/* enable/disable the whole provider — skipped in routing when off */}
+        <label className="ml-auto flex items-center gap-2 text-[12px] text-text-muted">
+          {provider.disabled ? "Disabled" : "Enabled"}
+          <button
+            type="button"
+            onClick={() => void adminApi.setProviderDisabled(id, !provider.disabled).then(() => reload())}
+            className={`relative h-5 w-9 rounded-full transition-colors ${provider.disabled ? "bg-border-subtle" : "bg-accent"}`}
+            aria-label="Toggle provider enabled"
+            title={provider.disabled ? "Provider is disabled — enable it" : "Provider is enabled — disable it"}
+          >
+            <span className={`absolute top-0.5 h-4 w-4 rounded-full bg-white transition-transform ${provider.disabled ? "left-0.5" : "left-[18px]"}`} />
+          </button>
+        </label>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <RichCard header={<CardTitle title="Connection" />}>
+          {editingConn ? (
+            <div className="space-y-3">
+              <Field label="Name" hint="the id — also the call prefix (name/model) & combos">
+                <Input value={connPrefix} onChange={(e) => setConnPrefix(e.target.value)} placeholder="e.g. huki" className="font-mono text-[12.5px]" />
+              </Field>
+              {connPrefix.trim() && connPrefix.trim() !== id && (
+                <p className="flex items-start gap-1.5 rounded-brand border border-warning/40 bg-warning/8 px-2.5 py-2 text-[11.5px] text-warning">
+                  <Icon name="warning" size={14} className="mt-0.5 flex-none" />
+                  <span>
+                    Renaming rewrites the call string. CLI tools pointing at{" "}
+                    <code className="tnum">{id}/…</code> will break until repointed; combos that target it are
+                    updated automatically.
+                  </span>
+                </p>
+              )}
+              <Field label="Base URL">
+                <Input value={connUrl} onChange={(e) => setConnUrl(e.target.value)} placeholder="https://..." className="font-mono text-[12.5px]" />
+              </Field>
+              <div className="flex justify-end gap-2">
+                <Button variant="ghost" onClick={() => setEditingConn(false)}>Cancel</Button>
+                <Button disabled={busy === "editconn"} onClick={() => run("editconn", async () => {
+                  // One identifier: Name == id == call prefix. Rename it (cascades to
+                  // combos, moves this page to the new id) then apply base_url.
+                  const newId = connPrefix.trim();
+                  let activeId = id;
+                  if (newId && newId !== id) {
+                    const rr = await adminApi.renameProvider(id, newId);
+                    if (!rr.ok) return rr;
+                    activeId = newId;
+                  }
+                  const r = await adminApi.editProvider(activeId, { base_url: connUrl.trim() || undefined });
+                  if (r.ok) {
+                    setEditingConn(false);
+                    if (activeId !== id) { router.push(`/providers/${encodeURIComponent(activeId)}`); return r; }
+                  }
+                  return r;
+                })}>Save</Button>
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="space-y-2 text-[13px]">
+                <Row k="Base URL" v={provider.base_url} />
+                <Row k="Format" v={provider.format} />
+                <Row k="Cooldown base" v={`${provider.cooldown_base_ms}ms`} />
+                <Row k="Max retries" v={String(provider.max_retries)} />
+              </div>
+              <div className="mt-4 flex items-center gap-2">
+                <Button variant="ghost" onClick={() => { setEditingConn(true); setConnUrl(provider.base_url); setConnPrefix(provider.id); }}>
+                  <Icon name="edit" size={15} /> Edit
+                </Button>
+                <Button variant="ghost" disabled={busy === "test"} onClick={() => run("test", async () => {
+                  const r = await adminApi.testProvider(id);
+                  if (r.ok) setPing(r.data);
+                  return r;
+                })}>
+                  <Icon name="wifi_tethering" size={16} /> {busy === "test" ? "Testing…" : "Test connection"}
+                </Button>
+                <Button variant="ghost" disabled={busy === "discover"} onClick={() => run("discover", async () => {
+                  const r = await adminApi.discoverModels(id);
+                  if (r.ok) setDiscovered(r.data?.models ?? []);
+                  return r;
+                })}>
+                  <Icon name="sync" size={16} /> {busy === "discover" ? "Fetching…" : "Fetch models"}
+                </Button>
+              </div>
+              {ping && (
+                <div className="mt-3 text-[12px]">
+                  <Badge tone={ping.ok ? "live" : ping.reachable ? "warn" : "down"}>
+                    {ping.ok ? `ok (${ping.status})` : ping.reachable ? `reachable (${ping.status})` : "unreachable"}
+                  </Badge>
+                  {ping.error && <span className="ml-2 text-text-subtle">{ping.error}</span>}
+                </div>
+              )}
+            </>
+          )}
+        </RichCard>
+
+        <RichCard
+          header={
+            <>
+              <CardTitle title="Keys" sub={`${keys.length} configured`} />
+              <div className="flex flex-wrap items-center gap-3">
+                {keys.length > 1 && (
+                  <Button variant="ghost" disabled={testingAll} onClick={() => testAllKeys(keys.length)}>
+                    <Icon name={testingAll ? "progress_activity" : "sync"} size={15} />
+                    {testingAll ? "Testing…" : "Test All"}
+                  </Button>
+                )}
+                {testingAll && (
+                  <Button variant="ghost" onClick={() => { stopTestAll.current = true; }}>
+                    <Icon name="stop" size={15} /> Stop
+                  </Button>
+                )}
+                <span className="text-[11px] text-text-subtle">Round Robin</span>
+                <button
+                  onClick={() => {
+                    const next = provider.strategy === "round-robin" ? null : "round-robin";
+                    void adminApi.setProviderStrategy(id, next as "round-robin" | null, provider.sticky ?? 1).then(() => reload());
+                  }}
+                  className={`relative h-5 w-9 rounded-full transition-colors ${provider.strategy === "round-robin" ? "bg-accent" : "bg-border-subtle"}`}
+                  aria-label="Toggle round-robin"
+                >
+                  <span className={`absolute top-0.5 h-4 w-4 rounded-full bg-white transition-transform ${provider.strategy === "round-robin" ? "left-[18px]" : "left-0.5"}`} />
+                </button>
+                {provider.strategy === "round-robin" && (
+                  <div className="flex items-center gap-1">
+                    <span className="text-[11px] text-text-subtle">Sticky:</span>
+                    <input
+                      type="number"
+                      min={1}
+                      value={provider.sticky ?? 1}
+                      onChange={(e) => {
+                        const v = Number(e.target.value) || 1;
+                        void adminApi.setProviderStrategy(id, "round-robin", v).then(() => reload());
+                      }}
+                      className="w-12 rounded border border-border-subtle bg-transparent px-1.5 py-0.5 text-[11px] text-text focus:border-accent focus:outline-none"
+                    />
+                  </div>
+                )}
+              </div>
+            </>
+          }
+        >
+          {testAllSummary && (
+            <div className="mb-3 flex items-center gap-2 text-[11.5px]">
+              <Badge tone={testAllSummary.failed === 0 ? "live" : "warn"}>
+                {testAllSummary.total} tested: {testAllSummary.passed} valid, {testAllSummary.failed} failed
+              </Badge>
+            </div>
+          )}
+          {keys.length === 0 ? (
+            <Empty>No keys (free / service-account provider).</Empty>
+          ) : (
+            <div className="space-y-1.5">
+              {keys.map((k, i) => {
+                const ks = health?.keys[i];
+                const test = keyTest[i];
+                const tested = test && test !== "testing" ? test : null;
+                const lamp = tested ? (tested.ok ? "live" : tested.reachable ? "idle" : "down") : ks ? (ks.healthy ? "live" : "down") : "idle";
+                const name = provider.key_names?.[k];
+                const disabled = provider.disabled_keys?.includes(i) ?? false;
+                if (editIdx === i) {
+                  return (
+                    <div key={i} className="space-y-2 rounded-brand border border-accent bg-accent-soft/40 px-3 py-2.5">
+                      <Input value={editName} onChange={(e) => setEditName(e.target.value)} placeholder="key name (optional)" />
+                      <Input value={editVal} onChange={(e) => setEditVal(e.target.value)} placeholder="new key value (leave blank to keep)" className="font-mono text-[12.5px]" />
+                      <div className="flex justify-end gap-2">
+                        <Button variant="ghost" onClick={() => setEditIdx(null)}>Cancel</Button>
+                        <Button disabled={busy === `editkey${i}`} onClick={() => run(`editkey${i}`, async () => {
+                          const r = await adminApi.editKey(id, i, { name: editName, key: editVal.trim() || undefined });
+                          if (r.ok) setEditIdx(null);
+                          return r;
+                        })}>Save</Button>
+                      </div>
+                    </div>
+                  );
+                }
+                return (
+                  <div key={i} className={`rounded-brand border border-border-subtle px-3 py-2${disabled ? " opacity-60" : ""}`}>
+                    <div className="flex items-center gap-2">
+                      {/* reorder */}
+                      <div className="flex flex-col">
+                        <button
+                          onClick={() => run(`reorder${i}up`, () => adminApi.reorderKey(id, i, i - 1))}
+                          disabled={i === 0}
+                          className="p-0.5 text-text-subtle hover:text-text disabled:opacity-30"
+                          aria-label="Move up"
+                        >
+                          <Icon name="keyboard_arrow_up" size={14} />
+                        </button>
+                        <button
+                          onClick={() => run(`reorder${i}dn`, () => adminApi.reorderKey(id, i, i + 1))}
+                          disabled={i === keys.length - 1}
+                          className="p-0.5 text-text-subtle hover:text-text disabled:opacity-30"
+                          aria-label="Move down"
+                        >
+                          <Icon name="keyboard_arrow_down" size={14} />
+                        </button>
+                      </div>
+                      <Lamp state={lamp} />
+                      <div className="min-w-0 flex-1">
+                        {name && <div className="text-[12px] font-semibold text-text-muted">{name}</div>}
+                        <span className="block truncate font-mono text-[12.5px] text-text">{revealedKeys[i] ?? k}</span>
+                      </div>
+                      {revealedKeys[i] && (
+                        <button
+                          onClick={() => { void navigator.clipboard.writeText(revealedKeys[i]!); }}
+                          className="flex-none rounded p-1 text-text-subtle transition-colors hover:text-text"
+                          aria-label="Copy key"
+                          title="Copy to clipboard"
+                        >
+                          <Icon name="content_copy" size={14} />
+                        </button>
+                      )}
+                      {ks && ks.cooldown_ms > 0 && <CooldownTimer ms={ks.cooldown_ms} />}
+                      {/* actions: reveal > toggle > test > edit > delete */}
+                      <button
+                        onClick={async () => {
+                          if (revealedKeys[i]) { setRevealedKeys((r) => { const n = { ...r }; delete n[i]; return n; }); return; }
+                          const r = await adminApi.revealKey(id, i);
+                          if (r.ok && r.data?.key) setRevealedKeys((prev) => ({ ...prev, [i]: r.data!.key }));
+                        }}
+                        className="flex-none rounded p-1 text-text-subtle transition-colors hover:text-text"
+                        aria-label={revealedKeys[i] ? "Hide key" : "Show key"}
+                        title={revealedKeys[i] ? "Hide key" : "Show key"}
+                      >
+                        <Icon name={revealedKeys[i] ? "visibility_off" : "visibility"} size={15} />
+                      </button>
+                      <button
+                        onClick={() => run(`toggle${i}`, () => adminApi.toggleKey(id, i, disabled))}
+                        className="flex-none rounded p-1 text-text-subtle transition-colors hover:text-text"
+                        aria-label={disabled ? "Enable key" : "Disable key"}
+                        title={disabled ? "Enable this key" : "Disable this key"}
+                      >
+                        <Icon name={disabled ? "toggle_off" : "toggle_on"} size={20} className={disabled ? "text-text-subtle" : "text-success"} />
+                      </button>
+                      <button
+                        onClick={() => testKey(i)}
+                        disabled={test === "testing"}
+                        className="flex-none rounded p-1 text-text-subtle transition-colors hover:text-text disabled:opacity-60"
+                        aria-label={`Check key ${i + 1}`}
+                        title="Check this key against the base URL"
+                      >
+                        <Icon name={test === "testing" ? "progress_activity" : "wifi_tethering"} size={15} />
+                      </button>
+                      <button
+                        onClick={() => { setEditIdx(i); setEditName(name ?? ""); setEditVal(""); }}
+                        className="flex-none rounded p-1 text-text-subtle transition-colors hover:text-text"
+                        aria-label={`Edit key ${i + 1}`}
+                        title="Rename or replace this key"
+                      >
+                        <Icon name="edit" size={15} />
+                      </button>
+                      <button
+                        onClick={() => run(`rmkey${i}`, () => adminApi.removeKey(id, i))}
+                        className="flex-none rounded p-1 text-text-subtle transition-colors hover:text-danger"
+                        aria-label="Remove key"
+                      >
+                        <Icon name="delete" size={15} />
+                      </button>
+                    </div>
+                    {tested && (
+                      <div className="mt-1.5 flex items-center gap-2 pl-8 text-[11.5px]">
+                        <Badge tone={tested.ok ? "live" : tested.reachable ? "warn" : "down"}>
+                          {tested.ok ? "valid" : tested.reachable ? `reachable (${tested.status})` : "invalid"}
+                        </Badge>
+                        {tested.error && <span className="truncate text-danger">{tested.error}</span>}
+                      </div>
+                    )}
+                    {!tested && ks?.last_error && (
+                      <div className="mt-1.5 flex items-center gap-2 pl-8 text-[11.5px]">
+                        <span className="text-danger">{ks.last_error.status ? `${ks.last_error.status}: ` : ""}{ks.last_error.message}</span>
+                        <span className="text-text-subtle">{new Date(ks.last_error.at).toLocaleTimeString()}</span>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          <div className="mt-3 space-y-2">
+            <Input value={newKeyName} onChange={(e) => setNewKeyName(e.target.value)} placeholder="key name (optional, e.g. primary)" />
+            <div className="flex gap-2">
+              <Input value={newKey} onChange={(e) => setNewKey(e.target.value)} placeholder="add a key…" className="font-mono text-[12.5px]" />
+              <Button disabled={!newKey || busy === "addkey"} onClick={() => run("addkey", async () => {
+                const r = await adminApi.addKey(id, newKey, newKeyName.trim() || undefined);
+                if (r.ok) { setNewKey(""); setNewKeyName(""); }
+                return r;
+              })}>Add</Button>
+            </div>
+          </div>
+        </RichCard>
+
+        <RichCard
+          className="lg:col-span-2"
+          header={
+            <>
+              <CardTitle title="Models served" sub={`${provider.models.length} in catalog`} />
+              {provider.models.length > 0 && (
+                <button
+                  onClick={() => run("clear", () => adminApi.clearModels(id))}
+                  disabled={busy === "clear"}
+                  className="text-[12px] text-text-subtle hover:text-danger"
+                >
+                  Clear all
+                </button>
+              )}
+            </>
+          }
+        >
+          {provider.models.length === 0 ? (
+            <Empty>No models. Add one below, or fetch them for a free/auto provider.</Empty>
+          ) : (
+            <>
+              <p className="mb-2.5 text-[12px] text-text-subtle">
+                Call any of these as <span className="tnum text-text-muted">{provider.id}/&lt;model&gt;</span>, as a combo alias, or by the bare id.
+              </p>
+              {/* filter only earns its space once the catalog is long enough to scroll */}
+              {provider.models.length > 8 && (
+                <div className="mb-2.5 flex items-center gap-2">
+                  <div className="relative flex-1">
+                    <Icon name="search" size={15} className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-text-subtle" />
+                    <Input value={modelFilter} onChange={(e) => setModelFilter(e.target.value)} placeholder="filter models…" className="pl-8" />
+                  </div>
+                  <span className="tnum whitespace-nowrap text-[12px] text-text-subtle">
+                    {q ? `${shownModels.length} of ${provider.models.length}` : `${provider.models.length}`}
+                  </span>
+                </div>
+              )}
+              {shownModels.length === 0 ? (
+                <Empty>No model matches “{modelFilter}”.</Empty>
+              ) : (
+                <div className="max-h-[360px] divide-y divide-border-subtle overflow-y-auto rounded-brand border border-border-subtle">
+                  {shownModels.map((m) => {
+                    const st = modelTest[m.id];
+                    const statusIcon = st === "ok" ? "check_circle" : st === "fail" ? "cancel" : "smart_toy";
+                    const statusColor = st === "ok" ? "text-success" : st === "fail" ? "text-danger" : "text-text-subtle";
+                    return (
+                      <div key={m.id} className="group flex items-center justify-between gap-3 px-3 py-2 hover:bg-bg">
+                        <div className="flex min-w-0 items-center gap-2">
+                          <Icon name={statusIcon} size={15} className={`flex-none ${statusColor}`} />
+                          {/* the prefix (= provider id) is what makes the call string; show it aigetwey-style */}
+                          <span className="tnum truncate text-[12.5px]">
+                            <span className="text-text-subtle">{provider.id}/</span>
+                            <span className="text-text">{m.id}</span>
+                          </span>
+                          <CapacityBadges model={m.id} provider={provider.id} />
+                          {(m.price_in !== undefined || m.price_out !== undefined) && (
+                            <span className="tnum whitespace-nowrap text-[11px] text-text-subtle">
+                              {fmt.cost(m.price_in ?? 0)}/{fmt.cost(m.price_out ?? 0)} per 1M
+                            </span>
+                          )}
+                        </div>
+                        <div className="flex flex-none items-center gap-0.5">
+                          <button
+                            onClick={() => testModel(m.id)}
+                            disabled={st === "testing"}
+                            className="rounded p-1 text-text-subtle transition-colors hover:bg-surface hover:text-accent disabled:opacity-60"
+                            aria-label={`Test ${m.id}`}
+                            title={st === "fail" ? "Test failed — click to retry" : "Test this model"}
+                          >
+                            <Icon name={st === "testing" ? "progress_activity" : "science"} size={15} />
+                          </button>
+                          <button
+                            onClick={() => run(`rmmodel${m.id}`, () => adminApi.removeModel(id, m.id))}
+                            disabled={busy === `rmmodel${m.id}`}
+                            className="rounded p-1 text-text-subtle transition-colors hover:bg-surface hover:text-danger disabled:opacity-40"
+                            aria-label={`Remove ${m.id}`}
+                          >
+                            <Icon name="delete" size={16} />
+                          </button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </>
+          )}
+          <div className="mt-3 flex gap-2">
+            <Input value={newModel} onChange={(e) => setNewModel(e.target.value)} placeholder="add a model id…" />
+            <Button disabled={!newModel || busy === "addmodel"} onClick={() => run("addmodel", async () => {
+              const r = await adminApi.addModel(id, newModel);
+              if (r.ok) setNewModel("");
+              return r;
+            })}>Add</Button>
+          </div>
+        </RichCard>
+      </div>
+
+      {discovered && (
+        <ModelSelectModal
+          models={discovered}
+          busy={busy === "addmodels"}
+          onClose={() => setDiscovered(null)}
+          onAdd={(ids) => run("addmodels", async () => {
+            const r = await adminApi.addModels(id, ids);
+            if (r.ok) setDiscovered(null);
+            return r;
+          })}
+        />
+      )}
+
+      <div className="mt-6">
+        <Button variant="danger" onClick={() => setConfirmDelete(true)}>
+          <Icon name="delete" size={16} /> Remove provider
+        </Button>
+      </div>
+
+      {confirmDelete && (
+        <ConfirmModal
+          title="Remove provider"
+          message={`Delete "${provider.name ?? id}"? All keys and model associations will be lost.`}
+          confirmLabel="Remove"
+          busy={busy === "rmprov"}
+          onCancel={() => setConfirmDelete(false)}
+          onConfirm={() => run("rmprov", async () => {
+            const r = await adminApi.removeProvider(id);
+            if (r.ok) router.push("/providers");
+            else setConfirmDelete(false);
+            return r;
+          })}
+        />
+      )}
+    </div>
+  );
+}
+
+function Row({ k, v }: { k: string; v: string }) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <span className="text-text-subtle">{k}</span>
+      <span className="truncate text-text">{v}</span>
+    </div>
+  );
+}