@kortix/ui 0.14.11 → 0.14.13

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

@@ -14,10 +14,10 @@ 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 { isRunnableModel, resolveAvailableSelectedModel, unavailableModelConnection, } from './model-availability.js';
+import { 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';
+import { isClaudeSubscriptionModel, isSubscriptionModel, pickerModelName, shouldShowFreeTag } from './model-tags.js';
 import { useModelConnectionGate } from './use-model-connection-gate.js';
 // Re-export for consumers
 export { Tag };
@@ -199,6 +199,9 @@ export function ModelSelector({ models, selectedModel, onSelect, defaultControls
         const q = search.toLowerCase();
         return models
             .filter((m) => m.enabled !== false &&
+            // Claude subscription models appear once the member signed in to Claude
+            // (Customize → Models → Anthropic), like ChatGPT subscription models.
+            !(isClaudeSubscriptionModel(m) && m.available === false) &&
             (!q ||
                 (m.modelName || '').toLowerCase().includes(q) ||
                 (m.modelID || '').toLowerCase().includes(q) ||
@@ -213,10 +216,7 @@ export function ModelSelector({ models, selectedModel, onSelect, defaultControls
     /** 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) => isRunnableModel(m) && pickerGroupId(m) === 'codex'), [models]);
+    const hasAnyModel = useMemo(() => models.some((m) => m.enabled !== false && !(isClaudeSubscriptionModel(m) && m.available === false)), [models]);
     const grouped = useMemo(() => {
         const groups = new Map();
         for (const m of visibleModels) {
@@ -295,7 +295,8 @@ export function ModelSelector({ models, selectedModel, onSelect, defaultControls
         const connect = unavailableModelConnection(model, { chatGptAvailable });
         if (connect === 'chatgpt')
             return handleOpenChatGpt();
-        if (connect === 'provider')
+        // A Claude model signs in under Anthropic, in the provider list.
+        if (connect === 'claude' || connect === 'provider')
             return handleOpenProviderModal('providers');
         onSelect({ providerID: model.providerID, modelID: model.modelID });
         setOpen(false);
@@ -327,15 +328,13 @@ export function ModelSelector({ models, selectedModel, onSelect, defaultControls
                                                                     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, 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 ? (
+                                            })] })) : 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
+                                    _jsx(ModelSearchEmpty, { search: search, modelCount: models.filter((model) => model.enabled !== false && !(isClaudeSubscriptionModel(model) && model.available === 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') }))] })] })) })] }) })] })] }));
+                                                    : 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')] }))] })] })) })] }) })] })] }));
 }

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

@@ -9,6 +9,15 @@ export declare function shouldShowFreeTag(model: Pick<FlatModel, 'free' | 'model
 export declare function isSubscriptionModel(model: Pick<FlatModel, 'modelID'> & {
     provider?: string | null;
 }): boolean;
+/**
+ * A model that runs through Claude Code on the caller's own Claude Pro or Max
+ * plan (`claude-agent/<id>`, `@kortix/api-contract/claude-agent`). It never
+ * reaches the LLM gateway.
+ */
+export declare function isClaudeSubscriptionModel(model: {
+    provider?: string | null;
+    providerID?: string;
+}): boolean;
 /**
  * What the picker prints for a model.
  *

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

@@ -13,6 +13,14 @@ export function shouldShowFreeTag(model) {
 export function isSubscriptionModel(model) {
     return model.provider === 'codex' || model.modelID.startsWith('codex/');
 }
+/**
+ * A model that runs through Claude Code on the caller's own Claude Pro or Max
+ * plan (`claude-agent/<id>`, `@kortix/api-contract/claude-agent`). It never
+ * reaches the LLM gateway.
+ */
+export function isClaudeSubscriptionModel(model) {
+    return model.providerID === 'claude-agent' || model.provider === 'claude-agent';
+}
 /**
  * What the picker prints for a model.
  *

package/dist/session/panel/easy/detail-view.js

@@ -22,6 +22,7 @@ import { ButtonGroup } from '../../../primitives/button-group.js';
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '../../../primitives/drawer.js';
 import { isPlanWriteTool } from '../../turn/plan-anchor.js';
 import { cn } from '../../../lib/utils.js';
+import { hasOpenFloatingLayer } from '../../../lib/z-stack.js';
 import { focusWithoutScroll } from '../../../internal/lib/utils/focus-without-scroll.js';
 import { CaretLeftIcon as ChevronLeft, CaretRightIcon as ChevronRight, } from '@phosphor-icons/react';
 import { AnimatePresence, m, useReducedMotion, } from 'motion/react';
@@ -116,6 +117,12 @@ function useDetailKeyboard(detail, isMobile, onBack, detailRef) {
             if (isTypingTarget(event.target))
                 return;
             if (event.key === 'Escape') {
+                if (event.defaultPrevented || hasOpenFloatingLayer())
+                    return;
+                const dialog = detailRef.current;
+                const coveringDialog = Array.from(document.querySelectorAll('[role="dialog"][data-state="open"],[role="alertdialog"][data-state="open"]')).some((layer) => !dialog || !layer.contains(dialog));
+                if (coveringDialog)
+                    return;
                 // Mark the press consumed: the page-wide triple-ESC-to-stop
                 // (`session-chat.tsx`) skips a `defaultPrevented` Escape. Without it,
                 // closing three full-screen images in a row stopped a running turn.

package/dist/session/panel/easy/easy-panel.js

@@ -47,7 +47,7 @@ export function EasyPanel() {
     // with `session-chat.tsx` so the two cannot disagree.
     const planInChat = usePlanInChat();
     // Null outside a `SessionPanelProvider` — `SessionChat` also renders
-    // read-only inside `sub-session-modal.tsx`, which has no panel at all.
+    // read-only inside `legacy-subagent-chat.tsx`, which has no panel at all.
     if (!panel)
         return null;
     const { files, context, apps, outputsDefaultOpen, sessionId, handleOpenOutput, openDetail } = panel;

package/dist/session/panel/easy/step-icon.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * "what is it?".
  */
 import { cn } from '../../../lib/utils.js';
-import { ArchiveIcon as Archive, RobotIcon as Bot, BrainIcon as Brain, CodeIcon as Code, QuestionIcon as CircleHelp, NotePencilIcon as FilePen, FolderOpenIcon as FolderOpen, GlobeIcon as Globe, ClockCounterClockwiseIcon as History, ListChecksIcon as ListChecks, PlugIcon as Plug, MagnifyingGlassIcon as Search, SparkleIcon as Sparkles, TerminalIcon as Terminal, MagicWandIcon as Wand2, WrenchIcon as Wrench, LightningIcon as Zap, } from '@phosphor-icons/react';
+import { ArchiveIcon as Archive, RobotIcon as Bot, BrainIcon as Brain, CodeIcon as Code, QuestionIcon as CircleHelp, NotePencilIcon as FilePen, FlowArrowIcon as FlowArrow, FolderOpenIcon as FolderOpen, GlobeIcon as Globe, ClockCounterClockwiseIcon as History, ListChecksIcon as ListChecks, PlugIcon as Plug, MagnifyingGlassIcon as Search, SlidersHorizontalIcon as Sliders, SparkleIcon as Sparkles, TerminalIcon as Terminal, MagicWandIcon as Wand2, WrenchIcon as Wrench, LightningIcon as Zap, } from '@phosphor-icons/react';
 const FAMILY_ICON = {
     explore: Search,
     edit: FilePen,
@@ -23,6 +23,10 @@ const FAMILY_ICON = {
     create: Sparkles,
     plan: ListChecks,
     delegate: Bot,
+    // pi's workflow: several agents on one run.
+    workflow: FlowArrow,
+    // My Kortix's platform tools: settings of the project (agents, schedules, members, …).
+    platform: Sliders,
     sessions: History,
     memory: Brain,
     connectors: Plug,

package/dist/session/panel/mobile-tool-drawer.js

@@ -19,6 +19,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '../../primitives/drawer.js';
 import { BrowserPanel } from '../../browser/browser-panel.js';
+import { ArtifactPanelPreview } from '../../artifacts/artifact-session.js';
+import { parseArtifactUrl } from '../../artifacts/frame-policy.js';
 import { CloseButton } from './easy/detail-view.js';
 import { SessionAuditPanel } from './session-audit-panel.js';
 import { SessionRemindersPanel } from './session-reminders-panel.js';
@@ -36,17 +38,19 @@ const TOOL_META = {
     browser: { label: 'Browser', Icon: GlobeIcon },
     files: { label: 'Files', Icon: FolderOpenIcon },
     audit: { label: 'Audit', Icon: ScrollIcon },
-    reminders: { label: 'Reminders', Icon: AlarmIcon },
+    reminders: { label: 'Loops', Icon: AlarmIcon },
     desktop: { label: 'Desktop', Icon: MonitorIcon },
 };
 export function MobileToolDrawer({ sessionId, projectId, projectSessionId, }) {
     const view = useKortixComputerStore((s) => s.mobileToolView);
+    const target = useKortixComputerStore((s) => s.mobileToolTarget);
     const closeMobileTool = useKortixComputerStore((s) => s.closeMobileTool);
     const toolMeta = useLocalizedUiCatalog(TOOL_META);
     const meta = view ? toolMeta[view] : null;
+    const artifactUrl = view === 'browser' && target?.url && parseArtifactUrl(target.url) ? target.url : null;
     // Terminal, Browser and Files need the computer: while it boots, the drawer
     // shows the wake status in their place.
-    const booting = !!useOptionalSessionPanel()?.booting &&
+    const booting = !!useOptionalSessionPanel()?.booting && !artifactUrl &&
         (view === 'terminal' || view === 'browser' || view === 'files' || view === 'desktop');
-    return (_jsx(Drawer, { open: view !== null, onOpenChange: (next) => !next && closeMobileTool(), children: _jsxs(DrawerContent, { className: "flex h-[95dvh] max-h-[95dvh] min-h-[95dvh] flex-col overflow-hidden p-0", children: [_jsx(DrawerHeader, { className: "shrink-0 px-4 py-3 text-left", children: _jsxs(DrawerTitle, { className: "flex items-center justify-between gap-2 text-base", children: [_jsxs("span", { className: "flex items-center gap-2.5", children: [meta && _jsx(meta.Icon, { className: "text-muted-foreground size-4 shrink-0" }), meta?.label] }), _jsx(CloseButton, { onClose: closeMobileTool, variant: "ghost" })] }) }), _jsxs("div", { className: "min-h-0 flex-1 overflow-hidden", children: [booting && _jsx(SessionBootStatus, { projectId: projectId, sessionId: projectSessionId }), !booting && view === 'terminal' && (_jsx(SessionTerminalPanel, { sessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId })), !booting && view === 'browser' && (_jsx(BrowserPanel, { tabId: sessionPreviewTabId(sessionId), projectId: projectId, projectSessionId: projectSessionId })), !booting && view === 'files' && (_jsx(SessionFilesExplorer, { chatSessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId })), !booting && view === 'desktop' && (_jsx(SessionDesktop, { projectId: projectId, projectSessionId: projectSessionId, onClose: closeMobileTool })), view === 'audit' && (_jsx(SessionAuditPanel, { projectId: projectId, projectSessionId: projectSessionId })), view === 'reminders' && (_jsx("div", { className: "h-full overflow-y-auto p-4", children: _jsx(SessionRemindersPanel, { projectId: projectId, projectSessionId: projectSessionId }) }))] })] }) }));
+    return (_jsx(Drawer, { open: view !== null, onOpenChange: (next) => !next && closeMobileTool(), children: _jsxs(DrawerContent, { className: "flex h-[95dvh] max-h-[95dvh] min-h-[95dvh] flex-col overflow-hidden p-0", children: [_jsx(DrawerHeader, { className: "shrink-0 px-4 py-3 text-left", children: _jsxs(DrawerTitle, { className: "flex items-center justify-between gap-2 text-base", children: [_jsxs("span", { className: "flex items-center gap-2.5", children: [meta && _jsx(meta.Icon, { className: "text-muted-foreground size-4 shrink-0" }), meta?.label] }), _jsx(CloseButton, { onClose: closeMobileTool, variant: "ghost" })] }) }), _jsxs("div", { className: "min-h-0 flex-1 overflow-hidden", children: [booting && _jsx(SessionBootStatus, { projectId: projectId, sessionId: projectSessionId }), !booting && view === 'terminal' && (_jsx(SessionTerminalPanel, { sessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId })), artifactUrl && _jsx(ArtifactPanelPreview, { url: artifactUrl, onClose: closeMobileTool }, artifactUrl), !booting && view === 'browser' && !artifactUrl && (_jsx(BrowserPanel, { tabId: sessionPreviewTabId(sessionId), projectId: projectId, projectSessionId: projectSessionId, targetUrl: target?.url })), !booting && view === 'files' && (_jsx(SessionFilesExplorer, { chatSessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId })), !booting && view === 'desktop' && (_jsx(SessionDesktop, { projectId: projectId, projectSessionId: projectSessionId, onClose: closeMobileTool })), view === 'audit' && (_jsx(SessionAuditPanel, { projectId: projectId, projectSessionId: projectSessionId })), view === 'reminders' && (_jsx("div", { className: "h-full overflow-y-auto p-4", children: _jsx(SessionRemindersPanel, { projectId: projectId, projectSessionId: projectSessionId }) }))] })] }) }));
 }

package/dist/session/panel/open-session-quick-view.js

@@ -43,7 +43,7 @@ target) {
     // for behind the close button. The panel toggle still opens the panel;
     // this path is only the "show me this one tool" intent.
     if (isMobileViewport()) {
-        useKortixComputerStore.getState().openMobileTool(view);
+        useKortixComputerStore.getState().openMobileTool(view, target);
         track('panel_opened', { source, surface: 'mobile-tool', view });
         return;
     }

package/dist/session/panel/session-action-panel-column.js

@@ -134,7 +134,7 @@ hotkey = true, } = {}) {
         };
     }, [shouldHandleHotkey, toggleRight]);
     // No provider means no panel to render: `SessionChat` also renders read-only
-    // inside `sub-session-modal.tsx`, outside `SessionLayout`. Mobile has no
+    // inside `legacy-subagent-chat.tsx`, outside `SessionLayout`. Mobile has no
     // column either — at 375px a side column is the whole screen, so the cards
     // stay in the bottom drawer they have always used.
     if (!panel || isMobile)

package/dist/session/panel/session-desktop.js

@@ -17,6 +17,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * viewer to the slowest one, and a background tab stops acking frames, so a
  * forgotten tab would slow the stream for everyone watching. It reconnects,
  * on a fresh keyframe, when the tab is shown again.
+ *
+ * A computer without a desktop (a template on another base, or a computer
+ * that booted an image built before it had one) says so; the header does not offer the panel there. The
+ * control bar appears only once the desktop answers, never over the proxy's
+ * "not answering" page.
  */
 import { useTranslations } from '../../i18n/index.js';
 import { Button } from '../../primitives/button.js';
@@ -30,9 +35,17 @@ import { PanelWidthButton } from '../../files/viewer/viewer-actions.js';
 import { CloseButton, DetailSidebarToggle } from '../../files/viewer/viewer-chrome.js';
 import { cn } from '../../lib/utils.js';
 import { probePreviewPort } from '@kortix/sdk';
+import { useHasSessionDesktop } from '@kortix/sdk/react';
 import { ArrowSquareOutIcon, MonitorIcon } from '@phosphor-icons/react';
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
 export const DESKTOP_URL = 'http://localhost:6901/';
+/** How often the panel asks again until the desktop answers. */
+const PROBE_INTERVAL_MS = 3_000;
+/**
+ * The proxy answers 502 for a stopped desktop only after ~5 s (measured 4.8 s:
+ * it retries the port first). The probe's 3 s default reads that as `unknown`.
+ */
+const PROBE_TIMEOUT_MS = 10_000;
 const subscribeVisibility = (onChange) => {
     document.addEventListener('visibilitychange', onChange);
     return () => document.removeEventListener('visibilitychange', onChange);
@@ -48,27 +61,41 @@ export function SessionDesktop({ projectId, projectSessionId, onClose, }) {
     }).url;
     const frameRef = useRef(null);
     const [control, setControl] = useState(false);
-    // 'off' = the proxy answered 502/503/504: nothing listens on 6901.
-    const [state, setState] = useState('probing');
+    // `undefined` until the session's daemon answers its health probe.
+    const hasDesktop = useHasSessionDesktop();
+    // `unreachable` = the proxy answered 502/503/504: nothing listens on 6901.
+    const [probe, setProbe] = useState('unknown');
     const [attempt, setAttempt] = useState(0);
     const visible = useSyncExternalStore(subscribeVisibility, tabVisible, () => true);
-    const live = !!src && state === 'on';
+    const live = probe === 'reachable';
+    // Ask until the desktop answers. The first answer is often `unknown`: the
+    // preview cookie arrives with the frame's first load. A stopped desktop
+    // answers `unreachable`, and the panel shows it again once it starts.
     useEffect(() => {
-        if (!src)
+        if (!src || !hasDesktop || !visible)
             return;
         const abort = new AbortController();
-        void probePreviewPort(src, { signal: abort.signal }).then((probe) => {
-            if (!abort.signal.aborted)
-                setState(probe === 'unreachable' ? 'off' : 'on');
-        });
-        return () => abort.abort();
-    }, [src, attempt]);
+        let timer;
+        const ask = async () => {
+            const result = await probePreviewPort(src, { signal: abort.signal, timeoutMs: PROBE_TIMEOUT_MS });
+            if (abort.signal.aborted)
+                return;
+            setProbe(result);
+            if (result !== 'reachable')
+                timer = setTimeout(ask, PROBE_INTERVAL_MS);
+        };
+        void ask();
+        return () => {
+            abort.abort();
+            clearTimeout(timer);
+        };
+    }, [src, hasDesktop, visible, attempt]);
     const takeOver = () => {
         setControl(true);
         frameRef.current?.focus();
     };
-    return (_jsxs("div", { className: "bg-background flex h-full min-h-0 min-w-0 flex-col", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-1 px-2 py-1", children: [_jsx(DetailSidebarToggle, { className: "size-7" }), _jsx(MonitorIcon, { className: "text-muted-foreground ml-1 size-3.5 shrink-0" }), _jsx("span", { className: "truncate text-sm font-medium", children: t('title') }), _jsx("div", { className: "flex-1" }), _jsxs(ButtonGroup, { className: "shrink-0", children: [_jsx(Button, { variant: "secondary", size: "icon", className: "size-7", disabled: !live, "aria-label": t('openTab'), onClick: () => src && window.open(src, '_blank', 'noopener,noreferrer'), children: _jsx(ArrowSquareOutIcon, { className: "size-3.5" }) }), _jsx(PanelWidthButton, { isMobile: isMobile }), _jsx(CloseButton, { onClose: onClose })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2 px-3 pb-3", children: [_jsx("div", { "data-slot": "desktop-screen", "data-control": control ? 'user' : 'agent', className: cn('bg-muted relative min-h-0 flex-1 overflow-hidden rounded-xl ring-1 ring-border transition-shadow', control && 'ring-2 ring-primary'), children: state === 'off' ? (_jsxs("div", { className: "text-muted-foreground flex h-full flex-col items-center justify-center gap-3 px-6 text-center text-sm", children: [_jsx(MonitorIcon, { className: "size-10 opacity-20" }), _jsx("p", { children: t('offline') }), _jsxs("p", { className: "text-xs", children: [t('start'), " ", _jsx("code", { children: "kortix-desktop start" }), "."] }), _jsx(Button, { variant: "secondary", size: "sm", onClick: () => {
-                                        setState('probing');
-                                        setAttempt((n) => n + 1);
-                                    }, children: t('retry') })] })) : !live || !visible ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(Loading, { className: "size-4" }) })) : (_jsxs(_Fragment, { children: [_jsx("iframe", { ref: frameRef, src: src, title: t('title'), className: "h-full w-full border-0", sandbox: framePolicy('app', src).sandbox, allow: "clipboard-read; clipboard-write; autoplay; fullscreen", tabIndex: control ? 0 : -1 }), !control && (_jsx("button", { type: "button", "aria-label": t('takeOver'), "data-slot": "desktop-shield", className: "absolute inset-0 cursor-pointer", onClick: takeOver }))] })) }), _jsx("div", { className: "flex h-9 shrink-0 items-center justify-center gap-3 text-sm", children: live && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground", children: control ? t('userControl') : t('agentControl') }), _jsx(Button, { variant: control ? 'secondary' : 'default', size: "sm", className: "h-7 rounded-full px-3", "aria-pressed": control, onClick: control ? () => setControl(false) : takeOver, children: control ? t('returnControl') : t('takeOver') })] })) })] })] }));
+    return (_jsxs("div", { className: "bg-background flex h-full min-h-0 min-w-0 flex-col", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-1 px-2 py-1", children: [_jsx(DetailSidebarToggle, { className: "size-7" }), _jsx(MonitorIcon, { className: "text-muted-foreground ml-1 size-3.5 shrink-0" }), _jsx("span", { className: "truncate text-sm font-medium", children: t('title') }), _jsx("div", { className: "flex-1" }), _jsxs(ButtonGroup, { className: "shrink-0", children: [_jsx(Button, { variant: "secondary", size: "icon", className: "size-7", disabled: !live, "aria-label": t('openTab'), onClick: () => src && window.open(src, '_blank', 'noopener,noreferrer'), children: _jsx(ArrowSquareOutIcon, { className: "size-3.5" }) }), _jsx(PanelWidthButton, { isMobile: isMobile }), _jsx(CloseButton, { onClose: onClose })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2 px-3 pb-3", children: [_jsx("div", { "data-slot": "desktop-screen", "data-control": control ? 'user' : 'agent', className: cn('bg-muted relative min-h-0 flex-1 overflow-hidden rounded-xl ring-1 ring-border transition-shadow', control && 'ring-2 ring-primary'), children: hasDesktop === false ? (_jsx(DesktopNotice, { title: t('noDesktop'), hint: t('noDesktopHint') })) : probe === 'unreachable' ? (_jsx(DesktopNotice, { title: t('offline'), hint: _jsxs(_Fragment, { children: [t('start'), " ", _jsx("code", { children: "kortix-desktop start" }), "."] }), children: _jsx(Button, { variant: "secondary", size: "sm", onClick: () => setAttempt((n) => n + 1), children: t('retry') }) })) : !hasDesktop || !src || !visible ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(Loading, { className: "size-4" }) })) : (_jsxs(_Fragment, { children: [_jsx("iframe", { ref: frameRef, src: src, title: t('title'), className: "h-full w-full border-0", sandbox: framePolicy('app', src).sandbox, allow: "clipboard-read; clipboard-write; autoplay; fullscreen", tabIndex: control ? 0 : -1 }), !control && (_jsx("button", { type: "button", "aria-label": t('takeOver'), "data-slot": "desktop-shield", className: "absolute inset-0 cursor-pointer", onClick: takeOver }))] })) }), _jsx("div", { className: "flex h-9 shrink-0 items-center justify-center gap-3 text-sm", children: live && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground", children: control ? t('userControl') : t('agentControl') }), _jsx(Button, { variant: control ? 'secondary' : 'default', size: "sm", className: "h-7 rounded-full px-3", "aria-pressed": control, onClick: control ? () => setControl(false) : takeOver, children: control ? t('returnControl') : t('takeOver') })] })) })] })] }));
+}
+function DesktopNotice({ title, hint, children }) {
+    return (_jsxs("div", { className: "text-muted-foreground flex h-full flex-col items-center justify-center gap-3 px-6 text-center text-sm", children: [_jsx(MonitorIcon, { className: "size-10 opacity-20" }), _jsx("p", { children: title }), _jsx("p", { className: "text-xs", children: hint }), children] }));
 }

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

@@ -45,7 +45,7 @@ export declare const SessionPanelContext: import("react").Context<SessionPanelVa
  * The panel value, or null outside a provider.
  *
  * Optional on purpose, exactly as `useOptionalSidebar` is: `SessionChat` has a
- * second call site in `sub-session-modal.tsx` that renders it read-only and
+ * second call site in `legacy-subagent-chat.tsx` that renders it read-only and
  * OUTSIDE `SessionLayout`. The floating overlay self-gates to null there rather
  * than every call site having to know which tree it is in.
  */

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

@@ -44,9 +44,7 @@ import { useSessionComposerPrefillStore } from '../composer/stores/session-compo
 import { panelToRestore, rememberedPanelOf, useSessionPanelMemoryStore, } from '../../internal/stores/session-panel-memory-store.js';
 import { useUserPreferencesStore } from '../../internal/stores/user-preferences-store.js';
 import { getProjectSession, SANDBOX_PORTS } from '@kortix/sdk';
-import { qk } from '@kortix/sdk/react';
 import { FileTextIcon as FileText } from '@phosphor-icons/react';
-import { useQueryClient } from '@tanstack/react-query';
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { AppPreview, AppPreviewBooting } from './easy/app-preview.js';
 import { isWideDeliverable, neighborOutputs, outputKey, quickBrowserOutput, } from './easy/easy-panel-logic.js';
@@ -67,7 +65,7 @@ export const SessionPanelContext = createContext(null);
  * The panel value, or null outside a provider.
  *
  * Optional on purpose, exactly as `useOptionalSidebar` is: `SessionChat` has a
- * second call site in `sub-session-modal.tsx` that renders it read-only and
+ * second call site in `legacy-subagent-chat.tsx` that renders it read-only and
  * OUTSIDE `SessionLayout`. The floating overlay self-gates to null there rather
  * than every call site having to know which tree it is in.
  */
@@ -479,7 +477,6 @@ export function SessionPanelProvider({ sessionId, isSessionBusy = false, project
     const sidePanelOpen = useKortixComputerStore((s) => s.isSidePanelOpen);
     const advancedPanel = useUserPreferencesStore((s) => s.preferences.panelMode === 'advanced');
     const isMobile = useIsMobile();
-    const queryClient = useQueryClient();
     // Nothing is recorded before the arrival is decided: until then the panel is
     // closed by the arrival itself, not by the person.
     const [restoreSettled, setRestoreSettled] = useState(false);
@@ -497,12 +494,11 @@ export function SessionPanelProvider({ sessionId, isSessionBusy = false, project
         let alive = true;
         // A FRESH row, never the cached one: it can be 30 s old, and reopening a
         // Terminal on a session stopped since then wakes its computer (measured).
-        void queryClient
-            .fetchQuery({
-            queryKey: qk.project.session(projectId, projectSessionId),
-            queryFn: () => getProjectSession(projectId, projectSessionId, { showErrors: false }),
-            staleTime: 0,
-        })
+        // Its own request, not the query cache's: `fetchQuery` joins the page's
+        // in-flight fetch of the same row, a refetch on arrival cancels that
+        // (`CancelledError`), and the restore was dropped on about half the
+        // returns from another session (measured).
+        void getProjectSession(projectId, projectSessionId, { showErrors: false })
             .then((row) => {
             if (!alive)
                 return;
@@ -531,7 +527,7 @@ export function SessionPanelProvider({ sessionId, isSessionBusy = false, project
             alive = false;
             setRestoreSettled(true);
         };
-    }, [isActivePanel, memoryKey, isMobile, projectId, projectSessionId, queryClient, sessionId]);
+    }, [isActivePanel, memoryKey, isMobile, projectId, projectSessionId, sessionId]);
     // A file preview reopens once the transcript has derived its output, and only
     // if the person has not opened something else meanwhile.
     useEffect(() => {

package/dist/session/prompts/question-prompt.js

@@ -21,7 +21,9 @@ import { Close } from '../../icons/close.js';
 // ---------------------------------------------------------------------------
 function QuestionMarkdown({ content, className }) {
     return (_jsx("div", { className: cn('question-md', className), children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: {
-                p: ({ children }) => _jsx("p", { className: "my-1 leading-relaxed", children: children }),
+                // `pre-line`: a single newline is a line break. A question's lines (a workflow's
+                // title, phases and agent count) would otherwise run together as one paragraph.
+                p: ({ children }) => _jsx("p", { className: "my-1 leading-relaxed whitespace-pre-line", children: children }),
                 strong: ({ children }) => (_jsx("strong", { className: "text-foreground font-semibold", children: children })),
                 em: ({ children }) => _jsx("em", { className: "text-muted-foreground", children: children }),
                 ul: ({ children }) => _jsx("ul", { className: "my-0.5 list-disc pl-4", children: children }),

package/dist/session/status/session-error-banner.js

@@ -5,6 +5,7 @@ import { useLocale, useTranslations } from '../../i18n/index.js';
 import { formatUsdAsCredits, parseBalanceUsd } from '../../_vendor/kortix-shared.js';
 import { chatGptConnectionAction } from '../models/chatgpt-connection-action.js';
 import { ChatGptConnectionSlot } from '../models/chatgpt-connection-button.js';
+import { ClaudeConnectionSlot, claudeConnectionAction } from '../models/claude-connection-slot.js';
 import { AskOwnerForCreditsButton } from '../models/ask-owner-for-credits-button.js';
 import { Button } from '../../primitives/button.js';
 import { ChainOfThoughtStep } from '../../primitives/chain-of-thought.js';
@@ -264,8 +265,10 @@ export function TurnErrorDisplay({ errorText, errorDetails, errorRaw, defaultDet
     // A member's own ChatGPT login expired or is missing: the fix is theirs to
     // make, so the row carries it instead of leaving a dead end mid-session.
     const chatGpt = chatGptConnectionAction(gateway);
+    // The same for the member's own Claude subscription (Claude models run on it).
+    const claude = chatGpt ? null : claudeConnectionAction(text);
     // Real errors → a checkpoint row in the activity lane, not a boxed alert.
-    return (_jsx(TurnErrorCheckpoint, { text: text, gateway: gateway, raw: errorRaw, defaultOpen: defaultDetailsOpen, action: chatGpt ? _jsx(ChatGptConnectionSlot, { action: chatGpt }) : undefined, modelOptions: modelOptions, className: className }));
+    return (_jsx(TurnErrorCheckpoint, { text: text, gateway: gateway, raw: errorRaw, defaultOpen: defaultDetailsOpen, action: chatGpt ? _jsx(ChatGptConnectionSlot, { action: chatGpt }) : claude ? _jsx(ClaudeConnectionSlot, { action: claude }) : undefined, modelOptions: modelOptions, className: className }));
 }
 export function SessionRetryDisplay({ message, attempt, secondsLeft, details, className, }) {
     if (!message)