@kortix/ui 0.14.6 → 0.14.7

package/dist/customize/sections/view/agent-editor-access-fields.js

@@ -9,7 +9,6 @@ import { useTranslations as useI18nTranslations } from '../../../i18n/index.js';
  * (`kortix.yaml`) rather than the question they answer. Same writes, same
  * platform enforcement; the heading now says what it governs.
  */
-import { Badge } from '../../../primitives/badge.js';
 import { Button } from '../../../primitives/button.js';
 import Hint from '../../../primitives/hint.js';
 import { Switch } from '../../../primitives/switch.js';
@@ -17,11 +16,11 @@ import { capabilityTabHref } from '../../../internal/lib/capability-tab-routes.j
 import { SandboxTemplateMenu, describeSandboxTemplate, } from '../../../access/sandbox-template-menu.js';
 import { cn } from '../../../internal/lib/utils.js';
 import { useKortixRouteProjectId } from '@kortix/sdk/react';
-import { ArrowRightIcon, CaretDownIcon, CubeIcon } from '@phosphor-icons/react';
+import { CaretDownIcon, CubeIcon } from '@phosphor-icons/react';
 import { UiLink as Link } from '../../../providers/ui-provider.js';
 import { EditorSection, SettingRow } from './agent-editor-primitives.js';
 import { pruneRequiredConnectors } from './connectors-personal.js';
-import { GrantSetField, KortixPermissionsField, grantSummary } from './grant-mode-field.js';
+import { GrantSetField, KortixPermissionsField } from './grant-mode-field.js';
 /**
  * Marks one granted connector as required before session start.
  *
@@ -31,27 +30,28 @@ import { GrantSetField, KortixPermissionsField, grantSummary } from './grant-mod
  */
 export function RequiredConnectorToggle({ active, onToggle, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsx(Hint, { label: active ? tI18nComplete.raw('text49c8975f345b') : tI18nComplete.raw('texta54220c82b33'), children: _jsx("button", { type: "button", "aria-pressed": active, "aria-label": active ? tI18nComplete.raw('textd16c94c19673') : tI18nComplete.raw('text63336c8a8e83'), onClick: onToggle, className: cn('shrink-0 rounded px-1.5 py-1 text-xs transition-[color,background-color,transform] active:scale-[0.96]', active
-                ? 'bg-kortix-purple/15 text-kortix-purple font-medium'
-                : 'text-muted-foreground/50 hover:text-muted-foreground hover:bg-muted/50'), children: tI18nComplete.raw('text4850b174b713') }) }));
-}
-/** The summary chip at a grant card's right edge — "All", "3 picked", "None". */
-export function GrantChip({ value }) {
-    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    const summary = grantSummary(value, tI18nComplete);
-    return (_jsx(Badge, { variant: summary.tone === 'muted' ? 'muted' : 'outline', size: "sm", className: "tabular-nums", children: summary.label }));
+    return (_jsx(Hint, { label: active ? tI18nComplete.raw('text49c8975f345b') : tI18nComplete.raw('texta54220c82b33'), children: _jsx(Button, { type: "button", variant: active ? 'secondary' : 'ghost', size: "sm", "aria-pressed": active, "aria-label": active ? tI18nComplete.raw('textd16c94c19673') : tI18nComplete.raw('text63336c8a8e83'), onClick: onToggle, className: cn('shrink-0', !active && 'text-muted-foreground'), children: tI18nComplete.raw('text4850b174b713') }) }));
 }
 /**
- * Chip plus a link to the project-wide page for the same thing. A grant page
- * picks from what the project has; adding, editing or removing one of them
- * happens on its own Customize tab (Marko, 2026-09-03: "for now … point to
- * the general page … to see & browse em all"). Full CRUD in place is the
- * follow-up.
+ * The section action of a grant page: one `secondary` button to the
+ * project-wide page for the same thing. A grant page picks from what the
+ * project has; adding, editing or removing one happens on its own Customize
+ * tab. The grant mode row already states All / Pick / None, so the header
+ * carries no summary chip.
  */
-export function GrantHeaderTrailing({ value, tab, href, label, }) {
+export function ManageButton({ tab, href, }) {
+    const tEditor = useI18nTranslations('agentEditor');
     const projectId = useKortixRouteProjectId();
-    const target = projectId ? (href ? href(projectId) : tab ? capabilityTabHref(projectId, tab) : null) : null;
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(GrantChip, { value: value }), target ? (_jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "gap-1 px-2", children: _jsxs(Link, { href: target, prefetch: true, children: [label, _jsx(ArrowRightIcon, { className: "size-3.5 shrink-0" })] }) })) : null] }));
+    const target = projectId
+        ? href
+            ? href(projectId)
+            : tab
+                ? capabilityTabHref(projectId, tab)
+                : null
+        : null;
+    if (!target)
+        return null;
+    return (_jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: _jsx(Link, { href: target, prefetch: true, children: tEditor('manage') }) }));
 }
 /*
  * Each grant set is its own page on the agent editor's rail (Marko,
@@ -60,17 +60,17 @@ export function GrantHeaderTrailing({ value, tab, href, label, }) {
  */
 export function SkillsSection({ draft, set, options }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsx(EditorSection, { title: tI18nComplete.raw('text66d0f523a379'), description: tI18nComplete.raw('textb27e54100c96'), trailing: _jsx(GrantHeaderTrailing, { value: draft.skills, tab: "skills", label: tI18nComplete.raw('text78abcbbfb830') }), children: _jsx("div", { className: "py-4", children: _jsx(GrantSetField, { value: draft.skills, onChange: (v) => set('skills', v), options: options, allLabel: tI18nComplete.raw('textf059c2dbe260'), emptyLabel: tI18nComplete.raw('text66e36043ff7c') }) }) }));
+    return (_jsx(EditorSection, { title: tI18nComplete.raw('text66d0f523a379'), description: tI18nComplete.raw('textb27e54100c96'), trailing: _jsx(ManageButton, { tab: "skills" }), lead: true, bare: true, children: _jsx(GrantSetField, { value: draft.skills, onChange: (v) => set('skills', v), options: options, emptyLabel: tI18nComplete.raw('text66e36043ff7c') }) }));
 }
 export function ConnectorsSection({ draft, set, options }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsx(EditorSection, { title: tI18nComplete.raw('textc3d2e79ebdd0'), description: tI18nComplete.raw('text00f5aae9f9d3'), trailing: _jsx(GrantHeaderTrailing, { value: draft.connectors, tab: "connectors", label: tI18nComplete.raw('textd83250185d41') }), children: _jsxs("div", { className: "space-y-2 py-4", children: [_jsx(GrantSetField, { value: draft.connectors, onChange: (v) => {
+    return (_jsx(EditorSection, { title: tI18nComplete.raw('textc3d2e79ebdd0'), description: tI18nComplete.raw('text00f5aae9f9d3'), trailing: _jsx(ManageButton, { tab: "connectors" }), lead: true, bare: true, children: _jsxs("div", { className: "space-y-3", children: [_jsx(GrantSetField, { value: draft.connectors, onChange: (v) => {
                         set('connectors', v);
                         const pruned = pruneRequiredConnectors(draft.connectors_required, v);
                         if (pruned?.length !== draft.connectors_required?.length) {
                             set('connectors_required', pruned);
                         }
-                    }, options: options, allLabel: tI18nComplete.raw('text35e54cea7f41'), emptyLabel: tI18nComplete.raw('text389fb5217392'), rowAccessory: (id, isSelected) => isSelected ? (_jsx(RequiredConnectorToggle, { active: draft.connectors_required?.includes(id) === true, onToggle: () => {
+                    }, options: options, emptyLabel: tI18nComplete.raw('text389fb5217392'), rowAccessory: (id, isSelected) => isSelected ? (_jsx(RequiredConnectorToggle, { active: draft.connectors_required?.includes(id) === true, onToggle: () => {
                             const current = draft.connectors_required ?? [];
                             const next = current.includes(id)
                                 ? current.filter((a) => a !== id)
@@ -80,7 +80,7 @@ export function ConnectorsSection({ draft, set, options }) {
 }
 export function SecretsSection({ draft, set, options }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsx(EditorSection, { title: tI18nComplete.raw('textd8707d411d99'), description: tI18nComplete.raw('text7f619d9e30a8'), trailing: _jsx(GrantHeaderTrailing, { value: draft.secrets, tab: "secrets", label: tI18nComplete.raw('text0b38e3daeb93') }), children: _jsx("div", { className: "py-4", children: _jsx(GrantSetField, { value: draft.secrets, onChange: (v) => set('secrets', v), options: options, allLabel: tI18nComplete.raw('text86fdc0c950d5'), emptyLabel: tI18nComplete.raw('text82a37b8c2266') }) }) }));
+    return (_jsx(EditorSection, { title: tI18nComplete.raw('textd8707d411d99'), description: tI18nComplete.raw('text7f619d9e30a8'), trailing: _jsx(ManageButton, { tab: "secrets" }), lead: true, bare: true, children: _jsx(GrantSetField, { value: draft.secrets, onChange: (v) => set('secrets', v), options: options, emptyLabel: tI18nComplete.raw('text82a37b8c2266') }) }));
 }
 /**
  * A kortix_version 3 grant over a project registry: the declared subagents
@@ -90,7 +90,7 @@ export function SecretsSection({ draft, set, options }) {
  */
 export function RegistryGrantSection({ grant, draft, set, options, }) {
     const t = useI18nTranslations('agents.grants');
-    return (_jsx(EditorSection, { title: t(`${grant}.title`), description: t(`${grant}.description`), trailing: _jsx(GrantChip, { value: draft[grant] }), children: _jsx("div", { className: "py-4", children: _jsx(GrantSetField, { value: draft[grant], onChange: (v) => set(grant, v), options: options, allLabel: t(`${grant}.all`), emptyLabel: t(`${grant}.empty`) }) }) }));
+    return (_jsx(EditorSection, { title: t(`${grant}.title`), description: t(`${grant}.description`), lead: true, bare: true, children: _jsx(GrantSetField, { value: draft[grant], onChange: (v) => set(grant, v), options: options, emptyLabel: t(`${grant}.empty`) }) }));
 }
 /** Kortix permissions (`kortix_permissions` in kortix.yaml): which project
  *  operations the agent may perform, through any surface. A block read from a
@@ -99,10 +99,10 @@ export function RegistryGrantSection({ grant, draft, set, options, }) {
 export function ProjectActionsSection({ draft, set }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const permissions = draft.kortix_permissions ?? draft.kortix_cli;
-    return (_jsx(EditorSection, { title: tI18nComplete.raw('text8f12a6e05e6d'), description: tI18nComplete.raw('text15365eb45e29'), trailing: _jsx(GrantChip, { value: permissions }), children: _jsx("div", { className: "py-4", children: _jsx(KortixPermissionsField, { value: permissions, onChange: (v) => {
-                    set('kortix_cli', undefined);
-                    set('kortix_permissions', v);
-                } }) }) }));
+    return (_jsx(EditorSection, { title: tI18nComplete.raw('text8f12a6e05e6d'), description: tI18nComplete.raw('text15365eb45e29'), lead: true, bare: true, children: _jsx(KortixPermissionsField, { value: permissions, onChange: (v) => {
+                set('kortix_cli', undefined);
+                set('kortix_permissions', v);
+            } }) }));
 }
 export function WorkspaceSection({ draft, set, sandboxTemplates, defaultSandboxSlug, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
@@ -116,7 +116,7 @@ export function WorkspaceSection({ draft, set, sandboxTemplates, defaultSandboxS
     // manifest on the next save.
     const stalePin = draft.sandbox && !pinned ? draft.sandbox : null;
     const PinnedIcon = pinned ? describeSandboxTemplate(pinned).Icon : CubeIcon;
-    return (_jsxs(EditorSection, { title: tI18nComplete.raw('text87bb59ba2f92'), description: tI18nComplete.raw('text76a5e5a39b4a'), children: [_jsx(SettingRow, { label: tI18nComplete.raw('text9e471951a1b4'), help: draft.sandbox
+    return (_jsxs(EditorSection, { title: tI18nComplete.raw('text87bb59ba2f92'), description: tI18nComplete.raw('text76a5e5a39b4a'), lead: true, children: [_jsx(SettingRow, { label: tI18nComplete.raw('text9e471951a1b4'), help: draft.sandbox
                     ? stalePin
                         ? tI18nComplete.raw('textb1a5c13d215e')
                         : tI18nComplete.raw('text0703d9121fd7')

package/dist/customize/sections/view/agent-editor-basics-fields.js

@@ -16,7 +16,6 @@ import { useTranslations as useI18nTranslations } from '../../../i18n/index.js';
  * section to match would strand one switch in a section of its own for a
  * reason no reader could see.
  */
-import { Badge } from '../../../primitives/badge.js';
 import { Button } from '../../../primitives/button.js';
 import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../../primitives/disclosure.js';
 import { Input } from '../../../primitives/input.js';
@@ -34,7 +33,7 @@ import { EditorSection, InlineAction, SettingBlock, SettingRow } from './agent-e
 const INHERIT = '__inherit__';
 export function BasicsSection({ draft, set, oc, setOc, showDescription = true, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsxs(EditorSection, { title: tI18nComplete.raw('text8fdd2ee8475e'), description: tI18nComplete.raw('text4e420a5186f0'), children: [_jsx(SettingRow, { label: tI18nComplete.raw('text92c1cdfdf4cb'), help: tI18nComplete.raw('textbe90a56d29da'), children: _jsx("div", { className: "flex sm:justify-end", children: _jsx(Switch, { "aria-label": tI18nComplete.raw('text92c1cdfdf4cb'), checked: draft.enabled !== false, onCheckedChange: (v) => set('enabled', v ? undefined : false) }) }) }), showDescription ? (_jsx(SettingBlock, { label: tI18nComplete.raw('text526e0087cc3f'), help: oc.mode === 'subagent'
+    return (_jsxs(EditorSection, { title: tI18nComplete.raw('text8fdd2ee8475e'), description: tI18nComplete.raw('text4e420a5186f0'), lead: true, children: [_jsx(SettingRow, { label: tI18nComplete.raw('text92c1cdfdf4cb'), help: tI18nComplete.raw('textbe90a56d29da'), children: _jsx("div", { className: "flex sm:justify-end", children: _jsx(Switch, { "aria-label": tI18nComplete.raw('text92c1cdfdf4cb'), checked: draft.enabled !== false, onCheckedChange: (v) => set('enabled', v ? undefined : false) }) }) }), showDescription ? (_jsx(SettingBlock, { label: tI18nComplete.raw('text526e0087cc3f'), help: oc.mode === 'subagent'
                     ? tI18nComplete.raw('text77e2bc11f6ab')
                     : tI18nComplete.raw('text9965df7c3221'), children: _jsx(Textarea, { "aria-label": tI18nComplete.raw('text526e0087cc3f'), value: oc.description ?? '', placeholder: tI18nComplete.raw('text446f4eabf99f'), minHeight: 44, className: "text-sm", onChange: (e) => setOc('description', e.target.value) }) })) : null, _jsx(SettingRow, { label: tI18nComplete.raw('text12f67f8539c4'), help: oc.mode ? AGENT_MODE_HELP[oc.mode] : tI18nComplete.raw('text64f405e80a8d'), children: _jsxs(Select, { value: oc.mode ?? INHERIT, onValueChange: (value) => setOc('mode', value === INHERIT ? undefined : value), children: [_jsx(SelectTrigger, { "aria-label": tI18nComplete.raw('text12f67f8539c4'), className: "h-9 w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: INHERIT, children: tI18nComplete.raw('texte8cb80e5c5cb') }), AGENT_MODES.map((mode) => (_jsx(SelectItem, { value: mode, children: AGENT_MODE_LABEL[mode] }, mode)))] })] }) }), _jsx(SettingRow, { label: tI18nComplete.raw('textc7bcb471c03d'), help: tI18nComplete.raw('textdd4971af3f91'), children: _jsx("div", { className: "flex sm:justify-end", children: _jsx(Switch, { "aria-label": tI18nComplete.raw('textc7bcb471c03d'), checked: !oc.hidden, onCheckedChange: (v) => setOc('hidden', v ? undefined : true) }) }) })] }));
 }
@@ -51,17 +50,11 @@ export function ModelSection({ oc, setOc, showPrompt = true, }) {
         ? models.find((m) => m.providerID === selectedModelKey.providerID && m.modelID === selectedModelKey.modelID)
         : undefined;
     const variantChoices = selectedModel?.variants ? Object.keys(selectedModel.variants) : [];
-    // The sampling knobs and the step cap are set on a handful of agents and
-    // read by fewer. They open only when one of them carries a value, so an
-    // agent that tunes nothing shows one row — the model — and nothing else.
-    const advancedSet = !isSliderAtDefault(oc.temperature, 0) ||
-        !isSliderAtDefault(oc.top_p, 1) ||
-        oc.steps !== undefined;
-    return (_jsxs(_Fragment, { children: [_jsxs(EditorSection, { title: tI18nComplete.raw('text5e2c614c23f0'), description: tI18nComplete.raw('text32398dbb68e2'), children: [_jsx(SettingRow, { label: tI18nComplete.raw('text34455bf1d857'), help: oc.model ? (_jsx(InlineAction, { onClick: () => setOc('model', undefined), children: tI18nComplete.raw('text9db60344e984') })) : (tI18nComplete.raw('text64f405e80a8d')), children: _jsx("div", { className: "flex sm:justify-end", children: _jsx(ModelSelector, { models: models, providers: providers, selectedModel: selectedModelKey, unsetLabel: tI18nComplete.raw('texte8cb80e5c5cb'), onSelect: (m) => setOc('model', m ? modelKeyToWire(m) : undefined) }) }) }), variantChoices.length > 0 ? (_jsx(SettingRow, { label: tI18nComplete.raw('text264c28cbf01c'), help: oc.variant
+    return (_jsxs(_Fragment, { children: [_jsxs(EditorSection, { title: tI18nComplete.raw('text5e2c614c23f0'), description: tI18nComplete.raw('text32398dbb68e2'), lead: true, children: [_jsx(SettingRow, { label: tI18nComplete.raw('text34455bf1d857'), help: oc.model ? (_jsx(InlineAction, { onClick: () => setOc('model', undefined), children: tI18nComplete.raw('text9db60344e984') })) : (tI18nComplete.raw('text64f405e80a8d')), children: _jsx("div", { className: "flex sm:justify-end", children: _jsx(ModelSelector, { models: models, providers: providers, selectedModel: selectedModelKey, unsetLabel: tI18nComplete.raw('texte8cb80e5c5cb'), onSelect: (m) => setOc('model', m ? modelKeyToWire(m) : undefined) }) }) }), variantChoices.length > 0 ? (_jsx(SettingRow, { label: tI18nComplete.raw('text264c28cbf01c'), help: oc.variant
                             ? tI18nComplete.raw('text4dd21464c579')
                             : tI18nComplete.raw('textf39c806f5724'), children: _jsx("div", { className: "flex sm:justify-end", children: _jsx(ReasoningEffortSelector, { variants: variantChoices, selectedVariant: oc.variant ?? null, onVariantChange: (v) => setOc('variant', v ?? undefined) }) }) })) : (_jsx(SettingRow, { label: tI18nComplete.raw('text3f19fe84a2de'), help: selectedModelKey
                             ? tI18nComplete.raw('text0443f619cb33')
-                            : tI18nComplete.raw('text6376d74077c0'), children: _jsx(Input, { "aria-label": tI18nComplete.raw('text3f19fe84a2de'), value: oc.variant ?? '', placeholder: tI18nComplete.raw('text352a25678fb9'), variant: "popover", className: "h-9 w-full text-sm", onChange: (e) => setOc('variant', e.target.value) }) })), showPrompt ? (_jsx(SettingBlock, { label: tI18nComplete.raw('text561257c019e5'), help: tI18nComplete.raw('textad63817393a7'), children: _jsxs(Disclosure, { variant: "outline", className: "overflow-hidden rounded-md", children: [_jsx(DisclosureTrigger, { variant: "outline", children: _jsxs(Button, { variant: "popover", className: "flex w-full items-center justify-between gap-3 rounded-none text-sm font-normal", children: [_jsx("span", { className: "min-w-0 truncate", children: oc.prompt ? firstLine(oc.prompt) : tI18nComplete.raw('textdaaf5ab03267') }), _jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: oc.prompt ? 'Edit' : tI18nComplete.raw('text47f3fe537320') })] }) }), _jsx(DisclosureContent, { variant: "outline", contentClassName: "border-border border-t", children: _jsx(Textarea, { "aria-label": tI18nComplete.raw('text561257c019e5'), value: oc.prompt ?? '', placeholder: tI18nComplete.raw('text94a18ea1d428'), minHeight: 160, className: "rounded-none border-0 font-mono text-xs focus-visible:border-0 focus-visible:ring-0", onChange: (e) => setOc('prompt', e.target.value) }) })] }) })) : null] }), _jsxs(EditorSection, { title: tI18nComplete.raw('text6d06116595a9'), description: tI18nComplete.raw('text33439eb47c9a'), trailing: _jsx(Badge, { variant: advancedSet ? 'outline' : 'muted', size: "sm", children: advancedSet ? 'Customized' : 'Defaults' }), children: [_jsx(SliderRow, { label: tI18nComplete.raw('textb958ce8b871a'), help: tI18nComplete.raw('textd380d30f3d60'), value: oc.temperature, fallback: 0, min: 0, max: 2, step: 0.05, onChange: (v) => setOc('temperature', v) }), _jsx(SliderRow, { label: tI18nComplete.raw('text714db3dbb0b7'), help: tI18nComplete.raw('text4f370db531ba'), value: oc.top_p, fallback: 1, min: 0, max: 1, step: 0.01, onChange: (v) => setOc('top_p', v) }), _jsx(SettingRow, { label: tI18nComplete.raw('textfdc639c47624'), help: tI18nComplete.raw('textbf7ff92baea3'), children: _jsx(Input, { "aria-label": tI18nComplete.raw('textfdc639c47624'), type: "number", min: 1, value: oc.steps ?? '', placeholder: tI18nComplete.raw('textf7fcff0d8fea'), variant: "popover", className: "h-9 w-full text-sm tabular-nums", onChange: (e) => setOc('steps', e.target.value ? Math.max(1, Number(e.target.value)) : undefined) }) })] })] }));
+                            : tI18nComplete.raw('text6376d74077c0'), children: _jsx(Input, { "aria-label": tI18nComplete.raw('text3f19fe84a2de'), value: oc.variant ?? '', placeholder: tI18nComplete.raw('text352a25678fb9'), variant: "popover", className: "h-9 w-full text-sm", onChange: (e) => setOc('variant', e.target.value) }) })), showPrompt ? (_jsx(SettingBlock, { label: tI18nComplete.raw('text561257c019e5'), help: tI18nComplete.raw('textad63817393a7'), children: _jsxs(Disclosure, { variant: "outline", className: "overflow-hidden rounded-md", children: [_jsx(DisclosureTrigger, { variant: "outline", children: _jsxs(Button, { variant: "popover", className: "flex w-full items-center justify-between gap-3 rounded-none text-sm font-normal", children: [_jsx("span", { className: "min-w-0 truncate", children: oc.prompt ? firstLine(oc.prompt) : tI18nComplete.raw('textdaaf5ab03267') }), _jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: oc.prompt ? 'Edit' : tI18nComplete.raw('text47f3fe537320') })] }) }), _jsx(DisclosureContent, { variant: "outline", contentClassName: "border-border border-t", children: _jsx(Textarea, { "aria-label": tI18nComplete.raw('text561257c019e5'), value: oc.prompt ?? '', placeholder: tI18nComplete.raw('text94a18ea1d428'), minHeight: 160, className: "rounded-none border-0 font-mono text-xs focus-visible:border-0 focus-visible:ring-0", onChange: (e) => setOc('prompt', e.target.value) }) })] }) })) : null] }), _jsxs(EditorSection, { title: tI18nComplete.raw('text6d06116595a9'), description: tI18nComplete.raw('text33439eb47c9a'), children: [_jsx(SliderRow, { label: tI18nComplete.raw('textb958ce8b871a'), help: tI18nComplete.raw('textd380d30f3d60'), value: oc.temperature, fallback: 0, min: 0, max: 2, step: 0.05, onChange: (v) => setOc('temperature', v) }), _jsx(SliderRow, { label: tI18nComplete.raw('text714db3dbb0b7'), help: tI18nComplete.raw('text4f370db531ba'), value: oc.top_p, fallback: 1, min: 0, max: 1, step: 0.01, onChange: (v) => setOc('top_p', v) }), _jsx(SettingRow, { label: tI18nComplete.raw('textfdc639c47624'), help: tI18nComplete.raw('textbf7ff92baea3'), children: _jsx(Input, { "aria-label": tI18nComplete.raw('textfdc639c47624'), type: "number", min: 1, value: oc.steps ?? '', placeholder: tI18nComplete.raw('textf7fcff0d8fea'), variant: "popover", className: "h-9 w-full text-sm tabular-nums", onChange: (e) => setOc('steps', e.target.value ? Math.max(1, Number(e.target.value)) : undefined) }) })] })] }));
 }
 /**
  * Whether a slider row is showing its default.

package/dist/customize/sections/view/agent-editor-primitives.d.ts

@@ -9,6 +9,7 @@
  * titles at `text-sm font-medium`, help at `text-xs text-muted-foreground`.
  * Those two sizes are the whole scale; nothing in the editor is smaller.
  */
+import type * as React from 'react';
 import { type ReactNode } from 'react';
 /**
  * How a section draws itself. `flat` is the original: a heading over
@@ -27,19 +28,36 @@ export type EditorSectionStyle = 'flat' | 'panel';
 export declare function EditorSectionStyleProvider({ value, children, }: {
     value: EditorSectionStyle;
     children: ReactNode;
-}): import("react").JSX.Element;
+}): React.JSX.Element;
 /**
- * One titled group of settings. Rows inside are separated by hairlines rather
- * than boxed individually. See `EditorSectionStyle` for the two dialects.
+ * One titled group of settings, in the Settings page's dialect
+ * (`settings/tabs/general-tab.tsx`): the heading sits on the page, never
+ * inside a box, and only the rows below it share one bordered group.
+ *
+ * `lead` marks the first section of a pane. It takes the pane title
+ * (`SettingsSectionHeader`, `text-base lg:text-xl`). Every later section
+ * takes the quieter `SettingsSubsectionHeader`. Neither shows `description`
+ * on the agent page; it renders only in the legacy `flat` style.
+ *
+ * `bare` hands the body to the caller unwrapped: a list (`GrantList`), a
+ * markdown preview, or a textarea draws its own surface.
  */
-export declare function EditorSection({ title, description, trailing, children, }: {
+export declare function EditorSection({ title, description, trailing, lead, bare, children, }: {
     title: string;
     description?: ReactNode;
-    /** A summary at the header's right edge — a `Badge` saying "All" or
-     *  "3 picked" — so a card answers its question before it is opened. */
+    /** The section's action at the header's right edge: one `secondary`
+     *  button (New, Manage) or a small control such as the Edit / Preview tabs. */
     trailing?: ReactNode;
+    lead?: boolean;
+    bare?: boolean;
     children: ReactNode;
-}): import("react").JSX.Element;
+}): React.JSX.Element;
+/**
+ * The bordered list a section hands its rows to: one `bg-popover` group,
+ * hairlines between rows, no per-row box. A stack of individually bordered
+ * cards read as ten announcements; one group reads as one list.
+ */
+export declare function EditorList({ className, ...props }: React.ComponentProps<'ul'>): React.JSX.Element;
 /**
  * Label and help on the left, control on the right — for anything that fits a
  * switch, a select, a slider, or a short input. Stacks under `sm` so a narrow
@@ -52,7 +70,7 @@ export declare function SettingRow({ label, help, children, }: {
     label: string;
     help?: ReactNode;
     children: ReactNode;
-}): import("react").JSX.Element;
+}): React.JSX.Element;
 /**
  * Label and help above a full-width control — for anything a row cannot hold:
  * a textarea, a grant checklist, the permission tree.
@@ -61,7 +79,7 @@ export declare function SettingBlock({ label, help, children, }: {
     label: string;
     help?: ReactNode;
     children: ReactNode;
-}): import("react").JSX.Element;
+}): React.JSX.Element;
 /**
  * A text button that lives inside a help line — "Reset", "Clear". Text, not an
  * icon: at this size an icon is a guess, and the word is three characters
@@ -70,4 +88,4 @@ export declare function SettingBlock({ label, help, children, }: {
 export declare function InlineAction({ onClick, children }: {
     onClick: () => void;
     children: ReactNode;
-}): import("react").JSX.Element;
+}): React.JSX.Element;

package/dist/customize/sections/view/agent-editor-primitives.js

@@ -1,33 +1,44 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Layout primitives for the agent editor. Three shapes and nothing else: a
- * titled section, a row (label left, control right), and a block (label above
- * a full-width control).
- *
- * There is deliberately NO icon slot. Every group used to open with a glyph —
- * a stack, a chip, a gauge, a shield — and not one of them named anything the
- * words beside it did not already say. Type carries the hierarchy: section
- * titles at `text-sm font-medium`, help at `text-xs text-muted-foreground`.
- * Those two sizes are the whole scale; nothing in the editor is smaller.
- */
 import { createContext, useContext } from 'react';
+import { SettingsRowGroup } from '../../../primitives/settings-row.js';
+import { SettingsSectionHeader } from '../../../primitives/settings-section-header.js';
+import { SettingsSubsectionHeader } from '../../../primitives/settings-subsection-header.js';
 import { cn } from '../../../internal/lib/utils.js';
 const EditorSectionStyleContext = createContext('flat');
 export function EditorSectionStyleProvider({ value, children, }) {
     return (_jsx(EditorSectionStyleContext.Provider, { value: value, children: children }));
 }
 /**
- * One titled group of settings. Rows inside are separated by hairlines rather
- * than boxed individually. See `EditorSectionStyle` for the two dialects.
+ * One titled group of settings, in the Settings page's dialect
+ * (`settings/tabs/general-tab.tsx`): the heading sits on the page, never
+ * inside a box, and only the rows below it share one bordered group.
+ *
+ * `lead` marks the first section of a pane. It takes the pane title
+ * (`SettingsSectionHeader`, `text-base lg:text-xl`). Every later section
+ * takes the quieter `SettingsSubsectionHeader`. Neither shows `description`
+ * on the agent page; it renders only in the legacy `flat` style.
+ *
+ * `bare` hands the body to the caller unwrapped: a list (`GrantList`), a
+ * markdown preview, or a textarea draws its own surface.
  */
-export function EditorSection({ title, description, trailing, children, }) {
+export function EditorSection({ title, description, trailing, lead = false, bare = false, children, }) {
     const style = useContext(EditorSectionStyleContext);
-    const heading = (_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: title }), description ? (_jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: description })) : null] }), trailing ? _jsx("div", { className: "shrink-0", children: trailing }) : null] }));
     if (style === 'panel') {
-        return (_jsxs("section", { className: "bg-popover rounded-md border", children: [_jsx("div", { className: "border-border/60 border-b px-4 pt-4 pb-3", children: heading }), _jsx("div", { className: cn('divide-border/60 divide-y px-4'), children: children })] }));
+        return (_jsxs("section", { className: lead ? 'space-y-6' : 'space-y-3', children: [lead ? (
+                // Headings stand alone (Jay, 2026-10-20): a sentence under every
+                // title made the page read as prose.
+                _jsx(SettingsSectionHeader, { title: title, action: trailing, className: "pb-1" })) : (_jsx(SettingsSubsectionHeader, { title: title, action: trailing })), bare ? children : _jsx(SettingsRowGroup, { children: children })] }));
     }
-    return (_jsxs("section", { className: "space-y-2", children: [heading, _jsx("div", { className: "divide-border/60 divide-y", children: children })] }));
+    return (_jsxs("section", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: title }), description ? (_jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: description })) : null] }), trailing ? _jsx("div", { className: "shrink-0", children: trailing }) : null] }), _jsx("div", { className: "divide-border/60 divide-y", children: children })] }));
+}
+/**
+ * The bordered list a section hands its rows to: one `bg-popover` group,
+ * hairlines between rows, no per-row box. A stack of individually bordered
+ * cards read as ten announcements; one group reads as one list.
+ */
+export function EditorList({ className, ...props }) {
+    return (_jsx("ul", { className: cn('bg-popover divide-border divide-y overflow-hidden rounded-md border', className), ...props }));
 }
 /**
  * Label and help on the left, control on the right — for anything that fits a
@@ -38,14 +49,16 @@ export function EditorSection({ title, description, trailing, children, }) {
  * three deep.
  */
 export function SettingRow({ label, help, children, }) {
-    return (_jsxs("div", { className: "flex flex-col gap-2 py-3.5 sm:flex-row sm:items-center sm:justify-between sm:gap-6", children: [_jsx(SettingLabel, { label: label, help: help }), _jsx("div", { className: "w-full shrink-0 sm:w-52", children: children })] }));
+    const style = useContext(EditorSectionStyleContext);
+    return (_jsxs("div", { className: cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-6', style === 'panel' ? 'px-4 py-3' : 'py-3.5'), children: [_jsx(SettingLabel, { label: label, help: help }), _jsx("div", { className: "w-full shrink-0 sm:w-52", children: children })] }));
 }
 /**
  * Label and help above a full-width control — for anything a row cannot hold:
  * a textarea, a grant checklist, the permission tree.
  */
 export function SettingBlock({ label, help, children, }) {
-    return (_jsxs("div", { className: "space-y-2.5 py-3.5", children: [_jsx(SettingLabel, { label: label, help: help }), children] }));
+    const style = useContext(EditorSectionStyleContext);
+    return (_jsxs("div", { className: cn('space-y-2.5', style === 'panel' ? 'px-4 py-3' : 'py-3.5'), children: [_jsx(SettingLabel, { label: label, help: help }), children] }));
 }
 /**
  * The label pair. A plain `<span>`, not `<Label>`: none of these controls take

package/dist/customize/sections/view/agent-editor.js

@@ -317,8 +317,8 @@ export function isAgentConfigSectionKey(value) {
  */
 export function AgentConfigSections({ section, editor, options, skillsOptions, registryOptions, overview, triggers, people, skills, connectors, secrets, apps, drives, authority, }) {
     const { draft, oc, set, setOc } = editor;
-    // Every section is a card (`EditorSectionStyle` 'panel'), so a tab holding
-    // two of them — Access holds the people and the grants — shows two blocks.
+    // Every pane opens with a `lead` section (the pane title) and stacks its
+    // later sections under Settings subsection headings.
     const body = (() => {
         switch (section) {
             case 'overview':
@@ -353,6 +353,6 @@ export function AgentConfigSections({ section, editor, options, skillsOptions, r
                 return (_jsx(BasicsSection, { draft: draft, set: set, oc: oc, setOc: setOc, showDescription: false }));
         }
     })();
-    return (_jsx(EditorSectionStyleProvider, { value: "panel", children: _jsx("div", { className: "space-y-4", children: body }) }));
+    return (_jsx(EditorSectionStyleProvider, { value: "panel", children: _jsx("div", { className: "space-y-8", children: body }) }));
 }
 export { grantSummary } from './grant-mode-field.js';

package/dist/customize/sections/view/gateway/gateway-routing.js

@@ -47,13 +47,13 @@ import { useTranslations } from '../../../../i18n/index.js';
  *
  * | Capability | Where it is now |
  * | --- | --- |
- * | Inherit / custom / no fallback | "When the default fails" row (primary) |
+ * | Inherit / custom / no fallback | "When a model fails" row (primary) |
  * | Ordered default chain, reorder + remove, max 8 | Chain row — one line per step (primary) |
  * | Fallback condition (transient / any error) | "Retry on" line, inside the chain it belongs to |
  * | Per-model override rules, max 20 | "Per-model overrides" — one row per rule, promoted second (primary) |
  * | Vision (image-input) override | "Vision model" row, inside Advanced |
  * | Per-model generation defaults | "Generation defaults" section, inside Advanced |
- * | Provider-availability preview | `AvailabilityBadge`, unchanged, now also on the primary |
+ * | Provider-availability preview | `AvailabilityBadge`, on every chain step and override |
  * | Reset / dirty / validation / save | Header action + sticky footer, unchanged |
  *
  * The data contract is untouched: same props in, same `routing.set` /
@@ -438,7 +438,7 @@ export function GatewayRouting({ projectId, canWrite, projectDefaultPending, })
             };
         });
     };
-    return (_jsxs(RoutingSection, { action: writable ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: controlsDisabled, onClick: () => setResetOpen(true), children: [_jsx(RotateCcw, { className: "size-3.5" }), " ", tI18nComplete.raw('textdaee7606b339')] })) : (_jsx(Badge, { variant: "muted", size: "sm", children: tI18nComplete.raw('text8ac767353080') })), children: [_jsxs("div", { className: "space-y-8", children: [_jsxs("section", { className: "space-y-1", children: [_jsx(Label, { className: "text-foreground", children: tI18nComplete.raw('text325e84939c64') }), _jsxs("div", { className: "flex flex-col", children: [_jsx(RoutingRow, { label: tI18nComplete.raw('text146b38e7fa80'), hint: tI18nComplete.raw('textd48d1b0dbdd6'), children: _jsxs(Select, { value: fallbackMode, disabled: controlsDisabled, onValueChange: (mode) => changeFallbackMode(mode), children: [_jsx(SelectTrigger, { className: "w-48 max-w-full", "aria-label": tI18nComplete.raw('textdf33a10e5579'), children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "inherit", children: tI18nComplete.raw('text975aa2ab538e') }), _jsx(SelectItem, { value: "custom", children: tI18nComplete.raw('texta913ec01bd04') }), _jsx(SelectItem, { value: "disabled", children: tI18nComplete.raw('text3822b0412ed7') })] })] }) }), fallbackMode === 'custom' && draft.defaultFallback ? (_jsx(RoutingRow, { align: "start", label: _jsx("span", { className: "truncate font-mono text-xs", children: primaryModel }), hint: tI18nComplete.raw('textc3ecd3cd791b'), children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(AvailabilityBadge, { available: availability[primaryModel] }), _jsx(ChainRows, { primary: primaryModel, chain: draft.defaultFallback, models: models, disabled: controlsDisabled, availability: availability, onChange: (defaultFallback) => setDraft({ ...draft, defaultFallback }) })] }) })) : fallbackMode === 'inherit' ? (_jsx(RoutingRow, { label: tI18nComplete.raw('text74a1a0f65906'), children: _jsx("p", { className: "text-muted-foreground truncate font-mono text-xs", children: inheritedRoute }) })) : (_jsx(RoutingRow, { label: tI18nComplete.raw('text0af465ef42c0'), children: _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('texta3df3f9e4422') }) }))] })] }), _jsxs("section", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "text-foreground", children: tI18nComplete.raw('text5c63c15261bb') }), draft.rules.length > 0 ? (_jsx(Badge, { variant: "secondary", size: "sm", children: draft.rules.length })) : null] }), writable ? (_jsxs(Button, { type: "button", size: "sm", variant: "secondary", disabled: controlsDisabled || !newRuleModel || draft.rules.length >= MAX_RULES, onClick: () => newRuleModel &&
+    return (_jsxs(RoutingSection, { action: writable ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: controlsDisabled, onClick: () => setResetOpen(true), children: [_jsx(RotateCcw, { className: "size-3.5" }), " ", tI18nComplete.raw('textdaee7606b339')] })) : (_jsx(Badge, { variant: "muted", size: "sm", children: tI18nComplete.raw('text8ac767353080') })), children: [_jsxs("div", { className: "space-y-8", children: [_jsxs("section", { className: "space-y-1", children: [_jsx(Label, { className: "text-foreground", children: tI18nComplete.raw('text325e84939c64') }), _jsxs("div", { className: "flex flex-col", children: [_jsx(RoutingRow, { label: tI18nComplete.raw('text146b38e7fa80'), hint: tI18nComplete.raw('textd48d1b0dbdd6'), children: _jsxs(Select, { value: fallbackMode, disabled: controlsDisabled, onValueChange: (mode) => changeFallbackMode(mode), children: [_jsx(SelectTrigger, { className: "w-48 max-w-full", "aria-label": tI18nComplete.raw('textdf33a10e5579'), children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "inherit", children: tI18nComplete.raw('text975aa2ab538e') }), _jsx(SelectItem, { value: "custom", children: tI18nComplete.raw('texta913ec01bd04') }), _jsx(SelectItem, { value: "disabled", children: tI18nComplete.raw('text3822b0412ed7') })] })] }) }), fallbackMode === 'custom' && draft.defaultFallback ? (_jsx(RoutingRow, { align: "start", label: tI18nComplete.raw('texte75d99a42dba'), hint: tI18nComplete.raw('textc3ecd3cd791b'), children: _jsx("div", { className: "space-y-1.5", children: _jsx(ChainRows, { primary: primaryModel, chain: draft.defaultFallback, models: models, disabled: controlsDisabled, availability: availability, onChange: (defaultFallback) => setDraft({ ...draft, defaultFallback }) }) }) })) : fallbackMode === 'inherit' ? (_jsx(RoutingRow, { label: tI18nComplete.raw('text74a1a0f65906'), children: _jsx("p", { className: "text-muted-foreground truncate font-mono text-xs", children: inheritedRoute }) })) : (_jsx(RoutingRow, { label: tI18nComplete.raw('text0af465ef42c0'), children: _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('texta3df3f9e4422') }) }))] })] }), _jsxs("section", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "text-foreground", children: tI18nComplete.raw('text5c63c15261bb') }), draft.rules.length > 0 ? (_jsx(Badge, { variant: "secondary", size: "sm", children: draft.rules.length })) : null] }), writable ? (_jsxs(Button, { type: "button", size: "sm", variant: "secondary", disabled: controlsDisabled || !newRuleModel || draft.rules.length >= MAX_RULES, onClick: () => newRuleModel &&
                                             setDraft({
                                                 ...draft,
                                                 rules: [

package/dist/customize/sections/view/grant-mode-field.d.ts

@@ -7,11 +7,9 @@ export declare function grantSummary(v: AgentGrantSetV2 | undefined, tI18nComple
     label: string;
     tone: 'muted' | 'outline';
 };
-export declare function GrantModeField({ value, onChange, allLabel, noneLabel, alwaysRender, children, }: {
+export declare function GrantModeField({ value, onChange, alwaysRender, children, }: {
     value: AgentGrantSetV2 | undefined;
     onChange: (v: AgentGrantSetV2) => void;
-    allLabel: string;
-    noneLabel: string;
     /** Render `children` in every mode, not only Pick — for a catalog that
      *  stays on screen and shows each card as included / excluded. */
     alwaysRender?: boolean;
@@ -34,12 +32,11 @@ export interface GrantOption {
     /** At the row's right edge — a `Badge` for a connector that needs auth. */
     trailing?: ReactNode;
 }
-export declare function GrantSetField({ value, onChange, options, emptyLabel, allLabel, rowAccessory, }: {
+export declare function GrantSetField({ value, onChange, options, emptyLabel, rowAccessory, }: {
     value: AgentGrantSetV2 | undefined;
     onChange: (v: AgentGrantSetV2) => void;
     options: GrantOption[];
     emptyLabel: string;
-    allLabel: string;
     /** Optional control rendered BESIDE each granted row (e.g. the connectors
      *  field's "personal" toggle). The row itself is a `<button>`, so an
      *  interactive accessory cannot be nested inside it — when this returns a

package/dist/customize/sections/view/grant-mode-field.js

@@ -7,9 +7,9 @@ import { useTranslations as useI18nTranslations } from '../../../i18n/index.js';
  * (kortix_permissions) share the same state transitions instead of re-implementing
  * them twice.
  */
-import { Tabs, TabsListCompact, TabsTriggerCompact } from '../../../primitives/tabs.js';
-import { cn } from '../../../internal/lib/utils.js';
-import { CheckIcon } from '@phosphor-icons/react';
+import { Tabs, TabsList, TabsTrigger } from '../../../primitives/tabs.js';
+import { Badge } from '../../../primitives/badge.js';
+import { Checkbox } from '../../../primitives/checkbox.js';
 import { useState } from 'react';
 import { KORTIX_PERMISSIONS_CATALOG } from './agent-editor-catalog.js';
 import { useUiParams } from '../../../providers/ui-provider.js';
@@ -31,7 +31,7 @@ const GRANT_MODES = [
     { value: 'pick', label: 'Pick' },
     { value: 'none', label: 'None' },
 ];
-export function GrantModeField({ value, onChange, allLabel, noneLabel, alwaysRender = false, children, }) {
+export function GrantModeField({ value, onChange, alwaysRender = false, children, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const mode = value === 'all' ? 'all' : value === 'none' || value === undefined ? 'none' : 'pick';
     const [wantPick, setWantPick] = useState(() => Array.isArray(value) && value.length > 0);
@@ -57,13 +57,13 @@ export function GrantModeField({ value, onChange, allLabel, noneLabel, alwaysRen
             next.add(id);
         onChange([...next]);
     };
-    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Tabs, { value: effectiveMode, onValueChange: (m) => pick(m), className: "w-fit", children: _jsx(TabsListCompact, { type: "default", "aria-label": tI18nComplete.raw('text74009e6664f5'), children: GRANT_MODES.map((m) => (_jsx(TabsTriggerCompact, { value: m.value, children: m.label }, m.value))) }) }), effectiveMode === 'all' && (_jsx("span", { className: "text-muted-foreground text-xs", children: allLabel })), effectiveMode === 'none' && (_jsx("span", { className: "text-muted-foreground text-xs", children: noneLabel }))] }), effectiveMode === 'pick' || alwaysRender
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(Tabs, { value: effectiveMode, onValueChange: (m) => pick(m), children: _jsx(TabsList, { "aria-label": tI18nComplete.raw('text74009e6664f5'), children: GRANT_MODES.map((m) => (_jsx(TabsTrigger, { value: m.value, children: m.label }, m.value))) }) }), effectiveMode === 'pick' || alwaysRender
                 ? children({ selected, toggle, mode: effectiveMode })
                 : null] }));
 }
-export function GrantSetField({ value, onChange, options, emptyLabel, allLabel, rowAccessory, }) {
+export function GrantSetField({ value, onChange, options, emptyLabel, rowAccessory, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsx(GrantModeField, { value: value, onChange: onChange, allLabel: allLabel, noneLabel: tI18nComplete.raw('text765b240c2900'), children: ({ selected, toggle }) => {
+    return (_jsx(GrantModeField, { value: value, onChange: onChange, children: ({ selected, toggle }) => {
             const optionIds = new Set(options.map((o) => o.id));
             const orphans = [];
             for (const id of selected) {
@@ -71,14 +71,11 @@ export function GrantSetField({ value, onChange, options, emptyLabel, allLabel,
                     orphans.push({ id, label: id });
             }
             const rows = [...options, ...orphans];
-            return rows.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: emptyLabel })) : (_jsx("div", { className: "border-border/60 max-h-80 overflow-y-auto rounded-md border p-1", children: rows.map((o) => {
+            return rows.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: emptyLabel })) : (_jsx("ul", { className: "bg-popover divide-border max-h-96 divide-y overflow-y-auto rounded-md border", children: rows.map((o) => {
                     const isSel = selected.has(o.id);
                     const isOrphan = !optionIds.has(o.id);
                     const accessory = rowAccessory?.(o.id, isSel);
-                    const row = (_jsxs("button", { type: "button", "aria-pressed": isSel, onClick: () => toggle(o.id), className: cn('flex items-center gap-2.5 rounded px-2 text-left text-xs transition-[color,background-color,transform] active:scale-[0.98]', o.description ? 'py-2' : 'py-1.5', accessory ? 'min-w-0 flex-1' : 'w-full', isSel ? 'bg-secondary' : 'hover:bg-muted/50'), children: [_jsx("span", { className: cn('flex size-4 shrink-0 items-center justify-center rounded-[4px] border', isSel
-                                    ? 'border-foreground bg-foreground text-background'
-                                    : 'border-border/70'), children: isSel ? _jsx(CheckIcon, { className: "size-2.5" }) : null }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-mono", children: o.label }), o.description ? (_jsx("span", { className: "text-muted-foreground block truncate text-xs leading-4", children: o.description })) : null] }), o.trailing ? _jsx("span", { className: "shrink-0", children: o.trailing }) : null, isOrphan && (_jsx("span", { className: "text-kortix-orange shrink-0", children: tI18nComplete.raw('textffa63583dfa6') }))] }, o.id));
-                    return accessory ? (_jsxs("div", { className: "flex items-center gap-1", children: [row, accessory] }, o.id)) : (row);
+                    return (_jsxs("li", { className: "flex items-center gap-3 px-4 py-2.5", children: [_jsx(Checkbox, { variant: "black", checked: isSel, onCheckedChange: () => toggle(o.id), "aria-label": o.label }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate font-mono text-sm", children: o.label }), o.description ? (_jsx("span", { className: "text-muted-foreground block truncate text-xs", children: o.description })) : null] }), isOrphan ? (_jsx(Badge, { variant: "warning", size: "xs", children: tI18nComplete.raw('textffa63583dfa6') })) : null, o.trailing, accessory] }, o.id));
                 }) }));
         } }));
 }
@@ -88,10 +85,5 @@ export function KortixPermissionsField({ value, onChange, }) {
     const params = useUiParams();
     const { flags } = useProjectFeatureFlags(typeof params.id === 'string' ? params.id : null);
     const groups = KORTIX_PERMISSIONS_CATALOG.filter((grp) => !grp.featureFlag || flags[grp.featureFlag] === true);
-    return (_jsx(GrantModeField, { value: value, onChange: onChange, allLabel: tI18nComplete.raw('text75a5e3a6d5d3'), noneLabel: tI18nComplete.raw('text765b240c2900'), children: ({ selected, toggle }) => (_jsx("div", { className: "border-border/60 max-h-64 space-y-3 overflow-y-auto rounded-md border p-2.5", children: groups.map((grp) => (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-muted-foreground text-xs font-medium", children: grp.group }), _jsx("div", { className: "flex flex-wrap gap-1", children: grp.actions.map((action) => {
-                            const isSel = selected.has(action);
-                            return (_jsx("button", { type: "button", "aria-pressed": isSel, onClick: () => toggle(action), className: cn('rounded px-1.5 py-1 font-mono text-xs transition-[color,background-color,transform] active:scale-[0.96]', isSel
-                                    ? 'bg-foreground text-background'
-                                    : 'bg-muted/40 text-muted-foreground hover:bg-muted'), children: action.replace(/^project\./, '') }, action));
-                        }) })] }, grp.group))) })) }));
+    return (_jsx(GrantModeField, { value: value, onChange: onChange, children: ({ selected, toggle }) => (_jsx("div", { className: "bg-popover divide-border divide-y rounded-md border", children: groups.map((grp) => (_jsxs("div", { className: "space-y-2.5 px-4 py-3", children: [_jsx("p", { className: "text-muted-foreground text-xs font-medium", children: grp.group }), _jsx("div", { className: "-mx-3 grid gap-x-2 gap-y-0.5 sm:grid-cols-2", children: grp.actions.map((action) => (_jsx(Checkbox, { variant: "black", checked: selected.has(action), onCheckedChange: () => toggle(action), label: _jsx("span", { className: "font-mono text-xs", children: action.replace(/^project\./, '') }) }, action))) })] }, grp.group))) })) }));
 }

package/dist/customize/sections/view/permission-editor.js

@@ -3,7 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations as useI18nTranslations } from '../../../i18n/index.js';
 /** The tool-permission editor — a default action plus per-tool rules (a bare
  *  action, or a map of path/command patterns to actions). */
-import { Badge } from '../../../primitives/badge.js';
 import { Button } from '../../../primitives/button.js';
 import Hint from '../../../primitives/hint.js';
 import { Input } from '../../../primitives/input.js';
@@ -12,6 +11,8 @@ import { PlusIcon as Plus, TrashIcon as Trash2 } from '@phosphor-icons/react';
 import { AnimatePresence, m } from 'motion/react';
 import { useState } from 'react';
 import { PERMISSION_ACTION_LABEL, PERMISSION_ACTION_ONLY_GROUP_LABEL, PERMISSION_ACTION_ONLY_KEYS, PERMISSION_ACTIONS, PERMISSION_KEY_HELP, PERMISSION_KEY_LABEL, PERMISSION_RULE_GROUPS, PERMISSION_RULE_KEYS, } from './agent-editor-catalog.js';
+import { SettingsRow, SettingsRowGroup } from '../../../primitives/settings-row.js';
+import { SettingsSubsectionHeader } from '../../../primitives/settings-subsection-header.js';
 import { EditorSection } from './agent-editor-primitives.js';
 /** Radix forbids `""` as an item value, so the inherit state carries a sentinel. */
 const INHERIT = '__inherit__';
@@ -41,7 +42,7 @@ function asPermObject(permission) {
  * leads; the token stays because people grep for it and hand-edit the YAML.
  */
 function PermissionKeyName({ permKey }) {
-    return (_jsx(Hint, { label: PERMISSION_KEY_HELP[permKey] ?? permKey, side: "top", children: _jsxs("span", { className: "flex min-w-0 cursor-default items-baseline gap-2", children: [_jsx("span", { className: "text-foreground truncate text-sm", children: PERMISSION_KEY_LABEL[permKey] ?? permKey }), _jsx("span", { className: "text-muted-foreground/70 shrink-0 font-mono text-xs", children: permKey })] }) }));
+    return (_jsx(Hint, { label: PERMISSION_KEY_HELP[permKey] ?? permKey, side: "top", children: _jsxs("span", { className: "flex min-w-0 cursor-default items-baseline gap-2", children: [_jsx("span", { className: "text-foreground truncate text-sm", children: PERMISSION_KEY_LABEL[permKey] ?? permKey }), _jsx("span", { className: "text-muted-foreground shrink-0 font-mono text-xs", children: permKey })] }) }));
 }
 /** One action-typed key: a bare allow/ask/deny/inherit, plus expandable
  *  pattern → action rules. */
@@ -68,7 +69,7 @@ function PermissionRuleRow({ label, rule, onChange, }) {
             next[k === from ? to : k] = v;
         onChange(next);
     };
-    return (_jsxs("div", { className: "space-y-2 px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(PermissionKeyName, { permKey: label }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsx(ActionSelect, { value: isMap ? undefined : bare, onChange: setBare, inheritLabel: tI18nComplete.raw('text3f72f0385768'), label: tI18nComplete('textfaaaefbff336', {
+    return (_jsxs("div", { className: "space-y-2 px-4 py-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(PermissionKeyName, { permKey: label }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsx(ActionSelect, { value: isMap ? undefined : bare, onChange: setBare, inheritLabel: tI18nComplete.raw('text3f72f0385768'), label: tI18nComplete('textfaaaefbff336', {
                                     value0: PERMISSION_KEY_LABEL[label] ?? label,
                                 }) }), _jsxs(Button, { type: "button", variant: isMap || showRules ? 'secondary' : 'outline', size: "sm", className: "gap-1 px-2 text-xs", "aria-expanded": showRules, onClick: () => setShowRules((s) => !s), children: [tI18nComplete.raw('text4228aeb07c41'), ruleCount > 0 ? _jsx("span", { className: "tabular-nums", children: ruleCount }) : null] })] })] }), _jsx(AnimatePresence, { initial: false, children: showRules && (_jsx(m.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 'auto' }, exit: { opacity: 0, height: 0 }, transition: { type: 'spring', duration: 0.3, bounce: 0 }, className: "overflow-hidden", children: _jsxs("div", { className: "bg-muted/40 space-y-1.5 rounded-md p-2", children: [ruleCount === 0 ? (_jsx("p", { className: "text-muted-foreground px-1 pt-0.5 text-xs text-pretty", children: tI18nComplete.raw('text8d1833ac5f65') })) : null, Object.entries(map).map(([pattern, action]) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Input, { value: pattern, "aria-label": tI18nComplete.raw('text4288ade73ff9'), placeholder: tI18nComplete.raw('textcf134a1de504'), variant: "popover", className: "h-8 flex-1 font-mono text-xs", onChange: (e) => renameRule(pattern, e.target.value) }), _jsx(ActionSelect, { value: action, label: tI18nComplete('text494cb0162c19', {
                                             value0: pattern || tI18nComplete.raw('textc6fbcde46fa9'),
@@ -92,9 +93,9 @@ export function ToolsSection({ permission, onChange, }) {
         : permission && Object.keys(permission).length > 0
             ? `${Object.keys(permission).length} tool${Object.keys(permission).length === 1 ? '' : 's'} customized`
             : 'Every tool follows the runtime default';
-    return (_jsx(EditorSection, { title: tI18nComplete.raw('textea93d6a262ec'), description: tI18nComplete.raw('text765f388e2ce6'), trailing: _jsx(Badge, { variant: "outline", size: "sm", children: summary }), children: _jsx("div", { className: "py-4", children: _jsx(PermissionEditor, { permission: permission, onChange: onChange }) }) }));
+    return (_jsx(EditorSection, { title: tI18nComplete.raw('textea93d6a262ec'), description: tI18nComplete.raw('text765f388e2ce6'), lead: true, bare: true, children: _jsx(PermissionEditor, { permission: permission, onChange: onChange, summary: summary }) }));
 }
-function PermissionEditor({ permission, onChange, }) {
+function PermissionEditor({ permission, onChange, summary, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const obj = asPermObject(permission);
     const bareDefault = typeof permission === 'string' ? permission : undefined;
@@ -111,7 +112,9 @@ function PermissionEditor({ permission, onChange, }) {
             next[key] = value;
         onChange(Object.keys(next).length ? next : undefined);
     };
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-md border px-3 py-2.5", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm", children: tI18nComplete.raw('text9b99443d24c5') }), _jsx("p", { className: "text-muted-foreground text-xs", children: bareDefault
-                                    ? tI18nComplete.raw('textabba11786cee')
-                                    : tI18nComplete.raw('texte640da5d14fd') })] }), _jsx(ActionSelect, { value: bareDefault, onChange: setDefault, inheritLabel: tI18nComplete.raw('text8d2dd4e8c7ca'), label: tI18nComplete.raw('text9b99443d24c5') })] }), PERMISSION_RULE_GROUPS.map((group) => (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-muted-foreground text-xs font-medium", children: group.label }), _jsx("div", { className: "divide-border/60 divide-y rounded-md border", children: group.keys.map((key) => (_jsx(PermissionRuleRow, { label: key, rule: obj[key], onChange: (next) => setKey(key, next) }, key))) })] }, group.label))), _jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-muted-foreground text-xs font-medium", children: PERMISSION_ACTION_ONLY_GROUP_LABEL }), _jsx("div", { className: "divide-border/60 divide-y rounded-md border", children: PERMISSION_ACTION_ONLY_KEYS.map((key) => (_jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2.5", children: [_jsx(PermissionKeyName, { permKey: key }), _jsx(ActionSelect, { value: typeof obj[key] === 'string' ? obj[key] : undefined, onChange: (v) => setKey(key, v), inheritLabel: tI18nComplete.raw('text3f72f0385768'), label: PERMISSION_KEY_LABEL[key] ?? key })] }, key))) })] })] }));
+    return (_jsxs("div", { className: "space-y-8", children: [_jsx(SettingsRowGroup, { children: _jsx(SettingsRow, { label: tI18nComplete.raw('text9b99443d24c5'), description: bareDefault
+                        ? tI18nComplete.raw('textabba11786cee')
+                        : Object.keys(obj).length > 0
+                            ? `${summary}.`
+                            : tI18nComplete.raw('texte640da5d14fd'), children: _jsx(ActionSelect, { value: bareDefault, onChange: setDefault, inheritLabel: tI18nComplete.raw('text8d2dd4e8c7ca'), label: tI18nComplete.raw('text9b99443d24c5') }) }) }), PERMISSION_RULE_GROUPS.map((group) => (_jsxs("section", { className: "space-y-3", children: [_jsx(SettingsSubsectionHeader, { title: group.label }), _jsx("div", { className: "bg-popover divide-border divide-y rounded-md border", children: group.keys.map((key) => (_jsx(PermissionRuleRow, { label: key, rule: obj[key], onChange: (next) => setKey(key, next) }, key))) })] }, group.label))), _jsxs("section", { className: "space-y-3", children: [_jsx(SettingsSubsectionHeader, { title: PERMISSION_ACTION_ONLY_GROUP_LABEL }), _jsx("div", { className: "bg-popover divide-border divide-y rounded-md border", children: PERMISSION_ACTION_ONLY_KEYS.map((key) => (_jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-3", children: [_jsx(PermissionKeyName, { permKey: key }), _jsx(ActionSelect, { value: typeof obj[key] === 'string' ? obj[key] : undefined, onChange: (v) => setKey(key, v), inheritLabel: tI18nComplete.raw('text3f72f0385768'), label: PERMISSION_KEY_LABEL[key] ?? key })] }, key))) })] })] }));
 }