@threadplane/chat 0.0.47 → 0.0.50

package/fesm2022/threadplane-chat.mjs

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, Directive, contentChildren, computed, ChangeDetectionStrategy, Component, signal, Injectable, ContentChild, effect, output, DOCUMENT, InjectionToken, ViewEncapsulation, viewChild, model, contentChild, ElementRef, DestroyRef, makeEnvironmentProviders, untracked, Injector, ViewContainerRef, SecurityContext } from '@angular/core';
+import { input, inject, TemplateRef, Directive, contentChildren, computed, ChangeDetectionStrategy, Component, signal, Injectable, ContentChild, effect, output, DOCUMENT, InjectionToken, ViewEncapsulation, viewChild, model, contentChild, untracked, ElementRef, DestroyRef, makeEnvironmentProviders, Injector, runInInjectionContext, ViewContainerRef, SecurityContext } from '@angular/core';
 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';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { views, RenderSpecComponent, toRenderRegistry, signalStateStore, withViews, RenderElementComponent, injectRenderHost } from '@threadplane/render';
+export { toRenderRegistry, views, withViews, withoutViews } from '@threadplane/render';
 import { runLicenseCheck, inferNoncommercial, LICENSE_PUBLIC_KEY } from '@threadplane/licensing';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toJSONSchema } from 'zod/v4';
 import { resolveDynamic, getByPointer, isPathRef, setByPointer, createA2uiMessageParser } from '@threadplane/a2ui';
 export { isLiteralBoolean, isLiteralNumber, isLiteralString, isPathRef } from '@threadplane/a2ui';
 import { materialize as materialize$1, createPartialJsonParser } from '@cacheplane/partial-json';
@@ -1598,9 +1597,9 @@ const MARKDOWN_VIEW_REGISTRY = new InjectionToken('MARKDOWN_VIEW_REGISTRY');
  * registry. Each child's `type` is looked up in the registry; the resolved
  * component is rendered with `[node]` bound to that child.
  *
- * Identity-preserving: `track $any(child)` keys on the JS reference of the
- * child node. Because @cacheplane/partial-markdown preserves node identity
- * across pushes, unchanged subtrees never re-render.
+ * Position-stable: `track $index` avoids NG0956 re-creation warnings that
+ * occur when the markdown pipeline re-parses content on every stream delta,
+ * producing new child object references even for unchanged nodes.
  */
 class MarkdownChildrenComponent {
     parent = input.required(...(ngDevMode ? [{ debugName: "parent" }] : []));
@@ -1620,7 +1619,7 @@ class MarkdownChildrenComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownChildrenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: MarkdownChildrenComponent, isStandalone: true, selector: "chat-md-children", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @for (child of children(); track $any(child)) {
+    @for (child of children(); track $index) {
       @let comp = resolve(child);
       @if (comp) {
         <ng-container *ngComponentOutlet="comp; inputs: { node: child }" />
@@ -1636,7 +1635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                     imports: [NgComponentOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @for (child of children(); track $any(child)) {
+    @for (child of children(); track $index) {
       @let comp = resolve(child);
       @if (comp) {
         <ng-container *ngComponentOutlet="comp; inputs: { node: child }" />
@@ -2193,7 +2192,7 @@ class MarkdownTableComponent {
         }
       </thead>
       <tbody>
-        @for (row of bodyRows(); track $any(row)) {
+        @for (row of bodyRows(); track $index) {
           <chat-md-table-row [node]="row" />
         }
       </tbody>
@@ -2215,7 +2214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
         }
       </thead>
       <tbody>
-        @for (row of bodyRows(); track $any(row)) {
+        @for (row of bodyRows(); track $index) {
           <chat-md-table-row [node]="row" />
         }
       </tbody>
@@ -2793,9 +2792,19 @@ class ChatInputComponent {
         if (submitted !== null) {
             this.submitted.emit(submitted);
             this.messageText.set('');
+            const el = this.textareaEl()?.nativeElement;
+            if (el)
+                el.value = '';
             requestAnimationFrame(() => this.textareaEl()?.nativeElement.focus());
         }
     }
+    /** Sync the textarea's value into the signal on user input. A direct
+     *  [value]/(input) pair is used instead of ngModel: NgModel does not
+     *  reliably write a programmatic clear back to the view under zoneless
+     *  + OnPush, leaving sent text visible in the composer (audit F1). */
+    onInput(event) {
+        this.messageText.set(event.target.value);
+    }
     /** Abort the current streaming response (if the adapter supports it). */
     onStop() {
         const a = this.agent();
@@ -2826,15 +2835,15 @@ class ChatInputComponent {
         <textarea
           #textareaEl
           class="chat-input__textarea"
-          [ngModel]="messageText()"
-          (ngModelChange)="messageText.set($event)"
-          name="messageText"
+          [value]="messageText()"
+          (input)="onInput($event)"
           [placeholder]="placeholder()"
           (keydown.enter)="onKeydown($any($event))"
           (compositionstart)="composing.set(true)"
           (compositionend)="composing.set(false)"
           (focus)="focused.set(true)"
           (blur)="focused.set(false)"
+          name="messageText"
           rows="1"
           aria-label="Type a message"
         ></textarea>
@@ -2871,11 +2880,11 @@ class ChatInputComponent {
       </div>
       <ng-content select="[chatInputFooter]" />
     </div>
-  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block;width:100%;padding:0 var(--ngaf-chat-edge-pad);box-sizing:border-box}.chat-input__container{width:100%;max-width:var(--ngaf-chat-max-width);margin:0 auto}.chat-input__pill{display:flex;align-items:center;gap:8px;background:var(--ngaf-chat-surface);border:1px solid var(--ngaf-chat-separator);border-radius:9999px;padding:8px 8px 8px 16px;min-height:56px;box-sizing:border-box}.chat-input__textarea{flex:1 1 auto;border:0;outline:none;resize:none;background:transparent;color:var(--ngaf-chat-text);font:inherit;font-size:1rem;line-height:1.5;padding:0;field-sizing:content;overflow-y:auto}.chat-input__textarea::placeholder{color:var(--ngaf-chat-text-muted)}.chat-input__textarea::-webkit-scrollbar{width:4px}.chat-input__textarea::-webkit-scrollbar-thumb{background:var(--ngaf-chat-separator);border-radius:4px}.chat-input__controls{display:flex;align-items:center;gap:4px;flex:none}.chat-input__send,.chat-input__send--stop{width:36px;height:36px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .15s ease,transform .15s ease,background .15s ease;padding:0}.chat-input__send{background:var(--ngaf-chat-text);color:var(--ngaf-chat-bg)}.chat-input__send:disabled{opacity:.35;cursor:not-allowed;background:var(--ngaf-chat-text-muted)}.chat-input__send:not(:disabled):hover{transform:scale(1.05)}.chat-input__send svg{width:16px;height:16px}.chat-input__send--stop{background:var(--ngaf-chat-text-muted);color:var(--ngaf-chat-bg)}.chat-input__send--stop:hover{transform:scale(1.05)}.chat-input__send--stop svg{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block;width:100%;padding:0 var(--ngaf-chat-edge-pad);box-sizing:border-box}.chat-input__container{width:100%;max-width:var(--ngaf-chat-max-width);margin:0 auto}.chat-input__pill{display:flex;align-items:center;gap:8px;background:var(--ngaf-chat-surface);border:1px solid var(--ngaf-chat-separator);border-radius:9999px;padding:8px 8px 8px 16px;min-height:56px;box-sizing:border-box}.chat-input__textarea{flex:1 1 auto;border:0;outline:none;resize:none;background:transparent;color:var(--ngaf-chat-text);font:inherit;font-size:1rem;line-height:1.5;padding:0;field-sizing:content;overflow-y:auto}.chat-input__textarea::placeholder{color:var(--ngaf-chat-text-muted)}.chat-input__textarea::-webkit-scrollbar{width:4px}.chat-input__textarea::-webkit-scrollbar-thumb{background:var(--ngaf-chat-separator);border-radius:4px}.chat-input__controls{display:flex;align-items:center;gap:4px;flex:none}.chat-input__send,.chat-input__send--stop{width:36px;height:36px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .15s ease,transform .15s ease,background .15s ease;padding:0}.chat-input__send{background:var(--ngaf-chat-text);color:var(--ngaf-chat-bg)}.chat-input__send:disabled{opacity:.35;cursor:not-allowed;background:var(--ngaf-chat-text-muted)}.chat-input__send:not(:disabled):hover{transform:scale(1.05)}.chat-input__send svg{width:16px;height:16px}.chat-input__send--stop{background:var(--ngaf-chat-text-muted);color:var(--ngaf-chat-bg)}.chat-input__send--stop:hover{transform:scale(1.05)}.chat-input__send--stop svg{width:14px;height:14px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chat-input', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'chat-input', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="chat-input__container">
       <ng-content select="[chatInputBanner]" />
       <ng-content select="[chatInputAttachments]" />
@@ -2884,15 +2893,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
         <textarea
           #textareaEl
           class="chat-input__textarea"
-          [ngModel]="messageText()"
-          (ngModelChange)="messageText.set($event)"
-          name="messageText"
+          [value]="messageText()"
+          (input)="onInput($event)"
           [placeholder]="placeholder()"
           (keydown.enter)="onKeydown($any($event))"
           (compositionstart)="composing.set(true)"
           (compositionend)="composing.set(false)"
           (focus)="focused.set(true)"
           (blur)="focused.set(false)"
+          name="messageText"
           rows="1"
           aria-label="Type a message"
         ></textarea>
@@ -4152,6 +4161,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 +4217,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 +4333,246 @@ 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);
+  }
+`;
+
+function isStatePathRef(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        typeof value['statePath'] === 'string' &&
+        Object.keys(value).length === 1);
+}
+/** Rewrites schema-documented `{ statePath }` prop refs to `$bindState` +
+ * `_bindings`. Returns the input reference unchanged when no rewriting is
+ * needed (keeps downstream memoization intact). */
+function normalizeJsonRenderSpec(spec) {
+    const sourceElements = (spec.elements ?? {});
+    let specChanged = false;
+    const elements = {};
+    for (const [id, el] of Object.entries(sourceElements)) {
+        const rawProps = el?.props;
+        if (!rawProps) {
+            elements[id] = el;
+            continue;
+        }
+        let elementChanged = false;
+        const props = {};
+        const bindings = {};
+        for (const [key, value] of Object.entries(rawProps)) {
+            if (isStatePathRef(value)) {
+                props[key] = { $bindState: value.statePath };
+                bindings[key] = value.statePath;
+                elementChanged = true;
+            }
+            else {
+                props[key] = value;
+            }
+        }
+        if (elementChanged) {
+            // Merge with any model-emitted `_bindings` (never observed, but cheap
+            // to preserve) — rewritten paths win.
+            const existing = (rawProps['_bindings'] ?? {});
+            props['_bindings'] = { ...existing, ...bindings };
+            elements[id] = { ...el, props };
+            specChanged = true;
+        }
+        else {
+            elements[id] = el;
+        }
+    }
+    return specChanged ? { ...spec, elements } : spec;
+}
+
+// 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();
+    /** The bound spec with schema-documented `{ statePath }` prop refs
+     * rewritten to engine-native `{ $bindState }` + `_bindings` so values
+     * resolve against the state store instead of interpolating as
+     * "[object Object]" (F4). */
+    normalizedSpec = computed(() => {
+        const s = this.spec();
+        return s ? normalizeJsonRenderSpec(s) : null;
+    }, ...(ngDevMode ? [{ debugName: "normalizedSpec" }] : []));
+    /** Last value this component seeded per state path. Lets the seeding
+     * effect distinguish "still the value we wrote (possibly a partial
+     * chunk from streaming — safe to overwrite with the newer one)" from
+     * "user edited it via a bound control — leave it alone". */
+    seeded = new Map();
+    constructor() {
+        // Seed `spec.state` (the schema's "initial state model") into an
+        // EXPLICIT consumer-provided store, which is typically EMPTY at first —
+        // without this, statePath/$bindState props would resolve to undefined.
+        // A consumer-provided store intentionally has shared/live semantics
+        // across surfaces: every surface bound to it reads (and writes) the same
+        // state, so the first surface to seed a path wins. When NO store input
+        // is given, this effect is a no-op and render-spec self-seeds its own
+        // per-instance internal store from spec.state, keeping surfaces with
+        // overlapping state keys isolated from each other (a2ui parity).
+        effect(() => {
+            const s = this.spec();
+            const store = this.store();
+            const state = s?.state;
+            if (!state || !store)
+                return;
+            // Untracked: store reads/writes must not become dependencies — the
+            // effect re-runs on spec/store-identity changes only, not on every
+            // write to the (possibly shared) store.
+            untracked(() => {
+                for (const [key, value] of Object.entries(state)) {
+                    const path = key.startsWith('/') ? key : `/${key}`;
+                    const current = store.get(path);
+                    const untouched = current === undefined ||
+                        (this.seeded.has(path) && current === this.seeded.get(path));
+                    if (untouched) {
+                        if (current !== value)
+                            store.set(path, value);
+                        this.seeded.set(path, value);
+                    }
+                }
+            });
+        });
+    }
+    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 (normalizedSpec()) {
+      <render-spec
+        [spec]="normalizedSpec()"
+        [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 (normalizedSpec()) {
+      <render-spec
+        [spec]="normalizedSpec()"
+        [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"] }]
+        }], ctorParameters: () => [], 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" }] : []));
+    events = output();
+    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 } }, outputs: { events: "events" }, 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"
+        (events)="events.emit($event)"
+      />
+    }
+  `, 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"
+        (events)="events.emit($event)"
+      />
+    }
+  `,
+                }]
+        }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], events: [{ type: i0.Output, args: ["events"] }], 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 +6042,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 = `
@@ -6325,6 +6527,143 @@ function provideChat(config) {
 // SPDX-License-Identifier: MIT
 const CHAT_LIFECYCLE = new InjectionToken('CHAT_LIFECYCLE');
 
+// SPDX-License-Identifier: MIT
+/**
+ * Convert a Standard Schema to a JSON Schema for the model's `parameters`.
+ * Uses Zod's converter; throws a clear error for non-Zod validators (callers
+ * should supply a Zod schema — see the client-tools docs).
+ */
+function deriveJsonSchema(toolName, schema) {
+    try {
+        return toJSONSchema(schema);
+    }
+    catch (err) {
+        throw new Error(`client tool "${toolName}": could not derive a JSON Schema from its schema. ` +
+            `Use a Zod schema (recommended) or an already-JSON-Schema-compatible validator. ` +
+            `Underlying error: ${err instanceof Error ? err.message : String(err)}`);
+    }
+}
+
+/** Validate raw model args against a Standard Schema. */
+async function validateArgs(schema, args) {
+    const res = await schema['~standard'].validate(args);
+    if (res.issues) {
+        return { ok: false, error: res.issues.map((i) => i.message).join('; ') };
+    }
+    // Cast rather than rely on discriminant narrowing: the cockpit example apps
+    // compile this source with `strictNullChecks: false`, where the
+    // `issues?: undefined` discriminant doesn't narrow `res` to the success type.
+    return { ok: true, value: res.value };
+}
+/** Validate args, run the handler, and normalize the outcome to a ClientToolResult. */
+async function executeFunctionTool(def, rawArgs) {
+    const v = await validateArgs(def.schema, rawArgs);
+    if (!v.ok)
+        return { ok: false, error: `invalid arguments: ${v.error}` };
+    try {
+        const value = await def.handler(v.value);
+        return { ok: true, value };
+    }
+    catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : String(err) };
+    }
+}
+
+// SPDX-License-Identifier: MIT
+/**
+ * Watches the agent's pending client tool calls and auto-runs FUNCTION tools,
+ * resolving each with its result. View/ask (component) tools are handled by the
+ * rendering layer, not here. No-op if the agent lacks the clientTools
+ * capability. MUST be called in an injection context (sets up an effect).
+ */
+function startClientToolExecutor(agent, registry) {
+    const cap = agent.clientTools;
+    if (!cap)
+        return;
+    const inFlight = new Set();
+    effect(() => {
+        for (const tc of cap.pending()) {
+            const def = registry[tc.name];
+            if (!def || def.kind !== 'function')
+                continue; // non-function handled elsewhere
+            // NB: do NOT skip on `tc.status === 'complete'`. A client tool call is
+            // marked 'complete' once its args finish streaming, yet it still has no
+            // result and needs the browser to execute it. `pending` already excludes
+            // calls that have a result or were resolved; `inFlight` prevents a
+            // double-dispatch within a render cycle.
+            if (inFlight.has(tc.id))
+                continue;
+            inFlight.add(tc.id);
+            void executeFunctionTool(def, tc.args).then((result) => {
+                cap.resolve(tc.id, result);
+                inFlight.delete(tc.id);
+            });
+        }
+    });
+}
+
+// SPDX-License-Identifier: MIT
+/** Build the catalog spec list shipped to the model. */
+function toClientToolSpecs(registry) {
+    return Object.entries(registry).map(([name, def]) => ({
+        name,
+        description: def.description,
+        parameters: deriveJsonSchema(name, def.schema),
+    }));
+}
+/** Map each view/ask tool to a RenderViewEntry that carries its schema, so the
+ *  render lib can gate the real component's mount on schema-readiness (showing
+ *  the fallback skeleton while a streaming tool call's args are still
+ *  incomplete) instead of mounting a required-input component too early. */
+function viewComponents(registry) {
+    const out = {};
+    for (const [name, def] of Object.entries(registry)) {
+        if (def.kind === 'view' || def.kind === 'ask') {
+            out[name] = { component: def.component, schema: def.schema };
+        }
+    }
+    return out;
+}
+function createClientToolsCoordinator(registry) {
+    const viewRegistry = views(viewComponents(registry));
+    const ackedViews = new Set();
+    return {
+        viewRegistry,
+        connect(agent) {
+            const cap = agent.clientTools;
+            if (!cap)
+                return;
+            cap.setCatalog(toClientToolSpecs(registry));
+            startClientToolExecutor(agent, registry); // function tools
+            // Auto-ack `view` tools: they render but produce no user value.
+            effect(() => {
+                for (const tc of cap.pending()) {
+                    const def = registry[tc.name];
+                    if (!def || def.kind !== 'view')
+                        continue;
+                    if (ackedViews.has(tc.id))
+                        continue;
+                    ackedViews.add(tc.id);
+                    cap.resolve(tc.id, { ok: true, value: { shown: true } });
+                }
+            });
+        },
+        handleRenderEvent(agent, event) {
+            if (event.type !== 'result')
+                return;
+            const cap = agent.clientTools;
+            if (!cap)
+                return;
+            // elementKey is the tool NAME in the tool-view spec; resolve the pending `ask`
+            // call for that name with the component's emitted value.
+            const name = event.elementKey;
+            const pending = cap.pending().find((tc) => tc.name === name && registry[tc.name]?.kind === 'ask');
+            if (pending)
+                cap.resolve(pending.id, { ok: true, value: event.value });
+        },
+    };
+}
+
 const RESERVED_PROP_KEYS = new Set(['child', 'children', 'action', 'tabItems', 'entryPointChild', 'contentChild']);
 /** Pull the (single) component-type key + its props from a v1 ComponentDef wrapper. */
 function unwrapComponentDef(def) {
@@ -6390,9 +6729,8 @@ function surfaceToSpec(surface) {
                 // snapshot taken at conversion time and never reflects user
                 // input writes back into the store. The `_bindings` map below
                 // tells the catalog component which prop names map to which
-                // paths so its emit() callback can write back via the
-                // a2ui:datamodel:<path>:<value> magic-string protocol that
-                // render-element's emitFn intercepts.
+                // paths so its injectRenderHost().set(path, value) call can
+                // write the typed value back to the render state store.
                 const path = value.path;
                 bindings[key] = path;
                 resolvedProps[key] = { $bindState: path };
@@ -7695,7 +8033,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
@@ -7831,6 +8169,14 @@ function isPinned(scrollHeight, scrollTop, clientHeight, tolerance = 150) {
 class ChatComponent {
     agent = input.required(...(ngDevMode ? [{ debugName: "agent" }] : []));
     views = input(undefined, ...(ngDevMode ? [{ debugName: "views" }] : []));
+    /**
+     * Client-declared tools (`view`/`ask`/`function`) the model may call. When
+     * provided, a coordinator ships their catalog to the agent, runs `function`
+     * tools in the browser, and renders/resolves `view`/`ask` tools through the
+     * same tool-views pipeline as `views`. Additive — leave undefined for the
+     * classic server-tools-only experience.
+     */
+    clientTools = input(undefined, ...(ngDevMode ? [{ debugName: "clientTools" }] : []));
     store = input(undefined, ...(ngDevMode ? [{ debugName: "store" }] : []));
     handlers = input({}, ...(ngDevMode ? [{ debugName: "handlers" }] : []));
     threads = input([], ...(ngDevMode ? [{ debugName: "threads" }] : []));
@@ -7887,14 +8233,50 @@ class ChatComponent {
         const explicit = this.store();
         if (explicit)
             return explicit;
-        if (this.views())
+        // A render store is needed whenever there's any view registry to render
+        // through — user-supplied `views()` OR client-tool view/ask components.
+        if (this.effectiveViews())
             return this._internalStore;
         return undefined;
     }, ...(ngDevMode ? [{ debugName: "resolvedStore" }] : []));
+    /**
+     * Lazily-built client-tools coordinator, memoized on the `clientTools`
+     * registry input. Undefined when no client tools are declared. The
+     * coordinator owns the catalog/executor wiring and the view/ask render
+     * registry; the composition merges and connects it below.
+     */
+    coordinator = computed(() => {
+        const reg = this.clientTools();
+        return reg ? createClientToolsCoordinator(reg) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "coordinator" }] : []));
+    /**
+     * The view registry actually used for rendering tool-views and for
+     * excluding view-backed tool names from default tool-call cards. Merges
+     * the coordinator's `view`/`ask` components (keyed by tool name) into the
+     * user-supplied `views()` so client-declared component tools render through
+     * the same pipeline. Falls back to `views()` when no client tools exist.
+     */
+    effectiveViews = computed(() => {
+        const base = this.views();
+        const coord = this.coordinator();
+        if (!coord)
+            return base;
+        return base ? withViews(base, coord.viewRegistry) : coord.viewRegistry;
+    }, ...(ngDevMode ? [{ debugName: "effectiveViews" }] : []));
     renderRegistry = computed(() => {
         const v = this.views();
         return v ? toRenderRegistry(v) : undefined;
     }, ...(ngDevMode ? [{ debugName: "renderRegistry" }] : []));
+    /** Tool names that have a registered view (keys of the effective view
+     *  registry, including client-declared view/ask tools). 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.effectiveViews() ?? {}), ...(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 +8285,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
@@ -7936,6 +8318,7 @@ class ChatComponent {
     }
     classifiers = new Map();
     destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
     // Resolved against the component's own `providers` in normal use. The fallback
     // is for tests that construct ChatComponent via `new` inside a bare injection
     // context (no element injector, so component-level providers are skipped).
@@ -8015,6 +8398,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.
@@ -8125,6 +8540,35 @@ class ChatComponent {
             }
             this.partialEventsLastIndex = events.length;
         });
+        // Connect the client-tools coordinator to the agent. connect() ships the
+        // tool catalog, starts the function-tool executor, and installs the view
+        // auto-ack effect. Those installs create effect()s of their own, which
+        // Angular forbids from *within* a running effect (NG0602). So this effect
+        // only detects readiness (both coordinator + agent present) and defers the
+        // actual connect() to a microtask that runs OUTSIDE the reactive context,
+        // re-entering the component's injection context so the coordinator's
+        // effects bind to this component's lifecycle. `connected` guards against
+        // re-running per coordinator identity (a new clientTools registry yields a
+        // new coordinator and re-connects; the old one's effects are abandoned).
+        let connected;
+        effect(() => {
+            const coord = this.coordinator();
+            let agentRef;
+            try {
+                agentRef = this.agent();
+            }
+            catch {
+                return;
+            }
+            if (!coord || !agentRef)
+                return;
+            if (connected === coord)
+                return;
+            connected = coord;
+            queueMicrotask(() => {
+                runInInjectionContext(this.injector, () => coord.connect(agentRef));
+            });
+        });
         effect(() => {
             // janitor: drop classifiers for messages no longer in the agent's list
             let liveIds;
@@ -8342,6 +8786,25 @@ class ChatComponent {
     onSpecEvent(event, messageIndex) {
         this.renderEvent.emit({ messageIndex, event });
     }
+    /**
+     * Forwards a render event bubbled up from a `<chat-tool-views>` component
+     * (a client-declared `view`/`ask` tool's rendered UI) to the client-tools
+     * coordinator. The coordinator resolves the matching pending `ask` tool call
+     * when the event is a `result`. No-op when no client tools are wired.
+     */
+    onClientToolEvent(event) {
+        const coord = this.coordinator();
+        if (!coord)
+            return;
+        let agentRef;
+        try {
+            agentRef = this.agent();
+        }
+        catch {
+            return;
+        }
+        coord.handleRenderEvent(agentRef, event);
+    }
     onA2uiAction(message) {
         void this.agent().submit({ message: JSON.stringify(message) });
     }
@@ -8362,7 +8825,7 @@ class ChatComponent {
         this.messageCopy.emit({ messageIndex: idx, content });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatComponent, isStandalone: true, selector: "chat", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, 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 }, threads: { classPropertyName: "threads", publicName: "threads", isSignal: true, isRequired: false, transformFunction: null }, activeThreadId: { classPropertyName: "activeThreadId", publicName: "activeThreadId", isSignal: true, isRequired: false, transformFunction: null }, welcomeDisabled: { classPropertyName: "welcomeDisabled", publicName: "welcomeDisabled", isSignal: true, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: true, isRequired: false, transformFunction: null }, showModelPicker: { classPropertyName: "showModelPicker", publicName: "showModelPicker", isSignal: true, isRequired: false, transformFunction: null }, selectedModel: { classPropertyName: "selectedModel", publicName: "selectedModel", isSignal: true, isRequired: false, transformFunction: null }, modelPickerPlaceholder: { classPropertyName: "modelPickerPlaceholder", publicName: "modelPickerPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, genuiToolNames: { classPropertyName: "genuiToolNames", publicName: "genuiToolNames", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedModel: "selectedModelChange", threadSelected: "threadSelected", renderEvent: "renderEvent", regenerate: "regenerate", rate: "rate", messageCopy: "messageCopy" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatComponent, isStandalone: true, selector: "chat", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, clientTools: { classPropertyName: "clientTools", publicName: "clientTools", 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 }, threads: { classPropertyName: "threads", publicName: "threads", isSignal: true, isRequired: false, transformFunction: null }, activeThreadId: { classPropertyName: "activeThreadId", publicName: "activeThreadId", isSignal: true, isRequired: false, transformFunction: null }, welcomeDisabled: { classPropertyName: "welcomeDisabled", publicName: "welcomeDisabled", isSignal: true, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: true, isRequired: false, transformFunction: null }, showModelPicker: { classPropertyName: "showModelPicker", publicName: "showModelPicker", isSignal: true, isRequired: false, transformFunction: null }, selectedModel: { classPropertyName: "selectedModel", publicName: "selectedModel", isSignal: true, isRequired: false, transformFunction: null }, modelPickerPlaceholder: { classPropertyName: "modelPickerPlaceholder", publicName: "modelPickerPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, genuiToolNames: { classPropertyName: "genuiToolNames", publicName: "genuiToolNames", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedModel: "selectedModelChange", threadSelected: "threadSelected", renderEvent: "renderEvent", regenerate: "regenerate", rate: "rate", messageCopy: "messageCopy" }, providers: [
             { provide: CHAT_LIFECYCLE, useFactory: createChatLifecycle },
         ], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (showWelcome()) {
@@ -8419,20 +8882,34 @@ 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]="effectiveViews()"
+                    [store]="resolvedStore()"
+                    [handlers]="handlers()"
+                    (events)="onClientToolEvent($event)"
+                  />
                   <chat-subagents [agent]="agent()" />
                   @if (classified.markdown(); as md) {
                     <chat-streaming-md [content]="md" [streaming]="agent().isLoading() && i === agent().messages().length - 1" />
                   }
                   @if (classified.spec(); as spec) {
+                    <!-- Pass ONLY the explicit consumer store (may be
+                         undefined) — never the conversation-wide internal
+                         fallback. Without a consumer store, render-spec
+                         self-seeds a per-instance store from spec.state so
+                         same-key dashboards across messages stay isolated
+                         (a2ui parity). -->
                     <chat-generative-ui
                       [spec]="spec"
                       [registry]="renderRegistry()"
-                      [store]="resolvedStore()"
+                      [store]="store()"
                       [handlers]="handlers()"
                       [loading]="agent().isLoading()"
                       (events)="onSpecEvent($event, i)"
@@ -8506,7 +8983,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"], outputs: ["events"] }, { 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 +8992,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,20 +9052,34 @@ 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]="effectiveViews()"
+                    [store]="resolvedStore()"
+                    [handlers]="handlers()"
+                    (events)="onClientToolEvent($event)"
+                  />
                   <chat-subagents [agent]="agent()" />
                   @if (classified.markdown(); as md) {
                     <chat-streaming-md [content]="md" [streaming]="agent().isLoading() && i === agent().messages().length - 1" />
                   }
                   @if (classified.spec(); as spec) {
+                    <!-- Pass ONLY the explicit consumer store (may be
+                         undefined) — never the conversation-wide internal
+                         fallback. Without a consumer store, render-spec
+                         self-seeds a per-instance store from spec.state so
+                         same-key dashboards across messages stay isolated
+                         (a2ui parity). -->
                     <chat-generative-ui
                       [spec]="spec"
                       [registry]="renderRegistry()"
-                      [store]="resolvedStore()"
+                      [store]="store()"
                       [handlers]="handlers()"
                       [loading]="agent().isLoading()"
                       (events)="onSpecEvent($event, i)"
@@ -8663,7 +9154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
     </div>
     }
   `, 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"] }]
-        }], ctorParameters: () => [], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], 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 }] }], threads: [{ type: i0.Input, args: [{ isSignal: true, alias: "threads", required: false }] }], activeThreadId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeThreadId", required: false }] }], welcomeDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "welcomeDisabled", required: false }] }], modelOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelOptions", required: false }] }], showModelPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showModelPicker", required: false }] }], selectedModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedModel", required: false }] }, { type: i0.Output, args: ["selectedModelChange"] }], modelPickerPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelPickerPlaceholder", required: false }] }], genuiToolNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "genuiToolNames", required: false }] }], threadSelected: [{ type: i0.Output, args: ["threadSelected"] }], renderEvent: [{ type: i0.Output, args: ["renderEvent"] }], regenerate: [{ type: i0.Output, args: ["regenerate"] }], rate: [{ type: i0.Output, args: ["rate"] }], messageCopy: [{ type: i0.Output, args: ["messageCopy"] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], clientTools: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientTools", required: false }] }], store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], handlers: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlers", required: false }] }], threads: [{ type: i0.Input, args: [{ isSignal: true, alias: "threads", required: false }] }], activeThreadId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeThreadId", required: false }] }], welcomeDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "welcomeDisabled", required: false }] }], modelOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelOptions", required: false }] }], showModelPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showModelPicker", required: false }] }], selectedModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedModel", required: false }] }, { type: i0.Output, args: ["selectedModelChange"] }], modelPickerPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelPickerPlaceholder", required: false }] }], genuiToolNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "genuiToolNames", required: false }] }], threadSelected: [{ type: i0.Output, args: ["threadSelected"] }], renderEvent: [{ type: i0.Output, args: ["renderEvent"] }], regenerate: [{ type: i0.Output, args: ["regenerate"] }], rate: [{ type: i0.Output, args: ["rate"] }], messageCopy: [{ type: i0.Output, args: ["messageCopy"] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }] } });
 
 // libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts
 // SPDX-License-Identifier: MIT
@@ -8673,6 +9164,8 @@ class ChatPopupComponent {
      * messages classified as A2UI parse correctly but never mount a
      * surface. Pass `a2uiBasicCatalog()` from `@threadplane/chat`. */
     views = input(undefined, ...(ngDevMode ? [{ debugName: "views" }] : []));
+    /** Frontend-declared client tools forwarded to the inner `<chat>`. */
+    clientTools = input(undefined, ...(ngDevMode ? [{ debugName: "clientTools" }] : []));
     /** Forwarded to the inner <chat>. When non-empty, a model picker pill
      * renders in the chat-input chrome. */
     modelOptions = input([], ...(ngDevMode ? [{ debugName: "modelOptions" }] : []));
@@ -8727,7 +9220,7 @@ class ChatPopupComponent {
     openWindow() { this.open.set(true); }
     closeWindow() { this.open.set(false); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: ChatPopupComponent, isStandalone: true, selector: "chat-popup", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: true, isRequired: false, transformFunction: null }, showModelPicker: { classPropertyName: "showModelPicker", publicName: "showModelPicker", isSignal: true, isRequired: false, transformFunction: null }, selectedModel: { classPropertyName: "selectedModel", publicName: "selectedModel", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedModel: "selectedModelChange", open: "openChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: ChatPopupComponent, isStandalone: true, selector: "chat-popup", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, clientTools: { classPropertyName: "clientTools", publicName: "clientTools", isSignal: true, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: true, isRequired: false, transformFunction: null }, showModelPicker: { classPropertyName: "showModelPicker", publicName: "showModelPicker", isSignal: true, isRequired: false, transformFunction: null }, selectedModel: { classPropertyName: "selectedModel", publicName: "selectedModel", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedModel: "selectedModelChange", open: "openChange" }, ngImport: i0, template: `
     <div class="chat-popup__launcher">
       <chat-launcher-button (clicked)="toggle()" />
     </div>
@@ -8738,6 +9231,7 @@ class ChatPopupComponent {
       <chat
         [agent]="agent()"
         [views]="views()"
+        [clientTools]="clientTools()"
         [modelOptions]="modelOptions()"
         [showModelPicker]="showModelPicker()"
         [selectedModel]="selectedModel()"
@@ -8747,7 +9241,7 @@ class ChatPopupComponent {
         <ng-content select="[chatWelcomeSuggestions]" chatWelcomeSuggestions />
       </chat>
     </div>
-  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{position:fixed;bottom:1rem;right:1rem;z-index:var(--ngaf-chat-z-overlay-content, 30)}.chat-popup__launcher{position:relative}.chat-popup__window{position:fixed;bottom:5rem;right:1rem;width:24rem;height:600px;max-height:calc(100vh - 6rem);background:var(--ngaf-chat-bg);border:1px solid var(--ngaf-chat-separator);border-radius:.75rem;box-shadow:0 5px 40px #00000029;transform-origin:bottom right;transform:scale(.95) translateY(20px);opacity:0;pointer-events:none;transition:transform .2s ease-out,opacity .1s ease-out;overflow:hidden;display:flex;flex-direction:column}.chat-popup__window[data-open=true]{transform:scale(1) translateY(0);opacity:1;pointer-events:auto}@media(max-width:640px){.chat-popup__window{inset:0 auto auto 0;width:100vw;height:100vh;max-height:100vh;border-radius:0}}.chat-popup__close{position:absolute;top:8px;right:8px;width:32px;height:32px;background:transparent;border:0;cursor:pointer;color:var(--ngaf-chat-text-muted);border-radius:50%;z-index:1;display:flex;align-items:center;justify-content:center}.chat-popup__close:hover{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text)}\n"], dependencies: [{ kind: "component", type: ChatComponent, selector: "chat", inputs: ["agent", "views", "store", "handlers", "threads", "activeThreadId", "welcomeDisabled", "modelOptions", "showModelPicker", "selectedModel", "modelPickerPlaceholder", "genuiToolNames"], outputs: ["selectedModelChange", "threadSelected", "renderEvent", "regenerate", "rate", "messageCopy"] }, { kind: "component", type: ChatLauncherButtonComponent, selector: "chat-launcher-button", outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{position:fixed;bottom:1rem;right:1rem;z-index:var(--ngaf-chat-z-overlay-content, 30)}.chat-popup__launcher{position:relative}.chat-popup__window{position:fixed;bottom:5rem;right:1rem;width:24rem;height:600px;max-height:calc(100vh - 6rem);background:var(--ngaf-chat-bg);border:1px solid var(--ngaf-chat-separator);border-radius:.75rem;box-shadow:0 5px 40px #00000029;transform-origin:bottom right;transform:scale(.95) translateY(20px);opacity:0;pointer-events:none;transition:transform .2s ease-out,opacity .1s ease-out;overflow:hidden;display:flex;flex-direction:column}.chat-popup__window[data-open=true]{transform:scale(1) translateY(0);opacity:1;pointer-events:auto}@media(max-width:640px){.chat-popup__window{inset:0 auto auto 0;width:100vw;height:100vh;max-height:100vh;border-radius:0}}.chat-popup__close{position:absolute;top:8px;right:8px;width:32px;height:32px;background:transparent;border:0;cursor:pointer;color:var(--ngaf-chat-text-muted);border-radius:50%;z-index:1;display:flex;align-items:center;justify-content:center}.chat-popup__close:hover{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text)}\n"], dependencies: [{ kind: "component", type: ChatComponent, selector: "chat", inputs: ["agent", "views", "clientTools", "store", "handlers", "threads", "activeThreadId", "welcomeDisabled", "modelOptions", "showModelPicker", "selectedModel", "modelPickerPlaceholder", "genuiToolNames"], outputs: ["selectedModelChange", "threadSelected", "renderEvent", "regenerate", "rate", "messageCopy"] }, { kind: "component", type: ChatLauncherButtonComponent, selector: "chat-launcher-button", outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatPopupComponent, decorators: [{
             type: Component,
@@ -8762,6 +9256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       <chat
         [agent]="agent()"
         [views]="views()"
+        [clientTools]="clientTools()"
         [modelOptions]="modelOptions()"
         [showModelPicker]="showModelPicker()"
         [selectedModel]="selectedModel()"
@@ -8772,7 +9267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       </chat>
     </div>
   `, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{position:fixed;bottom:1rem;right:1rem;z-index:var(--ngaf-chat-z-overlay-content, 30)}.chat-popup__launcher{position:relative}.chat-popup__window{position:fixed;bottom:5rem;right:1rem;width:24rem;height:600px;max-height:calc(100vh - 6rem);background:var(--ngaf-chat-bg);border:1px solid var(--ngaf-chat-separator);border-radius:.75rem;box-shadow:0 5px 40px #00000029;transform-origin:bottom right;transform:scale(.95) translateY(20px);opacity:0;pointer-events:none;transition:transform .2s ease-out,opacity .1s ease-out;overflow:hidden;display:flex;flex-direction:column}.chat-popup__window[data-open=true]{transform:scale(1) translateY(0);opacity:1;pointer-events:auto}@media(max-width:640px){.chat-popup__window{inset:0 auto auto 0;width:100vw;height:100vh;max-height:100vh;border-radius:0}}.chat-popup__close{position:absolute;top:8px;right:8px;width:32px;height:32px;background:transparent;border:0;cursor:pointer;color:var(--ngaf-chat-text-muted);border-radius:50%;z-index:1;display:flex;align-items:center;justify-content:center}.chat-popup__close:hover{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], modelOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelOptions", required: false }] }], showModelPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showModelPicker", required: false }] }], selectedModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedModel", required: false }] }, { type: i0.Output, args: ["selectedModelChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], clientTools: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientTools", required: false }] }], modelOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelOptions", required: false }] }], showModelPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showModelPicker", required: false }] }], selectedModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedModel", required: false }] }, { type: i0.Output, args: ["selectedModelChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }] } });
 
 // libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts
 // SPDX-License-Identifier: MIT
@@ -8782,6 +9277,8 @@ class ChatSidebarComponent {
      * messages classified as A2UI parse correctly but never mount a
      * surface. Pass `a2uiBasicCatalog()` from `@threadplane/chat`. */
     views = input(undefined, ...(ngDevMode ? [{ debugName: "views" }] : []));
+    /** Frontend-declared client tools forwarded to the inner `<chat>`. */
+    clientTools = input(undefined, ...(ngDevMode ? [{ debugName: "clientTools" }] : []));
     /** Forwarded to the inner <chat>. When non-empty, a model picker pill
      * renders in the chat-input chrome. */
     modelOptions = input([], ...(ngDevMode ? [{ debugName: "modelOptions" }] : []));
@@ -8835,7 +9332,7 @@ class ChatSidebarComponent {
     openWindow() { this.open.set(true); }
     closeWindow() { this.open.set(false); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: ChatSidebarComponent, isStandalone: true, selector: "chat-sidebar", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: true, isRequired: false, transformFunction: null }, showModelPicker: { classPropertyName: "showModelPicker", publicName: "showModelPicker", isSignal: true, isRequired: false, transformFunction: null }, selectedModel: { classPropertyName: "selectedModel", publicName: "selectedModel", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, pushContent: { classPropertyName: "pushContent", publicName: "pushContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedModel: "selectedModelChange", open: "openChange" }, host: { properties: { "attr.data-push": "pushContent() ? \"true\" : \"false\"", "attr.data-open": "open() ? \"true\" : \"false\"" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: ChatSidebarComponent, isStandalone: true, selector: "chat-sidebar", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, clientTools: { classPropertyName: "clientTools", publicName: "clientTools", isSignal: true, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: true, isRequired: false, transformFunction: null }, showModelPicker: { classPropertyName: "showModelPicker", publicName: "showModelPicker", isSignal: true, isRequired: false, transformFunction: null }, selectedModel: { classPropertyName: "selectedModel", publicName: "selectedModel", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, pushContent: { classPropertyName: "pushContent", publicName: "pushContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedModel: "selectedModelChange", open: "openChange" }, host: { properties: { "attr.data-push": "pushContent() ? \"true\" : \"false\"", "attr.data-open": "open() ? \"true\" : \"false\"" } }, ngImport: i0, template: `
     <div class="chat-sidebar__content"><ng-content /></div>
     <div class="chat-sidebar__launcher">
       <chat-launcher-button (clicked)="toggle()" />
@@ -8852,6 +9349,7 @@ class ChatSidebarComponent {
       <chat
         [agent]="agent()"
         [views]="views()"
+        [clientTools]="clientTools()"
         [modelOptions]="modelOptions()"
         [showModelPicker]="showModelPicker()"
         [selectedModel]="selectedModel()"
@@ -8861,7 +9359,7 @@ class ChatSidebarComponent {
         <ng-content select="[chatWelcomeSuggestions]" chatWelcomeSuggestions />
       </chat>
     </aside>
-  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block}.chat-sidebar__content{transition:margin-right .3s ease;min-height:100vh}:host([data-push=\"true\"][data-open=\"true\"]) .chat-sidebar__content{margin-right:28rem}@media(max-width:640px){:host([data-push=\"true\"][data-open=\"true\"]) .chat-sidebar__content{margin-right:0}}.chat-sidebar__panel{position:fixed;top:0;right:0;bottom:var(--ngaf-chat-debug-claim-bottom, 0);width:28rem;background:var(--ngaf-chat-bg);border-left:1px solid var(--ngaf-chat-separator);box-shadow:-8px 0 32px #00000014;transform:translate(100%);transition:transform .2s ease-out,bottom .2s ease-out;z-index:var(--ngaf-chat-z-overlay-content, 30);display:flex;flex-direction:column}.chat-sidebar__panel[data-open=true]{transform:translate(0)}@media(max-width:640px){.chat-sidebar__panel{width:100vw}}.chat-sidebar__panel-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--ngaf-chat-separator);min-height:48px}.chat-sidebar__panel-title{min-width:0;flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ngaf-chat-text);font-weight:500;font-size:var(--ngaf-chat-font-size-sm)}.chat-sidebar__close{flex:0 0 auto;width:32px;height:32px;background:transparent;border:0;cursor:pointer;color:var(--ngaf-chat-text-muted);border-radius:50%;display:flex;align-items:center;justify-content:center}.chat-sidebar__close:hover{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text)}.chat-sidebar__launcher{position:fixed;bottom:calc(1rem + var(--ngaf-chat-debug-claim-bottom, 0));right:1rem;z-index:var(--ngaf-chat-z-overlay-content, 30);transition:bottom .2s ease-out}:host([data-open=\"true\"]) .chat-sidebar__launcher{display:none}\n"], dependencies: [{ kind: "component", type: ChatComponent, selector: "chat", inputs: ["agent", "views", "store", "handlers", "threads", "activeThreadId", "welcomeDisabled", "modelOptions", "showModelPicker", "selectedModel", "modelPickerPlaceholder", "genuiToolNames"], outputs: ["selectedModelChange", "threadSelected", "renderEvent", "regenerate", "rate", "messageCopy"] }, { kind: "component", type: ChatLauncherButtonComponent, selector: "chat-launcher-button", outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block}.chat-sidebar__content{transition:margin-right .3s ease;min-height:100vh}:host([data-push=\"true\"][data-open=\"true\"]) .chat-sidebar__content{margin-right:28rem}@media(max-width:640px){:host([data-push=\"true\"][data-open=\"true\"]) .chat-sidebar__content{margin-right:0}}.chat-sidebar__panel{position:fixed;top:0;right:0;bottom:var(--ngaf-chat-debug-claim-bottom, 0);width:28rem;background:var(--ngaf-chat-bg);border-left:1px solid var(--ngaf-chat-separator);box-shadow:-8px 0 32px #00000014;transform:translate(100%);transition:transform .2s ease-out,bottom .2s ease-out;z-index:var(--ngaf-chat-z-overlay-content, 30);display:flex;flex-direction:column}.chat-sidebar__panel[data-open=true]{transform:translate(0)}@media(max-width:640px){.chat-sidebar__panel{width:100vw}}.chat-sidebar__panel-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--ngaf-chat-separator);min-height:48px}.chat-sidebar__panel-title{min-width:0;flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ngaf-chat-text);font-weight:500;font-size:var(--ngaf-chat-font-size-sm)}.chat-sidebar__close{flex:0 0 auto;width:32px;height:32px;background:transparent;border:0;cursor:pointer;color:var(--ngaf-chat-text-muted);border-radius:50%;display:flex;align-items:center;justify-content:center}.chat-sidebar__close:hover{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text)}.chat-sidebar__launcher{position:fixed;bottom:calc(1rem + var(--ngaf-chat-debug-claim-bottom, 0));right:1rem;z-index:var(--ngaf-chat-z-overlay-content, 30);transition:bottom .2s ease-out}:host([data-open=\"true\"]) .chat-sidebar__launcher{display:none}\n"], dependencies: [{ kind: "component", type: ChatComponent, selector: "chat", inputs: ["agent", "views", "clientTools", "store", "handlers", "threads", "activeThreadId", "welcomeDisabled", "modelOptions", "showModelPicker", "selectedModel", "modelPickerPlaceholder", "genuiToolNames"], outputs: ["selectedModelChange", "threadSelected", "renderEvent", "regenerate", "rate", "messageCopy"] }, { kind: "component", type: ChatLauncherButtonComponent, selector: "chat-launcher-button", outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatSidebarComponent, decorators: [{
             type: Component,
@@ -8885,6 +9383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       <chat
         [agent]="agent()"
         [views]="views()"
+        [clientTools]="clientTools()"
         [modelOptions]="modelOptions()"
         [showModelPicker]="showModelPicker()"
         [selectedModel]="selectedModel()"
@@ -8895,7 +9394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       </chat>
     </aside>
   `, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block}.chat-sidebar__content{transition:margin-right .3s ease;min-height:100vh}:host([data-push=\"true\"][data-open=\"true\"]) .chat-sidebar__content{margin-right:28rem}@media(max-width:640px){:host([data-push=\"true\"][data-open=\"true\"]) .chat-sidebar__content{margin-right:0}}.chat-sidebar__panel{position:fixed;top:0;right:0;bottom:var(--ngaf-chat-debug-claim-bottom, 0);width:28rem;background:var(--ngaf-chat-bg);border-left:1px solid var(--ngaf-chat-separator);box-shadow:-8px 0 32px #00000014;transform:translate(100%);transition:transform .2s ease-out,bottom .2s ease-out;z-index:var(--ngaf-chat-z-overlay-content, 30);display:flex;flex-direction:column}.chat-sidebar__panel[data-open=true]{transform:translate(0)}@media(max-width:640px){.chat-sidebar__panel{width:100vw}}.chat-sidebar__panel-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--ngaf-chat-separator);min-height:48px}.chat-sidebar__panel-title{min-width:0;flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ngaf-chat-text);font-weight:500;font-size:var(--ngaf-chat-font-size-sm)}.chat-sidebar__close{flex:0 0 auto;width:32px;height:32px;background:transparent;border:0;cursor:pointer;color:var(--ngaf-chat-text-muted);border-radius:50%;display:flex;align-items:center;justify-content:center}.chat-sidebar__close:hover{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text)}.chat-sidebar__launcher{position:fixed;bottom:calc(1rem + var(--ngaf-chat-debug-claim-bottom, 0));right:1rem;z-index:var(--ngaf-chat-z-overlay-content, 30);transition:bottom .2s ease-out}:host([data-open=\"true\"]) .chat-sidebar__launcher{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], modelOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelOptions", required: false }] }], showModelPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showModelPicker", required: false }] }], selectedModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedModel", required: false }] }, { type: i0.Output, args: ["selectedModelChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], pushContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "pushContent", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], clientTools: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientTools", required: false }] }], modelOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelOptions", required: false }] }], showModelPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showModelPicker", required: false }] }], selectedModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedModel", required: false }] }, { type: i0.Output, args: ["selectedModelChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], pushContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "pushContent", required: false }] }] } });
 
 // libs/chat/src/lib/compositions/chat-timeline-slider/chat-timeline-slider.component.ts
 // SPDX-License-Identifier: MIT
@@ -10117,76 +10616,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;
@@ -10386,24 +10964,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
   `, styles: [".a2ui-card{display:flex;flex-direction:column;gap:var(--a2ui-spacing-2);border-radius:var(--a2ui-shape-medium);border:1px solid var(--a2ui-outline);background:var(--a2ui-surface);padding:var(--a2ui-spacing-4);box-shadow:var(--a2ui-elevation-1)}\n"] }]
         }], propDecorators: { childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
 
-// SPDX-License-Identifier: MIT
-/** Emits a data model binding event if the prop has a binding path. */
-function emitBinding(emit, bindings, prop, value) {
+/** Writes a typed value to the render state store if the prop has a binding path. */
+function emitBinding(host, bindings, prop, value) {
     const path = bindings?.[prop];
     if (path) {
-        emit(`a2ui:datamodel:${path}:${value}`);
+        host.set(path, value);
     }
 }
 
 // SPDX-License-Identifier: MIT
 class A2uiCheckBoxComponent {
+    host = injectRenderHost();
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** v1 canonical prop: boolean checked state. */
     value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Pre-v1 alias retained for back-compat. */
     checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
     _bindings = input({}, ...(ngDevMode ? [{ debugName: "_bindings" }] : []));
-    emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -10416,14 +10993,14 @@ class A2uiCheckBoxComponent {
         // `value`; pre-v1 used `checked`.
         const bound = this._bindings();
         if (bound['value']) {
-            emitBinding(this.emit(), bound, 'value', val);
+            emitBinding(this.host, bound, 'value', val);
         }
         else {
-            emitBinding(this.emit(), bound, 'checked', val);
+            emitBinding(this.host, bound, 'checked', val);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiCheckBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: A2uiCheckBoxComponent, isStandalone: true, selector: "a2ui-check-box", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: A2uiCheckBoxComponent, isStandalone: true, selector: "a2ui-check-box", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <label class="a2ui-cb">
       <input type="checkbox" [checked]="effectiveValue()" (change)="onChange($event)" class="a2ui-cb__input" />
       {{ label() }}
@@ -10438,7 +11015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       {{ label() }}
     </label>
   `, styles: [".a2ui-cb{display:flex;align-items:center;gap:var(--a2ui-spacing-2);font-size:var(--a2ui-typography-body-size);cursor:pointer}.a2ui-cb__input{width:16px;height:16px;border-radius:var(--a2ui-shape-extra-small);cursor:pointer;accent-color:var(--a2ui-primary)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 const ALIGN_MAP = {
@@ -10481,6 +11058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
 class A2uiDateTimeInputComponent {
     static _idCounter = 0;
     _inputId = `a2ui-date-time-input-${++A2uiDateTimeInputComponent._idCounter}`;
+    host = injectRenderHost();
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** v1 prop: value (resolved DynamicString). */
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -10489,7 +11067,6 @@ class A2uiDateTimeInputComponent {
     /** v1 prop: enableTime — include time portion. */
     enableTime = input(false, ...(ngDevMode ? [{ debugName: "enableTime" }] : []));
     _bindings = input({}, ...(ngDevMode ? [{ debugName: "_bindings" }] : []));
-    emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -10507,10 +11084,10 @@ class A2uiDateTimeInputComponent {
     }, ...(ngDevMode ? [{ debugName: "htmlInputType" }] : []));
     onChange(event) {
         const val = event.target.value;
-        emitBinding(this.emit(), this._bindings(), 'value', val);
+        emitBinding(this.host, this._bindings(), 'value', val);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiDateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiDateTimeInputComponent, isStandalone: true, selector: "a2ui-date-time-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, enableDate: { classPropertyName: "enableDate", publicName: "enableDate", isSignal: true, isRequired: false, transformFunction: null }, enableTime: { classPropertyName: "enableTime", publicName: "enableTime", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiDateTimeInputComponent, isStandalone: true, selector: "a2ui-date-time-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, enableDate: { classPropertyName: "enableDate", publicName: "enableDate", isSignal: true, isRequired: false, transformFunction: null }, enableTime: { classPropertyName: "enableTime", publicName: "enableTime", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="a2ui-dti">
       @if (label()) {
         <label [htmlFor]="_inputId" class="a2ui-dti__label">{{ label() }}</label>
@@ -10541,7 +11118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       />
     </div>
   `, styles: [".a2ui-dti{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-dti__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-dti__input{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard)}.a2ui-dti__input:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], enableDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDate", required: false }] }], enableTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTime", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], enableDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDate", required: false }] }], enableTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTime", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 class A2uiDividerComponent {
@@ -10832,6 +11409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
 
 // SPDX-License-Identifier: MIT
 class A2uiMultipleChoiceComponent {
+    host = injectRenderHost();
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Resolved current selections from surface-to-spec. Normalized in
      * `selectionsArray` because LLMs sometimes seed the data model with a
@@ -10851,7 +11429,6 @@ class A2uiMultipleChoiceComponent {
     /** When ≤ 1 — render as single-select <select>; otherwise multi-select checkboxes. */
     maxAllowedSelections = input(1, ...(ngDevMode ? [{ debugName: "maxAllowedSelections" }] : []));
     _bindings = input({}, ...(ngDevMode ? [{ debugName: "_bindings" }] : []));
-    emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -10863,7 +11440,7 @@ class A2uiMultipleChoiceComponent {
     }
     onSelectChange(event) {
         const val = event.target.value;
-        emitBinding(this.emit(), this._bindings(), 'selections', val);
+        emitBinding(this.host, this._bindings(), 'selections', val);
     }
     onCheckChange(value, event) {
         const checked = event.target.checked;
@@ -10875,11 +11452,11 @@ class A2uiMultipleChoiceComponent {
         else if (!checked && idx !== -1) {
             current.splice(idx, 1);
         }
-        // Emit the updated selections array as a JSON string so emitBinding can convey it.
-        emitBinding(this.emit(), this._bindings(), 'selections', JSON.stringify(current));
+        // Pass the updated selections array directly (typed value, no JSON stringification needed).
+        emitBinding(this.host, this._bindings(), 'selections', current);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiMultipleChoiceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiMultipleChoiceComponent, isStandalone: true, selector: "a2ui-multiple-choice", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxAllowedSelections: { classPropertyName: "maxAllowedSelections", publicName: "maxAllowedSelections", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiMultipleChoiceComponent, isStandalone: true, selector: "a2ui-multiple-choice", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxAllowedSelections: { classPropertyName: "maxAllowedSelections", publicName: "maxAllowedSelections", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="a2ui-mc">
       @if (label()) {
         <span class="a2ui-mc__label">{{ label() }}</span>
@@ -10944,7 +11521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       }
     </div>
   `, styles: [".a2ui-mc{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-mc__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-mc__select{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard)}.a2ui-mc__select:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}.a2ui-mc__checks{display:flex;flex-direction:column;gap:var(--a2ui-spacing-2)}.a2ui-mc__check-row{display:flex;align-items:center;gap:var(--a2ui-spacing-2);font-size:var(--a2ui-typography-body-size);cursor:pointer}.a2ui-mc__checkbox{width:16px;height:16px;border-radius:var(--a2ui-shape-extra-small);cursor:pointer;accent-color:var(--a2ui-primary)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], selections: [{ type: i0.Input, args: [{ isSignal: true, alias: "selections", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], maxAllowedSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAllowedSelections", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], selections: [{ type: i0.Input, args: [{ isSignal: true, alias: "selections", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], maxAllowedSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAllowedSelections", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 const ROW_ALIGN_MAP = {
@@ -11002,6 +11579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
 class A2uiSliderComponent {
     static _idCounter = 0;
     _inputId = `a2ui-slider-${++A2uiSliderComponent._idCounter}`;
+    host = injectRenderHost();
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** v1 prop: value (resolved DynamicNumber). */
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -11011,7 +11589,6 @@ class A2uiSliderComponent {
     maxValue = input(100, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
     step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
     _bindings = input({}, ...(ngDevMode ? [{ debugName: "_bindings" }] : []));
-    emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -11019,10 +11596,10 @@ class A2uiSliderComponent {
     spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : []));
     onInput(event) {
         const val = Number(event.target.value);
-        emitBinding(this.emit(), this._bindings(), 'value', val);
+        emitBinding(this.host, this._bindings(), 'value', val);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiSliderComponent, isStandalone: true, selector: "a2ui-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiSliderComponent, isStandalone: true, selector: "a2ui-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="a2ui-slider">
       @if (label()) {
         <label [htmlFor]="_inputId" class="a2ui-slider__label">{{ label() }}: {{ value() }}</label>
@@ -11059,7 +11636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       />
     </div>
   `, styles: [".a2ui-slider{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-slider__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-slider__input{width:100%;cursor:pointer;accent-color:var(--a2ui-primary)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 class A2uiTabsComponent {
@@ -11166,6 +11743,7 @@ const TYPE_MAP = {
 class A2uiTextFieldComponent {
     static _idCounter = 0;
     _inputId = `a2ui-text-field-${++A2uiTextFieldComponent._idCounter}`;
+    host = injectRenderHost();
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** v1 prop: text (resolved string value). */
     text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
@@ -11175,7 +11753,6 @@ class A2uiTextFieldComponent {
     textFieldType = input('shortText', ...(ngDevMode ? [{ debugName: "textFieldType" }] : []));
     validationRegexp = input('', ...(ngDevMode ? [{ debugName: "validationRegexp" }] : []));
     _bindings = input({}, ...(ngDevMode ? [{ debugName: "_bindings" }] : []));
-    emit = input(() => { }, ...(ngDevMode ? [{ debugName: "emit" }] : []));
     // Framework inputs required by the render harness.
     bindings = input({}, ...(ngDevMode ? [{ debugName: "bindings" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -11187,14 +11764,14 @@ class A2uiTextFieldComponent {
         // Emit on 'text' binding (v1 prop name); also try 'value' for compat.
         const bound = this._bindings();
         if (bound['text']) {
-            emitBinding(this.emit(), bound, 'text', val);
+            emitBinding(this.host, bound, 'text', val);
         }
         else {
-            emitBinding(this.emit(), bound, 'value', val);
+            emitBinding(this.host, bound, 'value', val);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiTextFieldComponent, isStandalone: true, selector: "a2ui-text-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textFieldType: { classPropertyName: "textFieldType", publicName: "textFieldType", isSignal: true, isRequired: false, transformFunction: null }, validationRegexp: { classPropertyName: "validationRegexp", publicName: "validationRegexp", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, emit: { classPropertyName: "emit", publicName: "emit", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiTextFieldComponent, isStandalone: true, selector: "a2ui-text-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textFieldType: { classPropertyName: "textFieldType", publicName: "textFieldType", isSignal: true, isRequired: false, transformFunction: null }, validationRegexp: { classPropertyName: "validationRegexp", publicName: "validationRegexp", isSignal: true, isRequired: false, transformFunction: null }, _bindings: { classPropertyName: "_bindings", publicName: "_bindings", isSignal: true, isRequired: false, transformFunction: null }, bindings: { classPropertyName: "bindings", publicName: "bindings", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, childKeys: { classPropertyName: "childKeys", publicName: "childKeys", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="a2ui-tf">
       @if (label()) {
         <label [htmlFor]="_inputId" class="a2ui-tf__label">{{ label() }}</label>
@@ -11251,7 +11828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       }
     </div>
   `, styles: [".a2ui-tf{display:flex;flex-direction:column;gap:var(--a2ui-spacing-1)}.a2ui-tf__label{font-size:var(--a2ui-typography-label-size);font-weight:var(--a2ui-typography-label-weight);color:var(--a2ui-label)}.a2ui-tf__input{padding:var(--a2ui-spacing-2) var(--a2ui-spacing-3);font-size:var(--a2ui-typography-body-size);border-radius:var(--a2ui-shape-small);background:var(--a2ui-input-bg);color:var(--a2ui-on-surface);border:1px solid var(--a2ui-outline);outline:none;transition:border-color var(--a2ui-motion-duration-short) var(--a2ui-motion-easing-standard);resize:vertical}.a2ui-tf__input:focus{outline:var(--a2ui-focus-ring-width) solid var(--a2ui-focus-ring-color);outline-offset:2px;border-color:var(--a2ui-primary)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], textFieldType: [{ type: i0.Input, args: [{ isSignal: true, alias: "textFieldType", required: false }] }], validationRegexp: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationRegexp", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], emit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emit", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], textFieldType: [{ type: i0.Input, args: [{ isSignal: true, alias: "textFieldType", required: false }] }], validationRegexp: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationRegexp", required: false }] }], _bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "_bindings", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindings", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], childKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "childKeys", required: false }] }], spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
 class A2uiVideoComponent {
@@ -11311,6 +11888,23 @@ function a2uiBasicCatalog() {
     });
 }
 
+/** Async function tool — its resolved return value becomes the tool result. */
+function action(description, schema, handler) {
+    return { kind: 'function', description, schema, handler };
+}
+/** Render-only component tool — the model fills its props; auto-acknowledged. */
+function view(description, schema, component) {
+    return { kind: 'view', description, schema, component };
+}
+/** Interactive (HITL) component tool — the value it emits becomes the result. */
+function ask(description, schema, component) {
+    return { kind: 'ask', description, schema, component };
+}
+/** Collect named client tools into a frozen registry (the key is the tool name). */
+function tools(map) {
+    return Object.freeze({ ...map });
+}
+
 // SPDX-License-Identifier: MIT
 function mockAgent(opts = {}) {
     const messages = signal(opts.messages ?? [], ...(ngDevMode ? [{ debugName: "messages" }] : []));
@@ -11362,5 +11956,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, action, ask, buildA2uiActionMessage, cacheplaneMarkdownViews, createA2uiSurfaceStore, createClientToolsCoordinator, createContentClassifier, createParseTreeStore, createPartialArgsBridge, deriveJsonSchema, emitBinding, executeFunctionTool, extractErrorMessage, formatDuration, getInterrupt, getMessageType, isAssistantMessage, isSystemMessage, isToolMessage, isTyping, isUserMessage, messageContent, mockAgent, normalizeEnvelopeArgs, normalizeViewEntry, provideChat, renderMarkdown, startClientToolExecutor, statusColor, submitMessage, surfaceToSpec, toClientToolSpecs, tools, validateArgs, view };
 //# sourceMappingURL=threadplane-chat.mjs.map