aigetwey 1.1.0 → 1.3.0

package/dashboard/src/components/LogTable.tsx

@@ -15,11 +15,30 @@ const FILTERS: { key: StatusFilter; label: string }[] = [
   { key: "error", label: "Errors" },
 ];
 
+// 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 [sinceMs, setSinceMs] = useState<number | null>(null);
   const [live, setLive] = useState(true);
+  const [collapsed, setCollapsed] = useState(false);
   const [expandedIdx, setExpandedIdx] = useState<number | null>(null);
   const timer = useRef<ReturnType<typeof setInterval> | null>(null);
 
@@ -46,45 +65,49 @@ 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 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 (sinceFloor !== null && l.ts < sinceFloor) return false;
     return true;
   });
 
+  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);
 
   return (
     <div className="overflow-hidden rounded-brand-lg border border-border bg-surface shadow-soft">
-      <header className="flex flex-wrap items-center justify-between gap-3 border-b border-border-subtle px-4 py-3">
-        <div className="flex items-center gap-1">
-          {FILTERS.map((f) => (
+      <header className="flex flex-col gap-3 border-b border-border-subtle px-4 py-3">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-1.5">
             <button
-              key={f.key}
-              onClick={() => setFilter(f.key)}
-              className={`flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[12px] font-medium transition-colors ${
-                filter === f.key ? "bg-surface-2 text-text" : "text-text-muted hover:text-text"
-              }`}
+              onClick={() => setCollapsed((v) => !v)}
+              className="flex-none rounded p-0.5 text-text-subtle transition-colors hover:text-text"
+              aria-label={collapsed ? "Expand requests" : "Collapse requests"}
+              title={collapsed ? "Expand" : "Collapse"}
             >
-              {f.label}
-              <span className="tnum text-text-subtle">{count(f.key)}</span>
+              <Icon name={collapsed ? "chevron_right" : "expand_more"} size={18} />
             </button>
-          ))}
-        </div>
-        <div className="flex items-center gap-2">
-          {providers.length > 1 && (
-            <select
-              value={provFilter}
-              onChange={(e) => setProvFilter(e.target.value)}
-              className="rounded border border-border-subtle bg-transparent px-2 py-1 text-[11px] text-text-muted focus:border-accent focus:outline-none"
-            >
-              <option value="all">All providers</option>
-              {providers.map((p) => (
-                <option key={p} value={p}>{p}</option>
+            <div className="flex items-center gap-1">
+              {FILTERS.map((f) => (
+                <button
+                  key={f.key}
+                  onClick={() => setFilter(f.key)}
+                  className={`flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[12px] font-medium transition-colors ${
+                    filter === f.key ? "bg-surface-2 text-text" : "text-text-muted hover:text-text"
+                  }`}
+                >
+                  {f.label}
+                  <span className="tnum text-text-subtle">{count(f.key)}</span>
+                </button>
               ))}
-            </select>
-          )}
+            </div>
+          </div>
           <button
             onClick={() => setLive((v) => !v)}
             className={`flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors ${
@@ -96,9 +119,49 @@ export function LogTable({ logs: initial }: { logs: UsageLog[] }) {
             Live
           </button>
         </div>
+
+        {!collapsed && (
+          <div className="flex flex-wrap items-end gap-2.5">
+            <FilterField label="Provider">
+              <select
+                value={provFilter}
+                onChange={(e) => setProvFilter(e.target.value)}
+                className={ctrl + " w-40"}
+              >
+                <option value="all">All providers</option>
+                {providers.map((p) => (
+                  <option key={p} value={p}>{p}</option>
+                ))}
+              </select>
+            </FilterField>
+            <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}
+              disabled={!hasFilters}
+              className="flex h-9 items-center gap-1.5 rounded-brand border border-border bg-surface-2 px-3 text-[12.5px] font-medium text-text-muted transition-colors hover:border-text-subtle hover:text-text disabled:opacity-40 disabled:hover:border-border disabled:hover:text-text-muted"
+              title={hasFilters ? "Reset all filters" : "No filters applied"}
+            >
+              <Icon name="filter_alt_off" size={15} />
+              Clear
+            </button>
+          </div>
+        )}
       </header>
 
-      {shown.length === 0 ? (
+      {collapsed ? null : shown.length === 0 ? (
         <div className="px-4 py-8 text-center text-[13px] text-text-muted">
           {logs.length === 0 ? "No requests recorded yet." : "No requests match this filter."}
         </div>
@@ -158,6 +221,15 @@ export function LogTable({ logs: initial }: { logs: UsageLog[] }) {
   );
 }
 
+function FilterField({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <label className="flex flex-col gap-1">
+      <span className="text-[10px] font-medium uppercase tracking-wider text-text-subtle">{label}</span>
+      {children}
+    </label>
+  );
+}
+
 function Td({
   children,
   muted,

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

@@ -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,16 +74,19 @@ 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}
                 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 +96,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">
@@ -106,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>
             );
           })}
@@ -135,6 +114,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/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: "Budgets", 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)}
@@ -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/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: "Budgets",
   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/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`;