@kortix/ui 0.14.3 → 0.14.4

package/dist/session/models/model-selector.js

@@ -0,0 +1,328 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../primitives/button.js';
+import { CommandGroup, CommandInput, CommandItem, CommandList, CommandPopover, CommandPopoverContent, CommandPopoverTrigger, CommandSeparator, } from '../../primitives/command.js';
+import Loading from '../../primitives/loading.js';
+import { MODEL_SELECTOR_PROVIDER_IDS, ProviderLogo } from '../../internal/lib/provider-branding.js';
+import { cn } from '../../lib/utils.js';
+import { useProviderModalStore } from '../../internal/stores/provider-modal-store.js';
+import { useFeatureFlag, useModelAccess, useModelStore, } from '@kortix/sdk/react';
+import { CheckIcon as Check, CaretDownIcon as ChevronDown, CaretRightIcon as CaretRight, CreditCardIcon as CreditCard, KeyIcon as KeyRound, PlusIcon as Plus, SlidersHorizontalIcon as SlidersHorizontal, StarIcon as Star, } from '@phosphor-icons/react';
+import { useTranslations } from '../../i18n/index.js';
+import { useSessionIds } from '../../providers/session-ids.js';
+import { useUiComponents } from '../../providers/ui-provider.js';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { ModelSearchEmpty } from './model-search-empty.js';
+import { resolveAvailableSelectedModel } from './model-availability.js';
+import { isPickerGroupOpen, modelItemValue, pickerGroupId, pickerGroupLabel, buildPickerSections, splitModelLabel, } from './model-grouping.js';
+import { modelInDefaultView } from '@kortix/sdk';
+import { isSubscriptionModel, pickerModelName, shouldShowFreeTag } from './model-tags.js';
+import { useModelConnectionGate } from './use-model-connection-gate.js';
+// Re-export for consumers
+export { Tag };
+export function ConnectProviderDialog({ open, onOpenChange, providers: _providers, }) {
+    const { openProviderModal, closeProviderModal } = useProviderModalStore();
+    useEffect(() => {
+        if (open)
+            openProviderModal('providers');
+        else
+            closeProviderModal();
+    }, [open, openProviderModal, closeProviderModal]);
+    const isStoreOpen = useProviderModalStore((s) => s.isOpen);
+    useEffect(() => {
+        if (!isStoreOpen && open)
+            onOpenChange(false);
+    }, [isStoreOpen, open, onOpenChange]);
+    return null;
+}
+import Hint from '../../primitives/hint.js';
+import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
+import { useProjectPageCans } from '../../internal/lib/use-project-can.js';
+import { Tag } from '../../primitives/tag.js';
+/**
+ * One model row.
+ *
+ * Extracted because it renders in TWO places now — the pinned "Your default"
+ * section and the provider group the model actually belongs to — and ninety
+ * lines of JSX copied twice is ninety lines that drift.
+ *
+ * `groupProviderID` is the RESOLVED provider (`pickerGroupId`), never
+ * `model.providerID`: under the gateway every model is registered as `kortix`,
+ * so the model's own id would paint the Kortix mark on every row.
+ */
+function ModelRow({ model, groupProviderID, groupProviderName, isSelected, isAccountDefault, defaultControls, onSelect, scope, showSubscriptionTag = true, }) {
+    const t = useTranslations('modelSelector');
+    const isFree = shouldShowFreeTag(model);
+    const isSubscription = isSubscriptionModel(model);
+    // Display name only — `model.modelName` still carries " (ChatGPT)" for search
+    // and for the aria labels below, where there is no group heading to lean on.
+    const { lead, trail } = splitModelLabel(pickerModelName(model));
+    return (_jsxs(CommandItem, { value: modelItemValue(scope, model), 
+        /*
+          `group` so the trailing slot can react to this row's hover AND to
+          cmdk's keyboard highlight, which lands as `data-selected` here.
+  
+          The two `bg-*` overrides are a FIX, not a preference. `CommandItem`
+          paints its hover and highlight with `bg-accent`, and in the dark theme
+          `--accent` and `--popover` resolve to the same surface token in dark mode,
+          so the row highlight was mathematically
+          invisible against the popover it sits on. Light mode was fine, which is
+          why it read as "sometimes there's a hover". `--hover` and `--active` are
+          the tokens the design system defines for exactly this — a transient
+          tint and a persistent selected fill, both ink-on-surface at a fixed
+          alpha, so they cannot collide with whatever surface they land on.
+        */
+        className: cn('group py-1', 
+        // Same `data-nav` scope as `CommandItem`'s own selected classes, so
+        // tailwind-merge replaces them instead of stacking a second selector.
+        'hover:bg-hover [&:not([data-nav=pointer]_*)]:data-[selected=true]:bg-hover', isSelected && 'bg-active [&:not([data-nav=pointer]_*)]:data-[selected=true]:bg-active'), 
+        /* The raw id no longer has a line of its own. It is still the only way to
+           tell two same-named models apart, so it stays reachable on hover
+           instead of costing every row a second line. */
+        title: model.modelID, onSelect: () => onSelect(model), children: [_jsx(ProviderLogo, { providerID: groupProviderID, name: groupProviderName, size: "small", 
+                /* Stripped of the tinted tile so it reads as a mark on the row, not a
+                   chip — `cn` puts these last, so they win over the component's own
+                   `bg-zinc-*`. */
+                className: "size-4 rounded-none bg-transparent" }), _jsxs("span", { className: "min-w-0 flex-1 truncate leading-tight", children: [_jsx("span", { className: "text-foreground font-medium", children: lead }), trail ? _jsxs("span", { className: "text-muted-foreground font-normal", children: [" ", trail] }) : null] }), isFree ? (_jsx(Tag, { variant: "free", children: t('free') })) : isSubscription && showSubscriptionTag ? (_jsx(Tag, { children: t('included') })) : null, _jsxs("span", { className: "relative flex size-6 shrink-0 items-center justify-center", children: [isSelected && (_jsx(Check, { className: "text-foreground size-4 group-hover:opacity-0 group-data-[selected=true]:opacity-0" })), defaultControls && (_jsx("button", { type: "button", "aria-label": isAccountDefault
+                            ? t('defaultAria', { model: model.modelName })
+                            : t('setDefaultAria', { model: model.modelName }), title: isAccountDefault ? t('defaultTitle') : t('setDefaultTitle'), 
+                        /* No `aria-pressed`: that promises a toggle, and clicking the
+                           filled star does nothing. Clearing an account default is a real
+                           action with a real fallback behind it, and it belongs where the
+                           default is managed, not on a hover affordance. */
+                        /* cmdk highlights on pointer move and selects on the item's own
+                           click. Stopping both here keeps "star this" from also meaning
+                           "switch to this" — the popover stays open so a default can be set
+                           without losing the list. */
+                        onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
+                            e.stopPropagation();
+                            if (isAccountDefault)
+                                return;
+                            defaultControls.onSetAccountDefault({
+                                providerID: model.providerID,
+                                modelID: model.modelID,
+                            });
+                        }, className: cn('absolute inset-0 flex cursor-pointer items-center justify-center rounded-md', 'text-muted-foreground/70 hover:text-foreground hover:bg-foreground/10', 
+                        /* `opacity` is NOT in this list, on purpose — see above. These
+                           only ever run on the one row the cursor is on, so they cannot
+                           leave a trail. */
+                        'duration-normal transition-[color,background-color,transform] ease-out', 
+                        /* Press feedback, only where a press does something — the
+                           already-default star is a no-op, and a control that recoils
+                           under the finger while changing nothing is a worse lie than no
+                           feedback. `motion-safe` so reduced motion loses the movement
+                           and keeps every colour cue, rather than losing both. */
+                        !isAccountDefault && 'motion-safe:active:scale-[0.96]', 
+                        /* Hidden means BOTH invisible and unclickable — an opacity-0
+                           button still takes clicks, which would put a dead hit target
+                           over the row's own click area. Focus is unaffected by
+                           pointer-events, so the keyboard path still reaches it. */
+                        'pointer-events-none opacity-0', 'group-hover:pointer-events-auto group-hover:opacity-100', 'group-data-[selected=true]:pointer-events-auto group-data-[selected=true]:opacity-100', 'focus-visible:pointer-events-auto focus-visible:opacity-100', 
+                        /* A 0.6px ring with `outline-none` is not a focus indicator —
+                           on a 1x display it rounds away entirely, so keyboard users
+                           tabbing to the default-star had no visible target at all. */
+                        'focus-visible:ring-kortix-base focus-visible:ring-2 focus-visible:outline-none', 
+                        /* The default keeps its star at rest ONLY when the check is not
+                           already using the slot. Selected wins; see above. */
+                        isAccountDefault && 'text-foreground cursor-default hover:bg-transparent', isAccountDefault && !isSelected && 'pointer-events-auto opacity-100'), children: isAccountDefault ? (_jsx(Star, { weight: "fill", className: "size-3.5" })) : (_jsx(Star, { className: "size-3.5" })) }))] })] }));
+}
+/** A section heading in the picker — plain muted text. The colour lives on this
+ *  span rather than as a `[&_[cmdk-group-heading]]` override because
+ *  `CommandGroup` sets `text-foreground` on the heading element itself; a child
+ *  wins on its own colour without a specificity fight. */
+function GroupHeading({ children }) {
+    return _jsx("span", { className: "text-muted-foreground font-medium tracking-wide", children: children });
+}
+export function ModelSelector({ models, selectedModel, onSelect, defaultControls, unsetLabel, disabled = false, modelsLoading = false, triggerLabelClassName, triggerVariant = 'ghost', offerProviderAccounts = false, open: openProp, onOpenChange, }) {
+    const tModel = useTranslations('modelSelector');
+    const t = useTranslations('threads');
+    // Controlled when `open` is supplied, uncontrolled otherwise — Radix's own
+    // rule. `setOpen` below is the single write path every internal caller
+    // already goes through (`setOpen(false)` after picking a model or a
+    // default), so a controlled parent hears about those closes too rather than
+    // being silently desynced from a popover that shut itself.
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const isControlled = openProp !== undefined;
+    const open = isControlled ? openProp : uncontrolledOpen;
+    const setOpen = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const [search, setSearch] = useState('');
+    const [toggledGroups, setToggledGroups] = useState(new Map());
+    const { canConnectProvider, openConnectProvider, openUpgrade, modal: connectionModal, entitlementsPending, isSelectableModel, showUpgradeOption, } = useModelConnectionGate(models);
+    const projectId = useSessionIds().projectId ?? null;
+    // Bring your own ChatGPT subscription (pooled provider secrets). Any member
+    // connects their own account from here; Customize is not needed. Hidden when
+    // a manager disabled the ChatGPT provider for the project.
+    const tPooled = useTranslations('pooledSecrets');
+    const pooledSecrets = useFeatureFlag(projectId, 'pooled_provider_secrets');
+    const { ProviderAccountsModal } = useUiComponents();
+    const chatGptPossible = !!ProviderAccountsModal && offerProviderAccounts && !!projectId && pooledSecrets.enabled;
+    const modelAccess = useModelAccess(chatGptPossible ? projectId : null);
+    const chatGptAvailable = chatGptPossible && !(modelAccess.data?.disabledProviders ?? []).includes('codex');
+    const [chatGptOpen, setChatGptOpen] = useState(false);
+    // Every write this picker offers is `project.model.write` on the API: the
+    // star sets the ACCOUNT default (the default for every member, not a personal
+    // one), and "+" / sliders open the provider modal. A member without the leaf
+    // got a "You don't have permission" toast for each. Shown on a RECEIVED
+    // allow only, from the shared project-page probe batch.
+    const caps = useProjectPageCans(projectId ?? undefined);
+    const canManageModels = !projectId || caps[PROJECT_ACTIONS.PROJECT_MODEL_WRITE]?.allowed === true;
+    const rowDefaultControls = canManageModels ? defaultControls : undefined;
+    const availableSelectedModel = entitlementsPending
+        ? selectedModel
+        : resolveAvailableSelectedModel(selectedModel, isSelectableModel);
+    const current = models.find((m) => m.providerID === availableSelectedModel?.providerID &&
+        m.modelID === availableSelectedModel?.modelID);
+    const displayName = current?.modelName || unsetLabel || t('noModel');
+    useEffect(() => {
+        if (!open) {
+            setSearch('');
+            // Back to the defaults on every open. A section the user toggled last
+            // time is not a preference they set; carrying it would make the
+            // picker's height depend on history.
+            setToggledGroups(new Map());
+        }
+    }, [open]);
+    // The store's visibility rule (newest per family + flagships + user pins)
+    // curates the NO-SEARCH view for native providers — the client twin of the
+    // `enabled` stamping `/model-picker` gives gateway catalogs. See
+    // modelInDefaultView.
+    const pickerModelStore = useModelStore(models);
+    const visibleModels = useMemo(() => {
+        const q = search.toLowerCase();
+        return models
+            .filter((m) => m.enabled !== false &&
+            (!q ||
+                (m.modelName || '').toLowerCase().includes(q) ||
+                (m.modelID || '').toLowerCase().includes(q) ||
+                (m.providerName || '').toLowerCase().includes(q)) &&
+            modelInDefaultView(m, {
+                search,
+                isStoreVisible: pickerModelStore.isVisible,
+                selected: selectedModel,
+            }))
+            .sort((a, b) => a.modelName.localeCompare(b.modelName));
+    }, [models, search, pickerModelStore.isVisible, selectedModel]);
+    /** Is there anything to pick AT ALL, ignoring the search box? The empty
+     *  state below branches on this: "no models match your search" and "you have
+     *  no models" are different problems with different ways out. */
+    const hasAnyModel = useMemo(() => models.some((m) => m.enabled !== false), [models]);
+    /** Does this member already have ChatGPT subscription models? Then the row
+     *  manages their accounts instead of offering to connect one. */
+    const hasChatGptModels = useMemo(() => models.some((m) => m.enabled !== false && pickerGroupId(m) === 'codex'), [models]);
+    const grouped = useMemo(() => {
+        const groups = new Map();
+        for (const m of visibleModels) {
+            const groupID = pickerGroupId(m);
+            const existing = groups.get(groupID);
+            if (existing) {
+                existing.models.push(m);
+            }
+            else {
+                groups.set(groupID, {
+                    providerID: groupID,
+                    // NEVER `m.providerName` here — under the gateway it's always
+                    // "Kortix" (opencode's raw provider name), which is exactly the
+                    // "every provider shows as Kortix" bug. Label by the resolved real
+                    // provider id instead. See pickerGroupLabel's doc comment.
+                    providerName: pickerGroupLabel(groupID, m),
+                    models: [m],
+                });
+            }
+        }
+        const entries = Array.from(groups.values());
+        entries.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);
+        });
+        return entries;
+    }, [visibleModels]);
+    /** Provider groups, with any multi-credential provider split per account. */
+    const searching = search.trim().length > 0;
+    const sections = useMemo(() => buildPickerSections(grouped), [grouped]);
+    /**
+     * The account default, lifted to the top of the list in its own section.
+     *
+     * The picker's job for a non-technical user is "pick the one I use", and
+     * before this that model was somewhere inside an alphabetical provider group
+     * with no way to find it except by already knowing its name. Pinning it costs
+     * one row and removes the hunt.
+     *
+     * Resolved against `visibleModels`, not the raw list, so it obeys the search
+     * box and the enablement filter — a default the project has since turned off
+     * does not get a section of its own claiming otherwise, and typing a query it
+     * does not match does not leave it stranded at the top. `groupID` matches how
+     * the model is grouped below so the pinned copy shows the same provider mark.
+     */
+    const pinnedDefault = useMemo(() => {
+        const ref = defaultControls?.accountDefault;
+        if (!ref)
+            return null;
+        const model = visibleModels.find((m) => m.providerID === ref.providerID && m.modelID === ref.modelID);
+        if (!model)
+            return null;
+        const groupID = pickerGroupId(model);
+        return {
+            model,
+            providerID: groupID,
+            providerName: pickerGroupLabel(groupID, model),
+        };
+    }, [defaultControls?.accountDefault, visibleModels]);
+    const handleSelect = useCallback((model) => {
+        onSelect({ providerID: model.providerID, modelID: model.modelID });
+        setOpen(false);
+    }, [onSelect, setOpen]);
+    const handleOpenProviderModal = useCallback((tab) => {
+        setOpen(false);
+        openConnectProvider(tab);
+    }, [openConnectProvider, setOpen]);
+    const handleUpgrade = useCallback(() => {
+        setOpen(false);
+        openUpgrade();
+    }, [openUpgrade, setOpen]);
+    const handleOpenChatGpt = useCallback(() => {
+        setOpen(false);
+        setChatGptOpen(true);
+    }, [setOpen]);
+    return (_jsxs(_Fragment, { children: [connectionModal, projectId && chatGptPossible && ProviderAccountsModal && (_jsx(ProviderAccountsModal, { projectId: projectId, providerId: "codex", open: chatGptOpen, onOpenChange: setChatGptOpen })), _jsxs(CommandPopover, { open: disabled ? false : open, onOpenChange: (next) => !disabled && setOpen(next), children: [_jsx(CommandPopoverTrigger, { children: _jsxs(Button, { type: "button", variant: triggerVariant, size: "sm", className: cn('rounded-lg hit-area-y-3', triggerVariant === 'ghost' && 'text-muted-foreground'), children: [_jsx("span", { className: cn('max-w-30 truncate', triggerLabelClassName), children: displayName }), _jsx(ChevronDown, { className: cn('duration-moderate size-3 transition-transform ease-out', open && 'rotate-180') })] }) }), _jsx(CommandPopoverContent, { side: "top", align: "start", sideOffset: 8, className: "w-[min(300px,calc(100vw-1.5rem))]", children: _jsxs(_Fragment, { children: [_jsx(CommandInput, { compact: true, placeholder: tModel('search'), value: search, onValueChange: setSearch, rightElement: canManageModels && canConnectProvider ? (_jsxs("div", { className: "-mr-0.5 flex shrink-0 items-center gap-0.5", children: [_jsx(Hint, { label: tModel('connectProvider'), side: "top", className: "z-50", children: _jsx("button", { type: "button", "aria-label": tModel('addProvider'), onClick: () => handleOpenProviderModal('providers'), className: "text-muted-foreground hover:text-foreground hover:bg-muted flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors", children: _jsx(Plus, { className: "size-4" }) }) }), _jsx(Hint, { label: tModel('manageModels'), side: "top", className: "z-50", children: _jsx("button", { type: "button", "aria-label": tModel('manageModels'), onClick: () => handleOpenProviderModal('models'), className: "text-muted-foreground hover:text-foreground hover:bg-muted flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors", children: _jsx(SlidersHorizontal, { className: "size-4" }) }) })] })) : undefined }), grouped.length > 1 && _jsx(CommandSeparator, { className: "bg-border/60" }), _jsx(CommandList, { className: "max-h-[380px]", children: modelsLoading || entitlementsPending ? (_jsx("div", { className: "flex min-h-32 items-center justify-center", role: "status", "aria-label": tModel('loading'), children: _jsx(Loading, { className: "text-muted-foreground size-4 shrink-0" }) })) : grouped.length > 0 ? (_jsxs(_Fragment, { children: [pinnedDefault && (_jsxs(_Fragment, { children: [_jsx(CommandGroup, { heading: _jsx(GroupHeading, { children: tModel('yourDefault') }), forceMount: true, children: _jsx(ModelRow, { model: pinnedDefault.model, groupProviderID: pinnedDefault.providerID, groupProviderName: pinnedDefault.providerName, isSelected: availableSelectedModel?.providerID === pinnedDefault.model.providerID &&
+                                                                availableSelectedModel?.modelID === pinnedDefault.model.modelID, isAccountDefault: true, defaultControls: rowDefaultControls, onSelect: handleSelect, scope: "pinned" }) }), _jsx(CommandSeparator, {})] })), sections.map((section, sectionIndex) => {
+                                                const selectedInSection = section.models.find((m) => availableSelectedModel?.providerID === m.providerID &&
+                                                    availableSelectedModel?.modelID === m.modelID);
+                                                const open = isPickerGroupOpen({
+                                                    groupIndex: sectionIndex,
+                                                    groupProviderID: section.id,
+                                                    hasSearch: searching,
+                                                    containsSelected: !!selectedInSection,
+                                                    toggled: toggledGroups,
+                                                });
+                                                // Records the flip of what is on screen, so collapsing a
+                                                // default-open group (the managed set, or the one holding
+                                                // the selected model) works like collapsing any other.
+                                                const toggle = () => setToggledGroups((prev) => new Map(prev).set(section.id, !open));
+                                                const collapsible = sections.length > 1;
+                                                return (_jsxs(Fragment, { children: [sectionIndex > 0 && _jsx(CommandSeparator, {}), _jsxs(CommandGroup, { forceMount: true, children: [collapsible && (_jsxs(CommandItem, { value: `section-${section.id}`, onSelect: toggle, className: "cursor-pointer", children: [open ? (_jsx(ChevronDown, { className: "text-muted-foreground size-3.5 shrink-0" })) : (_jsx(CaretRight, { className: "text-muted-foreground size-3.5 shrink-0" })), _jsx("span", { className: "min-w-0 truncate text-sm font-medium", children: section.label }), _jsx("span", { className: "flex-1" }), section.models.some(isSubscriptionModel) && (_jsx(Tag, { children: tModel('included') })), !open && selectedInSection && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground min-w-0 truncate text-xs", children: pickerModelName(selectedInSection) }), _jsx(Check, { className: "text-foreground size-4 shrink-0" })] })), !open && !selectedInSection && (_jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: section.models.length }))] })), open &&
+                                                                    section.models.map((model) => (_jsx(ModelRow, { model: model, groupProviderID: section.providerID, groupProviderName: section.label, isSelected: availableSelectedModel?.providerID === model.providerID &&
+                                                                            availableSelectedModel?.modelID === model.modelID, isAccountDefault: defaultControls?.accountDefault?.providerID === model.providerID &&
+                                                                            defaultControls?.accountDefault?.modelID === model.modelID, defaultControls: rowDefaultControls, onSelect: handleSelect, scope: "model", showSubscriptionTag: false }, `${section.id}:${model.providerID}:${model.modelID}`)))] })] }, section.id));
+                                            }), chatGptAvailable && !searching && (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, {}), _jsx(CommandGroup, { forceMount: true, children: _jsxs(CommandItem, { value: "chatgpt-subscription", onSelect: handleOpenChatGpt, className: "cursor-pointer", children: [_jsx(ProviderLogo, { providerID: "codex", name: "ChatGPT", size: "small", className: "size-4 rounded-none bg-transparent" }), _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-sm font-medium", children: hasChatGptModels
+                                                                        ? tPooled('manageChatGptAccounts')
+                                                                        : tPooled('useYourChatGpt') }), !hasChatGptModels && (_jsx("span", { className: "text-muted-foreground text-xs", children: tPooled('connect') }))] }) })] }))] })) : hasAnyModel ? (
+                                    /* Models ARE connected — the SEARCH matched none of them.
+                                       `grouped` is built from `visibleModels`, which is already
+                                       filtered by `search`, so the branch below could not tell the
+                                       two apart: typing "zzz" with 40 models connected showed
+                                       "No models available" and a Connect-provider CTA. */
+                                    _jsx(ModelSearchEmpty, { search: search, modelCount: models.filter((model) => model.enabled !== false).length, onClear: () => setSearch(''), onUpgrade: showUpgradeOption ? handleUpgrade : undefined })) : (_jsxs("div", { className: "px-3 py-5 text-center", children: [_jsx("div", { className: "text-foreground text-sm font-medium", children: tModel('empty.title') }), _jsx("p", { className: "text-muted-foreground mx-auto mt-1 max-w-[220px] text-xs leading-5", children: showUpgradeOption
+                                                    ? tModel('empty.upgradeDescription')
+                                                    : tModel('empty.description') }), _jsxs("div", { className: "mt-4 flex items-center justify-center gap-2", children: [showUpgradeOption && (_jsxs(Button, { type: "button", size: "xs", onClick: handleUpgrade, children: [_jsx(CreditCard, { className: "size-3.5" }), tModel('upgrade')] })), canConnectProvider && (_jsxs(Button, { type: "button", size: "xs", variant: showUpgradeOption ? 'outline' : 'default', onClick: () => handleOpenProviderModal('providers'), children: [_jsx(KeyRound, { className: "size-3.5" }), tModel('connectProvider')] })), chatGptAvailable && (_jsx(Button, { type: "button", size: "xs", variant: "outline", onClick: handleOpenChatGpt, children: tPooled('connectChatGpt') }))] })] })) })] }) })] })] }));
+}

package/dist/session/models/model-tags.d.ts

@@ -0,0 +1,27 @@
+import type { FlatModel } from '@kortix/sdk/react';
+export declare function shouldShowFreeTag(model: Pick<FlatModel, 'free' | 'modelID' | 'modelName'>): boolean;
+/**
+ * The gateway's subscription route: a model billed to a connected ChatGPT
+ * Plus/Pro account rather than metered per token. Wire ids are `codex/<model>`
+ * and the explicit provider field is `codex`; both are checked because a stale
+ * baked catalog can predate the field (same fallback `pickerGroupId` uses).
+ */
+export declare function isSubscriptionModel(model: Pick<FlatModel, 'modelID'> & {
+    provider?: string | null;
+}): boolean;
+/**
+ * What the picker prints for a model.
+ *
+ * The gateway appends " (ChatGPT)" to every subscription model's name
+ * (`picker-catalog.ts`, `catalog-models.ts`) so surfaces with no grouping —
+ * the CLI, `/v1/models` — can still tell `gpt-6-astra` from
+ * `codex/gpt-6-astra`. The picker HAS grouping: the rows already sit under a
+ * "ChatGPT subscription" heading, so the suffix repeated the heading on every
+ * row and pushed the real name off the same column as its managed twin.
+ *
+ * Display only. Search, aria labels and every stored id keep the full name, so
+ * typing "chatgpt" still finds these rows.
+ */
+export declare function pickerModelName(model: Pick<FlatModel, 'modelID' | 'modelName'> & {
+    provider?: string | null;
+}): string;

package/dist/session/models/model-tags.js

@@ -0,0 +1,35 @@
+const FREE_TOKEN = /(^|[\s/_-])free($|[\s/_-])/i;
+export function shouldShowFreeTag(model) {
+    if (model.free === true)
+        return true;
+    return FREE_TOKEN.test(model.modelName) || FREE_TOKEN.test(model.modelID);
+}
+/**
+ * The gateway's subscription route: a model billed to a connected ChatGPT
+ * Plus/Pro account rather than metered per token. Wire ids are `codex/<model>`
+ * and the explicit provider field is `codex`; both are checked because a stale
+ * baked catalog can predate the field (same fallback `pickerGroupId` uses).
+ */
+export function isSubscriptionModel(model) {
+    return model.provider === 'codex' || model.modelID.startsWith('codex/');
+}
+/**
+ * What the picker prints for a model.
+ *
+ * The gateway appends " (ChatGPT)" to every subscription model's name
+ * (`picker-catalog.ts`, `catalog-models.ts`) so surfaces with no grouping —
+ * the CLI, `/v1/models` — can still tell `gpt-6-astra` from
+ * `codex/gpt-6-astra`. The picker HAS grouping: the rows already sit under a
+ * "ChatGPT subscription" heading, so the suffix repeated the heading on every
+ * row and pushed the real name off the same column as its managed twin.
+ *
+ * Display only. Search, aria labels and every stored id keep the full name, so
+ * typing "chatgpt" still finds these rows.
+ */
+export function pickerModelName(model) {
+    if (!isSubscriptionModel(model))
+        return model.modelName;
+    // No leading `\s*`: `.trim()` drops those spaces, and `\s*\(` backtracks
+    // quadratically on a long space run (CodeQL js/polynomial-redos).
+    return model.modelName.replace(/\(ChatGPT\)\s*$/, '').trim() || model.modelName;
+}

package/dist/session/models/provider-failure-recovery.d.ts

@@ -0,0 +1,11 @@
+import type { PendingSessionPrompt } from '@kortix/sdk';
+interface ProviderFailureRecoveryProps {
+    pendingPrompt: PendingSessionPrompt | null;
+    isRetrying: boolean;
+    onRetry: () => void;
+    onCopy: () => void;
+    onDelete: () => void;
+}
+/** One recovery surface for every terminal sandbox-provider failure. */
+export declare function ProviderFailureRecovery({ pendingPrompt, isRetrying, onRetry, onCopy, onDelete, }: ProviderFailureRecoveryProps): import("react").JSX.Element;
+export {};

package/dist/session/models/provider-failure-recovery.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowCounterClockwiseIcon, CopyIcon, TrashIcon } from '@phosphor-icons/react';
+import { Button } from '../../primitives/button.js';
+import Loading from '../../primitives/loading.js';
+import { useTranslations } from '../../i18n/index.js';
+/** One recovery surface for every terminal sandbox-provider failure. */
+export function ProviderFailureRecovery({ pendingPrompt, isRetrying, onRetry, onCopy, onDelete, }) {
+    const t = useTranslations('sessionUi.providerRecovery');
+    const attachmentNames = pendingPrompt?.attachment_names ?? [];
+    return (_jsxs("div", { className: "flex w-full max-w-md flex-col items-center gap-3", children: [pendingPrompt ? (_jsxs("div", { className: "border-border/60 bg-muted/40 w-full rounded-md border px-3 py-2.5 text-left", children: [_jsx("p", { className: "text-muted-foreground mb-1 text-xs font-medium", children: t('savedPrompt') }), pendingPrompt.text ? (_jsx("p", { className: "text-foreground max-h-40 overflow-y-auto text-xs leading-relaxed wrap-break-word whitespace-pre-wrap", children: pendingPrompt.text })) : (_jsx("p", { className: "text-muted-foreground text-xs", children: t('noText') })), attachmentNames.length > 0 ? (_jsxs("div", { className: "border-border/60 mt-2 border-t pt-2", children: [_jsx("p", { className: "text-muted-foreground mb-1 text-xs font-medium", children: t('attachments', { count: attachmentNames.length }) }), _jsx("ul", { className: "text-muted-foreground/70 space-y-0.5 text-xs", children: attachmentNames.map((name, index) => (_jsx("li", { className: "break-all", children: name }, `${name}-${index}`))) }), _jsx("p", { className: "text-muted-foreground/70 mt-1 text-xs", children: t('reattach') })] })) : null] })) : (_jsx("p", { className: "text-muted-foreground text-xs", children: t('unavailable') })), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [_jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: onRetry, disabled: isRetrying, "aria-busy": isRetrying, children: [isRetrying ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(ArrowCounterClockwiseIcon, { className: "size-3.5 shrink-0" })), isRetrying ? t('retrying') : t('retry')] }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: onCopy, disabled: !pendingPrompt?.text, children: [_jsx(CopyIcon, { className: "size-3.5 shrink-0" }), t('copy')] }), _jsxs(Button, { type: "button", size: "sm", variant: "destructive", onClick: onDelete, children: [_jsx(TrashIcon, { className: "size-3.5 shrink-0" }), t('delete')] })] })] }));
+}

package/dist/session/models/use-model-connection-gate.d.ts

@@ -0,0 +1,57 @@
+import type { ProviderModalTab } from '../../internal/stores/provider-modal-store.js';
+import { type FlatModel, type ModelKey } from '@kortix/sdk/react';
+/**
+ * `ProviderModalTab` is the caller-facing vocabulary ('providers' | 'connected'
+ * | 'models'). JAY-510 merged the modal's 'catalog' and 'connected' tabs into
+ * one `providers` surface, so both of those now resolve to it; only 'models'
+ * still names a distinct tab.
+ */
+export declare function projectProviderModalTab(tab: ProviderModalTab): 'providers' | 'models';
+/**
+ * Which project this gate acts on. An explicitly passed id wins; the `[id]`
+ * route segment is the fallback.
+ *
+ * The fallback is what every original caller relies on — they all render under
+ * `/projects/[id]`. The explicit id exists because the onboarding wizard's plan
+ * step now also runs on `/new` (`app/(app)/new`), which has NO `[id]` segment:
+ * there the route yields `null`, `modal` is therefore `null`, and
+ * `openConnectProvider` renders nothing while the step's only control never
+ * advances the wizard.
+ *
+ * `!== undefined`, never `??`: a caller that deliberately passes `null` means
+ * "act on no project", and must not silently inherit whatever route it happens
+ * to be rendered under.
+ *
+ * Exported so this rule is provable — the hook itself cannot be rendered in
+ * `apps/web`'s test harness (no jsdom, and `mock.module` is process-wide across
+ * a non---isolate `bun test` run).
+ */
+export declare function resolveGateProjectId(explicitId: string | null | undefined, routeId: unknown): string | null;
+/**
+ * Shared "connect a model" routing. Project actions open the project-scoped
+ * provider modal in place. Without a project or the host's
+ * `ProjectProviderModal` slot, `canConnectProvider` is false: hide Connect.
+ * Extracted from `ModelSelector` so the picker, chat gate, and onboarding use
+ * the same surface.
+ *
+ * Also computes `hasSelectableModels` — pass the caller's flattened model list
+ * (default `[]` for callers that only need the routing actions). This is
+ * deliberately NOT `models.length > 0`: the raw provider catalog can carry
+ * models the project does not offer. See `isModelOffered` for the check.
+ *
+ * `options.projectId` names the project explicitly, for callers that render
+ * outside `/projects/[id]`. Omitting it keeps the original route-inferred
+ * behaviour verbatim — see `resolveGateProjectId`.
+ */
+export declare function useModelConnectionGate(models?: FlatModel[], options?: {
+    projectId?: string | null;
+}): {
+    canConnectProvider: boolean;
+    openConnectProvider: (tab?: ProviderModalTab) => void;
+    openUpgrade: () => void;
+    modal: import("react").JSX.Element | null;
+    hasSelectableModels: boolean;
+    isSelectableModel: (selectedModel: ModelKey) => boolean;
+    entitlementsPending: boolean;
+    showUpgradeOption: boolean;
+};