@adecore/agents-react 0.20.0 → 0.21.0

package/dist/chat/ui/Markdown.js

@@ -1,5 +1,5 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, memo, useContext, useMemo } from 'react';
 import clsx from 'clsx';
 import { Zap } from 'lucide-react';
 import ReactMarkdown, {} from 'react-markdown';
@@ -12,8 +12,43 @@ import { splitMarkdownBlocks } from './markdown-blocks.js';
 import { rehypeChips } from './rehype-chips.js';
 import { rehypeFadeWords } from './rehype-fade.js';
 import { remarkHtmlAsText } from './remark-html-as-text.js';
-import { openFileLink, useFileLinkCwd, useFileLinkTarget } from './file-links.js';
+import { chatHost } from '../../host.js';
+import { openFileLink, useFileLinkCwd, useFileLinkScopeId, useFileLinkTarget } from './file-links.js';
 import { FileIcon, Icon } from '@adecore/ui';
+const ShellCodeBlockReplyContext = createContext(null);
+const BlockCodeContext = createContext(false);
+/* Only root children qualify; Markdown's parser decides whether a fence belongs to a list or quote. */
+function remarkShellCodeBlocks() {
+    return (tree, file) => {
+        for (const node of tree.children ?? []) {
+            if (node.type !== 'code') {
+                continue;
+            }
+            const start = node.position?.start.offset;
+            const end = node.position?.end.offset;
+            if (start === undefined || end === undefined) {
+                continue;
+            }
+            const raw = String(file.value).slice(start, end);
+            const opening = /^ {0,3}(`{3,}|~{3,})[ \t]*(sh|bash|zsh)[ \t]*\r?\n/.exec(raw);
+            if (opening === null) {
+                continue;
+            }
+            const body = raw.slice(opening[0].length);
+            const closing = /(?:^|\r?\n) {0,3}(`{3,}|~{3,})[ \t]*$/.exec(body);
+            const closed = closing !== null && closing[1][0] === opening[1][0] && closing[1].length >= opening[1].length;
+            node.data = {
+                ...node.data,
+                hProperties: {
+                    ...node.data?.hProperties,
+                    'data-shell-language': opening[2],
+                    'data-shell-code': closed ? body.slice(0, closing.index) : body,
+                    'data-shell-closed': closed
+                }
+            };
+        }
+    };
+}
 function languageOf(className) {
     return /language-([\w-]+)/.exec(className ?? '')?.[1] ?? 'text';
 }
@@ -26,7 +61,8 @@ const INLINE_CODE = 'rounded-sm bg-surface-sunken px-1 py-px font-mono text-code
  */
 function FileLink({ target, className, children }) {
     const cwd = useFileLinkCwd();
-    return (_jsx("button", { type: "button", className: clsx('cursor-pointer select-text', className), "data-file-path": target.path, "data-file-line": target.line, onClick: () => openFileLink(cwd, target), children: children }));
+    const scopeId = useFileLinkScopeId();
+    return (_jsx("button", { type: "button", className: clsx('cursor-pointer select-text', className), "data-file-path": target.path, "data-file-line": target.line, "data-file-column": target.column, "data-file-end-line": target.endLine, "data-file-directory": target.directory, "data-file-cwd": cwd ?? '', "data-file-scope-id": scopeId ?? '', onClick: () => openFileLink(cwd, target, scopeId), children: children }));
 }
 /* Inline code, which is a file reference often enough that it is worth asking every time. */
 function InlineCode({ text }) {
@@ -55,18 +91,19 @@ function MarkdownLink({ href, children }) {
     }
     return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", children: children }));
 }
+function MarkdownCode({ className, children, plain = false }) {
+    const block = useContext(BlockCodeContext);
+    const text = String(children ?? '');
+    if (block) {
+        return _jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className) });
+    }
+    return plain ? _jsx("code", { className: INLINE_CODE, children: text }) : _jsx(InlineCode, { text: text });
+}
 const components = {
     pre({ children }) {
-        return _jsx(_Fragment, { children: children });
-    },
-    code({ className, children }) {
-        const text = String(children ?? '');
-        // Fenced blocks end with a newline and carry a language; anything else is inline.
-        if (className?.startsWith('language-') || text.includes('\n')) {
-            return _jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className) });
-        }
-        return _jsx(InlineCode, { text: text });
+        return _jsx(BlockCodeContext.Provider, { value: true, children: children });
     },
+    code: MarkdownCode,
     a({ href, children }) {
         return _jsx(MarkdownLink, { href: href, children: children });
     },
@@ -79,11 +116,7 @@ const components = {
 const plainComponents = {
     ...components,
     code({ className, children }) {
-        const text = String(children ?? '');
-        if (className?.startsWith('language-') || text.includes('\n')) {
-            return _jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className) });
-        }
-        return _jsx("code", { className: INLINE_CODE, children: text });
+        return (_jsx(MarkdownCode, { className: className, plain: true, children: children }));
     },
     a({ href, children }) {
         return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", children: children }));
@@ -100,6 +133,7 @@ function replyHeading(level) {
 }
 const replyComponents = {
     ...components,
+    code: ReplyCode,
     h1: replyHeading(1),
     h2: replyHeading(2),
     h3: replyHeading(3),
@@ -107,12 +141,34 @@ const replyComponents = {
     h5: replyHeading(5),
     h6: replyHeading(6)
 };
+function ReplyCode({ className, children, node }) {
+    const reply = useContext(ShellCodeBlockReplyContext);
+    const block = useContext(BlockCodeContext);
+    const properties = node?.properties;
+    const language = properties?.['data-shell-language'];
+    const code = properties?.['data-shell-code'];
+    const context = reply !== null && (language === 'sh' || language === 'bash' || language === 'zsh') && typeof code === 'string'
+        ? {
+            scopeId: reply.scopeId,
+            chatId: reply.chatId,
+            itemId: reply.itemId,
+            language,
+            code,
+            complete: !reply.streaming && properties?.['data-shell-closed'] === true
+        }
+        : null;
+    const text = String(children ?? '');
+    if (block) {
+        return (_jsx(CodeBlock, { code: text.replace(/\n$/, ''), lang: languageOf(className), actions: context !== null ? chatHost().renderShellCodeBlock?.(context) : undefined }));
+    }
+    return _jsx(InlineCode, { text: text });
+}
 /* A picked file or skill in a sent message. The glyph stands in for the sigil the text still carries. */
 function Chip({ kind, value }) {
     if (kind === 'skill') {
         return (_jsxs("span", { className: clsx(CHIP_IN_MESSAGE, SKILL_TONE), children: [_jsx(Icon, { icon: Zap, size: 14, className: "shrink-0 opacity-85" }), _jsx("span", { className: "truncate", children: value })] }));
     }
-    return (_jsxs("span", { className: clsx(CHIP_IN_MESSAGE, MENTION_TONE), "data-file-path": value, children: [_jsx(FileIcon, { path: value, size: 14 }), _jsx("span", { className: "truncate", children: value })] }));
+    return (_jsxs("span", { className: clsx(CHIP_IN_MESSAGE, MENTION_TONE), "data-file-path": value, "data-file-directory": /[\\/]$/.test(value), children: [_jsx(FileIcon, { path: value, size: 14 }), _jsx("span", { className: "truncate", children: value })] }));
 }
 const messageComponents = {
     ...replyComponents,
@@ -125,14 +181,15 @@ const messageComponents = {
 };
 // Module constants, so a render never hands react-markdown a fresh array and makes it parse again.
 const PLUGINS = [remarkGfm];
+const REPLY_PLUGINS = [remarkGfm, remarkShellCodeBlocks];
 const PLUGINS_WITH_BREAKS = [remarkGfm, remarkBreaks];
 const MESSAGE_PLUGINS = [remarkGfm, remarkHtmlAsText, remarkBreaks];
 const FADE_PLUGINS = [rehypeFadeWords];
 const NO_PLUGINS = [];
 /* One block of a reply. It renders no element of its own, so prose still sees the paragraphs as
    direct children and keeps its first and last margins. */
-const ReplyBlock = memo(function ReplyBlock({ text, fade, open }) {
-    return (_jsx(CodeStreamingContext.Provider, { value: open, children: _jsx(ReactMarkdown, { remarkPlugins: PLUGINS, rehypePlugins: fade ? FADE_PLUGINS : NO_PLUGINS, components: replyComponents, children: text }) }));
+const ReplyBlock = memo(function ReplyBlock({ text, fade, open, reply }) {
+    return (_jsx(CodeStreamingContext.Provider, { value: open, children: _jsx(ShellCodeBlockReplyContext.Provider, { value: reply ?? null, children: _jsx(ReactMarkdown, { remarkPlugins: REPLY_PLUGINS, rehypePlugins: fade ? FADE_PLUGINS : NO_PLUGINS, components: replyComponents, children: text }) }) }));
 });
 /*
  * A reply in a chat thread, parsed a block at a time so a delta only parses the block that grows.
@@ -140,9 +197,9 @@ const ReplyBlock = memo(function ReplyBlock({ text, fade, open }) {
  * line at a time as it grows. `arriving` fades in each block as it is added instead, for a reply
  * that is shown a block at a time.
  */
-export const ReplyMarkdown = memo(function ReplyMarkdown({ text, streaming, arriving = false }) {
+export const ReplyMarkdown = memo(function ReplyMarkdown({ text, streaming, arriving = false, reply }) {
     const blocks = useMemo(() => splitMarkdownBlocks(text), [text]);
-    return (_jsx("div", { className: "chat-markdown prose prose-sm max-w-none text-sm", "data-arriving": arriving || undefined, children: blocks.map((block, index) => (_jsx(ReplyBlock, { text: block.text, fade: streaming, open: streaming && block.openFence }, index))) }));
+    return (_jsx("div", { className: "chat-markdown prose prose-sm max-w-none text-sm", "data-arriving": arriving || undefined, children: blocks.map((block, index) => (_jsx(ReplyBlock, { text: block.text, fade: streaming, open: streaming && block.openFence, reply: reply }, index))) }));
 });
 /*
  * A message a person sent. Enter meant a line break, a tag typed without backticks stays the text

package/dist/chat/ui/MessageActions.js

@@ -9,15 +9,14 @@ import { markdownOf, messageTextOf } from '../logic/timeline-copy.js';
 import { chatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatRow, useChats } from '../../state/chats.js';
-import { ButtonGroup, copyText, IconButton } from '@adecore/ui';
+import { ButtonGroup, copyText, IconButton, Tooltip } from '@adecore/ui';
+import { formatClock, formatDateTime, useFormatLocale } from '@adecore/ui/format';
 const COPIED_MS = 1500;
-/*
- * Bookmark, fork and copy under a message, shown while the pointer or the focus is on a
- * `group/message`. The row always takes its height, so the virtualizer never measures it again on a
- * hover. Like the strip's card, it leaves out an action the message cannot take right now.
- */
+const TIMESTAMP_FORMAT = { dateStyle: 'full', timeStyle: 'medium' };
+/* Hidden actions keep their height, so hovering never forces the virtualizer to remeasure. */
 export function MessageActions({ chatId, row }) {
     const { t } = useTranslation('agent-chat');
+    useFormatLocale();
     const scope = useChatScope();
     const { fork } = chatHost();
     const turnId = row.item.turnId;
@@ -49,5 +48,5 @@ export function MessageActions({ chatId, row }) {
             setCopied(true);
         }
     };
-    return (_jsx("div", { role: "toolbar", "aria-label": t('timeline.actions.label'), className: clsx('flex h-7 items-center opacity-0 transition-opacity group-has-focus-visible/message:opacity-100 group-hover/message:opacity-100', row.kind === 'user' ? '-mr-1.5 mt-1.5 justify-end' : '-ml-1.5'), children: !streaming && (_jsxs(ButtonGroup, { render: _jsx("span", {}), children: [bookmark === null && (_jsx(IconButton, { icon: Bookmark, size: "sm", label: t('bookmarks.add'), onClick: () => void placeBookmark(scope, chatId, row.id) })), canFork && turnId !== null && fork !== null && (_jsx(IconButton, { icon: GitFork, size: "sm", label: t('timeline.menu.forkFromHere'), onClick: () => fork(chatId, turnId) })), hasText && (_jsx(IconButton, { icon: copied ? Check : Copy, size: "sm", label: copied ? t('timeline.actions.copied') : t('timeline.menu.copyMessage'), onClick: (e) => copy(e.shiftKey) }))] })) }));
+    return (_jsxs("div", { role: "toolbar", "aria-label": t('timeline.actions.label'), className: clsx('flex h-7 items-center gap-2 opacity-0 transition-opacity group-has-focus-visible/message:opacity-100 group-hover/message:opacity-100', row.kind === 'user' && 'mt-1.5 justify-end'), children: [!streaming && (_jsxs(ButtonGroup, { render: _jsx("span", {}), children: [bookmark === null && (_jsx(IconButton, { icon: Bookmark, size: "sm", label: t('bookmarks.add'), onClick: () => void placeBookmark(scope, chatId, row.id) })), canFork && turnId !== null && fork !== null && (_jsx(IconButton, { icon: GitFork, size: "sm", label: t('timeline.menu.forkFromHere'), onClick: () => fork(chatId, turnId) })), hasText && (_jsx(IconButton, { icon: copied ? Check : Copy, size: "sm", label: copied ? t('timeline.actions.copied') : t('timeline.menu.copyMessage'), onClick: (e) => copy(e.shiftKey) }))] })), _jsx(Tooltip, { label: formatDateTime(row.item.createdAt, TIMESTAMP_FORMAT), children: _jsx("time", { dateTime: new Date(row.item.createdAt).toISOString(), className: clsx('shrink-0 text-xs text-text-faint tabular-nums select-none', row.kind === 'assistant' && 'order-first'), children: formatClock(row.item.createdAt) }) })] }));
 }

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);
@@ -94,7 +98,7 @@ export function SubagentTimeline({ chatId, toolUseId }) {
     const openChild = (step) => {
         show(openBelow(trail, step));
     };
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(SubagentInfo, { chatId: chatId, toolUseId: toolUseId }), state.status === 'loading' && _jsx("div", { className: "chat-column-content px-4 pt-4 text-xs text-text-faint", children: t('subagents.loading') }), state.status === 'failed' && (_jsx(EmptyState, { icon: Bot, children: state.unsupported ? t('subagents.unsupported') : (state.error ?? t('subagents.unreadable')) })), state.status === 'ready' && (_jsx(FileLinkContext.Provider, { value: state.context?.cwd ?? cwd, children: _jsx(ReplyContext.Provider, { value: state.context ?? { provider: state.source === 'codex-thread' ? 'codex' : 'claude' }, children: _jsx("div", { ref: scrollRef, className: "chat-thread relative min-h-0 grow overflow-auto px-4 pt-4 pb-3", 
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(SubagentInfo, { chatId: chatId, toolUseId: toolUseId }), state.status === 'loading' && _jsx("div", { className: "chat-column-content px-4 pt-4 text-xs text-text-faint", children: t('subagents.loading') }), state.status === 'failed' && (_jsx(EmptyState, { icon: Bot, children: state.unsupported ? t('subagents.unsupported') : (state.error ?? t('subagents.unreadable')) })), state.status === 'ready' && (_jsx(FileLinkContext.Provider, { value: state.context?.cwd ?? cwd, children: _jsx(ReplyContext.Provider, { value: state.context ?? { provider: state.source === 'codex-thread' ? 'codex' : 'claude' }, children: _jsx("div", { ref: scrollRef, "data-file-cwd": state.context?.cwd ?? cwd ?? '', "data-file-scope-id": scope.id, className: "chat-thread relative min-h-0 grow overflow-auto px-4 pt-4 pb-3", 
                         // The thread keeps its reader in place itself when a page goes in above.
                         style: { overflowAnchor: 'none' }, onScroll: (event) => {
                             const element = event.currentTarget;
@@ -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;
@@ -395,7 +455,7 @@ export function Timeline({ chatId, composer, overlay }) {
         followRef.current = false;
         virtualizer.scrollToIndex(found.index, { align: 'start' });
     };
-    return (_jsx(FileLinkContext.Provider, { value: info?.cwd ?? null, children: _jsxs("div", { ref: frameRef, className: "relative flex min-h-0 grow flex-col", children: [searching && chatFind.bar, _jsxs(ContextMenu.Root, { children: [_jsx("div", { ref: scrollRef, 
+    return (_jsx(FileLinkContext.Provider, { value: info?.cwd ?? null, children: _jsxs("div", { ref: frameRef, className: "relative flex min-h-0 grow flex-col", "data-file-cwd": info?.cwd ?? '', "data-file-scope-id": scope.id, children: [searching && chatFind.bar, _jsxs(ContextMenu.Root, { children: [_jsx("div", { ref: scrollRef, 
                             // No CSS scroll-padding here: Chromium counts the sticky composer's caret as hidden behind
                             // it and scrolls the thread toward the end on every keystroke.
                             className: "chat-scroll min-h-0 grow overflow-auto", 
@@ -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/TimelineMenu.js

@@ -7,7 +7,7 @@ import { markdownOf, messageTextOf } from '../logic/timeline-copy.js';
 import { chatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatRow } from '../../state/chats.js';
-import { openFileLink, useFileLinkCwd } from './file-links.js';
+import { openFileLink, useFileLinkCwd, useFileLinkScopeId } from './file-links.js';
 import { ContextMenu, copyText, DisabledReason, EDIT_SHORTCUTS, Icon, Kbd, selectAllWithin } from '@adecore/ui';
 /*
  * The menu behind a right-click in a thread. Copy is the reason it exists. Everything in a thread
@@ -23,10 +23,14 @@ export function TimelineMenuPopup({ target, thread, chatId = null }) {
     const markable = chatId !== null && (target.row?.kind === 'user' || target.row?.kind === 'assistant') ? target.row.id : null;
     // A thread outside a chat (a sub-agent's transcript) has no cwd of its own; the app answers for it then.
     const cwd = useFileLinkCwd();
+    const scopeId = useFileLinkScopeId();
     const { fork, fileLinks } = chatHost();
     const openInPreview = () => {
-        if (target.path !== null) {
-            openFileLink(cwd, { path: target.path, ...(target.line === null ? {} : { line: target.line }), directory: false });
+        if (target.file != null) {
+            openFileLink(target.file.cwd, target.file.ref, target.file.scopeId);
+        }
+        else if (target.path !== null) {
+            openFileLink(cwd, { path: target.path, ...(target.line === null ? {} : { line: target.line }), directory: false }, scopeId);
         }
     };
     return (_jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.Item, { disabled: target.selection === '', onClick: () => copyText(target.selection), children: [_jsx(Icon, { icon: Copy, size: 14 }), " ", t('common.action.copy'), " ", _jsx(Kbd, { shortcut: EDIT_SHORTCUTS.copy })] }), message !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(message), children: [_jsx(Icon, { icon: MessageSquare, size: 14 }), " ", t('timeline.menu.copyMessage')] })), target.code !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(target.code ?? ''), children: [_jsx(Icon, { icon: Braces, size: 14 }), " ", t('timeline.menu.copyCode')] })), markdown !== null && (_jsxs(ContextMenu.Item, { onClick: () => copyText(markdown), children: [_jsx(Icon, { icon: FileText, size: 14 }), " ", t('timeline.menu.copyMarkdown')] })), chatId !== null && turnId !== null && fork !== null && (_jsx(DisabledReason, { reason: forkBlocked, children: _jsxs(ContextMenu.Item, { disabled: forkBlocked !== null, onClick: () => fork(chatId, turnId), children: [_jsx(Icon, { icon: GitFork, size: 14 }), " ", t('timeline.menu.forkFromHere')] }) })), chatId !== null && markable !== null && _jsx(BookmarkMenuItems, { chatId: chatId, itemId: markable }), _jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { onClick: () => selectAllWithin(thread.current), children: [_jsx(Icon, { icon: Scan, size: 14 }), " ", t('common.action.selectAll')] }), target.path !== null && fileLinks !== null && (_jsxs(_Fragment, { children: [_jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { onClick: openInPreview, children: [_jsx(Icon, { icon: Eye, size: 14 }), " ", t('timeline.menu.openInPreview')] })] }))] }));

package/dist/chat/ui/file-links.d.ts

@@ -1,5 +1,6 @@
 import { type FileRef } from '../../host.js';
 export declare const FileLinkContext: import("react").Context<string | null>;
 export declare function useFileLinkCwd(): string | null;
+export declare function useFileLinkScopeId(): string | null;
 export declare function useFileLinkTarget(text: string): FileRef | null;
-export declare function openFileLink(cwd: string | null, ref: FileRef): void;
+export declare function openFileLink(cwd: string | null, ref: FileRef, scopeId?: string | null): void;

package/dist/chat/ui/file-links.js

@@ -1,5 +1,6 @@
 import { createContext, useContext, useMemo } from 'react';
 import { chatHost } from '../../host.js';
+import { ChatScopeContext } from '../../scope.js';
 /*
  * The folder a relative reference in rendered text counts from: a chat's own cwd, which is a
  * worktree as often as it is the project, or the folder of the file an app is drawing. Null where
@@ -9,12 +10,16 @@ export const FileLinkContext = createContext(null);
 export function useFileLinkCwd() {
     return useContext(FileLinkContext);
 }
+export function useFileLinkScopeId() {
+    return useContext(ChatScopeContext)?.id ?? null;
+}
 /* The reference a piece of text names, only where this spot on screen could open it. */
 export function useFileLinkTarget(text) {
     const cwd = useFileLinkCwd();
-    return useMemo(() => chatHost().fileLinks?.target(text, cwd) ?? null, [text, cwd]);
+    const scopeId = useFileLinkScopeId();
+    return useMemo(() => chatHost().fileLinks?.target(text, cwd, scopeId) ?? null, [text, cwd, scopeId]);
 }
 /* A reference followed, the way the app opens a file or a folder. */
-export function openFileLink(cwd, ref) {
-    chatHost().fileLinks?.open(cwd, ref);
+export function openFileLink(cwd, ref, scopeId = null) {
+    chatHost().fileLinks?.open(cwd, ref, scopeId);
 }

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;

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Skeleton } from '@adecore/ui';
+import { uiBlockHead } from './node-text.js';
+import { UiHeadContext } from './render-context.js';
+import { UiBlockFooter } from './UiBlockFooter.js';
+const RELEASE_MS = 200;
+/*
+ * The tallest the card has been, while `active`: a streaming block grows and never shrinks until its
+ * last compile. Then the card eases down to its own height, or drops there for a person who asked
+ * for less motion.
+ */
+function useRisingFloor(active) {
+    const ref = useRef(null);
+    const held = useRef(0);
+    const [floor, setFloor] = useState(0);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (element === null) {
+            return;
+        }
+        if (active) {
+            const observer = new ResizeObserver(() => {
+                const height = Math.ceil(element.getBoundingClientRect().height);
+                held.current = Math.max(held.current, height);
+                setFloor(held.current);
+            });
+            observer.observe(element);
+            return () => {
+                observer.disconnect();
+                setFloor(0);
+            };
+        }
+        // The final render already let go of the floor, so the card measures its own height here.
+        const from = held.current;
+        const to = element.getBoundingClientRect().height;
+        held.current = 0;
+        const reduced = element.ownerDocument.defaultView?.matchMedia('(prefers-reduced-motion: reduce)').matches === true;
+        if (from - to < 1 || reduced) {
+            return;
+        }
+        const release = element.animate([{ minHeight: `${from}px` }, { minHeight: `${to}px` }], { duration: RELEASE_MS, easing: 'ease-out' });
+        return () => release.cancel();
+    }, [active]);
+    return [ref, floor];
+}
+/*
+ * The card of one block, with its footer. Named by its Summary and busy while it streams, but never
+ * live: reading out every compile would be noise. A node fades in as it arrives, without a stagger,
+ * and for a person who asked for less motion it only fades; a node inside another only fades
+ * (`chat-ui-nodes`). Until the first node a skeleton holds the place of the head.
+ */
+export function UiBlockFrame({ nodes, phase, children, className, ...footer }) {
+    const { t } = useTranslation('agent-chat');
+    const streaming = phase === 'streaming';
+    const head = uiBlockHead(nodes);
+    const [ref, floor] = useRisingFloor(streaming);
+    return (_jsx(UiHeadContext, { value: head?.id ?? null, children: _jsxs("div", { ref: ref, role: "group", "aria-label": head === null || head.label === '' ? t('blocks.label') : head.label, "aria-busy": streaming || undefined, className: clsx('flex min-h-11 flex-col rounded-2xl border border-border bg-surface-raised p-2.25', className), style: streaming && floor > 0 ? { minHeight: floor } : undefined, children: [_jsx("div", { className: "flex flex-col gap-3 *:transition-[opacity,translate] *:duration-160 *:ease-out *:starting:opacity-0 motion-safe:*:starting:translate-y-0.5", children: nodes.length === 0 && streaming ? _jsx(Skeleton, { className: "mx-2 my-1 w-2/5" }) : children }), _jsx(UiBlockFooter, { ...footer })] }) }));
+}

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

@@ -0,0 +1,10 @@
+export type UiFallbackProblem = {
+    kind: 'unknown';
+    component: string;
+} | {
+    kind: 'failed';
+};
+export declare function UiFallbackPart({ fallback, problem }: {
+    fallback: string;
+    problem: UiFallbackProblem;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Markdown } from '../Markdown.js';
+/*
+ * One part of a block as the markdown it stands for, in a quiet surface with a line that says why.
+ * A person sees it as a repair, never as an error, so nothing here is red.
+ */
+export function UiFallbackPart({ fallback, problem }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsxs("div", { className: "flex flex-col gap-1 rounded-md bg-surface-hover p-2", children: [_jsx("span", { className: "text-xs text-text-faint", children: problem.kind === 'unknown' ? t('blocks.unknownComponent', { component: problem.component }) : t('blocks.renderFailed') }), fallback !== '' && _jsx(Markdown, { text: fallback, fileLinks: false })] }));
+}