diff --git a/packages/kilo-ui/src/stories/basic-tool.stories.tsx b/packages/kilo-ui/src/stories/basic-tool.stories.tsx
index 5816c932d38..d677af17647 100644
--- a/packages/kilo-ui/src/stories/basic-tool.stories.tsx
+++ b/packages/kilo-ui/src/stories/basic-tool.stories.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource solid-js */
 import type { Meta, StoryObj } from "storybook-solidjs-vite"
-import { BasicTool, GenericTool } from "@opencode-ai/ui/basic-tool"
+import { ToolCall, GenericTool } from "@opencode-ai/ui/basic-tool"
 
 const meta: Meta = {
   title: "Components/BasicTool",
@@ -12,37 +12,43 @@ type Story = StoryObj
 
 export const Default: Story = {
   render: () => (
-    <BasicTool icon="code" trigger={{ title: "Read file", subtitle: "src/index.ts" }}>
+    <ToolCall variant="panel" icon="code" trigger={{ title: "Read file", subtitle: "src/index.ts" }}>
       <pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>{`export const hello = () => "world"`}</pre>
-    </BasicTool>
+    </ToolCall>
   ),
 }
 
 export const WithArgs: Story = {
   render: () => (
-    <BasicTool icon="console" trigger={{ title: "Run command", args: ["npm", "install", "--save-dev"] }}>
+    <ToolCall variant="panel" icon="console" trigger={{ title: "Run command", args: ["npm", "install", "--save-dev"] }}>
       <pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>{"added 42 packages in 3s"}</pre>
-    </BasicTool>
+    </ToolCall>
   ),
 }
 
 export const DefaultOpen: Story = {
   render: () => (
-    <BasicTool icon="magnifying-glass" trigger={{ title: "Search", subtitle: "*.ts" }} defaultOpen>
+    <ToolCall variant="panel" icon="magnifying-glass" trigger={{ title: "Search", subtitle: "*.ts" }} defaultOpen>
       <div style={{ padding: "8px", "font-size": "12px" }}>Found 12 matches across 5 files.</div>
-    </BasicTool>
+    </ToolCall>
   ),
 }
 
 export const NoChildren: Story = {
-  render: () => <BasicTool icon="mcp" trigger={{ title: "Tool call", subtitle: "No output" }} hideDetails />,
+  render: () => <ToolCall variant="row" icon="mcp" trigger={{ title: "Tool call", subtitle: "No output" }} />,
 }
 
 export const Locked: Story = {
   render: () => (
-    <BasicTool icon="folder" trigger={{ title: "Writing file", subtitle: "output.txt" }} defaultOpen locked>
+    <ToolCall
+      variant="panel"
+      icon="folder"
+      trigger={{ title: "Writing file", subtitle: "output.txt" }}
+      defaultOpen
+      locked
+    >
       <pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>{"Hello, world!"}</pre>
-    </BasicTool>
+    </ToolCall>
   ),
 }
 
@@ -53,13 +59,13 @@ export const Generic: Story = {
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: "flex", "flex-direction": "column", gap: "8px", width: "400px" }}>
-      <BasicTool icon="code" trigger={{ title: "Read file", subtitle: "src/index.ts" }}>
+      <ToolCall variant="panel" icon="code" trigger={{ title: "Read file", subtitle: "src/index.ts" }}>
         <pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>content here</pre>
-      </BasicTool>
-      <BasicTool icon="console" trigger={{ title: "Run command", args: ["bun", "test"] }} defaultOpen>
+      </ToolCall>
+      <ToolCall variant="panel" icon="console" trigger={{ title: "Run command", args: ["bun", "test"] }} defaultOpen>
         <pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>All tests passed!</pre>
-      </BasicTool>
-      <BasicTool icon="mcp" trigger={{ title: "MCP tool call" }} hideDetails />
+      </ToolCall>
+      <ToolCall variant="row" icon="mcp" trigger={{ title: "MCP tool call" }} />
       <GenericTool tool="generic_tool" />
     </div>
   ),
diff --git a/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts b/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts
index 86714fe371b..f4d28fb31e9 100644
--- a/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts
+++ b/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts
@@ -50,7 +50,8 @@ describe("ToolRegistry tool name contract (runtime)", () => {
     const names = JSON.stringify(TOOL_NAMES_WE_DEPEND_ON)
     const result = check(`
       const hist = { state: null, length: 1, replaceState(s) { hist.state = s }, pushState(s) { hist.state = s }, go() {} }
-      globalThis.window = globalThis.window || { history: hist, location: { pathname: "/", search: "", hash: "", href: "/", origin: "" }, scrollTo() {}, addEventListener() {}, removeEventListener() {}, confirm() { return false } }
+      const mql = { matches: false, media: "", onchange: null, addListener() {}, removeListener() {}, addEventListener() {}, removeEventListener() {}, dispatchEvent() { return true } }
+      globalThis.window = globalThis.window || { history: hist, location: { pathname: "/", search: "", hash: "", href: "/", origin: "" }, scrollTo() {}, addEventListener() {}, removeEventListener() {}, confirm() { return false }, matchMedia() { return mql } }
       const { ToolRegistry } = await import("./src/components/message-part.tsx")
       const names = ${names}
       const missing = names.filter(n => typeof ToolRegistry.render(n) !== "function")
@@ -71,7 +72,8 @@ describe("getToolInfo() export contract (runtime)", () => {
     // outside a SolidJS rendering context. We verify it exists as a function.
     const result = check(`
       const hist = { state: null, length: 1, replaceState(s) { hist.state = s }, pushState(s) { hist.state = s }, go() {} }
-      globalThis.window = globalThis.window || { history: hist, location: { pathname: "/", search: "", hash: "", href: "/", origin: "" }, scrollTo() {}, addEventListener() {}, removeEventListener() {}, confirm() { return false } }
+      const mql = { matches: false, media: "", onchange: null, addListener() {}, removeListener() {}, addEventListener() {}, removeEventListener() {}, dispatchEvent() { return true } }
+      globalThis.window = globalThis.window || { history: hist, location: { pathname: "/", search: "", hash: "", href: "/", origin: "" }, scrollTo() {}, addEventListener() {}, removeEventListener() {}, confirm() { return false }, matchMedia() { return mql } }
       const { getToolInfo } = await import("./src/components/message-part.tsx")
       if (typeof getToolInfo !== "function") {
         console.error("getToolInfo is " + typeof getToolInfo)