@threadplane/chat 0.0.46

package/fesm2022/threadplane-chat-debug.mjs

@@ -0,0 +1,1002 @@
+import * as i0 from '@angular/core';
+import { input, output, ChangeDetectionStrategy, Component, computed, signal, HostListener, inject, ElementRef, effect, afterNextRender } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+
+// SPDX-License-Identifier: MIT
+/**
+ * Component-scoped CSS variables for the chat-debug devtools chrome.
+ *
+ * Imported into every chat-debug component / primitive's `styles` array
+ * so the defaults are set on each `:host` element. Hosts override by
+ * setting any token on `chat-debug` or any ancestor.
+ *
+ * Independent from `--ngaf-chat-*` (the chat library's theme tokens).
+ * Devtools chrome stays dark regardless of host theme by default —
+ * matches Chrome DevTools / React DevTools / Redux DevTools convention.
+ *
+ * Palette anchor: shadcn zinc-900 + accent blue.
+ */
+const CHAT_DEBUG_TOKENS = `
+  :host {
+    --ngaf-chat-debug-bg: #18181b;
+    --ngaf-chat-debug-bg-deep: #09090b;
+    --ngaf-chat-debug-surface: #1f1f23;
+    --ngaf-chat-debug-border: #27272a;
+    --ngaf-chat-debug-border-strong: #3f3f46;
+    --ngaf-chat-debug-text: #fafafa;
+    --ngaf-chat-debug-text-muted: #a1a1aa;
+    --ngaf-chat-debug-text-subtle: #71717a;
+    --ngaf-chat-debug-accent: #4f8df5;
+    --ngaf-chat-debug-success: #4ade80;
+    --ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.5);
+    --ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, 0.4);
+    --ngaf-chat-debug-radius-panel: 12px;
+    --ngaf-chat-debug-radius-input: 8px;
+    --ngaf-chat-debug-radius-pill: 999px;
+    --ngaf-chat-debug-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+    --ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-family: var(--ngaf-chat-debug-font-sans);
+    color: var(--ngaf-chat-debug-text);
+
+    /*
+     * Cascade shim: rewire the chat library's color tokens to debug
+     * equivalents so embedded components that consume \`--ngaf-chat-*\`
+     * (debug-checkpoint-card, debug-state-diff, debug-state-inspector,
+     * any host-projected slot content) pick up the dark devtools surface
+     * without each one needing its own re-skin. Geometry / font tokens
+     * are left alone — they're neutral.
+     */
+    --ngaf-chat-bg: var(--ngaf-chat-debug-bg);
+    --ngaf-chat-text: var(--ngaf-chat-debug-text);
+    --ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);
+    --ngaf-chat-separator: var(--ngaf-chat-debug-border);
+    --ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);
+    --ngaf-chat-font-size-xs: 12px;
+    --ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);
+    --ngaf-chat-radius-card: 8px;
+    --ngaf-chat-success: var(--ngaf-chat-debug-success);
+    --ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);
+    --ngaf-chat-error-text: #fca5a5;
+    --ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);
+    --ngaf-chat-warning-text: #fcd34d;
+  }
+`;
+
+// SPDX-License-Identifier: MIT
+const CHAT_DEBUG_ROOT_STYLES = `
+@layer ngaf-chat-debug {
+  :root {
+    --ngaf-chat-sidebar-claim-right: 0px;
+    --ngaf-chat-debug-panel-size-h: 40vh;
+    --ngaf-chat-debug-panel-size-w: 420px;
+  }
+  :root[data-threadplane-chat-debug="bottom"] {
+    --ngaf-chat-debug-claim-bottom: var(--ngaf-chat-debug-panel-size-h, 40vh);
+    --ngaf-chat-occupy-bottom: var(--ngaf-chat-debug-panel-size-h, 40vh);
+  }
+  :root[data-threadplane-chat-debug="right"] {
+    --ngaf-chat-debug-claim-right: var(--ngaf-chat-debug-panel-size-w, 420px);
+    --ngaf-chat-occupy-right: var(--ngaf-chat-debug-panel-size-w, 420px);
+  }
+  :root[data-threadplane-chat-debug="left"] {
+    --ngaf-chat-debug-claim-left: var(--ngaf-chat-debug-panel-size-w, 420px);
+    --ngaf-chat-occupy-left: var(--ngaf-chat-debug-panel-size-w, 420px);
+  }
+}
+`;
+const STYLE_ELEMENT_ID = 'ngaf-chat-debug-root-styles';
+function ensureChatDebugRootStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(STYLE_ELEMENT_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = STYLE_ELEMENT_ID;
+    style.textContent = CHAT_DEBUG_ROOT_STYLES;
+    document.head.appendChild(style);
+}
+
+// SPDX-License-Identifier: MIT
+class DebugCheckpointCardComponent {
+    checkpoint = input.required(...(ngDevMode ? [{ debugName: "checkpoint" }] : []));
+    isSelected = input(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    selected = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DebugCheckpointCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: DebugCheckpointCardComponent, isStandalone: true, selector: "chat-debug-checkpoint-card", inputs: { checkpoint: { classPropertyName: "checkpoint", publicName: "checkpoint", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: `
+    <button
+      class="debug-checkpoint-card"
+      [class.debug-checkpoint-card--selected]="isSelected()"
+      (click)="selected.emit()"
+    >
+      <p class="debug-checkpoint-card__title">{{ checkpoint().node ?? 'Unknown' }}</p>
+      <div class="debug-checkpoint-card__meta">
+        @if (checkpoint().duration !== null && checkpoint().duration !== undefined) {
+          <span class="debug-checkpoint-card__badge">{{ checkpoint().duration }}ms</span>
+        }
+        @if (checkpoint().tokenCount !== null && checkpoint().tokenCount !== undefined) {
+          <span class="debug-checkpoint-card__badge">{{ checkpoint().tokenCount }} tok</span>
+        }
+      </div>
+    </button>
+  `, isInline: true, styles: [":host{--ngaf-chat-debug-bg: #18181b;--ngaf-chat-debug-bg-deep: #09090b;--ngaf-chat-debug-surface: #1f1f23;--ngaf-chat-debug-border: #27272a;--ngaf-chat-debug-border-strong: #3f3f46;--ngaf-chat-debug-text: #fafafa;--ngaf-chat-debug-text-muted: #a1a1aa;--ngaf-chat-debug-text-subtle: #71717a;--ngaf-chat-debug-accent: #4f8df5;--ngaf-chat-debug-success: #4ade80;--ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, .5);--ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, .4);--ngaf-chat-debug-radius-panel: 12px;--ngaf-chat-debug-radius-input: 8px;--ngaf-chat-debug-radius-pill: 999px;--ngaf-chat-debug-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-family:var(--ngaf-chat-debug-font-sans);color:var(--ngaf-chat-debug-text);--ngaf-chat-bg: var(--ngaf-chat-debug-bg);--ngaf-chat-text: var(--ngaf-chat-debug-text);--ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);--ngaf-chat-separator: var(--ngaf-chat-debug-border);--ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);--ngaf-chat-font-size-xs: 12px;--ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);--ngaf-chat-radius-card: 8px;--ngaf-chat-success: var(--ngaf-chat-debug-success);--ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);--ngaf-chat-error-text: #fca5a5;--ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);--ngaf-chat-warning-text: #fcd34d}\n", ".debug-checkpoint-card{width:100%;text-align:left;border-radius:var(--ngaf-chat-radius-card);border:1px solid var(--ngaf-chat-separator);padding:8px 12px;cursor:pointer;background:var(--ngaf-chat-bg);transition:background .15s ease,border-color .15s ease}.debug-checkpoint-card:hover{background:color-mix(in srgb,var(--ngaf-chat-text) 5%,transparent)}.debug-checkpoint-card--selected{border-color:var(--ngaf-chat-text-muted);background:color-mix(in srgb,var(--ngaf-chat-text) 5%,transparent)}.debug-checkpoint-card__title{font-size:var(--ngaf-chat-font-size-xs);font-weight:500;color:var(--ngaf-chat-text);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.debug-checkpoint-card__meta{display:flex;gap:8px;margin-top:4px}.debug-checkpoint-card__badge{font-size:var(--ngaf-chat-font-size-xs);padding:2px 6px;border-radius:4px;background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text-muted)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DebugCheckpointCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-debug-checkpoint-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      class="debug-checkpoint-card"
+      [class.debug-checkpoint-card--selected]="isSelected()"
+      (click)="selected.emit()"
+    >
+      <p class="debug-checkpoint-card__title">{{ checkpoint().node ?? 'Unknown' }}</p>
+      <div class="debug-checkpoint-card__meta">
+        @if (checkpoint().duration !== null && checkpoint().duration !== undefined) {
+          <span class="debug-checkpoint-card__badge">{{ checkpoint().duration }}ms</span>
+        }
+        @if (checkpoint().tokenCount !== null && checkpoint().tokenCount !== undefined) {
+          <span class="debug-checkpoint-card__badge">{{ checkpoint().tokenCount }} tok</span>
+        }
+      </div>
+    </button>
+  `, styles: [":host{--ngaf-chat-debug-bg: #18181b;--ngaf-chat-debug-bg-deep: #09090b;--ngaf-chat-debug-surface: #1f1f23;--ngaf-chat-debug-border: #27272a;--ngaf-chat-debug-border-strong: #3f3f46;--ngaf-chat-debug-text: #fafafa;--ngaf-chat-debug-text-muted: #a1a1aa;--ngaf-chat-debug-text-subtle: #71717a;--ngaf-chat-debug-accent: #4f8df5;--ngaf-chat-debug-success: #4ade80;--ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, .5);--ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, .4);--ngaf-chat-debug-radius-panel: 12px;--ngaf-chat-debug-radius-input: 8px;--ngaf-chat-debug-radius-pill: 999px;--ngaf-chat-debug-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-family:var(--ngaf-chat-debug-font-sans);color:var(--ngaf-chat-debug-text);--ngaf-chat-bg: var(--ngaf-chat-debug-bg);--ngaf-chat-text: var(--ngaf-chat-debug-text);--ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);--ngaf-chat-separator: var(--ngaf-chat-debug-border);--ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);--ngaf-chat-font-size-xs: 12px;--ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);--ngaf-chat-radius-card: 8px;--ngaf-chat-success: var(--ngaf-chat-debug-success);--ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);--ngaf-chat-error-text: #fca5a5;--ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);--ngaf-chat-warning-text: #fcd34d}\n", ".debug-checkpoint-card{width:100%;text-align:left;border-radius:var(--ngaf-chat-radius-card);border:1px solid var(--ngaf-chat-separator);padding:8px 12px;cursor:pointer;background:var(--ngaf-chat-bg);transition:background .15s ease,border-color .15s ease}.debug-checkpoint-card:hover{background:color-mix(in srgb,var(--ngaf-chat-text) 5%,transparent)}.debug-checkpoint-card--selected{border-color:var(--ngaf-chat-text-muted);background:color-mix(in srgb,var(--ngaf-chat-text) 5%,transparent)}.debug-checkpoint-card__title{font-size:var(--ngaf-chat-font-size-xs);font-weight:500;color:var(--ngaf-chat-text);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.debug-checkpoint-card__meta{display:flex;gap:8px;margin-top:4px}.debug-checkpoint-card__badge{font-size:var(--ngaf-chat-font-size-xs);padding:2px 6px;border-radius:4px;background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-text-muted)}\n"] }]
+        }], propDecorators: { checkpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkpoint", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+
+// SPDX-License-Identifier: MIT
+/**
+ * Computes a recursive diff between two state objects.
+ * Returns an array of DiffEntry describing added, removed, and changed keys.
+ */
+function computeStateDiff(before, after, prefix = '') {
+    const entries = [];
+    const allKeys = new Set([...Object.keys(before), ...Object.keys(after)]);
+    for (const key of allKeys) {
+        const path = prefix ? `${prefix}.${key}` : key;
+        const inBefore = key in before;
+        const inAfter = key in after;
+        if (!inBefore && inAfter) {
+            entries.push({ path, type: 'added', after: after[key] });
+        }
+        else if (inBefore && !inAfter) {
+            entries.push({ path, type: 'removed', before: before[key] });
+        }
+        else {
+            const bVal = before[key];
+            const aVal = after[key];
+            // Recurse into nested plain objects
+            if (isPlainObject(bVal) && isPlainObject(aVal)) {
+                entries.push(...computeStateDiff(bVal, aVal, path));
+            }
+            else if (!deepEqual(bVal, aVal)) {
+                entries.push({ path, type: 'changed', before: bVal, after: aVal });
+            }
+            // If equal, no entry
+        }
+    }
+    return entries;
+}
+function isPlainObject(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        Object.getPrototypeOf(value) === Object.prototype);
+}
+function deepEqual(a, b) {
+    if (a === b)
+        return true;
+    if (a === null || b === null)
+        return false;
+    if (typeof a !== typeof b)
+        return false;
+    if (Array.isArray(a) && Array.isArray(b)) {
+        if (a.length !== b.length)
+            return false;
+        return a.every((item, i) => deepEqual(item, b[i]));
+    }
+    if (isPlainObject(a) && isPlainObject(b)) {
+        const aKeys = Object.keys(a);
+        const bKeys = Object.keys(b);
+        if (aKeys.length !== bKeys.length)
+            return false;
+        return aKeys.every((key) => key in b && deepEqual(a[key], b[key]));
+    }
+    return false;
+}
+
+// SPDX-License-Identifier: MIT
+class DebugStateDiffComponent {
+    before = input({}, ...(ngDevMode ? [{ debugName: "before" }] : []));
+    after = input({}, ...(ngDevMode ? [{ debugName: "after" }] : []));
+    diffEntries = computed(() => computeStateDiff(this.before(), this.after()), ...(ngDevMode ? [{ debugName: "diffEntries" }] : []));
+    prefix(type) {
+        switch (type) {
+            case 'added': return '+';
+            case 'removed': return '-';
+            case 'changed': return '~';
+        }
+    }
+    entryClass(type) {
+        switch (type) {
+            case 'added': return 'debug-state-diff__entry--added';
+            case 'removed': return 'debug-state-diff__entry--removed';
+            case 'changed': return 'debug-state-diff__entry--changed';
+        }
+    }
+    /** @deprecated Use entryClass instead — kept for backward compat if any template references it */
+    colorClass(type) {
+        return this.entryClass(type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DebugStateDiffComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: DebugStateDiffComponent, isStandalone: true, selector: "chat-debug-state-diff", inputs: { before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: false, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (diffEntries().length === 0) {
+      <p class="debug-state-diff__empty">No changes</p>
+    } @else {
+      <div class="debug-state-diff__list">
+        @for (entry of diffEntries(); track entry.path) {
+          <div class="debug-state-diff__entry" [class]="entryClass(entry.type)">
+            <span class="debug-state-diff__key">{{ prefix(entry.type) }} {{ entry.path }}</span>
+            @if (entry.type === 'changed') {
+              <span class="debug-state-diff__value">{{ entry.before | json }} &rarr; {{ entry.after | json }}</span>
+            } @else if (entry.type === 'added') {
+              <span class="debug-state-diff__value">{{ entry.after | json }}</span>
+            } @else {
+              <span class="debug-state-diff__value">{{ entry.before | json }}</span>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{--ngaf-chat-debug-bg: #18181b;--ngaf-chat-debug-bg-deep: #09090b;--ngaf-chat-debug-surface: #1f1f23;--ngaf-chat-debug-border: #27272a;--ngaf-chat-debug-border-strong: #3f3f46;--ngaf-chat-debug-text: #fafafa;--ngaf-chat-debug-text-muted: #a1a1aa;--ngaf-chat-debug-text-subtle: #71717a;--ngaf-chat-debug-accent: #4f8df5;--ngaf-chat-debug-success: #4ade80;--ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, .5);--ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, .4);--ngaf-chat-debug-radius-panel: 12px;--ngaf-chat-debug-radius-input: 8px;--ngaf-chat-debug-radius-pill: 999px;--ngaf-chat-debug-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-family:var(--ngaf-chat-debug-font-sans);color:var(--ngaf-chat-debug-text);--ngaf-chat-bg: var(--ngaf-chat-debug-bg);--ngaf-chat-text: var(--ngaf-chat-debug-text);--ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);--ngaf-chat-separator: var(--ngaf-chat-debug-border);--ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);--ngaf-chat-font-size-xs: 12px;--ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);--ngaf-chat-radius-card: 8px;--ngaf-chat-success: var(--ngaf-chat-debug-success);--ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);--ngaf-chat-error-text: #fca5a5;--ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);--ngaf-chat-warning-text: #fcd34d}\n", ".debug-state-diff__empty{font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted);font-style:italic;margin:0}.debug-state-diff__list{display:flex;flex-direction:column;gap:4px}.debug-state-diff__entry{font-size:var(--ngaf-chat-font-size-xs);font-family:var(--ngaf-chat-font-mono);padding:4px 8px;border-radius:4px}.debug-state-diff__entry--added{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-success)}.debug-state-diff__entry--removed{background:var(--ngaf-chat-error-bg);color:var(--ngaf-chat-error-text)}.debug-state-diff__entry--changed{background:var(--ngaf-chat-warning-bg);color:var(--ngaf-chat-warning-text)}.debug-state-diff__key{font-weight:600}.debug-state-diff__value{display:block;padding-left:16px;color:var(--ngaf-chat-text-muted)}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DebugStateDiffComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-debug-state-diff', standalone: true, imports: [JsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (diffEntries().length === 0) {
+      <p class="debug-state-diff__empty">No changes</p>
+    } @else {
+      <div class="debug-state-diff__list">
+        @for (entry of diffEntries(); track entry.path) {
+          <div class="debug-state-diff__entry" [class]="entryClass(entry.type)">
+            <span class="debug-state-diff__key">{{ prefix(entry.type) }} {{ entry.path }}</span>
+            @if (entry.type === 'changed') {
+              <span class="debug-state-diff__value">{{ entry.before | json }} &rarr; {{ entry.after | json }}</span>
+            } @else if (entry.type === 'added') {
+              <span class="debug-state-diff__value">{{ entry.after | json }}</span>
+            } @else {
+              <span class="debug-state-diff__value">{{ entry.before | json }}</span>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, styles: [":host{--ngaf-chat-debug-bg: #18181b;--ngaf-chat-debug-bg-deep: #09090b;--ngaf-chat-debug-surface: #1f1f23;--ngaf-chat-debug-border: #27272a;--ngaf-chat-debug-border-strong: #3f3f46;--ngaf-chat-debug-text: #fafafa;--ngaf-chat-debug-text-muted: #a1a1aa;--ngaf-chat-debug-text-subtle: #71717a;--ngaf-chat-debug-accent: #4f8df5;--ngaf-chat-debug-success: #4ade80;--ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, .5);--ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, .4);--ngaf-chat-debug-radius-panel: 12px;--ngaf-chat-debug-radius-input: 8px;--ngaf-chat-debug-radius-pill: 999px;--ngaf-chat-debug-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-family:var(--ngaf-chat-debug-font-sans);color:var(--ngaf-chat-debug-text);--ngaf-chat-bg: var(--ngaf-chat-debug-bg);--ngaf-chat-text: var(--ngaf-chat-debug-text);--ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);--ngaf-chat-separator: var(--ngaf-chat-debug-border);--ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);--ngaf-chat-font-size-xs: 12px;--ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);--ngaf-chat-radius-card: 8px;--ngaf-chat-success: var(--ngaf-chat-debug-success);--ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);--ngaf-chat-error-text: #fca5a5;--ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);--ngaf-chat-warning-text: #fcd34d}\n", ".debug-state-diff__empty{font-size:var(--ngaf-chat-font-size-xs);color:var(--ngaf-chat-text-muted);font-style:italic;margin:0}.debug-state-diff__list{display:flex;flex-direction:column;gap:4px}.debug-state-diff__entry{font-size:var(--ngaf-chat-font-size-xs);font-family:var(--ngaf-chat-font-mono);padding:4px 8px;border-radius:4px}.debug-state-diff__entry--added{background:var(--ngaf-chat-surface-alt);color:var(--ngaf-chat-success)}.debug-state-diff__entry--removed{background:var(--ngaf-chat-error-bg);color:var(--ngaf-chat-error-text)}.debug-state-diff__entry--changed{background:var(--ngaf-chat-warning-bg);color:var(--ngaf-chat-warning-text)}.debug-state-diff__key{font-weight:600}.debug-state-diff__value{display:block;padding-left:16px;color:var(--ngaf-chat-text-muted)}\n"] }]
+        }], propDecorators: { before: [{ type: i0.Input, args: [{ isSignal: true, alias: "before", required: false }] }], after: [{ type: i0.Input, args: [{ isSignal: true, alias: "after", required: false }] }] } });
+
+function toDebugCheckpoint(cp, index) {
+    return {
+        node: cp.label ?? `Step ${index + 1}`,
+        checkpointId: cp.id,
+    };
+}
+function extractStateValues(cp) {
+    return cp?.values ?? {};
+}
+
+// SPDX-License-Identifier: MIT
+/**
+ * Pure selection-step function. Exported for unit testing — the component's
+ * keyboard handler delegates to it.
+ */
+function stepSelection(dir, current, count) {
+    if (count === 0)
+        return -1;
+    switch (dir) {
+        case 'down': return Math.min(current + 1, count - 1);
+        case 'up': return Math.max(current - 1, 0);
+        case 'home': return 0;
+        case 'end': return count - 1;
+    }
+}
+class TimelineInspectorComponent {
+    agent = input.required(...(ngDevMode ? [{ debugName: "agent" }] : []));
+    replayRequested = output();
+    forkRequested = output();
+    selectedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    checkpoints = computed(() => this.agent().history().map((cp, i) => toDebugCheckpoint(cp, i)), ...(ngDevMode ? [{ debugName: "checkpoints" }] : []));
+    currentStateAt(i) {
+        return extractStateValues(this.agent().history()[i]);
+    }
+    previousStateAt(i) {
+        if (i <= 0)
+            return {};
+        return extractStateValues(this.agent().history()[i - 1]);
+    }
+    onKey(ev) {
+        const map = {
+            ArrowDown: 'down',
+            ArrowUp: 'up',
+            Home: 'home',
+            End: 'end',
+        };
+        const dir = map[ev.key];
+        if (!dir)
+            return;
+        ev.preventDefault();
+        this.selectedIndex.set(stepSelection(dir, this.selectedIndex(), this.checkpoints().length));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: TimelineInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: TimelineInspectorComponent, isStandalone: true, selector: "chat-debug-timeline-inspector", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { replayRequested: "replayRequested", forkRequested: "forkRequested" }, host: { listeners: { "keydown": "onKey($event)" } }, ngImport: i0, template: `
+    <div class="timeline__header">
+      <span class="timeline__count">
+        <span class="timeline__count-badge">{{ checkpoints().length }}</span>
+        <span>checkpoint{{ checkpoints().length === 1 ? '' : 's' }}</span>
+      </span>
+      <button
+        type="button"
+        class="timeline__clear"
+        [disabled]="selectedIndex() < 0"
+        (click)="selectedIndex.set(-1)"
+      >Clear selection</button>
+    </div>
+    <div
+      class="timeline__list"
+      tabindex="0"
+      role="listbox"
+      aria-label="Checkpoint timeline"
+    >
+      @if (checkpoints().length === 0) {
+        <div class="timeline__empty">No checkpoints yet. Send a message to populate the timeline.</div>
+      }
+      @for (cp of checkpoints(); let i = $index; track cp.checkpointId ?? i) {
+        <div class="timeline__row">
+          <chat-debug-checkpoint-card
+            [checkpoint]="cp"
+            [isSelected]="i === selectedIndex()"
+            (selected)="selectedIndex.set(i)"
+          />
+          @if (i === selectedIndex() && cp.checkpointId) {
+            <div class="timeline__row-actions">
+              <button class="row-action" type="button" (click)="replayRequested.emit(cp.checkpointId!)">Replay</button>
+              <button class="row-action" type="button" (click)="forkRequested.emit(cp.checkpointId!)">Fork</button>
+            </div>
+          }
+          @if (i === selectedIndex()) {
+            <div class="timeline__diff">
+              <chat-debug-state-diff
+                [before]="previousStateAt(i)"
+                [after]="currentStateAt(i)"
+              />
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{--ngaf-chat-debug-bg: #18181b;--ngaf-chat-debug-bg-deep: #09090b;--ngaf-chat-debug-surface: #1f1f23;--ngaf-chat-debug-border: #27272a;--ngaf-chat-debug-border-strong: #3f3f46;--ngaf-chat-debug-text: #fafafa;--ngaf-chat-debug-text-muted: #a1a1aa;--ngaf-chat-debug-text-subtle: #71717a;--ngaf-chat-debug-accent: #4f8df5;--ngaf-chat-debug-success: #4ade80;--ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, .5);--ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, .4);--ngaf-chat-debug-radius-panel: 12px;--ngaf-chat-debug-radius-input: 8px;--ngaf-chat-debug-radius-pill: 999px;--ngaf-chat-debug-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-family:var(--ngaf-chat-debug-font-sans);color:var(--ngaf-chat-debug-text);--ngaf-chat-bg: var(--ngaf-chat-debug-bg);--ngaf-chat-text: var(--ngaf-chat-debug-text);--ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);--ngaf-chat-separator: var(--ngaf-chat-debug-border);--ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);--ngaf-chat-font-size-xs: 12px;--ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);--ngaf-chat-radius-card: 8px;--ngaf-chat-success: var(--ngaf-chat-debug-success);--ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);--ngaf-chat-error-text: #fca5a5;--ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);--ngaf-chat-warning-text: #fcd34d}\n", ":host{display:flex;flex-direction:column;height:100%;outline:none}.timeline__header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--ngaf-chat-debug-border);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ngaf-chat-debug-text-subtle);background:var(--ngaf-chat-debug-bg)}.timeline__count{display:inline-flex;align-items:center;gap:6px}.timeline__count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 6px;border-radius:9px;background:var(--ngaf-chat-debug-surface);border:1px solid var(--ngaf-chat-debug-border);color:var(--ngaf-chat-debug-text);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}.timeline__clear{background:transparent;border:0;cursor:pointer;color:var(--ngaf-chat-debug-text-subtle);font:inherit;font-size:11px;letter-spacing:0;text-transform:none;padding:2px 6px;border-radius:6px;transition:color .12s ease,background .12s ease}.timeline__clear:hover:not(:disabled){color:var(--ngaf-chat-debug-text);background:var(--ngaf-chat-debug-surface)}.timeline__clear:disabled{opacity:.4;cursor:default}.timeline__list{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px;background:var(--ngaf-chat-debug-bg)}.timeline__empty{padding:24px 16px;text-align:center;color:var(--ngaf-chat-debug-text-subtle);font-size:13px}.timeline__row{display:flex;flex-direction:column;gap:8px}.timeline__row-actions{display:none;gap:8px;padding-left:12px}.timeline__row:hover .timeline__row-actions{display:flex}.timeline__row button.row-action{background:var(--ngaf-chat-debug-bg-deep);border:1px solid var(--ngaf-chat-debug-border);border-radius:6px;padding:3px 8px;font:inherit;font-size:11px;color:var(--ngaf-chat-debug-text-muted);cursor:pointer;transition:color .12s ease,border-color .12s ease}.timeline__row button.row-action:hover{color:var(--ngaf-chat-debug-text);border-color:var(--ngaf-chat-debug-border-strong)}.timeline__diff{padding:12px;background:var(--ngaf-chat-debug-bg-deep);border:1px solid var(--ngaf-chat-debug-border);border-radius:var(--ngaf-chat-debug-radius-input);color:var(--ngaf-chat-debug-text)}\n"], dependencies: [{ kind: "component", type: DebugCheckpointCardComponent, selector: "chat-debug-checkpoint-card", inputs: ["checkpoint", "isSelected"], outputs: ["selected"] }, { kind: "component", type: DebugStateDiffComponent, selector: "chat-debug-state-diff", inputs: ["before", "after"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: TimelineInspectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-debug-timeline-inspector', standalone: true, imports: [DebugCheckpointCardComponent, DebugStateDiffComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="timeline__header">
+      <span class="timeline__count">
+        <span class="timeline__count-badge">{{ checkpoints().length }}</span>
+        <span>checkpoint{{ checkpoints().length === 1 ? '' : 's' }}</span>
+      </span>
+      <button
+        type="button"
+        class="timeline__clear"
+        [disabled]="selectedIndex() < 0"
+        (click)="selectedIndex.set(-1)"
+      >Clear selection</button>
+    </div>
+    <div
+      class="timeline__list"
+      tabindex="0"
+      role="listbox"
+      aria-label="Checkpoint timeline"
+    >
+      @if (checkpoints().length === 0) {
+        <div class="timeline__empty">No checkpoints yet. Send a message to populate the timeline.</div>
+      }
+      @for (cp of checkpoints(); let i = $index; track cp.checkpointId ?? i) {
+        <div class="timeline__row">
+          <chat-debug-checkpoint-card
+            [checkpoint]="cp"
+            [isSelected]="i === selectedIndex()"
+            (selected)="selectedIndex.set(i)"
+          />
+          @if (i === selectedIndex() && cp.checkpointId) {
+            <div class="timeline__row-actions">
+              <button class="row-action" type="button" (click)="replayRequested.emit(cp.checkpointId!)">Replay</button>
+              <button class="row-action" type="button" (click)="forkRequested.emit(cp.checkpointId!)">Fork</button>
+            </div>
+          }
+          @if (i === selectedIndex()) {
+            <div class="timeline__diff">
+              <chat-debug-state-diff
+                [before]="previousStateAt(i)"
+                [after]="currentStateAt(i)"
+              />
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [":host{--ngaf-chat-debug-bg: #18181b;--ngaf-chat-debug-bg-deep: #09090b;--ngaf-chat-debug-surface: #1f1f23;--ngaf-chat-debug-border: #27272a;--ngaf-chat-debug-border-strong: #3f3f46;--ngaf-chat-debug-text: #fafafa;--ngaf-chat-debug-text-muted: #a1a1aa;--ngaf-chat-debug-text-subtle: #71717a;--ngaf-chat-debug-accent: #4f8df5;--ngaf-chat-debug-success: #4ade80;--ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, .5);--ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, .4);--ngaf-chat-debug-radius-panel: 12px;--ngaf-chat-debug-radius-input: 8px;--ngaf-chat-debug-radius-pill: 999px;--ngaf-chat-debug-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-family:var(--ngaf-chat-debug-font-sans);color:var(--ngaf-chat-debug-text);--ngaf-chat-bg: var(--ngaf-chat-debug-bg);--ngaf-chat-text: var(--ngaf-chat-debug-text);--ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);--ngaf-chat-separator: var(--ngaf-chat-debug-border);--ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);--ngaf-chat-font-size-xs: 12px;--ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);--ngaf-chat-radius-card: 8px;--ngaf-chat-success: var(--ngaf-chat-debug-success);--ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);--ngaf-chat-error-text: #fca5a5;--ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);--ngaf-chat-warning-text: #fcd34d}\n", ":host{display:flex;flex-direction:column;height:100%;outline:none}.timeline__header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--ngaf-chat-debug-border);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ngaf-chat-debug-text-subtle);background:var(--ngaf-chat-debug-bg)}.timeline__count{display:inline-flex;align-items:center;gap:6px}.timeline__count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 6px;border-radius:9px;background:var(--ngaf-chat-debug-surface);border:1px solid var(--ngaf-chat-debug-border);color:var(--ngaf-chat-debug-text);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}.timeline__clear{background:transparent;border:0;cursor:pointer;color:var(--ngaf-chat-debug-text-subtle);font:inherit;font-size:11px;letter-spacing:0;text-transform:none;padding:2px 6px;border-radius:6px;transition:color .12s ease,background .12s ease}.timeline__clear:hover:not(:disabled){color:var(--ngaf-chat-debug-text);background:var(--ngaf-chat-debug-surface)}.timeline__clear:disabled{opacity:.4;cursor:default}.timeline__list{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px;background:var(--ngaf-chat-debug-bg)}.timeline__empty{padding:24px 16px;text-align:center;color:var(--ngaf-chat-debug-text-subtle);font-size:13px}.timeline__row{display:flex;flex-direction:column;gap:8px}.timeline__row-actions{display:none;gap:8px;padding-left:12px}.timeline__row:hover .timeline__row-actions{display:flex}.timeline__row button.row-action{background:var(--ngaf-chat-debug-bg-deep);border:1px solid var(--ngaf-chat-debug-border);border-radius:6px;padding:3px 8px;font:inherit;font-size:11px;color:var(--ngaf-chat-debug-text-muted);cursor:pointer;transition:color .12s ease,border-color .12s ease}.timeline__row button.row-action:hover{color:var(--ngaf-chat-debug-text);border-color:var(--ngaf-chat-debug-border-strong)}.timeline__diff{padding:12px;background:var(--ngaf-chat-debug-bg-deep);border:1px solid var(--ngaf-chat-debug-border);border-radius:var(--ngaf-chat-debug-radius-input);color:var(--ngaf-chat-debug-text)}\n"] }]
+        }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }], replayRequested: [{ type: i0.Output, args: ["replayRequested"] }], forkRequested: [{ type: i0.Output, args: ["forkRequested"] }], onKey: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+// SPDX-License-Identifier: MIT
+class DebugStateInspectorComponent {
+    state = input({}, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DebugStateInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: DebugStateInspectorComponent, isStandalone: true, selector: "chat-debug-state-inspector", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="debug-state-inspector">
+      <pre class="debug-state-inspector__pre">{{ state() | json }}</pre>
+    </div>
+  `, isInline: true, styles: [":host{--ngaf-chat-debug-bg: #18181b;--ngaf-chat-debug-bg-deep: #09090b;--ngaf-chat-debug-surface: #1f1f23;--ngaf-chat-debug-border: #27272a;--ngaf-chat-debug-border-strong: #3f3f46;--ngaf-chat-debug-text: #fafafa;--ngaf-chat-debug-text-muted: #a1a1aa;--ngaf-chat-debug-text-subtle: #71717a;--ngaf-chat-debug-accent: #4f8df5;--ngaf-chat-debug-success: #4ade80;--ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, .5);--ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, .4);--ngaf-chat-debug-radius-panel: 12px;--ngaf-chat-debug-radius-input: 8px;--ngaf-chat-debug-radius-pill: 999px;--ngaf-chat-debug-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-family:var(--ngaf-chat-debug-font-sans);color:var(--ngaf-chat-debug-text);--ngaf-chat-bg: var(--ngaf-chat-debug-bg);--ngaf-chat-text: var(--ngaf-chat-debug-text);--ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);--ngaf-chat-separator: var(--ngaf-chat-debug-border);--ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);--ngaf-chat-font-size-xs: 12px;--ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);--ngaf-chat-radius-card: 8px;--ngaf-chat-success: var(--ngaf-chat-debug-success);--ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);--ngaf-chat-error-text: #fca5a5;--ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);--ngaf-chat-warning-text: #fcd34d}\n", ".debug-state-inspector{overflow:auto;max-height:256px}.debug-state-inspector__pre{font-size:var(--ngaf-chat-font-size-xs);font-family:var(--ngaf-chat-font-mono);color:var(--ngaf-chat-text);white-space:pre-wrap;word-break:break-all;margin:0}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DebugStateInspectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-debug-state-inspector', standalone: true, imports: [JsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="debug-state-inspector">
+      <pre class="debug-state-inspector__pre">{{ state() | json }}</pre>
+    </div>
+  `, styles: [":host{--ngaf-chat-debug-bg: #18181b;--ngaf-chat-debug-bg-deep: #09090b;--ngaf-chat-debug-surface: #1f1f23;--ngaf-chat-debug-border: #27272a;--ngaf-chat-debug-border-strong: #3f3f46;--ngaf-chat-debug-text: #fafafa;--ngaf-chat-debug-text-muted: #a1a1aa;--ngaf-chat-debug-text-subtle: #71717a;--ngaf-chat-debug-accent: #4f8df5;--ngaf-chat-debug-success: #4ade80;--ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, .5);--ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, .4);--ngaf-chat-debug-radius-panel: 12px;--ngaf-chat-debug-radius-input: 8px;--ngaf-chat-debug-radius-pill: 999px;--ngaf-chat-debug-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-family:var(--ngaf-chat-debug-font-sans);color:var(--ngaf-chat-debug-text);--ngaf-chat-bg: var(--ngaf-chat-debug-bg);--ngaf-chat-text: var(--ngaf-chat-debug-text);--ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);--ngaf-chat-separator: var(--ngaf-chat-debug-border);--ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);--ngaf-chat-font-size-xs: 12px;--ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);--ngaf-chat-radius-card: 8px;--ngaf-chat-success: var(--ngaf-chat-debug-success);--ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);--ngaf-chat-error-text: #fca5a5;--ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);--ngaf-chat-warning-text: #fcd34d}\n", ".debug-state-inspector{overflow:auto;max-height:256px}.debug-state-inspector__pre{font-size:var(--ngaf-chat-font-size-xs);font-family:var(--ngaf-chat-font-mono);color:var(--ngaf-chat-text);white-space:pre-wrap;word-break:break-all;margin:0}\n"] }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
+
+// SPDX-License-Identifier: MIT
+class StateInspectorComponent {
+    agent = input.required(...(ngDevMode ? [{ debugName: "agent" }] : []));
+    state = computed(() => {
+        return this.agent().state();
+    }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    justCopied = signal(false, ...(ngDevMode ? [{ debugName: "justCopied" }] : []));
+    copy() {
+        if (typeof navigator === 'undefined' || !navigator.clipboard)
+            return;
+        void navigator.clipboard.writeText(JSON.stringify(this.state(), null, 2));
+        this.justCopied.set(true);
+        setTimeout(() => this.justCopied.set(false), 1500);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: StateInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: StateInspectorComponent, isStandalone: true, selector: "chat-debug-state-tab", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <div class="state__header">
+      <span>Current state</span>
+      <button type="button" class="state__copy" [class.is-copied]="justCopied()" (click)="copy()">
+        @if (justCopied()) {
+          <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6L5 8.5L9.5 3.5"/></svg>
+          <span>Copied</span>
+        } @else {
+          <svg width="11" height="11" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="8" height="8" rx="1.2"/><path d="M2 9V2.5C2 2.22 2.22 2 2.5 2H9"/></svg>
+          <span>Copy</span>
+        }
+      </button>
+    </div>
+    <div class="state__body">
+      <chat-debug-state-inspector [state]="state()" />
+    </div>
+  `, isInline: true, styles: [":host{--ngaf-chat-debug-bg: #18181b;--ngaf-chat-debug-bg-deep: #09090b;--ngaf-chat-debug-surface: #1f1f23;--ngaf-chat-debug-border: #27272a;--ngaf-chat-debug-border-strong: #3f3f46;--ngaf-chat-debug-text: #fafafa;--ngaf-chat-debug-text-muted: #a1a1aa;--ngaf-chat-debug-text-subtle: #71717a;--ngaf-chat-debug-accent: #4f8df5;--ngaf-chat-debug-success: #4ade80;--ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, .5);--ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, .4);--ngaf-chat-debug-radius-panel: 12px;--ngaf-chat-debug-radius-input: 8px;--ngaf-chat-debug-radius-pill: 999px;--ngaf-chat-debug-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-family:var(--ngaf-chat-debug-font-sans);color:var(--ngaf-chat-debug-text);--ngaf-chat-bg: var(--ngaf-chat-debug-bg);--ngaf-chat-text: var(--ngaf-chat-debug-text);--ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);--ngaf-chat-separator: var(--ngaf-chat-debug-border);--ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);--ngaf-chat-font-size-xs: 12px;--ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);--ngaf-chat-radius-card: 8px;--ngaf-chat-success: var(--ngaf-chat-debug-success);--ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);--ngaf-chat-error-text: #fca5a5;--ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);--ngaf-chat-warning-text: #fcd34d}\n", ":host{display:flex;flex-direction:column;height:100%;background:var(--ngaf-chat-debug-bg)}.state__header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--ngaf-chat-debug-border);background:var(--ngaf-chat-debug-bg);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ngaf-chat-debug-text-subtle)}.state__copy{display:inline-flex;align-items:center;gap:6px;background:var(--ngaf-chat-debug-bg-deep);border:1px solid var(--ngaf-chat-debug-border);border-radius:6px;padding:3px 8px;font:inherit;font-size:11px;letter-spacing:0;text-transform:none;color:var(--ngaf-chat-debug-text-muted);cursor:pointer;transition:color .12s ease,border-color .12s ease}.state__copy:hover{color:var(--ngaf-chat-debug-text);border-color:var(--ngaf-chat-debug-border-strong)}.state__copy.is-copied{color:var(--ngaf-chat-debug-success);border-color:var(--ngaf-chat-debug-success)}.state__copy svg{display:block}.state__body{flex:1;overflow-y:auto;padding:12px 16px;color:var(--ngaf-chat-debug-text)}\n"], dependencies: [{ kind: "component", type: DebugStateInspectorComponent, selector: "chat-debug-state-inspector", inputs: ["state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: StateInspectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-debug-state-tab', standalone: true, imports: [DebugStateInspectorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="state__header">
+      <span>Current state</span>
+      <button type="button" class="state__copy" [class.is-copied]="justCopied()" (click)="copy()">
+        @if (justCopied()) {
+          <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6L5 8.5L9.5 3.5"/></svg>
+          <span>Copied</span>
+        } @else {
+          <svg width="11" height="11" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="8" height="8" rx="1.2"/><path d="M2 9V2.5C2 2.22 2.22 2 2.5 2H9"/></svg>
+          <span>Copy</span>
+        }
+      </button>
+    </div>
+    <div class="state__body">
+      <chat-debug-state-inspector [state]="state()" />
+    </div>
+  `, styles: [":host{--ngaf-chat-debug-bg: #18181b;--ngaf-chat-debug-bg-deep: #09090b;--ngaf-chat-debug-surface: #1f1f23;--ngaf-chat-debug-border: #27272a;--ngaf-chat-debug-border-strong: #3f3f46;--ngaf-chat-debug-text: #fafafa;--ngaf-chat-debug-text-muted: #a1a1aa;--ngaf-chat-debug-text-subtle: #71717a;--ngaf-chat-debug-accent: #4f8df5;--ngaf-chat-debug-success: #4ade80;--ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, .5);--ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, .4);--ngaf-chat-debug-radius-panel: 12px;--ngaf-chat-debug-radius-input: 8px;--ngaf-chat-debug-radius-pill: 999px;--ngaf-chat-debug-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-family:var(--ngaf-chat-debug-font-sans);color:var(--ngaf-chat-debug-text);--ngaf-chat-bg: var(--ngaf-chat-debug-bg);--ngaf-chat-text: var(--ngaf-chat-debug-text);--ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);--ngaf-chat-separator: var(--ngaf-chat-debug-border);--ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);--ngaf-chat-font-size-xs: 12px;--ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);--ngaf-chat-radius-card: 8px;--ngaf-chat-success: var(--ngaf-chat-debug-success);--ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);--ngaf-chat-error-text: #fca5a5;--ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);--ngaf-chat-warning-text: #fcd34d}\n", ":host{display:flex;flex-direction:column;height:100%;background:var(--ngaf-chat-debug-bg)}.state__header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--ngaf-chat-debug-border);background:var(--ngaf-chat-debug-bg);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ngaf-chat-debug-text-subtle)}.state__copy{display:inline-flex;align-items:center;gap:6px;background:var(--ngaf-chat-debug-bg-deep);border:1px solid var(--ngaf-chat-debug-border);border-radius:6px;padding:3px 8px;font:inherit;font-size:11px;letter-spacing:0;text-transform:none;color:var(--ngaf-chat-debug-text-muted);cursor:pointer;transition:color .12s ease,border-color .12s ease}.state__copy:hover{color:var(--ngaf-chat-debug-text);border-color:var(--ngaf-chat-debug-border-strong)}.state__copy.is-copied{color:var(--ngaf-chat-debug-success);border-color:var(--ngaf-chat-debug-success)}.state__copy svg{display:block}.state__body{flex:1;overflow-y:auto;padding:12px 16px;color:var(--ngaf-chat-debug-text)}\n"] }]
+        }], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: true }] }] } });
+
+/**
+ * Tiny typed localStorage wrapper namespaced under `{prefix}:`. SSR-safe:
+ * when `localStorage` is undefined (server build), read returns undefined
+ * and write is a no-op.
+ */
+function createPersistence(prefix) {
+    const fullKey = (k) => `${prefix}:${k}`;
+    return {
+        read(key) {
+            if (typeof localStorage === 'undefined')
+                return undefined;
+            const raw = localStorage.getItem(fullKey(key));
+            if (raw === null)
+                return undefined;
+            try {
+                return JSON.parse(raw);
+            }
+            catch {
+                return undefined;
+            }
+        },
+        write(key, value) {
+            if (typeof localStorage === 'undefined')
+                return;
+            localStorage.setItem(fullKey(key), JSON.stringify(value));
+        },
+    };
+}
+
+// SPDX-License-Identifier: MIT
+function hasHistory(agent) {
+    return typeof agent.history === 'function';
+}
+class ChatDebugComponent {
+    agent = input(null, ...(ngDevMode ? [{ debugName: "agent" }] : []));
+    dock = input('right', ...(ngDevMode ? [{ debugName: "dock" }] : []));
+    defaultOpen = input(false, ...(ngDevMode ? [{ debugName: "defaultOpen" }] : []));
+    launcher = input('floating', ...(ngDevMode ? [{ debugName: "launcher" }] : []));
+    storageKey = input('chat-debug', ...(ngDevMode ? [{ debugName: "storageKey" }] : []));
+    replayRequested = output();
+    forkRequested = output();
+    openChange = output();
+    dockChange = output();
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    dockState = signal('right', ...(ngDevMode ? [{ debugName: "dockState" }] : []));
+    /** Set to `true` the first time the user explicitly clicks a dock button.
+     *  Auto-dock detection becomes a no-op after this flips. Not persisted —
+     *  fresh session = fresh chance for the smart default. */
+    userDockOverride = signal(false, ...(ngDevMode ? [{ debugName: "userDockOverride" }] : []));
+    activeTabId = signal('timeline', ...(ngDevMode ? [{ debugName: "activeTabId" }] : []));
+    historyAgent = computed(() => {
+        const agent = this.agent();
+        return agent && hasHistory(agent) ? agent : null;
+    }, ...(ngDevMode ? [{ debugName: "historyAgent" }] : []));
+    hydrated = signal(false, ...(ngDevMode ? [{ debugName: "hydrated" }] : []));
+    /** Reads `agent.status()` reactively for the launcher dot. */
+    isStreaming = computed(() => {
+        const status = this.agent()?.status?.();
+        return status === 'running';
+    }, ...(ngDevMode ? [{ debugName: "isStreaming" }] : []));
+    tabs = computed(() => {
+        if (!this.agent())
+            return [];
+        return [
+            ...(this.historyAgent()
+                ? [
+                    {
+                        id: 'timeline',
+                        label: 'Timeline',
+                        kind: 'builtin-timeline',
+                    },
+                ]
+                : []),
+            { id: 'state', label: 'State', kind: 'builtin-state' },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    activeTab = computed(() => this.tabs().find((t) => t.id === this.activeTabId()), ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    hostEl = inject(ElementRef);
+    constructor() {
+        // Inject chat lib root CSS custom properties so the theme-attribute
+        // mappings + edge-claim primitive are in the document, even when
+        // chat-debug is mounted without a sibling chat composition.
+        ensureChatDebugRootStyles();
+        effect(() => {
+            const tabs = this.tabs();
+            if (tabs.length === 0)
+                return;
+            if (tabs.some((tab) => tab.id === this.activeTabId()))
+                return;
+            this.activeTabId.set(tabs[0].id);
+        });
+        // Restore once after Angular has assigned bound input values. Doing this
+        // synchronously in the constructor reads input defaults, then immediately
+        // writes those defaults to storage and masks a consumer-provided
+        // defaultOpen=true on first load.
+        afterNextRender(() => {
+            const restore = createPersistence(this.storageKey());
+            const persistedOpen = restore.read('open');
+            if (!this.open()) {
+                this.open.set(persistedOpen ?? this.defaultOpen());
+            }
+            const persistedDock = restore.read('dock');
+            this.dockState.set(persistedDock ?? this.dock());
+            const persistedTab = restore.read('tab');
+            if (persistedTab)
+                this.activeTabId.set(persistedTab);
+            this.hydrated.set(true);
+        });
+        // Write-through effect — reads each writable signal so subsequent
+        // changes trigger a fresh run that writes them all to storage.
+        effect(() => {
+            if (!this.hydrated())
+                return;
+            const p = createPersistence(this.storageKey());
+            p.write('open', this.open());
+            p.write('dock', this.dockState());
+            p.write('tab', this.activeTabId());
+        });
+        // Publish the dock the panel currently occupies. Peer panels
+        // (e.g. chat-sidebar) read --ngaf-chat-occupy-{right,bottom,left}
+        // to avoid overlap.
+        effect(() => {
+            if (typeof document === 'undefined')
+                return;
+            const html = document.documentElement;
+            if (this.open()) {
+                html.dataset['threadplaneChatDebug'] = this.dockState();
+            }
+            else {
+                delete html.dataset['threadplaneChatDebug'];
+            }
+        });
+        // Auto-dock: when the panel transitions from closed → open AND a
+        // sibling <chat-sidebar> exists on the page AND the user hasn't
+        // overridden the dock this session, prefer bottom-dock so the two
+        // panels coexist without stacking on the right edge.
+        effect(() => {
+            const isOpen = this.open();
+            if (!isOpen)
+                return;
+            if (this.userDockOverride())
+                return;
+            if (typeof document === 'undefined')
+                return;
+            if (!document.querySelector('chat-sidebar'))
+                return;
+            this.dockState.set('bottom');
+        });
+    }
+    setOpen(value) {
+        this.open.set(value);
+        this.openChange.emit(value);
+    }
+    setDock(next) {
+        this.userDockOverride.set(true);
+        this.dockState.set(next);
+        this.dockChange.emit(next);
+    }
+    setActiveTab(id) {
+        this.activeTabId.set(id);
+    }
+    onEsc() {
+        if (this.open())
+            this.setOpen(false);
+    }
+    /**
+     * Click-outside dismiss. When the panel is open, any click whose
+     * composed path doesn't include our host element closes the panel.
+     */
+    onDocumentClick(event) {
+        if (!this.open())
+            return;
+        const path = event.composedPath();
+        if (path.includes(this.hostEl.nativeElement))
+            return;
+        this.setOpen(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatDebugComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ChatDebugComponent, isStandalone: true, selector: "chat-debug", inputs: { agent: { classPropertyName: "agent", publicName: "agent", isSignal: true, isRequired: false, transformFunction: null }, dock: { classPropertyName: "dock", publicName: "dock", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, launcher: { classPropertyName: "launcher", publicName: "launcher", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { replayRequested: "replayRequested", forkRequested: "forkRequested", openChange: "openChange", dockChange: "dockChange" }, host: { listeners: { "document:keydown.escape": "onEsc()", "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: `
+    @if (!open() && launcher() === 'floating') {
+    <button
+      type="button"
+      class="launcher"
+      title="Open chat devtools"
+      aria-label="Open chat devtools"
+      [attr.aria-pressed]="false"
+      (click)="setOpen(true)"
+    >
+      <span
+        class="launcher__dot"
+        [class.launcher__dot--streaming]="isStreaming()"
+        aria-hidden="true"
+      ></span>
+    </button>
+    } @else if (open() && agent(); as currentAgent) {
+    <div
+      class="panel"
+      [class.panel--right]="dockState() === 'right'"
+      [class.panel--bottom]="dockState() === 'bottom'"
+      [class.panel--left]="dockState() === 'left'"
+      role="region"
+      aria-label="Chat devtools"
+    >
+      <div class="panel__header">
+        <h3 class="panel__title">Chat Devtools</h3>
+        <div class="panel__actions">
+          <div
+            class="panel__dock-group"
+            role="group"
+            aria-label="Dock position"
+          >
+            <button
+              type="button"
+              class="panel__dock-btn"
+              [class.is-active]="dockState() === 'left'"
+              (click)="setDock('left')"
+              aria-label="Dock left"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="1.5" y="2.5" width="11" height="9" rx="1.2" />
+                <line x1="5.5" y1="2.5" x2="5.5" y2="11.5" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              class="panel__dock-btn"
+              [class.is-active]="dockState() === 'bottom'"
+              (click)="setDock('bottom')"
+              aria-label="Dock bottom"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="1.5" y="2.5" width="11" height="9" rx="1.2" />
+                <line x1="1.5" y1="8.5" x2="12.5" y2="8.5" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              class="panel__dock-btn"
+              [class.is-active]="dockState() === 'right'"
+              (click)="setDock('right')"
+              aria-label="Dock right"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="1.5" y="2.5" width="11" height="9" rx="1.2" />
+                <line x1="8.5" y1="2.5" x2="8.5" y2="11.5" />
+              </svg>
+            </button>
+          </div>
+          <button
+            type="button"
+            class="panel__close"
+            (click)="setOpen(false)"
+            aria-label="Close"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="3" y1="3" x2="11" y2="11" />
+              <line x1="11" y1="3" x2="3" y2="11" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      @if (tabs().length > 1) {
+      <div class="panel__tabs" role="tablist">
+        @for (tab of tabs(); track tab.id) {
+        <button
+          type="button"
+          role="tab"
+          class="panel__tab"
+          [class.is-active]="tab.id === activeTabId()"
+          [attr.aria-selected]="tab.id === activeTabId()"
+          (click)="setActiveTab(tab.id)"
+        >
+          {{ tab.label }}
+        </button>
+        }
+      </div>
+      }
+
+      <div class="panel__body">
+        @switch (activeTab()?.kind) { @case ('builtin-timeline') { @if
+        (historyAgent(); as history) {
+        <chat-debug-timeline-inspector
+          [agent]="history"
+          (replayRequested)="replayRequested.emit($event)"
+          (forkRequested)="forkRequested.emit($event)"
+        />
+        } } @case ('builtin-state') {
+        <chat-debug-state-tab [agent]="currentAgent" />
+        } }
+      </div>
+    </div>
+    }
+  `, isInline: true, styles: [":host{--ngaf-chat-debug-bg: #18181b;--ngaf-chat-debug-bg-deep: #09090b;--ngaf-chat-debug-surface: #1f1f23;--ngaf-chat-debug-border: #27272a;--ngaf-chat-debug-border-strong: #3f3f46;--ngaf-chat-debug-text: #fafafa;--ngaf-chat-debug-text-muted: #a1a1aa;--ngaf-chat-debug-text-subtle: #71717a;--ngaf-chat-debug-accent: #4f8df5;--ngaf-chat-debug-success: #4ade80;--ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, .5);--ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, .4);--ngaf-chat-debug-radius-panel: 12px;--ngaf-chat-debug-radius-input: 8px;--ngaf-chat-debug-radius-pill: 999px;--ngaf-chat-debug-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-family:var(--ngaf-chat-debug-font-sans);color:var(--ngaf-chat-debug-text);--ngaf-chat-bg: var(--ngaf-chat-debug-bg);--ngaf-chat-text: var(--ngaf-chat-debug-text);--ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);--ngaf-chat-separator: var(--ngaf-chat-debug-border);--ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);--ngaf-chat-font-size-xs: 12px;--ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);--ngaf-chat-radius-card: 8px;--ngaf-chat-success: var(--ngaf-chat-debug-success);--ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);--ngaf-chat-error-text: #fca5a5;--ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);--ngaf-chat-warning-text: #fcd34d}\n", ":host{display:contents}.launcher{position:fixed;top:20px;right:20px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--ngaf-chat-debug-radius-pill);background:var(--ngaf-chat-debug-bg);border:1px solid var(--ngaf-chat-debug-border);color:var(--ngaf-chat-debug-text);cursor:pointer;z-index:990;box-shadow:var(--ngaf-chat-debug-shadow-pill);transition:background .12s ease,border-color .12s ease;padding:0}.launcher:hover{background:var(--ngaf-chat-debug-surface);border-color:var(--ngaf-chat-debug-border-strong)}.launcher__dot{width:8px;height:8px;border-radius:50%;background:var(--ngaf-chat-debug-success);box-shadow:0 0 8px color-mix(in srgb,var(--ngaf-chat-debug-success) 60%,transparent)}.launcher__dot--streaming{background:var(--ngaf-chat-debug-accent);box-shadow:0 0 8px color-mix(in srgb,var(--ngaf-chat-debug-accent) 70%,transparent);animation:chat-debug-pill-pulse 1.2s ease-in-out infinite}@keyframes chat-debug-pill-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}.panel{position:fixed;background:var(--ngaf-chat-debug-bg);color:var(--ngaf-chat-debug-text);border:1px solid var(--ngaf-chat-debug-border);z-index:991;display:flex;flex-direction:column;box-shadow:var(--ngaf-chat-debug-shadow-panel);animation:chat-debug-panel-enter .12s ease}.panel--right{top:0;right:var(--ngaf-chat-sidebar-claim-right, 0);bottom:0;width:var(--panel-size, 420px);border-right:0;border-top-left-radius:var(--ngaf-chat-debug-radius-panel);border-bottom-left-radius:var(--ngaf-chat-debug-radius-panel);transform-origin:bottom right;transition:right .2s ease-out}.panel--left{top:0;left:0;bottom:0;width:var(--panel-size, 420px);border-left:0;border-top-right-radius:var(--ngaf-chat-debug-radius-panel);border-bottom-right-radius:var(--ngaf-chat-debug-radius-panel);transform-origin:bottom left}.panel--bottom{left:0;right:var(--ngaf-chat-sidebar-claim-right, 0);bottom:0;height:var(--panel-size, 40vh);border-bottom:0;border-top-left-radius:var(--ngaf-chat-debug-radius-panel);border-top-right-radius:var(--ngaf-chat-debug-radius-panel);transform-origin:bottom right;transition:right .2s ease-out}@media(max-width:767px){.panel--bottom{display:none}}@keyframes chat-debug-panel-enter{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.panel__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--ngaf-chat-debug-border);min-height:44px;box-sizing:border-box}.panel__title{margin:0;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ngaf-chat-debug-text)}.panel__actions{display:flex;align-items:center;gap:4px}.panel__dock-group{display:inline-flex;gap:0;padding:2px;background:var(--ngaf-chat-debug-bg-deep);border:1px solid var(--ngaf-chat-debug-border);border-radius:6px}.panel__dock-btn{appearance:none;background:transparent;border:0;border-radius:4px;width:24px;height:22px;padding:0;color:var(--ngaf-chat-debug-text-subtle);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}.panel__dock-btn:hover{color:var(--ngaf-chat-debug-text)}.panel__dock-btn.is-active{background:var(--ngaf-chat-debug-border);color:var(--ngaf-chat-debug-text)}.panel__dock-btn svg{display:block}.panel__close{appearance:none;background:transparent;border:0;border-radius:6px;width:26px;height:26px;margin-left:4px;color:var(--ngaf-chat-debug-text-subtle);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}.panel__close:hover{background:var(--ngaf-chat-debug-surface);color:var(--ngaf-chat-debug-text)}.panel__controls{border-bottom:1px solid var(--ngaf-chat-debug-border);overflow-y:auto;max-height:50%;background:var(--ngaf-chat-debug-bg)}.panel__controls:empty{display:none}.panel__tabs{display:flex;gap:4px;border-bottom:1px solid var(--ngaf-chat-debug-border);padding:0 12px;background:var(--ngaf-chat-debug-bg)}.panel__tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;padding:10px 8px;font:inherit;font-size:13px;font-weight:500;color:var(--ngaf-chat-debug-text-muted);cursor:pointer;transition:color .12s ease,border-color .12s ease;margin-bottom:-1px}.panel__tab:hover{color:var(--ngaf-chat-debug-text)}.panel__tab.is-active{color:var(--ngaf-chat-debug-text);border-bottom-color:var(--ngaf-chat-debug-accent)}.panel__body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--ngaf-chat-debug-bg)}\n"], dependencies: [{ kind: "component", type: TimelineInspectorComponent, selector: "chat-debug-timeline-inspector", inputs: ["agent"], outputs: ["replayRequested", "forkRequested"] }, { kind: "component", type: StateInspectorComponent, selector: "chat-debug-state-tab", inputs: ["agent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ChatDebugComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chat-debug', standalone: true, imports: [TimelineInspectorComponent, StateInspectorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (!open() && launcher() === 'floating') {
+    <button
+      type="button"
+      class="launcher"
+      title="Open chat devtools"
+      aria-label="Open chat devtools"
+      [attr.aria-pressed]="false"
+      (click)="setOpen(true)"
+    >
+      <span
+        class="launcher__dot"
+        [class.launcher__dot--streaming]="isStreaming()"
+        aria-hidden="true"
+      ></span>
+    </button>
+    } @else if (open() && agent(); as currentAgent) {
+    <div
+      class="panel"
+      [class.panel--right]="dockState() === 'right'"
+      [class.panel--bottom]="dockState() === 'bottom'"
+      [class.panel--left]="dockState() === 'left'"
+      role="region"
+      aria-label="Chat devtools"
+    >
+      <div class="panel__header">
+        <h3 class="panel__title">Chat Devtools</h3>
+        <div class="panel__actions">
+          <div
+            class="panel__dock-group"
+            role="group"
+            aria-label="Dock position"
+          >
+            <button
+              type="button"
+              class="panel__dock-btn"
+              [class.is-active]="dockState() === 'left'"
+              (click)="setDock('left')"
+              aria-label="Dock left"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="1.5" y="2.5" width="11" height="9" rx="1.2" />
+                <line x1="5.5" y1="2.5" x2="5.5" y2="11.5" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              class="panel__dock-btn"
+              [class.is-active]="dockState() === 'bottom'"
+              (click)="setDock('bottom')"
+              aria-label="Dock bottom"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="1.5" y="2.5" width="11" height="9" rx="1.2" />
+                <line x1="1.5" y1="8.5" x2="12.5" y2="8.5" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              class="panel__dock-btn"
+              [class.is-active]="dockState() === 'right'"
+              (click)="setDock('right')"
+              aria-label="Dock right"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="1.5" y="2.5" width="11" height="9" rx="1.2" />
+                <line x1="8.5" y1="2.5" x2="8.5" y2="11.5" />
+              </svg>
+            </button>
+          </div>
+          <button
+            type="button"
+            class="panel__close"
+            (click)="setOpen(false)"
+            aria-label="Close"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="3" y1="3" x2="11" y2="11" />
+              <line x1="11" y1="3" x2="3" y2="11" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      @if (tabs().length > 1) {
+      <div class="panel__tabs" role="tablist">
+        @for (tab of tabs(); track tab.id) {
+        <button
+          type="button"
+          role="tab"
+          class="panel__tab"
+          [class.is-active]="tab.id === activeTabId()"
+          [attr.aria-selected]="tab.id === activeTabId()"
+          (click)="setActiveTab(tab.id)"
+        >
+          {{ tab.label }}
+        </button>
+        }
+      </div>
+      }
+
+      <div class="panel__body">
+        @switch (activeTab()?.kind) { @case ('builtin-timeline') { @if
+        (historyAgent(); as history) {
+        <chat-debug-timeline-inspector
+          [agent]="history"
+          (replayRequested)="replayRequested.emit($event)"
+          (forkRequested)="forkRequested.emit($event)"
+        />
+        } } @case ('builtin-state') {
+        <chat-debug-state-tab [agent]="currentAgent" />
+        } }
+      </div>
+    </div>
+    }
+  `, styles: [":host{--ngaf-chat-debug-bg: #18181b;--ngaf-chat-debug-bg-deep: #09090b;--ngaf-chat-debug-surface: #1f1f23;--ngaf-chat-debug-border: #27272a;--ngaf-chat-debug-border-strong: #3f3f46;--ngaf-chat-debug-text: #fafafa;--ngaf-chat-debug-text-muted: #a1a1aa;--ngaf-chat-debug-text-subtle: #71717a;--ngaf-chat-debug-accent: #4f8df5;--ngaf-chat-debug-success: #4ade80;--ngaf-chat-debug-shadow-panel: 0 8px 32px rgba(0, 0, 0, .5);--ngaf-chat-debug-shadow-pill: 0 6px 18px rgba(0, 0, 0, .4);--ngaf-chat-debug-radius-panel: 12px;--ngaf-chat-debug-radius-input: 8px;--ngaf-chat-debug-radius-pill: 999px;--ngaf-chat-debug-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--ngaf-chat-debug-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-family:var(--ngaf-chat-debug-font-sans);color:var(--ngaf-chat-debug-text);--ngaf-chat-bg: var(--ngaf-chat-debug-bg);--ngaf-chat-text: var(--ngaf-chat-debug-text);--ngaf-chat-text-muted: var(--ngaf-chat-debug-text-muted);--ngaf-chat-separator: var(--ngaf-chat-debug-border);--ngaf-chat-surface-alt: var(--ngaf-chat-debug-bg-deep);--ngaf-chat-font-size-xs: 12px;--ngaf-chat-font-mono: var(--ngaf-chat-debug-font-mono);--ngaf-chat-radius-card: 8px;--ngaf-chat-success: var(--ngaf-chat-debug-success);--ngaf-chat-error-bg: color-mix(in srgb, #ef4444 18%, transparent);--ngaf-chat-error-text: #fca5a5;--ngaf-chat-warning-bg: color-mix(in srgb, #f59e0b 18%, transparent);--ngaf-chat-warning-text: #fcd34d}\n", ":host{display:contents}.launcher{position:fixed;top:20px;right:20px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--ngaf-chat-debug-radius-pill);background:var(--ngaf-chat-debug-bg);border:1px solid var(--ngaf-chat-debug-border);color:var(--ngaf-chat-debug-text);cursor:pointer;z-index:990;box-shadow:var(--ngaf-chat-debug-shadow-pill);transition:background .12s ease,border-color .12s ease;padding:0}.launcher:hover{background:var(--ngaf-chat-debug-surface);border-color:var(--ngaf-chat-debug-border-strong)}.launcher__dot{width:8px;height:8px;border-radius:50%;background:var(--ngaf-chat-debug-success);box-shadow:0 0 8px color-mix(in srgb,var(--ngaf-chat-debug-success) 60%,transparent)}.launcher__dot--streaming{background:var(--ngaf-chat-debug-accent);box-shadow:0 0 8px color-mix(in srgb,var(--ngaf-chat-debug-accent) 70%,transparent);animation:chat-debug-pill-pulse 1.2s ease-in-out infinite}@keyframes chat-debug-pill-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}.panel{position:fixed;background:var(--ngaf-chat-debug-bg);color:var(--ngaf-chat-debug-text);border:1px solid var(--ngaf-chat-debug-border);z-index:991;display:flex;flex-direction:column;box-shadow:var(--ngaf-chat-debug-shadow-panel);animation:chat-debug-panel-enter .12s ease}.panel--right{top:0;right:var(--ngaf-chat-sidebar-claim-right, 0);bottom:0;width:var(--panel-size, 420px);border-right:0;border-top-left-radius:var(--ngaf-chat-debug-radius-panel);border-bottom-left-radius:var(--ngaf-chat-debug-radius-panel);transform-origin:bottom right;transition:right .2s ease-out}.panel--left{top:0;left:0;bottom:0;width:var(--panel-size, 420px);border-left:0;border-top-right-radius:var(--ngaf-chat-debug-radius-panel);border-bottom-right-radius:var(--ngaf-chat-debug-radius-panel);transform-origin:bottom left}.panel--bottom{left:0;right:var(--ngaf-chat-sidebar-claim-right, 0);bottom:0;height:var(--panel-size, 40vh);border-bottom:0;border-top-left-radius:var(--ngaf-chat-debug-radius-panel);border-top-right-radius:var(--ngaf-chat-debug-radius-panel);transform-origin:bottom right;transition:right .2s ease-out}@media(max-width:767px){.panel--bottom{display:none}}@keyframes chat-debug-panel-enter{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.panel__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--ngaf-chat-debug-border);min-height:44px;box-sizing:border-box}.panel__title{margin:0;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ngaf-chat-debug-text)}.panel__actions{display:flex;align-items:center;gap:4px}.panel__dock-group{display:inline-flex;gap:0;padding:2px;background:var(--ngaf-chat-debug-bg-deep);border:1px solid var(--ngaf-chat-debug-border);border-radius:6px}.panel__dock-btn{appearance:none;background:transparent;border:0;border-radius:4px;width:24px;height:22px;padding:0;color:var(--ngaf-chat-debug-text-subtle);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}.panel__dock-btn:hover{color:var(--ngaf-chat-debug-text)}.panel__dock-btn.is-active{background:var(--ngaf-chat-debug-border);color:var(--ngaf-chat-debug-text)}.panel__dock-btn svg{display:block}.panel__close{appearance:none;background:transparent;border:0;border-radius:6px;width:26px;height:26px;margin-left:4px;color:var(--ngaf-chat-debug-text-subtle);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}.panel__close:hover{background:var(--ngaf-chat-debug-surface);color:var(--ngaf-chat-debug-text)}.panel__controls{border-bottom:1px solid var(--ngaf-chat-debug-border);overflow-y:auto;max-height:50%;background:var(--ngaf-chat-debug-bg)}.panel__controls:empty{display:none}.panel__tabs{display:flex;gap:4px;border-bottom:1px solid var(--ngaf-chat-debug-border);padding:0 12px;background:var(--ngaf-chat-debug-bg)}.panel__tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;padding:10px 8px;font:inherit;font-size:13px;font-weight:500;color:var(--ngaf-chat-debug-text-muted);cursor:pointer;transition:color .12s ease,border-color .12s ease;margin-bottom:-1px}.panel__tab:hover{color:var(--ngaf-chat-debug-text)}.panel__tab.is-active{color:var(--ngaf-chat-debug-text);border-bottom-color:var(--ngaf-chat-debug-accent)}.panel__body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--ngaf-chat-debug-bg)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { agent: [{ type: i0.Input, args: [{ isSignal: true, alias: "agent", required: false }] }], dock: [{ type: i0.Input, args: [{ isSignal: true, alias: "dock", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], launcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "launcher", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], replayRequested: [{ type: i0.Output, args: ["replayRequested"] }], forkRequested: [{ type: i0.Output, args: ["forkRequested"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], dockChange: [{ type: i0.Output, args: ["dockChange"] }], onEsc: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+// SPDX-License-Identifier: MIT
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChatDebugComponent };
+//# sourceMappingURL=threadplane-chat-debug.mjs.map