opentui(v6): tool renderer registry + labeled-args default (no raw JSON)
This commit is contained in:
alt-glitch
@@ -1,31 +1,30 @@
|
||||
/**
|
||||
* ToolPart — one tool call, rendered COLLAPSED by default with a clear expand
|
||||
* affordance (items 2 + 7). The header shows the tool's PRIMARY ARG inline so
|
||||
* you can read what it did without expanding (item 2 — "I don't see tool args"):
|
||||
* affordance. This is the SHARED SHELL: the header (glyph + name + subtitle +
|
||||
* duration + line count + optional hint) and the expand/collapse mechanics —
|
||||
* what's INSIDE varies per tool and is dispatched through the tool renderer
|
||||
* registry (`view/tools/registry.tsx`, Epic 2.2):
|
||||
*
|
||||
* ▶ terminal ls -la src · 0.3s (12 lines) ← collapsed (default)
|
||||
* ▼ terminal ls -la src · 0.3s ← expanded header
|
||||
* │ args { … } ← full args (when present)
|
||||
* │ output … ← envelope-stripped body
|
||||
* │ … omitted 5 lines / 234 chars ← tidy note (no raw label)
|
||||
* │ <renderer body> ← labeled fields / output / …
|
||||
*
|
||||
* `▶`/`▼` marks expandable tools; clicking the header toggles it. Running tools
|
||||
* show `name …`. `resultText`/`omittedNote` are already cleaned by the store.
|
||||
* Fully themed (no hardcoded styles); decorative glyphs are selectable={false}.
|
||||
* `▶`/`▼` marks expandable tools; clicking the header toggles it (wrapped in
|
||||
* useScrollAnchor so expanding never yanks the viewport). Running tools show
|
||||
* `name …`. The header row is chrome (selectable=false) — a free-form drag
|
||||
* copies only the expanded body content. Fully themed (no hardcoded styles).
|
||||
*/
|
||||
import { type ToolPartState } from '../logic/store.ts'
|
||||
import { useDimensions } from './dimensions.tsx'
|
||||
import { createMemo, createSignal, For, Show } from 'solid-js'
|
||||
import { createSignal, Show } from 'solid-js'
|
||||
|
||||
import { collapseToolOutput, truncate } from '../logic/toolOutput.ts'
|
||||
import { truncate } from '../logic/toolOutput.ts'
|
||||
import { useScrollAnchor } from './scrollAnchor.tsx'
|
||||
import { useTheme } from './theme.tsx'
|
||||
import { resultLines } from './tools/defaultTool.tsx'
|
||||
import { rendererFor } from './tools/registry.tsx'
|
||||
|
||||
const GUTTER = 2
|
||||
/** Max output lines shown when expanded (a sane cap to avoid huge renders). */
|
||||
const EXPANDED_MAX = 200
|
||||
/** Max args lines shown when expanded. */
|
||||
const ARGS_MAX = 16
|
||||
|
||||
function fmtDuration(s: number): string {
|
||||
if (s < 10) return `${s.toFixed(1)}s`
|
||||
@@ -42,47 +41,16 @@ export function ToolPart(props: { part: ToolPartState }) {
|
||||
const [expanded, setExpanded] = createSignal(false)
|
||||
const toggle = () => anchor(() => setExpanded(e => !e))
|
||||
|
||||
// Per-tool renderer (re-dispatches if the name settles on tool.complete).
|
||||
const renderer = () => rendererFor(props.part.name)
|
||||
const bodyWidth = () => Math.max(20, dims().width - GUTTER - 4)
|
||||
const result = () => (props.part.resultText ?? '').replace(/\s+$/, '')
|
||||
const lines = () => (result() ? result().split('\n') : [])
|
||||
const lines = () => resultLines(props.part)
|
||||
const running = () => props.part.state === 'running'
|
||||
const hasOutput = () => lines().length > 0
|
||||
// Parse the args JSON into top-level key→value entries for a tidy key:value
|
||||
// render (no brace noise). Falls back to raw lines when it isn't an object.
|
||||
const argsObj = createMemo<Record<string, unknown> | undefined>(() => {
|
||||
const t = props.part.argsText
|
||||
if (!t) return undefined
|
||||
try {
|
||||
const o: unknown = JSON.parse(t)
|
||||
return o && typeof o === 'object' && !Array.isArray(o) ? (o as Record<string, unknown>) : undefined
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
})
|
||||
const argLine = (k: string, v: unknown) =>
|
||||
`${k}: ${typeof v === 'string' ? v : JSON.stringify(v)}`.replace(/\s+/g, ' ')
|
||||
const argEntries = createMemo(() => Object.entries(argsObj() ?? {}))
|
||||
// Hide the args block when it adds nothing over the header: a single field
|
||||
// whose value is already the primary-arg preview (item 2 judge nit — terminal's
|
||||
// `command` is redundant). Show it for multi-field tools (edits, reads w/ range).
|
||||
const showArgs = createMemo(() => {
|
||||
const e = argEntries()
|
||||
if (argsObj() === undefined) return !!props.part.argsText // unparsed → show raw
|
||||
if (e.length === 0) return false
|
||||
const only = e.length === 1 ? e[0] : undefined
|
||||
if (only) {
|
||||
const v = only[1]
|
||||
const vs = (typeof v === 'string' ? v : JSON.stringify(v)).trim()
|
||||
return vs !== (props.part.argsPreview ?? '').trim()
|
||||
}
|
||||
return true
|
||||
})
|
||||
// Expandable when there's a body to reveal beyond the header (output or args).
|
||||
const collapsible = () => !running() && (lines().length > 1 || showArgs())
|
||||
// Header subtitle: the primary-arg preview (item 2), else explicit summary, else first line.
|
||||
const subtitle = () =>
|
||||
props.part.error ? `✗ ${props.part.error}` : props.part.argsPreview || props.part.summary || lines()[0] || ''
|
||||
const body = createMemo(() => collapseToolOutput(result(), EXPANDED_MAX, bodyWidth() - 2))
|
||||
// Expandable when the renderer says there's a body to reveal beyond the header.
|
||||
const collapsible = () => !running() && renderer().expandable(props.part)
|
||||
// Header subtitle: errors win; otherwise the renderer's collapsed summary.
|
||||
const subtitle = () => (props.part.error ? `✗ ${props.part.error}` : renderer().subtitle(props.part))
|
||||
const hint = () => renderer().hint?.(props.part)
|
||||
|
||||
const headGlyph = () => (collapsible() ? (expanded() ? '▼' : '▶') : '⚡')
|
||||
// accent glyph MARKS the tool (draws the eye); the rest is muted so tools read
|
||||
@@ -92,9 +60,9 @@ export function ToolPart(props: { part: ToolPartState }) {
|
||||
|
||||
return (
|
||||
// Spacing between parts is owned by the parts column (gap), not per-part
|
||||
// margins — so a tool appearing mid-stream doesn't shift the layout (item 5).
|
||||
// margins — so a tool appearing mid-stream doesn't shift the layout.
|
||||
<box style={{ flexDirection: 'column', flexShrink: 0 }}>
|
||||
{/* header — clickable to toggle when there's expandable output/args */}
|
||||
{/* header — clickable to toggle when there's an expandable body */}
|
||||
<box style={{ flexDirection: 'row', flexShrink: 0 }} onMouseDown={() => collapsible() && toggle()}>
|
||||
<box style={{ flexShrink: 0, width: GUTTER }}>
|
||||
<text selectable={false}>
|
||||
@@ -102,10 +70,10 @@ export function ToolPart(props: { part: ToolPartState }) {
|
||||
</text>
|
||||
</box>
|
||||
<box style={{ flexDirection: 'row', flexGrow: 1, minWidth: 0 }}>
|
||||
{/* the whole header row is a collapsed SUMMARY (tool name + args-preview
|
||||
+ duration + "(N lines)") — chrome, not the copyable body — so a
|
||||
free-form drag over a tool yields only the expanded output/args
|
||||
content, never the header label (item 4). */}
|
||||
{/* the whole header row is a collapsed SUMMARY (tool name + subtitle +
|
||||
duration + "(N lines)") — chrome, not the copyable body — so a
|
||||
free-form drag over a tool yields only the expanded body content,
|
||||
never the header label. */}
|
||||
<text selectable={false}>
|
||||
<span style={{ fg: theme().color.muted }}>{props.part.name}</span>
|
||||
<Show when={running()}>
|
||||
@@ -116,6 +84,11 @@ export function ToolPart(props: { part: ToolPartState }) {
|
||||
{` ${truncate(subtitle(), subWidth())}`}
|
||||
</span>
|
||||
</Show>
|
||||
<Show when={hint()}>
|
||||
{/* per-tool muted hint (e.g. delegate_task's "(/agents to monitor)") —
|
||||
shown while running too, Ink parity. */}
|
||||
<span style={{ fg: theme().color.muted }}>{` ${hint() ?? ''}`}</span>
|
||||
</Show>
|
||||
<Show when={!running() && props.part.duration !== undefined}>
|
||||
<span style={{ fg: theme().color.muted }}>{` · ${fmtDuration(props.part.duration ?? 0)}`}</span>
|
||||
</Show>
|
||||
@@ -126,77 +99,19 @@ export function ToolPart(props: { part: ToolPartState }) {
|
||||
</box>
|
||||
</box>
|
||||
|
||||
{/* expanded body — args block (when present) then output block, inside a
|
||||
single left-bordered column (a `│` rule, not a bg fill — opencode's
|
||||
BlockTool style; also renders faithfully and reads cleaner). */}
|
||||
{/* expanded body — the per-tool renderer's Body, inside a single
|
||||
left-bordered column (a `│` rule, not a bg fill — opencode's BlockTool
|
||||
style; also renders faithfully and reads cleaner). */}
|
||||
<Show when={collapsible() && expanded()}>
|
||||
<box
|
||||
style={{ flexDirection: 'column', flexGrow: 1, minWidth: 0, marginLeft: GUTTER, paddingLeft: 1 }}
|
||||
border={['left']}
|
||||
borderColor={props.part.error ? theme().color.error : theme().color.border}
|
||||
>
|
||||
<box style={{ flexDirection: 'column', flexGrow: 1, minWidth: 0 }}>
|
||||
<Show when={showArgs()}>
|
||||
{/* section label — chrome, not content (item 4) */}
|
||||
<text selectable={false}>
|
||||
<span style={{ fg: theme().color.label }}>args</span>
|
||||
</text>
|
||||
{/* parsed key: value lines (tidy), or raw argsText when unparseable */}
|
||||
<Show
|
||||
when={argsObj() !== undefined}
|
||||
fallback={
|
||||
<For each={(props.part.argsText ?? '').split('\n').slice(0, ARGS_MAX)}>
|
||||
{line => (
|
||||
<text selectionBg={theme().color.selectionBg}>
|
||||
<span style={{ fg: theme().color.muted }}>{truncate(line, bodyWidth() - 2)}</span>
|
||||
</text>
|
||||
)}
|
||||
</For>
|
||||
}
|
||||
>
|
||||
<For each={argEntries().slice(0, ARGS_MAX)}>
|
||||
{([k, v]) => (
|
||||
<text selectionBg={theme().color.selectionBg}>
|
||||
<span style={{ fg: theme().color.muted }}>{truncate(argLine(k, v), bodyWidth() - 2)}</span>
|
||||
</text>
|
||||
)}
|
||||
</For>
|
||||
<Show when={argEntries().length > ARGS_MAX}>
|
||||
{/* overflow annotation — chrome, not content (item 4) */}
|
||||
<text selectable={false}>
|
||||
<span style={{ fg: theme().color.accent }}>{`… +${argEntries().length - ARGS_MAX} more`}</span>
|
||||
</text>
|
||||
</Show>
|
||||
</Show>
|
||||
</Show>
|
||||
<Show when={showArgs() && hasOutput()}>
|
||||
{/* section label — chrome, not content (item 4) */}
|
||||
<text selectable={false}>
|
||||
<span style={{ fg: theme().color.label }}>output</span>
|
||||
</text>
|
||||
</Show>
|
||||
{/* output body lines are the copyable content → themed selection bar
|
||||
(preserves fg; same token as message text) (item: theme highlight). */}
|
||||
<For each={body().lines}>
|
||||
{line => (
|
||||
<text selectionBg={theme().color.selectionBg}>
|
||||
<span style={{ fg: theme().color.muted }}>{line}</span>
|
||||
</text>
|
||||
)}
|
||||
</For>
|
||||
{/* truncation annotations — chrome (the "… omitted N" / "… +N more
|
||||
lines" notes are not part of the real output body) (item 4). */}
|
||||
<Show when={props.part.omittedNote}>
|
||||
<text selectable={false}>
|
||||
<span style={{ fg: theme().color.muted }}>{`… omitted ${props.part.omittedNote}`}</span>
|
||||
</text>
|
||||
</Show>
|
||||
<Show when={body().hiddenLines > 0 && !props.part.omittedNote}>
|
||||
<text selectable={false}>
|
||||
<span style={{ fg: theme().color.accent }}>{`… +${body().hiddenLines} more lines`}</span>
|
||||
</text>
|
||||
</Show>
|
||||
</box>
|
||||
{(() => {
|
||||
const Body = renderer().Body
|
||||
return <Body part={props.part} width={bodyWidth() - 2} />
|
||||
})()}
|
||||
</box>
|
||||
</Show>
|
||||
</box>
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* DefaultTool — the fallback renderer for every unmapped tool, incl. MCP tools
|
||||
* (Epic 2.2: kill the raw-JSON args path). Expanded args render as LABELED
|
||||
* FIELDS (key → value rows), never a JSON dump:
|
||||
* - strings verbatim, flattened to one line + truncated to the frame width
|
||||
* - numbers/booleans via String()
|
||||
* - arrays of primitives joined ("a, b, c"); anything nested summarized as
|
||||
* `(N fields)` / `(N items)` (opencode's primitive-only `input()` idea)
|
||||
* A single field whose value already equals the header's primary-arg preview is
|
||||
* hidden (it adds nothing over the header). The output body keeps the store's
|
||||
* envelope-stripped text, capped to EXPANDED_MAX with the honest omitted /
|
||||
* "+N more lines" notes. `ToolOutputBlock` is shared with the per-tool
|
||||
* renderers (bash, …). Fully themed; labels/notes are chrome (selectable=false).
|
||||
*/
|
||||
import { createMemo, For, Show } from 'solid-js'
|
||||
|
||||
import type { ToolPartState } from '../../logic/store.ts'
|
||||
import { collapseToolOutput, truncate } from '../../logic/toolOutput.ts'
|
||||
import { useTheme } from '../theme.tsx'
|
||||
import type { ToolBodyProps, ToolRenderer } from './registry.tsx'
|
||||
|
||||
/** Max output lines shown when expanded (a sane cap to avoid huge renders). */
|
||||
export const EXPANDED_MAX = 200
|
||||
/** Max labeled arg fields shown when expanded. */
|
||||
const FIELDS_MAX = 16
|
||||
|
||||
/** The tool's structured args: `part.args` (tool.complete) or parsed argsText. */
|
||||
export function structuredArgs(part: ToolPartState): Record<string, unknown> | undefined {
|
||||
if (part.args) return part.args
|
||||
if (!part.argsText) return undefined
|
||||
try {
|
||||
const o: unknown = JSON.parse(part.argsText)
|
||||
return o && typeof o === 'object' && !Array.isArray(o) ? (o as Record<string, unknown>) : undefined
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
function isPrimitive(v: unknown): v is string | number | boolean {
|
||||
return typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean'
|
||||
}
|
||||
|
||||
/** One-line display value for an arg: primitives verbatim, nesting summarized. */
|
||||
function fieldValue(v: unknown): string {
|
||||
if (typeof v === 'string') return v.replace(/\s+/g, ' ').trim()
|
||||
if (typeof v === 'number' || typeof v === 'boolean') return String(v)
|
||||
if (v === null || v === undefined) return '∅'
|
||||
if (Array.isArray(v)) {
|
||||
if (v.length > 0 && v.every(isPrimitive)) return v.map(String).join(', ')
|
||||
return `(${v.length} item${v.length === 1 ? '' : 's'})`
|
||||
}
|
||||
const n = Object.keys(v).length
|
||||
return `(${n} field${n === 1 ? '' : 's'})`
|
||||
}
|
||||
|
||||
/** Labeled key→value rows for the expanded args (NEVER raw JSON). */
|
||||
export function argFields(part: ToolPartState): Array<[string, string]> {
|
||||
const obj = structuredArgs(part)
|
||||
if (!obj) return []
|
||||
const entries = Object.entries(obj).map(([k, v]): [string, string] => [k, fieldValue(v)])
|
||||
// A single field whose value is already the header's primary-arg preview adds
|
||||
// nothing over the header (e.g. terminal's `command`) — hide it (kept from
|
||||
// the pre-registry render's redundancy rule).
|
||||
const only = entries.length === 1 ? entries[0] : undefined
|
||||
if (only && only[1] === (part.argsPreview ?? '').trim()) return []
|
||||
return entries
|
||||
}
|
||||
|
||||
/** The settled output body, trailing-whitespace-trimmed, split to lines. */
|
||||
export function resultLines(part: ToolPartState): string[] {
|
||||
const r = (part.resultText ?? '').replace(/\s+$/, '')
|
||||
return r ? r.split('\n') : []
|
||||
}
|
||||
|
||||
/** Collapsed subtitle: primary-arg preview, else summary, else the first output line. */
|
||||
export function defaultSubtitle(part: ToolPartState): string {
|
||||
return part.argsPreview || part.summary || resultLines(part)[0] || ''
|
||||
}
|
||||
|
||||
/**
|
||||
* The output section of an expanded tool body — shared by the default and the
|
||||
* per-tool renderers. Caps to EXPANDED_MAX and renders the honest truncation
|
||||
* notes (`omittedNote` from the gateway cap; "+N more lines" from ours).
|
||||
*/
|
||||
export function ToolOutputBlock(props: { part: ToolPartState; width: number; label?: boolean }) {
|
||||
const theme = useTheme()
|
||||
const result = () => (props.part.resultText ?? '').replace(/\s+$/, '')
|
||||
const body = createMemo(() => collapseToolOutput(result(), EXPANDED_MAX, props.width))
|
||||
return (
|
||||
<Show when={result()}>
|
||||
{/* section label — chrome, not content */}
|
||||
<Show when={props.label}>
|
||||
<text selectable={false}>
|
||||
<span style={{ fg: theme().color.label }}>output</span>
|
||||
</text>
|
||||
</Show>
|
||||
{/* output body lines are the copyable content → themed selection bar */}
|
||||
<For each={body().lines}>
|
||||
{line => (
|
||||
<text selectionBg={theme().color.selectionBg}>
|
||||
<span style={{ fg: theme().color.muted }}>{line}</span>
|
||||
</text>
|
||||
)}
|
||||
</For>
|
||||
{/* truncation annotations — chrome (not part of the real output body) */}
|
||||
<Show when={props.part.omittedNote}>
|
||||
<text selectable={false}>
|
||||
<span style={{ fg: theme().color.muted }}>{`… omitted ${props.part.omittedNote}`}</span>
|
||||
</text>
|
||||
</Show>
|
||||
<Show when={body().hiddenLines > 0 && !props.part.omittedNote}>
|
||||
<text selectable={false}>
|
||||
<span style={{ fg: theme().color.accent }}>{`… +${body().hiddenLines} more lines`}</span>
|
||||
</text>
|
||||
</Show>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
/** Expanded body: labeled arg fields, then the (capped) output block. */
|
||||
export function DefaultToolBody(props: ToolBodyProps) {
|
||||
const theme = useTheme()
|
||||
const fields = createMemo(() => argFields(props.part))
|
||||
return (
|
||||
<box style={{ flexDirection: 'column', flexGrow: 1, minWidth: 0 }}>
|
||||
<Show when={fields().length > 0}>
|
||||
<For each={fields().slice(0, FIELDS_MAX)}>
|
||||
{([key, value]) => (
|
||||
<text selectionBg={theme().color.selectionBg}>
|
||||
<span style={{ fg: theme().color.label }}>{key}</span>
|
||||
<span style={{ fg: theme().color.muted }}>
|
||||
{` ${truncate(value, Math.max(1, props.width - key.length - 2))}`}
|
||||
</span>
|
||||
</text>
|
||||
)}
|
||||
</For>
|
||||
<Show when={fields().length > FIELDS_MAX}>
|
||||
{/* overflow annotation — chrome, not content */}
|
||||
<text selectable={false}>
|
||||
<span style={{ fg: theme().color.accent }}>{`… +${fields().length - FIELDS_MAX} more`}</span>
|
||||
</text>
|
||||
</Show>
|
||||
</Show>
|
||||
<ToolOutputBlock part={props.part} width={props.width} label={fields().length > 0} />
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
||||
export const defaultRenderer: ToolRenderer = {
|
||||
Body: DefaultToolBody,
|
||||
// Expandable when there's a body beyond the header: multi-line output, labeled
|
||||
// arg fields, or a single output line the subtitle doesn't already show
|
||||
// (argsPreview/summary win the subtitle, hiding that line when collapsed).
|
||||
expandable: part =>
|
||||
resultLines(part).length > 1 ||
|
||||
argFields(part).length > 0 ||
|
||||
(resultLines(part).length === 1 && Boolean(part.argsPreview || part.summary)),
|
||||
subtitle: defaultSubtitle
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* Tool renderer registry (Epic 2.2) — maps a tool NAME to its renderer. The
|
||||
* shared shell (header glyph, expand toggle + scroll anchoring, the left-border
|
||||
* body frame) stays in `view/toolPart.tsx` so every tool keeps the house rules
|
||||
* (useScrollAnchor, themed chrome) for free; a renderer only supplies what
|
||||
* varies per tool:
|
||||
* - `subtitle` — the collapsed one-line summary shown after the tool name
|
||||
* - `hint` — an extra muted header note (e.g. delegate_task's monitor tip)
|
||||
* - `expandable` — whether there's a body worth expanding beyond the header
|
||||
* - `Body` — the expanded body (labeled arg fields / output / diff)
|
||||
*
|
||||
* Unmapped tools (incl. MCP tools) fall back to the labeled-fields default
|
||||
* renderer — NEVER a raw JSON dump. To add a per-tool renderer (e.g.
|
||||
* `fileTool.tsx` for read/write/edit path+diff — Epic 2.3): export a
|
||||
* `ToolRenderer` from a sibling module and add its tool names to `TOOLS`.
|
||||
*/
|
||||
import type { Component } from 'solid-js'
|
||||
|
||||
import type { ToolPartState } from '../../logic/store.ts'
|
||||
import { defaultRenderer } from './defaultTool.tsx'
|
||||
|
||||
/** Props every tool Body receives: the part + usable content columns. */
|
||||
export interface ToolBodyProps {
|
||||
part: ToolPartState
|
||||
/** Width (columns) available for body lines inside the bordered frame. */
|
||||
width: number
|
||||
}
|
||||
|
||||
export interface ToolRenderer {
|
||||
/** Collapsed one-line subtitle (verbatim command, primary arg, …). */
|
||||
subtitle: (part: ToolPartState) => string
|
||||
/** Optional muted header note (chrome) — e.g. delegate_task's "(/agents to monitor)". */
|
||||
hint?: (part: ToolPartState) => string
|
||||
/** Whether the part has expandable content beyond the header (when settled). */
|
||||
expandable: (part: ToolPartState) => boolean
|
||||
/** The expanded body, rendered inside the shared left-bordered frame. */
|
||||
Body: Component<ToolBodyProps>
|
||||
}
|
||||
|
||||
const TOOLS: Record<string, ToolRenderer> = {
|
||||
// delegate_task: default labeled fields + the Ink-parity monitor hint
|
||||
// (ui-tui/src/components/thinking.tsx — "(/agents to monitor)").
|
||||
delegate_task: { ...defaultRenderer, hint: () => '(/agents to monitor)' }
|
||||
}
|
||||
|
||||
/** Resolve the renderer for a tool name (default = labeled-fields fallback). */
|
||||
export function rendererFor(name: string): ToolRenderer {
|
||||
return TOOLS[name] ?? defaultRenderer
|
||||
}
|
||||
Reference in New Issue
Block a user