From 5fd985f0c22d7e69374764332d725d144399907d Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 19 Feb 2026 18:31:41 +0000
Subject: [PATCH] ui: rename tool input toggle and add IO headers

---
 packages/ui/src/components/tool-call.tsx      | 26 ++++++++++++++++---
 .../ui/src/lib/i18n/messages/en/toolCall.ts   | 11 +++++---
 .../ui/src/lib/i18n/messages/es/toolCall.ts   | 11 +++++---
 .../ui/src/lib/i18n/messages/fr/toolCall.ts   | 11 +++++---
 .../ui/src/lib/i18n/messages/ja/toolCall.ts   | 11 +++++---
 .../ui/src/lib/i18n/messages/ru/toolCall.ts   | 11 +++++---
 .../src/lib/i18n/messages/zh-Hans/toolCall.ts | 11 +++++---
 .../ui/src/styles/messaging/tool-call.css     | 10 +++++++
 8 files changed, 74 insertions(+), 28 deletions(-)

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 (
+      <>
+        <div class="tool-call-io-header">{t("toolCall.io.output")}</div>
+        {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")}
           >
-            <AlignJustify class="w-3.5 h-3.5" />
+            <ArrowRightSquare class="w-3.5 h-3.5" />
           </button>
         </Show>
 
@@ -877,11 +888,18 @@ export default function ToolCall(props: ToolCallProps) {
             {(() => {
               const content = toolInputMarkdown()
               if (!content) return null
-              return renderMarkdownContent({ content, cacheKey: "input" })
+              return (
+                <>
+                  <div class="tool-call-io-header">{t("toolCall.io.input")}</div>
+                  {renderMarkdownContent({ content, cacheKey: "input" })}
+                </>
+              )
             })()}
           </Show>
 
-          {renderToolBody()}
+          <Show when={inputExpanded() && hasToolInput()} fallback={renderToolBody()}>
+            {renderToolBodyWithHeader()}
+          </Show>
  
           {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). */