Agent Page
AgentTabsPage (from @agent-native/core/client, source
packages/core/src/client/agent-page/) is the canonical full-page surface for
everything that can influence the agent. Design principles:
- The page answers "what can influence this agent, and why" — it is not a
generic admin console.
- Capability and access stay separate: Connections is what this agent can
reach; Access is who can reach this agent.
- It is a thin shell that re-hosts existing components (ResourcesPanel, MCP
hooks, AgentsSection, context X-Ray, jobs actions) — do not re-implement
those surfaces inside it.
- Context must be inspectable, attributable, and governable — provenance and
governance tiers, not just a token meter.
Tabs
| Tab |
Contents |
context |
System-vs-conversation split meter, provenance-grouped system sections (governance tiers: required/inherited/user), live-thread manifest. Backed by context-preview-get / context-manifest-get (see context-xray skill). |
files |
ResourcesPanel (skills, instructions, memory, uploads) with the virtual mcp-servers/ folder hidden (showMcpServers={false}). |
connections |
MCP server management (both scopes, admin-gated org writes) plus A2A remote agents this app can call. |
jobs |
Automations: personal and organization Scheduled/Event tasks with pause/resume/delete. The jobs hash is stable for compatibility (see automations and recurring-jobs). |
access |
Copyable MCP URL and A2A agent-card URL, per-client connect steps (Claude, ChatGPT, Cursor, Claude Code, Codex, Other) from packages/core/src/shared/mcp-connect-content.ts (shared with the /mcp/connect route — edit the shared module, never fork copy), static-token fallback link. Grants/scopes/revocation UI is future work. |
Mounting In A Template
- Add an
/agent route following the template's settings-route pattern
(app/routes/agent.tsx or _app.agent.tsx), mounting AgentTabsPage.
CSR is fine; keep the app shell in root.tsx so navigation does not
remount it (client-side-routing skill).
- Add an "Agent" item to primary navigation and the command palette,
mirroring the Settings entries. Link-first (
native-navigation skill).
- Pass
agentPageHref="/agent" to AgentSidebar so the sidebar Resources
and settings modes link out to the full page.
- Hash deep-links work out of the box:
/agent#context, /agent#files,
/agent#connections, /agent#jobs, /agent#access.
- App-specific additions go in
extraTabs (same SettingsTabItem shape as
the settings page); hide built-ins only with hiddenTabs when a template
genuinely lacks the underlying capability.
Scope
The page currently passes personal scope (and canManageOrg) to tabs via
AgentPageTabProps; it does not expose a page-level Personal/Organization
toggle. A tab may render its own scoped sections where the underlying actions
support them. The Automations tab shows personal and organization sections for
both Scheduled and Event triggers. Organization event automations remain
creator-run: administrators can manage them, but cannot retarget the creator's
identity.
1---2name: agent-page3description: The full-page Agent surface (/agent) with Context, Files, Connections, Automations, and Access tabs. Use when mounting the Agent page in a template, adding an app-specific tab, surfacing context transparency, MCP servers, A2A agents, recurring jobs, or external-client connect flows in the UI.4---56# Agent Page78`AgentTabsPage` (from `@agent-native/core/client`, source9`packages/core/src/client/agent-page/`) is the canonical full-page surface for10everything that can influence the agent. Design principles:1112- The page answers "what can influence this agent, and why" — it is not a13 generic admin console.14- Capability and access stay separate: **Connections** is what this agent can15 reach; **Access** is who can reach this agent.16- It is a thin shell that re-hosts existing components (ResourcesPanel, MCP17 hooks, AgentsSection, context X-Ray, jobs actions) — do not re-implement18 those surfaces inside it.19- Context must be inspectable, attributable, and governable — provenance and20 governance tiers, not just a token meter.2122## Tabs2324| Tab | Contents |25| --- | --- |26| `context` | System-vs-conversation split meter, provenance-grouped system sections (governance tiers: required/inherited/user), live-thread manifest. Backed by `context-preview-get` / `context-manifest-get` (see `context-xray` skill). |27| `files` | ResourcesPanel (skills, instructions, memory, uploads) with the virtual `mcp-servers/` folder hidden (`showMcpServers={false}`). |28| `connections` | MCP server management (both scopes, admin-gated org writes) plus A2A remote agents this app can call. |29| `jobs` | **Automations**: personal and organization Scheduled/Event tasks with pause/resume/delete. The `jobs` hash is stable for compatibility (see `automations` and `recurring-jobs`). |30| `access` | Copyable MCP URL and A2A agent-card URL, per-client connect steps (Claude, ChatGPT, Cursor, Claude Code, Codex, Other) from `packages/core/src/shared/mcp-connect-content.ts` (shared with the `/mcp/connect` route — edit the shared module, never fork copy), static-token fallback link. Grants/scopes/revocation UI is future work. |3132## Mounting In A Template33341. Add an `/agent` route following the template's settings-route pattern35 (`app/routes/agent.tsx` or `_app.agent.tsx`), mounting `AgentTabsPage`.36 CSR is fine; keep the app shell in `root.tsx` so navigation does not37 remount it (`client-side-routing` skill).382. Add an "Agent" item to primary navigation and the command palette,39 mirroring the Settings entries. Link-first (`native-navigation` skill).403. Pass `agentPageHref="/agent"` to `AgentSidebar` so the sidebar Resources41 and settings modes link out to the full page.424. Hash deep-links work out of the box: `/agent#context`, `/agent#files`,43 `/agent#connections`, `/agent#jobs`, `/agent#access`.445. App-specific additions go in `extraTabs` (same `SettingsTabItem` shape as45 the settings page); hide built-ins only with `hiddenTabs` when a template46 genuinely lacks the underlying capability.4748## Scope4950The page currently passes personal `scope` (and `canManageOrg`) to tabs via51`AgentPageTabProps`; it does not expose a page-level Personal/Organization52toggle. A tab may render its own scoped sections where the underlying actions53support them. The Automations tab shows personal and organization sections for54both Scheduled and Event triggers. Organization event automations remain55creator-run: administrators can manage them, but cannot retarget the creator's56identity.
Builder.io