aigetwey 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -5,7 +5,68 @@ All notable changes to **aigetwey** are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [1.3.0] — 2026-06-26
+
+### Added
+- **Per-key expiry** — set an expiry date on a gateway key; `/v1/*` calls with an
+  expired key return `403 key expired`. Editable on the Endpoint page next to the
+  per-key model allowlist and rate limit. Keys with no expiry never expire.
+
+### Changed
+- **Budgets page → Overall + Keys** — the Budgets page now separates Overall caps
+  (global/provider/model) from a Keys section that lists every gateway key with its
+  spend; capped keys show a bar, reset countdown, and expiry, uncapped keys show
+  spend + "no limit". A key's spend cap and expiry are now set in one place — the
+  key settings on the Endpoint page — alongside its model allowlist and rate limit.
+- **Recurring budgets** — each budget window (`5h`/`24h`/`7day`/`30day`) now
+  resets on a cycle anchored to when the budget was created, not a shared epoch
+  grid. A per-key budget shared with another device becomes a self-resetting
+  allowance; the reset countdown reflects that key's own cycle. Budgets in an
+  existing `config.yaml` (no stored anchor) keep the previous epoch-grid reset
+  until next edited.
+
+## [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
 
@@ -30,15 +91,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,16 +28,22 @@ 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
   output prose; ponytail nudges minimal code; headroom compresses context via an
   external `/v1/compress`. All toggle per-endpoint.
-- **Quota + cost** — per-provider token budgets with scheduled-window resets, a
-  reset countdown, and SQLite-backed usage/cost tracking.
-- **Dashboard** — providers, combos, usage, quota, CLI tools, a live server
+- **Share it safely** — hand a gateway key to a teammate or a friend and set its
+  model allowlist, rate limit, **spend cap**, and **expiry** in one place. Each
+  key's budget resets on its own rolling cycle, so a shared key behaves like a
+  self-renewing monthly allowance; an expired key is refused with `403`.
+- **Budgets + cost** — scoped spend caps (global/provider/model/key) over rolling
+  `5h`/`24h`/`7day`/`30day` windows anchored to when each budget was created, with a
+  live reset countdown and SQLite-backed usage/cost tracking. The Budgets page
+  splits **Overall** caps from a **Keys** view that shows every key's spend.
+- **Dashboard** — providers, combos, usage, budgets, CLI tools, a live server
   console, and a settings page with a per-model pricing editor.
 
 ### Token savers
@@ -117,7 +123,6 @@ providers:
     format: anthropic
     base_url: https://api.anthropic.com/v1
     api_keys: [sk-ant-xxx]
-    quota: { window: weekly, reset_at: monday, timezone: Asia/Jakarta }
   - id: opencode-free
     format: openai
     base_url: https://opencode.ai/zen/v1
@@ -130,6 +135,12 @@ models:                     # routing: client alias -> prioritized provider chai
     model: [claude-sonnet-4-6, claude-sonnet-4-5]
     price_in: 3             # USD per 1M tokens (for cost tracking)
     price_out: 15
+
+budgets:                    # spend caps; window = rolling 5h | 24h | 7day | 30day
+  - scope: { type: global }
+    unit: usd               # usd (cost) or tokens
+    limit: 50
+    window: 30day           # rolling 30-day lookback (epoch-aligned bucket)
 ```
 
 A **combo** is one of these `models` entries: an alias your CLI tool calls,
@@ -184,17 +195,23 @@ 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.
 - **Penghemat token** — RTK memampatkan blok `tool_result` besar; caveman
   meringkas prosa output; ponytail mendorong kode minimal; headroom memampatkan
   konteks lewat `/v1/compress` eksternal. Semua bisa di-toggle per-endpoint.
-- **Kuota + biaya** — budget token per-provider dengan reset berjadwal, hitung
-  mundur reset, dan pelacakan pemakaian/biaya berbasis SQLite.
-- **Dashboard** — providers, combos, usage, kuota, CLI tools, server console
+- **Bagikan dengan aman** — kasih satu gateway key ke teman/rekan, lalu atur
+  allowlist model, rate limit, **batas spend**, dan **kedaluwarsa** di satu tempat.
+  Budget tiap key reset di siklus rolling-nya sendiri (jadi terasa seperti jatah
+  bulanan yang isi ulang otomatis); key yang kedaluwarsa ditolak `403`.
+- **Budget + biaya** — batas spend berskop (global/provider/model/key) atas jendela
+  rolling `5h`/`24h`/`7day`/`30day` yang di-anchor ke saat budget dibuat, dengan
+  hitung mundur reset dan pelacakan pemakaian/biaya berbasis SQLite. Halaman Budgets
+  memisah cap **Overall** dari tampilan **Keys** (pemakaian tiap key).
+- **Dashboard** — providers, combos, usage, budgets, CLI tools, server console
   live, dan halaman settings dengan editor harga per-model.
 
 ### Penghemat token
@@ -293,6 +310,10 @@ npm run build           # compile ke dist/
 
 ---
 
+## Acknowledgements
+
+Inspired by [9router](https://github.com/decolua/9router) — its feature set and dashboard shaped much of this project's direction. / Terinspirasi oleh [9router](https://github.com/decolua/9router).
+
 ## License
 
 [MIT](./LICENSE) © xk1ko

package/config.example.yaml

@@ -23,7 +23,6 @@ providers: []
 #    format: anthropic
 #    base_url: https://api.anthropic.com/v1
 #    api_keys: [sk-ant-xxx]
-#    quota: { window: weekly, reset_at: monday, timezone: Asia/Jakarta }
 #
 #  - id: openai
 #    format: openai
@@ -38,11 +37,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/(console)/quota/page.tsx

@@ -1,5 +1,5 @@
-import { QuotaView } from "@/components/QuotaView";
+import { BudgetTracker } from "@/components/BudgetTracker";
 
 export default function QuotaPage() {
-  return <QuotaView />;
+  return <BudgetTracker />;
 }

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,256 @@
+"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", "24h", "7day", "30day"] as const;
+type ScopeType = "global" | "provider" | "model";
+
+/** 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." },
+];
+
+/**
+ * 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 !== "key" ? initial.scope.type : null,
+  );
+  const [scopeId, setScopeId] = useState(
+    initial && initial.scope.type !== "global" && initial.scope.type !== "key" ? initial.scope.id : "",
+  );
+  const [catalog, setCatalog] = useState<ModelsPayload | null>(null);
+  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 ?? "30day");
+  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); });
+  }, []);
+
+  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 scopeIdLabel = 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-3">
+          {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" : "Select a model"}
+          note={`Click a ${scopeType} to scope this budget to it.`}
+          searchPlaceholder={scopeType === "provider" ? "Search providers…" : "Search models…"}
+          groups={scopeType === "provider" ? providerGroups : modelGroups}
+          selected={scopeId ? [scopeId] : []}
+          onToggle={(v) => { setScopeId(v); setPickerOpen(false); }}
+          onClose={() => setPickerOpen(false)}
+          showThinkingHint={scopeType === "model"}
+        />
+      )}
+    </div>
+  );
+}