From 5d5fbfb5f2f32bad15c933313a5e2dbce0117f04 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Fri, 27 Feb 2026 13:28:43 +0000
Subject: [PATCH] perf(ui): lazy-mount tool call details

---
 packages/ui/src/components/tool-call.tsx | 1298 ++++++++++++----------
 1 file changed, 687 insertions(+), 611 deletions(-)

diff --git a/packages/ui/src/components/tool-call.tsx b/packages/ui/src/components/tool-call.tsx
index f0086016..a1125e73 100644
--- a/packages/ui/src/components/tool-call.tsx
+++ b/packages/ui/src/components/tool-call.tsx
@@ -79,6 +79,635 @@ interface ToolCallProps {
   forceCollapsed?: boolean
  }
 
+function ToolCallDetails(props: {
+  toolCallMemo: () => ToolCallPart
+  toolState: () => ToolState | undefined
+  toolName: () => string
+  toolCallIdentifier: () => string
+  instanceId: string
+  sessionId: string
+  messageId?: string
+  messageVersion?: number
+  partVersion?: number
+  onContentRendered?: () => void
+  preferences: ReturnType<typeof useConfig>["preferences"]
+  setDiffViewMode: ReturnType<typeof useConfig>["setDiffViewMode"]
+  isDark: () => boolean
+  t: ReturnType<typeof useI18n>["t"]
+  store: () => ReturnType<typeof messageStoreBus.getOrCreate>
+  pendingPermission: () => { permission: PermissionRequestLike; active: boolean } | undefined
+  pendingQuestion: () => { request: QuestionRequest; active: boolean } | undefined
+  isPermissionActive: () => boolean
+  isQuestionActive: () => boolean
+  hasToolInput: () => boolean
+  isToolInputVisible: () => boolean
+  toolInput: () => Record<string, any> | undefined
+  inputSectionExpanded: () => boolean
+  outputSectionExpanded: () => boolean
+  toggleInputSection: () => void
+  toggleOutputSection: () => void
+  toolCallRootEl: () => HTMLDivElement | undefined
+  scrollTopSnapshot: () => number
+  setScrollTopSnapshot: (next: number) => void
+}) {
+  const messageVersionAccessor = createMemo(() => props.messageVersion)
+  const partVersionAccessor = createMemo(() => props.partVersion)
+
+  const cacheContext = createMemo(() => ({
+    toolCallId: props.toolCallIdentifier(),
+    messageId: props.messageId,
+    partId: props.toolCallMemo()?.id ?? null,
+  }))
+
+  const cacheVersion = createMemo(() => {
+    if (typeof props.partVersion === "number") {
+      return String(props.partVersion)
+    }
+    if (typeof props.messageVersion === "number") {
+      return String(props.messageVersion)
+    }
+    return "noversion"
+  })
+
+  const createVariantCache = (variant: string | (() => string), version?: () => string) =>
+    useGlobalCache({
+      instanceId: () => props.instanceId,
+      sessionId: () => props.sessionId,
+      scope: TOOL_CALL_CACHE_SCOPE,
+      cacheId: () => {
+        const context = cacheContext()
+        const resolvedVariant = typeof variant === "function" ? variant() : variant
+        return makeRenderCacheKey(context.toolCallId || undefined, context.messageId, context.partId, resolvedVariant)
+      },
+      version: () => (version ? version() : cacheVersion()),
+    })
+
+  const diffCache = createVariantCache("diff")
+  const permissionDiffCache = createVariantCache("permission-diff")
+  const ansiRunningCache = createVariantCache("ansi-running", () => "running")
+  const ansiFinalCache = createVariantCache("ansi-final")
+
+  const permissionDetails = createMemo(() => props.pendingPermission()?.permission)
+  const questionDetails = createMemo(() => props.pendingQuestion()?.request)
+
+  const activePermissionKey = createMemo(() => {
+    const permission = permissionDetails()
+    return permission && props.isPermissionActive() ? permission.id : ""
+  })
+
+  const activeQuestionKey = createMemo(() => {
+    const request = questionDetails()
+    return request && props.isQuestionActive() ? request.id : ""
+  })
+
+  const [permissionSubmitting, setPermissionSubmitting] = createSignal(false)
+  const [permissionError, setPermissionError] = createSignal<string | null>(null)
+
+  const [scrollContainer, setScrollContainer] = createSignal<HTMLDivElement | undefined>()
+  const [bottomSentinel, setBottomSentinel] = createSignal<HTMLDivElement | null>(null)
+  const [autoScroll, setAutoScroll] = createSignal(true)
+  const [bottomSentinelVisible, setBottomSentinelVisible] = createSignal(true)
+
+  let scrollContainerRef: HTMLDivElement | undefined
+  let detachScrollIntentListeners: (() => void) | undefined
+
+  let pendingScrollFrame: number | null = null
+  let pendingAnchorScroll: number | null = null
+  let userScrollIntentUntil = 0
+  let lastKnownScrollTop = props.scrollTopSnapshot()
+
+  function restoreScrollPosition(forceBottom = false) {
+    const container = scrollContainerRef
+    if (!container) return
+    if (forceBottom) {
+      container.scrollTop = container.scrollHeight
+      lastKnownScrollTop = container.scrollTop
+      props.setScrollTopSnapshot(lastKnownScrollTop)
+    } else {
+      container.scrollTop = lastKnownScrollTop
+    }
+  }
+
+  const persistScrollSnapshot = (element?: HTMLElement | null) => {
+    if (!element) return
+    lastKnownScrollTop = element.scrollTop
+    props.setScrollTopSnapshot(lastKnownScrollTop)
+  }
+
+  function markUserScrollIntent() {
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now()
+    userScrollIntentUntil = now + TOOL_SCROLL_INTENT_WINDOW_MS
+  }
+
+  function hasUserScrollIntent() {
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now()
+    return now <= userScrollIntentUntil
+  }
+
+  function attachScrollIntentListeners(element: HTMLDivElement) {
+    if (detachScrollIntentListeners) {
+      detachScrollIntentListeners()
+      detachScrollIntentListeners = undefined
+    }
+    const handlePointerIntent = () => markUserScrollIntent()
+    const handleKeyIntent = (event: KeyboardEvent) => {
+      if (TOOL_SCROLL_INTENT_KEYS.has(event.key)) {
+        markUserScrollIntent()
+      }
+    }
+    element.addEventListener("wheel", handlePointerIntent, { passive: true })
+    element.addEventListener("pointerdown", handlePointerIntent)
+    element.addEventListener("touchstart", handlePointerIntent, { passive: true })
+    element.addEventListener("keydown", handleKeyIntent)
+    detachScrollIntentListeners = () => {
+      element.removeEventListener("wheel", handlePointerIntent)
+      element.removeEventListener("pointerdown", handlePointerIntent)
+      element.removeEventListener("touchstart", handlePointerIntent)
+      element.removeEventListener("keydown", handleKeyIntent)
+    }
+  }
+
+  function scheduleAnchorScroll(immediate = false) {
+    if (!autoScroll()) return
+    const sentinel = bottomSentinel()
+    const container = scrollContainerRef
+    if (!sentinel || !container) return
+    if (pendingAnchorScroll !== null) {
+      cancelAnimationFrame(pendingAnchorScroll)
+      pendingAnchorScroll = null
+    }
+    pendingAnchorScroll = requestAnimationFrame(() => {
+      pendingAnchorScroll = null
+      const containerRect = container.getBoundingClientRect()
+      const sentinelRect = sentinel.getBoundingClientRect()
+      const delta = sentinelRect.bottom - containerRect.bottom + TOOL_SCROLL_SENTINEL_MARGIN_PX
+      if (Math.abs(delta) > 1) {
+        container.scrollBy({ top: delta, behavior: immediate ? "auto" : "smooth" })
+      }
+      lastKnownScrollTop = container.scrollTop
+      props.setScrollTopSnapshot(lastKnownScrollTop)
+    })
+  }
+
+  function handleScroll() {
+    const container = scrollContainer()
+    if (!container) return
+    if (pendingScrollFrame !== null) {
+      cancelAnimationFrame(pendingScrollFrame)
+    }
+    const isUserScroll = hasUserScrollIntent()
+    pendingScrollFrame = requestAnimationFrame(() => {
+      pendingScrollFrame = null
+      const atBottom = bottomSentinelVisible()
+      if (isUserScroll) {
+        if (atBottom) {
+          if (!autoScroll()) setAutoScroll(true)
+        } else if (autoScroll()) {
+          setAutoScroll(false)
+        }
+      }
+    })
+  }
+
+  const handleScrollEvent = (event: Event & { currentTarget: HTMLDivElement }) => {
+    handleScroll()
+    persistScrollSnapshot(event.currentTarget)
+  }
+
+  const handleScrollRendered = () => {
+    requestAnimationFrame(() => {
+      restoreScrollPosition(autoScroll())
+      scheduleAnchorScroll(true)
+    })
+  }
+
+  const initializeScrollContainer = (element: HTMLDivElement | null | undefined) => {
+    const next = element || undefined
+    if (next === scrollContainerRef) {
+      return
+    }
+    scrollContainerRef = next
+    setScrollContainer(scrollContainerRef)
+    if (scrollContainerRef) {
+      // Refresh our snapshot on mount (e.g. when remounting after collapse)
+      lastKnownScrollTop = props.scrollTopSnapshot()
+      restoreScrollPosition(autoScroll())
+    }
+  }
+
+  const scrollHelpers: ToolScrollHelpers = {
+    registerContainer: (element, options) => {
+      if (options?.disableTracking) return
+      initializeScrollContainer(element)
+    },
+    handleScroll: handleScrollEvent,
+    renderSentinel: (options) => {
+      if (options?.disableTracking) return null
+      return <div ref={setBottomSentinel} aria-hidden="true" class="tool-call-scroll-sentinel" style={{ height: "1px" }} />
+    },
+  }
+
+  createEffect(() => {
+    const container = scrollContainer()
+    if (!container) return
+    attachScrollIntentListeners(container)
+    onCleanup(() => {
+      if (detachScrollIntentListeners) {
+        detachScrollIntentListeners()
+        detachScrollIntentListeners = undefined
+      }
+    })
+  })
+
+  createEffect(() => {
+    const container = scrollContainer()
+    const sentinel = bottomSentinel()
+    if (!container || !sentinel) return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.target === sentinel) {
+            setBottomSentinelVisible(entry.isIntersecting)
+          }
+        })
+      },
+      { root: container, threshold: 0, rootMargin: `0px 0px ${TOOL_SCROLL_SENTINEL_MARGIN_PX}px 0px` },
+    )
+    observer.observe(sentinel)
+    onCleanup(() => observer.disconnect())
+  })
+
+  createEffect(() => {
+    const permission = permissionDetails()
+    if (!permission) {
+      setPermissionSubmitting(false)
+      setPermissionError(null)
+    } else {
+      setPermissionError(null)
+    }
+  })
+
+  createEffect(() => {
+    const activeKey = activePermissionKey() || activeQuestionKey()
+    if (!activeKey) return
+    requestAnimationFrame(() => {
+      props.toolCallRootEl()?.scrollIntoView({ block: "center", behavior: "smooth" })
+    })
+  })
+
+  async function handlePermissionResponse(permission: PermissionRequestLike, response: "once" | "always" | "reject") {
+    if (!permission) return
+    setPermissionSubmitting(true)
+    setPermissionError(null)
+    try {
+      const sessionId = getPermissionSessionId(permission) || props.sessionId
+      await sendPermissionResponse(props.instanceId, sessionId, permission.id, response)
+    } catch (error) {
+      log.error("Failed to send permission response", error)
+      setPermissionError(error instanceof Error ? error.message : props.t("toolCall.permission.errors.unableToUpdate"))
+    } finally {
+      setPermissionSubmitting(false)
+    }
+  }
+
+  createEffect(() => {
+    const activeKey = activePermissionKey()
+    if (!activeKey) return
+    const handler = (event: KeyboardEvent) => {
+      const permission = permissionDetails()
+      if (!permission || !props.isPermissionActive()) return
+      if (event.key === "Enter") {
+        event.preventDefault()
+        void handlePermissionResponse(permission, "once")
+      } else if (event.key === "a" || event.key === "A") {
+        event.preventDefault()
+        void handlePermissionResponse(permission, "always")
+      } else if (event.key === "d" || event.key === "D") {
+        event.preventDefault()
+        void handlePermissionResponse(permission, "reject")
+      }
+    }
+    document.addEventListener("keydown", handler)
+    onCleanup(() => document.removeEventListener("keydown", handler))
+  })
+
+  const [questionSubmitting, setQuestionSubmitting] = createSignal(false)
+  const [questionError, setQuestionError] = createSignal<string | null>(null)
+  const [questionDraftAnswers, setQuestionDraftAnswers] = createSignal<Record<string, string[][]>>({})
+
+  function isTextInputFocused() {
+    const active = document.activeElement
+    return (
+      active?.tagName === "TEXTAREA" ||
+      active?.tagName === "INPUT" ||
+      (active?.hasAttribute("contenteditable") ?? false)
+    )
+  }
+
+  async function handleQuestionSubmit() {
+    const request = questionDetails()
+    if (!request || !props.isQuestionActive()) {
+      return
+    }
+    const answers = (questionDraftAnswers()[request.id] ?? []).map((x) => (Array.isArray(x) ? x : []))
+    const normalized = request.questions.map((_, index) => {
+      const row = answers[index] ?? []
+      return row.map((value) => value.trim()).filter((value) => value.length > 0)
+    })
+    if (normalized.some((item) => (item?.length ?? 0) === 0)) {
+      setQuestionError(props.t("toolCall.question.validation.answerAll"))
+      return
+    }
+
+    setQuestionSubmitting(true)
+    setQuestionError(null)
+    try {
+      const sessionId = (request as any).sessionID ?? (request as any).sessionId ?? props.sessionId
+      await sendQuestionReply(props.instanceId, sessionId, request.id, normalized)
+    } catch (error) {
+      log.error("Failed to send question reply", error)
+      setQuestionError(error instanceof Error ? error.message : props.t("toolCall.question.errors.unableToReply"))
+    } finally {
+      setQuestionSubmitting(false)
+    }
+  }
+
+  async function handleQuestionDismiss() {
+    const request = questionDetails()
+    if (!request || !props.isQuestionActive()) {
+      return
+    }
+    setQuestionSubmitting(true)
+    setQuestionError(null)
+    try {
+      const sessionId = (request as any).sessionID ?? (request as any).sessionId ?? props.sessionId
+      await sendQuestionReject(props.instanceId, sessionId, request.id)
+    } catch (error) {
+      log.error("Failed to reject question", error)
+      setQuestionError(error instanceof Error ? error.message : props.t("toolCall.question.errors.unableToDismiss"))
+    } finally {
+      setQuestionSubmitting(false)
+    }
+  }
+
+  createEffect(() => {
+    const activeKey = activeQuestionKey()
+    if (!activeKey) return
+    const handler = (event: KeyboardEvent) => {
+      if (isTextInputFocused()) return
+      if (event.key === "Enter") {
+        event.preventDefault()
+        void handleQuestionSubmit()
+      } else if (event.key === "Escape") {
+        event.preventDefault()
+        void handleQuestionDismiss()
+      }
+    }
+    document.addEventListener("keydown", handler)
+    onCleanup(() => document.removeEventListener("keydown", handler))
+  })
+
+  createEffect(() => {
+    const request = questionDetails()
+    if (!request) {
+      setQuestionSubmitting(false)
+      setQuestionError(null)
+      return
+    }
+    setQuestionError(null)
+    const requestId = request.id
+    setQuestionDraftAnswers((prev) => {
+      if (prev[requestId]) return prev
+      const initial = request.questions.map(() => [])
+      return { ...prev, [requestId]: initial }
+    })
+  })
+
+  const status = () => props.toolState()?.status || ""
+
+  const toolInputMarkdown = createMemo(() => {
+    const input = props.toolInput()
+    if (!input || Object.keys(input).length === 0) return null
+
+    try {
+      const yamlText = stringifyYaml(input)
+      return ensureMarkdownContent(yamlText, "yaml", true)
+    } catch (error) {
+      log.error("Failed to convert tool call input to YAML", error)
+      try {
+        const jsonText = JSON.stringify(input, null, 2)
+        return ensureMarkdownContent(jsonText, "json", true)
+      } catch (nestedError) {
+        log.error("Failed to stringify tool call input", nestedError)
+        return null
+      }
+    }
+  })
+
+  const renderer = createMemo(() => resolveToolRenderer(props.toolName()))
+
+  const { renderAnsiContent } = createAnsiContentRenderer({
+    ansiRunningCache,
+    ansiFinalCache,
+    scrollHelpers,
+    partVersion: partVersionAccessor,
+  })
+
+  const { renderDiffContent } = createDiffContentRenderer({
+    preferences: props.preferences,
+    setDiffViewMode: props.setDiffViewMode,
+    isDark: props.isDark,
+    t: props.t,
+    diffCache,
+    permissionDiffCache,
+    scrollHelpers,
+    handleScrollRendered,
+    onContentRendered: props.onContentRendered,
+  })
+
+  const { renderMarkdownContent } = createMarkdownContentRenderer({
+    toolState: props.toolState,
+    partId: props.toolCallIdentifier,
+    partVersion: partVersionAccessor,
+    instanceId: props.instanceId,
+    sessionId: props.sessionId,
+    isDark: props.isDark,
+    scrollHelpers,
+    handleScrollRendered,
+    onContentRendered: props.onContentRendered,
+  })
+
+  const rendererContext: ToolRendererContext = {
+    toolCall: props.toolCallMemo,
+    toolState: props.toolState,
+    toolName: props.toolName,
+    instanceId: props.instanceId,
+    sessionId: props.sessionId,
+    t: props.t,
+    messageVersion: messageVersionAccessor,
+    partVersion: partVersionAccessor,
+    renderMarkdown: renderMarkdownContent,
+    renderAnsi: renderAnsiContent,
+    renderDiff: renderDiffContent,
+    renderToolCall: (options) => {
+      if (!options?.toolCall) return null
+      return (
+        <ToolCall
+          toolCall={options.toolCall}
+          toolCallId={options.toolCall.id}
+          messageId={options.messageId}
+          messageVersion={options.messageVersion}
+          partVersion={options.partVersion}
+          instanceId={props.instanceId}
+          sessionId={options.sessionId}
+          forceCollapsed={options.forceCollapsed}
+        />
+      )
+    },
+    scrollHelpers,
+  }
+
+  let previousPartVersion: number | undefined
+  createEffect(() => {
+    const version = partVersionAccessor()
+    if (version === undefined) {
+      return
+    }
+    if (previousPartVersion !== undefined && version === previousPartVersion) {
+      return
+    }
+    previousPartVersion = version
+    scheduleAnchorScroll(true)
+  })
+
+  createEffect(() => {
+    if (autoScroll()) {
+      scheduleAnchorScroll(true)
+    }
+  })
+
+  const renderToolBody = () => {
+    return renderer().renderBody(rendererContext)
+  }
+
+  const renderError = () => {
+    const state = props.toolState()
+    if (state?.status === "error" && state.error) {
+      return (
+        <div class="tool-call-error-content">
+          <strong>{props.t("toolCall.error.label")}</strong> {state.error}
+        </div>
+      )
+    }
+    return null
+  }
+
+  const renderPermissionBlock = () => (
+    <PermissionToolBlock
+      permission={permissionDetails}
+      active={props.isPermissionActive}
+      submitting={permissionSubmitting}
+      error={permissionError}
+      renderDiff={renderDiffContent}
+      fallbackSessionId={() => props.sessionId}
+      onRespond={(permission, sessionId, response) => void handlePermissionResponse(permission, response)}
+    />
+  )
+
+  const renderQuestionBlock = () => (
+    <QuestionToolBlock
+      toolName={props.toolName}
+      toolState={props.toolState}
+      toolCallId={props.toolCallIdentifier}
+      request={questionDetails}
+      active={props.isQuestionActive}
+      submitting={questionSubmitting}
+      error={questionError}
+      draftAnswers={questionDraftAnswers}
+      setDraftAnswers={setQuestionDraftAnswers}
+      onSubmit={() => void handleQuestionSubmit()}
+      onDismiss={() => void handleQuestionDismiss()}
+    />
+  )
+
+  onCleanup(() => {
+    if (pendingScrollFrame !== null) {
+      cancelAnimationFrame(pendingScrollFrame)
+      pendingScrollFrame = null
+    }
+    if (pendingAnchorScroll !== null) {
+      cancelAnimationFrame(pendingAnchorScroll)
+      pendingAnchorScroll = null
+    }
+    if (detachScrollIntentListeners) {
+      detachScrollIntentListeners()
+      detachScrollIntentListeners = undefined
+    }
+  })
+
+  return (
+    <div class="tool-call-details">
+      <Show
+        when={props.isToolInputVisible() && props.hasToolInput()}
+        fallback={
+          <>
+            {renderToolBody()}
+            {renderError()}
+
+            <Show when={status() === "pending" && !props.pendingPermission()}>
+              <div class="tool-call-pending-message">
+                <span class="spinner-small"></span>
+                <span>{props.t("toolCall.pending.waitingToRun")}</span>
+              </div>
+            </Show>
+          </>
+        }
+      >
+        <div class="tool-call-io-sections">
+          <div class="tool-call-io-section">
+            <button type="button" class="tool-call-io-toggle" aria-expanded={props.inputSectionExpanded()} onClick={props.toggleInputSection}>
+              <span class="tool-call-io-title">{props.t("toolCall.io.input")}</span>
+            </button>
+
+            <Show when={props.inputSectionExpanded()}>
+              <div class="tool-call-io-body">
+                {(() => {
+                  const content = toolInputMarkdown()
+                  if (!content) return null
+                  return renderMarkdownContent({ content, cacheKey: "input" })
+                })()}
+              </div>
+            </Show>
+          </div>
+
+          <div class="tool-call-io-section">
+            <button type="button" class="tool-call-io-toggle" aria-expanded={props.outputSectionExpanded()} onClick={props.toggleOutputSection}>
+              <span class="tool-call-io-title">{props.t("toolCall.io.output")}</span>
+            </button>
+
+            <Show when={props.outputSectionExpanded()}>
+              <div class="tool-call-io-body">
+                {renderToolBody()}
+                {renderError()}
+
+                <Show when={status() === "pending" && !props.pendingPermission()}>
+                  <div class="tool-call-pending-message">
+                    <span class="spinner-small"></span>
+                    <span>{props.t("toolCall.pending.waitingToRun")}</span>
+                  </div>
+                </Show>
+              </div>
+            </Show>
+          </div>
+        </div>
+      </Show>
+
+      {renderPermissionBlock()}
+      {renderQuestionBlock()}
+    </div>
+  )
+}
+
 
 
 
@@ -98,46 +727,9 @@ export default function ToolCall(props: ToolCallProps) {
   })
   const toolState = createMemo(() => toolCallMemo()?.state)
 
-  const cacheContext = createMemo(() => ({
-    toolCallId: toolCallIdentifier(),
-    messageId: props.messageId,
-    partId: toolCallMemo()?.id ?? null,
-  }))
-
   const store = createMemo(() => messageStoreBus.getOrCreate(props.instanceId))
   const activeRequest = createMemo(() => activeInterruption().get(props.instanceId) ?? null)
 
-  const cacheVersion = createMemo(() => {
-    if (typeof props.partVersion === "number") {
-      return String(props.partVersion)
-    }
-    if (typeof props.messageVersion === "number") {
-      return String(props.messageVersion)
-    }
-    return "noversion"
-  })
-
-  const messageVersionAccessor = createMemo(() => props.messageVersion)
-  const partVersionAccessor = createMemo(() => props.partVersion)
-
-  const createVariantCache = (variant: string | (() => string), version?: () => string) =>
-    useGlobalCache({
-      instanceId: () => props.instanceId,
-      sessionId: () => props.sessionId,
-      scope: TOOL_CALL_CACHE_SCOPE,
-      cacheId: () => {
-        const context = cacheContext()
-        const resolvedVariant = typeof variant === "function" ? variant() : variant
-        return makeRenderCacheKey(context.toolCallId || undefined, context.messageId, context.partId, resolvedVariant)
-      },
-      version: () => (version ? version() : cacheVersion()),
-    })
-
-  const diffCache = createVariantCache("diff")
-  const permissionDiffCache = createVariantCache("permission-diff")
-  const ansiRunningCache = createVariantCache("ansi-running", () => "running")
-  const ansiFinalCache = createVariantCache("ansi-final")
-
   const permissionState = createMemo(() => store().getPermissionState(props.messageId, toolCallIdentifier()))
   const pendingPermission = createMemo(() => {
     const state = permissionState()
@@ -225,39 +817,8 @@ export default function ToolCall(props: ToolCallProps) {
     return input && Object.keys(input).length > 0
   })
 
-  const toolInputMarkdown = createMemo(() => {
-    const input = toolInput()
-    if (!input || Object.keys(input).length === 0) return null
-
-    try {
-      const yamlText = stringifyYaml(input)
-      return ensureMarkdownContent(yamlText, "yaml", true)
-    } catch (error) {
-      log.error("Failed to convert tool call input to YAML", error)
-      try {
-        const jsonText = JSON.stringify(input, null, 2)
-        return ensureMarkdownContent(jsonText, "json", true)
-      } catch (nestedError) {
-        log.error("Failed to stringify tool call input", nestedError)
-        return null
-      }
-    }
-  })
-
-  const permissionDetails = createMemo(() => pendingPermission()?.permission)
-  const questionDetails = createMemo(() => pendingQuestion()?.request)
-
-  const activePermissionKey = createMemo(() => {
-    const permission = permissionDetails()
-    return permission && isPermissionActive() ? permission.id : ""
-  })
-
-  const activeQuestionKey = createMemo(() => {
-    const request = questionDetails()
-    return request && isQuestionActive() ? request.id : ""
-  })
-  const [permissionSubmitting, setPermissionSubmitting] = createSignal(false)
-  const [permissionError, setPermissionError] = createSignal<string | null>(null)
+  const [toolCallRootEl, setToolCallRootEl] = createSignal<HTMLDivElement | undefined>()
+  const [scrollTopSnapshot, setScrollTopSnapshot] = createSignal(0)
   const [diagnosticsOverride, setDiagnosticsOverride] = createSignal<boolean | undefined>(undefined)
 
   const diagnosticsExpanded = () => {
@@ -272,305 +833,20 @@ export default function ToolCall(props: ToolCallProps) {
     return extractDiagnostics(state)
   })
 
-  const [scrollContainer, setScrollContainer] = createSignal<HTMLDivElement | undefined>()
-  const [bottomSentinel, setBottomSentinel] = createSignal<HTMLDivElement | null>(null)
-  const [autoScroll, setAutoScroll] = createSignal(true)
-  const [bottomSentinelVisible, setBottomSentinelVisible] = createSignal(true)
-
-  let toolCallRootRef: HTMLDivElement | undefined
-  let scrollContainerRef: HTMLDivElement | undefined
-  let detachScrollIntentListeners: (() => void) | undefined
-
-  let pendingScrollFrame: number | null = null
-  let pendingAnchorScroll: number | null = null
-  let userScrollIntentUntil = 0
-  let lastKnownScrollTop = 0
-
-  function restoreScrollPosition(forceBottom = false) {
-    const container = scrollContainerRef
-    if (!container) return
-    if (forceBottom) {
-      container.scrollTop = container.scrollHeight
-      lastKnownScrollTop = container.scrollTop
-    } else {
-      container.scrollTop = lastKnownScrollTop
-    }
-  }
-
-  const persistScrollSnapshot = (element?: HTMLElement | null) => {
-    if (!element) return
-    lastKnownScrollTop = element.scrollTop
-  }
-
-  const handleScrollRendered = () => {
-    requestAnimationFrame(() => {
-      restoreScrollPosition(autoScroll())
-      if (!expanded()) return
-      scheduleAnchorScroll(true)
+  const toggleInputSection = () => {
+    setInputSectionOverride((prev) => {
+      const current = prev === null ? inputSectionExpanded() : prev
+      return !current
     })
   }
 
-  const initializeScrollContainer = (element: HTMLDivElement | null | undefined) => {
-    const next = element || undefined
-    if (next === scrollContainerRef) {
-      return
-    }
-    scrollContainerRef = next
-    setScrollContainer(scrollContainerRef)
-    if (scrollContainerRef) {
-      restoreScrollPosition(autoScroll())
-    }
-  }
-
-
-  function markUserScrollIntent() {
-    const now = typeof performance !== "undefined" ? performance.now() : Date.now()
-    userScrollIntentUntil = now + TOOL_SCROLL_INTENT_WINDOW_MS
-  }
-
-  function hasUserScrollIntent() {
-    const now = typeof performance !== "undefined" ? performance.now() : Date.now()
-    return now <= userScrollIntentUntil
-  }
-
-  function attachScrollIntentListeners(element: HTMLDivElement) {
-    if (detachScrollIntentListeners) {
-      detachScrollIntentListeners()
-      detachScrollIntentListeners = undefined
-    }
-    const handlePointerIntent = () => markUserScrollIntent()
-    const handleKeyIntent = (event: KeyboardEvent) => {
-      if (TOOL_SCROLL_INTENT_KEYS.has(event.key)) {
-        markUserScrollIntent()
-      }
-    }
-    element.addEventListener("wheel", handlePointerIntent, { passive: true })
-    element.addEventListener("pointerdown", handlePointerIntent)
-    element.addEventListener("touchstart", handlePointerIntent, { passive: true })
-    element.addEventListener("keydown", handleKeyIntent)
-    detachScrollIntentListeners = () => {
-      element.removeEventListener("wheel", handlePointerIntent)
-      element.removeEventListener("pointerdown", handlePointerIntent)
-      element.removeEventListener("touchstart", handlePointerIntent)
-      element.removeEventListener("keydown", handleKeyIntent)
-    }
-  }
-
-  function scheduleAnchorScroll(immediate = false) {
-    if (!autoScroll()) return
-    const sentinel = bottomSentinel()
-    const container = scrollContainerRef
-    if (!sentinel || !container) return
-    if (pendingAnchorScroll !== null) {
-      cancelAnimationFrame(pendingAnchorScroll)
-      pendingAnchorScroll = null
-    }
-    pendingAnchorScroll = requestAnimationFrame(() => {
-      pendingAnchorScroll = null
-      const containerRect = container.getBoundingClientRect()
-      const sentinelRect = sentinel.getBoundingClientRect()
-      const delta = sentinelRect.bottom - containerRect.bottom + TOOL_SCROLL_SENTINEL_MARGIN_PX
-      if (Math.abs(delta) > 1) {
-        container.scrollBy({ top: delta, behavior: immediate ? "auto" : "smooth" })
-      }
-      lastKnownScrollTop = container.scrollTop
+  const toggleOutputSection = () => {
+    setOutputSectionOverride((prev) => {
+      const current = prev === null ? outputSectionExpanded() : prev
+      return !current
     })
   }
 
-  function handleScroll() {
-    const container = scrollContainer()
-    if (!container) return
-    if (pendingScrollFrame !== null) {
-      cancelAnimationFrame(pendingScrollFrame)
-    }
-    const isUserScroll = hasUserScrollIntent()
-    pendingScrollFrame = requestAnimationFrame(() => {
-      pendingScrollFrame = null
-      const atBottom = bottomSentinelVisible()
-      if (isUserScroll) {
-        if (atBottom) {
-          if (!autoScroll()) setAutoScroll(true)
-        } else if (autoScroll()) {
-          setAutoScroll(false)
-        }
-      }
-    })
-  }
-
-  const handleScrollEvent = (event: Event & { currentTarget: HTMLDivElement }) => {
-    handleScroll()
-    persistScrollSnapshot(event.currentTarget)
-  }
-
-  const scrollHelpers: ToolScrollHelpers = {
-    registerContainer: (element, options) => {
-      if (options?.disableTracking) return
-      initializeScrollContainer(element)
-    },
-    handleScroll: handleScrollEvent,
-    renderSentinel: (options) => {
-      if (options?.disableTracking) return null
-      return <div ref={setBottomSentinel} aria-hidden="true" class="tool-call-scroll-sentinel" style={{ height: "1px" }} />
-    },
-  }
-
-  createEffect(() => {
-
-    const container = scrollContainer()
-    if (!container) return
-
-    attachScrollIntentListeners(container)
-    onCleanup(() => {
-      if (detachScrollIntentListeners) {
-        detachScrollIntentListeners()
-        detachScrollIntentListeners = undefined
-      }
-    })
-  })
-
-  createEffect(() => {
-    const container = scrollContainer()
-    const sentinel = bottomSentinel()
-    if (!container || !sentinel) return
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.target === sentinel) {
-            setBottomSentinelVisible(entry.isIntersecting)
-          }
-        })
-      },
-      { root: container, threshold: 0, rootMargin: `0px 0px ${TOOL_SCROLL_SENTINEL_MARGIN_PX}px 0px` },
-    )
-    observer.observe(sentinel)
-    onCleanup(() => observer.disconnect())
-  })
-
-  createEffect(() => {
-    if (!expanded()) {
-      setScrollContainer(undefined)
-      scrollContainerRef = undefined
-      setBottomSentinel(null)
-      setAutoScroll(true)
-    }
-  })
-
-  createEffect(() => {
-    const permission = permissionDetails()
-    if (!permission) {
-      setPermissionSubmitting(false)
-      setPermissionError(null)
-    } else {
-      setPermissionError(null)
-    }
-  })
-
-  createEffect(() => {
-    const activeKey = activePermissionKey() || activeQuestionKey()
-    if (!activeKey) return
-    requestAnimationFrame(() => {
-      toolCallRootRef?.scrollIntoView({ block: "center", behavior: "smooth" })
-    })
-  })
-
-  createEffect(() => {
-    const activeKey = activePermissionKey()
-    if (!activeKey) return
-    const handler = (event: KeyboardEvent) => {
-      const permission = permissionDetails()
-      if (!permission || !isPermissionActive()) return
-      if (event.key === "Enter") {
-        event.preventDefault()
-        void handlePermissionResponse(permission, "once")
-      } else if (event.key === "a" || event.key === "A") {
-        event.preventDefault()
-        void handlePermissionResponse(permission, "always")
-      } else if (event.key === "d" || event.key === "D") {
-        event.preventDefault()
-        void handlePermissionResponse(permission, "reject")
-      }
-    }
-    document.addEventListener("keydown", handler)
-    onCleanup(() => document.removeEventListener("keydown", handler))
-  })
-
-  const [questionSubmitting, setQuestionSubmitting] = createSignal(false)
-  const [questionError, setQuestionError] = createSignal<string | null>(null)
-
-  const [questionDraftAnswers, setQuestionDraftAnswers] = createSignal<Record<string, string[][]>>({})
-
-  function isTextInputFocused() {
-    const active = document.activeElement
-    return (
-      active?.tagName === "TEXTAREA" ||
-      active?.tagName === "INPUT" ||
-      (active?.hasAttribute("contenteditable") ?? false)
-    )
-  }
-
-  async function handleQuestionSubmit() {
-    const request = questionDetails()
-    if (!request || !isQuestionActive()) {
-      return
-    }
-    const answers = (questionDraftAnswers()[request.id] ?? []).map((x) => (Array.isArray(x) ? x : []))
-    const normalized = request.questions.map((_, index) => {
-      const row = answers[index] ?? []
-      return row.map((value) => value.trim()).filter((value) => value.length > 0)
-    })
-    if (normalized.some((item) => (item?.length ?? 0) === 0)) {
-      setQuestionError(t("toolCall.question.validation.answerAll"))
-      return
-    }
-
-    setQuestionSubmitting(true)
-    setQuestionError(null)
-    try {
-      const sessionId = (request as any).sessionID ?? (request as any).sessionId ?? props.sessionId
-      await sendQuestionReply(props.instanceId, sessionId, request.id, normalized)
-    } catch (error) {
-      log.error("Failed to send question reply", error)
-      setQuestionError(error instanceof Error ? error.message : t("toolCall.question.errors.unableToReply"))
-    } finally {
-      setQuestionSubmitting(false)
-    }
-  }
-
-  async function handleQuestionDismiss() {
-    const request = questionDetails()
-    if (!request || !isQuestionActive()) {
-      return
-    }
-    setQuestionSubmitting(true)
-    setQuestionError(null)
-    try {
-      const sessionId = (request as any).sessionID ?? (request as any).sessionId ?? props.sessionId
-      await sendQuestionReject(props.instanceId, sessionId, request.id)
-    } catch (error) {
-      log.error("Failed to reject question", error)
-      setQuestionError(error instanceof Error ? error.message : t("toolCall.question.errors.unableToDismiss"))
-    } finally {
-      setQuestionSubmitting(false)
-    }
-  }
-
-  createEffect(() => {
-    const activeKey = activeQuestionKey()
-    if (!activeKey) return
-    const handler = (event: KeyboardEvent) => {
-      if (isTextInputFocused()) return
-      if (event.key === "Enter") {
-        event.preventDefault()
-        void handleQuestionSubmit()
-      } else if (event.key === "Escape") {
-        event.preventDefault()
-        void handleQuestionDismiss()
-      }
-    }
-    document.addEventListener("keydown", handler)
-    onCleanup(() => document.removeEventListener("keydown", handler))
-  })
-
 
   const statusIcon = () => {
     const status = toolState()?.status || ""
@@ -630,90 +906,27 @@ export default function ToolCall(props: ToolCallProps) {
 
   const renderer = createMemo(() => resolveToolRenderer(toolName()))
 
-  const { renderAnsiContent } = createAnsiContentRenderer({
-    ansiRunningCache,
-    ansiFinalCache,
-    scrollHelpers,
-    partVersion: partVersionAccessor,
-  })
-
-  const { renderDiffContent } = createDiffContentRenderer({
-    preferences,
-    setDiffViewMode,
-    isDark,
-    t,
-    diffCache,
-    permissionDiffCache,
-    scrollHelpers,
-    handleScrollRendered,
-    onContentRendered: props.onContentRendered,
-  })
-
-  const { renderMarkdownContent } = createMarkdownContentRenderer({
-    toolState,
-    partId: toolCallIdentifier,
-    partVersion: partVersionAccessor,
-    instanceId: props.instanceId,
-    sessionId: props.sessionId,
-    isDark,
-    scrollHelpers,
-    handleScrollRendered,
-    onContentRendered: props.onContentRendered,
-  })
-
-  const rendererContext: ToolRendererContext = {
+  const renderMarkdownStub: ToolRendererContext["renderMarkdown"] = () => null
+  const renderAnsiStub: ToolRendererContext["renderAnsi"] = () => null
+  const renderDiffStub: ToolRendererContext["renderDiff"] = () => null
+  const renderToolCallStub: NonNullable<ToolRendererContext["renderToolCall"]> = () => null
+  const headerRendererContext: ToolRendererContext = {
     toolCall: toolCallMemo,
     toolState,
     toolName,
     instanceId: props.instanceId,
     sessionId: props.sessionId,
     t,
-    messageVersion: messageVersionAccessor,
-    partVersion: partVersionAccessor,
-    renderMarkdown: renderMarkdownContent,
-    renderAnsi: renderAnsiContent,
-    renderDiff: renderDiffContent,
-    renderToolCall: (options) => {
-      if (!options?.toolCall) return null
-      return (
-        <ToolCall
-          toolCall={options.toolCall}
-          toolCallId={options.toolCall.id}
-          messageId={options.messageId}
-          messageVersion={options.messageVersion}
-          partVersion={options.partVersion}
-          instanceId={props.instanceId}
-          sessionId={options.sessionId}
-          forceCollapsed={options.forceCollapsed}
-        />
-      )
-    },
-    scrollHelpers,
+    messageVersion: () => props.messageVersion,
+    partVersion: () => props.partVersion,
+    renderMarkdown: renderMarkdownStub,
+    renderAnsi: renderAnsiStub,
+    renderDiff: renderDiffStub,
+    renderToolCall: renderToolCallStub,
+    scrollHelpers: undefined,
   }
 
-  let previousPartVersion: number | undefined
-  createEffect(() => {
-    const version = partVersionAccessor()
-    if (!expanded()) {
-      return
-    }
-    if (version === undefined) {
-      return
-    }
-    if (previousPartVersion !== undefined && version === previousPartVersion) {
-      return
-    }
-    previousPartVersion = version
-    scheduleAnchorScroll(true)
-  })
-
-  createEffect(() => {
-    if (expanded() && autoScroll()) {
-      scheduleAnchorScroll(true)
-    }
-  })
-
-  const getRendererAction = () => renderer().getAction?.(rendererContext) ?? getDefaultToolAction(toolName())
+  const getRendererAction = () => renderer().getAction?.(headerRendererContext) ?? getDefaultToolAction(toolName())
 
 
   const renderToolTitle = () => {
@@ -727,7 +940,7 @@ export default function ToolCall(props: ToolCallProps) {
     if (!state) return getRendererAction()
     if (state.status === "pending") return getRendererAction()
 
-    const customTitle = renderer().getTitle?.(rendererContext)
+    const customTitle = renderer().getTitle?.(headerRendererContext)
     if (customTitle) return customTitle
 
     if (isToolStateRunning(state) && state.title) {
@@ -754,106 +967,13 @@ export default function ToolCall(props: ToolCallProps) {
     await copyToClipboard(text)
   }
 
-  const renderToolBody = () => {
-    return renderer().renderBody(rendererContext)
-  }
-
-  async function handlePermissionResponse(permission: PermissionRequestLike, response: "once" | "always" | "reject") {
-    if (!permission) return
-    setPermissionSubmitting(true)
-    setPermissionError(null)
-    try {
-      const sessionId = getPermissionSessionId(permission) || props.sessionId
-      await sendPermissionResponse(props.instanceId, sessionId, permission.id, response)
-    } catch (error) {
-      log.error("Failed to send permission response", error)
-      setPermissionError(error instanceof Error ? error.message : t("toolCall.permission.errors.unableToUpdate"))
-    } finally {
-      setPermissionSubmitting(false)
-    }
-  }
-
-
-  const renderError = () => {
-    const state = toolState() || {}
-    if (state.status === "error" && state.error) {
-      return (
-        <div class="tool-call-error-content">
-          <strong>{t("toolCall.error.label")}</strong> {state.error}
-        </div>
-      )
-    }
-    return null
-  }
-
-
-  const renderPermissionBlock = () => (
-    <PermissionToolBlock
-      permission={permissionDetails}
-      active={isPermissionActive}
-      submitting={permissionSubmitting}
-      error={permissionError}
-      renderDiff={renderDiffContent}
-      fallbackSessionId={() => props.sessionId}
-      onRespond={(permission, sessionId, response) => void handlePermissionResponse(permission, response)}
-    />
-  )
-
-  const renderQuestionBlock = () => (
-    <QuestionToolBlock
-      toolName={toolName}
-      toolState={toolState}
-      toolCallId={toolCallIdentifier}
-      request={questionDetails}
-      active={isQuestionActive}
-      submitting={questionSubmitting}
-      error={questionError}
-      draftAnswers={questionDraftAnswers}
-      setDraftAnswers={setQuestionDraftAnswers}
-      onSubmit={() => void handleQuestionSubmit()}
-      onDismiss={() => void handleQuestionDismiss()}
-    />
-  )
-
-  createEffect(() => {
-    const request = questionDetails()
-    if (!request) {
-      setQuestionSubmitting(false)
-      setQuestionError(null)
-      return
-    }
-    setQuestionError(null)
-    const requestId = request.id
-    setQuestionDraftAnswers((prev) => {
-      if (prev[requestId]) return prev
-      const initial = request.questions.map(() => [])
-      return { ...prev, [requestId]: initial }
-    })
-
-  })
-
   const status = () => toolState()?.status || ""
 
-  onCleanup(() => {
-    if (pendingScrollFrame !== null) {
-      cancelAnimationFrame(pendingScrollFrame)
-      pendingScrollFrame = null
-    }
-    if (pendingAnchorScroll !== null) {
-      cancelAnimationFrame(pendingAnchorScroll)
-      pendingAnchorScroll = null
-    }
-    if (detachScrollIntentListeners) {
-      detachScrollIntentListeners()
-      detachScrollIntentListeners = undefined
-    }
-  })
-
   return (
     <div
 
       ref={(element) => {
-        toolCallRootRef = element || undefined
+        setToolCallRootEl(element || undefined)
       }}
       class={`tool-call ${combinedStatusClass()}`}
     >
@@ -901,83 +1021,39 @@ export default function ToolCall(props: ToolCallProps) {
         </span>
       </div>
 
-      {expanded() && (
-        <div class="tool-call-details">
-          <Show
-            when={isToolInputVisible() && hasToolInput()}
-            fallback={
-              <>
-                {renderToolBody()}
-                {renderError()}
-
-                <Show when={status() === "pending" && !pendingPermission()}>
-                  <div class="tool-call-pending-message">
-                    <span class="spinner-small"></span>
-                    <span>{t("toolCall.pending.waitingToRun")}</span>
-                  </div>
-                </Show>
-              </>
-            }
-          >
-            <div class="tool-call-io-sections">
-              <div class="tool-call-io-section">
-                <button
-                  type="button"
-                  class="tool-call-io-toggle"
-                  aria-expanded={inputSectionExpanded()}
-                  onClick={() => setInputSectionOverride((prev) => {
-                    const current = prev === null ? inputSectionExpanded() : prev
-                    return !current
-                  })}
-                >
-                  <span class="tool-call-io-title">{t("toolCall.io.input")}</span>
-                </button>
-
-                <Show when={inputSectionExpanded()}>
-                  <div class="tool-call-io-body">
-                    {(() => {
-                      const content = toolInputMarkdown()
-                      if (!content) return null
-                      return renderMarkdownContent({ content, cacheKey: "input" })
-                    })()}
-                  </div>
-                </Show>
-              </div>
-
-              <div class="tool-call-io-section">
-                <button
-                  type="button"
-                  class="tool-call-io-toggle"
-                  aria-expanded={outputSectionExpanded()}
-                  onClick={() => setOutputSectionOverride((prev) => {
-                    const current = prev === null ? outputSectionExpanded() : prev
-                    return !current
-                  })}
-                >
-                  <span class="tool-call-io-title">{t("toolCall.io.output")}</span>
-                </button>
-
-                <Show when={outputSectionExpanded()}>
-                  <div class="tool-call-io-body">
-                    {renderToolBody()}
-                    {renderError()}
-
-                    <Show when={status() === "pending" && !pendingPermission()}>
-                      <div class="tool-call-pending-message">
-                        <span class="spinner-small"></span>
-                        <span>{t("toolCall.pending.waitingToRun")}</span>
-                      </div>
-                    </Show>
-                  </div>
-                </Show>
-              </div>
-            </div>
-          </Show>
-
-          {renderPermissionBlock()}
-          {renderQuestionBlock()}
-        </div>
-      )}
+      <Show when={expanded()}>
+        <ToolCallDetails
+          toolCallMemo={toolCallMemo}
+          toolState={toolState}
+          toolName={toolName}
+          toolCallIdentifier={toolCallIdentifier}
+          instanceId={props.instanceId}
+          sessionId={props.sessionId}
+          messageId={props.messageId}
+          messageVersion={props.messageVersion}
+          partVersion={props.partVersion}
+          onContentRendered={props.onContentRendered}
+          preferences={preferences}
+          setDiffViewMode={setDiffViewMode}
+          isDark={isDark}
+          t={t}
+          store={store}
+          pendingPermission={pendingPermission}
+          pendingQuestion={pendingQuestion}
+          isPermissionActive={isPermissionActive}
+          isQuestionActive={isQuestionActive}
+          hasToolInput={hasToolInput}
+          isToolInputVisible={isToolInputVisible}
+          toolInput={toolInput}
+          inputSectionExpanded={inputSectionExpanded}
+          outputSectionExpanded={outputSectionExpanded}
+          toggleInputSection={toggleInputSection}
+          toggleOutputSection={toggleOutputSection}
+          toolCallRootEl={toolCallRootEl}
+          scrollTopSnapshot={scrollTopSnapshot}
+          setScrollTopSnapshot={setScrollTopSnapshot}
+        />
+      </Show>
  
       <Show when={diagnosticsEntries().length}>