fix: gate data-streaming on live stream source, not replay

Codex P2 on PR #3221: replay rows are emitted with isStreaming=true
and streamPresentation.source="replay" while the backend rebuilds
history on reconnect. Gating data-streaming on isStreaming alone
would set the attribute and animate every block of every replayed
message — exactly what we wanted to avoid.

Compute isLiveStreaming = isStreaming && streamSource !== "replay"
and gate the data-streaming attribute on that. Completed messages
already have isStreaming=false, so the attribute is naturally absent
in their case too.

Test extended to assert all three cases: live → "true", replay → absent,
completed → absent.

Author: ammar-agent

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

@@ -156,23 +156,42 @@ describe("TypewriterMarkdown", () => {
 
   // The data-streaming attribute is the gate for the per-block fade-in CSS rule
   // (see globals.css, .markdown-content[data-streaming="true"] .streamdown-root > *).
-  // It must only be present on the wrapper while the message is actively streaming
-  // — otherwise historical/replayed transcripts would re-trigger the animation
-  // every time their content prop changes.
-  test("sets data-streaming on the wrapper only while streaming", () => {
-    const streaming = render(
-      <TypewriterMarkdown content="Live" isComplete={false} streamKey="msg-anim-live" />
+  // It must be present ONLY on live streaming messages. Completed messages and
+  // replay rows must not match — replay rows are emitted with isStreaming=true
+  // while the backend rebuilds history, so guarding on isStreaming alone would
+  // re-animate every block of every historical message on reconnect.
+  test("sets data-streaming only for live streams, not replay or completed", () => {
+    const live = render(
+      <TypewriterMarkdown
+        content="Live"
+        isComplete={false}
+        streamKey="msg-anim-live"
+        streamSource="live"
+      />
+    );
+    expect(live.container.querySelector(".markdown-content")?.getAttribute("data-streaming")).toBe(
+      "true"
+    );
+    live.unmount();
+
+    // Replay row (still streaming, but source=replay) — must not animate.
+    const replay = render(
+      <TypewriterMarkdown
+        content="Replayed"
+        isComplete={false}
+        streamKey="msg-anim-replay"
+        streamSource="replay"
+      />
     );
     expect(
-      streaming.container.querySelector(".markdown-content")?.getAttribute("data-streaming")
-    ).toBe("true");
-    streaming.unmount();
+      replay.container.querySelector(".markdown-content")?.getAttribute("data-streaming")
+    ).toBeNull();
+    replay.unmount();
 
+    // Completed message — must not animate either.
     const completed = render(
       <TypewriterMarkdown content="Done" isComplete={true} streamKey="msg-anim-done" />
     );
-    // Absent (not "false") on completed messages so the CSS selector
-    // [data-streaming="true"] cannot match.
     expect(
       completed.container.querySelector(".markdown-content")?.getAttribute("data-streaming")
     ).toBeNull();

src/browser/features/Messages/TypewriterMarkdown.tsx

@@ -71,14 +71,22 @@ export const TypewriterMarkdown: React.FC<TypewriterMarkdownProps> = ({
   // React Compiler memoizes this object; no manual useMemo needed.
   const streamingContextValue = { isStreaming };
 
+  // Gate per-block fade-in (see globals.css) on LIVE streams only. Replay rows
+  // are emitted as isStreaming=true with streamSource="replay" while the
+  // backend rebuilds history on reconnect (StreamingMessageAggregator emits
+  // `streamPresentation: { source: "replay" }`); without this guard, every
+  // block of every replayed message would animate on reconnect/load. Completed
+  // messages also have isStreaming=false so the attribute is naturally absent.
+  // Using `|| undefined` keeps the attribute *off the DOM* (not "false") so
+  // the [data-streaming="true"] CSS selector simply cannot match.
+  const isLiveStreaming = isStreaming && streamSource !== "replay";
+
   return (
     <StreamingContext.Provider value={streamingContextValue}>
-      {/*
-       * data-streaming is the gate for per-block fade-in (see globals.css). The
-       * `|| undefined` keeps the attribute absent on completed messages so the
-       * CSS rule never matches them (and historical transcripts never animate).
-       */}
-      <div className={cn("markdown-content", className)} data-streaming={isStreaming || undefined}>
+      <div
+        className={cn("markdown-content", className)}
+        data-streaming={isLiveStreaming || undefined}
+      >
         <MarkdownCore
           content={visibleText}
           parseIncompleteMarkdown={isStreaming}