@kortix/ui 0.0.0-stage → 0.14.4

package/dist/customize/project-settings/project-settings-sections.js

@@ -0,0 +1,99 @@
+import { ArrowCircleUpIcon as ArrowUpCircle, ShippingContainerIcon as Container, FlaskIcon as Flask, GitBranchIcon as GitBranch, GearSixIcon as Settings, } from '@phosphor-icons/react';
+import { capabilityTabHref } from '../../internal/lib/capability-tab-routes.js';
+import { localizeUiCatalog } from '../../i18n/ui-catalog/localize-ui-catalog.js';
+import { REMAINING_UI_TRANSLATION_KEYS } from '../../i18n/ui-catalog/remaining-ui-translation-keys.generated.js';
+/** The sections every project shows, in sub-nav order. */
+const STATIC_SECTIONS = [
+    {
+        key: 'general',
+        label: 'General',
+        icon: Settings,
+        gate: 'settings',
+    },
+    // Its own section since 2026-09-03 (Marko): the repository, its status,
+    // the base branch, the manifest file and who can reach the repo are one
+    // subject, and they were a long tail under General.
+    {
+        key: 'git',
+        label: 'Git repo',
+        icon: GitBranch,
+        description: 'The repository this workspace runs from, and who can reach it.',
+        gate: 'settings',
+    },
+    {
+        key: 'sandbox',
+        label: 'Sandbox templates',
+        icon: Container,
+        // Combines the old Sandbox templates AND Snapshots panes — a snapshot is
+        // the build history of a sandbox template, not a separate concept, so one
+        // section shows the template's recipe and the record of each time Kortix
+        // built a machine from it.
+        description: 'The recipe for the machine a session runs on, and the record of every time Kortix prepared one.',
+        docsHref: '/docs/work/runtime',
+        gate: 'sandbox',
+    },
+];
+const FEATURE_FLAGS_SECTION = {
+    key: 'feature-flags',
+    label: 'Feature flags',
+    icon: Flask,
+    description: 'Features you can switch on before they are generally available.',
+    gate: 'feature-flags',
+};
+/**
+ * Upgrades — the agent-driven codebase upgrade runner. Not billing: it opens a
+ * change request against this workspace's own repo. It sat pinned at the
+ * bottom of the old rail and keeps that position here, last in the list.
+ */
+const UPGRADES_SECTION = {
+    key: 'upgrades',
+    label: 'Upgrades',
+    description: 'Changes an agent makes to this workspace. Every run opens a change request for you to review — nothing merges on its own.',
+    icon: ArrowUpCircle,
+    gate: 'upgrade',
+};
+const PROJECT_SETTINGS_SOURCE = {
+    staticSections: STATIC_SECTIONS,
+    featureFlagsSection: FEATURE_FLAGS_SECTION,
+    upgradesSection: UPGRADES_SECTION,
+};
+/**
+ * The sub-nav: the static sections, then Feature flags and Upgrades. No row is
+ * flag-gated any more. Marketplace and Voice were removed from the product;
+ * Review is a capability tab of its own and graduated out of the flag system.
+ */
+export function projectSettingsSections(tI18nComplete) {
+    const source = tI18nComplete
+        ? localizeUiCatalog(PROJECT_SETTINGS_SOURCE, tI18nComplete, REMAINING_UI_TRANSLATION_KEYS)
+        : PROJECT_SETTINGS_SOURCE;
+    const sections = [...source.staticSections];
+    // Review is NOT a section here any more: it is a capability tab of its own
+    // (`capability-tab-routes.ts`, 2026-09-02). Listing it twice — as a tab and
+    // as a Settings section — was the leftover of restoring this page.
+    sections.push(source.featureFlagsSection, source.upgradesSection);
+    return sections;
+}
+/** Every section — for copy lookups and tests. */
+export const ALL_PROJECT_SETTINGS_SECTIONS = projectSettingsSections();
+/**
+ * The section a `?section=` value names. `general` is the default because it
+ * survives every flag and is what a person opening project settings most often
+ * wants.
+ */
+export const DEFAULT_PROJECT_SETTINGS_SECTION = 'general';
+export function parseProjectSettingsSection(raw) {
+    if (!raw)
+        return null;
+    const hit = ALL_PROJECT_SETTINGS_SECTIONS.find((s) => s.key === raw);
+    return hit ? hit.key : null;
+}
+/** The canonical link to one section. The default section carries no query. */
+export function projectSettingsSectionHref(projectId, key) {
+    return key === DEFAULT_PROJECT_SETTINGS_SECTION
+        ? capabilityTabHref(projectId, 'config')
+        : `${capabilityTabHref(projectId, 'config')}?section=${key}`;
+}
+/** The copy for one section, independent of any flag — used by pane headings. */
+export function projectSettingsSection(key) {
+    return ALL_PROJECT_SETTINGS_SECTIONS.find((s) => s.key === key);
+}

package/dist/customize/providers/provider-accordion.d.ts

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+import { type ProviderListRow } from './provider-connect.js';
+/** "In use · 3" / "Available" — the group label row, with an optional action. */
+export declare function AccordionGroupLabel({ label, action, className, }: {
+    label: string;
+    action?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** One line inside an expanded card: text on the left, its action on the right. */
+export declare function AccordionSubRow({ children, action, emphasis, }: {
+    children: ReactNode;
+    action?: ReactNode;
+    /** The switch row reads as a setting (ink), the rest as state (muted). */
+    emphasis?: boolean;
+}): import("react").JSX.Element;
+export interface InlineKeyFieldProps {
+    providerId: string;
+    envVar: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    onSave: () => void;
+    onCancel: () => void;
+    saving: boolean;
+    error?: string | null;
+}
+/**
+ * AK01's field: masked input, Save, ×. Enter saves, Esc cancels, Save stays
+ * off until there is something to save.
+ */
+export declare function InlineKeyField({ providerId, envVar, value, onValueChange, onSave, onCancel, saving, error, }: InlineKeyFieldProps): import("react").JSX.Element;
+export interface AccordionRowHeaderProps {
+    row: ProviderListRow;
+    meta: string;
+    expanded: boolean;
+    /** Collapsed, available, single-key row: hovering shows "Add key". */
+    addKeyHint: boolean;
+    onToggle: () => void;
+}
+/** The row's own line: logo, name, meta, chevron. A button with aria-expanded. */
+export declare function AccordionRowHeader({ row, meta, expanded, addKeyHint, onToggle, }: AccordionRowHeaderProps): import("react").JSX.Element;
+/** The collapsed row's surface; an open row becomes a bordered card. */
+export declare function AccordionRowFrame({ expanded, inline, children, }: {
+    expanded: boolean;
+    /** AK01: the row is a field right now — the board fills it. */
+    inline?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface ProviderAccordionProps {
+    projectId: string;
+    canWrite?: boolean;
+    enabled?: boolean;
+    className?: string;
+}
+export declare function ProviderAccordion({ projectId, canWrite, enabled, className, }: ProviderAccordionProps): import("react").JSX.Element;

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

@@ -0,0 +1,296 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `provider-accordion.tsx` — the Providers section of the QUICK Models dialog
+ * (`llm-provider-modal.tsx`). Paper boards PM01 (accordion rows) and AK01
+ * (Add key morphs into an inline field), page p-2O-0.
+ *
+ * The Models PAGE keeps its list + SplitSheet (`provider-connect.tsx` +
+ * `provider-sheet.tsx`). A 900px dialog has no room for a second column, so
+ * here a provider opens IN PLACE:
+ *
+ *  - **An API-key provider without a key** — "Add key" turns the row itself
+ *    into a field with Save and ×. Enter saves, Esc cancels. A provider that
+ *    needs several fields (Bedrock, Azure, Vertex) has no room on one row, so
+ *    it expands to the same multi-field form the sheet uses.
+ *  - **A connected provider** — the row expands into a card: its connections
+ *    (key, or ChatGPT sign-in and key for OpenAI), each with its own action,
+ *    and the "Enable {name} for this project" switch.
+ *
+ * Every write reuses the sheet's hooks (`useProviderKey`,
+ * `useSubscriptionSignIn`, `RemoveKeyDialog`), so the dialog and the page
+ * save, remove and sign in through the same code.
+ *
+ * The pieces under `// ─── View` are pure (props only) so they render under
+ * `renderToStaticMarkup`; `ProviderAccordion` owns every hook.
+ */
+import { ArrowSquareOutIcon, CaretDownIcon, MagnifyingGlassIcon, XIcon, } from '@phosphor-icons/react';
+import { useMemo, useState } from 'react';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '../../primitives/alert-dialog.js';
+import { Button } from '../../primitives/button.js';
+import { Input } from '../../primitives/input.js';
+import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.js';
+import Loading from '../../primitives/loading.js';
+import { Switch } from '../../primitives/switch.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { FIRST_CLASS_PROVIDER_IDS, PROVIDER_PAGE_SIZE, ProviderLogoStatus, connectedVia, providerMethod, supportsPooledProviderKey, useManagedProvider, usePooledProviderIds, useProviderMeta, } from './provider-connect.js';
+import { DeviceCode, ProviderKeyForm, RemoveKeyDialog, SUBSCRIPTION_BY_PROVIDER, useProviderKey, } from './provider-sheet.js';
+import { ChatGptSubscriptionConnect, useSubscriptionSignIn, } from '../sections/llm-provider/chatgpt-subscription-connect.js';
+import { useConnectedProviders } from '../sections/llm-provider/use-connected-providers.js';
+import { useLiveLlmProviderCatalog, useLlmProviderCatalogRevision, } from '../sections/llm-provider/use-live-catalog.js';
+import { orderProviderRows } from '../sections/llm-provider/utils.js';
+import { AccountSecretResourcesPanel } from '../sections/view/account-secret-resources-panel.js';
+import { useTranslations } from '../../i18n/index.js';
+import { LLM_PROVIDERS, LLM_PROVIDER_BY_ID } from '../../internal/lib/llm-providers.js';
+import { cn } from '../../internal/lib/utils.js';
+import { useModelAccess } from '@kortix/sdk/react';
+// ─── View ────────────────────────────────────────────────────────────────────
+/** "In use · 3" / "Available" — the group label row, with an optional action. */
+export function AccordionGroupLabel({ label, action, className, }) {
+    return (
+    // `px-3.5`: the same inset as the rows, so the group label starts on the
+    // logo tiles' left edge.
+    _jsxs("div", { className: cn('flex items-center justify-between px-3.5 pb-1.5', className), children: [_jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: label }), action] }));
+}
+/** One line inside an expanded card: text on the left, its action on the right. */
+export function AccordionSubRow({ children, action, emphasis = false, }) {
+    return (_jsxs("div", { "data-accordion-subrow": "", className: "border-border flex min-h-10 shrink-0 items-center justify-between gap-3 border-t", children: [_jsx("span", { className: cn('min-w-0 truncate text-xs', emphasis ? 'text-foreground' : 'text-muted-foreground'), children: children }), action] }));
+}
+/**
+ * AK01's field: masked input, Save, ×. Enter saves, Esc cancels, Save stays
+ * off until there is something to save.
+ */
+export function InlineKeyField({ providerId, envVar, value, onValueChange, onSave, onCancel, saving, error, }) {
+    const t = useTranslations('providerSheet');
+    const canSave = value.trim().length > 0 && !saving;
+    const onKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (canSave)
+                onSave();
+        }
+        if (event.key === 'Escape') {
+            // Esc belongs to the field first, the dialog second.
+            event.preventDefault();
+            event.stopPropagation();
+            onCancel();
+        }
+    };
+    return (_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", "data-inline-key-field": providerId, children: [_jsx(Input, { type: "password", autoFocus: true, autoComplete: "off", spellCheck: false, "data-1p-ignore": "", "data-lpignore": "true", "data-form-type": "other", "aria-label": envVar, "aria-invalid": error ? true : undefined, placeholder: envVar, value: value, disabled: saving, onChange: (event) => onValueChange(event.target.value), onKeyDown: onKeyDown, className: "h-8 min-w-0 flex-1 font-mono text-xs" }), _jsxs(Button, { type: "button", size: "xs", disabled: !canSave, onClick: onSave, className: "gap-1.5", children: [saving ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, t('save')] }), _jsx(Button, { type: "button", size: "icon-sm", variant: "ghost", "aria-label": t('cancel'), disabled: saving, onClick: onCancel, className: "text-muted-foreground shrink-0", children: _jsx(XIcon, { className: "size-3.5" }) })] }));
+}
+/** The row's own line: logo, name, meta, chevron. A button with aria-expanded. */
+export function AccordionRowHeader({ row, meta, expanded, addKeyHint, onToggle, }) {
+    const t = useTranslations('providerSheet');
+    return (_jsxs("button", { type: "button", "aria-expanded": expanded, "data-accordion-row": row.id, onClick: onToggle, className: "group/row flex w-full items-center gap-3 text-left outline-none", children: [_jsx(ProviderLogoStatus, { providerId: row.id, label: row.label, status: row.status, size: "medium" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: row.label }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: meta })] }), row.disabled ? (_jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: t('turnedOff') })) : null, addKeyHint ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "bg-surface border-border hidden shrink-0 rounded-sm border px-2.5 py-1 text-xs font-medium group-hover/row:inline-flex group-focus-visible/row:inline-flex", children: t('addKeyShort') }), _jsx(CaretDownIcon, { className: "text-muted-foreground size-3.5 shrink-0 group-hover/row:hidden group-focus-visible/row:hidden" })] })) : (_jsx(CaretDownIcon, { className: cn('text-muted-foreground size-3.5 shrink-0 transition-[rotate] duration-(--duration-normal) motion-reduce:transition-none', expanded && 'rotate-180') }))] }));
+}
+/** The collapsed row's surface; an open row becomes a bordered card. */
+export function AccordionRowFrame({ expanded, inline, children, }) {
+    return (_jsx("div", { "data-accordion-frame": expanded ? 'open' : inline ? 'inline' : 'closed', className: cn('rounded-lg', expanded
+            ? 'bg-surface border-border border'
+            : inline
+                ? 'bg-hover'
+                : 'hover:bg-hover focus-within:bg-hover transition-[background-color] duration-(--duration-normal)'), children: children }));
+}
+// ─── Container ───────────────────────────────────────────────────────────────
+/** A row being typed into: the AK01 field (one key) on the row's own line. */
+function InlineAddKeyRow({ projectId, entry, row, onDone, }) {
+    const t = useTranslations('providerSheet');
+    const key = useProviderKey(projectId, entry);
+    const envVar = entry.envVars[0];
+    return (_jsxs(AccordionRowFrame, { expanded: false, inline: true, children: [_jsxs("div", { className: "flex items-center gap-3 px-3.5 py-2.5", children: [_jsx(ProviderLogoStatus, { providerId: row.id, label: row.label, status: row.status, size: "medium" }), _jsxs("span", { className: "flex w-40 shrink-0 flex-col", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: row.label }), entry.helpUrl ? (_jsxs("a", { href: entry.helpUrl, target: "_blank", rel: "noopener noreferrer", className: "text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs transition-[color] duration-(--duration-normal)", children: [t('getAKey'), _jsx(ArrowSquareOutIcon, { className: "size-3 shrink-0" })] })) : null] }), _jsx(InlineKeyField, { providerId: entry.id, envVar: envVar, value: key.values[envVar] ?? '', onValueChange: (value) => key.setValue(envVar, value), saving: key.saving, error: key.error, onCancel: () => {
+                            key.reset();
+                            onDone();
+                        }, onSave: () => void key.save()?.then((ok) => ok && onDone()) })] }), key.error ? (_jsx("p", { role: "alert", className: "text-destructive px-3.5 pb-2.5 pl-15.5 text-xs text-pretty", children: key.error })) : null] }));
+}
+/** "Enable {name} for this project" — same rule and lock as the sheet's switch. */
+function EnableSubRow({ projectId, entry, canWrite, enabled, }) {
+    const t = useTranslations('providerSheet');
+    const tAccess = useTranslations('modelAccess');
+    const access = useModelAccess(enabled ? projectId : null);
+    const data = access.data;
+    if (!data?.enforced)
+        return null;
+    const on = !data.disabledProviders.includes(entry.id);
+    const locked = access.defaultProvider === entry.id && on;
+    const name = entry.id === 'kortix' ? tAccess('managedTitle') : entry.label;
+    return (_jsx(AccordionSubRow, { emphasis: true, action: _jsx(Switch, { checked: on, "aria-label": t('enableForProject', { name }), title: locked ? tAccess('defaultProviderHint') : undefined, disabled: !canWrite || access.isUpdating || locked, onCheckedChange: (next) => void access
+                .setEnabled({ target: 'provider', id: entry.id, enabled: next })
+                .catch((error) => errorToast(error instanceof Error ? error.message : tAccess('providerError'))), className: "shrink-0" }), children: t('enableForProject', { name }) }));
+}
+/** The key line inside an open card: saved / not added, and its actions. */
+function KeySubRow({ projectId, entry, saved, canWrite, }) {
+    const t = useTranslations('providerSheet');
+    const key = useProviderKey(projectId, entry);
+    const [editing, setEditing] = useState(false);
+    const [confirmRemove, setConfirmRemove] = useState(false);
+    const envVar = entry.envVars[0];
+    if (editing) {
+        return (_jsxs("div", { className: "border-border border-t py-1.5", children: [_jsx(InlineKeyField, { providerId: entry.id, envVar: envVar, value: key.values[envVar] ?? '', onValueChange: (value) => key.setValue(envVar, value), saving: key.saving, error: key.error, onCancel: () => {
+                        key.reset();
+                        setEditing(false);
+                    }, onSave: () => void key.save()?.then((ok) => ok && setEditing(false)) }), key.error ? (_jsx("p", { role: "alert", className: "text-destructive pt-1.5 text-xs text-pretty", children: key.error })) : null] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(AccordionSubRow, { action: canWrite ? (saved ? (_jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [_jsx(Button, { type: "button", size: "xs", variant: "ghost", onClick: () => setEditing(true), children: t('replace') }), _jsx(Button, { type: "button", size: "xs", variant: "ghost", className: "text-destructive hover:text-destructive", onClick: () => setConfirmRemove(true), children: t('removeKey') })] })) : (_jsx(Button, { type: "button", size: "xs", variant: "secondary", onClick: () => setEditing(true), children: t('addKeyShort') }))) : null, children: `${t('apiKey')} · ${saved ? t('savedKey') : t('notAdded')}` }), _jsx(RemoveKeyDialog, { open: confirmRemove, onOpenChange: setConfirmRemove, entry: entry, pending: key.removing, onConfirm: () => void key.remove()?.then((ok) => ok && setConfirmRemove(false)) })] }));
+}
+/** OpenAI / OpenCode Go: the sign-in line, and the device code while it runs. */
+function SignInSubRows({ projectId, entry, canWrite, }) {
+    const t = useTranslations('providerSheet');
+    const sub = SUBSCRIPTION_BY_PROVIDER[entry.id];
+    const sign = useSubscriptionSignIn({ projectId, kind: sub.kind, onConnected: () => undefined });
+    const [confirmDisconnect, setConfirmDisconnect] = useState(false);
+    const waiting = sign.phase === 'waiting';
+    const copyCode = () => {
+        if (!sign.challenge?.code)
+            return;
+        void navigator.clipboard?.writeText(sign.challenge.code).then(() => successToast(t('codeCopied')));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(AccordionSubRow, { action: !canWrite ? null : waiting ? (_jsx(Button, { type: "button", size: "xs", variant: "ghost", onClick: sign.cancel, children: t('cancel') })) : sign.connected ? (_jsx(Button, { type: "button", size: "xs", variant: "ghost", className: "text-muted-foreground", disabled: sign.disconnect.isPending, onClick: () => setConfirmDisconnect(true), children: t('disconnect') })) : (_jsx(Button, { type: "button", size: "xs", variant: "secondary", onClick: () => void sign.start(), children: t('signInTitle', { name: sub.name }) })), children: sign.connected
+                    ? `${t('subscription', { plan: sub.plan })} · ${t('signedIn')}`
+                    : waiting
+                        ? t('signingIn', { name: sub.name })
+                        : `${t('subscription', { plan: sub.plan })} · ${t('notConnected')}` }), waiting ? (_jsx("div", { className: "border-border border-t py-3", children: _jsx(DeviceCode, { name: sub.name, code: sign.challenge?.code ?? null, url: sign.challenge?.url ?? null, onCopy: copyCode }) })) : null, sign.error ? (_jsx("p", { role: "alert", className: "text-destructive pb-1.5 text-xs text-pretty", children: sign.error })) : null, _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') })] })] }) })] }));
+}
+/** What an open card holds, by how the provider connects. */
+function ExpandedBody({ projectId, entry, status, keyConnected, canWrite, enabled, pooled, }) {
+    const t = useTranslations('providerSheet');
+    const tPooled = useTranslations('pooledSecrets');
+    const key = useProviderKey(projectId, entry);
+    const method = providerMethod(entry);
+    const enable = status !== 'none' ? (_jsx(EnableSubRow, { projectId: projectId, entry: entry, canWrite: canWrite, enabled: enabled })) : null;
+    let content;
+    if (method === 'included' || (entry.envVars.length === 0 && !SUBSCRIPTION_BY_PROVIDER[entry.id])) {
+        content = _jsx(AccordionSubRow, { children: entry.hint });
+    }
+    else if (pooled.pooledSecretsEnabled && pooled.accountId && entry.id === 'openai') {
+        content = (_jsxs("div", { className: "border-border space-y-3 border-t py-3", children: [_jsx("p", { className: "text-foreground text-xs font-medium", children: tPooled('chatGptAccounts') }), _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 })] }));
+    }
+    else if (pooled.pooledSecretsEnabled && pooled.accountId && supportsPooledProviderKey(entry)) {
+        content = (_jsx("div", { className: "border-border border-t py-3", children: _jsx(AccountSecretResourcesPanel, { accountId: pooled.accountId, projectId: projectId, providerId: entry.id, providerName: entry.label, envVar: entry.envVars[0], canWrite: true }) }));
+    }
+    else if (SUBSCRIPTION_BY_PROVIDER[entry.id]) {
+        content = (_jsxs(_Fragment, { children: [_jsx(SignInSubRows, { projectId: projectId, entry: entry, canWrite: canWrite }), _jsx(KeySubRow, { projectId: projectId, entry: entry, saved: keyConnected, canWrite: canWrite })] }));
+    }
+    else if (entry.envVars.length > 1 && canWrite && !keyConnected) {
+        // AK01 has no room for three fields on one line: Bedrock / Azure / Vertex
+        // open to the sheet's multi-field form instead.
+        content = (_jsx("div", { className: "border-border border-t pt-3", children: _jsx(ProviderKeyForm, { entry: entry, values: key.values, onValueChange: key.setValue, saving: key.saving, error: key.error, onSave: () => void key.save() }) }));
+    }
+    else if (!canWrite && !keyConnected) {
+        content = _jsx(AccordionSubRow, { children: t('readOnly') });
+    }
+    else {
+        content = (_jsx(KeySubRow, { projectId: projectId, entry: entry, saved: keyConnected, canWrite: canWrite }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-0.5 pr-3 pb-3 pl-15.5", "data-accordion-body": entry.id, children: [content, enable] }));
+}
+export function ProviderAccordion({ projectId, canWrite = false, enabled = true, className, }) {
+    const t = useTranslations('providerSheet');
+    const common = useTranslations('common');
+    const tPooled = useTranslations('pooledSecrets');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const meta = useProviderMeta();
+    const access = useModelAccess(enabled ? projectId : null);
+    const managedProvider = useManagedProvider(enabled ? projectId : null);
+    const pooled = usePooledProviderIds(projectId, enabled);
+    useLiveLlmProviderCatalog(projectId, enabled);
+    const catalogRevision = useLlmProviderCatalogRevision();
+    const { connectedProviders, providerStateLoading } = useConnectedProviders(projectId, enabled);
+    const [search, setSearch] = useState('');
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [visibleCount, setVisibleCount] = useState(PROVIDER_PAGE_SIZE);
+    const [expandedId, setExpandedId] = useState(null);
+    const [addingId, setAddingId] = useState(null);
+    const connectedIds = useMemo(() => new Set(connectedProviders.map((provider) => provider.id)), [connectedProviders]);
+    const searchable = useMemo(() => [
+        ...(access.data?.enforced ? [managedProvider] : []),
+        ...LLM_PROVIDERS.filter((provider) => provider.id !== 'kortix'),
+        // The module catalog is replaced out of band; its revision triggers a fresh read.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    ], [access.data?.enforced, managedProvider, catalogRevision]);
+    const entries = useMemo(() => new Map(searchable.map((entry) => [entry.id, entry])), [searchable]);
+    const { inUse, available } = useMemo(() => {
+        const ordered = orderProviderRows({
+            providers: searchable,
+            firstClassIds: ['kortix', ...FIRST_CLASS_PROVIDER_IDS],
+            connectedIds,
+            search,
+        });
+        const rows = ordered.map((entry) => {
+            const method = providerMethod(entry);
+            return {
+                id: entry.id,
+                label: entry.label,
+                method,
+                modelCount: entry.models.length,
+                hint: entry.hint,
+                status: method === 'included'
+                    ? entry.models.length > 0 ? 'included' : 'none'
+                    : connectedIds.has(entry.id) ||
+                        pooled.pooledProviderIds.has(entry.id) ||
+                        (entry.id === 'openai' && connectedIds.has('codex'))
+                        ? 'connected'
+                        : 'none',
+                via: connectedVia(entry.id, connectedIds),
+                disabled: access.data?.enforced === true && access.data.disabledProviders.includes(entry.id),
+            };
+        });
+        return {
+            inUse: rows.filter((row) => row.status !== 'none'),
+            available: rows.filter((row) => row.status === 'none'),
+        };
+    }, [searchable, connectedIds, pooled.pooledProviderIds, search, access.data]);
+    const searching = search.trim().length > 0;
+    const visibleAvailable = available.slice(0, searching ? available.length : visibleCount);
+    const hiddenCount = available.length - visibleAvailable.length;
+    if (providerStateLoading || pooled.isLoading) {
+        return (_jsx("div", { className: "flex min-h-[200px] items-center justify-center", role: "status", "aria-label": tI18nComplete.raw('text7f619ff13aa8'), children: _jsx(Loading, { className: "text-muted-foreground size-4 shrink-0" }) }));
+    }
+    if (pooled.isError) {
+        return (_jsx(ErrorState, { size: "sm", title: tPooled('loadError'), action: _jsx(Button, { size: "sm", variant: "secondary", disabled: pooled.isFetching, onClick: pooled.refetch, children: common('retry') }) }));
+    }
+    /** One provider: a field (AK01), an open card (PM01), or a closed row. */
+    const renderRow = (row) => {
+        const entry = entries.get(row.id) ?? LLM_PROVIDER_BY_ID.get(row.id);
+        if (!entry)
+            return null;
+        const singleKey = entry.envVars.length === 1 &&
+            !SUBSCRIPTION_BY_PROVIDER[entry.id] &&
+            !(pooled.pooledSecretsEnabled && supportsPooledProviderKey(entry));
+        const keyConnected = connectedIds.has(entry.id);
+        if (addingId === row.id && singleKey && canWrite) {
+            return (_jsx(InlineAddKeyRow, { projectId: projectId, entry: entry, row: row, onDone: () => setAddingId(null) }, row.id));
+        }
+        const expanded = expandedId === row.id;
+        // AK01: an available single-key row has nothing to show when opened
+        // except a field — so it goes straight to the field.
+        const addsInline = row.status === 'none' && singleKey && canWrite;
+        return (_jsxs(AccordionRowFrame, { expanded: expanded, children: [_jsx("div", { className: cn(expanded ? 'px-3 py-2.5' : 'px-3.5 py-2.5'), children: _jsx(AccordionRowHeader, { row: row, meta: row.method === 'included' && row.modelCount === 0
+                            ? row.hint ?? ''
+                            : meta(row.method, row.modelCount, row.id, row.via), expanded: expanded, addKeyHint: addsInline, onToggle: () => {
+                            if (addsInline) {
+                                setExpandedId(null);
+                                setAddingId(row.id);
+                                return;
+                            }
+                            setAddingId(null);
+                            setExpandedId(expanded ? null : row.id);
+                        } }) }), expanded ? (_jsx(ExpandedBody, { projectId: projectId, entry: entry, status: row.status, keyConnected: keyConnected, canWrite: canWrite, enabled: enabled, pooled: pooled })) : null] }, row.id));
+    };
+    const searchButton = (_jsx(Button, { type: "button", size: "icon-xs", variant: "ghost", "aria-label": t('searchProviders'), "aria-pressed": searchOpen, className: "text-muted-foreground", onClick: () => {
+            if (searchOpen)
+                setSearch('');
+            setSearchOpen(!searchOpen);
+        }, children: _jsx(MagnifyingGlassIcon, { className: "size-3.5" }) }));
+    const empty = inUse.length === 0 && visibleAvailable.length === 0;
+    return (_jsxs("div", { className: cn('flex flex-col gap-1', className), "data-provider-accordion": "", children: [searchOpen ? (_jsx("div", { className: "pb-2", children: _jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { autoFocus: true, type: "text", placeholder: t('searchPlaceholder', { count: searchable.length }), autoComplete: "off", value: search, onChange: (event) => setSearch(event.target.value), onKeyDown: (event) => {
+                                if (event.key === 'Escape' && !search) {
+                                    event.stopPropagation();
+                                    setSearchOpen(false);
+                                }
+                            } }), _jsx(InputGroupSearchClear, { onClick: () => setSearch('') })] }) })) : null, pooled.pooledSecretsEnabled || !canWrite ? (_jsx("p", { className: "text-muted-foreground px-1 pb-2 text-xs text-pretty", children: pooled.pooledSecretsEnabled ? tPooled('sharedDescription') : t('readOnly') })) : null, empty ? (_jsx(EmptyState, { size: "sm", title: t('noMatch', { query: search.trim() }) })) : (_jsxs(_Fragment, { children: [inUse.length > 0 ? (_jsx(AccordionGroupLabel, { label: `${t('inUse')} · ${inUse.length}`, action: searchOpen ? null : searchButton })) : null, inUse.map(renderRow), visibleAvailable.length > 0 ? (_jsx(AccordionGroupLabel, { label: t('available'), className: inUse.length > 0 ? 'pt-3.5' : undefined, action: inUse.length === 0 && !searchOpen ? searchButton : null })) : null, visibleAvailable.map(renderRow)] })), hiddenCount > 0 ? (_jsxs("div", { className: "flex items-center gap-2 px-1 pt-1", "data-provider-load-more": "", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setVisibleCount((shown) => shown + PROVIDER_PAGE_SIZE), children: t('showMore') }), _jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: t('shownOf', {
+                            shown: inUse.length + visibleAvailable.length,
+                            total: inUse.length + available.length,
+                        }) })] })) : null] }));
+}

package/dist/customize/providers/provider-connect.d.ts

@@ -0,0 +1,106 @@
+import { type LlmProviderEntry } from '../../internal/lib/llm-providers.js';
+/**
+ * The three providers JAY-510 makes first-class: "Anthropic (Claude), OpenAI
+ * (ChatGPT), Google Gemini". They lead the Available group after Kortix; every
+ * other provider follows in catalogue order.
+ */
+export declare const FIRST_CLASS_PROVIDER_IDS: readonly ["anthropic", "openai", "google"];
+/** Providers whose sheet offers a subscription sign-in beside the API key. */
+export declare const SUBSCRIPTION_PROVIDER_IDS: ReadonlySet<string>;
+/**
+ * How many Available providers render before `Show more`, and how many each
+ * press adds. A query is a request for its matches — all of them — so a search
+ * renders every match whatever this window is.
+ */
+export declare const PROVIDER_PAGE_SIZE = 12;
+export declare function supportsPooledProviderKey(entry: LlmProviderEntry | undefined): boolean;
+export type ProviderStatus = 'included' | 'connected' | 'none';
+/** How a provider is connected: the row's meta and the sheet's subtitle. */
+export type ProviderMethod = 'included' | 'key' | 'signIn' | 'signInOrKey';
+export declare function providerMethod(entry: Pick<LlmProviderEntry, 'id' | 'envVars' | 'managed'>): ProviderMethod;
+/** Everything one provider row needs. Plain data — the view holds no hooks. */
+export interface ProviderListRow {
+    id: string;
+    label: string;
+    method: ProviderMethod;
+    modelCount: number;
+    hint?: string;
+    status: ProviderStatus;
+    /** How a connected two-way provider is connected (OpenAI only today). */
+    via?: ConnectedVia;
+    /** Inference turned off for this project; credentials are kept. */
+    disabled?: boolean;
+}
+/**
+ * The provider logo with its status on the tile's corner: a solid green check
+ * when the provider is usable (connected, or included with the plan). The list
+ * row and the sheet header draw the same one.
+ */
+export declare function ProviderLogoStatus({ providerId, label, status, size, }: {
+    providerId: string;
+    label: string;
+    status: ProviderStatus;
+    size?: 'small' | 'medium' | 'large';
+}): import("react").JSX.Element;
+/** The subscription plan a two-way provider signs in with. */
+export declare const SUBSCRIPTION_PLANS: Readonly<Record<string, string>>;
+/** How a connected two-way provider is connected. Undefined: not connected, or unknown. */
+export type ConnectedVia = 'signIn' | 'key' | 'both';
+/**
+ * OpenAI's ChatGPT sign-in connects as provider `codex`, its API key as
+ * `openai`, so the two can be told apart. Other providers report undefined.
+ */
+export declare function connectedVia(providerId: string, connectedIds: ReadonlySet<string>): ConnectedVia | undefined;
+/**
+ * "API key · 14 models" — the same line under the row and the sheet title.
+ * A connected two-way provider says HOW it is connected, not how it could be.
+ */
+export declare function useProviderMeta(): (method: ProviderMethod, modelCount: number, providerId?: string, via?: ConnectedVia) => string;
+export interface ProviderConnectViewProps {
+    /** Kortix and every provider with a credential. Never paged. */
+    inUse: ProviderListRow[];
+    /** Everything else, already windowed by the host. */
+    available: ProviderListRow[];
+    /** The CATALOGUE's size — what the search placeholder counts. */
+    totalCount: number;
+    /** Available rows matching but not rendered yet. `0` while searching. */
+    hiddenCount?: number;
+    onLoadMore?: () => void;
+    search: string;
+    onSearchChange: (value: string) => void;
+    /** The provider open in the host's sheet, if any. */
+    selectedId?: string | null;
+    onSelect: (providerId: string) => void;
+    /** One line above the list: read-only members and pooled-keys mode only. */
+    note?: string;
+    className?: string;
+}
+/** Presentational only — no hooks beyond translations, no fetching. */
+export declare function ProviderConnectView({ inUse, available, totalCount, hiddenCount, onLoadMore, search, onSearchChange, selectedId, onSelect, note, className, }: ProviderConnectViewProps): import("react").JSX.Element;
+/**
+ * Kortix's managed provider, built from the served model-picker catalogue —
+ * the same truth the model picker renders. Zero models (a free plan with no
+ * servable platform default) switches the hint to the upgrade story so both
+ * surfaces tell one story (KRTX-1482).
+ */
+export declare function useManagedProvider(projectId: string | null): LlmProviderEntry;
+/** Provider ids that hold a usable pooled (account-level) key for this project. */
+export declare function usePooledProviderIds(projectId: string, enabled: boolean): {
+    pooledSecretsEnabled: boolean;
+    accountId: string | undefined;
+    pooledProviderIds: Set<string | null>;
+    isLoading: boolean;
+    isError: boolean;
+    isFetching: boolean;
+    refetch: () => void;
+};
+export interface ProviderConnectProps {
+    projectId: string;
+    canWrite?: boolean;
+    /** Set while this surface is visible; drives the underlying queries. */
+    enabled?: boolean;
+    selectedId?: string | null;
+    onSelect: (providerId: string) => void;
+    className?: string;
+}
+export declare function ProviderConnect({ projectId, canWrite, enabled, selectedId, onSelect, className, }: ProviderConnectProps): import("react").JSX.Element;