fix: close AG-UI audit gaps F1–F4 + F6 (composer clear, light scheme, graceful stop, json-render values, markdown tracking)

apps/website/content/docs/chat/api/api-docs.json

@@ -2153,6 +2153,12 @@
         "description": "",
         "optional": false
       },
+      {
+        "name": "normalizedSpec",
+        "type": "Signal<Spec | null>",
+        "description": "The bound spec with schema-documented `{ statePath }` prop refs\nrewritten to engine-native `{ $bindState }` + `_bindings` so values\nresolve against the state store instead of interpolating as\n\"[object Object]\" (F4).",
+        "optional": false
+      },
       {
         "name": "registry",
         "type": "InputSignal<AngularRegistry | undefined>",
@@ -2393,6 +2399,19 @@
         "description": "",
         "params": []
       },
+      {
+        "name": "onInput",
+        "signature": "onInput(event: Event): void",
+        "description": "Sync the textarea's value into the signal on user input. A direct\n [value]/(input) pair is used instead of ngModel: NgModel does not\n reliably write a programmatic clear back to the view under zoneless\n + OnPush, leaving sent text visible in the composer (audit F1).",
+        "params": [
+          {
+            "name": "event",
+            "type": "Event",
+            "description": "",
+            "optional": false
+          }
+        ]
+      },
       {
         "name": "onKeydown",
         "signature": "onKeydown(event: KeyboardEvent): void",
@@ -2782,6 +2801,12 @@
         "description": "",
         "optional": false
       },
+      {
+        "name": "clientTools",
+        "type": "InputSignal<Readonly<Record<string, ClientToolDef>> | undefined>",
+        "description": "Frontend-declared client tools forwarded to the inner `<chat>`.",
+        "optional": false
+      },
       {
         "name": "closeOnEscape",
         "type": "InputSignal<boolean>",
@@ -3277,6 +3302,12 @@
         "description": "",
         "optional": false
       },
+      {
+        "name": "clientTools",
+        "type": "InputSignal<Readonly<Record<string, ClientToolDef>> | undefined>",
+        "description": "Frontend-declared client tools forwarded to the inner `<chat>`.",
+        "optional": false
+      },
       {
         "name": "closeOnEscape",
         "type": "InputSignal<boolean>",
@@ -4702,7 +4733,7 @@
   {
     "name": "MarkdownChildrenComponent",
     "kind": "class",
-    "description": "Recursively dispatches a parent node's children through the markdown view\nregistry. Each child's `type` is looked up in the registry; the resolved\ncomponent is rendered with `[node]` bound to that child.\n\nIdentity-preserving: `track $any(child)` keys on the JS reference of the\nchild node. Because @cacheplane/partial-markdown preserves node identity\nacross pushes, unchanged subtrees never re-render.",
+    "description": "Recursively dispatches a parent node's children through the markdown view\nregistry. Each child's `type` is looked up in the registry; the resolved\ncomponent is rendered with `[node]` bound to that child.\n\nPosition-stable: `track $index` avoids NG0956 re-creation warnings that\noccur when the markdown pipeline re-parses content on every stream delta,\nproducing new child object references even for unchanged nodes.",
     "params": [],
     "examples": [],
     "properties": [

cockpit/ag-ui/json-render/angular/src/app/json-render.component.ts

@@ -2,6 +2,7 @@
 import { Component } from '@angular/core';
 import { ChatComponent, ChatWelcomeSuggestionComponent, views } from '@threadplane/chat';
 import { injectAgent } from '@threadplane/ag-ui';
+import { signalStateStore } from '@threadplane/render';
 import { ExampleChatLayoutComponent } from '@threadplane/example-layouts';
 import { StatCardComponent } from './views/stat-card.component';
 import { ContainerComponent } from './views/container.component';
@@ -30,7 +31,7 @@ const WELCOME_SUGGESTIONS = [
   imports: [ChatComponent, ChatWelcomeSuggestionComponent, ExampleChatLayoutComponent],
   template: `
     <example-chat-layout>
-      <chat main [agent]="agent" [views]="dashboardViews" class="flex-1 min-w-0">
+      <chat main [agent]="agent" [views]="dashboardViews" [store]="dashStore" class="flex-1 min-w-0">
         <div chatWelcomeSuggestions>
           @for (s of suggestions; track s.value) {
             <chat-welcome-suggestion [label]="s.label" [value]="s.value" (selected)="send($event)" />
@@ -44,5 +45,10 @@ export class JsonRenderComponent {
   protected readonly agent = injectAgent();
   protected readonly dashboardViews = dashboardViews;
   protected readonly suggestions = WELCOME_SUGGESTIONS;
+  /**
+   * Explicit shared store: backend state (STATE_SNAPSHOT) syncs into it via
+   * the chat composition, so every dashboard surface reads live values.
+   */
+  protected readonly dashStore = signalStateStore({});
   protected send(text: string): void { void this.agent.submit({ message: text }); }
 }

cockpit/ag-ui/json-render/python/docs/guide.md

@@ -10,18 +10,19 @@ as the backend updates the data.
 </Summary>
 
 <Prompt>
-Render a backend-authored dashboard with `@threadplane/chat` over the AG-UI adapter. Register your view components in the `views` map and pass it to `<chat>`. Have the agent emit a json-render spec (with `$state` bindings) as the assistant message content, and put the data the spec binds to in the LangGraph graph state so `ag-ui-langgraph` emits it as a `STATE_SNAPSHOT`. The chat composition resolves the bindings automatically.
+Render a backend-authored dashboard with `@threadplane/chat` over the AG-UI adapter. Register your view components in the `views` map and pass it to `<chat>`, along with an explicit `[store]` — the composition syncs incoming agent state into that store, and the spec's `$state` bindings resolve against it. Have the agent emit a json-render spec (with `$state` bindings) as the assistant message content, and put the data the spec binds to in the LangGraph graph state so `ag-ui-langgraph` emits it as a `STATE_SNAPSHOT`.
 </Prompt>
 
 <Steps>
 <Step title="Register the view components">
 
-Build a `views` registry keyed by the component types your spec will reference, and pass it to `<chat>`:
+Build a `views` registry keyed by the component types your spec will reference, and pass it to `<chat>` together with an explicit store. Without a `[store]`, each render surface seeds its own isolated store from the spec — the explicit store is what lets backend state (`STATE_SNAPSHOT`) reach the dashboard bindings:
 
 ```typescript
 // json-render.component.ts
 import { ChatComponent, views } from '@threadplane/chat';
 import { injectAgent } from '@threadplane/ag-ui';
+import { signalStateStore } from '@threadplane/render';
 import { StatCardComponent } from './views/stat-card.component';
 import { DashboardGridComponent } from './views/dashboard-grid.component';
 // …line-chart, bar-chart, data-grid, container
@@ -31,10 +32,13 @@ const dashboardViews = views({
   dashboard_grid: DashboardGridComponent,
   // …
 });
+
+// In the component class:
+readonly dashStore = signalStateStore({});
 ```
 
 ```html
-<chat main [agent]="agent" [views]="dashboardViews" />
+<chat main [agent]="agent" [views]="dashboardViews" [store]="dashStore" />
 ```
 
 </Step>
@@ -76,8 +80,8 @@ data prop uses a `$state` binding rather than a literal:
 This is the AG-UI-native part. Instead of pushing data through a side channel,
 put it in the **graph state** — `ag-ui-langgraph` emits the state object as a
 `STATE_SNAPSHOT`, the adapter writes it to the agent's `state` signal, and the
-chat composition syncs it into the render store where the `$state` bindings
-resolve:
+chat composition syncs it into the explicit `[store]` you passed, where the
+`$state` bindings resolve:
 
 ```python
 # graph.py — emit_state returns the accumulated tool data into state

cockpit/ag-ui/json-render/python/src/graph.py

@@ -17,8 +17,9 @@
 
 emit_state walks the message history for this turn and returns the tool
 results as top-level state fields — ag-ui-langgraph emits them as
-STATE_SNAPSHOT; the Angular chat-lib effect syncs them into the render
-store, where the spec's $state bindings resolve them.
+STATE_SNAPSHOT; the Angular chat-lib effect syncs them into the explicit
+[store] the app passes to <chat>, where the spec's $state bindings
+resolve them.
 """
 
 import json

cockpit/chat/generative-ui/angular/src/app/generative-ui.component.ts

@@ -2,6 +2,7 @@
 import { Component } from '@angular/core';
 import { ChatComponent, ChatWelcomeSuggestionComponent, views } from '@threadplane/chat';
 import { injectAgent } from '@threadplane/langgraph';
+import { signalStateStore } from '@threadplane/render';
 import { ExampleChatLayoutComponent } from '@threadplane/example-layouts';
 
 import { StatCardComponent } from './views/stat-card.component';
@@ -31,7 +32,7 @@ const WELCOME_SUGGESTIONS = [
   imports: [ChatComponent, ChatWelcomeSuggestionComponent, ExampleChatLayoutComponent],
   template: `
     <example-chat-layout>
-      <chat main [agent]="agent" [views]="dashboardViews" class="flex-1 min-w-0">
+      <chat main [agent]="agent" [views]="dashboardViews" [store]="dashStore" class="flex-1 min-w-0">
         <div chatWelcomeSuggestions>
           @for (s of suggestions; track s.value) {
             <chat-welcome-suggestion
@@ -50,6 +51,12 @@ export class GenerativeUiComponent {
   protected readonly dashboardViews = dashboardViews;
   protected readonly suggestions = WELCOME_SUGGESTIONS;
 
+  /**
+   * Explicit shared store: backend graph state syncs into it via the chat
+   * composition, so every dashboard surface reads live values.
+   */
+  protected readonly dashStore = signalStateStore({});
+
   protected send(text: string): void {
     void this.agent.submit({ message: text });
   }