diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 000000000..344aa68fb
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "website-dev",
+      "runtimeExecutable": "/bin/bash",
+      "runtimeArgs": ["-c", "export PATH=/Users/blove/.nvm/versions/node/v22.14.0/bin:$PATH && npx nx serve website"],
+      "port": 3000
+    }
+  ]
+}
diff --git a/apps/website/content/docs-v2/api/stream-resource.mdx b/apps/website/content/docs-v2/api/stream-resource.mdx
new file mode 100644
index 000000000..62df1cef7
--- /dev/null
+++ b/apps/website/content/docs-v2/api/stream-resource.mdx
@@ -0,0 +1,38 @@
+# streamResource()
+
+Creates a streaming resource connected to a LangGraph agent. Must be called within an Angular injection context.
+
+## Signature
+
+```typescript
+function streamResource<TState>(options: StreamResourceOptions<TState>): StreamResource<TState>
+```
+
+## Options
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `assistantId` | `string` | Agent or graph identifier |
+| `apiUrl` | `string` | LangGraph Platform base URL |
+| `threadId` | `Signal<string \| null> \| string \| null` | Thread to connect to |
+| `onThreadId` | `(id: string) => void` | Called when a new thread is created |
+| `onInterrupt` | `(data: unknown) => void` | Called when the agent pauses for input |
+| `transport` | `StreamTransport` | Custom transport (default: FetchStreamTransport) |
+
+## Return type
+
+streamResource() returns an object with these Signal properties:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `messages()` | `Signal<BaseMessage[]>` | Current message list |
+| `status()` | `Signal<'idle' \| 'streaming' \| 'error'>` | Stream status |
+| `error()` | `Signal<Error \| null>` | Last error, if any |
+| `threadId()` | `Signal<string \| null>` | Current thread ID |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `submit(input)` | Send a message or resume from interrupt |
+| `history()` | Get execution history for time travel |
diff --git a/apps/website/content/docs-v2/getting-started/introduction.mdx b/apps/website/content/docs-v2/getting-started/introduction.mdx
new file mode 100644
index 000000000..53fc6dcef
--- /dev/null
+++ b/apps/website/content/docs-v2/getting-started/introduction.mdx
@@ -0,0 +1,28 @@
+# Introduction
+
+StreamResource brings full parity with React's `useStream()` hook to Angular 20+. It's the enterprise streaming resource for LangChain and Angular — built natively with Angular Signals, not wrapped or adapted.
+
+<Callout type="info" title="Who is this for?">
+StreamResource serves two audiences: Angular developers building AI-powered apps, and AI/agent developers who need an Angular frontend.
+</Callout>
+
+## What you'll build
+
+With streamResource(), you can build Angular applications that connect to LangGraph agents with:
+
+- **Token-by-token streaming** via SSE
+- **Thread persistence** across sessions
+- **Human-in-the-loop** interrupts and approvals
+- **Time travel** debugging
+- **Deterministic testing** with MockStreamTransport
+
+## Next steps
+
+<CardGroup cols={2}>
+  <Card title="Quick Start" href="/docs/getting-started/quickstart">
+    Build your first streaming chat in 5 minutes
+  </Card>
+  <Card title="Installation" href="/docs/getting-started/installation">
+    Detailed setup and configuration guide
+  </Card>
+</CardGroup>
diff --git a/apps/website/content/docs-v2/guides/streaming.mdx b/apps/website/content/docs-v2/guides/streaming.mdx
new file mode 100644
index 000000000..55d2fde6b
--- /dev/null
+++ b/apps/website/content/docs-v2/guides/streaming.mdx
@@ -0,0 +1,53 @@
+# Streaming
+
+StreamResource provides token-by-token streaming from LangGraph agents via Server-Sent Events (SSE). Every update lands directly in Angular Signals.
+
+<Callout type="tip" title="Prerequisites">
+Make sure you've completed the Installation guide first.
+</Callout>
+
+## Basic streaming
+
+<Tabs items={['TypeScript', 'Template']}>
+<Tab>
+
+```typescript
+// chat.component.ts
+const chat = streamResource<{ messages: BaseMessage[] }>({
+  assistantId: 'chat_agent',
+});
+
+// Status updates as streaming progresses
+const isStreaming = computed(() => chat.status() === 'streaming');
+```
+
+</Tab>
+<Tab>
+
+```html
+<!-- chat.component.html -->
+@for (msg of chat.messages(); track $index) {
+  <p [class.streaming]="$last && isStreaming()">
+    {{ msg.content }}
+  </p>
+}
+```
+
+</Tab>
+</Tabs>
+
+## Stream status
+
+The `status()` signal reports the current state:
+
+<Steps>
+<Step title="idle">
+No active stream. Ready to send a message.
+</Step>
+<Step title="streaming">
+Tokens are arriving. Messages update in real-time.
+</Step>
+<Step title="error">
+Something went wrong. Check the error() signal for details.
+</Step>
+</Steps>
diff --git a/apps/website/e2e/website.spec.ts b/apps/website/e2e/website.spec.ts
index 82d636e8c..fc191a4b9 100644
--- a/apps/website/e2e/website.spec.ts
+++ b/apps/website/e2e/website.spec.ts
@@ -7,14 +7,13 @@ test('landing page renders hero headline', async ({ page }) => {
   expect(headline).toContain('Angular');
 });
 
-test('landing page renders architecture diagram', async ({ page }) => {
+test('landing page renders architecture section', async ({ page }) => {
   await page.goto('/');
-  await expect(page.locator('svg[aria-label*="Architecture"]')).toBeVisible();
+  await expect(page.getByText('Architecture').first()).toBeVisible();
 });
 
 test('landing page renders 6 feature cards', async ({ page }) => {
   await page.goto('/');
-  // Feature section contains h2 "Features" and 6 cards
   const featureSection = page.locator('section').filter({ hasText: 'Features' });
   await expect(featureSection).toBeVisible();
 });
@@ -30,19 +29,18 @@ test('pricing page shows 4 plan cards', async ({ page }) => {
 test('pricing page lead form validates required fields', async ({ page }) => {
   await page.goto('/pricing');
   await page.click('button[type="submit"]');
-  // HTML5 validation prevents submit — form should still be visible
   await expect(page.locator('form')).toBeVisible();
 });
 
 test('docs page renders sidebar and content', async ({ page }) => {
-  await page.goto('/docs/deep-agents/getting-started/overview/overview/python');
+  await page.goto('/docs/getting-started/introduction');
   await expect(page.locator('aside')).toBeVisible();
   await expect(page.locator('article')).toBeVisible();
 });
 
-test('api reference page renders', async ({ page }) => {
-  await page.goto('/api-reference');
-  await expect(page.getByText('streamResource()', { exact: true }).first()).toBeVisible();
+test('api reference renders in docs', async ({ page }) => {
+  await page.goto('/docs/api/stream-resource');
+  await expect(page.getByText('streamResource()').first()).toBeVisible();
 });
 
 test('nav has pricing link', async ({ page }) => {
diff --git a/apps/website/lib/design-tokens.ts b/apps/website/lib/design-tokens.ts
index d701c150c..695e26e40 100644
--- a/apps/website/lib/design-tokens.ts
+++ b/apps/website/lib/design-tokens.ts
@@ -3,23 +3,37 @@
  */
 export const tokens = {
   colors: {
-    bg: '#080B14',
-    accent: '#6C8EFF',
-    accentGlow: 'rgba(108, 142, 255, 0.35)',
-    accentBorder: 'rgba(108, 142, 255, 0.15)',
-    accentBorderHover: 'rgba(108, 142, 255, 0.40)',
-    accentSurface: 'rgba(108, 142, 255, 0.08)',
-    textPrimary: '#EEF1FF',
-    textSecondary: '#8B96C8',
-    textMuted: '#4A527A',
-    sidebarBg: '#0A0D18',
+    bg: '#f8f9fc',
+    accent: '#004090',
+    accentLight: '#64C3FD',
+    accentGlow: 'rgba(0, 64, 144, 0.2)',
+    accentBorder: 'rgba(0, 64, 144, 0.15)',
+    accentBorderHover: 'rgba(0, 64, 144, 0.3)',
+    accentSurface: 'rgba(0, 64, 144, 0.06)',
+    textPrimary: '#1a1a2e',
+    textSecondary: '#555770',
+    textMuted: '#8b8fa3',
+    sidebarBg: 'rgba(255, 255, 255, 0.45)',
     angularRed: '#DD0031',
   },
+  glass: {
+    bg: 'rgba(255, 255, 255, 0.45)',
+    bgHover: 'rgba(255, 255, 255, 0.55)',
+    blur: '16px',
+    border: 'rgba(255, 255, 255, 0.6)',
+    shadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
+  },
+  gradient: {
+    warm: 'radial-gradient(circle, rgba(221, 0, 49, 0.18), transparent 70%)',
+    cool: 'radial-gradient(circle, rgba(0, 64, 144, 0.18), transparent 70%)',
+    coolLight: 'radial-gradient(circle, rgba(100, 195, 253, 0.15), transparent 70%)',
+    bgFlow: 'linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%)',
+  },
   glow: {
-    hero: '0 0 40px rgba(108, 142, 255, 0.5)',
-    demo: '0 0 30px rgba(108, 142, 255, 0.25)',
-    card: '0 0 24px rgba(108, 142, 255, 0.3)',
-    border: '0 0 12px rgba(108, 142, 255, 0.2)',
-    button: '0 0 16px rgba(108, 142, 255, 0.4)',
+    hero: '0 0 60px rgba(0, 64, 144, 0.15)',
+    demo: '0 0 30px rgba(0, 64, 144, 0.1)',
+    card: '0 0 24px rgba(0, 64, 144, 0.1)',
+    border: '0 0 12px rgba(0, 64, 144, 0.08)',
+    button: '0 0 16px rgba(0, 64, 144, 0.15)',
   },
 } as const;
diff --git a/apps/website/src/app/api-reference/page.tsx b/apps/website/src/app/api-reference/page.tsx
deleted file mode 100644
index 7e2ad5994..000000000
--- a/apps/website/src/app/api-reference/page.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { ApiRefTable, type ApiEntry } from '../../components/docs/ApiRefTable';
-
-// Placeholder entries — replaced by generated api-docs.json in Task W9
-const ENTRIES: ApiEntry[] = [
-  {
-    name: 'streamResource()',
-    type: 'function',
-    description: 'Creates a streaming resource connected to a LangGraph agent. Must be called within an Angular injection context.',
-    params: [
-      { name: 'assistantId', type: 'string', desc: 'Agent or graph identifier.' },
-      { name: 'apiUrl', type: 'string', desc: 'LangGraph Platform base URL.' },
-      { name: 'threadId', type: 'Signal<string | null> | string | null', desc: 'Thread to connect to. Pass a signal for reactive updates.' },
-      { name: 'onThreadId', type: '(id: string) => void', desc: 'Called when a new thread is auto-created.' },
-    ],
-  },
-  {
-    name: 'provideStreamResource()',
-    type: 'function',
-    description: 'Angular provider factory. Registers global defaults for apiUrl and transport.',
-    params: [
-      { name: 'config', type: 'StreamResourceConfig', desc: 'Global config merged with per-call options.' },
-    ],
-  },
-];
-
-export default function ApiReferencePage() {
-  return (
-    <div className="pt-24 px-8 py-16 max-w-4xl mx-auto">
-      <p className="font-mono text-xs uppercase tracking-widest mb-4" style={{ color: '#6C8EFF' }}>API Reference</p>
-      <h1
-        style={{
-          fontFamily: 'var(--font-garamond)',
-          fontWeight: 800,
-          fontSize: 'clamp(32px, 4vw, 56px)',
-          color: '#EEF1FF',
-          marginBottom: 48,
-        }}>
-        API Reference
-      </h1>
-      <ApiRefTable entries={ENTRIES} />
-    </div>
-  );
-}
diff --git a/apps/website/src/app/docs/[[...slug]]/page.tsx b/apps/website/src/app/docs/[[...slug]]/page.tsx
index 9bfda3ad1..eb0ecd886 100644
--- a/apps/website/src/app/docs/[[...slug]]/page.tsx
+++ b/apps/website/src/app/docs/[[...slug]]/page.tsx
@@ -1,28 +1,30 @@
 import { notFound } from 'next/navigation';
-import { DocsSidebar } from '../../../components/docs/DocsSidebar';
-import { MdxRenderer } from '../../../components/docs/MdxRenderer';
-import { OpenInCockpit } from '../../../components/docs/open-in-cockpit';
-import { getDocBySlug, getAllDocSlugs, getPromptBySlug } from '../../../lib/docs';
+import { DocsSidebarNew } from '../../../components/docs/DocsSidebarNew';
+import { MdxRendererNew } from '../../../components/docs/MdxRenderer';
+import { DocsSearch } from '../../../components/docs/DocsSearch';
+import { getDocBySlug, getAllDocSlugs } from '../../../lib/docs-new';
 
 export function generateStaticParams() {
-  return getAllDocSlugs().map((slug) => ({ slug }));
+  return getAllDocSlugs().map(({ section, slug }) => ({ slug: [section, slug] }));
 }
 
 export default async function DocsPage({ params }: { params: Promise<{ slug?: string[] }> }) {
   const { slug: rawSlug } = await params;
-  const slug = rawSlug ?? ['deep-agents', 'getting-started', 'overview', 'overview', 'python'];
-  const doc = getDocBySlug(slug);
+  const slugParts = rawSlug ?? ['getting-started', 'introduction'];
+
+  const [section, slug] = slugParts.length >= 2
+    ? [slugParts[0], slugParts[1]]
+    : ['getting-started', 'introduction'];
+
+  const doc = getDocBySlug(section, slug);
   if (!doc) notFound();
-  const prompt = getPromptBySlug(slug) ?? undefined;
 
   return (
-    <div className="flex min-h-screen pt-16">
-      <DocsSidebar activeSlug={slug.join('/')} />
-      <div className="flex-1">
-        <div className="px-8 pt-8">
-          <OpenInCockpit bundle={doc.bundle} />
-        </div>
-        <MdxRenderer source={doc.content} prompt={prompt} />
+    <div className="flex min-h-screen pt-16" style={{ background: 'var(--gradient-bg-flow)' }}>
+      <DocsSearch />
+      <DocsSidebarNew activeSection={section} activeSlug={slug} />
+      <div className="flex-1" style={{ background: 'rgba(255, 255, 255, 0.85)' }}>
+        <MdxRendererNew source={doc.content} section={section} slug={slug} title={doc.title} />
       </div>
     </div>
   );
diff --git a/apps/website/src/app/global.css b/apps/website/src/app/global.css
index bfdf8fb5e..9a7be9bec 100644
--- a/apps/website/src/app/global.css
+++ b/apps/website/src/app/global.css
@@ -1,17 +1,17 @@
 @import "tailwindcss";
 
 @theme {
-  /* Existing design tokens — preserved for backward compat */
-  --color-bg: #080B14;
-  --color-accent: #6C8EFF;
-  --color-accent-glow: rgba(108, 142, 255, 0.35);
-  --color-accent-border: rgba(108, 142, 255, 0.15);
-  --color-accent-border-hover: rgba(108, 142, 255, 0.40);
-  --color-accent-surface: rgba(108, 142, 255, 0.08);
-  --color-text-primary: #EEF1FF;
-  --color-text-secondary: #8B96C8;
-  --color-text-muted: #4A527A;
-  --color-sidebar-bg: #0A0D18;
+  --color-bg: #f8f9fc;
+  --color-accent: #004090;
+  --color-accent-light: #64C3FD;
+  --color-accent-glow: rgba(0, 64, 144, 0.2);
+  --color-accent-border: rgba(0, 64, 144, 0.15);
+  --color-accent-border-hover: rgba(0, 64, 144, 0.3);
+  --color-accent-surface: rgba(0, 64, 144, 0.06);
+  --color-text-primary: #1a1a2e;
+  --color-text-secondary: #555770;
+  --color-text-muted: #8b8fa3;
+  --color-sidebar-bg: rgba(255, 255, 255, 0.45);
   --color-angular-red: #DD0031;
 
   --font-garamond: "EB Garamond", Georgia, serif;
@@ -19,51 +19,27 @@
   --font-mono: "JetBrains Mono", monospace;
 }
 
-/* shadcn CSS variable tokens — new, non-conflicting names */
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-}
-
 :root {
-  /* Existing legacy vars */
-  --color-bg: #080B14;
-  --color-accent: #6C8EFF;
-  --color-accent-glow: rgba(108, 142, 255, 0.35);
-  --color-accent-border: rgba(108, 142, 255, 0.15);
-  --color-accent-border-hover: rgba(108, 142, 255, 0.40);
-  --color-accent-surface: rgba(108, 142, 255, 0.08);
-  --color-text-primary: #EEF1FF;
-  --color-text-secondary: #8B96C8;
-  --color-text-muted: #4A527A;
-  --color-sidebar-bg: #0A0D18;
+  --color-bg: #f8f9fc;
+  --color-accent: #004090;
+  --color-accent-light: #64C3FD;
+  --color-accent-glow: rgba(0, 64, 144, 0.2);
+  --color-accent-border: rgba(0, 64, 144, 0.15);
+  --color-accent-border-hover: rgba(0, 64, 144, 0.3);
+  --color-accent-surface: rgba(0, 64, 144, 0.06);
+  --color-text-primary: #1a1a2e;
+  --color-text-secondary: #555770;
+  --color-text-muted: #8b8fa3;
+  --color-sidebar-bg: rgba(255, 255, 255, 0.45);
   --color-angular-red: #DD0031;
 
-  /* shadcn semantic vars — maps to same palette */
-  --background: #080B14;
-  --foreground: #EEF1FF;
-  --primary: #6C8EFF;
-  --primary-foreground: #ffffff;
-  --card: #0A0D18;
-  --card-foreground: #EEF1FF;
-  --muted: #0D1020;
-  --muted-foreground: #8B96C8;
-  --border: #1a2040;
-  --input: #1a2040;
-  --ring: #6C8EFF;
-  --destructive: #FF6B6B;
-  --destructive-foreground: #ffffff;
+  --glass-bg: rgba(255, 255, 255, 0.45);
+  --glass-bg-hover: rgba(255, 255, 255, 0.55);
+  --glass-blur: 16px;
+  --glass-border: rgba(255, 255, 255, 0.6);
+  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+
+  --gradient-bg-flow: linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%);
 }
 
 * {
@@ -78,16 +54,21 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.glow-text {
-  text-shadow: 0 0 40px rgba(108, 142, 255, 0.5);
+/* Scroll-triggered fade-in for server components */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.glow-demo {
-  box-shadow: 0 0 30px rgba(108, 142, 255, 0.25);
+.animate-on-scroll {
+  animation: fadeInUp 0.6s ease-out both;
+  animation-timeline: view();
+  animation-range: entry 0% entry 30%;
 }
 
-.glow-card {
-  box-shadow: 0 0 24px rgba(108, 142, 255, 0.3);
+/* Smooth scroll */
+html {
+  scroll-behavior: smooth;
 }
 
 /* Shiki code blocks — tokyo-night theme */
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index bc77a22a1..3c33b3f2a 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -1,31 +1,41 @@
-import Script from 'next/script';
 import { HeroTwoCol } from '../components/landing/HeroTwoCol';
 import { ArchDiagram } from '../components/landing/ArchDiagram';
+import { ValueProps } from '../components/landing/ValueProps';
+import { LangGraphShowcase } from '../components/landing/LangGraphShowcase';
+import { DeepAgentsShowcase } from '../components/landing/DeepAgentsShowcase';
 import { FeatureStrip } from '../components/landing/FeatureStrip';
 import { CodeBlock } from '../components/landing/CodeBlock';
+import { CockpitCTA } from '../components/landing/CockpitCTA';
+import { StatsStrip } from '../components/landing/StatsStrip';
+import { tokens } from '../../lib/design-tokens';
 
 export default async function HomePage() {
   return (
-    <>
+    <div style={{ background: tokens.gradient.bgFlow, position: 'relative', overflow: 'hidden' }}>
+      {/* Ambient gradient blobs distributed across the long page */}
+      <div style={{ position: 'absolute', width: 600, height: 600, borderRadius: '50%', background: tokens.gradient.warm, top: -200, left: -150, filter: 'blur(80px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, top: 800, right: -100, filter: 'blur(80px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: tokens.gradient.warm, top: 2000, left: -100, filter: 'blur(80px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, top: 3500, right: -150, filter: 'blur(80px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 350, height: 350, borderRadius: '50%', background: tokens.gradient.coolLight, top: 5000, left: '30%', filter: 'blur(70px)', pointerEvents: 'none' }} />
+
+      {/* 1. Hook — headline, animation, CTA */}
       <HeroTwoCol />
+      {/* 2. Trust — quick credibility stats */}
+      <StatsStrip />
+      {/* 3. Value — why this product, with interactive code tabs */}
+      <ValueProps />
+      {/* 4. Proof — 30-second code example (show, don't tell) */}
+      <CodeBlock />
+      {/* 5. Depth — capability showcases with expandable code */}
+      <LangGraphShowcase />
+      <DeepAgentsShowcase />
+      {/* 6. Architecture — technical credibility for evaluators */}
       <ArchDiagram />
+      {/* 7. Features — compact summary grid */}
       <FeatureStrip />
-      <CodeBlock />
-
-      {/* Angular Elements live demo */}
-      <section className="px-8 py-16 max-w-3xl mx-auto">
-        <p className="font-mono text-xs uppercase tracking-widest mb-8 text-center"
-          style={{ color: '#6C8EFF' }}>Live Demo</p>
-        <div className="rounded-xl overflow-hidden"
-          style={{ border: '1px solid #6C8EFF', boxShadow: '0 0 30px rgba(108,142,255,0.25)' }}>
-          {/* @ts-expect-error — custom element registered by Angular Elements bundle */}
-          <stream-chat-demo
-            api-url={process.env['NEXT_PUBLIC_LANGGRAPH_URL'] ?? 'http://localhost:2024'}
-            assistant-id="chat_agent"
-          />
-        </div>
-        <Script src="/demo/main.js" strategy="lazyOnload" />
-      </section>
-    </>
+      {/* 8. Convert — cockpit CTA */}
+      <CockpitCTA />
+    </div>
   );
 }
diff --git a/apps/website/src/app/pricing/page.tsx b/apps/website/src/app/pricing/page.tsx
index f589df6d7..d492c00fc 100644
--- a/apps/website/src/app/pricing/page.tsx
+++ b/apps/website/src/app/pricing/page.tsx
@@ -4,15 +4,15 @@ import { LeadForm } from '../../components/pricing/LeadForm';
 
 export default function PricingPage() {
   return (
-    <div className="pt-24">
+    <div className="pt-24" style={{ background: 'var(--gradient-bg-flow)', minHeight: '100vh' }}>
       <div className="text-center px-8 py-16">
-        <p className="font-mono text-xs uppercase tracking-widest mb-4" style={{ color: '#6C8EFF' }}>Pricing</p>
+        <p className="font-mono text-xs uppercase tracking-widest mb-4" style={{ color: 'var(--color-accent)' }}>Pricing</p>
         <h1
           style={{
             fontFamily: 'var(--font-garamond)',
             fontWeight: 800,
             fontSize: 'clamp(40px, 6vw, 80px)',
-            color: '#EEF1FF',
+            color: 'var(--color-text-primary)',
           }}>
           Simple, transparent pricing
         </h1>
diff --git a/apps/website/src/components/docs/ApiRefTable.tsx b/apps/website/src/components/docs/ApiRefTable.tsx
index 6288f366b..c41d89ea8 100644
--- a/apps/website/src/components/docs/ApiRefTable.tsx
+++ b/apps/website/src/components/docs/ApiRefTable.tsx
@@ -1,3 +1,5 @@
+import { tokens } from '../../../lib/design-tokens';
+
 export interface ApiEntry {
   name: string;
   type: string;
@@ -12,29 +14,35 @@ export function ApiRefTable({ entries }: { entries: ApiEntry[] }) {
         <div
           key={entry.name}
           className="p-6 rounded-lg"
-          style={{ border: '1px solid rgba(108,142,255,0.15)' }}>
+          style={{
+            border: `1px solid ${tokens.glass.border}`,
+            background: tokens.glass.bg,
+            backdropFilter: `blur(${tokens.glass.blur})`,
+            WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+            boxShadow: tokens.glass.shadow,
+          }}>
           <div className="flex items-baseline gap-3 mb-2">
             <code
               className="font-mono font-bold text-base"
-              style={{ color: '#6C8EFF' }}>
+              style={{ color: tokens.colors.accent }}>
               {entry.name}
             </code>
             <code
               className="font-mono text-xs"
-              style={{ color: '#8B96C8' }}>
+              style={{ color: tokens.colors.textSecondary }}>
               {entry.type}
             </code>
           </div>
-          <p className="text-sm mb-4" style={{ color: '#8B96C8' }}>{entry.description}</p>
+          <p className="text-sm mb-4" style={{ color: tokens.colors.textSecondary }}>{entry.description}</p>
           {entry.params && entry.params.length > 0 && (
             <table className="w-full text-xs" style={{ borderCollapse: 'collapse' }}>
               <thead>
-                <tr style={{ borderBottom: '1px solid rgba(108,142,255,0.15)' }}>
+                <tr style={{ borderBottom: `1px solid ${tokens.colors.accentBorder}` }}>
                   {['Parameter', 'Type', 'Description'].map((h) => (
                     <th
                       key={h}
                       className="text-left py-2 font-mono uppercase"
-                      style={{ color: '#4A527A' }}>
+                      style={{ color: tokens.colors.textMuted }}>
                       {h}
                     </th>
                   ))}
@@ -42,10 +50,10 @@ export function ApiRefTable({ entries }: { entries: ApiEntry[] }) {
               </thead>
               <tbody>
                 {entry.params.map((p) => (
-                  <tr key={p.name} style={{ borderBottom: '1px solid rgba(108,142,255,0.08)' }}>
-                    <td className="py-2 font-mono" style={{ color: '#6C8EFF' }}>{p.name}</td>
-                    <td className="py-2 font-mono" style={{ color: '#8B96C8' }}>{p.type}</td>
-                    <td className="py-2" style={{ color: '#8B96C8' }}>{p.desc}</td>
+                  <tr key={p.name} style={{ borderBottom: `1px solid ${tokens.colors.accentBorder}` }}>
+                    <td className="py-2 font-mono" style={{ color: tokens.colors.accent }}>{p.name}</td>
+                    <td className="py-2 font-mono" style={{ color: tokens.colors.textSecondary }}>{p.type}</td>
+                    <td className="py-2" style={{ color: tokens.colors.textSecondary }}>{p.desc}</td>
                   </tr>
                 ))}
               </tbody>
diff --git a/apps/website/src/components/docs/CopyPromptButton.tsx b/apps/website/src/components/docs/CopyPromptButton.tsx
index e7552d5db..f43ea77d7 100644
--- a/apps/website/src/components/docs/CopyPromptButton.tsx
+++ b/apps/website/src/components/docs/CopyPromptButton.tsx
@@ -1,12 +1,14 @@
 'use client';
 import { useState } from 'react';
+import { tokens } from '../../../lib/design-tokens';
 
 interface Props {
   prompt: string;
   variant?: 'hero' | 'docs';
+  label?: string;
 }
 
-export function CopyPromptButton({ prompt, variant = 'docs' }: Props) {
+export function CopyPromptButton({ prompt, variant = 'docs', label }: Props) {
   const [copied, setCopied] = useState(false);
 
   const handleClick = async () => {
@@ -26,9 +28,9 @@ export function CopyPromptButton({ prompt, variant = 'docs' }: Props) {
       onClick={handleClick}
       aria-label={copied ? 'Prompt copied' : 'Copy prompt'}
       style={{
-        background: isHero ? '#6C8EFF' : 'transparent',
-        border: isHero ? 'none' : '1px solid rgba(108,142,255,0.4)',
-        color: isHero ? '#fff' : '#6C8EFF',
+        background: isHero ? tokens.colors.accent : 'transparent',
+        border: isHero ? 'none' : `1px solid ${tokens.colors.accentBorderHover}`,
+        color: isHero ? '#fff' : tokens.colors.accent,
         fontFamily: 'var(--font-mono)',
         fontSize: isHero ? '13px' : '12px',
         padding: isHero ? '12px 24px' : '8px 16px',
@@ -38,14 +40,14 @@ export function CopyPromptButton({ prompt, variant = 'docs' }: Props) {
       }}
       onMouseEnter={(e) => {
         e.currentTarget.style.boxShadow = isHero
-          ? '0 0 16px rgba(108,142,255,0.4)'
-          : '0 0 10px rgba(108,142,255,0.25)';
+          ? tokens.glow.button
+          : tokens.glow.border;
       }}
       onMouseLeave={(e) => {
         e.currentTarget.style.boxShadow = 'none';
       }}>
-      <span aria-hidden="true">{copied ? '✓' : '⚡'}</span>{' '}
-      {copied ? 'Copied!' : 'Copy prompt'}
+      <span aria-hidden="true">{copied ? '\u2713' : '\u26A1'}</span>{' '}
+      {copied ? 'Copied!' : (label ?? 'Copy prompt')}
     </button>
   );
 }
diff --git a/apps/website/src/components/docs/DocsBreadcrumb.tsx b/apps/website/src/components/docs/DocsBreadcrumb.tsx
new file mode 100644
index 000000000..b8c4e82ed
--- /dev/null
+++ b/apps/website/src/components/docs/DocsBreadcrumb.tsx
@@ -0,0 +1,16 @@
+import Link from 'next/link';
+import { tokens } from '../../../lib/design-tokens';
+import { getDocsSection } from '../../lib/docs-config';
+
+export function DocsBreadcrumb({ section, title }: { section: string; title: string }) {
+  const sectionData = getDocsSection(section);
+  return (
+    <div className="flex items-center gap-2 mb-4" style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: tokens.colors.textMuted }}>
+      <Link href="/docs/getting-started/introduction" style={{ color: tokens.colors.textMuted, textDecoration: 'none' }}>Docs</Link>
+      <span>›</span>
+      <span>{sectionData?.title ?? section}</span>
+      <span>›</span>
+      <span style={{ color: tokens.colors.textSecondary }}>{title}</span>
+    </div>
+  );
+}
diff --git a/apps/website/src/components/docs/DocsPrevNext.tsx b/apps/website/src/components/docs/DocsPrevNext.tsx
new file mode 100644
index 000000000..8c5dca30d
--- /dev/null
+++ b/apps/website/src/components/docs/DocsPrevNext.tsx
@@ -0,0 +1,34 @@
+import Link from 'next/link';
+import { tokens } from '../../../lib/design-tokens';
+import { getPrevNextPages } from '../../lib/docs-config';
+
+export function DocsPrevNext({ section, slug }: { section: string; slug: string }) {
+  const { prev, next } = getPrevNextPages(section, slug);
+
+  return (
+    <div className="flex justify-between gap-4 mt-12 pt-8" style={{ borderTop: `1px solid ${tokens.glass.border}` }}>
+      {prev ? (
+        <Link href={`/docs/${prev.section}/${prev.slug}`} style={{ textDecoration: 'none', flex: 1 }}>
+          <div className="p-4 rounded-lg transition-all" style={{
+            border: `1px solid ${tokens.glass.border}`,
+            background: tokens.glass.bg,
+          }}>
+            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: tokens.colors.textMuted, marginBottom: 4 }}>← Previous</div>
+            <div style={{ fontSize: '0.9rem', color: tokens.colors.textPrimary, fontWeight: 500 }}>{prev.title}</div>
+          </div>
+        </Link>
+      ) : <div style={{ flex: 1 }} />}
+      {next ? (
+        <Link href={`/docs/${next.section}/${next.slug}`} style={{ textDecoration: 'none', flex: 1, textAlign: 'right' }}>
+          <div className="p-4 rounded-lg transition-all" style={{
+            border: `1px solid ${tokens.glass.border}`,
+            background: tokens.glass.bg,
+          }}>
+            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: tokens.colors.textMuted, marginBottom: 4 }}>Next →</div>
+            <div style={{ fontSize: '0.9rem', color: tokens.colors.textPrimary, fontWeight: 500 }}>{next.title}</div>
+          </div>
+        </Link>
+      ) : <div style={{ flex: 1 }} />}
+    </div>
+  );
+}
diff --git a/apps/website/src/components/docs/DocsSearch.tsx b/apps/website/src/components/docs/DocsSearch.tsx
new file mode 100644
index 000000000..7a1da0064
--- /dev/null
+++ b/apps/website/src/components/docs/DocsSearch.tsx
@@ -0,0 +1,120 @@
+'use client';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { allDocsPages, docsConfig } from '../../lib/docs-config';
+import { tokens } from '../../../lib/design-tokens';
+
+export function DocsSearch() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+
+  const results = query.length > 0
+    ? allDocsPages.filter((p) =>
+        p.title.toLowerCase().includes(query.toLowerCase()) ||
+        p.slug.toLowerCase().includes(query.toLowerCase()) ||
+        p.section.toLowerCase().includes(query.toLowerCase())
+      ).slice(0, 8)
+    : allDocsPages.slice(0, 6);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      setOpen((o) => !o);
+    }
+    if (e.key === 'Escape') setOpen(false);
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  useEffect(() => {
+    if (open) {
+      setQuery('');
+      setSelected(0);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [open]);
+
+  const navigate = (page: typeof allDocsPages[0]) => {
+    router.push(`/docs/${page.section}/${page.slug}`);
+    setOpen(false);
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') { e.preventDefault(); setSelected((s) => Math.min(s + 1, results.length - 1)); }
+    if (e.key === 'ArrowUp') { e.preventDefault(); setSelected((s) => Math.max(s - 1, 0)); }
+    if (e.key === 'Enter' && results[selected]) { navigate(results[selected]); }
+  };
+
+  const getSectionLabel = (sectionId: string) => docsConfig.find((s) => s.id === sectionId)?.title ?? sectionId;
+
+  if (!open) return null;
+
+  return (
+    <div style={{
+      position: 'fixed', inset: 0, zIndex: 100,
+      background: 'rgba(0,0,0,0.3)',
+      backdropFilter: 'blur(4px)',
+      display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+      paddingTop: '20vh',
+    }} onClick={() => setOpen(false)}>
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          width: '100%', maxWidth: 520,
+          background: 'rgba(255,255,255,0.95)',
+          backdropFilter: `blur(${tokens.glass.blur})`,
+          border: `1px solid ${tokens.glass.border}`,
+          borderRadius: 12,
+          boxShadow: '0 16px 64px rgba(0,0,0,0.15)',
+          overflow: 'hidden',
+        }}>
+        <div style={{ padding: '12px 16px', borderBottom: `1px solid ${tokens.glass.border}` }}>
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(e) => { setQuery(e.target.value); setSelected(0); }}
+            onKeyDown={handleInputKeyDown}
+            placeholder="Search documentation..."
+            style={{
+              width: '100%', border: 'none', outline: 'none',
+              fontFamily: 'var(--font-inter)', fontSize: '0.95rem',
+              color: tokens.colors.textPrimary, background: 'transparent',
+            }}
+          />
+        </div>
+        <div style={{ maxHeight: 320, overflowY: 'auto', padding: 8 }}>
+          {results.map((page, i) => (
+            <button
+              key={`${page.section}/${page.slug}`}
+              onClick={() => navigate(page)}
+              className="w-full text-left"
+              style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                padding: '10px 12px', borderRadius: 8,
+                background: i === selected ? tokens.colors.accentSurface : 'transparent',
+                border: 'none', cursor: 'pointer', width: '100%',
+              }}>
+              <span style={{ fontSize: '0.875rem', color: tokens.colors.textPrimary }}>{page.title}</span>
+              <span style={{
+                fontFamily: 'var(--font-mono)', fontSize: '0.65rem',
+                color: tokens.colors.textMuted, background: 'rgba(0,0,0,0.04)',
+                padding: '2px 6px', borderRadius: 4,
+              }}>{getSectionLabel(page.section)}</span>
+            </button>
+          ))}
+          {results.length === 0 && (
+            <div style={{ padding: 16, textAlign: 'center', color: tokens.colors.textMuted, fontSize: '0.85rem' }}>
+              No results found
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/website/src/components/docs/DocsSidebar.tsx b/apps/website/src/components/docs/DocsSidebar.tsx
deleted file mode 100644
index 371d0da66..000000000
--- a/apps/website/src/components/docs/DocsSidebar.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import Link from 'next/link';
-import { getAllDocsMeta } from '../../lib/docs';
-
-export function DocsSidebar({ activeSlug }: { activeSlug: string }) {
-  const docs = getAllDocsMeta();
-  return (
-    <aside
-      className="w-56 shrink-0 py-8"
-      style={{
-        borderRight: '1px solid rgba(108,142,255,0.15)',
-        background: '#0A0D18',
-        minHeight: 'calc(100vh - 4rem)',
-        position: 'sticky',
-        top: '4rem',
-      }}>
-      <p
-        className="font-mono text-xs uppercase tracking-widest mb-6 px-4"
-        style={{ color: '#4A527A' }}>
-        Documentation
-      </p>
-      <nav className="flex flex-col">
-        {docs.map((doc) => {
-          const slug = doc.slug.join('/');
-          const isActive = slug === activeSlug;
-          return (
-            <Link
-              key={slug}
-              href={`/docs/${slug}`}
-              className="px-4 py-2 text-sm mx-2 rounded-md transition-all"
-              style={{
-                color: isActive ? '#6C8EFF' : '#8B96C8',
-                background: isActive ? 'rgba(108,142,255,0.1)' : 'transparent',
-              }}>
-              {doc.title}
-            </Link>
-          );
-        })}
-      </nav>
-    </aside>
-  );
-}
diff --git a/apps/website/src/components/docs/DocsSidebarNew.tsx b/apps/website/src/components/docs/DocsSidebarNew.tsx
new file mode 100644
index 000000000..06944162e
--- /dev/null
+++ b/apps/website/src/components/docs/DocsSidebarNew.tsx
@@ -0,0 +1,100 @@
+'use client';
+import { useState } from 'react';
+import Link from 'next/link';
+import { docsConfig, type DocsSection } from '../../lib/docs-config';
+import { tokens } from '../../../lib/design-tokens';
+
+interface Props {
+  activeSection: string;
+  activeSlug: string;
+}
+
+function SectionGroup({ section, activeSection, activeSlug }: { section: DocsSection; activeSection: string; activeSlug: string }) {
+  const [open, setOpen] = useState(true);
+  const headerColor = section.color === 'red' ? tokens.colors.angularRed : tokens.colors.accent;
+
+  return (
+    <div style={{ marginBottom: 16 }}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full text-left px-4 py-1.5 flex items-center justify-between"
+        style={{ background: 'none', border: 'none', cursor: 'pointer' }}>
+        <span className="font-mono text-xs uppercase tracking-wider" style={{ color: headerColor, fontWeight: 600 }}>
+          {section.title}
+        </span>
+        <span style={{ color: tokens.colors.textMuted, fontSize: 10, transition: 'transform 0.2s', transform: open ? 'rotate(0)' : 'rotate(-90deg)' }}>
+          ▾
+        </span>
+      </button>
+
+      {open && (
+        <nav className="flex flex-col mt-1">
+          {section.pages.map((page) => {
+            const isActive = page.section === activeSection && page.slug === activeSlug;
+            return (
+              <Link
+                key={`${page.section}/${page.slug}`}
+                href={`/docs/${page.section}/${page.slug}`}
+                className="px-4 py-1.5 text-sm mx-2 rounded-md transition-all"
+                style={{
+                  color: isActive ? tokens.colors.accent : tokens.colors.textSecondary,
+                  background: isActive ? tokens.colors.accentSurface : 'transparent',
+                  fontSize: '0.825rem',
+                }}>
+                {page.title}
+              </Link>
+            );
+          })}
+        </nav>
+      )}
+    </div>
+  );
+}
+
+export function DocsSidebarNew({ activeSection, activeSlug }: Props) {
+  return (
+    <aside
+      className="w-64 shrink-0 py-6 overflow-y-auto hidden md:block"
+      style={{
+        borderRight: `1px solid ${tokens.glass.border}`,
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+        minHeight: 'calc(100vh - 4rem)',
+        position: 'sticky',
+        top: '4rem',
+      }}>
+      {/* Search trigger */}
+      <div className="px-4 mb-6">
+        <button
+          className="w-full text-left px-3 py-2 rounded-lg text-sm flex items-center justify-between"
+          style={{
+            background: 'rgba(255,255,255,0.5)',
+            border: `1px solid ${tokens.glass.border}`,
+            color: tokens.colors.textMuted,
+            cursor: 'pointer',
+          }}
+          onClick={() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))}>
+          <span style={{ fontSize: '0.8rem' }}>Search docs...</span>
+          <span style={{
+            background: tokens.colors.accentSurface,
+            padding: '1px 6px',
+            borderRadius: 4,
+            fontFamily: 'var(--font-mono)',
+            fontSize: '0.65rem',
+            color: tokens.colors.accent,
+          }}>⌘K</span>
+        </button>
+      </div>
+
+      {docsConfig.map((section) => (
+        <SectionGroup
+          key={section.id}
+          section={section}
+          activeSection={activeSection}
+          activeSlug={activeSlug}
+        />
+      ))}
+    </aside>
+  );
+}
diff --git a/apps/website/src/components/docs/MdxRenderer.tsx b/apps/website/src/components/docs/MdxRenderer.tsx
index 07627ade4..3411bb4e5 100644
--- a/apps/website/src/components/docs/MdxRenderer.tsx
+++ b/apps/website/src/components/docs/MdxRenderer.tsx
@@ -1,22 +1,42 @@
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import { CopyPromptButton } from './CopyPromptButton';
+import { tokens } from '../../../lib/design-tokens';
+import { Callout } from './mdx/Callout';
+import { Steps, Step } from './mdx/Steps';
+import { Tabs, Tab } from './mdx/Tabs';
+import { Card, CardGroup } from './mdx/Card';
+import { CodeGroup } from './mdx/CodeGroup';
+import { DocsBreadcrumb } from './DocsBreadcrumb';
+import { DocsPrevNext } from './DocsPrevNext';
+
+const mdxComponents = {
+  Callout,
+  Steps,
+  Step,
+  Tabs,
+  Tab,
+  Card,
+  CardGroup,
+  CodeGroup,
+};
 
 interface Props {
   source: string;
   prompt?: string;
 }
 
+/** Legacy renderer for old cockpit-based docs */
 export function MdxRenderer({ source, prompt }: Props) {
   return (
-    <article className="prose prose-invert max-w-none py-8 px-8 flex-1"
+    <article className="prose max-w-none py-8 px-8 flex-1"
       style={{
-        '--tw-prose-body': 'var(--color-text-secondary)',
-        '--tw-prose-headings': 'var(--color-text-primary)',
-        '--tw-prose-code': 'var(--color-accent)',
+        '--tw-prose-body': tokens.colors.textSecondary,
+        '--tw-prose-headings': tokens.colors.textPrimary,
+        '--tw-prose-code': tokens.colors.accent,
+        background: 'rgba(255, 255, 255, 0.8)',
       } as React.CSSProperties}>
       {prompt && (
         <div style={{ marginBottom: 24 }}>
-          {/* Copy prompt button — rendered before MDX prose per agentic docs spec */}
           <CopyPromptButton prompt={prompt} variant="docs" />
         </div>
       )}
@@ -24,3 +44,29 @@ export function MdxRenderer({ source, prompt }: Props) {
     </article>
   );
 }
+
+interface NewProps {
+  source: string;
+  section: string;
+  slug: string;
+  title: string;
+}
+
+/** New renderer with custom MDX components, breadcrumbs, and prev/next */
+export function MdxRendererNew({ source, section, slug, title }: NewProps) {
+  return (
+    <div className="flex-1 py-8 px-8 md:px-12 max-w-3xl">
+      <DocsBreadcrumb section={section} title={title} />
+      <article className="prose max-w-none"
+        style={{
+          '--tw-prose-body': tokens.colors.textSecondary,
+          '--tw-prose-headings': tokens.colors.textPrimary,
+          '--tw-prose-code': tokens.colors.accent,
+          '--tw-prose-links': tokens.colors.accent,
+        } as React.CSSProperties}>
+        <MDXRemote source={source} components={mdxComponents} />
+      </article>
+      <DocsPrevNext section={section} slug={slug} />
+    </div>
+  );
+}
diff --git a/apps/website/src/components/docs/mdx/Callout.tsx b/apps/website/src/components/docs/mdx/Callout.tsx
new file mode 100644
index 000000000..c5f321f6c
--- /dev/null
+++ b/apps/website/src/components/docs/mdx/Callout.tsx
@@ -0,0 +1,40 @@
+import { tokens } from '../../../../lib/design-tokens';
+
+const CALLOUT_STYLES = {
+  info: { border: tokens.colors.accent, bg: 'rgba(0, 64, 144, 0.04)' },
+  warning: { border: '#f59e0b', bg: 'rgba(245, 158, 11, 0.04)' },
+  tip: { border: '#22c55e', bg: 'rgba(34, 197, 94, 0.04)' },
+  danger: { border: '#ef4444', bg: 'rgba(239, 68, 68, 0.04)' },
+} as const;
+
+interface Props {
+  type?: keyof typeof CALLOUT_STYLES;
+  title?: string;
+  children: React.ReactNode;
+}
+
+export function Callout({ type = 'info', title, children }: Props) {
+  const style = CALLOUT_STYLES[type];
+  return (
+    <div style={{
+      padding: '12px 16px',
+      borderRadius: 8,
+      borderLeft: `3px solid ${style.border}`,
+      background: style.bg,
+      marginBottom: 16,
+    }}>
+      {title && (
+        <div style={{
+          fontFamily: 'var(--font-mono)',
+          fontSize: '0.8rem',
+          fontWeight: 600,
+          color: style.border,
+          marginBottom: 4,
+        }}>{title}</div>
+      )}
+      <div style={{ fontSize: '0.875rem', color: tokens.colors.textSecondary, lineHeight: 1.6 }}>
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/website/src/components/docs/mdx/Card.tsx b/apps/website/src/components/docs/mdx/Card.tsx
new file mode 100644
index 000000000..9654dad59
--- /dev/null
+++ b/apps/website/src/components/docs/mdx/Card.tsx
@@ -0,0 +1,44 @@
+import Link from 'next/link';
+import { tokens } from '../../../../lib/design-tokens';
+
+export function CardGroup({ cols = 2, children }: { cols?: number; children: React.ReactNode }) {
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: `repeat(${cols}, 1fr)`,
+      gap: 12,
+      marginBottom: 16,
+    }}>
+      {children}
+    </div>
+  );
+}
+
+export function Card({ title, href, icon, children }: { title: string; href: string; icon?: string; children: React.ReactNode }) {
+  return (
+    <Link href={href} style={{ textDecoration: 'none' }}>
+      <div style={{
+        padding: 16,
+        borderRadius: 10,
+        border: `1px solid ${tokens.glass.border}`,
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+        transition: 'box-shadow 0.2s, border-color 0.2s',
+        cursor: 'pointer',
+      }}>
+        {icon && <div style={{ fontSize: '1.25rem', marginBottom: 6 }}>{icon}</div>}
+        <div style={{
+          fontFamily: 'var(--font-garamond)',
+          fontWeight: 700,
+          fontSize: '1rem',
+          color: tokens.colors.textPrimary,
+          marginBottom: 4,
+        }}>{title}</div>
+        <div style={{ fontSize: '0.8rem', color: tokens.colors.textSecondary, lineHeight: 1.5 }}>
+          {children}
+        </div>
+      </div>
+    </Link>
+  );
+}
diff --git a/apps/website/src/components/docs/mdx/CodeGroup.tsx b/apps/website/src/components/docs/mdx/CodeGroup.tsx
new file mode 100644
index 000000000..b16c99b84
--- /dev/null
+++ b/apps/website/src/components/docs/mdx/CodeGroup.tsx
@@ -0,0 +1,47 @@
+'use client';
+import { useState, Children, isValidElement } from 'react';
+import { tokens } from '../../../../lib/design-tokens';
+
+export function CodeGroup({ children }: { children: React.ReactNode }) {
+  const [active, setActive] = useState(0);
+  const blocks = Children.toArray(children).filter(isValidElement);
+
+  const titles = blocks.map((block, i) => {
+    const pre = block as React.ReactElement<{ 'data-title'?: string }>;
+    return pre.props['data-title'] ?? `File ${i + 1}`;
+  });
+
+  return (
+    <div style={{
+      borderRadius: 12,
+      border: `1px solid ${tokens.glass.border}`,
+      boxShadow: tokens.glass.shadow,
+      overflow: 'hidden',
+      marginBottom: 16,
+    }}>
+      <div style={{
+        display: 'flex', gap: 0,
+        background: 'rgba(26, 27, 38, 0.95)',
+        borderBottom: '1px solid rgba(255,255,255,0.06)',
+      }}>
+        {titles.map((title, i) => (
+          <button
+            key={title}
+            onClick={() => setActive(i)}
+            style={{
+              padding: '8px 14px',
+              fontFamily: 'var(--font-mono)',
+              fontSize: '0.7rem',
+              color: active === i ? '#a9b1d6' : '#4A527A',
+              background: active === i ? 'rgba(255,255,255,0.05)' : 'transparent',
+              border: 'none',
+              cursor: 'pointer',
+            }}>
+            {title}
+          </button>
+        ))}
+      </div>
+      <div>{blocks[active]}</div>
+    </div>
+  );
+}
diff --git a/apps/website/src/components/docs/mdx/Steps.tsx b/apps/website/src/components/docs/mdx/Steps.tsx
new file mode 100644
index 000000000..6fc0d7246
--- /dev/null
+++ b/apps/website/src/components/docs/mdx/Steps.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { tokens } from '../../../../lib/design-tokens';
+
+export function Steps({ children }: { children: React.ReactNode }) {
+  const steps = React.Children.toArray(children);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 16 }}>
+      {steps.map((child, i) => {
+        if (!React.isValidElement(child)) return null;
+        return React.cloneElement(child as React.ReactElement<{ stepNumber: number }>, { stepNumber: i + 1 });
+      })}
+    </div>
+  );
+}
+
+export function Step({ title, children, stepNumber }: { title: string; children: React.ReactNode; stepNumber?: number }) {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <div style={{
+          width: 24, height: 24, borderRadius: '50%',
+          background: tokens.colors.accent, color: '#fff',
+          fontSize: 12, fontWeight: 600,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          flexShrink: 0,
+        }}>{stepNumber ?? 1}</div>
+        <div style={{ width: 1, flex: 1, background: `${tokens.colors.accent}33`, marginTop: 4 }} />
+      </div>
+      <div style={{ flex: 1, paddingBottom: 8 }}>
+        <div style={{
+          fontWeight: 600,
+          fontSize: '0.9rem',
+          color: tokens.colors.textPrimary,
+          marginBottom: 4,
+        }}>{title}</div>
+        <div style={{ fontSize: '0.875rem', color: tokens.colors.textSecondary, lineHeight: 1.6 }}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/website/src/components/docs/mdx/Tabs.tsx b/apps/website/src/components/docs/mdx/Tabs.tsx
new file mode 100644
index 000000000..0e280bba0
--- /dev/null
+++ b/apps/website/src/components/docs/mdx/Tabs.tsx
@@ -0,0 +1,43 @@
+'use client';
+import { useState, Children } from 'react';
+import { tokens } from '../../../../lib/design-tokens';
+
+export function Tabs({ items, children }: { items?: string[]; children: React.ReactNode }) {
+  const [active, setActive] = useState(0);
+  const tabs = Children.toArray(children);
+  const labels = items ?? tabs.map((_, i) => `Tab ${i + 1}`);
+
+  return (
+    <div style={{ marginBottom: 16 }}>
+      <div style={{
+        display: 'flex', gap: 0,
+        borderBottom: `1px solid ${tokens.colors.accentBorder}`,
+      }}>
+        {labels.map((label, i) => (
+          <button
+            key={label}
+            onClick={() => setActive(i)}
+            style={{
+              padding: '8px 16px',
+              fontFamily: 'var(--font-mono)',
+              fontSize: '0.8rem',
+              fontWeight: active === i ? 500 : 400,
+              color: active === i ? tokens.colors.accent : tokens.colors.textMuted,
+              background: 'none',
+              border: 'none',
+              borderBottom: active === i ? `2px solid ${tokens.colors.accent}` : '2px solid transparent',
+              cursor: 'pointer',
+              transition: 'color 0.15s',
+            }}>
+            {label}
+          </button>
+        ))}
+      </div>
+      <div>{tabs[active]}</div>
+    </div>
+  );
+}
+
+export function Tab({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>;
+}
diff --git a/apps/website/src/components/docs/open-in-cockpit.tsx b/apps/website/src/components/docs/open-in-cockpit.tsx
deleted file mode 100644
index b02621457..000000000
--- a/apps/website/src/components/docs/open-in-cockpit.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { toCockpitHref, type DocsBundle } from '../../../../../libs/cockpit-docs/src/index';
-
-interface OpenInCockpitProps {
-  bundle: DocsBundle;
-}
-
-export function OpenInCockpit({ bundle }: OpenInCockpitProps) {
-  return <a href={toCockpitHref(bundle)}>Open in cockpit</a>;
-}
diff --git a/apps/website/src/components/landing/ArchDiagram.tsx b/apps/website/src/components/landing/ArchDiagram.tsx
index 1beb202da..583c96f3a 100644
--- a/apps/website/src/components/landing/ArchDiagram.tsx
+++ b/apps/website/src/components/landing/ArchDiagram.tsx
@@ -1,67 +1,267 @@
 'use client';
-import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { tokens } from '../../../lib/design-tokens';
 
-const NODES = [
-  { id: 'angular', label: 'Angular App', x: 60, y: 100 },
-  { id: 'sr', label: 'streamResource()', x: 260, y: 100 },
-  { id: 'transport', label: 'FetchStreamTransport', x: 480, y: 100 },
-  { id: 'langgraph', label: 'LangGraph Server', x: 700, y: 100 },
+// ── Node data ───────────────────────────────────────────────────────────────
+interface NodeDef {
+  id: string;
+  label: string;
+  subtitle: string;
+  description: string;
+  side: 'angular' | 'bridge' | 'langgraph';
+  icon: string;
+}
+
+const NODES: NodeDef[] = [
+  {
+    id: 'angular',
+    label: 'Angular App',
+    subtitle: 'Components & Signals',
+    description: 'Your Angular components call streamResource() and bind the returned Signals directly in templates. OnPush change detection handles re-renders automatically.',
+    side: 'angular',
+    icon: '🅰️',
+  },
+  {
+    id: 'sr',
+    label: 'streamResource()',
+    subtitle: 'Reactive Bridge',
+    description: 'The core primitive. Creates a reactive resource that exposes messages, status, error, and threadId as Angular Signals. Manages the full agent lifecycle — streaming, interrupts, branching, and thread persistence.',
+    side: 'bridge',
+    icon: '🔗',
+  },
+  {
+    id: 'transport',
+    label: 'FetchStreamTransport',
+    subtitle: 'SSE Connection',
+    description: 'Handles the HTTP/SSE transport layer. Opens a server-sent events connection to LangGraph Cloud, parses streaming chunks, and feeds them into the resource. Swappable with MockStreamTransport for testing.',
+    side: 'bridge',
+    icon: '📡',
+  },
+  {
+    id: 'langgraph',
+    label: 'LangGraph Cloud',
+    subtitle: 'Platform API',
+    description: 'The hosted LangGraph platform. Receives HTTP POST requests to start runs, streams results back via SSE, and manages thread state, checkpoints, and agent routing.',
+    side: 'langgraph',
+    icon: '☁️',
+  },
+  {
+    id: 'agent',
+    label: 'Agent Graph',
+    subtitle: 'State Machine',
+    description: 'Your LangGraph agent definition — a directed graph of nodes with conditional edges. Manages state transitions, supports interrupts for human-in-the-loop, and enables time-travel debugging via checkpoints.',
+    side: 'langgraph',
+    icon: '🔄',
+  },
+  {
+    id: 'tools',
+    label: 'Tool Nodes',
+    subtitle: 'Actions & APIs',
+    description: 'Individual tool implementations that the agent can invoke — database queries, API calls, code execution, file operations. Each tool node receives state, performs an action, and returns updated state.',
+    side: 'langgraph',
+    icon: '🔧',
+  },
 ];
 
+// ── Edge data ───────────────────────────────────────────────────────────────
 const EDGES = [
-  { from: 'angular', to: 'sr', d: 'M 140 100 L 260 100' },
-  { from: 'sr', to: 'transport', d: 'M 390 100 L 480 100' },
-  { from: 'transport', to: 'langgraph', d: 'M 620 100 L 700 100' },
+  { from: 'angular', to: 'sr', label: 'Signal updates' },
+  { from: 'sr', to: 'transport', label: 'Stream events' },
+  { from: 'transport', to: 'langgraph', label: 'SSE ↑ HTTP ↓' },
+  { from: 'langgraph', to: 'agent', label: 'State transitions' },
+  { from: 'agent', to: 'tools', label: 'Tool calls' },
 ];
 
+// ── Style helpers ───────────────────────────────────────────────────────────
+const sideStyle = {
+  angular: {
+    bg: 'rgba(255, 240, 243, 0.45)',
+    border: 'rgba(221, 0, 49, 0.2)',
+    activeBorder: 'rgba(221, 0, 49, 0.5)',
+    glow: '0 0 30px rgba(221, 0, 49, 0.1)',
+    dotColor: tokens.colors.angularRed,
+  },
+  bridge: {
+    bg: 'rgba(245, 240, 255, 0.45)',
+    border: 'rgba(100, 80, 200, 0.2)',
+    activeBorder: 'rgba(100, 80, 200, 0.5)',
+    glow: '0 0 30px rgba(100, 80, 200, 0.1)',
+    dotColor: '#7C5FCF',
+  },
+  langgraph: {
+    bg: 'rgba(234, 243, 255, 0.45)',
+    border: 'rgba(0, 64, 144, 0.2)',
+    activeBorder: 'rgba(0, 64, 144, 0.5)',
+    glow: '0 0 30px rgba(0, 64, 144, 0.1)',
+    dotColor: tokens.colors.accent,
+  },
+};
+
 export function ArchDiagram() {
+  const [activeNode, setActiveNode] = useState<string | null>(null);
+  const active = NODES.find((n) => n.id === activeNode);
+
   return (
-    <section className="px-8 py-16 flex flex-col items-center">
-      <p className="font-mono text-xs uppercase tracking-widest mb-8"
-        style={{ color: 'var(--color-accent)' }}>Architecture</p>
-      <motion.div
-        initial={{ opacity: 0 }}
-        whileInView={{ opacity: 1 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.6 }}>
-        <svg role="img" viewBox="0 0 820 200" width="100%" style={{ maxWidth: 820 }} aria-label="Architecture diagram showing Angular App connecting through streamResource and FetchStreamTransport to LangGraph Server">
-          <defs>
-            <radialGradient id="nodeGlow" cx="50%" cy="50%" r="50%">
-              <stop offset="0%" stopColor="rgba(108,142,255,0.3)" />
-              <stop offset="100%" stopColor="rgba(108,142,255,0)" />
-            </radialGradient>
-          </defs>
-          {EDGES.map((edge) => (
-            <g key={edge.from}>
-              <path d={edge.d} stroke="#6C8EFF" strokeWidth="1.5" fill="none" />
-              <circle r="3" fill="var(--color-accent)">
-                <animateMotion dur="2s" repeatCount="indefinite" path={edge.d} />
-              </circle>
-            </g>
-          ))}
-          {NODES.map((node) => (
-            <g key={node.id}>
-              <ellipse cx={node.x + 10} cy={node.y} rx={50} ry={30} fill="url(#nodeGlow)" />
-              <rect
-                x={node.x - 60} y={node.y - 24}
-                width="140" height="48"
-                rx="6"
-                fill="#080B14"
-                stroke="#6C8EFF"
-                strokeWidth="1"
-              />
-              <text
-                x={node.x + 10} y={node.y + 5}
-                textAnchor="middle"
-                fill="#8B96C8"
-                fontSize="11"
-                fontFamily="var(--font-mono)">
-                {node.label}
-              </text>
-            </g>
-          ))}
-        </svg>
-      </motion.div>
+    <section className="px-8 py-24 max-w-4xl mx-auto">
+      <p className="font-mono text-xs uppercase tracking-widest mb-4 text-center"
+        style={{ color: tokens.colors.accent }}>Architecture</p>
+      <h2 style={{
+        fontFamily: 'var(--font-garamond)',
+        fontWeight: 800,
+        fontSize: 'clamp(28px, 3.5vw, 48px)',
+        color: tokens.colors.textPrimary,
+        textAlign: 'center',
+        marginBottom: 16,
+      }}>How it works</h2>
+      <p className="text-center mb-16" style={{
+        color: tokens.colors.textSecondary,
+        maxWidth: '50ch',
+        margin: '0 auto 64px',
+        lineHeight: 1.6,
+      }}>Click any component to learn how data flows from your Angular app through streamResource to LangGraph and back.</p>
+
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6 items-start">
+        {/* Left: vertical node stack */}
+        <div className="lg:col-span-3 flex flex-col gap-3">
+          {NODES.map((node, i) => {
+            const style = sideStyle[node.side];
+            const isActive = activeNode === node.id;
+            // Show edge label between nodes
+            const edge = i < NODES.length - 1 ? EDGES[i] : null;
+
+            return (
+              <div key={node.id}>
+                {/* Node card */}
+                <motion.button
+                  onClick={() => setActiveNode(isActive ? null : node.id)}
+                  className="w-full text-left rounded-xl p-5 transition-all cursor-pointer"
+                  style={{
+                    background: style.bg,
+                    backdropFilter: `blur(${tokens.glass.blur})`,
+                    WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+                    border: `1.5px solid ${isActive ? style.activeBorder : style.border}`,
+                    boxShadow: isActive ? style.glow : 'none',
+                  }}
+                  initial={{ opacity: 0, x: -20 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.08, duration: 0.4 }}
+                  whileHover={{ boxShadow: style.glow }}>
+                  <div className="flex items-center gap-3">
+                    <span style={{ fontSize: '1.25rem' }}>{node.icon}</span>
+                    <div>
+                      <div style={{
+                        fontFamily: 'var(--font-mono)',
+                        fontSize: '0.875rem',
+                        fontWeight: 600,
+                        color: tokens.colors.textPrimary,
+                      }}>{node.label}</div>
+                      <div style={{
+                        fontFamily: 'var(--font-mono)',
+                        fontSize: '0.7rem',
+                        color: tokens.colors.textMuted,
+                        marginTop: 2,
+                      }}>{node.subtitle}</div>
+                    </div>
+                  </div>
+                </motion.button>
+
+                {/* Edge connector between nodes */}
+                {edge && (
+                  <div className="flex items-center gap-2 py-1.5 pl-8">
+                    <div style={{
+                      width: 1,
+                      height: 20,
+                      background: `linear-gradient(to bottom, ${sideStyle[NODES[i].side].dotColor}40, ${sideStyle[NODES[i + 1].side].dotColor}40)`,
+                    }} />
+                    <span style={{
+                      fontFamily: 'var(--font-mono)',
+                      fontSize: '0.65rem',
+                      color: tokens.colors.textMuted,
+                      letterSpacing: '0.03em',
+                    }}>{edge.label}</span>
+                    {/* Animated dot */}
+                    <motion.div
+                      style={{
+                        width: 4,
+                        height: 4,
+                        borderRadius: '50%',
+                        background: sideStyle[NODES[i].side].dotColor,
+                      }}
+                      animate={{ opacity: [0.3, 1, 0.3] }}
+                      transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.3 }}
+                    />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Right: detail panel */}
+        <div className="lg:col-span-2 lg:sticky lg:top-24">
+          <AnimatePresence mode="wait">
+            {active ? (
+              <motion.div
+                key={active.id}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -10 }}
+                transition={{ duration: 0.2 }}
+                className="rounded-xl p-6"
+                style={{
+                  background: tokens.glass.bg,
+                  backdropFilter: `blur(${tokens.glass.blur})`,
+                  WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+                  border: `1px solid ${sideStyle[active.side].activeBorder}`,
+                  boxShadow: sideStyle[active.side].glow,
+                }}>
+                <div className="flex items-center gap-3 mb-4">
+                  <span style={{ fontSize: '1.5rem' }}>{active.icon}</span>
+                  <div>
+                    <h3 style={{
+                      fontFamily: 'var(--font-garamond)',
+                      fontWeight: 700,
+                      fontSize: '1.25rem',
+                      color: tokens.colors.textPrimary,
+                    }}>{active.label}</h3>
+                    <span style={{
+                      fontFamily: 'var(--font-mono)',
+                      fontSize: '0.7rem',
+                      color: tokens.colors.textMuted,
+                    }}>{active.subtitle}</span>
+                  </div>
+                </div>
+                <p style={{
+                  fontSize: '0.9rem',
+                  color: tokens.colors.textSecondary,
+                  lineHeight: 1.7,
+                }}>{active.description}</p>
+              </motion.div>
+            ) : (
+              <motion.div
+                key="placeholder"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="rounded-xl p-6 text-center"
+                style={{
+                  background: tokens.glass.bg,
+                  backdropFilter: `blur(${tokens.glass.blur})`,
+                  WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+                  border: `1px solid ${tokens.glass.border}`,
+                }}>
+                <p style={{
+                  fontFamily: 'var(--font-mono)',
+                  fontSize: '0.8rem',
+                  color: tokens.colors.textMuted,
+                }}>Click a component to see details</p>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
     </section>
   );
 }
diff --git a/apps/website/src/components/landing/CapabilityCard.tsx b/apps/website/src/components/landing/CapabilityCard.tsx
new file mode 100644
index 000000000..aab0b181a
--- /dev/null
+++ b/apps/website/src/components/landing/CapabilityCard.tsx
@@ -0,0 +1,75 @@
+'use client';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { tokens } from '../../../lib/design-tokens';
+
+interface Props {
+  icon: string;
+  title: string;
+  description: string;
+  codeHtml: string;
+  tint: 'blue' | 'red';
+  cockpitHref?: string;
+  index: number;
+}
+
+export function CapabilityCard({ icon, title, description, codeHtml, tint, cockpitHref, index }: Props) {
+  const [expanded, setExpanded] = useState(false);
+  const borderColor = tint === 'blue' ? 'rgba(0, 64, 144, 0.2)' : 'rgba(221, 0, 49, 0.2)';
+  const hoverBorder = tint === 'blue' ? 'rgba(0, 64, 144, 0.4)' : 'rgba(221, 0, 49, 0.4)';
+  const hoverGlow = tint === 'blue' ? '0 0 24px rgba(0,64,144,0.1)' : '0 0 24px rgba(221,0,49,0.1)';
+
+  return (
+    <motion.div
+      className="rounded-xl overflow-hidden"
+      style={{
+        border: `1px solid ${borderColor}`,
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+      }}
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ delay: index * 0.1, duration: 0.4 }}
+      whileHover={{ borderColor: hoverBorder, boxShadow: hoverGlow }}>
+
+      <div className="p-6">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-3">
+            <span style={{ fontSize: '1.25rem' }} aria-hidden="true">{icon}</span>
+            <h3 style={{
+              fontFamily: 'var(--font-garamond)',
+              fontWeight: 700,
+              fontSize: '1.1rem',
+              color: tokens.colors.textPrimary,
+            }}>{title}</h3>
+          </div>
+        </div>
+        <p style={{ fontSize: '0.875rem', color: tokens.colors.textSecondary, lineHeight: 1.6, marginBottom: 12 }}>
+          {description}
+        </p>
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="font-mono text-xs transition-colors"
+          style={{ color: tokens.colors.accent }}>
+          {expanded ? '\u25BE Hide code' : '\u25B8 Show code'}
+        </button>
+        {cockpitHref && (
+          <a href={cockpitHref} className="font-mono text-xs ml-4 transition-colors" style={{ color: tokens.colors.textMuted }}>
+            View in Cockpit \u2192
+          </a>
+        )}
+      </div>
+
+      {expanded && (
+        <div style={{ borderTop: `1px solid ${borderColor}` }}>
+          <div
+            className="text-sm leading-relaxed"
+            dangerouslySetInnerHTML={{ __html: codeHtml }}
+          />
+        </div>
+      )}
+    </motion.div>
+  );
+}
diff --git a/apps/website/src/components/landing/CockpitCTA.tsx b/apps/website/src/components/landing/CockpitCTA.tsx
new file mode 100644
index 000000000..7357fd88f
--- /dev/null
+++ b/apps/website/src/components/landing/CockpitCTA.tsx
@@ -0,0 +1,114 @@
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '../../../lib/design-tokens';
+
+export function CockpitCTA() {
+  return (
+    <section className="px-8 py-20 max-w-5xl mx-auto">
+      <motion.div
+        className="rounded-2xl p-6 md:p-10 lg:p-14"
+        style={{
+          background: tokens.glass.bg,
+          backdropFilter: `blur(${tokens.glass.blur})`,
+          WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+          border: `1px solid ${tokens.glass.border}`,
+          boxShadow: tokens.glass.shadow,
+        }}
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}>
+
+        <p className="font-mono text-xs uppercase tracking-widest mb-4 text-center"
+          style={{ color: tokens.colors.accent }}>Interactive Reference</p>
+        <h2 style={{
+          fontFamily: 'var(--font-garamond)',
+          fontWeight: 800,
+          fontSize: 'clamp(28px, 3.5vw, 48px)',
+          color: tokens.colors.textPrimary,
+          textAlign: 'center',
+          marginBottom: 12,
+        }}>Explore the Cockpit</h2>
+        <p className="text-center mb-10" style={{ color: tokens.colors.textSecondary, maxWidth: '55ch', margin: '0 auto 40px', lineHeight: 1.6 }}>
+          Interactive reference implementations for every capability. Run examples, inspect source code, and read guided documentation — all in one place.
+        </p>
+
+        {/* Cockpit wireframe mockup */}
+        <div className="rounded-xl overflow-hidden mb-10" style={{
+          border: `1px solid ${tokens.colors.accentBorder}`,
+          background: '#080B14',
+        }}>
+          <div style={{
+            padding: '8px 14px',
+            borderBottom: '1px solid rgba(255,255,255,0.08)',
+            display: 'flex', alignItems: 'center', gap: 12,
+          }}>
+            <div style={{ display: 'flex', gap: 6 }}>
+              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#FF5F57' }} />
+              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#FEBC2E' }} />
+              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#28C840' }} />
+            </div>
+            <div style={{ display: 'flex', gap: 2 }}>
+              {['Run', 'Code', 'Docs'].map((tab, i) => (
+                <span key={tab} style={{
+                  padding: '3px 12px', borderRadius: 4,
+                  fontFamily: 'var(--font-mono)', fontSize: 10,
+                  color: i === 0 ? '#6C8EFF' : '#4A527A',
+                  background: i === 0 ? 'rgba(108,142,255,0.12)' : 'transparent',
+                }}>{tab}</span>
+              ))}
+            </div>
+          </div>
+          <div style={{ display: 'flex', minHeight: 140 }}>
+            <div className="hidden sm:block" style={{ width: 160, borderRight: '1px solid rgba(255,255,255,0.06)', padding: '10px 8px' }}>
+              {['LangGraph', 'Streaming', 'Persistence', 'Interrupts'].map((item, i) => (
+                <div key={item} style={{
+                  padding: '4px 8px', borderRadius: 4, marginBottom: 2,
+                  fontFamily: 'var(--font-mono)', fontSize: 9,
+                  color: i === 1 ? '#6C8EFF' : '#4A527A',
+                  background: i === 1 ? 'rgba(108,142,255,0.08)' : 'transparent',
+                }}>{item}</div>
+              ))}
+            </div>
+            <div style={{ flex: 1, padding: 14 }}>
+              <div style={{ fontFamily: 'var(--font-garamond)', fontSize: 14, fontWeight: 700, color: '#EEF1FF', marginBottom: 8 }}>
+                LangGraph Streaming
+              </div>
+              <div style={{ display: 'flex', gap: 8 }}>
+                {[1, 2, 3].map(n => (
+                  <div key={n} style={{ flex: 1, height: 40, borderRadius: 4, background: 'rgba(108,142,255,0.04)', border: '1px solid rgba(108,142,255,0.08)' }} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-center gap-8 mb-10 flex-wrap">
+          {[
+            { value: '14+', label: 'Capabilities' },
+            { value: '2', label: 'Products' },
+            { value: '3', label: 'View Modes' },
+          ].map(s => (
+            <div key={s.label} className="text-center">
+              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 24, fontWeight: 700, color: tokens.colors.accent }}>{s.value}</div>
+              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: tokens.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{s.label}</div>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex justify-center gap-4 flex-wrap">
+          <a href="/docs" className="px-6 py-3 rounded-lg font-mono text-sm transition-all"
+            style={{ background: tokens.colors.accent, color: '#fff', textDecoration: 'none' }}
+            onMouseEnter={(e) => (e.currentTarget.style.boxShadow = tokens.glow.button)}
+            onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}>
+            Launch Cockpit
+          </a>
+          <a href="/docs" className="px-6 py-3 rounded-lg font-mono text-sm transition-all"
+            style={{ border: `1px solid ${tokens.colors.accent}`, color: tokens.colors.accent, textDecoration: 'none' }}>
+            Read Docs
+          </a>
+        </div>
+      </motion.div>
+    </section>
+  );
+}
diff --git a/apps/website/src/components/landing/CodeBlock.tsx b/apps/website/src/components/landing/CodeBlock.tsx
index 255927258..257a66ad4 100644
--- a/apps/website/src/components/landing/CodeBlock.tsx
+++ b/apps/website/src/components/landing/CodeBlock.tsx
@@ -1,4 +1,5 @@
 import { codeToHtml } from 'shiki';
+import { tokens } from '../../../lib/design-tokens';
 
 const EXAMPLE = `// app.config.ts
 provideStreamResource({ apiUrl: 'http://localhost:2024' })
@@ -27,22 +28,26 @@ export async function CodeBlock() {
     theme: 'tokyo-night',
   });
 
-  // tsHtml and templateHtml are trusted Shiki output generated at build time
-  // from hardcoded strings — not user input
   return (
-    <section className="px-8 py-16 max-w-4xl mx-auto">
+    <section className="px-8 py-16 max-w-4xl mx-auto animate-on-scroll">
       <p className="font-mono text-xs uppercase tracking-widest mb-8 text-center"
-        style={{ color: 'var(--color-accent)' }}>30-second example</p>
-      <div
-        className="rounded-t-xl overflow-hidden text-sm leading-relaxed"
-        style={{ border: '1px solid rgba(108,142,255,0.15)', borderBottom: 'none' }}
-        dangerouslySetInnerHTML={{ __html: tsHtml }}
-      />
-      <div
-        className="rounded-b-xl overflow-hidden text-sm leading-relaxed"
-        style={{ border: '1px solid rgba(108,142,255,0.15)', borderTop: '1px solid rgba(108,142,255,0.08)' }}
-        dangerouslySetInnerHTML={{ __html: templateHtml }}
-      />
+        style={{ color: tokens.colors.accent }}>30-second example</p>
+      <div style={{
+        borderRadius: 12,
+        border: `1px solid ${tokens.glass.border}`,
+        boxShadow: tokens.glass.shadow,
+        overflow: 'hidden',
+      }}>
+        <div
+          className="overflow-hidden text-sm leading-relaxed"
+          dangerouslySetInnerHTML={{ __html: tsHtml }}
+        />
+        <div
+          className="overflow-hidden text-sm leading-relaxed"
+          style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}
+          dangerouslySetInnerHTML={{ __html: templateHtml }}
+        />
+      </div>
     </section>
   );
 }
diff --git a/apps/website/src/components/landing/DeepAgentsShowcase.tsx b/apps/website/src/components/landing/DeepAgentsShowcase.tsx
new file mode 100644
index 000000000..dd087d2a2
--- /dev/null
+++ b/apps/website/src/components/landing/DeepAgentsShowcase.tsx
@@ -0,0 +1,114 @@
+import { codeToHtml } from 'shiki';
+import { tokens } from '../../../lib/design-tokens';
+import { CapabilityCard } from './CapabilityCard';
+
+const CAPABILITIES = [
+  {
+    icon: '\uD83D\uDCCB',
+    title: 'Planning',
+    description: 'Turn high-level goals into ordered action sequences with explicit constraints and checkpoints. The agent chooses next steps grounded in real context.',
+    code: `// Agent plans and executes steps
+const planner = streamResource<PlanState>({
+  assistantId: 'planning_agent',
+});
+
+// Stream plan steps as they're created
+@for (step of planner.messages(); track $index) {
+  <div [class.complete]="step.status === 'done'">
+    {{ step.content }}
+  </div>
+}`,
+    lang: 'typescript' as const,
+  },
+  {
+    icon: '\uD83D\uDD00',
+    title: 'Subagents',
+    description: 'Split complex tasks into focused workers with clear ownership boundaries. Each subagent handles a specialized piece and reports back.',
+    code: `// Orchestrator delegates to subagents
+const orchestrator = streamResource<OrchestratorState>({
+  assistantId: 'orchestrator',
+});
+
+// Track subagent progress
+const activeWorkers = computed(() =>
+  orchestrator.messages()
+    .filter(m => m.type === 'subagent_start')
+    .length
+);`,
+    lang: 'typescript' as const,
+  },
+  {
+    icon: '\uD83E\uDDE9',
+    title: 'Skills',
+    description: 'Package repeatable agent behavior into focused, reusable instruction sets. Skills define scope, response format, and operational boundaries.',
+    code: `// Agent uses a skill for code review
+const reviewer = streamResource<ReviewState>({
+  assistantId: 'code_review_skill',
+  input: {
+    files: changedFiles(),
+    guidelines: teamStandards,
+  },
+});
+
+// Structured skill output
+const issues = reviewer.messages()
+  .filter(m => m.type === 'issue');`,
+    lang: 'typescript' as const,
+  },
+  {
+    icon: '\uD83E\uDDE0',
+    title: 'Memory',
+    description: 'Retain useful intermediate context across agent turns without leaking irrelevant history. Memory shapes routing and improves response quality over time.',
+    code: `// Agent with persistent memory
+const agent = streamResource<MemoryState>({
+  assistantId: 'memory_agent',
+  threadId: signal(userId()),
+});
+
+// Memory persists across conversations
+// Agent recalls user preferences,
+// past decisions, and project context
+agent.submit({
+  messages: [{ role: 'user', content: query }],
+});`,
+    lang: 'typescript' as const,
+  },
+];
+
+export async function DeepAgentsShowcase() {
+  const cards = await Promise.all(
+    CAPABILITIES.map(async (cap) => ({
+      ...cap,
+      codeHtml: await codeToHtml(cap.code, { lang: cap.lang, theme: 'tokyo-night' }),
+    })),
+  );
+
+  return (
+    <section className="px-8 py-20 max-w-6xl mx-auto animate-on-scroll">
+      <p className="font-mono text-xs uppercase tracking-widest mb-4 text-center"
+        style={{ color: tokens.colors.angularRed }}>Deep Agents Capabilities</p>
+      <h2 style={{
+        fontFamily: 'var(--font-garamond)',
+        fontWeight: 800,
+        fontSize: 'clamp(28px, 3.5vw, 48px)',
+        color: tokens.colors.textPrimary,
+        textAlign: 'center',
+        marginBottom: 48,
+      }}>Multi-step agent workflows with explicit control</h2>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {cards.map((card, i) => (
+          <CapabilityCard
+            key={card.title}
+            icon={card.icon}
+            title={card.title}
+            description={card.description}
+            codeHtml={card.codeHtml}
+            tint="red"
+            index={i}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/website/src/components/landing/FeatureStrip.tsx b/apps/website/src/components/landing/FeatureStrip.tsx
index 7d3f61a0e..5de344572 100644
--- a/apps/website/src/components/landing/FeatureStrip.tsx
+++ b/apps/website/src/components/landing/FeatureStrip.tsx
@@ -1,47 +1,44 @@
 'use client';
 import { motion } from 'framer-motion';
-import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import { tokens } from '../../../lib/design-tokens';
 
 const FEATURES = [
-  { icon: '⚡', title: 'Token-by-token streaming', desc: 'Real-time SSE streaming via FetchStreamTransport. Messages update as each token arrives.' },
-  { icon: '🔗', title: 'Thread persistence', desc: 'MemorySaver-backed threads survive page refreshes via threadId signal and onThreadId callback.' },
-  { icon: '📐', title: 'Angular Signals', desc: 'Every state slice is an Angular Signal. Works with OnPush, async pipe, and computed().' },
-  { icon: '🧪', title: 'MockStreamTransport', desc: 'Deterministic unit testing. Script event sequences and step through them in your specs.' },
-  { icon: '🔧', title: 'Full useStream() parity', desc: 'Interrupts, tool calls, subagents, branch history, joinStream — everything the React SDK exposes.' },
-  { icon: '🏢', title: 'Source-available licensing', desc: 'Free for noncommercial use under PolyForm Noncommercial 1.0.0. Commercial license at $500/seat/year or $2,000/app deployment.' },
+  { icon: '\u26A1', title: 'Token-by-token streaming', desc: 'Real-time SSE streaming via FetchStreamTransport. Messages update as each token arrives.' },
+  { icon: '\uD83D\uDD17', title: 'Thread persistence', desc: 'MemorySaver-backed threads survive page refreshes via threadId signal and onThreadId callback.' },
+  { icon: '\uD83D\uDCD0', title: 'Angular Signals', desc: 'Every state slice is an Angular Signal. Works with OnPush, async pipe, and computed().' },
+  { icon: '\uD83E\uDDEA', title: 'MockStreamTransport', desc: 'Deterministic unit testing. Script event sequences and step through them in your specs.' },
+  { icon: '\uD83D\uDD27', title: 'Full useStream() parity', desc: 'Interrupts, tool calls, subagents, branch history, joinStream \u2014 everything the React SDK exposes.' },
+  { icon: '\uD83C\uDFE2', title: 'Source-available licensing', desc: 'Free for noncommercial use under PolyForm Noncommercial 1.0.0. Commercial license at $500/seat/year or $2,000/app deployment.' },
 ];
 
 export function FeatureStrip() {
   return (
     <section className="px-8 py-16 max-w-6xl mx-auto">
-      <h2
-        className="font-mono text-xs uppercase tracking-widest mb-12 text-center"
-        style={{ color: 'var(--color-accent)', fontWeight: 'normal' }}
-      >
-        Features
-      </h2>
+      <h2 className="font-mono text-xs uppercase tracking-widest mb-12 text-center"
+        style={{ color: tokens.colors.accent, fontWeight: 'normal' }}>Features</h2>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {FEATURES.map((f, i) => (
           <motion.div
             key={f.title}
+            className="p-6 rounded-lg cursor-default"
+            style={{
+              border: `1px solid ${tokens.glass.border}`,
+              background: tokens.glass.bg,
+              backdropFilter: `blur(${tokens.glass.blur})`,
+              WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+            }}
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ delay: i * 0.08, duration: 0.4 }}
             whileHover={{
-              borderColor: 'rgba(108,142,255,0.4)',
-              boxShadow: '0 0 12px rgba(108,142,255,0.2)',
-            }}
-          >
-            <Card className="p-6 h-full cursor-default transition-all">
-              <div className="mb-3 text-2xl" style={{ color: '#6C8EFF' }} aria-hidden="true">
-                {f.icon}
-              </div>
-              <CardTitle className="mb-2">{f.title}</CardTitle>
-              <CardContent className="p-0">
-                <p className="text-sm text-muted-foreground leading-relaxed">{f.desc}</p>
-              </CardContent>
-            </Card>
+              borderColor: tokens.colors.accentBorderHover,
+              boxShadow: tokens.glow.card,
+              background: tokens.glass.bgHover,
+            }}>
+            <div className="mb-3" style={{ fontSize: '1.5rem', color: tokens.colors.accent }} aria-hidden="true">{f.icon}</div>
+            <h3 style={{ fontFamily: 'var(--font-garamond)', fontWeight: 700, fontSize: '1.125rem', color: tokens.colors.textPrimary, marginBottom: 8 }}>{f.title}</h3>
+            <p style={{ fontSize: '0.875rem', color: tokens.colors.textSecondary, lineHeight: 1.6 }}>{f.desc}</p>
           </motion.div>
         ))}
       </div>
diff --git a/apps/website/src/components/landing/GenerativeUIFrame.tsx b/apps/website/src/components/landing/GenerativeUIFrame.tsx
index 054113e7f..10e49b557 100644
--- a/apps/website/src/components/landing/GenerativeUIFrame.tsx
+++ b/apps/website/src/components/landing/GenerativeUIFrame.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { useEffect, useRef } from 'react';
+import { tokens } from '../../../lib/design-tokens';
 
 export function GenerativeUIFrame() {
   const frameRef = useRef<HTMLDivElement>(null);
@@ -13,9 +14,9 @@ export function GenerativeUIFrame() {
       const cx = rect.left + rect.width / 2;
       const cy = rect.top + rect.height / 2;
       const distance = Math.hypot(e.clientX - cx, e.clientY - cy);
-      const intensity = 0.15 + 0.45 * Math.max(0, 1 - distance / 400);
-      const blur = 20 + intensity * 60;
-      frame.style.boxShadow = `0 0 ${blur}px rgba(108,142,255,${intensity.toFixed(2)})`;
+      const intensity = 0.08 + 0.2 * Math.max(0, 1 - distance / 400);
+      const blur = 10 + intensity * 40;
+      frame.style.boxShadow = `0 0 ${blur}px rgba(0,64,144,${intensity.toFixed(2)})`;
     };
 
     document.addEventListener('mousemove', handleMouseMove);
@@ -26,12 +27,12 @@ export function GenerativeUIFrame() {
     <div
       ref={frameRef}
       role="img"
-      aria-label="Animated demo of stream-resource rendering a generative UI"
+      aria-label="Animated demo of stream-resource orchestrating a multi-step agent UI"
       className="rounded-xl overflow-hidden"
       style={{
-        border: '1px solid rgba(108,142,255,0.4)',
+        border: `1px solid ${tokens.glass.border}`,
         background: '#080B14',
-        boxShadow: '0 0 20px rgba(108,142,255,0.2)',
+        boxShadow: tokens.glow.demo,
         transition: 'box-shadow 0.1s ease-out',
         width: '100%',
         maxWidth: 520,
@@ -39,7 +40,7 @@ export function GenerativeUIFrame() {
       {/* Browser chrome */}
       <div style={{
         padding: '10px 14px',
-        borderBottom: '1px solid rgba(108,142,255,0.15)',
+        borderBottom: '1px solid rgba(255,255,255,0.08)',
         display: 'flex', alignItems: 'center', gap: 8,
       }}>
         <div style={{ display: 'flex', gap: 6 }}>
@@ -48,7 +49,7 @@ export function GenerativeUIFrame() {
           <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#28C840' }} />
         </div>
         <div style={{
-          flex: 1, background: 'rgba(108,142,255,0.06)',
+          flex: 1, background: 'rgba(255,255,255,0.06)',
           borderRadius: 4, padding: '3px 10px',
           fontFamily: 'var(--font-mono)', fontSize: 11,
           color: '#4A527A', textAlign: 'center',
@@ -57,8 +58,8 @@ export function GenerativeUIFrame() {
         </div>
       </div>
 
-      {/* Animated content area */}
-      <div style={{ padding: 20, minHeight: 260, position: 'relative', overflow: 'hidden' }}>
+      {/* Animated content area — stays dark themed */}
+      <div style={{ padding: 20, minHeight: 280, position: 'relative', overflow: 'hidden' }}>
         <style>{`
           @keyframes fadeWord {
             from { opacity: 0; transform: translateY(4px); }
@@ -73,93 +74,248 @@ export function GenerativeUIFrame() {
             to   { opacity: 1; }
           }
           @keyframes loopFade {
-            0%, 75% { opacity: 1; }
+            0%, 75%  { opacity: 1; }
             97%, 100% { opacity: 0; }
           }
-          .gen-ui-loop { animation: loopFade 6s linear infinite; }
-          .w1  { animation: fadeWord 0.25s ease-out 0.1s both; }
-          .w2  { animation: fadeWord 0.25s ease-out 0.3s both; }
-          .w3  { animation: fadeWord 0.25s ease-out 0.5s both; }
-          .w4  { animation: fadeWord 0.25s ease-out 0.7s both; }
-          .w5  { animation: fadeWord 0.25s ease-out 0.9s both; }
-          .w6  { animation: fadeWord 0.25s ease-out 1.1s both; }
-          .card-title { animation: cardIn 0.3s ease-out 1.5s both; }
-          .card-body  { animation: cardIn 0.3s ease-out 1.9s both; }
-          .card-btn   { animation: cardIn 0.3s ease-out 2.3s both; }
-          .row1 { animation: rowIn 0.25s ease-out 3.0s both; }
-          .row2 { animation: rowIn 0.25s ease-out 3.4s both; }
-          .row3 { animation: rowIn 0.25s ease-out 3.8s both; }
+          @keyframes checkIn {
+            from { opacity: 0; transform: scale(0.6); }
+            to   { opacity: 1; transform: scale(1); }
+          }
+          @keyframes stepIn {
+            from { opacity: 0; transform: translateX(-6px); }
+            to   { opacity: 1; transform: translateX(0); }
+          }
+
+          /* Loop wrapper: 7s total cycle (5.5s visible, fade, restart) */
+          .gen-ui-loop { animation: loopFade 7s linear infinite; }
+
+          /* Phase 1 — user message words (0s–1s) */
+          .w1 { animation: fadeWord 0.2s ease-out 0.05s both; }
+          .w2 { animation: fadeWord 0.2s ease-out 0.20s both; }
+          .w3 { animation: fadeWord 0.2s ease-out 0.35s both; }
+          .w4 { animation: fadeWord 0.2s ease-out 0.50s both; }
+          .w5 { animation: fadeWord 0.2s ease-out 0.65s both; }
+          .w6 { animation: fadeWord 0.2s ease-out 0.80s both; }
+          .w7 { animation: fadeWord 0.2s ease-out 0.95s both; }
+
+          /* Phase 2 — planning card (1.2s–2s) */
+          .plan-card   { animation: cardIn 0.3s ease-out 1.2s both; }
+          .plan-item1  { animation: stepIn 0.25s ease-out 1.45s both; }
+          .plan-item2  { animation: stepIn 0.25s ease-out 1.65s both; }
+          .plan-item3  { animation: stepIn 0.25s ease-out 1.85s both; }
+
+          /* Phase 3 — step execution (2.2s–4s) */
+          /* Step 1: query */
+          .step1-label { animation: stepIn  0.25s ease-out 2.2s both; }
+          .step1-check { animation: checkIn 0.2s  ease-out 2.7s both; }
+          .step1-row1  { animation: rowIn   0.2s  ease-out 2.85s both; }
+          .step1-row2  { animation: rowIn   0.2s  ease-out 3.0s  both; }
+
+          /* Step 2: analysis */
+          .step2-label  { animation: stepIn  0.25s ease-out 3.1s  both; }
+          .step2-check  { animation: checkIn 0.2s  ease-out 3.55s both; }
+          .step2-metric { animation: rowIn   0.2s  ease-out 3.7s  both; }
+
+          /* Step 3: report */
+          .step3-label { animation: stepIn  0.25s ease-out 3.75s both; }
+          .step3-check { animation: checkIn 0.2s  ease-out 4.05s both; }
+
+          /* Phase 4 — summary card (4.2s–5s) */
+          .summary-card { animation: cardIn 0.35s ease-out 4.2s both; }
+          .summary-text { animation: rowIn  0.3s  ease-out 4.6s both; }
         `}</style>
 
         <div className="gen-ui-loop">
-          {/* Phase 1: streaming chat reply */}
-          <div style={{ marginBottom: 16, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
-            <div style={{
-              width: 24, height: 24, borderRadius: '50%', flexShrink: 0,
-              background: 'rgba(108,142,255,0.2)', border: '1px solid rgba(108,142,255,0.4)',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-              fontFamily: 'var(--font-mono)', fontSize: 9, color: '#6C8EFF',
-            }}>AI</div>
+
+          {/* ── Phase 1: User message ── */}
+          <div style={{ marginBottom: 14, display: 'flex', gap: 8, alignItems: 'flex-start', justifyContent: 'flex-end' }}>
             <div style={{
-              background: 'rgba(108,142,255,0.08)', borderRadius: 8,
-              padding: '8px 12px', fontSize: 13, color: '#EEF1FF', lineHeight: 1.5,
+              background: 'rgba(108,142,255,0.13)',
+              border: '1px solid rgba(108,142,255,0.25)',
+              borderRadius: '10px 10px 2px 10px',
+              padding: '7px 11px', fontSize: 12.5,
+              color: '#C8D0F5', lineHeight: 1.5, maxWidth: '80%',
             }}>
-              <span className="w1">Here </span>
-              <span className="w2">is </span>
-              <span className="w3">your </span>
-              <span className="w4">quarterly </span>
-              <span className="w5">report </span>
-              <span className="w6">summary.</span>
+              <span className="w1">Analyze </span>
+              <span className="w2">our </span>
+              <span className="w3">Q1 </span>
+              <span className="w4">customer </span>
+              <span className="w5">churn </span>
+              <span className="w6">data</span>
             </div>
+            <div style={{
+              width: 22, height: 22, borderRadius: '50%', flexShrink: 0,
+              background: 'rgba(255,255,255,0.07)',
+              border: '1px solid rgba(255,255,255,0.12)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              fontFamily: 'var(--font-mono)', fontSize: 9, color: '#6B7399',
+            }}>U</div>
           </div>
 
-          {/* Phase 2: generative card */}
-          <div style={{
-            border: '1px solid rgba(108,142,255,0.2)', borderRadius: 8,
-            padding: '12px 14px', marginBottom: 12,
+          {/* ── Phase 2: Planning card ── */}
+          <div className="plan-card" style={{
+            marginBottom: 12,
+            border: '1px solid rgba(108,142,255,0.2)',
+            borderRadius: 8, padding: '10px 12px',
+            background: 'rgba(108,142,255,0.04)',
           }}>
-            <div className="card-title" style={{
-              fontFamily: 'var(--font-garamond)', fontSize: 15, fontWeight: 700,
-              color: '#EEF1FF', marginBottom: 6,
-            }}>Q1 2026 Revenue</div>
-            <div className="card-body" style={{
-              fontSize: 12, color: '#8B96C8', lineHeight: 1.5, marginBottom: 10,
-            }}>Revenue up 24% YoY. Strongest quarter on record across all segments.</div>
-            <div className="card-btn" style={{
-              display: 'inline-block', padding: '5px 12px', borderRadius: 5,
-              background: 'rgba(108,142,255,0.15)',
-              border: '1px solid rgba(108,142,255,0.3)',
-              fontFamily: 'var(--font-mono)', fontSize: 11, color: '#6C8EFF',
-            }}>View details →</div>
-          </div>
-
-          {/* Phase 3: streaming table */}
-          <div style={{ border: '1px solid rgba(108,142,255,0.15)', borderRadius: 8, overflow: 'hidden' }}>
             <div style={{
-              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
-              padding: '6px 12px', background: 'rgba(108,142,255,0.06)',
               fontFamily: 'var(--font-mono)', fontSize: 10,
-              color: '#4A527A', textTransform: 'uppercase', letterSpacing: '0.08em',
+              color: '#6C8EFF', letterSpacing: '0.07em',
+              textTransform: 'uppercase', marginBottom: 8,
+              display: 'flex', alignItems: 'center', gap: 6,
             }}>
-              <span>Segment</span><span>Revenue</span><span>Growth</span>
+              <span style={{
+                display: 'inline-block', width: 6, height: 6,
+                borderRadius: '50%', background: '#6C8EFF',
+                boxShadow: '0 0 5px rgba(108,142,255,0.7)',
+              }} />
+              Planning · 3 steps
             </div>
             {[
-              { seg: 'Enterprise', rev: '$4.2M', growth: '+31%', cls: 'row1' },
-              { seg: 'SMB', rev: '$2.1M', growth: '+18%', cls: 'row2' },
-              { seg: 'Developer', rev: '$0.8M', growth: '+42%', cls: 'row3' },
-            ].map((r) => (
-              <div key={r.seg} className={r.cls} style={{
-                display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
-                padding: '6px 12px',
-                borderTop: '1px solid rgba(108,142,255,0.08)',
-                fontSize: 12, color: '#8B96C8',
+              { cls: 'plan-item1', label: 'Query churn database' },
+              { cls: 'plan-item2', label: 'Run statistical analysis' },
+              { cls: 'plan-item3', label: 'Generate executive report' },
+            ].map((item, i) => (
+              <div key={i} className={item.cls} style={{
+                display: 'flex', alignItems: 'center', gap: 7,
+                fontFamily: 'var(--font-mono)', fontSize: 11,
+                color: '#5A638A', marginBottom: i < 2 ? 5 : 0,
               }}>
-                <span>{r.seg}</span>
-                <span style={{ color: '#EEF1FF' }}>{r.rev}</span>
-                <span style={{ color: '#6C8EFF' }}>{r.growth}</span>
+                <span style={{
+                  width: 14, height: 14, borderRadius: 3,
+                  border: '1px solid rgba(108,142,255,0.25)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  fontSize: 8, color: '#4A527A', flexShrink: 0,
+                }}>{i + 1}</span>
+                {item.label}
               </div>
             ))}
           </div>
+
+          {/* ── Phase 3: Step execution ── */}
+          <div style={{
+            border: '1px solid rgba(108,142,255,0.15)',
+            borderRadius: 8, overflow: 'hidden',
+            marginBottom: 12,
+          }}>
+            {/* Step 1 — Querying database */}
+            <div style={{ padding: '9px 12px', borderBottom: '1px solid rgba(108,142,255,0.08)' }}>
+              <div className="step1-label" style={{
+                display: 'flex', alignItems: 'center', gap: 7,
+                fontFamily: 'var(--font-mono)', fontSize: 11, color: '#8B96C8',
+                marginBottom: 6,
+              }}>
+                <span className="step1-check" style={{
+                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                  width: 14, height: 14, borderRadius: '50%',
+                  background: 'rgba(40,200,100,0.15)',
+                  border: '1px solid rgba(40,200,100,0.4)',
+                  fontSize: 8, color: '#28C864', flexShrink: 0,
+                }}>✓</span>
+                Querying database...
+              </div>
+              <div style={{
+                background: 'rgba(255,255,255,0.03)', borderRadius: 4,
+                overflow: 'hidden', border: '1px solid rgba(108,142,255,0.08)',
+              }}>
+                {[
+                  { col1: 'cohort', col2: 'churned', col3: 'retained' },
+                  { col1: 'Jan 2026', col2: '312', col3: '4,208' },
+                  { col1: 'Feb 2026', col2: '287', col3: '4,451' },
+                ].map((row, i) => (
+                  <div key={i} className={i === 0 ? 'step1-label' : i === 1 ? 'step1-row1' : 'step1-row2'} style={{
+                    display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
+                    padding: '4px 8px',
+                    borderTop: i > 0 ? '1px solid rgba(108,142,255,0.06)' : undefined,
+                    fontFamily: 'var(--font-mono)',
+                    fontSize: i === 0 ? 9 : 11,
+                    color: i === 0 ? '#4A527A' : '#8B96C8',
+                    textTransform: i === 0 ? 'uppercase' : undefined,
+                    letterSpacing: i === 0 ? '0.07em' : undefined,
+                  }}>
+                    <span>{row.col1}</span>
+                    <span style={{ color: i > 0 ? '#EEF1FF' : undefined }}>{row.col2}</span>
+                    <span style={{ color: i > 0 ? '#6C8EFF' : undefined }}>{row.col3}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Step 2 — Running analysis */}
+            <div style={{ padding: '9px 12px', borderBottom: '1px solid rgba(108,142,255,0.08)' }}>
+              <div className="step2-label" style={{
+                display: 'flex', alignItems: 'center', gap: 7,
+                fontFamily: 'var(--font-mono)', fontSize: 11, color: '#8B96C8',
+                marginBottom: 6,
+              }}>
+                <span className="step2-check" style={{
+                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                  width: 14, height: 14, borderRadius: '50%',
+                  background: 'rgba(40,200,100,0.15)',
+                  border: '1px solid rgba(40,200,100,0.4)',
+                  fontSize: 8, color: '#28C864', flexShrink: 0,
+                }}>✓</span>
+                Running analysis...
+              </div>
+              <div className="step2-metric" style={{
+                display: 'inline-flex', alignItems: 'baseline', gap: 6,
+                background: 'rgba(108,142,255,0.08)',
+                border: '1px solid rgba(108,142,255,0.2)',
+                borderRadius: 5, padding: '4px 10px',
+              }}>
+                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#5A638A' }}>Churn rate</span>
+                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 700, color: '#6C8EFF' }}>4.2%</span>
+                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#28C864' }}>▼ vs 4.9% last Q</span>
+              </div>
+            </div>
+
+            {/* Step 3 — Generating report */}
+            <div style={{ padding: '9px 12px' }}>
+              <div className="step3-label" style={{
+                display: 'flex', alignItems: 'center', gap: 7,
+                fontFamily: 'var(--font-mono)', fontSize: 11, color: '#8B96C8',
+              }}>
+                <span className="step3-check" style={{
+                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                  width: 14, height: 14, borderRadius: '50%',
+                  background: 'rgba(40,200,100,0.15)',
+                  border: '1px solid rgba(40,200,100,0.4)',
+                  fontSize: 8, color: '#28C864', flexShrink: 0,
+                }}>✓</span>
+                Generating report...
+              </div>
+            </div>
+          </div>
+
+          {/* ── Phase 4: Summary card ── */}
+          <div className="summary-card" style={{
+            border: '1px solid rgba(108,142,255,0.25)',
+            borderRadius: 8, padding: '11px 13px',
+            background: 'rgba(108,142,255,0.06)',
+            display: 'flex', gap: 10, alignItems: 'flex-start',
+          }}>
+            <div style={{
+              width: 24, height: 24, borderRadius: '50%', flexShrink: 0,
+              background: 'rgba(108,142,255,0.2)', border: '1px solid rgba(108,142,255,0.4)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              fontFamily: 'var(--font-mono)', fontSize: 9, color: '#6C8EFF',
+            }}>AI</div>
+            <div>
+              <div style={{
+                fontFamily: 'var(--font-garamond)', fontSize: 13, fontWeight: 700,
+                color: '#EEF1FF', marginBottom: 5,
+              }}>Q1 Churn Analysis</div>
+              <div className="summary-text" style={{
+                fontSize: 12, color: '#8B96C8', lineHeight: 1.6,
+              }}>
+                Churn decreased{' '}
+                <span style={{ color: '#28C864', fontWeight: 600 }}>12% QoQ</span>
+                , driven by improved onboarding. Jan cohort shows strongest retention in 4 quarters.
+              </div>
+            </div>
+          </div>
+
         </div>
       </div>
     </div>
diff --git a/apps/website/src/components/landing/HeroTwoCol.tsx b/apps/website/src/components/landing/HeroTwoCol.tsx
index a801db800..e964943ee 100644
--- a/apps/website/src/components/landing/HeroTwoCol.tsx
+++ b/apps/website/src/components/landing/HeroTwoCol.tsx
@@ -1,53 +1,52 @@
 import { GenerativeUIFrame } from './GenerativeUIFrame';
 import { CopyPromptButton } from '../docs/CopyPromptButton';
-import { getPromptBySlug } from '../../lib/docs';
-import { Badge } from '@/components/ui/badge';
+import { tokens } from '../../../lib/design-tokens';
+
+const SETUP_SNIPPET = 'npm install @cacheplane/stream-resource\n\n// app.config.ts\nprovideStreamResource({ apiUrl: \'http://localhost:2024\' })';
 
 function LangChainBadge() {
   return (
-    <Badge variant="default">
-      <span
-        style={{
-          width: 14,
-          height: 14,
-          borderRadius: 3,
-          background: 'rgba(127,200,255,0.2)',
-          border: '1px solid rgba(127,200,255,0.4)',
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontSize: 7,
-          fontWeight: 700,
-          color: '#7FC8FF',
-          lineHeight: 1,
-          flexShrink: 0,
-        }}
-      >
-        LC
-      </span>
+    <span style={{
+      display: 'inline-flex', alignItems: 'center', gap: 6,
+      background: 'rgba(0, 64, 144, 0.08)',
+      border: '1px solid rgba(0, 64, 144, 0.2)',
+      borderRadius: 20, padding: '4px 10px 4px 8px',
+      fontFamily: 'var(--font-mono)', fontSize: 11, color: tokens.colors.textPrimary,
+    }}>
+      <span style={{
+        width: 14, height: 14, borderRadius: 3,
+        background: 'rgba(0, 64, 144, 0.15)',
+        border: '1px solid rgba(0, 64, 144, 0.3)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        fontSize: 7, fontWeight: 700, color: tokens.colors.accent, lineHeight: 1,
+      }}>LC</span>
       LangChain
-    </Badge>
+    </span>
   );
 }
 
 function AngularBadge() {
   return (
-    <Badge variant="default">
-      <svg width="14" height="14" viewBox="0 0 250 250" aria-hidden={true} style={{ flexShrink: 0 }}>
-        <path fill="#DD0031" d="M125 30L31.9 63.2l14.2 123.1L125 230l78.9-43.7 14.2-123.1z" />
-        <path fill="#C3002F" d="M125 30v22.2l-61.7 162.4 37.8 15.4z" />
-        <path fill="#fff" d="M125 52.1L66.8 182.6h21.7l11.7-29.2h49.4l11.7 29.2H183L125 52.1zm17 83.3h-34l17-40.9z" />
+    <span style={{
+      display: 'inline-flex', alignItems: 'center', gap: 6,
+      background: 'rgba(221, 0, 49, 0.06)',
+      border: '1px solid rgba(221, 0, 49, 0.15)',
+      borderRadius: 20, padding: '4px 10px 4px 8px',
+      fontFamily: 'var(--font-mono)', fontSize: 11, color: tokens.colors.textPrimary,
+    }}>
+      <svg width="14" height="14" viewBox="0 0 250 250" aria-hidden={true}>
+        <path fill="#DD0031" d="M125 30L31.9 63.2l14.2 123.1L125 230l78.9-43.7 14.2-123.1z"/>
+        <path fill="#C3002F" d="M125 30v22.2l-61.7 162.4 37.8 15.4z"/>
+        <path fill="#fff" d="M125 52.1L66.8 182.6h21.7l11.7-29.2h49.4l11.7 29.2H183L125 52.1zm17 83.3h-34l17-40.9z"/>
       </svg>
       Angular
-    </Badge>
+    </span>
   );
 }
 
 export async function HeroTwoCol() {
-  const prompt = getPromptBySlug(['getting-started']) ?? '';
-
   return (
-    <section className="hero-two-col" aria-labelledby="hero-heading">
+    <section className="hero-two-col" aria-labelledby="hero-heading" style={{ position: 'relative', overflow: 'hidden' }}>
       <style>{`
         .hero-two-col {
           display: flex;
@@ -55,9 +54,10 @@ export async function HeroTwoCol() {
           padding: 96px 40px 60px;
           gap: 48px;
           min-height: 100vh;
+          background: ${tokens.gradient.bgFlow};
         }
-        .hero-left { flex: 0 0 55%; max-width: 55%; }
-        .hero-right { flex: 0 0 45%; max-width: 45%; display: flex; justify-content: center; }
+        .hero-left { flex: 0 0 55%; max-width: 55%; position: relative; z-index: 1; }
+        .hero-right { flex: 0 0 45%; max-width: 45%; display: flex; justify-content: center; position: relative; z-index: 1; }
         @media (max-width: 767px) {
           .hero-two-col { flex-direction: column; padding: 80px 24px 40px; }
           .hero-left { flex: none; max-width: 100%; width: 100%; }
@@ -65,69 +65,67 @@ export async function HeroTwoCol() {
         }
       `}</style>
 
-      {/* Left column — 55% */}
+      {/* Ambient gradient blobs */}
+      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.warm, top: -150, left: -100, filter: 'blur(60px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 450, height: 450, borderRadius: '50%', background: tokens.gradient.cool, bottom: -100, right: -50, filter: 'blur(60px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 350, height: 350, borderRadius: '50%', background: tokens.gradient.coolLight, top: '30%', right: '20%', filter: 'blur(50px)', pointerEvents: 'none' }} />
+
+      {/* Left column */}
       <div className="hero-left">
         <div style={{ display: 'flex', gap: 8, marginBottom: 28, flexWrap: 'wrap' }}>
           <LangChainBadge />
           <AngularBadge />
         </div>
 
-        <h1
-          id="hero-heading"
-          style={{
-            fontFamily: 'var(--font-garamond)',
-            fontSize: 'clamp(36px, 4.5vw, 72px)',
-            fontWeight: 800,
-            lineHeight: 1.05,
-            color: '#EEF1FF',
-            margin: 0,
-            marginBottom: 20,
-          }}
-        >
+        <h1 id="hero-heading" style={{
+          fontFamily: 'var(--font-garamond)',
+          fontSize: 'clamp(36px, 4.5vw, 72px)',
+          fontWeight: 800,
+          lineHeight: 1.05,
+          color: tokens.colors.textPrimary,
+          margin: 0,
+          marginBottom: 20,
+        }}>
           The Enterprise Streaming Resource for LangChain and{' '}
-          <span style={{ color: '#DD0031', textShadow: '0 0 30px rgba(221,0,49,0.5)' }}>
-            Angular
-          </span>
+          <span style={{ color: tokens.colors.angularRed }}>Angular</span>
         </h1>
 
-        <p
-          style={{
-            fontFamily: 'var(--font-garamond)',
-            fontStyle: 'italic',
-            fontSize: 'clamp(16px, 1.8vw, 20px)',
-            color: '#8B96C8',
-            maxWidth: '44ch',
-            lineHeight: 1.5,
-            margin: 0,
-            marginBottom: 32,
-          }}
-        >
+        <p style={{
+          fontFamily: 'var(--font-garamond)',
+          fontStyle: 'italic',
+          fontSize: 'clamp(16px, 1.8vw, 20px)',
+          color: tokens.colors.textSecondary,
+          maxWidth: '44ch',
+          lineHeight: 1.5,
+          margin: 0,
+          marginBottom: 32,
+        }}>
           Full parity with React{' '}
-          <code
-            style={{
-              fontStyle: 'normal',
-              fontFamily: 'var(--font-mono)',
-              fontSize: '0.8em',
-              background: 'rgba(108,142,255,0.08)',
-              color: '#6C8EFF',
-              padding: '2px 6px',
-              borderRadius: 4,
-            }}
-          >
-            useStream()
-          </code>
-          {' '}— built natively for Angular 20+.
+          <code style={{
+            fontStyle: 'normal',
+            fontFamily: 'var(--font-mono)',
+            fontSize: '0.8em',
+            background: tokens.colors.accentSurface,
+            color: tokens.colors.accent,
+            padding: '2px 6px',
+            borderRadius: 4,
+          }}>useStream()</code>
+          {' '}&mdash; built natively for Angular 20+.
         </p>
 
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 12 }}>
-          <CopyPromptButton prompt={prompt} variant="hero" />
-          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#4A527A' }}>
+          <CopyPromptButton prompt={SETUP_SNIPPET} variant="hero" label="Copy setup" />
+          <span style={{
+            fontFamily: 'var(--font-mono)',
+            fontSize: 12,
+            color: tokens.colors.textMuted,
+          }}>
             npm install @cacheplane/stream-resource
           </span>
         </div>
       </div>
 
-      {/* Right column — 45% */}
+      {/* Right column */}
       <div className="hero-right">
         <GenerativeUIFrame />
       </div>
diff --git a/apps/website/src/components/landing/LangGraphShowcase.tsx b/apps/website/src/components/landing/LangGraphShowcase.tsx
new file mode 100644
index 000000000..c5e320f73
--- /dev/null
+++ b/apps/website/src/components/landing/LangGraphShowcase.tsx
@@ -0,0 +1,105 @@
+import { codeToHtml } from 'shiki';
+import { tokens } from '../../../lib/design-tokens';
+import { CapabilityCard } from './CapabilityCard';
+
+const CAPABILITIES = [
+  {
+    icon: '\u26A1',
+    title: 'Streaming',
+    description: 'Surface intermediate progress while the graph runs. Token-by-token updates arrive via SSE and land directly in Angular Signals.',
+    code: `// Token-by-token streaming
+const chat = streamResource<ChatState>({
+  assistantId: 'chat_agent',
+});
+
+// Tokens arrive in real-time
+@for (msg of chat.messages(); track $index) {
+  <p [class.streaming]="$last">
+    {{ msg.content }}
+  </p>
+}`,
+    lang: 'typescript' as const,
+  },
+  {
+    icon: '\uD83D\uDCBE',
+    title: 'Persistence',
+    description: 'Execution state survives retries and resumptions. Thread-based checkpoint recovery means users never lose their conversation.',
+    code: `// Thread persistence across sessions
+const chat = streamResource<ChatState>({
+  assistantId: 'agent',
+  threadId: signal(localStorage.getItem('tid')),
+  onThreadId: (id) => {
+    localStorage.setItem('tid', id);
+  },
+});`,
+    lang: 'typescript' as const,
+  },
+  {
+    icon: '\u270B',
+    title: 'Interrupts',
+    description: 'Pause execution for human decisions \u2014 approvals, confirmations, corrections. Resume without losing any context or state.',
+    code: `// Human-in-the-loop approval
+const agent = streamResource<AgentState>({
+  assistantId: 'approval_agent',
+  onInterrupt: (data) => {
+    this.approval.set(data);
+  },
+});
+
+// User approves \u2192 resume
+agent.submit({ resume: { approved: true } });`,
+    lang: 'typescript' as const,
+  },
+  {
+    icon: '\u23EA',
+    title: 'Time Travel',
+    description: 'Inspect earlier states and replay alternate execution paths. Debug agent decisions by stepping through the full state history.',
+    code: `// Browse execution history
+const history = agent.history();
+
+// Fork from a previous state
+agent.submit({
+  checkpoint: history[2].checkpoint,
+  messages: [{ role: 'user', content: 'Try again' }],
+});`,
+    lang: 'typescript' as const,
+  },
+];
+
+export async function LangGraphShowcase() {
+  const cards = await Promise.all(
+    CAPABILITIES.map(async (cap) => ({
+      ...cap,
+      codeHtml: await codeToHtml(cap.code, { lang: cap.lang, theme: 'tokyo-night' }),
+    })),
+  );
+
+  return (
+    <section className="px-8 py-20 max-w-6xl mx-auto animate-on-scroll">
+      <p className="font-mono text-xs uppercase tracking-widest mb-4 text-center"
+        style={{ color: tokens.colors.accent }}>LangGraph Capabilities</p>
+      <h2 style={{
+        fontFamily: 'var(--font-garamond)',
+        fontWeight: 800,
+        fontSize: 'clamp(28px, 3.5vw, 48px)',
+        color: tokens.colors.textPrimary,
+        textAlign: 'center',
+        marginBottom: 48,
+      }}>Every LangGraph feature, natively in Angular</h2>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {cards.map((card, i) => (
+          <CapabilityCard
+            key={card.title}
+            icon={card.icon}
+            title={card.title}
+            description={card.description}
+            codeHtml={card.codeHtml}
+            tint="blue"
+            index={i}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/website/src/components/landing/StatsStrip.tsx b/apps/website/src/components/landing/StatsStrip.tsx
new file mode 100644
index 000000000..9c89853ca
--- /dev/null
+++ b/apps/website/src/components/landing/StatsStrip.tsx
@@ -0,0 +1,47 @@
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '../../../lib/design-tokens';
+
+const STATS = [
+  { value: '14+', label: 'Capabilities' },
+  { value: '100%', label: 'useStream() Parity' },
+  { value: '20+', label: 'Angular Version' },
+  { value: 'OSS', label: 'Source Available' },
+];
+
+export function StatsStrip() {
+  return (
+    <section className="px-8 py-16 max-w-5xl mx-auto">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {STATS.map((stat, i) => (
+          <motion.div
+            key={stat.label}
+            className="text-center py-8 rounded-xl"
+            style={{
+              background: tokens.glass.bg,
+              backdropFilter: `blur(${tokens.glass.blur})`,
+              WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+              border: `1px solid ${tokens.glass.border}`,
+            }}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: i * 0.1, duration: 0.4 }}>
+            <div style={{
+              fontFamily: 'var(--font-mono)',
+              fontSize: 'clamp(28px, 3vw, 40px)',
+              fontWeight: 700,
+              color: tokens.colors.accent,
+              marginBottom: 4,
+            }}>{stat.value}</div>
+            <div style={{
+              fontFamily: 'var(--font-garamond)',
+              fontSize: '0.9rem',
+              color: tokens.colors.textSecondary,
+            }}>{stat.label}</div>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/website/src/components/landing/ValueProps.tsx b/apps/website/src/components/landing/ValueProps.tsx
new file mode 100644
index 000000000..a0764bd74
--- /dev/null
+++ b/apps/website/src/components/landing/ValueProps.tsx
@@ -0,0 +1,110 @@
+import { codeToHtml } from 'shiki';
+import { tokens } from '../../../lib/design-tokens';
+import { ValuePropsTabs } from './ValuePropsTabs';
+
+const TAB_DATA = [
+  {
+    id: 'reactive',
+    label: 'Reactive by Default',
+    headline: 'Every State Slice is a Signal',
+    description: 'streamResource() exposes messages, status, error, and threadId as Angular Signals. Compose them with computed(), bind them in templates, and let OnPush change detection handle the rest. No manual subscriptions. No RxJS boilerplate.',
+    code: `// chat.component.ts
+const chat = streamResource<ChatState>({
+  assistantId: 'agent',
+});
+
+// Every property is a Signal
+const messages = chat.messages();   // Signal<BaseMessage[]>
+const status = chat.status();       // Signal<'idle' | 'streaming'>
+const error = chat.error();         // Signal<Error | null>
+
+// Reactive composition
+const lastMessage = computed(() =>
+  chat.messages().at(-1)?.content ?? ''
+);`,
+    lang: 'typescript' as const,
+  },
+  {
+    id: 'agents',
+    label: 'Built for Agents',
+    headline: 'Full Agent Lifecycle Support',
+    description: 'Handle interrupts for human-in-the-loop approval, process tool calls, navigate branch history, and manage subagent delegation. Every LangGraph agent pattern has a first-class Angular API — no React translation layer needed.',
+    code: `// approval.component.ts
+const agent = streamResource<AgentState>({
+  assistantId: 'approval_agent',
+  onInterrupt: (interrupt) => {
+    // Agent paused — surface to user
+    this.pendingApproval.set(interrupt);
+  },
+});
+
+// Resume after human decision
+approve() {
+  agent.submit({ resume: { approved: true } });
+}
+
+// Access full branch history
+const branches = agent.history();`,
+    lang: 'typescript' as const,
+  },
+  {
+    id: 'testing',
+    label: 'Test Everything',
+    headline: 'Deterministic Agent Testing',
+    description: 'MockStreamTransport lets you script exact event sequences and step through them in your specs. No flaky SSE connections, no timing issues, no running LangGraph server. Test agent behavior the same way you test any Angular service.',
+    code: `// chat.component.spec.ts
+const transport = new MockStreamTransport();
+
+transport.script([
+  { type: 'values', data: { messages: [aiMsg('Hello')] } },
+  { type: 'values', data: { status: 'done' } },
+]);
+
+const chat = streamResource<ChatState>({
+  transport,
+  assistantId: 'test_agent',
+});
+
+expect(chat.messages()).toEqual([aiMsg('Hello')]);
+expect(chat.status()).toBe('done');`,
+    lang: 'typescript' as const,
+  },
+];
+
+export async function ValueProps() {
+  const tabs = await Promise.all(
+    TAB_DATA.map(async (tab) => ({
+      id: tab.id,
+      label: tab.label,
+      headline: tab.headline,
+      description: tab.description,
+      codeHtml: await codeToHtml(tab.code, { lang: tab.lang, theme: 'tokyo-night' }),
+    })),
+  );
+
+  return (
+    <section className="px-8 py-20 max-w-6xl mx-auto animate-on-scroll">
+      <p className="font-mono text-xs uppercase tracking-widest mb-4 text-center"
+        style={{ color: tokens.colors.accent }}>Why streamResource()?</p>
+      <h2 style={{
+        fontFamily: 'var(--font-garamond)',
+        fontWeight: 800,
+        fontSize: 'clamp(28px, 3.5vw, 48px)',
+        color: tokens.colors.textPrimary,
+        textAlign: 'center',
+        marginBottom: 8,
+      }}>Full parity with React <code style={{
+        fontFamily: 'var(--font-mono)',
+        fontSize: '0.85em',
+        background: tokens.colors.accentSurface,
+        color: tokens.colors.accent,
+        padding: '2px 8px',
+        borderRadius: 6,
+      }}>useStream()</code></h2>
+      <p className="text-center mb-12" style={{ color: tokens.colors.textSecondary, maxWidth: '50ch', margin: '0 auto 48px' }}>
+        Built natively for Angular 20+. No wrappers, no adapters, no compromises.
+      </p>
+      <ValuePropsTabs tabs={tabs} />
+    </section>
+  );
+}
diff --git a/apps/website/src/components/landing/ValuePropsTabs.tsx b/apps/website/src/components/landing/ValuePropsTabs.tsx
new file mode 100644
index 000000000..a0c149f82
--- /dev/null
+++ b/apps/website/src/components/landing/ValuePropsTabs.tsx
@@ -0,0 +1,79 @@
+'use client';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { tokens } from '../../../lib/design-tokens';
+
+interface Tab {
+  id: string;
+  label: string;
+  headline: string;
+  description: string;
+  codeHtml: string;
+}
+
+export function ValuePropsTabs({ tabs }: { tabs: Tab[] }) {
+  const [active, setActive] = useState(0);
+
+  return (
+    <div>
+      <div className="flex gap-2 mb-8 justify-center flex-wrap">
+        {tabs.map((tab, i) => (
+          <button
+            key={tab.id}
+            onClick={() => setActive(i)}
+            className="px-5 py-2.5 rounded-lg font-mono text-sm transition-all"
+            style={{
+              background: active === i ? tokens.colors.accentSurface : 'transparent',
+              color: active === i ? tokens.colors.accent : tokens.colors.textSecondary,
+              border: `1px solid ${active === i ? tokens.colors.accentBorderHover : 'transparent'}`,
+            }}>
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={tabs[active].id}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -10 }}
+          transition={{ duration: 0.25 }}
+          className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
+
+          <div className="p-8 rounded-xl" style={{
+            background: tokens.glass.bg,
+            backdropFilter: `blur(${tokens.glass.blur})`,
+            WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+            border: `1px solid ${tokens.glass.border}`,
+          }}>
+            <h3 style={{
+              fontFamily: 'var(--font-garamond)',
+              fontWeight: 700,
+              fontSize: '1.5rem',
+              color: tokens.colors.textPrimary,
+              marginBottom: 12,
+            }}>{tabs[active].headline}</h3>
+            <p style={{
+              fontSize: '0.95rem',
+              color: tokens.colors.textSecondary,
+              lineHeight: 1.7,
+            }}>{tabs[active].description}</p>
+          </div>
+
+          <div style={{
+            borderRadius: 12,
+            border: `1px solid ${tokens.glass.border}`,
+            boxShadow: tokens.glass.shadow,
+            overflow: 'hidden',
+          }}>
+            <div
+              className="text-sm leading-relaxed"
+              dangerouslySetInnerHTML={{ __html: tabs[active].codeHtml }}
+            />
+          </div>
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/apps/website/src/components/pricing/CompareTable.tsx b/apps/website/src/components/pricing/CompareTable.tsx
index fb703e4f8..3e9edd777 100644
--- a/apps/website/src/components/pricing/CompareTable.tsx
+++ b/apps/website/src/components/pricing/CompareTable.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { tokens } from '../../../lib/design-tokens';
 
 const ROWS = [
   { feature: 'npm install', oss: true, seat: true, app: true, enterprise: true },
@@ -11,37 +12,46 @@ const ROWS = [
   { feature: 'Priority support', oss: false, seat: false, app: false, enterprise: true },
 ];
 
-const Check = () => <span style={{ color: '#6C8EFF' }}>✓</span>;
-const X = () => <span style={{ color: '#4A527A' }}>—</span>;
+const Check = () => <span style={{ color: tokens.colors.accent }}>✓</span>;
+const X = () => <span style={{ color: tokens.colors.textMuted }}>—</span>;
 
 export function CompareTable() {
   return (
     <section className="px-8 py-8 max-w-6xl mx-auto overflow-x-auto">
-      <table className="w-full text-sm" style={{ borderCollapse: 'collapse' }}>
-        <thead>
-          <tr style={{ borderBottom: '1px solid rgba(108,142,255,0.15)' }}>
-            <th className="text-left py-3 font-mono text-xs uppercase" style={{ color: '#4A527A' }}>Feature</th>
-            {['Community', 'Developer Seat', 'App Deployment', 'Enterprise'].map((h) => (
-              <th key={h} className="text-center py-3 font-mono text-xs uppercase" style={{ color: '#6C8EFF' }}>{h}</th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {ROWS.map((row) => (
-            <tr
-              key={row.feature}
-              style={{ borderBottom: '1px solid rgba(108,142,255,0.08)' }}
-              onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(108,142,255,0.06)')}
-              onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}>
-              <td className="py-3" style={{ color: '#8B96C8' }}>{row.feature}</td>
-              <td className="py-3 text-center">{row.oss ? <Check /> : <X />}</td>
-              <td className="py-3 text-center">{row.seat ? <Check /> : <X />}</td>
-              <td className="py-3 text-center">{row.app ? <Check /> : <X />}</td>
-              <td className="py-3 text-center">{row.enterprise ? <Check /> : <X />}</td>
+      <div style={{
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+        border: `1px solid ${tokens.glass.border}`,
+        borderRadius: 12,
+        overflow: 'hidden',
+      }}>
+        <table className="w-full text-sm" style={{ borderCollapse: 'collapse' }}>
+          <thead>
+            <tr style={{ borderBottom: `1px solid ${tokens.colors.accentBorder}`, background: 'rgba(255,255,255,0.55)' }}>
+              <th className="text-left py-3 px-4 font-mono text-xs uppercase" style={{ color: tokens.colors.textMuted }}>Feature</th>
+              {['Community', 'Developer Seat', 'App Deployment', 'Enterprise'].map((h) => (
+                <th key={h} className="text-center py-3 px-4 font-mono text-xs uppercase" style={{ color: tokens.colors.accent }}>{h}</th>
+              ))}
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {ROWS.map((row) => (
+              <tr
+                key={row.feature}
+                style={{ borderBottom: `1px solid ${tokens.colors.accentBorder}` }}
+                onMouseEnter={(e) => (e.currentTarget.style.background = tokens.colors.accentSurface)}
+                onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}>
+                <td className="py-3 px-4" style={{ color: tokens.colors.textSecondary }}>{row.feature}</td>
+                <td className="py-3 px-4 text-center">{row.oss ? <Check /> : <X />}</td>
+                <td className="py-3 px-4 text-center">{row.seat ? <Check /> : <X />}</td>
+                <td className="py-3 px-4 text-center">{row.app ? <Check /> : <X />}</td>
+                <td className="py-3 px-4 text-center">{row.enterprise ? <Check /> : <X />}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </section>
   );
 }
diff --git a/apps/website/src/components/pricing/LeadForm.tsx b/apps/website/src/components/pricing/LeadForm.tsx
index f63020277..02b6ed2d0 100644
--- a/apps/website/src/components/pricing/LeadForm.tsx
+++ b/apps/website/src/components/pricing/LeadForm.tsx
@@ -1,9 +1,6 @@
 'use client';
 import { useState } from 'react';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import { Label } from '@/components/ui/label';
-import { Button } from '@/components/ui/button';
+import { tokens } from '../../../lib/design-tokens';
 
 export function LeadForm() {
   const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
@@ -25,60 +22,98 @@ export function LeadForm() {
     }
   };
 
+  const inputStyle: React.CSSProperties = {
+    background: 'rgba(255, 255, 255, 0.6)',
+    border: `1px solid ${tokens.glass.border}`,
+    color: tokens.colors.textPrimary,
+    borderRadius: '6px',
+    padding: '10px 14px',
+    width: '100%',
+    fontFamily: 'var(--font-inter)',
+    fontSize: '14px',
+    outline: 'none',
+  };
+
   return (
     <section id="lead-form" className="px-8 py-16 max-w-xl mx-auto">
-      <p
-        className="font-mono text-xs uppercase tracking-widest mb-8 text-center"
-        style={{ color: '#6C8EFF' }}
-      >
-        Enterprise
-      </p>
+      <p className="font-mono text-xs uppercase tracking-widest mb-8 text-center" style={{ color: tokens.colors.accent }}>Enterprise</p>
       <h2
         style={{
           fontFamily: 'var(--font-garamond)',
           fontWeight: 700,
           fontSize: 'clamp(24px, 3vw, 36px)',
-          color: '#EEF1FF',
+          color: tokens.colors.textPrimary,
           textAlign: 'center',
           marginBottom: 32,
-        }}
-      >
+        }}>
         Need volume seats or a custom contract?
       </h2>
-
       {status === 'sent' ? (
-        <p className="text-center text-muted-foreground">
-          Thanks — we&apos;ll be in touch within one business day.
-        </p>
+        <p className="text-center" style={{ color: tokens.colors.textSecondary }}>Thanks &mdash; we&apos;ll be in touch within one business day.</p>
       ) : (
-        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="lead-name">Name</Label>
-            <Input id="lead-name" name="name" placeholder="Name" required />
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="lead-email">Work email</Label>
-            <Input id="lead-email" name="email" type="email" placeholder="Work email" required />
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="lead-company">Company</Label>
-            <Input id="lead-company" name="company" placeholder="Company" />
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="lead-message">Use case</Label>
-            <Textarea
-              id="lead-message"
-              name="message"
-              placeholder="Tell us about your use case"
-              rows={4}
-            />
-          </div>
-          <Button type="submit" disabled={status === 'sending'} className="w-full mt-2">
-            {status === 'sending' ? 'Sending…' : 'Get in touch'}
-          </Button>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4"
+          style={{
+            background: tokens.glass.bg,
+            backdropFilter: `blur(${tokens.glass.blur})`,
+            WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+            border: `1px solid ${tokens.glass.border}`,
+            borderRadius: 12,
+            padding: 24,
+          }}>
+          <input
+            name="name"
+            placeholder="Name"
+            required
+            style={inputStyle}
+            onFocus={(e) => { e.target.style.borderColor = tokens.colors.accent; e.target.style.outline = `2px solid ${tokens.colors.accentGlow}`; e.target.style.outlineOffset = '2px'; }}
+            onBlur={(e) => { e.target.style.borderColor = tokens.glass.border; e.target.style.outline = 'none'; }}
+          />
+          <input
+            name="email"
+            type="email"
+            placeholder="Work email"
+            required
+            style={inputStyle}
+            onFocus={(e) => { e.target.style.borderColor = tokens.colors.accent; e.target.style.outline = `2px solid ${tokens.colors.accentGlow}`; e.target.style.outlineOffset = '2px'; }}
+            onBlur={(e) => { e.target.style.borderColor = tokens.glass.border; e.target.style.outline = 'none'; }}
+          />
+          <input
+            name="company"
+            placeholder="Company"
+            style={inputStyle}
+            onFocus={(e) => { e.target.style.borderColor = tokens.colors.accent; e.target.style.outline = `2px solid ${tokens.colors.accentGlow}`; e.target.style.outlineOffset = '2px'; }}
+            onBlur={(e) => { e.target.style.borderColor = tokens.glass.border; e.target.style.outline = 'none'; }}
+          />
+          <textarea
+            name="message"
+            placeholder="Tell us about your use case"
+            rows={4}
+            style={{ ...inputStyle, resize: 'vertical' }}
+            onFocus={(e) => { e.target.style.borderColor = tokens.colors.accent; e.target.style.outline = `2px solid ${tokens.colors.accentGlow}`; e.target.style.outlineOffset = '2px'; }}
+            onBlur={(e) => { e.target.style.borderColor = tokens.glass.border; e.target.style.outline = 'none'; }}
+          />
+          <button
+            type="submit"
+            disabled={status === 'sending'}
+            style={{
+              background: tokens.colors.accent,
+              color: '#fff',
+              border: 'none',
+              borderRadius: '6px',
+              padding: '12px 24px',
+              fontFamily: 'var(--font-mono)',
+              fontSize: '14px',
+              cursor: status === 'sending' ? 'not-allowed' : 'pointer',
+              opacity: status === 'sending' ? 0.6 : 1,
+              transition: 'box-shadow 0.2s',
+            }}
+            onMouseEnter={(e) => { if (status !== 'sending') e.currentTarget.style.boxShadow = tokens.glow.button; }}
+            onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}>
+            {status === 'sending' ? 'Sending\u2026' : 'Get in touch'}
+          </button>
           {status === 'error' && (
             <p className="text-sm text-center" style={{ color: '#FF6B6B' }}>
-              Something went wrong — try again or email us directly.
+              Something went wrong &mdash; try again or email us directly.
             </p>
           )}
         </form>
diff --git a/apps/website/src/components/pricing/PricingGrid.tsx b/apps/website/src/components/pricing/PricingGrid.tsx
index 38bb91f90..de7135e7a 100644
--- a/apps/website/src/components/pricing/PricingGrid.tsx
+++ b/apps/website/src/components/pricing/PricingGrid.tsx
@@ -1,7 +1,5 @@
 'use client';
-import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
+import { tokens } from '../../../lib/design-tokens';
 
 const PLANS = [
   {
@@ -47,49 +45,54 @@ export function PricingGrid() {
     <section className="px-8 py-16 max-w-6xl mx-auto">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         {PLANS.map((plan) => (
-          <Card
+          <div
             key={plan.name}
-            className="flex flex-col"
+            className="p-8 rounded-xl flex flex-col"
             style={{
-              border: `1px solid ${plan.highlight ? '#6C8EFF' : 'rgba(108,142,255,0.15)'}`,
-              boxShadow: plan.highlight ? '0 0 28px rgba(108,142,255,0.32)' : 'none',
-            }}
-          >
-            <CardHeader className="pb-0">
-              <Badge variant="default" className="w-fit mb-4">{plan.name}</Badge>
-              <p
-                style={{
-                  fontFamily: 'var(--font-garamond)',
-                  fontWeight: 700,
-                  fontSize: 48,
-                  color: '#EEF1FF',
-                  lineHeight: 1,
-                  marginBottom: 4,
-                }}
-              >
-                {plan.price}
-              </p>
-              <p className="text-sm" style={{ color: '#4A527A' }}>{plan.period}</p>
-            </CardHeader>
-            <CardContent className="flex-1 pt-6">
-              <ul className="flex flex-col gap-2">
-                {plan.features.map((f) => (
-                  <li key={f} className="text-sm flex items-center gap-2 text-muted-foreground">
-                    <span style={{ color: '#6C8EFF' }}>✓</span> {f}
-                  </li>
-                ))}
-              </ul>
-            </CardContent>
-            <CardFooter>
-              <Button
-                asChild
-                variant={plan.highlight ? 'default' : 'outline'}
-                className="w-full"
-              >
-                <a href={plan.ctaHref}>{plan.cta}</a>
-              </Button>
-            </CardFooter>
-          </Card>
+              border: `1px solid ${plan.highlight ? tokens.colors.accent : tokens.glass.border}`,
+              boxShadow: plan.highlight ? tokens.glow.card : tokens.glass.shadow,
+              background: plan.highlight ? 'rgba(255, 255, 255, 0.55)' : tokens.glass.bg,
+              backdropFilter: `blur(${tokens.glass.blur})`,
+              WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+            }}>
+            <p
+              className="font-mono text-xs uppercase tracking-widest mb-4"
+              style={{ color: tokens.colors.accent }}>
+              {plan.name}
+            </p>
+            <p
+              style={{
+                fontFamily: 'var(--font-garamond)',
+                fontWeight: 700,
+                fontSize: 48,
+                color: tokens.colors.textPrimary,
+                lineHeight: 1,
+                marginBottom: 4,
+              }}>
+              {plan.price}
+            </p>
+            <p className="text-sm mb-8" style={{ color: tokens.colors.textMuted }}>{plan.period}</p>
+            <ul className="flex flex-col gap-2 mb-8 flex-1">
+              {plan.features.map((f) => (
+                <li key={f} className="text-sm flex items-center gap-2" style={{ color: tokens.colors.textSecondary }}>
+                  <span style={{ color: tokens.colors.accent }}>✓</span> {f}
+                </li>
+              ))}
+            </ul>
+            <a
+              href={plan.ctaHref}
+              className="text-center py-3 px-6 rounded font-mono text-sm transition-all"
+              style={{
+                background: plan.highlight ? tokens.colors.accent : 'transparent',
+                color: plan.highlight ? '#fff' : tokens.colors.accent,
+                border: `1px solid ${tokens.colors.accent}`,
+                textDecoration: 'none',
+              }}
+              onMouseEnter={(e) => (e.currentTarget.style.boxShadow = tokens.glow.button)}
+              onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}>
+              {plan.cta}
+            </a>
+          </div>
         ))}
       </div>
     </section>
diff --git a/apps/website/src/components/shared/Footer.tsx b/apps/website/src/components/shared/Footer.tsx
index 155db69fa..f03e15c4d 100644
--- a/apps/website/src/components/shared/Footer.tsx
+++ b/apps/website/src/components/shared/Footer.tsx
@@ -1,28 +1,133 @@
+'use client';
 import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { tokens } from '../../../lib/design-tokens';
+
+function GitHubIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+    </svg>
+  );
+}
+
+function NpmIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M0 0v16h16V0H0zm13 13H8V5h2.5v5.5H13V5h-1V3H3v10h10V0H0v16h16V0H0z" opacity="0" />
+      <path d="M0 0v16h16V0H0zm13 13h-2.5V5.5H8V13H3V3h10v10z" />
+    </svg>
+  );
+}
 
 export function Footer() {
   return (
-    <footer className="px-8 py-12 mt-24"
-      style={{ borderTop: '1px solid var(--color-accent-border)' }}>
-      <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-start justify-between gap-8">
-        <div>
-          <p className="font-garamond text-lg font-bold" style={{ color: 'var(--color-text-primary)' }}>StreamResource</p>
-          <p className="text-sm mt-1" style={{ color: 'var(--color-text-muted)' }}>The Enterprise Streaming Resource for LangChain and Angular</p>
-        </div>
-        <div className="flex gap-12 text-sm">
-          <div className="flex flex-col gap-2">
-            <span className="font-mono text-xs uppercase" style={{ color: 'var(--color-accent)' }}>Product</span>
-            <Link href="/docs" className="transition-colors" style={{ color: 'var(--color-text-secondary)' }}>Docs</Link>
-            <Link href="/api-reference" className="transition-colors" style={{ color: 'var(--color-text-secondary)' }}>API Reference</Link>
-            <Link href="/pricing" className="transition-colors" style={{ color: 'var(--color-text-secondary)' }}>Pricing</Link>
+    <footer className="px-6 md:px-8 py-16 mt-24"
+      style={{
+        borderTop: `1px solid ${tokens.glass.border}`,
+        background: 'rgba(255, 255, 255, 0.55)',
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+      }}>
+      <motion.div
+        className="max-w-6xl mx-auto"
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}>
+
+        {/* Top section: brand + columns */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-8">
+          {/* Brand */}
+          <div className="md:col-span-2">
+            <p className="font-garamond text-xl font-bold mb-2" style={{ color: tokens.colors.textPrimary }}>StreamResource</p>
+            <p className="text-sm mb-4" style={{ color: tokens.colors.textMuted, maxWidth: '36ch', lineHeight: 1.6 }}>
+              The enterprise streaming resource for LangChain and Angular. Full parity with React useStream(), built natively for Angular 20+.
+            </p>
+            {/* Social links */}
+            <div className="flex items-center gap-4">
+              <a href="https://github.com/cacheplane/stream-resource"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="transition-colors"
+                style={{ color: tokens.colors.textMuted }}
+                onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+                onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textMuted)}
+                aria-label="GitHub">
+                <GitHubIcon />
+              </a>
+              <a href="https://www.npmjs.com/package/@cacheplane/stream-resource"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="transition-colors"
+                style={{ color: tokens.colors.textMuted }}
+                onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+                onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textMuted)}
+                aria-label="npm">
+                <NpmIcon />
+              </a>
+            </div>
+          </div>
+
+          {/* Product column */}
+          <div className="flex flex-col gap-2.5 text-sm">
+            <span className="font-mono text-xs uppercase tracking-wider mb-1" style={{ color: tokens.colors.accent }}>Product</span>
+            <Link href="/docs" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              Documentation
+            </Link>
+            <Link href="/api-reference" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              API Reference
+            </Link>
+            <Link href="/pricing" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              Pricing
+            </Link>
+            <a href="https://github.com/cacheplane/stream-resource"
+              target="_blank" rel="noopener noreferrer"
+              className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              GitHub
+            </a>
           </div>
+
+          {/* Resources column */}
+          <div className="flex flex-col gap-2.5 text-sm">
+            <span className="font-mono text-xs uppercase tracking-wider mb-1" style={{ color: tokens.colors.accent }}>Resources</span>
+            <Link href="/docs" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              Getting Started
+            </Link>
+            <a href="https://www.npmjs.com/package/@cacheplane/stream-resource"
+              target="_blank" rel="noopener noreferrer"
+              className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              npm Package
+            </a>
+            <Link href="/pricing" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              Commercial License
+            </Link>
+          </div>
+        </div>
+
+        {/* Bottom bar */}
+        <div className="mt-12 pt-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 text-xs"
+          style={{ borderTop: `1px solid ${tokens.glass.border}`, color: tokens.colors.textMuted }}>
+          <span>&copy; {new Date().getFullYear()} StreamResource. All rights reserved.</span>
+          <span>PolyForm Noncommercial 1.0.0 &middot; <Link href="/pricing" className="transition-colors"
+            onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+            onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textMuted)}>Commercial License</Link></span>
         </div>
-      </div>
-      <div className="max-w-6xl mx-auto mt-8 pt-8 flex items-center justify-between text-xs"
-        style={{ borderTop: '1px solid var(--color-accent-border)', color: 'var(--color-text-muted)' }}>
-        <span>© {new Date().getFullYear()} StreamResource. All rights reserved.</span>
-        <span>PolyForm Noncommercial 1.0.0 · <Link href="/pricing" className="transition-colors">Commercial License</Link></span>
-      </div>
+      </motion.div>
     </footer>
   );
 }
diff --git a/apps/website/src/components/shared/InstallStrip.tsx b/apps/website/src/components/shared/InstallStrip.tsx
index 38e29e0ad..20f62a69a 100644
--- a/apps/website/src/components/shared/InstallStrip.tsx
+++ b/apps/website/src/components/shared/InstallStrip.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { useState } from 'react';
+import { tokens } from '../../../lib/design-tokens';
 
 const CMD = 'npm install @cacheplane/stream-resource';
 
@@ -14,13 +15,18 @@ export function InstallStrip() {
 
   return (
     <div className="inline-flex items-center gap-4 px-6 py-3 rounded-lg transition-all cursor-pointer"
-      style={{ border: '1px solid var(--color-accent-border)', background: 'rgba(108,142,255,0.04)' }}
-      onMouseEnter={(e) => (e.currentTarget.style.boxShadow = '0 0 12px rgba(108,142,255,0.2)')}
+      style={{
+        border: `1px solid ${tokens.colors.accentBorder}`,
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+      }}
+      onMouseEnter={(e) => (e.currentTarget.style.boxShadow = tokens.glow.border)}
       onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}
       onClick={copy}>
-      <code className="font-mono text-sm" style={{ color: 'var(--color-text-secondary)' }}>{CMD}</code>
+      <code className="font-mono text-sm" style={{ color: tokens.colors.textSecondary }}>{CMD}</code>
       <button className="font-mono text-xs uppercase shrink-0 transition-colors"
-        style={{ color: copied ? 'var(--color-accent)' : 'var(--color-text-muted)' }}>
+        style={{ color: copied ? tokens.colors.accent : tokens.colors.textMuted }}>
         {copied ? 'Copied!' : 'Copy'}
       </button>
     </div>
diff --git a/apps/website/src/components/shared/Nav.tsx b/apps/website/src/components/shared/Nav.tsx
index 8ba1a8e79..2b83f0d0f 100644
--- a/apps/website/src/components/shared/Nav.tsx
+++ b/apps/website/src/components/shared/Nav.tsx
@@ -1,45 +1,125 @@
 'use client';
+import { useState } from 'react';
 import Link from 'next/link';
-import { Button } from '@/components/ui/button';
+import { tokens } from '../../../lib/design-tokens';
 
 const links = [
   { label: 'Docs', href: '/docs' },
-  { label: 'API', href: '/api-reference' },
+  { label: 'API', href: '/docs/api/stream-resource' },
   { label: 'Pricing', href: '/pricing' },
 ];
 
+function GitHubIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+    </svg>
+  );
+}
+
+function MenuIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+      <path d="M3 5h14M3 10h14M3 15h14" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+      <path d="M5 5l10 10M15 5L5 15" />
+    </svg>
+  );
+}
+
 export function Nav() {
+  const [open, setOpen] = useState(false);
+
   return (
-    <nav
-      className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-8 py-5"
+    <nav className="fixed top-0 left-0 right-0 z-50"
       style={{
-        borderBottom: '1px solid var(--color-accent-border)',
-        background: 'rgba(8,11,20,0.85)',
-        backdropFilter: 'blur(12px)',
-      }}
-    >
-      <Link
-        href="/"
-        className="font-bold text-xl"
-        style={{ fontFamily: 'var(--font-garamond)', color: 'var(--color-text-primary)' }}
-      >
-        StreamResource
-      </Link>
-      <div className="flex items-center gap-8">
-        {links.map((l) => (
-          <Link
-            key={l.href}
-            href={l.href}
-            className="text-sm font-mono transition-colors"
-            style={{ color: 'var(--color-text-secondary)' }}
-          >
-            {l.label}
+        borderBottom: `1px solid ${tokens.glass.border}`,
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+        boxShadow: tokens.glass.shadow,
+      }}>
+      {/* Top bar */}
+      <div className="flex items-center justify-between px-6 py-4 md:px-8 md:py-5">
+        <Link href="/" className="font-garamond text-xl font-bold" style={{ color: tokens.colors.textPrimary }}>
+          StreamResource
+        </Link>
+
+        {/* Desktop links */}
+        <div className="hidden md:flex items-center gap-8">
+          {links.map((l) => (
+            <Link key={l.href} href={l.href}
+              className="text-sm font-mono transition-colors"
+              style={{ color: tokens.colors.textSecondary }}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              {l.label}
+            </Link>
+          ))}
+          <a href="https://github.com/cacheplane/stream-resource"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="transition-colors"
+            style={{ color: tokens.colors.textSecondary }}
+            onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+            onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}
+            aria-label="GitHub repository">
+            <GitHubIcon />
+          </a>
+          <Link href="/pricing"
+            className="px-4 py-2 text-sm font-mono rounded transition-all"
+            style={{ background: tokens.colors.accent, color: '#fff' }}
+            onMouseEnter={(e) => (e.currentTarget.style.boxShadow = tokens.glow.button)}
+            onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}>
+            Get Started
           </Link>
-        ))}
-        <Button asChild size="default">
-          <Link href="/pricing">Get Started</Link>
-        </Button>
+        </div>
+
+        {/* Mobile hamburger */}
+        <button
+          className="md:hidden"
+          onClick={() => setOpen(!open)}
+          aria-label={open ? 'Close menu' : 'Open menu'}
+          style={{ color: tokens.colors.textPrimary }}>
+          {open ? <CloseIcon /> : <MenuIcon />}
+        </button>
       </div>
+
+      {/* Mobile menu */}
+      {open && (
+        <div className="md:hidden px-6 pb-5 flex flex-col gap-4"
+          style={{ borderTop: `1px solid ${tokens.glass.border}` }}>
+          {links.map((l) => (
+            <Link key={l.href} href={l.href}
+              onClick={() => setOpen(false)}
+              className="text-sm font-mono py-1"
+              style={{ color: tokens.colors.textSecondary }}>
+              {l.label}
+            </Link>
+          ))}
+          <div className="flex items-center gap-4 pt-2">
+            <a href="https://github.com/cacheplane/stream-resource"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: tokens.colors.textSecondary }}
+              aria-label="GitHub repository">
+              <GitHubIcon />
+            </a>
+            <Link href="/pricing"
+              onClick={() => setOpen(false)}
+              className="px-4 py-2 text-sm font-mono rounded"
+              style={{ background: tokens.colors.accent, color: '#fff' }}>
+              Get Started
+            </Link>
+          </div>
+        </div>
+      )}
     </nav>
   );
 }
diff --git a/apps/website/src/components/ui/badge.tsx b/apps/website/src/components/ui/badge.tsx
deleted file mode 100644
index bee6a1a85..000000000
--- a/apps/website/src/components/ui/badge.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-mono transition-colors',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-[rgba(108,142,255,0.08)] border border-[rgba(108,142,255,0.15)] text-foreground',
-        primary:
-          'bg-primary text-primary-foreground',
-        outline:
-          'border border-[rgba(108,142,255,0.15)] bg-[rgba(108,142,255,0.08)] text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };
diff --git a/apps/website/src/components/ui/button.tsx b/apps/website/src/components/ui/button.tsx
deleted file mode 100644
index 125e26ed2..000000000
--- a/apps/website/src/components/ui/button.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-mono transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground hover:shadow-[0_0_16px_rgba(108,142,255,0.4)]',
-        outline:
-          'border border-primary text-primary bg-transparent hover:shadow-[0_0_16px_rgba(108,142,255,0.4)]',
-        ghost:
-          'text-muted-foreground hover:text-foreground hover:bg-[rgba(108,142,255,0.08)]',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'px-4 py-2',
-        sm: 'px-3 py-1.5 text-xs',
-        lg: 'px-6 py-3',
-        icon: 'size-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        ref={ref}
-        className={cn(buttonVariants({ variant, size, className }))}
-        {...props}
-      />
-    );
-  }
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
diff --git a/apps/website/src/components/ui/card.tsx b/apps/website/src/components/ui/card.tsx
deleted file mode 100644
index 8158e3f10..000000000
--- a/apps/website/src/components/ui/card.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'rounded-lg border bg-card text-card-foreground',
-        className
-      )}
-      style={{ borderColor: 'rgba(108,142,255,0.15)', background: 'rgba(108,142,255,0.02)' }}
-      {...props}
-    />
-  )
-);
-Card.displayName = 'Card';
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-  )
-);
-CardHeader.displayName = 'CardHeader';
-
-const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={cn('font-bold text-lg text-foreground', className)}
-      style={{ fontFamily: 'var(--font-garamond)' }}
-      {...props}
-    />
-  )
-);
-CardTitle.displayName = 'CardTitle';
-
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn('text-sm text-muted-foreground leading-relaxed', className)} {...props} />
-  )
-);
-CardDescription.displayName = 'CardDescription';
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-  )
-);
-CardContent.displayName = 'CardContent';
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-  )
-);
-CardFooter.displayName = 'CardFooter';
-
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
diff --git a/apps/website/src/components/ui/input.tsx b/apps/website/src/components/ui/input.tsx
deleted file mode 100644
index c528a1854..000000000
--- a/apps/website/src/components/ui/input.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'flex w-full rounded px-3.5 py-2.5 text-sm text-foreground',
-          'bg-[rgba(108,142,255,0.04)] border border-input',
-          'placeholder:text-muted-foreground',
-          'focus-visible:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-[rgba(108,142,255,0.4)] focus-visible:ring-offset-0',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Input.displayName = 'Input';
-
-export { Input };
diff --git a/apps/website/src/components/ui/label.tsx b/apps/website/src/components/ui/label.tsx
deleted file mode 100644
index 22d1a8623..000000000
--- a/apps/website/src/components/ui/label.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-const Label = React.forwardRef<
-  HTMLLabelElement,
-  React.LabelHTMLAttributes<HTMLLabelElement>
->(({ className, ...props }, ref) => (
-  <label
-    ref={ref}
-    className={cn(
-      'text-xs font-mono uppercase tracking-widest text-muted-foreground',
-      className
-    )}
-    {...props}
-  />
-));
-Label.displayName = 'Label';
-
-export { Label };
diff --git a/apps/website/src/components/ui/textarea.tsx b/apps/website/src/components/ui/textarea.tsx
deleted file mode 100644
index a3b03e960..000000000
--- a/apps/website/src/components/ui/textarea.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          'flex w-full rounded px-3.5 py-2.5 text-sm text-foreground resize-vertical',
-          'bg-[rgba(108,142,255,0.04)] border border-input',
-          'placeholder:text-muted-foreground',
-          'focus-visible:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-[rgba(108,142,255,0.4)] focus-visible:ring-offset-0',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Textarea.displayName = 'Textarea';
-
-export { Textarea };
diff --git a/apps/website/src/lib/docs-config.ts b/apps/website/src/lib/docs-config.ts
new file mode 100644
index 000000000..0224f2f88
--- /dev/null
+++ b/apps/website/src/lib/docs-config.ts
@@ -0,0 +1,80 @@
+export interface DocsPage {
+  title: string;
+  slug: string;
+  section: string;
+}
+
+export interface DocsSection {
+  title: string;
+  id: string;
+  color: 'blue' | 'red';
+  pages: DocsPage[];
+}
+
+export const docsConfig: DocsSection[] = [
+  {
+    title: 'Getting Started',
+    id: 'getting-started',
+    color: 'blue',
+    pages: [
+      { title: 'Introduction', slug: 'introduction', section: 'getting-started' },
+      { title: 'Quick Start', slug: 'quickstart', section: 'getting-started' },
+      { title: 'Installation', slug: 'installation', section: 'getting-started' },
+    ],
+  },
+  {
+    title: 'Guides',
+    id: 'guides',
+    color: 'blue',
+    pages: [
+      { title: 'Streaming', slug: 'streaming', section: 'guides' },
+      { title: 'Persistence', slug: 'persistence', section: 'guides' },
+      { title: 'Interrupts', slug: 'interrupts', section: 'guides' },
+      { title: 'Memory', slug: 'memory', section: 'guides' },
+      { title: 'Time Travel', slug: 'time-travel', section: 'guides' },
+      { title: 'Subgraphs', slug: 'subgraphs', section: 'guides' },
+      { title: 'Testing', slug: 'testing', section: 'guides' },
+      { title: 'Deployment', slug: 'deployment', section: 'guides' },
+    ],
+  },
+  {
+    title: 'Concepts',
+    id: 'concepts',
+    color: 'red',
+    pages: [
+      { title: 'Angular Signals', slug: 'angular-signals', section: 'concepts' },
+      { title: 'LangGraph Basics', slug: 'langgraph-basics', section: 'concepts' },
+      { title: 'Agent Architecture', slug: 'agent-architecture', section: 'concepts' },
+      { title: 'State Management', slug: 'state-management', section: 'concepts' },
+    ],
+  },
+  {
+    title: 'API Reference',
+    id: 'api',
+    color: 'blue',
+    pages: [
+      { title: 'streamResource()', slug: 'stream-resource', section: 'api' },
+      { title: 'provideStreamResource()', slug: 'provide-stream-resource', section: 'api' },
+      { title: 'FetchStreamTransport', slug: 'fetch-stream-transport', section: 'api' },
+      { title: 'MockStreamTransport', slug: 'mock-stream-transport', section: 'api' },
+    ],
+  },
+];
+
+export const allDocsPages: DocsPage[] = docsConfig.flatMap((s) => s.pages);
+
+export function findDocsPage(section: string, slug: string): DocsPage | undefined {
+  return allDocsPages.find((p) => p.section === section && p.slug === slug);
+}
+
+export function getPrevNextPages(section: string, slug: string): { prev: DocsPage | null; next: DocsPage | null } {
+  const idx = allDocsPages.findIndex((p) => p.section === section && p.slug === slug);
+  return {
+    prev: idx > 0 ? allDocsPages[idx - 1] : null,
+    next: idx < allDocsPages.length - 1 ? allDocsPages[idx + 1] : null,
+  };
+}
+
+export function getDocsSection(sectionId: string): DocsSection | undefined {
+  return docsConfig.find((s) => s.id === sectionId);
+}
diff --git a/apps/website/src/lib/docs-new.ts b/apps/website/src/lib/docs-new.ts
new file mode 100644
index 000000000..9b7426c21
--- /dev/null
+++ b/apps/website/src/lib/docs-new.ts
@@ -0,0 +1,36 @@
+import fs from 'fs';
+import path from 'path';
+import { allDocsPages, type DocsPage } from './docs-config';
+
+const resolveContentDir = (): string => {
+  const workspacePath = path.join(process.cwd(), 'apps', 'website', 'content', 'docs-v2');
+  if (fs.existsSync(workspacePath)) return workspacePath;
+  return path.join(process.cwd(), 'content', 'docs-v2');
+};
+
+export interface ResolvedDoc {
+  page: DocsPage;
+  content: string;
+  title: string;
+}
+
+export function getDocBySlug(section: string, slug: string): ResolvedDoc | null {
+  const page = allDocsPages.find((p) => p.section === section && p.slug === slug);
+  if (!page) return null;
+
+  const dir = resolveContentDir();
+  const filePath = path.join(dir, section, `${slug}.mdx`);
+  if (!fs.existsSync(filePath)) return null;
+
+  const content = fs.readFileSync(filePath, 'utf8');
+  const titleMatch = content.match(/^#\s+(.+)$/m);
+  return {
+    page,
+    content,
+    title: titleMatch?.[1] ?? page.title,
+  };
+}
+
+export function getAllDocSlugs(): { section: string; slug: string }[] {
+  return allDocsPages.map((p) => ({ section: p.section, slug: p.slug }));
+}
diff --git a/apps/website/src/lib/docs.spec.ts b/apps/website/src/lib/docs.spec.ts
index a6cfc7033..3242f1a83 100644
--- a/apps/website/src/lib/docs.spec.ts
+++ b/apps/website/src/lib/docs.spec.ts
@@ -1,42 +1,24 @@
 import { describe, expect, it } from 'vitest';
-import { getAllDocSlugs, getDocBySlug } from './docs';
+import { getAllDocSlugs, getDocBySlug } from './docs-new';
+import { allDocsPages } from './docs-config';
 
 describe('website docs bindings', () => {
-  it('lists product-first docs slugs from shared bundle metadata', () => {
-    expect(getAllDocSlugs()).toContainEqual([
-      'deep-agents',
-      'core-capabilities',
-      'planning',
-      'overview',
-      'python',
-    ]);
-    expect(getAllDocSlugs()).toContainEqual([
-      'langgraph',
-      'core-capabilities',
-      'streaming',
-      'build',
-      'python',
-    ]);
+  it('lists all doc slugs from config', () => {
+    const slugs = getAllDocSlugs();
+    expect(slugs.length).toBe(allDocsPages.length);
+    expect(slugs).toContainEqual({ section: 'getting-started', slug: 'introduction' });
+    expect(slugs).toContainEqual({ section: 'guides', slug: 'streaming' });
+    expect(slugs).toContainEqual({ section: 'api', slug: 'stream-resource' });
   });
 
-  it('falls back to the product getting-started overview when the requested language bundle does not exist', () => {
-    expect(
-      getDocBySlug([
-        'langgraph',
-        'core-capabilities',
-        'streaming',
-        'build',
-        'typescript',
-      ])
-    ).toMatchObject({
-      title: 'LangGraph Overview',
-      bundle: {
-        product: 'langgraph',
-        section: 'getting-started',
-        topic: 'overview',
-        page: 'overview',
-        language: 'python',
-      },
-    });
+  it('loads a doc by section and slug', () => {
+    const doc = getDocBySlug('getting-started', 'introduction');
+    expect(doc).not.toBeNull();
+    expect(doc?.title).toBe('Introduction');
+    expect(doc?.content).toContain('StreamResource');
+  });
+
+  it('returns null for non-existent doc', () => {
+    expect(getDocBySlug('guides', 'nonexistent')).toBeNull();
   });
 });
diff --git a/apps/website/src/lib/utils.ts b/apps/website/src/lib/utils.ts
deleted file mode 100644
index 2819a830d..000000000
--- a/apps/website/src/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
diff --git a/docs/superpowers/plans/2026-04-03-api-reference-autogen.md b/docs/superpowers/plans/2026-04-03-api-reference-autogen.md
new file mode 100644
index 000000000..4226944bc
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-03-api-reference-autogen.md
@@ -0,0 +1,828 @@
+# Autogenerated API Reference Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add JSDoc to all public API symbols in the stream-resource library, enhance the TypeDoc generation script, create a rendering component, and wire API docs into the docs framework with CI automation.
+
+**Architecture:** JSDoc annotations on library source → TypeDoc extracts to `api-docs.json` → Server component reads JSON at build time → Renders glass-card API pages in the docs framework. CI runs `generate-api-docs` before website build.
+
+**Tech Stack:** TypeDoc, TypeScript JSDoc, Next.js server components, design tokens
+
+**Spec:** `docs/superpowers/specs/2026-04-03-api-reference-autogen-design.md`
+
+---
+
+### Task 1: Add JSDoc to streamResource() and provideStreamResource()
+
+**Files:**
+- Modify: `libs/stream-resource/src/lib/stream-resource.fn.ts`
+- Modify: `libs/stream-resource/src/lib/stream-resource.provider.ts`
+
+- [ ] **Step 1: Add JSDoc to streamResource() function**
+
+Add this JSDoc block immediately before the `export function streamResource` declaration at line 27 of `stream-resource.fn.ts`:
+
+```typescript
+/**
+ * Creates a streaming resource connected to a LangGraph agent.
+ *
+ * Must be called within an Angular injection context (component constructor,
+ * field initializer, or `runInInjectionContext`). Returns a ref object whose
+ * properties are Angular Signals that update in real-time as the agent streams.
+ *
+ * @typeParam T - The state shape returned by the agent (e.g., `{ messages: BaseMessage[] }`)
+ * @typeParam Bag - Optional bag template for typed interrupts and submit payloads
+ * @param options - Configuration for the streaming resource
+ * @returns A {@link StreamResourceRef} with reactive signals and action methods
+ *
+ * @example
+ * ```typescript
+ * // In a component field initializer
+ * const chat = streamResource<{ messages: BaseMessage[] }>({
+ *   assistantId: 'chat_agent',
+ *   apiUrl: 'http://localhost:2024',
+ *   threadId: signal(this.savedThreadId),
+ *   onThreadId: (id) => localStorage.setItem('threadId', id),
+ * });
+ *
+ * // Access signals in template
+ * // chat.messages(), chat.status(), chat.error()
+ * ```
+ */
+```
+
+- [ ] **Step 2: Add JSDoc to provideStreamResource() and StreamResourceConfig**
+
+In `stream-resource.provider.ts`, add JSDoc:
+
+```typescript
+/**
+ * Global configuration for streamResource instances.
+ * Properties set here serve as defaults that can be overridden per-call.
+ */
+export interface StreamResourceConfig {
+  /** Base URL of the LangGraph Platform API (e.g., `'http://localhost:2024'`). */
+  apiUrl?:    string;
+  /** Custom transport implementation. Defaults to {@link FetchStreamTransport}. */
+  transport?: StreamResourceTransport;
+}
+```
+
+And before `provideStreamResource`:
+
+```typescript
+/**
+ * Angular provider factory that registers global defaults for all
+ * streamResource instances in the application.
+ *
+ * Add to your `app.config.ts` or module providers array.
+ *
+ * @param config - Global configuration merged with per-call options
+ * @returns An Angular Provider for dependency injection
+ *
+ * @example
+ * ```typescript
+ * // app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideStreamResource({ apiUrl: 'http://localhost:2024' }),
+ *   ],
+ * };
+ * ```
+ */
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add libs/stream-resource/src/lib/stream-resource.fn.ts libs/stream-resource/src/lib/stream-resource.provider.ts
+git commit -m "docs(stream-resource): add JSDoc to streamResource() and provideStreamResource()"
+```
+
+---
+
+### Task 2: Add JSDoc to Types
+
+**Files:**
+- Modify: `libs/stream-resource/src/lib/stream-resource.types.ts`
+
+- [ ] **Step 1: Add JSDoc to StreamResourceOptions interface**
+
+Add JSDoc to each property of `StreamResourceOptions` (starting at line 78):
+
+```typescript
+/** Options for creating a streaming resource via {@link streamResource}. */
+export interface StreamResourceOptions<T, ResolvedBag extends BagTemplate> {
+  /** Base URL of the LangGraph Platform API. */
+  apiUrl: string;
+  /** Agent or graph identifier on the LangGraph platform. */
+  assistantId: string;
+  /** Thread ID to connect to. Pass a Signal for reactive thread switching. */
+  threadId?: Signal<string | null> | string | null;
+  /** Called when a new thread is auto-created by the transport. */
+  onThreadId?: (id: string) => void;
+  /** Initial state values before the first stream response arrives. */
+  initialValues?: Partial<T>;
+  /** Key in the state object that contains the messages array. Defaults to `'messages'`. */
+  messagesKey?: string;
+  /** Throttle signal updates in milliseconds. `false` to disable. */
+  throttle?: number | false;
+  /** Custom message deserializer for non-standard message formats. */
+  toMessage?: (msg: unknown) => BaseMessage;
+  /** Custom transport. Defaults to FetchStreamTransport. */
+  transport?: StreamResourceTransport;
+  /** When true, subagent messages are filtered from the main messages signal. */
+  filterSubagentMessages?: boolean;
+  /** Tool names that indicate a subagent invocation. */
+  subagentToolNames?: string[];
+}
+```
+
+- [ ] **Step 2: Add JSDoc to StreamResourceRef interface**
+
+Add JSDoc to each property of `StreamResourceRef` (starting at line 103):
+
+```typescript
+/** Reactive reference returned by {@link streamResource}. All properties are Angular Signals. */
+export interface StreamResourceRef<T, ResolvedBag extends BagTemplate> {
+  /** Current agent state values. */
+  value:    Signal<T>;
+  /** Current resource status: idle, loading, resolved, or error. */
+  status:   Signal<ResourceStatus>;
+  /** True when the resource is actively streaming. */
+  isLoading: Signal<boolean>;
+  /** Last error, if any. */
+  error:    Signal<unknown>;
+  /** True once at least one value or message has been received. */
+  hasValue: Signal<boolean>;
+  /** Re-submits the last input to restart the stream. */
+  reload:   () => void;
+
+  /** Current list of messages from the agent conversation. */
+  messages:        Signal<BaseMessage[]>;
+  /** Current interrupt data, if the agent is paused for input. */
+  interrupt:       Signal<Interrupt<ResolvedBag['InterruptType']> | undefined>;
+  /** All interrupts received during the current run. */
+  interrupts:      Signal<Interrupt<ResolvedBag['InterruptType']>[]>;
+  /** Progress updates for currently executing tools. */
+  toolProgress:    Signal<ToolProgress[]>;
+  /** Completed tool calls with their results. */
+  toolCalls:       Signal<ToolCallWithResult[]>;
+
+  /** Current branch identifier for time-travel navigation. */
+  branch:          Signal<string>;
+  /** Full execution history of the current thread. */
+  history:         Signal<ThreadState<T>[]>;
+  /** True while a thread switch is loading state from the server. */
+  isThreadLoading: Signal<boolean>;
+
+  /** Map of active subagent streams keyed by tool call ID. */
+  subagents:       Signal<Map<string, SubagentStreamRef>>;
+  /** Filtered list of subagents with status 'running'. */
+  activeSubagents: Signal<SubagentStreamRef[]>;
+
+  /** Send a message or resume from an interrupt. Returns immediately. */
+  submit:              (values: ResolvedBag['UpdateType'] | null, opts?: SubmitOptions) => Promise<void>;
+  /** Abort the current stream. */
+  stop:                () => Promise<void>;
+  /** Switch to a different thread, resetting derived state. */
+  switchThread:        (threadId: string | null) => void;
+  /** Join an already-running stream by run ID. */
+  joinStream:          (runId: string, lastEventId?: string) => Promise<void>;
+  /** Set the active branch for time-travel navigation. */
+  setBranch:           (branch: string) => void;
+  /** Get metadata for a specific message by index. */
+  getMessagesMetadata: (msg: BaseMessage, idx?: number) => MessageMetadata<Record<string, unknown>> | undefined;
+  /** Get tool call results associated with an AI message. */
+  getToolCalls:        (msg: CoreAIMessage) => ToolCallWithResult[];
+}
+```
+
+- [ ] **Step 3: Add JSDoc to StreamEvent, StreamResourceTransport, SubagentStreamRef**
+
+```typescript
+/** An event emitted by a LangGraph stream. */
+export interface StreamEvent {
+  /** Event type identifier (e.g., 'values', 'messages', 'error', 'interrupt'). */
+  type: 'values' | 'messages' | `messages/${string}` | 'updates' | 'tools' | 'custom' | 'error' | 'metadata' | 'checkpoints' | 'tasks' | 'debug' | 'events' | 'interrupt' | 'interrupts';
+  [key: string]: unknown;
+}
+
+/** Transport interface for connecting to a LangGraph agent. */
+export interface StreamResourceTransport {
+  /** Open a streaming connection to an agent and yield events. */
+  stream(assistantId: string, threadId: string | null, payload: unknown, signal: AbortSignal): AsyncIterable<StreamEvent>;
+  /** Join an already-started run without creating a new one. */
+  joinStream?(threadId: string, runId: string, lastEventId: string | undefined, signal: AbortSignal): AsyncIterable<StreamEvent>;
+}
+
+/** Reference to a subagent's streaming state. */
+export interface SubagentStreamRef {
+  /** The tool call ID that spawned this subagent. */
+  toolCallId: string;
+  /** Current execution status of the subagent. */
+  status: Signal<'pending' | 'running' | 'complete' | 'error'>;
+  /** Current state values from the subagent. */
+  values: Signal<Record<string, unknown>>;
+  /** Messages from the subagent conversation. */
+  messages: Signal<BaseMessage[]>;
+}
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add libs/stream-resource/src/lib/stream-resource.types.ts
+git commit -m "docs(stream-resource): add JSDoc to all public types and interfaces"
+```
+
+---
+
+### Task 3: Add JSDoc to Transports
+
+**Files:**
+- Modify: `libs/stream-resource/src/lib/transport/fetch-stream.transport.ts`
+- Modify: `libs/stream-resource/src/lib/transport/mock-stream.transport.ts`
+
+- [ ] **Step 1: Add JSDoc to FetchStreamTransport**
+
+Add before the class declaration at line 5:
+
+```typescript
+/**
+ * Production transport that connects to a LangGraph Platform API via HTTP and SSE.
+ *
+ * Creates threads automatically if no threadId is provided, and streams events
+ * using the LangGraph SDK client.
+ *
+ * @example
+ * ```typescript
+ * const transport = new FetchStreamTransport(
+ *   'http://localhost:2024',
+ *   (id) => console.log('New thread:', id),
+ * );
+ * ```
+ */
+```
+
+Add JSDoc to the constructor:
+
+```typescript
+  /**
+   * @param apiUrl - Base URL of the LangGraph Platform API
+   * @param onThreadId - Optional callback invoked when a new thread is created
+   */
+```
+
+- [ ] **Step 2: Add JSDoc to MockStreamTransport**
+
+Add before the class declaration at line 4:
+
+```typescript
+/**
+ * Test transport for deterministic agent testing without a real LangGraph server.
+ *
+ * Script event batches upfront, then emit them manually or step through them
+ * in your test specs. Supports error injection and close control.
+ *
+ * @example
+ * ```typescript
+ * const transport = new MockStreamTransport([
+ *   [{ type: 'values', data: { messages: [aiMsg('Hello')] } }],
+ *   [{ type: 'values', data: { status: 'done' } }],
+ * ]);
+ * ```
+ */
+```
+
+Add JSDoc to key methods:
+
+```typescript
+  /** @param script - Array of event batches. Each batch is emitted as a group. */
+  constructor(script: StreamEvent[][] = []) {
+
+  /** Advance to the next scripted batch and return its events. */
+  nextBatch(): StreamEvent[] {
+
+  /** Manually emit events into the stream. */
+  emit(events: StreamEvent[]): void {
+
+  /** Inject an error into the stream. */
+  emitError(err: Error): void {
+
+  /** Close the stream. Remaining queued events are drained before completion. */
+  close(): void {
+
+  /** Returns true if a stream is currently active. */
+  isStreaming(): boolean {
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add libs/stream-resource/src/lib/transport/
+git commit -m "docs(stream-resource): add JSDoc to FetchStreamTransport and MockStreamTransport"
+```
+
+---
+
+### Task 4: Enhance TypeDoc Script
+
+**Files:**
+- Modify: `apps/website/scripts/generate-api-docs.ts`
+
+- [ ] **Step 1: Update script to output to docs-v2 and improve structure**
+
+Replace the full file:
+
+```typescript
+import { Application, TSConfigReader, ReflectionKind } from 'typedoc';
+import fs from 'fs';
+import path from 'path';
+
+interface ApiParam {
+  name: string;
+  type: string;
+  description: string;
+  optional?: boolean;
+}
+
+interface ApiMethod {
+  name: string;
+  signature: string;
+  description: string;
+  params?: ApiParam[];
+}
+
+interface ApiDocEntry {
+  name: string;
+  kind: 'function' | 'class' | 'interface' | 'type';
+  description: string;
+  signature?: string;
+  params?: ApiParam[];
+  returns?: { type: string; description: string };
+  examples?: string[];
+  properties?: ApiParam[];
+  methods?: ApiMethod[];
+}
+
+function extractDescription(comment: any): string {
+  if (!comment?.summary) return '';
+  return comment.summary.map((p: any) => p.text ?? '').join('').trim();
+}
+
+function extractExamples(comment: any): string[] {
+  if (!comment?.blockTags) return [];
+  return comment.blockTags
+    .filter((t: any) => t.tag === '@example')
+    .map((t: any) => t.content.map((c: any) => c.text ?? '').join('').trim());
+}
+
+function extractType(typeObj: any): string {
+  if (!typeObj) return 'unknown';
+  if (typeObj.type === 'intrinsic') return typeObj.name;
+  if (typeObj.type === 'reference') return typeObj.name + (typeObj.typeArguments ? `<${typeObj.typeArguments.map(extractType).join(', ')}>` : '');
+  if (typeObj.type === 'union') return typeObj.types.map(extractType).join(' | ');
+  if (typeObj.type === 'literal') return JSON.stringify(typeObj.value);
+  if (typeObj.type === 'reflection') return 'object';
+  if (typeObj.type === 'array') return `${extractType(typeObj.elementType)}[]`;
+  return typeObj.toString?.() ?? 'unknown';
+}
+
+function extractParams(sig: any): ApiParam[] {
+  if (!sig?.parameters) return [];
+  return sig.parameters.map((p: any) => ({
+    name: p.name,
+    type: extractType(p.type),
+    description: extractDescription(p.comment),
+    optional: p.flags?.isOptional ?? false,
+  }));
+}
+
+function reflectionToEntry(ref: any): ApiDocEntry | null {
+  const kind = ref.kind;
+  const desc = extractDescription(ref.comment);
+  const examples = extractExamples(ref.comment);
+
+  if (kind === ReflectionKind.Function) {
+    const sig = ref.signatures?.[0];
+    return {
+      name: ref.name,
+      kind: 'function',
+      description: desc || extractDescription(sig?.comment),
+      signature: sig ? `${ref.name}(${(sig.parameters ?? []).map((p: any) => `${p.name}: ${extractType(p.type)}`).join(', ')}): ${extractType(sig.type)}` : ref.name,
+      params: extractParams(sig),
+      returns: sig?.type ? { type: extractType(sig.type), description: '' } : undefined,
+      examples: examples.length ? examples : extractExamples(sig?.comment),
+    };
+  }
+
+  if (kind === ReflectionKind.Class) {
+    const props = (ref.children ?? [])
+      .filter((c: any) => c.kind === ReflectionKind.Property)
+      .map((c: any) => ({ name: c.name, type: extractType(c.type), description: extractDescription(c.comment), optional: c.flags?.isOptional }));
+    const methods = (ref.children ?? [])
+      .filter((c: any) => c.kind === ReflectionKind.Method)
+      .map((c: any) => {
+        const sig = c.signatures?.[0];
+        return { name: c.name, signature: `${c.name}(${(sig?.parameters ?? []).map((p: any) => `${p.name}: ${extractType(p.type)}`).join(', ')})`, description: extractDescription(c.comment) || extractDescription(sig?.comment), params: extractParams(sig) };
+      });
+    const ctorSig = (ref.children ?? []).find((c: any) => c.kind === ReflectionKind.Constructor)?.signatures?.[0];
+    return {
+      name: ref.name,
+      kind: 'class',
+      description: desc,
+      params: ctorSig ? extractParams(ctorSig) : undefined,
+      examples,
+      properties: props,
+      methods,
+    };
+  }
+
+  if (kind === ReflectionKind.Interface) {
+    const props = (ref.children ?? []).map((c: any) => ({
+      name: c.name,
+      type: extractType(c.type),
+      description: extractDescription(c.comment),
+      optional: c.flags?.isOptional,
+    }));
+    return { name: ref.name, kind: 'interface', description: desc, properties: props, examples };
+  }
+
+  if (kind === ReflectionKind.TypeAlias) {
+    return { name: ref.name, kind: 'type', description: desc, signature: extractType(ref.type), examples };
+  }
+
+  return null;
+}
+
+async function main() {
+  const candidates = [
+    'libs/stream-resource/src/public-api.ts',
+    'packages/stream-resource/src/public-api.ts',
+  ];
+  const entryPoint = candidates.find((p) => fs.existsSync(p));
+  if (!entryPoint) {
+    console.warn('Library entry point not found — generating empty api-docs.json');
+    const outDir = 'apps/website/content/docs-v2/api';
+    fs.mkdirSync(outDir, { recursive: true });
+    fs.writeFileSync(path.join(outDir, 'api-docs.json'), JSON.stringify([], null, 2));
+    return;
+  }
+
+  const libDir = path.dirname(path.dirname(entryPoint));
+  const libTsconfig = fs.existsSync(path.join(libDir, 'tsconfig.lib.json'))
+    ? path.join(libDir, 'tsconfig.lib.json')
+    : undefined;
+
+  const app = await Application.bootstrapWithPlugins({
+    entryPoints: [entryPoint],
+    skipErrorChecking: true,
+    ...(libTsconfig ? { tsconfig: libTsconfig } : {}),
+  });
+  app.options.addReader(new TSConfigReader());
+  const project = await app.convert();
+  if (!project) throw new Error('TypeDoc failed to convert project');
+
+  const entries: ApiDocEntry[] = [];
+  for (const child of project.children ?? []) {
+    const entry = reflectionToEntry(child);
+    if (entry) entries.push(entry);
+  }
+
+  const outDir = 'apps/website/content/docs-v2/api';
+  fs.mkdirSync(outDir, { recursive: true });
+  fs.writeFileSync(path.join(outDir, 'api-docs.json'), JSON.stringify(entries, null, 2));
+  console.log(`✓ api-docs.json written (${entries.length} entries)`);
+}
+
+main().catch((e) => { console.error(e); process.exit(1); });
+```
+
+- [ ] **Step 2: Run the script to generate initial JSON**
+
+Run: `npx tsx apps/website/scripts/generate-api-docs.ts`
+Expected: `✓ api-docs.json written (N entries)` and file exists at `apps/website/content/docs-v2/api/api-docs.json`
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/scripts/generate-api-docs.ts apps/website/content/docs-v2/api/api-docs.json
+git commit -m "feat(website): enhance TypeDoc script for structured API docs JSON"
+```
+
+---
+
+### Task 5: Create API Doc Renderer Component
+
+**Files:**
+- Create: `apps/website/src/components/docs/ApiDocRenderer.tsx`
+
+- [ ] **Step 1: Create the renderer component**
+
+```tsx
+import { tokens } from '../../../lib/design-tokens';
+
+interface ApiParam {
+  name: string;
+  type: string;
+  description: string;
+  optional?: boolean;
+}
+
+interface ApiMethod {
+  name: string;
+  signature: string;
+  description: string;
+  params?: ApiParam[];
+}
+
+export interface ApiDocEntry {
+  name: string;
+  kind: 'function' | 'class' | 'interface' | 'type';
+  description: string;
+  signature?: string;
+  params?: ApiParam[];
+  returns?: { type: string; description: string };
+  examples?: string[];
+  properties?: ApiParam[];
+  methods?: ApiMethod[];
+}
+
+function KindBadge({ kind }: { kind: string }) {
+  return (
+    <span style={{
+      fontFamily: 'var(--font-mono)',
+      fontSize: '0.65rem',
+      padding: '2px 8px',
+      borderRadius: 4,
+      background: tokens.colors.accentSurface,
+      color: tokens.colors.accent,
+      textTransform: 'uppercase',
+    }}>{kind}</span>
+  );
+}
+
+function ParamTable({ params }: { params: ApiParam[] }) {
+  return (
+    <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.8rem', marginTop: 8 }}>
+      <thead>
+        <tr style={{ borderBottom: `1px solid ${tokens.colors.accentBorder}` }}>
+          {['Parameter', 'Type', 'Description'].map((h) => (
+            <th key={h} style={{ textAlign: 'left', padding: '6px 0', fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: tokens.colors.textMuted, textTransform: 'uppercase' }}>{h}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {params.map((p) => (
+          <tr key={p.name} style={{ borderBottom: `1px solid ${tokens.colors.accentBorder}` }}>
+            <td style={{ padding: '6px 0', fontFamily: 'var(--font-mono)', color: tokens.colors.accent }}>{p.name}{p.optional ? '?' : ''}</td>
+            <td style={{ padding: '6px 0', fontFamily: 'var(--font-mono)', color: tokens.colors.textSecondary, fontSize: '0.75rem' }}>{p.type}</td>
+            <td style={{ padding: '6px 0', color: tokens.colors.textSecondary }}>{p.description}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export function ApiDocRenderer({ entry }: { entry: ApiDocEntry }) {
+  return (
+    <div style={{
+      padding: 24,
+      borderRadius: 12,
+      border: `1px solid ${tokens.glass.border}`,
+      background: tokens.glass.bg,
+      backdropFilter: `blur(${tokens.glass.blur})`,
+      WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+      boxShadow: tokens.glass.shadow,
+      marginBottom: 24,
+    }}>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 8 }}>
+        <code style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: '1.1rem', color: tokens.colors.accent }}>{entry.name}</code>
+        <KindBadge kind={entry.kind} />
+      </div>
+
+      <p style={{ fontSize: '0.9rem', color: tokens.colors.textSecondary, lineHeight: 1.6, marginBottom: 16 }}>{entry.description}</p>
+
+      {entry.signature && (
+        <div style={{ borderRadius: 8, overflow: 'hidden', marginBottom: 16 }}>
+          <pre style={{ padding: 16, background: '#1a1b26', fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: '#a9b1d6', overflowX: 'auto', margin: 0 }}>
+            {entry.signature}
+          </pre>
+        </div>
+      )}
+
+      {entry.params && entry.params.length > 0 && (
+        <div style={{ marginBottom: 16 }}>
+          <h4 style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem', color: tokens.colors.textPrimary, marginBottom: 4 }}>Parameters</h4>
+          <ParamTable params={entry.params} />
+        </div>
+      )}
+
+      {entry.returns && (
+        <div style={{ marginBottom: 16 }}>
+          <h4 style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem', color: tokens.colors.textPrimary, marginBottom: 4 }}>Returns</h4>
+          <code style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem', color: tokens.colors.accent }}>{entry.returns.type}</code>
+        </div>
+      )}
+
+      {entry.properties && entry.properties.length > 0 && (
+        <div style={{ marginBottom: 16 }}>
+          <h4 style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem', color: tokens.colors.textPrimary, marginBottom: 4 }}>Properties</h4>
+          <ParamTable params={entry.properties} />
+        </div>
+      )}
+
+      {entry.methods && entry.methods.length > 0 && (
+        <div style={{ marginBottom: 16 }}>
+          <h4 style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem', color: tokens.colors.textPrimary, marginBottom: 4 }}>Methods</h4>
+          {entry.methods.map((m) => (
+            <div key={m.name} style={{ marginBottom: 12, paddingLeft: 12, borderLeft: `2px solid ${tokens.colors.accentBorder}` }}>
+              <code style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem', color: tokens.colors.accent }}>{m.signature}</code>
+              {m.description && <p style={{ fontSize: '0.8rem', color: tokens.colors.textSecondary, marginTop: 4 }}>{m.description}</p>}
+              {m.params && m.params.length > 0 && <ParamTable params={m.params} />}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {entry.examples && entry.examples.length > 0 && (
+        <div>
+          <h4 style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem', color: tokens.colors.textPrimary, marginBottom: 4 }}>Examples</h4>
+          {entry.examples.map((ex, i) => (
+            <div key={i} style={{ borderRadius: 8, overflow: 'hidden', marginBottom: 8 }}>
+              <pre style={{ padding: 16, background: '#1a1b26', fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: '#a9b1d6', overflowX: 'auto', margin: 0 }}>
+                {ex.replace(/^```\w*\n?/, '').replace(/\n?```$/, '')}
+              </pre>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/ApiDocRenderer.tsx
+git commit -m "feat(website): add ApiDocRenderer component for autogenerated API docs"
+```
+
+---
+
+### Task 6: Create API Reference MDX Pages
+
+**Files:**
+- Modify: `apps/website/content/docs-v2/api/stream-resource.mdx`
+- Create: `apps/website/content/docs-v2/api/provide-stream-resource.mdx`
+- Create: `apps/website/content/docs-v2/api/fetch-stream-transport.mdx`
+- Create: `apps/website/content/docs-v2/api/mock-stream-transport.mdx`
+
+Since MDX can't directly read JSON, the API doc pages will be simple MDX with a note pointing to the symbol. The actual rendering from JSON will happen in the page component (Task 7).
+
+- [ ] **Step 1: Create all 4 API MDX pages**
+
+`apps/website/content/docs-v2/api/stream-resource.mdx`:
+```mdx
+# streamResource()
+
+{/* Auto-rendered from api-docs.json — see page component */}
+```
+
+`apps/website/content/docs-v2/api/provide-stream-resource.mdx`:
+```mdx
+# provideStreamResource()
+
+{/* Auto-rendered from api-docs.json — see page component */}
+```
+
+`apps/website/content/docs-v2/api/fetch-stream-transport.mdx`:
+```mdx
+# FetchStreamTransport
+
+{/* Auto-rendered from api-docs.json — see page component */}
+```
+
+`apps/website/content/docs-v2/api/mock-stream-transport.mdx`:
+```mdx
+# MockStreamTransport
+
+{/* Auto-rendered from api-docs.json — see page component */}
+```
+
+- [ ] **Step 2: Update docs page to render API docs from JSON for api section pages**
+
+Modify `apps/website/src/app/docs/[[...slug]]/page.tsx` — after the MdxRendererNew, if the section is `api`, also render the ApiDocRenderer with the matching entry from `api-docs.json`:
+
+Add to the top of the file:
+```typescript
+import { ApiDocRenderer, type ApiDocEntry } from '../../../components/docs/ApiDocRenderer';
+import fs from 'fs';
+import path from 'path';
+
+function loadApiDocEntry(slug: string): ApiDocEntry | null {
+  const jsonPath = path.join(process.cwd(), 'apps', 'website', 'content', 'docs-v2', 'api', 'api-docs.json');
+  if (!fs.existsSync(jsonPath)) {
+    const altPath = path.join(process.cwd(), 'content', 'docs-v2', 'api', 'api-docs.json');
+    if (!fs.existsSync(altPath)) return null;
+    const entries: ApiDocEntry[] = JSON.parse(fs.readFileSync(altPath, 'utf8'));
+    return matchEntry(entries, slug);
+  }
+  const entries: ApiDocEntry[] = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
+  return matchEntry(entries, slug);
+}
+
+function matchEntry(entries: ApiDocEntry[], slug: string): ApiDocEntry | null {
+  const nameMap: Record<string, string> = {
+    'stream-resource': 'streamResource',
+    'provide-stream-resource': 'provideStreamResource',
+    'fetch-stream-transport': 'FetchStreamTransport',
+    'mock-stream-transport': 'MockStreamTransport',
+  };
+  const target = nameMap[slug];
+  if (!target) return null;
+  return entries.find((e) => e.name === target) ?? null;
+}
+```
+
+Then in the JSX, after the `<MdxRendererNew>`, add:
+```tsx
+{section === 'api' && (() => {
+  const apiEntry = loadApiDocEntry(slug);
+  return apiEntry ? (
+    <div className="px-8 md:px-12 max-w-3xl pb-8">
+      <ApiDocRenderer entry={apiEntry} />
+    </div>
+  ) : null;
+})()}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/content/docs-v2/api/ apps/website/src/app/docs/
+git commit -m "feat(website): wire API doc pages with autogenerated content from JSON"
+```
+
+---
+
+### Task 7: Add generate-api-docs to CI
+
+**Files:**
+- Modify: `.github/workflows/ci.yml`
+
+- [ ] **Step 1: Add generate-api-docs step before website build**
+
+In the `website` job (line 24-36), add `npm run generate-api-docs` before the build step:
+
+```yaml
+  website:
+    name: Website — lint / build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6.0.2
+      - uses: actions/setup-node@v6.3.0
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npx nx lint website
+      - run: npm run generate-api-docs
+      - run: npx nx build website
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add .github/workflows/ci.yml
+git commit -m "ci: add generate-api-docs step before website build"
+```
+
+---
+
+### Task 8: Verify End-to-End
+
+- [ ] **Step 1: Run TypeDoc script**
+
+Run: `npm run generate-api-docs`
+Verify: `apps/website/content/docs-v2/api/api-docs.json` exists with entries
+
+- [ ] **Step 2: Build website**
+
+Run: `npx nx build website --skip-nx-cache`
+Expected: Build succeeds
+
+- [ ] **Step 3: Verify in browser**
+
+Open http://localhost:3000/docs/api/stream-resource
+Verify: Glass card with function signature, parameters, examples renders
+
+- [ ] **Step 4: Commit any fixes**
+
+```bash
+git add -A
+git commit -m "fix(website): API reference polish"
+```
diff --git a/docs/superpowers/plans/2026-04-03-docs-infrastructure.md b/docs/superpowers/plans/2026-04-03-docs-infrastructure.md
new file mode 100644
index 000000000..d7d594113
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-03-docs-infrastructure.md
@@ -0,0 +1,1126 @@
+# Docs Infrastructure Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build the Mintlify-inspired docs framework — new routing, collapsible sidebar, 5 custom MDX components, Cmd+K search, breadcrumbs, prev/next navigation — with 3 placeholder content pages to verify everything works.
+
+**Architecture:** Replace the cockpit-manifest-driven 5-segment routing with a simple 2-segment `/docs/[section]/[slug]` system. New `docs-config.ts` defines the sidebar tree. New `docs-new.ts` loads MDX from `content/docs-v2/`. Custom MDX components (Callout, Steps, Tabs, CodeGroup, Card) are registered in MdxRenderer. Client-side Cmd+K search uses a build-time JSON index.
+
+**Tech Stack:** Next.js 16, React 19, next-mdx-remote/rsc, Tailwind CSS v4, Framer Motion, design tokens
+
+**Spec:** `docs/superpowers/specs/2026-04-03-docs-refresh-design.md`
+
+**Note:** This plan covers the docs framework/infrastructure only. Content authoring (all 19 pages) is a follow-up plan that builds on this.
+
+---
+
+### Task 1: Create Docs Config — Sidebar Navigation Tree
+
+**Files:**
+- Create: `apps/website/src/lib/docs-config.ts`
+
+This file defines the sidebar navigation structure — sections, pages, and their order. It's the single source of truth for docs navigation.
+
+- [ ] **Step 1: Create docs-config.ts**
+
+```typescript
+export interface DocsPage {
+  title: string;
+  slug: string;
+  section: string;
+}
+
+export interface DocsSection {
+  title: string;
+  id: string;
+  color: 'blue' | 'red';
+  pages: DocsPage[];
+}
+
+export const docsConfig: DocsSection[] = [
+  {
+    title: 'Getting Started',
+    id: 'getting-started',
+    color: 'blue',
+    pages: [
+      { title: 'Introduction', slug: 'introduction', section: 'getting-started' },
+      { title: 'Quick Start', slug: 'quickstart', section: 'getting-started' },
+      { title: 'Installation', slug: 'installation', section: 'getting-started' },
+    ],
+  },
+  {
+    title: 'Guides',
+    id: 'guides',
+    color: 'blue',
+    pages: [
+      { title: 'Streaming', slug: 'streaming', section: 'guides' },
+      { title: 'Persistence', slug: 'persistence', section: 'guides' },
+      { title: 'Interrupts', slug: 'interrupts', section: 'guides' },
+      { title: 'Memory', slug: 'memory', section: 'guides' },
+      { title: 'Time Travel', slug: 'time-travel', section: 'guides' },
+      { title: 'Subgraphs', slug: 'subgraphs', section: 'guides' },
+      { title: 'Testing', slug: 'testing', section: 'guides' },
+      { title: 'Deployment', slug: 'deployment', section: 'guides' },
+    ],
+  },
+  {
+    title: 'Concepts',
+    id: 'concepts',
+    color: 'red',
+    pages: [
+      { title: 'Angular Signals', slug: 'angular-signals', section: 'concepts' },
+      { title: 'LangGraph Basics', slug: 'langgraph-basics', section: 'concepts' },
+      { title: 'Agent Architecture', slug: 'agent-architecture', section: 'concepts' },
+      { title: 'State Management', slug: 'state-management', section: 'concepts' },
+    ],
+  },
+  {
+    title: 'API Reference',
+    id: 'api',
+    color: 'blue',
+    pages: [
+      { title: 'streamResource()', slug: 'stream-resource', section: 'api' },
+      { title: 'provideStreamResource()', slug: 'provide-stream-resource', section: 'api' },
+      { title: 'FetchStreamTransport', slug: 'fetch-stream-transport', section: 'api' },
+      { title: 'MockStreamTransport', slug: 'mock-stream-transport', section: 'api' },
+    ],
+  },
+];
+
+/** Flat list of all pages in sidebar order */
+export const allDocsPages: DocsPage[] = docsConfig.flatMap((s) => s.pages);
+
+/** Find a page by section + slug */
+export function findDocsPage(section: string, slug: string): DocsPage | undefined {
+  return allDocsPages.find((p) => p.section === section && p.slug === slug);
+}
+
+/** Get prev/next pages relative to a given page */
+export function getPrevNextPages(section: string, slug: string): { prev: DocsPage | null; next: DocsPage | null } {
+  const idx = allDocsPages.findIndex((p) => p.section === section && p.slug === slug);
+  return {
+    prev: idx > 0 ? allDocsPages[idx - 1] : null,
+    next: idx < allDocsPages.length - 1 ? allDocsPages[idx + 1] : null,
+  };
+}
+
+/** Get the section a page belongs to */
+export function getDocsSection(sectionId: string): DocsSection | undefined {
+  return docsConfig.find((s) => s.id === sectionId);
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/lib/docs-config.ts
+git commit -m "feat(website): add docs navigation config"
+```
+
+---
+
+### Task 2: Create New Docs Loader
+
+**Files:**
+- Create: `apps/website/src/lib/docs-new.ts`
+
+Replaces the cockpit-dependent `docs.ts`. Loads MDX from `content/docs-v2/[section]/[slug].mdx`.
+
+- [ ] **Step 1: Create docs-new.ts**
+
+```typescript
+import fs from 'fs';
+import path from 'path';
+import { allDocsPages, type DocsPage } from './docs-config';
+
+const resolveContentDir = (): string => {
+  const workspacePath = path.join(process.cwd(), 'apps', 'website', 'content', 'docs-v2');
+  if (fs.existsSync(workspacePath)) return workspacePath;
+  return path.join(process.cwd(), 'content', 'docs-v2');
+};
+
+export interface ResolvedDoc {
+  page: DocsPage;
+  content: string;
+  title: string;
+}
+
+export function getDocBySlug(section: string, slug: string): ResolvedDoc | null {
+  const page = allDocsPages.find((p) => p.section === section && p.slug === slug);
+  if (!page) return null;
+
+  const dir = resolveContentDir();
+  const filePath = path.join(dir, section, `${slug}.mdx`);
+  if (!fs.existsSync(filePath)) return null;
+
+  const content = fs.readFileSync(filePath, 'utf8');
+  const titleMatch = content.match(/^#\s+(.+)$/m);
+  return {
+    page,
+    content,
+    title: titleMatch?.[1] ?? page.title,
+  };
+}
+
+export function getAllDocSlugs(): { section: string; slug: string }[] {
+  return allDocsPages.map((p) => ({ section: p.section, slug: p.slug }));
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/lib/docs-new.ts
+git commit -m "feat(website): add new docs loader (cockpit-independent)"
+```
+
+---
+
+### Task 3: Create 3 Placeholder Content Pages
+
+**Files:**
+- Create: `apps/website/content/docs-v2/getting-started/introduction.mdx`
+- Create: `apps/website/content/docs-v2/guides/streaming.mdx`
+- Create: `apps/website/content/docs-v2/api/stream-resource.mdx`
+
+These prove the system works end-to-end. Real content comes in the follow-up plan.
+
+- [ ] **Step 1: Create directory structure and introduction page**
+
+Create `apps/website/content/docs-v2/getting-started/introduction.mdx`:
+
+```mdx
+# Introduction
+
+StreamResource brings full parity with React's `useStream()` hook to Angular 20+. It's the enterprise streaming resource for LangChain and Angular — built natively with Angular Signals, not wrapped or adapted.
+
+<Callout type="info" title="Who is this for?">
+StreamResource serves two audiences: Angular developers building AI-powered apps, and AI/agent developers who need an Angular frontend.
+</Callout>
+
+## What you'll build
+
+With streamResource(), you can build Angular applications that connect to LangGraph agents with:
+
+- **Token-by-token streaming** via SSE
+- **Thread persistence** across sessions
+- **Human-in-the-loop** interrupts and approvals
+- **Time travel** debugging
+- **Deterministic testing** with MockStreamTransport
+
+## Next steps
+
+<CardGroup cols={2}>
+  <Card title="Quick Start" href="/docs/getting-started/quickstart">
+    Build your first streaming chat in 5 minutes
+  </Card>
+  <Card title="Installation" href="/docs/getting-started/installation">
+    Detailed setup and configuration guide
+  </Card>
+</CardGroup>
+```
+
+- [ ] **Step 2: Create streaming guide page**
+
+Create `apps/website/content/docs-v2/guides/streaming.mdx`:
+
+```mdx
+# Streaming
+
+StreamResource provides token-by-token streaming from LangGraph agents via Server-Sent Events (SSE). Every update lands directly in Angular Signals.
+
+<Callout type="tip" title="Prerequisites">
+Make sure you've completed the [Installation](/docs/getting-started/installation) guide first.
+</Callout>
+
+## Basic streaming
+
+<Tabs items={['TypeScript', 'Template']}>
+<Tab>
+```typescript
+// chat.component.ts
+const chat = streamResource<{ messages: BaseMessage[] }>({
+  assistantId: 'chat_agent',
+});
+
+// Status updates as streaming progresses
+const isStreaming = computed(() => chat.status() === 'streaming');
+```
+</Tab>
+<Tab>
+```html
+<!-- chat.component.html -->
+@for (msg of chat.messages(); track $index) {
+  <p [class.streaming]="$last && isStreaming()">
+    {{ msg.content }}
+  </p>
+}
+```
+</Tab>
+</Tabs>
+
+## Stream status
+
+The `status()` signal reports the current state:
+
+<Steps>
+<Step title="idle">
+No active stream. Ready to send a message.
+</Step>
+<Step title="streaming">
+Tokens are arriving. Messages update in real-time.
+</Step>
+<Step title="error">
+Something went wrong. Check `error()` for details.
+</Step>
+</Steps>
+```
+
+- [ ] **Step 3: Create API reference page**
+
+Create `apps/website/content/docs-v2/api/stream-resource.mdx`:
+
+```mdx
+# streamResource()
+
+Creates a streaming resource connected to a LangGraph agent. Must be called within an Angular injection context.
+
+## Signature
+
+```typescript
+function streamResource<TState>(options: StreamResourceOptions<TState>): StreamResource<TState>
+```
+
+## Options
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `assistantId` | `string` | Agent or graph identifier |
+| `apiUrl` | `string` | LangGraph Platform base URL |
+| `threadId` | `Signal<string \| null> \| string \| null` | Thread to connect to |
+| `onThreadId` | `(id: string) => void` | Called when a new thread is created |
+| `onInterrupt` | `(data: unknown) => void` | Called when the agent pauses for input |
+| `transport` | `StreamTransport` | Custom transport (default: FetchStreamTransport) |
+
+## Return type
+
+`streamResource()` returns an object with these Signal properties:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `messages()` | `Signal<BaseMessage[]>` | Current message list |
+| `status()` | `Signal<'idle' \| 'streaming' \| 'error'>` | Stream status |
+| `error()` | `Signal<Error \| null>` | Last error, if any |
+| `threadId()` | `Signal<string \| null>` | Current thread ID |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `submit(input)` | Send a message or resume from interrupt |
+| `history()` | Get execution history for time travel |
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/content/docs-v2/
+git commit -m "feat(website): add placeholder docs content (3 pages)"
+```
+
+---
+
+### Task 4: Create MDX Components — Callout
+
+**Files:**
+- Create: `apps/website/src/components/docs/mdx/Callout.tsx`
+
+- [ ] **Step 1: Create Callout component**
+
+```tsx
+import { tokens } from '../../../../lib/design-tokens';
+
+const CALLOUT_STYLES = {
+  info: { border: tokens.colors.accent, bg: 'rgba(0, 64, 144, 0.04)' },
+  warning: { border: '#f59e0b', bg: 'rgba(245, 158, 11, 0.04)' },
+  tip: { border: '#22c55e', bg: 'rgba(34, 197, 94, 0.04)' },
+  danger: { border: '#ef4444', bg: 'rgba(239, 68, 68, 0.04)' },
+} as const;
+
+interface Props {
+  type?: keyof typeof CALLOUT_STYLES;
+  title?: string;
+  children: React.ReactNode;
+}
+
+export function Callout({ type = 'info', title, children }: Props) {
+  const style = CALLOUT_STYLES[type];
+  return (
+    <div style={{
+      padding: '12px 16px',
+      borderRadius: 8,
+      borderLeft: `3px solid ${style.border}`,
+      background: style.bg,
+      marginBottom: 16,
+    }}>
+      {title && (
+        <div style={{
+          fontFamily: 'var(--font-mono)',
+          fontSize: '0.8rem',
+          fontWeight: 600,
+          color: style.border,
+          marginBottom: 4,
+        }}>{title}</div>
+      )}
+      <div style={{ fontSize: '0.875rem', color: tokens.colors.textSecondary, lineHeight: 1.6 }}>
+        {children}
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/mdx/Callout.tsx
+git commit -m "feat(website): add Callout MDX component"
+```
+
+---
+
+### Task 5: Create MDX Components — Steps
+
+**Files:**
+- Create: `apps/website/src/components/docs/mdx/Steps.tsx`
+
+- [ ] **Step 1: Create Steps and Step components**
+
+```tsx
+import React from 'react';
+import { tokens } from '../../../../lib/design-tokens';
+
+export function Steps({ children }: { children: React.ReactNode }) {
+  const steps = React.Children.toArray(children);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 16 }}>
+      {steps.map((child, i) => {
+        if (!React.isValidElement(child)) return null;
+        return React.cloneElement(child as React.ReactElement<{ stepNumber: number }>, { stepNumber: i + 1 });
+      })}
+    </div>
+  );
+}
+
+export function Step({ title, children, stepNumber }: { title: string; children: React.ReactNode; stepNumber?: number }) {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <div style={{
+          width: 24, height: 24, borderRadius: '50%',
+          background: tokens.colors.accent, color: '#fff',
+          fontSize: 12, fontWeight: 600,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          flexShrink: 0,
+        }}>{stepNumber ?? 1}</div>
+        <div style={{ width: 1, flex: 1, background: `${tokens.colors.accent}33`, marginTop: 4 }} />
+      </div>
+      <div style={{ flex: 1, paddingBottom: 8 }}>
+        <div style={{
+          fontWeight: 600,
+          fontSize: '0.9rem',
+          color: tokens.colors.textPrimary,
+          marginBottom: 4,
+        }}>{title}</div>
+        <div style={{ fontSize: '0.875rem', color: tokens.colors.textSecondary, lineHeight: 1.6 }}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/mdx/Steps.tsx
+git commit -m "feat(website): add Steps MDX component"
+```
+
+---
+
+### Task 6: Create MDX Components — Tabs
+
+**Files:**
+- Create: `apps/website/src/components/docs/mdx/Tabs.tsx`
+
+- [ ] **Step 1: Create Tabs and Tab components**
+
+```tsx
+'use client';
+import { useState, Children } from 'react';
+import { tokens } from '../../../../lib/design-tokens';
+
+export function Tabs({ items, children }: { items: string[]; children: React.ReactNode }) {
+  const [active, setActive] = useState(0);
+  const tabs = Children.toArray(children);
+
+  return (
+    <div style={{ marginBottom: 16 }}>
+      <div style={{
+        display: 'flex', gap: 0,
+        borderBottom: `1px solid ${tokens.colors.accentBorder}`,
+      }}>
+        {items.map((label, i) => (
+          <button
+            key={label}
+            onClick={() => setActive(i)}
+            style={{
+              padding: '8px 16px',
+              fontFamily: 'var(--font-mono)',
+              fontSize: '0.8rem',
+              fontWeight: active === i ? 500 : 400,
+              color: active === i ? tokens.colors.accent : tokens.colors.textMuted,
+              background: 'none',
+              border: 'none',
+              borderBottom: active === i ? `2px solid ${tokens.colors.accent}` : '2px solid transparent',
+              cursor: 'pointer',
+              transition: 'color 0.15s',
+            }}>
+            {label}
+          </button>
+        ))}
+      </div>
+      <div>{tabs[active]}</div>
+    </div>
+  );
+}
+
+export function Tab({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>;
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/mdx/Tabs.tsx
+git commit -m "feat(website): add Tabs MDX component"
+```
+
+---
+
+### Task 7: Create MDX Components — Card / CardGroup
+
+**Files:**
+- Create: `apps/website/src/components/docs/mdx/Card.tsx`
+
+- [ ] **Step 1: Create Card and CardGroup components**
+
+```tsx
+import Link from 'next/link';
+import { tokens } from '../../../../lib/design-tokens';
+
+export function CardGroup({ cols = 2, children }: { cols?: number; children: React.ReactNode }) {
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: `repeat(${cols}, 1fr)`,
+      gap: 12,
+      marginBottom: 16,
+    }}>
+      {children}
+    </div>
+  );
+}
+
+export function Card({ title, href, icon, children }: { title: string; href: string; icon?: string; children: React.ReactNode }) {
+  return (
+    <Link href={href} style={{ textDecoration: 'none' }}>
+      <div style={{
+        padding: 16,
+        borderRadius: 10,
+        border: `1px solid ${tokens.glass.border}`,
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+        transition: 'box-shadow 0.2s, border-color 0.2s',
+        cursor: 'pointer',
+      }}>
+        {icon && <div style={{ fontSize: '1.25rem', marginBottom: 6 }}>{icon}</div>}
+        <div style={{
+          fontFamily: 'var(--font-garamond)',
+          fontWeight: 700,
+          fontSize: '1rem',
+          color: tokens.colors.textPrimary,
+          marginBottom: 4,
+        }}>{title}</div>
+        <div style={{ fontSize: '0.8rem', color: tokens.colors.textSecondary, lineHeight: 1.5 }}>
+          {children}
+        </div>
+      </div>
+    </Link>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/mdx/Card.tsx
+git commit -m "feat(website): add Card/CardGroup MDX component"
+```
+
+---
+
+### Task 8: Create MDX Components — CodeGroup
+
+**Files:**
+- Create: `apps/website/src/components/docs/mdx/CodeGroup.tsx`
+
+- [ ] **Step 1: Create CodeGroup component**
+
+```tsx
+'use client';
+import { useState, Children, isValidElement } from 'react';
+import { tokens } from '../../../../lib/design-tokens';
+
+export function CodeGroup({ children }: { children: React.ReactNode }) {
+  const [active, setActive] = useState(0);
+  const blocks = Children.toArray(children).filter(isValidElement);
+
+  // Extract title from pre > code data attributes or fallback to index
+  const titles = blocks.map((block, i) => {
+    const pre = block as React.ReactElement<{ 'data-title'?: string; children?: React.ReactNode }>;
+    return pre.props['data-title'] ?? `File ${i + 1}`;
+  });
+
+  return (
+    <div style={{
+      borderRadius: 12,
+      border: `1px solid ${tokens.glass.border}`,
+      boxShadow: tokens.glass.shadow,
+      overflow: 'hidden',
+      marginBottom: 16,
+    }}>
+      <div style={{
+        display: 'flex', gap: 0,
+        background: 'rgba(26, 27, 38, 0.95)',
+        borderBottom: '1px solid rgba(255,255,255,0.06)',
+      }}>
+        {titles.map((title, i) => (
+          <button
+            key={title}
+            onClick={() => setActive(i)}
+            style={{
+              padding: '8px 14px',
+              fontFamily: 'var(--font-mono)',
+              fontSize: '0.7rem',
+              color: active === i ? '#a9b1d6' : '#4A527A',
+              background: active === i ? 'rgba(255,255,255,0.05)' : 'transparent',
+              border: 'none',
+              cursor: 'pointer',
+            }}>
+            {title}
+          </button>
+        ))}
+      </div>
+      <div>{blocks[active]}</div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/mdx/CodeGroup.tsx
+git commit -m "feat(website): add CodeGroup MDX component"
+```
+
+---
+
+### Task 9: Create New Docs Sidebar
+
+**Files:**
+- Create: `apps/website/src/components/docs/DocsSidebarNew.tsx`
+
+- [ ] **Step 1: Create collapsible sidebar with section groups**
+
+```tsx
+'use client';
+import { useState } from 'react';
+import Link from 'next/link';
+import { docsConfig, type DocsSection } from '../../lib/docs-config';
+import { tokens } from '../../../lib/design-tokens';
+
+interface Props {
+  activeSection: string;
+  activeSlug: string;
+}
+
+function SectionGroup({ section, activeSection, activeSlug }: { section: DocsSection; activeSection: string; activeSlug: string }) {
+  const hasActive = section.pages.some((p) => p.section === activeSection && p.slug === activeSlug);
+  const [open, setOpen] = useState(hasActive || true);
+  const headerColor = section.color === 'red' ? tokens.colors.angularRed : tokens.colors.accent;
+
+  return (
+    <div style={{ marginBottom: 16 }}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full text-left px-4 py-1.5 flex items-center justify-between"
+        style={{ background: 'none', border: 'none', cursor: 'pointer' }}>
+        <span className="font-mono text-xs uppercase tracking-wider" style={{ color: headerColor, fontWeight: 600 }}>
+          {section.title}
+        </span>
+        <span style={{ color: tokens.colors.textMuted, fontSize: 10, transition: 'transform 0.2s', transform: open ? 'rotate(0)' : 'rotate(-90deg)' }}>
+          ▾
+        </span>
+      </button>
+
+      {open && (
+        <nav className="flex flex-col mt-1">
+          {section.pages.map((page) => {
+            const isActive = page.section === activeSection && page.slug === activeSlug;
+            return (
+              <Link
+                key={`${page.section}/${page.slug}`}
+                href={`/docs/${page.section}/${page.slug}`}
+                className="px-4 py-1.5 text-sm mx-2 rounded-md transition-all"
+                style={{
+                  color: isActive ? tokens.colors.accent : tokens.colors.textSecondary,
+                  background: isActive ? tokens.colors.accentSurface : 'transparent',
+                  fontSize: '0.825rem',
+                }}>
+                {page.title}
+              </Link>
+            );
+          })}
+        </nav>
+      )}
+    </div>
+  );
+}
+
+export function DocsSidebarNew({ activeSection, activeSlug }: Props) {
+  return (
+    <aside
+      className="w-64 shrink-0 py-6 overflow-y-auto"
+      style={{
+        borderRight: `1px solid ${tokens.glass.border}`,
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+        minHeight: 'calc(100vh - 4rem)',
+        position: 'sticky',
+        top: '4rem',
+      }}>
+      {/* Search trigger */}
+      <div className="px-4 mb-6">
+        <button
+          className="w-full text-left px-3 py-2 rounded-lg text-sm flex items-center justify-between"
+          style={{
+            background: 'rgba(255,255,255,0.5)',
+            border: `1px solid ${tokens.glass.border}`,
+            color: tokens.colors.textMuted,
+            cursor: 'pointer',
+          }}
+          onClick={() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))}>
+          <span style={{ fontSize: '0.8rem' }}>Search docs...</span>
+          <span style={{
+            background: tokens.colors.accentSurface,
+            padding: '1px 6px',
+            borderRadius: 4,
+            fontFamily: 'var(--font-mono)',
+            fontSize: '0.65rem',
+            color: tokens.colors.accent,
+          }}>⌘K</span>
+        </button>
+      </div>
+
+      {docsConfig.map((section) => (
+        <SectionGroup
+          key={section.id}
+          section={section}
+          activeSection={activeSection}
+          activeSlug={activeSlug}
+        />
+      ))}
+    </aside>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/DocsSidebarNew.tsx
+git commit -m "feat(website): add collapsible docs sidebar with section groups"
+```
+
+---
+
+### Task 10: Create Breadcrumb and Prev/Next Components
+
+**Files:**
+- Create: `apps/website/src/components/docs/DocsBreadcrumb.tsx`
+- Create: `apps/website/src/components/docs/DocsPrevNext.tsx`
+
+- [ ] **Step 1: Create DocsBreadcrumb**
+
+```tsx
+import Link from 'next/link';
+import { tokens } from '../../../lib/design-tokens';
+import { getDocsSection } from '../../lib/docs-config';
+
+export function DocsBreadcrumb({ section, title }: { section: string; title: string }) {
+  const sectionData = getDocsSection(section);
+  return (
+    <div className="flex items-center gap-2 mb-4" style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: tokens.colors.textMuted }}>
+      <Link href="/docs/getting-started/introduction" style={{ color: tokens.colors.textMuted, textDecoration: 'none' }}>Docs</Link>
+      <span>›</span>
+      <span>{sectionData?.title ?? section}</span>
+      <span>›</span>
+      <span style={{ color: tokens.colors.textSecondary }}>{title}</span>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Create DocsPrevNext**
+
+```tsx
+import Link from 'next/link';
+import { tokens } from '../../../lib/design-tokens';
+import { getPrevNextPages } from '../../lib/docs-config';
+
+export function DocsPrevNext({ section, slug }: { section: string; slug: string }) {
+  const { prev, next } = getPrevNextPages(section, slug);
+
+  return (
+    <div className="flex justify-between gap-4 mt-12 pt-8" style={{ borderTop: `1px solid ${tokens.glass.border}` }}>
+      {prev ? (
+        <Link href={`/docs/${prev.section}/${prev.slug}`} style={{ textDecoration: 'none', flex: 1 }}>
+          <div className="p-4 rounded-lg transition-all" style={{
+            border: `1px solid ${tokens.glass.border}`,
+            background: tokens.glass.bg,
+          }}>
+            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: tokens.colors.textMuted, marginBottom: 4 }}>← Previous</div>
+            <div style={{ fontSize: '0.9rem', color: tokens.colors.textPrimary, fontWeight: 500 }}>{prev.title}</div>
+          </div>
+        </Link>
+      ) : <div style={{ flex: 1 }} />}
+      {next ? (
+        <Link href={`/docs/${next.section}/${next.slug}`} style={{ textDecoration: 'none', flex: 1, textAlign: 'right' }}>
+          <div className="p-4 rounded-lg transition-all" style={{
+            border: `1px solid ${tokens.glass.border}`,
+            background: tokens.glass.bg,
+          }}>
+            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: tokens.colors.textMuted, marginBottom: 4 }}>Next →</div>
+            <div style={{ fontSize: '0.9rem', color: tokens.colors.textPrimary, fontWeight: 500 }}>{next.title}</div>
+          </div>
+        </Link>
+      ) : <div style={{ flex: 1 }} />}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/components/docs/DocsBreadcrumb.tsx apps/website/src/components/docs/DocsPrevNext.tsx
+git commit -m "feat(website): add DocsBreadcrumb and DocsPrevNext components"
+```
+
+---
+
+### Task 11: Create Cmd+K Search Modal
+
+**Files:**
+- Create: `apps/website/src/components/docs/DocsSearch.tsx`
+
+- [ ] **Step 1: Create search modal with fuzzy matching**
+
+```tsx
+'use client';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { allDocsPages, docsConfig } from '../../lib/docs-config';
+import { tokens } from '../../../lib/design-tokens';
+
+export function DocsSearch() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+
+  const results = query.length > 0
+    ? allDocsPages.filter((p) =>
+        p.title.toLowerCase().includes(query.toLowerCase()) ||
+        p.slug.toLowerCase().includes(query.toLowerCase()) ||
+        p.section.toLowerCase().includes(query.toLowerCase())
+      ).slice(0, 8)
+    : allDocsPages.slice(0, 6);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      setOpen((o) => !o);
+    }
+    if (e.key === 'Escape') setOpen(false);
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  useEffect(() => {
+    if (open) {
+      setQuery('');
+      setSelected(0);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [open]);
+
+  const navigate = (page: typeof allDocsPages[0]) => {
+    router.push(`/docs/${page.section}/${page.slug}`);
+    setOpen(false);
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') { e.preventDefault(); setSelected((s) => Math.min(s + 1, results.length - 1)); }
+    if (e.key === 'ArrowUp') { e.preventDefault(); setSelected((s) => Math.max(s - 1, 0)); }
+    if (e.key === 'Enter' && results[selected]) { navigate(results[selected]); }
+  };
+
+  const getSectionLabel = (sectionId: string) => docsConfig.find((s) => s.id === sectionId)?.title ?? sectionId;
+
+  if (!open) return null;
+
+  return (
+    <div style={{
+      position: 'fixed', inset: 0, zIndex: 100,
+      background: 'rgba(0,0,0,0.3)',
+      backdropFilter: 'blur(4px)',
+      display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+      paddingTop: '20vh',
+    }} onClick={() => setOpen(false)}>
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          width: '100%', maxWidth: 520,
+          background: 'rgba(255,255,255,0.95)',
+          backdropFilter: `blur(${tokens.glass.blur})`,
+          border: `1px solid ${tokens.glass.border}`,
+          borderRadius: 12,
+          boxShadow: '0 16px 64px rgba(0,0,0,0.15)',
+          overflow: 'hidden',
+        }}>
+        <div style={{ padding: '12px 16px', borderBottom: `1px solid ${tokens.glass.border}` }}>
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(e) => { setQuery(e.target.value); setSelected(0); }}
+            onKeyDown={handleInputKeyDown}
+            placeholder="Search documentation..."
+            style={{
+              width: '100%', border: 'none', outline: 'none',
+              fontFamily: 'var(--font-inter)', fontSize: '0.95rem',
+              color: tokens.colors.textPrimary, background: 'transparent',
+            }}
+          />
+        </div>
+        <div style={{ maxHeight: 320, overflowY: 'auto', padding: 8 }}>
+          {results.map((page, i) => (
+            <button
+              key={`${page.section}/${page.slug}`}
+              onClick={() => navigate(page)}
+              className="w-full text-left"
+              style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                padding: '10px 12px', borderRadius: 8,
+                background: i === selected ? tokens.colors.accentSurface : 'transparent',
+                border: 'none', cursor: 'pointer', width: '100%',
+              }}>
+              <span style={{ fontSize: '0.875rem', color: tokens.colors.textPrimary }}>{page.title}</span>
+              <span style={{
+                fontFamily: 'var(--font-mono)', fontSize: '0.65rem',
+                color: tokens.colors.textMuted, background: 'rgba(0,0,0,0.04)',
+                padding: '2px 6px', borderRadius: 4,
+              }}>{getSectionLabel(page.section)}</span>
+            </button>
+          ))}
+          {results.length === 0 && (
+            <div style={{ padding: 16, textAlign: 'center', color: tokens.colors.textMuted, fontSize: '0.85rem' }}>
+              No results for &ldquo;{query}&rdquo;
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/DocsSearch.tsx
+git commit -m "feat(website): add Cmd+K search modal for docs"
+```
+
+---
+
+### Task 12: Update MdxRenderer — Register Custom Components
+
+**Files:**
+- Modify: `apps/website/src/components/docs/MdxRenderer.tsx`
+
+- [ ] **Step 1: Replace MdxRenderer with custom MDX component registration**
+
+```tsx
+import { MDXRemote } from 'next-mdx-remote/rsc';
+import { tokens } from '../../../lib/design-tokens';
+import { Callout } from './mdx/Callout';
+import { Steps, Step } from './mdx/Steps';
+import { Tabs, Tab } from './mdx/Tabs';
+import { Card, CardGroup } from './mdx/Card';
+import { CodeGroup } from './mdx/CodeGroup';
+import { DocsBreadcrumb } from './DocsBreadcrumb';
+import { DocsPrevNext } from './DocsPrevNext';
+
+const mdxComponents = {
+  Callout,
+  Steps,
+  Step,
+  Tabs,
+  Tab,
+  Card,
+  CardGroup,
+  CodeGroup,
+};
+
+interface Props {
+  source: string;
+  section: string;
+  slug: string;
+  title: string;
+}
+
+export function MdxRendererNew({ source, section, slug, title }: Props) {
+  return (
+    <div className="flex-1 py-8 px-8 md:px-12 max-w-3xl">
+      <DocsBreadcrumb section={section} title={title} />
+      <article className="prose max-w-none"
+        style={{
+          '--tw-prose-body': tokens.colors.textSecondary,
+          '--tw-prose-headings': tokens.colors.textPrimary,
+          '--tw-prose-code': tokens.colors.accent,
+          '--tw-prose-links': tokens.colors.accent,
+        } as React.CSSProperties}>
+        <MDXRemote source={source} components={mdxComponents} />
+      </article>
+      <DocsPrevNext section={section} slug={slug} />
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/MdxRenderer.tsx
+git commit -m "feat(website): register custom MDX components in renderer"
+```
+
+---
+
+### Task 13: Update Docs Page — New Routing + Layout
+
+**Files:**
+- Modify: `apps/website/src/app/docs/[[...slug]]/page.tsx`
+
+- [ ] **Step 1: Replace docs page with new 2-segment routing**
+
+```tsx
+import { notFound } from 'next/navigation';
+import { DocsSidebarNew } from '../../../components/docs/DocsSidebarNew';
+import { MdxRendererNew } from '../../../components/docs/MdxRenderer';
+import { DocsSearch } from '../../../components/docs/DocsSearch';
+import { getDocBySlug, getAllDocSlugs } from '../../../lib/docs-new';
+import { tokens } from '../../../../lib/design-tokens';
+
+export function generateStaticParams() {
+  return getAllDocSlugs().map(({ section, slug }) => ({ slug: [section, slug] }));
+}
+
+export default async function DocsPage({ params }: { params: Promise<{ slug?: string[] }> }) {
+  const { slug: rawSlug } = await params;
+  const slugParts = rawSlug ?? ['getting-started', 'introduction'];
+
+  // Support both 2-segment (new) routing
+  const [section, slug] = slugParts.length >= 2
+    ? [slugParts[0], slugParts[1]]
+    : ['getting-started', 'introduction'];
+
+  const doc = getDocBySlug(section, slug);
+  if (!doc) notFound();
+
+  return (
+    <div className="flex min-h-screen pt-16" style={{ background: 'var(--gradient-bg-flow)' }}>
+      <DocsSearch />
+      <DocsSidebarNew activeSection={section} activeSlug={slug} />
+      <div className="flex-1" style={{ background: 'rgba(255, 255, 255, 0.85)' }}>
+        <MdxRendererNew source={doc.content} section={section} slug={slug} title={doc.title} />
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Verify in browser**
+
+Open http://localhost:3000/docs/getting-started/introduction and verify:
+- Sidebar renders with 4 collapsible sections
+- Content renders with Callout and CardGroup components
+- Breadcrumb shows "Docs › Getting Started › Introduction"
+- Prev/Next shows at bottom
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/app/docs/[[...slug]]/page.tsx
+git commit -m "feat(website): wire up new docs routing with sidebar, search, and MDX components"
+```
+
+---
+
+### Task 14: Verify All Pages and Fix Issues
+
+- [ ] **Step 1: Navigate to each placeholder page**
+
+Open:
+- http://localhost:3000/docs/getting-started/introduction
+- http://localhost:3000/docs/guides/streaming
+- http://localhost:3000/docs/api/stream-resource
+
+Verify each renders correctly with custom MDX components.
+
+- [ ] **Step 2: Test Cmd+K search**
+
+Press Cmd+K, type "stream", verify results appear and navigation works.
+
+- [ ] **Step 3: Test prev/next navigation**
+
+On the introduction page, verify "Next → Quick Start" appears (even though quickstart.mdx doesn't exist yet — the link should still render).
+
+- [ ] **Step 4: Fix any issues found and commit**
+
+```bash
+git add -A
+git commit -m "fix(website): docs infrastructure polish and fixes"
+```
diff --git a/docs/superpowers/plans/2026-04-03-glassy-gradient-redesign.md b/docs/superpowers/plans/2026-04-03-glassy-gradient-redesign.md
new file mode 100644
index 000000000..85c0435e1
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-03-glassy-gradient-redesign.md
@@ -0,0 +1,1743 @@
+# Glassy & Gradient Website Redesign — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Refactor the StreamResource website from dark navy to a light frosted-glass aesthetic with dual-brand Angular/LangGraph ambient gradients.
+
+**Architecture:** Token-first approach — update `design-tokens.ts` and `global.css` first, then sweep all components to consume the new tokens. The warm→cool gradient flow (Angular red top-left → LangGraph blue bottom-right) serves as the continuous page backdrop, with balanced glass panels (14-16px blur, 40-50% white opacity) floating on top.
+
+**Tech Stack:** Next.js 16, React 19, Tailwind CSS v4, Framer Motion, Shiki (code highlighting)
+
+**Spec:** `docs/superpowers/specs/2026-04-03-glassy-gradient-redesign.md`
+
+---
+
+### Task 1: Update Design Tokens
+
+**Files:**
+- Modify: `apps/website/lib/design-tokens.ts`
+
+- [ ] **Step 1: Replace design-tokens.ts with new palette, glass, gradient, and glow tokens**
+
+```typescript
+/** Single source of truth for all brand design tokens.
+ *  CSS custom properties in globals.css must match these values exactly.
+ */
+export const tokens = {
+  colors: {
+    bg: '#f8f9fc',
+    accent: '#004090',
+    accentLight: '#64C3FD',
+    accentGlow: 'rgba(0, 64, 144, 0.2)',
+    accentBorder: 'rgba(0, 64, 144, 0.15)',
+    accentBorderHover: 'rgba(0, 64, 144, 0.3)',
+    accentSurface: 'rgba(0, 64, 144, 0.06)',
+    textPrimary: '#1a1a2e',
+    textSecondary: '#555770',
+    textMuted: '#8b8fa3',
+    sidebarBg: 'rgba(255, 255, 255, 0.45)',
+    angularRed: '#DD0031',
+  },
+  glass: {
+    bg: 'rgba(255, 255, 255, 0.45)',
+    bgHover: 'rgba(255, 255, 255, 0.55)',
+    blur: '16px',
+    border: 'rgba(255, 255, 255, 0.6)',
+    shadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
+  },
+  gradient: {
+    warm: 'radial-gradient(circle, rgba(221, 0, 49, 0.18), transparent 70%)',
+    cool: 'radial-gradient(circle, rgba(0, 64, 144, 0.18), transparent 70%)',
+    coolLight: 'radial-gradient(circle, rgba(100, 195, 253, 0.15), transparent 70%)',
+    bgFlow: 'linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%)',
+  },
+  glow: {
+    hero: '0 0 60px rgba(0, 64, 144, 0.15)',
+    demo: '0 0 30px rgba(0, 64, 144, 0.1)',
+    card: '0 0 24px rgba(0, 64, 144, 0.1)',
+    border: '0 0 12px rgba(0, 64, 144, 0.08)',
+    button: '0 0 16px rgba(0, 64, 144, 0.15)',
+  },
+} as const;
+```
+
+- [ ] **Step 2: Verify the file compiles**
+
+Run: `cd apps/website && npx tsc --noEmit lib/design-tokens.ts`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/lib/design-tokens.ts
+git commit -m "feat(website): update design tokens for glassy gradient redesign"
+```
+
+---
+
+### Task 2: Update Global CSS
+
+**Files:**
+- Modify: `apps/website/src/app/global.css`
+
+- [ ] **Step 1: Replace global.css with new theme variables and glass utilities**
+
+```css
+@import "tailwindcss";
+
+@theme {
+  --color-bg: #f8f9fc;
+  --color-accent: #004090;
+  --color-accent-light: #64C3FD;
+  --color-accent-glow: rgba(0, 64, 144, 0.2);
+  --color-accent-border: rgba(0, 64, 144, 0.15);
+  --color-accent-border-hover: rgba(0, 64, 144, 0.3);
+  --color-accent-surface: rgba(0, 64, 144, 0.06);
+  --color-text-primary: #1a1a2e;
+  --color-text-secondary: #555770;
+  --color-text-muted: #8b8fa3;
+  --color-sidebar-bg: rgba(255, 255, 255, 0.45);
+  --color-angular-red: #DD0031;
+
+  --font-garamond: "EB Garamond", Georgia, serif;
+  --font-inter: Inter, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+}
+
+:root {
+  --color-bg: #f8f9fc;
+  --color-accent: #004090;
+  --color-accent-light: #64C3FD;
+  --color-accent-glow: rgba(0, 64, 144, 0.2);
+  --color-accent-border: rgba(0, 64, 144, 0.15);
+  --color-accent-border-hover: rgba(0, 64, 144, 0.3);
+  --color-accent-surface: rgba(0, 64, 144, 0.06);
+  --color-text-primary: #1a1a2e;
+  --color-text-secondary: #555770;
+  --color-text-muted: #8b8fa3;
+  --color-sidebar-bg: rgba(255, 255, 255, 0.45);
+  --color-angular-red: #DD0031;
+
+  --glass-bg: rgba(255, 255, 255, 0.45);
+  --glass-bg-hover: rgba(255, 255, 255, 0.55);
+  --glass-blur: 16px;
+  --glass-border: rgba(255, 255, 255, 0.6);
+  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+
+  --gradient-bg-flow: linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--color-bg);
+  color: var(--color-text-primary);
+  font-family: var(--font-inter);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Shiki code blocks — tokyo-night theme */
+.shiki {
+  padding: 1.5rem;
+  background: #1a1b26 !important;
+  overflow-x: auto;
+}
+.shiki code {
+  font-family: var(--font-mono), monospace;
+  font-size: 0.75rem;
+  line-height: 1.7;
+}
+```
+
+- [ ] **Step 2: Verify the site builds**
+
+Run: `npx nx build website --skip-nx-cache 2>&1 | tail -5`
+Expected: Build completes without CSS errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/app/global.css
+git commit -m "feat(website): update global CSS for light glassy theme"
+```
+
+---
+
+### Task 3: Update Nav
+
+**Files:**
+- Modify: `apps/website/src/components/shared/Nav.tsx`
+
+- [ ] **Step 1: Replace Nav.tsx with glass treatment**
+
+```tsx
+'use client';
+import Link from 'next/link';
+import { tokens } from '../../../lib/design-tokens';
+
+const links = [
+  { label: 'Docs', href: '/docs' },
+  { label: 'API', href: '/api-reference' },
+  { label: 'Pricing', href: '/pricing' },
+];
+
+export function Nav() {
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-8 py-5"
+      style={{
+        borderBottom: `1px solid ${tokens.glass.border}`,
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+        boxShadow: tokens.glass.shadow,
+      }}>
+      <Link href="/" className="font-garamond text-xl font-bold" style={{ color: tokens.colors.textPrimary }}>
+        StreamResource
+      </Link>
+      <div className="flex items-center gap-8">
+        {links.map((l) => (
+          <Link key={l.href} href={l.href}
+            className="text-sm font-mono transition-colors"
+            style={{ color: tokens.colors.textSecondary }}
+            onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+            onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+            {l.label}
+          </Link>
+        ))}
+        <Link href="/pricing"
+          className="px-4 py-2 text-sm font-mono rounded transition-all"
+          style={{ background: tokens.colors.accent, color: '#fff' }}
+          onMouseEnter={(e) => (e.currentTarget.style.boxShadow = tokens.glow.button)}
+          onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}>
+          Get Started
+        </Link>
+      </div>
+    </nav>
+  );
+}
+```
+
+- [ ] **Step 2: Verify in browser**
+
+Open http://localhost:3000 and confirm nav is frosted glass with dark text on light background.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/components/shared/Nav.tsx
+git commit -m "feat(website): apply glass treatment to Nav"
+```
+
+---
+
+### Task 4: Update Footer
+
+**Files:**
+- Modify: `apps/website/src/components/shared/Footer.tsx`
+
+- [ ] **Step 1: Replace Footer.tsx with glass treatment**
+
+```tsx
+import Link from 'next/link';
+import { tokens } from '../../../lib/design-tokens';
+
+export function Footer() {
+  return (
+    <footer className="px-8 py-12 mt-24"
+      style={{
+        borderTop: `1px solid ${tokens.glass.border}`,
+        background: 'rgba(255, 255, 255, 0.55)',
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+      }}>
+      <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-start justify-between gap-8">
+        <div>
+          <p className="font-garamond text-lg font-bold" style={{ color: tokens.colors.textPrimary }}>StreamResource</p>
+          <p className="text-sm mt-1" style={{ color: tokens.colors.textMuted }}>The Enterprise Streaming Resource for LangChain and Angular</p>
+        </div>
+        <div className="flex gap-12 text-sm">
+          <div className="flex flex-col gap-2">
+            <span className="font-mono text-xs uppercase" style={{ color: tokens.colors.accent }}>Product</span>
+            <Link href="/docs" className="transition-colors" style={{ color: tokens.colors.textSecondary }}>Docs</Link>
+            <Link href="/api-reference" className="transition-colors" style={{ color: tokens.colors.textSecondary }}>API Reference</Link>
+            <Link href="/pricing" className="transition-colors" style={{ color: tokens.colors.textSecondary }}>Pricing</Link>
+          </div>
+        </div>
+      </div>
+      <div className="max-w-6xl mx-auto mt-8 pt-8 flex items-center justify-between text-xs"
+        style={{ borderTop: `1px solid ${tokens.glass.border}`, color: tokens.colors.textMuted }}>
+        <span>&copy; {new Date().getFullYear()} StreamResource. All rights reserved.</span>
+        <span>PolyForm Noncommercial 1.0.0 &middot; <Link href="/pricing" className="transition-colors">Commercial License</Link></span>
+      </div>
+    </footer>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/shared/Footer.tsx
+git commit -m "feat(website): apply glass treatment to Footer"
+```
+
+---
+
+### Task 5: Update InstallStrip
+
+**Files:**
+- Modify: `apps/website/src/components/shared/InstallStrip.tsx`
+
+- [ ] **Step 1: Replace InstallStrip.tsx with glass treatment**
+
+```tsx
+'use client';
+import { useState } from 'react';
+import { tokens } from '../../../lib/design-tokens';
+
+const CMD = 'npm install @cacheplane/stream-resource';
+
+export function InstallStrip() {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    await navigator.clipboard.writeText(CMD);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="inline-flex items-center gap-4 px-6 py-3 rounded-lg transition-all cursor-pointer"
+      style={{
+        border: `1px solid ${tokens.colors.accentBorder}`,
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+      }}
+      onMouseEnter={(e) => (e.currentTarget.style.boxShadow = tokens.glow.border)}
+      onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}
+      onClick={copy}>
+      <code className="font-mono text-sm" style={{ color: tokens.colors.textSecondary }}>{CMD}</code>
+      <button className="font-mono text-xs uppercase shrink-0 transition-colors"
+        style={{ color: copied ? tokens.colors.accent : tokens.colors.textMuted }}>
+        {copied ? 'Copied!' : 'Copy'}
+      </button>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/shared/InstallStrip.tsx
+git commit -m "feat(website): apply glass treatment to InstallStrip"
+```
+
+---
+
+### Task 6: Update CopyPromptButton
+
+**Files:**
+- Modify: `apps/website/src/components/docs/CopyPromptButton.tsx`
+
+- [ ] **Step 1: Replace CopyPromptButton.tsx with new accent colors**
+
+```tsx
+'use client';
+import { useState } from 'react';
+import { tokens } from '../../../lib/design-tokens';
+
+interface Props {
+  prompt: string;
+  variant?: 'hero' | 'docs';
+}
+
+export function CopyPromptButton({ prompt, variant = 'docs' }: Props) {
+  const [copied, setCopied] = useState(false);
+
+  const handleClick = async () => {
+    try {
+      await navigator.clipboard.writeText(prompt);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard access denied — silently ignore
+    }
+  };
+
+  const isHero = variant === 'hero';
+
+  return (
+    <button
+      onClick={handleClick}
+      aria-label={copied ? 'Prompt copied' : 'Copy prompt'}
+      style={{
+        background: isHero ? tokens.colors.accent : 'transparent',
+        border: isHero ? 'none' : `1px solid ${tokens.colors.accentBorderHover}`,
+        color: isHero ? '#fff' : tokens.colors.accent,
+        fontFamily: 'var(--font-mono)',
+        fontSize: isHero ? '13px' : '12px',
+        padding: isHero ? '12px 24px' : '8px 16px',
+        borderRadius: isHero ? '8px' : '6px',
+        cursor: 'pointer',
+        transition: 'box-shadow 0.2s',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.boxShadow = isHero
+          ? tokens.glow.button
+          : tokens.glow.border;
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.boxShadow = 'none';
+      }}>
+      <span aria-hidden="true">{copied ? '\u2713' : '\u26A1'}</span>{' '}
+      {copied ? 'Copied!' : 'Copy prompt'}
+    </button>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/CopyPromptButton.tsx
+git commit -m "feat(website): update CopyPromptButton to new accent colors"
+```
+
+---
+
+### Task 7: Update HeroTwoCol
+
+**Files:**
+- Modify: `apps/website/src/components/landing/HeroTwoCol.tsx`
+
+- [ ] **Step 1: Replace HeroTwoCol.tsx with gradient background and glass treatment**
+
+```tsx
+import { GenerativeUIFrame } from './GenerativeUIFrame';
+import { CopyPromptButton } from '../docs/CopyPromptButton';
+import { getPromptBySlug } from '../../lib/docs';
+import { tokens } from '../../lib/design-tokens';
+
+function LangChainBadge() {
+  return (
+    <span style={{
+      display: 'inline-flex', alignItems: 'center', gap: 6,
+      background: 'rgba(0, 64, 144, 0.08)',
+      border: '1px solid rgba(0, 64, 144, 0.2)',
+      borderRadius: 20, padding: '4px 10px 4px 8px',
+      fontFamily: 'var(--font-mono)', fontSize: 11, color: tokens.colors.textPrimary,
+    }}>
+      <span style={{
+        width: 14, height: 14, borderRadius: 3,
+        background: 'rgba(0, 64, 144, 0.15)',
+        border: '1px solid rgba(0, 64, 144, 0.3)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        fontSize: 7, fontWeight: 700, color: tokens.colors.accent, lineHeight: 1,
+      }}>LC</span>
+      LangChain
+    </span>
+  );
+}
+
+function AngularBadge() {
+  return (
+    <span style={{
+      display: 'inline-flex', alignItems: 'center', gap: 6,
+      background: 'rgba(221, 0, 49, 0.06)',
+      border: '1px solid rgba(221, 0, 49, 0.15)',
+      borderRadius: 20, padding: '4px 10px 4px 8px',
+      fontFamily: 'var(--font-mono)', fontSize: 11, color: tokens.colors.textPrimary,
+    }}>
+      <svg width="14" height="14" viewBox="0 0 250 250" aria-hidden={true}>
+        <path fill="#DD0031" d="M125 30L31.9 63.2l14.2 123.1L125 230l78.9-43.7 14.2-123.1z"/>
+        <path fill="#C3002F" d="M125 30v22.2l-61.7 162.4 37.8 15.4z"/>
+        <path fill="#fff" d="M125 52.1L66.8 182.6h21.7l11.7-29.2h49.4l11.7 29.2H183L125 52.1zm17 83.3h-34l17-40.9z"/>
+      </svg>
+      Angular
+    </span>
+  );
+}
+
+export async function HeroTwoCol() {
+  const prompt = getPromptBySlug(['getting-started']) ?? '';
+
+  return (
+    <section className="hero-two-col" aria-labelledby="hero-heading" style={{ position: 'relative', overflow: 'hidden' }}>
+      <style>{`
+        .hero-two-col {
+          display: flex;
+          align-items: center;
+          padding: 96px 40px 60px;
+          gap: 48px;
+          min-height: 100vh;
+          background: ${tokens.gradient.bgFlow};
+        }
+        .hero-left { flex: 0 0 55%; max-width: 55%; position: relative; z-index: 1; }
+        .hero-right { flex: 0 0 45%; max-width: 45%; display: flex; justify-content: center; position: relative; z-index: 1; }
+        @media (max-width: 767px) {
+          .hero-two-col { flex-direction: column; padding: 80px 24px 40px; }
+          .hero-left { flex: none; max-width: 100%; width: 100%; }
+          .hero-right { flex: none; max-width: 100%; width: 100%; max-height: 300px; overflow: hidden; }
+        }
+      `}</style>
+
+      {/* Ambient gradient blobs */}
+      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.warm, top: -150, left: -100, filter: 'blur(60px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 450, height: 450, borderRadius: '50%', background: tokens.gradient.cool, bottom: -100, right: -50, filter: 'blur(60px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 350, height: 350, borderRadius: '50%', background: tokens.gradient.coolLight, top: '30%', right: '20%', filter: 'blur(50px)', pointerEvents: 'none' }} />
+
+      {/* Left column — 55% */}
+      <div className="hero-left">
+        <div style={{ display: 'flex', gap: 8, marginBottom: 28, flexWrap: 'wrap' }}>
+          <LangChainBadge />
+          <AngularBadge />
+        </div>
+
+        <h1 id="hero-heading" style={{
+          fontFamily: 'var(--font-garamond)',
+          fontSize: 'clamp(36px, 4.5vw, 72px)',
+          fontWeight: 800,
+          lineHeight: 1.05,
+          color: tokens.colors.textPrimary,
+          margin: 0,
+          marginBottom: 20,
+        }}>
+          The Enterprise Streaming Resource for LangChain and{' '}
+          <span style={{ color: tokens.colors.angularRed }}>Angular</span>
+        </h1>
+
+        <p style={{
+          fontFamily: 'var(--font-garamond)',
+          fontStyle: 'italic',
+          fontSize: 'clamp(16px, 1.8vw, 20px)',
+          color: tokens.colors.textSecondary,
+          maxWidth: '44ch',
+          lineHeight: 1.5,
+          margin: 0,
+          marginBottom: 32,
+        }}>
+          Full parity with React{' '}
+          <code style={{
+            fontStyle: 'normal',
+            fontFamily: 'var(--font-mono)',
+            fontSize: '0.8em',
+            background: tokens.colors.accentSurface,
+            color: tokens.colors.accent,
+            padding: '2px 6px',
+            borderRadius: 4,
+          }}>useStream()</code>
+          {' '}&mdash; built natively for Angular 20+.
+        </p>
+
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 12 }}>
+          <CopyPromptButton prompt={prompt} variant="hero" />
+          <span style={{
+            fontFamily: 'var(--font-mono)',
+            fontSize: 12,
+            color: tokens.colors.textMuted,
+          }}>
+            npm install @cacheplane/stream-resource
+          </span>
+        </div>
+      </div>
+
+      {/* Right column — 45% */}
+      <div className="hero-right">
+        <GenerativeUIFrame />
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Verify in browser**
+
+Open http://localhost:3000 and confirm hero has warm→cool gradient with floating blobs and dark text.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/components/landing/HeroTwoCol.tsx
+git commit -m "feat(website): apply gradient background and glass to Hero"
+```
+
+---
+
+### Task 8: Update ArchDiagram
+
+**Files:**
+- Modify: `apps/website/src/components/landing/ArchDiagram.tsx`
+
+- [ ] **Step 1: Replace ArchDiagram.tsx with light-theme SVG treatment**
+
+```tsx
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '../../lib/design-tokens';
+
+const NODES = [
+  { id: 'angular', label: 'Angular App', x: 60, y: 100 },
+  { id: 'sr', label: 'streamResource()', x: 260, y: 100 },
+  { id: 'transport', label: 'FetchStreamTransport', x: 480, y: 100 },
+  { id: 'langgraph', label: 'LangGraph Server', x: 700, y: 100 },
+];
+
+const EDGES = [
+  { from: 'angular', to: 'sr', d: 'M 140 100 L 260 100' },
+  { from: 'sr', to: 'transport', d: 'M 390 100 L 480 100' },
+  { from: 'transport', to: 'langgraph', d: 'M 620 100 L 700 100' },
+];
+
+export function ArchDiagram() {
+  return (
+    <section className="px-8 py-16 flex flex-col items-center">
+      <p className="font-mono text-xs uppercase tracking-widest mb-8"
+        style={{ color: tokens.colors.accent }}>Architecture</p>
+      <motion.div
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.6 }}>
+        <svg role="img" viewBox="0 0 820 200" width="100%" style={{ maxWidth: 820 }} aria-label="Architecture diagram showing Angular App connecting through streamResource and FetchStreamTransport to LangGraph Server">
+          <defs>
+            <radialGradient id="nodeGlow" cx="50%" cy="50%" r="50%">
+              <stop offset="0%" stopColor="rgba(0,64,144,0.15)" />
+              <stop offset="100%" stopColor="rgba(0,64,144,0)" />
+            </radialGradient>
+          </defs>
+          {EDGES.map((edge) => (
+            <g key={edge.from}>
+              <path d={edge.d} stroke={tokens.colors.accent} strokeWidth="1.5" fill="none" opacity="0.4" />
+              <circle r="3" fill={tokens.colors.accent}>
+                <animateMotion dur="2s" repeatCount="indefinite" path={edge.d} />
+              </circle>
+            </g>
+          ))}
+          {NODES.map((node) => (
+            <g key={node.id}>
+              <ellipse cx={node.x + 10} cy={node.y} rx={50} ry={30} fill="url(#nodeGlow)" />
+              <rect
+                x={node.x - 60} y={node.y - 24}
+                width="140" height="48"
+                rx="6"
+                fill="rgba(255,255,255,0.5)"
+                stroke={tokens.colors.accentBorder}
+                strokeWidth="1"
+              />
+              <text
+                x={node.x + 10} y={node.y + 5}
+                textAnchor="middle"
+                fill={tokens.colors.textSecondary}
+                fontSize="11"
+                fontFamily="var(--font-mono)">
+                {node.label}
+              </text>
+            </g>
+          ))}
+        </svg>
+      </motion.div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/ArchDiagram.tsx
+git commit -m "feat(website): update ArchDiagram for light glassy theme"
+```
+
+---
+
+### Task 9: Update FeatureStrip
+
+**Files:**
+- Modify: `apps/website/src/components/landing/FeatureStrip.tsx`
+
+- [ ] **Step 1: Replace FeatureStrip.tsx with glass card treatment**
+
+```tsx
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '../../lib/design-tokens';
+
+const FEATURES = [
+  { icon: '\u26A1', title: 'Token-by-token streaming', desc: 'Real-time SSE streaming via FetchStreamTransport. Messages update as each token arrives.' },
+  { icon: '\uD83D\uDD17', title: 'Thread persistence', desc: 'MemorySaver-backed threads survive page refreshes via threadId signal and onThreadId callback.' },
+  { icon: '\uD83D\uDCD0', title: 'Angular Signals', desc: 'Every state slice is an Angular Signal. Works with OnPush, async pipe, and computed().' },
+  { icon: '\uD83E\uDDEA', title: 'MockStreamTransport', desc: 'Deterministic unit testing. Script event sequences and step through them in your specs.' },
+  { icon: '\uD83D\uDD27', title: 'Full useStream() parity', desc: 'Interrupts, tool calls, subagents, branch history, joinStream \u2014 everything the React SDK exposes.' },
+  { icon: '\uD83C\uDFE2', title: 'Source-available licensing', desc: 'Free for noncommercial use under PolyForm Noncommercial 1.0.0. Commercial license at $500/seat/year or $2,000/app deployment.' },
+];
+
+export function FeatureStrip() {
+  return (
+    <section className="px-8 py-16 max-w-6xl mx-auto">
+      <h2 className="font-mono text-xs uppercase tracking-widest mb-12 text-center"
+        style={{ color: tokens.colors.accent, fontWeight: 'normal' }}>Features</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {FEATURES.map((f, i) => (
+          <motion.div
+            key={f.title}
+            className="p-6 rounded-lg cursor-default"
+            style={{
+              border: `1px solid ${tokens.glass.border}`,
+              background: tokens.glass.bg,
+              backdropFilter: `blur(${tokens.glass.blur})`,
+              WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+            }}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: i * 0.08, duration: 0.4 }}
+            whileHover={{
+              borderColor: tokens.colors.accentBorderHover,
+              boxShadow: tokens.glow.card,
+              background: tokens.glass.bgHover,
+            }}>
+            <div className="mb-3" style={{ fontSize: '1.5rem', color: tokens.colors.accent }} aria-hidden="true">{f.icon}</div>
+            <h3 style={{ fontFamily: 'var(--font-garamond)', fontWeight: 700, fontSize: '1.125rem', color: tokens.colors.textPrimary, marginBottom: 8 }}>{f.title}</h3>
+            <p style={{ fontSize: '0.875rem', color: tokens.colors.textSecondary, lineHeight: 1.6 }}>{f.desc}</p>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/FeatureStrip.tsx
+git commit -m "feat(website): apply glass cards to FeatureStrip"
+```
+
+---
+
+### Task 10: Update CodeBlock
+
+**Files:**
+- Modify: `apps/website/src/components/landing/CodeBlock.tsx`
+
+- [ ] **Step 1: Replace CodeBlock.tsx with glass-bordered container**
+
+```tsx
+import { codeToHtml } from 'shiki';
+import { tokens } from '../../lib/design-tokens';
+
+const EXAMPLE = `// app.config.ts
+provideStreamResource({ apiUrl: 'http://localhost:2024' })
+
+// chat.component.ts
+const chat = streamResource<{ messages: BaseMessage[] }>({
+  assistantId: 'chat_agent',
+  threadId: signal(this.threadId),
+  onThreadId: (id) => localStorage.setItem('threadId', id),
+});`;
+
+const TEMPLATE_EXAMPLE = `<!-- chat.component.html -->
+@for (msg of chat.messages(); track $index) {
+  <p>{{ msg.content }}</p>
+}
+<button (click)="chat.submit({ messages: [input] })">Send</button>`;
+
+export async function CodeBlock() {
+  const tsHtml = await codeToHtml(EXAMPLE, {
+    lang: 'typescript',
+    theme: 'tokyo-night',
+  });
+
+  const templateHtml = await codeToHtml(TEMPLATE_EXAMPLE, {
+    lang: 'html',
+    theme: 'tokyo-night',
+  });
+
+  return (
+    <section className="px-8 py-16 max-w-4xl mx-auto">
+      <p className="font-mono text-xs uppercase tracking-widest mb-8 text-center"
+        style={{ color: tokens.colors.accent }}>30-second example</p>
+      <div style={{
+        borderRadius: 12,
+        border: `1px solid ${tokens.glass.border}`,
+        boxShadow: tokens.glass.shadow,
+        overflow: 'hidden',
+      }}>
+        <div
+          className="overflow-hidden text-sm leading-relaxed"
+          dangerouslySetInnerHTML={{ __html: tsHtml }}
+        />
+        <div
+          className="overflow-hidden text-sm leading-relaxed"
+          style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}
+          dangerouslySetInnerHTML={{ __html: templateHtml }}
+        />
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/CodeBlock.tsx
+git commit -m "feat(website): apply glass border to CodeBlock"
+```
+
+---
+
+### Task 11: Update GenerativeUIFrame
+
+**Files:**
+- Modify: `apps/website/src/components/landing/GenerativeUIFrame.tsx`
+
+- [ ] **Step 1: Replace GenerativeUIFrame.tsx — keep dark browser chrome, add glass outer frame**
+
+```tsx
+'use client';
+import { useEffect, useRef } from 'react';
+import { tokens } from '../../lib/design-tokens';
+
+export function GenerativeUIFrame() {
+  const frameRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const frame = frameRef.current;
+    if (!frame) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = frame.getBoundingClientRect();
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const distance = Math.hypot(e.clientX - cx, e.clientY - cy);
+      const intensity = 0.08 + 0.2 * Math.max(0, 1 - distance / 400);
+      const blur = 10 + intensity * 40;
+      frame.style.boxShadow = `0 0 ${blur}px rgba(0,64,144,${intensity.toFixed(2)})`;
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    return () => document.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  return (
+    <div
+      ref={frameRef}
+      role="img"
+      aria-label="Animated demo of stream-resource rendering a generative UI"
+      className="rounded-xl overflow-hidden"
+      style={{
+        border: `1px solid ${tokens.glass.border}`,
+        background: '#080B14',
+        boxShadow: tokens.glow.demo,
+        transition: 'box-shadow 0.1s ease-out',
+        width: '100%',
+        maxWidth: 520,
+      }}>
+      {/* Browser chrome */}
+      <div style={{
+        padding: '10px 14px',
+        borderBottom: '1px solid rgba(255,255,255,0.08)',
+        display: 'flex', alignItems: 'center', gap: 8,
+      }}>
+        <div style={{ display: 'flex', gap: 6 }}>
+          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#FF5F57' }} />
+          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#FEBC2E' }} />
+          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#28C840' }} />
+        </div>
+        <div style={{
+          flex: 1, background: 'rgba(255,255,255,0.06)',
+          borderRadius: 4, padding: '3px 10px',
+          fontFamily: 'var(--font-mono)', fontSize: 11,
+          color: '#4A527A', textAlign: 'center',
+        }}>
+          localhost:4200
+        </div>
+      </div>
+
+      {/* Animated content area */}
+      <div style={{ padding: 20, minHeight: 260, position: 'relative', overflow: 'hidden' }}>
+        <style>{`
+          @keyframes fadeWord {
+            from { opacity: 0; transform: translateY(4px); }
+            to   { opacity: 1; transform: translateY(0); }
+          }
+          @keyframes cardIn {
+            from { opacity: 0; transform: translateY(8px); }
+            to   { opacity: 1; transform: translateY(0); }
+          }
+          @keyframes rowIn {
+            from { opacity: 0; }
+            to   { opacity: 1; }
+          }
+          @keyframes loopFade {
+            0%, 75% { opacity: 1; }
+            97%, 100% { opacity: 0; }
+          }
+          .gen-ui-loop { animation: loopFade 6s linear infinite; }
+          .w1  { animation: fadeWord 0.25s ease-out 0.1s both; }
+          .w2  { animation: fadeWord 0.25s ease-out 0.3s both; }
+          .w3  { animation: fadeWord 0.25s ease-out 0.5s both; }
+          .w4  { animation: fadeWord 0.25s ease-out 0.7s both; }
+          .w5  { animation: fadeWord 0.25s ease-out 0.9s both; }
+          .w6  { animation: fadeWord 0.25s ease-out 1.1s both; }
+          .card-title { animation: cardIn 0.3s ease-out 1.5s both; }
+          .card-body  { animation: cardIn 0.3s ease-out 1.9s both; }
+          .card-btn   { animation: cardIn 0.3s ease-out 2.3s both; }
+          .row1 { animation: rowIn 0.25s ease-out 3.0s both; }
+          .row2 { animation: rowIn 0.25s ease-out 3.4s both; }
+          .row3 { animation: rowIn 0.25s ease-out 3.8s both; }
+        `}</style>
+
+        <div className="gen-ui-loop">
+          {/* Phase 1: streaming chat reply */}
+          <div style={{ marginBottom: 16, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
+            <div style={{
+              width: 24, height: 24, borderRadius: '50%', flexShrink: 0,
+              background: 'rgba(108,142,255,0.2)', border: '1px solid rgba(108,142,255,0.4)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              fontFamily: 'var(--font-mono)', fontSize: 9, color: '#6C8EFF',
+            }}>AI</div>
+            <div style={{
+              background: 'rgba(108,142,255,0.08)', borderRadius: 8,
+              padding: '8px 12px', fontSize: 13, color: '#EEF1FF', lineHeight: 1.5,
+            }}>
+              <span className="w1">Here </span>
+              <span className="w2">is </span>
+              <span className="w3">your </span>
+              <span className="w4">quarterly </span>
+              <span className="w5">report </span>
+              <span className="w6">summary.</span>
+            </div>
+          </div>
+
+          {/* Phase 2: generative card */}
+          <div style={{
+            border: '1px solid rgba(108,142,255,0.2)', borderRadius: 8,
+            padding: '12px 14px', marginBottom: 12,
+          }}>
+            <div className="card-title" style={{
+              fontFamily: 'var(--font-garamond)', fontSize: 15, fontWeight: 700,
+              color: '#EEF1FF', marginBottom: 6,
+            }}>Q1 2026 Revenue</div>
+            <div className="card-body" style={{
+              fontSize: 12, color: '#8B96C8', lineHeight: 1.5, marginBottom: 10,
+            }}>Revenue up 24% YoY. Strongest quarter on record across all segments.</div>
+            <div className="card-btn" style={{
+              display: 'inline-block', padding: '5px 12px', borderRadius: 5,
+              background: 'rgba(108,142,255,0.15)',
+              border: '1px solid rgba(108,142,255,0.3)',
+              fontFamily: 'var(--font-mono)', fontSize: 11, color: '#6C8EFF',
+            }}>View details &rarr;</div>
+          </div>
+
+          {/* Phase 3: streaming table */}
+          <div style={{ border: '1px solid rgba(108,142,255,0.15)', borderRadius: 8, overflow: 'hidden' }}>
+            <div style={{
+              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
+              padding: '6px 12px', background: 'rgba(108,142,255,0.06)',
+              fontFamily: 'var(--font-mono)', fontSize: 10,
+              color: '#4A527A', textTransform: 'uppercase', letterSpacing: '0.08em',
+            }}>
+              <span>Segment</span><span>Revenue</span><span>Growth</span>
+            </div>
+            {[
+              { seg: 'Enterprise', rev: '$4.2M', growth: '+31%', cls: 'row1' },
+              { seg: 'SMB', rev: '$2.1M', growth: '+18%', cls: 'row2' },
+              { seg: 'Developer', rev: '$0.8M', growth: '+42%', cls: 'row3' },
+            ].map((r) => (
+              <div key={r.seg} className={r.cls} style={{
+                display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
+                padding: '6px 12px',
+                borderTop: '1px solid rgba(108,142,255,0.08)',
+                fontSize: 12, color: '#8B96C8',
+              }}>
+                <span>{r.seg}</span>
+                <span style={{ color: '#EEF1FF' }}>{r.rev}</span>
+                <span style={{ color: '#6C8EFF' }}>{r.growth}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/GenerativeUIFrame.tsx
+git commit -m "feat(website): update GenerativeUIFrame outer frame for glass theme"
+```
+
+---
+
+### Task 12: Update Landing Page (page.tsx)
+
+**Files:**
+- Modify: `apps/website/src/app/page.tsx`
+
+- [ ] **Step 1: Update page.tsx — apply gradient background and update live demo section colors**
+
+```tsx
+import Script from 'next/script';
+import { HeroTwoCol } from '../components/landing/HeroTwoCol';
+import { ArchDiagram } from '../components/landing/ArchDiagram';
+import { FeatureStrip } from '../components/landing/FeatureStrip';
+import { CodeBlock } from '../components/landing/CodeBlock';
+import { tokens } from '../lib/design-tokens';
+
+export default async function HomePage() {
+  return (
+    <div style={{ background: tokens.gradient.bgFlow, position: 'relative', overflow: 'hidden' }}>
+      {/* Ambient gradient blobs that extend beyond the hero */}
+      <div style={{ position: 'absolute', width: 600, height: 600, borderRadius: '50%', background: tokens.gradient.warm, top: -200, left: -150, filter: 'blur(80px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, bottom: 200, right: -100, filter: 'blur(80px)', pointerEvents: 'none' }} />
+
+      <HeroTwoCol />
+      <ArchDiagram />
+      <FeatureStrip />
+      <CodeBlock />
+
+      {/* Angular Elements live demo */}
+      <section className="px-8 py-16 max-w-3xl mx-auto" style={{ position: 'relative', zIndex: 1 }}>
+        <p className="font-mono text-xs uppercase tracking-widest mb-8 text-center"
+          style={{ color: tokens.colors.accent }}>Live Demo</p>
+        <div className="rounded-xl overflow-hidden"
+          style={{ border: `1px solid ${tokens.glass.border}`, boxShadow: tokens.glow.demo }}>
+          {/* @ts-expect-error — custom element registered by Angular Elements bundle */}
+          <stream-chat-demo
+            api-url={process.env['NEXT_PUBLIC_LANGGRAPH_URL'] ?? 'http://localhost:2024'}
+            assistant-id="chat_agent"
+          />
+        </div>
+        <Script src="/demo/main.js" strategy="lazyOnload" />
+      </section>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Verify full landing page in browser**
+
+Open http://localhost:3000 and scroll through the full landing page. Confirm gradient background, glass cards, and dark code blocks all render correctly.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/app/page.tsx
+git commit -m "feat(website): apply gradient background to landing page"
+```
+
+---
+
+### Task 13: Update DocsSidebar
+
+**Files:**
+- Modify: `apps/website/src/components/docs/DocsSidebar.tsx`
+
+- [ ] **Step 1: Replace DocsSidebar.tsx with glass treatment**
+
+```tsx
+import Link from 'next/link';
+import { getAllDocsMeta } from '../../lib/docs';
+import { tokens } from '../../lib/design-tokens';
+
+export function DocsSidebar({ activeSlug }: { activeSlug: string }) {
+  const docs = getAllDocsMeta();
+  return (
+    <aside
+      className="w-56 shrink-0 py-8"
+      style={{
+        borderRight: `1px solid ${tokens.glass.border}`,
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+        minHeight: 'calc(100vh - 4rem)',
+        position: 'sticky',
+        top: '4rem',
+      }}>
+      <p
+        className="font-mono text-xs uppercase tracking-widest mb-6 px-4"
+        style={{ color: tokens.colors.textMuted }}>
+        Documentation
+      </p>
+      <nav className="flex flex-col">
+        {docs.map((doc) => {
+          const slug = doc.slug.join('/');
+          const isActive = slug === activeSlug;
+          return (
+            <Link
+              key={slug}
+              href={`/docs/${slug}`}
+              className="px-4 py-2 text-sm mx-2 rounded-md transition-all"
+              style={{
+                color: isActive ? tokens.colors.accent : tokens.colors.textSecondary,
+                background: isActive ? tokens.colors.accentSurface : 'transparent',
+              }}>
+              {doc.title}
+            </Link>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/DocsSidebar.tsx
+git commit -m "feat(website): apply glass treatment to DocsSidebar"
+```
+
+---
+
+### Task 14: Update MdxRenderer
+
+**Files:**
+- Modify: `apps/website/src/components/docs/MdxRenderer.tsx`
+
+- [ ] **Step 1: Replace MdxRenderer.tsx — switch from prose-invert to light prose**
+
+```tsx
+import { MDXRemote } from 'next-mdx-remote/rsc';
+import { CopyPromptButton } from './CopyPromptButton';
+import { tokens } from '../../lib/design-tokens';
+
+interface Props {
+  source: string;
+  prompt?: string;
+}
+
+export function MdxRenderer({ source, prompt }: Props) {
+  return (
+    <article className="prose max-w-none py-8 px-8 flex-1"
+      style={{
+        '--tw-prose-body': tokens.colors.textSecondary,
+        '--tw-prose-headings': tokens.colors.textPrimary,
+        '--tw-prose-code': tokens.colors.accent,
+        background: 'rgba(255, 255, 255, 0.8)',
+      } as React.CSSProperties}>
+      {prompt && (
+        <div style={{ marginBottom: 24 }}>
+          <CopyPromptButton prompt={prompt} variant="docs" />
+        </div>
+      )}
+      <MDXRemote source={source} />
+    </article>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/MdxRenderer.tsx
+git commit -m "feat(website): switch MdxRenderer to light prose theme"
+```
+
+---
+
+### Task 15: Update Docs Page Layout
+
+**Files:**
+- Modify: `apps/website/src/app/docs/[[...slug]]/page.tsx`
+
+- [ ] **Step 1: Add gradient background to docs layout**
+
+```tsx
+import { notFound } from 'next/navigation';
+import { DocsSidebar } from '../../../components/docs/DocsSidebar';
+import { MdxRenderer } from '../../../components/docs/MdxRenderer';
+import { OpenInCockpit } from '../../../components/docs/open-in-cockpit';
+import { getDocBySlug, getAllDocSlugs, getPromptBySlug } from '../../../lib/docs';
+
+export function generateStaticParams() {
+  return getAllDocSlugs().map((slug) => ({ slug }));
+}
+
+export default async function DocsPage({ params }: { params: Promise<{ slug?: string[] }> }) {
+  const { slug: rawSlug } = await params;
+  const slug = rawSlug ?? ['deep-agents', 'getting-started', 'overview', 'overview', 'python'];
+  const doc = getDocBySlug(slug);
+  if (!doc) notFound();
+  const prompt = getPromptBySlug(slug) ?? undefined;
+
+  return (
+    <div className="flex min-h-screen pt-16"
+      style={{ background: 'var(--gradient-bg-flow)' }}>
+      <DocsSidebar activeSlug={slug.join('/')} />
+      <div className="flex-1">
+        <div className="px-8 pt-8">
+          <OpenInCockpit bundle={doc.bundle} />
+        </div>
+        <MdxRenderer source={doc.content} prompt={prompt} />
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/app/docs/[[...slug]]/page.tsx
+git commit -m "feat(website): add gradient background to docs page"
+```
+
+---
+
+### Task 16: Update PricingGrid
+
+**Files:**
+- Modify: `apps/website/src/components/pricing/PricingGrid.tsx`
+
+- [ ] **Step 1: Replace PricingGrid.tsx with glass card treatment**
+
+```tsx
+'use client';
+import { tokens } from '../../lib/design-tokens';
+
+const PLANS = [
+  {
+    name: 'Community',
+    price: 'Free',
+    period: 'noncommercial use',
+    features: ['PolyForm Noncommercial 1.0.0', 'Personal projects', 'Academic & research', 'Non-profit internal use'],
+    highlight: false,
+    cta: 'Get Started',
+    ctaHref: 'https://www.npmjs.com/package/@cacheplane/stream-resource',
+  },
+  {
+    name: 'Developer Seat',
+    price: '$500',
+    period: '/seat/year',
+    features: ['Commercial use', '12-month release lock', 'Email support', 'All features'],
+    highlight: false,
+    cta: 'Buy License',
+    ctaHref: '#lead-form',
+  },
+  {
+    name: 'App Deployment',
+    price: '$2,000',
+    period: '/app one-time',
+    features: ['Per-application license', 'All environments covered', 'No seat limits', 'Perpetual for version'],
+    highlight: false,
+    cta: 'Buy License',
+    ctaHref: '#lead-form',
+  },
+  {
+    name: 'Enterprise',
+    price: 'Custom',
+    period: 'volume licensing',
+    features: ['Volume licensing', 'Priority support', 'Custom contract'],
+    highlight: true,
+    cta: 'Contact Us',
+    ctaHref: '#lead-form',
+  },
+];
+
+export function PricingGrid() {
+  return (
+    <section className="px-8 py-16 max-w-6xl mx-auto">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {PLANS.map((plan) => (
+          <div
+            key={plan.name}
+            className="p-8 rounded-xl flex flex-col"
+            style={{
+              border: `1px solid ${plan.highlight ? tokens.colors.accent : tokens.glass.border}`,
+              boxShadow: plan.highlight ? tokens.glow.card : tokens.glass.shadow,
+              background: plan.highlight ? 'rgba(255, 255, 255, 0.55)' : tokens.glass.bg,
+              backdropFilter: `blur(${tokens.glass.blur})`,
+              WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+            }}>
+            <p
+              className="font-mono text-xs uppercase tracking-widest mb-4"
+              style={{ color: tokens.colors.accent }}>
+              {plan.name}
+            </p>
+            <p
+              style={{
+                fontFamily: 'var(--font-garamond)',
+                fontWeight: 700,
+                fontSize: 48,
+                color: tokens.colors.textPrimary,
+                lineHeight: 1,
+                marginBottom: 4,
+              }}>
+              {plan.price}
+            </p>
+            <p className="text-sm mb-8" style={{ color: tokens.colors.textMuted }}>{plan.period}</p>
+            <ul className="flex flex-col gap-2 mb-8 flex-1">
+              {plan.features.map((f) => (
+                <li key={f} className="text-sm flex items-center gap-2" style={{ color: tokens.colors.textSecondary }}>
+                  <span style={{ color: tokens.colors.accent }}>&check;</span> {f}
+                </li>
+              ))}
+            </ul>
+            <a
+              href={plan.ctaHref}
+              className="text-center py-3 px-6 rounded font-mono text-sm transition-all"
+              style={{
+                background: plan.highlight ? tokens.colors.accent : 'transparent',
+                color: plan.highlight ? '#fff' : tokens.colors.accent,
+                border: `1px solid ${tokens.colors.accent}`,
+                textDecoration: 'none',
+              }}
+              onMouseEnter={(e) => (e.currentTarget.style.boxShadow = tokens.glow.button)}
+              onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}>
+              {plan.cta}
+            </a>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/pricing/PricingGrid.tsx
+git commit -m "feat(website): apply glass cards to PricingGrid"
+```
+
+---
+
+### Task 17: Update CompareTable
+
+**Files:**
+- Modify: `apps/website/src/components/pricing/CompareTable.tsx`
+
+- [ ] **Step 1: Replace CompareTable.tsx with glass container and new colors**
+
+```tsx
+'use client';
+import { tokens } from '../../lib/design-tokens';
+
+const ROWS = [
+  { feature: 'npm install', oss: true, seat: true, app: true, enterprise: true },
+  { feature: 'Commercial use', oss: false, seat: true, app: true, enterprise: true },
+  { feature: 'All Angular versions', oss: true, seat: true, app: true, enterprise: true },
+  { feature: 'Email support', oss: false, seat: true, app: true, enterprise: true },
+  { feature: 'Source access', oss: true, seat: true, app: true, enterprise: true },
+  { feature: 'Per-app deployment', oss: false, seat: false, app: true, enterprise: true },
+  { feature: 'Volume licensing', oss: false, seat: false, app: false, enterprise: true },
+  { feature: 'Priority support', oss: false, seat: false, app: false, enterprise: true },
+];
+
+const Check = () => <span style={{ color: tokens.colors.accent }}>&check;</span>;
+const X = () => <span style={{ color: tokens.colors.textMuted }}>&mdash;</span>;
+
+export function CompareTable() {
+  return (
+    <section className="px-8 py-8 max-w-6xl mx-auto overflow-x-auto">
+      <div style={{
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+        border: `1px solid ${tokens.glass.border}`,
+        borderRadius: 12,
+        overflow: 'hidden',
+      }}>
+        <table className="w-full text-sm" style={{ borderCollapse: 'collapse' }}>
+          <thead>
+            <tr style={{ borderBottom: `1px solid ${tokens.colors.accentBorder}`, background: 'rgba(255,255,255,0.55)' }}>
+              <th className="text-left py-3 px-4 font-mono text-xs uppercase" style={{ color: tokens.colors.textMuted }}>Feature</th>
+              {['Community', 'Developer Seat', 'App Deployment', 'Enterprise'].map((h) => (
+                <th key={h} className="text-center py-3 px-4 font-mono text-xs uppercase" style={{ color: tokens.colors.accent }}>{h}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {ROWS.map((row) => (
+              <tr
+                key={row.feature}
+                style={{ borderBottom: `1px solid ${tokens.colors.accentBorder}` }}
+                onMouseEnter={(e) => (e.currentTarget.style.background = tokens.colors.accentSurface)}
+                onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}>
+                <td className="py-3 px-4" style={{ color: tokens.colors.textSecondary }}>{row.feature}</td>
+                <td className="py-3 px-4 text-center">{row.oss ? <Check /> : <X />}</td>
+                <td className="py-3 px-4 text-center">{row.seat ? <Check /> : <X />}</td>
+                <td className="py-3 px-4 text-center">{row.app ? <Check /> : <X />}</td>
+                <td className="py-3 px-4 text-center">{row.enterprise ? <Check /> : <X />}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/pricing/CompareTable.tsx
+git commit -m "feat(website): apply glass container to CompareTable"
+```
+
+---
+
+### Task 18: Update LeadForm
+
+**Files:**
+- Modify: `apps/website/src/components/pricing/LeadForm.tsx`
+
+- [ ] **Step 1: Replace LeadForm.tsx with glass container and new colors**
+
+```tsx
+'use client';
+import { useState } from 'react';
+import { tokens } from '../../lib/design-tokens';
+
+export function LeadForm() {
+  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setStatus('sending');
+    const form = e.currentTarget;
+    const data = Object.fromEntries(new FormData(form));
+    try {
+      const res = await fetch('/api/leads', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+      setStatus(res.ok ? 'sent' : 'error');
+    } catch {
+      setStatus('error');
+    }
+  };
+
+  const inputStyle: React.CSSProperties = {
+    background: 'rgba(255, 255, 255, 0.6)',
+    border: `1px solid ${tokens.glass.border}`,
+    color: tokens.colors.textPrimary,
+    borderRadius: '6px',
+    padding: '10px 14px',
+    width: '100%',
+    fontFamily: 'var(--font-inter)',
+    fontSize: '14px',
+    outline: 'none',
+  };
+
+  return (
+    <section id="lead-form" className="px-8 py-16 max-w-xl mx-auto">
+      <p className="font-mono text-xs uppercase tracking-widest mb-8 text-center" style={{ color: tokens.colors.accent }}>Enterprise</p>
+      <h2
+        style={{
+          fontFamily: 'var(--font-garamond)',
+          fontWeight: 700,
+          fontSize: 'clamp(24px, 3vw, 36px)',
+          color: tokens.colors.textPrimary,
+          textAlign: 'center',
+          marginBottom: 32,
+        }}>
+        Need volume seats or a custom contract?
+      </h2>
+      {status === 'sent' ? (
+        <p className="text-center" style={{ color: tokens.colors.textSecondary }}>Thanks &mdash; we&apos;ll be in touch within one business day.</p>
+      ) : (
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4"
+          style={{
+            background: tokens.glass.bg,
+            backdropFilter: `blur(${tokens.glass.blur})`,
+            WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+            border: `1px solid ${tokens.glass.border}`,
+            borderRadius: 12,
+            padding: 24,
+          }}>
+          <input
+            name="name"
+            placeholder="Name"
+            required
+            style={inputStyle}
+            onFocus={(e) => { e.target.style.borderColor = tokens.colors.accent; e.target.style.outline = `2px solid ${tokens.colors.accentGlow}`; e.target.style.outlineOffset = '2px'; }}
+            onBlur={(e) => { e.target.style.borderColor = tokens.glass.border; e.target.style.outline = 'none'; }}
+          />
+          <input
+            name="email"
+            type="email"
+            placeholder="Work email"
+            required
+            style={inputStyle}
+            onFocus={(e) => { e.target.style.borderColor = tokens.colors.accent; e.target.style.outline = `2px solid ${tokens.colors.accentGlow}`; e.target.style.outlineOffset = '2px'; }}
+            onBlur={(e) => { e.target.style.borderColor = tokens.glass.border; e.target.style.outline = 'none'; }}
+          />
+          <input
+            name="company"
+            placeholder="Company"
+            style={inputStyle}
+            onFocus={(e) => { e.target.style.borderColor = tokens.colors.accent; e.target.style.outline = `2px solid ${tokens.colors.accentGlow}`; e.target.style.outlineOffset = '2px'; }}
+            onBlur={(e) => { e.target.style.borderColor = tokens.glass.border; e.target.style.outline = 'none'; }}
+          />
+          <textarea
+            name="message"
+            placeholder="Tell us about your use case"
+            rows={4}
+            style={{ ...inputStyle, resize: 'vertical' }}
+            onFocus={(e) => { e.target.style.borderColor = tokens.colors.accent; e.target.style.outline = `2px solid ${tokens.colors.accentGlow}`; e.target.style.outlineOffset = '2px'; }}
+            onBlur={(e) => { e.target.style.borderColor = tokens.glass.border; e.target.style.outline = 'none'; }}
+          />
+          <button
+            type="submit"
+            disabled={status === 'sending'}
+            style={{
+              background: tokens.colors.accent,
+              color: '#fff',
+              border: 'none',
+              borderRadius: '6px',
+              padding: '12px 24px',
+              fontFamily: 'var(--font-mono)',
+              fontSize: '14px',
+              cursor: status === 'sending' ? 'not-allowed' : 'pointer',
+              opacity: status === 'sending' ? 0.6 : 1,
+              transition: 'box-shadow 0.2s',
+            }}
+            onMouseEnter={(e) => { if (status !== 'sending') e.currentTarget.style.boxShadow = tokens.glow.button; }}
+            onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}>
+            {status === 'sending' ? 'Sending\u2026' : 'Get in touch'}
+          </button>
+          {status === 'error' && (
+            <p className="text-sm text-center" style={{ color: '#FF6B6B' }}>
+              Something went wrong &mdash; try again or email us directly.
+            </p>
+          )}
+        </form>
+      )}
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/pricing/LeadForm.tsx
+git commit -m "feat(website): apply glass treatment to LeadForm"
+```
+
+---
+
+### Task 19: Update Pricing Page Layout
+
+**Files:**
+- Modify: `apps/website/src/app/pricing/page.tsx`
+
+- [ ] **Step 1: Add gradient background and update text colors**
+
+```tsx
+import { PricingGrid } from '../../components/pricing/PricingGrid';
+import { CompareTable } from '../../components/pricing/CompareTable';
+import { LeadForm } from '../../components/pricing/LeadForm';
+
+export default function PricingPage() {
+  return (
+    <div className="pt-24" style={{ background: 'var(--gradient-bg-flow)', minHeight: '100vh' }}>
+      <div className="text-center px-8 py-16">
+        <p className="font-mono text-xs uppercase tracking-widest mb-4" style={{ color: 'var(--color-accent)' }}>Pricing</p>
+        <h1
+          style={{
+            fontFamily: 'var(--font-garamond)',
+            fontWeight: 800,
+            fontSize: 'clamp(40px, 6vw, 80px)',
+            color: 'var(--color-text-primary)',
+          }}>
+          Simple, transparent pricing
+        </h1>
+      </div>
+      <PricingGrid />
+      <CompareTable />
+      <LeadForm />
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/app/pricing/page.tsx
+git commit -m "feat(website): add gradient background to pricing page"
+```
+
+---
+
+### Task 20: Update ApiRefTable
+
+**Files:**
+- Modify: `apps/website/src/components/docs/ApiRefTable.tsx`
+
+- [ ] **Step 1: Replace ApiRefTable.tsx with glass container and new colors**
+
+```tsx
+import { tokens } from '../../lib/design-tokens';
+
+export interface ApiEntry {
+  name: string;
+  type: string;
+  description: string;
+  params?: { name: string; type: string; desc: string }[];
+}
+
+export function ApiRefTable({ entries }: { entries: ApiEntry[] }) {
+  return (
+    <div className="flex flex-col gap-8">
+      {entries.map((entry) => (
+        <div
+          key={entry.name}
+          className="p-6 rounded-lg"
+          style={{
+            border: `1px solid ${tokens.glass.border}`,
+            background: tokens.glass.bg,
+            backdropFilter: `blur(${tokens.glass.blur})`,
+            WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+            boxShadow: tokens.glass.shadow,
+          }}>
+          <div className="flex items-baseline gap-3 mb-2">
+            <code
+              className="font-mono font-bold text-base"
+              style={{ color: tokens.colors.accent }}>
+              {entry.name}
+            </code>
+            <code
+              className="font-mono text-xs"
+              style={{ color: tokens.colors.textSecondary }}>
+              {entry.type}
+            </code>
+          </div>
+          <p className="text-sm mb-4" style={{ color: tokens.colors.textSecondary }}>{entry.description}</p>
+          {entry.params && entry.params.length > 0 && (
+            <table className="w-full text-xs" style={{ borderCollapse: 'collapse' }}>
+              <thead>
+                <tr style={{ borderBottom: `1px solid ${tokens.colors.accentBorder}` }}>
+                  {['Parameter', 'Type', 'Description'].map((h) => (
+                    <th
+                      key={h}
+                      className="text-left py-2 font-mono uppercase"
+                      style={{ color: tokens.colors.textMuted }}>
+                      {h}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {entry.params.map((p) => (
+                  <tr key={p.name} style={{ borderBottom: `1px solid ${tokens.colors.accentBorder}` }}>
+                    <td className="py-2 font-mono" style={{ color: tokens.colors.accent }}>{p.name}</td>
+                    <td className="py-2 font-mono" style={{ color: tokens.colors.textSecondary }}>{p.type}</td>
+                    <td className="py-2" style={{ color: tokens.colors.textSecondary }}>{p.desc}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/docs/ApiRefTable.tsx
+git commit -m "feat(website): apply glass treatment to ApiRefTable"
+```
+
+---
+
+### Task 21: Update API Reference Page Layout
+
+**Files:**
+- Modify: `apps/website/src/app/api-reference/page.tsx`
+
+- [ ] **Step 1: Add gradient background and update text colors**
+
+```tsx
+import { ApiRefTable, type ApiEntry } from '../../components/docs/ApiRefTable';
+
+// Placeholder entries — replaced by generated api-docs.json in Task W9
+const ENTRIES: ApiEntry[] = [
+  {
+    name: 'streamResource()',
+    type: 'function',
+    description: 'Creates a streaming resource connected to a LangGraph agent. Must be called within an Angular injection context.',
+    params: [
+      { name: 'assistantId', type: 'string', desc: 'Agent or graph identifier.' },
+      { name: 'apiUrl', type: 'string', desc: 'LangGraph Platform base URL.' },
+      { name: 'threadId', type: 'Signal<string | null> | string | null', desc: 'Thread to connect to. Pass a signal for reactive updates.' },
+      { name: 'onThreadId', type: '(id: string) => void', desc: 'Called when a new thread is auto-created.' },
+    ],
+  },
+  {
+    name: 'provideStreamResource()',
+    type: 'function',
+    description: 'Angular provider factory. Registers global defaults for apiUrl and transport.',
+    params: [
+      { name: 'config', type: 'StreamResourceConfig', desc: 'Global config merged with per-call options.' },
+    ],
+  },
+];
+
+export default function ApiReferencePage() {
+  return (
+    <div className="pt-24 px-8 py-16 max-w-4xl mx-auto" style={{ background: 'var(--gradient-bg-flow)', minHeight: '100vh' }}>
+      <p className="font-mono text-xs uppercase tracking-widest mb-4" style={{ color: 'var(--color-accent)' }}>API Reference</p>
+      <h1
+        style={{
+          fontFamily: 'var(--font-garamond)',
+          fontWeight: 800,
+          fontSize: 'clamp(32px, 4vw, 56px)',
+          color: 'var(--color-text-primary)',
+          marginBottom: 48,
+        }}>
+        API Reference
+      </h1>
+      <ApiRefTable entries={ENTRIES} />
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/app/api-reference/page.tsx
+git commit -m "feat(website): add gradient background to API reference page"
+```
+
+---
+
+### Task 22: Final Build Verification
+
+- [ ] **Step 1: Run full build**
+
+Run: `npx nx build website --skip-nx-cache 2>&1 | tail -20`
+Expected: Build succeeds with no errors
+
+- [ ] **Step 2: Visual review of all pages**
+
+Open each page in browser and verify:
+- http://localhost:3000 — landing page with gradient, glass nav, glass cards
+- http://localhost:3000/docs — glass sidebar, readable content area
+- http://localhost:3000/pricing — glass pricing cards, glass form
+- http://localhost:3000/api-reference — glass API tables
+
+- [ ] **Step 3: Commit any final fixes if needed**
diff --git a/docs/superpowers/plans/2026-04-03-homepage-expansion.md b/docs/superpowers/plans/2026-04-03-homepage-expansion.md
new file mode 100644
index 000000000..202135a98
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-03-homepage-expansion.md
@@ -0,0 +1,884 @@
+# Homepage Expansion — Rich AI Startup Landing Page
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Expand the homepage from 4 sections to 9 with interactive tabbed value props, capability showcases with code examples for LangGraph and Deep Agents, a cockpit CTA, and a stats strip.
+
+**Architecture:** New sections are React components in `apps/website/src/components/landing/`. Components needing both Shiki code highlighting (server-side async) and interactivity (client-side state) use a server/client split: server component pre-renders code HTML via `codeToHtml()`, passes it as props to a `'use client'` child that handles tabs/toggles. All styling uses `tokens` from `design-tokens.ts` and the glass/gradient system.
+
+**Tech Stack:** Next.js 16, React 19, Shiki (tokyo-night), Framer Motion, design tokens
+
+**Spec:** See approved plan at `/Users/blove/.claude/plans/splendid-munching-platypus.md`
+
+---
+
+### Task 1: Create ValueProps — Interactive Tabbed Section
+
+**Files:**
+- Create: `apps/website/src/components/landing/ValueProps.tsx`
+- Create: `apps/website/src/components/landing/ValuePropsTabs.tsx`
+
+This section shows 3 tabbed value propositions, each with explanation text and a syntax-highlighted code example. The server component (`ValueProps`) renders code via Shiki and passes HTML to the client component (`ValuePropsTabs`) which handles tab switching.
+
+- [ ] **Step 1: Create the client tab switcher component**
+
+Create `apps/website/src/components/landing/ValuePropsTabs.tsx`:
+
+```tsx
+'use client';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { tokens } from '../../../lib/design-tokens';
+
+interface Tab {
+  id: string;
+  label: string;
+  headline: string;
+  description: string;
+  codeHtml: string;
+}
+
+export function ValuePropsTabs({ tabs }: { tabs: Tab[] }) {
+  const [active, setActive] = useState(0);
+
+  return (
+    <div>
+      {/* Tab buttons */}
+      <div className="flex gap-2 mb-8 justify-center flex-wrap">
+        {tabs.map((tab, i) => (
+          <button
+            key={tab.id}
+            onClick={() => setActive(i)}
+            className="px-5 py-2.5 rounded-lg font-mono text-sm transition-all"
+            style={{
+              background: active === i ? tokens.colors.accentSurface : 'transparent',
+              color: active === i ? tokens.colors.accent : tokens.colors.textSecondary,
+              border: `1px solid ${active === i ? tokens.colors.accentBorderHover : 'transparent'}`,
+            }}>
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={tabs[active].id}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -10 }}
+          transition={{ duration: 0.25 }}
+          className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
+
+          {/* Left: explanation */}
+          <div className="p-8 rounded-xl" style={{
+            background: tokens.glass.bg,
+            backdropFilter: `blur(${tokens.glass.blur})`,
+            WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+            border: `1px solid ${tokens.glass.border}`,
+          }}>
+            <h3 style={{
+              fontFamily: 'var(--font-garamond)',
+              fontWeight: 700,
+              fontSize: '1.5rem',
+              color: tokens.colors.textPrimary,
+              marginBottom: 12,
+            }}>{tabs[active].headline}</h3>
+            <p style={{
+              fontSize: '0.95rem',
+              color: tokens.colors.textSecondary,
+              lineHeight: 1.7,
+            }}>{tabs[active].description}</p>
+          </div>
+
+          {/* Right: code */}
+          <div style={{
+            borderRadius: 12,
+            border: `1px solid ${tokens.glass.border}`,
+            boxShadow: tokens.glass.shadow,
+            overflow: 'hidden',
+          }}>
+            <div
+              className="text-sm leading-relaxed"
+              dangerouslySetInnerHTML={{ __html: tabs[active].codeHtml }}
+            />
+          </div>
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Create the server component that renders code and wraps tabs**
+
+Create `apps/website/src/components/landing/ValueProps.tsx`:
+
+```tsx
+import { codeToHtml } from 'shiki';
+import { tokens } from '../../../lib/design-tokens';
+import { ValuePropsTabs } from './ValuePropsTabs';
+
+const TAB_DATA = [
+  {
+    id: 'reactive',
+    label: 'Reactive by Default',
+    headline: 'Every State Slice is a Signal',
+    description: 'streamResource() exposes messages, status, error, and threadId as Angular Signals. Compose them with computed(), bind them in templates, and let OnPush change detection handle the rest. No manual subscriptions. No RxJS boilerplate.',
+    code: `// chat.component.ts
+const chat = streamResource<ChatState>({
+  assistantId: 'agent',
+});
+
+// Every property is a Signal
+const messages = chat.messages();   // Signal<BaseMessage[]>
+const status = chat.status();       // Signal<'idle' | 'streaming'>
+const error = chat.error();         // Signal<Error | null>
+
+// Reactive composition
+const lastMessage = computed(() =>
+  chat.messages().at(-1)?.content ?? ''
+);`,
+    lang: 'typescript' as const,
+  },
+  {
+    id: 'agents',
+    label: 'Built for Agents',
+    headline: 'Full Agent Lifecycle Support',
+    description: 'Handle interrupts for human-in-the-loop approval, process tool calls, navigate branch history, and manage subagent delegation. Every LangGraph agent pattern has a first-class Angular API — no React translation layer needed.',
+    code: `// approval.component.ts
+const agent = streamResource<AgentState>({
+  assistantId: 'approval_agent',
+  onInterrupt: (interrupt) => {
+    // Agent paused — surface to user
+    this.pendingApproval.set(interrupt);
+  },
+});
+
+// Resume after human decision
+approve() {
+  agent.submit({ resume: { approved: true } });
+}
+
+// Access full branch history
+const branches = agent.history();`,
+    lang: 'typescript' as const,
+  },
+  {
+    id: 'testing',
+    label: 'Test Everything',
+    headline: 'Deterministic Agent Testing',
+    description: 'MockStreamTransport lets you script exact event sequences and step through them in your specs. No flaky SSE connections, no timing issues, no running LangGraph server. Test agent behavior the same way you test any Angular service.',
+    code: `// chat.component.spec.ts
+const transport = new MockStreamTransport();
+
+transport.script([
+  { type: 'values', data: { messages: [aiMsg('Hello')] } },
+  { type: 'values', data: { status: 'done' } },
+]);
+
+const chat = streamResource<ChatState>({
+  transport,
+  assistantId: 'test_agent',
+});
+
+expect(chat.messages()).toEqual([aiMsg('Hello')]);
+expect(chat.status()).toBe('done');`,
+    lang: 'typescript' as const,
+  },
+];
+
+export async function ValueProps() {
+  const tabs = await Promise.all(
+    TAB_DATA.map(async (tab) => ({
+      id: tab.id,
+      label: tab.label,
+      headline: tab.headline,
+      description: tab.description,
+      codeHtml: await codeToHtml(tab.code, { lang: tab.lang, theme: 'tokyo-night' }),
+    })),
+  );
+
+  return (
+    <section className="px-8 py-20 max-w-6xl mx-auto">
+      <p className="font-mono text-xs uppercase tracking-widest mb-4 text-center"
+        style={{ color: tokens.colors.accent }}>Why streamResource()?</p>
+      <h2 style={{
+        fontFamily: 'var(--font-garamond)',
+        fontWeight: 800,
+        fontSize: 'clamp(28px, 3.5vw, 48px)',
+        color: tokens.colors.textPrimary,
+        textAlign: 'center',
+        marginBottom: 8,
+      }}>Full parity with React <code style={{
+        fontFamily: 'var(--font-mono)',
+        fontSize: '0.85em',
+        background: tokens.colors.accentSurface,
+        color: tokens.colors.accent,
+        padding: '2px 8px',
+        borderRadius: 6,
+      }}>useStream()</code></h2>
+      <p className="text-center mb-12" style={{ color: tokens.colors.textSecondary, maxWidth: '50ch', margin: '0 auto 48px' }}>
+        Built natively for Angular 20+. No wrappers, no adapters, no compromises.
+      </p>
+      <ValuePropsTabs tabs={tabs} />
+    </section>
+  );
+}
+```
+
+- [ ] **Step 3: Verify it compiles**
+
+Run: `npx nx build website --skip-nx-cache 2>&1 | tail -10`
+Expected: No import errors for ValueProps or ValuePropsTabs
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/src/components/landing/ValueProps.tsx apps/website/src/components/landing/ValuePropsTabs.tsx
+git commit -m "feat(website): add interactive tabbed ValueProps section"
+```
+
+---
+
+### Task 2: Create LangGraphShowcase — Capability Cards with Code
+
+**Files:**
+- Create: `apps/website/src/components/landing/LangGraphShowcase.tsx`
+- Create: `apps/website/src/components/landing/CapabilityCard.tsx`
+
+A 2-column grid of capability cards, each showing a LangGraph feature with a small code snippet. The `CapabilityCard` is a reusable client component (used by both LangGraph and Deep Agents showcases). The `LangGraphShowcase` is a server component that renders code via Shiki.
+
+- [ ] **Step 1: Create the reusable CapabilityCard client component**
+
+Create `apps/website/src/components/landing/CapabilityCard.tsx`:
+
+```tsx
+'use client';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { tokens } from '../../../lib/design-tokens';
+
+interface Props {
+  icon: string;
+  title: string;
+  description: string;
+  codeHtml: string;
+  tint: 'blue' | 'red';
+  cockpitHref?: string;
+  index: number;
+}
+
+export function CapabilityCard({ icon, title, description, codeHtml, tint, cockpitHref, index }: Props) {
+  const [expanded, setExpanded] = useState(false);
+  const borderColor = tint === 'blue' ? 'rgba(0, 64, 144, 0.2)' : 'rgba(221, 0, 49, 0.2)';
+  const hoverBorder = tint === 'blue' ? 'rgba(0, 64, 144, 0.4)' : 'rgba(221, 0, 49, 0.4)';
+  const hoverGlow = tint === 'blue' ? '0 0 24px rgba(0,64,144,0.1)' : '0 0 24px rgba(221,0,49,0.1)';
+
+  return (
+    <motion.div
+      className="rounded-xl overflow-hidden"
+      style={{
+        border: `1px solid ${borderColor}`,
+        background: tokens.glass.bg,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+        WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+      }}
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ delay: index * 0.1, duration: 0.4 }}
+      whileHover={{ borderColor: hoverBorder, boxShadow: hoverGlow }}>
+
+      <div className="p-6">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-3">
+            <span style={{ fontSize: '1.25rem' }} aria-hidden="true">{icon}</span>
+            <h3 style={{
+              fontFamily: 'var(--font-garamond)',
+              fontWeight: 700,
+              fontSize: '1.1rem',
+              color: tokens.colors.textPrimary,
+            }}>{title}</h3>
+          </div>
+        </div>
+        <p style={{ fontSize: '0.875rem', color: tokens.colors.textSecondary, lineHeight: 1.6, marginBottom: 12 }}>
+          {description}
+        </p>
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="font-mono text-xs transition-colors"
+          style={{ color: tokens.colors.accent }}>
+          {expanded ? '▾ Hide code' : '▸ Show code'}
+        </button>
+        {cockpitHref && (
+          <a href={cockpitHref} className="font-mono text-xs ml-4 transition-colors" style={{ color: tokens.colors.textMuted }}>
+            View in Cockpit →
+          </a>
+        )}
+      </div>
+
+      {expanded && (
+        <div style={{ borderTop: `1px solid ${borderColor}` }}>
+          <div
+            className="text-sm leading-relaxed"
+            dangerouslySetInnerHTML={{ __html: codeHtml }}
+          />
+        </div>
+      )}
+    </motion.div>
+  );
+}
+```
+
+- [ ] **Step 2: Create the LangGraphShowcase server component**
+
+Create `apps/website/src/components/landing/LangGraphShowcase.tsx`:
+
+```tsx
+import { codeToHtml } from 'shiki';
+import { tokens } from '../../../lib/design-tokens';
+import { CapabilityCard } from './CapabilityCard';
+
+const CAPABILITIES = [
+  {
+    icon: '⚡',
+    title: 'Streaming',
+    description: 'Surface intermediate progress while the graph runs. Token-by-token updates arrive via SSE and land directly in Angular Signals.',
+    code: `// Token-by-token streaming
+const chat = streamResource<ChatState>({
+  assistantId: 'chat_agent',
+});
+
+// Tokens arrive in real-time
+@for (msg of chat.messages(); track $index) {
+  <p [class.streaming]="$last">
+    {{ msg.content }}
+  </p>
+}`,
+    lang: 'typescript' as const,
+  },
+  {
+    icon: '💾',
+    title: 'Persistence',
+    description: 'Execution state survives retries and resumptions. Thread-based checkpoint recovery means users never lose their conversation.',
+    code: `// Thread persistence across sessions
+const chat = streamResource<ChatState>({
+  assistantId: 'agent',
+  threadId: signal(localStorage.getItem('tid')),
+  onThreadId: (id) => {
+    localStorage.setItem('tid', id);
+  },
+});`,
+    lang: 'typescript' as const,
+  },
+  {
+    icon: '✋',
+    title: 'Interrupts',
+    description: 'Pause execution for human decisions — approvals, confirmations, corrections. Resume without losing any context or state.',
+    code: `// Human-in-the-loop approval
+const agent = streamResource<AgentState>({
+  assistantId: 'approval_agent',
+  onInterrupt: (data) => {
+    this.approval.set(data);
+  },
+});
+
+// User approves → resume
+agent.submit({ resume: { approved: true } });`,
+    lang: 'typescript' as const,
+  },
+  {
+    icon: '⏪',
+    title: 'Time Travel',
+    description: 'Inspect earlier states and replay alternate execution paths. Debug agent decisions by stepping through the full state history.',
+    code: `// Browse execution history
+const history = agent.history();
+
+// Fork from a previous state
+agent.submit({
+  checkpoint: history[2].checkpoint,
+  messages: [{ role: 'user', content: 'Try again' }],
+});`,
+    lang: 'typescript' as const,
+  },
+];
+
+export async function LangGraphShowcase() {
+  const cards = await Promise.all(
+    CAPABILITIES.map(async (cap) => ({
+      ...cap,
+      codeHtml: await codeToHtml(cap.code, { lang: cap.lang, theme: 'tokyo-night' }),
+    })),
+  );
+
+  return (
+    <section className="px-8 py-20 max-w-6xl mx-auto">
+      <p className="font-mono text-xs uppercase tracking-widest mb-4 text-center"
+        style={{ color: tokens.colors.accent }}>LangGraph Capabilities</p>
+      <h2 style={{
+        fontFamily: 'var(--font-garamond)',
+        fontWeight: 800,
+        fontSize: 'clamp(28px, 3.5vw, 48px)',
+        color: tokens.colors.textPrimary,
+        textAlign: 'center',
+        marginBottom: 48,
+      }}>Every LangGraph feature, natively in Angular</h2>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {cards.map((card, i) => (
+          <CapabilityCard
+            key={card.title}
+            icon={card.icon}
+            title={card.title}
+            description={card.description}
+            codeHtml={card.codeHtml}
+            tint="blue"
+            index={i}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/components/landing/CapabilityCard.tsx apps/website/src/components/landing/LangGraphShowcase.tsx
+git commit -m "feat(website): add LangGraph capability showcase with code examples"
+```
+
+---
+
+### Task 3: Create DeepAgentsShowcase — Capability Cards with Code
+
+**Files:**
+- Create: `apps/website/src/components/landing/DeepAgentsShowcase.tsx`
+
+Uses the same `CapabilityCard` component from Task 2 but with red tint for the Angular/Deep Agents side.
+
+- [ ] **Step 1: Create the DeepAgentsShowcase server component**
+
+Create `apps/website/src/components/landing/DeepAgentsShowcase.tsx`:
+
+```tsx
+import { codeToHtml } from 'shiki';
+import { tokens } from '../../../lib/design-tokens';
+import { CapabilityCard } from './CapabilityCard';
+
+const CAPABILITIES = [
+  {
+    icon: '📋',
+    title: 'Planning',
+    description: 'Turn high-level goals into ordered action sequences with explicit constraints and checkpoints. The agent chooses next steps grounded in real context.',
+    code: `// Agent plans and executes steps
+const planner = streamResource<PlanState>({
+  assistantId: 'planning_agent',
+});
+
+// Stream plan steps as they're created
+@for (step of planner.messages(); track $index) {
+  <div [class.complete]="step.status === 'done'">
+    {{ step.content }}
+  </div>
+}`,
+    lang: 'typescript' as const,
+  },
+  {
+    icon: '🔀',
+    title: 'Subagents',
+    description: 'Split complex tasks into focused workers with clear ownership boundaries. Each subagent handles a specialized piece and reports back.',
+    code: `// Orchestrator delegates to subagents
+const orchestrator = streamResource<OrchestratorState>({
+  assistantId: 'orchestrator',
+});
+
+// Track subagent progress
+const activeWorkers = computed(() =>
+  orchestrator.messages()
+    .filter(m => m.type === 'subagent_start')
+    .length
+);`,
+    lang: 'typescript' as const,
+  },
+  {
+    icon: '🧩',
+    title: 'Skills',
+    description: 'Package repeatable agent behavior into focused, reusable instruction sets. Skills define scope, response format, and operational boundaries.',
+    code: `// Agent uses a skill for code review
+const reviewer = streamResource<ReviewState>({
+  assistantId: 'code_review_skill',
+  input: {
+    files: changedFiles(),
+    guidelines: teamStandards,
+  },
+});
+
+// Structured skill output
+const issues = reviewer.messages()
+  .filter(m => m.type === 'issue');`,
+    lang: 'typescript' as const,
+  },
+  {
+    icon: '🧠',
+    title: 'Memory',
+    description: 'Retain useful intermediate context across agent turns without leaking irrelevant history. Memory shapes routing and improves response quality over time.',
+    code: `// Agent with persistent memory
+const agent = streamResource<MemoryState>({
+  assistantId: 'memory_agent',
+  threadId: signal(userId()),
+});
+
+// Memory persists across conversations
+// Agent recalls user preferences,
+// past decisions, and project context
+agent.submit({
+  messages: [{ role: 'user', content: query }],
+});`,
+    lang: 'typescript' as const,
+  },
+];
+
+export async function DeepAgentsShowcase() {
+  const cards = await Promise.all(
+    CAPABILITIES.map(async (cap) => ({
+      ...cap,
+      codeHtml: await codeToHtml(cap.code, { lang: cap.lang, theme: 'tokyo-night' }),
+    })),
+  );
+
+  return (
+    <section className="px-8 py-20 max-w-6xl mx-auto">
+      <p className="font-mono text-xs uppercase tracking-widest mb-4 text-center"
+        style={{ color: tokens.colors.angularRed }}>Deep Agents Capabilities</p>
+      <h2 style={{
+        fontFamily: 'var(--font-garamond)',
+        fontWeight: 800,
+        fontSize: 'clamp(28px, 3.5vw, 48px)',
+        color: tokens.colors.textPrimary,
+        textAlign: 'center',
+        marginBottom: 48,
+      }}>Multi-step agent workflows with explicit control</h2>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {cards.map((card, i) => (
+          <CapabilityCard
+            key={card.title}
+            icon={card.icon}
+            title={card.title}
+            description={card.description}
+            codeHtml={card.codeHtml}
+            tint="red"
+            index={i}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/DeepAgentsShowcase.tsx
+git commit -m "feat(website): add Deep Agents capability showcase with code examples"
+```
+
+---
+
+### Task 4: Create CockpitCTA — Call to Action Section
+
+**Files:**
+- Create: `apps/website/src/components/landing/CockpitCTA.tsx`
+
+A `'use client'` component with a large glass panel showing a wireframe mockup of the cockpit and two CTA buttons.
+
+- [ ] **Step 1: Create the CockpitCTA component**
+
+Create `apps/website/src/components/landing/CockpitCTA.tsx`:
+
+```tsx
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '../../../lib/design-tokens';
+
+export function CockpitCTA() {
+  return (
+    <section className="px-8 py-20 max-w-5xl mx-auto">
+      <motion.div
+        className="rounded-2xl p-10 md:p-14"
+        style={{
+          background: tokens.glass.bg,
+          backdropFilter: `blur(${tokens.glass.blur})`,
+          WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+          border: `1px solid ${tokens.glass.border}`,
+          boxShadow: tokens.glass.shadow,
+        }}
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}>
+
+        <p className="font-mono text-xs uppercase tracking-widest mb-4 text-center"
+          style={{ color: tokens.colors.accent }}>Interactive Reference</p>
+        <h2 style={{
+          fontFamily: 'var(--font-garamond)',
+          fontWeight: 800,
+          fontSize: 'clamp(28px, 3.5vw, 48px)',
+          color: tokens.colors.textPrimary,
+          textAlign: 'center',
+          marginBottom: 12,
+        }}>Explore the Cockpit</h2>
+        <p className="text-center mb-10" style={{ color: tokens.colors.textSecondary, maxWidth: '55ch', margin: '0 auto 40px', lineHeight: 1.6 }}>
+          Interactive reference implementations for every capability. Run examples, inspect source code, and read guided documentation — all in one place.
+        </p>
+
+        {/* Cockpit wireframe mockup */}
+        <div className="rounded-xl overflow-hidden mb-10" style={{
+          border: `1px solid ${tokens.colors.accentBorder}`,
+          background: '#080B14',
+        }}>
+          {/* Mock toolbar */}
+          <div style={{
+            padding: '8px 14px',
+            borderBottom: '1px solid rgba(255,255,255,0.08)',
+            display: 'flex', alignItems: 'center', gap: 12,
+          }}>
+            <div style={{ display: 'flex', gap: 6 }}>
+              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#FF5F57' }} />
+              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#FEBC2E' }} />
+              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#28C840' }} />
+            </div>
+            <div style={{ display: 'flex', gap: 2 }}>
+              {['Run', 'Code', 'Docs'].map((tab, i) => (
+                <span key={tab} style={{
+                  padding: '3px 12px', borderRadius: 4,
+                  fontFamily: 'var(--font-mono)', fontSize: 10,
+                  color: i === 0 ? '#6C8EFF' : '#4A527A',
+                  background: i === 0 ? 'rgba(108,142,255,0.12)' : 'transparent',
+                }}>{tab}</span>
+              ))}
+            </div>
+          </div>
+          {/* Mock content */}
+          <div style={{ display: 'flex', minHeight: 140 }}>
+            {/* Sidebar */}
+            <div style={{ width: 160, borderRight: '1px solid rgba(255,255,255,0.06)', padding: '10px 8px' }}>
+              {['LangGraph', 'Streaming', 'Persistence', 'Interrupts'].map((item, i) => (
+                <div key={item} style={{
+                  padding: '4px 8px', borderRadius: 4, marginBottom: 2,
+                  fontFamily: 'var(--font-mono)', fontSize: 9,
+                  color: i === 1 ? '#6C8EFF' : '#4A527A',
+                  background: i === 1 ? 'rgba(108,142,255,0.08)' : 'transparent',
+                }}>{item}</div>
+              ))}
+            </div>
+            {/* Main area */}
+            <div style={{ flex: 1, padding: 14 }}>
+              <div style={{ fontFamily: 'var(--font-garamond)', fontSize: 14, fontWeight: 700, color: '#EEF1FF', marginBottom: 8 }}>
+                LangGraph Streaming
+              </div>
+              <div style={{ display: 'flex', gap: 8 }}>
+                {[1, 2, 3].map(n => (
+                  <div key={n} style={{ flex: 1, height: 40, borderRadius: 4, background: 'rgba(108,142,255,0.04)', border: '1px solid rgba(108,142,255,0.08)' }} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div className="flex justify-center gap-8 mb-10 flex-wrap">
+          {[
+            { value: '14+', label: 'Capabilities' },
+            { value: '2', label: 'Products' },
+            { value: '3', label: 'View Modes' },
+          ].map(s => (
+            <div key={s.label} className="text-center">
+              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 24, fontWeight: 700, color: tokens.colors.accent }}>{s.value}</div>
+              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: tokens.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{s.label}</div>
+            </div>
+          ))}
+        </div>
+
+        {/* CTAs */}
+        <div className="flex justify-center gap-4 flex-wrap">
+          <a href="/docs" className="px-6 py-3 rounded-lg font-mono text-sm transition-all"
+            style={{ background: tokens.colors.accent, color: '#fff', textDecoration: 'none' }}
+            onMouseEnter={(e) => (e.currentTarget.style.boxShadow = tokens.glow.button)}
+            onMouseLeave={(e) => (e.currentTarget.style.boxShadow = 'none')}>
+            Launch Cockpit
+          </a>
+          <a href="/docs" className="px-6 py-3 rounded-lg font-mono text-sm transition-all"
+            style={{ border: `1px solid ${tokens.colors.accent}`, color: tokens.colors.accent, textDecoration: 'none' }}>
+            Read Docs
+          </a>
+        </div>
+      </motion.div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/CockpitCTA.tsx
+git commit -m "feat(website): add CockpitCTA section with mockup and CTAs"
+```
+
+---
+
+### Task 5: Create StatsStrip — Social Proof Numbers
+
+**Files:**
+- Create: `apps/website/src/components/landing/StatsStrip.tsx`
+
+A horizontal strip of key stats in glass containers.
+
+- [ ] **Step 1: Create the StatsStrip component**
+
+Create `apps/website/src/components/landing/StatsStrip.tsx`:
+
+```tsx
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '../../../lib/design-tokens';
+
+const STATS = [
+  { value: '14+', label: 'Capabilities' },
+  { value: '100%', label: 'useStream() Parity' },
+  { value: '20+', label: 'Angular Version' },
+  { value: 'OSS', label: 'Source Available' },
+];
+
+export function StatsStrip() {
+  return (
+    <section className="px-8 py-16 max-w-5xl mx-auto">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {STATS.map((stat, i) => (
+          <motion.div
+            key={stat.label}
+            className="text-center py-8 rounded-xl"
+            style={{
+              background: tokens.glass.bg,
+              backdropFilter: `blur(${tokens.glass.blur})`,
+              WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+              border: `1px solid ${tokens.glass.border}`,
+            }}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: i * 0.1, duration: 0.4 }}>
+            <div style={{
+              fontFamily: 'var(--font-mono)',
+              fontSize: 'clamp(28px, 3vw, 40px)',
+              fontWeight: 700,
+              color: tokens.colors.accent,
+              marginBottom: 4,
+            }}>{stat.value}</div>
+            <div style={{
+              fontFamily: 'var(--font-garamond)',
+              fontSize: '0.9rem',
+              color: tokens.colors.textSecondary,
+            }}>{stat.label}</div>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/StatsStrip.tsx
+git commit -m "feat(website): add StatsStrip social proof section"
+```
+
+---
+
+### Task 6: Wire Up All New Sections in page.tsx
+
+**Files:**
+- Modify: `apps/website/src/app/page.tsx`
+
+- [ ] **Step 1: Update page.tsx with all new sections and additional gradient blobs**
+
+```tsx
+import { HeroTwoCol } from '../components/landing/HeroTwoCol';
+import { ArchDiagram } from '../components/landing/ArchDiagram';
+import { ValueProps } from '../components/landing/ValueProps';
+import { LangGraphShowcase } from '../components/landing/LangGraphShowcase';
+import { DeepAgentsShowcase } from '../components/landing/DeepAgentsShowcase';
+import { FeatureStrip } from '../components/landing/FeatureStrip';
+import { CodeBlock } from '../components/landing/CodeBlock';
+import { CockpitCTA } from '../components/landing/CockpitCTA';
+import { StatsStrip } from '../components/landing/StatsStrip';
+import { tokens } from '../../lib/design-tokens';
+
+export default async function HomePage() {
+  return (
+    <div style={{ background: tokens.gradient.bgFlow, position: 'relative', overflow: 'hidden' }}>
+      {/* Ambient gradient blobs */}
+      <div style={{ position: 'absolute', width: 600, height: 600, borderRadius: '50%', background: tokens.gradient.warm, top: -200, left: -150, filter: 'blur(80px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, top: 800, right: -100, filter: 'blur(80px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: tokens.gradient.warm, top: 2000, left: -100, filter: 'blur(80px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, top: 3500, right: -150, filter: 'blur(80px)', pointerEvents: 'none' }} />
+      <div style={{ position: 'absolute', width: 350, height: 350, borderRadius: '50%', background: tokens.gradient.coolLight, top: 5000, left: '30%', filter: 'blur(70px)', pointerEvents: 'none' }} />
+
+      <HeroTwoCol />
+      <ArchDiagram />
+      <ValueProps />
+      <LangGraphShowcase />
+      <DeepAgentsShowcase />
+      <FeatureStrip />
+      <CodeBlock />
+      <CockpitCTA />
+      <StatsStrip />
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Verify in browser**
+
+Open http://localhost:3000 and scroll through the full page. Verify all 9 sections render without errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/app/page.tsx
+git commit -m "feat(website): wire up all new homepage sections"
+```
+
+---
+
+### Task 7: Visual Review and Final Fixes
+
+- [ ] **Step 1: Full page scroll verification**
+
+Open http://localhost:3000 and verify:
+- Hero with agent animation
+- Architecture diagram (two-row)
+- ValueProps tabs work (click each tab, see code + explanation)
+- LangGraph showcase cards (4 cards, blue tint, code expand/collapse)
+- Deep Agents showcase cards (4 cards, red tint, code expand/collapse)
+- Feature strip (6 glass cards)
+- Code block (30-second example)
+- Cockpit CTA (mockup + buttons)
+- Stats strip (4 glass stat boxes)
+- Gradient blobs flow naturally throughout
+
+- [ ] **Step 2: Fix any issues found**
+
+- [ ] **Step 3: Final commit if fixes needed**
+
+```bash
+git add -A
+git commit -m "fix(website): polish homepage section layout and spacing"
+```
diff --git a/docs/superpowers/specs/2026-04-03-api-reference-autogen-design.md b/docs/superpowers/specs/2026-04-03-api-reference-autogen-design.md
new file mode 100644
index 000000000..4d15c1eb8
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-03-api-reference-autogen-design.md
@@ -0,0 +1,110 @@
+# Autogenerated API Reference Design
+
+**Date:** 2026-04-03
+**Scope:** JSDoc annotations + TypeDoc pipeline + API docs rendering in website docs
+
+## Overview
+
+Replace the hardcoded API reference placeholder with a fully autogenerated API reference built from JSDoc annotations in the library source. The TypeDoc script (already exists) extracts structured JSON, and new docs pages render it with the same glass card design. Runs as part of CI so docs stay in sync with code.
+
+## Design Decisions
+
+| Decision | Choice |
+|----------|--------|
+| Extraction tool | TypeDoc (existing script enhanced) |
+| JSDoc coverage | All public API symbols |
+| Output format | `api-docs.json` in `content/docs-v2/api/` |
+| Rendering | Server component reading JSON at build time |
+| Old `/api-reference` page | Removed (already done) |
+| Nav link | Points to `/docs/api/stream-resource` (already done) |
+| CI integration | `generate-api-docs` step before `nx build website` |
+
+## JSDoc Coverage
+
+Add JSDoc to every public symbol in `libs/stream-resource/src/`:
+
+| File | Symbols to Document |
+|------|-------------------|
+| `stream-resource.fn.ts` | `streamResource()` function |
+| `stream-resource.provider.ts` | `provideStreamResource()`, `StreamResourceConfig` |
+| `stream-resource.types.ts` | `StreamResourceOptions`, `StreamResourceRef`, `StreamEvent`, `SubagentStreamRef` |
+| `transport/fetch-stream.transport.ts` | `FetchStreamTransport` class, constructor, methods |
+| `transport/mock-stream.transport.ts` | `MockStreamTransport` class, `script()`, `step()`, `reset()` |
+
+Each symbol gets: one-line summary, `@param` for parameters, `@returns`, `@example`.
+
+## TypeDoc Pipeline
+
+**Script:** `apps/website/scripts/generate-api-docs.ts` (enhance existing)
+
+**Input:** `libs/stream-resource/src/public-api.ts`
+
+**Output:** `apps/website/content/docs-v2/api/api-docs.json`
+
+**JSON shape:**
+```typescript
+interface ApiDocEntry {
+  name: string;
+  kind: 'function' | 'class' | 'interface' | 'type';
+  description: string;
+  signature?: string;
+  params?: { name: string; type: string; description: string; optional?: boolean; default?: string }[];
+  returns?: { type: string; description: string };
+  examples?: string[];
+  properties?: { name: string; type: string; description: string; optional?: boolean }[];
+  methods?: { name: string; signature: string; description: string; params?: ApiDocEntry['params']; returns?: ApiDocEntry['returns'] }[];
+}
+```
+
+## Rendering
+
+**Component:** `apps/website/src/components/docs/ApiDocRenderer.tsx`
+
+Server component that reads `api-docs.json` and renders each entry as a glass card with:
+- Function/class name in monospace accent color
+- Kind badge (function/class/interface)
+- Description
+- Signature in dark code block
+- Parameters table
+- Return type
+- Code examples in dark blocks
+- Properties table (for interfaces)
+- Methods section (for classes)
+
+Same visual design as the current `ApiRefTable` component but with richer content from TypeDoc.
+
+**Pages:** 4 MDX files in `content/docs-v2/api/` that import and render from the JSON:
+- `stream-resource.mdx`
+- `provide-stream-resource.mdx`
+- `fetch-stream-transport.mdx`
+- `mock-stream-transport.mdx`
+
+## CI Integration
+
+Add `npm run generate-api-docs` before the website build step in `.github/workflows/ci.yml`. The generated JSON is committed to the repo (not gitignored) so local dev works without running the script.
+
+## Files to Create/Modify
+
+**Create:**
+- `apps/website/src/components/docs/ApiDocRenderer.tsx` — rendering component
+
+**Modify:**
+- `libs/stream-resource/src/lib/stream-resource.fn.ts` — add JSDoc
+- `libs/stream-resource/src/lib/stream-resource.provider.ts` — add JSDoc
+- `libs/stream-resource/src/lib/stream-resource.types.ts` — add JSDoc
+- `libs/stream-resource/src/lib/transport/fetch-stream.transport.ts` — add JSDoc
+- `libs/stream-resource/src/lib/transport/mock-stream.transport.ts` — add JSDoc
+- `apps/website/scripts/generate-api-docs.ts` — enhance output format
+- `apps/website/content/docs-v2/api/stream-resource.mdx` — replace placeholder
+- `apps/website/content/docs-v2/api/provide-stream-resource.mdx` — new
+- `apps/website/content/docs-v2/api/fetch-stream-transport.mdx` — new
+- `apps/website/content/docs-v2/api/mock-stream-transport.mdx` — new
+- `.github/workflows/ci.yml` — add generate-api-docs step
+
+## Verification
+
+- Run `npm run generate-api-docs` — verify `api-docs.json` is generated with all entries
+- Open http://localhost:3000/docs/api/stream-resource — verify rich API docs render
+- Navigate through all 4 API pages — verify content matches JSDoc
+- Run `npx nx build website` — verify build passes
+- Modify a JSDoc comment, re-run script — verify JSON updates
diff --git a/docs/superpowers/specs/2026-04-03-docs-refresh-design.md b/docs/superpowers/specs/2026-04-03-docs-refresh-design.md
new file mode 100644
index 000000000..7420918ae
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-03-docs-refresh-design.md
@@ -0,0 +1,279 @@
+# Docs Refresh — Mintlify-Inspired Custom Build
+
+**Date:** 2026-04-03
+**Scope:** Website docs system (`apps/website`) — full restructure
+**Approach:** Mintlify-inspired custom build within existing Next.js app
+
+## Overview
+
+Replace the cockpit-manifest-driven docs system (74 pages, 5-segment slugs) with a focused, Diataxis-structured documentation site. 19 purposeful pages covering streamResource() usage with every LangGraph and Deep Agents capability. Mintlify-inspired UI with custom MDX components, Cmd+K search, collapsible sidebar, and glass design treatment.
+
+**Audience:** Both Angular developers learning agents AND AI/agent developers learning Angular — with separate entry points.
+
+**Content scope:** Full product docs — streamResource usage AND LangGraph/Deep Agents concepts. Self-contained, users don't need to leave the site.
+
+## Design Decisions
+
+| Decision | Choice |
+|----------|--------|
+| Architecture | Custom build in existing Next.js app |
+| Content structure | Diataxis (Getting Started, Guides, Concepts, API Reference) |
+| Routing | `/docs/[section]/[slug]` (2-segment, simplified from 5) |
+| MDX components | Callout, Steps, Tabs, CodeGroup, Card/CardGroup |
+| Search | Client-side fuzzy search via Cmd+K modal |
+| Cockpit dependency | Removed — standalone docs system |
+| Page count | 19 pages (from 74) |
+| Design system | Glass treatment matching website redesign |
+
+## Layout
+
+### Sidebar (left, 256px, glass treatment)
+
+- **Cmd+K search bar** at top — glass panel with keyboard shortcut badge
+- **4 collapsible section groups** with headers:
+  - Getting Started (blue accent header)
+  - Guides (blue accent header)
+  - Concepts (red accent header — Angular-focused)
+  - API Reference (blue accent header)
+- Active page: `accentSurface` background + `accent` text
+- Sticky positioning, scrollable independently
+- Glass treatment: `glass.bg`, `glass.blur`, `glass.border`
+- Border-right separating from content
+
+### Content Area (right, flex-1, white background)
+
+- **Breadcrumb** trail: Section > Page title
+- **Page title** in Garamond serif, large
+- **MDX content** rendered with custom components
+- **Prev/Next navigation** at bottom — glass cards with page titles
+- Background: `rgba(255, 255, 255, 0.85)` for readability
+- Max-width prose container
+
+### Responsive
+
+- **Desktop (1024px+):** Fixed sidebar + scrollable content
+- **Tablet (768px-1023px):** Narrower sidebar (200px)
+- **Mobile (<768px):** Sidebar collapses to drawer, hamburger toggle in docs header
+
+## MDX Components
+
+### Callout
+Styled alert box with left border accent. Types: `info`, `warning`, `tip`, `danger`.
+
+```mdx
+<Callout type="info" title="Prerequisites">
+  Angular 20+ and Node.js 18+ required.
+</Callout>
+```
+
+Rendering:
+- Left border: 3px solid, color varies by type (info=accent, warning=amber, tip=green, danger=red)
+- Background: type-tinted glass (e.g., `rgba(0,64,144,0.04)` for info)
+- Title in bold, body text below
+- Rounded corners, padding 12px 16px
+
+### Steps
+Numbered sequential instructions with accent-colored step circles.
+
+```mdx
+<Steps>
+  <Step title="Install the package">
+    Content with code blocks, etc.
+  </Step>
+  <Step title="Configure the provider">
+    More content here.
+  </Step>
+</Steps>
+```
+
+Rendering:
+- Left vertical line connecting steps (accent at 20% opacity)
+- Step number in accent-colored circle (20px, white text)
+- Title bold, content below with standard prose styling
+- Each step separated by 16px gap
+
+### Tabs
+Tabbed content switcher for multi-file/multi-language examples.
+
+```mdx
+<Tabs items={['TypeScript', 'Template', 'Test']}>
+  <Tab>TypeScript content</Tab>
+  <Tab>Template content</Tab>
+  <Tab>Test content</Tab>
+</Tabs>
+```
+
+Rendering:
+- Tab bar with bottom border, active tab has 2px accent bottom border
+- Active tab: accent text, others: textMuted
+- Content area below with smooth transition
+- 'use client' component for state
+
+### CodeGroup
+Multiple code blocks displayed as tabs with filename headers.
+
+```mdx
+<CodeGroup>
+  ```typescript title="chat.component.ts"
+  code here
+  ```
+  ```html title="chat.component.html"
+  code here
+  ```
+</CodeGroup>
+```
+
+Rendering:
+- Tab bar with filenames
+- Dark code block (tokyo-night) below
+- Glass border on container
+- Copy button on each block
+
+### Card / CardGroup
+Navigation cards for linking to related pages.
+
+```mdx
+<CardGroup cols={2}>
+  <Card title="Streaming" href="/docs/guides/streaming" icon="⚡">
+    Description text
+  </Card>
+</CardGroup>
+```
+
+Rendering:
+- Glass card with icon, title, description
+- Hover glow effect
+- Click navigates to href
+- Grid layout: 1 col mobile, `cols` on desktop
+
+## Search (Cmd+K)
+
+### Build-time Index
+- Script extracts title, headings, first 200 chars from each MDX file
+- Outputs `public/docs-search-index.json` (~5KB for 19 pages)
+- Runs as part of the build process
+
+### Runtime
+- `'use client'` modal component
+- Opens on Cmd+K (or Ctrl+K on Windows)
+- Text input with fuzzy matching against index
+- Results show: page title, section badge, content preview snippet
+- Arrow keys navigate, Enter selects, Escape closes
+- Glass-styled modal with backdrop blur overlay
+
+## Content Structure
+
+### Getting Started (3 pages)
+
+| Slug | Title | Content |
+|------|-------|---------|
+| `introduction` | Introduction | What is StreamResource, dual audience (Angular devs & AI devs), key value props, what you'll build |
+| `quickstart` | Quick Start | 5-minute end-to-end: install → configure → build chat component → run. Uses CardGroup to link to next steps. |
+| `installation` | Installation | npm install, provideStreamResource() config, environment variables, Angular version matrix, LangGraph Cloud setup |
+
+### Guides (8 pages)
+
+| Slug | Title | Content |
+|------|-------|---------|
+| `streaming` | Streaming | Token-by-token streaming, stream modes, SSE transport, status signal, messages signal, error handling. Code examples showing Angular template bindings. |
+| `persistence` | Persistence | Thread persistence, threadId signal, onThreadId callback, localStorage pattern, checkpoint recovery, session resumption. |
+| `interrupts` | Interrupts | Human-in-the-loop, onInterrupt handler, resume with user input, approval UI component pattern, multi-step approval. |
+| `memory` | Memory | Short-term (thread-scoped conversation), long-term (cross-session), memory store, namespace-based storage, semantic search. |
+| `time-travel` | Time Travel | History browsing via history(), forking from checkpoints, replay, debugging agent decisions, branch selection UI. |
+| `subgraphs` | Subgraphs | Modular agent composition, orchestrator pattern, subagent delegation, tracking subagent progress, multi-graph state. |
+| `testing` | Testing | MockStreamTransport, scripting events, stepping through sequences, Angular TestBed integration, deterministic specs. |
+| `deployment` | Deployment | Production config, LangGraph Cloud setup, environment variables, error boundaries, retry patterns, health checks. |
+
+### Concepts (4 pages)
+
+| Slug | Title | Content |
+|------|-------|---------|
+| `angular-signals` | Angular Signals | How streamResource maps to Signals, OnPush change detection, computed(), effect(), Signal-based templates, comparison with RxJS. |
+| `langgraph-basics` | LangGraph Basics | Graphs, nodes, edges, state, checkpoints explained for Angular developers. Graph API vs Functional API. When to use each. |
+| `agent-architecture` | Agent Architecture | How agents work: planning → tool calling → state machine → control flow. Agent lifecycle, the role of streamResource in the loop. |
+| `state-management` | State Management | State design, reducers, MessagesState, thread state vs application state, state serialization, checkpoint structure. |
+
+### API Reference (4 pages)
+
+| Slug | Title | Content |
+|------|-------|---------|
+| `stream-resource` | streamResource() | Full function signature, all options (assistantId, threadId, onThreadId, onInterrupt, transport, etc.), return type, all signals, all methods (submit, history, etc.). |
+| `provide-stream-resource` | provideStreamResource() | Provider factory, StreamResourceConfig interface, global defaults, per-call overrides. |
+| `fetch-stream-transport` | FetchStreamTransport | Constructor, connect/disconnect, SSE handling, error events, retry behavior, custom headers. |
+| `mock-stream-transport` | MockStreamTransport | Constructor, script() method, step() method, reset(), event types, testing patterns. |
+
+## Files to Create/Modify
+
+### New Files
+
+**MDX Components** (in `apps/website/src/components/docs/mdx/`):
+- `Callout.tsx` — Alert/info boxes
+- `Steps.tsx` — Numbered step instructions
+- `Tabs.tsx` — Tabbed content switcher ('use client')
+- `CodeGroup.tsx` — Multi-file code block tabs
+- `Card.tsx` — Navigation card + CardGroup grid
+
+**Docs Infrastructure:**
+- `apps/website/src/components/docs/DocsSidebarNew.tsx` — New collapsible sidebar with sections
+- `apps/website/src/components/docs/DocsSearch.tsx` — Cmd+K search modal ('use client')
+- `apps/website/src/components/docs/DocsBreadcrumb.tsx` — Breadcrumb trail
+- `apps/website/src/components/docs/DocsPrevNext.tsx` — Previous/Next page navigation
+- `apps/website/src/components/docs/DocsLayout.tsx` — Docs page wrapper with sidebar + content + responsive drawer
+- `apps/website/src/lib/docs-config.ts` — Sidebar navigation tree definition (sections, pages, order)
+- `apps/website/src/lib/docs-new.ts` — New docs loading utility (replaces cockpit-dependent `docs.ts`)
+- `apps/website/scripts/build-search-index.ts` — Build-time search index generator
+
+**Content** (in `apps/website/content/docs-v2/`):
+- `getting-started/introduction.mdx`
+- `getting-started/quickstart.mdx`
+- `getting-started/installation.mdx`
+- `guides/streaming.mdx`
+- `guides/persistence.mdx`
+- `guides/interrupts.mdx`
+- `guides/memory.mdx`
+- `guides/time-travel.mdx`
+- `guides/subgraphs.mdx`
+- `guides/testing.mdx`
+- `guides/deployment.mdx`
+- `concepts/angular-signals.mdx`
+- `concepts/langgraph-basics.mdx`
+- `concepts/agent-architecture.mdx`
+- `concepts/state-management.mdx`
+- `api/stream-resource.mdx`
+- `api/provide-stream-resource.mdx`
+- `api/fetch-stream-transport.mdx`
+- `api/mock-stream-transport.mdx`
+
+### Modified Files
+
+- `apps/website/src/app/docs/[[...slug]]/page.tsx` — New routing + layout
+- `apps/website/src/components/docs/MdxRenderer.tsx` — Register custom MDX components
+- `apps/website/src/app/layout.tsx` — May need docs-specific layout adjustments
+
+### Removed Dependencies
+
+- Remove cockpit-manifest-based routing from docs
+- Remove `open-in-cockpit.tsx` from docs pages
+- Keep `apps/website/src/lib/docs.ts` as fallback but primary loading moves to `docs-new.ts`
+
+## Implementation Strategy
+
+This decomposes into 4 independent work streams that can be parallelized:
+
+1. **Docs infrastructure** — New sidebar, search, breadcrumbs, prev/next, routing, layout, docs-config
+2. **MDX components** — Callout, Steps, Tabs, CodeGroup, Card/CardGroup
+3. **Content authoring** — Write all 19 MDX pages with real code examples
+4. **Wiring + integration** — Connect everything, update page.tsx, register MDX components, build search index
+
+Streams 1-3 can run in parallel. Stream 4 depends on all three.
+
+## Verification
+
+- Open http://localhost:3000/docs — verify new sidebar renders with all 4 sections
+- Click through all 19 pages — verify content renders with MDX components
+- Test Cmd+K search — verify modal opens, fuzzy matching works, navigation works
+- Test Tabs component — click tabs, verify content switches
+- Expand code in CodeGroup — verify syntax highlighting
+- Check mobile at 375px — verify sidebar drawer works
+- Verify prev/next navigation links at bottom of each page
+- Verify breadcrumbs show correct section > page
diff --git a/docs/superpowers/specs/2026-04-03-glassy-gradient-redesign.md b/docs/superpowers/specs/2026-04-03-glassy-gradient-redesign.md
new file mode 100644
index 000000000..8f08aeca5
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-03-glassy-gradient-redesign.md
@@ -0,0 +1,223 @@
+# Glassy & Gradient Website Redesign
+
+**Date**: 2026-04-03
+**Scope**: Website app (`apps/website`) — all pages
+**Future alignment**: Cockpit app will adopt the same token system later
+
+## Overview
+
+Refactor the StreamResource website from a dark navy solid-background design to a light, frosted-glass aesthetic with dual-brand ambient gradients. The design communicates the "bridge between Angular and LangGraph" through a warm→cool gradient flow (Angular red → LangGraph blue) with translucent glass panels floating on top.
+
+## Design Decisions
+
+| Decision | Choice |
+|----------|--------|
+| Base palette | Light frosted (white/cream `#f8f9fc`) |
+| Brand colors | Angular red `#DD0031` + LangGraph blue `#004090` / `#64C3FD` |
+| Gradient style | Warm→cool flow (red top-left → lavender midpoint → blue bottom-right) |
+| Brand prominence | Dual-brand gradient — red and blue define the ambient background |
+| Glass intensity | Balanced (14-16px blur, 40-50% white opacity, subtle borders) |
+| Approach | Token-first: update design tokens, then sweep components |
+| Scope | All pages: landing, nav/footer, docs, pricing, API reference |
+
+## Design Tokens
+
+### Palette Replacement
+
+| Token | Current | New |
+|-------|---------|-----|
+| `bg` | `#080B14` | `#f8f9fc` |
+| `accent` | `#6C8EFF` | `#004090` (LangGraph blue) |
+| `accentLight` | n/a (new) | `#64C3FD` (LangGraph sky) |
+| `angularRed` | `#DD0031` | `#DD0031` (unchanged) |
+| `textPrimary` | `#EEF1FF` | `#1a1a2e` (dark ink) |
+| `textSecondary` | `#8B96C8` | `#555770` (warm gray) |
+| `textMuted` | `#4A527A` | `#8b8fa3` |
+| `sidebarBg` | `#0A0D18` | `rgba(255,255,255,0.45)` (glass) |
+
+### New Glass Tokens
+
+| Token | Value | Purpose |
+|-------|-------|---------|
+| `glass.bg` | `rgba(255,255,255,0.45)` | Default glass panel fill |
+| `glass.bgHover` | `rgba(255,255,255,0.55)` | Glass on hover |
+| `glass.blur` | `16px` | Backdrop blur amount |
+| `glass.border` | `rgba(255,255,255,0.6)` | Subtle white edge |
+| `glass.shadow` | `0 4px 24px rgba(0,0,0,0.06)` | Soft diffuse shadow |
+
+### New Gradient Tokens
+
+| Token | Value |
+|-------|-------|
+| `gradient.warm` | `radial-gradient(circle, rgba(221,0,49,0.18), transparent 70%)` |
+| `gradient.cool` | `radial-gradient(circle, rgba(0,64,144,0.18), transparent 70%)` |
+| `gradient.coolLight` | `radial-gradient(circle, rgba(100,195,253,0.15), transparent 70%)` |
+| `gradient.bgFlow` | `linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%)` |
+
+### Updated Glow Tokens
+
+| Token | New Value |
+|-------|-----------|
+| `glow.hero` | `0 0 60px rgba(0,64,144,0.15)` |
+| `glow.demo` | `0 0 30px rgba(0,64,144,0.1)` |
+| `glow.card` | `0 0 24px rgba(0,64,144,0.1)` |
+| `glow.border` | `0 0 12px rgba(0,64,144,0.08)` |
+| `glow.button` | `0 0 16px rgba(0,64,144,0.15)` |
+
+### Accent Variant Tokens
+
+| Token | New Value |
+|-------|-----------|
+| `accentGlow` | `rgba(0,64,144,0.2)` |
+| `accentBorder` | `rgba(0,64,144,0.15)` |
+| `accentBorderHover` | `rgba(0,64,144,0.3)` |
+| `accentSurface` | `rgba(0,64,144,0.06)` |
+
+## Component Specifications
+
+### Nav (`components/shared/Nav.tsx`)
+
+- Background: `glass.bg` with `glass.blur` backdrop-filter
+- Border: `glass.border` bottom edge (1px)
+- Shadow: `glass.shadow`
+- Logo text: `textPrimary` (dark ink)
+- Nav links: `textSecondary`, hover → `accent`
+- CTA button: solid `accent` background, white text, `glow.button` on hover
+- Position: fixed, z-index above gradient blobs
+
+### Footer (`components/shared/Footer.tsx`)
+
+- Background: slightly more opaque glass `rgba(255,255,255,0.55)`
+- Border-top: `glass.border`
+- Text: dark-ink palette
+- Link hover: `accent` blue
+- Gradient flow continues behind (no hard color break)
+
+### Install Strip (`components/shared/InstallStrip.tsx`)
+
+- Container: glass panel (`glass.bg`, `glass.blur`, `glass.border`)
+- Text: `textPrimary`
+- Copy button: glass with accent border, hover → `glass.bgHover`
+
+### Landing Page — Hero (`components/landing/HeroTwoCol.tsx`)
+
+- Full-width `gradient.bgFlow` background
+- Angular warm blob (`gradient.warm`) top-left
+- LangGraph cool blob (`gradient.cool`) bottom-right
+- LangGraph light blob (`gradient.coolLight`) center-right
+- Badge tags: brand-colored glass (tinted translucent bg + brand borders)
+- Headline: `textPrimary`, italic serif (EB Garamond unchanged)
+- Subtitle: `textSecondary`
+- Copy prompt button: glass panel with accent border
+- Install strip: glass panel
+
+### Landing Page — Architecture Diagram (`components/landing/ArchDiagram.tsx`)
+
+- SVG nodes: glass fills `rgba(255,255,255,0.5)` with subtle stroke
+- Edge lines: `accent` and `angularRed` at ~40% opacity
+- Animated particles: softer glow for light background
+- No separate container background — sits on gradient flow
+
+### Landing Page — Feature Grid (`components/landing/FeatureStrip.tsx`)
+
+- Cards: `glass.bg`, `glass.blur`, `glass.border`
+- Hover: `glass.bgHover` + `glow.card`
+- Icons/headings: `textPrimary`
+- Descriptions: `textSecondary`
+- Framer Motion entrance animations unchanged
+
+### Landing Page — Code Block (`components/landing/CodeBlock.tsx`)
+
+- Code theme: stays dark (tokyo-night via Shiki) — standard pattern for light sites
+- Container: glass-bordered frame with `glass.border` and `glass.shadow`
+- Tab headers: glass treatment
+
+### Landing Page — Live Demo (`components/landing/GenerativeUIFrame.tsx`)
+
+- Browser chrome: stays dark (simulating app window — intentional contrast)
+- Outer frame: `glass.border` and `glass.shadow` to float it
+
+### Docs — Sidebar (`components/docs/DocsSidebar.tsx`)
+
+- Background: `glass.bg` with `glass.blur`
+- Border-right: `glass.border`
+- Active link: `accent` color with `accentSurface` background
+- Section headers: `textPrimary`
+- Links: `textSecondary`, hover → `accent`
+
+### Docs — Content (`components/docs/MdxRenderer.tsx`)
+
+- Background: `#ffffff` or `rgba(255,255,255,0.8)` — no glass (readability first)
+- Prose styles: dark-ink text colors
+- Code blocks within docs: stay dark themed
+- Gradient visible in page background behind sidebar and margins
+
+### Pricing — Cards (`components/pricing/PricingGrid.tsx`)
+
+- Each card: glass panel treatment
+- Featured card: more opaque glass with `accent` border glow
+- Plan names: `textPrimary`
+- Prices: `accent` blue
+- Feature lists: `textSecondary`
+- CTA buttons: solid `accent` (primary), glass + accent border (secondary)
+
+### Pricing — Comparison Table (`components/pricing/CompareTable.tsx`)
+
+- Container: glass panel
+- Header row: slightly stronger glass `rgba(255,255,255,0.55)`
+- Alternating rows: subtle opacity difference
+- Check marks: `accent` blue
+
+### Pricing — Lead Form (`components/pricing/LeadForm.tsx`)
+
+- Container: glass panel
+- Input fields: `rgba(255,255,255,0.6)` background with `glass.border`
+- Submit button: solid `accent`
+
+### API Reference (`components/docs/ApiRefTable.tsx`)
+
+- Container: glass panel (same treatment as comparison table)
+- Function signatures: monospace, dark ink
+- Parameter types: `accent` blue
+- Table borders: `glass.border`
+
+## Global Styles (`src/app/global.css`)
+
+- CSS custom properties updated to match all token values above
+- New `@layer` or utility classes for glass treatment:
+  - `.glass` — applies bg, blur, border, shadow
+  - `.glass-hover` — hover state variant
+- Gradient blob positioning classes for reuse across pages
+- Body background: `bg` token (`#f8f9fc`)
+
+## Implementation Strategy
+
+1. **Update `design-tokens.ts`** — new palette, glass, gradient, glow tokens
+2. **Update `global.css`** — CSS custom properties + glass utility classes
+3. **Parallel component sweep** — dispatch subagents per area:
+   - Agent 1: Nav + Footer
+   - Agent 2: Landing page (Hero, ArchDiagram, FeatureStrip, CodeBlock, GenerativeUIFrame)
+   - Agent 3: Docs (Sidebar, MdxRenderer)
+   - Agent 4: Pricing (PricingGrid, CompareTable, LeadForm)
+   - Agent 5: API Reference (ApiRefTable)
+4. **Visual review** — verify each page in browser preview
+
+## Files Modified
+
+- `apps/website/lib/design-tokens.ts`
+- `apps/website/src/app/global.css`
+- `apps/website/src/app/layout.tsx` (if body class changes needed)
+- `apps/website/src/components/shared/Nav.tsx`
+- `apps/website/src/components/shared/Footer.tsx`
+- `apps/website/src/components/shared/InstallStrip.tsx`
+- `apps/website/src/components/landing/HeroTwoCol.tsx`
+- `apps/website/src/components/landing/ArchDiagram.tsx`
+- `apps/website/src/components/landing/FeatureStrip.tsx`
+- `apps/website/src/components/landing/CodeBlock.tsx`
+- `apps/website/src/components/landing/GenerativeUIFrame.tsx`
+- `apps/website/src/components/docs/DocsSidebar.tsx`
+- `apps/website/src/components/docs/MdxRenderer.tsx`
+- `apps/website/src/components/docs/ApiRefTable.tsx`
+- `apps/website/src/components/pricing/PricingGrid.tsx`
+- `apps/website/src/components/pricing/CompareTable.tsx`
+- `apps/website/src/components/pricing/LeadForm.tsx`