@threadplane/chat 0.0.55 → 0.0.56

package/fesm2022/threadplane-chat.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, inject, TemplateRef, Directive, contentChildren, computed, ChangeDetectionStrategy, Component, signal, Injectable, ContentChild, effect, output, DOCUMENT, ViewEncapsulation, viewChild, model, contentChild, untracked, ElementRef, ViewContainerRef, DestroyRef, makeEnvironmentProviders, Injector, runInInjectionContext, SecurityContext } from '@angular/core';
+import { InjectionToken, input, inject, TemplateRef, Directive, contentChildren, computed, ChangeDetectionStrategy, Component, signal, Injectable, ContentChild, effect, output, DOCUMENT, ViewEncapsulation, ElementRef, ViewContainerRef, DestroyRef, viewChild, model, contentChild, untracked, makeEnvironmentProviders, Injector, runInInjectionContext, SecurityContext } from '@angular/core';
 import { NgTemplateOutlet, NgComponentOutlet, KeyValuePipe } from '@angular/common';
 import { createPartialMarkdownParser, materialize } from '@cacheplane/partial-markdown';
 import { views, RenderSpecComponent, toRenderRegistry, signalStateStore, withViews, RenderElementComponent, injectRenderHost } from '@threadplane/render';
@@ -305,6 +305,14 @@ const LIGHT_TOKENS = `
   --a2ui-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.10);
   --a2ui-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.14);
   --a2ui-elevation-5: 0 16px 32px rgba(0, 0, 0, 0.18);
+
+  /* --tplane-chat-citation-* — inline markers, preview card, sources panel */
+  --tplane-chat-citation-accent: #2f6fe0;
+  --tplane-chat-citation-accent-soft: #eaf1fd;
+  --tplane-chat-citation-accent-border: #c9def8;
+  --tplane-chat-citation-marker-bg: #f1f2f4;
+  --tplane-chat-citation-marker-border: var(--tplane-chat-separator);
+  --tplane-chat-citation-marker-fg: #4b5563;
 `;
 const DARK_TOKENS = `
   --tplane-chat-bg: rgb(17, 17, 17);
@@ -345,6 +353,14 @@ const DARK_TOKENS = `
   --a2ui-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.4);
   --a2ui-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.45);
   --a2ui-elevation-5: 0 16px 32px rgba(0, 0, 0, 0.5);
+
+  /* --tplane-chat-citation-* dark variant */
+  --tplane-chat-citation-accent: #6ea8ff;
+  --tplane-chat-citation-accent-soft: rgba(79, 141, 245, 0.16);
+  --tplane-chat-citation-accent-border: rgba(79, 141, 245, 0.38);
+  --tplane-chat-citation-marker-bg: rgba(255, 255, 255, 0.08);
+  --tplane-chat-citation-marker-border: var(--tplane-chat-separator);
+  --tplane-chat-citation-marker-fg: #c9ccd1;
 `;
 const GEOMETRY_TOKENS = `
   --tplane-chat-radius-bubble: 15px;
@@ -353,6 +369,7 @@ const GEOMETRY_TOKENS = `
   --tplane-chat-radius-button: 8px;
   --tplane-chat-radius-launcher: 9999px;
   --tplane-chat-max-width: 48rem;
+  --tplane-chat-citation-radius: 6px;
 `;
 const TYPOGRAPHY_TOKENS = `
   --tplane-chat-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -837,53 +854,364 @@ const CHAT_MESSAGE_STYLES = `
   .chat-message__control-btn svg { width: 16px; height: 16px; pointer-events: none; }
 `;
 
+/** Hostname of `url` with a leading `www.` removed; null if absent/malformed. */
+function deriveDomain(url) {
+    if (!url)
+        return null;
+    try {
+        return new URL(url).hostname.replace(/^www\./, '');
+    }
+    catch {
+        return null;
+    }
+}
+/** Explicit `sourceType`, else 'web' inferred from a url, else 'unknown'. */
+function deriveSourceType(c) {
+    if (c.sourceType)
+        return c.sourceType;
+    return c.url ? 'web' : 'unknown';
+}
+/** Uppercased first letter of the domain (or title) for the monogram chip. */
+function deriveMonogram(c) {
+    const seed = deriveDomain(c.url) ?? c.title ?? '';
+    const ch = seed.trim().charAt(0);
+    return ch ? ch.toUpperCase() : '?';
+}
+/** Deterministic hue in [0,360) from a seed string (stable monogram color). */
+function monogramHue(seed) {
+    let h = 0;
+    for (let i = 0; i < seed.length; i++) {
+        h = (h * 31 + seed.charCodeAt(i)) % 360;
+    }
+    return h;
+}
+/** Short freshness label (e.g. "Apr 2024"); null when absent or unparseable. */
+function formatPublished(value) {
+    if (value == null)
+        return null;
+    const d = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(d.getTime()))
+        return null;
+    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short' });
+}
+/** Deterministic monogram-chip background color (stable per source). */
+function monogramColor(c) {
+    const seed = deriveDomain(c.url) ?? c.title ?? '?';
+    return `hsl(${monogramHue(seed)} 60% 45%)`;
+}
+/** Human label for the source-type badge; null when type is 'unknown'. */
+function citationTypeLabel(c) {
+    const t = deriveSourceType(c);
+    if (t === 'unknown')
+        return null;
+    return t === 'web' ? 'Web' : t.charAt(0).toUpperCase() + t.slice(1);
+}
+
+// libs/chat/src/lib/styles/chat-citations.styles.ts
+// SPDX-License-Identifier: MIT
+/** Inline pill marker (chat-md-citation-reference). */
+const CHAT_CITATION_MARKER_STYLES = `
+  :host { display: inline; }
+  .chat-citation-marker {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 17px;
+    height: 17px;
+    padding: 0 5px;
+    margin: 0 1px;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--tplane-chat-citation-marker-fg);
+    background: var(--tplane-chat-citation-marker-bg);
+    border: 1px solid var(--tplane-chat-citation-marker-border);
+    border-radius: var(--tplane-chat-citation-radius);
+    translate: 0 -1px;
+    text-decoration: none;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+  }
+  .chat-citation-marker:hover,
+  .chat-citation-marker:focus-visible {
+    background: var(--tplane-chat-citation-accent-soft);
+    border-color: var(--tplane-chat-citation-accent-border);
+    color: var(--tplane-chat-citation-accent);
+    outline: none;
+  }
+  .chat-citation-marker:focus-visible {
+    box-shadow: 0 0 0 2px var(--tplane-chat-citation-accent-border);
+  }
+  .chat-citation-marker--unresolved {
+    color: var(--tplane-chat-text-muted);
+    background: transparent;
+    border-style: dashed;
+    cursor: default;
+  }
+  .chat-citation-marker--unresolved:hover {
+    background: transparent;
+    border-color: var(--tplane-chat-citation-marker-border);
+    color: var(--tplane-chat-text-muted);
+  }
+  .chat-citation-marker--no-url {
+    cursor: help;
+  }
+`;
+/** Provenance preview card (chat-citation-preview), portaled into the overlay pane. */
+const CHAT_CITATION_PREVIEW_STYLES = `
+  :host { display: block; }
+  .chat-citation-preview {
+    width: 320px;
+    max-width: calc(100vw - 24px);
+    box-sizing: border-box;
+    background: var(--tplane-chat-surface);
+    border: 1px solid var(--tplane-chat-separator);
+    border-radius: var(--tplane-chat-radius-card);
+    box-shadow: var(--tplane-chat-shadow-md);
+    padding: 12px 13px;
+    text-align: left;
+    color: var(--tplane-chat-text);
+  }
+  .chat-citation-preview__head {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    margin-bottom: 7px;
+  }
+  .chat-citation-preview__fav {
+    width: 16px; height: 16px;
+    border-radius: 4px;
+    flex: 0 0 auto;
+    object-fit: cover;
+  }
+  .chat-citation-preview__fav--mono {
+    display: flex; align-items: center; justify-content: center;
+    color: #fff; font-size: 10px; font-weight: 700;
+  }
+  .chat-citation-preview__domain {
+    font-size: 12px;
+    color: var(--tplane-chat-text-muted);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .chat-citation-preview__type {
+    margin-left: auto;
+    font-size: 11px;
+    color: var(--tplane-chat-text-muted);
+    flex: 0 0 auto;
+  }
+  .chat-citation-preview__title {
+    font-size: 14px; font-weight: 600; line-height: 1.35;
+    margin: 0 0 5px;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+  }
+  .chat-citation-preview__snippet {
+    font-size: 12.5px; color: var(--tplane-chat-text-muted); line-height: 1.5;
+    margin: 0;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+  }
+  .chat-citation-preview__foot {
+    display: flex; align-items: center; justify-content: space-between;
+    margin-top: 10px; padding-top: 9px;
+    border-top: 1px solid var(--tplane-chat-separator);
+  }
+  .chat-citation-preview__open {
+    display: inline-flex; align-items: center; gap: 5px;
+    font-size: 12px; font-weight: 600;
+    color: var(--tplane-chat-citation-accent);
+    text-decoration: none;
+  }
+  .chat-citation-preview__open:hover { text-decoration: underline; }
+  .chat-citation-preview__meta { font-size: 11px; color: var(--tplane-chat-text-muted); }
+`;
+/** Sources panel (chat-citations) + detail card (chat-citations-card). */
+const CHAT_CITATIONS_PANEL_STYLES = `
+  :host { display: block; }
+  .chat-citations {
+    margin-top: var(--tplane-chat-space-5);
+    padding-top: var(--tplane-chat-space-4);
+    border-top: 1px solid var(--tplane-chat-separator);
+  }
+  .chat-citations__header {
+    display: flex; align-items: center; gap: 9px;
+    width: 100%;
+    padding: 0 0 11px;
+    background: none; border: 0;
+    font: inherit; color: inherit;
+    cursor: pointer; text-align: left;
+  }
+  .chat-citations__heading { font-size: 13px; font-weight: 600; }
+  .chat-citations__count {
+    font-size: 11px; font-weight: 600;
+    color: var(--tplane-chat-text-muted);
+    background: var(--tplane-chat-surface-alt);
+    border: 1px solid var(--tplane-chat-separator);
+    border-radius: 20px;
+    padding: 1px 7px;
+  }
+  .chat-citations__favstack { display: flex; margin-left: 2px; }
+  .chat-citations__fav {
+    width: 16px; height: 16px;
+    border-radius: 4px;
+    margin-left: -5px;
+    border: 1.5px solid var(--tplane-chat-surface);
+    object-fit: cover;
+  }
+  .chat-citations__fav:first-child { margin-left: 0; }
+  .chat-citations__fav--mono {
+    display: flex; align-items: center; justify-content: center;
+    color: #fff; font-size: 9px; font-weight: 700;
+  }
+  .chat-citations__chevron {
+    margin-left: auto;
+    color: var(--tplane-chat-text-muted);
+    transition: transform 120ms ease;
+  }
+  .chat-citations__chevron.is-open { transform: rotate(180deg); }
+  .chat-citations__list {
+    list-style: none; margin: 0; padding: 0;
+    display: flex; flex-direction: column; gap: 8px;
+  }
+  .chat-citations__item { margin: 0; }
+
+  .chat-citations-card {
+    display: flex; gap: 10px;
+    padding: 10px 11px;
+    background: var(--tplane-chat-surface);
+    border: 1px solid var(--tplane-chat-separator);
+    border-radius: var(--tplane-chat-radius-card);
+    text-decoration: none; color: inherit;
+    cursor: pointer;
+    transition: border-color 120ms ease, background 120ms ease;
+  }
+  .chat-citations-card:hover,
+  .chat-citations-card:focus-visible {
+    border-color: var(--tplane-chat-citation-accent-border);
+    outline: none;
+  }
+  .chat-citations-card__index {
+    flex: 0 0 auto;
+    width: 18px; height: 18px;
+    border-radius: 5px;
+    background: var(--tplane-chat-surface-alt);
+    border: 1px solid var(--tplane-chat-separator);
+    color: var(--tplane-chat-text-muted);
+    font-size: 11px; font-weight: 600;
+    display: flex; align-items: center; justify-content: center;
+    margin-top: 1px;
+  }
+  .chat-citations-card__body { min-width: 0; flex: 1; }
+  .chat-citations-card__top {
+    display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
+  }
+  .chat-citations-card__fav {
+    width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; object-fit: cover;
+  }
+  .chat-citations-card__fav--mono {
+    display: flex; align-items: center; justify-content: center;
+    color: #fff; font-size: 8px; font-weight: 700;
+  }
+  .chat-citations-card__domain { font-size: 11.5px; color: var(--tplane-chat-text-muted); }
+  .chat-citations-card__type { margin-left: auto; font-size: 10.5px; color: var(--tplane-chat-text-muted); }
+  .chat-citations-card__title {
+    font-size: 13.5px; font-weight: 600; line-height: 1.35;
+    margin: 0 0 2px;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .chat-citations-card:hover .chat-citations-card__title { color: var(--tplane-chat-citation-accent); }
+  .chat-citations-card__snippet {
+    font-size: 12px; color: var(--tplane-chat-text-muted); line-height: 1.45;
+    margin: 0;
+    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
+  }
+`;
+
 // libs/chat/src/lib/primitives/chat-citations/chat-citations-card.component.ts
 // SPDX-License-Identifier: MIT
+/**
+ * Sources-panel detail card: index badge, favicon/monogram + domain + type,
+ * title, one-line snippet. Renders as an <a> (opens the source) when a url is
+ * present, otherwise a non-interactive <div>. Shares the panel style module.
+ */
 class ChatCitationsCardComponent {
     citation = input.required(...(ngDevMode ? [{ debugName: "citation" }] : []));
+    domain = computed(() => deriveDomain(this.citation().url), ...(ngDevMode ? [{ debugName: "domain" }] : []));
+    title = computed(() => this.citation().title ?? this.citation().url ?? null, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    monogram = computed(() => deriveMonogram(this.citation()), ...(ngDevMode ? [{ debugName: "monogram" }] : []));
+    monoColor = computed(() => monogramColor(this.citation()), ...(ngDevMode ? [{ debugName: "monoColor" }] : []));
+    typeLabel = computed(() => citationTypeLabel(this.citation()), ...(ngDevMode ? [{ debugName: "typeLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatCitationsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatCitationsCardComponent, isStandalone: true, selector: "chat-citations-card", inputs: { citation: { classPropertyName: "citation", publicName: "citation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <div class="chat-citations-card">
-      <div class="chat-citations-card__index">{{ citation().index }}</div>
-      <div class="chat-citations-card__body">
-        @if (citation().url; as url) {
-          <a class="chat-citations-card__title" [href]="url" target="_blank" rel="noopener noreferrer">
-            {{ citation().title ?? url }}
-          </a>
-        } @else if (citation().title) {
-          <span class="chat-citations-card__title">{{ citation().title }}</span>
+    @if (citation().url; as url) {
+      <a class="chat-citations-card" [href]="url" target="_blank" rel="noopener noreferrer"
+         [attr.aria-label]="'Source ' + citation().index + ': ' + (citation().title ?? url)">
+        <ng-container [ngTemplateOutlet]="inner" />
+      </a>
+    } @else {
+      <div class="chat-citations-card">
+        <ng-container [ngTemplateOutlet]="inner" />
+      </div>
+    }
+
+    <ng-template #inner>
+      <span class="chat-citations-card__index">{{ citation().index }}</span>
+      <span class="chat-citations-card__body">
+        <span class="chat-citations-card__top">
+          @if (citation().iconUrl; as icon) {
+            <img class="chat-citations-card__fav" [src]="icon" alt="" width="14" height="14" />
+          } @else {
+            <span class="chat-citations-card__fav chat-citations-card__fav--mono"
+                  [style.background]="monoColor()">{{ monogram() }}</span>
+          }
+          @if (domain(); as d) { <span class="chat-citations-card__domain">{{ d }}</span> }
+          @if (typeLabel(); as t) { <span class="chat-citations-card__type">{{ t }}</span> }
+        </span>
+        @if (title(); as t) {
+          <span class="chat-citations-card__title">{{ t }}</span>
         }
         @if (citation().snippet; as s) {
-          <p class="chat-citations-card__snippet">{{ s }}</p>
+          <span class="chat-citations-card__snippet">{{ s }}</span>
         }
-      </div>
-    </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+      </span>
+    </ng-template>
+  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block}.chat-citations{margin-top:var(--tplane-chat-space-5);padding-top:var(--tplane-chat-space-4);border-top:1px solid var(--tplane-chat-separator)}.chat-citations__header{display:flex;align-items:center;gap:9px;width:100%;padding:0 0 11px;background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left}.chat-citations__heading{font-size:13px;font-weight:600}.chat-citations__count{font-size:11px;font-weight:600;color:var(--tplane-chat-text-muted);background:var(--tplane-chat-surface-alt);border:1px solid var(--tplane-chat-separator);border-radius:20px;padding:1px 7px}.chat-citations__favstack{display:flex;margin-left:2px}.chat-citations__fav{width:16px;height:16px;border-radius:4px;margin-left:-5px;border:1.5px solid var(--tplane-chat-surface);object-fit:cover}.chat-citations__fav:first-child{margin-left:0}.chat-citations__fav--mono{display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700}.chat-citations__chevron{margin-left:auto;color:var(--tplane-chat-text-muted);transition:transform .12s ease}.chat-citations__chevron.is-open{transform:rotate(180deg)}.chat-citations__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.chat-citations__item{margin:0}.chat-citations-card{display:flex;gap:10px;padding:10px 11px;background:var(--tplane-chat-surface);border:1px solid var(--tplane-chat-separator);border-radius:var(--tplane-chat-radius-card);text-decoration:none;color:inherit;cursor:pointer;transition:border-color .12s ease,background .12s ease}.chat-citations-card:hover,.chat-citations-card:focus-visible{border-color:var(--tplane-chat-citation-accent-border);outline:none}.chat-citations-card__index{flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:var(--tplane-chat-surface-alt);border:1px solid var(--tplane-chat-separator);color:var(--tplane-chat-text-muted);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}.chat-citations-card__body{min-width:0;flex:1}.chat-citations-card__top{display:flex;align-items:center;gap:6px;margin-bottom:3px}.chat-citations-card__fav{width:14px;height:14px;border-radius:3px;flex:0 0 auto;object-fit:cover}.chat-citations-card__fav--mono{display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px;font-weight:700}.chat-citations-card__domain{font-size:11.5px;color:var(--tplane-chat-text-muted)}.chat-citations-card__type{margin-left:auto;font-size:10.5px;color:var(--tplane-chat-text-muted)}.chat-citations-card__title{font-size:13.5px;font-weight:600;line-height:1.35;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-citations-card:hover .chat-citations-card__title{color:var(--tplane-chat-citation-accent)}.chat-citations-card__snippet{font-size:12px;color:var(--tplane-chat-text-muted);line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatCitationsCardComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'chat-citations-card',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <div class="chat-citations-card">
-      <div class="chat-citations-card__index">{{ citation().index }}</div>
-      <div class="chat-citations-card__body">
-        @if (citation().url; as url) {
-          <a class="chat-citations-card__title" [href]="url" target="_blank" rel="noopener noreferrer">
-            {{ citation().title ?? url }}
-          </a>
-        } @else if (citation().title) {
-          <span class="chat-citations-card__title">{{ citation().title }}</span>
+            args: [{ selector: 'chat-citations-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: `
+    @if (citation().url; as url) {
+      <a class="chat-citations-card" [href]="url" target="_blank" rel="noopener noreferrer"
+         [attr.aria-label]="'Source ' + citation().index + ': ' + (citation().title ?? url)">
+        <ng-container [ngTemplateOutlet]="inner" />
+      </a>
+    } @else {
+      <div class="chat-citations-card">
+        <ng-container [ngTemplateOutlet]="inner" />
+      </div>
+    }
+
+    <ng-template #inner>
+      <span class="chat-citations-card__index">{{ citation().index }}</span>
+      <span class="chat-citations-card__body">
+        <span class="chat-citations-card__top">
+          @if (citation().iconUrl; as icon) {
+            <img class="chat-citations-card__fav" [src]="icon" alt="" width="14" height="14" />
+          } @else {
+            <span class="chat-citations-card__fav chat-citations-card__fav--mono"
+                  [style.background]="monoColor()">{{ monogram() }}</span>
+          }
+          @if (domain(); as d) { <span class="chat-citations-card__domain">{{ d }}</span> }
+          @if (typeLabel(); as t) { <span class="chat-citations-card__type">{{ t }}</span> }
+        </span>
+        @if (title(); as t) {
+          <span class="chat-citations-card__title">{{ t }}</span>
         }
         @if (citation().snippet; as s) {
-          <p class="chat-citations-card__snippet">{{ s }}</p>
+          <span class="chat-citations-card__snippet">{{ s }}</span>
         }
-      </div>
-    </div>
-  `,
-                }]
+      </span>
+    </ng-template>
+  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block}.chat-citations{margin-top:var(--tplane-chat-space-5);padding-top:var(--tplane-chat-space-4);border-top:1px solid var(--tplane-chat-separator)}.chat-citations__header{display:flex;align-items:center;gap:9px;width:100%;padding:0 0 11px;background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left}.chat-citations__heading{font-size:13px;font-weight:600}.chat-citations__count{font-size:11px;font-weight:600;color:var(--tplane-chat-text-muted);background:var(--tplane-chat-surface-alt);border:1px solid var(--tplane-chat-separator);border-radius:20px;padding:1px 7px}.chat-citations__favstack{display:flex;margin-left:2px}.chat-citations__fav{width:16px;height:16px;border-radius:4px;margin-left:-5px;border:1.5px solid var(--tplane-chat-surface);object-fit:cover}.chat-citations__fav:first-child{margin-left:0}.chat-citations__fav--mono{display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700}.chat-citations__chevron{margin-left:auto;color:var(--tplane-chat-text-muted);transition:transform .12s ease}.chat-citations__chevron.is-open{transform:rotate(180deg)}.chat-citations__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.chat-citations__item{margin:0}.chat-citations-card{display:flex;gap:10px;padding:10px 11px;background:var(--tplane-chat-surface);border:1px solid var(--tplane-chat-separator);border-radius:var(--tplane-chat-radius-card);text-decoration:none;color:inherit;cursor:pointer;transition:border-color .12s ease,background .12s ease}.chat-citations-card:hover,.chat-citations-card:focus-visible{border-color:var(--tplane-chat-citation-accent-border);outline:none}.chat-citations-card__index{flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:var(--tplane-chat-surface-alt);border:1px solid var(--tplane-chat-separator);color:var(--tplane-chat-text-muted);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}.chat-citations-card__body{min-width:0;flex:1}.chat-citations-card__top{display:flex;align-items:center;gap:6px;margin-bottom:3px}.chat-citations-card__fav{width:14px;height:14px;border-radius:3px;flex:0 0 auto;object-fit:cover}.chat-citations-card__fav--mono{display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px;font-weight:700}.chat-citations-card__domain{font-size:11.5px;color:var(--tplane-chat-text-muted)}.chat-citations-card__type{margin-left:auto;font-size:10.5px;color:var(--tplane-chat-text-muted)}.chat-citations-card__title{font-size:13.5px;font-weight:600;line-height:1.35;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-citations-card:hover .chat-citations-card__title{color:var(--tplane-chat-citation-accent)}.chat-citations-card__snippet{font-size:12px;color:var(--tplane-chat-text-muted);line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
         }], propDecorators: { citation: [{ type: i0.Input, args: [{ isSignal: true, alias: "citation", required: true }] }] } });
 
 // libs/chat/src/lib/markdown/citations-resolver.service.ts
@@ -952,29 +1280,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
             type: Directive,
             args: [{ selector: 'ng-template[chatCitationCard]', standalone: true }]
         }] });
+let nextCitationsId = 0;
 class ChatCitationsComponent {
     message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
     heading = input('Sources', ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    listId = `chat-citations-list-${nextCitationsId++}`;
     cardTpl = null;
-    /**
-     * Optional resolver — present when chat-citations is rendered inside a
-     * chat-message that provides CitationsResolverService (the standard
-     * placement). When absent, the panel reads only Message.citations.
-     */
     resolver = inject(CitationsResolverService, { optional: true });
     /**
      * Combined citation list:
      *   1. Message.citations (provider-populated, takes precedence by id)
-     *   2. Markdown sidecar defs (Pandoc-formatted [^id]: lines), merged in
-     *      for any id not already present.
-     *
-     * Sorted by index ascending. This guarantees the sources panel surfaces
-     * citations whether they come from message metadata, content syntax, or
-     * both — matching the same precedence as inline-marker resolution.
+     *   2. Markdown sidecar defs (Pandoc [^id]: lines), merged for unseen ids.
+     * Sorted by index ascending.
      */
     citations = computed(() => {
         const fromMessage = this.message().citations ?? [];
-        const seenIds = new Set(fromMessage.map(c => c.id));
+        const seenIds = new Set(fromMessage.map((c) => c.id));
         const fromMarkdown = [];
         const mdDefs = this.resolver?.markdownDefs();
         if (mdDefs) {
@@ -985,52 +1307,100 @@ class ChatCitationsComponent {
         }
         return [...fromMessage, ...fromMarkdown].sort((a, b) => a.index - b.index);
     }, ...(ngDevMode ? [{ debugName: "citations" }] : []));
+    /** First 3 sources, mapped to favicon/monogram chips for the header preview. */
+    favstack = computed(() => this.citations().slice(0, 3).map((c) => ({
+        id: c.id, iconUrl: c.iconUrl, mono: deriveMonogram(c), color: monogramColor(c),
+    })), ...(ngDevMode ? [{ debugName: "favstack" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatCitationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatCitationsComponent, isStandalone: true, selector: "chat-citations", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "cardTpl", first: true, predicate: ChatCitationCardTemplateDirective, descendants: true }], ngImport: i0, template: `
     @if (citations().length > 0) {
       <section class="chat-citations">
-        <h4 class="chat-citations__heading">{{ heading() }}</h4>
-        <ul class="chat-citations__list">
-          @for (c of citations(); track c.id) {
-            <li class="chat-citations__item">
-              @if (cardTpl) {
-                <ng-container *ngTemplateOutlet="cardTpl.tpl; context: { $implicit: c }" />
+        <button
+          type="button"
+          class="chat-citations__header"
+          [attr.aria-expanded]="expanded()"
+          [attr.aria-controls]="listId"
+          (click)="expanded.set(!expanded())"
+        >
+          <span class="chat-citations__heading">{{ heading() }}</span>
+          <span class="chat-citations__count">{{ citations().length }}</span>
+          <span class="chat-citations__favstack" aria-hidden="true">
+            @for (f of favstack(); track f.id) {
+              @if (f.iconUrl) {
+                <img class="chat-citations__fav" [src]="f.iconUrl" alt="" width="16" height="16" />
               } @else {
-                <chat-citations-card [citation]="c" />
+                <span class="chat-citations__fav chat-citations__fav--mono"
+                      [style.background]="f.color">{{ f.mono }}</span>
               }
-            </li>
-          }
-        </ul>
+            }
+          </span>
+          <svg class="chat-citations__chevron" [class.is-open]="expanded()"
+               viewBox="0 0 24 24" aria-hidden="true" width="15" height="15">
+            <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" />
+          </svg>
+        </button>
+        @if (expanded()) {
+          <ul class="chat-citations__list" [id]="listId">
+            @for (c of citations(); track c.id) {
+              <li class="chat-citations__item">
+                @if (cardTpl) {
+                  <ng-container *ngTemplateOutlet="cardTpl.tpl; context: { $implicit: c }" />
+                } @else {
+                  <chat-citations-card [citation]="c" />
+                }
+              </li>
+            }
+          </ul>
+        }
       </section>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChatCitationsCardComponent, selector: "chat-citations-card", inputs: ["citation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block}.chat-citations{margin-top:var(--tplane-chat-space-5);padding-top:var(--tplane-chat-space-4);border-top:1px solid var(--tplane-chat-separator)}.chat-citations__header{display:flex;align-items:center;gap:9px;width:100%;padding:0 0 11px;background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left}.chat-citations__heading{font-size:13px;font-weight:600}.chat-citations__count{font-size:11px;font-weight:600;color:var(--tplane-chat-text-muted);background:var(--tplane-chat-surface-alt);border:1px solid var(--tplane-chat-separator);border-radius:20px;padding:1px 7px}.chat-citations__favstack{display:flex;margin-left:2px}.chat-citations__fav{width:16px;height:16px;border-radius:4px;margin-left:-5px;border:1.5px solid var(--tplane-chat-surface);object-fit:cover}.chat-citations__fav:first-child{margin-left:0}.chat-citations__fav--mono{display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700}.chat-citations__chevron{margin-left:auto;color:var(--tplane-chat-text-muted);transition:transform .12s ease}.chat-citations__chevron.is-open{transform:rotate(180deg)}.chat-citations__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.chat-citations__item{margin:0}.chat-citations-card{display:flex;gap:10px;padding:10px 11px;background:var(--tplane-chat-surface);border:1px solid var(--tplane-chat-separator);border-radius:var(--tplane-chat-radius-card);text-decoration:none;color:inherit;cursor:pointer;transition:border-color .12s ease,background .12s ease}.chat-citations-card:hover,.chat-citations-card:focus-visible{border-color:var(--tplane-chat-citation-accent-border);outline:none}.chat-citations-card__index{flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:var(--tplane-chat-surface-alt);border:1px solid var(--tplane-chat-separator);color:var(--tplane-chat-text-muted);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}.chat-citations-card__body{min-width:0;flex:1}.chat-citations-card__top{display:flex;align-items:center;gap:6px;margin-bottom:3px}.chat-citations-card__fav{width:14px;height:14px;border-radius:3px;flex:0 0 auto;object-fit:cover}.chat-citations-card__fav--mono{display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px;font-weight:700}.chat-citations-card__domain{font-size:11.5px;color:var(--tplane-chat-text-muted)}.chat-citations-card__type{margin-left:auto;font-size:10.5px;color:var(--tplane-chat-text-muted)}.chat-citations-card__title{font-size:13.5px;font-weight:600;line-height:1.35;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-citations-card:hover .chat-citations-card__title{color:var(--tplane-chat-citation-accent)}.chat-citations-card__snippet{font-size:12px;color:var(--tplane-chat-text-muted);line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChatCitationsCardComponent, selector: "chat-citations-card", inputs: ["citation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatCitationsComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'chat-citations',
-                    standalone: true,
-                    imports: [NgTemplateOutlet, ChatCitationsCardComponent],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
+            args: [{ selector: 'chat-citations', standalone: true, imports: [NgTemplateOutlet, ChatCitationsCardComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (citations().length > 0) {
       <section class="chat-citations">
-        <h4 class="chat-citations__heading">{{ heading() }}</h4>
-        <ul class="chat-citations__list">
-          @for (c of citations(); track c.id) {
-            <li class="chat-citations__item">
-              @if (cardTpl) {
-                <ng-container *ngTemplateOutlet="cardTpl.tpl; context: { $implicit: c }" />
+        <button
+          type="button"
+          class="chat-citations__header"
+          [attr.aria-expanded]="expanded()"
+          [attr.aria-controls]="listId"
+          (click)="expanded.set(!expanded())"
+        >
+          <span class="chat-citations__heading">{{ heading() }}</span>
+          <span class="chat-citations__count">{{ citations().length }}</span>
+          <span class="chat-citations__favstack" aria-hidden="true">
+            @for (f of favstack(); track f.id) {
+              @if (f.iconUrl) {
+                <img class="chat-citations__fav" [src]="f.iconUrl" alt="" width="16" height="16" />
               } @else {
-                <chat-citations-card [citation]="c" />
+                <span class="chat-citations__fav chat-citations__fav--mono"
+                      [style.background]="f.color">{{ f.mono }}</span>
               }
-            </li>
-          }
-        </ul>
+            }
+          </span>
+          <svg class="chat-citations__chevron" [class.is-open]="expanded()"
+               viewBox="0 0 24 24" aria-hidden="true" width="15" height="15">
+            <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" />
+          </svg>
+        </button>
+        @if (expanded()) {
+          <ul class="chat-citations__list" [id]="listId">
+            @for (c of citations(); track c.id) {
+              <li class="chat-citations__item">
+                @if (cardTpl) {
+                  <ng-container *ngTemplateOutlet="cardTpl.tpl; context: { $implicit: c }" />
+                } @else {
+                  <chat-citations-card [citation]="c" />
+                }
+              </li>
+            }
+          </ul>
+        }
       </section>
     }
-  `,
-                }]
+  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block}.chat-citations{margin-top:var(--tplane-chat-space-5);padding-top:var(--tplane-chat-space-4);border-top:1px solid var(--tplane-chat-separator)}.chat-citations__header{display:flex;align-items:center;gap:9px;width:100%;padding:0 0 11px;background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left}.chat-citations__heading{font-size:13px;font-weight:600}.chat-citations__count{font-size:11px;font-weight:600;color:var(--tplane-chat-text-muted);background:var(--tplane-chat-surface-alt);border:1px solid var(--tplane-chat-separator);border-radius:20px;padding:1px 7px}.chat-citations__favstack{display:flex;margin-left:2px}.chat-citations__fav{width:16px;height:16px;border-radius:4px;margin-left:-5px;border:1.5px solid var(--tplane-chat-surface);object-fit:cover}.chat-citations__fav:first-child{margin-left:0}.chat-citations__fav--mono{display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700}.chat-citations__chevron{margin-left:auto;color:var(--tplane-chat-text-muted);transition:transform .12s ease}.chat-citations__chevron.is-open{transform:rotate(180deg)}.chat-citations__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.chat-citations__item{margin:0}.chat-citations-card{display:flex;gap:10px;padding:10px 11px;background:var(--tplane-chat-surface);border:1px solid var(--tplane-chat-separator);border-radius:var(--tplane-chat-radius-card);text-decoration:none;color:inherit;cursor:pointer;transition:border-color .12s ease,background .12s ease}.chat-citations-card:hover,.chat-citations-card:focus-visible{border-color:var(--tplane-chat-citation-accent-border);outline:none}.chat-citations-card__index{flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:var(--tplane-chat-surface-alt);border:1px solid var(--tplane-chat-separator);color:var(--tplane-chat-text-muted);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}.chat-citations-card__body{min-width:0;flex:1}.chat-citations-card__top{display:flex;align-items:center;gap:6px;margin-bottom:3px}.chat-citations-card__fav{width:14px;height:14px;border-radius:3px;flex:0 0 auto;object-fit:cover}.chat-citations-card__fav--mono{display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px;font-weight:700}.chat-citations-card__domain{font-size:11.5px;color:var(--tplane-chat-text-muted)}.chat-citations-card__type{margin-left:auto;font-size:10.5px;color:var(--tplane-chat-text-muted)}.chat-citations-card__title{font-size:13.5px;font-weight:600;line-height:1.35;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-citations-card:hover .chat-citations-card__title{color:var(--tplane-chat-citation-accent)}.chat-citations-card__snippet{font-size:12px;color:var(--tplane-chat-text-muted);line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], cardTpl: [{
                 type: ContentChild,
                 args: [ChatCitationCardTemplateDirective]
@@ -2397,1593 +2767,2127 @@ 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-citation-reference.component.ts
+// libs/chat/src/lib/primitives/overlay/overlay-container.ts
 // SPDX-License-Identifier: MIT
-class MarkdownCitationReferenceComponent {
-    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
-    resolver = inject(CitationsResolverService);
-    resolved = computed(() => {
-        const lookup = this.resolver.lookup(this.node().refId);
-        return lookup();
-    }, ...(ngDevMode ? [{ debugName: "resolved" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownCitationReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: MarkdownCitationReferenceComponent, isStandalone: true, selector: "chat-md-citation-reference", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (resolved(); as r) {
-      @if (r.citation.url; as href) {
-        <a class="chat-citation-marker"
-           [attr.href]="href"
-           [attr.title]="r.citation.snippet ?? href"
-           target="_blank" rel="noopener noreferrer">
-          <sup>[{{ node().index }}]</sup>
-        </a>
-      } @else {
-        <span class="chat-citation-marker chat-citation-marker--no-url"
-              [attr.title]="r.citation.snippet ?? r.citation.title ?? null">
-          <sup>[{{ node().index }}]</sup>
-        </span>
-      }
-    } @else {
-      <span class="chat-citation-marker chat-citation-marker--unresolved"
-            [attr.title]="'No source available'">
-        <sup>[{{ node().index }}]</sup>
-      </span>
-    }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+const CONTAINER_CLASS = 'chat-overlay-container';
+const STYLE_ID = 'chat-overlay-structure';
+// Structural CSS, injected once into <head> (same pattern as ROOT_TOKEN_STYLES
+// in chat-tokens.ts) so consumers need not import any stylesheet.
+const STRUCTURE_CSS = `
+.${CONTAINER_CLASS} {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  pointer-events: none;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownCitationReferenceComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'chat-md-citation-reference',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @if (resolved(); as r) {
-      @if (r.citation.url; as href) {
-        <a class="chat-citation-marker"
-           [attr.href]="href"
-           [attr.title]="r.citation.snippet ?? href"
-           target="_blank" rel="noopener noreferrer">
-          <sup>[{{ node().index }}]</sup>
-        </a>
-      } @else {
-        <span class="chat-citation-marker chat-citation-marker--no-url"
-              [attr.title]="r.citation.snippet ?? r.citation.title ?? null">
-          <sup>[{{ node().index }}]</sup>
-        </span>
-      }
-    } @else {
-      <span class="chat-citation-marker chat-citation-marker--unresolved"
-            [attr.title]="'No source available'">
-        <sup>[{{ node().index }}]</sup>
-      </span>
+.chat-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+}
+`;
+/** Returns the single shared overlay container appended to <body>, creating it
+ *  (and injecting structural CSS) on first call. */
+function getOverlayContainer(doc) {
+    const existing = doc.querySelector('.' + CONTAINER_CLASS);
+    if (existing)
+        return existing;
+    if (!doc.getElementById(STYLE_ID)) {
+        const style = doc.createElement('style');
+        style.id = STYLE_ID;
+        style.textContent = STRUCTURE_CSS;
+        doc.head.appendChild(style);
     }
-  `,
-                }]
-        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
-
-// libs/chat/src/lib/markdown/markdown-table-row.token.ts
-// SPDX-License-Identifier: MIT
-/**
- * Provided by MarkdownTableRowComponent for header rows so that
- * MarkdownTableCellComponent can render <th> instead of <td>.
- * The value is a Signal<boolean> so that it tracks the row's isHeader reactively.
- */
-const IS_HEADER_ROW = new InjectionToken('IS_HEADER_ROW', {
-    providedIn: null,
-    factory: () => signal(false),
-});
+    const container = doc.createElement('div');
+    container.className = CONTAINER_CLASS;
+    doc.body.appendChild(container);
+    return container;
+}
 
-// libs/chat/src/lib/markdown/views/markdown-table-row.component.ts
+// libs/chat/src/lib/primitives/overlay/connected-position.ts
 // SPDX-License-Identifier: MIT
-class MarkdownTableRowComponent {
-    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
-    registry = inject(MARKDOWN_VIEW_REGISTRY);
-    resolve(child) {
-        const entry = this.registry[child.type];
-        if (!entry)
-            return null;
-        return typeof entry === 'function' ? entry : entry.component;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: MarkdownTableRowComponent, isStandalone: true, selector: "chat-md-table-row", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
-            {
-                provide: IS_HEADER_ROW,
-                useFactory: () => {
-                    const comp = inject(MarkdownTableRowComponent);
-                    return computed(() => comp.node().isHeader);
-                },
-            },
-        ], ngImport: i0, template: `
-    <tr class="chat-md-table-row" [class.chat-md-table-row--header]="node().isHeader">
-      @for (child of node().children; track $index) {
-        @let comp = resolve(child);
-        @if (comp) {
-          <ng-container *ngComponentOutlet="comp; inputs: { node: child }" />
-        }
-      }
-    </tr>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+//
+// Minimal port of CDK's FlexibleConnectedPositionStrategy fit logic
+// (~/repos/components/src/cdk/overlay/position/flexible-connected-position-strategy.ts):
+// _getOriginPoint + _getOverlayPoint + _getOverlayFit + _pushOverlayOnScreen.
+// Omits flexible-dimensions, grow-after-open, RTL, and virtual-keyboard handling.
+function originPoint(origin, pos) {
+    const x = pos.originX === 'center' ? origin.left + origin.width / 2 : pos.originX === 'start' ? origin.left : origin.right;
+    const y = pos.originY === 'center' ? origin.top + origin.height / 2 : pos.originY === 'top' ? origin.top : origin.bottom;
+    return { x, y };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownTableRowComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'chat-md-table-row',
-                    standalone: true,
-                    imports: [NgComponentOutlet],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <tr class="chat-md-table-row" [class.chat-md-table-row--header]="node().isHeader">
-      @for (child of node().children; track $index) {
-        @let comp = resolve(child);
-        @if (comp) {
-          <ng-container *ngComponentOutlet="comp; inputs: { node: child }" />
-        }
-      }
-    </tr>
-  `,
-                    providers: [
-                        {
-                            provide: IS_HEADER_ROW,
-                            useFactory: () => {
-                                const comp = inject(MarkdownTableRowComponent);
-                                return computed(() => comp.node().isHeader);
-                            },
-                        },
-                    ],
-                }]
-        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
-
-// libs/chat/src/lib/markdown/views/markdown-table.component.ts
-// SPDX-License-Identifier: MIT
-class MarkdownTableComponent {
-    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
-    headerRow = computed(() => {
-        const rows = this.node().children;
-        return rows.length > 0 && rows[0].isHeader ? rows[0] : null;
-    }, ...(ngDevMode ? [{ debugName: "headerRow" }] : []));
-    bodyRows = computed(() => {
-        const rows = this.node().children;
-        return rows[0]?.isHeader ? rows.slice(1) : rows;
-    }, ...(ngDevMode ? [{ debugName: "bodyRows" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: MarkdownTableComponent, isStandalone: true, selector: "chat-md-table", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <table class="chat-md-table">
-      <thead>
-        @if (headerRow(); as row) {
-          <chat-md-table-row [node]="row" />
-        }
-      </thead>
-      <tbody>
-        @for (row of bodyRows(); track $index) {
-          <chat-md-table-row [node]="row" />
-        }
-      </tbody>
-    </table>
-  `, isInline: true, dependencies: [{ kind: "component", type: MarkdownTableRowComponent, selector: "chat-md-table-row", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+function overlayPoint(origin, size, pos) {
+    let x = origin.x;
+    if (pos.overlayX === 'center')
+        x -= size.width / 2;
+    else if (pos.overlayX === 'end')
+        x -= size.width;
+    let y = origin.y;
+    if (pos.overlayY === 'center')
+        y -= size.height / 2;
+    else if (pos.overlayY === 'bottom')
+        y -= size.height;
+    return { x: x + (pos.offsetX ?? 0), y: y + (pos.offsetY ?? 0) };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownTableComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'chat-md-table',
-                    standalone: true,
-                    imports: [MarkdownTableRowComponent],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <table class="chat-md-table">
-      <thead>
-        @if (headerRow(); as row) {
-          <chat-md-table-row [node]="row" />
-        }
-      </thead>
-      <tbody>
-        @for (row of bodyRows(); track $index) {
-          <chat-md-table-row [node]="row" />
+function fitArea(point, size, viewport) {
+    const left = point.x;
+    const right = point.x + size.width;
+    const top = point.y;
+    const bottom = point.y + size.height;
+    const visibleW = Math.max(0, Math.min(right, viewport.right) - Math.max(left, viewport.left));
+    const visibleH = Math.max(0, Math.min(bottom, viewport.bottom) - Math.max(top, viewport.top));
+    const fits = left >= viewport.left && right <= viewport.right && top >= viewport.top && bottom <= viewport.bottom;
+    return { area: visibleW * visibleH, fits };
+}
+function pushOnScreen(point, size, viewport) {
+    const maxLeft = viewport.right - size.width;
+    const maxTop = viewport.bottom - size.height;
+    return {
+        x: Math.max(viewport.left, Math.min(point.x, maxLeft)),
+        y: Math.max(viewport.top, Math.min(point.y, maxTop)),
+    };
+}
+/** Sensible fallback when no positions are supplied: below the origin, start-aligned. */
+const DEFAULT_POSITION = { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' };
+function computeConnectedPosition(args) {
+    const { originRect, overlaySize, viewport, positions } = args;
+    // An empty positions array (the directive's input default) must still anchor to
+    // the trigger rather than crash on best! / render at 0,0.
+    const list = positions.length ? positions : [DEFAULT_POSITION];
+    let best = null;
+    for (const pos of list) {
+        const point = overlayPoint(originPoint(originRect, pos), overlaySize, pos);
+        const { area, fits } = fitArea(point, overlaySize, viewport);
+        if (fits) {
+            return { top: point.y, left: point.x, position: pos };
         }
-      </tbody>
-    </table>
-  `,
-                }]
-        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
-
-// libs/chat/src/lib/markdown/views/markdown-table-cell.component.ts
-// SPDX-License-Identifier: MIT
-class MarkdownTableCellComponent {
-    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
-    isHeaderRowToken = inject(IS_HEADER_ROW, { optional: true });
-    isHeader = computed(() => this.isHeaderRowToken ? this.isHeaderRowToken() : false, ...(ngDevMode ? [{ debugName: "isHeader" }] : []));
-    alignment = computed(() => this.node().alignment, ...(ngDevMode ? [{ debugName: "alignment" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownTableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: MarkdownTableCellComponent, isStandalone: true, selector: "chat-md-table-cell", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (isHeader()) {
-      <th class="chat-md-table-cell" [style.text-align]="alignment() ?? null">
-        <chat-md-children [parent]="node()" />
-      </th>
-    } @else {
-      <td class="chat-md-table-cell" [style.text-align]="alignment() ?? null">
-        <chat-md-children [parent]="node()" />
-      </td>
+        if (!best || area > best.area)
+            best = { point, pos, area };
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: MarkdownChildrenComponent, selector: "chat-md-children", inputs: ["parent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    const pushed = pushOnScreen(best.point, overlaySize, viewport);
+    return { top: pushed.y, left: pushed.x, position: best.pos };
+}
+function narrowViewport(win, margin) {
+    return {
+        left: margin,
+        top: margin,
+        right: win.innerWidth - margin,
+        bottom: win.innerHeight - margin,
+        width: win.innerWidth - 2 * margin,
+        height: win.innerHeight - 2 * margin,
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownTableCellComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'chat-md-table-cell',
-                    standalone: true,
-                    imports: [MarkdownChildrenComponent],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @if (isHeader()) {
-      <th class="chat-md-table-cell" [style.text-align]="alignment() ?? null">
-        <chat-md-children [parent]="node()" />
-      </th>
-    } @else {
-      <td class="chat-md-table-cell" [style.text-align]="alignment() ?? null">
-        <chat-md-children [parent]="node()" />
-      </td>
-    }
-  `,
-                }]
-        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
 
-// libs/chat/src/lib/markdown/views/markdown-html.component.ts
+// libs/chat/src/lib/primitives/overlay/connected-overlay.directive.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 });
+/* eslint-disable @angular-eslint/no-input-rename, @angular-eslint/no-output-rename --
+ * The `chatOverlay*` binding aliases ARE the intended public API: they namespace
+ * the directive's inputs/outputs under the `chatOverlay` prefix (mirroring Angular
+ * CDK's `cdkConnectedOverlay*` convention) rather than exposing bare names like
+ * `open`/`positions` on an `<ng-template>`. The internal property names stay
+ * concise, so aliasing here is deliberate, not a rename to avoid. */
+/** Marks the anchor element a connected overlay positions against. */
+class ChatOverlayOriginDirective {
+    elementRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatOverlayOriginDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: ChatOverlayOriginDirective, isStandalone: true, selector: "[chatOverlayOrigin]", exportAs: ["chatOverlayOrigin"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownHtmlComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatOverlayOriginDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'chat-md-html',
+                    selector: '[chatOverlayOrigin]',
                     standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `{{ raw() }}`,
+                    exportAs: 'chatOverlayOrigin',
                 }]
-        }], 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
+        }] });
+const VIEWPORT_MARGIN = 8;
 /**
- * Default view registry consumed by <chat-streaming-md>. Maps every
- * MarkdownNode.type emitted by @cacheplane/partial-markdown@0.2 to its
- * corresponding Angular component.
+ * Applied to an `<ng-template>`. When `chatOverlayOpen` is true, the template
+ * content is portaled into the shared body-level overlay container and
+ * positioned connected to `chatOverlayOrigin`, repositioning live on
+ * scroll/resize. Closes on outside mousedown (via the `chatOverlayOutsideClick`
+ * output) and Tab; returns focus to the origin when focus was inside the pane.
  *
- * Override per-node-type via `withViews(cacheplaneMarkdownViews, { … })`.
+ * NOTE: the directive does not own the open state — it only emits. To fully
+ * close the overlay, consumers MUST handle BOTH `(chatOverlayOutsideClick)` and
+ * `(chatOverlayDetach)`. Tab-close (and Escape, when the consumer routes it)
+ * surface through `chatOverlayDetach`, so wiring only `chatOverlayOutsideClick`
+ * leaves the overlay stuck open on Tab.
  */
-const cacheplaneMarkdownViews = views({
-    'document': MarkdownDocumentComponent,
-    'paragraph': MarkdownParagraphComponent,
-    'heading': MarkdownHeadingComponent,
-    'blockquote': MarkdownBlockquoteComponent,
-    'list': MarkdownListComponent,
-    'list-item': MarkdownListItemComponent,
-    'code-block': MarkdownCodeBlockComponent,
-    'thematic-break': MarkdownThematicBreakComponent,
-    'text': MarkdownTextComponent,
-    'emphasis': MarkdownEmphasisComponent,
-    'strong': MarkdownStrongComponent,
-    'strikethrough': MarkdownStrikethroughComponent,
-    'inline-code': MarkdownInlineCodeComponent,
-    'math-inline': MarkdownMathComponent,
-    'math-display': MarkdownMathComponent,
-    'link': MarkdownLinkComponent,
-    'autolink': MarkdownAutolinkComponent,
-    'image': MarkdownImageComponent,
-    'soft-break': MarkdownSoftBreakComponent,
-    'hard-break': MarkdownHardBreakComponent,
-    'citation-reference': MarkdownCitationReferenceComponent,
-    '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
-// SPDX-License-Identifier: MIT
-// How long streaming must be false AND content stable before we finalize the
-// parser. finish() is only needed to mark final node status (not used visually)
-// and to revert a genuinely-truncated trailing construct to CommonMark — the
-// live `parser.root` projection already renders everything during streaming, so
-// this delay has NO visual cost. It must comfortably exceed real inter-chunk
-// gaps (e.g. the pause between a table's header row and its delimiter row) and
-// any `streaming` flag flap, so finalize never fires mid-stream and reverts an
-// in-progress table to raw "| a | b |" text.
-const FINALIZE_DEBOUNCE_MS = 600;
-/**
- * Renders streaming markdown by walking a @cacheplane/partial-markdown AST
- * through @threadplane/render's view registry.
- *
- * Reactivity model: the live `parser.root` keeps a stable JS reference
- * across pushes (partial-markdown's identity guarantee). To make Angular
- * signals propagate downstream when the underlying tree changes, we surface
- * a materialized snapshot via `materialize()`. The snapshot shares
- * structurally — unchanged subtrees keep the SAME reference, and any
- * descendant change yields a NEW root reference. This lets Angular's
- * `Object.is` equality check both detect changes (root reference differs)
- * and short-circuit unchanged subtrees (per-node references stable).
- *
- * Override per-node-type renderers via the `[viewRegistry]` input or by
- * supplying a different `MARKDOWN_VIEW_REGISTRY` provider in the injector
- * tree.
- */
-class ChatStreamingMdComponent {
-    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : []));
-    streaming = input(false, ...(ngDevMode ? [{ debugName: "streaming" }] : []));
-    viewRegistry = input(undefined, ...(ngDevMode ? [{ debugName: "viewRegistry" }] : []));
-    resolvedRegistry = computed(() => this.viewRegistry() ?? cacheplaneMarkdownViews, ...(ngDevMode ? [{ debugName: "resolvedRegistry" }] : []));
-    resolver = inject(CitationsResolverService, { optional: true });
+class ChatConnectedOverlayDirective {
+    origin = input.required({ ...(ngDevMode ? { debugName: "origin" } : {}), alias: 'chatOverlayOrigin' });
+    open = input(false, { ...(ngDevMode ? { debugName: "open" } : {}), alias: 'chatOverlayOpen' });
+    positions = input([], { ...(ngDevMode ? { debugName: "positions" } : {}), alias: 'chatOverlayPositions' });
+    panelClass = input('', { ...(ngDevMode ? { debugName: "panelClass" } : {}), alias: 'chatOverlayPanelClass' });
+    /** Emits the pane element once attached (consumers focus content from it). */
+    attached = output({ alias: 'chatOverlayAttached' });
+    outsideClick = output({ alias: 'chatOverlayOutsideClick' });
+    detached = output({ alias: 'chatOverlayDetach' });
+    templateRef = inject((TemplateRef));
+    viewContainerRef = inject(ViewContainerRef);
+    document = inject(DOCUMENT);
+    pane = null;
+    viewRef = null;
+    resizeObs = null;
+    rafId = 0;
+    previouslyFocused = null;
+    onScrollOrResize = () => this.scheduleReposition();
+    onDocMouseDown = (e) => {
+        if (!this.pane)
+            return;
+        const path = e.composedPath();
+        if (path.includes(this.pane) || path.includes(this.origin().elementRef.nativeElement))
+            return;
+        this.outsideClick.emit(e);
+    };
+    onKeydown = (e) => {
+        if (e.key !== 'Tab' || !this.pane)
+            return;
+        const active = this.document.activeElement;
+        if (this.pane.contains(active) || active === this.origin().elementRef.nativeElement) {
+            this.detached.emit();
+        }
+    };
     constructor() {
         effect(() => {
-            const r = this.root();
-            if (this.resolver && r) {
-                this.resolver.markdownDefs.set(r.citations ?? new Map());
-            }
-        });
-        // Debounced finalization. `finish()` is terminal and DESTRUCTIVE: it reverts
-        // an incomplete trailing construct to its CommonMark fallback — e.g. a table
-        // header before its delimiter row becomes raw "| a | b |" paragraph text. We
-        // must therefore never finalize while tokens are still arriving. The
-        // `streaming` input is not a reliable "still arriving" signal — it can flap
-        // false mid-stream, and at cold start it can read false for an entire live
-        // stream — so we finalize only once streaming is false AND no new content
-        // has arrived for a short, imperceptible window. Any new content or a
-        // streaming=true flap re-arms the timer, so finalize fires exactly once,
-        // after the stream truly stops. Until then the live `parser.root` projection
-        // (0.5.x) renders the in-progress content, including streaming tables.
-        let timer = null;
-        effect((onCleanup) => {
-            const isStreaming = this.streaming();
-            this.content(); // re-arm whenever new content arrives
-            if (timer) {
-                clearTimeout(timer);
-                timer = null;
-            }
-            if (isStreaming || this.finished)
-                return;
-            timer = setTimeout(() => {
-                timer = null;
-                if (this.streaming() || this.finished)
-                    return;
-                if (!this.prior.endsWith('\n'))
-                    this.parser.push('\n');
-                this.parser.finish();
-                this.finished = true;
-                this.finalizeTick.update((v) => v + 1);
-            }, FINALIZE_DEBOUNCE_MS);
-            onCleanup(() => {
-                if (timer) {
-                    clearTimeout(timer);
-                    timer = null;
-                }
-            });
+            if (this.open())
+                this.attach();
+            else
+                this.dispose();
         });
+        inject(DestroyRef).onDestroy(() => this.dispose());
     }
-    // Parser instance is rebuilt only when content diverges from the prior
-    // prefix (rare). For the common streaming case where content extends the
-    // prior content, we push the delta and reuse the existing parser tree.
-    parser = createPartialMarkdownParser();
-    prior = '';
-    finished = false;
-    // Bumped by the debounced finalizer so the `root` computed re-materializes
-    // the now-finished parser tree.
-    finalizeTick = signal(0, ...(ngDevMode ? [{ debugName: "finalizeTick" }] : []));
-    root = computed(() => {
-        const c = this.content();
-        this.finalizeTick(); // re-materialize after a debounced finalize
-        if (c !== this.prior) {
-            // Re-parse from scratch when the content diverged from the prior prefix,
-            // OR when the parser was already finalized — finish() is terminal, so
-            // pushing further deltas into a finished parser corrupts its state. A
-            // transient `streaming=false` mid-stream that finalized early thus
-            // recovers here: new content rebuilds an open, projecting parser.
-            if (c.startsWith(this.prior) && !this.finished) {
-                this.parser.push(c.slice(this.prior.length));
-            }
-            else {
-                this.parser = createPartialMarkdownParser();
-                this.finished = false;
-                if (c.length > 0)
-                    this.parser.push(c);
-            }
-            this.prior = c;
+    attach() {
+        if (this.pane)
+            return;
+        const win = this.document.defaultView;
+        if (!win)
+            return; // SSR / detached document
+        this.previouslyFocused = this.document.activeElement;
+        const pane = this.document.createElement('div');
+        pane.className = 'chat-overlay-pane';
+        for (const c of this.normalizePanelClass())
+            pane.classList.add(c);
+        getOverlayContainer(this.document).appendChild(pane);
+        this.viewRef = this.viewContainerRef.createEmbeddedView(this.templateRef);
+        this.viewRef.detectChanges();
+        for (const node of this.viewRef.rootNodes)
+            pane.appendChild(node);
+        this.pane = pane;
+        this.reposition();
+        win.addEventListener('scroll', this.onScrollOrResize, { capture: true, passive: true });
+        win.addEventListener('resize', this.onScrollOrResize, { passive: true });
+        this.document.addEventListener('mousedown', this.onDocMouseDown, true);
+        this.document.addEventListener('keydown', this.onKeydown, true);
+        if (typeof win.ResizeObserver === 'function') {
+            this.resizeObs = new win.ResizeObserver(() => this.scheduleReposition());
+            this.resizeObs.observe(this.origin().elementRef.nativeElement);
+            this.resizeObs.observe(pane);
         }
-        // Materialize for Angular reactivity: produces a NEW root reference when
-        // any descendant subtree changed; same reference when nothing changed
-        // (structural sharing). This is what makes signal-based CD propagate
-        // downstream changes despite the parser preserving identity.
-        return materialize(this.parser.root);
-    }, ...(ngDevMode ? [{ debugName: "root" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatStreamingMdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatStreamingMdComponent, isStandalone: true, selector: "chat-streaming-md", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, viewRegistry: { classPropertyName: "viewRegistry", publicName: "viewRegistry", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: MARKDOWN_VIEW_REGISTRY,
-                useFactory: (host) => host.resolvedRegistry(),
-                deps: [ChatStreamingMdComponent],
-            },
-        ], ngImport: i0, template: `
-    @if (root(); as r) {
-      <chat-md-children [parent]="r" />
+        this.attached.emit(pane);
     }
-  `, isInline: true, styles: ["chat-streaming-md{display:block;color:var(--tplane-chat-text);line-height:var(--tplane-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(--tplane-chat-text-muted)}chat-streaming-md p{margin:0 0 .75rem;line-height:1.6;font-size:var(--tplane-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(--tplane-chat-text-muted)}chat-streaming-md mark{background:var(--tplane-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(--tplane-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(--tplane-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(--tplane-chat-surface-alt);color:var(--tplane-chat-text);padding:1px 5px;border-radius:4px;font-family:var(--tplane-chat-font-mono);font-size:.9em}chat-streaming-md pre{background:var(--tplane-chat-surface-alt);color:var(--tplane-chat-text);padding:12px 14px;border-radius:var(--tplane-chat-radius-card);overflow-x:auto;font-family:var(--tplane-chat-font-mono);font-size:var(--tplane-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(--tplane-chat-separator);padding:.25rem 0 .25rem 12px;margin:0 0 .75rem;color:var(--tplane-chat-text-muted)}chat-streaming-md blockquote>:last-child{margin-bottom:0}chat-streaming-md hr{border:none;border-top:1px solid var(--tplane-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(--tplane-chat-surface-alt)}chat-streaming-md th,chat-streaming-md td{border:1px solid var(--tplane-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(--tplane-chat-surface-alt);border:1px dashed var(--tplane-chat-separator);border-radius:6px;font-size:.9em;color:var(--tplane-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(--tplane-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,
-            args: [{ selector: 'chat-streaming-md', standalone: true, imports: [MarkdownChildrenComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    @if (root(); as r) {
-      <chat-md-children [parent]="r" />
+    scheduleReposition() {
+        const win = this.document.defaultView;
+        if (!win || !this.pane)
+            return;
+        if (this.rafId)
+            win.cancelAnimationFrame(this.rafId);
+        this.rafId = win.requestAnimationFrame(() => this.reposition());
     }
-  `, providers: [
-                        {
-                            provide: MARKDOWN_VIEW_REGISTRY,
-                            useFactory: (host) => host.resolvedRegistry(),
-                            deps: [ChatStreamingMdComponent],
-                        },
-                    ], styles: ["chat-streaming-md{display:block;color:var(--tplane-chat-text);line-height:var(--tplane-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(--tplane-chat-text-muted)}chat-streaming-md p{margin:0 0 .75rem;line-height:1.6;font-size:var(--tplane-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(--tplane-chat-text-muted)}chat-streaming-md mark{background:var(--tplane-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(--tplane-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(--tplane-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(--tplane-chat-surface-alt);color:var(--tplane-chat-text);padding:1px 5px;border-radius:4px;font-family:var(--tplane-chat-font-mono);font-size:.9em}chat-streaming-md pre{background:var(--tplane-chat-surface-alt);color:var(--tplane-chat-text);padding:12px 14px;border-radius:var(--tplane-chat-radius-card);overflow-x:auto;font-family:var(--tplane-chat-font-mono);font-size:var(--tplane-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(--tplane-chat-separator);padding:.25rem 0 .25rem 12px;margin:0 0 .75rem;color:var(--tplane-chat-text-muted)}chat-streaming-md blockquote>:last-child{margin-bottom:0}chat-streaming-md hr{border:none;border-top:1px solid var(--tplane-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(--tplane-chat-surface-alt)}chat-streaming-md th,chat-streaming-md td{border:1px solid var(--tplane-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(--tplane-chat-surface-alt);border:1px dashed var(--tplane-chat-separator);border-radius:6px;font-size:.9em;color:var(--tplane-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(--tplane-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
-/**
- * Render a millisecond duration as a human-readable label suitable for
- * the chat-reasoning "Thought for Ns" pill.
- *
- * - <1 s         → "<1s"
- * - 1–59 s       → "Ns"     (e.g. "4s")
- * - ≥60 s        → "Nm Ms"  (e.g. "1m 12s", "60m 0s")
- *
- * Negative or non-finite inputs collapse to "<1s" so a corrupted timing
- * map never produces noisy output.
- */
-function formatDuration(ms) {
-    if (!Number.isFinite(ms) || ms < 1000)
-        return '<1s';
-    const totalSeconds = Math.floor(ms / 1000);
-    if (totalSeconds < 60)
-        return `${totalSeconds}s`;
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds - minutes * 60;
-    return `${minutes}m ${seconds}s`;
-}
+    reposition() {
+        const win = this.document.defaultView;
+        if (!win || !this.pane)
+            return;
+        const r = this.pane.getBoundingClientRect();
+        const result = computeConnectedPosition({
+            originRect: this.origin().elementRef.nativeElement.getBoundingClientRect(),
+            overlaySize: { width: r.width, height: r.height },
+            viewport: narrowViewport(win, VIEWPORT_MARGIN),
+            positions: this.positions(),
+        });
+        this.pane.style.top = `${Math.round(result.top)}px`;
+        this.pane.style.left = `${Math.round(result.left)}px`;
+    }
+    dispose() {
+        const win = this.document.defaultView;
+        if (this.rafId && win)
+            win.cancelAnimationFrame(this.rafId);
+        this.rafId = 0;
+        if (win) {
+            win.removeEventListener('scroll', this.onScrollOrResize, { capture: true });
+            win.removeEventListener('resize', this.onScrollOrResize);
+        }
+        this.document.removeEventListener('mousedown', this.onDocMouseDown, true);
+        this.document.removeEventListener('keydown', this.onKeydown, true);
+        this.resizeObs?.disconnect();
+        this.resizeObs = null;
+        const focusWasInPane = !!this.pane && this.pane.contains(this.document.activeElement);
+        this.viewRef?.destroy();
+        this.viewRef = null;
+        this.pane?.remove();
+        this.pane = null;
+        if (focusWasInPane && this.previouslyFocused)
+            this.previouslyFocused.focus();
+        this.previouslyFocused = null;
+    }
+    normalizePanelClass() {
+        const pc = this.panelClass();
+        return Array.isArray(pc) ? pc : pc ? [pc] : [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatConnectedOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: ChatConnectedOverlayDirective, isStandalone: true, selector: "[chatConnectedOverlay]", inputs: { origin: { classPropertyName: "origin", publicName: "chatOverlayOrigin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "chatOverlayOpen", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "chatOverlayPositions", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "chatOverlayPanelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attached: "chatOverlayAttached", outsideClick: "chatOverlayOutsideClick", detached: "chatOverlayDetach" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatConnectedOverlayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[chatConnectedOverlay]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatOverlayOrigin", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatOverlayOpen", required: false }] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatOverlayPositions", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatOverlayPanelClass", required: false }] }], attached: [{ type: i0.Output, args: ["chatOverlayAttached"] }], outsideClick: [{ type: i0.Output, args: ["chatOverlayOutsideClick"] }], detached: [{ type: i0.Output, args: ["chatOverlayDetach"] }] } });
 
-// libs/chat/src/lib/primitives/chat-reasoning/chat-reasoning.component.ts
+// libs/chat/src/lib/primitives/chat-citations/chat-citation-preview.component.ts
 // SPDX-License-Identifier: MIT
 /**
- * Renders an assistant's reasoning content as a compact pill that
- * expands to reveal the underlying text. Three visual states:
- *
- * - Streaming: pill shows "Thinking…" with a pulsing dot; auto-expanded
- *   so the user sees reasoning stream in real time.
- * - Idle, with durationMs known: pill shows "Thought for {duration}";
- *   collapsed by default, expand on click.
- * - Idle, no duration: pill shows "Show reasoning"; collapsed by default.
- *
- * The body re-uses chat-streaming-md so reasoning content gets the same
- * markdown rendering pipeline as the visible response (lists, code,
- * step labels often appear in reasoning output).
- *
- * Internal state: a tristate "expanded" — null means follow auto state-
- * driven logic (force-expand on isStreaming, otherwise honor
- * defaultExpanded), boolean is a manual user choice that wins for the
- * lifetime of the instance.
+ * Presentational provenance card for a single Citation. Rendered inside the
+ * inline marker's connected-overlay pane (hover/tap preview) — self-contained
+ * so its encapsulated styles apply even when portaled to the body-level pane.
  */
-class ChatReasoningComponent {
-    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : []));
-    isStreaming = input(false, ...(ngDevMode ? [{ debugName: "isStreaming" }] : []));
-    durationMs = input(undefined, ...(ngDevMode ? [{ debugName: "durationMs" }] : []));
-    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
-    defaultExpanded = input(false, ...(ngDevMode ? [{ debugName: "defaultExpanded" }] : []));
-    hasContent = computed(() => (this.content() ?? '').length > 0, ...(ngDevMode ? [{ debugName: "hasContent" }] : []));
-    /** null = follow auto logic (streaming → expanded, else defaultExpanded). */
-    _expandedOverride = signal(null, ...(ngDevMode ? [{ debugName: "_expandedOverride" }] : []));
-    expanded = computed(() => {
-        const override = this._expandedOverride();
-        if (override !== null)
-            return override;
-        if (this.isStreaming())
-            return true;
-        return this.defaultExpanded();
-    }, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
-    expandedStr = computed(() => String(this.expanded()), ...(ngDevMode ? [{ debugName: "expandedStr" }] : []));
-    resolvedLabel = computed(() => {
-        const explicit = this.label();
-        if (explicit)
-            return explicit;
-        if (this.isStreaming())
-            return 'Thinking…';
-        const ms = this.durationMs();
-        if (typeof ms === 'number')
-            return `Thought for ${formatDuration(ms)}`;
-        return 'Show reasoning';
-    }, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : []));
+class ChatCitationPreviewComponent {
+    citation = input.required(...(ngDevMode ? [{ debugName: "citation" }] : []));
+    domain = computed(() => deriveDomain(this.citation().url), ...(ngDevMode ? [{ debugName: "domain" }] : []));
+    monogram = computed(() => deriveMonogram(this.citation()), ...(ngDevMode ? [{ debugName: "monogram" }] : []));
+    monoColor = computed(() => monogramColor(this.citation()), ...(ngDevMode ? [{ debugName: "monoColor" }] : []));
+    typeLabel = computed(() => citationTypeLabel(this.citation()), ...(ngDevMode ? [{ debugName: "typeLabel" }] : []));
+    published = computed(() => formatPublished(this.citation().publishedAt), ...(ngDevMode ? [{ debugName: "published" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatCitationPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatCitationPreviewComponent, isStandalone: true, selector: "chat-citation-preview", inputs: { citation: { classPropertyName: "citation", publicName: "citation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <div class="chat-citation-preview" role="group" [attr.aria-label]="'Source ' + citation().index">
+      <div class="chat-citation-preview__head">
+        @if (citation().iconUrl; as icon) {
+          <img class="chat-citation-preview__fav" [src]="icon" alt="" width="16" height="16" />
+        } @else {
+          <span class="chat-citation-preview__fav chat-citation-preview__fav--mono"
+                [style.background]="monoColor()">{{ monogram() }}</span>
+        }
+        @if (domain(); as d) { <span class="chat-citation-preview__domain">{{ d }}</span> }
+        @if (typeLabel(); as t) { <span class="chat-citation-preview__type">{{ t }}</span> }
+      </div>
+      @if (citation().title; as title) {
+        <p class="chat-citation-preview__title">{{ title }}</p>
+      }
+      @if (citation().snippet; as s) {
+        <p class="chat-citation-preview__snippet">{{ s }}</p>
+      }
+      @if (citation().url; as url) {
+        <div class="chat-citation-preview__foot">
+          <a class="chat-citation-preview__open" [href]="url" target="_blank" rel="noopener noreferrer">
+            <svg viewBox="0 0 24 24" aria-hidden="true" width="12" height="12">
+              <path d="M7 17L17 7M17 7H8M17 7v9" fill="none" stroke="currentColor" stroke-width="2" />
+            </svg>
+            Open source
+          </a>
+          @if (published(); as p) { <span class="chat-citation-preview__meta">{{ p }}</span> }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block}.chat-citation-preview{width:320px;max-width:calc(100vw - 24px);box-sizing:border-box;background:var(--tplane-chat-surface);border:1px solid var(--tplane-chat-separator);border-radius:var(--tplane-chat-radius-card);box-shadow:var(--tplane-chat-shadow-md);padding:12px 13px;text-align:left;color:var(--tplane-chat-text)}.chat-citation-preview__head{display:flex;align-items:center;gap:7px;margin-bottom:7px}.chat-citation-preview__fav{width:16px;height:16px;border-radius:4px;flex:0 0 auto;object-fit:cover}.chat-citation-preview__fav--mono{display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700}.chat-citation-preview__domain{font-size:12px;color:var(--tplane-chat-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-citation-preview__type{margin-left:auto;font-size:11px;color:var(--tplane-chat-text-muted);flex:0 0 auto}.chat-citation-preview__title{font-size:14px;font-weight:600;line-height:1.35;margin:0 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.chat-citation-preview__snippet{font-size:12.5px;color:var(--tplane-chat-text-muted);line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.chat-citation-preview__foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid var(--tplane-chat-separator)}.chat-citation-preview__open{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--tplane-chat-citation-accent);text-decoration:none}.chat-citation-preview__open:hover{text-decoration:underline}.chat-citation-preview__meta{font-size:11px;color:var(--tplane-chat-text-muted)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatCitationPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-citation-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="chat-citation-preview" role="group" [attr.aria-label]="'Source ' + citation().index">
+      <div class="chat-citation-preview__head">
+        @if (citation().iconUrl; as icon) {
+          <img class="chat-citation-preview__fav" [src]="icon" alt="" width="16" height="16" />
+        } @else {
+          <span class="chat-citation-preview__fav chat-citation-preview__fav--mono"
+                [style.background]="monoColor()">{{ monogram() }}</span>
+        }
+        @if (domain(); as d) { <span class="chat-citation-preview__domain">{{ d }}</span> }
+        @if (typeLabel(); as t) { <span class="chat-citation-preview__type">{{ t }}</span> }
+      </div>
+      @if (citation().title; as title) {
+        <p class="chat-citation-preview__title">{{ title }}</p>
+      }
+      @if (citation().snippet; as s) {
+        <p class="chat-citation-preview__snippet">{{ s }}</p>
+      }
+      @if (citation().url; as url) {
+        <div class="chat-citation-preview__foot">
+          <a class="chat-citation-preview__open" [href]="url" target="_blank" rel="noopener noreferrer">
+            <svg viewBox="0 0 24 24" aria-hidden="true" width="12" height="12">
+              <path d="M7 17L17 7M17 7H8M17 7v9" fill="none" stroke="currentColor" stroke-width="2" />
+            </svg>
+            Open source
+          </a>
+          @if (published(); as p) { <span class="chat-citation-preview__meta">{{ p }}</span> }
+        </div>
+      }
+    </div>
+  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block}.chat-citation-preview{width:320px;max-width:calc(100vw - 24px);box-sizing:border-box;background:var(--tplane-chat-surface);border:1px solid var(--tplane-chat-separator);border-radius:var(--tplane-chat-radius-card);box-shadow:var(--tplane-chat-shadow-md);padding:12px 13px;text-align:left;color:var(--tplane-chat-text)}.chat-citation-preview__head{display:flex;align-items:center;gap:7px;margin-bottom:7px}.chat-citation-preview__fav{width:16px;height:16px;border-radius:4px;flex:0 0 auto;object-fit:cover}.chat-citation-preview__fav--mono{display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700}.chat-citation-preview__domain{font-size:12px;color:var(--tplane-chat-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-citation-preview__type{margin-left:auto;font-size:11px;color:var(--tplane-chat-text-muted);flex:0 0 auto}.chat-citation-preview__title{font-size:14px;font-weight:600;line-height:1.35;margin:0 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.chat-citation-preview__snippet{font-size:12.5px;color:var(--tplane-chat-text-muted);line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.chat-citation-preview__foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid var(--tplane-chat-separator)}.chat-citation-preview__open{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--tplane-chat-citation-accent);text-decoration:none}.chat-citation-preview__open:hover{text-decoration:underline}.chat-citation-preview__meta{font-size:11px;color:var(--tplane-chat-text-muted)}\n"] }]
+        }], propDecorators: { citation: [{ type: i0.Input, args: [{ isSignal: true, alias: "citation", required: true }] }] } });
+
+// libs/chat/src/lib/markdown/views/markdown-citation-reference.component.ts
+// SPDX-License-Identifier: MIT
+const OPEN_DELAY_MS = 120;
+const CLOSE_DELAY_MS = 200;
+/**
+ * Inline citation marker. Renders a numbered pill and reveals a provenance
+ * preview card (portaled via the connected-overlay primitive) on hover/focus
+ * (desktop) or tap (touch). Click navigates on desktop when a url exists;
+ * on touch it previews instead of navigating.
+ */
+class MarkdownCitationReferenceComponent {
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    resolver = inject(CitationsResolverService);
+    document = inject(DOCUMENT);
+    resolved = computed(() => this.resolver.lookup(this.node().refId)(), ...(ngDevMode ? [{ debugName: "resolved" }] : []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    // Prefer below-start, flip above when it won't fit. The positioner clamps to view.
+    positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -6 },
+    ];
+    /** Read fresh each time: SSR renders with no window, and hybrid devices change. */
+    get hoverCapable() {
+        return this.document.defaultView?.matchMedia?.('(hover: hover) and (pointer: fine)').matches ?? false;
+    }
+    openTimer = 0;
+    closeTimer = 0;
+    pane = null;
+    justOpenedByFocus = false;
     constructor() {
-        // Reset the manual override when streaming re-engages from idle (e.g.
-        // follow-up turn that re-uses this instance) so the auto force-expand
-        // logic takes over again. Spec §3.3 bullet 3.
-        let prevStreaming = false;
-        effect(() => {
-            const streaming = this.isStreaming();
-            if (!prevStreaming && streaming) {
-                this._expandedOverride.set(null);
-            }
-            prevStreaming = streaming;
-        });
+        inject(DestroyRef).onDestroy(() => this.clearTimers());
+    }
+    ariaLabel(c) {
+        const domain = deriveDomain(c.url);
+        const parts = [`Source ${c.index}`];
+        if (c.title)
+            parts.push(c.title);
+        if (domain)
+            parts.push(domain);
+        const base = parts.join(', ');
+        return c.url ? `${base}, opens in new tab` : base;
+    }
+    onEnter() {
+        if (!this.hoverCapable)
+            return;
+        this.cancelClose();
+        const win = this.document.defaultView;
+        if (win)
+            this.openTimer = win.setTimeout(() => this.open.set(true), OPEN_DELAY_MS);
     }
-    toggle() {
-        this._expandedOverride.set(!this.expanded());
+    onLeave() {
+        if (!this.hoverCapable)
+            return;
+        this.cancelOpen();
+        this.scheduleClose();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatReasoningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatReasoningComponent, isStandalone: true, selector: "chat-reasoning", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, isStreaming: { classPropertyName: "isStreaming", publicName: "isStreaming", isSignal: true, isRequired: false, transformFunction: null }, durationMs: { classPropertyName: "durationMs", publicName: "durationMs", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-has-content": "hasContent()", "attr.data-expanded": "expandedStr()", "attr.data-streaming": "isStreaming()" } }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="chat-reasoning__header"
-      [attr.aria-expanded]="expanded()"
-      (click)="toggle()"
-    >
-      <svg class="chat-reasoning__chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M4 2l4 4-4 4"/>
-      </svg>
-      @if (isStreaming()) {
-        <span class="chat-reasoning__pulse" aria-hidden="true"></span>
-      }
-      <span class="chat-reasoning__label">{{ resolvedLabel() }}</span>
-    </button>
-    @if (expanded()) {
-      <div class="chat-reasoning__body">
-        <chat-streaming-md [content]="content()" [streaming]="isStreaming()" />
-      </div>
+    onFocus() {
+        this.open.set(true);
+        this.justOpenedByFocus = true;
     }
-  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block;margin:0 0 .5rem}:host([data-has-content=\"false\"]){display:none}.chat-reasoning__header{display:inline-flex;align-items:center;gap:.5rem;padding:4px 10px;background:var(--tplane-chat-surface-alt);border:1px solid var(--tplane-chat-separator);border-radius:9999px;color:var(--tplane-chat-text-muted);font-size:var(--tplane-chat-font-size-xs);font-family:inherit;cursor:pointer;line-height:1.2}.chat-reasoning__header:hover{color:var(--tplane-chat-text)}.chat-reasoning__chevron{width:10px;height:10px;transition:transform .12s ease}:host([data-expanded=\"true\"]) .chat-reasoning__chevron{transform:rotate(90deg)}.chat-reasoning__pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tplane-chat-text-muted);animation:chat-reasoning-pulse 1.2s ease-in-out infinite}@keyframes chat-reasoning-pulse{0%,to{opacity:.3}50%{opacity:1}}.chat-reasoning__body{margin-top:.5rem;padding-left:12px;border-left:2px solid var(--tplane-chat-separator);color:var(--tplane-chat-text-muted)}.chat-reasoning__body chat-streaming-md{font-size:.95em}\n"], dependencies: [{ kind: "component", type: ChatStreamingMdComponent, selector: "chat-streaming-md", inputs: ["content", "streaming", "viewRegistry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    onBlur() {
+        this.justOpenedByFocus = false;
+        const active = this.document.activeElement;
+        if (this.pane && active && this.pane.contains(active))
+            return; // focus moved into card
+        this.close();
+    }
+    onClick(e, c) {
+        // Desktop + real url: let the native link navigate.
+        if (this.hoverCapable && c.url)
+            return;
+        // No url, or touch device: preview instead of navigating.
+        e.preventDefault();
+        if (this.justOpenedByFocus) {
+            // focus (fired first in this tap/gesture) already opened it — don't toggle closed
+            this.justOpenedByFocus = false;
+            return;
+        }
+        this.open.update((v) => !v);
+    }
+    onKeydown(e, c) {
+        if (e.key === 'Escape') {
+            this.close();
+            return;
+        }
+        // A no-url marker is a button: Enter/Space reveals the preview (Escape/blur close it).
+        if (!c.url && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            this.open.set(true);
+        }
+    }
+    onAttached(pane) {
+        this.pane = pane;
+        pane.addEventListener('mouseenter', this.onPaneEnter);
+        pane.addEventListener('mouseleave', this.onPaneLeave);
+    }
+    close() {
+        this.clearTimers();
+        this.justOpenedByFocus = false;
+        this.open.set(false);
+        this.pane = null; // directive removes the pane element on detach
+    }
+    onPaneEnter = () => this.cancelClose();
+    onPaneLeave = () => this.scheduleClose();
+    scheduleClose() {
+        const win = this.document.defaultView;
+        if (win)
+            this.closeTimer = win.setTimeout(() => this.open.set(false), CLOSE_DELAY_MS);
+    }
+    cancelOpen() {
+        const win = this.document.defaultView;
+        if (this.openTimer && win)
+            win.clearTimeout(this.openTimer);
+        this.openTimer = 0;
+    }
+    cancelClose() {
+        const win = this.document.defaultView;
+        if (this.closeTimer && win)
+            win.clearTimeout(this.closeTimer);
+        this.closeTimer = 0;
+    }
+    clearTimers() {
+        this.cancelOpen();
+        this.cancelClose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownCitationReferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: MarkdownCitationReferenceComponent, isStandalone: true, selector: "chat-md-citation-reference", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (resolved(); as r) {
+      <a
+        class="chat-citation-marker"
+        [class.chat-citation-marker--no-url]="!r.citation.url"
+        chatOverlayOrigin
+        #origin="chatOverlayOrigin"
+        [attr.href]="r.citation.url ?? null"
+        [attr.target]="r.citation.url ? '_blank' : null"
+        [attr.rel]="r.citation.url ? 'noopener noreferrer' : null"
+        [attr.role]="r.citation.url ? null : 'button'"
+        [attr.tabindex]="r.citation.url ? null : '0'"
+        aria-haspopup="dialog"
+        [attr.aria-expanded]="open()"
+        [attr.aria-label]="ariaLabel(r.citation)"
+        (mouseenter)="onEnter()"
+        (mouseleave)="onLeave()"
+        (focus)="onFocus()"
+        (blur)="onBlur()"
+        (click)="onClick($event, r.citation)"
+        (keydown)="onKeydown($event, r.citation)"
+      >{{ node().index }}</a>
+      <ng-template
+        chatConnectedOverlay
+        [chatOverlayOrigin]="origin"
+        [chatOverlayOpen]="open()"
+        [chatOverlayPositions]="positions"
+        [chatOverlayPanelClass]="'chat-citation-preview-pane'"
+        (chatOverlayAttached)="onAttached($event)"
+        (chatOverlayOutsideClick)="close()"
+        (chatOverlayDetach)="close()"
+      >
+        <chat-citation-preview [citation]="r.citation" />
+      </ng-template>
+    } @else {
+      <span
+        class="chat-citation-marker chat-citation-marker--unresolved"
+        [attr.title]="'No source available'"
+        [attr.aria-label]="'Citation ' + node().index + ': source unavailable'"
+      >{{ node().index }}</span>
+    }
+  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:inline}.chat-citation-marker{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;margin:0 1px;font-size:11px;font-weight:600;line-height:1;color:var(--tplane-chat-citation-marker-fg);background:var(--tplane-chat-citation-marker-bg);border:1px solid var(--tplane-chat-citation-marker-border);border-radius:var(--tplane-chat-citation-radius);translate:0 -1px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .12s ease,border-color .12s ease,color .12s ease}.chat-citation-marker:hover,.chat-citation-marker:focus-visible{background:var(--tplane-chat-citation-accent-soft);border-color:var(--tplane-chat-citation-accent-border);color:var(--tplane-chat-citation-accent);outline:none}.chat-citation-marker:focus-visible{box-shadow:0 0 0 2px var(--tplane-chat-citation-accent-border)}.chat-citation-marker--unresolved{color:var(--tplane-chat-text-muted);background:transparent;border-style:dashed;cursor:default}.chat-citation-marker--unresolved:hover{background:transparent;border-color:var(--tplane-chat-citation-marker-border);color:var(--tplane-chat-text-muted)}.chat-citation-marker--no-url{cursor:help}\n"], dependencies: [{ kind: "directive", type: ChatConnectedOverlayDirective, selector: "[chatConnectedOverlay]", inputs: ["chatOverlayOrigin", "chatOverlayOpen", "chatOverlayPositions", "chatOverlayPanelClass"], outputs: ["chatOverlayAttached", "chatOverlayOutsideClick", "chatOverlayDetach"] }, { kind: "directive", type: ChatOverlayOriginDirective, selector: "[chatOverlayOrigin]", exportAs: ["chatOverlayOrigin"] }, { kind: "component", type: ChatCitationPreviewComponent, selector: "chat-citation-preview", inputs: ["citation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatReasoningComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownCitationReferenceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chat-reasoning', standalone: true, imports: [ChatStreamingMdComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.data-has-content]': 'hasContent()',
-                        '[attr.data-expanded]': 'expandedStr()',
-                        '[attr.data-streaming]': 'isStreaming()',
-                    }, template: `
-    <button
-      type="button"
-      class="chat-reasoning__header"
-      [attr.aria-expanded]="expanded()"
-      (click)="toggle()"
-    >
-      <svg class="chat-reasoning__chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M4 2l4 4-4 4"/>
-      </svg>
-      @if (isStreaming()) {
-        <span class="chat-reasoning__pulse" aria-hidden="true"></span>
-      }
-      <span class="chat-reasoning__label">{{ resolvedLabel() }}</span>
-    </button>
-    @if (expanded()) {
-      <div class="chat-reasoning__body">
-        <chat-streaming-md [content]="content()" [streaming]="isStreaming()" />
-      </div>
+            args: [{ selector: 'chat-md-citation-reference', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChatConnectedOverlayDirective, ChatOverlayOriginDirective, ChatCitationPreviewComponent], template: `
+    @if (resolved(); as r) {
+      <a
+        class="chat-citation-marker"
+        [class.chat-citation-marker--no-url]="!r.citation.url"
+        chatOverlayOrigin
+        #origin="chatOverlayOrigin"
+        [attr.href]="r.citation.url ?? null"
+        [attr.target]="r.citation.url ? '_blank' : null"
+        [attr.rel]="r.citation.url ? 'noopener noreferrer' : null"
+        [attr.role]="r.citation.url ? null : 'button'"
+        [attr.tabindex]="r.citation.url ? null : '0'"
+        aria-haspopup="dialog"
+        [attr.aria-expanded]="open()"
+        [attr.aria-label]="ariaLabel(r.citation)"
+        (mouseenter)="onEnter()"
+        (mouseleave)="onLeave()"
+        (focus)="onFocus()"
+        (blur)="onBlur()"
+        (click)="onClick($event, r.citation)"
+        (keydown)="onKeydown($event, r.citation)"
+      >{{ node().index }}</a>
+      <ng-template
+        chatConnectedOverlay
+        [chatOverlayOrigin]="origin"
+        [chatOverlayOpen]="open()"
+        [chatOverlayPositions]="positions"
+        [chatOverlayPanelClass]="'chat-citation-preview-pane'"
+        (chatOverlayAttached)="onAttached($event)"
+        (chatOverlayOutsideClick)="close()"
+        (chatOverlayDetach)="close()"
+      >
+        <chat-citation-preview [citation]="r.citation" />
+      </ng-template>
+    } @else {
+      <span
+        class="chat-citation-marker chat-citation-marker--unresolved"
+        [attr.title]="'No source available'"
+        [attr.aria-label]="'Citation ' + node().index + ': source unavailable'"
+      >{{ node().index }}</span>
     }
-  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block;margin:0 0 .5rem}:host([data-has-content=\"false\"]){display:none}.chat-reasoning__header{display:inline-flex;align-items:center;gap:.5rem;padding:4px 10px;background:var(--tplane-chat-surface-alt);border:1px solid var(--tplane-chat-separator);border-radius:9999px;color:var(--tplane-chat-text-muted);font-size:var(--tplane-chat-font-size-xs);font-family:inherit;cursor:pointer;line-height:1.2}.chat-reasoning__header:hover{color:var(--tplane-chat-text)}.chat-reasoning__chevron{width:10px;height:10px;transition:transform .12s ease}:host([data-expanded=\"true\"]) .chat-reasoning__chevron{transform:rotate(90deg)}.chat-reasoning__pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tplane-chat-text-muted);animation:chat-reasoning-pulse 1.2s ease-in-out infinite}@keyframes chat-reasoning-pulse{0%,to{opacity:.3}50%{opacity:1}}.chat-reasoning__body{margin-top:.5rem;padding-left:12px;border-left:2px solid var(--tplane-chat-separator);color:var(--tplane-chat-text-muted)}.chat-reasoning__body chat-streaming-md{font-size:.95em}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], isStreaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStreaming", required: false }] }], durationMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "durationMs", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], defaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpanded", required: false }] }] } });
+  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:inline}.chat-citation-marker{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;margin:0 1px;font-size:11px;font-weight:600;line-height:1;color:var(--tplane-chat-citation-marker-fg);background:var(--tplane-chat-citation-marker-bg);border:1px solid var(--tplane-chat-citation-marker-border);border-radius:var(--tplane-chat-citation-radius);translate:0 -1px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .12s ease,border-color .12s ease,color .12s ease}.chat-citation-marker:hover,.chat-citation-marker:focus-visible{background:var(--tplane-chat-citation-accent-soft);border-color:var(--tplane-chat-citation-accent-border);color:var(--tplane-chat-citation-accent);outline:none}.chat-citation-marker:focus-visible{box-shadow:0 0 0 2px var(--tplane-chat-citation-accent-border)}.chat-citation-marker--unresolved{color:var(--tplane-chat-text-muted);background:transparent;border-style:dashed;cursor:default}.chat-citation-marker--unresolved:hover{background:transparent;border-color:var(--tplane-chat-citation-marker-border);color:var(--tplane-chat-text-muted)}.chat-citation-marker--no-url{cursor:help}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
 
-// libs/chat/src/lib/styles/chat-launcher-button.styles.ts
+// libs/chat/src/lib/markdown/views/markdown-table.component.ts
 // SPDX-License-Identifier: MIT
-const CHAT_LAUNCHER_BUTTON_STYLES = `
-  :host { display: inline-block; }
-  .chat-launcher-button {
-    width: 56px;
-    height: 56px;
-    border-radius: var(--tplane-chat-radius-launcher);
-    background: var(--tplane-chat-primary);
-    color: var(--tplane-chat-on-primary);
-    border: 0;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: var(--tplane-chat-shadow-md);
-    transition: transform 200ms ease;
-  }
-  .chat-launcher-button:hover { transform: scale(1.05); }
-  .chat-launcher-button svg { width: 24px; height: 24px; }
-`;
-
-// SPDX-License-Identifier: MIT
-class ChatLauncherButtonComponent {
-    /** Fires when the inner <button> receives a click. Prefer this over
-     *  binding `(click)` on the host element — explicit output gives
-     *  consumers (and Playwright) an unambiguous click target that won't
-     *  be intercepted by sibling overlays in higher stacking contexts.
-     *  Native `(click)` on the host still works for back-compat: the
-     *  click event bubbles through unchanged. */
-    clicked = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatLauncherButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: ChatLauncherButtonComponent, isStandalone: true, selector: "chat-launcher-button", outputs: { clicked: "clicked" }, ngImport: i0, template: `
-    <button type="button" class="chat-launcher-button" aria-label="Open chat" (click)="clicked.emit()">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-      </svg>
-    </button>
-  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:inline-block}.chat-launcher-button{width:56px;height:56px;border-radius:var(--tplane-chat-radius-launcher);background:var(--tplane-chat-primary);color:var(--tplane-chat-on-primary);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--tplane-chat-shadow-md);transition:transform .2s ease}.chat-launcher-button:hover{transform:scale(1.05)}.chat-launcher-button svg{width:24px;height:24px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class MarkdownTableComponent {
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    headerRow = computed(() => {
+        const rows = this.node().children;
+        return rows.length > 0 && rows[0].isHeader ? rows[0] : null;
+    }, ...(ngDevMode ? [{ debugName: "headerRow" }] : []));
+    bodyRows = computed(() => {
+        const rows = this.node().children;
+        return rows[0]?.isHeader ? rows.slice(1) : rows;
+    }, ...(ngDevMode ? [{ debugName: "bodyRows" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: MarkdownTableComponent, isStandalone: true, selector: "chat-md-table", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <table class="chat-md-table">
+      <thead>
+        @if (headerRow(); as row) {
+          <tr class="chat-md-table-row chat-md-table-row--header">
+            @for (cell of row.children; track $index) {
+              <th class="chat-md-table-cell" [style.text-align]="cell.alignment ?? null">
+                <chat-md-children [parent]="cell" />
+              </th>
+            }
+          </tr>
+        }
+      </thead>
+      <tbody>
+        @for (row of bodyRows(); track $index) {
+          <tr class="chat-md-table-row">
+            @for (cell of row.children; track $index) {
+              <td class="chat-md-table-cell" [style.text-align]="cell.alignment ?? null">
+                <chat-md-children [parent]="cell" />
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true, dependencies: [{ kind: "component", type: MarkdownChildrenComponent, selector: "chat-md-children", inputs: ["parent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatLauncherButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chat-launcher-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <button type="button" class="chat-launcher-button" aria-label="Open chat" (click)="clicked.emit()">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-      </svg>
-    </button>
-  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:inline-block}.chat-launcher-button{width:56px;height:56px;border-radius:var(--tplane-chat-radius-launcher);background:var(--tplane-chat-primary);color:var(--tplane-chat-on-primary);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--tplane-chat-shadow-md);transition:transform .2s ease}.chat-launcher-button:hover{transform:scale(1.05)}.chat-launcher-button svg{width:24px;height:24px}\n"] }]
-        }], propDecorators: { clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+            args: [{
+                    selector: 'chat-md-table',
+                    standalone: true,
+                    imports: [MarkdownChildrenComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <table class="chat-md-table">
+      <thead>
+        @if (headerRow(); as row) {
+          <tr class="chat-md-table-row chat-md-table-row--header">
+            @for (cell of row.children; track $index) {
+              <th class="chat-md-table-cell" [style.text-align]="cell.alignment ?? null">
+                <chat-md-children [parent]="cell" />
+              </th>
+            }
+          </tr>
+        }
+      </thead>
+      <tbody>
+        @for (row of bodyRows(); track $index) {
+          <tr class="chat-md-table-row">
+            @for (cell of row.children; track $index) {
+              <td class="chat-md-table-cell" [style.text-align]="cell.alignment ?? null">
+                <chat-md-children [parent]="cell" />
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+                }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
 
+// libs/chat/src/lib/markdown/markdown-table-row.token.ts
 // SPDX-License-Identifier: MIT
-const CHAT_SUGGESTIONS_STYLES = `
-  :host { display: block; }
-  .chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
-  .chat-suggestion {
-    padding: 6px 10px;
-    font-size: var(--tplane-chat-font-size-xs);
-    border-radius: var(--tplane-chat-radius-bubble);
-    border: 1px solid var(--tplane-chat-muted);
-    background: transparent;
-    color: var(--tplane-chat-text);
-    cursor: pointer;
-    transition: transform 200ms ease;
-  }
-  .chat-suggestion:hover { transform: scale(1.03); }
-  .chat-suggestion:disabled { cursor: wait; opacity: 0.6; }
-`;
+/**
+ * Provided by MarkdownTableRowComponent for header rows so that
+ * MarkdownTableCellComponent can render <th> instead of <td>.
+ * The value is a Signal<boolean> so that it tracks the row's isHeader reactively.
+ */
+const IS_HEADER_ROW = new InjectionToken('IS_HEADER_ROW', {
+    providedIn: null,
+    factory: () => signal(false),
+});
 
+// libs/chat/src/lib/markdown/views/markdown-table-row.component.ts
 // SPDX-License-Identifier: MIT
-class ChatSuggestionsComponent {
-    suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
-    selected = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatSuggestionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatSuggestionsComponent, isStandalone: true, selector: "chat-suggestions", inputs: { suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: `
-    <div class="chat-suggestions">
-      @for (s of suggestions(); track s) {
-        <button type="button" class="chat-suggestion" (click)="selected.emit(s)">{{ s }}</button>
+class MarkdownTableRowComponent {
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    registry = inject(MARKDOWN_VIEW_REGISTRY);
+    resolve(child) {
+        const entry = this.registry[child.type];
+        if (!entry)
+            return null;
+        return typeof entry === 'function' ? entry : entry.component;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: MarkdownTableRowComponent, isStandalone: true, selector: "chat-md-table-row", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: IS_HEADER_ROW,
+                useFactory: () => {
+                    const comp = inject(MarkdownTableRowComponent);
+                    return computed(() => comp.node().isHeader);
+                },
+            },
+        ], ngImport: i0, template: `
+    <tr class="chat-md-table-row" [class.chat-md-table-row--header]="node().isHeader">
+      @for (child of node().children; track $index) {
+        @let comp = resolve(child);
+        @if (comp) {
+          <ng-container *ngComponentOutlet="comp; inputs: { node: child }" />
+        }
       }
-    </div>
-  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block}.chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.chat-suggestion{padding:6px 10px;font-size:var(--tplane-chat-font-size-xs);border-radius:var(--tplane-chat-radius-bubble);border:1px solid var(--tplane-chat-muted);background:transparent;color:var(--tplane-chat-text);cursor:pointer;transition:transform .2s ease}.chat-suggestion:hover{transform:scale(1.03)}.chat-suggestion:disabled{cursor:wait;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </tr>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatSuggestionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownTableRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chat-suggestions', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="chat-suggestions">
-      @for (s of suggestions(); track s) {
-        <button type="button" class="chat-suggestion" (click)="selected.emit(s)">{{ s }}</button>
+            args: [{
+                    selector: 'chat-md-table-row',
+                    standalone: true,
+                    imports: [NgComponentOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <tr class="chat-md-table-row" [class.chat-md-table-row--header]="node().isHeader">
+      @for (child of node().children; track $index) {
+        @let comp = resolve(child);
+        @if (comp) {
+          <ng-container *ngComponentOutlet="comp; inputs: { node: child }" />
+        }
       }
-    </div>
-  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block}.chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.chat-suggestion{padding:6px 10px;font-size:var(--tplane-chat-font-size-xs);border-radius:var(--tplane-chat-radius-bubble);border:1px solid var(--tplane-chat-muted);background:transparent;color:var(--tplane-chat-text);cursor:pointer;transition:transform .2s ease}.chat-suggestion:hover{transform:scale(1.03)}.chat-suggestion:disabled{cursor:wait;opacity:.6}\n"] }]
-        }], propDecorators: { suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+    </tr>
+  `,
+                    providers: [
+                        {
+                            provide: IS_HEADER_ROW,
+                            useFactory: () => {
+                                const comp = inject(MarkdownTableRowComponent);
+                                return computed(() => comp.node().isHeader);
+                            },
+                        },
+                    ],
+                }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
 
-// libs/chat/src/lib/styles/chat-input.styles.ts
+// libs/chat/src/lib/markdown/views/markdown-table-cell.component.ts
 // SPDX-License-Identifier: MIT
-const CHAT_INPUT_STYLES = `
-:host {
-  display: block;
-  width: 100%;
-  padding: 0 var(--tplane-chat-edge-pad);
-  box-sizing: border-box;
+class MarkdownTableCellComponent {
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    isHeaderRowToken = inject(IS_HEADER_ROW, { optional: true });
+    isHeader = computed(() => this.isHeaderRowToken ? this.isHeaderRowToken() : false, ...(ngDevMode ? [{ debugName: "isHeader" }] : []));
+    alignment = computed(() => this.node().alignment, ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownTableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: MarkdownTableCellComponent, isStandalone: true, selector: "chat-md-table-cell", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (isHeader()) {
+      <th class="chat-md-table-cell" [style.text-align]="alignment() ?? null">
+        <chat-md-children [parent]="node()" />
+      </th>
+    } @else {
+      <td class="chat-md-table-cell" [style.text-align]="alignment() ?? null">
+        <chat-md-children [parent]="node()" />
+      </td>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: MarkdownChildrenComponent, selector: "chat-md-children", inputs: ["parent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MarkdownTableCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'chat-md-table-cell',
+                    standalone: true,
+                    imports: [MarkdownChildrenComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (isHeader()) {
+      <th class="chat-md-table-cell" [style.text-align]="alignment() ?? null">
+        <chat-md-children [parent]="node()" />
+      </th>
+    } @else {
+      <td class="chat-md-table-cell" [style.text-align]="alignment() ?? null">
+        <chat-md-children [parent]="node()" />
+      </td>
+    }
+  `,
+                }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
 
-.chat-input__container {
-  width: 100%;
-  max-width: var(--tplane-chat-max-width);
-  margin: 0 auto;
+// 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 }] }] } });
 
-.chat-input__pill {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: var(--tplane-chat-surface);
-  border: 1px solid var(--tplane-chat-separator);
-  border-radius: 9999px;
-  padding: 8px 8px 8px 16px;
-  min-height: 56px;
-  box-sizing: border-box;
-}
-
-.chat-input__textarea {
-  flex: 1 1 auto;
-  border: 0;
-  outline: none;
-  resize: none;
-  background: transparent;
-  color: var(--tplane-chat-text);
-  font: inherit;
-  font-size: 1rem;
-  line-height: 1.5;
-  padding: 0;
-  field-sizing: content;
-  overflow-y: auto;
-}
-.chat-input__textarea::placeholder { color: var(--tplane-chat-text-muted); }
-.chat-input__textarea::-webkit-scrollbar { width: 4px; }
-.chat-input__textarea::-webkit-scrollbar-thumb { background: var(--tplane-chat-separator); border-radius: 4px; }
-
-.chat-input__controls {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex: none;
-}
-
-.chat-input__send,
-.chat-input__send--stop {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  border: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: opacity 150ms ease, transform 150ms ease, background 150ms ease;
-  padding: 0;
-}
-.chat-input__send {
-  background: var(--tplane-chat-text);
-  color: var(--tplane-chat-bg);
-}
-.chat-input__send:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-  background: var(--tplane-chat-text-muted);
-}
-.chat-input__send:not(:disabled):hover { transform: scale(1.05); }
-.chat-input__send svg { width: 16px; height: 16px; }
-
-.chat-input__send--stop {
-  background: var(--tplane-chat-text-muted);
-  color: var(--tplane-chat-bg);
-}
-.chat-input__send--stop:hover { transform: scale(1.05); }
-.chat-input__send--stop svg { width: 14px; height: 14px; }
-`;
+// libs/chat/src/lib/markdown/cacheplane-markdown-views.ts
+// SPDX-License-Identifier: MIT
+/**
+ * Default view registry consumed by <chat-streaming-md>. Maps every
+ * MarkdownNode.type emitted by @cacheplane/partial-markdown@0.2 to its
+ * corresponding Angular component.
+ *
+ * Override per-node-type via `withViews(cacheplaneMarkdownViews, { … })`.
+ */
+const cacheplaneMarkdownViews = views({
+    'document': MarkdownDocumentComponent,
+    'paragraph': MarkdownParagraphComponent,
+    'heading': MarkdownHeadingComponent,
+    'blockquote': MarkdownBlockquoteComponent,
+    'list': MarkdownListComponent,
+    'list-item': MarkdownListItemComponent,
+    'code-block': MarkdownCodeBlockComponent,
+    'thematic-break': MarkdownThematicBreakComponent,
+    'text': MarkdownTextComponent,
+    'emphasis': MarkdownEmphasisComponent,
+    'strong': MarkdownStrongComponent,
+    'strikethrough': MarkdownStrikethroughComponent,
+    'inline-code': MarkdownInlineCodeComponent,
+    'math-inline': MarkdownMathComponent,
+    'math-display': MarkdownMathComponent,
+    'link': MarkdownLinkComponent,
+    'autolink': MarkdownAutolinkComponent,
+    'image': MarkdownImageComponent,
+    'soft-break': MarkdownSoftBreakComponent,
+    'hard-break': MarkdownHardBreakComponent,
+    'citation-reference': MarkdownCitationReferenceComponent,
+    '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/primitives/chat-input/chat-input.component.ts
+// libs/chat/src/lib/streaming/streaming-markdown.component.ts
 // SPDX-License-Identifier: MIT
+// How long streaming must be false AND content stable before we finalize the
+// parser. finish() is only needed to mark final node status (not used visually)
+// and to revert a genuinely-truncated trailing construct to CommonMark — the
+// live `parser.root` projection already renders everything during streaming, so
+// this delay has NO visual cost. It must comfortably exceed real inter-chunk
+// gaps (e.g. the pause between a table's header row and its delimiter row) and
+// any `streaming` flag flap, so finalize never fires mid-stream and reverts an
+// in-progress table to raw "| a | b |" text.
+const FINALIZE_DEBOUNCE_MS = 600;
 /**
- * Submits a trimmed message to the agent.
- * Returns the trimmed string on success, or `null` if the input was empty.
+ * Renders streaming markdown by walking a @cacheplane/partial-markdown AST
+ * through @threadplane/render's view registry.
+ *
+ * Reactivity model: the live `parser.root` keeps a stable JS reference
+ * across pushes (partial-markdown's identity guarantee). To make Angular
+ * signals propagate downstream when the underlying tree changes, we surface
+ * a materialized snapshot via `materialize()`. The snapshot shares
+ * structurally — unchanged subtrees keep the SAME reference, and any
+ * descendant change yields a NEW root reference. This lets Angular's
+ * `Object.is` equality check both detect changes (root reference differs)
+ * and short-circuit unchanged subtrees (per-node references stable).
+ *
+ * Override per-node-type renderers via the `[viewRegistry]` input or by
+ * supplying a different `MARKDOWN_VIEW_REGISTRY` provider in the injector
+ * tree.
  */
-function submitMessage(agent, text) {
-    const trimmed = text.trim();
-    if (!trimmed)
-        return null;
-    void agent.submit({ message: trimmed });
-    return trimmed;
-}
-class ChatInputComponent {
-    agent = input.required(...(ngDevMode ? [{ debugName: "agent" }] : []));
-    submitOnEnter = input(true, ...(ngDevMode ? [{ debugName: "submitOnEnter" }] : []));
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    /** When true (default), shows a stop button while the agent is streaming. */
-    showStopButton = input(true, ...(ngDevMode ? [{ debugName: "showStopButton" }] : []));
-    submitted = output();
-    stopped = output();
-    messageText = signal('', ...(ngDevMode ? [{ debugName: "messageText" }] : []));
-    isLoading = computed(() => this.agent().isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    /** True while an IME composition (CJK input, accent, autocorrect) is active. */
-    composing = signal(false, ...(ngDevMode ? [{ debugName: "composing" }] : []));
-    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
-    /** Submit is allowed only when not loading and there's non-whitespace text. */
-    canSubmit = computed(() => {
-        if (this.isLoading())
-            return false;
-        return this.messageText().trim().length > 0;
-    }, ...(ngDevMode ? [{ debugName: "canSubmit" }] : []));
-    /** The stop button only appears when the consumer opted in AND we're loading. */
-    canStop = computed(() => this.showStopButton(), ...(ngDevMode ? [{ debugName: "canStop" }] : []));
-    textareaEl = viewChild('textareaEl', ...(ngDevMode ? [{ debugName: "textareaEl" }] : []));
-    /**
-     * Auto-resize the textarea to fit its content as the user types or pastes
-     * multi-line text. Caps at min(40vh, 320px); beyond that the textarea
-     * scrolls. Without this, multi-line input is hidden behind the rows="1"
-     * fixed height (caught by live browser smoke).
-     */
+class ChatStreamingMdComponent {
+    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : []));
+    streaming = input(false, ...(ngDevMode ? [{ debugName: "streaming" }] : []));
+    viewRegistry = input(undefined, ...(ngDevMode ? [{ debugName: "viewRegistry" }] : []));
+    resolvedRegistry = computed(() => this.viewRegistry() ?? cacheplaneMarkdownViews, ...(ngDevMode ? [{ debugName: "resolvedRegistry" }] : []));
+    resolver = inject(CitationsResolverService, { optional: true });
     constructor() {
         effect(() => {
-            const text = this.messageText();
-            const el = this.textareaEl()?.nativeElement;
-            if (!el)
+            const r = this.root();
+            if (this.resolver && r) {
+                this.resolver.markdownDefs.set(r.citations ?? new Map());
+            }
+        });
+        // Debounced finalization. `finish()` is terminal and DESTRUCTIVE: it reverts
+        // an incomplete trailing construct to its CommonMark fallback — e.g. a table
+        // header before its delimiter row becomes raw "| a | b |" paragraph text. We
+        // must therefore never finalize while tokens are still arriving. The
+        // `streaming` input is not a reliable "still arriving" signal — it can flap
+        // false mid-stream, and at cold start it can read false for an entire live
+        // stream — so we finalize only once streaming is false AND no new content
+        // has arrived for a short, imperceptible window. Any new content or a
+        // streaming=true flap re-arms the timer, so finalize fires exactly once,
+        // after the stream truly stops. Until then the live `parser.root` projection
+        // (0.5.x) renders the in-progress content, including streaming tables.
+        let timer = null;
+        effect((onCleanup) => {
+            const isStreaming = this.streaming();
+            this.content(); // re-arm whenever new content arrives
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+            if (isStreaming || this.finished)
                 return;
-            // Cap: min(40vh, 320px). Recomputed on each input so viewport resizes
-            // between keystrokes are picked up without a dedicated resize listener.
-            const viewportH = typeof window === 'undefined' ? 600 : window.innerHeight;
-            const cap = Math.min(viewportH * 0.4, 320);
-            el.style.height = 'auto';
-            const next = Math.min(el.scrollHeight, cap);
-            el.style.height = `${next}px`;
-            el.style.overflowY = el.scrollHeight > cap ? 'auto' : 'hidden';
-            void text;
+            timer = setTimeout(() => {
+                timer = null;
+                if (this.streaming() || this.finished)
+                    return;
+                if (!this.prior.endsWith('\n'))
+                    this.parser.push('\n');
+                this.parser.finish();
+                this.finished = true;
+                this.finalizeTick.update((v) => v + 1);
+            }, FINALIZE_DEBOUNCE_MS);
+            onCleanup(() => {
+                if (timer) {
+                    clearTimeout(timer);
+                    timer = null;
+                }
+            });
         });
     }
-    focusTextarea() {
-        this.textareaEl()?.nativeElement.focus();
-    }
-    onSubmit() {
-        const submitted = submitMessage(this.agent(), this.messageText());
-        if (submitted !== null) {
-            this.submitted.emit(submitted);
-            this.messageText.set('');
-            const el = this.textareaEl()?.nativeElement;
-            if (el)
-                el.value = '';
-            requestAnimationFrame(() => this.textareaEl()?.nativeElement.focus());
-        }
-    }
-    /** Sync the textarea's value into the signal on user input. A direct
-     *  [value]/(input) pair is used instead of ngModel: NgModel does not
-     *  reliably write a programmatic clear back to the view under zoneless
-     *  + OnPush, leaving sent text visible in the composer (audit F1). */
-    onInput(event) {
-        this.messageText.set(event.target.value);
-    }
-    /** Abort the current streaming response (if the adapter supports it). */
-    onStop() {
-        const a = this.agent();
-        if (typeof a.stop === 'function') {
-            void a.stop();
-        }
-        this.stopped.emit();
-    }
-    onKeydown(event) {
-        if (!this.submitOnEnter() || event.shiftKey)
-            return;
-        // Don't submit while an IME composition is in progress (CJK input,
-        // dead-key accents, autocorrect popups). The composition's terminating
-        // Enter must reach the textarea so the candidate is committed; submitting
-        // here would discard the user's in-progress character.
-        if (this.composing() || event.isComposing || event.keyCode === 229)
-            return;
-        event.preventDefault();
-        this.onSubmit();
+    // Parser instance is rebuilt only when content diverges from the prior
+    // prefix (rare). For the common streaming case where content extends the
+    // prior content, we push the delta and reuse the existing parser tree.
+    parser = createPartialMarkdownParser();
+    prior = '';
+    finished = false;
+    // Bumped by the debounced finalizer so the `root` computed re-materializes
+    // the now-finished parser tree.
+    finalizeTick = signal(0, ...(ngDevMode ? [{ debugName: "finalizeTick" }] : []));
+    root = computed(() => {
+        const c = this.content();
+        this.finalizeTick(); // re-materialize after a debounced finalize
+        if (c !== this.prior) {
+            // Re-parse from scratch when the content diverged from the prior prefix,
+            // OR when the parser was already finalized — finish() is terminal, so
+            // pushing further deltas into a finished parser corrupts its state. A
+            // transient `streaming=false` mid-stream that finalized early thus
+            // recovers here: new content rebuilds an open, projecting parser.
+            if (c.startsWith(this.prior) && !this.finished) {
+                this.parser.push(c.slice(this.prior.length));
+            }
+            else {
+                this.parser = createPartialMarkdownParser();
+                this.finished = false;
+                if (c.length > 0)
+                    this.parser.push(c);
+            }
+            this.prior = c;
+        }
+        // Materialize for Angular reactivity: produces a NEW root reference when
+        // any descendant subtree changed; same reference when nothing changed
+        // (structural sharing). This is what makes signal-based CD propagate
+        // downstream changes despite the parser preserving identity.
+        return materialize(this.parser.root);
+    }, ...(ngDevMode ? [{ debugName: "root" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatStreamingMdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatStreamingMdComponent, isStandalone: true, selector: "chat-streaming-md", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, viewRegistry: { classPropertyName: "viewRegistry", publicName: "viewRegistry", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: MARKDOWN_VIEW_REGISTRY,
+                useFactory: (host) => host.resolvedRegistry(),
+                deps: [ChatStreamingMdComponent],
+            },
+        ], ngImport: i0, template: `
+    @if (root(); as r) {
+      <chat-md-children [parent]="r" />
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatInputComponent, isStandalone: true, selector: "chat-input", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null }, submitOnEnter: { classPropertyName: "submitOnEnter", publicName: "submitOnEnter", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showStopButton: { classPropertyName: "showStopButton", publicName: "showStopButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", stopped: "stopped" }, viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="chat-input__container">
-      <ng-content select="[chatInputBanner]" />
-      <ng-content select="[chatInputAttachments]" />
-      <div class="chat-input__pill">
-        <ng-content select="[chatInputLeading]" />
-        <textarea
-          #textareaEl
-          class="chat-input__textarea"
-          [value]="messageText()"
-          (input)="onInput($event)"
-          [placeholder]="placeholder()"
-          (keydown.enter)="onKeydown($any($event))"
-          (compositionstart)="composing.set(true)"
-          (compositionend)="composing.set(false)"
-          (focus)="focused.set(true)"
-          (blur)="focused.set(false)"
-          name="messageText"
-          rows="1"
-          aria-label="Type a message"
-        ></textarea>
-        <div class="chat-input__controls">
-          <ng-content select="[chatInputModelSelect]" />
-          <ng-content select="[chatInputTrailing]" />
-          @if (isLoading() && canStop()) {
-            <button
-              type="button"
-              class="chat-input__send chat-input__send--stop"
-              (click)="onStop()"
-              aria-label="Stop generating"
-              title="Stop generating"
-            >
-              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                <rect x="6" y="6" width="12" height="12" rx="2"/>
-              </svg>
-            </button>
-          } @else {
-            <button
-              type="button"
-              class="chat-input__send"
-              [disabled]="!canSubmit()"
-              (click)="onSubmit()"
-              aria-label="Send message"
-            >
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                <line x1="12" y1="19" x2="12" y2="5"/>
-                <polyline points="5 12 12 5 19 12"/>
-              </svg>
-            </button>
-          }
-        </div>
-      </div>
-      <ng-content select="[chatInputFooter]" />
-    </div>
-  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block;width:100%;padding:0 var(--tplane-chat-edge-pad);box-sizing:border-box}.chat-input__container{width:100%;max-width:var(--tplane-chat-max-width);margin:0 auto}.chat-input__pill{display:flex;align-items:center;gap:8px;background:var(--tplane-chat-surface);border:1px solid var(--tplane-chat-separator);border-radius:9999px;padding:8px 8px 8px 16px;min-height:56px;box-sizing:border-box}.chat-input__textarea{flex:1 1 auto;border:0;outline:none;resize:none;background:transparent;color:var(--tplane-chat-text);font:inherit;font-size:1rem;line-height:1.5;padding:0;field-sizing:content;overflow-y:auto}.chat-input__textarea::placeholder{color:var(--tplane-chat-text-muted)}.chat-input__textarea::-webkit-scrollbar{width:4px}.chat-input__textarea::-webkit-scrollbar-thumb{background:var(--tplane-chat-separator);border-radius:4px}.chat-input__controls{display:flex;align-items:center;gap:4px;flex:none}.chat-input__send,.chat-input__send--stop{width:36px;height:36px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .15s ease,transform .15s ease,background .15s ease;padding:0}.chat-input__send{background:var(--tplane-chat-text);color:var(--tplane-chat-bg)}.chat-input__send:disabled{opacity:.35;cursor:not-allowed;background:var(--tplane-chat-text-muted)}.chat-input__send:not(:disabled):hover{transform:scale(1.05)}.chat-input__send svg{width:16px;height:16px}.chat-input__send--stop{background:var(--tplane-chat-text-muted);color:var(--tplane-chat-bg)}.chat-input__send--stop:hover{transform:scale(1.05)}.chat-input__send--stop svg{width:14px;height:14px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["chat-streaming-md{display:block;color:var(--tplane-chat-text);line-height:var(--tplane-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(--tplane-chat-text-muted)}chat-streaming-md p{margin:0 0 .75rem;line-height:1.6;font-size:var(--tplane-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(--tplane-chat-text-muted)}chat-streaming-md mark{background:var(--tplane-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(--tplane-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(--tplane-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(--tplane-chat-surface-alt);color:var(--tplane-chat-text);padding:1px 5px;border-radius:4px;font-family:var(--tplane-chat-font-mono);font-size:.9em}chat-streaming-md pre{background:var(--tplane-chat-surface-alt);color:var(--tplane-chat-text);padding:12px 14px;border-radius:var(--tplane-chat-radius-card);overflow-x:auto;font-family:var(--tplane-chat-font-mono);font-size:var(--tplane-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(--tplane-chat-separator);padding:.25rem 0 .25rem 12px;margin:0 0 .75rem;color:var(--tplane-chat-text-muted)}chat-streaming-md blockquote>:last-child{margin-bottom:0}chat-streaming-md hr{border:none;border-top:1px solid var(--tplane-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(--tplane-chat-surface-alt)}chat-streaming-md th,chat-streaming-md td{border:1px solid var(--tplane-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(--tplane-chat-surface-alt);border:1px dashed var(--tplane-chat-separator);border-radius:6px;font-size:.9em;color:var(--tplane-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(--tplane-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: ChatInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatStreamingMdComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chat-input', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="chat-input__container">
-      <ng-content select="[chatInputBanner]" />
-      <ng-content select="[chatInputAttachments]" />
-      <div class="chat-input__pill">
-        <ng-content select="[chatInputLeading]" />
-        <textarea
-          #textareaEl
-          class="chat-input__textarea"
-          [value]="messageText()"
-          (input)="onInput($event)"
-          [placeholder]="placeholder()"
-          (keydown.enter)="onKeydown($any($event))"
-          (compositionstart)="composing.set(true)"
-          (compositionend)="composing.set(false)"
-          (focus)="focused.set(true)"
-          (blur)="focused.set(false)"
-          name="messageText"
-          rows="1"
-          aria-label="Type a message"
-        ></textarea>
-        <div class="chat-input__controls">
-          <ng-content select="[chatInputModelSelect]" />
-          <ng-content select="[chatInputTrailing]" />
-          @if (isLoading() && canStop()) {
-            <button
-              type="button"
-              class="chat-input__send chat-input__send--stop"
-              (click)="onStop()"
-              aria-label="Stop generating"
-              title="Stop generating"
-            >
-              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                <rect x="6" y="6" width="12" height="12" rx="2"/>
-              </svg>
-            </button>
-          } @else {
-            <button
-              type="button"
-              class="chat-input__send"
-              [disabled]="!canSubmit()"
-              (click)="onSubmit()"
-              aria-label="Send message"
-            >
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                <line x1="12" y1="19" x2="12" y2="5"/>
-                <polyline points="5 12 12 5 19 12"/>
-              </svg>
-            </button>
-          }
-        </div>
-      </div>
-      <ng-content select="[chatInputFooter]" />
-    </div>
-  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block;width:100%;padding:0 var(--tplane-chat-edge-pad);box-sizing:border-box}.chat-input__container{width:100%;max-width:var(--tplane-chat-max-width);margin:0 auto}.chat-input__pill{display:flex;align-items:center;gap:8px;background:var(--tplane-chat-surface);border:1px solid var(--tplane-chat-separator);border-radius:9999px;padding:8px 8px 8px 16px;min-height:56px;box-sizing:border-box}.chat-input__textarea{flex:1 1 auto;border:0;outline:none;resize:none;background:transparent;color:var(--tplane-chat-text);font:inherit;font-size:1rem;line-height:1.5;padding:0;field-sizing:content;overflow-y:auto}.chat-input__textarea::placeholder{color:var(--tplane-chat-text-muted)}.chat-input__textarea::-webkit-scrollbar{width:4px}.chat-input__textarea::-webkit-scrollbar-thumb{background:var(--tplane-chat-separator);border-radius:4px}.chat-input__controls{display:flex;align-items:center;gap:4px;flex:none}.chat-input__send,.chat-input__send--stop{width:36px;height:36px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .15s ease,transform .15s ease,background .15s ease;padding:0}.chat-input__send{background:var(--tplane-chat-text);color:var(--tplane-chat-bg)}.chat-input__send:disabled{opacity:.35;cursor:not-allowed;background:var(--tplane-chat-text-muted)}.chat-input__send:not(:disabled):hover{transform:scale(1.05)}.chat-input__send svg{width:16px;height:16px}.chat-input__send--stop{background:var(--tplane-chat-text-muted);color:var(--tplane-chat-bg)}.chat-input__send--stop:hover{transform:scale(1.05)}.chat-input__send--stop svg{width:14px;height:14px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], submitOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitOnEnter", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showStopButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStopButton", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], stopped: [{ type: i0.Output, args: ["stopped"] }], textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }] } });
+            args: [{ selector: 'chat-streaming-md', standalone: true, imports: [MarkdownChildrenComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    @if (root(); as r) {
+      <chat-md-children [parent]="r" />
+    }
+  `, providers: [
+                        {
+                            provide: MARKDOWN_VIEW_REGISTRY,
+                            useFactory: (host) => host.resolvedRegistry(),
+                            deps: [ChatStreamingMdComponent],
+                        },
+                    ], styles: ["chat-streaming-md{display:block;color:var(--tplane-chat-text);line-height:var(--tplane-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(--tplane-chat-text-muted)}chat-streaming-md p{margin:0 0 .75rem;line-height:1.6;font-size:var(--tplane-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(--tplane-chat-text-muted)}chat-streaming-md mark{background:var(--tplane-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(--tplane-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(--tplane-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(--tplane-chat-surface-alt);color:var(--tplane-chat-text);padding:1px 5px;border-radius:4px;font-family:var(--tplane-chat-font-mono);font-size:.9em}chat-streaming-md pre{background:var(--tplane-chat-surface-alt);color:var(--tplane-chat-text);padding:12px 14px;border-radius:var(--tplane-chat-radius-card);overflow-x:auto;font-family:var(--tplane-chat-font-mono);font-size:var(--tplane-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(--tplane-chat-separator);padding:.25rem 0 .25rem 12px;margin:0 0 .75rem;color:var(--tplane-chat-text-muted)}chat-streaming-md blockquote>:last-child{margin-bottom:0}chat-streaming-md hr{border:none;border-top:1px solid var(--tplane-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(--tplane-chat-surface-alt)}chat-streaming-md th,chat-streaming-md td{border:1px solid var(--tplane-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(--tplane-chat-surface-alt);border:1px dashed var(--tplane-chat-separator);border-radius:6px;font-size:.9em;color:var(--tplane-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(--tplane-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
-const CHAT_TYPING_INDICATOR_STYLES = `
-  /* Sit in the same centered column as chat-message-list so the dots
-     don't flash at the scroll container's left edge before the assistant
-     message renders. */
-  :host {
-    display: block;
-    padding: 0 var(--tplane-chat-space-6) var(--tplane-chat-space-3);
-    max-width: var(--tplane-chat-max-width);
-    margin: 0 auto;
-    width: 100%;
-    box-sizing: border-box;
-  }
-  .chat-typing__dots { display: inline-flex; gap: 4px; align-items: center; }
-  .chat-typing__dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--tplane-chat-text-muted);
-    animation: tplane-chat-typing-dot 1.4s ease-in-out infinite both;
-  }
-  .chat-typing__dot:nth-child(2) { animation-delay: 0.2s; }
-  .chat-typing__dot:nth-child(3) { animation-delay: 0.4s; }
-`;
+/**
+ * Render a millisecond duration as a human-readable label suitable for
+ * the chat-reasoning "Thought for Ns" pill.
+ *
+ * - <1 s         → "<1s"
+ * - 1–59 s       → "Ns"     (e.g. "4s")
+ * - ≥60 s        → "Nm Ms"  (e.g. "1m 12s", "60m 0s")
+ *
+ * Negative or non-finite inputs collapse to "<1s" so a corrupted timing
+ * map never produces noisy output.
+ */
+function formatDuration(ms) {
+    if (!Number.isFinite(ms) || ms < 1000)
+        return '<1s';
+    const totalSeconds = Math.floor(ms / 1000);
+    if (totalSeconds < 60)
+        return `${totalSeconds}s`;
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds - minutes * 60;
+    return `${minutes}m ${seconds}s`;
+}
 
-// libs/chat/src/lib/primitives/chat-typing-indicator/chat-typing-indicator.component.ts
+// libs/chat/src/lib/primitives/chat-reasoning/chat-reasoning.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.
+ * Renders an assistant's reasoning content as a compact pill that
+ * expands to reveal the underlying text. Three visual states:
  *
- * @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" /> }
- * ```
+ * - Streaming: pill shows "Thinking…" with a pulsing dot; auto-expanded
+ *   so the user sees reasoning stream in real time.
+ * - Idle, with durationMs known: pill shows "Thought for {duration}";
+ *   collapsed by default, expand on click.
+ * - Idle, no duration: pill shows "Show reasoning"; collapsed by default.
+ *
+ * The body re-uses chat-streaming-md so reasoning content gets the same
+ * markdown rendering pipeline as the visible response (lists, code,
+ * step labels often appear in reasoning output).
+ *
+ * Internal state: a tristate "expanded" — null means follow auto state-
+ * driven logic (force-expand on isStreaming, otherwise honor
+ * defaultExpanded), boolean is a manual user choice that wins for the
+ * lifetime of the instance.
  */
-function isTyping(agent) {
-    if (!agent.isLoading())
-        return false;
-    const msgs = agent.messages();
-    if (msgs.length === 0)
-        return true;
-    const last = msgs[msgs.length - 1];
-    if (last.role === 'user')
-        return true;
-    if (last.role === 'assistant') {
-        return typeof last.content === 'string'
-            ? !last.content
-            : last.content.length === 0;
+class ChatReasoningComponent {
+    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : []));
+    isStreaming = input(false, ...(ngDevMode ? [{ debugName: "isStreaming" }] : []));
+    durationMs = input(undefined, ...(ngDevMode ? [{ debugName: "durationMs" }] : []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    defaultExpanded = input(false, ...(ngDevMode ? [{ debugName: "defaultExpanded" }] : []));
+    hasContent = computed(() => (this.content() ?? '').length > 0, ...(ngDevMode ? [{ debugName: "hasContent" }] : []));
+    /** null = follow auto logic (streaming → expanded, else defaultExpanded). */
+    _expandedOverride = signal(null, ...(ngDevMode ? [{ debugName: "_expandedOverride" }] : []));
+    expanded = computed(() => {
+        const override = this._expandedOverride();
+        if (override !== null)
+            return override;
+        if (this.isStreaming())
+            return true;
+        return this.defaultExpanded();
+    }, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    expandedStr = computed(() => String(this.expanded()), ...(ngDevMode ? [{ debugName: "expandedStr" }] : []));
+    resolvedLabel = computed(() => {
+        const explicit = this.label();
+        if (explicit)
+            return explicit;
+        if (this.isStreaming())
+            return 'Thinking…';
+        const ms = this.durationMs();
+        if (typeof ms === 'number')
+            return `Thought for ${formatDuration(ms)}`;
+        return 'Show reasoning';
+    }, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : []));
+    constructor() {
+        // Reset the manual override when streaming re-engages from idle (e.g.
+        // follow-up turn that re-uses this instance) so the auto force-expand
+        // logic takes over again. Spec §3.3 bullet 3.
+        let prevStreaming = false;
+        effect(() => {
+            const streaming = this.isStreaming();
+            if (!prevStreaming && streaming) {
+                this._expandedOverride.set(null);
+            }
+            prevStreaming = streaming;
+        });
     }
-    return false;
-}
-class ChatTypingIndicatorComponent {
-    agent = input.required(...(ngDevMode ? [{ debugName: "agent" }] : []));
-    visible = computed(() => isTyping(this.agent()), ...(ngDevMode ? [{ debugName: "visible" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatTypingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatTypingIndicatorComponent, isStandalone: true, selector: "chat-typing-indicator", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (visible()) {
-      <div class="chat-typing__dots" role="status" aria-label="Assistant is typing">
-        <span class="chat-typing__dot"></span>
-        <span class="chat-typing__dot"></span>
-        <span class="chat-typing__dot"></span>
+    toggle() {
+        this._expandedOverride.set(!this.expanded());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatReasoningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatReasoningComponent, isStandalone: true, selector: "chat-reasoning", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, isStreaming: { classPropertyName: "isStreaming", publicName: "isStreaming", isSignal: true, isRequired: false, transformFunction: null }, durationMs: { classPropertyName: "durationMs", publicName: "durationMs", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-has-content": "hasContent()", "attr.data-expanded": "expandedStr()", "attr.data-streaming": "isStreaming()" } }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="chat-reasoning__header"
+      [attr.aria-expanded]="expanded()"
+      (click)="toggle()"
+    >
+      <svg class="chat-reasoning__chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M4 2l4 4-4 4"/>
+      </svg>
+      @if (isStreaming()) {
+        <span class="chat-reasoning__pulse" aria-hidden="true"></span>
+      }
+      <span class="chat-reasoning__label">{{ resolvedLabel() }}</span>
+    </button>
+    @if (expanded()) {
+      <div class="chat-reasoning__body">
+        <chat-streaming-md [content]="content()" [streaming]="isStreaming()" />
       </div>
     }
-  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block;padding:0 var(--tplane-chat-space-6) var(--tplane-chat-space-3);max-width:var(--tplane-chat-max-width);margin:0 auto;width:100%;box-sizing:border-box}.chat-typing__dots{display:inline-flex;gap:4px;align-items:center}.chat-typing__dot{width:6px;height:6px;border-radius:50%;background:var(--tplane-chat-text-muted);animation:tplane-chat-typing-dot 1.4s ease-in-out infinite both}.chat-typing__dot:nth-child(2){animation-delay:.2s}.chat-typing__dot:nth-child(3){animation-delay:.4s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block;margin:0 0 .5rem}:host([data-has-content=\"false\"]){display:none}.chat-reasoning__header{display:inline-flex;align-items:center;gap:.5rem;padding:4px 10px;background:var(--tplane-chat-surface-alt);border:1px solid var(--tplane-chat-separator);border-radius:9999px;color:var(--tplane-chat-text-muted);font-size:var(--tplane-chat-font-size-xs);font-family:inherit;cursor:pointer;line-height:1.2}.chat-reasoning__header:hover{color:var(--tplane-chat-text)}.chat-reasoning__chevron{width:10px;height:10px;transition:transform .12s ease}:host([data-expanded=\"true\"]) .chat-reasoning__chevron{transform:rotate(90deg)}.chat-reasoning__pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tplane-chat-text-muted);animation:chat-reasoning-pulse 1.2s ease-in-out infinite}@keyframes chat-reasoning-pulse{0%,to{opacity:.3}50%{opacity:1}}.chat-reasoning__body{margin-top:.5rem;padding-left:12px;border-left:2px solid var(--tplane-chat-separator);color:var(--tplane-chat-text-muted)}.chat-reasoning__body chat-streaming-md{font-size:.95em}\n"], dependencies: [{ 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: ChatTypingIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatReasoningComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chat-typing-indicator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (visible()) {
-      <div class="chat-typing__dots" role="status" aria-label="Assistant is typing">
-        <span class="chat-typing__dot"></span>
-        <span class="chat-typing__dot"></span>
-        <span class="chat-typing__dot"></span>
+            args: [{ selector: 'chat-reasoning', standalone: true, imports: [ChatStreamingMdComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-has-content]': 'hasContent()',
+                        '[attr.data-expanded]': 'expandedStr()',
+                        '[attr.data-streaming]': 'isStreaming()',
+                    }, template: `
+    <button
+      type="button"
+      class="chat-reasoning__header"
+      [attr.aria-expanded]="expanded()"
+      (click)="toggle()"
+    >
+      <svg class="chat-reasoning__chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M4 2l4 4-4 4"/>
+      </svg>
+      @if (isStreaming()) {
+        <span class="chat-reasoning__pulse" aria-hidden="true"></span>
+      }
+      <span class="chat-reasoning__label">{{ resolvedLabel() }}</span>
+    </button>
+    @if (expanded()) {
+      <div class="chat-reasoning__body">
+        <chat-streaming-md [content]="content()" [streaming]="isStreaming()" />
       </div>
     }
-  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block;padding:0 var(--tplane-chat-space-6) var(--tplane-chat-space-3);max-width:var(--tplane-chat-max-width);margin:0 auto;width:100%;box-sizing:border-box}.chat-typing__dots{display:inline-flex;gap:4px;align-items:center}.chat-typing__dot{width:6px;height:6px;border-radius:50%;background:var(--tplane-chat-text-muted);animation:tplane-chat-typing-dot 1.4s ease-in-out infinite both}.chat-typing__dot:nth-child(2){animation-delay:.2s}.chat-typing__dot:nth-child(3){animation-delay:.4s}\n"] }]
-        }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }] } });
+  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block;margin:0 0 .5rem}:host([data-has-content=\"false\"]){display:none}.chat-reasoning__header{display:inline-flex;align-items:center;gap:.5rem;padding:4px 10px;background:var(--tplane-chat-surface-alt);border:1px solid var(--tplane-chat-separator);border-radius:9999px;color:var(--tplane-chat-text-muted);font-size:var(--tplane-chat-font-size-xs);font-family:inherit;cursor:pointer;line-height:1.2}.chat-reasoning__header:hover{color:var(--tplane-chat-text)}.chat-reasoning__chevron{width:10px;height:10px;transition:transform .12s ease}:host([data-expanded=\"true\"]) .chat-reasoning__chevron{transform:rotate(90deg)}.chat-reasoning__pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tplane-chat-text-muted);animation:chat-reasoning-pulse 1.2s ease-in-out infinite}@keyframes chat-reasoning-pulse{0%,to{opacity:.3}50%{opacity:1}}.chat-reasoning__body{margin-top:.5rem;padding-left:12px;border-left:2px solid var(--tplane-chat-separator);color:var(--tplane-chat-text-muted)}.chat-reasoning__body chat-streaming-md{font-size:.95em}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], isStreaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStreaming", required: false }] }], durationMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "durationMs", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], defaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpanded", required: false }] }] } });
 
-// libs/chat/src/lib/styles/chat-history-search-palette.styles.ts
+// libs/chat/src/lib/styles/chat-launcher-button.styles.ts
 // SPDX-License-Identifier: MIT
-const CHAT_HISTORY_SEARCH_PALETTE_STYLES = `
-  :host { display: contents; }
-  .chat-history-search-palette__scrim {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: var(--tplane-chat-z-modal-scrim, 1100);
+const CHAT_LAUNCHER_BUTTON_STYLES = `
+  :host { display: inline-block; }
+  .chat-launcher-button {
+    width: 56px;
+    height: 56px;
+    border-radius: var(--tplane-chat-radius-launcher);
+    background: var(--tplane-chat-primary);
+    color: var(--tplane-chat-on-primary);
     border: 0;
-    padding: 0;
     cursor: pointer;
-  }
-  .chat-history-search-palette {
-    position: fixed;
-    top: 15vh;
-    left: 50%;
-    transform: translateX(-50%);
-    width: min(560px, 90vw);
-    max-height: 70vh;
-    background: var(--tplane-chat-bg);
-    border: 1px solid var(--tplane-chat-separator);
-    border-radius: 12px;
-    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
-    z-index: var(--tplane-chat-z-modal, 1101);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  .chat-history-search-palette__input-row {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--tplane-chat-separator);
-  }
-  .chat-history-search-palette__icon {
-    width: 18px;
-    height: 18px;
-    color: var(--tplane-chat-text-muted);
-    flex-shrink: 0;
+    justify-content: center;
+    box-shadow: var(--tplane-chat-shadow-md);
+    transition: transform 200ms ease;
   }
-  .chat-history-search-palette__input {
-    flex: 1 1 auto;
-    border: 0;
-    outline: none;
+  .chat-launcher-button:hover { transform: scale(1.05); }
+  .chat-launcher-button svg { width: 24px; height: 24px; }
+`;
+
+// SPDX-License-Identifier: MIT
+class ChatLauncherButtonComponent {
+    /** Fires when the inner <button> receives a click. Prefer this over
+     *  binding `(click)` on the host element — explicit output gives
+     *  consumers (and Playwright) an unambiguous click target that won't
+     *  be intercepted by sibling overlays in higher stacking contexts.
+     *  Native `(click)` on the host still works for back-compat: the
+     *  click event bubbles through unchanged. */
+    clicked = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatLauncherButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: ChatLauncherButtonComponent, isStandalone: true, selector: "chat-launcher-button", outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    <button type="button" class="chat-launcher-button" aria-label="Open chat" (click)="clicked.emit()">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+      </svg>
+    </button>
+  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:inline-block}.chat-launcher-button{width:56px;height:56px;border-radius:var(--tplane-chat-radius-launcher);background:var(--tplane-chat-primary);color:var(--tplane-chat-on-primary);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--tplane-chat-shadow-md);transition:transform .2s ease}.chat-launcher-button:hover{transform:scale(1.05)}.chat-launcher-button svg{width:24px;height:24px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatLauncherButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-launcher-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button type="button" class="chat-launcher-button" aria-label="Open chat" (click)="clicked.emit()">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+      </svg>
+    </button>
+  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:inline-block}.chat-launcher-button{width:56px;height:56px;border-radius:var(--tplane-chat-radius-launcher);background:var(--tplane-chat-primary);color:var(--tplane-chat-on-primary);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--tplane-chat-shadow-md);transition:transform .2s ease}.chat-launcher-button:hover{transform:scale(1.05)}.chat-launcher-button svg{width:24px;height:24px}\n"] }]
+        }], propDecorators: { clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+// SPDX-License-Identifier: MIT
+const CHAT_SUGGESTIONS_STYLES = `
+  :host { display: block; }
+  .chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
+  .chat-suggestion {
+    padding: 6px 10px;
+    font-size: var(--tplane-chat-font-size-xs);
+    border-radius: var(--tplane-chat-radius-bubble);
+    border: 1px solid var(--tplane-chat-muted);
     background: transparent;
     color: var(--tplane-chat-text);
-    font: inherit;
-    font-size: 1rem;
-  }
-  .chat-history-search-palette__input::placeholder {
-    color: var(--tplane-chat-text-muted);
-  }
-  .chat-history-search-palette__close {
-    background: transparent;
-    border: 0;
-    padding: 4px;
-    color: var(--tplane-chat-text-muted);
-    cursor: pointer;
-    border-radius: 4px;
-  }
-  .chat-history-search-palette__close:hover { color: var(--tplane-chat-text); }
-  .chat-history-search-palette__list {
-    flex: 1 1 auto;
-    overflow-y: auto;
-    padding: 4px;
-    margin: 0;
-    list-style: none;
-  }
-  .chat-history-search-palette__row {
-    display: flex;
-    flex-direction: column;
-    padding: 10px 12px;
-    border-radius: 8px;
     cursor: pointer;
+    transition: transform 200ms ease;
   }
-  .chat-history-search-palette__row[aria-selected="true"] {
-    background: var(--tplane-chat-surface-alt);
-  }
-  .chat-history-search-palette__row-title {
-    color: var(--tplane-chat-text);
-    font-size: var(--tplane-chat-font-size);
-  }
-  .chat-history-search-palette__row-subtitle {
-    color: var(--tplane-chat-text-muted);
-    font-size: var(--tplane-chat-font-size-sm);
-    margin-top: 2px;
-  }
-  .chat-history-search-palette__empty,
-  .chat-history-search-palette__hint {
-    padding: 24px 16px;
-    color: var(--tplane-chat-text-muted);
-    text-align: center;
-    font-size: var(--tplane-chat-font-size-sm);
-  }
-  .chat-history-search-palette__skeleton {
-    padding: 8px 4px;
-  }
-  .chat-history-search-palette__skeleton-row {
-    height: 36px;
-    margin: 4px 0;
-    background: var(--tplane-chat-surface-alt);
-    border-radius: 8px;
-    animation: tplane-chat-pulse 1.4s ease-in-out infinite;
-  }
+  .chat-suggestion:hover { transform: scale(1.03); }
+  .chat-suggestion:disabled { cursor: wait; opacity: 0.6; }
 `;
 
-// libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.ts
 // SPDX-License-Identifier: MIT
-let paletteInstanceCounter = 0;
-class ChatHistorySearchPaletteComponent {
-    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-    query = model('', ...(ngDevMode ? [{ debugName: "query" }] : []));
-    results = input([], ...(ngDevMode ? [{ debugName: "results" }] : []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    placeholder = input('Search conversations', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    threadSelected = output();
-    closed = output();
-    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
-    listId = `chat-history-search-palette__results-${++paletteInstanceCounter}`;
-    inputEl = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputEl" }] : []));
+class ChatSuggestionsComponent {
+    suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+    selected = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatSuggestionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatSuggestionsComponent, isStandalone: true, selector: "chat-suggestions", inputs: { suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: `
+    <div class="chat-suggestions">
+      @for (s of suggestions(); track s) {
+        <button type="button" class="chat-suggestion" (click)="selected.emit(s)">{{ s }}</button>
+      }
+    </div>
+  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block}.chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.chat-suggestion{padding:6px 10px;font-size:var(--tplane-chat-font-size-xs);border-radius:var(--tplane-chat-radius-bubble);border:1px solid var(--tplane-chat-muted);background:transparent;color:var(--tplane-chat-text);cursor:pointer;transition:transform .2s ease}.chat-suggestion:hover{transform:scale(1.03)}.chat-suggestion:disabled{cursor:wait;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatSuggestionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-suggestions', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="chat-suggestions">
+      @for (s of suggestions(); track s) {
+        <button type="button" class="chat-suggestion" (click)="selected.emit(s)">{{ s }}</button>
+      }
+    </div>
+  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block}.chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.chat-suggestion{padding:6px 10px;font-size:var(--tplane-chat-font-size-xs);border-radius:var(--tplane-chat-radius-bubble);border:1px solid var(--tplane-chat-muted);background:transparent;color:var(--tplane-chat-text);cursor:pointer;transition:transform .2s ease}.chat-suggestion:hover{transform:scale(1.03)}.chat-suggestion:disabled{cursor:wait;opacity:.6}\n"] }]
+        }], propDecorators: { suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+
+// libs/chat/src/lib/styles/chat-input.styles.ts
+// SPDX-License-Identifier: MIT
+const CHAT_INPUT_STYLES = `
+:host {
+  display: block;
+  width: 100%;
+  padding: 0 var(--tplane-chat-edge-pad);
+  box-sizing: border-box;
+}
+
+.chat-input__container {
+  width: 100%;
+  max-width: var(--tplane-chat-max-width);
+  margin: 0 auto;
+}
+
+.chat-input__pill {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--tplane-chat-surface);
+  border: 1px solid var(--tplane-chat-separator);
+  border-radius: 9999px;
+  padding: 8px 8px 8px 16px;
+  min-height: 56px;
+  box-sizing: border-box;
+}
+
+.chat-input__textarea {
+  flex: 1 1 auto;
+  border: 0;
+  outline: none;
+  resize: none;
+  background: transparent;
+  color: var(--tplane-chat-text);
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 0;
+  field-sizing: content;
+  overflow-y: auto;
+}
+.chat-input__textarea::placeholder { color: var(--tplane-chat-text-muted); }
+.chat-input__textarea::-webkit-scrollbar { width: 4px; }
+.chat-input__textarea::-webkit-scrollbar-thumb { background: var(--tplane-chat-separator); border-radius: 4px; }
+
+.chat-input__controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+}
+
+.chat-input__send,
+.chat-input__send--stop {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 150ms ease, transform 150ms ease, background 150ms ease;
+  padding: 0;
+}
+.chat-input__send {
+  background: var(--tplane-chat-text);
+  color: var(--tplane-chat-bg);
+}
+.chat-input__send:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  background: var(--tplane-chat-text-muted);
+}
+.chat-input__send:not(:disabled):hover { transform: scale(1.05); }
+.chat-input__send svg { width: 16px; height: 16px; }
+
+.chat-input__send--stop {
+  background: var(--tplane-chat-text-muted);
+  color: var(--tplane-chat-bg);
+}
+.chat-input__send--stop:hover { transform: scale(1.05); }
+.chat-input__send--stop svg { width: 14px; height: 14px; }
+`;
+
+// libs/chat/src/lib/primitives/chat-input/chat-input.component.ts
+// SPDX-License-Identifier: MIT
+/**
+ * Submits a trimmed message to the agent.
+ * Returns the trimmed string on success, or `null` if the input was empty.
+ */
+function submitMessage(agent, text) {
+    const trimmed = text.trim();
+    if (!trimmed)
+        return null;
+    void agent.submit({ message: trimmed });
+    return trimmed;
+}
+class ChatInputComponent {
+    agent = input.required(...(ngDevMode ? [{ debugName: "agent" }] : []));
+    submitOnEnter = input(true, ...(ngDevMode ? [{ debugName: "submitOnEnter" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** When true (default), shows a stop button while the agent is streaming. */
+    showStopButton = input(true, ...(ngDevMode ? [{ debugName: "showStopButton" }] : []));
+    submitted = output();
+    stopped = output();
+    messageText = signal('', ...(ngDevMode ? [{ debugName: "messageText" }] : []));
+    isLoading = computed(() => this.agent().isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    /** True while an IME composition (CJK input, accent, autocorrect) is active. */
+    composing = signal(false, ...(ngDevMode ? [{ debugName: "composing" }] : []));
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    /** Submit is allowed only when not loading and there's non-whitespace text. */
+    canSubmit = computed(() => {
+        if (this.isLoading())
+            return false;
+        return this.messageText().trim().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "canSubmit" }] : []));
+    /** The stop button only appears when the consumer opted in AND we're loading. */
+    canStop = computed(() => this.showStopButton(), ...(ngDevMode ? [{ debugName: "canStop" }] : []));
+    textareaEl = viewChild('textareaEl', ...(ngDevMode ? [{ debugName: "textareaEl" }] : []));
+    /**
+     * Auto-resize the textarea to fit its content as the user types or pastes
+     * multi-line text. Caps at min(40vh, 320px); beyond that the textarea
+     * scrolls. Without this, multi-line input is hidden behind the rows="1"
+     * fixed height (caught by live browser smoke).
+     */
     constructor() {
         effect(() => {
-            if (this.open()) {
-                this.activeIndex.set(0);
-                queueMicrotask(() => this.inputEl()?.nativeElement.focus());
-            }
-        });
-        effect(() => {
-            const max = this.results().length - 1;
-            if (max >= 0 && this.activeIndex() > max) {
-                this.activeIndex.set(max);
-            }
+            const text = this.messageText();
+            const el = this.textareaEl()?.nativeElement;
+            if (!el)
+                return;
+            // Cap: min(40vh, 320px). Recomputed on each input so viewport resizes
+            // between keystrokes are picked up without a dedicated resize listener.
+            const viewportH = typeof window === 'undefined' ? 600 : window.innerHeight;
+            const cap = Math.min(viewportH * 0.4, 320);
+            el.style.height = 'auto';
+            const next = Math.min(el.scrollHeight, cap);
+            el.style.height = `${next}px`;
+            el.style.overflowY = el.scrollHeight > cap ? 'auto' : 'hidden';
+            void text;
         });
     }
-    rowId(index) {
-        return `${this.listId}__row-${index}`;
+    focusTextarea() {
+        this.textareaEl()?.nativeElement.focus();
     }
-    activeRowId() {
-        return this.results().length > 0 ? this.rowId(this.activeIndex()) : null;
+    onSubmit() {
+        const submitted = submitMessage(this.agent(), this.messageText());
+        if (submitted !== null) {
+            this.submitted.emit(submitted);
+            this.messageText.set('');
+            const el = this.textareaEl()?.nativeElement;
+            if (el)
+                el.value = '';
+            requestAnimationFrame(() => this.textareaEl()?.nativeElement.focus());
+        }
     }
-    onInput(e) {
-        const value = e.target.value;
-        this.query.set(value);
+    /** Sync the textarea's value into the signal on user input. A direct
+     *  [value]/(input) pair is used instead of ngModel: NgModel does not
+     *  reliably write a programmatic clear back to the view under zoneless
+     *  + OnPush, leaving sent text visible in the composer (audit F1). */
+    onInput(event) {
+        this.messageText.set(event.target.value);
     }
-    onInputKeydown(e) {
-        if (e.key === 'Escape') {
-            e.preventDefault();
-            this.closed.emit();
-            return;
+    /** Abort the current streaming response (if the adapter supports it). */
+    onStop() {
+        const a = this.agent();
+        if (typeof a.stop === 'function') {
+            void a.stop();
         }
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            const max = this.results().length - 1;
-            if (max < 0)
-                return;
-            this.activeIndex.set(Math.min(this.activeIndex() + 1, max));
+        this.stopped.emit();
+    }
+    onKeydown(event) {
+        if (!this.submitOnEnter() || event.shiftKey)
             return;
-        }
-        if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            this.activeIndex.set(Math.max(this.activeIndex() - 1, 0));
+        // Don't submit while an IME composition is in progress (CJK input,
+        // dead-key accents, autocorrect popups). The composition's terminating
+        // Enter must reach the textarea so the candidate is committed; submitting
+        // here would discard the user's in-progress character.
+        if (this.composing() || event.isComposing || event.keyCode === 229)
             return;
-        }
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            const rows = this.results();
-            if (rows.length === 0)
-                return;
-            const row = rows[this.activeIndex()];
-            this.threadSelected.emit(row.id);
-            return;
-        }
-    }
-    onRowClick(id) {
-        this.threadSelected.emit(id);
+        event.preventDefault();
+        this.onSubmit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatHistorySearchPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatHistorySearchPaletteComponent, isStandalone: true, selector: "chat-history-search-palette", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, results: { classPropertyName: "results", publicName: "results", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", query: "queryChange", threadSelected: "threadSelected", closed: "closed" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    @if (open()) {
-      <button
-        type="button"
-        class="chat-history-search-palette__scrim"
-        aria-label="Close search"
-        (click)="closed.emit()"
-      ></button>
-      <div
-        class="chat-history-search-palette"
-        role="dialog"
-        aria-modal="true"
-        aria-label="Search conversations"
-      >
-        <div class="chat-history-search-palette__input-row">
-          <svg class="chat-history-search-palette__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <circle cx="11" cy="11" r="7"/>
-            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
-          </svg>
-          <input
-            #inputEl
-            class="chat-history-search-palette__input"
-            type="text"
-            role="combobox"
-            aria-expanded="true"
-            [attr.aria-controls]="listId"
-            [attr.aria-activedescendant]="activeRowId()"
-            [placeholder]="placeholder()"
-            [value]="query()"
-            (input)="onInput($event)"
-            (keydown)="onInputKeydown($event)"
-          />
-          <button
-            type="button"
-            class="chat-history-search-palette__close"
-            aria-label="Close"
-            (click)="closed.emit()"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <line x1="18" y1="6" x2="6" y2="18"/>
-              <line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
-          </button>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatInputComponent, isStandalone: true, selector: "chat-input", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null }, submitOnEnter: { classPropertyName: "submitOnEnter", publicName: "submitOnEnter", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showStopButton: { classPropertyName: "showStopButton", publicName: "showStopButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", stopped: "stopped" }, viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="chat-input__container">
+      <ng-content select="[chatInputBanner]" />
+      <ng-content select="[chatInputAttachments]" />
+      <div class="chat-input__pill">
+        <ng-content select="[chatInputLeading]" />
+        <textarea
+          #textareaEl
+          class="chat-input__textarea"
+          [value]="messageText()"
+          (input)="onInput($event)"
+          [placeholder]="placeholder()"
+          (keydown.enter)="onKeydown($any($event))"
+          (compositionstart)="composing.set(true)"
+          (compositionend)="composing.set(false)"
+          (focus)="focused.set(true)"
+          (blur)="focused.set(false)"
+          name="messageText"
+          rows="1"
+          aria-label="Type a message"
+        ></textarea>
+        <div class="chat-input__controls">
+          <ng-content select="[chatInputModelSelect]" />
+          <ng-content select="[chatInputTrailing]" />
+          @if (isLoading() && canStop()) {
+            <button
+              type="button"
+              class="chat-input__send chat-input__send--stop"
+              (click)="onStop()"
+              aria-label="Stop generating"
+              title="Stop generating"
+            >
+              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <rect x="6" y="6" width="12" height="12" rx="2"/>
+              </svg>
+            </button>
+          } @else {
+            <button
+              type="button"
+              class="chat-input__send"
+              [disabled]="!canSubmit()"
+              (click)="onSubmit()"
+              aria-label="Send message"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5"/>
+                <polyline points="5 12 12 5 19 12"/>
+              </svg>
+            </button>
+          }
         </div>
-
-        @if (loading() && results().length === 0) {
-          <div class="chat-history-search-palette__skeleton" aria-hidden="true">
-            <div class="chat-history-search-palette__skeleton-row"></div>
-            <div class="chat-history-search-palette__skeleton-row"></div>
-            <div class="chat-history-search-palette__skeleton-row"></div>
-          </div>
-        } @else if (results().length === 0 && query().length === 0) {
-          <div class="chat-history-search-palette__hint">Type to search your conversations.</div>
-        } @else if (results().length === 0) {
-          <div class="chat-history-search-palette__empty">No conversations match.</div>
-        } @else {
-          <ul class="chat-history-search-palette__list" role="listbox" [id]="listId">
-            @for (row of results(); let i = $index; track row.id) {
-              <li
-                class="chat-history-search-palette__row"
-                role="option"
-                tabindex="-1"
-                [id]="rowId(i)"
-                [attr.aria-selected]="i === activeIndex() ? 'true' : 'false'"
-                (click)="onRowClick(row.id)"
-                (keydown.enter)="onRowClick(row.id)"
-                (keydown.space)="onRowClick(row.id)"
-              >
-                <span class="chat-history-search-palette__row-title">{{ row.title }}</span>
-                @if (row.subtitle) {
-                  <span class="chat-history-search-palette__row-subtitle">{{ row.subtitle }}</span>
-                }
-              </li>
-            }
-          </ul>
-        }
       </div>
-    }
-  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:contents}.chat-history-search-palette__scrim{position:fixed;inset:0;background:#0006;z-index:var(--tplane-chat-z-modal-scrim, 1100);border:0;padding:0;cursor:pointer}.chat-history-search-palette{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(560px,90vw);max-height:70vh;background:var(--tplane-chat-bg);border:1px solid var(--tplane-chat-separator);border-radius:12px;box-shadow:0 16px 48px #00000040;z-index:var(--tplane-chat-z-modal, 1101);display:flex;flex-direction:column;overflow:hidden}.chat-history-search-palette__input-row{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--tplane-chat-separator)}.chat-history-search-palette__icon{width:18px;height:18px;color:var(--tplane-chat-text-muted);flex-shrink:0}.chat-history-search-palette__input{flex:1 1 auto;border:0;outline:none;background:transparent;color:var(--tplane-chat-text);font:inherit;font-size:1rem}.chat-history-search-palette__input::placeholder{color:var(--tplane-chat-text-muted)}.chat-history-search-palette__close{background:transparent;border:0;padding:4px;color:var(--tplane-chat-text-muted);cursor:pointer;border-radius:4px}.chat-history-search-palette__close:hover{color:var(--tplane-chat-text)}.chat-history-search-palette__list{flex:1 1 auto;overflow-y:auto;padding:4px;margin:0;list-style:none}.chat-history-search-palette__row{display:flex;flex-direction:column;padding:10px 12px;border-radius:8px;cursor:pointer}.chat-history-search-palette__row[aria-selected=true]{background:var(--tplane-chat-surface-alt)}.chat-history-search-palette__row-title{color:var(--tplane-chat-text);font-size:var(--tplane-chat-font-size)}.chat-history-search-palette__row-subtitle{color:var(--tplane-chat-text-muted);font-size:var(--tplane-chat-font-size-sm);margin-top:2px}.chat-history-search-palette__empty,.chat-history-search-palette__hint{padding:24px 16px;color:var(--tplane-chat-text-muted);text-align:center;font-size:var(--tplane-chat-font-size-sm)}.chat-history-search-palette__skeleton{padding:8px 4px}.chat-history-search-palette__skeleton-row{height:36px;margin:4px 0;background:var(--tplane-chat-surface-alt);border-radius:8px;animation:tplane-chat-pulse 1.4s ease-in-out infinite}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+      <ng-content select="[chatInputFooter]" />
+    </div>
+  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block;width:100%;padding:0 var(--tplane-chat-edge-pad);box-sizing:border-box}.chat-input__container{width:100%;max-width:var(--tplane-chat-max-width);margin:0 auto}.chat-input__pill{display:flex;align-items:center;gap:8px;background:var(--tplane-chat-surface);border:1px solid var(--tplane-chat-separator);border-radius:9999px;padding:8px 8px 8px 16px;min-height:56px;box-sizing:border-box}.chat-input__textarea{flex:1 1 auto;border:0;outline:none;resize:none;background:transparent;color:var(--tplane-chat-text);font:inherit;font-size:1rem;line-height:1.5;padding:0;field-sizing:content;overflow-y:auto}.chat-input__textarea::placeholder{color:var(--tplane-chat-text-muted)}.chat-input__textarea::-webkit-scrollbar{width:4px}.chat-input__textarea::-webkit-scrollbar-thumb{background:var(--tplane-chat-separator);border-radius:4px}.chat-input__controls{display:flex;align-items:center;gap:4px;flex:none}.chat-input__send,.chat-input__send--stop{width:36px;height:36px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .15s ease,transform .15s ease,background .15s ease;padding:0}.chat-input__send{background:var(--tplane-chat-text);color:var(--tplane-chat-bg)}.chat-input__send:disabled{opacity:.35;cursor:not-allowed;background:var(--tplane-chat-text-muted)}.chat-input__send:not(:disabled):hover{transform:scale(1.05)}.chat-input__send svg{width:16px;height:16px}.chat-input__send--stop{background:var(--tplane-chat-text-muted);color:var(--tplane-chat-bg)}.chat-input__send--stop:hover{transform:scale(1.05)}.chat-input__send--stop svg{width:14px;height:14px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatHistorySearchPaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chat-history-search-palette', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (open()) {
-      <button
-        type="button"
-        class="chat-history-search-palette__scrim"
-        aria-label="Close search"
-        (click)="closed.emit()"
-      ></button>
-      <div
-        class="chat-history-search-palette"
-        role="dialog"
-        aria-modal="true"
-        aria-label="Search conversations"
-      >
-        <div class="chat-history-search-palette__input-row">
-          <svg class="chat-history-search-palette__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <circle cx="11" cy="11" r="7"/>
-            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
-          </svg>
-          <input
-            #inputEl
-            class="chat-history-search-palette__input"
-            type="text"
-            role="combobox"
-            aria-expanded="true"
-            [attr.aria-controls]="listId"
-            [attr.aria-activedescendant]="activeRowId()"
-            [placeholder]="placeholder()"
-            [value]="query()"
-            (input)="onInput($event)"
-            (keydown)="onInputKeydown($event)"
-          />
-          <button
-            type="button"
-            class="chat-history-search-palette__close"
-            aria-label="Close"
-            (click)="closed.emit()"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <line x1="18" y1="6" x2="6" y2="18"/>
-              <line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
-          </button>
+            args: [{ selector: 'chat-input', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="chat-input__container">
+      <ng-content select="[chatInputBanner]" />
+      <ng-content select="[chatInputAttachments]" />
+      <div class="chat-input__pill">
+        <ng-content select="[chatInputLeading]" />
+        <textarea
+          #textareaEl
+          class="chat-input__textarea"
+          [value]="messageText()"
+          (input)="onInput($event)"
+          [placeholder]="placeholder()"
+          (keydown.enter)="onKeydown($any($event))"
+          (compositionstart)="composing.set(true)"
+          (compositionend)="composing.set(false)"
+          (focus)="focused.set(true)"
+          (blur)="focused.set(false)"
+          name="messageText"
+          rows="1"
+          aria-label="Type a message"
+        ></textarea>
+        <div class="chat-input__controls">
+          <ng-content select="[chatInputModelSelect]" />
+          <ng-content select="[chatInputTrailing]" />
+          @if (isLoading() && canStop()) {
+            <button
+              type="button"
+              class="chat-input__send chat-input__send--stop"
+              (click)="onStop()"
+              aria-label="Stop generating"
+              title="Stop generating"
+            >
+              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <rect x="6" y="6" width="12" height="12" rx="2"/>
+              </svg>
+            </button>
+          } @else {
+            <button
+              type="button"
+              class="chat-input__send"
+              [disabled]="!canSubmit()"
+              (click)="onSubmit()"
+              aria-label="Send message"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="12" y1="19" x2="12" y2="5"/>
+                <polyline points="5 12 12 5 19 12"/>
+              </svg>
+            </button>
+          }
         </div>
+      </div>
+      <ng-content select="[chatInputFooter]" />
+    </div>
+  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block;width:100%;padding:0 var(--tplane-chat-edge-pad);box-sizing:border-box}.chat-input__container{width:100%;max-width:var(--tplane-chat-max-width);margin:0 auto}.chat-input__pill{display:flex;align-items:center;gap:8px;background:var(--tplane-chat-surface);border:1px solid var(--tplane-chat-separator);border-radius:9999px;padding:8px 8px 8px 16px;min-height:56px;box-sizing:border-box}.chat-input__textarea{flex:1 1 auto;border:0;outline:none;resize:none;background:transparent;color:var(--tplane-chat-text);font:inherit;font-size:1rem;line-height:1.5;padding:0;field-sizing:content;overflow-y:auto}.chat-input__textarea::placeholder{color:var(--tplane-chat-text-muted)}.chat-input__textarea::-webkit-scrollbar{width:4px}.chat-input__textarea::-webkit-scrollbar-thumb{background:var(--tplane-chat-separator);border-radius:4px}.chat-input__controls{display:flex;align-items:center;gap:4px;flex:none}.chat-input__send,.chat-input__send--stop{width:36px;height:36px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .15s ease,transform .15s ease,background .15s ease;padding:0}.chat-input__send{background:var(--tplane-chat-text);color:var(--tplane-chat-bg)}.chat-input__send:disabled{opacity:.35;cursor:not-allowed;background:var(--tplane-chat-text-muted)}.chat-input__send:not(:disabled):hover{transform:scale(1.05)}.chat-input__send svg{width:16px;height:16px}.chat-input__send--stop{background:var(--tplane-chat-text-muted);color:var(--tplane-chat-bg)}.chat-input__send--stop:hover{transform:scale(1.05)}.chat-input__send--stop svg{width:14px;height:14px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], submitOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitOnEnter", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showStopButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStopButton", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], stopped: [{ type: i0.Output, args: ["stopped"] }], textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }] } });
 
-        @if (loading() && results().length === 0) {
-          <div class="chat-history-search-palette__skeleton" aria-hidden="true">
-            <div class="chat-history-search-palette__skeleton-row"></div>
-            <div class="chat-history-search-palette__skeleton-row"></div>
-            <div class="chat-history-search-palette__skeleton-row"></div>
-          </div>
-        } @else if (results().length === 0 && query().length === 0) {
-          <div class="chat-history-search-palette__hint">Type to search your conversations.</div>
-        } @else if (results().length === 0) {
-          <div class="chat-history-search-palette__empty">No conversations match.</div>
-        } @else {
-          <ul class="chat-history-search-palette__list" role="listbox" [id]="listId">
-            @for (row of results(); let i = $index; track row.id) {
-              <li
-                class="chat-history-search-palette__row"
-                role="option"
-                tabindex="-1"
-                [id]="rowId(i)"
-                [attr.aria-selected]="i === activeIndex() ? 'true' : 'false'"
-                (click)="onRowClick(row.id)"
-                (keydown.enter)="onRowClick(row.id)"
-                (keydown.space)="onRowClick(row.id)"
-              >
-                <span class="chat-history-search-palette__row-title">{{ row.title }}</span>
-                @if (row.subtitle) {
-                  <span class="chat-history-search-palette__row-subtitle">{{ row.subtitle }}</span>
-                }
-              </li>
-            }
-          </ul>
-        }
+// SPDX-License-Identifier: MIT
+const CHAT_TYPING_INDICATOR_STYLES = `
+  /* Sit in the same centered column as chat-message-list so the dots
+     don't flash at the scroll container's left edge before the assistant
+     message renders. */
+  :host {
+    display: block;
+    padding: 0 var(--tplane-chat-space-6) var(--tplane-chat-space-3);
+    max-width: var(--tplane-chat-max-width);
+    margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .chat-typing__dots { display: inline-flex; gap: 4px; align-items: center; }
+  .chat-typing__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--tplane-chat-text-muted);
+    animation: tplane-chat-typing-dot 1.4s ease-in-out infinite both;
+  }
+  .chat-typing__dot:nth-child(2) { animation-delay: 0.2s; }
+  .chat-typing__dot:nth-child(3) { animation-delay: 0.4s; }
+`;
+
+// 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;
+    const msgs = agent.messages();
+    if (msgs.length === 0)
+        return true;
+    const last = msgs[msgs.length - 1];
+    if (last.role === 'user')
+        return true;
+    if (last.role === 'assistant') {
+        return typeof last.content === 'string'
+            ? !last.content
+            : last.content.length === 0;
+    }
+    return false;
+}
+class ChatTypingIndicatorComponent {
+    agent = input.required(...(ngDevMode ? [{ debugName: "agent" }] : []));
+    visible = computed(() => isTyping(this.agent()), ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatTypingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatTypingIndicatorComponent, isStandalone: true, selector: "chat-typing-indicator", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (visible()) {
+      <div class="chat-typing__dots" role="status" aria-label="Assistant is typing">
+        <span class="chat-typing__dot"></span>
+        <span class="chat-typing__dot"></span>
+        <span class="chat-typing__dot"></span>
       </div>
     }
-  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:contents}.chat-history-search-palette__scrim{position:fixed;inset:0;background:#0006;z-index:var(--tplane-chat-z-modal-scrim, 1100);border:0;padding:0;cursor:pointer}.chat-history-search-palette{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(560px,90vw);max-height:70vh;background:var(--tplane-chat-bg);border:1px solid var(--tplane-chat-separator);border-radius:12px;box-shadow:0 16px 48px #00000040;z-index:var(--tplane-chat-z-modal, 1101);display:flex;flex-direction:column;overflow:hidden}.chat-history-search-palette__input-row{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--tplane-chat-separator)}.chat-history-search-palette__icon{width:18px;height:18px;color:var(--tplane-chat-text-muted);flex-shrink:0}.chat-history-search-palette__input{flex:1 1 auto;border:0;outline:none;background:transparent;color:var(--tplane-chat-text);font:inherit;font-size:1rem}.chat-history-search-palette__input::placeholder{color:var(--tplane-chat-text-muted)}.chat-history-search-palette__close{background:transparent;border:0;padding:4px;color:var(--tplane-chat-text-muted);cursor:pointer;border-radius:4px}.chat-history-search-palette__close:hover{color:var(--tplane-chat-text)}.chat-history-search-palette__list{flex:1 1 auto;overflow-y:auto;padding:4px;margin:0;list-style:none}.chat-history-search-palette__row{display:flex;flex-direction:column;padding:10px 12px;border-radius:8px;cursor:pointer}.chat-history-search-palette__row[aria-selected=true]{background:var(--tplane-chat-surface-alt)}.chat-history-search-palette__row-title{color:var(--tplane-chat-text);font-size:var(--tplane-chat-font-size)}.chat-history-search-palette__row-subtitle{color:var(--tplane-chat-text-muted);font-size:var(--tplane-chat-font-size-sm);margin-top:2px}.chat-history-search-palette__empty,.chat-history-search-palette__hint{padding:24px 16px;color:var(--tplane-chat-text-muted);text-align:center;font-size:var(--tplane-chat-font-size-sm)}.chat-history-search-palette__skeleton{padding:8px 4px}.chat-history-search-palette__skeleton-row{height:36px;margin:4px 0;background:var(--tplane-chat-surface-alt);border-radius:8px;animation:tplane-chat-pulse 1.4s ease-in-out infinite}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], results: [{ type: i0.Input, args: [{ isSignal: true, alias: "results", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], threadSelected: [{ type: i0.Output, args: ["threadSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
+  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block;padding:0 var(--tplane-chat-space-6) var(--tplane-chat-space-3);max-width:var(--tplane-chat-max-width);margin:0 auto;width:100%;box-sizing:border-box}.chat-typing__dots{display:inline-flex;gap:4px;align-items:center}.chat-typing__dot{width:6px;height:6px;border-radius:50%;background:var(--tplane-chat-text-muted);animation:tplane-chat-typing-dot 1.4s ease-in-out infinite both}.chat-typing__dot:nth-child(2){animation-delay:.2s}.chat-typing__dot:nth-child(3){animation-delay:.4s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatTypingIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-typing-indicator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (visible()) {
+      <div class="chat-typing__dots" role="status" aria-label="Assistant is typing">
+        <span class="chat-typing__dot"></span>
+        <span class="chat-typing__dot"></span>
+        <span class="chat-typing__dot"></span>
+      </div>
+    }
+  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:block;padding:0 var(--tplane-chat-space-6) var(--tplane-chat-space-3);max-width:var(--tplane-chat-max-width);margin:0 auto;width:100%;box-sizing:border-box}.chat-typing__dots{display:inline-flex;gap:4px;align-items:center}.chat-typing__dot{width:6px;height:6px;border-radius:50%;background:var(--tplane-chat-text-muted);animation:tplane-chat-typing-dot 1.4s ease-in-out infinite both}.chat-typing__dot:nth-child(2){animation-delay:.2s}.chat-typing__dot:nth-child(3){animation-delay:.4s}\n"] }]
+        }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }] } });
 
-// libs/chat/src/lib/styles/chat-overflow-menu.styles.ts
+// libs/chat/src/lib/styles/chat-history-search-palette.styles.ts
 // SPDX-License-Identifier: MIT
-const CHAT_OVERFLOW_MENU_STYLES = `
+const CHAT_HISTORY_SEARCH_PALETTE_STYLES = `
   :host { display: contents; }
-  .chat-overflow-menu__scrim {
+  .chat-history-search-palette__scrim {
     position: fixed;
     inset: 0;
-    background: transparent;
-    z-index: 59;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: var(--tplane-chat-z-modal-scrim, 1100);
     border: 0;
     padding: 0;
-    cursor: default;
+    cursor: pointer;
   }
-  .chat-overflow-menu {
+  .chat-history-search-palette {
     position: fixed;
-    z-index: 60;
-    min-width: 160px;
-    padding: 4px;
-    margin: 0;
-    list-style: none;
+    top: 15vh;
+    left: 50%;
+    transform: translateX(-50%);
+    width: min(560px, 90vw);
+    max-height: 70vh;
     background: var(--tplane-chat-bg);
     border: 1px solid var(--tplane-chat-separator);
-    border-radius: 8px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    border-radius: 12px;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
+    z-index: var(--tplane-chat-z-modal, 1101);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
   }
-  .chat-overflow-menu__item {
-    display: block;
-    padding: 8px 12px;
-    border-radius: 4px;
+  .chat-history-search-palette__input-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--tplane-chat-separator);
+  }
+  .chat-history-search-palette__icon {
+    width: 18px;
+    height: 18px;
+    color: var(--tplane-chat-text-muted);
+    flex-shrink: 0;
+  }
+  .chat-history-search-palette__input {
+    flex: 1 1 auto;
+    border: 0;
+    outline: none;
+    background: transparent;
     color: var(--tplane-chat-text);
-    font-size: var(--tplane-chat-font-size-sm);
+    font: inherit;
+    font-size: 1rem;
+  }
+  .chat-history-search-palette__input::placeholder {
+    color: var(--tplane-chat-text-muted);
+  }
+  .chat-history-search-palette__close {
+    background: transparent;
+    border: 0;
+    padding: 4px;
+    color: var(--tplane-chat-text-muted);
     cursor: pointer;
-    user-select: none;
+    border-radius: 4px;
   }
-  .chat-overflow-menu__item:hover {
+  .chat-history-search-palette__close:hover { color: var(--tplane-chat-text); }
+  .chat-history-search-palette__list {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 4px;
+    margin: 0;
+    list-style: none;
+  }
+  .chat-history-search-palette__row {
+    display: flex;
+    flex-direction: column;
+    padding: 10px 12px;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  .chat-history-search-palette__row[aria-selected="true"] {
     background: var(--tplane-chat-surface-alt);
   }
-  .chat-overflow-menu__item:focus-visible {
-    outline: 2px solid var(--tplane-chat-primary);
-    outline-offset: -2px;
+  .chat-history-search-palette__row-title {
+    color: var(--tplane-chat-text);
+    font-size: var(--tplane-chat-font-size);
   }
-  .chat-overflow-menu__item--destructive {
-    color: var(--tplane-chat-error-text);
+  .chat-history-search-palette__row-subtitle {
+    color: var(--tplane-chat-text-muted);
+    font-size: var(--tplane-chat-font-size-sm);
+    margin-top: 2px;
   }
-  .chat-overflow-menu__item--disabled {
+  .chat-history-search-palette__empty,
+  .chat-history-search-palette__hint {
+    padding: 24px 16px;
     color: var(--tplane-chat-text-muted);
-    cursor: not-allowed;
-    pointer-events: none;
+    text-align: center;
+    font-size: var(--tplane-chat-font-size-sm);
+  }
+  .chat-history-search-palette__skeleton {
+    padding: 8px 4px;
+  }
+  .chat-history-search-palette__skeleton-row {
+    height: 36px;
+    margin: 4px 0;
+    background: var(--tplane-chat-surface-alt);
+    border-radius: 8px;
+    animation: tplane-chat-pulse 1.4s ease-in-out infinite;
   }
 `;
 
-// libs/chat/src/lib/primitives/chat-overflow-menu/chat-overflow-menu.component.ts
+// libs/chat/src/lib/primitives/chat-history-search-palette/chat-history-search-palette.component.ts
 // SPDX-License-Identifier: MIT
-class ChatOverflowMenuComponent {
-    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    /** Element the menu anchors against (positions just below its bottom-right corner). */
-    anchor = input(null, ...(ngDevMode ? [{ debugName: "anchor" }] : []));
-    /** Alternative anchor: explicit viewport coordinates (e.g. cursor position
-     *  from a right-click). Takes precedence over `anchor` when set. */
-    anchorPos = input(null, ...(ngDevMode ? [{ debugName: "anchorPos" }] : []));
-    itemSelected = output();
+let paletteInstanceCounter = 0;
+class ChatHistorySearchPaletteComponent {
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    query = model('', ...(ngDevMode ? [{ debugName: "query" }] : []));
+    results = input([], ...(ngDevMode ? [{ debugName: "results" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    placeholder = input('Search conversations', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    threadSelected = output();
     closed = output();
-    position = computed(() => {
-        if (!this.open())
-            return { top: 0, left: 0 };
-        const pos = this.anchorPos();
-        if (pos) {
-            return { top: pos.y + 4, left: Math.max(pos.x, 8) };
-        }
-        const el = this.anchor();
-        if (!el) {
-            const vw = typeof window === 'undefined' ? 0 : window.innerWidth;
-            const vh = typeof window === 'undefined' ? 0 : window.innerHeight;
-            return { top: Math.max(vh / 3, 0), left: Math.max(vw / 2 - 80, 0) };
-        }
-        const rect = el.getBoundingClientRect();
-        return { top: rect.bottom + 4, left: Math.max(rect.right - 160, 8) };
-    }, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    listId = `chat-history-search-palette__results-${++paletteInstanceCounter}`;
+    inputEl = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputEl" }] : []));
     constructor() {
         effect(() => {
-            if (!this.open())
-                return;
-            queueMicrotask(() => {
-                const root = document.querySelector('.chat-overflow-menu');
-                const first = root?.querySelector('.chat-overflow-menu__item:not(.chat-overflow-menu__item--disabled)');
-                first?.focus();
-            });
+            if (this.open()) {
+                this.activeIndex.set(0);
+                queueMicrotask(() => this.inputEl()?.nativeElement.focus());
+            }
+        });
+        effect(() => {
+            const max = this.results().length - 1;
+            if (max >= 0 && this.activeIndex() > max) {
+                this.activeIndex.set(max);
+            }
         });
     }
-    onItemClick(item) {
-        if (item.disabled)
-            return;
-        this.itemSelected.emit(item.id);
-        this.closed.emit();
+    rowId(index) {
+        return `${this.listId}__row-${index}`;
     }
-    onMenuKeydown(e) {
+    activeRowId() {
+        return this.results().length > 0 ? this.rowId(this.activeIndex()) : null;
+    }
+    onInput(e) {
+        const value = e.target.value;
+        this.query.set(value);
+    }
+    onInputKeydown(e) {
         if (e.key === 'Escape') {
             e.preventDefault();
             this.closed.emit();
             return;
         }
-        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        if (e.key === 'ArrowDown') {
             e.preventDefault();
-            const root = e.currentTarget;
-            const items = Array.from(root.querySelectorAll('.chat-overflow-menu__item:not(.chat-overflow-menu__item--disabled)'));
-            if (items.length === 0)
+            const max = this.results().length - 1;
+            if (max < 0)
                 return;
-            const current = document.activeElement;
-            const idx = current ? items.indexOf(current) : -1;
-            const next = e.key === 'ArrowDown'
-                ? Math.min((idx < 0 ? 0 : idx + 1), items.length - 1)
-                : Math.max(idx - 1, 0);
-            items[next]?.focus();
+            this.activeIndex.set(Math.min(this.activeIndex() + 1, max));
+            return;
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.activeIndex.set(Math.max(this.activeIndex() - 1, 0));
+            return;
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const rows = this.results();
+            if (rows.length === 0)
+                return;
+            const row = rows[this.activeIndex()];
+            this.threadSelected.emit(row.id);
+            return;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatOverflowMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatOverflowMenuComponent, isStandalone: true, selector: "chat-overflow-menu", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, anchorPos: { classPropertyName: "anchorPos", publicName: "anchorPos", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", closed: "closed" }, ngImport: i0, template: `
+    onRowClick(id) {
+        this.threadSelected.emit(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatHistorySearchPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatHistorySearchPaletteComponent, isStandalone: true, selector: "chat-history-search-palette", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, results: { classPropertyName: "results", publicName: "results", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", query: "queryChange", threadSelected: "threadSelected", closed: "closed" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (open()) {
       <button
         type="button"
-        class="chat-overflow-menu__scrim"
-        aria-label="Close menu"
+        class="chat-history-search-palette__scrim"
+        aria-label="Close search"
         (click)="closed.emit()"
       ></button>
-      <ul
-        class="chat-overflow-menu"
-        role="menu"
-        tabindex="-1"
-        [style.top.px]="position().top"
-        [style.left.px]="position().left"
-        (keydown)="onMenuKeydown($event)"
+      <div
+        class="chat-history-search-palette"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Search conversations"
       >
-        @for (item of items(); track item.id) {
-          <li
-            role="menuitem"
-            tabindex="0"
-            class="chat-overflow-menu__item"
-            [class.chat-overflow-menu__item--destructive]="item.tone === 'destructive'"
-            [class.chat-overflow-menu__item--disabled]="item.disabled"
-            [attr.aria-disabled]="item.disabled ? 'true' : null"
-            [attr.tabindex]="item.disabled ? -1 : 0"
-            (click)="onItemClick(item)"
-            (keydown.enter)="onItemClick(item)"
-            (keydown.space)="onItemClick(item)"
+        <div class="chat-history-search-palette__input-row">
+          <svg class="chat-history-search-palette__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="7"/>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <input
+            #inputEl
+            class="chat-history-search-palette__input"
+            type="text"
+            role="combobox"
+            aria-expanded="true"
+            [attr.aria-controls]="listId"
+            [attr.aria-activedescendant]="activeRowId()"
+            [placeholder]="placeholder()"
+            [value]="query()"
+            (input)="onInput($event)"
+            (keydown)="onInputKeydown($event)"
+          />
+          <button
+            type="button"
+            class="chat-history-search-palette__close"
+            aria-label="Close"
+            (click)="closed.emit()"
           >
-            {{ item.label }}
-          </li>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        @if (loading() && results().length === 0) {
+          <div class="chat-history-search-palette__skeleton" aria-hidden="true">
+            <div class="chat-history-search-palette__skeleton-row"></div>
+            <div class="chat-history-search-palette__skeleton-row"></div>
+            <div class="chat-history-search-palette__skeleton-row"></div>
+          </div>
+        } @else if (results().length === 0 && query().length === 0) {
+          <div class="chat-history-search-palette__hint">Type to search your conversations.</div>
+        } @else if (results().length === 0) {
+          <div class="chat-history-search-palette__empty">No conversations match.</div>
+        } @else {
+          <ul class="chat-history-search-palette__list" role="listbox" [id]="listId">
+            @for (row of results(); let i = $index; track row.id) {
+              <li
+                class="chat-history-search-palette__row"
+                role="option"
+                tabindex="-1"
+                [id]="rowId(i)"
+                [attr.aria-selected]="i === activeIndex() ? 'true' : 'false'"
+                (click)="onRowClick(row.id)"
+                (keydown.enter)="onRowClick(row.id)"
+                (keydown.space)="onRowClick(row.id)"
+              >
+                <span class="chat-history-search-palette__row-title">{{ row.title }}</span>
+                @if (row.subtitle) {
+                  <span class="chat-history-search-palette__row-subtitle">{{ row.subtitle }}</span>
+                }
+              </li>
+            }
+          </ul>
         }
-      </ul>
+      </div>
     }
-  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:contents}.chat-overflow-menu__scrim{position:fixed;inset:0;background:transparent;z-index:59;border:0;padding:0;cursor:default}.chat-overflow-menu{position:fixed;z-index:60;min-width:160px;padding:4px;margin:0;list-style:none;background:var(--tplane-chat-bg);border:1px solid var(--tplane-chat-separator);border-radius:8px;box-shadow:0 8px 24px #00000026}.chat-overflow-menu__item{display:block;padding:8px 12px;border-radius:4px;color:var(--tplane-chat-text);font-size:var(--tplane-chat-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.chat-overflow-menu__item:hover{background:var(--tplane-chat-surface-alt)}.chat-overflow-menu__item:focus-visible{outline:2px solid var(--tplane-chat-primary);outline-offset:-2px}.chat-overflow-menu__item--destructive{color:var(--tplane-chat-error-text)}.chat-overflow-menu__item--disabled{color:var(--tplane-chat-text-muted);cursor:not-allowed;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:contents}.chat-history-search-palette__scrim{position:fixed;inset:0;background:#0006;z-index:var(--tplane-chat-z-modal-scrim, 1100);border:0;padding:0;cursor:pointer}.chat-history-search-palette{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(560px,90vw);max-height:70vh;background:var(--tplane-chat-bg);border:1px solid var(--tplane-chat-separator);border-radius:12px;box-shadow:0 16px 48px #00000040;z-index:var(--tplane-chat-z-modal, 1101);display:flex;flex-direction:column;overflow:hidden}.chat-history-search-palette__input-row{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--tplane-chat-separator)}.chat-history-search-palette__icon{width:18px;height:18px;color:var(--tplane-chat-text-muted);flex-shrink:0}.chat-history-search-palette__input{flex:1 1 auto;border:0;outline:none;background:transparent;color:var(--tplane-chat-text);font:inherit;font-size:1rem}.chat-history-search-palette__input::placeholder{color:var(--tplane-chat-text-muted)}.chat-history-search-palette__close{background:transparent;border:0;padding:4px;color:var(--tplane-chat-text-muted);cursor:pointer;border-radius:4px}.chat-history-search-palette__close:hover{color:var(--tplane-chat-text)}.chat-history-search-palette__list{flex:1 1 auto;overflow-y:auto;padding:4px;margin:0;list-style:none}.chat-history-search-palette__row{display:flex;flex-direction:column;padding:10px 12px;border-radius:8px;cursor:pointer}.chat-history-search-palette__row[aria-selected=true]{background:var(--tplane-chat-surface-alt)}.chat-history-search-palette__row-title{color:var(--tplane-chat-text);font-size:var(--tplane-chat-font-size)}.chat-history-search-palette__row-subtitle{color:var(--tplane-chat-text-muted);font-size:var(--tplane-chat-font-size-sm);margin-top:2px}.chat-history-search-palette__empty,.chat-history-search-palette__hint{padding:24px 16px;color:var(--tplane-chat-text-muted);text-align:center;font-size:var(--tplane-chat-font-size-sm)}.chat-history-search-palette__skeleton{padding:8px 4px}.chat-history-search-palette__skeleton-row{height:36px;margin:4px 0;background:var(--tplane-chat-surface-alt);border-radius:8px;animation:tplane-chat-pulse 1.4s ease-in-out infinite}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatOverflowMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatHistorySearchPaletteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chat-overflow-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'chat-history-search-palette', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (open()) {
       <button
         type="button"
-        class="chat-overflow-menu__scrim"
-        aria-label="Close menu"
+        class="chat-history-search-palette__scrim"
+        aria-label="Close search"
         (click)="closed.emit()"
       ></button>
-      <ul
-        class="chat-overflow-menu"
-        role="menu"
-        tabindex="-1"
-        [style.top.px]="position().top"
-        [style.left.px]="position().left"
-        (keydown)="onMenuKeydown($event)"
+      <div
+        class="chat-history-search-palette"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Search conversations"
       >
-        @for (item of items(); track item.id) {
-          <li
-            role="menuitem"
-            tabindex="0"
-            class="chat-overflow-menu__item"
-            [class.chat-overflow-menu__item--destructive]="item.tone === 'destructive'"
-            [class.chat-overflow-menu__item--disabled]="item.disabled"
-            [attr.aria-disabled]="item.disabled ? 'true' : null"
-            [attr.tabindex]="item.disabled ? -1 : 0"
-            (click)="onItemClick(item)"
-            (keydown.enter)="onItemClick(item)"
-            (keydown.space)="onItemClick(item)"
+        <div class="chat-history-search-palette__input-row">
+          <svg class="chat-history-search-palette__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="7"/>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <input
+            #inputEl
+            class="chat-history-search-palette__input"
+            type="text"
+            role="combobox"
+            aria-expanded="true"
+            [attr.aria-controls]="listId"
+            [attr.aria-activedescendant]="activeRowId()"
+            [placeholder]="placeholder()"
+            [value]="query()"
+            (input)="onInput($event)"
+            (keydown)="onInputKeydown($event)"
+          />
+          <button
+            type="button"
+            class="chat-history-search-palette__close"
+            aria-label="Close"
+            (click)="closed.emit()"
           >
-            {{ item.label }}
-          </li>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        @if (loading() && results().length === 0) {
+          <div class="chat-history-search-palette__skeleton" aria-hidden="true">
+            <div class="chat-history-search-palette__skeleton-row"></div>
+            <div class="chat-history-search-palette__skeleton-row"></div>
+            <div class="chat-history-search-palette__skeleton-row"></div>
+          </div>
+        } @else if (results().length === 0 && query().length === 0) {
+          <div class="chat-history-search-palette__hint">Type to search your conversations.</div>
+        } @else if (results().length === 0) {
+          <div class="chat-history-search-palette__empty">No conversations match.</div>
+        } @else {
+          <ul class="chat-history-search-palette__list" role="listbox" [id]="listId">
+            @for (row of results(); let i = $index; track row.id) {
+              <li
+                class="chat-history-search-palette__row"
+                role="option"
+                tabindex="-1"
+                [id]="rowId(i)"
+                [attr.aria-selected]="i === activeIndex() ? 'true' : 'false'"
+                (click)="onRowClick(row.id)"
+                (keydown.enter)="onRowClick(row.id)"
+                (keydown.space)="onRowClick(row.id)"
+              >
+                <span class="chat-history-search-palette__row-title">{{ row.title }}</span>
+                @if (row.subtitle) {
+                  <span class="chat-history-search-palette__row-subtitle">{{ row.subtitle }}</span>
+                }
+              </li>
+            }
+          </ul>
         }
-      </ul>
+      </div>
     }
-  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:contents}.chat-overflow-menu__scrim{position:fixed;inset:0;background:transparent;z-index:59;border:0;padding:0;cursor:default}.chat-overflow-menu{position:fixed;z-index:60;min-width:160px;padding:4px;margin:0;list-style:none;background:var(--tplane-chat-bg);border:1px solid var(--tplane-chat-separator);border-radius:8px;box-shadow:0 8px 24px #00000026}.chat-overflow-menu__item{display:block;padding:8px 12px;border-radius:4px;color:var(--tplane-chat-text);font-size:var(--tplane-chat-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.chat-overflow-menu__item:hover{background:var(--tplane-chat-surface-alt)}.chat-overflow-menu__item:focus-visible{outline:2px solid var(--tplane-chat-primary);outline-offset:-2px}.chat-overflow-menu__item--destructive{color:var(--tplane-chat-error-text)}.chat-overflow-menu__item--disabled{color:var(--tplane-chat-text-muted);cursor:not-allowed;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], anchorPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorPos", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:contents}.chat-history-search-palette__scrim{position:fixed;inset:0;background:#0006;z-index:var(--tplane-chat-z-modal-scrim, 1100);border:0;padding:0;cursor:pointer}.chat-history-search-palette{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(560px,90vw);max-height:70vh;background:var(--tplane-chat-bg);border:1px solid var(--tplane-chat-separator);border-radius:12px;box-shadow:0 16px 48px #00000040;z-index:var(--tplane-chat-z-modal, 1101);display:flex;flex-direction:column;overflow:hidden}.chat-history-search-palette__input-row{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--tplane-chat-separator)}.chat-history-search-palette__icon{width:18px;height:18px;color:var(--tplane-chat-text-muted);flex-shrink:0}.chat-history-search-palette__input{flex:1 1 auto;border:0;outline:none;background:transparent;color:var(--tplane-chat-text);font:inherit;font-size:1rem}.chat-history-search-palette__input::placeholder{color:var(--tplane-chat-text-muted)}.chat-history-search-palette__close{background:transparent;border:0;padding:4px;color:var(--tplane-chat-text-muted);cursor:pointer;border-radius:4px}.chat-history-search-palette__close:hover{color:var(--tplane-chat-text)}.chat-history-search-palette__list{flex:1 1 auto;overflow-y:auto;padding:4px;margin:0;list-style:none}.chat-history-search-palette__row{display:flex;flex-direction:column;padding:10px 12px;border-radius:8px;cursor:pointer}.chat-history-search-palette__row[aria-selected=true]{background:var(--tplane-chat-surface-alt)}.chat-history-search-palette__row-title{color:var(--tplane-chat-text);font-size:var(--tplane-chat-font-size)}.chat-history-search-palette__row-subtitle{color:var(--tplane-chat-text-muted);font-size:var(--tplane-chat-font-size-sm);margin-top:2px}.chat-history-search-palette__empty,.chat-history-search-palette__hint{padding:24px 16px;color:var(--tplane-chat-text-muted);text-align:center;font-size:var(--tplane-chat-font-size-sm)}.chat-history-search-palette__skeleton{padding:8px 4px}.chat-history-search-palette__skeleton-row{height:36px;margin:4px 0;background:var(--tplane-chat-surface-alt);border-radius:8px;animation:tplane-chat-pulse 1.4s ease-in-out infinite}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], results: [{ type: i0.Input, args: [{ isSignal: true, alias: "results", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], threadSelected: [{ type: i0.Output, args: ["threadSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
+
+// libs/chat/src/lib/styles/chat-overflow-menu.styles.ts
+// SPDX-License-Identifier: MIT
+const CHAT_OVERFLOW_MENU_STYLES = `
+  :host { display: contents; }
+  .chat-overflow-menu__scrim {
+    position: fixed;
+    inset: 0;
+    background: transparent;
+    z-index: 59;
+    border: 0;
+    padding: 0;
+    cursor: default;
+  }
+  .chat-overflow-menu {
+    position: fixed;
+    z-index: 60;
+    min-width: 160px;
+    padding: 4px;
+    margin: 0;
+    list-style: none;
+    background: var(--tplane-chat-bg);
+    border: 1px solid var(--tplane-chat-separator);
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  }
+  .chat-overflow-menu__item {
+    display: block;
+    padding: 8px 12px;
+    border-radius: 4px;
+    color: var(--tplane-chat-text);
+    font-size: var(--tplane-chat-font-size-sm);
+    cursor: pointer;
+    user-select: none;
+  }
+  .chat-overflow-menu__item:hover {
+    background: var(--tplane-chat-surface-alt);
+  }
+  .chat-overflow-menu__item:focus-visible {
+    outline: 2px solid var(--tplane-chat-primary);
+    outline-offset: -2px;
+  }
+  .chat-overflow-menu__item--destructive {
+    color: var(--tplane-chat-error-text);
+  }
+  .chat-overflow-menu__item--disabled {
+    color: var(--tplane-chat-text-muted);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+`;
+
+// libs/chat/src/lib/primitives/chat-overflow-menu/chat-overflow-menu.component.ts
+// SPDX-License-Identifier: MIT
+class ChatOverflowMenuComponent {
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Element the menu anchors against (positions just below its bottom-right corner). */
+    anchor = input(null, ...(ngDevMode ? [{ debugName: "anchor" }] : []));
+    /** Alternative anchor: explicit viewport coordinates (e.g. cursor position
+     *  from a right-click). Takes precedence over `anchor` when set. */
+    anchorPos = input(null, ...(ngDevMode ? [{ debugName: "anchorPos" }] : []));
+    itemSelected = output();
+    closed = output();
+    position = computed(() => {
+        if (!this.open())
+            return { top: 0, left: 0 };
+        const pos = this.anchorPos();
+        if (pos) {
+            return { top: pos.y + 4, left: Math.max(pos.x, 8) };
+        }
+        const el = this.anchor();
+        if (!el) {
+            const vw = typeof window === 'undefined' ? 0 : window.innerWidth;
+            const vh = typeof window === 'undefined' ? 0 : window.innerHeight;
+            return { top: Math.max(vh / 3, 0), left: Math.max(vw / 2 - 80, 0) };
+        }
+        const rect = el.getBoundingClientRect();
+        return { top: rect.bottom + 4, left: Math.max(rect.right - 160, 8) };
+    }, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    constructor() {
+        effect(() => {
+            if (!this.open())
+                return;
+            queueMicrotask(() => {
+                const root = document.querySelector('.chat-overflow-menu');
+                const first = root?.querySelector('.chat-overflow-menu__item:not(.chat-overflow-menu__item--disabled)');
+                first?.focus();
+            });
+        });
+    }
+    onItemClick(item) {
+        if (item.disabled)
+            return;
+        this.itemSelected.emit(item.id);
+        this.closed.emit();
+    }
+    onMenuKeydown(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.closed.emit();
+            return;
+        }
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const root = e.currentTarget;
+            const items = Array.from(root.querySelectorAll('.chat-overflow-menu__item:not(.chat-overflow-menu__item--disabled)'));
+            if (items.length === 0)
+                return;
+            const current = document.activeElement;
+            const idx = current ? items.indexOf(current) : -1;
+            const next = e.key === 'ArrowDown'
+                ? Math.min((idx < 0 ? 0 : idx + 1), items.length - 1)
+                : Math.max(idx - 1, 0);
+            items[next]?.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatOverflowMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatOverflowMenuComponent, isStandalone: true, selector: "chat-overflow-menu", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, anchorPos: { classPropertyName: "anchorPos", publicName: "anchorPos", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", closed: "closed" }, ngImport: i0, template: `
+    @if (open()) {
+      <button
+        type="button"
+        class="chat-overflow-menu__scrim"
+        aria-label="Close menu"
+        (click)="closed.emit()"
+      ></button>
+      <ul
+        class="chat-overflow-menu"
+        role="menu"
+        tabindex="-1"
+        [style.top.px]="position().top"
+        [style.left.px]="position().left"
+        (keydown)="onMenuKeydown($event)"
+      >
+        @for (item of items(); track item.id) {
+          <li
+            role="menuitem"
+            tabindex="0"
+            class="chat-overflow-menu__item"
+            [class.chat-overflow-menu__item--destructive]="item.tone === 'destructive'"
+            [class.chat-overflow-menu__item--disabled]="item.disabled"
+            [attr.aria-disabled]="item.disabled ? 'true' : null"
+            [attr.tabindex]="item.disabled ? -1 : 0"
+            (click)="onItemClick(item)"
+            (keydown.enter)="onItemClick(item)"
+            (keydown.space)="onItemClick(item)"
+          >
+            {{ item.label }}
+          </li>
+        }
+      </ul>
+    }
+  `, isInline: true, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:contents}.chat-overflow-menu__scrim{position:fixed;inset:0;background:transparent;z-index:59;border:0;padding:0;cursor:default}.chat-overflow-menu{position:fixed;z-index:60;min-width:160px;padding:4px;margin:0;list-style:none;background:var(--tplane-chat-bg);border:1px solid var(--tplane-chat-separator);border-radius:8px;box-shadow:0 8px 24px #00000026}.chat-overflow-menu__item{display:block;padding:8px 12px;border-radius:4px;color:var(--tplane-chat-text);font-size:var(--tplane-chat-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.chat-overflow-menu__item:hover{background:var(--tplane-chat-surface-alt)}.chat-overflow-menu__item:focus-visible{outline:2px solid var(--tplane-chat-primary);outline-offset:-2px}.chat-overflow-menu__item--destructive{color:var(--tplane-chat-error-text)}.chat-overflow-menu__item--disabled{color:var(--tplane-chat-text-muted);cursor:not-allowed;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatOverflowMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-overflow-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (open()) {
+      <button
+        type="button"
+        class="chat-overflow-menu__scrim"
+        aria-label="Close menu"
+        (click)="closed.emit()"
+      ></button>
+      <ul
+        class="chat-overflow-menu"
+        role="menu"
+        tabindex="-1"
+        [style.top.px]="position().top"
+        [style.left.px]="position().left"
+        (keydown)="onMenuKeydown($event)"
+      >
+        @for (item of items(); track item.id) {
+          <li
+            role="menuitem"
+            tabindex="0"
+            class="chat-overflow-menu__item"
+            [class.chat-overflow-menu__item--destructive]="item.tone === 'destructive'"
+            [class.chat-overflow-menu__item--disabled]="item.disabled"
+            [attr.aria-disabled]="item.disabled ? 'true' : null"
+            [attr.tabindex]="item.disabled ? -1 : 0"
+            (click)="onItemClick(item)"
+            (keydown.enter)="onItemClick(item)"
+            (keydown.space)="onItemClick(item)"
+          >
+            {{ item.label }}
+          </li>
+        }
+      </ul>
+    }
+  `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:contents}.chat-overflow-menu__scrim{position:fixed;inset:0;background:transparent;z-index:59;border:0;padding:0;cursor:default}.chat-overflow-menu{position:fixed;z-index:60;min-width:160px;padding:4px;margin:0;list-style:none;background:var(--tplane-chat-bg);border:1px solid var(--tplane-chat-separator);border-radius:8px;box-shadow:0 8px 24px #00000026}.chat-overflow-menu__item{display:block;padding:8px 12px;border-radius:4px;color:var(--tplane-chat-text);font-size:var(--tplane-chat-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.chat-overflow-menu__item:hover{background:var(--tplane-chat-surface-alt)}.chat-overflow-menu__item:focus-visible{outline:2px solid var(--tplane-chat-primary);outline-offset:-2px}.chat-overflow-menu__item--destructive{color:var(--tplane-chat-error-text)}.chat-overflow-menu__item--disabled{color:var(--tplane-chat-text-muted);cursor:not-allowed;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], anchorPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorPos", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 // libs/chat/src/lib/styles/chat-confirm-dialog.styles.ts
 // SPDX-License-Identifier: MIT
@@ -6755,283 +7659,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
   `, styles: [":host{font-family:var(--tplane-chat-font-family);color:var(--tplane-chat-text)}\n", ":host{display:inline-block}.chat-welcome-suggestion{display:inline-flex;align-items:center;gap:.5rem;padding:10px 16px;background:var(--tplane-chat-surface);border:1px solid var(--tplane-chat-separator);border-radius:9999px;color:var(--tplane-chat-text);font-family:inherit;font-size:var(--tplane-chat-font-size-sm);text-align:center;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .12s ease}.chat-welcome-suggestion:hover{background:var(--tplane-chat-surface-alt);border-color:var(--tplane-chat-text-muted)}.chat-welcome-suggestion:active{transform:scale(.98)}.chat-welcome-suggestion:focus-visible{outline:2px solid var(--tplane-chat-text-muted);outline-offset:2px}.chat-welcome-suggestion__label{white-space:nowrap}.chat-welcome-suggestion__chevron{display:none}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
-// libs/chat/src/lib/primitives/overlay/overlay-container.ts
-// SPDX-License-Identifier: MIT
-const CONTAINER_CLASS = 'chat-overlay-container';
-const STYLE_ID = 'chat-overlay-structure';
-// Structural CSS, injected once into <head> (same pattern as ROOT_TOKEN_STYLES
-// in chat-tokens.ts) so consumers need not import any stylesheet.
-const STRUCTURE_CSS = `
-.${CONTAINER_CLASS} {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  pointer-events: none;
-}
-.chat-overlay-pane {
-  position: absolute;
-  pointer-events: auto;
-}
-`;
-/** Returns the single shared overlay container appended to <body>, creating it
- *  (and injecting structural CSS) on first call. */
-function getOverlayContainer(doc) {
-    const existing = doc.querySelector('.' + CONTAINER_CLASS);
-    if (existing)
-        return existing;
-    if (!doc.getElementById(STYLE_ID)) {
-        const style = doc.createElement('style');
-        style.id = STYLE_ID;
-        style.textContent = STRUCTURE_CSS;
-        doc.head.appendChild(style);
-    }
-    const container = doc.createElement('div');
-    container.className = CONTAINER_CLASS;
-    doc.body.appendChild(container);
-    return container;
-}
-
-// libs/chat/src/lib/primitives/overlay/connected-position.ts
-// SPDX-License-Identifier: MIT
-//
-// Minimal port of CDK's FlexibleConnectedPositionStrategy fit logic
-// (~/repos/components/src/cdk/overlay/position/flexible-connected-position-strategy.ts):
-// _getOriginPoint + _getOverlayPoint + _getOverlayFit + _pushOverlayOnScreen.
-// Omits flexible-dimensions, grow-after-open, RTL, and virtual-keyboard handling.
-function originPoint(origin, pos) {
-    const x = pos.originX === 'center' ? origin.left + origin.width / 2 : pos.originX === 'start' ? origin.left : origin.right;
-    const y = pos.originY === 'center' ? origin.top + origin.height / 2 : pos.originY === 'top' ? origin.top : origin.bottom;
-    return { x, y };
-}
-function overlayPoint(origin, size, pos) {
-    let x = origin.x;
-    if (pos.overlayX === 'center')
-        x -= size.width / 2;
-    else if (pos.overlayX === 'end')
-        x -= size.width;
-    let y = origin.y;
-    if (pos.overlayY === 'center')
-        y -= size.height / 2;
-    else if (pos.overlayY === 'bottom')
-        y -= size.height;
-    return { x: x + (pos.offsetX ?? 0), y: y + (pos.offsetY ?? 0) };
-}
-function fitArea(point, size, viewport) {
-    const left = point.x;
-    const right = point.x + size.width;
-    const top = point.y;
-    const bottom = point.y + size.height;
-    const visibleW = Math.max(0, Math.min(right, viewport.right) - Math.max(left, viewport.left));
-    const visibleH = Math.max(0, Math.min(bottom, viewport.bottom) - Math.max(top, viewport.top));
-    const fits = left >= viewport.left && right <= viewport.right && top >= viewport.top && bottom <= viewport.bottom;
-    return { area: visibleW * visibleH, fits };
-}
-function pushOnScreen(point, size, viewport) {
-    const maxLeft = viewport.right - size.width;
-    const maxTop = viewport.bottom - size.height;
-    return {
-        x: Math.max(viewport.left, Math.min(point.x, maxLeft)),
-        y: Math.max(viewport.top, Math.min(point.y, maxTop)),
-    };
-}
-/** Sensible fallback when no positions are supplied: below the origin, start-aligned. */
-const DEFAULT_POSITION = { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' };
-function computeConnectedPosition(args) {
-    const { originRect, overlaySize, viewport, positions } = args;
-    // An empty positions array (the directive's input default) must still anchor to
-    // the trigger rather than crash on best! / render at 0,0.
-    const list = positions.length ? positions : [DEFAULT_POSITION];
-    let best = null;
-    for (const pos of list) {
-        const point = overlayPoint(originPoint(originRect, pos), overlaySize, pos);
-        const { area, fits } = fitArea(point, overlaySize, viewport);
-        if (fits) {
-            return { top: point.y, left: point.x, position: pos };
-        }
-        if (!best || area > best.area)
-            best = { point, pos, area };
-    }
-    const pushed = pushOnScreen(best.point, overlaySize, viewport);
-    return { top: pushed.y, left: pushed.x, position: best.pos };
-}
-function narrowViewport(win, margin) {
-    return {
-        left: margin,
-        top: margin,
-        right: win.innerWidth - margin,
-        bottom: win.innerHeight - margin,
-        width: win.innerWidth - 2 * margin,
-        height: win.innerHeight - 2 * margin,
-    };
-}
-
-// libs/chat/src/lib/primitives/overlay/connected-overlay.directive.ts
-// SPDX-License-Identifier: MIT
-/* eslint-disable @angular-eslint/no-input-rename, @angular-eslint/no-output-rename --
- * The `chatOverlay*` binding aliases ARE the intended public API: they namespace
- * the directive's inputs/outputs under the `chatOverlay` prefix (mirroring Angular
- * CDK's `cdkConnectedOverlay*` convention) rather than exposing bare names like
- * `open`/`positions` on an `<ng-template>`. The internal property names stay
- * concise, so aliasing here is deliberate, not a rename to avoid. */
-/** Marks the anchor element a connected overlay positions against. */
-class ChatOverlayOriginDirective {
-    elementRef = inject(ElementRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatOverlayOriginDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: ChatOverlayOriginDirective, isStandalone: true, selector: "[chatOverlayOrigin]", exportAs: ["chatOverlayOrigin"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatOverlayOriginDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[chatOverlayOrigin]',
-                    standalone: true,
-                    exportAs: 'chatOverlayOrigin',
-                }]
-        }] });
-const VIEWPORT_MARGIN = 8;
-/**
- * Applied to an `<ng-template>`. When `chatOverlayOpen` is true, the template
- * content is portaled into the shared body-level overlay container and
- * positioned connected to `chatOverlayOrigin`, repositioning live on
- * scroll/resize. Closes on outside mousedown (via the `chatOverlayOutsideClick`
- * output) and Tab; returns focus to the origin when focus was inside the pane.
- *
- * NOTE: the directive does not own the open state — it only emits. To fully
- * close the overlay, consumers MUST handle BOTH `(chatOverlayOutsideClick)` and
- * `(chatOverlayDetach)`. Tab-close (and Escape, when the consumer routes it)
- * surface through `chatOverlayDetach`, so wiring only `chatOverlayOutsideClick`
- * leaves the overlay stuck open on Tab.
- */
-class ChatConnectedOverlayDirective {
-    origin = input.required({ ...(ngDevMode ? { debugName: "origin" } : {}), alias: 'chatOverlayOrigin' });
-    open = input(false, { ...(ngDevMode ? { debugName: "open" } : {}), alias: 'chatOverlayOpen' });
-    positions = input([], { ...(ngDevMode ? { debugName: "positions" } : {}), alias: 'chatOverlayPositions' });
-    panelClass = input('', { ...(ngDevMode ? { debugName: "panelClass" } : {}), alias: 'chatOverlayPanelClass' });
-    /** Emits the pane element once attached (consumers focus content from it). */
-    attached = output({ alias: 'chatOverlayAttached' });
-    outsideClick = output({ alias: 'chatOverlayOutsideClick' });
-    detached = output({ alias: 'chatOverlayDetach' });
-    templateRef = inject((TemplateRef));
-    viewContainerRef = inject(ViewContainerRef);
-    document = inject(DOCUMENT);
-    pane = null;
-    viewRef = null;
-    resizeObs = null;
-    rafId = 0;
-    previouslyFocused = null;
-    onScrollOrResize = () => this.scheduleReposition();
-    onDocMouseDown = (e) => {
-        if (!this.pane)
-            return;
-        const path = e.composedPath();
-        if (path.includes(this.pane) || path.includes(this.origin().elementRef.nativeElement))
-            return;
-        this.outsideClick.emit(e);
-    };
-    onKeydown = (e) => {
-        if (e.key !== 'Tab' || !this.pane)
-            return;
-        const active = this.document.activeElement;
-        if (this.pane.contains(active) || active === this.origin().elementRef.nativeElement) {
-            this.detached.emit();
-        }
-    };
-    constructor() {
-        effect(() => {
-            if (this.open())
-                this.attach();
-            else
-                this.dispose();
-        });
-        inject(DestroyRef).onDestroy(() => this.dispose());
-    }
-    attach() {
-        if (this.pane)
-            return;
-        const win = this.document.defaultView;
-        if (!win)
-            return; // SSR / detached document
-        this.previouslyFocused = this.document.activeElement;
-        const pane = this.document.createElement('div');
-        pane.className = 'chat-overlay-pane';
-        for (const c of this.normalizePanelClass())
-            pane.classList.add(c);
-        getOverlayContainer(this.document).appendChild(pane);
-        this.viewRef = this.viewContainerRef.createEmbeddedView(this.templateRef);
-        this.viewRef.detectChanges();
-        for (const node of this.viewRef.rootNodes)
-            pane.appendChild(node);
-        this.pane = pane;
-        this.reposition();
-        win.addEventListener('scroll', this.onScrollOrResize, { capture: true, passive: true });
-        win.addEventListener('resize', this.onScrollOrResize, { passive: true });
-        this.document.addEventListener('mousedown', this.onDocMouseDown, true);
-        this.document.addEventListener('keydown', this.onKeydown, true);
-        if (typeof win.ResizeObserver === 'function') {
-            this.resizeObs = new win.ResizeObserver(() => this.scheduleReposition());
-            this.resizeObs.observe(this.origin().elementRef.nativeElement);
-            this.resizeObs.observe(pane);
-        }
-        this.attached.emit(pane);
-    }
-    scheduleReposition() {
-        const win = this.document.defaultView;
-        if (!win || !this.pane)
-            return;
-        if (this.rafId)
-            win.cancelAnimationFrame(this.rafId);
-        this.rafId = win.requestAnimationFrame(() => this.reposition());
-    }
-    reposition() {
-        const win = this.document.defaultView;
-        if (!win || !this.pane)
-            return;
-        const r = this.pane.getBoundingClientRect();
-        const result = computeConnectedPosition({
-            originRect: this.origin().elementRef.nativeElement.getBoundingClientRect(),
-            overlaySize: { width: r.width, height: r.height },
-            viewport: narrowViewport(win, VIEWPORT_MARGIN),
-            positions: this.positions(),
-        });
-        this.pane.style.top = `${Math.round(result.top)}px`;
-        this.pane.style.left = `${Math.round(result.left)}px`;
-    }
-    dispose() {
-        const win = this.document.defaultView;
-        if (this.rafId && win)
-            win.cancelAnimationFrame(this.rafId);
-        this.rafId = 0;
-        if (win) {
-            win.removeEventListener('scroll', this.onScrollOrResize, { capture: true });
-            win.removeEventListener('resize', this.onScrollOrResize);
-        }
-        this.document.removeEventListener('mousedown', this.onDocMouseDown, true);
-        this.document.removeEventListener('keydown', this.onKeydown, true);
-        this.resizeObs?.disconnect();
-        this.resizeObs = null;
-        const focusWasInPane = !!this.pane && this.pane.contains(this.document.activeElement);
-        this.viewRef?.destroy();
-        this.viewRef = null;
-        this.pane?.remove();
-        this.pane = null;
-        if (focusWasInPane && this.previouslyFocused)
-            this.previouslyFocused.focus();
-        this.previouslyFocused = null;
-    }
-    normalizePanelClass() {
-        const pc = this.panelClass();
-        return Array.isArray(pc) ? pc : pc ? [pc] : [];
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatConnectedOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: ChatConnectedOverlayDirective, isStandalone: true, selector: "[chatConnectedOverlay]", inputs: { origin: { classPropertyName: "origin", publicName: "chatOverlayOrigin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "chatOverlayOpen", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "chatOverlayPositions", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "chatOverlayPanelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attached: "chatOverlayAttached", outsideClick: "chatOverlayOutsideClick", detached: "chatOverlayDetach" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatConnectedOverlayDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[chatConnectedOverlay]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatOverlayOrigin", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatOverlayOpen", required: false }] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatOverlayPositions", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatOverlayPanelClass", required: false }] }], attached: [{ type: i0.Output, args: ["chatOverlayAttached"] }], outsideClick: [{ type: i0.Output, args: ["chatOverlayOutsideClick"] }], detached: [{ type: i0.Output, args: ["chatOverlayDetach"] }] } });
-
 // libs/chat/src/lib/styles/chat-select.styles.ts
 // SPDX-License-Identifier: MIT
 const CHAT_SELECT_STYLES = `
@@ -9387,8 +10014,8 @@ class ChatComponent {
      *
      * Matches the same `streaming + current` condition the bubble uses
      * to enable `.chat-message__caret`:
-     *   `agent().isLoading() && i === agent().messages().length - 1`
-     *   `i === agent().messages().length - 1`
+     *   `this.agent().isLoading() && i === this.agent().messages().length - 1`
+     *   `i === this.agent().messages().length - 1`
      *
      * Restricted to assistant role because the caret only renders on
      * assistant bubbles (`:host([data-role="assistant"][data-current=...
@@ -13158,5 +13785,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, ChatApprovalCardComponent, ChatCitationCardTemplateDirective, ChatCitationsCardComponent, ChatCitationsComponent, ChatComponent, ChatConfirmDialogComponent, ChatConnectedOverlayDirective, ChatErrorComponent, ChatGenerativeUiComponent, ChatGenuiSkeletonComponent, ChatHistorySearchPaletteComponent, ChatInputComponent, ChatInterruptComponent, ChatInterruptPanelComponent, ChatLauncherButtonComponent, ChatMessageActionsComponent, ChatMessageComponent, ChatMessageListComponent, ChatOverflowMenuComponent, ChatOverlayOriginDirective, 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 };
+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, ChatCitationPreviewComponent, ChatCitationsCardComponent, ChatCitationsComponent, ChatComponent, ChatConfirmDialogComponent, ChatConnectedOverlayDirective, ChatErrorComponent, ChatGenerativeUiComponent, ChatGenuiSkeletonComponent, ChatHistorySearchPaletteComponent, ChatInputComponent, ChatInterruptComponent, ChatInterruptPanelComponent, ChatLauncherButtonComponent, ChatMessageActionsComponent, ChatMessageComponent, ChatMessageListComponent, ChatOverflowMenuComponent, ChatOverlayOriginDirective, 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, citationTypeLabel, createA2uiSurfaceStore, createAgentRef, createContentClassifier, createParseTreeStore, createPartialArgsBridge, deriveDomain, deriveJsonSchema, deriveMonogram, deriveSourceType, emitBinding, executeFunctionTool, extractErrorMessage, formatDuration, formatPublished, getInterrupt, getMessageType, injectThreadRouting, isAbortError, isAssistantMessage, isSystemMessage, isToolMessage, isTyping, isUserMessage, messageContent, mockAgent, monogramColor, monogramHue, normalizeEnvelopeArgs, normalizeViewEntry, provideChat, renderMarkdown, startClientToolExecutor, statusColor, submitMessage, toAgentError, toClientToolSpecs, tools, validateArgs, view };
 //# sourceMappingURL=threadplane-chat.mjs.map