@adecore/agents-react 0.21.1 → 0.22.0

package/src/chat/ui/SubagentInfo.tsx

@@ -1,20 +1,18 @@
-import { Fragment, useState } from 'react';
-import clsx from 'clsx';
+import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ChevronDown } from 'lucide-react';
 import { entryTimeOf, statusWordOf, subagentFacts, taskIdOf } from '../subagent-list';
 import { useSubagentItem } from '../subagent-view';
 import { StatusIcon } from './ChatActivity';
-import { Markdown } from './Markdown';
-import { Icon, useNow } from '@adecore/ui';
+import { SubagentActions, SubagentBreadcrumb } from './SubagentControls';
+import { useNow } from '@adecore/ui';
 import { useModelName } from '../../agents/model-name';
 import { useChatRow } from '../../state/chats';
 import { chatHost } from '../../host';
 import { useChatScope } from '../../scope';
 
 /*
- * What a sub-agent is, over its conversation: its state and time, the model it runs on and what it
- * spent, and the task it was given behind a fold. Nothing for a conversation whose row the thread lost.
+ * What a sub-agent is, over its conversation: the way down to it, its state and time, the model it runs on
+ * and what it spent, and the way out. Only the way down and out for a conversation whose row the thread lost.
  */
 export function SubagentInfo({ chatId, toolUseId }: { chatId: string; toolUseId: string }) {
     const { t } = useTranslation('agent-chat');
@@ -24,43 +22,27 @@ export function SubagentInfo({ chatId, toolUseId }: { chatId: string; toolUseId:
     const task = chatHost().tasks.useTask(id, item === null ? null : taskIdOf(item));
     const modelName = useModelName(provider, item?.model ?? '');
     const now = useNow(1000, item?.status === 'running');
-    const [open, setOpen] = useState(false);
-    if (item === null) {
-        return null;
-    }
-    const word = statusWordOf(item, task);
-    const facts = subagentFacts(item, item.model === undefined ? null : modelName);
+    const word = item === null ? null : statusWordOf(item, task);
+    const facts = item === null ? [] : subagentFacts(item, item.model === undefined ? null : modelName);
     return (
-        <section aria-label={t('subagents.info.label')} className="shrink-0 border-b border-border px-4 py-2">
-            <div className="chat-column-content flex flex-col gap-2">
-                <div className="flex min-w-0 items-center gap-2 text-xs text-text-faint">
-                    <StatusIcon word={word} />
-                    <span className="sr-only">{t(`common.status.${word}`)}</span>
-                    <span className="shrink-0 text-text-muted tabular-nums">{entryTimeOf(item, task, now)}</span>
-                    {facts.map((fact) => (
-                        <Fragment key={fact}>
-                            <span aria-hidden="true">·</span>
-                            <span className="min-w-0 truncate">{fact}</span>
-                        </Fragment>
-                    ))}
-                    <span className="grow" />
-                    {item.prompt && (
-                        <button
-                            type="button"
-                            className="flex shrink-0 items-center gap-1.5 text-text-muted hover:text-text"
-                            aria-expanded={open}
-                            onClick={() => setOpen((current) => !current)}
-                        >
-                            <Icon icon={ChevronDown} size={12} className={clsx('transition-transform', open && 'rotate-180')} />
-                            {open ? t('subagents.info.hideTask') : t('subagents.info.showTask')}
-                        </button>
-                    )}
-                </div>
-                {open && item.prompt && (
-                    <div className="max-h-60 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 text-xs select-text">
-                        <Markdown text={item.prompt} />
-                    </div>
+        <section aria-label={t('subagents.info.label')} className="shrink-0 border-b border-border px-4 py-1.5">
+            <div className="flex min-w-0 items-center gap-2 text-xs text-text-faint">
+                <SubagentBreadcrumb chatId={chatId} className="max-w-1/3 shrink-0 font-medium" />
+                {item !== null && word !== null && (
+                    <>
+                        <StatusIcon word={word} />
+                        <span className="sr-only">{t(`common.status.${word}`)}</span>
+                        <span className="shrink-0 text-text-muted tabular-nums">{entryTimeOf(item, task, now)}</span>
+                    </>
                 )}
+                {facts.map((fact) => (
+                    <Fragment key={fact}>
+                        <span aria-hidden="true">·</span>
+                        <span className="min-w-0 truncate">{fact}</span>
+                    </Fragment>
+                ))}
+                <span className="grow" />
+                <SubagentActions chatId={chatId} />
             </div>
         </section>
     );

package/src/chat/ui/SubagentStopButton.tsx

@@ -30,7 +30,8 @@ export function SubagentStopButton({
     }
     const send = (): void => {
         void actions.stopSubagent(chatId, item.toolUseId).catch((e: unknown) => {
-            const description = e instanceof Error ? e.message : t('subagents.noAnswer');
+            const stale = e instanceof Error && 'code' in e && e.code === 'subagent-stale';
+            const description = stale ? t('subagents.stale') : e instanceof Error ? e.message : t('subagents.noAnswer');
             chatHost().notify({ kind: 'error', title: t('subagents.stopFailed'), description });
         });
     };

package/src/chat/ui/SubagentTimeline.tsx

@@ -136,8 +136,7 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
                                 loadEarlier();
                             }}
                         >
-                            {/* The same menu the chat's own thread has; this transcript is read-only, so the chat
-                    it belongs to is not passed on and the fork item stays out. */}
+                            {/* The chat's own menu; this transcript is read-only, so no chat is passed and the fork item stays out. */}
                             <ContextMenu.Root>
                                 <ContextMenu.Trigger
                                     ref={threadRef}

package/src/chat/ui/Timeline.tsx

@@ -1,6 +1,6 @@
-import { type CSSProperties, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { type CSSProperties, type RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';
 import clsx from 'clsx';
 import { LoaderCircle } from 'lucide-react';
 import type { ChatBookmark } from '@adecore/agent-contracts';
@@ -16,6 +16,7 @@ import {
     registerTurnJumper,
     setTimelineAtEnd,
     wantsEarlier,
+    type ItemJumpOptions,
     type ReadingAnchor,
     type TurnTarget
 } from '../timeline-scroll';
@@ -66,6 +67,14 @@ import { useModelName } from '../../agents/model-name';
 import { ContextMenu, EmptyState, ErrorBoundary, Icon, SectionLabel } from '@adecore/ui';
 
 const ESTIMATED_ROW_PX = 56;
+// How long a jump waits for a thread that is still loading before it calls the item missing.
+const JUMP_THREAD_WAIT_MS = 8000;
+
+/* A jump puts its row at the top and stops following the end, so the reader stays where they landed. */
+function showRowAtTop(virtualizer: Virtualizer<HTMLDivElement, Element>, followRef: RefObject<boolean>, index: number): void {
+    followRef.current = false;
+    virtualizer.scrollToIndex(index, { align: 'start' });
+}
 
 /*
  * A thread before its first message: which model answers, what the lines into this node let it read,
@@ -216,7 +225,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
     const marks = useMemo(() => bookmarkRows(rows, bookmarks ?? [], items ?? {}), [rows, bookmarks, items]);
     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<{ itemId: string; block?: UiReplyTarget; key: string } | null>(null);
+    const [seeking, setSeeking] = useState<{ itemId: string; block?: UiReplyTarget; key: string; options?: ItemJumpOptions } | null>(null);
     const [landing, setLanding] = useState<{ target: UiReplyTarget; key: string } | null>(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<{ turnId: string; target: TurnTarget } | null>(null);
@@ -288,7 +297,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         [chatId]
     );
 
-    // The client does not run the React Compiler, so its memoization rule has nothing to break here.
+    // Nothing here builds with the React Compiler, so its memoization rule has nothing to break.
     // oxlint-disable-next-line react/incompatible-library
     const virtualizer = useVirtualizer({
         count: rows.length,
@@ -307,11 +316,9 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
     });
     const tail = lastReplyLength ?? rows.length;
     /*
-     * The rows are measured as they render, so the end of the list moves while it is drawn: a diff
-     * that highlights, an image that loads, a tool row that grows a line of output. `scrollToIndex`
-     * aims at where the row was when it was asked, which is what left the thread short of the end.
-     * The scroller's own bottom is a fact rather than an estimate, and the total size changing is
-     * what says a row was measured again, so this runs for every one of those.
+     * Rows are measured as they render, so the end moves while it is drawn (a diff that highlights, an
+     * image that loads). `scrollToIndex` aims at where a row was when asked and fell short; the
+     * scroller's own bottom is a fact, and a new total size says a row was measured again.
      */
     const totalSize = virtualizer.getTotalSize();
     useLayoutEffect(() => {
@@ -361,8 +368,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
 
     /*
      * Where each message starts, from the virtualizer's measurements (an estimate for a row it never
-     * drew), so reading the scroll position costs no layout. The virtualizer renders this component on
-     * every scroll already.
+     * drew), so reading the scroll position costs no layout.
      */
     const measurements = virtualizer.measurementsCache;
     const starts = ticks.map((tick) => measurements[tick.rowIndex]?.start ?? tick.rowIndex * ESTIMATED_ROW_PX);
@@ -418,8 +424,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
             setSeeking({ itemId: tick.bookmark.itemId, key: keyOf(chatId) });
             return;
         }
-        followRef.current = false;
-        virtualizer.scrollToIndex(tick.rowIndex, { align: 'start' });
+        showRowAtTop(virtualizer, followRef, tick.rowIndex);
     };
 
     useLayoutEffect(() => {
@@ -439,8 +444,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
             } else {
                 setSeeking(null);
                 if (jump.kind === 'row') {
-                    followRef.current = false;
-                    virtualizer.scrollToIndex(jump.index, { align: 'start' });
+                    showRowAtTop(virtualizer, followRef, jump.index);
                     setLanding({ target: seeking.block, key: seeking.key });
                 }
             }
@@ -449,11 +453,17 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         const index = rows.findIndex((row) => row.id === seeking.itemId);
         if (index !== -1) {
             setSeeking(null);
-            followRef.current = false;
-            virtualizer.scrollToIndex(index, { align: 'start' });
+            showRowAtTop(virtualizer, followRef, index);
+            if (seeking.options?.flash) {
+                useTimelineFlash.getState().flash(seeking.key, seeking.itemId, false);
+            }
+            return;
+        }
+        // The thread has not loaded yet, so nothing says the item is missing; the effect below bounds the wait.
+        if (items === undefined) {
             return;
         }
-        const item = items?.[seeking.itemId];
+        const item = items[seeking.itemId];
         if (item === undefined && cursor !== null) {
             loadEarlier();
             return;
@@ -464,12 +474,24 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
             return;
         }
         setSeeking(null);
+        seeking.options?.onMissing?.();
     }, [seeking, rows, items, turns, virtualizer, cursor, loadEarlier, keyOf, chatId]);
+    const waitingForThread = seeking !== null && items === undefined;
+    useEffect(() => {
+        if (!waitingForThread) {
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            setSeeking(null);
+            seeking?.options?.onMissing?.();
+        }, JUMP_THREAD_WAIT_MS);
+        return () => window.clearTimeout(timer);
+    }, [waitingForThread, seeking]);
     useEffect(
         () =>
-            registerItemJumper(keyOf(chatId), (itemId) => {
+            registerItemJumper(keyOf(chatId), (itemId, options) => {
                 setLanding(null);
-                setSeeking({ itemId, key: keyOf(chatId) });
+                setSeeking({ itemId, key: keyOf(chatId), options });
             }),
         [keyOf, chatId]
     );
@@ -505,8 +527,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         const found = changes !== -1 ? changes : rows.findIndex((row) => row.id === opening?.id || row.id === `start-${turnId}` || row.id === `fold-${turnId}`);
         if (found !== -1) {
             setRevealing(null);
-            followRef.current = false;
-            virtualizer.scrollToIndex(found, { align: 'start' });
+            showRowAtTop(virtualizer, followRef, found);
             useTimelineFlash.getState().flash(keyOf(chatId), rows[found]!.id, changes !== -1);
             return;
         }
@@ -564,8 +585,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
             return;
         }
         subagents.add(found.branch.id);
-        followRef.current = false;
-        virtualizer.scrollToIndex(found.index, { align: 'start' });
+        showRowAtTop(virtualizer, followRef, found.index);
     };
 
     return (

package/src/chat/ui/TimelineMenu.tsx

@@ -11,11 +11,7 @@ import { useChatRow } from '../../state/chats';
 import { openFileLink, useFileLinkCwd, useFileLinkScopeId } from './file-links';
 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
- * is text a person may want out of it, and a whole message, a code block or the markdown an answer
- * was written in are each a different amount of that.
- */
+/* The menu behind a right-click in a thread, mostly for copying: a whole message, a code block or an answer's markdown. */
 export function TimelineMenuPopup({
     target,
     thread,
@@ -88,10 +84,8 @@ export function TimelineMenuPopup({
 }
 
 /*
- * Place a bookmark on a message, or rename and remove the one it has: the same rows from the thread
- * and from the strip beside it. `onName` runs when a row opens the name field, which sits on the
- * bookmark's line over the message and so has to be on screen; the strip scrolls there, the thread
- * was clicked on it.
+ * Place a bookmark on a message, or rename and remove the one it has, from the thread and from the strip.
+ * `onName` runs when a row opens the name field, which sits over the message and so has to be on screen.
  */
 export function BookmarkMenuItems({ chatId, itemId, onName }: { chatId: string; itemId: string; onName?: () => void }) {
     const { t } = useTranslation('agent-chat');

package/src/chat/ui/UnifiedDiff.tsx

@@ -7,9 +7,8 @@ import { useDiffTheme } from './diff-theme';
 import { fullFileDiff, type DiffContents } from './full-diff';
 
 /*
- * A patch the CLI reported itself (Codex writes unified diffs). The renderer needs a file header
- * to know what it is looking at, and a CLI that only sends hunks gets one from the path we know.
- * A diff without hunks at all is shown as its own lines, so nothing is ever swallowed.
+ * A patch the CLI reported itself. The renderer needs a file header, which a CLI that only sends hunks
+ * gets from the path we know; a diff without hunks is shown as its own lines, so nothing is swallowed.
  */
 function asPatch(change: ChatFileChange): string | null {
     if (!/^@@/m.test(change.diff)) {
@@ -23,8 +22,7 @@ function asPatch(change: ChatFileChange): string | null {
     return `--- ${from}\n+++ ${to}\n${change.diff}`;
 }
 
-/* Lets a diff with a view of its own run to the bottom of it, so the scrollbar of a short one sits
-   there instead of under its last line; the lines themselves keep their height. */
+/* Lets a diff with a view of its own run to its bottom, so a short one's scrollbar sits there and not under its last line. */
 const FILL_CSS = `
 :host { display: flex; flex-direction: column; flex-grow: 1; }
 pre { flex-grow: 1; align-content: start; }

package/src/chat/ui/VisualFrame.tsx

@@ -28,10 +28,9 @@ function personActsIn(frame: HTMLIFrameElement): boolean {
 }
 
 /*
- * One visual's page in a frame on the thread's own ground. The frame loads the app's sandbox host
- * page and the bridge hands it the page and the theme. The frame never gets `allow-same-origin`,
- * which keeps the page on an opaque origin even when the host page is served on the app's own. Its
- * box keeps one height while the page loads and when it fails, so nothing under it moves.
+ * One visual's page in a frame that loads the app's sandbox host page; the bridge hands it the page and
+ * the theme. The frame never gets `allow-same-origin`, which keeps the page on an opaque origin even
+ * when the host page is served on the app's own. Its box keeps one height while it loads or fails.
  */
 export function VisualFrame({ chatId, visual, fill = false, className }: VisualFrameProps) {
     const { t } = useTranslation('agent-chat');

package/src/chat/ui/composer/keys.ts

@@ -60,25 +60,35 @@ export function enterAction(keys: EnterKeys, { inOpenFence, list, column }: Ente
     return list.empty ? 'leave-list' : 'continue-list';
 }
 
-/* Whether `pos` sits inside a fenced code block that has an opening fence and no closing one yet. */
-export function inOpenFence(tree: Tree, pos: number): boolean {
+/* The innermost fenced code block around `pos`, if any. */
+function enclosingFence(tree: Tree, pos: number): SyntaxNode | null {
     for (let node: SyntaxNode | null = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
         if (node.name === 'FencedCode') {
-            return pos > node.from && node.getChildren('CodeMark').length < 2;
+            return node;
         }
     }
-    return false;
+    return null;
+}
+
+/* A fence nobody has closed yet has its opening mark only. */
+function isOpenFence(fence: SyntaxNode): boolean {
+    return fence.getChildren('CodeMark').length < 2;
+}
+
+/* Whether `pos` sits inside a fenced code block that has an opening fence and no closing one yet. */
+export function inOpenFence(tree: Tree, pos: number): boolean {
+    const fence = enclosingFence(tree, pos);
+    return fence !== null && pos > fence.from && isOpenFence(fence);
 }
 
 /* Whether `pos` sits in the body of a fenced code block, open or closed: below its opening line and before its end. */
 export function inFenceBody(tree: Tree, text: string, pos: number): boolean {
-    for (let node: SyntaxNode | null = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
-        if (node.name === 'FencedCode') {
-            const openingEnd = text.indexOf('\n', node.from);
-            return openingEnd !== -1 && pos > openingEnd && (pos < node.to || node.getChildren('CodeMark').length < 2);
-        }
+    const fence = enclosingFence(tree, pos);
+    if (fence === null) {
+        return false;
     }
-    return false;
+    const openingEnd = text.indexOf('\n', fence.from);
+    return openingEnd !== -1 && pos > openingEnd && (pos < fence.to || isOpenFence(fence));
 }
 
 /* The spaces Tab inserts at `column`, up to the next stop of four, the way a code editor lines up. */
@@ -97,7 +107,7 @@ export function inCode(tree: Tree, text: string, pos: number): boolean {
     let blockFrom: number | null = null;
     for (let node: SyntaxNode | null = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
         if (node.name === 'FencedCode') {
-            return pos > node.from && (pos < node.to || node.getChildren('CodeMark').length < 2);
+            return pos > node.from && (pos < node.to || isOpenFence(node));
         }
         if (node.name === 'InlineCode' && pos > node.from && pos < node.to) {
             return true;

package/src/chat/ui/composer/menu-aria.ts

@@ -0,0 +1,29 @@
+export interface ComposerMenuAriaInput {
+    label: string;
+    listId: string;
+    open: boolean;
+    /* Counts across every group of the menu, the way the keyboard moves through it. */
+    activeIndex: number;
+    count: number;
+}
+
+/* The index that still points at an option once the list has shrunk under a stale one. */
+export function clampMenuIndex(index: number, count: number): number {
+    return Math.min(index, Math.max(count - 1, 0));
+}
+
+export function optionIdOf(listId: string, index: number): string {
+    return `${listId}-${index}`;
+}
+
+/*
+ * The attributes the editor's content element takes while a suggestion menu stands beside it. The
+ * element keeps its `textbox` role; ARIA 1.2 lets it name the option the arrow keys are on.
+ */
+export function composerMenuAria({ label, listId, open, activeIndex, count }: ComposerMenuAriaInput): Record<string, string> {
+    return {
+        'aria-label': label,
+        'aria-autocomplete': 'list',
+        ...(open && count > 0 ? { 'aria-controls': listId, 'aria-activedescendant': optionIdOf(listId, activeIndex) } : {})
+    };
+}

package/src/chat/ui/intelligent-ui/render-context.ts

@@ -1,9 +1,9 @@
 import { createContext, type ReactNode } from 'react';
 import type { UiComponentName, UiProps, UiViewNode } from '@adecore/intelligent-ui';
-
-export type { UiLinkTarget } from '@adecore/intelligent-ui/links';
 import type { UiLinkTarget } from '@adecore/intelligent-ui/links';
 
+export type { UiLinkTarget };
+
 /* How the host lets a link be drawn: a chip it can open, or plain text it cannot. */
 export interface UiLink {
     state: 'chip' | 'plain';

package/src/chat/ui/quote-selection.ts

@@ -4,7 +4,8 @@ import { quoteOf } from '../quote';
 /* The text of an answer (`rows/MessageRows.tsx`), the only part of a thread a selection quotes from. */
 const ANSWER = '[data-quote-answer]';
 
-export type QuoteTaker = (quote: string) => void;
+/* `itemId` is the reply the quote came from, when the selection sits in a row that names one. */
+export type QuoteTaker = (quote: string, itemId: string | null) => void;
 
 /* Registers the composer below a thread as the one its quote button hands a quote to, until the returned call. */
 export const QuoteTakerContext = createContext<((take: QuoteTaker) => () => void) | null>(null);
@@ -35,8 +36,8 @@ function selectsOutside(range: Range, answer: Element): boolean {
     return false;
 }
 
-/* The quote the selection makes, when it lies in one answer of this thread. */
-export function selectedAnswerQuote(selection: Selection | null, thread: HTMLElement | null): string | null {
+/* The quote the selection makes, when it lies in one answer of this thread, and the reply it was taken from. */
+export function selectedAnswerQuote(selection: Selection | null, thread: HTMLElement | null): { text: string; itemId: string | null } | null {
     if (thread === null || selection === null || selection.isCollapsed || selection.rangeCount === 0) {
         return null;
     }
@@ -49,5 +50,6 @@ export function selectedAnswerQuote(selection: Selection | null, thread: HTMLEle
     if (!inside && selectsOutside(range, answer)) {
         return null;
     }
-    return quoteOf(selection.toString());
+    const text = quoteOf(selection.toString());
+    return text === null ? null : { text, itemId: answer.closest('[data-find-item]')?.getAttribute('data-find-item') ?? null };
 }

package/src/chat/ui/rehype-chips.ts

@@ -1,6 +1,6 @@
 import { chipText, tokenizeChips, type ChipSegment } from '../mentions';
 
-/* Just the part of hast this plugin touches; the package's own types are not a dependency of the client. */
+/* Just the part of hast this plugin touches; the package's own types are not a dependency here. */
 interface HastText {
     type: 'text';
     value: string;

package/src/chat/ui/rehype-fade.ts

@@ -1,4 +1,4 @@
-/* Just the part of hast this plugin touches; the package's own types are not a dependency of the client. */
+/* Just the part of hast this plugin touches; the package's own types are not a dependency here. */
 interface HastText {
     type: 'text';
     value: string;

package/src/chat/ui/remark-html-as-text.ts

@@ -1,4 +1,4 @@
-/* Just the part of mdast this plugin touches; the package's own types are not a dependency of the client. */
+/* Just the part of mdast this plugin touches; the package's own types are not a dependency here. */
 interface MdastNode {
     type: string;
     value?: string;

package/src/chat/ui/rows/MessageRows.tsx

@@ -11,10 +11,13 @@ import type {
     ChatUiChoiceOrigin,
     ChatUserItem
 } from '@adecore/agent-contracts';
+import { WAITING_NOTE_PREFIX } from '@adecore/agent-contracts';
 import { fileBadge, formatBytes, isImageAttachment } from '../../attachments';
 import { useChatRow, useCurrentItem } from '../../../state/chats';
 import { chatHost } from '../../../host';
 import { useChatScope } from '../../../scope';
+import { splitQuote } from '../../quote';
+import { jumpToTimelineItem } from '../../timeline-scroll';
 import { useProviders } from '../../../state/providers';
 import { ChatReferenceChip } from '../ChatReferenceChip';
 import { ImageThumb } from '../ImageView';
@@ -86,7 +89,19 @@ export function UserRow({ chatId, item }: { chatId: string; item: ChatUserItem }
     const long = item.text.split('\n').length > USER_FOLD_LINES || item.text.length > USER_FOLD_CHARS;
     const attachments = item.attachments ?? [];
     const chats = item.chats ?? [];
+    const [missing, setMissing] = useState(false);
+    const { keyOf } = useChatScope();
     useOpenForFind(item.id, 'text', setOpen);
+    // A quote only leads somewhere when the message still opens with the blockquote it was sent with.
+    const quoted = item.quoteSource === undefined ? null : splitQuote(item.text);
+    const source = item.quoteSource?.itemId;
+
+    function goToSource(): void {
+        if (source !== undefined) {
+            setMissing(false);
+            jumpToTimelineItem(keyOf(chatId), source, { flash: true, onMissing: () => setMissing(true) });
+        }
+    }
     return (
         <div data-find-item={item.id} className="flex flex-col items-end">
             <MessageHeading>{t('rows.user.heading')}</MessageHeading>
@@ -112,7 +127,31 @@ export function UserRow({ chatId, item }: { chatId: string; item: ChatUserItem }
             {item.text !== '' && (
                 <div className="relative max-w-[80%] rounded-2xl bg-surface-active px-3.5 py-2.5 text-sm wrap-anywhere text-text select-text">
                     <div data-find-field="text" className={clsx(long && !open && FOLD)}>
-                        <MessageMarkdown text={item.text} mentions={item.mentions} skills={item.skills} />
+                        {quoted !== null && source !== undefined ? (
+                            <>
+                                {/* A div, since the quote is block markdown and a button holds none. */}
+                                <Tooltip label={t('composer.quote.goToSource')}>
+                                    <div
+                                        role="button"
+                                        tabIndex={0}
+                                        className="mb-2 cursor-pointer rounded-sm border-l-2 border-border-strong pl-2.5 text-text-muted hover:bg-text/5 hover:text-text focus-visible:outline-2 focus-visible:outline-accent"
+                                        onClick={goToSource}
+                                        onKeyDown={(e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                e.preventDefault();
+                                                goToSource();
+                                            }
+                                        }}
+                                    >
+                                        <MessageMarkdown text={quoted.quote} />
+                                    </div>
+                                </Tooltip>
+                                {missing && <div className="mb-2 text-xs text-text-faint">{t('rows.user.quoteGone')}</div>}
+                                {quoted.rest !== '' && <MessageMarkdown text={quoted.rest} mentions={item.mentions} skills={item.skills} />}
+                            </>
+                        ) : (
+                            <MessageMarkdown text={item.text} mentions={item.mentions} skills={item.skills} />
+                        )}
                     </div>
                     {long && (
                         <button className="mt-1 flex items-center gap-1 text-xs text-text-muted hover:text-text" onClick={() => setOpen((o) => !o)}>
@@ -364,7 +403,7 @@ export function NoteRow({ id, level, text, from }: { id: string; level: 'info' |
                             {open ? t('rows.note.hide') : t('rows.note.show')}
                         </button>
                     )}
-                    {from !== undefined && <OpenChatButton chatId={from} />}
+                    {from !== undefined && <OpenChatButton chatId={from} label={id.startsWith(WAITING_NOTE_PREFIX) ? 'openWaiting' : 'openFork'} />}
                 </div>
                 {open && rest !== '' && (
                     <div data-find-field="output" className="mt-1 text-text-muted select-text">
@@ -376,8 +415,8 @@ export function NoteRow({ id, level, text, from }: { id: string; level: 'info' |
     );
 }
 
-/* "Open fork" on a note a fork sent, while that fork is still in the project. */
-function OpenChatButton({ chatId }: { chatId: string }) {
+/* "Open fork" on a note a fork sent, or "Open to answer" on one about a waiting child, while that chat is still in the project. */
+function OpenChatButton({ chatId, label }: { chatId: string; label: 'openFork' | 'openWaiting' }) {
     const { t } = useTranslation('agent-chat');
     const place = chatHost().useChatPlace(chatId);
     if (place.title === null) {
@@ -385,15 +424,14 @@ function OpenChatButton({ chatId }: { chatId: string }) {
     }
     return (
         <button className="text-text-muted hover:text-text" onClick={place.go}>
-            {t('rows.note.openFork')}
+            {t(`rows.note.${label}`)}
         </button>
     );
 }
 
 /*
- * The header of a turn the agent started itself, in place of the message of the person that is
- * missing. It is one line: what the sub-agent came back with lives on that agent's own row, behind
- * "Show result". When the CLI named the sub-agent it woke up about, the header opens that row.
+ * The header of a turn the agent started itself, in place of a message of the person. What the
+ * sub-agent came back with lives on its own row, which the header opens when the CLI named it.
  */
 export function AgentTurnRow({ label, onOpen }: { label: string; onOpen?: () => void }) {
     const line = 'mb-0.5 flex h-7 w-full items-center gap-2 text-left text-xs text-text-muted';
@@ -430,7 +468,7 @@ export function CompactionRow({ preTokens }: { preTokens: number | null }) {
     );
 }
 
-const DECISION_ICON: Record<Exclude<ChatApprovalItem['decision'], 'pending'>, React.ReactNode> = {
+const DECISION_ICON: Record<Exclude<ChatApprovalItem['decision'], 'pending'>, ReactNode> = {
     allow: <Icon icon={Check} size={12} />,
     'allow-always': <Icon icon={Check} size={12} />,
     deny: <Icon icon={X} size={12} />,

package/src/chat/ui/rows/Rows.tsx

@@ -67,7 +67,9 @@ export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, open
         case 'forks':
             return <ForksRow chatId={chatId} turnId={row.turnId} />;
         case 'changed-files':
-            return <ChangedFilesRow chatId={chatId} turnId={row.turnId} tools={row.tools} diff={row.diff} checkpoint={row.checkpoint} />;
+            return (
+                <ChangedFilesRow chatId={chatId} turnId={row.turnId} tools={row.tools} diff={row.diff} checkpoint={row.checkpoint} baseMoved={row.baseMoved} />
+            );
         case 'approval':
             return <ApprovalHistoryRow item={row.item} />;
         case 'question':