@threadplane/chat 0.0.47 → 0.0.49

package/fesm2022/threadplane-chat.mjs

@@ -3,7 +3,7 @@ import { input, inject, TemplateRef, Directive, contentChildren, computed, Chang
 import { NgTemplateOutlet, NgComponentOutlet, KeyValuePipe } from '@angular/common';
 import { createPartialMarkdownParser, materialize } from '@cacheplane/partial-markdown';
 import { views, RenderSpecComponent, toRenderRegistry, signalStateStore, RenderElementComponent } from '@threadplane/render';
-export { VIEW_REGISTRY, provideViews, toRenderRegistry, views, withViews, withoutViews } from '@threadplane/render';
+export { toRenderRegistry, views, withViews, withoutViews } from '@threadplane/render';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { runLicenseCheck, inferNoncommercial, LICENSE_PUBLIC_KEY } from '@threadplane/licensing';
@@ -4152,6 +4152,39 @@ function pluralize(word, count) {
     return count === 1 ? word : `${word}s`;
 }
 
+/**
+ * Resolves the tool calls that belong to a specific message, mirroring the
+ * per-message scoping the chat lib uses to avoid every assistant bubble
+ * re-rendering the whole thread's tool-call list.
+ *
+ * - No message context → the agent's global tool-call list.
+ * - Assistant message with `toolCallIds` (LangGraph) → those ids, in order.
+ * - Assistant message with `tool_use` content blocks (Anthropic) → those ids.
+ * - Assistant message with no linkage → [] (this message emitted no calls).
+ * - Any non-assistant message → the global list (callers filter as needed).
+ *
+ * MUST be called inside a reactive context (computed/effect) so the
+ * `agent.toolCalls()` signal read registers a dependency.
+ */
+function resolveMessageToolCalls(agent, message) {
+    const all = agent.toolCalls();
+    if (message && message.role === 'assistant') {
+        if (message.toolCallIds && message.toolCallIds.length > 0) {
+            return message.toolCallIds
+                .map((id) => all.find((tc) => tc.id === id))
+                .filter((x) => !!x);
+        }
+        if (Array.isArray(message.content)) {
+            const blocks = message.content.filter((b) => b.type === 'tool_use');
+            return blocks
+                .map((b) => all.find((tc) => tc.id === b.id))
+                .filter((x) => !!x);
+        }
+        return [];
+    }
+    return all;
+}
+
 // libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts
 // SPDX-License-Identifier: MIT
 class ChatToolCallsComponent {
@@ -4175,30 +4208,7 @@ class ChatToolCallsComponent {
         }
         return map;
     }, ...(ngDevMode ? [{ debugName: "templateRegistry" }] : []));
-    toolCalls = computed(() => {
-        const msg = this.message();
-        if (msg && msg.role === 'assistant') {
-            const all = this.agent().toolCalls();
-            // Prefer adapter-provided `toolCallIds` (LangGraph populates it from
-            // raw `tool_calls`). This is the per-message scope that prevents
-            // every AI bubble from re-rendering the entire thread's tool-call
-            // list when content is a flat string (the LangGraph adapter's
-            // default — extractTextContent reduces complex content to string).
-            if (msg.toolCallIds && msg.toolCallIds.length > 0) {
-                return msg.toolCallIds.map(id => all.find(tc => tc.id === id)).filter((x) => !!x);
-            }
-            // Anthropic-style content-block path: extract tool_use IDs inline.
-            if (Array.isArray(msg.content)) {
-                const blocks = msg.content.filter((b) => b.type === 'tool_use');
-                return blocks.map(b => all.find(tc => tc.id === b.id)).filter((x) => !!x);
-            }
-            // Assistant message provided but no tool-call linkage available:
-            // this message didn't emit any tool calls. Return empty.
-            return [];
-        }
-        // No message context at all (e.g. agent-level pinning) → global list.
-        return this.agent().toolCalls();
-    }, ...(ngDevMode ? [{ debugName: "toolCalls" }] : []));
+    toolCalls = computed(() => resolveMessageToolCalls(this.agent(), this.message()), ...(ngDevMode ? [{ debugName: "toolCalls" }] : []));
     groups = computed(() => {
         const excludeSet = new Set(this.excludeToolNames());
         const calls = this.toolCalls().filter(tc => !excludeSet.has(tc.name));
@@ -4314,6 +4324,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
   `, styles: [":host{display:block;margin-bottom:20px}.ctc__group{border:1px solid var(--ngaf-chat-separator);border-radius:var(--ngaf-chat-radius-card);margin:0 0 4px}.ctc__group-header{display:flex;align-items:center;gap:.5rem;width:100%;padding:8px 12px;background:transparent;border:0;font:inherit;color:var(--ngaf-chat-text);cursor:pointer;text-align:left}.ctc__group-chevron{width:10px;height:10px;transition:transform .12s ease}.ctc__group[data-expanded=true] .ctc__group-chevron{transform:rotate(90deg)}.ctc__group-body{padding:0 12px 8px;border-top:1px solid var(--ngaf-chat-separator)}\n"] }]
         }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], grouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouping", required: false }] }], groupSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSummary", required: false }] }], excludeToolNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeToolNames", required: false }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ChatToolCallTemplateDirective), { isSignal: true }] }] } });
 
+// SPDX-License-Identifier: MIT
+const CHAT_GENERATIVE_UI_STYLES = `
+  :host {
+    display: block;
+    color: var(--ngaf-chat-text);
+    font-size: var(--ngaf-chat-font-size);
+    line-height: var(--ngaf-chat-line-height);
+  }
+  .chat-generative-ui__error {
+    color: var(--ngaf-chat-error-text);
+    background: var(--ngaf-chat-error-bg);
+    border: 1px solid var(--ngaf-chat-error-border);
+    border-radius: var(--ngaf-chat-radius-card);
+    padding: 8px 12px;
+    font-size: var(--ngaf-chat-font-size-sm);
+  }
+`;
+
+// libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts
+// SPDX-License-Identifier: MIT
+class ChatGenerativeUiComponent {
+    spec = input(null, ...(ngDevMode ? [{ debugName: "spec" }] : []));
+    registry = input(undefined, ...(ngDevMode ? [{ debugName: "registry" }] : []));
+    store = input(undefined, ...(ngDevMode ? [{ debugName: "store" }] : []));
+    handlers = input(undefined, ...(ngDevMode ? [{ debugName: "handlers" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    events = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatGenerativeUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatGenerativeUiComponent, isStandalone: true, selector: "chat-generative-ui", inputs: { spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null }, registry: { classPropertyName: "registry", publicName: "registry", isSignal: true, isRequired: false, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, handlers: { classPropertyName: "handlers", publicName: "handlers", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { events: "events" }, ngImport: i0, template: `
+    @if (spec()) {
+      <render-spec
+        [spec]="spec()"
+        [registry]="registry()"
+        [store]="store()"
+        [handlers]="handlers()"
+        [loading]="loading()"
+        (events)="events.emit($event)"
+      />
+    }
+  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block;color:var(--ngaf-chat-text);font-size:var(--ngaf-chat-font-size);line-height:var(--ngaf-chat-line-height)}.chat-generative-ui__error{color:var(--ngaf-chat-error-text);background:var(--ngaf-chat-error-bg);border:1px solid var(--ngaf-chat-error-border);border-radius:var(--ngaf-chat-radius-card);padding:8px 12px;font-size:var(--ngaf-chat-font-size-sm)}\n"], dependencies: [{ kind: "component", type: RenderSpecComponent, selector: "render-spec", inputs: ["spec", "registry", "store", "functions", "handlers", "loading"], outputs: ["events"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatGenerativeUiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-generative-ui', standalone: true, imports: [RenderSpecComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (spec()) {
+      <render-spec
+        [spec]="spec()"
+        [registry]="registry()"
+        [store]="store()"
+        [handlers]="handlers()"
+        [loading]="loading()"
+        (events)="events.emit($event)"
+      />
+    }
+  `, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block;color:var(--ngaf-chat-text);font-size:var(--ngaf-chat-font-size);line-height:var(--ngaf-chat-line-height)}.chat-generative-ui__error{color:var(--ngaf-chat-error-text);background:var(--ngaf-chat-error-bg);border:1px solid var(--ngaf-chat-error-border);border-radius:var(--ngaf-chat-radius-card);padding:8px 12px;font-size:var(--ngaf-chat-font-size-sm)}\n"] }]
+        }], propDecorators: { spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }], registry: [{ type: i0.Input, args: [{ isSignal: true, alias: "registry", required: false }] }], store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], handlers: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlers", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], events: [{ type: i0.Output, args: ["events"] }] } });
+
+// libs/chat/src/lib/primitives/chat-tool-views/chat-tool-views.component.ts
+// SPDX-License-Identifier: MIT
+/**
+ * Renders a frontend component for a tool call by reusing the chat
+ * composition's `views` registry. A tool call whose `name` matches a
+ * registry key is bridged into a synthetic one-element render spec
+ * (`{ root: name, elements: { [name]: { type: name, props } } }`) and
+ * rendered through the existing render-spec pipeline.
+ *
+ * Props merge the live `args` (present while the call streams) with the
+ * `result` (on completion) and always include `status`, so a view
+ * component can show its own loading/empty/error states. `RenderElement`
+ * filters props down to the component's declared inputs, so extra keys
+ * (and a `status` a component chooses not to declare) are harmless.
+ */
+class ChatToolViewsComponent {
+    agent = input.required(...(ngDevMode ? [{ debugName: "agent" }] : []));
+    message = input(undefined, ...(ngDevMode ? [{ debugName: "message" }] : []));
+    views = input(undefined, ...(ngDevMode ? [{ debugName: "views" }] : []));
+    store = input(undefined, ...(ngDevMode ? [{ debugName: "store" }] : []));
+    handlers = input({}, ...(ngDevMode ? [{ debugName: "handlers" }] : []));
+    registry = computed(() => {
+        const v = this.views();
+        return v ? toRenderRegistry(v) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "registry" }] : []));
+    toolViews = computed(() => {
+        const v = this.views();
+        if (!v)
+            return [];
+        const names = new Set(Object.keys(v));
+        return resolveMessageToolCalls(this.agent(), this.message())
+            .filter((tc) => names.has(tc.name))
+            .map((tc) => ({ id: tc.id, loading: tc.status === 'running', spec: toToolViewSpec(tc) }));
+    }, ...(ngDevMode ? [{ debugName: "toolViews" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatToolViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatToolViewsComponent, isStandalone: true, selector: "chat-tool-views", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, handlers: { classPropertyName: "handlers", publicName: "handlers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @for (view of toolViews(); track view.id) {
+      <chat-generative-ui
+        [spec]="view.spec"
+        [registry]="registry()"
+        [store]="store()"
+        [handlers]="handlers()"
+        [loading]="view.loading"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ChatGenerativeUiComponent, selector: "chat-generative-ui", inputs: ["spec", "registry", "store", "handlers", "loading"], outputs: ["events"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatToolViewsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'chat-tool-views',
+                    standalone: true,
+                    imports: [ChatGenerativeUiComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @for (view of toolViews(); track view.id) {
+      <chat-generative-ui
+        [spec]="view.spec"
+        [registry]="registry()"
+        [store]="store()"
+        [handlers]="handlers()"
+        [loading]="view.loading"
+      />
+    }
+  `,
+                }]
+        }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], handlers: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlers", required: false }] }] } });
+/** Wraps a tool call into a synthetic single-element render spec. */
+function toToolViewSpec(tc) {
+    const args = isRecord$2(tc.args) ? tc.args : {};
+    const result = isRecord$2(tc.result) ? tc.result : {};
+    return {
+        root: tc.name,
+        elements: {
+            [tc.name]: {
+                type: tc.name,
+                props: { ...args, ...result, status: tc.status },
+            },
+        },
+    };
+}
+function isRecord$2(v) {
+    return typeof v === 'object' && v !== null && !Array.isArray(v);
+}
+
 // libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.ts
 // SPDX-License-Identifier: MIT
 /**
@@ -5783,63 +5935,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                 }]
         }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], checkpointSelected: [{ type: i0.Output, args: ["checkpointSelected"] }], templateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
-// SPDX-License-Identifier: MIT
-const CHAT_GENERATIVE_UI_STYLES = `
-  :host {
-    display: block;
-    color: var(--ngaf-chat-text);
-    font-size: var(--ngaf-chat-font-size);
-    line-height: var(--ngaf-chat-line-height);
-  }
-  .chat-generative-ui__error {
-    color: var(--ngaf-chat-error-text);
-    background: var(--ngaf-chat-error-bg);
-    border: 1px solid var(--ngaf-chat-error-border);
-    border-radius: var(--ngaf-chat-radius-card);
-    padding: 8px 12px;
-    font-size: var(--ngaf-chat-font-size-sm);
-  }
-`;
-
-// libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts
-// SPDX-License-Identifier: MIT
-class ChatGenerativeUiComponent {
-    spec = input(null, ...(ngDevMode ? [{ debugName: "spec" }] : []));
-    registry = input(undefined, ...(ngDevMode ? [{ debugName: "registry" }] : []));
-    store = input(undefined, ...(ngDevMode ? [{ debugName: "store" }] : []));
-    handlers = input(undefined, ...(ngDevMode ? [{ debugName: "handlers" }] : []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    events = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatGenerativeUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatGenerativeUiComponent, isStandalone: true, selector: "chat-generative-ui", inputs: { spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null }, registry: { classPropertyName: "registry", publicName: "registry", isSignal: true, isRequired: false, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, handlers: { classPropertyName: "handlers", publicName: "handlers", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { events: "events" }, ngImport: i0, template: `
-    @if (spec()) {
-      <render-spec
-        [spec]="spec()"
-        [registry]="registry()"
-        [store]="store()"
-        [handlers]="handlers()"
-        [loading]="loading()"
-        (events)="events.emit($event)"
-      />
-    }
-  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block;color:var(--ngaf-chat-text);font-size:var(--ngaf-chat-font-size);line-height:var(--ngaf-chat-line-height)}.chat-generative-ui__error{color:var(--ngaf-chat-error-text);background:var(--ngaf-chat-error-bg);border:1px solid var(--ngaf-chat-error-border);border-radius:var(--ngaf-chat-radius-card);padding:8px 12px;font-size:var(--ngaf-chat-font-size-sm)}\n"], dependencies: [{ kind: "component", type: RenderSpecComponent, selector: "render-spec", inputs: ["spec", "registry", "store", "functions", "handlers", "loading"], outputs: ["events"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatGenerativeUiComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'chat-generative-ui', standalone: true, imports: [RenderSpecComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (spec()) {
-      <render-spec
-        [spec]="spec()"
-        [registry]="registry()"
-        [store]="store()"
-        [handlers]="handlers()"
-        [loading]="loading()"
-        (events)="events.emit($event)"
-      />
-    }
-  `, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block;color:var(--ngaf-chat-text);font-size:var(--ngaf-chat-font-size);line-height:var(--ngaf-chat-line-height)}.chat-generative-ui__error{color:var(--ngaf-chat-error-text);background:var(--ngaf-chat-error-bg);border:1px solid var(--ngaf-chat-error-border);border-radius:var(--ngaf-chat-radius-card);padding:8px 12px;font-size:var(--ngaf-chat-font-size-sm)}\n"] }]
-        }], propDecorators: { spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }], registry: [{ type: i0.Input, args: [{ isSignal: true, alias: "registry", required: false }] }], store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], handlers: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlers", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], events: [{ type: i0.Output, args: ["events"] }] } });
-
 // libs/chat/src/lib/styles/chat-welcome.styles.ts
 // SPDX-License-Identifier: MIT
 const CHAT_WELCOME_STYLES = `
@@ -7695,7 +7790,7 @@ function isStructurallyComplete(env) {
  * message, so the chat composition can render "Search flights" instead
  * of a raw `{"version":"v1","action":...}` JSON dump as a user bubble.
  *
- * Per the A2UI v0.9 spec, action messages flow on the client → agent
+ * Per the A2UI spec, action messages flow on the client → agent
  * return channel and are framed as typed events (closer to tool calls
  * than user utterances). The spec is silent on chat-bubble rendering;
  * Google's "A2UI in Practice" article and the Stream Chat reference
@@ -7895,6 +7990,15 @@ class ChatComponent {
         const v = this.views();
         return v ? toRenderRegistry(v) : undefined;
     }, ...(ngDevMode ? [{ debugName: "renderRegistry" }] : []));
+    /** Tool names that have a registered view (keys of the `views` registry).
+     *  These render as inline tool-views and are excluded from the default
+     *  tool-call card so they don't render twice. */
+    viewToolNames = computed(() => Object.keys(this.views() ?? {}), ...(ngDevMode ? [{ debugName: "viewToolNames" }] : []));
+    /** Union of GenUI dispatcher tool names and registered view tool names. */
+    excludedToolNames = computed(() => [
+        ...this.genuiToolNames(),
+        ...this.viewToolNames(),
+    ], ...(ngDevMode ? [{ debugName: "excludedToolNames" }] : []));
     messageContent = messageContent;
     /**
      * Renderable content for a human-role message bubble. Most human
@@ -7903,7 +8007,7 @@ class ChatComponent {
      * on a rendered surface) flow through the same submit channel and
      * land in the message stream as a HumanMessage whose content is a
      * JSON-serialized `A2uiActionMessage`. Showing the raw JSON as if
-     * the user typed it leaks the protocol; per the A2UI v0.9 spec
+     * the user typed it leaks the protocol; per the A2UI spec
      * those events resemble tool calls more than user utterances.
      *
      * `a2uiActionLabel` returns a short human-readable label for
@@ -8015,6 +8119,38 @@ class ChatComponent {
                 store.update(event.data);
             });
         });
+        // Sync the agent STATE signal into the render store. AG-UI delivers
+        // backend data as agent shared state (STATE_SNAPSHOT/STATE_DELTA); other
+        // adapters expose graph state via the same `state()` signal. The render
+        // store keys are JSON pointers, so map each top-level state key `k` to
+        // `/k`. Exclude `messages` (carried in the snapshot but irrelevant to the
+        // render store and large). Fires for any adapter whose `state()` carries
+        // non-message keys; no-op when no render store is active. Coexists with
+        // the events$ `state_update` path above (both merge into the same store).
+        effect(() => {
+            let agentRef;
+            try {
+                agentRef = this.agent();
+            }
+            catch {
+                return;
+            }
+            const stateFn = agentRef.state;
+            if (typeof stateFn !== 'function')
+                return;
+            const state = stateFn.call(agentRef);
+            const store = this.resolvedStore();
+            if (!store || state == null || typeof state !== 'object' || Array.isArray(state))
+                return;
+            const updates = {};
+            for (const [k, v] of Object.entries(state)) {
+                if (k === 'messages')
+                    continue;
+                updates['/' + k] = v;
+            }
+            if (Object.keys(updates).length > 0)
+                store.update(updates);
+        });
         // Spec 4: flip CHAT_LIFECYCLE.firstMessageSent when the agent's stream
         // starts, regardless of submit path (input-bound, programmatic, suggestion-
         // click). Sticky — guarded so we never re-set a flag that's already true.
@@ -8419,11 +8555,18 @@ class ChatComponent {
                       [durationMs]="message.reasoningDurationMs"
                     />
                   }
-                  <chat-tool-calls [agent]="agent()" [message]="message" [excludeToolNames]="genuiToolNames()">
+                  <chat-tool-calls [agent]="agent()" [message]="message" [excludeToolNames]="excludedToolNames()">
                     <ng-container ngProjectAs="[chatToolCallTemplate]">
                       <ng-content select="[chatToolCallTemplate]" />
                     </ng-container>
                   </chat-tool-calls>
+                  <chat-tool-views
+                    [agent]="agent()"
+                    [message]="message"
+                    [views]="views()"
+                    [store]="resolvedStore()"
+                    [handlers]="handlers()"
+                  />
                   <chat-subagents [agent]="agent()" />
                   @if (classified.markdown(); as md) {
                     <chat-streaming-md [content]="md" [streaming]="agent().isLoading() && i === agent().messages().length - 1" />
@@ -8506,7 +8649,7 @@ class ChatComponent {
       </div>
     </div>
     }
-  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;max-height:100%;overflow:hidden;background:var(--ngaf-chat-bg)}:host>chat-welcome{display:flex;flex:1 1 auto;width:100%}.chat-shell{display:flex;flex:1;min-height:0;overflow:hidden}.chat-shell__sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--ngaf-chat-separator);background:var(--ngaf-chat-surface-alt);overflow-y:auto;display:none}@media(min-width:768px){.chat-shell__sidebar{display:block}}.chat-shell__main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}.chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--ngaf-chat-text-muted);text-align:center;flex:1;min-height:0}.chat-empty[hidden]{display:none}.chat-empty__title{font-size:1.125rem;font-weight:500;color:var(--ngaf-chat-text);margin:0}.chat-empty__sub{margin:0;font-size:var(--ngaf-chat-font-size-sm)}.chat-scroll{flex:1;min-height:0;overflow-y:auto;padding-top:var(--ngaf-chat-edge-pad)}.chat-scroll::-webkit-scrollbar{width:6px}.chat-scroll::-webkit-scrollbar-thumb{background:var(--ngaf-chat-separator);border-radius:10px}[chatFooter]{padding-bottom:var(--ngaf-chat-edge-pad)}.chat-footer-wrap{position:relative}\n"], dependencies: [{ kind: "component", type: ChatWindowComponent, selector: "chat-window" }, { kind: "component", type: ChatMessageListComponent, selector: "chat-message-list", inputs: ["agent"] }, { kind: "directive", type: MessageTemplateDirective, selector: "ng-template[chatMessageTemplate]", inputs: ["chatMessageTemplate"] }, { kind: "component", type: ChatMessageComponent, selector: "chat-message", inputs: ["role", "current", "streaming", "prevRole", "message"] }, { kind: "component", type: ChatInputComponent, selector: "chat-input", inputs: ["agent", "submitOnEnter", "placeholder", "showStopButton"], outputs: ["submitted", "stopped"] }, { kind: "component", type: ChatTypingIndicatorComponent, selector: "chat-typing-indicator", inputs: ["agent"] }, { kind: "component", type: ChatErrorComponent, selector: "chat-error", inputs: ["agent"] }, { kind: "component", type: ChatThreadListComponent, selector: "chat-thread-list", inputs: ["threads", "activeThreadId", "showNewThreadButton", "actions", "mode", "projects"], outputs: ["threadSelected", "newThreadRequested"] }, { kind: "component", type: ChatGenerativeUiComponent, selector: "chat-generative-ui", inputs: ["spec", "registry", "store", "handlers", "loading"], outputs: ["events"] }, { kind: "component", type: ChatStreamingMdComponent, selector: "chat-streaming-md", inputs: ["content", "streaming", "viewRegistry"] }, { kind: "component", type: ChatToolCallsComponent, selector: "chat-tool-calls", inputs: ["agent", "message", "grouping", "groupSummary", "excludeToolNames"] }, { kind: "component", type: ChatSubagentsComponent, selector: "chat-subagents", inputs: ["agent"] }, { kind: "component", type: A2uiSurfaceComponent, selector: "a2ui-surface", inputs: ["surface", "state", "catalog", "handlers", "surfaceFallback"], outputs: ["events", "action"] }, { kind: "component", type: ChatMessageActionsComponent, selector: "chat-message-actions", inputs: ["content", "disabled"], outputs: ["regenerate", "rate", "contentCopied"] }, { kind: "component", type: ChatWelcomeComponent, selector: "chat-welcome" }, { kind: "component", type: ChatSelectComponent, selector: "chat-select", inputs: ["options", "value", "placeholder", "disabled", "menuLabel"], outputs: ["valueChange"] }, { kind: "component", type: ChatReasoningComponent, selector: "chat-reasoning", inputs: ["content", "isStreaming", "durationMs", "label", "defaultExpanded"] }, { kind: "component", type: ChatScrollBubbleComponent, selector: "chat-scroll-bubble", inputs: ["mode"], outputs: ["clicked"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;max-height:100%;overflow:hidden;background:var(--ngaf-chat-bg)}:host>chat-welcome{display:flex;flex:1 1 auto;width:100%}.chat-shell{display:flex;flex:1;min-height:0;overflow:hidden}.chat-shell__sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--ngaf-chat-separator);background:var(--ngaf-chat-surface-alt);overflow-y:auto;display:none}@media(min-width:768px){.chat-shell__sidebar{display:block}}.chat-shell__main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}.chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--ngaf-chat-text-muted);text-align:center;flex:1;min-height:0}.chat-empty[hidden]{display:none}.chat-empty__title{font-size:1.125rem;font-weight:500;color:var(--ngaf-chat-text);margin:0}.chat-empty__sub{margin:0;font-size:var(--ngaf-chat-font-size-sm)}.chat-scroll{flex:1;min-height:0;overflow-y:auto;padding-top:var(--ngaf-chat-edge-pad)}.chat-scroll::-webkit-scrollbar{width:6px}.chat-scroll::-webkit-scrollbar-thumb{background:var(--ngaf-chat-separator);border-radius:10px}[chatFooter]{padding-bottom:var(--ngaf-chat-edge-pad)}.chat-footer-wrap{position:relative}\n"], dependencies: [{ kind: "component", type: ChatWindowComponent, selector: "chat-window" }, { kind: "component", type: ChatMessageListComponent, selector: "chat-message-list", inputs: ["agent"] }, { kind: "directive", type: MessageTemplateDirective, selector: "ng-template[chatMessageTemplate]", inputs: ["chatMessageTemplate"] }, { kind: "component", type: ChatMessageComponent, selector: "chat-message", inputs: ["role", "current", "streaming", "prevRole", "message"] }, { kind: "component", type: ChatInputComponent, selector: "chat-input", inputs: ["agent", "submitOnEnter", "placeholder", "showStopButton"], outputs: ["submitted", "stopped"] }, { kind: "component", type: ChatTypingIndicatorComponent, selector: "chat-typing-indicator", inputs: ["agent"] }, { kind: "component", type: ChatErrorComponent, selector: "chat-error", inputs: ["agent"] }, { kind: "component", type: ChatThreadListComponent, selector: "chat-thread-list", inputs: ["threads", "activeThreadId", "showNewThreadButton", "actions", "mode", "projects"], outputs: ["threadSelected", "newThreadRequested"] }, { kind: "component", type: ChatGenerativeUiComponent, selector: "chat-generative-ui", inputs: ["spec", "registry", "store", "handlers", "loading"], outputs: ["events"] }, { kind: "component", type: ChatStreamingMdComponent, selector: "chat-streaming-md", inputs: ["content", "streaming", "viewRegistry"] }, { kind: "component", type: ChatToolCallsComponent, selector: "chat-tool-calls", inputs: ["agent", "message", "grouping", "groupSummary", "excludeToolNames"] }, { kind: "component", type: ChatToolViewsComponent, selector: "chat-tool-views", inputs: ["agent", "message", "views", "store", "handlers"] }, { kind: "component", type: ChatSubagentsComponent, selector: "chat-subagents", inputs: ["agent"] }, { kind: "component", type: A2uiSurfaceComponent, selector: "a2ui-surface", inputs: ["surface", "state", "catalog", "handlers", "surfaceFallback"], outputs: ["events", "action"] }, { kind: "component", type: ChatMessageActionsComponent, selector: "chat-message-actions", inputs: ["content", "disabled"], outputs: ["regenerate", "rate", "contentCopied"] }, { kind: "component", type: ChatWelcomeComponent, selector: "chat-welcome" }, { kind: "component", type: ChatSelectComponent, selector: "chat-select", inputs: ["options", "value", "placeholder", "disabled", "menuLabel"], outputs: ["valueChange"] }, { kind: "component", type: ChatReasoningComponent, selector: "chat-reasoning", inputs: ["content", "isStreaming", "durationMs", "label", "defaultExpanded"] }, { kind: "component", type: ChatScrollBubbleComponent, selector: "chat-scroll-bubble", inputs: ["mode"], outputs: ["clicked"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
@@ -8515,7 +8658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                         ChatWindowComponent, ChatMessageListComponent, MessageTemplateDirective, ChatMessageComponent,
                         ChatInputComponent, ChatTypingIndicatorComponent, ChatErrorComponent,
                         ChatThreadListComponent, ChatGenerativeUiComponent,
-                        ChatStreamingMdComponent, ChatToolCallsComponent, ChatSubagentsComponent, A2uiSurfaceComponent,
+                        ChatStreamingMdComponent, ChatToolCallsComponent, ChatToolViewsComponent, ChatSubagentsComponent, A2uiSurfaceComponent,
                         ChatMessageActionsComponent, ChatWelcomeComponent, ChatSelectComponent, ChatReasoningComponent,
                         ChatScrollBubbleComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -8575,11 +8718,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                       [durationMs]="message.reasoningDurationMs"
                     />
                   }
-                  <chat-tool-calls [agent]="agent()" [message]="message" [excludeToolNames]="genuiToolNames()">
+                  <chat-tool-calls [agent]="agent()" [message]="message" [excludeToolNames]="excludedToolNames()">
                     <ng-container ngProjectAs="[chatToolCallTemplate]">
                       <ng-content select="[chatToolCallTemplate]" />
                     </ng-container>
                   </chat-tool-calls>
+                  <chat-tool-views
+                    [agent]="agent()"
+                    [message]="message"
+                    [views]="views()"
+                    [store]="resolvedStore()"
+                    [handlers]="handlers()"
+                  />
                   <chat-subagents [agent]="agent()" />
                   @if (classified.markdown(); as md) {
                     <chat-streaming-md [content]="md" [streaming]="agent().isLoading() && i === agent().messages().length - 1" />
@@ -10117,76 +10267,155 @@ class ChatInterruptPanelComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatInterruptPanelComponent, isStandalone: true, selector: "chat-interrupt-panel", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
     @if (interrupt()) {
       <div role="alert" class="chat-interrupt-panel">
-        <p class="chat-interrupt-panel__title">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
-          Agent paused
+        <p class="chat-interrupt-panel__eyebrow">
+          <span class="chat-interrupt-panel__dot" aria-hidden="true"></span>
+          Agent paused — review needed
         </p>
         <p class="chat-interrupt-panel__body">{{ interruptReason() }}</p>
-
         <div class="chat-interrupt-panel__actions">
-          <button
-            type="button"
-            class="chat-interrupt-panel__btn chat-interrupt-panel__btn--primary"
-            (click)="action.emit('accept')"
-          >Accept</button>
-          <button
-            type="button"
-            class="chat-interrupt-panel__btn chat-interrupt-panel__btn--secondary"
-            (click)="action.emit('edit')"
-          >Edit</button>
-          <button
-            type="button"
-            class="chat-interrupt-panel__btn chat-interrupt-panel__btn--secondary"
-            (click)="action.emit('respond')"
-          >Respond</button>
-          <button
-            type="button"
-            class="chat-interrupt-panel__btn chat-interrupt-panel__btn--tertiary"
-            (click)="action.emit('ignore')"
-          >Ignore</button>
+          <button type="button" class="btn btn-primary" (click)="action.emit('accept')">Accept</button>
+          <button type="button" class="btn btn-secondary" (click)="action.emit('edit')">Edit</button>
+          <button type="button" class="btn btn-secondary" (click)="action.emit('respond')">Respond</button>
+          <button type="button" class="btn btn-text" (click)="action.emit('ignore')">Ignore</button>
         </div>
       </div>
     }
-  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ".chat-interrupt-panel{background:var(--ngaf-chat-surface);color:var(--ngaf-chat-text);border:1px solid var(--ngaf-chat-separator);border-left:3px solid var(--ngaf-chat-warning-text);border-radius:var(--ngaf-chat-radius-card);padding:12px 16px;font-size:var(--ngaf-chat-font-size-sm)}.chat-interrupt-panel__title{font-weight:600;margin:0 0 4px;display:flex;align-items:center;gap:6px;color:var(--ngaf-chat-text)}.chat-interrupt-panel__title svg{color:var(--ngaf-chat-warning-text)}.chat-interrupt-panel__body{margin:0 0 12px;color:var(--ngaf-chat-text-muted);white-space:pre-wrap}.chat-interrupt-panel__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.chat-interrupt-panel__btn{padding:6px 14px;font-size:var(--ngaf-chat-font-size-sm);border-radius:var(--ngaf-chat-radius-button);border:0;cursor:pointer;font-weight:500;transition:transform .2s ease,opacity .2s ease}.chat-interrupt-panel__btn:hover{transform:scale(1.03)}.chat-interrupt-panel__btn--primary{background:var(--ngaf-chat-primary);color:var(--ngaf-chat-on-primary)}.chat-interrupt-panel__btn--secondary{background:transparent;color:var(--ngaf-chat-text);border:1px solid var(--ngaf-chat-separator)}.chat-interrupt-panel__btn--tertiary{background:transparent;color:var(--ngaf-chat-text-muted);padding:6px 8px;font-size:var(--ngaf-chat-font-size-sm)}.chat-interrupt-panel__btn--tertiary:hover{color:var(--ngaf-chat-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ".chat-interrupt-panel{background:var(--ngaf-chat-surface);color:var(--ngaf-chat-text);border:1px solid var(--ngaf-chat-separator);border-radius:var(--ngaf-chat-radius-card);padding:14px 16px;font-size:var(--ngaf-chat-font-size-sm)}.chat-interrupt-panel__eyebrow{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ngaf-chat-warning-text);margin:0 0 8px;display:flex;align-items:center;gap:6px}.chat-interrupt-panel__dot{width:6px;height:6px;border-radius:999px;background:var(--ngaf-chat-warning-text);flex:0 0 6px}.chat-interrupt-panel__body{margin:0 0 12px;color:var(--ngaf-chat-text);white-space:pre-wrap}.chat-interrupt-panel__actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.btn{border:0;padding:6px 14px;border-radius:var(--ngaf-chat-radius-button);font-size:12px;font-weight:500;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.btn:hover{transform:scale(1.03)}.btn-primary{background:var(--ngaf-chat-primary);color:var(--ngaf-chat-on-primary)}.btn-secondary{background:transparent;color:var(--ngaf-chat-text);border:1px solid var(--ngaf-chat-separator)}.btn-text{background:transparent;color:var(--ngaf-chat-text-muted);padding:6px 10px}.btn-text:hover{color:var(--ngaf-chat-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatInterruptPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'chat-interrupt-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (interrupt()) {
       <div role="alert" class="chat-interrupt-panel">
-        <p class="chat-interrupt-panel__title">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
-          Agent paused
+        <p class="chat-interrupt-panel__eyebrow">
+          <span class="chat-interrupt-panel__dot" aria-hidden="true"></span>
+          Agent paused — review needed
         </p>
         <p class="chat-interrupt-panel__body">{{ interruptReason() }}</p>
-
         <div class="chat-interrupt-panel__actions">
-          <button
-            type="button"
-            class="chat-interrupt-panel__btn chat-interrupt-panel__btn--primary"
-            (click)="action.emit('accept')"
-          >Accept</button>
-          <button
-            type="button"
-            class="chat-interrupt-panel__btn chat-interrupt-panel__btn--secondary"
-            (click)="action.emit('edit')"
-          >Edit</button>
-          <button
-            type="button"
-            class="chat-interrupt-panel__btn chat-interrupt-panel__btn--secondary"
-            (click)="action.emit('respond')"
-          >Respond</button>
-          <button
-            type="button"
-            class="chat-interrupt-panel__btn chat-interrupt-panel__btn--tertiary"
-            (click)="action.emit('ignore')"
-          >Ignore</button>
+          <button type="button" class="btn btn-primary" (click)="action.emit('accept')">Accept</button>
+          <button type="button" class="btn btn-secondary" (click)="action.emit('edit')">Edit</button>
+          <button type="button" class="btn btn-secondary" (click)="action.emit('respond')">Respond</button>
+          <button type="button" class="btn btn-text" (click)="action.emit('ignore')">Ignore</button>
         </div>
       </div>
     }
-  `, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ".chat-interrupt-panel{background:var(--ngaf-chat-surface);color:var(--ngaf-chat-text);border:1px solid var(--ngaf-chat-separator);border-left:3px solid var(--ngaf-chat-warning-text);border-radius:var(--ngaf-chat-radius-card);padding:12px 16px;font-size:var(--ngaf-chat-font-size-sm)}.chat-interrupt-panel__title{font-weight:600;margin:0 0 4px;display:flex;align-items:center;gap:6px;color:var(--ngaf-chat-text)}.chat-interrupt-panel__title svg{color:var(--ngaf-chat-warning-text)}.chat-interrupt-panel__body{margin:0 0 12px;color:var(--ngaf-chat-text-muted);white-space:pre-wrap}.chat-interrupt-panel__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.chat-interrupt-panel__btn{padding:6px 14px;font-size:var(--ngaf-chat-font-size-sm);border-radius:var(--ngaf-chat-radius-button);border:0;cursor:pointer;font-weight:500;transition:transform .2s ease,opacity .2s ease}.chat-interrupt-panel__btn:hover{transform:scale(1.03)}.chat-interrupt-panel__btn--primary{background:var(--ngaf-chat-primary);color:var(--ngaf-chat-on-primary)}.chat-interrupt-panel__btn--secondary{background:transparent;color:var(--ngaf-chat-text);border:1px solid var(--ngaf-chat-separator)}.chat-interrupt-panel__btn--tertiary{background:transparent;color:var(--ngaf-chat-text-muted);padding:6px 8px;font-size:var(--ngaf-chat-font-size-sm)}.chat-interrupt-panel__btn--tertiary:hover{color:var(--ngaf-chat-text)}\n"] }]
+  `, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ".chat-interrupt-panel{background:var(--ngaf-chat-surface);color:var(--ngaf-chat-text);border:1px solid var(--ngaf-chat-separator);border-radius:var(--ngaf-chat-radius-card);padding:14px 16px;font-size:var(--ngaf-chat-font-size-sm)}.chat-interrupt-panel__eyebrow{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ngaf-chat-warning-text);margin:0 0 8px;display:flex;align-items:center;gap:6px}.chat-interrupt-panel__dot{width:6px;height:6px;border-radius:999px;background:var(--ngaf-chat-warning-text);flex:0 0 6px}.chat-interrupt-panel__body{margin:0 0 12px;color:var(--ngaf-chat-text);white-space:pre-wrap}.chat-interrupt-panel__actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.btn{border:0;padding:6px 14px;border-radius:var(--ngaf-chat-radius-button);font-size:12px;font-weight:500;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.btn:hover{transform:scale(1.03)}.btn-primary{background:var(--ngaf-chat-primary);color:var(--ngaf-chat-on-primary)}.btn-secondary{background:transparent;color:var(--ngaf-chat-text);border:1px solid var(--ngaf-chat-separator)}.btn-text{background:transparent;color:var(--ngaf-chat-text-muted);padding:6px 10px}.btn-text:hover{color:var(--ngaf-chat-text)}\n"] }]
         }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
+// SPDX-License-Identifier: MIT
+class ChatApprovalCardComponent {
+    agent = input.required(...(ngDevMode ? [{ debugName: "agent" }] : []));
+    matchKind = input(undefined, ...(ngDevMode ? [{ debugName: "matchKind" }] : []));
+    title = input('Approval required', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    showEdit = input(false, ...(ngDevMode ? [{ debugName: "showEdit" }] : []));
+    action = output();
+    bodyTemplate = contentChild('body', ...(ngDevMode ? [{ debugName: "bodyTemplate" }] : []));
+    dialogRef = viewChild('dialogEl', ...(ngDevMode ? [{ debugName: "dialogRef" }] : []));
+    interrupt = computed(() => this.agent().interrupt?.(), ...(ngDevMode ? [{ debugName: "interrupt" }] : []));
+    payload = computed(() => {
+        const i = this.interrupt();
+        if (!i)
+            return undefined;
+        const v = i.value;
+        const want = this.matchKind();
+        if (want !== undefined) {
+            if (!v || typeof v !== 'object' || v.kind !== want) {
+                return undefined;
+            }
+        }
+        return v;
+    }, ...(ngDevMode ? [{ debugName: "payload" }] : []));
+    constructor() {
+        effect(() => {
+            const p = this.payload();
+            const dialog = this.dialogRef()?.nativeElement;
+            if (!dialog)
+                return;
+            if (p && !dialog.open) {
+                dialog.showModal();
+            }
+            else if (!p && dialog.open) {
+                dialog.close();
+            }
+        });
+    }
+    emit(action) {
+        this.action.emit(action);
+        // 'approve' and 'cancel' are terminal — they resolve the interrupt, so the
+        // dialog closes. 'edit' is non-terminal: the caller reveals an inline
+        // editor in the body slot and submits the resume itself, so we leave the
+        // dialog open.
+        if (action !== 'edit') {
+            this.closeDialog();
+        }
+    }
+    onCancelEvent(ev) {
+        // Native dialog's cancel event fires on Escape. Treat as cancel.
+        ev.preventDefault();
+        this.action.emit('cancel');
+        this.closeDialog();
+    }
+    closeDialog() {
+        const dialog = this.dialogRef()?.nativeElement;
+        if (!dialog)
+            return;
+        if (dialog.open)
+            dialog.close();
+    }
+    onDialogClose() {
+        // Native close — no-op; emit happens in emit() / onCancelEvent.
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatApprovalCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatApprovalCardComponent, isStandalone: true, selector: "chat-approval-card", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null }, matchKind: { classPropertyName: "matchKind", publicName: "matchKind", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showEdit: { classPropertyName: "showEdit", publicName: "showEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, queries: [{ propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <dialog #dialogEl class="chat-approval-card" (close)="onDialogClose()" (cancel)="onCancelEvent($event)">
+      <div class="chat-approval-card__header">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+        <h4>{{ title() }}</h4>
+      </div>
+      <div class="chat-approval-card__body">
+        @if (bodyTemplate(); as tpl) {
+          @if (payload(); as p) {
+            <ng-container *ngTemplateOutlet="tpl; context: { $implicit: p }"></ng-container>
+          }
+        }
+      </div>
+      <div class="chat-approval-card__actions">
+        <button type="button" class="btn btn-text" (click)="emit('cancel')">Cancel</button>
+        @if (showEdit()) {
+          <button type="button" class="btn btn-secondary" (click)="emit('edit')">Edit</button>
+        }
+        <button type="button" class="btn btn-primary" (click)="emit('approve')">Approve</button>
+      </div>
+    </dialog>
+  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:contents}dialog.chat-approval-card{width:440px;max-width:calc(100vw - 32px);margin:auto;padding:0;border:0;border-radius:12px;background:var(--ngaf-chat-surface);color:var(--ngaf-chat-text);box-shadow:0 20px 50px #0000002e}dialog.chat-approval-card::backdrop{background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.chat-approval-card__header{padding:14px 16px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ngaf-chat-separator)}.chat-approval-card__header h4{margin:0;font-size:14px;font-weight:600;color:var(--ngaf-chat-text)}.chat-approval-card__header svg{color:var(--ngaf-chat-warning-text);width:16px;height:16px;flex:0 0 16px}.chat-approval-card__body{padding:14px 16px;font-size:var(--ngaf-chat-font-size-sm, 13px);color:var(--ngaf-chat-text)}.chat-approval-card__actions{padding:8px 16px 14px;display:flex;gap:6px;justify-content:flex-end;align-items:center}.btn{border:0;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.btn:hover{transform:scale(1.03)}.btn-primary{background:var(--ngaf-chat-primary);color:var(--ngaf-chat-on-primary)}.btn-secondary{background:transparent;color:var(--ngaf-chat-text);border:1px solid var(--ngaf-chat-separator)}.btn-text{background:transparent;color:var(--ngaf-chat-text-muted);padding:6px 10px}.btn-text:hover{color:var(--ngaf-chat-text)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatApprovalCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-approval-card', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <dialog #dialogEl class="chat-approval-card" (close)="onDialogClose()" (cancel)="onCancelEvent($event)">
+      <div class="chat-approval-card__header">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+        <h4>{{ title() }}</h4>
+      </div>
+      <div class="chat-approval-card__body">
+        @if (bodyTemplate(); as tpl) {
+          @if (payload(); as p) {
+            <ng-container *ngTemplateOutlet="tpl; context: { $implicit: p }"></ng-container>
+          }
+        }
+      </div>
+      <div class="chat-approval-card__actions">
+        <button type="button" class="btn btn-text" (click)="emit('cancel')">Cancel</button>
+        @if (showEdit()) {
+          <button type="button" class="btn btn-secondary" (click)="emit('edit')">Edit</button>
+        }
+        <button type="button" class="btn btn-primary" (click)="emit('approve')">Approve</button>
+      </div>
+    </dialog>
+  `, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:contents}dialog.chat-approval-card{width:440px;max-width:calc(100vw - 32px);margin:auto;padding:0;border:0;border-radius:12px;background:var(--ngaf-chat-surface);color:var(--ngaf-chat-text);box-shadow:0 20px 50px #0000002e}dialog.chat-approval-card::backdrop{background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.chat-approval-card__header{padding:14px 16px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ngaf-chat-separator)}.chat-approval-card__header h4{margin:0;font-size:14px;font-weight:600;color:var(--ngaf-chat-text)}.chat-approval-card__header svg{color:var(--ngaf-chat-warning-text);width:16px;height:16px;flex:0 0 16px}.chat-approval-card__body{padding:14px 16px;font-size:var(--ngaf-chat-font-size-sm, 13px);color:var(--ngaf-chat-text)}.chat-approval-card__actions{padding:8px 16px 14px;display:flex;gap:6px;justify-content:flex-end;align-items:center}.btn{border:0;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.btn:hover{transform:scale(1.03)}.btn-primary{background:var(--ngaf-chat-primary);color:var(--ngaf-chat-on-primary)}.btn-secondary{background:transparent;color:var(--ngaf-chat-text);border:1px solid var(--ngaf-chat-separator)}.btn-text{background:transparent;color:var(--ngaf-chat-text-muted);padding:6px 10px}.btn-text:hover{color:var(--ngaf-chat-text)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], matchKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchKind", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEdit", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], bodyTemplate: [{ type: i0.ContentChild, args: ['body', { isSignal: true }] }], dialogRef: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }] } });
+
 // SPDX-License-Identifier: MIT
 let markedParse = null;
 let markedLoadAttempted = false;
@@ -11362,5 +11591,5 @@ function mockAgent(opts = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { A2uiAudioPlayerComponent, A2uiButtonComponent, A2uiCardComponent, A2uiCheckBoxComponent, A2uiColumnComponent, A2uiDateTimeInputComponent, A2uiDividerComponent, A2uiIconComponent, A2uiImageComponent, A2uiListComponent, A2uiModalComponent, A2uiMultipleChoiceComponent, A2uiRowComponent, A2uiSliderComponent, A2uiSurfaceComponent, A2uiTabsComponent, A2uiTextComponent, A2uiTextFieldComponent, A2uiVideoComponent, CHAT_CONFIG, CHAT_LIFECYCLE, CHAT_MARKDOWN_STYLES, ChatCitationCardTemplateDirective, ChatCitationsCardComponent, ChatCitationsComponent, ChatComponent, ChatConfirmDialogComponent, ChatErrorComponent, ChatGenerativeUiComponent, ChatGenuiSkeletonComponent, ChatHistorySearchPaletteComponent, ChatInputComponent, ChatInterruptComponent, ChatInterruptPanelComponent, ChatLauncherButtonComponent, ChatMessageActionsComponent, ChatMessageComponent, ChatMessageListComponent, ChatOverflowMenuComponent, ChatPopupComponent, ChatProjectListComponent, ChatReasoningComponent, ChatScrollBubbleComponent, ChatSelectComponent, ChatSidebarComponent, ChatSidenavComponent, ChatSidenavScrimComponent, ChatStreamingMdComponent, ChatSubagentCardComponent, ChatSubagentsComponent, ChatSuggestionsComponent, ChatThreadListComponent, ChatTimelineComponent, ChatTimelineSliderComponent, ChatToolCallCardComponent, ChatToolCallTemplateDirective, ChatToolCallsComponent, ChatTraceComponent, ChatTypingIndicatorComponent, ChatWelcomeComponent, ChatWelcomeSuggestionComponent, ChatWindowComponent, CitationsResolverService, ICON_AGENT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CHEVRON_UP, ICON_SEND, ICON_TOOL, ICON_WARNING, IS_HEADER_ROW, MARKDOWN_VIEW_REGISTRY, MarkdownAutolinkComponent, MarkdownBlockquoteComponent, MarkdownChildrenComponent, MarkdownCitationReferenceComponent, MarkdownCodeBlockComponent, MarkdownDocumentComponent, MarkdownEmphasisComponent, MarkdownHardBreakComponent, MarkdownHeadingComponent, MarkdownImageComponent, MarkdownInlineCodeComponent, MarkdownLinkComponent, MarkdownListComponent, MarkdownListItemComponent, MarkdownParagraphComponent, MarkdownSoftBreakComponent, MarkdownStrikethroughComponent, MarkdownStrongComponent, MarkdownTableCellComponent, MarkdownTableComponent, MarkdownTableRowComponent, MarkdownTextComponent, MarkdownThematicBreakComponent, MessageTemplateDirective, a2uiBasicCatalog, buildA2uiActionMessage, cacheplaneMarkdownViews, createA2uiSurfaceStore, createContentClassifier, createParseTreeStore, createPartialArgsBridge, emitBinding, extractErrorMessage, formatDuration, getInterrupt, getMessageType, isAssistantMessage, isSystemMessage, isToolMessage, isTyping, isUserMessage, messageContent, mockAgent, normalizeEnvelopeArgs, normalizeViewEntry, provideChat, renderMarkdown, statusColor, submitMessage, surfaceToSpec };
+export { A2uiAudioPlayerComponent, A2uiButtonComponent, A2uiCardComponent, A2uiCheckBoxComponent, A2uiColumnComponent, A2uiDateTimeInputComponent, A2uiDividerComponent, A2uiIconComponent, A2uiImageComponent, A2uiListComponent, A2uiModalComponent, A2uiMultipleChoiceComponent, A2uiRowComponent, A2uiSliderComponent, A2uiSurfaceComponent, A2uiTabsComponent, A2uiTextComponent, A2uiTextFieldComponent, A2uiVideoComponent, CHAT_CONFIG, CHAT_LIFECYCLE, CHAT_MARKDOWN_STYLES, ChatApprovalCardComponent, ChatCitationCardTemplateDirective, ChatCitationsCardComponent, ChatCitationsComponent, ChatComponent, ChatConfirmDialogComponent, ChatErrorComponent, ChatGenerativeUiComponent, ChatGenuiSkeletonComponent, ChatHistorySearchPaletteComponent, ChatInputComponent, ChatInterruptComponent, ChatInterruptPanelComponent, ChatLauncherButtonComponent, ChatMessageActionsComponent, ChatMessageComponent, ChatMessageListComponent, ChatOverflowMenuComponent, ChatPopupComponent, ChatProjectListComponent, ChatReasoningComponent, ChatScrollBubbleComponent, ChatSelectComponent, ChatSidebarComponent, ChatSidenavComponent, ChatSidenavScrimComponent, ChatStreamingMdComponent, ChatSubagentCardComponent, ChatSubagentsComponent, ChatSuggestionsComponent, ChatThreadListComponent, ChatTimelineComponent, ChatTimelineSliderComponent, ChatToolCallCardComponent, ChatToolCallTemplateDirective, ChatToolCallsComponent, ChatToolViewsComponent, ChatTraceComponent, ChatTypingIndicatorComponent, ChatWelcomeComponent, ChatWelcomeSuggestionComponent, ChatWindowComponent, CitationsResolverService, ICON_AGENT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CHEVRON_UP, ICON_SEND, ICON_TOOL, ICON_WARNING, IS_HEADER_ROW, MARKDOWN_VIEW_REGISTRY, MarkdownAutolinkComponent, MarkdownBlockquoteComponent, MarkdownChildrenComponent, MarkdownCitationReferenceComponent, MarkdownCodeBlockComponent, MarkdownDocumentComponent, MarkdownEmphasisComponent, MarkdownHardBreakComponent, MarkdownHeadingComponent, MarkdownImageComponent, MarkdownInlineCodeComponent, MarkdownLinkComponent, MarkdownListComponent, MarkdownListItemComponent, MarkdownParagraphComponent, MarkdownSoftBreakComponent, MarkdownStrikethroughComponent, MarkdownStrongComponent, MarkdownTableCellComponent, MarkdownTableComponent, MarkdownTableRowComponent, MarkdownTextComponent, MarkdownThematicBreakComponent, MessageTemplateDirective, a2uiBasicCatalog, buildA2uiActionMessage, cacheplaneMarkdownViews, createA2uiSurfaceStore, createContentClassifier, createParseTreeStore, createPartialArgsBridge, emitBinding, extractErrorMessage, formatDuration, getInterrupt, getMessageType, isAssistantMessage, isSystemMessage, isToolMessage, isTyping, isUserMessage, messageContent, mockAgent, normalizeEnvelopeArgs, normalizeViewEntry, provideChat, renderMarkdown, statusColor, submitMessage, surfaceToSpec };
 //# sourceMappingURL=threadplane-chat.mjs.map