fix(ui): defer default-open tool details

packages/ui/src/components/basic-tool-defer.test.ts

@@ -0,0 +1,18 @@
+import { expect, test } from "bun:test"
+import { basicToolInitialReady } from "./basic-tool"
+
+test("deferred default-open tools do not mount details immediately", () => {
+  expect(basicToolInitialReady({ defaultOpen: true, defer: true })).toBe(false)
+})
+
+test("non-deferred default-open tools keep the previous immediate details behavior", () => {
+  expect(basicToolInitialReady({ defaultOpen: true })).toBe(true)
+  expect(basicToolInitialReady({ defaultOpen: true, defer: false })).toBe(true)
+})
+
+test("closed tools start without mounted details", () => {
+  expect(basicToolInitialReady({ defaultOpen: false, defer: true })).toBe(false)
+  expect(basicToolInitialReady({ defaultOpen: false })).toBe(false)
+  expect(basicToolInitialReady({ defer: true })).toBe(false)
+  expect(basicToolInitialReady({})).toBe(false)
+})

packages/ui/src/components/basic-tool.tsx

@@ -41,10 +41,15 @@ export interface BasicToolProps {
 
 const SPRING = { type: "spring" as const, visualDuration: 0.35, bounce: 0 }
 
+export function basicToolInitialReady(props: { defaultOpen?: boolean; defer?: boolean }) {
+  if (props.defer) return false
+  return props.defaultOpen ?? false
+}
+
 export function BasicTool(props: BasicToolProps) {
   const [state, setState] = createStore({
     open: props.defaultOpen ?? false,
-    ready: props.defaultOpen ?? false,
+    ready: basicToolInitialReady(props),
   })
   const open = () => state.open
   const ready = () => state.ready
@@ -64,27 +69,22 @@ export function BasicTool(props: BasicToolProps) {
     if (props.forceOpen) setState("open", true)
   })
 
-  createEffect(
-    on(
-      open,
-      (value) => {
-        if (!props.defer) return
-        if (!value) {
-          cancel()
-          setState("ready", false)
-          return
-        }
+  createEffect(() => {
+    if (!props.defer) return
+    if (!open()) {
+      cancel()
+      setState("ready", false)
+      return
+    }
+    if (ready()) return
 
-        cancel()
-        frame = requestAnimationFrame(() => {
-          frame = undefined
-          if (!open()) return
-          setState("ready", true)
-        })
-      },
-      { defer: true },
-    ),
-  )
+    cancel()
+    frame = requestAnimationFrame(() => {
+      frame = undefined
+      if (!open()) return
+      setState("ready", true)
+    })
+  })
 
   // Animated height for collapsible open/close
   let contentRef: HTMLDivElement | undefined

packages/ui/src/components/message-part-registry.test.ts

@@ -46,6 +46,10 @@ function readMessagePartSources() {
   ].join("\n")
 }
 
+function readToolSource(file: string) {
+  return readFileSync(join(MESSAGE_PART_DIR, "tools", file), "utf8")
+}
+
 test("message-part internals do not import through the facade", () => {
   const offenders = sourceFiles(MESSAGE_PART_DIR)
     .map((file) => ({
@@ -109,12 +113,21 @@ test("part and tool side-effect barrels cover every registered renderer", () =>
 
 test("split keeps hidden tools and deferred heavy tool bodies explicit", () => {
   const source = readMessagePartSources()
-  const deferCount = [...source.matchAll(/\bdefer\b/g)].length
 
   expect(source).toContain('export const HIDDEN_TOOLS = new Set(["todowrite"])')
   expect(source).toContain('if (tool === "edit" || tool === "write" || tool === "apply_patch") return edit')
   expect(source).toContain("defaultOpen={completed()}")
-  expect(deferCount).toBe(4)
+
+  const deferredHeavyTools = {
+    "bash.tsx": 1,
+    "edit.tsx": 1,
+    "write.tsx": 1,
+    "apply-patch.tsx": 2,
+  } as const
+
+  for (const [file, count] of Object.entries(deferredHeavyTools)) {
+    expect([...readToolSource(file).matchAll(/\bdefer\b/g)].length).toBe(count)
+  }
 })
 
 test("review hardening keeps routing, clipboard, url, and write guards explicit", () => {

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

@@ -70,6 +70,7 @@ ToolRegistry.register({
       <BasicTool
         {...props}
         icon="console"
+        defer
         trigger={
           <div data-slot="basic-tool-tool-info-structured">
             <div data-slot="basic-tool-tool-info-main">