veridian/docs/tool-renderers.md

Tool renderers

Tool presentation lives in app/components/Message/Agent/Tool/.

To add a renderer:

1. Create a Vue component accepting toolCall: Readonly<ToolCall> and optional part?: MessagePart.
2. Register its exact tool name in renderers.ts.
3. Wrap your custom presentation with Disclosure.vue. Provide title, subtitle, icon, and customTab (specifying id, label, count, and optional copyContent). Place the custom UI in the named slot matching your tab ID.

The expanded card seamlessly integrates custom renderer tabs alongside standard inspector tabs (Input, Output, Trace, and Error on failure). Line counts and duration are formatted automatically. Built-in Copy and Retry actions allow quick clipboard access and retry handling. Unknown tools fall back to Generic.vue with smart heuristics for common tool signatures (read, edit, query, fetch, python).

Use parseToolValue from app/utils/tool-rendering.ts to decode stored values as unknown, then validate the tool-specific shape. Inputs and outputs can change while streaming, so derive presentation with computed values and handle pending, completed, failed, and cancelled calls. Never execute tool output as markup or code.