@kortix/ui 0.14.9 → 0.14.10

package/dist/internal/lib/detect-os.js

@@ -0,0 +1,70 @@
+/**
+ * Platform detection for the /download page and the per-platform redirect
+ * routes.
+ *
+ * Detection runs on the SERVER, from the request's user-agent header, so the
+ * page paints the correct filled button (and, on a phone, the mobile card
+ * first) on first render. A client-side `useEffect` swap would let a visitor click the wrong
+ * installer during the flash — the exact failure this page exists to prevent.
+ *
+ * Architecture is deliberately NOT detected: macOS ships a single universal
+ * .dmg, and macOS user agents misreport arch anyway (they always claim Intel).
+ */
+/** Fixed row order. Detection never reorders rows; it only picks the filled button. */
+export const DESKTOP_ORDER = ['macos', 'windows', 'linux'];
+export const MOBILE_ORDER = ['ios', 'android'];
+const PLATFORM_ALIASES = {
+    mac: 'macos',
+    macos: 'macos',
+    osx: 'macos',
+    darwin: 'macos',
+    apple: 'macos',
+    win: 'windows',
+    windows: 'windows',
+    linux: 'linux',
+    ios: 'ios',
+    iphone: 'ios',
+    ipad: 'ios',
+    android: 'android',
+};
+/** Map an explicit `?platform=` value or `/download/<segment>` to a platform. */
+export function normalizePlatform(raw) {
+    return PLATFORM_ALIASES[(raw || '').toLowerCase()] ?? null;
+}
+/**
+ * Best-effort platform from a user-agent string.
+ *
+ * THE ORDER OF THESE CHECKS IS LOAD-BEARING. Two user agents carry another
+ * platform's token:
+ *   iPad     "Mozilla/5.0 (iPad; CPU OS 17_0 like Mac OS X)"  contains "mac"
+ *   Android  "Mozilla/5.0 (Linux; Android 14; Pixel 8)"       contains "linux"
+ * So iOS is tested before macOS, and Android before Linux. `detect-os.test.ts`
+ * pins both; if you reorder these lines, those tests fail.
+ *
+ * KNOWN LIMITATION: an iPad with "Request Desktop Website" enabled sends a UA
+ * byte-identical to a Mac's. No server can separate them — real detection needs
+ * `navigator.maxTouchPoints`, which is not in any request header. That visitor
+ * gets the Desktop card first; the Mobile card is still on the page, one tap
+ * away. Fixing it client-side would reintroduce the wrong-file-click window
+ * this module exists to close.
+ *
+ * Defaults to macOS: the largest desktop segment for this product, and every
+ * other platform stays one click away on the page.
+ */
+export function detectPlatform(userAgent) {
+    const ua = (userAgent || '').toLowerCase();
+    if (ua.includes('iphone') || ua.includes('ipad') || ua.includes('ipod'))
+        return 'ios';
+    if (ua.includes('android'))
+        return 'android';
+    if (ua.includes('windows'))
+        return 'windows';
+    if (ua.includes('mac') || ua.includes('darwin'))
+        return 'macos';
+    if (ua.includes('linux'))
+        return 'linux';
+    return 'macos';
+}
+export function isMobilePlatform(platform) {
+    return platform === 'ios' || platform === 'android';
+}

package/dist/internal/lib/use-project-feature-flags.js

@@ -39,9 +39,11 @@ export function useProjectFeatureFlags(projectId) {
     const agentRooms = useFeatureFlag(projectId, 'agent_rooms');
     const goals = useFeatureFlag(projectId, 'goals');
     const artifacts = useFeatureFlag(projectId, 'artifacts');
+    const artifactComments = useFeatureFlag(projectId, 'artifact_comments');
     const emailChannel = useFeatureFlag(projectId, 'email_channel');
     const workspaceVolume = useFeatureFlag(projectId, 'workspace_volume');
     const sessionGroups = useFeatureFlag(projectId, 'session_groups');
+    const chrome = useFeatureFlag(projectId, 'chrome');
     return {
         flags: {
             marketplace: marketplace.enabled,
@@ -62,11 +64,13 @@ export function useProjectFeatureFlags(projectId) {
             agent_rooms: agentRooms.enabled,
             goals: goals.enabled,
             artifacts: artifacts.enabled,
+            artifact_comments: artifactComments.enabled,
             email_channel: emailChannel.enabled,
             workspace_volume: workspaceVolume.enabled,
             session_groups: sessionGroups.enabled,
+            chrome: chrome.enabled,
         },
         // The trailing hook's loading state — keep this on the LAST hook above.
-        isLoading: sessionGroups.isLoading,
+        isLoading: chrome.isLoading,
     };
 }

package/dist/internal/stores/apps-modal-store.d.ts

@@ -0,0 +1,8 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+/** "Apps and extensions" dialog: any trigger (account menu, sidebar row, `?apps=1`) opens the one mounted in the project sidebar. */
+interface AppsModalState {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+export declare const useAppsModalStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AppsModalState>>;
+export {};

package/dist/internal/stores/apps-modal-store.js

@@ -0,0 +1,6 @@
+'use client';
+import { create } from 'zustand';
+export const useAppsModalStore = create((set) => ({
+    open: false,
+    setOpen: (open) => set({ open }),
+}));

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

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

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

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

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

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

package/dist/primitives/empty-state.js

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

package/dist/primitives/mermaid-renderer.js

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

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

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

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

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

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

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

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

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

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

@@ -11,6 +11,9 @@
  * Alone, it has no side panel: its "open in the panel" actions (Preview, file
  * chips, Terminal, Browser) open an overlay (`SessionPanelFallback`). Inside
  * `SessionWorkspace` they open in the side panel.
+ *
+ * A host that just created the session passes `firstPrompt`: the prompt shows
+ * at once, as the turn the transcript will draw, while the computer boots.
  */
 import type { UseSessionResult } from '@kortix/sdk/react';
 import '../tool/tools/register.js';
@@ -32,6 +35,15 @@ export interface SessionThreadProps {
         id: number;
         text: string;
     } | null;
+    /**
+     * The first prompt of a session this host just created, as sent. Drawn at
+     * once (the prompt and the agent's Thinking row) while the computer boots,
+     * then handed to the transcript without a jump. Pass it only for that
+     * fresh session: the transcript draws its prompts from then on.
+     */
+    firstPrompt?: string;
+    /** `compact`: tighter gutters for a narrow column (a side sheet). Default: the session page's. */
+    density?: 'default' | 'compact';
     className?: string;
 }
-export declare function SessionThread({ session, hideHeader, readOnly, composerPlaceholder, quote, className, }: SessionThreadProps): import("react").JSX.Element;
+export declare function SessionThread({ session, hideHeader, readOnly, composerPlaceholder, quote, firstPrompt, density, className, }: SessionThreadProps): import("react").JSX.Element;

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

@@ -1,20 +1,30 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect } from 'react';
 import { cn } from '../../lib/utils.js';
 import { ProjectScope } from '../../internal/project-scope.js';
+import { useFirstPromptPreviewStore } from '../composer/stores/session-composer-handoff-store.js';
 import { ProviderPoolDraftBoundary } from '../overrides/provider-pool-draft-context.js';
 import { SessionPanelFallback } from '../panel/panel-fallback.js';
 import { SessionChat } from './session-chat.js';
 import { SessionStartingLoader } from '../status/session-starting-loader.js';
+import { OptimisticTurn } from './optimistic-turn.js';
+import { SESSION_TRANSCRIPT_CLASS } from './session-transcript-class.js';
 import { ThreadBootRows } from './thread-boot-rows.js';
 import { TranscriptRowsContext } from './transcript-rows.js';
 import '../tool/tools/register.js';
-export function SessionThread({ session, hideHeader = false, readOnly = false, composerPlaceholder, quote, className, }) {
+export function SessionThread({ session, hideHeader = false, readOnly = false, composerPlaceholder, quote, firstPrompt, density = 'default', className, }) {
     const { projectId, sessionId, runtimeSessionId } = session;
     const rows = useContext(TranscriptRowsContext) !== null;
-    return (_jsx(ProjectScope, { projectId: projectId, sessionId: sessionId, children: _jsx(ProviderPoolDraftBoundary, { identity: `${projectId}/${sessionId}`, children: _jsxs("div", { "data-slot": "session-thread", className: cn('relative flex h-full min-h-0 flex-col', className), children: [runtimeSessionId ? (_jsx(SessionChat, { sessionId: runtimeSessionId, projectSessionId: sessionId, projectId: projectId, sessionState: session, hideHeader: hideHeader, readOnly: readOnly, composerPlaceholder: composerPlaceholder, hostQuote: quote }, runtimeSessionId)) : rows ? (
+    // The same stand-in the instant session shell hands `SessionChat`: it draws
+    // the prompt until its transcript has it, then forgets it.
+    const bootPrompt = useFirstPromptPreviewStore((state) => state.previewBySession[sessionId]?.text ?? null) ?? (firstPrompt?.trim() || null);
+    useEffect(() => {
+        if (firstPrompt?.trim())
+            useFirstPromptPreviewStore.getState().setFirstPromptPreview(sessionId, firstPrompt, []);
+    }, [sessionId, firstPrompt]);
+    return (_jsx(ProjectScope, { projectId: projectId, sessionId: sessionId, children: _jsx(ProviderPoolDraftBoundary, { identity: `${projectId}/${sessionId}`, children: _jsxs("div", { "data-slot": "session-thread", "data-density": density, className: cn('group/thread relative flex h-full min-h-0 flex-col', className), children: [runtimeSessionId ? (_jsx(SessionChat, { sessionId: runtimeSessionId, projectSessionId: sessionId, projectId: projectId, sessionState: session, hideHeader: hideHeader, readOnly: readOnly, composerPlaceholder: composerPlaceholder, hostQuote: quote }, runtimeSessionId)) : rows ? (
                     // A channel thread: its prompt, the agent's busy row and the reply
                     // box from the first frame, while the computer comes up.
-                    _jsx(ThreadBootRows, { projectId: projectId, sessionId: sessionId, composerPlaceholder: composerPlaceholder, readOnly: readOnly })) : (_jsx(SessionStartingLoader, { projectId: projectId, sessionId: sessionId })), _jsx(SessionPanelFallback, { projectId: projectId, projectSessionId: sessionId, runtimeSessionId: runtimeSessionId })] }) }) }));
+                    _jsx(ThreadBootRows, { projectId: projectId, sessionId: sessionId, composerPlaceholder: composerPlaceholder, readOnly: readOnly })) : bootPrompt ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "scrollbar-hide min-h-0 flex-1 overflow-y-auto", children: _jsx("div", { className: SESSION_TRANSCRIPT_CLASS, children: _jsx(OptimisticTurn, { text: bootPrompt, deferPreview: true, sessionId: sessionId }) }) }), _jsx("div", { className: "shrink-0", children: _jsx(SessionStartingLoader, { projectId: projectId, sessionId: sessionId }) })] })) : (_jsx(SessionStartingLoader, { projectId: projectId, sessionId: sessionId })), _jsx(SessionPanelFallback, { projectId: projectId, projectSessionId: sessionId, runtimeSessionId: runtimeSessionId })] }) }) }));
 }

package/dist/session/thread/session-transcript-class.d.ts

@@ -15,5 +15,9 @@
  * Its own module with no imports, so a surface that only needs the column (the
  * first chat on project home) does not pull `session-body.tsx`'s action panel
  * into its bundle. `session-body.tsx` re-exports it for the session surfaces.
+ *
+ * Inside a compact `SessionThread` (a narrow side column) the conversation's
+ * gutters and top inset tighten; the composer keeps its own. The gutters then
+ * match the composer's (`px-4`), so messages line up with the input card's edges.
  */
-export declare const SESSION_TRANSCRIPT_CLASS = "mx-auto w-full max-w-3xl min-w-0 px-7 pt-6";
+export declare const SESSION_TRANSCRIPT_CLASS = "mx-auto w-full max-w-3xl min-w-0 px-7 pt-6 group-data-[density=compact]/thread:px-4 group-data-[density=compact]/thread:pt-4";

package/dist/session/thread/session-transcript-class.js

@@ -15,5 +15,9 @@
  * Its own module with no imports, so a surface that only needs the column (the
  * first chat on project home) does not pull `session-body.tsx`'s action panel
  * into its bundle. `session-body.tsx` re-exports it for the session surfaces.
+ *
+ * Inside a compact `SessionThread` (a narrow side column) the conversation's
+ * gutters and top inset tighten; the composer keeps its own. The gutters then
+ * match the composer's (`px-4`), so messages line up with the input card's edges.
  */
-export const SESSION_TRANSCRIPT_CLASS = 'mx-auto w-full max-w-3xl min-w-0 px-7 pt-6';
+export const SESSION_TRANSCRIPT_CLASS = 'mx-auto w-full max-w-3xl min-w-0 px-7 pt-6 group-data-[density=compact]/thread:px-4 group-data-[density=compact]/thread:pt-4';

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

@@ -125,9 +125,10 @@ function ImageGenFrame({ image, seed, busy, model, fill, }) {
             useKortixComputerStore.getState().setIsExpanded(true);
         }
         : undefined;
-    return (_jsxs("div", { className: cn('group relative', fill && 'h-full'), children: [_jsx(ImageFrame, { aspectRatio: image.aspectRatio, fill: fill, maxHeight: fill ? undefined : IMAGE_MAX_HEIGHT, openLabel: image.prompt ? t('openFullScreenPrompt', { prompt: image.prompt }) : t('openFullScreen'), src: src, alt: image.prompt || t('generating'), pending: generating || (!src && !blobError), label: generating ? (busy) : blobError ? (_jsx(ImageUnavailable, { onRetry: retry })) : !src ? (_jsx(BusyLabel, { seed: seed, label: t('loading') })) : null, onOpen: openFullScreen, naturalRatio: naturalRatio, onNaturalSize: onNaturalSize }), src && openFullScreen ? (
-            // The one hint that the image opens full screen, on hover only; the whole frame is the button.
-            _jsx("span", { "data-image-gen-expand": "", "aria-hidden": "true", className: "bg-popover text-foreground pointer-events-none absolute top-1.5 right-1.5 flex size-6 items-center justify-center rounded-md opacity-0 shadow-xs transition-opacity duration-fast group-focus-within:opacity-100 group-hover:opacity-100", children: _jsx(ArrowsOutSimpleIcon, { className: "size-3.5" }) })) : null] }));
+    return (_jsx(ImageFrame, { className: "group", aspectRatio: image.aspectRatio, fill: fill, maxHeight: fill ? undefined : IMAGE_MAX_HEIGHT, openLabel: image.prompt ? t('openFullScreenPrompt', { prompt: image.prompt }) : t('openFullScreen'), src: src, alt: image.prompt || t('generating'), pending: generating || (!src && !blobError), label: generating ? (busy) : blobError ? (_jsx(ImageUnavailable, { onRetry: retry })) : !src ? (_jsx(BusyLabel, { seed: seed, label: t('loading') })) : null, onOpen: openFullScreen, naturalRatio: naturalRatio, onNaturalSize: onNaturalSize, children: src && openFullScreen ? (
+        // The one hint that the image opens full screen, on hover only; the whole frame is the button.
+        // A child of the frame: a tall image narrows the frame, and the hint stays on its corner.
+        _jsx("span", { "data-image-gen-expand": "", "aria-hidden": "true", className: "bg-popover text-foreground pointer-events-none absolute top-1.5 right-1.5 flex size-6 items-center justify-center rounded-md opacity-0 shadow-xs transition-opacity duration-fast group-focus-within:opacity-100 group-hover:opacity-100", children: _jsx(ArrowsOutSimpleIcon, { className: "size-3.5" }) })) : null }));
 }
 /**
  * The tallest a lone image or the bento may be (R33). The box narrows to

package/dist/session/turn/user-message.d.ts

@@ -29,13 +29,15 @@ export declare function ChannelOrigin({ info, platform }: {
 }): import("react").JSX.Element;
 /**
  * A message that arrived from a chat channel (Slack / Microsoft Teams /
- * Telegram): a source pill — mark, platform, sender — over the same bubble a
- * typed message gets. Every `@name` in the text (`@Kortix`, `@KortixDev`,
- * `@here`) is a `MentionChip`, the chip the composer draws, static because a
- * channel mention opens nothing here. Exported for `channel-message-card.test.tsx`.
+ * Telegram): a source pill — mark, platform, sender — over the files the
+ * sender sent (the strip a composer upload gets) and the same bubble a typed
+ * message gets. Every `@name` in the text (`@Kortix`, `@KortixDev`, `@here`)
+ * is a `MentionChip`, the chip the composer draws, static because a channel
+ * mention opens nothing here. Exported for `channel-message-card.test.tsx`.
  */
-export declare function ChannelMessage({ info, actions, }: {
+export declare function ChannelMessage({ info, attachments, actions, }: {
     info: ChannelMessageInfo;
+    attachments?: NormalizedAttachment[];
     actions?: React.ReactNode;
 }): import("react").JSX.Element;
 export interface NormalizedAttachment {

package/dist/session/turn/user-message.js

@@ -13,7 +13,7 @@ import { fetchSessionAttachment, isSessionAttachmentRef, } from '@kortix/sdk';
 /** Moved from session-chat.tsx (`UserMessageRow`) so the turn module owns the
  *  user-message card. Full-width card, no reference chips. */
 import { useTranslations } from '../../i18n/index.js';
-import { expandPastedContent, neutralizePastedTags, sanitizePromptUploadFilename, serializePromptWithPastes, splitPastedContent, } from '../../_vendor/kortix-shared.js';
+import { channelPromptTail, isChannelFileLabel, expandPastedContent, neutralizePastedTags, sanitizePromptUploadFilename, serializePromptWithPastes, splitPastedContent, } from '../../_vendor/kortix-shared.js';
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { PencilSimpleIcon, AlarmIcon, ChatsTeardropIcon, LightningIcon, } from '@phosphor-icons/react';
 import { CopyButton } from '../../markdown/copy-button.js';
@@ -99,15 +99,16 @@ export function ChannelOrigin({ info, platform }) {
 }
 /**
  * A message that arrived from a chat channel (Slack / Microsoft Teams /
- * Telegram): a source pill — mark, platform, sender — over the same bubble a
- * typed message gets. Every `@name` in the text (`@Kortix`, `@KortixDev`,
- * `@here`) is a `MentionChip`, the chip the composer draws, static because a
- * channel mention opens nothing here. Exported for `channel-message-card.test.tsx`.
+ * Telegram): a source pill — mark, platform, sender — over the files the
+ * sender sent (the strip a composer upload gets) and the same bubble a typed
+ * message gets. Every `@name` in the text (`@Kortix`, `@KortixDev`, `@here`)
+ * is a `MentionChip`, the chip the composer draws, static because a channel
+ * mention opens nothing here. Exported for `channel-message-card.test.tsx`.
  */
-export function ChannelMessage({ info, actions, }) {
+export function ChannelMessage({ info, attachments = [], actions, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const platform = channelPlatformLabel(info.platform, tI18nComplete);
-    return (_jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [_jsx(SourcePill, { mark: _jsx(ChannelBrandMark, { platform: info.platform, className: "size-3 shrink-0" }), source: platform, sourceColor: CHANNEL_BRAND_COLOR[info.platform], sender: info.userName, card: _jsx(ChannelOrigin, { info: info, platform: platform }) }), info.messageText && (_jsx("div", { className: cn(BUBBLE_SURFACE, 'max-w-[80%]'), children: _jsx("div", { className: BUBBLE_TEXT, children: buildMentionSegments({ text: info.messageText }).map((segment, i) => segment.type ? (_jsx(MentionChip, { kind: "user", label: segment.text.slice(1) }, i)) : (_jsx("span", { children: segment.text }, i))) }) })), actions] }));
+    return (_jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [_jsx(SourcePill, { mark: _jsx(ChannelBrandMark, { platform: info.platform, className: "size-3 shrink-0" }), source: platform, sourceColor: CHANNEL_BRAND_COLOR[info.platform], sender: info.userName, card: _jsx(ChannelOrigin, { info: info, platform: platform }) }), _jsx(MessageAttachments, { attachments: attachments }), info.messageText && !(attachments.length > 0 && isChannelFileLabel(info.messageText)) && (_jsx("div", { className: cn(BUBBLE_SURFACE, 'max-w-[80%]'), children: _jsx("div", { className: BUBBLE_TEXT, children: buildMentionSegments({ text: info.messageText }).map((segment, i) => segment.type ? (_jsx(MentionChip, { kind: "user", label: segment.text.slice(1) }, i)) : (_jsx("span", { children: segment.text }, i))) }) })), actions] }));
 }
 /**
  * A prompt the platform wrote — a reminder fire or a trigger fire — drawn the
@@ -900,6 +901,11 @@ export function UserMessage({ message, author, showAuthor, agentNames, commandIn
     // scaffolds these prompts with ids and turn instructions the person never
     // typed, so the card shows only the platform, the sender, and their words.
     const channelMessageInfo = useMemo(() => parseChannelMessage(rawText), [rawText]);
+    // Its files: the `<file>` tags Kortix wrote after the sender's text, and nothing else. A tag the sender
+    // typed is text; the image block pi records for a tag repeats it, and names no path when the sender typed one.
+    const channelAttachments = useMemo(() => channelMessageInfo
+        ? normalizeAttachments([], parseFileReferences(channelPromptTail(rawText, channelMessageInfo.platform)).files)
+        : [], [channelMessageInfo, rawText]);
     // Detect trigger_event in user message
     const triggerEventInfo = useMemo(() => parseTriggerEvent(rawText), [rawText]);
     // A reminder fire: platform-written `[REMINDER …]` header + the reminder text.
@@ -1061,7 +1067,7 @@ export function UserMessage({ message, author, showAuthor, agentNames, commandIn
     }
     // Channel messages (Slack / Microsoft Teams / Telegram): a branded card with the sender
     if (channelMessageInfo) {
-        return _jsx(ChannelMessage, { info: channelMessageInfo, actions: actions });
+        return _jsx(ChannelMessage, { info: channelMessageInfo, attachments: channelAttachments, actions: actions });
     }
     if (reminderInfo) {
         return _jsx(ReminderMessage, { info: reminderInfo, actions: actions });