diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index eef1883eb..7272a60c1 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -29,6 +29,12 @@ jobs: - run: npm ci + # Trusted publishing requires npm CLI 11.5.1+. Node 22's bundled npm + # is 10.x which has partial OIDC support but doesn't fully implement + # the trusted-publishing flow against npm registry's OIDC endpoint. + - name: Upgrade npm to support trusted publishing + run: npm install -g npm@latest + - name: Lint, test, build publishable projects run: npx nx run-many -t lint,test,build --projects=$NPM_PUBLISHABLE_PROJECTS --skip-nx-cache diff --git a/apps/website/content/docs/chat/components/chat-input.mdx b/apps/website/content/docs/chat/components/chat-input.mdx index 896d65f57..80f6ff5a4 100644 --- a/apps/website/content/docs/chat/components/chat-input.mdx +++ b/apps/website/content/docs/chat/components/chat-input.mdx @@ -102,14 +102,14 @@ The component renders a `
` containing a ` +
+ + +
+ + + + `, +}) +export class ChatInputComponent { + readonly agent = input(undefined); + readonly submitOnEnter = input(true); + readonly placeholder = input('Type a message...'); + readonly disabled = input(false); + + readonly submitted = output(); + + protected readonly value = signal(''); + private readonly textareaRef = viewChild>('textarea'); + + protected readonly canSubmit = computed(() => { + if (this.disabled()) return false; + const a = this.agent(); + if (a?.isLoading()) return false; + return this.value().trim().length > 0; + }); + + focusTextarea(): void { + this.textareaRef()?.nativeElement.focus(); + } + + onKeydown(event: KeyboardEvent): void { + if (this.submitOnEnter() && event.key === 'Enter' && !event.shiftKey) { + event.preventDefault(); + void this.onSubmit(); + } + } + + async onSubmit(): Promise { + if (!this.canSubmit()) return; + const text = this.value(); + this.value.set(''); + this.submitted.emit(text); + const a = this.agent(); + if (a) await submitMessage(a, text); + } +} +``` + +- [ ] **Step 4: Update existing spec** + +Read `chat-input.component.spec.ts`. Replace any references to old class names / templates / Tailwind. Add a new test asserting: +- `data-* attributes`: textarea has `placeholder="Type a message..."`. +- Send button is disabled when value is empty. +- Pressing Enter (no shift) calls `submit` on bound mock agent. + +(Adapt existing tests; do not delete unless they assert removed behavior.) + +- [ ] **Step 5: Run tests** + +Run: `npx nx test chat -- --run chat-input.component.spec` +Expected: PASS. + +- [ ] **Step 6: Commit** + +```bash +git add libs/chat/src/lib/primitives/chat-input libs/chat/src/lib/styles/chat-input.styles.ts +git commit -m "refactor(chat): rewrite chat-input with new pill design" +``` + +--- + +### Task 10: Restyle `` (3-dot) + +**Files:** +- Modify: `libs/chat/src/lib/primitives/chat-typing-indicator/chat-typing-indicator.component.ts` +- Create: `libs/chat/src/lib/styles/chat-typing-indicator.styles.ts` + +- [ ] **Step 1: Styles** + +```ts +// libs/chat/src/lib/styles/chat-typing-indicator.styles.ts +// SPDX-License-Identifier: MIT +export const CHAT_TYPING_INDICATOR_STYLES = ` + :host { display: block; padding: 0 var(--ngaf-chat-space-6) var(--ngaf-chat-space-3); } + .chat-typing__dots { display: inline-flex; gap: 4px; align-items: center; } + .chat-typing__dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--ngaf-chat-text-muted); + animation: ngaf-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; } +`; +``` + +- [ ] **Step 2: Update component template + spec** + +```ts +// libs/chat/src/lib/primitives/chat-typing-indicator/chat-typing-indicator.component.ts +// SPDX-License-Identifier: MIT +import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core'; +import type { Agent } from '../../agent'; +import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; +import { CHAT_TYPING_INDICATOR_STYLES } from '../../styles/chat-typing-indicator.styles'; + +export function isTyping(agent: Agent): boolean { + if (!agent.isLoading()) return false; + const messages = agent.messages(); + const last = messages[messages.length - 1]; + if (!last) return true; + return last.role !== 'assistant' || (typeof last.content === 'string' && last.content.length === 0); +} + +@Component({ + selector: 'chat-typing-indicator', + standalone: true, + changeDetection: ChangeDetectionStrategy.OnPush, + styles: [CHAT_HOST_TOKENS, CHAT_TYPING_INDICATOR_STYLES], + template: ` + @if (typing()) { +
+ + + +
+ } + `, +}) +export class ChatTypingIndicatorComponent { + readonly agent = input.required(); + readonly typing = computed(() => isTyping(this.agent())); +} +``` + +- [ ] **Step 3: Run existing spec** + +Run: `npx nx test chat -- --run chat-typing-indicator.component.spec` +If it fails on Tailwind class assertions, update spec assertions to check `.chat-typing__dot` count instead. + +- [ ] **Step 4: Commit** + +```bash +git add libs/chat/src/lib/primitives/chat-typing-indicator libs/chat/src/lib/styles/chat-typing-indicator.styles.ts +git commit -m "refactor(chat): restyle chat-typing-indicator as 3-dot animation" +``` + +--- + +### Task 11: Restyle `` + +**Files:** +- Modify: `libs/chat/src/lib/primitives/chat-error/chat-error.component.ts` +- Create: `libs/chat/src/lib/styles/chat-error.styles.ts` + +- [ ] **Step 1: Styles** + +```ts +// libs/chat/src/lib/styles/chat-error.styles.ts +// SPDX-License-Identifier: MIT +export const CHAT_ERROR_STYLES = ` + :host { display: block; } + .chat-error { + display: flex; + align-items: flex-start; + gap: 0.5rem; + background: var(--ngaf-chat-error-bg); + border: 1px solid var(--ngaf-chat-error-border); + color: var(--ngaf-chat-error-text); + border-radius: var(--ngaf-chat-radius-card); + padding: 8px 12px; + font-size: var(--ngaf-chat-font-size-sm); + margin: 0 var(--ngaf-chat-space-6) var(--ngaf-chat-space-2); + } + .chat-error__icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; } + .chat-error__msg { flex: 1; min-width: 0; word-break: break-word; } + .chat-error__dismiss { + background: transparent; + border: 0; + color: inherit; + cursor: pointer; + padding: 0; + width: 16px; + height: 16px; + flex-shrink: 0; + } +`; +``` + +- [ ] **Step 2: Read current component, then rewrite template** + +```ts +// libs/chat/src/lib/primitives/chat-error/chat-error.component.ts +// SPDX-License-Identifier: MIT +import { Component, ChangeDetectionStrategy, input, output, computed } from '@angular/core'; +import type { Agent } from '../../agent'; +import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; +import { CHAT_ERROR_STYLES } from '../../styles/chat-error.styles'; + +export function extractErrorMessage(agent: Agent): string | null { + const err = agent.error?.(); + if (!err) return null; + return err instanceof Error ? err.message : String(err); +} + +@Component({ + selector: 'chat-error', + standalone: true, + changeDetection: ChangeDetectionStrategy.OnPush, + styles: [CHAT_HOST_TOKENS, CHAT_ERROR_STYLES], + template: ` + @if (message(); as msg) { + + } + `, +}) +export class ChatErrorComponent { + readonly agent = input.required(); + readonly dismissible = input(false); + readonly dismissed = output(); + readonly message = computed(() => extractErrorMessage(this.agent())); +} +``` + +- [ ] **Step 3: Update spec** + +Update existing `chat-error.component.spec.ts` to check `.chat-error` class presence instead of any Tailwind classes; the API is unchanged. + +- [ ] **Step 4: Run, PASS**, **Step 5: Commit** + +```bash +git add libs/chat/src/lib/primitives/chat-error libs/chat/src/lib/styles/chat-error.styles.ts +git commit -m "refactor(chat): restyle chat-error" +``` + +--- + +### Task 12: Restyle `` + +**Files:** +- Modify: `libs/chat/src/lib/primitives/chat-interrupt/chat-interrupt.component.ts` +- Create: `libs/chat/src/lib/styles/chat-interrupt.styles.ts` + +Same pattern as chat-error but warning-colored, with content-projection slot for action buttons. + +- [ ] **Step 1: Styles** + +```ts +// libs/chat/src/lib/styles/chat-interrupt.styles.ts +// SPDX-License-Identifier: MIT +export const CHAT_INTERRUPT_STYLES = ` + :host { display: block; } + .chat-interrupt { + background: var(--ngaf-chat-warning-bg); + color: var(--ngaf-chat-warning-text); + border-left: 3px solid var(--ngaf-chat-warning-text); + border-radius: var(--ngaf-chat-radius-card); + padding: 12px 16px; + margin: 0 var(--ngaf-chat-space-6) var(--ngaf-chat-space-2); + font-size: var(--ngaf-chat-font-size-sm); + } + .chat-interrupt__title { font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; } + .chat-interrupt__body { margin: 0 0 8px; opacity: 0.95; } + .chat-interrupt__actions { display: flex; gap: 8px; flex-wrap: wrap; } +`; +``` + +- [ ] **Step 2: Read current chat-interrupt.component.ts** to capture `getInterrupt()` helper and its content-projection contract (`` with `$implicit` interrupt value). + +- [ ] **Step 3: Rewrite component** + +```ts +// libs/chat/src/lib/primitives/chat-interrupt/chat-interrupt.component.ts +// SPDX-License-Identifier: MIT +import { Component, ChangeDetectionStrategy, input, contentChild, TemplateRef, computed } from '@angular/core'; +import { NgTemplateOutlet } from '@angular/common'; +import type { Agent, AgentInterrupt } from '../../agent'; +import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; +import { CHAT_INTERRUPT_STYLES } from '../../styles/chat-interrupt.styles'; + +export function getInterrupt(agent: Agent): AgentInterrupt | null { + return agent.interrupt?.() ?? null; +} + +@Component({ + selector: 'chat-interrupt', + standalone: true, + imports: [NgTemplateOutlet], + changeDetection: ChangeDetectionStrategy.OnPush, + styles: [CHAT_HOST_TOKENS, CHAT_INTERRUPT_STYLES], + template: ` + @if (interrupt(); as i) { +
+
+ + Agent paused +
+ @if (templateRef()) { + + } @else { +

{{ defaultText(i) }}

+ } +
+ } + `, +}) +export class ChatInterruptComponent { + readonly agent = input.required(); + readonly templateRef = contentChild(TemplateRef); + readonly interrupt = computed(() => getInterrupt(this.agent())); + + defaultText(i: AgentInterrupt): string { + const v = (i as { value?: unknown }).value; + return typeof v === 'string' ? v : JSON.stringify(v); + } +} +``` + +- [ ] **Step 4: Update spec, run, PASS, commit** + +```bash +git add libs/chat/src/lib/primitives/chat-interrupt libs/chat/src/lib/styles/chat-interrupt.styles.ts +git commit -m "refactor(chat): restyle chat-interrupt" +``` + +--- + +### Task 13: Restyle `` + +**Files:** +- Modify: `libs/chat/src/lib/primitives/chat-thread-list/chat-thread-list.component.ts` +- Create: `libs/chat/src/lib/styles/chat-thread-list.styles.ts` + +- [ ] **Step 1: Styles** + +```ts +// libs/chat/src/lib/styles/chat-thread-list.styles.ts +// SPDX-License-Identifier: MIT +export const CHAT_THREAD_LIST_STYLES = ` + :host { display: block; padding: var(--ngaf-chat-space-2); } + .chat-thread-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } + .chat-thread-list__item { + height: 36px; + padding: 8px 12px; + border-radius: var(--ngaf-chat-radius-button); + cursor: pointer; + color: var(--ngaf-chat-text); + font-size: var(--ngaf-chat-font-size-sm); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background: transparent; + border: 0; + text-align: left; + width: 100%; + transition: background-color 150ms ease; + } + .chat-thread-list__item:hover { background: color-mix(in srgb, var(--ngaf-chat-text) 5%, transparent); } + .chat-thread-list__item[data-active="true"] { background: var(--ngaf-chat-surface-alt); font-weight: 500; } + .chat-thread-list__new { + width: 100%; + height: 36px; + margin-bottom: var(--ngaf-chat-space-2); + border: 1px dashed var(--ngaf-chat-separator); + border-radius: var(--ngaf-chat-radius-button); + background: transparent; + color: var(--ngaf-chat-primary); + cursor: pointer; + font-size: var(--ngaf-chat-font-size-sm); + transition: background 150ms ease; + } + .chat-thread-list__new:hover { background: var(--ngaf-chat-surface-alt); } +`; +``` + +- [ ] **Step 2: Read current component to capture API (Thread type, threads/activeThreadId inputs, threadSelected output, content-projected template).** + +- [ ] **Step 3: Rewrite template** — keep all inputs/outputs identical; replace inner Tailwind classes with the new `.chat-thread-list*` classes; add `+ New thread` button gated on a new optional `(newThreadRequested)` output that, if subscribed, makes the button render. + +```ts +// libs/chat/src/lib/primitives/chat-thread-list/chat-thread-list.component.ts +// SPDX-License-Identifier: MIT +import { + Component, ChangeDetectionStrategy, input, output, contentChild, TemplateRef, +} from '@angular/core'; +import { NgTemplateOutlet } from '@angular/common'; +import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; +import { CHAT_THREAD_LIST_STYLES } from '../../styles/chat-thread-list.styles'; + +export interface Thread { + id: string; + title?: string; +} + +@Component({ + selector: 'chat-thread-list', + standalone: true, + imports: [NgTemplateOutlet], + changeDetection: ChangeDetectionStrategy.OnPush, + styles: [CHAT_HOST_TOKENS, CHAT_THREAD_LIST_STYLES], + template: ` + @if (showNewThreadButton()) { + + } +
    + @for (t of threads(); track t.id) { +
  • + @if (templateRef()) { + + } @else { + + } +
    • + } +
+ `, +}) +export class ChatThreadListComponent { + readonly threads = input([]); + readonly activeThreadId = input(''); + readonly showNewThreadButton = input(false); + readonly threadSelected = output(); + readonly newThreadRequested = output(); + readonly templateRef = contentChild(TemplateRef); +} +``` + +- [ ] **Step 4: Update spec assertions to check the new `.chat-thread-list__item` selectors and `data-active` attribute, then run + commit.** + +```bash +git add libs/chat/src/lib/primitives/chat-thread-list libs/chat/src/lib/styles/chat-thread-list.styles.ts +git commit -m "refactor(chat): restyle chat-thread-list" +``` + +--- + +### Task 14: Restyle `` wrapper + +**Files:** +- Modify: `libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts` +- Create: `libs/chat/src/lib/styles/chat-generative-ui.styles.ts` + +- [ ] **Step 1: Read current component** — preserve API exactly. The change is purely a visual wrapper: drop Tailwind, add CSS, add token-driven host styles for the rendered registry surface. + +- [ ] **Step 2: Add styles** + +```ts +// libs/chat/src/lib/styles/chat-generative-ui.styles.ts +// SPDX-License-Identifier: MIT +export const CHAT_GENERATIVE_UI_STYLES = ` + :host { + display: block; + color: var(--ngaf-chat-text); + font-size: var(--ngaf-chat-font-size); + line-height: var(--ngaf-chat-line-height); + } + .chat-generative-ui__error { + color: var(--ngaf-chat-error-text); + background: var(--ngaf-chat-error-bg); + border: 1px solid var(--ngaf-chat-error-border); + border-radius: var(--ngaf-chat-radius-card); + padding: 8px 12px; + font-size: var(--ngaf-chat-font-size-sm); + } +`; +``` + +- [ ] **Step 3: Update component to import and apply styles array; replace inner Tailwind classes with the new selectors. Run spec, commit.** + +```bash +git add libs/chat/src/lib/primitives/chat-generative-ui libs/chat/src/lib/styles/chat-generative-ui.styles.ts +git commit -m "refactor(chat): restyle chat-generative-ui wrapper" +``` + +--- + +## Phase 4 — Trace-based card rewrites + +### Task 15: Rewrite `` to use `` + +**Files:** +- Modify: `libs/chat/src/lib/compositions/chat-tool-call-card/chat-tool-call-card.component.ts` + +- [ ] **Step 1: Replace template + styles** + +```ts +// libs/chat/src/lib/compositions/chat-tool-call-card/chat-tool-call-card.component.ts +// SPDX-License-Identifier: MIT +import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core'; +import { ChatTraceComponent, type TraceState } from '../../primitives/chat-trace/chat-trace.component'; +import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; + +export interface ToolCallInfo { + id: string; + name: string; + args: unknown; + result?: unknown; +} + +@Component({ + selector: 'chat-tool-call-card', + standalone: true, + imports: [ChatTraceComponent], + changeDetection: ChangeDetectionStrategy.OnPush, + styles: [CHAT_HOST_TOKENS, ` + :host { display: block; } + .tcc__name { font-family: var(--ngaf-chat-font-mono); color: var(--ngaf-chat-text); } + .tcc__status { font-size: var(--ngaf-chat-font-size-xs); } + .tcc__status[data-state="done"] { color: var(--ngaf-chat-success); } + .tcc__status[data-state="error"] { color: var(--ngaf-chat-error-text); } + .tcc__section { padding: 8px 0; } + .tcc__section + .tcc__section { border-top: 1px solid var(--ngaf-chat-separator); } + .tcc__section-label { + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--ngaf-chat-text-muted); + margin: 0 0 4px; + } + .tcc__section-body { + font-family: var(--ngaf-chat-font-mono); + font-size: var(--ngaf-chat-font-size-xs); + color: var(--ngaf-chat-text); + white-space: pre-wrap; + overflow-x: auto; + margin: 0; + } + `], + template: ` + + + {{ toolCall().name }} + @if (state() === 'done') { + done + } @else if (state() === 'error') { + error + } @else if (state() === 'running') { + running… + } + +
+

Inputs

+ 
{{ formatJson(toolCall().args) }}
+
+ @if (toolCall().result !== undefined) { +
+

Output

+ 
{{ formatJson(toolCall().result) }}
+
+ } + + `, +}) +export class ChatToolCallCardComponent { + readonly toolCall = input.required(); + + readonly state = computed(() => { + const tc = this.toolCall(); + if (tc.result !== undefined) return 'done'; + return 'running'; + }); + + formatJson(value: unknown): string { + if (typeof value === 'string') return value; + try { return JSON.stringify(value, null, 2); } catch { return String(value); } + } +} +``` + +- [ ] **Step 2: Update existing spec** to assert `.tcc__name` text and `chat-trace` host present; remove Tailwind class assertions. + +- [ ] **Step 3: Run, commit** + +```bash +git add libs/chat/src/lib/compositions/chat-tool-call-card +git commit -m "refactor(chat): rewrite chat-tool-call-card on chat-trace" +``` + +--- + +### Task 16: Rewrite `` to use `` + +**Files:** +- Modify: `libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.ts` + +- [ ] **Step 1: Rewrite component (parallel to tool-call-card)** + +```ts +// libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.ts +// SPDX-License-Identifier: MIT +import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core'; +import { ChatTraceComponent, type TraceState } from '../../primitives/chat-trace/chat-trace.component'; +import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; +import type { Subagent, SubagentStatus } from '../../agent/subagent'; + +function statusToTraceState(s: SubagentStatus): TraceState { + switch (s) { + case 'pending': return 'pending'; + case 'running': return 'running'; + case 'complete': return 'done'; + case 'error': return 'error'; + } +} + +@Component({ + selector: 'chat-subagent-card', + standalone: true, + imports: [ChatTraceComponent], + changeDetection: ChangeDetectionStrategy.OnPush, + styles: [CHAT_HOST_TOKENS, ` + :host { display: block; } + .sac__name { color: var(--ngaf-chat-text); font-weight: 500; font-size: var(--ngaf-chat-font-size-sm); } + .sac__id { font-family: var(--ngaf-chat-font-mono); font-size: var(--ngaf-chat-font-size-xs); color: var(--ngaf-chat-text-muted); margin-left: 4px; } + .sac__pill { + padding: 1px 8px; + border-radius: 9999px; + font-size: 11px; + font-weight: 500; + margin-left: 4px; + } + .sac__pill[data-status="pending"] { background: var(--ngaf-chat-surface-alt); color: var(--ngaf-chat-text-muted); } + .sac__pill[data-status="running"] { background: var(--ngaf-chat-warning-bg); color: var(--ngaf-chat-warning-text); } + .sac__pill[data-status="complete"] { color: var(--ngaf-chat-success); } + .sac__pill[data-status="error"] { background: var(--ngaf-chat-error-bg); color: var(--ngaf-chat-error-text); } + .sac__count { font-size: var(--ngaf-chat-font-size-xs); color: var(--ngaf-chat-text-muted); } + .sac__latest-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ngaf-chat-text-muted); margin: 8px 0 4px; } + .sac__latest { + font-family: var(--ngaf-chat-font-mono); + font-size: var(--ngaf-chat-font-size-xs); + color: var(--ngaf-chat-text); + white-space: pre-wrap; + overflow-x: auto; + margin: 0; + } + `], + template: ` + + + Subagent + {{ subagent().toolCallId }} + {{ subagent().status() }} + +
{{ subagent().messages().length }} message(s)
+ @if (subagent().messages().length > 0) { +

Latest message

+ 
{{ latestMessageContent() }}
+ } + + `, +}) +export class ChatSubagentCardComponent { + readonly subagent = input.required(); + readonly state = computed(() => statusToTraceState(this.subagent().status())); + + readonly latestMessageContent = computed(() => { + const messages = this.subagent().messages(); + if (messages.length === 0) return ''; + const last = messages[messages.length - 1]; + const c = last.content; + return typeof c === 'string' ? c : JSON.stringify(c); + }); +} +``` + +- [ ] **Step 2: Update spec, run, commit** + +```bash +git add libs/chat/src/lib/compositions/chat-subagent-card +git commit -m "refactor(chat): rewrite chat-subagent-card on chat-trace" +``` + +--- + +### Task 17: Rewrite `` as vertical history walk + +**Files:** +- Modify: `libs/chat/src/lib/compositions/chat-timeline-slider/chat-timeline-slider.component.ts` + +- [ ] **Step 1: Read current component** to capture inputs/outputs (`agent`, `checkpointSelected`). + +- [ ] **Step 2: Rewrite as vertical list** + +```ts +// libs/chat/src/lib/compositions/chat-timeline-slider/chat-timeline-slider.component.ts +// SPDX-License-Identifier: MIT +import { + Component, ChangeDetectionStrategy, input, output, computed, signal, +} from '@angular/core'; +import type { AgentWithHistory, AgentCheckpoint } from '../../agent'; +import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; + +@Component({ + selector: 'chat-timeline-slider', + standalone: true, + changeDetection: ChangeDetectionStrategy.OnPush, + styles: [CHAT_HOST_TOKENS, ` + :host { display: block; padding: var(--ngaf-chat-space-2); } + .timeline { list-style: none; padding-left: 12px; margin: 0; border-left: 1px solid var(--ngaf-chat-separator); } + .timeline__entry { + display: block; + width: 100%; + text-align: left; + padding: 4px 8px; + margin: 0 0 0 -1px; + background: transparent; + border: 0; + border-left: 2px solid transparent; + cursor: pointer; + color: var(--ngaf-chat-text-muted); + font-size: var(--ngaf-chat-font-size-sm); + transition: background 150ms ease; + } + .timeline__entry:hover { background: color-mix(in srgb, var(--ngaf-chat-text) 5%, transparent); } + .timeline__entry[data-active="true"] { + border-left-color: var(--ngaf-chat-primary); + color: var(--ngaf-chat-text); + font-weight: 500; + } + .timeline__index { font-family: var(--ngaf-chat-font-mono); font-size: var(--ngaf-chat-font-size-xs); color: var(--ngaf-chat-text-muted); margin-right: 6px; } + .timeline__footer { display: flex; gap: 8px; margin-top: 8px; } + .timeline__btn { + background: transparent; + border: 0; + color: var(--ngaf-chat-primary); + cursor: pointer; + font-size: var(--ngaf-chat-font-size-sm); + padding: 4px 6px; + } + .timeline__btn:hover { text-decoration: underline; } + `], + template: ` +
    + @for (cp of history(); track $index) { +
  • + +
    • + } +
+ @if (history().length > 0) { +
+ +
+ } + `, +}) +export class ChatTimelineSliderComponent { + readonly agent = input.required(); + readonly checkpointSelected = output(); + + readonly history = computed(() => this.agent().history()); + readonly activeIndex = signal(null); + + select(cp: AgentCheckpoint, index: number): void { + this.activeIndex.set(index); + this.checkpointSelected.emit(cp); + } + + jumpToLatest(): void { + const list = this.history(); + if (list.length === 0) return; + this.select(list[list.length - 1], list.length - 1); + } + + summarize(cp: AgentCheckpoint): string { + const id = (cp as { id?: string }).id ?? ''; + return id.length > 28 ? id.slice(0, 28) + '…' : id; + } +} +``` + +- [ ] **Step 3: Delete any horizontal-slider-specific spec assertions; rewrite spec to test vertical list rendering, active-state attribute, footer button.** + +- [ ] **Step 4: Run, commit** + +```bash +git add libs/chat/src/lib/compositions/chat-timeline-slider +git commit -m "refactor(chat): rewrite chat-timeline-slider as vertical history walk" +``` + +--- + +### Task 18: Update `` and `` default templates + +**Files:** +- Modify: `libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts` +- Modify: `libs/chat/src/lib/primitives/chat-subagents/chat-subagents.component.ts` + +- [ ] **Step 1: For each, change template** so that when no `templateRef` is content-projected, render the new card composition by default. Currently they only render when a template is projected; change to fall back to the card. + +For chat-tool-calls: + +```ts +// libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts +// SPDX-License-Identifier: MIT +import { Component, ChangeDetectionStrategy, computed, contentChild, input, TemplateRef } from '@angular/core'; +import { NgTemplateOutlet } from '@angular/common'; +import type { Agent, Message, ToolCall } from '../../agent'; +import { ChatToolCallCardComponent } from '../../compositions/chat-tool-call-card/chat-tool-call-card.component'; + +@Component({ + selector: 'chat-tool-calls', + standalone: true, + imports: [NgTemplateOutlet, ChatToolCallCardComponent], + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` + @for (toolCall of toolCalls(); track toolCall.id) { + @if (templateRef()) { + + } @else { + + } + } + `, +}) +export class ChatToolCallsComponent { + readonly agent = input.required(); + readonly message = input(undefined); + readonly templateRef = contentChild(TemplateRef); + + readonly toolCalls = computed((): ToolCall[] => { + const msg = this.message(); + if (msg && msg.role === 'assistant' && Array.isArray(msg.content)) { + const blocks = msg.content.filter((b) => b.type === 'tool_use'); + const all = this.agent().toolCalls(); + return blocks.map(b => all.find(tc => tc.id === b.id)).filter((x): x is ToolCall => !!x); + } + return this.agent().toolCalls(); + }); +} +``` + +(Note: `ToolCall` from agent contract may or may not match `ToolCallInfo` shape exactly. If shapes differ, add a small mapper at the call site or extend `ToolCallInfo` to accept agent's shape. Verify by reading `libs/chat/src/lib/agent/index.ts`.) + +For chat-subagents: + +```ts +// libs/chat/src/lib/primitives/chat-subagents/chat-subagents.component.ts +// SPDX-License-Identifier: MIT +import { Component, ChangeDetectionStrategy, computed, contentChild, input, TemplateRef } from '@angular/core'; +import { NgTemplateOutlet } from '@angular/common'; +import type { Agent } from '../../agent'; +import type { Subagent } from '../../agent/subagent'; +import { ChatSubagentCardComponent } from '../../compositions/chat-subagent-card/chat-subagent-card.component'; + +export function activeSubagentsFromAgent(agent: Agent): Subagent[] { + const map = agent.subagents?.(); + if (!map) return []; + const out: Subagent[] = []; + map.forEach((sa) => { + const s = sa.status(); + if (s !== 'complete' && s !== 'error') out.push(sa); + }); + return out; +} + +@Component({ + selector: 'chat-subagents', + standalone: true, + imports: [NgTemplateOutlet, ChatSubagentCardComponent], + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` + @for (subagent of activeSubagents(); track subagent.toolCallId) { + @if (templateRef()) { + + } @else { + + } + } + `, +}) +export class ChatSubagentsComponent { + readonly agent = input.required(); + readonly templateRef = contentChild(TemplateRef); + readonly activeSubagents = computed(() => activeSubagentsFromAgent(this.agent())); +} +``` + +- [ ] **Step 2: Run existing specs**, update to handle new default rendering path. + +- [ ] **Step 3: Commit** + +```bash +git add libs/chat/src/lib/primitives/chat-tool-calls libs/chat/src/lib/primitives/chat-subagents +git commit -m "refactor(chat): default-render trace-based cards for tool-calls/subagents" +``` + +--- + +## Phase 5 — Top-level compositions + +### Task 19: Rewrite `` (embedded mode) + +**Files:** +- Modify: `libs/chat/src/lib/compositions/chat/chat.component.ts` + +- [ ] **Step 1: Read current chat.component.ts** in full to map current props/outputs/contracts. Preserve the public API: inputs `agent`, `views`, `store`, `handlers`, `threads`, `activeThreadId`, output `threadSelected`, output `renderEvent`. Remove the old internal Tailwind structure. + +- [ ] **Step 2: Rewrite component** + +```ts +// libs/chat/src/lib/compositions/chat/chat.component.ts +// SPDX-License-Identifier: MIT +import { + Component, ChangeDetectionStrategy, input, output, computed, effect, viewChild, ElementRef, + DestroyRef, inject, signal, +} from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { KeyValuePipe } from '@angular/common'; +import type { Agent } from '../../agent'; +import type { ViewRegistry, RenderEvent } from '@ngaf/render'; +import type { A2uiActionMessage } from '@ngaf/a2ui'; +import type { StateStore } from '@json-render/core'; +import { toRenderRegistry, signalStateStore } from '@ngaf/render'; +import { ChatWindowComponent } from '../../primitives/chat-window/chat-window.component'; +import { ChatMessageListComponent } from '../../primitives/chat-message-list/chat-message-list.component'; +import { MessageTemplateDirective } from '../../primitives/chat-message-list/message-template.directive'; +import { ChatMessageComponent } from '../../primitives/chat-message/chat-message.component'; +import { ChatInputComponent } from '../../primitives/chat-input/chat-input.component'; +import { ChatTypingIndicatorComponent } from '../../primitives/chat-typing-indicator/chat-typing-indicator.component'; +import { ChatErrorComponent } from '../../primitives/chat-error/chat-error.component'; +import { ChatInterruptComponent } from '../../primitives/chat-interrupt/chat-interrupt.component'; +import { ChatThreadListComponent, type Thread } from '../../primitives/chat-thread-list/chat-thread-list.component'; +import { ChatGenerativeUiComponent } from '../../primitives/chat-generative-ui/chat-generative-ui.component'; +import { ChatSuggestionsComponent } from '../../primitives/chat-suggestions/chat-suggestions.component'; +import { ChatStreamingMdComponent } from '../../streaming/streaming-markdown.component'; +import { ChatToolCallsComponent } from '../../primitives/chat-tool-calls/chat-tool-calls.component'; +import { ChatSubagentsComponent } from '../../primitives/chat-subagents/chat-subagents.component'; +import { A2uiSurfaceComponent } from '../../a2ui/surface.component'; +import { createContentClassifier, type ContentClassifier } from '../../streaming/content-classifier'; +import { messageContent } from '../shared/message-utils'; +import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; +import type { ChatRenderEvent } from './chat-render-event'; + +@Component({ + selector: 'chat', + standalone: true, + imports: [ + KeyValuePipe, + ChatWindowComponent, ChatMessageListComponent, MessageTemplateDirective, ChatMessageComponent, + ChatInputComponent, ChatTypingIndicatorComponent, ChatErrorComponent, ChatInterruptComponent, + ChatThreadListComponent, ChatGenerativeUiComponent, ChatSuggestionsComponent, + ChatStreamingMdComponent, ChatToolCallsComponent, ChatSubagentsComponent, A2uiSurfaceComponent, + ], + changeDetection: ChangeDetectionStrategy.OnPush, + styles: [CHAT_HOST_TOKENS, ` + :host { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ngaf-chat-bg); } + .chat-shell { display: flex; flex: 1; min-height: 0; } + .chat-shell__sidebar { + width: 240px; + flex-shrink: 0; + border-right: 1px solid var(--ngaf-chat-separator); + background: var(--ngaf-chat-surface-alt); + overflow-y: auto; + display: none; + } + @media (min-width: 768px) { .chat-shell__sidebar { display: block; } } + .chat-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; } + .chat-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 12px; + padding: 60px 20px; + color: var(--ngaf-chat-text-muted); + text-align: center; + } + .chat-empty__title { font-size: 1.125rem; font-weight: 500; color: var(--ngaf-chat-text); margin: 0; } + .chat-empty__sub { margin: 0; font-size: var(--ngaf-chat-font-size-sm); } + .chat-scroll { flex: 1; min-height: 0; overflow-y: auto; } + .chat-scroll::-webkit-scrollbar { width: 6px; } + .chat-scroll::-webkit-scrollbar-thumb { background: var(--ngaf-chat-separator); border-radius: 10px; } + `], + template: ` +
+ @if (threads().length > 0) { + + } +
+ + +
+ @if (agent().messages().length === 0 && !agent().isLoading()) { +
+ + +

How can I help?

+

Ask anything to get started.

+ +
+ } + + + + {{ messageContent(message) }} + + + + @let content = messageContent(message); + @let classified = classifyMessage(content, i); + + + + @if (classified.markdown(); as md) { + + } + @if (classified.spec(); as spec) { + + } + @if (classified.type() === 'a2ui' && views(); as catalog) { + @for (entry of classified.a2uiSurfaces() | keyvalue; track entry.key) { + + } + } + + + + + + + + + {{ messageContent(message) }} + + + + +
+
+ + + +
+ +
+
+ `, +}) +export class ChatComponent { + readonly agent = input.required(); + readonly views = input(undefined); + readonly store = input(undefined); + readonly handlers = input) => unknown | Promise>>({}); + readonly threads = input([]); + readonly activeThreadId = input(''); + readonly threadSelected = output(); + readonly renderEvent = output(); + + private readonly _internalStore = signalStateStore({}); + readonly resolvedStore = computed(() => { + const explicit = this.store(); + if (explicit) return explicit; + if (this.views()) return this._internalStore; + return undefined; + }); + + readonly renderRegistry = computed(() => { + const v = this.views(); + return v ? toRenderRegistry(v) : undefined; + }); + + readonly messageContent = messageContent; + private readonly classifiers = new Map(); + private readonly destroyRef = inject(DestroyRef); + private eventsSubscribed = false; + + private readonly scrollContainer = viewChild>('scrollContainer'); + private readonly messageCount = computed(() => this.agent().messages().length); + private prevMessageCount = 0; + + constructor() { + effect(() => { + if (this.eventsSubscribed) return; + let agent: ReturnType; + try { agent = this.agent(); } catch { return; } + this.eventsSubscribed = true; + agent.events$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => { + if (event.type !== 'state_update') return; + const store = this.resolvedStore(); + if (!store) return; + store.update(event.data); + }); + }); + + effect(() => { + let count: number; + let msgs: ReturnType['messages']>; + try { count = this.messageCount(); msgs = this.agent().messages(); } catch { return; } + const lastContent = msgs.length > 0 ? (msgs[msgs.length - 1] as unknown as Record)['content'] : undefined; + void lastContent; + const el = this.scrollContainer()?.nativeElement; + if (!el) return; + const isNewMessage = count !== this.prevMessageCount; + this.prevMessageCount = count; + const isNearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 150; + if (isNewMessage || isNearBottom) { + requestAnimationFrame(() => { + el.scrollTo({ top: el.scrollHeight, behavior: isNewMessage ? 'instant' : 'smooth' }); + }); + } + }); + } + + prevRole(index: number): 'user' | 'assistant' | 'system' | 'tool' | undefined { + if (index === 0) return undefined; + const prev = this.agent().messages()[index - 1]; + if (!prev) return undefined; + const role = (prev as unknown as { role?: string }).role; + return role === 'human' ? 'user' : role === 'ai' ? 'assistant' : (role as 'user' | 'assistant' | 'system' | 'tool'); + } + + classifyMessage(content: string, index: number): ContentClassifier { + let c = this.classifiers.get(index); + if (!c) { c = createContentClassifier(); this.classifiers.set(index, c); } + c.update(content); + return c; + } + + onSpecEvent(event: RenderEvent, messageIndex: number): void { + this.renderEvent.emit({ messageIndex, event }); + } + + onA2uiAction(message: A2uiActionMessage): void { + void this.agent().submit({ message: JSON.stringify(message) }); + } + + onA2uiEvent(event: RenderEvent, messageIndex: number, surfaceId: string): void { + this.renderEvent.emit({ messageIndex, surfaceId, event }); + } +} +``` + +- [ ] **Step 3: Update existing chat.component.spec.ts** to: + - Drop assertions about avatar div presence + - Drop assertions about Tailwind classes on inner elements + - Add assertion that user messages render inside `chat-message[data-role="user"]` and assistant messages inside `chat-message[data-role="assistant"]` + - Keep behavior tests (auto-scroll on new message, handlers wiring, generative-ui projection) + +- [ ] **Step 4: Run, commit** + +```bash +git add libs/chat/src/lib/compositions/chat +git commit -m "refactor(chat): rewrite composition for new visual design" +``` + +--- + +### Task 20: Build `` composition + +**Files:** +- Create: `libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts` +- Create: `libs/chat/src/lib/compositions/chat-popup/chat-popup.component.spec.ts` + +- [ ] **Step 1: Failing test** + +```ts +// libs/chat/src/lib/compositions/chat-popup/chat-popup.component.spec.ts +// SPDX-License-Identifier: MIT +import { describe, it, expect } from 'vitest'; +import { TestBed } from '@angular/core/testing'; +import { Component, signal } from '@angular/core'; +import { ChatPopupComponent } from './chat-popup.component'; +import { mockAgent } from '../../testing/mock-agent'; + +@Component({ + standalone: true, + imports: [ChatPopupComponent], + template: ``, +}) +class Host { + agent = mockAgent(); + isOpen = signal(false); +} + +describe('ChatPopupComponent', () => { + it('renders launcher button when closed and toggles open via click', () => { + const fx = TestBed.createComponent(Host); + fx.detectChanges(); + const launcher = fx.nativeElement.querySelector('chat-launcher-button button'); + expect(launcher).toBeTruthy(); + expect(fx.nativeElement.querySelector('.chat-popup__window[data-open="true"]')).toBeNull(); + launcher.click(); + fx.detectChanges(); + expect(fx.componentInstance.isOpen()).toBe(true); + expect(fx.nativeElement.querySelector('.chat-popup__window[data-open="true"]')).toBeTruthy(); + }); +}); +``` + +- [ ] **Step 2: Run, FAIL.** + +- [ ] **Step 3: Implement** + +```ts +// libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts +// SPDX-License-Identifier: MIT +import { Component, ChangeDetectionStrategy, input, output, model } from '@angular/core'; +import type { Agent } from '../../agent'; +import { ChatComponent } from '../chat/chat.component'; +import { ChatLauncherButtonComponent } from '../../primitives/chat-launcher-button/chat-launcher-button.component'; +import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; + +@Component({ + selector: 'chat-popup', + standalone: true, + imports: [ChatComponent, ChatLauncherButtonComponent], + changeDetection: ChangeDetectionStrategy.OnPush, + styles: [CHAT_HOST_TOKENS, ` + :host { position: fixed; bottom: 1rem; right: 1rem; z-index: 30; } + .chat-popup__launcher { position: relative; } + .chat-popup__window { + position: fixed; + bottom: 5rem; + right: 1rem; + width: 24rem; + height: 600px; + max-height: calc(100vh - 6rem); + background: var(--ngaf-chat-bg); + border-radius: 0.75rem; + box-shadow: 0 5px 40px rgba(0,0,0,.16); + transform-origin: bottom right; + transform: scale(0.95) translateY(20px); + opacity: 0; + pointer-events: none; + transition: transform 200ms ease-out, opacity 100ms ease-out; + overflow: hidden; + display: flex; + flex-direction: column; + } + .chat-popup__window[data-open="true"] { + transform: scale(1) translateY(0); + opacity: 1; + pointer-events: auto; + } + @media (max-width: 640px) { + .chat-popup__window { inset: 0; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; bottom: auto; right: auto; } + } + .chat-popup__close { + position: absolute; top: 8px; right: 8px; + width: 32px; height: 32px; + background: transparent; border: 0; cursor: pointer; + color: var(--ngaf-chat-text-muted); + border-radius: 50%; + } + .chat-popup__close:hover { background: var(--ngaf-chat-surface-alt); color: var(--ngaf-chat-text); } + `], + template: ` +
+ +
+ + `, +}) +export class ChatPopupComponent { + readonly agent = input.required(); + readonly open = model(false); + + toggle(): void { this.open.update((v) => !v); } + openWindow(): void { this.open.set(true); } + closeWindow(): void { this.open.set(false); } +} +``` + +- [ ] **Step 4: Run, PASS.** + +- [ ] **Step 5: Commit** + +```bash +git add libs/chat/src/lib/compositions/chat-popup +git commit -m "feat(chat): add chat-popup floating composition" +``` + +--- + +### Task 21: Build `` composition + +**Files:** +- Create: `libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts` +- Create: `libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.spec.ts` + +- [ ] **Step 1: Failing test** + +```ts +// libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.spec.ts +// SPDX-License-Identifier: MIT +import { describe, it, expect } from 'vitest'; +import { TestBed } from '@angular/core/testing'; +import { Component, signal } from '@angular/core'; +import { ChatSidebarComponent } from './chat-sidebar.component'; +import { mockAgent } from '../../testing/mock-agent'; + +@Component({ + standalone: true, + imports: [ChatSidebarComponent], + template: `
app
`, +}) +class Host { agent = mockAgent(); isOpen = signal(false); } + +describe('ChatSidebarComponent', () => { + it('renders projected content and toggles open attribute', () => { + const fx = TestBed.createComponent(Host); + fx.detectChanges(); + expect(fx.nativeElement.querySelector('#content')).toBeTruthy(); + const panel = fx.nativeElement.querySelector('.chat-sidebar__panel'); + expect(panel.getAttribute('data-open')).toBe('false'); + fx.componentInstance.isOpen.set(true); + fx.detectChanges(); + expect(panel.getAttribute('data-open')).toBe('true'); + }); +}); +``` + +- [ ] **Step 2: Run, FAIL.** + +- [ ] **Step 3: Implement** + +```ts +// libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts +// SPDX-License-Identifier: MIT +import { Component, ChangeDetectionStrategy, input, model } from '@angular/core'; +import type { Agent } from '../../agent'; +import { ChatComponent } from '../chat/chat.component'; +import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; + +@Component({ + selector: 'chat-sidebar', + standalone: true, + imports: [ChatComponent], + changeDetection: ChangeDetectionStrategy.OnPush, + styles: [CHAT_HOST_TOKENS, ` + :host { display: block; } + .chat-sidebar__content { transition: margin-right 300ms ease; min-height: 100vh; } + :host([data-push="true"][data-open="true"]) .chat-sidebar__content { margin-right: 28rem; } + @media (max-width: 640px) { + :host([data-push="true"][data-open="true"]) .chat-sidebar__content { margin-right: 0; } + } + .chat-sidebar__panel { + position: fixed; + top: 0; right: 0; bottom: 0; + width: 28rem; + background: var(--ngaf-chat-bg); + box-shadow: -8px 0 32px rgba(0,0,0,.12); + transform: translateX(100%); + transition: transform 200ms ease-out; + z-index: 30; + display: flex; + flex-direction: column; + } + .chat-sidebar__panel[data-open="true"] { transform: translateX(0); } + @media (max-width: 640px) { + .chat-sidebar__panel { width: 100vw; } + } + .chat-sidebar__close { + position: absolute; top: 8px; right: 8px; + width: 32px; height: 32px; + background: transparent; border: 0; cursor: pointer; + color: var(--ngaf-chat-text-muted); + border-radius: 50%; z-index: 1; + } + .chat-sidebar__close:hover { background: var(--ngaf-chat-surface-alt); color: var(--ngaf-chat-text); } + `], + host: { + '[attr.data-push]': 'pushContent() ? "true" : "false"', + '[attr.data-open]': 'open() ? "true" : "false"', + }, + template: ` +
+ + `, +}) +export class ChatSidebarComponent { + readonly agent = input.required(); + readonly open = model(false); + readonly pushContent = input(false); + + toggle(): void { this.open.update((v) => !v); } + openWindow(): void { this.open.set(true); } + closeWindow(): void { this.open.set(false); } +} +``` + +- [ ] **Step 4: Run, PASS.** + +- [ ] **Step 5: Commit** + +```bash +git add libs/chat/src/lib/compositions/chat-sidebar +git commit -m "feat(chat): add chat-sidebar slide-in composition" +``` + +--- + +## Phase 6 — Restyle remaining compositions + +### Task 22: Rewrite `` + +**Files:** +- Modify: `libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts` + +- [ ] **Step 1: Read current component** (101 lines) to capture API. Replace inner Tailwind with new styles using `chat-interrupt`-style card pattern + content-projected action buttons. + +- [ ] **Step 2: Rewrite** — apply same warning-card pattern as `chat-interrupt` primitive but with content-projection slots `[chatInterruptActions]`. Replace Tailwind classes with hand-written CSS using `--ngaf-chat-warning-*` tokens. Add `styles: [CHAT_HOST_TOKENS, ...]`. + +- [ ] **Step 3: Update spec, run, commit** + +```bash +git add libs/chat/src/lib/compositions/chat-interrupt-panel +git commit -m "refactor(chat): restyle chat-interrupt-panel" +``` + +--- + +### Task 23: Rewrite `` and helpers + +**Files:** +- Modify: `libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts` +- Modify: `libs/chat/src/lib/compositions/chat-debug/debug-checkpoint-card.component.ts` +- Modify: `libs/chat/src/lib/compositions/chat-debug/debug-controls.component.ts` +- Modify: `libs/chat/src/lib/compositions/chat-debug/debug-detail.component.ts` +- Modify: `libs/chat/src/lib/compositions/chat-debug/debug-state-diff.component.ts` +- Modify: `libs/chat/src/lib/compositions/chat-debug/debug-state-inspector.component.ts` +- Modify: `libs/chat/src/lib/compositions/chat-debug/debug-summary.component.ts` +- Modify: `libs/chat/src/lib/compositions/chat-debug/debug-timeline.component.ts` + +For each helper component: + +- [ ] **Step 1: Read the current file**, identify Tailwind classes and CSS-property style attributes (`var(--chat-*)`). +- [ ] **Step 2: Replace** Tailwind classes with hand-written CSS in `styles: [CHAT_HOST_TOKENS, '...']`. Replace `--chat-*` token names with `--ngaf-chat-*`. Where a card or trace pattern fits (debug-checkpoint-card, debug-timeline), use ``. +- [ ] **Step 3: Update specs to match new selectors / classes.** +- [ ] **Step 4: Run debug specs** + +Run: `npx nx test chat -- --run chat-debug` +Expected: PASS. + +- [ ] **Step 5: Commit** + +```bash +git add libs/chat/src/lib/compositions/chat-debug +git commit -m "refactor(chat): restyle chat-debug + helpers (no Tailwind, new tokens)" +``` + +--- + +## Phase 7 — Cleanup chat library + +### Task 24: Delete obsolete style files + +**Files:** +- Delete: `libs/chat/src/lib/styles/chat-theme.ts` +- Delete: `libs/chat/src/lib/styles/chat-markdown.ts` +- Verify: no remaining imports of `CHAT_THEME_STYLES` or `CHAT_MARKDOWN_STYLES` + +- [ ] **Step 1: Search for references** + +Run: `grep -rn "CHAT_THEME_STYLES\|CHAT_MARKDOWN_STYLES\|chat-theme\|chat-markdown'" libs/chat/src cockpit apps` +Expected: zero hits in `libs/chat`. Hits in cockpit demos/website docs are fine (next phase will update them, but the old import paths will break — expected). + +- [ ] **Step 2: Verify markdown rendering still works** + +The old `chat-markdown.ts` exported `renderMarkdown` and `CHAT_MARKDOWN_STYLES`. The new design moves markdown styling into `chat-streaming-md`'s component-encapsulated styles + the host markdown rules. Read current `streaming/streaming-markdown.component.ts`. If it references the old file, update its imports to the new `styles/chat-markdown.styles.ts` constant (create if not done in Task 14). + +Create `libs/chat/src/lib/styles/chat-markdown.styles.ts`: + +```ts +// SPDX-License-Identifier: MIT +export const CHAT_MARKDOWN_STYLES = ` + :host { display: block; color: var(--ngaf-chat-text); line-height: var(--ngaf-chat-line-height); } + :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 { font-weight: bold; line-height: 1.2; margin: 0 0 1rem; } + :host h1 { font-size: 1.5em; } + :host h2 { font-size: 1.25em; font-weight: 600; } + :host h3 { font-size: 1.1em; } + :host h4 { font-size: 1em; } + :host p { margin: 0 0 1rem; line-height: 1.75; font-size: var(--ngaf-chat-font-size); } + :host p:last-child { margin-bottom: 0; } + :host a { color: var(--ngaf-chat-primary); text-decoration: underline; } + :host ul, :host ol { margin: 0 0 1rem; padding-left: 1.25rem; } + :host code { + background: var(--ngaf-chat-surface-alt); + color: var(--ngaf-chat-text); + padding: 1px 4px; + border-radius: 4px; + font-family: var(--ngaf-chat-font-mono); + font-size: 0.9em; + } + :host pre { + background: var(--ngaf-chat-surface-alt); + color: var(--ngaf-chat-text); + padding: 12px; + border-radius: var(--ngaf-chat-radius-card); + overflow-x: auto; + font-family: var(--ngaf-chat-font-mono); + font-size: var(--ngaf-chat-font-size-sm); + margin: 0 0 1rem; + } + :host pre code { background: transparent; padding: 0; border-radius: 0; } + :host blockquote { + border-left: 3px solid var(--ngaf-chat-separator); + padding-left: 12px; + margin: 0 0 1rem; + color: var(--ngaf-chat-text-muted); + } +`; +``` + +Update `streaming/streaming-markdown.component.ts` to import from `../styles/chat-markdown.styles` and apply `CHAT_HOST_TOKENS` + `CHAT_MARKDOWN_STYLES` in its styles array. + +- [ ] **Step 3: Delete files** + +```bash +git rm libs/chat/src/lib/styles/chat-theme.ts libs/chat/src/lib/styles/chat-markdown.ts +``` + +- [ ] **Step 4: Build to verify nothing left dangling** + +Run: `npx nx build chat 2>&1 | tail -20` +Expected: build succeeds. + +- [ ] **Step 5: Commit** + +```bash +git add libs/chat/src/lib/styles/chat-markdown.styles.ts libs/chat/src/lib/streaming/streaming-markdown.component.ts +git commit -m "refactor(chat): drop legacy chat-theme/chat-markdown style modules" +``` + +--- + +### Task 25: Update `public-api.ts` + +**Files:** +- Modify: `libs/chat/src/public-api.ts` + +- [ ] **Step 1: Apply edits** + +```ts +// libs/chat/src/public-api.ts +// SPDX-License-Identifier: MIT + +// Shared types +export type { ChatConfig } from './lib/provide-chat'; +export type { MessageTemplateType } from './lib/chat.types'; + +// Agent contract (runtime-neutral) +export type { + Agent, AgentWithHistory, Message, Role, ContentBlock, ToolCall, ToolCallStatus, + AgentStatus, AgentInterrupt, Subagent, SubagentStatus, AgentSubmitInput, + AgentSubmitOptions, AgentEvent, AgentStateUpdateEvent, AgentCustomEvent, AgentCheckpoint, +} from './lib/agent'; +export { isUserMessage, isAssistantMessage, isToolMessage, isSystemMessage } from './lib/agent'; + +// Primitives +export { ChatMessageListComponent, getMessageType } from './lib/primitives/chat-message-list/chat-message-list.component'; +export { MessageTemplateDirective } from './lib/primitives/chat-message-list/message-template.directive'; +export { ChatMessageComponent } from './lib/primitives/chat-message/chat-message.component'; +export type { ChatMessageRole } from './lib/primitives/chat-message/chat-message.component'; +export { ChatWindowComponent } from './lib/primitives/chat-window/chat-window.component'; +export { ChatTraceComponent } from './lib/primitives/chat-trace/chat-trace.component'; +export type { TraceState } from './lib/primitives/chat-trace/chat-trace.component'; +export { ChatLauncherButtonComponent } from './lib/primitives/chat-launcher-button/chat-launcher-button.component'; +export { ChatSuggestionsComponent } from './lib/primitives/chat-suggestions/chat-suggestions.component'; +export { ChatInputComponent, submitMessage } from './lib/primitives/chat-input/chat-input.component'; +export { ChatTypingIndicatorComponent, isTyping } from './lib/primitives/chat-typing-indicator/chat-typing-indicator.component'; +export { ChatErrorComponent, extractErrorMessage } from './lib/primitives/chat-error/chat-error.component'; +export { ChatInterruptComponent, getInterrupt } from './lib/primitives/chat-interrupt/chat-interrupt.component'; +export { ChatToolCallsComponent } from './lib/primitives/chat-tool-calls/chat-tool-calls.component'; +export { ChatSubagentsComponent } from './lib/primitives/chat-subagents/chat-subagents.component'; +export { ChatThreadListComponent } from './lib/primitives/chat-thread-list/chat-thread-list.component'; +export type { Thread } from './lib/primitives/chat-thread-list/chat-thread-list.component'; +export { ChatTimelineComponent } from './lib/primitives/chat-timeline/chat-timeline.component'; + +// Compositions +export { ChatComponent } from './lib/compositions/chat/chat.component'; +export { ChatPopupComponent } from './lib/compositions/chat-popup/chat-popup.component'; +export { ChatSidebarComponent } from './lib/compositions/chat-sidebar/chat-sidebar.component'; +export { ChatDebugComponent } from './lib/compositions/chat-debug/chat-debug.component'; +export { ChatTimelineSliderComponent } from './lib/compositions/chat-timeline-slider/chat-timeline-slider.component'; +export { ChatInterruptPanelComponent } from './lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component'; +export { ChatToolCallCardComponent } from './lib/compositions/chat-tool-call-card/chat-tool-call-card.component'; +export type { ToolCallInfo } from './lib/compositions/chat-tool-call-card/chat-tool-call-card.component'; +export { ChatSubagentCardComponent } from './lib/compositions/chat-subagent-card/chat-subagent-card.component'; + +// Streaming +export { ChatStreamingMdComponent } from './lib/streaming/streaming-markdown.component'; + +// DI +export { provideChat, CHAT_CONFIG } from './lib/provide-chat'; + +// A2UI catalog (existing exports — KEEP all of them, abbreviated here for brevity in the plan) +// (Re-paste lines 60-90 of the previous public-api.ts verbatim — A2UI catalog + a2ui types + mockAgent.) +``` + +**IMPORTANT** when applying this edit: the section labeled "A2UI catalog" plus type re-exports plus `mockAgent` exports must be preserved exactly from the existing file. The plan abbreviates them — the engineer must paste from the existing file's lines 53-96. + +- [ ] **Step 2: Verify nothing references removed exports** + +Run: `grep -rn "CHAT_THEME_STYLES\|CHAT_MARKDOWN_STYLES\|ChatMessagesComponent" libs/chat/src apps cockpit | grep -v "node_modules\|dist\|\.spec\."` +Expected: only references in cockpit demos and website docs (those updated in Phase 8/9). + +- [ ] **Step 3: Build** + +Run: `npx nx build chat 2>&1 | tail -10` +Expected: succeeds. + +- [ ] **Step 4: Commit** + +```bash +git add libs/chat/src/public-api.ts +git commit -m "refactor(chat): update public-api for new components" +``` + +--- + +### Task 26: Bump @ngaf/chat to 0.0.3 + +**Files:** +- Modify: `libs/chat/package.json` + +- [ ] **Step 1: Bump** + +Edit `libs/chat/package.json` field `"version": "0.0.2"` → `"version": "0.0.3"`. + +- [ ] **Step 2: Commit (no other libs change unless their source changed — leave their versions alone)** + +```bash +git add libs/chat/package.json +git commit -m "chore(release): bump @ngaf/chat to 0.0.3" +``` + +--- + +## Phase 8 — example-layouts rewrite + +### Task 27: Rewrite `example-chat-layout` (no Tailwind) + +**Files:** +- Modify: `libs/example-layouts/src/lib/example-chat-layout.component.ts` + +- [ ] **Step 1: Replace component** + +```ts +// libs/example-layouts/src/lib/example-chat-layout.component.ts +// SPDX-License-Identifier: MIT +import { Component, ChangeDetectionStrategy, input } from '@angular/core'; + +@Component({ + selector: 'example-chat-layout', + standalone: true, + changeDetection: ChangeDetectionStrategy.OnPush, + styles: ` + :host { + display: flex; + flex-direction: column; + height: 100vh; + height: 100dvh; + background: var(--ngaf-chat-bg, #fff); + color: var(--ngaf-chat-text, #1a1a1a); + font-family: var(--ngaf-chat-font-family, system-ui, sans-serif); + } + .layout { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + } + .layout__main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } + .layout__sidebar { + width: 100%; + flex-shrink: 0; + border-top: 1px solid var(--ngaf-chat-separator, #e5e5e5); + overflow-y: auto; + } + .layout__sidebar:empty { display: none; } + @media (min-width: 768px) { + .layout { flex-direction: row; } + .layout--sidebar-left { flex-direction: row-reverse; } + .layout__sidebar { + width: var(--example-layout-sidebar-width, 18rem); + border-top: 0; + border-left: 1px solid var(--ngaf-chat-separator, #e5e5e5); + } + .layout--sidebar-left .layout__sidebar { + border-left: 0; + border-right: 1px solid var(--ngaf-chat-separator, #e5e5e5); + } + } + `, + template: ` +
+
+ +
+ `, +}) +export class ExampleChatLayoutComponent { + readonly sidebarPosition = input<'left' | 'right'>('right'); + readonly sidebarWidth = input('18rem'); +} +``` + +- [ ] **Step 2: Update spec** — assertion should check `.layout__sidebar:empty` collapse, sidebar position class, projected content; remove any Tailwind class assertions. + +- [ ] **Step 3: Run, commit** + +```bash +git add libs/example-layouts/src/lib/example-chat-layout.component.ts +git commit -m "refactor(example-layouts): rewrite example-chat-layout without Tailwind" +``` + +--- + +### Task 28: Rewrite `example-split-layout` (no Tailwind) + +**Files:** +- Modify: `libs/example-layouts/src/lib/example-split-layout.component.ts` + +- [ ] **Step 1: Read current component** to capture inputs/outputs. + +- [ ] **Step 2: Rewrite** — replace Tailwind classes with hand-written CSS using `--ngaf-chat-*` token fallbacks (same pattern as chat-layout). Two named slots remain. Run spec, commit. + +```bash +git add libs/example-layouts/src/lib/example-split-layout.component.ts +git commit -m "refactor(example-layouts): rewrite example-split-layout without Tailwind" +``` + +--- + +## Phase 9 — Cockpit demo updates + +### Task 29: Map all chat-touching demo files + +- [ ] **Step 1: Capture file list** + +Run: +```bash +grep -rln "@ngaf/chat\|/dev/null +``` + +Save the output list to `/tmp/demo-file-list.txt` (used as a checklist for subsequent tasks). + +- [ ] **Step 2: For each file, identify what to change.** Most demos will need: + - `` → `` (selector + class import rename). + - Drop `provideFakeAgUiAgent`-style Tailwind wrapper classes from local templates. + - Drop any direct imports of `CHAT_THEME_STYLES` / `CHAT_MARKDOWN_STYLES` from `@ngaf/chat`. + - Update consuming components' `styles` arrays to use `--ngaf-chat-*` tokens directly (no Tailwind utility classes). + +### Task 30: Update `cockpit/chat/messages/angular` + +**Files:** +- Modify: `cockpit/chat/messages/angular/src/app/app.ts` +- Modify: `cockpit/chat/messages/angular/src/app/app.html` (if used) + +- [ ] **Step 1: Read `app.ts`**, replace `` with `` and update import. Drop any local Tailwind classes. + +- [ ] **Step 2: Run demo build** + +Run: `npx nx build cockpit-chat-messages-angular --configuration=development 2>&1 | tail -10` +Expected: build succeeds. + +- [ ] **Step 3: Commit** + +```bash +git add cockpit/chat/messages +git commit -m "chore(cockpit): update chat/messages demo for chat 0.0.3" +``` + +### Task 31-47: Update remaining 18 demos + +For each of the demos below, repeat the pattern from Task 30 (read, update imports/templates, build to verify, commit). Each is its own task with these steps: + +- [ ] **Task 31:** `cockpit/chat/input/angular` +- [ ] **Task 32:** `cockpit/chat/threads/angular` +- [ ] **Task 33:** `cockpit/chat/tool-calls/angular` +- [ ] **Task 34:** `cockpit/chat/subagents/angular` +- [ ] **Task 35:** `cockpit/chat/timeline/angular` +- [ ] **Task 36:** `cockpit/chat/interrupts/angular` +- [ ] **Task 37:** `cockpit/chat/theming/angular` — special: this demo specifically tests theming. Add an example showing CSS-custom-property override at app level: `chat { --ngaf-chat-primary: oklch(0.55 0.22 264); }`. +- [ ] **Task 38:** `cockpit/chat/debug/angular` +- [ ] **Task 39:** `cockpit/chat/generative-ui/angular` +- [ ] **Task 40:** `cockpit/chat/a2ui/angular` +- [ ] **Task 41:** `cockpit/langgraph/streaming/angular` +- [ ] **Task 42:** `cockpit/langgraph/persistence/angular` +- [ ] **Task 43:** `cockpit/langgraph/memory/angular` +- [ ] **Task 44:** `cockpit/langgraph/interrupts/angular` +- [ ] **Task 45:** `cockpit/langgraph/durable-execution/angular` +- [ ] **Task 46:** `cockpit/langgraph/time-travel/angular` +- [ ] **Task 47:** `cockpit/langgraph/subgraphs/angular` +- [ ] **Task 48:** `cockpit/langgraph/deployment-runtime/angular` + +**For each task above, the steps are:** +- [ ] Read `app.ts` (and `app.html` if used) and any feature components. +- [ ] Apply renames: `` → ``; `ChatMessagesComponent` → `ChatMessageListComponent`. +- [ ] Drop direct imports of `CHAT_THEME_STYLES` / `CHAT_MARKDOWN_STYLES` if present; remove any consumer-side `styles: [CHAT_THEME_STYLES]` reference (the chat library now ships its own styles). +- [ ] Replace any Tailwind utility classes wrapping `` with hand-written CSS using the new tokens. +- [ ] Run: `npx nx build --configuration=development 2>&1 | tail -10` to verify. +- [ ] Commit: `git commit -m "chore(cockpit): update for chat 0.0.3"`. + +### Task 49: Update cockpit footprint + matrix specs + +**Files:** +- Modify: `cockpit/chat/footprint.spec.ts` +- Modify: `cockpit/chat/matrix.spec.ts` + +- [ ] **Step 1: Read both specs.** They likely assert package surface and demo presence. + +- [ ] **Step 2: Update assertions** — add `ChatPopupComponent`, `ChatSidebarComponent`, `ChatTraceComponent`, `ChatWindowComponent`, `ChatLauncherButtonComponent`, `ChatSuggestionsComponent`, `ChatMessageComponent` to the expected exports list. Rename `ChatMessagesComponent` → `ChatMessageListComponent`. Drop `CHAT_THEME_STYLES` / `CHAT_MARKDOWN_STYLES`. + +- [ ] **Step 3: Run** + +Run: `npx nx test cockpit-chat -- --run footprint matrix 2>&1 | tail -20` +Expected: PASS. + +- [ ] **Step 4: Commit** + +```bash +git add cockpit/chat/footprint.spec.ts cockpit/chat/matrix.spec.ts +git commit -m "test(cockpit): update chat footprint + matrix for 0.0.3 surface" +``` + +--- + +## Phase 10 — Website docs + +### Task 50: Revert PR #157 Tailwind docs and rewrite installation/quickstart + +**Files:** +- Modify: `apps/website/content/docs/chat/getting-started/installation.mdx` +- Modify: `apps/website/content/docs/chat/getting-started/quickstart.mdx` + +- [ ] **Step 1: Rewrite installation.mdx** + +```mdx +# Installation + +Detailed setup guide for `@ngaf/chat`. + +## Requirements + + + +`@ngaf/chat` uses Angular Signals, the `input()` function, and `contentChildren()`. Angular 20 or later is required. + + +Required for the build toolchain and package installation. + + + +## Install the package + +```bash +npm install @ngaf/chat +``` + +That's it. The chat components ship with their own design tokens and component-encapsulated styles. No PostCSS config, no global stylesheet import, no Tailwind required. + +## Peer Dependencies + +`@ngaf/chat` declares the following peer dependencies: + +| Package | Version | Required | +|---------|---------|----------| +| `@angular/core` | `^20.0.0 \|\| ^21.0.0` | Yes | +| `@angular/common` | `^20.0.0 \|\| ^21.0.0` | Yes | +| `@angular/forms` | `^20.0.0 \|\| ^21.0.0` | Yes | +| `@ngaf/render` | `^0.0.1` | Yes | +| `@ngaf/a2ui` | `^0.0.1` | Yes | +| `@ngaf/partial-json` | `^0.0.1` | Yes | +| `@json-render/core` | `^0.16.0` | Yes | +| `@langchain/core` | `^1.1.33` | Yes | +| `marked` | `^15.0.0 \|\| ^16.0.0` | Optional | + +## Configure provideChat() + +Add `provideChat()` alongside your agent provider. This registers `CHAT_CONFIG` for global chat configuration (assistant name, avatar label, render registry). + +```ts +import { ApplicationConfig } from '@angular/core'; +import { provideChat } from '@ngaf/chat'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideChat({ assistantName: 'Assistant' }), + ], +}; +``` + +`provideChat()` is optional — the chat components fall back to sensible defaults. + +## Theming + +The chat ships with a complete light/dark token system. Three ways to customize: + +### 1. Override a single token + +```css +/* src/styles.css */ +:root { + --ngaf-chat-primary: oklch(0.55 0.22 264); +} +``` + +### 2. Force a theme + +```html + +``` + +### 3. Deep override via the optional global stylesheet + +```css +/* src/styles.css */ +@import '@ngaf/chat/chat.css'; + +:root { --ngaf-chat-primary: oklch(0.55 0.22 264); } +``` + +See [Theming](/docs/chat/guides/theming) for the full token reference. +``` + +- [ ] **Step 2: Rewrite quickstart.mdx** — replace existing content with the install step + provider step + minimal usage step. No Tailwind step. + +```mdx +# Quick Start + +Build a streaming chat UI with `@ngaf/chat` in 5 minutes. + + +Angular 20+ project with an agent provider configured. See [Agent Installation](/docs/agent/getting-started/installation) if you need help. + + + + + +```bash +npm install @ngaf/chat +``` + + + + +```ts +import { ApplicationConfig } from '@angular/core'; +import { provideAgent } from '@ngaf/langgraph'; +import { provideChat } from '@ngaf/chat'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideAgent({ apiUrl: 'http://localhost:2024' }), + provideChat({ assistantName: 'Assistant' }), + ], +}; +``` + + + + +```ts +import { Component, ChangeDetectionStrategy, signal } from '@angular/core'; +import { agent } from '@ngaf/langgraph'; +import { ChatComponent } from '@ngaf/chat'; + +@Component({ + selector: 'app-chat-page', + standalone: true, + imports: [ChatComponent], + changeDetection: ChangeDetectionStrategy.OnPush, + template: `
`, +}) +export class ChatPageComponent { + protected readonly chatAgent = agent({ + assistantId: 'chat_agent', + threadId: signal(null), + }); +} +``` + + + + +That's it — no Tailwind setup, no PostCSS config, no global stylesheet import. The chat ships with its own design tokens and component-scoped styles. + +## What's Next + +- [Layout Modes](/docs/chat/guides/layout-modes) — embedded, popup, or sidebar? +- [Theming](/docs/chat/guides/theming) — customize colors, fonts, and shapes. +- [Components](/docs/chat/components) — full primitive and composition reference. +``` + +- [ ] **Step 3: Commit** + +```bash +git add apps/website/content/docs/chat/getting-started/installation.mdx apps/website/content/docs/chat/getting-started/quickstart.mdx +git commit -m "docs(chat): rewrite install + quickstart for 0.0.3 (no Tailwind)" +``` + +--- + +### Task 51: Rewrite `guides/theming.mdx` + +**Files:** +- Modify: `apps/website/content/docs/chat/guides/theming.mdx` + +- [ ] **Step 1: Read existing file** to gauge what stays. + +- [ ] **Step 2: Rewrite** with the full `--ngaf-chat-*` token reference table, light/dark explanation, three override paths (per-token at `:root`, attribute, optional global stylesheet), examples. + +- [ ] **Step 3: Commit** + +```bash +git add apps/website/content/docs/chat/guides/theming.mdx +git commit -m "docs(chat): rewrite theming guide for new token surface" +``` + +--- + +### Task 52: Add new component reference pages + +**Files:** +- Create: `apps/website/content/docs/chat/components/chat-popup.mdx` +- Create: `apps/website/content/docs/chat/components/chat-sidebar.mdx` +- Create: `apps/website/content/docs/chat/components/chat-trace.mdx` +- Create: `apps/website/content/docs/chat/guides/layout-modes.mdx` + +For each: + +- [ ] **Step 1: Match the existing reference page format** — read any existing `apps/website/content/docs/chat/components/*.mdx` to crib the frontmatter + section structure (Inputs / Outputs / Slots / Examples). + +- [ ] **Step 2: Write the page** with: + - One-line summary. + - Inputs table (name / type / default / description). + - Outputs table. + - Content-projection slots table. + - Minimal example. + - "When to use" pointer to the Layout Modes guide. + +- [ ] **Step 3: Update `apps/website/content/docs/chat/components/_meta.json`** (or whatever the docs index file is named — match repo convention) to surface the new pages in the sidebar. + +- [ ] **Step 4: Commit** + +```bash +git add apps/website/content/docs/chat/components/chat-popup.mdx \ + apps/website/content/docs/chat/components/chat-sidebar.mdx \ + apps/website/content/docs/chat/components/chat-trace.mdx \ + apps/website/content/docs/chat/guides/layout-modes.mdx \ + apps/website/content/docs/chat/components/_meta.json +git commit -m "docs(chat): add reference pages for chat-popup, chat-sidebar, chat-trace + layout-modes guide" +``` + +--- + +### Task 53: Update existing component reference pages for renames + +**Files:** +- Modify: `apps/website/content/docs/chat/components/*.mdx` (all existing pages) + +- [ ] **Step 1: Search** + +Run: `grep -ln "chat-messages\|ChatMessagesComponent\|CHAT_THEME_STYLES\|CHAT_MARKDOWN_STYLES" apps/website/content/docs/chat` + +- [ ] **Step 2: For each match, replace** old names with new ones; remove any `CHAT_THEME_STYLES`/`CHAT_MARKDOWN_STYLES` references; add note about removed avatar slot. + +- [ ] **Step 3: Build website to verify MDX still parses** + +Run: `npx nx build website 2>&1 | tail -20` +Expected: succeeds. + +- [ ] **Step 4: Commit** + +```bash +git add apps/website/content/docs/chat +git commit -m "docs(chat): update existing component pages for 0.0.3 renames" +``` + +--- + +## Phase 11 — Verification + +### Task 54: Full test + build sweep + +- [ ] **Step 1: Build the chat library** + +Run: `npx nx build chat 2>&1 | tail -10` +Expected: succeeds, `dist/libs/chat/chat.css` present. + +- [ ] **Step 2: Run all chat tests** + +Run: `npx nx test chat 2>&1 | tail -30` +Expected: all PASS. + +- [ ] **Step 3: Run all example-layouts tests** + +Run: `npx nx test example-layouts 2>&1 | tail -10` +Expected: all PASS. + +- [ ] **Step 4: Build all cockpit demos** + +Run: `npx nx run-many -t build -p $(grep -lE "@ngaf/chat" cockpit/chat/*/angular/package.json cockpit/langgraph/*/angular/package.json | xargs -I{} dirname {} | xargs -I{} basename {} | tr '\n' ',' | sed 's/,$//') --configuration=development 2>&1 | tail -30` +Expected: all build. + +- [ ] **Step 5: Run cockpit chat footprint + matrix tests** + +Run: `npx nx test cockpit-chat 2>&1 | tail -20` +Expected: PASS. + +- [ ] **Step 6: Run conformance tests against the published surface** + +Run: `npx nx test chat -- --run conformance 2>&1 | tail -10` +Expected: PASS. + +If anything fails, fix in place (do not skip), commit fix per failure with descriptive message, then continue. + +--- + +### Task 55: Manual smoke test against the smoke app + +**Files:** +- (External) `~/tmp/ngaf/` + +- [ ] **Step 1: Build chat lib** + +Run: `npx nx build chat 2>&1 | tail -5` + +- [ ] **Step 2: Pack and install into smoke app** + +```bash +cd dist/libs/chat && npm pack && cd - +cd ~/tmp/ngaf && npm install /Users/blove/repos/angular-agent-framework/dist/libs/chat/ngaf-chat-0.0.3.tgz +``` + +- [ ] **Step 3: Remove Tailwind setup from smoke app (it's no longer needed)** + +```bash +cd ~/tmp/ngaf +npm uninstall tailwindcss @tailwindcss/postcss +rm -f .postcssrc.json +cat > src/styles.css <`, ``, ``, ``, ``, ``, ``. + - Renamed: `` → ``. + - Removed: `CHAT_THEME_STYLES`, `CHAT_MARKDOWN_STYLES`, `chat-timeline-slider` horizontal-slider variant, all Tailwind utility-class usage. + - Migration: drop Tailwind setup; override `--ngaf-chat-*` tokens or import `@ngaf/chat/chat.css`. + +- [ ] **Step 3: Open PR** + +```bash +git push -u origin claude/dazzling-dewdney-887eac +gh pr create --title "feat(chat): production-ready visual redesign (0.0.3)" --body "$(cat <<'EOF' +## Summary + +Coordinated rewrite of @ngaf/chat for production-grade visual quality. Three new layout modes (embedded/popup/sidebar), asymmetric message pattern (user bubble + assistant inline), shared chat-trace primitive driving tool calls/subagents/timeline, complete Tailwind removal in favor of component-encapsulated styles + optional @ngaf/chat/chat.css. + +Closes the v0.0.2 publish friction (PR #157): consumers no longer need any Tailwind setup. `npm install @ngaf/chat` + drop `` in a template = working chat. + +## Changes + +- New: `` rewritten, ``, ``, ``, ``, ``, ``, ``. +- Restyled: `` (pill design), `` (3-dot), ``, ``, ``, ``, ``, `` (vertical), ``, `` + helpers, ``. +- Renamed: `` → `` (`ChatMessagesComponent` → `ChatMessageListComponent`). +- Removed: `CHAT_THEME_STYLES`, `CHAT_MARKDOWN_STYLES`, horizontal-slider timeline variant, all Tailwind utility classes. +- Updated: 19 cockpit demos, libs/example-layouts, website docs. +- Reverts the docs added in #157 (Tailwind setup is no longer required). + +## Migration + +```css +/* Before (0.0.2) — required */ +@import "tailwindcss"; +@source "../node_modules/@ngaf/chat"; + +/* After (0.0.3) — optional */ +@import '@ngaf/chat/chat.css'; /* only if you want global token / class overrides */ +``` + +Spec: docs/superpowers/specs/2026-05-01-chat-redesign-design.md +Plan: docs/superpowers/plans/2026-05-01-chat-redesign.md + +## Test plan + +- [x] All chat unit + conformance tests pass. +- [x] All cockpit chat + langgraph demos build cleanly. +- [x] Cockpit footprint + matrix specs assert new exports. +- [x] Smoke app renders correctly with no Tailwind setup. + +🤖 Generated with [Claude Code](https://claude.com/claude-code) +EOF +)" +``` + +- [ ] **Step 4: Confirm PR URL** is returned and reachable. + +--- + +## Verification Checklist (run mentally before claiming done) + +- [ ] Every task in this plan checked off. +- [ ] No `CHAT_THEME_STYLES` / `CHAT_MARKDOWN_STYLES` references in libs/chat or apps or cockpit. +- [ ] No Tailwind utility classes in `libs/chat/src/lib/**`. +- [ ] No Tailwind utility classes in `libs/example-layouts/src/lib/**`. +- [ ] Every chat component imports `CHAT_HOST_TOKENS` in its styles array. +- [ ] `` selector returns 0 results in `grep -r '`), floating popup (``), slide-in sidebar (``). +- Replaces all Tailwind utility-class usage with hand-written component-encapsulated CSS plus an optional global stylesheet. +- Restyles every adjacent surface — tool calls, subagents, timeline, threads, interrupt panel, debug composition, demo layouts — to a single coherent design system. +- Fixes the v0.0.2 publish-time friction (consumers no longer need Tailwind set up; chat renders correctly out of the box). + +This is a coordinated breaking change shipped as `@ngaf/chat@0.0.3`. All first-party consumers (cockpit demos, `libs/example-layouts`, website docs) are updated in the same PR. There is no compatibility shim. + +## Goals + +1. Production-grade visual quality across every chat surface (messages, input, traces, timeline, threads, debug, layout shells, popup/sidebar chrome). +2. Zero consumer setup to render correctly: `npm install @ngaf/chat`, drop `` in a template, it works. +3. Single coherent design language across all chat-adjacent components and demos. No mixed bordered cards / bubbles / Tailwind tokens. +4. Three layout modes covering the dominant chat-UI shapes (full-window, floating launcher, slide-in panel). +5. Theme override surface that scales: 90% of consumers tune CSS custom properties; deep restyling available via opt-in global stylesheet. + +## Non-Goals + +- Voice / push-to-talk wiring (CSS hook only). +- Attachment upload pipeline (UI scaffold only). +- Smart suggestions / agent-driven prompt generation. +- Code-block syntax highlighting (base styling + copy button only). +- Right-to-left language layout. +- Header chrome beyond title + close-X. +- Major-version semantics; release stays on patch (0.0.3) per project policy. + +## Design + +### Architecture decisions + +Three foundational decisions, settled during brainstorming: + +| # | Decision | Rationale | +|---|---|---| +| 1 | Three separate compositions (``, ``, ``) over one component with a `mode` input. | Tree-shakable, mirrors existing repo pattern (``, ``). Each component has a single layout responsibility. | +| 2 | Hybrid styling: component-encapsulated styles + CSS custom properties on `:host` + optional global `chat.css`. | Renders out of the box (Layer 1 + 2), exposes copilotkit-style global-class deep-override surface (Layer 3) without making it a setup step. Improves on copilotkit's React-bundler-side-effect model. | +| 3 | In-place rewrite of ``, no compatibility shim, ship as 0.0.3. | At 0.0.x stage breaking changes are expected. Cockpit demos updated in the same PR. Patch-only versioning policy applies regardless of break magnitude. | + +### Component inventory + +#### Top-level compositions + +| Selector | Mode | Replaces | +|---|---|---| +| `` | embedded — fills its container | Existing `` (rewritten in place) | +| `` | floating — bottom-right launcher + window (24rem × 600px) | New | +| `` | slide-in — right-edge panel (28rem) | New | +| `` | unchanged surface; restyled internals | Existing | +| `` | vertical history walk; horizontal-slider variant **dropped** | Existing | +| `` | restyled to match trace aesthetic | Existing | + +#### Internal layout primitives + +| Selector | Purpose | New / changed | +|---|---|---| +| `chat-window` | Header + body + input footer slot. Used by all three top-level modes. | New | +| `chat-launcher-button` | Floating circular button for popup mode. | New | +| `chat-message` | Single message renderer with user-bubble / assistant-inline variants. | New | +| `chat-trace` | Collapsible label + left-border indented content. Used for tool calls, subagents, timeline entries. | New | +| `chat-suggestions` | Render initial prompt chips when empty. | New | + +#### Existing primitives — kept, all restyled, all Tailwind-free + +| Old name | New name | Notes | +|---|---|---| +| `chat-messages` | `chat-message-list` | Selector + class renamed for clarity. | +| `chat-input` | `chat-input` | Rewritten to pill design (20px radius, 75px min-height, inline send + control slots). | +| `chat-typing-indicator` | `chat-typing-indicator` | Replaced with 3-dot animation. | +| `chat-error` | `chat-error` | Restyled error callout. | +| `chat-interrupt` | `chat-interrupt` | Restyled warning callout. | +| `chat-thread-list` | `chat-thread-list` | Restyled list rows; optional "+ New thread" header button. | +| `chat-tool-calls` | `chat-tool-calls` | Headless data primitive unchanged; default projected template now uses `chat-trace`. | +| `chat-subagents` | `chat-subagents` | Same. | +| `chat-tool-call-card` | `chat-tool-call-card` | Composition rewritten to use `chat-trace` as visual base. Tailwind removed. | +| `chat-subagent-card` | `chat-subagent-card` | Same. | +| `chat-timeline` | `chat-timeline` | Headless data primitive unchanged; default visualization adopts vertical history walk. | +| `chat-generative-ui` | `chat-generative-ui` | Behavior unchanged; wrapper restyled. | + +#### Removed + +- All Tailwind utility-class usage in chat library output. +- `CHAT_THEME_STYLES`, `CHAT_MARKDOWN_STYLES` public exports (replaced by per-component scoped styles + token file + optional global `chat.css`). +- Avatar block in assistant messages (assistant goes bubble-less, no avatar — matches copilotkit philosophy). +- Horizontal-slider variant of `chat-timeline-slider` (vertical history walk supersedes it). + +#### Styles directory restructure + +``` +libs/chat/src/lib/styles/ +├── chat-tokens.ts # CSS custom property declarations + keyframes +├── chat-window.styles.ts # per-component scoped CSS strings +├── chat-message.styles.ts +├── chat-input.styles.ts +├── chat-trace.styles.ts +├── chat-message-list.styles.ts +├── chat-thread-list.styles.ts +├── chat-typing-indicator.styles.ts +├── chat-error.styles.ts +├── chat-interrupt.styles.ts +├── chat-launcher-button.styles.ts +├── chat-suggestions.styles.ts +├── chat-generative-ui.styles.ts +├── chat-markdown.styles.ts # markdown rendering rules +└── chat.css # Layer-3 optional global stylesheet (shipped via package exports map) +``` + +The `:host`-applied tokens are emitted via a `CHAT_HOST_TOKENS` constant imported into every chat component's `styles` array. The same tokens (with `:root` selector) appear in `chat.css` for consumers who want app-level overrides. + +### Visual design system + +#### Color tokens + +``` +Light theme (default): + --ngaf-chat-bg: rgb(255, 255, 255) + --ngaf-chat-surface: rgb(255, 255, 255) + --ngaf-chat-surface-alt: rgb(251, 251, 251) + --ngaf-chat-primary: rgb(28, 28, 28) + --ngaf-chat-on-primary: rgb(255, 255, 255) + --ngaf-chat-text: rgb(28, 28, 28) + --ngaf-chat-text-muted: rgb(115, 115, 115) + --ngaf-chat-separator: rgb(229, 229, 229) + --ngaf-chat-muted: rgb(200, 200, 200) + --ngaf-chat-error-bg: #fef2f2 + --ngaf-chat-error-border: #fecaca + --ngaf-chat-error-text: #dc2626 + --ngaf-chat-warning-bg: #fffbeb + --ngaf-chat-warning-text: #b45309 + --ngaf-chat-success: #16a34a + --ngaf-chat-shadow-sm: 0 1px 2px rgba(0,0,0,.05) + --ngaf-chat-shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06) + --ngaf-chat-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05) + +Dark theme (auto via prefers-color-scheme; opt-out via [data-ngaf-chat-theme="light"]; opt-in via [data-ngaf-chat-theme="dark"]): + --ngaf-chat-bg: rgb(17, 17, 17) + --ngaf-chat-surface: rgb(28, 28, 28) + --ngaf-chat-surface-alt: rgb(44, 44, 44) + --ngaf-chat-primary: rgb(255, 255, 255) + --ngaf-chat-on-primary: rgb(28, 28, 28) + --ngaf-chat-text: rgb(245, 245, 245) + --ngaf-chat-text-muted: rgb(160, 160, 160) + --ngaf-chat-separator: rgb(45, 45, 45) + --ngaf-chat-muted: rgb(60, 60, 60) + --ngaf-chat-error-bg: rgb(45, 21, 21) + --ngaf-chat-error-text: #fca5a5 + --ngaf-chat-warning-bg: rgb(45, 35, 21) + --ngaf-chat-warning-text: #fbbf24 + --ngaf-chat-success: #4ade80 +``` + +#### Geometry tokens + +``` +--ngaf-chat-radius-bubble: 15px +--ngaf-chat-radius-input: 20px +--ngaf-chat-radius-card: 8px +--ngaf-chat-radius-button: 8px +--ngaf-chat-radius-launcher: 9999px +--ngaf-chat-max-width: 48rem +``` + +#### Typography tokens + +``` +--ngaf-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" +--ngaf-chat-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace +--ngaf-chat-font-size: 1rem +--ngaf-chat-font-size-sm: 0.875rem +--ngaf-chat-font-size-xs: 0.75rem +--ngaf-chat-line-height: 1.6 +--ngaf-chat-line-height-tight: 1.5 +``` + +#### Spacing scale + +``` +--ngaf-chat-space-1: 4px +--ngaf-chat-space-2: 8px +--ngaf-chat-space-3: 12px +--ngaf-chat-space-4: 16px +--ngaf-chat-space-5: 20px +--ngaf-chat-space-6: 24px +--ngaf-chat-space-8: 32px +``` + +#### Animations (defined in `chat-tokens.ts` as keyframes) + +- `ngaf-chat-spin` — 1s linear infinite (spinners) +- `ngaf-chat-typing-dot` — 1.4s ease-in-out infinite (3-dot indicator) +- `ngaf-chat-pulse` — 2s cubic-bezier infinite (recording / loading state hooks) + +### Message rendering + +#### User message +- Right-aligned filled bubble. +- `background: var(--ngaf-chat-primary); color: var(--ngaf-chat-on-primary)`. +- `max-width: 80%; padding: 8px 12px; border-radius: var(--ngaf-chat-radius-bubble)` (15px all corners, no asymmetric tail). +- `white-space: pre-wrap; line-height: var(--ngaf-chat-line-height-tight)`. +- 1.5rem top margin when following an assistant message; 0.5rem otherwise. + +#### Assistant message +- No bubble, no avatar, no left-padding offset. Full-width text up to `--ngaf-chat-max-width`. +- `color: var(--ngaf-chat-text); line-height: var(--ngaf-chat-line-height)`. +- `position: relative` wrapper hosts hover-revealed controls. +- 1.5rem top margin between turns. + +#### Hover-revealed assistant controls +- Container: `position: absolute; left: 0; bottom: -28px; display: flex; gap: 1rem; opacity: 0; transition: opacity 200ms ease`. +- `opacity: 1` on `.assistant-message:hover`, on `.assistant-message:focus-within`, and unconditionally on viewports `<= 768px`. +- Always-visible on the most recent assistant message. +- Default buttons: copy, regenerate. Slot via `` for replacement/extension. +- Buttons: 20×20, transparent bg, primary-color stroke, `transform: scale(1.05)` on hover. + +#### Streaming behavior +- `chat-streaming-md` unchanged structurally. +- Subtle blinking caret (`▍`, CSS `::after`, 1.2s blink) appended on the **last** assistant message while `agent.isLoading()`. +- Tool-call traces and subagent-activity traces render **above** the markdown body, inside the assistant message wrapper, so the read order is "thinking → answer". + +#### Tool / system messages +- Tool messages route through `chat-trace`; never render as standalone rows. +- System messages: centered, italic, `--ngaf-chat-text-muted`, `--ngaf-chat-font-size-xs`, generous vertical padding. + +#### Empty state +- Vertically + horizontally centered. +- Optional headline + subline + suggestion chips, all content-projected via ``. + +#### Markdown +- h1 1.5em bold, h2 1.25em 600, h3 1.1em, paragraph line-height 1.75, links underlined. +- Code blocks: `--ngaf-chat-surface-alt` background, `--ngaf-chat-font-mono`, copy button top-right, language label top-left. +- Inline code: subtle bg tint, monospace. + +### Input composer + +#### Container + pill +- Wrapper `.chat-input-container`: `background: var(--ngaf-chat-bg); padding: 0 0 15px 0`. Hosts banners, attachment queue, the pill, and an optional powered-by footer. +- Pill `.chat-input`: `background: var(--ngaf-chat-surface-alt); border: 1px solid var(--ngaf-chat-separator); border-radius: var(--ngaf-chat-radius-input); padding: 12px 14px; min-height: 75px; width: 95%; margin: 0 auto; cursor: text`. +- `:focus-within` deepens border to `--ngaf-chat-text-muted`. + +#### Textarea +- Auto-resizes (1 row min, 6 rows max, scroll after). CSS `field-sizing: content` with JS fallback observing scrollHeight. +- `border: 0; outline: 0; background: transparent; resize: none; width: 100%`. +- `font-size: var(--ngaf-chat-font-size-sm); line-height: 1.5rem; color: var(--ngaf-chat-text)`. +- Placeholder: `var(--ngaf-chat-text-muted)`, `opacity: 1`. +- Custom scrollbar (6px, rounded, transparent track). + +#### Controls row (absolute bottom-right inside pill) +- Send (default 24×24, primary stroke, scale-up hover, disabled → muted). +- Optional left-side controls via `[chatInputLeading]` slot. +- Optional right-side controls via `[chatInputTrailing]` slot. +- `.recording` state hooks (red bg + `ngaf-chat-pulse`) wired but inactive — gated by `enableVoice` input default `false`. + +#### Submit +- `submitOnEnter` input default `true`. Enter submits; Shift+Enter inserts newline. +- Disabled computed from `agent.isLoading()` and empty content. +- On submit emits `submit` output and calls `agent.submit({ message })` if bound. + +#### Attachments queue (slot) +- Renders above the pill when files are queued. Horizontal scroll-row of 64×64 thumbnail tiles. Dismiss-X on hover. Pure UI scaffold; no upload pipeline. + +#### Banners +- ``: `--ngaf-chat-error-bg`, `--ngaf-chat-error-border`, `--ngaf-chat-error-text`, card radius, padding 8/12. Icon + message + dismiss-X. +- ``: `--ngaf-chat-warning-bg`, `--ngaf-chat-warning-text`, same shape, action-button slot (Resume / Cancel default templates). +- Both render immediately above the pill, inside the input container. + +#### Powered-by footer (optional, off by default) +- Centered 12px text, `--ngaf-chat-muted`. Reserved hook. + +### Window primitive + three layout modes + +#### `` (internal) +``` +chat-window +├─ .chat-window__header (optional, [chatHeader] slot) +├─ .chat-window__body (flex: 1; min-height: 0; overflow hidden) +│ ├─ chat-message-list +│ └─ chat-typing-indicator +└─ .chat-window__footer (interrupt/error banners + chat-input) +``` +- Header 56px, hairline bottom border, padding `0 24px`, font-weight 500, optional 35×35 close-X at right. +- Body: scrolls internally with the auto-scroll-to-bottom logic from current ``. +- Custom 6px scrollbar. + +#### `` (embedded) +- `:host { display: flex; flex-direction: column; height: 100%; }`. Consumer controls sizing. +- No chrome around ``. +- Header opt-in via `[chatHeader]` slot (default no header). + +```html + +``` + +#### `` +- Fixed bottom-right of viewport. Two visible elements: + 1. `` — circular 56×56 at `bottom: 1rem; right: 1rem`, primary background, chat icon. Toggles open state. + 2. Window — 24rem × 600px on `≥640px`, full-screen below. `position: fixed; bottom: 5rem; right: 1rem; border-radius: 0.75rem; box-shadow: 0 5px 40px rgba(0,0,0,.16)`. +- Open animation 200ms ease-out: `transform: scale(.95) translateY(20px); opacity: 0` → `transform: scale(1) translateY(0); opacity: 1`. Closing reverses, then `pointer-events: none`. +- Header default: title + close-X (`[chatHeader]` slot for title content). + +```html + + My Assistant + +``` + +#### `` +- Fixed right edge. Window 28rem wide on `≥640px`, full-width below. +- `position: fixed; top: 0; right: 0; bottom: 0; border-radius: 0`. Full-height shadow on left side. +- Open animation 200ms ease-out: `transform: translateX(100%)` → `transform: translateX(0)`. No opacity fade. +- `pushContent` input (default `false`). When `true`, the sidebar wraps the user's app content via `` and shifts it leftward via `margin-right` transition when opened. + +```html + + Assistant +
...app content...
+ +``` + +#### Shared API (popup + sidebar) +- `[(open)]` two-way binding (`WritableSignal` consumer side). +- Imperative `toggle()`, `openWindow()`, `closeWindow()` methods. +- Default closed. + +#### Mobile +- `<640px`: popup goes full-screen; sidebar goes full-width slide-in. +- `<=768px`: hover-revealed message controls become always-visible (matches copilotkit's `@media` rule). + +### Trace primitive — drives tool calls, subagents, timeline + +#### `` +Single primitive serving three uses. + +``` +chat-trace +├─ .chat-trace__header (button, click toggles) +│ ├─ chevron icon (rotates 90° expanded, 200ms ease) +│ ├─ status icon (pending/running/done/error — content-projected) +│ ├─ +│ └─ optional metadata badge (right-aligned) +└─ .chat-trace__content + └─ +``` + +- Header: `display: flex; align-items: center; gap: 0.25rem; cursor: pointer; user-select: none; font-size: var(--ngaf-chat-font-size-sm); color: var(--ngaf-chat-text-muted)`. +- Content: `padding-left: 1rem; padding-top: 0.375rem; margin-left: 0.375rem; border-left: 1px solid var(--ngaf-chat-separator); max-height: 250px; overflow: auto`. +- States: `running` adds `ngaf-chat-pulse` to label; `done` shows muted check; `error` switches to error-color text + icon. No outer border, no background fill. + +Inputs: +- `expanded: WritableSignal` — defaults `false`; auto-opens to `true` on `state="running"`; auto-collapses 200ms after transitioning to `done`. +- `state: 'pending' | 'running' | 'done' | 'error'`. + +#### Tool calls +`` renders ``: +- Label: tool icon + monospace `{toolName}` + status word. +- Expanded: stacked `Inputs` / `Output` sections, each with 11px UPPERCASE label, `
` body using `--ngaf-chat-font-mono` and `--ngaf-chat-font-size-xs`, `whitespace: pre-wrap`. No background fill.
+
+`` headless primitive renders one card per tool call by default.
+
+In assistant turns containing `tool_use` blocks, traces stack **above** the markdown body, inside the assistant message wrapper.
+
+#### Subagents
+`` renders ``:
+- Label: agent icon + "Subagent" + monospace tool-call id chip + status pill.
+- Pill colors: pending=neutral, running=warning + pulse, complete=success, error=error.
+- Expanded: message count line + "Latest message" block matching tool-call layout.
+
+`` headless primitive default-renders these cards.
+
+Active (non-complete, non-error) subagents render stacked above the assistant turn currently producing them.
+
+#### Timeline
+`` becomes a vertical history walk:
+- Each checkpoint = a ``-shaped entry: chevron + timestamp + short summary, indented continuation showing state diff when expanded.
+- A single shared left-border runs through all checkpoints (container `border-left`).
+- Active checkpoint: primary-color chevron + bold label.
+- Hover/click emits `checkpointSelected`.
+- Optional 32px footer below the list with text-button controls (jump-to-latest, replay).
+- Horizontal-slider variant **dropped**.
+
+#### Thread list
+`` data API kept; default projected template restyled:
+- 36px row, `padding: 8px 12px; border-radius: var(--ngaf-chat-radius-button); cursor: pointer`.
+- Active: `background: var(--ngaf-chat-surface-alt); font-weight: 500`.
+- Hover: `background: color-mix(in srgb, var(--ngaf-chat-text) 5%, transparent)`.
+- Single-line ellipsis. No outer borders, no chevrons.
+- Optional "+ New thread" button at top: full-width, dashed border, primary-color text, hover-fills.
+
+In ``, optional collapsed thread-list slot (above the message body), labeled "Threads ▾".
+
+#### Interrupt panel
+`` becomes a content card matching trace aesthetic:
+- `--ngaf-chat-warning-bg`, `border-left: 3px solid var(--ngaf-chat-warning-text)`, `padding: 12px 16px; border-radius: var(--ngaf-chat-radius-card)`.
+- Title row: warning icon + "Agent paused" + dismiss-X.
+- Body: interrupt prompt.
+- Action row: content-projected buttons (Resume / Cancel defaults).
+
+#### Debug composition
+`` keeps its public surface. Inner cards (`debug-checkpoint-card`, `debug-controls`, `debug-detail`, `debug-state-diff`, `debug-state-inspector`, `debug-summary`, `debug-timeline`) all rewritten to use trace pattern + new tokens. Tailwind utility classes removed throughout.
+
+### Migration & downstream updates
+
+#### Version
+`@ngaf/chat@0.0.3` (patch only, per project policy). Other libs only bump if their source changed.
+
+#### Public API breaking changes (changelog)
+- `` template/visual API changed: no avatar slot; asymmetric message layout; slot names `chatEmptyState` / `chatMessageControls`.
+- `` selector + `ChatMessagesComponent` class renamed to `` / `ChatMessageListComponent`. Old name removed.
+- `` template restyled (visual change only, no API change).
+- `chat-timeline-slider` — horizontal-slider input/output API removed; vertical only.
+- `CHAT_THEME_STYLES` and `CHAT_MARKDOWN_STYLES` removed from public API. Migration: override `--ngaf-chat-*` custom properties or `import '@ngaf/chat/chat.css'`.
+- All Tailwind utility classes removed from chat output. Consumers without Tailwind setup (which were already broken on 0.0.2) now render correctly.
+
+#### Cockpit demos updated (19)
+- `cockpit/chat/{messages,input,threads,tool-calls,subagents,timeline,interrupts,theming,debug,generative-ui,a2ui}/angular`
+- `cockpit/langgraph/{streaming,persistence,memory,interrupts,durable-execution,time-travel,subgraphs,deployment-runtime}/angular`
+
+For each: replace Tailwind classes in local templates, swap `` → ``, drop dependence on `CHAT_THEME_STYLES` / `CHAT_MARKDOWN_STYLES`, regenerate any demo screenshots referenced by the website.
+
+#### libs/example-layouts
+- `example-chat-layout.component` and `example-split-layout.component` rewritten: Tailwind classes (`flex flex-col md:flex-row`, `border-gray-800`, `w-72`) replaced with hand-written CSS in `styles`, using `--ngaf-chat-*` tokens for colors/borders.
+
+#### Smoke app + PR #157 docs revert
+- The Tailwind-required documentation added in PR #157 is **superseded** by this redesign. As part of this work:
+  - Revert `apps/website/content/docs/chat/getting-started/installation.mdx` Tailwind section.
+  - Revert quickstart.mdx Tailwind step.
+  - New installation.mdx flow: `npm install @ngaf/chat`. Done.
+  - Optional consumer step: `import '@ngaf/chat/chat.css'` in global styles.
+
+#### Website docs
+- `getting-started/installation.mdx` — remove Tailwind section; add Theming section (CSS custom properties + optional global stylesheet).
+- `getting-started/quickstart.mdx` — remove Tailwind step.
+- `guides/theming.mdx` — rewrite to document `--ngaf-chat-*` tokens, light/dark modes, attribute override, optional layer-3 stylesheet.
+- Component reference pages — regenerated to match new APIs.
+- New pages: `components/chat-popup.mdx`, `components/chat-sidebar.mdx`, `components/chat-trace.mdx`, `guides/layout-modes.mdx`.
+
+#### Tests
+- All `*.component.spec.ts` for restructured/renamed components updated. Visual specs (computed style assertions) refreshed against new tokens.
+- New specs: ``, ``, ``, ``, asymmetric message templates.
+- Conformance tests against the public chat API kept passing.
+- `cockpit/chat/footprint.spec.ts` and `cockpit/chat/matrix.spec.ts` updated.
+
+## Risks & mitigations
+
+| Risk | Mitigation |
+|---|---|
+| Breaking-change blast radius across 19 demos + docs + tests is large; high merge-conflict risk if work is split. | Land as a single coordinated PR. Sequence within the PR: tokens → primitives → compositions → demos → docs. |
+| Removing Tailwind from chat library means cockpit demos that *also* use Tailwind elsewhere keep working, but `libs/example-layouts` cannot rely on Tailwind anymore. | `example-layouts` is the only remaining Tailwind-heavy first-party consumer; rewriting both layouts in the same PR contains the change. |
+| CSS custom property `--ngaf-chat-*` rename breaks any consumer overriding `--chat-*` from 0.0.2. | Document in changelog. Consumers running on 0.0.2 had a broken render anyway; this is a real but low-cost rename. |
+| Asymmetric message layout removes the assistant avatar consumers may expect. | Documented behavior change. Avatar can be re-added by a consumer via the `chatMessageControls` / `chatEmptyState` slots if needed. |
+| The new `chat-trace` indented-content pattern may not handle very long tool outputs gracefully. | Content has `max-height: 250px` and internal scroll, matching copilotkit. |
+| `field-sizing: content` for textarea autosize lacks support in older browsers. | JS fallback observing scrollHeight is part of the input rewrite. |
+
+## Out of scope (explicit)
+
+- Voice / push-to-talk (CSS hooks only, no integration).
+- Attachments upload pipeline (UI scaffold only).
+- Smart suggestion auto-generation.
+- Code-block syntax highlighting beyond base styling + copy button.
+- RTL layout support.
+- Header chrome beyond title + close-X.
+- Modifying the minting service (proprietary, excluded).
+
+## Approval gate
+
+Once this spec is approved, hand off to the `superpowers:writing-plans` skill to produce the implementation plan. The plan will sequence the work as: design tokens → primitive rewrites → composition rewrites → cockpit demo updates → docs → tests → release notes.
diff --git a/libs/chat/ng-package.json b/libs/chat/ng-package.json
index 738d653d4..7f50f48d1 100644
--- a/libs/chat/ng-package.json
+++ b/libs/chat/ng-package.json
@@ -3,5 +3,9 @@
   "dest": "../../dist/libs/chat",
   "lib": {
     "entryFile": "src/public-api.ts"
-  }
+  },
+  "allowedNonPeerDependencies": [],
+  "assets": [
+    { "input": "src/lib/styles", "glob": "chat.css", "output": "." }
+  ]
 }
diff --git a/libs/chat/package.json b/libs/chat/package.json
index c0a267691..4a39e2f34 100644
--- a/libs/chat/package.json
+++ b/libs/chat/package.json
@@ -1,6 +1,17 @@
 {
   "name": "@ngaf/chat",
-  "version": "0.0.2",
+  "version": "0.0.3",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ngaf-chat.mjs"
+    },
+    "./testing": {
+      "types": "./testing.d.ts",
+      "default": "./fesm2022/ngaf-chat-testing.mjs"
+    },
+    "./chat.css": "./chat.css"
+  },
   "peerDependencies": {
     "@angular/core": "^20.0.0 || ^21.0.0",
     "@angular/common": "^20.0.0 || ^21.0.0",
diff --git a/libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts b/libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts
index f21b2bba6..574beecb3 100644
--- a/libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts
+++ b/libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts
@@ -12,14 +12,14 @@ import {
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import type { AgentWithHistory } from '../../agent';
-import { ChatMessagesComponent } from '../../primitives/chat-messages/chat-messages.component';
-import { MessageTemplateDirective } from '../../primitives/chat-messages/message-template.directive';
+import { ChatMessageListComponent } from '../../primitives/chat-message-list/chat-message-list.component';
+import { MessageTemplateDirective } from '../../primitives/chat-message-list/message-template.directive';
 import { ChatInputComponent } from '../../primitives/chat-input/chat-input.component';
 import { ChatTypingIndicatorComponent } from '../../primitives/chat-typing-indicator/chat-typing-indicator.component';
 import { ChatErrorComponent } from '../../primitives/chat-error/chat-error.component';
 import { messageContent } from '../shared/message-utils';
-import { CHAT_THEME_STYLES } from '../../styles/chat-theme';
-import { CHAT_MARKDOWN_STYLES, renderMarkdown } from '../../styles/chat-markdown';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { renderMarkdown } from '../../streaming/markdown-render';
 import { DebugTimelineComponent } from './debug-timeline.component';
 import { DebugDetailComponent } from './debug-detail.component';
 import { DebugControlsComponent } from './debug-controls.component';
@@ -31,7 +31,7 @@ import { toDebugCheckpoint, extractStateValues } from './debug-utils';
   selector: 'chat-debug',
   standalone: true,
   imports: [
-    ChatMessagesComponent,
+    ChatMessageListComponent,
     MessageTemplateDirective,
     ChatInputComponent,
     ChatTypingIndicatorComponent,
@@ -42,40 +42,233 @@ import { toDebugCheckpoint, extractStateValues } from './debug-utils';
     DebugSummaryComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: [CHAT_THEME_STYLES, CHAT_MARKDOWN_STYLES],
+  styles: [
+    CHAT_HOST_TOKENS,
+    `
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+      background: var(--ngaf-chat-bg);
+    }
+
+    /* Layout */
+    .chat-debug__layout { display: flex; height: 100%; }
+
+    /* Chat column */
+    .chat-debug__chat { display: flex; flex-direction: column; flex: 1; min-width: 0; }
+    .chat-debug__messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--ngaf-chat-space-6) var(--ngaf-chat-space-5);
+    }
+    .chat-debug__messages-inner {
+      max-width: var(--ngaf-chat-max-width);
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      gap: var(--ngaf-chat-space-5);
+    }
+
+    /* Message templates */
+    .chat-debug__msg-human { display: flex; justify-content: flex-end; }
+    .chat-debug__msg-human__bubble {
+      max-width: 75%;
+      padding: 10px 16px;
+      font-size: var(--ngaf-chat-font-size);
+      line-height: var(--ngaf-chat-line-height);
+      word-break: break-words;
+      border-radius: var(--ngaf-chat-radius-bubble) var(--ngaf-chat-radius-bubble) 6px var(--ngaf-chat-radius-bubble);
+      background: var(--ngaf-chat-surface-alt);
+      color: var(--ngaf-chat-text);
+      border: 1px solid var(--ngaf-chat-separator);
+    }
+
+    .chat-debug__msg-ai { display: flex; gap: 12px; }
+    .chat-debug__msg-ai__avatar {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--ngaf-chat-font-size-xs);
+      font-weight: 600;
+      flex-shrink: 0;
+      margin-top: 2px;
+      border-radius: 8px;
+      background: var(--ngaf-chat-surface-alt);
+      color: var(--ngaf-chat-text-muted);
+    }
+    .chat-debug__msg-ai__content {
+      flex: 1;
+      min-width: 0;
+      word-break: break-words;
+      font-size: var(--ngaf-chat-font-size);
+      line-height: var(--ngaf-chat-line-height);
+      color: var(--ngaf-chat-text);
+    }
+
+    .chat-debug__msg-tool {
+      padding: 10px 14px;
+      font-family: var(--ngaf-chat-font-mono);
+      font-size: 13px;
+      word-break: break-words;
+      white-space: pre-wrap;
+      border-radius: var(--ngaf-chat-radius-card);
+      border: 1px solid var(--ngaf-chat-separator);
+      background: var(--ngaf-chat-surface-alt);
+      color: var(--ngaf-chat-text);
+    }
+
+    .chat-debug__msg-system { display: flex; justify-content: center; }
+    .chat-debug__msg-system__text {
+      font-size: var(--ngaf-chat-font-size-xs);
+      font-style: italic;
+      color: var(--ngaf-chat-text-muted);
+    }
+
+    /* Input bar */
+    .chat-debug__input-bar {
+      border-top: 1px solid var(--ngaf-chat-separator);
+      padding: var(--ngaf-chat-space-4) var(--ngaf-chat-space-5);
+    }
+    .chat-debug__input-inner {
+      max-width: var(--ngaf-chat-max-width);
+      margin: 0 auto;
+    }
+
+    /* Debug panel toggle */
+    .chat-debug__toggle-btn {
+      width: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      border-left: 1px solid var(--ngaf-chat-separator);
+      cursor: pointer;
+      transition: background 150ms ease;
+      background: var(--ngaf-chat-surface-alt);
+      color: var(--ngaf-chat-text-muted);
+    }
+    .chat-debug__toggle-btn:hover {
+      background: color-mix(in srgb, var(--ngaf-chat-text) 5%, transparent);
+    }
+
+    /* Debug panel */
+    .chat-debug__panel {
+      width: 320px;
+      border-left: 1px solid var(--ngaf-chat-separator);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      flex-shrink: 0;
+      background: var(--ngaf-chat-bg);
+    }
+    .chat-debug__panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--ngaf-chat-separator);
+    }
+    .chat-debug__panel-title {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin: 0;
+      color: var(--ngaf-chat-text-muted);
+    }
+    .chat-debug__panel-close {
+      font-size: var(--ngaf-chat-font-size-xs);
+      background: transparent;
+      border: 0;
+      cursor: pointer;
+      color: var(--ngaf-chat-text-muted);
+      transition: color 150ms ease;
+    }
+    .chat-debug__panel-close:hover { color: var(--ngaf-chat-text); }
+
+    .chat-debug__panel-section {
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--ngaf-chat-separator);
+    }
+    .chat-debug__panel-timeline {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 12px;
+    }
+    .chat-debug__panel-detail {
+      border-top: 1px solid var(--ngaf-chat-separator);
+      padding: 8px 12px;
+      max-height: 256px;
+      overflow-y: auto;
+    }
+
+    /* Markdown rendering */
+    :host ::ng-deep .chat-md p { margin: 0 0 0.75em; }
+    :host ::ng-deep .chat-md p:last-child { margin-bottom: 0; }
+    :host ::ng-deep .chat-md code {
+      background: var(--ngaf-chat-surface-alt);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 0.875em;
+      font-family: var(--ngaf-chat-font-mono);
+    }
+    :host ::ng-deep .chat-md pre {
+      background: var(--ngaf-chat-surface-alt);
+      padding: 12px 16px;
+      border-radius: var(--ngaf-chat-radius-card);
+      overflow-x: auto;
+      margin: 0.75em 0;
+    }
+    :host ::ng-deep .chat-md pre code { background: none; padding: 0; }
+    :host ::ng-deep .chat-md ul, :host ::ng-deep .chat-md ol { margin: 0.5em 0; padding-left: 1.5em; }
+    :host ::ng-deep .chat-md li { margin: 0.25em 0; }
+    :host ::ng-deep .chat-md a { color: var(--ngaf-chat-text); text-decoration: underline; }
+    :host ::ng-deep .chat-md strong { font-weight: 600; }
+    :host ::ng-deep .chat-md blockquote {
+      border-left: 3px solid var(--ngaf-chat-separator);
+      padding-left: 12px;
+      margin: 0.75em 0;
+      color: var(--ngaf-chat-text-muted);
+    }
+    :host ::ng-deep .chat-md h1, :host ::ng-deep .chat-md h2, :host ::ng-deep .chat-md h3, :host ::ng-deep .chat-md h4 { margin: 1em 0 0.5em; font-weight: 600; }
+    :host ::ng-deep .chat-md h1 { font-size: 1.25em; }
+    :host ::ng-deep .chat-md h2 { font-size: 1.125em; }
+    :host ::ng-deep .chat-md h3 { font-size: 1em; }
+    :host ::ng-deep .chat-md table { border-collapse: collapse; width: 100%; margin: 0.75em 0; }
+    :host ::ng-deep .chat-md th, :host ::ng-deep .chat-md td { border: 1px solid var(--ngaf-chat-separator); padding: 6px 12px; text-align: left; }
+    :host ::ng-deep .chat-md th { background: var(--ngaf-chat-surface-alt); font-weight: 600; font-size: 0.875em; }
+    `,
+  ],
   template: `
-    

+    

       
-      

+      

         

-          

-            
+          

+            
               
               
-                

-                  
{{ messageContent(message) }}

+                

+                  
{{ messageContent(message) }}

                 

               
 
               
               
-                

-                  
A

+                

+                  
A

                   

                 

@@ -83,21 +276,16 @@ import { toDebugCheckpoint, extractStateValues } from './debug-utils';
 
               
               
-                
{{ messageContent(message) }}

+                
{{ messageContent(message) }}

               
 
               
               
-                

-                  
-                    {{ messageContent(message) }}
-                  
+                

+                  {{ messageContent(message) }}
                 

               
-            
+            
 
             
           

@@ -106,8 +294,8 @@ import { toDebugCheckpoint, extractStateValues } from './debug-utils';
         
 
         
-        

-          

+        

+          

             
       @if (!debugOpen()) {
         
           

 
           
-          

+          

             
           

 
           
-          

+          

             
 
           
-          

+          

             
           @if (selectedCheckpointIndex() >= 0) {
-            

+            

               
-      

-        {{ checkpoint().node ?? 'Unknown' }}
-      

-      

+      
{{ checkpoint().node ?? 'Unknown' }}

+      

         @if (checkpoint().duration !== null && checkpoint().duration !== undefined) {
-          
-            {{ checkpoint().duration }}ms
-          
+          {{ checkpoint().duration }}ms
         }
         @if (checkpoint().tokenCount !== null && checkpoint().tokenCount !== undefined) {
-          
-            {{ checkpoint().tokenCount }} tok
-          
+          {{ checkpoint().tokenCount }} tok
         }
       

     
diff --git a/libs/chat/src/lib/compositions/chat-debug/debug-controls.component.ts b/libs/chat/src/lib/compositions/chat-debug/debug-controls.component.ts
index 85a766663..7f6ff01f0 100644
--- a/libs/chat/src/lib/compositions/chat-debug/debug-controls.component.ts
+++ b/libs/chat/src/lib/compositions/chat-debug/debug-controls.component.ts
@@ -5,33 +5,61 @@ import {
   output,
   ChangeDetectionStrategy,
 } from '@angular/core';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
 
 @Component({
   selector: 'chat-debug-controls',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [
+    CHAT_HOST_TOKENS,
+    `
+    .debug-controls {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .debug-controls__btn {
+      padding: 4px 8px;
+      font-size: var(--ngaf-chat-font-size-xs);
+      border-radius: 4px;
+      border: 1px solid var(--ngaf-chat-separator);
+      background: var(--ngaf-chat-surface-alt);
+      color: var(--ngaf-chat-text);
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+    .debug-controls__btn:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--ngaf-chat-text) 5%, transparent);
+    }
+    .debug-controls__btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    `,
+  ],
   template: `
-    

+    

       
       
       
       
-          
-          
+        

+          
+          
+          
           
+          >Ignore
         

       

     }
diff --git a/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.spec.ts b/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.spec.ts
new file mode 100644
index 000000000..6aa1cf5e2
--- /dev/null
+++ b/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.spec.ts
@@ -0,0 +1,28 @@
+// libs/chat/src/lib/compositions/chat-popup/chat-popup.component.spec.ts
+// SPDX-License-Identifier: MIT
+import { describe, it, expect } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { ChatPopupComponent } from './chat-popup.component';
+
+describe('ChatPopupComponent', () => {
+  it('class is defined and imports resolve', () => {
+    expect(ChatPopupComponent).toBeDefined();
+    expect(typeof ChatPopupComponent).toBe('function');
+  });
+
+  it('toggle/openWindow/closeWindow flip the open model', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const popup = new ChatPopupComponent();
+      expect(popup.open()).toBe(false);
+      popup.toggle();
+      expect(popup.open()).toBe(true);
+      popup.toggle();
+      expect(popup.open()).toBe(false);
+      popup.openWindow();
+      expect(popup.open()).toBe(true);
+      popup.closeWindow();
+      expect(popup.open()).toBe(false);
+    });
+  });
+});
diff --git a/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts b/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts
new file mode 100644
index 000000000..9fd794c0a
--- /dev/null
+++ b/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts
@@ -0,0 +1,78 @@
+// libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts
+// SPDX-License-Identifier: MIT
+import { Component, ChangeDetectionStrategy, input, model } from '@angular/core';
+import type { Agent } from '../../agent';
+import { ChatComponent } from '../chat/chat.component';
+import { ChatLauncherButtonComponent } from '../../primitives/chat-launcher-button/chat-launcher-button.component';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+
+@Component({
+  selector: 'chat-popup',
+  standalone: true,
+  imports: [ChatComponent, ChatLauncherButtonComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, `
+    :host { position: fixed; bottom: 1rem; right: 1rem; z-index: 30; }
+    .chat-popup__launcher { position: relative; }
+    .chat-popup__window {
+      position: fixed;
+      bottom: 5rem;
+      right: 1rem;
+      width: 24rem;
+      height: 600px;
+      max-height: calc(100vh - 6rem);
+      background: var(--ngaf-chat-bg);
+      border-radius: 0.75rem;
+      box-shadow: 0 5px 40px rgba(0,0,0,.16);
+      transform-origin: bottom right;
+      transform: scale(0.95) translateY(20px);
+      opacity: 0;
+      pointer-events: none;
+      transition: transform 200ms ease-out, opacity 100ms ease-out;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+    .chat-popup__window[data-open="true"] {
+      transform: scale(1) translateY(0);
+      opacity: 1;
+      pointer-events: auto;
+    }
+    @media (max-width: 640px) {
+      .chat-popup__window { inset: 0; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; bottom: auto; right: auto; }
+    }
+    .chat-popup__close {
+      position: absolute; top: 8px; right: 8px;
+      width: 32px; height: 32px;
+      background: transparent; border: 0; cursor: pointer;
+      color: var(--ngaf-chat-text-muted);
+      border-radius: 50%;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .chat-popup__close:hover { background: var(--ngaf-chat-surface-alt); color: var(--ngaf-chat-text); }
+  `],
+  template: `
+    

+      
+    

+    
+  `,
+})
+export class ChatPopupComponent {
+  readonly agent = input.required();
+  readonly open = model(false);
+
+  toggle(): void { this.open.update((v) => !v); }
+  openWindow(): void { this.open.set(true); }
+  closeWindow(): void { this.open.set(false); }
+}
diff --git a/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.spec.ts b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.spec.ts
new file mode 100644
index 000000000..e9759e145
--- /dev/null
+++ b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.spec.ts
@@ -0,0 +1,28 @@
+// libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.spec.ts
+// SPDX-License-Identifier: MIT
+import { describe, it, expect } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { ChatSidebarComponent } from './chat-sidebar.component';
+
+describe('ChatSidebarComponent', () => {
+  it('class is defined and imports resolve', () => {
+    expect(ChatSidebarComponent).toBeDefined();
+    expect(typeof ChatSidebarComponent).toBe('function');
+  });
+
+  it('toggle/openWindow/closeWindow flip the open model', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const sidebar = new ChatSidebarComponent();
+      expect(sidebar.open()).toBe(false);
+      sidebar.toggle();
+      expect(sidebar.open()).toBe(true);
+      sidebar.toggle();
+      expect(sidebar.open()).toBe(false);
+      sidebar.openWindow();
+      expect(sidebar.open()).toBe(true);
+      sidebar.closeWindow();
+      expect(sidebar.open()).toBe(false);
+    });
+  });
+});
diff --git a/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts
new file mode 100644
index 000000000..4cff95c7a
--- /dev/null
+++ b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts
@@ -0,0 +1,72 @@
+// libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts
+// SPDX-License-Identifier: MIT
+import { Component, ChangeDetectionStrategy, input, model } from '@angular/core';
+import type { Agent } from '../../agent';
+import { ChatComponent } from '../chat/chat.component';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+
+@Component({
+  selector: 'chat-sidebar',
+  standalone: true,
+  imports: [ChatComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[attr.data-push]': 'pushContent() ? "true" : "false"',
+    '[attr.data-open]': 'open() ? "true" : "false"',
+  },
+  styles: [CHAT_HOST_TOKENS, `
+    :host { display: block; }
+    .chat-sidebar__content { transition: margin-right 300ms ease; min-height: 100vh; }
+    :host([data-push="true"][data-open="true"]) .chat-sidebar__content { margin-right: 28rem; }
+    @media (max-width: 640px) {
+      :host([data-push="true"][data-open="true"]) .chat-sidebar__content { margin-right: 0; }
+    }
+    .chat-sidebar__panel {
+      position: fixed;
+      top: 0; right: 0; bottom: 0;
+      width: 28rem;
+      background: var(--ngaf-chat-bg);
+      box-shadow: -8px 0 32px rgba(0,0,0,.12);
+      transform: translateX(100%);
+      transition: transform 200ms ease-out;
+      z-index: 30;
+      display: flex;
+      flex-direction: column;
+    }
+    .chat-sidebar__panel[data-open="true"] { transform: translateX(0); }
+    @media (max-width: 640px) {
+      .chat-sidebar__panel { width: 100vw; }
+    }
+    .chat-sidebar__close {
+      position: absolute; top: 8px; right: 8px;
+      width: 32px; height: 32px;
+      background: transparent; border: 0; cursor: pointer;
+      color: var(--ngaf-chat-text-muted);
+      border-radius: 50%; z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .chat-sidebar__close:hover { background: var(--ngaf-chat-surface-alt); color: var(--ngaf-chat-text); }
+  `],
+  template: `
+    

+    
+  `,
+})
+export class ChatSidebarComponent {
+  readonly agent = input.required();
+  readonly open = model(false);
+  readonly pushContent = input(false);
+
+  toggle(): void { this.open.update((v) => !v); }
+  openWindow(): void { this.open.set(true); }
+  closeWindow(): void { this.open.set(false); }
+}
diff --git a/libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.spec.ts b/libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.spec.ts
index c23fa67e2..f18058b90 100644
--- a/libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.spec.ts
+++ b/libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.spec.ts
@@ -11,18 +11,18 @@ describe('ChatSubagentCardComponent', () => {
 
 describe('statusColor', () => {
   it('returns muted style for pending', () => {
-    expect(statusColor('pending')).toContain('var(--chat-text-muted)');
+    expect(statusColor('pending')).toContain('var(--ngaf-chat-text-muted)');
   });
 
   it('returns warning style for running', () => {
-    expect(statusColor('running')).toContain('var(--chat-warning-text)');
+    expect(statusColor('running')).toContain('var(--ngaf-chat-warning-text)');
   });
 
   it('returns success style for complete', () => {
-    expect(statusColor('complete')).toContain('var(--chat-success)');
+    expect(statusColor('complete')).toContain('var(--ngaf-chat-success)');
   });
 
   it('returns error style for error', () => {
-    expect(statusColor('error')).toContain('var(--chat-error-text)');
+    expect(statusColor('error')).toContain('var(--ngaf-chat-error-text)');
   });
 });
diff --git a/libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.ts b/libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.ts
index 05b81a313..8bc41887f 100644
--- a/libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.ts
+++ b/libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.ts
@@ -1,87 +1,89 @@
+// libs/chat/src/lib/compositions/chat-subagent-card/chat-subagent-card.component.ts
 // SPDX-License-Identifier: MIT
-import {
-  Component,
-  computed,
-  input,
-  signal,
-  ChangeDetectionStrategy,
-} from '@angular/core';
+import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';
+import { ChatTraceComponent, type TraceState } from '../../primitives/chat-trace/chat-trace.component';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
 import type { Subagent, SubagentStatus } from '../../agent/subagent';
 
-function statusColor(status: SubagentStatus): string {
+/**
+ * Returns a CSS style string for a subagent's status badge.
+ * Kept exported for backward compatibility with existing consumers; the
+ * preferred way to style status visually is via the `data-status` attribute
+ * + CSS selectors (see component styles below).
+ */
+export function statusColor(status: SubagentStatus): string {
   switch (status) {
-    case 'pending':  return 'background: var(--chat-bg-alt); color: var(--chat-text-muted);';
-    case 'running':  return 'background: var(--chat-warning-bg); color: var(--chat-warning-text);';
-    case 'complete': return 'color: var(--chat-success);';
-    case 'error':    return 'background: var(--chat-error-bg); color: var(--chat-error-text);';
+    case 'pending':  return 'background: var(--ngaf-chat-surface-alt); color: var(--ngaf-chat-text-muted);';
+    case 'running':  return 'background: var(--ngaf-chat-warning-bg); color: var(--ngaf-chat-warning-text);';
+    case 'complete': return 'color: var(--ngaf-chat-success);';
+    case 'error':    return 'background: var(--ngaf-chat-error-bg); color: var(--ngaf-chat-error-text);';
   }
 }
 
-export { statusColor };
+function statusToTraceState(s: SubagentStatus): TraceState {
+  switch (s) {
+    case 'pending':  return 'pending';
+    case 'running':  return 'running';
+    case 'complete': return 'done';
+    case 'error':    return 'error';
+  }
+}
 
 @Component({
   selector: 'chat-subagent-card',
   standalone: true,
+  imports: [ChatTraceComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, `
+    :host { display: block; }
+    .sac__name { color: var(--ngaf-chat-text); font-weight: 500; font-size: var(--ngaf-chat-font-size-sm); }
+    .sac__id { font-family: var(--ngaf-chat-font-mono); font-size: var(--ngaf-chat-font-size-xs); color: var(--ngaf-chat-text-muted); margin-left: 4px; }
+    .sac__pill {
+      padding: 1px 8px;
+      border-radius: 9999px;
+      font-size: 11px;
+      font-weight: 500;
+      margin-left: 4px;
+    }
+    .sac__pill[data-status="pending"] { background: var(--ngaf-chat-surface-alt); color: var(--ngaf-chat-text-muted); }
+    .sac__pill[data-status="running"] { background: var(--ngaf-chat-warning-bg); color: var(--ngaf-chat-warning-text); }
+    .sac__pill[data-status="complete"] { color: var(--ngaf-chat-success); }
+    .sac__pill[data-status="error"] { background: var(--ngaf-chat-error-bg); color: var(--ngaf-chat-error-text); }
+    .sac__count { font-size: var(--ngaf-chat-font-size-xs); color: var(--ngaf-chat-text-muted); }
+    .sac__latest-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ngaf-chat-text-muted); margin: 8px 0 4px; }
+    .sac__latest {
+      font-family: var(--ngaf-chat-font-mono);
+      font-size: var(--ngaf-chat-font-size-xs);
+      color: var(--ngaf-chat-text);
+      white-space: pre-wrap;
+      overflow-x: auto;
+      margin: 0;
+    }
+  `],
   template: `
-    

-      
-      
-
-      
-      @if (expanded()) {
-        

-          
-          

-            {{ subagent().messages().length }} message(s)
-          

-
-          
-          @if (subagent().messages().length > 0) {
-            

-              
Latest Message

-              

-                {{ latestMessageContent() }}
-              

-            

-          }
-        

+    
+      
+        Subagent
+        {{ subagent().toolCallId }}
+        {{ subagent().status() }}
+      
+      
{{ subagent().messages().length }} message(s)

+      @if (subagent().messages().length > 0) {
+        
Latest message

+        
{{ latestMessageContent() }}

       }
-    

+    
   `,
 })
 export class ChatSubagentCardComponent {
   readonly subagent = input.required();
-
-  readonly expanded = signal(false);
-
-
-  readonly statusColor = computed(() => statusColor(this.subagent().status()));
+  readonly state = computed(() => statusToTraceState(this.subagent().status()));
 
   readonly latestMessageContent = computed(() => {
     const messages = this.subagent().messages();
     if (messages.length === 0) return '';
     const last = messages[messages.length - 1];
-    const content = last.content;
-    if (typeof content === 'string') return content;
-    return JSON.stringify(content);
+    const c = last.content;
+    return typeof c === 'string' ? c : JSON.stringify(c);
   });
 }
diff --git a/libs/chat/src/lib/compositions/chat-timeline-slider/chat-timeline-slider.component.ts b/libs/chat/src/lib/compositions/chat-timeline-slider/chat-timeline-slider.component.ts
index c932bccb6..f0a1a45b0 100644
--- a/libs/chat/src/lib/compositions/chat-timeline-slider/chat-timeline-slider.component.ts
+++ b/libs/chat/src/lib/compositions/chat-timeline-slider/chat-timeline-slider.component.ts
@@ -1,63 +1,148 @@
+// libs/chat/src/lib/compositions/chat-timeline-slider/chat-timeline-slider.component.ts
 // SPDX-License-Identifier: MIT
 import {
   Component, computed, input, output, signal,
   ChangeDetectionStrategy,
 } from '@angular/core';
 import type { AgentWithHistory, AgentCheckpoint } from '../../agent';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
 
 @Component({
   selector: 'chat-timeline-slider',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, `
+    :host { display: block; padding: var(--ngaf-chat-space-2); }
+    .timeline-slider__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 var(--ngaf-chat-space-1) var(--ngaf-chat-space-2);
+    }
+    .timeline-slider__title {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--ngaf-chat-text-muted);
+      margin: 0;
+    }
+    .timeline-slider__count {
+      font-size: var(--ngaf-chat-font-size-xs);
+      color: var(--ngaf-chat-text-muted);
+    }
+    .timeline-slider__empty {
+      text-align: center;
+      padding: var(--ngaf-chat-space-4);
+      color: var(--ngaf-chat-text-muted);
+      font-size: var(--ngaf-chat-font-size-xs);
+    }
+    .timeline-slider__list {
+      list-style: none;
+      padding-left: 12px;
+      margin: 0;
+      border-left: 1px solid var(--ngaf-chat-separator);
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .timeline-slider__entry {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 8px;
+      margin-left: -1px;
+      border-left: 2px solid transparent;
+      border-radius: var(--ngaf-chat-radius-button);
+      cursor: default;
+      color: var(--ngaf-chat-text-muted);
+      font-size: var(--ngaf-chat-font-size-sm);
+      transition: background 150ms ease;
+    }
+    .timeline-slider__entry:hover { background: color-mix(in srgb, var(--ngaf-chat-text) 5%, transparent); }
+    .timeline-slider__entry[data-active="true"] {
+      border-left-color: var(--ngaf-chat-primary);
+      color: var(--ngaf-chat-text);
+    }
+    .timeline-slider__index {
+      width: 22px;
+      height: 22px;
+      border-radius: 9999px;
+      background: var(--ngaf-chat-surface-alt);
+      color: var(--ngaf-chat-text-muted);
+      font-size: 11px;
+      font-weight: 600;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .timeline-slider__entry[data-active="true"] .timeline-slider__index {
+      background: var(--ngaf-chat-primary);
+      color: var(--ngaf-chat-on-primary);
+    }
+    .timeline-slider__body { flex: 1; min-width: 0; }
+    .timeline-slider__label {
+      font-weight: 500;
+      color: var(--ngaf-chat-text);
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: var(--ngaf-chat-font-size-sm);
+    }
+    .timeline-slider__id {
+      font-family: var(--ngaf-chat-font-mono);
+      font-size: 11px;
+      color: var(--ngaf-chat-text-muted);
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .timeline-slider__actions { display: flex; gap: 4px; flex-shrink: 0; }
+    .timeline-slider__btn {
+      padding: 2px 8px;
+      font-size: var(--ngaf-chat-font-size-xs);
+      border-radius: var(--ngaf-chat-radius-button);
+      background: var(--ngaf-chat-surface-alt);
+      color: var(--ngaf-chat-text);
+      border: 0;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+    .timeline-slider__btn:hover { background: color-mix(in srgb, var(--ngaf-chat-text) 8%, transparent); }
+  `],
   template: `
-    

-      

-        
Timeline

-        {{ history().length }} checkpoint(s)
-      

-
-      @if (history().length === 0) {
-        
No checkpoints yet.

-      }
+    

+      
Timeline

+      {{ history().length }} checkpoint(s)
+    

 
-      

+    @if (history().length === 0) {
+      
No checkpoints yet.

+    } @else {
+      
    
         @for (cp of history(); track $index; let i = $index) {
-          
    
-            
-              {{ i + 1 }}
-            
-
-            
    
-              
    
-                {{ cp.label ?? 'Step ' + (i + 1) }}
-              
    
+            {{ i + 1 }}
+            
    
+              
    {{ cp.label ?? 'Step ' + (i + 1) }}
    
               @if (cp.id) {
-                
    {{ cp.id }}
    
+                
    {{ cp.id }}
    
               }
             
    
-
-            
    
-              
-              
+            
    
+              
+              
             
    
-          
    
+          
         }
-      
    
-    
    
+      

+    }
   `,
 })
 export class ChatTimelineSliderComponent {
diff --git a/libs/chat/src/lib/compositions/chat-tool-call-card/chat-tool-call-card.component.ts b/libs/chat/src/lib/compositions/chat-tool-call-card/chat-tool-call-card.component.ts
index e4c074612..13d0ad6cd 100644
--- a/libs/chat/src/lib/compositions/chat-tool-call-card/chat-tool-call-card.component.ts
+++ b/libs/chat/src/lib/compositions/chat-tool-call-card/chat-tool-call-card.component.ts
@@ -1,10 +1,8 @@
+// libs/chat/src/lib/compositions/chat-tool-call-card/chat-tool-call-card.component.ts
 // SPDX-License-Identifier: MIT
-import {
-  Component,
-  input,
-  signal,
-  ChangeDetectionStrategy,
-} from '@angular/core';
+import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';
+import { ChatTraceComponent, type TraceState } from '../../primitives/chat-trace/chat-trace.component';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
 
 export interface ToolCallInfo {
   id: string;
@@ -16,57 +14,67 @@ export interface ToolCallInfo {
 @Component({
   selector: 'chat-tool-call-card',
   standalone: true,
+  imports: [ChatTraceComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, `
+    :host { display: block; }
+    .tcc__name { font-family: var(--ngaf-chat-font-mono); color: var(--ngaf-chat-text); }
+    .tcc__status { font-size: var(--ngaf-chat-font-size-xs); margin-left: 4px; }
+    .tcc__status[data-state="done"] { color: var(--ngaf-chat-success); }
+    .tcc__status[data-state="error"] { color: var(--ngaf-chat-error-text); }
+    .tcc__section { padding: 8px 0; }
+    .tcc__section + .tcc__section { border-top: 1px solid var(--ngaf-chat-separator); }
+    .tcc__section-label {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--ngaf-chat-text-muted);
+      margin: 0 0 4px;
+    }
+    .tcc__section-body {
+      font-family: var(--ngaf-chat-font-mono);
+      font-size: var(--ngaf-chat-font-size-xs);
+      color: var(--ngaf-chat-text);
+      white-space: pre-wrap;
+      overflow-x: auto;
+      margin: 0;
+    }
+  `],
   template: `
-    

-      
-      
-
-      
-      @if (expanded()) {
-        

-          

-            
Inputs

-            
{{ formatJson(toolCall().args) }}

-          

-          @if (toolCall().result !== undefined) {
-            

-              
Output

-              
{{ formatJson(toolCall().result) }}

-            

-          }
+    
+      
+        {{ toolCall().name }}
+        @switch (state()) {
+          @case ('done') { done }
+          @case ('error') { error }
+          @case ('running') { running… }
+        }
+      
+      

+        
Inputs

+        
{{ formatJson(toolCall().args) }}

+      

+      @if (toolCall().result !== undefined) {
+        

+          
Output

+          
{{ formatJson(toolCall().result) }}

         

       }
-    

+    
   `,
 })
 export class ChatToolCallCardComponent {
   readonly toolCall = input.required();
 
-  readonly expanded = signal(false);
-
+  readonly state = computed(() => {
+    const tc = this.toolCall();
+    if (tc.result !== undefined) return 'done';
+    return 'running';
+  });
 
   formatJson(value: unknown): string {
     if (typeof value === 'string') return value;
-    try {
-      return JSON.stringify(value, null, 2);
-    } catch {
-      return String(value);
-    }
+    try { return JSON.stringify(value, null, 2); } catch { return String(value); }
   }
 }
diff --git a/libs/chat/src/lib/compositions/chat/chat.component.spec.ts b/libs/chat/src/lib/compositions/chat/chat.component.spec.ts
index 0b04e5d70..b661f3445 100644
--- a/libs/chat/src/lib/compositions/chat/chat.component.spec.ts
+++ b/libs/chat/src/lib/compositions/chat/chat.component.spec.ts
@@ -120,6 +120,30 @@ describe('ChatComponent — content classification', () => {
   });
 });
 
+describe('ChatComponent — prevRole', () => {
+  it('prevRole(0) returns undefined for the first message', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      // prevRole at index 0 should always return undefined (no previous message)
+      // We test the logic directly, mirroring the implementation.
+      function prevRole(index: number, messages: Array<{ role?: string }>): string | undefined {
+        if (index === 0) return undefined;
+        const prev = messages[index - 1];
+        if (!prev) return undefined;
+        const role = (prev as unknown as { role?: string }).role;
+        if (role === 'user') return 'user';
+        if (role === 'assistant') return 'assistant';
+        if (role === 'system') return 'system';
+        if (role === 'tool') return 'tool';
+        return undefined;
+      }
+      expect(prevRole(0, [{ role: 'user' }])).toBeUndefined();
+      expect(prevRole(1, [{ role: 'user' }, { role: 'assistant' }])).toBe('user');
+      expect(prevRole(2, [{ role: 'user' }, { role: 'assistant' }, { role: 'user' }])).toBe('assistant');
+    });
+  });
+});
+
 describe('ChatComponent — events$ routing', () => {
   // Angular 21 zoneless mode (ZONELESS_ENABLED defaults to true) means
   // ComponentFixture.autoDetect cannot be disabled, making createComponent
diff --git a/libs/chat/src/lib/compositions/chat/chat.component.ts b/libs/chat/src/lib/compositions/chat/chat.component.ts
index 45b31cc39..de94d7372 100644
--- a/libs/chat/src/lib/compositions/chat/chat.component.ts
+++ b/libs/chat/src/lib/compositions/chat/chat.component.ts
@@ -1,247 +1,171 @@
 // libs/chat/src/lib/compositions/chat/chat.component.ts
 // SPDX-License-Identifier: MIT
 import {
-  Component,
-  input,
-  output,
-  signal,
-  computed,
-  effect,
-  viewChild,
-  ElementRef,
-  ChangeDetectionStrategy,
-  DestroyRef,
-  inject,
+  Component, ChangeDetectionStrategy, input, output, computed, effect, viewChild, ElementRef,
+  DestroyRef, inject,
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { KeyValuePipe } from '@angular/common';
 import type { Agent } from '../../agent';
 import type { ViewRegistry, RenderEvent } from '@ngaf/render';
 import type { A2uiActionMessage } from '@ngaf/a2ui';
 import type { StateStore } from '@json-render/core';
-import { ChatMessagesComponent } from '../../primitives/chat-messages/chat-messages.component';
-import { MessageTemplateDirective } from '../../primitives/chat-messages/message-template.directive';
+import { toRenderRegistry, signalStateStore } from '@ngaf/render';
+import { ChatWindowComponent } from '../../primitives/chat-window/chat-window.component';
+import { ChatMessageListComponent } from '../../primitives/chat-message-list/chat-message-list.component';
+import { MessageTemplateDirective } from '../../primitives/chat-message-list/message-template.directive';
+import { ChatMessageComponent, type ChatMessageRole } from '../../primitives/chat-message/chat-message.component';
 import { ChatInputComponent } from '../../primitives/chat-input/chat-input.component';
 import { ChatTypingIndicatorComponent } from '../../primitives/chat-typing-indicator/chat-typing-indicator.component';
 import { ChatErrorComponent } from '../../primitives/chat-error/chat-error.component';
 import { ChatInterruptComponent } from '../../primitives/chat-interrupt/chat-interrupt.component';
-import { ChatThreadListComponent, Thread } from '../../primitives/chat-thread-list/chat-thread-list.component';
+import { ChatThreadListComponent, type Thread } from '../../primitives/chat-thread-list/chat-thread-list.component';
 import { ChatGenerativeUiComponent } from '../../primitives/chat-generative-ui/chat-generative-ui.component';
-import { toRenderRegistry, signalStateStore } from '@ngaf/render';
-import { createContentClassifier, type ContentClassifier } from '../../streaming/content-classifier';
-import { messageContent } from '../shared/message-utils';
-import { CHAT_THEME_STYLES } from '../../styles/chat-theme';
-import { CHAT_MARKDOWN_STYLES } from '../../styles/chat-markdown';
 import { ChatStreamingMdComponent } from '../../streaming/streaming-markdown.component';
+import { ChatToolCallsComponent } from '../../primitives/chat-tool-calls/chat-tool-calls.component';
+import { ChatSubagentsComponent } from '../../primitives/chat-subagents/chat-subagents.component';
 import { A2uiSurfaceComponent } from '../../a2ui/surface.component';
+import { createContentClassifier, type ContentClassifier } from '../../streaming/content-classifier';
+import { messageContent } from '../shared/message-utils';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
 import type { ChatRenderEvent } from './chat-render-event';
-import { KeyValuePipe } from '@angular/common';
 
 @Component({
   selector: 'chat',
   standalone: true,
   imports: [
-    ChatMessagesComponent,
-    MessageTemplateDirective,
-    ChatInputComponent,
-    ChatTypingIndicatorComponent,
-    ChatErrorComponent,
-    ChatInterruptComponent,
-    ChatThreadListComponent,
-    ChatGenerativeUiComponent,
-    ChatStreamingMdComponent,
-    A2uiSurfaceComponent,
     KeyValuePipe,
+    ChatWindowComponent, ChatMessageListComponent, MessageTemplateDirective, ChatMessageComponent,
+    ChatInputComponent, ChatTypingIndicatorComponent, ChatErrorComponent, ChatInterruptComponent,
+    ChatThreadListComponent, ChatGenerativeUiComponent,
+    ChatStreamingMdComponent, ChatToolCallsComponent, ChatSubagentsComponent, A2uiSurfaceComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: [CHAT_THEME_STYLES, CHAT_MARKDOWN_STYLES],
+  styles: [CHAT_HOST_TOKENS, `
+    :host { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ngaf-chat-bg); }
+    .chat-shell { display: flex; flex: 1; min-height: 0; }
+    .chat-shell__sidebar {
+      width: 240px;
+      flex-shrink: 0;
+      border-right: 1px solid var(--ngaf-chat-separator);
+      background: var(--ngaf-chat-surface-alt);
+      overflow-y: auto;
+      display: none;
+    }
+    @media (min-width: 768px) { .chat-shell__sidebar { display: block; } }
+    .chat-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
+    .chat-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      padding: 60px 20px;
+      color: var(--ngaf-chat-text-muted);
+      text-align: center;
+    }
+    .chat-empty__title { font-size: 1.125rem; font-weight: 500; color: var(--ngaf-chat-text); margin: 0; }
+    .chat-empty__sub { margin: 0; font-size: var(--ngaf-chat-font-size-sm); }
+    .chat-scroll { flex: 1; min-height: 0; overflow-y: auto; }
+    .chat-scroll::-webkit-scrollbar { width: 6px; }
+    .chat-scroll::-webkit-scrollbar-thumb { background: var(--ngaf-chat-separator); border-radius: 10px; }
+  `],
   template: `
-    

-      
+    

       @if (threads().length > 0) {
-        
+          />
+        
       }
-
-      
-      

-        
-        

-          

+      

+        
+          
+          

             @if (agent().messages().length === 0 && !agent().isLoading()) {
-              
-              

-                
A

-                
Send a message to start a conversation.

+              

+                
               

             }
 
-            
-              
-              
-                

-                  
{{ messageContent(message) }}

-                

+            
+              
+                {{ messageContent(message) }}
               
 
-              
-              
+              
                 @let content = messageContent(message);
-                @let classified = classifyMessage(content, index);
-                

-                  
A

-                  

-                    @if (classified.markdown(); as md) {
-                      
-                    }
-
-                    @if (classified.spec(); as spec) {
-                      
+                  
+                  
+                  @if (classified.markdown(); as md) {
+                    
+                  }
+                  @if (classified.spec(); as spec) {
+                    
+                  }
+                  @if (classified.type() === 'a2ui' && views(); as catalog) {
+                    @for (entry of classified.a2uiSurfaces() | keyvalue; track entry.key) {
+                      
                     }
-
-                    @if (classified.type() === 'a2ui') {
-                      @if (views(); as catalog) {
-                        @for (entry of classified.a2uiSurfaces() | keyvalue; track entry.key) {
-                          
-                        }
-                      }
-                    }
-                  

-                

+                  }
+                
               
 
-              
               
-                
{{ messageContent(message) }}

+                
               
 
-              
               
-                

-                  
-                    {{ messageContent(message) }}
-                  
-                

+                {{ messageContent(message) }}
               
-            
+            
 
             
           

-        

-
-        
-        @if (agent().interrupt) {
-          
-            
-              

-                
Agent paused: {{ interrupt.value }}

-              

-            
-          
-        }
-
-        
-        

-          
-        

-
-        
-        

-          

-            
+          

+            
+            
+            
           

-        

+        
       

     

   `,
 })
 export class ChatComponent {
-
   readonly agent = input.required();
-
   readonly views = input(undefined);
   readonly store = input(undefined);
   readonly handlers = input) => unknown | Promise>>({});
   readonly threads = input([]);
   readonly activeThreadId = input('');
   readonly threadSelected = output();
-  readonly sidebarOpen = signal(false);
-
   readonly renderEvent = output();
 
-
   private readonly _internalStore = signalStateStore({});
-
-  /**
-   * Resolved store: use the explicitly provided store input, or fall back to
-   * an internal store when `views` are provided (generative-ui use case).
-   */
   readonly resolvedStore = computed(() => {
     const explicit = this.store();
     if (explicit) return explicit;
@@ -249,38 +173,25 @@ export class ChatComponent {
     return undefined;
   });
 
-  private readonly destroyRef = inject(DestroyRef);
-  private eventsSubscribed = false;
-
-  private readonly classifiers = new Map();
-
-  /** Convert ViewRegistry → AngularRegistry for ChatGenerativeUiComponent. */
   readonly renderRegistry = computed(() => {
     const v = this.views();
     return v ? toRenderRegistry(v) : undefined;
   });
 
   readonly messageContent = messageContent;
+  private readonly classifiers = new Map();
+  private readonly destroyRef = inject(DestroyRef);
+  private eventsSubscribed = false;
 
   private readonly scrollContainer = viewChild>('scrollContainer');
-
-  /** Track message count to trigger auto-scroll */
   private readonly messageCount = computed(() => this.agent().messages().length);
-
   private prevMessageCount = 0;
 
   constructor() {
-    // Route state_update events from the agent to the render state store
-    // so components bound to $state paths reactively update.
     effect(() => {
       if (this.eventsSubscribed) return;
       let agent: ReturnType;
-      try {
-        agent = this.agent();
-      } catch {
-        // Required input not yet available — skip; effect will retry.
-        return;
-      }
+      try { agent = this.agent(); } catch { return; }
       this.eventsSubscribed = true;
       agent.events$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
         if (event.type !== 'state_update') return;
@@ -290,32 +201,16 @@ export class ChatComponent {
       });
     });
 
-    // Auto-scroll to bottom:
-    // - Always scroll when message count increases (new message sent/received)
-    // - During streaming partials, only scroll if user is near bottom
     effect(() => {
-      // Guard against required `agent` input not yet being set (can fire
-      // during initial change detection before input signals are populated).
       let count: number;
       let msgs: ReturnType['messages']>;
-      try {
-        count = this.messageCount();
-        msgs = this.agent().messages();
-      } catch {
-        return;
-      }
-      // Track last message content to trigger scroll during streaming partials
-      const lastContent = msgs.length > 0
-        ? (msgs[msgs.length - 1] as unknown as Record)['content']
-        : undefined;
-      void lastContent; // consume the tracked value
-
+      try { count = this.messageCount(); msgs = this.agent().messages(); } catch { return; }
+      const lastContent = msgs.length > 0 ? (msgs[msgs.length - 1] as unknown as Record)['content'] : undefined;
+      void lastContent;
       const el = this.scrollContainer()?.nativeElement;
       if (!el) return;
-
       const isNewMessage = count !== this.prevMessageCount;
       this.prevMessageCount = count;
-
       const isNearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 150;
       if (isNewMessage || isNearBottom) {
         requestAnimationFrame(() => {
@@ -325,14 +220,23 @@ export class ChatComponent {
     });
   }
 
+  prevRole(index: number): ChatMessageRole | undefined {
+    if (index === 0) return undefined;
+    const prev = this.agent().messages()[index - 1];
+    if (!prev) return undefined;
+    const role = (prev as unknown as { role?: string }).role;
+    if (role === 'user') return 'user';
+    if (role === 'assistant') return 'assistant';
+    if (role === 'system') return 'system';
+    if (role === 'tool') return 'tool';
+    return undefined;
+  }
+
   classifyMessage(content: string, index: number): ContentClassifier {
-    let classifier = this.classifiers.get(index);
-    if (!classifier) {
-      classifier = createContentClassifier();
-      this.classifiers.set(index, classifier);
-    }
-    classifier.update(content);
-    return classifier;
+    let c = this.classifiers.get(index);
+    if (!c) { c = createContentClassifier(); this.classifiers.set(index, c); }
+    c.update(content);
+    return c;
   }
 
   clearClassifiers(): void {
diff --git a/libs/chat/src/lib/primitives/chat-error/chat-error.component.ts b/libs/chat/src/lib/primitives/chat-error/chat-error.component.ts
index 1d2700593..69a377ec6 100644
--- a/libs/chat/src/lib/primitives/chat-error/chat-error.component.ts
+++ b/libs/chat/src/lib/primitives/chat-error/chat-error.component.ts
@@ -1,11 +1,9 @@
+// libs/chat/src/lib/primitives/chat-error/chat-error.component.ts
 // SPDX-License-Identifier: MIT
-import {
-  Component,
-  computed,
-  input,
-  ChangeDetectionStrategy,
-} from '@angular/core';
+import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';
 import type { Agent } from '../../agent';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_ERROR_STYLES } from '../../styles/chat-error.styles';
 
 export function extractErrorMessage(error: unknown): string | null {
   if (!error) return null;
@@ -18,13 +16,15 @@ export function extractErrorMessage(error: unknown): string | null {
   selector: 'chat-error',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, CHAT_ERROR_STYLES],
   template: `
     @if (errorMessage(); as msg) {
-      
+      
     }
   `,
 })
diff --git a/libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts b/libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts
index b98f90f37..c938825b0 100644
--- a/libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts
+++ b/libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts
@@ -1,3 +1,4 @@
+// libs/chat/src/lib/primitives/chat-generative-ui/chat-generative-ui.component.ts
 // SPDX-License-Identifier: MIT
 import {
   Component,
@@ -8,12 +9,15 @@ import {
 import type { Spec, StateStore } from '@json-render/core';
 import type { AngularRegistry, RenderEvent } from '@ngaf/render';
 import { RenderSpecComponent } from '@ngaf/render';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_GENERATIVE_UI_STYLES } from '../../styles/chat-generative-ui.styles';
 
 @Component({
   selector: 'chat-generative-ui',
   standalone: true,
   imports: [RenderSpecComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, CHAT_GENERATIVE_UI_STYLES],
   template: `
     @if (spec()) {
       
-      
-      
-    
+    

+      
+      
+      

+        
+        
+        

+          
+          
+        

+      

+      
+    

   `,
 })
 export class ChatInputComponent {
@@ -82,14 +83,26 @@ export class ChatInputComponent {
   readonly isDisabled = computed(() => this.agent().isLoading());
   readonly focused = signal(false);
 
+  /** Two-way binding helper for ngModel */
+  get messageTextProxy(): string { return this.messageText(); }
+  set messageTextProxy(v: string) { this.messageText.set(v); }
+
+  readonly canSubmit = computed(() => {
+    if (this.isDisabled()) return false;
+    return this.messageText().trim().length > 0;
+  });
+
   private readonly textareaEl = viewChild>('textareaEl');
 
+  focusTextarea(): void {
+    this.textareaEl()?.nativeElement.focus();
+  }
+
   onSubmit(): void {
     const submitted = submitMessage(this.agent(), this.messageText());
     if (submitted !== null) {
       this.submitted.emit(submitted);
       this.messageText.set('');
-      // Re-focus the textarea after submit
       requestAnimationFrame(() => this.textareaEl()?.nativeElement.focus());
     }
   }
diff --git a/libs/chat/src/lib/primitives/chat-interrupt/chat-interrupt.component.ts b/libs/chat/src/lib/primitives/chat-interrupt/chat-interrupt.component.ts
index 60c999536..f080f5733 100644
--- a/libs/chat/src/lib/primitives/chat-interrupt/chat-interrupt.component.ts
+++ b/libs/chat/src/lib/primitives/chat-interrupt/chat-interrupt.component.ts
@@ -1,3 +1,4 @@
+// libs/chat/src/lib/primitives/chat-interrupt/chat-interrupt.component.ts
 // SPDX-License-Identifier: MIT
 import {
   Component,
@@ -10,12 +11,9 @@ import {
 import { NgTemplateOutlet } from '@angular/common';
 import type { Agent } from '../../agent';
 import type { AgentInterrupt } from '../../agent/agent-interrupt';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_INTERRUPT_STYLES } from '../../styles/chat-interrupt.styles';
 
-/**
- * Retrieves the current interrupt value from an Agent, or undefined when
- * the runtime does not expose interrupts.
- * Exported for unit testing without DOM rendering.
- */
 export function getInterrupt(agent: Agent): AgentInterrupt | undefined {
   return agent.interrupt?.();
 }
@@ -25,21 +23,35 @@ export function getInterrupt(agent: Agent): AgentInterrupt | undefined {
   standalone: true,
   imports: [NgTemplateOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, CHAT_INTERRUPT_STYLES],
   template: `
     @if (interrupt(); as currentInterrupt) {
-      @if (templateRef()) {
-        
-      }
+      

+        

+          
+          Agent paused
+        

+        @if (templateRef()) {
+          
+        } @else {
+          
{{ defaultText(currentInterrupt) }}

+        }
+      

     }
   `,
 })
 export class ChatInterruptComponent {
   readonly agent = input.required();
-
   readonly templateRef = contentChild(TemplateRef);
-
   readonly interrupt = computed(() => getInterrupt(this.agent()));
+
+  defaultText(i: AgentInterrupt): string {
+    const v = (i as { value?: unknown }).value;
+    return typeof v === 'string' ? v : JSON.stringify(v);
+  }
 }
diff --git a/libs/chat/src/lib/primitives/chat-launcher-button/chat-launcher-button.component.spec.ts b/libs/chat/src/lib/primitives/chat-launcher-button/chat-launcher-button.component.spec.ts
new file mode 100644
index 000000000..3fbf9c9eb
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-launcher-button/chat-launcher-button.component.spec.ts
@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: MIT
+import { describe, it, expect } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { ChatLauncherButtonComponent } from './chat-launcher-button.component';
+
+describe('ChatLauncherButtonComponent', () => {
+  it('renders a button', () => {
+    TestBed.configureTestingModule({});
+    const fx = TestBed.createComponent(ChatLauncherButtonComponent);
+    fx.detectChanges();
+    const btn = (fx.nativeElement as HTMLElement).querySelector('.chat-launcher-button');
+    expect(btn).toBeTruthy();
+    expect(btn!.tagName).toBe('BUTTON');
+    expect(btn!.getAttribute('aria-label')).toBe('Open chat');
+  });
+
+  it('contains an svg icon', () => {
+    TestBed.configureTestingModule({});
+    const fx = TestBed.createComponent(ChatLauncherButtonComponent);
+    fx.detectChanges();
+    const svg = (fx.nativeElement as HTMLElement).querySelector('.chat-launcher-button svg');
+    expect(svg).toBeTruthy();
+  });
+});
diff --git a/libs/chat/src/lib/primitives/chat-launcher-button/chat-launcher-button.component.ts b/libs/chat/src/lib/primitives/chat-launcher-button/chat-launcher-button.component.ts
new file mode 100644
index 000000000..e9300d890
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-launcher-button/chat-launcher-button.component.ts
@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: MIT
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_LAUNCHER_BUTTON_STYLES } from '../../styles/chat-launcher-button.styles';
+
+@Component({
+  selector: 'chat-launcher-button',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, CHAT_LAUNCHER_BUTTON_STYLES],
+  template: `
+    
+  `,
+})
+export class ChatLauncherButtonComponent {}
diff --git a/libs/chat/src/lib/primitives/chat-messages/chat-messages.component.spec.ts b/libs/chat/src/lib/primitives/chat-message-list/chat-message-list.component.spec.ts
similarity index 93%
rename from libs/chat/src/lib/primitives/chat-messages/chat-messages.component.spec.ts
rename to libs/chat/src/lib/primitives/chat-message-list/chat-message-list.component.spec.ts
index 2934edfdd..60443a764 100644
--- a/libs/chat/src/lib/primitives/chat-messages/chat-messages.component.spec.ts
+++ b/libs/chat/src/lib/primitives/chat-message-list/chat-message-list.component.spec.ts
@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 import { describe, it, expect } from 'vitest';
 import { signal } from '@angular/core';
-import { getMessageType } from './chat-messages.component';
+import { getMessageType } from './chat-message-list.component';
 import { mockAgent } from '../../testing/mock-agent';
 import type { Message } from '../../agent';
 
@@ -32,7 +32,7 @@ describe('getMessageType', () => {
   });
 });
 
-describe('MessagesComponent — computed messages', () => {
+describe('ChatMessageListComponent — computed messages', () => {
   it('messages() signal reflects the agent messages signal', () => {
     const msgs: Message[] = [
       { id: '1', role: 'user', content: 'hi' },
@@ -64,7 +64,7 @@ describe('MessagesComponent — computed messages', () => {
   });
 });
 
-describe('MessagesComponent — findTemplate logic', () => {
+describe('ChatMessageListComponent — findTemplate logic', () => {
   it('findTemplate returns matching directive by type', () => {
     const templates = [
       { chatMessageTemplate: () => 'human' as const, templateRef: {} },
diff --git a/libs/chat/src/lib/primitives/chat-messages/chat-messages.component.ts b/libs/chat/src/lib/primitives/chat-message-list/chat-message-list.component.ts
similarity index 86%
rename from libs/chat/src/lib/primitives/chat-messages/chat-messages.component.ts
rename to libs/chat/src/lib/primitives/chat-message-list/chat-message-list.component.ts
index acd87be05..6de3bf5f2 100644
--- a/libs/chat/src/lib/primitives/chat-messages/chat-messages.component.ts
+++ b/libs/chat/src/lib/primitives/chat-message-list/chat-message-list.component.ts
@@ -10,6 +10,8 @@ import { NgTemplateOutlet } from '@angular/common';
 import type { Agent, Message } from '../../agent';
 import { MessageTemplateDirective } from './message-template.directive';
 import type { MessageTemplateType } from '../../chat.types';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_MESSAGE_LIST_STYLES } from '../../styles/chat-message-list.styles';
 
 /**
  * Maps a {@link Message} to a {@link MessageTemplateType}.
@@ -31,10 +33,11 @@ export function getMessageType(message: Message): MessageTemplateType {
 }
 
 @Component({
-  selector: 'chat-messages',
+  selector: 'chat-message-list',
   standalone: true,
   imports: [NgTemplateOutlet, MessageTemplateDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, CHAT_MESSAGE_LIST_STYLES],
   template: `
     @for (message of messages(); track $index) {
       @let template = findTemplate(getMessageType(message));
@@ -47,7 +50,7 @@ export function getMessageType(message: Message): MessageTemplateType {
     }
   `,
 })
-export class ChatMessagesComponent {
+export class ChatMessageListComponent {
   readonly agent = input.required();
 
   readonly messageTemplates = contentChildren(MessageTemplateDirective);
diff --git a/libs/chat/src/lib/primitives/chat-messages/message-template.directive.ts b/libs/chat/src/lib/primitives/chat-message-list/message-template.directive.ts
similarity index 100%
rename from libs/chat/src/lib/primitives/chat-messages/message-template.directive.ts
rename to libs/chat/src/lib/primitives/chat-message-list/message-template.directive.ts
diff --git a/libs/chat/src/lib/primitives/chat-message/chat-message.component.spec.ts b/libs/chat/src/lib/primitives/chat-message/chat-message.component.spec.ts
new file mode 100644
index 000000000..231f50c7f
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-message/chat-message.component.spec.ts
@@ -0,0 +1,16 @@
+// libs/chat/src/lib/primitives/chat-message/chat-message.component.spec.ts
+// SPDX-License-Identifier: MIT
+import { describe, it, expect } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { ChatMessageComponent } from './chat-message.component';
+
+describe('ChatMessageComponent', () => {
+  it('instantiates without error', () => {
+    TestBed.configureTestingModule({});
+    let component!: ChatMessageComponent;
+    TestBed.runInInjectionContext(() => {
+      component = new ChatMessageComponent();
+    });
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/libs/chat/src/lib/primitives/chat-message/chat-message.component.ts b/libs/chat/src/lib/primitives/chat-message/chat-message.component.ts
new file mode 100644
index 000000000..ff99ce66c
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-message/chat-message.component.ts
@@ -0,0 +1,48 @@
+// libs/chat/src/lib/primitives/chat-message/chat-message.component.ts
+// SPDX-License-Identifier: MIT
+import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_MESSAGE_STYLES } from '../../styles/chat-message.styles';
+
+export type ChatMessageRole = 'user' | 'assistant' | 'system' | 'tool';
+
+@Component({
+  selector: 'chat-message',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, CHAT_MESSAGE_STYLES],
+  host: {
+    '[attr.data-role]': 'role()',
+    '[attr.data-current]': 'currentStr()',
+    '[attr.data-prev-role]': 'prevRole() ?? null',
+  },
+  template: `
+    @switch (role()) {
+      @case ('user') {
+        

+      }
+      @case ('assistant') {
+        

+          
+          @if (streaming() && current()) {
+            
+          }
+        

+        

+          
+        

+      }
+      @default {
+        

+      }
+    }
+  `,
+})
+export class ChatMessageComponent {
+  readonly role = input.required();
+  readonly current = input(false);
+  readonly streaming = input(false);
+  readonly prevRole = input(undefined);
+
+  readonly currentStr = computed(() => String(this.current()));
+}
diff --git a/libs/chat/src/lib/primitives/chat-subagents/chat-subagents.component.ts b/libs/chat/src/lib/primitives/chat-subagents/chat-subagents.component.ts
index f29ef49bf..3105c756e 100644
--- a/libs/chat/src/lib/primitives/chat-subagents/chat-subagents.component.ts
+++ b/libs/chat/src/lib/primitives/chat-subagents/chat-subagents.component.ts
@@ -1,3 +1,4 @@
+// libs/chat/src/lib/primitives/chat-subagents/chat-subagents.component.ts
 // SPDX-License-Identifier: MIT
 import {
   Component,
@@ -10,13 +11,8 @@ import {
 import { NgTemplateOutlet } from '@angular/common';
 import type { Agent } from '../../agent';
 import type { Subagent } from '../../agent/subagent';
+import { ChatSubagentCardComponent } from '../../compositions/chat-subagent-card/chat-subagent-card.component';
 
-/**
- * Returns the list of currently-active subagents on the agent. "Active" means
- * the subagent status is neither `complete` nor `error`. Returns an empty list
- * when the runtime does not expose a subagents surface.
- * Exported for unit testing without DOM rendering.
- */
 export function activeSubagentsFromAgent(agent: Agent): Subagent[] {
   const map = agent.subagents?.();
   if (!map) return [];
@@ -31,23 +27,20 @@ export function activeSubagentsFromAgent(agent: Agent): Subagent[] {
 @Component({
   selector: 'chat-subagents',
   standalone: true,
-  imports: [NgTemplateOutlet],
+  imports: [NgTemplateOutlet, ChatSubagentCardComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     @for (subagent of activeSubagents(); track subagent.toolCallId) {
       @if (templateRef()) {
-        
+        
+      } @else {
+        
       }
     }
   `,
 })
 export class ChatSubagentsComponent {
   readonly agent = input.required();
-
   readonly templateRef = contentChild(TemplateRef);
-
   readonly activeSubagents = computed(() => activeSubagentsFromAgent(this.agent()));
 }
diff --git a/libs/chat/src/lib/primitives/chat-suggestions/chat-suggestions.component.spec.ts b/libs/chat/src/lib/primitives/chat-suggestions/chat-suggestions.component.spec.ts
new file mode 100644
index 000000000..275073b1f
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-suggestions/chat-suggestions.component.spec.ts
@@ -0,0 +1,41 @@
+// SPDX-License-Identifier: MIT
+// NOTE: Angular signal-based inputs cannot be exercised via TestBed.createComponent +
+// componentRef.setInput() under vitest JIT without the analogjs Angular vite plugin —
+// setInput() throws NG0303 because JIT does not process signal-input metadata.
+// We follow the same pattern used by chat-trace, chat-typing-indicator, and
+// a2ui/catalog/button in this library: test signal/output logic via
+// runInInjectionContext and verify the class structure directly.
+import { describe, it, expect } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { OutputEmitterRef } from '@angular/core';
+import { ChatSuggestionsComponent } from './chat-suggestions.component';
+
+describe('ChatSuggestionsComponent', () => {
+  it('exports the component class', () => {
+    expect(ChatSuggestionsComponent).toBeDefined();
+  });
+
+  it('suggestions signal defaults to empty array', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const instance = new ChatSuggestionsComponent();
+      expect(instance.suggestions()).toEqual([]);
+    });
+  });
+
+  it('has a selected output', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const instance = new ChatSuggestionsComponent();
+      expect(instance.selected).toBeInstanceOf(OutputEmitterRef);
+    });
+  });
+
+  it('renders no buttons when suggestions is empty', () => {
+    TestBed.configureTestingModule({});
+    const fx = TestBed.createComponent(ChatSuggestionsComponent);
+    fx.detectChanges();
+    const buttons = (fx.nativeElement as HTMLElement).querySelectorAll('.chat-suggestion');
+    expect(buttons.length).toBe(0);
+  });
+});
diff --git a/libs/chat/src/lib/primitives/chat-suggestions/chat-suggestions.component.ts b/libs/chat/src/lib/primitives/chat-suggestions/chat-suggestions.component.ts
new file mode 100644
index 000000000..abe758bb6
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-suggestions/chat-suggestions.component.ts
@@ -0,0 +1,22 @@
+// SPDX-License-Identifier: MIT
+import { Component, ChangeDetectionStrategy, input, output } from '@angular/core';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_SUGGESTIONS_STYLES } from '../../styles/chat-suggestions.styles';
+
+@Component({
+  selector: 'chat-suggestions',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, CHAT_SUGGESTIONS_STYLES],
+  template: `
+    

+      @for (s of suggestions(); track s) {
+        
+      }
+    

+  `,
+})
+export class ChatSuggestionsComponent {
+  readonly suggestions = input([]);
+  readonly selected = output();
+}
diff --git a/libs/chat/src/lib/primitives/chat-thread-list/chat-thread-list.component.ts b/libs/chat/src/lib/primitives/chat-thread-list/chat-thread-list.component.ts
index 35b1ef1ca..bd781bea8 100644
--- a/libs/chat/src/lib/primitives/chat-thread-list/chat-thread-list.component.ts
+++ b/libs/chat/src/lib/primitives/chat-thread-list/chat-thread-list.component.ts
@@ -1,3 +1,4 @@
+// libs/chat/src/lib/primitives/chat-thread-list/chat-thread-list.component.ts
 // SPDX-License-Identifier: MIT
 import {
   Component,
@@ -8,6 +9,8 @@ import {
   ChangeDetectionStrategy,
 } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_THREAD_LIST_STYLES } from '../../styles/chat-thread-list.styles';
 
 export type Thread = { id: string; [key: string]: unknown };
 
@@ -16,26 +19,50 @@ export type Thread = { id: string; [key: string]: unknown };
   standalone: true,
   imports: [NgTemplateOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, CHAT_THREAD_LIST_STYLES],
   template: `
-    @for (thread of threads(); track thread.id) {
-      @if (templateRef()) {
-        
-      }
+    @if (showNewThreadButton()) {
+      
     }
+    
    
+      @for (thread of threads(); track thread.id) {
+        
  • 
+          @if (templateRef()) {
+            
+          } @else {
+            
+          }
+        
    • 
+      }
+    

   `,
 })
 export class ChatThreadListComponent {
   readonly threads = input.required();
   readonly activeThreadId = input('');
+  readonly showNewThreadButton = input(false);
 
   readonly threadSelected = output();
+  readonly newThreadRequested = output();
 
   readonly templateRef = contentChild(TemplateRef);
 
   selectThread(threadId: string): void {
     this.threadSelected.emit(threadId);
   }
+
+  protected threadLabel(thread: Thread): string {
+    const title = thread['title'];
+    if (typeof title === 'string' && title.length > 0) return title;
+    return thread.id;
+  }
 }
diff --git a/libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts b/libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts
index 9df6e9e70..0fe5f1b43 100644
--- a/libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts
+++ b/libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts
@@ -1,3 +1,4 @@
+// libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts
 // SPDX-License-Identifier: MIT
 import {
   Component,
@@ -9,19 +10,19 @@ import {
 } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import type { Agent, Message, ToolCall } from '../../agent';
+import { ChatToolCallCardComponent, type ToolCallInfo } from '../../compositions/chat-tool-call-card/chat-tool-call-card.component';
 
 @Component({
   selector: 'chat-tool-calls',
   standalone: true,
-  imports: [NgTemplateOutlet],
+  imports: [NgTemplateOutlet, ChatToolCallCardComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     @for (toolCall of toolCalls(); track toolCall.id) {
       @if (templateRef()) {
-        
+        
+      } @else {
+        
       }
     }
   `,
@@ -29,7 +30,6 @@ import type { Agent, Message, ToolCall } from '../../agent';
 export class ChatToolCallsComponent {
   readonly agent = input.required();
   readonly message = input(undefined);
-
   readonly templateRef = contentChild(TemplateRef);
 
   readonly toolCalls = computed((): ToolCall[] => {
@@ -37,10 +37,17 @@ export class ChatToolCallsComponent {
     if (msg && msg.role === 'assistant' && Array.isArray(msg.content)) {
       const blocks = msg.content.filter((b) => b.type === 'tool_use');
       const all = this.agent().toolCalls();
-      return blocks
-        .map(b => all.find(tc => tc.id === b.id))
-        .filter((x): x is ToolCall => !!x);
+      return blocks.map(b => all.find(tc => tc.id === b.id)).filter((x): x is ToolCall => !!x);
     }
     return this.agent().toolCalls();
   });
+
+  protected toToolCallInfo(tc: ToolCall): ToolCallInfo {
+    return {
+      id: tc.id,
+      name: tc.name,
+      args: tc.args,
+      result: tc.result,
+    };
+  }
 }
diff --git a/libs/chat/src/lib/primitives/chat-trace/chat-trace.component.spec.ts b/libs/chat/src/lib/primitives/chat-trace/chat-trace.component.spec.ts
new file mode 100644
index 000000000..501fca098
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-trace/chat-trace.component.spec.ts
@@ -0,0 +1,124 @@
+// libs/chat/src/lib/primitives/chat-trace/chat-trace.component.spec.ts
+// SPDX-License-Identifier: MIT
+import { describe, it, expect } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { signal, computed } from '@angular/core';
+import type { TraceState } from './chat-trace.component';
+
+// Tests verify the signal-computed logic that ChatTraceComponent exposes.
+// We cannot use createComponent + setInput for signal inputs under vitest JIT
+// (Angular's JIT compiler does not process signal-input metadata, so setInput
+// throws NG0303).  Instead we mirror the component's computed logic directly
+// inside runInInjectionContext — the same pattern used by chat-typing-indicator
+// and chat-timeline specs in this library.
+
+function makeTrace(initialState: TraceState = 'pending') {
+  const state = signal(initialState);
+  const expandedOverride = signal(null);
+
+  const expanded = computed(() => {
+    const override = expandedOverride();
+    if (override !== null) return override;
+    return state() === 'running';
+  });
+
+  const expandedStr = computed(() => String(expanded()));
+
+  function toggle() {
+    expandedOverride.set(!expanded());
+  }
+
+  function setState(s: TraceState) {
+    const prev = state();
+    state.set(s);
+    if (s === 'running') {
+      expandedOverride.set(null);
+    } else if (s === 'done' && prev === 'running') {
+      setTimeout(() => expandedOverride.set(false), 200);
+    }
+  }
+
+  return { state, expanded, expandedStr, toggle, setState };
+}
+
+describe('ChatTraceComponent — expanded computed', () => {
+  it('is false by default (pending state)', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const { expanded } = makeTrace('pending');
+      expect(expanded()).toBe(false);
+    });
+  });
+
+  it('auto-expands when state is running', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const { expanded } = makeTrace('running');
+      expect(expanded()).toBe(true);
+    });
+  });
+
+  it('is false when state is done', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const { expanded } = makeTrace('done');
+      expect(expanded()).toBe(false);
+    });
+  });
+
+  it('is false when state is error', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const { expanded } = makeTrace('error');
+      expect(expanded()).toBe(false);
+    });
+  });
+});
+
+describe('ChatTraceComponent — toggle', () => {
+  it('flips collapsed to expanded', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const { expanded, toggle } = makeTrace('pending');
+      expect(expanded()).toBe(false);
+      toggle();
+      expect(expanded()).toBe(true);
+    });
+  });
+
+  it('flips expanded to collapsed', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const { expanded, toggle } = makeTrace('running');
+      expect(expanded()).toBe(true);
+      toggle();
+      expect(expanded()).toBe(false);
+    });
+  });
+});
+
+describe('ChatTraceComponent — state transitions', () => {
+  it('clears manual override and auto-expands when transitioning to running', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const { expanded, toggle, setState } = makeTrace('running');
+      // Manually collapse while running
+      toggle();
+      expect(expanded()).toBe(false);
+      // Transitioning away from running and back resets the override
+      setState('pending');
+      setState('running');
+      expect(expanded()).toBe(true);
+    });
+  });
+
+  it('expandedStr reflects expanded as string', () => {
+    TestBed.configureTestingModule({});
+    TestBed.runInInjectionContext(() => {
+      const { expandedStr, setState } = makeTrace('pending');
+      expect(expandedStr()).toBe('false');
+      setState('running');
+      expect(expandedStr()).toBe('true');
+    });
+  });
+});
diff --git a/libs/chat/src/lib/primitives/chat-trace/chat-trace.component.ts b/libs/chat/src/lib/primitives/chat-trace/chat-trace.component.ts
new file mode 100644
index 000000000..dfb125490
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-trace/chat-trace.component.ts
@@ -0,0 +1,69 @@
+// libs/chat/src/lib/primitives/chat-trace/chat-trace.component.ts
+// SPDX-License-Identifier: MIT
+import { Component, ChangeDetectionStrategy, input, signal, effect, computed } from '@angular/core';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_TRACE_STYLES } from '../../styles/chat-trace.styles';
+
+export type TraceState = 'pending' | 'running' | 'done' | 'error';
+
+@Component({
+  selector: 'chat-trace',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, CHAT_TRACE_STYLES],
+  host: {
+    '[attr.data-state]': 'state()',
+    '[attr.data-expanded]': 'expandedStr()',
+  },
+  template: `
+    
+    @if (expanded()) {
+      

+    }
+  `,
+})
+export class ChatTraceComponent {
+  readonly state = input('pending');
+
+  /** null = follow auto state-driven logic; non-null = manual override */
+  private readonly _expandedOverride = signal(null);
+
+  readonly expanded = computed(() => {
+    const override = this._expandedOverride();
+    if (override !== null) return override;
+    return this.state() === 'running';
+  });
+
+  readonly expandedStr = computed(() => String(this.expanded()));
+
+  constructor() {
+    let prevState: TraceState | undefined;
+    effect(() => {
+      const s = this.state();
+      if (s === 'running') {
+        this._expandedOverride.set(null);
+      } else if (s === 'done' && prevState === 'running') {
+        setTimeout(() => this._expandedOverride.set(false), 200);
+      }
+      prevState = s;
+    });
+  }
+
+  toggle(): void {
+    this._expandedOverride.set(!this.expanded());
+  }
+}
diff --git a/libs/chat/src/lib/primitives/chat-typing-indicator/chat-typing-indicator.component.ts b/libs/chat/src/lib/primitives/chat-typing-indicator/chat-typing-indicator.component.ts
index f4262603c..bc43ffe04 100644
--- a/libs/chat/src/lib/primitives/chat-typing-indicator/chat-typing-indicator.component.ts
+++ b/libs/chat/src/lib/primitives/chat-typing-indicator/chat-typing-indicator.component.ts
@@ -1,11 +1,9 @@
+// libs/chat/src/lib/primitives/chat-typing-indicator/chat-typing-indicator.component.ts
 // SPDX-License-Identifier: MIT
-import {
-  Component,
-  computed,
-  input,
-  ChangeDetectionStrategy,
-} from '@angular/core';
+import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';
 import type { Agent } from '../../agent';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_TYPING_INDICATOR_STYLES } from '../../styles/chat-typing-indicator.styles';
 
 export function isTyping(agent: Agent): boolean {
   if (!agent.isLoading()) return false;
@@ -14,7 +12,6 @@ export function isTyping(agent: Agent): boolean {
   const last = msgs[msgs.length - 1];
   if (last.role === 'user') return true;
   if (last.role === 'assistant') {
-    // Empty assistant message: string is empty or content block array is empty
     return typeof last.content === 'string'
       ? !last.content
       : last.content.length === 0;
@@ -26,34 +23,13 @@ export function isTyping(agent: Agent): boolean {
   selector: 'chat-typing-indicator',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: [`
-    .chat-dot {
-      display: inline-block;
-      width: 5px;
-      height: 5px;
-      border-radius: 50%;
-      background: var(--chat-text-muted);
-      animation: chat-dot-pulse 1.4s ease-in-out infinite;
-    }
-    .chat-dot:nth-child(2) { animation-delay: 0.2s; }
-    .chat-dot:nth-child(3) { animation-delay: 0.4s; }
-    @keyframes chat-dot-pulse {
-      0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
-      40% { opacity: 1; transform: scale(1); }
-    }
-  `],
+  styles: [CHAT_HOST_TOKENS, CHAT_TYPING_INDICATOR_STYLES],
   template: `
     @if (visible()) {
-      

-        
A

-        

-          
-          
-          
-        

+      

+        
+        
+        
       

     }
   `,
diff --git a/libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts b/libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts
new file mode 100644
index 000000000..5054ed1b8
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts
@@ -0,0 +1,31 @@
+// libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts
+// SPDX-License-Identifier: MIT
+import { describe, it, expect } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { ChatWindowComponent } from './chat-window.component';
+
+@Component({
+  standalone: true,
+  imports: [ChatWindowComponent],
+  template: `
+    
+      My Chat
+      
messages here

+      
input here

+    
+  `,
+})
+class Host {}
+
+describe('ChatWindowComponent', () => {
+  it('projects header / body / footer slots', () => {
+    TestBed.configureTestingModule({});
+    const fx = TestBed.createComponent(Host);
+    fx.detectChanges();
+    const win = fx.nativeElement.querySelector('chat-window') as HTMLElement;
+    expect(win.querySelector('.chat-window__header')!.textContent).toContain('My Chat');
+    expect(win.querySelector('.chat-window__body')!.textContent).toContain('messages here');
+    expect(win.querySelector('.chat-window__footer')!.textContent).toContain('input here');
+  });
+});
diff --git a/libs/chat/src/lib/primitives/chat-window/chat-window.component.ts b/libs/chat/src/lib/primitives/chat-window/chat-window.component.ts
new file mode 100644
index 000000000..17077e142
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-window/chat-window.component.ts
@@ -0,0 +1,18 @@
+// libs/chat/src/lib/primitives/chat-window/chat-window.component.ts
+// SPDX-License-Identifier: MIT
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+import { CHAT_WINDOW_STYLES } from '../../styles/chat-window.styles';
+
+@Component({
+  selector: 'chat-window',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [CHAT_HOST_TOKENS, CHAT_WINDOW_STYLES],
+  template: `
+    

+    

+    

+  `,
+})
+export class ChatWindowComponent {}
diff --git a/libs/chat/src/lib/styles/chat-markdown.ts b/libs/chat/src/lib/streaming/markdown-render.ts
similarity index 50%
rename from libs/chat/src/lib/styles/chat-markdown.ts
rename to libs/chat/src/lib/streaming/markdown-render.ts
index 9dbd0d3a5..a486f800a 100644
--- a/libs/chat/src/lib/styles/chat-markdown.ts
+++ b/libs/chat/src/lib/streaming/markdown-render.ts
@@ -57,45 +57,3 @@ export function renderMarkdownToString(content: string, sanitizer: DomSanitizer)
   }
   return plainTextToHtml(content);
 }
-
-/**
- * CSS for styling rendered markdown HTML.
- * Uses .chat-md class prefix to avoid global conflicts.
- * Must be included in a component with ViewEncapsulation.None or via ::ng-deep.
- */
-export const CHAT_MARKDOWN_STYLES = `
-  :host ::ng-deep .chat-md p { margin: 0 0 0.75em; }
-  :host ::ng-deep .chat-md p:last-child { margin-bottom: 0; }
-  :host ::ng-deep .chat-md code {
-    background: var(--chat-bg-alt);
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-size: 0.875em;
-    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  }
-  :host ::ng-deep .chat-md pre {
-    background: var(--chat-bg-alt);
-    padding: 12px 16px;
-    border-radius: var(--chat-radius-card);
-    overflow-x: auto;
-    margin: 0.75em 0;
-  }
-  :host ::ng-deep .chat-md pre code { background: none; padding: 0; }
-  :host ::ng-deep .chat-md ul, :host ::ng-deep .chat-md ol { margin: 0.5em 0; padding-left: 1.5em; }
-  :host ::ng-deep .chat-md li { margin: 0.25em 0; }
-  :host ::ng-deep .chat-md a { color: var(--chat-text); text-decoration: underline; }
-  :host ::ng-deep .chat-md strong { font-weight: 600; }
-  :host ::ng-deep .chat-md blockquote {
-    border-left: 3px solid var(--chat-border);
-    padding-left: 12px;
-    margin: 0.75em 0;
-    color: var(--chat-text-muted);
-  }
-  :host ::ng-deep .chat-md h1, :host ::ng-deep .chat-md h2, :host ::ng-deep .chat-md h3, :host ::ng-deep .chat-md h4 { margin: 1em 0 0.5em; font-weight: 600; }
-  :host ::ng-deep .chat-md h1 { font-size: 1.25em; }
-  :host ::ng-deep .chat-md h2 { font-size: 1.125em; }
-  :host ::ng-deep .chat-md h3 { font-size: 1em; }
-  :host ::ng-deep .chat-md table { border-collapse: collapse; width: 100%; margin: 0.75em 0; }
-  :host ::ng-deep .chat-md th, :host ::ng-deep .chat-md td { border: 1px solid var(--chat-border); padding: 6px 12px; text-align: left; }
-  :host ::ng-deep .chat-md th { background: var(--chat-bg-alt); font-weight: 600; font-size: 0.875em; }
-`;
diff --git a/libs/chat/src/lib/streaming/streaming-markdown.component.ts b/libs/chat/src/lib/streaming/streaming-markdown.component.ts
index 45afbeabd..16685b530 100644
--- a/libs/chat/src/lib/streaming/streaming-markdown.component.ts
+++ b/libs/chat/src/lib/streaming/streaming-markdown.component.ts
@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { createStreamingMarkdownRenderer, type StreamingMarkdownRenderer } from './streaming-markdown';
-import { renderMarkdownToString } from '../styles/chat-markdown';
+import { renderMarkdownToString } from './markdown-render';
 
 /**
  * Renders markdown content using a streaming append-only DOM renderer
diff --git a/libs/chat/src/lib/styles/chat-error.styles.ts b/libs/chat/src/lib/styles/chat-error.styles.ts
new file mode 100644
index 000000000..40b8e7a87
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-error.styles.ts
@@ -0,0 +1,18 @@
+// SPDX-License-Identifier: MIT
+export const CHAT_ERROR_STYLES = `
+  :host { display: block; }
+  .chat-error {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    background: var(--ngaf-chat-error-bg);
+    border: 1px solid var(--ngaf-chat-error-border);
+    color: var(--ngaf-chat-error-text);
+    border-radius: var(--ngaf-chat-radius-card);
+    padding: 8px 12px;
+    font-size: var(--ngaf-chat-font-size-sm);
+    margin: 0 var(--ngaf-chat-space-6) var(--ngaf-chat-space-2);
+  }
+  .chat-error__icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
+  .chat-error__msg { flex: 1; min-width: 0; word-break: break-word; }
+`;
diff --git a/libs/chat/src/lib/styles/chat-generative-ui.styles.ts b/libs/chat/src/lib/styles/chat-generative-ui.styles.ts
new file mode 100644
index 000000000..e1d4caf6d
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-generative-ui.styles.ts
@@ -0,0 +1,17 @@
+// SPDX-License-Identifier: MIT
+export const CHAT_GENERATIVE_UI_STYLES = `
+  :host {
+    display: block;
+    color: var(--ngaf-chat-text);
+    font-size: var(--ngaf-chat-font-size);
+    line-height: var(--ngaf-chat-line-height);
+  }
+  .chat-generative-ui__error {
+    color: var(--ngaf-chat-error-text);
+    background: var(--ngaf-chat-error-bg);
+    border: 1px solid var(--ngaf-chat-error-border);
+    border-radius: var(--ngaf-chat-radius-card);
+    padding: 8px 12px;
+    font-size: var(--ngaf-chat-font-size-sm);
+  }
+`;
diff --git a/libs/chat/src/lib/styles/chat-input.styles.ts b/libs/chat/src/lib/styles/chat-input.styles.ts
new file mode 100644
index 000000000..d3fb17276
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-input.styles.ts
@@ -0,0 +1,67 @@
+// libs/chat/src/lib/styles/chat-input.styles.ts
+// SPDX-License-Identifier: MIT
+export const CHAT_INPUT_STYLES = `
+  :host { display: block; background: var(--ngaf-chat-bg); }
+  .chat-input__container { padding: 0 0 15px 0; background: var(--ngaf-chat-bg); }
+  .chat-input__pill {
+    cursor: text;
+    position: relative;
+    background: var(--ngaf-chat-surface-alt);
+    border: 1px solid var(--ngaf-chat-separator);
+    border-radius: var(--ngaf-chat-radius-input);
+    padding: 12px 14px;
+    padding-right: 56px;
+    min-height: 75px;
+    margin: 0 auto;
+    width: 95%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    transition: border-color 200ms ease;
+  }
+  .chat-input__pill:focus-within { border-color: var(--ngaf-chat-text-muted); }
+  .chat-input__textarea {
+    flex: 1;
+    outline: 0;
+    border: 0;
+    resize: none;
+    background: transparent;
+    color: var(--ngaf-chat-text);
+    font-family: inherit;
+    font-size: var(--ngaf-chat-font-size-sm);
+    line-height: 1.5rem;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    field-sizing: content;
+    min-height: 1.5rem;
+    max-height: 9rem;
+    overflow-y: auto;
+  }
+  .chat-input__textarea::placeholder { color: var(--ngaf-chat-text-muted); opacity: 1; }
+  .chat-input__textarea::-webkit-scrollbar { width: 6px; }
+  .chat-input__textarea::-webkit-scrollbar-thumb { background: var(--ngaf-chat-separator); border-radius: 10px; }
+  .chat-input__controls {
+    position: absolute;
+    right: 14px;
+    bottom: 12px;
+    display: flex;
+    gap: 3px;
+  }
+  .chat-input__send {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background: var(--ngaf-chat-primary);
+    color: var(--ngaf-chat-on-primary);
+    border-radius: var(--ngaf-chat-radius-button);
+    cursor: pointer;
+    transition: transform 200ms ease, background 200ms ease;
+  }
+  .chat-input__send:hover:not(:disabled) { transform: scale(1.05); }
+  .chat-input__send:disabled { background: var(--ngaf-chat-muted); color: var(--ngaf-chat-on-primary); cursor: not-allowed; }
+  .chat-input__send svg { width: 16px; height: 16px; }
+`;
diff --git a/libs/chat/src/lib/styles/chat-interrupt.styles.ts b/libs/chat/src/lib/styles/chat-interrupt.styles.ts
new file mode 100644
index 000000000..a253ad2d2
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-interrupt.styles.ts
@@ -0,0 +1,16 @@
+// SPDX-License-Identifier: MIT
+export const CHAT_INTERRUPT_STYLES = `
+  :host { display: block; }
+  .chat-interrupt {
+    background: var(--ngaf-chat-warning-bg);
+    color: var(--ngaf-chat-warning-text);
+    border-left: 3px solid var(--ngaf-chat-warning-text);
+    border-radius: var(--ngaf-chat-radius-card);
+    padding: 12px 16px;
+    margin: 0 var(--ngaf-chat-space-6) var(--ngaf-chat-space-2);
+    font-size: var(--ngaf-chat-font-size-sm);
+  }
+  .chat-interrupt__title { font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
+  .chat-interrupt__body { margin: 0 0 8px; opacity: 0.95; }
+  .chat-interrupt__actions { display: flex; gap: 8px; flex-wrap: wrap; }
+`;
diff --git a/libs/chat/src/lib/styles/chat-launcher-button.styles.ts b/libs/chat/src/lib/styles/chat-launcher-button.styles.ts
new file mode 100644
index 000000000..91b46e5fa
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-launcher-button.styles.ts
@@ -0,0 +1,21 @@
+// libs/chat/src/lib/styles/chat-launcher-button.styles.ts
+// SPDX-License-Identifier: MIT
+export const CHAT_LAUNCHER_BUTTON_STYLES = `
+  :host { display: inline-block; }
+  .chat-launcher-button {
+    width: 56px;
+    height: 56px;
+    border-radius: var(--ngaf-chat-radius-launcher);
+    background: var(--ngaf-chat-primary);
+    color: var(--ngaf-chat-on-primary);
+    border: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--ngaf-chat-shadow-md);
+    transition: transform 200ms ease;
+  }
+  .chat-launcher-button:hover { transform: scale(1.05); }
+  .chat-launcher-button svg { width: 24px; height: 24px; }
+`;
diff --git a/libs/chat/src/lib/styles/chat-markdown.styles.ts b/libs/chat/src/lib/styles/chat-markdown.styles.ts
new file mode 100644
index 000000000..c745a568c
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-markdown.styles.ts
@@ -0,0 +1,39 @@
+// libs/chat/src/lib/styles/chat-markdown.styles.ts
+// SPDX-License-Identifier: MIT
+export const CHAT_MARKDOWN_STYLES = `
+  :host { display: block; color: var(--ngaf-chat-text); line-height: var(--ngaf-chat-line-height); }
+  :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 { font-weight: bold; line-height: 1.2; margin: 0 0 1rem; }
+  :host h1 { font-size: 1.5em; }
+  :host h2 { font-size: 1.25em; font-weight: 600; }
+  :host h3 { font-size: 1.1em; }
+  :host h4 { font-size: 1em; }
+  :host p { margin: 0 0 1rem; line-height: 1.75; font-size: var(--ngaf-chat-font-size); }
+  :host p:last-child { margin-bottom: 0; }
+  :host a { color: var(--ngaf-chat-primary); text-decoration: underline; }
+  :host ul, :host ol { margin: 0 0 1rem; padding-left: 1.25rem; }
+  :host code {
+    background: var(--ngaf-chat-surface-alt);
+    color: var(--ngaf-chat-text);
+    padding: 1px 4px;
+    border-radius: 4px;
+    font-family: var(--ngaf-chat-font-mono);
+    font-size: 0.9em;
+  }
+  :host pre {
+    background: var(--ngaf-chat-surface-alt);
+    color: var(--ngaf-chat-text);
+    padding: 12px;
+    border-radius: var(--ngaf-chat-radius-card);
+    overflow-x: auto;
+    font-family: var(--ngaf-chat-font-mono);
+    font-size: var(--ngaf-chat-font-size-sm);
+    margin: 0 0 1rem;
+  }
+  :host pre code { background: transparent; padding: 0; border-radius: 0; }
+  :host blockquote {
+    border-left: 3px solid var(--ngaf-chat-separator);
+    padding-left: 12px;
+    margin: 0 0 1rem;
+    color: var(--ngaf-chat-text-muted);
+  }
+`;
diff --git a/libs/chat/src/lib/styles/chat-message-list.styles.ts b/libs/chat/src/lib/styles/chat-message-list.styles.ts
new file mode 100644
index 000000000..03d47b092
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-message-list.styles.ts
@@ -0,0 +1,14 @@
+// libs/chat/src/lib/styles/chat-message-list.styles.ts
+// SPDX-License-Identifier: MIT
+export const CHAT_MESSAGE_LIST_STYLES = `
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding: var(--ngaf-chat-space-4) var(--ngaf-chat-space-6);
+    max-width: var(--ngaf-chat-max-width);
+    margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
+  }
+`;
diff --git a/libs/chat/src/lib/styles/chat-message.styles.ts b/libs/chat/src/lib/styles/chat-message.styles.ts
new file mode 100644
index 000000000..dd9df0032
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-message.styles.ts
@@ -0,0 +1,77 @@
+// libs/chat/src/lib/styles/chat-message.styles.ts
+// SPDX-License-Identifier: MIT
+export const CHAT_MESSAGE_STYLES = `
+  :host { display: block; }
+  :host([data-role="user"]) {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.5rem;
+  }
+  :host([data-role="user"][data-prev-role="assistant"]) { margin-top: 1.5rem; }
+  :host([data-role="assistant"]) {
+    display: block;
+    position: relative;
+    margin-top: 1.5rem;
+    color: var(--ngaf-chat-text);
+    line-height: var(--ngaf-chat-line-height);
+    font-size: var(--ngaf-chat-font-size);
+    max-width: 100%;
+  }
+  :host([data-role="assistant"]):first-child { margin-top: 0; }
+
+  .chat-message__bubble {
+    max-width: 80%;
+    padding: 8px 12px;
+    border-radius: var(--ngaf-chat-radius-bubble);
+    background: var(--ngaf-chat-primary);
+    color: var(--ngaf-chat-on-primary);
+    white-space: pre-wrap;
+    line-height: var(--ngaf-chat-line-height-tight);
+    font-size: var(--ngaf-chat-font-size);
+    overflow-wrap: break-word;
+  }
+
+  .chat-message__assistant-body {
+    overflow-wrap: break-word;
+  }
+
+  .chat-message__caret {
+    display: inline-block;
+    margin-left: 2px;
+    width: 0.6ch;
+    color: var(--ngaf-chat-text-muted);
+    animation: ngaf-chat-caret-blink 1.2s step-end infinite;
+  }
+
+  .chat-message__controls {
+    position: absolute;
+    left: 0;
+    bottom: -28px;
+    display: flex;
+    gap: 1rem;
+    opacity: 0;
+    transition: opacity 200ms ease;
+    pointer-events: none;
+  }
+  :host([data-role="assistant"]:hover) .chat-message__controls,
+  :host([data-role="assistant"]:focus-within) .chat-message__controls,
+  :host([data-current="true"]) .chat-message__controls {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  @media (max-width: 768px) {
+    :host([data-role="assistant"]) .chat-message__controls { opacity: 1; pointer-events: auto; }
+  }
+  .chat-message__control-btn {
+    width: 20px;
+    height: 20px;
+    border: 0;
+    background: transparent;
+    color: var(--ngaf-chat-primary);
+    cursor: pointer;
+    padding: 0;
+    transition: transform 200ms ease;
+  }
+  .chat-message__control-btn:hover { transform: scale(1.05); }
+  .chat-message__control-btn svg { width: 16px; height: 16px; pointer-events: none; }
+`;
diff --git a/libs/chat/src/lib/styles/chat-suggestions.styles.ts b/libs/chat/src/lib/styles/chat-suggestions.styles.ts
new file mode 100644
index 000000000..a7c5d6915
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-suggestions.styles.ts
@@ -0,0 +1,17 @@
+// SPDX-License-Identifier: MIT
+export 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(--ngaf-chat-font-size-xs);
+    border-radius: var(--ngaf-chat-radius-bubble);
+    border: 1px solid var(--ngaf-chat-muted);
+    background: transparent;
+    color: var(--ngaf-chat-text);
+    cursor: pointer;
+    transition: transform 200ms ease;
+  }
+  .chat-suggestion:hover { transform: scale(1.03); }
+  .chat-suggestion:disabled { cursor: wait; opacity: 0.6; }
+`;
diff --git a/libs/chat/src/lib/styles/chat-theme.ts b/libs/chat/src/lib/styles/chat-theme.ts
deleted file mode 100644
index 8da8ac6f2..000000000
--- a/libs/chat/src/lib/styles/chat-theme.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-// SPDX-License-Identifier: MIT
-
-const DARK = `
-  --chat-bg: #171717;
-  --chat-bg-alt: #222222;
-  --chat-bg-hover: #2a2a2a;
-  --chat-text: #e0e0e0;
-  --chat-text-muted: #777777;
-  --chat-text-placeholder: #666666;
-  --chat-border: #333333;
-  --chat-border-light: #2a2a2a;
-  --chat-user-bg: #2a2a2a;
-  --chat-user-text: #f5f5f5;
-  --chat-user-border: #333333;
-  --chat-avatar-bg: #333333;
-  --chat-avatar-text: #aaaaaa;
-  --chat-input-bg: #222222;
-  --chat-input-border: #333333;
-  --chat-input-focus-border: #555555;
-  --chat-send-bg: #444444;
-  --chat-send-text: #aaaaaa;
-  --chat-error-bg: #2d1515;
-  --chat-error-text: #f87171;
-  --chat-warning-bg: #2d2315;
-  --chat-warning-text: #fbbf24;
-  --chat-success: #4ade80;
-  --chat-radius-message: 20px;
-  --chat-radius-input: 24px;
-  --chat-radius-card: 12px;
-  --chat-radius-avatar: 8px;
-  --chat-max-width: 720px;
-  --chat-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
-  --chat-font-size: 15px;
-  --chat-line-height: 1.6;
-`;
-
-const LIGHT = `
-  --chat-bg: #ffffff;
-  --chat-bg-alt: #f5f5f5;
-  --chat-bg-hover: #ebebeb;
-  --chat-text: #1a1a1a;
-  --chat-text-muted: #999999;
-  --chat-text-placeholder: #999999;
-  --chat-border: #e5e5e5;
-  --chat-border-light: #f0f0f0;
-  --chat-user-bg: #f0f0f0;
-  --chat-user-text: #1a1a1a;
-  --chat-user-border: transparent;
-  --chat-avatar-bg: #f0f0f0;
-  --chat-avatar-text: #666666;
-  --chat-input-bg: #f5f5f5;
-  --chat-input-border: #e5e5e5;
-  --chat-input-focus-border: #cccccc;
-  --chat-send-bg: #e5e5e5;
-  --chat-send-text: #999999;
-  --chat-error-bg: #fef2f2;
-  --chat-error-text: #dc2626;
-  --chat-warning-bg: #fffbeb;
-  --chat-warning-text: #d97706;
-  --chat-success: #16a34a;
-`;
-
-/**
- * Shared theme styles for chat composition components.
- * Defines CSS custom properties on :host for dark/light mode.
- * Import into any composition's `styles` array.
- */
-export const CHAT_THEME_STYLES = `
-  :host {
-    ${DARK}
-    font-family: var(--chat-font-family);
-    font-size: var(--chat-font-size);
-    line-height: var(--chat-line-height);
-    color: var(--chat-text);
-    background: var(--chat-bg);
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-  }
-  @media (prefers-color-scheme: light) {
-    :host:not([data-chat-theme="dark"]) { ${LIGHT} }
-  }
-  :host([data-chat-theme="light"]) { ${LIGHT} }
-`;
diff --git a/libs/chat/src/lib/styles/chat-thread-list.styles.ts b/libs/chat/src/lib/styles/chat-thread-list.styles.ts
new file mode 100644
index 000000000..080186b47
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-thread-list.styles.ts
@@ -0,0 +1,40 @@
+// SPDX-License-Identifier: MIT
+export const CHAT_THREAD_LIST_STYLES = `
+  :host { display: block; padding: var(--ngaf-chat-space-2); }
+  .chat-thread-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
+  .chat-thread-list__item {
+    display: block;
+    height: 36px;
+    padding: 8px 12px;
+    border-radius: var(--ngaf-chat-radius-button);
+    cursor: pointer;
+    color: var(--ngaf-chat-text);
+    font-size: var(--ngaf-chat-font-size-sm);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background: transparent;
+    border: 0;
+    text-align: left;
+    width: 100%;
+    box-sizing: border-box;
+    transition: background-color 150ms ease;
+  }
+  .chat-thread-list__item:hover { background: color-mix(in srgb, var(--ngaf-chat-text) 5%, transparent); }
+  .chat-thread-list__item[data-active="true"] { background: var(--ngaf-chat-surface-alt); font-weight: 500; }
+  .chat-thread-list__new {
+    display: block;
+    width: 100%;
+    height: 36px;
+    margin-bottom: var(--ngaf-chat-space-2);
+    border: 1px dashed var(--ngaf-chat-separator);
+    border-radius: var(--ngaf-chat-radius-button);
+    background: transparent;
+    color: var(--ngaf-chat-primary);
+    cursor: pointer;
+    font-size: var(--ngaf-chat-font-size-sm);
+    box-sizing: border-box;
+    transition: background 150ms ease;
+  }
+  .chat-thread-list__new:hover { background: var(--ngaf-chat-surface-alt); }
+`;
diff --git a/libs/chat/src/lib/styles/chat-tokens.ts b/libs/chat/src/lib/styles/chat-tokens.ts
new file mode 100644
index 000000000..17760ebd5
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-tokens.ts
@@ -0,0 +1,112 @@
+// libs/chat/src/lib/styles/chat-tokens.ts
+// SPDX-License-Identifier: MIT
+
+const LIGHT_TOKENS = `
+  --ngaf-chat-bg: rgb(255, 255, 255);
+  --ngaf-chat-surface: rgb(255, 255, 255);
+  --ngaf-chat-surface-alt: rgb(251, 251, 251);
+  --ngaf-chat-primary: rgb(28, 28, 28);
+  --ngaf-chat-on-primary: rgb(255, 255, 255);
+  --ngaf-chat-text: rgb(28, 28, 28);
+  --ngaf-chat-text-muted: rgb(115, 115, 115);
+  --ngaf-chat-separator: rgb(229, 229, 229);
+  --ngaf-chat-muted: rgb(200, 200, 200);
+  --ngaf-chat-error-bg: #fef2f2;
+  --ngaf-chat-error-border: #fecaca;
+  --ngaf-chat-error-text: #dc2626;
+  --ngaf-chat-warning-bg: #fffbeb;
+  --ngaf-chat-warning-text: #b45309;
+  --ngaf-chat-success: #16a34a;
+  --ngaf-chat-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
+  --ngaf-chat-shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
+  --ngaf-chat-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
+`;
+
+const DARK_TOKENS = `
+  --ngaf-chat-bg: rgb(17, 17, 17);
+  --ngaf-chat-surface: rgb(28, 28, 28);
+  --ngaf-chat-surface-alt: rgb(44, 44, 44);
+  --ngaf-chat-primary: rgb(255, 255, 255);
+  --ngaf-chat-on-primary: rgb(28, 28, 28);
+  --ngaf-chat-text: rgb(245, 245, 245);
+  --ngaf-chat-text-muted: rgb(160, 160, 160);
+  --ngaf-chat-separator: rgb(45, 45, 45);
+  --ngaf-chat-muted: rgb(60, 60, 60);
+  --ngaf-chat-error-bg: rgb(45, 21, 21);
+  --ngaf-chat-error-border: #dc2626;
+  --ngaf-chat-error-text: #fca5a5;
+  --ngaf-chat-warning-bg: rgb(45, 35, 21);
+  --ngaf-chat-warning-text: #fbbf24;
+  --ngaf-chat-success: #4ade80;
+`;
+
+const GEOMETRY_TOKENS = `
+  --ngaf-chat-radius-bubble: 15px;
+  --ngaf-chat-radius-input: 20px;
+  --ngaf-chat-radius-card: 8px;
+  --ngaf-chat-radius-button: 8px;
+  --ngaf-chat-radius-launcher: 9999px;
+  --ngaf-chat-max-width: 48rem;
+`;
+
+const TYPOGRAPHY_TOKENS = `
+  --ngaf-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";
+  --ngaf-chat-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --ngaf-chat-font-size: 1rem;
+  --ngaf-chat-font-size-sm: 0.875rem;
+  --ngaf-chat-font-size-xs: 0.75rem;
+  --ngaf-chat-line-height: 1.6;
+  --ngaf-chat-line-height-tight: 1.5;
+`;
+
+const SPACING_TOKENS = `
+  --ngaf-chat-space-1: 4px;
+  --ngaf-chat-space-2: 8px;
+  --ngaf-chat-space-3: 12px;
+  --ngaf-chat-space-4: 16px;
+  --ngaf-chat-space-5: 20px;
+  --ngaf-chat-space-6: 24px;
+  --ngaf-chat-space-8: 32px;
+`;
+
+const KEYFRAMES = `
+  @keyframes ngaf-chat-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  @keyframes ngaf-chat-typing-dot {
+    0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; }
+    40% { transform: scale(1); opacity: 1; }
+  }
+  @keyframes ngaf-chat-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+  }
+  @keyframes ngaf-chat-caret-blink {
+    0%, 50% { opacity: 1; }
+    50.01%, 100% { opacity: 0; }
+  }
+`;
+
+/**
+ * Component-host design tokens. Import into every chat component's `styles`
+ * array so CSS custom properties resolve on `:host` without consumer setup.
+ * Light tokens are default; dark applies via prefers-color-scheme OR via the
+ * `[data-ngaf-chat-theme="dark"]` attribute on the host. Consumers can force
+ * light by setting `[data-ngaf-chat-theme="light"]`.
+ */
+export const CHAT_HOST_TOKENS = `
+  :host {
+    ${LIGHT_TOKENS}
+    ${GEOMETRY_TOKENS}
+    ${TYPOGRAPHY_TOKENS}
+    ${SPACING_TOKENS}
+    font-family: var(--ngaf-chat-font-family);
+    color: var(--ngaf-chat-text);
+  }
+  @media (prefers-color-scheme: dark) {
+    :host:not([data-ngaf-chat-theme="light"]) { ${DARK_TOKENS} }
+  }
+  :host([data-ngaf-chat-theme="dark"]) { ${DARK_TOKENS} }
+  ${KEYFRAMES}
+`;
diff --git a/libs/chat/src/lib/styles/chat-trace.styles.ts b/libs/chat/src/lib/styles/chat-trace.styles.ts
new file mode 100644
index 000000000..408a98357
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-trace.styles.ts
@@ -0,0 +1,37 @@
+// libs/chat/src/lib/styles/chat-trace.styles.ts
+// SPDX-License-Identifier: MIT
+export const CHAT_TRACE_STYLES = `
+  :host { display: block; font-size: var(--ngaf-chat-font-size-sm); }
+  .chat-trace__header {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    cursor: pointer;
+    user-select: none;
+    color: var(--ngaf-chat-text-muted);
+    background: transparent;
+    border: 0;
+    padding: 0;
+    width: 100%;
+    text-align: left;
+    font: inherit;
+  }
+  .chat-trace__chevron {
+    width: 12px;
+    height: 12px;
+    transition: transform 200ms ease;
+    flex-shrink: 0;
+  }
+  :host([data-expanded="true"]) .chat-trace__chevron { transform: rotate(90deg); }
+  .chat-trace__label { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
+  :host([data-state="running"]) .chat-trace__label { animation: ngaf-chat-pulse 1.5s ease-in-out infinite; }
+  :host([data-state="error"]) .chat-trace__label { color: var(--ngaf-chat-error-text); }
+  .chat-trace__content {
+    padding-left: 1rem;
+    padding-top: 0.375rem;
+    margin-left: 0.375rem;
+    border-left: 1px solid var(--ngaf-chat-separator);
+    max-height: 250px;
+    overflow: auto;
+  }
+`;
diff --git a/libs/chat/src/lib/styles/chat-typing-indicator.styles.ts b/libs/chat/src/lib/styles/chat-typing-indicator.styles.ts
new file mode 100644
index 000000000..f5d5ee407
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-typing-indicator.styles.ts
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+export const CHAT_TYPING_INDICATOR_STYLES = `
+  :host { display: block; padding: 0 var(--ngaf-chat-space-6) var(--ngaf-chat-space-3); }
+  .chat-typing__dots { display: inline-flex; gap: 4px; align-items: center; }
+  .chat-typing__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--ngaf-chat-text-muted);
+    animation: ngaf-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; }
+`;
diff --git a/libs/chat/src/lib/styles/chat-window.styles.ts b/libs/chat/src/lib/styles/chat-window.styles.ts
new file mode 100644
index 000000000..3ed251eeb
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat-window.styles.ts
@@ -0,0 +1,35 @@
+// libs/chat/src/lib/styles/chat-window.styles.ts
+// SPDX-License-Identifier: MIT
+export const CHAT_WINDOW_STYLES = `
+  :host {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+    background: var(--ngaf-chat-bg);
+    color: var(--ngaf-chat-text);
+  }
+  .chat-window__header {
+    height: 56px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 var(--ngaf-chat-space-6);
+    border-bottom: 1px solid var(--ngaf-chat-separator);
+    font-weight: 500;
+    color: var(--ngaf-chat-primary);
+  }
+  .chat-window__header:empty { display: none; }
+  .chat-window__body {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .chat-window__footer {
+    flex-shrink: 0;
+  }
+  .chat-window__footer:empty { display: none; }
+`;
diff --git a/libs/chat/src/lib/styles/chat.css b/libs/chat/src/lib/styles/chat.css
new file mode 100644
index 000000000..a06c858ed
--- /dev/null
+++ b/libs/chat/src/lib/styles/chat.css
@@ -0,0 +1,87 @@
+/* libs/chat/src/lib/styles/chat.css */
+/* SPDX-License-Identifier: MIT */
+
+/*
+ * Optional global stylesheet for @ngaf/chat. Import once in your global
+ * styles to:
+ *   1. Override design tokens at :root (instead of per :host).
+ *   2. Reach into chat components with parallel global selectors.
+ *
+ * Usage:
+ *   /* in src/styles.css *​/
+ *   @import '@ngaf/chat/chat.css';
+ *
+ *   :root { --ngaf-chat-primary: oklch(0.55 0.22 264); }
+ */
+
+:root {
+  --ngaf-chat-bg: rgb(255, 255, 255);
+  --ngaf-chat-surface: rgb(255, 255, 255);
+  --ngaf-chat-surface-alt: rgb(251, 251, 251);
+  --ngaf-chat-primary: rgb(28, 28, 28);
+  --ngaf-chat-on-primary: rgb(255, 255, 255);
+  --ngaf-chat-text: rgb(28, 28, 28);
+  --ngaf-chat-text-muted: rgb(115, 115, 115);
+  --ngaf-chat-separator: rgb(229, 229, 229);
+  --ngaf-chat-muted: rgb(200, 200, 200);
+  --ngaf-chat-error-bg: #fef2f2;
+  --ngaf-chat-error-border: #fecaca;
+  --ngaf-chat-error-text: #dc2626;
+  --ngaf-chat-warning-bg: #fffbeb;
+  --ngaf-chat-warning-text: #b45309;
+  --ngaf-chat-success: #16a34a;
+  --ngaf-chat-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
+  --ngaf-chat-shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
+  --ngaf-chat-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
+  --ngaf-chat-radius-bubble: 15px;
+  --ngaf-chat-radius-input: 20px;
+  --ngaf-chat-radius-card: 8px;
+  --ngaf-chat-radius-button: 8px;
+  --ngaf-chat-radius-launcher: 9999px;
+  --ngaf-chat-max-width: 48rem;
+  --ngaf-chat-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --ngaf-chat-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --ngaf-chat-font-size: 1rem;
+  --ngaf-chat-font-size-sm: 0.875rem;
+  --ngaf-chat-font-size-xs: 0.75rem;
+  --ngaf-chat-line-height: 1.6;
+  --ngaf-chat-line-height-tight: 1.5;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-ngaf-chat-theme="light"]) {
+    --ngaf-chat-bg: rgb(17, 17, 17);
+    --ngaf-chat-surface: rgb(28, 28, 28);
+    --ngaf-chat-surface-alt: rgb(44, 44, 44);
+    --ngaf-chat-primary: rgb(255, 255, 255);
+    --ngaf-chat-on-primary: rgb(28, 28, 28);
+    --ngaf-chat-text: rgb(245, 245, 245);
+    --ngaf-chat-text-muted: rgb(160, 160, 160);
+    --ngaf-chat-separator: rgb(45, 45, 45);
+    --ngaf-chat-muted: rgb(60, 60, 60);
+    --ngaf-chat-error-bg: rgb(45, 21, 21);
+    --ngaf-chat-error-border: #dc2626;
+    --ngaf-chat-error-text: #fca5a5;
+    --ngaf-chat-warning-bg: rgb(45, 35, 21);
+    --ngaf-chat-warning-text: #fbbf24;
+    --ngaf-chat-success: #4ade80;
+  }
+}
+
+[data-ngaf-chat-theme="dark"] {
+  --ngaf-chat-bg: rgb(17, 17, 17);
+  --ngaf-chat-surface: rgb(28, 28, 28);
+  --ngaf-chat-surface-alt: rgb(44, 44, 44);
+  --ngaf-chat-primary: rgb(255, 255, 255);
+  --ngaf-chat-on-primary: rgb(28, 28, 28);
+  --ngaf-chat-text: rgb(245, 245, 245);
+  --ngaf-chat-text-muted: rgb(160, 160, 160);
+  --ngaf-chat-separator: rgb(45, 45, 45);
+  --ngaf-chat-muted: rgb(60, 60, 60);
+  --ngaf-chat-error-bg: rgb(45, 21, 21);
+  --ngaf-chat-error-border: #dc2626;
+  --ngaf-chat-error-text: #fca5a5;
+  --ngaf-chat-warning-bg: rgb(45, 35, 21);
+  --ngaf-chat-warning-text: #fbbf24;
+  --ngaf-chat-success: #4ade80;
+}
diff --git a/libs/chat/src/public-api.ts b/libs/chat/src/public-api.ts
index 6741e021f..24e09fa92 100644
--- a/libs/chat/src/public-api.ts
+++ b/libs/chat/src/public-api.ts
@@ -32,9 +32,15 @@ export {
 } from './lib/agent';
 
 // Primitives
-export { ChatMessagesComponent } from './lib/primitives/chat-messages/chat-messages.component';
-export { MessageTemplateDirective } from './lib/primitives/chat-messages/message-template.directive';
-export { getMessageType } from './lib/primitives/chat-messages/chat-messages.component';
+export { ChatMessageListComponent, getMessageType } from './lib/primitives/chat-message-list/chat-message-list.component';
+export { MessageTemplateDirective } from './lib/primitives/chat-message-list/message-template.directive';
+export { ChatMessageComponent } from './lib/primitives/chat-message/chat-message.component';
+export type { ChatMessageRole } from './lib/primitives/chat-message/chat-message.component';
+export { ChatWindowComponent } from './lib/primitives/chat-window/chat-window.component';
+export { ChatTraceComponent } from './lib/primitives/chat-trace/chat-trace.component';
+export type { TraceState } from './lib/primitives/chat-trace/chat-trace.component';
+export { ChatLauncherButtonComponent } from './lib/primitives/chat-launcher-button/chat-launcher-button.component';
+export { ChatSuggestionsComponent } from './lib/primitives/chat-suggestions/chat-suggestions.component';
 export { ChatInputComponent, submitMessage } from './lib/primitives/chat-input/chat-input.component';
 export { ChatTypingIndicatorComponent, isTyping } from './lib/primitives/chat-typing-indicator/chat-typing-indicator.component';
 export { ChatErrorComponent, extractErrorMessage } from './lib/primitives/chat-error/chat-error.component';
@@ -44,6 +50,7 @@ export { ChatSubagentsComponent } from './lib/primitives/chat-subagents/chat-sub
 export { ChatThreadListComponent } from './lib/primitives/chat-thread-list/chat-thread-list.component';
 export type { Thread } from './lib/primitives/chat-thread-list/chat-thread-list.component';
 export { ChatTimelineComponent } from './lib/primitives/chat-timeline/chat-timeline.component';
+export { ChatGenerativeUiComponent } from './lib/primitives/chat-generative-ui/chat-generative-ui.component';
 
 // DI provider
 export { provideChat, CHAT_CONFIG } from './lib/provide-chat';
@@ -51,17 +58,22 @@ export { provideChat, CHAT_CONFIG } from './lib/provide-chat';
 // Compositions
 export { ChatComponent } from './lib/compositions/chat/chat.component';
 export type { ChatRenderEvent } from './lib/compositions/chat/chat-render-event';
+export { ChatPopupComponent } from './lib/compositions/chat-popup/chat-popup.component';
+export { ChatSidebarComponent } from './lib/compositions/chat-sidebar/chat-sidebar.component';
+export { ChatDebugComponent } from './lib/compositions/chat-debug/chat-debug.component';
+export { ChatTimelineSliderComponent } from './lib/compositions/chat-timeline-slider/chat-timeline-slider.component';
 export { ChatInterruptPanelComponent } from './lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component';
 export type { InterruptAction } from './lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component';
 export { ChatToolCallCardComponent } from './lib/compositions/chat-tool-call-card/chat-tool-call-card.component';
 export type { ToolCallInfo } from './lib/compositions/chat-tool-call-card/chat-tool-call-card.component';
-export { ChatSubagentCardComponent } from './lib/compositions/chat-subagent-card/chat-subagent-card.component';
-export { ChatTimelineSliderComponent } from './lib/compositions/chat-timeline-slider/chat-timeline-slider.component';
-export { ChatDebugComponent } from './lib/compositions/chat-debug/chat-debug.component';
+export { ChatSubagentCardComponent, statusColor } from './lib/compositions/chat-subagent-card/chat-subagent-card.component';
+
+// Streaming
+export { ChatStreamingMdComponent } from './lib/streaming/streaming-markdown.component';
 
 // Shared styles & utilities
-export { CHAT_THEME_STYLES } from './lib/styles/chat-theme';
-export { CHAT_MARKDOWN_STYLES, renderMarkdown } from './lib/styles/chat-markdown';
+export { CHAT_MARKDOWN_STYLES } from './lib/styles/chat-markdown.styles';
+export { renderMarkdown } from './lib/streaming/markdown-render';
 export { messageContent } from './lib/compositions/shared/message-utils';
 export {
   ICON_CHEVRON_DOWN, ICON_CHEVRON_UP, ICON_TOOL,
diff --git a/libs/example-layouts/src/lib/example-chat-layout.component.spec.ts b/libs/example-layouts/src/lib/example-chat-layout.component.spec.ts
index 2c774b3d3..9e39e461b 100644
--- a/libs/example-layouts/src/lib/example-chat-layout.component.spec.ts
+++ b/libs/example-layouts/src/lib/example-chat-layout.component.spec.ts
@@ -29,7 +29,7 @@ class NoSidebarHostComponent {}
   standalone: true,
   imports: [ExampleChatLayoutComponent],
   template: `
-    
+    
       
Main

       
Sidebar

     
@@ -41,7 +41,7 @@ class LeftSidebarHostComponent {}
   standalone: true,
   imports: [ExampleChatLayoutComponent],
   template: `
-    
+    
       
Main

       
Sidebar

     
@@ -63,7 +63,7 @@ describe('ExampleChatLayoutComponent', () => {
     expect(el.querySelector('[data-testid="sidebar-content"]')?.textContent).toBe('Sidebar Content');
   });
 
-  it('should use flex-col md:flex-row for responsive layout', async () => {
+  it('should render .layout and .layout--sidebar-right for default right position', async () => {
     await TestBed.configureTestingModule({
       imports: [TestHostComponent],
     }).compileComponents();
@@ -72,40 +72,40 @@ describe('ExampleChatLayoutComponent', () => {
     fixture.detectChanges();
 
     const el = fixture.nativeElement as HTMLElement;
-    const flexContainer = el.querySelector('.flex.flex-col');
-    expect(flexContainer).toBeTruthy();
-    expect(flexContainer?.classList.contains('md:flex-row')).toBe(true);
+    const layoutEl = el.querySelector('.layout');
+    expect(layoutEl).toBeTruthy();
+    expect(layoutEl?.classList.contains('layout--sidebar-right')).toBe(true);
   });
 
-  it('should hide aside when no sidebar content is projected', async () => {
+  it('should render .layout__main and .layout__sidebar containers', async () => {
     await TestBed.configureTestingModule({
-      imports: [NoSidebarHostComponent],
+      imports: [TestHostComponent],
     }).compileComponents();
 
-    const fixture = TestBed.createComponent(NoSidebarHostComponent);
+    const fixture = TestBed.createComponent(TestHostComponent);
     fixture.detectChanges();
 
     const el = fixture.nativeElement as HTMLElement;
-    expect(el.querySelector('[data-testid="main-only"]')?.textContent).toBe('Main Only');
-    const aside = el.querySelector('aside');
-    expect(aside).toBeTruthy();
-    expect(aside?.children.length).toBe(0);
+    expect(el.querySelector('.layout__main')).toBeTruthy();
+    expect(el.querySelector('.layout__sidebar')).toBeTruthy();
   });
 
-  it('should apply md:flex-row-reverse for left sidebar position', async () => {
+  it('should hide aside when no sidebar content is projected', async () => {
     await TestBed.configureTestingModule({
-      imports: [LeftSidebarHostComponent],
+      imports: [NoSidebarHostComponent],
     }).compileComponents();
 
-    const fixture = TestBed.createComponent(LeftSidebarHostComponent);
+    const fixture = TestBed.createComponent(NoSidebarHostComponent);
     fixture.detectChanges();
 
     const el = fixture.nativeElement as HTMLElement;
-    const flexContainer = el.querySelector('.flex.flex-col');
-    expect(flexContainer?.classList.contains('md:flex-row-reverse')).toBe(true);
+    expect(el.querySelector('[data-testid="main-only"]')?.textContent).toBe('Main Only');
+    const aside = el.querySelector('aside');
+    expect(aside).toBeTruthy();
+    expect(aside?.children.length).toBe(0);
   });
 
-  it('should use border-r instead of border-l for left sidebar', async () => {
+  it('should apply layout--sidebar-left for left sidebar position', async () => {
     await TestBed.configureTestingModule({
       imports: [LeftSidebarHostComponent],
     }).compileComponents();
@@ -114,12 +114,12 @@ describe('ExampleChatLayoutComponent', () => {
     fixture.detectChanges();
 
     const el = fixture.nativeElement as HTMLElement;
-    const aside = el.querySelector('aside');
-    expect(aside?.classList.contains('md:border-r')).toBe(true);
-    expect(aside?.classList.contains('md:border-l')).toBe(false);
+    const layoutEl = el.querySelector('.layout');
+    expect(layoutEl?.classList.contains('layout--sidebar-left')).toBe(true);
+    expect(layoutEl?.classList.contains('layout--sidebar-right')).toBe(false);
   });
 
-  it('should apply custom sidebar width class', async () => {
+  it('should bind custom sidebar width as CSS custom property', async () => {
     await TestBed.configureTestingModule({
       imports: [CustomWidthHostComponent],
     }).compileComponents();
@@ -128,11 +128,12 @@ describe('ExampleChatLayoutComponent', () => {
     fixture.detectChanges();
 
     const el = fixture.nativeElement as HTMLElement;
-    const aside = el.querySelector('aside');
-    expect(aside?.classList.contains('md:w-80')).toBe(true);
+    const layoutEl = el.querySelector('.layout') as HTMLElement;
+    expect(layoutEl).toBeTruthy();
+    expect(layoutEl?.style.getPropertyValue('--example-layout-sidebar-width')).toBe('20rem');
   });
 
-  it('should apply default w-72 sidebar width', async () => {
+  it('should use default sidebarWidth of 18rem', async () => {
     await TestBed.configureTestingModule({
       imports: [TestHostComponent],
     }).compileComponents();
@@ -141,8 +142,8 @@ describe('ExampleChatLayoutComponent', () => {
     fixture.detectChanges();
 
     const el = fixture.nativeElement as HTMLElement;
-    const aside = el.querySelector('aside');
-    expect(aside?.classList.contains('md:w-72')).toBe(true);
+    const layoutEl = el.querySelector('.layout') as HTMLElement;
+    expect(layoutEl?.style.getPropertyValue('--example-layout-sidebar-width')).toBe('18rem');
   });
 
   it('should set host to full viewport height', async () => {
diff --git a/libs/example-layouts/src/lib/example-chat-layout.component.ts b/libs/example-layouts/src/lib/example-chat-layout.component.ts
index b94aa62be..ea70290e7 100644
--- a/libs/example-layouts/src/lib/example-chat-layout.component.ts
+++ b/libs/example-layouts/src/lib/example-chat-layout.component.ts
@@ -1,54 +1,57 @@
-import { Component, computed, input } from '@angular/core';
+// libs/example-layouts/src/lib/example-chat-layout.component.ts
+// SPDX-License-Identifier: MIT
+import { Component, ChangeDetectionStrategy, input } from '@angular/core';
 
-/**
- * Responsive chat-style layout with a main content area and optional sidebar.
- *
- * Content projection slots:
- * - `[main]` — primary content area (required)
- * - `[sidebar]` — optional sidebar that stacks below on mobile, beside on desktop
- *
- * When no `[sidebar]` content is projected, the `