perf(ui): add fast assistant streaming render path

Minimal UI changes for the dual-lane streaming pipeline:
- Dispatch display-lane chunks outside solidBatch (server-events.ts)
- FastStreamingText component with textNode.appendData() for zero-rerender DOM updates
- Assistant stream render mode decision (streaming_preview / complete_rich)
- Per-key signal store for assistant stream preview text
- Delta coalescing queue with rAF-based flushing (session-events.ts)
- Fix stop button: compacting->idle guard, optimistic idle, isSessionBusy check
- Active stream target tracking in App.tsx for Tauri transport
- Draft prompt debounce (150ms + flush on blur)
- ensureLanguages() cache for Shiki highlighting

Author: pascalandr

packages/ui/src/App.tsx

@@ -22,6 +22,8 @@ import { initReleaseNotifications } from "./stores/releases"
 import { runtimeEnv } from "./lib/runtime-env"
 import { useI18n } from "./lib/i18n"
 import { setWakeLockDesired } from "./lib/native/wake-lock"
+import { setTauriDesktopActiveSession } from "./lib/native/desktop-events"
+import { clearAssistantStreamSession } from "./stores/assistant-stream"
 import {
   hasInstances,
   isSelectingFolder,
@@ -226,6 +228,35 @@ const App: Component = () => {
     return activeSessionId().get(instance.id) || null
   })
 
+  const activeStreamTarget = createMemo(() => {
+    const instance = activeInstance()
+    const sessionId = activeSessionIdForInstance()
+    if (!instance || !sessionId) return null
+    return {
+      instanceId: instance.id,
+      sessionId,
+    }
+  })
+
+  let previousActiveStreamTarget: ReturnType<typeof activeStreamTarget> = null
+
+  createEffect(() => {
+    if (runtimeEnv.host !== "tauri") {
+      return
+    }
+
+    const currentTarget = activeStreamTarget()
+    if (previousActiveStreamTarget) {
+      clearAssistantStreamSession(
+        previousActiveStreamTarget.instanceId,
+        previousActiveStreamTarget.sessionId,
+      )
+    }
+    previousActiveStreamTarget = currentTarget
+
+    void setTauriDesktopActiveSession(currentTarget)
+  })
+
   const launchErrorPath = () => {
     const value = launchError()?.binaryPath
     if (!value) return "opencode"

packages/ui/src/components/assistant-streaming-state.ts

@@ -0,0 +1,70 @@
+import type { MessageStatus } from "../stores/message-v2/types"
+import type { ClientPart } from "../types/message"
+
+export type AssistantStreamRenderMode =
+  | "streaming_preview"
+  | "stabilizing_preview"
+  | "complete_rich"
+
+export interface AssistantStreamRenderDecision {
+  mode: AssistantStreamRenderMode
+  text: string
+}
+
+interface ResolveAssistantStreamRenderDecisionInput {
+  messageType?: "user" | "assistant"
+  messageStatus?: MessageStatus
+  part: ClientPart
+  previewText?: string
+}
+
+export function resolveAssistantStreamRenderDecision(
+  input: ResolveAssistantStreamRenderDecisionInput,
+): AssistantStreamRenderDecision {
+  const canonicalText =
+    input.part?.type === "text" && typeof input.part.text === "string" ? input.part.text : ""
+  const previewText = input.previewText ?? ""
+  const hasPreview = previewText.length > 0
+
+  if (input.messageType !== "assistant" || input.part?.type !== "text") {
+    return {
+      mode: "complete_rich",
+      text: canonicalText,
+    }
+  }
+
+  if (input.messageStatus === "streaming") {
+    if (hasPreview) {
+      return {
+        mode: "streaming_preview",
+        text: previewText,
+      }
+    }
+  }
+
+  if (hasPreview && canonicalText.length >= previewText.length) {
+    return {
+      mode: "complete_rich",
+      text: canonicalText,
+    }
+  }
+
+  if ((input.messageStatus === "complete" || input.messageStatus === "error") && canonicalText.length > 0) {
+    return {
+      mode: "complete_rich",
+      text: canonicalText,
+    }
+  }
+
+  if (hasPreview) {
+    return {
+      mode: "stabilizing_preview",
+      text: previewText,
+    }
+  }
+
+  return {
+    mode: "complete_rich",
+    text: canonicalText,
+  }
+}

packages/ui/src/components/fast-streaming-text.tsx

@@ -0,0 +1,67 @@
+import { createEffect, onCleanup } from "solid-js"
+
+interface FastStreamingTextProps {
+  text: string
+  class?: string
+  dir?: "auto" | "ltr" | "rtl"
+  onRendered?: () => void
+}
+
+export default function FastStreamingText(props: FastStreamingTextProps) {
+  let element: HTMLDivElement | undefined
+  let textNode: Text | null = null
+  let previousText = ""
+  let pendingFrame: number | null = null
+
+  const notifyRendered = () => {
+    if (!props.onRendered || typeof requestAnimationFrame !== "function") {
+      return
+    }
+
+    if (pendingFrame !== null) {
+      cancelAnimationFrame(pendingFrame)
+    }
+
+    pendingFrame = requestAnimationFrame(() => {
+      pendingFrame = null
+      props.onRendered?.()
+    })
+  }
+
+  createEffect(() => {
+    const nextText = props.text ?? ""
+    if (!element) {
+      previousText = nextText
+      return
+    }
+
+    if (!textNode) {
+      textNode = document.createTextNode(nextText)
+      element.replaceChildren(textNode)
+      previousText = nextText
+      notifyRendered()
+      return
+    }
+
+    if (nextText === previousText) {
+      return
+    }
+
+    if (nextText.startsWith(previousText)) {
+      textNode.appendData(nextText.slice(previousText.length))
+    } else {
+      textNode.data = nextText
+    }
+
+    previousText = nextText
+    notifyRendered()
+  })
+
+  onCleanup(() => {
+    if (pendingFrame !== null) {
+      cancelAnimationFrame(pendingFrame)
+    }
+  })
+
+  return <div ref={element} class={props.class} dir={props.dir ?? "auto"} />
+}

packages/ui/src/components/markdown.tsx

@@ -87,12 +87,17 @@ interface MarkdownProps {
   onRendered?: () => void
 }
 
+/** Default throttle delay for expensive Shiki re-renders (ms). */
+const MARKDOWN_RENDER_THROTTLE_MS = 120
+
 export function Markdown(props: MarkdownProps) {
   const { t } = useI18n()
   const [html, setHtml] = createSignal("")
   let containerRef: HTMLDivElement | undefined
   let latestRequestKey = ""
   let cleanupLanguageListener: (() => void) | undefined
+  let renderTimer: ReturnType<typeof setTimeout> | undefined
+  let hasRenderedOnce = false
 
   const notifyRendered = () => {
     Promise.resolve().then(() => props.onRendered?.())
@@ -155,6 +160,32 @@ export function Markdown(props: MarkdownProps) {
     }
   }
 
+  /** Schedule a Shiki render, debounced after the first paint. */
+  const scheduleRender = (snapshot: ReturnType<typeof resolved>) => {
+    const doRender = () => {
+      void renderSnapshot(snapshot).catch((error) => {
+        log.error("Failed to render markdown:", error)
+        if (latestRequestKey === snapshot.requestKey) {
+          commitCacheEntry(snapshot, renderFallbackHtml(snapshot.text))
+        }
+      })
+    }
+
+    // First render is always immediate to avoid a prolonged fallback flash.
+    if (!hasRenderedOnce) {
+      hasRenderedOnce = true
+      doRender()
+      return
+    }
+
+    // Subsequent renders are debounced to coalesce Shiki language-load cascades.
+    if (renderTimer) clearTimeout(renderTimer)
+    renderTimer = setTimeout(() => {
+      renderTimer = undefined
+      doRender()
+    }, MARKDOWN_RENDER_THROTTLE_MS)
+  }
+
   createEffect(() => {
     const snapshot = resolved()
     latestRequestKey = snapshot.requestKey
@@ -182,12 +213,7 @@ export function Markdown(props: MarkdownProps) {
     setHtml(renderFallbackHtml(snapshot.text))
     notifyRendered()
 
-    void renderSnapshot(snapshot).catch((error) => {
-      log.error("Failed to render markdown:", error)
-      if (latestRequestKey === snapshot.requestKey) {
-        commitCacheEntry(snapshot, renderFallbackHtml(snapshot.text))
-      }
-    })
+    scheduleRender(snapshot)
   })
 
   onMount(() => {
@@ -234,9 +260,7 @@ export function Markdown(props: MarkdownProps) {
           }
 
           latestRequestKey = snapshot.requestKey
-          void renderSnapshot(snapshot).catch((error) => {
-            log.error("Failed to re-render markdown after language load:", error)
-          })
+          scheduleRender(snapshot)
         })
       })
       .catch((error) => {
@@ -245,6 +269,8 @@ export function Markdown(props: MarkdownProps) {
 
     onCleanup(() => {
       disposed = true
+      if (renderTimer) clearTimeout(renderTimer)
+      renderTimer = undefined
       containerRef?.removeEventListener("click", handleClick)
       cleanupLanguageListener?.()
       cleanupLanguageListener = undefined