@kortix/ui 0.14.12 → 0.14.14

package/dist/customize/agents/agent-approval-rules.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import type { AgentDraft } from '../sections/view/agent-editor.js';
+export declare function AgentApprovalRules({ projectId, editor, rules, }: {
+    projectId: string;
+    editor: AgentDraft;
+    /** The rules editor Edit rules unfolds. */
+    rules: ReactNode;
+}): import("react").JSX.Element;

package/dist/customize/agents/agent-approval-rules.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { capabilityGranted } from '@kortix/sdk';
+import { ShieldIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { useProjectCapabilities } from '../../internal/hooks/projects/use-agent-config.js';
+import { Button } from '../../primitives/button.js';
+import { deniedPatterns, toolRule } from '../shared/tool-rules.js';
+export function AgentApprovalRules({ projectId, editor, rules, }) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    const [open, setOpen] = useState(false);
+    const tools = useProjectCapabilities(projectId).data?.tools ?? [];
+    const permission = editor.oc.permission;
+    const asking = tools.filter((tool) => capabilityGranted(editor.draft.tools, tool.id, 'all') && toolRule(permission, tool.id) === 'ask').length;
+    const denied = deniedPatterns(permission);
+    const sentence = asking === 0 && denied.length === 0
+        ? t('approvalNone')
+        : [
+            asking > 0 ? t('approvalAsk', { count: asking }) : null,
+            denied.length > 0 ? t('approvalDenied', { list: denied.join(', ') }) : null,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "bg-popover flex items-center gap-3 rounded-lg px-4 py-3", children: [_jsx(ShieldIcon, { className: "text-muted-foreground size-4 shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: t('approvalTitle') }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: sentence })] }), _jsx(Button, { variant: "secondary", size: "sm", "aria-expanded": open, onClick: () => setOpen((v) => !v), children: open ? t('hideRules') : t('editRules') })] }), open ? rules : null] }));
+}

package/dist/customize/agents/agent-authority-card.js

@@ -5,6 +5,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  *   Kortix permissions (kortix.yaml) ∩ ceiling role (IAM) − human-only
  *
+ * The UI says "Granted in kortix.yaml" and "Maximum allowed". The fixed
+ * human-only set is named in the effective-permissions help, not as a row.
+ *
  * This is how Kortix works, not a mode the project chose: there is no switch,
  * so the card states it flatly.
  *
@@ -38,7 +41,7 @@ export function AgentAuthorityCard({ projectId, agentName, grant, }) {
         : authority.declared.length === 0
             ? t('declaredNone')
             : t('declaredCount', { count: authority.declared.length });
-    return (_jsx("div", { "data-testid": "agent-authority", children: _jsxs(EditorSection, { title: t('title'), description: t('description'), children: [_jsx(SettingRow, { label: t('kortixPermissions'), help: t('kortixPermissionsHelp', { agent: agentName }), children: _jsx("span", { className: "text-foreground block text-sm sm:text-right", children: declaredLabel }) }), _jsx(SettingRow, { label: t('ceiling'), help: t('ceilingHelp'), children: _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:justify-end", "data-testid": "agent-ceiling", children: [ceiling.kind === 'loading' ? (_jsx(Skeleton, { className: "h-5 w-32" })) : ceiling.kind === 'hidden' ? (_jsx("span", { className: "text-muted-foreground text-sm", children: t('ceilingHidden') })) : ceiling.kind === 'default' ? (_jsx("span", { className: "text-foreground text-sm", children: t('ceilingDefault') })) : (ceiling.roleKeys.map((key) => (_jsx(Badge, { variant: "outline", size: "sm", className: "capitalize", children: key }, key)))), accountId && ceiling.kind !== 'hidden' && ceiling.kind !== 'loading' ? (_jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: _jsx(HubLink, { to: hubTarget(accountId, { tab: 'access-projects', project: projectId }), children: t('changeCeiling') }) })) : null] }) }), _jsx(SettingRow, { label: t('humanOnly'), help: t('humanOnlyHelp'), children: _jsx("span", { className: "text-foreground block text-sm sm:text-right", children: t('humanOnlyValue') }) }), _jsxs(SettingBlock, { label: t('effective'), help: t('effectiveHelp'), children: [_jsx("ul", { className: "flex flex-wrap gap-1", "data-testid": "agent-effective-permissions", children: authority.effective.map((permission) => (_jsx("li", { children: _jsx(Badge, { variant: "outline", size: "xs", className: "font-mono", children: permission }) }, permission))) }), authority.outsideCeiling.length > 0 ? (_jsx(DroppedList, { label: t('outsideCeiling'), permissions: authority.outsideCeiling, testId: "agent-outside-ceiling" })) : null, authority.humanOnly.length > 0 ? (_jsx(DroppedList, { label: t('droppedHumanOnly'), permissions: authority.humanOnly, testId: "agent-dropped-human-only" })) : null] })] }) }));
+    return (_jsx("div", { "data-testid": "agent-authority", children: _jsxs(EditorSection, { title: t('title'), description: t('description'), children: [_jsx(SettingRow, { label: t('kortixPermissions'), help: t('kortixPermissionsHelp', { agent: agentName }), children: _jsx("span", { className: "text-foreground block text-sm sm:text-right", children: declaredLabel }) }), _jsx(SettingRow, { label: t('ceiling'), help: t('ceilingHelp'), children: _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:justify-end", "data-testid": "agent-ceiling", children: [ceiling.kind === 'loading' ? (_jsx(Skeleton, { className: "h-5 w-32" })) : ceiling.kind === 'hidden' ? (_jsx("span", { className: "text-muted-foreground text-sm", children: t('ceilingHidden') })) : ceiling.kind === 'default' ? (_jsx("span", { className: "text-foreground text-sm", children: t('ceilingDefault') })) : (ceiling.roleKeys.map((key) => (_jsx(Badge, { variant: "outline", size: "sm", className: "capitalize", children: key }, key)))), accountId && ceiling.kind !== 'hidden' && ceiling.kind !== 'loading' ? (_jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: _jsx(HubLink, { to: hubTarget(accountId, { tab: 'access-projects', project: projectId }), children: t('changeCeiling') }) })) : null] }) }), _jsxs(SettingBlock, { label: t('effective'), help: t('effectiveHelp'), children: [_jsx("ul", { className: "flex flex-wrap gap-1", "data-testid": "agent-effective-permissions", children: authority.effective.map((permission) => (_jsx("li", { children: _jsx(Badge, { variant: "outline", size: "xs", className: "font-mono", children: permission }) }, permission))) }), authority.outsideCeiling.length > 0 ? (_jsx(DroppedList, { label: t('outsideCeiling'), permissions: authority.outsideCeiling, testId: "agent-outside-ceiling" })) : null, authority.humanOnly.length > 0 ? (_jsx(DroppedList, { label: t('droppedHumanOnly'), permissions: authority.humanOnly, testId: "agent-dropped-human-only" })) : null] })] }) }));
 }
 function DroppedList({ label, permissions, testId, }) {
     return (_jsxs("div", { className: "space-y-1.5", "data-testid": testId, children: [_jsx("p", { className: "text-muted-foreground text-xs", children: label }), _jsx("ul", { className: "flex flex-wrap gap-1", children: permissions.map((permission) => (_jsx("li", { children: _jsx(Badge, { variant: "muted", size: "xs", className: "font-mono line-through", children: permission }) }, permission))) })] }));

package/dist/customize/agents/agent-cover-card.d.ts

@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
  * every agent a face that is the same wherever the agent appears, so a long
  * list is scanned by shape and tone before names are read.
  */
-export declare function AgentCoverCard({ slug, href, onIntent, title, description, badges, meta, coverLabel, }: {
+export declare function AgentCoverCard({ slug, href, onIntent, title, description, badges, meta, coverLabel, action, }: {
     slug: string;
     href: string;
     onIntent?: () => void;
@@ -14,4 +14,7 @@ export declare function AgentCoverCard({ slug, href, onIntent, title, descriptio
     meta?: ReactNode;
     /** A short pill on the cover's top-left corner — "Default". */
     coverLabel?: string;
+    /** A control on the cover's top-right corner (the pin). A sibling of the
+     *  card's link, never inside it: a button may not sit in a link. */
+    action?: ReactNode;
 }): import("react").JSX.Element;

package/dist/customize/agents/agent-cover-card.js

@@ -8,6 +8,6 @@ import { cn } from '../../internal/lib/utils.js';
  * every agent a face that is the same wherever the agent appears, so a long
  * list is scanned by shape and tone before names are read.
  */
-export function AgentCoverCard({ slug, href, onIntent, title, description, badges, meta, coverLabel, }) {
-    return (_jsxs(Link, { href: href, prefetch: true, onPointerEnter: onIntent, onFocus: onIntent, style: agentMarkVars(slug), className: cn('group bg-card border-border/60 flex flex-col overflow-hidden rounded-md border text-left', 'hover:border-border transition-[border-color] duration-(--duration-normal) ease-out', 'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none'), children: [_jsxs("span", { className: "relative flex h-31 items-center justify-center bg-(--mark-tile)", children: [_jsx(AgentMarkGlyph, { slug: slug, size: 56 }), coverLabel ? (_jsx("span", { className: "bg-background/20 absolute top-2.5 left-2.5 rounded-sm px-2 py-0.5 text-xs font-medium text-(--mark-ink) backdrop-blur-sm", children: coverLabel })) : null] }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1 px-3.5 pt-3 pb-3.5", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: title }), badges] }), description ? (_jsx("span", { className: "text-muted-foreground line-clamp-2 text-xs text-pretty", children: description })) : null, meta ? (_jsx("span", { className: "text-muted-foreground mt-auto flex flex-wrap items-center gap-x-2 gap-y-0.5 pt-1.5 text-xs", children: meta })) : null] })] }));
+export function AgentCoverCard({ slug, href, onIntent, title, description, badges, meta, coverLabel, action, }) {
+    return (_jsxs("div", { className: "group/card relative flex", children: [_jsxs(Link, { href: href, prefetch: true, onPointerEnter: onIntent, onFocus: onIntent, style: agentMarkVars(slug), className: cn('group bg-card flex-1 border-border/60 flex flex-col overflow-hidden rounded-md border text-left', 'hover:border-border transition-[border-color] duration-(--duration-normal) ease-out', 'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none'), children: [_jsxs("span", { className: "relative flex h-31 items-center justify-center bg-(--mark-tile)", children: [_jsx(AgentMarkGlyph, { slug: slug, size: 56 }), coverLabel ? (_jsx("span", { className: "bg-background/20 absolute top-2.5 left-2.5 rounded-sm px-2 py-0.5 text-xs font-medium text-(--mark-ink) backdrop-blur-sm", children: coverLabel })) : null] }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1 px-3.5 pt-3 pb-3.5", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: title }), badges] }), description ? (_jsx("span", { className: "text-muted-foreground line-clamp-2 text-xs text-pretty", children: description })) : null, meta ? (_jsx("span", { className: "text-muted-foreground mt-auto flex flex-wrap items-center gap-x-2 gap-y-0.5 pt-1.5 text-xs", children: meta })) : null] })] }), action ? _jsx("span", { className: "absolute top-2 right-2", children: action }) : null] }));
 }

package/dist/customize/agents/agent-detail-aside.d.ts

@@ -11,8 +11,7 @@ export declare function AgentModel({ projectId, agentName }: {
     agentName: string;
 }): import("react").JSX.Element;
 /**
- * An agent's manifest allowlist (`agents:` in kortix.yaml, or the legacy
- * `[[agents]]` in kortix.toml) — which secrets it receives in $ENV, which
+ * An agent's manifest allowlist (`agents:` in kortix.yaml) — which secrets it receives in $ENV, which
  * connectors it may call, which Kortix permissions it has. Editors EDIT
  * secrets + connectors here (persisted straight to the manifest); everyone
  * else sees the read-only mirror. `kortix_permissions` stays read-only (a sharper

package/dist/customize/agents/agent-detail-aside.js

@@ -2,20 +2,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
 /**
- * The v1 fallback cards of the agent page, plus the scope-checklist helpers
- * the v2 editor shares with them.
+ * The read-only cards of the agent page, plus the scope-checklist helpers the
+ * editor shares with them.
  *
- * `AgentModel` and `AgentScope` are what a project on the legacy manifest
- * (kortix.toml, kortix_version 1) gets in place of the full editor — the
- * per-agent gateway model pin and the read-only/editable scope mirror. We
- * degrade, never blank the column. The v2 page
- * (`capabilities/agents/agent-page.tsx`) renders neither; its Model and Access
- * sections write the manifest block directly.
+ * `AgentModel` and `AgentScope` are what the read-only agent page shows in
+ * place of the full editor — the per-agent gateway model pin and the scope
+ * mirror. The editable page (`agent-page.tsx`) renders neither; its Model and
+ * Access sections write the manifest block directly.
  *
  * Historically this file was the whole right-hand aside of the agent detail
  * MODAL (assignments + configuration summary). The modal is gone — an agent
  * is a routed page now, Customize being agent-centric (Marko, 2026-09-01) —
- * and the assignments moved to `agent-people-section.tsx`.
+ * and the assignments moved to `agent-share-dialog.tsx`.
  */
 import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
@@ -66,8 +64,7 @@ export function AgentModel({ projectId, agentName }) {
                         } })] })) : (_jsx("span", { className: "text-foreground block truncate text-sm sm:text-right", children: nameOf(resolved) ?? tI18nComplete.raw('text1f0a5246c481') })) }) }));
 }
 /**
- * An agent's manifest allowlist (`agents:` in kortix.yaml, or the legacy
- * `[[agents]]` in kortix.toml) — which secrets it receives in $ENV, which
+ * An agent's manifest allowlist (`agents:` in kortix.yaml) — which secrets it receives in $ENV, which
  * connectors it may call, which Kortix permissions it has. Editors EDIT
  * secrets + connectors here (persisted straight to the manifest); everyone
  * else sees the read-only mirror. `kortix_permissions` stays read-only (a sharper

package/dist/customize/agents/agent-drives-section.d.ts

@@ -1,11 +1,27 @@
 /**
- * Which shared drives an agent gets, on the agent's page, beside Apps and
- * Secrets. Turning one on shares that drive's folder with the agent: every
- * session of the agent then mounts it under /drives. It writes the folder's
- * access at once, the same grant Drive → Share makes, so it does not wait for
- * the page's Save.
+ * Drives as mounts, ONE component in two modes (Marko, 2026-10-27: "folder
+ * mount based, exactly", "one component, agent-based or project-wide"):
+ *
+ *  - **Project** (Project admin → Drives): the folders EVERY new session
+ *    mounts, the ones shared with everyone in the project.
+ *  - **Agent** (Access → Drives): what a new session of this agent mounts,
+ *    its own folders plus the project's.
+ *
+ * Each row is one folder a new session mounts: where
+ * it appears (`/drives/...`), which Files folder it is, who it comes through
+ * (this agent, or everyone in the project) and whether it is read-only. The
+ * list is the server's own plan (`GET /drives/:id/agents/:name/mounts`, the
+ * functions a session boot runs), so it never guesses.
+ *
+ * Mounting, changing the level and unmounting share or unshare the folder
+ * with the agent at once, the same grant Files > Share makes; they do not
+ * wait for the page's Save. A folder that comes through the project is
+ * changed in Files, where its sharing lives.
  */
-export declare function AgentDrivesSection({ projectId, agentName }: {
+export declare function AgentDrivesSection({ projectId, agentName, repositoryAccess, }: {
     projectId: string;
-    agentName: string;
+    /** Absent: the project's mounts (Project admin). */
+    agentName?: string;
+    /** Whether sessions of the agent get the project repository at /workspace. Agent mode only. */
+    repositoryAccess?: boolean;
 }): import("react").JSX.Element;

package/dist/customize/agents/agent-drives-section.js

@@ -1,66 +1,132 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAgentMounts, useProjectMounts } from '@kortix/sdk/react';
+import { CaretRightIcon, FolderSimpleIcon, HardDrivesIcon, PlusIcon, XIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { useDriveFolder, useFolderAccess, useProjectDrive, useShareFolder, useUnshareFolder } from '../../files/drives/use-drives.js';
+import { useTranslations } from '../../i18n/index.js';
+import { agentDisplayName } from '../../internal/components/agent-mark.js';
 import { uiRoutes } from '../../lib/routes.js';
+import { Button } from '../../primitives/button.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import { EmptyArt } from '../../primitives/empty-art.js';
 import { EmptyState } from '../../primitives/empty-state.js';
 import { ErrorState } from '../../primitives/error-state.js';
-import { EditorList, EditorSection } from '../sections/view/agent-editor-primitives.js';
-import { Button } from '../../primitives/button.js';
+import Hint from '../../primitives/hint.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle } from '../../primitives/modal.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../primitives/select.js';
 import { Skeleton } from '../../primitives/skeleton.js';
-import { Switch } from '../../primitives/switch.js';
 import { errorToast } from '../../primitives/toast.js';
-import { useDriveFolder, useFolderAccess, useProjectDrive, useShareFolder, useUnshareFolder, } from '../../files/drives/use-drives.js';
-import { useTranslations } from '../../i18n/index.js';
-import { UiLink as Link } from '../../providers/ui-provider.js';
+import { ManageButton } from '../sections/view/agent-editor-access-fields.js';
+import { EditorList } from '../sections/view/agent-editor-primitives.js';
+import { CapabilityPageShell } from '../shared/capability-page-shell.js';
 /**
- * Which shared drives an agent gets, on the agent's page, beside Apps and
- * Secrets. Turning one on shares that drive's folder with the agent: every
- * session of the agent then mounts it under /drives. It writes the folder's
- * access at once, the same grant Drive → Share makes, so it does not wait for
- * the page's Save.
+ * Drives as mounts, ONE component in two modes (Marko, 2026-10-27: "folder
+ * mount based, exactly", "one component, agent-based or project-wide"):
+ *
+ *  - **Project** (Project admin → Drives): the folders EVERY new session
+ *    mounts, the ones shared with everyone in the project.
+ *  - **Agent** (Access → Drives): what a new session of this agent mounts,
+ *    its own folders plus the project's.
+ *
+ * Each row is one folder a new session mounts: where
+ * it appears (`/drives/...`), which Files folder it is, who it comes through
+ * (this agent, or everyone in the project) and whether it is read-only. The
+ * list is the server's own plan (`GET /drives/:id/agents/:name/mounts`, the
+ * functions a session boot runs), so it never guesses.
+ *
+ * Mounting, changing the level and unmounting share or unshare the folder
+ * with the agent at once, the same grant Files > Share makes; they do not
+ * wait for the page's Save. A folder that comes through the project is
+ * changed in Files, where its sharing lives.
  */
-export function AgentDrivesSection({ projectId, agentName }) {
-    const t = useTranslations('drives');
+export function AgentDrivesSection({ projectId, agentName, repositoryAccess = true, }) {
+    const t = useTranslations('agentMounts');
     const drive = useProjectDrive(projectId);
-    const driveHref = uiRoutes().drive(projectId);
-    const root = useDriveFolder(drive.data?.driveId ?? null, '/');
-    const drives = (root.data?.entries ?? []).filter((e) => e.type === 'dir' && !/^\/?Users(\/|$)/.test(e.path));
+    const driveId = drive.data?.driveId ?? null;
+    const agentPlan = useAgentMounts(agentName ? driveId : null, agentName ?? '');
+    const projectPlan = useProjectMounts(agentName ? null : driveId);
+    const plan = agentName ? agentPlan : projectPlan;
+    const showRepository = !!agentName && repositoryAccess;
+    const root = useFolderAccess(driveId, '/');
+    // Mounting needs `manage` on the folder; someone who holds it at the top holds it below.
+    const canMount = root.data?.access === 'manage';
+    const [picking, setPicking] = useState(false);
     let body;
-    if (drive.isLoading || root.isLoading) {
-        body = (_jsx(EditorList, { children: [0, 1].map((i) => (_jsx("li", { className: "flex items-center gap-3 px-4 py-3", children: _jsx(Skeleton, { className: "h-4 w-40 rounded-sm" }) }, i))) }));
+    if (drive.isLoading || plan.isLoading) {
+        body = (_jsx(EditorList, { children: [0, 1].map((i) => (_jsx("li", { className: "flex min-h-12 items-center gap-3 px-4 py-2", children: _jsx(Skeleton, { className: "h-4 w-48 rounded-sm" }) }, i))) }));
     }
-    else if (drive.isError || root.isError || !drive.data) {
-        body = (_jsx(ErrorState, { size: "sm", title: t('loadError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void root.refetch(), children: t('retry') }) }));
+    else if (drive.isError || plan.isError || !driveId || !plan.data) {
+        body = (_jsx(ErrorState, { size: "sm", title: t('loadError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void plan.refetch(), children: t('retry') }) }));
     }
-    else if (drives.length === 0) {
-        body = _jsx(EmptyState, { size: "sm", title: t('noCompanyDrives') });
+    else if (plan.data.mounts.length === 0 && !showRepository) {
+        body = (_jsx(EmptyState, { media: _jsx(EmptyArt, { icon: HardDrivesIcon }), title: t('emptyTitle'), description: t('emptyDescription') }));
     }
     else {
-        body = (_jsx(EditorList, { children: drives.map((entry) => (_jsx(AgentDriveRow, { driveId: drive.data.driveId, entry: entry, agentName: agentName }, entry.path))) }));
+        body = (_jsxs("div", { className: "space-y-3", children: [_jsxs(EditorList, { children: [showRepository ? (_jsxs("li", { className: "flex min-h-12 items-center gap-3 px-4 py-2", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("code", { className: "text-foreground block truncate font-mono text-sm", children: "/workspace" }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: t('repository') })] }), _jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: t('readWrite') })] })) : null, plan.data.mounts.map((mount) => (_jsx(MountRow, { driveId: driveId, agentName: agentName, mount: mount }, mount.path)))] }), plan.data.skipped.length > 0 ? (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('skipped', { slots: plan.data.slots, list: plan.data.skipped.join(', ') }) })) : null] }));
     }
-    return (_jsx(EditorSection, { title: t('customizeTitle'), description: t('accessAgentsCompanyHint'), trailing: driveHref ? (_jsx(Button, { asChild: true, variant: "secondary", size: "sm", children: _jsx(Link, { href: driveHref, children: t('driveLabel') }) })) : undefined, lead: true, bare: true, children: body }));
+    return (_jsxs(CapabilityPageShell, { title: t('title'), description: agentName ? t('lead') : t('projectLead'), action: _jsxs(_Fragment, { children: [canMount && driveId ? (_jsxs(Button, { variant: "secondary", size: "sm", className: "gap-1.5", onClick: () => setPicking(true), children: [_jsx(PlusIcon, { className: "size-3.5 shrink-0" }), t('mount')] })) : null, _jsx(ManageButton, { href: (id) => uiRoutes().drive(id) })] }), children: [_jsx("div", { "data-testid": "drive-mounts", children: body }), driveId ? (_jsx(FolderPicker, { open: picking, onOpenChange: setPicking, driveId: driveId, agentName: agentName, mounted: new Set(plan.data?.mounts.map((m) => m.path)) })) : null] }));
 }
-function AgentDriveRow({ driveId, entry, agentName }) {
-    const t = useTranslations('drives');
-    const path = entry.path.startsWith('/') ? entry.path : `/${entry.path}`;
-    const access = useFolderAccess(driveId, path);
+/** The level a mount gives: read only, or read and write. `manage` mounts read and write. */
+const levelValue = (level) => (level === 'read' ? 'read' : 'write');
+/** Who a mount is shared with: the agent, or everyone in the project. */
+const principalOf = (agentName) => agentName ? { principalType: 'agent', principalId: agentName } : { principalType: 'project' };
+function MountRow({ driveId, agentName, mount }) {
+    const t = useTranslations('agentMounts');
     const share = useShareFolder();
     const unshare = useUnshareFolder();
-    const grants = access.data?.grants ?? [];
-    const own = grants.find((g) => !g.inherited && g.principalType === 'agent' && g.principalId === agentName);
-    // Everyone in the project, or a grant on a folder above, already reaches the agent.
-    const inherited = !own && grants.some((g) => g.principalType === 'project' || (g.principalType === 'agent' && g.principalId === agentName));
-    const canManage = access.data?.access === 'manage' && !!access.data?.grantable;
+    const access = useFolderAccess(driveId, mount.path, !!mount.grantId);
+    const canChange = !!mount.grantId && access.data?.access === 'manage';
+    const [confirming, setConfirming] = useState(false);
     const pending = share.isPending || unshare.isPending;
-    const toggle = async (on) => {
+    const setLevel = async (level) => {
+        try {
+            await share.mutateAsync({ driveId, path: mount.path, ...principalOf(agentName), level });
+        }
+        catch {
+            errorToast(t('changeFailed'));
+        }
+    };
+    const unmount = async () => {
+        try {
+            await unshare.mutateAsync({ driveId, grantId: mount.grantId });
+            setConfirming(false);
+        }
+        catch {
+            errorToast(t('changeFailed'));
+        }
+    };
+    const who = mount.via === 'agent' ? t('viaAgent') : t('viaProject');
+    return (_jsxs("li", { className: "flex min-h-12 items-center gap-3 px-4 py-2", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate font-mono text-sm", children: mount.mountPath }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: t('from', { path: mount.path, who }) })] }), canChange ? (_jsxs(_Fragment, { children: [_jsxs(Select, { value: levelValue(mount.level), onValueChange: (v) => void setLevel(v), disabled: pending, children: [_jsx(SelectTrigger, { size: "sm", className: "w-36 shrink-0", "aria-label": t('levelFor', { path: mount.path }), children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { align: "end", children: [_jsx(SelectItem, { value: "read", children: t('readOnly') }), _jsx(SelectItem, { value: "write", children: t('readWrite') })] })] }), _jsx(Hint, { label: t('unmountLabel', { path: mount.path }), children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": t('unmountLabel', { path: mount.path }), onClick: () => setConfirming(true), disabled: pending, children: _jsx(XIcon, { className: "size-4" }) }) }), _jsx(ConfirmDialog, { open: confirming, onOpenChange: setConfirming, title: t('unmountTitle', { path: mount.mountPath }), description: agentName ? t('unmountDescription', { agent: agentDisplayName(agentName) }) : t('unmountProjectDescription'), confirmLabel: t('unmount'), confirmVariant: "destructive", isPending: unshare.isPending, onConfirm: () => void unmount() })] })) : (_jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: mount.readOnly ? t('readOnly') : t('readWrite') }))] }));
+}
+/** Pick a folder in Files and the level, then mount it for the agent. */
+function FolderPicker({ open, onOpenChange, driveId, agentName, mounted, }) {
+    const t = useTranslations('agentMounts');
+    const [path, setPath] = useState('/');
+    const [level, setLevel] = useState('read');
+    const folder = useDriveFolder(open ? driveId : null, path);
+    const share = useShareFolder();
+    // Personal folders under /Users are their owners' to share, never a mount to pick here.
+    const dirs = (folder.data?.entries ?? []).filter((e) => e.type === 'dir' && !(path === '/' && /^\/?Users$/.test(e.path)));
+    const crumbs = path.split('/').filter(Boolean);
+    const close = (next) => {
+        if (share.isPending)
+            return;
+        if (!next)
+            setPath('/');
+        onOpenChange(next);
+    };
+    const mount = async () => {
         try {
-            if (on)
-                await share.mutateAsync({ driveId, path, principalType: 'agent', principalId: agentName, level: 'write' });
-            else if (own)
-                await unshare.mutateAsync({ driveId, grantId: own.grantId });
+            await share.mutateAsync({ driveId, path, ...principalOf(agentName), level });
+            close(false);
         }
         catch {
-            errorToast(t('shareFailed'));
+            errorToast(t('changeFailed'));
         }
     };
-    return (_jsxs("li", { className: "flex items-center gap-3 px-4 py-2.5", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground truncate text-sm font-medium", children: entry.name }), _jsx("p", { className: "text-muted-foreground truncate font-mono text-xs", children: inherited ? t('everyoneInProject') : `/drives${path}` })] }), access.isLoading ? (_jsx(Skeleton, { className: "h-5 w-9 rounded-full" })) : (_jsx(Switch, { checked: !!own || inherited, disabled: !canManage || inherited || pending, onCheckedChange: (v) => void toggle(v), "aria-label": t('levelFor', { name: entry.name }) }))] }));
+    return (_jsx(Modal, { open: open, onOpenChange: close, children: _jsxs(ModalContent, { className: "lg:max-w-lg", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t('pickerTitle') }), _jsx(ModalDescription, { children: agentName ? t('pickerDescription', { agent: agentDisplayName(agentName) }) : t('pickerProjectDescription') })] }), _jsxs(ModalBody, { className: "space-y-3", children: [_jsxs("nav", { "aria-label": t('pickerPath'), className: "flex min-w-0 flex-wrap items-center gap-1 text-sm", children: [_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground rounded-sm", onClick: () => setPath('/'), children: t('pickerRoot') }), crumbs.map((name, i) => (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(CaretRightIcon, { "aria-hidden": true, className: "text-muted-foreground size-3" }), _jsx("button", { type: "button", className: i === crumbs.length - 1 ? 'text-foreground' : 'text-muted-foreground hover:text-foreground', onClick: () => setPath(`/${crumbs.slice(0, i + 1).join('/')}`), children: name })] }, i)))] }), _jsx(EditorList, { className: "max-h-72 overflow-y-auto", children: folder.isLoading ? (_jsx("li", { className: "flex min-h-10 items-center px-4 py-2", children: _jsx(Skeleton, { className: "h-4 w-40 rounded-sm" }) })) : dirs.length === 0 ? (_jsx("li", { className: "text-muted-foreground px-4 py-3 text-sm", children: t('pickerEmpty') })) : (dirs.map((entry) => {
+                                const next = entry.path.startsWith('/') ? entry.path : `/${entry.path}`;
+                                return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => setPath(next), className: "hover:bg-hover flex min-h-10 w-full items-center gap-2 px-4 py-2 text-left text-sm", children: [_jsx(FolderSimpleIcon, { "aria-hidden": true, className: "text-muted-foreground size-4 shrink-0" }), _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate", children: entry.name }), mounted.has(next) ? _jsx("span", { className: "text-muted-foreground text-xs", children: t('alreadyMounted') }) : null, _jsx(CaretRightIcon, { "aria-hidden": true, className: "text-muted-foreground size-3.5 shrink-0" })] }) }, next));
+                            })) })] }), _jsxs(ModalFooter, { className: "flex items-center justify-between gap-2", children: [_jsxs(Select, { value: level, onValueChange: (v) => setLevel(v), children: [_jsx(SelectTrigger, { size: "sm", className: "w-36 shrink-0", "aria-label": t('levelFor', { path }), children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "read", children: t('readOnly') }), _jsx(SelectItem, { value: "write", children: t('readWrite') })] })] }), _jsx(Button, { onClick: () => void mount(), disabled: path === '/' || share.isPending, "aria-busy": share.isPending, children: path === '/' ? t('pickerChoose') : t('pickerMount', { path }) })] })] }) }));
 }

package/dist/customize/agents/agent-instructions.d.ts

@@ -0,0 +1,11 @@
+export declare function wordCount(text: string): number;
+export declare function AgentInstructions({ value, onChange, onAskMyKortix, autoFocus, }: {
+    /** The instructions as Markdown; null while a reader's source file loads. */
+    value: string | null;
+    /** Writes the draft. Without it the document is read-only. */
+    onChange?: (next: string) => void;
+    /** Opens a configure thread that asks My Kortix to edit the instructions. */
+    onAskMyKortix?: () => void;
+    /** Open unfolded with the cursor in it (the old `?tab=instructions` link). */
+    autoFocus?: boolean;
+}): import("react").JSX.Element;

package/dist/customize/agents/agent-instructions.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The agent's instructions on the Overview, edited in place: the formatted
+ * document is the editor. A person clicks into it and types, like a doc; the
+ * Markdown file (`agents/<name>.md`) never shows its `**` or `##`. It is the
+ * same editor as doc artifacts (`markdown/doc-editor`), so Kortix has one
+ * document editor, and a file opened and saved unchanged stays byte for byte
+ * the same (`doc-round-trip.test.ts`).
+ *
+ * Edits go to the page's draft on every change; the save bar, ⌘S and the
+ * leave guard save them. A long document opens folded under a fade that runs
+ * to the block's bottom edge; Show more or a click into it unfolds it, for
+ * good. Escape leaves the editor.
+ */
+import { ARTIFACT_DOC_CSS } from '../../_vendor/kortix-shared.js';
+import { CaretDownIcon, PencilSimpleIcon } from '@phosphor-icons/react';
+import { EditorContent, useEditor } from '@tiptap/react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { cn } from '../../internal/lib/utils.js';
+import { docExtensions } from '../../markdown/doc-editor/doc-extensions.js';
+import { DocMenus } from '../../markdown/doc-editor/doc-menus.js';
+import { htmlToMarkdown, markdownToHtml } from '../../markdown/doc-editor/markdown.js';
+import { Button } from '../../primitives/button.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import Hint from '../../primitives/hint.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+export function wordCount(text) {
+    const trimmed = text.trim();
+    return trimmed ? trimmed.split(/\s+/).length : 0;
+}
+export function AgentInstructions({ value, onChange, onAskMyKortix, autoFocus = false, }) {
+    const t = useI18nTranslations('agentEditor.page');
+    const tTabs = useI18nTranslations('agentEditor.tabs');
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const editable = onChange !== undefined;
+    const [unfolded, setUnfolded] = useState(autoFocus);
+    // Taller than the fold: measured while folded, kept once unfolded.
+    const [long, setLong] = useState(false);
+    const frame = useRef(null);
+    // The Markdown the editor last wrote. A value that differs came from
+    // outside (Discard, a save's read-back) and reloads the document.
+    const written = useRef(value);
+    // The document as loaded: its source, and what the editor saves it as.
+    // Saving the loaded document gives back the source, byte for byte.
+    const loaded = useRef({ source: value ?? '', saved: null });
+    const latest = useRef(onChange);
+    useEffect(() => {
+        latest.current = onChange;
+    });
+    const editor = useEditor({
+        immediatelyRender: false,
+        editable,
+        autofocus: autoFocus ? 'start' : false,
+        extensions: docExtensions({ editable, placeholder: () => tTabs('instructionsPlaceholder') }),
+        content: value === null ? '' : markdownToHtml(value),
+        editorProps: {
+            attributes: { 'aria-label': t('instructions') },
+            handleKeyDown: (view, event) => {
+                if (event.key !== 'Escape')
+                    return false;
+                view.dom.blur();
+                return true;
+            },
+        },
+        onCreate: ({ editor: e }) => {
+            loaded.current = { source: value ?? '', saved: htmlToMarkdown(e.getHTML()) };
+        },
+        onFocus: () => setUnfolded(true),
+        onUpdate: ({ editor: e }) => {
+            // Only a person's edit writes the draft. The editor's own fix-ups on
+            // load (a trailing paragraph after a list) are not an edit.
+            if (!e.isFocused)
+                return;
+            const saved = htmlToMarkdown(e.getHTML());
+            const next = saved === loaded.current.saved ? loaded.current.source : saved;
+            written.current = next;
+            latest.current?.(next);
+        },
+    }, [editable, value === null]);
+    useEffect(() => {
+        if (!editor || value === null || value === written.current)
+            return;
+        written.current = value;
+        editor.commands.setContent(markdownToHtml(value), { emitUpdate: false });
+        loaded.current = { source: value, saved: htmlToMarkdown(editor.getHTML()) };
+    }, [editor, value]);
+    // Fold only a document taller than the fold.
+    useLayoutEffect(() => {
+        const el = frame.current;
+        if (!el || unfolded)
+            return;
+        const measure = () => setLong(el.scrollHeight > el.clientHeight + 1);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [editor, unfolded]);
+    const [confirmEdit, setConfirmEdit] = useState(false);
+    const words = wordCount(value ?? '');
+    const folded = long && !unfolded;
+    return (_jsxs("section", { className: "space-y-3", children: [_jsx("div", { className: "flex items-center justify-between gap-3", children: _jsxs("h2", { className: "text-muted-foreground text-sm font-medium", children: [t('instructions'), words > 0 ? (_jsx("span", { className: "text-muted-foreground ml-2 font-normal tabular-nums", children: t('words', { count: words }) })) : null] }) }), _jsxs("div", { className: cn(
+                // A filled block, no border. Folded, it has no bottom inset: the fade meets the edge.
+                'bg-popover relative overflow-hidden rounded-lg px-5 pt-4', 
+                // Room for the pencil in the top-right corner.
+                onAskMyKortix && 'pr-12', folded ? 'pb-0' : 'pb-4', editable && 'cursor-text'), children: [_jsx("style", { children: ARTIFACT_DOC_CSS }), onAskMyKortix ? (
+                    // The Description box's pencil, in the same corner. My Kortix edits the
+                    // instructions in a new session, so a click asks first.
+                    _jsx(Hint, { label: tTabs('askToEdit'), side: "top", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": tTabs('askToEdit'), onClick: () => setConfirmEdit(true), className: "text-muted-foreground hover:text-foreground absolute top-3 right-3 z-10", children: _jsx(PencilSimpleIcon, { className: "size-3.5" }) }) })) : null, _jsx("div", { ref: frame, className: cn('kx-doc kx-doc-inline', !unfolded && 'max-h-80 overflow-hidden'), children: value === null || !editor ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-5/6" })] })) : (_jsxs(_Fragment, { children: [editable ? _jsx(DocMenus, { editor: editor }) : null, _jsx(EditorContent, { editor: editor })] })) }), folded ? (_jsx("div", { className: "to-popover absolute inset-x-0 bottom-0 flex h-32 items-end justify-center bg-gradient-to-b from-transparent to-80% pb-4", children: _jsxs(Button, { variant: "secondary", size: "sm", onClick: () => setUnfolded(true), children: [tI18nComplete.raw('textf5c9bd131486'), _jsx(CaretDownIcon, { className: "size-3" })] }) })) : null] }), onAskMyKortix ? (_jsx(ConfirmDialog, { open: confirmEdit, onOpenChange: setConfirmEdit, title: tTabs('editInstructionsConfirmTitle'), description: tTabs('editInstructionsConfirmBody'), confirmLabel: tTabs('askToEdit'), onConfirm: () => {
+                    setConfirmEdit(false);
+                    onAskMyKortix();
+                } })) : null] }));
+}

package/dist/customize/agents/agent-model-view.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The agent page's Model view, in the Settings dialect the rest of the agent
+ * page uses (`EditorSection` in `panel` style): a title per group, no
+ * sentence under it, and the settings as rows in one bordered group. The
+ * model (the project default or a pinned one) and its thinking effort, then
+ * sampling and limits, then the provider options. Every control writes the
+ * page's draft through `setOc`, the same keys `ModelSection` writes.
+ */
+import { type RuntimeAgentConfig } from '@kortix/sdk';
+import { type ReactNode } from 'react';
+type SetRuntime = <K extends keyof RuntimeAgentConfig>(key: K, value: RuntimeAgentConfig[K]) => void;
+export declare function AgentModelView({ oc, setOc, footer }: {
+    oc: RuntimeAgentConfig;
+    setOc: SetRuntime;
+    footer?: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/customize/agents/agent-model-view.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The agent page's Model view, in the Settings dialect the rest of the agent
+ * page uses (`EditorSection` in `panel` style): a title per group, no
+ * sentence under it, and the settings as rows in one bordered group. The
+ * model (the project default or a pinned one) and its thinking effort, then
+ * sampling and limits, then the provider options. Every control writes the
+ * page's draft through `setOc`, the same keys `ModelSection` writes.
+ */
+import { modelRefToKey } from '@kortix/sdk';
+import { flattenModels, modelKeyToWire, modelProviderMode, useRuntimeProviders } from '@kortix/sdk/react';
+import { useState } from 'react';
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { Input } from '../../primitives/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../primitives/select.js';
+import { Slider } from '../../primitives/slider.js';
+import { Textarea } from '../../primitives/textarea.js';
+import { ModelSelector } from '../../session/models/model-selector.js';
+import { isSliderAtDefault } from '../sections/view/agent-editor-basics-fields.js';
+import { EditorSection, EditorSectionStyleProvider, SettingBlock, SettingRow, } from '../sections/view/agent-editor-primitives.js';
+/** The select's value for "no variant": the model decides. */
+const AUTO = '__auto__';
+/** A slider that can be unset: `—` and no Reset while it follows the default. */
+function SliderField({ label, help, value, fallback, min, max, step, onChange, }) {
+    const t = useI18nTranslations('agentEditor.modelView');
+    return (_jsx(SettingBlock, { label: label, help: help, children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Slider, { className: "flex-1", value: [value ?? fallback], min: min, max: max, step: step, thumbLabel: label, formatValue: (v) => v.toFixed(2), onValueChange: ([v]) => onChange(v) }), _jsxs("div", { className: "flex w-24 shrink-0 items-baseline justify-end gap-2.5 text-sm tabular-nums", children: [isSliderAtDefault(value, fallback) ? null : (_jsx("button", { type: "button", onClick: () => onChange(undefined), className: "text-muted-foreground hover:text-foreground transition-colors duration-fast", children: t('reset') })), _jsx("span", { className: value === undefined ? 'text-muted-foreground' : 'text-foreground', children: value === undefined ? '—' : value.toFixed(2) })] })] }) }));
+}
+/** `options` as JSON: the draft changes only when the text parses to an object. */
+function ProviderOptions({ value, onChange, }) {
+    const tTabs = useI18nTranslations('agentEditor.tabs');
+    const [text, setText] = useState(() => (value ? JSON.stringify(value, null, 2) : ''));
+    const [invalid, setInvalid] = useState(false);
+    const commit = (next) => {
+        setText(next);
+        if (!next.trim()) {
+            setInvalid(false);
+            return onChange(undefined);
+        }
+        try {
+            const parsed = JSON.parse(next);
+            const ok = !!parsed && typeof parsed === 'object' && !Array.isArray(parsed);
+            setInvalid(!ok);
+            if (ok)
+                onChange(parsed);
+        }
+        catch {
+            setInvalid(true);
+        }
+    };
+    return (
+    // The section title names it; the row holds the rule and the field.
+    _jsxs("div", { className: "space-y-2.5 px-4 py-3", children: [_jsx("p", { className: "text-muted-foreground text-xs leading-normal text-pretty", children: tTabs('providerOptionsHelp') }), _jsx(Textarea, { "aria-label": tTabs('providerOptions'), value: text, placeholder: JSON.stringify({ reasoning: 'high' }), className: "min-h-20 font-mono text-xs", "aria-invalid": invalid || undefined, onChange: (e) => commit(e.target.value) }), invalid ? _jsx("p", { className: "text-destructive text-xs", children: tTabs('providerOptionsInvalid') }) : null] }));
+}
+export function AgentModelView({ oc, setOc, footer }) {
+    const t = useI18nTranslations('agentEditor.modelView');
+    const tTabs = useI18nTranslations('agentEditor.tabs');
+    const { data: providers } = useRuntimeProviders();
+    const models = flattenModels(providers, { providerMode: modelProviderMode(providers) });
+    const pinned = oc.model ? modelRefToKey(oc.model) : null;
+    const pinnedModel = pinned
+        ? models.find((m) => m.providerID === pinned.providerID && m.modelID === pinned.modelID)
+        : undefined;
+    // The pinned model's published variants: the composer's thinking-effort choices.
+    const variants = pinnedModel?.variants ? Object.keys(pinnedModel.variants) : [];
+    return (_jsx(EditorSectionStyleProvider, { value: "panel", children: _jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-8", children: [_jsxs(EditorSection, { title: t('title'), lead: true, children: [_jsx(SettingRow, { label: pinned ? (pinnedModel?.modelName ?? pinned.modelID) : t('projectDefault'), help: pinned ? (_jsxs(_Fragment, { children: [t('pinned'), " \u00B7", ' ', _jsx("button", { type: "button", onClick: () => setOc('model', undefined), className: "text-foreground decoration-border hover:decoration-foreground underline underline-offset-4 transition-colors", children: t('followDefault') })] })) : (t('followsDefault')), children: _jsx("div", { className: "flex sm:justify-end", children: _jsx(ModelSelector, { models: models, providers: providers, selectedModel: pinned, unsetLabel: t('pinModel'), triggerVariant: "secondary", onSelect: (m) => setOc('model', m ? modelKeyToWire(m) : undefined) }) }) }), _jsx(SettingRow, { label: t('thinkingEffort'), help: variants.length > 0 ? (oc.variant ? t('effortSetHelp') : t('effortAutoHelp')) : t('effortNoVariantsHelp'), children: variants.length > 0 ? (_jsxs(Select, { value: oc.variant && variants.includes(oc.variant) ? oc.variant : AUTO, onValueChange: (v) => setOc('variant', v === AUTO ? undefined : v), children: [_jsx(SelectTrigger, { "aria-label": t('thinkingEffort'), size: "sm", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: AUTO, children: t('auto') }), variants.map((v) => (_jsx(SelectItem, { value: v, className: "capitalize", children: v }, v)))] })] })) : (_jsx(Input, { "aria-label": t('thinkingEffort'), value: oc.variant ?? '', placeholder: t('auto'), className: "h-8", onChange: (e) => setOc('variant', e.target.value || undefined) })) })] }), _jsxs(EditorSection, { title: t('samplingTitle'), children: [_jsx(SliderField, { label: t('temperature'), help: `${t('temperatureMin')} · ${t('temperatureMax')}`, value: oc.temperature, fallback: 0, min: 0, max: 2, step: 0.05, onChange: (v) => setOc('temperature', v) }), _jsx(SliderField, { label: t('topP'), help: t('topPHelp'), value: oc.top_p, fallback: 1, min: 0, max: 1, step: 0.01, onChange: (v) => setOc('top_p', v) }), _jsx(SettingRow, { label: t('stepLimit'), help: t('stepLimitHelp'), children: _jsxs("div", { className: "relative", children: [_jsx(Input, { "aria-label": t('stepLimit'), type: "number", min: 1, value: oc.steps ?? '', placeholder: t('noLimit'), className: "h-8 pr-12 tabular-nums", onChange: (e) => setOc('steps', e.target.value ? Math.max(1, Number(e.target.value)) : undefined) }), _jsx("span", { className: "text-muted-foreground pointer-events-none absolute inset-y-0 right-2.5 flex items-center text-xs", children: t('steps') })] }) })] }), _jsx(EditorSection, { title: tTabs('providerOptions'), children: _jsx(ProviderOptions, { value: oc.options, onChange: (next) => setOc('options', next) }) }), footer] }) }));
+}