From 0caa23788f6016d3b3216b22fa0203a93152bb99 Mon Sep 17 00:00:00 2001
From: stremtec <copii.list@gmail.com>
Date: Thu, 4 Jun 2026 05:14:52 +0900
Subject: [PATCH] fix(desktop): prevent IME Enter from splitting messages and
 viewport resize from disarming scroll anchor (#38333)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(desktop): prevent IME Enter from splitting messages and viewport resize from disarming scroll anchor

Two fixes for the Hermes Desktop composer:

1. IME composition Enter was treated as message submission. When a Korean/
   Japanese/Chinese IME is composing text and the user presses Enter to
   finalise the preedit, handleEditorKeyDown fired submitDraft() because it
   did not check event.nativeEvent.isComposing. The assistant-ui hidden
   textarea already guards this correctly; the custom contentEditable
   handler was missing it. Added an early return when isComposing is true.

2. Viewport resize (composer expand/collapse, window resize) was disarming
   the scroll sticky-bottom anchor. When the composer grows, the thread
   viewport shrinks, the browser adjusts scrollTop down to keep content
   visible, and the onScroll handler misread this as a user scroll-up.
   Added lastClientHeightRef tracking so the disarm condition now requires
   BOTH stable scrollHeight AND stable clientHeight before treating a
   scrollTop decrease as user intent.

Fixes: random mid-message sends during IME typing; scroll jumps when the
composer resizes or the window changes size.

* fix(desktop): prevent virtualizer measurement adjustments from fighting scroll anchoring

The virtualizer's measureElement callbacks trigger scroll adjustments when
item sizes differ from estimates. These fight our ResizeObserver +
pinToBottom loop, creating visible rubber-banding (view snaps to composer
then jumps back up), even during idle.

Three changes:
1. React.memo on VirtualizedThread to stop parent re-renders cascading
2. Shared stickyBottomRef so scrollToFn can check bottom state
3. scrollToFn override: skip adjustments when user is at bottom

* fix(desktop): use stable useCallback ref instead of inline arrow for onBranchInNewChat

The inline arrow `messageId => void branchInNewChat(messageId)` created a
new function reference on every render. This cascaded through:
  desktop-controller → ChatView → Thread → useMemo([...onBranchInNewChat])
→ new messageComponents object → VirtualizedThread receives new prop
→ React.memo overridden → virtualizer recalculates → measurement
adjustments trigger scroll jumps at the 15-second useStatusSnapshot
interval.

Pass the already-useCallback'd branchInNewChat directly.

* fix(desktop): use ctrlEnter submitMode on hidden textarea + gate ResizeObserver on isRunning

Two root-cause fixes:

1. IME message splitting: The hidden ComposerPrimitive.Input textarea had
   submitMode='enter' (default), so any Enter keydown it received — even
   during IME composition — triggered form.requestSubmit(). Changed to
   submitMode='ctrlEnter' so only the contentEditable div (which correctly
   checks isComposing) handles plain-Enter submission.

2. Scroll jumps during idle: The ResizeObserver auto-follow loop was
   active even when the thread wasn't running, causing spurious
   pinToBottom calls whenever any layout shift occurred (browser reflow,
   font load, GPU cache eviction). Gated the ResizeObserver on
   thread.isRunning so auto-scroll only follows during active streaming.
   User messages still pin via useLayoutEffect, and thread.runStart still
   calls jumpToBottom.

* fix(desktop): keep chat bottom anchor stable through idle layout shifts

* fix(desktop): prevent code block shrink scroll bounce

* fix(desktop): release bottom height lock on run completion

* fix(desktop): keep streaming code blocks rendered

* fix(desktop): keep bottom anchored through final render

* fix(desktop): render streaming reasoning code blocks

* feat(desktop): add subtle streaming block animations
---
 apps/desktop/src/app/chat/composer/index.tsx  |  11 +-
 apps/desktop/src/app/desktop-controller.tsx   |   2 +-
 .../components/assistant-ui/markdown-text.tsx |  96 +++++---
 .../assistant-ui/streaming.test.tsx           | 211 +++++++++++++++++-
 .../assistant-ui/thread-virtualizer.tsx       | 152 ++++++++++---
 .../src/components/assistant-ui/thread.tsx    |  29 ++-
 .../src/components/chat/shiki-highlighter.tsx |   2 +-
 apps/desktop/src/lib/use-enter-animation.ts   |   4 +-
 apps/desktop/src/styles.css                   |  60 +++++
 9 files changed, 477 insertions(+), 90 deletions(-)

diff --git a/apps/desktop/src/app/chat/composer/index.tsx b/apps/desktop/src/app/chat/composer/index.tsx
index cc2f33b13..d19c0a253 100644
--- a/apps/desktop/src/app/chat/composer/index.tsx
+++ b/apps/desktop/src/app/chat/composer/index.tsx
@@ -575,6 +575,13 @@ export function ChatBar({
   }
 
   const handleEditorKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    // IME composition: Enter confirms composed text, not a message submission.
+    // Without this guard, pressing Enter to finalise a Korean/Japanese/Chinese
+    // IME preedit fires submitDraft() and splits the message mid-word.
+    if (event.nativeEvent.isComposing) {
+      return
+    }
+
     if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'k') {
       event.preventDefault()
 
@@ -1090,8 +1097,8 @@ export function ChatBar({
     <div className={cn('relative', stacked ? 'w-full' : 'min-w-(--composer-input-inline-min-width) flex-1')}>
       <div
         aria-label="Message"
-        autoCorrect="off"
         autoCapitalize="off"
+        autoCorrect="off"
         className={cn(
           'min-h-(--composer-input-min-height) max-h-(--composer-input-max-height) overflow-y-auto bg-transparent pb-1 pr-1 pt-1 leading-normal text-foreground outline-none disabled:cursor-not-allowed',
           'empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground/60',
@@ -1131,7 +1138,7 @@ export function ChatBar({
 
         `asChild` swaps TextareaAutosize for a Radix Slot wrapping our
         plain <textarea>, which carries the binding but skips autosize. */}
-      <ComposerPrimitive.Input asChild tabIndex={-1} unstable_focusOnScrollToBottom={false}>
+      <ComposerPrimitive.Input asChild submitMode="ctrlEnter" tabIndex={-1} unstable_focusOnScrollToBottom={false}>
         <textarea aria-hidden className="sr-only" tabIndex={-1} />
       </ComposerPrimitive.Input>
     </div>
diff --git a/apps/desktop/src/app/desktop-controller.tsx b/apps/desktop/src/app/desktop-controller.tsx
index 635fe4a9c..f8508f33c 100644
--- a/apps/desktop/src/app/desktop-controller.tsx
+++ b/apps/desktop/src/app/desktop-controller.tsx
@@ -612,7 +612,7 @@ export function DesktopController() {
       onAddUrl={url => composer.addContextRefAttachment(`@url:${formatRefValue(url)}`, url)}
       onAttachDroppedItems={composer.attachDroppedItems}
       onAttachImageBlob={composer.attachImageBlob}
-      onBranchInNewChat={messageId => void branchInNewChat(messageId)}
+      onBranchInNewChat={branchInNewChat}
       onCancel={cancelRun}
       onDeleteSelectedSession={() => {
         if (selectedStoredSessionId) {
diff --git a/apps/desktop/src/components/assistant-ui/markdown-text.tsx b/apps/desktop/src/components/assistant-ui/markdown-text.tsx
index e764b9fff..57c5b7b39 100644
--- a/apps/desktop/src/components/assistant-ui/markdown-text.tsx
+++ b/apps/desktop/src/components/assistant-ui/markdown-text.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { TextMessagePartProvider, useAuiState, useMessagePartText } from '@assistant-ui/react'
+import { TextMessagePartProvider, useMessagePartText } from '@assistant-ui/react'
 import {
   type StreamdownTextComponents,
   StreamdownTextPrimitive,
@@ -259,6 +259,11 @@ function DeferStreamingText({ children }: { children: ReactNode }) {
   )
 }
 
+interface MarkdownTextSurfaceProps {
+  containerClassName?: string
+  containerProps?: ComponentProps<'div'>
+}
+
 // Headings shrink to chat scale rather than the prose default (h1≈xl). Kept
 // table-driven so adding/tweaking levels is one row.
 const HEADING_SIZES: Record<'h1' | 'h2' | 'h3' | 'h4', string> = {
@@ -268,15 +273,24 @@ const HEADING_SIZES: Record<'h1' | 'h2' | 'h3' | 'h4', string> = {
   h4: 'text-[0.8125rem]'
 }
 
-const MarkdownTextImpl = () => {
-  const isStreaming = useAuiState(s => s.message.status?.type === 'running')
+const MARKDOWN_CONTAINER_CLASS_NAME = cn(
+  'aui-md prose w-full max-w-none overflow-hidden text-[length:var(--conversation-text-font-size)] leading-(--dt-line-height) text-foreground',
+  'prose-p:leading-(--dt-line-height) prose-li:leading-(--dt-line-height)',
+  'prose-headings:text-foreground prose-strong:text-foreground',
+  'prose-a:break-words prose-p:[overflow-wrap:anywhere]',
+  'prose-li:marker:text-muted-foreground/70',
+  'prose-code:rounded-[0.25rem] prose-code:px-[0.1875rem] prose-code:py-px prose-code:font-mono prose-code:text-[0.9em] prose-code:font-normal prose-code:before:content-none prose-code:after:content-none',
+  '[&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&>*+*]:mt-1'
+)
 
-  // Stable per-state plugin object. The previous inline `{ math: mathPlugin,
-  // ...(isStreaming ? {} : { code }) }` created a new object identity on every
-  // render, which churns Streamdown's outer memo + propagates new prop
-  // identities into every Block. The plugin set really only varies on
-  // `isStreaming`, so memoize on that.
-  const plugins = useMemo(() => (isStreaming ? { math: mathPlugin } : { math: mathPlugin, code }), [isStreaming])
+function MarkdownTextSurface({ containerClassName, containerProps }: MarkdownTextSurfaceProps) {
+  const { status } = useMessagePartText()
+  const isStreaming = status.type === 'running'
+
+  // Keep code parsing enabled while streaming so incomplete fenced blocks still
+  // render as code cards. The expensive Shiki pass is deferred by
+  // `SyntaxHighlighter` below when `isStreaming` is true.
+  const plugins = useMemo(() => ({ math: mathPlugin, code }), [])
 
   const components = useMemo(
     () =>
@@ -347,33 +361,47 @@ const MarkdownTextImpl = () => {
     [isStreaming]
   )
 
+  return (
+    <StreamdownTextPrimitive
+      components={components}
+      containerClassName={cn(MARKDOWN_CONTAINER_CLASS_NAME, containerClassName)}
+      containerProps={containerProps}
+      lineNumbers={false}
+      mode="streaming"
+      // Always auto-close incomplete fences — even during streaming.
+      // Without this, an unclosed ```python ... ``` whose body contains
+      // `$` (very common: shell snippets, JS template strings, dollar
+      // amounts) leaks those dollars out to the math parser and they
+      // get rendered as broken inline math until the closing fence
+      // arrives. Shiki is independently deferred via `defer={isStreaming}`
+      // on the SyntaxHighlighter component, so we don't pay code-block
+      // tokenization on every token even with this set.
+      parseIncompleteMarkdown
+      plugins={plugins}
+      preprocess={preprocessMarkdown}
+    />
+  )
+}
+
+interface MarkdownTextContentProps extends MarkdownTextSurfaceProps {
+  isRunning: boolean
+  text: string
+}
+
+export function MarkdownTextContent({ isRunning, text, ...surfaceProps }: MarkdownTextContentProps) {
+  return (
+    <TextMessagePartProvider isRunning={isRunning} text={text}>
+      <DeferStreamingText>
+        <MarkdownTextSurface {...surfaceProps} />
+      </DeferStreamingText>
+    </TextMessagePartProvider>
+  )
+}
+
+const MarkdownTextImpl = () => {
   return (
     <DeferStreamingText>
-      <StreamdownTextPrimitive
-        components={components}
-        containerClassName={cn(
-          'aui-md prose w-full max-w-none overflow-hidden text-[length:var(--conversation-text-font-size)] leading-(--dt-line-height) text-foreground',
-          'prose-p:leading-(--dt-line-height) prose-li:leading-(--dt-line-height)',
-          'prose-headings:text-foreground prose-strong:text-foreground',
-          'prose-a:break-words prose-p:[overflow-wrap:anywhere]',
-          'prose-li:marker:text-muted-foreground/70',
-          'prose-code:rounded-[0.25rem] prose-code:px-[0.1875rem] prose-code:py-px prose-code:font-mono prose-code:text-[0.9em] prose-code:font-normal prose-code:before:content-none prose-code:after:content-none',
-          '[&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&>*+*]:mt-1'
-        )}
-        lineNumbers={false}
-        mode="streaming"
-        // Always auto-close incomplete fences — even during streaming.
-        // Without this, an unclosed ```python ... ``` whose body contains
-        // `$` (very common: shell snippets, JS template strings, dollar
-        // amounts) leaks those dollars out to the math parser and they
-        // get rendered as broken inline math until the closing fence
-        // arrives. Shiki is independently deferred via `defer={isStreaming}`
-        // on the SyntaxHighlighter component, so we don't pay code-block
-        // tokenization on every token even with this set.
-        parseIncompleteMarkdown
-        plugins={plugins}
-        preprocess={preprocessMarkdown}
-      />
+      <MarkdownTextSurface />
     </DeferStreamingText>
   )
 }
diff --git a/apps/desktop/src/components/assistant-ui/streaming.test.tsx b/apps/desktop/src/components/assistant-ui/streaming.test.tsx
index 51edee952..2c4095eb7 100644
--- a/apps/desktop/src/components/assistant-ui/streaming.test.tsx
+++ b/apps/desktop/src/components/assistant-ui/streaming.test.tsx
@@ -130,12 +130,12 @@ function assistantErrorMessage(error: string): ThreadMessage {
   } as ThreadMessage
 }
 
-function assistantReasoningMessage(text: string): ThreadMessage {
+function assistantReasoningMessage(text: string, running = false): ThreadMessage {
   return {
     id: 'assistant-reasoning-1',
     role: 'assistant',
     content: [{ type: 'reasoning', text }],
-    status: { type: 'complete', reason: 'stop' },
+    status: running ? { type: 'running' } : { type: 'complete', reason: 'stop' },
     createdAt,
     metadata: {
       unstable_state: null,
@@ -263,6 +263,20 @@ function StreamingHarness() {
   )
 }
 
+function StaticThreadHarness() {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: [userMessage(), assistantMessage('complete response', false)],
+    isRunning: false,
+    onNew: async () => {}
+  })
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <Thread />
+    </AssistantRuntimeProvider>
+  )
+}
+
 function TodoHarness({ message }: { message: ThreadMessage }) {
   const runtime = useExternalStoreRuntime<ThreadMessage>({
     messages: [message],
@@ -291,6 +305,20 @@ function MessageHarness({ message }: { message: ThreadMessage }) {
   )
 }
 
+function RunningMessageHarness({ message }: { message: ThreadMessage }) {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: [message],
+    isRunning: true,
+    onNew: async () => {}
+  })
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <Thread />
+    </AssistantRuntimeProvider>
+  )
+}
+
 function ReasoningHarness() {
   const runtime = useExternalStoreRuntime<ThreadMessage>({
     messages: [assistantReasoningMessage(' The user is asking what this file is.')],
@@ -305,6 +333,20 @@ function ReasoningHarness() {
   )
 }
 
+function RunningReasoningHarness() {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: [assistantReasoningMessage('```ts\nconst answer = 42\n', true)],
+    isRunning: true,
+    onNew: async () => {}
+  })
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <Thread />
+    </AssistantRuntimeProvider>
+  )
+}
+
 function GroupedReasoningHarness() {
   const runtime = useExternalStoreRuntime<ThreadMessage>({
     messages: [assistantMultiReasoningMessage([' First thought.', ' Second thought.'])],
@@ -415,6 +457,81 @@ describe('assistant-ui streaming renderer', () => {
     expect(viewport.scrollTop).toBe(420)
   })
 
+  it('does not auto-follow idle layout shifts', async () => {
+    const { container } = render(<StaticThreadHarness />)
+
+    const content = container.querySelector('[data-slot="aui_thread-content"]') as HTMLDivElement
+    const viewport = content.parentElement as HTMLDivElement
+    let scrollHeight = 1_000
+
+    Object.defineProperty(viewport, 'clientHeight', { configurable: true, value: 200 })
+    Object.defineProperty(viewport, 'scrollHeight', {
+      configurable: true,
+      get: () => scrollHeight
+    })
+
+    await wait(80)
+
+    await act(async () => {
+      viewport.scrollTop = 420
+      fireEvent.scroll(viewport)
+    })
+
+    scrollHeight = 1_200
+
+    await act(async () => {
+      for (const observer of resizeObservers) {
+        observer.trigger(1_200)
+      }
+    })
+    await wait(0)
+
+    expect(viewport.scrollTop).toBe(420)
+  })
+
+  it('keeps sticky-bottom armed through viewport height changes during streaming', async () => {
+    const { container } = render(<StreamingHarness />)
+
+    const content = container.querySelector('[data-slot="aui_thread-content"]') as HTMLDivElement
+    const viewport = content.parentElement as HTMLDivElement
+    let clientHeight = 200
+    let scrollHeight = 1_000
+
+    Object.defineProperty(viewport, 'clientHeight', {
+      configurable: true,
+      get: () => clientHeight
+    })
+    Object.defineProperty(viewport, 'scrollHeight', {
+      configurable: true,
+      get: () => scrollHeight
+    })
+
+    await wait(80)
+
+    await act(async () => {
+      viewport.scrollTop = 800
+      fireEvent.scroll(viewport)
+    })
+
+    clientHeight = 240
+
+    await act(async () => {
+      viewport.scrollTop = 760
+      fireEvent.scroll(viewport)
+    })
+
+    scrollHeight = 1_200
+
+    await act(async () => {
+      for (const observer of resizeObservers) {
+        observer.trigger(1_200)
+      }
+    })
+    await wait(0)
+
+    expect(viewport.scrollTop).toBe(1_200)
+  })
+
   it('honors the first upward wheel scroll even when a programmatic bottom-pin scroll event is still pending', async () => {
     const { container } = render(<StreamingHarness />)
 
@@ -449,10 +566,98 @@ describe('assistant-ui streaming renderer', () => {
     expect(viewport.scrollTop).toBe(420)
   })
 
+  it('keeps following final code-highlight growth when a run completes at bottom', async () => {
+    const { container } = render(<StreamingHarness />)
+
+    const content = container.querySelector('[data-slot="aui_thread-content"]') as HTMLDivElement
+    const viewport = content.parentElement as HTMLDivElement
+    let scrollHeight = 1_000
+
+    Object.defineProperty(viewport, 'clientHeight', { configurable: true, value: 200 })
+    Object.defineProperty(viewport, 'scrollHeight', {
+      configurable: true,
+      get: () => scrollHeight
+    })
+
+    await wait(80)
+
+    await act(async () => {
+      viewport.scrollTop = 800
+      fireEvent.scroll(viewport)
+    })
+
+    await wait(650)
+
+    scrollHeight = 1_700
+    await wait(0)
+
+    expect(viewport.scrollTop).toBe(1_700)
+  })
+
+  it('does not restart bottom-follow after completion when the user scrolled up', async () => {
+    const { container } = render(<StreamingHarness />)
+
+    const content = container.querySelector('[data-slot="aui_thread-content"]') as HTMLDivElement
+    const viewport = content.parentElement as HTMLDivElement
+    let scrollHeight = 1_000
+
+    Object.defineProperty(viewport, 'clientHeight', { configurable: true, value: 200 })
+    Object.defineProperty(viewport, 'scrollHeight', {
+      configurable: true,
+      get: () => scrollHeight
+    })
+
+    await wait(80)
+
+    await act(async () => {
+      viewport.scrollTop = 800
+      fireEvent.scroll(viewport)
+    })
+
+    await act(async () => {
+      fireEvent.wheel(viewport, { deltaY: -120 })
+      viewport.scrollTop = 420
+      fireEvent.scroll(viewport)
+    })
+
+    await wait(650)
+
+    scrollHeight = 1_700
+    await wait(0)
+
+    expect(viewport.scrollTop).toBe(420)
+  })
+
+  it('renders an incomplete streaming fenced code block as a code card', async () => {
+    const { container } = render(<RunningMessageHarness message={assistantMessage('```ts\nconst answer = 42\n')} />)
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-slot="code-card"]')).toBeTruthy()
+    })
+
+    expect(container.textContent).toContain('const answer = 42')
+    expect(container.textContent).not.toContain('```ts')
+  })
+
+  it('renders an incomplete streaming reasoning fenced code block as a code card', async () => {
+    const { container } = render(<RunningReasoningHarness />)
+    const ui = within(container)
+
+    fireEvent.click(ui.getByRole('button', { name: /thinking/i }))
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-slot="code-card"]')).toBeTruthy()
+    })
+
+    expect(container.querySelector('[data-slot="aui_reasoning-text"]')?.textContent).toContain('const answer = 42')
+    expect(container.textContent).not.toContain('```ts')
+  })
+
   it('renders reasoning text without a leading token space', () => {
     const { container } = render(<ReasoningHarness />)
+    const ui = within(container)
 
-    fireEvent.click(screen.getByRole('button', { name: /thinking/i }))
+    fireEvent.click(ui.getByRole('button', { name: /thinking/i }))
 
     expect(container.querySelector('[data-slot="aui_reasoning-text"]')?.textContent).toBe(
       'The user is asking what this file is.'
diff --git a/apps/desktop/src/components/assistant-ui/thread-virtualizer.tsx b/apps/desktop/src/components/assistant-ui/thread-virtualizer.tsx
index 784ed71f3..7a5f51107 100644
--- a/apps/desktop/src/components/assistant-ui/thread-virtualizer.tsx
+++ b/apps/desktop/src/components/assistant-ui/thread-virtualizer.tsx
@@ -1,6 +1,6 @@
 import { ThreadPrimitive, useAuiEvent, useAuiState } from '@assistant-ui/react'
 import { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual'
-import { type ComponentProps, type FC, type ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import { type ComponentProps, type FC, memo, type ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
 
 import { cn } from '@/lib/utils'
 import { setThreadScrolledUp } from '@/store/thread-scroll'
@@ -8,6 +8,7 @@ import { setThreadScrolledUp } from '@/store/thread-scroll'
 const ESTIMATED_ITEM_HEIGHT = 220
 const OVERSCAN = 4
 const AT_BOTTOM_THRESHOLD = 4
+const POST_RUN_BOTTOM_LOCK_MS = 1_200
 
 type ThreadMessageComponents = ComponentProps<typeof ThreadPrimitive.MessageByIndex>['components']
 
@@ -55,7 +56,7 @@ function buildGroups(signature: string): MessageGroup[] {
   return groups
 }
 
-export const VirtualizedThread: FC<VirtualizedThreadProps> = ({
+const VirtualizedThreadInner: FC<VirtualizedThreadProps> = ({
   clampToComposer,
   components,
   emptyPlaceholder,
@@ -65,11 +66,16 @@ export const VirtualizedThread: FC<VirtualizedThreadProps> = ({
   const messageSignature = useAuiState(s =>
     s.thread.messages.map((message, index) => `${index}:${message.id}:${message.role}`).join('\n')
   )
+  const isRunning = useAuiState(s => s.thread.isRunning)
 
   const groups = useMemo(() => buildGroups(messageSignature), [messageSignature])
   const renderEmpty = groups.length === 0 && Boolean(emptyPlaceholder)
   const scrollerRef = useRef<HTMLDivElement | null>(null)
 
+  // Shared ref so scrollToFn can check whether the user is parked at the
+  // bottom without needing a ref from inside useThreadScrollAnchor.
+  const stickyBottomRef = useRef(true)
+
   const virtualizer = useVirtualizer({
     count: groups.length,
     estimateSize: () => ESTIMATED_ITEM_HEIGHT,
@@ -78,14 +84,39 @@ export const VirtualizedThread: FC<VirtualizedThreadProps> = ({
     // Seed the rect so the initial range mounts something before
     // `observeElementRect` reports the real layout (it overrides this).
     initialRect: { height: 600, width: 800 },
-    overscan: OVERSCAN
+    overscan: OVERSCAN,
+    // When the virtualizer adjusts scroll due to item measurement changes,
+    // skip the adjustment if the user is at the bottom. Our ResizeObserver +
+    // pinToBottom loop handles scroll anchoring; letting the virtualizer also
+    // adjust creates a feedback loop where the two fight each other,
+    // producing visible rubber-banding (the view snaps to the composer
+    // then jumps back up).
+    scrollToFn: (offset, _options, instance) => {
+      const el = instance.scrollElement
+      if (!el) {
+        return
+      }
+
+      if (stickyBottomRef.current) {
+        const maxScroll = el.scrollHeight - el.clientHeight
+        const distFromBottom = maxScroll - el.scrollTop
+
+        if (distFromBottom <= AT_BOTTOM_THRESHOLD && offset < maxScroll) {
+          return
+        }
+      }
+
+      ;(el as HTMLElement).scrollTo(0, offset)
+    }
   })
 
   useThreadScrollAnchor({
     enabled: !renderEmpty,
     groupCount: groups.length,
+    isRunning,
     scrollerRef,
     sessionKey: sessionKey ?? null,
+    stickyBottomRef,
     virtualizer
   })
 
@@ -169,20 +200,34 @@ export const VirtualizedThread: FC<VirtualizedThreadProps> = ({
   )
 }
 
+export const VirtualizedThread = memo(VirtualizedThreadInner)
+
 interface ScrollAnchorOptions {
   enabled: boolean
   groupCount: number
+  isRunning: boolean
   scrollerRef: React.RefObject<HTMLDivElement | null>
   sessionKey: string | null
+  stickyBottomRef: React.MutableRefObject<boolean>
   virtualizer: Virtualizer<HTMLDivElement, Element>
 }
 
-function useThreadScrollAnchor({ enabled, groupCount, scrollerRef, sessionKey, virtualizer }: ScrollAnchorOptions) {
-  // `armed` = parked at bottom, content growth should follow. Cleared on
+function useThreadScrollAnchor({
+  enabled,
+  groupCount,
+  isRunning,
+  scrollerRef,
+  sessionKey,
+  stickyBottomRef,
+  virtualizer
+}: ScrollAnchorOptions) {
+  // `stickyBottomRef` = parked at bottom, content growth should follow. Cleared on
   // user-driven upward scroll; re-armed when they reach bottom again.
-  const armedRef = useRef(true)
+  // This is a shared ref — scrollToFn reads it to prevent the virtualizer's
+  // measurement adjustments from fighting our pinToBottom.
   const lastTopRef = useRef(0)
   const lastHeightRef = useRef(0)
+  const lastClientHeightRef = useRef(0)
   // Counter that tracks how many scroll events we expect to be ours rather
   // than the user's. `pinToBottom` writes `el.scrollTop`, which fires an
   // async `scroll` event; without this guard the on-scroll handler can race
@@ -208,21 +253,22 @@ function useThreadScrollAnchor({ enabled, groupCount, scrollerRef, sessionKey, v
     el.scrollTop = el.scrollHeight
     lastTopRef.current = el.scrollTop
     lastHeightRef.current = el.scrollHeight
+    lastClientHeightRef.current = el.clientHeight
   }, [scrollerRef])
 
   const jumpToBottom = useCallback(() => {
-    armedRef.current = true
+    stickyBottomRef.current = true
 
     if (groupCount > 0) {
       virtualizer.scrollToIndex(groupCount - 1, { align: 'end', behavior: 'auto' })
     }
 
     requestAnimationFrame(() => {
-      if (armedRef.current) {
+      if (stickyBottomRef.current) {
         pinToBottom()
       }
     })
-  }, [groupCount, pinToBottom, virtualizer])
+  }, [groupCount, pinToBottom, stickyBottomRef, virtualizer])
 
   useEffect(() => () => setThreadScrolledUp(false), [])
 
@@ -236,7 +282,7 @@ function useThreadScrollAnchor({ enabled, groupCount, scrollerRef, sessionKey, v
     }
 
     const disarm = () => {
-      armedRef.current = false
+      stickyBottomRef.current = false
       programmaticScrollPendingRef.current = 0
     }
 
@@ -254,39 +300,35 @@ function useThreadScrollAnchor({ enabled, groupCount, scrollerRef, sessionKey, v
         programmaticScrollPendingRef.current -= 1
         lastTopRef.current = top
         lastHeightRef.current = el.scrollHeight
+        lastClientHeightRef.current = el.clientHeight
         // Always re-arm — sticky-bottom should hold through clamp races.
-        armedRef.current = true
+        stickyBottomRef.current = true
         const atBottom = el.scrollHeight - (top + el.clientHeight) <= AT_BOTTOM_THRESHOLD
         setThreadScrolledUp(!atBottom)
 
         return
       }
 
-      // Disarm only when `scrollTop` decreases AND `scrollHeight` did NOT
-      // grow this frame. A bare `top < lastTopRef.current` check is unsafe:
-      // when content grows (virtualizer item measurement, streaming token,
-      // code highlight re-tokenization, composer chip), the browser emits
-      // an interim `scroll` event whose `scrollTop` is smaller than the
-      // previous frame's because `scrollHeight` jumped — this fires before
-      // the rAF-scheduled `pinToBottom` runs, so `programmaticScrollPendingRef`
-      // is 0. Treating that as a user scroll permanently disarmed sticky-bottom
-      // and produced the visible at-rest backward jump (#37997). Gating on a
-      // stable `scrollHeight` keeps real user-driven upward intent — scrollbar
-      // drag, keyboard PgUp, programmatic scrollIntoView — covered without
-      // the false positive. Wheel-up and touchmove still disarm via their
-      // own listeners below.
+      // Disarm only when `scrollTop` decreases while both content height and
+      // viewport height are stable. A bare `top < lastTopRef.current` check is
+      // unsafe: virtualizer measurement, streaming markdown, composer resizing,
+      // window resizing, and toolbar/status updates can all move scrollTop as a
+      // layout side effect. Wheel-up and touchmove still disarm immediately via
+      // their own listeners below, so real user intent remains covered.
       const heightGrew = el.scrollHeight > lastHeightRef.current
-      if (!heightGrew && top + 1 < lastTopRef.current) {
-        armedRef.current = false
+      const clientHeightChanged = Math.abs(el.clientHeight - lastClientHeightRef.current) > 1
+      if (!heightGrew && !clientHeightChanged && top + 1 < lastTopRef.current) {
+        stickyBottomRef.current = false
       }
 
       lastTopRef.current = top
       lastHeightRef.current = el.scrollHeight
+      lastClientHeightRef.current = el.clientHeight
 
       const atBottom = el.scrollHeight - (top + el.clientHeight) <= AT_BOTTOM_THRESHOLD
 
       if (atBottom) {
-        armedRef.current = true
+        stickyBottomRef.current = true
       }
 
       setThreadScrolledUp(!atBottom)
@@ -307,7 +349,7 @@ function useThreadScrollAnchor({ enabled, groupCount, scrollerRef, sessionKey, v
       el.removeEventListener('wheel', onWheel)
       el.removeEventListener('touchmove', disarm)
     }
-  }, [scrollerRef])
+  }, [scrollerRef, stickyBottomRef])
 
   // Follow content growth (streaming, item measurements, loading indicator)
   // while armed. During fast streaming the ResizeObserver can fire many
@@ -316,7 +358,7 @@ function useThreadScrollAnchor({ enabled, groupCount, scrollerRef, sessionKey, v
   // (~20+ ms self in `Virtualizer.getMaxScrollOffset`) several times per
   // token.
   useEffect(() => {
-    if (!enabled) {
+    if (!enabled || !isRunning) {
       return undefined
     }
 
@@ -328,13 +370,13 @@ function useThreadScrollAnchor({ enabled, groupCount, scrollerRef, sessionKey, v
 
     let pinRafScheduled = false
     const schedulePin = () => {
-      if (pinRafScheduled || !armedRef.current) {
+      if (pinRafScheduled || !stickyBottomRef.current) {
         return
       }
       pinRafScheduled = true
       requestAnimationFrame(() => {
         pinRafScheduled = false
-        if (armedRef.current) {
+        if (stickyBottomRef.current) {
           pinToBottom()
         }
       })
@@ -350,7 +392,7 @@ function useThreadScrollAnchor({ enabled, groupCount, scrollerRef, sessionKey, v
     }
 
     return () => observer.disconnect()
-  }, [enabled, pinToBottom, scrollerRef])
+  }, [enabled, isRunning, pinToBottom, scrollerRef, stickyBottomRef])
 
   // Jump to bottom on session change OR when an empty thread first gets
   // content. Both share the same intent and the same effect.
@@ -387,16 +429,56 @@ function useThreadScrollAnchor({ enabled, groupCount, scrollerRef, sessionKey, v
     if (!enabled) {
       return
     }
-    if (groupCount > prevGroupCountForLayoutRef.current && armedRef.current) {
+    if (groupCount > prevGroupCountForLayoutRef.current && stickyBottomRef.current) {
       pinToBottom()
       requestAnimationFrame(() => {
-        if (armedRef.current) {
+        if (stickyBottomRef.current) {
           pinToBottom()
         }
       })
     }
     prevGroupCountForLayoutRef.current = groupCount
-  }, [enabled, groupCount, pinToBottom])
+  }, [enabled, groupCount, pinToBottom, stickyBottomRef])
+
+  // Completion swaps streaming placeholders/plain code for final rendered DOM
+  // (notably Shiki-highlighted code). Keep following the bottom briefly after
+  // `isRunning` flips false so that final measurement pass cannot strand the
+  // viewport near the top of a large code block.
+  const prevIsRunningForLayoutRef = useRef(isRunning)
+  useLayoutEffect(() => {
+    const finishedRun = prevIsRunningForLayoutRef.current && !isRunning
+    prevIsRunningForLayoutRef.current = isRunning
+
+    if (!enabled || !finishedRun || !stickyBottomRef.current) {
+      return undefined
+    }
+
+    const lockUntil = performance.now() + POST_RUN_BOTTOM_LOCK_MS
+    let lockRaf: number | null = null
+
+    const lockFrame = () => {
+      lockRaf = null
+
+      if (!stickyBottomRef.current) {
+        return
+      }
+
+      pinToBottom()
+
+      if (performance.now() < lockUntil) {
+        lockRaf = requestAnimationFrame(lockFrame)
+      }
+    }
+
+    pinToBottom()
+    lockRaf = requestAnimationFrame(lockFrame)
+
+    return () => {
+      if (lockRaf !== null) {
+        cancelAnimationFrame(lockRaf)
+      }
+    }
+  }, [enabled, isRunning, pinToBottom, stickyBottomRef])
 
   useAuiEvent('thread.runStart', jumpToBottom)
 }
diff --git a/apps/desktop/src/components/assistant-ui/thread.tsx b/apps/desktop/src/components/assistant-ui/thread.tsx
index 1576ab9b5..7cd4a88bb 100644
--- a/apps/desktop/src/components/assistant-ui/thread.tsx
+++ b/apps/desktop/src/components/assistant-ui/thread.tsx
@@ -13,6 +13,7 @@ import { useStore } from '@nanostores/react'
 import { IconPlayerStopFilled } from '@tabler/icons-react'
 import {
   type ClipboardEvent,
+  type ComponentProps,
   type FC,
   type FocusEvent,
   type FormEvent,
@@ -48,14 +49,13 @@ import { detectTrigger, textBeforeCaret, type TriggerState } from '@/app/chat/co
 import { ComposerTriggerPopover } from '@/app/chat/composer/trigger-popover'
 import { extractDroppedFiles, HERMES_PATHS_MIME } from '@/app/chat/hooks/use-composer-actions'
 import { ClarifyTool } from '@/components/assistant-ui/clarify-tool'
-import { DirectiveContent } from '@/components/assistant-ui/directive-text'
-import { UserMessageText } from '@/components/assistant-ui/user-message-text'
-import { hermesDirectiveFormatter } from '@/components/assistant-ui/directive-text'
-import { MarkdownText } from '@/components/assistant-ui/markdown-text'
+import { DirectiveContent, hermesDirectiveFormatter } from '@/components/assistant-ui/directive-text'
+import { MarkdownText, MarkdownTextContent } from '@/components/assistant-ui/markdown-text'
 import { VirtualizedThread } from '@/components/assistant-ui/thread-virtualizer'
 import { HoistedTodoPanel, todosFromMessageContent } from '@/components/assistant-ui/todo-tool'
 import { ToolFallback, ToolGroupSlot } from '@/components/assistant-ui/tool-fallback'
 import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button'
+import { UserMessageText } from '@/components/assistant-ui/user-message-text'
 import { useElapsedSeconds } from '@/components/chat/activity-timer'
 import { ActivityTimerText } from '@/components/chat/activity-timer-text'
 import { DisclosureRow } from '@/components/chat/disclosure-row'
@@ -221,6 +221,7 @@ const AssistantMessage: FC<{ onBranchInNewChat?: (messageId: string) => void }>
   const messageStatus = useAuiState(s => s.message.status?.type)
   const isPlaceholder = messageStatus === 'running' && content.length === 0
   const interruptedOnly = useMemo(() => isInterruptedOnlyMessage(messageText), [messageText])
+  const enterRef = useEnterAnimation(messageStatus === 'running', `assistant-message:${messageId}`)
 
   if (isPlaceholder) {
     return null
@@ -231,6 +232,8 @@ const AssistantMessage: FC<{ onBranchInNewChat?: (messageId: string) => void }>
       className="group flex w-full min-w-0 max-w-full flex-col gap-0 self-start overflow-hidden"
       data-role="assistant"
       data-slot="aui_assistant-message-root"
+      data-streaming={messageStatus === 'running' ? 'true' : undefined}
+      ref={enterRef}
     >
       <div
         className={cn(
@@ -446,17 +449,19 @@ const ReasoningAccordionGroup: FC<{ children?: ReactNode; endIndex: number; star
 
 const ReasoningTextPart: FC<{ text: string; status?: { type: string } }> = ({ text, status }) => {
   const displayText = text.trimStart()
+  const messageRunning = useAuiState(s => s.message.status?.type === 'running')
+  const isRunning = status?.type === 'running' || messageRunning
 
   return (
-    <div
-      className={cn(
-        'whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground/85',
-        status?.type === 'running' && 'shimmer text-muted-foreground/55'
+    <MarkdownTextContent
+      containerClassName={cn(
+        'text-xs leading-relaxed text-muted-foreground/85',
+        isRunning && 'shimmer text-muted-foreground/55'
       )}
-      data-slot="aui_reasoning-text"
-    >
-      {displayText}
-    </div>
+      containerProps={{ 'data-slot': 'aui_reasoning-text' } as ComponentProps<'div'>}
+      isRunning={isRunning}
+      text={displayText}
+    />
   )
 }
 
diff --git a/apps/desktop/src/components/chat/shiki-highlighter.tsx b/apps/desktop/src/components/chat/shiki-highlighter.tsx
index b015949ae..e53fd9da4 100644
--- a/apps/desktop/src/components/chat/shiki-highlighter.tsx
+++ b/apps/desktop/src/components/chat/shiki-highlighter.tsx
@@ -64,7 +64,7 @@ export const SyntaxHighlighter: FC<HermesSyntaxHighlighterProps> = ({
   const label = cleanLanguage && cleanLanguage !== 'unknown' ? cleanLanguage : ''
 
   return (
-    <CodeCard>
+    <CodeCard data-streaming={defer ? 'true' : undefined}>
       <CodeCardHeader>
         <CodeCardTitle>
           <CodeCardIcon name={codiconForLanguage(label)} />
diff --git a/apps/desktop/src/lib/use-enter-animation.ts b/apps/desktop/src/lib/use-enter-animation.ts
index c95878f41..259cf7a38 100644
--- a/apps/desktop/src/lib/use-enter-animation.ts
+++ b/apps/desktop/src/lib/use-enter-animation.ts
@@ -81,10 +81,10 @@ export function useEnterAnimation(enabled: boolean, animationKey?: string): (el:
 
     el.animate(
       [
-        { opacity: 0, transform: 'translateY(0.5rem)' },
+        { opacity: 0, transform: 'translateY(0.375rem)' },
         { opacity: 1, transform: 'translateY(0)' }
       ],
-      { duration: 220, easing: 'linear', fill: 'both' }
+      { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' }
     )
 
     if (key) {
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index eae9cb6ce..b85f21f36 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -916,6 +916,32 @@ canvas {
   margin-block: 0 !important;
 }
 
+[data-slot='aui_assistant-message-content'] .aui-md [data-slot='code-card'] {
+  position: relative;
+  transition:
+    border-color 180ms ease-out,
+    box-shadow 180ms ease-out,
+    background-color 180ms ease-out;
+}
+
+[data-slot='aui_assistant-message-content'] .aui-md [data-slot='code-card'][data-streaming='true'] {
+  animation:
+    code-card-stream-enter 180ms cubic-bezier(0.16, 1, 0.3, 1) both,
+    code-card-stream-glow 1.8s ease-in-out 180ms infinite alternate;
+  border-color: color-mix(in srgb, var(--dt-ring) 24%, var(--ui-stroke-tertiary));
+  box-shadow:
+    0 0 0 0.0625rem color-mix(in srgb, var(--dt-ring) 10%, transparent),
+    0 0.625rem 1.75rem color-mix(in srgb, var(--dt-ring) 8%, transparent);
+}
+
+[data-slot='aui_assistant-message-content']
+  .aui-md
+  [data-slot='code-card'][data-streaming='true']
+  [data-slot='code-card-body'] {
+  -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 1.5rem), rgb(0 0 0 / 64%) 100%);
+  mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 1.5rem), rgb(0 0 0 / 64%) 100%);
+}
+
 [data-slot='aui_assistant-message-content'] .aui-md :not(pre) > code {
   border: 0.0625rem solid var(--ui-inline-code-border);
   background: var(--ui-inline-code-background);
@@ -1038,3 +1064,37 @@ canvas {
   -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 100%);
   mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 100%);
 }
+
+@keyframes code-card-stream-enter {
+  from {
+    opacity: 0.74;
+    transform: translateY(0.375rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes code-card-stream-glow {
+  from {
+    border-color: color-mix(in srgb, var(--dt-ring) 18%, var(--ui-stroke-tertiary));
+    box-shadow:
+      0 0 0 0.0625rem color-mix(in srgb, var(--dt-ring) 6%, transparent),
+      0 0.5rem 1.5rem color-mix(in srgb, var(--dt-ring) 5%, transparent);
+  }
+
+  to {
+    border-color: color-mix(in srgb, var(--dt-ring) 32%, var(--ui-stroke-tertiary));
+    box-shadow:
+      0 0 0 0.0625rem color-mix(in srgb, var(--dt-ring) 12%, transparent),
+      0 0.75rem 2rem color-mix(in srgb, var(--dt-ring) 10%, transparent);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot='aui_assistant-message-content'] .aui-md [data-slot='code-card'][data-streaming='true'] {
+    animation: none;
+  }
+}