fix: show tool input and output

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

@@ -107,6 +107,40 @@ export function BasicTool(props: BasicToolProps) {
   )
 }
 
-export function GenericTool(props: { tool: string; hideDetails?: boolean }) {
-  return <BasicTool icon="mcp" trigger={{ title: props.tool }} hideDetails={props.hideDetails} />
+export function GenericTool(props: {
+  tool: string
+  input?: Record<string, any>
+  output?: string
+  hideDetails?: boolean
+  defaultOpen?: boolean
+  forceOpen?: boolean
+}) {
+  const hasContent = () => (props.input && Object.keys(props.input).length > 0) || props.output
+
+  return (
+    <BasicTool
+      icon="mcp"
+      trigger={{ title: props.tool }}
+      hideDetails={props.hideDetails}
+      defaultOpen={props.defaultOpen}
+      forceOpen={props.forceOpen}
+    >
+      <Show when={hasContent()}>
+        <div data-component="tool-output" data-scrollable>
+          <Show when={props.input && Object.keys(props.input).length > 0}>
+            <div data-slot="generic-tool-section">
+              <div data-slot="generic-tool-label">Input</div>
+              <pre data-slot="generic-tool-content">{JSON.stringify(props.input, null, 2)}</pre>
+            </div>
+          </Show>
+          <Show when={props.output}>
+            <div data-slot="generic-tool-section">
+              <div data-slot="generic-tool-label">Output</div>
+              <pre data-slot="generic-tool-content">{props.output}</pre>
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </BasicTool>
+  )
 }

packages/ui/src/components/message-part.css

@@ -200,6 +200,38 @@
   }
 }
 
+[data-slot="generic-tool-section"] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+
+  &:not(:last-child) {
+    margin-bottom: 12px;
+  }
+
+  [data-slot="generic-tool-label"] {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--text-weak);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  [data-slot="generic-tool-content"] {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-large);
+    color: var(--text-base);
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0;
+    padding: 0;
+    background: none;
+  }
+}
+
 [data-component="edit-trigger"],
 [data-component="write-trigger"] {
   display: flex;