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

@@ -25,6 +25,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 {
   isSelectingFolder,
   setIsSelectingFolder,
@@ -249,6 +251,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/markdown.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { createEffect, createMemo, createSignal, onCleanup, onMount, untrack } from "solid-js"
 import { useGlobalCache } from "../lib/hooks/use-global-cache"
 import type { TextPart, RenderCache } from "../types/message"
 import { getLogger } from "../lib/logger"
@@ -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,45 @@ export function Markdown(props: MarkdownProps) {
     }
   }
 
+  /** Schedule a Shiki render, throttled after the first paint. */
+  let pendingRenderSnapshot: ReturnType<typeof resolved> | undefined
+
+  const scheduleRender = (snapshot: ReturnType<typeof resolved>) => {
+    const doRender = (snap: ReturnType<typeof resolved>) => {
+      latestRequestKey = snap.requestKey
+      void renderSnapshot(snap).catch((error) => {
+        log.error("Failed to render markdown:", error)
+        if (latestRequestKey === snap.requestKey) {
+          commitCacheEntry(snap, renderFallbackHtml(snap.text))
+        }
+      })
+    }
+
+    // First render is always immediate to avoid a prolonged fallback flash.
+    if (!hasRenderedOnce) {
+      hasRenderedOnce = true
+      doRender(snapshot)
+      return
+    }
+
+    // Subsequent renders are throttled: the timer fires at a fixed cadence
+    // and always uses the latest pending snapshot.  Unlike a debounce, the
+    // timer is NOT reset when new snapshots arrive, so Shiki re-renders
+    // periodically (~every MARKDOWN_RENDER_THROTTLE_MS) even during
+    // continuous streaming — preventing the raw↔markdown flash.
+    pendingRenderSnapshot = snapshot
+    if (!renderTimer) {
+      renderTimer = setTimeout(() => {
+        renderTimer = undefined
+        const snap = pendingRenderSnapshot
+        if (snap) {
+          pendingRenderSnapshot = undefined
+          doRender(snap)
+        }
+      }, MARKDOWN_RENDER_THROTTLE_MS)
+    }
+  }
+
   createEffect(() => {
     const snapshot = resolved()
     latestRequestKey = snapshot.requestKey
@@ -179,15 +223,15 @@ export function Markdown(props: MarkdownProps) {
       return
     }
 
-    setHtml(renderFallbackHtml(snapshot.text))
+    // Keep the previous rendered markdown visible while Shiki re-renders.
+    // Only fall back to escaped plain text on the initial render (no prior
+    // content).  This eliminates the raw↔markdown flash during streaming.
+    if (!untrack(html)) {
+      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 +278,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 +287,9 @@ export function Markdown(props: MarkdownProps) {
 
     onCleanup(() => {
       disposed = true
+      if (renderTimer) clearTimeout(renderTimer)
+      renderTimer = undefined
+      pendingRenderSnapshot = undefined
       containerRef?.removeEventListener("click", handleClick)
       cleanupLanguageListener?.()
       cleanupLanguageListener = undefined

packages/ui/src/components/message-part.tsx

@@ -1,13 +1,21 @@
-import { Match, Show, Suspense, Switch, lazy } from "solid-js"
+import { Match, Show, Suspense, Switch, createMemo, createSignal, lazy } from "solid-js"
 import { isItemExpanded, toggleItemExpanded } from "../stores/tool-call-state"
 import { Markdown } from "./markdown"
 import { useTheme } from "../lib/theme"
 import { partHasRenderableText, SDKPart, TextPart, ClientPart } from "../types/message"
+import { useI18n } from "../lib/i18n"
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 
 const LazyToolCall = lazy(() => import("./tool-call"))
 
+/** Collapse text parts larger than this to avoid massive DOM trees. */
+const LARGE_TEXT_COLLAPSE_THRESHOLD = 12_000
+const LARGE_TEXT_PREVIEW_CHARS = 3_200
+
+/** Module-level set tracking which part IDs the user has expanded. */
+const expandedLargeTextPartIds = new Set<string>()
+
 interface MessagePartProps {
   part: ClientPart
   messageType?: "user" | "assistant"
@@ -22,6 +30,7 @@ interface MessagePartProps {
 export default function MessagePart(props: MessagePartProps) {
 
   const { isDark } = useTheme()
+  const { t } = useI18n()
   const partType = () => props.part?.type || ""
   const reasoningId = () => `reasoning-${props.part?.id || ""}`
   const isReasoningExpanded = () => isItemExpanded(reasoningId())
@@ -30,6 +39,33 @@ export default function MessagePart(props: MessagePartProps) {
   const markdownContainerClass = () => "message-text message-text-assistant"
   const textContainerRole = () => props.messageType || "assistant"
 
+  // --- Large text collapse ---
+  const partStableId = () => {
+    const id = (props.part as any)?.id
+    return typeof id === "string" && id.length > 0 ? id : ""
+  }
+  const isPersistedExpanded = () => {
+    const id = partStableId()
+    return Boolean(id && expandedLargeTextPartIds.has(id))
+  }
+  const [localExpanded, setLocalExpanded] = createSignal(isPersistedExpanded())
+
+  const shouldCollapseLongText = createMemo(() => {
+    if (props.part?.type !== "text") return false
+    const text = typeof (props.part as any).text === "string" ? (props.part as any).text : ""
+    return text.length >= LARGE_TEXT_COLLAPSE_THRESHOLD
+  })
+
+  const isTextCollapsed = createMemo(() =>
+    shouldCollapseLongText() && !localExpanded() && !isPersistedExpanded(),
+  )
+
+  const handleExpandLongText = () => {
+    setLocalExpanded(true)
+    const id = partStableId()
+    if (id) expandedLargeTextPartIds.add(id)
+  }
+
   const shouldHideTextPart = () => {
     const part = props.part
     if (!part || part.type !== "text") return false
@@ -98,20 +134,34 @@ export default function MessagePart(props: MessagePartProps) {
 
   const createTextPartForMarkdown = (): TextPart => {
     const part = props.part
+    const collapsed = isTextCollapsed()
+
     if (part.type === "text" && typeof part.text === "string") {
+      if (collapsed && part.text.length > LARGE_TEXT_PREVIEW_CHARS) {
+        return {
+          ...part as unknown as TextPart,
+          text: part.text.slice(0, LARGE_TEXT_PREVIEW_CHARS) + "\n\n\u2026",
+          // Clear renderCache since we changed the text
+          renderCache: undefined,
+        }
+      }
       // Pass through the original part so `renderCache` updates persist.
       return part as unknown as TextPart
     }
 
     if (part.type === "reasoning" && typeof (part as any).text === "string") {
       // Reasoning parts render as markdown in some views; normalize to TextPart.
+      const rawText = (part as any).text as string
+      const text = collapsed && rawText.length > LARGE_TEXT_PREVIEW_CHARS
+        ? rawText.slice(0, LARGE_TEXT_PREVIEW_CHARS) + "\n\n\u2026"
+        : rawText
       return {
         id: part.id,
         type: "text",
-        text: (part as any).text,
+        text,
         synthetic: false,
         version: (part as { version?: number }).version,
-        renderCache: (part as any).renderCache,
+        renderCache: collapsed ? undefined : (part as any).renderCache,
       }
     }
 
@@ -139,7 +189,10 @@ export default function MessagePart(props: MessagePartProps) {
             data-part-type="text"
             data-part-id={typeof (props.part as any)?.id === "string" ? (props.part as any).id : undefined}
           >
-            <Show when={canRenderMarkdown()} fallback={<span class="text-primary" dir="auto">{plainTextContent()}</span>}>
+            <Show
+              when={canRenderMarkdown()}
+              fallback={<span class="message-streaming-plain-text" dir="auto">{plainTextContent()}</span>}
+            >
               <Markdown
                 part={createTextPartForMarkdown()}
                 instanceId={props.instanceId}
@@ -150,6 +203,15 @@ export default function MessagePart(props: MessagePartProps) {
                 onRendered={props.onRendered}
               />
             </Show>
+            <Show when={isTextCollapsed()}>
+              <button
+                type="button"
+                class="large-text-expand-button"
+                onClick={handleExpandLongText}
+              >
+                {t("messagePart.largeText.showFull")}
+              </button>
+            </Show>
           </div>
         </Show>
       </Match>

packages/ui/src/components/prompt-input.tsx

@@ -81,6 +81,7 @@ export default function PromptInput(props: PromptInputProps) {
     prompt,
     setPrompt,
     clearPrompt,
+    flushPromptDraft,
     draftLoadedNonce,
     history,
     historyIndex,
@@ -564,7 +565,10 @@ export default function PromptInput(props: PromptInputProps) {
                 onKeyDown={handleKeyDown}
                 onPaste={handlePaste}
                 onFocus={() => setIsFocused(true)}
-                onBlur={() => setIsFocused(false)}
+                onBlur={() => {
+                  setIsFocused(false)
+                  flushPromptDraft()
+                }}
                 disabled={props.disabled}
                 rows={expandState() === "expanded" ? (props.compactLayout ? 10 : 15) : 3}
                 spellcheck={false}