Component Architecture
The system is centered aroundChatConsolePanel.tsx, which orchestrates several specialized hooks and sub-components to provide a unified “Operator Surface”.
Core Layout & Data Flow
The UI is divided into three primary functional areas:- Sessions Sidebar (
ChatSessionsSidebar): Handles session lifecycle, branching, and switching apps/web/src/chat/ChatConsoleWorkspaceView.tsx#143-154. - Conversation Column (
ChatTranscript&ChatComposer): The main interaction area for message history and input apps/web/src/chat/ChatConsoleWorkspaceView.tsx#156-187. - Inspector Column (
ChatInspectorColumn): A technical sidebar that surfaces tool payloads, A2UI documents, background tasks, and lineage metadata apps/web/src/chat/ChatInspectorColumn.tsx#160-182.
Natural Language to Code Entity Mapping
This diagram illustrates how user-facing UI components map to the underlying React hooks and API services. UI to Code Entity Bridge Sources: apps/web/src/chat/ChatConsolePanel.tsx#125-168, apps/web/src/chat/ChatConsoleWorkspaceView.tsx#142-190, apps/web/src/chat/chatCommandRegistry.ts#33-36Run Streaming & Transcript Management
TheuseChatRunStream hook is the heart of the interaction logic. It manages the NDJSON stream from the daemon’s RunStream endpoint and updates the local transcript state in real-time.
Transcript Logic
- Windowing: To maintain performance, the transcript is limited to a retention window defined by
MAX_TRANSCRIPT_RETENTION(800 items) andMAX_RENDERED_TRANSCRIPT(120 items) apps/web/src/chat/chatShared.tsx#25-26. - Token Batching: Assistant responses are streamed as token batches and appended to specific entries via
applyAssistantTokenBatchapps/web/src/chat/chatShared.tsx#230-245. - Entry Kinds: The transcript supports diverse entry types beyond text, including
tool,approval_request,a2ui, andcanvasapps/web/src/chat/chatShared.tsx#82-95.
Approval Workflow UI
When an agent proposes a sensitive tool, the daemon emits anapproval_request. The UI renders ApprovalRequestControls which allows the operator to:
- Set Scope: Choose between
once,session, ortimeboxedapps/web/src/chat/chatShared.tsx#163-169. - Define TTL: Set a time-to-live for the approval in milliseconds apps/web/src/chat/chatShared.tsx#177-188.
- Provide Reason: Add context for the decision apps/web/src/chat/chatShared.tsx#189-199.
Chat Composer & Slash Commands
TheChatComposer provides a rich input experience with real-time feedback on context and commands.
Slash Command System
TheuseChatSlashPalette hook provides a “palette” of available commands (e.g., /branch, /undo, /delegate) based on the chatCommandRegistry apps/web/src/chat/useChatSlashPalette.ts#62-72.
- Entity Suggestions: Commands like
/resumeor/browsertrigger entity lookups for sessions or browser profiles to provide autocomplete suggestions apps/web/src/chat/chatCommandSuggestions.ts#168-185. - Execution: Commands can be executed locally (UI state change) or on the server (API call) apps/web/src/chat/chatCommandRegistry.ts#4-12.
Context Budget & Recall Preview
The composer includes aContextBudgetSummary to prevent context overflow before sending a message.
- Token Estimation: Calculates tokens for baseline history, current draft, context references (e.g.,
@file), and attachments apps/web/src/chat/chatShared.tsx#61-72. - Thresholds: Defines
CONTEXT_BUDGET_SOFT_LIMIT(12,000 tokens) andCONTEXT_BUDGET_HARD_LIMIT(16,000 tokens) to trigger UI warnings apps/web/src/chat/chatShared.tsx#29-30. - Recall Preview: Uses
useRecallPreviewto show what memory or workspace items the daemon will likely retrieve based on the current draft apps/web/src/chat/ChatComposer.tsx#122-131.
Implementation Detail: Interaction Flow
The following diagram maps the sequence of a chat run from the user input to the gRPC-backed streaming response. Chat Execution Sequence Sources: apps/web/src/chat/chatSessionActions.ts#153-194, apps/web/src/chat/useChatRunStream.ts#151-168, apps/web/src/chat/ChatConsolePanel.tsx#132-168Canvas Sandboxing
The system supports a “Canvas” feature for rendering interactive or visual content.- Sandboxing: Canvas content is rendered within frames using path segments
["canvas", "v1", "frame"]apps/web/src/chat/chatShared.tsx#31. - Security: The UI enforces limits on canvas scanning depth (
MAX_CANVAS_SCAN_DEPTH: 12) and results to prevent recursive rendering attacks or performance degradation apps/web/src/chat/chatShared.tsx#32-34.