@kortix/ui 0.0.0-stage → 0.14.4

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

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Hint from '../../../primitives/hint.js';
+import { Switch } from '../../../primitives/switch.js';
+import { errorToast } from '../../../primitives/toast.js';
+import { ProviderLogoStatus } from '../../providers/provider-connect.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { ModelsTabRow } from './models-tab-row.js';
+export function ModelsTabGroup({ group, access, enablement, defaults, pickerCatalog, canWrite, holdsDataClaim, platformFee, }) {
+    const tAccess = useTranslations('modelAccess');
+    const tList = useTranslations('modelsList');
+    const providerDisabled = access.data?.disabledProviders.includes(group.providerID) ?? false;
+    const groupOn = group.rows.filter(({ model }) => model.enabled).length;
+    const dataClaim = group.providerID === 'kortix' &&
+        group.rows.every(({ model }) => holdsDataClaim(model.modelID));
+    return (_jsxs("section", { "data-provider-group": group.providerID, className: "bg-popover overflow-hidden rounded-lg border", children: [_jsxs("header", { className: "border-border flex items-center gap-3 border-b px-4 py-3", children: [_jsx(ProviderLogoStatus, { providerId: group.providerID, label: group.providerName, status: providerDisabled
+                            ? 'none'
+                            : group.providerID === 'kortix'
+                                ? 'included'
+                                : 'connected', size: "medium" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground truncate text-sm font-medium", children: group.providerName }), group.providerID === 'kortix' && platformFee !== undefined ? (_jsx("p", { className: "text-muted-foreground text-xs", children: tList('platformFee', { fee: platformFee }) })) : null, dataClaim ? (_jsxs("p", { className: "text-muted-foreground text-xs", children: [_jsx(Hint, { label: tAccess('zdrDescription'), side: "top", className: "max-w-xs", children: _jsx("span", { tabIndex: 0, className: "cursor-help", children: tAccess('zdrTitle') }) }), ' · ', _jsx(Hint, { label: tAccess('usProvidersDescription'), side: "top", className: "max-w-xs", children: _jsx("span", { tabIndex: 0, className: "cursor-help", children: tAccess('usProvidersTitle') }) })] })) : null] }), _jsx("span", { className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: tList('onCount', { on: groupOn, total: group.rows.length }) }), _jsx(ProviderSwitch, { access: access, providerId: group.providerID, name: group.providerName, canWrite: canWrite })] }), group.rows.map(({ model, wireId, isRollingAlias }) => (_jsx(ModelsTabRow, { model: model, wireId: wireId, isRollingAlias: isRollingAlias, group: group, providerDisabled: providerDisabled, access: access, enablement: enablement, defaults: defaults, pickerCatalog: pickerCatalog, canWrite: canWrite, holdsDataClaim: holdsDataClaim }, wireId)))] }, group.providerID));
+}
+/**
+ * A whole provider on or off for this project. Credentials stay either way.
+ * The project default's provider cannot be turned off until the default moves
+ * elsewhere — the same lock the provider sheet's switch applies.
+ */
+function ProviderSwitch({ access, providerId, name, canWrite, }) {
+    const tAccess = useTranslations('modelAccess');
+    if (!access.data?.enforced)
+        return null;
+    const enabled = !access.data.disabledProviders.includes(providerId);
+    const locked = access.defaultProvider === providerId && enabled;
+    return (_jsx(Hint, { label: locked ? tAccess('defaultProviderHint') : tAccess('credentialsHint'), side: "bottom", children: _jsx("span", { className: "inline-flex shrink-0", children: _jsx(Switch, { checked: enabled, disabled: !canWrite || access.isUpdating || locked, "aria-label": tAccess('enableProvider', { name }), onCheckedChange: (next) => void access
+                    .setEnabled({ target: 'provider', id: providerId, enabled: next })
+                    .catch((error) => errorToast(error instanceof Error ? error.message : tAccess('providerError'))) }) }) }));
+}

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

@@ -0,0 +1,28 @@
+import { useModelAccess, useModelDefaults, useModelEnablement, useProjectModelPickerCatalog } from '@kortix/sdk/react';
+import { type ReactNode } from 'react';
+import type { ModelGroup, ModelRow } from './model-rows.js';
+export type ModelContext = {
+    access: ReturnType<typeof useModelAccess>;
+    enablement: ReturnType<typeof useModelEnablement>;
+    defaults: ReturnType<typeof useModelDefaults>;
+    pickerCatalog: ReturnType<typeof useProjectModelPickerCatalog>;
+    canWrite: boolean;
+    holdsDataClaim: (modelID: string) => boolean;
+};
+export declare function ModelsTabRow({ model, wireId, isRollingAlias, group, providerDisabled, access, enablement, defaults, pickerCatalog, canWrite, holdsDataClaim, }: ModelRow & ModelContext & {
+    group: ModelGroup;
+    providerDisabled: boolean;
+}): import("react").JSX.Element;
+type ManagedPricingRoute = NonNullable<NonNullable<ReturnType<typeof useProjectModelPickerCatalog>>['managedPricingRoutes']>[string][number];
+/**
+ * The row's price, underlined; hovering opens every serving route's price and
+ * the data notes. The routes used to be printed as full sentences under each
+ * managed model — four lines of numbers per row.
+ */
+export declare function ModelPriceHoverCard({ modelName, routes, dataClaim, children, }: {
+    modelName: string;
+    routes: readonly ManagedPricingRoute[];
+    dataClaim: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,109 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from '../../../primitives/badge.js';
+import Hint from '../../../primitives/hint.js';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../../primitives/hover-card.js';
+import { Switch } from '../../../primitives/switch.js';
+import { Tag } from '../../../primitives/tag.js';
+import { errorToast } from '../../../primitives/toast.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { cn } from '../../../internal/lib/utils.js';
+import { isManagedModelId, MANAGED_ENDPOINT_PROVIDERS } from '@kortix/llm-catalog';
+import { wireToModelKey, } from '@kortix/sdk/react';
+import { CheckIcon as Check, FolderSimpleIcon as Folder, DotsThreeIcon as MoreHorizontal, StarIcon as Star, } from '@phosphor-icons/react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../../primitives/dropdown-menu.js';
+import { Copy } from '../../../icons/copy.js';
+import { ModelCapabilityIcons } from './model-capability-icons.js';
+import { formatPricePerMillion, formatTokenCount } from './utils.js';
+/** A row status pill as the Models board draws it: sentence case, Roobert,
+ *  round. `Badge`'s default is the uppercase mono label used elsewhere. */
+const STATUS_PILL = 'rounded-full font-sans text-xs tracking-normal normal-case';
+export function ModelsTabRow({ model, wireId, isRollingAlias, group, providerDisabled, access, enablement, defaults, pickerCatalog, canWrite, holdsDataClaim, }) {
+    const tAccess = useTranslations('modelAccess');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tList = useTranslations('modelsList');
+    const isManaged = group.providerID === 'kortix' && isManagedModelId(model.modelID);
+    const enabled = !!model.enabled;
+    const modelDisabled = access.data?.disabledModels.includes(wireId) ?? false;
+    const hiddenFromPicker = !!access.data && !enabled && !providerDisabled && !modelDisabled;
+    // `auto` resolves to this one, so turning it off would break
+    // every default request — the server refuses it with a 409.
+    // Lock the switch and say why instead of letting the click
+    // become a failed action.
+    const isProjectDefault = wireId === enablement.defaultModel;
+    // `useModelDefaults` builds every scope with `wireToModelKey`,
+    // which parks the whole wire id in `modelID` under the `kortix`
+    // provider — so this is the same comparison as the line above.
+    const isAccountDefault = defaults.accountDefault?.modelID === wireId;
+    const ctx = formatTokenCount(model.contextWindow);
+    const pricingRoutes = isManaged
+        ? pickerCatalog?.managedPricingRoutes?.[wireId]
+        : undefined;
+    // The row shows ONE price — the cheapest route's, as "from" —
+    // and the hover card shows every route. The routes used to be
+    // printed as full sentences under each managed model.
+    const hasRoutes = !!pricingRoutes && pricingRoutes.length > 0;
+    const priceIn = formatPricePerMillion(hasRoutes
+        ? Math.min(...pricingRoutes.map((route) => route.input))
+        : model.cost?.input);
+    const priceOut = formatPricePerMillion(hasRoutes
+        ? Math.min(...pricingRoutes.map((route) => route.output))
+        : model.cost?.output);
+    const turnedOff = modelDisabled || providerDisabled;
+    const metaLine = hiddenFromPicker
+        ? tList('hiddenLine')
+        : modelDisabled
+            ? tList('blockedLine')
+            : [
+                isManaged
+                    ? model.capabilities?.vision
+                        ? tAccess('textImage')
+                        : tAccess('textOnly')
+                    : null,
+                ctx ? tList('context', { value: ctx }) : null,
+                priceIn && priceOut
+                    ? tList(hasRoutes ? 'fromPrice' : 'price', {
+                        input: priceIn,
+                        output: priceOut,
+                    })
+                    : null,
+            ]
+                .filter(Boolean)
+                .join(' · ');
+    return (
+    // A plain row, NOT a <label>: it holds several controls and a
+    // label binds to the FIRST labelable one, so "click the row
+    // to toggle" never did what it looked like.
+    _jsxs("div", { "data-model-id": wireId, className: "border-border hover:bg-hover flex min-h-13 items-center gap-3 border-t px-4 py-2 transition-[background-color] duration-(--duration-normal) first-of-type:border-t-0", children: [_jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: cn('truncate text-sm font-medium', turnedOff ? 'text-muted-foreground' : 'text-foreground'), children: model.modelName }), isProjectDefault && (_jsx(Hint, { label: tI18nComplete.raw('text68cde35131cf'), side: "bottom", children: _jsx(Badge, { variant: "info", size: "sm", className: STATUS_PILL, children: tI18nComplete.raw('text5e06ae1125b5') }) })), isAccountDefault && (_jsx(Hint, { label: tI18nComplete.raw('textd197e66e9634'), side: "bottom", children: _jsx(Badge, { variant: "info", size: "sm", className: STATUS_PILL, children: tI18nComplete.raw('text071c0f5e8495') }) })), hiddenFromPicker && (_jsx(Hint, { label: tAccess('hiddenHint'), side: "bottom", children: _jsx(Badge, { variant: "muted", size: "sm", className: STATUS_PILL, children: tAccess('hidden') }) })), modelDisabled && !providerDisabled && (_jsx(Badge, { variant: "destructive", size: "sm", className: STATUS_PILL, children: tAccess('disabled') })), isRollingAlias && (_jsx(Hint, { label: tI18nComplete.raw('text7482f09d1b13'), side: "bottom", children: _jsx(Tag, { children: tI18nComplete.raw('textf096ba0a2aa6') }) }))] }), metaLine ? (hasRoutes && !hiddenFromPicker && !modelDisabled ? (_jsx(ModelPriceHoverCard, { modelName: model.modelName, routes: pricingRoutes, dataClaim: holdsDataClaim(model.modelID), children: metaLine })) : (_jsx("p", { className: "text-muted-foreground text-xs tabular-nums", children: metaLine }))) : null] }), _jsx("div", { className: "flex w-18 shrink-0 justify-end", children: _jsx(ModelCapabilityIcons, { chips: true, reasoning: model.capabilities?.reasoning, toolCall: model.capabilities?.toolcall, vision: model.capabilities?.vision }) }), canWrite && (enabled || hiddenFromPicker) ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", disabled: defaults.isUpdating, "aria-label": tI18nComplete('text43d1a2b807aa', {
+                                value0: model.modelName,
+                            }), title: tI18nComplete.raw('textc3b312278ee5'), className: "text-muted-foreground hover:text-foreground hover:bg-muted data-[state=open]:bg-muted data-[state=open]:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md transition-[color,background-color] duration-(--duration-normal) disabled:cursor-not-allowed disabled:opacity-50", children: _jsx(MoreHorizontal, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-90", children: [hiddenFromPicker && (_jsx(DropdownMenuItem, { disabled: access.isUpdating, onSelect: () => void access
+                                    .setEnabled({ target: 'model', id: wireId, enabled: false })
+                                    .catch((error) => errorToast(error instanceof Error
+                                    ? error.message
+                                    : tAccess('modelError'))), children: tAccess('disableModel') })), _jsxs(DropdownMenuItem, { disabled: !enabled || isProjectDefault || defaults.isUpdating, onSelect: () => void defaults.setProjectDefault(wireToModelKey(wireId)), children: [_jsx(Folder, { className: "size-3.5" }), tI18nComplete.raw('text246d55bd2682'), isProjectDefault && _jsx(Check, { className: "ml-auto size-3.5" })] }), _jsxs(DropdownMenuItem, { disabled: !enabled || isAccountDefault || defaults.isUpdating, onSelect: () => void defaults.setAccountDefault(wireToModelKey(wireId)), children: [_jsx(Star, { className: "size-3.5" }), tI18nComplete.raw('textc74a21a56d79'), isAccountDefault && _jsx(Check, { className: "ml-auto size-3.5" })] }), _jsxs(DropdownMenuItem, { onSelect: () => void navigator.clipboard?.writeText(wireId), children: [_jsx(Copy, { className: "size-3.5" }), tI18nComplete.raw('text16af2c8fb28f')] })] })] })) : (
+            // Keeps the switch lane aligned on rows with no menu.
+            _jsx("span", { "aria-hidden": true, className: "size-6 shrink-0" })), _jsx(Switch, { checked: enabled, disabled: !canWrite ||
+                    access.isLoading ||
+                    access.isUpdating ||
+                    (isProjectDefault && enabled) ||
+                    providerDisabled, "aria-label": isProjectDefault
+                    ? tI18nComplete('texta931b0c34b16', { value0: model.modelName })
+                    : `Enable ${model.modelName}`, title: isProjectDefault
+                    ? tI18nComplete.raw('textecb89227d17e')
+                    : hiddenFromPicker
+                        ? tAccess('hiddenShort')
+                        : undefined, onCheckedChange: (next) => void access
+                    .setEnabled({ target: 'model', id: wireId, enabled: next })
+                    .catch((error) => errorToast(error instanceof Error ? error.message : tAccess('modelError'))), className: "shrink-0" })] }, wireId));
+}
+/**
+ * The row's price, underlined; hovering opens every serving route's price and
+ * the data notes. The routes used to be printed as full sentences under each
+ * managed model — four lines of numbers per row.
+ */
+export function ModelPriceHoverCard({ modelName, routes, dataClaim, children, }) {
+    const tAccess = useTranslations('modelAccess');
+    const tList = useTranslations('modelsList');
+    return (_jsxs(HoverCard, { openDelay: 150, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "text-foreground decoration-muted-foreground block cursor-help text-left text-xs tabular-nums underline decoration-dotted underline-offset-3", children: children }) }), _jsxs(HoverCardContent, { align: "start", className: "w-98 space-y-3 p-4", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("p", { className: "text-foreground text-sm font-medium tabular-nums", children: tList('perMillion', { model: modelName }) }), _jsx(Hint, { label: tAccess('pricingEstimate'), children: _jsx("span", { tabIndex: 0, className: "text-muted-foreground cursor-help text-xs", children: tList('estimate') }) })] }), _jsxs("div", { className: "space-y-1.5 text-xs tabular-nums", children: [_jsxs("div", { className: "text-muted-foreground flex gap-2", children: [_jsx("span", { className: "min-w-0 flex-1", children: tList('route') }), _jsx("span", { className: "w-13 shrink-0 text-right", children: tList('input') }), _jsx("span", { className: "w-13 shrink-0 text-right", children: tList('cached') }), _jsx("span", { className: "w-13 shrink-0 text-right", children: tList('output') })] }), routes.map((price) => (_jsxs("div", { className: "text-foreground flex gap-2", "data-pricing-route": price.route, children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [MANAGED_ENDPOINT_PROVIDERS[price.route] ??
+                                                price.route.split('/')[0], price.role === 'preferred' ? ` · ${tAccess('pricingPreferred')}` : ''] }), _jsx("span", { className: "w-13 shrink-0 text-right", children: formatPricePerMillion(price.input) }), _jsx("span", { className: "w-13 shrink-0 text-right", children: formatPricePerMillion(price.cacheRead) }), _jsx("span", { className: "w-13 shrink-0 text-right", children: formatPricePerMillion(price.output) })] }, price.route)))] }), dataClaim ? (_jsxs("div", { className: "border-border text-muted-foreground space-y-1 border-t pt-3 text-xs text-pretty", children: [_jsxs("p", { children: [tAccess('zdrTitle'), ". ", tAccess('zdrDescription')] }), _jsxs("p", { children: [tAccess('usProvidersTitle'), ". ", tAccess('usProvidersDescription')] })] })) : null] })] }));
+}

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

@@ -0,0 +1,13 @@
+export { ModelPriceHoverCard } from './models-tab-row.js';
+/**
+ * `search` used to be driven by the provider modal's always-on search bar,
+ * which JAY-510 deleted (it sat above the tabs and filtered whichever tab
+ * happened to be open). Passing `''` would have silently dropped model search,
+ * so this tab owns its own input when no host drives one — one search box per
+ * thing being searched, instead of one box for three different lists.
+ */
+export declare function ModelsTab({ projectId, search: hostSearch, canWrite, }: {
+    projectId: string;
+    search?: string;
+    canWrite?: boolean;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ModelsTabGroup } from './models-tab-group.js';
+export { ModelPriceHoverCard } from './models-tab-row.js';
+import { useTranslations } from '../../../i18n/index.js';
+/**
+ * `ModelsTab` — "which models can this project use".
+ *
+ * ## What this screen is for
+ *
+ * Explicit model disables block inference. Legacy picker-only preferences
+ * remain distinct and are labeled so a hidden model is not mistaken for a
+ * blocked model. Default scopes apply to models offered by the picker.
+ *
+ * ## The row shows real numbers, not a paraphrase
+ *
+ * A row is the model's name, its capability icons (reasoning / tool calling /
+ * vision), its default tags, and the catalog's own figures — context window
+ * and customer price per eligible route per 1M tokens. Provider links open this same grouped list.
+ * The wire id keeps its use in configuration and
+ * lives in a "Copy model ID" item in the row's own menu: one click for the
+ * few who need it, no line for everyone who does not.
+ */
+import { Button } from '../../../primitives/button.js';
+import { errorToast } from '../../../primitives/toast.js';
+import { isManagedModelId } from '@kortix/llm-catalog';
+import { useModelAccess, useModelDefaults, useModelEnablement, useProjectModelPickerCatalog, useProjectModels, } from '@kortix/sdk/react';
+import { useMemo, useRef, useState } from 'react';
+import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../../primitives/input-group.js';
+import { MagnifyingGlassIcon as Search } from '@phosphor-icons/react';
+import { useSlashFocus } from '../../../internal/hooks/index.js';
+import { buildModelGroups } from './model-rows.js';
+/**
+ * `search` used to be driven by the provider modal's always-on search bar,
+ * which JAY-510 deleted (it sat above the tabs and filtered whichever tab
+ * happened to be open). Passing `''` would have silently dropped model search,
+ * so this tab owns its own input when no host drives one — one search box per
+ * thing being searched, instead of one box for three different lists.
+ */
+export function ModelsTab({ projectId, search: hostSearch, canWrite = false, }) {
+    const tAccess = useTranslations('modelAccess');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tList = useTranslations('modelsList');
+    const [ownSearch, setOwnSearch] = useState('');
+    const search = hostSearch ?? ownSearch;
+    const ownsSearch = hostSearch === undefined;
+    // The SAME server list the session picker renders (`GET /model-picker`), so
+    // the two views can never show different models — and each model's `enabled`
+    // flag is resolved server-side and enforced by the gateway, so a switch here
+    // is the one and only thing deciding whether it appears there.
+    const models = useProjectModels(projectId);
+    const pickerCatalog = useProjectModelPickerCatalog(projectId);
+    const enablement = useModelEnablement(projectId);
+    // Prices below are the provider's base price; the fee is added when the call bills.
+    const platformFee = pickerCatalog?.platformFeePercent;
+    const access = useModelAccess(projectId);
+    // Setting the project default from here is what makes the locked row
+    // actionable: the only way to turn the default off is to make something else
+    // the default, so the control for that belongs on the same screen.
+    //
+    // This is also the home for the ACCOUNT default ("my default model"). It
+    // used to be a button stacked under the session model picker, alongside two
+    // other scopes, where nothing on screen said which model held any of them.
+    // Here both scopes sit on the row they apply to and each one BADGES the
+    // model that currently holds it — see the `Default` / `Your default` tags
+    // below. The picker keeps a one-click star for the account default only;
+    // this tab is where the scopes are actually managed.
+    const defaults = useModelDefaults(projectId);
+    const groups = useMemo(() => buildModelGroups(models, search), [models, search]);
+    const enabledCount = useMemo(() => models.filter((m) => m.enabled).length, [models]);
+    // Only when this tab draws its own search; a host's search is the host's.
+    const searchRef = useRef(null);
+    useSlashFocus(searchRef, ownsSearch && models.length > 0);
+    if (models.length === 0) {
+        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('textc7a9aa43558f') }), _jsx("p", { className: "text-muted-foreground max-w-xs text-xs text-pretty", children: tI18nComplete.raw('text2cedbc7a36d8') })] }));
+    }
+    // One managed model clears the ZDR + US claim when it serves from Kortix's
+    // own managed pool. Only a Morph route breaks it; a missing price feed still
+    // serves from the verified US ZDR pool.
+    const holdsDataClaim = (modelID) => {
+        const routes = pickerCatalog?.managedPricingRoutes?.[modelID];
+        return isManagedModelId(modelID) && !routes?.some((route) => route.route === 'morph');
+    };
+    // No horizontal padding of its own: `CapabilityPageShell` supplies the page
+    // column, and 20px more here indented this tab's content past the tab strip
+    // that selects it.
+    return (_jsxs("div", { className: "pb-4", children: [_jsxs("div", { className: "mb-4 flex items-center gap-3", children: [ownsSearch && (_jsxs(InputGroupSearch, { className: "min-w-0 flex-1", children: [_jsx(InputGroupSearchIcon, { children: _jsx(Search, {}) }), _jsx(InputGroupSearchInput, { ref: searchRef, type: "text", placeholder: tI18nComplete.raw('text2380f018cc45'), autoComplete: "off", value: ownSearch, onChange: (event) => setOwnSearch(event.target.value) }), _jsx(InputGroupSearchClear, { onClick: () => setOwnSearch('') })] })), !enablement.usingDefaults && (_jsx(Button, { variant: "ghost", size: "sm", disabled: !canWrite || enablement.isUpdating || access.isUpdating, className: "text-muted-foreground hover:text-foreground h-7 shrink-0 px-2 text-xs", onClick: () => void enablement
+                            .resetToDefaults()
+                            .catch((error) => errorToast(error instanceof Error ? error.message : tAccess('resetError'))), children: tI18nComplete.raw('text5eed7e9fc8f3') })), _jsx("span", { className: "text-muted-foreground ml-auto shrink-0 text-xs tabular-nums", children: tList('onCount', { on: enabledCount, total: models.length }) })] }), groups.length === 0 ? (_jsx("div", { className: "flex min-h-[200px] items-center justify-center px-6 text-center", children: _jsx("p", { className: "text-muted-foreground text-xs", children: search
+                        ? tI18nComplete('textb475669b9d30', { value0: search })
+                        : tI18nComplete.raw('textb12da9202e8c') }) })) : (_jsx("div", { className: "space-y-6", children: groups.map((group) => {
+                    return (_jsx(ModelsTabGroup, { group: group, access: access, enablement: enablement, defaults: defaults, pickerCatalog: pickerCatalog, canWrite: canWrite, holdsDataClaim: holdsDataClaim, platformFee: platformFee }, group.providerID));
+                }) }))] }));
+}

package/dist/customize/sections/llm-provider/provider-access-menu.d.ts

@@ -0,0 +1,10 @@
+import type { useModelAccess } from '@kortix/sdk/react';
+type Access = ReturnType<typeof useModelAccess>;
+/** Credential configuration stays available while inference is disabled. */
+export declare function ProviderAccessMenu({ access, providerId, name, canWrite, }: {
+    access: Access;
+    providerId: string;
+    name: string;
+    canWrite: boolean;
+}): import("react").JSX.Element | null;
+export {};

package/dist/customize/sections/llm-provider/provider-access-menu.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+import { DotsThreeIcon } from '@phosphor-icons/react';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../../primitives/dropdown-menu.js';
+import { errorToast } from '../../../primitives/toast.js';
+/** Credential configuration stays available while inference is disabled. */
+export function ProviderAccessMenu({ access, providerId, name, canWrite, }) {
+    const t = useTranslations('modelAccess');
+    if (!access.data?.enforced)
+        return null;
+    const enabled = !access.data.disabledProviders.includes(providerId);
+    const isDefault = access.defaultProvider === providerId;
+    return (_jsxs("div", { "data-provider-access": providerId, className: "flex shrink-0 items-center gap-1.5", children: [!enabled && _jsx(Badge, { variant: "secondary", size: "sm", children: t('disabled') }), canWrite && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "text-muted-foreground size-6", "aria-label": t('manageProvider', { name }), children: _jsx(DotsThreeIcon, { className: "size-4 shrink-0" }) }) }), _jsxs(DropdownMenuContent, { align: "start", className: "max-w-xs", children: [_jsx(DropdownMenuItem, { disabled: access.isUpdating || (isDefault && enabled), onSelect: () => {
+                                    void access
+                                        .setEnabled({ target: 'provider', id: providerId, enabled: !enabled })
+                                        .catch((error) => {
+                                        errorToast(error instanceof Error ? error.message : t('providerError'));
+                                    });
+                                }, children: enabled ? t('disableProviderAction') : t('enableProviderAction') }), _jsx("p", { className: "text-muted-foreground px-2 py-1.5 text-xs text-pretty", children: isDefault && enabled ? t('defaultProviderHint') : t('credentialsHint') })] })] }))] }));
+}

package/dist/customize/sections/llm-provider/provider-loading-state.d.ts

@@ -0,0 +1,10 @@
+export declare function isProviderStateLoading(input: {
+    secretsLoading: boolean;
+    /**
+     * The secrets read has answered at least once, with data or an error. A later
+     * refetch is background work: TanStack Query v5 resets a query without data
+     * to `pending` on refetch, and a spinner here unmounts the provider list,
+     * whose readers remount and refetch — an unbounded request loop.
+     */
+    secretsSettledOnce?: boolean;
+}): boolean;

package/dist/customize/sections/llm-provider/provider-loading-state.js

@@ -0,0 +1,3 @@
+export function isProviderStateLoading(input) {
+    return input.secretsLoading && !input.secretsSettledOnce;
+}

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

@@ -0,0 +1,42 @@
+import type { QueryClient } from '@tanstack/react-query';
+/**
+ * What the ChatGPT-subscription card offers, given what the project actually
+ * holds.
+ *
+ * The card used to decide this from LOCAL state only (`phase`), which knows
+ * nothing about a credential connected in another tab, another surface, or
+ * before this page load. It therefore said "Connect ChatGPT" over an already
+ * connected subscription and — the reason this file exists — offered no way to
+ * REMOVE one. That was the whole product: a subscription could be connected
+ * from four surfaces and disconnected from none.
+ *
+ * `providerDisconnectPlan` does carry `oauthProvider: 'openai'`, so removing
+ * the OpenAI API KEY takes the subscription with it — but the openai row only
+ * renders when `OPENAI_API_KEY` exists. Connect only the subscription (the
+ * common case: it is the whole point of "sign in with ChatGPT") and there is no
+ * row, no remove control, and no way back out.
+ *
+ * The server side was never the problem: `DELETE /projects/:id/oauth/openai`
+ * deletes the credential, audits it, and refreshes the model catalog. Nothing
+ * called it.
+ */
+type SubscriptionAction = 'connect' | 'reconnect' | 'disconnect';
+export declare function subscriptionIsConnected(secretNames: Iterable<string>): boolean;
+/**
+ * Removes the subscription credential rows from the cached secrets list after
+ * `DELETE /projects/:id/oauth/openai` succeeded.
+ *
+ * The card must not wait for a refetch to show the result. `GET /secrets`
+ * loads the project manifest on every call, and the provider refresh that
+ * follows a disconnect starts several more reads. Until one of them returned,
+ * the card kept "ChatGPT subscription connected." and its Disconnect button.
+ *
+ * The cancel comes first: a read that started before the delete would
+ * otherwise land after this write and put the credential back.
+ */
+export declare function forgetSubscriptionCredentials(queryClient: QueryClient, projectId: string): Promise<void>;
+export declare function subscriptionPrimaryAction(input: {
+    connected: boolean;
+    failed: boolean;
+}): SubscriptionAction;
+export {};

package/dist/customize/sections/llm-provider/subscription-control.js

@@ -0,0 +1,42 @@
+import { qk } from '@kortix/sdk/react';
+import { CODEX_AUTH_JSON_SECRET_NAME, LEGACY_RUNTIME_AUTH_JSON_SECRET_NAME } from './constants.js';
+function isSubscriptionCredential(name) {
+    return name === CODEX_AUTH_JSON_SECRET_NAME || name === LEGACY_RUNTIME_AUTH_JSON_SECRET_NAME;
+}
+export function subscriptionIsConnected(secretNames) {
+    for (const name of secretNames) {
+        if (isSubscriptionCredential(name))
+            return true;
+    }
+    return false;
+}
+/**
+ * Removes the subscription credential rows from the cached secrets list after
+ * `DELETE /projects/:id/oauth/openai` succeeded.
+ *
+ * The card must not wait for a refetch to show the result. `GET /secrets`
+ * loads the project manifest on every call, and the provider refresh that
+ * follows a disconnect starts several more reads. Until one of them returned,
+ * the card kept "ChatGPT subscription connected." and its Disconnect button.
+ *
+ * The cancel comes first: a read that started before the delete would
+ * otherwise land after this write and put the credential back.
+ */
+export async function forgetSubscriptionCredentials(queryClient, projectId) {
+    const queryKey = qk.project.secrets(projectId);
+    await queryClient.cancelQueries({ queryKey });
+    queryClient.setQueryData(queryKey, (cache) => {
+        if (!cache)
+            return cache;
+        if (Array.isArray(cache))
+            return cache.filter((item) => !isSubscriptionCredential(item.name));
+        return { ...cache, items: cache.items.filter((item) => !isSubscriptionCredential(item.name)) };
+    });
+}
+export function subscriptionPrimaryAction(input) {
+    // A failure outranks the stored credential: the thing on file did not work,
+    // so the useful button is the one that replaces it.
+    if (input.failed)
+        return 'reconnect';
+    return input.connected ? 'disconnect' : 'connect';
+}

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

@@ -0,0 +1,43 @@
+/**
+ * The dialog's three tabs — `QUICK_LLM_TABS` in `gateway-view.tsx`, aliased
+ * here so the modal's prop types and the strip it renders can never name a
+ * different set. Adding a tab to the dialog is one edit, in that file.
+ *
+ *  - `providers` — "where do my models come from" (`ProviderConnect`): ONE
+ *     flat list of providers, one key field each.
+ *  - `models`    — "which of them can this project use" (`ModelsTab`).
+ *  - `custom`    — "connect something that isn't in the list"
+ *     (`CustomProviderForm`).
+ *
+ * Custom used to be a fourth section stacked under the provider list. It is a
+ * different job done maybe once, by one person in a hundred, and every reader
+ * who was not that person had to scroll past it — so it became a tab, which is
+ * exactly what a tab is for.
+ */
+import type { QuickLlmTab } from '../gateway-view.js';
+export type ActiveTab = QuickLlmTab;
+export interface ProjectProviderModalProps {
+    projectId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    defaultTab?: ActiveTab;
+    /**
+     * Read-only members see connected providers + the catalog but not the
+     * add/connect/remove controls (which POST and would 403). Fails safe: a
+     * missing value is treated as read-only.
+     */
+    canWrite?: boolean;
+}
+export interface CustomFormState {
+    providerId: string;
+    name: string;
+    baseURL: string;
+    apiKey: string;
+    modelId: string;
+    modelName: string;
+}
+export type ChatGptPhase = 'idle' | 'waiting' | 'done';
+export type ChatGptChallenge = {
+    url: string;
+    code: string | null;
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/customize/sections/llm-provider/use-connected-providers.d.ts

@@ -0,0 +1,6 @@
+import { type LlmProviderEntry } from '../../../internal/lib/llm-providers.js';
+export declare function useConnectedProviders(projectId: string, enabled: boolean): {
+    secretsQuery: import("@tanstack/react-query").UseQueryResult<import("@kortix/sdk").ProjectSecretsResponse, Error>;
+    connectedProviders: LlmProviderEntry[];
+    providerStateLoading: boolean;
+};

package/dist/customize/sections/llm-provider/use-connected-providers.js

@@ -0,0 +1,70 @@
+'use client';
+import { LLM_PROVIDERS } from '../../../internal/lib/llm-providers.js';
+import { isProviderAuthSatisfied } from '@kortix/llm-catalog';
+import { listProjectSecrets } from '@kortix/sdk';
+import { useUiHostConfig } from '../../../providers/ui-provider.js';
+import { contract, qk, useProjectModelPickerCatalog, useRuntimeProviders } from '@kortix/sdk/react';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useTranslations } from '../../../i18n/index.js';
+import { PROJECT_ACTIONS } from '../../../internal/lib/project-actions.js';
+import { useProjectCan } from '../../../internal/lib/use-project-can.js';
+import { CODEX_AUTH_JSON_SECRET_NAME, LEGACY_RUNTIME_AUTH_JSON_SECRET_NAME, MANAGED_MODEL_ID_SET, } from './constants.js';
+import { isProviderStateLoading } from './provider-loading-state.js';
+import { useLlmProviderCatalogRevision } from './use-live-catalog.js';
+import { buildCodexProvider, buildKortixManagedProvider } from './utils.js';
+export function useConnectedProviders(projectId, enabled) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    // Re-renders this hook when LlmCatalogBootstrap's fetch lands (module
+    // bindings are reassigned, not mutated — a plain memo dependency array
+    // won't otherwise notice). See use-live-catalog.ts.
+    const catalogRevision = useLlmProviderCatalogRevision();
+    // A member without project.secret.read gets 403 for this read. Skip it once
+    // the probe says so; project keys are then unknown to this caller, and the
+    // pooled connections they may use are listed separately.
+    const secretRead = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_SECRET_READ);
+    const secretsQuery = useQuery({
+        queryKey: qk.project.secrets(projectId),
+        queryFn: () => listProjectSecrets(projectId),
+        ...contract('config'),
+        enabled: enabled && secretRead.allowed !== false,
+    });
+    const secretNames = useMemo(() => {
+        const data = secretsQuery.data;
+        const items = Array.isArray(data) ? data : (data?.items ?? []);
+        return new Set(items.map((item) => item.name));
+    }, [secretsQuery.data]);
+    const runtimeProvidersQuery = useRuntimeProviders();
+    const { managedModelsEnabled } = useUiHostConfig();
+    const { data: ocProviders } = runtimeProvidersQuery;
+    const pickerCatalog = useProjectModelPickerCatalog(enabled ? projectId : null);
+    const kortixProvider = useMemo(() => {
+        if (!managedModelsEnabled || !pickerCatalog)
+            return null;
+        // Read the picker's live cache, not the independently cached runtime projection.
+        return buildKortixManagedProvider({
+            connected: ['kortix'],
+            all: [
+                {
+                    id: 'kortix',
+                    models: Object.fromEntries(Object.entries(pickerCatalog.models).filter(([, model]) => model.enabled !== false)),
+                },
+            ],
+        }, MANAGED_MODEL_ID_SET, tI18nComplete.raw('texte0a770200f93'));
+    }, [managedModelsEnabled, pickerCatalog, tI18nComplete]);
+    const connectedProviders = useMemo(() => {
+        const hasCodexSubscription = secretNames.has(CODEX_AUTH_JSON_SECRET_NAME) ||
+            secretNames.has(LEGACY_RUNTIME_AUTH_JSON_SECRET_NAME);
+        const byo = LLM_PROVIDERS.filter((p) => p.id !== 'kortix' && isProviderAuthSatisfied(p.authRequirement, (v) => secretNames.has(v)));
+        const subscription = hasCodexSubscription
+            ? [buildCodexProvider(ocProviders, tI18nComplete)]
+            : [];
+        return kortixProvider ? [kortixProvider, ...subscription, ...byo] : [...subscription, ...byo];
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- catalogRevision drives a re-read of the module-level LLM_PROVIDERS binding, not a value used directly here
+    }, [secretNames, kortixProvider, ocProviders, catalogRevision]);
+    const providerStateLoading = isProviderStateLoading({
+        secretsLoading: secretsQuery.isLoading,
+        secretsSettledOnce: secretsQuery.isFetched,
+    });
+    return { secretsQuery, connectedProviders, providerStateLoading };
+}

package/dist/customize/sections/llm-provider/use-live-catalog.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Re-renders whenever `LLM_PROVIDERS` (apps/web/src/lib/llm-providers.ts) is
+ * reassigned by a live catalog fetch — a plain revision counter behind
+ * `useSyncExternalStore`, not a copy of the data itself. Components that
+ * already read `LLM_PROVIDERS` at render time (via `useMemo`, etc.) just
+ * need to be in the render tree that re-runs; calling this hook is what
+ * causes that re-run.
+ */
+export declare function useLlmProviderCatalogRevision(): number;
+/**
+ * Fetches the LIVE, server-refreshed provider catalog
+ * (`GET /projects/:id/llm-catalog/providers` — runtimeModelCatalog, the same
+ * 24h-refreshed, atomic-last-known-good source every other gateway endpoint
+ * reads) and pushes it over the baked seed via `applyLiveLlmProviderCatalog`.
+ * Mount this ONCE near the top of the provider modal (not per-tab) — every
+ * consumer of `LLM_PROVIDERS` elsewhere in the app benefits from the same
+ * live data once it lands, since the exported bindings are reassigned in
+ * place (see llm-providers.ts's module doc comment).
+ *
+ * staleTime is long: this is catalog metadata (env vars, model names), not a
+ * hot path — matching the API's own 24h refresh cadence is plenty fresh.
+ */
+export declare function useLiveLlmProviderCatalog(projectId: string, enabled: boolean): import("@tanstack/react-query").UseQueryResult<import("@kortix/sdk").ProjectLlmCatalogProvidersResponse, Error>;