` | **Required** | The agent ref providing streaming state and execution history |
+
+## Layout
+
+The component renders a two-column layout:
+
+- **Left**: The chat area (messages, typing indicator, error display, input)
+- **Right**: The collapsible debug panel (320px wide)
+
+The debug panel can be toggled open/closed with a button on the divider.
+
+## Debug Panel Sections
+
+### Summary
+
+At the top, `DebugSummaryComponent` displays the total number of checkpoints and cumulative execution duration.
+
+### Controls
+
+`DebugControlsComponent` provides VCR-style navigation buttons:
+
+| Button | Action | Disabled When |
+|--------|--------|---------------|
+| `\|<` | Jump to start | Already at first checkpoint |
+| `<` | Step back | Already at first checkpoint |
+| `>` | Step forward | Already at last checkpoint |
+| `>\|` | Jump to end | Already at last checkpoint |
+
+### Timeline
+
+`DebugTimelineComponent` renders a vertical timeline rail with one `DebugCheckpointCardComponent` per checkpoint. Each card shows:
+
+- The node name (from `state.next[0]` or `"Step N"`)
+- Optional duration badge (milliseconds)
+- Optional token count badge
+- Visual selection state (highlighted dot and border)
+
+Click a checkpoint to select it and view its details below.
+
+### Detail
+
+When a checkpoint is selected, `DebugDetailComponent` renders two sections:
+
+1. **State Diff** (`DebugStateDiffComponent`): Shows what changed between the previous and current checkpoint as color-coded entries:
+ - Green (`+`): Added keys
+ - Red (`-`): Removed keys
+ - Yellow (`~`): Changed values (shows before and after)
+
+2. **Current State** (`DebugStateInspectorComponent`): Displays the full state values as formatted JSON.
+
+## Debug Sub-Components
+
+Each debug sub-component is exported individually for custom debug UIs:
+
+| Component | Selector | Purpose |
+|-----------|----------|---------|
+| `DebugTimelineComponent` | `chat-debug-timeline` | Vertical timeline of checkpoints |
+| `DebugCheckpointCardComponent` | `chat-debug-checkpoint-card` | Single checkpoint card in the timeline |
+| `DebugControlsComponent` | `chat-debug-controls` | VCR-style step navigation |
+| `DebugSummaryComponent` | `chat-debug-summary` | Step count and total duration |
+| `DebugDetailComponent` | `chat-debug-detail` | State diff + state inspector |
+| `DebugStateDiffComponent` | `chat-debug-state-diff` | Color-coded state diff |
+| `DebugStateInspectorComponent` | `chat-debug-state-inspector` | JSON state viewer |
+
+## Debug Utilities
+
+### toDebugCheckpoint()
+
+Converts a `ThreadState` entry to a `DebugCheckpoint`:
+
+```typescript
+import { toDebugCheckpoint } from '@cacheplane/chat';
+
+const checkpoint = toDebugCheckpoint(threadState, index);
+// { node: 'agent', checkpointId: 'abc123' }
+```
+
+### extractStateValues()
+
+Extracts the state values from a `ThreadState`, returning `{}` if unavailable:
+
+```typescript
+import { extractStateValues } from '@cacheplane/chat';
+
+const values = extractStateValues(threadState);
+// { messages: [...], someKey: 'value' }
+```
+
+### computeStateDiff()
+
+Computes a recursive diff between two state objects:
+
+```typescript
+import { computeStateDiff } from '@cacheplane/chat';
+import type { DiffEntry } from '@cacheplane/chat';
+
+const diff: DiffEntry[] = computeStateDiff(beforeState, afterState);
+```
+
+### DebugCheckpoint Type
+
+```typescript
+interface DebugCheckpoint {
+ node?: string;
+ duration?: number;
+ tokenCount?: number;
+ checkpointId?: string;
+}
+```
+
+### DiffEntry Type
+
+```typescript
+interface DiffEntry {
+ path: string;
+ type: 'added' | 'removed' | 'changed';
+ before?: unknown;
+ after?: unknown;
+}
+```
+
+## Building a Custom Debug Panel
+
+You can use the sub-components individually to build a custom debug layout:
+
+```typescript
+import { Component, signal, computed, ChangeDetectionStrategy } from '@angular/core';
+import {
+ DebugTimelineComponent,
+ DebugDetailComponent,
+ toDebugCheckpoint,
+ extractStateValues,
+} from '@cacheplane/chat';
+import type { DebugCheckpoint } from '@cacheplane/chat';
+
+@Component({
+ selector: 'app-custom-debug',
+ standalone: true,
+ imports: [DebugTimelineComponent, DebugDetailComponent],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: `
+
+
+
+ @if (selectedIndex() >= 0) {
+
+ }
+
+ `,
+})
+export class CustomDebugComponent {
+ // chatRef = agent(...)
+
+ selectedIndex = signal(-1);
+
+ checkpoints = computed((): DebugCheckpoint[] =>
+ this.chatRef.history().map((state, i) => toDebugCheckpoint(state, i))
+ );
+
+ currentState = computed(() =>
+ extractStateValues(this.chatRef.history()[this.selectedIndex()])
+ );
+
+ previousState = computed(() => {
+ const idx = this.selectedIndex();
+ if (idx <= 0) return {};
+ return extractStateValues(this.chatRef.history()[idx - 1]);
+ });
+}
+```
diff --git a/apps/website/content/docs/chat/components/chat-input.mdx b/apps/website/content/docs/chat/components/chat-input.mdx
new file mode 100644
index 000000000..6b6483913
--- /dev/null
+++ b/apps/website/content/docs/chat/components/chat-input.mdx
@@ -0,0 +1,159 @@
+# ChatInputComponent
+
+`ChatInputComponent` is the text input primitive for sending messages to a LangGraph agent. It provides a textarea with auto-sizing, a send button, keyboard handling, and automatic disabling while the agent is loading.
+
+**Selector:** `chat-input`
+
+**Import:**
+
+```typescript
+import { ChatInputComponent, submitMessage } from '@cacheplane/chat';
+```
+
+## Basic Usage
+
+```html
+
+```
+
+## API
+
+### Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `ref` | `AgentRef` | **Required** | The agent ref to submit messages to |
+| `submitOnEnter` | `boolean` | `true` | When `true`, pressing Enter submits the message. Shift+Enter inserts a newline. When `false`, Enter always inserts a newline. |
+| `placeholder` | `string` | `''` | Placeholder text shown when the input is empty |
+
+### Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `submitted` | `string` | Emits the trimmed message text after successful submission |
+
+## Behavior
+
+### Submit Flow
+
+When the user submits (via Enter key or clicking the send button):
+
+1. The message text is trimmed
+2. If empty after trimming, nothing happens
+3. `ref.submit()` is called with `{ messages: [{ role: 'human', content: trimmed }] }`
+4. The `submitted` output emits the trimmed text
+5. The input is cleared
+6. Focus is returned to the textarea
+
+### Disabled State
+
+The input is automatically disabled when `ref.isLoading()` returns `true`. This prevents sending messages while the agent is processing. Both the textarea and the send button reflect the disabled state.
+
+### Auto-Sizing
+
+The textarea uses `field-sizing: content` CSS, which allows it to grow with its content up to a maximum height of `120px`. After that, the textarea scrolls internally.
+
+### Keyboard Handling
+
+| Key | `submitOnEnter: true` | `submitOnEnter: false` |
+|-----|----------------------|----------------------|
+| Enter | Submits the message | Inserts a newline |
+| Shift+Enter | Inserts a newline | Inserts a newline |
+
+## submitMessage() Helper
+
+The `submitMessage()` function is exported as a standalone utility for programmatic message submission:
+
+```typescript
+import { submitMessage } from '@cacheplane/chat';
+
+function sendGreeting(ref: AgentRef) {
+ const result = submitMessage(ref, 'Hello!');
+ // result is 'Hello!' or null if the text was empty
+}
+```
+
+**Signature:**
+
+```typescript
+function submitMessage(
+ ref: AgentRef,
+ text: string
+): string | null
+```
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `ref` | `AgentRef` | The agent ref to submit to |
+| `text` | `string` | The message text to send |
+
+**Returns:** The trimmed message string if submitted, or `null` if the trimmed text was empty.
+
+The function calls `ref.submit({ messages: [{ role: 'human', content: trimmed }] })` under the hood.
+
+## Styling
+
+The component renders a `