aigetwey 1.2.0 → 1.3.2

package/CHANGELOG.md

@@ -5,7 +5,47 @@ 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.2] — 2026-06-26
+
+### Fixed
+- **Cache & reasoning token accounting** — OpenAI cached tokens
+  (`prompt_tokens_details.cached_tokens`) on both the streaming and non-streaming
+  paths, plus reasoning tokens on the non-streaming path (OpenAI
+  `completion_tokens_details.reasoning_tokens`, Gemini `thoughtsTokenCount`), were
+  dropped from the usage log. They are now flattened into the canonical usage so
+  cache and reasoning are recorded consistently across streaming and non-streaming
+  for every provider. The `tokens_in`/`tokens_out` reading is unchanged.
+
+## [1.3.1] — 2026-06-26
+
+### Added
+- **Granular cost calculation** — cost now uses separate per-1M rates for
+  non-cached input, cache-read, output, and reasoning tokens instead of a flat
+  input/output split. Models with extended thinking (Claude Sonnet 4, o1, Gemini
+  thinking) are now tracked accurately.
+- **Reasoning token extraction** — extracts `reasoning_tokens` from Anthropic
+  (`thinking_tokens`), OpenAI (`completion_tokens_details.reasoning_tokens`), and
+  Gemini (`thoughtsTokenCount`); stored in the usage log for future display.
+
+## [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
 

package/README.md

@@ -35,9 +35,16 @@ See [CHANGELOG.md](./CHANGELOG.md) for release history.
 - **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. Cost uses separate
+  rates for input, cached-read, output, and reasoning tokens. 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 +124,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 +136,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,
@@ -192,9 +204,16 @@ npm run build           # compile to dist/
 - **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. Biaya dihitung
+  per jenis token (input, cached-read, output, reasoning). 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 +312,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

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/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Script from "next/script";
 import { Inter, JetBrains_Mono } from "next/font/google";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { ToastProvider } from "@/components/ToastProvider";
@@ -14,13 +15,13 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={`dark ${inter.variable} ${jetbrainsMono.variable}`}>
+    <html lang="en" className={`dark ${inter.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
       <head>
         <link
           rel="stylesheet"
           href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block"
         />
-        <script dangerouslySetInnerHTML={{ __html: `try{var t=localStorage.getItem("theme");if(t==="light")document.documentElement.className=document.documentElement.className.replace("dark","light")}catch(e){}` }} />
+        <Script id="theme-init" strategy="beforeInteractive">{`try{var t=localStorage.getItem("theme");if(t==="light")document.documentElement.className=document.documentElement.className.replace("dark","light")}catch(e){}`}</Script>
       </head>
       <body><ThemeProvider><ToastProvider>{children}</ToastProvider></ThemeProvider></body>
     </html>

package/dashboard/src/components/BudgetForm.tsx

@@ -7,8 +7,8 @@ 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";
+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 =>
@@ -34,7 +34,6 @@ 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." },
 ];
 
 /**
@@ -53,14 +52,17 @@ export function BudgetForm({
   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 [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 [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 [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("");
@@ -68,7 +70,6 @@ export function BudgetForm({
 
   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
@@ -78,10 +79,7 @@ export function BudgetForm({
   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;
+  const scopeIdLabel = scopeId;
 
   async function save() {
     const limitNum = Number(limit);
@@ -117,7 +115,7 @@ export function BudgetForm({
             <Icon name="close" size={18} />
           </button>
         </div>
-        <div className="mt-4 grid gap-3 sm:grid-cols-4">
+        <div className="mt-4 grid gap-3 sm:grid-cols-3">
           {SCOPES.map((s) => (
             <button
               key={s.id}
@@ -243,10 +241,10 @@ export function BudgetForm({
 
       {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}
+          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)}

package/dashboard/src/components/{QuotaView.tsx → BudgetTracker.tsx}

@@ -9,44 +9,47 @@ import { fmt, Empty } from "@/components/ui";
 import { BudgetForm } from "@/components/BudgetForm";
 import { Button } from "@/components/Button";
 import { Icon } from "@/components/Icon";
-import type { QuotaSnapshot, BudgetStatus } from "@/lib/gateway";
+import type { BudgetStatus, KeyUsageRow } from "@/lib/gateway";
 
 /**
  * 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.
+ * per-key) with an Add / Edit / Remove flow: consumption vs limit, a fill bar,
+ * and a live reset countdown.
  */
-export function QuotaView() {
-  const [quota, setQuota] = useState<QuotaSnapshot[] | null>(null);
+export function BudgetTracker() {
   const [budgets, setBudgets] = useState<BudgetStatus[]>([]);
+  const [keys, setKeys] = useState<KeyUsageRow[]>([]);
+  const [loaded, setLoaded] = useState(false);
   const [form, setForm] = useState<{ open: boolean; initial: BudgetStatus | null }>({ open: false, initial: null });
   const [error, setError] = useState("");
 
-  const refresh = () =>
-    void adminApi.quota().then((r) => {
+  const refresh = () => {
+    void adminApi.budgets().then((r) => {
       if (!r.ok) setError(r.error ?? "could not reach the gateway");
-      else { setQuota(r.data?.quota ?? []); setBudgets(r.data?.budgets ?? []); }
+      else { setBudgets(r.data?.budgets ?? []); }
+      setLoaded(true);
     });
+    void adminApi.keysUsage().then((r) => { if (r.ok) setKeys(r.data?.keys ?? []); });
+  };
 
   useEffect(() => { refresh(); }, []);
 
   if (error) return <Empty>{error}</Empty>;
-  if (!quota) return <Empty>Loading…</Empty>;
+  if (!loaded) return <Empty>Loading...</Empty>;
 
   return (
     <div>
       <div className="mb-6">
-        <h1 className="text-[22px] font-semibold tracking-tight text-text">Budget Tracker</h1>
+        <h1 className="text-[22px] font-semibold tracking-tight text-text">Budgets</h1>
         <p className="mt-1 text-[13px] text-text-muted">
-          Spend caps (USD or tokens) and per-provider token quotas, with live reset countdowns.
+          Spend caps (USD or tokens) with live reset countdowns.
         </p>
       </div>
 
-      {/* ── Budgets ── */}
+      {/* -- Budgets -- */}
       <div className="mb-6">
         <div className="mb-3 flex items-center justify-between">
-          <h2 className="text-[15px] font-semibold text-text">Budgets</h2>
+          <h2 className="text-[15px] font-semibold text-text">Overall</h2>
           {!form.open && (
             <Button onClick={() => setForm({ open: true, initial: null })}>
               <Icon name="add" size={16} /> Add budget
@@ -63,11 +66,11 @@ export function QuotaView() {
           />
         )}
 
-        {budgets.length === 0 ? (
+        {budgets.filter((b) => b.scope.type !== "key").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) => (
+            {budgets.filter((b) => b.scope.type !== "key").map((b) => (
               <RichCard
                 key={b.key}
                 header={
@@ -117,50 +120,62 @@ export function QuotaView() {
         )}
       </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>
+      {/* -- Keys -- */}
+      <div>
+        <h2 className="mb-3 text-[15px] font-semibold text-text">Keys</h2>
+        {keys.length === 0 ? (
+          <Empty>No gateway keys yet. Add one on the Endpoint page.</Empty>
+        ) : (
           <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" : q.alert ? "warn" : "live"}>
-                    {q.exhausted ? "exhausted" : q.alert ? "alert" : "active"}
-                  </Badge>
-                </>
-              }
-            >
-              <div className="space-y-2.5">
-                {q.limit_tokens ? (
-                  <div className="h-1.5 overflow-hidden rounded-full bg-surface-2">
-                    <div
-                      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)}%` }}
-                    />
+            {keys.map((k) => (
+              <RichCard
+                key={k.fingerprint}
+                header={
+                  <>
+                    <CardTitle title={k.name} sub={k.budget ? `key · ${k.budget.window}` : "key · no limit"} />
+                    {k.expires && Date.now() > k.expires ? (
+                      <Badge tone="down">expired</Badge>
+                    ) : k.budget?.exhausted ? (
+                      <Badge tone="down">exhausted</Badge>
+                    ) : (
+                      <Badge tone="live">active</Badge>
+                    )}
+                  </>
+                }
+              >
+                <div className="space-y-2.5">
+                  {k.budget ? (
+                    <>
+                      <div className="h-1.5 overflow-hidden rounded-full bg-surface-2">
+                        <div
+                          className={`h-full rounded-full transition-all ${k.budget.exhausted ? "bg-danger" : k.budget.alert ? "bg-warning" : "bg-accent"}`}
+                          style={{ width: `${Math.min(100, Math.round(k.budget.pct * 100))}%` }}
+                        />
+                      </div>
+                      <div className="flex items-center justify-between text-[12px]">
+                        <span className="tnum text-text-muted">
+                          {k.budget.unit === "usd"
+                            ? `$${k.budget.spent.toFixed(2)} / $${k.budget.limit.toFixed(2)}`
+                            : `${fmt.compact(k.budget.spent)} / ${fmt.compact(k.budget.limit)} tokens`}
+                        </span>
+                        <CooldownTimer ms={k.budget.reset_in_ms} tone="muted" icon="restart_alt" keepZero />
+                      </div>
+                    </>
+                  ) : (
+                    <div className="flex items-center justify-between text-[12px]">
+                      <span className="tnum text-text-muted">${k.spent.toFixed(2)} spent</span>
+                      <span className="text-text-subtle">no limit</span>
+                    </div>
+                  )}
+                  <div className="text-[11px] text-text-subtle">
+                    {k.expires ? `expires ${fmt.date(k.expires)}` : "no expiry"}
                   </div>
-                ) : null}
-                <div className="flex items-center justify-between text-[12px]">
-                  <span className="tnum text-text-muted">
-                    {fmt.compact(q.consumed)}
-                    {q.limit_tokens ? ` / ${fmt.compact(q.limit_tokens)}` : ""} tokens
-                  </span>
-                  <CooldownTimer ms={q.reset_in_ms} tone="muted" icon="restart_alt" keepZero />
                 </div>
-              </div>
-            </RichCard>
-          ))}
+              </RichCard>
+            ))}
           </div>
-        </>
-      )}
+        )}
+      </div>
     </div>
   );
 }

package/dashboard/src/components/CooldownTimer.tsx

@@ -6,7 +6,7 @@ import { fmt } from "./ui";
 
 /**
  * Live countdown from a gateway-snapshot remaining-ms. Counts down locally each
- * second from render. Used for both key cooldowns (danger tone) and quota window
+ * second from render. Used for both key cooldowns (danger tone) and budget window
  * resets (muted tone). Renders nothing once it hits zero unless `keepZero`.
  */
 export function CooldownTimer({