aigetwey 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -7,6 +7,49 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.0] — 2026-06-25
+
+### Added
+- **Scoped budgets** — budgets are now multi-scope: cap spend **globally**, per
+  **provider**, per **model**, or per **API key**. Each carries its own unit
+  (USD or tokens), window, soft alert, and a hard `402 budget exceeded` stop;
+  spend is still derived from the usage table (restart-safe). The Budget Tracker
+  page shows them as a card grid with an inline Add/Edit panel and a searchable
+  scope picker. Configure via `budgets:` or `PUT /admin/budgets`. Replaces the
+  single gateway-wide budget.
+- **Per-API-key budgets** — cap one gateway key's spend. The matched caller key
+  fingerprint is recorded on each usage row; `GET /admin/keys` lists keys for
+  the picker.
+- **Budget note** — an optional label on a budget to say what it's for.
+- **Headroom re-check** — a "Check" button to re-probe the Headroom proxy.
+- **Usage timeframes** — the Usage window adds **Today** (since local midnight)
+  and **60D** alongside 24h / 7D / 30D.
+- **Request log filters** — the request log is collapsible and gains Provider +
+  Start/End-date filters with a Clear button.
+
+### Changed
+- **Budget Tracker** — the Quota page is renamed Budget Tracker; the budget
+  "Alert at" threshold is a slider with a typeable %, and the per-provider token
+  quota grid (superseded by per-provider budgets) only shows when one is set.
+- **Providers** — enable/disable a provider directly from the list card; a
+  disabled provider fades, reads red, and its models drop out of the combo,
+  CLI-tool, and budget pickers.
+- **CLI tools** — the setup list is trimmed to Claude Code + opencode.
+- **Providers + OpenAI only** — the project is scoped to Anthropic- and
+  OpenAI-compatible providers; Gemini is no longer advertised.
+- **Next 16** — adopt the `proxy` file convention (was `middleware`).
+
+### Fixed
+- **Streaming usage** — openai-format streaming upstreams now report token
+  usage (`stream_options.include_usage`); previously every streamed call through
+  an openai-compatible provider logged 0 tokens in/out.
+- **Session persistence** — the dashboard session secret is persisted to the
+  data dir, so a gateway restart no longer invalidates the cookie and forces a
+  re-login.
+- Favicon (`icon.svg`) is served publicly past the auth gate.
+- Editing a budget preserves its alert threshold.
+- The launcher waits for the dashboard to be ready, not just the proxy port.
+
 ## [1.1.0] — 2026-06-24
 
 ### Added
@@ -30,15 +73,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.0.0] — 2026-06-24
 
 First public release. A personal AI gateway that routes, translates, and tracks
-requests across Anthropic / OpenAI / Gemini-compatible providers, with a built-in
+requests across Anthropic and OpenAI-compatible providers, with a built-in
 dashboard.
 
 ### Added
 
 #### Gateway
 - **Multi-format translation** — one canonical (OpenAI Chat) request shape,
-  translated to/from each provider's native wire format (`openai`, `anthropic`,
-  `gemini`) on both ingress and egress.
+  translated to/from each provider's native wire format (`openai`, `anthropic`)
+  on both ingress and egress.
 - **Combos** — alias an ordered provider chain (`fallback` or `round-robin`)
   behind a single model name; the alias *is* the model you call.
 - **Key pool** — multiple keys per provider with health tracking, cooldown on

package/README.md

@@ -28,8 +28,8 @@ See [CHANGELOG.md](./CHANGELOG.md) for release history.
 ### Highlights
 
 - **One endpoint, every format** — clients speak OpenAI (`/v1/chat/completions`)
-  or Anthropic (`/v1/messages`); the gateway translates to/from OpenAI,
-  Anthropic, or Gemini providers, streaming included.
+  or Anthropic (`/v1/messages`); the gateway translates to/from OpenAI- and
+  Anthropic-compatible providers, streaming included.
 - **Routing + fallback** — a client alias resolves to a prioritized provider
   chain; on 429/5xx/timeout it rotates keys and falls through to the next.
 - **Token savers** — RTK compresses bulky `tool_result` blocks; caveman trims
@@ -184,8 +184,8 @@ npm run build           # compile to dist/
 ### Sorotan
 
 - **Satu endpoint, semua format** — klien bicara OpenAI (`/v1/chat/completions`)
-  atau Anthropic (`/v1/messages`); gateway menerjemahkan ke/dari provider OpenAI,
-  Anthropic, atau Gemini, termasuk streaming.
+  atau Anthropic (`/v1/messages`); gateway menerjemahkan ke/dari provider yang
+  kompatibel OpenAI & Anthropic, termasuk streaming.
 - **Routing + fallback** — sebuah alias klien diarahkan ke rantai provider
   berprioritas; saat 429/5xx/timeout ia memutar key dan jatuh ke provider
   berikutnya.

package/config.example.yaml

@@ -38,11 +38,12 @@ providers: []
 #    free: true
 #    auto_models: true
 #
-#  - id: vertex
-#    format: gemini
-#    base_url: https://us-central1-aiplatform.googleapis.com/v1
-#    service_account: /path/to/sa.json
-#    quota: { window: monthly, limit_tokens: 300000000 }
+#  - id: anthropic
+#    format: anthropic
+#    base_url: https://api.anthropic.com
+#    api_key: sk-ant-xxx
+#    models:
+#      - { id: claude-sonnet-4-6 }
 
 # Combos: client-facing alias -> ordered provider chain. Call the alias as the
 # model name from your CLI tool. strategy: fallback (try in order) | round-robin.

package/dashboard/next.config.ts

@@ -1,4 +1,6 @@
 import type { NextConfig } from "next";
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
 
 const nextConfig: NextConfig = {
   // dashboard talks to the gateway only server-side (route handlers proxy
@@ -7,6 +9,10 @@ const nextConfig: NextConfig = {
   // allow dev HMR/resource requests from loopback hosts so client hydration
   // works regardless of which host name opens the app (localhost vs 127.0.0.1).
   allowedDevOrigins: ["localhost", "127.0.0.1"],
+  // this dashboard is its own npm package (own lockfile) nested in the gateway
+  // repo (which also has one). Pin Turbopack's root so it stops warning about an
+  // ambiguous workspace root and picks the dashboard.
+  turbopack: { root: dirname(fileURLToPath(import.meta.url)) },
 };
 
 export default nextConfig;

package/dashboard/src/app/globals.css

@@ -338,3 +338,50 @@ button:disabled {
   from { opacity: 0; transform: translateX(20px); }
   to { opacity: 1; transform: translateX(0); }
 }
+
+/* Brand range slider — the consumed portion glows lime (filled via an inline
+ * gradient on the element, which the webkit track inherits; Firefox uses
+ * ::-moz-range-progress), with a lime thumb ringed to read on the dark surface. */
+input[type="range"].range-accent {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 6px;
+  border-radius: 9999px;
+  background: var(--color-surface-2);
+  outline: none;
+}
+input[type="range"].range-accent::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
+  background: var(--color-accent);
+  border: 2px solid var(--color-surface);
+  box-shadow: 0 0 0 1px var(--color-accent), 0 0 8px color-mix(in srgb, var(--color-accent) 55%, transparent);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+}
+input[type="range"].range-accent:hover::-webkit-slider-thumb,
+input[type="range"].range-accent:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 1px var(--color-accent), 0 0 12px color-mix(in srgb, var(--color-accent) 85%, transparent);
+}
+input[type="range"].range-accent::-moz-range-track {
+  height: 6px;
+  border-radius: 9999px;
+  background: var(--color-surface-2);
+}
+input[type="range"].range-accent::-moz-range-progress {
+  height: 6px;
+  border-radius: 9999px;
+  background: var(--color-accent);
+}
+input[type="range"].range-accent::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-surface);
+  border-radius: 9999px;
+  background: var(--color-accent);
+  box-shadow: 0 0 0 1px var(--color-accent), 0 0 8px color-mix(in srgb, var(--color-accent) 55%, transparent);
+  cursor: pointer;
+}

package/dashboard/src/components/BudgetForm.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { adminApi } from "@/lib/client";
+import { Button, Input, Field } from "@/components/Button";
+import { Icon } from "@/components/Icon";
+import { ModelPicker, type ModelGroup } from "@/components/ModelPicker";
+import type { BudgetStatus, ModelsPayload } from "@/lib/gateway";
+
+const WINDOWS = ["5h", "daily", "weekly", "monthly"] as const;
+type ScopeType = "global" | "provider" | "model" | "key";
+
+/** Segment-pill button style — selected = accent, matches the Unit toggle. */
+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"
+  }`;
+
+/**
+ * A labelled field group for BUTTON controls. Unlike `Field` (a <label>, which
+ * forwards a pointer click to its first control and would swallow pill clicks),
+ * this is a plain <div> so each pill button receives its own click.
+ */
+function Group({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <span className="text-[11px] font-medium uppercase tracking-wider text-text-subtle">{label}</span>
+      {children}
+    </div>
+  );
+}
+
+const SCOPES: { id: ScopeType; icon: string; label: string; hint: string }[] = [
+  { id: "global", icon: "public", label: "Global", hint: "Cap total spend across the whole gateway." },
+  { id: "provider", icon: "dns", label: "Per provider", hint: "Cap one provider's spend." },
+  { id: "model", icon: "neurology", label: "Per model", hint: "Cap one upstream model's spend." },
+  { id: "key", icon: "key", label: "Per API key", hint: "Cap one gateway key's spend." },
+];
+
+/**
+ * Inline Add / Edit panel for a scoped budget — same shape as the "Add a
+ * provider" flow: step 1 picks the scope (card grid, add only), step 2 is the
+ * field set. Editing jumps straight to step 2 with the scope locked (the scope
+ * is the budget's identity); every other field stays editable.
+ */
+export function BudgetForm({
+  initial,
+  onSaved,
+  onCancel,
+}: {
+  initial: BudgetStatus | null;
+  onSaved: () => void;
+  onCancel: () => void;
+}) {
+  const editing = initial !== null;
+  const [scopeType, setScopeType] = useState<ScopeType | null>(initial ? initial.scope.type : null);
+  const [scopeId, setScopeId] = useState(initial && initial.scope.type !== "global" ? initial.scope.id : "");
+  const [catalog, setCatalog] = useState<ModelsPayload | null>(null);
+  const [keys, setKeys] = useState<{ fingerprint: string; name: string; masked: string }[]>([]);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [unit, setUnit] = useState<"usd" | "tokens">(initial?.unit ?? "usd");
+  const [limit, setLimit] = useState(String(initial?.limit ?? ""));
+  const [window, setWindow] = useState<(typeof WINDOWS)[number]>(initial?.window ?? "monthly");
+  const [alertAt, setAlertAt] = useState(initial ? String(Math.round(initial.alert_at * 100)) : "80");
+  const [note, setNote] = useState(initial?.note ?? "");
+  const [error, setError] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    void adminApi.models().then((r) => { if (r.ok && r.data) setCatalog(r.data); });
+    void adminApi.keys().then((r) => { if (r.ok && r.data) setKeys(r.data); });
+  }, []);
+
+  const providerGroups: ModelGroup[] = catalog?.providers.length
+    ? [{ label: "Providers", items: catalog.providers.map((p) => ({ value: p.id, label: p.id })) }]
+    : [];
+  // one entry per distinct upstream model id (a budget keys on usage.model), grouped by provider.
+  const modelGroups: ModelGroup[] = (catalog?.providers ?? [])
+    .filter((p) => p.models.length > 0)
+    .map((p) => ({ label: p.id, items: p.models.map((m) => ({ value: m.id, label: m.id })) }));
+  const keyGroups: ModelGroup[] = keys.length
+    ? [{ label: "API keys", items: keys.map((k) => ({ value: k.fingerprint, label: k.name })) }]
+    : [];
+  const scopeIdLabel = scopeType === "key" ? (keys.find((k) => k.fingerprint === scopeId)?.name ?? scopeId) : scopeId;
+
+  async function save() {
+    const limitNum = Number(limit);
+    if (!Number.isFinite(limitNum) || limitNum <= 0) return setError("limit must be a positive number");
+    const alertPct = Number(alertAt);
+    if (!Number.isFinite(alertPct) || alertPct <= 0 || alertPct > 100) return setError("alert % must be 1–100");
+    if (scopeType !== "global" && !scopeId.trim()) return setError(`pick a ${scopeType}`);
+    const scope =
+      scopeType === "global" ? { type: "global" as const } : { type: scopeType!, id: scopeId.trim() };
+    setSaving(true);
+    setError("");
+    try {
+      const r = await adminApi.setBudget({ scope, unit, limit: limitNum, window, alert_at: alertPct / 100, note: note.trim() || undefined });
+      if (!r.ok) return setError(r.error ?? "could not save budget");
+      onSaved();
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const panel = "mb-5 rounded-brand-lg border border-border bg-surface p-5 shadow-soft";
+
+  // step 1 (add only): pick the scope.
+  if (scopeType === null) {
+    return (
+      <div className={panel}>
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <h2 className="text-[14px] font-semibold text-text">Add a budget</h2>
+            <p className="mt-0.5 text-[12.5px] text-text-muted">Pick what this budget caps — the rest is one short form.</p>
+          </div>
+          <button type="button" onClick={onCancel} className="flex-none text-text-subtle hover:text-text" aria-label="Cancel">
+            <Icon name="close" size={18} />
+          </button>
+        </div>
+        <div className="mt-4 grid gap-3 sm:grid-cols-4">
+          {SCOPES.map((s) => (
+            <button
+              key={s.id}
+              type="button"
+              onClick={() => { setScopeType(s.id); setScopeId(""); }}
+              className="group flex items-start gap-3 rounded-brand-lg border border-border bg-bg p-4 text-left transition-colors hover:border-accent hover:bg-accent-soft"
+            >
+              <span className="flex h-10 w-10 flex-none items-center justify-center rounded-brand bg-surface-2 text-text-muted group-hover:text-accent">
+                <Icon name={s.icon} size={20} />
+              </span>
+              <span className="min-w-0">
+                <span className="block text-[13.5px] font-semibold text-text">{s.label}</span>
+                <span className="mt-1 block text-[11.5px] text-text-muted">{s.hint}</span>
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  const scopeMeta = SCOPES.find((s) => s.id === scopeType)!;
+
+  // step 2: the field set.
+  return (
+    <div className={panel}>
+      <div className="mb-4 flex items-center gap-2.5 border-b border-border-subtle pb-4">
+        <span className="flex h-8 w-8 items-center justify-center rounded-brand bg-surface-2 text-text-muted">
+          <Icon name={scopeMeta.icon} size={17} />
+        </span>
+        <div>
+          <div className="text-[13.5px] font-semibold text-text">{editing ? "Edit budget" : scopeMeta.label}</div>
+          <div className="tnum text-[11px] text-text-subtle">
+            {scopeType === "global" ? "whole gateway" : `${scopeType} · ${editing ? initial!.label : scopeIdLabel || "—"}`}
+          </div>
+        </div>
+        {editing ? null : (
+          <button
+            type="button"
+            onClick={() => { setScopeType(null); setError(""); }}
+            className="ml-auto inline-flex items-center gap-1 text-[12px] text-text-subtle hover:text-text"
+          >
+            <Icon name="arrow_back" size={14} /> change scope
+          </button>
+        )}
+      </div>
+
+      <div className="space-y-3">
+        {/* scope target — only when adding; editing locks the scope (shown in the header) */}
+        {!editing && scopeType !== "global" && (
+          <Group label={scopeType === "provider" ? "Provider" : scopeType === "model" ? "Model" : "API key"}>
+            <button
+              type="button"
+              onClick={() => setPickerOpen(true)}
+              className="flex w-full items-center justify-between rounded-brand border border-border bg-bg px-3 py-2 text-left text-[13px] transition-colors hover:border-accent"
+            >
+              <span className={scopeId ? "text-text" : "text-text-subtle"}>
+                {scopeId ? scopeIdLabel : scopeType === "provider" ? "Choose a provider…" : scopeType === "model" ? "Choose a model…" : "Choose an API key…"}
+              </span>
+              <Icon name="search" size={15} className="text-text-subtle" />
+            </button>
+          </Group>
+        )}
+
+        <Group label="Unit">
+          <div className="flex flex-wrap gap-2">
+            <button type="button" onClick={() => setUnit("usd")} className={pill(unit === "usd")}>USD</button>
+            <button type="button" onClick={() => setUnit("tokens")} className={pill(unit === "tokens")}>Tokens</button>
+          </div>
+        </Group>
+        <Field label="Limit" hint={unit === "usd" ? "$" : "tokens"}>
+          <Input value={limit} onChange={(e) => setLimit(e.target.value)} inputMode="decimal" placeholder={unit === "usd" ? "50.00" : "1000000"} />
+        </Field>
+        <Group label="Window">
+          <div className="flex flex-wrap gap-2">
+            {WINDOWS.map((w) => (
+              <button key={w} type="button" onClick={() => setWindow(w)} className={pill(window === w)}>{w}</button>
+            ))}
+          </div>
+        </Group>
+        <Group label="Alert at">
+          <div className="flex items-center gap-3">
+            <input
+              type="range"
+              min={0}
+              max={100}
+              step={1}
+              value={Math.max(0, Math.min(100, Number(alertAt) || 0))}
+              onChange={(e) => setAlertAt(e.target.value)}
+              className="range-accent flex-1"
+              style={{
+                background: `linear-gradient(to right, var(--color-accent) ${Math.max(0, Math.min(100, Number(alertAt) || 0))}%, var(--color-surface-2) ${Math.max(0, Math.min(100, Number(alertAt) || 0))}%)`,
+              }}
+              aria-label="Alert threshold percent"
+            />
+            <div className="relative w-16 flex-none">
+              <Input
+                value={alertAt}
+                onChange={(e) => {
+                  const v = e.target.value.replace(/[^\d]/g, "");
+                  if (v === "") return setAlertAt("");
+                  setAlertAt(String(Math.max(0, Math.min(100, Number(v)))));
+                }}
+                inputMode="numeric"
+                className="pr-5 text-center tnum"
+                aria-label="Alert threshold percent (type)"
+              />
+              <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[12px] text-text-subtle">%</span>
+            </div>
+          </div>
+          <p className="text-[11px] text-text-subtle">Warn once spend crosses this share of the limit.</p>
+        </Group>
+        <Field label="Note" hint="optional">
+          <Input value={note} onChange={(e) => setNote(e.target.value)} maxLength={200} placeholder="e.g. client X cap" />
+        </Field>
+      </div>
+
+      {error && <div className="mt-2 text-[12px] text-danger">{error}</div>}
+      <div className="mt-4 flex justify-end gap-2">
+        <Button type="button" variant="ghost" onClick={onCancel}>Cancel</Button>
+        <Button type="button" disabled={saving} onClick={save}>{saving ? "Saving…" : editing ? "Save changes" : "Add budget"}</Button>
+      </div>
+
+      {pickerOpen && scopeType !== "global" && (
+        <ModelPicker
+          title={scopeType === "provider" ? "Select a provider" : scopeType === "model" ? "Select a model" : "Select an API key"}
+          note={`Click ${scopeType === "key" ? "a key" : `a ${scopeType}`} to scope this budget to it.`}
+          searchPlaceholder={scopeType === "provider" ? "Search providers…" : scopeType === "model" ? "Search models…" : "Search keys…"}
+          groups={scopeType === "provider" ? providerGroups : scopeType === "model" ? modelGroups : keyGroups}
+          selected={scopeId ? [scopeId] : []}
+          onToggle={(v) => { setScopeId(v); setPickerOpen(false); }}
+          onClose={() => setPickerOpen(false)}
+          showThinkingHint={scopeType === "model"}
+        />
+      )}
+    </div>
+  );
+}

package/dashboard/src/components/EndpointView.tsx

@@ -248,17 +248,39 @@ function HeadroomCard({
   const [url, setUrl] = useState(h.url);
   const [localBusy, setLocalBusy] = useState("");
   const [msg, setMsg] = useState("");
+  const [check, setCheck] = useState<{ ok: boolean; text: string } | null>(null);
   useEffect(() => setUrl(h.url), [h.url]);
 
   async function act(label: string, fn: () => Promise<{ ok: boolean; error?: string }>) {
     setLocalBusy(label);
     setMsg("");
+    setCheck(null);
     const r = await fn();
     setLocalBusy("");
     if (!r.ok) setMsg(r.error ?? "action failed");
     await refresh();
   }
 
+  // Live re-probe: ask the gateway whether the proxy at the configured URL
+  // actually answers right now, and surface the result inline.
+  async function checkProxy() {
+    setLocalBusy("check");
+    setMsg("");
+    setCheck(null);
+    const r = await adminApi.headroomStatus();
+    setLocalBusy("");
+    await refresh();
+    if (!r.ok || !r.data) {
+      setCheck({ ok: false, text: r.error ?? "could not reach the gateway" });
+      return;
+    }
+    setCheck(
+      r.data.running
+        ? { ok: true, text: `proxy is up at ${r.data.url}` }
+        : { ok: false, text: `no proxy responding at ${r.data.url}` },
+    );
+  }
+
   return (
     <RichCard className="lg:col-span-2" header={<CardTitle title="Headroom" sub="external context-compression proxy" />}>
       <div className="space-y-4">
@@ -312,6 +334,9 @@ function HeadroomCard({
           >
             <Icon name="stop" size={16} /> Stop
           </Button>
+          <Button variant="ghost" disabled={localBusy === "check"} onClick={checkProxy}>
+            <Icon name="sync" size={16} /> {localBusy === "check" ? "Checking…" : "Check"}
+          </Button>
           {hr && !hr.installed && (
             <span className="text-[11px] text-text-subtle">
               Headroom isn’t installed. Get it from{" "}
@@ -329,6 +354,11 @@ function HeadroomCard({
         </div>
 
         {msg && <p className="text-[12px] text-danger">{msg}</p>}
+        {check && (
+          <p className={`flex items-center gap-1 text-[12px] ${check.ok ? "text-success" : "text-danger"}`}>
+            <Icon name={check.ok ? "check_circle" : "error"} size={14} /> {check.text}
+          </p>
+        )}
       </div>
     </RichCard>
   );

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,