Event Cards

Relevant source files

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

• src/ui/components/EventCard.tsx
• src/ui/App.tsx
• src/ui/types.ts
• src/ui/store/useAppStore.ts
• src/ui/render/markdown.tsx
• src/ui/components/DecisionPanel.tsx

Introduction

Event Cards (implemented as the MessageCard and EventCard components) are the primary visual building blocks of the Claude Cowork user interface. They are responsible for rendering the diverse stream of messages exchanged between the user, the AI assistant, and the underlying system. The component acts as a polymorphic dispatcher that transforms raw SDK messages and application-specific events into structured, interactive UI elements.

These cards provide real-time visual feedback for Claude's thinking process, tool executions, markdown-formatted text, and interactive permission requests. They are designed to support a streaming architecture where content is appended dynamically as the AI generates its response.

Sources: src/ui/components/EventCard.tsx:210-279, src/ui/App.tsx:165-174

Component Architecture

The MessageCard (aliased as EventCard) functions as a central router. It receives a StreamMessage object and determines which sub-component to render based on the message type (e.g., user_prompt, assistant, system, or result).

Message Types and Sub-components

The system handles several specific message categories, each with a dedicated rendering logic:

Component	Message Type / Subtype	Description
UserMessageCard	user_prompt	Renders user-initiated text prompts with markdown support.
AssistantBlockCard	assistant (text/thinking)	Displays Claude's thoughts or final text output.
ToolUseCard	assistant (tool_use)	Visualizes external tool calls (e.g., Bash, Read, Write) with status indicators.
AskUserQuestionCard	assistant (tool_use: AskUserQuestion)	Handles interactive questions from the AI requiring user input.
ToolResult	user (tool_result)	Displays the output or error returned by a tool execution.
SystemInfoCard	system (init)	Shows session metadata like Session ID and Working Directory.
SessionResult	result (success)	Summarizes session statistics including duration, cost, and token usage.

Sources: src/ui/components/EventCard.tsx:210-279, src/ui/types.ts:13-24

Visual State Management

The architecture uses a global listener pattern to synchronize tool statuses across different cards. This ensures that when a tool execution completes, the corresponding ToolUseCard updates its visual indicator from "pending" to "success" or "error".

Rendering Logic and Markdown Support

Content within Event Cards is processed for markdown using the MDContent component. This component utilizes react-markdown with plugins for GitHub Flavored Markdown (remark-gfm), raw HTML (rehype-raw), and syntax highlighting (rehype-highlight).

Content Processing Features

• Syntax Highlighting: Code blocks within assistant messages or tool outputs are styled using highlight.js with a GitHub-inspired theme.
• Auto-Expansion: Tool results (outputs) are capped at 3 visible lines by default. Users can expand the card to view the full content.
• Markdown Detection: A utility function isMarkdown uses regex patterns (e.g., #{1,6}\s+ for headers and ``` for code fences) to decide whether to render text as plain text or via the markdown engine.

Sources: src/ui/render/markdown.tsx:6-48, src/ui/components/EventCard.tsx:111-125

Interactive Permission Flow

When Claude attempts to use a tool that requires explicit user approval (or specifically calls AskUserQuestion), the MessageCard integrates with the DecisionPanel.

Permission Request Sequence

1. Request Generation: The backend sends a permission.request event.
2. Store Update: useAppStore adds the request to the permissionRequests array for the active session.
3. UI Interception: MessageCard checks if the current message matches the active permission request via the isActiveRequest check and signature matching.
4. Interactive Display: The AskUserQuestionCard or DecisionPanel is rendered, providing buttons for "Allow", "Deny", or specific option selections.
5. Response Dispatch: Upon user action, an IPC event permission.response is sent back to the main process.

Session Statistics Rendering

The SessionResult component, triggered by a result type message, provides a technical summary of the AI's execution.

Field	Formatting Logic	Source Data
Duration	Converted from MS to Minutes (2 decimal places)	message.duration_ms
Cost	Formatted as USD currency	message.total_cost_usd
Input Tokens	Formatted in Millions (M)	message.usage.input_tokens
Output Tokens	Formatted in Millions (M)	message.usage.output_tokens

Sources: src/ui/components/EventCard.tsx:71-92

Summary

Event Cards serve as the interactive interface for the Claude Cowork agent. By centralizing the rendering of thinking processes, tool executions, and interactive permission panels, the system provides a transparent view of the AI's operations. The module effectively bridges raw SDK events with a highly styled React UI, leveraging a shared tool-status map and robust markdown rendering to ensure technical clarity and user control over agent actions.