refactor(tui): use fixed inline tool icon cell

This commit is contained in:
Kit Langton 2026-05-21 15:53:49 -04:00
parent c9426d3a57
commit e03ffb9ed4
3 changed files with 19 additions and 15 deletions

View file

@ -1497,6 +1497,8 @@ const PART_MAPPING = {
reasoning: ReasoningPart,
}
const INLINE_TOOL_ICON_WIDTH = 2
function ReasoningPart(props: { last: boolean; part: ReasoningPart; message: AssistantMessage }) {
const { theme, subtleSyntax } = useTheme()
const ctx = use()
@ -1801,7 +1803,7 @@ function InlineTool(props: {
>
<box flexDirection="row">
<text
width={props.icon.length + 1}
width={INLINE_TOOL_ICON_WIDTH}
fg={props.iconColor ?? fg()}
attributes={denied() ? TextAttributes.STRIKETHROUGH : undefined}
>
@ -1815,7 +1817,7 @@ function InlineTool(props: {
</Match>
</Switch>
<Show when={error() && !denied()}>
<box paddingLeft={props.icon.length + 1}>
<box paddingLeft={INLINE_TOOL_ICON_WIDTH}>
<text fg={theme.error}>{error()}</text>
</box>
</Show>

View file

@ -1,12 +1,12 @@
// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
exports[`TUI inline tool wrapping snapshots consecutive grep, glob, and read rows at a narrow width 1`] = `
" * Grep "OPENCODE.*DB|database|sqlite|drizzle|dev.*db|data.
" Grep "OPENCODE.*DB|database|sqlite|drizzle|dev.*db|data.
*dir|xdg|APPDATA" in packages/opencode/src (151 matches)
* Glob "**/*db*" in packages/opencode (6 matches)
-> Read packages/opencode/src/storage/db.ts [offset=1, limit=130]
-> Read packages/opencode/src/index.ts [offset=1, limit=100]
No LSP server available for this file type.
* Grep "export const OPENCODE_DB|OPENCODE_DB|OPENCODE_DEV|Global\\.
Glob "**/*db*" in packages/opencode (6 matches)
Read packages/opencode/src/storage/db.ts [offset=1, limit=130]
Read packages/opencode/src/index.ts [offset=1, limit=100]
No LSP server available for this file type.
Grep "export const OPENCODE_DB|OPENCODE_DB|OPENCODE_DEV|Global\\.
Path\\.data|data =" in packages/opencode/src (115 matches)"
`;

View file

@ -11,27 +11,29 @@ afterEach(() => {
type ToolFixture = { icon: string; label: string; error?: string }
const INLINE_TOOL_ICON_WIDTH = 2
const tools: readonly ToolFixture[] = [
{
icon: "*",
icon: "",
label:
'Grep "OPENCODE.*DB|database|sqlite|drizzle|dev.*db|data.*dir|xdg|APPDATA" in packages/opencode/src (151 matches)',
},
{
icon: "*",
icon: "",
label: 'Glob "**/*db*" in packages/opencode (6 matches)',
},
{
icon: "->",
icon: "",
label: "Read packages/opencode/src/storage/db.ts [offset=1, limit=130]",
},
{
icon: "->",
icon: "",
label: "Read packages/opencode/src/index.ts [offset=1, limit=100]",
error: "No LSP server available for this file type.",
},
{
icon: "*",
icon: "",
label:
'Grep "export const OPENCODE_DB|OPENCODE_DB|OPENCODE_DEV|Global\\.Path\\.data|data =" in packages/opencode/src (115 matches)',
},
@ -51,11 +53,11 @@ function InlineToolRow(props: { item: ToolFixture }) {
}}
>
<box flexDirection="row">
<text width={props.item.icon.length + 1}>{props.item.icon}</text>
<text width={INLINE_TOOL_ICON_WIDTH}>{props.item.icon}</text>
<text flexGrow={1}>{props.item.label}</text>
</box>
{props.item.error && (
<box paddingLeft={props.item.icon.length + 1}>
<box paddingLeft={INLINE_TOOL_ICON_WIDTH}>
<text>{props.item.error}</text>
</box>
)}