aigetwey 1.1.0 → 1.3.0

package/dashboard/src/components/BudgetTracker.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { adminApi } from "@/lib/client";
+import { Badge } from "@/components/Badge";
+import { RichCard, CardTitle } from "@/components/RichCard";
+import { CooldownTimer } from "@/components/CooldownTimer";
+import { fmt, Empty } from "@/components/ui";
+import { BudgetForm } from "@/components/BudgetForm";
+import { Button } from "@/components/Button";
+import { Icon } from "@/components/Icon";
+import type { BudgetStatus, KeyUsageRow } from "@/lib/gateway";
+
+/**
+ * Budget Tracker — scoped spend budgets (global / per-provider / per-model /
+ * per-key) with an Add / Edit / Remove flow: consumption vs limit, a fill bar,
+ * and a live reset countdown.
+ */
+export function BudgetTracker() {
+  const [budgets, setBudgets] = useState<BudgetStatus[]>([]);
+  const [keys, setKeys] = useState<KeyUsageRow[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const [form, setForm] = useState<{ open: boolean; initial: BudgetStatus | null }>({ open: false, initial: null });
+  const [error, setError] = useState("");
+
+  const refresh = () => {
+    void adminApi.budgets().then((r) => {
+      if (!r.ok) setError(r.error ?? "could not reach the gateway");
+      else { setBudgets(r.data?.budgets ?? []); }
+      setLoaded(true);
+    });
+    void adminApi.keysUsage().then((r) => { if (r.ok) setKeys(r.data?.keys ?? []); });
+  };
+
+  useEffect(() => { refresh(); }, []);
+
+  if (error) return <Empty>{error}</Empty>;
+  if (!loaded) return <Empty>Loading...</Empty>;
+
+  return (
+    <div>
+      <div className="mb-6">
+        <h1 className="text-[22px] font-semibold tracking-tight text-text">Budgets</h1>
+        <p className="mt-1 text-[13px] text-text-muted">
+          Spend caps (USD or tokens) with live reset countdowns.
+        </p>
+      </div>
+
+      {/* -- Budgets -- */}
+      <div className="mb-6">
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="text-[15px] font-semibold text-text">Overall</h2>
+          {!form.open && (
+            <Button onClick={() => setForm({ open: true, initial: null })}>
+              <Icon name="add" size={16} /> Add budget
+            </Button>
+          )}
+        </div>
+
+        {form.open && (
+          <BudgetForm
+            key={form.initial?.key ?? "new"}
+            initial={form.initial}
+            onSaved={() => { setForm({ open: false, initial: null }); refresh(); }}
+            onCancel={() => setForm({ open: false, initial: null })}
+          />
+        )}
+
+        {budgets.filter((b) => b.scope.type !== "key").length === 0 ? (
+          !form.open && <Empty>No budgets yet. Add one to cap spend globally, per provider, or per model.</Empty>
+        ) : (
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {budgets.filter((b) => b.scope.type !== "key").map((b) => (
+              <RichCard
+                key={b.key}
+                header={
+                  <>
+                    <CardTitle title={b.label} sub={`${b.scope.type} · ${b.window}`} />
+                    <Badge tone={b.exhausted ? "down" : b.alert ? "warn" : "live"}>
+                      {b.exhausted ? "exhausted" : b.alert ? "alert" : "active"}
+                    </Badge>
+                  </>
+                }
+              >
+                <div className="space-y-2.5">
+                  {b.note && <p className="text-[12px] text-text-muted">{b.note}</p>}
+                  <div className="h-1.5 overflow-hidden rounded-full bg-surface-2">
+                    <div
+                      className={`h-full rounded-full transition-all ${b.exhausted ? "bg-danger" : b.alert ? "bg-warning" : "bg-accent"}`}
+                      style={{ width: `${Math.min(100, Math.round(b.pct * 100))}%` }}
+                    />
+                  </div>
+                  <div className="flex items-center justify-between text-[12px]">
+                    <span className="tnum text-text-muted">
+                      {b.unit === "usd"
+                        ? `$${b.spent.toFixed(2)} / $${b.limit.toFixed(2)}`
+                        : `${fmt.compact(b.spent)} / ${fmt.compact(b.limit)} tokens`}
+                      {b.est_converse != null
+                        ? b.unit === "usd" ? ` · ~${fmt.compact(b.est_converse)} tok` : ` · ~$${b.est_converse.toFixed(2)}`
+                        : " · —"}
+                    </span>
+                    <CooldownTimer ms={b.reset_in_ms} tone="muted" icon="restart_alt" keepZero />
+                  </div>
+                  <div className="flex items-center gap-2 border-t border-border-subtle pt-2.5">
+                    <Button variant="ghost" className="px-2.5 py-1 text-[12px]" onClick={() => setForm({ open: true, initial: b })}>
+                      <Icon name="edit" size={14} /> Edit
+                    </Button>
+                    <Button
+                      variant="danger"
+                      className="px-2.5 py-1 text-[12px]"
+                      onClick={async () => { const r = await adminApi.clearBudget(b.key); if (!r.ok) setError(r.error ?? "could not remove budget"); refresh(); }}
+                    >
+                      <Icon name="delete" size={14} /> Remove
+                    </Button>
+                  </div>
+                </div>
+              </RichCard>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* -- Keys -- */}
+      <div>
+        <h2 className="mb-3 text-[15px] font-semibold text-text">Keys</h2>
+        {keys.length === 0 ? (
+          <Empty>No gateway keys yet. Add one on the Endpoint page.</Empty>
+        ) : (
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {keys.map((k) => (
+              <RichCard
+                key={k.fingerprint}
+                header={
+                  <>
+                    <CardTitle title={k.name} sub={k.budget ? `key · ${k.budget.window}` : "key · no limit"} />
+                    {k.expires && Date.now() > k.expires ? (
+                      <Badge tone="down">expired</Badge>
+                    ) : k.budget?.exhausted ? (
+                      <Badge tone="down">exhausted</Badge>
+                    ) : (
+                      <Badge tone="live">active</Badge>
+                    )}
+                  </>
+                }
+              >
+                <div className="space-y-2.5">
+                  {k.budget ? (
+                    <>
+                      <div className="h-1.5 overflow-hidden rounded-full bg-surface-2">
+                        <div
+                          className={`h-full rounded-full transition-all ${k.budget.exhausted ? "bg-danger" : k.budget.alert ? "bg-warning" : "bg-accent"}`}
+                          style={{ width: `${Math.min(100, Math.round(k.budget.pct * 100))}%` }}
+                        />
+                      </div>
+                      <div className="flex items-center justify-between text-[12px]">
+                        <span className="tnum text-text-muted">
+                          {k.budget.unit === "usd"
+                            ? `$${k.budget.spent.toFixed(2)} / $${k.budget.limit.toFixed(2)}`
+                            : `${fmt.compact(k.budget.spent)} / ${fmt.compact(k.budget.limit)} tokens`}
+                        </span>
+                        <CooldownTimer ms={k.budget.reset_in_ms} tone="muted" icon="restart_alt" keepZero />
+                      </div>
+                    </>
+                  ) : (
+                    <div className="flex items-center justify-between text-[12px]">
+                      <span className="tnum text-text-muted">${k.spent.toFixed(2)} spent</span>
+                      <span className="text-text-subtle">no limit</span>
+                    </div>
+                  )}
+                  <div className="text-[11px] text-text-subtle">
+                    {k.expires ? `expires ${fmt.date(k.expires)}` : "no expiry"}
+                  </div>
+                </div>
+              </RichCard>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/CooldownTimer.tsx

@@ -6,7 +6,7 @@ import { fmt } from "./ui";
 
 /**
  * Live countdown from a gateway-snapshot remaining-ms. Counts down locally each
- * second from render. Used for both key cooldowns (danger tone) and quota window
+ * second from render. Used for both key cooldowns (danger tone) and budget window
  * resets (muted tone). Renders nothing once it hits zero unless `keepZero`.
  */
 export function CooldownTimer({

package/dashboard/src/components/EndpointView.tsx

@@ -7,11 +7,26 @@ import { RichCard, CardTitle } from "@/components/RichCard";
 import { Button, Input } from "@/components/Button";
 import { Icon } from "@/components/Icon";
 import { KeyReveal } from "@/components/KeyReveal";
-import { Empty } from "@/components/ui";
-import type { EndpointPayload, HeadroomStatusReply, InjectLevel } from "@/lib/gateway";
+import { Empty, fmt } from "@/components/ui";
+import { ModelPicker, type ModelGroup } from "@/components/ModelPicker";
+import { ConfirmModal } from "@/components/ConfirmModal";
+import type { EndpointPayload, HeadroomStatusReply, InjectLevel, MaskedConfig } from "@/lib/gateway";
 
 const LEVELS: InjectLevel[] = ["off", "lite", "full", "ultra"];
 
+/** Segment-pill style — matches the Budgets page pills. */
+const pill = (active: boolean): string =>
+  `rounded-brand px-3 py-1.5 text-[13px] font-medium transition-colors ${
+    active ? "bg-accent/12 text-accent" : "bg-surface-2 text-text-muted hover:text-text"
+  }`;
+
+const DAY_MS = 86_400_000;
+const EXPIRY_MS: Record<"24h" | "7day" | "30day", number> = {
+  "24h": DAY_MS,
+  "7day": 7 * DAY_MS,
+  "30day": 30 * DAY_MS,
+};
+
 /** Generate a random gateway key client-side (aigetwey's one-click create). */
 function generateKey(): string {
   const bytes = new Uint8Array(24);
@@ -24,12 +39,22 @@ export function EndpointView() {
   const [ep, setEp] = useState<EndpointPayload | null>(null);
   const [error, setError] = useState("");
   const [busy, setBusy] = useState("");
-  const [newKey, setNewKey] = useState("");
   const [keyName, setKeyName] = useState("");
   const [created, setCreated] = useState<{ key: string; name: string } | null>(null);
+  const [pendingDelKey, setPendingDelKey] = useState<{ i: number; label: string } | null>(null);
   const [hr, setHr] = useState<HeadroomStatusReply | null>(null);
   const [editKey, setEditKey] = useState<number | null>(null);
   const [editKeyName, setEditKeyName] = useState("");
+  const [groups, setGroups] = useState<ModelGroup[]>([]);
+  const [scopeKey, setScopeKey] = useState<number | null>(null);
+  const [scopeModels, setScopeModels] = useState<string[]>([]);
+  const [scopeRpm, setScopeRpm] = useState("");
+  const [scopeExpiry, setScopeExpiry] = useState<"keep" | "never" | "24h" | "7day" | "30day" | "custom">("never");
+  const [scopeCustomDays, setScopeCustomDays] = useState("");
+  const [scopeLimit, setScopeLimit] = useState("");      // USD limit, "" = no cap
+  const [scopeWindow, setScopeWindow] = useState<"5h" | "24h" | "7day" | "30day">("30day");
+  const [keyBudgets, setKeyBudgets] = useState<Record<string, { limit: number; window: string }>>({});
+  const [pickerOpen, setPickerOpen] = useState(false);
 
   const reload = useCallback(async () => {
     const r = await adminApi.endpoint();
@@ -51,6 +76,29 @@ export function EndpointView() {
   useEffect(() => {
     void reload();
     void reloadHr();
+    // load the model catalog for the per-key scope picker (combos + provider/model refs).
+    void (async () => {
+      try {
+        const res = await fetch("/api/gw/admin/config");
+        if (!res.ok) return;
+        const cfg = (await res.json()) as MaskedConfig;
+        const grps: ModelGroup[] = [];
+        if (cfg.models.length) grps.push({ label: "Combos", items: cfg.models.map((m) => ({ value: m.alias, label: m.alias })) });
+        for (const p of cfg.providers) {
+          if (p.models.length) grps.push({ label: p.id, items: p.models.map((m) => ({ value: `${p.id}/${m.id}`, label: `${p.id}/${m.id}` })) });
+        }
+        setGroups(grps);
+      } catch { /* non-critical — picker will just be empty */ }
+    })();
+    // index existing key-scoped budgets by fingerprint so the modal can prefill.
+    void adminApi.budgets().then((r) => {
+      if (!r.ok || !r.data) return;
+      const map: Record<string, { limit: number; window: string }> = {};
+      for (const b of r.data.budgets) {
+        if (b.scope.type === "key") map[b.scope.id] = { limit: b.limit, window: b.window };
+      }
+      setKeyBudgets(map);
+    });
   }, [reload, reloadHr]);
 
   if (error) return <Empty>{error}</Empty>;
@@ -82,7 +130,6 @@ export function EndpointView() {
     }
     setError("");
     setKeyName("");
-    setNewKey("");
     setCreated({ key: rawKey, name });
     await reload();
   }
@@ -132,60 +179,197 @@ export function EndpointView() {
                     </div>
                   </div>
                 ) : (
-                  <div key={i} className="flex items-center justify-between gap-2 rounded-brand border border-border-subtle px-3 py-2">
-                    <div className="flex min-w-0 flex-col gap-0.5">
-                      {k.name && <span className="text-[12px] font-semibold text-text-muted">{k.name}</span>}
-                      <KeyReveal
-                        masked={k.key}
-                        reveal={async () => {
-                          const r = await adminApi.revealServerKey(i);
-                          return r.ok ? r.data?.key ?? null : null;
-                        }}
-                      />
-                    </div>
-                    <div className="flex flex-none items-center gap-1">
-                      <button
-                        onClick={() => { setEditKey(i); setEditKeyName(k.name ?? ""); }}
-                        className="text-text-subtle hover:text-text"
-                        aria-label="Rename key"
-                        title="Rename key"
-                      >
-                        <Icon name="edit" size={15} />
-                      </button>
-                      <button onClick={() => run(`rmkey${i}`, () => adminApi.removeServerKey(i))} className="text-text-subtle hover:text-danger" aria-label="Remove key">
-                        <Icon name="delete" size={16} />
-                      </button>
+                  <div key={i} className="space-y-0 rounded-brand border border-border-subtle">
+                    <div className="flex items-center justify-between gap-2 px-3 py-2">
+                      <div className="flex min-w-0 flex-col gap-0.5">
+                        {k.name && <span className="text-[12px] font-semibold text-text-muted">{k.name}</span>}
+                        <KeyReveal
+                          masked={k.key}
+                          reveal={async () => {
+                            const r = await adminApi.revealServerKey(i);
+                            return r.ok ? r.data?.key ?? null : null;
+                          }}
+                        />
+                        <div className="mt-0.5 flex flex-wrap items-center gap-1.5 text-[11px] text-text-subtle">
+                          <span>{k.models?.length ? `${k.models.length} model${k.models.length > 1 ? "s" : ""}` : "all models"}</span>
+                          <span>·</span>
+                          <span>{k.rpm ? `${k.rpm}/min` : "no rate limit"}</span>
+                          <span>·</span>
+                          <span>
+                            {k.expires
+                              ? (Date.now() > k.expires ? <span className="text-danger">expired</span> : `expires ${fmt.date(k.expires)}`)
+                              : "no expiry"}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex flex-none items-center gap-1">
+                        <button
+                          onClick={() => {
+                            setScopeKey(i);
+                            setScopeModels(k.models ?? []);
+                            setScopeRpm(k.rpm ? String(k.rpm) : "");
+                            setScopeExpiry(k.expires ? "keep" : "never");
+                            setScopeCustomDays("");
+                            const kb = keyBudgets[k.fingerprint];
+                            setScopeLimit(kb ? String(kb.limit) : "");
+                            setScopeWindow((kb?.window as "5h" | "24h" | "7day" | "30day") ?? "30day");
+                          }}
+                          className="text-text-subtle hover:text-text"
+                          aria-label="Edit key scope"
+                          title="Model allowlist + rate limit + budget + expiry"
+                        >
+                          <Icon name="tune" size={15} />
+                        </button>
+                        <button
+                          onClick={() => { setEditKey(i); setEditKeyName(k.name ?? ""); }}
+                          className="text-text-subtle hover:text-text"
+                          aria-label="Rename key"
+                          title="Rename key"
+                        >
+                          <Icon name="edit" size={15} />
+                        </button>
+                        <button onClick={() => setPendingDelKey({ i, label: k.name || k.key })} className="text-text-subtle hover:text-danger" aria-label="Remove key">
+                          <Icon name="delete" size={16} />
+                        </button>
+                      </div>
                     </div>
+                    {scopeKey === i && (
+                      <div className="space-y-2 border-t border-border-subtle bg-accent-soft/40 px-3 py-2.5">
+                        <div>
+                          <div className="mb-1 text-[11px] font-medium uppercase tracking-wider text-text-subtle">Allowed models</div>
+                          <div className="flex flex-wrap items-center gap-1.5">
+                            {scopeModels.length === 0 ? (
+                              <span className="text-[12px] text-text-subtle">All models (unrestricted)</span>
+                            ) : (
+                              scopeModels.map((m) => (
+                                <span key={m} className="inline-flex items-center gap-1 rounded border border-accent bg-accent-soft px-2 py-0.5 text-[12px] text-accent">
+                                  <span className="tnum">{m}</span>
+                                  <button onClick={() => setScopeModels((s) => s.filter((x) => x !== m))} className="hover:text-danger" aria-label={`Remove ${m}`}>
+                                    <Icon name="close" size={12} />
+                                  </button>
+                                </span>
+                              ))
+                            )}
+                          </div>
+                          <Button type="button" variant="ghost" className="mt-1.5" onClick={() => setPickerOpen(true)}>
+                            <Icon name="add" size={15} /> Pick models
+                          </Button>
+                        </div>
+                        <div>
+                          <div className="mb-1 text-[11px] font-medium uppercase tracking-wider text-text-subtle">Rate limit</div>
+                          <Input
+                            inputMode="numeric"
+                            value={scopeRpm}
+                            onChange={(e) => setScopeRpm(e.target.value.replace(/[^\d]/g, ""))}
+                            placeholder="req/min (blank = unlimited)"
+                          />
+                        </div>
+                        <div>
+                          <div className="mb-1 text-[11px] font-medium uppercase tracking-wider text-text-subtle">Access expiry</div>
+                          {k.expires && (
+                            <div className="mb-1.5 text-[11px] text-text-subtle">
+                              currently {Date.now() > k.expires ? <span className="text-danger">expired</span> : `expires ${fmt.date(k.expires)}`}
+                            </div>
+                          )}
+                          <div className="flex flex-wrap gap-1">
+                            {(k.expires
+                              ? (["keep", "never", "24h", "7day", "30day", "custom"] as const)
+                              : (["never", "24h", "7day", "30day", "custom"] as const)
+                            ).map((opt) => (
+                              <button
+                                key={opt}
+                                type="button"
+                                onClick={() => setScopeExpiry(opt)}
+                                className={pill(scopeExpiry === opt)}
+                              >
+                                {opt === "never" ? "no expiry" : opt}
+                              </button>
+                            ))}
+                          </div>
+                          {scopeExpiry === "custom" && (
+                            <div className="mt-1.5 flex items-center gap-1.5">
+                              <Input
+                                inputMode="numeric"
+                                value={scopeCustomDays}
+                                onChange={(e) => setScopeCustomDays(e.target.value.replace(/[^\d]/g, ""))}
+                                placeholder="days"
+                                className="w-24"
+                              />
+                              <span className="text-[11px] text-text-subtle">days from now</span>
+                            </div>
+                          )}
+                        </div>
+                        <div>
+                          <div className="mb-1 text-[11px] font-medium uppercase tracking-wider text-text-subtle">Spend cap (USD)</div>
+                          <Input
+                            inputMode="decimal"
+                            value={scopeLimit}
+                            onChange={(e) => setScopeLimit(e.target.value.replace(/[^\d.]/g, ""))}
+                            placeholder="USD (blank = no cap)"
+                          />
+                          {scopeLimit && (
+                            <div className="mt-1.5 flex items-center gap-1.5">
+                              <span className="text-[11px] text-text-subtle">resets every</span>
+                              {(["5h", "24h", "7day", "30day"] as const).map((w) => (
+                                <button
+                                  key={w}
+                                  type="button"
+                                  onClick={() => setScopeWindow(w)}
+                                  className={pill(scopeWindow === w)}
+                                >
+                                  {w}
+                                </button>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                        <div className="flex justify-end gap-2">
+                          <Button variant="ghost" onClick={() => setScopeKey(null)}>Cancel</Button>
+                          <Button
+                            disabled={busy === `scope${i}`}
+                            onClick={() =>
+                              run(`scope${i}`, async () => {
+                                // "keep" leaves expiry untouched (omit); "never" clears; a duration sets now+N.
+                                const expires =
+                                  scopeExpiry === "keep" ? undefined
+                                  : scopeExpiry === "never" ? null
+                                  : scopeExpiry === "custom" ? (scopeCustomDays ? Date.now() + Number(scopeCustomDays) * DAY_MS : null)
+                                  : Date.now() + EXPIRY_MS[scopeExpiry];
+                                const r = await adminApi.setServerKeyScope(i, {
+                                  models: scopeModels,
+                                  rpm: scopeRpm ? Number(scopeRpm) : null,
+                                  expires,
+                                });
+                                if (!r.ok) return r;
+                                const limit = scopeLimit ? Number(scopeLimit) : 0;
+                                if (limit > 0) {
+                                  await adminApi.setBudget({ scope: { type: "key", id: k.fingerprint }, unit: "usd", limit, window: scopeWindow });
+                                } else if (keyBudgets[k.fingerprint]) {
+                                  await adminApi.clearBudget(`key:${k.fingerprint}`);
+                                }
+                                setScopeKey(null);
+                                return r;
+                              })
+                            }
+                          >
+                            Save
+                          </Button>
+                        </div>
+                      </div>
+                    )}
                   </div>
                 ),
               )}
             </div>
           )}
           <div className="mt-3 space-y-2">
-            <Input value={keyName} onChange={(e) => setKeyName(e.target.value)} placeholder="key name (e.g. Claude Code)" />
             <div className="flex gap-2">
-              <div className="relative flex-1">
-                <Input
-                  value={newKey}
-                  onChange={(e) => setNewKey(e.target.value)}
-                  placeholder="type a custom key, or roll the dice →"
-                  className="pr-9 font-mono text-[12.5px]"
-                />
-                <button
-                  type="button"
-                  onClick={() => setNewKey(generateKey())}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 text-text-subtle hover:text-accent"
-                  aria-label="Generate a random key"
-                  title="Generate a random key"
-                >
-                  <Icon name="casino" size={16} />
-                </button>
-              </div>
-              <Button disabled={!newKey.trim() || busy === "genkey"} onClick={() => addKey(keyName, newKey.trim())}>
+              <Input value={keyName} onChange={(e) => setKeyName(e.target.value)} placeholder="key name (e.g. Claude Code)" className="flex-1" />
+              <Button disabled={busy === "genkey"} onClick={() => addKey(keyName, generateKey())}>
                 <Icon name="add" size={16} /> {busy === "genkey" ? "Adding…" : "Add key"}
               </Button>
             </div>
-            <p className="text-[11px] text-text-subtle">Name it, then type your own key or click the dice for a random one.</p>
+            <p className="text-[11px] text-text-subtle">Name it, then click Add key — a key is generated and shown once. Configure its limits after.</p>
           </div>
         </RichCard>
 
@@ -226,6 +410,30 @@ export function EndpointView() {
       </div>
 
       {created && <KeyCreatedModal name={created.name} value={created.key} onClose={() => setCreated(null)} />}
+      {pendingDelKey && (
+        <ConfirmModal
+          title="Remove gateway key"
+          message={`Delete "${pendingDelKey.label}"? Any client using this key stops working immediately.`}
+          confirmLabel="Remove"
+          busy={busy === `rmkey${pendingDelKey.i}`}
+          onCancel={() => setPendingDelKey(null)}
+          onConfirm={() => {
+            const i = pendingDelKey.i;
+            void run(`rmkey${i}`, () => adminApi.removeServerKey(i)).then(() => setPendingDelKey(null));
+          }}
+        />
+      )}
+      {pickerOpen && (
+        <ModelPicker
+          title="Allowed models"
+          note="Pick the models this key may call. None = all."
+          groups={groups}
+          selected={scopeModels}
+          onToggle={(v) => setScopeModels((s) => s.includes(v) ? s.filter((x) => x !== v) : [...s, v])}
+          onClose={() => setPickerOpen(false)}
+          showThinkingHint={false}
+        />
+      )}
     </div>
   );
 }
@@ -248,17 +456,39 @@ function HeadroomCard({
   const [url, setUrl] = useState(h.url);
   const [localBusy, setLocalBusy] = useState("");
   const [msg, setMsg] = useState("");
+  const [check, setCheck] = useState<{ ok: boolean; text: string } | null>(null);
   useEffect(() => setUrl(h.url), [h.url]);
 
   async function act(label: string, fn: () => Promise<{ ok: boolean; error?: string }>) {
     setLocalBusy(label);
     setMsg("");
+    setCheck(null);
     const r = await fn();
     setLocalBusy("");
     if (!r.ok) setMsg(r.error ?? "action failed");
     await refresh();
   }
 
+  // Live re-probe: ask the gateway whether the proxy at the configured URL
+  // actually answers right now, and surface the result inline.
+  async function checkProxy() {
+    setLocalBusy("check");
+    setMsg("");
+    setCheck(null);
+    const r = await adminApi.headroomStatus();
+    setLocalBusy("");
+    await refresh();
+    if (!r.ok || !r.data) {
+      setCheck({ ok: false, text: r.error ?? "could not reach the gateway" });
+      return;
+    }
+    setCheck(
+      r.data.running
+        ? { ok: true, text: `proxy is up at ${r.data.url}` }
+        : { ok: false, text: `no proxy responding at ${r.data.url}` },
+    );
+  }
+
   return (
     <RichCard className="lg:col-span-2" header={<CardTitle title="Headroom" sub="external context-compression proxy" />}>
       <div className="space-y-4">
@@ -312,6 +542,9 @@ function HeadroomCard({
           >
             <Icon name="stop" size={16} /> Stop
           </Button>
+          <Button variant="ghost" disabled={localBusy === "check"} onClick={checkProxy}>
+            <Icon name="sync" size={16} /> {localBusy === "check" ? "Checking…" : "Check"}
+          </Button>
           {hr && !hr.installed && (
             <span className="text-[11px] text-text-subtle">
               Headroom isn’t installed. Get it from{" "}
@@ -329,6 +562,11 @@ function HeadroomCard({
         </div>
 
         {msg && <p className="text-[12px] text-danger">{msg}</p>}
+        {check && (
+          <p className={`flex items-center gap-1 text-[12px] ${check.ok ? "text-success" : "text-danger"}`}>
+            <Icon name={check.ok ? "check_circle" : "error"} size={14} /> {check.text}
+          </p>
+        )}
       </div>
     </RichCard>
   );