@kortix/ui 0.14.6 → 0.14.8

package/dist/customize/sections/llm-provider/custom-provider-panel.js

@@ -36,6 +36,7 @@ import { Input } from '../../../primitives/input.js';
 import { InputGroup, InputGroupInput } from '../../../primitives/input-group.js';
 import Loading from '../../../primitives/loading.js';
 import { Skeleton } from '../../../primitives/skeleton.js';
+import { Switch } from '../../../primitives/switch.js';
 import { SplitSheetBody, SplitSheetDescription, SplitSheetFooter, SplitSheetHeader, SplitSheetTitle, } from '../../../primitives/split-sheet.js';
 import { errorToast, successToast } from '../../../primitives/toast.js';
 import { ProviderLogoStatus } from '../../providers/provider-connect.js';
@@ -46,6 +47,7 @@ import { CaretRightIcon, XIcon } from '@phosphor-icons/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useModelsPageSheet } from '../models-page-sheet.js';
 import { CustomProviderForm } from './custom-provider-form.js';
+import { formatTokenCount } from './utils.js';
 /** One saved custom provider: a configured row opens the sheet, a legacy row
  *  pre-fills the form. */
 export function CustomProviderRow({ provider, selected, onSelect, }) {
@@ -57,6 +59,22 @@ export function CustomProviderRow({ provider, selected, onSelect, }) {
 function DetailRow({ label, value, mono = true }) {
     return (_jsxs("div", { className: "flex min-h-10 items-center justify-between gap-4 py-2", children: [_jsx("span", { className: "text-muted-foreground shrink-0 text-sm", children: label }), _jsx("span", { className: cn('text-foreground min-w-0 truncate', mono ? 'font-mono text-xs' : 'text-sm'), children: value })] }));
 }
+/**
+ * A model as the PUT takes it: the switches travel, the limits do not, so
+ * every save reads the window again from the endpoint's `GET /models`.
+ */
+const modelInput = ({ id, name, attachment, reasoning }) => ({
+    id,
+    name,
+    ...(attachment !== undefined ? { attachment } : {}),
+    ...(reasoning !== undefined ? { reasoning } : {}),
+});
+/** One saved model: its window, and the image and reasoning switches (each saves at once). */
+function ModelRow({ model, disabled, onToggle, }) {
+    const t = useTranslations('customProvider');
+    const context = formatTokenCount(model.context);
+    return (_jsxs("div", { className: "space-y-2 py-2", children: [_jsxs("div", { className: "flex min-h-6 items-center justify-between gap-4", children: [_jsx("span", { className: "text-muted-foreground shrink-0 text-sm", children: model.name }), _jsx("span", { className: "text-foreground min-w-0 truncate font-mono text-xs", children: model.id })] }), _jsxs("div", { className: "text-muted-foreground flex flex-wrap items-center gap-x-5 gap-y-2 text-xs", children: [_jsx("span", { className: "tabular-nums", children: context ? t('contextWindow', { tokens: context }) : t('contextDefault') }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: model.attachment === true, disabled: disabled, onCheckedChange: (attachment) => onToggle({ attachment }) }), t('readsImages')] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: model.reasoning === true, disabled: disabled, onCheckedChange: (reasoning) => onToggle({ reasoning }) }), t('reasoning')] })] })] }));
+}
 /**
  * The endpoint editor in the sheet. The PUT replaces the provider's whole
  * definition, so this edits the full model list in place.
@@ -72,7 +90,7 @@ function EndpointEditor({ projectId, provider, onClose, }) {
     const save = useMutation({
         mutationFn: () => {
             const trimmed = models
-                .map((m) => ({ id: m.id.trim(), name: m.name.trim() }))
+                .map((m) => modelInput({ ...m, id: m.id.trim(), name: m.name.trim() }))
                 .filter((m) => m.id || m.name);
             if (!name.trim() || !/^https?:\/\//.test(baseUrl.trim())) {
                 throw new Error('Name and an http:// or https:// base URL are required');
@@ -108,12 +126,22 @@ function CustomProviderDetail({ projectId, provider, onDeleted, }) {
     const [confirmDelete, setConfirmDelete] = useState(false);
     const [value, setValue] = useState('');
     const replace = useMutation({
-        mutationFn: () => upsertProjectSecret(projectId, {
-            name: provider.secret_name,
-            value: value.trim(),
-            strategy: 'broker',
-            consumer: 'llm_gateway',
-        }),
+        mutationFn: async () => {
+            await upsertProjectSecret(projectId, {
+                name: provider.secret_name,
+                value: value.trim(),
+                strategy: 'broker',
+                consumer: 'llm_gateway',
+            });
+            // Re-save the endpoint: it reads the model limits from `GET /models` with the new key.
+            if (provider.configured && provider.base_url) {
+                await custom.save(provider.id, {
+                    name: provider.name,
+                    base_url: provider.base_url,
+                    models: provider.models.map(modelInput),
+                });
+            }
+        },
         onSuccess: () => {
             successToast(t('keyReplaced'));
             setValue('');
@@ -124,6 +152,14 @@ function CustomProviderDetail({ projectId, provider, onDeleted, }) {
         },
         onError: (err) => errorToast(err instanceof Error ? err.message : tI18nComplete.raw('text2c07997249ab')),
     });
+    const toggle = useMutation({
+        mutationFn: ({ id, patch }) => custom.save(provider.id, {
+            name: provider.name,
+            base_url: provider.base_url ?? '',
+            models: provider.models.map((m) => modelInput(m.id === id ? { ...m, ...patch } : m)),
+        }),
+        onError: (err) => errorToast(err instanceof Error ? err.message : t('saveFailed')),
+    });
     const remove = useMutation({
         mutationFn: () => custom.remove(provider.id),
         onSuccess: () => {
@@ -139,7 +175,7 @@ function CustomProviderDetail({ projectId, provider, onDeleted, }) {
         if (value.trim() && !replace.isPending)
             replace.mutate();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(SplitSheetHeader, { closeLabel: tSheet('close'), className: "px-5 py-4", children: _jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ProviderLogoStatus, { providerId: provider.id, label: provider.name, status: "connected", size: "large" }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx(SplitSheetTitle, { className: "truncate text-base font-semibold", children: provider.name }), _jsx(SplitSheetDescription, { className: "font-mono", children: provider.id })] })] }) }), _jsxs(SplitSheetBody, { className: "space-y-7", children: [_jsxs("section", { className: "space-y-1", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: t('endpoint') }), editing ? (_jsx(EndpointEditor, { projectId: projectId, provider: provider, onClose: () => setEditing(false) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "divide-border divide-y", children: [_jsx(DetailRow, { label: tI18nComplete.raw('text70589413a3c9'), value: provider.base_url ?? '' }), _jsx(DetailRow, { label: tI18nComplete.raw('text16f0ee47f993'), value: provider.has_key ? provider.secret_name : t('noKey'), mono: provider.has_key })] }), _jsx("h3", { className: "text-foreground pt-4 text-sm font-medium", children: t('models') }), _jsx("div", { className: "divide-border divide-y", children: provider.models.map((model) => (_jsx(DetailRow, { label: model.name, value: model.id }, model.id))) }), _jsx(Button, { type: "button", size: "sm", variant: "secondary", className: "mt-3", onClick: () => setEditing(true), children: t('editEndpoint') })] }))] }), _jsx("section", { className: "space-y-1", children: replacing ? (_jsxs("form", { onSubmit: submit, className: "space-y-3", "data-custom-provider-replace": "", children: [_jsx("label", { htmlFor: `custom-replace-${provider.id}`, className: "sr-only", children: tI18nComplete.raw('text16f0ee47f993') }), _jsx(InputGroup, { children: _jsx(InputGroupInput, { id: `custom-replace-${provider.id}`, type: "password", autoComplete: "off", spellCheck: false, autoFocus: true, "data-1p-ignore": "", "data-lpignore": "true", "data-form-type": "other", value: value, onChange: (event) => setValue(event.target.value), placeholder: tI18nComplete.raw('textb009c6c5299f'), className: "font-mono" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "submit", size: "sm", disabled: !value.trim() || replace.isPending, className: "gap-1.5", children: [replace.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tSheet('saveKey')] }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: replace.isPending, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(SplitSheetHeader, { closeLabel: tSheet('close'), className: "px-5 py-4", children: _jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ProviderLogoStatus, { providerId: provider.id, label: provider.name, status: "connected", size: "large" }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx(SplitSheetTitle, { className: "truncate text-base font-semibold", children: provider.name }), _jsx(SplitSheetDescription, { className: "font-mono", children: provider.id })] })] }) }), _jsxs(SplitSheetBody, { className: "space-y-7", children: [_jsxs("section", { className: "space-y-1", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: t('endpoint') }), editing ? (_jsx(EndpointEditor, { projectId: projectId, provider: provider, onClose: () => setEditing(false) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "divide-border divide-y", children: [_jsx(DetailRow, { label: tI18nComplete.raw('text70589413a3c9'), value: provider.base_url ?? '' }), _jsx(DetailRow, { label: tI18nComplete.raw('text16f0ee47f993'), value: provider.has_key ? provider.secret_name : t('noKey'), mono: provider.has_key })] }), _jsx("h3", { className: "text-foreground pt-4 text-sm font-medium", children: t('models') }), _jsx("div", { className: "divide-border divide-y", children: provider.models.map((model) => (_jsx(ModelRow, { model: model, disabled: toggle.isPending || !provider.base_url, onToggle: (patch) => toggle.mutate({ id: model.id, patch }) }, model.id))) }), _jsx(Button, { type: "button", size: "sm", variant: "secondary", className: "mt-3", onClick: () => setEditing(true), children: t('editEndpoint') })] }))] }), _jsx("section", { className: "space-y-1", children: replacing ? (_jsxs("form", { onSubmit: submit, className: "space-y-3", "data-custom-provider-replace": "", children: [_jsx("label", { htmlFor: `custom-replace-${provider.id}`, className: "sr-only", children: tI18nComplete.raw('text16f0ee47f993') }), _jsx(InputGroup, { children: _jsx(InputGroupInput, { id: `custom-replace-${provider.id}`, type: "password", autoComplete: "off", spellCheck: false, autoFocus: true, "data-1p-ignore": "", "data-lpignore": "true", "data-form-type": "other", value: value, onChange: (event) => setValue(event.target.value), placeholder: tI18nComplete.raw('textb009c6c5299f'), className: "font-mono" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "submit", size: "sm", disabled: !value.trim() || replace.isPending, className: "gap-1.5", children: [replace.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tSheet('saveKey')] }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: replace.isPending, onClick: () => {
                                                 setValue('');
                                                 setReplacing(false);
                                             }, children: tSheet('cancel') })] })] })) : (_jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: () => setReplacing(true), children: provider.has_key ? t('replaceKey') : t('addKey') })) }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('gatewayNote') })] }), _jsxs(SplitSheetFooter, { className: "justify-between", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "text-destructive hover:text-destructive -ml-2", onClick: () => setConfirmDelete(true), children: t('deleteProvider') }), _jsx("span", { className: "text-muted-foreground text-xs", children: tSheet('storedEncrypted') })] }), _jsx(ConfirmDialog, { open: confirmDelete, onOpenChange: setConfirmDelete, title: t('deleteTitle'), description: t('deleteBody', { name: provider.name }), confirmLabel: t('deleteProvider'), confirmVariant: "destructive", isPending: remove.isPending, onConfirm: () => remove.mutate() })] }));

package/dist/customize/sections/llm-provider/types.d.ts

@@ -35,6 +35,9 @@ export interface CustomFormState {
     apiKey: string;
     modelId: string;
     modelName: string;
+    /** Unset until the user flips the switch: the endpoint's `GET /models` decides. */
+    attachment?: boolean;
+    reasoning?: boolean;
 }
 export type ChatGptPhase = 'idle' | 'waiting' | 'done';
 export type ChatGptChallenge = {

package/dist/customize/sections/llm-provider/utils.js

@@ -170,8 +170,8 @@ export function formatTokenCount(tokens) {
     if (!tokens || tokens <= 0)
         return '';
     if (tokens >= 1_000_000) {
-        const millions = tokens / 1_000_000;
-        return `${Number.isInteger(millions) ? millions : millions.toFixed(1)}M`;
+        // 1,048,576 reads "1M", not "1.0M".
+        return `${Number(Math.round((tokens / 1_000_000) * 10) / 10)}M`;
     }
     if (tokens >= 1_000)
         return `${Math.round(tokens / 1000)}K`;

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

@@ -1,4 +1,4 @@
-import type { AgentConfigBlock, AgentGrantSetV2, SandboxTemplate } from '@kortix/sdk';
+import type { AgentConfigBlock, SandboxTemplate } from '@kortix/sdk';
 import { type GrantOption } from './grant-mode-field.js';
 type SetKortix = <K extends keyof AgentConfigBlock>(key: K, value: AgentConfigBlock[K]) => void;
 /**
@@ -12,25 +12,18 @@ export declare function RequiredConnectorToggle({ active, onToggle, }: {
     active: boolean;
     onToggle: () => void;
 }): import("react").JSX.Element;
-/** The summary chip at a grant card's right edge — "All", "3 picked", "None". */
-export declare function GrantChip({ value }: {
-    value: AgentGrantSetV2 | undefined;
-}): import("react").JSX.Element;
 /**
- * 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 declare function GrantHeaderTrailing({ value, tab, href, label, }: {
-    value: AgentGrantSetV2 | undefined;
+export declare function ManageButton({ tab, href, }: {
     tab?: 'skills' | 'connectors' | 'secrets';
-    /** A page `tab` cannot name — Apps is a Customize tab, reached
-     *  through `capabilityTabHref(projectId, 'apps')`. */
+    /** A page `tab` cannot name, such as Apps. */
     href?: (projectId: string) => string | null;
-    label: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 interface GrantSectionProps {
     draft: AgentConfigBlock;
     set: SetKortix;

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/channels-view.js

@@ -280,7 +280,6 @@ function BindingOverrides({ binding, policies, }) {
     return (_jsxs("span", { title: describeEffectiveModel(binding), className: cn('inline-flex items-center gap-1', overrides && 'text-foreground'), children: [modelUnavailable ? (_jsx(WarningCircleIcon, { weight: "fill", className: "text-kortix-orange size-3.5 shrink-0" })) : null, overrides || tI18nComplete.raw('texte8cb80e5c5cb')] }));
 }
 /** The schedule modal's field frame, around each picker in the settings dialog. */
-const FIELD_FRAME = 'bg-popover flex w-full items-center rounded-md border px-2 py-1.5';
 /** Rows before the list grows a search field — the `AgentSelector` rule (7). */
 const BINDING_SEARCH_MIN = 7;
 const CONVERSATION_POLICIES = [
@@ -377,9 +376,6 @@ function ChannelSettingsModalContent({ projectId, binding, name, scope, projectD
     const policy = policyDraft ?? binding.conversationPolicy;
     const patch = channelSettingsPatch({ agentName: binding.agentName, model: boundModel, conversationPolicy: binding.conversationPolicy }, { agentName, model, conversationPolicy: policy });
     const dirty = Object.keys(patch).length > 0;
-    // The pickers refuse to open when disabled but do not dim; dim them like the
-    // disabled Select, which dims itself.
-    const pickerFrame = cn(FIELD_FRAME, !canWrite && 'opacity-50');
     const update = useUpdateChannelBinding();
     const save = (e) => {
         e.preventDefault();
@@ -393,11 +389,11 @@ function ChannelSettingsModalContent({ projectId, binding, name, scope, projectD
             onError: (error) => errorToastFallback(error, tI18nComplete),
         });
     };
-    return (_jsxs(ModalContent, { className: "lg:max-w-lg", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('textafc219f2a1e7') }), _jsx(ModalDescription, { children: tI18nComplete.raw('text95112f275fba') })] }), _jsxs("form", { onSubmit: save, children: [_jsxs(ModalBody, { className: "max-h-[calc(100dvh-15rem)] space-y-5 overflow-y-auto pt-4", children: [_jsxs("div", { className: "bg-popover flex min-w-0 items-center gap-3 rounded-md border px-3 py-2.5", children: [_jsx(BindingBrandMark, { platform: binding.platform }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium", title: binding.channelId, children: name }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: scope })] })] }), _jsxs(FieldGroup, { className: "gap-5", children: [_jsxs(Field, { "data-disabled": !canWrite, children: [_jsx(FieldTitle, { children: tI18nComplete.raw('text11b39c93777e') }), _jsx("div", { className: pickerFrame, children: _jsx(AgentSelector, { agents: agents, selectedAgent: agentName ?? defaultAgentLabel, onSelect: (v) => setAgentDraft(!v || v === defaultAgentLabel ? null : v), disabled: !canWrite }) }), _jsx(FieldDescription, { className: "text-xs", children: tI18nComplete.raw('text12dc6dbd8fc8') })] }), _jsxs(Field, { "data-disabled": !canWrite, children: [_jsx(FieldTitle, { children: tI18nComplete.raw('text5e2c614c23f0') }), _jsx("div", { className: pickerFrame, children: _jsx(ModelSelector, { models: models, providers: providers, selectedModel: model, unsetLabel: tI18nComplete.raw('texte8cb80e5c5cb'), onSelect: setModelDraft, disabled: !canWrite }) }), _jsxs(FieldDescription, { className: "text-xs", children: [modelDraft === undefined &&
+    return (_jsxs(ModalContent, { className: "lg:max-w-lg", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('textafc219f2a1e7') }), _jsx(ModalDescription, { children: tI18nComplete.raw('text95112f275fba') })] }), _jsxs("form", { onSubmit: save, children: [_jsxs(ModalBody, { className: "max-h-[calc(100dvh-15rem)] space-y-5 overflow-y-auto pt-4", children: [_jsxs("div", { className: "bg-popover flex min-w-0 items-center gap-3 rounded-md border px-3 py-2.5", children: [_jsx(BindingBrandMark, { platform: binding.platform }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium", title: binding.channelId, children: name }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: scope })] })] }), _jsxs(FieldGroup, { className: "gap-5", children: [_jsxs(Field, { "data-disabled": !canWrite, children: [_jsx(FieldTitle, { children: tI18nComplete.raw('text11b39c93777e') }), _jsx(AgentSelector, { agents: agents, selectedAgent: agentName ?? defaultAgentLabel, onSelect: (v) => setAgentDraft(!v || v === defaultAgentLabel ? null : v), disabled: !canWrite, appearance: "field" }), _jsx(FieldDescription, { className: "text-xs", children: tI18nComplete.raw('text12dc6dbd8fc8') })] }), _jsxs(Field, { "data-disabled": !canWrite, children: [_jsx(FieldTitle, { children: tI18nComplete.raw('text5e2c614c23f0') }), _jsx(ModelSelector, { models: models, providers: providers, selectedModel: model, unsetLabel: tI18nComplete.raw('texte8cb80e5c5cb'), onSelect: setModelDraft, disabled: !canWrite, appearance: "field" }), _jsxs(FieldDescription, { className: "text-xs", children: [modelDraft === undefined &&
                                                         binding.effectiveModel.source !== 'explicit' &&
                                                         (binding.opencodeModel || binding.effectiveModel.model)
                                                         ? `${describeEffectiveModel(binding)}. `
-                                                        : null, tI18nComplete.raw('text9116af1ce384')] })] }), _jsxs(Field, { "data-disabled": !canWrite, children: [_jsx(FieldTitle, { children: tI18nComplete.raw('textb1ca871c6696') }), _jsx("div", { className: FIELD_FRAME, children: _jsxs(Select, { value: policy, onValueChange: (v) => setPolicyDraft(v), disabled: !canWrite, children: [_jsx(SelectTrigger, { variant: "transparent", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: conversationPolicies.map((p) => (_jsx(SelectItem, { value: p.value, children: p.label }, p.value))) })] }) }), _jsx(FieldDescription, { className: "text-xs", children: policyDescription(policy, tI18nComplete) })] })] })] }), _jsxs(ModalFooter, { className: "pt-2 pb-5 sm:justify-between", children: [_jsxs(Button, { type: "button", variant: "outline-ghost", className: "gap-1", onClick: onBack, children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text76900f1bfd16')] }), canWrite ? (_jsxs(Button, { type: "submit", disabled: !dirty || update.isPending, children: [update.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text1509f561f241')] })) : null] })] })] }));
+                                                        : null, tI18nComplete.raw('text9116af1ce384')] })] }), _jsxs(Field, { "data-disabled": !canWrite, children: [_jsx(FieldTitle, { children: tI18nComplete.raw('textb1ca871c6696') }), _jsxs(Select, { value: policy, onValueChange: (v) => setPolicyDraft(v), disabled: !canWrite, children: [_jsx(SelectTrigger, { className: "h-9 w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: conversationPolicies.map((p) => (_jsx(SelectItem, { value: p.value, children: p.label }, p.value))) })] }), _jsx(FieldDescription, { className: "text-xs", children: policyDescription(policy, tI18nComplete) })] })] })] }), _jsxs(ModalFooter, { className: "pt-2 pb-5 sm:justify-between", children: [_jsxs(Button, { type: "button", variant: "outline-ghost", className: "gap-1", onClick: onBack, children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text76900f1bfd16')] }), canWrite ? (_jsxs(Button, { type: "submit", disabled: !dirty || update.isPending, children: [update.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text1509f561f241')] })) : null] })] })] }));
 }
 /** A conversation's display name: the Slack or Teams name, else its kind. */
 function bindingName(binding, tI18nComplete) {