P5 exit: usage metering, credit billing, promo codes, 3-step wizard

- LlmEvent::Usage across all three providers (Scripted deterministic
  word-count accounting; Anthropic message_start/delta usage; OpenAI-compat
  stream_options include_usage)
- tc-billing: ceil(tokens/1000) min 1 credit; lots drain oldest-first under
  FOR UPDATE; balance clamps at zero while the usage ledger records the
  full obligation; promo codes redeem exactly once via CAS (migration 0006)
- Runtime charges every completed run (billing failure never fails a run);
  proven: 1 token in + 3 out -> 1 credit deducted
- API: GET /api/team/usage, POST /api/credits/redeem (409 on reuse, audited)
- Credits page: balance, 7-day usage meter with runway estimate, PromoRedeem
- /claws/new is the full §9 wizard: ?step=identity|access|slack deep-linked
  progress, accent swatches + name randomizer, access toggles, optional
  Slack step, explicit review-and-confirm (creation = live agent), animated
  provisioning state -> straight into chat
- E2E: chat decrements the visible balance and fills the usage meter;
  WELCOME500 adds exactly 500 once then refuses; wizard round trip

140 Rust + 63 frontend tests + 23 Playwright journeys.

Co-Authored-By: Claude Fable 5 <[email protected]>

frontend/src/app/(workspace)/credits/page.tsx

@@ -1,25 +1,66 @@
+import { z } from "zod";
+
+import { PromoRedeem } from "@/components/global/PromoRedeem";
+import { apiFetch } from "@/lib/api/http";
 import { fetchCredits } from "@/lib/api/team";
 
-// Credits page (§8.4): available balance; purchase and usage land in P5.
+const UsageSchema = z.object({
+  tokens_in: z.number(),
+  tokens_out: z.number(),
+  credits: z.number(),
+});
+
+// Credits page (§8.4): balance, 7-day usage meter, promo redemption.
 export default async function CreditsPage() {
-  const credits = await fetchCredits();
+  const [credits, usage] = await Promise.all([
+    fetchCredits(),
+    apiFetch(UsageSchema, "/api/team/usage"),
+  ]);
+  const burn = usage.credits;
+  // Rough runway: at the current 7-day burn, how long does the balance last?
+  const runwayDays =
+    burn > 0 ? Math.floor((credits.available / burn) * 7) : null;
+
   return (
     <section className="mx-auto max-w-3xl px-8 py-12">
       <h1 className="text-2xl font-semibold tracking-tight">Credits</h1>
       <p className="pt-1 text-sm text-muted-foreground">
         Manage balance, subscriptions, and usage
       </p>
+
       <div className="mt-8 rounded-(--radius) border border-border bg-surface-warm p-6 shadow-(--shadow-card)">
         <p className="text-xs uppercase tracking-wide text-muted-foreground">
           Available credits
         </p>
-        <p className="pt-2 font-mono text-xxxl font-semibold">
+        <p
+          data-testid="credit-balance"
+          className="pt-2 font-mono text-xxxl font-semibold"
+        >
           {credits.available.toLocaleString("en-US")}
         </p>
         <p className="pt-2 text-xs text-muted-foreground">
           All credits never expire.
         </p>
       </div>
+
+      <div className="mt-4 rounded-(--radius) border border-border bg-surface-warm p-6">
+        <p className="text-xs uppercase tracking-wide text-muted-foreground">
+          Usage · last 7 days
+        </p>
+        <p className="pt-2 text-sm">
+          {usage.credits.toLocaleString("en-US")} credits ·{" "}
+          {(usage.tokens_in + usage.tokens_out).toLocaleString("en-US")} tokens
+          ({usage.tokens_in.toLocaleString("en-US")} in /{" "}
+          {usage.tokens_out.toLocaleString("en-US")} out)
+        </p>
+        {runwayDays !== null && (
+          <p className="pt-1 text-xs text-muted-foreground">
+            ~{runwayDays} days of runway at this pace.
+          </p>
+        )}
+      </div>
+
+      <PromoRedeem />
     </section>
   );
 }