fix(ui): actually hide auto-approval line for hidden placement

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

@@ -0,0 +1,19 @@
+import { describe, expect, test } from "bun:test"
+import { shouldRenderApprovalInBody } from "./basic-tool"
+
+describe("shouldRenderApprovalInBody", () => {
+  test("renders in the body by default when an approval exists", () => {
+    expect(shouldRenderApprovalInBody(undefined, true)).toBe(true)
+    expect(shouldRenderApprovalInBody("body", true)).toBe(true)
+  })
+
+  test("does not render when there is no approval", () => {
+    expect(shouldRenderApprovalInBody("body", false)).toBe(false)
+    expect(shouldRenderApprovalInBody(undefined, false)).toBe(false)
+  })
+
+  test("never renders in the body for hidden placement, even with an approval", () => {
+    expect(shouldRenderApprovalInBody("hidden", true)).toBe(false)
+    expect(shouldRenderApprovalInBody("hidden", false)).toBe(false)
+  })
+})

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

@@ -28,19 +28,25 @@ export function useToolApprovalLine() {
   }
 }
 
+/**
+ * Whether BasicTool should inject the approval line into its body.
+ */
+export function shouldRenderApprovalInBody(placement: BasicToolProps["approvalPlacement"], hasApproval: boolean) {
+  return placement !== "hidden" && hasApproval
+}
+
 export function BasicTool(props: BasicToolProps) {
   const key = () => toolOpenKey(props)
   const initial = () => initialOpen(props)
   const approval = useToolApproval()
-  // "hidden" means BasicTool must not inject the line (the card renders it itself, or it is omitted).
-  const inBody = () => props.approvalPlacement !== "hidden" && approval() !== undefined
+  const inBody = () => shouldRenderApprovalInBody(props.approvalPlacement, approval() !== undefined)
   const change = (open: boolean) => {
     writeToolOpen(key(), open)
     props.onOpenChange?.(open)
   }
   const details = () => (
     <div data-slot="basic-tool-details">
-      <Show when={approval()}>{(value) => <ToolApprovalLine display={value()} />}</Show>
+      <Show when={inBody() && approval()}>{(value) => <ToolApprovalLine display={value()} />}</Show>
       {props.children}
     </div>
   )