@adecore/agents-react 0.20.1 → 0.21.0

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,4 +1,4 @@
-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 {
@@ -16,3 +16,15 @@ export interface TimelineTarget {
 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

@@ -52,3 +52,29 @@ 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;
         }
     }
@@ -310,12 +319,12 @@ export function deriveTimelineRows(items, options) {
         // 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}`,
@@ -325,17 +334,14 @@ export function deriveTimelineRows(items, options) {
                 hiddenCount: folded.length,
                 expanded
             });
-            if (expanded) {
-                rows.push(...folded);
-            }
         }
-        rows.push(...standing);
+        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/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/SubagentTimeline.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Bot, LoaderCircle } from 'lucide-react';
 import { deriveTimelineRows } from '../logic/timeline.js';
@@ -10,6 +10,8 @@ import { EMPTY_TARGET, readTimelineTarget } from '../logic/timeline-target.js';
 import { openBelow, useSubagentTrail } from '../subagent-view.js';
 import { Row } from './rows/Rows.js';
 import { ReplyContext } from './reply-context.js';
+import { PromptComposer } from './PromptComposer.js';
+import { useProviders } from '../../state/providers.js';
 import { SubagentInfo } from './SubagentInfo.js';
 import { TimelineMenuPopup } from './TimelineMenu.js';
 import { FOLLOW_THRESHOLD_PX, rowRhythm } from './rows/row-rhythm.js';
@@ -26,8 +28,10 @@ const NO_TURNS = new Set();
 export function SubagentTimeline({ chatId, toolUseId }) {
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
+    const connected = useSyncExternalStore(useCallback((changed) => scope.transport.subscribeStatus(changed), [scope]), useCallback(() => scope.transport.status === 'open', [scope]), () => false);
     const { trail, show } = useSubagentTrail(chatId);
     const [state, setState] = useState(INITIAL_CONVERSATION);
+    const denyReason = useProviders((row) => row.providers.find((provider) => provider.kind === state.context?.provider)?.capabilities.denyReason === true);
     const controller = useRef(null);
     const scrollRef = useRef(null);
     const threadRef = useRef(null);
@@ -103,5 +107,5 @@ export function SubagentTimeline({ chatId, toolUseId }) {
                         }, children: _jsxs(ContextMenu.Root, { children: [_jsxs(ContextMenu.Trigger, { ref: threadRef, className: "chat-column-content", onContextMenu: (event) => setTarget(readTimelineTarget(event.target, threadRef.current, rows)), children: [state.loadingEarlier && (_jsxs("div", { className: "pointer-events-none sticky top-0 z-10 flex h-0 justify-center", role: "status", children: [_jsx(Icon, { icon: LoaderCircle, size: 16, className: "animate-spin text-text-faint" }), _jsx("span", { className: "sr-only", children: t('timeline.loadingEarlier') })] })), rows.length === 0 && !state.live && _jsx(EmptyState, { icon: Bot, children: t('rows.subagent.nothingYet') }), rows.map((row, index) => {
                                             const previous = index > 0 ? rows[index - 1] : null;
                                             return (_jsx("div", { "data-item-id": row.id, className: rowRhythm(row, previous), children: _jsx(Row, { row: row, chatId: chatId, toggleGroup: groups.toggle, toggleTurn: () => undefined, toggleSubagent: subagents.toggle, openSubagent: () => undefined, openConversation: openChild }) }, row.id));
-                                        }), state.live && _jsx("div", { className: "chat-live-text pt-1 text-xs", children: t('subagents.working') })] }), _jsx(TimelineMenuPopup, { target: target, thread: threadRef })] }) }) }) }))] }));
+                                        }), state.live && _jsx("div", { className: "chat-live-text pt-1 text-xs", children: t('subagents.working') })] }), _jsx(TimelineMenuPopup, { target: target, thread: threadRef })] }) }) }) })), state.context?.chatId !== undefined && state.pending.length > 0 && (_jsx("div", { className: "chat-column-content shrink-0", children: _jsx(PromptComposer, { chatId: state.context.chatId, pending: state.pending, focused: false, disabled: !connected, hasDraft: false, denyReason: denyReason, children: null }, state.context.chatId) }))] }));
 }

package/dist/chat/ui/Timeline.js

@@ -12,8 +12,9 @@ import { openFromMain, useSubagentTrail } from '../subagent-view.js';
 import { registerItemJumper, registerMessageStepper, registerTimeline, registerTurnJumper, setTimelineAtEnd, wantsEarlier } from '../timeline-scroll.js';
 import { useTimelineFlash } from '../timeline-flash.js';
 import { SCRUBBER_MIN_TICKS, STRIP_INSET_PX, STRIP_WIDTH_PX, messagesInView, stepMessage, threadPaddingLeft, STRIP_CLEARANCE_PX, tickOfRow, ticksOf, ticksWithHits } from '../logic/scrubber.js';
-import { EMPTY_TARGET, readTimelineTarget, withCurrentText } from '../logic/timeline-target.js';
+import { EMPTY_TARGET, readTimelineTarget, revealUiReplyBlock, uiReplyJump, withCurrentText } from '../logic/timeline-target.js';
 import { forkRefusal } from '../logic/fork.js';
+import { UiReplyNavigationContext } from './reply-context.js';
 import { FindRevealContext } from './find-reveal.js';
 import { BookmarkMarker } from './BookmarkMarker.js';
 import { MessageActions } from './MessageActions.js';
@@ -142,9 +143,19 @@ export function Timeline({ chatId, composer, overlay }) {
     const ticks = useMemo(() => ticksOf(rows, marks), [rows, marks]);
     // A message a jump is on its way to; it may first have to open the turn its reply folded into.
     const [seeking, setSeeking] = useState(null);
+    const [landing, setLanding] = useState(null);
     // A turn a jump is on its way to, which waits for the page its messages are on to come in.
     const [revealing, setRevealing] = useState(null);
     const flash = useTimelineFlash((s) => s.target);
+    const revealBlock = useCallback((block) => {
+        setLanding(null);
+        setSeeking({ itemId: block.itemId, block, key: keyOf(chatId) });
+    }, [keyOf, chatId]);
+    const uiNavigation = useMemo(() => ({
+        chatId,
+        reveal: revealBlock,
+        flash: flash?.key === keyOf(chatId) && flash.block ? { itemId: flash.rowId, ...flash.block, nonce: flash.nonce } : null
+    }), [revealBlock, flash, keyOf, chatId]);
     // Whether the thread's text clears the strip depends on the width of the view, which only the thread's own frame tells.
     useEffect(() => {
         const element = frameRef.current;
@@ -299,7 +310,8 @@ export function Timeline({ chatId, composer, overlay }) {
             return;
         }
         if (tick.bookmark !== null) {
-            setSeeking(tick.bookmark.itemId);
+            setLanding(null);
+            setSeeking({ itemId: tick.bookmark.itemId, key: keyOf(chatId) });
             return;
         }
         followRef.current = false;
@@ -309,14 +321,36 @@ export function Timeline({ chatId, composer, overlay }) {
         if (seeking === null) {
             return;
         }
-        const index = rows.findIndex((row) => row.id === seeking);
+        if (seeking.key !== keyOf(chatId)) {
+            setSeeking(null);
+            return;
+        }
+        if (seeking.block) {
+            const jump = uiReplyJump(seeking.block, rows, items, turns.ids, cursor !== null);
+            if (jump.kind === 'earlier') {
+                loadEarlier();
+            }
+            else if (jump.kind === 'turn') {
+                turns.add(jump.turnId);
+            }
+            else {
+                setSeeking(null);
+                if (jump.kind === 'row') {
+                    followRef.current = false;
+                    virtualizer.scrollToIndex(jump.index, { align: 'start' });
+                    setLanding({ target: seeking.block, key: seeking.key });
+                }
+            }
+            return;
+        }
+        const index = rows.findIndex((row) => row.id === seeking.itemId);
         if (index !== -1) {
             setSeeking(null);
             followRef.current = false;
             virtualizer.scrollToIndex(index, { align: 'start' });
             return;
         }
-        const item = items?.[seeking];
+        const item = items?.[seeking.itemId];
         if (item === undefined && cursor !== null) {
             loadEarlier();
             return;
@@ -327,8 +361,34 @@ export function Timeline({ chatId, composer, overlay }) {
             return;
         }
         setSeeking(null);
-    }, [seeking, rows, items, turns, virtualizer, cursor, loadEarlier]);
-    useEffect(() => registerItemJumper(keyOf(chatId), setSeeking), [keyOf, chatId]);
+    }, [seeking, rows, items, turns, virtualizer, cursor, loadEarlier, keyOf, chatId]);
+    useEffect(() => registerItemJumper(keyOf(chatId), (itemId) => {
+        setLanding(null);
+        setSeeking({ itemId, key: keyOf(chatId) });
+    }), [keyOf, chatId]);
+    useLayoutEffect(() => {
+        if (!landing || landing.key !== keyOf(chatId)) {
+            return;
+        }
+        let frame = 0;
+        let attempts = 0;
+        const reveal = () => {
+            const scroller = scrollRef.current;
+            if (scroller && revealUiReplyBlock(scroller, landing.target)) {
+                useTimelineFlash.getState().flash(keyOf(chatId), landing.target.itemId, false, landing.target);
+                setLanding(null);
+            }
+            else if (++attempts < 30) {
+                // Virtual rows mount after scrollToIndex updates the visible range.
+                frame = requestAnimationFrame(reveal);
+            }
+            else {
+                setLanding(null);
+            }
+        };
+        frame = requestAnimationFrame(reveal);
+        return () => cancelAnimationFrame(frame);
+    }, [landing, keyOf, chatId]);
     useLayoutEffect(() => {
         if (revealing === null) {
             return;
@@ -424,7 +484,7 @@ export function Timeline({ chatId, composer, overlay }) {
                                                 const row = rows[virtualRow.index];
                                                 const previous = virtualRow.index > 0 ? rows[virtualRow.index - 1] : null;
                                                 const header = replyHeader(row, previous);
-                                                return (_jsxs(RowContainer, { row: row, previous: previous, index: virtualRow.index, top: virtualRow.start, ref: virtualizer.measureElement, children: [flash !== null && flash.key === keyOf(chatId) && flash.rowId === row.id && (_jsx("span", { className: "chat-flash pointer-events-none absolute inset-0 rounded-lg", "aria-hidden": true }, flash.nonce)), header !== null && (_jsx("div", { className: "chat-column-content w-full", children: _jsx(ReplyHeader, { chatId: chatId, at: header.at }) })), _jsx(FindRevealContext.Provider, { value: chatFind.reveal, children: _jsx(MarkableRow, { row: row, chatId: chatId, bookmark: marks.get(row.id) ?? null, children: _jsx(Row, { row: row, chatId: chatId, toggleGroup: groups.toggle, toggleTurn: turns.toggle, toggleSubagent: subagents.toggle, openSubagent: openSubagent, openConversation: openConversation }) }) })] }, row.id));
+                                                return (_jsxs(RowContainer, { row: row, previous: previous, index: virtualRow.index, top: virtualRow.start, ref: virtualizer.measureElement, children: [flash !== null && flash.key === keyOf(chatId) && flash.rowId === row.id && !flash.block && (_jsx("span", { className: "chat-flash pointer-events-none absolute inset-0 rounded-lg", "aria-hidden": true }, flash.nonce)), header !== null && (_jsx("div", { className: "chat-column-content w-full", children: _jsx(ReplyHeader, { chatId: chatId, at: header.at }) })), _jsx(UiReplyNavigationContext.Provider, { value: uiNavigation, children: _jsx(FindRevealContext.Provider, { value: chatFind.reveal, children: _jsx(MarkableRow, { row: row, chatId: chatId, bookmark: marks.get(row.id) ?? null, children: _jsx(Row, { row: row, chatId: chatId, toggleGroup: groups.toggle, toggleTurn: turns.toggle, toggleSubagent: subagents.toggle, openSubagent: openSubagent, openConversation: openConversation }) }) }) })] }, row.id));
                                             }) })) }), _jsx(QuoteButton, { thread: threadRef, frame: contentRef, taker: quoteTakerRef }), _jsx("div", { ref: composerRef, 
                                         // The card is translucent so the thread shows through it, but the pb-3 strip under it must stay opaque.
                                         className: clsx('relative z-10 shrink-0', composer && 'px-3 pb-3 pt-3 bg-[linear-gradient(to_bottom,transparent_calc(100%-12px),var(--surface)_calc(100%-12px))]'), style: { position: stickyComposer ? 'sticky' : 'relative', bottom: 0 }, children: _jsx(QuoteTakerContext.Provider, { value: registerQuoteTaker, children: composer }) })] }) }), _jsx(TimelineMenuPopup, { target: target, thread: threadRef, chatId: onMainAgent ? chatId : null })] }), drawsVisuals && _jsx(VisualDialogs, { chatId: chatId }), loadingEarlier && !overlay && (_jsxs("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-10 flex justify-center", role: "status", children: [_jsx(Icon, { icon: LoaderCircle, size: 16, className: "animate-spin text-text-faint" }), _jsx("span", { className: "sr-only", children: t('timeline.loadingEarlier') })] })), showsScrubber && !overlay && (_jsx("div", { className: "absolute top-4", style: { left: STRIP_INSET_PX, width: STRIP_WIDTH_PX, bottom: coveredHeight }, children: _jsx(ErrorBoundary, { label: t('timeline.stripFailed'), resetKeys: [ticks.length], children: _jsx(Scrubber, { ticks: ticks, firstInView: inView?.first ?? null, lastInView: inView?.last ?? null, onPick: pick, chat: cardChat, found: found, foundCurrent: foundCurrent }) }) })), overlay && (_jsx("div", { className: "absolute inset-0 z-5 flex flex-col bg-surface", style: { paddingBottom: coveredHeight }, children: overlay }))] }) }));

package/dist/chat/ui/intelligent-ui/UiBlockFooter.d.ts

@@ -0,0 +1,15 @@
+import type { UiLiveStatus } from './render-context.js';
+export interface UiBlockFix {
+    code: string;
+    message: string;
+}
+export interface UiBlockFooterProps {
+    live?: UiLiveStatus | null;
+    answered?: {
+        label: string;
+        at: number;
+    } | null;
+    fixes?: readonly UiBlockFix[];
+    shownAsText?: string | null;
+}
+export declare function UiBlockFooter({ live, answered, fixes, shownAsText }: UiBlockFooterProps): import("react").JSX.Element | null;

package/dist/chat/ui/intelligent-ui/UiBlockFooter.js

@@ -0,0 +1,50 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Lock, Radio, TriangleAlert, Wrench } from 'lucide-react';
+import { Icon, Spinner, Tooltip, useTickingText } from '@adecore/ui';
+import { formatAgo, formatMoment } from '@adecore/ui/format';
+import { useLater } from './use-later.js';
+const NO_FIXES = [];
+const READING_SPINNER_MS = 1000;
+/* The one sign of a live block: what it reads, and when it last read it. A reading spins only after a second. */
+function LivePart({ live }) {
+    const { t } = useTranslation('agent-chat');
+    const slow = useLater(live.state === 'reading', READING_SPINNER_MS);
+    const { readAt } = live;
+    const fresh = live.state === 'fresh' || live.state === 'reading';
+    const ago = useTickingText(() => {
+        if (readAt === null) {
+            return '';
+        }
+        const time = formatAgo(Date.now() - readAt);
+        return fresh ? t('blocks.live.read', { time }) : time;
+    });
+    const source = live.source ?? live.sources[0] ?? '';
+    const icon = slow ? (_jsx(Spinner, { size: 12 })) : live.state === 'failed' ? (_jsx(Icon, { icon: TriangleAlert, size: 12, className: "text-status-needs-you" })) : live.state === 'refused' ? (_jsx(Icon, { icon: Lock, size: 12 })) : (_jsx(Icon, { icon: Radio, size: 12, className: "text-status-idle" }));
+    const words = live.state === 'failed'
+        ? t('blocks.live.failed', { source })
+        : live.state === 'refused'
+            ? t('blocks.live.refused', { source })
+            : t('blocks.live.label');
+    const hint = live.state === 'failed' && live.reason !== undefined
+        ? live.reason
+        : live.sources.length > 0
+            ? t('blocks.live.sources', { sources: live.sources.join(', ') })
+            : null;
+    const body = (_jsxs("span", { tabIndex: hint === null ? undefined : 0, className: "flex items-center gap-1.5", children: [icon, _jsx("span", { children: words }), readAt !== null && live.state !== 'refused' && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("time", { dateTime: new Date(readAt).toISOString(), children: _jsx("span", { ref: ago, className: "tabular-nums" }) })] })), readAt === null && fresh && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: t('blocks.live.notRead') })] }))] }));
+    return hint === null ? body : _jsx(Tooltip, { label: hint, children: body });
+}
+/*
+ * The line under a block, only when it has something to say: live, answered, repaired or drawn as
+ * text, in that order. A hairline of the soft border runs the full width of the card over it.
+ */
+export function UiBlockFooter({ live = null, answered = null, fixes = NO_FIXES, shownAsText = null }) {
+    const { t } = useTranslation('agent-chat');
+    const [fixesOpen, setFixesOpen] = useState(false);
+    const listId = useId();
+    if (live === null && answered === null && fixes.length === 0 && shownAsText === null) {
+        return null;
+    }
+    return (_jsxs("div", { className: "-mx-2.25 mt-2.25 -mb-2.25 flex flex-col gap-1.5 border-t border-border-soft px-4.25 py-2 text-xs text-text-faint", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [live !== null && _jsx(LivePart, { live: live }), answered !== null && (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { children: t('blocks.answered', { label: answered.label }) }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("time", { dateTime: new Date(answered.at).toISOString(), children: formatMoment(answered.at) })] })), fixes.length > 0 && (_jsxs("button", { type: "button", "aria-expanded": fixesOpen, "aria-controls": listId, className: "flex items-center gap-1.5 rounded-sm hover:text-text-muted", onClick: () => setFixesOpen(!fixesOpen), children: [_jsx(Icon, { icon: Wrench, size: 12 }), t('blocks.fixes', { count: fixes.length })] })), shownAsText !== null && (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { children: t('blocks.shownAsText') }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: shownAsText })] }))] }), fixes.length > 0 && (_jsx("ul", { id: listId, hidden: !fixesOpen, className: "flex flex-col gap-0.5 text-text-muted", children: fixes.map((fix, index) => (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { className: "shrink-0 font-mono", children: fix.code }), _jsx("span", { className: "min-w-0", children: fix.message })] }, index))) }))] }));
+}

package/dist/chat/ui/intelligent-ui/UiBlockFrame.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+import type { UiViewNode } from '@adecore/intelligent-ui';
+import { type UiBlockFooterProps } from './UiBlockFooter.js';
+export interface UiBlockFrameProps extends UiBlockFooterProps {
+    nodes: readonly UiViewNode[];
+    phase: 'streaming' | 'final';
+    children: ReactNode;
+    className?: string;
+}
+export declare function UiBlockFrame({ nodes, phase, children, className, ...footer }: UiBlockFrameProps): import("react").JSX.Element;