aigetwey 1.1.0 → 1.2.0

package/dashboard/src/components/ModelPicker.tsx

@@ -17,17 +17,23 @@ export interface ModelGroup {
 export function ModelPicker({
   title = "Add models",
   note = "Click to add, click again to remove.",
+  searchPlaceholder = "Search models…",
   groups,
   selected,
   onToggle,
   onClose,
+  showThinkingHint = true,
 }: {
   title?: string;
   note?: string;
+  searchPlaceholder?: string;
   groups: ModelGroup[];
   selected: string[];
   onToggle: (value: string) => void;
   onClose: () => void;
+  /** The "reasoning models accept a thinking suffix" footer only makes sense when
+   *  picking MODELS. Provider/key pickers reuse this component, so they hide it. */
+  showThinkingHint?: boolean;
 }) {
   const [q, setQ] = useState("");
   const needle = q.trim().toLowerCase();
@@ -60,7 +66,7 @@ export function ModelPicker({
               autoFocus
               value={q}
               onChange={(e) => setQ(e.target.value)}
-              placeholder="Search models…"
+              placeholder={searchPlaceholder}
               className="w-full rounded-brand border border-border bg-bg py-2 pl-8 pr-3 text-[13px] text-text placeholder:text-text-subtle focus:border-accent focus:outline-none"
             />
           </div>
@@ -102,12 +108,14 @@ export function ModelPicker({
           )}
         </div>
 
-        <div className="border-t border-border-subtle px-4 py-2 text-[11px] text-text-subtle">
-          <Icon name="neurology" size={12} className="mr-1 inline align-text-bottom text-warning" />
-          Reasoning models accept a thinking suffix — call{" "}
-          <code className="rounded bg-surface-2 px-1 text-text-muted">model(high)</code> or{" "}
-          <code className="rounded bg-surface-2 px-1 text-text-muted">model(none)</code> (high·low·medium·minimal·auto·none·or a token budget).
-        </div>
+        {showThinkingHint && (
+          <div className="border-t border-border-subtle px-4 py-2 text-[11px] text-text-subtle">
+            <Icon name="neurology" size={12} className="mr-1 inline align-text-bottom text-warning" />
+            Reasoning models accept a thinking suffix — call{" "}
+            <code className="rounded bg-surface-2 px-1 text-text-muted">model(high)</code> or{" "}
+            <code className="rounded bg-surface-2 px-1 text-text-muted">model(none)</code> (high·low·medium·minimal·auto·none·or a token budget).
+          </div>
+        )}
 
         <div className="flex items-center justify-between border-t border-border-subtle px-4 py-3">
           <span className="tnum text-[12px] text-text-subtle">{selected.length} selected</span>

package/dashboard/src/components/ProviderDetail.tsx

@@ -120,7 +120,7 @@ export function ProviderDetail({ id }: { id: string }) {
       </button>
 
       <div className="mb-6 flex items-center gap-3">
-        <Lamp state={health?.keys.some((k) => k.healthy) ?? true ? "live" : "down"} />
+        <Lamp state={provider.disabled ? "idle" : (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>}
@@ -128,24 +128,12 @@ export function ProviderDetail({ id }: { id: string }) {
         <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>
+        {/* enable/disable lives on the Providers list (one place); here we just
+            flag the state. Disabled = red badge + the content below fades. */}
+        {provider.disabled && <Badge tone="down">disabled</Badge>}
       </div>
 
-      <div className="grid gap-4 lg:grid-cols-2">
+      <div className={`grid gap-4 lg:grid-cols-2 transition-opacity ${provider.disabled ? "opacity-50" : ""}`}>
         <RichCard header={<CardTitle title="Connection" />}>
           {editingConn ? (
             <div className="space-y-3">
@@ -250,21 +238,31 @@ export function ProviderDetail({ id }: { id: string }) {
                   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"}`} />
+                  <span className={`absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white transition-transform ${provider.strategy === "round-robin" ? "translate-x-[18px]" : "translate-x-0"}`} />
                 </button>
                 {provider.strategy === "round-robin" && (
-                  <div className="flex items-center gap-1">
+                  <div className="flex items-center gap-1.5">
                     <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 className="flex items-center rounded-brand border border-border-subtle">
+                      <button
+                        type="button"
+                        disabled={(provider.sticky ?? 1) <= 1}
+                        onClick={() => void adminApi.setProviderStrategy(id, "round-robin", Math.max(1, (provider.sticky ?? 1) - 1)).then(() => reload())}
+                        className="px-1.5 py-0.5 text-text-subtle transition-colors hover:text-text disabled:opacity-30"
+                        aria-label="Decrease sticky"
+                      >
+                        <Icon name="remove" size={13} />
+                      </button>
+                      <span className="tnum w-6 text-center text-[11px] text-text">{provider.sticky ?? 1}</span>
+                      <button
+                        type="button"
+                        onClick={() => void adminApi.setProviderStrategy(id, "round-robin", (provider.sticky ?? 1) + 1).then(() => reload())}
+                        className="px-1.5 py-0.5 text-text-subtle transition-colors hover:text-text"
+                        aria-label="Increase sticky"
+                      >
+                        <Icon name="add" size={13} />
+                      </button>
+                    </div>
                   </div>
                 )}
               </div>

package/dashboard/src/components/ProviderManager.tsx

@@ -83,11 +83,15 @@ export function ProviderManager() {
               <Link
                 key={p.id}
                 href={`/providers/${encodeURIComponent(p.id)}`}
-                className="group rounded-brand-lg border border-border bg-surface p-4 shadow-soft transition-colors hover:border-text-subtle"
+                className={`group rounded-brand-lg border bg-surface p-4 shadow-soft transition-colors ${
+                  p.disabled
+                    ? "border-danger/35 opacity-60 hover:opacity-100 hover:border-danger/60"
+                    : "border-border hover:border-text-subtle"
+                }`}
               >
                 <div className="flex items-start justify-between gap-2">
                   <div className="flex items-center gap-2 min-w-0">
-                    <Lamp state={healthy ? "live" : "down"} />
+                    <Lamp state={p.disabled ? "idle" : healthy ? "live" : "down"} />
                     <div className="min-w-0">
                       <span className="block truncate text-[14px] font-semibold text-text">{p.name || p.id}</span>
                       {p.name && <span className="block truncate text-[11px] text-text-subtle">{p.id}/</span>}
@@ -97,7 +101,7 @@ export function ProviderManager() {
                 </div>
                 <div className="mt-2 truncate text-[12px] text-text-subtle">{p.base_url}</div>
                 <div className="mt-3 flex flex-wrap items-center gap-2">
-                  {p.disabled && <Badge tone="warn">disabled</Badge>}
+                  <ProviderToggle id={p.id} disabled={!!p.disabled} onDone={reload} />
                   {p.free && <Badge tone="info">free</Badge>}
                   {p.service_account && <Badge tone="info">service-account</Badge>}
                   <Badge tone="neutral">
@@ -135,6 +139,35 @@ export function ProviderManager() {
   );
 }
 
+/**
+ * Inline enable/disable switch shown on each provider card. The card is a <Link>,
+ * so the button swallows the click (preventDefault + stopPropagation) to toggle in
+ * place instead of navigating into the provider. `busy` ignores double-clicks.
+ */
+function ProviderToggle({ id, disabled, onDone }: { id: string; disabled: boolean; onDone: () => void }) {
+  const [busy, setBusy] = useState(false);
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (busy) return;
+        setBusy(true);
+        void adminApi.setProviderDisabled(id, !disabled).then(() => onDone()).finally(() => setBusy(false));
+      }}
+      className={`inline-flex items-center gap-1.5 text-[11px] font-medium ${disabled ? "text-danger" : "text-text-muted"}`}
+      aria-label={disabled ? "Enable provider" : "Disable provider"}
+      title={disabled ? "Provider disabled — click to enable" : "Provider enabled — click to disable"}
+    >
+      <span className={`relative h-4 w-7 rounded-full transition-colors ${disabled ? "bg-danger" : "bg-accent"} ${busy ? "opacity-60" : ""}`}>
+        <span className={`absolute left-0.5 top-0.5 h-3 w-3 rounded-full bg-white transition-transform ${disabled ? "translate-x-0" : "translate-x-[14px]"}`} />
+      </span>
+      {disabled ? "disabled" : "enabled"}
+    </button>
+  );
+}
+
 // Provider presets — pick a type first, which prefills Base URL + API Type, then
 // you only fill Name + Key. Matches aigetwey's per-type forms but friendlier; the
 // fields below are still aigetwey's (Name, API Type, Base URL, Key + Check, Model

package/dashboard/src/components/QuotaView.tsx

@@ -6,29 +6,27 @@ import { Badge } from "@/components/Badge";
 import { RichCard, CardTitle } from "@/components/RichCard";
 import { CooldownTimer } from "@/components/CooldownTimer";
 import { fmt, Empty } from "@/components/ui";
-import { BudgetEditor } from "@/components/BudgetEditor";
+import { BudgetForm } from "@/components/BudgetForm";
+import { Button } from "@/components/Button";
+import { Icon } from "@/components/Icon";
 import type { QuotaSnapshot, BudgetStatus } from "@/lib/gateway";
 
 /**
- * Quota Tracker  — the per-provider token budgets that were only
- * visible as a strip on each provider card, now their own page: consumption vs
- * limit, a fill bar, and a live countdown to the next scheduled window reset.
- *
- * Also renders the global budget card (if configured) above the provider grid.
+ * Budget Tracker — scoped spend budgets (global / per-provider / per-model /
+ * per-key) with an Add / Edit / Remove flow, shown above the per-provider token
+ * quota grid (the older hard token cap that drives each provider card's reset
+ * countdown): consumption vs limit, a fill bar, and a live reset countdown.
  */
 export function QuotaView() {
   const [quota, setQuota] = useState<QuotaSnapshot[] | null>(null);
-  const [budget, setBudget] = useState<BudgetStatus | null>(null);
-  const [editing, setEditing] = useState(false);
+  const [budgets, setBudgets] = useState<BudgetStatus[]>([]);
+  const [form, setForm] = useState<{ open: boolean; initial: BudgetStatus | null }>({ open: false, initial: null });
   const [error, setError] = useState("");
 
   const refresh = () =>
     void adminApi.quota().then((r) => {
       if (!r.ok) setError(r.error ?? "could not reach the gateway");
-      else {
-        setQuota(r.data?.quota ?? []);
-        setBudget(r.data?.budget ?? null);
-      }
+      else { setQuota(r.data?.quota ?? []); setBudgets(r.data?.budgets ?? []); }
     });
 
   useEffect(() => { refresh(); }, []);
@@ -39,81 +37,96 @@ export function QuotaView() {
   return (
     <div>
       <div className="mb-6">
-        <h1 className="text-[22px] font-semibold tracking-tight text-text">Quota Tracker</h1>
+        <h1 className="text-[22px] font-semibold tracking-tight text-text">Budget Tracker</h1>
         <p className="mt-1 text-[13px] text-text-muted">
-          Per-provider token budgets and when each window resets.
+          Spend caps (USD or tokens) and per-provider token quotas, with live reset countdowns.
         </p>
       </div>
 
-      {/* ── Global budget card ── */}
-      <div className="mb-4">
-        <RichCard
-          header={
-            <>
-              <CardTitle title="Global budget" sub={budget ? `window · ${budget.window}` : "not set"} />
-              {budget ? (
-                <Badge tone={budget.exhausted ? "down" : budget.alert ? "warn" : "live"}>
-                  {budget.exhausted ? "exhausted" : budget.alert ? "alert" : "active"}
-                </Badge>
-              ) : null}
-            </>
-          }
-        >
-          {editing ? (
-            <BudgetEditor
-              initial={budget}
-              onSaved={() => { setEditing(false); refresh(); }}
-              onCancel={() => setEditing(false)}
-            />
-          ) : budget ? (
-            <div className="space-y-2.5">
-              <div className="h-1.5 overflow-hidden rounded-full bg-surface-2">
-                <div
-                  className={`h-full rounded-full transition-all ${budget.exhausted ? "bg-danger" : budget.alert ? "bg-warning" : "bg-accent"}`}
-                  style={{ width: `${Math.min(100, Math.round(budget.pct * 100))}%` }}
-                />
-              </div>
-              <div className="flex items-center justify-between text-[12px]">
-                <span className="tnum text-text-muted">
-                  {budget.unit === "usd"
-                    ? `$${budget.spent.toFixed(2)} / $${budget.limit.toFixed(2)}`
-                    : `${fmt.compact(budget.spent)} / ${fmt.compact(budget.limit)} tokens`}
-                  {budget.est_converse != null
-                    ? budget.unit === "usd"
-                      ? ` · ~${fmt.compact(budget.est_converse)} tok`
-                      : ` · ~$${budget.est_converse.toFixed(2)}`
-                    : " · —"}
-                </span>
-                <CooldownTimer ms={budget.reset_in_ms} tone="muted" icon="restart_alt" keepZero />
-              </div>
-              <div className="flex items-center gap-3">
-                <button type="button" onClick={() => setEditing(true)} className="text-[12px] text-accent hover:underline">
-                  Edit
-                </button>
-                <button
-                  type="button"
-                  onClick={async () => { const r = await adminApi.clearBudget(); if (!r.ok) setError(r.error ?? "could not clear budget"); refresh(); }}
-                  className="text-[12px] text-text-muted hover:text-danger"
-                >
-                  Clear
-                </button>
-              </div>
-            </div>
-          ) : (
-            <button type="button" onClick={() => setEditing(true)} className="text-[13px] text-accent hover:underline">
-              Set a budget
-            </button>
+      {/* ── Budgets ── */}
+      <div className="mb-6">
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="text-[15px] font-semibold text-text">Budgets</h2>
+          {!form.open && (
+            <Button onClick={() => setForm({ open: true, initial: null })}>
+              <Icon name="add" size={16} /> Add budget
+            </Button>
           )}
-        </RichCard>
+        </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.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.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>
 
-      {/* ── Per-provider quota grid ── */}
-      {quota.length === 0 ? (
-        <Empty>
-          No quotas configured. Add a <span className="tnum">quota</span> block to a provider in Settings.
-        </Empty>
-      ) : (
-        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      {/* ── Per-provider quota grid — only shown once a provider actually has a
+          `quota:` cap configured; superseded by per-provider token budgets, so we
+          don't advertise it with an empty state. ── */}
+      {quota.length > 0 && (
+        <>
+          <div className="mb-3 flex items-baseline justify-between gap-3">
+            <h2 className="text-[15px] font-semibold text-text">Provider quotas</h2>
+            <span className="text-[12px] text-text-subtle">hard token cap per provider, per window</span>
+          </div>
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
           {quota.map((q) => (
             <RichCard
               key={q.provider}
@@ -145,7 +158,8 @@ export function QuotaView() {
               </div>
             </RichCard>
           ))}
-        </div>
+          </div>
+        </>
       )}
     </div>
   );

package/dashboard/src/components/Rail.tsx

@@ -14,7 +14,7 @@ const MAIN: NavItem[] = [
   { href: "/providers", label: "Providers", icon: "dns" },
   { href: "/combos", label: "Combos", icon: "layers" },
   { href: "/usage", label: "Usage", icon: "bar_chart" },
-  { href: "/quota", label: "Quota Tracker", icon: "data_usage" },
+  { href: "/quota", label: "Budget Tracker", icon: "data_usage" },
   { href: "/tools", label: "CLI Tools", icon: "terminal" },
 ];
 

package/dashboard/src/components/RoutingView.tsx

@@ -91,14 +91,14 @@ export function RoutingView() {
 
       {adding && (
         <RouteForm
-          providers={config.providers}
+          providers={config.providers.filter((p) => !p.disabled)}
           onDone={() => { setAdding(false); void reload(); }}
         />
       )}
 
       {editing && !adding && (
         <RouteForm
-          providers={config.providers}
+          providers={config.providers.filter((p) => !p.disabled)}
           initial={editing}
           onDone={() => { setEditing(null); void reload(); }}
           onCancel={() => setEditing(null)}

package/dashboard/src/components/ToolDetail.tsx

@@ -111,13 +111,15 @@ export function ToolDetail({ id }: { id: string }) {
         const cfg = (await cfgRes.json()) as MaskedConfig;
         const aliases = cfg.models.map((m) => m.alias);
         setCombos(aliases);
-        // everything callable: combo aliases + every provider/model ref.
-        const refs = cfg.providers.flatMap((p) => p.models.map((m) => `${p.id}/${m.id}`));
+        // disabled providers are skipped in routing, so hide their models here.
+        const liveProviders = cfg.providers.filter((p) => !p.disabled);
+        // everything callable: combo aliases + every (enabled) provider/model ref.
+        const refs = liveProviders.flatMap((p) => p.models.map((m) => `${p.id}/${m.id}`));
         setAllModels([...aliases, ...refs]);
         // grouped for the picker: Combos first, then one group per provider.
         const grps: ModelGroup[] = [];
         if (aliases.length) grps.push({ label: "Combos", items: aliases.map((a) => ({ value: a, label: a })) });
-        for (const p of cfg.providers) {
+        for (const p of liveProviders) {
           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);

package/dashboard/src/components/TopBar.tsx

@@ -13,7 +13,7 @@ const LABELS: Record<string, string> = {
   providers: "Providers",
   combos: "Combos",
   usage: "Usage",
-  quota: "Quota Tracker",
+  quota: "Budget Tracker",
   tools: "CLI Tools",
   console: "Server Console",
   config: "Settings",

package/dashboard/src/components/UsageView.tsx

@@ -6,15 +6,34 @@ import { Stat, fmt, Empty } from "@/components/ui";
 import { RichCard } from "@/components/RichCard";
 import type { UsageSummary } from "@/lib/gateway";
 
-type Window = { label: string; ms: number; bucketMs: number };
+type Window = { label: string; key: "today" | "24h" | "7d" | "30d" | "60d"; bucketMs: number };
 
-// window -> (lookback, chart bucket size). Buckets keep ~24-48 points per range.
+// window -> chart bucket size. Buckets keep ~24-60 points per range.
 const WINDOWS: Window[] = [
-  { label: "24h", ms: 24 * 3600_000, bucketMs: 3600_000 },
-  { label: "7d", ms: 7 * 86400_000, bucketMs: 6 * 3600_000 },
-  { label: "30d", ms: 30 * 86400_000, bucketMs: 86400_000 },
+  { label: "Today", key: "today", bucketMs: 3600_000 },
+  { label: "24h", key: "24h", bucketMs: 3600_000 },
+  { label: "7D", key: "7d", bucketMs: 6 * 3600_000 },
+  { label: "30D", key: "30d", bucketMs: 86400_000 },
+  { label: "60D", key: "60d", bucketMs: 2 * 86400_000 },
 ];
 
+/** Lookback start (ms epoch) for a window. "Today" is since local midnight; the
+ *  rest are rolling lookbacks from now. */
+function sinceFor(key: Window["key"]): number {
+  const now = Date.now();
+  switch (key) {
+    case "today": {
+      const d = new Date();
+      d.setHours(0, 0, 0, 0);
+      return d.getTime();
+    }
+    case "24h": return now - 24 * 3600_000;
+    case "7d": return now - 7 * 86400_000;
+    case "30d": return now - 30 * 86400_000;
+    case "60d": return now - 60 * 86400_000;
+  }
+}
+
 export function UsageView() {
   const [win, setWin] = useState<Window>(WINDOWS[0]!);
   const [summary, setSummary] = useState<UsageSummary | null>(null);
@@ -25,7 +44,7 @@ export function UsageView() {
   const load = useCallback(async (w: Window) => {
     setLoading(true);
     setError("");
-    const since = Date.now() - w.ms;
+    const since = sinceFor(w.key);
     const [sumRes, serRes] = await Promise.all([
       fetch(`/api/gw/admin/usage?since=${since}`),
       fetch(`/api/gw/admin/usage/series?since=${since}&bucket=${w.bucketMs}`),

package/dashboard/src/lib/cliTools.ts

@@ -55,20 +55,6 @@ export const CLI_TOOLS: CliTool[] = [
       "The gateway translates Anthropic ↔ provider format, so any provider works behind it.",
     ],
   },
-  {
-    id: "codex",
-    name: "Codex",
-    icon: "code",
-    format: "openai",
-    blurb: "OpenAI-compatible. Use the /v1 base URL.",
-    install: "npm i -g @openai/codex",
-    slots: [{ label: "Model", alias: "gpt-5" }],
-    env: (base, key) => [
-      { name: "OPENAI_BASE_URL", value: `${base}/v1` },
-      { name: "OPENAI_API_KEY", value: KEY(key) },
-    ],
-    steps: ["Set the base URL to the gateway's /v1 path.", "Create a combo named like the slot above, then use it as the model."],
-  },
   {
     id: "opencode",
     name: "opencode",
@@ -84,35 +70,6 @@ export const CLI_TOOLS: CliTool[] = [
     ],
     steps: ["Add an OpenAI-compatible provider with the gateway /v1 base URL.", "Pick a combo alias as the model."],
   },
-  {
-    id: "cursor",
-    name: "Cursor",
-    icon: "edit_square",
-    format: "openai",
-    blurb: "OpenAI-compatible. Override the base URL in settings.",
-    slots: [{ label: "Model", alias: "gpt-5" }],
-    env: (base, key) => [
-      { name: "Base URL", value: `${base}/v1` },
-      { name: "API Key", value: KEY(key) },
-    ],
-    steps: [
-      "Settings → Models → OpenAI API Key → override base URL with the gateway /v1.",
-      "Add your combo aliases as custom model names.",
-    ],
-  },
-  {
-    id: "cline",
-    name: "Cline",
-    icon: "extension",
-    format: "openai",
-    blurb: "OpenAI-compatible VS Code agent.",
-    slots: [{ label: "Model", alias: "gpt-5" }],
-    env: (base, key) => [
-      { name: "Base URL", value: `${base}/v1` },
-      { name: "API Key", value: KEY(key) },
-    ],
-    steps: ["Choose the OpenAI-compatible provider.", "Set the base URL to the gateway /v1 and use a combo alias."],
-  },
 ];
 
 export function toolById(id: string): CliTool | undefined {

package/dashboard/src/lib/client.ts

@@ -12,6 +12,7 @@ import type {
   EndpointPayload,
   HeadroomStatusReply,
   InjectLevel,
+  ModelsPayload,
   PingResult,
   PricingPayload,
   ProviderSnapshot,
@@ -53,16 +54,21 @@ async function api<T>(method: string, path: string, body?: unknown): Promise<Api
 
 export const adminApi = {
   providers: () => api<{ providers: ProviderSnapshot[] }>("GET", "/admin/providers"),
-  quota: () => api<{ quota: QuotaSnapshot[]; budget: BudgetStatus | null }>("GET", "/admin/quota"),
+  quota: () => api<{ quota: QuotaSnapshot[]; budgets: BudgetStatus[] }>("GET", "/admin/quota"),
+  models: () => api<ModelsPayload>("GET", "/admin/models"),
+  keys: () => api<Array<{ fingerprint: string; name: string; masked: string }>>("GET", "/admin/keys"),
+
   setBudget: (body: {
+    scope: { type: "global" } | { type: "provider"; id: string } | { type: "model"; id: string } | { type: "key"; id: string };
     unit: "usd" | "tokens";
     limit: number;
     window: "5h" | "daily" | "weekly" | "monthly";
     reset_at?: string;
     timezone?: string;
     alert_at?: number;
-  }) => api<ConfigReply>("PUT", "/admin/budget", body),
-  clearBudget: () => api<ConfigReply>("DELETE", "/admin/budget"),
+    note?: string;
+  }) => api<ConfigReply>("PUT", "/admin/budgets", body),
+  clearBudget: (key: string) => api<ConfigReply>("DELETE", `/admin/budgets/${encodeURIComponent(key)}`),
 
   addProvider: (p: {
     id: string;