ChatConsolePanel Architecture
ChatConsolePanel is the root coordinator for the chat interface apps/web/src/chat/ChatConsolePanel.tsx#77-83. It orchestrates several specialized hooks and sub-components to maintain a high-performance streaming UI while managing complex session state.
Core Data Flow
The panel manages state across three primary vertical columns:- Session Rail (Left): Managed by
useChatSessions, handling session switching, searching, and metadata apps/web/src/chat/useChatSessions.ts#37-42. - Transcript (Center): Managed by
useChatRunStream, handling gRPC-backed NDJSON streaming and local optimistic updates apps/web/src/chat/useChatRunStream.ts#157-163. - Inspector (Right): Managed by
ChatInspectorColumn, providing deep-dive views into tool payloads, compactions, and background tasks apps/web/src/chat/ChatInspectorColumn.tsx#109-155.
Component Hierarchy & Code Entities
The following diagram bridges the UI concepts to the specific React components and hooks that implement them. Chat Console Component Mapping Sources: apps/web/src/chat/ChatConsolePanel.tsx#77-163, apps/web/src/chat/ChatConsoleWorkspaceView.tsx#1-20, apps/web/src/chat/ChatComposer.tsx#53-84, apps/web/src/chat/ChatInspectorColumn.tsx#109-155Session Management (useChatSessions)
The useChatSessions hook encapsulates the lifecycle of SessionCatalogRecord objects apps/web/src/chat/useChatSessions.ts#37-42.
- Active Session: Tracked via
activeSessionId. When changed, it triggers a refresh of the transcript and run state apps/web/src/chat/useChatSessions.ts#45-58. - Lineage Hints: The UI generates descriptions like “Active branch from [Parent] at run [ID]” to help operators navigate complex session trees apps/web/src/chat/chatShared.tsx#355-385.
- Operations:
createSession: Resolves a new session viaapi.resolveChatSessionapps/web/src/chat/useChatSessions.ts#146-174.resetSession: Clears the session state without archiving, allowing a fresh start on the same key apps/web/src/chat/useChatSessions.ts#223-248.archiveSession: Marks the session as archived, removing it from the default rail view apps/web/src/chat/useChatSessions.ts#250-275.
Slash Commands & Composer
TheChatComposer supports a rich set of operator shortcuts via “Slash Commands”. These are parsed client-side to trigger specific API actions or UI state changes apps/web/src/chat/chatShared.tsx#76-163.
| Command | Function | Code Reference |
|---|---|---|
/compact | Triggers transcript compaction (preview or apply) | apps/web/src/chat/chatShared.tsx#145-150 |
/branch | Creates a child session from the current state | apps/web/src/chat/chatShared.tsx#102-106 |
/checkpoint | Creates a named restore point for the session | apps/web/src/chat/ChatConsolePanel.tsx#430-445 |
/delegate | Spawns a delegated child run using a profile | apps/web/src/chat/chatShared.tsx#114-119 |
/queue | Queues follow-up text without interrupting the run | apps/web/src/chat/chatShared.tsx#108-112 |
Context Budget Subsystem
Palyra calculates a “Context Budget” in real-time as the operator types. This is managed byuseChatContextBudget apps/web/src/chat/useChatContextBudget.ts#16-23.
- Baseline: The tokens already present in the session or active run apps/web/src/chat/useChatContextBudget.ts#27.
- Draft: Estimated tokens for the text currently in the composer apps/web/src/chat/useChatContextBudget.ts#28.
- References: Tokens for resolved
@-references (files, docs) apps/web/src/chat/useChatContextBudget.ts#30-33. - Hard Limit: Set at 16,000 tokens apps/web/src/chat/chatShared.tsx#23. The UI transitions from “default” to “warning” (12k) and “danger” (16k) tones based on usage apps/web/src/chat/chatShared.tsx#22-23.
Transcript & Inspector Column
TheChatTranscript renders a sequence of TranscriptEntry objects apps/web/src/chat/ChatTranscript.tsx#27-42. To maintain performance, Palyra caps the rendered items to the latest 120, though up to 800 are retained in memory apps/web/src/chat/chatShared.tsx#18-19.
Payload Offloading
Large JSON payloads (tool inputs/outputs) are not rendered inline. Instead, they are offloaded to theChatInspectorColumn apps/web/src/chat/ChatTranscript.tsx#174-184.
Data Flow: Payload Inspection
Sources: apps/web/src/chat/ChatTranscript.tsx#174-184, apps/web/src/chat/ChatConsolePanel.tsx#233-242, apps/web/src/chat/chatConsoleUtils.ts#22-30
Inspector Components
TheChatInspectorColumn displays several distinct types of operational data:
- Run Details: Visualized via
ChatRunDrawer, showing the “Tape” (event log) and “Lineage” (parent/child runs) apps/web/src/chat/ChatInspectorColumn.tsx#146-155. - Continuity Artifacts: Lists
compactionsandcheckpointsavailable for the session apps/web/src/chat/ChatInspectorColumn.tsx#81-85. - Background Tasks: Monitors
ChatBackgroundTaskRecordstates (running, paused, failed) apps/web/src/chat/ChatInspectorColumn.tsx#87-92.
Implementation Details
Streaming Logic (useChatRunStream)
This hook manages the ConsoleApiClient.streamChatRun connection apps/web/src/chat/useChatRunStream.ts. It handles:
- NDJSON Parsing: Transforming the raw stream into
TranscriptEntryobjects. - Optimistic Updates: Using
appendLocalEntryto show user messages immediately before the server acknowledges them apps/web/src/chat/ChatConsolePanel.tsx#153. - A2UI Integration: Capturing
a2uievents and updating thea2uiDocumentsstate for the renderer apps/web/src/chat/ChatConsolePanel.tsx#142.
Inline Approvals
When a tool requires human-in-the-loop approval, the transcript rendersApprovalRequestControls apps/web/src/chat/ChatTranscript.tsx#190-202.
- Drafting: Operators can modify the
ApprovalScope(once, session, timeboxed) andttl_msbefore deciding apps/web/src/chat/chatShared.tsx#230-245. - Decision: The
decideInlineApprovalfunction sends the final decision back to the daemon’s orchestrator apps/web/src/chat/ChatConsolePanel.tsx#155.