react-router-dom for navigation apps/web/src/App.tsx#2-49. It transitions between a Boot Screen (initialization), an Auth Screen (identity verification), and the Console Routed Shell (the main operator interface) apps/web/src/App.tsx#11-33.
System Architecture Overview
The following diagram illustrates the relationship between the React frontend, the API client, and the backend daemon. Console UI Architecture Sources: apps/web/src/App.tsx#11-33, apps/web/src/console/useConsoleAppState.tsx#170-215, apps/web/src/consoleApi.ts#1-30.Core State and API Client
The dashboard’s logic is centered around two primary entities:ConsoleApiClient: A specialized fetch wrapper that handles CSRF token management, session persistence, and NDJSON streaming for chat responses apps/web/src/consoleApi.ts#1-23. It enforces “fail-closed” security by requiring a CSRF token for all mutating requests apps/web/src/consoleApi.test.ts#92-106.useConsoleAppState: The root state hook that manages the application lifecycle, including the bootstrap sequence, desktop handoff (automatic login when launched from the Palyra Desktop app), and a TTL-based auto-refresh strategy for different dashboard sections apps/web/src/console/useConsoleAppState.tsx#43-168.
Chat and Session Management
The Chat Interface is the primary interaction point for agent orchestration. It supports multi-session management, session branching (lineage tracking), and real-time streaming of agent runs. The UI provides deep visibility into the agent’s “thought process” through the transcript, including tool calls, memory recalls, and A2UI (Agent-to-UI) protocol updates. For details, see Chat Interface and Session Management.Console Sections and Navigation
The dashboard is divided into specialized sections, each catering to a specific operational domain:| Section | Purpose | Key Code Entities |
|---|---|---|
| Overview | High-level system health and active sessions. | useOverviewDomain |
| Usage | Token volume, latency, and cost tracking. | UsageSection, useUsageDomain |
| Access | Device pairing, mTLS trust, and inventory. | AccessSection, useInventoryDomain |
| Memory | RAG management, workspace notes, and learning. | MemorySection |
| Operations | Diagnostics, audit logs, and self-healing status. | OperationsSection |
| Browser | Browser automation debug and profile management. | BrowserSection, useBrowserDomain |
A2UI: Agent-to-UI Protocol
A2UI is a specialized protocol that allows agents to update the dashboard UI dynamically during a run. Instead of just sending text, agents can sendPatchDocument payloads to render rich components, charts, or interactive forms apps/web/src/consoleApi.ts#1-30. The web dashboard includes a dedicated renderer that applies these JSON patches securely to the local state.
For details, see A2UI: Agent-to-UI Protocol.