salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: rename tool input toggle and add IO headers

Browse Source
This commit is contained in:
Shantur Rathore
2026-02-19 18:31:41 +00:00
parent 2a438b2bb3
commit 5fd985f0c2
8 changed files with 74 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/ui/src/components/tool-call.tsx
View File

@@ -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()}

11
packages/ui/src/lib/i18n/messages/en/toolCall.ts
View File

@@ -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}",

11
packages/ui/src/lib/i18n/messages/es/toolCall.ts
View File

@@ -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}",

11
packages/ui/src/lib/i18n/messages/fr/toolCall.ts
View File

@@ -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}",

11
packages/ui/src/lib/i18n/messages/ja/toolCall.ts
View File

@@ -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}",

11
packages/ui/src/lib/i18n/messages/ru/toolCall.ts
View File

@@ -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}",

11
packages/ui/src/lib/i18n/messages/zh-Hans/toolCall.ts
View File

@@ -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}",

10
packages/ui/src/styles/messaging/tool-call.css
View File

@@ -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). */