From aca5b1d339e3bdf0b99043e6d00ff591fa838527 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 6 Apr 2026 11:55:12 -0700
Subject: [PATCH 1/5] fix(stream-resource): fix 3 runtime errors in streaming
 chat flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Guard Object.keys(v) against null/undefined in values$ subscriber
   (stream-resource.fn.ts:94) — crashed when values event had no data

2. Handle plain JSON messages from SSE (not hydrated BaseMessage instances)
   in getMessageType() — _getType() is a class method not available on
   plain objects; fall back to reading the `type` property

3. Fix event data extraction in processEvent — normalizeSdkEvent spreads
   data into the event object, so event['values'] was always undefined;
   use extractEventData() to read from event['data'] instead. Also sync
   messages$ from values events and merge messages/partial updates by id
   to preserve the full message history including human messages.
---
 .../chat-messages/chat-messages.component.ts  |  9 ++-
 .../lib/internals/stream-manager.bridge.ts    | 76 ++++++++++++++++---
 .../src/lib/stream-resource.fn.ts             |  2 +-
 3 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/libs/chat/src/lib/primitives/chat-messages/chat-messages.component.ts b/libs/chat/src/lib/primitives/chat-messages/chat-messages.component.ts
index d0adc213e..6f9c5bb34 100644
--- a/libs/chat/src/lib/primitives/chat-messages/chat-messages.component.ts
+++ b/libs/chat/src/lib/primitives/chat-messages/chat-messages.component.ts
@@ -13,11 +13,16 @@ import { MessageTemplateDirective } from './message-template.directive';
 import type { MessageTemplateType } from '../../chat.types';
 
 /**
- * Maps a LangChain message `_getType()` string to a {@link MessageTemplateType}.
+ * Maps a LangChain message to a {@link MessageTemplateType}.
+ * Handles both class instances (with `_getType()`) and plain objects (with `type` property)
+ * since SSE stream events deliver plain JSON, not hydrated BaseMessage instances.
  * Exported as a standalone function so it can be unit-tested without DOM rendering.
  */
 export function getMessageType(message: BaseMessage): MessageTemplateType {
-  const type = message._getType();
+  // Try class method first, fall back to plain object property
+  const type = typeof message._getType === 'function'
+    ? message._getType()
+    : (message as unknown as Record<string, unknown>)['type'] as string ?? 'ai';
   switch (type) {
     case 'human':
       return 'human';
diff --git a/libs/stream-resource/src/lib/internals/stream-manager.bridge.ts b/libs/stream-resource/src/lib/internals/stream-manager.bridge.ts
index f48d1ca3f..9d53086a9 100644
--- a/libs/stream-resource/src/lib/internals/stream-manager.bridge.ts
+++ b/libs/stream-resource/src/lib/internals/stream-manager.bridge.ts
@@ -102,24 +102,64 @@ export function createStreamManagerBridge<T, ResolvedBag extends BagTemplate = B
     if (isMessagesEvent(event.type)) {
       const msgs = normalizeMessages(event);
       if (!msgs) return;
-      if (options.toMessage) {
-        subjects.messages$.next(msgs.map(options.toMessage));
+
+      const normalized = options.toMessage
+        ? msgs.map(options.toMessage)
+        : msgs as BaseMessage[];
+
+      // For partial streaming events (messages/partial), merge into existing
+      // messages by id instead of replacing — preserves earlier messages
+      // (e.g. human messages) that aren't in the partial update.
+      if (event.type === 'messages/partial') {
+        const existing = subjects.messages$.value;
+        const merged = [...existing];
+        for (const msg of normalized) {
+          const id = (msg as unknown as Record<string, unknown>)['id'];
+          const idx = id ? merged.findIndex(m => (m as unknown as Record<string, unknown>)['id'] === id) : -1;
+          if (idx >= 0) {
+            merged[idx] = msg;
+          } else {
+            merged.push(msg);
+          }
+        }
+        subjects.messages$.next(merged);
       } else {
-        subjects.messages$.next(msgs as BaseMessage[]);
+        subjects.messages$.next(normalized);
       }
       return;
     }
 
+    // normalizeSdkEvent spreads event data directly into the event object,
+    // so the values/updates payload is at event['data'] (the original data object),
+    // NOT at event['values'] or event['updates'].
     switch (event.type) {
-      case 'values':
-        subjects.values$.next(event['values'] as T);
+      case 'values': {
+        const vals = extractEventData(event);
+        if (vals != null) {
+          subjects.values$.next(vals as T);
+          // Also sync messages$ from the values state so the full message
+          // history (including human messages) is available to consumers.
+          const stateMessages = (vals as Record<string, unknown>)['messages'];
+          if (Array.isArray(stateMessages)) {
+            if (options.toMessage) {
+              subjects.messages$.next(stateMessages.map(options.toMessage));
+            } else {
+              subjects.messages$.next(stateMessages as BaseMessage[]);
+            }
+          }
+        }
         break;
-      case 'updates':
-        subjects.values$.next({
-          ...subjects.values$.value,
-          ...(event['updates'] as object),
-        } as T);
+      }
+      case 'updates': {
+        const upd = extractEventData(event);
+        if (upd != null) {
+          subjects.values$.next({
+            ...subjects.values$.value,
+            ...(upd as object),
+          } as T);
+        }
         break;
+      }
       case 'error':
         subjects.error$.next(event['error']);
         subjects.status$.next(ResourceStatus.Error);
@@ -177,6 +217,22 @@ export function createStreamManagerBridge<T, ResolvedBag extends BagTemplate = B
   };
 }
 
+/**
+ * Extracts the payload data from a normalized SDK event.
+ * normalizeSdkEvent spreads record data into the event object and also
+ * stores the original under event['data']. Prefer event['data'] when
+ * it's a record; fall back to stripping event metadata keys.
+ */
+function extractEventData(event: StreamEvent): unknown {
+  const d = event['data'];
+  if (d != null && typeof d === 'object' && !Array.isArray(d)) {
+    return d;
+  }
+  // Fallback: the data was spread into the event — reconstruct
+  const { type: _t, data: _d, ...rest } = event;
+  return Object.keys(rest).length > 0 ? rest : d;
+}
+
 function isMessagesEvent(type: StreamEvent['type']): boolean {
   return type === 'messages' || type.startsWith('messages/');
 }
diff --git a/libs/stream-resource/src/lib/stream-resource.fn.ts b/libs/stream-resource/src/lib/stream-resource.fn.ts
index 517459317..faa25aeb1 100644
--- a/libs/stream-resource/src/lib/stream-resource.fn.ts
+++ b/libs/stream-resource/src/lib/stream-resource.fn.ts
@@ -91,7 +91,7 @@ export function streamResource<
 
   // Track hasValue — becomes true once values or messages arrive
   values$.pipe(takeUntil(destroy$)).subscribe(v => {
-    if (Object.keys(v as object).length > 0) hasValue$.next(true);
+    if (v != null && Object.keys(v as object).length > 0) hasValue$.next(true);
   });
   messages$.pipe(takeUntil(destroy$)).subscribe(m => { if (m.length > 0) hasValue$.next(true); });
 

From 7214a96e9197c8d1ca9f07441071796c040639a4 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 6 Apr 2026 12:49:53 -0700
Subject: [PATCH 2/5] fix(chat): fix ViewEncapsulation breaking all CSS theme
 variables

ViewEncapsulation.None caused :host selectors in CHAT_THEME_STYLES
to not match anything (no shadow DOM = :host doesn't apply). All
40+ CSS custom properties were empty, breaking the entire design.

Fix: remove ViewEncapsulation.None from ChatComponent and
ChatDebugComponent (default Emulated encapsulation processes :host
correctly). Prefix markdown styles with ::ng-deep for innerHTML
content penetration.
---
 .../chat-debug/chat-debug.component.ts        |  2 --
 .../lib/compositions/chat/chat.component.ts   |  2 --
 libs/chat/src/lib/styles/chat-markdown.ts     | 34 +++++++++----------
 3 files changed, 17 insertions(+), 21 deletions(-)

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 11a126a27..90c4a9e8f 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
@@ -9,7 +9,6 @@ import {
   viewChild,
   ElementRef,
   ChangeDetectionStrategy,
-  ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import type { StreamResourceRef } from '@cacheplane/stream-resource';
@@ -43,7 +42,6 @@ import { CHAT_MARKDOWN_STYLES, renderMarkdown } from '../../styles/chat-markdown
     DebugSummaryComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
   styles: [CHAT_THEME_STYLES, CHAT_MARKDOWN_STYLES],
   template: `
     <div class="flex h-full">
diff --git a/libs/chat/src/lib/compositions/chat/chat.component.ts b/libs/chat/src/lib/compositions/chat/chat.component.ts
index 943e5e797..47ab78335 100644
--- a/libs/chat/src/lib/compositions/chat/chat.component.ts
+++ b/libs/chat/src/lib/compositions/chat/chat.component.ts
@@ -11,7 +11,6 @@ import {
   ElementRef,
   ChangeDetectionStrategy,
   inject,
-  ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import type { StreamResourceRef } from '@cacheplane/stream-resource';
@@ -39,7 +38,6 @@ import { CHAT_MARKDOWN_STYLES, renderMarkdown } from '../../styles/chat-markdown
     ChatThreadListComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
   styles: [CHAT_THEME_STYLES, CHAT_MARKDOWN_STYLES],
   template: `
     <div class="flex h-full overflow-hidden">
diff --git a/libs/chat/src/lib/styles/chat-markdown.ts b/libs/chat/src/lib/styles/chat-markdown.ts
index ca64e2772..ec85e32a4 100644
--- a/libs/chat/src/lib/styles/chat-markdown.ts
+++ b/libs/chat/src/lib/styles/chat-markdown.ts
@@ -52,38 +52,38 @@ export function renderMarkdown(content: string, sanitizer: DomSanitizer): SafeHt
  * Must be included in a component with ViewEncapsulation.None or via ::ng-deep.
  */
 export const CHAT_MARKDOWN_STYLES = `
-  .chat-md p { margin: 0 0 0.75em; }
-  .chat-md p:last-child { margin-bottom: 0; }
-  .chat-md code {
+  :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;
   }
-  .chat-md pre {
+  :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;
   }
-  .chat-md pre code { background: none; padding: 0; }
-  .chat-md ul, .chat-md ol { margin: 0.5em 0; padding-left: 1.5em; }
-  .chat-md li { margin: 0.25em 0; }
-  .chat-md a { color: var(--chat-text); text-decoration: underline; }
-  .chat-md strong { font-weight: 600; }
-  .chat-md blockquote {
+  :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);
   }
-  .chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4 { margin: 1em 0 0.5em; font-weight: 600; }
-  .chat-md h1 { font-size: 1.25em; }
-  .chat-md h2 { font-size: 1.125em; }
-  .chat-md h3 { font-size: 1em; }
-  .chat-md table { border-collapse: collapse; width: 100%; margin: 0.75em 0; }
-  .chat-md th, .chat-md td { border: 1px solid var(--chat-border); padding: 6px 12px; text-align: left; }
-  .chat-md th { background: var(--chat-bg-alt); font-weight: 600; font-size: 0.875em; }
+  :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; }
 `;

From 1e201cceb00d96e2539a7b6df9bc40c11c585fcd Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 6 Apr 2026 12:56:39 -0700
Subject: [PATCH 3/5] fix(chat): replace [innerHTML] icon bindings with inline
 SVG (sanitizer fix)

---
 .../chat-interrupt-panel.component.ts                 |  4 +---
 .../chat-subagent-card.component.ts                   |  8 ++------
 .../chat-tool-call-card.component.ts                  | 11 +++--------
 3 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts b/libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts
index a73dddd1b..5df1a40ef 100644
--- a/libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts
+++ b/libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts
@@ -7,7 +7,6 @@ import {
   ChangeDetectionStrategy,
 } from '@angular/core';
 import type { StreamResourceRef } from '@cacheplane/stream-resource';
-import { ICON_WARNING } from '../../styles/chat-icons';
 
 export type InterruptAction = 'accept' | 'edit' | 'respond' | 'ignore';
 
@@ -24,7 +23,7 @@ export type InterruptAction = 'accept' | 'edit' | 'respond' | 'ignore';
       >
         <!-- Warning header -->
         <div class="flex items-start gap-2">
-          <span style="color: var(--chat-warning-text);" [innerHTML]="warningIcon"></span>
+          <span style="color: var(--chat-warning-text);"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>
           <div class="flex-1">
             <h3 class="text-sm font-semibold m-0" style="color: var(--chat-warning-text);">Agent Interrupt</h3>
             <p class="text-sm mt-1 mb-0" style="color: var(--chat-warning-text);">{{ interruptPayload() }}</p>
@@ -80,7 +79,6 @@ export class ChatInterruptPanelComponent {
 
   readonly action = output<InterruptAction>();
 
-  readonly warningIcon = ICON_WARNING;
 
   readonly interrupt = computed(() => this.ref().interrupt());
 
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 10e70833a..bebc0dab0 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
@@ -7,7 +7,6 @@ import {
   ChangeDetectionStrategy,
 } from '@angular/core';
 import type { SubagentStreamRef } from '@cacheplane/stream-resource';
-import { ICON_AGENT, ICON_CHEVRON_UP, ICON_CHEVRON_DOWN } from '../../styles/chat-icons';
 
 type SubagentStatus = 'pending' | 'running' | 'complete' | 'error';
 
@@ -36,7 +35,7 @@ export { statusColor };
         aria-label="Toggle subagent details"
       >
         <div class="flex items-center gap-2">
-          <span style="color: var(--chat-text-muted);" [innerHTML]="agentIcon"></span>
+          <span style="color: var(--chat-text-muted);"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg></span>
           <span class="text-sm font-medium" [style.color]="'var(--chat-text)'">
             Subagent
             <span class="font-mono text-xs ml-1" style="color: var(--chat-text-muted);">{{ subagent().toolCallId }}</span>
@@ -46,7 +45,7 @@ export { statusColor };
             {{ subagent().status() }}
           </span>
         </div>
-        <span class="text-xs" style="color: var(--chat-text-muted);"><span [innerHTML]="expanded() ? chevronUp : chevronDown"></span></span>
+        <span class="text-xs" style="color: var(--chat-text-muted);">@if (expanded()) {<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5L6 4.5L9 7.5"/></svg>} @else {<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5L6 7.5L9 4.5"/></svg>}</span>
       </button>
 
       <!-- Expanded content -->
@@ -76,9 +75,6 @@ export class ChatSubagentCardComponent {
 
   readonly expanded = signal(false);
 
-  readonly agentIcon = ICON_AGENT;
-  readonly chevronUp = ICON_CHEVRON_UP;
-  readonly chevronDown = ICON_CHEVRON_DOWN;
 
   readonly statusColor = computed(() => statusColor(this.subagent().status()));
 
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 356b0b695..65ad1e008 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
@@ -5,7 +5,6 @@ import {
   signal,
   ChangeDetectionStrategy,
 } from '@angular/core';
-import { ICON_TOOL, ICON_CHECK, ICON_CHEVRON_UP, ICON_CHEVRON_DOWN } from '../../styles/chat-icons';
 
 export interface ToolCallInfo {
   id: string;
@@ -29,13 +28,13 @@ export interface ToolCallInfo {
         aria-label="Toggle tool call details"
       >
         <div class="flex items-center gap-2">
-          <span style="color: var(--chat-text-muted);" [innerHTML]="toolIcon"></span>
+          <span style="color: var(--chat-text-muted);"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg></span>
           <span class="font-mono" [style.color]="'var(--chat-text)'">{{ toolCall().name }}</span>
           @if (toolCall().result !== undefined) {
-            <span class="flex items-center gap-1 text-xs" style="color: var(--chat-success);"><span [innerHTML]="checkIcon"></span> done</span>
+            <span class="flex items-center gap-1 text-xs" style="color: var(--chat-success);"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6L5 8.5L9.5 3.5"/></svg> done</span>
           }
         </div>
-        <span class="text-xs" style="color: var(--chat-text-muted);"><span [innerHTML]="expanded() ? chevronUp : chevronDown"></span></span>
+        <span class="text-xs" style="color: var(--chat-text-muted);">@if (expanded()) {<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5L6 4.5L9 7.5"/></svg>} @else {<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5L6 7.5L9 4.5"/></svg>}</span>
       </button>
 
       <!-- Expanded content: inputs and outputs -->
@@ -61,10 +60,6 @@ export class ChatToolCallCardComponent {
 
   readonly expanded = signal(false);
 
-  readonly toolIcon = ICON_TOOL;
-  readonly checkIcon = ICON_CHECK;
-  readonly chevronUp = ICON_CHEVRON_UP;
-  readonly chevronDown = ICON_CHEVRON_DOWN;
 
   formatJson(value: unknown): string {
     if (typeof value === 'string') return value;

From 287b69b5a8dd9b4fcfca21f15e886df1676b097a Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 6 Apr 2026 12:57:02 -0700
Subject: [PATCH 4/5] fix(chat): center input text, remove Assistant label,
 ChatGPT pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Input: items-end → items-center for vertical centering of single-line text
- Input: inline SVG for send button (replaces [innerHTML] which Angular sanitizes)
- AI messages: remove "Assistant" label, use avatar inline with content (ChatGPT pattern)
- Typing indicator: match new AI message layout (avatar + dots, no label)
---
 .../chat-debug/chat-debug.component.ts        | 17 +++++++--------
 .../lib/compositions/chat/chat.component.ts   | 17 +++++++--------
 .../chat-input/chat-input.component.ts        |  8 +++----
 .../chat-typing-indicator.component.ts        | 21 ++++++++-----------
 4 files changed, 27 insertions(+), 36 deletions(-)

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 90c4a9e8f..bef110142 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
@@ -66,18 +66,15 @@ import { CHAT_MARKDOWN_STYLES, renderMarkdown } from '../../styles/chat-markdown
                 </div>
               </ng-template>
 
-              <!-- AI messages: no bubble, avatar + markdown -->
+              <!-- AI messages: avatar inline with content (ChatGPT pattern) -->
               <ng-template chatMessageTemplate="ai" let-message>
-                <div class="flex flex-col gap-1.5">
-                  <div class="flex items-center gap-2">
-                    <div
-                      class="w-6 h-6 flex items-center justify-center text-[11px] font-semibold shrink-0"
-                      style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
-                    >A</div>
-                    <span class="text-xs font-medium" style="color: var(--chat-text-muted);">Assistant</span>
-                  </div>
+                <div class="flex gap-3">
                   <div
-                    class="chat-md pl-8 break-words text-[length:var(--chat-font-size)] leading-[var(--chat-line-height)]"
+                    class="w-7 h-7 flex items-center justify-center text-xs font-semibold shrink-0 mt-0.5"
+                    style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
+                  >A</div>
+                  <div
+                    class="chat-md flex-1 min-w-0 break-words text-[length:var(--chat-font-size)] leading-[var(--chat-line-height)]"
                     style="color: var(--chat-text);"
                     [innerHTML]="renderMd(messageContent(message))"
                   ></div>
diff --git a/libs/chat/src/lib/compositions/chat/chat.component.ts b/libs/chat/src/lib/compositions/chat/chat.component.ts
index 47ab78335..b869dd0f7 100644
--- a/libs/chat/src/lib/compositions/chat/chat.component.ts
+++ b/libs/chat/src/lib/compositions/chat/chat.component.ts
@@ -107,18 +107,15 @@ import { CHAT_MARKDOWN_STYLES, renderMarkdown } from '../../styles/chat-markdown
                 </div>
               </ng-template>
 
-              <!-- AI messages: no bubble, avatar + markdown -->
+              <!-- AI messages: avatar inline with content (ChatGPT pattern) -->
               <ng-template chatMessageTemplate="ai" let-message>
-                <div class="flex flex-col gap-1.5">
-                  <div class="flex items-center gap-2">
-                    <div
-                      class="w-6 h-6 flex items-center justify-center text-[11px] font-semibold shrink-0"
-                      style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
-                    >A</div>
-                    <span class="text-xs font-medium" style="color: var(--chat-text-muted);">Assistant</span>
-                  </div>
+                <div class="flex gap-3">
                   <div
-                    class="chat-md pl-8 break-words text-[length:var(--chat-font-size)] leading-[var(--chat-line-height)]"
+                    class="w-7 h-7 flex items-center justify-center text-xs font-semibold shrink-0 mt-0.5"
+                    style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
+                  >A</div>
+                  <div
+                    class="chat-md flex-1 min-w-0 break-words text-[length:var(--chat-font-size)] leading-[var(--chat-line-height)]"
                     style="color: var(--chat-text);"
                     [innerHTML]="renderMd(messageContent(message))"
                   ></div>
diff --git a/libs/chat/src/lib/primitives/chat-input/chat-input.component.ts b/libs/chat/src/lib/primitives/chat-input/chat-input.component.ts
index 20b898a24..a5b453496 100644
--- a/libs/chat/src/lib/primitives/chat-input/chat-input.component.ts
+++ b/libs/chat/src/lib/primitives/chat-input/chat-input.component.ts
@@ -9,7 +9,6 @@ import {
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import type { StreamResourceRef } from '@cacheplane/stream-resource';
-import { ICON_SEND } from '../../styles/chat-icons';
 
 export function submitMessage(
   ref: StreamResourceRef<any, any>,
@@ -34,7 +33,7 @@ export function submitMessage(
   template: `
     <form
       (submit)="onSubmit(); $event.preventDefault()"
-      class="flex items-end gap-2 px-4 py-2.5 pl-[18px] border transition-colors duration-150"
+      class="flex items-center gap-2 px-4 py-2.5 pl-[18px] border transition-colors duration-150"
       [style.background]="'var(--chat-input-bg)'"
       [style.borderColor]="focused() ? 'var(--chat-input-focus-border)' : 'var(--chat-input-border)'"
       [style.borderRadius]="'var(--chat-radius-input)'"
@@ -63,8 +62,10 @@ export function submitMessage(
         [style.background]="'var(--chat-send-bg)'"
         [style.color]="'var(--chat-send-text)'"
         aria-label="Send message"
-        [innerHTML]="sendIcon"
       >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M8 12V4M8 4L4 8M8 4L12 8"/>
+        </svg>
       </button>
     </form>
   `,
@@ -77,7 +78,6 @@ export class ChatInputComponent {
   readonly messageText = signal<string>('');
   readonly isDisabled = computed(() => this.ref().isLoading());
   readonly focused = signal(false);
-  readonly sendIcon = ICON_SEND;
 
   onSubmit(): void {
     const submitted = submitMessage(this.ref(), this.messageText());
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 bde3a4708..3859a3e61 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
@@ -33,18 +33,15 @@ export function isTyping(ref: StreamResourceRef<any, any>): boolean {
   `],
   template: `
     @if (visible()) {
-      <div role="status" aria-label="Agent is typing" class="flex flex-col gap-1.5">
-        <div class="flex items-center gap-2">
-          <div
-            class="w-6 h-6 flex items-center justify-center text-[11px] font-semibold shrink-0"
-            style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
-          >A</div>
-          <span class="text-xs font-medium" style="color: var(--chat-text-muted);">Assistant</span>
-          <div class="flex items-center gap-1 pl-1">
-            <span class="chat-dot"></span>
-            <span class="chat-dot"></span>
-            <span class="chat-dot"></span>
-          </div>
+      <div role="status" aria-label="Agent is typing" class="flex items-center gap-3">
+        <div
+          class="w-7 h-7 flex items-center justify-center text-xs font-semibold shrink-0"
+          style="background: var(--chat-avatar-bg); color: var(--chat-avatar-text); border-radius: var(--chat-radius-avatar);"
+        >A</div>
+        <div class="flex items-center gap-1">
+          <span class="chat-dot"></span>
+          <span class="chat-dot"></span>
+          <span class="chat-dot"></span>
         </div>
       </div>
     }

From 6c0a284e9d3abe582ade18ccaad138ba36485fa2 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 6 Apr 2026 13:07:05 -0700
Subject: [PATCH 5/5] fix(stream-resource): handle both SDK and mock event
 formats in extractEventData

---
 .../src/lib/internals/stream-manager.bridge.ts    | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/libs/stream-resource/src/lib/internals/stream-manager.bridge.ts b/libs/stream-resource/src/lib/internals/stream-manager.bridge.ts
index 9d53086a9..0620a6a69 100644
--- a/libs/stream-resource/src/lib/internals/stream-manager.bridge.ts
+++ b/libs/stream-resource/src/lib/internals/stream-manager.bridge.ts
@@ -219,16 +219,23 @@ export function createStreamManagerBridge<T, ResolvedBag extends BagTemplate = B
 
 /**
  * Extracts the payload data from a normalized SDK event.
- * normalizeSdkEvent spreads record data into the event object and also
- * stores the original under event['data']. Prefer event['data'] when
- * it's a record; fall back to stripping event metadata keys.
+ *
+ * Handles two formats:
+ * 1. SDK events (via normalizeSdkEvent): data at event['data'] (record) + spread into event
+ * 2. Mock/test events: data at event[event.type] (e.g., event['values'], event['updates'])
  */
 function extractEventData(event: StreamEvent): unknown {
+  // Try event['data'] first (SDK format from normalizeSdkEvent)
   const d = event['data'];
   if (d != null && typeof d === 'object' && !Array.isArray(d)) {
     return d;
   }
-  // Fallback: the data was spread into the event — reconstruct
+  // Try event[event.type] (mock/test format: { type: 'values', values: {...} })
+  const named = event[event.type];
+  if (named != null && typeof named === 'object' && !Array.isArray(named)) {
+    return named;
+  }
+  // Fallback: reconstruct from remaining keys
   const { type: _t, data: _d, ...rest } = event;
   return Object.keys(rest).length > 0 ? rest : d;
 }