Architecture and Data Flow
The chat system is built around theChatConsolePanel which orchestrates several specialized hooks and components to maintain a high-fidelity view of the agent’s state.
Component Hierarchy
- ChatConsolePanel: The root container managing session switching and high-level state apps/web/src/chat/ChatConsolePanel.tsx#70-75.
- ChatComposer: Handles user input, slash commands, and attachment staging apps/web/src/chat/ChatComposer.tsx#53-84.
- ChatTranscript: Renders the history of events (user, assistant, tool, etc.) for the active session apps/web/src/chat/ChatTranscript.tsx#27-42.
- ChatInspectorColumn: A side panel for deep-dive inspection of tool payloads, run lineage, and background tasks apps/web/src/chat/ChatInspectorColumn.tsx#96-141.
State Orchestration
The system usesuseChatRunStream to handle NDJSON streaming from the daemon’s GatewayService. This hook manages the “live” transcript and active run state apps/web/src/chat/ChatConsolePanel.tsx#147-153. Session-level metadata and history are managed by useChatSessions apps/web/src/chat/ChatConsolePanel.tsx#110-115.
ChatComposer and Input Management
TheChatComposer is a sophisticated input area supporting rich context preparation before a message is dispatched to the LLM.
Slash Commands
The composer implements a “Slash Command” system for operational shortcuts. Commands are parsed usingparseSlashCommand apps/web/src/chat/chatShared.tsx#165-168.
| Command | Action |
|---|---|
/new | Creates a fresh session apps/web/src/chat/chatShared.tsx#84-88 |
/branch | Creates a child session from the current run apps/web/src/chat/chatShared.tsx#102-106 |
/queue | Appends a follow-up message without interrupting the current run apps/web/src/chat/chatShared.tsx#108-112 |
/compact | Triggers transcript compaction to reduce context window usage apps/web/src/chat/chatShared.tsx#145-150 |
Context Budget and Previews
To prevent context window overflow, the composer calculates aContextBudgetSummary apps/web/src/chat/chatShared.tsx#54-65.
- Recall Preview: Uses
useRecallPreviewto show what memory or workspace hits will be injected apps/web/src/chat/ChatConsolePanel.tsx#59. - Reference Preview: Uses
useContextReferencePreviewto resolve@or&references to files or entities before sending apps/web/src/chat/ChatConsolePanel.tsx#58.
Drag-and-Drop Attachments
Files dropped into the composer are processed viauploadComposerAttachments. This converts files to base64 and registers them with the daemon’s MediaArtifactStore apps/web/src/chat/chatConsoleUtils.ts#164-186.
ChatTranscript and Entry Kinds
The transcript renders a list ofTranscriptEntry objects. To keep the UI performant, it limits rendered items to the latest 120 entries apps/web/src/chat/ChatTranscript.tsx#46-51.
Entry Types
The system supports multipleTranscriptEntryKind values apps/web/src/chat/chatShared.tsx#171-184:
assistant: Standard text output from the model.tool: Execution logs for plugin calls.approval_request: Interactive UI for authorizing sensitive operations.a2ui/canvas: Protocol-specific frames for rich UI rendering.
Tool Payload Inspection
Large tool payloads are moved out of the main transcript flow to avoid clutter. Users click “Inspect payload” to view the raw JSON in theChatInspectorColumn apps/web/src/chat/ChatTranscript.test.tsx#93-117.
Approval Request Controls
When a tool is marked as sensitive, the daemon emits anapproval_request. The console renders ApprovalRequestControls inline within the transcript apps/web/src/chat/ChatTranscript.tsx#17-18.
- Scope: Approvals can be granted for “once”, “session”, or “timeboxed” (default 5 minutes) apps/web/src/chat/chatShared.tsx#20-21.
- Decision Flow: The
decideInlineApprovalfunction sends the decision (approve/deny) back to theGatewayServiceto resume or abort the tool flow apps/web/src/chat/ChatConsolePanel.tsx#145.
Rich Rendering: A2UI and Canvas
Palyra supports two methods for agents to render complex UIs:A2UI (Agent-to-UI)
TheA2uiRenderer processes specialized documents published by plugins. It supports incremental updates and security-sandboxed rendering apps/web/src/chat/ChatTranscript.tsx#2.
Canvas Rendering
Thecanvas entry kind renders an <iframe> pointing to /canvas/v1/frame/.... These frames are strictly sandboxed with sandbox="allow-scripts" to prevent cross-site scripting from agent-generated content apps/web/src/chat/ChatTranscript.test.tsx#202-205.
System Interaction Diagram
The following diagram illustrates how user actions in the Web Console transition into the daemon’s internal state. Title: Chat Interaction Flow Sources: apps/web/src/chat/ChatComposer.tsx#124-130, apps/web/src/chat/useChatRunStream.ts#147-153, apps/web/src/chat/ChatTranscript.tsx#160-165.Data Mapping: UI to Code Entities
This diagram maps the visual components of the Chat Interface to the underlying TypeScript interfaces and Rust models. Title: Chat Entity Mapping Sources: apps/web/src/chat/chatShared.tsx#38-52, apps/web/src/chat/chatShared.tsx#186-203, apps/web/src/chat/ChatInspectorColumn.tsx#38-44, apps/web/src/chat/chatConsoleUtils.ts#32-39.Transcript Tools and Recall Preview
TheChatInspectorColumn provides utility for managing long-running sessions:
- Recall Preview: Before sending a message, the UI calls
previewMemoryRecallto show which documents from theMemoryStorewill be used as context apps/web/src/console/sections/MemorySection.tsx#64. - Compaction: Users can trigger
/compactwhich callsrunCompactionFlowAction. This summarizes older parts of the transcript and marks them as “compacted” in theJournalStoreto save tokens apps/web/src/chat/ChatConsolePanel.tsx#23. - Checkpoints: The
ChatCheckpointRecordallows users to view and restore the session to a specific point in time apps/web/src/chat/ChatConsolePanel.tsx#94.
apps/web/src/chat/ChatConsolePanel.tsxapps/web/src/chat/chatShared.tsxapps/web/src/chat/ChatComposer.tsxapps/web/src/chat/ChatTranscript.tsxapps/web/src/chat/ChatInspectorColumn.tsxapps/web/src/chat/chatConsoleUtils.tsapps/web/src/chat/chatSessionActions.tsapps/web/src/chat/useChatRunStream.ts