Skip to main content
The Palyra Web Console is a React-based Single Page Application (SPA) that serves as the primary administrative and operational interface for the Palyra daemon. It provides real-time monitoring, session management, tool approval workflows, and deep visibility into the agent’s memory and learning subsystems.

ConsoleApiClient

The ConsoleApiClient is the central gateway for all frontend-to-backend communication. It encapsulates the HTTP transport layer, managing authentication states, CSRF tokens, and request/response normalization.

Implementation Details

API Domain Mapping

The client is divided into domain-specific modules: Sources: apps/web/src/consoleApi.ts#1-194, apps/web/src/console/useConsoleAppState.tsx#85-109, apps/web/src/consoleApi.test.ts#15-186.

useConsoleAppState Domain Architecture

The useConsoleAppState hook acts as the “Brain” of the frontend, managing the global state and orchestrating data flow between the UI components and the ConsoleApiClient.

State Management

It maintains the active session, the current section, and manages a registry of “Domain Hooks” that handle specific functional areas:
  • useOverviewDomain: High-level system health and usage metrics.
  • useSkillsDomain: Plugin management and tool definitions.
  • useConfigDomain: Daemon configuration and model provider settings.
  • useAuthDomain: User identity and session persistence.

Auto-Refresh Logic

The console implements a TTL-based auto-refresh mechanism for background data. Different sections have varying refresh intervals defined in AUTO_REFRESH_SECTION_TTL_MS (e.g., overview refreshes every 10s, while channels refreshes every 8s) apps/web/src/console/useConsoleAppState.tsx#56-83.

Data Flow Diagram

This diagram shows how the useConsoleAppState bridges the UI to the Backend via the ConsoleApiClient. “Web Console Data Flow” Sources: apps/web/src/console/useConsoleAppState.tsx#1-208, apps/web/src/console/sectionMetadata.ts#1-50.

Console Sections

The console is organized into functional sections, each mapped to specific routes and handlers in the daemon.

Memory & Learning Section

This section provides a UI for the application::learning pipeline.

Operations & Diagnostics

Monitors the internal health of the daemon:

Approvals

The safety gate for tool execution. When an agent proposes a tool call that violates a “AskEachTime” policy, it appears here. Users can approve for a single instance, for the whole session, or for a specific TTL apps/web/src/chat/chatShared.tsx#155-221. Sources: apps/web/src/console/sections/MemorySection.tsx#1-192, apps/web/src/console/sections/OperationsSection.tsx#37-145, crates/palyra-daemon/src/transport/http/handlers/console/memory.rs#70-155.

Chat Panel and Run Stream

The ChatConsolePanel is the primary interactive surface. It implements a reactive stream to handle real-time agent updates.

useChatRunStream

This hook manages the Server-Sent Events (SSE) or NDJSON stream from the daemon. It processes ChatStreamLine objects, which include:
  • Token Increments: Real-time text generation updates.
  • Status Updates: Changes in the agent’s internal state (e.g., “Thinking”, “Calling Tool”).
  • Tool Proposals: Requests for user approval or tool execution results.

Chat Composer & Slash Commands

The composer supports a rich set of slash commands (e.g., /branch, /queue, /reset) defined in the CHAT_SLASH_COMMANDS registry apps/web/src/chat/ChatConsolePanel.test.tsx#25-65. It also includes a context budget indicator that warns users when the prompt context is approaching the model’s limits apps/web/src/chat/chatShared.tsx#68-80. “Chat Run Stream Entity Mapping” Sources: apps/web/src/chat/ChatConsolePanel.tsx#83-155, apps/web/src/chat/useChatRunStream.ts#1-50, apps/web/src/chat/chatShared.tsx#84-126.

A2UI Renderer

A2UI (Agent-to-UI) is a protocol for agents to render rich, interactive components directly in the chat transcript.
  • Implementation: The A2UIRenderer component intercepts specific transcript entry kinds and renders them using a library of pre-defined React components apps/web/src/chat/chatShared.tsx#90-104.
  • Data Flow: The agent sends a JSON payload describing the UI state; the renderer maps this to components like charts, forms, or interactive maps.
  • Isolation: A2UI components are typically scoped to the run that created them and can interact with the session via specialized tool calls (e.g., updating their own state).
Sources: apps/web/src/a2ui/renderer.tsx#1-100, apps/web/src/chat/chatShared.tsx#90-104.