diff --git a/packages/ui/src/components/tool-call.tsx b/packages/ui/src/components/tool-call.tsx
index bd2ffae5..5dd398ac 100644
--- a/packages/ui/src/components/tool-call.tsx
+++ b/packages/ui/src/components/tool-call.tsx
@@ -1,5 +1,5 @@
import { createSignal, Show, createEffect, createMemo, onCleanup } from "solid-js"
-import { AlignJustify, Copy } from "lucide-solid"
+import { ArrowRightSquare, Copy } from "lucide-solid"
import { stringify as stringifyYaml } from "yaml"
import { messageStoreBus } from "../stores/message-v2/bus"
import { useTheme } from "../lib/theme"
@@ -728,6 +728,17 @@ export default function ToolCall(props: ToolCallProps) {
return renderer().renderBody(rendererContext)
}
+ const renderToolBodyWithHeader = () => {
+ const body = renderToolBody()
+ if (!body) return null
+ return (
+ <>
+
+ {body}
+ >
+ )
+ }
+
async function handlePermissionResponse(permission: PermissionRequestLike, response: "once" | "always" | "reject") {
if (!permission) return
setPermissionSubmitting(true)
@@ -852,7 +863,7 @@ export default function ToolCall(props: ToolCallProps) {
}
title={inputExpanded() ? t("toolCall.header.hideInputTitle") : t("toolCall.header.showInputTitle")}
>
-
+
@@ -877,11 +888,18 @@ export default function ToolCall(props: ToolCallProps) {
{(() => {
const content = toolInputMarkdown()
if (!content) return null
- return renderMarkdownContent({ content, cacheKey: "input" })
+ return (
+ <>
+
+ {renderMarkdownContent({ content, cacheKey: "input" })}
+ >
+ )
})()}
- {renderToolBody()}
+
+ {renderToolBodyWithHeader()}
+
{renderError()}
diff --git a/packages/ui/src/lib/i18n/messages/en/toolCall.ts b/packages/ui/src/lib/i18n/messages/en/toolCall.ts
index c5db4c87..7b380522 100644
--- a/packages/ui/src/lib/i18n/messages/en/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/en/toolCall.ts
@@ -5,10 +5,13 @@ export const toolCallMessages = {
"toolCall.header.copyTitle": "Copy tool call title",
"toolCall.header.copyAriaLabel": "Copy tool call title",
- "toolCall.header.showInputTitle": "Show tool call input",
- "toolCall.header.showInputAriaLabel": "Show tool call input",
- "toolCall.header.hideInputTitle": "Hide tool call input",
- "toolCall.header.hideInputAriaLabel": "Hide tool call input",
+ "toolCall.header.showInputTitle": "Show Tool Arguments",
+ "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+ "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+ "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+ "toolCall.io.input": "Tool Input",
+ "toolCall.io.output": "Tool Output",
"toolCall.diff.label": "Diff",
"toolCall.diff.label.withPath": "Diff · {path}",
diff --git a/packages/ui/src/lib/i18n/messages/es/toolCall.ts b/packages/ui/src/lib/i18n/messages/es/toolCall.ts
index 7dbcbcc8..f0453187 100644
--- a/packages/ui/src/lib/i18n/messages/es/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/es/toolCall.ts
@@ -5,10 +5,13 @@ export const toolCallMessages = {
"toolCall.header.copyTitle": "Copy tool call title",
"toolCall.header.copyAriaLabel": "Copy tool call title",
- "toolCall.header.showInputTitle": "Show tool call input",
- "toolCall.header.showInputAriaLabel": "Show tool call input",
- "toolCall.header.hideInputTitle": "Hide tool call input",
- "toolCall.header.hideInputAriaLabel": "Hide tool call input",
+ "toolCall.header.showInputTitle": "Show Tool Arguments",
+ "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+ "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+ "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+ "toolCall.io.input": "Tool Input",
+ "toolCall.io.output": "Tool Output",
"toolCall.diff.label": "Diff",
"toolCall.diff.label.withPath": "Diff · {path}",
diff --git a/packages/ui/src/lib/i18n/messages/fr/toolCall.ts b/packages/ui/src/lib/i18n/messages/fr/toolCall.ts
index 807f47b7..75685849 100644
--- a/packages/ui/src/lib/i18n/messages/fr/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/toolCall.ts
@@ -5,10 +5,13 @@ export const toolCallMessages = {
"toolCall.header.copyTitle": "Copy tool call title",
"toolCall.header.copyAriaLabel": "Copy tool call title",
- "toolCall.header.showInputTitle": "Show tool call input",
- "toolCall.header.showInputAriaLabel": "Show tool call input",
- "toolCall.header.hideInputTitle": "Hide tool call input",
- "toolCall.header.hideInputAriaLabel": "Hide tool call input",
+ "toolCall.header.showInputTitle": "Show Tool Arguments",
+ "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+ "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+ "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+ "toolCall.io.input": "Tool Input",
+ "toolCall.io.output": "Tool Output",
"toolCall.diff.label": "Diff",
"toolCall.diff.label.withPath": "Diff · {path}",
diff --git a/packages/ui/src/lib/i18n/messages/ja/toolCall.ts b/packages/ui/src/lib/i18n/messages/ja/toolCall.ts
index 3d1a26e0..9251c719 100644
--- a/packages/ui/src/lib/i18n/messages/ja/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/toolCall.ts
@@ -5,10 +5,13 @@ export const toolCallMessages = {
"toolCall.header.copyTitle": "Copy tool call title",
"toolCall.header.copyAriaLabel": "Copy tool call title",
- "toolCall.header.showInputTitle": "Show tool call input",
- "toolCall.header.showInputAriaLabel": "Show tool call input",
- "toolCall.header.hideInputTitle": "Hide tool call input",
- "toolCall.header.hideInputAriaLabel": "Hide tool call input",
+ "toolCall.header.showInputTitle": "Show Tool Arguments",
+ "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+ "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+ "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+ "toolCall.io.input": "Tool Input",
+ "toolCall.io.output": "Tool Output",
"toolCall.diff.label": "Diff",
"toolCall.diff.label.withPath": "Diff · {path}",
diff --git a/packages/ui/src/lib/i18n/messages/ru/toolCall.ts b/packages/ui/src/lib/i18n/messages/ru/toolCall.ts
index 5b2a1370..6ca953df 100644
--- a/packages/ui/src/lib/i18n/messages/ru/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/toolCall.ts
@@ -5,10 +5,13 @@ export const toolCallMessages = {
"toolCall.header.copyTitle": "Copy tool call title",
"toolCall.header.copyAriaLabel": "Copy tool call title",
- "toolCall.header.showInputTitle": "Show tool call input",
- "toolCall.header.showInputAriaLabel": "Show tool call input",
- "toolCall.header.hideInputTitle": "Hide tool call input",
- "toolCall.header.hideInputAriaLabel": "Hide tool call input",
+ "toolCall.header.showInputTitle": "Show Tool Arguments",
+ "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+ "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+ "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+ "toolCall.io.input": "Tool Input",
+ "toolCall.io.output": "Tool Output",
"toolCall.diff.label": "Diff",
"toolCall.diff.label.withPath": "Diff · {path}",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/toolCall.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/toolCall.ts
index 2419b2f4..a0f5d30c 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/toolCall.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/toolCall.ts
@@ -5,10 +5,13 @@ export const toolCallMessages = {
"toolCall.header.copyTitle": "Copy tool call title",
"toolCall.header.copyAriaLabel": "Copy tool call title",
- "toolCall.header.showInputTitle": "Show tool call input",
- "toolCall.header.showInputAriaLabel": "Show tool call input",
- "toolCall.header.hideInputTitle": "Hide tool call input",
- "toolCall.header.hideInputAriaLabel": "Hide tool call input",
+ "toolCall.header.showInputTitle": "Show Tool Arguments",
+ "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+ "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+ "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+ "toolCall.io.input": "Tool Input",
+ "toolCall.io.output": "Tool Output",
"toolCall.diff.label": "Diff",
"toolCall.diff.label.withPath": "Diff · {path}",
diff --git a/packages/ui/src/styles/messaging/tool-call.css b/packages/ui/src/styles/messaging/tool-call.css
index 332e4784..5aed411d 100644
--- a/packages/ui/src/styles/messaging/tool-call.css
+++ b/packages/ui/src/styles/messaging/tool-call.css
@@ -232,6 +232,16 @@
font-size: var(--font-size-xs);
}
+.tool-call-io-header {
+ @apply flex items-center justify-between gap-3 px-3 py-2;
+ background-color: var(--surface-secondary);
+ border-top: 1px solid var(--tool-call-border-color);
+ font-family: var(--font-family-mono);
+ font-size: 13px;
+ font-weight: var(--font-weight-semibold);
+ color: var(--text-primary);
+}
+
.tool-call-markdown {
background-color: var(--surface-code);
/* Keep a visible frame around the scroll viewport (not the content). */