@kortix/ui 0.14.4 → 0.14.6

package/dist/session/header/session-reminders-indicator.js

@@ -1,44 +1,128 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Header chip for this session's reminders (scheduled check-ins that re-prompt
- * the session). Renders nothing until the session has a reminder that can
- * still fire; then an alarm with the active count, and a popover to pause,
- * resume, or remove one, or to open the Customize Reminders tab on this
- * session. The session reminders read needs `project.session.start`, so a
- * read-only viewer's 403 simply leaves the chip hidden. The tab link shows only
- * to a caller who has the tab (`capabilityAccess()`): a plain member manages
- * their reminders here.
+ * the session), Paper R08 "Countdown rings". Renders nothing until the session
+ * has a reminder that can still fire; then `ReminderMark`, and a popover that
+ * lists each reminder behind a ring of how much of its wait has passed. On a
+ * pointer that hovers, a row's details and actions open in a hover card on the
+ * popover's left; on a touch screen the pause and remove buttons sit in the row.
+ * Past `REMINDERS_POPOVER_MAX` the popover would be a wall to scroll, so the
+ * chip opens the panel's Reminders view instead (`session-reminders-panel.tsx`).
+ * The session reminders read needs `project.session.start`, so a read-only
+ * viewer's 403 simply leaves the chip hidden. The "Open in Reminders" link
+ * shows only to a caller who has the tab (`capabilityAccess()`).
  */
 import { HoverPrefetchLink } from '../../internal/components/hover-prefetch-link.js';
-import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
-import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
-import Hint from '../../primitives/hint.js';
+import { CountBadge } from '../../primitives/count-badge.js';
+import { FLOATING_PANEL_SURFACE } from '../../primitives/menu-recipe.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover.js';
-import { errorToast, successToast } from '../../primitives/toast.js';
 import { remindersHref } from '../../internal/lib/capability-tab-routes.js';
 import { useCapabilityAccess } from '../../internal/layout/project-settings-nav.js';
-import { formatFireTime, reminderTitle, } from '../../internal/reminders/reminder-format.js';
+import { BELL_REFLECTION_MASK } from '../../internal/notifications/notification-bell.js';
+import { badgeCount } from '../../internal/notifications/notification-rows.js';
+import { reminderTitle } from '../../internal/reminders/reminder-format.js';
 import { useNow, useRefetchAfterFire, } from '../../internal/reminders/use-refetch-after-fire.js';
-import { useLocale, useTranslations } from '../../i18n/index.js';
-import { qk, useFeatureFlag, useSessionReminders, useSessionWorking } from '@kortix/sdk/react';
+import { cn } from '../../internal/lib/utils.js';
+import { useTranslations } from '../../i18n/index.js';
+import { qk, useFeatureFlag, useSessionWorking } from '@kortix/sdk/react';
 import { AlarmIcon, PauseIcon, PlayIcon, TrashIcon } from '@phosphor-icons/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSessionIds } from '../../providers/session-ids.js';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { openSessionQuickView } from '../panel/open-session-quick-view.js';
+import { CountdownRing, isFailedReminder, REMINDER_ROW_GRID, ReminderActions, ReminderFacts, ReminderRowCells, sortReminders, useReminderControls, useReminderView, } from './reminder-parts.js';
+/** More live reminders than this open in the side panel, not the popover. */
+export const REMINDERS_POPOVER_MAX = 30;
+/**
+ * The clock in `BellMark`'s badge-glow style: the glyph, then again in the
+ * count's colour under the bell's corner mask, so the colour reaches in from
+ * the corner the count sits on. Purple for active reminders, red while one's
+ * last run failed. With nothing active the glyph is muted and has no count.
+ */
+export function ReminderMark({ count, failed: anyFailed, surface = 'bg-background', }) {
+    const tone = anyFailed
+        ? { reflection: 'text-kortix-red', disc: 'bg-kortix-red' }
+        : { reflection: 'text-kortix-purple', disc: 'bg-kortix-purple' };
+    return (_jsxs("span", { className: "relative size-4 shrink-0", children: [_jsx(AlarmIcon, { className: cn('size-4', count === 0 && 'text-muted-foreground') }), count > 0 ? (_jsxs(_Fragment, { children: [_jsx(AlarmIcon, { "aria-hidden": true, className: cn('absolute inset-0 size-4', tone.reflection), style: { maskImage: BELL_REFLECTION_MASK, WebkitMaskImage: BELL_REFLECTION_MASK } }), _jsx("span", { "aria-hidden": true, className: cn('absolute -right-1.5 -bottom-1.5 flex rounded-full p-px', surface), children: _jsx("span", { "data-slot": "reminder-count", className: cn('text-background flex h-3 min-w-3 items-center justify-center rounded-full px-0.5 text-[9px] leading-none font-semibold tabular-nums', // audit:allow a numeral in an 11px disc on a 16px glyph; no type rung fits
+                            tone.disc), children: badgeCount(count) }) })] })) : null] }));
+}
+const CARD_OPEN_DELAY_MS = 200;
+/** While open, a move to another row waits this long; a newer row restarts it. */
+const CARD_MOVE_DEBOUNCE_MS = 50;
+const CARD_CLOSE_DELAY_MS = 100;
+const CARD_EDGE_PX = 8;
+/**
+ * The reminder card's position beside the popover. The first hover opens it
+ * after a delay; while it is open, hovering another row moves it there after a
+ * short debounce, so a sweep across rows moves it once, and it glides (no glide
+ * and no debounce for keyboard focus; no glide under reduced motion).
+ */
+function useGlidingCard() {
+    const panelRef = useRef(null);
+    const cardRef = useRef(null);
+    const [active, setActive] = useState(null);
+    const openTimer = useRef(undefined);
+    const closeTimer = useRef(undefined);
+    const clearTimers = () => {
+        window.clearTimeout(openTimer.current);
+        window.clearTimeout(closeTimer.current);
+    };
+    useEffect(() => clearTimers, []);
+    // Before paint: keep the card inside the viewport, then place it.
+    useLayoutEffect(() => {
+        const panel = panelRef.current;
+        const el = cardRef.current;
+        if (!active || !panel || !el)
+            return;
+        const panelTop = panel.getBoundingClientRect().top;
+        const max = window.innerHeight - CARD_EDGE_PX - panelTop - el.offsetHeight;
+        const top = Math.max(CARD_EDGE_PX - panelTop, Math.min(active.top, max));
+        el.style.transform = `translateY(${top}px)`;
+    }, [active]);
+    const show = (id, row, keyboard) => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        clearTimers();
+        const panelRect = panel.getBoundingClientRect();
+        const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        const place = (glide) => setActive({
+            id,
+            top: row.getBoundingClientRect().top - panelRect.top,
+            // 288px card + 12px bridge; the right side only when the left has no room.
+            side: panelRect.left >= 300 + CARD_EDGE_PX ? 'left' : 'right',
+            glide,
+        });
+        if (keyboard)
+            place(false);
+        else if (active)
+            openTimer.current = window.setTimeout(() => place(!reduce), CARD_MOVE_DEBOUNCE_MS);
+        else
+            openTimer.current = window.setTimeout(() => place(false), CARD_OPEN_DELAY_MS);
+    };
+    const leave = () => {
+        clearTimers();
+        closeTimer.current = window.setTimeout(() => setActive(null), CARD_CLOSE_DELAY_MS);
+    };
+    const close = () => {
+        clearTimers();
+        setActive(null);
+    };
+    return { panelRef, cardRef, active, show, leave, close, cancelClose: clearTimers };
+}
 export function SessionRemindersIndicator({ runtimeSessionId }) {
     const t = useTranslations('reminders');
-    const locale = useLocale();
     // useSessionIds: the project and the Kortix session reminders key on.
     const { projectId, sessionId } = useSessionIds();
     const gate = useFeatureFlag(projectId, 'reminders');
-    const reminders = useSessionReminders(gate.enabled ? projectId : null, sessionId);
+    const { reminders, controls, confirm } = useReminderControls(gate.enabled ? projectId : null, sessionId);
     useRefetchAfterFire(reminders.data?.reminders, reminders.refetch);
     const now = useNow();
     const hasTab = useCapabilityAccess(projectId).tabs.includes('reminders');
-    // Null when the host serves no customize pages: no "Manage" link.
-    const manageHref = hasTab ? remindersHref(projectId) : null;
+    // Null when the host serves no customize pages: no "Open in Reminders" link.
+    const manageHref = hasTab ? `${remindersHref(projectId)}?session=${sessionId}` : null;
     // An agent sets reminders mid-turn with `kortix remind`; nothing announces
     // that to this query. The turn ending is the moment to look again.
     const working = useSessionWorking(projectId ?? '', sessionId ?? '', {
@@ -56,23 +140,46 @@ export function SessionRemindersIndicator({ runtimeSessionId }) {
         wasWorking.current = isWorking;
     }, [isWorking, projectId, queryClient]);
     const [open, setOpen] = useState(false);
-    const [removing, setRemoving] = useState(null);
+    const { panelRef, cardRef, active: activeCard, show: showCard, leave: leaveCard, close: closeCard, cancelClose } = useGlidingCard();
+    const view = useReminderView(now);
     const live = (reminders.data?.reminders ?? []).filter((reminder) => reminder.state !== 'done');
     if (live.length === 0)
         return null;
     const activeCount = live.filter((reminder) => reminder.state === 'active').length;
-    const setEnabled = (reminder, enabled) => reminders.update.mutate({ reminderId: reminder.id, enabled }, {
-        onSuccess: () => successToast(enabled ? t('resumed') : t('paused')),
-        onError: (error) => errorToast(error instanceof Error ? error.message : t('updateFailed')),
-    });
-    return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", "aria-label": t('chipLabel', { count: activeCount }), className: "relative", "data-testid": "session-reminders-chip", children: [_jsx(AlarmIcon, { className: "size-4" }), activeCount > 0 ? (_jsx(Badge, { variant: "secondary", size: "tabular", className: "absolute -top-1 -right-1", children: activeCount })) : null] }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 8, className: "w-80 overflow-hidden p-0", children: [_jsx("div", { className: "border-b px-4 pt-4 pb-3", children: _jsx("h3", { className: "text-foreground text-sm font-medium", children: t('chipTitle') }) }), _jsx("ul", { className: "max-h-64 divide-y overflow-auto", children: live.map((reminder) => (_jsxs("li", { className: "flex items-center gap-2 px-4 py-2.5", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("p", { className: "text-foreground truncate text-sm", title: reminder.prompt, children: reminderTitle(reminder) }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: reminder.state === 'active' && reminder.next_fire_at
-                                                        ? t('nextFire', { time: formatFireTime(reminder.next_fire_at, locale, now) })
-                                                        : t('pausedLabel') })] }), _jsx(Hint, { label: reminder.state === 'active' ? t('pause') : t('resume'), children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": reminder.state === 'active' ? t('pause') : t('resume'), disabled: reminders.update.isPending, onClick: () => setEnabled(reminder, reminder.state !== 'active'), children: reminder.state === 'active' ? (_jsx(PauseIcon, { className: "size-4 shrink-0" })) : (_jsx(PlayIcon, { className: "size-4 shrink-0" })) }) }), _jsx(Hint, { label: t('remove'), children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('remove'), onClick: () => setRemoving(reminder), children: _jsx(TrashIcon, { className: "size-4 shrink-0" }) }) })] }, reminder.id))) }), manageHref ? (_jsx("div", { className: "border-t px-4 py-2", children: _jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "w-full justify-center", children: _jsx(HoverPrefetchLink, { href: `${manageHref}?session=${sessionId}`, onClick: () => setOpen(false), children: t('manage') }) }) })) : null] })] }), _jsx(ConfirmDialog, { open: !!removing, onOpenChange: (next) => !next && setRemoving(null), title: t('removeTitle'), description: t('removeDescription'), confirmLabel: t('remove'), confirmVariant: "destructive", isPending: reminders.remove.isPending, onConfirm: () => removing &&
-                    reminders.remove.mutate(removing.id, {
-                        onSuccess: () => {
-                            successToast(t('removed'));
-                            setRemoving(null);
-                        },
-                        onError: (error) => errorToast(error instanceof Error ? error.message : t('updateFailed')),
-                    }) })] }));
+    const rows = sortReminders(live);
+    const mark = _jsx(ReminderMark, { count: activeCount, failed: live.some(isFailedReminder) });
+    if (live.length > REMINDERS_POPOVER_MAX) {
+        return (_jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('chipLabel', { count: activeCount }), className: "relative", "data-testid": "session-reminders-chip", onClick: () => openSessionQuickView('reminders', 'chip'), children: mark }));
+    }
+    const shown = activeCard ? rows.find((reminder) => reminder.id === activeCard?.id) : undefined;
+    return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: open, onOpenChange: (next) => {
+                    setOpen(next);
+                    if (!next)
+                        closeCard();
+                }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('chipLabel', { count: activeCount }), className: "relative", "data-testid": "session-reminders-chip", children: mark }) }), _jsxs(PopoverContent, { ref: panelRef, align: "end", sideOffset: 8, className: "relative w-96 p-0", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-4 pt-3 pb-1", children: [_jsxs("h3", { className: "text-foreground flex items-center gap-2 text-sm font-medium", children: [t('title'), activeCount > 0 ? _jsx(CountBadge, { count: activeCount, tone: "reminder" }) : null] }), manageHref ? (_jsx(Button, { asChild: true, variant: "ghost", size: "xs", className: "text-muted-foreground -mr-2.5", children: _jsx(HoverPrefetchLink, { href: manageHref, onClick: () => setOpen(false), children: t('cardManage') }) })) : null] }), _jsx("ul", { className: "max-h-96 overflow-y-auto p-1", onPointerLeave: leaveCard, onScroll: closeCard, children: rows.map((reminder) => {
+                                    const v = view(reminder);
+                                    return (_jsx("li", { children: _jsxs("div", { tabIndex: 0, "data-testid": "session-reminder-row", "data-active": activeCard?.id === reminder.id || undefined, onPointerEnter: (event) => {
+                                                if (event.pointerType !== 'touch')
+                                                    showCard(reminder.id, event.currentTarget, false);
+                                            }, onFocus: (event) => {
+                                                if (event.currentTarget.matches(':focus-visible'))
+                                                    showCard(reminder.id, event.currentTarget, true);
+                                            }, className: cn(REMINDER_ROW_GRID, 'hover:bg-hover focus-visible:ring-ring data-active:bg-hover rounded-lg px-2.5 py-1.5 outline-none focus-visible:ring-2'), children: [_jsx(ReminderRowCells, { reminder: reminder, view: v }), _jsxs("span", { className: "col-start-3 row-span-2 row-start-1 hidden items-center pointer-coarse:flex", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": v.pauseLabel, disabled: controls.pending, onClick: () => controls.setEnabled(reminder, v.paused), children: v.paused ? _jsx(PlayIcon, { className: "size-4" }) : _jsx(PauseIcon, { className: "size-4" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": t('remove'), onClick: () => controls.requestRemove(reminder), children: _jsx(TrashIcon, { className: "size-4" }) })] })] }) }, reminder.id));
+                                }) }), shown && activeCard
+                                ? (() => {
+                                    const { paused, next, nextAt, countdown, share, tone } = view(shown);
+                                    const [major, minor] = countdown;
+                                    return (
+                                    // One card for the whole list: hovering the next row moves it
+                                    // instead of closing one card and opening another. The padding
+                                    // on the popover side bridges the gap, so the pointer never
+                                    // leaves on its way into the card.
+                                    _jsx("div", { ref: cardRef, onPointerEnter: cancelClose, onPointerLeave: leaveCard, className: cn('absolute top-0 starting:opacity-0 pointer-coarse:hidden', activeCard.side === 'left' ? 'right-full pr-3' : 'left-full pl-3'), style: {
+                                            transition: activeCard.glide
+                                                ? 'transform var(--duration-normal) var(--ease-in-out)'
+                                                : 'opacity var(--duration-fast) var(--ease-out)',
+                                        }, children: _jsxs("div", { "data-testid": "session-reminder-card", className: cn(FLOATING_PANEL_SURFACE, 'w-72 overflow-hidden'), children: [_jsxs("div", { className: "flex items-center gap-3 px-4 pt-4 pb-3", children: [_jsx(CountdownRing, { share: share, size: 44, stroke: 3, tone: tone, paused: paused, children: !paused && Number.isFinite(nextAt) ? (_jsxs("span", { className: "flex flex-col items-center leading-none tabular-nums", children: [_jsx("span", { className: "text-foreground text-xs font-medium", children: major }), minor ? (_jsx("span", { className: "text-muted-foreground mt-0.5 text-[10px]" // audit:allow the minor unit inside a 44px ring
+                                                                        , children: minor })) : null] })) : null }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground text-sm font-medium text-pretty", children: reminderTitle(shown) }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs", children: next ? t('nextRun', { time: next }) : t('pausedLabel') })] })] }), shown.name ? (_jsx("p", { className: "text-muted-foreground line-clamp-4 px-4 pb-3 text-xs text-pretty whitespace-pre-line", children: shown.prompt })) : null, _jsx(ReminderFacts, { reminder: shown, now: now, className: "border-t px-4 py-3" }), _jsx(ReminderActions, { reminder: shown, controls: controls, manageHref: manageHref, onNavigate: () => setOpen(false), className: "border-t p-2" })] }) }));
+                                })()
+                                : null] })] }), confirm] }));
 }

package/dist/session/media/sandbox-url-detector.js

@@ -102,7 +102,6 @@ function InlineIframePreview({ proxyUrl, port }) {
 }
 function SandboxUrlChip({ detected, proxyUrl, }) {
     const tHardcodedUi = useTranslations('hardcodedUi');
-    const [copied, setCopied] = useState(false);
     const tabId = `preview:${detected.port}`;
     const tabHref = `/p/${detected.port}`;
     const internalUrl = toInternalUrl(detected.port, detected.path);
@@ -120,12 +119,6 @@ function SandboxUrlChip({ detected, proxyUrl, }) {
             }),
         }, undefined, shallowNavigate);
     }, [tabId, tHardcodedUi, detected.port, tabHref, proxyUrl, internalUrl, shallowNavigate]);
-    const handleCopyUrl = useCallback(() => {
-        navigator.clipboard.writeText(proxyUrl).then(() => {
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        });
-    }, [proxyUrl]);
     const openPreview = useOpenPreviewLink();
     const handleOpenExternal = useCallback(() => {
         if (openPreview?.(null, detected.originalUrl, proxyUrl))

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

@@ -1,6 +1,29 @@
 import type { ModelKey } from '@kortix/sdk/react';
 export declare const NO_MODEL_AVAILABLE_MESSAGE = "No models available for this session yet.";
 export declare const NO_MODEL_AVAILABLE_ACTION_MESSAGE = "Connect a model via provider first or upgrade your Kortix subscription.";
+/**
+ * Whether the picker may offer a model as a choice: on for the project
+ * (`enabled`) and runnable for the caller (`available`). `/model-picker` keeps
+ * a model a default names even when its provider is not connected, marked
+ * `available: false`, so defaults stay editable; choosing it would only fail
+ * after Send ("Connect Codex to use this model.", KRTX-3011).
+ */
+export declare function isRunnableModel(model: {
+    enabled?: boolean;
+    available?: boolean;
+}): boolean;
+/**
+ * What selecting an unavailable model row opens instead of choosing it: the
+ * ChatGPT accounts modal for a ChatGPT model when members may connect one,
+ * else the provider connection. `null` = the model is runnable.
+ */
+export declare function unavailableModelConnection(model: {
+    enabled?: boolean;
+    available?: boolean;
+    availability?: 'login' | 'provider';
+}, options: {
+    chatGptAvailable: boolean;
+}): 'chatgpt' | 'provider' | null;
 export declare function resolveAvailableSelectedModel(selectedModel: ModelKey | null | undefined, isSelectableModel: (model: ModelKey) => boolean): ModelKey | null;
 /**
  * The name of the selected model when it cannot read an attached image, else null.

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

@@ -1,5 +1,25 @@
 export const NO_MODEL_AVAILABLE_MESSAGE = 'No models available for this session yet.';
 export const NO_MODEL_AVAILABLE_ACTION_MESSAGE = 'Connect a model via provider first or upgrade your Kortix subscription.';
+/**
+ * Whether the picker may offer a model as a choice: on for the project
+ * (`enabled`) and runnable for the caller (`available`). `/model-picker` keeps
+ * a model a default names even when its provider is not connected, marked
+ * `available: false`, so defaults stay editable; choosing it would only fail
+ * after Send ("Connect Codex to use this model.", KRTX-3011).
+ */
+export function isRunnableModel(model) {
+    return model.enabled !== false && model.available !== false;
+}
+/**
+ * What selecting an unavailable model row opens instead of choosing it: the
+ * ChatGPT accounts modal for a ChatGPT model when members may connect one,
+ * else the provider connection. `null` = the model is runnable.
+ */
+export function unavailableModelConnection(model, options) {
+    if (model.available !== false)
+        return null;
+    return model.availability === 'login' && options.chatGptAvailable ? 'chatgpt' : 'provider';
+}
 export function resolveAvailableSelectedModel(selectedModel, isSelectableModel) {
     if (!selectedModel)
         return null;

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

@@ -1,5 +1,4 @@
-import { DEFAULT_MANAGED_MODEL_IDS, PROVIDER_LABELS } from '@kortix/llm-catalog';
-const MANAGED_MODEL_IDS = new Set(DEFAULT_MANAGED_MODEL_IDS);
+import { PROVIDER_LABELS } from '@kortix/llm-catalog';
 // The gateway exposes its whole catalog through a single `kortix` provider, with
 // model ids namespaced as `<provider>/<model>`. For the picker we recover the
 // REAL provider: platform-managed defaults stay under the "Kortix" group, while
@@ -26,8 +25,6 @@ export function pickerGroupId(model) {
     if (model.providerID !== 'kortix') {
         return model.providerID;
     }
-    if (MANAGED_MODEL_IDS.has(model.modelID))
-        return model.provider ?? model.providerID;
     if (model.provider)
         return model.provider;
     const slash = model.modelID.indexOf('/');

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

@@ -13,7 +13,7 @@ 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 { isRunnableModel, resolveAvailableSelectedModel, unavailableModelConnection, } 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';
@@ -50,8 +50,11 @@ import { Tag } from '../../primitives/tag.js';
  * `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, }) {
+function ModelRow({ model, groupProviderID, groupProviderName, isSelected, isAccountDefault, defaultControls, onSelect, scope, showSubscriptionTag = true, connectLabel, }) {
     const t = useTranslations('modelSelector');
+    // Kept in the list so a default stays visible, but not runnable: the row
+    // reads "Connect" and selecting it opens the connection (KRTX-3011).
+    const unavailable = model.available === false;
     const isFree = shouldShowFreeTag(model);
     const isSubscription = isSubscriptionModel(model);
     // Display name only — `model.modelName` still carries " (ChatGPT)" for search
@@ -83,7 +86,7 @@ function ModelRow({ model, groupProviderID, groupProviderName, isSelected, isAcc
                 /* 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
+                className: "size-4 rounded-none bg-transparent" }), _jsxs("span", { className: cn('min-w-0 flex-1 truncate leading-tight', unavailable && 'opacity-60'), children: [_jsx("span", { className: "text-foreground font-medium", children: lead }), trail ? _jsxs("span", { className: "text-muted-foreground font-normal", children: [" ", trail] }) : null] }), unavailable ? (_jsx(Tag, { children: connectLabel })) : 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
@@ -212,7 +215,7 @@ export function ModelSelector({ models, selectedModel, onSelect, defaultControls
     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 hasChatGptModels = useMemo(() => models.some((m) => isRunnableModel(m) && pickerGroupId(m) === 'codex'), [models]);
     const grouped = useMemo(() => {
         const groups = new Map();
         for (const m of visibleModels) {
@@ -278,24 +281,30 @@ export function ModelSelector({ models, selectedModel, onSelect, defaultControls
             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]);
+    const handleSelect = useCallback((model) => {
+        // An unavailable model is never chosen: the turn would fail after Send.
+        const connect = unavailableModelConnection(model, { chatGptAvailable });
+        if (connect === 'chatgpt')
+            return handleOpenChatGpt();
+        if (connect === 'provider')
+            return handleOpenProviderModal('providers');
+        onSelect({ providerID: model.providerID, modelID: model.modelID });
+        setOpen(false);
+    }, [onSelect, setOpen, chatGptAvailable, handleOpenChatGpt, handleOpenProviderModal]);
+    const handleUpgrade = useCallback(() => {
+        setOpen(false);
+        openUpgrade();
+    }, [openUpgrade, 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) => {
+                                                                availableSelectedModel?.modelID === pinnedDefault.model.modelID, isAccountDefault: true, defaultControls: rowDefaultControls, onSelect: handleSelect, connectLabel: tPooled('connect'), 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({
@@ -313,7 +322,7 @@ export function ModelSelector({ models, selectedModel, onSelect, defaultControls
                                                 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));
+                                                                            defaultControls?.accountDefault?.modelID === model.modelID, defaultControls: rowDefaultControls, onSelect: handleSelect, connectLabel: tPooled('connect'), 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 ? (

package/dist/session/models/use-model-connection-gate.js

@@ -12,6 +12,7 @@ import { useUpgradeDialogStore } from '../../internal/stores/upgrade-dialog-stor
 import { getProject, platformConfig } from '@kortix/sdk';
 import { contract, qk } from '@kortix/sdk/react';
 import { resolveEntitlementsPending } from '../composer/entitlements-pending.js';
+import { isRunnableModel } from './model-availability.js';
 /**
  * `ProviderModalTab` is the caller-facing vocabulary ('providers' | 'connected'
  * | 'models'). JAY-510 merged the modal's 'catalog' and 'connected' tabs into
@@ -98,7 +99,9 @@ export function useModelConnectionGate(models = [], options) {
     // `resolveAvailableSelectedModel` then nulled the pick, so the trigger stayed
     // on `unsetLabel`, no check mark rendered, and each click looked like a no-op
     // even though `onSelect` fired and the model store was written.
-    const isModelOffered = useCallback((model) => model.enabled !== false, []);
+    // `isRunnableModel` also refuses a model `/model-picker` marks
+    // `available: false` (its provider is not connected for the caller).
+    const isModelOffered = useCallback((model) => isRunnableModel(model), []);
     const hasSelectableModels = useMemo(() => models.some(isModelOffered), [models, isModelOffered]);
     const modelsByKey = useMemo(() => new Map(models.map((model) => [`${model.providerID}:${model.modelID}`, model])), [models]);
     const isSelectableModel = useCallback((selectedModel) => {

package/dist/session/outcomes/change-request-outcomes.js

@@ -51,6 +51,27 @@ export function changeRequestOutcomes(crs, sessionId, tI18nComplete) {
         // a server that sends `null` should degrade to the fallback sentence
         // rather than throw inside a transcript render.
         const summary = cr.description?.trim();
+        // An agent revises its work by closing this request and opening the next
+        // on the same branch. The card says so and opens the replacement
+        // (KRTX-3031). The card itself stays this request's: id and reference.
+        const replacement = cr.status === 'closed' ? (cr.superseded_by ?? null) : null;
+        const status = replacement
+            ? {
+                label: tI18nComplete
+                    ? tI18nComplete('textddcd87c21894', { number: replacement.number })
+                    : `Superseded by #${replacement.number}`,
+                tone: word.tone,
+            }
+            : { label: word.label, tone: word.tone };
+        const action = replacement
+            ? {
+                label: tI18nComplete
+                    ? tI18nComplete('texta8ef31fa7d25', { number: replacement.number })
+                    : `View #${replacement.number}`,
+                intent: 'open',
+                target: replacement.cr_id,
+            }
+            : { label: word.action, intent: 'open' };
         return {
             id: `cr:${cr.cr_id}`,
             kind: 'change_request',
@@ -62,7 +83,7 @@ export function changeRequestOutcomes(crs, sessionId, tI18nComplete) {
             // Kept for the modal, which has room for it. The card no longer renders
             // a description; see `outcome-card.tsx`.
             description: summary || tI18nComplete?.raw('text5c58b6d31ba9') || 'Ready for you to look over.',
-            status: { label: word.label, tone: word.tone },
+            status,
             at: epoch(cr.created_at),
             // The number is a REFERENCE, not a name — it belongs in the quiet line
             // with the status. `into <base_ref>` is gone: a branch name is the one
@@ -73,8 +94,8 @@ export function changeRequestOutcomes(crs, sessionId, tI18nComplete) {
                     ? tI18nComplete('texta4fc39798651', { number: cr.number })
                     : `Change request #${cr.number}`,
             ],
-            action: { label: word.action, intent: 'open' },
-            resourceHref: `?cr=${cr.cr_id}`,
+            action,
+            resourceHref: `?cr=${replacement?.cr_id ?? cr.cr_id}`,
         };
     });
 }

package/dist/session/outcomes/session-outcomes-provider.d.ts

@@ -1,10 +1,12 @@
 import { type ReactNode } from 'react';
 import { type TurnSpan } from './anchor-outcomes.js';
 import type { Outcome } from '../../internal/outcomes/outcome-types.js';
-export declare function SessionOutcomesProvider({ projectSessionId, turnSpans, onOpen, children, }: {
+export declare function SessionOutcomesProvider({ projectSessionId, turnSpans, busy, onOpen, children, }: {
     /** The git session id a change request records as `origin_session_id`. */
     projectSessionId: string | undefined;
     turnSpans: TurnSpan[];
+    /** The session is working. Its end re-reads the change requests. */
+    busy: boolean;
     onOpen: (outcome: Outcome) => void;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/session/outcomes/session-outcomes-provider.js

@@ -38,16 +38,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * because the hook takes its project id from that context rather than a
  * parameter. Task 5 mounts it.
  */
+import { useQueryClient } from '@tanstack/react-query';
 import { useTranslations } from '../../i18n/index.js';
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { useProjectContext } from '../../files/project/context.js';
 // NOT `@kortix/sdk/react`'s change-request hook. See the note above — this is
 // a cache-coherence requirement, not a style preference.
-import { useSessionChangeRequests } from '../../files/project/hooks/use-change-requests.js';
+import { invalidateChangeRequestReads, useSessionChangeRequests, } from '../../files/project/hooks/use-change-requests.js';
 import { anchorOutcomes } from './anchor-outcomes.js';
 import { changeRequestOutcomes } from './change-request-outcomes.js';
 const EMPTY = [];
 const OutcomesContext = createContext(null);
-export function SessionOutcomesProvider({ projectSessionId, turnSpans, onOpen, children, }) {
+/** A change request the agent opens as its turn closes can land after the
+ *  turn-end read: read once more after this delay. */
+const CHANGE_REQUEST_SETTLE_MS = 2_500;
+export function SessionOutcomesProvider({ projectSessionId, turnSpans, busy, onOpen, children, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     // No `projectId` argument: this hook reads it from `ProjectFilesProvider`,
     // which is what keeps it on the same cache entry the dialog invalidates.
@@ -56,6 +61,7 @@ export function SessionOutcomesProvider({ projectSessionId, turnSpans, onOpen, c
     // Only THIS session's change requests, filtered by the server; the key sits
     // under the project-files list scope the dialog's mutations invalidate.
     const { data } = useSessionChangeRequests(projectSessionId, { refetchInterval: 60_000 });
+    useRefreshChangeRequestsOnTurnEnd(busy);
     const all = useMemo(
     // Change requests are the only outcome a turn produces. The derived
     // pipeline (files, schedules, background tasks, connector links) was built
@@ -66,6 +72,28 @@ export function SessionOutcomesProvider({ projectSessionId, turnSpans, onOpen, c
     const value = useMemo(() => ({ byTurn, onOpen }), [byTurn, onOpen]);
     return _jsx(OutcomesContext.Provider, { value: value, children: children });
 }
+/**
+ * The agent opens and closes change requests from its sandbox, and nothing
+ * tells the browser. Without this, the cards and the sidebar kept a closed
+ * proposal as "Review" and missed a new one until the 60 s poll or a reload
+ * (KRTX-3009, KRTX-3010). Only the busy -> idle edge reads: mounting an idle
+ * session already fetches.
+ */
+function useRefreshChangeRequestsOnTurnEnd(busy) {
+    const qc = useQueryClient();
+    const projectId = useProjectContext()?.projectId ?? '';
+    const refresh = useCallback(() => invalidateChangeRequestReads(qc, projectId), [qc, projectId]);
+    const wasBusy = useRef(busy);
+    useEffect(() => {
+        const ended = wasBusy.current && !busy;
+        wasBusy.current = busy;
+        if (!ended)
+            return;
+        refresh();
+        const timer = setTimeout(refresh, CHANGE_REQUEST_SETTLE_MS);
+        return () => clearTimeout(timer);
+    }, [busy, refresh]);
+}
 /** A turn's outcomes, oldest first. `EMPTY` is a module constant so a turn with
  *  no outcomes gets the SAME array every render and never re-renders for it. */
 export function useTurnOutcomes(turnKey) {

package/dist/session/overrides/provider-secret-pool-editor.js

@@ -57,9 +57,10 @@ function PoolChoices({ projectId, providers, providerId, onProviderChange, keys,
     const personalChatGpt = providerId === 'codex' && personalKeys;
     const available = new Set(keys.map((secret) => secret.secret_id));
     const unavailable = selected.filter((secretId) => !available.has(secretId));
+    const selectedIds = new Set(selected);
     return _jsxs(_Fragment, { children: [_jsxs(Field, { className: "gap-1.5", children: [_jsx(FieldLabel, { htmlFor: id, children: t('provider') }), _jsxs(Select, { value: providerId, onValueChange: onProviderChange, disabled: disabled, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: providers.map((provider) => _jsx(SelectItem, { value: provider, children: provider === 'codex' ? 'ChatGPT' : LLM_PROVIDER_BY_ID.get(provider)?.label ?? provider }, provider)) })] })] }), _jsx("p", { className: "text-muted-foreground text-xs", "aria-live": "polite", children: configured
                     ? selected.length ? t(selected.length === 1 ? 'selectedOneForSession' : 'selectedForSession', { count: selected.length }) : t('providerDisabled')
-                    : t(personalChatGpt ? 'personalChatGptDefault' : 'projectDefault') }), unavailable.length > 0 && _jsxs("div", { className: "space-y-1", role: "status", children: [_jsx("p", { className: "text-muted-foreground text-xs", children: t('unavailableKeys', { count: unavailable.length }) }), _jsx(Button, { size: "sm", variant: "outline-ghost", disabled: disabled || readOnly, onClick: () => onChange(selected.filter((secretId) => available.has(secretId))), children: t('removeUnavailable') })] }), _jsx("div", { className: "max-h-44 space-y-1 overflow-y-auto", children: keys.map((secret) => _jsxs("label", { className: "hover:bg-hover has-[:focus-visible]:ring-ring flex min-h-10 items-center gap-2 rounded-md px-2 py-2 text-sm has-[:focus-visible]:ring-2 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50", children: [_jsx(Checkbox, { checked: selected.includes(secret.secret_id), disabled: disabled || readOnly || (!selected.includes(secret.secret_id) && selected.length >= 10), onCheckedChange: (checked) => onChange(checked === true ? [...selected, secret.secret_id] : selected.filter((value) => value !== secret.secret_id)) }), _jsx("span", { className: "text-foreground min-w-0 break-words", children: secret.label }), providerId === 'codex' && needsReconnection(secret) && (_jsx("span", { className: "text-muted-foreground ml-auto shrink-0 text-xs", children: t('needsReconnection') }))] }, secret.secret_id)) }), selected.length >= 10 && _jsx("p", { className: "text-muted-foreground text-xs", role: "status", children: t('selectionLimit') }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [configured && !readOnly && _jsx(Button, { size: "sm", variant: "secondary", disabled: disabled, onClick: onReset, children: t(personalChatGpt ? 'resetPersonalChatGptDefault' : 'resetDefault') }), providerId === 'codex'
+                    : t(personalChatGpt ? 'personalChatGptDefault' : 'projectDefault') }), unavailable.length > 0 && _jsxs("div", { className: "space-y-1", role: "status", children: [_jsx("p", { className: "text-muted-foreground text-xs", children: t('unavailableKeys', { count: unavailable.length }) }), _jsx(Button, { size: "sm", variant: "outline-ghost", disabled: disabled || readOnly, onClick: () => onChange(selected.filter((secretId) => available.has(secretId))), children: t('removeUnavailable') })] }), _jsx("div", { className: "max-h-44 space-y-1 overflow-y-auto", children: keys.map((secret) => _jsxs("label", { className: "hover:bg-hover has-[:focus-visible]:ring-ring flex min-h-10 items-center gap-2 rounded-md px-2 py-2 text-sm has-[:focus-visible]:ring-2 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50", children: [_jsx(Checkbox, { checked: selectedIds.has(secret.secret_id), disabled: disabled || readOnly || (!selectedIds.has(secret.secret_id) && selected.length >= 10), onCheckedChange: (checked) => onChange(checked === true ? [...selected, secret.secret_id] : selected.filter((value) => value !== secret.secret_id)) }), _jsx("span", { className: "text-foreground min-w-0 break-words", children: secret.label }), providerId === 'codex' && needsReconnection(secret) && (_jsx("span", { className: "text-muted-foreground ml-auto shrink-0 text-xs", children: t('needsReconnection') }))] }, secret.secret_id)) }), selected.length >= 10 && _jsx("p", { className: "text-muted-foreground text-xs", role: "status", children: t('selectionLimit') }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [configured && !readOnly && _jsx(Button, { size: "sm", variant: "secondary", disabled: disabled, onClick: onReset, children: t(personalChatGpt ? 'resetPersonalChatGptDefault' : 'resetDefault') }), providerId === 'codex'
                         ? _jsx(ChatGptAccountsButton, { projectId: projectId, variant: "outline-ghost", action: "manage", disabled: disabled })
                         : !modelsHref
                             ? null

package/dist/session/overrides/session-overrides-composer.d.ts

@@ -41,4 +41,4 @@ export interface SessionOverridesComposerProps {
  * project-home one in `composer-chat-input.tsx` and the in-session one in
  * `session-chat.tsx`) build the panel from one place.
  */
-export declare function SessionOverridesComposer({ projectId, sessionId, onCommittedDraft, providerSecretPools, onProviderSecretPoolsChange, selectedAgent, sandboxSlot, }: SessionOverridesComposerProps): import("react").JSX.Element;
+export declare function SessionOverridesComposer({ projectId, sessionId, onCommittedDraft, providerSecretPools, onProviderSecretPoolsChange, selectedAgent, sandboxSlot, }: SessionOverridesComposerProps): import("react").JSX.Element | null;