fix: extract thinking animation state machine and add overlap-tolerant streaming merge

- Extract ThinkingBlock animation logic into pure thinking-animation.ts module, removing coalescing timer that caused replay/duplication under rapid updates
- Add mergeStreamingChunk() to streaming-buffer.ts for overlap-tolerant chunk merging (handles cumulative snapshots, overlapping deltas, and exact replays)
- Apply mergeStreamingChunk in background-claude-handler for consistent background session streaming
- Add comprehensive tests for both modules

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: OpenSource03

package.json

@@ -1,6 +1,6 @@
 {
   "name": "harnss",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "productName": "Harnss",
   "description": "Harness your AI coding agents — one desktop app for Claude Code, Codex, and any ACP agent",
   "author": {

src/components/ThinkingBlock.tsx

@@ -6,38 +6,29 @@ import {
 } from "@/components/ui/collapsible";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { TextShimmer } from "@/components/ui/text-shimmer";
+import {
+  advanceThinkingAnimationState,
+  createThinkingAnimationState,
+} from "@/lib/thinking-animation";
 
 interface ThinkingBlockProps {
   thinking: string;
   isStreaming?: boolean;
   thinkingComplete?: boolean;
 }
 
-interface AnimatedChunk {
-  id: number;
-  text: string;
-}
-
-function commonPrefixLength(a: string, b: string): number {
-  const max = Math.min(a.length, b.length);
-  let i = 0;
-  while (i < max && a.charCodeAt(i) === b.charCodeAt(i)) i += 1;
-  return i;
-}
-
 export function ThinkingBlock({ thinking, isStreaming, thinkingComplete }: ThinkingBlockProps) {
   const [open, setOpen] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
   // Tracks whether user manually scrolled up in the inner thinking div
   const userScrolledRef = useRef(false);
   const isThinking = isStreaming && !thinkingComplete && thinking.length > 0;
 
-  // Render thinking as stable prefix + appended animated chunks.
-  // This keeps earlier chunk animations running even when new chunks arrive.
-  const prevThinkingRef = useRef(thinking);
-  const nextChunkIdRef = useRef(0);
-  const [baseText, setBaseText] = useState(thinking);
-  const [animatedChunks, setAnimatedChunks] = useState<AnimatedChunk[]>([]);
+  // Keep the animation state simple and append-only. The v0.19.0 coalescing
+  // timer introduced replay/duplication under rapid thinking updates.
+  const [animationState, setAnimationState] = useState(() =>
+    createThinkingAnimationState(thinking),
+  );
 
   const handleScroll = useCallback(() => {
     const el = contentRef.current;
@@ -57,106 +48,11 @@ export function ThinkingBlock({ thinking, isStreaming, thinkingComplete }: Think
   }, [thinking, open]);
 
   useEffect(() => {
-    const prev = prevThinkingRef.current;
-    const curr = thinking;
-    prevThinkingRef.current = curr;
-
-    if (!isThinking) {
-      setBaseText(curr);
-      setAnimatedChunks([]);
-      return;
-    }
-
-    if (!prev || !curr) {
-      setBaseText(curr);
-      setAnimatedChunks([]);
-      return;
-    }
-
-    const prefixLen = commonPrefixLength(prev, curr);
-    const appendedLen = curr.length - prefixLen;
-    if (appendedLen <= 0) {
-      setBaseText(curr);
-      setAnimatedChunks([]);
-      return;
-    }
-
-    // If upstream rewrites existing text, reset to avoid animating old regions.
-    const changedInMiddle = prefixLen < prev.length;
-    if (changedInMiddle) {
-      setBaseText(curr);
-      setAnimatedChunks([]);
-      return;
-    }
-
-    const appended = curr.slice(prev.length);
-    if (!appended) return;
-
-    setAnimatedChunks((chunks) => [
-      ...chunks,
-      { id: nextChunkIdRef.current++, text: appended },
-    ]);
+    setAnimationState((prev) =>
+      advanceThinkingAnimationState(prev, thinking, isThinking),
+    );
   }, [thinking, isThinking]);
 
-  // Coalesce completed animation chunks back into baseText every 500ms
-  // to keep the animated <span> count bounded (~20-30 max)
-  useEffect(() => {
-    if (!isThinking) return;
-
-    const COALESCE_INTERVAL = 500;
-    const ANIMATION_DURATION = 400; // chunks older than this are "done"
-
-    // Track when each chunk was added
-    const chunkTimestamps = new Map<number, number>();
-
-    const interval = setInterval(() => {
-      const now = Date.now();
-
-      setAnimatedChunks((chunks) => {
-        if (chunks.length === 0) return chunks;
-
-        // Record timestamps for new chunks
-        for (const chunk of chunks) {
-          if (!chunkTimestamps.has(chunk.id)) {
-            chunkTimestamps.set(chunk.id, now);
-          }
-        }
-
-        // Find the last completed chunk index
-        let lastCompleted = -1;
-        for (let i = 0; i < chunks.length; i++) {
-          const ts = chunkTimestamps.get(chunks[i].id) ?? now;
-          if (now - ts >= ANIMATION_DURATION) {
-            lastCompleted = i;
-          } else {
-            break; // chunks are in order, so stop at first incomplete
-          }
-        }
-
-        if (lastCompleted < 0) return chunks;
-
-        // Merge completed chunks into baseText
-        const completedText = chunks
-          .slice(0, lastCompleted + 1)
-          .map((c) => c.text)
-          .join("");
-
-        // Clean up timestamps for merged chunks
-        for (let i = 0; i <= lastCompleted; i++) {
-          chunkTimestamps.delete(chunks[i].id);
-        }
-
-        setBaseText((prev) => prev + completedText);
-        return chunks.slice(lastCompleted + 1);
-      });
-    }, COALESCE_INTERVAL);
-
-    return () => {
-      clearInterval(interval);
-      chunkTimestamps.clear();
-    };
-  }, [isThinking]);
-
   const handleOpenChange = useCallback((isOpen: boolean) => {
     setOpen(isOpen);
     if (isOpen) {
@@ -189,8 +85,8 @@ export function ThinkingBlock({ thinking, isStreaming, thinkingComplete }: Think
             onScroll={handleScroll}
             className="mt-1 mb-2 max-h-60 overflow-auto border-s-2 border-foreground/10 ps-3 py-1 text-xs text-foreground/40 whitespace-pre-wrap"
           >
-            {baseText}
-            {animatedChunks.map((chunk) => (
+            {animationState.baseText}
+            {animationState.animatedChunks.map((chunk) => (
               <span key={chunk.id} className="stream-chunk-enter">{chunk.text}</span>
             ))}
           </div>

src/lib/background-claude-handler.ts

@@ -20,6 +20,7 @@ import {
 } from "./protocol";
 import { formatResultError } from "./message-factory";
 import { bgAgentStore } from "./background-agent-store";
+import { mergeStreamingChunk } from "./streaming-buffer";
 import { normalizeTodoToolInput } from "./todo-utils";
 import type { InternalState } from "./background-session-store";
 
@@ -60,10 +61,12 @@ function handleStreamEvent(state: InternalState, event: StreamEvent): void {
         if (target.thinking && !target.thinkingComplete) {
           target.thinkingComplete = true;
         }
-        target.content += streamEvt.delta.text;
+        target.content = mergeStreamingChunk(target.content, streamEvt.delta.text);
       } else if (streamEvt.delta.type === "thinking_delta") {
-        target.thinking =
-          (target.thinking ?? "") + streamEvt.delta.thinking;
+        target.thinking = mergeStreamingChunk(
+          target.thinking ?? "",
+          streamEvt.delta.thinking,
+        );
       }
       break;
     }

src/lib/streaming-buffer.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { StreamingBuffer, mergeStreamingChunk } from "./streaming-buffer";
+
+describe("mergeStreamingChunk", () => {
+  it("appends ordinary delta chunks", () => {
+    expect(mergeStreamingChunk("Hello", " world")).toBe("Hello world");
+  });
+
+  it("tolerates cumulative snapshots without duplicating prior content", () => {
+    expect(mergeStreamingChunk("Hello", "Hello world")).toBe("Hello world");
+  });
+
+  it("tolerates overlapping chunks without repeating the overlap", () => {
+    expect(mergeStreamingChunk("Hello wor", "world")).toBe("Hello world");
+  });
+
+  it("ignores exact duplicate suffix replays", () => {
+    expect(mergeStreamingChunk("Hello world", "world")).toBe("Hello world");
+  });
+});
+
+describe("StreamingBuffer", () => {
+  it("keeps thinking content stable when the SDK resends the full thought so far", () => {
+    const buffer = new StreamingBuffer();
+
+    buffer.startBlock(0, { type: "thinking", thinking: "" });
+    buffer.appendDelta(0, {
+      type: "thinking_delta",
+      thinking: "The user wants me to think deeply again",
+    });
+    buffer.appendDelta(0, {
+      type: "thinking_delta",
+      thinking: "The user wants me to think deeply again so they can see the thinking block UI.",
+    });
+
+    expect(buffer.getAllThinking()).toBe(
+      "The user wants me to think deeply again so they can see the thinking block UI.",
+    );
+  });
+
+  it("merges overlapping text deltas without repeating the shared prefix", () => {
+    const buffer = new StreamingBuffer();
+
+    buffer.startBlock(0, { type: "text", text: "" });
+    buffer.appendDelta(0, { type: "text_delta", text: "Time is " });
+    buffer.appendDelta(0, { type: "text_delta", text: "is strange." });
+
+    expect(buffer.getAllText()).toBe("Time is strange.");
+  });
+});

src/lib/streaming-buffer.ts

@@ -1,5 +1,27 @@
 import type { ContentBlockStartEvent, ContentBlockDeltaEvent } from "../types";
 
+/**
+ * Merge a streamed chunk into the current buffer while tolerating
+ * overlapping or cumulative snapshots from upstream.
+ */
+export function mergeStreamingChunk(current: string, incoming: string): string {
+  if (!incoming) return current;
+  if (!current) return incoming;
+
+  // Some SDK paths resend the full accumulated value instead of a pure delta.
+  if (incoming.startsWith(current)) return incoming;
+  if (current.endsWith(incoming)) return current;
+
+  const maxOverlap = Math.min(current.length, incoming.length);
+  for (let overlap = maxOverlap; overlap > 0; overlap -= 1) {
+    if (current.endsWith(incoming.slice(0, overlap))) {
+      return current + incoming.slice(overlap);
+    }
+  }
+
+  return current + incoming;
+}
+
 /**
  * Lightweight streaming buffer for engines that don't use SDK content block events
  * (ACP and Codex). Accumulates text and thinking chunks with a simple append API.
@@ -10,8 +32,15 @@ export class SimpleStreamingBuffer {
   private thinkingChunks: string[] = [];
   thinkingComplete = false;
 
-  appendText(text: string): void { this.textChunks.push(text); }
-  appendThinking(text: string): void { this.thinkingChunks.push(text); }
+  appendText(text: string): void {
+    const current = this.textChunks.join("");
+    this.textChunks = [mergeStreamingChunk(current, text)];
+  }
+
+  appendThinking(text: string): void {
+    const current = this.thinkingChunks.join("");
+    this.thinkingChunks = [mergeStreamingChunk(current, text)];
+  }
 
   getText(): string { return this.textChunks.join(""); }
   getThinking(): string { return this.thinkingChunks.join(""); }
@@ -68,15 +97,15 @@ export class StreamingBuffer {
   appendDelta(index: number, delta: ContentBlockDeltaEvent["delta"]): boolean {
     if (delta.type === "text_delta") {
       const current = this.text.get(index) ?? "";
-      this.text.set(index, current + delta.text);
+      this.text.set(index, mergeStreamingChunk(current, delta.text));
       return true;
     } else if (delta.type === "input_json_delta") {
       const current = this.toolInput.get(index) ?? "";
       this.toolInput.set(index, current + delta.partial_json);
       return false;
     } else if (delta.type === "thinking_delta") {
       const current = this.thinking.get(index) ?? "";
-      this.thinking.set(index, current + delta.thinking);
+      this.thinking.set(index, mergeStreamingChunk(current, delta.thinking));
       return true;
     }
     return false;