fix: stabilize streaming text merges

Author: Dimillian

src/components/Messages.tsx

@@ -308,6 +308,7 @@ export function Messages({
             !normalizedSummaryText ||
             normalizedSummaryText === summaryTitle ||
             summaryLines.length <= 1;
+          const showReasoningBody = !shouldHideReasoningBody && summaryText;
           return (
             <div key={item.id} className="tool-inline reasoning-inline">
               <button
@@ -330,7 +331,7 @@ export function Messages({
                   />
                   <span className="tool-inline-value">{summaryTitle}</span>
                 </button>
-                {!shouldHideReasoningBody && summaryText && (
+                {showReasoningBody && (
                   <Markdown
                     value={summaryText}
                     className={`reasoning-inline-detail markdown ${
@@ -403,6 +404,7 @@ export function Messages({
             : summary.value;
           const shouldFadeCommand =
             isCommand && !isExpanded && (summaryValue?.length ?? 0) > 80;
+          const showToolOutput = isExpanded && (!isFileChange || !hasChanges);
           return (
             <div
               key={item.id}
@@ -490,7 +492,7 @@ export function Messages({
                 {isExpanded && isFileChange && !hasChanges && item.detail && (
                   <Markdown value={item.detail} className="item-text markdown" />
                 )}
-                {isExpanded && summary.output && (!isFileChange || !hasChanges) && (
+                {showToolOutput && summary.output && (
                   <Markdown
                     value={summary.output}
                     className="tool-inline-output markdown"

src/hooks/useThreadsReducer.ts

@@ -103,6 +103,31 @@ export const initialState: ThreadState = {
   lastAgentMessageByThread: {},
 };
 
+function mergeStreamingText(existing: string, delta: string) {
+  if (!delta) {
+    return existing;
+  }
+  if (!existing) {
+    return delta;
+  }
+  if (delta === existing) {
+    return existing;
+  }
+  if (delta.startsWith(existing)) {
+    return delta;
+  }
+  if (existing.startsWith(delta)) {
+    return existing;
+  }
+  const maxOverlap = Math.min(existing.length, delta.length);
+  for (let length = maxOverlap; length > 0; length -= 1) {
+    if (existing.endsWith(delta.slice(0, length))) {
+      return `${existing}${delta.slice(length)}`;
+    }
+  }
+  return `${existing}${delta}`;
+}
+
 export function threadReducer(state: ThreadState, action: ThreadAction): ThreadState {
   switch (action.type) {
     case "setActiveThreadId":
@@ -343,7 +368,7 @@ export function threadReducer(state: ThreadState, action: ThreadAction): ThreadS
         const existing = list[index];
         list[index] = {
           ...existing,
-          text: `${existing.text}${action.delta}`,
+          text: mergeStreamingText(existing.text, action.delta),
         };
       } else {
         list.push({
@@ -432,7 +457,10 @@ export function threadReducer(state: ThreadState, action: ThreadAction): ThreadS
             };
       const updated: ConversationItem = {
         ...base,
-        summary: `${"summary" in base ? base.summary : ""}${action.delta}`,
+        summary: mergeStreamingText(
+          "summary" in base ? base.summary : "",
+          action.delta,
+        ),
       } as ConversationItem;
       const next = index >= 0 ? [...list] : [...list, updated];
       if (index >= 0) {
@@ -460,7 +488,10 @@ export function threadReducer(state: ThreadState, action: ThreadAction): ThreadS
             };
       const updated: ConversationItem = {
         ...base,
-        content: `${"content" in base ? base.content : ""}${action.delta}`,
+        content: mergeStreamingText(
+          "content" in base ? base.content : "",
+          action.delta,
+        ),
       } as ConversationItem;
       const next = index >= 0 ? [...list] : [...list, updated];
       if (index >= 0) {
@@ -483,7 +514,7 @@ export function threadReducer(state: ThreadState, action: ThreadAction): ThreadS
       const existing = list[index];
       const updated: ConversationItem = {
         ...existing,
-        output: `${existing.output ?? ""}${action.delta}`,
+        output: mergeStreamingText(existing.output ?? "", action.delta),
       } as ConversationItem;
       const next = [...list];
       next[index] = updated;

src/styles/base.css

@@ -86,7 +86,7 @@
   --surface-context-core: rgba(16, 20, 30, 0.96);
 }
 
-@media (prefers-color-scheme: light) {
+  @media (prefers-color-scheme: light) {
   :root {
     --text-primary: #1a1d24;
     --text-strong: #0e1118;
@@ -135,9 +135,9 @@
   --text-accent: rgba(45, 93, 170, 0.7);
   --shadow-accent: rgba(90, 140, 210, 0.18);
   --status-success: rgba(30, 155, 110, 0.9);
-  --status-warning: rgba(215, 120, 20, 0.9);
-  --status-error: rgba(200, 45, 45, 0.9);
-  --status-unknown: rgba(17, 20, 28, 0.25);
+    --status-warning: rgba(215, 120, 20, 0.9);
+    --status-error: rgba(200, 45, 45, 0.9);
+    --status-unknown: rgba(17, 20, 28, 0.25);
   --select-caret: rgba(15, 23, 36, 0.45);
   }