feat(web): improve streaming chat continuity readability (#1617)

* fix: coalesce transient chat status updates

* feat(web): improve streaming thinking and tool readability

Author: knosence

packages/web/src/components/chat/ChatInterface.tsx

@@ -29,6 +29,7 @@ import type {
   WorkflowDispatchEvent,
 } from '@/lib/types';
 import { applyOnText } from '@/lib/chat-message-reducer';
+import { applySystemStatus } from '@/lib/system-status-reducer';
 import {
   getCachedMessages,
   setCachedMessages,
@@ -563,15 +564,7 @@ export function ChatInterface({ conversationId }: ChatInterfaceProps): React.Rea
   );
 
   const onSystemStatus = useCallback((content: string): void => {
-    setMessages(prev => [
-      ...prev,
-      {
-        id: nextId(),
-        role: 'system' as const,
-        content,
-        timestamp: Date.now(),
-      },
-    ]);
+    setMessages(prev => applySystemStatus(prev, content, nextId));
   }, []);
 
   const { connected } = useSSE(isNewChat ? null : conversationId, {

packages/web/src/components/chat/MessageBubble.tsx

@@ -222,16 +222,20 @@ function MessageBubbleRaw({ message }: MessageBubbleProps): React.ReactElement {
           ) : (
             <div className="chat-markdown max-w-none text-sm text-text-primary">
               {isThinking && (
-                <div className="flex items-center gap-1.5 py-1">
-                  <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-text-tertiary" />
-                  <span
-                    className="h-1.5 w-1.5 animate-pulse rounded-full bg-text-tertiary"
-                    style={{ animationDelay: '0.2s' }}
-                  />
-                  <span
-                    className="h-1.5 w-1.5 animate-pulse rounded-full bg-text-tertiary"
-                    style={{ animationDelay: '0.4s' }}
-                  />
+                <div className="flex items-center gap-2 py-1 text-sm text-text-tertiary">
+                  <span className="sr-only">Thinking</span>
+                  <span className="font-medium">Thinking</span>
+                  <div className="flex items-center gap-1.5" aria-hidden="true">
+                    <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-text-tertiary" />
+                    <span
+                      className="h-1.5 w-1.5 animate-pulse rounded-full bg-text-tertiary"
+                      style={{ animationDelay: '0.2s' }}
+                    />
+                    <span
+                      className="h-1.5 w-1.5 animate-pulse rounded-full bg-text-tertiary"
+                      style={{ animationDelay: '0.4s' }}
+                    />
+                  </div>
                 </div>
               )}
               {isJsonString(message.content) ? (

packages/web/src/components/chat/ToolCallCard.tsx

@@ -34,6 +34,11 @@ export function ToolCallCard({ tool }: ToolCallCardProps): React.ReactElement {
   const outputLines = tool.output?.split('\n') ?? [];
   const isLongOutput = outputLines.length > 20;
   const displayOutput = showAllOutput ? tool.output : outputLines.slice(0, 20).join('\n');
+  const outputPreview = outputLines
+    .map(line => line.trim())
+    .find(line => line.length > 0)
+    ?.slice(0, 80);
+  const statusLabel = isRunning ? 'Running' : tool.output !== undefined ? 'Complete' : 'Done';
 
   return (
     <div
@@ -61,7 +66,14 @@ export function ToolCallCard({ tool }: ToolCallCardProps): React.ReactElement {
           <Terminal className="h-3.5 w-3.5 shrink-0 text-text-secondary" />
         )}
         <span className="truncate font-mono text-xs text-text-secondary">{tool.name}</span>
-        {summaryText && <span className="truncate text-xs text-text-tertiary">{summaryText}</span>}
+        <span className="shrink-0 rounded-full bg-surface-elevated px-2 py-0.5 text-[10px] text-text-secondary">
+          {statusLabel}
+        </span>
+        {summaryText ? (
+          <span className="truncate text-xs text-text-tertiary">{summaryText}</span>
+        ) : outputPreview ? (
+          <span className="truncate text-xs text-text-tertiary">{outputPreview}</span>
+        ) : null}
         <span className="ml-auto shrink-0">
           {isRunning && elapsed > 0 ? (
             <span className="rounded-full bg-primary/20 px-2 py-0.5 text-[10px] text-primary">

packages/web/src/lib/system-status-reducer.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, test } from 'bun:test';
+import { applySystemStatus } from './system-status-reducer';
+import type { ChatMessage } from './types';
+
+let idCounter = 0;
+function makeId(): string {
+  idCounter++;
+  return `msg-${String(idCounter)}`;
+}
+
+const NOW = 1000;
+
+describe('applySystemStatus', () => {
+  test('appends a new system message when previous message is not system', () => {
+    const prev: ChatMessage[] = [{ id: 'u1', role: 'user', content: 'hi', timestamp: NOW }];
+    const result = applySystemStatus(prev, 'Connecting…', makeId, NOW + 1);
+
+    expect(result).toHaveLength(2);
+    expect(result[1]).toEqual({
+      id: 'msg-1',
+      role: 'system',
+      content: 'Connecting…',
+      timestamp: NOW + 1,
+    });
+  });
+
+  test('coalesces consecutive system status updates into one row', () => {
+    const prev: ChatMessage[] = [
+      { id: 'sys-1', role: 'system', content: 'Connecting…', timestamp: NOW },
+    ];
+    const result = applySystemStatus(prev, 'Waiting for tools…', makeId, NOW + 2);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      id: 'sys-1',
+      role: 'system',
+      content: 'Waiting for tools…',
+      timestamp: NOW + 2,
+    });
+  });
+
+  test('preserves earlier non-system history when coalescing', () => {
+    const prev: ChatMessage[] = [
+      { id: 'u1', role: 'user', content: 'run it', timestamp: NOW },
+      { id: 'sys-1', role: 'system', content: 'Starting…', timestamp: NOW + 1 },
+    ];
+    const result = applySystemStatus(prev, 'Streaming…', makeId, NOW + 3);
+
+    expect(result).toHaveLength(2);
+    expect(result[0]).toBe(prev[0]);
+    expect(result[1].content).toBe('Streaming…');
+    expect(result[1].timestamp).toBe(NOW + 3);
+  });
+});

packages/web/src/lib/system-status-reducer.ts

@@ -0,0 +1,37 @@
+import type { ChatMessage } from './types';
+
+/**
+ * Append a system-status line to the chat while coalescing consecutive status updates.
+ *
+ * Continuity goal: when multiple transient status updates arrive back-to-back,
+ * keep a single evolving system row instead of stacking flickery one-line rows.
+ */
+export function applySystemStatus(
+  prev: ChatMessage[],
+  content: string,
+  makeId: () => string = () => `msg-${String(Date.now())}`,
+  now: number = Date.now()
+): ChatMessage[] {
+  const last = prev[prev.length - 1];
+
+  if (last?.role === 'system') {
+    return [
+      ...prev.slice(0, -1),
+      {
+        ...last,
+        content,
+        timestamp: now,
+      },
+    ];
+  }
+
+  return [
+    ...prev,
+    {
+      id: makeId(),
+      role: 'system',
+      content,
+      timestamp: now,
+    },
+  ];
+}