@kortix/ui 0.14.5 → 0.14.7

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

@@ -421,14 +421,16 @@ function EmailSenderPolicyEditor({ projectId, connectorSlug, policy, canWrite =
     const [domains, setDomains] = useState(() => initial.allowedDomains.join('\n'));
     const [regex, setRegex] = useState(initial.allowedRegex ?? '');
     const [error, setError] = useState(null);
-    useEffect(() => {
+    const [syncedPolicy, setSyncedPolicy] = useState(policy);
+    if (policy !== syncedPolicy) {
+        setSyncedPolicy(policy);
         const next = normalizeEmailSenderPolicy(policy);
         setRestricted(next.mode === 'restricted');
         setEmails(next.allowedEmails.join('\n'));
         setDomains(next.allowedDomains.join('\n'));
         setRegex(next.allowedRegex ?? '');
         setError(null);
-    }, [policy]);
+    }
     const nextPolicy = () => ({
         mode: restricted ? 'restricted' : 'allow_all',
         allowedEmails: splitPolicyList(emails),
@@ -948,17 +950,13 @@ export function CustomConnectorForm({ projectId, emailChannelEnabled, onAdded, }
         const timer = window.setTimeout(() => setDiscoveryDraft(draft), 400);
         return () => window.clearTimeout(timer);
     }, [draft]);
-    useEffect(() => {
-        if (!emailChannelEnabled && draft.provider === 'channel' && draft.platform === 'email') {
-            setDraft((current) => ({ ...current, platform: 'slack' }));
-        }
-    }, [draft.platform, draft.provider, emailChannelEnabled]);
-    useEffect(() => {
-        // Channel connectors have no OAuth2-at-creation offer.
-        if (draft.provider === 'channel' && oauth2Selected) {
-            setOauth2Selected(false);
-        }
-    }, [draft.provider, oauth2Selected]);
+    if (!emailChannelEnabled && draft.provider === 'channel' && draft.platform === 'email') {
+        setDraft((current) => ({ ...current, platform: 'slack' }));
+    }
+    // Channel connectors have no OAuth2-at-creation offer.
+    if (draft.provider === 'channel' && oauth2Selected) {
+        setOauth2Selected(false);
+    }
     const save = useCreateCustomConnector(projectId, onAdded);
     const discovery = useQuery({
         queryKey: ['connector-auth-discovery', projectId, discoveryDraft],

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

@@ -6,6 +6,7 @@ import { InfoBanner } from '../../../primitives/info-banner.js';
 import { Input } from '../../../primitives/input.js';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from '../../../primitives/input-group.js';
 import Loading from '../../../primitives/loading.js';
+import { Switch } from '../../../primitives/switch.js';
 import { successToast } from '../../../primitives/toast.js';
 import { useTranslations } from '../../../i18n/index.js';
 import { upsertProjectSecret } from '@kortix/sdk';
@@ -52,7 +53,12 @@ export function CustomProviderForm({ projectId, initialId = '', onSaved, }) {
             const name = form.name.trim();
             const baseUrl = form.baseURL.trim();
             const apiKey = form.apiKey.trim();
-            const model = { id: form.modelId.trim(), name: form.modelName.trim() };
+            const model = {
+                id: form.modelId.trim(),
+                name: form.modelName.trim(),
+                ...(form.attachment !== undefined ? { attachment: form.attachment } : {}),
+                ...(form.reasoning !== undefined ? { reasoning: form.reasoning } : {}),
+            };
             if (!providerId || !name || !baseUrl) {
                 throw new Error('Provider ID, name, and base URL are required');
             }
@@ -69,11 +75,7 @@ export function CustomProviderForm({ projectId, initialId = '', onSaved, }) {
                 throw new Error('Model ID cannot contain spaces');
             }
             const existing = custom.providers.find((p) => p.id === providerId && p.configured);
-            await custom.save(providerId, {
-                name,
-                base_url: baseUrl,
-                models: [...(existing?.models ?? []).filter((m) => m.id !== model.id), model],
-            });
+            // The key first: saving the endpoint reads its `GET /models` for each model's limits.
             if (apiKey) {
                 // LLM provider credentials are always project-wide (see
                 // api-key-connect-form.tsx) — a per-user key is invisible to the
@@ -85,6 +87,21 @@ export function CustomProviderForm({ projectId, initialId = '', onSaved, }) {
                     consumer: 'llm_gateway',
                 });
             }
+            await custom.save(providerId, {
+                name,
+                base_url: baseUrl,
+                models: [
+                    ...(existing?.models ?? [])
+                        .filter((m) => m.id !== model.id)
+                        .map(({ id, name, attachment, reasoning }) => ({
+                        id,
+                        name,
+                        ...(attachment !== undefined ? { attachment } : {}),
+                        ...(reasoning !== undefined ? { reasoning } : {}),
+                    })),
+                    model,
+                ],
+            });
             return providerId;
         },
         onSuccess: (providerId) => {
@@ -110,5 +127,5 @@ export function CustomProviderForm({ projectId, initialId = '', onSaved, }) {
                                         // app — a pasted key used to sit in plaintext on screen.
                                         type: revealKey ? 'text' : 'password', autoComplete: "off", spellCheck: false, "data-1p-ignore": "", "data-lpignore": "true", "data-form-type": "other", value: form.apiKey, onChange: (e) => setField('apiKey', e.target.value), placeholder: tI18nComplete.raw('textb009c6c5299f'), className: "font-mono font-normal" }), form.apiKey ? (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", onClick: () => setRevealKey((current) => !current), title: revealKey ? 'Hide' : 'Show', "aria-label": revealKey
                                                 ? tI18nComplete.raw('text3d0d8c59beb7')
-                                                : tI18nComplete.raw('textcb0b50a0d111'), "aria-pressed": revealKey, className: "text-muted-foreground hover:text-foreground", children: revealKey ? _jsx(EyeSlash, { className: "size-3.5" }) : _jsx(Eye, { className: "size-3.5" }) }) })) : null] }), form.providerId.trim() ? (_jsx("code", { className: "text-muted-foreground font-mono text-xs break-all", children: customProviderSecretName(form.providerId) })) : null] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(FormField, { htmlFor: "custom-model-id", label: tI18nComplete.raw('text089ef2b6dbb3'), children: _jsx(Input, { id: "custom-model-id", type: "text", value: form.modelId, onChange: (e) => setField('modelId', e.target.value), placeholder: tI18nComplete.raw('text34d316295094'), className: "font-mono font-normal" }) }), _jsx(FormField, { htmlFor: "custom-model-name", label: tI18nComplete.raw('texta3c3370cc732'), children: _jsx(Input, { id: "custom-model-name", type: "text", value: form.modelName, onChange: (e) => setField('modelName', e.target.value), placeholder: tI18nComplete.raw('textb70354a1faae'), className: "font-normal" }) })] }), error ? (_jsx(InfoBanner, { tone: "destructive", icon: TriangleAlert, title: tI18nComplete.raw('text464de08899db'), children: error })) : null, _jsx("div", { className: "flex gap-2 pt-1", children: _jsx(Button, { type: "submit", size: "sm", disabled: save.isPending, className: "gap-1.5", children: save.isPending ? (_jsxs(_Fragment, { children: [_jsx(Loading, { className: "size-3.5 shrink-0" }), t('saving')] })) : (t('saveProvider')) }) })] }) }) }));
+                                                : tI18nComplete.raw('textcb0b50a0d111'), "aria-pressed": revealKey, className: "text-muted-foreground hover:text-foreground", children: revealKey ? _jsx(EyeSlash, { className: "size-3.5" }) : _jsx(Eye, { className: "size-3.5" }) }) })) : null] }), form.providerId.trim() ? (_jsx("code", { className: "text-muted-foreground font-mono text-xs break-all", children: customProviderSecretName(form.providerId) })) : null] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(FormField, { htmlFor: "custom-model-id", label: tI18nComplete.raw('text089ef2b6dbb3'), children: _jsx(Input, { id: "custom-model-id", type: "text", value: form.modelId, onChange: (e) => setField('modelId', e.target.value), placeholder: tI18nComplete.raw('text34d316295094'), className: "font-mono font-normal" }) }), _jsx(FormField, { htmlFor: "custom-model-name", label: tI18nComplete.raw('texta3c3370cc732'), children: _jsx(Input, { id: "custom-model-name", type: "text", value: form.modelName, onChange: (e) => setField('modelName', e.target.value), placeholder: tI18nComplete.raw('textb70354a1faae'), className: "font-normal" }) })] }), _jsxs(Field, { className: "gap-2", children: [_jsxs("div", { className: "text-foreground flex flex-wrap items-center gap-x-5 gap-y-2 text-sm", children: [_jsxs("label", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.attachment === true, onCheckedChange: (attachment) => setField('attachment', attachment) }), t('readsImages')] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.reasoning === true, onCheckedChange: (reasoning) => setField('reasoning', reasoning) }), t('reasoning')] })] }), _jsx(FieldDescription, { children: t('traitsHint') })] }), error ? (_jsx(InfoBanner, { tone: "destructive", icon: TriangleAlert, title: tI18nComplete.raw('text464de08899db'), children: error })) : null, _jsx("div", { className: "flex gap-2 pt-1", children: _jsx(Button, { type: "submit", size: "sm", disabled: save.isPending, className: "gap-1.5", children: save.isPending ? (_jsxs(_Fragment, { children: [_jsx(Loading, { className: "size-3.5 shrink-0" }), t('saving')] })) : (t('saveProvider')) }) })] }) }) }));
 }

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;