aigetwey 1.0.1 → 1.2.0

package/dashboard/src/components/LogTable.tsx

@@ -15,11 +15,17 @@ 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";
+
 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 [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 +52,51 @@ 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 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;
     return true;
   });
 
+  const hasFilters = filter !== "all" || provFilter !== "all" || startDate !== "" || endDate !== "";
+  const clearFilters = () => { setFilter("all"); setProvFilter("all"); setStartDate(""); setEndDate(""); };
+
   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 +108,53 @@ 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="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>
+            <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 +214,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

@@ -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,23 +6,30 @@ import { Badge } from "@/components/Badge";
 import { RichCard, CardTitle } from "@/components/RichCard";
 import { CooldownTimer } from "@/components/CooldownTimer";
 import { fmt, Empty } from "@/components/ui";
-import type { QuotaSnapshot } from "@/lib/gateway";
+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.
+ * 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 [budgets, setBudgets] = useState<BudgetStatus[]>([]);
+  const [form, setForm] = useState<{ open: boolean; initial: BudgetStatus | null }>({ open: false, initial: null });
   const [error, setError] = useState("");
 
-  useEffect(() => {
+  const refresh = () =>
     void adminApi.quota().then((r) => {
       if (!r.ok) setError(r.error ?? "could not reach the gateway");
-      else setQuota(r.data?.quota ?? []);
+      else { setQuota(r.data?.quota ?? []); setBudgets(r.data?.budgets ?? []); }
     });
-  }, []);
+
+  useEffect(() => { refresh(); }, []);
 
   if (error) return <Empty>{error}</Empty>;
   if (!quota) return <Empty>Loading…</Empty>;
@@ -30,25 +37,105 @@ 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>
 
-      {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">
+      {/* ── 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>
+          )}
+        </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 — 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}
               header={
                 <>
                   <CardTitle title={q.provider} sub={`window · ${q.window}`} />
-                  <Badge tone={q.exhausted ? "down" : "live"}>{q.exhausted ? "exhausted" : "active"}</Badge>
+                  <Badge tone={q.exhausted ? "down" : q.alert ? "warn" : "live"}>
+                    {q.exhausted ? "exhausted" : q.alert ? "alert" : "active"}
+                  </Badge>
                 </>
               }
             >
@@ -56,7 +143,7 @@ export function QuotaView() {
                 {q.limit_tokens ? (
                   <div className="h-1.5 overflow-hidden rounded-full bg-surface-2">
                     <div
-                      className={`h-full ${q.exhausted ? "bg-danger" : "bg-accent"}`}
+                      className={`h-full rounded-full transition-all ${q.exhausted ? "bg-danger" : q.alert ? "bg-warning" : "bg-accent"}`}
                       style={{ width: `${Math.round((q.pct ?? 0) * 100)}%` }}
                     />
                   </div>
@@ -71,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",