perf: per-block fade-in for streaming markdown

Adds a soft, GPU-cheap fade-in to each newly-mounted top-level markdown
block while a message is streaming. Maps user's mental model of
"line-by-line" onto markdown blocks: paragraph, heading, list item,
fence, blockquote, table, hr — fires once per new block at mount.

Mechanics
- TypewriterMarkdown sets data-streaming="true" on its wrapper while the
  message is streaming. Absent (not "false") on completed/replayed
  messages so the CSS rule cannot match historical transcripts.
- MarkdownCore appends "streamdown-root" to the className passed through
  to Streamdown's root div — a stable CSS hook with no extra wrapper.
- globals.css adds a keyframes + block-level selector list scoped via
  prefers-reduced-motion. Inline elements (<strong>/<em>/<a>) are
  intentionally excluded because parseIncompleteMarkdown can transiently
  insert/remove them as remend repairs unterminated tokens.

Why this works
- Streamdown keys each block by useId+index and wraps it in React.memo,
  so existing blocks are reconciled in place when their content grows.
  Only newly-arriving top-level blocks mount fresh — and CSS animation
  on a freshly-mounted child fires exactly once at mount.
- No JS bookkeeping, no render-phase work, no prop changes.

Per-character pacing inside SmoothTextEngine still operates inside each
block; the new fade-in layer is purely additive at block boundaries.

Author: ammar-agent

src/browser/features/Messages/MarkdownCore.tsx

@@ -144,7 +144,9 @@ export const MarkdownCore = React.memo<MarkdownCoreProps>(
           // Use "static" mode for completed content to bypass useTransition() deferral.
           // After ORPC migration, async event boundaries let React deprioritize transitions indefinitely.
           mode={parseIncompleteMarkdown ? "streaming" : "static"}
-          className="space-y-2" // Reduce from default space-y-4 (16px) to space-y-2 (8px)
+          // streamdown-root: stable CSS hook for per-block fade-in (see globals.css).
+          // space-y-2: reduce from default space-y-4 (16px) to space-y-2 (8px).
+          className="streamdown-root space-y-2"
           controls={{ table: false, code: true, mermaid: true }} // Disable table copy/download, keep code/mermaid controls
         >
           {normalizedContent}

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

@@ -153,4 +153,28 @@ describe("TypewriterMarkdown", () => {
 
     expect(mockUseWorkspaceStreamingStats).toHaveBeenCalledWith("ws-active");
   });
+
+  // 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" />
+    );
+    expect(
+      streaming.container.querySelector(".markdown-content")?.getAttribute("data-streaming")
+    ).toBe("true");
+    streaming.unmount();
+
+    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

@@ -73,7 +73,12 @@ export const TypewriterMarkdown: React.FC<TypewriterMarkdownProps> = ({
 
   return (
     <StreamingContext.Provider value={streamingContextValue}>
-      <div className={cn("markdown-content", className)}>
+      {/*
+       * 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}>
         <MarkdownCore
           content={visibleText}
           parseIncompleteMarkdown={isStreaming}

src/browser/styles/globals.css

@@ -1542,6 +1542,60 @@ code {
   white-space: normal;
 }
 
+/* Per-block fade-in for streaming content.
+ *
+ * Streamdown gives us per-block element identity for free: each top-level
+ * markdown block (paragraph, heading, list, fence, blockquote, table, hr) is
+ * keyed by its index inside Streamdown's render and reconciled in place when
+ * its content grows. So a CSS animation on a freshly-mounted child fires
+ * exactly once per new top-level block — never for text appended inside a
+ * still-open block. This gives users the "line-by-line fade-in" feel without
+ * any JS bookkeeping.
+ *
+ * Gating:
+ *  - data-streaming="true" is set by TypewriterMarkdown only while isStreaming.
+ *    Historical/replay messages render without the attribute and skip the rule.
+ *  - prefers-reduced-motion: no-preference scopes the rule to users who haven't
+ *    asked for reduced motion. Reduced-motion users see instant rendering.
+ *
+ * Selector scope:
+ *  - Block-level descendants only — explicitly enumerated. Inline elements
+ *    (<strong>/<em>/<a>) are intentionally excluded because parseIncompleteMarkdown
+ *    can transiently insert/remove them mid-stream as remend repairs unterminated
+ *    tokens, which would over-fire the animation and look glitchy.
+ *  - `> X` for top-level blocks; bare `li` so list items inside any (possibly
+ *    nested) <ul>/<ol> still animate as they arrive.
+ */
+@keyframes stream-block-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .markdown-content[data-streaming="true"] .streamdown-root > p,
+  .markdown-content[data-streaming="true"] .streamdown-root > h1,
+  .markdown-content[data-streaming="true"] .streamdown-root > h2,
+  .markdown-content[data-streaming="true"] .streamdown-root > h3,
+  .markdown-content[data-streaming="true"] .streamdown-root > h4,
+  .markdown-content[data-streaming="true"] .streamdown-root > h5,
+  .markdown-content[data-streaming="true"] .streamdown-root > h6,
+  .markdown-content[data-streaming="true"] .streamdown-root > ul,
+  .markdown-content[data-streaming="true"] .streamdown-root > ol,
+  .markdown-content[data-streaming="true"] .streamdown-root > blockquote,
+  .markdown-content[data-streaming="true"] .streamdown-root > pre,
+  .markdown-content[data-streaming="true"] .streamdown-root > hr,
+  .markdown-content[data-streaming="true"] .streamdown-root > table,
+  .markdown-content[data-streaming="true"] .streamdown-root li {
+    animation: stream-block-fade-in 180ms ease-out;
+  }
+}
+
 .markdown-content h1,
 .markdown-content h2,
 .markdown-content h3,