Renderer Process Logic

Relevant source files

The following files were used as context for generating this wiki page:

• renderer/renderer.js
• renderer/index.html
• renderer/style.css
• preload.js
• main.js
• README.md

The Renderer Process Logic comprises the frontend architecture of the Open Claude Cowork application, responsible for the user interface, real-time message streaming, and state management within the Electron environment. It handles the transition between the home greeting view and active chat sessions, manages multi-provider model selection (Claude and Opencode), and visualizes asynchronous tool calls performed by the AI agents.

This layer communicates with the main process and backend server via a secure IPC bridge defined in preload.js, ensuring that the UI remains responsive while processing complex streaming data from AI providers. Key responsibilities include Markdown rendering, local session persistence, and the orchestration of sidebars for task progress and tool call history.
Sources: renderer/renderer.js:1-100, README.md:144-160

Architecture and View Management

The renderer operates as a single-page application (SPA) within Electron, switching between a homeView for new conversations and a chatView for active interactions.

View Transitions

The application uses a state-driven approach to toggle visibility between the primary UI containers. When a user submits their first message, the system transitions from the greeting interface to the messaging interface.

The transition logic is primarily handled by switchToChatView(), which toggles CSS .hidden classes on the DOM elements.
Sources: renderer/renderer.js:770-774, renderer/index.html:43-165

Core State Objects

The renderer maintains several critical state variables to track the session and UI status:

State Variable	Type	Description
allChats	Array	Collection of all chat objects stored in local storage.
currentChatId	String	Unique identifier for the currently active session.
isWaitingForResponse	Boolean	Flag indicating if the UI is awaiting an SSE stream.
selectedProvider	String	Current AI provider ('claude' or 'opencode').
toolCalls	Array	List of tool executions within the current session.
todos	Array	List of agent tasks tracked via TodoWrite tool.

Sources: renderer/renderer.js:37-60

Messaging and SSE Streaming

The core functionality of the renderer is managing the bi-directional communication with the backend server, specifically handling Server-Sent Events (SSE) for token-by-token streaming.

Message Flow Logic

When a message is submitted, the renderer invokes handleSendMessage, which triggers an asynchronous fetch via the electronAPI bridge.

Streaming Components

1. Text Blocks: Real-time text is appended to a markdown-content container and parsed using marked.js.
2. Reasoning/Thinking: If the chunk contains reasoning data (data.isReasoning), it is routed to appendToThinking(), which populates a collapsible <details> block.
3. Tool Use: Tool calls are intercepted and rendered as inline-tool-call components within the chat stream.

Sources: renderer/renderer.js:965-1010, renderer/renderer.js:1063-1090

Tool Call Visualization

The renderer provides dual visualization for agentic actions: inline within the chat and summarized in the right sidebar.

Tool State Management

Tools transition through various statuses, which are reflected in the UI:

• Running: Displayed with an animated pulse and a specific color (accent coral).
• Success: Indicated with a green checkmark and result output.
• Error: Indicated with a red error icon.

Sidebar Integration

The addToolCall function generates a detailed entry in the toolCallsList sidebar. This includes the raw JSON input and the resulting output once the tool execution completes.

Live Browser Integration

A specialized feature of the renderer is the ability to embed and manage "Anchor Browser" sessions. These sessions are extracted from streaming text or tool results containing live URLs.

Browser Display Modes

The renderer manages the browser instance in three modes:

1. Inline: Embedded directly within an assistant's message.
2. Sidebar: Moved to the right sidebar to allow continued conversation.
3. Fullscreen: Expanded to fill the entire application window.

Persistence and IPC Security

The renderer utilizes localStorage for chat persistence and interacts with the operating system through a strict contextBridge in preload.js.

Local Storage Schema

The application saves the state in localStorage under the key allChats. Each chat object includes:

• id: Session UUID.
• messages: Array of objects containing CSS classes, raw content, and rendered HTML.
• provider/model: Settings used for that specific conversation.
• updatedAt: Timestamp for history sorting.

Sources: renderer/renderer.js:108-140

Security via Preload

preload.js serves as a secure gatekeeper. It does not expose ipcRenderer directly but instead provides a set of wrappers for specific backend interactions.

// Example from preload.js illustrating the security bridge
contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: async (message, chatId, provider, model) => {
    // Logic for fetch request to http://localhost:3001
  },
  stopQuery: async (chatId, provider) => {
    // Logic for abort request
  }
});

Sources: preload.js:10-40, main.js:30-45

Summary

The Renderer Process Logic manages the complex state of an agentic chat interface. By handling SSE streams, visualizing multi-step tool calls in the sidebar, and managing local chat history, it provides a high-fidelity interface for Claude and Opencode models. Its architecture ensures that intensive AI tasks and browser embeddings do not block the main UI thread.