@kortix/ui 0.14.5 → 0.14.7

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

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

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

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

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

@@ -47,13 +47,13 @@ import { useTranslations } from '../../../../i18n/index.js';
  *
  * | Capability | Where it is now |
  * | --- | --- |
- * | Inherit / custom / no fallback | "When the default fails" row (primary) |
+ * | Inherit / custom / no fallback | "When a model fails" row (primary) |
  * | Ordered default chain, reorder + remove, max 8 | Chain row — one line per step (primary) |
  * | Fallback condition (transient / any error) | "Retry on" line, inside the chain it belongs to |
  * | Per-model override rules, max 20 | "Per-model overrides" — one row per rule, promoted second (primary) |
  * | Vision (image-input) override | "Vision model" row, inside Advanced |
  * | Per-model generation defaults | "Generation defaults" section, inside Advanced |
- * | Provider-availability preview | `AvailabilityBadge`, unchanged, now also on the primary |
+ * | Provider-availability preview | `AvailabilityBadge`, on every chain step and override |
  * | Reset / dirty / validation / save | Header action + sticky footer, unchanged |
  *
  * The data contract is untouched: same props in, same `routing.set` /
@@ -287,26 +287,23 @@ export function GatewayRouting({ projectId, canWrite, projectDefaultPending, })
     const [advancedOpen, setAdvancedOpen] = useState(false);
     const [resetOpen, setResetOpen] = useState(false);
     const [availability, setAvailability] = useState({});
-    const hydratedPolicySignature = useRef(null);
+    const [hydratedPolicySignature, setHydratedPolicySignature] = useState(null);
     const previewRequestId = useRef(0);
-    useEffect(() => {
-        if (!routing.data?.project)
-            return;
-        const signature = editablePolicySignature(routing.data.project);
-        // Effective routing also changes when the header's project default changes.
-        // Keep an in-progress fallback draft intact unless the persisted project
-        // policy itself changed (save, reset, or an external editor update).
-        if (hydratedPolicySignature.current === signature)
-            return;
-        hydratedPolicySignature.current = signature;
-        setDraft(clonePolicy(routing.data.project));
-        setFallbackMode(fallbackModeForPolicy(routing.data.project.defaultFallback));
-        setAdvancedOpen((current) => current || hasAdvancedRoutingConfig(routing.data.project));
-    }, [routing.data]);
+    // Effective routing also changes when the header's project default changes.
+    // Keep an in-progress fallback draft intact unless the persisted project
+    // policy itself changed (save, reset, or an external editor update).
+    const persistedProject = routing.data?.project;
+    const persistedSignature = persistedProject ? editablePolicySignature(persistedProject) : null;
+    if (persistedProject && persistedSignature !== hydratedPolicySignature) {
+        setHydratedPolicySignature(persistedSignature);
+        setDraft(clonePolicy(persistedProject));
+        setFallbackMode(fallbackModeForPolicy(persistedProject.defaultFallback));
+        setAdvancedOpen((current) => current || hasAdvancedRoutingConfig(persistedProject));
+    }
+    const previewRoute = routing.preview.mutateAsync;
     // Debounced availability preview: whenever the draft's referenced models
     // change, ask the gateway which of them currently have a connected
     // provider so the chain editor can flag a dead fallback before save.
-    // biome-ignore lint/correctness/useExhaustiveDependencies: routing.preview's mutateAsync is a stable handle from useGatewayRoutingPolicy and shouldn't retrigger this debounce.
     useEffect(() => {
         if (!draft || !routing.data) {
             setAvailability({});
@@ -325,7 +322,7 @@ export function GatewayRouting({ projectId, canWrite, projectDefaultPending, })
         const timer = setTimeout(() => {
             Promise.all(targets.map(async (model) => {
                 try {
-                    const result = await routing.preview.mutateAsync({
+                    const result = await previewRoute({
                         requestedModel: model,
                         imageInput: false,
                     });
@@ -345,7 +342,7 @@ export function GatewayRouting({ projectId, canWrite, projectDefaultPending, })
             });
         }, 400);
         return () => clearTimeout(timer);
-    }, [draft, routing.data, modelDefaults.projectDefault]);
+    }, [draft, routing.data, modelDefaults.projectDefault, previewRoute]);
     const models = useMemo(() => {
         const byWire = new Map();
         for (const model of catalogModels) {
@@ -441,7 +438,7 @@ export function GatewayRouting({ projectId, canWrite, projectDefaultPending, })
             };
         });
     };
-    return (_jsxs(RoutingSection, { action: writable ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: controlsDisabled, onClick: () => setResetOpen(true), children: [_jsx(RotateCcw, { className: "size-3.5" }), " ", tI18nComplete.raw('textdaee7606b339')] })) : (_jsx(Badge, { variant: "muted", size: "sm", children: tI18nComplete.raw('text8ac767353080') })), children: [_jsxs("div", { className: "space-y-8", children: [_jsxs("section", { className: "space-y-1", children: [_jsx(Label, { className: "text-foreground", children: tI18nComplete.raw('text325e84939c64') }), _jsxs("div", { className: "flex flex-col", children: [_jsx(RoutingRow, { label: tI18nComplete.raw('text146b38e7fa80'), hint: tI18nComplete.raw('textd48d1b0dbdd6'), children: _jsxs(Select, { value: fallbackMode, disabled: controlsDisabled, onValueChange: (mode) => changeFallbackMode(mode), children: [_jsx(SelectTrigger, { className: "w-48 max-w-full", "aria-label": tI18nComplete.raw('textdf33a10e5579'), children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "inherit", children: tI18nComplete.raw('text975aa2ab538e') }), _jsx(SelectItem, { value: "custom", children: tI18nComplete.raw('texta913ec01bd04') }), _jsx(SelectItem, { value: "disabled", children: tI18nComplete.raw('text3822b0412ed7') })] })] }) }), fallbackMode === 'custom' && draft.defaultFallback ? (_jsx(RoutingRow, { align: "start", label: _jsx("span", { className: "truncate font-mono text-xs", children: primaryModel }), hint: tI18nComplete.raw('textc3ecd3cd791b'), children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(AvailabilityBadge, { available: availability[primaryModel] }), _jsx(ChainRows, { primary: primaryModel, chain: draft.defaultFallback, models: models, disabled: controlsDisabled, availability: availability, onChange: (defaultFallback) => setDraft({ ...draft, defaultFallback }) })] }) })) : fallbackMode === 'inherit' ? (_jsx(RoutingRow, { label: tI18nComplete.raw('text74a1a0f65906'), children: _jsx("p", { className: "text-muted-foreground truncate font-mono text-xs", children: inheritedRoute }) })) : (_jsx(RoutingRow, { label: tI18nComplete.raw('text0af465ef42c0'), children: _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('texta3df3f9e4422') }) }))] })] }), _jsxs("section", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "text-foreground", children: tI18nComplete.raw('text5c63c15261bb') }), draft.rules.length > 0 ? (_jsx(Badge, { variant: "secondary", size: "sm", children: draft.rules.length })) : null] }), writable ? (_jsxs(Button, { type: "button", size: "sm", variant: "secondary", disabled: controlsDisabled || !newRuleModel || draft.rules.length >= MAX_RULES, onClick: () => newRuleModel &&
+    return (_jsxs(RoutingSection, { action: writable ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: controlsDisabled, onClick: () => setResetOpen(true), children: [_jsx(RotateCcw, { className: "size-3.5" }), " ", tI18nComplete.raw('textdaee7606b339')] })) : (_jsx(Badge, { variant: "muted", size: "sm", children: tI18nComplete.raw('text8ac767353080') })), children: [_jsxs("div", { className: "space-y-8", children: [_jsxs("section", { className: "space-y-1", children: [_jsx(Label, { className: "text-foreground", children: tI18nComplete.raw('text325e84939c64') }), _jsxs("div", { className: "flex flex-col", children: [_jsx(RoutingRow, { label: tI18nComplete.raw('text146b38e7fa80'), hint: tI18nComplete.raw('textd48d1b0dbdd6'), children: _jsxs(Select, { value: fallbackMode, disabled: controlsDisabled, onValueChange: (mode) => changeFallbackMode(mode), children: [_jsx(SelectTrigger, { className: "w-48 max-w-full", "aria-label": tI18nComplete.raw('textdf33a10e5579'), children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "inherit", children: tI18nComplete.raw('text975aa2ab538e') }), _jsx(SelectItem, { value: "custom", children: tI18nComplete.raw('texta913ec01bd04') }), _jsx(SelectItem, { value: "disabled", children: tI18nComplete.raw('text3822b0412ed7') })] })] }) }), fallbackMode === 'custom' && draft.defaultFallback ? (_jsx(RoutingRow, { align: "start", label: tI18nComplete.raw('texte75d99a42dba'), hint: tI18nComplete.raw('textc3ecd3cd791b'), children: _jsx("div", { className: "space-y-1.5", children: _jsx(ChainRows, { primary: primaryModel, chain: draft.defaultFallback, models: models, disabled: controlsDisabled, availability: availability, onChange: (defaultFallback) => setDraft({ ...draft, defaultFallback }) }) }) })) : fallbackMode === 'inherit' ? (_jsx(RoutingRow, { label: tI18nComplete.raw('text74a1a0f65906'), children: _jsx("p", { className: "text-muted-foreground truncate font-mono text-xs", children: inheritedRoute }) })) : (_jsx(RoutingRow, { label: tI18nComplete.raw('text0af465ef42c0'), children: _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('texta3df3f9e4422') }) }))] })] }), _jsxs("section", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "text-foreground", children: tI18nComplete.raw('text5c63c15261bb') }), draft.rules.length > 0 ? (_jsx(Badge, { variant: "secondary", size: "sm", children: draft.rules.length })) : null] }), writable ? (_jsxs(Button, { type: "button", size: "sm", variant: "secondary", disabled: controlsDisabled || !newRuleModel || draft.rules.length >= MAX_RULES, onClick: () => newRuleModel &&
                                             setDraft({
                                                 ...draft,
                                                 rules: [

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

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

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

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

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

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

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

@@ -14,6 +14,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { Field, FieldDescription, FieldLabel } from '../../../primitives/field.js';
 import Hint from '../../../primitives/hint.js';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../../primitives/hover-card.js';
+import { Alert, AlertDescription, AlertTitle } from '../../../primitives/alert.js';
 import { InfoBanner } from '../../../primitives/info-banner.js';
 import { Input } from '../../../primitives/input.js';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../../primitives/input-group.js';
@@ -666,7 +667,7 @@ function SecretDialog({ open, onOpenChange, projectId, row, connectors, connecto
                     /* Read-only, because another flow assigned it. Same treatment
                        the git-connection secret always had, now covering the LLM
                        gateway and connector rows it was always true of. */
-                    _jsxs("div", { id: "secret-dialog-delivery", className: "border-border bg-sidebar rounded-md border p-3", children: [_jsx(Badge, { variant: selectedDelivery.tone, size: "sm", children: selectedDelivery.label }), _jsxs("p", { className: "text-muted-foreground mt-2 text-xs text-pretty", children: [selectedDelivery.description, " ", tI18nComplete.raw('text5740535823f9')] })] })) : (_jsxs(Select, { value: exposure, onValueChange: (next) => setPickedExposure(next), disabled: save.isPending, children: [_jsx(SelectTrigger, { id: "secret-dialog-delivery", className: "min-h-10 w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: exposureOptions.map((option) => (_jsx(SelectItem, { value: option.exposure, description: option.description, children: option.label }, option.exposure))) })] })), !usageAssigned && (_jsx(FieldDescription, { children: selectedDelivery.description }))] }), strategy === 'runtime' && (_jsx(InfoBanner, { tone: "warning", title: tI18nComplete.raw('text4fb8319405f3'), children: tI18nComplete.raw('textdb71b63b5778') })), grantNotice && (_jsxs(InfoBanner, { tone: "warning", icon: _jsx(DangerTriangleSolid, { weight: "fill" }), title: grantNotice.title, className: "[&_[data-slot=alert-content]]:min-w-0", children: [_jsx("span", { className: "block text-pretty", children: grantNotice.body }), grantPlan.candidates.length > 0 && (_jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [grantPlan.candidates.length > 1 && (_jsxs(Select, { value: selectedGrantAgent ?? '', onValueChange: setGrantAgent, disabled: grant.isPending, children: [_jsx(SelectTrigger, { "aria-label": tI18nComplete.raw('text33e745179bcb'), className: "h-8 w-48", children: _jsx(SelectValue, { placeholder: tI18nComplete.raw('textb6890bc23a9c') }) }), _jsx(SelectContent, { children: grantPlan.candidates.map((candidate) => (_jsx(SelectItem, { value: candidate.name, description: agentGrantCandidateHint(candidate) ?? undefined, children: candidate.name }, candidate.name))) })] })), _jsxs(Button, { type: "button", size: "sm", onClick: startGrant, disabled: !selectedGrantAgent || grant.isPending, children: [grant.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, agentGrantActionLabel(grantPlan, selectedGrantAgent)] })] })), grantPlan.candidates.length === 0 && (_jsx("span", { className: "text-muted-foreground mt-2 block text-xs text-pretty", children: tI18nComplete.raw('textf23c70160b5b') })), selectedGrantHint && (_jsx("span", { className: "text-muted-foreground mt-2 block text-xs text-pretty", children: selectedGrantHint })), grant.error && (_jsx("span", { className: "text-kortix-red mt-2 block text-xs text-pretty", children: agentGrantErrorMessage(grant.error) })), _jsx("pre", { className: "border-border bg-muted mt-2 overflow-x-auto rounded-sm border p-2 font-mono text-xs leading-relaxed", children: grantManifest })] })), needsHosts && (_jsxs("div", { className: "border-border bg-sidebar space-y-4 rounded-md border p-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: tI18nComplete.raw('textd3297c00f7a2') }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('text76f48924ee10') })] }), _jsxs(InfoBanner, { tone: "neutral", title: echoNotice.title, className: "[&_[data-slot=alert-content]]:min-w-0", children: [_jsx("span", { className: "block text-pretty", children: echoNotice.body }), _jsx("pre", { className: "border-border bg-muted mt-2 overflow-x-auto rounded-sm border p-2 font-mono text-xs leading-relaxed", children: echoNotice.probe }), _jsx(Link, { href: echoNotice.docsHref, target: "_blank", rel: "noreferrer", className: "text-muted-foreground hover:text-foreground mt-2 inline-block text-xs underline underline-offset-2", children: echoNotice.docsLabel })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "secret-dialog-hosts", children: tI18nComplete.raw('textbba9af131107') }), _jsx(Textarea, { id: "secret-dialog-hosts", value: hosts, onChange: (event) => setEditedHosts(event.target.value), placeholder: tI18nComplete.raw('text07de8e6e567f'), minHeight: 56, maxHeight: 112, variant: "outline", className: "font-mono text-xs", disabled: save.isPending }), _jsx(FieldDescription, { children: tI18nComplete.raw('text80befc2e0620') })] }), legacyDetail && (_jsxs("div", { className: "border-border bg-popover space-y-2 rounded-md border p-3", children: [_jsx("p", { className: "text-sm font-medium", children: legacyDetail.title }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: legacyDetail.body }), _jsx("dl", { className: "text-muted-foreground space-y-0.5 font-mono text-xs", children: legacyDetail.lines.map((line) => (_jsx("dd", { children: line }, line))) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setLegacyInject(null), disabled: save.isPending, children: tI18nComplete.raw('text4a72652fb7e7') })] }))] })), row?.consumer === 'connector' && (_jsx("div", { className: "border-border bg-sidebar space-y-4 rounded-md border p-3", children: _jsxs(Field, { children: [_jsx(FieldLabel, { children: tI18nComplete.raw('textc3d2e79ebdd0') }), connectorsLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-12 rounded-md" }), _jsx(Skeleton, { className: "h-12 rounded-md" })] })) : connectorOptions.length === 0 ? (_jsx(InfoBanner, { tone: "neutral", title: tI18nComplete.raw('text10798ef769fd'), children: tI18nComplete.raw('text0b834e60371f') })) : (_jsx("div", { className: "bg-popover overflow-hidden rounded-md border", children: connectorOptions.map((option, index) => (_jsxs("label", { className: cn('flex min-h-12 items-center gap-3 px-3 py-2', index > 0 && 'border-t', option.disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'), children: [_jsx(Checkbox, { checked: effectiveSelectedConnectorSlugSet.has(option.slug), disabled: option.disabled || save.isPending, onCheckedChange: (checked) => {
+                    _jsxs("div", { id: "secret-dialog-delivery", className: "border-border bg-sidebar rounded-md border p-3", children: [_jsx(Badge, { variant: selectedDelivery.tone, size: "sm", children: selectedDelivery.label }), _jsxs("p", { className: "text-muted-foreground mt-2 text-xs text-pretty", children: [selectedDelivery.description, " ", tI18nComplete.raw('text5740535823f9')] })] })) : (_jsxs(Select, { value: exposure, onValueChange: (next) => setPickedExposure(next), disabled: save.isPending, children: [_jsx(SelectTrigger, { id: "secret-dialog-delivery", className: "min-h-10 w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: exposureOptions.map((option) => (_jsx(SelectItem, { value: option.exposure, description: option.description, children: option.label }, option.exposure))) })] })), !usageAssigned && (_jsx(FieldDescription, { children: selectedDelivery.description }))] }), strategy === 'runtime' && (_jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: tI18nComplete.raw('text4fb8319405f3') }), _jsx(AlertDescription, { children: tI18nComplete.raw('textdb71b63b5778') })] })), grantNotice && (_jsxs(InfoBanner, { tone: "warning", icon: _jsx(DangerTriangleSolid, { weight: "fill" }), title: grantNotice.title, className: "[&_[data-slot=alert-content]]:min-w-0", children: [_jsx("span", { className: "block text-pretty", children: grantNotice.body }), grantPlan.candidates.length > 0 && (_jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [grantPlan.candidates.length > 1 && (_jsxs(Select, { value: selectedGrantAgent ?? '', onValueChange: setGrantAgent, disabled: grant.isPending, children: [_jsx(SelectTrigger, { "aria-label": tI18nComplete.raw('text33e745179bcb'), className: "h-8 w-48", children: _jsx(SelectValue, { placeholder: tI18nComplete.raw('textb6890bc23a9c') }) }), _jsx(SelectContent, { children: grantPlan.candidates.map((candidate) => (_jsx(SelectItem, { value: candidate.name, description: agentGrantCandidateHint(candidate) ?? undefined, children: candidate.name }, candidate.name))) })] })), _jsxs(Button, { type: "button", size: "sm", onClick: startGrant, disabled: !selectedGrantAgent || grant.isPending, children: [grant.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, agentGrantActionLabel(grantPlan, selectedGrantAgent)] })] })), grantPlan.candidates.length === 0 && (_jsx("span", { className: "text-muted-foreground mt-2 block text-xs text-pretty", children: tI18nComplete.raw('textf23c70160b5b') })), selectedGrantHint && (_jsx("span", { className: "text-muted-foreground mt-2 block text-xs text-pretty", children: selectedGrantHint })), grant.error && (_jsx("span", { className: "text-kortix-red mt-2 block text-xs text-pretty", children: agentGrantErrorMessage(grant.error) })), _jsx("pre", { className: "border-border bg-muted mt-2 overflow-x-auto rounded-sm border p-2 font-mono text-xs leading-relaxed", children: grantManifest })] })), needsHosts && (_jsxs("div", { className: "border-border bg-sidebar space-y-4 rounded-md border p-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: tI18nComplete.raw('textd3297c00f7a2') }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete.raw('text76f48924ee10') })] }), _jsxs(InfoBanner, { tone: "neutral", title: echoNotice.title, className: "[&_[data-slot=alert-content]]:min-w-0", children: [_jsx("span", { className: "block text-pretty", children: echoNotice.body }), _jsx("pre", { className: "border-border bg-muted mt-2 overflow-x-auto rounded-sm border p-2 font-mono text-xs leading-relaxed", children: echoNotice.probe }), _jsx(Link, { href: echoNotice.docsHref, target: "_blank", rel: "noreferrer", className: "text-muted-foreground hover:text-foreground mt-2 inline-block text-xs underline underline-offset-2", children: echoNotice.docsLabel })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "secret-dialog-hosts", children: tI18nComplete.raw('textbba9af131107') }), _jsx(Textarea, { id: "secret-dialog-hosts", value: hosts, onChange: (event) => setEditedHosts(event.target.value), placeholder: tI18nComplete.raw('text07de8e6e567f'), minHeight: 56, maxHeight: 112, variant: "outline", className: "font-mono text-xs", disabled: save.isPending }), _jsx(FieldDescription, { children: tI18nComplete.raw('text80befc2e0620') })] }), legacyDetail && (_jsxs("div", { className: "border-border bg-popover space-y-2 rounded-md border p-3", children: [_jsx("p", { className: "text-sm font-medium", children: legacyDetail.title }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: legacyDetail.body }), _jsx("dl", { className: "text-muted-foreground space-y-0.5 font-mono text-xs", children: legacyDetail.lines.map((line) => (_jsx("dd", { children: line }, line))) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setLegacyInject(null), disabled: save.isPending, children: tI18nComplete.raw('text4a72652fb7e7') })] }))] })), row?.consumer === 'connector' && (_jsx("div", { className: "border-border bg-sidebar space-y-4 rounded-md border p-3", children: _jsxs(Field, { children: [_jsx(FieldLabel, { children: tI18nComplete.raw('textc3d2e79ebdd0') }), connectorsLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-12 rounded-md" }), _jsx(Skeleton, { className: "h-12 rounded-md" })] })) : connectorOptions.length === 0 ? (_jsx(InfoBanner, { tone: "neutral", title: tI18nComplete.raw('text10798ef769fd'), children: tI18nComplete.raw('text0b834e60371f') })) : (_jsx("div", { className: "bg-popover overflow-hidden rounded-md border", children: connectorOptions.map((option, index) => (_jsxs("label", { className: cn('flex min-h-12 items-center gap-3 px-3 py-2', index > 0 && 'border-t', option.disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'), children: [_jsx(Checkbox, { checked: effectiveSelectedConnectorSlugSet.has(option.slug), disabled: option.disabled || save.isPending, onCheckedChange: (checked) => {
                                             setSelectedConnectorSlugs((current) => checked
                                                 ? [
                                                     ...new Set([

package/dist/customize/settings/rail-copy-context.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import { railGroups } from './rail.js';
 export const DEFAULT_SETTINGS_RAIL_CHROME_COPY = {
     settings: 'Settings',
@@ -14,13 +14,15 @@ const DEFAULT_VALUE = {
 };
 const SettingsRailCopyContext = createContext(DEFAULT_VALUE);
 export function SettingsRailCopyProvider({ groups, chrome, children, }) {
-    return (_jsx(SettingsRailCopyContext.Provider, { value: { groups, chrome }, children: children }));
+    const value = useMemo(() => ({ groups, chrome }), [groups, chrome]);
+    return (_jsx(SettingsRailCopyContext.Provider, { value: value, children: children }));
 }
 export function useSettingsRailChromeCopy() {
     return useContext(SettingsRailCopyContext).chrome;
 }
 export function useSettingsRailItem(tab) {
-    for (const group of useContext(SettingsRailCopyContext).groups) {
+    const { groups } = useContext(SettingsRailCopyContext);
+    for (const group of groups) {
         const item = group.items.find((candidate) => candidate.tab === tab);
         if (item)
             return item;

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

@@ -34,7 +34,7 @@ export interface GeneralTabViewProps {
      *  `useQuery`/mutations, so it can't render under `renderToStaticMarkup`
      *  with no providers. */
     /** Whether the Delete-workspace section shows at all — gated on
-     *  `project.delete`, NOT the broader `project.write` gate
+     *  `project.delete`, NOT the broader `project.settings.write` gate
      *  `generalFieldsSlot`'s fields use. Deleting and editing are separate
      *  permissions, so a custom role can grant one without the other. */
     canDelete?: boolean;
@@ -44,6 +44,13 @@ export interface GeneralTabViewProps {
     onCloseArchiveDialog?: () => void;
     onConfirmArchive?: () => void;
     isArchivePending?: boolean;
+    /** `TransferWorkspaceEntry` — the second danger-zone row and its dialog.
+     *  A slot for the same reason the others are: the dialog owns its own
+     *  accounts query and mutation, so it cannot render under
+     *  `renderToStaticMarkup` with no providers. Shares the Delete section's
+     *  `canDelete` gate — the API's source gate for a transfer is the same
+     *  destructive tier that gates delete. */
+    transferSlot?: ReactNode;
 }
 export interface GeneralTabCopy {
     loadFailed: string;
@@ -64,7 +71,7 @@ export interface GeneralTabCopy {
  *  `ProfileTabView`/`ConnectedAccountsTabView` for the same split. Every
  *  prop is optional with a safe default so the bare `<GeneralTabView />`
  *  the test file renders shows the Delete-workspace section fully formed. */
-export declare function GeneralTabView({ copy, isLoading, isError, errorMessage, onRetry, generalFieldsSlot, canDelete, workspaceName, archiveOpen, onOpenArchiveDialog, onCloseArchiveDialog, onConfirmArchive, isArchivePending, }: GeneralTabViewProps): import("react").JSX.Element;
+export declare function GeneralTabView({ copy, isLoading, isError, errorMessage, onRetry, generalFieldsSlot, canDelete, workspaceName, archiveOpen, onOpenArchiveDialog, onCloseArchiveDialog, onConfirmArchive, isArchivePending, transferSlot, }: GeneralTabViewProps): import("react").JSX.Element;
 export interface RunProjectArchiveClient {
     archiveProject: (projectId: string) => Promise<unknown>;
 }

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from 'react';
 import { Button } from '../../../primitives/button.js';
 import { Input } from '../../../primitives/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../primitives/select.js';
 import { SettingsRow, SettingsRowGroup } from '../../../primitives/settings-row.js';
 import { SettingsSubsectionHeader } from '../../../primitives/settings-subsection-header.js';
 import { Skeleton } from '../../../primitives/skeleton.js';
@@ -19,17 +20,30 @@ import { forgetLastProjectId } from '../../../internal/lib/onboarding/last-proje
 import { PROJECT_ACTIONS } from '../../../internal/lib/project-actions.js';
 import { useProjectCans } from '../../../internal/lib/use-project-can.js';
 import { useSettingsPanelStore } from '../../../internal/stores/settings-panel-store.js';
-import { archiveProject, getProject, updateProject, } from '@kortix/sdk';
+import { TransferWorkspaceEntry } from './transfer-workspace-dialog.js';
+import { archiveProject, getProject, setDefaultReasoningEffort, updateProject, } from '@kortix/sdk';
 import { contract, invalidateProjectIdentity, qk } from '@kortix/sdk/react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useUiRouter, useUiViewerId } from '../../../providers/ui-provider.js';
 import { SettingsTabHeader } from '../settings-tab-header.js';
-/** Asked for in ONE batched probe. `project.delete` and `project.write` are
+/** Asked for in ONE batched probe. `project.delete` and `project.settings.write` are
  *  separate permissions — see `ProjectSettingsGeneralProps.canDelete`. */
 const GENERAL_TAB_ACTIONS = [
-    PROJECT_ACTIONS.PROJECT_WRITE,
+    PROJECT_ACTIONS.PROJECT_SETTINGS_WRITE,
     PROJECT_ACTIONS.PROJECT_DELETE,
 ];
+/** The effort ladder the default-effort picker offers. These are models.dev
+ *  variant ids — technical values, shown capitalized like the composer's
+ *  own effort selector does (its `label`), never translated.
+ *
+ *  The API clamps the stored default at delivery to what the session's model
+ *  actually publishes (`effortVariantForPrompt`), so a pick the session's
+ *  model does not carry degrades to Automatic rather than breaking the turn;
+ *  the picker still offers the superset the catalog carries. */
+const DEFAULT_EFFORT_OPTIONS = ['none', 'low', 'medium', 'high', 'xhigh', 'max'];
+const DEFAULT_EFFORT_AUTOMATIC = '';
+/** `medium` → `Medium` — same casing rule as the composer's effort selector. */
+const effortOptionLabel = (value) => value.charAt(0).toUpperCase() + value.slice(1);
 export const DELETE_WORKSPACE_CONSEQUENCES = [
     'Every session in this workspace, with its files, history, and outputs',
     'All scheduled runs and triggers — they stop firing straight away',
@@ -61,8 +75,8 @@ const DEFAULT_GENERAL_COPY = {
  *  `ProfileTabView`/`ConnectedAccountsTabView` for the same split. Every
  *  prop is optional with a safe default so the bare `<GeneralTabView />`
  *  the test file renders shows the Delete-workspace section fully formed. */
-export function GeneralTabView({ copy = DEFAULT_GENERAL_COPY, isLoading = false, isError = false, errorMessage = '', onRetry = () => { }, generalFieldsSlot, canDelete = true, workspaceName = '', archiveOpen = false, onOpenArchiveDialog = () => { }, onCloseArchiveDialog = () => { }, onConfirmArchive = () => { }, isArchivePending = false, }) {
-    return (_jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-8", children: [_jsx(SettingsTabHeader, { tab: "general" }), isLoading ? (_jsxs("div", { className: "space-y-5", children: [_jsx(Skeleton, { className: "h-40 rounded-md" }), _jsx(Skeleton, { className: "h-20 rounded-md" })] })) : isError ? (_jsx(ErrorState, { size: "sm", title: copy.loadFailed, description: errorMessage, action: _jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: copy.retry }) })) : (_jsxs(_Fragment, { children: [generalFieldsSlot, canDelete ? (_jsxs("section", { className: "space-y-3", children: [_jsx(SettingsSubsectionHeader, { title: copy.dangerZone }), _jsx(SettingsRowGroup, { children: _jsx(SettingsRow, { label: copy.deleteWorkspace, description: copy.deleteDescription, children: _jsx(Button, { variant: "ghost", size: "sm", className: "text-destructive hover:bg-destructive/10 hover:text-destructive", onClick: onOpenArchiveDialog, children: copy.deleteWorkspace }) }) })] })) : null] })), _jsx(TypeToConfirmDialog, { open: archiveOpen, onOpenChange: (open) => {
+export function GeneralTabView({ copy = DEFAULT_GENERAL_COPY, isLoading = false, isError = false, errorMessage = '', onRetry = () => { }, generalFieldsSlot, canDelete = true, workspaceName = '', archiveOpen = false, onOpenArchiveDialog = () => { }, onCloseArchiveDialog = () => { }, onConfirmArchive = () => { }, isArchivePending = false, transferSlot, }) {
+    return (_jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-8", children: [_jsx(SettingsTabHeader, { tab: "general" }), isLoading ? (_jsxs("div", { className: "space-y-5", children: [_jsx(Skeleton, { className: "h-40 rounded-md" }), _jsx(Skeleton, { className: "h-20 rounded-md" })] })) : isError ? (_jsx(ErrorState, { size: "sm", title: copy.loadFailed, description: errorMessage, action: _jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: copy.retry }) })) : (_jsxs(_Fragment, { children: [generalFieldsSlot, canDelete ? (_jsxs("section", { className: "space-y-3", children: [_jsx(SettingsSubsectionHeader, { title: copy.dangerZone }), _jsxs(SettingsRowGroup, { children: [_jsx(SettingsRow, { label: copy.deleteWorkspace, description: copy.deleteDescription, children: _jsx(Button, { variant: "ghost", size: "sm", className: "text-destructive hover:bg-destructive/10 hover:text-destructive", onClick: onOpenArchiveDialog, children: copy.deleteWorkspace }) }), transferSlot] })] })) : null] })), _jsx(TypeToConfirmDialog, { open: archiveOpen, onOpenChange: (open) => {
                     if (!open)
                         onCloseArchiveDialog();
                 }, title: copy.deleteTitle, description: copy.deleteDialog(workspaceName), consequencesTitle: copy.consequencesTitle, consequences: copy.consequences, reassurance: copy.reassurance, 
@@ -125,7 +139,7 @@ export function withoutProject(data, projectId) {
  *  `GeneralProjectCard` (name — see this file's header comment for what's
  *  byte-identical) and extended with icon editing, reusing `ProjectIconField`
  *  / `buildProjectEditPatch` unmodified — see this file's header comment. */
-function GeneralWorkspaceCard({ project, canManage, }) {
+function GeneralWorkspaceCard({ project, canManage, canManageEffort, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const t = useTranslations('settings.workspace');
     const queryClient = useQueryClient();
@@ -157,6 +171,13 @@ function GeneralWorkspaceCard({ project, canManage, }) {
         onSettled: () => renameOnSettled(queryClient, project.project_id),
     });
     const { mutate: mutateName, isPending: isRenamePending } = renameMutation;
+    const effortMutation = useMutation({
+        mutationFn: (effort) => setDefaultReasoningEffort(project.project_id, effort),
+        onSuccess: (updated) => {
+            queryClient.setQueryData(qk.project.summary(project.project_id), updated);
+        },
+        onError: (error) => errorToast(error.message || t('updateFailed')),
+    });
     useEffect(() => {
         if (!canManage || isRenamePending)
             return;
@@ -215,7 +236,7 @@ function GeneralWorkspaceCard({ project, canManage, }) {
                         // Not `variant="popover"` any more: the group it now sits in is
                         // itself `bg-popover`, so a popover-tinted input would vanish into
                         // it. The default `bg-input` is what makes it read as a control.
-                        className: "h-8 w-56" })] })] }));
+                        className: "h-8 w-56" })] }), _jsx(SettingsRow, { label: t('defaultEffort'), description: t('defaultEffortDescription'), children: _jsxs(Select, { value: project.default_reasoning_effort ?? DEFAULT_EFFORT_AUTOMATIC, onValueChange: (v) => effortMutation.mutate(v === DEFAULT_EFFORT_AUTOMATIC ? null : v), disabled: !canManageEffort || effortMutation.isPending, children: [_jsx(SelectTrigger, { "aria-label": t('defaultEffort'), className: "h-8 w-40 shrink-0", children: _jsx(SelectValue, { placeholder: t('defaultEffortAutomatic') }) }), _jsxs(SelectContent, { align: "end", children: [_jsx(SelectItem, { value: DEFAULT_EFFORT_AUTOMATIC, children: t('defaultEffortAutomatic') }), DEFAULT_EFFORT_OPTIONS.map((effort) => (_jsx(SelectItem, { value: effort, children: effortOptionLabel(effort) }, effort)))] })] }) })] }));
 }
 /** Container: owns every hook (React Query, IAM probe, archive dialog state)
  *  and renders `GeneralTabView` with real data + slots. Only ever mounted
@@ -235,12 +256,13 @@ export function GeneralTab({ projectId }) {
     });
     const project = projectQuery.data;
     // Two DIFFERENT permissions, asked for separately. `project.delete` gates the
-    // Delete-workspace section; `project.write` gates the fields. Reading a
+    // Delete-workspace section; `project.settings.write` gates the fields. Reading a
     // `manager` role label instead would have hidden Delete from a custom role
     // that holds `project.delete`, and shown it to one that does not.
     const caps = useProjectCans(projectId, GENERAL_TAB_ACTIONS);
     const canDelete = caps[PROJECT_ACTIONS.PROJECT_DELETE]?.allowed === true;
-    const canEdit = caps[PROJECT_ACTIONS.PROJECT_WRITE]?.allowed === true;
+    const canEdit = caps[PROJECT_ACTIONS.PROJECT_SETTINGS_WRITE]?.allowed === true;
+    const canEditEffort = canEdit;
     const archiveMutation = useMutation({
         mutationFn: () => runProjectArchive(projectId, { archiveProject }, 
         // The archived project must stop being where `/` and the settings
@@ -283,8 +305,8 @@ export function GeneralTab({ projectId }) {
             ],
             reassurance: t('reassurance'),
             keepWorkspace: t('keepWorkspace'),
-        }, isLoading: projectQuery.isLoading, isError: projectQuery.isError, errorMessage: projectQuery.error?.message ?? '', onRetry: () => projectQuery.refetch(), generalFieldsSlot: project ? _jsx(GeneralWorkspaceCard, { project: project, canManage: canEdit }) : undefined, 
+        }, isLoading: projectQuery.isLoading, isError: projectQuery.isError, errorMessage: projectQuery.error?.message ?? '', onRetry: () => projectQuery.refetch(), generalFieldsSlot: project ? _jsx(GeneralWorkspaceCard, { project: project, canManage: canEdit, canManageEffort: canEditEffort }) : undefined, 
         // No git-repo slot: Git repo is its own Settings section since
         // 2026-09-03 (`project-settings-sections.ts`).
-        canDelete: canDelete, workspaceName: project?.name, archiveOpen: archiveOpen, onOpenArchiveDialog: () => setArchiveOpen(true), onCloseArchiveDialog: () => setArchiveOpen(false), onConfirmArchive: () => archiveMutation.mutate(), isArchivePending: archiveMutation.isPending }));
+        canDelete: canDelete, workspaceName: project?.name, archiveOpen: archiveOpen, onOpenArchiveDialog: () => setArchiveOpen(true), onCloseArchiveDialog: () => setArchiveOpen(false), onConfirmArchive: () => archiveMutation.mutate(), isArchivePending: archiveMutation.isPending, transferSlot: _jsx(TransferWorkspaceEntry, { projectId: projectId, currentAccountId: project?.account_id }) }));
 }