🤖 perf: reduce memory pressure from streaming message aggregation (#1151)

## Summary

Performance optimizations to reduce memory pressure and GC pauses caused
by inefficient string handling during streaming.

## Problem

Heap analysis revealed:
- **582 MB in 30.5M concatenated strings** - each streaming delta was
stored as a separate part, and merging used repeated `+` concatenation
creating O(n²) intermediate strings
- **1.39s Major GC pauses** during animation events due to memory
pressure
- **35M total heap objects** accumulated during typical usage

## Changes

### 1. Stabilize `foregroundToolCallIds` Set reference
Avoid invalidating React Compiler memoization by checking content
equality before creating new Set instances.

### 2. Use `array.join()` for message part merging  
Replace O(n²) string concatenation with array accumulation. V8 optimizes
`join()` much better than repeated `+`.

### 3. Compact message parts on stream end
When streaming completes, merge thousands of delta parts into single
strings immediately. This converts memory from O(deltas) small objects
to O(content_types) merged objects, preventing accumulation.

### 4. Extract `mergeAdjacentParts()` helper
Deduplicate the merge logic between `compactMessageParts()` and
`getDisplayedMessages()`.

## Validation

- `make static-check` passes
- `make typecheck` passes
- Heap timeline analysis confirms these patterns as the primary memory
sources

---
_Generated with `mux` • Model: `claude-sonnet-4-20250514` • Thinking:
`low`_

Author: ammar-agent

docs/AGENTS.md

@@ -55,6 +55,7 @@ gh pr view <number> --json mergeable,mergeStateStatus | jq '.'
 
 - Core UX: projects sidebar (left panel), workspace management (local git worktrees or SSH clones), config stored in `~/.mux/config.json`.
 - Fetch bulk data in one IPC call—no O(n) frontend→backend loops.
+- **React Compiler enabled** — auto-memoization handles components/hooks; do not add manual `React.memo()`, `useMemo`, or `useCallback` for memoization purposes. Focus instead on fixing unstable object references that the compiler cannot optimize (e.g., `new Set()` in state setters, inline object literals as props).
 
 ## Tooling & Commands
 

src/browser/hooks/useBackgroundBashHandlers.ts

@@ -108,7 +108,14 @@ export function useBackgroundBashHandlers(
           if (signal.aborted) break;
 
           setProcesses(state.processes);
-          setForegroundToolCallIds(new Set(state.foregroundToolCallIds));
+          // Only update if contents changed to avoid invalidating React Compiler memoization
+          setForegroundToolCallIds((prev) => {
+            const arr = state.foregroundToolCallIds;
+            if (prev.size === arr.length && arr.every((id) => prev.has(id))) {
+              return prev;
+            }
+            return new Set(arr);
+          });
 
           // Clear terminating IDs for processes that are no longer running
           // (killed/exited/failed should clear so new processes with same name aren't affected)

src/browser/utils/messages/StreamingMessageAggregator.ts

@@ -74,6 +74,66 @@ function hasFailureResult(result: unknown): boolean {
   return false;
 }
 
+/**
+ * Merge adjacent text/reasoning parts using array accumulation + join().
+ * Avoids O(n²) string allocations from repeated concatenation.
+ * Tool parts are preserved as-is between merged text/reasoning runs.
+ */
+function mergeAdjacentParts(parts: MuxMessage["parts"]): MuxMessage["parts"] {
+  if (parts.length <= 1) return parts;
+
+  const merged: MuxMessage["parts"] = [];
+  let pendingTexts: string[] = [];
+  let pendingTextTimestamp: number | undefined;
+  let pendingReasonings: string[] = [];
+  let pendingReasoningTimestamp: number | undefined;
+
+  const flushText = () => {
+    if (pendingTexts.length > 0) {
+      merged.push({
+        type: "text",
+        text: pendingTexts.join(""),
+        timestamp: pendingTextTimestamp,
+      });
+      pendingTexts = [];
+      pendingTextTimestamp = undefined;
+    }
+  };
+
+  const flushReasoning = () => {
+    if (pendingReasonings.length > 0) {
+      merged.push({
+        type: "reasoning",
+        text: pendingReasonings.join(""),
+        timestamp: pendingReasoningTimestamp,
+      });
+      pendingReasonings = [];
+      pendingReasoningTimestamp = undefined;
+    }
+  };
+
+  for (const part of parts) {
+    if (part.type === "text") {
+      flushReasoning();
+      pendingTexts.push(part.text);
+      pendingTextTimestamp ??= part.timestamp;
+    } else if (part.type === "reasoning") {
+      flushText();
+      pendingReasonings.push(part.text);
+      pendingReasoningTimestamp ??= part.timestamp;
+    } else {
+      // Tool part - flush and keep as-is
+      flushText();
+      flushReasoning();
+      merged.push(part);
+    }
+  }
+  flushText();
+  flushReasoning();
+
+  return merged;
+}
+
 export class StreamingMessageAggregator {
   private messages = new Map<string, MuxMessage>();
   private activeStreams = new Map<string, StreamingContext>();
@@ -288,6 +348,15 @@ export class StreamingMessageAggregator {
     this.currentTodos = [];
   }
 
+  /**
+   * Compact a message's parts array by merging adjacent text/reasoning parts.
+   * Called when streaming ends to convert thousands of delta parts into single strings.
+   * This reduces memory from O(deltas) small objects to O(content_types) merged objects.
+   */
+  private compactMessageParts(message: MuxMessage): void {
+    message.parts = mergeAdjacentParts(message.parts);
+  }
+
   addMessage(message: MuxMessage): void {
     const existing = this.messages.get(message.id);
     if (existing) {
@@ -545,6 +614,10 @@ export class StreamingMessageAggregator {
             }
           }
         }
+
+        // Compact parts to merge adjacent text/reasoning deltas into single strings
+        // This reduces memory from thousands of small delta objects to a few merged objects
+        this.compactMessageParts(message);
       }
 
       // Clean up stream-scoped state (active stream tracking, TODOs)
@@ -587,6 +660,9 @@ export class StreamingMessageAggregator {
           partial: true,
           ...data.metadata, // Spread abort metadata (usage, duration)
         };
+
+        // Compact parts even on abort - still reduces memory for partial messages
+        this.compactMessageParts(message);
       }
 
       // Clean up stream-scoped state (active stream tracking, TODOs)
@@ -606,6 +682,9 @@ export class StreamingMessageAggregator {
         message.metadata.partial = true;
         message.metadata.error = data.error;
         message.metadata.errorType = data.errorType;
+
+        // Compact parts even on error - still reduces memory for partial messages
+        this.compactMessageParts(message);
       }
 
       // Clean up stream-scoped state (active stream tracking, TODOs)
@@ -957,32 +1036,8 @@ export class StreamingMessageAggregator {
           // Direct Map.has() check - O(1) instead of O(n) iteration
           const hasActiveStream = this.activeStreams.has(message.id);
 
-          // Merge adjacent parts of same type (text with text, reasoning with reasoning)
-          // This is where all merging happens - streaming just appends raw deltas
-          const mergedParts: typeof message.parts = [];
-          for (const part of message.parts) {
-            const lastMerged = mergedParts[mergedParts.length - 1];
-
-            // Try to merge with last part if same type
-            if (lastMerged?.type === "text" && part.type === "text") {
-              // Merge text parts, preserving the first timestamp
-              mergedParts[mergedParts.length - 1] = {
-                type: "text",
-                text: lastMerged.text + part.text,
-                timestamp: lastMerged.timestamp ?? part.timestamp,
-              };
-            } else if (lastMerged?.type === "reasoning" && part.type === "reasoning") {
-              // Merge reasoning parts, preserving the first timestamp
-              mergedParts[mergedParts.length - 1] = {
-                type: "reasoning",
-                text: lastMerged.text + part.text,
-                timestamp: lastMerged.timestamp ?? part.timestamp,
-              };
-            } else {
-              // Different type or tool part - add new part
-              mergedParts.push(part);
-            }
-          }
+          // Merge adjacent text/reasoning parts for display
+          const mergedParts = mergeAdjacentParts(message.parts);
 
           // Find the last part that will produce a DisplayedMessage
           // (reasoning, text parts with content, OR tool parts)