useConsoleAppState hook, which orchestrates data fetching, auto-refresh logic, and domain-specific sub-hooks.
useConsoleAppState & Global State
TheuseConsoleAppState hook serves as the primary state container for the console application. It initializes the ConsoleApiClient and manages the lifecycle of the user session, theme, and navigation state.
Implementation Details
- API Client: A single instance of
ConsoleApiClientis memoized and shared across all sections apps/web/src/console/useConsoleAppState.tsx#165-165. - Bootstrapping: The hook handles initial session loading with retry logic for transient errors (401, 403, 429) apps/web/src/console/useConsoleAppState.tsx#74-107.
- Desktop Handoff: It detects
desktop_handoff_tokenin the URL to transition from a desktop-initiated flow to a browser session apps/web/src/console/useConsoleAppState.tsx#109-123. - Navigation: Section state is managed via the
sectionvariable, defaulting tooverviewapps/web/src/console/useConsoleAppState.tsx#170-170.
Auto-Refresh Mechanism
Sections implement a TTL-based auto-refresh strategy to keep the UI synchronized with the daemon without overloading the network.| Section | TTL (ms) | Source |
|---|---|---|
| Overview | 10,000 | apps/web/src/console/useConsoleAppState.tsx#43-43 |
| Channels | 8,000 | apps/web/src/console/useConsoleAppState.tsx#45-45 |
| Config / Secrets | 15,000 | apps/web/src/console/useConsoleAppState.tsx#49-50 |
| Memory / Skills | 10,000 | apps/web/src/console/useConsoleAppState.tsx#47-48 |
shouldAutoRefreshSection calculates if a refresh is due based on lastSectionAutoRefreshRef apps/web/src/console/useConsoleAppState.tsx#62-72.
Sources: apps/web/src/console/useConsoleAppState.tsx#1-171
Section-Based Navigation
Navigation is driven by theSection type definition and rendered via the ConsoleSidebarNav and ConsoleSectionContent components.
Navigation Components
- ConsoleSidebarNav: Renders the sidebar using
CONSOLE_NAV_GROUPSdefined innavigation.tsapps/web/src/console/components/layout/ConsoleSidebarNav.tsx#30-34. - ConsoleSectionContent: A large switch statement that maps the current
sectionstate to its corresponding React component apps/web/src/console/ConsoleSectionContent.tsx#26-107.
UI-to-Code Mapping: Sidebar Navigation
The following diagram maps the visual navigation elements to their internalSection identifiers and implementing components.
“Navigation Structure”
Sources: apps/web/src/console/components/layout/ConsoleSidebarNav.tsx#12-74, apps/web/src/console/ConsoleSectionContent.tsx#26-107
Domain Hooks & Data Flow
To preventuseConsoleAppState from becoming unmaintainable, logic is delegated to “Domain Hooks.” These hooks encapsulate API calls and state transformations for specific subsystems.
Key Domain Hooks
- useUsageDomain: Aggregates token volume, run throughput, and cost estimates. It pushes time filters (24h, 7d, etc.) to the backend apps/web/src/console/sections/UsageSection.tsx#36-59.
- useBrowserDomain: Manages browser profile lifecycles, active sessions, and the browser extension relay apps/web/src/console/sections/BrowserSection.tsx#14-102.
- useConfigDomain: Handles the
config.mutate,config.migrate, andconfig.recoverflows apps/web/src/console/sections/ConfigSection.tsx#8-95. - useOverviewDomain: Provides a high-level summary of deployment posture, pending approvals, and failed jobs apps/web/src/console/sections/OverviewSection.tsx#47-61.
Data Flow Diagram: Memory Section
The Memory section exemplifies the interaction between the global state, domain hooks, and the backend API. “Memory Section Data Flow” Sources: apps/web/src/console/sections/MemorySection.tsx#104-182, apps/web/src/console/useConsoleAppState.tsx#212-250Core Sections Detail
Overview & Diagnostics
The Overview provides a “Single Pane of Glass” for the daemon. It usesbuildAttentionItems to calculate counts for warnings, pending approvals, and degraded connectors apps/web/src/console/sections/OverviewSection.tsx#146-154.
The Operations (Diagnostics) section provides technical depth, surfacing doctor --json exports, audit events, and self-healing incident logs apps/web/src/console/sections/OperationsSection.tsx#78-93.
Memory & Learning
The Memory section manages three tiers of storage:- Session Memory: Raw hits from chat history apps/web/src/console/sections/MemorySection.tsx#141-141.
- Workspace: Curated markdown documents and notes apps/web/src/console/sections/MemorySection.tsx#110-110.
- Learning Queue: Autonomous facts and procedures extracted by the reflection pipeline apps/web/src/console/sections/MemorySection.tsx#155-157.
Automations (Cron)
The Cron section managesRoutine records. It supports:
- Trigger Kinds:
schedule(cron expressions) ormanualapps/web/src/console/sections/CronSection.tsx#116-116. - Templates: Bootstrapping routines from pre-defined system templates apps/web/src/console/sections/CronSection.tsx#183-192.
- Objectives: Linking routines to high-level goals like “Heartbeats” or “Standing Orders” apps/web/src/console/sections/CronSection.tsx#139-142.
Config & Secrets
The console implements a “redacted-first” configuration UI.- Config: Allows mutating TOML keys without direct file access apps/web/src/console/sections/ConfigSection.tsx#94-95.
- Secrets: Manages global and workspace-scoped secrets. Sensitive values are masked by default unless
revealSensitiveValuesis toggled apps/web/src/console/sections/SecretsSection.tsx#96-97, apps/web/src/App.config-access-support.test.tsx#137-142.