@adecore/agents-react 0.20.0 → 0.21.0

package/dist/chat/chat-client.d.ts

@@ -10,6 +10,7 @@ interface ChatOpenOptions {
     runtimeMode?: RuntimeMode;
 }
 export interface ChatSendExtras {
+    delivery?: 'steer' | 'queue';
     mentions?: string[];
     skills?: string[];
     chats?: string[];

package/dist/chat/logic/generated-image.d.ts

@@ -0,0 +1,27 @@
+import { type ChatAttachment, type ChatToolItem } from '@adecore/agent-contracts';
+export declare const IMAGE_GENERATION_TOOL = "ImageGeneration";
+export type GeneratedImageFailure = {
+    kind: 'provider';
+    message: string | null;
+} | {
+    kind: 'empty';
+} | {
+    kind: 'not-image';
+} | {
+    kind: 'too-large';
+    limit: number;
+};
+export type GeneratedImageView = {
+    state: 'generating';
+} | {
+    state: 'failed';
+    failure: GeneratedImageFailure;
+} | {
+    state: 'ready';
+    attachment: ChatAttachment;
+    prompt: string | null;
+    transparent: boolean;
+};
+export declare function isImageGeneration(tool: ChatToolItem): boolean;
+export declare function generatedImageView(tool: ChatToolItem): GeneratedImageView;
+export declare function attachmentAspect(attachment: ChatAttachment): number | undefined;

package/dist/chat/logic/generated-image.js

@@ -0,0 +1,32 @@
+import { CHAT_ATTACHMENT_MAX_BYTES, GeneratedImageInputSchema } from '@adecore/agent-contracts';
+export const IMAGE_GENERATION_TOOL = 'ImageGeneration';
+export function isImageGeneration(tool) {
+    return tool.name === IMAGE_GENERATION_TOOL;
+}
+/* What the row of an image generation draws, from the tool call alone. */
+export function generatedImageView(tool) {
+    if (tool.state === 'running') {
+        return { state: 'generating' };
+    }
+    const parsed = GeneratedImageInputSchema.safeParse(tool.input);
+    const input = parsed.success ? parsed.data : {};
+    const output = tool.output?.trim() || null;
+    if (tool.state === 'error' || input.attachment === undefined) {
+        return { state: 'failed', failure: output === null && tool.state !== 'error' ? { kind: 'empty' } : { kind: 'provider', message: output } };
+    }
+    const attachment = input.attachment;
+    if (attachment.size === 0) {
+        return { state: 'failed', failure: { kind: 'empty' } };
+    }
+    if (!attachment.mime.startsWith('image/')) {
+        return { state: 'failed', failure: { kind: 'not-image' } };
+    }
+    if (attachment.size > CHAT_ATTACHMENT_MAX_BYTES) {
+        return { state: 'failed', failure: { kind: 'too-large', limit: CHAT_ATTACHMENT_MAX_BYTES } };
+    }
+    return { state: 'ready', attachment, prompt: input.revisedPrompt?.trim() || null, transparent: input.transparentBackground === true };
+}
+/* Width over height, when the attachment carries both. */
+export function attachmentAspect(attachment) {
+    return attachment.width !== undefined && attachment.height !== undefined ? attachment.width / attachment.height : undefined;
+}

package/dist/chat/logic/timeline-target.d.ts

@@ -1,12 +1,30 @@
-import type { ChatItem } from '@adecore/agent-contracts';
+import type { ChatItem, ChatUiChoiceOrigin } from '@adecore/agent-contracts';
 import type { TimelineRow } from './timeline.js';
+import type { FileRef } from '../../host.js';
 export interface TimelineTarget {
     selection: string;
     row: TimelineRow | null;
     code: string | null;
     path: string | null;
     line: number | null;
+    file?: {
+        ref: FileRef;
+        cwd: string | null;
+        scopeId: string | null;
+    } | null;
 }
 export declare const EMPTY_TARGET: TimelineTarget;
 export declare function withCurrentText(rows: TimelineRow[], items: Record<string, ChatItem> | undefined): TimelineRow[];
 export declare function readTimelineTarget(element: HTMLElement, scroller: HTMLElement | null, rows: TimelineRow[]): TimelineTarget;
+export type UiReplyTarget = Pick<ChatUiChoiceOrigin, 'itemId' | 'blockId' | 'revision'>;
+export type UiReplyJump = {
+    kind: 'missing' | 'earlier';
+} | {
+    kind: 'turn';
+    turnId: string;
+} | {
+    kind: 'row';
+    index: number;
+};
+export declare function uiReplyJump(target: UiReplyTarget, rows: readonly TimelineRow[], items: Record<string, ChatItem> | undefined, expandedTurns: ReadonlySet<string>, hasEarlier: boolean): UiReplyJump;
+export declare function revealUiReplyBlock(scroller: HTMLElement, target: UiReplyTarget): boolean;

package/dist/chat/logic/timeline-target.js

@@ -23,12 +23,58 @@ export function withCurrentText(rows, items) {
 export function readTimelineTarget(element, scroller, rows) {
     const id = element.closest('[data-item-id]')?.dataset.itemId;
     const file = element.closest('[data-file-path]');
-    const line = Number(file?.dataset.fileLine);
+    const line = positiveInteger(file?.dataset.fileLine);
+    const column = positiveInteger(file?.dataset.fileColumn);
+    const endLine = positiveInteger(file?.dataset.fileEndLine);
+    const path = file?.dataset.filePath ?? null;
     return {
         selection: selectionWithin(scroller),
         row: rows.find((row) => row.id === id) ?? null,
         code: element.closest('pre')?.textContent ?? null,
-        path: file?.dataset.filePath ?? null,
-        line: Number.isFinite(line) && line > 0 ? line : null
+        path,
+        line,
+        file: path === null
+            ? null
+            : {
+                ref: {
+                    path,
+                    ...(line === null ? {} : { line }),
+                    ...(column === null ? {} : { column }),
+                    ...(line === null || endLine === null || endLine < line ? {} : { endLine }),
+                    directory: file?.dataset.fileDirectory === 'true'
+                },
+                cwd: file?.closest('[data-file-cwd]')?.dataset.fileCwd || null,
+                scopeId: file?.closest('[data-file-scope-id]')?.dataset.fileScopeId || null
+            }
     };
 }
+function positiveInteger(value) {
+    const number = Number(value);
+    return Number.isSafeInteger(number) && number > 0 ? number : null;
+}
+export function uiReplyJump(target, rows, items, expandedTurns, hasEarlier) {
+    const item = items?.[target.itemId];
+    if (!item) {
+        return { kind: hasEarlier ? 'earlier' : 'missing' };
+    }
+    if (item.kind !== 'assistant' || !item.ui?.some((block) => block.id === target.blockId && block.revision === target.revision)) {
+        return { kind: 'missing' };
+    }
+    const index = rows.findIndex((row) => row.kind === 'assistant' && row.id === target.itemId);
+    if (index !== -1) {
+        return { kind: 'row', index };
+    }
+    return item.turnId && !expandedTurns.has(item.turnId) ? { kind: 'turn', turnId: item.turnId } : { kind: 'missing' };
+}
+export function revealUiReplyBlock(scroller, target) {
+    // Compare attributes instead of interpolating provider ids into CSS selectors.
+    const row = Array.from(scroller.querySelectorAll('[data-item-id]')).find((element) => element.dataset.itemId === target.itemId);
+    const block = row &&
+        Array.from(row.querySelectorAll('[data-ui-block]')).find((element) => element.dataset.uiBlock === target.blockId && element.dataset.uiRevision === target.revision);
+    if (!block) {
+        return false;
+    }
+    scroller.scrollTop += block.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+    block.focus({ preventScroll: true });
+    return true;
+}

package/dist/chat/logic/timeline.js

@@ -1,6 +1,7 @@
 import i18next from 'i18next';
 import { abortedByMachine } from '@adecore/agent-contracts';
 import { formatElapsedShort } from '@adecore/ui/format';
+import { isImageGeneration } from './generated-image.js';
 import { handbackReportOf } from './handback.js';
 import { toolEntry } from './tool-catalog.js';
 import { hasFileChanges, isFileChange } from './tools.js';
@@ -11,7 +12,7 @@ import { hasFileChanges, isFileChange } from './tools.js';
  */
 const BLOCK_KINDS = new Set(['assistant', 'report', 'thinking', 'changed-files', 'compaction', 'app-card', 'visual']);
 export function isBlock(row) {
-    return BLOCK_KINDS.has(row.kind);
+    return BLOCK_KINDS.has(row.kind) || isImageRow(row);
 }
 /* "Read 4 files", "Ran 2 commands", or "12 tool calls" when the run mixes kinds. */
 export function summarizeGroup(tools) {
@@ -171,6 +172,9 @@ function flushTools(buffer, rows, options) {
         rows.push({ kind: 'work-live', id: tool.id, tool });
     }
 }
+function isImageRow(row) {
+    return (row.kind === 'work' || row.kind === 'work-live') && isImageGeneration(row.tool);
+}
 /* Rows for a run of items, in order, with tool runs folded and a subagent's work under its own row. */
 function rowsForItems(items, options, children) {
     const rows = [];
@@ -185,6 +189,11 @@ function rowsForItems(items, options, children) {
             rows.push({ kind: 'workflow', id: item.id, tool: item, workflow: item.workflow });
             continue;
         }
+        if (item.kind === 'tool' && isImageGeneration(item)) {
+            flushTools(tools, rows, options);
+            rows.push({ kind: item.state === 'running' ? 'work-live' : 'work', id: item.id, tool: item });
+            continue;
+        }
         if (item.kind === 'tool' && report === null) {
             tools.push(item);
             continue;
@@ -250,7 +259,7 @@ function lastAssistantRow(rows) {
         if (row.kind === 'assistant') {
             return row;
         }
-        if (row.kind !== 'note') {
+        if (row.kind !== 'note' && !isImageRow(row)) {
             return null;
         }
     }
@@ -289,31 +298,33 @@ export function deriveTimelineRows(items, options) {
         }
         const turnId = chunk.turnId;
         const turn = chunk.items.find((item) => item.kind === 'turn');
-        const user = chunk.items.filter((item) => item.kind === 'user');
-        const rest = chunk.items.filter((item) => item.kind !== 'user' && item.kind !== 'turn');
+        const conversation = chunk.items.filter((item) => item.kind !== 'turn');
         if (turn?.origin === 'agent') {
             // The agent started this one itself, so there is no message of the person to show above it.
             rows.push({ kind: 'turn-start', id: `start-${turnId}`, turn, label: agentTurnLabel(turn) });
         }
-        rows.push(...rowsForItems(user, options, children));
         const active = turnId === options.activeTurnId || turn?.state === 'running';
-        const work = rowsForItems(rest, options, children);
         if (!turn || active) {
-            rows.push(...work);
+            rows.push(...rowsForItems(conversation, options, children));
             if (active) {
                 rows.push({ kind: 'working', id: `working-${turnId}`, startedAt: turn?.createdAt ?? Date.now() });
             }
             continue;
         }
-        // The closing answer stays visible; everything before it folds behind the label.
+        // Steering splits the conversation inside a turn. Earlier responses keep their place above it.
+        const lastUser = conversation.findLastIndex((item) => item.kind === 'user');
+        rows.push(...rowsForItems(conversation.slice(0, lastUser + 1), options, children));
+        const rest = conversation.slice(lastUser + 1);
+        const work = rowsForItems(rest, options, children);
+        // The closing answer stays visible; the work after the last input folds behind the label.
         const finalAssistant = lastAssistantRow(work);
         const before = finalAssistant ? work.slice(0, work.indexOf(finalAssistant)) : work;
-        // A workflow runs on past the turn that launched it, so its row stays in sight until it ends.
-        const standing = before.filter((row) => row.kind === 'workflow' && row.tool.state === 'running');
+        // Images remain a turn's visible result, and a workflow may still be running after its turn ends.
+        const standing = before.filter((row) => isImageRow(row) || (row.kind === 'workflow' && row.tool.state === 'running'));
         const folded = before.filter((row) => !standing.includes(row));
         const expanded = options.expandedTurns.has(turnId);
         if (folded.length > 0) {
-            const tools = rest.filter((item) => item.kind === 'tool' && parentOf(item) === null && handbackReportOf(item) === null);
+            const tools = rest.filter((item) => item.kind === 'tool' && parentOf(item) === null && handbackReportOf(item) === null && !isImageGeneration(item));
             rows.push({
                 kind: 'turn-fold',
                 id: `fold-${turnId}`,
@@ -323,17 +334,14 @@ export function deriveTimelineRows(items, options) {
                 hiddenCount: folded.length,
                 expanded
             });
-            if (expanded) {
-                rows.push(...folded);
-            }
         }
-        rows.push(...standing);
-        const changed = changedFilesRow(turn, rest);
+        rows.push(...(expanded ? before : standing));
+        const changed = changedFilesRow(turn, conversation);
         if (changed) {
             rows.push(changed);
         }
         if (finalAssistant) {
-            rows.push(finalAssistant);
+            rows.push(...work.slice(work.indexOf(finalAssistant)));
         }
         if (options.forkedTurns?.has(turnId) === true) {
             rows.push({ kind: 'forks', id: `forks-${turnId}`, turnId });

package/dist/chat/subagent-conversation.d.ts

@@ -1,9 +1,10 @@
-import type { ChatItem, ChatSubagentResult } from '@adecore/agent-contracts';
+import type { ChatApprovalItem, ChatItem, ChatQuestionItem, ChatSubagentResult } from '@adecore/agent-contracts';
 import { type ChatTransport } from '../transport.js';
 export declare const SUBAGENT_PAGE = 60;
 export interface SubagentConversationState {
     status: 'loading' | 'ready' | 'failed';
     items: ChatItem[];
+    pending: Array<ChatApprovalItem | ChatQuestionItem>;
     source: ChatSubagentResult['source'] | null;
     context: NonNullable<ChatSubagentResult['context']> | null;
     cursor: string | null;

package/dist/chat/subagent-conversation.js

@@ -5,6 +5,7 @@ export const SUBAGENT_PAGE = 60;
 export const INITIAL_CONVERSATION = {
     status: 'loading',
     items: [],
+    pending: [],
     source: null,
     context: null,
     cursor: null,
@@ -35,6 +36,9 @@ export function mergeNewest(current, currentCursor, page, pageCursor) {
     }
     return { items, cursor: current.length === 0 ? pageCursor : currentCursor };
 }
+function pendingOf(items) {
+    return items.filter((item) => (item.kind === 'approval' && item.decision === 'pending') || (item.kind === 'question' && item.state === 'pending'));
+}
 function messageOf(error) {
     return error instanceof Error ? error.message : i18next.t('agent-chat:subagents.noAnswer');
 }
@@ -98,7 +102,8 @@ export class SubagentConversation {
             this.set({ loadingEarlier: true });
             try {
                 const page = await this.ask({ cursor, limit: SUBAGENT_PAGE });
-                this.set({ items: [...page.items, ...this.state.items], cursor: page.history.cursor, live: page.live, loadingEarlier: false });
+                const items = [...page.items, ...this.state.items];
+                this.set({ items, pending: page.pending ?? pendingOf(items), cursor: page.history.cursor, live: page.live, loadingEarlier: false });
             }
             catch (error) {
                 if (errorCode(error) === 'history-expired') {
@@ -133,6 +138,7 @@ export class SubagentConversation {
             this.set({
                 status: 'ready',
                 items: merged.items,
+                pending: page.pending ?? pendingOf(merged.items),
                 cursor: merged.cursor,
                 live: page.live,
                 source: page.source,

package/dist/chat/timeline-flash.d.ts

@@ -1,12 +1,14 @@
+import type { UiReplyTarget } from './logic/timeline-target.js';
 export interface TimelineFlash {
     key: string;
     rowId: string;
     opens: boolean;
+    block?: Pick<UiReplyTarget, 'blockId' | 'revision'>;
     nonce: number;
 }
 interface TimelineFlashStore {
     target: TimelineFlash | null;
-    flash(key: string, rowId: string, opens: boolean): void;
+    flash(key: string, rowId: string, opens: boolean, block?: TimelineFlash['block']): void;
 }
 export declare const useTimelineFlash: import("zustand").UseBoundStore<import("zustand").StoreApi<TimelineFlashStore>>;
 export {};

package/dist/chat/timeline-flash.js

@@ -3,9 +3,9 @@ import { create } from 'zustand';
 const FLASH_MS = 2000;
 export const useTimelineFlash = create((set, get) => ({
     target: null,
-    flash(key, rowId, opens) {
+    flash(key, rowId, opens, block) {
         const nonce = (get().target?.nonce ?? 0) + 1;
-        set({ target: { key, rowId, opens, nonce } });
+        set({ target: { key, rowId, opens, nonce, ...(block ? { block } : {}) } });
         const timer = setTimeout(() => {
             if (get().target?.nonce === nonce) {
                 set({ target: null });

package/dist/chat/ui/CodeBlock.d.ts

@@ -1,4 +1,6 @@
-export declare function CodeBlock({ code, lang }: {
+import { type ReactNode } from 'react';
+export declare function CodeBlock({ code, lang, actions }: {
     code: string;
     lang: string;
+    actions?: ReactNode;
 }): import("react").JSX.Element;

package/dist/chat/ui/CodeBlock.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, memo, useContext, useEffect, useMemo, useState } from 'react';
+import { Fragment, memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Check, Copy } from 'lucide-react';
+import { ButtonGroup, IconButton } from '@adecore/ui';
 import { IncrementalLines } from './code-lines.js';
 import { CodeStreamingContext } from './code-streaming.js';
 import { WHOLE_FADE_CLASS } from './rehype-fade.js';
 import { shikiThemeOf, useCodeTheme } from './code-theme.js';
 // A plain language needs no grammar; shiki draws it in the theme's own foreground.
 const PLAIN = 'text';
+const COPIED_MS = 1500;
 let highlighter = null;
 let highlighterLoad = null;
 const loadedLanguages = new Set([PLAIN]);
@@ -102,9 +106,12 @@ const CodeLine = memo(function CodeLine({ tokens }) {
  * fence that is still open is tokenized as it grows, and the same component carries on once it
  * closes, so closing it does not draw it again.
  */
-export function CodeBlock({ code, lang }) {
+export function CodeBlock({ code, lang, actions }) {
+    const { t } = useTranslation('agent-chat');
     const theme = useCodeTheme();
     const streaming = useContext(CodeStreamingContext);
+    const [copyState, setCopyState] = useState('idle');
+    const copying = useRef(false);
     // What loaded last, so a block whose theme changes draws again once the new one is in.
     const [loaded, setLoaded] = useState(null);
     const tokenizer = tokenizerFor(lang, theme);
@@ -112,6 +119,31 @@ export function CodeBlock({ code, lang }) {
     const [waited] = useState(tokenizer === null);
     const lines = useMemo(() => (tokenizer ? new IncrementalLines(tokenizer.tokenize) : null), [tokenizer]);
     const tokens = useMemo(() => lines?.update(code, !streaming) ?? null, [lines, code, streaming]);
+    useEffect(() => {
+        if (copyState !== 'copied') {
+            return;
+        }
+        const timer = setTimeout(() => setCopyState('idle'), COPIED_MS);
+        return () => clearTimeout(timer);
+    }, [copyState]);
+    async function copy() {
+        if (copying.current) {
+            return;
+        }
+        copying.current = true;
+        setCopyState('copying');
+        try {
+            // The best-effort clipboard helper cannot distinguish a refusal from success.
+            await navigator.clipboard.writeText(code);
+            setCopyState('copied');
+        }
+        catch {
+            setCopyState('failed');
+        }
+        finally {
+            copying.current = false;
+        }
+    }
     useEffect(() => {
         if (tokenizer !== null) {
             return;
@@ -124,9 +156,8 @@ export function CodeBlock({ code, lang }) {
             cancelled = true;
         };
     }, [lang, theme, tokenizer]);
-    if (tokenizer === null || tokens === null) {
-        const failed = loaded === 'failed';
-        return (_jsx("div", { className: clsx('chat-code', !failed && 'invisible'), "aria-hidden": failed ? undefined : true, children: _jsx("pre", { children: _jsx("code", { children: code }) }) }));
-    }
-    return (_jsx("div", { className: clsx('chat-code', waited && WHOLE_FADE_CLASS), children: _jsx("pre", { style: { color: tokenizer.fg }, children: _jsx("code", { children: tokens.map((line, index) => (_jsxs(Fragment, { children: [_jsx(CodeLine, { tokens: line }), index < tokens.length - 1 && '\n'] }, index))) }) }) }));
+    const pending = (tokenizer === null || tokens === null) && loaded !== 'failed';
+    return (_jsxs("div", { className: "chat-code", "data-copy-state": copyState, children: [_jsx("pre", { className: clsx(pending && 'invisible', !pending && tokens !== null && waited && WHOLE_FADE_CLASS), "aria-hidden": pending || undefined, style: { color: tokenizer?.fg }, children: _jsx("code", { children: tokens === null
+                        ? code
+                        : tokens.map((line, index) => (_jsxs(Fragment, { children: [_jsx(CodeLine, { tokens: line }), index < tokens.length - 1 && '\n'] }, index))) }) }), _jsxs(ButtonGroup, { className: "chat-code-actions", role: "group", "aria-label": t('code.actions'), children: [_jsx(IconButton, { icon: copyState === 'copied' ? Check : Copy, size: "sm", label: copyState === 'copied' ? t('timeline.actions.copied') : t('timeline.menu.copyCode'), busy: copyState === 'copying', "aria-busy": copyState === 'copying', "aria-disabled": copyState === 'copying', onClick: () => void copy() }), actions] }), _jsx("span", { className: "sr-only", role: "status", children: copyState === 'copied' ? t('timeline.actions.copied') : '' }), copyState === 'failed' && (_jsx("p", { className: "chat-code-error", role: "alert", children: t('code.copyFailed') }))] }));
 }

package/dist/chat/ui/Composer.js

@@ -95,6 +95,8 @@ function splitPath(path) {
 // Keep the editor mounted while a pending request takes over, so its selection and draft survive.
 export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabled, readOnly = false, providerFixed, onSend, onRetarget }) {
     const { t } = useTranslation('agent-chat');
+    const sendDelivery = chatHost().useSendDelivery();
+    const canSteer = info.provider === 'claude' || info.provider === 'codex';
     const [draft, setDraft] = useState(() => readDraft(chatId));
     const [historyIndex, setHistoryIndex] = useState(null);
     const [menuIndex, setMenuIndex] = useState(0);
@@ -474,7 +476,8 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
     const removeAttachment = (index) => {
         setDraft((current) => ({ ...current, attachments: current.attachments.filter((_, i) => i !== index) }));
     };
-    const submit = () => {
+    const submit = (alternate = false) => {
+        const delivery = canSteer && (alternate ? sendDelivery === 'queue' : sendDelivery === 'steer') ? 'steer' : 'queue';
         const trimmed = text.trim();
         if (isEmptyDraft(draft) || !writable || guard.tooLong) {
             return;
@@ -502,6 +505,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
             return;
         }
         onSend(withQuote(quote, trimmed), {
+            delivery,
             mentions: presentMentions(trimmed, draft.mentions),
             skills: presentSkills(trimmed, draft.skills),
             chats: draft.chats,
@@ -739,7 +743,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                 view.dispatch({ changes: { from: line.from, to: line.to }, selection: { anchor: line.from }, userEvent: 'delete' });
                 return true;
             }
-            submit();
+            submit(e.altKey);
             return true;
         }
         const { from, to } = view.state.selection.main;
@@ -852,5 +856,11 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                                         addFiles(Array.from(e.target.files ?? []));
                                         e.target.value = '';
                                         inputRef.current?.focus();
-                                    } }), _jsx(RunSettings, { disabled: configurationPending || !writable, providers: pickable, provider: info.provider, selection: info.selection, model: model, runtimeMode: info.runtimeMode, effectiveRuntimeMode: info.effectiveRuntimeMode, permissionMode: info.permissionMode, open: modelPickerOpen, onOpenChange: setModelPickerOpen, onModel: chooseModel, onOption: (id, value) => configure({ selection: { ...info.selection, options: { ...info.selection.options, [id]: value } } }), onMode: (runtimeMode) => configure({ runtimeMode }), usage: info.usage, compactDisabled: busy || !writable, onCompact: compact, account: accountChoice === null ? null : { choice: accountChoice, started, onPick: chooseAccount } }), _jsx(StashPicker, { onRestore: restoreStashed }), Slot !== null && (_jsx(ErrorBoundary, { label: t('composer.slotFailed'), resetKeys: [chatId], compact: true, className: "relative rounded-lg", children: _jsx(Slot, { scopeId: scope.id, chatId: chatId, disabled: !writable, insert: insertIntoDraft }) })), _jsx("span", { className: "grow" }), _jsxs("div", { className: "flex h-9 shrink-0 items-center gap-0.5 rounded-full bg-surface-hover", children: [_jsx("div", { ref: setDictationToolbar, className: "flex items-center pl-1 empty:hidden [&_.icon-btn]:rounded-full" }), busy && (_jsx(Tooltip, { label: composerStopLabel(), name: true, children: _jsx("button", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-status-error text-accent-text", onClick: (event) => stop(event.shiftKey), children: _jsx(Icon, { icon: Square, size: 16 }) }) })), (!busy || !isEmptyDraft(draft)) && (_jsx(Tooltip, { label: busy ? t('composer.queueButton') : t('composer.send'), kbd: KEY_SHORTCUTS.modEnter, name: true, children: _jsx("button", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-accent-text hover:brightness-90 disabled:opacity-50 disabled:hover:brightness-100", disabled: isEmptyDraft(draft) || !writable || guard.tooLong, onClick: submit, children: _jsx(Icon, { icon: ArrowUp, size: 16 }) }) }))] })] })] }) }), _jsx(PromptDialog, { open: confirmClear, title: t('composer.clear.title'), description: t('composer.clear.description'), confirmLabel: t('composer.clear.confirm'), danger: true, fallbackMessage: t('composer.notice.clearFailed'), onConfirm: forceClearThread, onOpenChange: () => setConfirmClear(false) })] }));
+                                    } }), _jsx(RunSettings, { disabled: configurationPending || !writable, providers: pickable, provider: info.provider, selection: info.selection, model: model, runtimeMode: info.runtimeMode, effectiveRuntimeMode: info.effectiveRuntimeMode, permissionMode: info.permissionMode, open: modelPickerOpen, onOpenChange: setModelPickerOpen, onModel: chooseModel, onOption: (id, value) => configure({ selection: { ...info.selection, options: { ...info.selection.options, [id]: value } } }), onMode: (runtimeMode) => configure({ runtimeMode }), usage: info.usage, compactDisabled: busy || !writable, onCompact: compact, account: accountChoice === null ? null : { choice: accountChoice, started, onPick: chooseAccount } }), _jsx(StashPicker, { onRestore: restoreStashed }), Slot !== null && (_jsx(ErrorBoundary, { label: t('composer.slotFailed'), resetKeys: [chatId], compact: true, className: "relative rounded-lg", children: _jsx(Slot, { scopeId: scope.id, chatId: chatId, disabled: !writable, insert: insertIntoDraft }) })), _jsx("span", { className: "grow" }), _jsxs("div", { className: "flex h-9 shrink-0 items-center gap-0.5 rounded-full bg-surface-hover", children: [_jsx("div", { ref: setDictationToolbar, className: "flex items-center pl-1 empty:hidden [&_.icon-btn]:rounded-full" }), busy && (_jsx(Tooltip, { label: composerStopLabel(), name: true, children: _jsx("button", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-status-error text-accent-text", onClick: (event) => stop(event.shiftKey), children: _jsx(Icon, { icon: Square, size: 16 }) }) })), (!busy || !isEmptyDraft(draft)) && (_jsx(Tooltip, { label: busy
+                                                ? t(canSteer
+                                                    ? sendDelivery === 'steer'
+                                                        ? 'composer.steerButton'
+                                                        : 'composer.queueWithSteerButton'
+                                                    : 'composer.queueButton')
+                                                : t('composer.send'), kbd: KEY_SHORTCUTS.modEnter, name: true, children: _jsx("button", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-accent-text hover:brightness-90 disabled:opacity-50 disabled:hover:brightness-100", disabled: isEmptyDraft(draft) || !writable || guard.tooLong, onClick: (event) => submit(event.altKey), children: _jsx(Icon, { icon: ArrowUp, size: 16 }) }) }))] })] })] }) }), _jsx(PromptDialog, { open: confirmClear, title: t('composer.clear.title'), description: t('composer.clear.description'), confirmLabel: t('composer.clear.confirm'), danger: true, fallbackMessage: t('composer.notice.clearFailed'), onConfirm: forceClearThread, onOpenChange: () => setConfirmClear(false) })] }));
 }

package/dist/chat/ui/ImageView.d.ts

@@ -1,6 +1,12 @@
+import { type ReactNode } from 'react';
 import type { ResourceUrl } from '../../host.js';
-export declare function ImageThumb({ source, alt, className }: {
+export interface ImageThumbProps {
     source: ResourceUrl;
     alt: string;
     className?: string;
-}): import("react").JSX.Element;
+    aspect?: number;
+    actions?: ReactNode;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+}
+export declare function ImageThumb({ source, alt, className, aspect, actions, open: openProp, onOpenChange }: ImageThumbProps): import("react").JSX.Element;

package/dist/chat/ui/ImageView.js

@@ -24,7 +24,7 @@ function zoomed(view, factor, pointX, pointY) {
     return { scale, x: pointX - (pointX - view.x) * ratio, y: pointY - (pointY - view.y) * ratio };
 }
 /* An image on its own, large: the wheel and the buttons zoom, dragging pans, Escape closes. */
-function Lightbox({ src, alt, open, onOpenChange }) {
+function Lightbox({ src, alt, open, onOpenChange, actions }) {
     const { t } = useTranslation('agent-chat');
     const [view, setView] = useState(START);
     // The alt of an image an agent read is its path; the header shows the file and keeps the path on a tooltip.
@@ -44,7 +44,7 @@ function Lightbox({ src, alt, open, onOpenChange }) {
         return { x: event.clientX - rect.left - rect.width / 2, y: event.clientY - rect.top - rect.height / 2 };
     };
     const zoomButton = (factor) => setView((current) => zoomed(current, factor, 0, 0));
-    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Popup, { backdropClassName: "lightbox-backdrop", className: "flex min-w-72 flex-col", children: [_jsx(Dialog.Title, { className: "sr-only", children: alt }), _jsxs("div", { className: "flex h-11 shrink-0 items-center gap-2 border-b border-border pr-2 pl-3", children: [name === alt ? title : _jsx(Tooltip, { label: alt, children: title }), _jsx("span", { className: "grow" }), _jsxs("span", { className: "tabular-nums text-xs text-text-faint", children: [Math.round(view.scale * 100), "%"] }), _jsxs(ButtonGroup, { render: _jsx("span", {}), children: [_jsx(IconButton, { icon: Minus, size: "sm", label: t('image.zoomOut'), disabled: view.scale <= MIN_SCALE, onClick: () => zoomButton(1 / BUTTON_STEP) }), _jsx(IconButton, { icon: Plus, size: "sm", label: t('image.zoomIn'), disabled: view.scale >= MAX_SCALE, onClick: () => zoomButton(BUTTON_STEP) }), _jsx(IconButton, { icon: RotateCcw, size: "sm", label: t('image.reset'), disabled: view.scale === MIN_SCALE, onClick: () => setView(START) })] }), _jsx(CloseButton, { label: t('common.action.close'), kbd: "esc", className: "ml-1", dialog: true })] }), _jsx("div", { ref: frameRef, className: clsx('lightbox-frame grid place-items-center overflow-hidden bg-surface-sunken', view.scale > MIN_SCALE && 'cursor-grab'), onWheel: (e) => {
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Popup, { backdropClassName: "lightbox-backdrop", className: "flex min-w-72 flex-col", children: [_jsx(Dialog.Title, { className: "sr-only", children: alt }), _jsxs("div", { className: "flex h-11 shrink-0 items-center gap-2 border-b border-border pr-2 pl-3", children: [name === alt ? title : _jsx(Tooltip, { label: alt, children: title }), _jsx("span", { className: "grow" }), _jsxs("span", { className: "tabular-nums text-xs text-text-faint", children: [Math.round(view.scale * 100), "%"] }), _jsxs(ButtonGroup, { render: _jsx("span", {}), children: [_jsx(IconButton, { icon: Minus, size: "sm", label: t('image.zoomOut'), disabled: view.scale <= MIN_SCALE, onClick: () => zoomButton(1 / BUTTON_STEP) }), _jsx(IconButton, { icon: Plus, size: "sm", label: t('image.zoomIn'), disabled: view.scale >= MAX_SCALE, onClick: () => zoomButton(BUTTON_STEP) }), _jsx(IconButton, { icon: RotateCcw, size: "sm", label: t('image.reset'), disabled: view.scale === MIN_SCALE, onClick: () => setView(START) })] }), actions, _jsx(CloseButton, { label: t('common.action.close'), kbd: "esc", className: "ml-1", dialog: true })] }), _jsx("div", { ref: frameRef, className: clsx('lightbox-frame grid place-items-center overflow-hidden bg-surface-sunken', view.scale > MIN_SCALE && 'cursor-grab'), onWheel: (e) => {
                         const point = pointIn(e);
                         setView((current) => zoomed(current, WHEEL_STEP ** -e.deltaY, point.x, point.y));
                     }, onDoubleClick: (e) => {
@@ -71,11 +71,17 @@ function Lightbox({ src, alt, open, onOpenChange }) {
  * A thumbnail that opens the same image large. The button is the picture, so there is nothing to aim at.
  * The image is bytes where the host keeps them; until they are here a quiet square stands in for it.
  */
-export function ImageThumb({ source, alt, className }) {
-    const [open, setOpen] = useState(false);
+export function ImageThumb({ source, alt, className, aspect, actions, open: openProp, onOpenChange }) {
+    const [ownOpen, setOwnOpen] = useState(false);
+    const open = openProp ?? ownOpen;
+    const setOpen = (next) => {
+        setOwnOpen(next);
+        onOpenChange?.(next);
+    };
     const { url: src, failure } = source;
+    const ratio = aspect === undefined ? undefined : { aspectRatio: aspect };
     if (src === null) {
-        return (_jsx("span", { className: "grid size-16 place-items-center rounded-lg border border-border bg-surface-sunken text-text-faint", children: failure !== null && (_jsx(Tooltip, { label: failure, children: _jsx(Icon, { icon: ImageOff, size: 14 }) })) }));
+        return (_jsx("span", { className: clsx('grid place-items-center rounded-lg border border-border bg-surface-sunken text-text-faint', aspect === undefined ? 'size-16' : 'w-full'), style: ratio, children: failure !== null && (_jsx(Tooltip, { label: failure, children: _jsx(Icon, { icon: ImageOff, size: 14 }) })) }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx("button", { className: "block overflow-hidden rounded-lg border border-border", onClick: () => setOpen(true), children: _jsx("img", { src: src, alt: alt, className: className }) }), _jsx(Lightbox, { src: src, alt: alt, open: open, onOpenChange: setOpen })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: clsx('block overflow-hidden rounded-lg border border-border', aspect !== undefined && 'w-full'), style: ratio, onClick: () => setOpen(true), children: _jsx("img", { src: src, alt: alt, className: clsx(aspect !== undefined && 'size-full object-contain', className) }) }), _jsx(Lightbox, { src: src, alt: alt, open: open, onOpenChange: setOpen, actions: actions })] }));
 }

package/dist/chat/ui/Markdown.d.ts

@@ -1,8 +1,13 @@
 import { type Components, type Options } from 'react-markdown';
-export declare const ReplyMarkdown: import("react").MemoExoticComponent<({ text, streaming, arriving }: {
+import { type ShellCodeBlockContext } from '../../host.js';
+type ShellCodeBlockReply = Pick<ShellCodeBlockContext, 'scopeId' | 'chatId' | 'itemId'> & {
+    streaming: boolean;
+};
+export declare const ReplyMarkdown: import("react").MemoExoticComponent<({ text, streaming, arriving, reply }: {
     text: string;
     streaming: boolean;
     arriving?: boolean;
+    reply?: ShellCodeBlockReply;
 }) => import("react").JSX.Element>;
 export declare const MessageMarkdown: import("react").MemoExoticComponent<({ text, mentions, skills }: {
     text: string;
@@ -16,3 +21,4 @@ export declare const Markdown: import("react").MemoExoticComponent<({ text, brea
     rehypePlugins?: Options['rehypePlugins'];
     componentOverrides?: Components;
 }) => import("react").JSX.Element>;
+export {};