@kortix/ui 0.14.7 → 0.14.9

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

@@ -24,6 +24,8 @@ import { SessionAuditPanel } from './session-audit-panel.js';
 import { SessionRemindersPanel } from './session-reminders-panel.js';
 import { SessionFilesExplorer } from './session-files-explorer.js';
 import { SessionTerminalPanel } from '../../terminal/session-terminal-panel.js';
+import { SessionBootStatus } from '../status/session-starting-loader.js';
+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';
@@ -40,5 +42,9 @@ export function MobileToolDrawer({ sessionId, projectId, projectSessionId, }) {
     const closeMobileTool = useKortixComputerStore((s) => s.closeMobileTool);
     const toolMeta = useLocalizedUiCatalog(TOOL_META);
     const meta = view ? toolMeta[view] : null;
-    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: [view === 'terminal' && (_jsx(SessionTerminalPanel, { sessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId })), view === 'browser' && (_jsx(BrowserPanel, { tabId: sessionPreviewTabId(sessionId), projectId: projectId, projectSessionId: projectSessionId })), 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 }) }))] })] }) }));
+    // 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 }) }))] })] }) }));
 }

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

@@ -8,15 +8,20 @@ import { Modal, ModalBody, ModalContent, ModalDescription, ModalHeader, ModalTit
 import { errorToast, successToast } from '../../primitives/toast.js';
 import { EmptyState } from '../../primitives/empty-state.js';
 import { ErrorState } from '../../primitives/error-state.js';
-import { approvalLauncherName, approvalRequestFromAction, } from '../prompts/session-approval-review.js';
+import { approvalLauncherName, approvalRequestFromAction, auditPolicySet, } from '../prompts/session-approval-review.js';
 import { isPendingAction, relativeTime, riskTone, statusLabel, statusTone, useResolveApproval, useSessionAudit, useSessionAuditTimeline, } from './session-audit-shared.js';
 import { credentialVia } from './audit/audit-credential-label.js';
 import { useTranslations } from '../../i18n/index.js';
 import { useProjectSession } from '@kortix/sdk/react';
 import { CaretRightIcon, ShieldCheckIcon } from '@phosphor-icons/react';
 import { useMemo, useState } from 'react';
+/** The policy set that decided a history row, if one did. */
+function setNameOf(action) {
+    return auditPolicySet(action.result_summary)?.name ?? null;
+}
 export function SessionAuditPanel({ projectId, projectSessionId, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tSets = useTranslations('connectorPolicySets');
     const approvalQuery = useSessionAudit(projectId, projectSessionId);
     const { data } = approvalQuery;
     const timelineQuery = useSessionAuditTimeline(projectId, projectSessionId, {
@@ -74,7 +79,9 @@ export function SessionAuditPanel({ projectId, projectSessionId, }) {
                                                                                 : 'muted', size: "xs", className: "capitalize", children: event.outcome ?? 'recorded' })] }), _jsxs("p", { className: "text-muted-foreground mt-0.5 truncate text-xs", children: [credentialVia(event, (key) => tI18nComplete.raw(key)) ??
                                                                     event.authoritative_source ??
                                                                     event.source ??
-                                                                    'system', ' ', "\u00B7", ' ', relativeTime(event.occurred_at)] })] }), _jsx(CaretRightIcon, { className: "text-muted-foreground size-4 shrink-0" })] }) }, event.event_id))) }), timelineQuery.hasNextPage ? (_jsx("div", { className: "flex justify-center pt-1", children: _jsxs(Button, { size: "sm", variant: "outline", disabled: timelineQuery.isFetchingNextPage, onClick: () => void timelineQuery.fetchNextPage(), children: [timelineQuery.isFetchingNextPage ? _jsx(Loading, { className: "size-3.5" }) : null, tI18nComplete.raw('text96f2482de866')] }) })) : null] })) : null, history.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsx("h3", { className: "text-muted-foreground text-xs font-medium", children: tI18nComplete.raw('text0e7696009337') }), _jsx("ul", { className: "bg-popover overflow-hidden rounded-md border", children: history.map((action) => (_jsx("li", { className: "border-border border-b last:border-b-0", children: _jsxs("button", { type: "button", className: "hover:bg-primary/[0.03] flex min-h-12 w-full items-center gap-3 px-4 py-2 text-left transition-[background-color,transform] active:scale-[0.96]", onClick: () => setSelected(action), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("code", { className: "text-foreground truncate font-mono text-sm", children: action.action }), action.risk ? (_jsx(Badge, { variant: riskTone(action.risk), size: "xs", className: "capitalize", children: action.risk })) : null, _jsx(Badge, { variant: statusTone(action.status), size: "xs", children: statusLabel(action.status) })] }), _jsxs("p", { className: "text-muted-foreground mt-0.5 truncate text-xs", children: [action.acted_by_email ?? 'agent', " \u00B7 ", relativeTime(action.at), action.resolved_by_email
+                                                                    'system', ' ', "\u00B7", ' ', relativeTime(event.occurred_at)] })] }), _jsx(CaretRightIcon, { className: "text-muted-foreground size-4 shrink-0" })] }) }, event.event_id))) }), timelineQuery.hasNextPage ? (_jsx("div", { className: "flex justify-center pt-1", children: _jsxs(Button, { size: "sm", variant: "outline", disabled: timelineQuery.isFetchingNextPage, onClick: () => void timelineQuery.fetchNextPage(), children: [timelineQuery.isFetchingNextPage ? _jsx(Loading, { className: "size-3.5" }) : null, tI18nComplete.raw('text96f2482de866')] }) })) : null] })) : null, history.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsx("h3", { className: "text-muted-foreground text-xs font-medium", children: tI18nComplete.raw('text0e7696009337') }), _jsx("ul", { className: "bg-popover overflow-hidden rounded-md border", children: history.map((action) => (_jsx("li", { className: "border-border border-b last:border-b-0", children: _jsxs("button", { type: "button", className: "hover:bg-primary/[0.03] flex min-h-12 w-full items-center gap-3 px-4 py-2 text-left transition-[background-color,transform] active:scale-[0.96]", onClick: () => setSelected(action), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("code", { className: "text-foreground truncate font-mono text-sm", children: action.action }), action.risk ? (_jsx(Badge, { variant: riskTone(action.risk), size: "xs", className: "capitalize", children: action.risk })) : null, _jsx(Badge, { variant: statusTone(action.status), size: "xs", children: statusLabel(action.status) })] }), _jsxs("p", { className: "text-muted-foreground mt-0.5 truncate text-xs", children: [action.acted_by_email ?? 'agent', " \u00B7 ", relativeTime(action.at), setNameOf(action)
+                                                                    ? ` · ${tSets('auditSet', { set: setNameOf(action) })}`
+                                                                    : '', action.resolved_by_email
                                                                     ? tI18nComplete('text0e16f24ee012', {
                                                                         value0: action.status === 'denied' ? 'denied' : 'approved',
                                                                         value1: action.resolved_by_email,

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

@@ -22,6 +22,7 @@ import { useTranslations } from '../../i18n/index.js';
  */
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '../../primitives/drawer.js';
 import { SessionTerminalPanel } from '../../terminal/session-terminal-panel.js';
+import { SessionBootStatus } from '../status/session-starting-loader.js';
 import { useIsMobile } from '../../internal/hooks/index.js';
 import { TerminalIcon } from '@phosphor-icons/react';
 import { CloseButton, DetailLayer } from './easy/detail-view.js';
@@ -34,17 +35,22 @@ export function SessionDetailPanel() {
     if (!panel)
         return null;
     const { detail, closeDetail, terminalOpen, terminalSwap, closeTerminal, sessionId } = panel;
-    const { projectId, projectSessionId } = panel;
+    const { projectId, projectSessionId, booting } = panel;
+    // While the computer boots, a card wears its real chrome over the wake status,
+    // and the panel with no card open shows that status alone, never blank.
     const terminalLayer = {
         open: terminalOpen,
         swap: terminalSwap,
         title: tI18nComplete.raw('texte0926fdac700'),
         icon: _jsx(TerminalIcon, { className: "text-muted-foreground size-4 shrink-0" }),
         onClose: closeTerminal,
-        body: (_jsx(SessionTerminalPanel, { sessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId, hidden: !terminalOpen })),
+        body: booting ? (_jsx(SessionBootStatus, { projectId: projectId, sessionId: projectSessionId })) : (_jsx(SessionTerminalPanel, { sessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId, hidden: !terminalOpen })),
     };
+    if (isMobile && booting) {
+        return _jsx(SessionBootStatus, { projectId: projectId, sessionId: projectSessionId });
+    }
     if (isMobile) {
         return (_jsxs("div", { className: "relative h-full w-full", children: [_jsx(DetailLayer, { detail: detail, onBack: closeDetail, isMobile: true, children: _jsx("div", { className: "h-full overflow-auto p-3", children: _jsx(EasyPanel, {}) }) }), _jsx(Drawer, { open: terminalOpen, onOpenChange: (next) => !next && closeTerminal(), children: _jsxs(DrawerContent, { className: "flex h-[95dvh] max-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: [_jsx(TerminalIcon, { className: "text-muted-foreground size-4 shrink-0" }), tI18nComplete.raw('texte0926fdac700')] }), _jsx(CloseButton, { onClose: closeTerminal, variant: "ghost" })] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(SessionTerminalPanel, { sessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId }) })] }) })] }));
     }
-    return (_jsx("div", { className: "relative h-full w-full", children: _jsx(DetailLayer, { detail: detail, onBack: closeDetail, isMobile: false, persistentLayer: terminalLayer }) }));
+    return (_jsx("div", { className: "relative h-full w-full", children: _jsx(DetailLayer, { detail: detail, onBack: closeDetail, isMobile: false, persistentLayer: terminalLayer, children: booting && !detail && !terminalOpen ? (_jsx(SessionBootStatus, { projectId: projectId, sessionId: projectSessionId })) : null }) }));
 }

package/dist/session/panel/session-files-explorer.d.ts

@@ -36,3 +36,12 @@ export declare function SessionFilesExplorer({ chatSessionId, projectId, project
      */
     ephemeral?: boolean;
 }): import("react").JSX.Element;
+/**
+ * The explorer's chrome while the session's computer boots: the same tab row,
+ * New and View buttons, all disabled, over `children` (the boot status). Mounts
+ * nothing that reads the sandbox.
+ */
+export declare function SessionFilesBooting({ mode, children, }: {
+    mode: SessionPanelMode;
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/session/panel/session-files-explorer.js

@@ -7,7 +7,7 @@ import Loading from '../../primitives/loading.js';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../primitives/tabs.js';
 import { FilesStoreProvider, useFilesStore } from '../../files/runtime/index.js';
 import { SandboxFileExplorer } from '../../files/runtime/sandbox-file-explorer.js';
-import { DRIVE_ACTION_ROW_CLASS } from '../../files/project/components/drive-toolbar.js';
+import { DRIVE_ACTION_ROW_CLASS, DriveActionRow, DriveNewMenu, DriveViewMenu, } from '../../files/project/components/drive-toolbar.js';
 import { useOpenChangeRequest, useSessionBaseRef, useSessionChanges, } from './session-changes-shared.js';
 import { SessionDiffViewer } from './session-diff-viewer.js';
 import { deriveExplorerMode, explorerViewForMode, initialExplorerNonce, } from './session-files-explorer-logic.js';
@@ -94,15 +94,24 @@ function SessionFilesExplorerInner({ chatSessionId, projectId, projectSessionId,
                 ? { projectId: routeProjectId, ref: gitSessionId }
                 : undefined })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: DRIVE_ACTION_ROW_CLASS, children: [_jsx(PanelTabs, { changedCount: changedCount }), changedCount > 0 && (_jsxs(Button, { size: "xs", className: "ml-auto shrink-0 gap-1.5 active:scale-[0.96]", onClick: openChangeRequest, disabled: asking, children: [asking ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tI18nComplete.raw('text73eeb5083986')] }))] }), _jsxs(TabsContent, { value: "changes", className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5 px-2 pt-2", children: [versionId && (_jsxs(_Fragment, { children: [_jsx(Badge, { variant: "outline", size: "sm", className: "font-mono", children: versionId }), _jsx(ArrowRightIcon, { "aria-hidden": true, className: "text-muted-foreground/40 size-3 shrink-0" }), _jsx("span", { className: "sr-only", children: tI18nComplete.raw('text6b847a0ed0b2') })] })), _jsx(Badge, { variant: "outline", size: "sm", className: "max-w-32 min-w-0 font-mono", children: _jsx("span", { className: "truncate", children: baseRef }) }), _jsx("span", { className: "text-muted-foreground text-xs", children: tI18nComplete.raw('text4c31974fceb2') })] }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(SessionDiffViewer, {}) })] })] })) }));
 }
+/**
+ * The explorer's chrome while the session's computer boots: the same tab row,
+ * New and View buttons, all disabled, over `children` (the boot status). Mounts
+ * nothing that reads the sandbox.
+ */
+export function SessionFilesBooting({ mode, children, }) {
+    return (_jsxs(Tabs, { value: mode, className: "bg-background flex h-full min-h-0 flex-col gap-0", children: [_jsx(DriveActionRow, { leading: _jsx(PanelTabs, { changedCount: 0, disabled: true }), actions: mode === 'files' ? (_jsxs(_Fragment, { children: [_jsx(DriveNewMenu, { compact: true, disabled: true }), _jsx(DriveViewMenu, { variant: "secondary", disabled: true, onRefresh: noop, onDownloadDir: noop })] })) : null }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: children })] }));
+}
+const noop = () => { };
 /** The tab strip, shared by both branches so it renders identically on each. */
-function PanelTabs({ changedCount }) {
+function PanelTabs({ changedCount, disabled }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     return (
     // The row draws the rule, so the list keeps only the sliding underline,
     // and fills the row's height so that underline lands on the row's border.
     // Triggers carry no padding, so the first tab's text starts on the row's
     // own left edge.
-    _jsxs(TabsList, { type: "underline", className: "h-full gap-5 border-b-0", children: [_jsx(TabsTrigger, { value: "files", className: "w-fit flex-none px-0", children: tI18nComplete.raw('text866956901fd1') }), _jsxs(TabsTrigger, { value: "changes", className: "w-fit flex-none gap-1.5 px-0", children: [tI18nComplete.raw('textbbd4b6a86bc6'), changedCount > 0 && (_jsx(CountBadge, { count: changedCount }))] })] }));
+    _jsxs(TabsList, { type: "underline", className: "h-full gap-5 border-b-0", children: [_jsx(TabsTrigger, { value: "files", disabled: disabled, className: "w-fit flex-none px-0", children: tI18nComplete.raw('text866956901fd1') }), _jsxs(TabsTrigger, { value: "changes", disabled: disabled, className: "w-fit flex-none gap-1.5 px-0", children: [tI18nComplete.raw('textbbd4b6a86bc6'), changedCount > 0 && (_jsx(CountBadge, { count: changedCount }))] })] }));
 }
 /**
  * The All files panel — the explorer's listing region, wearing the tab-panel

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

@@ -8,6 +8,9 @@ export interface SessionPanelValue {
     sessionId: string;
     projectId?: string;
     projectSessionId?: string;
+    /** The session's computer is still starting (the boot shell). Tool cards
+     *  draw their chrome around a status body until it is up. */
+    booting?: boolean;
     /** Card data — everything the floating overlay renders. */
     files: OutputItem[];
     context: ReturnType<typeof deriveContext>;
@@ -46,7 +49,16 @@ export declare const SessionPanelContext: import("react").Context<SessionPanelVa
  * than every call site having to know which tree it is in.
  */
 export declare function useOptionalSessionPanel(): SessionPanelValue | null;
-export declare function SessionPanelProvider({ sessionId, isSessionBusy, projectId, projectSessionId, children, }: {
+/**
+ * A tool card's body: `boot` while the session's computer starts, `children`
+ * once it is up. Read at render time, not when the card opens, so a card
+ * opened during boot turns live in place.
+ */
+export declare function SessionBootGate({ boot, children }: {
+    boot: ReactNode;
+    children: ReactNode;
+}): ReactNode;
+export declare function SessionPanelProvider({ sessionId, isSessionBusy, projectId, projectSessionId, booting, children, }: {
     /** The runtime session id: the root thread of the session log. */
     sessionId: string;
     /** The session's own busy/retry status — see `deriveIsRunning`. */
@@ -56,5 +68,7 @@ export declare function SessionPanelProvider({ sessionId, isSessionBusy, project
      *  case the palette's "Open Audit" consume below becomes a no-op. */
     projectId?: string;
     projectSessionId?: string;
+    /** See `SessionPanelValue.booting`. */
+    booting?: boolean;
     children: ReactNode;
 }): import("react").JSX.Element;

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ArtifactPanelPreview } from '../../artifacts/artifact-session.js';
 import { useTranslations } from '../../i18n/index.js';
 /**
  * `SessionPanelProvider` — the single owner of everything a session's panel
@@ -28,7 +29,8 @@ import { useTranslations } from '../../i18n/index.js';
  */
 import { SessionAuditPanel } from './session-audit-panel.js';
 import { SessionRemindersPanel } from './session-reminders-panel.js';
-import { SessionFilesExplorer } from './session-files-explorer.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';
 import { OutputPathsContext } from '../../markdown/code/output-paths-context.js';
 import { useIsMobile } from '../../hooks/use-mobile.js';
@@ -45,7 +47,7 @@ import { qk } from '@kortix/sdk/react';
 import { FileTextIcon as FileText } from '@phosphor-icons/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
-import { AppPreview } from './easy/app-preview.js';
+import { AppPreview, AppPreviewBooting } from './easy/app-preview.js';
 import { isWideDeliverable, neighborOutputs, outputKey, quickBrowserOutput, } from './easy/easy-panel-logic.js';
 import { FilePreview, reportsIntrinsicSize } from './easy/file-preview.js';
 import { usePanelDerivations } from './shared/use-panel-derivations.js';
@@ -71,7 +73,15 @@ export const SessionPanelContext = createContext(null);
 export function useOptionalSessionPanel() {
     return useContext(SessionPanelContext);
 }
-export function SessionPanelProvider({ sessionId, isSessionBusy = false, projectId, projectSessionId, children, }) {
+/**
+ * A tool card's body: `boot` while the session's computer starts, `children`
+ * once it is up. Read at render time, not when the card opens, so a card
+ * opened during boot turns live in place.
+ */
+export function SessionBootGate({ boot, children }) {
+    return useOptionalSessionPanel()?.booting ? boot : children;
+}
+export function SessionPanelProvider({ sessionId, isSessionBusy = false, projectId, projectSessionId, booting = false, children, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const tReminders = useTranslations('reminders');
     const { steps, outputs, context, apps, files, isRunning, outcome } = usePanelDerivations({
@@ -335,9 +345,22 @@ export function SessionPanelProvider({ sessionId, isSessionBusy = false, project
                 hideHeader: true,
                 padded: false,
                 nav,
-                body: (_jsx(AppPreview, { url: output.url ?? '', name: displayName, projectId: projectId, shareContext: projectId && projectSessionId
-                        ? { projectId, sessionId: projectSessionId }
-                        : undefined, onClose: closeDetail, onSendToAgent: () => sendAppToAgent(output) })),
+                body: (_jsx(SessionBootGate, { boot: _jsx(AppPreviewBooting, { onClose: closeDetail, children: _jsx(SessionBootStatus, { projectId: projectId, sessionId: projectSessionId }) }), children: _jsx(AppPreview, { url: output.url ?? '', name: displayName, projectId: projectId, shareContext: projectId && projectSessionId
+                            ? { projectId, sessionId: projectSessionId }
+                            : undefined, onClose: closeDetail, onSendToAgent: () => sendAppToAgent(output) }) })),
+            });
+            setPanelSplit(split);
+            return;
+        }
+        if (output.kind === 'artifact') {
+            track('deliverable_opened', { kind: output.kind, source });
+            openDetail({
+                key: `artifact:${output.url}`,
+                title: displayName,
+                hideHeader: true,
+                padded: false,
+                nav,
+                body: _jsx(ArtifactPanelPreview, { url: output.url, onClose: closeDetail }),
             });
             setPanelSplit(split);
             return;
@@ -404,7 +427,7 @@ export function SessionPanelProvider({ sessionId, isSessionBusy = false, project
             key: changes ? 'files:changes' : 'files',
             title: changes ? 'Changes' : 'Files',
             padded: false,
-            body: (_jsx(SessionFilesExplorer, { chatSessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId, ephemeral: true, initialMode: changes ? 'changes' : 'files' })),
+            body: (_jsx(SessionBootGate, { boot: _jsx(SessionFilesBooting, { mode: changes ? 'changes' : 'files', children: _jsx(SessionBootStatus, { projectId: projectId, sessionId: projectSessionId }) }), children: _jsx(SessionFilesExplorer, { chatSessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId, ephemeral: true, initialMode: changes ? 'changes' : 'files' }) })),
         });
     }, [openDetail, sessionId, projectId, projectSessionId]);
     /**
@@ -544,6 +567,7 @@ export function SessionPanelProvider({ sessionId, isSessionBusy = false, project
         sessionId,
         projectId,
         projectSessionId,
+        booting,
         files,
         context,
         apps,
@@ -564,6 +588,7 @@ export function SessionPanelProvider({ sessionId, isSessionBusy = false, project
         sessionId,
         projectId,
         projectSessionId,
+        booting,
         files,
         context,
         apps,

package/dist/session/panel/shared/derive-panels.d.ts

@@ -51,7 +51,14 @@ type AppOutputItem = OutputItemBase & {
     url: string;
     presentationName?: never;
 };
-export type OutputItem = ArtifactOutputItem | AppOutputItem;
+/** A Kortix artifact the agent handed over (its app link): opens as the artifact, not as a website. */
+type ArtifactLinkOutputItem = OutputItemBase & {
+    kind: 'artifact';
+    path?: never;
+    url: string;
+    presentationName?: never;
+};
+export type OutputItem = ArtifactOutputItem | AppOutputItem | ArtifactLinkOutputItem;
 export interface ContextItem {
     callID: string;
     label: string;

package/dist/session/panel/shared/derive-panels.js

@@ -12,6 +12,7 @@
  * tables, or the two cards could disagree with what Progress just narrated
  * for the same call.
  */
+import { parseArtifactUrl } from '../../../artifacts/frame-policy.js';
 import { toWorkspaceRelative } from '../../../internal/files/runtime-files.js';
 import { parseImageOutput } from '../../media/image-output-path.js';
 import { parsePresentationOutput } from '@kortix/sdk';
@@ -20,7 +21,7 @@ import { looksLikeHtml, parseWebSearchOutput, wsDomain, } from '@kortix/sdk';
 import { getToolPrimaryArg, normalizeName } from '../../tool/tool-meta.js';
 import { extractReadableHtml } from '../../../_vendor/kortix-shared.js';
 import { contextLabelForTool, createArtifactKind, familyForTool, narrationToolName as humanizeToolName, } from '@kortix/sdk';
-import { toolCallMetadata, toolKind } from '@kortix/sdk';
+import { imageGenView, toolCallMetadata, toolKind } from '@kortix/sdk';
 function filePathOf(call) {
     const input = inputOf(call);
     const p = input.filePath ?? input.file_path ?? input.path;
@@ -119,7 +120,7 @@ function createArtifactName(call) {
             if (name)
                 return { name, path: imagePath };
         }
-        const prompt = typeof input.prompt === 'string' ? input.prompt : '';
+        const prompt = imageGenView(call).prompts[0] ?? '';
         return { name: prompt ? truncate(prompt) : 'Image' };
     }
     if (t === 'presentation_gen') {
@@ -214,6 +215,13 @@ export function deriveOutputs(calls, opts) {
             const kind = createArtifactKind(call);
             if (!kind)
                 continue;
+            // One image_gen call makes up to four images: one row per file.
+            const images = kind === 'image' ? imageGenView(call).images.flatMap((image) => (image.imagePath ? [image.imagePath] : [])) : [];
+            if (images.length) {
+                for (const path of images)
+                    push({ callID: call.call_id, name: basename(path), path, kind });
+                continue;
+            }
             const { name, path } = createArtifactName(call);
             const presentationName = kind === 'presentation'
                 ? parsePresentationOutput(rawOutputOf(call))?.presentation_name
@@ -230,6 +238,8 @@ const DECK_EXT = /\.(pptx?|key)$/i;
 function showPayloadToOutput(payload, callID) {
     const url = typeof payload.url === 'string' ? payload.url.trim() : '';
     if (url && /^https?:\/\//i.test(url)) {
+        if (parseArtifactUrl(url))
+            return { ...appOutput(url, payload.title, payload.description, callID), kind: 'artifact', shown: true };
         return { ...appOutput(url, payload.title, payload.description, callID), shown: true };
     }
     const path = typeof payload.path === 'string' ? payload.path.trim() : '';

package/dist/session/panel/shared/output-priority.js

@@ -69,6 +69,8 @@ export function isScaffoldingOutput(output) {
 export function deliverableKindLabel(output) {
     if (output.kind === 'app')
         return 'Web app';
+    if (output.kind === 'artifact')
+        return 'Artifact';
     if (output.kind === 'presentation')
         return 'Slides';
     if (output.kind === 'video')

package/dist/session/participants/session-participants.d.ts

@@ -4,7 +4,11 @@ import { type ReactNode } from 'react';
 type AvatarPerson = Pick<SessionParticipant, 'name' | 'email'> & {
     avatar_url?: string | null;
 };
-/** The display name, else the email local part. The viewer too: every row names a person. */
+/**
+ * The display name, else the email local part. The viewer too: every row names
+ * a person. The API sends the email as the name when the profile has none, so
+ * a name that is an email address reads as no name.
+ */
 export declare function participantLabel(person: AvatarPerson): string;
 /**
  * A message in a shared session: its member author's avatar above the

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

@@ -9,9 +9,16 @@ import { UserAvatar } from '../../primitives/user-avatar.js';
 import { useTranslations } from '../../i18n/index.js';
 /** Faces shown in the header before the rest collapse into a count. */
 const STACK_LIMIT = 3;
-/** The display name, else the email local part. The viewer too: every row names a person. */
+/**
+ * The display name, else the email local part. The viewer too: every row names
+ * a person. The API sends the email as the name when the profile has none, so
+ * a name that is an email address reads as no name.
+ */
 export function participantLabel(person) {
-    return person.name?.trim() || person.email?.split('@')[0] || '';
+    const name = person.name?.trim();
+    if (name && !name.includes('@'))
+        return name;
+    return (person.email ?? name)?.split('@')[0] || '';
 }
 function ParticipantAvatar({ person, size }) {
     return (_jsx(UserAvatar, { size: size, name: person.name, email: person.email ?? '', avatarUrl: person.avatar_url ?? null }));

package/dist/session/prompts/approval-request.d.ts

@@ -28,6 +28,11 @@ export interface ApprovalRequestData {
     resolvedPreview?: Record<string, unknown> | null;
     /** Set when the server could not load that content (`unavailable`). */
     resolvedError?: string | null;
+    /** The agent's policy set that decided the call (`auditPolicySet`). */
+    policySet?: {
+        name: string;
+        agent: string | null;
+    } | null;
     resolution?: ApprovalDecisionValue | null;
     pending: boolean;
     status?: string | null;

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

@@ -496,6 +496,7 @@ export function ApprovalDecisionActions({ onDecision, busyDecision = null, appro
 }
 export function ApprovalRequest({ request, onDecision, busyDecision = null, outcome = null, error = null, hideDecision = false, resolverName = null, className, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tSets = useTranslations('connectorPolicySets');
     const reviewComplete = request.reviewComplete !== false;
     const reviewable = approvalReviewable(request.argsPreview, request.reviewComplete, request.resolvedPreview);
     const waiting = request.pending && outcome === null && request.canResolve === false;
@@ -510,5 +511,10 @@ export function ApprovalRequest({ request, onDecision, busyDecision = null, outc
                                 : resolutionTone === 'destructive'
                                     ? 'bg-kortix-red/15 text-kortix-red'
                                     : 'bg-muted text-muted-foreground'
-                            : 'bg-kortix-orange/15 text-kortix-orange'), children: resolved ? (positiveResolution ? (_jsx(CheckCircleIcon, { weight: "fill", className: "size-5" })) : (_jsx(XCircleIcon, { weight: "fill", className: "size-5" }))) : (_jsx(ShieldWarningIcon, { className: "size-5" })) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: tI18nComplete.raw('text00d60e31a4e6') }), _jsx("code", { className: "text-foreground font-mono text-sm font-medium break-all", children: request.action }), request.risk ? (_jsx(Badge, { variant: riskTone(request.risk), size: "xs", className: "capitalize", children: request.risk })) : null] }), _jsxs("p", { className: "text-muted-foreground text-xs text-pretty", children: [request.projectName ? `${request.projectName} · ` : '', tI18nComplete.raw('text2d9e28289fac'), ' ', requestedAtFormat.format(new Date(request.requestedAt))] })] }), resolved ? (_jsx(Badge, { variant: resolutionTone, size: "sm", children: resolutionLabel })) : null] }), _jsx(ApprovalAgentContext, { context: request.approvalContext }), _jsx(ApprovalParameters, { action: request.action, argsPreview: request.argsPreview, reviewComplete: reviewComplete, resolvedPreview: request.resolvedPreview, resolvedError: request.resolvedError }), error ? (_jsx("p", { className: "text-destructive border-border border-t px-4 py-3 text-xs", children: error })) : null, actionable && !reviewable ? (_jsx(ApprovalUnreviewableNotice, { previewAuthorized: request.previewAuthorized !== false })) : null, actionable && !hideDecision ? (_jsx(ApprovalDecisionActions, { onDecision: actionable, busyDecision: busyDecision, approvable: reviewable })) : null, waiting ? (_jsx(ApprovalWaitingNotice, { resolverName: resolverName, resolvers: request.resolvers })) : null] }));
+                            : 'bg-kortix-orange/15 text-kortix-orange'), children: resolved ? (positiveResolution ? (_jsx(CheckCircleIcon, { weight: "fill", className: "size-5" })) : (_jsx(XCircleIcon, { weight: "fill", className: "size-5" }))) : (_jsx(ShieldWarningIcon, { className: "size-5" })) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: tI18nComplete.raw('text00d60e31a4e6') }), _jsx("code", { className: "text-foreground font-mono text-sm font-medium break-all", children: request.action }), request.risk ? (_jsx(Badge, { variant: riskTone(request.risk), size: "xs", className: "capitalize", children: request.risk })) : null] }), _jsxs("p", { className: "text-muted-foreground text-xs text-pretty", children: [request.projectName ? `${request.projectName} · ` : '', tI18nComplete.raw('text2d9e28289fac'), ' ', requestedAtFormat.format(new Date(request.requestedAt))] }), request.policySet ? (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: request.policySet.agent
+                                    ? tSets('approvalSetAgent', {
+                                        agent: request.policySet.agent,
+                                        set: request.policySet.name,
+                                    })
+                                    : tSets('approvalSet', { set: request.policySet.name }) })) : null] }), resolved ? (_jsx(Badge, { variant: resolutionTone, size: "sm", children: resolutionLabel })) : null] }), _jsx(ApprovalAgentContext, { context: request.approvalContext }), _jsx(ApprovalParameters, { action: request.action, argsPreview: request.argsPreview, reviewComplete: reviewComplete, resolvedPreview: request.resolvedPreview, resolvedError: request.resolvedError }), error ? (_jsx("p", { className: "text-destructive border-border border-t px-4 py-3 text-xs", children: error })) : null, actionable && !reviewable ? (_jsx(ApprovalUnreviewableNotice, { previewAuthorized: request.previewAuthorized !== false })) : null, actionable && !hideDecision ? (_jsx(ApprovalDecisionActions, { onDecision: actionable, busyDecision: busyDecision, approvable: reviewable })) : null, waiting ? (_jsx(ApprovalWaitingNotice, { resolverName: resolverName, resolvers: request.resolvers })) : null] }));
 }

package/dist/session/prompts/session-approval-review.d.ts

@@ -50,6 +50,15 @@ export declare function reviewArgsSummary(resolvedPreview: Record<string, unknow
  * POST /approvals/:executionId.
  */
 export declare function approvalReviewable(argsPreview: Record<string, unknown> | null | undefined, reviewComplete: boolean | undefined, resolvedPreview?: Record<string, unknown> | null): boolean;
+/**
+ * The agent's policy set that decided a call, from the audit row
+ * (`result_summary.policy_set` / `.agent`, written by the gateway when the
+ * set decided). Null when the base or project rules decided.
+ */
+export declare function auditPolicySet(summary: Record<string, unknown> | null | undefined): {
+    name: string;
+    agent: string | null;
+} | null;
 /** Row → the shape every approval surface renders. */
 export declare function approvalRequestFromAction(action: SessionAuditAction, pending?: boolean): ApprovalRequestData;
 /**

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

@@ -96,10 +96,26 @@ export function approvalReviewable(argsPreview, reviewComplete, resolvedPreview)
     // withheld — an argument-less call hides nothing.
     return reviewComplete !== false;
 }
+/**
+ * The agent's policy set that decided a call, from the audit row
+ * (`result_summary.policy_set` / `.agent`, written by the gateway when the
+ * set decided). Null when the base or project rules decided.
+ */
+export function auditPolicySet(summary) {
+    // The set is named only when it decided, never for a project or base rule.
+    if (summary?.policy_source !== 'policy_set')
+        return null;
+    const name = summary?.policy_set;
+    if (typeof name !== 'string' || !name)
+        return null;
+    const agent = summary?.agent;
+    return { name, agent: typeof agent === 'string' && agent ? agent : null };
+}
 /** Row → the shape every approval surface renders. */
 export function approvalRequestFromAction(action, pending = pendingByStatus(action)) {
     const summary = action.result_summary;
     const decision = summary?.decision;
+    const policySet = auditPolicySet(summary);
     return {
         action: action.action,
         risk: action.risk,
@@ -112,6 +128,8 @@ export function approvalRequestFromAction(action, pending = pendingByStatus(acti
             ? summary.resolved_preview
             : null,
         resolvedError: typeof summary?.resolved_error === 'string' ? summary.resolved_error : null,
+        // Present only when the agent's set decided, so a base-rule row is unchanged.
+        ...(policySet ? { policySet } : {}),
         // `!summary` used to count as complete, so a pending row that recorded
         // NOTHING offered an Approve button the server answers with 409
         // (`APPROVAL_PREVIEW_UNAVAILABLE`) — the client and the gate disagreed. A

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

@@ -3,11 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { HubLink } from '../../internal/account-hub/account-hub-location.js';
 import { useLocale, useTranslations } from '../../i18n/index.js';
 import { formatUsdAsCredits, parseBalanceUsd } from '../../_vendor/kortix-shared.js';
-import { useSessionIds } from '../../providers/session-ids.js';
-import { useUiComponents, useUiViewerId } from '../../providers/ui-provider.js';
-import { useState } from 'react';
-import { chatGptActionApplies, chatGptConnectionAction, } from '../models/chatgpt-connection-action.js';
-import { sessionPersonalUser } from '../overrides/provider-pool-draft.js';
+import { chatGptConnectionAction } from '../models/chatgpt-connection-action.js';
+import { ChatGptConnectionSlot } from '../models/chatgpt-connection-button.js';
 import { AskOwnerForCreditsButton } from '../models/ask-owner-for-credits-button.js';
 import { Button } from '../../primitives/button.js';
 import { ChainOfThoughtStep } from '../../primitives/chain-of-thought.js';
@@ -19,7 +16,6 @@ import { accountSettingsTarget } from '../../internal/stores/account-settings-mo
 import { useCurrentAccountStore } from '../../internal/stores/current-account-store.js';
 import { useAccountState } from '../../internal/billing/use-account-state.js';
 import { canManageBilling, isAbortError, turnRetryLabel, } from '@kortix/sdk';
-import { useFeatureFlag, useModelAccess, useProjectSession, useSessionProviderSecretPools, } from '@kortix/sdk/react';
 import { CaretRightIcon, CreditCardIcon, LightningIcon, WarningCircleIcon, } from '@phosphor-icons/react';
 const TONE_TILE = {
     error: 'bg-kortix-red/15 text-kortix-red',
@@ -271,49 +267,6 @@ export function TurnErrorDisplay({ errorText, errorDetails, errorRaw, defaultDet
     // Real errors → a checkpoint row in the activity lane, not a boxed alert.
     return (_jsx(TurnErrorCheckpoint, { text: text, gateway: gateway, raw: errorRaw, defaultOpen: defaultDetailsOpen, action: chatGpt ? _jsx(ChatGptConnectionSlot, { action: chatGpt }) : undefined, modelOptions: modelOptions, className: className }));
 }
-/**
- * The ChatGPT fix for a failed turn. It needs the session the turn belongs
- * to, so it renders only on a session route; elsewhere the row stays
- * informational, exactly as before.
- */
-function ChatGptConnectionSlot({ action }) {
-    const ids = useSessionIds();
-    const projectId = ids.projectId ?? null;
-    const sessionId = ids.sessionId ?? null;
-    if (!projectId || !sessionId)
-        return null;
-    return _jsx(ChatGptConnectionButton, { action: action, projectId: projectId, sessionId: sessionId });
-}
-/**
- * Opens the ChatGPT accounts dialog, which exists only with pooled provider
- * secrets and the LLM gateway on. Shown only where connecting or
- * reconnecting an account can fix this session (`chatGptActionApplies`).
- */
-function ChatGptConnectionButton({ action, projectId, sessionId, }) {
-    const t = useTranslations('pooledSecrets');
-    const viewerId = useUiViewerId();
-    const pooled = useFeatureFlag(projectId, 'pooled_provider_secrets');
-    const enabled = pooled.enabled;
-    const access = useModelAccess(enabled ? projectId : null);
-    const session = useProjectSession(projectId, sessionId, { enabled });
-    const pools = useSessionProviderSecretPools(enabled ? projectId : null, sessionId);
-    const [open, setOpen] = useState(false);
-    const { ProviderAccountsModal } = useUiComponents();
-    const applies = !!ProviderAccountsModal &&
-        enabled &&
-        !(access.data?.disabledProviders ?? []).includes('codex') &&
-        chatGptActionApplies({
-            action,
-            personalUser: sessionPersonalUser(session.data),
-            viewerId: viewerId,
-            explicitSelection: pools.isSuccess
-                ? pools.data.pools.some((pool) => pool.provider_id === 'codex')
-                : undefined,
-        });
-    if (!applies || !ProviderAccountsModal)
-        return null;
-    return (_jsxs("div", { className: "mt-2 pl-7", children: [_jsx(Button, { size: "sm", className: "active:scale-[0.96]", onClick: () => setOpen(true), children: t(action === 'reconnect' ? 'reconnectChatGpt' : 'connectChatGpt') }), _jsx(ProviderAccountsModal, { projectId: projectId, providerId: "codex", open: open, onOpenChange: setOpen })] }));
-}
 export function SessionRetryDisplay({ message, attempt, secondsLeft, details, className, }) {
     if (!message)
         return null;

package/dist/session/status/session-starting-loader.d.ts

@@ -1,4 +1,5 @@
 import { type SessionStartResult } from '@kortix/sdk';
+import { type ReactNode } from 'react';
 /**
  * What a session shows while its Kortix Computer comes up: nothing, unless the
  * wake needs attention. Opening a session wakes its computer in the background,
@@ -52,13 +53,24 @@ export declare function RestartFallback({ show, pending, onRestart, className, b
  */
 export declare function SessionStartingLoader({ projectId, sessionId, 
 /** Honest one-liner from the SDK wake escalation ladder. */
-note, reason, failure, }: {
+note, reason, failure, fallback, }: {
     projectId?: string;
     sessionId?: string;
     note?: string | null;
     reason?: string | null;
     failure?: StartFailure;
-}): import("react").JSX.Element | null;
+    /** What a routine wake shows. Default: nothing. */
+    fallback?: ReactNode;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null;
+/**
+ * The body of a tool card (Terminal, Browser, Files) opened while the session's
+ * computer boots: the wake's status when it needs attention, else a spinner and
+ * one line, centered where the live tool will appear.
+ */
+export declare function SessionBootStatus({ projectId, sessionId, }: {
+    projectId?: string;
+    sessionId?: string;
+}): import("react").JSX.Element;
 /**
  * Compact status above a readable conversation while its runtime wakes, shown
  * only when the wake needs attention: an escalation or retry note, or a stuck