> ## Documentation Index > Fetch the complete documentation index at: https://docs-code.palyra.com/llms.txt > Use this file to discover all available pages before exploring further. # Web Console (React)
Relevant source files The following files were used as context for generating this wiki page: * apps/desktop/ui/src/i18n.ts * apps/web/src/App.minimax-auth.test.tsx * apps/web/src/App.openai-auth.test.tsx * apps/web/src/App.test.tsx * apps/web/src/App.tsx * apps/web/src/a2ui/**tests**/renderer.snapshot.test.tsx * apps/web/src/a2ui/normalize.ts * apps/web/src/a2ui/renderer.tsx * apps/web/src/a2ui/sample.ts * apps/web/src/a2ui/types.ts * apps/web/src/chat/ChatComposer.tsx * apps/web/src/chat/ChatConsolePanel.test.tsx * apps/web/src/chat/ChatConsolePanel.tsx * apps/web/src/chat/ChatInspectorColumn.tsx * apps/web/src/chat/ChatRunDrawer.tsx * apps/web/src/chat/ChatSessionsSidebar.tsx * apps/web/src/chat/ChatTranscript.tsx * apps/web/src/chat/chatCommandSuggestions.ts * apps/web/src/chat/chatConsolePanelProps.ts * apps/web/src/chat/chatConsoleUtils.ts * apps/web/src/chat/chatSessionActions.ts * apps/web/src/chat/chatShared.test.ts * apps/web/src/chat/chatShared.tsx * apps/web/src/chat/chatSlashActions.ts * apps/web/src/chat/useChatRunStream.ts * apps/web/src/chat/useChatSessions.ts * apps/web/src/chat/useChatSlashPalette.ts * apps/web/src/console/ConsoleSectionContent.tsx * apps/web/src/console/ConsoleShell.tsx * apps/web/src/console/components/layout/ConsoleAuthScreen.tsx * apps/web/src/console/components/layout/ConsoleSidebarNav.tsx * apps/web/src/console/components/ui/fields.tsx * apps/web/src/console/contracts.test.ts * apps/web/src/console/contracts.ts * apps/web/src/console/hooks/useAuthDomain.ts * apps/web/src/console/hooks/useSessionCatalogDomain.ts * apps/web/src/console/i18n.ts * apps/web/src/console/navigation.ts * apps/web/src/console/providerRegistry.ts * apps/web/src/console/runtimeContracts.test.ts * apps/web/src/console/runtimeContracts.ts * apps/web/src/console/sectionMetadata.ts * apps/web/src/console/sections/ApprovalsSection.tsx * apps/web/src/console/sections/AuthSection.tsx * apps/web/src/console/sections/ConfigSection.tsx * apps/web/src/console/sections/MemorySection.tsx * apps/web/src/console/sections/OperationsSection.tsx * apps/web/src/console/sections/SessionsSection.tsx * apps/web/src/console/sections/UsageSection.tsx * apps/web/src/console/usageInsights.ts * apps/web/src/console/useConsoleAppState.tsx * apps/web/src/consoleApi.minimax.test.ts * apps/web/src/consoleApi.test.ts * apps/web/src/consoleApi.ts * apps/web/src/styles.css * crates/palyra-cli/src/tui/handoff.rs * crates/palyra-cli/src/tui/text.rs * crates/palyra-daemon/src/app/runtime.rs * crates/palyra-daemon/src/app/state.rs * crates/palyra-daemon/src/application/learning.rs * crates/palyra-daemon/src/transport/http/handlers/console/memory.rs * crates/palyra-daemon/src/transport/http/handlers/console/mod.rs * schemas/json/cross\_surface\_handoff.schema.json * schemas/json/ux\_telemetry\_event.schema.json
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 * **CSRF Management**: The client automatically extracts the `csrf_token` from the session response and includes it in the `x-palyra-csrf-token` header for all mutating (POST, PUT, DELETE) requests [apps/web/src/consoleApi.ts#1-23](http://apps/web/src/consoleApi.ts#1-23), [apps/web/src/consoleApi.test.ts#45-91](http://apps/web/src/consoleApi.test.ts#45-91). * **Session Lifecycle**: It handles initial bootstrap via `getSession()` and supports desktop-to-web handoff through `consumeDesktopHandoff(token)` [apps/web/src/console/useConsoleAppState.tsx#85-109](http://apps/web/src/console/useConsoleAppState.tsx#85-109). * **Transport Consistency**: It utilizes the browser's `fetch` API, ensuring that credentials (cookies) are included for authorized requests [apps/web/src/consoleApi.test.ts#16-43](http://apps/web/src/consoleApi.test.ts#16-43). ### API Domain Mapping The client is divided into domain-specific modules: * **Channels**: `listChannels`, `getChannelStatus`, `setChannelEnabled` [apps/web/src/consoleApi.ts#1-23](http://apps/web/src/consoleApi.ts#1-23). * **Memory**: `getMemoryStatus`, `searchWorkspaceDocuments`, `applyLearningCandidate` [apps/web/src/console/sections/MemorySection.tsx#39-112](http://apps/web/src/console/sections/MemorySection.tsx#39-112). * **Auth**: `login`, `logout`, `getSession` [apps/web/src/consoleApi.test.ts#161-186](http://apps/web/src/consoleApi.test.ts#161-186). Sources: [apps/web/src/consoleApi.ts#1-194](http://apps/web/src/consoleApi.ts#1-194), [apps/web/src/console/useConsoleAppState.tsx#85-109](http://apps/web/src/console/useConsoleAppState.tsx#85-109), [apps/web/src/consoleApi.test.ts#15-186](http://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](http://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" ```mermaid theme={null} graph TD subgraph "UI Layer" View["ConsoleSectionContent"] Side["ConsoleSidebarNav"] end subgraph "State Layer (useConsoleAppState)" State["ConsoleAppState"] Auth["useAuthDomain"] Mem["useMemoryDomain"] Ops["useOverviewDomain"] end subgraph "Transport Layer" Client["ConsoleApiClient"] end subgraph "Backend (palyrad)" Router["Axum Router"] Handlers["Console Handlers"] end View --> State State --> Auth State --> Mem State --> Ops Auth & Mem & Ops --> Client Client -- "HTTP/JSON + CSRF" --> Router Router --> Handlers ``` Sources: [apps/web/src/console/useConsoleAppState.tsx#1-208](http://apps/web/src/console/useConsoleAppState.tsx#1-208), [apps/web/src/console/sectionMetadata.ts#1-50](http://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. * **Workspace Management**: Allows users to view, edit, and pin documents in the agent's workspace [apps/web/src/console/sections/MemorySection.tsx#143-165](http://apps/web/src/console/sections/MemorySection.tsx#143-165). * **Learning Curator**: Displays candidates mined from post-run reflections (Durable Facts, Preferences, Procedures) [crates/palyra-daemon/src/application/learning.rs#1-17](http://crates/palyra-daemon/src/application/learning.rs#1-17). * **Recall Preview**: A diagnostic tool to test the RAG (Retrieval-Augmented Generation) pipeline, showing scores for memory hits, workspace hits, and transcript hits [apps/web/src/console/sections/MemorySection.tsx#166-190](http://apps/web/src/console/sections/MemorySection.tsx#166-190). ### Operations & Diagnostics Monitors the internal health of the daemon: * **Audit Log**: A tamper-evident stream of system events [apps/web/src/console/sections/OperationsSection.tsx#41-47](http://apps/web/src/console/sections/OperationsSection.tsx#41-47). * **Runtime Preview**: Real-time metrics on resource budgets and guardrail evaluations [apps/web/src/console/sections/OperationsSection.tsx#96-105](http://apps/web/src/console/sections/OperationsSection.tsx#96-105). * **Networked Workers**: Status of the distributed execution fleet and attestation states [apps/web/src/console/sections/OperationsSection.tsx#79-83](http://apps/web/src/console/sections/OperationsSection.tsx#79-83). ### 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](http://apps/web/src/chat/chatShared.tsx#155-221). Sources: [apps/web/src/console/sections/MemorySection.tsx#1-192](http://apps/web/src/console/sections/MemorySection.tsx#1-192), [apps/web/src/console/sections/OperationsSection.tsx#37-145](http://apps/web/src/console/sections/OperationsSection.tsx#37-145), [crates/palyra-daemon/src/transport/http/handlers/console/memory.rs#70-155](http://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](http://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](http://apps/web/src/chat/chatShared.tsx#68-80). "Chat Run Stream Entity Mapping" ```mermaid theme={null} graph LR subgraph "Code Entities (apps/web/src/chat)" Panel["ChatConsolePanel"] StreamHook["useChatRunStream"] Transcript["ChatTranscript"] end subgraph "Protocol Entities (NDJSON Stream)" T_Batch["AssistantTokenBatch"] S_Update["RunStatusUpdate"] A_Req["ApprovalRequest"] end Panel --> StreamHook StreamHook -- "Parses" --> T_Batch StreamHook -- "Parses" --> S_Update StreamHook -- "Parses" --> A_Req StreamHook -- "Updates" --> Transcript ``` Sources: [apps/web/src/chat/ChatConsolePanel.tsx#83-155](http://apps/web/src/chat/ChatConsolePanel.tsx#83-155), [apps/web/src/chat/useChatRunStream.ts#1-50](http://apps/web/src/chat/useChatRunStream.ts#1-50), [apps/web/src/chat/chatShared.tsx#84-126](http://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](http://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](http://apps/web/src/a2ui/renderer.tsx#1-100), [apps/web/src/chat/chatShared.tsx#90-104](http://apps/web/src/chat/chatShared.tsx#90-104).