aigetwey 1.2.0 → 1.3.2

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>
   );
 }

package/dashboard/src/components/LogTable.tsx

@@ -18,12 +18,25 @@ const FILTERS: { key: StatusFilter; label: string }[] = [
 // shared control style for the filter row — bordered surface chip, accent on focus.
 const ctrl = "h-9 rounded-brand border border-border bg-surface-2 px-2.5 text-[12.5px] text-text focus:border-accent focus:outline-none";
 
+// recency presets for the request log (a live 200-row buffer, so relative
+// windows fit better than absolute dates). null = no time filter.
+const SINCE_PRESETS: { label: string; ms: number | null }[] = [
+  { label: "1h", ms: 3600_000 },
+  { label: "6h", ms: 6 * 3600_000 },
+  { label: "24h", ms: 24 * 3600_000 },
+  { label: "7d", ms: 7 * 86400_000 },
+  { label: "All", ms: null },
+];
+const sincePill = (active: boolean): string =>
+  `rounded-full px-2.5 py-1 text-[12px] font-medium transition-colors ${
+    active ? "bg-accent/15 text-accent" : "text-text-muted hover:text-text"
+  }`;
+
 export function LogTable({ logs: initial }: { logs: UsageLog[] }) {
   const [logs, setLogs] = useState(initial);
   const [filter, setFilter] = useState<StatusFilter>("all");
   const [provFilter, setProvFilter] = useState<string>("all");
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
+  const [sinceMs, setSinceMs] = useState<number | null>(null);
   const [live, setLive] = useState(true);
   const [collapsed, setCollapsed] = useState(false);
   const [expandedIdx, setExpandedIdx] = useState<number | null>(null);
@@ -52,20 +65,18 @@ export function LogTable({ logs: initial }: { logs: UsageLog[] }) {
   const okCount = logs.filter((l) => l.status >= 200 && l.status < 300).length;
   const errCount = logs.length - okCount;
 
-  const startMs = startDate ? new Date(`${startDate}T00:00:00`).getTime() : null;
-  const endMs = endDate ? new Date(`${endDate}T23:59:59.999`).getTime() : null;
+  const sinceFloor = sinceMs !== null ? Date.now() - sinceMs : null;
 
   const shown = logs.filter((l) => {
     if (filter === "ok" && !(l.status >= 200 && l.status < 300)) return false;
     if (filter === "error" && l.status >= 200 && l.status < 300) return false;
     if (provFilter !== "all" && l.provider !== provFilter) return false;
-    if (startMs !== null && l.ts < startMs) return false;
-    if (endMs !== null && l.ts > endMs) return false;
+    if (sinceFloor !== null && l.ts < sinceFloor) return false;
     return true;
   });
 
-  const hasFilters = filter !== "all" || provFilter !== "all" || startDate !== "" || endDate !== "";
-  const clearFilters = () => { setFilter("all"); setProvFilter("all"); setStartDate(""); setEndDate(""); };
+  const hasFilters = filter !== "all" || provFilter !== "all" || sinceMs !== null;
+  const clearFilters = () => { setFilter("all"); setProvFilter("all"); setSinceMs(null); };
 
   const count = (k: StatusFilter) => (k === "all" ? logs.length : k === "ok" ? okCount : errCount);
 
@@ -123,23 +134,19 @@ export function LogTable({ logs: initial }: { logs: UsageLog[] }) {
                 ))}
               </select>
             </FilterField>
-            <FilterField label="Start date">
-              <input
-                type="date"
-                value={startDate}
-                max={endDate || undefined}
-                onChange={(e) => setStartDate(e.target.value)}
-                className={ctrl + " [color-scheme:dark]"}
-              />
-            </FilterField>
-            <FilterField label="End date">
-              <input
-                type="date"
-                value={endDate}
-                min={startDate || undefined}
-                onChange={(e) => setEndDate(e.target.value)}
-                className={ctrl + " [color-scheme:dark]"}
-              />
+            <FilterField label="Since">
+              <div className="flex h-9 items-center gap-0.5 rounded-brand border border-border bg-surface-2 px-1">
+                {SINCE_PRESETS.map((p) => (
+                  <button
+                    key={p.label}
+                    type="button"
+                    onClick={() => setSinceMs(p.ms)}
+                    className={sincePill(sinceMs === p.ms)}
+                  >
+                    {p.label}
+                  </button>
+                ))}
+              </div>
             </FilterField>
             <button
               onClick={clearFilters}
@@ -188,7 +195,7 @@ export function LogTable({ logs: initial }: { logs: UsageLog[] }) {
                           {l.status}
                         </Badge>
                       </Td>
-                      <Td muted title={fmt.time(l.ts)}>
+                      <Td muted title={fmt.time(l.ts)} suppressHydrationWarning>
                         {fmt.ago(l.ts)} ago
                       </Td>
                       <Td className="text-text">{l.alias}</Td>
@@ -229,16 +236,19 @@ function Td({
   right,
   title,
   className,
+  suppressHydrationWarning,
 }: {
   children: React.ReactNode;
   muted?: boolean;
   right?: boolean;
   title?: string;
   className?: string;
+  suppressHydrationWarning?: boolean;
 }) {
   return (
     <td
       title={title}
+      suppressHydrationWarning={suppressHydrationWarning}
       className={`whitespace-nowrap px-4 py-2.5 tnum text-[12.5px] ${right ? "text-right" : "text-left"} ${
         muted ? "text-text-muted" : "text-text"
       }${className ? ` ${className}` : ""}`}

package/dashboard/src/components/ProviderManager.tsx

@@ -8,13 +8,12 @@ import { Badge, FormatBadge } from "@/components/Badge";
 import { CooldownTimer } from "@/components/CooldownTimer";
 import { Button, Input, Field } from "@/components/Button";
 import { Icon } from "@/components/Icon";
-import { fmt, Empty } from "@/components/ui";
-import type { MaskedConfig, PingResult, ProviderSnapshot, QuotaSnapshot, WireFormat } from "@/lib/gateway";
+import { Empty } from "@/components/ui";
+import type { MaskedConfig, PingResult, ProviderSnapshot, WireFormat } from "@/lib/gateway";
 
 interface Loaded {
   config: MaskedConfig;
   health: ProviderSnapshot[];
-  quota: QuotaSnapshot[];
 }
 
 export function ProviderManager() {
@@ -23,10 +22,9 @@ export function ProviderManager() {
   const [adding, setAdding] = useState(false);
 
   const reload = useCallback(async () => {
-    const [cfg, prov, q] = await Promise.all([
+    const [cfg, prov] = await Promise.all([
       fetch("/api/gw/admin/config"),
       adminApi.providers(),
-      adminApi.quota(),
     ]);
     if (!cfg.ok || !prov.ok) {
       setError("could not reach the gateway");
@@ -36,7 +34,6 @@ export function ProviderManager() {
     setData({
       config: (await cfg.json()) as MaskedConfig,
       health: prov.data?.providers ?? [],
-      quota: q.data?.quota ?? [],
     });
   }, []);
 
@@ -48,7 +45,6 @@ export function ProviderManager() {
   if (!data) return <Empty>Loading…</Empty>;
 
   const healthById = new Map(data.health.map((h) => [h.id, h]));
-  const quotaById = new Map(data.quota.map((q) => [q.provider, q]));
 
   return (
     <div>
@@ -78,7 +74,6 @@ export function ProviderManager() {
             const health = healthById.get(p.id);
             const healthy = health ? health.keys.some((k) => k.healthy) : true;
             const cooling = health?.keys.find((k) => !k.healthy && k.cooldown_ms > 0);
-            const q = quotaById.get(p.id);
             return (
               <Link
                 key={p.id}
@@ -110,26 +105,6 @@ export function ProviderManager() {
                   <Badge tone="neutral">{p.models.length} models</Badge>
                   {cooling && <CooldownTimer ms={cooling.cooldown_ms} />}
                 </div>
-                {q && (
-                  <div className="mt-3 border-t border-border-subtle pt-2.5">
-                    <div className="flex items-center justify-between text-[11px] text-text-subtle">
-                      <span>quota · {q.window}</span>
-                      <CooldownTimer ms={q.reset_in_ms} tone="muted" icon="restart_alt" keepZero />
-                    </div>
-                    {q.limit_tokens && (
-                      <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-surface-2">
-                        <div
-                          className={`h-full ${q.exhausted ? "bg-danger" : "bg-accent"}`}
-                          style={{ width: `${Math.round((q.pct ?? 0) * 100)}%` }}
-                        />
-                      </div>
-                    )}
-                    <div className="mt-1 tnum text-[11px] text-text-muted">
-                      {fmt.compact(q.consumed)}
-                      {q.limit_tokens ? ` / ${fmt.compact(q.limit_tokens)}` : ""} tokens
-                    </div>
-                  </div>
-                )}
               </Link>
             );
           })}

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: "Budget Tracker", icon: "data_usage" },
+  { href: "/quota", label: "Budgets", icon: "data_usage" },
   { href: "/tools", label: "CLI Tools", icon: "terminal" },
 ];
 

package/dashboard/src/components/RoutingView.tsx

@@ -239,6 +239,10 @@ function RouteForm({ providers, onDone, initial, onCancel }: { providers: Provid
       price_in: priceIn ? Number(priceIn) : undefined,
       price_out: priceOut ? Number(priceOut) : undefined,
     });
+    // rename: the new alias is saved above; drop the old one so it doesn't linger.
+    if (r.ok && isEdit && initial!.alias !== alias) {
+      await adminApi.removeRoute(initial!.alias);
+    }
     setBusy(false);
     if (r.ok) onDone();
     else setErr(r.error ?? "failed");
@@ -247,8 +251,8 @@ function RouteForm({ providers, onDone, initial, onCancel }: { providers: Provid
   return (
     <form onSubmit={submit} className="mb-5 rounded-brand-lg border border-border bg-surface p-4 shadow-soft">
       <div className="grid gap-3 sm:grid-cols-2">
-        <Field label="Name" hint="the model name your CLI calls">
-          <Input value={alias} onChange={(e) => setAlias(e.target.value)} placeholder="claude-sonnet-4-6" readOnly={isEdit} className={isEdit ? "opacity-60" : ""} />
+        <Field label="Alias" hint="the name your CLI requests as a model">
+          <Input value={alias} onChange={(e) => setAlias(e.target.value)} placeholder="my-claude" />
         </Field>
         <Field label="Strategy" hint="how the chain is tried">
           <Select value={strategy} onChange={(e) => setStrategy(e.target.value as "fallback" | "round-robin")}>

package/dashboard/src/components/TopBar.tsx

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

package/dashboard/src/components/ui.tsx

@@ -16,6 +16,11 @@ export const fmt = {
   time(ts: number): string {
     return new Date(ts).toLocaleString("en-US", { hour12: false });
   },
+  /** DD/MM/YYYY (local) */
+  date(ts: number): string {
+    const d = new Date(ts);
+    return `${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}/${d.getFullYear()}`;
+  },
   /** "3m", "2h", "5d" — coarse relative age */
   ago(ts: number): string {
     const s = Math.max(0, Math.round((Date.now() - ts) / 1000));
@@ -24,7 +29,7 @@ export const fmt = {
     if (s < 86400) return `${Math.floor(s / 3600)}h`;
     return `${Math.floor(s / 86400)}d`;
   },
-  /** ms duration -> "Xs", "Xm Ys", "Xh Ym" for quota/cooldown countdowns */
+  /** ms duration -> "Xs", "Xm Ys", "Xh Ym" for budget/cooldown countdowns */
   duration(ms: number): string {
     const s = Math.max(0, Math.round(ms / 1000));
     if (s < 60) return `${s}s`;