@kortix/ui 0.0.0-stage → 0.14.4

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

@@ -0,0 +1,301 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `provider-sheet.tsx` — one provider, opened from the Providers list
+ * (`provider-connect.tsx`) into the host's `SplitSheet`: the Models page and
+ * the quick provider dialog both render it.
+ *
+ * What the sheet shows depends on how the provider connects:
+ *
+ *  - **Kortix** — included with the plan. No key; the models it serves.
+ *  - **An API-key provider** — the saved key with Replace, or the key form
+ *    with an explicit Save. One field per env var, in one bordered box when a
+ *    provider needs several (Bedrock's id / secret / region).
+ *  - **OpenAI and OpenCode Go** — two ways in. With nothing connected the sheet
+ *    asks which: a subscription sign-in (device code) or an API key. With
+ *    either connected it lists the connections and offers the other.
+ *  - **Pooled keys** (`pooled_provider_secrets`) — the account-level key
+ *    manager, as before.
+ *
+ * Saving is a button, not a blur. The old list saved a field when focus left
+ * its row, so a key went to the server with nothing on screen to say so.
+ *
+ * The pieces under `// ─── View` are pure (props only) so they render under
+ * `renderToStaticMarkup`; `ProviderSheet` owns every hook.
+ */
+import { ArrowSquareOutIcon, PlugsIcon as Unplug } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '../../primitives/alert-dialog.js';
+import { Badge } from '../../primitives/badge.js';
+import { Button } from '../../primitives/button.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import { Stepper, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, } from '../../primitives/stepper.js';
+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 { 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';
+import { ChatGptSubscriptionConnect, useSubscriptionSignIn, } from '../sections/llm-provider/chatgpt-subscription-connect.js';
+import { useConnectedProviders } from '../sections/llm-provider/use-connected-providers.js';
+import { envVarPlaceholder, formatTokenCount, prettyFieldLabel, providerDisconnectPlan, } from '../sections/llm-provider/utils.js';
+import { AccountSecretResourcesPanel } from '../sections/view/account-secret-resources-panel.js';
+import { useTranslations } from '../../i18n/index.js';
+import { LLM_PROVIDER_BY_ID } from '../../internal/lib/llm-providers.js';
+import { cn } from '../../internal/lib/utils.js';
+import { deleteProjectProviderOAuth, deleteProjectSecret, upsertProjectSecret } from '@kortix/sdk';
+import { qk, refreshProjectProviderState, useModelAccess } from '@kortix/sdk/react';
+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' },
+    'opencode-go': { kind: 'opencode-go', name: 'OpenCode', plan: 'OpenCode Go' },
+};
+/** Stable DOM id shared by a credential input and its label. */
+export function providerKeyFieldId(providerId, envVar) {
+    return `provider-key-${providerId}-${envVar}`;
+}
+// ─── View ────────────────────────────────────────────────────────────────────
+function Section({ title, aside, children, }) {
+    return (_jsxs("section", { className: "space-y-2.5", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: title }), aside] }), children] }));
+}
+/** Every model a provider serves. */
+export function ProviderModelsList({ models, connected, }) {
+    const t = useTranslations('providerSheet');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    if (models.length === 0)
+        return null;
+    return (_jsx(Section, { title: connected ? t('models', { count: models.length }) : t('whatUnlocks'), children: _jsx("ul", { className: "divide-border divide-y", children: models.map((model) => {
+                const ctx = formatTokenCount(model.limit?.context);
+                return (_jsxs("li", { className: "flex min-h-10 items-center justify-between gap-3 py-2", children: [_jsx("span", { className: cn('min-w-0 truncate text-sm', connected ? 'text-foreground' : 'text-muted-foreground'), children: model.name }), ctx ? (_jsxs("span", { className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: [ctx, " ", tI18nComplete.raw('text0230c6b1d833')] })) : null] }, model.id));
+            }) }) }));
+}
+/**
+ * Turn a provider's inference on or off for this project. Credentials stay
+ * either way. The project default's provider cannot be turned off until the
+ * default moves elsewhere.
+ */
+export function ProviderAccessRow({ name, enabled, isDefault, pending, canWrite, onChange, }) {
+    const tAccess = useTranslations('modelAccess');
+    const locked = isDefault && enabled;
+    const id = `provider-access-${name}`;
+    return (_jsxs("div", { className: "flex items-start justify-between gap-4", "data-provider-access-row": "", children: [_jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx("label", { htmlFor: id, className: "text-foreground block text-sm font-medium", children: tAccess('enableProvider', { name }) }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: locked ? tAccess('defaultProviderHint') : tAccess('credentialsHint') })] }), _jsx(Switch, { id: id, checked: enabled, disabled: !canWrite || pending || locked, onCheckedChange: onChange, className: "mt-0.5 shrink-0" })] }));
+}
+/**
+ * The key form: every field the provider needs, one Save for all of them.
+ * Several fields share one bordered box — they are one credential.
+ */
+export function ProviderKeyForm({ entry, values, onValueChange, onSave, onCancel, saving, error, }) {
+    const t = useTranslations('providerSheet');
+    const complete = entry.envVars.every((envVar) => (values[envVar] ?? '').trim().length > 0);
+    const multi = entry.envVars.length > 1;
+    const submit = (event) => {
+        event.preventDefault();
+        if (complete && !saving)
+            onSave();
+    };
+    return (_jsxs("form", { onSubmit: submit, className: "space-y-3", "data-provider-key-form": entry.id, children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("span", { className: "text-foreground text-sm font-medium", children: t('apiKey') }), !multi ? (_jsx("code", { className: "text-muted-foreground truncate font-mono text-xs", children: entry.envVars[0] })) : null] }), _jsx("div", { className: cn(multi && 'border-border divide-border bg-input divide-y overflow-hidden rounded-md border', multi && error && 'border-destructive'), children: entry.envVars.map((envVar, index) => (_jsxs("div", { children: [_jsxs("label", { htmlFor: providerKeyFieldId(entry.id, envVar), className: "sr-only", children: [entry.label, " ", prettyFieldLabel(envVar)] }), _jsx(InputGroup, { className: cn(multi && 'rounded-none border-0', !multi && error && 'border-destructive'), children: _jsx(InputGroupInput, { id: providerKeyFieldId(entry.id, envVar), type: "password", autoComplete: "off", spellCheck: false, autoFocus: index === 0, "data-1p-ignore": "", "data-lpignore": "true", "data-form-type": "other", "aria-invalid": error ? true : undefined, placeholder: entry.models && entry.authRequirement
+                                            ? envVarPlaceholder(entry, envVar)
+                                            : prettyFieldLabel(envVar), value: values[envVar] ?? '', onChange: (event) => onValueChange(envVar, event.target.value), className: cn(!multi && 'font-mono') }) })] }, envVar))) }), multi ? (_jsx("p", { className: "text-muted-foreground font-mono text-xs break-all", children: entry.envVars.join(' · ') })) : null, error ? (_jsx("p", { role: "alert", className: "text-destructive text-xs text-pretty", children: error })) : null] }), 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('getKey', { name: entry.label }), _jsx(ArrowSquareOutIcon, { className: "size-3 shrink-0" })] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "submit", size: "sm", disabled: !complete || saving, className: "gap-1.5", children: [saving ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, t('saveKey')] }), onCancel ? (_jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: onCancel, disabled: saving, children: t('cancel') })) : null] })] }));
+}
+/** A stored key. It can never be read back, so the field shows that one exists. */
+export function SavedKey({ envVars, onReplace, }) {
+    const t = useTranslations('providerSheet');
+    return (_jsxs("div", { className: "space-y-1.5", "data-provider-saved-key": "", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("span", { className: "text-foreground text-sm font-medium", children: t('apiKey') }), _jsx("code", { className: "text-muted-foreground truncate font-mono text-xs", children: envVars.join(' · ') })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "bg-muted text-muted-foreground flex h-9 min-w-0 flex-1 items-center rounded-md px-3 text-sm", children: [_jsx("span", { "aria-hidden": true, className: "truncate font-mono tracking-widest", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }), _jsx("span", { className: "sr-only", children: t('savedKey') })] }), onReplace ? (_jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: onReplace, children: t('replace') })) : null] })] }));
+}
+/** 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') })] }));
+}
+function hostOf(url) {
+    try {
+        return new URL(url).host;
+    }
+    catch {
+        return url;
+    }
+}
+/** The device-grant step: the code, where to enter it, and that we are waiting. */
+export function DeviceCode({ name, code, url, onCopy, }) {
+    const t = useTranslations('providerSheet');
+    return (_jsxs("div", { className: "space-y-5", "data-provider-device-code": "", children: [code && url ? (_jsxs("div", { className: "bg-muted/60 space-y-3 rounded-lg p-4", children: [_jsx("p", { className: "text-muted-foreground text-xs", children: t('yourCode') }), _jsx("div", { className: "flex flex-wrap items-center gap-1.5", "aria-label": code, children: Array.from(code).map((char, index) => char === '-' ? (_jsx("span", { "aria-hidden": true, className: "text-muted-foreground px-0.5", children: "\u2013" }, index)) : (_jsx("span", { "aria-hidden": true, className: "bg-background border-border text-foreground flex h-11 w-9 items-center justify-center rounded-md border font-mono text-lg font-medium", children: char }, index))) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", size: "sm", variant: "secondary", className: "gap-1.5", onClick: onCopy, children: [_jsx(Copy, { className: "size-3.5 shrink-0" }), t('copyCode')] }), _jsx(Button, { size: "sm", className: "gap-1.5", asChild: true, children: _jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", children: [t('openLink', { host: hostOf(url) }), _jsx(ArrowSquareOutIcon, { className: "size-3.5 shrink-0" })] }) })] })] })) : null, code ? (_jsx(Stepper, { orientation: "vertical", value: 1, count: 3, className: "flex flex-col", children: [t('step1', { name }), t('step2'), t('step3')].map((step, index) => (_jsxs("div", { className: "flex gap-3", children: [_jsxs(StepperItem, { step: index + 1, className: "items-center", children: [_jsx(StepperTrigger, { asChild: true, children: _jsx(StepperIndicator, { className: "tabular-nums", children: index + 1 }) }), _jsx(StepperSeparator, { className: "bg-border m-0 my-1 group-data-[orientation=vertical]/stepper:min-h-3" })] }), _jsx(StepperTitle, { className: cn('text-foreground pt-0.5 font-normal', index < 2 && 'pb-4'), children: step })] }, step))) })) : null, _jsxs("p", { role: "status", className: "text-muted-foreground flex items-center gap-2 text-xs", children: [_jsx(Loading, { className: "size-3.5 shrink-0" }), code ? t('waitingBrowser') : t('startingSignIn')] })] }));
+}
+/** One connection of a two-way provider: a sign-in or a key. */
+function ConnectionRow({ title, detail, action }) {
+    return (_jsxs("li", { className: "flex min-h-12 items-center gap-3 px-3 py-2", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm", children: title }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: detail })] }), action] }));
+}
+// ─── Container ───────────────────────────────────────────────────────────────
+/** Save and remove for one provider's key. */
+export function useProviderKey(projectId, entry) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const queryClient = useQueryClient();
+    const [values, setValues] = useState({});
+    const [error, setError] = useState(null);
+    const save = useMutation({
+        mutationFn: async (target) => {
+            // LLM provider credentials are ALWAYS project-wide — a per-user key is
+            // invisible to the gateway's shared-row resolution and every model turn
+            // dies with "No upstream configured" (2026-07-07 prod incident).
+            await Promise.all(target.envVars.map((envVar) => upsertProjectSecret(projectId, {
+                name: envVar,
+                value: (values[envVar] ?? '').trim(),
+                strategy: 'broker',
+                consumer: 'llm_gateway',
+            })));
+            return target;
+        },
+        onSuccess: (target) => {
+            successToast(tI18nComplete('textbc8686cf8d63', { value0: target.label }));
+            setValues({});
+            setError(null);
+            queryClient.invalidateQueries({ queryKey: qk.project.secrets(projectId) });
+            refreshProjectProviderState(queryClient, projectId, { expectProviderId: target.id });
+        },
+        onError: (err) => {
+            const message = err instanceof Error ? err.message : 'Failed to save credentials';
+            errorToast(message);
+            setError(message);
+        },
+    });
+    const remove = useMutation({
+        mutationFn: async (target) => {
+            const plan = providerDisconnectPlan(target);
+            await Promise.all([
+                ...(plan.oauthProvider ? [deleteProjectProviderOAuth(projectId, plan.oauthProvider)] : []),
+                ...plan.secretNames.map((name) => deleteProjectSecret(projectId, name)),
+            ]);
+            return target;
+        },
+        onSuccess: (target) => {
+            successToast(tI18nComplete('textb7e29198fc4e', { value0: target.label }));
+            queryClient.invalidateQueries({ queryKey: qk.project.secrets(projectId) });
+            refreshProjectProviderState(queryClient, projectId);
+        },
+        onError: (err) => errorToast(err instanceof Error ? err.message : tI18nComplete.raw('textb89e92d0b992')),
+    });
+    return {
+        values,
+        error,
+        setValue: (envVar, value) => {
+            setValues((current) => ({ ...current, [envVar]: value }));
+            // Typing is the retry: a red field must not argue with a corrected key.
+            setError(null);
+        },
+        reset: () => {
+            setValues({});
+            setError(null);
+        },
+        save: () => entry && save.mutateAsync(entry).then(() => true, () => false),
+        saving: save.isPending,
+        remove: () => entry && remove.mutateAsync(entry).then(() => true, () => false),
+        removing: remove.isPending,
+    };
+}
+export function RemoveKeyDialog({ open, onOpenChange, entry, pending, onConfirm, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    return (_jsx(ConfirmDialog, { open: open, onOpenChange: onOpenChange, title: tI18nComplete.raw('text088c3ffd67b6'), confirmLabel: tI18nComplete.raw('text81c45fd9b904'), confirmVariant: "destructive", confirmIcon: _jsx(Unplug, { className: "size-3.5 shrink-0" }), isPending: pending, onConfirm: onConfirm, description: _jsxs("span", { className: "text-xs", children: [tI18nComplete.raw('texta99dfc3d112a'), ' ', _jsx("span", { className: "text-foreground font-medium", children: entry.label }), entry.models.length > 0 && (_jsxs(_Fragment, { children: [' ', tI18nComplete.raw('textedfd52be9cbc'), " ", entry.models.length, ' ', tI18nComplete.raw('text9372c470eead'), entry.models.length === 1 ? '' : 's'] })), tI18nComplete.raw('text61c922500051')] }) }));
+}
+/** An API-key provider: the saved key or the form, and Remove in the footer. */
+function KeyBody({ projectId, entry, connected, canWrite, models }) {
+    const t = useTranslations('providerSheet');
+    const key = useProviderKey(projectId, entry);
+    const [editing, setEditing] = useState(false);
+    const [confirmRemove, setConfirmRemove] = useState(false);
+    const showForm = canWrite && (!connected || editing);
+    return (_jsxs(_Fragment, { children: [_jsxs(SplitSheetBody, { className: "space-y-7", children: [showForm ? (_jsx(ProviderKeyForm, { entry: entry, values: key.values, onValueChange: key.setValue, saving: key.saving, error: key.error, onCancel: connected
+                            ? () => {
+                                key.reset();
+                                setEditing(false);
+                            }
+                            : undefined, onSave: () => void key.save()?.then((ok) => ok && setEditing(false)) })) : connected ? (_jsx(SavedKey, { envVars: entry.envVars, onReplace: canWrite ? () => setEditing(true) : undefined })) : (_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: t('readOnly') })), models] }), _jsxs(SplitSheetFooter, { className: "justify-between", children: [connected && canWrite ? (_jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "text-destructive hover:text-destructive -ml-2", onClick: () => setConfirmRemove(true), children: t('removeKey') })) : (_jsx("span", {})), _jsx("span", { className: "text-muted-foreground text-xs", children: t('storedEncrypted') })] }), _jsx(RemoveKeyDialog, { open: confirmRemove, onOpenChange: setConfirmRemove, entry: entry, pending: key.removing, onConfirm: () => void key.remove()?.then((ok) => ok && setConfirmRemove(false)) })] }));
+}
+/**
+ * OpenAI / OpenCode Go: a subscription sign-in AND an API key, either or both.
+ * Nothing connected → the choice. Signing in → the device code. Anything
+ * connected → the connections, each removable, and the missing one offered.
+ */
+function SubscriptionBody({ projectId, entry, connected: keyConnected, canWrite, models }) {
+    const t = useTranslations('providerSheet');
+    const sub = SUBSCRIPTION_BY_PROVIDER[entry.id];
+    const sign = useSubscriptionSignIn({ projectId, kind: sub.kind, onConnected: () => undefined });
+    const key = useProviderKey(projectId, entry);
+    const [addingKey, setAddingKey] = useState(false);
+    const [confirmRemove, setConfirmRemove] = useState(false);
+    const [confirmDisconnect, setConfirmDisconnect] = useState(false);
+    const waiting = sign.phase === 'waiting';
+    const anyConnected = sign.connected || keyConnected;
+    const copyCode = () => {
+        if (!sign.challenge?.code)
+            return;
+        void navigator.clipboard?.writeText(sign.challenge.code).then(() => successToast(t('codeCopied')));
+    };
+    let body;
+    if (!canWrite) {
+        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 }));
+    }
+    else if (addingKey) {
+        body = (_jsx(ProviderKeyForm, { entry: entry, values: key.values, onValueChange: key.setValue, saving: key.saving, error: key.error, onCancel: () => {
+                key.reset();
+                setAddingKey(false);
+            }, 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) }));
+    }
+    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] }));
+    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`. */
+export function ProviderSheet({ projectId, providerId, canWrite, enabled = true, }) {
+    const t = useTranslations('providerSheet');
+    const tAccess = useTranslations('modelAccess');
+    const tPooled = useTranslations('pooledSecrets');
+    const meta = useProviderMeta();
+    const access = useModelAccess(enabled ? projectId : null);
+    const managed = useManagedProvider(enabled ? projectId : null);
+    const pooled = usePooledProviderIds(projectId, enabled);
+    const { connectedProviders } = useConnectedProviders(projectId, enabled);
+    const entry = providerId === 'kortix' ? managed : LLM_PROVIDER_BY_ID.get(providerId);
+    if (!entry)
+        return null;
+    const method = providerMethod(entry);
+    const connectedIdSet = new Set(connectedProviders.map((provider) => provider.id));
+    const keyConnected = connectedProviders.some((provider) => provider.id === entry.id);
+    const subscriptionConnected = connectedProviders.some((provider) => provider.id === (entry.id === 'openai' ? 'codex' : entry.id));
+    const status = method === 'included'
+        ? 'included'
+        : keyConnected || subscriptionConnected || pooled.pooledProviderIds.has(entry.id)
+            ? 'connected'
+            : 'none';
+    const accessData = access.data;
+    const accessRow = accessData?.enforced ? (_jsx(ProviderAccessRow, { name: entry.id === 'kortix' ? tAccess('managedTitle') : entry.label, enabled: !accessData.disabledProviders.includes(entry.id), isDefault: access.defaultProvider === entry.id, pending: access.isUpdating, canWrite: canWrite, onChange: (next) => void access
+            .setEnabled({ target: 'provider', id: entry.id, enabled: next })
+            .catch((error) => errorToast(error instanceof Error ? error.message : tAccess('providerError'))) })) : null;
+    const models = (_jsxs(_Fragment, { children: [status !== 'none' ? accessRow : null, _jsx(ProviderModelsList, { models: entry.models, connected: status !== 'none' })] }));
+    const bodyProps = { projectId, entry, connected: keyConnected, canWrite, models };
+    let content;
+    if (method === 'included') {
+        content = (_jsxs(SplitSheetBody, { className: "space-y-7", children: [_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: entry.hint }), models] }));
+    }
+    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 && 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] }));
+    }
+    else if (SUBSCRIPTION_BY_PROVIDER[entry.id]) {
+        content = _jsx(SubscriptionBody, { ...bodyProps });
+    }
+    else if (entry.envVars.length === 0) {
+        content = (_jsxs(SplitSheetBody, { className: "space-y-7", children: [_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: entry.hint }), models] }));
+    }
+    else {
+        content = _jsx(KeyBody, { ...bodyProps });
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(SplitSheetHeader, { closeLabel: t('close'), className: "px-5 py-4", children: _jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ProviderLogoStatus, { providerId: entry.id, label: entry.label, status: status, size: "large" }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx(SplitSheetTitle, { className: "truncate text-base font-semibold", children: entry.label }), _jsx(SplitSheetDescription, { children: meta(method, entry.models.length, entry.id, connectedVia(entry.id, connectedIdSet)) })] })] }) }), _jsx("div", { className: "contents", children: content }, entry.id)] }));
+}

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

@@ -0,0 +1,29 @@
+/**
+ * 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
+ * one section editor-tier (`project.secret.read/write`, deliberately not
+ * member baseline — see `packages/ui/src/internal/lib/project-actions.ts`'s header comment) rather
+ * than reusing a broader settings leaf, and that gate travels with the
+ * component itself, unchanged by this move.
+ *
+ * `SecretsView` calls `useSettingsNav()` internally (e.g. a cross-link to
+ * Models when a secret backs a provider key), which throws outside a
+ * provider — `useStandaloneCapabilityNav` is that provider's value for a
+ * page that is not the overlay or `/config`.
+ *
+ * No chrome of its own. `SecretsView` renders `CapabilityPageShell` — the same
+ * shell Connectors, Agents, Skills and Triggers use — so Secrets is the same
+ * `max-w-5xl` column with the same heading and header group as its four
+ * sibling tabs. That shell is also the route's scroll container
+ * (`min-h-0 flex-1 overflow-y-auto`), which the `(capabilities)` layout
+ * requires: it is a bounded `h-svh` column, and something inside it has to
+ * scroll or the tab bar above scrolls away with the content.
+ *
+ * This wrapper used to bring its own scroll box and its own `max-w-2xl`
+ * column, which is what made this tab read as a different product from the
+ * four beside it — the same wrapper `triggers-page.tsx` shed for the same
+ * reason.
+ */
+export declare function SecretsPage({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStandaloneCapabilityNav } from '../shared/standalone-settings-nav.js';
+import { SecretsView } from '../sections/view/secrets-view.js';
+import { SettingsNavProvider } from '../../internal/layout/settings-nav-context.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
+ * one section editor-tier (`project.secret.read/write`, deliberately not
+ * member baseline — see `packages/ui/src/internal/lib/project-actions.ts`'s header comment) rather
+ * than reusing a broader settings leaf, and that gate travels with the
+ * component itself, unchanged by this move.
+ *
+ * `SecretsView` calls `useSettingsNav()` internally (e.g. a cross-link to
+ * Models when a secret backs a provider key), which throws outside a
+ * provider — `useStandaloneCapabilityNav` is that provider's value for a
+ * page that is not the overlay or `/config`.
+ *
+ * No chrome of its own. `SecretsView` renders `CapabilityPageShell` — the same
+ * shell Connectors, Agents, Skills and Triggers use — so Secrets is the same
+ * `max-w-5xl` column with the same heading and header group as its four
+ * sibling tabs. That shell is also the route's scroll container
+ * (`min-h-0 flex-1 overflow-y-auto`), which the `(capabilities)` layout
+ * requires: it is a bounded `h-svh` column, and something inside it has to
+ * scroll or the tab bar above scrolls away with the content.
+ *
+ * This wrapper used to bring its own scroll box and its own `max-w-2xl`
+ * column, which is what made this tab read as a different product from the
+ * four beside it — the same wrapper `triggers-page.tsx` shed for the same
+ * reason.
+ */
+export function SecretsPage({ projectId }) {
+    const settingsNav = useStandaloneCapabilityNav(projectId, 'secrets');
+    return (_jsx(SettingsNavProvider, { value: settingsNav, children: _jsx(SecretsView, { projectId: projectId }) }));
+}

package/dist/customize/sections/add-account-fields.d.ts

@@ -0,0 +1,39 @@
+import type { NewAccountDraft } from './view/connector-connections.js';
+/**
+ * The Add account form: a name, and who can use the account. One form for
+ * Customize → Connectors and for the chat connect dialog, so both create the
+ * same account the same way. The parent owns the draft and the submit.
+ */
+export declare function AddAccountFields({ projectId, value, onChange, labelTaken, canManageConnections, accountId, everyoneLabel, hint, disabled, autoFocus, }: {
+    projectId: string;
+    value: NewAccountDraft;
+    onChange: (next: NewAccountDraft) => void;
+    /** The name is one an account of the same owner already uses. */
+    labelTaken: boolean;
+    canManageConnections: boolean;
+    accountId: string | null | undefined;
+    /** "Everyone in {project}". */
+    everyoneLabel: string;
+    /** The line under the name when it is free. */
+    hint: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+}): import("react").JSX.Element;
+/**
+ * "Who can use it": only you, everyone in the project, or specific people and
+ * groups. One control for a connector account and a project secret value, so
+ * both are shared the same way (connection-access.ts / secret-audience.ts).
+ */
+export declare function AudienceFields({ projectId, value, onChange, canShare, accountId, everyoneLabel, shareRequiresLabel, disabled, }: {
+    projectId: string;
+    value: Pick<NewAccountDraft, 'audience' | 'picked'>;
+    onChange: (next: Pick<NewAccountDraft, 'audience' | 'picked'>) => void;
+    /** May the caller share with others (everyone, or picked people)? */
+    canShare: boolean;
+    accountId: string | null | undefined;
+    /** "Everyone in {project}". */
+    everyoneLabel: string;
+    /** Why sharing is off, shown when `canShare` is false. */
+    shareRequiresLabel?: string;
+    disabled?: boolean;
+}): import("react").JSX.Element;

package/dist/customize/sections/add-account-fields.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Field, FieldDescription, FieldLabel } from '../../primitives/field.js';
+import { Input } from '../../primitives/input.js';
+import { RadioGroup, RadioGroupItem } from '../../primitives/radio-group.js';
+import { PrincipalPicker } from '../../access/access/principal-picker.js';
+import { useTranslations } from '../../i18n/index.js';
+/**
+ * The Add account form: a name, and who can use the account. One form for
+ * Customize → Connectors and for the chat connect dialog, so both create the
+ * same account the same way. The parent owns the draft and the submit.
+ */
+export function AddAccountFields({ projectId, value, onChange, labelTaken, canManageConnections, accountId, everyoneLabel, hint, disabled = false, autoFocus = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tSharing = useTranslations('accessSharing');
+    const id = useId();
+    const label = value.label.trim();
+    return (_jsxs(_Fragment, { children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: `${id}-label`, children: tI18nComplete.raw('textdcd1d5223f73') }), _jsx(Input, { id: `${id}-label`, value: value.label, onChange: (e) => onChange({ ...value, label: e.target.value }), placeholder: tI18nComplete.raw('text945ce03ec79f'), maxLength: 255, autoFocus: autoFocus, "aria-invalid": labelTaken || undefined, disabled: disabled }), labelTaken ? (_jsx(FieldDescription, { className: "text-destructive", role: "alert", children: tSharing('nameTaken', { label }) })) : (_jsx(FieldDescription, { children: hint }))] }), _jsx(AudienceFields, { projectId: projectId, value: value, onChange: (next) => onChange({ ...value, ...next }), canShare: canManageConnections, accountId: accountId, everyoneLabel: everyoneLabel, shareRequiresLabel: tSharing('shareRequiresManage'), disabled: disabled })] }));
+}
+/**
+ * "Who can use it": only you, everyone in the project, or specific people and
+ * groups. One control for a connector account and a project secret value, so
+ * both are shared the same way (connection-access.ts / secret-audience.ts).
+ */
+export function AudienceFields({ projectId, value, onChange, canShare, accountId, everyoneLabel, shareRequiresLabel, disabled = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tSharing = useTranslations('accessSharing');
+    const id = useId();
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(FieldLabel, { children: tSharing('whoCanUse') }), _jsxs(RadioGroup, { value: value.audience, onValueChange: (next) => onChange({ ...value, audience: next }), className: "space-y-2", children: [_jsx(RadioGroupItem, { value: "private", id: `${id}-private`, label: tSharing('onlyYou'), description: tSharing('onlyYouDescription'), size: "lg", variant: "outline", disabled: disabled }), _jsx(RadioGroupItem, { value: "project", id: `${id}-project`, label: everyoneLabel, description: tSharing('everyoneMeta'), size: "lg", variant: "outline", disabled: disabled || !canShare }), _jsx(RadioGroupItem, { value: "members", id: `${id}-members`, label: tSharing('specificPeople'), description: tSharing('specificPeopleDescription'), size: "lg", variant: "outline", disabled: disabled || !canShare || !accountId })] }), canShare || !shareRequiresLabel ? null : (_jsx("p", { className: "text-muted-foreground text-xs", children: shareRequiresLabel })), value.audience === 'members' ? (_jsx(PrincipalPicker, { scope: { kind: 'project', projectId }, selection: "multi", kinds: ['member', 'group', 'agent'], value: {
+                    memberIds: value.picked.memberIds,
+                    groupIds: value.picked.groupIds,
+                    agentIds: value.picked.agentIds ?? [],
+                    inviteEmails: [],
+                }, onChange: (next) => onChange({
+                    ...value,
+                    picked: { memberIds: next.memberIds, groupIds: next.groupIds, agentIds: next.agentIds ?? [] },
+                }), disabled: disabled, autoFocus: false, emptyLabel: tI18nComplete.raw('textd2600c68a9ff'), allExcludedLabel: tI18nComplete.raw('textf68d7561db3d') })) : null, value.audience === 'members' && (value.picked.agentIds?.length ?? 0) > 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: tSharing('agentShareHint') })) : null] }));
+}

package/dist/customize/sections/component/byo-wizard-modal.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export declare function ByoWizardModal({ platform, open, onOpenChange, step, setStep, count, header, steps, children, footer, }: {
+    platform: 'teams' | 'slack';
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    step: 1 | 2 | 3;
+    setStep: (step: 1 | 2 | 3) => void;
+    count: number;
+    header: ReactNode;
+    steps: ReactNode;
+    children: ReactNode;
+    footer: ReactNode;
+}): import("react").JSX.Element;

package/dist/customize/sections/component/byo-wizard-modal.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, ModalContent } from '../../../primitives/modal.js';
+import { Stepper } from '../../../primitives/stepper.js';
+export function ByoWizardModal({ platform, open, onOpenChange, step, setStep, count, header, steps, children, footer, }) {
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsxs(ModalContent, { variant: "base", className: platform === 'teams'
+                ? 'space-y-0 overflow-hidden lg:h-auto lg:max-w-4xl lg:flex-row'
+                : 'space-y-0 overflow-hidden lg:max-w-4xl lg:flex-row', children: [_jsxs("aside", { className: platform === 'teams'
+                        ? 'bg-sidebar flex flex-col gap-6 border-b p-6 lg:w-72 lg:shrink-0 lg:border-e lg:border-b-0'
+                        : 'flex flex-col gap-6 border-b bg-sidebar p-5 lg:w-72 lg:shrink-0 lg:border-e lg:border-b-0', children: [header, _jsx(Stepper, { orientation: "vertical", count: count, value: step, onValueChange: (v) => {
+                                if (v === 1 || v === 2 || v === 3)
+                                    setStep(v);
+                            }, className: "flex flex-col", children: steps })] }), _jsxs("section", { className: platform === 'teams'
+                        ? 'flex min-w-0 flex-1 flex-col'
+                        : 'flex min-w-0 flex-1 flex-col lg:min-h-176', children: [children, _jsx("footer", { className: platform === 'teams'
+                                ? 'flex items-center justify-between gap-4 border-t px-6 py-4'
+                                : 'flex items-center justify-between gap-3 border-t px-6 py-4', children: footer })] })] }) }));
+}

package/dist/customize/sections/component/channel-connect-hero.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+/**
+ * The connect hero both chat platforms share (`slack-connect-card.tsx`,
+ * `teams-connect-card.tsx`): the logo tile, title, lede and actions on the
+ * left, and on the right a mock of the platform where a teammate @mentions the
+ * agent and it answers. The mock is the pitch, so the copy column stays short.
+ * Below `md` the mock hides and the copy column takes the whole card.
+ *
+ * Two install paths, one shape. With the managed Kortix app (`oneClickUrl`)
+ * the primary button installs it and the bring-your-own wizard is a quiet
+ * link under it. Without it, the wizard is the primary button, so the
+ * self-hosted route reads as a deliberate choice, not a missing feature.
+ */
+export declare function ChannelConnectHero({ logo, title, lede, preview, canWrite, oneClickUrl, oneClickLabel, ownAppLabel, setupLabel, readOnlyNote, onOwnApp, }: {
+    logo: ReactNode;
+    title: string;
+    lede: string;
+    preview: ReactNode;
+    canWrite: boolean;
+    oneClickUrl: string | null;
+    oneClickLabel: string;
+    ownAppLabel: string;
+    /** The primary button's label when there is no managed app to install. */
+    setupLabel: string;
+    readOnlyNote: string;
+    onOwnApp: () => void;
+}): import("react").JSX.Element;

package/dist/customize/sections/component/channel-connect-hero.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../primitives/button.js';
+import { CaretRightIcon } from '@phosphor-icons/react';
+import { UiLink as Link } from '../../../providers/ui-provider.js';
+/**
+ * The connect hero both chat platforms share (`slack-connect-card.tsx`,
+ * `teams-connect-card.tsx`): the logo tile, title, lede and actions on the
+ * left, and on the right a mock of the platform where a teammate @mentions the
+ * agent and it answers. The mock is the pitch, so the copy column stays short.
+ * Below `md` the mock hides and the copy column takes the whole card.
+ *
+ * Two install paths, one shape. With the managed Kortix app (`oneClickUrl`)
+ * the primary button installs it and the bring-your-own wizard is a quiet
+ * link under it. Without it, the wizard is the primary button, so the
+ * self-hosted route reads as a deliberate choice, not a missing feature.
+ */
+export function ChannelConnectHero({ logo, title, lede, preview, canWrite, oneClickUrl, oneClickLabel, ownAppLabel, setupLabel, readOnlyNote, onOwnApp, }) {
+    return (_jsxs("div", { className: "bg-popover flex overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "flex w-full shrink-0 flex-col justify-center gap-5 px-7 py-8 md:w-80", children: [_jsx("span", { className: "bg-background flex size-9 shrink-0 items-center justify-center rounded-md border", children: logo }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("h3", { className: "text-foreground text-xl font-medium tracking-tight text-balance", children: title }), _jsx("p", { className: "text-muted-foreground text-sm leading-relaxed text-pretty", children: lede })] }), canWrite ? (_jsx("div", { className: "flex flex-col items-start gap-3", children: oneClickUrl ? (_jsxs(_Fragment, { children: [_jsx(Button, { className: "transition-transform active:scale-96", asChild: true, children: _jsx(Link, { href: oneClickUrl, target: "_blank", rel: "noopener noreferrer", children: oneClickLabel }) }), _jsxs("button", { type: "button", onClick: onOwnApp, className: "text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm transition-colors", children: [ownAppLabel, _jsx(CaretRightIcon, { className: "size-3 shrink-0" })] })] })) : (_jsx(Button, { className: "transition-transform active:scale-96", onClick: onOwnApp, children: setupLabel })) })) : (_jsx("p", { className: "text-muted-foreground text-xs", children: readOnlyNote }))] }), _jsx("div", { "aria-hidden": true, className: "bg-muted/50 hidden min-w-0 flex-1 border-s py-7 ps-7 select-none md:flex", children: _jsx("div", { className: "bg-background flex min-h-72 min-w-0 flex-1 overflow-hidden rounded-l-lg border-y border-s shadow-xs", children: preview }) })] }));
+}

package/dist/customize/sections/component/channel-row.d.ts

@@ -0,0 +1,29 @@
+export declare function ChannelRow({ icon, name, connected, 
+/** Shown when connected — the workspace, tenant, or address we're bound to. */
+detail, 
+/** Shown when NOT connected — what this channel gets you, in one line. */
+pitch, badge, actions, }: {
+    icon: React.ReactNode;
+    name: string;
+    connected: boolean;
+    detail?: string | null;
+    pitch: string;
+    badge?: React.ReactNode;
+    actions?: React.ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Disconnect as a two-step inline swap (Disconnect → Cancel | Disconnect).
+ *
+ * The design system requires a confirmation before any destructive mutation
+ * and sanctions this inline swap as the one alternative to `ConfirmDialog` —
+ * it is the pattern the channel rows already used, kept deliberately so a
+ * misclick in a list of three rows can never sever a live integration.
+ */
+export declare function ChannelDisconnectButton({ pending, onConfirm, }: {
+    pending: boolean;
+    onConfirm: (done: () => void) => void;
+}): import("react").JSX.Element;
+/** "Advanced" / "Experimental" style marker for a row or panel heading. */
+export declare function ChannelHintBadge({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;