Skip to main content
The Palyra Web Console is a React-based single-page application (SPA) that provides a comprehensive operator interface for managing the Palyra daemon. It serves as the primary dashboard for observability, agent configuration, and real-time interaction through a web-based chat interface. The console is organized into functional “domains” that group related operational tasks, such as monitoring system health, managing human-in-the-loop approvals, and configuring channel connectors like Discord.

​
System Architecture

The web application follows a standard React architecture using TypeScript, leveraging a centralized state hook (useConsoleAppState) and a specialized API client (ConsoleApiClient) for communicating with the daemon’s HTTP surface.

​
Web Console Component Relationship

Sources: apps/web/src/App.tsx#11-33, apps/web/src/console/useConsoleAppState.tsx#165-220, apps/web/src/console/ConsoleSectionContent.tsx#26-108, crates/palyra-daemon/src/transport/http/handlers/console/mod.rs#1-30

​
Core Components

ComponentResponsibilityLocation
ConsoleApiClientLow-level HTTP transport, CSRF handling, and NDJSON stream parsing.apps/web/src/consoleApi.ts
useConsoleAppStateCentralized state management, domain logic, and auto-refresh orchestration.apps/web/src/console/useConsoleAppState.tsx
ConsoleRoutedShellThe main layout wrapper providing the sidebar and navigation context.apps/web/src/console/ConsoleRoutedShell.tsx
ConsoleSectionContentA switch-based router that renders specific sections based on the current path.apps/web/src/console/ConsoleSectionContent.tsx
Sources: apps/web/src/console/useConsoleAppState.tsx#165-220, apps/web/src/console/ConsoleSectionContent.tsx#26-108

​
Authentication and Boot Sequence

The console implements a robust boot sequence to ensure the operator is authenticated before accessing privileged data. It supports standard session-based login and a specialized “desktop handoff” mechanism for seamless transition from the Palyra Desktop app.
  1. Booting State: The App component initially renders ConsoleBootScreen while useConsoleAppState attempts to retrieve a valid session apps/web/src/App.tsx#16-18.
  2. Handoff Check: The system checks for a desktop_handoff_token in the URL query parameters to automatically authenticate users coming from the desktop supervisor apps/web/src/console/useConsoleAppState.tsx#110-124.
  3. Session Validation: If no handoff occurs, it calls api.getSession() to check for existing cookies apps/web/src/console/useConsoleAppState.tsx#89-108.
  4. Auth Fallback: If unauthenticated, the user is redirected to ConsoleAuthScreen apps/web/src/App.tsx#20-30.
For details on CSRF protection and session management, see Console API Client and State Management. The console organizes its features into five primary navigation groups, defined in CONSOLE_NAV_GROUPS apps/web/src/console/navigation.ts#26-52.
GroupSectionsPurpose
ChatchatReal-time agent interaction and session management.
Observabilityoverview, sessions, usage, logs, inventory, supportSystem health, token usage, and runtime logs.
Controlapprovals, cron, channels, browserHuman-in-the-loop gates and automation scheduling.
Agentagents, skills, memoryConfiguring agent personas, tools, and long-term memory.
Settingsauth, access, config, secrets, operationsIdentity providers, vault management, and system config.
Sources: apps/web/src/console/sectionMetadata.ts#1-33, apps/web/src/console/navigation.ts#79-99

​
Section Auto-Refresh

To maintain high observability without manual page reloads, the console implements a TTL-based auto-refresh mechanism. Each section has a defined AUTO_REFRESH_SECTION_TTL_MS (e.g., 10 seconds for the overview) apps/web/src/console/useConsoleAppState.tsx#43-55. The shouldAutoRefreshSection function determines if a domain’s data is stale and triggers a background fetch via the corresponding domain hook apps/web/src/console/useConsoleAppState.tsx#63-73.

​
Child Pages

Sources: apps/web/src/console/useConsoleAppState.tsx#43-73, apps/web/src/console/sectionMetadata.ts#1-33

​
Child Pages