@kortix/ui 0.14.12 → 0.14.14

package/dist/customize/providers/provider-sheet.js

@@ -34,6 +34,8 @@ import { Switch } from '../../primitives/switch.js';
 import { Copy } from '../../icons/copy.js';
 import { InputGroup, InputGroupInput } from '../../primitives/input-group.js';
 import Loading from '../../primitives/loading.js';
+import { ClaudeCodeStep } from '../sections/llm-provider/claude-code-step.js';
+export { ClaudeCodeStep };
 import { SplitSheetBody, SplitSheetDescription, SplitSheetFooter, SplitSheetHeader, SplitSheetTitle, } from '../../primitives/split-sheet.js';
 import { errorToast, successToast } from '../../primitives/toast.js';
 import { ProviderLogoStatus, connectedVia, providerMethod, supportsPooledProviderKey, useManagedProvider, usePooledProviderIds, useProviderMeta, } from './provider-connect.js';
@@ -50,6 +52,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 /** The subscription each two-way provider signs in with, and how it is named. */
 export const SUBSCRIPTION_BY_PROVIDER = {
     openai: { kind: 'chatgpt', name: 'ChatGPT', plan: 'ChatGPT Plus or Pro' },
+    // Claude models run through Claude Code on the member's own plan; the login is the member's own.
+    anthropic: { kind: 'claude', name: 'Claude', plan: 'Claude Pro or Max' },
     'opencode-go': { kind: 'opencode-go', name: 'OpenCode', plan: 'OpenCode Go' },
 };
 /** Stable DOM id shared by a credential input and its label. */
@@ -107,7 +111,7 @@ export function SavedKey({ envVars, onReplace, }) {
 /** Two ways in: a subscription sign-in or an API key. */
 export function ConnectChoice({ name, plan, providerLabel, onSignIn, onUseKey, }) {
     const t = useTranslations('providerSheet');
-    return (_jsxs("div", { className: "space-y-3", "data-provider-connect-choice": "", children: [_jsxs("div", { className: "border-border space-y-3 rounded-lg border p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Badge, { variant: "info", size: "sm", children: t('fewerSteps') }), _jsx("p", { className: "text-foreground text-sm font-medium", children: t('signInTitle', { name }) }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('signInBody', { plan }) })] }), _jsx(Button, { type: "button", size: "sm", className: "w-full", onClick: onSignIn, children: t('signInAction', { name }) })] }), _jsxs("div", { className: "border-border space-y-3 rounded-lg border p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Badge, { variant: "muted", size: "sm", children: t('payPerUse') }), _jsx("p", { className: "text-foreground text-sm font-medium", children: t('keyOptionTitle') }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('keyOptionBody', { name: providerLabel }) })] }), _jsx(Button, { type: "button", size: "sm", variant: "secondary", className: "w-full", onClick: onUseKey, children: t('keyOptionAction') })] }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('bothHint') })] }));
+    return (_jsxs("div", { className: "space-y-3", "data-provider-connect-choice": "", children: [_jsxs("div", { className: "border-border space-y-3 rounded-lg border p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Badge, { variant: "info", size: "sm", children: t('fewerSteps') }), _jsx("p", { className: "text-foreground text-sm font-medium", children: t('signInTitle', { name }) }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('signInBody', { plan }) })] }), _jsx(Button, { type: "button", size: "sm", className: "w-full", onClick: onSignIn, children: t('signInAction', { name }) })] }), onUseKey ? _jsxs("div", { className: "border-border space-y-3 rounded-lg border p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Badge, { variant: "muted", size: "sm", children: t('payPerUse') }), _jsx("p", { className: "text-foreground text-sm font-medium", children: t('keyOptionTitle') }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('keyOptionBody', { name: providerLabel }) })] }), _jsx(Button, { type: "button", size: "sm", variant: "secondary", className: "w-full", onClick: onUseKey, children: t('keyOptionAction') })] }) : null, onUseKey ? _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('bothHint') }) : null] }));
 }
 function hostOf(url) {
     try {
@@ -226,17 +230,19 @@ function SubscriptionBody({ projectId, entry, connected: keyConnected, canWrite,
     const [confirmDisconnect, setConfirmDisconnect] = useState(false);
     const waiting = sign.phase === 'waiting';
     const anyConnected = sign.connected || keyConnected;
+    // A Claude login is the member's own: any member signs in. A shared login or a key needs write access.
+    const canSignIn = canWrite || sign.pastesCode;
     const copyCode = () => {
         if (!sign.challenge?.code)
             return;
         void navigator.clipboard?.writeText(sign.challenge.code).then(() => successToast(t('codeCopied')));
     };
     let body;
-    if (!canWrite) {
+    if (!canSignIn) {
         body = anyConnected ? null : _jsx("p", { className: "text-muted-foreground text-sm", children: t('readOnly') });
     }
     else if (waiting) {
-        body = (_jsx(DeviceCode, { name: sub.name, code: sign.challenge?.code ?? null, url: sign.challenge?.url ?? null, onCopy: copyCode }));
+        body = sign.pastesCode ? (_jsx(ClaudeCodeStep, { url: sign.challenge?.url ?? null, checking: sign.checking, onSubmit: (code) => void sign.submitCode(code) })) : (_jsx(DeviceCode, { name: sub.name, code: sign.challenge?.code ?? null, url: sign.challenge?.url ?? null, onCopy: copyCode }));
     }
     else if (addingKey) {
         body = (_jsx(ProviderKeyForm, { entry: entry, values: key.values, onValueChange: key.setValue, saving: key.saving, error: key.error, onCancel: () => {
@@ -245,9 +251,9 @@ function SubscriptionBody({ projectId, entry, connected: keyConnected, canWrite,
             }, onSave: () => void key.save()?.then((ok) => ok && setAddingKey(false)) }));
     }
     else if (!anyConnected) {
-        body = (_jsx(ConnectChoice, { name: sub.name, plan: sub.plan, providerLabel: entry.label, onSignIn: () => void sign.start(), onUseKey: () => setAddingKey(true) }));
+        body = (_jsx(ConnectChoice, { name: sub.name, plan: sub.plan, providerLabel: entry.label, onSignIn: () => void sign.start(), onUseKey: canWrite ? () => setAddingKey(true) : undefined }));
     }
-    const connections = anyConnected && !waiting && !addingKey && (_jsxs(Section, { title: t('connections'), children: [_jsxs("ul", { className: "border-border divide-border divide-y rounded-lg border", children: [sign.connected ? (_jsx(ConnectionRow, { title: t('subscription', { plan: sub.plan }), detail: t('signedIn'), action: canWrite ? (_jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: sign.disconnect.isPending, onClick: () => setConfirmDisconnect(true), children: t('disconnect') })) : null })) : null, keyConnected ? (_jsx(ConnectionRow, { title: t('apiKey'), detail: t('savedKey'), action: canWrite ? (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => setAddingKey(true), children: t('replace') }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "text-destructive hover:text-destructive", onClick: () => setConfirmRemove(true), children: t('removeKey') })] })) : null })) : null] }), canWrite && !(sign.connected && keyConnected) ? (_jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: () => (sign.connected ? setAddingKey(true) : void sign.start()), children: sign.connected ? t('addKey') : t('signInTitle', { name: sub.name }) })) : null] }));
+    const connections = anyConnected && !waiting && !addingKey && (_jsxs(Section, { title: t('connections'), children: [_jsxs("ul", { className: "border-border divide-border divide-y rounded-lg border", children: [sign.connected ? (_jsx(ConnectionRow, { title: t('subscription', { plan: sub.plan }), detail: t('signedIn'), action: canSignIn ? (_jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: sign.disconnect.isPending, onClick: () => setConfirmDisconnect(true), children: t('disconnect') })) : null })) : null, keyConnected ? (_jsx(ConnectionRow, { title: t('apiKey'), detail: t('savedKey'), action: canWrite ? (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => setAddingKey(true), children: t('replace') }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "text-destructive hover:text-destructive", onClick: () => setConfirmRemove(true), children: t('removeKey') })] })) : null })) : null] }), (sign.connected ? canWrite && !keyConnected : canSignIn) ? (_jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: () => (sign.connected ? setAddingKey(true) : void sign.start()), children: sign.connected ? t('addKey') : t('signInTitle', { name: sub.name }) })) : null] }));
     return (_jsxs(_Fragment, { children: [_jsxs(SplitSheetBody, { className: "space-y-7", children: [sign.error ? (_jsx("p", { role: "alert", className: "text-destructive text-xs text-pretty", children: sign.error })) : null, body, connections, !waiting ? models : null] }), _jsx(SplitSheetFooter, { className: "justify-between", children: waiting ? (_jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "-ml-2", onClick: sign.cancel, children: t('cancel') })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: t('sharedNote') })) }), _jsx(RemoveKeyDialog, { open: confirmRemove, onOpenChange: setConfirmRemove, entry: entry, pending: key.removing, onConfirm: () => void key.remove()?.then((ok) => ok && setConfirmRemove(false)) }), _jsx(AlertDialog, { open: confirmDisconnect, onOpenChange: setConfirmDisconnect, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t('disconnectTitle', { plan: sub.plan }) }), _jsx(AlertDialogDescription, { children: t('disconnectBody') })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('cancel') }), _jsx(AlertDialogAction, { variant: "destructive", disabled: sign.disconnect.isPending, onClick: () => sign.disconnect.mutate(), children: t('disconnect') })] })] }) })] }));
 }
 /** The sheet's header and body for one provider. Render inside `SplitSheetContent`. */
@@ -285,6 +291,10 @@ export function ProviderSheet({ projectId, providerId, canWrite, enabled = true,
     else if (pooled.pooledSecretsEnabled && pooled.accountId && entry.id === 'openai') {
         content = (_jsxs(SplitSheetBody, { className: "space-y-7", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: tPooled('chatGptAccounts') }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tPooled('oauthPrivateDescription') }), _jsx(AccountSecretResourcesPanel, { accountId: pooled.accountId, projectId: projectId, providerId: "codex", providerName: "ChatGPT Plus/Pro", envVar: "CODEX_AUTH_JSON", canWrite: true, oauth: { projectId, onConnected: () => undefined } }), _jsx(ChatGptSubscriptionConnect, { projectId: projectId, onConnected: () => undefined, legacyOnly: true })] }), models] }));
     }
+    else if (pooled.pooledSecretsEnabled && pooled.accountId && entry.id === 'anthropic') {
+        // Claude accounts, exactly as OpenAI lists ChatGPT accounts; Anthropic API keys below them.
+        content = (_jsxs(SplitSheetBody, { className: "space-y-7", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: tPooled('claudeAccounts') }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tPooled('claudeOauthPrivateDescription') }), _jsx(AccountSecretResourcesPanel, { accountId: pooled.accountId, projectId: projectId, providerId: "claude-agent", providerName: "Claude Pro/Max", envVar: "CLAUDE_CODE_OAUTH_TOKEN", canWrite: true, oauth: { projectId, onConnected: () => undefined, kind: 'claude' } })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: tPooled('providerKeysFor', { provider: entry.label }) }), _jsx(AccountSecretResourcesPanel, { accountId: pooled.accountId, projectId: projectId, providerId: entry.id, providerName: entry.label, envVar: entry.envVars[0], canWrite: true })] }), models] }));
+    }
     else if (pooled.pooledSecretsEnabled && pooled.accountId && supportsPooledProviderKey(entry)) {
         content = (_jsxs(SplitSheetBody, { className: "space-y-7", children: [_jsx(AccountSecretResourcesPanel, { accountId: pooled.accountId, projectId: projectId, providerId: entry.id, providerName: entry.label, envVar: entry.envVars[0], canWrite: true }), models] }));
     }

package/dist/customize/secrets/secrets-page.d.ts

@@ -1,3 +1,4 @@
+import type { AgentGrant, ResourceScope } from '../shared/agent-resource-scope.js';
 /**
  * The page body for /projects/[id]/secrets — Secrets graduated out of the
  * project Settings sub-nav into its own top-level Customize tab. It is the
@@ -24,6 +25,9 @@
  * four beside it — the same wrapper `triggers-page.tsx` shed for the same
  * reason.
  */
-export declare function SecretsPage({ projectId }: {
+export declare function SecretsPage({ projectId, surface, grant, }: {
     projectId: string;
+    /** `agent` renders the same screen for one agent's page (`agent-page.tsx`). */
+    surface?: ResourceScope;
+    grant?: AgentGrant;
 }): import("react").JSX.Element;

package/dist/customize/secrets/secrets-page.js

@@ -29,7 +29,7 @@ import { SettingsNavProvider } from '../../internal/layout/settings-nav-context.
  * four beside it — the same wrapper `triggers-page.tsx` shed for the same
  * reason.
  */
-export function SecretsPage({ projectId }) {
+export function SecretsPage({ projectId, surface, grant, }) {
     const settingsNav = useStandaloneCapabilityNav(projectId, 'secrets');
-    return (_jsx(SettingsNavProvider, { value: settingsNav, children: _jsx(SecretsView, { projectId: projectId }) }));
+    return (_jsx(SettingsNavProvider, { value: settingsNav, children: _jsx(SecretsView, { projectId: projectId, surface: surface, grant: grant }) }));
 }

package/dist/customize/sections/gateway-view.d.ts

@@ -67,11 +67,13 @@
  * double-indents the page.
  */
 import { type ReactNode } from 'react';
+import type { ResourceScope } from '../shared/agent-resource-scope.js';
 export declare const MODELS_PAGE_TITLE = "Models";
 export declare const MODELS_PAGE_DESCRIPTION = "Choose the providers and models this project can use.";
 type LlmTab = 'providers' | 'models' | 'custom' | 'gateway' | 'routing' | 'overview' | 'logs';
 interface LlmTabEntry {
-    id: LlmTab;
+    /** `agent` exists only on the agent variant (`AGENT_LLM_TABS`). */
+    id: LlmTab | 'agent';
     label: string;
 }
 export declare const LLM_TABS: LlmTabEntry[];
@@ -155,8 +157,14 @@ export declare function LlmSections({ projectId, tab, onTabChange, canWrite, ena
      *  rows that open in place (Paper PM01 + AK01) — no room for a second column. */
     providersVariant?: 'split' | 'accordion';
 }): import("react").JSX.Element;
-export declare function LlmManagementView({ projectId }: {
+export declare function LlmManagementView({ projectId, surface, agentSettings, }: {
     projectId: string;
+    /** `agent` is the same page on one agent's editor: a leading "This agent"
+     *  tab holds the agent's own model, and the project default picker steps
+     *  aside — the project default is the global variant's control. */
+    surface?: ResourceScope;
+    /** The agent's model settings, rendered as the "This agent" tab. */
+    agentSettings?: ReactNode;
 }): import("react").JSX.Element;
 /**
  * The provider list beside the provider it opened — the page and the quick

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

@@ -79,6 +79,7 @@ import { ProviderConnect } from '../providers/provider-connect.js';
 import { ProviderSheet } from '../providers/provider-sheet.js';
 import { ModelsPageSheetContext, } from './models-page-sheet.js';
 import { cn } from '../../internal/lib/utils.js';
+import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
 import { ModelSelector } from '../../session/models/model-selector.js';
 import { CapabilityPageShell } from '../shared/capability-page-shell.js';
 import { GatewayAccessTab } from './gateway-access-tab.js';
@@ -201,9 +202,14 @@ export function LlmSections({ projectId, tab, onTabChange, canWrite, enabled, se
                carries the padding. */
             _jsx(ProviderConnect, { projectId: projectId, canWrite: canWrite, enabled: enabled, selectedId: selectedProviderId, onSelect: onSelectProvider })), tab === 'models' && _jsx(ModelsTab, { projectId: projectId, canWrite: canWrite }), tab === 'custom' && _jsx(CustomProviderPanel, { projectId: projectId, canWrite: canWrite }), tab === 'gateway' && (_jsx(GatewayAccessTab, { projectId: projectId, canWrite: canWrite, onViewModels: () => onTabChange('models') })), tab === 'routing' && (_jsx(GatewayRouting, { projectId: projectId, canWrite: canWrite, projectDefaultPending: modelDefaults.isUpdating })), tab === 'overview' && _jsx(GatewayOverview, { projectId: projectId, canWrite: canWrite }), tab === 'logs' && _jsx(GatewayLogs, { projectId: projectId })] }));
 }
-export function LlmManagementView({ projectId }) {
+/** The agent variant's own tab, ahead of the seven project tabs. */
+const AGENT_TAB = 'agent';
+export function LlmManagementView({ projectId, surface = { kind: 'global' }, agentSettings, }) {
     const { isOpen: open, activeTab: section } = useSettingsNav();
-    const [tab, setTab] = useState(() => TAB_BY_SECTION[section] ?? 'providers');
+    const agentScoped = surface.kind === 'agent' && agentSettings !== undefined;
+    const tAgentScope = useTranslations('agentScope');
+    const agentTabs = useMemo(() => [{ id: AGENT_TAB, label: tAgentScope('thisAgent') }, ...LLM_TABS], [tAgentScope]);
+    const [tab, setTab] = useState(() => TAB_BY_SECTION[section] ?? (agentScoped ? AGENT_TAB : 'providers'));
     // A role with the LLM section's READ leaf (project.read) but not
     // project.write sees the gateway read-only: logs/overview/spend stay
     // visible, but the project-default model picker is hidden so a read-only
@@ -217,10 +223,16 @@ export function LlmManagementView({ projectId }) {
             setTab(next);
     }, [section]);
     const [providerId, setProviderId] = useState(null);
-    return (_jsx(ProviderSheetSplit, { projectId: projectId, providerId: tab === 'providers' ? providerId : null, onProviderChange: setProviderId, canWrite: canWrite, children: _jsx(CapabilityPageShell, { title: MODELS_PAGE_TITLE, description: MODELS_PAGE_DESCRIPTION, filters: 
+    return (_jsx(ProviderSheetSplit, { projectId: projectId, providerId: tab === 'providers' ? providerId : null, onProviderChange: setProviderId, canWrite: canWrite, children: _jsx(CapabilityPageShell, { title: MODELS_PAGE_TITLE, description: 
+            // Only "This agent" is the agent's own; every other tab edits state
+            // that all of the project's agents share, and the line says so.
+            agentScoped ? tAgentScope('modelsDescription') : MODELS_PAGE_DESCRIPTION, filters: 
             /* The tab strip on the left, the project default on the right of the
                same row. */
-            _jsxs(_Fragment, { children: [_jsx(LlmTabStrip, { value: tab, onValueChange: (v) => setTab(v) }), canWrite ? _jsx(ProjectDefaultPicker, { projectId: projectId }) : null] }), children: _jsx(LlmSections, { projectId: projectId, tab: tab, onTabChange: setTab, canWrite: canWrite, enabled: open, selectedProviderId: providerId, onSelectProvider: setProviderId }) }) }));
+            _jsxs(_Fragment, { children: [agentScoped ? (
+                    // Eight tabs in the editor's pane, beside the rail: the strip
+                    // scrolls rather than push the row wider than the column.
+                    _jsx(FadedScrollArea, { orientation: "horizontal", fadeColor: "from-background", className: "min-w-0 max-w-full", children: _jsx(LlmTabStrip, { value: tab, onValueChange: (v) => setTab(v), tabs: agentTabs }) })) : (_jsx(LlmTabStrip, { value: tab, onValueChange: (v) => setTab(v), tabs: LLM_TABS })), canWrite && !agentScoped ? _jsx(ProjectDefaultPicker, { projectId: projectId }) : null] }), children: tab === AGENT_TAB ? (agentSettings) : (_jsx(LlmSections, { projectId: projectId, tab: tab, onTabChange: setTab, canWrite: canWrite, enabled: open, selectedProviderId: providerId, onSelectProvider: setProviderId })) }) }));
 }
 /**
  * The provider list beside the provider it opened — the page and the quick

package/dist/customize/sections/llm-provider/chatgpt-subscription-connect.d.ts

@@ -3,9 +3,14 @@ import type { ChatGptChallenge, ChatGptPhase } from './types.js';
 /**
  * A subscription sign-in card. `chatgpt` is the ChatGPT Plus/Pro login (Codex
  * device grant); `opencode-go` is an OpenCode Console account login for
- * OpenCode Go. Same flow, same card; only the provider and the copy differ.
+ * OpenCode Go; `claude` is the member's own Claude Pro or Max login for Claude
+ * models run through Claude Code (`claude setup-token` on the server: the
+ * member approves on claude.com and pastes the code back, `submitCode`).
+ * Same flow, same card; only the provider, the copy and that last step differ.
  */
-export type SubscriptionKind = 'chatgpt' | 'opencode-go';
+export type SubscriptionKind = 'chatgpt' | 'opencode-go' | 'claude';
+/** Whether the caller can use a Claude account in the project (`GET /projects/:id/claude-subscription`). */
+export declare const claudeSubscriptionKey: (projectId: string) => readonly ["claude-subscription", string];
 /**
  * The sign-in state machine behind every subscription surface: the card below
  * and the provider sheet (`packages/ui/src/customize/providers/provider-sheet.tsx`). One copy,
@@ -53,9 +58,11 @@ export declare function useSubscriptionSignIn({ projectId, onConnected, kind, }:
     connected: boolean;
     start: () => Promise<void>;
     cancel: () => void;
-    disconnect: import("@tanstack/react-query").UseMutationResult<{
-        ok: boolean;
-    }, Error, void, unknown>;
+    disconnect: import("@tanstack/react-query").UseMutationResult<void, Error, void, unknown>;
+    /** Claude only: the member pastes the code claude.com shows (`submitCode`) instead of typing one into the provider. */
+    pastesCode: boolean;
+    submitCode: (code: string) => Promise<void>;
+    checking: boolean;
 };
 export declare function ChatGptSubscriptionConnect({ projectId, onConnected, accessSlot, legacyOnly, kind, }: {
     projectId: string;

package/dist/customize/sections/llm-provider/chatgpt-subscription-connect.js

@@ -6,11 +6,12 @@ import { InfoBanner } from '../../../primitives/info-banner.js';
 import Loading from '../../../primitives/loading.js';
 import { errorToast, successToast } from '../../../primitives/toast.js';
 import { ProviderLogo } from '../../../internal/lib/provider-branding.js';
-import { deleteProjectProviderOAuth, listProjectProviderOAuth, listProjectSecrets, pollProjectProviderOAuth, startProjectProviderOAuth, } from '@kortix/sdk';
+import { completeClaudeSubscriptionLogin, deleteAccountSecretResource, deleteProjectProviderOAuth, getClaudeSubscription, getProjectDetail, listAccountSecretResources, listProjectProviderOAuth, listProjectSecrets, pollProjectProviderOAuth, startClaudeSubscriptionLogin, startProjectProviderOAuth, } from '@kortix/sdk';
 import { contract, qk, refreshProjectProviderState } from '@kortix/sdk/react';
 import { CheckCircleIcon as CheckCircle2, WarningIcon as TriangleAlert, } from '@phosphor-icons/react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useTranslations } from '../../../i18n/index.js';
+import { useUiViewer } from '../../../providers/ui-provider.js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { forgetSubscriptionCredentials, subscriptionIsConnected, subscriptionPrimaryAction, } from './subscription-control.js';
 import { sleep } from './utils.js';
@@ -19,7 +20,10 @@ import { runDeviceGrant } from './device-grant.js';
 const SUBSCRIPTIONS = {
     chatgpt: { oauth: 'openai', providerId: 'codex', logo: 'openai', logoName: 'OpenAI' },
     'opencode-go': { oauth: 'opencode-go', providerId: 'opencode-go', logo: 'opencode-go', logoName: 'OpenCode Go' },
+    claude: { oauth: 'claude', providerId: 'claude-agent', logo: 'anthropic', logoName: 'Anthropic' },
 };
+/** Whether the caller can use a Claude account in the project (`GET /projects/:id/claude-subscription`). */
+export const claudeSubscriptionKey = (projectId) => ['claude-subscription', projectId];
 const providerLoginsKey = (projectId) => ['project-provider-oauth', projectId];
 /**
  * The sign-in state machine behind every subscription surface: the card below
@@ -30,9 +34,24 @@ export function useSubscriptionSignIn({ projectId, onConnected, kind = 'chatgpt'
     const tHardcodedUi = useTranslations('hardcodedUi');
     const tPooled = useTranslations('pooledSecrets');
     const queryClient = useQueryClient();
+    const viewer = useUiViewer();
     const subscription = SUBSCRIPTIONS[kind];
     const chatgpt = kind === 'chatgpt';
-    const copy = chatgpt ? {
+    const claude = kind === 'claude';
+    const tClaude = useTranslations('claudeSubscription');
+    const copy = claude ? {
+        title: tClaude('title'),
+        description: tClaude('description'),
+        connectedBanner: tClaude('connectedTitle'),
+        connectedToast: tClaude('connected'),
+        disconnectedToast: tClaude('disconnected'),
+        connect: tClaude('connectClaude'),
+        reconnect: tClaude('reconnectClaude'),
+        disconnect: tClaude('disconnect'),
+        connecting: tClaude('starting'),
+        deviceDescription: undefined,
+        failed: tClaude('startError'),
+    } : chatgpt ? {
         title: tHardcodedUi.raw('autoComponentsProjectsProjectProviderModalJsxTextChatGPTPlusPro0deb5530'),
         description: tHardcodedUi.raw('autoComponentsProjectsProjectProviderModalJsxTextSignInWitha0c5128c'),
         connectedBanner: tHardcodedUi.raw('autoComponentsProjectsProjectProviderModalJsxTextChatGPTSubscriptionConnectedcf12bc87'),
@@ -60,6 +79,9 @@ export function useSubscriptionSignIn({ projectId, onConnected, kind = 'chatgpt'
     const [phase, setPhase] = useState('idle');
     const [error, setError] = useState(null);
     const [challenge, setChallenge] = useState(null);
+    /** Claude: the sign-in the pasted code completes, and whether it is being checked. */
+    const [claudeFlow, setClaudeFlow] = useState(null);
+    const [checking, setChecking] = useState(false);
     const cancelledRef = useRef(false);
     useEffect(() => {
         return () => {
@@ -69,10 +91,71 @@ export function useSubscriptionSignIn({ projectId, onConnected, kind = 'chatgpt'
     const reset = useCallback(() => {
         cancelledRef.current = true;
         setChallenge(null);
+        setClaudeFlow(null);
+        setChecking(false);
         setError(null);
         setPhase('idle');
     }, []);
+    const claudeConnected = useCallback(async () => {
+        setPhase('done');
+        setChallenge(null);
+        setClaudeFlow(null);
+        successToast(copy.connectedToast);
+        await queryClient.invalidateQueries({ queryKey: claudeSubscriptionKey(projectId) });
+        void queryClient.invalidateQueries({ queryKey: ['account-secret-resources'] });
+        refreshProjectProviderState(queryClient, projectId);
+        onConnected(subscription.providerId);
+    }, [copy.connectedToast, onConnected, projectId, queryClient, subscription.providerId]);
+    /** Claude: start `claude setup-token` and open claude.com. The tab opens inside the click, so a popup blocker lets it through. */
+    const startClaude = useCallback(async () => {
+        cancelledRef.current = false;
+        setError(null);
+        setChallenge(null);
+        setPhase('waiting');
+        const popup = typeof window === 'undefined' ? null : window.open('about:blank', '_blank');
+        try {
+            const started = await startClaudeSubscriptionLogin(projectId);
+            if (cancelledRef.current) {
+                popup?.close();
+                return;
+            }
+            setClaudeFlow(started.flow_id);
+            setChallenge({ url: started.authorize_url, code: null });
+            if (popup && !popup.closed)
+                popup.location.href = started.authorize_url;
+        }
+        catch (err) {
+            popup?.close();
+            setPhase('idle');
+            setError(err instanceof Error && err.message ? err.message : copy.failed);
+        }
+    }, [copy.failed, projectId]);
+    /** Claude: hand the code claude.com showed to the sign-in. A refused code ends it: the next try signs in again. */
+    const submitCode = useCallback(async (code) => {
+        if (!claudeFlow || !code.trim())
+            return;
+        setChecking(true);
+        setError(null);
+        try {
+            await completeClaudeSubscriptionLogin(projectId, { flowId: claudeFlow, code: code.trim() });
+            if (!cancelledRef.current)
+                await claudeConnected();
+        }
+        catch (err) {
+            if (cancelledRef.current)
+                return;
+            setPhase('idle');
+            setChallenge(null);
+            setClaudeFlow(null);
+            setError(err instanceof Error && err.message ? err.message : tClaude('codeError'));
+        }
+        finally {
+            setChecking(false);
+        }
+    }, [claudeConnected, claudeFlow, projectId, tClaude]);
     const handleConnect = useCallback(async () => {
+        if (claude)
+            return startClaude();
         cancelledRef.current = false;
         setError(null);
         setChallenge(null);
@@ -96,7 +179,7 @@ export function useSubscriptionSignIn({ projectId, onConnected, kind = 'chatgpt'
                 onConnected(subscription.providerId);
             },
         });
-    }, [projectId, queryClient, onConnected, subscription, copy.connectedToast, copy.failed]);
+    }, [claude, startClaude, projectId, queryClient, onConnected, subscription, copy.connectedToast, copy.failed]);
     // What the PROJECT holds, not what this component remembers doing. A
     // credential connected in another tab, another surface, or before this page
     // load is still connected — and until this read existed the card offered
@@ -105,6 +188,13 @@ export function useSubscriptionSignIn({ projectId, onConnected, kind = 'chatgpt'
         queryKey: qk.project.secrets(projectId),
         queryFn: () => listProjectSecrets(projectId),
         ...contract('config'),
+        enabled: !claude,
+    });
+    // A Claude account is an account secret resource: own or shared, the server counts the usable ones.
+    const claudeQuery = useQuery({
+        queryKey: claudeSubscriptionKey(projectId),
+        queryFn: () => getClaudeSubscription(projectId),
+        enabled: claude,
     });
     // An OpenCode key secret can hold a plain API key, so a secret name does not
     // say "signed in"; the login list does.
@@ -112,25 +202,44 @@ export function useSubscriptionSignIn({ projectId, onConnected, kind = 'chatgpt'
         queryKey: providerLoginsKey(projectId),
         queryFn: () => listProjectProviderOAuth(projectId),
         ...contract('config'),
-        enabled: !chatgpt,
+        enabled: !chatgpt && !claude,
     });
     const connected = useMemo(() => {
+        if (claude)
+            return claudeQuery.data?.connected === true;
         if (!chatgpt)
             return (loginsQuery.data ?? []).some((login) => login.provider_id === subscription.oauth);
         const data = secretsQuery.data;
         const items = Array.isArray(data) ? data : (data?.items ?? []);
         return subscriptionIsConnected(items.map((item) => item.name));
-    }, [chatgpt, loginsQuery.data, secretsQuery.data, subscription.oauth]);
+    }, [chatgpt, claude, claudeQuery.data, loginsQuery.data, secretsQuery.data, subscription.oauth]);
     const disconnect = useMutation({
         // The server route was always correct and always unreachable: it deletes
         // the credential, audits it, and refreshes the model catalog. Nothing in
         // the product called it.
-        mutationFn: () => deleteProjectProviderOAuth(projectId, subscription.oauth),
+        mutationFn: async () => {
+            if (claude) {
+                // The caller's own Claude accounts in this project; one shared by someone else stays theirs to remove.
+                const accountId = (await getProjectDetail(projectId)).project?.account_id;
+                if (!accountId)
+                    throw new Error(tClaude('startError'));
+                const { secrets } = await listAccountSecretResources(accountId, projectId);
+                for (const secret of secrets.filter((item) => item.provider_id === subscription.providerId && item.created_by === viewer?.id)) {
+                    await deleteAccountSecretResource(accountId, secret.secret_id);
+                }
+            }
+            else
+                await deleteProjectProviderOAuth(projectId, subscription.oauth);
+        },
         // Returning the promise keeps the button in its pending state until the
         // cache says "disconnected", so the card never shows a live Disconnect
         // button over a credential the server already removed.
         onSuccess: async () => {
-            if (chatgpt)
+            if (claude) {
+                await queryClient.invalidateQueries({ queryKey: claudeSubscriptionKey(projectId) });
+                void queryClient.invalidateQueries({ queryKey: ['account-secret-resources'] });
+            }
+            else if (chatgpt)
                 await forgetSubscriptionCredentials(queryClient, projectId);
             else {
                 queryClient.setQueryData(providerLoginsKey(projectId), (logins) => logins?.filter((login) => login.provider_id !== subscription.oauth));
@@ -143,7 +252,21 @@ export function useSubscriptionSignIn({ projectId, onConnected, kind = 'chatgpt'
         },
         onError: (err) => errorToast(err instanceof Error ? err.message : tHardcodedUi.raw('i18nComplete.text7b7e67f5f919')),
     });
-    return { subscription, copy, phase, challenge, error, connected, start: handleConnect, cancel: reset, disconnect };
+    return {
+        subscription,
+        copy,
+        phase,
+        challenge,
+        error,
+        connected,
+        start: handleConnect,
+        cancel: reset,
+        disconnect,
+        /** Claude only: the member pastes the code claude.com shows (`submitCode`) instead of typing one into the provider. */
+        pastesCode: claude,
+        submitCode,
+        checking,
+    };
 }
 // Legacy ChatGPT subscription login. With pooled connections enabled this
 // component shows only an existing project login; new accounts use resources.

package/dist/customize/sections/llm-provider/claude-code-step.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Claude's step where ChatGPT shows a device code: Kortix ran the unmodified
+ * `claude setup-token`, claude.com is open in a new tab, and the member pastes
+ * the code it shows after the approval.
+ */
+export declare function ClaudeCodeStep({ url, checking, onSubmit, }: {
+    url: string | null;
+    checking: boolean;
+    onSubmit: (code: string) => void;
+}): import("react").JSX.Element;

package/dist/customize/sections/llm-provider/claude-code-step.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowSquareOutIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { useTranslations } from '../../../i18n/index.js';
+import { Button } from '../../../primitives/button.js';
+import { InputGroup, InputGroupInput } from '../../../primitives/input-group.js';
+import Loading from '../../../primitives/loading.js';
+function hostOf(url) {
+    try {
+        return new URL(url).host;
+    }
+    catch {
+        return url;
+    }
+}
+/**
+ * Claude's step where ChatGPT shows a device code: Kortix ran the unmodified
+ * `claude setup-token`, claude.com is open in a new tab, and the member pastes
+ * the code it shows after the approval.
+ */
+export function ClaudeCodeStep({ url, checking, onSubmit, }) {
+    const t = useTranslations('claudeSubscription');
+    const tSheet = useTranslations('providerSheet');
+    const [code, setCode] = useState('');
+    const canSubmit = !!url && code.trim().length > 0 && !checking;
+    return (_jsxs("div", { className: "bg-muted/60 space-y-3 rounded-lg p-4", "data-provider-claude-code": "", children: [_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('approveDescription') }), _jsxs("form", { className: "flex items-center gap-2", onSubmit: (event) => {
+                    event.preventDefault();
+                    if (canSubmit)
+                        onSubmit(code.trim());
+                }, children: [_jsx(InputGroup, { className: "h-8 min-w-0 flex-1", children: _jsx(InputGroupInput, { autoFocus: true, autoComplete: "off", spellCheck: false, "data-1p-ignore": "", "data-lpignore": "true", "aria-label": t('codeLabel'), placeholder: t('codeLabel'), value: code, disabled: !url || checking, onChange: (event) => setCode(event.target.value), className: "font-mono text-xs" }) }), _jsxs(Button, { type: "submit", size: "sm", disabled: !canSubmit, className: "gap-1.5", children: [checking ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, checking ? t('connecting') : t('connect')] })] }), url ? (_jsx(Button, { size: "sm", variant: "secondary", className: "gap-1.5", asChild: true, children: _jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", children: [tSheet('openLink', { host: hostOf(url) }), _jsx(ArrowSquareOutIcon, { className: "size-3.5 shrink-0" })] }) })) : (_jsxs("p", { className: "text-muted-foreground flex items-center gap-2 text-xs", children: [_jsx(Loading, { className: "size-3.5 shrink-0" }), t('starting')] }))] }));
+}

package/dist/customize/sections/llm-provider/models-tab.js

@@ -28,6 +28,7 @@ import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGro
 import { MagnifyingGlassIcon as Search } from '@phosphor-icons/react';
 import { useSlashFocus } from '../../../internal/hooks/index.js';
 import { buildModelGroups } from './model-rows.js';
+import { isClaudeSubscriptionModel } from '../../../session/models/model-tags.js';
 /**
  * `search` used to be driven by the provider modal's always-on search bar,
  * which JAY-510 deleted (it sat above the tabs and filtered whichever tab
@@ -46,7 +47,10 @@ export function ModelsTab({ projectId, search: hostSearch, canWrite = false, })
     // the two views can never show different models — and each model's `enabled`
     // flag is resolved server-side and enforced by the gateway, so a switch here
     // is the one and only thing deciding whether it appears there.
-    const models = useProjectModels(projectId);
+    const projectModels = useProjectModels(projectId);
+    // Claude subscription models are listed once the member can use a Claude
+    // account, as ChatGPT models are listed once a ChatGPT account is connected.
+    const models = useMemo(() => projectModels.filter((m) => !(isClaudeSubscriptionModel(m) && m.available === false)), [projectModels]);
     const pickerCatalog = useProjectModelPickerCatalog(projectId);
     const enablement = useModelEnablement(projectId);
     // Prices below are the provider's base price; the fee is added when the call bills.

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

@@ -1,8 +1,8 @@
 /**
  * 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 declare function AccountSecretResourcesPanel({ accountId, projectId, providerId, providerName, envVar, canWrite, oauth }: {
     accountId: string;
@@ -11,8 +11,10 @@ export declare function AccountSecretResourcesPanel({ accountId, projectId, prov
     providerName: string;
     envVar: string;
     canWrite: boolean;
+    /** A sign-in account list: ChatGPT (device code, the default) or Claude (`kind: 'claude'`, a pasted code). */
     oauth?: {
         projectId: string;
         onConnected: (providerId: string) => void;
+        kind?: 'chatgpt' | 'claude';
     };
 }): import("react").JSX.Element;