Skip to main content
The Web Console is the primary React-based operator interface for Palyra. It provides a centralized dashboard for managing the palyrad daemon, interacting with agents via a rich chat interface, monitoring system health, and configuring security policies. It communicates with the daemon’s HTTP surface via the ConsoleApiClient, using a session-based authentication model that supports both direct login and seamless handoff from the Desktop Application.

​
Architecture Overview

The application is built using React and Vite, structured around a central state management hook and a routed shell that dynamically renders sections based on the operator’s navigation.

​
Code-to-System Mapping: UI Entry Points

The following diagram maps the high-level UI concepts to their corresponding code entities within apps/web. Sources: apps/web/src/App.tsx#11-33, apps/web/src/console/ConsoleSectionContent.tsx#26-98, apps/web/src/console/components/layout/ConsoleSidebarNav.tsx#12-74

​
Data Flow and State Management

The console’s logic is centralized in useConsoleAppState, which orchestrates authentication, session bootstrapping, and domain-specific state (e.g., channels, cron jobs, approvals). Sources: apps/web/src/console/useConsoleAppState.tsx#163-220, apps/web/src/consoleApi.ts#1-42

​
Core Components

​
Console API Client

The ConsoleApiClient is the sole provider for communicating with the backend. It enforces security requirements such as CSRF token inclusion for mutating requests (POST/PUT/DELETE) while allowing anonymous access for initial session bootstrapping. It supports standard JSON REST patterns and NDJSON (Newline Delimited JSON) streaming for real-time chat transcripts. For details, see Console API Client and State Management. Sources: apps/web/src/consoleApi.ts#1-42, apps/web/src/consoleApi.test.ts#44-90

​
App State and Bootstrapping

The application follows a strict bootstrapping sequence:
  1. Session Recovery: The app attempts to fetch an existing session via api.getSession() with exponential backoff apps/web/src/console/useConsoleAppState.tsx#91-106.
  2. Desktop Handoff: If a desktop_handoff_token is present in the URL, it attempts to exchange it for a session apps/web/src/console/useConsoleAppState.tsx#108-122.
  3. Auth Fallback: If no session is found, the user is redirected to the ConsoleAuthScreen apps/web/src/App.tsx#20-30.
  4. TTL Refresh: Once authenticated, sections like overview or channels are automatically refreshed based on defined Time-To-Live (TTL) values apps/web/src/console/useConsoleAppState.tsx#41-53.
The console is divided into “Sections,” defined in sectionMetadata.ts. These are grouped into five primary domains:
  • Chat: The primary agent interaction workspace.
  • Observability: Overview, Sessions, Usage, Logs, Inventory, and Support.
  • Control: Approvals, Routines (Cron), Channels, and Browser.
  • Agent: Agent Registry, Skills, and Memory management.
  • Settings: Profiles, Access, Config, and Secrets.
For details, see Console Sections and Navigation. Sources: apps/web/src/console/sectionMetadata.ts#1-33, apps/web/src/console/navigation.ts#26-52

​
Chat Interface

The ChatConsolePanel is the most complex section, providing a real-time transcript of agent actions, tool executions, and multi-modal outputs. It handles “A2UI” (Agent-to-UI) rendering, allowing agents to present interactive “Canvas” elements directly in the chat. For details, see Chat Interface and Transcript. Sources: apps/web/src/console/ConsoleSectionContent.tsx#30-38

​
Domain Summary Table

DomainKey SectionsPurpose
Observabilityoverview, logs, usageHigh-level health, token consumption, and unified log streams.
Controlapprovals, cron, channelsHuman-in-the-loop gates, scheduled tasks, and platform connectors.
Agentagents, skills, memoryManaging agent identities, WASM skill trust, and long-term memory.
Settingsconfig, secrets, accessMutating palyra.toml, managing the vault, and device pairing.
Sources: apps/web/src/console/sectionMetadata.ts#1-33, apps/web/src/console/navigation.ts#54-74

​
Child Pages