Tool Visualization
Relevant source files
The following files were used as context for generating this wiki page:
Tool Visualization is a core feature of the Open Claude Cowork application that provides real-time transparency into how the AI agent interacts with external tools. It enables users to monitor tool inputs, execution status, and raw outputs through two primary interfaces: an inline view within the chat stream and a dedicated persistence panel in the right sidebar.
This system supports the "agentic" capabilities of the application by visualizing the 500+ external tools available via the Composio Tool Router, including integrations with Gmail, Slack, GitHub, and Google Drive. Sources: README.md:16, README.md:143-146
Architecture and Data Flow
The visualization logic is driven by Server-Sent Events (SSE) received from the backend. As the AI provider (Claude or Opencode) decides to invoke a tool, it emits a tool_use event. Once the tool completes, a tool_result event is emitted. The frontend processes these events to update the UI components dynamically.
Event Processing Flow
The following diagram illustrates how tool-related events transition from the streaming response to the UI components.
The frontend maintains a local state of toolCalls to track history and status. Sources: renderer/renderer.js:46, renderer/renderer.js:770-845
UI Components
1. Inline Tool Call Visualization
Inline visualization inserts tool execution blocks directly into the chat message stream. This allows the user to see the exact moment a tool was called relative to the assistant's text response.
- Header: Displays the tool name and a formatted preview of the input parameters.
- Input Section: Shows the full JSON payload sent to the tool.
- Output Section: Displays the raw result returned by the tool, formatted with a success-themed background.
Sources: renderer/renderer.js:1017-1049, renderer/style.css:977-1041
2. Right Sidebar (Progress & Tool History)
The right sidebar serves as a persistent log of all tool activities within the current session.
| Component | DOM ID | Description |
|---|---|---|
| Tool Calls List | toolCallsList | Container for all tool call items. |
| Tool Call Item | .tool-call-item | A collapsible block representing a single tool invocation. |
| Status Icon | .tool-call-icon | Color-coded indicator: Blue (running), Green (success), Red (error). |
| Output Content | .sidebar-tool-output | A code block containing the truncated raw output of the tool. |
Sources: renderer/index.html:260-272, renderer/renderer.js:1068-1107, renderer/style.css:849-937
3. Live Browser Visualization
Specialized visualization for the "Anchor Browser" tool. When the application detects a live browser URL in a tool result, it embeds an interactive iframe.
Implementation Details
Key Functions
| Function | File | Purpose |
|---|---|---|
addToolCall(name, input, status) | renderer.js | Initializes a new tool record in the sidebar and state array. |
addInlineToolCall(contentDiv, toolName, toolInput, toolId) | renderer.js | Injects the collapsible tool block into the active chat message. |
updateToolCallStatus(toolId, status) | renderer.js | Updates UI classes (e.g., running to success) and status text. |
formatToolPreview(toolInput) | renderer.js | Extracts primary keys (e.g., path, command) to show a concise summary in the header. |
Sources: renderer/renderer.js:1001-1015, renderer/renderer.js:1068-1107, renderer/renderer.js:1110-1123
Tool Status Mapping
The UI uses specific CSS classes to reflect the state of tool execution reported by the providers:
- Running: Applies the
runningclass, triggering a pulse animation. Sources: renderer/style.css:873-876 - Success: Applies the
successclass with a green background (#4ade80). Sources: renderer/style.css:881-884 - Error: Applies the
errorclass with a red background (#ef4444). Sources: renderer/style.css:889-892
Provider-Specific Normalization
The OpencodeProvider includes logic to normalize tool events from its SDK format to the application's standard format. It specifically tracks tool-invocation and tool-result parts within the message.part.updated event stream to ensure correct visualization. Sources: server/providers/opencode-provider.js:161-185, server/providers/opencode-provider.js:220-244
Summary
Tool Visualization in Open Claude Cowork provides a dual-view system for monitoring agent activities. By combining real-time inline updates with a persistent sidebar log, the system ensures that complex multi-tool workflows are observable and debuggable for the user. Citing multiple files confirms that the frontend (renderer.js, index.html, style.css) handles the display logic while the backend providers (opencode-provider.js) supply the structured event data.