palyrad daemon, monitoring agent execution, and configuring system-wide security and connectivity settings.
Navigation Model
The navigation system uses a grouped rail model defined inapps/web/src/console/navigation.ts. Navigation entries are categorized into five primary groups: Chat, Observability, Control, Agent, and Settings apps/web/src/console/navigation.ts#5-20.
Navigation Architecture
TheConsoleSidebarNav component renders the navigation rail using metadata from CONSOLE_NAV_GROUPS apps/web/src/console/components/layout/ConsoleSidebarNav.tsx#29-30. It utilizes react-router-dom for path-based routing, mapping internal section IDs to URL segments apps/web/src/console/navigation.ts#54-74.
Navigation Logic Flow:
- Metadata Definition:
CONSOLE_SECTIONSdefines the ID, label, and detail for every dashboard area apps/web/src/console/sectionMetadata.ts#1-33. - Path Resolution:
getSectionPath(section)maps IDs likecronto paths like/control/routinesapps/web/src/console/navigation.ts#101-103. - Reverse Lookup:
findSectionByPath(pathname)handles incoming URLs and aliases (e.g.,/controldefaults tooverview) to set the active application state apps/web/src/console/navigation.ts#113-129.
Code Entity Mapping: Navigation
The following diagram bridges the UI navigation concepts to the underlying TypeScript definitions.| UI Group | Internal Group ID | Section IDs |
|---|---|---|
| Chat | chat | chat |
| Observability | control | overview, sessions, usage, logs, inventory, support |
| Control | operations | approvals, cron, channels, browser |
| Agent | agent | agents, skills, memory |
| Settings | settings | auth, access, config, secrets, operations |
Console Sections
TheConsoleSectionContent component acts as a high-level router, switching between React components based on the app.section state apps/web/src/console/ConsoleSectionContent.tsx#26-98.
1. Observability Domain
- Overview: Provides a high-level posture of the deployment, including model provider state and pending approvals apps/web/src/console/sections/OverviewSection.tsx. It aggregates data via
useOverviewDomainapps/web/src/console/hooks/useOverviewDomain.ts#22-79. - Sessions: Managed via
SessionsSection.tsx. It allows searching session history and inspecting run states apps/web/src/console/sections/SessionsSection.tsx#60-63. It usesuseSessionCatalogDomainfor server-side filtering and sorting apps/web/src/console/sections/SessionsSection.tsx#120-155. - Usage: Displays token volume, run throughput, and latency. It includes cost estimates and budget evaluations apps/web/src/console/sections/UsageSection.tsx#41-66.
- Logs: A unified runtime stream across
palyrad,browserd, and external channels apps/web/src/console/sectionMetadata.ts#7-10. - Inventory: Manages connected nodes, devices, and pending pairings apps/web/src/console/sectionMetadata.ts#12-15.
2. Control Domain
- Routines (Cron): Managed via
CronSection.tsx. This section handles scheduled and event-driven automations apps/web/src/console/sections/CronSection.tsx#18-21. It supports natural language schedule previews apps/web/src/console/sections/CronSection.tsx#198-215. - Approvals: A gate for sensitive actions requiring operator confirmation apps/web/src/console/sections/ApprovalsSection.tsx.
- Channels: Configuration for external connectors like Discord and the internal router apps/web/src/console/sections/ChannelsSection.tsx.
- Browser: Management of browser profiles and relay settings for
palyra-browserdapps/web/src/console/sections/BrowserSection.tsx.
3. Agent & Settings Domain
- Memory: Interface for vector search retention and purge operations apps/web/src/console/sectionMetadata.ts#25-25.
- Secrets: Managed via
SecretsSection.tsx. It provides a vault-backed interface for metadata inspection and explicit value “reveal” flows apps/web/src/console/sections/SecretsSection.tsx#63-66. - Config: Allows for the inspection, validation, and mutation of
palyra.tomlapps/web/src/console/hooks/useConfigDomain.ts#40-77. It includes a diff preview for mutations apps/web/src/console/hooks/useConfigDomain.ts#146-148. - Diagnostics: Located under the
OperationsSection, it provides technical snapshots of the runtime, model provider state, and audit events apps/web/src/console/sections/OperationsSection.tsx#67-70.
Data Flow: Section State & API
Dashboard sections are backed by specialized hooks that interact with theConsoleApiClient.
Section Lifecycle Diagram
This diagram illustrates how a section (e.g., Config) transitions from a UI request to a gRPC/HTTP call and back to the state. Sources: apps/web/src/console/hooks/useConfigDomain.ts#118-156, apps/web/src/console/sections/ConfigSection.tsxImplementation Detail: The Overview Aggregator
TheOverview section is unique as it performs a parallel “burst” of requests to populate the dashboard posture using Promise.allSettled apps/web/src/console/hooks/useOverviewDomain.ts#25-33.
| Data Point | API Method | State Variable |
|---|---|---|
| Capabilities | getCapabilityCatalog() | overviewCatalog |
| Deployment | getDeploymentPosture() | overviewDeployment |
| Approvals | listApprovals() | overviewApprovals |
| Diagnostics | getDiagnostics() | overviewDiagnostics |
| Usage | getUsageInsights() | overviewUsageInsights |
Security and Reveal Flows
Sensitive data (secrets, logs, payloads) follows a “Deliberate Reveal” pattern.- Masking by Default: Secrets and sensitive config paths are redacted in the initial state apps/web/src/console/sections/SecretsSection.tsx#72-74.
- Explicit Action: The user must click “Reveal” which triggers
revealSecretValue(key)apps/web/src/console/sections/SecretsSection.tsx#166-167. - Global Toggle: The
revealSensitiveValuesflag inConsoleAppStatecontrols whether revealed values are actually rendered in the UI apps/web/src/console/sections/SecretsSection.tsx#183-184.