@kortix/ui 0.14.5 → 0.14.7

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 { useEffect, useState } from 'react';
+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);
                 } })] }));
@@ -110,30 +115,26 @@ export function ConnectorsGrantPage({ projectId, editor, }) {
         record: connectors.find((c) => c.slug === detailSlug),
         isSuccess: connectorsQuery.isSuccess,
     });
-    useEffect(() => {
-        if (detail.isMissing)
-            setDetailSlug(null);
-    }, [detail.isMissing]);
+    if (detail.isMissing)
+        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 : []);
                                 const kept = v === 'all' || v === 'none' || !Array.isArray(v)
                                     ? []
-                                    : required.filter((slug) => v.includes(slug));
+                                    : required.filter((slug) => picked.has(slug));
                                 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 ?? [];
@@ -161,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 ────────────────────────────────────────────────────────────────
 /**
@@ -191,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" }) })] }) }));
+}