@kortix/ui 0.14.10 → 0.14.12

package/dist/internal/notifications/notification-bell.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * The bell (KRTX-1742): the person's notification inbox, across projects.
  *
  * It sits in the project sidebar header and in `AccountTopBar`, only while the
- * `notification_center` flag is on (`useNotificationCenter`). The badge is
+ * inbox gate is on (`useNotificationInboxEnabled`). The badge is
  * the server's unread count, clamped at 99+. A row opens its session (or the
  * Triggers page for an alert) and marks itself read. When this browser shows
  * no notifications yet, the panel's footer offers to turn them on.
@@ -33,7 +33,7 @@ import { useNotificationInbox } from '@kortix/sdk/react';
 import { BellIcon, ChatCircleIcon, QuestionIcon, ShareIcon, ShieldWarningIcon, WarningIcon, XCircleIcon, XIcon, } from '@phosphor-icons/react';
 import { useState } from 'react';
 import { badgeCount, tabRows, tabUnreadCount, withoutNotificationParam, } from './notification-rows.js';
-import { useNotificationCenter } from '../hooks/use-notification-center.js';
+import { useNotificationInboxEnabled } from '../hooks/use-notification-center.js';
 import { webPushSupported } from './web-push.js';
 /** Every kind glyph is solid: Phosphor at `weight="fill"`, the done check is `SolidCheckIcon`. */
 const solid = (Icon) => function SolidKindIcon(props) {
@@ -51,6 +51,7 @@ const KIND_MARK = {
     capture_device_down: { icon: solid(WarningIcon), className: 'text-kortix-red' },
     capture_device_recovered: { icon: SolidCheckIcon, className: 'text-kortix-green' },
     message: { icon: solid(ChatCircleIcon), className: 'text-muted-foreground' },
+    artifact_comment: { icon: solid(ChatCircleIcon), className: 'text-muted-foreground' },
 };
 /** Props only: the header, the All / Needs you / Done tabs, the rows, and the footer offer. */
 export function NotificationPanel({ rows, state, unreadCount, prompt, onOpenRow, onMarkAllRead, onRetry, onTurnOn, onDismissPrompt, }) {
@@ -96,7 +97,7 @@ export function NotificationBell({ projectId, onNavigate, surface = 'bg-backgrou
     const t = useTranslations('notifications');
     const viewerId = useUiViewerId();
     const [open, setOpen] = useState(false);
-    const notificationCenter = useNotificationCenter(projectId);
+    const notificationCenter = useNotificationInboxEnabled(projectId);
     const inbox = useNotificationInbox({ userId: viewerId, enabled: notificationCenter });
     const notificationsOn = useWebNotificationStore((s) => s.preferences.enabled);
     const permission = useWebNotificationStore((s) => s.permission);

package/dist/internal/notifications/notification-rows.d.ts

@@ -55,7 +55,7 @@ export declare function notificationTag(row: InboxNotification): string;
  * conversation (a message), its session, the Reminders page (a reminder
  * alert), or the Triggers page.
  */
-export declare function rowDestination(row: InboxNotification): 'room' | 'session' | 'reminders' | 'triggers';
+export declare function rowDestination(row: InboxNotification): 'artifact' | 'room' | 'session' | 'reminders' | 'triggers';
 /** The message `public/sw.js` posts to a tab already on a clicked notification's page. */
 export declare const NOTIFICATION_OPEN_MESSAGE = "kortix:notification-open";
 /** The notification id a service-worker message says this tab opened, or null. */

package/dist/internal/notifications/notification-rows.js

@@ -71,6 +71,8 @@ export function notificationTag(row) {
  * alert), or the Triggers page.
  */
 export function rowDestination(row) {
+    if (row.artifact_id)
+        return 'artifact';
     if (row.room_id)
         return 'room';
     if (row.session_id)

package/dist/internal/stores/kortix-computer-store.d.ts

@@ -12,7 +12,7 @@ export interface ReadyChipState {
     primaryName?: string;
 }
 /** The panel surfaces reachable from outside the panel. */
-export type QuickView = 'terminal' | 'audit' | 'browser' | 'files' | 'reminders';
+export type QuickView = 'terminal' | 'audit' | 'browser' | 'files' | 'reminders' | 'desktop';
 /**
  * Extra aim for a quick-view request — "open the browser" vs "open the browser
  * ON THIS URL".
@@ -100,6 +100,7 @@ interface KortixComputerState {
         target?: QuickViewTarget;
     } | null;
     mobileToolView: QuickView | null;
+    mobileToolTarget: QuickViewTarget | null;
     openFileInComputer: (filePath: string, filePathList?: string[], targetLine?: number) => void;
     openFileBrowser: () => void;
     navigateToToolCall: (toolIndex: number) => void;
@@ -196,7 +197,7 @@ interface KortixComputerState {
         target?: QuickViewTarget;
     } | null;
     /** Mobile only — open `view` in the standalone tool drawer. */
-    openMobileTool: (view: QuickView) => void;
+    openMobileTool: (view: QuickView, target?: QuickViewTarget) => void;
     closeMobileTool: () => void;
     reset: () => void;
 }

package/dist/internal/stores/kortix-computer-store.js

@@ -29,6 +29,7 @@ const initialState = {
     pendingPrimaryOpenSessionId: null,
     pendingQuickView: null,
     mobileToolView: null,
+    mobileToolTarget: null,
     /** A quick-view consumed by the transient BOOT shell (e.g. Terminal clicked
      *  while the sandbox boots). The shell's provider dies at the boot→ready
      *  handoff, taking the view with it — this remembers the intent so
@@ -283,6 +284,7 @@ export const useKortixComputerStore = create()(devtools((set, get) => ({
             pendingToolNavIndex: null,
             // A tool drawer belonging to the session the user just left.
             mobileToolView: null,
+            mobileToolTarget: null,
             // The ⌘I restore memory dies with the session. Within a session the
             // key is a minimise/restore pair; across one it is not, and a detail
             // last seen on a page the user has navigated away from must never be
@@ -421,11 +423,11 @@ export const useKortixComputerStore = create()(devtools((set, get) => ({
         }
         return { view: pending.view, target: pending.target };
     },
-    openMobileTool: (view) => {
-        set({ mobileToolView: view });
+    openMobileTool: (view, target) => {
+        set({ mobileToolView: view, mobileToolTarget: target ? { ...target } : null });
     },
     closeMobileTool: () => {
-        set({ mobileToolView: null });
+        set({ mobileToolView: null, mobileToolTarget: null });
     },
     reset: () => {
         console.log('[KortixComputerStore] Full reset');

package/dist/session/composer/index.d.ts

@@ -15,6 +15,7 @@ export { type DraftScope } from './draft/composer-draft.js';
 export { ComposerEditor, type ComposerEditorHandle } from './editor/composer-editor.js';
 export { baseExtensions } from './editor/extensions.js';
 export { MentionNode } from './editor/mention-node.js';
+export { MentionChip } from '../thread/mention-chip.js';
 export { baseSuggestion, type MenuController } from './editor/suggestion.js';
 export { ReasoningEffortSelector } from './reasoning-effort-selector.js';
 export { SessionChatInput, type SessionChatInputProps } from './session-chat-input.js';

package/dist/session/composer/index.js

@@ -14,6 +14,7 @@ export { ComposerUnderbar } from './composer-underbar.js';
 export { ComposerEditor } from './editor/composer-editor.js';
 export { baseExtensions } from './editor/extensions.js';
 export { MentionNode } from './editor/mention-node.js';
+export { MentionChip } from '../thread/mention-chip.js';
 export { baseSuggestion } from './editor/suggestion.js';
 export { ReasoningEffortSelector } from './reasoning-effort-selector.js';
 export { SessionChatInput } from './session-chat-input.js';

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

@@ -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,16 @@ 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.
+                event.preventDefault();
                 onBack();
                 return;
             }

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

@@ -19,9 +19,12 @@ 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';
+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,22 +32,25 @@ 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);
+    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 &&
-        (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 }) }))] })] }) }));
+    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 })), 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;
     }
@@ -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;