Chat Interface Components

Relevant source files

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

• renderer/index.html
• renderer/renderer.js
• renderer/style.css
• server/server.js
• README.md

The Chat Interface Components comprise the frontend architecture and user interface of the Open Claude Cowork application. This system is designed as a native Electron application that facilitates multi-turn conversations with AI agents, supporting real-time streaming, tool call visualization, and session management.

The interface is structured into three primary functional areas: a left sidebar for chat history management, a central main content area for active messaging, and a right sidebar for progress tracking and tool execution monitoring. The system utilizes Server-Sent Events (SSE) to provide a responsive, token-by-token streaming experience.
Sources: README.md:144-156, renderer/index.html:12-20

Core Layout and Navigation

The application uses a tri-pane layout managed through the app-container class. The visibility of these panes is controlled via state variables and DOM manipulation to switch between a "Home View" (empty state) and a "Chat View" (active session).

View Management Logic

The interface transitions from homeView to chatView upon the first message submission. This is handled by the switchToChatView() function, which toggles the hidden CSS class on the respective containers.

Sidebar Controls

The interface features collapsible sidebars to maximize the central workspace.

• Left Sidebar: Manages chat history and new session initiation.
• Right Sidebar: Displays agent progress (Todos) and Tool Calls.

Component	DOM ID	Functionality
Left Sidebar	leftSidebar	History list and session switching.
Right Sidebar	sidebar	Process tracking (Steps and Tools).
Toggle Button	leftSidebarToggle	Collapses/expands the history list.
Expand Button	rightSidebarExpand	Restores the right sidebar from collapsed state.

Sources: renderer/index.html:15-41, renderer/renderer.js:534-566, renderer/style.css:835-860

Messaging and Input System

The input system is centered around a multi-line textarea that supports auto-resizing and file attachments. It provides complex controls for selecting AI providers and specific models.

Input Flow and Provider Selection

Users can select between "Claude" (Claude Agent SDK) and "Opencode" (Opencode SDK) providers. Selecting a provider dynamically updates the available models in the dropdown via the updateModelDropdowns() function.

Message Rendering

Messages are differentiated by roles: user and assistant.

• User Messages: Rendered as bubbles with white-space: pre-wrap to maintain formatting.
• Assistant Messages: Rendered using marked.js for Markdown support. They also include a "Thinking" section (collapsible <details> block) for reasoning parts and "Inline Tool Calls" for real-time tool execution visibility.
  Sources: renderer/renderer.js:731-778, renderer/style.css:610-630

Tool Visualization and Progress Tracking

A key feature of the interface is the real-time visualization of agentic behavior, specifically tool usage and task checklists.

Sidebar Progress Components

The right sidebar acts as an observer for the AI's internal state:

1. Steps/Todos: Triggered by TodoWrite tool calls. It renders a list of tasks with statuses: pending, in_progress, or completed.
2. Tool Calls: Lists every tool invoked by the agent (e.g., Bash, WebSearch). It shows the input arguments and the resulting output once the execution is finished.

Tool Call Data Structure

Tool calls are tracked in the toolCalls state array within renderer.js.
Sources: renderer/renderer.js:933-939

Field	Type	Description
id	String	Unique local identifier (e.g., tool_171...).
name	String	Name of the tool (e.g., Grep, Skill).
input	Object	The arguments passed to the tool.
status	String	Status: running, success, or error.
result	Object/String	The data returned from the tool execution.

Session and State Persistence

The interface maintains state across application restarts using localStorage and server-side session management.

• LocalStorage: Stores allChats (array of chat objects), currentChatId, selectedProvider, and selectedModel.
• State Restoration: The loadChat(chat) function restores the conversation history, todos, and tool calls from the saved JSON object when a user selects a history item.
• Server Logic: The backend (server.js) uses the chatId to resume sessions in the Claude Agent SDK, ensuring context is maintained.
  Sources: renderer/renderer.js:103-152, server/server.js:72-78

Summary

The Chat Interface Components of Open Claude Cowork provide a sophisticated environment for agentic AI interaction. By leveraging Electron for the desktop environment and SSE for streaming, the interface allows for complex, multi-turn workflows. The combination of the multi-chat sidebar, the real-time tool visualization, and the pluggable provider system ensures that users can manage and monitor agent tasks effectively across different LLM providers.
Sources: README.md:144-156, renderer/renderer.js:46-70