@kortix/ui 0.14.12 → 0.14.14

package/dist/customize/sections/view/account-secret-resources-panel.js

@@ -3,9 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslations } from '../../../i18n/index.js';
-import { ApiError, createAccountSecretResource, deleteAccountSecretResource, listAccountMembers, setAccountSecretResourceAccess, rotateAccountSecretResource, pollProjectProviderOAuth, startProjectProviderOAuth, } from '@kortix/sdk';
+import { ApiError, createAccountSecretResource, deleteAccountSecretResource, listAccountMembers, setAccountSecretResourceAccess, rotateAccountSecretResource, pollProjectProviderOAuth, startProjectProviderOAuth, completeClaudeSubscriptionLogin, startClaudeSubscriptionLogin, } from '@kortix/sdk';
 import { refreshProjectProviderState, useAccountSecretResources } from '@kortix/sdk/react';
 import { ChatGptDeviceChallenge } from '../llm-provider/chatgpt-device-challenge.js';
+import { ClaudeCodeStep } from '../llm-provider/claude-code-step.js';
 import { Button } from '../../../primitives/button.js';
 import { ConfirmDialog } from '../../../primitives/confirm-dialog.js';
 import { Field, FieldLabel } from '../../../primitives/field.js';
@@ -112,11 +113,103 @@ function useChatGptAuthorization(projectId) {
     }, [projectId]);
     return { challenge, waiting, finishing, error, authorize, cancel, reset };
 }
+/**
+ * One Claude sign-in at a time, with the same contract as
+ * `useChatGptAuthorization`: `authorize` resolves once the account is stored,
+ * or with null. Between those, the server runs `claude setup-token`, claude.com
+ * opens in a tab, and the member pastes the code it shows (`submitCode`). The
+ * tab opens inside the click, so a popup blocker lets it through. A refused
+ * code ends the sign-in: the next try signs in again.
+ */
+function useClaudeAuthorization(projectId) {
+    const generation = useRef(0);
+    useEffect(() => () => { generation.current++; }, []);
+    const [challenge, setChallenge] = useState(null);
+    const [waiting, setWaiting] = useState(false);
+    const [finishing, setFinishing] = useState(false);
+    const [checking, setChecking] = useState(false);
+    const [error, setError] = useState(null);
+    const pending = useRef(null);
+    const settle = (value) => {
+        pending.current?.resolve(value);
+        pending.current = null;
+    };
+    const cancel = useCallback(() => { generation.current++; settle(null); }, []);
+    const reset = useCallback(() => {
+        generation.current++;
+        settle(null);
+        setWaiting(false);
+        setFinishing(false);
+        setChecking(false);
+        setChallenge(null);
+        setError(null);
+    }, []);
+    const authorize = useCallback(async (input, messages) => {
+        if (!projectId)
+            return null;
+        settle(null);
+        const current = ++generation.current;
+        setWaiting(true);
+        setFinishing(false);
+        setChallenge(null);
+        setError(null);
+        const popup = typeof window === 'undefined' ? null : window.open('about:blank', '_blank');
+        try {
+            const started = await startClaudeSubscriptionLogin(projectId, input);
+            if (current !== generation.current) {
+                popup?.close();
+                return null;
+            }
+            setChallenge({ url: started.authorize_url, code: null });
+            if (popup && !popup.closed)
+                popup.location.href = started.authorize_url;
+            return await new Promise((resolve) => {
+                pending.current = { flowId: started.flow_id, generation: current, failed: messages.failed, resolve };
+            });
+        }
+        catch (err) {
+            popup?.close();
+            if (current === generation.current) {
+                setError(err instanceof Error && err.message ? err.message : messages.failed);
+                setWaiting(false);
+                setChallenge(null);
+            }
+            return null;
+        }
+    }, [projectId]);
+    const submitCode = useCallback(async (code) => {
+        const flow = pending.current;
+        if (!projectId || !flow || !code.trim())
+            return;
+        setChecking(true);
+        setError(null);
+        try {
+            const connected = await completeClaudeSubscriptionLogin(projectId, { flowId: flow.flowId, code: code.trim() });
+            if (flow.generation !== generation.current)
+                return;
+            setChallenge(null);
+            setFinishing(true);
+            settle(connected.secret_id);
+        }
+        catch (err) {
+            if (flow.generation !== generation.current)
+                return;
+            setError(err instanceof Error && err.message ? err.message : flow.failed);
+            setWaiting(false);
+            setChallenge(null);
+            settle(null);
+        }
+        finally {
+            setChecking(false);
+        }
+    }, [projectId]);
+    return { challenge, waiting, finishing, checking, error, authorize, cancel, reset, submitCode };
+}
 /**
  * Provider keys live beside the provider they configure. The secret value stays
- * write-only. With `oauth`, the panel manages ChatGPT accounts: any project
- * member can connect their own subscription ("Only you"); sharing one with
- * others needs `project.secret.write`, the same rule the API enforces.
+ * write-only. With `oauth`, the panel manages ChatGPT or Claude accounts: any
+ * project member can connect their own subscription ("Only you"); sharing one
+ * with others needs `project.secret.write`, the same rule the API enforces.
  */
 export function AccountSecretResourcesPanel({ accountId, projectId, providerId, providerName, envVar, canWrite, oauth }) {
     const t = useTranslations('pooledSecrets');
@@ -144,15 +237,23 @@ export function AccountSecretResourcesPanel({ accountId, projectId, providerId,
     const [sharingMode, setSharingMode] = useState('project');
     const [selectedMembers, setSelectedMembers] = useState(NO_MEMBERS);
     const [deleting, setDeleting] = useState(null);
-    const authorization = useChatGptAuthorization(oauth?.projectId);
+    const claude = oauth?.kind === 'claude';
+    const chatGptAuthorization = useChatGptAuthorization(claude ? undefined : oauth?.projectId);
+    const claudeAuthorization = useClaudeAuthorization(claude ? oauth?.projectId : undefined);
+    const authorization = claude ? claudeAuthorization : chatGptAuthorization;
+    /** The ChatGPT string, or its Claude twin. */
+    const tAccount = (chatGptKey, claudeKey, values) => t(claude ? claudeKey : chatGptKey, values);
+    const signInStep = (challenge) => claude
+        ? _jsx(ClaudeCodeStep, { url: challenge?.url ?? null, checking: claudeAuthorization.checking, onSubmit: (code) => void claudeAuthorization.submitCode(code) })
+        : challenge && _jsx(ChatGptDeviceChallenge, { url: challenge.url, code: challenge.code });
     const members = useQuery({ queryKey: ['account-members', accountId], queryFn: () => listAccountMembers(accountId) });
     const actorRole = members.data?.find((member) => member.user_id === user?.id)?.account_role;
     const keys = (resources.data?.secrets ?? []).filter((secret) => secret.provider_id === providerId);
     const manageable = (secret) => secret.created_by === user?.id || actorRole === 'owner' || actorRole === 'admin';
-    const authMessages = { expired: t('oauthExpired'), failed: t('connectFailed') };
+    const authMessages = { expired: t('oauthExpired'), failed: tAccount('connectFailed', 'claudeConnectFailed') };
     const defaultLabel = () => {
         const name = labelOwnerName(user && { email: user.email, user_metadata: user.metadata });
-        return oauth && name ? t('defaultAccountLabel', { name }) : '';
+        return oauth && name ? tAccount('defaultAccountLabel', 'claudeDefaultAccountLabel', { name }) : '';
     };
     const closeCreate = () => {
         authorization.cancel();
@@ -173,7 +274,9 @@ export function AccountSecretResourcesPanel({ accountId, projectId, providerId,
         finally {
             refreshProjectProviderState(queryClient, projectId);
             void queryClient.invalidateQueries({ queryKey: ['session-provider-secret-pools'] });
-            oauth?.onConnected('codex');
+            if (claude)
+                void queryClient.invalidateQueries({ queryKey: ['claude-subscription', projectId] });
+            oauth?.onConnected(claude ? 'claude-agent' : 'codex');
         }
     };
     const connectOAuth = async () => {
@@ -187,7 +290,7 @@ export function AccountSecretResourcesPanel({ accountId, projectId, providerId,
             return;
         await finishConnection().catch(() => { });
         setCreating(false);
-        successToast(t('accountConnected'));
+        successToast(tAccount('accountConnected', 'claudeAccountConnected'));
     };
     const reconnectOAuth = async (secret) => {
         const credential = await authorization.authorize({ resourceId: secret.secret_id }, authMessages);
@@ -195,7 +298,7 @@ export function AccountSecretResourcesPanel({ accountId, projectId, providerId,
             return;
         await finishConnection().catch(() => { });
         setReconnecting(null);
-        successToast(t('accountReconnected'));
+        successToast(tAccount('accountReconnected', 'claudeAccountReconnected'));
     };
     const openReconnect = (secret) => {
         authorization.reset();
@@ -269,8 +372,8 @@ export function AccountSecretResourcesPanel({ accountId, projectId, providerId,
     const busy = save.isPending || authorization.waiting;
     // Only a successful read can say "no accounts"; loading and errors say so themselves.
     const empty = Boolean(oauth) && resources.isSuccess && keys.length === 0;
-    return (_jsxs("section", { className: "min-w-0 space-y-2", "aria-label": oauth ? t('chatGptAccounts') : t('providerKeysFor', { provider: providerName }), children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground text-xs", children: !resources.isSuccess ? null : empty ? t('noChatGptAccounts')
-                            : oauth ? t('accountCount', { count: keys.length }) : t('keyCount', { count: keys.length }) }), canWrite && _jsx(Button, { size: "sm", variant: empty ? 'default' : 'secondary', onClick: openCreate, children: empty ? t('connectChatGpt') : oauth ? t('addAccount') : t('addKey') })] }), resources.isLoading ? _jsx("div", { role: "status", "aria-label": t('loadingKeys'), children: _jsx(Loading, {}) }) : resources.isError ? (_jsx(ErrorState, { size: "sm", title: t('loadError'), action: _jsx(Button, { size: "sm", variant: "secondary", disabled: resources.isFetching, onClick: () => void resources.refetch(), children: common('retry') }) })) : keys.length ? (_jsx("ul", { className: "space-y-1", children: keys.map((secret) => {
+    return (_jsxs("section", { className: "min-w-0 space-y-2", "aria-label": oauth ? tAccount('chatGptAccounts', 'claudeAccounts') : t('providerKeysFor', { provider: providerName }), children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground text-xs", children: !resources.isSuccess ? null : empty ? tAccount('noChatGptAccounts', 'noClaudeAccounts')
+                            : oauth ? t('accountCount', { count: keys.length }) : t('keyCount', { count: keys.length }) }), canWrite && _jsx(Button, { size: "sm", variant: empty ? 'default' : 'secondary', onClick: openCreate, children: empty ? tAccount('connectChatGpt', 'connectClaude') : oauth ? t('addAccount') : t('addKey') })] }), resources.isLoading ? _jsx("div", { role: "status", "aria-label": t('loadingKeys'), children: _jsx(Loading, {}) }) : resources.isError ? (_jsx(ErrorState, { size: "sm", title: t('loadError'), action: _jsx(Button, { size: "sm", variant: "secondary", disabled: resources.isFetching, onClick: () => void resources.refetch(), children: common('retry') }) })) : keys.length ? (_jsx("ul", { className: "space-y-1", children: keys.map((secret) => {
                     const canManage = canWrite && manageable(secret);
                     const canReconnect = Boolean(oauth) && canWrite && secret.created_by === user?.id;
                     const canChangeAccess = canManage && canShare;
@@ -280,16 +383,16 @@ export function AccountSecretResourcesPanel({ accountId, projectId, providerId,
                     const undecryptable = secret.status === 'undecryptable';
                     return (_jsxs("li", { className: "border-border flex min-w-0 items-center gap-3 rounded-md border px-3 py-1.5", children: [_jsxs("span", { className: "text-foreground min-w-0 flex-1 text-sm font-medium", children: [_jsx("span", { className: "block break-words", children: secret.label }), _jsx("span", { className: "text-muted-foreground block text-xs font-normal", children: accessLine(secret) }), stale && (_jsx("span", { className: "text-muted-foreground block text-xs font-normal", children: t('needsReconnection') })), secret.cooldown_until && Date.parse(secret.cooldown_until) > resources.dataUpdatedAt && (_jsx("span", { className: "text-muted-foreground block text-xs font-normal", children: t('coolingDown') }))] }), undecryptable && _jsx(UndecryptableValue, { hint: tUndecryptable(oauth ? 'loginHint' : 'keyHint') }), (stale || undecryptable) && canReconnect && (_jsx(Button, { size: "sm", variant: "secondary", "aria-label": t('reconnectTitle', { label: secret.label }), onClick: () => openReconnect(secret), children: t('reconnectAccount') })), undecryptable && canManage && !oauth && (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => { setValue(''); save.reset(); setRotating(secret); }, children: tUndecryptable('reenterKey') })), (canManage || canReconnect) && _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": t('actionsFor', { label: secret.label }), children: _jsx(DotsThreeIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [canReconnect && _jsx(DropdownMenuItem, { onSelect: () => openReconnect(secret), children: t('reconnectAccount') }), canChangeAccess && _jsx(DropdownMenuItem, { onSelect: () => { changeGrant.reset(); setSharingMode(secret.access_mode); setSelectedMembers({ memberIds: secret.granted_user_ids, groupIds: [], inviteEmails: [] }); setSharing(secret); }, children: t('manageAccess') }), canManage && !oauth && _jsx(DropdownMenuItem, { onSelect: () => { setValue(''); save.reset(); setRotating(secret); }, children: t('rotateKey') }), canManage && _jsx(DropdownMenuItem, { onSelect: () => setDeleting(secret), children: oauth ? t('deleteAccount') : t('deleteKey') })] })] })] }, secret.secret_id));
                 }) })) : null, _jsx(Modal, { open: creating || rotating !== null, onOpenChange: (open) => { if (!open && !save.isPending && !authorization.finishing)
-                    closeCreate(); }, children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: rotating ? t('rotateLabel', { label: rotating.label }) : `${oauth ? t('addAccount') : t('addKey')} · ${providerName}` }), _jsx(ModalDescription, { children: t(rotating ? 'valueNeverShown' : oauth ? 'oauthCreationDescription' : 'creationDescription') })] }), _jsxs(ModalBody, { className: "max-h-[60vh] space-y-3 overflow-y-auto", children: [save.isError && _jsx("p", { role: "alert", className: "text-destructive text-sm", children: save.error instanceof Error ? save.error.message : t('saveError') }), oauth && authorization.error && _jsx("p", { role: "alert", className: "text-destructive text-sm", children: authorization.error }), !rotating && _jsx(_Fragment, { children: _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: `provider-key-label-${providerId}`, children: t('label') }), _jsx(Input, { id: `provider-key-label-${providerId}`, value: label, disabled: busy, onChange: (event) => setLabel(event.target.value), placeholder: oauth ? t('accountLabelPlaceholder') : t('primaryKey'), maxLength: 100 })] }) }), oauth ? authorization.finishing ? _jsx(ChatGptSignInFinishing, { label: t('oauthFinishing') })
-                                    : authorization.challenge && _jsx(ChatGptDeviceChallenge, { url: authorization.challenge.url, code: authorization.challenge.code }) :
-                                    _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: `provider-key-value-${providerId}`, children: t('apiKey') }), _jsx(Input, { id: `provider-key-value-${providerId}`, type: "password", value: value, disabled: save.isPending, onChange: (event) => setValue(event.target.value), autoComplete: "off" })] }), !rotating && !authorization.challenge && !authorization.finishing && _jsxs("div", { className: "space-y-2", children: [_jsx(FieldLabel, { children: t('whoCanUse') }), _jsxs(RadioGroup, { value: createMode, onValueChange: (next) => setCreateMode(next), className: "space-y-2", children: [_jsx(RadioGroupItem, { value: "private", id: `create-${providerId}-private`, label: t('onlyYou'), description: t('onlyYouDescription'), size: "lg", variant: "outline", disabled: busy }), _jsx(RadioGroupItem, { value: "project", id: `create-${providerId}-project`, label: t('everyoneInProject'), description: t('everyoneDescription'), size: "lg", variant: "outline", disabled: busy || !canShare }), _jsx(RadioGroupItem, { value: "members", id: `create-${providerId}-members`, label: t('specificMembers'), description: t('specificDescription'), size: "lg", variant: "outline", disabled: busy || !canShare })] }), !canShare && _jsx("p", { className: "text-muted-foreground text-xs", children: t('shareRequiresPermission') }), createMode === 'members' && _jsx(PrincipalPicker, { scope: { kind: 'project', projectId }, selection: "multi", kinds: ['member'], value: selectedMembers, onChange: setSelectedMembers, disabled: busy, autoFocus: false })] })] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "secondary", disabled: save.isPending || authorization.finishing, onClick: closeCreate, children: t('cancel') }), _jsx(Button, { disabled: oauth ? authorization.waiting || !label.trim() : save.isPending || !value.trim() || (!rotating && !label.trim()), onClick: () => oauth ? void connectOAuth() : save.mutate(), children: oauth ? authorization.finishing ? t('saving') : authorization.waiting ? t('oauthWaiting') : authorization.error ? common('retry') : t('connectAccount') : save.isPending ? t('saving') : t('saveKey') })] })] }) }), oauth && _jsx(Modal, { open: reconnecting !== null, onOpenChange: (open) => { if (!open && !authorization.finishing)
-                    closeReconnect(); }, children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t('reconnectTitle', { label: reconnectLabel }) }), _jsx(ModalDescription, { children: t('reconnectDescription') })] }), _jsxs(ModalBody, { className: "space-y-3", children: [authorization.error && _jsx("p", { role: "alert", className: "text-destructive text-sm", children: authorization.error }), authorization.finishing
+                    closeCreate(); }, children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: rotating ? t('rotateLabel', { label: rotating.label }) : `${oauth ? t('addAccount') : t('addKey')} · ${providerName}` }), _jsx(ModalDescription, { children: rotating ? t('valueNeverShown') : oauth ? tAccount('oauthCreationDescription', 'claudeOauthCreationDescription') : t('creationDescription') })] }), _jsxs(ModalBody, { className: "max-h-[60vh] space-y-3 overflow-y-auto", children: [save.isError && _jsx("p", { role: "alert", className: "text-destructive text-sm", children: save.error instanceof Error ? save.error.message : t('saveError') }), oauth && authorization.error && _jsx("p", { role: "alert", className: "text-destructive text-sm", children: authorization.error }), !rotating && _jsx(_Fragment, { children: _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: `provider-key-label-${providerId}`, children: t('label') }), _jsx(Input, { id: `provider-key-label-${providerId}`, value: label, disabled: busy, onChange: (event) => setLabel(event.target.value), placeholder: oauth ? tAccount('accountLabelPlaceholder', 'claudeAccountLabelPlaceholder') : t('primaryKey'), maxLength: 100 })] }) }), oauth ? authorization.finishing ? _jsx(ChatGptSignInFinishing, { label: t('oauthFinishing') })
+                                    : (authorization.challenge || (claude && authorization.waiting)) && signInStep(authorization.challenge) :
+                                    _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: `provider-key-value-${providerId}`, children: t('apiKey') }), _jsx(Input, { id: `provider-key-value-${providerId}`, type: "password", value: value, disabled: save.isPending, onChange: (event) => setValue(event.target.value), autoComplete: "off" })] }), !rotating && !authorization.challenge && !authorization.finishing && !(claude && authorization.waiting) && _jsxs("div", { className: "space-y-2", children: [_jsx(FieldLabel, { children: t('whoCanUse') }), _jsxs(RadioGroup, { value: createMode, onValueChange: (next) => setCreateMode(next), className: "space-y-2", children: [_jsx(RadioGroupItem, { value: "private", id: `create-${providerId}-private`, label: t('onlyYou'), description: t('onlyYouDescription'), size: "lg", variant: "outline", disabled: busy }), _jsx(RadioGroupItem, { value: "project", id: `create-${providerId}-project`, label: t('everyoneInProject'), description: t('everyoneDescription'), size: "lg", variant: "outline", disabled: busy || !canShare }), _jsx(RadioGroupItem, { value: "members", id: `create-${providerId}-members`, label: t('specificMembers'), description: t('specificDescription'), size: "lg", variant: "outline", disabled: busy || !canShare })] }), !canShare && _jsx("p", { className: "text-muted-foreground text-xs", children: t('shareRequiresPermission') }), createMode === 'members' && _jsx(PrincipalPicker, { scope: { kind: 'project', projectId }, selection: "multi", kinds: ['member'], value: selectedMembers, onChange: setSelectedMembers, disabled: busy, autoFocus: false })] })] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "secondary", disabled: save.isPending || authorization.finishing, onClick: closeCreate, children: t('cancel') }), _jsx(Button, { disabled: oauth ? authorization.waiting || !label.trim() : save.isPending || !value.trim() || (!rotating && !label.trim()), onClick: () => oauth ? void connectOAuth() : save.mutate(), children: oauth ? authorization.finishing ? t('saving') : authorization.waiting ? t('oauthWaiting') : authorization.error ? common('retry') : t('connectAccount') : save.isPending ? t('saving') : t('saveKey') })] })] }) }), oauth && _jsx(Modal, { open: reconnecting !== null, onOpenChange: (open) => { if (!open && !authorization.finishing)
+                    closeReconnect(); }, children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t('reconnectTitle', { label: reconnectLabel }) }), _jsx(ModalDescription, { children: tAccount('reconnectDescription', 'claudeReconnectDescription') })] }), _jsxs(ModalBody, { className: "space-y-3", children: [authorization.error && _jsx("p", { role: "alert", className: "text-destructive text-sm", children: authorization.error }), authorization.finishing
                                     ? _jsx(ChatGptSignInFinishing, { label: t('oauthFinishing') })
-                                    : authorization.challenge
-                                        ? _jsx(ChatGptDeviceChallenge, { url: authorization.challenge.url, code: authorization.challenge.code })
+                                    : authorization.challenge || (claude && authorization.waiting)
+                                        ? signInStep(authorization.challenge)
                                         : authorization.waiting && _jsx("div", { role: "status", "aria-label": t('oauthWaiting'), children: _jsx(Loading, {}) })] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "secondary", disabled: authorization.finishing, onClick: closeReconnect, children: t('cancel') }), _jsx(Button, { disabled: authorization.waiting || !reconnecting, onClick: () => { if (reconnecting)
                                         void reconnectOAuth(reconnecting); }, children: authorization.finishing ? t('saving') : authorization.waiting ? t('oauthWaiting') : authorization.error ? common('retry') : t('reconnectAccount') })] })] }) }), _jsx(Modal, { open: sharing !== null, onOpenChange: (open) => { if (!open && !changeGrant.isPending)
                     setSharing(null); }, children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t('accessTo', { label: sharing?.label ?? '' }) }), _jsx(ModalDescription, { children: t('accessDescription') })] }), _jsxs(ModalBody, { className: "max-h-[60vh] space-y-4 overflow-y-auto", children: [changeGrant.isError && _jsx("p", { role: "alert", className: "text-destructive text-sm", children: t('accessError') }), _jsxs(RadioGroup, { value: sharingMode, onValueChange: (next) => setSharingMode(next), className: "space-y-2", children: [_jsx(RadioGroupItem, { value: "project", id: `access-${providerId}-project`, label: t('everyoneInProject'), description: t('everyoneDescription'), size: "lg", variant: "outline", disabled: changeGrant.isPending }), _jsx(RadioGroupItem, { value: "members", id: `access-${providerId}-members`, label: t('specificMembers'), description: t('specificDescription'), size: "lg", variant: "outline", disabled: changeGrant.isPending })] }), sharingMode === 'members' && _jsx(Field, { className: "gap-1.5", children: _jsx(PrincipalPicker, { scope: { kind: 'project', projectId }, selection: "multi", kinds: ['member'], value: selectedMembers, onChange: setSelectedMembers, disabled: changeGrant.isPending, autoFocus: false }) })] }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { size: "sm", variant: "outline-ghost", disabled: changeGrant.isPending, onClick: () => setSharing(null), children: t('cancel') }), _jsx(Button, { size: "sm", disabled: changeGrant.isPending, onClick: () => changeGrant.mutate(), children: changeGrant.isPending ? t('saving') : t('done') })] })] }) }), _jsx(ConfirmDialog, { open: deleting !== null, onOpenChange: (open) => { if (!open)
-                    setDeleting(null); }, title: t(oauth ? 'deleteAccountConfirmTitle' : 'deleteConfirmTitle'), description: deleting ? t(oauth ? 'deleteAccountConfirmDescription' : 'deleteConfirmDescription', { label: deleting.label }) : '', confirmLabel: oauth ? t('deleteAccount') : t('deleteKey'), confirmVariant: "destructive", isPending: remove.isPending, onConfirm: () => { if (deleting)
+                    setDeleting(null); }, title: oauth ? tAccount('deleteAccountConfirmTitle', 'claudeDeleteAccountConfirmTitle') : t('deleteConfirmTitle'), description: deleting ? t(oauth ? 'deleteAccountConfirmDescription' : 'deleteConfirmDescription', { label: deleting.label }) : '', confirmLabel: oauth ? t('deleteAccount') : t('deleteKey'), confirmVariant: "destructive", isPending: remove.isPending, onConfirm: () => { if (deleting)
                     remove.mutate(deleting.secret_id); } })] }));
 }

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

@@ -33,7 +33,7 @@ export declare function SkillsSection({ draft, set, options }: GrantSectionProps
 export declare function ConnectorsSection({ draft, set, options }: GrantSectionProps): import("react").JSX.Element;
 export declare function SecretsSection({ draft, set, options }: GrantSectionProps): import("react").JSX.Element;
 /**
- * A kortix_version 3 grant over a project registry: the declared subagents
+ * A grant over a project registry: the declared subagents
  * this agent may start, the registered commands it may run, the registered
  * extensions a session of it loads. One card, the same All · Pick · None
  * control as Skills.

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

@@ -20,6 +20,7 @@ import { CaretDownIcon, CubeIcon } from '@phosphor-icons/react';
 import { UiLink as Link } from '../../../providers/ui-provider.js';
 import { EditorSection, SettingRow } from './agent-editor-primitives.js';
 import { pruneRequiredConnectors } from './connectors-personal.js';
+import { plainGrant } from '../../shared/agent-resource-scope.js';
 import { GrantSetField, KortixPermissionsField } from './grant-mode-field.js';
 /**
  * Marks one granted connector as required before session start.
@@ -60,7 +61,7 @@ export function ManageButton({ tab, href, }) {
  */
 export function SkillsSection({ draft, set, options }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
-    return (_jsx(EditorSection, { title: tI18nComplete.raw('text66d0f523a379'), description: tI18nComplete.raw('textb27e54100c96'), trailing: _jsx(ManageButton, { tab: "skills" }), lead: true, bare: true, children: _jsx(GrantSetField, { value: draft.skills, onChange: (v) => set('skills', v), options: options, emptyLabel: tI18nComplete.raw('text66e36043ff7c') }) }));
+    return (_jsx(EditorSection, { title: tI18nComplete.raw('text66d0f523a379'), description: tI18nComplete.raw('textb27e54100c96'), trailing: _jsx(ManageButton, { tab: "skills" }), lead: true, bare: true, children: _jsx(GrantSetField, { value: plainGrant(draft.skills), onChange: (v) => set('skills', v), options: options, emptyLabel: tI18nComplete.raw('text66e36043ff7c') }) }));
 }
 export function ConnectorsSection({ draft, set, options }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
@@ -83,14 +84,14 @@ export function SecretsSection({ draft, set, options }) {
     return (_jsx(EditorSection, { title: tI18nComplete.raw('textd8707d411d99'), description: tI18nComplete.raw('text7f619d9e30a8'), trailing: _jsx(ManageButton, { tab: "secrets" }), lead: true, bare: true, children: _jsx(GrantSetField, { value: draft.secrets, onChange: (v) => set('secrets', v), options: options, emptyLabel: tI18nComplete.raw('text82a37b8c2266') }) }));
 }
 /**
- * A kortix_version 3 grant over a project registry: the declared subagents
+ * A grant over a project registry: the declared subagents
  * this agent may start, the registered commands it may run, the registered
  * extensions a session of it loads. One card, the same All · Pick · None
  * control as Skills.
  */
 export function RegistryGrantSection({ grant, draft, set, options, }) {
     const t = useI18nTranslations('agents.grants');
-    return (_jsx(EditorSection, { title: t(`${grant}.title`), description: t(`${grant}.description`), lead: true, bare: true, children: _jsx(GrantSetField, { value: draft[grant], onChange: (v) => set(grant, v), options: options, emptyLabel: t(`${grant}.empty`) }) }));
+    return (_jsx(EditorSection, { title: t(`${grant}.title`), description: t(`${grant}.description`), lead: true, bare: true, children: _jsx(GrantSetField, { value: plainGrant(draft[grant]), onChange: (v) => set(grant, v), options: options, emptyLabel: t(`${grant}.empty`) }) }));
 }
 /** Kortix permissions (`kortix_permissions` in kortix.yaml): which project
  *  operations the agent may perform, through any surface. A block read from a
@@ -107,6 +108,7 @@ export function ProjectActionsSection({ draft, set }) {
 export function WorkspaceSection({ draft, set, sandboxTemplates, defaultSandboxSlug, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const tRepository = useI18nTranslations('repositoryAccess');
+    const tTabs = useI18nTranslations('agentEditor.tabs');
     const pinned = draft.sandbox ? sandboxTemplates.find((t) => t.slug === draft.sandbox) : undefined;
     const projectDefault = defaultSandboxSlug
         ? sandboxTemplates.find((t) => t.slug === defaultSandboxSlug)
@@ -125,5 +127,7 @@ export function WorkspaceSection({ draft, set, sandboxTemplates, defaultSandboxS
                         : tI18nComplete.raw('text64f405e80a8d'), children: _jsx(SandboxTemplateMenu, { items: sandboxTemplates, selectedSlug: draft.sandbox ?? null, resolvedSlug: defaultSandboxSlug, inherit: {
                         label: tI18nComplete.raw('texte8cb80e5c5cb'),
                         description: tI18nComplete.raw('textb23625948eee'),
-                    }, onSelect: (slug) => set('sandbox', slug ?? undefined), align: "end", trigger: _jsxs(Button, { type: "button", variant: "outline", size: "sm", "aria-label": tI18nComplete.raw('text9e471951a1b4'), className: "w-full justify-between gap-2 font-normal", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(PinnedIcon, { className: "text-muted-foreground size-3.5 shrink-0" }), _jsx("span", { className: cn('truncate', stalePin && 'text-kortix-orange font-mono'), children: pinned ? pinned.name : (stalePin ?? tI18nComplete.raw('texte8cb80e5c5cb')) })] }), _jsx(CaretDownIcon, { className: "text-muted-foreground size-3.5 shrink-0" })] }) }) }), _jsx(SettingRow, { label: tRepository('label'), help: tRepository(draft.repository_access === false ? 'disabled' : 'enabled'), children: _jsx(Switch, { "aria-label": tRepository('label'), checked: draft.repository_access ?? true, onCheckedChange: (enabled) => set('repository_access', enabled) }) })] }));
+                    }, onSelect: (slug) => set('sandbox', slug ?? undefined), align: "end", trigger: _jsxs(Button, { type: "button", variant: "outline", size: "sm", "aria-label": tI18nComplete.raw('text9e471951a1b4'), className: "w-full justify-between gap-2 font-normal", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(PinnedIcon, { className: "text-muted-foreground size-3.5 shrink-0" }), _jsx("span", { className: cn('truncate', stalePin && 'text-kortix-orange font-mono'), children: pinned ? pinned.name : (stalePin ?? tI18nComplete.raw('texte8cb80e5c5cb')) })] }), _jsx(CaretDownIcon, { className: "text-muted-foreground size-3.5 shrink-0" })] }) }) }), _jsx(SettingRow, { label: tRepository('label'), help: tRepository(draft.repository_access === false ? 'disabled' : 'enabled'), children: _jsx(Switch, { "aria-label": tRepository('label'), checked: draft.repository_access ?? true, onCheckedChange: (enabled) => set('repository_access', enabled) }) }), _jsx(SettingRow, { label: tTabs('networkEgress'), children: _jsx("span", { className: "text-muted-foreground text-sm text-pretty sm:text-right", children: draft.network_egress
+                        ? tTabs('networkEgressDeclared')
+                        : tTabs('networkEgressNone') }) })] }));
 }

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

@@ -10,12 +10,15 @@ export declare function BasicsSection({ draft, set, oc, setOc, showDescription,
      *  instructions — pass `false` there so the field is not offered twice. */
     showDescription?: boolean;
 }): import("react").JSX.Element;
-export declare function ModelSection({ oc, setOc, showPrompt, }: {
+export declare function ModelSection({ oc, setOc, showPrompt, lead, }: {
     oc: RuntimeAgentConfig;
     setOc: SetRuntime;
     /** The agent page gives the system prompt the whole left column — pass
      *  `false` there so the collapsed copy of it does not sit in this section. */
     showPrompt?: boolean;
+    /** `false` under a host that already titles the pane (the Models page's
+     *  "This agent" tab): the first section then takes a subsection header. */
+    lead?: boolean;
 }): import("react").JSX.Element;
 /**
  * Whether a slider row is showing its default.

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { useTranslations as useI18nTranslations } from '../../../i18n/index.js';
 /**
  * The first two sections of the agent editor: what the agent IS (Basics) and
@@ -33,11 +34,12 @@ import { EditorSection, InlineAction, SettingBlock, SettingRow } from './agent-e
 const INHERIT = '__inherit__';
 export function BasicsSection({ draft, set, oc, setOc, showDescription = true, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const tSpace = useI18nTranslations('agentEditor.tabs');
     return (_jsxs(EditorSection, { title: tI18nComplete.raw('text8fdd2ee8475e'), description: tI18nComplete.raw('text4e420a5186f0'), lead: true, children: [_jsx(SettingRow, { label: tI18nComplete.raw('text92c1cdfdf4cb'), help: tI18nComplete.raw('textbe90a56d29da'), children: _jsx("div", { className: "flex sm:justify-end", children: _jsx(Switch, { "aria-label": tI18nComplete.raw('text92c1cdfdf4cb'), checked: draft.enabled !== false, onCheckedChange: (v) => set('enabled', v ? undefined : false) }) }) }), showDescription ? (_jsx(SettingBlock, { label: tI18nComplete.raw('text526e0087cc3f'), help: oc.mode === 'subagent'
                     ? tI18nComplete.raw('text77e2bc11f6ab')
-                    : tI18nComplete.raw('text9965df7c3221'), children: _jsx(Textarea, { "aria-label": tI18nComplete.raw('text526e0087cc3f'), value: oc.description ?? '', placeholder: tI18nComplete.raw('text446f4eabf99f'), minHeight: 44, className: "text-sm", onChange: (e) => setOc('description', e.target.value) }) })) : null, _jsx(SettingRow, { label: tI18nComplete.raw('text12f67f8539c4'), help: oc.mode ? AGENT_MODE_HELP[oc.mode] : tI18nComplete.raw('text64f405e80a8d'), children: _jsxs(Select, { value: oc.mode ?? INHERIT, onValueChange: (value) => setOc('mode', value === INHERIT ? undefined : value), children: [_jsx(SelectTrigger, { "aria-label": tI18nComplete.raw('text12f67f8539c4'), className: "h-9 w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: INHERIT, children: tI18nComplete.raw('texte8cb80e5c5cb') }), AGENT_MODES.map((mode) => (_jsx(SelectItem, { value: mode, children: AGENT_MODE_LABEL[mode] }, mode)))] })] }) }), _jsx(SettingRow, { label: tI18nComplete.raw('textc7bcb471c03d'), help: tI18nComplete.raw('textdd4971af3f91'), children: _jsx("div", { className: "flex sm:justify-end", children: _jsx(Switch, { "aria-label": tI18nComplete.raw('textc7bcb471c03d'), checked: !oc.hidden, onCheckedChange: (v) => setOc('hidden', v ? undefined : true) }) }) })] }));
+                    : 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: tSpace('space'), help: tSpace('spaceHelp'), children: _jsx(Input, { "aria-label": tSpace('space'), className: "h-9 w-full sm:max-w-56", value: draft.space ?? '', placeholder: tSpace('spacePlaceholder'), onChange: (e) => set('space', e.target.value.toLowerCase() || undefined) }) }), _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, }) {
+export function ModelSection({ oc, setOc, showPrompt = true, lead = true, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     const { data: providers } = useRuntimeProviders();
     const models = flattenModels(providers, { providerMode: modelProviderMode(providers) });
@@ -50,11 +52,38 @@ export function ModelSection({ oc, setOc, showPrompt = true, }) {
         ? models.find((m) => m.providerID === selectedModelKey.providerID && m.modelID === selectedModelKey.modelID)
         : undefined;
     const variantChoices = selectedModel?.variants ? Object.keys(selectedModel.variants) : [];
-    return (_jsxs(_Fragment, { children: [_jsxs(EditorSection, { title: tI18nComplete.raw('text5e2c614c23f0'), description: tI18nComplete.raw('text32398dbb68e2'), lead: true, children: [_jsx(SettingRow, { label: tI18nComplete.raw('text34455bf1d857'), help: oc.model ? (_jsx(InlineAction, { onClick: () => setOc('model', undefined), children: tI18nComplete.raw('text9db60344e984') })) : (tI18nComplete.raw('text64f405e80a8d')), children: _jsx("div", { className: "flex sm:justify-end", children: _jsx(ModelSelector, { models: models, providers: providers, selectedModel: selectedModelKey, unsetLabel: tI18nComplete.raw('texte8cb80e5c5cb'), onSelect: (m) => setOc('model', m ? modelKeyToWire(m) : undefined) }) }) }), variantChoices.length > 0 ? (_jsx(SettingRow, { label: tI18nComplete.raw('text264c28cbf01c'), help: oc.variant
+    return (_jsxs(_Fragment, { children: [_jsxs(EditorSection, { title: tI18nComplete.raw('text5e2c614c23f0'), description: tI18nComplete.raw('text32398dbb68e2'), lead: lead, 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'), children: [_jsx(SliderRow, { label: tI18nComplete.raw('textb958ce8b871a'), help: tI18nComplete.raw('textd380d30f3d60'), value: oc.temperature, fallback: 0, min: 0, max: 2, step: 0.05, onChange: (v) => setOc('temperature', v) }), _jsx(SliderRow, { label: tI18nComplete.raw('text714db3dbb0b7'), help: tI18nComplete.raw('text4f370db531ba'), value: oc.top_p, fallback: 1, min: 0, max: 1, step: 0.01, onChange: (v) => setOc('top_p', v) }), _jsx(SettingRow, { label: tI18nComplete.raw('textfdc639c47624'), help: tI18nComplete.raw('textbf7ff92baea3'), children: _jsx(Input, { "aria-label": tI18nComplete.raw('textfdc639c47624'), type: "number", min: 1, value: oc.steps ?? '', placeholder: tI18nComplete.raw('textf7fcff0d8fea'), variant: "popover", className: "h-9 w-full text-sm tabular-nums", onChange: (e) => setOc('steps', e.target.value ? Math.max(1, Number(e.target.value)) : undefined) }) })] })] }));
+                            : tI18nComplete.raw('text6376d74077c0'), children: _jsx(Input, { "aria-label": tI18nComplete.raw('text3f19fe84a2de'), value: oc.variant ?? '', placeholder: tI18nComplete.raw('text352a25678fb9'), variant: "popover", className: "h-9 w-full text-sm", onChange: (e) => setOc('variant', e.target.value) }) })), showPrompt ? (_jsx(SettingBlock, { label: tI18nComplete.raw('text561257c019e5'), help: tI18nComplete.raw('textad63817393a7'), children: _jsxs(Disclosure, { variant: "outline", className: "overflow-hidden rounded-md", children: [_jsx(DisclosureTrigger, { variant: "outline", children: _jsxs(Button, { variant: "popover", className: "flex w-full items-center justify-between gap-3 rounded-none text-sm font-normal", children: [_jsx("span", { className: "min-w-0 truncate", children: oc.prompt ? firstLine(oc.prompt) : tI18nComplete.raw('textdaaf5ab03267') }), _jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: oc.prompt ? 'Edit' : tI18nComplete.raw('text47f3fe537320') })] }) }), _jsx(DisclosureContent, { variant: "outline", contentClassName: "border-border border-t", children: _jsx(Textarea, { "aria-label": tI18nComplete.raw('text561257c019e5'), value: oc.prompt ?? '', placeholder: tI18nComplete.raw('text94a18ea1d428'), minHeight: 160, className: "rounded-none border-0 font-mono text-xs focus-visible:border-0 focus-visible:ring-0", onChange: (e) => setOc('prompt', e.target.value) }) })] }) })) : null] }), _jsxs(EditorSection, { title: tI18nComplete.raw('text6d06116595a9'), description: tI18nComplete.raw('text33439eb47c9a'), children: [_jsx(SliderRow, { label: tI18nComplete.raw('textb958ce8b871a'), help: tI18nComplete.raw('textd380d30f3d60'), value: oc.temperature, fallback: 0, min: 0, max: 2, step: 0.05, onChange: (v) => setOc('temperature', v) }), _jsx(SliderRow, { label: tI18nComplete.raw('text714db3dbb0b7'), help: tI18nComplete.raw('text4f370db531ba'), value: oc.top_p, fallback: 1, min: 0, max: 1, step: 0.01, onChange: (v) => setOc('top_p', v) }), _jsx(SettingRow, { label: tI18nComplete.raw('textfdc639c47624'), help: tI18nComplete.raw('textbf7ff92baea3'), children: _jsx(Input, { "aria-label": tI18nComplete.raw('textfdc639c47624'), type: "number", min: 1, value: oc.steps ?? '', placeholder: tI18nComplete.raw('textf7fcff0d8fea'), variant: "popover", className: "h-9 w-full text-sm tabular-nums", onChange: (e) => setOc('steps', e.target.value ? Math.max(1, Number(e.target.value)) : undefined) }) }), _jsx(ProviderOptionsRow, { value: oc.options, onChange: (next) => setOc('options', next) })] })] }));
+}
+/**
+ * `options` (kortix.yaml): free-form provider settings as JSON. The draft
+ * changes only when the text parses to an object; an empty field clears it.
+ */
+function ProviderOptionsRow({ value, onChange, }) {
+    const t = 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 (_jsxs(SettingBlock, { label: t('providerOptions'), help: t('providerOptionsHelp'), children: [_jsx(Textarea, { "aria-label": t('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: t('providerOptionsInvalid') }) : null] }));
 }
 /**
  * Whether a slider row is showing its default.

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

@@ -19,8 +19,8 @@ export declare const THEME_COLOR_SWATCH: Record<(typeof THEME_COLORS)[number], s
 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_KEYS: readonly ["read", "edit", "glob", "grep", "bash", "task", "skill", "external_directory"];
+export declare const PERMISSION_ACTION_ONLY_KEYS: readonly ["question", "webfetch", "websearch"];
 export declare const PERMISSION_RULE_GROUPS: {
     label: string;
     keys: (typeof PERMISSION_RULE_KEYS)[number][];

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

@@ -50,28 +50,24 @@ export const PERMISSION_ACTION_LABEL = {
 // `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.
+// The keys pi enforces (`harness/pi/interactions.ts`, `runtime.ts`): every new
+// session runs pi. `list`, `lsp`, `todowrite` and `doom_loop` only ever meant
+// something to OpenCode and are not offered; a manifest that sets one keeps it.
 export const PERMISSION_RULE_KEYS = [
     'read',
     'edit',
     'glob',
     'grep',
-    'list',
     'bash',
     'task',
+    'skill',
     '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_ACTION_ONLY_KEYS = ['question', 'webfetch', 'websearch'];
 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'] },
+    { label: 'Files and search', keys: ['read', 'edit', 'glob', 'grep'] },
+    { label: 'Commands and tools', keys: ['bash', 'task', 'skill', 'external_directory'] },
 ];
 /** The heading over the keys that take a bare action and never a path rule. */
 export const PERMISSION_ACTION_ONLY_GROUP_LABEL = 'Everything else';
@@ -91,6 +87,7 @@ export const PERMISSION_KEY_LABEL = {
     list: 'List folders',
     bash: 'Run shell commands',
     task: 'Hand work to a subagent',
+    skill: 'Load a skill',
     external_directory: 'Reach outside the project',
     lsp: 'Use the language server',
     todowrite: 'Keep a todo list',
@@ -106,7 +103,8 @@ export const PERMISSION_KEY_HELP = {
     grep: 'Search file contents by pattern.',
     list: 'List directory contents.',
     bash: 'Run shell commands.',
-    task: 'Launch a subagent to run a task.',
+    task: 'Start a subagent (the agent tool). A pattern names the subagent.',
+    skill: 'Load a skill. A pattern names the skill.',
     external_directory: 'Access paths outside this project workspace.',
     lsp: 'Use language-server tooling — go-to-definition, diagnostics.',
     todowrite: "Maintain the session's todo list.",

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

@@ -24,7 +24,7 @@ import { type ReactNode } from 'react';
  * does not own their props — the shell sets the style once for everything
  * under it.
  */
-export type EditorSectionStyle = 'flat' | 'panel';
+export type EditorSectionStyle = 'flat' | 'panel' | 'tab';
 export declare function EditorSectionStyleProvider({ value, children, }: {
     value: EditorSectionStyle;
     children: ReactNode;

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

@@ -24,8 +24,8 @@ export function EditorSectionStyleProvider({ value, children, }) {
  */
 export function EditorSection({ title, description, trailing, lead = false, bare = false, children, }) {
     const style = useContext(EditorSectionStyleContext);
-    if (style === 'panel') {
-        return (_jsxs("section", { className: lead ? 'space-y-6' : 'space-y-3', children: [lead ? (
+    if (style === 'panel' || style === 'tab') {
+        return (_jsxs("section", { className: lead ? (style === 'tab' ? 'space-y-5' : '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 })] }));
@@ -50,7 +50,7 @@ export function EditorList({ className, ...props }) {
  */
 export function SettingRow({ label, help, 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 })] }));
+    return (_jsxs("div", { className: cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-6', style === 'flat' ? 'py-3.5' : 'px-4 py-3'), 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:
@@ -58,7 +58,7 @@ export function SettingRow({ label, help, children, }) {
  */
 export function SettingBlock({ label, 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] }));
+    return (_jsxs("div", { className: cn('space-y-2.5', style === 'flat' ? 'py-3.5' : 'px-4 py-3'), children: [_jsx(SettingLabel, { label: label, help: help }), children] }));
 }
 /**
  * The label pair. A plain `<span>`, not `<Label>`: none of these controls take