@kortix/ui 0.0.0-stage → 0.14.4

package/dist/customize/sections/llm-provider/custom-provider-form.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../primitives/button.js';
+import { Field, FieldDescription, FieldLabel } from '../../../primitives/field.js';
+import { InfoBanner } from '../../../primitives/info-banner.js';
+import { Input } from '../../../primitives/input.js';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from '../../../primitives/input-group.js';
+import Loading from '../../../primitives/loading.js';
+import { successToast } from '../../../primitives/toast.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { upsertProjectSecret } from '@kortix/sdk';
+import { qk, useCustomLlmProviders } from '@kortix/sdk/react';
+import { EyeIcon as Eye, EyeSlashIcon as EyeSlash, WarningIcon as TriangleAlert, } from '@phosphor-icons/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+/** One stacked field: label (and optional hint) above the control. */
+function FormField({ htmlFor, label, hint, children, }) {
+    return (_jsxs(Field, { className: "min-w-0 flex-1 gap-1.5", children: [_jsx(FieldLabel, { htmlFor: htmlFor, className: "text-foreground text-sm font-medium", children: label }), children, hint ? _jsx(FieldDescription, { className: "text-xs text-pretty", children: hint }) : null] }));
+}
+/** The secret name the form writes for a provider id — shown under the key field. */
+export function customProviderSecretName(providerId) {
+    return `CUSTOM_${providerId.trim().toUpperCase().replace(/-/g, '_')}_API_KEY`;
+}
+/** The API's provider id rule (`^[a-z0-9][a-z0-9_-]{0,63}$`). */
+const PROVIDER_ID_PATTERN = /^[a-z0-9][a-z0-9_-]{0,63}$/;
+/**
+ * The endpoint, models and optional key of one custom provider.
+ *
+ * The provider is stored in Kortix (`PUT /custom-providers/:id`) and the
+ * gateway serves its models; the key is the project secret
+ * `CUSTOM_<ID>_API_KEY`. The PUT replaces the whole model list, so saving an
+ * id that already exists keeps its other models and adds or renames this one.
+ */
+export function CustomProviderForm({ projectId, initialId = '', onSaved, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const t = useTranslations('customProvider');
+    const queryClient = useQueryClient();
+    const custom = useCustomLlmProviders(projectId);
+    const [form, setForm] = useState({
+        providerId: initialId,
+        name: '',
+        baseURL: '',
+        apiKey: '',
+        modelId: '',
+        modelName: '',
+    });
+    const [error, setError] = useState(null);
+    const [revealKey, setRevealKey] = useState(false);
+    const save = useMutation({
+        mutationFn: async () => {
+            const providerId = form.providerId.trim().toLowerCase();
+            const name = form.name.trim();
+            const baseUrl = form.baseURL.trim();
+            const apiKey = form.apiKey.trim();
+            const model = { id: form.modelId.trim(), name: form.modelName.trim() };
+            if (!providerId || !name || !baseUrl) {
+                throw new Error('Provider ID, name, and base URL are required');
+            }
+            if (!PROVIDER_ID_PATTERN.test(providerId)) {
+                throw new Error('Provider ID can only use letters, numbers, dashes, underscores');
+            }
+            if (!/^https?:\/\//.test(baseUrl)) {
+                throw new Error('Base URL must start with http:// or https://');
+            }
+            if (!model.id || !model.name) {
+                throw new Error('At least one model (ID + name) is required');
+            }
+            if (/\s/.test(model.id)) {
+                throw new Error('Model ID cannot contain spaces');
+            }
+            const existing = custom.providers.find((p) => p.id === providerId && p.configured);
+            await custom.save(providerId, {
+                name,
+                base_url: baseUrl,
+                models: [...(existing?.models ?? []).filter((m) => m.id !== model.id), model],
+            });
+            if (apiKey) {
+                // LLM provider credentials are always project-wide (see
+                // api-key-connect-form.tsx) — a per-user key is invisible to the
+                // gateway's shared-row resolution and breaks every model turn.
+                await upsertProjectSecret(projectId, {
+                    name: customProviderSecretName(providerId),
+                    value: apiKey,
+                    strategy: 'broker',
+                    consumer: 'llm_gateway',
+                });
+            }
+            return providerId;
+        },
+        onSuccess: (providerId) => {
+            successToast(t('saved'));
+            queryClient.invalidateQueries({ queryKey: qk.project.secrets(projectId) });
+            queryClient.invalidateQueries({ queryKey: qk.project.customLlmProviders(projectId) });
+            onSaved?.(providerId);
+        },
+        onError: (err) => setError(err instanceof Error ? err.message : t('saveFailed')),
+    });
+    function setField(key, value) {
+        setForm((current) => ({ ...current, [key]: value }));
+        if (error)
+            setError(null);
+    }
+    function handleSubmit(event) {
+        event.preventDefault();
+        setError(null);
+        save.mutate();
+    }
+    return (_jsx("div", { className: "@container/custom-provider", children: _jsx("div", { className: "flex flex-col gap-11 @4xl/custom-provider:flex-row @4xl/custom-provider:items-start", children: _jsxs("form", { onSubmit: handleSubmit, className: "flex w-full flex-col gap-5 @4xl/custom-provider:w-141 @4xl/custom-provider:shrink-0", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h2", { className: "text-foreground text-base font-semibold", children: tI18nComplete.raw('text3880a3aae4e6') }), _jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: t('formIntro') }), _jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: t('gatewayNote') })] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(FormField, { htmlFor: "custom-display-name", label: tI18nComplete.raw('text2b7f6a84de91'), children: _jsx(Input, { id: "custom-display-name", type: "text", value: form.name, onChange: (e) => setField('name', e.target.value), placeholder: tI18nComplete.raw('text0d41acb2175b'), className: "font-normal", autoFocus: true }) }), _jsx(FormField, { htmlFor: "custom-provider-id", label: tI18nComplete.raw('text7511080b05b9'), children: _jsx(Input, { id: "custom-provider-id", type: "text", value: form.providerId, onChange: (e) => setField('providerId', e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, '')), placeholder: tI18nComplete.raw('texta39b6c664e82'), className: "font-mono font-normal" }) })] }), _jsx(FormField, { htmlFor: "custom-base-url", label: tI18nComplete.raw('text70589413a3c9'), hint: t('baseUrlHint'), children: _jsx(Input, { id: "custom-base-url", type: "text", value: form.baseURL, onChange: (e) => setField('baseURL', e.target.value), placeholder: "https://api.example.com/v1", className: "font-mono font-normal" }) }), _jsxs(FormField, { htmlFor: "custom-api-key", label: _jsxs("span", { className: "flex items-baseline gap-1.5", children: [tI18nComplete.raw('text16f0ee47f993'), _jsx("span", { className: "text-muted-foreground text-xs font-normal", children: t('optional') })] }), children: [_jsxs(InputGroup, { children: [_jsx(InputGroupInput, { id: "custom-api-key", 
+                                        // Masked by default, like every other credential field in this
+                                        // app — a pasted key used to sit in plaintext on screen.
+                                        type: revealKey ? 'text' : 'password', autoComplete: "off", spellCheck: false, "data-1p-ignore": "", "data-lpignore": "true", "data-form-type": "other", value: form.apiKey, onChange: (e) => setField('apiKey', e.target.value), placeholder: tI18nComplete.raw('textb009c6c5299f'), className: "font-mono font-normal" }), form.apiKey ? (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", onClick: () => setRevealKey((current) => !current), title: revealKey ? 'Hide' : 'Show', "aria-label": revealKey
+                                                ? tI18nComplete.raw('text3d0d8c59beb7')
+                                                : tI18nComplete.raw('textcb0b50a0d111'), "aria-pressed": revealKey, className: "text-muted-foreground hover:text-foreground", children: revealKey ? _jsx(EyeSlash, { className: "size-3.5" }) : _jsx(Eye, { className: "size-3.5" }) }) })) : null] }), form.providerId.trim() ? (_jsx("code", { className: "text-muted-foreground font-mono text-xs break-all", children: customProviderSecretName(form.providerId) })) : null] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(FormField, { htmlFor: "custom-model-id", label: tI18nComplete.raw('text089ef2b6dbb3'), children: _jsx(Input, { id: "custom-model-id", type: "text", value: form.modelId, onChange: (e) => setField('modelId', e.target.value), placeholder: tI18nComplete.raw('text34d316295094'), className: "font-mono font-normal" }) }), _jsx(FormField, { htmlFor: "custom-model-name", label: tI18nComplete.raw('texta3c3370cc732'), children: _jsx(Input, { id: "custom-model-name", type: "text", value: form.modelName, onChange: (e) => setField('modelName', e.target.value), placeholder: tI18nComplete.raw('textb70354a1faae'), className: "font-normal" }) })] }), error ? (_jsx(InfoBanner, { tone: "destructive", icon: TriangleAlert, title: tI18nComplete.raw('text464de08899db'), children: error })) : null, _jsx("div", { className: "flex gap-2 pt-1", children: _jsx(Button, { type: "submit", size: "sm", disabled: save.isPending, className: "gap-1.5", children: save.isPending ? (_jsxs(_Fragment, { children: [_jsx(Loading, { className: "size-3.5 shrink-0" }), t('saving')] })) : (t('saveProvider')) }) })] }) }) }));
+}

package/dist/customize/sections/llm-provider/custom-provider-panel.d.ts

@@ -0,0 +1,12 @@
+import { type CustomLlmProvider } from '@kortix/sdk';
+/** One saved custom provider: a configured row opens the sheet, a legacy row
+ *  pre-fills the form. */
+export declare function CustomProviderRow({ provider, selected, onSelect, }: {
+    provider: CustomLlmProvider;
+    selected: boolean;
+    onSelect: (provider: CustomLlmProvider) => void;
+}): import("react").JSX.Element;
+export declare function CustomProviderPanel({ projectId, canWrite, }: {
+    projectId: string;
+    canWrite?: boolean;
+}): import("react").JSX.Element;

package/dist/customize/sections/llm-provider/custom-provider-panel.js

@@ -0,0 +1,179 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+/**
+ * `CustomProviderPanel` — the Custom tab's whole body.
+ *
+ * ## Why this is a tab and not a section
+ *
+ * It used to be section 4 of the API-keys screen, behind an "Add a custom
+ * provider" button. That put a job almost nobody does — pointing Kortix at a
+ * self-hosted or unlisted OpenAI-compatible endpoint — at the bottom of the
+ * screen EVERYBODY uses to paste an Anthropic key, where it was one more
+ * heading to read past on the way to nothing.
+ *
+ * A tab costs the people who need it one click and costs everyone else
+ * nothing, which is the trade a tab exists to make.
+ *
+ * ## What a custom provider is
+ *
+ * An endpoint and a model list stored in Kortix (`useCustomLlmProviders`,
+ * `GET/PUT/DELETE /projects/:id/custom-providers`), plus the optional project
+ * secret `CUSTOM_<ID>_API_KEY`. The gateway serves the models to every
+ * harness, so nothing is written into the repository.
+ *
+ * The form IS the tab (Paper board CP01). Saved providers list above it
+ * (board CP02). A configured row opens the Models page's side sheet
+ * (`useModelsPageSheet`): edit the endpoint and models, replace the key, or
+ * delete the provider. A legacy row (`configured: false`: a key saved before
+ * endpoints moved into Kortix) pre-fills the form with its id instead.
+ */
+import { useState } from 'react';
+import { Button } from '../../../primitives/button.js';
+import { ConfirmDialog } from '../../../primitives/confirm-dialog.js';
+import { Field, FieldLabel } from '../../../primitives/field.js';
+import { Input } from '../../../primitives/input.js';
+import { InputGroup, InputGroupInput } from '../../../primitives/input-group.js';
+import Loading from '../../../primitives/loading.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { SplitSheetBody, SplitSheetDescription, SplitSheetFooter, SplitSheetHeader, SplitSheetTitle, } from '../../../primitives/split-sheet.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { ProviderLogoStatus } from '../../providers/provider-connect.js';
+import { cn } from '../../../internal/lib/utils.js';
+import { upsertProjectSecret } from '@kortix/sdk';
+import { qk, refreshProjectProviderState, useCustomLlmProviders } from '@kortix/sdk/react';
+import { CaretRightIcon, XIcon } from '@phosphor-icons/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useModelsPageSheet } from '../models-page-sheet.js';
+import { CustomProviderForm } from './custom-provider-form.js';
+/** One saved custom provider: a configured row opens the sheet, a legacy row
+ *  pre-fills the form. */
+export function CustomProviderRow({ provider, selected, onSelect, }) {
+    const t = useTranslations('customProvider');
+    const { id, name, configured } = provider;
+    return (_jsxs("button", { type: "button", "data-custom-provider-row": id, "aria-current": selected || undefined, onClick: () => onSelect(provider), className: cn('group flex min-h-12 w-full items-center gap-3 rounded-md px-3 py-2 text-left', 'hover:bg-muted/60 transition-[background-color] duration-(--duration-normal) ease-out', 'focus-visible:ring-ring/50 outline-none focus-visible:ring-2', selected && 'bg-muted hover:bg-muted'), children: [_jsx(ProviderLogoStatus, { providerId: id, label: name, status: configured ? 'connected' : 'none', size: "medium" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: name }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: configured ? (_jsx("span", { className: "font-mono", children: provider.base_url })) : (t('needsEndpoint')) })] }), configured ? (_jsx("span", { className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: t('modelCount', { count: provider.models.length }) })) : (_jsx("span", { className: "text-foreground shrink-0 text-xs font-medium", children: t('addEndpoint') })), _jsx(CaretRightIcon, { className: cn('text-muted-foreground size-3.5 shrink-0 transition-[color] duration-(--duration-normal)', 'group-hover:text-foreground', selected && 'text-foreground') })] }));
+}
+/** One label/value line in the provider detail. */
+function DetailRow({ label, value, mono = true }) {
+    return (_jsxs("div", { className: "flex min-h-10 items-center justify-between gap-4 py-2", children: [_jsx("span", { className: "text-muted-foreground shrink-0 text-sm", children: label }), _jsx("span", { className: cn('text-foreground min-w-0 truncate', mono ? 'font-mono text-xs' : 'text-sm'), children: value })] }));
+}
+/**
+ * The endpoint editor in the sheet. The PUT replaces the provider's whole
+ * definition, so this edits the full model list in place.
+ */
+function EndpointEditor({ projectId, provider, onClose, }) {
+    const t = useTranslations('customProvider');
+    const tSheet = useTranslations('providerSheet');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const custom = useCustomLlmProviders(projectId);
+    const [name, setName] = useState(provider.name);
+    const [baseUrl, setBaseUrl] = useState(provider.base_url ?? '');
+    const [models, setModels] = useState(provider.models);
+    const save = useMutation({
+        mutationFn: () => {
+            const trimmed = models
+                .map((m) => ({ id: m.id.trim(), name: m.name.trim() }))
+                .filter((m) => m.id || m.name);
+            if (!name.trim() || !/^https?:\/\//.test(baseUrl.trim())) {
+                throw new Error('Name and an http:// or https:// base URL are required');
+            }
+            if (trimmed.length === 0 || trimmed.some((m) => !m.id || !m.name || /\s/.test(m.id))) {
+                throw new Error('Every model needs an ID without spaces and a name');
+            }
+            return custom.save(provider.id, { name: name.trim(), base_url: baseUrl.trim(), models: trimmed });
+        },
+        onSuccess: () => {
+            successToast(t('saved'));
+            onClose();
+        },
+        onError: (err) => errorToast(err instanceof Error ? err.message : t('saveFailed')),
+    });
+    const setModel = (index, patch) => setModels((current) => current.map((m, i) => (i === index ? { ...m, ...patch } : m)));
+    const submit = (event) => {
+        event.preventDefault();
+        if (!save.isPending)
+            save.mutate();
+    };
+    return (_jsxs("form", { onSubmit: submit, className: "space-y-4", "data-custom-provider-edit": "", children: [_jsxs(Field, { className: "gap-1.5", children: [_jsx(FieldLabel, { htmlFor: `custom-edit-name-${provider.id}`, children: tI18nComplete.raw('text2b7f6a84de91') }), _jsx(Input, { id: `custom-edit-name-${provider.id}`, value: name, onChange: (event) => setName(event.target.value) })] }), _jsxs(Field, { className: "gap-1.5", children: [_jsx(FieldLabel, { htmlFor: `custom-edit-url-${provider.id}`, children: tI18nComplete.raw('text70589413a3c9') }), _jsx(Input, { id: `custom-edit-url-${provider.id}`, value: baseUrl, onChange: (event) => setBaseUrl(event.target.value), placeholder: "https://api.example.com/v1", className: "font-mono" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-foreground text-sm font-medium", children: t('models') }), models.map((model, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { "aria-label": tI18nComplete.raw('text089ef2b6dbb3'), value: model.id, onChange: (event) => setModel(index, { id: event.target.value }), placeholder: tI18nComplete.raw('text34d316295094'), className: "min-w-0 flex-1 font-mono" }), _jsx(Input, { "aria-label": tI18nComplete.raw('texta3c3370cc732'), value: model.name, onChange: (event) => setModel(index, { name: event.target.value }), placeholder: tI18nComplete.raw('textb70354a1faae'), className: "min-w-0 flex-1" }), _jsx(Button, { type: "button", size: "icon-xs", variant: "ghost", "aria-label": t('removeModel'), disabled: models.length === 1, onClick: () => setModels((current) => current.filter((_, i) => i !== index)), children: _jsx(XIcon, { className: "size-3.5 shrink-0" }) })] }, index))), _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "-ml-2", onClick: () => setModels((current) => [...current, { id: '', name: '' }]), children: t('addModel') })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "submit", size: "sm", disabled: save.isPending, className: "gap-1.5", children: [save.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, t('saveProvider')] }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: save.isPending, onClick: onClose, children: tSheet('cancel') })] })] }));
+}
+/** One saved custom provider: its endpoint and models, its key, and Delete. */
+function CustomProviderDetail({ projectId, provider, onDeleted, }) {
+    const t = useTranslations('customProvider');
+    const tSheet = useTranslations('providerSheet');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const queryClient = useQueryClient();
+    const custom = useCustomLlmProviders(projectId);
+    const [editing, setEditing] = useState(false);
+    const [replacing, setReplacing] = useState(false);
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const [value, setValue] = useState('');
+    const replace = useMutation({
+        mutationFn: () => upsertProjectSecret(projectId, {
+            name: provider.secret_name,
+            value: value.trim(),
+            strategy: 'broker',
+            consumer: 'llm_gateway',
+        }),
+        onSuccess: () => {
+            successToast(t('keyReplaced'));
+            setValue('');
+            setReplacing(false);
+            queryClient.invalidateQueries({ queryKey: qk.project.secrets(projectId) });
+            queryClient.invalidateQueries({ queryKey: qk.project.customLlmProviders(projectId) });
+            refreshProjectProviderState(queryClient, projectId);
+        },
+        onError: (err) => errorToast(err instanceof Error ? err.message : tI18nComplete.raw('text2c07997249ab')),
+    });
+    const remove = useMutation({
+        mutationFn: () => custom.remove(provider.id),
+        onSuccess: () => {
+            successToast(t('deleted'));
+            setConfirmDelete(false);
+            queryClient.invalidateQueries({ queryKey: qk.project.secrets(projectId) });
+            onDeleted();
+        },
+        onError: (err) => errorToast(err instanceof Error ? err.message : t('deleteFailed')),
+    });
+    const submit = (event) => {
+        event.preventDefault();
+        if (value.trim() && !replace.isPending)
+            replace.mutate();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(SplitSheetHeader, { closeLabel: tSheet('close'), className: "px-5 py-4", children: _jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ProviderLogoStatus, { providerId: provider.id, label: provider.name, status: "connected", size: "large" }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx(SplitSheetTitle, { className: "truncate text-base font-semibold", children: provider.name }), _jsx(SplitSheetDescription, { className: "font-mono", children: provider.id })] })] }) }), _jsxs(SplitSheetBody, { className: "space-y-7", children: [_jsxs("section", { className: "space-y-1", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: t('endpoint') }), editing ? (_jsx(EndpointEditor, { projectId: projectId, provider: provider, onClose: () => setEditing(false) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "divide-border divide-y", children: [_jsx(DetailRow, { label: tI18nComplete.raw('text70589413a3c9'), value: provider.base_url ?? '' }), _jsx(DetailRow, { label: tI18nComplete.raw('text16f0ee47f993'), value: provider.has_key ? provider.secret_name : t('noKey'), mono: provider.has_key })] }), _jsx("h3", { className: "text-foreground pt-4 text-sm font-medium", children: t('models') }), _jsx("div", { className: "divide-border divide-y", children: provider.models.map((model) => (_jsx(DetailRow, { label: model.name, value: model.id }, model.id))) }), _jsx(Button, { type: "button", size: "sm", variant: "secondary", className: "mt-3", onClick: () => setEditing(true), children: t('editEndpoint') })] }))] }), _jsx("section", { className: "space-y-1", children: replacing ? (_jsxs("form", { onSubmit: submit, className: "space-y-3", "data-custom-provider-replace": "", children: [_jsx("label", { htmlFor: `custom-replace-${provider.id}`, className: "sr-only", children: tI18nComplete.raw('text16f0ee47f993') }), _jsx(InputGroup, { children: _jsx(InputGroupInput, { id: `custom-replace-${provider.id}`, type: "password", autoComplete: "off", spellCheck: false, autoFocus: true, "data-1p-ignore": "", "data-lpignore": "true", "data-form-type": "other", value: value, onChange: (event) => setValue(event.target.value), placeholder: tI18nComplete.raw('textb009c6c5299f'), className: "font-mono" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "submit", size: "sm", disabled: !value.trim() || replace.isPending, className: "gap-1.5", children: [replace.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tSheet('saveKey')] }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: replace.isPending, onClick: () => {
+                                                setValue('');
+                                                setReplacing(false);
+                                            }, children: tSheet('cancel') })] })] })) : (_jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: () => setReplacing(true), children: provider.has_key ? t('replaceKey') : t('addKey') })) }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('gatewayNote') })] }), _jsxs(SplitSheetFooter, { className: "justify-between", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "text-destructive hover:text-destructive -ml-2", onClick: () => setConfirmDelete(true), children: t('deleteProvider') }), _jsx("span", { className: "text-muted-foreground text-xs", children: tSheet('storedEncrypted') })] }), _jsx(ConfirmDialog, { open: confirmDelete, onOpenChange: setConfirmDelete, title: t('deleteTitle'), description: t('deleteBody', { name: provider.name }), confirmLabel: t('deleteProvider'), confirmVariant: "destructive", isPending: remove.isPending, onConfirm: () => remove.mutate() })] }));
+}
+export function CustomProviderPanel({ projectId, canWrite = false, }) {
+    const t = useTranslations('customProvider');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const [openId, setOpenId] = useState(null);
+    // A legacy key's id, pre-filled into the form; the form remounts per value.
+    const [prefillId, setPrefillId] = useState('');
+    const [formKey, setFormKey] = useState(0);
+    const custom = useCustomLlmProviders(canWrite ? projectId : null);
+    const providers = custom.providers;
+    const open = providers.find((p) => p.id === openId && p.configured) ?? null;
+    // A saved provider opens in the Models page's one side sheet, beside the
+    // whole page — not a second sheet inside this tab's column.
+    const renderSheet = useModelsPageSheet(open !== null, () => setOpenId(null));
+    if (!canWrite) {
+        return (_jsxs("div", { className: "flex min-h-[200px] flex-col items-center justify-center gap-1 px-6 text-center", children: [_jsx("p", { className: "text-foreground text-sm", children: tI18nComplete.raw('textb4214ac48923') }), _jsx("p", { className: "text-muted-foreground max-w-xs text-xs text-pretty", children: tI18nComplete.raw('text09f1d00ed790') })] }));
+    }
+    const select = (provider) => {
+        if (provider.configured) {
+            setOpenId(provider.id);
+            return;
+        }
+        setOpenId(null);
+        setPrefillId(provider.id);
+        setFormKey((k) => k + 1);
+    };
+    return (
+    // `pt-2.5` + the shell's `space-y-5` = board CP01's 28px from the tab row.
+    _jsxs("div", { className: "flex flex-col gap-8 pt-2.5", children: [custom.isLoading ? (_jsx(Skeleton, { className: "h-12 rounded-md" })) : providers.length > 0 ? (_jsxs("section", { className: "flex flex-col gap-0.5", "aria-label": t('group', { count: providers.length }), children: [_jsx("h3", { className: "text-muted-foreground px-3 pb-1 text-xs font-medium tabular-nums", children: t('group', { count: providers.length }) }), providers.map((provider) => (_jsx(CustomProviderRow, { provider: provider, selected: openId === provider.id || (!provider.configured && prefillId === provider.id), onSelect: select }, provider.id)))] })) : null, _jsx(CustomProviderForm, { projectId: projectId, initialId: prefillId, onSaved: (id) => {
+                    setPrefillId('');
+                    setFormKey((k) => k + 1);
+                    setOpenId(id);
+                } }, `${prefillId}-${formKey}`), renderSheet(open ? (_jsx(CustomProviderDetail, { projectId: projectId, provider: open, onDeleted: () => setOpenId(null) }, open.id)) : null)] }));
+}

package/dist/customize/sections/llm-provider/device-grant.d.ts

@@ -0,0 +1,15 @@
+import type { startProjectProviderOAuth, pollProjectProviderOAuth } from '@kortix/sdk';
+import type { ChatGptChallenge, ChatGptPhase } from './types.js';
+/** Run the device grant without owning React state or SDK transport. */
+export declare function runDeviceGrant({ startOAuth, pollOAuth, sleep, now, isCancelled, setChallenge, setPhase, setError, onSuccess, failedMessage, }: {
+    startOAuth: () => ReturnType<typeof startProjectProviderOAuth>;
+    pollOAuth: (flowId: string) => ReturnType<typeof pollProjectProviderOAuth>;
+    sleep: (ms: number) => Promise<void>;
+    now: () => number;
+    isCancelled: () => boolean;
+    setChallenge: (challenge: ChatGptChallenge | null) => void;
+    setPhase: (phase: ChatGptPhase) => void;
+    setError: (error: string) => void;
+    onSuccess: () => void;
+    failedMessage: string;
+}): Promise<void>;

package/dist/customize/sections/llm-provider/device-grant.js

@@ -0,0 +1,53 @@
+/** Run the device grant without owning React state or SDK transport. */
+export async function runDeviceGrant({ startOAuth, pollOAuth, sleep, now, isCancelled, setChallenge, setPhase, setError, onSuccess, failedMessage, }) {
+    try {
+        const start = await startOAuth();
+        if (isCancelled())
+            return;
+        setChallenge({ url: start.verification_url, code: start.user_code });
+        const interval = Math.max(2000, start.interval_ms || 3000);
+        const deadline = start.expires_at || now() + 10 * 60_000;
+        while (!isCancelled() && now() < deadline) {
+            await sleep(interval);
+            if (isCancelled())
+                return;
+            let res;
+            try {
+                res = await pollOAuth(start.flow_id);
+            }
+            catch {
+                continue;
+            }
+            if (isCancelled())
+                return;
+            if (res.status === 'success') {
+                onSuccess();
+                return;
+            }
+            if (res.status === 'failed') {
+                setChallenge(null);
+                setPhase('idle');
+                setError(res.error || 'Authorization failed');
+                return;
+            }
+            if (res.status === 'expired') {
+                setChallenge(null);
+                setPhase('idle');
+                setError('Authorization timed out. Try again.');
+                return;
+            }
+        }
+        if (!isCancelled()) {
+            setChallenge(null);
+            setPhase('idle');
+            setError('Authorization timed out. Try again.');
+        }
+    }
+    catch (err) {
+        if (isCancelled())
+            return;
+        setChallenge(null);
+        setPhase('idle');
+        setError(err instanceof Error ? err.message : failedMessage);
+    }
+}

package/dist/customize/sections/llm-provider/llm-provider-modal.d.ts

@@ -0,0 +1,3 @@
+import type { ProjectProviderModalProps } from './types.js';
+export type { ProjectProviderModalProps } from './types.js';
+export declare function ProjectProviderModal({ projectId, open, onOpenChange, defaultTab, canWrite, }: ProjectProviderModalProps): import("react").JSX.Element;

package/dist/customize/sections/llm-provider/llm-provider-modal.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `ProjectProviderModal` — the QUICK version of the Models page, and nothing
+ * else.
+ *
+ * ## It is the same screen, or it is wrong
+ *
+ * This dialog used to be a second implementation of model management: its own
+ * `Tabs` root, its own underline tab row at `text-xs`, its own labels ("API
+ * keys" where the page says "Providers"), no project-default control, and — the
+ * visible bug — a scroll body with NO horizontal padding, so the search field
+ * and every model row ran edge to edge under a heading indented 20px, and the
+ * row card's rounded border was clipped away by the modal's `overflow-hidden`.
+ * Beside the page it read as a different, older product.
+ *
+ * There is one implementation now. Every part below is imported from
+ * `gateway-view.tsx`, the Customize page's own module:
+ *
+ *   - `MODELS_PAGE_TITLE` / `MODELS_PAGE_DESCRIPTION` — the same two lines.
+ *   - `ProjectDefaultPicker` — the same one page-level control, in the same
+ *     place relative to the heading.
+ *   - `QUICK_LLM_TABS` + `LlmTabStrip` — the same pill strip, the same labels,
+ *     the same order. A slice of `LLM_TABS`, never a second list.
+ *   - `LlmSections` — the same section bodies, chosen the same way.
+ *
+ * This file contributes the dialog chrome and the padded column, full stop. It
+ * declares no `TabsTrigger`, no section, and no label of its own; a change to
+ * any of those has exactly one place to be made.
+ *
+ * ## Why three tabs and not seven
+ *
+ * The page carries Providers / Models / Custom / Gateway / Routing / Costs /
+ * Logs. This dialog opens from the session model picker's connect gate
+ * (`use-model-connection-gate.tsx`) and the Secrets tab's "Manage providers"
+ * (`secrets-view.tsx`) — both are "let me use a model right now" moments. It
+ * carries the three tabs that answer that and drops the four that are project
+ * administration; a log table wants the page's width and height, not 680px of
+ * dialog. `QUICK_LLM_TABS` is that decision, expressed once.
+ *
+ * The Models settings tab mounts `LlmManagementView` DIRECTLY — connecting a
+ * provider there opens no dialog at all, which is JAY-510's first acceptance
+ * criterion.
+ */
+import { Modal, ModalContent, ModalDescription, ModalHeader, ModalTitle, } from '../../../primitives/modal.js';
+import { isQuickLlmTab, LlmSections, LlmTabStrip, MODELS_PAGE_DESCRIPTION, MODELS_PAGE_TITLE, ProjectDefaultPicker, ProviderSheetSplit, QUICK_LLM_TABS, } from '../gateway-view.js';
+import { useState } from 'react';
+import { pickInitialTab } from './utils.js';
+export function ProjectProviderModal({ projectId, open, onOpenChange, defaultTab, canWrite = false, }) {
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent
+        // The default-model picker sits in the close button's own row, so the
+        // two share one centre line instead of the picker floating in the header.
+        // `lg:h-(…)` (not only min/max): the SplitSheet body below sizes with
+        // `h-full`, which needs a DEFINITE height — with `lg:h-auto` from the
+        // modal base it grew to its content and nothing could scroll.
+        , { 
+            // The default-model picker sits in the close button's own row, so the
+            // two share one centre line instead of the picker floating in the header.
+            // `lg:h-(…)` (not only min/max): the SplitSheet body below sizes with
+            // `h-full`, which needs a DEFINITE height — with `lg:h-auto` from the
+            // modal base it grew to its content and nothing could scroll.
+            closeButtonChildren: canWrite && open ? _jsx(ProjectDefaultPicker, { projectId: projectId }) : null, className: "bg-background flex h-(--provider-modal-h) w-[calc(100vw-2rem)] flex-col gap-0 overflow-hidden p-0 [--provider-modal-h:min(680px,calc(100dvh-2rem))] lg:h-(--provider-modal-h) lg:max-h-(--provider-modal-h) lg:min-h-(--provider-modal-h) lg:max-w-4xl", children: _jsx(ProviderModalBody, { projectId: projectId, open: open, canWrite: canWrite, defaultTab: defaultTab }, `${open}-${defaultTab ?? ''}`) }) }));
+}
+/**
+ * The body, below the `key` boundary the shell owns.
+ *
+ * CONTROLLED, but with no effect and no re-seeding: `useState`'s initializer
+ * runs once per mount, and the parent's `key={`${open}-${defaultTab}`}`
+ * remounts this on every open — so reopening still lands on the requested tab,
+ * exactly as the uncontrolled version did, with no `setState` in an effect
+ * body (`react-hooks/set-state-in-effect`).
+ *
+ * Controlled at all because `LlmSections` hands the reader on: saving a custom
+ * provider gives it a key like any other and a row on the provider list, so a
+ * "Done" that leaves you on the form you just submitted is not done.
+ */
+function ProviderModalBody({ projectId, open, canWrite, defaultTab, }) {
+    const [tab, setTab] = useState(() => pickInitialTab(defaultTab));
+    return (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "shrink-0 gap-0 px-5 pt-4 pr-64", children: [_jsx(ModalTitle, { className: "text-base leading-8 font-medium", children: MODELS_PAGE_TITLE }), _jsx(ModalDescription, { children: MODELS_PAGE_DESCRIPTION })] }), _jsx("div", { className: "shrink-0 px-5", children: _jsx(LlmTabStrip, { value: tab, tabs: QUICK_LLM_TABS, onValueChange: (next) => {
+                        if (isQuickLlmTab(next))
+                            setTab(next);
+                    } }) }), _jsx(ProviderSheetSplit, { projectId: projectId, providerId: null, onProviderChange: () => undefined, canWrite: canWrite, className: "min-h-0 border-t", contentClassName: "bg-background", children: _jsx("div", { className: "h-full min-h-0 overflow-y-auto px-5 pt-4 pb-5", children: _jsx(LlmSections, { projectId: projectId, tab: tab, onTabChange: (next) => {
+                            if (isQuickLlmTab(next))
+                                setTab(next);
+                        }, canWrite: canWrite, enabled: open, onSelectProvider: () => undefined, providersVariant: "accordion" }) }) })] }));
+}

package/dist/customize/sections/llm-provider/model-capability-icons.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Compact capability chips — reasoning / tool-calling / vision — mirrored
+ * verbatim from models.dev. Takes the three flags rather than a model object
+ * so it serves every catalog shape that carries them; renders nothing when a
+ * model declares no capabilities.
+ */
+export declare function ModelCapabilityIcons({ reasoning, toolCall, vision, chips, }: {
+    reasoning?: boolean;
+    toolCall?: boolean;
+    vision?: boolean;
+    /** Each glyph on its own small filled tile (the Models tab rows). */
+    chips?: boolean;
+}): import("react").JSX.Element | null;

package/dist/customize/sections/llm-provider/model-capability-icons.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Hint from '../../../primitives/hint.js';
+import { BrainIcon as Brain, EyeIcon as Eye, WrenchIcon as Wrench } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+const ICON_CLASS = 'text-muted-foreground/50 size-3.5 shrink-0';
+/**
+ * Compact capability chips — reasoning / tool-calling / vision — mirrored
+ * verbatim from models.dev. Takes the three flags rather than a model object
+ * so it serves every catalog shape that carries them; renders nothing when a
+ * model declares no capabilities.
+ */
+export function ModelCapabilityIcons({ reasoning, toolCall, vision, chips = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    if (!reasoning && !toolCall && !vision)
+        return null;
+    const items = [
+        reasoning && { key: 'reasoning', label: tI18nComplete.raw('textd8211e24e83d'), Icon: Brain },
+        toolCall && { key: 'tools', label: tI18nComplete.raw('text10d67f48de99'), Icon: Wrench },
+        vision && { key: 'vision', label: tI18nComplete.raw('text1f7ad27866ae'), Icon: Eye },
+    ].filter((item) => !!item);
+    return (_jsx("div", { className: "flex shrink-0 items-center gap-1", children: items.map(({ key, label, Icon }) => (_jsx(Hint, { label: label, side: "bottom", children: chips ? (_jsx("span", { "data-capability": key, className: "bg-muted flex size-5 shrink-0 items-center justify-center rounded-sm", children: _jsx(Icon, { className: "text-muted-foreground size-3 shrink-0" }) })) : (_jsx(Icon, { className: ICON_CLASS })) }, key))) }));
+}

package/dist/customize/sections/llm-provider/model-rows.d.ts

@@ -0,0 +1,23 @@
+import { type FlatModel } from '@kortix/sdk/react';
+export interface ModelRow {
+    model: FlatModel;
+    /** The id the server stores enablement against. */
+    wireId: string;
+    /**
+     * True when this is the undated pointer for a family that also publishes
+     * pinned snapshots — `claude-sonnet-4-5` alongside
+     * `claude-sonnet-4-5-20250929`. Both are separately selectable models with
+     * identical display names, so the list has to say which is which.
+     */
+    isRollingAlias: boolean;
+}
+export interface ModelGroup {
+    providerID: string;
+    providerName: string;
+    rows: ModelRow[];
+}
+/**
+ * Group by real upstream provider, newest model first, with rolling aliases
+ * flagged. Provider order matches the session picker's.
+ */
+export declare function buildModelGroups(models: FlatModel[], search?: string): ModelGroup[];

package/dist/customize/sections/llm-provider/model-rows.js

@@ -0,0 +1,73 @@
+import { MODEL_SELECTOR_PROVIDER_IDS } from '../../../internal/lib/provider-branding.js';
+import { pickerGroupId, pickerGroupLabel } from '../../../session/models/model-grouping.js';
+import { modelKeyToWire } from '@kortix/sdk/react';
+/**
+ * Row/group shaping for the "Manage models" tab. Pure so it can be tested
+ * without rendering, and deliberately built from the SAME `FlatModel[]` and the
+ * SAME grouping helpers the session picker uses — the two views listing
+ * different catalogs (models.dev per-provider vs the gateway's served set) is
+ * what let them disagree about which models exist at all.
+ */
+/** Trailing models.dev snapshot date, e.g. `claude-sonnet-4-5-20250929`. */
+const DATED_SUFFIX = /-\d{8}$/;
+function releasedAt(model) {
+    const ms = model.releaseDate ? new Date(model.releaseDate).getTime() : Number.NaN;
+    return Number.isNaN(ms) ? 0 : ms;
+}
+function matchesSearch(model, query) {
+    if (!query)
+        return true;
+    return (model.modelName.toLowerCase().includes(query) || model.modelID.toLowerCase().includes(query));
+}
+/**
+ * Group by real upstream provider, newest model first, with rolling aliases
+ * flagged. Provider order matches the session picker's.
+ */
+export function buildModelGroups(models, search = '') {
+    const query = search.trim().toLowerCase();
+    const groups = new Map();
+    for (const model of models) {
+        if (!matchesSearch(model, query))
+            continue;
+        const providerID = pickerGroupId(model);
+        const group = groups.get(providerID);
+        const row = {
+            model,
+            wireId: modelKeyToWire({ providerID: model.providerID, modelID: model.modelID }),
+            isRollingAlias: false,
+        };
+        if (group)
+            group.rows.push(row);
+        else {
+            groups.set(providerID, {
+                providerID,
+                providerName: pickerGroupLabel(providerID, model),
+                rows: [row],
+            });
+        }
+    }
+    for (const group of groups.values()) {
+        const dated = new Set();
+        for (const row of group.rows) {
+            if (DATED_SUFFIX.test(row.model.modelID)) {
+                dated.add(row.model.modelID.replace(DATED_SUFFIX, ''));
+            }
+        }
+        for (const row of group.rows) {
+            row.isRollingAlias = !DATED_SUFFIX.test(row.model.modelID) && dated.has(row.model.modelID);
+        }
+        group.rows.sort((a, b) => releasedAt(b.model) - releasedAt(a.model) ||
+            a.model.modelName.localeCompare(b.model.modelName));
+    }
+    return [...groups.values()].sort((a, b) => {
+        const ai = MODEL_SELECTOR_PROVIDER_IDS.indexOf(a.providerID);
+        const bi = MODEL_SELECTOR_PROVIDER_IDS.indexOf(b.providerID);
+        if (ai >= 0 && bi < 0)
+            return -1;
+        if (ai < 0 && bi >= 0)
+            return 1;
+        if (ai >= 0 && bi >= 0)
+            return ai - bi;
+        return a.providerName.localeCompare(b.providerName);
+    });
+}

package/dist/customize/sections/llm-provider/models-tab-group.d.ts

@@ -0,0 +1,6 @@
+import { type ModelContext } from './models-tab-row.js';
+import type { ModelGroup } from './model-rows.js';
+export declare function ModelsTabGroup({ group, access, enablement, defaults, pickerCatalog, canWrite, holdsDataClaim, platformFee, }: ModelContext & {
+    group: ModelGroup;
+    platformFee: number | undefined;
+}): import("react").JSX.Element;