Output Parsing & Formatting
Relevant source files
The following files were used as context for generating this wiki page:
Output Parsing & Formatting in Opcode is the critical system responsible for transforming raw, structured data streams from Claude processes into a human-readable, interactive GUI. This system handles real-time JSONL streams, parses complex tool invocations, and applies specialized UI widgets to represent filesystem operations, terminal outputs, and AI reasoning.
The architecture relies on a reactive pipeline where streaming events (from Tauri or WebSockets) are intercepted, categorized by message type (system, assistant, user, result), and then dispatched to a sophisticated rendering engine that utilizes specialized components for different data shapes.
Data Ingestion & Stream Processing
The formatting pipeline begins with the acquisition of raw data from the Claude binary. In web server mode, this involves a Rust backend parsing stdout lines and wrapping them in JSON for WebSocket delivery. In the frontend, the AgentExecution component listens for these events and maintains a history of ClaudeStreamMessage objects.
Message Categorization
The system categorizes incoming stream data into four primary types:
- System: Configuration and initialization data (e.g., model used, working directory).
- Assistant: AI-generated content, including text, "thinking" blocks, and tool use requests.
- User: Human input and the results of tool executions (captured as
tool_result). - Result: Final execution summaries including duration, cost, and token usage.
Sources: src/components/AgentExecution.tsx:49-65, web_server.design.md:68-81
Processing Flow
This diagram illustrates how raw binary output travels from the subprocess to the finalized UI widget.
The system uses a unique isolation mechanism where events are scoped to specific execution IDs (e.g., agent-output:${executionRunId}) to prevent cross-session interference.
Sources: src/components/AgentExecution.tsx:216-228, web_server.design.md:83-93
Specialized Tool Rendering
Opcode employs a "Widget" architecture where specific AI tools are mapped to custom React components. Instead of displaying raw JSON, the StreamMessage component detects tool_use and tool_result blocks and invokes specialized formatters.
Tool-to-Widget Mapping
The following table summarizes the primary tools and their corresponding visual representations.
| Tool Name | Widget Component | Primary Purpose |
|---|---|---|
ls | LSResultWidget | Renders a collapsible directory tree structure. |
read | ReadResultWidget | Displays code with syntax highlighting and line numbers. |
edit | EditWidget | Shows a diff-view of file changes using diff-lines. |
bash | BashWidget | Terminal-style representation of commands and status. |
websearch | WebSearchWidget | Structured display of search queries and clickable result pills. |
task | TaskWidget | Visualization of sub-agent spawning and instructions. |
Sources: src/components/StreamMessage.tsx:135-198, src/components/ToolWidgets.tsx:64-338
The Logic of Tool Results
Tool results often arrive as raw text containing specific markers. For example, the read tool returns lines with a → separator, which Opcode parses to extract the original code and its starting line number for the syntax highlighter.
// Example parsing of tool result for line numbers
const match = trimmedLine.match(/^(\d+)→(.*)$/);
if (match) {
const lineNum = parseInt(match[1], 10);
codeLines.push(match[2]); // Extract actual code
}
Sources: src/components/ToolWidgets.tsx:300-315, src/components/StreamMessage.tsx:365-385
Visual Styles & Themes
Formatting is not limited to data structure but extends to visual consistency. The project uses a custom oklch-based color system for its themes (Dark, Gray, Light, and White).
Syntax Highlighting
Syntax highlighting is powered by react-syntax-highlighter using a specialized "Claude" theme. The getClaudeSyntaxTheme function adjusts code colors dynamically based on the active application theme to ensure readability of AI-generated or filesystem-read code snippets.
Sources: src/lib/claudeSyntaxTheme.ts (referenced), src/styles.css:104-130
Advanced Interactive Formatting
- Thinking Blocks: AI reasoning is wrapped in a
ThinkingWidget, which is collapsible by default to keep the UI clean while allowing users to inspect the agent's logic. - ANSI Parsing: Terminal outputs are processed to convert ANSI escape codes (like
\u001b[1m) into React styles for bolding and colorization. - Link Detection: Raw text outputs are scanned for URLs, which are converted into clickable elements that open in the system's default browser.
Sources: src/components/ToolWidgets.tsx:1120-1150%20into%20React%20styles%20for%20bolding%20and%20colorization.%0A*%20%20%20Link%20Detection%3A%20Raw%20text%20outputs%20are%20scanned%20for%20URLs%2C%20which%20are%20converted%20into%20clickable%20elements%20that%20open%20in%20the%20system's%20default%20browser.%0A%0ASources%3A%20%5Bsrc/components/ToolWidgets.tsx%3A1120-1150), src/components/ToolWidgets.tsx:675-715
Performance & Large Output Handling
To maintain a performant UI during long streaming sessions, Opcode implements several optimization strategies:
- Virtualization: The
AgentExecutioncomponent uses@tanstack/react-virtualto only render the messages currently within the viewport, which is crucial for sessions generating hundreds of messages. - Memoization:
StreamMessageis wrapped inReact.memoto prevent unnecessary re-renders as new chunks are appended to the stream. - Truncation: Components like
ReadResultWidgetandWriteWidgetinclude "Expand/Collapse" functionality for large files (typically > 20 lines) to prevent UI bloat.
Sources: src/components/AgentExecution.tsx:128-140, src/components/StreamMessage.tsx:495, src/components/ToolWidgets.tsx:325-335
Conclusion
Output Parsing & Formatting in Opcode represents a sophisticated bridge between raw CLI data and an interactive developer experience. By combining rigorous message categorization, specialized tool widgets, and performance-minded rendering like virtualization, the system ensures that Claude's complex autonomous actions are transparent and manageable for the user.