phase 3: compact-on-append parts + drop deltas[] for content prop on typewriter

Author: ammar-agent

src/browser/features/Messages/AssistantMessage.tsx

@@ -184,7 +184,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
     // renders parseIncompleteMarkdown=false, matching the prior static render exactly.
     const contentElement = (
       <TypewriterMarkdown
-        deltas={[content]}
+        content={content}
         isComplete={!isStreaming}
         streamKey={message.historyId}
         streamSource={message.streamPresentation?.source}

src/browser/features/Messages/ReasoningMessage.tsx

@@ -129,9 +129,13 @@ export const ReasoningMessage: React.FC<ReasoningMessageProps> = ({
     // stream end would unmount/remount the markdown subtree and visibly flash the
     // content. isComplete={!isStreaming} cleanly bypasses the smoothing engine once
     // the stream ends, matching the prior static-render behavior.
+    // React Compiler auto-memoizes this normalize call between renders that
+    // share the same `content` value; no manual useMemo needed.
+    const normalizedContent = normalizeReasoningMarkdown(content);
+
     return (
       <TypewriterMarkdown
-        deltas={[normalizeReasoningMarkdown(content)]}
+        content={normalizedContent}
         isComplete={!isStreaming}
         preserveLineBreaks
         streamKey={message.historyId}

src/browser/features/Messages/TypewriterMarkdown.test.tsx

@@ -77,7 +77,7 @@ describe("TypewriterMarkdown", () => {
 
     const view = render(
       <TypewriterMarkdown
-        deltas={["Hello world"]}
+        content="Hello world"
         isComplete={false}
         streamKey="msg-1"
         streamSource="live"
@@ -97,7 +97,7 @@ describe("TypewriterMarkdown", () => {
   test("bypasses smoothing for replay streams", () => {
     render(
       <TypewriterMarkdown
-        deltas={["Replayed content"]}
+        content="Replayed content"
         isComplete={false}
         streamKey="msg-2"
         streamSource="replay"

src/browser/features/Messages/TypewriterMarkdown.tsx

@@ -1,12 +1,13 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { useSmoothStreamingText } from "@/browser/hooks/useSmoothStreamingText";
 import { useWorkspaceStreamingStats } from "@/browser/stores/WorkspaceStore";
 import { cn } from "@/common/lib/utils";
 import { MarkdownCore } from "./MarkdownCore";
 import { StreamingContext } from "./StreamingContext";
 
 interface TypewriterMarkdownProps {
-  deltas: string[];
+  /** Full text to render. During streaming this grows monotonically. */
+  content: string;
   isComplete: boolean;
   className?: string;
   /**
@@ -28,18 +29,19 @@ interface TypewriterMarkdownProps {
   workspaceId?: string;
 }
 
-// Use React.memo to prevent unnecessary re-renders from parent
-export const TypewriterMarkdown = React.memo<TypewriterMarkdownProps>(function TypewriterMarkdown({
-  deltas,
+// React Compiler memoizes this component automatically based on prop changes;
+// no manual React.memo wrapper. The previous deltas: string[] shape forced a new
+// array literal on every parent render and defeated the memo anyway.
+export const TypewriterMarkdown: React.FC<TypewriterMarkdownProps> = ({
+  content,
   isComplete,
   className,
   preserveLineBreaks,
   streamKey,
   streamSource = "live",
   workspaceId,
-}) {
-  const fullContent = deltas.join("");
-  const isStreaming = !isComplete && fullContent.length > 0;
+}) => {
+  const isStreaming = !isComplete && content.length > 0;
 
   // Read the live model emission rate (chars/sec) for the active stream of this
   // workspace. The hook subscribes to its own MapStore so per-delta updates
@@ -49,18 +51,19 @@ export const TypewriterMarkdown = React.memo<TypewriterMarkdownProps>(function T
   const streamingStats = useWorkspaceStreamingStats(workspaceId ?? "");
   const liveCharsPerSec = isStreaming && workspaceId ? (streamingStats?.charsPerSec ?? 0) : 0;
 
-  // Two-clock streaming: ingestion (fullContent) vs presentation (visibleText).
+  // Two-clock streaming: ingestion (content) vs presentation (visibleText).
   // The jitter buffer reveals text at a steady cadence instead of bursty token clumps.
   // Replay and completed streams bypass smoothing entirely.
   const { visibleText } = useSmoothStreamingText({
-    fullText: fullContent,
+    fullText: content,
     isStreaming,
     bypassSmoothing: streamSource === "replay",
     streamKey: streamKey ?? "",
     liveCharsPerSec,
   });
 
-  const streamingContextValue = useMemo(() => ({ isStreaming }), [isStreaming]);
+  // React Compiler memoizes this object; no manual useMemo needed.
+  const streamingContextValue = { isStreaming };
 
   return (
     <StreamingContext.Provider value={streamingContextValue}>
@@ -73,4 +76,4 @@ export const TypewriterMarkdown = React.memo<TypewriterMarkdownProps>(function T
       </div>
     </StreamingContext.Provider>
   );
-});
+};

src/browser/utils/messages/StreamingMessageAggregator.ts

@@ -1898,12 +1898,22 @@ export class StreamingMessageAggregator {
       }
     }
 
-    // Append each delta as a new part (merging happens at display time)
-    message.parts.push({
-      type: "text",
-      text: data.delta,
-      timestamp: data.timestamp,
-    });
+    // Compact-on-append: when the previous part is text (the common case during
+    // a text run), append into it in place instead of growing parts unbounded.
+    // For a 10k-char reply this drops parts.length from thousands to one and
+    // shrinks per-render mergeAdjacentParts cost from O(N) to O(1). The on-disk
+    // format is unaffected — partial.json/chat.jsonl persistence happens
+    // backend-side; this aggregator's parts are pure in-memory display state.
+    const lastPart = message.parts[message.parts.length - 1];
+    if (lastPart?.type === "text") {
+      lastPart.text += data.delta;
+    } else {
+      message.parts.push({
+        type: "text",
+        text: data.delta,
+        timestamp: data.timestamp,
+      });
+    }
 
     // Track delta for token counting and TPS calculation
     this.trackDelta(data.messageId, data.tokens, data.timestamp, "text");
@@ -2459,12 +2469,17 @@ export class StreamingMessageAggregator {
       }
     }
 
-    // Append each delta as a new part (merging happens at display time)
-    message.parts.push({
-      type: "reasoning",
-      text: data.delta,
-      timestamp: data.timestamp,
-    });
+    // Compact-on-append for reasoning runs (same rationale as handleStreamDelta).
+    const lastPart = message.parts[message.parts.length - 1];
+    if (lastPart?.type === "reasoning") {
+      lastPart.text += data.delta;
+    } else {
+      message.parts.push({
+        type: "reasoning",
+        text: data.delta,
+        timestamp: data.timestamp,
+      });
+    }
 
     // Track delta for token counting and TPS calculation
     this.trackDelta(data.messageId, data.tokens, data.timestamp, "reasoning");