@kortix/ui 0.14.10 → 0.14.11

package/dist/session/composer/send-stop-control.js

@@ -4,6 +4,7 @@ import { Button } from '../../primitives/button.js';
 import Hint from '../../primitives/hint.js';
 import { Kbd } from '../../primitives/kbd.js';
 import Loading from '../../primitives/loading.js';
+import { cn } from '../../lib/utils.js';
 import { ArrowUpIcon as ArrowUp, SquareIcon } from '@phosphor-icons/react';
 import { AnimatePresence, m } from 'motion/react';
 import { useTranslations } from '../../i18n/index.js';
@@ -24,6 +25,7 @@ const ICON_SWAP = {
 export function SendStopControl({ isSending, isBusy, onStop, stopDisabled, canStop = true, escCount, lockForQuestion, questionButtonLabel, submitLabel = null, questionCanAct, hasText, canSubmit, submitDisabled, disabled, modelUnavailable, agentUnavailable = false, attachmentFailed = false, attachmentUnsupported = null, onSubmit, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const t = useTranslations('threads');
+    const tDesktop = useTranslations('sessionDesktop');
     const tAttachments = useTranslations('hardcodedUi.composerAttachments');
     // One line, the same one the agent picker's tooltip carries — the two
     // controls are refusing for one reason and must not word it two ways.
@@ -54,9 +56,12 @@ export function SendStopControl({ isSending, isBusy, onStop, stopDisabled, canSt
         // alone, a click meant to send it ended the run and left it unsent. Send
         // goes out the way Enter does; Stop steps back to secondary beside it.
         const followUp = hasText || canSubmit;
-        const stop = (_jsxs("div", { className: "relative flex items-center", children: [escCount > 0 && (_jsx("div", { className: "animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2 pointer-events-none absolute right-1/2 bottom-full mb-2 translate-x-1/2 duration-(--duration-normal)", children: _jsxs("div", { className: "bg-background text-foreground z-[9999] inline-flex w-fit items-center gap-1.5 overflow-hidden rounded-sm border p-1 px-1.5 text-xs whitespace-nowrap", children: [_jsx(Kbd, { children: "ESC" }), _jsx("span", { children: escCount === 1
-                                    ? tI18nComplete.raw('textb9ef397631ca')
-                                    : tI18nComplete.raw('text9754e2d14f9e') })] }) })), _jsx(Hint, { side: "top", label: _jsxs("p", { children: [tI18nComplete.raw('textcae7d57bc067'), " ", _jsx(Kbd, { children: "ESC" }), " \u00D73"] }), children: _jsx(Button, { size: "icon-base", variant: followUp ? 'secondary' : 'default', "aria-label": t('stop'), onClick: onStop, disabled: stopDisabled || !onStop, className: ICON_BUTTON, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(m.span, { className: "flex items-center", ...ICON_SWAP, children: _jsx(SquareIcon, { weight: "fill", className: "size-4 shrink-0" }) }, "stop") }) }) })] }));
+        const stop = (_jsxs("div", { className: "relative flex items-center", children: [escCount > 0 && (
+                // Progress toward the triple-ESC stop: one pip per press, so the
+                // count reads at a glance instead of as a bare "×2".
+                _jsx("div", { role: "status", className: "animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2 pointer-events-none absolute right-1/2 bottom-full mb-2 translate-x-1/2 duration-(--duration-normal)", children: _jsxs("div", { className: "bg-background text-foreground inline-flex w-fit items-center gap-2 rounded-md border px-2 py-1 text-xs whitespace-nowrap", children: [_jsx("span", { className: "flex items-center gap-1", "aria-hidden": true, children: [0, 1, 2].map((pip) => (_jsx("span", { className: cn('size-1.5 rounded-full', pip < escCount ? 'bg-foreground' : 'bg-muted-foreground/30') }, pip))) }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Kbd, { className: "h-4 w-auto", children: tDesktop('escape') }), _jsx("span", { className: "tabular-nums", children: escCount === 1
+                                            ? tI18nComplete.raw('textb9ef397631ca')
+                                            : tI18nComplete.raw('text9754e2d14f9e') })] })] }) })), _jsx(Hint, { side: "top", label: _jsxs("span", { className: "flex items-center gap-2", children: [tI18nComplete.raw('textcae7d57bc067'), _jsxs("span", { className: "flex items-center gap-1 opacity-60", children: [_jsx(Kbd, { className: "h-4 w-auto", children: tDesktop('escape') }), _jsx("span", { className: "tabular-nums", children: "\u00D73" })] })] }), children: _jsx(Button, { size: "icon-base", variant: followUp ? 'secondary' : 'default', "aria-label": t('stop'), onClick: onStop, disabled: stopDisabled || !onStop, className: ICON_BUTTON, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(m.span, { className: "flex items-center", ...ICON_SWAP, children: _jsx(SquareIcon, { weight: "fill", className: "size-4 shrink-0" }) }, "stop") }) }) })] }));
         if (!followUp)
             return stop;
         return (_jsxs("div", { className: "flex items-center gap-1.5", children: [stop, sendButton] }));

package/dist/session/header/session-site-header.js

@@ -42,7 +42,7 @@ import { useSessionHistoryViewStore } from '../../internal/stores/session-histor
 import { useIsActionPanelOpen, useReadyChip, useToggleActionPanel, } from '../../internal/stores/kortix-computer-store.js';
 import { createProjectSession, directSubsessions, restartProjectSession, stopProjectSession } from '@kortix/sdk';
 import { qk, useProjectSession, useRuntimeSupports, useSessionParticipants, useSessionWatch, } from '@kortix/sdk/react';
-import { ArchiveIcon, ArrowsClockwiseIcon, BellIcon, BellSlashIcon, CaretDoubleLeftIcon, GitForkIcon, LinkSimpleIcon, CaretDownIcon, CodeSimpleIcon as Code2, FileArrowDownIcon as FileDown, FolderSimpleIcon, GlobeSimpleIcon, StackIcon as Layers, PencilSimpleIcon, PushPinIcon, PushPinSlashIcon, ArrowCounterClockwiseIcon as RotateCcw, ShareIcon as Share, SquareIcon as Square, TerminalIcon, TrashIcon, } from '@phosphor-icons/react';
+import { ArchiveIcon, ArrowsClockwiseIcon, BellIcon, BellSlashIcon, CaretDoubleLeftIcon, GitForkIcon, LinkSimpleIcon, CaretDownIcon, CodeSimpleIcon as Code2, FileArrowDownIcon as FileDown, FolderSimpleIcon, GlobeSimpleIcon, MonitorIcon, StackIcon as Layers, PencilSimpleIcon, PushPinIcon, PushPinSlashIcon, ArrowCounterClockwiseIcon as RotateCcw, ShareIcon as Share, SquareIcon as Square, TerminalIcon, TrashIcon, } from '@phosphor-icons/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useMemo, useRef, useState } from 'react';
 /** Sandbox surfaces reachable from the header. One list drives both the
@@ -51,6 +51,8 @@ import { useMemo, useRef, useState } from 'react';
 const DEV_TOOLS = [
     { view: 'terminal', label: 'Terminal', Icon: TerminalIcon },
     { view: 'browser', label: 'Browser', Icon: GlobeSimpleIcon },
+    // The computer's live screen (`session-desktop.tsx`).
+    { view: 'desktop', label: 'Desktop', Icon: MonitorIcon },
     { view: 'files', label: 'Files', Icon: FolderSimpleIcon },
 ];
 export function SessionSiteHeader({ sessionId, sessionTitle, isMobileView, leadingAction, parent, }) {

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

@@ -116,6 +116,10 @@ function useDetailKeyboard(detail, isMobile, onBack, detailRef) {
             if (isTypingTarget(event.target))
                 return;
             if (event.key === 'Escape') {
+                // 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.
+                event.preventDefault();
                 onBack();
                 return;
             }

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

@@ -22,6 +22,7 @@ import { BrowserPanel } from '../../browser/browser-panel.js';
 import { CloseButton } from './easy/detail-view.js';
 import { SessionAuditPanel } from './session-audit-panel.js';
 import { SessionRemindersPanel } from './session-reminders-panel.js';
+import { SessionDesktop } from './session-desktop.js';
 import { SessionFilesExplorer } from './session-files-explorer.js';
 import { SessionTerminalPanel } from '../../terminal/session-terminal-panel.js';
 import { SessionBootStatus } from '../status/session-starting-loader.js';
@@ -29,13 +30,14 @@ import { useOptionalSessionPanel } from './session-panel-provider.js';
 import { useLocalizedUiCatalog } from '../../i18n/ui-catalog/use-localized-ui-catalog.js';
 import { useKortixComputerStore } from '../../internal/stores/kortix-computer-store.js';
 import { sessionPreviewTabId } from '../../internal/stores/session-browser-store.js';
-import { AlarmIcon, FolderOpenIcon, GlobeIcon, ScrollIcon, TerminalWindowIcon, } from '@phosphor-icons/react';
+import { AlarmIcon, FolderOpenIcon, GlobeIcon, MonitorIcon, ScrollIcon, TerminalWindowIcon, } from '@phosphor-icons/react';
 const TOOL_META = {
     terminal: { label: 'Terminal', Icon: TerminalWindowIcon },
     browser: { label: 'Browser', Icon: GlobeIcon },
     files: { label: 'Files', Icon: FolderOpenIcon },
     audit: { label: 'Audit', Icon: ScrollIcon },
     reminders: { label: 'Reminders', Icon: AlarmIcon },
+    desktop: { label: 'Desktop', Icon: MonitorIcon },
 };
 export function MobileToolDrawer({ sessionId, projectId, projectSessionId, }) {
     const view = useKortixComputerStore((s) => s.mobileToolView);
@@ -45,6 +47,6 @@ export function MobileToolDrawer({ sessionId, projectId, projectSessionId, }) {
     // Terminal, Browser and Files need the computer: while it boots, the drawer
     // shows the wake status in their place.
     const booting = !!useOptionalSessionPanel()?.booting &&
-        (view === 'terminal' || view === 'browser' || view === 'files');
-    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 })), 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 }) }))] })] }) }));
+        (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 }) }))] })] }) }));
 }

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

@@ -55,8 +55,8 @@ target) {
     // is tab-gated — relying on the latter silently dropped the terminal open
     // on /projects/:id/sessions/:id.
     const activePanelSessionId = getActivePanelSessionId();
-    // Reminders is an Easy detail with no Advanced tab: it takes the request path in both modes.
-    if (panelMode === 'advanced' && view !== 'reminders') {
+    // Reminders and Desktop are Easy details with no Advanced tab: they take the request path in both modes.
+    if (panelMode === 'advanced' && view !== 'reminders' && view !== 'desktop') {
         if (activePanelSessionId) {
             // `SessionPanelView` calls the file explorer 'explorer'; its 'files'
             // member is the git-changes diff view. The quick-view vocabulary uses

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

@@ -26,6 +26,7 @@ const AppPreview = lazy(() => import('./easy/app-preview.js').then((m) => ({ def
 const SessionTerminalPanel = lazy(() => import('../../terminal/session-terminal-panel.js').then((m) => ({ default: m.SessionTerminalPanel })));
 const SessionFilesExplorer = lazy(() => import('./session-files-explorer.js').then((m) => ({ default: m.SessionFilesExplorer })));
 const SessionAuditPanel = lazy(() => import('./session-audit-panel.js').then((m) => ({ default: m.SessionAuditPanel })));
+const SessionDesktop = lazy(() => import('./session-desktop.js').then((m) => ({ default: m.SessionDesktop })));
 const SessionRemindersPanel = lazy(() => import('./session-reminders-panel.js').then((m) => ({ default: m.SessionRemindersPanel })));
 export function SessionPanelFallback({ projectId, projectSessionId, runtimeSessionId, }) {
     useEffect(() => registerPanelFallbackHost(), []);
@@ -49,15 +50,17 @@ function PanelViewModal({ projectId, projectSessionId, runtimeSessionId }) {
                 ? tI18nComplete.raw('textbb6aea287396')
                 : view === 'reminders'
                     ? tReminders('title')
-                    : target?.changes
-                        ? 'Changes'
-                        : 'Files';
-    const body = view === 'browser' ? (_jsx(AppPreview, { url: target?.url ?? '', name: title, projectId: projectId, shareContext: { projectId, sessionId: projectSessionId }, onClose: closePanelFallbackView })) : view === 'audit' ? (_jsx(SessionAuditPanel, { projectId: projectId, projectSessionId: projectSessionId })) : view === 'reminders' ? (_jsx("div", { className: "p-4", children: _jsx(SessionRemindersPanel, { projectId: projectId, projectSessionId: projectSessionId }) })) : !runtimeSessionId ? (_jsx(Centered, { children: _jsx(Loading, { className: "size-5" }) })) : view === 'terminal' ? (_jsx(SessionTerminalPanel, { sessionId: runtimeSessionId, projectId: projectId, projectSessionId: projectSessionId })) : (_jsx(SessionFilesExplorer, { chatSessionId: runtimeSessionId, projectId: projectId, projectSessionId: projectSessionId, ephemeral: true, initialMode: target?.changes ? 'changes' : 'files' }));
+                    : view === 'desktop'
+                        ? 'Desktop'
+                        : target?.changes
+                            ? 'Changes'
+                            : 'Files';
+    const body = view === 'browser' ? (_jsx(AppPreview, { url: target?.url ?? '', name: title, projectId: projectId, shareContext: { projectId, sessionId: projectSessionId }, onClose: closePanelFallbackView })) : view === 'desktop' ? (_jsx(SessionDesktop, { projectId: projectId, projectSessionId: projectSessionId, onClose: closePanelFallbackView })) : view === 'audit' ? (_jsx(SessionAuditPanel, { projectId: projectId, projectSessionId: projectSessionId })) : view === 'reminders' ? (_jsx("div", { className: "p-4", children: _jsx(SessionRemindersPanel, { projectId: projectId, projectSessionId: projectSessionId }) })) : !runtimeSessionId ? (_jsx(Centered, { children: _jsx(Loading, { className: "size-5" }) })) : view === 'terminal' ? (_jsx(SessionTerminalPanel, { sessionId: runtimeSessionId, projectId: projectId, projectSessionId: projectSessionId })) : (_jsx(SessionFilesExplorer, { chatSessionId: runtimeSessionId, projectId: projectId, projectSessionId: projectSessionId, ephemeral: true, initialMode: target?.changes ? 'changes' : 'files' }));
     return (_jsx(Modal, { open: true, onOpenChange: (open) => !open && closePanelFallbackView(), children: _jsxs(ModalContent
-        // The browser has its own close button in its toolbar.
+        // The browser and the desktop have their own close button in their toolbar.
         , { 
-            // The browser has its own close button in its toolbar.
-            showCloseButton: view !== 'browser', 
+            // The browser and the desktop have their own close button in their toolbar.
+            showCloseButton: view !== 'browser' && view !== 'desktop', 
             // A single full-bleed pane: no stacked header/body/footer spacing.
             className: "flex h-[85vh] flex-col gap-0 space-y-0 overflow-hidden p-0 lg:max-h-[85vh] lg:max-w-5xl", "data-slot": "session-panel-fallback", children: [_jsx(VisuallyHidden, { children: _jsx(ModalTitle, { children: title }) }), _jsx("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: _jsx(Suspense, { fallback: _jsx(Centered, { children: _jsx(Loading, { className: "size-5" }) }), children: body }) })] }) }));
 }

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

@@ -0,0 +1,6 @@
+export declare const DESKTOP_URL = "http://localhost:6901/";
+export declare function SessionDesktop({ projectId, projectSessionId, onClose, }: {
+    projectId?: string;
+    projectSessionId?: string;
+    onClose: () => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `SessionDesktop` — the session computer's screen, live.
+ *
+ * Every session image runs a desktop that voxl streams on port 6901
+ * (`packages/shared/src/sandbox/desktop.ts`). This frames voxl's own web
+ * client through the sandbox proxy, the same way `AppPreview` frames a port.
+ *
+ * Control is explicit, and the screen says who has it. Kortix has it by
+ * default: a transparent shield takes every pointer and key, so a user who
+ * scrolls or clicks past the panel never moves the agent's mouse. "Take over"
+ * (or a click on the screen) drops the shield, rings the screen and focuses
+ * it; "Return control" puts the shield back.
+ *
+ * The frame unmounts while this browser tab is hidden. voxl paces every
+ * 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.
+ */
+import { useTranslations } from '../../i18n/index.js';
+import { Button } from '../../primitives/button.js';
+import { ButtonGroup } from '../../primitives/button-group.js';
+import Loading from '../../primitives/loading.js';
+import { useSandboxProxy } from '../../internal/hooks/use-sandbox-proxy.js';
+import { usePreviewFrameUrl } from '../../internal/hooks/use-preview-frame-url.js';
+import { useIsMobile } from '../../internal/hooks/index.js';
+import { framePolicy } from '../../files/viewer/preview-policy.js';
+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 { ArrowSquareOutIcon, MonitorIcon } from '@phosphor-icons/react';
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+export const DESKTOP_URL = 'http://localhost:6901/';
+const subscribeVisibility = (onChange) => {
+    document.addEventListener('visibilitychange', onChange);
+    return () => document.removeEventListener('visibilitychange', onChange);
+};
+const tabVisible = () => document.visibilityState === 'visible';
+export function SessionDesktop({ projectId, projectSessionId, onClose, }) {
+    const t = useTranslations('sessionDesktop');
+    const isMobile = useIsMobile();
+    const { proxyUrl } = useSandboxProxy();
+    const src = usePreviewFrameUrl(DESKTOP_URL, proxyUrl(DESKTOP_URL) ?? DESKTOP_URL, {
+        projectId,
+        sessionId: projectSessionId,
+    }).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');
+    const [attempt, setAttempt] = useState(0);
+    const visible = useSyncExternalStore(subscribeVisibility, tabVisible, () => true);
+    const live = !!src && state === 'on';
+    useEffect(() => {
+        if (!src)
+            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]);
+    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') })] })) })] })] }));
+}

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

@@ -32,6 +32,7 @@ export interface SessionPanelValue {
     openFiles: (changes?: boolean) => void;
     openAudit: () => void;
     openReminders: () => void;
+    openDesktop: () => void;
 }
 /**
  * Exported so a test can inject a stub value and render the cards (or

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

@@ -29,6 +29,7 @@ import { useTranslations } from '../../i18n/index.js';
  */
 import { SessionAuditPanel } from './session-audit-panel.js';
 import { SessionRemindersPanel } from './session-reminders-panel.js';
+import { SessionDesktop } from './session-desktop.js';
 import { SessionFilesBooting, SessionFilesExplorer } from './session-files-explorer.js';
 import { SessionBootStatus } from '../status/session-starting-loader.js';
 import { useSandboxProxy } from '../../internal/hooks/use-sandbox-proxy.js';
@@ -83,6 +84,7 @@ export function SessionBootGate({ boot, children }) {
 }
 export function SessionPanelProvider({ sessionId, isSessionBusy = false, projectId, projectSessionId, booting = false, children, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tDesktop = useTranslations('sessionDesktop');
     const tReminders = useTranslations('reminders');
     const { steps, outputs, context, apps, files, isRunning, outcome } = usePanelDerivations({
         sessionId, projectId, projectSessionId, isSessionBusy,
@@ -409,6 +411,18 @@ export function SessionPanelProvider({ sessionId, isSessionBusy = false, project
             body: _jsx(SessionRemindersPanel, { projectId: projectId, projectSessionId: projectSessionId }),
         });
     }, [openDetail, projectId, projectSessionId, tReminders]);
+    /** The session computer's live screen (`SessionDesktop`), at the wide split
+     *  a presentation gets: the stream is a 16:10 screen, not a text column. */
+    const openDesktop = useCallback(() => {
+        openDetail({
+            key: 'desktop',
+            title: tDesktop('title'),
+            hideHeader: true,
+            padded: false,
+            body: (_jsx(SessionBootGate, { boot: _jsx(SessionBootStatus, { projectId: projectId, sessionId: projectSessionId }), children: _jsx(SessionDesktop, { projectId: projectId, projectSessionId: projectSessionId, onClose: closeDetail }) })),
+        });
+        setPanelSplit(70);
+    }, [openDetail, closeDetail, setPanelSplit, projectId, projectSessionId, tDesktop]);
     /**
      * The opt-in File Explorer (Marko's ask). Never a default view and never a
      * tab — it opens only when asked for, exactly like Terminal and Audit, so
@@ -451,7 +465,7 @@ export function SessionPanelProvider({ sessionId, isSessionBusy = false, project
     }, [apps, handleOpenOutput]);
     const { outputsDefaultOpen, pendingQuickView } = usePanelHandoffs({
         sessionId, projectId, projectSessionId, isRunning, outcome, apps, files, steps,
-        detail, handleOpenOutput, openDetail, openTerminal, openAudit, openReminders, openBrowser, openFiles,
+        detail, handleOpenOutput, openDetail, openTerminal, openAudit, openReminders, openDesktop, openBrowser, openFiles,
     });
     // The panel comes back with the session: what it showed is remembered while
     // it is open, and reopened on the way back while the session still runs.
@@ -584,6 +598,7 @@ export function SessionPanelProvider({ sessionId, isSessionBusy = false, project
         openFiles,
         openAudit,
         openReminders,
+        openDesktop,
     }), [
         sessionId,
         projectId,
@@ -605,6 +620,7 @@ export function SessionPanelProvider({ sessionId, isSessionBusy = false, project
         openFiles,
         openAudit,
         openReminders,
+        openDesktop,
     ]);
     return (_jsx(SessionPanelContext.Provider, { value: value, children: _jsx(OutputPathsContext.Provider, { value: outputPaths, children: children }) }));
 }

package/dist/session/panel/shared/use-panel-handoffs.d.ts

@@ -1,7 +1,7 @@
 import type { SessionPanelValue } from '../session-panel-provider.js';
 import type { usePanelDerivations } from './use-panel-derivations.js';
-type Handoffs = Pick<SessionPanelValue, 'sessionId' | 'projectId' | 'projectSessionId' | 'detail' | 'handleOpenOutput' | 'openDetail' | 'openTerminal' | 'openAudit' | 'openReminders' | 'openBrowser' | 'openFiles'> & Pick<ReturnType<typeof usePanelDerivations>, 'isRunning' | 'outcome' | 'apps' | 'files' | 'steps'>;
-export declare function usePanelHandoffs({ sessionId, projectId, projectSessionId, isRunning, outcome, apps, files, steps, detail, handleOpenOutput, openDetail, openTerminal, openAudit, openReminders, openBrowser, openFiles, }: Handoffs): {
+type Handoffs = Pick<SessionPanelValue, 'sessionId' | 'projectId' | 'projectSessionId' | 'detail' | 'handleOpenOutput' | 'openDetail' | 'openTerminal' | 'openAudit' | 'openReminders' | 'openDesktop' | 'openBrowser' | 'openFiles'> & Pick<ReturnType<typeof usePanelDerivations>, 'isRunning' | 'outcome' | 'apps' | 'files' | 'steps'>;
+export declare function usePanelHandoffs({ sessionId, projectId, projectSessionId, isRunning, outcome, apps, files, steps, detail, handleOpenOutput, openDetail, openTerminal, openAudit, openReminders, openDesktop, openBrowser, openFiles, }: Handoffs): {
     outputsDefaultOpen: boolean;
     pendingQuickView: {
         sessionId: string;

package/dist/session/panel/shared/use-panel-handoffs.js

@@ -6,7 +6,7 @@ import { pathOutput, shouldAutoExpandOutputs, shouldAutoOpenPayoff, stepForCallI
 import { StepDetailBody } from '../easy/step-detail-body.js';
 import { StepIcon } from '../easy/step-icon.js';
 import { selectPrimaryDeliverable } from './output-priority.js';
-export function usePanelHandoffs({ sessionId, projectId, projectSessionId, isRunning, outcome, apps, files, steps, detail, handleOpenOutput, openDetail, openTerminal, openAudit, openReminders, openBrowser, openFiles, }) {
+export function usePanelHandoffs({ sessionId, projectId, projectSessionId, isRunning, outcome, apps, files, steps, detail, handleOpenOutput, openDetail, openTerminal, openAudit, openReminders, openDesktop, openBrowser, openFiles, }) {
     // Auto-expand Outputs the moment a run finishes with something to show —
     // never on every render of an already-finished (or still-running) run, and
     // never on a failed one: a pile of half-written files is not a celebration.
@@ -153,6 +153,9 @@ export function usePanelHandoffs({ sessionId, projectId, projectSessionId, isRun
         else if (view === 'reminders' && projectId && projectSessionId) {
             openReminders();
         }
+        else if (view === 'desktop') {
+            openDesktop();
+        }
         else if (view === 'browser') {
             openBrowser(target);
         }
@@ -167,6 +170,7 @@ export function usePanelHandoffs({ sessionId, projectId, projectSessionId, isRun
         openTerminal,
         openAudit,
         openReminders,
+        openDesktop,
         openBrowser,
         openFiles,
     ]);

package/dist/session/panel/use-session-panel-layout.js

@@ -157,6 +157,14 @@ function usePanelGlide(input) {
         prevAspectRef.current = panelAspect;
         prevSideSizeRef.current = sideSize;
         const skipAnimation = consumeSkipNextExpandAnimation();
+        // Full screen is a layer OVER the chat (`SessionPanelSide`), not a split
+        // at 100%: the split stays exactly where it was, so the chat never
+        // squeezes to zero under the opening viewer. Leaving full screen falls
+        // through below as an `expandChanged` glide to the split it now wants.
+        if (isExpanded) {
+            disablePanelTransition();
+            return;
+        }
         const changed = expandChanged || splitChanged || aspectChanged;
         const shouldAnimate = changed && shouldShowPanel && !skipAnimation;
         if (shouldAnimate) {

package/dist/session/status/session-tab-title.d.ts

@@ -17,7 +17,7 @@ import type { ProjectSession } from '@kortix/sdk';
 /** Longest session name kept before it is elided, INCLUDING the ellipsis. */
 export declare const SESSION_TAB_TITLE_MAX_NAME = 60;
 /**
- * `<session name> — Kortix`. An absent name means the session could not be
+ * `<session name> — Kortix CompanyOS`. An absent name means the session could not be
  * read, so it gets the explicit unavailable label: never an empty title, never
  * a raw id.
  */

package/dist/session/status/session-tab-title.js

@@ -37,7 +37,7 @@ function elide(value) {
     return `${value.slice(0, SESSION_TAB_TITLE_MAX_NAME - 1).trimEnd()}…`;
 }
 /**
- * `<session name> — Kortix`. An absent name means the session could not be
+ * `<session name> — Kortix CompanyOS`. An absent name means the session could not be
  * read, so it gets the explicit unavailable label: never an empty title, never
  * a raw id.
  */

package/dist/session/thread/session-chat.js

@@ -2924,6 +2924,9 @@ export function SessionChat({ sessionId, projectSessionId, sessionState, project
                 focusInOverlay,
                 isComposing: e.isComposing,
             })) {
+                // A press something else consumed breaks the run: three Escapes
+                // that each closed a viewer must never add up to a stop.
+                clearEscHint();
                 return;
             }
             e.preventDefault();
@@ -2961,11 +2964,20 @@ export function SessionChat({ sessionId, projectSessionId, sessionState, project
                 }, 4000);
             }
         };
+        // A click anywhere also breaks the run. Esc, click an image, Esc, click
+        // the next, Esc is three separate intents, not one stop request — and it
+        // covers any layer whose Escape handler forgets to preventDefault.
+        const onPointerDown = () => {
+            if (escDeadlineRef.current)
+                clearEscHint();
+        };
         window.addEventListener('keydown', onKeyDownCapture, true);
         window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('pointerdown', onPointerDown, true);
         return () => {
             window.removeEventListener('keydown', onKeyDownCapture, true);
             window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('pointerdown', onPointerDown, true);
         };
     }, [isActiveSessionTab, readOnly, isBusy, canStop, handleStop, clearEscHint, escCount]);
     // Reset when session goes idle

package/dist/session/thread/session-context-sub-sessions.js

@@ -52,7 +52,7 @@ function WithOneThread({ source, id, rest, pricingLookup, acc, children, }) {
 }
 /**
  * Loads a sub-agent's thread into the store, as the sub-agent's own view does (`useSessionSync`
- * with `savedChild`): its saved window, then the runtime's. The section mounts one per requested
+ * with `savedChild`): the session's log, then the runtime's. The section mounts one per requested
  * id (a row that scrolled into view, or "Load all"), outside the tree, so collapsing a row
  * does not unload its children. Reports whether its last runtime read failed.
  */

package/dist/session/tool/tools/image-gen-tool.d.ts

@@ -1,2 +1,2 @@
 import type { ToolProps } from '../shared/types.js';
-export declare function ImageGenTool({ call }: ToolProps): import("react").JSX.Element;
+export declare function ImageGenTool({ call }: ToolProps): import("react").JSX.Element | null;

package/dist/session/tool/tools/image-gen-tool.js

@@ -162,6 +162,8 @@ const cappedWidth = (rect) => `min(100%, calc(${IMAGE_MAX_HEIGHT} * ${rect}))`;
  * Five or more images (R38): ONE grid of six columns whose rows are the
  * bento patterns (`imageGenGrid().rows`: 5 = 3+2, 8 = 4+4, …). Every tile sits
  * in the same grid, placed by line numbers, so a tile is never re-parented.
+ * A strip (portrait tiles, `imageGenGrid().strip`) uses this grid at any count,
+ * with twelve columns: each row is its tiles side by side, one track tall.
  *
  * The grid is as wide as its tallest row allows under the cap (`width`), and
  * each row is exactly `width / rects[k]` tall (`rects[k]` = its tile ratio ×
@@ -172,19 +174,21 @@ const cappedWidth = (rect) => `min(100%, calc(${IMAGE_MAX_HEIGHT} * ${rect}))`;
  * summed below 1, e.g. 16:9 tiles.) A two-track row subtracts the gap between
  * its tracks, so a large tile spanning both is the row's height.
  */
-function gridPlacement(rows, rects) {
+function gridPlacement(rows, rects, strip) {
     const width = `min(100cqw, ${IMAGE_MAX_HEIGHT} * ${Math.min(...rects)})`;
     const tracks = [];
     const places = [];
     rows.forEach((count, row) => {
         const track = tracks.length + 1;
         const height = `${width} / ${rects[row]}`;
-        if (count === 2)
+        if (strip || count === 2)
             tracks.push(`calc(${height})`);
         else
             tracks.push(`calc((${height} - var(--spacing)) / 2)`, `calc((${height} - var(--spacing)) / 2)`);
         for (let i = 0; i < count; i++) {
-            if (count === 2)
+            if (strip)
+                places.push({ gridColumn: `${1 + (12 / count) * i} / span ${12 / count}`, gridRow: `${track}` });
+            else if (count === 2)
                 places.push({ gridColumn: `${1 + 3 * i} / span 3`, gridRow: `${track}` });
             else if (count === 4)
                 places.push({ gridColumn: `${1 + 3 * (i % 2)} / span 3`, gridRow: `${track + Math.floor(i / 2)}` });
@@ -206,13 +210,17 @@ export function ImageGenTool({ call }) {
     const views = useMemo(() => (run ? run.map(sessionLogOpenCall) : [call]).map((one) => imageGenView(one, inTurn ? live : undefined)), [run, call, inTurn, live]);
     const grid = useMemo(() => imageGenGrid(views), [views]);
     const view = views[0];
-    const solo = views.length === 1 && view.images.length === 1;
+    // One tile: a lone image, or one left beside calls the image cap refused.
+    const solo = grid.tiles.length === 1;
     // One fix per card, even when several frames failed for the same reason.
     const repairable = views.find((one) => one.error?.connectModel)?.error ??
         views.flatMap((one) => one.images).find((image) => image.error?.connectModel)?.error;
     const action = repairable ? _jsx(ConnectAction, { code: repairable.code, provider: repairable.provider }) : null;
     // The card carries no prompt and no model (R29): the frames are the content,
     // their status (busy, loading, an error) the only text.
+    // The image cap refused every call before any request: nothing was asked for, so nothing to show.
+    if (!grid.tiles.length)
+        return null;
     if (views.length === 1 && !view.images.length) {
         // The whole call failed or stopped.
         return (_jsx("div", { className: "w-full max-w-md", children: _jsx(FailureNote, { error: view.error, action: action }) }));
@@ -236,14 +244,15 @@ export function ImageGenTool({ call }) {
         return (_jsxs("figure", { className: "flex w-full flex-col gap-2", children: [frame(grid.tiles[0]), action ? _jsx("div", { className: "flex flex-col items-start", children: action }) : null] }));
     }
     const count = grid.tiles.length;
-    const bento = grid.rows.length === 1 ? BENTO[count] : null;
+    const bento = !grid.strip && grid.rows.length === 1 ? BENTO[count] : null;
+    // A row's rectangle over its tile ratio: a strip row is its tiles side by side.
     const rowRects = grid.rows.map((size, row) => {
         const firstTile = grid.tiles[grid.rows.slice(0, row).reduce((sum, n) => sum + n, 0)];
-        return ratioValue(views[firstTile.call].aspectRatio) * BENTO[size].scale;
+        return ratioValue(views[firstTile.call].aspectRatio) * (grid.strip ? size : BENTO[size].scale);
     });
-    const placed = bento ? null : gridPlacement(grid.rows, rowRects);
+    const placed = bento ? null : gridPlacement(grid.rows, rowRects, grid.strip);
     return (
     // An inline-size container: the merged grid sizes its rows from its width (`cqw`).
-    _jsxs("figure", { className: cn('flex w-full flex-col gap-2', !bento && '@container'), children: [_jsx("div", { ...(bento ? { 'data-image-gen-bento': count } : { 'data-image-gen-grid': grid.rows.join('+') }), className: cn('grid min-h-0 w-full gap-1', bento ? bento.grid : 'grid-cols-6'), style: placed ? placed.style : { aspectRatio: rowRects[0], width: cappedWidth(rowRects[0]) }, children: grid.tiles.map((tile, i) => (_jsx("div", { "data-image-gen-tile": i, className: cn('min-h-0 min-w-0', bento && i === 0 && bento.first), style: placed?.places[i], children: frame(tile) }, tileKey(tile, i)))) }), action ? _jsx("div", { className: "flex flex-col items-start", children: action }) : null] }));
+    _jsxs("figure", { className: cn('flex w-full flex-col gap-2', !bento && '@container'), children: [_jsx("div", { ...(bento ? { 'data-image-gen-bento': count } : { 'data-image-gen-grid': grid.rows.join('+'), ...(grid.strip && { 'data-image-gen-strip': '' }) }), className: cn('grid min-h-0 w-full gap-1', bento ? bento.grid : grid.strip ? 'grid-cols-12' : 'grid-cols-6'), style: placed ? placed.style : { aspectRatio: rowRects[0], width: cappedWidth(rowRects[0]) }, children: grid.tiles.map((tile, i) => (_jsx("div", { "data-image-gen-tile": i, className: cn('min-h-0 min-w-0', bento && i === 0 && bento.first), style: placed?.places[i], children: frame(tile) }, tileKey(tile, i)))) }), action ? _jsx("div", { className: "flex flex-col items-start", children: action }) : null] }));
 }
 ToolRegistry.register('image-gen', ImageGenTool);