@kortix/ui 0.14.12 → 0.14.13

package/dist/customize/sections/view/secrets-view.js

@@ -9,6 +9,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Badge } from '../../../primitives/badge.js';
 import { Button } from '../../../primitives/button.js';
 import { Checkbox } from '../../../primitives/checkbox.js';
+import { Switch } from '../../../primitives/switch.js';
+import { plainGrantSwitch } from '../../shared/access-list.js';
 import { ConfirmDialog } from '../../../primitives/confirm-dialog.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../../primitives/dropdown-menu.js';
 import { Field, FieldDescription, FieldLabel } from '../../../primitives/field.js';
@@ -29,6 +31,7 @@ import { errorToast, infoToast, successToast, warningToast } from '../../../prim
 import { EmptyState } from '../../../primitives/empty-state.js';
 import { ErrorState } from '../../../primitives/error-state.js';
 import { CapabilityPageShell } from '../../shared/capability-page-shell.js';
+import { GrantModeTabs, withCatalog, grantOrphans, } from '../../shared/agent-resource-scope.js';
 import { AudienceFields } from '../add-account-fields.js';
 import { NewEntityMenu } from '../../shared/new-entity-menu.js';
 import { newConfigPrompt, useConfigureThread, } from '../../use-configure-thread.js';
@@ -48,8 +51,10 @@ import { audienceDraftFrom, sameSharedWith, sharedWithFrom, } from './secret-aud
 import { useSlashFocus } from '../../../internal/hooks/index.js';
 const SECRET_NAME_REGEX = /^[A-Z_][A-Z0-9_]{0,63}$/;
 const IDENTIFIER_REGEX = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,127}$/;
-export function SecretsView({ projectId }) {
+export function SecretsView({ projectId, surface = { kind: 'global' }, grant, }) {
+    const agentGrant = surface.kind === 'agent' ? grant : undefined;
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const tAgentScope = useI18nTranslations('agentScope');
     const tHardcodedUi = useTranslations('hardcodedUi');
     const tI18nHardcoded = useTranslations('hardcodedUi');
     const tSecrets = useTranslations('secrets');
@@ -76,7 +81,12 @@ export function SecretsView({ projectId }) {
     // role that holds `project.secret.write` without the manager role saw a
     // read-only page, and one denied the leaf saw editable controls that 403.
     const canManage = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_SECRET_WRITE).allowed === true;
-    const allRows = useMemo(() => buildRows(normalized), [normalized]);
+    const projectRows = useMemo(() => buildRows(normalized), [normalized]);
+    // An agent's grant governs only what reaches its sandbox: environment
+    // variables and network-enforced secrets. Model logins, connector and git
+    // credentials are used by Kortix services (the model and connector settings
+    // decide who may use them), and a disabled secret reaches nothing.
+    const allRows = useMemo(() => (agentGrant ? projectRows.filter((r) => r.strategy === 'runtime' || r.strategy === 'egress') : projectRows), [agentGrant, projectRows]);
     const viewerId = useUiViewerId() ?? null;
     const tSharing = useI18nTranslations('accessSharing');
     // A legacy/enforced row keeps its "Enforce at the network" badge even with the
@@ -115,6 +125,18 @@ export function SecretsView({ projectId }) {
             return allRows;
         return allRows.filter((r) => r.identifier.toLowerCase().includes(q) || r.key.toLowerCase().includes(q));
     }, [allRows, query]);
+    // Agent scope: granted identifiers this project no longer declares (deleted,
+    // renamed, or never a project secret). Listed after the rows with a Missing
+    // mark so the editor can revoke them; a search hides them, since they hold
+    // nothing to match but the name.
+    const orphans = useMemo(() => agentGrant && !query.trim()
+        ? grantOrphans(agentGrant.value, projectRows.map((r) => r.identifier))
+        : [], [agentGrant, projectRows, query]);
+    // Agent mode: one switch per row, at the row's end, like every Access view.
+    // Turning one off under All keeps the rest (`plainGrantSwitch`).
+    const grantSwitch = agentGrant?.set
+        ? plainGrantSwitch(agentGrant.value, allRows.map((r) => r.identifier), agentGrant.set)
+        : undefined;
     const configure = useConfigureThread(projectId);
     const openCreate = () => {
         setDialogRow(null);
@@ -134,7 +156,7 @@ export function SecretsView({ projectId }) {
             if (!next && editorSaving)
                 return;
             setDialogOpen(next);
-        }, size: "lg", className: "flex-1", children: [_jsx(SplitSheetMain, { children: _jsxs(CapabilityPageShell, { title: tI18nComplete.raw('textd8707d411d99'), description: tI18nComplete.raw('texteca47e3afa10'), search: 
+        }, size: "lg", className: "flex-1", children: [_jsx(SplitSheetMain, { children: _jsxs(CapabilityPageShell, { title: tI18nComplete.raw('textd8707d411d99'), description: agentGrant ? tI18nComplete.raw('textbb74cc7dce98') : tI18nComplete.raw('texteca47e3afa10'), filters: agentGrant ? (_jsx(GrantModeTabs, { grant: withCatalog(agentGrant, allRows.map((r) => r.identifier)), label: tAgentScope('secretsAccess') })) : undefined, search: 
                     /* Hidden until there is a list to search, the same rule Triggers
                        uses: a filter over nothing is a control that cannot do anything. */
                     showContent && allRows.length > 0 ? (_jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(Search, {}) }), _jsx(InputGroupSearchInput, { ref: searchRef, placeholder: tI18nComplete.raw('textb5814f05b923'), value: query, onChange: (e) => setQuery(e.target.value), variant: "popover", size: "sm" }), _jsx(InputGroupSearchClear, { onClick: () => setQuery('') })] })) : undefined, titleAddon: _jsx(SecretsAccessInfo, { showEnforced: showEnforced }), action: showContent && canManage ? (_jsx(NewEntityMenu, { label: tI18nComplete.raw('text18fdd549b2ed'), pending: configure.pending, onChat: () => configure.start(newConfigPrompt('secret')), manual: {
@@ -143,7 +165,11 @@ export function SecretsView({ projectId }) {
                         } })) : undefined, children: [_jsx("div", { className: "space-y-4", children: secretsQuery.isLoading ? (_jsx("div", { className: "space-y-1", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Skeleton, { className: "h-10 rounded-md" }, i))) })) : secretsQuery.isError ? (_jsx(ErrorState, { size: "sm", title: tHardcodedUi.raw('appProjectsIdCustomizeSecretsPage.line773JsxAttrTitleFailedToLoadSecrets'), description: secretsQuery.error?.message ?? tI18nComplete.raw('text398e53499fed'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => secretsQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) })) : (_jsxs(_Fragment, { children: [missingRequired.length > 0 && (_jsx(InfoBanner, { tone: "warning", icon: _jsx(DangerTriangleSolid, { weight: "fill" }), title: tI18nComplete('text10d33709a797', {
                                             value0: missingRequired.length,
                                             value1: missingRequired.length === 1 ? 'secret' : 'secrets',
-                                        }), children: tI18nComplete.raw('textc18dc13ca821') })), filtered.length === 0 ? (query.trim() ? (_jsxs("p", { className: "text-muted-foreground px-3 py-6 text-center text-xs", children: [tI18nComplete.raw('texta8897de42124'), _jsx("span", { className: "text-foreground font-mono", children: query }), "."] })) : (_jsx(EmptyState, { icon: KeyRound, size: "sm", title: tI18nComplete.raw('text5aa40906d187'), description: tI18nComplete.raw('text234482872368'), action: canManage ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: openCreate, children: [_jsx(Plus, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textf57a23c69b34')] })) : undefined }))) : (_jsxs(Table, { className: "overflow-hidden rounded-md", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [_jsx(TableHead, { children: tI18nComplete.raw('text9b10587f84a2') }), _jsx(TableHead, { children: tI18nComplete.raw('text8e37953d23da') }), _jsx(TableHead, { children: tI18nComplete.raw('textec5ba0abb717') }), _jsx(TableHead, { children: tSharing('whoCanUse') }), _jsx(TableHead, { className: "w-[52px]", children: _jsx("span", { className: "sr-only", children: tI18nComplete.raw('textff8059dc6752') }) })] }) }), _jsx(TableBody, { children: filtered.map((row) => (_jsx(SecretTableRow, { row: row, canManage: canManage, viewerId: viewerId, busy: removeShared.isPending && removeShared.variables === row.identifier, deletingMine: deleteMine.isPending && deleteMine.variables === row.key, onEdit: () => openEdit(row), onDelete: () => setDeleteRow(row), onDeleteMine: () => deleteMine.mutate(row.key) }, row.identifier))) })] }))] })) }), _jsx(ConfirmDialog, { open: deleteRow !== null, onOpenChange: (open) => {
+                                        }), children: tI18nComplete.raw('textc18dc13ca821') })), filtered.length === 0 && orphans.length === 0 ? (query.trim() ? (_jsxs("p", { className: "text-muted-foreground px-3 py-6 text-center text-xs", children: [tI18nComplete.raw('texta8897de42124'), _jsx("span", { className: "text-foreground font-mono", children: query }), "."] })) : (_jsx(EmptyState, { icon: KeyRound, size: "sm", title: agentGrant && projectRows.length > 0 ? tAgentScope('sandboxSecretsEmptyTitle') : tI18nComplete.raw('text5aa40906d187'), description: agentGrant && projectRows.length > 0
+                                            ? tAgentScope('sandboxSecretsEmptyDescription')
+                                            : tI18nComplete.raw('text234482872368'), action: canManage ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: openCreate, children: [_jsx(Plus, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textf57a23c69b34')] })) : undefined }))) : (_jsxs(Table, { className: "overflow-hidden rounded-md", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [_jsx(TableHead, { children: tI18nComplete.raw('text9b10587f84a2') }), _jsx(TableHead, { children: tI18nComplete.raw('text8e37953d23da') }), _jsx(TableHead, { children: tI18nComplete.raw('textec5ba0abb717') }), _jsx(TableHead, { children: tSharing('whoCanUse') }), grantSwitch ? _jsx(TableHead, { className: "w-24 text-right", children: tAgentScope('thisAgent') }) : null, _jsx(TableHead, { className: "w-[52px]", children: _jsx("span", { className: "sr-only", children: tI18nComplete.raw('textff8059dc6752') }) })] }) }), _jsxs(TableBody, { children: [filtered.map((row) => (_jsx(SecretTableRow, { row: row, grantSwitch: grantSwitch, canManage: canManage, viewerId: viewerId, busy: removeShared.isPending && removeShared.variables === row.identifier, deletingMine: deleteMine.isPending && deleteMine.variables === row.key, onEdit: () => openEdit(row), onDelete: () => setDeleteRow(row), onDeleteMine: () => deleteMine.mutate(row.key) }, row.identifier))), agentGrant
+                                                        ? orphans.map((identifier) => (_jsx(MissingSecretRow, { identifier: identifier, grantSwitch: grantSwitch }, identifier)))
+                                                        : null] })] }))] })) }), _jsx(ConfirmDialog, { open: deleteRow !== null, onOpenChange: (open) => {
                                 if (!open)
                                     setDeleteRow(null);
                             }, title: tI18nComplete.raw('text1a48c8c83043'), description: deleteRow ? tI18nComplete('text05b1f0cd964e', { value0: deleteRow.identifier }) : '', confirmLabel: tI18nComplete.raw('texte2d0a54968ea'), confirmVariant: "destructive", onConfirm: () => {
@@ -294,7 +320,17 @@ function SecretMarks({ row }) {
         return null;
     return (_jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [row.system ? (_jsx(Hint, { label: tI18nComplete.raw('texte9ec6c0ad396'), side: "top", children: _jsx(Lock, { className: "text-muted-foreground size-3.5 shrink-0", "aria-label": tI18nComplete.raw('texte9ec6c0ad396') }) })) : null, row.requirement === 'required' ? (_jsx(Hint, { label: row.configured ? 'Required' : tI18nComplete.raw('text85f09652bb1d'), side: "top", children: _jsx(Asterisk, { className: cn('size-3.5 shrink-0', row.configured ? 'text-muted-foreground' : 'text-kortix-orange'), "aria-label": row.configured ? 'Required' : tI18nComplete.raw('textf0335c9d1910') }) })) : null] }));
 }
-function SecretTableRow({ row, canManage, viewerId, busy, deletingMine, onEdit, onDelete, onDeleteMine, }) {
+/**
+ * A granted identifier the project no longer declares: its name, the Missing
+ * mark, and the grant checkbox to revoke it. It has no value, delivery or
+ * audience, so those cells stay empty.
+ */
+function MissingSecretRow({ identifier, grantSwitch, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const control = grantSwitch?.(identifier);
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "max-w-[260px] align-middle", children: _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("code", { className: "text-foreground truncate font-mono text-xs", children: identifier }), _jsx(Badge, { variant: "destructive", size: "xs", children: tI18nComplete.raw('text6be36ca49ee8') })] }), _jsx("span", { className: "text-muted-foreground truncate text-xs", children: tI18nComplete.raw('textfecc36d012be') })] }) }), _jsx(TableCell, { colSpan: 3 }), _jsx(TableCell, { className: "text-right align-middle", children: control ? (_jsx(Switch, { checked: control.checked, onCheckedChange: control.onCheckedChange, "aria-label": tI18nComplete('textd4170e74c3b0', { value0: identifier }) })) : null }), _jsx(TableCell, {})] }));
+}
+function SecretTableRow({ row, grantSwitch, canManage, viewerId, busy, deletingMine, onEdit, onDelete, onDeleteMine, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const tI18nHardcoded = useTranslations('hardcodedUi');
     const tSharing = useI18nTranslations('accessSharing');
@@ -305,7 +341,7 @@ function SecretTableRow({ row, canManage, viewerId, busy, deletingMine, onEdit,
     // No row tint for an unset required secret: the orange asterisk carries that
     // state, and a status hue belongs on the mark (color.md, Accents and status).
     return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "max-w-[260px] align-middle", children: _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("code", { className: "text-foreground truncate font-mono text-xs", children: row.identifier }), _jsx(SecretMarks, { row: row })] }), distinctKey && (_jsxs("code", { className: "text-muted-foreground truncate font-mono text-xs", children: ["\u2192 ", row.key] }))] }) }), _jsx(TableCell, { className: "text-muted-foreground max-w-[160px] align-middle text-xs whitespace-nowrap", children: row.mineUndecryptable ? (_jsx(UndecryptableValue, { hint: tSecrets('undecryptable.mineHint'), actionLabel: tSecrets('undecryptable.deleteMine'), onAction: onDeleteMine, pending: deletingMine })) : row.undecryptable ? (_jsx(UndecryptableValue, { onAction: canManageShared ? onEdit : undefined })) : (statusLabel(row)) }), _jsx(TableCell, { className: "max-w-[220px] align-middle whitespace-normal", children: _jsxs("div", { className: "flex flex-col items-start gap-1", children: [_jsx(Badge, { variant: delivery.tone, size: "sm", children: delivery.label }), row.requiresRotation && (_jsx("span", { className: "text-kortix-orange text-xs font-medium", children: tI18nComplete.raw('texte450e0da6cf9') })), shouldWarnMissingAgentGrant(row.deliveryBlockedReason, row.strategy, row.consumer) && (_jsx("span", { className: "text-kortix-orange text-xs font-medium", children: tI18nComplete.raw('text6404e0b5d78d') }))] }) }), _jsx(TableCell, { className: "align-middle", children: row.configured ? (_jsxs("div", { className: "flex flex-col items-start gap-1", children: [_jsx(AudienceBadge, { visibility: audienceVisibility(row.sharedWith, viewerId), labels: row.sharedWith.map((share) => share.label) }), row.agents != null && (_jsx("span", { className: "text-muted-foreground text-xs", children: tSecrets('agentAccess', { agents: row.agents === 'all'
-                                    ? tSecrets('allAgents') : row.agents.join(', ') || tSecrets('noAgents') }) })), row.usable ? null : (_jsx("span", { className: "text-muted-foreground text-xs", children: tSharing('notSharedWithYou') }))] })) : null }), _jsx(TableCell, { children: !canManageShared ? null : (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { size: "icon", variant: "ghost", "aria-label": tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsSecretsViewJsxAttrAriaLabelda70cb1c'), children: busy ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(MoreHorizontal, { className: "size-3.5 shrink-0" })) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-52", children: [_jsxs(DropdownMenuItem, { onClick: onEdit, children: [_jsx(PencilSimpleIcon, { className: "size-3.5 shrink-0" }), row.configured
+                                    ? tSecrets('allAgents') : row.agents.join(', ') || tSecrets('noAgents') }) })), row.usable ? null : (_jsx("span", { className: "text-muted-foreground text-xs", children: tSharing('notSharedWithYou') }))] })) : null }), grantSwitch ? (_jsx(TableCell, { className: "text-right align-middle", children: _jsx(Switch, { ...grantSwitch(row.identifier), "aria-label": tI18nComplete('textd4170e74c3b0', { value0: row.identifier }) }) })) : null, _jsx(TableCell, { children: !canManageShared ? null : (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { size: "icon", variant: "ghost", "aria-label": tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsSecretsViewJsxAttrAriaLabelda70cb1c'), children: busy ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(MoreHorizontal, { className: "size-3.5 shrink-0" })) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-52", children: [_jsxs(DropdownMenuItem, { onClick: onEdit, children: [_jsx(PencilSimpleIcon, { className: "size-3.5 shrink-0" }), row.configured
                                             ? tI18nComplete.raw('textb5068d24eb4f')
                                             : tI18nComplete.raw('text58bf3410b028')] }), row.configured && (_jsxs(DropdownMenuItem, { onClick: onDelete, children: [_jsx(TrashIcon, { className: "size-3.5 shrink-0" }), tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsSecretsViewJsxTextDeleteSharedd7bb1731')] }))] })] })) })] }));
 }

package/dist/customize/settings/rail.js

@@ -1,4 +1,4 @@
-import { ArrowCircleUpIcon as ArrowUpCircle, ChatCircleIcon as ChatCircle, CoinsIcon as Coins, ShippingContainerIcon as Container, CreditCardIcon as CreditCard, FlaskIcon as Flask, KeyIcon as Key, LaptopIcon as Laptop, LinkIcon as Link, PaletteIcon as Palette, ShieldCheckIcon as ShieldCheck, SlidersHorizontalIcon as SlidersHorizontal, SquaresFourIcon as SquaresFour, UserIcon as User, } from '@phosphor-icons/react';
+import { ChatCircleIcon as ChatCircle, CoinsIcon as Coins, ShippingContainerIcon as Container, CreditCardIcon as CreditCard, FlaskIcon as Flask, KeyIcon as Key, LaptopIcon as Laptop, LinkIcon as Link, PaletteIcon as Palette, ShieldCheckIcon as ShieldCheck, SlidersHorizontalIcon as SlidersHorizontal, SquaresFourIcon as SquaresFour, UserIcon as User, } from '@phosphor-icons/react';
 import { Mcp } from '../../internal/icons/mcp.js';
 import { ChromeRailIcon } from '../../internal/chrome/browser-icon.js';
 /**
@@ -17,7 +17,7 @@ export function isRailItemActive(item, tab) {
 const STATIC_GROUPS = [
     /**
      * No Workspace group. Project configuration — General, Sandbox templates,
-     * Feature flags, Upgrades — is the Customize bar's Settings tab
+     * Feature flags — is the Customize bar's Settings tab
      * (`/projects/<id>/config`, `capability-tab-routes.ts`), where the rest of
      * the project is configured. It sat here between 2026-09-02 and
      * 2026-09-03; Marko: the overlay is for the PERSON, so it holds only what
@@ -155,12 +155,6 @@ export const RETIRED_RAIL_ITEMS = [
         description: 'Features you can switch on before they are generally available.',
         icon: Flask,
     },
-    {
-        tab: 'upgrades',
-        label: 'Upgrades',
-        description: 'Changes an agent makes to this workspace. Every run opens a change request for you to review — nothing merges on its own.',
-        icon: ArrowUpCircle,
-    },
     // Connected accounts listed the ACCOUNT's GitHub App installations — the
     // same rows the account page's Git tab manages — under a person's own
     // settings. Gone from the rail on 2026-09-03 (Marko); `/settings/connected`

package/dist/customize/settings/settings-tabs.d.ts

@@ -1,4 +1,4 @@
-export type SettingsTab = 'profile' | 'security' | 'appearance' | 'sessions' | 'preferences' | 'connected' | 'chrome' | 'tokens' | 'plan' | 'credits' | 'workspace' | 'sandbox' | 'feature-flags' | 'upgrades' | 'mcp' | 'computer';
+export type SettingsTab = 'profile' | 'security' | 'appearance' | 'sessions' | 'preferences' | 'connected' | 'chrome' | 'tokens' | 'plan' | 'credits' | 'workspace' | 'sandbox' | 'feature-flags' | 'mcp' | 'computer';
 /**
  * The default must be a tab that survives every gate, or the overlay opens on
  * nothing. It was `general` until project configuration moved to
@@ -84,7 +84,7 @@ export declare function isProjectGraduatedSection(rawSection: string | null | un
  * `/settings/<id>`; anything unrecognized returns `null`.
  *
  * There is no rename map left. Every id that used to be renamed INTO the
- * overlay (`settings`, `git`, `upgrade`, the seven `llm-*` ids) now names a
+ * overlay (`settings`, `git`, the seven `llm-*` ids) now names a
  * surface outside it, so all of them are entries in `GRADUATED` above.
  *
  * **`accountId` is optional and is checked FIRST.** It is the caller's

package/dist/customize/settings/settings-tabs.js

@@ -27,6 +27,7 @@ import { accountPanelUrl, hubTarget } from '../../internal/stores/account-panel-
  * legacy section/tab name and redirect them where applicable.
  */
 import { capabilityTabHref, channelsHref, } from '../../internal/lib/capability-tab-routes.js';
+import { adminPath } from '../../lib/routes.js';
 // Organization (General, Billing, Usage, Groups, Roles, Identity, Audit log)
 // and API keys are gone: every one of them configured the ACCOUNT, not the
 // project, and the account already owns a full page for them at
@@ -34,11 +35,11 @@ import { capabilityTabHref, channelsHref, } from '../../internal/lib/capability-
 //
 // The project's own configuration left too — General, Members, Secrets,
 // Channels, Repositories, Models, Sandbox templates, Snapshots, Marketplace,
-// Review, Voice, Feature flags (was `experimental`) and Upgrades. All thirteen
+// Review, Voice and Feature flags (was `experimental`). All twelve
 // became sections of the Customize bar's Settings tab, `/projects/[id]/config
 // ?section=<key>`, and that page was itself retired on 2026-09-02: each id now
 // resolves through `GRADUATED` to a capability page, or is a live tab of this
-// overlay again (`workspace`, `sandbox`, `feature-flags`, `upgrades`).
+// overlay again (`workspace`, `sandbox`, `feature-flags`).
 // Nothing routes to `/config` any more — `menu-registry-destinations.test.ts`
 // fails on a palette row that tries.
 /**
@@ -63,7 +64,7 @@ export const SETTINGS_TABS = [
     // Account group was removed on 2026-09-03 (Marko) — a wallet and a
     // subscription belong to the account page, `/accounts/[id]`, and both ids
     // resolve there through `ACCOUNT_GRADUATED`.
-    // `workspace`, `sandbox`, `feature-flags` and `upgrades` are still in the
+    // `workspace`, `sandbox` and `feature-flags` are still in the
     // type — `settings-panel.tsx` keeps their panes mountable — but NOT here:
     // the overlay's Workspace group was removed on 2026-09-03 (Marko), so no
     // route or palette row may open them. Each id resolves through `GRADUATED`
@@ -102,29 +103,26 @@ export const GRADUATED = {
     schedules: (p) => capabilityTabHref(p, 'triggers'),
     webhooks: (p) => capabilityTabHref(p, 'triggers'),
     // ── Project configuration → the Customize bar's Settings tab ────────────
-    // `/projects/<id>/config` holds General, Sandbox templates, Feature flags
-    // and Upgrades. It was retired on 2026-09-02 for the overlay's Workspace
+    // `/projects/<id>/config` holds General, Sandbox templates and Feature
+    // flags. It was retired on 2026-09-02 for the overlay's Workspace
     // group and brought back on 2026-09-03 (Marko), and the overlay group went
     // — so every id that ever named one of these sections, the overlay's own
     // tab ids included, lands on the page. Review, the one section that was an
     // inbox rather than configuration, is a capability tab of its own.
-    workspace: (p) => `${capabilityTabHref(p, 'config')}`,
-    general: (p) => `${capabilityTabHref(p, 'config')}`,
-    settings: (p) => `${capabilityTabHref(p, 'config')}`,
+    workspace: (p) => capabilityTabHref(p, 'config'),
+    general: (p) => capabilityTabHref(p, 'config'),
+    settings: (p) => capabilityTabHref(p, 'config'),
     // Repositories and its pre-rename `git` are the Git repo section — its own
     // section of the Settings tab since 2026-09-03.
-    repositories: (p) => `${capabilityTabHref(p, 'config')}?section=git`,
-    git: (p) => `${capabilityTabHref(p, 'config')}?section=git`,
-    sandbox: (p) => `${capabilityTabHref(p, 'config')}?section=sandbox`,
+    repositories: (p) => adminPath(p, 'git'),
+    git: (p) => adminPath(p, 'git'),
+    sandbox: (p) => adminPath(p, 'sandbox'),
     // Snapshots merged into Sandbox templates — a snapshot is a template's
     // build history.
-    snapshots: (p) => `${capabilityTabHref(p, 'config')}?section=sandbox`,
-    'feature-flags': (p) => `${capabilityTabHref(p, 'config')}?section=feature-flags`,
+    snapshots: (p) => adminPath(p, 'sandbox'),
+    'feature-flags': (p) => adminPath(p, 'feature-flags'),
     // `experimental` was renamed Feature flags on the way.
-    experimental: (p) => `${capabilityTabHref(p, 'config')}?section=feature-flags`,
-    upgrades: (p) => `${capabilityTabHref(p, 'config')}?section=upgrades`,
-    // `upgrade`, singular, is the old Customize id for the Upgrades pane.
-    upgrade: (p) => `${capabilityTabHref(p, 'config')}?section=upgrades`,
+    experimental: (p) => adminPath(p, 'feature-flags'),
     review: (p) => capabilityTabHref(p, 'review'),
     // Secrets, Channels, and Models graduated a SECOND time — off the Settings
     // sub-nav entirely and onto their own top-level Customize tab. `models` and
@@ -230,7 +228,7 @@ export const RENAMED = {
     connected: 'profile',
     'api-keys': 'tokens',
     // Every project-configuration spelling (`general`, `git`, `snapshots`,
-    // `experimental`, `upgrade`, …) is in `GRADUATED` above: they name the
+    // `experimental`, …) is in `GRADUATED` above: they name the
     // Customize bar's Settings tab, not a tab of this overlay.
 };
 /**
@@ -268,7 +266,7 @@ export function isProjectGraduatedSection(rawSection) {
  * `/settings/<id>`; anything unrecognized returns `null`.
  *
  * There is no rename map left. Every id that used to be renamed INTO the
- * overlay (`settings`, `git`, `upgrade`, the seven `llm-*` ids) now names a
+ * overlay (`settings`, `git`, the seven `llm-*` ids) now names a
  * surface outside it, so all of them are entries in `GRADUATED` above.
  *
  * **`accountId` is optional and is checked FIRST.** It is the caller's

package/dist/customize/settings/tabs/experimental-tab.d.ts

@@ -19,6 +19,9 @@ export interface ExperimentalCopy {
     emptyTitle: string;
     emptyDescription: string;
     permission: string;
+    /** The badge on a work-in-progress flag, and what it means. */
+    wip: string;
+    wipNote: string;
 }
 export declare const DEFAULT_EXPERIMENTAL_COPY: ExperimentalCopy;
 /** The translator surface {@link localizeFeatureFlag} reads. */

package/dist/customize/settings/tabs/experimental-tab.js

@@ -58,6 +58,7 @@ import { Button } from '../../../primitives/button.js';
 import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../../primitives/input-group.js';
 import Loading from '../../../primitives/loading.js';
 import { Skeleton } from '../../../primitives/skeleton.js';
+import { Badge } from '../../../primitives/badge.js';
 import { Switch } from '../../../primitives/switch.js';
 import { errorToast } from '../../../primitives/toast.js';
 import { EmptyState } from '../../../primitives/empty-state.js';
@@ -84,6 +85,8 @@ export const DEFAULT_EXPERIMENTAL_COPY = {
     emptyTitle: 'No experimental features',
     emptyDescription: 'This deployment exposes no per-project feature flags.',
     permission: "You need the project's settings permission to change a feature flag.",
+    wip: 'Work in progress',
+    wipNote: 'Not recommended yet: it can change or break.',
 };
 function originLabel(feature, copy) {
     // An internal-only flag (`apps`) is listed only while on, and
@@ -151,7 +154,7 @@ function ExperimentalFeatureRow({ feature, pending, canManage, onToggle, copy, }
     // needed and the row stays hook-free, which is what lets the view render
     // under `renderToStaticMarkup`.
     const nameId = `feature-flag-${feature.key}`;
-    return (_jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("p", { id: nameId, className: "text-foreground text-sm font-medium", children: feature.name }), _jsx("span", { className: "text-muted-foreground text-xs", children: originLabel(feature, copy) })] }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: feature.description })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [pending ? _jsx(Loading, { className: "text-muted-foreground size-3.5" }) : null, _jsx(Switch, { "aria-labelledby": nameId, checked: feature.enabled, disabled: !canManage || pending, onCheckedChange: (v) => onToggle(feature.key, v) })] })] }));
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("p", { id: nameId, className: "text-foreground text-sm font-medium", children: feature.name }), feature.wip ? (_jsx(Badge, { variant: "warning", size: "xs", children: copy.wip })) : null, _jsx("span", { className: "text-muted-foreground text-xs", children: originLabel(feature, copy) })] }), _jsxs("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: [feature.wip ? `${copy.wipNote} ` : null, feature.description] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [pending ? _jsx(Loading, { className: "text-muted-foreground size-3.5" }) : null, _jsx(Switch, { "aria-labelledby": nameId, checked: feature.enabled, disabled: !canManage || pending, onCheckedChange: (v) => onToggle(feature.key, v) })] })] }));
 }
 /** Presentational only — no hooks, no data fetching, no store or Supabase
  *  read. Kept separate from `ExperimentalTab` so this renders under
@@ -292,5 +295,7 @@ export function ExperimentalTab({ projectId }) {
                     emptyTitle: t('emptyTitle'),
                     emptyDescription: t('emptyDescription'),
                     permission: t('permission'),
+                    wip: t('wip'),
+                    wipNote: t('wipNote'),
                 } })] }));
 }

package/dist/customize/settings/tabs/sandbox-tab.d.ts

@@ -12,7 +12,7 @@ export declare function describeState(state: string, labels?: Partial<Record<str
 /** Where the template is declared, in words a reader who has never opened the
  *  repo can act on. Replaces the raw `platform` / `UI` / `kortix.yaml` tag
  *  that used to sit last in the bullet-separated meta line. */
-export declare function describeSource(template: SandboxTemplate, manifestVersion: number | null, labels?: {
+export declare function describeSource(template: SandboxTemplate, manifestPath: string, labels?: {
     platform?: string;
     dashboard?: string;
 }): {
@@ -55,10 +55,8 @@ export interface SandboxTabViewProps {
      *  by the container from the same `canManage` gate as everything else in
      *  this tab. `undefined` (not rendered) for a non-manager. */
     headerAction?: ReactNode;
-    /** `1 | 2 | null` — drives whether the manifest hint below reads
-     *  `kortix.toml` or `kortix.yaml`. `null`/anything else falls back to
-     *  `kortix.toml`, matching `sandbox-view.tsx`'s own ternary default. */
-    manifestVersion?: number | null;
+    /** The manifest's repository path the hint below names. */
+    manifestPath?: string;
     /** `data.templates_error` from `listProjectSnapshots` — a partial-read
      *  warning, not a hard error (the hard-error path is `isError` above). */
     templatesError?: string | null;
@@ -85,7 +83,7 @@ export interface SandboxTabViewProps {
  *  read. Kept separate from `SandboxTab` so this renders under
  *  `renderToStaticMarkup` with no `QueryClientProvider` — see
  *  `GeneralTabView` for the same split. */
-export declare function SandboxTabView({ isLoading, isError, errorMessage, onRetry, headerAction, manifestVersion, templatesError, isEmpty, emptyAction, templatesSlot, copy: copyOverride, }: SandboxTabViewProps): import("react").JSX.Element;
+export declare function SandboxTabView({ isLoading, isError, errorMessage, onRetry, headerAction, manifestPath, templatesError, isEmpty, emptyAction, templatesSlot, copy: copyOverride, }: SandboxTabViewProps): import("react").JSX.Element;
 /** Container: owns every hook (project + snapshots queries, the template
  *  form's open/edit state) and renders `SandboxTabView` with real data +
  *  the templates slot, plus `SandboxTemplateForm` as a sibling (it owns its

package/dist/customize/settings/tabs/sandbox-tab.js

@@ -14,7 +14,7 @@ import { Skeleton } from '../../../primitives/skeleton.js';
 import { errorToast, successToast } from '../../../primitives/toast.js';
 import { EmptyState } from '../../../primitives/empty-state.js';
 import { ErrorState } from '../../../primitives/error-state.js';
-import { manifestFilename, useProjectManifestVersion, } from '../../../internal/lib/manifest-version.js';
+import { useProjectManifestHealth } from '../../../internal/lib/manifest-health.js';
 import { useLocale, useTranslations } from '../../../i18n/index.js';
 import { PROJECT_ACTIONS } from '../../../internal/lib/project-actions.js';
 import { useProjectCans } from '../../../internal/lib/use-project-can.js';
@@ -63,7 +63,7 @@ export function describeState(state, labels = {}) {
 /** Where the template is declared, in words a reader who has never opened the
  *  repo can act on. Replaces the raw `platform` / `UI` / `kortix.yaml` tag
  *  that used to sit last in the bullet-separated meta line. */
-export function describeSource(template, manifestVersion, labels = {}) {
+export function describeSource(template, manifestPath, labels = {}) {
     if (template.source === 'platform')
         return {
             label: labels.platform ?? 'Kortix platform',
@@ -73,7 +73,7 @@ export function describeSource(template, manifestVersion, labels = {}) {
     if (template.source === 'ui')
         return { label: labels.dashboard ?? 'This dashboard', icon: SquaresFourIcon, mono: false };
     return {
-        label: manifestFilename(manifestVersion),
+        label: manifestPath,
         icon: FileCodeIcon,
         mono: true,
     };
@@ -121,7 +121,7 @@ function TemplateCard({ projectId, template, canManage, onEdit, }) {
     const t = useTranslations('settings.sandbox');
     const locale = useLocale();
     const queryClient = useQueryClient();
-    const { version: manifestVersion } = useProjectManifestVersion(projectId);
+    const manifestPath = useProjectManifestHealth(projectId)?.path ?? 'kortix.yaml';
     const [confirmDelete, setConfirmDelete] = useState(false);
     const templateId = template.template_id ?? null;
     const requireTemplateId = () => {
@@ -157,7 +157,7 @@ function TemplateCard({ projectId, template, canManage, onEdit, }) {
         missing: t('states.notBuilt'),
         unknown: t('states.unknown'),
     });
-    const source = describeSource(template, manifestVersion, {
+    const source = describeSource(template, manifestPath, {
         platform: t('sources.platform'),
         dashboard: t('sources.dashboard'),
     });
@@ -182,7 +182,7 @@ const TEMPLATE_SKELETON_HEIGHT = 'h-60';
  *  read. Kept separate from `SandboxTab` so this renders under
  *  `renderToStaticMarkup` with no `QueryClientProvider` — see
  *  `GeneralTabView` for the same split. */
-export function SandboxTabView({ isLoading = false, isError = false, errorMessage = '', onRetry = () => { }, headerAction, manifestVersion = null, templatesError = null, isEmpty = true, emptyAction, templatesSlot, copy: copyOverride, }) {
+export function SandboxTabView({ isLoading = false, isError = false, errorMessage = '', onRetry = () => { }, headerAction, manifestPath = 'kortix.yaml', templatesError = null, isEmpty = true, emptyAction, templatesSlot, copy: copyOverride, }) {
     const t = useTranslations('settings.sandbox');
     const copy = copyOverride ?? {
         loadFailed: t('loadFailed'),
@@ -194,7 +194,7 @@ export function SandboxTabView({ isLoading = false, isError = false, errorMessag
         emptyDescription: t('emptyDescription'),
     };
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
-    return (_jsx("div", { className: "mx-auto w-full max-w-2xl space-y-8", children: _jsxs("div", { className: "space-y-8", children: [_jsx(SettingsTabHeader, { tab: "sandbox", action: headerAction }), isLoading ? (_jsx("div", { className: "space-y-2", children: TEMPLATE_SKELETON_ROWS.map((row) => (_jsx(Skeleton, { className: cn(TEMPLATE_SKELETON_HEIGHT, 'rounded-md') }, row))) })) : isError ? (_jsx(ErrorState, { size: "sm", title: copy.loadFailed, description: errorMessage, action: _jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: copy.retry }) })) : (_jsxs("div", { className: "space-y-4", children: [_jsxs("p", { className: "text-muted-foreground text-sm text-pretty", children: [copy.descriptionStart, " ", _jsx("code", { className: "font-mono", children: "/workspace" }), ".", ' ', copy.descriptionEnd, ' ', manifestFilename(manifestVersion) === 'kortix.yaml' ? (_jsxs(_Fragment, { children: [_jsx("code", { className: "font-mono", children: "sandbox.templates" }), ' ', tI18nComplete.raw('text582967534d0f'), ' ', _jsx("code", { className: "font-mono", children: "kortix.yaml" })] })) : (_jsxs(_Fragment, { children: [_jsx("code", { className: "font-mono", children: "[[sandbox.templates]]" }), ' ', tI18nComplete.raw('text582967534d0f'), ' ', _jsx("code", { className: "font-mono", children: "kortix.toml" })] })), "."] }), templatesError ? (_jsxs(InfoBanner, { tone: "warning", children: [copy.configReadFailed, " ", templatesError] })) : null, isEmpty ? (_jsx(EmptyState, { icon: ShippingContainerIcon, size: "sm", title: copy.emptyTitle, description: copy.emptyDescription, action: emptyAction })) : (templatesSlot)] }))] }) }));
+    return (_jsx("div", { className: "mx-auto w-full max-w-2xl space-y-8", children: _jsxs("div", { className: "space-y-8", children: [_jsx(SettingsTabHeader, { tab: "sandbox", action: headerAction }), isLoading ? (_jsx("div", { className: "space-y-2", children: TEMPLATE_SKELETON_ROWS.map((row) => (_jsx(Skeleton, { className: cn(TEMPLATE_SKELETON_HEIGHT, 'rounded-md') }, row))) })) : isError ? (_jsx(ErrorState, { size: "sm", title: copy.loadFailed, description: errorMessage, action: _jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: copy.retry }) })) : (_jsxs("div", { className: "space-y-4", children: [_jsxs("p", { className: "text-muted-foreground text-sm text-pretty", children: [copy.descriptionStart, " ", _jsx("code", { className: "font-mono", children: "/workspace" }), ".", ' ', copy.descriptionEnd, ' ', _jsx("code", { className: "font-mono", children: "sandbox.templates" }), ' ', tI18nComplete.raw('text582967534d0f'), ' ', _jsx("code", { className: "font-mono", children: manifestPath }), "."] }), templatesError ? (_jsxs(InfoBanner, { tone: "warning", children: [copy.configReadFailed, " ", templatesError] })) : null, isEmpty ? (_jsx(EmptyState, { icon: ShippingContainerIcon, size: "sm", title: copy.emptyTitle, description: copy.emptyDescription, action: emptyAction })) : (templatesSlot)] }))] }) }));
 }
 /** Container: owns every hook (project + snapshots queries, the template
  *  form's open/edit state) and renders `SandboxTabView` with real data +
@@ -206,7 +206,7 @@ export function SandboxTab({ projectId }) {
     const t = useTranslations('settings.sandbox');
     const caps = useProjectCans(projectId, SANDBOX_TAB_ACTIONS);
     const canManage = caps[PROJECT_ACTIONS.PROJECT_SANDBOX_WRITE]?.allowed === true;
-    const { version: manifestVersion } = useProjectManifestVersion(projectId);
+    const manifestPath = useProjectManifestHealth(projectId)?.path ?? 'kortix.yaml';
     const snapshotsQuery = useQuery({
         queryKey: qk.project.snapshots(projectId),
         queryFn: () => listProjectSnapshots(projectId),
@@ -235,5 +235,5 @@ export function SandboxTab({ projectId }) {
         setFormOpen(true);
     };
     const newTemplateAction = canManage ? (_jsxs(Button, { size: "sm", variant: "outline", className: "gap-1.5 transition-transform active:scale-[0.96]", onClick: openNewForm, children: [_jsx(PlusIcon, { className: "size-3.5 shrink-0" }), t('actions.new')] })) : undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(SandboxTabView, { isLoading: snapshotsQuery.isLoading, isError: snapshotsQuery.isError, errorMessage: snapshotsQuery.error?.message ?? '', onRetry: () => snapshotsQuery.refetch(), headerAction: canManage ? (_jsxs(Button, { size: "sm", variant: "secondary", className: "gap-1.5 transition-transform active:scale-[0.96]", onClick: openNewForm, children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), t('actions.new')] })) : undefined, manifestVersion: manifestVersion, templatesError: data?.templates_error ?? null, isEmpty: templates.length === 0, emptyAction: newTemplateAction, templatesSlot: templates.length === 0 ? undefined : (_jsx("ul", { className: "space-y-2", children: templates.map((t) => (_jsx(TemplateCard, { projectId: projectId, template: t, canManage: canManage, onEdit: openEditForm }, t.template_id ?? `tpl-${t.slug}`))) })) }), _jsx(SandboxTemplateForm, { projectId: projectId, open: formOpen, onOpenChange: setFormOpen, template: editingTemplate })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SandboxTabView, { isLoading: snapshotsQuery.isLoading, isError: snapshotsQuery.isError, errorMessage: snapshotsQuery.error?.message ?? '', onRetry: () => snapshotsQuery.refetch(), headerAction: canManage ? (_jsxs(Button, { size: "sm", variant: "secondary", className: "gap-1.5 transition-transform active:scale-[0.96]", onClick: openNewForm, children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), t('actions.new')] })) : undefined, manifestPath: manifestPath, templatesError: data?.templates_error ?? null, isEmpty: templates.length === 0, emptyAction: newTemplateAction, templatesSlot: templates.length === 0 ? undefined : (_jsx("ul", { className: "space-y-2", children: templates.map((t) => (_jsx(TemplateCard, { projectId: projectId, template: t, canManage: canManage, onEdit: openEditForm }, t.template_id ?? `tpl-${t.slug}`))) })) }), _jsx(SandboxTemplateForm, { projectId: projectId, open: formOpen, onOpenChange: setFormOpen, template: editingTemplate })] }));
 }

package/dist/customize/shared/access-list.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+export { plainGrantSwitch } from './agent-resource-scope.js';
+export interface AccessItem {
+    id: string;
+    /** Defaults to the id, in mono: most items are names a person types. */
+    title?: ReactNode;
+    /** A real logo only (a connector's app mark). */
+    leading?: ReactNode;
+    /** One line. The whole text shows on hover. */
+    description?: ReactNode;
+    /** An exception only (Needs auth, Not set). The normal state carries none. */
+    status?: ReactNode;
+    /** The row's rule beside its switch, in the agent page's rail layout: Ask, Allow, a policy set. */
+    control?: ReactNode;
+    /** Opens the item (a skill's files, a connector's page): the name becomes a link-like button. */
+    onOpen?: () => void;
+    /** Absent: the row has no switch (an always-on extension). */
+    checked?: boolean;
+    onCheckedChange?: (on: boolean) => void;
+    disabled?: boolean;
+}
+export declare function AccessList({ items, quiet }: {
+    items: AccessItem[];
+    quiet?: boolean;
+}): import("react").JSX.Element;
+/** The project's own items: the first thing a view shows. */
+export declare function AccessGroup({ title, items, empty }: {
+    title: string;
+    items: AccessItem[];
+    empty?: string;
+}): import("react").JSX.Element;
+/**
+ * What Kortix ships, after the project's items and folded: open by default
+ * only when the project has none of its own, so the view is never empty.
+ */
+export declare function BuiltinGroup({ items, defaultOpen }: {
+    items: AccessItem[];
+    defaultOpen: boolean;
+}): import("react").JSX.Element | null;

package/dist/customize/shared/access-list.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One look for every view of the agent page's Access tab (Marko, 2026-10-27:
+ * "top notch unified UX; built-in stuff more lowkey than the project's").
+ *
+ *   lead line ............................ Manage
+ *   Kortix can use [All ▾]  what the mode means
+ *   ┌ the project's items, one row each ┐
+ *   › Built-in · 9 of 12   (a quiet fold, after the project's items)
+ *
+ * Every row is the same: name, one muted line, an exception mark, a switch.
+ * Skills, Tools, Extensions, Connectors, Secrets and Apps draw from here, so
+ * a change to the row changes every view.
+ */
+import { CaretRightIcon } from '@phosphor-icons/react';
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { cn } from '../../internal/lib/utils.js';
+import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../primitives/disclosure.js';
+import { Switch } from '../../primitives/switch.js';
+import { EditorList } from '../sections/view/agent-editor-primitives.js';
+import { useCapabilityShellEmbed } from './capability-page-shell.js';
+export { plainGrantSwitch } from './agent-resource-scope.js';
+/** A one-line description reads as text: Markdown code ticks (a skill's routing text) are dropped. */
+const plain = (text) => text.replace(/`([^`]*)`/g, '$1');
+function AccessText({ item, quiet }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('block truncate text-sm leading-5 underline-offset-4 group-hover/open:underline', quiet ? 'text-muted-foreground' : 'text-foreground'), children: item.title ?? _jsx("span", { className: "font-mono !tracking-normal", children: item.id }) }), item.description ? (_jsx("span", { className: "text-muted-foreground mt-1 block truncate text-xs", title: typeof item.description === 'string' ? plain(item.description) : undefined, children: typeof item.description === 'string' ? plain(item.description) : item.description })) : null] }));
+}
+/**
+ * The agent page's rail layout: one filled, bordered card, a divider between rows; a row that is
+ * switched off reads muted; the row's rule sits left of its switch.
+ */
+function CardAccessList({ items }) {
+    const t = useI18nTranslations('agentCapabilities');
+    return (_jsx("ul", { className: "bg-popover divide-border divide-y overflow-hidden rounded-lg border", children: items.map((item) => {
+            const off = item.onCheckedChange !== undefined && !item.checked;
+            return (_jsxs("li", { "data-capability": item.id, className: cn('flex min-h-12 items-center gap-3 px-4 py-2.5', item.disabled && 'opacity-60'), children: [item.leading, item.onOpen ? (_jsx("button", { type: "button", onClick: item.onOpen, className: "group/open focus-visible:ring-ring min-w-0 flex-1 rounded-sm text-left focus-visible:ring-2 focus-visible:outline-none", children: _jsx(AccessText, { item: item, quiet: off }) })) : (_jsx("span", { className: "min-w-0 flex-1", children: _jsx(AccessText, { item: item, quiet: off }) })), item.status ? _jsx("span", { className: "flex shrink-0 items-center gap-2", children: item.status }) : null, item.control !== undefined ? (_jsx("span", { className: "text-muted-foreground flex shrink-0 justify-end text-xs", children: item.control })) : null, item.onCheckedChange ? (_jsx(Switch, { checked: item.checked ?? false, disabled: item.disabled, onCheckedChange: item.onCheckedChange, "aria-label": t('toggle', { name: typeof item.title === 'string' ? item.title : item.id }) })) : null] }, item.id));
+        }) }));
+}
+export function AccessList({ items, quiet = false }) {
+    const t = useI18nTranslations('agentCapabilities');
+    const embed = useCapabilityShellEmbed();
+    if (embed?.titled)
+        return _jsx(CardAccessList, { items: items });
+    return (_jsx(EditorList, { children: items.map((item) => (_jsxs("li", { "data-capability": item.id, className: cn('flex min-h-12 items-center gap-3 px-4 py-2', item.disabled && 'opacity-60'), children: [item.leading, item.onOpen ? (_jsx("button", { type: "button", onClick: item.onOpen, className: "group/open focus-visible:ring-ring min-w-0 flex-1 rounded-sm text-left focus-visible:ring-2 focus-visible:outline-none", children: _jsx(AccessText, { item: item, quiet: quiet }) })) : (_jsx("span", { className: "min-w-0 flex-1", children: _jsx(AccessText, { item: item, quiet: quiet }) })), item.status ? _jsx("span", { className: "flex shrink-0 items-center gap-2", children: item.status }) : null, item.onCheckedChange ? (_jsx(Switch, { checked: item.checked ?? false, disabled: item.disabled, onCheckedChange: item.onCheckedChange, "aria-label": t('toggle', { name: typeof item.title === 'string' ? item.title : item.id }) })) : null] }, item.id))) }));
+}
+/** The project's own items: the first thing a view shows. */
+export function AccessGroup({ title, items, empty }) {
+    return (_jsxs("section", { className: "space-y-3", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: title }), items.length > 0 ? (_jsx(AccessList, { items: items })) : empty ? (_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: empty })) : null] }));
+}
+/**
+ * What Kortix ships, after the project's items and folded: open by default
+ * only when the project has none of its own, so the view is never empty.
+ */
+export function BuiltinGroup({ items, defaultOpen }) {
+    const t = useI18nTranslations('agentCapabilities');
+    if (items.length === 0)
+        return null;
+    const switchable = items.filter((item) => item.onCheckedChange);
+    const on = switchable.filter((item) => item.checked).length;
+    return (_jsxs(Disclosure, { defaultOpen: defaultOpen, className: "group/builtin space-y-3", children: [_jsx(DisclosureTrigger, { children: _jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-1.5 rounded-sm text-sm focus-visible:ring-2 focus-visible:outline-none", children: [_jsx(CaretRightIcon, { "aria-hidden": true, className: "size-3.5 shrink-0 group-data-[state=open]/builtin:rotate-90" }), t('groups.builtin'), switchable.length > 0 ? (_jsx("span", { className: "tabular-nums", children: t('builtinOn', { on, total: switchable.length }) })) : null] }) }), _jsx(DisclosureContent, { children: _jsx(AccessList, { items: items, quiet: true }) })] }));
+}