feat(costs): add billing, quota, and budget control plane

ui/src/components/AccountingModelCard.tsx

@@ -0,0 +1,69 @@
+import { Database, Gauge, ReceiptText } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+
+const SURFACES = [
+  {
+    title: "Inference ledger",
+    description: "Request-scoped usage and billed runs from cost_events.",
+    icon: Database,
+    points: ["tokens + billed dollars", "provider, biller, model", "subscription and overage aware"],
+    tone: "from-sky-500/12 via-sky-500/6 to-transparent",
+  },
+  {
+    title: "Finance ledger",
+    description: "Account-level charges that are not one prompt-response pair.",
+    icon: ReceiptText,
+    points: ["top-ups, refunds, fees", "Bedrock provisioned or training charges", "credit expiries and adjustments"],
+    tone: "from-amber-500/14 via-amber-500/6 to-transparent",
+  },
+  {
+    title: "Live quotas",
+    description: "Provider or biller windows that can stop traffic in real time.",
+    icon: Gauge,
+    points: ["provider quota windows", "biller credit systems", "errors surfaced directly"],
+    tone: "from-emerald-500/14 via-emerald-500/6 to-transparent",
+  },
+] as const;
+
+export function AccountingModelCard() {
+  return (
+    <Card className="relative overflow-hidden border-border/70">
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(244,114,182,0.08),transparent_35%),radial-gradient(circle_at_bottom_right,rgba(56,189,248,0.1),transparent_32%)]" />
+      <CardHeader className="relative px-5 pt-5 pb-2">
+        <CardTitle className="text-sm font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+          Accounting model
+        </CardTitle>
+        <CardDescription className="max-w-2xl text-sm leading-6">
+          Paperclip now separates request-level inference usage from account-level finance events.
+          That keeps provider reporting honest when the biller is OpenRouter, Cloudflare, Bedrock, or another intermediary.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="relative grid gap-3 px-5 pb-5 md:grid-cols-3">
+        {SURFACES.map((surface) => {
+          const Icon = surface.icon;
+          return (
+            <div
+              key={surface.title}
+              className={`rounded-2xl border border-border/70 bg-gradient-to-br ${surface.tone} p-4 shadow-sm`}
+            >
+              <div className="mb-3 flex items-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-full border border-border/70 bg-background/80">
+                  <Icon className="h-4 w-4 text-foreground" />
+                </div>
+                <div>
+                  <div className="text-sm font-semibold">{surface.title}</div>
+                  <div className="text-xs text-muted-foreground">{surface.description}</div>
+                </div>
+              </div>
+              <div className="space-y-1.5 text-xs text-muted-foreground">
+                {surface.points.map((point) => (
+                  <div key={point}>{point}</div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}