feat(playground): add StreamingProof section linking to streaming demo (#16)

The pitch landing now surfaces the streaming wedge between the
inspection grid and the receipts band. Section copy frames the
wedge ("stream tokens, render 500 rows in 30s") and shows three
H13-derived metrics — frame p95 9ms, 0 long tasks, 1k updates/sec
sustained. CTA links to /streaming/, which is where the standalone
apps/streaming-demo app is expected to deploy.

Numbers come from the H13 hypothesis report (S5 streaming-updates,
hypothesis scale, 3 repeats) merged in PR #15. They are not yet
wired to a live source; treating them as a placeholder is consistent
with how ReceiptsBand currently handles its own metrics.

Order of sections in the pitch landing is now:
  PitchHero → PitchGrid → StreamingProof → ReceiptsBand

Tests: 3 new for the section + 1 updated app.test.tsx ordering check.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: blove

apps/playground/src/__tests__/app.test.tsx

@@ -40,28 +40,35 @@ describe("<App />", () => {
     expect(screen.getByRole("main")).toBeInTheDocument();
   });
 
-  test("renders the three section components in order inside <main>", () => {
+  test("renders sections in order inside <main>: hero → grid → streaming → receipts", () => {
     render(<App />);
     const main = screen.getByRole("main");
 
-    // hero h1 appears before receipts h2; grid section has id="grid"
     const h1 = within(main).getByRole("heading", { level: 1 });
-    const h2 = within(main).getByRole("heading", { level: 2 });
     const grid = main.querySelector("#grid");
+    const streamingHeading = within(main).getByRole("heading", {
+      name: /stream.*tokens/i,
+    });
+    const receiptsHeading = within(main).getByRole("heading", {
+      name: /receipts.*not claims/i,
+    });
 
     expect(h1).toBeInTheDocument();
-    expect(h2).toBeInTheDocument();
     expect(grid).toBeInTheDocument();
+    expect(streamingHeading).toBeInTheDocument();
+    expect(receiptsHeading).toBeInTheDocument();
 
-    // DOM order: h1 (hero) → grid section → h2 (receipts)
-    const h1Pos = Array.from(main.querySelectorAll("*")).indexOf(h1);
-    const gridPos = Array.from(main.querySelectorAll("*")).indexOf(
-      grid as Element,
-    );
-    const h2Pos = Array.from(main.querySelectorAll("*")).indexOf(h2);
+    const all = Array.from(main.querySelectorAll("*"));
+    const positions = {
+      h1: all.indexOf(h1),
+      grid: all.indexOf(grid as Element),
+      streaming: all.indexOf(streamingHeading),
+      receipts: all.indexOf(receiptsHeading),
+    };
 
-    expect(h1Pos).toBeLessThan(gridPos);
-    expect(gridPos).toBeLessThan(h2Pos);
+    expect(positions.h1).toBeLessThan(positions.grid);
+    expect(positions.grid).toBeLessThan(positions.streaming);
+    expect(positions.streaming).toBeLessThan(positions.receipts);
   });
 
   test("no InspectionDemo-era status card or sidebar is rendered", () => {

apps/playground/src/__tests__/streaming-proof.test.tsx

@@ -0,0 +1,41 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+
+import { StreamingProof } from "../streaming-proof";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("<StreamingProof />", () => {
+  test("renders the wedge label and section heading", () => {
+    render(<StreamingProof />);
+    expect(screen.getByText(/wedge.*streaming/i)).toBeInTheDocument();
+    const heading = screen.getByRole("heading", { level: 2 });
+    expect(heading).toHaveTextContent(/stream/i);
+    expect(heading).toHaveTextContent(/tokens/i);
+    expect(heading).toHaveTextContent(/500 rows/i);
+  });
+
+  test("renders the three H13 metrics in order", () => {
+    render(<StreamingProof />);
+    const metrics = screen.getAllByRole("listitem");
+    expect(metrics).toHaveLength(3);
+
+    expect(metrics[0]).toHaveTextContent(/9ms/i);
+    expect(metrics[0]).toHaveTextContent(/frame p95/i);
+
+    expect(metrics[1]).toHaveTextContent(/^0/);
+    expect(metrics[1]).toHaveTextContent(/long tasks/i);
+
+    expect(metrics[2]).toHaveTextContent(/1k\/s/i);
+    expect(metrics[2]).toHaveTextContent(/updates sustained/i);
+  });
+
+  test("renders a link to the streaming demo", () => {
+    render(<StreamingProof />);
+    const link = screen.getByRole("link", { name: /watch it stream/i });
+    expect(link).toHaveAttribute("href", "/streaming/");
+  });
+});

apps/playground/src/app.tsx

@@ -3,6 +3,7 @@ import { Footer, Nav } from "@pretable/ui";
 import { PitchGrid } from "./pitch-grid";
 import { PitchHero } from "./pitch-hero";
 import { ReceiptsBand } from "./receipts-band";
+import { StreamingProof } from "./streaming-proof";
 
 const APP_VERSION = import.meta.env.VITE_APP_VERSION as string;
 
@@ -13,6 +14,7 @@ export function App() {
       <main>
         <PitchHero />
         <PitchGrid />
+        <StreamingProof />
         <ReceiptsBand />
       </main>
       {/* TODO(direction-D): wire ciStatus to a real source (status/runsets/*.json

apps/playground/src/streaming-proof.tsx

@@ -0,0 +1,57 @@
+import { Receipt } from "@pretable/ui";
+
+interface StreamingMetric {
+  value: string;
+  caption: string;
+}
+
+// Real numbers from H13 (S5 streaming-updates, hypothesis scale, 3 repeats,
+// merged in PR #15). The hypothesis report at status/runsets/ is the source
+// of truth; these get refreshed when bench:matrix re-runs.
+const METRICS: readonly StreamingMetric[] = [
+  { value: "9ms", caption: "frame p95 (≤ 16ms budget)" },
+  { value: "0", caption: "long tasks" },
+  { value: "1k/s", caption: "updates sustained" },
+];
+
+export function StreamingProof() {
+  return (
+    <section className="bg-cream text-ink border-b border-cream-rule px-7 py-[52px] md:px-10">
+      <div className="mx-auto max-w-[1240px]">
+        <p className="font-mono text-[11px] uppercase tracking-[0.08em] text-amber-ink">
+          Wedge · streaming
+        </p>
+        <h2 className="mt-3 font-display text-[36px] leading-[1.08] tracking-[-0.02em] md:text-[44px]">
+          Stream <em className="italic text-amber-ink">tokens</em>.
+          <br className="hidden md:block" /> Render <Receipt>500 rows</Receipt>{" "}
+          in 30s.
+        </h2>
+        <p className="mt-5 max-w-[760px] font-display text-[18px] leading-[1.44] text-ink-dim">
+          An OpenAI Responses stream, parsed live, batched on{" "}
+          <Receipt>requestAnimationFrame</Receipt>, applied to the same grid
+          that proved it scrolls. The frame budget stays under one 60Hz frame.
+        </p>
+        <ul className="mt-8 grid grid-cols-3 gap-6">
+          {METRICS.map((metric) => (
+            <li key={metric.caption} className="border-t border-ink pt-3">
+              <div className="font-display text-[36px] leading-[1] tracking-[-0.02em] md:text-[44px]">
+                {metric.value}
+              </div>
+              <div className="mt-1 font-mono text-[12px] text-ink-dim">
+                {metric.caption}
+              </div>
+            </li>
+          ))}
+        </ul>
+        <div className="mt-8">
+          <a
+            href="/streaming/"
+            className="inline-flex items-center gap-2 rounded-[2px] bg-ink px-[18px] py-[10px] text-[13px] text-cream-hi hover:bg-ink/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-ink focus-visible:ring-offset-2 focus-visible:ring-offset-cream"
+          >
+            Watch it stream →
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}