@kortix/ui 0.14.8 → 0.14.9

package/dist/session/composer/composer-underbar.js

@@ -14,7 +14,7 @@ import { TokenProgress } from './token-progress.js';
 const NO_AGENT_SELECT = () => { };
 /** Stable identity so the empty roster doesn't remount the picker per render. */
 const EMPTY_AGENTS = [];
-export function ComposerUnderbar({ onAttachClick, agents, selectedAgent, agentMenuOpen, onAgentMenuOpenChange, onAgentChange, noAccessibleAgents = false, messages, models, selectedModel, onContextClick, variant = 'row', toolbarSlot, }) {
+export function ComposerUnderbar({ onAttachClick, agents, selectedAgent, agentMenuOpen, onAgentMenuOpenChange, onAgentChange, noAccessibleAgents = false, messages, models, selectedModel, onContextClick, variant = 'row', agentPickerCompact = false, toolbarSlot, }) {
     const t = useTranslations('threads');
     const { contextMeterEnabled } = useUiHostConfig();
     /*
@@ -50,9 +50,10 @@ export function ComposerUnderbar({ onAttachClick, agents, selectedAgent, agentMe
     // buttons stayed 32px on touch while the identical controls inside
     // `.kortix-composer-toolbar` were 40px.
     _jsxs("div", { className: inline
-            ? 'kortix-composer-underbar flex min-w-0 items-center gap-1'
+            ? // `shrink-0`: the model name truncates first (`ModelSelector`), never the agent.
+                'kortix-composer-underbar flex shrink-0 items-center gap-1'
             : 'kortix-composer-underbar flex items-center justify-between gap-2 px-px pt-1.5 pb-2', children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(Hint, { side: "top", label: t('attachFiles'), children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-base", onClick: onAttachClick, "aria-label": t('attachFiles'), 
                             // `hit-area-3` — the ≈29px ghost chip clears the 44px mobile tap
                             // floor only with the shared pseudo-element extension.
-                            className: "text-muted-foreground hit-area-3 rounded-lg", children: _jsx(Paperclip, { className: "size-4 shrink-0" }) }) }), _jsx(AgentSelector, { agents: noAccessibleAgents ? EMPTY_AGENTS : agents, selectedAgent: selectedAgent, open: agentMenuOpen, onOpenChange: onAgentMenuOpenChange, onSelect: onAgentChange ?? NO_AGENT_SELECT, triggerLabelClassName: "max-w-[7rem]", unavailableHint: noAccessibleAgents ? NO_AGENT_ACCESS_MESSAGE : undefined })] }), _jsxs("div", { className: "flex items-center gap-1", children: [(inline && !messages) || !contextMeterEnabled ? null : (_jsx(TokenProgress, { messages: messages, models: models, selectedModel: selectedModel, onContextClick: onContextClick })), toolbarSlot] })] }));
+                            className: "text-muted-foreground hit-area-3 rounded-lg", children: _jsx(Paperclip, { className: "size-4 shrink-0" }) }) }), _jsx(AgentSelector, { compact: agentPickerCompact, agents: noAccessibleAgents ? EMPTY_AGENTS : agents, selectedAgent: selectedAgent, open: agentMenuOpen, onOpenChange: onAgentMenuOpenChange, onSelect: onAgentChange ?? NO_AGENT_SELECT, triggerLabelClassName: "max-w-[7rem]", unavailableHint: noAccessibleAgents ? NO_AGENT_ACCESS_MESSAGE : undefined })] }), _jsxs("div", { className: "flex items-center gap-1", children: [(inline && !messages) || !contextMeterEnabled ? null : (_jsx(TokenProgress, { messages: messages, models: models, selectedModel: selectedModel, onContextClick: onContextClick })), toolbarSlot] })] }));
 }

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

@@ -153,6 +153,11 @@ export interface SessionChatInputProps {
      * a spinner with no explanation, which was indistinguishable from broken.
      */
     notice?: string | null;
+    /**
+     * The notice reports a sleeping computer: a moon, not a spinner. Default:
+     * `notice` is `SESSION_NOTICE.idle`. A host that rewords the notice says it.
+     */
+    noticeAsleep?: boolean;
     /**
      * Renders a "Retry" action inline in the notice bar when set. Wired to
      * `requestRuntimeReconnect()` for a confirmed-unreachable runtime, or a
@@ -190,8 +195,11 @@ export interface SessionChatInputProps {
          * Enter. For one-click starters (the first chat's "Update memory"): the
          * send still carries the composer's agent and model and still hits every
          * refusal (no agent, no model, blocked images) a typed message would.
+         *
+         * `'when-ready'` holds the text until a send is possible, then submits once:
+         * the onboarding chat's "Onboard me" waits for a model to be connected.
          */
-        submit?: boolean;
+        submit?: boolean | 'when-ready';
     } | null;
     /**
      * Called with `prefill.id` the moment that prefill has actually landed in the
@@ -240,6 +248,12 @@ export interface SessionChatInputProps {
      * reads as a detached strip, so there the controls belong on the one bar.
      */
     underbarPlacement?: 'below' | 'inline';
+    /**
+     * The agent picker shows the agent's tile alone, its name in the tooltip
+     * and the menu. A narrow inline toolbar (a channel's thread panel) gives
+     * the model name the width instead.
+     */
+    agentPickerCompact?: boolean;
     /**
      * Where the `/` menu docks relative to the card. `'above'` (default) keeps
      * it in flow above the composer — on the session page the card sits at the

package/dist/session/composer/composer.js

@@ -25,7 +25,7 @@ import { ComposerCard } from './ComposerCard.js';
 import { handleBillingError } from '../../internal/lib/error-handler.js';
 import { attachedFileUploadId, attachmentsBlockSend, captureAttachmentSubmission, dispatchLatched, planAttachmentReplacement, refusedFilesToast, runComposerSend, heldTraySizes, splitComposerFiles, stageComposerFiles, takeNewBillingRefusals, } from './attachment-submission.js';
 import { draftWillRunCommand, planCommandAttachments, planUnresolvedCommandChip, readCommandChipLabel, } from './command-attachments.js';
-import { appendComposerQuote, classifyPaste, isUndoKey, popPasteUndo, extractReplyQuotes, nextPastedTextFileName, planDraftSubmission, planFailedSendRecovery, planPrefillMerge, planQuoteRequests, removeComposerQuote, resolveEditorPlaceholder, restoreComposerQuotes, shouldApplyPrefill, shouldSubmitPrefill, textToDocument, } from './composer-logic.js';
+import { appendComposerQuote, classifyPaste, isUndoKey, popPasteUndo, extractReplyQuotes, nextPastedTextFileName, planDraftSubmission, planFailedSendRecovery, planPrefillMerge, planQuoteRequests, removeComposerQuote, resolveEditorPlaceholder, restoreComposerQuotes, shouldApplyPrefill, shouldSubmitPrefill, shouldSubmitWhenReady, textToDocument, } from './composer-logic.js';
 import { getContextUsage } from './context-ring.js';
 import { useComposerFocus } from './hooks/use-composer-focus.js';
 import { useMenuRevalidation } from './hooks/use-file-search.js';
@@ -722,6 +722,8 @@ function ComposerImpl(props) {
     // through this ref, bound in an effect right after that declaration.
     const handleSubmitRef = useRef(() => undefined);
     const submittedPrefillIdRef = useRef(null);
+    // The prefill id that landed in the editor: `'when-ready'` submits only after it.
+    const [landedPrefillId, setLandedPrefillId] = useState(null);
     const onPrefillAppliedRef = useRef(onPrefillApplied);
     useEffect(() => {
         onPrefillAppliedRef.current = onPrefillApplied;
@@ -806,6 +808,7 @@ function ComposerImpl(props) {
         // re-run the effect whenever the caller re-created it, and a `merge` prefill
         // applied twice appends its text twice.
         onPrefillAppliedRef.current?.(prefillId);
+        setLandedPrefillId(prefillId);
         // Last, so the prefill is fully applied and reported before the submit
         // takes the draft out of the editor.
         if (shouldSubmitPrefill({
@@ -1361,6 +1364,21 @@ function ComposerImpl(props) {
     useEffect(() => {
         handleSubmitRef.current = () => void handleSubmit();
     }, [handleSubmit]);
+    const submitWhenReady = prefill?.submit === 'when-ready';
+    useEffect(() => {
+        if (!submitWhenReady ||
+            !shouldSubmitWhenReady({
+                prefillId,
+                landedPrefillId,
+                submittedPrefillId: submittedPrefillIdRef.current,
+                submitDisabled,
+                loading: modelsLoading || entitlementsPending,
+            })) {
+            return;
+        }
+        submittedPrefillIdRef.current = prefillId;
+        handleSubmitRef.current();
+    }, [submitWhenReady, prefillId, landedPrefillId, submitDisabled, modelsLoading, entitlementsPending]);
     // A question lock owns the editor: Up there is a caret move, never a take-back.
     const handleArrowUpAtStart = useCallback(() => (lockForQuestion ? false : (onArrowUpAtStart?.() ?? false)), [lockForQuestion, onArrowUpAtStart]);
     const editorPlaceholder = resolveEditorPlaceholder({

package/dist/session/composer/draft/composer-draft.d.ts

@@ -15,12 +15,16 @@ export type StoredUpload = PromptAttachment & {
  * What a persisted composer draft is keyed by.
  *
  * Project scope is the home hero composer — one draft per project, because
- * that composer has no session yet. Session scope is every in-thread composer.
- * Both ids are UUIDs, so the two families can never collide.
+ * that composer has no session yet. Space scope is a channel or DM composer.
+ * Session scope is every in-thread composer. Every id is a UUID, and each
+ * family has its own prefix, so they can never collide.
  */
 export type DraftScope = {
     kind: 'project';
     projectId: string;
+} | {
+    kind: 'space';
+    spaceId: string;
 } | {
     kind: 'session';
     sessionId: string;

package/dist/session/composer/draft/composer-draft.js

@@ -9,7 +9,11 @@ export const DRAFT_ENVELOPE_VERSION = 1;
 export const MAX_DRAFT_BYTES = 131072;
 /** The `<kind>:<id>` half of the storage key. The family prefix is the store's. */
 export function draftScopeKey(scope) {
-    return scope.kind === 'project' ? `project:${scope.projectId}` : `session:${scope.sessionId}`;
+    if (scope.kind === 'project')
+        return `project:${scope.projectId}`;
+    if (scope.kind === 'space')
+        return `space:${scope.spaceId}`;
+    return `session:${scope.sessionId}`;
 }
 const isRemote = (file) => file.kind === 'remote';
 /**

package/dist/session/composer/reasoning-effort-selector.js

@@ -117,5 +117,5 @@ export function ReasoningEffortSelector({ variants, selectedVariant, onVariantCh
     // reads as Auto rather than an unlabeled value; the next explicit choice
     // replaces it.
     const current = selectedVariant && choices.includes(selectedVariant) ? selectedVariant : null;
-    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": t('thinkingEffort'), className: "text-foreground/70 gap-1.5 rounded-lg hit-area-y-3", children: [_jsx(EffortIcon, { value: current, className: "size-4 shrink-0" }), _jsx("span", { className: "max-w-[7rem] truncate", children: current ? label(current) : t('auto') }), _jsx(CaretDownIcon, { className: cn('size-3 opacity-50 transition-transform duration-200 ease-out', open && 'rotate-180') })] }) }), _jsx(DropdownMenuContent, { side: "top", align: "start", className: "min-w-[10rem]", children: _jsxs(DropdownMenuRadioGroup, { value: current ?? AUTO, onValueChange: onValueChange, children: [_jsxs(DropdownMenuRadioItem, { value: AUTO, children: [_jsx(EffortIcon, { value: null, className: "size-4 shrink-0" }), t('auto')] }), choices.map((value) => (_jsxs(DropdownMenuRadioItem, { value: value, children: [_jsx(EffortIcon, { value: value, className: "size-4 shrink-0" }), label(value)] }, value)))] }) })] }));
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": t('thinkingEffort'), className: "text-muted-foreground gap-1.5 rounded-lg hit-area-y-3", children: [_jsx(EffortIcon, { value: current, className: "size-4 shrink-0" }), _jsx("span", { className: "max-w-[7rem] truncate", children: current ? label(current) : t('auto') }), _jsx(CaretDownIcon, { className: cn('size-3 opacity-50 transition-transform duration-200 ease-out', open && 'rotate-180') })] }) }), _jsx(DropdownMenuContent, { side: "top", align: "start", className: "min-w-[10rem]", children: _jsxs(DropdownMenuRadioGroup, { value: current ?? AUTO, onValueChange: onValueChange, children: [_jsxs(DropdownMenuRadioItem, { value: AUTO, children: [_jsx(EffortIcon, { value: null, className: "size-4 shrink-0" }), t('auto')] }), choices.map((value) => (_jsxs(DropdownMenuRadioItem, { value: value, children: [_jsx(EffortIcon, { value: value, className: "size-4 shrink-0" }), label(value)] }, value)))] }) })] }));
 }

package/dist/session/models/chatgpt-connection-button.d.ts

@@ -0,0 +1,11 @@
+import { type ChatGptConnectionAction } from './chatgpt-connection-action.js';
+/**
+ * The ChatGPT fix for a failed turn or tool call (the session error row, the
+ * image card). It needs the session the call belongs to, so it renders only on
+ * a session route; elsewhere the row stays informational.
+ */
+export declare function ChatGptConnectionSlot({ action, className, }: {
+    action: ChatGptConnectionAction;
+    /** The wrapper's placement in the host row. */
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/session/models/chatgpt-connection-button.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../i18n/index.js';
+import { Button } from '../../primitives/button.js';
+import { cn } from '../../lib/utils.js';
+import { useSessionIds } from '../../providers/session-ids.js';
+import { useUiComponents, useUiViewerId } from '../../providers/ui-provider.js';
+import { useFeatureFlag, useModelAccess, useProjectSession, useSessionProviderSecretPools, } from '@kortix/sdk/react';
+import { useState } from 'react';
+import { chatGptActionApplies } from './chatgpt-connection-action.js';
+import { sessionPersonalUser } from '../overrides/provider-pool-draft.js';
+/**
+ * The ChatGPT fix for a failed turn or tool call (the session error row, the
+ * image card). It needs the session the call belongs to, so it renders only on
+ * a session route; elsewhere the row stays informational.
+ */
+export function ChatGptConnectionSlot({ action, className = 'mt-2 pl-7', }) {
+    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, className: className });
+}
+/**
+ * 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, className, }) {
+    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: cn(className), 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 })] }));
+}

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

@@ -106,7 +106,7 @@ function ModelRow({ model, groupProviderID, groupProviderName, isSelected, isAcc
                                 providerID: model.providerID,
                                 modelID: model.modelID,
                             });
-                        }, className: cn('absolute inset-0 flex cursor-pointer items-center justify-center rounded-md', 'text-muted-foreground/70 hover:text-foreground hover:bg-foreground/10', 
+                        }, className: cn('absolute inset-0 flex cursor-pointer items-center justify-center rounded-md', 'text-muted-foreground hover:text-foreground hover:bg-foreground/10', 
                         /* `opacity` is NOT in this list, on purpose — see above. These
                            only ever run on the one row the cursor is on, so they cannot
                            leave a trail. */
@@ -304,7 +304,10 @@ export function ModelSelector({ models, selectedModel, onSelect, defaultControls
         setOpen(false);
         openUpgrade();
     }, [openUpgrade, setOpen]);
-    return (_jsxs(_Fragment, { children: [connectionModal, projectId && chatGptPossible && ProviderAccountsModal && (_jsx(ProviderAccountsModal, { projectId: projectId, providerId: "codex", open: chatGptOpen, onOpenChange: setChatGptOpen })), _jsxs(CommandPopover, { open: disabled ? false : open, onOpenChange: (next) => !disabled && setOpen(next), children: [_jsx(CommandPopoverTrigger, { children: appearance === 'field' ? (_jsxs("button", { type: "button", disabled: disabled, className: cn(triggerVariants(), 'h-9 w-full'), children: [_jsx("span", { className: "truncate", children: displayName }), disabled ? null : _jsx(ChevronDown, { className: cn(TRIGGER_CARET_CLASS, 'size-4') })] })) : (_jsxs(Button, { type: "button", variant: triggerVariant, size: "sm", className: cn('rounded-lg hit-area-y-3', triggerVariant === 'ghost' && 'text-muted-foreground'), children: [_jsx("span", { className: cn('max-w-30 truncate', triggerLabelClassName), children: displayName }), _jsx(ChevronDown, { className: cn('duration-moderate size-3 transition-transform ease-out', open && 'rotate-180') })] })) }), _jsx(CommandPopoverContent, { side: "top", align: "start", sideOffset: 8, className: "w-[min(300px,calc(100vw-1.5rem))]", children: _jsxs(_Fragment, { children: [_jsx(CommandInput, { compact: true, placeholder: tModel('search'), value: search, onValueChange: setSearch, rightElement: canManageModels && canConnectProvider ? (_jsxs("div", { className: "-mr-0.5 flex shrink-0 items-center gap-0.5", children: [_jsx(Hint, { label: tModel('connectProvider'), side: "top", className: "z-50", children: _jsx("button", { type: "button", "aria-label": tModel('addProvider'), onClick: () => handleOpenProviderModal('providers'), className: "text-muted-foreground hover:text-foreground hover:bg-muted flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors", children: _jsx(Plus, { className: "size-4" }) }) }), _jsx(Hint, { label: tModel('manageModels'), side: "top", className: "z-50", children: _jsx("button", { type: "button", "aria-label": tModel('manageModels'), onClick: () => handleOpenProviderModal('models'), className: "text-muted-foreground hover:text-foreground hover:bg-muted flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors", children: _jsx(SlidersHorizontal, { className: "size-4" }) }) })] })) : undefined }), grouped.length > 1 && _jsx(CommandSeparator, { className: "bg-border/60" }), _jsx(CommandList, { className: "max-h-[380px]", children: modelsLoading || entitlementsPending ? (_jsx("div", { className: "flex min-h-32 items-center justify-center", role: "status", "aria-label": tModel('loading'), children: _jsx(Loading, { className: "text-muted-foreground size-4 shrink-0" }) })) : grouped.length > 0 ? (_jsxs(_Fragment, { children: [pinnedDefault && (_jsxs(_Fragment, { children: [_jsx(CommandGroup, { heading: _jsx(GroupHeading, { children: tModel('yourDefault') }), forceMount: true, children: _jsx(ModelRow, { model: pinnedDefault.model, groupProviderID: pinnedDefault.providerID, groupProviderName: pinnedDefault.providerName, isSelected: availableSelectedModel?.providerID === pinnedDefault.model.providerID &&
+    return (_jsxs(_Fragment, { children: [connectionModal, projectId && chatGptPossible && ProviderAccountsModal && (_jsx(ProviderAccountsModal, { projectId: projectId, providerId: "codex", open: chatGptOpen, onOpenChange: setChatGptOpen })), _jsxs(CommandPopover, { open: disabled ? false : open, onOpenChange: (next) => !disabled && setOpen(next), children: [_jsx(CommandPopoverTrigger, { children: appearance === 'field' ? (_jsxs("button", { type: "button", disabled: disabled, className: cn(triggerVariants(), 'h-9 w-full'), children: [_jsx("span", { className: "truncate", children: displayName }), disabled ? null : _jsx(ChevronDown, { className: cn(TRIGGER_CARET_CLASS, 'size-4') })] })) : (_jsxs(Button, { type: "button", variant: triggerVariant, size: "sm", 
+                            // `min-w-0 shrink`: in a narrow toolbar (a channel's thread panel) the
+                            // model name truncates; the controls beside it keep their width.
+                            className: cn('min-w-0 shrink rounded-lg hit-area-y-3', triggerVariant === 'ghost' && 'text-muted-foreground'), children: [_jsx("span", { className: cn('max-w-30 truncate', triggerLabelClassName), children: displayName }), _jsx(ChevronDown, { className: cn('duration-moderate size-3 transition-transform ease-out', open && 'rotate-180') })] })) }), _jsx(CommandPopoverContent, { side: "top", align: "start", sideOffset: 8, className: "w-[min(300px,calc(100vw-1.5rem))]", children: _jsxs(_Fragment, { children: [_jsx(CommandInput, { compact: true, placeholder: tModel('search'), value: search, onValueChange: setSearch, rightElement: canManageModels && canConnectProvider ? (_jsxs("div", { className: "-mr-0.5 flex shrink-0 items-center gap-0.5", children: [_jsx(Hint, { label: tModel('connectProvider'), side: "top", className: "z-50", children: _jsx("button", { type: "button", "aria-label": tModel('addProvider'), onClick: () => handleOpenProviderModal('providers'), className: "text-muted-foreground hover:text-foreground hover:bg-muted flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors", children: _jsx(Plus, { className: "size-4" }) }) }), _jsx(Hint, { label: tModel('manageModels'), side: "top", className: "z-50", children: _jsx("button", { type: "button", "aria-label": tModel('manageModels'), onClick: () => handleOpenProviderModal('models'), className: "text-muted-foreground hover:text-foreground hover:bg-muted flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors", children: _jsx(SlidersHorizontal, { className: "size-4" }) }) })] })) : undefined }), grouped.length > 1 && _jsx(CommandSeparator, { className: "bg-border/60" }), _jsx(CommandList, { className: "max-h-[380px]", children: modelsLoading || entitlementsPending ? (_jsx("div", { className: "flex min-h-32 items-center justify-center", role: "status", "aria-label": tModel('loading'), children: _jsx(Loading, { className: "text-muted-foreground size-4 shrink-0" }) })) : grouped.length > 0 ? (_jsxs(_Fragment, { children: [pinnedDefault && (_jsxs(_Fragment, { children: [_jsx(CommandGroup, { heading: _jsx(GroupHeading, { children: tModel('yourDefault') }), forceMount: true, children: _jsx(ModelRow, { model: pinnedDefault.model, groupProviderID: pinnedDefault.providerID, groupProviderName: pinnedDefault.providerName, isSelected: availableSelectedModel?.providerID === pinnedDefault.model.providerID &&
                                                                 availableSelectedModel?.modelID === pinnedDefault.model.modelID, isAccountDefault: true, defaultControls: rowDefaultControls, onSelect: handleSelect, connectLabel: tPooled('connect'), scope: "pinned" }) }), _jsx(CommandSeparator, {})] })), sections.map((section, sectionIndex) => {
                                                 const selectedInSection = section.models.find((m) => availableSelectedModel?.providerID === m.providerID &&
                                                     availableSelectedModel?.modelID === m.modelID);

package/dist/session/models/use-model-connection-gate.d.ts

@@ -12,11 +12,9 @@ export declare function projectProviderModalTab(tab: ProviderModalTab): 'provide
  * route segment is the fallback.
  *
  * The fallback is what every original caller relies on — they all render under
- * `/projects/[id]`. The explicit id exists because the onboarding wizard's plan
- * step now also runs on `/new` (`app/(app)/new`), which has NO `[id]` segment:
- * there the route yields `null`, `modal` is therefore `null`, and
- * `openConnectProvider` renders nothing while the step's only control never
- * advances the wizard.
+ * `/projects/[id]`. The explicit id serves callers outside that route, such as
+ * Customize's provider list: there the route may yield `null`, `modal` is
+ * then `null`, and `openConnectProvider` renders nothing.
  *
  * `!== undefined`, never `??`: a caller that deliberately passes `null` means
  * "act on no project", and must not silently inherit whatever route it happens
@@ -47,6 +45,8 @@ export declare function useModelConnectionGate(models?: FlatModel[], options?: {
     projectId?: string | null;
 }): {
     canConnectProvider: boolean;
+    /** The viewer holds `project.model.write`: the provider modal can change the project's models. */
+    canWriteProviders: boolean;
     openConnectProvider: (tab?: ProviderModalTab) => void;
     openUpgrade: () => void;
     modal: import("react").JSX.Element | null;

package/dist/session/models/use-model-connection-gate.js

@@ -27,11 +27,9 @@ export function projectProviderModalTab(tab) {
  * route segment is the fallback.
  *
  * The fallback is what every original caller relies on — they all render under
- * `/projects/[id]`. The explicit id exists because the onboarding wizard's plan
- * step now also runs on `/new` (`app/(app)/new`), which has NO `[id]` segment:
- * there the route yields `null`, `modal` is therefore `null`, and
- * `openConnectProvider` renders nothing while the step's only control never
- * advances the wizard.
+ * `/projects/[id]`. The explicit id serves callers outside that route, such as
+ * Customize's provider list: there the route may yield `null`, `modal` is
+ * then `null`, and `openConnectProvider` renders nothing.
  *
  * `!== undefined`, never `??`: a caller that deliberately passes `null` means
  * "act on no project", and must not silently inherit whatever route it happens
@@ -154,6 +152,8 @@ export function useModelConnectionGate(models = [], options) {
     const showUpgradeOption = !!platformConfig().billingEnabled;
     return {
         canConnectProvider,
+        /** The viewer holds `project.model.write`: the provider modal can change the project's models. */
+        canWriteProviders,
         openConnectProvider,
         openUpgrade,
         modal,

package/dist/session/outcomes/jump-to-outcome.d.ts

@@ -0,0 +1,10 @@
+import { type LoadEntireHistoryOptions } from '../print/load-entire-history.js';
+/** Resolve again after paging: older pages can change the first loaded turn's anchor. */
+export declare function jumpToOutcome({ needsHistory, history, resolve, scroll, unavailable, loadError }: {
+    needsHistory: boolean;
+    history: LoadEntireHistoryOptions;
+    resolve: () => string | undefined;
+    scroll: (key: string) => Promise<boolean>;
+    unavailable: () => void;
+    loadError: () => void;
+}): Promise<void>;

package/dist/session/outcomes/jump-to-outcome.js

@@ -0,0 +1,11 @@
+import { loadEntireHistory } from '../print/load-entire-history.js';
+/** Resolve again after paging: older pages can change the first loaded turn's anchor. */
+export async function jumpToOutcome({ needsHistory, history, resolve, scroll, unavailable, loadError }) {
+    if (needsHistory && !(await loadEntireHistory(history)).exhausted) {
+        loadError();
+        return;
+    }
+    const key = resolve();
+    if (!key || !await scroll(key))
+        unavailable();
+}

package/dist/session/outcomes/session-outcomes-bridge.d.ts

@@ -0,0 +1,14 @@
+import { type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import type { ChangeRequest } from '@kortix/sdk';
+export interface SessionChangeRequests {
+    requests: ChangeRequest[];
+    onOpen: (crId: string) => void;
+    onJump: (crId: string) => Promise<void>;
+    jumping: boolean;
+}
+/** Chat and the mobile panel are siblings. Share the existing read, never a second query. */
+export declare function SessionOutcomesBridge({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const useSessionChangeRequestsPanel: () => SessionChangeRequests | null;
+export declare const usePublishSessionChangeRequests: () => Dispatch<SetStateAction<SessionChangeRequests | null>> | null;

package/dist/session/outcomes/session-outcomes-bridge.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+const ReadContext = createContext(null);
+const WriteContext = createContext(null);
+/** Chat and the mobile panel are siblings. Share the existing read, never a second query. */
+export function SessionOutcomesBridge({ children }) {
+    const [value, setValue] = useState(null);
+    return (_jsx(WriteContext.Provider, { value: setValue, children: _jsx(ReadContext.Provider, { value: value, children: children }) }));
+}
+export const useSessionChangeRequestsPanel = () => useContext(ReadContext);
+export const usePublishSessionChangeRequests = () => useContext(WriteContext);

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

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import { type TurnSpan } from './anchor-outcomes.js';
 import type { Outcome } from '../../internal/outcomes/outcome-types.js';
-export declare function SessionOutcomesProvider({ projectSessionId, turnSpans, busy, onOpen, children, }: {
+export declare function SessionOutcomesProvider({ projectSessionId, turnSpans, busy, onOpen, children, onJump, jumping, }: {
     /** The git session id a change request records as `origin_session_id`. */
     projectSessionId: string | undefined;
     turnSpans: TurnSpan[];
@@ -9,6 +9,8 @@ export declare function SessionOutcomesProvider({ projectSessionId, turnSpans, b
     busy: boolean;
     onOpen: (outcome: Outcome) => void;
     children: ReactNode;
+    onJump: (resolveTurn: () => string | undefined, createdAt: number) => Promise<void>;
+    jumping: boolean;
 }): import("react").JSX.Element;
 /** A turn's outcomes, oldest first. `EMPTY` is a module constant so a turn with
  *  no outcomes gets the SAME array every render and never re-renders for it. */

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

@@ -45,6 +45,9 @@ import { useProjectContext } from '../../files/project/context.js';
 // NOT `@kortix/sdk/react`'s change-request hook. See the note above — this is
 // a cache-coherence requirement, not a style preference.
 import { invalidateChangeRequestReads, useSessionChangeRequests, } from '../../files/project/hooks/use-change-requests.js';
+import { usePublishSessionChangeRequests } from './session-outcomes-bridge.js';
+import { useProjectCan } from '../../internal/lib/use-project-can.js';
+import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
 import { anchorOutcomes } from './anchor-outcomes.js';
 import { changeRequestOutcomes } from './change-request-outcomes.js';
 const EMPTY = [];
@@ -52,7 +55,7 @@ const OutcomesContext = createContext(null);
 /** A change request the agent opens as its turn closes can land after the
  *  turn-end read: read once more after this delay. */
 const CHANGE_REQUEST_SETTLE_MS = 2_500;
-export function SessionOutcomesProvider({ projectSessionId, turnSpans, busy, onOpen, children, }) {
+export function SessionOutcomesProvider({ projectSessionId, turnSpans, busy, onOpen, children, onJump, jumping, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     // No `projectId` argument: this hook reads it from `ProjectFilesProvider`,
     // which is what keeps it on the same cache entry the dialog invalidates.
@@ -60,15 +63,42 @@ export function SessionOutcomesProvider({ projectSessionId, turnSpans, busy, onO
     // the turn that produced it — it just reads "Applied" or "Closed".
     // Only THIS session's change requests, filtered by the server; the key sits
     // under the project-files list scope the dialog's mutations invalidate.
-    const { data } = useSessionChangeRequests(projectSessionId, { refetchInterval: 60_000 });
+    const projectId = useProjectContext()?.projectId;
+    const { allowed } = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_GITOPS_READ);
+    const { data } = useSessionChangeRequests(projectSessionId, { refetchInterval: busy ? 5_000 : 60_000, enabled: allowed });
+    const requests = useMemo(() => allowed ? (data?.change_requests ?? []) : [], [allowed, data?.change_requests]);
     useRefreshChangeRequestsOnTurnEnd(busy);
     const all = useMemo(
     // Change requests are the only outcome a turn produces. The derived
     // pipeline (files, schedules, background tasks, connector links) was built
     // and removed — see `OutcomeKind` for why each one could not be tied to the
     // turn that showed it.
-    () => changeRequestOutcomes(data?.change_requests ?? [], projectSessionId, tI18nComplete), [data?.change_requests, projectSessionId, tI18nComplete]);
+    () => changeRequestOutcomes(requests, projectSessionId, tI18nComplete), [requests, projectSessionId, tI18nComplete]);
     const byTurn = useMemo(() => anchorOutcomes(all, turnSpans), [all, turnSpans]);
+    const anchorsRef = useRef(byTurn);
+    useEffect(() => { anchorsRef.current = byTurn; }, [byTurn]);
+    const publish = usePublishSessionChangeRequests();
+    const panelValue = useMemo(() => ({
+        requests,
+        onOpen: (crId) => {
+            const outcome = all.find((item) => item.id === `cr:${crId}`);
+            // Rows open this request, not a superseding request's detail.
+            if (outcome)
+                onOpen({ ...outcome, action: { ...outcome.action, target: crId } });
+        },
+        onJump: (crId) => onJump(() => {
+            for (const [key, outcomes] of anchorsRef.current) {
+                if (outcomes.some((item) => item.id === `cr:${crId}`))
+                    return key;
+            }
+            return undefined;
+        }, Date.parse(requests.find((cr) => cr.cr_id === crId)?.created_at ?? '')),
+        jumping,
+    }), [requests, all, onOpen, onJump, jumping]);
+    useEffect(() => {
+        publish?.(panelValue);
+        return () => publish?.(null);
+    }, [publish, panelValue]);
     const value = useMemo(() => ({ byTurn, onOpen }), [byTurn, onOpen]);
     return _jsx(OutcomesContext.Provider, { value: value, children: children });
 }

package/dist/session/panel/easy/app-preview.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import { type ShareContext } from '../../../files/viewer/viewer-actions.js';
 export declare function AppPreview({ url, name, projectId, shareContext, onClose, onSendToAgent, }: {
     /** The internal sandbox URL the agent handed over, e.g. http://localhost:3000. */
@@ -17,3 +18,12 @@ export declare function AppPreview({ url, name, projectId, shareContext, onClose
      *  shows only Retry, exactly as before. */
     onSendToAgent?: () => void;
 }): import("react").JSX.Element;
+/**
+ * The Browser card while the session's computer boots: the real toolbar, every
+ * control that needs the computer disabled, over `children` (the boot status).
+ * Mounts nothing that reaches the sandbox: no proxy, no app list, no frame.
+ */
+export declare function AppPreviewBooting({ onClose, children, }: {
+    onClose: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;

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

@@ -36,7 +36,7 @@ import { useBrowserRecentsStore } from '../../../internal/stores/browser-recents
 import { probePreviewPort } from '@kortix/sdk';
 import { useRuntimeConnectionStore } from '@kortix/sdk/react';
 import { ArrowSquareOutIcon, GlobeIcon as Globe, SparkleIcon as SparklesSolid, WarningIcon, } from '@phosphor-icons/react';
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
 import { PreviewLoadingOverlay, SandboxAddressBar, } from '../../../browser/sandbox-browser-chrome.js';
 import { BrowserLanding } from '../../../browser/browser-landing.js';
 import { CloseButton, DetailSidebarToggle } from './detail-view.js';
@@ -97,7 +97,6 @@ export function AppPreview({ url, name, projectId, shareContext, onClose, onSend
     // Still loading past PREVIEW_SLOW_MS: the overlay says so and offers Reload.
     const [slow, setSlow] = useState(false);
     const addressRef = useRef(null);
-    const isMobile = useIsMobile();
     // Copy link mints a PUBLIC share and copies `/share/session/{token}`.
     // It used to copy `previewUrl` — the authenticated `/v1/p/{sandbox}/{port}/…`
     // proxy URL — which only ever worked in the tab that had the
@@ -235,16 +234,11 @@ export function AppPreview({ url, name, projectId, shareContext, onClose, onSend
         setIndex((i) => i + 1);
         reload();
     }, [canGoForward, reload]);
-    return (_jsxs("div", { className: "bg-background flex h-full min-h-0 min-w-0 flex-col", children: [_jsxs("div", { className: "border-border flex shrink-0 items-center gap-0.5 border-b px-2 py-1", children: [_jsx(DetailSidebarToggle, {}), _jsx(SandboxAddressBar, { displayValue: current, hasPreview: hasPreview, isLoading: isLoading, canGoBack: canGoBack, canGoForward: canGoForward, onBack: goBack, onForward: goForward, onReload: reload, onHome: () => navigateTo(''), onNavigate: navigateTo, suggestions: suggestions, placeholder: tI18nComplete.raw('text878abd024f27'), inputRef: addressRef, trailing: 
-                        // An app has no file to save and no text to put on a clipboard, so
-                        // `Copy link` is the one copy action — the thing you can hand
-                        // someone for a running port.
-                        _jsx(ViewerActions, { copy: appCopy, shareContext: shareContext, shareInput: shareInput }) }), _jsxs(ButtonGroup, { className: "shrink-0", children: [_jsx(Hint, { label: tI18nComplete.raw('text306ef19c8ac3'), side: "bottom", children: _jsx(Button, { variant: "secondary", size: "icon", disabled: !hasPreview, "aria-label": tI18nComplete.raw('text306ef19c8ac3'), onClick: () => {
-                                        if (!previewUrl)
-                                            return;
-                                        track('app_opened_new_tab');
-                                        window.open(previewUrl, '_blank', 'noopener,noreferrer');
-                                    }, className: "size-7 shrink-0 active:scale-[0.96]", children: _jsx(ArrowSquareOutIcon, { className: "size-3.5" }) }) }), _jsx(PanelWidthButton, { isMobile: isMobile }), _jsx(CloseButton, { onClose: onClose })] })] }), _jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: [isLoading && hasPreview && !noApp && (_jsx(PreviewLoadingOverlay, { label: tI18nComplete.raw('textc4cf2b2ccb5d'), detail: slow ? previewSlowReason({ port }) : undefined, action: slow ? (_jsx(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: reload, children: tI18nComplete.raw('textbdc090ec61e3') })) : undefined })), (hasError || hostPreview.failed) && !noApp && (_jsx(ErrorState, { icon: WarningIcon, size: "sm", className: "bg-background absolute inset-0 z-10", title: tI18nComplete('textba601cdb484b', { value0: title }), 
+    return (_jsxs("div", { className: "bg-background flex h-full min-h-0 min-w-0 flex-col", children: [_jsx(AppPreviewToolbar, { previewUrl: previewUrl, onClose: onClose, displayValue: current, isLoading: isLoading, canGoBack: canGoBack, canGoForward: canGoForward, onBack: goBack, onForward: goForward, onReload: reload, onHome: () => navigateTo(''), onNavigate: navigateTo, suggestions: suggestions, inputRef: addressRef, trailing: 
+                // An app has no file to save and no text to put on a clipboard, so
+                // `Copy link` is the one copy action — the thing you can hand
+                // someone for a running port.
+                _jsx(ViewerActions, { copy: appCopy, shareContext: shareContext, shareInput: shareInput }) }), _jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: [isLoading && hasPreview && !noApp && (_jsx(PreviewLoadingOverlay, { label: tI18nComplete.raw('textc4cf2b2ccb5d'), detail: slow ? previewSlowReason({ port }) : undefined, action: slow ? (_jsx(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: reload, children: tI18nComplete.raw('textbdc090ec61e3') })) : undefined })), (hasError || hostPreview.failed) && !noApp && (_jsx(ErrorState, { icon: WarningIcon, size: "sm", className: "bg-background absolute inset-0 z-10", title: tI18nComplete('textba601cdb484b', { value0: title }), 
                         /* The single most common cause, said plainly: the agent started the
                            server a moment ago and it isn't listening yet. Only a SETTLED
                            `dead` verdict earns the stopped-workspace wording — see
@@ -274,6 +268,31 @@ export function AppPreview({ url, name, projectId, shareContext, onClose, onSend
                     // frame reads as "your app is broken".
                     _jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(Loading, { className: "size-4" }) }))] })] }));
 }
+/**
+ * The Browser card's toolbar: sidebar toggle, address bar, open in a new tab,
+ * width, close. Shared by the live preview and the booting card, so the two
+ * cannot drift.
+ */
+function AppPreviewToolbar({ previewUrl, onClose, ...address }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const isMobile = useIsMobile();
+    return (_jsxs("div", { className: "border-border flex shrink-0 items-center gap-0.5 border-b px-2 py-1", children: [_jsx(DetailSidebarToggle, {}), _jsx(SandboxAddressBar, { ...address, hasPreview: !!previewUrl, placeholder: tI18nComplete.raw('text878abd024f27') }), _jsxs(ButtonGroup, { className: "shrink-0", children: [_jsx(Hint, { label: tI18nComplete.raw('text306ef19c8ac3'), side: "bottom", children: _jsx(Button, { variant: "secondary", size: "icon", disabled: !previewUrl, "aria-label": tI18nComplete.raw('text306ef19c8ac3'), onClick: () => {
+                                if (!previewUrl)
+                                    return;
+                                track('app_opened_new_tab');
+                                window.open(previewUrl, '_blank', 'noopener,noreferrer');
+                            }, className: "size-7 shrink-0 active:scale-[0.96]", children: _jsx(ArrowSquareOutIcon, { className: "size-3.5" }) }) }), _jsx(PanelWidthButton, { isMobile: isMobile }), _jsx(CloseButton, { onClose: onClose })] })] }));
+}
+const noop = () => { };
+/**
+ * The Browser card while the session's computer boots: the real toolbar, every
+ * control that needs the computer disabled, over `children` (the boot status).
+ * Mounts nothing that reaches the sandbox: no proxy, no app list, no frame.
+ */
+export function AppPreviewBooting({ onClose, children, }) {
+    const addressRef = useRef(null);
+    return (_jsxs("div", { className: "bg-background flex h-full min-h-0 min-w-0 flex-col", children: [_jsx(AppPreviewToolbar, { onClose: onClose, displayValue: "", isLoading: false, canGoBack: false, canGoForward: false, onBack: noop, onForward: noop, onReload: noop, onHome: noop, onNavigate: noop, inputRef: addressRef, disabled: true }), _jsx("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: children })] }));
+}
 function SearchHint() {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     return (_jsx("div", { className: "flex flex-1 items-center justify-center", children: _jsxs("div", { className: "text-muted-foreground flex flex-col items-center gap-4 px-4 text-center", children: [_jsx(Globe, { className: "size-12 opacity-20" }), _jsx("p", { className: "text-sm", children: tI18nComplete.raw('text2f883b75cd2d') })] }) }));

package/dist/session/panel/easy/change-requests-card.d.ts

@@ -0,0 +1,7 @@
+import type { ChangeRequest } from '@kortix/sdk';
+export declare function ChangeRequestsCard({ requests, onOpen, onJump, jumping }: {
+    requests: ChangeRequest[];
+    onOpen: (crId: string) => void;
+    onJump: (crId: string) => Promise<void>;
+    jumping?: boolean;
+}): import("react").JSX.Element | null;

package/dist/session/panel/easy/change-requests-card.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ArrowBendUpLeftIcon } from '@phosphor-icons/react';
+import { useLocale, useTranslations } from '../../../i18n/index.js';
+import { relativeTime } from '../../../internal/lib/relative-time.js';
+import { ChangeRequestStatusBadge } from '../../../files/project/components/change-request-status-badge.js';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import Hint from '../../../primitives/hint.js';
+import { PanelCard } from './panel-card.js';
+export function ChangeRequestsCard({ requests, onOpen, onJump, jumping = false }) {
+    const t = useTranslations('sessionChangeRequests');
+    const locale = useLocale();
+    if (requests.length === 0)
+        return null;
+    return (_jsx(PanelCard, { title: t('title'), count: requests.length, isEmpty: false, defaultExpanded: true, fill: true, contentClassName: "min-h-0 overflow-y-auto px-2 py-2", children: _jsx("ul", { children: [...requests].sort((a, b) => Date.parse(b.created_at) - Date.parse(a.created_at)).map((cr) => (_jsxs("li", { className: "flex items-center gap-1", children: [_jsxs("button", { type: "button", "data-cr-id": cr.cr_id, onClick: () => onOpen(cr.cr_id), className: "hover:bg-accent flex min-w-0 flex-1 flex-col gap-1 rounded-sm px-2 py-2 text-left", children: [_jsxs("span", { className: "flex w-full min-w-0 items-baseline gap-2", children: [_jsxs("span", { className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: ["#", cr.number] }), _jsx("span", { className: "text-foreground truncate text-sm", children: cr.title })] }), _jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [cr.status === 'open' ? _jsx(Badge, { variant: "secondary", size: "sm", children: t('open') }) : _jsx(ChangeRequestStatusBadge, { cr: cr }), _jsx("time", { dateTime: cr.created_at, className: "text-muted-foreground text-xs", children: relativeTime(cr.created_at, locale) })] })] }), _jsx(Hint, { label: t('jump', { number: cr.number }), children: _jsx(Button, { variant: "ghost", size: "icon", disabled: jumping, "aria-label": t('jump', { number: cr.number }), onClick: () => onJump(cr.cr_id), children: _jsx(ArrowBendUpLeftIcon, { className: "size-3.5 shrink-0" }) }) })] }, cr.cr_id))) }) }));
+}

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

@@ -2,6 +2,7 @@
  * Pure logic for `EasyPanel`, split out from the client component purely so
  * it is unit-testable without a DOM.
  */
+import { parseArtifactUrl } from '../../../artifacts/frame-policy.js';
 import { isKortixAppUrl } from '../../../apps/kortix-app-url.js';
 import { parseLocalhostUrl } from '@kortix/sdk';
 /**
@@ -43,6 +44,10 @@ export function quickBrowserOutput(apps,
  * wrong page.
  */
 target) {
+    // An artifact's app link opens as the artifact (the browser cannot frame the Kortix app).
+    if (target?.url && parseArtifactUrl(target.url)) {
+        return { callID: 'quick-browser', name: target.title || 'Artifact', kind: 'artifact', url: target.url };
+    }
     return {
         callID: 'quick-browser',
         name: target?.title || 'Browser',
@@ -98,7 +103,7 @@ export function sandboxRecents(recents) {
  * - web pages (`.html/.htm` — same viewport assumption as apps).
  */
 export function isWideDeliverable(output) {
-    if (output.kind === 'presentation' || output.kind === 'app')
+    if (output.kind === 'presentation' || output.kind === 'app' || output.kind === 'artifact')
         return true;
     return /\.(pptx?|key|xlsx?|csv|tsv|html?)$/i.test(output.name);
 }
@@ -168,6 +173,7 @@ export function deriveIsRunning(stepsRunning, sessionBusy) {
  *  "Apps"). */
 const KIND_GROUP_LABEL = {
     app: 'Apps',
+    artifact: 'Artifacts',
     presentation: 'Presentations',
     image: 'Images',
     video: 'Videos',