@kortix/ui 0.14.11 → 0.14.13

package/dist/customize/agents/agent-page.js

@@ -1,126 +1,99 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AgentMark } from '../../internal/components/agent-mark.js';
-import { EntityFilePane } from '../shared/entity/entity-modal.js';
-import { agentStatus } from './agent-status.js';
-import { useDefaultAgent } from './use-default-agent.js';
-import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { MY_KORTIX_AGENT_NAME } from '../../_vendor/kortix-shared.js';
+import { adminPath } from '../../lib/routes.js';
 /**
- * /projects/[id]/agent/[name] — one agent, as a full-page editor. The core
- * screen of Customize.
+ * /projects/[id]/customize/agents/[name]: one agent, as a page with a rail.
  *
- * Customize is agent-centric (Marko, 2026-09-01): the agent is the only
- * object a project manager grants a person or a group, so every other
- * decision — who may use it, which model, which skills, which connectors and
- * secrets, when it runs — hangs off it. This page is built like the Settings
- * page (Marko, 2026-09-03: "make it a regular full page Agent Editor"): a
- * header, a left rail of topics, and one full-width pane per topic.
+ * Customize is agent-first. My Kortix is the one agent a person talks to; every
+ * other agent is a work product with only the access its work needs. So the
+ * page is the agent: one identity header, one rail, and room to edit.
  *
- *   ┌ Agents › name                  ● Name  chips   [Start session] [⋯] ┐
- *   ├──────────────┬──────────────────────────────────────────────────────┤
- *   │ Overview     │                                                      │
- *   │ People       │   the selected topic's pane, one column,            │
- *   │ Access       │   `max-w-2xl` like the Settings page                 │
- *   │ Triggers     │                                                      │
- *   │ Model        │                                                      │
- *   │ Workspace    │                                                      │
- *   │ Tools        │                                                      │
- *   │ Basics       │                                                      │
- *   ├──────────────┴──────────────────────────────────────────────────────┤
- *   │ Unsaved changes · commits to the repo             [Discard] [Save ⌘S] │
- *   └─────────────────────────────────────────────────────────────────────┘
+ *   ┌ ▣ researcher                         [Share] [Start session] [⋯] ┐
+ *   │   ● Enabled · Space: workspace · People start it                 │
+ *   ├ Overview      ┬ the row, full width                              ┤
+ *   │ Triggers      │                                                  │
+ *   │ Access: Connectors None · Secrets All · Skills All · Tools …     │
+ *   │ Runtime: Model · Workspace                                       │
+ *   └────────────────── [ ● Unsaved changes  Skills  Discard  Save ⌘S ]
  *
- * The rail is the Settings rail's dialect (`project-settings-page.tsx`,
- * `settings-panel.tsx`): same width, same row classes, a real `<Link>` per
- * topic so a topic has a URL (`?section=<key>`) a person can be sent to. The
- * draft is shared across topics, so switching never drops an edit, and the
- * save bar spans the page foot. Below `lg` the rail is a horizontal row.
+ * The URL names the tab and its view (`agent-tabs.ts`); every old
+ * `?section=` link still resolves. The rail lists every view as its own row
+ * (2026-10-28: Access and Runtime are group labels, not a second level), each
+ * with its grant state. A view renders the full resource screen in agent
+ * scope (one component, two variants), embedded without its own title
+ * (`CapabilityShellEmbedProvider`).
  *
- * Two bodies behind one header:
+ * The draft is shared across rows, so a row switch never drops an edit; the
+ * row with an edit carries a dot, and the save bar names the changed rows. A
+ * link off the page while dirty asks Stay / Leave / Save and leave.
  *
- *  - **Editable** — a v2 (kortix.yaml) project and a caller with
- *    `project.agent.write`. Every field is live; Save round-trips the whole
- *    `agents.<name>` block through the agent-config route, which commits it to
- *    the project repo. State lives in `useAgentDraft`; the panes are
- *    `AgentConfigSections` with the page's own Overview, People and Triggers
- *    slotted in.
- *  - **Read-only** — a v1 project, or a caller without write. Overview shows
- *    the agent's source file; People, Access (the legacy scope mirror),
- *    Triggers and Model (the gateway pin) remain. We degrade, never blank.
+ * Two bodies under one frame:
+ *  - **Editable**: a v2+ project and a caller with `project.agent.write`.
+ *    Save round-trips the whole `agents.<name>` block through the agent-config
+ *    route, which commits it to the project repo.
+ *  - **Read-only**: a v1 project or a caller without write. The same tabs and
+ *    the same Overview, with values in place of controls and a lock banner.
+ * My Kortix (a platform agent) has no page here: the project home starts it,
+ * and its route reads as not found.
  *
  * The page is keyed on the agent name by its route, so switching agents
- * remounts every draft rather than carrying one agent's edits onto another.
+ * remounts every draft.
  */
-import { MarkdownWithFrontmatter } from '../../markdown/markdown-frontmatter.js';
-import { Badge } from '../../primitives/badge.js';
+import { getProjectDetail, listProjectResourceGrants, readProjectFile, } from '@kortix/sdk';
+import { contract, qk, useFeatureFlag, useProjectAccountId, useUnifiedTriggers } from '@kortix/sdk/react';
+import { DotsThreeIcon, LockSimpleIcon, PlayIcon, StarIcon, TrashIcon } from '@phosphor-icons/react';
+import { useQueries, useQuery } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLocale, useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { AgentMark, agentDisplayName } from '../../internal/components/agent-mark.js';
+import { useAgentConfig, useUpdateAgentConfig, useProjectCapabilities, } from '../../internal/hooks/projects/use-agent-config.js';
+import { useNewProjectSession } from '../../internal/hooks/projects/use-new-project-session.js';
+import { agentHref, capabilityTabHref } from '../../internal/lib/capability-tab-routes.js';
+import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
+import { useProjectCan } from '../../internal/lib/use-project-can.js';
 import { Button } from '../../primitives/button.js';
 import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../../primitives/dropdown-menu.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { ErrorState } from '../../primitives/error-state.js';
 import Hint from '../../primitives/hint.js';
 import { InfoBanner } from '../../primitives/info-banner.js';
-import { Kbd } from '../../primitives/kbd.js';
-import Loading from '../../primitives/loading.js';
-import { Skeleton } from '../../primitives/skeleton.js';
-import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
-import { Textarea } from '../../primitives/textarea.js';
 import { errorToast, successToast } from '../../primitives/toast.js';
-import { EmptyState } from '../../primitives/empty-state.js';
-import { ErrorState } from '../../primitives/error-state.js';
-import { configEntitySourcePath } from '../sections/component/config-entity-source-path.js';
-import { AgentConfigSections, agentConfigSectionKeys, agentEditorOptionQueries, DEFAULT_AGENT_CONFIG_SECTION, isAgentConfigSectionKey, registryGrantOptions, useAgentDraft, useAgentEditorOptions, useLocalizedAgentConfigCatalog, } from '../sections/view/agent-editor.js';
-import { formatMode, toArray } from '../shared/utils.js';
-import { editConfigPrompt, useConfigureThread, } from '../use-configure-thread.js';
-import { agentConfigNeedsUpgrade, useAgentConfig, useUpdateAgentConfig, } from '../../internal/hooks/projects/use-agent-config.js';
-import { useNewProjectSession } from '../../internal/hooks/projects/use-new-project-session.js';
-import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
-import { useProjectCan } from '../../internal/lib/use-project-can.js';
-import { cn } from '../../internal/lib/utils.js';
-import { getProjectDetail, readProjectFile, } from '@kortix/sdk';
-import { contract, qk, useFeatureFlag, useProjectAccountId } from '@kortix/sdk/react';
-import { capitalizeWords, isMetaAgentName, META_AGENT_DISPLAY_NAME } from '../../_vendor/kortix-shared.js';
-import { BookOpenTextIcon, CaretRightIcon, CommandIcon, CpuIcon, CubeIcon, DotsThreeIcon, FileTextIcon, GlobeIcon, HardDriveIcon, KeyIcon, PlayIcon, PlugsConnectedIcon, PuzzlePieceIcon, RobotIcon, SlidersHorizontalIcon, StarIcon, TerminalWindowIcon, TimerIcon, TreeStructureIcon, UsersIcon, WrenchIcon, } from '@phosphor-icons/react';
-import { useQueries, useQuery, useQueryClient } from '@tanstack/react-query';
-import { AnimatePresence, m } from 'motion/react';
 import { UiLink as Link, useUiPathname, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
-import { SETTINGS_SIDEBAR_WIDTH_PX } from '../../internal/account-hub/account-settings-shell.js';
-import { capabilityTabHref } from '../../internal/lib/capability-tab-routes.js';
-import { useIsMobile } from '../../internal/hooks/index.js';
-import { EditorSection, EditorSectionStyleProvider } from '../sections/view/agent-editor-primitives.js';
-import { SettingsSectionHeader } from '../../primitives/settings-section-header.js';
-import { AgentDrivesSection } from './agent-drives-section.js';
+import { configEntitySourcePath } from '../sections/component/config-entity-source-path.js';
+import { AGENT_CONFIG_SECTIONS, AgentConfigSections, agentEditorOptionQueries, registryGrantOptions, useAgentDraft, useAgentEditorOptions, useLocalizedAgentConfigCatalog, } from '../sections/view/agent-editor.js';
+import { EditorSectionStyleProvider } from '../sections/view/agent-editor-primitives.js';
+import { ToolsSection } from '../sections/view/permission-editor.js';
+import { useAgentGrant } from '../shared/agent-resource-scope.js';
+import { CapabilityShellEmbedProvider } from '../shared/capability-page-shell.js';
+import { LeaveGuardProvider, useUnsavedChangesGuard } from '../shared/leave-guard.js';
+import { toArray } from '../shared/utils.js';
+import { ExtensionsPage, SkillsPage, ToolsPage } from '../skills/skills-page.js';
+import { ConnectorsPage } from '../connectors/connectors-page.js';
+import { SecretsPage } from '../secrets/secrets-page.js';
+import { TriggersPage } from '../triggers/triggers-page.js';
+import { editConfigPrompt, useConfigureThread } from '../use-configure-thread.js';
 import { AgentAuthorityCard } from './agent-authority-card.js';
 import { AgentModel, AgentScope } from './agent-detail-aside.js';
-import { AppsGrantPage, ConnectorsGrantPage, SecretsGrantPage, SkillsGrantPage, } from './agent-grant-pages.js';
-import { connectorPolicySetOptions } from './agent-policy-sets.js';
-import { AgentPeopleSection } from './agent-people-section.js';
+import { AgentDrivesSection } from './agent-drives-section.js';
+import { pruneRequiredConnectors } from './connectors-required.js';
+import { useGrantLabel } from './agent-access-text.js';
+import { AgentOverview, grantExcluded, grantOf } from './agent-overview.js';
+import { AgentIdentityHeader, AgentPageSkeleton, AgentStatePage, AgentTabBar, AgentTabBody, LeaveDialog, SaveBar, } from './agent-page-chrome.js';
+import { AgentModelView } from './agent-model-view.js';
+import { AgentApprovalRules } from './agent-approval-rules.js';
+import { AgentSectionRail, railGroupOf } from './agent-section-rail.js';
+import { AgentPinButton } from './agent-pin-button.js';
 import { AgentShareControl } from './agent-share-control.js';
-import { AgentTriggersSection } from './agent-triggers-section.js';
-/** The rail's icons — the one place that draws them (`AGENT_CONFIG_SECTIONS`
- *  is pure data, imported by the editor module). */
-const SECTION_ICON = {
-    overview: FileTextIcon,
-    people: UsersIcon,
-    basics: SlidersHorizontalIcon,
-    triggers: TimerIcon,
-    skills: BookOpenTextIcon,
-    subagents: TreeStructureIcon,
-    commands: CommandIcon,
-    extensions: PuzzlePieceIcon,
-    connectors: PlugsConnectedIcon,
-    secrets: KeyIcon,
-    apps: GlobeIcon,
-    drives: HardDriveIcon,
-    actions: TerminalWindowIcon,
-    model: CpuIcon,
-    tools: WrenchIcon,
-    workspace: CubeIcon,
-};
-export function AgentPage({ projectId, agentName }) {
+import { ACCESS_VIEWS, AGENT_TABS, agentLocationHref, changedItems, closestAgentName, resolveAgentLocation, railKeyOf, sectionLocationHref, } from './agent-tabs.js';
+import { useSpacesEnabled } from '../../internal/lib/space-scope.js';
+import { connectorPolicySetOptions } from './agent-policy-sets.js';
+import { AgentPolicySetsPanel, useAgentPolicySetControls } from './agent-policy-sets-section.js';
+import { useDefaultAgent } from './use-default-agent.js';
+export function AgentPage({ projectId, agentName, renderApps, }) {
+    const t = useI18nTranslations('agentEditor.tabs');
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    // `accountId` skips useProjectCan's own getProject and lets the IAM probe
-    // run on the first render instead of waiting a round-trip for it.
     const accountId = useProjectAccountId(projectId);
     const canWrite = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_AGENT_WRITE, { accountId }).allowed === true;
     const detailQuery = useQuery({
@@ -129,336 +102,474 @@ export function AgentPage({ projectId, agentName }) {
         ...contract('config'),
     });
     const config = detailQuery.data?.config ?? null;
-    const agent = toArray(config?.agents).find((a) => a.name === agentName) ?? null;
-    // Meta (and any platform-owned agent) is injected by the API, not declared in
-    // kortix.yaml. Its configuration is fixed: never editable, no agent-config read.
-    const isPlatform = agent?.platform === true;
-    // All reads start on the first render, in parallel. The agent-config read
-    // used to wait for detail to list the agent, and the editor's option reads
-    // for the editor to mount: three round trips in a row, each a Git read on
-    // the API. Now the skeleton lasts as long as the slowest single read.
+    // A platform agent (My Kortix) has nothing to edit here: not found.
+    const agent = toArray(config?.agents).find((a) => a.name === agentName && !a.platform) ?? null;
+    // Every read starts on the first render, in parallel: the skeleton lasts as
+    // long as the slowest single read, not three in a row.
     const configQuery = useAgentConfig(projectId, agentName);
     const editorOptionQueries = agentEditorOptionQueries(projectId);
     useQueries({
-        queries: [
-            editorOptionQueries.secrets,
-            editorOptionQueries.connectors,
-            editorOptionQueries.sandboxes,
-        ].map((query) => ({ ...query, enabled: canWrite })),
+        queries: [editorOptionQueries.secrets, editorOptionQueries.connectors, editorOptionQueries.sandboxes].map((query) => ({ ...query, enabled: canWrite })),
     });
-    if (detailQuery.isLoading || (agent && !isPlatform && configQuery.isLoading)) {
+    if (detailQuery.isLoading || (agent && configQuery.isLoading)) {
         return _jsx(AgentPageSkeleton, {});
     }
+    const retry = (_jsx(Button, { variant: "outline", size: "sm", onClick: () => void detailQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }));
     if (detailQuery.isError || !config) {
-        return (_jsx(CenteredState, { children: _jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('textd70d09b7d701'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => detailQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) }) }));
+        return (_jsx(AgentStatePage, { title: agentDisplayName(agentName), children: _jsx(ErrorState, { size: "sm", title: t('loadError'), description: _jsx(ErrorDetails, { error: detailQuery.error }), action: retry }) }));
     }
     if (!agent) {
-        return (_jsx(CenteredState, { children: _jsx(EmptyState, { icon: RobotIcon, size: "sm", title: tI18nComplete('text8136e0c475c7', { value0: agentName }), description: tI18nComplete.raw('text2ad30464c3ed'), action: _jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsx(Link, { href: capabilityTabHref(projectId, 'agent'), children: tI18nComplete.raw('text54c32d3e2cfa') }) }) }) }));
+        // Only agents this page opens: a platform agent (My Kortix) is not found here either.
+        const suggestion = closestAgentName(agentName, toArray(config.agents)
+            .filter((a) => !a.platform)
+            .map((a) => a.name));
+        return (_jsx(AgentStatePage, { title: t('notFoundHeader'), children: _jsx(EmptyState, { size: "sm", title: t('notFoundTitle'), description: _jsxs("span", { className: "space-y-1", children: [_jsx("span", { className: "block", children: t.rich('notFoundBody', { name: () => _jsx("span", { className: "font-mono", children: agentName }) }) }), suggestion ? (_jsx("span", { className: "block", children: t.rich('didYouMean', {
+                                link: () => (_jsx(Link, { href: agentHref(projectId, suggestion), className: "text-foreground underline underline-offset-4", children: agentDisplayName(suggestion) })),
+                            }) })) : null] }), action: _jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsx(Link, { href: capabilityTabHref(projectId, 'agent'), children: t('allAgents') }) }) }) }));
+    }
+    // A writer whose agent-config read failed would otherwise land on the
+    // read-only page with no word on why: say what failed, offer the retry.
+    if (canWrite && configQuery.isError) {
+        return (_jsx(AgentStatePage, { title: agentDisplayName(agent.name), children: _jsx(ErrorState, { size: "sm", title: t('configLoadError', { name: agentDisplayName(agent.name) }), description: _jsx(ErrorDetails, { error: configQuery.error }), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void configQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) }) }));
     }
-    const editable = !isPlatform && canWrite && configQuery.data?.editable === true;
-    const isV1 = !isPlatform && agentConfigNeedsUpgrade(configQuery.data);
-    return editable ? (_jsx(EditableAgentPage, { projectId: projectId, agent: agent, config: config, initial: configQuery.data?.block ?? {}, schemaVersion: configQuery.data?.schema_version ?? 2 })) : (_jsx(ReadOnlyAgentPage, { projectId: projectId, agent: agent, config: config, canWrite: canWrite, showUpgradeHint: isV1, isPlatform: isPlatform }));
+    const editable = canWrite && configQuery.data?.editable === true;
+    return editable ? (_jsx(EditableAgentPage, { projectId: projectId, agent: agent, config: config, initial: configQuery.data?.block ?? {}, renderApps: renderApps })) : (_jsx(ReadOnlyAgentPage, { projectId: projectId, agent: agent, config: config, block: configQuery.data?.block ?? blockFromScope(agent), canWrite: canWrite }));
+}
+/** The raw failure, folded, in mono. No fold when there is nothing to show. */
+function ErrorDetails({ error }) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    const message = error instanceof Error ? error.message : typeof error === 'string' ? error : '';
+    if (!message)
+        return null;
+    return (_jsxs("details", { className: "mt-2 text-left", children: [_jsx("summary", { className: "text-muted-foreground hover:text-foreground cursor-pointer text-xs transition-colors", children: t('details') }), _jsx("p", { className: "text-muted-foreground mt-2 font-mono text-xs break-words", children: message })] }));
+}
+/** The block a reader sees when the agent-config read returned nothing. */
+function blockFromScope(agent) {
+    const scope = agent.scope;
+    return {
+        enabled: agent.enabled,
+        space: agent.space ?? undefined,
+        sandbox: agent.sandbox ?? undefined,
+        connectors: scope?.connectors,
+        secrets: scope?.env,
+        apps: scope?.apps,
+        kortix_permissions: scope?.kortix_permissions ?? scope?.kortix_cli,
+        behavior: {
+            description: agent.description ?? undefined,
+            model: agent.model ?? undefined,
+            mode: agent.mode ?? undefined,
+            hidden: agent.hidden,
+        },
+    };
+}
+// ─── Shared hooks ────────────────────────────────────────────────────────────
+function useAgentLocation(tabs, views) {
+    const params = useUiSearchParams();
+    return resolveAgentLocation({ tab: params.get('tab'), view: params.get('view'), section: params.get('section') }, tabs, views);
+}
+/** How many triggers start this agent (kortix.yaml and runtime), and how
+ *  many grants name it. `GET /triggers/all` leaves out what the caller may not read. */
+function useAgentUseCounts(projectId, agentName, config) {
+    const accountId = useProjectAccountId(projectId);
+    const canManageMembers = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_MEMBERS_MANAGE, { accountId }).allowed === true;
+    const triggers = useUnifiedTriggers(projectId);
+    const grants = useQuery({
+        queryKey: qk.project.resourceGrants(projectId),
+        queryFn: () => listProjectResourceGrants(projectId),
+        enabled: canManageMembers,
+        retry: false,
+        ...contract('inventory'),
+    });
+    // A trigger stored as `default` starts the project's default agent.
+    const fallback = config.default_agent ?? config.open_code_default_agent ?? null;
+    return {
+        triggerCount: triggers.data
+            ? triggers.data.triggers.filter((a) => a.target.kind === 'agent' && (a.target.agent === 'default' && fallback ? fallback : a.target.agent) === agentName).length
+            : undefined,
+        peopleCount: grants.data
+            ? grants.data.grants.filter((g) => g.resource_type === 'agent' && g.resource_id === agentName).length
+            : undefined,
+    };
+}
+/** The Overview's catalog totals and the connectors that need a sign-in. */
+function useOverviewFacts(projectId, agentName, config, block) {
+    const queries = agentEditorOptionQueries(projectId);
+    const connectors = useQuery(queries.connectors);
+    const secrets = useQuery(queries.secrets);
+    const counts = useAgentUseCounts(projectId, agentName, config);
+    const all = connectors.data?.connectors ?? [];
+    const granted = block.connectors;
+    const needsSignIn = all
+        .filter((c) => c.status === 'needs_auth' && (granted === 'all' || (Array.isArray(granted) && granted.includes(c.slug))))
+        .map((c) => c.slug);
+    const secretIds = new Set((secrets.data?.items ?? []).map((s) => s.identifier));
+    return {
+        totals: {
+            skills: toArray(config.skills).length,
+            ...(connectors.data ? { connectors: all.length } : {}),
+            ...(secrets.data ? { secrets: secretIds.size } : {}),
+        },
+        needsSignIn,
+        ...counts,
+    };
+}
+/** The header's meta line: status, space (only with spaces on), who starts it, default. */
+function useHeaderFacts(projectId, agent, config, block, editable) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    const tPage = useI18nTranslations('agentEditor.page');
+    const enabled = block.enabled !== false;
+    // Editable pages pass the draft: read it alone, so Project-wide reads as
+    // Project-wide before the save. A reader's block already carries the space.
+    const space = (editable ? block.space : (block.space ?? agent.space)) || null;
+    const mode = (block.behavior?.mode ?? agent.mode ?? 'primary').toLowerCase();
+    const isDefault = (config.default_agent ?? config.open_code_default_agent) === agent.name;
+    // Spaces are Work in progress (`project_channels`): off, no Space fact.
+    const spacesOn = useSpacesEnabled(projectId);
+    return [
+        { label: enabled ? t('enabled') : t('off'), tone: enabled ? 'success' : 'neutral' },
+        ...(spacesOn ? [{ label: space ? t('spaceValue', { space }) : t('projectWide') }] : []),
+        { label: mode === 'subagent' ? t('startSubagent') : mode === 'all' ? t('startBoth') : t('startPrimary') },
+        ...(isDefault ? [{ label: tPage('default') }] : []),
+    ];
 }
-// ─── Frame ─────────────────────────────────────────────────────────────────
 /**
- * Header on top, then the rail beside the pane, then the footer. The pane is
- * the one scroller; the rail is the Settings rail
- * (`project-settings-page.tsx`), row for row.
+ * The header's Share dialog. The old `?tab=people` link opens it; closing it
+ * drops that query, so a reload or a later tab click does not reopen it.
  */
-function AgentPageFrame({ header, section, sections, sectionHref, pane, footer, }) {
-    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    const isMobile = useIsMobile();
-    const localizedConfig = useLocalizedAgentConfigCatalog();
-    const sectionKeys = new Set(sections);
-    const items = localizedConfig.sections.filter((s) => sectionKeys.has(s.key));
-    // The Preferences rail's rule: a heading over a lone group labels nothing.
-    const groups = localizedConfig.groups
-        .map((group) => ({
-        group,
-        items: items.filter((s) => s.group === group),
-    }))
-        .filter((g) => g.items.length > 0);
-    const showGroupLabels = groups.length > 1;
-    const trigger = (item, horizontal) => {
-        const SectionIcon = SECTION_ICON[item.key];
-        return (_jsx(TabsTrigger, { value: item.key, asChild: true, size: horizontal ? undefined : 'md', className: horizontal
-                ? 'w-auto shrink-0 gap-2.5 px-3 py-0.75 whitespace-nowrap'
-                : cn(
-                // The Settings rail's row dialect (`project-settings-page.tsx`).
-                'gap-2 px-2.5 py-1 font-normal transition-none has-[>svg]:px-2.5', 'text-foreground data-[state=inactive]:text-foreground hover:bg-hover hover:text-foreground', 'data-[state=active]:bg-active data-[state=active]:font-medium', '[&_svg]:text-muted-foreground data-[state=active]:[&_svg]:text-foreground'), children: _jsxs(Link, { href: sectionHref(item.key), prefetch: true, children: [_jsx(SectionIcon, { className: "size-4 shrink-0" }), _jsx("span", { className: cn(!horizontal && 'truncate'), children: item.label })] }) }, item.key));
-    };
-    return (_jsxs("div", { className: "relative flex h-full min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "border-border/60 shrink-0 border-b px-5 py-3", children: header }), _jsxs("div", { className: cn('min-h-0 flex-1', isMobile ? 'flex flex-col overflow-hidden' : 'grid overflow-hidden'), style: isMobile ? undefined : { gridTemplateColumns: `${SETTINGS_SIDEBAR_WIDTH_PX}px 1fr` }, children: [isMobile ? (_jsx("nav", { "aria-label": tI18nComplete.raw('text7be318295927'), className: "border-border/60 flex h-auto shrink-0 items-center border-b", children: _jsx(FadedScrollArea, { orientation: "horizontal", fadeColor: "from-background", className: "min-w-0 flex-1 py-2", children: _jsx(Tabs, { value: section, className: "w-fit", children: _jsx(TabsList, { orientation: "horizontal", className: "w-fit", children: items.map((item) => trigger(item, true)) }) }) }) })) : (_jsx("aside", { className: "flex min-h-0 flex-col border-r bg-inherit", children: _jsx("nav", { "aria-label": tI18nComplete.raw('text7be318295927'), className: "flex min-h-0 flex-1 [scrollbar-width:none] flex-col gap-4 overflow-y-auto px-2 pt-3 pb-2 [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: _jsx(Tabs, { value: section, orientation: "vertical", className: "space-y-3", children: groups.map((g) => (_jsxs("div", { children: [showGroupLabels ? (_jsx("div", { className: "text-muted-foreground flex h-7 items-center px-2.5 text-xs font-medium", children: g.group })) : null, _jsx(TabsList, { orientation: "vertical", className: "w-full", children: g.items.map((item) => trigger(item, false)) })] }, g.group))) }) }) })), _jsx("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto", children: _jsx("div", { className: "mx-auto w-full max-w-2xl px-4 py-10 pb-32 lg:py-14 lg:pb-32", children: pane }) })] }), footer] }));
+function useShareDialog(openedByLink) {
+    const pathname = useUiPathname();
+    const router = useUiRouter();
+    const [open, setOpenState] = useState(openedByLink);
+    const setOpen = useCallback((next) => {
+        setOpenState(next);
+        if (!next && openedByLink)
+            router.replace(pathname);
+    }, [openedByLink, router, pathname]);
+    return { open, setOpen };
 }
-function CenteredState({ children }) {
-    return (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx("div", { className: "mx-auto w-full max-w-3xl px-6 py-16", children: children }) }));
+/**
+ * Mod+S saves the agent, only while the draft holds an edit. With nothing to
+ * save the key keeps the browser's own behavior. A key pressed inside an open
+ * dialog (an embedded screen's own editor, the secret form) belongs to that
+ * dialog, never to the agent's draft.
+ */
+function useSaveShortcut(dirty, onSave) {
+    useEffect(() => {
+        if (!dirty)
+            return;
+        const handler = (event) => {
+            if (!(event.metaKey || event.ctrlKey) || event.shiftKey || event.altKey || event.key !== 's')
+                return;
+            const target = event.target instanceof Element ? event.target : null;
+            if (target?.closest('[role="dialog"], [role="alertdialog"]'))
+                return;
+            event.preventDefault();
+            onSave();
+        };
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [dirty, onSave]);
 }
-function AgentPageSkeleton() {
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-1 flex-col", children: [_jsxs("div", { className: "border-border/60 shrink-0 space-y-4 border-b px-5 pt-5 pb-4", children: [_jsx(Skeleton, { className: "h-4 w-32 rounded-sm" }), _jsx(Skeleton, { className: "h-8 w-56 rounded-sm" })] }), _jsxs("div", { className: "grid min-h-0 flex-1", style: { gridTemplateColumns: `${SETTINGS_SIDEBAR_WIDTH_PX}px 1fr` }, children: [_jsx("div", { className: "space-y-1.5 border-r px-2 pt-3", children: Array.from({ length: 6 }).map((_, i) => (
-                        // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length placeholder
-                        _jsx(Skeleton, { className: "h-8 w-full rounded-sm" }, i))) }), _jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-6 px-6 py-8", children: [_jsx(Skeleton, { className: "h-11 w-full rounded-md" }), _jsx(Skeleton, { className: "h-72 w-full rounded-md" })] })] })] }));
+/**
+ * The rail's rows, one flat list in the order of `agents.<name>` in
+ * kortix.yaml: Overview, Model, every grant (`countOf` gives its state),
+ * Workspace, then Triggers and Drives, which live outside the block. Model and
+ * Workspace show their value, or "Project default" when the block sets none.
+ */
+function useRailItems(pathname, views, counts, countOf, values = {}) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    const tPage = useI18nTranslations('agentEditor.page');
+    const catalog = useLocalizedAgentConfigCatalog();
+    const labelOf = (key) => catalog.sections.find((s) => s.key === key)?.label ?? key;
+    const viewRow = (view, count) => views.includes(view) ? [{ key: view, label: labelOf(view), href: sectionLocationHref(pathname, view), count }] : [];
+    const grants = ACCESS_VIEWS.filter((view) => view !== 'drives').flatMap((view) => viewRow(view, countOf?.(view) ?? undefined));
+    return [
+        { key: 'overview', label: t('tabOverview'), href: agentLocationHref(pathname, 'overview') },
+        ...viewRow('model', values.model ?? tPage('projectDefault')),
+        ...grants,
+        ...viewRow('workspace', values.workspace ?? tPage('projectDefault')),
+        {
+            key: 'triggers',
+            label: t('tabTriggers'),
+            href: agentLocationHref(pathname, 'triggers'),
+            count: counts.triggerCount || undefined,
+        },
+        ...viewRow('drives'),
+    ];
 }
-// ─── Section routing ───────────────────────────────────────────────────────
 /**
- * Which topic the page shows. Seeded from `?section=` so the Access hub and
- * the Triggers tab can deep-link one; the rail's links write the same param,
- * so the URL always names the topic on screen.
+ * The rail rows as the page's top tabs: Overview, Model, Capabilities (the
+ * grants of what the agent can do), Access (what it can reach), Workspace,
+ * Triggers. A tab with several views shows them as pills.
  */
-function useAgentSection(available) {
-    const searchParams = useUiSearchParams();
-    const fromUrl = searchParams.get('section');
-    if (isAgentConfigSectionKey(fromUrl) && available.includes(fromUrl))
-        return fromUrl;
-    return available.find((k) => k === DEFAULT_AGENT_CONFIG_SECTION) ?? available[0];
+function useTabGroups(items) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    const pick = (keys) => keys.flatMap((key) => items.filter((item) => item.key === key));
+    const one = (key) => ({ key, label: items.find((item) => item.key === key)?.label ?? key, items: pick([key]) });
+    return [
+        one('overview'),
+        one('model'),
+        { key: 'capabilities', label: t('tabCapabilities'), items: pick(['tools', 'skills', 'subagents', 'commands', 'extensions']) },
+        { key: 'access', label: t('tabAccess'), items: pick(['connectors', 'secrets', 'apps', 'actions', 'drives']) },
+        one('workspace'),
+        one('triggers'),
+    ];
 }
-function sectionHrefFor(pathname) {
-    return (key) => `${pathname}?section=${key}`;
+/** The tabs over the one scroller. */
+function TabLayout({ tabs, children }) {
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [tabs, _jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: children })] }));
 }
-// ─── Header ────────────────────────────────────────────────────────────────
+// ─── Header actions ──────────────────────────────────────────────────────────
 /**
- * The two actions every agent has, shared by the full header and the
- * compact bar so the two cannot offer different things.
- *
- * "Start session" creates a session booted on THIS agent through the same
- * hook the sidebar's New session button uses — the same guard against double
- * clicks, the same billing gate, the same navigation. It is the page's
- * primary action because an agent exists to be run. A subagent is called by
- * other agents, never picked for a session — the composer hides it — so the
- * button is disabled with the reason, not offered.
+ * Share, Start session, and the ⋯ menu. Share renders for everyone and gates
+ * itself on `project.members.manage`. The ⋯ menu needs `project.agent.write`.
+ * Start session boots a session
+ * on THIS agent through the sidebar's New session hook. A subagent is called
+ * by other agents, never picked for a session, so its button is disabled with
+ * the reason. Below `sm` Start session is an icon button.
  */
-function AgentActions({ projectId, agent, config, canWrite, }) {
+function AgentActions({ projectId, agent, config, canWrite, share, }) {
+    const t = useI18nTranslations('agentEditor.tabs');
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    const queryClient = useQueryClient();
     const startSession = useNewProjectSession(projectId);
     const configure = useConfigureThread(projectId);
-    const [confirmEditSource, setConfirmEditSource] = useState(false);
+    const makeDefault = useDefaultAgent(projectId);
+    const [confirm, setConfirm] = useState(null);
     const isDefault = (config.default_agent ?? config.open_code_default_agent) === agent.name;
     const mode = agent.mode?.toLowerCase();
     const startBlocked = agent.enabled === false
-        ? 'This agent is disabled.'
+        ? t('startDisabled')
         : mode === 'subagent'
-            ? 'Subagents are called by other agents, not started directly.'
+            ? t('startSubagentBlocked')
             : null;
-    const makeDefault = useDefaultAgent(projectId);
-    const pathname = useUiPathname();
-    return (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(AgentShareControl, { projectId: projectId, agentName: agent.name, peopleHref: `${pathname}?section=people` }), startBlocked ? (_jsx(Hint, { label: startBlocked, children: _jsx("span", { className: "inline-flex", children: _jsxs(Button, { size: "sm", disabled: true, children: [_jsx(PlayIcon, { weight: "fill", className: "size-3.5 shrink-0" }), tI18nComplete.raw('textb1c52ee3677d')] }) }) })) : (_jsxs(Button, { size: "sm", onClick: () => startSession({ create: { agent_name: agent.name } }), children: [_jsx(PlayIcon, { weight: "fill", className: "size-3.5 shrink-0" }), tI18nComplete.raw('textb1c52ee3677d')] })), canWrite ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon-sm", "aria-label": tI18nComplete.raw('textf8d46c2570e7'), children: _jsx(DotsThreeIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { disabled: isDefault || agent.enabled === false || makeDefault.isPending, onSelect: () => makeDefault.mutate(agent.name), children: [_jsx(StarIcon, { className: "size-4" }), isDefault
-                                        ? tI18nComplete.raw('texte8cb80e5c5cb')
-                                        : tI18nComplete.raw('texte8f43f910a4e')] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { disabled: configure.pending, onSelect: () => setConfirmEditSource(true), children: tI18nComplete.raw('text4930821dd07b') })] })] })) : null, _jsx(ConfirmDialog, { open: confirmEditSource, onOpenChange: setConfirmEditSource, title: tI18nComplete.raw('text24ba36a8ec86'), description: tI18nComplete('text13324ae62b23', { value0: agent.name }), confirmLabel: tI18nComplete.raw('text0bce1a892dec'), cancelLabel: tI18nComplete.raw('text19766ed6ccb2'), onConfirm: () => {
-                    setConfirmEditSource(false);
-                    configure.start(editConfigPrompt('agent', agent.name, agent.path));
+    const startLabel = tI18nComplete.raw('textb1c52ee3677d');
+    const start = (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", disabled: startBlocked !== null, onClick: () => startSession({ create: { agent_name: agent.name } }), className: "hidden sm:inline-flex", children: [_jsx(PlayIcon, { weight: "fill", className: "size-3.5 shrink-0" }), startLabel] }), _jsx(Button, { size: "icon-base", "aria-label": startLabel, disabled: startBlocked !== null, onClick: () => startSession({ create: { agent_name: agent.name } }), className: "sm:hidden", children: _jsx(PlayIcon, { weight: "fill", className: "size-3.5" }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(AgentPinButton, { projectId: projectId, agent: agent.name }), _jsx(AgentShareControl, { projectId: projectId, agentName: agent.name, open: share.open, onOpenChange: share.setOpen }), startBlocked ? (_jsx(Hint, { label: startBlocked, children: _jsx("span", { className: "inline-flex", children: start }) })) : (start), canWrite ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-base", "aria-label": tI18nComplete.raw('textf8d46c2570e7'), children: _jsx(DotsThreeIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { disabled: isDefault || agent.enabled === false || makeDefault.isPending, onSelect: () => makeDefault.mutate(agent.name), children: [_jsx(StarIcon, { className: "size-4" }), isDefault ? tI18nComplete.raw('texte8cb80e5c5cb') : tI18nComplete.raw('texte8f43f910a4e')] }), _jsxs(DropdownMenuItem, { disabled: configure.pending, onSelect: () => setConfirm('edit'), children: [_jsx(AgentMark, { slug: MY_KORTIX_AGENT_NAME }), t('askToEditAgent')] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", disabled: configure.pending, onSelect: () => setConfirm('delete'), children: [_jsx(TrashIcon, { className: "size-4" }), t('deleteAgent', { name: agentDisplayName(agent.name) })] })] })] })) : null, _jsx(ConfirmDialog, { open: confirm !== null, onOpenChange: (open) => (open ? undefined : setConfirm(null)), title: confirm === 'delete' ? t('deleteTitle', { name: agentDisplayName(agent.name) }) : tI18nComplete.raw('text24ba36a8ec86'), description: confirm === 'delete'
+                    ? t('deleteBody')
+                    : tI18nComplete('text13324ae62b23', { value0: agent.name }), confirmLabel: tI18nComplete.raw('text0bce1a892dec'), cancelLabel: tI18nComplete.raw('text19766ed6ccb2'), confirmVariant: confirm === 'delete' ? 'destructive' : 'default', onConfirm: () => {
+                    const kind = confirm;
+                    setConfirm(null);
+                    configure.start(kind === 'delete'
+                        ? t('deletePrompt', { name: agent.name, path: agent.path })
+                        : editConfigPrompt('agent', agent.name, agent.path));
                 } })] }));
 }
-/** The status chips beside the name. Only states worth flagging. */
-function AgentChips({ agent, config, size, }) {
-    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    const { showMode, isDefault, disabled } = agentStatus(agent, config);
-    return (_jsxs("span", { className: "flex items-center gap-1.5", children: [showMode ? (_jsx(Badge, { variant: "secondary", size: size, children: formatMode(agent.mode ?? '') })) : null, isDefault ? (_jsx(Badge, { variant: "secondary", size: size, children: tI18nComplete.raw('text21b111cbfe6e') })) : null, disabled ? (_jsx(Badge, { variant: "muted", size: size, children: tI18nComplete.raw('text75081b593d15') })) : null] }));
-}
 /**
- * Breadcrumb, avatar, name, chips, actions — the full header at the top of
- * the document. `children` is rendered under the title; the read-only body
- * passes the description there.
+ * The one column every Access and Runtime view sits in, embedded resource
+ * screen or settings form alike: the same width, the same top offset.
+ * Triggers is not a view: it keeps the full width its list
+ * and detail split needs.
  */
-function AgentHeader({ projectId, agent, config, canWrite, children, }) {
-    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsxs("header", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("nav", { "aria-label": tI18nComplete.raw('text2bd873d6c734'), className: "flex min-w-0 items-center gap-1.5 text-sm", children: [_jsx(Link, { href: capabilityTabHref(projectId, 'agent'), prefetch: true, className: "text-muted-foreground hover:text-foreground shrink-0 transition-colors", children: tI18nComplete.raw('text279b44d2ab4b') }), _jsx(CaretRightIcon, { "aria-hidden": true, className: "text-muted-foreground size-3.5 shrink-0" }), _jsx(AgentMark, { slug: agent.name }), _jsx("h1", { className: "text-foreground truncate text-sm font-semibold", children: isMetaAgentName(agent.name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(agent.name) }), _jsx(AgentChips, { agent: agent, config: config, size: "xs" })] }), _jsx(AgentActions, { projectId: projectId, agent: agent, config: config, canWrite: canWrite })] }), children] }));
+/** A view beside the Capabilities or Access rail, centered in the space right of the rail. */
+const RAIL_COLUMN = 'mx-auto max-w-3xl';
+/** A one-view tab (Workspace, Model): centered, the Overview's column. */
+const CENTER_COLUMN = 'mx-auto max-w-3xl';
+/** Frames a full resource screen in agent scope, with `lead` atop its scroller. */
+function Embedded({ agentName, lead, column, children, }) {
+    return (
+    // A view in a column sits beside the rail, which names no view: the screen shows its own title.
+    _jsx(CapabilityShellEmbedProvider, { value: { agentName, lead, className: column, titled: column !== undefined }, children: _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: children }) }));
 }
-// ─── Editable body ─────────────────────────────────────────────────────────
-/** What a v1 project, or a reader without write, can still see. */
-const READ_ONLY_SECTIONS = [
-    'overview',
-    'people',
-    'triggers',
-    'actions',
-    'model',
-];
-/** A platform agent (Meta) shows one page: its identity and the platform notice.
- *  Its people, triggers, model and permissions are platform-managed, not project
- *  settings to inspect here. */
-const PLATFORM_SECTIONS = ['overview'];
-function EditableAgentPage({ projectId, agent, config, initial, schemaVersion, }) {
+/** Runtime > Model's one way out to the project-wide model screens. */
+function ProjectModelsLink({ projectId }) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    return (_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: t.rich('projectModelsLink', {
+            link: (chunks) => (_jsx(Link, { href: adminPath(projectId, 'models'), className: "text-foreground decoration-border hover:decoration-foreground underline underline-offset-4 transition-colors", children: chunks })),
+        }) }));
+}
+// ─── Editable body ───────────────────────────────────────────────────────────
+function EditableAgentPage({ projectId, agent, config, initial, renderApps, }) {
+    const tCapabilities = useI18nTranslations('agentCapabilities');
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const locale = useLocale();
     const editor = useAgentDraft(initial);
     const options = useAgentEditorOptions(projectId);
+    const capabilities = useProjectCapabilities(projectId);
     const update = useUpdateAgentConfig(projectId, agent.name);
+    const configure = useConfigureThread(projectId);
     const [confirmDiscard, setConfirmDiscard] = useState(false);
+    const pathname = useUiPathname();
+    const drivesOn = useFeatureFlag(projectId, 'drives').enabled;
+    const views = useMemo(() => AGENT_CONFIG_SECTIONS.map((s) => s.key).filter((k) => drivesOn || k !== 'drives'), [drivesOn]);
+    const location = useAgentLocation(AGENT_TABS, views);
+    const share = useShareDialog(location.open === 'share');
+    const registryOptions = useMemo(() => registryGrantOptions({ manifest_raw: config.manifest_raw, agents: toArray(config.agents) }, agent.name), [config.manifest_raw, config.agents, agent.name]);
     const skillsOptions = toArray(config.skills).map((skill) => ({
         id: skill.name,
         label: skill.name,
         description: skill.description ?? undefined,
     }));
-    const pathname = useUiPathname();
-    // Drives exists only with Volumes on (the project's derived `drives` flag).
-    const drivesOn = useFeatureFlag(projectId, 'drives').enabled;
-    const sections = useMemo(() => agentConfigSectionKeys(schemaVersion).filter((k) => drivesOn || k !== 'drives'), [schemaVersion, drivesOn]);
-    const registryOptions = useMemo(() => registryGrantOptions({ manifest_raw: config.manifest_raw, agents: toArray(config.agents) }, agent.name), [config.manifest_raw, config.agents, agent.name]);
     const policySetOptions = useMemo(() => connectorPolicySetOptions(config.manifest_raw), [config.manifest_raw]);
-    const section = useAgentSection(sections);
+    const policySetControl = useAgentPolicySetControls(projectId, editor, policySetOptions);
+    const surface = { kind: 'agent', agentName: agent.name };
+    const defaultAgent = config.default_agent ?? config.open_code_default_agent;
+    const name = agentDisplayName(agent.name);
+    const sourcePath = editor.draft.file ?? configEntitySourcePath(agent.path);
+    const { draft, set } = editor;
+    const connectorsGrant = useAgentGrant(draft.connectors, (v) => {
+        set('connectors', v);
+        // `connectors_required` is no longer enforced: keep it inside the grant.
+        const kept = pruneRequiredConnectors(draft.connectors_required, v);
+        if (kept !== draft.connectors_required)
+            set('connectors_required', kept);
+    });
+    const secretsGrant = useAgentGrant(draft.secrets, (v) => set('secrets', v));
+    const appsGrant = useAgentGrant(draft.apps, (v) => set('apps', v));
+    const facts = useOverviewFacts(projectId, agent.name, config, draft);
+    const headerFacts = useHeaderFacts(projectId, agent, config, draft, true);
+    const spacesOn = useSpacesEnabled(projectId);
     const onSave = useCallback(async () => {
         if (!editor.isDirty || update.isPending)
-            return;
+            return !editor.isDirty;
         try {
             const response = await update.mutateAsync(editor.draft);
             editor.commit(response.block ?? editor.draft);
-            successToast(tI18nComplete('text6b0bbffdbd6e', { value0: capitalizeWords(agent.name) }));
+            successToast(tI18nComplete('text6b0bbffdbd6e', { value0: name }));
+            return true;
         }
         catch (e) {
             errorToast(e?.message ?? tI18nComplete.raw('text166442c65e8e'));
+            return false;
         }
-    }, [editor, update, agent.name, tI18nComplete]);
-    // Rail links change only `?section=` on this same path; the guard lets those
-    // through so switching topics never asks about unsaved edits — the draft is
-    // shared across topics and nothing is lost.
+    }, [editor, update, name, tI18nComplete]);
+    const saveNow = useCallback(() => void onSave(), [onSave]);
+    // Tab links change only the query on this path: the draft survives them, so
+    // the guard lets them through.
     const leaveGuard = useUnsavedChangesGuard(editor.isDirty, pathname);
-    useSaveShortcut(onSave);
-    return (_jsx(AgentPageFrame, { header: _jsx(AgentHeader, { projectId: projectId, agent: agent, config: config, canWrite: true }), section: section, sections: sections, sectionHref: sectionHrefFor(pathname), pane: _jsx(AgentConfigSections, { section: section, editor: editor, options: options, skillsOptions: skillsOptions, registryOptions: registryOptions, skills: _jsx(SkillsGrantPage, { projectId: projectId, config: config, editor: editor }), connectors: _jsx(ConnectorsGrantPage, { projectId: projectId, editor: editor, policySetOptions: policySetOptions }), secrets: _jsx(SecretsGrantPage, { projectId: projectId, editor: editor }), apps: _jsx(AppsGrantPage, { projectId: projectId, editor: editor }), drives: _jsx(AgentDrivesSection, { projectId: projectId, agentName: agent.name }), overview: _jsx(OverviewPane, { description: editor.oc.description ?? '', onDescriptionChange: (next) => editor.setOc('description', next), descriptionHelp: editor.oc.mode === 'subagent'
-                    ? 'Required. This is how other agents decide to call it.'
-                    : 'One line on what this agent is for. Other agents read it when picking a subagent.', prompt: editor.oc.prompt ?? '', onPromptChange: (next) => editor.setOc('prompt', next) }), triggers: _jsx(AgentTriggersSection, { projectId: projectId, agentName: agent.name, defaultAgent: config.default_agent ?? config.open_code_default_agent }), people: _jsx(AgentPeopleSection, { projectId: projectId, agentName: agent.name }), authority: _jsx(AgentAuthorityCard, { projectId: projectId, agentName: agent.name, grant: editor.draft.kortix_permissions ?? editor.draft.kortix_cli }) }), footer: _jsxs(_Fragment, { children: [_jsx(SaveBar, { dirty: editor.isDirty, pending: update.isPending, onDiscard: () => setConfirmDiscard(true), onSave: onSave }), _jsx(ConfirmDialog, { open: confirmDiscard, onOpenChange: setConfirmDiscard, title: tI18nComplete.raw('text3b13192b9d88'), description: tI18nComplete('text8a36cce34f68', { value0: capitalizeWords(agent.name) }), confirmLabel: tI18nComplete.raw('texteb1a70e39274'), cancelLabel: tI18nComplete.raw('texte76fd2add010'), confirmVariant: "destructive", onConfirm: () => {
+    useSaveShortcut(editor.isDirty, saveNow);
+    const grantLabel = useGrantLabel();
+    // A tool's aliases go off with it (`agent` takes `task`): the tab counts tools, not names.
+    const toolAliases = new Set((capabilities.data?.tools ?? []).flatMap((tool) => tool.aliases));
+    const countOf = (view) => {
+        if (view === 'drives')
+            return null;
+        const value = grantOf(draft, view);
+        const excluded = grantExcluded(value);
+        return view === 'tools' && excluded.length > 0
+            ? grantLabel({ exclude: excluded.filter((id) => !toolAliases.has(id)) })
+            : grantLabel(value);
+    };
+    const railItems = useRailItems(pathname, views, facts, countOf, {
+        model: modelName(editor.oc.model),
+        workspace: draft.sandbox,
+    });
+    const tabGroups = useTabGroups(railItems);
+    const dirtyItems = useMemo(() => changedItems(editor.draft, editor.baseline), [editor.draft, editor.baseline]);
+    const changed = new Intl.ListFormat(locale, { type: 'conjunction' }).format(dirtyItems.map((key) => railItems.find((item) => item.key === key)?.label ?? key));
+    const editorSection = (view) => (_jsx(AgentConfigSections, { section: view, editor: editor, options: options, skillsOptions: skillsOptions, registryOptions: registryOptions, apps: null, drives: _jsx(AgentDrivesSection, { projectId: projectId, agentName: agent.name, repositoryAccess: draft.repository_access !== false }), sectionStyle: "tab" }));
+    const body = (() => {
+        const view = location.view;
+        switch (location.tab) {
+            case 'overview':
+                return (_jsx(AgentTabBody, { children: _jsx(AgentOverview, { agent: agent, config: config, block: draft, prompt: editor.oc.prompt ?? '', editor: editor, sourcePath: sourcePath, showSpace: spacesOn, onAskMyKortix: () => configure.start(editConfigPrompt('agent', agent.name, agent.path)), focusInstructions: location.open === 'instructions' }) }));
+            case 'access':
+            case 'runtime': {
+                if (!view)
+                    return null;
+                // Every Access view is the ONE component Project admin shows for the
+                // same library, in agent mode: the agent's grant row and a switch per
+                // item over the project's catalog (Marko, 2026-10-27).
+                if (view === 'skills' || view === 'tools' || view === 'extensions') {
+                    const Page = view === 'skills' ? SkillsPage : view === 'tools' ? ToolsPage : ExtensionsPage;
+                    return (_jsx(Embedded, { agentName: agent.name, column: RAIL_COLUMN, children: _jsx(Page, { projectId: projectId, agent: { name: agent.name, editor }, footer: view === 'tools' ? (_jsx(AgentApprovalRules, { projectId: projectId, editor: editor, rules: _jsx(EditorSectionStyleProvider, { value: "panel", children: _jsx(ToolsSection, { permission: editor.oc.permission, onChange: (next) => editor.setOc('permission', next), title: tCapabilities('rulesTitle') }) }) })) : undefined }) }));
+                }
+                if (view === 'connectors')
+                    return (_jsx(Embedded, { agentName: agent.name, column: RAIL_COLUMN, children: _jsx(ConnectorsPage, { projectId: projectId, surface: surface, grant: connectorsGrant, rowControl: policySetControl, agentPanel: _jsxs(_Fragment, { children: [_jsx(AgentPolicySetsPanel, { projectId: projectId, editor: editor, catalog: policySetOptions, unlistedOnly: true }), _jsx(RequiredConnectorsNote, { names: draft.connectors_required })] }) }) }));
+                if (view === 'secrets')
+                    return (_jsx(Embedded, { agentName: agent.name, column: RAIL_COLUMN, children: _jsx(SecretsPage, { projectId: projectId, surface: surface, grant: secretsGrant }) }));
+                if (view === 'apps' && renderApps)
+                    return (_jsx(Embedded, { agentName: agent.name, column: RAIL_COLUMN, children: renderApps({ agentName: agent.name, grant: appsGrant, needsAppRead: !grantsAppRead(draft.kortix_permissions ?? draft.kortix_cli) }) }));
+                if (view === 'drives')
+                    return (_jsx(Embedded, { agentName: agent.name, column: RAIL_COLUMN, children: _jsx(AgentDrivesSection, { projectId: projectId, agentName: agent.name, repositoryAccess: draft.repository_access !== false }) }));
+                // Model is this agent's model only. The project-wide gateway screens
+                // (providers, routing, costs, logs) live once, in Project admin.
+                if (view === 'model')
+                    return (_jsx(AgentTabBody, { children: _jsx(AgentModelView, { oc: editor.oc, setOc: editor.setOc, footer: _jsx(ProjectModelsLink, { projectId: projectId }) }) }));
+                return (_jsx(AgentTabBody, { className: `${view === 'workspace' ? CENTER_COLUMN : RAIL_COLUMN} space-y-5`, children: _jsx(CapabilityShellEmbedProvider, { value: { agentName: agent.name }, children: editorSection(view) }) }));
+            }
+            case 'triggers':
+                return (_jsx(Embedded, { agentName: agent.name, children: _jsx(TriggersPage, { projectId: projectId, surface: surface, defaultAgent: defaultAgent }) }));
+        }
+    })();
+    return (
+    // Embedded screens leave through the router too (a configure session):
+    // they ask the same question as a link click.
+    _jsx(LeaveGuardProvider, { value: leaveGuard.confirmLeave, children: _jsxs("div", { className: "relative flex h-full min-h-0 flex-1 flex-col", children: [_jsx(AgentIdentityHeader, { slug: agent.name, title: name, facts: headerFacts, actions: _jsx(AgentActions, { projectId: projectId, agent: agent, config: config, canWrite: true, share: share }) }), _jsx(TabLayout, { tabs: _jsx(AgentTabBar, { groups: tabGroups, active: railKeyOf(location), dirty: dirtyItems }), children: _jsx(AgentSectionRail, { group: railGroupOf(tabGroups, railKeyOf(location)), active: railKeyOf(location), dirty: dirtyItems, children: body }) }), _jsx(SaveBar, { dirty: editor.isDirty, pending: update.isPending, changed: changed, onDiscard: () => setConfirmDiscard(true), onSave: saveNow }), _jsx(ConfirmDialog, { open: confirmDiscard, onOpenChange: setConfirmDiscard, title: tI18nComplete.raw('text3b13192b9d88'), description: tI18nComplete('text8a36cce34f68', { value0: name }), confirmLabel: tI18nComplete.raw('texteb1a70e39274'), cancelLabel: tI18nComplete.raw('texte76fd2add010'), confirmVariant: "destructive", onConfirm: () => {
                         setConfirmDiscard(false);
                         editor.discard();
-                    } }), _jsx(ConfirmDialog, { open: leaveGuard.pendingHref !== null, onOpenChange: (open) => {
-                        if (!open)
-                            leaveGuard.stay();
-                    }, title: tI18nComplete.raw('text2190d03af90a'), description: tI18nComplete('textbbc5a3f2ca48', { value0: capitalizeWords(agent.name) }), confirmLabel: tI18nComplete.raw('textfc6e4a408d56'), cancelLabel: tI18nComplete.raw('texte76fd2add010'), confirmVariant: "destructive", onConfirm: leaveGuard.leave })] }) }));
+                    } }), _jsx(LeaveDialog, { open: leaveGuard.asking, changed: changed, pending: update.isPending, onStay: leaveGuard.stay, onLeave: leaveGuard.leave, onSaveAndLeave: async () => {
+                        if (await onSave())
+                            leaveGuard.leave();
+                    } })] }) }));
 }
-/**
- * The Overview topic — what the agent IS: one line of description and the
- * instructions. Laid out like a Settings pane: the pane title, then each
- * field under its own section heading. A field is its own surface; no box
- * wraps a heading and a field together.
- */
-function OverviewPane({ description, onDescriptionChange, descriptionHelp, prompt, onPromptChange, }) {
+// ─── Read-only body ──────────────────────────────────────────────────────────
+/** A reader's tabs and views: what can be shown without the editor. */
+const READ_ONLY_VIEWS = ['actions', 'model'];
+function ReadOnlyAgentPage({ projectId, agent, config, block, canWrite, }) {
+    const t = useI18nTranslations('agentEditor.tabs');
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    const tEditor = useI18nTranslations('agentEditor');
-    return (_jsxs(_Fragment, { children: [_jsx(SettingsSectionHeader, { title: tEditor('overviewTitle'), className: "pb-1" }), _jsx(EditorSection, { title: tI18nComplete.raw('text526e0087cc3f'), description: descriptionHelp, bare: true, children: _jsx(Textarea, { "aria-label": tI18nComplete.raw('text526e0087cc3f'), value: description, placeholder: tI18nComplete.raw('text446f4eabf99f'), minHeight: 44, className: "text-sm", onChange: (e) => onDescriptionChange(e.target.value) }) }), _jsx(InstructionsSection, { value: prompt, onChange: onPromptChange })] }));
-}
-/**
- * The instructions — the agent's system prompt, and the thing that most IS
- * the agent. Two views of one field: Edit is the textarea, Preview renders
- * the markdown the way the agent's source file reads. It opens on Preview
- * when there is something to read and on Edit when there is not; the toggle
- * is the segmented `TabsList` at the section heading's right edge.
- */
-function InstructionsSection({ value, onChange, }) {
-    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    const [view, setView] = useState(value.trim() ? 'preview' : 'edit');
-    return (_jsx(EditorSection, { title: tI18nComplete.raw('text934652dce41d'), description: tI18nComplete.raw('text5fe8921b712c'), trailing: _jsx(Tabs, { value: view, onValueChange: (next) => setView(next), children: _jsxs(TabsList, { "aria-label": tI18nComplete.raw('texte75bb2d0d554'), children: [_jsx(TabsTrigger, { value: "edit", children: tI18nComplete.raw('text464c4ffd019e') }), _jsx(TabsTrigger, { value: "preview", children: tI18nComplete.raw('text324b134f57c7') })] }) }), bare: true, children: view === 'edit' ? (_jsx(Textarea, { "aria-label": tI18nComplete.raw('text934652dce41d'), value: value, placeholder: tI18nComplete.raw('text1436469ad07f'), minHeight: 420, autoFocus: value.trim().length > 0, className: "font-mono text-xs leading-relaxed", onChange: (e) => onChange(e.target.value) })) : (_jsx("div", { className: "bg-popover min-h-[420px] rounded-md border px-5 py-4", children: _jsx(MarkdownWithFrontmatter, { content: value }) })) }));
-}
-/**
- * The save bar. Exists only while there is something to save — an always-on
- * disabled pair of buttons is chrome that never earns its row. It floats at
- * the bottom centre of the page in the Drive selection bar's shape
- * (`project-files/components/drive-selection-bar.tsx`): a `bg-popover` card
- * as wide as its content — the state as a title over one muted line, then
- * Discard and Save as a spaced pair (a confirm is never glued to its cancel).
- * It sits outside both scrollers, so it is reachable
- * from any point in a long instruction set.
- */
-function SaveBar({ dirty, pending, onDiscard, onSave, }) {
-    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsx(AnimatePresence, { initial: false, children: dirty ? (_jsx(m.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 8 }, transition: { type: 'spring', duration: 0.3, bounce: 0 }, className: "pointer-events-none absolute inset-x-0 bottom-4 z-30 flex justify-center px-4", children: _jsxs("div", { className: "bg-popover text-popover-foreground border-border pointer-events-auto flex max-w-full items-center gap-3 rounded-lg border p-2 pl-3.5 shadow-md", children: [_jsxs("div", { className: "min-w-0", "aria-live": "polite", children: [_jsx("p", { className: "text-foreground truncate text-sm font-medium", children: tI18nComplete.raw('textefa5855ff509') }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: tI18nComplete.raw('textc8134fda3694') })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: onDiscard, disabled: pending, children: tI18nComplete.raw('texteb1a70e39274') }), _jsxs(Button, { variant: "secondary", size: "sm", className: "gap-1.5", onClick: onSave, disabled: pending, children: [pending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tI18nComplete.raw('text1509f561f241'), _jsx(Kbd, { children: tI18nComplete.raw('text8cd003e6301b') })] })] })] }) }, "save-bar")) : null }));
-}
-/**
- * Mod+S saves. The page is a document you edit, and every editor a person
- * has used saves on that chord; without it the browser offers to save the
- * HTML, which is never what anyone meant.
- */
-function useSaveShortcut(onSave) {
-    useEffect(() => {
-        const handler = (event) => {
-            if ((event.metaKey || event.ctrlKey) &&
-                !event.shiftKey &&
-                !event.altKey &&
-                event.key === 's') {
-                event.preventDefault();
-                onSave();
-            }
-        };
-        window.addEventListener('keydown', handler);
-        return () => window.removeEventListener('keydown', handler);
-    }, [onSave]);
-}
-/**
- * Holds a dirty page on the page until the person decides.
- *
- * Two exits, two guards. A tab close or a reload reaches only `beforeunload`,
- * so that is armed while dirty. An in-app link — the sidebar, a tab, the
- * breadcrumb — never fires it, and the App Router has no navigation event to
- * cancel, so anchor clicks are intercepted in the capture phase instead: the
- * click is swallowed, the target href is parked, and the page asks. `leave`
- * pushes the parked href; `stay` drops it. Modified clicks (new tab) and
- * external links pass through — nothing is lost by opening a second tab.
- */
-function useUnsavedChangesGuard(isDirty, currentPath) {
-    const router = useUiRouter();
-    const [pendingHref, setPendingHref] = useState(null);
-    useEffect(() => {
-        if (!isDirty)
-            return;
-        const onBeforeUnload = (event) => {
-            event.preventDefault();
-        };
-        const onClick = (event) => {
-            if (event.defaultPrevented || event.button !== 0)
-                return;
-            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
-                return;
-            const anchor = event.target?.closest?.('a[href]');
-            if (!(anchor instanceof HTMLAnchorElement))
-                return;
-            if (anchor.target && anchor.target !== '_self')
-                return;
-            if (anchor.origin !== window.location.origin)
-                return;
-            const href = anchor.pathname + anchor.search + anchor.hash;
-            if (href === window.location.pathname + window.location.search + window.location.hash)
-                return;
-            // A link that only changes `?section=` on this page switches topic; the
-            // draft survives that, so it never needs the question.
-            if (currentPath && anchor.pathname === currentPath)
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            setPendingHref(href);
-        };
-        window.addEventListener('beforeunload', onBeforeUnload);
-        document.addEventListener('click', onClick, true);
-        return () => {
-            window.removeEventListener('beforeunload', onBeforeUnload);
-            document.removeEventListener('click', onClick, true);
-        };
-    }, [isDirty, currentPath]);
-    return {
-        pendingHref,
-        stay: () => setPendingHref(null),
-        leave: () => {
-            const href = pendingHref;
-            setPendingHref(null);
-            if (href)
-                router.push(href);
-        },
-    };
-}
-// ─── Read-only body ────────────────────────────────────────────────────────
-function ReadOnlyAgentPage({ projectId, agent, config, canWrite, showUpgradeHint, isPlatform, }) {
-    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    const tUpgrades = useI18nTranslations('settings.upgrades');
-    // The real repo path, with any manifest anchor stripped. Agents declared in
-    // the manifest rather than as their own file carry one
-    // (`kortix.yaml#agents.<name>`), and reading that verbatim is a 404.
+    const pathname = useUiPathname();
     const sourcePath = configEntitySourcePath(agent.path);
+    // The served block carries the prompt when the read returned it; otherwise
+    // read the agent's source file.
     const fileQuery = useQuery({
         queryKey: ['entity-file-content', projectId, sourcePath],
         queryFn: () => readProjectFile(projectId, sourcePath),
         staleTime: 30_000,
-        // Meta's "source" is /workspace/AGENTS.md, not a repo file — reading it 404s.
-        enabled: !isPlatform,
+        enabled: block.behavior?.prompt === undefined,
     });
-    const pathname = useUiPathname();
-    const section = useAgentSection(isPlatform ? PLATFORM_SECTIONS : READ_ONLY_SECTIONS);
-    const source = (_jsx(EditorSection, { title: tI18nComplete.raw('text934652dce41d'), description: _jsx("span", { className: "font-mono", children: sourcePath }), lead: true, bare: true, children: _jsx("div", { className: "bg-popover overflow-hidden rounded-md border", children: _jsx(EntityFilePane, { path: sourcePath, content: fileQuery.data?.content, isLoading: fileQuery.isLoading, isError: fileQuery.isError, error: fileQuery.error, onRetry: () => {
-                    void fileQuery.refetch();
-                }, skeletonRows: 4, errorTitle: tI18nComplete.raw('text2f2f540650bf') }) }) }));
-    return (_jsx(AgentPageFrame, { header: _jsx(AgentHeader, { projectId: projectId, agent: agent, config: config, canWrite: canWrite && !isPlatform, children: agent.description ? (_jsx("p", { className: "text-muted-foreground max-w-2xl text-sm text-pretty", children: agent.description })) : null }), section: section, sections: isPlatform ? PLATFORM_SECTIONS : READ_ONLY_SECTIONS, sectionHref: sectionHrefFor(pathname), pane: _jsx(EditorSectionStyleProvider, { value: "panel", children: _jsxs("div", { className: "space-y-8", children: [isPlatform ? (_jsx(InfoBanner, { tone: "info", title: tI18nComplete.raw('text85b7a59cdbd5'), children: tI18nComplete.raw('textd9c0c74b514b') })) : showUpgradeHint ? (_jsx(InfoBanner, { tone: "info", title: tI18nComplete.raw('textdc7ab144ca89'), children: tUpgrades.rich('agentEditorHint', {
-                            code: (chunks) => _jsx("span", { className: "font-mono", children: chunks }),
-                        }) })) : null, isPlatform ? null : section === 'overview' ? (_jsxs(_Fragment, { children: [source, _jsx(AgentScope, { projectId: projectId, agentName: agent.name, scope: agent.scope })] })) : section === 'people' ? (_jsx(AgentPeopleSection, { projectId: projectId, agentName: agent.name })) : section === 'triggers' ? (_jsx(AgentTriggersSection, { projectId: projectId, agentName: agent.name, defaultAgent: config.default_agent ?? config.open_code_default_agent })) : section === 'actions' ? (_jsx(AgentAuthorityCard, { projectId: projectId, agentName: agent.name, grant: agent.scope?.kortix_permissions ?? agent.scope?.kortix_cli })) : (_jsxs("div", { className: "space-y-3", children: [_jsx(AgentModel, { projectId: projectId, agentName: agent.name }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('text9dee2a1acfd9') })] }))] }) }) }));
+    const prompt = block.behavior?.prompt ?? (fileQuery.data ? stripFrontmatter(fileQuery.data.content) : null);
+    const views = useMemo(() => {
+        const own = ACCESS_VIEWS.filter((v) => v === 'skills' || v === 'connectors' || v === 'secrets' || v === 'apps' || v === 'actions');
+        return [...own, 'model'];
+    }, []);
+    const location = useAgentLocation(AGENT_TABS, READ_ONLY_VIEWS);
+    const share = useShareDialog(location.open === 'share');
+    const facts = useOverviewFacts(projectId, agent.name, config, block);
+    const headerFacts = useHeaderFacts(projectId, agent, config, block, false);
+    const spacesOn = useSpacesEnabled(projectId);
+    const railItems = useRailItems(pathname, READ_ONLY_VIEWS, facts, undefined, {
+        model: modelName(block.behavior?.model),
+        workspace: block.sandbox,
+    });
+    const tabGroups = useTabGroups(railItems);
+    const name = agentDisplayName(agent.name);
+    // A reader has a page for Kortix permissions and Model only. Every other
+    // Access row shows its grant by name on the Overview and links nowhere.
+    const banner = (_jsx(InfoBanner, { tone: "neutral", icon: LockSimpleIcon, title: t('readOnlyTitle'), children: t.rich('readOnlyBody', { code: (chunks) => _jsx("span", { className: "font-mono", children: chunks }) }) }));
+    const body = (() => {
+        switch (location.tab) {
+            case 'overview':
+                return (_jsxs(AgentTabBody, { className: "space-y-6", children: [banner, _jsx(AgentOverview, { agent: agent, config: config, block: block, prompt: prompt, sourcePath: sourcePath, showSpace: spacesOn })] }));
+            case 'access':
+            case 'runtime':
+                return (_jsxs(AgentTabBody, { className: `${location.view === 'model' || location.view === 'workspace' ? CENTER_COLUMN : RAIL_COLUMN} space-y-6`, children: [banner, _jsx(EditorSectionStyleProvider, { value: "panel", children: location.view === 'model' ? (_jsxs("div", { className: "space-y-3", children: [_jsx(AgentModel, { projectId: projectId, agentName: agent.name }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('text9dee2a1acfd9') })] })) : (_jsxs("div", { className: "space-y-8", children: [_jsx(AgentScope, { projectId: projectId, agentName: agent.name, scope: agent.scope }), _jsx(AgentAuthorityCard, { projectId: projectId, agentName: agent.name, grant: block.kortix_permissions ?? block.kortix_cli })] })) })] }));
+            case 'triggers':
+                // The same Triggers screen; its own controls decide what a reader may change.
+                return (_jsx(Embedded, { agentName: agent.name, children: _jsx(TriggersPage, { projectId: projectId, surface: { kind: 'agent', agentName: agent.name }, defaultAgent: config.default_agent ?? config.open_code_default_agent }) }));
+        }
+    })();
+    return (_jsxs("div", { className: "relative flex h-full min-h-0 flex-1 flex-col", children: [_jsx(AgentIdentityHeader, { slug: agent.name, title: name, facts: headerFacts, actions: _jsx(AgentActions, { projectId: projectId, agent: agent, config: config, canWrite: canWrite, share: share }) }), _jsx(TabLayout, { tabs: _jsx(AgentTabBar, { groups: tabGroups, active: railKeyOf(location) }), children: _jsx(AgentSectionRail, { group: railGroupOf(tabGroups, railKeyOf(location)), active: railKeyOf(location), children: body }) })] }));
+}
+/** A markdown file's body without its frontmatter. */
+function stripFrontmatter(content) {
+    return content.replace(/^---\n[\s\S]*?\n---\n?/, '');
+}
+/** Whether a Kortix permissions grant lets the agent open project Apps. */
+function grantsAppRead(grant) {
+    return grant === 'all' || (Array.isArray(grant) && grant.includes('project.app.read'));
+}
+/** The Model row's value: the model id after its provider (`kortix/kimi-k2` → `kimi-k2`). */
+function modelName(model) {
+    return model ? model.slice(model.lastIndexOf('/') + 1) : undefined;
+}
+/**
+ * `connectors_required` (kortix.yaml), when the block sets it: read-only,
+ * because sessions no longer wait for these connectors.
+ */
+function RequiredConnectorsNote({ names }) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    if (!names || names.length === 0)
+        return null;
+    return (_jsxs("section", { className: "space-y-1", children: [_jsx("h2", { className: "text-sm font-medium", children: t('requiredConnectors') }), _jsx("p", { className: "text-foreground font-mono text-sm", children: names.join(', ') }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('requiredConnectorsHelp') })] }));
 }