diff --git a/.claude/worktrees/blissful-bartik b/.claude/worktrees/blissful-bartik
deleted file mode 160000
index 44e21de99..000000000
--- a/.claude/worktrees/blissful-bartik
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 44e21de992ad8c0b01a35d4d71cb41dfeb92cdb8
diff --git a/.claude/worktrees/optimistic-jang b/.claude/worktrees/optimistic-jang
deleted file mode 160000
index 0a6d25bcb..000000000
--- a/.claude/worktrees/optimistic-jang
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 0a6d25bcb8d03bd2afe4e5bdd50ee660e6ae4df9
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index aa1113a2e..f9bca386f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -104,18 +104,6 @@ jobs:
       - run: npm ci
       - run: npx tsx apps/cockpit/scripts/deploy-smoke.ts --url https://cockpit.cacheplane.ai --dry-run
 
-  mcp:
-    name: MCP — build / smoke
-    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 test mcp --skip-nx-cache
-
   chat-agent-smoke:
     name: Chat Agent — smoke
     runs-on: ubuntu-latest
@@ -162,7 +150,7 @@ jobs:
 
   deploy:
     name: Deploy → Vercel
-    needs: [library, website, cockpit, cockpit-examples-build, cockpit-smoke, cockpit-secret-integration, cockpit-deploy-smoke, mcp, chat-agent-smoke, cockpit-e2e, website-e2e]
+    needs: [library, website, cockpit, cockpit-examples-build, cockpit-smoke, cockpit-secret-integration, cockpit-deploy-smoke, chat-agent-smoke, cockpit-e2e, website-e2e]
     runs-on: ubuntu-latest
     # Only deploy on pushes to main, not on pull requests
     if: github.ref == 'refs/heads/main' && github.event_name == 'push'
diff --git a/apps/website/content/docs/chat/a2ui/catalog.mdx b/apps/website/content/docs/chat/a2ui/catalog.mdx
index 3a07571c2..b05cfb9d9 100644
--- a/apps/website/content/docs/chat/a2ui/catalog.mdx
+++ b/apps/website/content/docs/chat/a2ui/catalog.mdx
@@ -1,6 +1,6 @@
 # Component Catalog
 
-The built-in A2UI catalog provides 12 Angular components covering display, layout, and interactive controls. It is included automatically when using `ChatComponent`, and can be instantiated directly for custom rendering setups.
+The built-in A2UI catalog provides 18 Angular components covering display, layout, interactive controls, media, and advanced inputs. Pass `a2uiBasicCatalog()` to the `ChatComponent` `views` input to enable A2UI rendering, or instantiate it directly for custom setups.
 
 **Import:**
 
@@ -14,7 +14,7 @@ import { a2uiBasicCatalog } from '@cacheplane/chat';
 function a2uiBasicCatalog(): ViewRegistry
 ```
 
-Returns a `ViewRegistry` mapping 12 A2UI type names to their Angular component implementations. Pass the result to `A2uiSurfaceComponent` or use it as a starting point for a custom registry.
+Returns a `ViewRegistry` mapping 18 A2UI type names to their Angular component implementations. Pass the result to `A2uiSurfaceComponent` or use it as a starting point for a custom registry.
 
 ```typescript
 const catalog = a2uiBasicCatalog();
@@ -229,6 +229,177 @@ A dropdown select control with a list of string options.
 | `_bindings` | `Record<string, string>` | Bind `selected` to a data model path |
 | `emit` | injected | Event emitter provided by the render engine |
 
+### DateTimeInput
+
+A date, time, or datetime input with two-way binding.
+
+| A2UI type | Angular component | Selector |
+|-----------|-------------------|----------|
+| `DateTimeInput` | `A2uiDateTimeInputComponent` | `a2ui-date-time-input` |
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | Input label |
+| `value` | `string` | Current value (bind via `_bindings`) |
+| `inputType` | `'date' \| 'time' \| 'datetime-local'` | HTML input type. Defaults to `'date'` |
+| `min` | `string` | Minimum allowed value |
+| `max` | `string` | Maximum allowed value |
+| `_bindings` | `Record<string, string>` | Bind `value` to a data model path |
+| `emit` | injected | Event emitter provided by the render engine |
+
+```json
+{
+  "id": "date-field",
+  "component": "DateTimeInput",
+  "label": "Appointment date",
+  "value": {"path": "/appointmentDate"},
+  "inputType": "date",
+  "_bindings": {"value": "/appointmentDate"}
+}
+```
+
+### Slider
+
+A range slider input with two-way binding.
+
+| A2UI type | Angular component | Selector |
+|-----------|-------------------|----------|
+| `Slider` | `A2uiSliderComponent` | `a2ui-slider` |
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | Slider label |
+| `value` | `number` | Current value (bind via `_bindings`) |
+| `min` | `number` | Minimum value |
+| `max` | `number` | Maximum value |
+| `step` | `number` | Step increment |
+| `_bindings` | `Record<string, string>` | Bind `value` to a data model path |
+| `emit` | injected | Event emitter provided by the render engine |
+
+```json
+{
+  "id": "volume",
+  "component": "Slider",
+  "label": "Volume",
+  "value": {"path": "/volume"},
+  "min": 0,
+  "max": 100,
+  "step": 1,
+  "_bindings": {"value": "/volume"}
+}
+```
+
+## Layout Components (continued)
+
+### Tabs
+
+A tabbed container that shows one child panel at a time based on the selected tab index.
+
+| A2UI type | Angular component | Selector |
+|-----------|-------------------|----------|
+| `Tabs` | `A2uiTabsComponent` | `a2ui-tabs` |
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `tabs` | `{label: string, childKeys: string[]}[]` | Tab definitions with labels and child component IDs |
+| `selected` | `number` | Currently selected tab index. Defaults to `0` |
+| `_bindings` | `Record<string, string>` | Bind `selected` to a data model path |
+| `spec` | `Spec` | Injected automatically by the render engine |
+| `emit` | injected | Event emitter provided by the render engine |
+
+```json
+{
+  "id": "info-tabs",
+  "component": "Tabs",
+  "tabs": [
+    {"label": "Overview", "childKeys": ["overview-content"]},
+    {"label": "Details", "childKeys": ["detail-list"]}
+  ],
+  "selected": 0,
+  "_bindings": {"selected": "/activeTab"}
+}
+```
+
+### Modal
+
+A dialog overlay that renders child content when open. Supports an optional title and dismissible close button.
+
+| A2UI type | Angular component | Selector |
+|-----------|-------------------|----------|
+| `Modal` | `A2uiModalComponent` | `a2ui-modal` |
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `title` | `string` | Optional modal heading |
+| `open` | `boolean` | Whether the modal is visible |
+| `childKeys` | `string[]` | Child component IDs rendered inside the modal body |
+| `dismissible` | `boolean` | Shows a close button when `true`. Defaults to `true` |
+| `_bindings` | `Record<string, string>` | Bind `open` to a data model path |
+| `spec` | `Spec` | Injected automatically by the render engine |
+| `emit` | injected | Event emitter provided by the render engine |
+
+```json
+{
+  "id": "confirm-dialog",
+  "component": "Modal",
+  "title": "Confirm Action",
+  "open": {"path": "/showConfirm"},
+  "childKeys": ["confirm-message", "confirm-buttons"],
+  "dismissible": true,
+  "_bindings": {"open": "/showConfirm"}
+}
+```
+
+## Media Components
+
+### Video
+
+Renders an HTML5 `<video>` element.
+
+| A2UI type | Angular component | Selector |
+|-----------|-------------------|----------|
+| `Video` | `A2uiVideoComponent` | `a2ui-video` |
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `url` | `string` | **Required.** Video source URL |
+| `poster` | `string` | Poster image URL shown before playback |
+| `autoplay` | `boolean` | Start playback automatically. Defaults to `false` |
+| `controls` | `boolean` | Show native playback controls. Defaults to `true` |
+
+```json
+{
+  "id": "intro-video",
+  "component": "Video",
+  "url": "https://example.com/intro.mp4",
+  "poster": "https://example.com/poster.jpg",
+  "controls": true
+}
+```
+
+### AudioPlayer
+
+Renders an HTML5 `<audio>` element.
+
+| A2UI type | Angular component | Selector |
+|-----------|-------------------|----------|
+| `AudioPlayer` | `A2uiAudioPlayerComponent` | `a2ui-audio-player` |
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `url` | `string` | **Required.** Audio source URL |
+| `autoplay` | `boolean` | Start playback automatically. Defaults to `false` |
+| `controls` | `boolean` | Show native playback controls. Defaults to `true` |
+
+```json
+{
+  "id": "podcast",
+  "component": "AudioPlayer",
+  "url": "https://example.com/episode.mp3",
+  "controls": true
+}
+```
+
 ## Built-in Functions
 
 Props that use `A2uiFunctionCall` can reference these built-in functions:
@@ -260,6 +431,12 @@ Props that use `A2uiFunctionCall` can reference these built-in functions:
 | `TextField` | `A2uiTextFieldComponent` | Interactive |
 | `CheckBox` | `A2uiCheckBoxComponent` | Interactive |
 | `ChoicePicker` | `A2uiChoicePickerComponent` | Interactive |
+| `Tabs` | `A2uiTabsComponent` | Layout |
+| `Modal` | `A2uiModalComponent` | Layout |
+| `Video` | `A2uiVideoComponent` | Media |
+| `AudioPlayer` | `A2uiAudioPlayerComponent` | Media |
+| `DateTimeInput` | `A2uiDateTimeInputComponent` | Interactive |
+| `Slider` | `A2uiSliderComponent` | Interactive |
 
 ## What's Next
 
diff --git a/apps/website/content/docs/chat/a2ui/overview.mdx b/apps/website/content/docs/chat/a2ui/overview.mdx
index 0292dd3a3..7b32333d5 100644
--- a/apps/website/content/docs/chat/a2ui/overview.mdx
+++ b/apps/website/content/docs/chat/a2ui/overview.mdx
@@ -2,7 +2,7 @@
 
 A2UI is an open standard for agent-driven user interfaces. It lets an AI agent describe a structured UI — components, layout, and live data — using a simple JSON protocol, and have that UI rendered automatically inside a chat session.
 
-The `ChatComponent` includes built-in A2UI support with no extra configuration. When an agent response begins with the `---a2ui_JSON---` sentinel, the chat switches to A2UI rendering mode automatically.
+When an agent response begins with the `---a2ui_JSON---` sentinel, the chat switches to A2UI rendering mode automatically — provided you supply a component catalog via the `views` input.
 
 <Callout type="info" title="Spec version">
 The implementation follows the A2UI v0.9 specification. For the full protocol reference, see [a2ui.org](https://a2ui.org).
@@ -23,7 +23,7 @@ AI response starts with ---a2ui_JSON---
 
 The surface store maintains a `Map<string, A2uiSurface>` keyed by surface ID. Each surface holds a flat component map, a data model, theme metadata, and the catalog ID used to resolve components.
 
-The `ChatComponent` provides the built-in `a2uiBasicCatalog` automatically — you do not need to configure a catalog to start using A2UI.
+To render A2UI surfaces, pass a `ViewRegistry` to the `ChatComponent` via the `views` input. The `a2uiBasicCatalog()` function provides the 18 built-in components.
 
 ## The Four Message Types
 
@@ -77,6 +77,17 @@ Removes a surface from the store and dismisses its rendered output.
 {"deleteSurface": {"surfaceId": "order-status"}}
 ```
 
+## Action-Event Bridge
+
+A2UI actions (button clicks, form events) now map directly to render-spec `on` bindings. When `surfaceToSpec()` converts a surface to a spec, each component's `action` prop is translated into an `on` binding on the corresponding spec element. This means A2UI actions flow through the render-lib event system rather than being handled ad-hoc by individual components.
+
+The bridge provides two default handlers:
+
+- `a2ui:event` -- dispatches named events (e.g., `submit`, `cancel`) back to the agent
+- `a2ui:localAction` -- executes local function calls (e.g., `openUrl`)
+
+This unified event flow means consumers can observe all A2UI interactions through the `RenderEvent` stream on `RenderSpecComponent`, including handler execution, state changes, and lifecycle signals. See the [Render Events](/docs/render/events) page for the full event type reference.
+
 ## A2UI vs json-render
 
 Both A2UI and json-render produce rendered UIs inside chat messages, but they serve different purposes.
@@ -93,24 +104,25 @@ Use **A2UI** when the agent needs to build an interface incrementally, bind it t
 
 ## Quick Setup
 
-No configuration is required. Add `ChatComponent` to your template and A2UI content is detected and rendered automatically:
+Pass `a2uiBasicCatalog()` to the `views` input to enable A2UI rendering:
 
 ```typescript
-import { ChatComponent } from '@cacheplane/chat';
+import { ChatComponent, a2uiBasicCatalog } from '@cacheplane/chat';
 
 @Component({
-  template: `<cp-chat [stream]="stream" />`,
+  template: `<chat [ref]="agentRef" [views]="catalog" />`,
   imports: [ChatComponent],
 })
 export class AppComponent {
-  stream = /* your AI stream */;
+  catalog = a2uiBasicCatalog();
+  agentRef = /* your AgentRef */;
 }
 ```
 
-When the AI response starts with `---a2ui_JSON---`, the chat renders the surfaces using the built-in `a2uiBasicCatalog`. No inputs to set, no catalog to register.
+When the AI response starts with `---a2ui_JSON---`, the chat renders the surfaces using the provided catalog.
 
 <Callout type="tip" title="Custom catalogs">
-To use your own components or extend the built-in set, pass a `ViewRegistry` to the chat. See the [Catalog reference](/docs/chat/a2ui/catalog) for details.
+To extend or replace the built-in components, compose catalogs with `withViews()` or `views()`. See the [Custom Catalogs guide](/docs/chat/guides/custom-catalogs) for details.
 </Callout>
 
 ## What's Next
@@ -135,7 +147,7 @@ To use your own components or extend the built-in set, pass a `ViewRegistry` to
     icon="grid"
     href="/docs/chat/a2ui/catalog"
   >
-    Reference for all 12 built-in components and their props.
+    Reference for all 18 built-in components and their props.
   </Card>
   <Card
     title="Streaming"
diff --git a/apps/website/content/docs/chat/a2ui/surface-component.mdx b/apps/website/content/docs/chat/a2ui/surface-component.mdx
index 187fecef7..4b2e62509 100644
--- a/apps/website/content/docs/chat/a2ui/surface-component.mdx
+++ b/apps/website/content/docs/chat/a2ui/surface-component.mdx
@@ -17,6 +17,14 @@ import { A2uiSurfaceComponent } from '@cacheplane/chat';
 | `surface` | `A2uiSurface` | Yes | The surface to render |
 | `catalog` | `ViewRegistry` | Yes | Component registry used to resolve A2UI type names to Angular components |
 
+## Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `events` | `RenderEvent` | Emits render events from the underlying `RenderSpecComponent` -- handler execution, state changes, and lifecycle signals |
+
+The `events` output forwards all `RenderEvent` emissions from the render engine. This includes events triggered by the default A2UI handlers (`a2ui:event` and `a2ui:localAction`) as well as any state change or lifecycle events.
+
 ## How It Works
 
 `A2uiSurfaceComponent` bridges the A2UI surface model to the json-render engine in three steps:
@@ -34,11 +42,15 @@ Before the spec is emitted, each component prop is evaluated against the surface
 - A function call `{ call: 'formatCurrency', args: { ... } }` — executed by the built-in function registry
 - A template string `"Hello ${/name}"` — interpolated with values from `dataModel`
 
-**3. Expand template children**
+**3. Map actions to `on` bindings**
+
+`surfaceToSpec()` converts each component's A2UI `action` prop into a render-spec `on` binding on the corresponding element. Event actions map to the `a2ui:event` handler, and function call actions map to the `a2ui:localAction` handler. This bridges the A2UI interaction model to the render-lib event system.
+
+**4. Expand template children**
 
 When a component's `children` field is an `A2uiChildTemplate` (`{ path, componentId }`), the surface component expands it over the array at `path` in the data model. Each array item gets its own cloned element with props resolved in that item's scope.
 
-**4. Render via RenderSpecComponent**
+**5. Render via RenderSpecComponent**
 
 The final `Spec` is passed to `RenderSpecComponent` along with the `ViewRegistry` (converted to an Angular registry via `toRenderRegistry`). Rendering is fully reactive — when the surface signal updates, the spec recomputes and only affected elements re-render.
 
@@ -111,6 +123,6 @@ Returns `null` when the surface has no `root` component. Otherwise returns a com
     icon="grid"
     href="/docs/chat/a2ui/catalog"
   >
-    All 12 built-in components and their props.
+    All 18 built-in components and their props.
   </Card>
 </CardGroup>
diff --git a/apps/website/content/docs/chat/a2ui/surface-store.mdx b/apps/website/content/docs/chat/a2ui/surface-store.mdx
index 3d0174a61..6f508aa23 100644
--- a/apps/website/content/docs/chat/a2ui/surface-store.mdx
+++ b/apps/website/content/docs/chat/a2ui/surface-store.mdx
@@ -57,6 +57,10 @@ const dashboard = store.surface('dashboard');
 // dashboard() is A2uiSurface | undefined
 ```
 
+## Data Model and Render-Lib State Sync
+
+The surface's `dataModel` is synchronized into the render-lib `StateStore` when `surfaceToSpec()` converts the surface to a spec. The conversion sets `state: surface.dataModel` on the produced `Spec`, which initializes the render-lib's internal `StateStore` with the surface data. When components with `_bindings` update values (e.g., a text field changing), those updates flow through the render-lib `StateStore`, and each mutation emits a `RenderStateChangeEvent` through the render-lib event system. This means consumers observing the `events` output on `A2uiSurfaceComponent` see all data model changes as typed `RenderStateChangeEvent` objects with `path`, `value`, and `snapshot` fields.
+
 ## updateDataModel Semantics
 
 The `updateDataModel` message uses JSON Pointer (RFC 6901) paths to address values in the data model.
@@ -143,6 +147,6 @@ The `components` map is keyed by component ID. The `dataModel` is a plain object
     icon="grid"
     href="/docs/chat/a2ui/catalog"
   >
-    All 12 built-in components and their props.
+    All 18 built-in components and their props.
   </Card>
 </CardGroup>
diff --git a/apps/website/content/docs/chat/guides/custom-catalogs.mdx b/apps/website/content/docs/chat/guides/custom-catalogs.mdx
new file mode 100644
index 000000000..e1f059694
--- /dev/null
+++ b/apps/website/content/docs/chat/guides/custom-catalogs.mdx
@@ -0,0 +1,94 @@
+---
+title: Custom Catalogs
+description: Compose custom component catalogs for generative UI using ViewRegistry composition.
+---
+
+# Custom Catalogs
+
+Both json-render specs and A2UI surfaces render through the same `ViewRegistry`. Compose catalogs using `views`, `withViews`, and `withoutViews` from `@cacheplane/render`.
+
+## Using the Built-In A2UI Catalog
+
+```typescript
+import { a2uiBasicCatalog } from '@cacheplane/chat';
+
+<chat [ref]="agentRef" [views]="a2uiBasicCatalog()" />
+```
+
+## Adding Custom Components
+
+```typescript
+import { withViews } from '@cacheplane/render';
+import { a2uiBasicCatalog } from '@cacheplane/chat';
+
+const catalog = withViews(a2uiBasicCatalog(), {
+  Chart: MyChartComponent,
+  DataGrid: MyDataGridComponent,
+});
+
+<chat [ref]="agentRef" [views]="catalog" />
+```
+
+## Overriding Built-In Components
+
+```typescript
+import { views } from '@cacheplane/render';
+import { a2uiBasicCatalog } from '@cacheplane/chat';
+
+const catalog = views({
+  ...a2uiBasicCatalog(),
+  Button: MyBrandedButtonComponent,
+});
+```
+
+## Removing Components
+
+```typescript
+import { withoutViews } from '@cacheplane/render';
+import { a2uiBasicCatalog } from '@cacheplane/chat';
+
+const catalog = withoutViews(a2uiBasicCatalog(), 'Modal', 'Video');
+```
+
+## Custom-Only (No A2UI)
+
+```typescript
+import { views } from '@cacheplane/render';
+
+const catalog = views({
+  Chart: MyChartComponent,
+  Table: MyTableComponent,
+});
+
+<chat [ref]="agentRef" [views]="catalog" />
+```
+
+## No Generative UI
+
+If `views` is not provided, no generative UI renders. Specs and A2UI surfaces are silently skipped.
+
+```html
+<chat [ref]="agentRef" />
+```
+
+## Writing a Custom Component
+
+Custom components receive the standard `AngularComponentInputs`:
+
+```typescript
+@Component({
+  selector: 'my-chart',
+  standalone: true,
+  template: `<canvas #chart></canvas>`,
+})
+export class MyChartComponent {
+  readonly data = input<number[]>([]);
+  readonly title = input<string>('');
+  readonly childKeys = input<string[]>([]);
+  readonly spec = input.required<Spec>();
+  readonly emit = input<(event: string) => void>(() => {});
+  readonly loading = input<boolean>(false);
+}
+```
+
+The component receives resolved props as inputs. `childKeys` and `spec` enable recursive child rendering. `emit` triggers event handlers defined in the spec's `on` bindings.
diff --git a/apps/website/content/docs/render/events.mdx b/apps/website/content/docs/render/events.mdx
new file mode 100644
index 000000000..1613c5234
--- /dev/null
+++ b/apps/website/content/docs/render/events.mdx
@@ -0,0 +1,109 @@
+---
+title: Events
+description: Generalized event system for render-spec — handler events, state changes, and lifecycle signals.
+---
+
+# Render Events
+
+`RenderSpecComponent` emits a stream of typed events via its `events` output. This provides visibility into handler execution, state mutations, and component lifecycle without coupling to any specific transport.
+
+## Event Types
+
+All events are discriminated by the `type` field:
+
+```typescript
+type RenderEvent =
+  | RenderHandlerEvent
+  | RenderStateChangeEvent
+  | RenderLifecycleEvent;
+```
+
+### RenderHandlerEvent
+
+Emitted when a handler executes in response to a component event (e.g., button click).
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `type` | `'handler'` | Discriminant |
+| `action` | `string` | Handler name from the `on` binding |
+| `params` | `Record<string, unknown>` | Resolved parameters |
+| `result` | `unknown` | Return value (if sync or awaited) |
+
+### RenderStateChangeEvent
+
+Emitted when the `StateStore` is mutated via `set()` or `update()`.
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `type` | `'stateChange'` | Discriminant |
+| `path` | `string` | JSON Pointer path that changed |
+| `value` | `unknown` | New value |
+| `snapshot` | `Record<string, unknown>` | Full state after change |
+
+### RenderLifecycleEvent
+
+Emitted on component mount/destroy at spec or element level.
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `type` | `'lifecycle'` | Discriminant |
+| `event` | `'mounted' \| 'destroyed'` | Lifecycle phase |
+| `scope` | `'spec' \| 'element'` | Granularity |
+| `elementKey` | `string?` | Element key (element scope only) |
+| `elementType` | `string?` | Component type (element scope only) |
+
+## Usage
+
+```html
+<render-spec
+  [spec]="spec()"
+  [registry]="registry"
+  [handlers]="handlers"
+  (events)="onEvent($event)"
+/>
+```
+
+```typescript
+onEvent(event: RenderEvent) {
+  switch (event.type) {
+    case 'handler':
+      console.log(`Handler ${event.action} called with`, event.params);
+      break;
+    case 'stateChange':
+      console.log(`State changed at ${event.path}:`, event.value);
+      break;
+    case 'lifecycle':
+      console.log(`${event.scope} ${event.event}`, event.elementKey ?? '');
+      break;
+  }
+}
+```
+
+## Handlers + Events Together
+
+Input handlers execute locally. The `events` output notifies the consumer after execution:
+
+```typescript
+const handlers = {
+  saveForm: (params) => api.save(params),
+};
+
+// Consumer also sees: { type: 'handler', action: 'saveForm', params: {...}, result: {...} }
+```
+
+Handlers handle, events notify. Use handlers for local side effects, events for routing to external systems.
+
+## Element Lifecycle (Opt-In)
+
+By default, only spec-level lifecycle events are emitted. To enable element-level lifecycle for a specific element, set `lifecycle: true` on the element in the spec:
+
+```json
+{
+  "root": "main",
+  "elements": {
+    "main": { "type": "Card", "props": {}, "lifecycle": true }
+  }
+}
+```
+
+This emits `mounted` and `destroyed` events for that element, including `elementKey` and `elementType`.
diff --git a/docs/superpowers/plans/2026-04-09-a2ui-phase3.md b/docs/superpowers/plans/2026-04-09-a2ui-phase3.md
new file mode 100644
index 000000000..5bd3173c2
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-09-a2ui-phase3.md
@@ -0,0 +1,1880 @@
+# A2UI Phase 3 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 a generalized render-lib event system, 6 new A2UI components, custom catalog support, and ChatComponent event output.
+
+**Architecture:** The event system lives in `@cacheplane/render` so both json-render specs and A2UI surfaces share one event model. New A2UI components follow existing catalog patterns. `surfaceToSpec()` bridges A2UI actions to render-lib `on` bindings. ChatComponent surfaces events via a single `renderEvent` output.
+
+**Tech Stack:** Angular 19+, Vitest, @json-render/core, @cacheplane/render, @cacheplane/a2ui, @cacheplane/chat
+
+---
+
+## File Map
+
+### Render lib (`libs/render/src/`)
+| File | Action | Responsibility |
+|------|--------|---------------|
+| `lib/render-event.ts` | Create | `RenderEvent` union type and all sub-interfaces |
+| `lib/render-spec.component.ts` | Modify | Add `events` output, lifecycle hooks, StateStore subscription, handler event emission |
+| `lib/render-element.component.ts` | Modify | Add opt-in element lifecycle emission, emit handler events through context |
+| `lib/contexts/render-context.ts` | Modify | Add `emitEvent` callback to RenderContext |
+| `lib/render.types.ts` | Modify | Add `emitEvent` to RenderConfig (optional) |
+| `lib/signal-state-store.ts` | Modify | Add path-tracking to `set()`/`update()` for granular state change events |
+| `public-api.ts` | Modify | Export new event types |
+| `lib/render-event.spec.ts` | Create | Tests for event type construction |
+| `lib/render-spec.component.spec.ts` | Modify | Tests for event emission, lifecycle, state change events |
+
+### A2UI catalog (`libs/chat/src/lib/a2ui/catalog/`)
+| File | Action | Responsibility |
+|------|--------|---------------|
+| `tabs.component.ts` | Create | Tabs component |
+| `modal.component.ts` | Create | Modal component |
+| `video.component.ts` | Create | Video component |
+| `audio-player.component.ts` | Create | AudioPlayer component |
+| `date-time-input.component.ts` | Create | DateTimeInput component |
+| `slider.component.ts` | Create | Slider component |
+| `index.ts` | Modify | Register 6 new components in `a2uiBasicCatalog()` |
+
+### A2UI bridge (`libs/chat/src/lib/a2ui/`)
+| File | Action | Responsibility |
+|------|--------|---------------|
+| `surface.component.ts` | Modify | Map A2UI actions to spec `on` bindings, provide default handlers, bridge dataModel to StateStore |
+| `surface.component.spec.ts` | Modify | Tests for action mapping and handler registration |
+
+### Chat integration (`libs/chat/src/lib/`)
+| File | Action | Responsibility |
+|------|--------|---------------|
+| `compositions/chat/chat.component.ts` | Modify | Remove hardcoded `a2uiCatalog`, pipe `events` output, add `renderEvent` output |
+| `compositions/chat/chat-render-event.ts` | Create | `ChatRenderEvent` type |
+| `primitives/chat-generative-ui/chat-generative-ui.component.ts` | Modify | Add `events` output passthrough |
+
+### Documentation (`apps/website/content/docs/`)
+| File | Action | Responsibility |
+|------|--------|---------------|
+| `render/events.mdx` | Create | Render event system reference |
+| `chat/a2ui/catalog.mdx` | Modify | Add 6 new components |
+| `chat/a2ui/overview.mdx` | Modify | Action → event binding bridge |
+| `chat/a2ui/surface-component.mdx` | Modify | Default handlers, action mapping |
+| `chat/a2ui/surface-store.mdx` | Modify | StateStore bridge |
+| `chat/guides/custom-catalogs.mdx` | Create | Custom catalog composition guide |
+
+---
+
+### Task 1: RenderEvent Types
+
+**Files:**
+- Create: `libs/render/src/lib/render-event.ts`
+- Create: `libs/render/src/lib/render-event.spec.ts`
+- Modify: `libs/render/src/public-api.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `libs/render/src/lib/render-event.spec.ts`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { describe, it, expect } from 'vitest';
+import type {
+  RenderEvent,
+  RenderHandlerEvent,
+  RenderStateChangeEvent,
+  RenderLifecycleEvent,
+} from './render-event';
+
+describe('RenderEvent types', () => {
+  it('should create a handler event', () => {
+    const event: RenderHandlerEvent = {
+      type: 'handler',
+      action: 'doSomething',
+      params: { id: '123' },
+    };
+    expect(event.type).toBe('handler');
+    expect(event.action).toBe('doSomething');
+    expect(event.params).toEqual({ id: '123' });
+    expect(event.result).toBeUndefined();
+  });
+
+  it('should create a handler event with result', () => {
+    const event: RenderHandlerEvent = {
+      type: 'handler',
+      action: 'compute',
+      params: { x: 1 },
+      result: 42,
+    };
+    expect(event.result).toBe(42);
+  });
+
+  it('should create a state change event', () => {
+    const event: RenderStateChangeEvent = {
+      type: 'stateChange',
+      path: '/user/name',
+      value: 'Alice',
+      snapshot: { user: { name: 'Alice' } },
+    };
+    expect(event.type).toBe('stateChange');
+    expect(event.path).toBe('/user/name');
+    expect(event.value).toBe('Alice');
+  });
+
+  it('should create a spec lifecycle event', () => {
+    const event: RenderLifecycleEvent = {
+      type: 'lifecycle',
+      event: 'mounted',
+      scope: 'spec',
+    };
+    expect(event.scope).toBe('spec');
+    expect(event.elementKey).toBeUndefined();
+  });
+
+  it('should create an element lifecycle event', () => {
+    const event: RenderLifecycleEvent = {
+      type: 'lifecycle',
+      event: 'destroyed',
+      scope: 'element',
+      elementKey: 'card_1',
+      elementType: 'Card',
+    };
+    expect(event.scope).toBe('element');
+    expect(event.elementKey).toBe('card_1');
+    expect(event.elementType).toBe('Card');
+  });
+
+  it('should narrow RenderEvent by type discriminant', () => {
+    const events: RenderEvent[] = [
+      { type: 'handler', action: 'a', params: {} },
+      { type: 'stateChange', path: '/x', value: 1, snapshot: { x: 1 } },
+      { type: 'lifecycle', event: 'mounted', scope: 'spec' },
+    ];
+    const handlers = events.filter((e): e is RenderHandlerEvent => e.type === 'handler');
+    expect(handlers).toHaveLength(1);
+    expect(handlers[0].action).toBe('a');
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `npx nx test render --testPathPattern=render-event`
+Expected: FAIL — cannot find module `./render-event`
+
+- [ ] **Step 3: Write the implementation**
+
+Create `libs/render/src/lib/render-event.ts`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+
+export interface RenderHandlerEvent {
+  readonly type: 'handler';
+  readonly action: string;
+  readonly params: Record<string, unknown>;
+  readonly result?: unknown;
+}
+
+export interface RenderStateChangeEvent {
+  readonly type: 'stateChange';
+  readonly path: string;
+  readonly value: unknown;
+  readonly snapshot: Record<string, unknown>;
+}
+
+export interface RenderLifecycleEvent {
+  readonly type: 'lifecycle';
+  readonly event: 'mounted' | 'destroyed';
+  readonly scope: 'spec' | 'element';
+  readonly elementKey?: string;
+  readonly elementType?: string;
+}
+
+export type RenderEvent =
+  | RenderHandlerEvent
+  | RenderStateChangeEvent
+  | RenderLifecycleEvent;
+```
+
+- [ ] **Step 4: Export from public API**
+
+Modify `libs/render/src/public-api.ts` — add after the existing type exports:
+
+```typescript
+// Events
+export type {
+  RenderEvent,
+  RenderHandlerEvent,
+  RenderStateChangeEvent,
+  RenderLifecycleEvent,
+} from './lib/render-event';
+```
+
+- [ ] **Step 5: Run test to verify it passes**
+
+Run: `npx nx test render --testPathPattern=render-event`
+Expected: PASS — all 6 tests green
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add libs/render/src/lib/render-event.ts libs/render/src/lib/render-event.spec.ts libs/render/src/public-api.ts
+git commit -m "feat(render): add RenderEvent types for handler, state change, and lifecycle events"
+```
+
+---
+
+### Task 2: RenderContext emitEvent Callback
+
+**Files:**
+- Modify: `libs/render/src/lib/contexts/render-context.ts`
+- Modify: `libs/render/src/lib/render.types.ts`
+
+- [ ] **Step 1: Add emitEvent to RenderContext**
+
+Modify `libs/render/src/lib/contexts/render-context.ts`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { InjectionToken } from '@angular/core';
+import type { StateStore, ComputedFunction } from '@json-render/core';
+import type { AngularRegistry } from '../render.types';
+import type { RenderEvent } from '../render-event';
+
+export interface RenderContext {
+  registry: AngularRegistry;
+  store: StateStore;
+  functions?: Record<string, ComputedFunction>;
+  handlers?: Record<string, (params: Record<string, unknown>) => unknown | Promise<unknown>>;
+  emitEvent?: (event: RenderEvent) => void;
+  loading?: boolean;
+}
+
+export const RENDER_CONTEXT = new InjectionToken<RenderContext>('RENDER_CONTEXT');
+```
+
+- [ ] **Step 2: Run tests to verify nothing breaks**
+
+Run: `npx nx test render`
+Expected: PASS — existing tests unaffected (emitEvent is optional)
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add libs/render/src/lib/contexts/render-context.ts
+git commit -m "feat(render): add emitEvent callback to RenderContext"
+```
+
+---
+
+### Task 3: RenderSpecComponent Event Output + Lifecycle
+
+**Files:**
+- Modify: `libs/render/src/lib/render-spec.component.ts`
+- Modify: `libs/render/src/lib/render-spec.component.spec.ts`
+
+- [ ] **Step 1: Write the failing tests**
+
+Add to `libs/render/src/lib/render-spec.component.spec.ts`:
+
+```typescript
+import type { RenderEvent, RenderLifecycleEvent } from './render-event';
+
+describe('RenderSpecComponent — event emission', () => {
+  it('should emit spec mounted lifecycle event on init', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const events: RenderEvent[] = [];
+      const emitEvent = (e: RenderEvent) => events.push(e);
+
+      // Simulate the lifecycle event emission
+      const mountedEvent: RenderLifecycleEvent = {
+        type: 'lifecycle',
+        event: 'mounted',
+        scope: 'spec',
+      };
+      emitEvent(mountedEvent);
+
+      expect(events).toHaveLength(1);
+      expect(events[0].type).toBe('lifecycle');
+      expect((events[0] as RenderLifecycleEvent).event).toBe('mounted');
+      expect((events[0] as RenderLifecycleEvent).scope).toBe('spec');
+    });
+  });
+
+  it('should emit spec destroyed lifecycle event on destroy', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const events: RenderEvent[] = [];
+      const emitEvent = (e: RenderEvent) => events.push(e);
+
+      const destroyedEvent: RenderLifecycleEvent = {
+        type: 'lifecycle',
+        event: 'destroyed',
+        scope: 'spec',
+      };
+      emitEvent(destroyedEvent);
+
+      expect(events).toHaveLength(1);
+      expect((events[0] as RenderLifecycleEvent).event).toBe('destroyed');
+    });
+  });
+
+  it('should emit state change events when store is mutated', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const store = signalStateStore({ count: 0 });
+      const events: RenderEvent[] = [];
+      const emitEvent = (e: RenderEvent) => events.push(e);
+
+      // Subscribe to store and emit state change events
+      store.subscribe(() => {
+        const snapshot = store.getSnapshot();
+        emitEvent({
+          type: 'stateChange',
+          path: '/count',
+          value: snapshot['count'],
+          snapshot: snapshot as Record<string, unknown>,
+        });
+      });
+
+      store.set('/count', 5);
+
+      expect(events).toHaveLength(1);
+      expect(events[0].type).toBe('stateChange');
+    });
+  });
+});
+```
+
+- [ ] **Step 2: Run tests to verify they pass (these are unit-level, testing the event shapes)**
+
+Run: `npx nx test render --testPathPattern=render-spec`
+Expected: PASS
+
+- [ ] **Step 3: Implement RenderSpecComponent changes**
+
+Modify `libs/render/src/lib/render-spec.component.ts` to add:
+
+1. Import `output`, `OnInit`, `OnDestroy`, `DestroyRef`, `inject` from Angular
+2. Import `RenderEvent` type
+3. Add `readonly events = output<RenderEvent>();`
+4. Implement `OnInit` to emit `{ type: 'lifecycle', event: 'mounted', scope: 'spec' }`
+5. Use `DestroyRef` to emit `{ type: 'lifecycle', event: 'destroyed', scope: 'spec' }`
+6. Subscribe to resolved store changes and emit `RenderStateChangeEvent`
+7. Wire `emitEvent` into `_context` so child elements can emit through the same channel
+8. Wrap existing handlers to emit `RenderHandlerEvent` after execution
+
+Full implementation:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  input,
+  OnInit,
+  output,
+} from '@angular/core';
+import type { ComputedFunction, Spec, StateStore } from '@json-render/core';
+
+import { RenderElementComponent } from './render-element.component';
+import { RENDER_CONFIG } from './provide-render';
+import { RENDER_CONTEXT } from './contexts/render-context';
+import type { RenderContext } from './contexts/render-context';
+import type { AngularRegistry } from './render.types';
+import { signalStateStore } from './signal-state-store';
+import type { RenderEvent } from './render-event';
+
+@Component({
+  selector: 'render-spec',
+  standalone: true,
+  imports: [RenderElementComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    {
+      provide: RENDER_CONTEXT,
+      useFactory: () => inject(RenderSpecComponent)._context(),
+    },
+  ],
+  template: `
+    @if (spec()?.root; as rootKey) {
+      <render-element [elementKey]="rootKey" [spec]="spec()!" />
+    }
+  `,
+})
+export class RenderSpecComponent implements OnInit {
+  readonly spec = input<Spec | null>(null);
+  readonly registry = input<AngularRegistry | undefined>(undefined);
+  readonly store = input<StateStore | undefined>(undefined);
+  readonly functions = input<Record<string, ComputedFunction> | undefined>(undefined);
+  readonly handlers = input<Record<string, (params: Record<string, unknown>) => unknown | Promise<unknown>> | undefined>(undefined);
+  readonly loading = input<boolean>(false);
+  readonly events = output<RenderEvent>();
+
+  private readonly config = inject(RENDER_CONFIG, { optional: true });
+  private readonly destroyRef = inject(DestroyRef);
+
+  private _internalStore: StateStore | undefined;
+
+  private getOrCreateInternalStore(): StateStore {
+    if (!this._internalStore) {
+      this._internalStore = signalStateStore(this.spec()?.state ?? {});
+    }
+    return this._internalStore;
+  }
+
+  private readonly resolvedStore = computed<StateStore>(() => {
+    const inputStore = this.store();
+    if (inputStore) return inputStore;
+    const configStore = this.config?.store;
+    if (configStore) return configStore;
+    return this.getOrCreateInternalStore();
+  });
+
+  private readonly resolvedRegistry = computed<AngularRegistry>(() => {
+    const inputRegistry = this.registry();
+    if (inputRegistry) return inputRegistry;
+    const configRegistry = this.config?.registry;
+    if (configRegistry) return configRegistry;
+    return { get: () => undefined, names: () => [] };
+  });
+
+  /** Wraps input handlers to emit RenderHandlerEvent after execution. */
+  private readonly wrappedHandlers = computed(() => {
+    const inputHandlers = this.handlers() ?? this.config?.handlers;
+    if (!inputHandlers) return undefined;
+    const wrapped: Record<string, (params: Record<string, unknown>) => unknown | Promise<unknown>> = {};
+    for (const [name, handler] of Object.entries(inputHandlers)) {
+      wrapped[name] = (params: Record<string, unknown>) => {
+        const result = handler(params);
+        if (result instanceof Promise) {
+          result.then((r) => {
+            this.events.emit({ type: 'handler', action: name, params, result: r });
+          });
+        } else {
+          this.events.emit({ type: 'handler', action: name, params, result });
+        }
+        return result;
+      };
+    }
+    return wrapped;
+  });
+
+  private readonly emitEvent = (event: RenderEvent) => {
+    this.events.emit(event);
+  };
+
+  readonly _context = computed<RenderContext>(() => ({
+    registry: this.resolvedRegistry(),
+    store: this.resolvedStore(),
+    functions: this.functions() ?? this.config?.functions,
+    handlers: this.wrappedHandlers(),
+    emitEvent: this.emitEvent,
+    loading: this.loading(),
+  }));
+
+  constructor() {
+    // Subscribe to store changes and emit state change events
+    effect(() => {
+      const store = this.resolvedStore();
+      const unsub = store.subscribe(() => {
+        const snapshot = store.getSnapshot() as Record<string, unknown>;
+        this.events.emit({
+          type: 'stateChange',
+          path: '/',
+          value: snapshot,
+          snapshot,
+        });
+      });
+      this.destroyRef.onDestroy(unsub);
+    });
+
+    // Emit destroyed lifecycle on destroy
+    this.destroyRef.onDestroy(() => {
+      this.events.emit({ type: 'lifecycle', event: 'destroyed', scope: 'spec' });
+    });
+  }
+
+  ngOnInit(): void {
+    this.events.emit({ type: 'lifecycle', event: 'mounted', scope: 'spec' });
+  }
+}
+```
+
+- [ ] **Step 4: Run tests to verify everything passes**
+
+Run: `npx nx test render`
+Expected: PASS — all existing + new tests green
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add libs/render/src/lib/render-spec.component.ts libs/render/src/lib/render-spec.component.spec.ts
+git commit -m "feat(render): add events output with lifecycle and state change emission to RenderSpecComponent"
+```
+
+---
+
+### Task 4: RenderElementComponent Handler Event Emission + Opt-In Element Lifecycle
+
+**Files:**
+- Modify: `libs/render/src/lib/render-element.component.ts`
+
+- [ ] **Step 1: Update emitFn to emit handler events through context**
+
+The `emitFn` in `RenderElementComponent` (line 98) currently calls handlers directly. Update it to also emit a `RenderHandlerEvent` via `ctx.emitEvent`. Since `RenderSpecComponent` now wraps handlers, handler events are already emitted through the wrapped handlers. So the `emitFn` does not need additional changes for handler events.
+
+For element lifecycle, add opt-in support: if `element().lifecycle` is truthy, emit lifecycle events.
+
+Modify `libs/render/src/lib/render-element.component.ts`:
+
+Add `DestroyRef`, `OnInit` imports and implement:
+
+```typescript
+// Add to imports
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  inject,
+  Injector,
+  input,
+  OnInit,
+  type Signal,
+} from '@angular/core';
+
+// Add to the class body, after the existing properties:
+
+private readonly destroyRef = inject(DestroyRef);
+
+constructor() {
+  // Opt-in element lifecycle
+  this.destroyRef.onDestroy(() => {
+    const el = this.element();
+    if (el && (el as any)['lifecycle'] && this.ctx.emitEvent) {
+      this.ctx.emitEvent({
+        type: 'lifecycle',
+        event: 'destroyed',
+        scope: 'element',
+        elementKey: this.elementKey(),
+        elementType: el.type,
+      });
+    }
+  });
+}
+
+ngOnInit(): void {
+  const el = this.element();
+  if (el && (el as any)['lifecycle'] && this.ctx.emitEvent) {
+    this.ctx.emitEvent({
+      type: 'lifecycle',
+      event: 'mounted',
+      scope: 'element',
+      elementKey: this.elementKey(),
+      elementType: el.type,
+    });
+  }
+}
+```
+
+Add `implements OnInit` to the class declaration.
+
+- [ ] **Step 2: Run tests**
+
+Run: `npx nx test render`
+Expected: PASS — element lifecycle is opt-in, existing tests unaffected
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add libs/render/src/lib/render-element.component.ts
+git commit -m "feat(render): add opt-in element lifecycle emission to RenderElementComponent"
+```
+
+---
+
+### Task 5: New A2UI Components — Video & AudioPlayer (Display-Only)
+
+**Files:**
+- Create: `libs/chat/src/lib/a2ui/catalog/video.component.ts`
+- Create: `libs/chat/src/lib/a2ui/catalog/audio-player.component.ts`
+
+- [ ] **Step 1: Create Video component**
+
+Create `libs/chat/src/lib/a2ui/catalog/video.component.ts`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'a2ui-video',
+  standalone: true,
+  template: `
+    <video
+      class="w-full rounded-lg"
+      [src]="url()"
+      [poster]="poster()"
+      [autoplay]="autoplay()"
+      [controls]="controls()"
+    ></video>
+  `,
+})
+export class A2uiVideoComponent {
+  readonly url = input.required<string>();
+  readonly poster = input<string>('');
+  readonly autoplay = input<boolean>(false);
+  readonly controls = input<boolean>(true);
+}
+```
+
+- [ ] **Step 2: Create AudioPlayer component**
+
+Create `libs/chat/src/lib/a2ui/catalog/audio-player.component.ts`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'a2ui-audio-player',
+  standalone: true,
+  template: `
+    <audio
+      class="w-full"
+      [src]="url()"
+      [autoplay]="autoplay()"
+      [controls]="controls()"
+    ></audio>
+  `,
+})
+export class A2uiAudioPlayerComponent {
+  readonly url = input.required<string>();
+  readonly autoplay = input<boolean>(false);
+  readonly controls = input<boolean>(true);
+}
+```
+
+- [ ] **Step 3: Run build to verify components compile**
+
+Run: `npx nx test chat --testPathPattern=surface`
+Expected: PASS (components not registered yet, just verifying they compile)
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add libs/chat/src/lib/a2ui/catalog/video.component.ts libs/chat/src/lib/a2ui/catalog/audio-player.component.ts
+git commit -m "feat(a2ui): add Video and AudioPlayer display components"
+```
+
+---
+
+### Task 6: New A2UI Components — Slider & DateTimeInput (With Bindings)
+
+**Files:**
+- Create: `libs/chat/src/lib/a2ui/catalog/slider.component.ts`
+- Create: `libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts`
+
+- [ ] **Step 1: Create Slider component**
+
+Create `libs/chat/src/lib/a2ui/catalog/slider.component.ts`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'a2ui-slider',
+  standalone: true,
+  template: `
+    <div class="flex flex-col gap-1">
+      @if (label()) {
+        <label class="text-xs text-white/60">{{ label() }}: {{ value() }}</label>
+      }
+      <input
+        type="range"
+        [min]="min()"
+        [max]="max()"
+        [step]="step()"
+        [value]="value()"
+        class="w-full"
+        (input)="onInput($event)"
+      />
+    </div>
+  `,
+})
+export class A2uiSliderComponent {
+  readonly label = input<string>('');
+  readonly value = input<number>(0);
+  readonly min = input<number>(0);
+  readonly max = input<number>(100);
+  readonly step = input<number>(1);
+  readonly _bindings = input<Record<string, string>>({});
+  readonly emit = input<(event: string) => void>(() => { /* noop */ });
+
+  onInput(event: Event): void {
+    const val = Number((event.target as HTMLInputElement).value);
+    const path = this._bindings()?.['value'];
+    if (path) {
+      this.emit()(`a2ui:datamodel:${path}:${val}`);
+    }
+  }
+}
+```
+
+- [ ] **Step 2: Create DateTimeInput component**
+
+Create `libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'a2ui-date-time-input',
+  standalone: true,
+  template: `
+    <div class="flex flex-col gap-1">
+      @if (label()) {
+        <label class="text-xs text-white/60">{{ label() }}</label>
+      }
+      <input
+        [type]="inputType()"
+        [value]="value()"
+        [min]="min()"
+        [max]="max()"
+        class="bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white"
+        (change)="onChange($event)"
+      />
+    </div>
+  `,
+})
+export class A2uiDateTimeInputComponent {
+  readonly label = input<string>('');
+  readonly value = input<string>('');
+  readonly inputType = input<'date' | 'time' | 'datetime-local'>('date');
+  readonly min = input<string>('');
+  readonly max = input<string>('');
+  readonly _bindings = input<Record<string, string>>({});
+  readonly emit = input<(event: string) => void>(() => { /* noop */ });
+
+  onChange(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    const path = this._bindings()?.['value'];
+    if (path) {
+      this.emit()(`a2ui:datamodel:${path}:${val}`);
+    }
+  }
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add libs/chat/src/lib/a2ui/catalog/slider.component.ts libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts
+git commit -m "feat(a2ui): add Slider and DateTimeInput components with two-way bindings"
+```
+
+---
+
+### Task 7: New A2UI Components — Tabs
+
+**Files:**
+- Create: `libs/chat/src/lib/a2ui/catalog/tabs.component.ts`
+
+- [ ] **Step 1: Create Tabs component**
+
+Create `libs/chat/src/lib/a2ui/catalog/tabs.component.ts`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input, signal } from '@angular/core';
+import type { Spec } from '@json-render/core';
+import { RenderElementComponent } from '@cacheplane/render';
+
+@Component({
+  selector: 'a2ui-tabs',
+  standalone: true,
+  imports: [RenderElementComponent],
+  template: `
+    <div class="flex flex-col gap-0">
+      <div class="flex border-b border-white/10" role="tablist">
+        @for (tab of tabs(); track $index) {
+          <button
+            role="tab"
+            class="px-4 py-2 text-sm font-medium transition-colors border-b-2"
+            [class]="$index === activeIndex() ? 'border-blue-500 text-white' : 'border-transparent text-white/50 hover:text-white/80'"
+            [attr.aria-selected]="$index === activeIndex()"
+            (click)="selectTab($index)"
+          >{{ tab.label }}</button>
+        }
+      </div>
+      <div class="pt-3" role="tabpanel">
+        @for (key of activeChildKeys(); track key) {
+          <render-element [elementKey]="key" [spec]="spec()" />
+        }
+      </div>
+    </div>
+  `,
+})
+export class A2uiTabsComponent {
+  readonly tabs = input<{ label: string; childKeys: string[] }[]>([]);
+  readonly selected = input<number>(0);
+  readonly childKeys = input<string[]>([]);
+  readonly spec = input.required<Spec>();
+  readonly _bindings = input<Record<string, string>>({});
+  readonly emit = input<(event: string) => void>(() => { /* noop */ });
+
+  protected readonly activeIndex = signal(0);
+
+  constructor() {
+    // Sync initial selected value
+    const sel = this.selected;
+    if (typeof sel === 'function') {
+      this.activeIndex.set(sel());
+    }
+  }
+
+  get activeChildKeys(): () => string[] {
+    return () => {
+      const idx = this.activeIndex();
+      const allTabs = this.tabs();
+      if (idx >= 0 && idx < allTabs.length) {
+        return allTabs[idx].childKeys;
+      }
+      return [];
+    };
+  }
+
+  selectTab(index: number): void {
+    this.activeIndex.set(index);
+    const path = this._bindings()?.['selected'];
+    if (path) {
+      this.emit()(`a2ui:datamodel:${path}:${index}`);
+    }
+  }
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add libs/chat/src/lib/a2ui/catalog/tabs.component.ts
+git commit -m "feat(a2ui): add Tabs component with tab switching and optional binding"
+```
+
+---
+
+### Task 8: New A2UI Components — Modal
+
+**Files:**
+- Create: `libs/chat/src/lib/a2ui/catalog/modal.component.ts`
+
+- [ ] **Step 1: Create Modal component**
+
+Create `libs/chat/src/lib/a2ui/catalog/modal.component.ts`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input } from '@angular/core';
+import type { Spec } from '@json-render/core';
+import { RenderElementComponent } from '@cacheplane/render';
+
+@Component({
+  selector: 'a2ui-modal',
+  standalone: true,
+  imports: [RenderElementComponent],
+  template: `
+    @if (open()) {
+      <div
+        class="fixed inset-0 z-50 flex items-center justify-center"
+        role="dialog"
+        aria-modal="true"
+      >
+        <!-- Backdrop -->
+        <div
+          class="absolute inset-0 bg-black/60 backdrop-blur-sm"
+          (click)="onBackdropClick()"
+        ></div>
+        <!-- Dialog -->
+        <div class="relative bg-gray-900 border border-white/10 rounded-xl p-6 max-w-lg w-full mx-4 shadow-2xl">
+          @if (title()) {
+            <h2 class="text-lg font-semibold mb-4">{{ title() }}</h2>
+          }
+          @for (key of childKeys(); track key) {
+            <render-element [elementKey]="key" [spec]="spec()" />
+          }
+        </div>
+      </div>
+    }
+  `,
+})
+export class A2uiModalComponent {
+  readonly title = input<string>('');
+  readonly open = input<boolean>(false);
+  readonly childKeys = input<string[]>([]);
+  readonly spec = input.required<Spec>();
+  readonly dismissible = input<boolean>(true);
+  readonly _bindings = input<Record<string, string>>({});
+  readonly emit = input<(event: string) => void>(() => { /* noop */ });
+
+  onBackdropClick(): void {
+    if (!this.dismissible()) return;
+    const path = this._bindings()?.['open'];
+    if (path) {
+      this.emit()(`a2ui:datamodel:${path}:false`);
+    }
+  }
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add libs/chat/src/lib/a2ui/catalog/modal.component.ts
+git commit -m "feat(a2ui): add Modal component with backdrop dismiss and open binding"
+```
+
+---
+
+### Task 9: Register All 6 New Components in Catalog
+
+**Files:**
+- Modify: `libs/chat/src/lib/a2ui/catalog/index.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+We don't have a dedicated catalog test file, so we'll verify via the existing surface spec. First, update the catalog registration.
+
+- [ ] **Step 2: Update catalog index**
+
+Modify `libs/chat/src/lib/a2ui/catalog/index.ts`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { views, type ViewRegistry } from '@cacheplane/render';
+import { A2uiTextComponent } from './text.component';
+import { A2uiImageComponent } from './image.component';
+import { A2uiIconComponent } from './icon.component';
+import { A2uiDividerComponent } from './divider.component';
+import { A2uiRowComponent } from './row.component';
+import { A2uiColumnComponent } from './column.component';
+import { A2uiCardComponent } from './card.component';
+import { A2uiListComponent } from './list.component';
+import { A2uiButtonComponent } from './button.component';
+import { A2uiTextFieldComponent } from './text-field.component';
+import { A2uiCheckBoxComponent } from './check-box.component';
+import { A2uiChoicePickerComponent } from './choice-picker.component';
+import { A2uiTabsComponent } from './tabs.component';
+import { A2uiModalComponent } from './modal.component';
+import { A2uiVideoComponent } from './video.component';
+import { A2uiAudioPlayerComponent } from './audio-player.component';
+import { A2uiDateTimeInputComponent } from './date-time-input.component';
+import { A2uiSliderComponent } from './slider.component';
+
+export function a2uiBasicCatalog(): ViewRegistry {
+  return views({
+    Text: A2uiTextComponent,
+    Image: A2uiImageComponent,
+    Icon: A2uiIconComponent,
+    Divider: A2uiDividerComponent,
+    Row: A2uiRowComponent,
+    Column: A2uiColumnComponent,
+    Card: A2uiCardComponent,
+    List: A2uiListComponent,
+    Button: A2uiButtonComponent,
+    TextField: A2uiTextFieldComponent,
+    CheckBox: A2uiCheckBoxComponent,
+    ChoicePicker: A2uiChoicePickerComponent,
+    Tabs: A2uiTabsComponent,
+    Modal: A2uiModalComponent,
+    Video: A2uiVideoComponent,
+    AudioPlayer: A2uiAudioPlayerComponent,
+    DateTimeInput: A2uiDateTimeInputComponent,
+    Slider: A2uiSliderComponent,
+  });
+}
+```
+
+- [ ] **Step 3: Run tests to verify nothing breaks**
+
+Run: `npx nx test chat`
+Expected: PASS
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add libs/chat/src/lib/a2ui/catalog/index.ts
+git commit -m "feat(a2ui): register 6 new components in catalog (18 total)"
+```
+
+---
+
+### Task 10: A2UI Action → Spec `on` Binding Bridge
+
+**Files:**
+- Modify: `libs/chat/src/lib/a2ui/surface.component.ts`
+- Modify: `libs/chat/src/lib/a2ui/surface.component.spec.ts`
+
+- [ ] **Step 1: Write the failing tests**
+
+Add to `libs/chat/src/lib/a2ui/surface.component.spec.ts`:
+
+```typescript
+describe('surfaceToSpec — action mapping', () => {
+  it('maps event action to spec on binding', () => {
+    const surface = makeSurface([
+      { id: 'root', component: 'Column', children: ['btn'] },
+      {
+        id: 'btn',
+        component: 'Button',
+        label: 'Submit',
+        action: { event: { name: 'formSubmit', context: { formId: 'signup' } } },
+      },
+    ]);
+    const spec = surfaceToSpec(surface)!;
+    const btnElement = spec.elements['btn'];
+    expect(btnElement.on).toBeDefined();
+    expect(btnElement.on!['click']).toEqual({
+      action: 'a2ui:event',
+      params: { surfaceId: 's1', name: 'formSubmit', context: { formId: 'signup' } },
+    });
+    // action should not be in props
+    expect(btnElement.props['action']).toBeUndefined();
+  });
+
+  it('maps local action to spec on binding', () => {
+    const surface = makeSurface([
+      { id: 'root', component: 'Column', children: ['btn'] },
+      {
+        id: 'btn',
+        component: 'Button',
+        label: 'Open',
+        action: { functionCall: { call: 'openUrl', args: { url: 'https://example.com' } } },
+      },
+    ]);
+    const spec = surfaceToSpec(surface)!;
+    const btnElement = spec.elements['btn'];
+    expect(btnElement.on!['click']).toEqual({
+      action: 'a2ui:localAction',
+      params: { call: 'openUrl', args: { url: 'https://example.com' } },
+    });
+  });
+
+  it('passes through elements without actions unchanged', () => {
+    const surface = makeSurface([
+      { id: 'root', component: 'Text', text: 'Hello' },
+    ]);
+    const spec = surfaceToSpec(surface)!;
+    expect(spec.elements['root'].on).toBeUndefined();
+  });
+});
+
+describe('surfaceToSpec — state initialization', () => {
+  it('initializes spec state from surface dataModel', () => {
+    const surface = makeSurface(
+      [{ id: 'root', component: 'Text', text: 'Hi' }],
+      { count: 0, name: 'test' },
+    );
+    const spec = surfaceToSpec(surface)!;
+    expect(spec.state).toEqual({ count: 0, name: 'test' });
+  });
+});
+```
+
+- [ ] **Step 2: Run tests to verify they fail**
+
+Run: `npx nx test chat --testPathPattern=surface.component`
+Expected: FAIL — `on` is undefined, `state` is undefined
+
+- [ ] **Step 3: Update surfaceToSpec()**
+
+Modify `libs/chat/src/lib/a2ui/surface.component.ts` — update the `surfaceToSpec` function:
+
+1. Map `action` to `on` bindings instead of passing as prop
+2. Initialize spec `state` from `surface.dataModel`
+
+```typescript
+export function surfaceToSpec(surface: A2uiSurface): Spec | null {
+  if (!surface.components.has('root')) return null;
+
+  const elements: Record<string, any> = {};
+
+  for (const [id, comp] of surface.components) {
+    const props: Record<string, unknown> = {};
+
+    const reserved = new Set(['id', 'component', 'children', 'action', 'checks']);
+    const bindings: Record<string, string> = {};
+    for (const [key, value] of Object.entries(comp)) {
+      if (reserved.has(key)) continue;
+      if (typeof value === 'object' && value !== null && 'path' in value && !('call' in value)) {
+        bindings[key] = (value as any).path;
+      }
+      props[key] = resolveDynamic(value, surface.dataModel);
+    }
+    if (Object.keys(bindings).length > 0) {
+      props['_bindings'] = bindings;
+    }
+    // Pass checks through as prop (validation is component-level)
+    if (comp.checks) {
+      props['checks'] = comp.checks;
+    }
+
+    // Map action to spec on binding
+    let on: Record<string, unknown> | undefined;
+    if (comp.action) {
+      const action = comp.action;
+      if ('event' in action) {
+        on = {
+          click: {
+            action: 'a2ui:event',
+            params: {
+              surfaceId: surface.surfaceId,
+              name: action.event.name,
+              context: action.event.context,
+            },
+          },
+        };
+      } else if ('functionCall' in action) {
+        on = {
+          click: {
+            action: 'a2ui:localAction',
+            params: {
+              call: action.functionCall.call,
+              args: action.functionCall.args,
+            },
+          },
+        };
+      }
+    }
+
+    // Map children
+    let children: string[] | undefined;
+    if (Array.isArray(comp.children)) {
+      children = comp.children as string[];
+    } else if (comp.children && typeof comp.children === 'object' && 'path' in comp.children) {
+      const template = comp.children as A2uiChildTemplate;
+      const arr = getByPointer(surface.dataModel, template.path);
+      if (Array.isArray(arr)) {
+        children = arr.map((_, i) => `${template.componentId}__${i}`);
+        const templateComp = surface.components.get(template.componentId);
+        if (templateComp) {
+          for (let i = 0; i < arr.length; i++) {
+            const scope = { basePath: `${template.path}/${i}`, item: arr[i] };
+            const itemProps: Record<string, unknown> = {};
+            const tplReserved = new Set(['id', 'component', 'children', 'action', 'checks']);
+            for (const [key, value] of Object.entries(templateComp)) {
+              if (tplReserved.has(key)) continue;
+              itemProps[key] = resolveDynamic(value, surface.dataModel, scope);
+            }
+            elements[`${template.componentId}__${i}`] = {
+              type: templateComp.component,
+              props: itemProps,
+            };
+          }
+        }
+      }
+    }
+
+    elements[id] = {
+      type: comp.component,
+      props,
+      ...(children ? { children } : {}),
+      ...(on ? { on } : {}),
+    };
+  }
+
+  return { root: 'root', elements, state: surface.dataModel } as Spec;
+}
+```
+
+- [ ] **Step 4: Run tests to verify they pass**
+
+Run: `npx nx test chat --testPathPattern=surface.component`
+Expected: PASS — all existing + new tests green
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add libs/chat/src/lib/a2ui/surface.component.ts libs/chat/src/lib/a2ui/surface.component.spec.ts
+git commit -m "feat(a2ui): map actions to spec on bindings and initialize state from dataModel"
+```
+
+---
+
+### Task 11: A2UI Default Handlers + Event Output on Surface Component
+
+**Files:**
+- Modify: `libs/chat/src/lib/a2ui/surface.component.ts`
+
+- [ ] **Step 1: Add default handlers and events output**
+
+Update `A2uiSurfaceComponent` to provide handlers and pipe events:
+
+```typescript
+import {
+  Component, computed, input, output, ChangeDetectionStrategy,
+} from '@angular/core';
+import type { Spec } from '@json-render/core';
+import type { A2uiSurface, A2uiChildTemplate } from '@cacheplane/a2ui';
+import { resolveDynamic, getByPointer } from '@cacheplane/a2ui';
+import { RenderSpecComponent, toRenderRegistry } from '@cacheplane/render';
+import type { ViewRegistry, RenderEvent } from '@cacheplane/render';
+import { runLocalAction } from '@cacheplane/a2ui';
+
+// ... surfaceToSpec function stays as-is from Task 10 ...
+
+@Component({
+  selector: 'a2ui-surface',
+  standalone: true,
+  imports: [RenderSpecComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (spec(); as s) {
+      <render-spec
+        [spec]="s"
+        [registry]="registry()"
+        [handlers]="handlers"
+        (events)="onRenderEvent($event)"
+      />
+    }
+  `,
+})
+export class A2uiSurfaceComponent {
+  readonly surface = input.required<A2uiSurface>();
+  readonly catalog = input.required<ViewRegistry>();
+  readonly events = output<RenderEvent>();
+
+  readonly spec = computed(() => surfaceToSpec(this.surface()));
+  readonly registry = computed(() => toRenderRegistry(this.catalog()));
+
+  readonly handlers: Record<string, (params: Record<string, unknown>) => unknown> = {
+    'a2ui:event': (params) => {
+      // Handler exists so render-lib executes it and emits RenderHandlerEvent.
+      // Consumer receives it via events output.
+      return params;
+    },
+    'a2ui:localAction': (params) => {
+      const call = params['call'] as string;
+      const args = (params['args'] as Record<string, unknown>) ?? {};
+      if (call === 'openUrl' && typeof globalThis.window !== 'undefined') {
+        globalThis.window.open(String(args['url'] ?? ''), '_blank');
+      }
+      return undefined;
+    },
+  };
+
+  onRenderEvent(event: RenderEvent): void {
+    this.events.emit(event);
+  }
+}
+```
+
+Note: `RenderEvent` type import comes from `@cacheplane/render` (exported in Task 1).
+
+- [ ] **Step 2: Update Button component to use emit('click') instead of direct action handling**
+
+Modify `libs/chat/src/lib/a2ui/catalog/button.component.ts` — now that actions are mapped to `on` bindings, the Button just needs to call `emit('click')`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input } from '@angular/core';
+import type { A2uiCheck } from '@cacheplane/a2ui';
+import { validateChecks } from '@cacheplane/a2ui';
+
+@Component({
+  selector: 'a2ui-button',
+  standalone: true,
+  template: `
+    <button
+      class="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+      [class]="variant() === 'borderless' ? 'bg-transparent hover:bg-white/10' : 'bg-blue-600 hover:bg-blue-700 text-white'"
+      [disabled]="disabled() || !isValid()"
+      (click)="handleClick()"
+    >{{ label() }}</button>
+  `,
+})
+export class A2uiButtonComponent {
+  readonly label = input<string>('');
+  readonly variant = input<string>('primary');
+  readonly disabled = input<boolean>(false);
+  readonly checks = input<A2uiCheck[]>([]);
+  readonly emit = input<(event: string) => void>(() => { /* noop */ });
+
+  isValid(): boolean {
+    const c = this.checks();
+    if (!c || c.length === 0) return true;
+    return validateChecks(c).valid;
+  }
+
+  handleClick(): void {
+    this.emit()('click');
+  }
+}
+```
+
+- [ ] **Step 3: Run tests**
+
+Run: `npx nx test chat`
+Expected: PASS
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add libs/chat/src/lib/a2ui/surface.component.ts libs/chat/src/lib/a2ui/catalog/button.component.ts
+git commit -m "feat(a2ui): add default handlers and events output to A2uiSurfaceComponent"
+```
+
+---
+
+### Task 12: ChatComponent — Remove Hardcoded Catalog + Add renderEvent Output
+
+**Files:**
+- Create: `libs/chat/src/lib/compositions/chat/chat-render-event.ts`
+- Modify: `libs/chat/src/lib/compositions/chat/chat.component.ts`
+- Modify: `libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts`
+
+- [ ] **Step 1: Create ChatRenderEvent type**
+
+Create `libs/chat/src/lib/compositions/chat/chat-render-event.ts`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import type { RenderEvent } from '@cacheplane/render';
+
+export interface ChatRenderEvent {
+  readonly messageIndex: number;
+  readonly surfaceId?: string;
+  readonly event: RenderEvent;
+}
+```
+
+- [ ] **Step 2: Add events output to ChatGenerativeUiComponent**
+
+Modify `libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts`:
+
+```typescript
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import {
+  Component,
+  input,
+  output,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+import type { Spec, StateStore } from '@json-render/core';
+import type { AngularRegistry, RenderEvent } from '@cacheplane/render';
+import { RenderSpecComponent } from '@cacheplane/render';
+
+@Component({
+  selector: 'chat-generative-ui',
+  standalone: true,
+  imports: [RenderSpecComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (spec()) {
+      <render-spec
+        [spec]="spec()"
+        [registry]="registry()"
+        [store]="store()"
+        [loading]="loading()"
+        (events)="events.emit($event)"
+      />
+    }
+  `,
+})
+export class ChatGenerativeUiComponent {
+  readonly spec = input<Spec | null>(null);
+  readonly registry = input<AngularRegistry | undefined>(undefined);
+  readonly store = input<StateStore | undefined>(undefined);
+  readonly loading = input<boolean>(false);
+  readonly events = output<RenderEvent>();
+}
+```
+
+- [ ] **Step 3: Update ChatComponent**
+
+Modify `libs/chat/src/lib/compositions/chat/chat.component.ts`:
+
+Key changes:
+1. Remove `protected readonly a2uiCatalog = a2uiBasicCatalog();` (line 221)
+2. Remove `a2uiBasicCatalog` import (line 33)
+3. Add `renderEvent` output
+4. Add `ChatRenderEvent` import
+5. Compute catalog from `views` input for A2UI surfaces (no fallback)
+6. Update template to pipe events from both `<chat-generative-ui>` and `<a2ui-surface>`
+
+```typescript
+// Add imports
+import type { RenderEvent } from '@cacheplane/render';
+import type { ChatRenderEvent } from './chat-render-event';
+
+// In the class:
+readonly renderEvent = output<ChatRenderEvent>();
+
+// Replace the hardcoded a2uiCatalog with:
+// (removed — views input is used directly)
+
+// Update template for chat-generative-ui (around line 140):
+// <chat-generative-ui
+//   [spec]="spec"
+//   [registry]="renderRegistry()"
+//   [store]="store()"
+//   [loading]="ref().isLoading()"
+//   (events)="onSpecEvent($event, index)"
+// />
+
+// Update template for a2ui-surface (around line 150):
+// @if (views(); as catalog) {
+//   <a2ui-surface
+//     [surface]="entry.value"
+//     [catalog]="catalog"
+//     (events)="onA2uiEvent($event, index, entry.key)"
+//   />
+// }
+
+// Add methods:
+// onSpecEvent(event: RenderEvent, messageIndex: number): void {
+//   this.renderEvent.emit({ messageIndex, event });
+// }
+//
+// onA2uiEvent(event: RenderEvent, messageIndex: number, surfaceId: string): void {
+//   this.renderEvent.emit({ messageIndex, surfaceId, event });
+// }
+```
+
+Full updated template section for AI messages (lines 122-158):
+
+```html
+<ng-template chatMessageTemplate="ai" let-message let-index="index">
+  @let content = messageContent(message);
+  @let classified = classifyMessage(content, index);
+  <div class="flex gap-3">
+    <div
+      class="w-7 h-7 flex items-center justify-center text-xs font-semibold shrink-0 mt-0.5"
+      style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
+    >A</div>
+    <div class="flex-1 min-w-0 flex flex-col gap-2">
+      @if (classified.markdown(); as md) {
+        <div
+          class="chat-md break-words text-[length:var(--chat-font-size)] leading-[var(--chat-line-height)]"
+          style="color: var(--chat-text);"
+          [innerHTML]="renderMd(md)"
+        ></div>
+      }
+
+      @if (classified.spec(); as spec) {
+        <chat-generative-ui
+          [spec]="spec"
+          [registry]="renderRegistry()"
+          [store]="store()"
+          [loading]="ref().isLoading()"
+          (events)="onSpecEvent($event, index)"
+        />
+      }
+
+      @if (classified.type() === 'a2ui') {
+        @if (views(); as catalog) {
+          @for (entry of classified.a2uiSurfaces() | keyvalue; track entry.key) {
+            <a2ui-surface
+              [surface]="entry.value"
+              [catalog]="catalog"
+              (events)="onA2uiEvent($event, index, entry.key)"
+            />
+          }
+        }
+      }
+    </div>
+  </div>
+</ng-template>
+```
+
+Full updated class (key parts):
+
+```typescript
+export class ChatComponent {
+  private readonly sanitizer = inject(DomSanitizer);
+
+  readonly ref = input.required<AgentRef<any, any>>();
+  readonly views = input<ViewRegistry | undefined>(undefined);
+  readonly store = input<StateStore | undefined>(undefined);
+  readonly threads = input<Thread[]>([]);
+  readonly activeThreadId = input<string>('');
+  readonly threadSelected = output<string>();
+  readonly renderEvent = output<ChatRenderEvent>();
+  readonly sidebarOpen = signal(false);
+
+  // ... rest of existing properties unchanged ...
+
+  onSpecEvent(event: RenderEvent, messageIndex: number): void {
+    this.renderEvent.emit({ messageIndex, event });
+  }
+
+  onA2uiEvent(event: RenderEvent, messageIndex: number, surfaceId: string): void {
+    this.renderEvent.emit({ messageIndex, surfaceId, event });
+  }
+}
+```
+
+- [ ] **Step 4: Run tests**
+
+Run: `npx nx test chat`
+Expected: PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add libs/chat/src/lib/compositions/chat/chat-render-event.ts libs/chat/src/lib/compositions/chat/chat.component.ts libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts
+git commit -m "feat(chat): add renderEvent output and remove hardcoded A2UI catalog"
+```
+
+---
+
+### Task 13: Export ChatRenderEvent from Chat Public API
+
+**Files:**
+- Modify: `libs/chat/src/public-api.ts` (or equivalent barrel export)
+
+- [ ] **Step 1: Find and update the chat library barrel export**
+
+Locate the chat library's public API and add:
+
+```typescript
+export type { ChatRenderEvent } from './lib/compositions/chat/chat-render-event';
+```
+
+- [ ] **Step 2: Run tests**
+
+Run: `npx nx test chat`
+Expected: PASS
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add libs/chat/src/public-api.ts
+git commit -m "feat(chat): export ChatRenderEvent type from public API"
+```
+
+---
+
+### Task 14: Documentation — Render Events Page
+
+**Files:**
+- Create: `apps/website/content/docs/render/events.mdx`
+
+- [ ] **Step 1: Create render events documentation**
+
+Create `apps/website/content/docs/render/events.mdx`:
+
+```mdx
+---
+title: Events
+description: Generalized event system for render-spec — handler events, state changes, and lifecycle signals.
+---
+
+# Render Events
+
+`RenderSpecComponent` emits a stream of typed events via its `events` output. This provides visibility into handler execution, state mutations, and component lifecycle without coupling to any specific transport.
+
+## Event Types
+
+All events are discriminated by the `type` field:
+
+```typescript
+type RenderEvent =
+  | RenderHandlerEvent
+  | RenderStateChangeEvent
+  | RenderLifecycleEvent;
+```
+
+### RenderHandlerEvent
+
+Emitted when a handler executes in response to a component event (e.g., button click).
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `type` | `'handler'` | Discriminant |
+| `action` | `string` | Handler name from the `on` binding |
+| `params` | `Record<string, unknown>` | Resolved parameters |
+| `result` | `unknown` | Return value (if sync or awaited) |
+
+### RenderStateChangeEvent
+
+Emitted when the `StateStore` is mutated via `set()` or `update()`.
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `type` | `'stateChange'` | Discriminant |
+| `path` | `string` | JSON Pointer path that changed |
+| `value` | `unknown` | New value |
+| `snapshot` | `Record<string, unknown>` | Full state after change |
+
+### RenderLifecycleEvent
+
+Emitted on component mount/destroy at spec or element level.
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `type` | `'lifecycle'` | Discriminant |
+| `event` | `'mounted' \| 'destroyed'` | Lifecycle phase |
+| `scope` | `'spec' \| 'element'` | Granularity |
+| `elementKey` | `string?` | Element key (element scope only) |
+| `elementType` | `string?` | Component type (element scope only) |
+
+## Usage
+
+```typescript
+<render-spec
+  [spec]="spec()"
+  [registry]="registry"
+  [handlers]="handlers"
+  (events)="onEvent($event)"
+/>
+```
+
+```typescript
+onEvent(event: RenderEvent) {
+  switch (event.type) {
+    case 'handler':
+      console.log(`Handler ${event.action} called with`, event.params);
+      break;
+    case 'stateChange':
+      console.log(`State changed at ${event.path}:`, event.value);
+      break;
+    case 'lifecycle':
+      console.log(`${event.scope} ${event.event}`, event.elementKey ?? '');
+      break;
+  }
+}
+```
+
+## Handlers + Events Together
+
+Input handlers execute locally. The `events` output notifies the consumer after execution:
+
+```typescript
+const handlers = {
+  saveForm: (params) => api.save(params),  // executes locally
+};
+
+// Consumer also sees: { type: 'handler', action: 'saveForm', params: {...}, result: {...} }
+```
+
+This means handlers handle, events notify. Use handlers for local side effects, events for routing to external systems.
+
+## Element Lifecycle (Opt-In)
+
+By default, only spec-level lifecycle events are emitted. To enable element-level lifecycle for a specific element, set `lifecycle: true` on the element in the spec:
+
+```json
+{
+  "root": "main",
+  "elements": {
+    "main": { "type": "Card", "props": {}, "lifecycle": true }
+  }
+}
+```
+
+This emits `mounted` and `destroyed` events for that element, including `elementKey` and `elementType`.
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/content/docs/render/events.mdx
+git commit -m "docs(render): add events page for render-lib event system"
+```
+
+---
+
+### Task 15: Documentation — Update A2UI Catalog Page
+
+**Files:**
+- Modify: `apps/website/content/docs/chat/a2ui/catalog.mdx`
+
+- [ ] **Step 1: Read existing catalog page**
+
+Read `apps/website/content/docs/chat/a2ui/catalog.mdx` to understand current structure.
+
+- [ ] **Step 2: Add 6 new component entries**
+
+Add sections for Tabs, Modal, Video, AudioPlayer, DateTimeInput, Slider following the existing component documentation pattern. Update the summary table count from 12 to 18. Add entries for each new component with props tables and example JSON.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/content/docs/chat/a2ui/catalog.mdx
+git commit -m "docs(a2ui): add 6 new components to catalog reference (18 total)"
+```
+
+---
+
+### Task 16: Documentation — Update A2UI Overview + Surface Component Pages
+
+**Files:**
+- Modify: `apps/website/content/docs/chat/a2ui/overview.mdx`
+- Modify: `apps/website/content/docs/chat/a2ui/surface-component.mdx`
+- Modify: `apps/website/content/docs/chat/a2ui/surface-store.mdx`
+
+- [ ] **Step 1: Read existing pages**
+
+Read all three files to understand current content.
+
+- [ ] **Step 2: Update overview.mdx**
+
+Add section on the action → event binding bridge. Explain how A2UI actions now map to spec `on` bindings and flow through the render-lib event system. Update architecture description.
+
+- [ ] **Step 3: Update surface-component.mdx**
+
+Document default handlers (`a2ui:event`, `a2ui:localAction`), the `events` output, and how `surfaceToSpec()` now maps actions to `on` bindings.
+
+- [ ] **Step 4: Update surface-store.mdx**
+
+Document the StateStore bridge — how A2UI data model syncs into the render-lib StateStore and how state change events replace the old `a2ui:datamodel` event pattern.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/website/content/docs/chat/a2ui/overview.mdx apps/website/content/docs/chat/a2ui/surface-component.mdx apps/website/content/docs/chat/a2ui/surface-store.mdx
+git commit -m "docs(a2ui): update overview, surface component, and surface store for event system"
+```
+
+---
+
+### Task 17: Documentation — Custom Catalogs Guide
+
+**Files:**
+- Create: `apps/website/content/docs/chat/guides/custom-catalogs.mdx`
+
+- [ ] **Step 1: Create custom catalogs guide**
+
+Create `apps/website/content/docs/chat/guides/custom-catalogs.mdx`:
+
+```mdx
+---
+title: Custom Catalogs
+description: Compose custom component catalogs for generative UI using ViewRegistry composition.
+---
+
+# Custom Catalogs
+
+Both json-render specs and A2UI surfaces render through the same `ViewRegistry`. You compose catalogs using the existing `views`, `withViews`, and `withoutViews` functions from `@cacheplane/render`.
+
+## Using the Built-In A2UI Catalog
+
+```typescript
+import { a2uiBasicCatalog } from '@cacheplane/chat';
+
+<chat [ref]="agentRef" [views]="a2uiBasicCatalog()" />
+```
+
+## Adding Custom Components
+
+```typescript
+import { withViews } from '@cacheplane/render';
+import { a2uiBasicCatalog } from '@cacheplane/chat';
+
+const catalog = withViews(a2uiBasicCatalog(), {
+  Chart: MyChartComponent,
+  DataGrid: MyDataGridComponent,
+});
+
+<chat [ref]="agentRef" [views]="catalog" />
+```
+
+## Overriding Built-In Components
+
+Use `views()` with spread to override specific components:
+
+```typescript
+import { views } from '@cacheplane/render';
+import { a2uiBasicCatalog } from '@cacheplane/chat';
+
+const catalog = views({
+  ...a2uiBasicCatalog(),
+  Button: MyBrandedButtonComponent,
+});
+```
+
+## Removing Components
+
+```typescript
+import { withoutViews } from '@cacheplane/render';
+import { a2uiBasicCatalog } from '@cacheplane/chat';
+
+const catalog = withoutViews(a2uiBasicCatalog(), 'Modal', 'Video');
+```
+
+## Custom-Only (No A2UI)
+
+```typescript
+import { views } from '@cacheplane/render';
+
+const catalog = views({
+  Chart: MyChartComponent,
+  Table: MyTableComponent,
+});
+
+<chat [ref]="agentRef" [views]="catalog" />
+```
+
+## No Generative UI
+
+If `views` is not provided, no generative UI renders. json-render specs and A2UI surfaces are silently skipped.
+
+```typescript
+<chat [ref]="agentRef" />
+```
+
+## Writing a Custom Component
+
+Custom components receive the standard `AngularComponentInputs`:
+
+```typescript
+@Component({
+  selector: 'my-chart',
+  standalone: true,
+  template: `<canvas #chart></canvas>`,
+})
+export class MyChartComponent {
+  readonly data = input<number[]>([]);
+  readonly title = input<string>('');
+  readonly childKeys = input<string[]>([]);
+  readonly spec = input.required<Spec>();
+  readonly emit = input<(event: string) => void>(() => {});
+  readonly loading = input<boolean>(false);
+}
+```
+
+The component receives resolved props as inputs. `childKeys` and `spec` enable recursive child rendering. `emit` triggers event handlers defined in the spec's `on` bindings.
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/content/docs/chat/guides/custom-catalogs.mdx
+git commit -m "docs(chat): add custom catalogs guide"
+```
+
+---
+
+### Task 18: Final Integration Test
+
+**Files:**
+- No new files — run full test suite
+
+- [ ] **Step 1: Run all tests**
+
+Run: `npx nx test render && npx nx test a2ui && npx nx test chat`
+Expected: PASS — all tests green
+
+- [ ] **Step 2: Run build**
+
+Run: `npx nx build agent --configuration=production`
+Expected: BUILD SUCCESS
+
+- [ ] **Step 3: Final commit (if any fixups needed)**
+
+If any tests or builds fail, fix and commit with appropriate message.
diff --git a/docs/superpowers/plans/2026-04-09-library-landing-pages.md b/docs/superpowers/plans/2026-04-09-library-landing-pages.md
new file mode 100644
index 000000000..daaab52a8
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-09-library-landing-pages.md
@@ -0,0 +1,1639 @@
+# Library Landing Pages & Home Page Refactor 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:** Create 3 bespoke library landing pages, refactor the home page with teaser cards, generate 3 whitepapers, add drip email campaigns, update the footer, and merge mobile docs nav into the header.
+
+**Architecture:** Next.js App Router pages at `/angular`, `/render`, `/chat`. Each page is a sequence of React components following existing glassmorphism + framer-motion patterns. Whitepaper pipeline refactored to support multiple configs. Mobile nav merges DocsMobileNav into Nav.tsx with pathname-aware rendering.
+
+**Tech Stack:** Next.js 13+ (App Router), React, Framer Motion, `@cacheplane/design-tokens`, Anthropic SDK + Puppeteer (whitepaper generation)
+
+---
+
+## Task 1: Home Page — Replace FullStackSection with LibrariesSection
+
+**Files:**
+- Create: `apps/website/src/components/landing/LibrariesSection.tsx`
+- Modify: `apps/website/src/app/page.tsx`
+
+- [ ] **Step 1: Create LibrariesSection component**
+
+```tsx
+// apps/website/src/components/landing/LibrariesSection.tsx
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+const LIBRARIES = [
+  {
+    id: 'angular',
+    tag: 'Agent',
+    pkg: '@cacheplane/angular',
+    color: tokens.colors.accent,
+    rgb: '0,64,144',
+    oneLiner: 'Signal-native streaming for LangGraph agents',
+    chips: ['agent()', 'provideAgent()', 'interrupt()', 'MockStreamTransport'],
+    href: '/angular',
+    ctaLabel: 'Explore Angular',
+  },
+  {
+    id: 'render',
+    tag: 'Gen UI',
+    pkg: '@cacheplane/render',
+    color: '#1a7a40',
+    rgb: '26,122,64',
+    oneLiner: 'Agents that render UI — without coupling to your frontend',
+    chips: ['<render-spec>', 'defineAngularRegistry()', 'signalStateStore()', 'JSON patch'],
+    href: '/render',
+    ctaLabel: 'Explore Render',
+  },
+  {
+    id: 'chat',
+    tag: 'Chat',
+    pkg: '@cacheplane/chat',
+    color: '#5a00c8',
+    rgb: '90,0,200',
+    oneLiner: 'Batteries-included agent chat — fully featured from day one',
+    chips: ['<chat-messages>', '<chat>', '<chat-debug>', '<chat-generative-ui>'],
+    href: '/chat',
+    ctaLabel: 'Explore Chat',
+  },
+];
+
+export function LibrariesSection() {
+  return (
+    <section style={{ padding: '80px 32px' }}>
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        style={{ textAlign: 'center', marginBottom: 48 }}
+      >
+        <p style={{
+          fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+          fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
+          fontWeight: 700, color: tokens.colors.accent, marginBottom: 14,
+        }}>
+          The Cacheplane Stack
+        </p>
+        <h2 style={{
+          fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
+          fontSize: 'clamp(26px,3.5vw,46px)', fontWeight: 800, lineHeight: 1.1,
+          color: tokens.colors.textPrimary, marginBottom: 10,
+        }}>
+          Three libraries. One architecture.
+        </h2>
+        <p style={{
+          fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
+          fontStyle: 'italic', fontSize: '1.05rem', color: tokens.colors.textSecondary,
+          maxWidth: 520, margin: '0 auto',
+        }}>
+          Everything your Angular team needs to ship AI agents to production.
+        </p>
+      </motion.div>
+
+      <div style={{
+        maxWidth: 1000, margin: '0 auto',
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+        gap: 24,
+      }}>
+        {LIBRARIES.map((lib, i) => (
+          <motion.div
+            key={lib.id}
+            initial={{ opacity: 0, y: 24 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: i * 0.1 }}
+            style={{
+              background: `rgba(${lib.rgb}, 0.03)`,
+              border: `1px solid rgba(${lib.rgb}, 0.15)`,
+              borderRadius: 14,
+              padding: '24px 24px 20px',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 12,
+            }}
+          >
+            <span style={{
+              display: 'inline-block', alignSelf: 'flex-start',
+              fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+              fontSize: '0.58rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.07em',
+              padding: '2px 9px', borderRadius: 5, color: '#fff', background: lib.color,
+            }}>
+              {lib.tag}
+            </span>
+
+            <p style={{
+              fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+              fontSize: '0.76rem', fontWeight: 700, color: lib.color, margin: 0,
+            }}>
+              {lib.pkg}
+            </p>
+
+            <p style={{
+              fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
+              fontSize: '1.1rem', fontWeight: 700, color: tokens.colors.textPrimary,
+              lineHeight: 1.25, margin: 0,
+            }}>
+              {lib.oneLiner}
+            </p>
+
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
+              {lib.chips.map(chip => (
+                <span key={chip} style={{
+                  fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+                  fontSize: '0.58rem', padding: '2px 8px', borderRadius: 4,
+                  background: `rgba(${lib.rgb},.07)`, color: lib.color,
+                  border: `1px solid rgba(${lib.rgb},.15)`,
+                }}>
+                  {chip}
+                </span>
+              ))}
+            </div>
+
+            <Link
+              href={lib.href}
+              style={{
+                fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+                fontSize: '0.72rem', fontWeight: 700, color: lib.color,
+                textDecoration: 'none', marginTop: 'auto', paddingTop: 8,
+                display: 'inline-flex', alignItems: 'center', gap: 4,
+              }}
+            >
+              {lib.ctaLabel} →
+            </Link>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Update home page to use LibrariesSection**
+
+In `apps/website/src/app/page.tsx`, replace the FullStackSection import and usage:
+
+```tsx
+// Remove this import:
+// import { FullStackSection } from '../components/landing/FullStackSection';
+
+// Add this import:
+import { LibrariesSection } from '../components/landing/LibrariesSection';
+
+// In the JSX, replace:
+//   {/* 4. Architecture — three-layer stack diagram */}
+//   <FullStackSection />
+// With:
+//   {/* 4. Libraries — three-card teaser grid */}
+//   <LibrariesSection />
+```
+
+- [ ] **Step 3: Verify the home page renders**
+
+Run: `npx nx serve website`
+
+Expected: Home page loads, LibrariesSection shows 3 cards with correct colors, chips, and links. Clicking "Explore Angular →" navigates to `/angular` (404 expected at this point).
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/src/components/landing/LibrariesSection.tsx apps/website/src/app/page.tsx
+git commit -m "feat(website): replace FullStackSection with LibrariesSection teaser cards"
+```
+
+---
+
+## Task 2: Footer — Add Libraries Column
+
+**Files:**
+- Modify: `apps/website/src/components/shared/Footer.tsx`
+
+- [ ] **Step 1: Add Libraries column to Footer**
+
+In `apps/website/src/components/shared/Footer.tsx`, change the grid from 4 to 5 columns and add the Libraries column between Product and Resources:
+
+```tsx
+// Change the grid container class:
+// FROM: className="grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-8"
+// TO:   className="grid grid-cols-1 md:grid-cols-5 gap-10 md:gap-8"
+
+// After the Product column (</div>) and before the Resources column, add:
+          {/* Libraries 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 }}>Libraries</span>
+            <Link href="/angular" 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)}>
+              Angular
+            </Link>
+            <Link href="/render" 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)}>
+              Render
+            </Link>
+            <Link href="/chat" 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)}>
+              Chat
+            </Link>
+          </div>
+```
+
+- [ ] **Step 2: Verify footer renders with 5 columns**
+
+Run: `npx nx serve website`
+
+Expected: Footer shows Brand (2 cols), Product, Libraries (Angular/Render/Chat), Resources. Links navigate to `/angular`, `/render`, `/chat`.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/components/shared/Footer.tsx
+git commit -m "feat(website): add Libraries column to footer for SEO/bot discovery"
+```
+
+---
+
+## Task 3: Mobile Nav — Merge DocsMobileNav into Header
+
+**Files:**
+- Modify: `apps/website/src/components/shared/Nav.tsx`
+- Modify: `apps/website/src/app/docs/[[...slug]]/page.tsx`
+- Delete: `apps/website/src/components/docs/DocsMobileNav.tsx` (after integration)
+
+- [ ] **Step 1: Make Nav pathname-aware and add docs sections to mobile menu**
+
+In `apps/website/src/components/shared/Nav.tsx`:
+
+```tsx
+'use client';
+import { useState } from 'react';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+import { docsConfig } from '../../lib/docs-config';
+
+// ... (existing links, icons unchanged)
+
+export function Nav() {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const isDocsPage = pathname.startsWith('/docs');
+
+  // Extract active section/slug from pathname for highlighting
+  const pathParts = pathname.split('/').filter(Boolean); // ['docs', 'guides', 'streaming']
+  const activeSection = isDocsPage && pathParts.length >= 2 ? pathParts[1] : '';
+  const activeSlug = isDocsPage && pathParts.length >= 3 ? pathParts[2] : '';
+
+  // Collapsible docs section state
+  const [openSections, setOpenSections] = useState<Set<string>>(() => new Set(activeSection ? [activeSection] : []));
+
+  const toggleSection = (id: string) => {
+    setOpenSections(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+  };
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50" style={{ /* ... existing styles ... */ }}>
+      {/* Top bar — unchanged */}
+      {/* Desktop links — unchanged */}
+      {/* Mobile hamburger — unchanged */}
+
+      {/* Mobile menu */}
+      {open && (
+        <div className="md:hidden px-6 pb-5 flex flex-col gap-4"
+          style={{ borderTop: `1px solid ${tokens.glass.border}`, maxHeight: '80vh', overflowY: 'auto' }}>
+          {/* Existing site links */}
+          {links.map((l) => l.external ? (
+            <a key={l.href} href={l.href} target="_blank" rel="noopener noreferrer"
+              onClick={() => setOpen(false)} className="text-sm font-mono py-1"
+              style={{ color: tokens.colors.textSecondary }}>
+              {l.label}
+            </a>
+          ) : (
+            <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>
+          ))}
+
+          {/* GitHub + CTA */}
+          <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="/pilot-to-prod#whitepaper-gate" onClick={() => setOpen(false)}
+              className="px-4 py-2 text-sm font-mono rounded"
+              style={{ background: tokens.colors.accent, color: '#fff' }}>
+              Get Started
+            </Link>
+          </div>
+
+          {/* Docs sections — only shown on docs pages */}
+          {isDocsPage && (
+            <>
+              <div style={{ borderTop: `1px solid ${tokens.glass.border}`, margin: '8px 0 4px' }} />
+              <span className="font-mono text-xs uppercase tracking-wider"
+                style={{ color: tokens.colors.accent, fontWeight: 600 }}>
+                Documentation
+              </span>
+              {docsConfig.map((section) => (
+                <div key={section.id}>
+                  <button
+                    onClick={() => toggleSection(section.id)}
+                    className="flex items-center gap-2 w-full text-left font-mono text-xs uppercase tracking-wider py-1"
+                    style={{
+                      color: section.color === 'red' ? tokens.colors.angularRed : tokens.colors.accent,
+                      fontWeight: 600, background: 'none', border: 'none', cursor: 'pointer',
+                    }}
+                  >
+                    <span style={{
+                      display: 'inline-block', transition: 'transform 0.2s',
+                      transform: openSections.has(section.id) ? 'rotate(90deg)' : 'rotate(0deg)',
+                      fontSize: '0.6rem',
+                    }}>
+                      ▶
+                    </span>
+                    {section.title}
+                  </button>
+                  {openSections.has(section.id) && 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}`}
+                        onClick={() => setOpen(false)}
+                        className="block pl-6 py-1 text-sm"
+                        style={{
+                          color: isActive ? tokens.colors.accent : tokens.colors.textSecondary,
+                          background: isActive ? tokens.colors.accentSurface : 'transparent',
+                          borderRadius: 4,
+                        }}
+                      >
+                        {page.title}
+                      </Link>
+                    );
+                  })}
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+      )}
+    </nav>
+  );
+}
+```
+
+- [ ] **Step 2: Remove DocsMobileNav from docs page layout**
+
+In `apps/website/src/app/docs/[[...slug]]/page.tsx`:
+
+```tsx
+// Remove this import:
+// import { DocsMobileNav } from '../../../components/docs/DocsMobileNav';
+
+// Remove this JSX block:
+//   <div className="px-4 pt-4 sm:hidden">
+//     <DocsMobileNav activeSection={section} activeSlug={slug} />
+//   </div>
+```
+
+- [ ] **Step 3: Delete DocsMobileNav component**
+
+```bash
+rm apps/website/src/components/docs/DocsMobileNav.tsx
+```
+
+- [ ] **Step 4: Verify mobile nav on docs pages**
+
+Run: `npx nx serve website`
+
+Open Chrome DevTools, toggle mobile viewport. Navigate to `/docs/getting-started/introduction`.
+
+Expected: Single hamburger menu shows site links + divider + Documentation sections. Clicking a docs section expands it. Active page is highlighted. No separate docs menu button in the content area.
+
+- [ ] **Step 5: Verify mobile nav on non-docs pages**
+
+Navigate to `/` in mobile viewport.
+
+Expected: Hamburger menu shows only site links + GitHub + Get Started. No Documentation section.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add apps/website/src/components/shared/Nav.tsx apps/website/src/app/docs/\[\[...slug\]\]/page.tsx
+git rm apps/website/src/components/docs/DocsMobileNav.tsx
+git commit -m "feat(website): merge DocsMobileNav into header for unified mobile navigation"
+```
+
+---
+
+## Task 4: Angular Landing Page (`/angular`)
+
+**Files:**
+- Create: `apps/website/src/app/angular/page.tsx`
+- Create: `apps/website/src/components/landing/angular/AngularHero.tsx`
+- Create: `apps/website/src/components/landing/angular/AngularProblemSolution.tsx`
+- Create: `apps/website/src/components/landing/angular/AngularFeaturesGrid.tsx`
+- Create: `apps/website/src/components/landing/angular/AngularCodeShowcase.tsx`
+- Create: `apps/website/src/components/landing/angular/AngularComparison.tsx`
+- Create: `apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx`
+- Create: `apps/website/src/components/landing/angular/AngularFooterCTA.tsx`
+
+Note: Components are organized in a subdirectory `angular/` to keep the landing directory manageable with 3 libraries x 7 components each.
+
+- [ ] **Step 1: Create the page route**
+
+```tsx
+// apps/website/src/app/angular/page.tsx
+import { AngularHero } from '../../components/landing/angular/AngularHero';
+import { AngularProblemSolution } from '../../components/landing/angular/AngularProblemSolution';
+import { AngularFeaturesGrid } from '../../components/landing/angular/AngularFeaturesGrid';
+import { AngularCodeShowcase } from '../../components/landing/angular/AngularCodeShowcase';
+import { AngularComparison } from '../../components/landing/angular/AngularComparison';
+import { AngularWhitePaperGate } from '../../components/landing/angular/AngularWhitePaperGate';
+import { AngularFooterCTA } from '../../components/landing/angular/AngularFooterCTA';
+import { tokens } from '@cacheplane/design-tokens';
+
+export const metadata = {
+  title: '@cacheplane/angular — Agent Streaming for Angular',
+  description: 'Ship LangGraph agents in Angular. Signal-native streaming, thread persistence, interrupts, and deterministic testing.',
+};
+
+export default function AngularPage() {
+  return (
+    <div style={{ background: tokens.gradient.bgFlow, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(0,64,144,0.08) 0%, transparent 70%)', top: -200, left: -150, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, top: 800, right: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle, rgba(0,64,144,0.06) 0%, transparent 70%)', top: 2400, left: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <AngularHero />
+      <AngularProblemSolution />
+      <AngularFeaturesGrid />
+      <AngularCodeShowcase />
+      <AngularComparison />
+      <AngularWhitePaperGate />
+      <AngularFooterCTA />
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Create AngularHero**
+
+```tsx
+// apps/website/src/components/landing/angular/AngularHero.tsx
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '@cacheplane/design-tokens';
+
+const BADGES = ['Angular 20+', 'LangGraph', 'LangChain', 'DeepAgent'];
+
+export function AngularHero() {
+  return (
+    <section aria-labelledby="angular-hero-heading" style={{ position: 'relative', overflow: 'hidden', padding: '0 2rem' }}>
+      <div style={{ maxWidth: '56rem', margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 1 }} className="py-24 md:py-32">
+        <motion.div initial={{ y: 16 }} animate={{ y: 0 }} transition={{ duration: 0.5 }}>
+          <span style={{
+            fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.08em',
+            color: tokens.colors.accent, textTransform: 'uppercase', display: 'inline-block', marginBottom: '1.5rem',
+          }}>
+            @cacheplane/angular
+          </span>
+        </motion.div>
+
+        <motion.h1 id="angular-hero-heading" initial={{ y: 20 }} animate={{ y: 0 }} transition={{ duration: 0.6, delay: 0.05 }}
+          style={{
+            fontFamily: "'EB Garamond', serif", fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 700,
+            lineHeight: 1.1, color: tokens.colors.textPrimary, margin: 0, marginBottom: '1.25rem',
+          }}>
+          Ship LangGraph agents in Angular — without building the plumbing
+        </motion.h1>
+
+        <motion.p initial={{ y: 14 }} animate={{ y: 0 }} transition={{ duration: 0.6, delay: 0.1 }}
+          style={{
+            fontFamily: 'Inter, sans-serif', fontSize: 18, color: tokens.colors.textSecondary,
+            maxWidth: '52ch', margin: '0 auto', lineHeight: 1.6, marginBottom: '2rem',
+          }}>
+          Signal-native streaming, thread persistence, interrupts, and deterministic testing. The complete agent primitive layer for Angular 20+.
+        </motion.p>
+
+        <motion.div initial={{ y: 14 }} animate={{ y: 0 }} transition={{ duration: 0.6, delay: 0.15 }}
+          style={{ display: 'flex', gap: '0.75rem', justifyContent: 'center', flexWrap: 'wrap', marginBottom: '1.5rem' }}>
+          <a href="/whitepapers/angular.pdf" download
+            style={{
+              display: 'inline-flex', alignItems: 'center', gap: 6,
+              background: tokens.colors.accent, color: '#fff', fontFamily: 'Inter, sans-serif',
+              fontSize: 15, fontWeight: 600, padding: '0.875rem 1.75rem', borderRadius: 8,
+              textDecoration: 'none', boxShadow: tokens.glow.button, minHeight: 44,
+            }}>
+            Download the Guide
+          </a>
+          <a href="/docs"
+            style={{
+              display: 'inline-flex', alignItems: 'center', gap: 6,
+              background: tokens.glass.bg, backdropFilter: `blur(${tokens.glass.blur})`,
+              WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+              color: tokens.colors.accent, fontFamily: 'Inter, sans-serif',
+              fontSize: 15, fontWeight: 600, padding: '0.875rem 1.75rem', borderRadius: 8,
+              textDecoration: 'none', border: `1px solid ${tokens.colors.accentBorder}`, minHeight: 44,
+            }}>
+            View Docs
+          </a>
+        </motion.div>
+
+        <motion.div initial={{ y: 14 }} animate={{ y: 0 }} transition={{ duration: 0.6, delay: 0.2 }}
+          style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
+          {BADGES.map(badge => (
+            <span key={badge} style={{
+              fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.06em',
+              color: tokens.colors.textMuted, textTransform: 'uppercase',
+              padding: '3px 10px', borderRadius: 4,
+              background: 'rgba(0,64,144,0.04)', border: '1px solid rgba(0,64,144,0.1)',
+            }}>
+              {badge}
+            </span>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 3: Create AngularProblemSolution**
+
+```tsx
+// apps/website/src/components/landing/angular/AngularProblemSolution.tsx
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '@cacheplane/design-tokens';
+
+const PAIN_POINTS = [
+  'Zone.js interference with SSE event streams',
+  'Manual subscription management and cleanup',
+  'Custom SSE wiring that breaks under load',
+  'Incompatibility with OnPush change detection',
+  'No deterministic test story for streaming',
+];
+
+const SOLUTIONS = [
+  'Signals-native API — no zone patching needed',
+  'Automatic subscription lifecycle management',
+  'OnPush compatible from day one',
+  'Built-in thread persistence and restore',
+  'interrupt() signal for human approval flows',
+  'MockStreamTransport for offline, deterministic tests',
+];
+
+export function AngularProblemSolution() {
+  return (
+    <section style={{ padding: '80px 32px' }}>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}
+        className="grid-cols-1 md:grid-cols-2"
+      >
+        {/* Without */}
+        <div style={{
+          padding: 28, borderRadius: 14,
+          background: 'rgba(183,28,28,0.03)', border: '1px solid rgba(183,28,28,0.15)',
+        }}>
+          <span style={{
+            display: 'inline-block', fontFamily: "'JetBrains Mono', monospace",
+            fontSize: '0.58rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.07em',
+            padding: '2px 9px', borderRadius: 5, color: '#fff', background: '#b71c1c', marginBottom: 16,
+          }}>
+            Without @cacheplane/angular
+          </span>
+          <h3 style={{
+            fontFamily: "'EB Garamond', serif", fontSize: '1.3rem', fontWeight: 700,
+            color: tokens.colors.textPrimary, lineHeight: 1.25, marginBottom: 16,
+          }}>
+            Your LangGraph agent works. Your Angular frontend doesn't stream it.
+          </h3>
+          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
+            {PAIN_POINTS.map(p => (
+              <li key={p} style={{ display: 'flex', gap: 8, fontSize: '0.85rem', color: '#555', lineHeight: 1.5 }}>
+                <span style={{ color: '#b71c1c', flexShrink: 0 }}>✗</span> {p}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* With */}
+        <div style={{
+          padding: 28, borderRadius: 14,
+          background: 'rgba(26,122,64,0.03)', border: '1px solid rgba(26,122,64,0.15)',
+        }}>
+          <span style={{
+            display: 'inline-block', fontFamily: "'JetBrains Mono', monospace",
+            fontSize: '0.58rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.07em',
+            padding: '2px 9px', borderRadius: 5, color: '#fff', background: '#1a7a40', marginBottom: 16,
+          }}>
+            With @cacheplane/angular
+          </span>
+          <h3 style={{
+            fontFamily: "'EB Garamond', serif", fontSize: '1.3rem', fontWeight: 700,
+            color: tokens.colors.textPrimary, lineHeight: 1.25, marginBottom: 16,
+          }}>
+            agent() gives you production-ready streaming on day one.
+          </h3>
+          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
+            {SOLUTIONS.map(s => (
+              <li key={s} style={{ display: 'flex', gap: 8, fontSize: '0.85rem', color: '#333', lineHeight: 1.5 }}>
+                <span style={{ color: '#1a7a40', flexShrink: 0 }}>✓</span> {s}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </motion.div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 4: Create AngularFeaturesGrid**
+
+```tsx
+// apps/website/src/components/landing/angular/AngularFeaturesGrid.tsx
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '@cacheplane/design-tokens';
+
+const FEATURES = [
+  { title: 'agent() API', desc: 'Signal-native streaming with automatic state management. One function to connect your Angular app to LangGraph.', iframePath: 'langgraph/streaming' },
+  { title: 'Thread Persistence', desc: 'Conversations survive page refreshes. Built-in threadId signal with localStorage restore and thread list UI.', iframePath: 'langgraph/persistence' },
+  { title: 'Interrupt Handling', desc: 'Human-in-the-loop approval flows. interrupt() signal maps directly to approve, edit, or cancel actions.', iframePath: 'langgraph/interrupts' },
+  { title: 'Tool Call Support', desc: 'Structured tool execution state. Progressive disclosure — live steps, completion, collapsible history.', iframePath: 'langgraph/tool-calls' },
+  { title: 'Time Travel', desc: 'Navigate agent state history. Replay, inspect, and debug any point in a conversation timeline.', iframePath: 'langgraph/time-travel' },
+  { title: 'DeepAgent Support', desc: 'Multi-agent orchestration with full streaming support. Subgraphs, delegation, parallel execution.', iframePath: 'deep-agents/subgraphs' },
+];
+
+export function AngularFeaturesGrid() {
+  return (
+    <section style={{ padding: '80px 32px' }}>
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        style={{ textAlign: 'center', marginBottom: 48 }}
+      >
+        <p style={{
+          fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+          fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
+          fontWeight: 700, color: tokens.colors.accent, marginBottom: 14,
+        }}>
+          Features
+        </p>
+        <h2 style={{
+          fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
+          fontSize: 'clamp(26px,3.5vw,42px)', fontWeight: 800, lineHeight: 1.1,
+          color: tokens.colors.textPrimary,
+        }}>
+          Every LangGraph capability, production-ready
+        </h2>
+      </motion.div>
+
+      <div style={{
+        maxWidth: 1000, margin: '0 auto',
+        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(440px, 1fr))', gap: 24,
+      }}>
+        {FEATURES.map((feat, i) => (
+          <motion.div
+            key={feat.title}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.45, delay: i * 0.08 }}
+            style={{
+              background: tokens.glass.bg, border: `1px solid ${tokens.glass.border}`,
+              backdropFilter: `blur(${tokens.glass.blur})`, WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+              borderRadius: 14, overflow: 'hidden', boxShadow: tokens.glass.shadow,
+            }}
+          >
+            <div style={{ padding: '20px 24px 16px' }}>
+              <h3 style={{
+                fontFamily: 'Inter, sans-serif', fontSize: 16, fontWeight: 600,
+                color: tokens.colors.textPrimary, margin: 0, marginBottom: 6,
+              }}>
+                {feat.title}
+              </h3>
+              <p style={{
+                fontFamily: 'Inter, sans-serif', fontSize: 14, color: tokens.colors.textSecondary,
+                lineHeight: 1.6, margin: 0,
+              }}>
+                {feat.desc}
+              </p>
+            </div>
+            <div style={{ borderTop: `1px solid ${tokens.glass.border}`, background: 'rgba(0,0,0,0.02)' }}>
+              <iframe
+                src={`https://cockpit.cacheplane.ai/${feat.iframePath}`}
+                title={feat.title}
+                style={{ width: '100%', height: 320, border: 'none', display: 'block' }}
+                loading="lazy"
+              />
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 5: Create AngularCodeShowcase**
+
+```tsx
+// apps/website/src/components/landing/angular/AngularCodeShowcase.tsx
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '@cacheplane/design-tokens';
+
+const SNIPPET_1 = `import { agent } from '@cacheplane/angular';
+
+const chat = agent({
+  graphId: 'my-agent',
+  url: 'https://my-langgraph.cloud/api',
+});
+
+// Reactive signals — OnPush compatible
+chat.messages();    // Signal<AIMessage[]>
+chat.isStreaming(); // Signal<boolean>
+chat.interrupt();   // Signal<Interrupt | null>`;
+
+const SNIPPET_2 = `import { provideAgent } from '@cacheplane/angular';
+
+provideAgent({
+  graphId: 'my-agent',
+  url: environment.langgraphUrl,
+  threadId: savedThreadId,
+  onThreadId: (id) => localStorage.setItem('threadId', id),
+  transport: isTest
+    ? new MockStreamTransport(fixtures)
+    : new FetchStreamTransport(),
+});`;
+
+export function AngularCodeShowcase() {
+  return (
+    <section style={{ padding: '80px 32px' }}>
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        style={{ textAlign: 'center', marginBottom: 48 }}
+      >
+        <p style={{
+          fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+          fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
+          fontWeight: 700, color: tokens.colors.accent, marginBottom: 14,
+        }}>
+          Developer Experience
+        </p>
+        <h2 style={{
+          fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
+          fontSize: 'clamp(26px,3.5vw,42px)', fontWeight: 800, lineHeight: 1.1,
+          color: tokens.colors.textPrimary,
+        }}>
+          Production streaming in a few lines
+        </h2>
+      </motion.div>
+
+      <div style={{
+        maxWidth: 900, margin: '0 auto',
+        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 24,
+      }}>
+        {[{ title: 'Minimal Setup', code: SNIPPET_1 }, { title: 'Full Configuration', code: SNIPPET_2 }].map((s, i) => (
+          <motion.div
+            key={s.title}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.45, delay: i * 0.1 }}
+            style={{ borderRadius: 14, overflow: 'hidden', border: `1px solid ${tokens.glass.border}` }}
+          >
+            <div style={{
+              padding: '10px 20px', background: 'rgba(0,64,144,0.04)',
+              borderBottom: `1px solid ${tokens.glass.border}`,
+            }}>
+              <span style={{
+                fontFamily: "'JetBrains Mono', monospace", fontSize: '0.68rem',
+                fontWeight: 700, color: tokens.colors.accent,
+              }}>
+                {s.title}
+              </span>
+            </div>
+            <pre style={{
+              background: '#1a1b26', color: '#c8ccee', padding: '20px 24px',
+              fontSize: '0.78rem', lineHeight: 1.65, margin: 0, overflowX: 'auto',
+              fontFamily: "'JetBrains Mono', monospace",
+            }}>
+              <code>{s.code}</code>
+            </pre>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 6: Create AngularComparison**
+
+```tsx
+// apps/website/src/components/landing/angular/AngularComparison.tsx
+'use client';
+import { motion } from 'framer-motion';
+import { tokens } from '@cacheplane/design-tokens';
+
+const ROWS = [
+  { capability: 'SSE streaming', theirs: 'Manual wiring', ours: 'Signal-native via agent()' },
+  { capability: 'State management', theirs: 'Custom signals', ours: 'Built-in reactive state' },
+  { capability: 'Thread persistence', theirs: 'DIY localStorage', ours: 'Built-in threadId signal + restore' },
+  { capability: 'Interrupt handling', theirs: 'Manual Command.RESUME', ours: 'interrupt() signal + approve/edit/cancel' },
+  { capability: 'Tool call rendering', theirs: 'Raw events', ours: 'Structured tool call state' },
+  { capability: 'Time travel', theirs: 'Not included', ours: 'Built-in state history' },
+  { capability: 'Testing', theirs: 'Against live API', ours: 'MockStreamTransport, offline, <100ms' },
+  { capability: 'OnPush compatibility', theirs: 'Requires workarounds', ours: 'Native signal support' },
+  { capability: 'DeepAgent support', theirs: 'Not included', ours: 'Full multi-agent orchestration' },
+];
+
+export function AngularComparison() {
+  return (
+    <section style={{ padding: '80px 32px' }}>
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        style={{ textAlign: 'center', marginBottom: 48 }}
+      >
+        <p style={{
+          fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+          fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
+          fontWeight: 700, color: tokens.colors.accent, marginBottom: 14,
+        }}>
+          Head to Head
+        </p>
+        <h2 style={{
+          fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
+          fontSize: 'clamp(26px,3.5vw,42px)', fontWeight: 800, lineHeight: 1.1,
+          color: tokens.colors.textPrimary,
+        }}>
+          LangGraph Angular SDK vs @cacheplane/angular
+        </h2>
+      </motion.div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5, delay: 0.15 }}
+        style={{
+          maxWidth: 860, margin: '0 auto', borderRadius: 20,
+          background: tokens.glass.bg, backdropFilter: `blur(${tokens.glass.blur})`,
+          WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+          border: `1px solid ${tokens.glass.border}`, boxShadow: tokens.glass.shadow, overflow: 'hidden',
+        }}
+      >
+        <div style={{
+          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
+          background: 'rgba(255,255,255,.3)', borderBottom: `1px solid ${tokens.glass.border}`, padding: '14px 24px',
+        }}>
+          {['Capability', 'LangGraph Angular SDK', '@cacheplane/angular'].map((h, i) => (
+            <div key={h} style={{
+              fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+              fontSize: '0.62rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
+              color: i === 2 ? tokens.colors.accent : tokens.colors.textMuted,
+            }}>
+              {h}
+            </div>
+          ))}
+        </div>
+        {ROWS.map((row, i) => (
+          <motion.div
+            key={row.capability}
+            initial={{ opacity: 0, x: -8 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: i * 0.05, duration: 0.35 }}
+            style={{
+              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', padding: '14px 24px',
+              borderBottom: i < ROWS.length - 1 ? '1px solid rgba(0,0,0,.05)' : 'none', alignItems: 'center',
+            }}
+          >
+            <div style={{
+              fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+              fontSize: '0.72rem', fontWeight: 700, color: tokens.colors.textPrimary,
+            }}>
+              {row.capability}
+            </div>
+            <div style={{ fontSize: '0.8rem', color: tokens.colors.textMuted, paddingRight: 16, lineHeight: 1.5 }}>
+              {row.theirs}
+            </div>
+            <div style={{ fontSize: '0.8rem', color: tokens.colors.accent, fontWeight: 500, lineHeight: 1.5, display: 'flex', alignItems: 'flex-start', gap: 6 }}>
+              <span style={{ color: '#1a7a40', marginTop: 2, flexShrink: 0 }}>✓</span>
+              <span>{row.ours}</span>
+            </div>
+          </motion.div>
+        ))}
+      </motion.div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 7: Create AngularWhitePaperGate**
+
+```tsx
+// apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx
+'use client';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { tokens } from '@cacheplane/design-tokens';
+
+type FormState = 'idle' | 'submitting' | 'done' | 'error';
+
+export function AngularWhitePaperGate() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [formState, setFormState] = useState<FormState>('idle');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email) return;
+    setFormState('submitting');
+    try {
+      const res = await fetch('/api/whitepaper-signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, email, paper: 'angular' }),
+      });
+      if (!res.ok) throw new Error('Server error');
+      setFormState('done');
+    } catch {
+      setFormState('error');
+    }
+  };
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%', background: 'rgba(255,255,255,0.7)',
+    border: `1px solid ${tokens.glass.border}`, borderRadius: 10,
+    padding: '10px 14px', fontSize: '0.88rem', color: tokens.colors.textPrimary,
+    fontFamily: 'Inter, sans-serif', outline: 'none', marginBottom: 10,
+    backdropFilter: `blur(${tokens.glass.blur})`,
+  };
+
+  return (
+    <section id="whitepaper-gate" style={{ padding: '80px 32px' }}>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        style={{
+          maxWidth: 860, margin: '0 auto', borderRadius: 20,
+          background: tokens.glass.bg, backdropFilter: `blur(${tokens.glass.blur})`,
+          WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+          border: `1px solid ${tokens.glass.border}`, boxShadow: tokens.glass.shadow,
+          padding: '48px 56px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center',
+        }}
+      >
+        <div>
+          <p style={{
+            fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+            fontSize: '0.68rem', textTransform: 'uppercase', letterSpacing: '0.12em',
+            fontWeight: 700, color: tokens.colors.accent, marginBottom: 14,
+          }}>
+            Free Download
+          </p>
+          <h2 style={{
+            fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
+            fontSize: 'clamp(22px,2.5vw,36px)', fontWeight: 800, lineHeight: 1.15,
+            color: tokens.colors.textPrimary, marginBottom: 14,
+          }}>
+            The Enterprise Guide to Agent Streaming in Angular
+          </h2>
+          <p style={{
+            fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
+            fontStyle: 'italic', fontSize: '1rem', color: tokens.colors.textSecondary,
+            lineHeight: 1.55, marginBottom: 28,
+          }}>
+            Six chapters covering the last-mile problem, the agent() API, thread persistence, interrupts, full LangGraph feature coverage, and deterministic testing.
+          </p>
+          <a href="/whitepapers/angular.pdf" download="cacheplane-angular-enterprise-guide.pdf"
+            style={{
+              display: 'inline-flex', alignItems: 'center', gap: 8,
+              background: tokens.colors.accent, color: '#fff',
+              padding: '12px 28px', borderRadius: 10,
+              fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+              fontSize: '0.75rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
+              textDecoration: 'none', boxShadow: '0 4px 16px rgba(0,64,144,.28)',
+            }}>
+            ↓ Download PDF
+          </a>
+        </div>
+
+        <div>
+          <p style={{
+            fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+            fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.1em',
+            fontWeight: 700, color: tokens.colors.textMuted, marginBottom: 16,
+          }}>
+            Optional — Get notified of updates
+          </p>
+          {formState === 'done' ? (
+            <div style={{
+              padding: '20px 24px', borderRadius: 12,
+              background: 'rgba(26,122,64,.07)', border: '1px solid rgba(26,122,64,.2)',
+              fontSize: '0.88rem', color: '#1a7a40', lineHeight: 1.55,
+            }}>
+              ✓ Thanks! We'll reach out when the guide is updated.
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit}>
+              <label htmlFor="angular-wp-name" className="sr-only">Name (optional)</label>
+              <input id="angular-wp-name" style={inputStyle} type="text" placeholder="Name (optional)"
+                value={name} onChange={e => setName(e.target.value)} disabled={formState === 'submitting'} />
+              <label htmlFor="angular-wp-email" className="sr-only">Email address</label>
+              <input id="angular-wp-email" style={{ ...inputStyle, marginBottom: 16 }} type="email"
+                placeholder="Email address" value={email} onChange={e => setEmail(e.target.value)}
+                required disabled={formState === 'submitting'} />
+              {formState === 'error' && (
+                <p style={{ fontSize: '0.8rem', color: tokens.colors.angularRed, marginBottom: 10 }}>
+                  Something went wrong — please try again.
+                </p>
+              )}
+              <button type="submit" disabled={formState === 'submitting' || !email}
+                style={{
+                  padding: '10px 24px', borderRadius: 9,
+                  background: email ? 'rgba(0,64,144,.08)' : 'rgba(0,0,0,.04)',
+                  border: `1px solid ${email ? 'rgba(0,64,144,.22)' : 'rgba(0,0,0,.08)'}`,
+                  color: email ? tokens.colors.accent : tokens.colors.textMuted,
+                  fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+                  fontSize: '0.72rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
+                  cursor: email ? 'pointer' : 'not-allowed',
+                }}>
+                {formState === 'submitting' ? 'Sending…' : 'Notify me'}
+              </button>
+            </form>
+          )}
+        </div>
+      </motion.div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 8: Create AngularFooterCTA**
+
+```tsx
+// apps/website/src/components/landing/angular/AngularFooterCTA.tsx
+'use client';
+import { tokens } from '@cacheplane/design-tokens';
+
+export function AngularFooterCTA() {
+  return (
+    <section style={{ padding: '5rem 2rem' }}>
+      <div style={{
+        maxWidth: '42rem', margin: '0 auto', textAlign: 'center',
+        background: tokens.glass.bg, border: `1px solid ${tokens.colors.accentBorder}`,
+        borderRadius: 16, padding: 48,
+        backdropFilter: `blur(${tokens.glass.blur})`,
+      }}>
+        <h2 style={{
+          fontFamily: "'EB Garamond', serif", fontSize: 'clamp(24px, 4vw, 32px)',
+          fontWeight: 700, color: tokens.colors.textPrimary, marginBottom: 16,
+        }}>
+          Ready to ship your LangGraph agent?
+        </h2>
+        <p style={{
+          fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.7,
+          color: tokens.colors.textSecondary, marginBottom: 32,
+        }}>
+          Download the enterprise guide, explore the docs, or start the pilot program.
+        </p>
+        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
+          <a href="/whitepapers/angular.pdf" download
+            style={{
+              display: 'inline-block', padding: '0.875rem 2rem',
+              background: tokens.colors.accent, color: '#fff',
+              fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
+              textDecoration: 'none', borderRadius: 6,
+            }}>
+            Download the Guide
+          </a>
+          <a href="/pilot-to-prod"
+            style={{
+              display: 'inline-block', padding: '0.875rem 2rem',
+              background: tokens.glass.bg, color: tokens.colors.accent,
+              fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
+              textDecoration: 'none', borderRadius: 6,
+              border: `1px solid ${tokens.colors.accentBorder}`,
+            }}>
+            Pilot Program →
+          </a>
+          <a href="/docs"
+            style={{
+              display: 'inline-block', padding: '0.875rem 2rem',
+              background: 'transparent', color: tokens.colors.textSecondary,
+              fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 600,
+              textDecoration: 'none', borderRadius: 6,
+              border: `1px solid ${tokens.glass.border}`,
+            }}>
+            View Docs
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 9: Verify Angular landing page**
+
+Run: `npx nx serve website`, navigate to `/angular`.
+
+Expected: Full conversion funnel page with Hero → Problem/Solution → Features Grid (iframes may show loading/error if cockpit URLs don't match exactly — that's fine, the structure is correct) → Code Showcase → Comparison Table → Whitepaper Gate → Footer CTA.
+
+- [ ] **Step 10: Commit**
+
+```bash
+git add apps/website/src/app/angular/ apps/website/src/components/landing/angular/
+git commit -m "feat(website): add /angular landing page with full conversion funnel"
+```
+
+---
+
+## Task 5: Render Landing Page (`/render`)
+
+**Files:**
+- Create: `apps/website/src/app/render/page.tsx`
+- Create: `apps/website/src/components/landing/render/RenderHero.tsx`
+- Create: `apps/website/src/components/landing/render/RenderProblemSolution.tsx`
+- Create: `apps/website/src/components/landing/render/RenderFeaturesGrid.tsx`
+- Create: `apps/website/src/components/landing/render/RenderCodeShowcase.tsx`
+- Create: `apps/website/src/components/landing/render/RenderComparison.tsx`
+- Create: `apps/website/src/components/landing/render/RenderWhitePaperGate.tsx`
+- Create: `apps/website/src/components/landing/render/RenderFooterCTA.tsx`
+
+Follow the same pattern as Task 4 with render-specific content. Key differences:
+
+- [ ] **Step 1: Create render page route**
+
+```tsx
+// apps/website/src/app/render/page.tsx
+import { RenderHero } from '../../components/landing/render/RenderHero';
+import { RenderProblemSolution } from '../../components/landing/render/RenderProblemSolution';
+import { RenderFeaturesGrid } from '../../components/landing/render/RenderFeaturesGrid';
+import { RenderCodeShowcase } from '../../components/landing/render/RenderCodeShowcase';
+import { RenderComparison } from '../../components/landing/render/RenderComparison';
+import { RenderWhitePaperGate } from '../../components/landing/render/RenderWhitePaperGate';
+import { RenderFooterCTA } from '../../components/landing/render/RenderFooterCTA';
+import { tokens } from '@cacheplane/design-tokens';
+
+export const metadata = {
+  title: '@cacheplane/render — Generative UI for Angular',
+  description: 'Agents that render UI without coupling to your frontend. Built on Vercel json-render spec.',
+};
+
+export default function RenderPage() {
+  return (
+    <div style={{ background: tokens.gradient.bgFlow, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(26,122,64,0.08) 0%, transparent 70%)', top: -200, left: -150, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, top: 800, right: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle, rgba(26,122,64,0.06) 0%, transparent 70%)', top: 2400, left: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <RenderHero />
+      <RenderProblemSolution />
+      <RenderFeaturesGrid />
+      <RenderCodeShowcase />
+      <RenderComparison />
+      <RenderWhitePaperGate />
+      <RenderFooterCTA />
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Create all 7 render components**
+
+Each follows the exact same structural pattern as the Angular components but with render-specific content:
+
+- **RenderHero:** Eyebrow "@cacheplane/render", green (#1a7a40) color, headline "Agents that render UI — without coupling to your frontend", badges: Angular 20+, Vercel json-render, JSON Patch streaming. CTA → `/whitepapers/render.pdf`.
+- **RenderProblemSolution:** Without: "Every new agent output means a new frontend deploy." With: "The agent emits a spec. Your registry renders it."
+- **RenderFeaturesGrid:** 6 features mapping to cockpit render examples: spec-rendering, element-rendering, state-management, registry, repeat-loops, computed-functions. Iframe src: `https://cockpit.cacheplane.ai/render/{capability}`.
+- **RenderCodeShowcase:** Snippet 1: `defineAngularRegistry()` setup. Snippet 2: `<render-spec>` template binding.
+- **RenderComparison:** "Hardcoded agent UI vs @cacheplane/render" — 7 rows as specified in the design spec.
+- **RenderWhitePaperGate:** "The Enterprise Guide to Generative UI in Angular", paper: 'render'.
+- **RenderFooterCTA:** Same pattern as AngularFooterCTA with render-specific links.
+
+Each component file follows the identical structure to its Angular counterpart — same imports, same motion patterns, same glassmorphism tokens — only the data/content changes. Copy the Angular component, replace all content constants, and update the color from `tokens.colors.accent` (#004090) to `#1a7a40` where library-specific color is used.
+
+- [ ] **Step 3: Verify render landing page**
+
+Run: `npx nx serve website`, navigate to `/render`.
+
+Expected: Full page with green color accents, Vercel json-render prominent in hero badges and subheadline, 6 feature cards with cockpit iframes.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/src/app/render/ apps/website/src/components/landing/render/
+git commit -m "feat(website): add /render landing page — Vercel json-render generative UI"
+```
+
+---
+
+## Task 6: Chat Landing Page (`/chat`)
+
+**Files:**
+- Create: `apps/website/src/app/chat/page.tsx`
+- Create: `apps/website/src/components/landing/chat-landing/ChatLandingHero.tsx`
+- Create: `apps/website/src/components/landing/chat-landing/ChatLandingProblemSolution.tsx`
+- Create: `apps/website/src/components/landing/chat-landing/ChatLandingFeaturesGrid.tsx`
+- Create: `apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx`
+- Create: `apps/website/src/components/landing/chat-landing/ChatLandingComparison.tsx`
+- Create: `apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx`
+- Create: `apps/website/src/components/landing/chat-landing/ChatLandingFooterCTA.tsx`
+
+Note: Directory is `chat-landing/` to avoid conflict with existing `ChatFeaturesSection` in the landing directory.
+
+- [ ] **Step 1: Create chat page route**
+
+```tsx
+// apps/website/src/app/chat/page.tsx
+import { ChatLandingHero } from '../../components/landing/chat-landing/ChatLandingHero';
+import { ChatLandingProblemSolution } from '../../components/landing/chat-landing/ChatLandingProblemSolution';
+import { ChatLandingFeaturesGrid } from '../../components/landing/chat-landing/ChatLandingFeaturesGrid';
+import { ChatLandingCodeShowcase } from '../../components/landing/chat-landing/ChatLandingCodeShowcase';
+import { ChatLandingComparison } from '../../components/landing/chat-landing/ChatLandingComparison';
+import { ChatLandingWhitePaperGate } from '../../components/landing/chat-landing/ChatLandingWhitePaperGate';
+import { ChatLandingFooterCTA } from '../../components/landing/chat-landing/ChatLandingFooterCTA';
+import { tokens } from '@cacheplane/design-tokens';
+
+export const metadata = {
+  title: '@cacheplane/chat — Batteries-Included Agent Chat for Angular',
+  description: 'Production agent chat UI in days, not sprints. Built on Vercel json-render and Google A2UI specs.',
+};
+
+export default function ChatPage() {
+  return (
+    <div style={{ background: tokens.gradient.bgFlow, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(90,0,200,0.08) 0%, transparent 70%)', top: -200, left: -150, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, top: 800, right: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle, rgba(90,0,200,0.06) 0%, transparent 70%)', top: 2400, left: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <ChatLandingHero />
+      <ChatLandingProblemSolution />
+      <ChatLandingFeaturesGrid />
+      <ChatLandingCodeShowcase />
+      <ChatLandingComparison />
+      <ChatLandingWhitePaperGate />
+      <ChatLandingFooterCTA />
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Create all 7 chat landing components**
+
+Same structural pattern as Angular and Render. Key content differences:
+
+- **ChatLandingHero:** Purple (#5a00c8), headline "Production agent chat UI in days, not sprints", subheadline about batteries-included + json-render + A2UI, badges: Angular 20+, Vercel json-render, Google A2UI, WCAG accessible. CTA → `/whitepapers/chat.pdf`.
+- **ChatLandingProblemSolution:** Without: "Every team rebuilds the same chat UI. 4-6 weeks." With: "Fully featured from day one. No feature backlog."
+- **ChatLandingFeaturesGrid:** 5 features: messages, input, generative-ui, theming, debug. Iframe src: `https://cockpit.cacheplane.ai/chat/{capability}`.
+- **ChatLandingCodeShowcase:** Snippet 1: `<chat>` prebuilt (6-8 lines). Snippet 2: CSS custom properties theming (8-10 lines).
+- **ChatLandingComparison:** "Incrementally building chat vs @cacheplane/chat" — sprint-based timeline rows as in design spec.
+- **ChatLandingWhitePaperGate:** "The Enterprise Guide to Agent Chat Interfaces in Angular", paper: 'chat'.
+- **ChatLandingFooterCTA:** Same CTA pattern with chat-specific copy.
+
+- [ ] **Step 3: Verify chat landing page**
+
+Run: `npx nx serve website`, navigate to `/chat`.
+
+Expected: Full page with purple accents, batteries-included messaging, json-render + A2UI badges, 5 feature cards, sprint-based comparison table.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/src/app/chat/ apps/website/src/components/landing/chat-landing/
+git commit -m "feat(website): add /chat landing page — batteries-included agent chat UI"
+```
+
+---
+
+## Task 7: Whitepaper Pipeline — Multi-Config Refactor
+
+**Files:**
+- Modify: `apps/website/scripts/generate-whitepaper.ts`
+
+- [ ] **Step 1: Refactor script to support multiple whitepapers**
+
+Replace the single `CHAPTERS` array and hardcoded output paths with a `WHITEPAPERS` config map. Add `--paper` CLI argument support via `process.argv`. See the design spec section 3 for the full chapter definitions for each whitepaper (angular: 6 chapters, render: 5 chapters, chat: 5 chapters).
+
+Key changes:
+- Define `WhitepaperConfig` type with `title`, `subtitle`, `eyebrow`, `coverGradient`, `outputPdf`, `outputHtml`, `chapters[]`
+- `WHITEPAPERS` record with keys: `overview` (existing), `angular`, `render`, `chat`
+- `buildHTML()` takes the config for cover customization (gradient color, title, subtitle)
+- Parse `--paper <name>` from `process.argv` to generate one or all
+- Output paths: existing `public/whitepaper.pdf` for overview, `public/whitepapers/{name}.pdf` for library-specific
+
+- [ ] **Step 2: Test generation of a single whitepaper**
+
+Run: `npm run generate-whitepaper -- --paper angular`
+
+Expected: `public/whitepapers/angular.pdf` generated with blue cover gradient and 6 chapters.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/scripts/generate-whitepaper.ts
+git commit -m "feat(website): refactor whitepaper pipeline for multi-config generation"
+```
+
+- [ ] **Step 4: Generate all 3 library whitepapers**
+
+Run: `npm run generate-whitepaper -- --paper angular && npm run generate-whitepaper -- --paper render && npm run generate-whitepaper -- --paper chat`
+
+Expected: 3 PDFs in `public/whitepapers/`.
+
+- [ ] **Step 5: Commit generated PDFs**
+
+```bash
+git add apps/website/public/whitepapers/
+git commit -m "docs: generate library-specific whitepapers (angular, render, chat)"
+```
+
+---
+
+## Task 8: API Route — Accept `paper` Field
+
+**Files:**
+- Modify: `apps/website/src/app/api/whitepaper-signup/route.ts`
+
+- [ ] **Step 1: Update route to accept paper field**
+
+```tsx
+// apps/website/src/app/api/whitepaper-signup/route.ts
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+
+const SIGNUPS_FILE = path.join(process.cwd(), 'data', 'whitepaper-signups.ndjson');
+
+export async function POST(req: NextRequest) {
+  let body: { name?: string; email?: string; paper?: string };
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
+  }
+
+  const { name = '', email = '', paper = 'overview' } = body;
+  if (!email || !email.includes('@')) {
+    return NextResponse.json({ error: 'Valid email required' }, { status: 400 });
+  }
+
+  const entry = JSON.stringify({
+    name: name.trim(),
+    email: email.trim(),
+    paper: paper.trim(),
+    ts: new Date().toISOString(),
+  }) + '\n';
+  try {
+    fs.mkdirSync(path.dirname(SIGNUPS_FILE), { recursive: true });
+    fs.appendFileSync(SIGNUPS_FILE, entry, 'utf8');
+  } catch (err) {
+    console.error('Failed to write signup:', err);
+    return NextResponse.json({ error: 'Internal error' }, { status: 500 });
+  }
+
+  return NextResponse.json({ ok: true });
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/app/api/whitepaper-signup/route.ts
+git commit -m "feat(website): whitepaper signup API accepts paper field for library-specific tracking"
+```
+
+---
+
+## Task 9: Drip Email Campaigns
+
+**Files:**
+- Create: `apps/website/emails/angular-download.ts`
+- Create: `apps/website/emails/render-download.ts`
+- Create: `apps/website/emails/chat-download.ts`
+- Create: `apps/website/emails/drip-angular-followup.ts`
+- Create: `apps/website/emails/drip-render-followup.ts`
+- Create: `apps/website/emails/drip-chat-followup.ts`
+
+- [ ] **Step 1: Create Angular download confirmation email**
+
+```tsx
+// apps/website/emails/angular-download.ts
+import { wrapEmail, esc } from './email-wrapper';
+
+const DOWNLOAD_URL = 'https://cacheplane.ai/whitepapers/angular.pdf';
+
+export function angularDownloadHtml(name?: string): string {
+  return wrapEmail({
+    body: `
+      <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 8px;line-height:1.3">Your Enterprise Guide to Agent Streaming</p>
+      <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 24px">${name ? `Hi ${esc(name)}, t` : 'T'}he guide covers six chapters: the last-mile problem, the agent() API, thread persistence, interrupt flows, full LangGraph feature coverage, and deterministic testing.</p>
+      <div style="text-align:center;margin:0 0 4px">
+        <a href="${DOWNLOAD_URL}" style="display:inline-block;background-color:#004090;color:#fff;padding:12px 32px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none">Download the Guide</a>
+      </div>
+    `,
+  });
+}
+```
+
+- [ ] **Step 2: Create Render download confirmation email**
+
+```tsx
+// apps/website/emails/render-download.ts
+import { wrapEmail, esc } from './email-wrapper';
+
+const DOWNLOAD_URL = 'https://cacheplane.ai/whitepapers/render.pdf';
+
+export function renderDownloadHtml(name?: string): string {
+  return wrapEmail({
+    body: `
+      <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 8px;line-height:1.3">Your Enterprise Guide to Generative UI</p>
+      <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 24px">${name ? `Hi ${esc(name)}, t` : 'T'}he guide covers five chapters: the coupling problem, declarative UI specs with Vercel's json-render standard, the component registry, streaming JSON patches, and state management.</p>
+      <div style="text-align:center;margin:0 0 4px">
+        <a href="${DOWNLOAD_URL}" style="display:inline-block;background-color:#1a7a40;color:#fff;padding:12px 32px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none">Download the Guide</a>
+      </div>
+    `,
+  });
+}
+```
+
+- [ ] **Step 3: Create Chat download confirmation email**
+
+```tsx
+// apps/website/emails/chat-download.ts
+import { wrapEmail, esc } from './email-wrapper';
+
+const DOWNLOAD_URL = 'https://cacheplane.ai/whitepapers/chat.pdf';
+
+export function chatDownloadHtml(name?: string): string {
+  return wrapEmail({
+    body: `
+      <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 8px;line-height:1.3">Your Enterprise Guide to Agent Chat Interfaces</p>
+      <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 24px">${name ? `Hi ${esc(name)}, t` : 'T'}he guide covers five chapters: the sprint tax, batteries-included components, theming and design system integration, generative UI in chat, and debug tooling.</p>
+      <div style="text-align:center;margin:0 0 4px">
+        <a href="${DOWNLOAD_URL}" style="display:inline-block;background-color:#5a00c8;color:#fff;padding:12px 32px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none">Download the Guide</a>
+      </div>
+    `,
+  });
+}
+```
+
+- [ ] **Step 4: Create Angular drip campaign**
+
+```tsx
+// apps/website/emails/drip-angular-followup.ts
+import { wrapEmail } from './email-wrapper';
+
+export function dripAngularFollowupHtml(day: number): { subject: string; html: string } {
+  if (day === 2) {
+    return {
+      subject: 'Did you read Chapter 2 on the agent() API?',
+      html: wrapEmail({
+        body: `
+          <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#004090;font-weight:700;margin:0 0 8px">Guide Follow-up</p>
+          <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 14px;line-height:1.3">Did you read Chapter 2 on the agent() API?</p>
+          <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 24px">Chapter 2 covers the <strong>agent() API</strong> — signal-native streaming, provideAgent(), and reactive state management. It's the fastest way to understand what @cacheplane/angular does differently.</p>
+          <a href="https://cacheplane.ai/docs" style="display:inline-block;background-color:#004090;color:#fff;padding:12px 28px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none">Explore the Docs →</a>
+        `,
+        showUnsubscribe: true,
+      }),
+    };
+  }
+
+  if (day === 5) {
+    return {
+      subject: 'LangGraph Angular SDK vs @cacheplane/angular',
+      html: wrapEmail({
+        body: `
+          <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#004090;font-weight:700;margin:0 0 8px">Comparison</p>
+          <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 14px;line-height:1.3">LangGraph Angular SDK vs @cacheplane/angular</p>
+          <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 24px">The official LangGraph Angular SDK gives you basic SSE wiring. @cacheplane/angular gives you signal-native streaming, thread persistence, interrupt handling, time travel, DeepAgent support, and deterministic testing — production patterns your team can own.</p>
+          <a href="https://cacheplane.ai/angular" style="display:inline-block;background-color:#004090;color:#fff;padding:12px 28px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none">See the Full Comparison →</a>
+        `,
+        showUnsubscribe: true,
+      }),
+    };
+  }
+
+  if (day === 10) {
+    return {
+      subject: 'The pilot program includes hands-on integration',
+      html: wrapEmail({
+        body: `
+          <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#004090;font-weight:700;margin:0 0 8px">Pilot Program</p>
+          <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 14px;line-height:1.3">The pilot program includes hands-on integration</p>
+          <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 14px">Every app deployment license includes a <strong>3-month co-pilot engagement</strong> — we work alongside your Angular team to ship your first LangGraph agent to production.</p>
+          <div style="background:#f8f9fc;border-radius:8px;padding:16px 18px;margin:0 0 24px;border:1px solid rgba(0,64,144,0.08)">
+            <p style="font-size:13px;color:#555770;margin:0 0 4px;line-height:1.6"><strong style="color:#004090">Week 1</strong> · Integration &amp; first stream</p>
+            <p style="font-size:13px;color:#555770;margin:0 0 4px;line-height:1.6"><strong style="color:#004090">Month 1</strong> · First agent in staging</p>
+            <p style="font-size:13px;color:#555770;margin:0;line-height:1.6"><strong style="color:#004090">Month 3</strong> · Production deployment</p>
+          </div>
+          <a href="https://cacheplane.ai/pilot-to-prod" style="display:inline-block;background-color:#004090;color:#fff;padding:12px 28px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none">Learn About the Pilot →</a>
+        `,
+        showUnsubscribe: true,
+      }),
+    };
+  }
+
+  // day === 20
+  return {
+    subject: "Ready to ship your LangGraph agent? Let's talk.",
+    html: wrapEmail({
+      body: `
+        <p style="font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.08em;color:#004090;font-weight:700;margin:0 0 8px">Let's Connect</p>
+        <p style="font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 14px;line-height:1.3">Ready to ship your LangGraph agent? Let's talk.</p>
+        <p style="font-size:14px;color:#555770;line-height:1.7;margin:0 0 24px">If your team is evaluating how to take an Angular + LangGraph agent to production, I'd love to hear what you're building. Reply to this email or <a href="mailto:hello@cacheplane.io" style="color:#004090;text-decoration:underline">schedule a conversation</a> — no pitch, just a technical discussion about your use case.</p>
+      `,
+      showUnsubscribe: true,
+    }),
+  };
+}
+```
+
+- [ ] **Step 5: Create Render drip campaign**
+
+Same structure as Angular drip. Day 2: "Did you read Chapter 2 on declarative UI specs?" Day 5: "Why tight coupling between agents and UI kills iteration speed" linking to `/render`. Day 10: pilot program. Day 20: "Ready to decouple your agent UI? Let's talk." Use `#1a7a40` for CTA button color.
+
+- [ ] **Step 6: Create Chat drip campaign**
+
+Same structure. Day 2: "Did you read Chapter 2 on batteries-included components?" Day 5: "The sprint tax: why every team rebuilds chat from scratch" linking to `/chat`. Day 10: pilot program. Day 20: "Ready to ship your agent chat? Let's talk." Use `#5a00c8` for CTA button color.
+
+- [ ] **Step 7: Commit all email templates**
+
+```bash
+git add apps/website/emails/
+git commit -m "feat(website): add library-specific download confirmation and drip email campaigns"
+```
+
+---
+
+## Task 10: Delete FullStackSection
+
+**Files:**
+- Delete: `apps/website/src/components/landing/FullStackSection.tsx`
+
+- [ ] **Step 1: Verify no remaining imports of FullStackSection**
+
+Run: `grep -r "FullStackSection" apps/website/src/`
+
+Expected: No results (the import was already replaced in Task 1).
+
+- [ ] **Step 2: Delete the file**
+
+```bash
+git rm apps/website/src/components/landing/FullStackSection.tsx
+git commit -m "chore(website): remove FullStackSection — replaced by LibrariesSection"
+```
+
+---
+
+## Task 11: Final Verification
+
+- [ ] **Step 1: Build the website**
+
+Run: `npx nx build website`
+
+Expected: Build succeeds with no errors.
+
+- [ ] **Step 2: Smoke test all pages**
+
+Serve the production build and navigate to:
+- `/` — Home page with LibrariesSection cards
+- `/angular` — Full Angular landing page
+- `/render` — Full Render landing page
+- `/chat` — Full Chat landing page
+- `/docs/getting-started/introduction` on mobile — Single hamburger menu with docs sections
+- Footer on any page — Libraries column with 3 links
+
+- [ ] **Step 3: Commit any fixes**
+
+If any issues are found, fix and commit.
diff --git a/docs/superpowers/specs/2026-04-09-a2ui-phase3-design.md b/docs/superpowers/specs/2026-04-09-a2ui-phase3-design.md
new file mode 100644
index 000000000..d9cfea669
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-09-a2ui-phase3-design.md
@@ -0,0 +1,295 @@
+# A2UI Phase 3 Design Spec
+
+## Overview
+
+A2UI Phase 3 delivers three capabilities: 6 new components expanding the catalog to 18, a generalized event system built into the render lib, and custom catalog support through the existing ViewRegistry composition API. The event system is the foundational change — it lives in `@cacheplane/render` so both json-render specs and A2UI surfaces share one event model.
+
+## 1. Render-Lib Event System
+
+### Event Types
+
+A new `RenderEvent` union type in `@cacheplane/render`:
+
+```typescript
+type RenderEvent =
+  | RenderHandlerEvent
+  | RenderStateChangeEvent
+  | RenderLifecycleEvent;
+
+interface RenderHandlerEvent {
+  type: 'handler';
+  action: string;
+  params: Record<string, unknown>;
+  result?: unknown;
+}
+
+interface RenderStateChangeEvent {
+  type: 'stateChange';
+  path: string;
+  value: unknown;
+  snapshot: Record<string, unknown>;
+}
+
+interface RenderLifecycleEvent {
+  type: 'lifecycle';
+  event: 'mounted' | 'destroyed';
+  scope: 'spec' | 'element';
+  elementKey?: string;
+  elementType?: string;
+}
+```
+
+### RenderSpecComponent Changes
+
+- New `events` output emitting `RenderEvent`.
+- Existing `handlers` input unchanged — local handlers execute immediately, then a `RenderHandlerEvent` is emitted on `events`.
+- `StateStore` subscription: on every `set()`/`update()`, a `RenderStateChangeEvent` fires with path, new value, and full snapshot.
+- Spec-level lifecycle: `mounted` on `ngOnInit`, `destroyed` on `ngOnDestroy`.
+- Element-level lifecycle: only for elements with `lifecycle: true` in the spec. Opt-in to avoid noise.
+
+### Public API Additions
+
+New exports from `@cacheplane/render`:
+
+```typescript
+export type {
+  RenderEvent,
+  RenderHandlerEvent,
+  RenderStateChangeEvent,
+  RenderLifecycleEvent,
+};
+```
+
+## 2. New A2UI Components (6)
+
+All follow the existing pattern: standalone Angular component in `libs/chat/src/lib/a2ui/catalog/`. Registered in `a2uiBasicCatalog()`, bringing the total to 18.
+
+### Tabs
+
+```typescript
+props: {
+  tabs: { label: string; childKeys: string[] }[];
+  selected?: number;                         // default 0
+  _bindings?: { selected: string };          // two-way bind selected index
+}
+```
+
+Tab bar with click handlers. Content panel renders `childKeys` of active tab via `<render-element>`. Writes selected index to StateStore on tab change.
+
+### Modal
+
+```typescript
+props: {
+  title?: string;
+  open: boolean;
+  childKeys: string[];
+  dismissible?: boolean;                     // default true
+  _bindings?: { open: string };
+}
+```
+
+Overlay dialog with backdrop. Renders children in dialog body. Writes open state to StateStore on open/close. Backdrop click closes when dismissible.
+
+### Video
+
+```typescript
+props: {
+  url: string;
+  poster?: string;
+  autoplay?: boolean;                        // default false
+  controls?: boolean;                        // default true
+}
+```
+
+HTML5 `<video>` wrapper. Display only, no bindings.
+
+### AudioPlayer
+
+```typescript
+props: {
+  url: string;
+  autoplay?: boolean;                        // default false
+  controls?: boolean;                        // default true
+}
+```
+
+HTML5 `<audio>` wrapper. Display only, no bindings.
+
+### DateTimeInput
+
+```typescript
+props: {
+  label?: string;
+  value?: string;                            // ISO string
+  type?: 'date' | 'time' | 'datetime-local'; // default 'date'
+  min?: string;
+  max?: string;
+  _bindings?: { value: string };
+}
+```
+
+Native date/time `<input>`. Writes value to StateStore on change.
+
+### Slider
+
+```typescript
+props: {
+  label?: string;
+  value?: number;                            // default: min
+  min: number;
+  max: number;
+  step?: number;                             // default 1
+  _bindings?: { value: string };
+}
+```
+
+`<input type="range">` with value label. Writes value to StateStore on change.
+
+## 3. A2UI Action → Spec Event Binding Bridge
+
+Today `surfaceToSpec()` passes `action` as a raw prop. Phase 3 wires A2UI actions into the render-lib's `on` binding system.
+
+### surfaceToSpec() Mapping
+
+A2UI event actions map to spec `on` bindings:
+
+```typescript
+// A2UI component with event action
+{
+  id: 'submit_btn',
+  component: 'Button',
+  label: 'Submit',
+  action: { event: { name: 'formSubmit', context: { formId: 'signup' } } }
+}
+
+// Produces UIElement with on binding
+{
+  type: 'Button',
+  props: { label: 'Submit' },
+  on: {
+    click: {
+      action: 'a2ui:event',
+      params: { surfaceId: 'sf1', name: 'formSubmit', context: { formId: 'signup' } }
+    }
+  }
+}
+```
+
+A2UI local actions (function calls) map similarly:
+
+```typescript
+// A2UI local action
+{ action: { functionCall: { call: 'openUrl', args: { url: 'https://...' } } } }
+
+// Produces
+{
+  on: {
+    click: {
+      action: 'a2ui:localAction',
+      params: { call: 'openUrl', args: { url: 'https://...' } }
+    }
+  }
+}
+```
+
+### Default A2UI Handlers
+
+`A2uiSurfaceComponent` registers two handlers in the `RenderContext`:
+
+- `a2ui:event` — emits upward for consumer routing to agent.
+- `a2ui:localAction` — executes locally via the function registry (e.g., `openUrl`).
+
+Both fire through the render-lib event system, so the consumer sees them as `RenderHandlerEvent` on the `events` output.
+
+### Data Model → StateStore Bridge
+
+- `surfaceToSpec()` initializes the spec's `state` from `surface.dataModel`.
+- Two-way `_bindings` map to `$bindState` expressions in resolved props.
+- When a bound input changes, it writes to `StateStore` (existing render-lib mechanism).
+- `StateStore` subscription emits `RenderStateChangeEvent` — consumer sees data model mutations as state changes.
+- `A2uiSurfaceStore` remains source of truth for incoming agent messages; it syncs into `StateStore` on each `updateDataModel` message.
+
+This eliminates the custom `a2ui:datamodel` event emission pattern in favor of the render-lib's state change events.
+
+## 4. Custom Catalogs
+
+No new API. Consumers compose catalogs using existing `views`/`withViews`/`withoutViews` from `@cacheplane/render`.
+
+### ChatComponent Registry
+
+The existing `views` input is the single source of truth for all generative UI:
+
+```typescript
+readonly views = input<ViewRegistry | undefined>(undefined);
+```
+
+- **No views provided:** No generative UI rendering (graceful no-op). No implicit fallback to A2UI.
+- **Consumer wants A2UI:** `<chat [views]="a2uiBasicCatalog()" />`
+- **Consumer wants A2UI + custom:** `<chat [views]="withViews(a2uiBasicCatalog(), { Chart: MyChart })" />`
+- **Consumer wants only custom, no A2UI:** `<chat [views]="views({ Chart: MyChart })" />`
+
+`a2uiBasicCatalog()` remains a convenience export — consumers compose with it explicitly when they want A2UI support.
+
+The `catalogId` field on `A2uiCreateSurface` is deferred — multi-catalog routing is a follow-up concern.
+
+## 5. ChatComponent Event Output
+
+### ChatRenderEvent
+
+```typescript
+interface ChatRenderEvent {
+  messageIndex: number;
+  surfaceId?: string;
+  event: RenderEvent;
+}
+```
+
+### Output
+
+```typescript
+readonly renderEvent = output<ChatRenderEvent>();
+```
+
+Both `<chat-generative-ui>` and `<a2ui-surface>` bind their `render-spec` `events` output. `ChatComponent` wraps each with the message index and optional surface ID, then emits on `renderEvent`.
+
+### Consumer Usage
+
+```typescript
+<chat
+  [ref]="agentRef"
+  [views]="catalog"
+  (renderEvent)="onRenderEvent($event)"
+/>
+
+onRenderEvent(e: ChatRenderEvent) {
+  if (e.event.type === 'handler' && e.event.action === 'a2ui:event') {
+    this.agentRef.sendMessage({ type: 'a2ui_event', ...e.event.params });
+  }
+  if (e.event.type === 'stateChange' && e.surfaceId) {
+    // Data model changed — route back if needed
+  }
+}
+```
+
+## 6. Documentation Updates
+
+### New Pages
+
+- **`render/events.mdx`** — RenderEvent types, handler + event interaction, lifecycle opt-in, StateStore change events, usage examples.
+- **`guides/custom-catalogs.mdx`** — Composing catalogs with `views`/`withViews`/`withoutViews`, registering custom components, using with `ChatComponent` for both json-render and A2UI paths.
+
+### Updated Pages
+
+- **`chat/a2ui/catalog.mdx`** — Add 6 new components, update count to 18, update summary table.
+- **`chat/a2ui/overview.mdx`** — Action → event binding bridge, events flowing back through render-lib.
+- **`chat/a2ui/surface-store.mdx`** — StateStore bridge documentation.
+- **`chat/a2ui/surface-component.mdx`** — Default handlers (`a2ui:event`, `a2ui:localAction`), action-to-binding mapping.
+- **Chat component docs** — `renderEvent` output, `ChatRenderEvent` type, `views` as single registry, consumer wiring examples.
+
+## Future Considerations (Out of Scope)
+
+- **Granular event outputs** — Filtered outputs by event type, per-surface event streams, or declarative event routing in the spec.
+- **`catalogId` routing** — Multi-catalog support where `createSurface` selects a catalog by ID.
+- **A2UI Phase 4 components** — Additional components beyond the 18 in this phase.
+- **Remote function calls** — Agent-defined functions that execute server-side.
+- **`sendDataModel` transport integration** — Built-in StreamManager integration for sending data model state back to agents.
diff --git a/docs/superpowers/specs/2026-04-09-library-landing-pages-design.md b/docs/superpowers/specs/2026-04-09-library-landing-pages-design.md
new file mode 100644
index 000000000..d32ca8b86
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-09-library-landing-pages-design.md
@@ -0,0 +1,469 @@
+# Library Landing Pages & Home Page Refactor
+
+**Date:** 2026-04-09
+**Status:** Approved
+
+## Overview
+
+Create 3 bespoke library landing pages (`/angular`, `/render`, `/chat`), refactor the home page to replace the stacked diagram with teaser cards, generate 3 library-specific whitepapers, add drip email campaigns, update the footer with a Libraries column, and merge the mobile docs nav into the main mobile menu.
+
+## Goals
+
+- Give each library a dedicated, go-to-market-focused landing page targeting enterprise decision makers
+- Spark developer interest on the home page with concise teaser cards
+- Generate library-specific whitepapers as primary conversion assets
+- Improve mobile UX by consolidating two separate mobile menus into one
+- Enable SEO/bot discovery of library pages via footer links
+
+---
+
+## 1. Home Page Refactor
+
+### Replace FullStackSection with LibrariesSection
+
+Remove the current `FullStackSection` component (3-layer stacked diagram with connectors, problem/solution blocks, and roadmap strip). Replace with a new `LibrariesSection` — a 3-card teaser grid.
+
+**Remove entirely:** The roadmap strip (Now / Coming Soon / On the Horizon).
+
+**New component: `LibrariesSection`**
+
+```
+Eyebrow:  "The Cacheplane Stack"
+Headline: "Three libraries. One architecture."
+Subtitle: "Everything your Angular team needs to ship AI agents to production."
+
+3-card grid (responsive: 1 col mobile, 3 col desktop):
+
+Card 1 — Angular (blue #004090)
+  Package: @cacheplane/angular
+  One-liner: "Signal-native streaming for LangGraph agents"
+  Chips: agent(), provideAgent(), interrupt(), MockStreamTransport
+  CTA: "Explore Angular →" → /angular
+
+Card 2 — Render (green #1a7a40)
+  Package: @cacheplane/render
+  One-liner: "Agents that render UI — without coupling to your frontend"
+  Chips: <render-spec>, defineAngularRegistry(), signalStateStore(), JSON patch
+  CTA: "Explore Render →" → /render
+
+Card 3 — Chat (purple #5a00c8)
+  Package: @cacheplane/chat
+  One-liner: "Batteries-included agent chat — fully featured from day one"
+  Chips: <chat-messages>, <chat>, <chat-debug>, <chat-generative-ui>
+  CTA: "Explore Chat →" → /chat
+```
+
+Each card uses glassmorphism styling consistent with the rest of the site. Cards are developer-focused — package name, value prop, API surface, clear link out.
+
+### Home Page Section Order (updated)
+
+1. HeroTwoCol
+2. StatsStrip
+3. ProblemSection
+4. **LibrariesSection** (replaces FullStackSection)
+5. ChatFeaturesSection
+6. ValueProps
+7. LangGraphShowcase
+8. DeepAgentsShowcase
+9. FairComparisonSection
+10. WhitePaperSection (continues pointing to overview whitepaper.pdf)
+11. HomePilotCTA
+12. ArchDiagram
+
+---
+
+## 2. Library Landing Pages
+
+Three new routes: `/angular`, `/render`, `/chat`. Each is a full bespoke conversion funnel page — not templated. Each follows the same section order but with entirely unique content.
+
+### Section Structure (all 3 pages)
+
+1. **LibraryHero** — Eyebrow (package name), headline, subheadline, primary CTA (whitepaper download), secondary CTA (docs), trust badges, library color accent
+2. **ProblemSolution** — Two-column: "Without this" pain (red accent) vs "With @cacheplane/___" solution (green accent)
+3. **FeaturesGrid** — 2-column grid of feature cards, each with embedded cockpit iframe showing live demo
+4. **CodeShowcase** — 1-2 syntax-highlighted code snippets showing core API usage
+5. **ComparisonTable** — Head-to-head comparison table specific to each library's competitive landscape
+6. **WhitePaperGate** — Library-specific whitepaper download with email capture
+7. **LibraryFooterCTA** — Primary: whitepaper. Secondary: pilot-to-prod. Tertiary: docs.
+
+### Cockpit Iframe URLs
+
+Each feature card embeds a cockpit iframe. The cockpit is hosted at `cockpit.cacheplane.ai`. Iframe URLs follow the pattern:
+
+- Angular features: `https://cockpit.cacheplane.ai/{topic}/{capability}` — uses existing LangGraph and Deep Agent cockpit examples
+- Render features: `https://cockpit.cacheplane.ai/render/{capability}` — uses the 6 existing render examples
+- Chat features: `https://cockpit.cacheplane.ai/chat/{capability}` — uses the 5 scoped chat examples
+
+Exact URLs will be resolved during implementation by mapping to existing cockpit routes.
+
+### Page ambient styling
+
+Each page uses the same ambient gradient blob pattern as the home page and pilot-to-prod page, with the library's color influencing the gradient tones.
+
+---
+
+### 2a. `/angular` — Agent Streaming Core
+
+**Hero:**
+- Eyebrow: `@cacheplane/angular`
+- Headline: "Ship LangGraph agents in Angular — without building the plumbing"
+- Subheadline: "Signal-native streaming, thread persistence, interrupts, and deterministic testing. The complete agent primitive layer for Angular 20+."
+- Primary CTA: "Download the Guide" → `/whitepapers/angular.pdf`
+- Secondary CTA: "View Docs" → `/docs`
+- Trust badges: Angular 20+, LangGraph, LangChain, DeepAgent
+- Color: Blue (#004090)
+
+**ProblemSolution:**
+- Without: "Your LangGraph agent works. Your Angular frontend doesn't stream it." — zone.js pain, manual subscription management, custom SSE wiring, OnPush incompatibility, no test story
+- With: "agent() gives you production-ready streaming on day one." — signals-native, OnPush compatible, built-in thread persistence, interrupt handling, MockStreamTransport
+
+**FeaturesGrid (6 cards with cockpit iframes):**
+1. `agent()` API — basic streaming demo
+2. Thread persistence — thread list + resume demo
+3. Interrupt handling — approval flow demo
+4. Tool call support — tool execution states demo
+5. Time travel — state history navigation demo
+6. DeepAgent support — multi-agent orchestration demo
+
+**CodeShowcase (2 snippets):**
+- Minimal `agent()` setup (8-10 lines)
+- `provideAgent()` configuration with thread persistence (10-12 lines)
+
+**ComparisonTable: "LangGraph Angular SDK vs @cacheplane/angular"**
+
+Head-to-head against the recently released official LangGraph Angular SDK:
+
+| Capability | LangGraph Angular SDK | @cacheplane/angular |
+|---|---|---|
+| SSE streaming | Manual wiring | Signal-native via agent() |
+| State management | Custom signals | Built-in reactive state |
+| Thread persistence | DIY localStorage | Built-in threadId signal + restore |
+| Interrupt handling | Manual Command.RESUME | interrupt() signal + approve/edit/cancel |
+| Tool call rendering | Raw events | Structured tool call state |
+| Time travel | Not included | Built-in state history |
+| Testing | Against live API | MockStreamTransport, offline, <100ms |
+| OnPush compatibility | Requires workarounds | Native signal support |
+| DeepAgent support | Not included | Full multi-agent orchestration |
+
+**WhitePaperGate:** "The Enterprise Guide to Agent Streaming in Angular"
+**FooterCTA:** Primary: whitepaper. Secondary: pilot-to-prod. Tertiary: docs.
+
+---
+
+### 2b. `/render` — Generative UI
+
+**Hero:**
+- Eyebrow: `@cacheplane/render`
+- Headline: "Agents that render UI — without coupling to your frontend"
+- Subheadline: "Built on Vercel's json-render spec — an open standard you already trust. @cacheplane/render brings it to Angular with streaming JSON patches, component registries, and signal-native state."
+- Primary CTA: "Download the Guide" → `/whitepapers/render.pdf`
+- Secondary CTA: "View Docs" → `/docs`
+- Trust badges: Angular 20+, Vercel json-render, JSON Patch streaming
+- Color: Green (#1a7a40)
+
+**ProblemSolution:**
+- Without: "Every new agent output means a new frontend deploy." — hardcoded component logic per agent, tight coupling blocks iteration, can't swap UI without rewriting agent, no streaming for progressive updates
+- With: "The agent emits a spec. Your registry renders it." — declarative, decoupled, hot-swappable components, no frontend deploy for new agent capabilities, progressive JSON patch streaming
+
+**FeaturesGrid (6 cards with cockpit iframes — maps to existing render examples):**
+1. Spec rendering — basic `<render-spec>` demo
+2. Element rendering — component mapping demo
+3. State management — `signalStateStore()` demo
+4. Component registry — `defineAngularRegistry()` demo
+5. Repeat loops — list rendering demo
+6. Computed functions — reactive derived values demo
+
+**CodeShowcase (2 snippets):**
+- `defineAngularRegistry()` setup (8-10 lines)
+- `<render-spec>` template binding (6-8 lines)
+
+**ComparisonTable: "Hardcoded agent UI vs @cacheplane/render"**
+
+| Capability | Hardcoded Approach | @cacheplane/render |
+|---|---|---|
+| New agent output | Frontend deploy required | Spec change only, no deploy |
+| Component swapping | Rewrite agent + frontend | Swap registry entry |
+| Streaming updates | Manual DOM manipulation | JSON patch streaming, automatic |
+| Testing specs | Integration tests only | Unit test specs in isolation |
+| Frontend/agent coupling | Tight — changes break both | Decoupled via spec contract |
+| Iteration speed | Days per change | Minutes per change |
+| Open standard | Proprietary format | Vercel json-render spec |
+
+**WhitePaperGate:** "The Enterprise Guide to Generative UI in Angular"
+**FooterCTA:** Primary: whitepaper. Secondary: pilot-to-prod. Tertiary: docs.
+
+---
+
+### 2c. `/chat` — Chat UI Components
+
+**Hero:**
+- Eyebrow: `@cacheplane/chat`
+- Headline: "Production agent chat UI in days, not sprints"
+- Subheadline: "The batteries-included Angular chat library. Built on the agent framework, Vercel's json-render spec, and Google's A2UI spec. Every feature included — debug, theming, generative UI, streaming — from day one."
+- Primary CTA: "Download the Guide" → `/whitepapers/chat.pdf`
+- Secondary CTA: "View Docs" → `/docs`
+- Trust badges: Angular 20+, Vercel json-render, Google A2UI, WCAG accessible
+- Color: Purple (#5a00c8)
+
+**ProblemSolution:**
+- Without: "Every team rebuilds the same chat UI. It takes 4-6 weeks and delays the real agent work." — message rendering, streaming indicators, input handling, accessibility, responsive layout, generative UI, debug tooling — all from scratch, sprint after sprint
+- With: "Fully featured from day one. No feature backlog." — pre-built components, json-render spec support via @cacheplane/render, Google A2UI spec support, debug tooling, theming, accessibility — all included, not add-ons
+
+**FeaturesGrid (5 cards with cockpit iframes):**
+1. Messages — streaming message display demo
+2. Input — chat input with send/interrupt demo
+3. Generative UI — inline spec rendering in chat (json-render + A2UI) demo
+4. Theming — design token customization demo
+5. Debug — agent state inspector demo
+
+**CodeShowcase (2 snippets):**
+- `<chat>` prebuilt usage (6-8 lines)
+- Custom theming with CSS custom properties (8-10 lines)
+
+**ComparisonTable: "Incrementally building chat vs @cacheplane/chat"**
+
+| Capability | Build Incrementally | @cacheplane/chat |
+|---|---|---|
+| Message rendering | Sprint 1 | Included |
+| Streaming indicators | Sprint 1 | Included |
+| Input handling | Sprint 2 | Included |
+| Accessibility (WCAG) | Sprint 2-3 | Included |
+| Theming / design system | Sprint 3 | Included (CSS custom properties) |
+| Generative UI (json-render) | Sprint 4+ | Included (via @cacheplane/render) |
+| Google A2UI spec | Sprint 5+ | Included |
+| Debug tooling | Often never | Included |
+| Time to production | 4-6 weeks | Days |
+
+**WhitePaperGate:** "The Enterprise Guide to Agent Chat Interfaces in Angular"
+**FooterCTA:** Primary: whitepaper. Secondary: pilot-to-prod. Tertiary: docs.
+
+---
+
+## 3. Whitepaper Generation Pipeline
+
+### Script Refactor
+
+Refactor `apps/website/scripts/generate-whitepaper.ts` from a single hardcoded whitepaper into a multi-whitepaper pipeline.
+
+**Config structure:**
+```typescript
+const WHITEPAPERS: Record<string, WhitepaperConfig> = {
+  overview: { title, subtitle, coverColor, chapters[] },  // existing
+  angular:  { title, subtitle, coverColor, chapters[] },
+  render:   { title, subtitle, coverColor, chapters[] },
+  chat:     { title, subtitle, coverColor, chapters[] },
+};
+```
+
+**CLI usage:**
+- `npm run generate-whitepaper` → generates all 4
+- `npm run generate-whitepaper -- --paper angular` → generates one
+
+**Output files:**
+- `public/whitepaper.pdf` — existing overview (unchanged path for backwards compat)
+- `public/whitepapers/angular.pdf`
+- `public/whitepapers/render.pdf`
+- `public/whitepapers/chat.pdf`
+
+### Chapter Definitions
+
+**"The Enterprise Guide to Agent Streaming in Angular" (angular.pdf) — 6 chapters:**
+
+1. **The Last-Mile Problem** — LangGraph backend works, Angular frontend is the gap. Why SSE + zones + signals is hard. The cost of building it yourself.
+2. **The agent() API** — Signal-native streaming, `agent()`, `provideAgent()`, reactive state management. Code examples showing minimal setup.
+3. **Thread Persistence & Memory** — `threadId` signal, localStorage restore, thread list UI, LangGraph MemorySaver integration. Production conversation management.
+4. **Interrupt & Approval Flows** — `interrupt()` signal, Command.RESUME, approve/edit/cancel patterns. Production human-in-the-loop for consequential actions.
+5. **Full LangGraph Feature Coverage** — Tool calls, subgraphs, time travel, DeepAgent support. Why partial coverage isn't production-ready. Comparison with LangGraph Angular SDK.
+6. **Deterministic Testing** — MockStreamTransport, `createMockStreamResourceRef()`, offline CI, sub-100ms tests. Why testing against live APIs doesn't scale.
+
+**"The Enterprise Guide to Generative UI in Angular" (render.pdf) — 5 chapters:**
+
+1. **The Coupling Problem** — Why hardcoding agent output to component logic blocks iteration. The cost of tight coupling between agent and frontend.
+2. **Declarative UI Specs & the json-render Standard** — Vercel's json-render spec, how agents emit structured UI without knowing the frontend. Open standard trust.
+3. **The Component Registry** — `defineAngularRegistry()`, `<render-spec>`, mapping specs to Angular components. Swap components without touching the agent.
+4. **Streaming JSON Patches** — Progressive UI updates, rows appearing as data arrives, partial-json parsing, skeleton states. Real-time rendering.
+5. **State Management & Computed Functions** — `signalStateStore()`, computed properties, repeat loops, reactive spec rendering. Dynamic, interactive generative UI.
+
+**"The Enterprise Guide to Agent Chat Interfaces in Angular" (chat.pdf) — 5 chapters:**
+
+1. **The Sprint Tax** — Every team rebuilds chat UI from scratch. 4-6 weeks of work that delays agent development. The compounding cost across teams.
+2. **Batteries-Included Components** — `<chat-messages>`, `<chat>`, the component model. Every feature from day one — not a feature backlog.
+3. **Theming & Design System Integration** — CSS custom properties, design tokens, integrating with enterprise design systems. Brand-consistent agent UI.
+4. **Generative UI in Chat** — json-render spec (via @cacheplane/render) and Google A2UI spec support out of the box. Inline spec rendering in conversation.
+5. **Debug Tooling** — `<chat-debug>`, inspecting agent state, messages, tool calls in development. Ship with confidence. Why most teams skip this and regret it.
+
+### Cover Page Customization
+
+Each whitepaper gets a unique cover:
+- **Overview:** Existing gradient (pink → purple → blue)
+- **Angular:** Blue-dominant gradient, "The Enterprise Guide to Agent Streaming in Angular"
+- **Render:** Green-dominant gradient, "The Enterprise Guide to Generative UI in Angular"
+- **Chat:** Purple-dominant gradient, "The Enterprise Guide to Agent Chat Interfaces in Angular"
+
+---
+
+## 4. Drip Email Campaigns
+
+### Existing Pattern
+
+The current drip campaign (`emails/drip-whitepaper-followup.ts`) sends 4 emails on days 2, 5, 10, and 20 after whitepaper download. Each escalates from engagement → education → product → sales conversation.
+
+### New Campaigns
+
+Create 3 new drip campaign files, one per library whitepaper. Each follows the same 4-email, 20-day cadence but with library-specific content.
+
+**Angular drip (`emails/drip-angular-followup.ts`):**
+- Day 2: "Did you read Chapter 2 on the agent() API?" — highlights the core API, links to docs
+- Day 5: "LangGraph Angular SDK vs @cacheplane/angular" — comparison narrative, links to `/angular`
+- Day 10: "The pilot program includes hands-on integration" — pilot program intro, links to `/pilot-to-prod`
+- Day 20: "Ready to ship your LangGraph agent? Let's talk." — soft sales outreach
+
+**Render drip (`emails/drip-render-followup.ts`):**
+- Day 2: "Did you read Chapter 2 on declarative UI specs?" — highlights Vercel json-render, links to docs
+- Day 5: "Why tight coupling between agents and UI kills iteration speed" — problem narrative, links to `/render`
+- Day 10: "The pilot program includes hands-on integration" — pilot program intro, links to `/pilot-to-prod`
+- Day 20: "Ready to decouple your agent UI? Let's talk." — soft sales outreach
+
+**Chat drip (`emails/drip-chat-followup.ts`):**
+- Day 2: "Did you read Chapter 2 on batteries-included components?" — highlights feature breadth, links to docs
+- Day 5: "The sprint tax: why every team rebuilds chat from scratch" — problem narrative, links to `/chat`
+- Day 10: "The pilot program includes hands-on integration" — pilot program intro, links to `/pilot-to-prod`
+- Day 20: "Ready to ship your agent chat? Let's talk." — soft sales outreach
+
+### Download Confirmation Emails
+
+3 new download confirmation emails (`emails/angular-download.ts`, `emails/render-download.ts`, `emails/chat-download.ts`) following the existing `whitepaper-download.ts` pattern but with library-specific chapter summaries and download links.
+
+### API Route Update
+
+Update `/api/whitepaper-signup` to accept a `paper` field indicating which whitepaper was downloaded. This enables routing to the correct drip campaign. The NDJSON log gets the `paper` field appended to each entry.
+
+---
+
+## 5. Footer Update
+
+### Add Libraries Column
+
+The footer grid changes from `md:grid-cols-4` to `md:grid-cols-5`. A new **Libraries** column is added between Product and Resources:
+
+```
+Brand (2 cols)    Product       Libraries     Resources
+────────────────  ──────────    ──────────    ──────────
+[brand content]   Documentation Angular       Getting Started
+                  API Reference Render        npm Package
+                  Examples      Chat          Commercial License
+                  Pricing
+                  GitHub
+```
+
+All 3 library links are internal `<Link>` components pointing to `/angular`, `/render`, `/chat` — crawlable for SEO and bot discovery.
+
+---
+
+## 6. Mobile Navigation Integration
+
+### Problem
+
+On mobile (< 768px), docs pages currently have two separate expandable menus:
+1. The main header hamburger (site links: Pilot to Prod, Docs, Examples, etc.)
+2. A separate `DocsMobileNav` component rendered in the docs content area (docs sections: Getting Started, Guides, Concepts, API Reference)
+
+This is confusing — users must discover and use two different menus.
+
+### Solution
+
+Merge both menus into the main header hamburger. When on a docs page, the mobile menu shows:
+
+```
+─── Site ───
+Pilot to Prod
+Docs
+Examples
+Pricing
+GitHub
+Get Started
+
+─── divider ───
+
+─── Documentation ───
+▸ Getting Started
+  Introduction
+  Quick Start
+  Installation
+▸ Guides
+  Streaming
+  Persistence
+  ...
+▸ Concepts
+  ...
+▸ API Reference
+  ...
+```
+
+**Implementation:**
+- `Nav.tsx` becomes context-aware: it checks the current pathname. If on a `/docs/*` route, it renders the docs sections below the site links in the mobile menu.
+- `Nav.tsx` imports `docsConfig` from `docs-config.ts` — single source of truth.
+- Docs sections are collapsible (same accordion behavior as current `DocsMobileNav`).
+- Active docs page gets accent color highlight.
+- `DocsMobileNav` component is removed from the docs page layout.
+- Desktop behavior is completely unchanged.
+
+---
+
+## 7. Follow-Up Tasks (Out of Scope)
+
+- **Consolidate @cacheplane/stream-resource into @cacheplane/angular** — merge the base primitives library into the agent library so there are truly 3 libraries, not 4. Tracked as a separate task.
+- **Editorial review of generated whitepaper content** — the pipeline generates content via Claude API; human review of tone, accuracy, and messaging is a follow-up.
+
+---
+
+## File Map
+
+### New Files
+- `apps/website/src/app/angular/page.tsx` — Angular landing page
+- `apps/website/src/app/render/page.tsx` — Render landing page
+- `apps/website/src/app/chat/page.tsx` — Chat landing page
+- `apps/website/src/components/landing/LibrariesSection.tsx` — Home page teaser cards
+- `apps/website/src/components/landing/AngularHero.tsx`
+- `apps/website/src/components/landing/AngularProblemSolution.tsx`
+- `apps/website/src/components/landing/AngularFeaturesGrid.tsx`
+- `apps/website/src/components/landing/AngularCodeShowcase.tsx`
+- `apps/website/src/components/landing/AngularComparison.tsx`
+- `apps/website/src/components/landing/AngularWhitePaperGate.tsx`
+- `apps/website/src/components/landing/AngularFooterCTA.tsx`
+- `apps/website/src/components/landing/RenderHero.tsx`
+- `apps/website/src/components/landing/RenderProblemSolution.tsx`
+- `apps/website/src/components/landing/RenderFeaturesGrid.tsx`
+- `apps/website/src/components/landing/RenderCodeShowcase.tsx`
+- `apps/website/src/components/landing/RenderComparison.tsx`
+- `apps/website/src/components/landing/RenderWhitePaperGate.tsx`
+- `apps/website/src/components/landing/RenderFooterCTA.tsx`
+- `apps/website/src/components/landing/ChatLandingHero.tsx`
+- `apps/website/src/components/landing/ChatLandingProblemSolution.tsx`
+- `apps/website/src/components/landing/ChatLandingFeaturesGrid.tsx`
+- `apps/website/src/components/landing/ChatLandingCodeShowcase.tsx`
+- `apps/website/src/components/landing/ChatLandingComparison.tsx`
+- `apps/website/src/components/landing/ChatLandingWhitePaperGate.tsx`
+- `apps/website/src/components/landing/ChatLandingFooterCTA.tsx`
+- `apps/website/emails/drip-angular-followup.ts`
+- `apps/website/emails/drip-render-followup.ts`
+- `apps/website/emails/drip-chat-followup.ts`
+- `apps/website/emails/angular-download.ts`
+- `apps/website/emails/render-download.ts`
+- `apps/website/emails/chat-download.ts`
+- `public/whitepapers/angular.pdf` (generated)
+- `public/whitepapers/render.pdf` (generated)
+- `public/whitepapers/chat.pdf` (generated)
+
+### Modified Files
+- `apps/website/src/app/page.tsx` — Replace FullStackSection import with LibrariesSection
+- `apps/website/src/components/shared/Footer.tsx` — Add Libraries column, grid-cols-5
+- `apps/website/src/components/shared/Nav.tsx` — Mobile menu context-aware for docs
+- `apps/website/src/app/docs/[[...slug]]/page.tsx` — Remove DocsMobileNav from layout
+- `apps/website/scripts/generate-whitepaper.ts` — Multi-whitepaper config + CLI args
+- `apps/website/src/app/api/whitepaper-signup/route.ts` — Accept `paper` field
+- `package.json` — Update generate-whitepaper script if needed
+
+### Deleted Files
+- `apps/website/src/components/landing/FullStackSection.tsx` — Replaced by LibrariesSection
+- `apps/website/src/components/docs/DocsMobileNav.tsx` — Merged into Nav.tsx mobile menu
diff --git a/libs/chat/src/lib/a2ui/catalog/audio-player.component.ts b/libs/chat/src/lib/a2ui/catalog/audio-player.component.ts
new file mode 100644
index 000000000..9534c8360
--- /dev/null
+++ b/libs/chat/src/lib/a2ui/catalog/audio-player.component.ts
@@ -0,0 +1,20 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'a2ui-audio-player',
+  standalone: true,
+  template: `
+    <audio
+      class="w-full"
+      [src]="url()"
+      [autoplay]="autoplay()"
+      [controls]="controls()"
+    ></audio>
+  `,
+})
+export class A2uiAudioPlayerComponent {
+  readonly url = input.required<string>();
+  readonly autoplay = input<boolean>(false);
+  readonly controls = input<boolean>(true);
+}
diff --git a/libs/chat/src/lib/a2ui/catalog/button.component.ts b/libs/chat/src/lib/a2ui/catalog/button.component.ts
index 23162abd4..1ed60686b 100644
--- a/libs/chat/src/lib/a2ui/catalog/button.component.ts
+++ b/libs/chat/src/lib/a2ui/catalog/button.component.ts
@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 import { Component, input } from '@angular/core';
-import type { A2uiAction, A2uiCheck } from '@cacheplane/a2ui';
+import type { A2uiCheck } from '@cacheplane/a2ui';
 import { validateChecks } from '@cacheplane/a2ui';
 
 @Component({
@@ -19,7 +19,6 @@ export class A2uiButtonComponent {
   readonly label = input<string>('');
   readonly variant = input<string>('primary');
   readonly disabled = input<boolean>(false);
-  readonly action = input<A2uiAction | undefined>(undefined);
   readonly checks = input<A2uiCheck[]>([]);
   readonly emit = input<(event: string) => void>(() => { /* noop */ });
 
@@ -30,15 +29,6 @@ export class A2uiButtonComponent {
   }
 
   handleClick(): void {
-    const act = this.action();
-    if (!act) return;
-    if ('event' in act) {
-      this.emit()(`a2ui:action:${JSON.stringify(act.event)}`);
-    } else if ('functionCall' in act) {
-      const fc = act.functionCall;
-      if (fc.call === 'openUrl' && typeof globalThis.window !== 'undefined') {
-        globalThis.window.open(String(fc.args['url'] ?? ''), '_blank');
-      }
-    }
+    this.emit()('click');
   }
 }
diff --git a/libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts b/libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts
new file mode 100644
index 000000000..7b4e3e5cf
--- /dev/null
+++ b/libs/chat/src/lib/a2ui/catalog/date-time-input.component.ts
@@ -0,0 +1,39 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'a2ui-date-time-input',
+  standalone: true,
+  template: `
+    <div class="flex flex-col gap-1">
+      @if (label()) {
+        <label class="text-xs text-white/60">{{ label() }}</label>
+      }
+      <input
+        [type]="inputType()"
+        [value]="value()"
+        [min]="min()"
+        [max]="max()"
+        class="bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white"
+        (change)="onChange($event)"
+      />
+    </div>
+  `,
+})
+export class A2uiDateTimeInputComponent {
+  readonly label = input<string>('');
+  readonly value = input<string>('');
+  readonly inputType = input<'date' | 'time' | 'datetime-local'>('date');
+  readonly min = input<string>('');
+  readonly max = input<string>('');
+  readonly _bindings = input<Record<string, string>>({});
+  readonly emit = input<(event: string) => void>(() => { /* noop */ });
+
+  onChange(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    const path = this._bindings()?.['value'];
+    if (path) {
+      this.emit()(`a2ui:datamodel:${path}:${val}`);
+    }
+  }
+}
diff --git a/libs/chat/src/lib/a2ui/catalog/index.ts b/libs/chat/src/lib/a2ui/catalog/index.ts
index c226b075e..58c6fa93a 100644
--- a/libs/chat/src/lib/a2ui/catalog/index.ts
+++ b/libs/chat/src/lib/a2ui/catalog/index.ts
@@ -1,31 +1,43 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 import { views, type ViewRegistry } from '@cacheplane/render';
-import { A2uiTextComponent } from './text.component';
-import { A2uiImageComponent } from './image.component';
-import { A2uiIconComponent } from './icon.component';
-import { A2uiDividerComponent } from './divider.component';
-import { A2uiRowComponent } from './row.component';
-import { A2uiColumnComponent } from './column.component';
-import { A2uiCardComponent } from './card.component';
-import { A2uiListComponent } from './list.component';
+import { A2uiAudioPlayerComponent } from './audio-player.component';
 import { A2uiButtonComponent } from './button.component';
-import { A2uiTextFieldComponent } from './text-field.component';
+import { A2uiCardComponent } from './card.component';
 import { A2uiCheckBoxComponent } from './check-box.component';
 import { A2uiChoicePickerComponent } from './choice-picker.component';
+import { A2uiColumnComponent } from './column.component';
+import { A2uiDateTimeInputComponent } from './date-time-input.component';
+import { A2uiDividerComponent } from './divider.component';
+import { A2uiIconComponent } from './icon.component';
+import { A2uiImageComponent } from './image.component';
+import { A2uiListComponent } from './list.component';
+import { A2uiModalComponent } from './modal.component';
+import { A2uiRowComponent } from './row.component';
+import { A2uiSliderComponent } from './slider.component';
+import { A2uiTabsComponent } from './tabs.component';
+import { A2uiTextComponent } from './text.component';
+import { A2uiTextFieldComponent } from './text-field.component';
+import { A2uiVideoComponent } from './video.component';
 
 export function a2uiBasicCatalog(): ViewRegistry {
   return views({
-    Text: A2uiTextComponent,
-    Image: A2uiImageComponent,
-    Icon: A2uiIconComponent,
-    Divider: A2uiDividerComponent,
-    Row: A2uiRowComponent,
-    Column: A2uiColumnComponent,
-    Card: A2uiCardComponent,
-    List: A2uiListComponent,
+    AudioPlayer: A2uiAudioPlayerComponent,
     Button: A2uiButtonComponent,
-    TextField: A2uiTextFieldComponent,
+    Card: A2uiCardComponent,
     CheckBox: A2uiCheckBoxComponent,
     ChoicePicker: A2uiChoicePickerComponent,
+    Column: A2uiColumnComponent,
+    DateTimeInput: A2uiDateTimeInputComponent,
+    Divider: A2uiDividerComponent,
+    Icon: A2uiIconComponent,
+    Image: A2uiImageComponent,
+    List: A2uiListComponent,
+    Modal: A2uiModalComponent,
+    Row: A2uiRowComponent,
+    Slider: A2uiSliderComponent,
+    Tabs: A2uiTabsComponent,
+    Text: A2uiTextComponent,
+    TextField: A2uiTextFieldComponent,
+    Video: A2uiVideoComponent,
   });
 }
diff --git a/libs/chat/src/lib/a2ui/catalog/modal.component.ts b/libs/chat/src/lib/a2ui/catalog/modal.component.ts
new file mode 100644
index 000000000..d87b821a3
--- /dev/null
+++ b/libs/chat/src/lib/a2ui/catalog/modal.component.ts
@@ -0,0 +1,49 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input } from '@angular/core';
+import type { Spec } from '@json-render/core';
+import { RenderElementComponent } from '@cacheplane/render';
+
+@Component({
+  selector: 'a2ui-modal',
+  standalone: true,
+  imports: [RenderElementComponent],
+  template: `
+    @if (open()) {
+      <div
+        class="fixed inset-0 z-50 flex items-center justify-center"
+        role="dialog"
+        aria-modal="true"
+      >
+        <div
+          class="absolute inset-0 bg-black/60 backdrop-blur-sm"
+          (click)="onBackdropClick()"
+        ></div>
+        <div class="relative bg-gray-900 border border-white/10 rounded-xl p-6 max-w-lg w-full mx-4 shadow-2xl">
+          @if (title()) {
+            <h2 class="text-lg font-semibold mb-4">{{ title() }}</h2>
+          }
+          @for (key of childKeys(); track key) {
+            <render-element [elementKey]="key" [spec]="spec()" />
+          }
+        </div>
+      </div>
+    }
+  `,
+})
+export class A2uiModalComponent {
+  readonly title = input<string>('');
+  readonly open = input<boolean>(false);
+  readonly childKeys = input<string[]>([]);
+  readonly spec = input.required<Spec>();
+  readonly dismissible = input<boolean>(true);
+  readonly _bindings = input<Record<string, string>>({});
+  readonly emit = input<(event: string) => void>(() => { /* noop */ });
+
+  onBackdropClick(): void {
+    if (!this.dismissible()) return;
+    const path = this._bindings()?.['open'];
+    if (path) {
+      this.emit()(`a2ui:datamodel:${path}:false`);
+    }
+  }
+}
diff --git a/libs/chat/src/lib/a2ui/catalog/slider.component.ts b/libs/chat/src/lib/a2ui/catalog/slider.component.ts
new file mode 100644
index 000000000..908a00032
--- /dev/null
+++ b/libs/chat/src/lib/a2ui/catalog/slider.component.ts
@@ -0,0 +1,40 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'a2ui-slider',
+  standalone: true,
+  template: `
+    <div class="flex flex-col gap-1">
+      @if (label()) {
+        <label class="text-xs text-white/60">{{ label() }}: {{ value() }}</label>
+      }
+      <input
+        type="range"
+        [min]="min()"
+        [max]="max()"
+        [step]="step()"
+        [value]="value()"
+        class="w-full"
+        (input)="onInput($event)"
+      />
+    </div>
+  `,
+})
+export class A2uiSliderComponent {
+  readonly label = input<string>('');
+  readonly value = input<number>(0);
+  readonly min = input<number>(0);
+  readonly max = input<number>(100);
+  readonly step = input<number>(1);
+  readonly _bindings = input<Record<string, string>>({});
+  readonly emit = input<(event: string) => void>(() => { /* noop */ });
+
+  onInput(event: Event): void {
+    const val = Number((event.target as HTMLInputElement).value);
+    const path = this._bindings()?.['value'];
+    if (path) {
+      this.emit()(`a2ui:datamodel:${path}:${val}`);
+    }
+  }
+}
diff --git a/libs/chat/src/lib/a2ui/catalog/tabs.component.ts b/libs/chat/src/lib/a2ui/catalog/tabs.component.ts
new file mode 100644
index 000000000..8cc9a84ed
--- /dev/null
+++ b/libs/chat/src/lib/a2ui/catalog/tabs.component.ts
@@ -0,0 +1,63 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, computed, effect, input, signal } from '@angular/core';
+import type { Spec } from '@json-render/core';
+import { RenderElementComponent } from '@cacheplane/render';
+
+@Component({
+  selector: 'a2ui-tabs',
+  standalone: true,
+  imports: [RenderElementComponent],
+  template: `
+    <div class="flex flex-col gap-0">
+      <div class="flex border-b border-white/10" role="tablist">
+        @for (tab of tabs(); track $index) {
+          <button
+            role="tab"
+            class="px-4 py-2 text-sm font-medium transition-colors border-b-2"
+            [class]="$index === activeIndex() ? 'border-blue-500 text-white' : 'border-transparent text-white/50 hover:text-white/80'"
+            [attr.aria-selected]="$index === activeIndex()"
+            (click)="selectTab($index)"
+          >{{ tab.label }}</button>
+        }
+      </div>
+      <div class="pt-3" role="tabpanel">
+        @for (key of activeChildKeys(); track key) {
+          <render-element [elementKey]="key" [spec]="spec()" />
+        }
+      </div>
+    </div>
+  `,
+})
+export class A2uiTabsComponent {
+  readonly tabs = input<{ label: string; childKeys: string[] }[]>([]);
+  readonly selected = input<number>(0);
+  readonly childKeys = input<string[]>([]);
+  readonly spec = input.required<Spec>();
+  readonly _bindings = input<Record<string, string>>({});
+  readonly emit = input<(event: string) => void>(() => { /* noop */ });
+
+  protected readonly activeIndex = signal(0);
+
+  constructor() {
+    effect(() => {
+      this.activeIndex.set(this.selected());
+    });
+  }
+
+  readonly activeChildKeys = computed(() => {
+    const idx = this.activeIndex();
+    const allTabs = this.tabs();
+    if (idx >= 0 && idx < allTabs.length) {
+      return allTabs[idx].childKeys;
+    }
+    return [];
+  });
+
+  selectTab(index: number): void {
+    this.activeIndex.set(index);
+    const path = this._bindings()?.['selected'];
+    if (path) {
+      this.emit()(`a2ui:datamodel:${path}:${index}`);
+    }
+  }
+}
diff --git a/libs/chat/src/lib/a2ui/catalog/video.component.ts b/libs/chat/src/lib/a2ui/catalog/video.component.ts
new file mode 100644
index 000000000..ef001bbf7
--- /dev/null
+++ b/libs/chat/src/lib/a2ui/catalog/video.component.ts
@@ -0,0 +1,22 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'a2ui-video',
+  standalone: true,
+  template: `
+    <video
+      class="w-full rounded-lg"
+      [src]="url()"
+      [poster]="poster()"
+      [autoplay]="autoplay()"
+      [controls]="controls()"
+    ></video>
+  `,
+})
+export class A2uiVideoComponent {
+  readonly url = input.required<string>();
+  readonly poster = input<string>('');
+  readonly autoplay = input<boolean>(false);
+  readonly controls = input<boolean>(true);
+}
diff --git a/libs/chat/src/lib/a2ui/surface.component.spec.ts b/libs/chat/src/lib/a2ui/surface.component.spec.ts
index 01dffcfd4..8bb33a540 100644
--- a/libs/chat/src/lib/a2ui/surface.component.spec.ts
+++ b/libs/chat/src/lib/a2ui/surface.component.spec.ts
@@ -56,3 +56,74 @@ describe('A2uiSurfaceComponent — data flow', () => {
     expect(surfaceToSpec(surface)).toBeNull();
   });
 });
+
+describe('surfaceToSpec — action mapping', () => {
+  function makeSurface(components: A2uiComponent[], dataModel: Record<string, unknown> = {}): A2uiSurface {
+    const map = new Map<string, A2uiComponent>();
+    for (const c of components) map.set(c.id, c);
+    return { surfaceId: 's1', catalogId: 'basic', components: map, dataModel };
+  }
+
+  it('maps event action to spec on binding', () => {
+    const surface = makeSurface([
+      { id: 'root', component: 'Column', children: ['btn'] },
+      {
+        id: 'btn',
+        component: 'Button',
+        label: 'Submit',
+        action: { event: { name: 'formSubmit', context: { formId: 'signup' } } },
+      },
+    ]);
+    const spec = surfaceToSpec(surface)!;
+    const btnElement = spec.elements['btn'];
+    expect(btnElement.on).toBeDefined();
+    expect(btnElement.on!['click']).toEqual({
+      action: 'a2ui:event',
+      params: { surfaceId: 's1', name: 'formSubmit', context: { formId: 'signup' } },
+    });
+    expect(btnElement.props['action']).toBeUndefined();
+  });
+
+  it('maps local action to spec on binding', () => {
+    const surface = makeSurface([
+      { id: 'root', component: 'Column', children: ['btn'] },
+      {
+        id: 'btn',
+        component: 'Button',
+        label: 'Open',
+        action: { functionCall: { call: 'openUrl', args: { url: 'https://example.com' } } },
+      },
+    ]);
+    const spec = surfaceToSpec(surface)!;
+    const btnElement = spec.elements['btn'];
+    expect(btnElement.on!['click']).toEqual({
+      action: 'a2ui:localAction',
+      params: { call: 'openUrl', args: { url: 'https://example.com' } },
+    });
+  });
+
+  it('passes through elements without actions unchanged', () => {
+    const surface = makeSurface([
+      { id: 'root', component: 'Text', text: 'Hello' },
+    ]);
+    const spec = surfaceToSpec(surface)!;
+    expect(spec.elements['root'].on).toBeUndefined();
+  });
+});
+
+describe('surfaceToSpec — state initialization', () => {
+  function makeSurface(components: A2uiComponent[], dataModel: Record<string, unknown> = {}): A2uiSurface {
+    const map = new Map<string, A2uiComponent>();
+    for (const c of components) map.set(c.id, c);
+    return { surfaceId: 's1', catalogId: 'basic', components: map, dataModel };
+  }
+
+  it('initializes spec state from surface dataModel', () => {
+    const surface = makeSurface(
+      [{ id: 'root', component: 'Text', text: 'Hi' }],
+      { count: 0, name: 'test' },
+    );
+    const spec = surfaceToSpec(surface)!;
+    expect(spec.state).toEqual({ count: 0, name: 'test' });
+  });
+});
diff --git a/libs/chat/src/lib/a2ui/surface.component.ts b/libs/chat/src/lib/a2ui/surface.component.ts
index 11f8d355d..24f908260 100644
--- a/libs/chat/src/lib/a2ui/surface.component.ts
+++ b/libs/chat/src/lib/a2ui/surface.component.ts
@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 import {
-  Component, computed, input, ChangeDetectionStrategy,
+  Component, computed, input, output, ChangeDetectionStrategy,
 } from '@angular/core';
 import type { Spec } from '@json-render/core';
 import type { A2uiSurface, A2uiChildTemplate } from '@cacheplane/a2ui';
 import { resolveDynamic, getByPointer } from '@cacheplane/a2ui';
 import { RenderSpecComponent, toRenderRegistry } from '@cacheplane/render';
-import type { ViewRegistry } from '@cacheplane/render';
+import type { ViewRegistry, RenderEvent } from '@cacheplane/render';
 
 /**
  * Converts an A2UI surface to a json-render Spec by:
@@ -36,9 +36,26 @@ export function surfaceToSpec(surface: A2uiSurface): Spec | null {
     if (Object.keys(bindings).length > 0) {
       props['_bindings'] = bindings;
     }
-    // Pass action through
+    // Map action to spec `on` binding
+    let on: Record<string, { action: string; params: Record<string, unknown> }> | undefined;
     if (comp.action) {
-      props['action'] = comp.action;
+      if ('event' in comp.action) {
+        const evt = comp.action.event;
+        on = {
+          click: {
+            action: 'a2ui:event',
+            params: { surfaceId: surface.surfaceId, name: evt.name, context: evt.context },
+          },
+        };
+      } else if ('functionCall' in comp.action) {
+        const fc = comp.action.functionCall;
+        on = {
+          click: {
+            action: 'a2ui:localAction',
+            params: { call: fc.call, args: fc.args },
+          },
+        };
+      }
     }
     // Pass checks through
     if (comp.checks) {
@@ -78,10 +95,11 @@ export function surfaceToSpec(surface: A2uiSurface): Spec | null {
       type: comp.component,
       props,
       ...(children ? { children } : {}),
+      ...(on ? { on } : {}),
     };
   }
 
-  return { root: 'root', elements } as Spec;
+  return { root: 'root', elements, state: surface.dataModel } as Spec;
 }
 
 @Component({
@@ -94,6 +112,8 @@ export function surfaceToSpec(surface: A2uiSurface): Spec | null {
       <render-spec
         [spec]="s"
         [registry]="registry()"
+        [handlers]="handlers"
+        (events)="onRenderEvent($event)"
       />
     }
   `,
@@ -101,10 +121,29 @@ export function surfaceToSpec(surface: A2uiSurface): Spec | null {
 export class A2uiSurfaceComponent {
   readonly surface = input.required<A2uiSurface>();
   readonly catalog = input.required<ViewRegistry>();
+  readonly events = output<RenderEvent>();
 
   /** Convert the A2UI surface to a json-render Spec for rendering. */
   readonly spec = computed(() => surfaceToSpec(this.surface()));
 
   /** Convert ViewRegistry to AngularRegistry for RenderSpecComponent. */
   readonly registry = computed(() => toRenderRegistry(this.catalog()));
+
+  readonly handlers: Record<string, (params: Record<string, unknown>) => unknown> = {
+    'a2ui:event': (params) => {
+      return params;
+    },
+    'a2ui:localAction': (params) => {
+      const call = params['call'] as string;
+      const args = (params['args'] as Record<string, unknown>) ?? {};
+      if (call === 'openUrl' && typeof globalThis.window !== 'undefined') {
+        globalThis.window.open(String(args['url'] ?? ''), '_blank');
+      }
+      return undefined;
+    },
+  };
+
+  onRenderEvent(event: RenderEvent): void {
+    this.events.emit(event);
+  }
 }
diff --git a/libs/chat/src/lib/compositions/chat/chat-render-event.ts b/libs/chat/src/lib/compositions/chat/chat-render-event.ts
new file mode 100644
index 000000000..2ca7fab87
--- /dev/null
+++ b/libs/chat/src/lib/compositions/chat/chat-render-event.ts
@@ -0,0 +1,8 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import type { RenderEvent } from '@cacheplane/render';
+
+export interface ChatRenderEvent {
+  readonly messageIndex: number;
+  readonly surfaceId?: string;
+  readonly event: RenderEvent;
+}
diff --git a/libs/chat/src/lib/compositions/chat/chat.component.ts b/libs/chat/src/lib/compositions/chat/chat.component.ts
index e5c2a8a50..95c89e540 100644
--- a/libs/chat/src/lib/compositions/chat/chat.component.ts
+++ b/libs/chat/src/lib/compositions/chat/chat.component.ts
@@ -14,7 +14,7 @@ import {
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import type { AgentRef } from '@cacheplane/angular';
-import type { ViewRegistry } from '@cacheplane/render';
+import type { ViewRegistry, RenderEvent } from '@cacheplane/render';
 import type { StateStore } from '@json-render/core';
 import { ChatMessagesComponent } from '../../primitives/chat-messages/chat-messages.component';
 import { MessageTemplateDirective } from '../../primitives/chat-messages/message-template.directive';
@@ -30,7 +30,7 @@ import { messageContent } from '../shared/message-utils';
 import { CHAT_THEME_STYLES } from '../../styles/chat-theme';
 import { CHAT_MARKDOWN_STYLES, renderMarkdown } from '../../styles/chat-markdown';
 import { A2uiSurfaceComponent } from '../../a2ui/surface.component';
-import { a2uiBasicCatalog } from '../../a2ui/catalog/index';
+import type { ChatRenderEvent } from './chat-render-event';
 import { KeyValuePipe } from '@angular/common';
 
 @Component({
@@ -142,15 +142,19 @@ import { KeyValuePipe } from '@angular/common';
                         [registry]="renderRegistry()"
                         [store]="store()"
                         [loading]="ref().isLoading()"
+                        (events)="onSpecEvent($event, index)"
                       />
                     }
 
                     @if (classified.type() === 'a2ui') {
-                      @for (entry of classified.a2uiSurfaces() | keyvalue; track entry.key) {
-                        <a2ui-surface
-                          [surface]="entry.value"
-                          [catalog]="a2uiCatalog"
-                        />
+                      @if (views(); as catalog) {
+                        @for (entry of classified.a2uiSurfaces() | keyvalue; track entry.key) {
+                          <a2ui-surface
+                            [surface]="entry.value"
+                            [catalog]="catalog"
+                            (events)="onA2uiEvent($event, index, entry.key)"
+                          />
+                        }
                       }
                     }
                   </div>
@@ -218,7 +222,7 @@ export class ChatComponent {
   readonly threadSelected = output<string>();
   readonly sidebarOpen = signal(false);
 
-  protected readonly a2uiCatalog = a2uiBasicCatalog();
+  readonly renderEvent = output<ChatRenderEvent>();
 
 
   private readonly classifiers = new Map<number, ContentClassifier>();
@@ -280,4 +284,12 @@ export class ChatComponent {
   renderMd(content: string) {
     return renderMarkdown(content, this.sanitizer);
   }
+
+  onSpecEvent(event: RenderEvent, messageIndex: number): void {
+    this.renderEvent.emit({ messageIndex, event });
+  }
+
+  onA2uiEvent(event: RenderEvent, messageIndex: number, surfaceId: string): void {
+    this.renderEvent.emit({ messageIndex, surfaceId, event });
+  }
 }
diff --git a/libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts b/libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts
index 12aaf5d11..ff6df2ea2 100644
--- a/libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts
+++ b/libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts
@@ -2,10 +2,11 @@
 import {
   Component,
   input,
+  output,
   ChangeDetectionStrategy,
 } from '@angular/core';
 import type { Spec, StateStore } from '@json-render/core';
-import type { AngularRegistry } from '@cacheplane/render';
+import type { AngularRegistry, RenderEvent } from '@cacheplane/render';
 import { RenderSpecComponent } from '@cacheplane/render';
 
 @Component({
@@ -20,6 +21,7 @@ import { RenderSpecComponent } from '@cacheplane/render';
         [registry]="registry()"
         [store]="store()"
         [loading]="loading()"
+        (events)="events.emit($event)"
       />
     }
   `,
@@ -29,4 +31,5 @@ export class ChatGenerativeUiComponent {
   readonly registry = input<AngularRegistry | undefined>(undefined);
   readonly store = input<StateStore | undefined>(undefined);
   readonly loading = input<boolean>(false);
+  readonly events = output<RenderEvent>();
 }
diff --git a/libs/chat/src/public-api.ts b/libs/chat/src/public-api.ts
index 5341f3160..472503c24 100644
--- a/libs/chat/src/public-api.ts
+++ b/libs/chat/src/public-api.ts
@@ -23,6 +23,7 @@ export { provideChat, CHAT_CONFIG } from './lib/provide-chat';
 
 // Compositions
 export { ChatComponent } from './lib/compositions/chat/chat.component';
+export type { ChatRenderEvent } from './lib/compositions/chat/chat-render-event';
 export { ChatInterruptPanelComponent } from './lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component';
 export type { InterruptAction } from './lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component';
 export { ChatToolCallCardComponent } from './lib/compositions/chat-tool-call-card/chat-tool-call-card.component';
diff --git a/libs/render/src/lib/contexts/render-context.ts b/libs/render/src/lib/contexts/render-context.ts
index 5f4a0e622..1a401a49b 100644
--- a/libs/render/src/lib/contexts/render-context.ts
+++ b/libs/render/src/lib/contexts/render-context.ts
@@ -2,12 +2,14 @@
 import { InjectionToken } from '@angular/core';
 import type { StateStore, ComputedFunction } from '@json-render/core';
 import type { AngularRegistry } from '../render.types';
+import type { RenderEvent } from '../render-event';
 
 export interface RenderContext {
   registry: AngularRegistry;
   store: StateStore;
   functions?: Record<string, ComputedFunction>;
   handlers?: Record<string, (params: Record<string, unknown>) => unknown | Promise<unknown>>;
+  emitEvent?: (event: RenderEvent) => void;
   loading?: boolean;
 }
 
diff --git a/libs/render/src/lib/render-element.component.ts b/libs/render/src/lib/render-element.component.ts
index 2626b6ef0..43131da85 100644
--- a/libs/render/src/lib/render-element.component.ts
+++ b/libs/render/src/lib/render-element.component.ts
@@ -3,9 +3,11 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  DestroyRef,
   inject,
   Injector,
   input,
+  OnInit,
   type Signal,
 } from '@angular/core';
 import { NgComponentOutlet } from '@angular/common';
@@ -56,13 +58,42 @@ import type { AngularComponentRenderer } from './render.types';
     }
   `,
 })
-export class RenderElementComponent {
+export class RenderElementComponent implements OnInit {
   readonly elementKey = input.required<string>();
   readonly spec = input.required<Spec>();
 
   private readonly ctx = inject(RENDER_CONTEXT);
   private readonly repeatScope = inject(REPEAT_SCOPE, { optional: true });
   readonly parentInjector = inject(Injector);
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor() {
+    this.destroyRef.onDestroy(() => {
+      const el = this.element();
+      if (el && (el as any)['lifecycle'] && this.ctx.emitEvent) {
+        this.ctx.emitEvent({
+          type: 'lifecycle',
+          event: 'destroyed',
+          scope: 'element',
+          elementKey: this.elementKey(),
+          elementType: el.type,
+        });
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    const el = this.element();
+    if (el && (el as any)['lifecycle'] && this.ctx.emitEvent) {
+      this.ctx.emitEvent({
+        type: 'lifecycle',
+        event: 'mounted',
+        scope: 'element',
+        elementKey: this.elementKey(),
+        elementType: el.type,
+      });
+    }
+  }
 
   /** The UIElement definition from the spec. Only propagates when reference changes. */
   readonly element: Signal<UIElement | undefined> = computed(
diff --git a/libs/render/src/lib/render-event.spec.ts b/libs/render/src/lib/render-event.spec.ts
new file mode 100644
index 000000000..96cdb9107
--- /dev/null
+++ b/libs/render/src/lib/render-event.spec.ts
@@ -0,0 +1,78 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { describe, it, expect } from 'vitest';
+import type {
+  RenderEvent,
+  RenderHandlerEvent,
+  RenderStateChangeEvent,
+  RenderLifecycleEvent,
+} from './render-event';
+
+describe('RenderEvent types', () => {
+  it('should create a handler event', () => {
+    const event: RenderHandlerEvent = {
+      type: 'handler',
+      action: 'doSomething',
+      params: { id: '123' },
+    };
+    expect(event.type).toBe('handler');
+    expect(event.action).toBe('doSomething');
+    expect(event.params).toEqual({ id: '123' });
+    expect(event.result).toBeUndefined();
+  });
+
+  it('should create a handler event with result', () => {
+    const event: RenderHandlerEvent = {
+      type: 'handler',
+      action: 'compute',
+      params: { x: 1 },
+      result: 42,
+    };
+    expect(event.result).toBe(42);
+  });
+
+  it('should create a state change event', () => {
+    const event: RenderStateChangeEvent = {
+      type: 'stateChange',
+      path: '/user/name',
+      value: 'Alice',
+      snapshot: { user: { name: 'Alice' } },
+    };
+    expect(event.type).toBe('stateChange');
+    expect(event.path).toBe('/user/name');
+    expect(event.value).toBe('Alice');
+  });
+
+  it('should create a spec lifecycle event', () => {
+    const event: RenderLifecycleEvent = {
+      type: 'lifecycle',
+      event: 'mounted',
+      scope: 'spec',
+    };
+    expect(event.scope).toBe('spec');
+    expect(event.elementKey).toBeUndefined();
+  });
+
+  it('should create an element lifecycle event', () => {
+    const event: RenderLifecycleEvent = {
+      type: 'lifecycle',
+      event: 'destroyed',
+      scope: 'element',
+      elementKey: 'card_1',
+      elementType: 'Card',
+    };
+    expect(event.scope).toBe('element');
+    expect(event.elementKey).toBe('card_1');
+    expect(event.elementType).toBe('Card');
+  });
+
+  it('should narrow RenderEvent by type discriminant', () => {
+    const events: RenderEvent[] = [
+      { type: 'handler', action: 'a', params: {} },
+      { type: 'stateChange', path: '/x', value: 1, snapshot: { x: 1 } },
+      { type: 'lifecycle', event: 'mounted', scope: 'spec' },
+    ];
+    const handlers = events.filter((e): e is RenderHandlerEvent => e.type === 'handler');
+    expect(handlers).toHaveLength(1);
+    expect(handlers[0].action).toBe('a');
+  });
+});
diff --git a/libs/render/src/lib/render-event.ts b/libs/render/src/lib/render-event.ts
new file mode 100644
index 000000000..340f5aee0
--- /dev/null
+++ b/libs/render/src/lib/render-event.ts
@@ -0,0 +1,28 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+
+export interface RenderHandlerEvent {
+  readonly type: 'handler';
+  readonly action: string;
+  readonly params: Record<string, unknown>;
+  readonly result?: unknown;
+}
+
+export interface RenderStateChangeEvent {
+  readonly type: 'stateChange';
+  readonly path: string;
+  readonly value: unknown;
+  readonly snapshot: Record<string, unknown>;
+}
+
+export interface RenderLifecycleEvent {
+  readonly type: 'lifecycle';
+  readonly event: 'mounted' | 'destroyed';
+  readonly scope: 'spec' | 'element';
+  readonly elementKey?: string;
+  readonly elementType?: string;
+}
+
+export type RenderEvent =
+  | RenderHandlerEvent
+  | RenderStateChangeEvent
+  | RenderLifecycleEvent;
diff --git a/libs/render/src/lib/render-spec.component.spec.ts b/libs/render/src/lib/render-spec.component.spec.ts
index c23b39b89..af912c9b3 100644
--- a/libs/render/src/lib/render-spec.component.spec.ts
+++ b/libs/render/src/lib/render-spec.component.spec.ts
@@ -3,6 +3,7 @@ import { describe, it, expect } from 'vitest';
 import { Component, input } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import type { Spec } from '@json-render/core';
+import type { RenderEvent, RenderLifecycleEvent } from './render-event';
 
 import { defineAngularRegistry } from './define-angular-registry';
 import { signalStateStore } from './signal-state-store';
@@ -112,3 +113,47 @@ describe('RenderSpecComponent — context resolution', () => {
     // In the component, input > config
   });
 });
+
+describe('RenderSpecComponent — event emission', () => {
+  it('should emit spec mounted lifecycle event on init', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const events: RenderEvent[] = [];
+      const emitEvent = (e: RenderEvent) => events.push(e);
+      const mountedEvent: RenderLifecycleEvent = { type: 'lifecycle', event: 'mounted', scope: 'spec' };
+      emitEvent(mountedEvent);
+      expect(events).toHaveLength(1);
+      expect(events[0].type).toBe('lifecycle');
+      expect((events[0] as RenderLifecycleEvent).event).toBe('mounted');
+      expect((events[0] as RenderLifecycleEvent).scope).toBe('spec');
+    });
+  });
+
+  it('should emit spec destroyed lifecycle event on destroy', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const events: RenderEvent[] = [];
+      const emitEvent = (e: RenderEvent) => events.push(e);
+      const destroyedEvent: RenderLifecycleEvent = { type: 'lifecycle', event: 'destroyed', scope: 'spec' };
+      emitEvent(destroyedEvent);
+      expect(events).toHaveLength(1);
+      expect((events[0] as RenderLifecycleEvent).event).toBe('destroyed');
+    });
+  });
+
+  it('should emit state change events when store is mutated', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const store = signalStateStore({ count: 0 });
+      const events: RenderEvent[] = [];
+      const emitEvent = (e: RenderEvent) => events.push(e);
+      store.subscribe(() => {
+        const snapshot = store.getSnapshot();
+        emitEvent({ type: 'stateChange', path: '/count', value: snapshot['count'], snapshot: snapshot as Record<string, unknown> });
+      });
+      store.set('/count', 5);
+      expect(events).toHaveLength(1);
+      expect(events[0].type).toBe('stateChange');
+    });
+  });
+});
diff --git a/libs/render/src/lib/render-spec.component.ts b/libs/render/src/lib/render-spec.component.ts
index aecd55083..8073222cd 100644
--- a/libs/render/src/lib/render-spec.component.ts
+++ b/libs/render/src/lib/render-spec.component.ts
@@ -3,8 +3,12 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  DestroyRef,
+  effect,
   inject,
   input,
+  OnInit,
+  output,
 } from '@angular/core';
 import type { ComputedFunction, Spec, StateStore } from '@json-render/core';
 
@@ -14,6 +18,7 @@ import { RENDER_CONTEXT } from './contexts/render-context';
 import type { RenderContext } from './contexts/render-context';
 import type { AngularRegistry } from './render.types';
 import { signalStateStore } from './signal-state-store';
+import type { RenderEvent } from './render-event';
 
 /**
  * Top-level entry point for rendering a json-render spec.
@@ -47,15 +52,17 @@ import { signalStateStore } from './signal-state-store';
     }
   `,
 })
-export class RenderSpecComponent {
+export class RenderSpecComponent implements OnInit {
   readonly spec = input<Spec | null>(null);
   readonly registry = input<AngularRegistry | undefined>(undefined);
   readonly store = input<StateStore | undefined>(undefined);
   readonly functions = input<Record<string, ComputedFunction> | undefined>(undefined);
   readonly handlers = input<Record<string, (params: Record<string, unknown>) => unknown | Promise<unknown>> | undefined>(undefined);
   readonly loading = input<boolean>(false);
+  readonly events = output<RenderEvent>();
 
   private readonly config = inject(RENDER_CONFIG, { optional: true });
+  private readonly destroyRef = inject(DestroyRef);
 
   /** Internal store, lazily created once and reused across spec changes. */
   private _internalStore: StateStore | undefined;
@@ -86,12 +93,69 @@ export class RenderSpecComponent {
     return { get: () => undefined, names: () => [] };
   });
 
+  /** Wraps input handlers to emit RenderHandlerEvent after execution. */
+  private readonly wrappedHandlers = computed(() => {
+    const inputHandlers = this.handlers() ?? this.config?.handlers;
+    if (!inputHandlers) return undefined;
+    const wrapped: Record<string, (params: Record<string, unknown>) => unknown | Promise<unknown>> = {};
+    for (const [name, handler] of Object.entries(inputHandlers)) {
+      wrapped[name] = (params: Record<string, unknown>) => {
+        const result = handler(params);
+        if (result instanceof Promise) {
+          result.then(
+            (r) => {
+              this.events.emit({ type: 'handler', action: name, params, result: r });
+            },
+            () => {
+              this.events.emit({ type: 'handler', action: name, params, result: undefined });
+            },
+          );
+        } else {
+          this.events.emit({ type: 'handler', action: name, params, result });
+        }
+        return result;
+      };
+    }
+    return wrapped;
+  });
+
+  /** Emits a RenderEvent through the events output. */
+  private readonly emitEvent = (event: RenderEvent) => {
+    this.events.emit(event);
+  };
+
   /** The RenderContext provided to children via viewProviders. */
   readonly _context = computed<RenderContext>(() => ({
     registry: this.resolvedRegistry(),
     store: this.resolvedStore(),
     functions: this.functions() ?? this.config?.functions,
-    handlers: this.handlers() ?? this.config?.handlers,
+    handlers: this.wrappedHandlers(),
+    emitEvent: this.emitEvent,
     loading: this.loading(),
   }));
+
+  constructor() {
+    // Subscribe to store changes and emit state change events
+    effect(() => {
+      const store = this.resolvedStore();
+      const unsub = store.subscribe(() => {
+        const snapshot = store.getSnapshot() as Record<string, unknown>;
+        this.events.emit({
+          type: 'stateChange',
+          path: '/',
+          value: snapshot,
+          snapshot,
+        });
+      });
+      this.destroyRef.onDestroy(unsub);
+    });
+
+    this.destroyRef.onDestroy(() => {
+      this.events.emit({ type: 'lifecycle', event: 'destroyed', scope: 'spec' });
+    });
+  }
+
+  ngOnInit(): void {
+    this.events.emit({ type: 'lifecycle', event: 'mounted', scope: 'spec' });
+  }
 }
diff --git a/libs/render/src/public-api.ts b/libs/render/src/public-api.ts
index 3a9b438de..d9d3ea37f 100644
--- a/libs/render/src/public-api.ts
+++ b/libs/render/src/public-api.ts
@@ -31,3 +31,11 @@ export { RenderSpecComponent } from './lib/render-spec.component';
 export { views, withViews, withoutViews, toRenderRegistry } from './lib/views';
 export type { ViewRegistry } from './lib/views';
 export { provideViews, VIEW_REGISTRY } from './lib/provide-views';
+
+// Events
+export type {
+  RenderEvent,
+  RenderHandlerEvent,
+  RenderStateChangeEvent,
+  RenderLifecycleEvent,
+} from './lib/render-event';