@threadplane/chat 0.0.51 → 0.0.53

package/fesm2022/threadplane-chat.mjs

@@ -4,6 +4,7 @@ import { NgTemplateOutlet, NgComponentOutlet, KeyValuePipe } from '@angular/comm
 import { createPartialMarkdownParser, materialize } from '@cacheplane/partial-markdown';
 import { views, RenderSpecComponent, toRenderRegistry, signalStateStore, withViews, RenderElementComponent, injectRenderHost } from '@threadplane/render';
 export { toRenderRegistry, views, withViews, withoutViews } from '@threadplane/render';
+import { DomSanitizer } from '@angular/platform-browser';
 import { runLicenseCheck, inferNoncommercial, LICENSE_PUBLIC_KEY } from '@threadplane/licensing';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, NavigationEnd } from '@angular/router';
@@ -174,15 +175,55 @@ function toAgentError(raw) {
     return make('server', true, raw, undefined, msg);
 }
 
+/**
+ * Type guard narrowing a {@link Message} to `role: 'user'`.
+ *
+ * @param m The message to test.
+ * @returns `true` (and narrows `m`) when the message was sent by the user.
+ * @example
+ * ```ts
+ * const userTurns = agent.messages().filter(isUserMessage);
+ * ```
+ */
 function isUserMessage(m) {
     return m.role === 'user';
 }
+/**
+ * Type guard narrowing a {@link Message} to `role: 'assistant'`.
+ *
+ * @param m The message to test.
+ * @returns `true` (and narrows `m`) when the message came from the assistant.
+ * @example
+ * ```ts
+ * const reply = agent.messages().findLast(isAssistantMessage);
+ * ```
+ */
 function isAssistantMessage(m) {
     return m.role === 'assistant';
 }
+/**
+ * Type guard narrowing a {@link Message} to `role: 'tool'` (a tool result turn).
+ *
+ * @param m The message to test.
+ * @returns `true` (and narrows `m`) when the message is a tool result.
+ * @example
+ * ```ts
+ * if (isToolMessage(m)) console.log(m.toolCallId);
+ * ```
+ */
 function isToolMessage(m) {
     return m.role === 'tool';
 }
+/**
+ * Type guard narrowing a {@link Message} to `role: 'system'`.
+ *
+ * @param m The message to test.
+ * @returns `true` (and narrows `m`) when the message is a system message.
+ * @example
+ * ```ts
+ * const visible = agent.messages().filter((m) => !isSystemMessage(m));
+ * ```
+ */
 function isSystemMessage(m) {
     return m.role === 'system';
 }
@@ -1754,6 +1795,11 @@ const CHAT_MARKDOWN_STYLES = `
   }
   chat-streaming-md .chat-md-image__icon { font-size: 1em; line-height: 1; }
   chat-streaming-md .chat-md-image__alt { font-style: italic; }
+  /* Math (KaTeX). Display math is a centered block that scrolls horizontally
+     on overflow; the raw fallback (KaTeX missing or invalid LaTeX) reads as
+     monospace so the source delimiters look intentional. */
+  chat-streaming-md .chat-md-math--display { display: block; margin: 0.5em 0; overflow-x: auto; }
+  chat-streaming-md .chat-md-math--raw { font-family: var(--ngaf-chat-font-mono, ui-monospace, monospace); }
 `;
 
 // libs/chat/src/lib/markdown/markdown-view-registry.ts
@@ -2103,6 +2149,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                 }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
 
+// libs/chat/src/lib/markdown/katex-loader.ts
+// SPDX-License-Identifier: MIT
+/**
+ * Lazy KaTeX integration for the markdown math view. Mirrors the lazy `marked`
+ * loader in ../streaming/markdown-render.ts: `katex` is an optional peer
+ * dependency, dynamically imported on module load, so chats that never contain
+ * math pay zero base-bundle cost. `renderMath` returns the KaTeX HTML string,
+ * or null when KaTeX is unavailable or the LaTeX is invalid — the view then
+ * renders the raw `$…$` source instead.
+ *
+ * CSS: the KaTeX stylesheet (and its woff2 fonts) is the CONSUMER's
+ * responsibility — this lib injects nothing at runtime (no third-party CDN
+ * fetch). Apps import `katex/dist/katex.min.css` themselves; math still renders
+ * without it, just unstyled.
+ */
+let katexRender = null;
+/**
+ * Flips to true once KaTeX has loaded. The math view reads it as a signal
+ * dependency so any math that fell back to raw source while KaTeX was still
+ * loading re-renders once it becomes available.
+ */
+const katexReady = signal(false, ...(ngDevMode ? [{ debugName: "katexReady" }] : []));
+/** Resolves once the KaTeX import has settled (success or failure). Tests await this. */
+const katexLoaded = import('katex')
+    .then((m) => {
+    const katex = (m.default ?? m);
+    katexRender = (latex, displayMode) => 
+    // throwOnError:true so invalid LaTeX throws → we catch → raw-source
+    // fallback, instead of KaTeX emitting its own red error markup.
+    katex.renderToString(latex, { displayMode, throwOnError: true });
+    katexReady.set(true);
+})
+    .catch(() => {
+    katexRender = null;
+});
+/**
+ * Render LaTeX to a KaTeX HTML string, or null if KaTeX is unavailable or the
+ * input throws (invalid LaTeX) — the caller then renders the raw `$…$` source.
+ */
+function renderMath(latex, displayMode) {
+    if (!katexRender)
+        return null;
+    try {
+        return katexRender(latex, displayMode);
+    }
+    catch {
+        return null;
+    }
+}
+
+// libs/chat/src/lib/markdown/views/markdown-math.component.ts
+// SPDX-License-Identifier: MIT
+/** Opener/closer source text per delimiter, used for the raw fallback. */
+const DELIMITERS = {
+    $: ['$', '$'],
+    '$$': ['$$', '$$'],
+    '\\(\\)': ['\\(', '\\)'],
+    '\\[\\]': ['\\[', '\\]'],
+};
+/**
+ * Renders a `math-inline` / `math-display` markdown node as KaTeX. KaTeX is
+ * lazy-loaded (see katex-loader); until it resolves, or if the LaTeX is
+ * invalid, the raw `$…$` source is shown — never blank, never a crash.
+ */
+class MarkdownMathComponent {
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    sanitizer = inject(DomSanitizer);
+    display = computed(() => this.node().type === 'math-display', ...(ngDevMode ? [{ debugName: "display" }] : []));
+    raw = computed(() => {
+        const n = this.node();
+        const [open, close] = DELIMITERS[n.delimiter];
+        return `${open}${n.text}${close}`;
+    }, ...(ngDevMode ? [{ debugName: "raw" }] : []));
+    html = computed(() => {
+        katexReady(); // re-render once KaTeX finishes loading
+        const n = this.node();
+        const out = renderMath(n.text, n.type === 'math-display');
+        if (out == null)
+            return null;
+        // Trust KaTeX output directly: with KaTeX's default `trust:false` it emits
+        // only safe presentational markup (no scripts/event handlers/links), and
+        // Angular's HTML sanitizer would strip the inline styles KaTeX layout
+        // depends on.
+        return this.sanitizer.bypassSecurityTrustHtml(out);
+    }, ...(ngDevMode ? [{ debugName: "html" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownMathComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: MarkdownMathComponent, isStandalone: true, selector: "chat-md-math", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (html(); as h) {
+      <span
+        class="chat-md-math"
+        [class.chat-md-math--display]="display()"
+        [innerHTML]="h"
+      ></span>
+    } @else {
+      <span class="chat-md-math chat-md-math--raw">{{ raw() }}</span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownMathComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'chat-md-math',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+    @if (html(); as h) {
+      <span
+        class="chat-md-math"
+        [class.chat-md-math--display]="display()"
+        [innerHTML]="h"
+      ></span>
+    } @else {
+      <span class="chat-md-math chat-md-math--raw">{{ raw() }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
+
 // libs/chat/src/lib/markdown/views/markdown-link.component.ts
 // SPDX-License-Identifier: MIT
 class MarkdownLinkComponent {
@@ -2444,6 +2609,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                 }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
 
+// libs/chat/src/lib/markdown/views/markdown-html.component.ts
+// SPDX-License-Identifier: MIT
+/**
+ * Renders a `html-block` / `html-inline` markdown node as **escaped text** —
+ * the raw HTML is shown literally (Angular interpolation auto-escapes it),
+ * never injected as live markup. This preserves the pre-0.4 behavior where
+ * raw HTML was plain text, and keeps the chat XSS-safe: model-emitted
+ * `<script>`, `<iframe>`, etc. are displayed as text and never executed.
+ */
+class MarkdownHtmlComponent {
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    raw = computed(() => this.node().raw, ...(ngDevMode ? [{ debugName: "raw" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownHtmlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: MarkdownHtmlComponent, isStandalone: true, selector: "chat-md-html", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `{{ raw() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownHtmlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'chat-md-html',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `{{ raw() }}`,
+                }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
+
 // libs/chat/src/lib/markdown/cacheplane-markdown-views.ts
 // SPDX-License-Identifier: MIT
 /**
@@ -2467,6 +2657,8 @@ const cacheplaneMarkdownViews = views({
     'strong': MarkdownStrongComponent,
     'strikethrough': MarkdownStrikethroughComponent,
     'inline-code': MarkdownInlineCodeComponent,
+    'math-inline': MarkdownMathComponent,
+    'math-display': MarkdownMathComponent,
     'link': MarkdownLinkComponent,
     'autolink': MarkdownAutolinkComponent,
     'image': MarkdownImageComponent,
@@ -2476,6 +2668,10 @@ const cacheplaneMarkdownViews = views({
     'table': MarkdownTableComponent,
     'table-row': MarkdownTableRowComponent,
     'table-cell': MarkdownTableCellComponent,
+    // Raw HTML (added by partial-markdown 0.4.x) renders as escaped literal text
+    // — XSS-safe, and matches the pre-0.4 behavior where HTML was plain text.
+    'html-block': MarkdownHtmlComponent,
+    'html-inline': MarkdownHtmlComponent,
 });
 
 // libs/chat/src/lib/streaming/streaming-markdown.component.ts
@@ -2569,7 +2765,7 @@ class ChatStreamingMdComponent {
     @if (root(); as r) {
       <chat-md-children [parent]="r" />
     }
-  `, isInline: true, styles: ["chat-streaming-md{display:block;color:var(--ngaf-chat-text);line-height:var(--ngaf-chat-line-height)}chat-streaming-md h1,chat-streaming-md h2,chat-streaming-md h3,chat-streaming-md h4,chat-streaming-md h5,chat-streaming-md h6{font-weight:600;line-height:1.25;margin:1.25rem 0 .75rem}chat-streaming-md h1:first-child,chat-streaming-md h2:first-child,chat-streaming-md h3:first-child,chat-streaming-md h4:first-child,chat-streaming-md h5:first-child,chat-streaming-md h6:first-child{margin-top:0}chat-streaming-md h1{font-size:1.5em;font-weight:700}chat-streaming-md h2{font-size:1.25em}chat-streaming-md h3{font-size:1.1em}chat-streaming-md h4{font-size:1em}chat-streaming-md h5,chat-streaming-md h6{font-size:.95em;color:var(--ngaf-chat-text-muted)}chat-streaming-md p{margin:0 0 .75rem;line-height:1.6;font-size:var(--ngaf-chat-font-size)}chat-streaming-md p:last-child{margin-bottom:0}chat-streaming-md strong,chat-streaming-md b{font-weight:700}chat-streaming-md em,chat-streaming-md i{font-style:italic}chat-streaming-md del,chat-streaming-md s{text-decoration:line-through;color:var(--ngaf-chat-text-muted)}chat-streaming-md mark{background:var(--ngaf-chat-surface-alt);padding:0 2px;border-radius:2px}chat-streaming-md sub{font-size:.75em;vertical-align:sub}chat-streaming-md sup{font-size:.75em;vertical-align:super}chat-streaming-md a{color:var(--ngaf-chat-primary);text-decoration:underline;text-underline-offset:2px}chat-streaming-md a:hover{text-decoration-thickness:2px}chat-streaming-md ul,chat-streaming-md ol{margin:0 0 .75rem;padding-left:1.5rem}chat-streaming-md ul{list-style:disc outside}chat-streaming-md ol{list-style:decimal outside}chat-streaming-md ul ul{list-style:circle outside}chat-streaming-md ul ul ul{list-style:square outside}chat-streaming-md li{margin:.2rem 0}chat-streaming-md li::marker{color:var(--ngaf-chat-text-muted)}chat-streaming-md li>p{margin:0 0 .25rem}chat-streaming-md li>ul,chat-streaming-md li>ol{margin:.25rem 0 0}chat-streaming-md li:has(>input[type=checkbox]){list-style:none;margin-left:-1.25rem}chat-streaming-md li>input[type=checkbox]{margin-right:.5rem;vertical-align:middle}chat-streaming-md code{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text);padding:1px 5px;border-radius:4px;font-family:var(--ngaf-chat-font-mono);font-size:.9em}chat-streaming-md pre{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text);padding:12px 14px;border-radius:var(--ngaf-chat-radius-card);overflow-x:auto;font-family:var(--ngaf-chat-font-mono);font-size:var(--ngaf-chat-font-size-sm);line-height:1.5;margin:0 0 .75rem}chat-streaming-md pre code{background:transparent;padding:0;border-radius:0;font-size:inherit}chat-streaming-md blockquote{border-left:3px solid var(--ngaf-chat-separator);padding:.25rem 0 .25rem 12px;margin:0 0 .75rem;color:var(--ngaf-chat-text-muted)}chat-streaming-md blockquote>:last-child{margin-bottom:0}chat-streaming-md hr{border:none;border-top:1px solid var(--ngaf-chat-separator);margin:1rem 0}chat-streaming-md table{border-collapse:collapse;margin:0 0 .75rem;width:100%;font-size:.95em}chat-streaming-md thead{background:var(--ngaf-chat-surface-alt)}chat-streaming-md th,chat-streaming-md td{border:1px solid var(--ngaf-chat-separator);padding:6px 10px;text-align:left;vertical-align:top}chat-streaming-md th{font-weight:600}chat-streaming-md chat-md-table{display:block;overflow-x:auto;max-width:100%;margin:0 0 .75rem}chat-streaming-md chat-md-table-row{display:contents}chat-streaming-md chat-md-table-cell{display:contents}chat-streaming-md chat-md-table>table{margin:0}chat-streaming-md li.chat-md-list-item--task{list-style:none;margin-left:-1.25rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}chat-streaming-md li.chat-md-list-item--task>input[type=checkbox]{margin:0;flex:0 0 auto;transform:translateY(2px)}chat-streaming-md li.chat-md-list-item--task>chat-md-children{flex:1 1 auto;min-width:0}chat-streaming-md li.chat-md-list-item--task>chat-md-children>chat-md-paragraph:first-child>p{margin:0}chat-streaming-md img{max-width:100%;height:auto;border-radius:6px}chat-streaming-md .chat-md-image--broken{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .5rem;background:var(--ngaf-chat-surface-alt);border:1px dashed var(--ngaf-chat-separator);border-radius:6px;font-size:.9em;color:var(--ngaf-chat-text-muted, currentColor);opacity:.85}chat-streaming-md .chat-md-image__icon{font-size:1em;line-height:1}chat-streaming-md .chat-md-image__alt{font-style:italic}\n"], dependencies: [{ kind: "component", type: MarkdownChildrenComponent, selector: "chat-md-children", inputs: ["parent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["chat-streaming-md{display:block;color:var(--ngaf-chat-text);line-height:var(--ngaf-chat-line-height)}chat-streaming-md h1,chat-streaming-md h2,chat-streaming-md h3,chat-streaming-md h4,chat-streaming-md h5,chat-streaming-md h6{font-weight:600;line-height:1.25;margin:1.25rem 0 .75rem}chat-streaming-md h1:first-child,chat-streaming-md h2:first-child,chat-streaming-md h3:first-child,chat-streaming-md h4:first-child,chat-streaming-md h5:first-child,chat-streaming-md h6:first-child{margin-top:0}chat-streaming-md h1{font-size:1.5em;font-weight:700}chat-streaming-md h2{font-size:1.25em}chat-streaming-md h3{font-size:1.1em}chat-streaming-md h4{font-size:1em}chat-streaming-md h5,chat-streaming-md h6{font-size:.95em;color:var(--ngaf-chat-text-muted)}chat-streaming-md p{margin:0 0 .75rem;line-height:1.6;font-size:var(--ngaf-chat-font-size)}chat-streaming-md p:last-child{margin-bottom:0}chat-streaming-md strong,chat-streaming-md b{font-weight:700}chat-streaming-md em,chat-streaming-md i{font-style:italic}chat-streaming-md del,chat-streaming-md s{text-decoration:line-through;color:var(--ngaf-chat-text-muted)}chat-streaming-md mark{background:var(--ngaf-chat-surface-alt);padding:0 2px;border-radius:2px}chat-streaming-md sub{font-size:.75em;vertical-align:sub}chat-streaming-md sup{font-size:.75em;vertical-align:super}chat-streaming-md a{color:var(--ngaf-chat-primary);text-decoration:underline;text-underline-offset:2px}chat-streaming-md a:hover{text-decoration-thickness:2px}chat-streaming-md ul,chat-streaming-md ol{margin:0 0 .75rem;padding-left:1.5rem}chat-streaming-md ul{list-style:disc outside}chat-streaming-md ol{list-style:decimal outside}chat-streaming-md ul ul{list-style:circle outside}chat-streaming-md ul ul ul{list-style:square outside}chat-streaming-md li{margin:.2rem 0}chat-streaming-md li::marker{color:var(--ngaf-chat-text-muted)}chat-streaming-md li>p{margin:0 0 .25rem}chat-streaming-md li>ul,chat-streaming-md li>ol{margin:.25rem 0 0}chat-streaming-md li:has(>input[type=checkbox]){list-style:none;margin-left:-1.25rem}chat-streaming-md li>input[type=checkbox]{margin-right:.5rem;vertical-align:middle}chat-streaming-md code{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text);padding:1px 5px;border-radius:4px;font-family:var(--ngaf-chat-font-mono);font-size:.9em}chat-streaming-md pre{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text);padding:12px 14px;border-radius:var(--ngaf-chat-radius-card);overflow-x:auto;font-family:var(--ngaf-chat-font-mono);font-size:var(--ngaf-chat-font-size-sm);line-height:1.5;margin:0 0 .75rem}chat-streaming-md pre code{background:transparent;padding:0;border-radius:0;font-size:inherit}chat-streaming-md blockquote{border-left:3px solid var(--ngaf-chat-separator);padding:.25rem 0 .25rem 12px;margin:0 0 .75rem;color:var(--ngaf-chat-text-muted)}chat-streaming-md blockquote>:last-child{margin-bottom:0}chat-streaming-md hr{border:none;border-top:1px solid var(--ngaf-chat-separator);margin:1rem 0}chat-streaming-md table{border-collapse:collapse;margin:0 0 .75rem;width:100%;font-size:.95em}chat-streaming-md thead{background:var(--ngaf-chat-surface-alt)}chat-streaming-md th,chat-streaming-md td{border:1px solid var(--ngaf-chat-separator);padding:6px 10px;text-align:left;vertical-align:top}chat-streaming-md th{font-weight:600}chat-streaming-md chat-md-table{display:block;overflow-x:auto;max-width:100%;margin:0 0 .75rem}chat-streaming-md chat-md-table-row{display:contents}chat-streaming-md chat-md-table-cell{display:contents}chat-streaming-md chat-md-table>table{margin:0}chat-streaming-md li.chat-md-list-item--task{list-style:none;margin-left:-1.25rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}chat-streaming-md li.chat-md-list-item--task>input[type=checkbox]{margin:0;flex:0 0 auto;transform:translateY(2px)}chat-streaming-md li.chat-md-list-item--task>chat-md-children{flex:1 1 auto;min-width:0}chat-streaming-md li.chat-md-list-item--task>chat-md-children>chat-md-paragraph:first-child>p{margin:0}chat-streaming-md img{max-width:100%;height:auto;border-radius:6px}chat-streaming-md .chat-md-image--broken{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .5rem;background:var(--ngaf-chat-surface-alt);border:1px dashed var(--ngaf-chat-separator);border-radius:6px;font-size:.9em;color:var(--ngaf-chat-text-muted, currentColor);opacity:.85}chat-streaming-md .chat-md-image__icon{font-size:1em;line-height:1}chat-streaming-md .chat-md-image__alt{font-style:italic}chat-streaming-md .chat-md-math--display{display:block;margin:.5em 0;overflow-x:auto}chat-streaming-md .chat-md-math--raw{font-family:var(--ngaf-chat-font-mono, ui-monospace, monospace)}\n"], dependencies: [{ kind: "component", type: MarkdownChildrenComponent, selector: "chat-md-children", inputs: ["parent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatStreamingMdComponent, decorators: [{
             type: Component,
@@ -2583,7 +2779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                             useFactory: (host) => host.resolvedRegistry(),
                             deps: [ChatStreamingMdComponent],
                         },
-                    ], styles: ["chat-streaming-md{display:block;color:var(--ngaf-chat-text);line-height:var(--ngaf-chat-line-height)}chat-streaming-md h1,chat-streaming-md h2,chat-streaming-md h3,chat-streaming-md h4,chat-streaming-md h5,chat-streaming-md h6{font-weight:600;line-height:1.25;margin:1.25rem 0 .75rem}chat-streaming-md h1:first-child,chat-streaming-md h2:first-child,chat-streaming-md h3:first-child,chat-streaming-md h4:first-child,chat-streaming-md h5:first-child,chat-streaming-md h6:first-child{margin-top:0}chat-streaming-md h1{font-size:1.5em;font-weight:700}chat-streaming-md h2{font-size:1.25em}chat-streaming-md h3{font-size:1.1em}chat-streaming-md h4{font-size:1em}chat-streaming-md h5,chat-streaming-md h6{font-size:.95em;color:var(--ngaf-chat-text-muted)}chat-streaming-md p{margin:0 0 .75rem;line-height:1.6;font-size:var(--ngaf-chat-font-size)}chat-streaming-md p:last-child{margin-bottom:0}chat-streaming-md strong,chat-streaming-md b{font-weight:700}chat-streaming-md em,chat-streaming-md i{font-style:italic}chat-streaming-md del,chat-streaming-md s{text-decoration:line-through;color:var(--ngaf-chat-text-muted)}chat-streaming-md mark{background:var(--ngaf-chat-surface-alt);padding:0 2px;border-radius:2px}chat-streaming-md sub{font-size:.75em;vertical-align:sub}chat-streaming-md sup{font-size:.75em;vertical-align:super}chat-streaming-md a{color:var(--ngaf-chat-primary);text-decoration:underline;text-underline-offset:2px}chat-streaming-md a:hover{text-decoration-thickness:2px}chat-streaming-md ul,chat-streaming-md ol{margin:0 0 .75rem;padding-left:1.5rem}chat-streaming-md ul{list-style:disc outside}chat-streaming-md ol{list-style:decimal outside}chat-streaming-md ul ul{list-style:circle outside}chat-streaming-md ul ul ul{list-style:square outside}chat-streaming-md li{margin:.2rem 0}chat-streaming-md li::marker{color:var(--ngaf-chat-text-muted)}chat-streaming-md li>p{margin:0 0 .25rem}chat-streaming-md li>ul,chat-streaming-md li>ol{margin:.25rem 0 0}chat-streaming-md li:has(>input[type=checkbox]){list-style:none;margin-left:-1.25rem}chat-streaming-md li>input[type=checkbox]{margin-right:.5rem;vertical-align:middle}chat-streaming-md code{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text);padding:1px 5px;border-radius:4px;font-family:var(--ngaf-chat-font-mono);font-size:.9em}chat-streaming-md pre{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text);padding:12px 14px;border-radius:var(--ngaf-chat-radius-card);overflow-x:auto;font-family:var(--ngaf-chat-font-mono);font-size:var(--ngaf-chat-font-size-sm);line-height:1.5;margin:0 0 .75rem}chat-streaming-md pre code{background:transparent;padding:0;border-radius:0;font-size:inherit}chat-streaming-md blockquote{border-left:3px solid var(--ngaf-chat-separator);padding:.25rem 0 .25rem 12px;margin:0 0 .75rem;color:var(--ngaf-chat-text-muted)}chat-streaming-md blockquote>:last-child{margin-bottom:0}chat-streaming-md hr{border:none;border-top:1px solid var(--ngaf-chat-separator);margin:1rem 0}chat-streaming-md table{border-collapse:collapse;margin:0 0 .75rem;width:100%;font-size:.95em}chat-streaming-md thead{background:var(--ngaf-chat-surface-alt)}chat-streaming-md th,chat-streaming-md td{border:1px solid var(--ngaf-chat-separator);padding:6px 10px;text-align:left;vertical-align:top}chat-streaming-md th{font-weight:600}chat-streaming-md chat-md-table{display:block;overflow-x:auto;max-width:100%;margin:0 0 .75rem}chat-streaming-md chat-md-table-row{display:contents}chat-streaming-md chat-md-table-cell{display:contents}chat-streaming-md chat-md-table>table{margin:0}chat-streaming-md li.chat-md-list-item--task{list-style:none;margin-left:-1.25rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}chat-streaming-md li.chat-md-list-item--task>input[type=checkbox]{margin:0;flex:0 0 auto;transform:translateY(2px)}chat-streaming-md li.chat-md-list-item--task>chat-md-children{flex:1 1 auto;min-width:0}chat-streaming-md li.chat-md-list-item--task>chat-md-children>chat-md-paragraph:first-child>p{margin:0}chat-streaming-md img{max-width:100%;height:auto;border-radius:6px}chat-streaming-md .chat-md-image--broken{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .5rem;background:var(--ngaf-chat-surface-alt);border:1px dashed var(--ngaf-chat-separator);border-radius:6px;font-size:.9em;color:var(--ngaf-chat-text-muted, currentColor);opacity:.85}chat-streaming-md .chat-md-image__icon{font-size:1em;line-height:1}chat-streaming-md .chat-md-image__alt{font-style:italic}\n"] }]
+                    ], styles: ["chat-streaming-md{display:block;color:var(--ngaf-chat-text);line-height:var(--ngaf-chat-line-height)}chat-streaming-md h1,chat-streaming-md h2,chat-streaming-md h3,chat-streaming-md h4,chat-streaming-md h5,chat-streaming-md h6{font-weight:600;line-height:1.25;margin:1.25rem 0 .75rem}chat-streaming-md h1:first-child,chat-streaming-md h2:first-child,chat-streaming-md h3:first-child,chat-streaming-md h4:first-child,chat-streaming-md h5:first-child,chat-streaming-md h6:first-child{margin-top:0}chat-streaming-md h1{font-size:1.5em;font-weight:700}chat-streaming-md h2{font-size:1.25em}chat-streaming-md h3{font-size:1.1em}chat-streaming-md h4{font-size:1em}chat-streaming-md h5,chat-streaming-md h6{font-size:.95em;color:var(--ngaf-chat-text-muted)}chat-streaming-md p{margin:0 0 .75rem;line-height:1.6;font-size:var(--ngaf-chat-font-size)}chat-streaming-md p:last-child{margin-bottom:0}chat-streaming-md strong,chat-streaming-md b{font-weight:700}chat-streaming-md em,chat-streaming-md i{font-style:italic}chat-streaming-md del,chat-streaming-md s{text-decoration:line-through;color:var(--ngaf-chat-text-muted)}chat-streaming-md mark{background:var(--ngaf-chat-surface-alt);padding:0 2px;border-radius:2px}chat-streaming-md sub{font-size:.75em;vertical-align:sub}chat-streaming-md sup{font-size:.75em;vertical-align:super}chat-streaming-md a{color:var(--ngaf-chat-primary);text-decoration:underline;text-underline-offset:2px}chat-streaming-md a:hover{text-decoration-thickness:2px}chat-streaming-md ul,chat-streaming-md ol{margin:0 0 .75rem;padding-left:1.5rem}chat-streaming-md ul{list-style:disc outside}chat-streaming-md ol{list-style:decimal outside}chat-streaming-md ul ul{list-style:circle outside}chat-streaming-md ul ul ul{list-style:square outside}chat-streaming-md li{margin:.2rem 0}chat-streaming-md li::marker{color:var(--ngaf-chat-text-muted)}chat-streaming-md li>p{margin:0 0 .25rem}chat-streaming-md li>ul,chat-streaming-md li>ol{margin:.25rem 0 0}chat-streaming-md li:has(>input[type=checkbox]){list-style:none;margin-left:-1.25rem}chat-streaming-md li>input[type=checkbox]{margin-right:.5rem;vertical-align:middle}chat-streaming-md code{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text);padding:1px 5px;border-radius:4px;font-family:var(--ngaf-chat-font-mono);font-size:.9em}chat-streaming-md pre{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text);padding:12px 14px;border-radius:var(--ngaf-chat-radius-card);overflow-x:auto;font-family:var(--ngaf-chat-font-mono);font-size:var(--ngaf-chat-font-size-sm);line-height:1.5;margin:0 0 .75rem}chat-streaming-md pre code{background:transparent;padding:0;border-radius:0;font-size:inherit}chat-streaming-md blockquote{border-left:3px solid var(--ngaf-chat-separator);padding:.25rem 0 .25rem 12px;margin:0 0 .75rem;color:var(--ngaf-chat-text-muted)}chat-streaming-md blockquote>:last-child{margin-bottom:0}chat-streaming-md hr{border:none;border-top:1px solid var(--ngaf-chat-separator);margin:1rem 0}chat-streaming-md table{border-collapse:collapse;margin:0 0 .75rem;width:100%;font-size:.95em}chat-streaming-md thead{background:var(--ngaf-chat-surface-alt)}chat-streaming-md th,chat-streaming-md td{border:1px solid var(--ngaf-chat-separator);padding:6px 10px;text-align:left;vertical-align:top}chat-streaming-md th{font-weight:600}chat-streaming-md chat-md-table{display:block;overflow-x:auto;max-width:100%;margin:0 0 .75rem}chat-streaming-md chat-md-table-row{display:contents}chat-streaming-md chat-md-table-cell{display:contents}chat-streaming-md chat-md-table>table{margin:0}chat-streaming-md li.chat-md-list-item--task{list-style:none;margin-left:-1.25rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}chat-streaming-md li.chat-md-list-item--task>input[type=checkbox]{margin:0;flex:0 0 auto;transform:translateY(2px)}chat-streaming-md li.chat-md-list-item--task>chat-md-children{flex:1 1 auto;min-width:0}chat-streaming-md li.chat-md-list-item--task>chat-md-children>chat-md-paragraph:first-child>p{margin:0}chat-streaming-md img{max-width:100%;height:auto;border-radius:6px}chat-streaming-md .chat-md-image--broken{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .5rem;background:var(--ngaf-chat-surface-alt);border:1px dashed var(--ngaf-chat-separator);border-radius:6px;font-size:.9em;color:var(--ngaf-chat-text-muted, currentColor);opacity:.85}chat-streaming-md .chat-md-image__icon{font-size:1em;line-height:1}chat-streaming-md .chat-md-image__alt{font-style:italic}chat-streaming-md .chat-md-math--display{display:block;margin:.5em 0;overflow-x:auto}chat-streaming-md .chat-md-math--raw{font-family:var(--ngaf-chat-font-mono, ui-monospace, monospace)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], streaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "streaming", required: false }] }], viewRegistry: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewRegistry", required: false }] }] } });
 
 // SPDX-License-Identifier: MIT
@@ -3148,6 +3344,18 @@ const CHAT_TYPING_INDICATOR_STYLES = `
 
 // libs/chat/src/lib/primitives/chat-typing-indicator/chat-typing-indicator.component.ts
 // SPDX-License-Identifier: MIT
+/**
+ * Whether the agent should show a "typing" indicator — it is loading and has
+ * not yet started streaming the assistant's reply.
+ *
+ * @param agent The agent to inspect.
+ * @returns `true` while the agent is awaiting a response but no assistant text
+ *   has streamed yet; `false` once tokens arrive or the agent is idle.
+ * @example
+ * ```ts
+ * \@if (isTyping(agent)) { <chat-typing-indicator [agent]="agent" /> }
+ * ```
+ */
 function isTyping(agent) {
     if (!agent.isLoading())
         return false;
@@ -4056,6 +4264,19 @@ const CHAT_ERROR_STYLES = `
 
 // libs/chat/src/lib/primitives/chat-error/chat-error.component.ts
 // SPDX-License-Identifier: MIT
+/**
+ * Coerce an unknown error value into a human-readable message string — reads
+ * `.message` from `Error`s, returns strings as-is, and `String()`-casts the
+ * rest. Useful when rendering an agent's `error` outside the built-in
+ * `chat-error` component.
+ *
+ * @param error Any caught/agent error value.
+ * @returns The message text, or `null` when `error` is nullish.
+ * @example
+ * ```ts
+ * const msg = extractErrorMessage(agent.error());
+ * ```
+ */
 function extractErrorMessage(error) {
     if (!error)
         return null;
@@ -4118,6 +4339,18 @@ const CHAT_INTERRUPT_STYLES = `
 
 // libs/chat/src/lib/primitives/chat-interrupt/chat-interrupt.component.ts
 // SPDX-License-Identifier: MIT
+/**
+ * Read the agent's current human-in-the-loop interrupt, if any.
+ *
+ * @param agent The agent to inspect.
+ * @returns The pending {@link AgentInterrupt}, or `undefined` when the agent is
+ *   not currently waiting on an interrupt.
+ * @example
+ * ```ts
+ * const interrupt = getInterrupt(agent);
+ * if (interrupt) agent.resume('approved');
+ * ```
+ */
 function getInterrupt(agent) {
     return agent.interrupt?.();
 }
@@ -4298,6 +4531,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
   `, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block}.tcc__name{font-family:var(--ngaf-chat-font-mono);font-size:var(--ngaf-chat-font-size-sm, 13px);color:var(--ngaf-chat-text-muted);font-weight:400;padding-left:2px}.tcc__pill{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:9999px;background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text-muted);font-size:10px;font-weight:500;margin-left:6px;line-height:1.4}.tcc__pill svg{width:10px;height:10px}.tcc__pill[data-status=running] svg{animation:tcc-spin .8s linear infinite}@keyframes tcc-spin{to{transform:rotate(360deg)}}.tcc__section{padding:8px 0}.tcc__section+.tcc__section{border-top:1px solid var(--ngaf-chat-separator)}.tcc__section-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ngaf-chat-text-muted);margin:0 0 4px}.tcc__section-body{font-family:var(--ngaf-chat-font-mono);font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text);white-space:pre-wrap;overflow-x:auto;margin:0}\n"] }]
         }], propDecorators: { toolCall: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolCall", required: true }] }], defaultCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCollapsed", required: false }] }] } });
 
+// libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.ts
+// SPDX-License-Identifier: MIT
+/**
+ * Returns a CSS style string for a subagent's status badge.
+ * Kept exported for backward compatibility with existing consumers; the
+ * preferred way to style status visually is via the `data-status` attribute
+ * + CSS selectors (see component styles below).
+ */
+function statusColor(status) {
+    switch (status) {
+        case 'pending': return 'background: var(--ngaf-chat-surface-alt); color: var(--ngaf-chat-text-muted);';
+        case 'running': return 'background: var(--ngaf-chat-warning-bg); color: var(--ngaf-chat-warning-text);';
+        case 'complete': return 'color: var(--ngaf-chat-success);';
+        case 'error': return 'background: var(--ngaf-chat-error-bg); color: var(--ngaf-chat-error-text);';
+    }
+}
+function statusToTraceState(s) {
+    switch (s) {
+        case 'pending': return 'pending';
+        case 'running': return 'running';
+        case 'complete': return 'done';
+        case 'error': return 'error';
+    }
+}
+class ChatSubagentCardComponent {
+    subagent = input.required(...(ngDevMode ? [{ debugName: "subagent" }] : []));
+    state = computed(() => statusToTraceState(this.subagent().status()), ...(ngDevMode ? [{ debugName: "state" }] : []));
+    textOf(m) {
+        const c = m.content;
+        return typeof c === 'string' ? c : '';
+    }
+    toolCallsFor(m) {
+        const ids = m.toolCallIds ?? [];
+        if (ids.length === 0)
+            return [];
+        const all = this.subagent().toolCalls?.() ?? [];
+        return ids.map((id) => all.find((tc) => tc.id === id)).filter((tc) => !!tc);
+    }
+    toToolCallInfo(tc) {
+        return { id: tc.id, name: tc.name, args: tc.args, result: tc.result, status: tc.status };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatSubagentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatSubagentCardComponent, isStandalone: true, selector: "chat-subagent-card", inputs: { subagent: { classPropertyName: "subagent", publicName: "subagent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <chat-trace [state]="state()">
+      <span traceLabel>
+        <span class="sac__name">{{ subagent().name ?? 'Subagent' }}</span>
+        <span class="sac__id">{{ subagent().toolCallId }}</span>
+        <span class="sac__pill" [attr.data-status]="subagent().status()">{{ subagent().status() }}</span>
+      </span>
+      <div class="sac__count" traceMeta>{{ subagent().messages().length }} message(s)</div>
+      @for (m of subagent().messages(); track m.id) {
+        <div class="sac__msg" [attr.data-role]="m.role">
+          @if (m.reasoning) {
+            <div class="sac__reasoning">{{ m.reasoning }}</div>
+          }
+          @if (textOf(m); as t) {
+            <chat-streaming-md [content]="t" />
+          }
+          @for (tc of toolCallsFor(m); track tc.id) {
+            <chat-tool-call-card [toolCall]="toToolCallInfo(tc)" />
+          }
+        </div>
+      }
+    </chat-trace>
+  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block}.sac__name{color:var(--ngaf-chat-text);font-weight:500;font-size:var(--ngaf-chat-font-size-sm)}.sac__id{font-family:var(--ngaf-chat-font-mono);font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted);margin-left:4px}.sac__pill{padding:1px 8px;border-radius:9999px;font-size:11px;font-weight:500;margin-left:4px}.sac__pill[data-status=pending]{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text-muted)}.sac__pill[data-status=running]{background:var(--ngaf-chat-warning-bg);color:var(--ngaf-chat-warning-text)}.sac__pill[data-status=complete]{color:var(--ngaf-chat-success)}.sac__pill[data-status=error]{background:var(--ngaf-chat-error-bg);color:var(--ngaf-chat-error-text)}.sac__count{font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted)}.sac__msg{padding:6px 0}.sac__msg+.sac__msg{border-top:1px solid var(--ngaf-chat-separator)}.sac__reasoning{font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted);font-style:italic;margin-bottom:4px}\n"], dependencies: [{ kind: "component", type: ChatTraceComponent, selector: "chat-trace", inputs: ["state", "defaultExpanded"] }, { kind: "component", type: ChatToolCallCardComponent, selector: "chat-tool-call-card", inputs: ["toolCall", "defaultCollapsed"] }, { kind: "component", type: ChatStreamingMdComponent, selector: "chat-streaming-md", inputs: ["content", "streaming", "viewRegistry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatSubagentCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-subagent-card', standalone: true, imports: [ChatTraceComponent, ChatToolCallCardComponent, ChatStreamingMdComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <chat-trace [state]="state()">
+      <span traceLabel>
+        <span class="sac__name">{{ subagent().name ?? 'Subagent' }}</span>
+        <span class="sac__id">{{ subagent().toolCallId }}</span>
+        <span class="sac__pill" [attr.data-status]="subagent().status()">{{ subagent().status() }}</span>
+      </span>
+      <div class="sac__count" traceMeta>{{ subagent().messages().length }} message(s)</div>
+      @for (m of subagent().messages(); track m.id) {
+        <div class="sac__msg" [attr.data-role]="m.role">
+          @if (m.reasoning) {
+            <div class="sac__reasoning">{{ m.reasoning }}</div>
+          }
+          @if (textOf(m); as t) {
+            <chat-streaming-md [content]="t" />
+          }
+          @for (tc of toolCallsFor(m); track tc.id) {
+            <chat-tool-call-card [toolCall]="toToolCallInfo(tc)" />
+          }
+        </div>
+      }
+    </chat-trace>
+  `, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block}.sac__name{color:var(--ngaf-chat-text);font-weight:500;font-size:var(--ngaf-chat-font-size-sm)}.sac__id{font-family:var(--ngaf-chat-font-mono);font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted);margin-left:4px}.sac__pill{padding:1px 8px;border-radius:9999px;font-size:11px;font-weight:500;margin-left:4px}.sac__pill[data-status=pending]{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text-muted)}.sac__pill[data-status=running]{background:var(--ngaf-chat-warning-bg);color:var(--ngaf-chat-warning-text)}.sac__pill[data-status=complete]{color:var(--ngaf-chat-success)}.sac__pill[data-status=error]{background:var(--ngaf-chat-error-bg);color:var(--ngaf-chat-error-text)}.sac__count{font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted)}.sac__msg{padding:6px 0}.sac__msg+.sac__msg{border-top:1px solid var(--ngaf-chat-separator)}.sac__reasoning{font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted);font-style:italic;margin-bottom:4px}\n"] }]
+        }], propDecorators: { subagent: [{ type: i0.Input, args: [{ isSignal: true, alias: "subagent", required: true }] }] } });
+
 // libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-call-template.directive.ts
 // SPDX-License-Identifier: MIT
 /**
@@ -4426,14 +4752,23 @@ class ChatToolCallsComponent {
     groups = computed(() => {
         const excludeSet = new Set(this.excludeToolNames());
         const calls = this.toolCalls().filter(tc => !excludeSet.has(tc.name));
+        const subs = this.agent().subagents?.() ?? new Map();
         const groupingMode = this.grouping();
         const registry = this.templateRegistry();
         const wildcard = registry.get('*');
         const out = [];
         for (const tc of calls) {
+            // A tool call that spawned a subagent renders as a standalone subagent
+            // card anchored to that call. It never groups with adjacent calls, on
+            // either side: it is its own group and carries a `subagent`, so the next
+            // call can't append to it (a subagent group is never a group target).
+            if (subs.has(tc.id)) {
+                out.push({ name: tc.name, calls: [tc], subagent: subs.get(tc.id) });
+                continue;
+            }
             const tpl = registry.get(tc.name) ?? wildcard;
             const last = out[out.length - 1];
-            const sameName = last && last.name === tc.name;
+            const sameName = last && !last.subagent && last.name === tc.name;
             const canGroup = groupingMode === 'auto' && sameName;
             if (canGroup) {
                 last.calls.push(tc);
@@ -4467,7 +4802,9 @@ class ChatToolCallsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatToolCallsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatToolCallsComponent, isStandalone: true, selector: "chat-tool-calls", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, groupSummary: { classPropertyName: "groupSummary", publicName: "groupSummary", isSignal: true, isRequired: false, transformFunction: null }, excludeToolNames: { classPropertyName: "excludeToolNames", publicName: "excludeToolNames", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "templates", predicate: ChatToolCallTemplateDirective, isSignal: true }], ngImport: i0, template: `
     @for (group of groups(); track $index) {
-      @if (group.calls.length > 1 && !group.templateRef) {
+      @if (group.subagent) {
+        <chat-subagent-card [subagent]="group.subagent" />
+      } @else if (group.calls.length > 1 && !group.templateRef) {
         <!-- Default grouped strip -->
         @let expanded = expandedGroups().has($index);
         <div class="ctc__group" [attr.data-group]="true" [attr.data-expanded]="expanded">
@@ -4498,13 +4835,15 @@ class ChatToolCallsComponent {
         }
       }
     }
-  `, isInline: true, 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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChatToolCallCardComponent, selector: "chat-tool-call-card", inputs: ["toolCall", "defaultCollapsed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, 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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChatToolCallCardComponent, selector: "chat-tool-call-card", inputs: ["toolCall", "defaultCollapsed"] }, { kind: "component", type: ChatSubagentCardComponent, selector: "chat-subagent-card", inputs: ["subagent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatToolCallsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chat-tool-calls', standalone: true, imports: [NgTemplateOutlet, ChatToolCallCardComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'chat-tool-calls', standalone: true, imports: [NgTemplateOutlet, ChatToolCallCardComponent, ChatSubagentCardComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @for (group of groups(); track $index) {
-      @if (group.calls.length > 1 && !group.templateRef) {
+      @if (group.subagent) {
+        <chat-subagent-card [subagent]="group.subagent" />
+      } @else if (group.calls.length > 1 && !group.templateRef) {
         <!-- Default grouped strip -->
         @let expanded = expandedGroups().has($index);
         <div class="ctc__group" [attr.data-group]="true" [attr.data-expanded]="expanded">
@@ -4778,99 +5117,6 @@ 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
-/**
- * Returns a CSS style string for a subagent's status badge.
- * Kept exported for backward compatibility with existing consumers; the
- * preferred way to style status visually is via the `data-status` attribute
- * + CSS selectors (see component styles below).
- */
-function statusColor(status) {
-    switch (status) {
-        case 'pending': return 'background: var(--ngaf-chat-surface-alt); color: var(--ngaf-chat-text-muted);';
-        case 'running': return 'background: var(--ngaf-chat-warning-bg); color: var(--ngaf-chat-warning-text);';
-        case 'complete': return 'color: var(--ngaf-chat-success);';
-        case 'error': return 'background: var(--ngaf-chat-error-bg); color: var(--ngaf-chat-error-text);';
-    }
-}
-function statusToTraceState(s) {
-    switch (s) {
-        case 'pending': return 'pending';
-        case 'running': return 'running';
-        case 'complete': return 'done';
-        case 'error': return 'error';
-    }
-}
-class ChatSubagentCardComponent {
-    subagent = input.required(...(ngDevMode ? [{ debugName: "subagent" }] : []));
-    state = computed(() => statusToTraceState(this.subagent().status()), ...(ngDevMode ? [{ debugName: "state" }] : []));
-    textOf(m) {
-        const c = m.content;
-        return typeof c === 'string' ? c : '';
-    }
-    toolCallsFor(m) {
-        const ids = m.toolCallIds ?? [];
-        if (ids.length === 0)
-            return [];
-        const all = this.subagent().toolCalls?.() ?? [];
-        return ids.map((id) => all.find((tc) => tc.id === id)).filter((tc) => !!tc);
-    }
-    toToolCallInfo(tc) {
-        return { id: tc.id, name: tc.name, args: tc.args, result: tc.result, status: tc.status };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatSubagentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatSubagentCardComponent, isStandalone: true, selector: "chat-subagent-card", inputs: { subagent: { classPropertyName: "subagent", publicName: "subagent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <chat-trace [state]="state()">
-      <span traceLabel>
-        <span class="sac__name">{{ subagent().name ?? 'Subagent' }}</span>
-        <span class="sac__id">{{ subagent().toolCallId }}</span>
-        <span class="sac__pill" [attr.data-status]="subagent().status()">{{ subagent().status() }}</span>
-      </span>
-      <div class="sac__count">{{ subagent().messages().length }} message(s)</div>
-      @for (m of subagent().messages(); track m.id) {
-        <div class="sac__msg" [attr.data-role]="m.role">
-          @if (m.reasoning) {
-            <div class="sac__reasoning">{{ m.reasoning }}</div>
-          }
-          @if (textOf(m); as t) {
-            <chat-streaming-md [content]="t" />
-          }
-          @for (tc of toolCallsFor(m); track tc.id) {
-            <chat-tool-call-card [toolCall]="toToolCallInfo(tc)" />
-          }
-        </div>
-      }
-    </chat-trace>
-  `, isInline: true, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block}.sac__name{color:var(--ngaf-chat-text);font-weight:500;font-size:var(--ngaf-chat-font-size-sm)}.sac__id{font-family:var(--ngaf-chat-font-mono);font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted);margin-left:4px}.sac__pill{padding:1px 8px;border-radius:9999px;font-size:11px;font-weight:500;margin-left:4px}.sac__pill[data-status=pending]{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text-muted)}.sac__pill[data-status=running]{background:var(--ngaf-chat-warning-bg);color:var(--ngaf-chat-warning-text)}.sac__pill[data-status=complete]{color:var(--ngaf-chat-success)}.sac__pill[data-status=error]{background:var(--ngaf-chat-error-bg);color:var(--ngaf-chat-error-text)}.sac__count{font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted)}.sac__msg{padding:6px 0}.sac__msg+.sac__msg{border-top:1px solid var(--ngaf-chat-separator)}.sac__reasoning{font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted);font-style:italic;margin-bottom:4px}\n"], dependencies: [{ kind: "component", type: ChatTraceComponent, selector: "chat-trace", inputs: ["state", "defaultExpanded"] }, { kind: "component", type: ChatToolCallCardComponent, selector: "chat-tool-call-card", inputs: ["toolCall", "defaultCollapsed"] }, { kind: "component", type: ChatStreamingMdComponent, selector: "chat-streaming-md", inputs: ["content", "streaming", "viewRegistry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatSubagentCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'chat-subagent-card', standalone: true, imports: [ChatTraceComponent, ChatToolCallCardComponent, ChatStreamingMdComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <chat-trace [state]="state()">
-      <span traceLabel>
-        <span class="sac__name">{{ subagent().name ?? 'Subagent' }}</span>
-        <span class="sac__id">{{ subagent().toolCallId }}</span>
-        <span class="sac__pill" [attr.data-status]="subagent().status()">{{ subagent().status() }}</span>
-      </span>
-      <div class="sac__count">{{ subagent().messages().length }} message(s)</div>
-      @for (m of subagent().messages(); track m.id) {
-        <div class="sac__msg" [attr.data-role]="m.role">
-          @if (m.reasoning) {
-            <div class="sac__reasoning">{{ m.reasoning }}</div>
-          }
-          @if (textOf(m); as t) {
-            <chat-streaming-md [content]="t" />
-          }
-          @for (tc of toolCallsFor(m); track tc.id) {
-            <chat-tool-call-card [toolCall]="toToolCallInfo(tc)" />
-          }
-        </div>
-      }
-    </chat-trace>
-  `, styles: [":host{font-family:var(--ngaf-chat-font-family);color:var(--ngaf-chat-text)}\n", ":host{display:block}.sac__name{color:var(--ngaf-chat-text);font-weight:500;font-size:var(--ngaf-chat-font-size-sm)}.sac__id{font-family:var(--ngaf-chat-font-mono);font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted);margin-left:4px}.sac__pill{padding:1px 8px;border-radius:9999px;font-size:11px;font-weight:500;margin-left:4px}.sac__pill[data-status=pending]{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text-muted)}.sac__pill[data-status=running]{background:var(--ngaf-chat-warning-bg);color:var(--ngaf-chat-warning-text)}.sac__pill[data-status=complete]{color:var(--ngaf-chat-success)}.sac__pill[data-status=error]{background:var(--ngaf-chat-error-bg);color:var(--ngaf-chat-error-text)}.sac__count{font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted)}.sac__msg{padding:6px 0}.sac__msg+.sac__msg{border-top:1px solid var(--ngaf-chat-separator)}.sac__reasoning{font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted);font-style:italic;margin-bottom:4px}\n"] }]
-        }], propDecorators: { subagent: [{ type: i0.Input, args: [{ isSignal: true, alias: "subagent", required: true }] }] } });
-
 // libs/chat/src/lib/primitives/chat-subagents/chat-subagents.component.ts
 // SPDX-License-Identifier: MIT
 function activeSubagentsFromAgent(agent) {
@@ -7441,6 +7687,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
         }], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], catalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalog", required: true }] }], handlers: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlers", required: false }] }], surfaceFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceFallback", required: false }] }], events: [{ type: i0.Output, args: ["events"] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
 // SPDX-License-Identifier: MIT
+/**
+ * Create a {@link ParseTreeStore} — feeds streamed JSON chunks through a
+ * partial-JSON parser and exposes the progressively-materialized spec and
+ * per-element accumulation state as signals, so a generative-UI surface can
+ * render while the spec is still arriving.
+ *
+ * @param parser The partial-JSON parser used to incrementally materialize chunks.
+ * @returns A {@link ParseTreeStore}; call `push(chunk)` as bytes stream in.
+ * @example
+ * ```ts
+ * const store = createParseTreeStore(parser);
+ * store.push('{"type":"Car');
+ * store.spec(); // best-effort Spec | null
+ * ```
+ */
 function createParseTreeStore(parser) {
     const specSignal = signal(null, ...(ngDevMode ? [{ debugName: "specSignal" }] : []));
     const elementStatesSignal = signal(new Map(), ...(ngDevMode ? [{ debugName: "elementStatesSignal" }] : []));
@@ -7581,6 +7842,19 @@ function resolveProps(value, dataModel) {
     }
     return value;
 }
+/**
+ * Create an {@link A2uiSurfaceStore} — the per-conversation store that buffers
+ * streamed A2UI surface updates, tracks each surface's data model + lifecycle
+ * state, and exposes them as signals for rendering. One store backs a chat
+ * thread's A2UI surfaces.
+ *
+ * @returns A fresh, empty {@link A2uiSurfaceStore}.
+ * @example
+ * ```ts
+ * const store = createA2uiSurfaceStore();
+ * const surfaces = store.surfaces; // Signal<Map<string, A2uiSurface>>
+ * ```
+ */
 function createA2uiSurfaceStore() {
     const surfacesSignal = signal(new Map(), ...(ngDevMode ? [{ debugName: "surfacesSignal" }] : []));
     const surfaceStatesSignal = signal(new Map(), ...(ngDevMode ? [{ debugName: "surfaceStatesSignal" }] : []));
@@ -7802,6 +8076,19 @@ function trace(...args) {
 
 // SPDX-License-Identifier: MIT
 const A2UI_PREFIX = '---a2ui_JSON---';
+/**
+ * Create a {@link ContentClassifier} — the streaming accumulator that inspects
+ * an assistant message's content as it arrives and classifies it (markdown vs a
+ * generative-UI/A2UI spec), exposing the parsed result and per-element state as
+ * signals so the renderer can switch modes mid-stream.
+ *
+ * @returns A fresh {@link ContentClassifier}; call `dispose()` when done.
+ * @example
+ * ```ts
+ * const cc = createContentClassifier();
+ * effect(() => console.log(cc.type())); // 'pending' | 'markdown' | 'spec'
+ * ```
+ */
 function createContentClassifier() {
     const typeSignal = signal('pending', ...(ngDevMode ? [{ debugName: "typeSignal" }] : []));
     const markdownSignal = signal('', ...(ngDevMode ? [{ debugName: "markdownSignal" }] : []));
@@ -8673,6 +8960,62 @@ class ChatComponent {
         const text = typeof message.content === 'string' ? message.content : '';
         return text.length === 0;
     }
+    /** The nearest preceding assistant message (skipping hidden tool messages), or undefined. */
+    prevAssistant(msgs, index) {
+        for (let j = index - 1; j >= 0; j--) {
+            if (msgs[j].role === 'tool')
+                continue;
+            return msgs[j].role === 'assistant' ? msgs[j] : undefined;
+        }
+        return undefined;
+    }
+    /**
+     * True when message[index] starts a reasoning RUN — a maximal sequence of
+     * consecutive assistant reasoning steps separated only by (hidden) tool
+     * messages. The merged reasoning pill renders once, here.
+     */
+    reasoningRunStart(index) {
+        const msgs = this.agent().messages();
+        if (!msgs[index]?.reasoning)
+            return false;
+        return !this.prevAssistant(msgs, index)?.reasoning;
+    }
+    /**
+     * Aggregate the reasoning RUN starting at `index`: joins each step's
+     * reasoning, sums durations, counts steps, and computes the streaming flag
+     * and the merged label when N > 1 ("Thought for {total} · {N} steps", or
+     * just "{N} steps" when no step reported timing).
+     */
+    reasoningRun(index) {
+        const msgs = this.agent().messages();
+        const steps = [];
+        for (let j = index; j < msgs.length; j++) {
+            const m = msgs[j];
+            if (m.role === 'tool')
+                continue; // skip hidden tool messages
+            if (m.role === 'assistant' && m.reasoning) {
+                steps.push({ msg: m, idx: j });
+                continue;
+            }
+            break; // any other message ends the run
+        }
+        const content = steps.map((s) => s.msg.reasoning ?? '').filter(Boolean).join('\n\n');
+        const durations = steps
+            .map((s) => s.msg.reasoningDurationMs)
+            .filter((d) => typeof d === 'number');
+        const durationMs = durations.length ? durations.reduce((a, b) => a + b, 0) : undefined;
+        const last = steps[steps.length - 1];
+        const streaming = last ? this.isReasoningStreaming(last.msg, last.idx) : false;
+        // Only claim a duration when at least one step reported timing. Otherwise
+        // "Thought for <1s" would read as "fast" when it really means "unknown", so
+        // drop the duration phrase and label by step count alone.
+        const label = steps.length > 1
+            ? durationMs !== undefined
+                ? `Thought for ${formatDuration(durationMs)} · ${steps.length} steps`
+                : `${steps.length} steps`
+            : undefined;
+        return { content, durationMs, streaming, label };
+    }
     classifiers = new Map();
     destroyRef = inject(DestroyRef);
     injector = inject(Injector);
@@ -9232,11 +9575,19 @@ class ChatComponent {
                   [streaming]="agent().isLoading() && i === agent().messages().length - 1"
                   [current]="i === agent().messages().length - 1"
                 >
-                  @if (message.reasoning) {
+                  <!-- Reasoning is merged across a run of consecutive (tool-
+                       separated) reasoning steps and rendered ONCE at the run's
+                       first step as "Thought for {total} · {N} steps", so a
+                       multi-step agent shows one compact pill instead of a
+                       stack of "Thought for 1s" chips. Single-step turns render
+                       a normal "Thought for {duration}" pill. -->
+                  @if (message.reasoning && reasoningRunStart(i)) {
+                    @let run = reasoningRun(i);
                     <chat-reasoning
-                      [content]="message.reasoning"
-                      [isStreaming]="isReasoningStreaming(message, i)"
-                      [durationMs]="message.reasoningDurationMs"
+                      [content]="run.content"
+                      [isStreaming]="run.streaming"
+                      [durationMs]="run.durationMs"
+                      [label]="run.label"
                     />
                   }
                   <chat-tool-calls [agent]="agent()" [message]="message" [excludeToolNames]="excludedToolNames()">
@@ -9252,7 +9603,6 @@ class ChatComponent {
                     [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" />
                   }
@@ -9284,14 +9634,21 @@ class ChatComponent {
                       />
                     }
                   }
-                  <chat-message-actions
-                    chatMessageControls
-                    [content]="content"
-                    [disabled]="agent().isLoading()"
-                    (regenerate)="onRegenerate(i)"
-                    (rate)="onRate(message, $event)"
-                    (contentCopied)="onCopy(message, $event)"
-                  />
+                  <!-- Only show message actions when there is copyable assistant
+                       text. Content-less messages (a bare tool call or a subagent
+                       delegation card) have nothing to copy/regenerate/rate, so the
+                       actions panel is pure whitespace there — suppress it to keep
+                       the stream compact. -->
+                  @if (content.trim()) {
+                    <chat-message-actions
+                      chatMessageControls
+                      [content]="content"
+                      [disabled]="agent().isLoading()"
+                      (regenerate)="onRegenerate(i)"
+                      (rate)="onRate(message, $event)"
+                      (contentCopied)="onCopy(message, $event)"
+                    />
+                  }
                 </chat-message>
               </ng-template>
 
@@ -9340,7 +9697,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: 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 });
+  `, 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: 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,
@@ -9349,7 +9706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                         ChatWindowComponent, ChatMessageListComponent, MessageTemplateDirective, ChatMessageComponent,
                         ChatInputComponent, ChatTypingIndicatorComponent, ChatErrorComponent,
                         ChatThreadListComponent, ChatGenerativeUiComponent,
-                        ChatStreamingMdComponent, ChatToolCallsComponent, ChatToolViewsComponent, ChatSubagentsComponent, A2uiSurfaceComponent,
+                        ChatStreamingMdComponent, ChatToolCallsComponent, ChatToolViewsComponent, A2uiSurfaceComponent,
                         ChatMessageActionsComponent, ChatWelcomeComponent, ChatSelectComponent, ChatReasoningComponent,
                         ChatScrollBubbleComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -9402,11 +9759,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                   [streaming]="agent().isLoading() && i === agent().messages().length - 1"
                   [current]="i === agent().messages().length - 1"
                 >
-                  @if (message.reasoning) {
+                  <!-- Reasoning is merged across a run of consecutive (tool-
+                       separated) reasoning steps and rendered ONCE at the run's
+                       first step as "Thought for {total} · {N} steps", so a
+                       multi-step agent shows one compact pill instead of a
+                       stack of "Thought for 1s" chips. Single-step turns render
+                       a normal "Thought for {duration}" pill. -->
+                  @if (message.reasoning && reasoningRunStart(i)) {
+                    @let run = reasoningRun(i);
                     <chat-reasoning
-                      [content]="message.reasoning"
-                      [isStreaming]="isReasoningStreaming(message, i)"
-                      [durationMs]="message.reasoningDurationMs"
+                      [content]="run.content"
+                      [isStreaming]="run.streaming"
+                      [durationMs]="run.durationMs"
+                      [label]="run.label"
                     />
                   }
                   <chat-tool-calls [agent]="agent()" [message]="message" [excludeToolNames]="excludedToolNames()">
@@ -9422,7 +9787,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                     [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" />
                   }
@@ -9454,14 +9818,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                       />
                     }
                   }
-                  <chat-message-actions
-                    chatMessageControls
-                    [content]="content"
-                    [disabled]="agent().isLoading()"
-                    (regenerate)="onRegenerate(i)"
-                    (rate)="onRate(message, $event)"
-                    (contentCopied)="onCopy(message, $event)"
-                  />
+                  <!-- Only show message actions when there is copyable assistant
+                       text. Content-less messages (a bare tool call or a subagent
+                       delegation card) have nothing to copy/regenerate/rate, so the
+                       actions panel is pure whitespace there — suppress it to keep
+                       the stream compact. -->
+                  @if (content.trim()) {
+                    <chat-message-actions
+                      chatMessageControls
+                      [content]="content"
+                      [disabled]="agent().isLoading()"
+                      (regenerate)="onRegenerate(i)"
+                      (rate)="onRate(message, $event)"
+                      (contentCopied)="onCopy(message, $event)"
+                    />
+                  }
                 </chat-message>
               </ng-template>
 
@@ -11179,22 +11550,6 @@ function renderMarkdownToString(content, sanitizer) {
     return plainTextToHtml(content);
 }
 
-// SPDX-License-Identifier: MIT
-/** Chevron down (▼ replacement). 12x12, stroke-based. */
-const ICON_CHEVRON_DOWN = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5L6 7.5L9 4.5"/></svg>`;
-/** Chevron up (▲ replacement). 12x12, stroke-based. */
-const ICON_CHEVRON_UP = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5L6 4.5L9 7.5"/></svg>`;
-/** Gear icon (⚙ replacement). 14x14. */
-const ICON_TOOL = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>`;
-/** Warning triangle (⚠ replacement). 18x18. */
-const ICON_WARNING = `<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"><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>`;
-/** Robot/agent icon (replacement). 14x14. */
-const ICON_AGENT = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>`;
-/** Check mark replacement. 12x12. */
-const ICON_CHECK = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6L5 8.5L9.5 3.5"/></svg>`;
-/** Send arrow (for chat input). 16x16. */
-const ICON_SEND = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 12V4M8 4L4 8M8 4L12 8"/></svg>`;
-
 /** Normalize a catalog entry to the `A2uiViewEntry` shape. Bare
  * `Type<unknown>` entries are wrapped as `{ component }`; entries
  * already in the discriminated shape are returned unchanged. */
@@ -11512,6 +11867,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
         }], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], 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 }] }], 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
+/**
+ * Convert an icon identifier to its Material Symbols ligature form.
+ *
+ * Material Symbols ligatures are snake_case (`account_circle`, `trending_up`),
+ * but A2UI catalogs commonly emit camelCase identifiers (`accountCircle`,
+ * `shoppingCart`). Splitting on lower→upper boundaries and lowercasing maps
+ * camelCase → the matching ligature. Already-snake_case names, single words,
+ * and non-identifier glyphs (emoji) have no boundaries to split and pass
+ * through unchanged. Unknown names still fall back to the browser default.
+ */
+function toMaterialSymbolName(name) {
+    return name.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
+}
 class A2uiIconComponent {
     /** v1 canonical prop. */
     name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
@@ -11525,24 +11893,32 @@ class A2uiIconComponent {
     childKeys = input([], ...(ngDevMode ? [{ debugName: "childKeys" }] : []));
     spec = input(undefined, ...(ngDevMode ? [{ debugName: "spec" }] : []));
     effectiveName = computed(() => this.name() ?? this.icon(), ...(ngDevMode ? [{ debugName: "effectiveName" }] : []));
+    /** The effective name as a Material Symbols ligature (camelCase → snake_case). */
+    glyphName = computed(() => toMaterialSymbolName(this.effectiveName()), ...(ngDevMode ? [{ debugName: "glyphName" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: A2uiIconComponent, isStandalone: true, selector: "a2ui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, 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: `
-    <span
-      class="a2ui-icon"
-      [style.font-size]="size() ? size() + 'px' : '1.125rem'"
-      [attr.aria-label]="effectiveName()"
-    >{{ effectiveName() }}</span>
-  `, isInline: true, styles: [".a2ui-icon{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: A2uiIconComponent, isStandalone: true, selector: "a2ui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, 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: `
+    @if (effectiveName(); as name) {
+      <span
+        class="a2ui-icon material-symbols-outlined"
+        [style.font-size]="size() ? size() + 'px' : '1.125rem'"
+        [attr.aria-label]="name"
+        role="img"
+      >{{ glyphName() }}</span>
+    }
+  `, isInline: true, styles: [".a2ui-icon{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;color:currentColor;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: A2uiIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a2ui-icon', standalone: true, template: `
-    <span
-      class="a2ui-icon"
-      [style.font-size]="size() ? size() + 'px' : '1.125rem'"
-      [attr.aria-label]="effectiveName()"
-    >{{ effectiveName() }}</span>
-  `, styles: [".a2ui-icon{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}\n"] }]
+    @if (effectiveName(); as name) {
+      <span
+        class="a2ui-icon material-symbols-outlined"
+        [style.font-size]="size() ? size() + 'px' : '1.125rem'"
+        [attr.aria-label]="name"
+        role="img"
+      >{{ glyphName() }}</span>
+    }
+  `, styles: [".a2ui-icon{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;color:currentColor;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], 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 }] }], 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
@@ -12222,6 +12598,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
         }], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], 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 }] }], 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
+/**
+ * Build the built-in A2UI component catalog — a {@link ViewRegistry} mapping
+ * the standard A2UI element types (Card, Button, TextField, Image, AudioPlayer,
+ * Video, …) to their Angular renderers. Spread it into `provideViews` (with any
+ * of your own views) so an agent's A2UI surface specs render.
+ *
+ * @returns A {@link ViewRegistry} of the standard A2UI components.
+ * @example
+ * ```ts
+ * providers: [provideViews({ ...a2uiBasicCatalog(), MyWidget: MyWidgetComponent })]
+ * ```
+ */
 function a2uiBasicCatalog() {
     return views({
         AudioPlayer: A2uiAudioPlayerComponent,
@@ -12359,6 +12747,21 @@ function tools(map) {
 }
 
 // SPDX-License-Identifier: MIT
+/**
+ * Build an in-memory {@link Agent} for tests and stories — no transport, no
+ * network. Every field is a writable signal so a test can drive UI states
+ * (loading, error, interrupts, tool calls, subagents) deterministically.
+ *
+ * @param opts Initial values for the mock's signals; all optional.
+ * @returns A {@link MockAgent} satisfying the full `Agent` contract.
+ * @example
+ * ```ts
+ * const agent = mockAgent({
+ *   messages: [{ id: '1', role: 'assistant', content: 'Hi' }],
+ *   isLoading: true,
+ * });
+ * ```
+ */
 function mockAgent(opts = {}) {
     const messages = signal(opts.messages ?? [], ...(ngDevMode ? [{ debugName: "messages" }] : []));
     const status = signal(opts.status ?? 'idle', ...(ngDevMode ? [{ debugName: "status" }] : []));
@@ -12410,5 +12813,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, AGENT_ERROR_MESSAGES, AgentError, 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, createAgentRef, createClientToolsCoordinator, createContentClassifier, createParseTreeStore, createPartialArgsBridge, deriveJsonSchema, emitBinding, executeFunctionTool, extractErrorMessage, formatDuration, getInterrupt, getMessageType, injectThreadRouting, isAbortError, isAssistantMessage, isSystemMessage, isToolMessage, isTyping, isUserMessage, messageContent, mockAgent, normalizeEnvelopeArgs, normalizeViewEntry, provideChat, renderMarkdown, startClientToolExecutor, statusColor, submitMessage, surfaceToSpec, toAgentError, toClientToolSpecs, tools, validateArgs, view };
+export { A2uiAudioPlayerComponent, A2uiButtonComponent, A2uiCardComponent, A2uiCheckBoxComponent, A2uiColumnComponent, A2uiDateTimeInputComponent, A2uiDividerComponent, A2uiIconComponent, A2uiImageComponent, A2uiListComponent, A2uiModalComponent, A2uiMultipleChoiceComponent, A2uiRowComponent, A2uiSliderComponent, A2uiSurfaceComponent, A2uiTabsComponent, A2uiTextComponent, A2uiTextFieldComponent, A2uiVideoComponent, AGENT_ERROR_MESSAGES, AgentError, CHAT_CONFIG, CHAT_LIFECYCLE, 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, IS_HEADER_ROW, MARKDOWN_VIEW_REGISTRY, MarkdownAutolinkComponent, MarkdownBlockquoteComponent, MarkdownChildrenComponent, MarkdownCitationReferenceComponent, MarkdownCodeBlockComponent, MarkdownDocumentComponent, MarkdownEmphasisComponent, MarkdownHardBreakComponent, MarkdownHeadingComponent, MarkdownHtmlComponent, MarkdownImageComponent, MarkdownInlineCodeComponent, MarkdownLinkComponent, MarkdownListComponent, MarkdownListItemComponent, MarkdownMathComponent, MarkdownParagraphComponent, MarkdownSoftBreakComponent, MarkdownStrikethroughComponent, MarkdownStrongComponent, MarkdownTableCellComponent, MarkdownTableComponent, MarkdownTableRowComponent, MarkdownTextComponent, MarkdownThematicBreakComponent, MessageTemplateDirective, a2uiBasicCatalog, action, ask, buildA2uiActionMessage, cacheplaneMarkdownViews, createA2uiSurfaceStore, createAgentRef, createContentClassifier, createParseTreeStore, createPartialArgsBridge, deriveJsonSchema, emitBinding, executeFunctionTool, extractErrorMessage, formatDuration, getInterrupt, getMessageType, injectThreadRouting, isAbortError, isAssistantMessage, isSystemMessage, isToolMessage, isTyping, isUserMessage, messageContent, mockAgent, normalizeEnvelopeArgs, normalizeViewEntry, provideChat, renderMarkdown, startClientToolExecutor, statusColor, submitMessage, toAgentError, toClientToolSpecs, tools, validateArgs, view };
 //# sourceMappingURL=threadplane-chat.mjs.map