- }
-
-
- `,
+ template: ``,
})
export class TimeTravelComponent {
- /**
- * The streaming resource with checkpointing enabled.
- *
- * `stream.history()` provides an array of ThreadState snapshots for
- * the current thread. `stream.branch()` tracks the active checkpoint.
- * Call `stream.setBranch(checkpointId)` to replay from a past state.
- */
protected readonly stream = streamResource({
apiUrl: environment.langGraphApiUrl,
assistantId: environment.streamingAssistantId,
});
-
- /**
- * Submit a message to the current thread.
- */
- send(text: string): void {
- this.stream.submit({ messages: [{ role: 'human', content: text }] });
- }
-
- /**
- * Branch the conversation from the selected checkpoint.
- * After calling setBranch, the next submit will fork from that point.
- */
- selectCheckpoint(state: { checkpoint_id?: string }): void {
- if (state.checkpoint_id) {
- this.stream.setBranch(state.checkpoint_id);
- }
- }
-
- /**
- * Format a checkpoint for display in the sidebar.
- */
- formatCheckpoint(state: { checkpoint_id?: string; created_at?: string }): string {
- const id = state.checkpoint_id ?? 'unknown';
- const short = id.substring(0, 8);
- if (state.created_at) {
- const ts = new Date(state.created_at).toLocaleTimeString();
- return `${short}... @ ${ts}`;
- }
- return `${short}...`;
- }
}
diff --git a/cockpit/langgraph/time-travel/angular/src/environments/environment.development.ts b/cockpit/langgraph/time-travel/angular/src/environments/environment.development.ts
index 4fb57585f..c53e973f9 100644
--- a/cockpit/langgraph/time-travel/angular/src/environments/environment.development.ts
+++ b/cockpit/langgraph/time-travel/angular/src/environments/environment.development.ts
@@ -6,6 +6,6 @@
*/
export const environment = {
production: false,
- langGraphApiUrl: 'http://localhost:4306/api',
+ langGraphApiUrl: '/api',
streamingAssistantId: 'time-travel',
};
diff --git a/cockpit/langgraph/time-travel/angular/src/index.html b/cockpit/langgraph/time-travel/angular/src/index.html
index 870877931..1c99aad7e 100644
--- a/cockpit/langgraph/time-travel/angular/src/index.html
+++ b/cockpit/langgraph/time-travel/angular/src/index.html
@@ -2,11 +2,12 @@
- Time Travel - LangGraph Angular Example
+ LangGraph Time Travel β Angular
+
-
+
diff --git a/cockpit/langgraph/time-travel/angular/src/main.ts b/cockpit/langgraph/time-travel/angular/src/main.ts
index 266196d27..336b5e7a4 100644
--- a/cockpit/langgraph/time-travel/angular/src/main.ts
+++ b/cockpit/langgraph/time-travel/angular/src/main.ts
@@ -1,6 +1,6 @@
// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app.config';
-import { TimeTravelAppComponent } from './app.component';
+import { appConfig } from './app/app.config';
+import { TimeTravelComponent } from './app/time-travel.component';
-bootstrapApplication(TimeTravelAppComponent, appConfig).catch(console.error);
+bootstrapApplication(TimeTravelComponent, appConfig).catch(console.error);
diff --git a/cockpit/langgraph/time-travel/angular/tsconfig.app.json b/cockpit/langgraph/time-travel/angular/tsconfig.app.json
index 5d05a9e61..64731b107 100644
--- a/cockpit/langgraph/time-travel/angular/tsconfig.app.json
+++ b/cockpit/langgraph/time-travel/angular/tsconfig.app.json
@@ -2,7 +2,9 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../../dist/out-tsc",
- "types": []
+ "lib": ["es2022", "dom"],
+ "types": [],
+ "emitDeclarationOnly": false
},
"files": ["src/main.ts"],
"include": ["src/**/*.ts"]
diff --git a/docs/superpowers/plans/2026-04-05-cockpit-examples-chat-integration.md b/docs/superpowers/plans/2026-04-05-cockpit-examples-chat-integration.md
new file mode 100644
index 000000000..40cef68c5
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-05-cockpit-examples-chat-integration.md
@@ -0,0 +1,326 @@
+# Cockpit Angular Examples β Chat Integration 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:** Wire all 13 remaining cockpit Angular examples to correctly consume `@cacheplane/chat`, making each a buildable standalone Angular app.
+
+**Architecture:** Each example follows the streaming reference pattern: standalone Angular app with `bootstrapApplication()`, `provideStreamResource()` + `provideChat()`, Angular CLI build/serve targets, proxy to LangGraph backend. LangGraph examples use ``, deep-agents examples use ``.
+
+**Tech Stack:** Angular 21, `@cacheplane/chat`, `@cacheplane/stream-resource`, `@angular-devkit/build-angular`
+
+**Spec:** `docs/superpowers/specs/2026-04-05-cockpit-examples-chat-integration.md`
+
+---
+
+## Reference Pattern
+
+The streaming example (`cockpit/langgraph/streaming/angular/`) is the proven pattern. Each of the 13 remaining examples gets the same treatment.
+
+### Files changed per example:
+1. **Delete** `src/app.component.ts` (duplicate)
+2. **Delete** `src/app.config.ts` (duplicate at root level)
+3. **Rewrite** `src/app/{capability}.component.ts` β use `` or ``
+4. **Rewrite** `src/app/app.config.ts` β `provideStreamResource` + `provideChat`
+5. **Rewrite** `src/main.ts` β bootstrap correct component
+6. **Rewrite** `project.json` β `@angular-devkit/build-angular:application` + `dev-server`
+7. **Update** `tsconfig.app.json` β add `lib`, `emitDeclarationOnly`
+8. **Update** `src/index.html` β add ``
+9. **Update** `src/environments/environment.development.ts` β use `/api` proxy path
+
+---
+
+### Task 1: LangGraph Examples (7 examples)
+
+**Examples:** persistence, interrupts, memory, time-travel, subgraphs, durable-execution, deployment-runtime
+
+Each LangGraph example component uses `` as the template. The component creates `streamResource()` with the capability-specific `assistantId`.
+
+**Configuration per example:**
+
+| Example | Selector | AssistantId | Port | Proxy Target |
+|---|---|---|---|---|
+| persistence | `app-persistence` | `persistence` | 4301 | localhost:8124 |
+| interrupts | `app-interrupts` | `interrupts` | 4302 | localhost:8125 |
+| memory | `app-memory` | `memory` | 4303 | localhost:8126 |
+| time-travel | `app-time-travel` | `time-travel` | 4304 | localhost:8127 |
+| subgraphs | `app-subgraphs` | `subgraphs` | 4305 | localhost:8128 |
+| durable-execution | `app-durable-execution` | `durable-execution` | 4306 | localhost:8129 |
+| deployment-runtime | `app-deployment-runtime` | `deployment-runtime` | 4307 | localhost:8130 |
+
+**For each example, apply these changes:**
+
+- [ ] **Step 1: Delete duplicate files**
+
+```bash
+rm cockpit/langgraph/{topic}/angular/src/app.component.ts
+rm cockpit/langgraph/{topic}/angular/src/app.config.ts
+```
+
+- [ ] **Step 2: Rewrite capability component**
+
+Each component follows this template (replace `{Topic}`, `{topic}`, `{selector}`):
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component } from '@angular/core';
+import { ChatComponent } from '@cacheplane/chat';
+import { streamResource } from '@cacheplane/stream-resource';
+import { environment } from '../environments/environment';
+
+@Component({
+ selector: '{selector}',
+ standalone: true,
+ imports: [ChatComponent],
+ template: ``,
+})
+export class {Topic}Component {
+ protected readonly stream = streamResource({
+ apiUrl: environment.langGraphApiUrl,
+ assistantId: environment.{topic}AssistantId,
+ });
+}
+```
+
+Where each example uses its existing environment config keys (e.g., `environment.persistenceAssistantId`). Check what the existing environment file exports and match it.
+
+- [ ] **Step 3: Rewrite app.config.ts**
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { ApplicationConfig } from '@angular/core';
+import { provideStreamResource } from '@cacheplane/stream-resource';
+import { provideChat } from '@cacheplane/chat';
+import { environment } from '../environments/environment';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideStreamResource({ apiUrl: environment.langGraphApiUrl }),
+ provideChat({}),
+ ],
+};
+```
+
+- [ ] **Step 4: Rewrite main.ts**
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { {Topic}Component } from './app/{topic}.component';
+
+bootstrapApplication({Topic}Component, appConfig).catch(console.error);
+```
+
+- [ ] **Step 5: Rewrite project.json**
+
+Replace with Angular CLI application pattern. Use the correct project name, paths, port, and smoke test values for each example. Pattern:
+
+```json
+{
+ "name": "cockpit-langgraph-{topic}-angular",
+ "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+ "sourceRoot": "cockpit/langgraph/{topic}/angular/src",
+ "projectType": "application",
+ "targets": {
+ "build": {
+ "executor": "@angular-devkit/build-angular:application",
+ "outputs": ["{options.outputPath}"],
+ "options": {
+ "outputPath": "dist/cockpit/langgraph/{topic}/angular",
+ "index": "cockpit/langgraph/{topic}/angular/src/index.html",
+ "browser": "cockpit/langgraph/{topic}/angular/src/main.ts",
+ "tsConfig": "cockpit/langgraph/{topic}/angular/tsconfig.app.json",
+ "styles": ["cockpit/langgraph/{topic}/angular/src/styles.css"]
+ },
+ "configurations": {
+ "production": { "outputHashing": "all" },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true,
+ "fileReplacements": [{
+ "replace": "cockpit/langgraph/{topic}/angular/src/environments/environment.ts",
+ "with": "cockpit/langgraph/{topic}/angular/src/environments/environment.development.ts"
+ }]
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "executor": "@angular-devkit/build-angular:dev-server",
+ "options": {
+ "port": {port},
+ "proxyConfig": "cockpit/langgraph/{topic}/angular/proxy.conf.json"
+ },
+ "configurations": {
+ "production": { "buildTarget": "cockpit-langgraph-{topic}-angular:build:production" },
+ "development": { "buildTarget": "cockpit-langgraph-{topic}-angular:build:development" }
+ },
+ "defaultConfiguration": "development"
+ },
+ "smoke": { ... existing smoke target ... }
+ }
+}
+```
+
+- [ ] **Step 6: Update tsconfig.app.json**
+
+Ensure it has:
+```json
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../../../dist/out-tsc",
+ "lib": ["es2022", "dom"],
+ "types": [],
+ "emitDeclarationOnly": false
+ },
+ "files": ["src/main.ts"],
+ "include": ["src/**/*.ts"]
+}
+```
+
+- [ ] **Step 7: Update index.html**
+
+Add `` and correct body classes:
+```html
+
+
+
+
+ LangGraph {Topic} β Angular
+
+
+
+
+
+ <{selector}>
+
+
+```
+
+- [ ] **Step 8: Update environment.development.ts**
+
+Ensure it uses `/api` proxy (not full URL):
+```typescript
+export const environment = {
+ production: false,
+ langGraphApiUrl: '/api',
+ {topic}AssistantId: '{topic}',
+};
+```
+
+- [ ] **Step 9: Update proxy.conf.json target port**
+
+Each example's proxy should point to its backend port:
+```json
+{ "/api": { "target": "http://localhost:{backendPort}", "secure": false, "changeOrigin": true, "pathRewrite": { "^/api": "" }, "ws": true } }
+```
+
+- [ ] **Step 10: Build all 7 examples**
+
+```bash
+npx nx build cockpit-langgraph-persistence-angular
+npx nx build cockpit-langgraph-interrupts-angular
+npx nx build cockpit-langgraph-memory-angular
+npx nx build cockpit-langgraph-time-travel-angular
+npx nx build cockpit-langgraph-subgraphs-angular
+npx nx build cockpit-langgraph-durable-execution-angular
+npx nx build cockpit-langgraph-deployment-runtime-angular
+```
+
+Fix any build errors.
+
+- [ ] **Step 11: Commit**
+
+```bash
+git add cockpit/langgraph/
+git commit -m "feat(cockpit): wire 7 LangGraph Angular examples to @cacheplane/chat"
+```
+
+---
+
+### Task 2: Deep Agents Examples (6 examples)
+
+**Examples:** planning, filesystem, subagents, memory, skills, sandboxes
+
+Each deep-agents example uses `` instead of ``.
+
+**Configuration per example:**
+
+| Example | Selector | AssistantId | Port | Proxy Target |
+|---|---|---|---|---|
+| planning | `app-planning` | `planning` | 4310 | localhost:8140 |
+| filesystem | `app-filesystem` | `filesystem` | 4311 | localhost:8141 |
+| subagents | `app-subagents` | `subagents` | 4312 | localhost:8142 |
+| memory | `app-da-memory` | `memory` | 4313 | localhost:8143 |
+| skills | `app-skills` | `skills` | 4314 | localhost:8144 |
+| sandboxes | `app-sandboxes` | `sandboxes` | 4315 | localhost:8145 |
+
+**Same steps as Task 1, except:**
+
+- Component imports `ChatDebugComponent` instead of `ChatComponent`
+- Template uses ``
+- `app.config.ts` also includes `provideRender({})` from `@cacheplane/render`
+- `$schema` path is 6 levels deep: `../../../../../../node_modules/nx/schemas/project-schema.json`
+- All paths use `cockpit/deep-agents/{topic}/angular/` instead of `cockpit/langgraph/{topic}/angular/`
+- Project names: `cockpit-deep-agents-{topic}-angular`
+
+Component template:
+```typescript
+import { ChatDebugComponent } from '@cacheplane/chat';
+// ...
+template: ``,
+```
+
+- [ ] **Steps 1-9: Same as Task 1** but for deep-agents paths and ChatDebugComponent
+
+- [ ] **Step 10: Build all 6 examples**
+
+```bash
+npx nx build cockpit-deep-agents-planning-angular
+npx nx build cockpit-deep-agents-filesystem-angular
+npx nx build cockpit-deep-agents-subagents-angular
+npx nx build cockpit-deep-agents-memory-angular
+npx nx build cockpit-deep-agents-skills-angular
+npx nx build cockpit-deep-agents-sandboxes-angular
+```
+
+- [ ] **Step 11: Commit**
+
+```bash
+git add cockpit/deep-agents/
+git commit -m "feat(cockpit): wire 6 Deep Agents Angular examples to @cacheplane/chat"
+```
+
+---
+
+### Task 3: Full Verification
+
+- [ ] **Step 1: Run library tests**
+
+```bash
+npx nx test render && npx nx test chat && npx nx test stream-resource
+```
+
+Expected: All pass.
+
+- [ ] **Step 2: Build all 14 examples (including streaming)**
+
+```bash
+npx nx run-many -t build --projects='cockpit-*-angular'
+```
+
+Expected: All 14 build.
+
+- [ ] **Step 3: Commit any fixes**
+
+---
+
+## Summary
+
+| Task | Description | Examples |
+|------|-------------|---------|
+| 1 | LangGraph examples β `` | 7 examples |
+| 2 | Deep Agents examples β `` | 6 examples |
+| 3 | Full verification | All 14 |
diff --git a/docs/superpowers/specs/2026-04-05-cockpit-examples-chat-integration.md b/docs/superpowers/specs/2026-04-05-cockpit-examples-chat-integration.md
new file mode 100644
index 000000000..1495b1c03
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-05-cockpit-examples-chat-integration.md
@@ -0,0 +1,75 @@
+# Cockpit Angular Examples β Chat Integration (Phase 1)
+
+**Date:** 2026-04-05
+**Status:** Draft
+**Scope:** Wire all 13 remaining cockpit Angular examples to correctly consume `@cacheplane/chat`, make each buildable and serveable as a standalone Angular app.
+
+---
+
+## Overview
+
+Apply the streaming example's proven pattern to all 13 remaining cockpit Angular examples. Each becomes a standalone Angular app with correct `@cacheplane/chat` API usage, Angular CLI build/serve targets, and proxy configuration to its LangGraph backend.
+
+Phase 2 (separate spec) will customize each example with capability-specific content, docs, and backend integration.
+
+## Pattern (from streaming example)
+
+Each example gets:
+1. Delete duplicate `src/app.component.ts` + `src/app.config.ts`
+2. Rewrite capability component: `` (or `` for deep-agents)
+3. `app.config.ts` with `provideStreamResource` + `provideChat`
+4. `main.ts` bootstrapping the capability component
+5. `project.json` with `@angular-devkit/build-angular:application` build + `dev-server` serve
+6. `tsconfig.app.json` with `lib: ["es2022", "dom"]` + `emitDeclarationOnly: false`
+7. `index.html` with `` and correct selector
+8. Development environment using `/api` proxy
+
+## Capability β Chat Component Mapping
+
+| Example | Selector | Chat Component | Capability-Specific Additions |
+|---|---|---|---|
+| persistence | `app-persistence` | `` | `[threads]`, `[activeThreadId]`, `(threadSelected)` inputs for thread management |
+| interrupts | `app-interrupts` | `` | `ChatInterruptPanelComponent` rendered when `stream.interrupt()` is defined |
+| memory | `app-memory` | `` | `[threads]` for cross-thread state |
+| time-travel | `app-time-travel` | `` | `ChatTimelineSliderComponent` for checkpoint navigation |
+| subgraphs | `app-subgraphs` | `` | `ChatSubagentCardComponent` for nested agent tracking |
+| durable-execution | `app-durable-execution` | `` | Error/retry patterns via `stream.error()` + `stream.reload()` |
+| deployment-runtime | `app-deployment-runtime` | `` | Production config (different assistant ID) |
+| planning | `app-planning` | `` | Full debug composition |
+| filesystem | `app-filesystem` | `` | Full debug composition |
+| subagents (DA) | `app-subagents` | `` | Full debug composition |
+| memory (DA) | `app-da-memory` | `` | Full debug composition |
+| skills | `app-skills` | `` | Full debug composition |
+| sandboxes | `app-sandboxes` | `` | Full debug composition |
+
+## Port Assignment
+
+| Example | Port | Proxy Target |
+|---|---|---|
+| streaming | 4300 | localhost:8123 |
+| persistence | 4301 | localhost:8124 |
+| interrupts | 4302 | localhost:8125 |
+| memory | 4303 | localhost:8126 |
+| time-travel | 4304 | localhost:8127 |
+| subgraphs | 4305 | localhost:8128 |
+| durable-execution | 4306 | localhost:8129 |
+| deployment-runtime | 4307 | localhost:8130 |
+| planning | 4310 | localhost:8140 |
+| filesystem | 4311 | localhost:8141 |
+| subagents (DA) | 4312 | localhost:8142 |
+| memory (DA) | 4313 | localhost:8143 |
+| skills | 4314 | localhost:8144 |
+| sandboxes | 4315 | localhost:8145 |
+
+## Files Changed Per Example (7 files each)
+
+For each of the 13 examples:
+- Delete: `src/app.component.ts`, `src/app.config.ts` (root duplicates)
+- Rewrite: `src/app/{capability}.component.ts`
+- Rewrite: `src/app/app.config.ts`
+- Rewrite: `src/main.ts`
+- Rewrite: `project.json`
+- Update: `tsconfig.app.json`
+- Update: `src/index.html`
+- Update: `src/environments/environment.development.ts`
+- Add: `proxy.conf.json` (if missing)
diff --git a/docs/superpowers/specs/2026-04-05-narrative-redesign.md b/docs/superpowers/specs/2026-04-05-narrative-redesign.md
new file mode 100644
index 000000000..b0e5990e6
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-05-narrative-redesign.md
@@ -0,0 +1,255 @@
+# Narrative Redesign β Implementation Spec
+
+## Goal
+
+Add four new landing page sections that reframe StreamResource around the "last mile" production narrative: the problem (why AI projects stall), the full stack architecture, the @cacheplane/chat UI layer in depth, and a fair comparison table. Update one existing section (FeatureStrip) to remove an inaccurate claim. Existing sections are preserved as-is.
+
+## Architecture
+
+All new sections are standalone React components added to `apps/website/src/components/landing/`. The landing page (`apps/website/src/app/page.tsx`) is updated to insert them in a specific sequence within the existing section order. Each component uses Framer Motion with `whileInView + viewport={{ once: true }}` for scroll-triggered animations, design tokens from `@cacheplane/design-tokens`, and the established glass-morphism visual language.
+
+SVG animations use `animateMotion` with `mpath` for particle flows and CSS `@keyframes` for sequential reveal. No new dependencies required β Framer Motion and all tokens are already available.
+
+## Tech Stack
+
+- Next.js 16, React 19, TypeScript
+- Framer Motion (already in workspace)
+- `@cacheplane/design-tokens` for all color/glass values
+- Inline SVG for particle animations (no library needed)
+- EB Garamond for headlines, Inter for body, JetBrains Mono for labels/code
+
+---
+
+## File Map
+
+| Action | Path |
+|--------|------|
+| Create | `apps/website/src/components/landing/ProblemSection.tsx` |
+| Create | `apps/website/src/components/landing/FullStackSection.tsx` |
+| Create | `apps/website/src/components/landing/ChatFeaturesSection.tsx` |
+| Create | `apps/website/src/components/landing/FairComparisonSection.tsx` |
+| Modify | `apps/website/src/app/page.tsx` |
+
+---
+
+## Section 1: ProblemSection
+
+**Placement in page.tsx:** After ``, before ``.
+
+**Narrative:** The last-mile gap. Three stats establish the problem. An animated progress bar shows teams stalling at 77% and StreamResource closing the gap to 100%.
+
+### Component structure
+
+```tsx
+'use client';
+import { useRef, useEffect, useState } from 'react';
+import { motion, useInView } from 'framer-motion';
+import { tokens } from '@cacheplane/design-tokens';
+
+const STATS = [
+ { num: '66%', label: 'of AI solutions are almost right β not quite production-ready' },
+ { num: '31%', label: 'of prioritized AI use cases actually reach production' },
+ { num: '75%', label: 'of developers still want a human in the loop when trust breaks down' },
+];
+```
+
+### Stat cards
+
+Three glass cards in a 3-column grid. The number uses `tokens.colors.angularRed` with EB Garamond at `3.4rem`. Staggered `whileInView` entrance with `delay: i * 0.1`.
+
+### Gap animation
+
+A single `
` track bar with `overflow: hidden` and `borderRadius: 8`. **Critical:** `overflow: hidden` on the track container is what makes the fill clips work correctly β no two-piece border-radius artifact. The fill is one element that transitions in two phases:
+
+**Phase 1** (triggered by `useInView`): fill width transitions from `0%` β `77%` over `1.7s cubic-bezier(.4,0,.2,1)`. A counter animates from 0 β 77 using `requestAnimationFrame`.
+
+**Phase 2** (after 1s pause): stall marker (red vertical line at 77%) and hatch overlay appear. Track shakes with a CSS keyframe.
+
+**Phase 3** (after another 1s): hatch fades out, fill continues `77%` β `100%` over `1s`. The background gradient shifts from red β blue as it crosses the 77% threshold: `linear-gradient(90deg, rgba(221,0,49,.5) 0%, rgba(221,0,49,.38) 70%, rgba(0,64,144,.8) 82%, #004090 100%)`. Counter animates 77 β 100.
+
+**Phase 4**: "100%" label, "β Production" label, and tagline fade in.
+
+```tsx
+// Trigger: useInView with once:true, 30% threshold
+// Phase timings (ms from trigger):
+// 150 β start fill to 77%
+// 2100 β show stall marker + hatch + shake
+// 3200 β close gap to 100%
+// 4400 β show end labels + tagline
+```
+
+The tagline: *"Your backend agent may already work. The frontend and production path is what slips the schedule."*
+
+---
+
+## Section 2: FullStackSection
+
+**Placement in page.tsx:** After ``, before ``.
+
+**Narrative:** Three-layer architecture. Particles animate downward through each connector, showing data flowing from LangGraph β stream-resource β chat β render.
+
+### Component structure
+
+A centered vertical stack, max-width 520px, centered on the page. Above the stack: eyebrow, headline, subtitle. Below the stack: a three-column roadmap strip.
+
+### LangGraph source node
+
+Dark card (`#1a1b26`), centered, width 220px. Shows "LangGraph Cloud" label and a pulsing "stream active" live badge.
+
+### Layer cards
+
+Three cards with the established color scheme:
+- `@cacheplane/stream-resource` β blue (`#004090`), tag "Primitives"
+- `@cacheplane/chat` β purple (`#5a00c8`), tag "UI Layer"
+- `@cacheplane/render` β green (`#1a7a40`), tag "Gen UI"
+
+Each card shows the package name and 4β5 chip tags for key APIs.
+
+### SVG connectors
+
+Each of the three connectors (LGβSR, SRβchat, chatβrender) is a `