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 { 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 { stringify as stringifyYaml } from "yaml"
import { messageStoreBus } from "../stores/message-v2/bus" import { messageStoreBus } from "../stores/message-v2/bus"
import { useTheme } from "../lib/theme" import { useTheme } from "../lib/theme"
@@ -728,6 +728,17 @@ export default function ToolCall(props: ToolCallProps) {
return renderer().renderBody(rendererContext) 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") { async function handlePermissionResponse(permission: PermissionRequestLike, response: "once" | "always" | "reject") {
if (!permission) return if (!permission) return
setPermissionSubmitting(true) setPermissionSubmitting(true)
@@ -852,7 +863,7 @@ export default function ToolCall(props: ToolCallProps) {
} }
title={inputExpanded() ? t("toolCall.header.hideInputTitle") : t("toolCall.header.showInputTitle")} 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> </button>
</Show> </Show>
@@ -877,11 +888,18 @@ export default function ToolCall(props: ToolCallProps) {
{(() => { {(() => {
const content = toolInputMarkdown() const content = toolInputMarkdown()
if (!content) return null 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> </Show>
{renderToolBody()} <Show when={inputExpanded() && hasToolInput()} fallback={renderToolBody()}>
{renderToolBodyWithHeader()}
</Show>
{renderError()} {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.copyTitle": "Copy tool call title",
"toolCall.header.copyAriaLabel": "Copy tool call title", "toolCall.header.copyAriaLabel": "Copy tool call title",
"toolCall.header.showInputTitle": "Show tool call input", "toolCall.header.showInputTitle": "Show Tool Arguments",
"toolCall.header.showInputAriaLabel": "Show tool call input", "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
"toolCall.header.hideInputTitle": "Hide tool call input", "toolCall.header.hideInputTitle": "Hide Tool Arguments",
"toolCall.header.hideInputAriaLabel": "Hide tool call input", "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
"toolCall.io.input": "Tool Input",
"toolCall.io.output": "Tool Output",
"toolCall.diff.label": "Diff", "toolCall.diff.label": "Diff",
"toolCall.diff.label.withPath": "Diff · {path}", "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.copyTitle": "Copy tool call title",
"toolCall.header.copyAriaLabel": "Copy tool call title", "toolCall.header.copyAriaLabel": "Copy tool call title",
"toolCall.header.showInputTitle": "Show tool call input", "toolCall.header.showInputTitle": "Show Tool Arguments",
"toolCall.header.showInputAriaLabel": "Show tool call input", "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
"toolCall.header.hideInputTitle": "Hide tool call input", "toolCall.header.hideInputTitle": "Hide Tool Arguments",
"toolCall.header.hideInputAriaLabel": "Hide tool call input", "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
"toolCall.io.input": "Tool Input",
"toolCall.io.output": "Tool Output",
"toolCall.diff.label": "Diff", "toolCall.diff.label": "Diff",
"toolCall.diff.label.withPath": "Diff · {path}", "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.copyTitle": "Copy tool call title",
"toolCall.header.copyAriaLabel": "Copy tool call title", "toolCall.header.copyAriaLabel": "Copy tool call title",
"toolCall.header.showInputTitle": "Show tool call input", "toolCall.header.showInputTitle": "Show Tool Arguments",
"toolCall.header.showInputAriaLabel": "Show tool call input", "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
"toolCall.header.hideInputTitle": "Hide tool call input", "toolCall.header.hideInputTitle": "Hide Tool Arguments",
"toolCall.header.hideInputAriaLabel": "Hide tool call input", "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
"toolCall.io.input": "Tool Input",
"toolCall.io.output": "Tool Output",
"toolCall.diff.label": "Diff", "toolCall.diff.label": "Diff",
"toolCall.diff.label.withPath": "Diff · {path}", "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.copyTitle": "Copy tool call title",
"toolCall.header.copyAriaLabel": "Copy tool call title", "toolCall.header.copyAriaLabel": "Copy tool call title",
"toolCall.header.showInputTitle": "Show tool call input", "toolCall.header.showInputTitle": "Show Tool Arguments",
"toolCall.header.showInputAriaLabel": "Show tool call input", "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
"toolCall.header.hideInputTitle": "Hide tool call input", "toolCall.header.hideInputTitle": "Hide Tool Arguments",
"toolCall.header.hideInputAriaLabel": "Hide tool call input", "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
"toolCall.io.input": "Tool Input",
"toolCall.io.output": "Tool Output",
"toolCall.diff.label": "Diff", "toolCall.diff.label": "Diff",
"toolCall.diff.label.withPath": "Diff · {path}", "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.copyTitle": "Copy tool call title",
"toolCall.header.copyAriaLabel": "Copy tool call title", "toolCall.header.copyAriaLabel": "Copy tool call title",
"toolCall.header.showInputTitle": "Show tool call input", "toolCall.header.showInputTitle": "Show Tool Arguments",
"toolCall.header.showInputAriaLabel": "Show tool call input", "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
"toolCall.header.hideInputTitle": "Hide tool call input", "toolCall.header.hideInputTitle": "Hide Tool Arguments",
"toolCall.header.hideInputAriaLabel": "Hide tool call input", "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
"toolCall.io.input": "Tool Input",
"toolCall.io.output": "Tool Output",
"toolCall.diff.label": "Diff", "toolCall.diff.label": "Diff",
"toolCall.diff.label.withPath": "Diff · {path}", "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.copyTitle": "Copy tool call title",
"toolCall.header.copyAriaLabel": "Copy tool call title", "toolCall.header.copyAriaLabel": "Copy tool call title",
"toolCall.header.showInputTitle": "Show tool call input", "toolCall.header.showInputTitle": "Show Tool Arguments",
"toolCall.header.showInputAriaLabel": "Show tool call input", "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
"toolCall.header.hideInputTitle": "Hide tool call input", "toolCall.header.hideInputTitle": "Hide Tool Arguments",
"toolCall.header.hideInputAriaLabel": "Hide tool call input", "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
"toolCall.io.input": "Tool Input",
"toolCall.io.output": "Tool Output",
"toolCall.diff.label": "Diff", "toolCall.diff.label": "Diff",
"toolCall.diff.label.withPath": "Diff · {path}", "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); 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 { .tool-call-markdown {
background-color: var(--surface-code); background-color: var(--surface-code);
/* Keep a visible frame around the scroll viewport (not the content). */ /* Keep a visible frame around the scroll viewport (not the content). */