fix: chat ui fixes

Author: Davidknp

apps/emdash-desktop/src/renderer/features/tasks/conversations/chat/chat-store.ts

@@ -96,16 +96,6 @@ export class ChatStore {
   /** Bound chat-ui transcript — set when the ChatTranscript component mounts. */
   private _transcript: TranscriptApi | null = null;
 
-  /**
-   * Accumulated thinking text keyed by thinking-id.
-   * upsertThinking() takes full text (not deltas), so we accumulate here then pass
-   * the growing string on each chunk.
-   */
-  private _thinkingTextMap = new Map<string, string>();
-
-  /** Epoch ms when the first thought chunk of the current turn arrived. */
-  private _thinkingStartedAt: number | null = null;
-
   constructor(conversationId: string, projectId: string, taskId: string, initialModel?: string) {
     this._conversationId = conversationId;
     this._projectId = projectId;
@@ -156,8 +146,6 @@ export class ChatStore {
           if (payload.phase === 'start') {
             this.items = [];
             this._streamKeyMap.clear();
-            this._thinkingTextMap.clear();
-            this._thinkingStartedAt = null;
             this.isClosed = false;
             this._transcript?.reset();
           } else {
@@ -202,8 +190,8 @@ export class ChatStore {
       text,
       streaming: false,
     });
-    this._transcript?.appendMessageChunk('user', userId, text);
-    this._transcript?.finalizeTurn();
+    this._transcript?.dispatch({ type: 'message_chunk', role: 'user', id: userId, text });
+    this._transcript?.dispatch({ type: 'turn_done' });
 
     void rpc.acp
       .prompt(this._conversationId, text)
@@ -274,26 +262,24 @@ export class ChatStore {
       const existing = this._streamKeyMap.get(streamKey);
       if (existing) {
         existing.text += text;
-        this._transcript?.appendMessageChunk(role, messageId, text);
-        return;
+      } else {
+        const created = this._pushMessage(role, text);
+        this._streamKeyMap.set(streamKey, created);
       }
-      const created = this._pushMessage(role, text);
-      this._streamKeyMap.set(streamKey, created);
-      this._transcript?.appendMessageChunk(role, messageId, text);
+      this._transcript?.dispatch({ type: 'message_chunk', role, id: messageId, text });
       return;
     }
 
     // No messageId: append to the trailing bubble if it's the same role and still
     // streaming; otherwise start a new bubble.
     const last = this.items.at(-1);
-    const syntheticId = `${role}-${Date.now()}-${Math.random()}`;
     if (last && last.kind === 'message' && last.role === role && last.streaming) {
       last.text += text;
-      this._transcript?.appendMessageChunk(role, last.id, text);
+      this._transcript?.dispatch({ type: 'message_chunk', role, id: last.id, text });
       return;
     }
-    this._pushMessage(role, text);
-    this._transcript?.appendMessageChunk(role, syntheticId, text);
+    const created = this._pushMessage(role, text);
+    this._transcript?.dispatch({ type: 'message_chunk', role, id: created.id, text });
   }
 
   private _appendThinkingChunk(
@@ -303,7 +289,7 @@ export class ChatStore {
       chunk.content.type === 'text' ? ((chunk.content as { text?: string }).text ?? '') : '';
     const thinkingId = chunk.messageId ?? `thought-${Date.now()}`;
 
-    // Mirror into items[] as a legacy thought message for hydration fallback.
+    // Mirror into items[] as a legacy thought message for seed() hydration.
     const streamKey = `thought:${thinkingId}`;
     const existing = this._streamKeyMap.get(streamKey);
     if (existing) {
@@ -313,18 +299,8 @@ export class ChatStore {
       this._streamKeyMap.set(streamKey, created);
     }
 
-    // Drive TranscriptApi with full accumulated text (upsertThinking is not delta).
-    const accumulated = (this._thinkingTextMap.get(thinkingId) ?? '') + text;
-    this._thinkingTextMap.set(thinkingId, accumulated);
-    if (this._thinkingStartedAt === null) {
-      this._thinkingStartedAt = Date.now();
-    }
-    this._transcript?.upsertThinking({
-      id: thinkingId,
-      text: accumulated,
-      status: 'thinking',
-      startedAt: this._thinkingStartedAt,
-    });
+    // The transcript reducer owns startedAt and text accumulation — just dispatch the delta.
+    this._transcript?.dispatch({ type: 'thinking_chunk', id: thinkingId, text });
   }
 
   private _pushMessage(
@@ -358,6 +334,13 @@ export class ChatStore {
       if (patch.toolName !== undefined) existing.toolName = patch.toolName;
       if (patch.status !== undefined) existing.status = patch.status;
       if (patch.inputSummary !== undefined) existing.inputSummary = patch.inputSummary;
+      this._transcript?.dispatch({
+        type: 'tool_update',
+        id: patch.toolCallId,
+        status: patch.status,
+        name: patch.toolName,
+        inputSummary: patch.inputSummary,
+      });
     } else {
       this.items.push({
         kind: 'tool',
@@ -367,13 +350,13 @@ export class ChatStore {
         status: patch.status ?? 'running',
         inputSummary: patch.inputSummary,
       });
+      this._transcript?.dispatch({
+        type: 'tool_start',
+        id: patch.toolCallId,
+        name: patch.toolName ?? '(tool)',
+        inputSummary: patch.inputSummary,
+      });
     }
-    this._transcript?.upsertTool({
-      id: patch.toolCallId,
-      name: patch.toolName ?? '(tool)',
-      status: patch.status ?? 'running',
-      inputSummary: patch.inputSummary,
-    });
   }
 
   /** Marks all streaming message bubbles as settled and commits the active turn. */
@@ -382,9 +365,7 @@ export class ChatStore {
       if (item.kind === 'message') item.streaming = false;
     }
     this._streamKeyMap.clear();
-    this._thinkingTextMap.clear();
-    this._thinkingStartedAt = null;
-    this._transcript?.finalizeTurn();
+    this._transcript?.dispatch({ type: 'turn_done' });
   }
 
   private _summarizeInput(input: unknown): string | undefined {

apps/emdash-desktop/src/renderer/features/tasks/view/pane-content.tsx

@@ -1,5 +1,6 @@
 import { useDroppable } from '@dnd-kit/core';
 import { observer } from 'mobx-react-lite';
+import { useRef } from 'react';
 import { BrowserPane } from '@renderer/features/browser/browser-pane';
 import { ShowHide } from '@renderer/lib/ui/show-hide';
 import { ChatPanel } from '../conversations/chat/chat-panel';
@@ -20,6 +21,19 @@ export const PaneContent = observer(function PaneContent() {
 
   const paneRenderer = resolvePaneRenderer(paneTabManager);
 
+  // Chat tabs are kept alive using visibility-based stacking so that:
+  // 1. Each conversation gets its own ChatPanel instance, keyed by conversationId,
+  //    ensuring the transcript is bound to the correct ChatStore on mount.
+  // 2. Switching tabs toggles visibility (not display), preserving scroll position
+  //    and the virtualizer's scroll signal — no desync, no flicker, no re-seed.
+  // activatedSet tracks which chats have been viewed at least once (lazy mount).
+  // Must be called unconditionally (Rules of Hooks) before any early return.
+  const chatTabs = paneTabManager.resolvedTabs.filter((t) => t.kind === 'chat');
+  const activatedSetRef = useRef<Set<string>>(new Set());
+  for (const t of chatTabs) {
+    if (t.isActive) activatedSetRef.current.add(t.conversationId);
+  }
+
   if (!paneRenderer) {
     return <PaneEmptyState />;
   }
@@ -34,7 +48,23 @@ export const PaneContent = observer(function PaneContent() {
         <ShowHide visible={paneRenderer.kind === 'pty-agent'}>
           <ConversationsPanel />
         </ShowHide>
-        {paneRenderer.kind === 'chat' && <ChatPanel conversationId={paneRenderer.conversationId} />}
+
+        {/* Chat pane pool — one ChatPanel per opened chat tab, visibility-toggled */}
+        {chatTabs
+          .filter((t) => activatedSetRef.current.has(t.conversationId))
+          .map((t) => (
+            <div
+              key={t.conversationId}
+              className="absolute inset-0"
+              style={{
+                visibility: t.isActive ? 'visible' : 'hidden',
+                zIndex: t.isActive ? 1 : 0,
+              }}
+            >
+              <ChatPanel conversationId={t.conversationId} />
+            </div>
+          ))}
+
         {paneRenderer.kind === 'browser' && <BrowserPane browserId={paneRenderer.browserId} />}
         {paneRenderer.kind === 'file' && <FileRenderer tab={paneRenderer.tab} />}
         {paneRenderer.kind === 'file-diff' && <DiffView tab={paneRenderer.tab} />}

packages/chat-ui/src/ChatRoot.tsx

@@ -201,6 +201,10 @@ export function ChatRoot(props: ChatRootProps) {
     };
 
     const onScroll = () => {
+      // Ignore events fired while the element is detached (display:none resets
+      // scrollTop to 0 without firing a real user scroll; let the saved signal
+      // remain authoritative so the virtualizer position is preserved).
+      if (scrollEl.offsetParent === null) return;
       // Ignore the event we triggered ourselves during anchor correction;
       // the scrollTop signal was already updated synchronously there.
       if (programmaticScroll) {

packages/chat-ui/src/chat.module.css

@@ -28,11 +28,14 @@
   left: 0;
   width: 100%;
   will-change: transform;
-  content-visibility: auto;
-  /* Placeholder size for rows skipped by content-visibility, so the browser
-     doesn't have to lay them out to discover their height. */
-  contain-intrinsic-size: auto 60px;
   /* Isolate paint/layout/style recalc within each row. NOT `contain: size`
-     so offsetHeight measurements remain correct. */
+     so offsetHeight measurements remain correct.
+
+     NB: `content-visibility: auto` is intentionally NOT used here. The JS
+     virtualizer already keeps only visible + overscan rows in the DOM, so
+     browser-level culling is redundant — and it actively broke tall rows: a
+     message taller than the `contain-intrinsic-size` placeholder whose top sat
+     above the viewport was judged off-screen and left blank until its top edge
+     scrolled into view. */
   contain: layout paint style;
 }

packages/chat-ui/src/index.tsx

@@ -15,7 +15,7 @@ import { createViewState } from './state/view-state';
 import type { ViewState } from './state/view-state';
 
 export type { ChatItem, ChatMessage, ChatToolCall, ChatThinking, ChatRole } from './model';
-export type { TranscriptApi } from './state/transcript';
+export type { TranscriptApi, TranscriptEvent } from './state/transcript';
 export type { ViewState } from './state/view-state';
 export { generateMockTranscript } from './mock-transcript';