From d3dc170e02e50678cebb9b53f696c4ed5ba83965 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Mon, 1 Dec 2025 23:09:22 +0000
Subject: [PATCH] Lazy render tool-call bodies

---
 packages/ui/src/components/tool-call.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/tool-call.tsx b/packages/ui/src/components/tool-call.tsx
index 272ee758..766aa6e8 100644
--- a/packages/ui/src/components/tool-call.tsx
+++ b/packages/ui/src/components/tool-call.tsx
@@ -484,6 +484,11 @@ export default function ToolCall(props: ToolCallProps) {
     onCleanup(() => document.removeEventListener("keydown", handler))
   })
 
+  createEffect(() => {
+    if (!expanded()) {
+      scrollContainerRef = undefined
+    }
+  })
 
   const statusIcon = () => {
     const status = props.toolCall?.state?.status || ""
@@ -1203,14 +1208,14 @@ export default function ToolCall(props: ToolCallProps) {
         </span>
       </button>
 
-      <Show when={expanded()}>
+      {expanded() && (
         <div class="tool-call-details">
           {renderToolBody()}
-
+ 
           {renderError()}
-
+ 
           {renderPermissionBlock()}
-
+ 
           <Show when={status() === "pending" && !pendingPermission()}>
             <div class="tool-call-pending-message">
               <span class="spinner-small"></span>
@@ -1218,9 +1223,10 @@ export default function ToolCall(props: ToolCallProps) {
             </div>
           </Show>
         </div>
-      </Show>
-
+      )}
+ 
       <Show when={diagnosticsEntries().length}>
+
         {renderDiagnosticsSection(
           diagnosticsEntries(),
           diagnosticsExpanded(),