@kortix/ui 0.0.0-stage → 0.14.4

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

@@ -0,0 +1,102 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations as useI18nTranslations } from '../../../i18n/index.js';
+/**
+ * The first two sections of the agent editor: what the agent IS (Basics) and
+ * how it thinks (Model).
+ *
+ * These used to be one "OpenCode layer" block, headed by a chip icon and named
+ * after the runtime that stores them. The runtime is not what anyone is
+ * looking for. Both sections write to the same place they always did — the
+ * agent's markdown file, via `setOc` — but the grouping now follows the
+ * question being answered, not the file being written.
+ *
+ * `Basics` spans both writers on purpose: "Enabled" is a Kortix-side key
+ * (`set`) and everything beside it is runtime-side (`setOc`). Splitting the
+ * 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';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../primitives/select.js';
+import { Slider } from '../../../primitives/slider.js';
+import { Switch } from '../../../primitives/switch.js';
+import { Textarea } from '../../../primitives/textarea.js';
+import { ModelSelector } from '../../../session/models/model-selector.js';
+import { ReasoningEffortSelector } from '../../../session/composer/reasoning-effort-selector.js';
+import { modelRefToKey } from '@kortix/sdk';
+import { flattenModels, modelKeyToWire, modelProviderMode, useRuntimeProviders, } from '@kortix/sdk/react';
+import { AGENT_MODE_HELP, AGENT_MODE_LABEL, AGENT_MODES } from './agent-editor-catalog.js';
+import { EditorSection, InlineAction, SettingBlock, SettingRow } from './agent-editor-primitives.js';
+/** Matches the access section's inherit sentinel — Radix forbids `""`. */
+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'
+                    ? 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) }) }) })] }));
+}
+export function ModelSection({ oc, setOc, showPrompt = true, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const { data: providers } = useRuntimeProviders();
+    const models = flattenModels(providers, { providerMode: modelProviderMode(providers) });
+    const selectedModelKey = oc.model ? modelRefToKey(oc.model) : null;
+    // The pinned model's published variants — the same list the composer's
+    // thinking-effort pill offers. With a list, the knob is that pill (Marko,
+    // 2026-09-03: "look in chat input how we do it"); without one (no pin, or a
+    // model that publishes none) the raw variant id stays typeable.
+    const selectedModel = selectedModelKey
+        ? 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
+                            ? 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) }) })] })] }));
+}
+/**
+ * Whether a slider row is showing its default.
+ *
+ * True for an absent key (inherit) AND for an explicit value that equals the
+ * value the row parks at. Both put the handle where an untouched row puts it,
+ * so neither is worth offering a Reset for: dragging away and back left
+ * "Reset" sitting under a slider that looked untouched, which reads as a
+ * control with nothing to undo.
+ *
+ * The two states stay distinguishable in the readout — `—` is inherit, a
+ * number is explicit — so no information is lost. To go from an explicit
+ * parked value back to inherit, move the handle; Reset returns with it.
+ *
+ * Compared with a tolerance because `step` is fractional (0.05 / 0.01) and
+ * slider arithmetic does not land on exact binary fractions.
+ */
+export function isSliderAtDefault(value, fallback) {
+    return value === undefined || Math.abs(value - fallback) < 1e-9;
+}
+/**
+ * A slider row that can be UNSET.
+ *
+ * The readout prints `—` rather than the fallback when the key is absent: an
+ * unset temperature parked the handle at 0 and printed "0", which reads as
+ * "pinned to deterministic" when it actually means "inherits the default".
+ */
+function SliderRow({ label, help, value, fallback, min, max, step, onChange, }) {
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    return (_jsx(SettingRow, { label: label, help: isSliderAtDefault(value, fallback) ? (help) : (_jsxs(_Fragment, { children: [help, " \u00B7", ' ', _jsx(InlineAction, { onClick: () => onChange(undefined), children: tI18nComplete.raw('textdaee7606b339') })] })), children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Slider, { value: [value ?? fallback], min: min, max: max, step: step, className: "min-w-0 flex-1", thumbLabel: label, formatValue: (v) => v.toFixed(2), onValueChange: ([v]) => onChange(v) }), _jsx("span", { className: "text-muted-foreground w-8 shrink-0 text-right text-xs tabular-nums", children: value === undefined ? '—' : value })] }) }));
+}
+/** First non-empty line of the prompt, for the collapsed summary. */
+function firstLine(prompt) {
+    return (prompt
+        .split('\n')
+        .find((line) => line.trim().length > 0)
+        ?.trim() ?? 'Set');
+}

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

@@ -0,0 +1,64 @@
+/**
+ * Field-space catalogs for the agent editor — pulled out of agent-editor.tsx
+ * so the modal file stays focused on composition. Pure data, no React.
+ */
+import type { FeatureFlagKey } from '@kortix/sdk';
+export declare const AGENT_MODES: readonly ["primary", "subagent", "all"];
+/** Display names — the raw values are lowercase manifest keys, and a Select
+ *  trigger renders the value verbatim (no `capitalize` reaches it). */
+export declare const AGENT_MODE_LABEL: Record<(typeof AGENT_MODES)[number], string>;
+export declare const AGENT_MODE_HELP: Record<(typeof AGENT_MODES)[number], string>;
+export declare const THEME_COLORS: readonly ["primary", "secondary", "accent", "success", "warning", "error", "info"];
+/**
+ * What each theme colour looks like, for the swatch picker. The manifest stores
+ * the NAME (`success`), not a hex — the runtime resolves it against the active
+ * theme. These classes are a preview of that resolution, mapped onto the
+ * `kortix-*` brand tokens so the picker shows colour instead of seven words.
+ */
+export declare const THEME_COLOR_SWATCH: Record<(typeof THEME_COLORS)[number], string>;
+export declare const PERMISSION_ACTIONS: readonly ["allow", "ask", "deny"];
+/** Display names — see AGENT_MODE_LABEL. */
+export declare const PERMISSION_ACTION_LABEL: Record<(typeof PERMISSION_ACTIONS)[number], string>;
+export declare const PERMISSION_RULE_KEYS: readonly ["read", "edit", "glob", "grep", "list", "bash", "task", "external_directory", "lsp"];
+export declare const PERMISSION_ACTION_ONLY_KEYS: readonly ["todowrite", "question", "webfetch", "websearch", "doom_loop"];
+export declare const PERMISSION_RULE_GROUPS: {
+    label: string;
+    keys: (typeof PERMISSION_RULE_KEYS)[number][];
+}[];
+/** The heading over the keys that take a bare action and never a path rule. */
+export declare const PERMISSION_ACTION_ONLY_GROUP_LABEL = "Everything else";
+/**
+ * What each permission key lets the agent DO, in plain words.
+ *
+ * The raw key (`external_directory`, `lsp`, `doom_loop`) is a manifest token
+ * and stays visible in mono beside this — people grep for it and hand-edit the
+ * YAML. But a settings row whose only text is `lsp` tells a reader nothing, so
+ * the sentence leads and the token follows.
+ */
+export declare const PERMISSION_KEY_LABEL: Record<string, string>;
+export declare const PERMISSION_KEY_HELP: Record<string, string>;
+/**
+ * The grantable `kortix_permissions` catalog, grouped for the picker. MUST stay
+ * in sync with `GRANTABLE_KORTIX_PERMISSIONS` in @kortix/manifest-schema (=
+ * PROJECT_ACTIONS in apps/api iam/actions.ts — every project-scoped action,
+ * including the manager-tier leaves project.delete / project.members.manage /
+ * project.gateway.keys.manage, still reachable via a project's `manager`
+ * role). Mirrored here (not imported) because the manifest-schema/api
+ * packages aren't in the web bundle. (The leaf catalog itself is
+ * `PROJECT_ACTIONS` in `@kortix/sdk`.) Kept in sync by
+ * agent-editor.test.tsx's drift guard against the real
+ * `GRANTABLE_KORTIX_PERMISSIONS` constant.
+ *
+ * Account-scoped admin actions (member.*, billing.*, token.*, project.create,
+ * …) are ALSO absent — but that omission is a UX curation choice, not the
+ * security boundary: every agent-session token is project-scoped, and
+ * apps/api's IAM v2 engine refuses any account-scope action for a
+ * project-bound token before an agent's grant is even consulted (see
+ * `iam/engine-v2.ts`'s `computeTokenScope`).
+ */
+/** `featureFlag`: the group is offered only while that project flag is on. */
+export declare const KORTIX_PERMISSIONS_CATALOG: {
+    group: string;
+    actions: string[];
+    featureFlag?: FeatureFlagKey;
+}[];

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

@@ -0,0 +1,234 @@
+/**
+ * Field-space catalogs for the agent editor — pulled out of agent-editor.tsx
+ * so the modal file stays focused on composition. Pure data, no React.
+ */
+export const AGENT_MODES = ['primary', 'subagent', 'all'];
+/** Display names — the raw values are lowercase manifest keys, and a Select
+ *  trigger renders the value verbatim (no `capitalize` reaches it). */
+export const AGENT_MODE_LABEL = {
+    primary: 'Primary',
+    subagent: 'Subagent',
+    all: 'All',
+};
+export const AGENT_MODE_HELP = {
+    primary: 'People pick it to start a session. Other agents cannot call it.',
+    subagent: 'Other agents call it. It never shows in the session picker.',
+    all: 'People can start it, and other agents can call it.',
+};
+export const THEME_COLORS = [
+    'primary',
+    'secondary',
+    'accent',
+    'success',
+    'warning',
+    'error',
+    'info',
+];
+/**
+ * What each theme colour looks like, for the swatch picker. The manifest stores
+ * the NAME (`success`), not a hex — the runtime resolves it against the active
+ * theme. These classes are a preview of that resolution, mapped onto the
+ * `kortix-*` brand tokens so the picker shows colour instead of seven words.
+ */
+export const THEME_COLOR_SWATCH = {
+    primary: 'bg-foreground',
+    secondary: 'bg-muted-foreground',
+    accent: 'bg-kortix-purple',
+    success: 'bg-kortix-green',
+    warning: 'bg-kortix-orange',
+    error: 'bg-kortix-red',
+    info: 'bg-kortix-blue',
+};
+export const PERMISSION_ACTIONS = ['allow', 'ask', 'deny'];
+/** Display names — see AGENT_MODE_LABEL. */
+export const PERMISSION_ACTION_LABEL = {
+    allow: 'Allow',
+    ask: 'Ask',
+    deny: 'Deny',
+};
+// Permission keys that accept the full rule form (bare action OR glob-map).
+// `skill` is intentionally EXCLUDED — the Skills governance control below owns
+// `permission.skill` (the compiler maps `skills:` onto it), so exposing it here
+// too would give two controls fighting over one key.
+export const PERMISSION_RULE_KEYS = [
+    'read',
+    'edit',
+    'glob',
+    'grep',
+    'list',
+    'bash',
+    'task',
+    'external_directory',
+    'lsp',
+];
+// Permission keys that only ever take a bare action (no glob-map form upstream).
+export const PERMISSION_ACTION_ONLY_KEYS = [
+    'todowrite',
+    'question',
+    'webfetch',
+    'websearch',
+    'doom_loop',
+];
+export const PERMISSION_RULE_GROUPS = [
+    { label: 'Files and search', keys: ['read', 'edit', 'glob', 'grep', 'list'] },
+    { label: 'Commands and tools', keys: ['bash', 'task', 'external_directory', 'lsp'] },
+];
+/** The heading over the keys that take a bare action and never a path rule. */
+export const PERMISSION_ACTION_ONLY_GROUP_LABEL = 'Everything else';
+/**
+ * What each permission key lets the agent DO, in plain words.
+ *
+ * The raw key (`external_directory`, `lsp`, `doom_loop`) is a manifest token
+ * and stays visible in mono beside this — people grep for it and hand-edit the
+ * YAML. But a settings row whose only text is `lsp` tells a reader nothing, so
+ * the sentence leads and the token follows.
+ */
+export const PERMISSION_KEY_LABEL = {
+    read: 'Read files',
+    edit: 'Create and change files',
+    glob: 'Find files by name',
+    grep: 'Search inside files',
+    list: 'List folders',
+    bash: 'Run shell commands',
+    task: 'Hand work to a subagent',
+    external_directory: 'Reach outside the project',
+    lsp: 'Use the language server',
+    todowrite: 'Keep a todo list',
+    question: 'Ask you a question mid-run',
+    webfetch: 'Fetch a URL',
+    websearch: 'Search the web',
+    doom_loop: 'Break out of a failure loop',
+};
+export const PERMISSION_KEY_HELP = {
+    read: 'Read file contents.',
+    edit: 'Create or modify files.',
+    glob: 'Find files by name pattern.',
+    grep: 'Search file contents by pattern.',
+    list: 'List directory contents.',
+    bash: 'Run shell commands.',
+    task: 'Launch a subagent to run a task.',
+    external_directory: 'Access paths outside this project workspace.',
+    lsp: 'Use language-server tooling — go-to-definition, diagnostics.',
+    todowrite: "Maintain the session's todo list.",
+    question: 'Ask the user a clarifying question mid-run.',
+    webfetch: "Fetch a URL's contents.",
+    websearch: 'Run a web search.',
+    doom_loop: 'Auto-break a detected repeat-failure loop.',
+};
+/**
+ * The grantable `kortix_permissions` catalog, grouped for the picker. MUST stay
+ * in sync with `GRANTABLE_KORTIX_PERMISSIONS` in @kortix/manifest-schema (=
+ * PROJECT_ACTIONS in apps/api iam/actions.ts — every project-scoped action,
+ * including the manager-tier leaves project.delete / project.members.manage /
+ * project.gateway.keys.manage, still reachable via a project's `manager`
+ * role). Mirrored here (not imported) because the manifest-schema/api
+ * packages aren't in the web bundle. (The leaf catalog itself is
+ * `PROJECT_ACTIONS` in `@kortix/sdk`.) Kept in sync by
+ * agent-editor.test.tsx's drift guard against the real
+ * `GRANTABLE_KORTIX_PERMISSIONS` constant.
+ *
+ * Account-scoped admin actions (member.*, billing.*, token.*, project.create,
+ * …) are ALSO absent — but that omission is a UX curation choice, not the
+ * security boundary: every agent-session token is project-scoped, and
+ * apps/api's IAM v2 engine refuses any account-scope action for a
+ * project-bound token before an agent's grant is even consulted (see
+ * `iam/engine-v2.ts`'s `computeTokenScope`).
+ */
+/** `featureFlag`: the group is offered only while that project flag is on. */
+export const KORTIX_PERMISSIONS_CATALOG = [
+    { group: 'Project', actions: ['project.read', 'project.write', 'project.delete'] },
+    {
+        group: 'Sessions',
+        actions: [
+            'project.session.read',
+            'project.session.start',
+            'project.session.stop',
+            'project.session.bindings.write',
+        ],
+    },
+    { group: 'Members', actions: ['project.members.read', 'project.members.manage'] },
+    {
+        group: 'Triggers',
+        actions: [
+            'project.trigger.read',
+            'project.trigger.create',
+            'project.trigger.update',
+            'project.trigger.delete',
+            'project.trigger.fire',
+        ],
+    },
+    {
+        group: 'LLM gateway',
+        actions: [
+            'project.gateway.logs.read',
+            'project.gateway.spend.read',
+            'project.gateway.budget.set',
+            'project.gateway.keys.manage',
+        ],
+    },
+    { group: 'Usage', actions: ['project.usage.read'] },
+    {
+        group: 'Configuration',
+        actions: [
+            'project.agent.read',
+            'project.agent.write',
+            'project.skill.read',
+            'project.skill.write',
+            'project.command.read',
+            'project.command.write',
+            'project.file.read',
+            'project.file.write',
+            'project.settings.write',
+            'project.sandbox.write',
+            'project.model.read',
+            'project.model.write',
+        ],
+    },
+    // `project.cr.open` / `project.cr.merge` are deliberately NOT offered here.
+    // They still validate and still resolve — `canonicalizeGrantActions` rewrites
+    // them onto the two leaves below — but they are the pre-cutover spelling of
+    // the SAME capability (spec §2.4), and offering both let the editor grant one
+    // thing under two names in two different groups.
+    //
+    // `ref.any` / `ref.delete` widen a session's git authority beyond its own
+    // branch. A session is scoped to its own branch structurally, so these are the
+    // only way to say "this agent may touch other refs" — and saying it in
+    // kortix.yaml is the point: it is reviewed and merged, not a silent default.
+    {
+        group: 'Git',
+        actions: [
+            'project.gitops.read',
+            'project.gitops.push',
+            'project.gitops.merge',
+            'project.gitops.ref.any',
+            'project.gitops.ref.delete',
+        ],
+    },
+    { group: 'Secrets', actions: ['project.secret.read', 'project.secret.write'] },
+    // Minting a project credential (a project CLI token, or a project-scoped PAT).
+    // Its own leaf because a credential OUTLIVES the request that minted it; the
+    // two credential routes refuse an agent-session token outright, so granting it
+    // here is a manifest statement, not an escape hatch.
+    { group: 'Credentials', actions: ['project.credentials.issue'] },
+    {
+        group: 'Connectors',
+        actions: [
+            'project.connector.read',
+            'project.connector.write',
+            'project.connector.connections.manage',
+        ],
+    },
+    {
+        group: 'Apps',
+        actions: ['project.app.read', 'project.app.write', 'project.app.deploy', 'project.app.admin'],
+    },
+    {
+        group: 'Review',
+        actions: ['project.review.read', 'project.review.submit', 'project.review.act'],
+    },
+    {
+        group: 'Rooms',
+        actions: ['project.room.read', 'project.room.write'],
+        featureFlag: 'agent_rooms',
+    },
+];

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

@@ -0,0 +1,73 @@
+/**
+ * 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 { type ReactNode } from 'react';
+/**
+ * How a section draws itself. `flat` is the original: a heading over
+ * hairline-divided rows, for a section sitting on a `bg-popover` pane where a
+ * second tinted panel would add a border and no contrast. `panel` is the
+ * agent page's configuration pane (Marko, 2026-09-03: "visually show the
+ * member list separate from Access"): each section is its own
+ * `bg-popover rounded-md border` card with a divided header, so two sections
+ * on one tab read as two things, not one list with two headings.
+ *
+ * A context, not a prop, because the sections are composed by a shell that
+ * does not own their props — the shell sets the style once for everything
+ * under it.
+ */
+export type EditorSectionStyle = 'flat' | 'panel';
+export declare function EditorSectionStyleProvider({ value, children, }: {
+    value: EditorSectionStyle;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * One titled group of settings. Rows inside are separated by hairlines rather
+ * than boxed individually. See `EditorSectionStyle` for the two dialects.
+ */
+export declare function EditorSection({ title, description, trailing, 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. */
+    trailing?: ReactNode;
+    children: ReactNode;
+}): import("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
+ * pane never squeezes the control down to nothing. The control is `w-52`
+ * (208px): the row lives in the agent page's 28rem column, and at the old
+ * `w-60` the label beside it was 100px wide and wrapped every help line
+ * three deep.
+ */
+export declare function SettingRow({ label, help, children, }: {
+    label: string;
+    help?: ReactNode;
+    children: ReactNode;
+}): import("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.
+ */
+export declare function SettingBlock({ label, help, children, }: {
+    label: string;
+    help?: ReactNode;
+    children: ReactNode;
+}): import("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
+ * longer.
+ */
+export declare function InlineAction({ onClick, children }: {
+    onClick: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,66 @@
+'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 { 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.
+ */
+export function EditorSection({ title, description, trailing, 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: "space-y-2", children: [heading, _jsx("div", { className: "divide-border/60 divide-y", children: children })] }));
+}
+/**
+ * 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
+ * pane never squeezes the control down to nothing. The control is `w-52`
+ * (208px): the row lives in the agent page's 28rem column, and at the old
+ * `w-60` the label beside it was 100px wide and wrapped every help line
+ * 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 })] }));
+}
+/**
+ * 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] }));
+}
+/**
+ * The label pair. A plain `<span>`, not `<Label>`: none of these controls take
+ * an id we could point `htmlFor` at, and a `<label>` that references nothing
+ * is a dangling a11y reference plus a cursor that lies. Each control carries
+ * its own `aria-label` instead.
+ */
+function SettingLabel({ label, help }) {
+    return (_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("span", { className: "text-foreground block text-sm font-medium", children: label }), help ? (_jsx("p", { className: "text-muted-foreground text-xs leading-relaxed text-pretty", children: help })) : null] }));
+}
+/**
+ * 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
+ * longer.
+ */
+export function InlineAction({ onClick, children }) {
+    return (_jsx("button", { type: "button", onClick: onClick, className: "text-foreground underline decoration-dotted underline-offset-2 transition-opacity hover:opacity-70", children: children }));
+}