diff --git a/cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts b/cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts
index 84935a841..2a6d924f2 100644
--- a/cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts
+++ b/cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts
@@ -1,22 +1,100 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
import { ChatComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
import { environment } from '../environments/environment';
+/**
+ * Represents a file operation extracted from agent tool calls.
+ */
+interface FileOperation {
+ type: 'read' | 'write';
+ path: string;
+ preview: string;
+}
+
/**
* FilesystemComponent demonstrates agent file operations.
*
- * The agent can read and write files using tool calls.
+ * The agent can read and write files using tool calls. The sidebar displays
+ * a live log of file operations derived from `stream.messages()`, filtering
+ * for `read_file` and `write_file` tool calls.
+ *
+ * Key integration points:
+ * - `stream.messages()` exposes the full message history including tool calls
+ * - `fileOps` filters messages for file-related tool calls and extracts metadata
+ * - Operations appear in the sidebar in real time as the agent works
*/
@Component({
selector: 'app-filesystem',
standalone: true,
imports: [ChatComponent],
- template: ``,
+ template: `
+
+
+
+
+ `,
})
export class FilesystemComponent {
+ /**
+ * The streaming resource connected to the filesystem graph.
+ *
+ * The graph uses `read_file` and `write_file` tool calls that appear
+ * in `stream.messages()`. We filter and display them in the sidebar.
+ */
protected readonly stream = streamResource({
apiUrl: environment.langGraphApiUrl,
assistantId: environment.streamingAssistantId,
});
+
+ /**
+ * Reactive list of file operations derived from the message history.
+ *
+ * Scans all messages for tool calls named `read_file` or `write_file`,
+ * extracts the file path and a short result preview for sidebar display.
+ */
+ protected readonly fileOps = computed(() => {
+ const msgs = this.stream.messages();
+ const ops: FileOperation[] = [];
+ for (const msg of msgs) {
+ const m = msg as unknown as Record;
+ if (!('tool_calls' in m) || !Array.isArray(m['tool_calls'])) continue;
+ for (const tc of m['tool_calls'] as Array>) {
+ const name = tc['name'] as string | undefined;
+ if (name !== 'read_file' && name !== 'write_file') continue;
+ const args = (tc['args'] ?? {}) as Record;
+ const path = String(args['path'] ?? args['file_path'] ?? '');
+ const content = String(args['content'] ?? args['result'] ?? '');
+ ops.push({
+ type: name === 'read_file' ? 'read' : 'write',
+ path,
+ preview: content.slice(0, 80),
+ });
+ }
+ }
+ return ops;
+ });
}
diff --git a/cockpit/deep-agents/memory/angular/src/app/memory.component.ts b/cockpit/deep-agents/memory/angular/src/app/memory.component.ts
index 035fcfd8f..01f230248 100644
--- a/cockpit/deep-agents/memory/angular/src/app/memory.component.ts
+++ b/cockpit/deep-agents/memory/angular/src/app/memory.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
import { ChatComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
import { environment } from '../environments/environment';
@@ -7,17 +7,65 @@ import { environment } from '../environments/environment';
* MemoryComponent demonstrates persistent agent memory across sessions.
*
* The agent extracts facts about the user from each conversation turn
- * and stores them in `agent_memory` state.
+ * and stores them in `agent_memory` (or `memory`) state. The sidebar
+ * displays all learned facts as key-value pairs with a live count.
+ *
+ * Key integration points:
+ * - `stream.value()` exposes the full graph state including the memory dict
+ * - `memoryEntries` is derived reactively for sidebar rendering
+ * - Facts appear as the agent learns them during conversation
*/
@Component({
selector: 'app-da-memory',
standalone: true,
imports: [ChatComponent],
- template: ``,
+ template: `
+
+
+
+
+ `,
})
export class MemoryComponent {
+ /**
+ * The streaming resource connected to the memory graph.
+ *
+ * The graph returns an `agent_memory` (or `memory`) dict alongside messages
+ * in its state. We derive a reactive signal from `stream.value()` for display.
+ */
protected readonly stream = streamResource({
apiUrl: environment.langGraphApiUrl,
assistantId: environment.streamingAssistantId,
});
+
+ /**
+ * Reactive list of [key, value] memory entries derived from the graph state.
+ *
+ * Checks for `agent_memory` first, then falls back to `memory`.
+ * This signal re-computes whenever the stream state changes.
+ */
+ protected readonly memoryEntries = computed(() => {
+ const val = this.stream.value() as Record;
+ const mem = val?.['agent_memory'] ?? val?.['memory'];
+ if (!mem || typeof mem !== 'object') return [];
+ return Object.entries(mem as Record);
+ });
}
diff --git a/cockpit/deep-agents/planning/angular/src/app/planning.component.ts b/cockpit/deep-agents/planning/angular/src/app/planning.component.ts
index 53c2b6b04..790565512 100644
--- a/cockpit/deep-agents/planning/angular/src/app/planning.component.ts
+++ b/cockpit/deep-agents/planning/angular/src/app/planning.component.ts
@@ -1,23 +1,89 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
import { ChatComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
import { environment } from '../environments/environment';
+/**
+ * Represents a single step in an agent-generated plan.
+ */
+interface PlanStep {
+ title: string;
+ status: 'pending' | 'in_progress' | 'complete';
+}
+
/**
* PlanningComponent demonstrates agent task decomposition.
*
* The agent receives a complex task, breaks it into ordered steps,
- * and executes them sequentially.
+ * and executes them sequentially. The sidebar displays a live checklist
+ * of plan steps derived from the `plan` array in the graph state.
+ *
+ * Key integration points:
+ * - `stream.value()` exposes the full graph state, including the `plan` array
+ * - `planSteps` is derived from `stream.value()` for reactive sidebar rendering
+ * - Step status icons update in real time as the agent progresses
*/
@Component({
selector: 'app-planning',
standalone: true,
imports: [ChatComponent],
- template: ``,
+ template: `
+
+
+
+
+ `,
})
export class PlanningComponent {
+ /**
+ * The streaming resource connected to the planning graph.
+ *
+ * The graph returns a `plan` array alongside messages in its state.
+ * Each plan entry has a `title` and `status` that drive the sidebar checklist.
+ */
protected readonly stream = streamResource({
apiUrl: environment.langGraphApiUrl,
assistantId: environment.streamingAssistantId,
});
+
+ /**
+ * Reactive list of plan steps derived from the graph state.
+ *
+ * The Python graph stores the plan as `state.plan` — an array of objects
+ * with `title` and `status` fields. This signal re-computes whenever
+ * the stream state changes.
+ */
+ protected readonly planSteps = computed(() => {
+ const val = this.stream.value() as Record;
+ const plan = val?.['plan'];
+ if (!Array.isArray(plan)) return [];
+ return plan.map((step: Record) => ({
+ title: String(step['title'] ?? ''),
+ status: (['pending', 'in_progress', 'complete'].includes(step['status'] as string)
+ ? step['status']
+ : 'pending') as PlanStep['status'],
+ }));
+ });
}
diff --git a/cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts b/cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts
index cfcfec045..f86b65a67 100644
--- a/cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts
+++ b/cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts
@@ -1,23 +1,129 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
import { ChatComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
import { environment } from '../environments/environment';
+/**
+ * Represents a parsed code execution: the code that was run and its output.
+ */
+interface CodeExecution {
+ id: string;
+ code: string;
+ stdout: string;
+ stderr: string;
+ exitStatus: number;
+}
+
/**
* SandboxesComponent demonstrates a coding agent that executes Python code.
*
* The agent writes and runs code snippets to solve problems using a
- * `run_code` tool.
+ * `run_code` tool. The sidebar displays a real-time log of code executions
+ * derived from `stream.messages()`, showing the code, stdout, and stderr
+ * for each invocation.
*/
@Component({
selector: 'app-sandboxes',
standalone: true,
imports: [ChatComponent],
- template: ``,
+ template: `
+
+
+
+
+ `,
})
export class SandboxesComponent {
protected readonly stream = streamResource({
apiUrl: environment.langGraphApiUrl,
assistantId: environment.streamingAssistantId,
});
+
+ /**
+ * Derived signal: extracts code executions from the message stream.
+ *
+ * Scans AI messages for tool_calls with name `run_code`, then pairs each
+ * with its corresponding tool result message. Tool results are parsed as
+ * JSON with {stdout, stderr, exit_status} fields.
+ */
+ protected readonly executions = computed(() => {
+ const msgs = this.stream.messages();
+ const resultMap = new Map();
+
+ // Build a lookup of tool_call_id -> parsed result from tool messages
+ for (const msg of msgs) {
+ const type = typeof msg._getType === 'function'
+ ? msg._getType()
+ : (msg as unknown as Record)['type'] ?? '';
+ if (type === 'tool') {
+ const toolCallId = (msg as unknown as Record)['tool_call_id'];
+ if (toolCallId) {
+ const raw = typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content);
+ try {
+ const parsed = JSON.parse(raw);
+ resultMap.set(toolCallId, {
+ stdout: parsed.stdout ?? '',
+ stderr: parsed.stderr ?? '',
+ exitStatus: parsed.exit_status ?? 0,
+ });
+ } catch {
+ resultMap.set(toolCallId, { stdout: raw, stderr: '', exitStatus: 0 });
+ }
+ }
+ }
+ }
+
+ // Extract run_code tool_calls from AI messages
+ const executions: CodeExecution[] = [];
+ for (const msg of msgs) {
+ const type = typeof msg._getType === 'function'
+ ? msg._getType()
+ : (msg as unknown as Record)['type'] ?? '';
+ if (type === 'ai') {
+ const toolCalls = (msg as unknown as Record)['tool_calls'];
+ if (Array.isArray(toolCalls)) {
+ for (const tc of toolCalls) {
+ const call = tc as { id: string; name: string; args: Record };
+ if (call.name === 'run_code') {
+ const result = resultMap.get(call.id);
+ executions.push({
+ id: call.id,
+ code: (call.args['code'] as string) ?? '',
+ stdout: result?.stdout ?? '',
+ stderr: result?.stderr ?? '',
+ exitStatus: result?.exitStatus ?? 0,
+ });
+ }
+ }
+ }
+ }
+ }
+
+ return executions;
+ });
}
diff --git a/cockpit/deep-agents/skills/angular/src/app/skills.component.ts b/cockpit/deep-agents/skills/angular/src/app/skills.component.ts
index f194e2185..7d43b6180 100644
--- a/cockpit/deep-agents/skills/angular/src/app/skills.component.ts
+++ b/cockpit/deep-agents/skills/angular/src/app/skills.component.ts
@@ -1,23 +1,131 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
import { ChatComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
import { environment } from '../environments/environment';
+/**
+ * Represents a matched skill invocation: tool call paired with its result.
+ */
+interface SkillInvocation {
+ id: string;
+ name: string;
+ args: Record;
+ result: string | undefined;
+}
+
/**
* SkillsComponent demonstrates a multi-skill agent with specialized tools.
*
* The agent can calculate math expressions, count words, and summarize text
* by selecting the appropriate skill tool for each user request.
+ *
+ * The sidebar displays a real-time log of skill invocations derived from
+ * `stream.messages()`, matching AI tool_calls with their corresponding
+ * tool result messages.
*/
@Component({
selector: 'app-skills',
standalone: true,
imports: [ChatComponent],
- template: ``,
+ template: `
+
+
+
+
+ `,
})
export class SkillsComponent {
protected readonly stream = streamResource({
apiUrl: environment.langGraphApiUrl,
assistantId: environment.streamingAssistantId,
});
+
+ private readonly SKILL_NAMES = new Set(['calculator', 'word_count', 'summarize']);
+
+ /**
+ * Derived signal: extracts skill invocations from the message stream.
+ *
+ * Scans AI messages for tool_calls matching known skill names, then pairs
+ * each with its corresponding tool result message via tool_call_id.
+ */
+ protected readonly invocations = computed(() => {
+ const msgs = this.stream.messages();
+ const resultMap = new Map();
+
+ // Build a lookup of tool_call_id -> result content from tool messages
+ for (const msg of msgs) {
+ const type = typeof msg._getType === 'function'
+ ? msg._getType()
+ : (msg as unknown as Record)['type'] ?? '';
+ if (type === 'tool') {
+ const toolCallId = (msg as unknown as Record)['tool_call_id'];
+ const content = typeof msg.content === 'string'
+ ? msg.content
+ : JSON.stringify(msg.content);
+ if (toolCallId) {
+ resultMap.set(toolCallId, content);
+ }
+ }
+ }
+
+ // Extract tool_calls from AI messages that match known skill names
+ const invocations: SkillInvocation[] = [];
+ for (const msg of msgs) {
+ const type = typeof msg._getType === 'function'
+ ? msg._getType()
+ : (msg as unknown as Record)['type'] ?? '';
+ if (type === 'ai') {
+ const toolCalls = (msg as unknown as Record)['tool_calls'];
+ if (Array.isArray(toolCalls)) {
+ for (const tc of toolCalls) {
+ const call = tc as { id: string; name: string; args: Record };
+ if (this.SKILL_NAMES.has(call.name)) {
+ invocations.push({
+ id: call.id,
+ name: call.name,
+ args: call.args,
+ result: resultMap.get(call.id),
+ });
+ }
+ }
+ }
+ }
+ }
+
+ return invocations;
+ });
+
+ protected formatArgs(args: Record): string {
+ return JSON.stringify(args, null, 2);
+ }
}
diff --git a/cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts b/cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts
index e7bf766a7..cd07b6e35 100644
--- a/cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts
+++ b/cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts
@@ -1,23 +1,112 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
import { ChatComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
import { environment } from '../environments/environment';
+/**
+ * Delegation status derived from matching tool calls with tool result messages.
+ */
+interface Delegation {
+ /** Tool call ID used to track request/response pairing. */
+ id: string;
+ /** Name of the delegated agent (tool name). */
+ agent: string;
+ /** Execution status: running until a matching tool result arrives. */
+ status: 'running' | 'complete' | 'error';
+ /** Human-readable status text. */
+ statusText: string;
+}
+
/**
* SubagentsComponent demonstrates the Deep Agents subagent delegation pattern.
*
* The orchestrator agent receives a task and delegates subtasks to specialist
- * subagents via tool calls.
+ * subagents via tool calls. The sidebar tracks each delegation by scanning
+ * `stream.messages()` for AI tool_calls and matching ToolMessage results.
*/
@Component({
selector: 'app-subagents',
standalone: true,
imports: [ChatComponent],
- template: ``,
+ template: `
+
+
+
+
+ `,
})
export class SubagentsComponent {
+ /**
+ * The streaming resource connected to the subagents orchestrator graph.
+ */
protected readonly stream = streamResource({
apiUrl: environment.langGraphApiUrl,
assistantId: environment.streamingAssistantId,
});
+
+ /**
+ * Reactive delegation list derived from messages.
+ *
+ * Scans all messages for AI tool_calls, then checks for matching
+ * ToolMessage results (by tool_call_id) to determine completion status.
+ */
+ protected readonly delegations = computed(() => {
+ const msgs = this.stream.messages();
+ const toolResultIds = new Set();
+ const errorResultIds = new Set();
+
+ // Collect all tool result message IDs and detect errors
+ for (const msg of msgs) {
+ const type = typeof msg._getType === 'function' ? msg._getType() : (msg as any).type;
+ if (type === 'tool') {
+ const toolCallId = (msg as any).tool_call_id;
+ if (toolCallId) {
+ toolResultIds.add(toolCallId);
+ const status = (msg as any).status;
+ if (status === 'error') {
+ errorResultIds.add(toolCallId);
+ }
+ }
+ }
+ }
+
+ // Extract tool calls from AI messages and match with results
+ const delegations: Delegation[] = [];
+ for (const msg of msgs) {
+ const type = typeof msg._getType === 'function' ? msg._getType() : (msg as any).type;
+ if (type === 'ai') {
+ const toolCalls = (msg as any).tool_calls as Array<{ id: string; name: string }> | undefined;
+ if (toolCalls?.length) {
+ for (const tc of toolCalls) {
+ const isError = errorResultIds.has(tc.id);
+ const isComplete = toolResultIds.has(tc.id);
+ delegations.push({
+ id: tc.id,
+ agent: tc.name,
+ status: isError ? 'error' : isComplete ? 'complete' : 'running',
+ statusText: isError ? 'error' : isComplete ? 'done' : 'running',
+ });
+ }
+ }
+ }
+ }
+
+ return delegations;
+ });
}
diff --git a/cockpit/langgraph/durable-execution/angular/src/app/durable-execution.component.ts b/cockpit/langgraph/durable-execution/angular/src/app/durable-execution.component.ts
index 5e692ca39..a20bb86b8 100644
--- a/cockpit/langgraph/durable-execution/angular/src/app/durable-execution.component.ts
+++ b/cockpit/langgraph/durable-execution/angular/src/app/durable-execution.component.ts
@@ -1,8 +1,27 @@
-import { Component } from '@angular/core';
+import { Component, computed } from '@angular/core';
import { ChatComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
import { environment } from '../environments/environment';
+/**
+ * Pipeline step definition for the vertical progress indicator.
+ */
+interface PipelineStep {
+ id: string;
+ label: string;
+ status: 'pending' | 'active' | 'complete';
+}
+
+/** Ordered node names emitted by the Python graph's `state.step` field. */
+const STEP_ORDER = ['analyze', 'plan', 'generate'] as const;
+
+/** Human-readable labels for each pipeline step. */
+const STEP_LABELS: Record = {
+ analyze: 'Analyze',
+ plan: 'Plan',
+ generate: 'Generate',
+};
+
/**
* DurableExecutionComponent demonstrates fault-tolerant multi-step execution
* with `streamResource()`.
@@ -10,17 +29,89 @@ import { environment } from '../environments/environment';
* This example shows how a graph checkpoints at each node, enabling it to
* resume after failures. The backend processes each request through three
* nodes: analyze, plan, generate. Each node updates `state.step` so the
- * UI can track progress.
+ * UI can track progress via a vertical step indicator in the sidebar.
*/
@Component({
selector: 'app-durable-execution',
standalone: true,
imports: [ChatComponent],
- template: ``,
+ template: `
+
+
+
+
+ `,
})
export class DurableExecutionComponent {
protected readonly stream = streamResource({
apiUrl: environment.langGraphApiUrl,
assistantId: environment.streamingAssistantId,
});
+
+ /**
+ * Derives the 3-step pipeline status from the graph's `state.step` field.
+ *
+ * Steps before the current one are marked complete, the current step is
+ * active, and subsequent steps remain pending.
+ */
+ protected readonly steps = computed(() => {
+ const val = this.stream.value() as Record | undefined;
+ const currentStep = (val?.['step'] as string) ?? '';
+ const activeIndex = STEP_ORDER.indexOf(currentStep as (typeof STEP_ORDER)[number]);
+
+ return STEP_ORDER.map((id, i) => ({
+ id,
+ label: STEP_LABELS[id],
+ status: activeIndex < 0 ? 'pending' : i < activeIndex ? 'complete' : i === activeIndex ? 'active' : 'pending',
+ }));
+ });
}
diff --git a/cockpit/langgraph/persistence/angular/src/app/persistence.component.ts b/cockpit/langgraph/persistence/angular/src/app/persistence.component.ts
index dabe6861c..c140127f7 100644
--- a/cockpit/langgraph/persistence/angular/src/app/persistence.component.ts
+++ b/cockpit/langgraph/persistence/angular/src/app/persistence.component.ts
@@ -1,28 +1,90 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
import { ChatComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
import { environment } from '../environments/environment';
+interface Thread {
+ id: string;
+ label: string;
+}
+
/**
* PersistenceComponent demonstrates thread persistence with `streamResource()`.
*
- * This example shows how conversations persist across browser refreshes.
- * Each thread has a unique ID that can be stored and resumed later.
- * Use `stream.switchThread(id)` to load a previous conversation,
- * or `stream.switchThread(null)` to start fresh.
+ * Layout: a full-height flex row with the `` area (flex-1) on the left
+ * and a fixed-width thread-picker sidebar on the right.
*
* Key integration points:
- * - `onThreadId` callback captures new thread IDs for storage
- * - `stream.switchThread(id)` resumes a previous conversation
- * - `stream.messages()` loads the full history when switching threads
+ * - `onThreadId` callback captures new thread IDs for the sidebar list
+ * - `switchThread(id)` resumes a previous conversation
+ * - `newThread()` starts a fresh conversation
*/
@Component({
selector: 'app-persistence',
standalone: true,
imports: [ChatComponent],
- template: ``,
+ styles: `
+ :host {
+ display: flex;
+ height: 100vh;
+ }
+ `,
+ template: `
+
+
+
+ `,
})
export class PersistenceComponent {
+ protected readonly threads = signal([]);
+ protected readonly activeThreadId = signal(null);
+
+ private threadCounter = 0;
+
/**
* The streaming resource with thread persistence.
*
@@ -32,5 +94,30 @@ export class PersistenceComponent {
protected readonly stream = streamResource({
apiUrl: environment.langGraphApiUrl,
assistantId: environment.streamingAssistantId,
+ onThreadId: (id: string) => {
+ this.activeThreadId.set(id);
+
+ // Only add if not already tracked
+ const existing = this.threads();
+ if (!existing.some((t) => t.id === id)) {
+ this.threadCounter++;
+ this.threads.set([
+ ...existing,
+ { id, label: `Thread ${this.threadCounter}` },
+ ]);
+ }
+ },
});
+
+ /** Switch to an existing thread by ID. */
+ switchThread(id: string): void {
+ this.activeThreadId.set(id);
+ this.stream.switchThread(id);
+ }
+
+ /** Start a brand-new thread. */
+ newThread(): void {
+ this.activeThreadId.set(null);
+ this.stream.switchThread(null);
+ }
}
diff --git a/cockpit/langgraph/time-travel/angular/src/app/time-travel.component.ts b/cockpit/langgraph/time-travel/angular/src/app/time-travel.component.ts
index 96f92c31c..aab762004 100644
--- a/cockpit/langgraph/time-travel/angular/src/app/time-travel.component.ts
+++ b/cockpit/langgraph/time-travel/angular/src/app/time-travel.component.ts
@@ -1,11 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
import { ChatComponent } from '@cacheplane/chat';
import { streamResource } from '@cacheplane/stream-resource';
+import type { ThreadState } from '@cacheplane/stream-resource';
import { environment } from '../environments/environment';
/**
* TimeTravelComponent demonstrates replaying and branching conversation history.
*
+ * Layout: chat panel (flex-1) + checkpoint timeline sidebar (w-72).
+ *
* Key integration points:
* - `stream.history()` -- array of ThreadState snapshots
* - `stream.branch()` -- current branch identifier
@@ -15,11 +18,126 @@ import { environment } from '../environments/environment';
selector: 'app-time-travel',
standalone: true,
imports: [ChatComponent],
- template: ``,
+ template: `
+
+
+
+
+
+
+
+ `,
})
export class TimeTravelComponent {
protected readonly stream = streamResource({
apiUrl: environment.langGraphApiUrl,
assistantId: environment.streamingAssistantId,
});
+
+ /** Index of the currently selected checkpoint in the sidebar. */
+ protected readonly selectedIndex = signal(-1);
+
+ /** Checkpoint history derived from the stream resource. */
+ protected readonly checkpoints = computed(
+ (): ThreadState[] => this.stream.history(),
+ );
+
+ /** Display label for a checkpoint entry. */
+ protected checkpointLabel(
+ state: ThreadState,
+ index: number,
+ ): string {
+ if (state.checkpoint?.checkpoint_id) {
+ return `Checkpoint ${index + 1}`;
+ }
+ return `State ${index + 1}`;
+ }
+
+ /** Replay the conversation from the given checkpoint. */
+ protected replay(state: ThreadState, index: number): void {
+ if (state.checkpoint?.checkpoint_id) {
+ this.selectedIndex.set(index);
+ this.stream.setBranch(state.checkpoint.checkpoint_id);
+ }
+ }
+
+ /** Fork the conversation from the given checkpoint. */
+ protected fork(state: ThreadState, index: number): void {
+ if (state.checkpoint?.checkpoint_id) {
+ this.selectedIndex.set(index);
+ this.stream.setBranch(state.checkpoint.checkpoint_id);
+ }
+ }
}
diff --git a/docs/superpowers/plans/2026-04-06-cockpit-examples-validation.md b/docs/superpowers/plans/2026-04-06-cockpit-examples-validation.md
new file mode 100644
index 000000000..eb3ac7993
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-06-cockpit-examples-validation.md
@@ -0,0 +1,1053 @@
+# Cockpit Examples Validation & Sidebar 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:** Implement capability-specific sidebars for all 9 incomplete cockpit examples, validating that the chat and stream-resource libraries fully support every LangGraph and Deep Agent capability. Each example is a minimal, isolated Angular app that uses the libs — changes discovered here feed back into the libs.
+
+**Architecture:** Each example follows the pattern: `streamResource()` → `` + custom sidebar derived from `stream.value()` or `stream.messages()`. Sidebars are built directly in each example's component using Tailwind classes and the chat theme CSS vars. No new library components needed — the sidebars are example-specific UI, not reusable primitives.
+
+**Tech Stack:** Angular 20+, `@cacheplane/chat`, `@cacheplane/stream-resource`, Tailwind CSS v4
+
+**Parallelism:** Tasks 1-4 (LangGraph examples) are independent. Tasks 5-8 (Deep Agent examples) are independent. All can run in parallel within their group.
+
+**Verification:** Each task ends with `npx nx build ` to verify the example compiles. Full E2E testing requires running the Python backend, which is out of scope — the focus is on Angular compilation and correct library usage.
+
+---
+
+## File Structure
+
+Each task modifies ONE file — the example's main component. All sidebar UI is co-located in the component (small, focused, example-specific).
+
+### Modified files (9 examples needing sidebars)
+
+| Task | File | Sidebar Feature |
+|------|------|----------------|
+| 1 | `cockpit/langgraph/persistence/angular/src/app/persistence.component.ts` | Thread picker list |
+| 2 | `cockpit/langgraph/time-travel/angular/src/app/time-travel.component.ts` | Checkpoint timeline |
+| 3 | `cockpit/langgraph/durable-execution/angular/src/app/durable-execution.component.ts` | Step progress pipeline |
+| 4 | `cockpit/deep-agents/planning/angular/src/app/planning.component.ts` | Plan step checklist |
+| 5 | `cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts` | File operations log |
+| 6 | `cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts` | Delegation tracker |
+| 7 | `cockpit/deep-agents/memory/angular/src/app/memory.component.ts` | Learned facts sidebar |
+| 8 | `cockpit/deep-agents/skills/angular/src/app/skills.component.ts` | Skill invocations log |
+| 9 | `cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts` | Execution output log |
+
+### Already complete (5 examples — verify only)
+- `cockpit/langgraph/streaming/angular/` — basic streaming ✓
+- `cockpit/langgraph/interrupts/angular/` — interrupt panel ✓
+- `cockpit/langgraph/memory/angular/` — facts sidebar ✓
+- `cockpit/langgraph/subgraphs/angular/` — subagent sidebar ✓
+- `cockpit/langgraph/deployment-runtime/angular/` — production config ✓
+
+---
+
+## Shared Sidebar Pattern
+
+Every sidebar follows this template. Subagents should reference this when implementing:
+
+```typescript
+// Layout: chat (flex-1) + aside sidebar
+template: `
+
+
+
+
+`
+```
+
+Key rules:
+- Import `ChatComponent` from `@cacheplane/chat`
+- Use `streamResource()` from `@cacheplane/stream-resource`
+- Derive sidebar state with `computed()` from `stream.value()` or `stream.messages()`
+- Use Tailwind + chat theme CSS vars for styling
+- The `` component handles all message rendering, input, typing, errors internally
+
+---
+
+## Task 1: Persistence — Thread Picker Sidebar
+
+**Files:**
+- Modify: `cockpit/langgraph/persistence/angular/src/app/persistence.component.ts`
+
+**Capability:** Thread-based conversation persistence. Users can create new threads and switch between them.
+
+- [ ] **Step 1: Read the current component**
+
+Read `cockpit/langgraph/persistence/angular/src/app/persistence.component.ts` to understand current state.
+
+- [ ] **Step 2: Implement thread picker sidebar**
+
+Replace the component with a layout that has chat + thread sidebar:
+
+```typescript
+import { Component, signal, computed } from '@angular/core';
+import { ChatComponent } from '@cacheplane/chat';
+import { streamResource } from '@cacheplane/stream-resource';
+import { environment } from '../environments/environment';
+
+interface ThreadEntry {
+ id: string;
+ createdAt: string;
+}
+
+@Component({
+ selector: 'app-persistence',
+ standalone: true,
+ imports: [ChatComponent],
+ template: `
+