@kortix/ui 0.14.8 → 0.14.10

package/dist/session/tool/shared/infrastructure-contexts.js

@@ -1,6 +1,6 @@
 'use client';
 import { createContext, useContext } from 'react';
-import { isEmptyShowPart } from '@kortix/sdk';
+import { isInvisibleActivityPart } from '@kortix/sdk';
 import { toolKind } from '@kortix/sdk';
 export const ToolRunningContext = createContext(false);
 /**
@@ -70,7 +70,35 @@ export const TurnLiveContext = createContext(false);
  * the turn ended on (KRTX-3021). Empty outside a settled turn.
  */
 export const RecoveredCallsContext = createContext(new Set());
+/**
+ * The images the turn's `image_gen` calls already drew (`imagePathsShownByImageGen`).
+ * A `show` of the same file in that turn does not draw it a second time (D5).
+ */
+export const ImageGenPathsContext = createContext(new Set());
+/**
+ * The sha256 of the images the turn's `image_gen` calls already drew
+ * (`imageDigestsShownByImageGen`): a `show` of the same bytes at another path
+ * (a Drive copy) is not drawn a second time either (R38).
+ */
+export const ImageGenDigestsContext = createContext(new Set());
+/**
+ * The runs of the turn's `image_gen` calls that draw as one grid
+ * (`sessionLogImageGenRuns`), by block id: the first call draws the run, the
+ * others nothing (R38).
+ */
+export const ImageGenRunsContext = createContext(new Map());
+/**
+ * True inside a transcript turn's steps, where `TurnLiveContext` is a fact
+ * about the owning turn rather than its `false` default. The image card reads
+ * both to tell a stopped generation from one still running.
+ */
+export const InTranscriptTurnContext = createContext(false);
 export const ToolDurationContext = createContext(undefined);
+/**
+ * True in a read-only session view (the sub-session modal): a tool card shows
+ * what happened and offers no fix (connect a model, reconnect ChatGPT).
+ */
+export const ReadOnlySessionContext = createContext(false);
 // Background memory plumbing (searches/gets and raw memory/ reads) stays
 // out of the Actions panel. The memory editor tool itself ('memory'/'oc-memory')
 // is NOT listed here — it renders in the panel so clicking its chat row works.
@@ -91,9 +119,9 @@ const MEMORY_LOOKUP_TOOL_NAMES = new Set([
 export function shouldShowToolPartInActionsPanel(call) {
     if (MEMORY_LOOKUP_TOOL_NAMES.has(call.name))
         return false;
-    // A `show` that handed nothing over renders an empty card, so its stepper row
+    // A `show` that handed nothing over, or a read of an empty memory folder,
     // would open onto blank space. Same verdict the chat transcript reaches.
-    if (isEmptyShowPart(call))
+    if (isInvisibleActivityPart(call))
         return false;
     // A skill row opens its SKILL.md in the detail panel, so it has no Actions
     // row of its own. (It used to raise a side sheet; that sheet is gone.)

package/dist/session/tool/tool-part-renderer.d.ts

@@ -16,9 +16,6 @@ interface ToolPartRendererProps {
     defaultOpen?: boolean;
     disableNavigation?: boolean;
 }
-declare function ToolPartRendererImpl({ call: given, sessionId, permission, question, onPermissionReply, onQuestionReply, onQuestionReject, defaultOpen, disableNavigation, }: ToolPartRendererProps & {
-    sessionId?: string;
-}): import("react").JSX.Element | null;
 /**
  * The boundary that stops a settled tool row re-rendering with the stream.
  *
@@ -35,5 +32,9 @@ declare function ToolPartRendererImpl({ call: given, sessionId, permission, ques
  * `memo` does not block context propagation, so `ToolSurfaceContext`,
  * `ToolActivateContext` and `ToolOutcomeContext` still reach the tool.
  */
-export declare const ToolPartRenderer: import("react").MemoExoticComponent<typeof ToolPartRendererImpl>;
+/** A block that is not a tool call (a harness block a host mistyped) renders nothing: the row must never throw. */
+declare function ToolPartRendererGuard(props: ToolPartRendererProps & {
+    sessionId?: string;
+}): import("react").JSX.Element | null;
+export declare const ToolPartRenderer: import("react").MemoExoticComponent<typeof ToolPartRendererGuard>;
 export {};

package/dist/session/tool/tool-part-renderer.js

@@ -79,8 +79,9 @@ function ToolPartRendererImpl({ call: given, sessionId, permission, question, on
     const errorStr = partError(call);
     const childBearingTaskError = errorStr !== undefined && toolKind(call.name) === 'task' && Boolean(getChildSessionId(call));
     // A failed codemode script keeps its partial output and the calls it made before
-    // the failure: its own row draws them, with the error.
-    const drawsOwnError = childBearingTaskError || call.name === 'codemode';
+    // the failure: its own row draws them, with the error. The image card draws its
+    // failure (with the Connect ChatGPT action) and a stop in place of the image.
+    const drawsOwnError = childBearingTaskError || call.name === 'codemode' || call.name === 'image_gen';
     if (errorStr !== undefined && !drawsOwnError) {
         const { display, server } = (() => {
             const slashIdx = call.name.lastIndexOf('/');
@@ -146,5 +147,9 @@ function ToolPartRendererImpl({ call: given, sessionId, permission, question, on
  * `memo` does not block context propagation, so `ToolSurfaceContext`,
  * `ToolActivateContext` and `ToolOutcomeContext` still reach the tool.
  */
-export const ToolPartRenderer = memo(ToolPartRendererImpl);
+/** A block that is not a tool call (a harness block a host mistyped) renders nothing: the row must never throw. */
+function ToolPartRendererGuard(props) {
+    return props.call?.type === 'tool_call' ? _jsx(ToolPartRendererImpl, { ...props }) : null;
+}
+export const ToolPartRenderer = memo(ToolPartRendererGuard);
 ToolPartRenderer.displayName = 'ToolPartRenderer';

package/dist/session/tool/tools/bash-tool.js

@@ -140,7 +140,7 @@ export function dedentCommand(raw) {
  * The exit-code strip keeps its shorter 8px vertical inset: it is metadata
  * about the card, not a third pane of content.
  */
-function CommandBlock({ command, output, richOutput, exitCode, recovered = false, settled, }) {
+function CommandBlock({ command, output, richOutput, exitCode, settled, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const hasOutput = Boolean(richOutput || output);
     const failed = typeof exitCode === 'number' && exitCode !== 0;
@@ -159,9 +159,10 @@ function CommandBlock({ command, output, richOutput, exitCode, recovered = false
     // `overflow-hidden` clips the command pane's tint to the rounded frame;
     // without it the wash pokes square corners past `rounded-md`.
     _jsxs("div", { className: cn('relative overflow-hidden', frame), children: [_jsx("div", { "data-scrollable": true, className: cn('max-h-64 overflow-auto', frame && 'bg-muted/40'), children: _jsx("pre", { className: cn('text-foreground font-mono text-xs leading-relaxed wrap-break-word whitespace-pre-wrap [&_code]:border-none [&_code]:bg-transparent [&_code]:p-0 [&_code]:text-xs [&_code]:leading-relaxed [&_code]:whitespace-pre-wrap [&_pre]:whitespace-pre-wrap [&_span]:border-none [&_span]:outline-none', paneInset, 'pr-11'), children: _jsx(HighlightedCode, { code: command, language: "bash", children: command }) }) }), _jsx("div", { className: "absolute top-2 right-2", children: _jsx(CopyButton, { code: command, className: "text-muted-foreground hover:text-foreground" }) }), (hasOutput || settled) && (_jsx("div", { className: "border-border/60 border-t", children: richOutput ? (richOutput) : output ? (_jsxs("div", { className: "relative", children: [_jsx("div", { "data-scrollable": true, className: "max-h-80 overflow-auto", children: _jsx("div", { className: cn('text-muted-foreground font-mono text-xs leading-relaxed wrap-break-word whitespace-pre-wrap', paneInset, 'pr-11'), children: output }) }), _jsx("div", { className: "absolute top-2 right-2", children: _jsx(CopyButton, { code: output, className: "text-muted-foreground hover:text-foreground" }) })] })) : (_jsx("p", { className: cn('text-muted-foreground', paneInset, 'text-xs leading-relaxed'), children: tI18nComplete.raw('textf7e31759b202') })) })), failed && (_jsxs("div", { className: cn(
-                // `kortix-red`, matching the trigger's "Command failed": the strip
-                // is the card's own copy of the verdict, so the two agree in tone.
-                'border-border/60 border-t py-2 font-mono text-xs tabular-nums', recovered ? 'text-muted-foreground' : 'text-kortix-red', 
+                // Muted ink, like the trigger's "Command failed": a failed command
+                // is ordinary agent work (it reads the error and tries again), so
+                // the words carry the verdict and no color raises an alarm.
+                'border-border/60 border-t py-2 font-mono text-xs tabular-nums text-muted-foreground', 
                 // Metadata about the card, not a third pane: it keeps the shorter
                 // 8px vertical inset, and only the horizontal one is the surface's
                 // to supply.
@@ -198,7 +199,7 @@ function BashTrigger({ title, failed, command, commandPreview, extraLines, live,
     }
     return (_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: _jsxs("span", { className: "flex min-w-0 shrink-0 items-center gap-2 text-xs", 
             // Redundant once the card spells the command out below.
-            title: open ? undefined : command, children: [_jsx("span", { className: cn('min-w-0 truncate', failed ? 'text-kortix-red' : 'text-foreground'), children: title }), !open && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground min-w-0 truncate font-mono", children: commandPreview }), extraLines > 0 && (_jsxs("span", { className: "text-muted-foreground shrink-0 tabular-nums", children: ["+", extraLines] }))] }))] }) }));
+            title: open ? undefined : command, children: [_jsx("span", { className: "min-w-0 truncate text-foreground", children: title }), !open && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground min-w-0 truncate font-mono", children: commandPreview }), extraLines > 0 && (_jsxs("span", { className: "text-muted-foreground shrink-0 tabular-nums", children: ["+", extraLines] }))] }))] }) }));
 }
 export function BashTool({ call, defaultOpen, forceOpen, locked }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
@@ -278,6 +279,6 @@ export function BashTool({ call, defaultOpen, forceOpen, locked }) {
             // `CommandBlock` is a bordered card like the shared three, so it takes
             // the same gate: the seam belongs to the inline row it hangs under, not
             // to the panel body that already supplies `px-3 py-3`.
-            _jsx("div", { className: cn(indent && 'mt-1.5', indent), children: _jsx(CommandBlock, { command: command, output: plainOutput, richOutput: richOutput, exitCode: exitCode, recovered: recovered, settled: status === 'completed' || status === 'error' }) }))] }));
+            _jsx("div", { className: cn(indent && 'mt-1.5', indent), children: _jsx(CommandBlock, { command: command, output: plainOutput, richOutput: richOutput, exitCode: exitCode, settled: status === 'completed' || status === 'error' }) }))] }));
 }
 ToolRegistry.register('bash', BashTool);

package/dist/session/tool/tools/channel-send-card.d.ts

@@ -1,8 +1,7 @@
-import { type ChannelPlatform } from '../../turn/channel-message.js';
 import { useTranslations } from '../../../i18n/index.js';
 import { type ChannelSend } from './channel-send.js';
 /** "Replied in Microsoft Teams" — the row title for a channel send. */
-export declare function channelSendTitle(platform: ChannelPlatform, tI18nComplete: ReturnType<typeof useTranslations>): string;
+export declare function channelSendTitle(platform: ChannelSend['platform'], tI18nComplete: ReturnType<typeof useTranslations>): string;
 /**
  * The reply as the person in the channel saw it: a left-anchored card with the
  * platform badge, the text as the channel shows it, and the attachment name

package/dist/session/tool/tools/channel-send.d.ts

@@ -13,7 +13,8 @@
  */
 import type { ChannelPlatform } from '../../turn/channel-message.js';
 export interface ChannelSend {
-    platform: ChannelPlatform;
+    /** A sandbox channel CLI: there is none for email. */
+    platform: Exclude<ChannelPlatform, 'Email'>;
     /** The message text, or null for a bare file send. */
     text: string | null;
     /** Basename of a `--file` attachment, when one was sent. */

package/dist/session/tool/tools/codemode-tool.js

@@ -68,7 +68,7 @@ function CallMark({ status }) {
     if (status === 'ok')
         return _jsx(CheckIcon, { className: "text-kortix-green size-3 shrink-0" });
     if (status === 'error')
-        return _jsx(WarningIcon, { weight: "fill", className: "text-kortix-red size-3 shrink-0" });
+        return _jsx(WarningIcon, { weight: "fill", className: "text-muted-foreground size-3 shrink-0" });
     if (status === 'refused')
         return _jsx(ProhibitIcon, { weight: "fill", className: "text-kortix-orange size-3 shrink-0" });
     return _jsx(MinusIcon, { className: "text-muted-foreground size-3 shrink-0" });

package/dist/session/tool/tools/connector-tools.js

@@ -122,7 +122,7 @@ export function ConnectorCallTool({ call, defaultOpen, forceOpen, locked }) {
                 ...(parsed?.risk ? [String(parsed.risk)] : []),
                 ...(outcome ? [outcome.label] : []),
             ].filter(Boolean),
-        }, defaultOpen: defaultOpen, forceOpen: forceOpen, locked: locked, children: _jsxs(_Fragment, { children: [_jsxs(ToolResultCard, { bodyClassName: "space-y-2.5 p-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "text-foreground font-mono", children: ref }), _jsx(ConnectorRiskBadge, { risk: parsed?.risk }), outcome && (_jsx("span", { className: cn('ml-auto text-[10px] font-semibold uppercase', outcome.tint), children: outcome.label }))] }), Object.keys(args).length > 0 && (_jsx(FoldedSection, { label: tI18nComplete.raw('text59f03d642b41'), children: _jsx(ConnectorJson, { value: args }) })), !outputIsError && parsed ? (_jsx(ToolSection, { label: tI18nComplete.raw('text9061383b8e22'), children: parsed.reason && !ok ? (_jsx("p", { className: "text-destructive font-mono text-xs", children: String(parsed.reason) })) : (_jsx(ConnectorJson, { value: 'data' in parsed ? parsed.data : parsed })) })) : output ? null : (_jsx(ToolEmptyState, { message: isStreaming
+        }, defaultOpen: defaultOpen, forceOpen: forceOpen, locked: locked, children: _jsxs(_Fragment, { children: [_jsxs(ToolResultCard, { bodyClassName: "space-y-2.5 p-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "text-foreground font-mono", children: ref }), _jsx(ConnectorRiskBadge, { risk: parsed?.risk }), outcome && (_jsx("span", { className: cn('ml-auto text-[10px] font-semibold uppercase', outcome.tint), children: outcome.label }))] }), Object.keys(args).length > 0 && (_jsx(FoldedSection, { label: tI18nComplete.raw('text59f03d642b41'), children: _jsx(ConnectorJson, { value: args }) })), !outputIsError && parsed ? (_jsx(ToolSection, { label: tI18nComplete.raw('text9061383b8e22'), children: parsed.reason && !ok ? (_jsx("p", { className: "text-muted-foreground font-mono text-xs", children: String(parsed.reason) })) : (_jsx(ConnectorJson, { value: 'data' in parsed ? parsed.data : parsed })) })) : output ? null : (_jsx(ToolEmptyState, { message: isStreaming
                                 ? tI18nComplete.raw('text46c541363b02')
                                 : tI18nComplete.raw('text752edcfbfb98') }))] }), (outputIsError || (!parsed && output)) && (_jsx(ToolOutputFallback, { output: output, isStreaming: isStreaming, toolName: "call" }))] }) }));
 }

package/dist/session/tool/tools/image-gen-tool.d.ts

@@ -1,2 +1,2 @@
 import type { ToolProps } from '../shared/types.js';
-export declare function ImageGenTool({ call, defaultOpen, forceOpen, locked }: ToolProps): import("react").JSX.Element;
+export declare function ImageGenTool({ call }: ToolProps): import("react").JSX.Element;

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

@@ -1,61 +1,249 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SessionDotMatrix } from '../../../primitives/dot-matrix/session-dot-matrix.js';
 import { TextShimmer } from '../../../primitives/text-shimmer.js';
-import { useFileContent } from '../../../files/runtime/hooks/use-file-content.js';
-import { parseImageOutput } from '../../media/image-output-path.js';
-import { BasicTool, isLocalSandboxFilePath, partInput, partOutput, ToolOutputFallback, } from '../shared/infrastructure.js';
+import { useSharedImage } from '../../../files/runtime/hooks/use-shared-image.js';
+import { useFilePreviewStore } from '../../../internal/stores/file-preview-store.js';
+import { ImageFrame, ImageUnavailable } from '../../../files/renderers/image-frame.js';
+import { Button } from '../../../primitives/button.js';
+import { ChatGptConnectionSlot } from '../../models/chatgpt-connection-button.js';
+import { useModelConnectionGate } from '../../models/use-model-connection-gate.js';
+import { sessionPersonalUser } from '../../overrides/provider-pool-draft.js';
+import { useSessionIds } from '../../../providers/session-ids.js';
+import { useUiViewerId } from '../../../providers/ui-provider.js';
+import { ImageGenRunsContext, InTranscriptTurnContext, isLocalSandboxFilePath, ReadOnlySessionContext, TurnLiveContext, useToolNavigation, } from '../shared/infrastructure.js';
 import { ToolRegistry } from '../shared/registry.js';
-import { ToolResultCard } from '../shared/result-card.js';
-import { isSandboxNotReadyError } from '@kortix/sdk';
-import { ImageIcon } from '@phosphor-icons/react';
-import { useTranslations } from '../../../i18n/index.js';
-import { useEffect, useMemo, useState } from 'react';
-const TITLE_BY_ACTION = {
-    generate: 'Generate Image',
-    edit: 'Edit Image',
-    upscale: 'Upscale Image',
-    remove_bg: 'Remove Background',
-};
-export function ImageGenTool({ call, defaultOpen, forceOpen, locked }) {
-    const tHardcodedUi = useTranslations('hardcodedUi');
-    const input = partInput(call);
-    const output = partOutput(call);
-    const prompt = input.prompt;
-    const action = input.action;
-    const { imagePath, directUrl } = useMemo(() => parseImageOutput(output), [output]);
-    const isLocalPath = imagePath ? isLocalSandboxFilePath(imagePath) : false;
-    const fileContentPath = useMemo(() => {
-        if (!isLocalPath || !imagePath || directUrl)
-            return null;
-        return imagePath.replace(/^\/workspace\//, '');
-    }, [isLocalPath, imagePath, directUrl]);
-    const { data: fileContentData, isLoading: isQueryLoading, error: fileContentError, } = useFileContent(fileContentPath, {
-        enabled: !!fileContentPath,
-    });
-    // A readiness 503 (parked/booting sandbox) counts as loading: useFileContent
-    // keeps polling while it lasts, so the image resolves once the box is up.
-    const isImageLoading = isQueryLoading || isSandboxNotReadyError(fileContentError);
-    const [imageUrl, setImageUrl] = useState(null);
+import { useKortixComputerStore } from '../../../internal/stores/kortix-computer-store.js';
+import { cn } from '../../../lib/utils.js';
+import { useLocale, useTranslations } from '../../../i18n/index.js';
+import { formatImageGenElapsed, imageGenGrid, imageGenRetryDelay, imageGenView, sessionLogOpenCall, } from '@kortix/sdk';
+import { useProjectSession } from '@kortix/sdk/react';
+import { ArrowsOutSimpleIcon } from '@phosphor-icons/react';
+import { useContext, useEffect, useMemo, useState } from 'react';
+/** The one busy signal over the flat frame. Elapsed time counts from the call's start, so a reload keeps it. */
+function BusyLabel({ seed, label, startedAt }) {
+    const [mountedAt] = useState(() => Date.now());
+    const [now, setNow] = useState(() => Date.now());
+    const timed = startedAt !== undefined;
     useEffect(() => {
-        if (!(fileContentData?.encoding === 'base64' && fileContentData?.content)) {
-            setImageUrl(null);
+        if (!timed)
             return;
+        const id = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(id);
+    }, [timed]);
+    return (_jsxs("span", { className: "text-muted-foreground flex flex-wrap items-center justify-center gap-2 text-xs", children: [_jsx(SessionDotMatrix, { sessionId: seed, size: 14, className: "shrink-0" }), _jsx(TextShimmer, { duration: 1, spread: 2, className: "text-xs", children: label }), timed ? _jsx("span", { className: "tabular-nums", children: formatImageGenElapsed(now - (startedAt ?? mountedAt)) }) : null] }));
+}
+/** "Try again in 2 hours." in the viewer's language. */
+function useRetryLine(seconds) {
+    const t = useTranslations('imageGen');
+    const locale = useLocale();
+    if (seconds === undefined)
+        return null;
+    const { value, unit } = imageGenRetryDelay(seconds);
+    // The Serbian catalog is Latin; Intl's `sr` is Cyrillic.
+    const when = new Intl.RelativeTimeFormat(locale === 'sr' ? 'sr-Latn' : locale, { numeric: 'always' }).format(value, unit);
+    return t('retry', { when });
+}
+/** Stable empty list, as `ModelConnectionBar` passes: the card needs only the routing. */
+const NO_MODELS = [];
+/**
+ * Opens the project's model settings on Providers: the model picker's connect
+ * action (`useModelConnectionGate`). Shown only to a viewer who can change the
+ * project's models (`project.model.write`), in a session private to them;
+ * hidden outside a project or without the host's provider modal.
+ */
+function ConnectModelAction() {
+    const t = useTranslations('sessionUi.modelGate');
+    const { canConnectProvider, canWriteProviders, openConnectProvider, modal } = useModelConnectionGate(NO_MODELS);
+    const { projectId, sessionId } = useSessionIds();
+    const viewerId = useUiViewerId();
+    const session = useProjectSession(projectId ?? '', sessionId ?? '', { enabled: !!projectId && !!sessionId });
+    const ownSession = !!viewerId && sessionPersonalUser(session.data) === viewerId;
+    if (!canConnectProvider || !canWriteProviders || !ownSession)
+        return null;
+    return (_jsxs(_Fragment, { children: [modal, _jsx(Button, { size: "sm", className: "mt-1 active:scale-[0.96]", onClick: () => openConnectProvider('providers'), children: t('connectModel') })] }));
+}
+/**
+ * The fix for a failure a connection can repair, as the session error banner
+ * routes it: the member's own ChatGPT login (`ChatGptConnectionSlot`, which
+ * applies `chatGptActionApplies`) when ChatGPT (`openai-codex`) is the provider
+ * that failed with `provider_not_connected` or `provider_reauth_required`; the
+ * project's model settings for any other provider and for
+ * `image_model_unavailable` (R37). None in a read-only view.
+ */
+function ConnectAction({ code, provider }) {
+    const readOnly = useContext(ReadOnlySessionContext);
+    if (readOnly)
+        return null;
+    if (provider === 'openai-codex' && code === 'provider_not_connected')
+        return _jsx(ChatGptConnectionSlot, { action: "connect", className: "mt-1" });
+    if (provider === 'openai-codex' && code === 'provider_reauth_required')
+        return _jsx(ChatGptConnectionSlot, { action: "reconnect", className: "mt-1" });
+    return _jsx(ConnectModelAction, {});
+}
+/** A failure in a quiet plate: the message, the suggestion, the retry wait and `action`. No error reads "Stopped". */
+function FailureNote({ error, action, fill = false }) {
+    const t = useTranslations('imageGen');
+    const retryLine = useRetryLine(error?.retryAfterSeconds);
+    return (_jsx("div", { className: cn('bg-muted flex flex-col items-start gap-1 rounded-md px-3 py-2.5 text-xs', 
+        // In a tile: the slot's box, scrolling a long message inside it.
+        fill && 'h-full overflow-y-auto'), children: error ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-foreground", children: error.message || t('failed') }), error.suggestion ? _jsx("span", { className: "text-muted-foreground", children: error.suggestion }) : null, retryLine ? _jsx("span", { className: "text-muted-foreground", children: retryLine }) : null, action] })) : (_jsx("span", { className: "text-muted-foreground", children: t('stopped') })) }));
+}
+/**
+ * One image, from its generating frame to the file. `busy` is what the frame
+ * shows while it generates (the busy line, or the glyph alone in a tile); a
+ * frame whose file is still on the way says "Loading image". `fill`: a tile
+ * of the bento, which fills its slot and crops the image (`object-cover`).
+ * The frame shows no prompt and no toolbar: the whole frame opens the image
+ * full screen, uncropped, with its prompt and `model` under it.
+ */
+function ImageGenFrame({ image, seed, busy, model, fill, }) {
+    const t = useTranslations('imageGen');
+    const { enabled: navigationEnabled } = useToolNavigation();
+    const filePath = image.imagePath && isLocalSandboxFilePath(image.imagePath) ? image.imagePath : null;
+    // The page's shared image store: the viewer and a `show` of the same bytes draw this URL too (R38).
+    // A sandbox still starting (a waking 503, a runtime URL not pinned yet) is a
+    // wait, not a failure: the store reports it as loading and the read keeps
+    // polling, so the image lands once the box is up.
+    const { url: blobUrl, error: blobError, retry, naturalRatio, onNaturalSize } = useSharedImage(filePath, image.sha256);
+    if (image.phase === 'failed' || image.phase === 'stopped')
+        return _jsx(FailureNote, { error: image.error, fill: fill });
+    if (image.imagePath && !filePath && !image.directUrl) {
+        // A path the file API cannot read: name it, as the old card did, instead of loading forever.
+        return (_jsx("div", { className: cn('bg-muted text-muted-foreground rounded-md px-3 py-2.5 font-mono text-xs break-all', fill && 'h-full overflow-y-auto'), children: image.imagePath }));
+    }
+    const generating = image.phase === 'generating';
+    const src = generating ? null : (image.directUrl ?? blobUrl);
+    const caption = image.prompt
+        ? { text: image.prompt, model, ...(image.sha256 && { sha256: image.sha256 }) }
+        : undefined;
+    const openFullScreen = filePath && navigationEnabled
+        ? () => {
+            useFilePreviewStore.getState().openPreview(filePath, undefined, caption);
+            // Expand after the open, as the file actions' Full screen does: the
+            // detail's own open resets the split, and `isExpanded` outranks it.
+            useKortixComputerStore.getState().setIsExpanded(true);
         }
-        const binary = atob(fileContentData.content);
-        const bytes = new Uint8Array(binary.length);
-        for (let i = 0; i < binary.length; i++)
-            bytes[i] = binary.charCodeAt(i);
-        const blob = new Blob([bytes], {
-            type: fileContentData.mimeType || 'image/webp',
-        });
-        const url = URL.createObjectURL(blob);
-        setImageUrl(url);
-        return () => URL.revokeObjectURL(url);
-    }, [fileContentData]);
-    const displayImageSrc = directUrl || imageUrl || '';
-    return (_jsx(BasicTool, { icon: _jsx(ImageIcon, { className: "size-3.5 shrink-0" }), trigger: {
-            title: TITLE_BY_ACTION[action ?? ''] || tHardcodedUi.raw('i18nComplete.text0753bd774f1b'),
-            subtitle: prompt?.slice(0, 60),
-        }, defaultOpen: defaultOpen, forceOpen: forceOpen, locked: locked, children: imagePath || directUrl ? (_jsx(ToolResultCard, { bodyClassName: "p-1", children: displayImageSrc ? (_jsx("img", { src: displayImageSrc, alt: String(prompt || tHardcodedUi.raw('i18nComplete.textdf37e04fda71')), className: "max-h-64 rounded-sm object-contain" })) : isImageLoading ? (_jsx("div", { className: "px-2 py-1.5 text-xs", children: _jsx(TextShimmer, { duration: 1, spread: 2, className: "text-xs", children: tHardcodedUi.raw('componentsSessionToolRenderers.line4414JsxTextLoadingImagePreview') }) })) : (_jsx("div", { className: "text-muted-foreground px-2 py-1.5 font-mono text-xs break-all", children: imagePath })) })) : output ? (_jsx(ToolOutputFallback, { output: output, toolName: "image_gen" })) : null }));
+        : undefined;
+    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
+ * keep its ratio, so it never crops more and never letterboxes.
+ */
+const IMAGE_MAX_HEIGHT = '60vh';
+/** `'3 / 2'` → `1.5`; anything unreadable → `1`. */
+function ratioValue(ratio) {
+    const [w, h] = ratio.split('/').map((part) => Number(part.trim()));
+    return w && h ? w / h : 1;
+}
+/**
+ * The bento: several images fill one rectangle, the width of the message up
+ * to `IMAGE_MAX_HEIGHT` tall, its ratio fixed from the requested one, so
+ * nothing moves when they land.
+ * Tile i keeps slot i. Every tile has the requested ratio `r`:
+ * - 2: side by side, one row → the rectangle is `2r`;
+ * - 3: tile 0 takes 2/3 of the width and both rows, tiles 1 and 2 stack on
+ *   the right third → `1.5r`;
+ * - 4: 2×2 → `r`.
+ */
+const BENTO = {
+    // Explicit rows: each is minmax(0, 1fr), so a loaded image never stretches one.
+    2: { grid: 'grid-cols-2 grid-rows-1', scale: 2 },
+    3: { grid: 'grid-cols-3 grid-rows-2', scale: 1.5, first: 'col-span-2 row-span-2' },
+    4: { grid: 'grid-cols-2 grid-rows-2', scale: 1 },
+};
+/** `min(100%, …)`: the widest a rectangle of ratio `rect` may be under the height cap. */
+const cappedWidth = (rect) => `min(100%, calc(${IMAGE_MAX_HEIGHT} * ${rect}))`;
+/**
+ * Five or more images (R38): ONE grid of six columns whose rows are the
+ * bento patterns (`imageGenGrid().rows`: 5 = 3+2, 8 = 4+4, …). Every tile sits
+ * in the same grid, placed by line numbers, so a tile is never re-parented.
+ *
+ * The grid is as wide as its tallest row allows under the cap (`width`), and
+ * each row is exactly `width / rects[k]` tall (`rects[k]` = its tile ratio ×
+ * the pattern's scale), so no row passes `IMAGE_MAX_HEIGHT`. Track heights are
+ * lengths, read from the figure's inline size (`cqw`): the grid is the sum of
+ * its rows and the gaps between them, with no aspect ratio of its own. (Flex
+ * rows under an aspect ratio left an empty band whenever their `fr` factors
+ * summed below 1, e.g. 16:9 tiles.) A two-track row subtracts the gap between
+ * its tracks, so a large tile spanning both is the row's height.
+ */
+function gridPlacement(rows, rects) {
+    const width = `min(100cqw, ${IMAGE_MAX_HEIGHT} * ${Math.min(...rects)})`;
+    const tracks = [];
+    const places = [];
+    rows.forEach((count, row) => {
+        const track = tracks.length + 1;
+        const height = `${width} / ${rects[row]}`;
+        if (count === 2)
+            tracks.push(`calc(${height})`);
+        else
+            tracks.push(`calc((${height} - var(--spacing)) / 2)`, `calc((${height} - var(--spacing)) / 2)`);
+        for (let i = 0; i < count; i++) {
+            if (count === 2)
+                places.push({ gridColumn: `${1 + 3 * i} / span 3`, gridRow: `${track}` });
+            else if (count === 4)
+                places.push({ gridColumn: `${1 + 3 * (i % 2)} / span 3`, gridRow: `${track + Math.floor(i / 2)}` });
+            else if (i === 0)
+                places.push({ gridColumn: '1 / span 4', gridRow: `${track} / span 2` });
+            else
+                places.push({ gridColumn: '5 / span 2', gridRow: `${track + i - 1}` });
+        }
+    });
+    return { style: { gridTemplateRows: tracks.join(' '), width }, places };
+}
+export function ImageGenTool({ call }) {
+    const t = useTranslations('imageGen');
+    // In a transcript turn, the turn says whether an open call still runs.
+    const live = useContext(TurnLiveContext);
+    const inTurn = useContext(InTranscriptTurnContext);
+    // Consecutive image_gen calls of a turn draw as one grid, here, at the first (R38).
+    const run = useContext(ImageGenRunsContext).get(call.id);
+    const views = useMemo(() => (run ? run.map(sessionLogOpenCall) : [call]).map((one) => imageGenView(one, inTurn ? live : undefined)), [run, call, inTurn, live]);
+    const grid = useMemo(() => imageGenGrid(views), [views]);
+    const view = views[0];
+    const solo = views.length === 1 && view.images.length === 1;
+    // One fix per card, even when several frames failed for the same reason.
+    const repairable = views.find((one) => one.error?.connectModel)?.error ??
+        views.flatMap((one) => one.images).find((image) => image.error?.connectModel)?.error;
+    const action = repairable ? _jsx(ConnectAction, { code: repairable.code, provider: repairable.provider }) : null;
+    // The card carries no prompt and no model (R29): the frames are the content,
+    // their status (busy, loading, an error) the only text.
+    if (views.length === 1 && !view.images.length) {
+        // The whole call failed or stopped.
+        return (_jsx("div", { className: "w-full max-w-md", children: _jsx(FailureNote, { error: view.error, action: action }) }));
+    }
+    const callIds = (run ?? [call]).map((one) => one.call_id);
+    const frame = ({ image, call: at, first }) => {
+        const callView = views[at];
+        const edit = callView.action === 'edit';
+        const seed = callIds[at];
+        const several = callView.images.length > 1;
+        return (_jsx(ImageGenFrame, { image: image, seed: seed, model: callView.model, fill: !solo, 
+            // Each call's first frame carries its busy line, the one status region
+            // per call; the others show its glyph alone, hidden from assistive tech.
+            busy: first ? (_jsx(BusyLabel, { seed: seed, label: several ? t(edit ? 'editingCount' : 'generatingCount', { count: callView.images.length }) : t(edit ? 'editing' : 'generating'), startedAt: callView.startedAt })) : (_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: _jsx(SessionDotMatrix, { sessionId: seed, size: 14 }) })) }));
+    };
+    // A tile is keyed by its call and place in it: it keeps its frame (and its
+    // loaded image) while the run grows.
+    // A call's tiles are contiguous, so its place is the distance to its first tile.
+    const tileKey = (tile, i) => `${callIds[tile.call]}:${i - grid.tiles.findIndex((other) => other.call === tile.call)}`;
+    if (solo) {
+        return (_jsxs("figure", { className: "flex w-full flex-col gap-2", children: [frame(grid.tiles[0]), action ? _jsx("div", { className: "flex flex-col items-start", children: action }) : null] }));
+    }
+    const count = grid.tiles.length;
+    const bento = grid.rows.length === 1 ? BENTO[count] : null;
+    const rowRects = grid.rows.map((size, row) => {
+        const firstTile = grid.tiles[grid.rows.slice(0, row).reduce((sum, n) => sum + n, 0)];
+        return ratioValue(views[firstTile.call].aspectRatio) * BENTO[size].scale;
+    });
+    const placed = bento ? null : gridPlacement(grid.rows, rowRects);
+    return (
+    // An inline-size container: the merged grid sizes its rows from its width (`cqw`).
+    _jsxs("figure", { className: cn('flex w-full flex-col gap-2', !bento && '@container'), children: [_jsx("div", { ...(bento ? { 'data-image-gen-bento': count } : { 'data-image-gen-grid': grid.rows.join('+') }), className: cn('grid min-h-0 w-full gap-1', bento ? bento.grid : 'grid-cols-6'), style: placed ? placed.style : { aspectRatio: rowRects[0], width: cappedWidth(rowRects[0]) }, children: grid.tiles.map((tile, i) => (_jsx("div", { "data-image-gen-tile": i, className: cn('min-h-0 min-w-0', bento && i === 0 && bento.first), style: placed?.places[i], children: frame(tile) }, tileKey(tile, i)))) }), action ? _jsx("div", { className: "flex flex-col items-start", children: action }) : null] }));
 }
 ToolRegistry.register('image-gen', ImageGenTool);

package/dist/session/tool/tools/show-tool.js

@@ -1,14 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { parseArtifactUrl } from '../../../artifacts/frame-policy.js';
 import { Button } from '../../../primitives/button.js';
 import Hint from '../../../primitives/hint.js';
 import Loading from '../../../primitives/loading.js';
 import { SessionDotMatrix } from '../../../primitives/dot-matrix/session-dot-matrix.js';
 import { TextShimmer } from '../../../primitives/text-shimmer.js';
 import { isShowContentUnavailable, isShowPayloadEmpty, } from '@kortix/sdk';
-import { BoundActivateContext, InlineServicePreview, partInput, ServicePreviewActions, ToolRunningContext, ToolSurfaceContext, useToolNavigation, } from '../shared/infrastructure.js';
+import { BoundActivateContext, ImageGenDigestsContext, ImageGenPathsContext, InlineServicePreview, partInput, ServicePreviewActions, ToolRunningContext, ToolSurfaceContext, useToolNavigation, } from '../shared/infrastructure.js';
 import { ToolRegistry } from '../shared/registry.js';
 import { buildHtmlStaticUrl, isShowHtmlFile, ServicePreviewViewport, ShowCarousel, ShowCarouselTabs, ShowContentRenderer, showDomain, ShowFileActions, showFileTypeIcon, ShowHoverCard, showHoverDetails, useServicePreview, } from '../shared/show-helpers.js';
+import { showDrawnByImageGen, showItemDigest, withoutImageGenDuplicates } from '@kortix/sdk';
 import { useTranslations } from '../../../i18n/index.js';
 import { cn } from '../../../lib/utils.js';
 import { isAppRouteUrl, parseLocalhostUrl } from '@kortix/sdk';
@@ -44,18 +46,25 @@ export function ShowTool({ call, sessionId }) {
     // Present only on a card served from saved history: the server's copy of
     // `path`, so the card renders while the sandbox is off.
     const attachment = input.attachment || '';
+    // Images an `image_gen` card of this turn already drew are not drawn twice:
+    // the same path (D5), or the same bytes at another path, by sha256 (R38).
+    const drawnByImageGen = useContext(ImageGenPathsContext);
+    const drawnDigests = useContext(ImageGenDigestsContext);
     const items = useMemo(() => {
         const raw = input.items;
         if (!raw)
             return null;
         try {
             const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;
-            if (Array.isArray(parsed) && parsed.length > 0)
-                return parsed;
+            if (Array.isArray(parsed) && parsed.length > 0) {
+                const withDigests = parsed.map((item) => ({ ...item, sha256: item.sha256 ?? showItemDigest(call, item.path) }));
+                const rest = withoutImageGenDuplicates(withDigests, drawnByImageGen, drawnDigests);
+                return rest.length > 0 ? rest : null;
+            }
         }
         catch { }
         return null;
-    }, [input.items]);
+    }, [input.items, call, drawnByImageGen, drawnDigests]);
     const isCarousel = !!items && items.length > 0;
     const [carouselIndex, setCarouselIndex] = useState(0);
     // Clamped: a grouped carousel can lose an item (a call that settled empty).
@@ -107,9 +116,11 @@ export function ShowTool({ call, sessionId }) {
     const activeItemLabel = currentItem
         ? currentItem.title || currentItem.path?.split('/').pop()
         : '';
+    // A Kortix artifact's app link is the artifact, not a website: its name and a document icon.
+    const isArtifactLink = !!activeUrl && !!parseArtifactUrl(activeUrl);
     const displayTitle = isCarousel
         ? activeItemLabel || title || `${items.length} items`
-        : title || (type === 'error' ? 'Error' : type === 'url' ? subtitleDomain || 'Link' : 'Output');
+        : title || (isArtifactLink ? 'Artifact' : type === 'error' ? 'Error' : type === 'url' ? subtitleDomain || 'Link' : 'Output');
     const hoverTarget = {
         path: activePath,
         url: activeUrl,
@@ -122,7 +133,7 @@ export function ShowTool({ call, sessionId }) {
     // While the card's preview loads, every port tab shows its own glyph,
     // seeded by that tab's title or URL.
     const portTabIcon = (item) => parseLocalhostUrl(item.url || '') ? (_jsx(SessionDotMatrix, { sessionId: item.title || item.url, size: 14, className: "shrink-0" })) : null;
-    const headerIcon = isCarousel ? currentItem?.type || 'image' : isWebsitePreview ? 'url' : type;
+    const headerIcon = isCarousel ? currentItem?.type || 'image' : isArtifactLink ? 'markdown' : isWebsitePreview ? 'url' : type;
     // Inline card header owns the toolbar. Panel keeps the actions inside the
     // renderer / website header as before.
     const inlineToolbar = isWebsitePreview ? (_jsx(ServicePreviewActions, { preview: preview, compact: inlineTabs })) : (fileActions || contentActions);
@@ -143,7 +154,7 @@ export function ShowTool({ call, sessionId }) {
     // arguments has an empty input because the input has not arrived yet, and its
     // header carries the spinner that says so.
     const hasNothingToShow = useMemo(() => isShowPayloadEmpty({ items, path, url, content }), [items, path, url, content]);
-    if (!running && hasNothingToShow)
+    if (!running && (hasNothingToShow || showDrawnByImageGen(call, drawnByImageGen, drawnDigests)))
         return null;
     const unavailable = isShowContentUnavailable({
         running,
@@ -172,7 +183,7 @@ export function ShowTool({ call, sessionId }) {
         body = _jsx(ShowUnavailableNote, { isWebsitePreview: true, href: null, fill: fill });
     }
     else {
-        body = (_jsxs("div", { className: cn('overflow-hidden', fill ? 'flex h-full flex-col' : 'min-h-0 flex-1'), children: [isWebsitePreview && fill && (_jsxs("div", { className: "border-border flex shrink-0 items-center justify-between gap-3 border-b px-4 py-1", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx(Globe, { className: "text-muted-foreground size-3.5 shrink-0" }), _jsx("span", { className: "text-foreground truncate text-xs font-medium", children: preview.displayLabel })] }), _jsx(ServicePreviewActions, { preview: preview })] })), _jsx("div", { className: cn(fill && 'flex min-h-0 flex-1 flex-col'), children: isCarousel ? (_jsx(ActiveServicePreviewContext.Provider, { value: isWebsitePreview ? preview : null, children: _jsx(ShowCarousel, { items: items, LocalhostPreview: CarouselServicePreview, onIndexChange: setCarouselIndex, activeIndex: activeIndex, hideNav: inlineTabs, fill: fill, toolbarActions: fill ? fileActions : undefined }) })) : isWebsitePreview ? (_jsx(ServicePreviewViewport, { preview: preview })) : (_jsxs(_Fragment, { children: [fileUnavailable && (_jsx(ShowUnavailableNote, { isWebsitePreview: false, href: safeHttpUrl(activeUrl), fill: fill })), _jsx("div", { className: cn(fill && 'min-h-0 flex-1 overflow-hidden', fileUnavailable && 'hidden'), children: _jsx(ShowContentRenderer, { type: type, title: title, description: description, path: path, url: url, content: content, language: language, aspectRatio: aspectRatio, attachment: attachment, LocalhostPreview: InlineServicePreview, fill: fill, onStatusChange: setContentStatus, toolbarActions: fill ? fileActions : undefined }) }), description && !title && !fileUnavailable && (_jsx("div", { className: "border-border/15 shrink-0 border-t px-5 py-3", children: _jsx("p", { className: "text-muted-foreground text-xs", children: description }) }))] })) })] }));
+        body = (_jsxs("div", { className: cn('overflow-hidden', fill ? 'flex h-full flex-col' : 'min-h-0 flex-1'), children: [isWebsitePreview && fill && (_jsxs("div", { className: "border-border flex shrink-0 items-center justify-between gap-3 border-b px-4 py-1", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx(Globe, { className: "text-muted-foreground size-3.5 shrink-0" }), _jsx("span", { className: "text-foreground truncate text-xs font-medium", children: preview.displayLabel })] }), _jsx(ServicePreviewActions, { preview: preview })] })), _jsx("div", { className: cn(fill && 'flex min-h-0 flex-1 flex-col'), children: isCarousel ? (_jsx(ActiveServicePreviewContext.Provider, { value: isWebsitePreview ? preview : null, children: _jsx(ShowCarousel, { items: items, LocalhostPreview: CarouselServicePreview, onIndexChange: setCarouselIndex, activeIndex: activeIndex, hideNav: inlineTabs, fill: fill, toolbarActions: fill ? fileActions : undefined }) })) : isWebsitePreview ? (_jsx(ServicePreviewViewport, { preview: preview })) : (_jsxs(_Fragment, { children: [fileUnavailable && (_jsx(ShowUnavailableNote, { isWebsitePreview: false, href: safeHttpUrl(activeUrl), fill: fill })), _jsx("div", { className: cn(fill && 'min-h-0 flex-1 overflow-hidden', fileUnavailable && 'hidden'), children: _jsx(ShowContentRenderer, { type: type, title: title, description: description, path: path, url: url, content: content, language: language, aspectRatio: aspectRatio, attachment: attachment, sha256: showItemDigest(call, path), LocalhostPreview: InlineServicePreview, fill: fill, onStatusChange: setContentStatus, toolbarActions: fill ? fileActions : undefined }) }), description && !title && !fileUnavailable && (_jsx("div", { className: "border-border/15 shrink-0 border-t px-5 py-3", children: _jsx("p", { className: "text-muted-foreground text-xs", children: description }) }))] })) })] }));
     }
     // Panel surface: `fillsPanel` (tool-part-renderer.tsx) special-cases show/
     // show-user because the preview IS the payload — keep it exactly as before,