Console UI Pages and Routing

Relevant source files

• apps/cloud/src/mcp-session.e2e.node.test.ts
• apps/cloud/src/routeTree.gen.ts
• apps/cloud/src/routes/__root.tsx
• apps/cloud/src/web/shell.tsx
• apps/host-cloudflare/web/routeTree.gen.ts
• apps/host-selfhost/src/setup-status.web.test.ts
• apps/host-selfhost/web/routeTree.gen.ts
• apps/host-selfhost/web/routes/__root.tsx
• apps/host-selfhost/web/routes/app/admin.tsx
• apps/host-selfhost/web/setup-status.ts
• packages/app/src/routeTree.gen.ts
• packages/app/src/routes/__root.tsx
• packages/app/src/web/shell.tsx
• packages/plugins/graphql/src/sdk/presets.ts
• packages/plugins/mcp/src/sdk/presets.ts
• packages/plugins/openapi/src/sdk/presets.ts
• packages/react/src/components/command-palette.tsx
• packages/react/src/components/error-state.tsx
• packages/react/src/components/integration-favicon.test.tsx
• packages/react/src/components/integration-favicon.tsx
• packages/react/src/components/wordmark.tsx
• packages/react/src/console-routes.ts
• packages/react/src/lib/async-result.test.ts
• packages/react/src/lib/async-result.ts
• packages/react/src/lib/document-title.tsx
• packages/react/src/multiplayer/org-slug-gate.tsx
• packages/react/src/multiplayer/shell.tsx
• packages/react/src/pages/api-keys.tsx
• packages/react/src/pages/integration-add.tsx
• packages/react/src/pages/integration-detail.tsx
• packages/react/src/pages/integrations.tsx
• packages/react/src/pages/org.tsx
• packages/react/src/pages/policies.tsx
• packages/react/src/pages/secrets.tsx
• packages/react/src/pages/tools.tsx
• packages/react/src/routes/resume.$executionId.tsx
• packages/react/src/routes/routeTree.gen.ts

The Console UI is a shared React-based dashboard used across all Executor host environments (Cloud, Desktop, Local, Self-Host). It provides a unified interface for managing integrations, configuring security policies, and inspecting the tool catalog. The system leverages TanStack Router for type-safe routing and Effect Atoms for reactive state management.

Shell and Layout Architecture

Host applications embed the console by wrapping their route tree in a Shell. There are two primary shell implementations: the standard Shell for single-user hosts (Desktop/Local) and the SharedShell for multi-tenant environments (Cloud/Self-Host).

Host Embedding Pattern

Hosts define their own __root.tsx which configures global providers (Auth, Analytics, Theme) and mounts the shell.

• Cloud Host: Uses apps/cloud/src/web/shell.tsx to inject cloud-specific slots like the Organization Switcher (OrgMenuSlot) and Billing links into the SharedShell apps/cloud/src/web/shell.tsx21-44
• Desktop/Local Host: Uses packages/app/src/web/shell.tsx which includes a ServerConnectionMenu for managing the connection to the local sidecar packages/app/src/web/shell.tsx168-177

Navigation and Org Scoping

In multi-tenant hosts, routes are prefixed with an optional {-$orgSlug} parameter packages/react/src/multiplayer/shell.tsx41-44 The shell uses useScopeRelativePathname to strip this prefix for active-link highlighting and internal logic packages/react/src/multiplayer/shell.tsx88-96

Console Shell Component Hierarchy

Sources: apps/cloud/src/routes/__root.tsx164-175 packages/react/src/multiplayer/shell.tsx3-55 packages/app/src/web/shell.tsx155-195

Routing and Route Tree

The monorepo uses TanStack Router's file-based routing. Routes are defined in packages/react/src/routes and imported into host-specific routeTree.gen.ts files.

Key Route Patterns

• Integrations: /integrations lists all active tool sources packages/react/src/pages/integrations.tsx70-134
• Integration Detail: /integrations/$namespace provides a deep dive into a specific integration, including its tool tree and account connections packages/react/src/pages/integration-detail.tsx55-152
• Policies: /policies manages the ToolPolicy rules packages/react/src/pages/policies.tsx32-60
• Secrets (Providers): /secrets configures CredentialProvider backends like 1Password or System Keychain packages/react/src/pages/secrets.tsx52-88
• Plugin Pages: Plugins can register custom UI pages at /plugins/$pluginId/$ which are dynamically discovered by the shell packages/app/src/web/shell.tsx59-75

Routing Entity Mapping

UI Route	Code Entity / Component	Data Atom
/	IntegrationsPage	integrationsOptimisticAtom
/integrations/$namespace	IntegrationDetailPage	integrationAtom(slug)
/policies	PoliciesPage	policiesOptimisticAtom
/secrets	SecretsPage	providersAtom
/api-keys	ApiKeysPage	apiKeysAtom

Sources: apps/cloud/src/routeTree.gen.ts44-122 packages/react/src/api/atoms.ts7-23 packages/react/src/pages/api-keys.tsx63-68

Core Console Pages

Integrations and Discovery

The Integrations page handles the lifecycle of connecting new tool sources. It features a "Connect" dialog that supports URL Detection. When a user enters a URL, the system calls detectIntegration to identify if the source is an OpenAPI spec, an MCP server, or a GraphQL endpoint packages/react/src/pages/integrations.tsx171-201

It also provides featured Presets for common services:

• OpenAPI: Stripe, GitHub, Vercel packages/plugins/openapi/src/sdk/presets.ts10-58
• MCP: Browserbase, Firecrawl, Neon packages/plugins/mcp/src/sdk/presets.ts26-106

Integration Detail and Tool Tree

The IntegrationDetailPage is the primary interface for managing a specific source. It uses a Tabs layout to separate Accounts (Connections) and Tools packages/react/src/pages/integration-detail.tsx92-108

• Tool Tree: Renders a hierarchical view of available tools using the ToolTree component, allowing users to inspect schemas and set per-tool policies packages/react/src/pages/integration-detail.tsx25-53
• Handoffs: Supports deep-linking for OAuth registration via IntegrationAccountHandoff packages/react/src/pages/integration-detail.tsx110-145

Policies (Guardrails)

The Policies page manages ToolPolicyAction rules. Rules are evaluated by the Executor Kernel to determine if a tool call should be allow, deny, or require_approval packages/react/src/pages/policies.tsx107-163

• Pattern Matching: Uses matchPattern from the SDK to support wildcards like github.* or *.dns.create packages/react/src/pages/policies.tsx94-95
• Owner Rank: In multi-tenant environments, "Workspace" (org) rules act as the outer guardrail (Rank 0), while "Personal" (user) rules are inner guardrails (Rank 1) packages/react/src/pages/policies.tsx63-66

Providers (Secrets)

Repurposed from the v1 Secrets page, the Providers page manages where credential values are stored packages/react/src/pages/secrets.tsx25-33

• Registered Providers: Lists active backends like encrypted (database), keychain, or onepassword packages/react/src/pages/secrets.tsx35-42
• Plugin Settings: Dynamically renders configuration cards for provider plugins via secretProviderPlugins packages/react/src/pages/secrets.tsx67-87

Data Flow and Reactivity

The UI uses Effect Atoms for state. This ensures that when a host (like the Desktop app) updates the underlying database via the sidecar, the UI reacts immediately.

UI State Data Flow

Sources: packages/react/src/pages/integration-detail.tsx59-68 packages/react/src/pages/integration-detail.tsx75-85 packages/react/src/api/atoms.ts7-23