Architecture Overview
The interface is built around theChatConsolePanel apps/web/src/chat/ChatConsolePanel.tsx#71-77, which orchestrates several specialized sub-components and hooks to manage the lifecycle of a chat session.
Key Components
| Component | Role |
|---|---|
ChatConsolePanel | Top-level coordinator for state, sessions, and streams. |
ChatComposer | Input area with slash commands, attachments, and budget estimation. |
ChatTranscript | Live-updating feed of messages, tool calls, and A2UI surfaces. |
ChatSessionsSidebar | Navigation and management for historical and active sessions. |
ChatInspectorColumn | Side panel for deep-dive into payloads, compactions, and background tasks. |
Data Flow and Stream Integration
The interface utilizes theuseChatRunStream hook apps/web/src/chat/ChatConsolePanel.tsx#150-156 to manage the bidirectional communication with the daemon. This hook handles the RunStream lifecycle, processing incoming events and updating the local visibleTranscript apps/web/src/chat/ChatConsolePanel.tsx#138.
Chat Interface Communication
Sources: apps/web/src/chat/ChatConsolePanel.tsx#139-156, apps/web/src/chat/useChatRunStream.ts#1-50, apps/web/src/chat/ChatTranscript.tsx#17-19.ChatComposer and Input Processing
TheChatComposer apps/web/src/chat/ChatComposer.tsx#53-84 handles complex input scenarios beyond simple text, including:
- Slash Commands: Commands like
/new,/branch, or/compactare parsed viaparseSlashCommandapps/web/src/chat/chatShared.tsx#188 and executed as specific actions. - Context Budgeting: Real-time estimation of token usage via
buildContextBudgetSummaryapps/web/src/chat/chatShared.tsx#54-65. It tracks baseline, draft, and attachment tokens against soft and hard limits apps/web/src/chat/chatShared.tsx#22-23. - Attachments: Support for drag-and-drop file uploads apps/web/src/chat/ChatComposer.tsx#125 which are processed into
ComposerAttachmentobjects apps/web/src/chat/chatShared.tsx#38-52.
Recall and Context Preview
Before sending a message, the composer integrates two preview systems:- Context References: Resolves symbols (e.g.,
@file) viauseContextReferencePreviewapps/web/src/chat/ChatConsolePanel.tsx#57. - Memory Recall: Previews what the agent might “remember” from the
JournalStoreusinguseRecallPreviewapps/web/src/chat/ChatConsolePanel.tsx#58.
Transcript and Tool Approval
TheChatTranscript apps/web/src/chat/ChatTranscript.tsx#27-42 renders a sequence of TranscriptEntry objects. It is optimized for technical clarity by moving heavy JSON payloads out of the main feed.
Inline Approval Workflow
When a tool requires explicit operator consent (e.g., file system modifications), anapproval_request entry is rendered apps/web/src/chat/chatShared.tsx#177.
- Approval Controls: Rendered via
ApprovalRequestControlsapps/web/src/chat/chatShared.tsx#230-235. - Decision Flow: The operator can choose a scope (
once,session, ortimeboxed) apps/web/src/chat/chatShared.tsx#170. The decision is sent back viaapi.decideToolCallapps/web/src/chat/ChatConsolePanel.tsx#148.
Payload Inspection
To prevent “debug dump” clutter, tool payloads and results are hidden by default. Clicking “Inspect payload” apps/web/src/chat/ChatConsolePanel.test.tsx#115 triggers a callback that populates theChatInspectorColumn with a PrettyJsonBlock apps/web/src/chat/chatShared.tsx#217-221.
Sources: apps/web/src/chat/ChatTranscript.tsx#150-175, apps/web/src/chat/ChatConsolePanel.test.tsx#93-117, apps/web/src/chat/chatShared.tsx#186-203.
Continuity and Compaction (Phase 4)
Long-running sessions utilize the “Phase 4” continuity system to maintain performance.- Checkpoints: Snapshots of session state created via
createSessionCheckpointapps/web/src/console/sections/SessionsSection.tsx#91. - Compaction: Summarizes older transcript entries to fit within model context windows. The UI supports
previewandapplymodes apps/web/src/chat/chatPhase4Actions.ts#33-42. - Deep Links: The interface supports navigation to specific points in history via
runId,compactionId, orcheckpointIdquery parameters apps/web/src/chat/ChatConsolePanel.tsx#78-82.
Session Continuity Entities
Sources: apps/web/src/chat/ChatConsolePanel.tsx#89-106, apps/web/src/chat/chatPhase4Actions.ts#1-21, apps/web/src/console/sections/SessionsSection.tsx#37-42.Utility and Shared Logic
ThechatShared.tsx and chatConsoleUtils.ts files provide the functional backbone for the interface:
- Token Estimation:
formatApproxTokensand budget limit constants apps/web/src/chat/chatShared.tsx#18-23. - Detail Building: Functions like
buildDetailFromTranscriptRecordapps/web/src/chat/chatConsoleUtils.ts#32-39 transform raw API records into theDetailPanelStateused by the inspector. - Security:
SENSITIVE_KEY_PATTERNandSENSITIVE_VALUE_PATTERNapps/web/src/chat/chatShared.tsx#13-16 are used to redact credentials in the UI unlessrevealSensitiveValuesis toggled.