palyrad daemon via the Console API.
High-Level Architecture
The dashboard is built using React and Vite apps/web/vite.config.ts#19-20. It utilizes a centralized state management pattern via a custom hook that orchestrates several domain-specific hooks (Auth, Browser, Config, etc.). Sources: apps/web/src/App.tsx#11-33, apps/web/src/console/useConsoleAppState.tsx#164-165, apps/web/src/console/ConsoleRoutedShell.tsxAuthentication and Session Lifecycle
The dashboard implements a multi-stage boot process to ensure secure access. It supports standard token-based login and a specialized “desktop handoff” mechanism for seamless transition from the Palyra Desktop companion app.- Bootstrapping: Upon loading, the app attempts to retrieve an existing session. If a
401,403, or429error occurs, it performs exponential backoff retries before showing the login screen apps/web/src/console/useConsoleAppState.tsx#88-107. - Desktop Handoff: If a
desktop_handoff_tokenis present in the URL, the client attempts to exchange it for a session before falling back to standard bootstrap apps/web/src/console/useConsoleAppState.tsx#109-123. - CSRF Protection: The
ConsoleApiClientmanagesx-palyra-csrf-tokenheaders, which are required for all mutating (POST/PUT/DELETE) requests apps/web/src/consoleApi.test.ts#44-90.
State Management and API Integration
The dashboard uses a “Domain Hook” pattern whereuseConsoleAppState aggregates state from various features like useChannelCoreState, useBrowserDomain, and useOverviewDomain apps/web/src/console/useConsoleAppState.tsx#17-25.
| Component | Responsibility |
|---|---|
ConsoleApiClient | Low-level fetch wrapper handling CSRF, NDJSON streaming, and error normalization apps/web/src/consoleApi.ts. |
useConsoleAppState | Centralized orchestrator for UI state, notifications, and section routing apps/web/src/console/useConsoleAppState.tsx#164. |
| Auto-Refresh Engine | A TTL-based logic that triggers data refreshes based on the active section (e.g., 10s for Overview) apps/web/src/console/useConsoleAppState.tsx#42-54. |
Chat and Agent Interaction
The core of the operator experience is the Chat Console. This section facilitates real-time communication with agents, including:- Slash Commands: Built-in commands for context management and tool invocation.
- Human-in-the-Loop: Approval blocks that pause agent execution until an operator grants permission.
- Memory Management: UI for inspecting and managing the RAG (Retrieval-Augmented Generation) vector store.
Dynamic UI (A2UI)
Palyra features a specialized protocol called A2UI (Agent-to-UI). This allows agents to push structured JSON payloads that the dashboard renders as interactive UI components (forms, tables, charts) within the chat transcript.- Security: The renderer includes strict sanitization to prevent XSS from agent-generated content apps/web/src/a2ui/tests/renderer.security.test.tsx#7-71.
- Patching: Supports JSON Patch for efficient, incremental updates to UI surfaces apps/web/src/a2ui/tests/patch.fuzz.test.tsx#25-48.
Management Sections
Beyond chat, the dashboard provides several administrative and operational views:- Operations: Management of background runs and task queues.
- Inventory: Browsing and configuring Agents, Skills, and Secrets.
- Browser: Integrated view for agent-driven browser automation sessions.
- Usage: Token tracking, cost estimation, and rate limit monitoring apps/web/src/consoleApi.ts#124-162.