From efd4a85389cd3bb1fb54c9e3f9a7b27590225269 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Wed, 8 Apr 2026 08:40:59 -0700
Subject: [PATCH] feat(cockpit): wire view components into all 6 examples

---
 .../filesystem/angular/src/app/filesystem.component.ts |  9 +++++++--
 .../planning/angular/src/app/planning.component.ts     | 10 ++++++++--
 .../sandboxes/angular/src/app/sandboxes.component.ts   |  9 +++++++--
 .../skills/angular/src/app/skills.component.ts         | 10 ++++++++--
 .../angular/src/app/durable-execution.component.ts     |  9 +++++++--
 .../interrupts/angular/src/app/interrupts.component.ts |  9 +++++++--
 libs/chat/src/lib/compositions/chat/chat.component.ts  |  4 ++++
 7 files changed, 48 insertions(+), 12 deletions(-)

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 699ec60fb..872a1184a 100644
--- a/cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts
+++ b/cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts
@@ -1,7 +1,9 @@
 import { Component, computed } from '@angular/core';
-import { ChatComponent } from '@cacheplane/chat';
+import { ChatComponent, views } from '@cacheplane/chat';
 import { agent } from '@cacheplane/angular';
+import { signalStateStore } from '@cacheplane/render';
 import { environment } from '../environments/environment';
+import { FilePreviewComponent } from './views/file-preview.component';
 
 /**
  * Represents a file operation extracted from agent tool calls.
@@ -30,7 +32,7 @@ interface FileOperation {
   imports: [ChatComponent],
   template: `
     <div class="flex h-screen">
-      <chat [ref]="stream" class="flex-1 min-w-0" />
+      <chat [ref]="stream" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
       <aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
              style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
@@ -59,6 +61,9 @@ interface FileOperation {
   `,
 })
 export class FilesystemComponent {
+  readonly ui = views({ 'file-preview': FilePreviewComponent });
+  readonly uiStore = signalStateStore({});
+
   /**
    * The streaming resource connected to the filesystem graph.
    *
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 1ee2de46a..f20c2fb81 100644
--- a/cockpit/deep-agents/planning/angular/src/app/planning.component.ts
+++ b/cockpit/deep-agents/planning/angular/src/app/planning.component.ts
@@ -1,7 +1,10 @@
 import { Component, computed } from '@angular/core';
-import { ChatComponent } from '@cacheplane/chat';
+import { ChatComponent, views } from '@cacheplane/chat';
 import { agent } from '@cacheplane/angular';
+import { signalStateStore } from '@cacheplane/render';
 import { environment } from '../environments/environment';
+import { PlanChecklistComponent } from './views/plan-checklist.component';
+import { CheckboxRowComponent } from './views/checkbox-row.component';
 
 /**
  * Represents a single step in an agent-generated plan.
@@ -30,7 +33,7 @@ interface PlanStep {
   imports: [ChatComponent],
   template: `
     <div class="flex h-screen">
-      <chat [ref]="stream" class="flex-1 min-w-0" />
+      <chat [ref]="stream" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
       <aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
              style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
@@ -58,6 +61,9 @@ interface PlanStep {
   `,
 })
 export class PlanningComponent {
+  readonly ui = views({ 'plan-checklist': PlanChecklistComponent, 'checkbox-row': CheckboxRowComponent });
+  readonly uiStore = signalStateStore({});
+
   /**
    * The streaming resource connected to the planning graph.
    *
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 1f349ca8b..a17949d02 100644
--- a/cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts
+++ b/cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts
@@ -1,7 +1,9 @@
 import { Component, computed } from '@angular/core';
-import { ChatComponent } from '@cacheplane/chat';
+import { ChatComponent, views } from '@cacheplane/chat';
 import { agent } from '@cacheplane/angular';
+import { signalStateStore } from '@cacheplane/render';
 import { environment } from '../environments/environment';
+import { CodeExecutionComponent } from './views/code-execution.component';
 
 /**
  * Represents a parsed code execution: the code that was run and its output.
@@ -28,7 +30,7 @@ interface CodeExecution {
   imports: [ChatComponent],
   template: `
     <div class="flex h-screen">
-      <chat [ref]="stream" class="flex-1 min-w-0" />
+      <chat [ref]="stream" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
       <aside class="w-80 shrink-0 border-l overflow-y-auto p-4 space-y-3"
              style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
@@ -59,6 +61,9 @@ interface CodeExecution {
   `,
 })
 export class SandboxesComponent {
+  readonly ui = views({ 'code-execution': CodeExecutionComponent });
+  readonly uiStore = signalStateStore({});
+
   protected readonly stream = agent({
     apiUrl: environment.langGraphApiUrl,
     assistantId: environment.streamingAssistantId,
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 71c3cb577..c670f3cf8 100644
--- a/cockpit/deep-agents/skills/angular/src/app/skills.component.ts
+++ b/cockpit/deep-agents/skills/angular/src/app/skills.component.ts
@@ -1,7 +1,10 @@
 import { Component, computed } from '@angular/core';
-import { ChatComponent } from '@cacheplane/chat';
+import { ChatComponent, views } from '@cacheplane/chat';
 import { agent } from '@cacheplane/angular';
+import { signalStateStore } from '@cacheplane/render';
 import { environment } from '../environments/environment';
+import { CalculatorResultComponent } from './views/calculator-result.component';
+import { WordCountResultComponent } from './views/word-count-result.component';
 
 /**
  * Represents a matched skill invocation: tool call paired with its result.
@@ -29,7 +32,7 @@ interface SkillInvocation {
   imports: [ChatComponent],
   template: `
     <div class="flex h-screen">
-      <chat [ref]="stream" class="flex-1 min-w-0" />
+      <chat [ref]="stream" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
       <aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-3"
              style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
@@ -65,6 +68,9 @@ interface SkillInvocation {
   `,
 })
 export class SkillsComponent {
+  readonly ui = views({ 'calculator-result': CalculatorResultComponent, 'word-count-result': WordCountResultComponent });
+  readonly uiStore = signalStateStore({});
+
   protected readonly stream = agent({
     apiUrl: environment.langGraphApiUrl,
     assistantId: environment.streamingAssistantId,
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 f5a63e1be..3345b55c2 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,7 +1,9 @@
 import { Component, computed } from '@angular/core';
-import { ChatComponent } from '@cacheplane/chat';
+import { ChatComponent, views } from '@cacheplane/chat';
 import { agent } from '@cacheplane/angular';
+import { signalStateStore } from '@cacheplane/render';
 import { environment } from '../environments/environment';
+import { StepPipelineComponent } from './views/step-pipeline.component';
 
 /**
  * Pipeline step definition for the vertical progress indicator.
@@ -37,7 +39,7 @@ const STEP_LABELS: Record<string, string> = {
   imports: [ChatComponent],
   template: `
     <div class="flex h-screen">
-      <chat [ref]="stream" class="flex-1 min-w-0" />
+      <chat [ref]="stream" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
       <aside class="w-64 shrink-0 border-l overflow-y-auto p-4"
              style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide mb-6"
@@ -92,6 +94,9 @@ const STEP_LABELS: Record<string, string> = {
   `,
 })
 export class DurableExecutionComponent {
+  readonly ui = views({ 'step-pipeline': StepPipelineComponent });
+  readonly uiStore = signalStateStore({});
+
   protected readonly stream = agent({
     apiUrl: environment.langGraphApiUrl,
     assistantId: environment.streamingAssistantId,
diff --git a/cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts b/cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts
index b6683d5b5..fade2da19 100644
--- a/cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts
+++ b/cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts
@@ -1,8 +1,10 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 import { Component } from '@angular/core';
-import { ChatComponent, ChatInterruptPanelComponent, type InterruptAction } from '@cacheplane/chat';
+import { ChatComponent, ChatInterruptPanelComponent, views, type InterruptAction } from '@cacheplane/chat';
 import { agent } from '@cacheplane/angular';
+import { signalStateStore } from '@cacheplane/render';
 import { environment } from '../environments/environment';
+import { ApprovalCardComponent } from './views/approval-card.component';
 
 /**
  * InterruptsComponent demonstrates human-in-the-loop with `agent()`.
@@ -22,7 +24,7 @@ import { environment } from '../environments/environment';
   imports: [ChatComponent, ChatInterruptPanelComponent],
   template: `
     <div class="flex flex-col h-screen">
-      <chat [ref]="stream" class="flex-1 min-w-0" />
+      <chat [ref]="stream" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
       @if (stream.interrupt()) {
         <div class="p-4" style="border-top: 1px solid var(--chat-border, #333);">
           <chat-interrupt-panel [ref]="stream" (action)="onInterruptAction($event)" />
@@ -32,6 +34,9 @@ import { environment } from '../environments/environment';
   `,
 })
 export class InterruptsComponent {
+  readonly ui = views({ 'approval-card': ApprovalCardComponent });
+  readonly uiStore = signalStateStore({});
+
   /**
    * The streaming resource with interrupt support.
    *
diff --git a/libs/chat/src/lib/compositions/chat/chat.component.ts b/libs/chat/src/lib/compositions/chat/chat.component.ts
index 0e5aa4077..dcfc55970 100644
--- a/libs/chat/src/lib/compositions/chat/chat.component.ts
+++ b/libs/chat/src/lib/compositions/chat/chat.component.ts
@@ -14,6 +14,8 @@ import {
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import type { AgentRef } from '@cacheplane/angular';
+import type { ViewRegistry } 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';
 import { ChatInputComponent } from '../../primitives/chat-input/chat-input.component';
@@ -176,6 +178,8 @@ 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>();