feat: custom tool renderers

docs/tool-renderers.md

@@ -0,0 +1,14 @@
+# 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.
+