@kortix/ui 0.14.6 → 0.14.7

package/dist/customize/agents/agent-authority-card.js

@@ -22,7 +22,6 @@ import { useAgentAuthority, } from '../../access/access/agent-principals.js';
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
 import { getProjectDetail } from '@kortix/sdk';
 import { contract, qk } from '@kortix/sdk/react';
-import { ArrowUpRightIcon } from '@phosphor-icons/react';
 import { useQuery } from '@tanstack/react-query';
 export function AgentAuthorityCard({ projectId, agentName, grant, }) {
     const t = useI18nTranslations('agentPrincipals');
@@ -39,7 +38,7 @@ export function AgentAuthorityCard({ projectId, agentName, grant, }) {
         : authority.declared.length === 0
             ? t('declaredNone')
             : t('declaredCount', { count: authority.declared.length });
-    return (_jsx("div", { "data-testid": "agent-authority", children: _jsxs(EditorSection, { title: t('title'), description: t('description'), trailing: _jsx(Badge, { variant: "outline", size: "sm", className: "tabular-nums", children: t('effectiveCount', { count: authority.effective.length }) }), children: [_jsx(SettingRow, { label: t('kortixPermissions'), help: t('kortixPermissionsHelp', { agent: agentName }), children: _jsx("span", { className: "text-foreground block text-sm sm:text-right", children: declaredLabel }) }), _jsx(SettingRow, { label: t('ceiling'), help: t('ceilingHelp'), children: _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:justify-end", "data-testid": "agent-ceiling", children: [ceiling.kind === 'loading' ? (_jsx(Skeleton, { className: "h-5 w-32" })) : ceiling.kind === 'hidden' ? (_jsx("span", { className: "text-muted-foreground text-sm", children: t('ceilingHidden') })) : ceiling.kind === 'default' ? (_jsx("span", { className: "text-foreground text-sm", children: t('ceilingDefault') })) : (ceiling.roleKeys.map((key) => (_jsx(Badge, { variant: "outline", size: "sm", className: "capitalize", children: key }, key)))), accountId && ceiling.kind !== 'hidden' && ceiling.kind !== 'loading' ? (_jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "gap-1 px-2", children: _jsxs(HubLink, { to: hubTarget(accountId, { tab: 'access-projects', project: projectId }), children: [t('changeCeiling'), _jsx(ArrowUpRightIcon, { className: "size-3.5 shrink-0" })] }) })) : null] }) }), _jsx(SettingRow, { label: t('humanOnly'), help: t('humanOnlyHelp'), children: _jsx("span", { className: "text-foreground block text-sm sm:text-right", children: t('humanOnlyValue') }) }), _jsxs(SettingBlock, { label: t('effective'), help: t('effectiveHelp'), children: [_jsx("ul", { className: "flex flex-wrap gap-1", "data-testid": "agent-effective-permissions", children: authority.effective.map((permission) => (_jsx("li", { children: _jsx(Badge, { variant: "outline", size: "xs", className: "font-mono", children: permission }) }, permission))) }), authority.outsideCeiling.length > 0 ? (_jsx(DroppedList, { label: t('outsideCeiling'), permissions: authority.outsideCeiling, testId: "agent-outside-ceiling" })) : null, authority.humanOnly.length > 0 ? (_jsx(DroppedList, { label: t('droppedHumanOnly'), permissions: authority.humanOnly, testId: "agent-dropped-human-only" })) : null] })] }) }));
+    return (_jsx("div", { "data-testid": "agent-authority", children: _jsxs(EditorSection, { title: t('title'), description: t('description'), children: [_jsx(SettingRow, { label: t('kortixPermissions'), help: t('kortixPermissionsHelp', { agent: agentName }), children: _jsx("span", { className: "text-foreground block text-sm sm:text-right", children: declaredLabel }) }), _jsx(SettingRow, { label: t('ceiling'), help: t('ceilingHelp'), children: _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:justify-end", "data-testid": "agent-ceiling", children: [ceiling.kind === 'loading' ? (_jsx(Skeleton, { className: "h-5 w-32" })) : ceiling.kind === 'hidden' ? (_jsx("span", { className: "text-muted-foreground text-sm", children: t('ceilingHidden') })) : ceiling.kind === 'default' ? (_jsx("span", { className: "text-foreground text-sm", children: t('ceilingDefault') })) : (ceiling.roleKeys.map((key) => (_jsx(Badge, { variant: "outline", size: "sm", className: "capitalize", children: key }, key)))), accountId && ceiling.kind !== 'hidden' && ceiling.kind !== 'loading' ? (_jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: _jsx(HubLink, { to: hubTarget(accountId, { tab: 'access-projects', project: projectId }), children: t('changeCeiling') }) })) : null] }) }), _jsx(SettingRow, { label: t('humanOnly'), help: t('humanOnlyHelp'), children: _jsx("span", { className: "text-foreground block text-sm sm:text-right", children: t('humanOnlyValue') }) }), _jsxs(SettingBlock, { label: t('effective'), help: t('effectiveHelp'), children: [_jsx("ul", { className: "flex flex-wrap gap-1", "data-testid": "agent-effective-permissions", children: authority.effective.map((permission) => (_jsx("li", { children: _jsx(Badge, { variant: "outline", size: "xs", className: "font-mono", children: permission }) }, permission))) }), authority.outsideCeiling.length > 0 ? (_jsx(DroppedList, { label: t('outsideCeiling'), permissions: authority.outsideCeiling, testId: "agent-outside-ceiling" })) : null, authority.humanOnly.length > 0 ? (_jsx(DroppedList, { label: t('droppedHumanOnly'), permissions: authority.humanOnly, testId: "agent-dropped-human-only" })) : null] })] }) }));
 }
 function DroppedList({ label, permissions, testId, }) {
     return (_jsxs("div", { className: "space-y-1.5", "data-testid": testId, children: [_jsx("p", { className: "text-muted-foreground text-xs", children: label }), _jsx("ul", { className: "flex flex-wrap gap-1", children: permissions.map((permission) => (_jsx("li", { children: _jsx(Badge, { variant: "muted", size: "xs", className: "font-mono line-through", children: permission }) }, permission))) })] }));

package/dist/customize/agents/agent-detail-aside.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
 /**
  * The v1 fallback cards of the agent page, plus the scope-checklist helpers
@@ -19,10 +19,10 @@ import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
  */
 import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
-import { Label } from '../../primitives/label.js';
 import Loading from '../../primitives/loading.js';
 import { errorToast, successToast } from '../../primitives/toast.js';
 import { ModelSelector } from '../../session/models/model-selector.js';
+import { EditorSection, SettingRow } from '../sections/view/agent-editor-primitives.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';
@@ -51,7 +51,11 @@ export function AgentModel({ projectId, agentName }) {
         ? (models.find((x) => x.providerID === m.providerID && x.modelID === m.modelID)?.modelName ??
             `${m.providerID}/${m.modelID}`)
         : null;
-    return (_jsxs("div", { className: "bg-popover space-y-3 rounded-md border px-4 py-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { children: tI18nComplete.raw('text5e2c614c23f0') }), explicit ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('textf20c87946555') })) : null] }), canManage ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(ModelSelector, { models: models, providers: providers, selectedModel: explicit, onSelect: (m) => {
+    const help = explicit ? (_jsxs(_Fragment, { children: [tI18nComplete.raw('text40124896532d'), ' ', _jsx("span", { className: "text-foreground font-medium", children: nameOf(explicit) }), "."] })) : (_jsxs(_Fragment, { children: [tI18nComplete.raw('text46e3bd02feee'), resolved ? (_jsxs(_Fragment, { children: [' ', "(", _jsx("span", { className: "text-foreground font-medium", children: nameOf(resolved) }), ")"] })) : null, tI18nComplete.raw('textd5bf3036405d')] }));
+    return (_jsx(EditorSection, { title: tI18nComplete.raw('text5e2c614c23f0'), description: help, lead: true, children: _jsx(SettingRow, { label: tI18nComplete.raw('text34455bf1d857'), children: canManage ? (_jsxs("div", { className: "flex items-center gap-2 sm:justify-end", children: [explicit ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                            void defaults.clearAgentDefault(agentName);
+                            successToast(tI18nComplete('text86781ce4c5b4', { value0: agentName }));
+                        }, children: tI18nComplete.raw('textbc5b45ae7b60') })) : null, _jsx(ModelSelector, { models: models, providers: providers, selectedModel: explicit, onSelect: (m) => {
                             if (m) {
                                 void defaults.setAgentDefault(agentName, m);
                                 successToast(`${agentName} → ${nameOf(m)}`);
@@ -59,10 +63,7 @@ export function AgentModel({ projectId, agentName }) {
                             else {
                                 void defaults.clearAgentDefault(agentName);
                             }
-                        } }), explicit ? (_jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-2 text-xs", onClick: () => {
-                            void defaults.clearAgentDefault(agentName);
-                            successToast(tI18nComplete('text86781ce4c5b4', { value0: agentName }));
-                        }, children: tI18nComplete.raw('textbc5b45ae7b60') })) : null] })) : (_jsx(Badge, { variant: "outline", size: "sm", className: "font-mono", children: nameOf(resolved) ?? tI18nComplete.raw('text1f0a5246c481') })), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: explicit ? (_jsxs(_Fragment, { children: [tI18nComplete.raw('text40124896532d'), ' ', _jsx("span", { className: "text-foreground font-medium", children: nameOf(explicit) }), "."] })) : (_jsxs(_Fragment, { children: [tI18nComplete.raw('text46e3bd02feee'), resolved ? (_jsxs(_Fragment, { children: [' ', "(", _jsx("span", { className: "text-foreground font-medium", children: nameOf(resolved) }), ")"] })) : null, tI18nComplete.raw('textd5bf3036405d')] })) })] }));
+                        } })] })) : (_jsx("span", { className: "text-foreground block truncate text-sm sm:text-right", children: nameOf(resolved) ?? tI18nComplete.raw('text1f0a5246c481') })) }) }));
 }
 /**
  * An agent's manifest allowlist (`agents:` in kortix.yaml, or the legacy
@@ -125,13 +126,13 @@ function AgentScopeCard({ projectId, agentName, scope, }) {
     });
     // Non-managers get the read-only mirror (the old presentation).
     if (!canManage) {
-        return (_jsxs("div", { className: "bg-popover space-y-3 rounded-md border px-4 py-4", children: [_jsx(Label, { children: tI18nComplete.raw('textec5ba0abb717') }), _jsxs("dl", { className: "space-y-2", children: [_jsx(ScopeRow, { label: tI18nComplete.raw('textd8707d411d99'), value: scope.env }), _jsx(ScopeRow, { label: tI18nComplete.raw('textc3d2e79ebdd0'), value: scope.connectors }), _jsx(ScopeRow, { label: tI18nComplete.raw('text8f12a6e05e6d'), value: scope.kortix_permissions ?? scope.kortix_cli })] }), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: tI18nComplete.raw('textac4c418e412f') })] }));
+        return (_jsx(EditorSection, { title: tI18nComplete.raw('textec5ba0abb717'), bare: true, children: _jsxs("div", { className: "bg-popover space-y-3 rounded-md border px-4 py-4", children: [_jsxs("dl", { className: "space-y-2", children: [_jsx(ScopeRow, { label: tI18nComplete.raw('textd8707d411d99'), value: scope.env }), _jsx(ScopeRow, { label: tI18nComplete.raw('textc3d2e79ebdd0'), value: scope.connectors }), _jsx(ScopeRow, { label: tI18nComplete.raw('text8f12a6e05e6d'), value: scope.kortix_permissions ?? scope.kortix_cli })] }), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: tI18nComplete.raw('textac4c418e412f') })] }) }));
     }
-    return (_jsxs("div", { className: "bg-popover space-y-4 rounded-md border px-4 py-4", children: [_jsx(Label, { children: tI18nComplete.raw('textec5ba0abb717') }), _jsx(ScopeEditor, { label: tI18nComplete.raw('textd8707d411d99'), allLabel: tI18nComplete.raw('text922315177668'), emptyLabel: tI18nComplete.raw('text82a37b8c2266'), value: env, options: secretOptions, match: "case-insensitive", onChange: setEnv }, `env-${editorNonce}`), _jsx(ScopeEditor, { label: tI18nComplete.raw('textc3d2e79ebdd0'), allLabel: tI18nComplete.raw('texta2e8754e4899'), emptyLabel: tI18nComplete.raw('text389fb5217392'), value: connectors, options: connectorOptions, onChange: setConnectors }, `connectors-${editorNonce}`), _jsx("dl", { children: _jsx(ScopeRow, { label: tI18nComplete.raw('text8f12a6e05e6d'), value: scope.kortix_permissions ?? scope.kortix_cli }) }), dirty ? (_jsxs("div", { className: "border-border/50 flex items-center justify-end gap-2 border-t pt-3", children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: save.isPending, onClick: () => {
-                            setEnv(scope.env);
-                            setConnectors(scope.connectors);
-                            setEditorNonce((n) => n + 1);
-                        }, children: tI18nComplete.raw('textdaee7606b339') }), _jsxs(Button, { size: "sm", disabled: save.isPending, onClick: () => save.mutate(), children: [save.isPending && _jsx(Loading, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text1509f561f241')] })] })) : null] }));
+    return (_jsx(EditorSection, { title: tI18nComplete.raw('textec5ba0abb717'), bare: true, children: _jsxs("div", { className: "bg-popover space-y-4 rounded-md border px-4 py-4", children: [_jsx(ScopeEditor, { label: tI18nComplete.raw('textd8707d411d99'), allLabel: tI18nComplete.raw('text922315177668'), emptyLabel: tI18nComplete.raw('text82a37b8c2266'), value: env, options: secretOptions, match: "case-insensitive", onChange: setEnv }, `env-${editorNonce}`), _jsx(ScopeEditor, { label: tI18nComplete.raw('textc3d2e79ebdd0'), allLabel: tI18nComplete.raw('texta2e8754e4899'), emptyLabel: tI18nComplete.raw('text389fb5217392'), value: connectors, options: connectorOptions, onChange: setConnectors }, `connectors-${editorNonce}`), _jsx("dl", { children: _jsx(ScopeRow, { label: tI18nComplete.raw('text8f12a6e05e6d'), value: scope.kortix_permissions ?? scope.kortix_cli }) }), dirty ? (_jsxs("div", { className: "border-border/50 flex items-center justify-end gap-2 border-t pt-3", children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: save.isPending, onClick: () => {
+                                setEnv(scope.env);
+                                setConnectors(scope.connectors);
+                                setEditorNonce((n) => n + 1);
+                            }, children: tI18nComplete.raw('textdaee7606b339') }), _jsxs(Button, { size: "sm", disabled: save.isPending, onClick: () => save.mutate(), children: [save.isPending && _jsx(Loading, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text1509f561f241')] })] })) : null] }) }));
 }
 /**
  * The Secrets checklist, built from the project's secrets.
@@ -233,7 +234,7 @@ function ScopeEditor({ label, allLabel, emptyLabel, value, options, match = 'exa
     return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: label }), _jsx("div", { className: "border-border/70 inline-flex shrink-0 overflow-hidden rounded-md border", children: ['all', 'specific', 'none'].map((m) => (_jsx("button", { type: "button", onClick: () => pick(m), className: cn('px-2.5 py-1 text-xs capitalize', 'transition-[color,background-color] active:scale-[0.96]', mode === m
                                 ? 'bg-secondary text-foreground font-medium'
                                 : 'text-muted-foreground hover:bg-muted/50'), children: m }, m))) })] }), mode === 'all' ? (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: allLabel })) : null, mode === 'specific' &&
-                (rows.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: emptyLabel })) : (_jsx("div", { className: "border-border/60 max-h-44 overflow-y-auto rounded-md border p-1", children: rows.map((o) => (_jsxs("button", { type: "button", "aria-pressed": o.selected, onClick: () => toggle(o.id), className: cn('flex w-full items-center gap-2 rounded px-2 py-1 text-left text-xs transition-colors', o.selected ? 'bg-secondary' : 'hover:bg-muted/50'), children: [_jsx("span", { className: cn('flex size-4 shrink-0 items-center justify-center rounded border', o.selected
+                (rows.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: emptyLabel })) : (_jsx("div", { className: "border-border/60 max-h-44 overflow-y-auto rounded-md border p-1", children: rows.map((o) => (_jsxs("button", { type: "button", "aria-pressed": o.selected, onClick: () => toggle(o.id), className: cn('flex w-full items-center gap-2 rounded-sm px-2 py-1 text-left text-xs transition-colors', o.selected ? 'bg-secondary' : 'hover:bg-muted/50'), children: [_jsx("span", { className: cn('flex size-4 shrink-0 items-center justify-center rounded-sm border', o.selected
                                     ? 'border-foreground bg-foreground text-background'
                                     : 'border-border/70'), children: o.selected && _jsx(Check, { className: "size-3" }) }), _jsx("span", { className: "min-w-0 flex-1 truncate font-mono", children: o.label }), o.hint ? (_jsx("span", { className: "text-muted-foreground max-w-[40%] shrink-0 truncate font-mono", children: o.hint })) : null, o.orphan && (_jsx("span", { className: "text-kortix-orange", children: tI18nComplete.raw('textffa63583dfa6') }))] }, o.id))) })))] }));
 }

package/dist/customize/agents/agent-drives-section.js

@@ -3,14 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { uiRoutes } from '../../lib/routes.js';
 import { EmptyState } from '../../primitives/empty-state.js';
 import { ErrorState } from '../../primitives/error-state.js';
-import { EditorSection } from '../sections/view/agent-editor-primitives.js';
+import { EditorList, EditorSection } from '../sections/view/agent-editor-primitives.js';
 import { Button } from '../../primitives/button.js';
 import { Skeleton } from '../../primitives/skeleton.js';
 import { Switch } from '../../primitives/switch.js';
 import { errorToast } from '../../primitives/toast.js';
 import { useDriveFolder, useFolderAccess, useProjectDrive, useShareFolder, useUnshareFolder, } from '../../files/drives/use-drives.js';
 import { useTranslations } from '../../i18n/index.js';
-import { HardDriveIcon } from '@phosphor-icons/react';
 import { UiLink as Link } from '../../providers/ui-provider.js';
 /**
  * Which shared drives an agent gets, on the agent's page, beside Apps and
@@ -27,7 +26,7 @@ export function AgentDrivesSection({ projectId, agentName }) {
     const drives = (root.data?.entries ?? []).filter((e) => e.type === 'dir' && !/^\/?Users(\/|$)/.test(e.path));
     let body;
     if (drive.isLoading || root.isLoading) {
-        body = (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-13 w-full rounded-md" }), _jsx(Skeleton, { className: "h-13 w-full rounded-md" })] }));
+        body = (_jsx(EditorList, { children: [0, 1].map((i) => (_jsx("li", { className: "flex items-center gap-3 px-4 py-3", children: _jsx(Skeleton, { className: "h-4 w-40 rounded-sm" }) }, i))) }));
     }
     else if (drive.isError || root.isError || !drive.data) {
         body = (_jsx(ErrorState, { size: "sm", title: t('loadError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void root.refetch(), children: t('retry') }) }));
@@ -36,9 +35,9 @@ export function AgentDrivesSection({ projectId, agentName }) {
         body = _jsx(EmptyState, { size: "sm", title: t('noCompanyDrives') });
     }
     else {
-        body = (_jsx("ul", { className: "space-y-2", children: drives.map((entry) => (_jsx(AgentDriveRow, { driveId: drive.data.driveId, entry: entry, agentName: agentName }, entry.path))) }));
+        body = (_jsx(EditorList, { children: drives.map((entry) => (_jsx(AgentDriveRow, { driveId: drive.data.driveId, entry: entry, agentName: agentName }, entry.path))) }));
     }
-    return (_jsx(EditorSection, { title: t('customizeTitle'), description: t('accessAgentsCompanyHint'), trailing: driveHref ? (_jsx(Button, { asChild: true, variant: "ghost", size: "sm", children: _jsx(Link, { href: driveHref, children: t('driveLabel') }) })) : undefined, children: _jsx("div", { className: "py-4", children: body }) }));
+    return (_jsx(EditorSection, { title: t('customizeTitle'), description: t('accessAgentsCompanyHint'), trailing: driveHref ? (_jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: _jsx(Link, { href: driveHref, children: t('driveLabel') }) })) : undefined, lead: true, bare: true, children: body }));
 }
 function AgentDriveRow({ driveId, entry, agentName }) {
     const t = useTranslations('drives');
@@ -63,5 +62,5 @@ function AgentDriveRow({ driveId, entry, agentName }) {
             errorToast(t('shareFailed'));
         }
     };
-    return (_jsxs("li", { className: "bg-popover flex items-center gap-3 rounded-md border px-4 py-2", children: [_jsx("span", { className: "bg-muted text-muted-foreground flex size-9 shrink-0 items-center justify-center rounded-md", children: _jsx(HardDriveIcon, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground truncate text-sm font-medium", children: entry.name }), _jsx("p", { className: "text-muted-foreground truncate font-mono text-xs", children: inherited ? t('everyoneInProject') : `/drives${path}` })] }), access.isLoading ? (_jsx(Skeleton, { className: "h-5 w-9 rounded-full" })) : (_jsx(Switch, { checked: !!own || inherited, disabled: !canManage || inherited || pending, onCheckedChange: (v) => void toggle(v), "aria-label": t('levelFor', { name: entry.name }) }))] }));
+    return (_jsxs("li", { className: "flex items-center gap-3 px-4 py-2.5", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground truncate text-sm font-medium", children: entry.name }), _jsx("p", { className: "text-muted-foreground truncate font-mono text-xs", children: inherited ? t('everyoneInProject') : `/drives${path}` })] }), access.isLoading ? (_jsx(Skeleton, { className: "h-5 w-9 rounded-full" })) : (_jsx(Switch, { checked: !!own || inherited, disabled: !canManage || inherited || pending, onCheckedChange: (v) => void toggle(v), "aria-label": t('levelFor', { name: entry.name }) }))] }));
 }

package/dist/customize/agents/agent-grant-pages.js

@@ -3,75 +3,79 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { uiRoutes } from '../../lib/routes.js';
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
 /**
- * The agent editor's Access pages — Skills, Connectors, Secrets — built from
- * the SAME cards and the SAME modals as the project-wide tabs of the same
- * name (Marko, 2026-09-03: "hardcore reuse same components as much as
- * possible & same modals/dialogues"). A card here is a `CatalogCard` in
- * select mode: its checkbox says whether the agent is granted the thing, its
- * body opens the thing itself — `EntityDetailModal` for a skill,
- * `ConnectorModal` for a connector, `ProjectSecretDialog` for a secret.
+ * The agent editor's Access pages — Skills, Connectors, Secrets, Apps. Each
+ * opens the SAME modal as the project-wide tab of the same name:
+ * `EntityDetailModal` for a skill, `ConnectorModal` for a connector,
+ * `ProjectSecretDialog` for a secret.
  *
- * The grant itself is still the All · Pick · None machine from
- * `grant-mode-field.tsx`; the catalog stays on screen in every mode so All
- * reads as "every card checked" and None as "every card unchecked".
+ * Layout is the Settings page's: the pane title, one All · Pick · None row
+ * (`grant-mode-field.tsx`), then the catalog as one bordered list. The list
+ * stays on screen in every mode, so a person can still open any entry.
  */
 import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
+import { Checkbox } from '../../primitives/checkbox.js';
+import { Skeleton } from '../../primitives/skeleton.js';
 import { EmptyState } from '../../primitives/empty-state.js';
 import { ErrorState } from '../../primitives/error-state.js';
 import { connectorDisplayName } from '../connectors/connector-filter.js';
-import { ConnectorAppIcon, ConnectorConnectedMark, ConnectorStatusBadge, } from '../connectors/connector-identity.js';
+import { ConnectorAppIcon, ConnectorStatusBadge, } from '../connectors/connector-identity.js';
 import { ConnectorModal } from '../connectors/detail/connector-modal.js';
 import { providerLabel } from '../connectors/provider-label.js';
-import { CatalogCard } from '../shared/catalog/catalog-card.js';
-import { CatalogGridSkeleton } from '../shared/catalog/catalog-grid.js';
 import { detailSelection } from '../shared/detail-selection.js';
 import { EntityDetailModal } from '../shared/entity/entity-modal.js';
-import { connectorSetupStatus } from '../sections/connector-connection-form.js';
-import { GrantHeaderTrailing, RequiredConnectorToggle, } from '../sections/view/agent-editor-access-fields.js';
-import { EditorSection } from '../sections/view/agent-editor-primitives.js';
+import { ManageButton, RequiredConnectorToggle, } from '../sections/view/agent-editor-access-fields.js';
+import { EditorList, EditorSection } from '../sections/view/agent-editor-primitives.js';
 import { GrantModeField } from '../sections/view/grant-mode-field.js';
 import { buildRows, ProjectSecretDialog, } from '../sections/view/secrets-view.js';
 import { toArray } from '../shared/utils.js';
 import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
+import { cn } from '../../internal/lib/utils.js';
 import { useProjectCan } from '../../internal/lib/use-project-can.js';
 import { listConnectors, listProjectSecrets, } from '@kortix/sdk';
 import { contract, qk, useProjectAccountId, useProjectApps, } from '@kortix/sdk/react';
-import { GlobeIcon, KeyIcon, PlusIcon, SparkleIcon } from '@phosphor-icons/react';
+import { PlusIcon } from '@phosphor-icons/react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { appGrantRows } from './agent-apps-grant.js';
 /**
- * All · Pick · None over a grid of selectable cards. `items` is the project's
- * catalog; a granted id the catalog no longer has still renders, flagged, so
- * a stale grant is visible rather than silently dropped.
+ * All · Pick · None over the project's catalog, as one bordered list. The
+ * checkbox exists only in Pick mode, where it is the control; in All and
+ * None the mode row above already answers for every row. A granted id the
+ * catalog no longer has still renders, flagged, so a stale grant is visible
+ * rather than silently dropped.
  */
-function GrantCatalog({ value, onChange, allLabel, items, isLoading, isError, onRetry, empty, trailingFor, }) {
+function GrantCatalog({ value, onChange, items, isLoading, isError, onRetry, empty, trailingFor, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsx(GrantModeField, { value: value, onChange: onChange, allLabel: allLabel, noneLabel: tI18nComplete.raw('text765b240c2900'), alwaysRender: true, children: ({ selected, toggle, mode }) => {
-            if (isLoading)
-                return _jsx(CatalogGridSkeleton, {});
+    return (_jsx(GrantModeField, { value: value, onChange: onChange, alwaysRender: true, children: ({ selected, toggle, mode }) => {
+            if (isLoading) {
+                return (_jsx(EditorList, { children: [0, 1, 2].map((i) => (_jsx("li", { className: "flex items-center gap-3 px-4 py-3", children: _jsx(Skeleton, { className: "h-4 w-40 rounded-sm" }) }, i))) }));
+            }
             if (isError) {
                 return (_jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('text3f2d97c61a7e'), action: onRetry ? (_jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: tI18nComplete.raw('text942087cc2d41') })) : undefined }));
             }
             const known = new Set(items.map((i) => i.id));
-            const orphans = [...selected].filter((id) => !known.has(id));
+            const orphans = [...selected]
+                .filter((id) => !known.has(id))
+                .map((id) => ({
+                id,
+                title: _jsx("span", { className: "font-mono", children: id }),
+                description: tI18nComplete.raw('textfecc36d012be'),
+                status: (_jsx(Badge, { variant: "destructive", size: "xs", children: tI18nComplete.raw('text6be36ca49ee8') })),
+            }));
             if (items.length === 0 && orphans.length === 0)
                 return _jsx(_Fragment, { children: empty });
-            const checked = (id) => mode === 'all' || (mode === 'pick' && selected.has(id));
-            return (_jsxs("div", { className: "grid gap-2", children: [items.map((item) => (_jsx(CatalogCard, { ...item.card, trailing: _jsxs("span", { className: "flex items-center gap-1.5", children: [item.card.trailing, mode === 'pick' && selected.has(item.id) ? trailingFor?.(item.id) : null] }), onClick: item.onOpen, select: {
-                            checked: checked(item.id),
-                            onCheckedChange: () => toggle(item.id),
-                            disabled: mode !== 'pick',
-                            label: tI18nComplete('textd4170e74c3b0', { value0: item.id }),
-                        } }, item.id))), orphans.map((id) => (_jsx(CatalogCard, { title: _jsx("span", { className: "font-mono", children: id }), description: tI18nComplete.raw('textfecc36d012be'), badges: _jsx(Badge, { variant: "destructive", size: "xs", children: tI18nComplete.raw('text6be36ca49ee8') }), select: {
-                            checked: true,
-                            onCheckedChange: () => toggle(id),
-                            disabled: mode !== 'pick',
-                            label: tI18nComplete('textd4170e74c3b0', { value0: id }),
-                        } }, id)))] }));
+            return (_jsx(EditorList, { children: [...items, ...orphans].map((item) => (_jsx(GrantRow, { item: item, mode: mode, checked: selected.has(item.id), onToggle: () => toggle(item.id), checkLabel: tI18nComplete('textd4170e74c3b0', { value0: item.id }), trailing: mode === 'pick' && selected.has(item.id) ? trailingFor?.(item.id) : null }, item.id))) }));
         } }));
 }
+/**
+ * One catalog row. The checkbox and the body are two sibling controls, never
+ * one nested in the other: the checkbox grants, the body opens the entity.
+ */
+function GrantRow({ item, mode, checked, onToggle, checkLabel, trailing, }) {
+    const body = (_jsxs(_Fragment, { children: [item.leading, _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: item.title }), item.description ? (_jsx("span", { className: "text-muted-foreground block truncate text-xs", children: item.description })) : null] })] }));
+    return (_jsxs("li", { className: cn('flex min-h-13 items-center gap-3 px-4 py-2 transition-colors duration-fast', item.onOpen && 'hover:bg-hover', mode === 'none' && 'opacity-60'), children: [mode === 'pick' ? (_jsx(Checkbox, { variant: "black", checked: checked, onCheckedChange: onToggle, "aria-label": checkLabel })) : null, item.onOpen ? (_jsx("button", { type: "button", onClick: item.onOpen, className: "focus-visible:ring-ring/50 flex min-w-0 flex-1 items-center gap-3 rounded-sm text-left focus-visible:ring-2 focus-visible:outline-none", children: body })) : (_jsx("span", { className: "flex min-w-0 flex-1 items-center gap-3", children: body })), item.status || trailing ? (_jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [item.status, trailing] })) : null] }));
+}
 // ─── Skills ──────────────────────────────────────────────────────────────
 export function SkillsGrantPage({ projectId, config, editor, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
@@ -82,11 +86,12 @@ export function SkillsGrantPage({ projectId, config, editor, }) {
         record: skills.find((skill) => skill.path === selectedPath),
         isSuccess: true,
     });
-    return (_jsxs(_Fragment, { children: [_jsx(EditorSection, { title: tI18nComplete.raw('text66d0f523a379'), description: tI18nComplete.raw('text836cd8e8a791'), trailing: _jsx(GrantHeaderTrailing, { value: editor.draft.skills, tab: "skills", label: tI18nComplete.raw('text78abcbbfb830') }), children: _jsx("div", { className: "py-4", children: _jsx(GrantCatalog, { value: editor.draft.skills, onChange: (v) => editor.set('skills', v), allLabel: tI18nComplete.raw('textf059c2dbe260'), items: skills.map((skill) => ({
-                            id: skill.name,
-                            card: { title: skill.name, description: skill.description },
-                            onOpen: () => setSelectedPath(skill.path),
-                        })), empty: _jsx(EmptyState, { icon: SparkleIcon, size: "sm", title: tI18nComplete.raw('text32ae9b80f832'), description: tI18nComplete.raw('text62d220bbfcc8') }) }) }) }), _jsx(EntityDetailModal, { projectId: projectId, entity: detail.record, kind: "skill", open: detail.open, isResolving: detail.isResolving, onOpenChange: (next) => {
+    return (_jsxs(_Fragment, { children: [_jsx(EditorSection, { title: tI18nComplete.raw('text66d0f523a379'), description: tI18nComplete.raw('text836cd8e8a791'), trailing: _jsx(ManageButton, { tab: "skills" }), lead: true, bare: true, children: _jsx(GrantCatalog, { value: editor.draft.skills, onChange: (v) => editor.set('skills', v), items: skills.map((skill) => ({
+                        id: skill.name,
+                        title: skill.name,
+                        description: skill.description,
+                        onOpen: () => setSelectedPath(skill.path),
+                    })), empty: _jsx(EmptyState, { size: "sm", title: tI18nComplete.raw('text32ae9b80f832'), description: tI18nComplete.raw('text62d220bbfcc8') }) }) }), _jsx(EntityDetailModal, { projectId: projectId, entity: detail.record, kind: "skill", open: detail.open, isResolving: detail.isResolving, onOpenChange: (next) => {
                     if (!next)
                         setSelectedPath(null);
                 } })] }));
@@ -114,7 +119,7 @@ export function ConnectorsGrantPage({ projectId, editor, }) {
         setDetailSlug(null);
     const invalidate = () => queryClient.invalidateQueries({ queryKey: qk.project.connectors(projectId) });
     const { draft, set } = editor;
-    return (_jsxs(_Fragment, { children: [_jsx(EditorSection, { title: tI18nComplete.raw('textc3d2e79ebdd0'), description: tI18nComplete.raw('textc174fc077197'), trailing: _jsx(GrantHeaderTrailing, { value: draft.connectors, tab: "connectors", label: tI18nComplete.raw('textd83250185d41') }), children: _jsxs("div", { className: "space-y-2 py-4", children: [_jsx(GrantCatalog, { value: draft.connectors, onChange: (v) => {
+    return (_jsxs(_Fragment, { children: [_jsx(EditorSection, { title: tI18nComplete.raw('textc3d2e79ebdd0'), description: tI18nComplete.raw('textc174fc077197'), trailing: _jsx(ManageButton, { tab: "connectors" }), lead: true, bare: true, children: _jsxs("div", { className: "space-y-3", children: [_jsx(GrantCatalog, { value: draft.connectors, onChange: (v) => {
                                 set('connectors', v);
                                 const required = draft.connectors_required ?? [];
                                 const picked = new Set(Array.isArray(v) ? v : []);
@@ -124,15 +129,12 @@ export function ConnectorsGrantPage({ projectId, editor, }) {
                                 if (kept.length !== required.length) {
                                     set('connectors_required', kept.length ? kept : undefined);
                                 }
-                            }, allLabel: tI18nComplete.raw('text35e54cea7f41'), isLoading: connectorsQuery.isLoading, isError: connectorsQuery.isError, onRetry: () => void connectorsQuery.refetch(), items: connectors.map((connector) => ({
+                            }, isLoading: connectorsQuery.isLoading, isError: connectorsQuery.isError, onRetry: () => void connectorsQuery.refetch(), items: connectors.map((connector) => ({
                                 id: connector.slug,
-                                card: {
-                                    leading: _jsx(ConnectorAppIcon, { connector: connector, size: "lg" }),
-                                    title: connectorDisplayName(connector),
-                                    description: `${providerLabel(connector.provider)} · ${connector.actions.length} ${connector.actions.length === 1 ? 'action' : 'actions'}`,
-                                    badges: _jsx(ConnectorStatusBadge, { connector: connector }),
-                                    trailing: connectorSetupStatus(connector) === 'connected' ? (_jsx(ConnectorConnectedMark, {})) : undefined,
-                                },
+                                leading: _jsx(ConnectorAppIcon, { connector: connector, size: "sm" }),
+                                title: connectorDisplayName(connector),
+                                description: `${providerLabel(connector.provider)} · ${connector.actions.length} ${connector.actions.length === 1 ? 'action' : 'actions'}`,
+                                status: _jsx(ConnectorStatusBadge, { connector: connector }),
                                 onOpen: () => setDetailSlug(connector.slug),
                             })), trailingFor: (slug) => (_jsx(RequiredConnectorToggle, { active: draft.connectors_required?.includes(slug) === true, onToggle: () => {
                                     const current = draft.connectors_required ?? [];
@@ -160,16 +162,13 @@ export function SecretsGrantPage({ projectId, editor }) {
         open: false,
         row: null,
     });
-    return (_jsxs(_Fragment, { children: [_jsx(EditorSection, { title: tI18nComplete.raw('textd8707d411d99'), description: tI18nComplete.raw('textbb74cc7dce98'), trailing: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(GrantHeaderTrailing, { value: editor.draft.secrets, tab: "secrets", label: tI18nComplete.raw('text0b38e3daeb93') }), canWrite ? (_jsxs(Button, { variant: "secondary", size: "sm", className: "gap-1.5", onClick: () => setDialog({ open: true, row: null }), children: [_jsx(PlusIcon, { className: "size-4" }), tI18nComplete.raw('text18fdd549b2ed')] })) : null] }), children: _jsx("div", { className: "py-4", children: _jsx(GrantCatalog, { value: editor.draft.secrets, onChange: (v) => editor.set('secrets', v), allLabel: tI18nComplete.raw('text86fdc0c950d5'), isLoading: secretsQuery.isLoading, isError: secretsQuery.isError, onRetry: () => void secretsQuery.refetch(), items: rows.map((row) => ({
-                            id: row.identifier,
-                            card: {
-                                leading: (_jsx("span", { className: "bg-muted text-muted-foreground flex size-9 items-center justify-center rounded-md", children: _jsx(KeyIcon, { className: "size-4" }) })),
-                                title: _jsx("span", { className: "font-mono", children: row.identifier }),
-                                description: row.purpose ?? (row.key !== row.identifier ? `Env var ${row.key}` : null),
-                                badges: (_jsxs(_Fragment, { children: [!row.configured ? (_jsx(Badge, { variant: "destructive", size: "xs", children: tI18nComplete.raw('text4fd0272a5628') })) : null, row.system ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('text6725e7bbcd28') })) : null] })),
-                            },
-                            onOpen: () => setDialog({ open: true, row }),
-                        })), empty: _jsx(EmptyState, { icon: KeyIcon, size: "sm", title: tI18nComplete.raw('text5aa40906d187'), description: tI18nComplete.raw('textfc7605717e58'), action: canWrite ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => setDialog({ open: true, row: null }), children: [_jsx(PlusIcon, { className: "size-4" }), tI18nComplete.raw('text98aa52b34c8f')] })) : undefined }) }) }) }), _jsx(ProjectSecretDialog, { projectId: projectId, row: dialog.row, open: dialog.open, onOpenChange: (open) => setDialog((d) => ({ ...d, open })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(EditorSection, { title: tI18nComplete.raw('textd8707d411d99'), description: tI18nComplete.raw('textbb74cc7dce98'), trailing: canWrite ? (_jsxs(Button, { variant: "secondary", size: "sm", className: "gap-1.5", onClick: () => setDialog({ open: true, row: null }), children: [_jsx(PlusIcon, { className: "size-4" }), tI18nComplete.raw('text18fdd549b2ed')] })) : undefined, lead: true, bare: true, children: _jsx(GrantCatalog, { value: editor.draft.secrets, onChange: (v) => editor.set('secrets', v), isLoading: secretsQuery.isLoading, isError: secretsQuery.isError, onRetry: () => void secretsQuery.refetch(), items: rows.map((row) => ({
+                        id: row.identifier,
+                        title: _jsx("span", { className: "font-mono", children: row.identifier }),
+                        description: row.purpose ?? (row.key !== row.identifier ? `Env var ${row.key}` : null),
+                        status: !row.configured || row.system ? (_jsxs(_Fragment, { children: [!row.configured ? (_jsx(Badge, { variant: "destructive", size: "xs", children: tI18nComplete.raw('text4fd0272a5628') })) : null, row.system ? (_jsx(Badge, { variant: "muted", size: "xs", children: tI18nComplete.raw('text6725e7bbcd28') })) : null] })) : undefined,
+                        onOpen: () => setDialog({ open: true, row }),
+                    })), empty: _jsx(EmptyState, { size: "sm", title: tI18nComplete.raw('text5aa40906d187'), description: tI18nComplete.raw('textfc7605717e58'), action: canWrite ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => setDialog({ open: true, row: null }), children: [_jsx(PlusIcon, { className: "size-4" }), tI18nComplete.raw('text98aa52b34c8f')] })) : undefined }) }) }), _jsx(ProjectSecretDialog, { projectId: projectId, row: dialog.row, open: dialog.open, onOpenChange: (open) => setDialog((d) => ({ ...d, open })) })] }));
 }
 // ─── Apps ────────────────────────────────────────────────────────────────
 /**
@@ -190,13 +189,12 @@ export function AppsGrantPage({ projectId, editor }) {
     const t = useI18nTranslations('agentApps');
     const appsQuery = useProjectApps(projectId);
     const rows = appGrantRows(appsQuery.data);
-    return (_jsx(EditorSection, { title: t('title'), description: t('description'), trailing: _jsx(GrantHeaderTrailing, { value: editor.draft.apps, href: (id) => uiRoutes().apps(id), label: t('manageApps') }), children: _jsxs("div", { className: "space-y-3 py-4", "data-testid": "agent-apps-grant", children: [_jsx(GrantCatalog, { value: editor.draft.apps, onChange: (v) => editor.set('apps', v), allLabel: t('allLabel'), isLoading: appsQuery.isLoading, isError: appsQuery.isError, onRetry: () => void appsQuery.refetch(), items: rows.map((row) => ({
-                        id: row.id,
-                        card: {
-                            leading: (_jsx("span", { className: "bg-muted text-muted-foreground flex size-9 items-center justify-center rounded-md", children: _jsx(GlobeIcon, { className: "size-4" }) })),
-                            title: _jsx("span", { className: "font-mono", children: row.id }),
-                            description: row.name === row.id ? null : row.name,
-                            badges: row.needsGrant ? (_jsx(Badge, { variant: "outline", size: "xs", children: t('needsGrant') })) : (_jsx(Badge, { variant: "muted", size: "xs", children: t('openWithoutGrant') })),
-                        },
-                    })), empty: _jsx(EmptyState, { icon: GlobeIcon, size: "sm", title: t('emptyTitle'), description: t('emptyDescription') }) }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('grantNote') })] }) }));
+    return (_jsx(EditorSection, { title: t('title'), description: t('description'), trailing: _jsx(ManageButton, { href: (id) => uiRoutes().apps(id) }), lead: true, bare: true, children: _jsx("div", { className: "space-y-3", "data-testid": "agent-apps-grant", children: _jsx(GrantCatalog, { value: editor.draft.apps, onChange: (v) => editor.set('apps', v), isLoading: appsQuery.isLoading, isError: appsQuery.isError, onRetry: () => void appsQuery.refetch(), items: rows.map((row) => ({
+                    id: row.id,
+                    title: _jsx("span", { className: "font-mono", children: row.id }),
+                    description: row.name === row.id ? null : row.name,
+                    // The grant decides admission for a restricted or private App, the
+                    // normal case. Only an App that admits agents without it is flagged.
+                    status: row.needsGrant ? undefined : (_jsx(Badge, { variant: "muted", size: "xs", children: t('openWithoutGrant') })),
+                })), empty: _jsx(EmptyState, { size: "sm", title: t('emptyTitle'), description: t('emptyDescription') }) }) }) }));
 }

package/dist/customize/agents/agent-nav.prototype.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+export declare const PROTOTYPE_ENABLED: boolean;
+export declare const NAV_VARIANTS: readonly [{
+    readonly key: "rail";
+}, {
+    readonly key: "tabs";
+}, {
+    readonly key: "groups";
+}, {
+    readonly key: "inline";
+}];
+export type NavVariant = (typeof NAV_VARIANTS)[number]['key'];
+export declare function useNavVariant(): NavVariant;
+export interface NavItem {
+    key: string;
+    label: string;
+    group: string;
+}
+interface NavProps {
+    groups: {
+        group: string;
+        items: NavItem[];
+    }[];
+    section: string;
+    href: (key: string) => string;
+    /** The current value per topic — "All", "2 picked", the model name. */
+    summaries?: Partial<Record<string, string>>;
+}
+export declare function GroupedUnderlineTabs({ groups, section, href }: NavProps): import("react").JSX.Element;
+export declare function GroupSwitchTabs({ groups, section, href }: NavProps): import("react").JSX.Element;
+export declare function InlineVerticalTabs({ groups, section, href, summaries, children, }: NavProps & {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function PrototypeSwitcher(): import("react").JSX.Element | null;
+export {};

package/dist/customize/agents/agent-nav.prototype.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PROTOTYPE — throwaway. Answers one question: what replaces the agent page's
+ * left rail? Rendered on the real agent page, switched with `?variant=`:
+ *
+ *   rail     — today's left rail (the baseline; no param)
+ *   tabs     — grouped underline tabs under the header, no rail
+ *   groups   — General / Access / Runtime switch + that group's tabs
+ *   inline   — vertical tabs beside the content column, each with its value
+ *
+ * Read-only navigation over the same `?section=` links; nothing here mutates.
+ * Once a variant wins, fold it into `agent-page.tsx` properly and delete this
+ * file and the switcher. Dev builds only (`PROTOTYPE_ENABLED`).
+ */
+import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react';
+import { useCallback, useEffect } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { cn } from '../../internal/lib/utils.js';
+import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
+import { UiLink as Link, useUiPathname as usePathname, useUiRouter as useRouter, useUiSearchParams as useSearchParams, } from '../../providers/ui-provider.js';
+export const PROTOTYPE_ENABLED = process.env.NODE_ENV !== 'production';
+export const NAV_VARIANTS = [{ key: 'rail' }, { key: 'tabs' }, { key: 'groups' }, { key: 'inline' }];
+export function useNavVariant() {
+    const raw = useSearchParams().get('variant');
+    if (!PROTOTYPE_ENABLED)
+        return 'rail';
+    return NAV_VARIANTS.some((v) => v.key === raw) ? raw : 'rail';
+}
+/** `?section=` link that keeps `?variant=` so switching topics stays in the variant. */
+function useVariantHref(href) {
+    const variant = useSearchParams().get('variant');
+    return (key) => (variant ? `${href(key)}&variant=${variant}` : href(key));
+}
+// ─── tabs: grouped underline tabs ──────────────────────────────────────────
+export function GroupedUnderlineTabs({ groups, section, href }) {
+    const to = useVariantHref(href);
+    return (_jsx("nav", { className: "border-border/60 flex shrink-0 items-end gap-8 overflow-x-auto border-b px-5 pt-1", children: groups.map((g) => (_jsxs("div", { className: "flex shrink-0 flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground px-2 text-xs", children: g.group }), _jsx(Tabs, { value: section, children: _jsx(TabsList, { type: "underline", className: "h-auto gap-1 border-b-0", children: g.items.map((item) => (_jsx(TabsTrigger, { value: item.key, asChild: true, className: "w-fit flex-none px-2", children: _jsx(Link, { href: to(item.key), prefetch: true, children: item.label }) }, item.key))) }) })] }, g.group))) }));
+}
+// ─── groups: group switch + sub tabs ───────────────────────────────────────
+export function GroupSwitchTabs({ groups, section, href }) {
+    const to = useVariantHref(href);
+    const active = groups.find((g) => g.items.some((i) => i.key === section)) ?? groups[0];
+    return (_jsxs("nav", { className: "border-border/60 flex shrink-0 items-center gap-5 overflow-x-auto border-b px-5 py-2", children: [_jsx(Tabs, { value: active?.group, children: _jsx(TabsList, { children: groups.map((g) => (_jsx(TabsTrigger, { value: g.group, asChild: true, className: "w-fit flex-none", children: _jsx(Link, { href: to(g.items[0].key), prefetch: true, children: g.group }) }, g.group))) }) }), _jsx(Tabs, { value: section, children: _jsx(TabsList, { type: "underline", className: "h-auto gap-1 border-b-0", children: active?.items.map((item) => (_jsx(TabsTrigger, { value: item.key, asChild: true, className: "w-fit flex-none px-2", children: _jsx(Link, { href: to(item.key), prefetch: true, children: item.label }) }, item.key))) }) })] }));
+}
+// ─── inline: vertical tabs beside the content, with values ────────────────
+export function InlineVerticalTabs({ groups, section, href, summaries, children, }) {
+    const to = useVariantHref(href);
+    return (_jsxs("div", { className: "mx-auto flex w-full max-w-5xl items-start gap-14 px-4 py-10 pb-32 lg:py-14", children: [_jsx("nav", { className: "sticky top-0 flex w-52 shrink-0 flex-col gap-4", children: groups.map((g) => (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground px-2.5 pb-1 text-xs", children: g.group }), g.items.map((item) => {
+                            const isActive = item.key === section;
+                            return (_jsxs(Link, { href: to(item.key), prefetch: true, "aria-current": isActive ? 'page' : undefined, className: cn('flex items-center justify-between gap-3 rounded-md px-2.5 py-1.5 text-sm transition-none', isActive
+                                    ? 'bg-active text-foreground font-medium'
+                                    : 'text-muted-foreground hover:bg-hover hover:text-foreground'), children: [_jsx("span", { className: "truncate", children: item.label }), summaries?.[item.key] ? (_jsx("span", { className: "text-muted-foreground shrink-0 text-xs font-normal tabular-nums", children: summaries[item.key] })) : null] }, item.key));
+                        })] }, g.group))) }), _jsx("div", { className: "min-w-0 max-w-2xl flex-1", children: children })] }));
+}
+// ─── the floating switcher ────────────────────────────────────────────────
+export function PrototypeSwitcher() {
+    const router = useRouter();
+    const pathname = usePathname();
+    const search = useSearchParams();
+    const current = useNavVariant();
+    const t = useTranslations('agentNavPrototype');
+    const labels = {
+        rail: t('variantRail'),
+        tabs: t('variantTabs'),
+        groups: t('variantGroups'),
+        inline: t('variantInline'),
+    };
+    const index = NAV_VARIANTS.findIndex((v) => v.key === current);
+    const go = useCallback((step) => {
+        const next = NAV_VARIANTS[(index + step + NAV_VARIANTS.length) % NAV_VARIANTS.length];
+        const params = new URLSearchParams(search.toString());
+        if (next.key === 'rail')
+            params.delete('variant');
+        else
+            params.set('variant', next.key);
+        router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    }, [index, pathname, router, search]);
+    useEffect(() => {
+        const onKey = (event) => {
+            const target = event.target;
+            if (target?.closest('input, textarea, select, [contenteditable="true"]'))
+                return;
+            if (event.key === 'ArrowLeft')
+                go(-1);
+            if (event.key === 'ArrowRight')
+                go(1);
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [go]);
+    if (!PROTOTYPE_ENABLED)
+        return null;
+    return (_jsx("div", { className: "pointer-events-none fixed inset-x-0 bottom-20 z-50 flex justify-center", children: _jsxs("div", { className: "bg-foreground text-background pointer-events-auto flex items-center gap-1 rounded-full p-1 shadow-lg", children: [_jsx("button", { type: "button", "aria-label": t('previousVariant'), onClick: () => go(-1), className: "flex size-7 items-center justify-center rounded-full hover:bg-background/15", children: _jsx(CaretLeftIcon, { className: "size-3.5" }) }), _jsxs("span", { className: "min-w-56 px-2 text-center text-xs tabular-nums", children: [String.fromCharCode(65 + index), " \u00B7 ", labels[NAV_VARIANTS[index].key]] }), _jsx("button", { type: "button", "aria-label": t('nextVariant'), onClick: () => go(1), className: "flex size-7 items-center justify-center rounded-full hover:bg-background/15", children: _jsx(CaretRightIcon, { className: "size-3.5" }) })] }) }));
+}