From c8c989948b9dcf04675fdff96795847fb7a8192f Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Wed, 8 Apr 2026 21:47:12 -0700
Subject: [PATCH] fix(cockpit): fix chat input/threads/generative-ui for latest
 API changes

- Use ResourceStatus.Loading instead of string literal 'streaming' comparison
- Replace [ref] with [threads] input on chat-thread-list component
- Replace removed ChatGenerativeUiComponent with views() + ViewRegistry pattern

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../angular/src/app/generative-ui.component.ts      | 13 ++++++++-----
 .../chat/input/angular/src/app/input.component.ts   |  4 ++--
 .../threads/angular/src/app/threads.component.ts    |  2 +-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/cockpit/chat/generative-ui/angular/src/app/generative-ui.component.ts b/cockpit/chat/generative-ui/angular/src/app/generative-ui.component.ts
index 0089176c7..b6d1710b9 100644
--- a/cockpit/chat/generative-ui/angular/src/app/generative-ui.component.ts
+++ b/cockpit/chat/generative-ui/angular/src/app/generative-ui.component.ts
@@ -1,26 +1,26 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 import { Component } from '@angular/core';
-import { ChatComponent, ChatGenerativeUiComponent } from '@cacheplane/chat';
+import { ChatComponent, views } from '@cacheplane/chat';
 import { agent } from '@cacheplane/angular';
+import { signalStateStore } from '@cacheplane/render';
 import { environment } from '../environments/environment';
 
 /**
  * GenerativeUiComponent demonstrates dynamic UI generation within
- * chat messages using ChatComponent and ChatGenerativeUiComponent.
+ * chat messages using ChatComponent with a ViewRegistry.
  * The agent embeds render specs that are rendered as live components.
  */
 @Component({
   selector: 'app-generative-ui',
   standalone: true,
-  imports: [ChatComponent, ChatGenerativeUiComponent],
+  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-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"
             style="color: var(--chat-text-muted, #777);">Generative UI</h3>
-        <chat-generative-ui [ref]="stream" />
         <div class="mt-4">
           <h4 class="text-xs font-semibold uppercase tracking-wide mb-2"
               style="color: var(--chat-text-muted, #777);">How It Works</h4>
@@ -35,6 +35,9 @@ import { environment } from '../environments/environment';
   `,
 })
 export class GenerativeUiComponent {
+  readonly ui = views({});
+  readonly uiStore = signalStateStore({});
+
   protected readonly stream = agent({
     apiUrl: environment.langGraphApiUrl,
     assistantId: environment.streamingAssistantId,
diff --git a/cockpit/chat/input/angular/src/app/input.component.ts b/cockpit/chat/input/angular/src/app/input.component.ts
index 2f682de93..708c6e81f 100644
--- a/cockpit/chat/input/angular/src/app/input.component.ts
+++ b/cockpit/chat/input/angular/src/app/input.component.ts
@@ -2,7 +2,7 @@
 import { Component, computed } from '@angular/core';
 import { ChatInputComponent as ChatInputPrimitive } from '@cacheplane/chat';
 import { ChatMessagesComponent } from '@cacheplane/chat';
-import { agent } from '@cacheplane/angular';
+import { agent, ResourceStatus } from '@cacheplane/angular';
 import { environment } from '../environments/environment';
 
 /**
@@ -58,7 +58,7 @@ export class InputComponent {
   });
 
   protected readonly streamStatus = computed(() => this.stream.status());
-  protected readonly isLoading = computed(() => this.stream.status() === 'streaming');
+  protected readonly isLoading = computed(() => this.stream.status() === ResourceStatus.Loading);
 
   submitMessage(content: string) {
     this.stream.submit([{ role: 'human', content }]);
diff --git a/cockpit/chat/threads/angular/src/app/threads.component.ts b/cockpit/chat/threads/angular/src/app/threads.component.ts
index 12c76b7f2..5e024e0ac 100644
--- a/cockpit/chat/threads/angular/src/app/threads.component.ts
+++ b/cockpit/chat/threads/angular/src/app/threads.component.ts
@@ -18,7 +18,7 @@ import { environment } from '../environments/environment';
              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"
             style="color: var(--chat-text-muted, #777);">Threads</h3>
-        <chat-thread-list [ref]="stream" />
+        <chat-thread-list [threads]="[]" />
       </aside>
       <chat [ref]="stream" class="flex-1 min-w-0" />
     </div>