@kortix/ui 0.14.9 → 0.14.11

package/dist/internal/stores/composer-prefill-store.d.ts

@@ -7,9 +7,11 @@
  * mount and immediately clears, so the prefill only applies once. Scoped
  * per-project so prefills don't leak across projects.
  *
- * A prefill fills the box. Only `submit: true` also sends it, and only the
- * desktop Quick Entry sets that: a prompt the person typed into the app's own
- * bar (`components/desktop/desktop-quick-entry.tsx`). A URL (`?q=`) never
+ * A prefill fills the box. Only `submit: true` also sends it, and only two
+ * callers set that, each for a prompt the person typed into Kortix's own
+ * composer: the desktop Quick Entry bar (`components/desktop/desktop-quick-entry.tsx`)
+ * and the Kortix in Chrome side panel (`features/chrome/panel/chrome-panel-home.tsx`).
+ * A URL (`?q=`) never
  * sends, because anyone can write a link. The onboarding hand-off that used to
  * auto-send its kickoff prompt now opens the first chat instead
  * (`first-chat-store.ts`).
@@ -18,8 +20,13 @@ import type { AttachedFile } from '../../session/composer/types.js';
 import type { SessionPromptOverrides } from '@kortix/sdk';
 interface ComposerPrefill {
     text: string;
-    /** Send once it lands, exactly as if the person pressed Enter. */
-    submit?: boolean;
+    /**
+     * Send once it lands, exactly as if the person pressed Enter. `'when-ready'`
+     * waits until the composer can send (models and entitlements loaded, Send
+     * enabled): an image for a model that cannot read one then stays in the box,
+     * where the composer says why.
+     */
+    submit?: boolean | 'when-ready';
     /** Files to attach (desktop Quick Entry screenshots and files). */
     files?: AttachedFile[];
     /** The agent, model and effort to select before it lands (desktop Quick Entry). */

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".

package/dist/markdown/setup-links/approval-decision.js

@@ -215,7 +215,9 @@ export function ApprovalDecisionPanel({ details, outcome, busyDecision, error, o
     const reviewable = approvalReviewable(details.args_preview, details.review_complete, details.resolved_preview);
     const label = resolvedLabel({
         status: expired ? 'expired' : details.status,
-        resolution: !details.pending && details.status === 'ok'
+        resolution: 
+        // `approved`: Kortix runs the held call; `ok`: an approve the caller repeats.
+        !details.pending && (details.status === 'ok' || details.status === 'approved')
             ? 'approve'
             : !details.pending && details.status === 'denied'
                 ? 'deny'

package/dist/primitives/empty-state.d.ts

@@ -2,9 +2,9 @@ import { type Icon as IconMynauiType, type Icon as IconType, type Icon as Lucide
 import type { ReactNode } from 'react';
 export interface EmptyStateProps {
     icon?: LucideIcon | IconMynauiType | IconType;
-    /** Custom artwork in place of `icon`. */
+    /** Custom artwork in place of `EmptyArt`. */
     media?: ReactNode;
-    title: string;
+    title: ReactNode;
     description?: ReactNode;
     action?: ReactNode;
     secondaryAction?: ReactNode;

package/dist/primitives/empty-state.js

@@ -3,9 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Kortix <EmptyState> — centered empty view.
  *
- * Minimal. An icon, a one-line headline, an optional body, and up to two
- * actions (primary + secondary). A calm teaching moment rather than a
- * brick wall.
+ * Minimal. The fanned-card artwork (`EmptyArt`, with `icon` on its front card,
+ * or a blank document without one), a one-line headline, an optional body,
+ * and up to two actions (primary + secondary). Every empty view draws the
+ * same picture, title and body; only the glyph and the words change.
  *
  *   <EmptyState
  *     icon={IconInbox}
@@ -14,10 +15,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *     action={<Button>New issue</Button>}
  *   />
  */
+import { EmptyArt } from './empty-art.js';
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from './empty.js';
 import { cn } from '../lib/utils.js';
 export function EmptyState({ icon: IconComponent, media, title, description, action, secondaryAction, size = 'default', className, }) {
-    const iconSize = size === 'sm' ? 'h-8 w-8' : 'h-10 w-10';
     const maxW = size === 'sm' ? 'max-w-[240px]' : 'max-w-[320px]';
-    return (_jsxs(Empty, { className: cn('', className), children: [_jsxs(EmptyHeader, { className: maxW, children: [media ? (_jsx(EmptyMedia, { className: "mb-5", children: media })) : (IconComponent && (_jsx(EmptyMedia, { className: "mb-4", children: _jsx(IconComponent, { className: cn(iconSize, 'text-muted-foreground') }) }))), _jsx(EmptyTitle, { className: "text-foreground text-sm font-semibold tracking-tight", children: title }), description && (_jsx(EmptyDescription, { className: "text-muted-foreground/80 mt-1.5", children: description }))] }), (action || secondaryAction) && (_jsxs(EmptyContent, { className: "flex-row justify-center gap-2", children: [action, secondaryAction] }))] }));
+    return (_jsxs(Empty, { className: cn('', className), children: [_jsxs(EmptyHeader, { className: maxW, children: [_jsx(EmptyMedia, { className: "mb-5", children: media ?? _jsx(EmptyArt, { icon: IconComponent }) }), _jsx(EmptyTitle, { className: "text-foreground text-sm font-semibold tracking-tight", children: title }), description && (_jsx(EmptyDescription, { className: "text-muted-foreground mt-1.5", children: description }))] }), (action || secondaryAction) && (_jsxs(EmptyContent, { className: "flex-row justify-center gap-2", children: [action, secondaryAction] }))] }));
 }

package/dist/primitives/mermaid-renderer.js

@@ -259,7 +259,7 @@ export const MermaidRenderer = React.memo(({ chart, className, enableFullscreen
             fill: var(--background) !important;
           }
         `,
-                } }), _jsxs("div", { className: cn('mermaid-container group bg-background relative my-4 w-full overflow-auto rounded-lg border', className), children: [_jsx("div", { className: "absolute top-2 right-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100", children: _jsxs(ButtonGroup, { children: [actions, enableFullscreen && (_jsx(Hint, { label: "Fullscreen", side: "top", children: _jsx(Button, { variant: "outline", size: "icon-sm", onClick: handleFullscreenOpen, className: "bg-background/90 backdrop-blur-sm", "aria-label": "Open diagram fullscreen", children: _jsx(Maximize2, { className: "size-3.5" }) }) })), _jsx(Hint, { label: copied ? 'Copied' : 'Copy source', side: "top", children: _jsx(Button, { variant: "outline", size: "icon-sm", onClick: handleCopySource, className: "bg-background/90 backdrop-blur-sm", "aria-label": "Copy diagram source", children: copied ? (_jsx(Check, { className: "text-kortix-green size-3.5" })) : (_jsx(Copy, { className: "size-3.5" })) }) })] }) }), _jsx("div", { ref: containerRef, dangerouslySetInnerHTML: { __html: renderedContent } })] }), _jsx(Modal, { open: isFullscreenOpen, onOpenChange: setIsFullscreenOpen, children: _jsxs(ModalContent, { variant: "base", showCloseButton: false, className: "flex h-[90vh] flex-col space-y-0 overflow-hidden lg:h-[90vh] lg:max-w-7xl", closeButtonChildren: _jsxs(ButtonGroup, { children: [_jsx(Hint, { label: "Zoom in", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomIn, "aria-label": "Zoom in", children: _jsx(ZoomIn, { className: "size-4" }) }) }), _jsx(Hint, { label: "Zoom out", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomOut, "aria-label": "Zoom out", children: _jsx(ZoomOut, { className: "size-4" }) }) }), _jsx(Hint, { label: "Rotate", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleRotate, "aria-label": "Rotate diagram", children: _jsx(RotateCcw, { className: "size-4" }) }) }), _jsx(ModalClose, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Close", children: _jsx(X, { className: "size-4" }) }) })] }), children: [_jsx(ModalTitle, { className: "sr-only", children: "Diagram" }), _jsx(ModalBody, { className: "relative min-h-0 flex-1 space-y-0 p-0", children: _jsx("div", { ref: canvasRef, className: "bg-muted/10 absolute inset-0 touch-none overflow-hidden select-none", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { cursor: isDragging ? 'grabbing' : 'grab' }, children: renderedContent ? (_jsx("div", { className: "mermaid-container absolute inset-0 flex items-center justify-center", style: {
+                } }), _jsxs("div", { className: cn('mermaid-container group bg-background relative my-4 w-full overflow-auto rounded-lg border', className), children: [_jsx("div", { className: "absolute top-2 right-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100", children: _jsxs(ButtonGroup, { children: [actions, _jsx(Hint, { label: copied ? 'Copied' : 'Copy source', side: "top", children: _jsx(Button, { variant: "secondary", size: "icon-sm", onClick: handleCopySource, "aria-label": "Copy diagram source", children: copied ? (_jsx(Check, { className: "text-kortix-green size-3.5" })) : (_jsx(Copy, { className: "size-3.5" })) }) }), enableFullscreen && (_jsx(Hint, { label: "Fullscreen", side: "top", children: _jsx(Button, { variant: "secondary", size: "icon-sm", onClick: handleFullscreenOpen, "aria-label": "Open diagram fullscreen", children: _jsx(Maximize2, { className: "size-3.5" }) }) }))] }) }), _jsx("div", { ref: containerRef, dangerouslySetInnerHTML: { __html: renderedContent } })] }), _jsx(Modal, { open: isFullscreenOpen, onOpenChange: setIsFullscreenOpen, children: _jsxs(ModalContent, { variant: "base", showCloseButton: false, className: "flex h-[90vh] flex-col space-y-0 overflow-hidden lg:h-[90vh] lg:max-w-7xl", closeButtonChildren: _jsxs(ButtonGroup, { children: [_jsx(Hint, { label: "Zoom in", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomIn, "aria-label": "Zoom in", children: _jsx(ZoomIn, { className: "size-4" }) }) }), _jsx(Hint, { label: "Zoom out", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomOut, "aria-label": "Zoom out", children: _jsx(ZoomOut, { className: "size-4" }) }) }), _jsx(Hint, { label: "Rotate", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleRotate, "aria-label": "Rotate diagram", children: _jsx(RotateCcw, { className: "size-4" }) }) }), _jsx(ModalClose, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Close", children: _jsx(X, { className: "size-4" }) }) })] }), children: [_jsx(ModalTitle, { className: "sr-only", children: "Diagram" }), _jsx(ModalBody, { className: "relative min-h-0 flex-1 space-y-0 p-0", children: _jsx("div", { ref: canvasRef, className: "bg-muted/10 absolute inset-0 touch-none overflow-hidden select-none", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { cursor: isDragging ? 'grabbing' : 'grab' }, children: renderedContent ? (_jsx("div", { className: "mermaid-container absolute inset-0 flex items-center justify-center", style: {
                                         transform: `translate(${panOffset.x}px, ${panOffset.y}px) scale(${zoom}) rotate(${rotation}deg)`,
                                         transformOrigin: 'center center',
                                         transition: isDragging ? 'none' : 'transform 0.15s ease-out',

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-audit-shared.js

@@ -151,7 +151,7 @@ export function riskTone(risk) {
 }
 /** Terminal outcome of a gated action → badge tone. */
 export function statusTone(status) {
-    if (status === 'ok')
+    if (status === 'ok' || status === 'approved')
         return 'success';
     if (status === 'denied' || status === 'error')
         return 'destructive';
@@ -164,6 +164,8 @@ export function statusLabel(status) {
     switch (status) {
         case 'ok':
             return 'Allowed';
+        case 'approved':
+            return 'Approved';
         case 'denied':
             return 'Denied';
         case 'error':

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/participants/session-participants.d.ts

@@ -27,7 +27,9 @@ export declare function hiddenParticipantCount(participants: SessionParticipants
  * Hover lists them in the sub-agent card's layout. Read-only: nothing in it
  * is clickable. Renders nothing unless two or more people can open it.
  */
-export declare function SessionParticipantStack({ participants, }: {
+export declare function SessionParticipantStack({ participants, label: labelOverride, }: {
     participants: SessionParticipants | undefined;
+    /** The stack's accessible name, for a host that is not a session (an artifact's people with access). */
+    label?: string;
 }): import("react").JSX.Element | null;
 export {};

package/dist/session/participants/session-participants.js

@@ -47,7 +47,7 @@ export function hiddenParticipantCount(participants) {
  * Hover lists them in the sub-agent card's layout. Read-only: nothing in it
  * is clickable. Renders nothing unless two or more people can open it.
  */
-export function SessionParticipantStack({ participants, }) {
+export function SessionParticipantStack({ participants, label: labelOverride, }) {
     const t = useTranslations('sessionParticipants');
     const [open, setOpen] = useState(false);
     if (!participants?.multi_user || participants.total < 2)
@@ -58,7 +58,7 @@ export function SessionParticipantStack({ participants, }) {
         .map((person) => participantLabel(person))
         .filter(Boolean)
         .join(', ');
-    const label = more > 0 ? t('peopleMore', { names, count: more }) : t('people', { names });
+    const label = labelOverride ?? (more > 0 ? t('peopleMore', { names, count: more }) : t('people', { names }));
     return (_jsxs(HoverCard, { open: open, onOpenChange: setOpen, openDelay: 300, closeDelay: 100, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx("span", { role: "img", "aria-label": label, className: "hover:bg-secondary flex h-7 cursor-pointer items-center rounded-md p-0.5", children: _jsxs(AvatarGroup, { className: "-space-x-1.5", children: [shown.map((person) => (_jsx(ParticipantAvatar, { person: person, size: "sm" }, person.user_id))), more > 0 && (
                             // `min-w-6 w-auto`: the tile grows with the count (+97), never under 24px.
                             _jsxs(AvatarGroupCount, { className: "h-6 w-auto min-w-6 px-1.5 text-xs tabular-nums", children: ["+", more] }))] }) }) }), _jsxs(HoverCardContent, { side: "bottom", align: "end", sideOffset: 6, animated: false, className: "w-72 overflow-hidden p-0", onEscapeKeyDown: () => setOpen(false), children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between px-3.5 pt-2.5 pb-1 text-xs", children: [_jsx("span", { children: t('title') }), _jsx("span", { className: "tabular-nums", children: participants.total })] }), _jsx(FadedScrollArea, { fadeColor: "from-popover", fadeSize: "6", className: "max-h-64 overscroll-contain", children: _jsx("ul", { className: "p-1 pt-0", children: participants.participants.map((person) => (_jsx("li", { children: _jsxs("div", { className: "text-foreground flex min-h-9 items-center gap-2.5 px-2 py-1 text-sm", children: [_jsx(ParticipantAvatar, { person: person, size: "md" }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate leading-tight", children: participantLabel(person) }), person.email ? (_jsx("span", { className: "text-muted-foreground truncate text-xs leading-tight", children: person.email })) : null] })] }) }, person.user_id))) }) }), hiddenParticipantCount(participants) > 0 ? (_jsx("p", { className: "text-muted-foreground border-border border-t px-3.5 py-2 text-xs tabular-nums", children: t('more', { count: hiddenParticipantCount(participants) }) })) : null] })] }));

package/dist/session/prompts/approval-request.js

@@ -75,6 +75,8 @@ export function resolvedLabel(request, outcome) {
         return 'Approved';
     if (decision === 'deny')
         return 'Denied';
+    if (request.status === 'approved')
+        return 'Approved';
     if (request.status === 'denied')
         return 'Denied';
     if (request.status === 'error')

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