From 53136bb99e82643b1bca9da45c409a4e3788654f Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Tue, 9 Jun 2026 09:01:52 -0700
Subject: [PATCH] docs(chat): fix snippet accuracy vs 0.0.49 API

---
 .../content/docs/chat/a2ui/catalog.mdx        | 48 ++++++++++++-------
 .../docs/chat/components/chat-trace.mdx       | 26 ++++++++--
 .../chat/getting-started/installation.mdx     |  1 +
 .../docs/chat/getting-started/quickstart.mdx  | 20 ++++----
 4 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/apps/website/content/docs/chat/a2ui/catalog.mdx b/apps/website/content/docs/chat/a2ui/catalog.mdx
index 46269e1a7..065ed3ce3 100644
--- a/apps/website/content/docs/chat/a2ui/catalog.mdx
+++ b/apps/website/content/docs/chat/a2ui/catalog.mdx
@@ -335,12 +335,15 @@ A tabbed container that shows one child panel at a time based on the selected ta
 ```json
 {
   "id": "info-tabs",
-  "component": "Tabs",
-  "tabs": [
-    {"label": "Overview", "childKeys": ["overview-content"]},
-    {"label": "Details", "childKeys": ["detail-list"]}
-  ],
-  "selected": {"path": "/activeTab"}
+  "component": {
+    "Tabs": {
+      "tabs": [
+        {"label": "Overview", "childKeys": ["overview-content"]},
+        {"label": "Details", "childKeys": ["detail-list"]}
+      ],
+      "selected": {"path": "/activeTab"}
+    }
+  }
 }
 ```
 
@@ -365,11 +368,14 @@ A dialog overlay that renders child content when open. Supports an optional titl
 ```json
 {
   "id": "confirm-dialog",
-  "component": "Modal",
-  "title": "Confirm Action",
-  "open": {"path": "/showConfirm"},
-  "childKeys": ["confirm-message", "confirm-buttons"],
-  "dismissible": true
+  "component": {
+    "Modal": {
+      "title": {"literalString": "Confirm Action"},
+      "open": {"path": "/showConfirm"},
+      "childKeys": ["confirm-message", "confirm-buttons"],
+      "dismissible": true
+    }
+  }
 }
 ```
 
@@ -393,10 +399,13 @@ Renders an HTML5 `<video>` element.
 ```json
 {
   "id": "intro-video",
-  "component": "Video",
-  "url": "https://example.com/intro.mp4",
-  "poster": "https://example.com/poster.jpg",
-  "controls": true
+  "component": {
+    "Video": {
+      "url": {"literalString": "https://example.com/intro.mp4"},
+      "poster": {"literalString": "https://example.com/poster.jpg"},
+      "controls": true
+    }
+  }
 }
 ```
 
@@ -417,9 +426,12 @@ Renders an HTML5 `<audio>` element.
 ```json
 {
   "id": "podcast",
-  "component": "AudioPlayer",
-  "url": "https://example.com/episode.mp3",
-  "controls": true
+  "component": {
+    "AudioPlayer": {
+      "url": {"literalString": "https://example.com/episode.mp3"},
+      "controls": true
+    }
+  }
 }
 ```
 
diff --git a/apps/website/content/docs/chat/components/chat-trace.mdx b/apps/website/content/docs/chat/components/chat-trace.mdx
index c4c0bc057..8cd9b7ded 100644
--- a/apps/website/content/docs/chat/components/chat-trace.mdx
+++ b/apps/website/content/docs/chat/components/chat-trace.mdx
@@ -91,9 +91,15 @@ When `state` transitions from any value to `'running'`, the trace automatically
 ### Full component example
 
 ```typescript
-import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
+import { Component, ChangeDetectionStrategy, computed, signal } from '@angular/core';
 import { injectAgent, provideAgent } from '@threadplane/langgraph';
 import { ChatTraceComponent, ChatMessageListComponent } from '@threadplane/chat';
+import type { ToolCallStatus, TraceState } from '@threadplane/chat';
+
+function toTraceState(status: ToolCallStatus): TraceState {
+  // 'pending' | 'running' | 'error' carry over; only 'complete' is renamed.
+  return status === 'complete' ? 'done' : status;
+}
 
 @Component({
   selector: 'app-traced-chat',
@@ -106,10 +112,10 @@ import { ChatTraceComponent, ChatMessageListComponent } from '@threadplane/chat'
       <chat-message-list [agent]="chatAgent">
         <ng-template chatMessageTemplate="ai" let-message>
           <!-- Show tool traces before the AI message -->
-          @for (step of chatAgent.steps(); track step.id) {
-            <chat-trace [state]="step.state">
-              <span traceLabel>{{ step.name }}</span>
-              <pre>{{ step.output | json }}</pre>
+          @for (trace of traces(); track trace.id) {
+            <chat-trace [state]="trace.state">
+              <span traceLabel>{{ trace.name }}</span>
+              <pre>{{ trace.args | json }}</pre>
             </chat-trace>
           }
           <div>{{ message.content }}</div>
@@ -120,6 +126,16 @@ import { ChatTraceComponent, ChatMessageListComponent } from '@threadplane/chat'
 })
 export class TracedChatComponent {
   protected readonly chatAgent = injectAgent();
+
+  // The agent's toolCalls() signal is the real source for trace rows.
+  protected readonly traces = computed(() =>
+    this.chatAgent.toolCalls().map((call) => ({
+      id: call.id,
+      name: call.name,
+      args: call.args,
+      state: toTraceState(call.status),
+    })),
+  );
 }
 ```
 
diff --git a/apps/website/content/docs/chat/getting-started/installation.mdx b/apps/website/content/docs/chat/getting-started/installation.mdx
index 927f70314..845659b56 100644
--- a/apps/website/content/docs/chat/getting-started/installation.mdx
+++ b/apps/website/content/docs/chat/getting-started/installation.mdx
@@ -115,6 +115,7 @@ export const appConfig: ApplicationConfig = {
     provideZonelessChangeDetection(),
     provideAgent({
       apiUrl: environment.langgraphApiUrl, // e.g. 'http://localhost:2024'
+      assistantId: 'chat',                 // The graph/agent ID exposed by your backend
     }),
     provideChat({
       license: environment.threadplaneLicense,
diff --git a/apps/website/content/docs/chat/getting-started/quickstart.mdx b/apps/website/content/docs/chat/getting-started/quickstart.mdx
index 7930dae33..1b5e355d9 100644
--- a/apps/website/content/docs/chat/getting-started/quickstart.mdx
+++ b/apps/website/content/docs/chat/getting-started/quickstart.mdx
@@ -28,13 +28,17 @@ npm install @threadplane/chat marked
 
 ```ts
 // app.config.ts
-import { ApplicationConfig } from '@angular/core';
+import { ApplicationConfig, signal } from '@angular/core';
 import { provideAgent } from '@threadplane/langgraph';
 import { provideChat } from '@threadplane/chat';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideAgent({ apiUrl: 'http://localhost:2024' }),
+    provideAgent({
+      assistantId: 'chat',
+      apiUrl: 'http://localhost:2024',
+      threadId: signal(null),
+    }),
     provideChat({ assistantName: 'Assistant' }),
   ],
 };
@@ -45,8 +49,8 @@ export const appConfig: ApplicationConfig = {
 
 ```ts
 // chat-page.component.ts
-import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
-import { injectAgent, provideAgent } from '@threadplane/langgraph';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { injectAgent } from '@threadplane/langgraph';
 import { ChatComponent } from '@threadplane/chat';
 
 @Component({
@@ -54,12 +58,6 @@ import { ChatComponent } from '@threadplane/chat';
   standalone: true,
   imports: [ChatComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    provideAgent({
-      assistantId: 'chat',
-      threadId: signal(null),
-    }),
-  ],
   template: `<div style="height: 100vh"><chat [agent]="chatAgent" /></div>`,
 })
 export class ChatPageComponent {
@@ -67,7 +65,7 @@ export class ChatPageComponent {
 }
 ```
 
-The second `provideAgent()` isn't a duplicate. Angular's hierarchical DI merges it with the root provider from Step 2: `apiUrl` comes from the root, `assistantId` and `threadId` come from this component-level call. Splitting config this way lets one app host several `<chat>` surfaces that share a backend URL but target different graphs. See the [Multiple agents](/docs/chat/getting-started/installation) note in Installation for the full pattern.
+`injectAgent()` returns the singleton wired up in Step 2 — no extra provider needed here. To host several `<chat>` surfaces that share a backend URL but target different graphs, re-provide `provideAgent({...})` in a component's `providers: []` array; Angular's hierarchical DI scopes that override to the subtree. See the [Multiple agents](/docs/chat/getting-started/installation) note in Installation for the full pattern.
 
 </Step>
 </Steps>