palyrad daemon via the ConsoleApiClient, utilizing a specialized control plane API that supports both standard RESTful interactions and NDJSON-based streaming for real-time agent feedback.
System Architecture
The console is built using a “shell and section” architecture. TheConsoleRoutedShell manages the global layout, including the ConsoleSidebarNav, while the ConsoleSectionContent component dynamically switches between different functional modules based on the active route.
High-Level Component Relationship
The following diagram maps the logical components of the dashboard to their corresponding code entities. Sources:- apps/web/src/App.tsx#11-33
- apps/web/src/console/useConsoleAppState.tsx#163-220
- apps/web/src/console/ConsoleSectionContent.tsx#26-98
- apps/web/src/console/ConsoleRoutedShell.tsx#4-32
Core State and Authentication
Global application state is managed by theuseConsoleAppState hook. This hook handles:
- Authentication Lifecycle: Managing the
ConsoleSession, including bootstrap retries and desktop handoff tokens apps/web/src/console/useConsoleAppState.tsx#87-122. - Section Navigation: Tracking the active
Sectionand managing auto-refresh intervals apps/web/src/console/useConsoleAppState.tsx#41-53. - Domain Logic: Initializing sub-states for features like Channels, Auth, and Support apps/web/src/console/useConsoleAppState.tsx#211-224.
Authentication Flow
The console supports multiple entry points, including a direct login via admin token and a “browser handoff” mechanism where the Desktop Application (Tauri) transfers a session to the web browser. Sources:Console Sections
The dashboard is organized into five primary navigation groups, defined insectionMetadata.ts and navigation.ts.
| Group | Purpose | Key Sections |
|---|---|---|
| Chat | Real-time agent interaction | chat |
| Observability | Monitoring and logs | overview, sessions, usage, logs |
| Control | Human-in-the-loop and automation | approvals, cron, channels, browser |
| Agent | Capability management | agents, skills, memory |
| Settings | System configuration | auth, access, config, secrets |
Chat Workspace
TheChatConsolePanel is the most complex component in the console, providing a “workspace” for interacting with agents. It leverages useChatRunStream to manage the real-time flow of RunStream events from the daemon.
Key Workspace Features:
- ChatComposer: Supports slash commands (e.g.,
/queue), context budget visualization, and drag-and-drop file attachments apps/web/src/chat/ChatComposer.tsx#124-142. - ChatTranscript: Renders the conversation history, including
approval_requestentries for human-in-the-loop actions anda2ui(Agent-to-User Interface) frames apps/web/src/chat/ChatTranscript.tsx#150-185. - Inspector Side Panel: Provides deep-dive views into tool payloads, background tasks, and derived artifacts apps/web/src/chat/ChatConsolePanel.tsx#173-178.
- apps/web/src/chat/ChatConsolePanel.tsx#70-153
- apps/web/src/chat/ChatComposer.tsx#53-84
- apps/web/src/chat/ChatTranscript.tsx#27-42
API and Control Plane
TheConsoleApiClient (defined in consoleApi.ts) is the TypeScript implementation of the Palyra Control Plane. It handles:
- CSRF Protection: Automatically injecting
x-palyra-csrf-tokenheaders into mutating (POST/PUT/DELETE) requests apps/web/src/consoleApi.test.ts#44-90. - Streaming: Consuming NDJSON streams for chat messages and system logs.
- Error Handling: Wrapping API failures in
ControlPlaneApiErrorfor consistent UI error reporting apps/web/src/consoleApi.test.ts#3-8.
Child Pages
- Chat Workspace — Deep dive into the
ChatConsolePanel,useChatRunStream, and the media/derived-artifact pipeline. - Console Sections and Navigation — Documents the section architecture,
ConsoleSidebarNav, and individual management views. - A2UI (Agent-to-User Interface) Renderer — Documents the
a2uisubsystem, JSON patch protocol, and sandboxed rendering. - ConsoleApiClient and Control Plane — Documents the
ConsoleApiClientlifecycle, CSRF management, and the RustControlPlaneClient.