@convex-dev/ai-budget 0.0.2-alpha.4 → 0.0.2-alpha.6

package/dist/component/schema.d.ts

@@ -15,19 +15,30 @@ export declare const vTag: import("convex/values").VObject<{
 declare const _default: import("convex/server").SchemaDefinition<{
     buckets: import("convex/server").TableDefinition<import("convex/values").VObject<{
         requestsPerMinute?: number | undefined;
+        maxConcurrent?: number | undefined;
         dailySpendLimitNanos?: number | undefined;
+        monthlySpendLimitNanos?: number | undefined;
         lifetimeSpendLimitNanos?: number | undefined;
         dailyTokenLimit?: number | undefined;
+        monthlyTokenLimit?: number | undefined;
         lifetimeTokenLimit?: number | undefined;
         blocked?: boolean | undefined;
+        warnAtPct?: number | undefined;
         enforcement?: "hard" | "soft" | undefined;
         dailyBumpNanos?: number | undefined;
+        monthlyBumpNanos?: number | undefined;
         lifetimeBumpNanos?: number | undefined;
         bumpDayStamp?: string | undefined;
+        bumpMonthStamp?: string | undefined;
         tokensToday?: number | undefined;
+        monthStamp?: string | undefined;
+        spendThisMonthNanos?: number | undefined;
+        tokensThisMonth?: number | undefined;
         reservedTodayNanos?: number | undefined;
+        reservedMonthNanos?: number | undefined;
         reservedTotalNanos?: number | undefined;
         reservedTodayTokens?: number | undefined;
+        reservedMonthTokens?: number | undefined;
         reservedTotalTokens?: number | undefined;
         pendingCount?: number | undefined;
         dimension: string;
@@ -41,30 +52,88 @@ declare const _default: import("convex/server").SchemaDefinition<{
         dimension: import("convex/values").VString<string, "required">;
         value: import("convex/values").VString<string, "required">;
         requestsPerMinute: import("convex/values").VFloat64<number | undefined, "optional">;
+        maxConcurrent: import("convex/values").VFloat64<number | undefined, "optional">;
         dailySpendLimitNanos: import("convex/values").VFloat64<number | undefined, "optional">;
+        monthlySpendLimitNanos: import("convex/values").VFloat64<number | undefined, "optional">;
         lifetimeSpendLimitNanos: import("convex/values").VFloat64<number | undefined, "optional">;
         dailyTokenLimit: import("convex/values").VFloat64<number | undefined, "optional">;
+        monthlyTokenLimit: import("convex/values").VFloat64<number | undefined, "optional">;
         lifetimeTokenLimit: import("convex/values").VFloat64<number | undefined, "optional">;
         blocked: import("convex/values").VBoolean<boolean | undefined, "optional">;
+        warnAtPct: import("convex/values").VFloat64<number | undefined, "optional">;
         enforcement: import("convex/values").VUnion<"hard" | "soft" | undefined, [import("convex/values").VLiteral<"hard", "required">, import("convex/values").VLiteral<"soft", "required">], "optional", never>;
         dailyBumpNanos: import("convex/values").VFloat64<number | undefined, "optional">;
+        monthlyBumpNanos: import("convex/values").VFloat64<number | undefined, "optional">;
         lifetimeBumpNanos: import("convex/values").VFloat64<number | undefined, "optional">;
         bumpDayStamp: import("convex/values").VString<string | undefined, "optional">;
+        bumpMonthStamp: import("convex/values").VString<string | undefined, "optional">;
         totalSpendNanos: import("convex/values").VFloat64<number, "required">;
         totalRequests: import("convex/values").VFloat64<number, "required">;
         totalTokens: import("convex/values").VFloat64<number, "required">;
         dayStamp: import("convex/values").VString<string, "required">;
         spendTodayNanos: import("convex/values").VFloat64<number, "required">;
         tokensToday: import("convex/values").VFloat64<number | undefined, "optional">;
+        monthStamp: import("convex/values").VString<string | undefined, "optional">;
+        spendThisMonthNanos: import("convex/values").VFloat64<number | undefined, "optional">;
+        tokensThisMonth: import("convex/values").VFloat64<number | undefined, "optional">;
         reservedTodayNanos: import("convex/values").VFloat64<number | undefined, "optional">;
+        reservedMonthNanos: import("convex/values").VFloat64<number | undefined, "optional">;
         reservedTotalNanos: import("convex/values").VFloat64<number | undefined, "optional">;
         reservedTodayTokens: import("convex/values").VFloat64<number | undefined, "optional">;
+        reservedMonthTokens: import("convex/values").VFloat64<number | undefined, "optional">;
         reservedTotalTokens: import("convex/values").VFloat64<number | undefined, "optional">;
         pendingCount: import("convex/values").VFloat64<number | undefined, "optional">;
-    }, "required", "dimension" | "value" | "requestsPerMinute" | "dailySpendLimitNanos" | "lifetimeSpendLimitNanos" | "dailyTokenLimit" | "lifetimeTokenLimit" | "blocked" | "enforcement" | "dailyBumpNanos" | "lifetimeBumpNanos" | "bumpDayStamp" | "totalSpendNanos" | "totalRequests" | "totalTokens" | "dayStamp" | "spendTodayNanos" | "tokensToday" | "reservedTodayNanos" | "reservedTotalNanos" | "reservedTodayTokens" | "reservedTotalTokens" | "pendingCount">, {
+    }, "required", "dimension" | "value" | "requestsPerMinute" | "maxConcurrent" | "dailySpendLimitNanos" | "monthlySpendLimitNanos" | "lifetimeSpendLimitNanos" | "dailyTokenLimit" | "monthlyTokenLimit" | "lifetimeTokenLimit" | "blocked" | "warnAtPct" | "enforcement" | "dailyBumpNanos" | "monthlyBumpNanos" | "lifetimeBumpNanos" | "bumpDayStamp" | "bumpMonthStamp" | "totalSpendNanos" | "totalRequests" | "totalTokens" | "dayStamp" | "spendTodayNanos" | "tokensToday" | "monthStamp" | "spendThisMonthNanos" | "tokensThisMonth" | "reservedTodayNanos" | "reservedMonthNanos" | "reservedTotalNanos" | "reservedTodayTokens" | "reservedMonthTokens" | "reservedTotalTokens" | "pendingCount">, {
         dim_value: ["dimension", "value", "_creationTime"];
         dimension: ["dimension", "_creationTime"];
     }, {}, {}>;
+    usage: import("convex/server").TableDefinition<import("convex/values").VObject<{
+        dimension: string;
+        value: string;
+        period: "day" | "month";
+        stamp: string;
+        spendNanos: number;
+        tokens: number;
+        requests: number;
+    }, {
+        dimension: import("convex/values").VString<string, "required">;
+        value: import("convex/values").VString<string, "required">;
+        period: import("convex/values").VUnion<"day" | "month", [import("convex/values").VLiteral<"day", "required">, import("convex/values").VLiteral<"month", "required">], "required", never>;
+        stamp: import("convex/values").VString<string, "required">;
+        spendNanos: import("convex/values").VFloat64<number, "required">;
+        tokens: import("convex/values").VFloat64<number, "required">;
+        requests: import("convex/values").VFloat64<number, "required">;
+    }, "required", "dimension" | "value" | "period" | "stamp" | "spendNanos" | "tokens" | "requests">, {
+        bucket_period_stamp: ["dimension", "value", "period", "stamp", "_creationTime"];
+        period_stamp: ["period", "stamp", "_creationTime"];
+    }, {}, {}>;
+    requestTags: import("convex/server").TableDefinition<import("convex/values").VObject<{
+        dimension: string;
+        value: string;
+        requestId: import("convex/values").GenericId<"requests">;
+    }, {
+        dimension: import("convex/values").VString<string, "required">;
+        value: import("convex/values").VString<string, "required">;
+        requestId: import("convex/values").VId<import("convex/values").GenericId<"requests">, "required">;
+    }, "required", "dimension" | "value" | "requestId">, {
+        dim_value: ["dimension", "value", "_creationTime"];
+        requestId: ["requestId", "_creationTime"];
+    }, {}, {}>;
+    adjustments: import("convex/server").TableDefinition<import("convex/values").VObject<{
+        tokens?: number | undefined;
+        reason?: string | undefined;
+        dimension: string;
+        value: string;
+        deltaNanos: number;
+    }, {
+        dimension: import("convex/values").VString<string, "required">;
+        value: import("convex/values").VString<string, "required">;
+        deltaNanos: import("convex/values").VFloat64<number, "required">;
+        tokens: import("convex/values").VFloat64<number | undefined, "optional">;
+        reason: import("convex/values").VString<string | undefined, "optional">;
+    }, "required", "dimension" | "value" | "tokens" | "deltaNanos" | "reason">, {
+        dim_value: ["dimension", "value", "_creationTime"];
+    }, {}, {}>;
     requests: import("convex/server").TableDefinition<import("convex/values").VObject<{
         actionName?: string | undefined;
         tags?: {
@@ -137,6 +206,7 @@ declare const _default: import("convex/server").SchemaDefinition<{
         settled: ["settled", "_creationTime"];
     }, {}, {}>;
     prices: import("convex/server").TableDefinition<import("convex/values").VObject<{
+        cachedNanosPerMTok?: number | undefined;
         model: string;
         inputNanosPerMTok: number;
         outputNanosPerMTok: number;
@@ -144,7 +214,8 @@ declare const _default: import("convex/server").SchemaDefinition<{
         model: import("convex/values").VString<string, "required">;
         inputNanosPerMTok: import("convex/values").VFloat64<number, "required">;
         outputNanosPerMTok: import("convex/values").VFloat64<number, "required">;
-    }, "required", "model" | "inputNanosPerMTok" | "outputNanosPerMTok">, {
+        cachedNanosPerMTok: import("convex/values").VFloat64<number | undefined, "optional">;
+    }, "required", "model" | "inputNanosPerMTok" | "outputNanosPerMTok" | "cachedNanosPerMTok">, {
         model: ["model", "_creationTime"];
     }, {}, {}>;
     settings: import("convex/server").TableDefinition<import("convex/values").VObject<{
@@ -157,6 +228,7 @@ declare const _default: import("convex/server").SchemaDefinition<{
         globalLifetimeBumpNanos?: number | undefined;
         globalBumpDayStamp?: string | undefined;
         retentionMs?: number | undefined;
+        defaultWarnAtPct?: number | undefined;
         key: string;
     }, {
         key: import("convex/values").VString<string, "required">;
@@ -169,7 +241,8 @@ declare const _default: import("convex/server").SchemaDefinition<{
         globalLifetimeBumpNanos: import("convex/values").VFloat64<number | undefined, "optional">;
         globalBumpDayStamp: import("convex/values").VString<string | undefined, "optional">;
         retentionMs: import("convex/values").VFloat64<number | undefined, "optional">;
-    }, "required", "key" | "modelMode" | "models" | "globalDailySpendLimitNanos" | "globalLifetimeSpendLimitNanos" | "globalEnforcement" | "globalDailyBumpNanos" | "globalLifetimeBumpNanos" | "globalBumpDayStamp" | "retentionMs">, {
+        defaultWarnAtPct: import("convex/values").VFloat64<number | undefined, "optional">;
+    }, "required", "key" | "modelMode" | "models" | "globalDailySpendLimitNanos" | "globalLifetimeSpendLimitNanos" | "globalEnforcement" | "globalDailyBumpNanos" | "globalLifetimeBumpNanos" | "globalBumpDayStamp" | "retentionMs" | "defaultWarnAtPct">, {
         key: ["key", "_creationTime"];
     }, {}, {}>;
 }, true>;

package/dist/component/schema.js

@@ -17,18 +17,26 @@ export default defineSchema({
         value: v.string(),
         // limits (all optional — unlimited by default)
         requestsPerMinute: v.optional(v.number()), // enforced on the "user" dimension
+        maxConcurrent: v.optional(v.number()), // max in-flight (pending) requests
         dailySpendLimitNanos: v.optional(v.number()),
+        monthlySpendLimitNanos: v.optional(v.number()),
         lifetimeSpendLimitNanos: v.optional(v.number()),
         dailyTokenLimit: v.optional(v.number()),
+        monthlyTokenLimit: v.optional(v.number()),
         lifetimeTokenLimit: v.optional(v.number()),
         blocked: v.optional(v.boolean()), // hard block (was `blocked`/`disabled`)
+        // Fire an approaching-limit alert once usage crosses this fraction of a cap
+        // (e.g. 0.8 = warn at 80%). Falls back to the deployment default.
+        warnAtPct: v.optional(v.number()),
         // "hard" (default): exceeding a budget blocks. "soft": warn but allow.
         enforcement: v.optional(v.union(v.literal("hard"), v.literal("soft"))),
-        // one-time bumps ("approve another $X"). Daily bump is scoped to bumpDayStamp
-        // (resets with the day); lifetime bump is permanent.
+        // one-time bumps ("approve another $X"). Daily/monthly bumps are scoped to
+        // their stamp (reset with the window); lifetime bump is permanent.
         dailyBumpNanos: v.optional(v.number()),
+        monthlyBumpNanos: v.optional(v.number()),
         lifetimeBumpNanos: v.optional(v.number()),
         bumpDayStamp: v.optional(v.string()),
+        bumpMonthStamp: v.optional(v.string()),
         // settled totals (from finished requests)
         totalSpendNanos: v.number(),
         totalRequests: v.number(),
@@ -37,15 +45,55 @@ export default defineSchema({
         dayStamp: v.string(),
         spendTodayNanos: v.number(),
         tokensToday: v.optional(v.number()),
+        // monthly window (UTC calendar month, e.g. "2026-09")
+        monthStamp: v.optional(v.string()),
+        spendThisMonthNanos: v.optional(v.number()),
+        tokensThisMonth: v.optional(v.number()),
         // in-flight reservations (pessimistic holds; released on settle/expiry)
         reservedTodayNanos: v.optional(v.number()),
+        reservedMonthNanos: v.optional(v.number()),
         reservedTotalNanos: v.optional(v.number()),
         reservedTodayTokens: v.optional(v.number()),
+        reservedMonthTokens: v.optional(v.number()),
         reservedTotalTokens: v.optional(v.number()),
         pendingCount: v.optional(v.number()),
     })
         .index("dim_value", ["dimension", "value"])
         .index("dimension", ["dimension"]),
+    // Durable per-(bucket, period) spend history. Written from settled requests
+    // and manual adjustments; NEVER swept by request retention, so spend charts
+    // and "what did we spend last month" survive long after the raw request rows
+    // are purged. period is "day" ("2026-09-04") or "month" ("2026-09").
+    usage: defineTable({
+        dimension: v.string(),
+        value: v.string(),
+        period: v.union(v.literal("day"), v.literal("month")),
+        stamp: v.string(),
+        spendNanos: v.number(),
+        tokens: v.number(),
+        requests: v.number(),
+    })
+        .index("bucket_period_stamp", ["dimension", "value", "period", "stamp"])
+        .index("period_stamp", ["period", "stamp"]),
+    // Reverse index for filtering the request log by an arbitrary tag dimension
+    // (user/action are already indexed on `requests`). One row per extra tag per
+    // request; cleaned up with the request on retention/deletion.
+    requestTags: defineTable({
+        dimension: v.string(),
+        value: v.string(),
+        requestId: v.id("requests"),
+    })
+        .index("dim_value", ["dimension", "value"])
+        .index("requestId", ["requestId"]),
+    // Manual credits/debits applied to a bucket (comp a user, correct an
+    // overcharge). Negative delta = credit/refund, positive = extra charge.
+    adjustments: defineTable({
+        dimension: v.string(),
+        value: v.string(),
+        deltaNanos: v.number(),
+        tokens: v.optional(v.number()),
+        reason: v.optional(v.string()),
+    }).index("dim_value", ["dimension", "value"]),
     requests: defineTable({
         // `user` and `action` stay first-class + indexed (the hot-path filters and
         // rate limiting); the full attribution incl. extra tags lives in `tags`.
@@ -86,6 +134,9 @@ export default defineSchema({
         model: v.string(),
         inputNanosPerMTok: v.number(),
         outputNanosPerMTok: v.number(),
+        // price for cached (prompt-cache-read) input tokens. Providers bill these
+        // at a fraction of the input rate; if unset, a default discount is applied.
+        cachedNanosPerMTok: v.optional(v.number()),
     }).index("model", ["model"]),
     // singleton component config (key === "singleton")
     settings: defineTable({
@@ -108,5 +159,8 @@ export default defineSchema({
         globalBumpDayStamp: v.optional(v.string()),
         // request-row retention window in ms (default 1h); 0 disables sweeping.
         retentionMs: v.optional(v.number()),
+        // default approaching-limit alert threshold (fraction of a cap) for buckets
+        // that don't set their own warnAtPct. 0/unset disables threshold alerts.
+        defaultWarnAtPct: v.optional(v.number()),
     }).index("key", ["key"]),
 });

package/package.json

@@ -7,7 +7,7 @@
     "email": "support@convex.dev",
     "url": "https://github.com/get-convex/ai-budget/issues"
   },
-  "version": "0.0.2-alpha.4",
+  "version": "0.0.2-alpha.6",
   "license": "Apache-2.0",
   "type": "module",
   "keywords": [

package/src/client/dashboard.ts

@@ -0,0 +1,215 @@
+// Self-contained admin dashboard served by the component over HTTP (see
+// AIBudget.registerRoutes). Plain HTML/CSS/JS — no build step, no framework —
+// so it ships inside the published package as a string. `__API_BASE__` and
+// `__TOKEN__` are substituted at serve time; the page talks only to the
+// component's own JSON API under API_BASE.
+export const DASHBOARD_HTML = String.raw`<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>AI Budget</title>
+<style>
+  :root {
+    --bg: #0f1115; --panel: #171a21; --border: #262b36; --muted: #8b93a7;
+    --fg: #e6e9ef; --accent: #6ea8fe; --accent2: #4ade80; --danger: #f87171;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; font: 14px/1.5 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
+  header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
+  header h1 { font-size: 16px; margin: 0; }
+  header .sub { color: var(--muted); font-size: 12px; }
+  nav { display: flex; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--border); }
+  nav button { background: transparent; color: var(--muted); border: 1px solid transparent; padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; }
+  nav button.active { background: var(--panel); color: var(--fg); border-color: var(--border); }
+  main { padding: 20px; }
+  table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
+  th { color: var(--muted); font-weight: 600; }
+  td.mono, .mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; }
+  input, select { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; font: inherit; width: 90px; }
+  button.act { background: var(--panel); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; cursor: pointer; font-size: 12px; }
+  button.act:hover { border-color: var(--accent); }
+  .row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
+  .pill { font-size: 11px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); }
+  .ok { color: var(--accent2); } .bad { color: var(--danger); }
+  .bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 10px; }
+  .bar { background: var(--accent); border-radius: 2px 2px 0 0; min-width: 8px; flex: 1; position: relative; }
+  .bar span { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 9px; color: var(--muted); }
+  .muted { color: var(--muted); } h2 { font-size: 14px; margin: 18px 0 8px; }
+  .err { color: var(--danger); padding: 10px; }
+</style>
+</head>
+<body>
+<header>
+  <h1>☂️ AI Budget</h1>
+  <span class="sub">component admin dashboard</span>
+  <span id="total" class="sub" style="margin-left:auto"></span>
+</header>
+<nav>
+  <button data-tab="buckets" class="active">Buckets</button>
+  <button data-tab="requests">Requests</button>
+  <button data-tab="usage">Usage</button>
+  <button data-tab="settings">Settings</button>
+</nav>
+<main id="main"></main>
+<script>
+const API = "__API_BASE__";
+const TOKEN = "__TOKEN__";
+const H = TOKEN ? { Authorization: "Bearer " + TOKEN } : {};
+const NANOS = 1e9;
+const usd = (n) => n == null ? "—" : "$" + (n / NANOS).toFixed(n && n < NANOS/100 ? 6 : 2);
+const q = (o) => Object.entries(o).filter(([,v]) => v != null && v !== "").map(([k,v]) => k+"="+encodeURIComponent(v)).join("&");
+async function get(path, params) { const r = await fetch(API + path + (params ? "?" + q(params) : ""), { headers: H, credentials: "same-origin" }); if (!r.ok) throw new Error(await r.text()); return r.json(); }
+async function post(path, body) { const r = await fetch(API + path, { method: "POST", headers: { "content-type": "application/json", ...H }, credentials: "same-origin", body: JSON.stringify(body) }); if (!r.ok) throw new Error(await r.text()); return r.json(); }
+const el = (t, a = {}, kids = []) => { const e = document.createElement(t); for (const k in a) { if (k === "class") e.className = a[k]; else if (k.startsWith("on")) e.addEventListener(k.slice(2), a[k]); else if (k === "value") e.value = a[k] ?? ""; else e.setAttribute(k, a[k]); } for (const c of [].concat(kids)) e.append(c?.nodeType ? c : document.createTextNode(c ?? "")); return e; };
+const main = document.getElementById("main");
+let tab = "buckets";
+
+document.querySelectorAll("nav button").forEach((b) =>
+  b.addEventListener("click", () => { tab = b.dataset.tab; document.querySelectorAll("nav button").forEach((x) => x.classList.toggle("active", x === b)); render(); }));
+
+// number input that saves on Enter/blur
+function numInput(value, onSave, { money = false, width = 90 } = {}) {
+  const shown = value == null ? "" : money ? value / NANOS : value;
+  const i = el("input", { value: shown, style: "width:" + width + "px" });
+  const save = () => { const t = i.value.trim(); onSave(t === "" ? undefined : money ? Math.round(Number(t) * NANOS) : Number(t)); };
+  i.addEventListener("keydown", (e) => { if (e.key === "Enter") i.blur(); });
+  i.addEventListener("blur", save);
+  return i;
+}
+
+async function render() {
+  main.innerHTML = "";
+  try { await ({ buckets: renderBuckets, requests: renderRequests, usage: renderUsage, settings: renderSettings }[tab])(); }
+  catch (e) { main.append(el("div", { class: "err" }, "Error: " + e.message)); }
+}
+
+async function renderBuckets() {
+  const dims = ["user", "action"];
+  const state = { dimension: window.__dim ?? "" };
+  const rows = await get("/buckets", state.dimension ? { dimension: state.dimension } : {});
+  const grand = rows.reduce((s, b) => s + b.totalSpendNanos, 0);
+  document.getElementById("total").textContent = rows.length + " buckets · " + usd(grand) + " total";
+  const dimSet = [...new Set(rows.map((b) => b.dimension).concat(dims))];
+  const sel = el("select", { value: state.dimension, style: "width:140px",
+    onchange: (e) => { window.__dim = e.target.value; render(); } },
+    [el("option", { value: "" }, "all dimensions")].concat(dimSet.map((d) => el("option", { value: d }, d))));
+  main.append(el("div", { class: "row" }, ["Dimension:", sel]));
+
+  const head = ["dimension", "value", "today", "month", "total", "daily $", "monthly $", "warn %", "max/min", "blocked", ""];
+  const table = el("table", {}, el("thead", {}, el("tr", {}, head.map((h) => el("th", {}, h)))));
+  const body = el("tbody");
+  for (const b of rows) {
+    const set = (patch) => post("/setLimits", { dimension: b.dimension, value: b.value, ...patch }).then(render);
+    body.append(el("tr", {}, [
+      el("td", { class: "mono muted" }, b.dimension),
+      el("td", {}, el("b", {}, b.value)),
+      el("td", { class: "mono" }, usd(b.spendTodayNanos)),
+      el("td", { class: "mono" }, usd(b.spendThisMonthNanos)),
+      el("td", { class: "mono" }, usd(b.totalSpendNanos)),
+      el("td", {}, numInput(b.dailySpendLimitNanos, (v) => set({ dailySpendLimitNanos: v }), { money: true })),
+      el("td", {}, numInput(b.monthlySpendLimitNanos, (v) => set({ monthlySpendLimitNanos: v }), { money: true })),
+      el("td", {}, numInput(b.warnAtPct == null ? undefined : Math.round(b.warnAtPct * 100), (v) => set({ warnAtPct: v == null ? undefined : v / 100 }), { width: 55 })),
+      el("td", {}, numInput(b.maxConcurrent, (v) => set({ maxConcurrent: v }), { width: 55 })),
+      el("td", {}, el("input", { type: "checkbox", style: "width:auto", ...(b.blocked ? { checked: "" } : {}), onchange: (e) => set({ blocked: e.target.checked }) })),
+      el("td", {}, [
+        el("button", { class: "act", onclick: () => post("/adjust", { dimension: b.dimension, value: b.value, deltaNanos: -NANOS, reason: "dashboard credit" }).then(render) }, "−$1"),
+        " ",
+        el("button", { class: "act", onclick: () => post("/bump", { dimension: b.dimension, value: b.value, dailyNanos: NANOS }).then(render) }, "+$1 today"),
+      ]),
+    ]));
+  }
+  table.append(body);
+  main.append(table);
+}
+
+async function renderRequests() {
+  const filter = window.__reqFilter ?? {};
+  const dimInput = el("input", { value: filter.dimension ?? "", placeholder: "dimension", style: "width:110px" });
+  const valInput = el("input", { value: filter.value ?? "", placeholder: "value", style: "width:130px" });
+  const go = () => { window.__reqFilter = { dimension: dimInput.value.trim() || undefined, value: valInput.value.trim() || undefined }; render(); };
+  main.append(el("div", { class: "row" }, ["Filter by tag:", dimInput, valInput,
+    el("button", { class: "act", onclick: go }, "Apply"),
+    el("button", { class: "act", onclick: () => { window.__reqFilter = {}; render(); } }, "Clear")]));
+
+  const rows = await get("/requests", filter);
+  const head = ["time", "user", "action", "model", "status", "tokens", "cached", "cost"];
+  const table = el("table", {}, el("thead", {}, el("tr", {}, head.map((h) => el("th", {}, h)))));
+  const body = el("tbody");
+  for (const r of rows) {
+    body.append(el("tr", {}, [
+      el("td", { class: "muted" }, new Date(r._creationTime).toLocaleTimeString()),
+      el("td", { class: "mono" }, r.userId),
+      el("td", { class: "mono muted" }, r.actionName ?? "—"),
+      el("td", { class: "mono muted" }, r.model),
+      el("td", { class: r.status === "success" ? "ok" : r.status === "blocked" || r.status === "error" ? "bad" : "" }, r.status),
+      el("td", { class: "mono" }, ((r.promptTokens ?? 0) + (r.completionTokens ?? 0)) || "—"),
+      el("td", { class: "mono muted" }, r.cachedTokens || "—"),
+      el("td", { class: "mono" }, usd(r.costNanos)),
+    ]));
+  }
+  table.append(body);
+  main.append(rows.length ? table : el("div", { class: "muted" }, "No matching requests."));
+}
+
+async function renderUsage() {
+  const s = window.__usage ?? (window.__usage = { dimension: "user", value: "", period: "day" });
+  const buckets = await get("/buckets", { dimension: s.dimension });
+  if (!s.value && buckets[0]) s.value = buckets[0].value;
+  const dimInput = el("input", { value: s.dimension, style: "width:110px", onchange: (e) => { s.dimension = e.target.value.trim(); s.value = ""; render(); } });
+  const valSel = el("select", { value: s.value, style: "width:150px", onchange: (e) => { s.value = e.target.value; render(); } },
+    buckets.map((b) => el("option", { value: b.value }, b.value)));
+  const perSel = el("select", { value: s.period, style: "width:90px", onchange: (e) => { s.period = e.target.value; render(); } },
+    [el("option", { value: "day" }, "day"), el("option", { value: "month" }, "month")]);
+  main.append(el("div", { class: "row" }, ["Dimension:", dimInput, "Value:", valSel, "Period:", perSel]));
+  if (!s.value) { main.append(el("div", { class: "muted" }, "No buckets in this dimension yet.")); return; }
+
+  const hist = (await get("/usage", { dimension: s.dimension, value: s.value, period: s.period })).slice().reverse();
+  if (!hist.length) { main.append(el("div", { class: "muted" }, "No usage history yet.")); return; }
+  const max = Math.max(...hist.map((h) => h.spendNanos), 1);
+  main.append(el("h2", {}, "Spend per " + s.period + " — " + s.dimension + " \"" + s.value + "\""));
+  main.append(el("div", { class: "bars" }, hist.map((h) =>
+    el("div", { class: "bar", title: h.stamp + ": " + usd(h.spendNanos), style: "height:" + Math.max(2, (h.spendNanos / max) * 100) + "%" },
+      el("span", {}, h.stamp.slice(5))))));
+  const total = hist.reduce((a, h) => a + h.spendNanos, 0);
+  main.append(el("div", { class: "muted", style: "margin-top:26px" }, hist.length + " " + s.period + "s · " + usd(total) + " total"));
+}
+
+async function renderSettings() {
+  const g = await get("/global");
+  main.append(el("h2", {}, "Global (deployment-wide) cap"));
+  const setG = (patch) => post("/global/setLimits", patch).then(render);
+  main.append(el("div", { class: "row" }, [
+    "Daily $:", numInput(g.dailySpendLimitNanos, (v) => setG({ dailySpendLimitNanos: v }), { money: true }),
+    "Lifetime $:", numInput(g.lifetimeSpendLimitNanos, (v) => setG({ lifetimeSpendLimitNanos: v }), { money: true }),
+    el("span", { class: "pill" }, "today " + usd(g.spentTodayNanos) + " · total " + usd(g.spentTotalNanos)),
+  ]));
+  main.append(el("h2", {}, "Alerts & retention"));
+  main.append(el("div", { class: "row" }, [
+    "Alert at %:", numInput(g.defaultWarnAtPct == null ? undefined : Math.round(g.defaultWarnAtPct * 100),
+      (v) => post("/global/setAlertDefaults", { warnAtPct: v == null ? undefined : v / 100 }).then(render), { width: 55 }),
+    "Retention (ms):", numInput(g.retentionMs, (v) => post("/global/setRetention", { retentionMs: v ?? 0 }).then(render), { width: 130 }),
+  ]));
+
+  const prices = await get("/prices");
+  main.append(el("h2", {}, "Model prices (nanodollars / Mtok)"));
+  const table = el("table", {}, el("thead", {}, el("tr", {}, ["model", "input", "output", "cached", ""].map((h) => el("th", {}, h)))));
+  const body = el("tbody");
+  for (const [model, p] of Object.entries(prices)) {
+    body.append(el("tr", {}, [
+      el("td", { class: "mono" }, model),
+      el("td", { class: "mono" }, p.input),
+      el("td", { class: "mono" }, p.output),
+      el("td", { class: "mono muted" }, p.cached ?? "default"),
+      el("td", {}, p.overridden ? el("span", { class: "pill" }, "override") : ""),
+    ]));
+  }
+  table.append(body);
+  main.append(table);
+}
+
+render();
+</script>
+</body>
+</html>`;