@adecore/agents-react 0.21.2 → 0.22.0

package/src/chat/ui/PromptComposer.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ArrowDown, Hand, MessageCircleQuestionMark } from 'lucide-react';
+import type { HoldRelease } from '../prompt-hold';
 import { focusPromptHeading, focusPromptStart } from '../../prompts/logic/focus';
 import { orderPrompts, type PendingPrompt } from '../../prompts/logic/prompts';
 import { answerPrompt, isBlockingSubject, promptCreatedAt, promptIdOf, type PromptSubject } from '../../prompts/logic/subjects';
@@ -10,7 +11,14 @@ import { PromptView } from '../../prompts/ui/PromptView';
 import { chatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { useChatActions } from '../actions';
-import { Icon } from '@adecore/ui';
+import { Button, Icon } from '@adecore/ui';
+
+/* Keeps a prompt card behind the draft while the person types; `released` says what lifted the hold last. */
+export interface PromptHold {
+    held: boolean;
+    releasedBy: HoldRelease | null;
+    release(reason: HoldRelease): void;
+}
 
 /* The one being read stays in front; otherwise blocking before optional, oldest first, as everywhere else. */
 function pickSubject(waiting: readonly PromptSubject[], activeId: string | null): PromptSubject | null {
@@ -26,6 +34,7 @@ export function PromptComposer({
     hasDraft,
     denyReason,
     onAllAnswered,
+    hold,
     children
 }: {
     chatId: string;
@@ -38,6 +47,8 @@ export function PromptComposer({
     denyReason: boolean;
     /* Takes the keyboard back to the composer once the last prompt was answered from its card. */
     onAllAnswered?: () => void;
+    /* Without it a card takes the composer's place at once. */
+    hold?: PromptHold;
     children: ReactNode;
 }) {
     const { t } = useTranslation('agent-chat');
@@ -56,10 +67,23 @@ export function PromptComposer({
     const session = usePromptSession({ prompts: subjects, idOf: promptIdOf, pick: pickSubject, disabled });
     const ref = useRef<HTMLDivElement>(null);
     const { active, activeId: activeKey } = session;
-    const expanded = !!active;
+    const asksApproval = active?.kind === 'chat' ? active.item.kind === 'approval' : active?.prompt.asks === 'approval';
+    const held = !!active && (hold?.held ?? false);
+    const expanded = !!active && !held;
+    // The card that waited behind the draft, so a blur that released it is not mistaken for one released long before.
+    const heldKey = useRef<string | null>(null);
     const refocus = useFocusAfterAnswer(activeKey, ref, () => onAllAnswered?.());
 
     useEffect(() => {
+        if (held) {
+            heldKey.current = activeKey;
+        }
+    }, [held, activeKey]);
+
+    useEffect(() => {
+        if (hold?.releasedBy === 'blur' && heldKey.current === activeKey) {
+            return;
+        }
         if (focused && expanded && !elsewhere && !ref.current?.querySelector('.prompt-card')?.contains(document.activeElement)) {
             // Keys meant for the draft may still be coming, and on a button the next Space would answer the card.
             if (hasDraft) {
@@ -68,7 +92,7 @@ export function PromptComposer({
                 focusPromptStart(ref.current);
             }
         }
-    }, [activeKey, expanded, focused, elsewhere, hasDraft]);
+    }, [activeKey, expanded, focused, elsewhere, hasDraft, hold?.releasedBy]);
 
     return (
         <div ref={ref} onPointerDownCapture={session.onPointerDownCapture} onClickCapture={session.onClickCapture}>
@@ -78,11 +102,7 @@ export function PromptComposer({
                     className="flex w-full items-center gap-2 px-3.5 py-3 text-left text-sm text-text-muted hover:text-text"
                     onClick={onShowElsewhere}
                 >
-                    <Icon
-                        icon={(active.kind === 'chat' ? active.item.kind === 'approval' : active.prompt.asks === 'approval') ? Hand : MessageCircleQuestionMark}
-                        size={16}
-                        className="shrink-0 text-status-needs-you"
-                    />
+                    <Icon icon={asksApproval ? Hand : MessageCircleQuestionMark} size={16} className="shrink-0 text-status-needs-you" />
                     <span className="grow">{t('composer.waitingBelow')}</span>
                     <Icon icon={ArrowDown} size={16} className="shrink-0" />
                 </button>
@@ -113,6 +133,15 @@ export function PromptComposer({
                     />
                 </div>
             )}
+            {held && active && (
+                <div role="status" className="flex items-center gap-2 border-b border-border px-3.5 py-2.5">
+                    <Icon icon={asksApproval ? Hand : MessageCircleQuestionMark} size={16} className="shrink-0 text-status-needs-you" />
+                    <span className="grow text-sm text-text-muted">{t(asksApproval ? 'composer.held.approval' : 'composer.held.question')}</span>
+                    <Button size="sm" onMouseDown={(e) => e.preventDefault()} onClick={() => hold?.release('show')}>
+                        {t('composer.held.show')}
+                    </Button>
+                </div>
+            )}
             <div hidden={expanded}>{children}</div>
         </div>
     );

package/src/chat/ui/QuoteButton.tsx

@@ -10,6 +10,7 @@ const EDGE_PX = 40;
 
 interface Offer {
     quote: string;
+    itemId: string | null;
     x: number;
     y: number;
 }
@@ -52,7 +53,7 @@ export function QuoteButton({
             const zoom = box.offsetWidth > 0 ? bounds.width / box.offsetWidth : 1;
             const x = Math.min(Math.max((line.right - bounds.left) / zoom, EDGE_PX), box.offsetWidth - EDGE_PX);
             const y = (line.bottom - bounds.top) / zoom + GAP_PX;
-            setOffer({ quote, x: Math.round(x), y: Math.round(y) });
+            setOffer({ quote: quote.text, itemId: quote.itemId, x: Math.round(x), y: Math.round(y) });
         };
         const press = (): void => {
             pressed = true;
@@ -91,7 +92,7 @@ export function QuoteButton({
             onMouseDown={(e) => e.preventDefault()}
             onClick={() => {
                 document.getSelection()?.removeAllRanges();
-                taker.current?.(offer.quote);
+                taker.current?.(offer.quote, offer.itemId);
                 setOffer(null);
             }}
         >

package/src/chat/ui/SubagentControls.tsx

@@ -21,31 +21,18 @@ export function SubagentTitleCrumb({ chatId, className, children }: { chatId: st
     );
 }
 
-/*
- * The way down after the chat's title, each step a way back up, and a close that goes straight back
- * to the main agent. A bar that does not draw the title itself passes it, and it opens the way.
- * Nothing while the main agent itself is on screen.
- */
-export function SubagentBreadcrumb({ chatId, title, className }: { chatId: string; title?: string; className?: string }) {
+/* The way down to the sub-agent on screen, each step but the last a way back up. Nothing while the main agent is on screen. */
+export function SubagentBreadcrumb({ chatId, className }: { chatId: string; className?: string }) {
     const { t } = useTranslation('agent-chat');
     const { trail, show } = useSubagentTrail(chatId);
-    const subagents = useOpenableSubagents(chatId);
     if (trail.length === 0) {
         return null;
     }
-    const steps = breadcrumbOf(trail);
-    // Only a row of the chat's own thread can be stopped; a grandchild belongs to the sub-agent that opened it.
-    const shown = trail.length === 1 ? subagents.find((item) => item.toolUseId === trail[0]!.toolUseId) : undefined;
     return (
-        <nav aria-label={t('subagents.title')} className={clsx('flex min-w-0 items-center gap-1 text-xs', className)}>
-            {title !== undefined && (
-                <button type="button" className={clsx(CRUMB_LINK, 'min-w-0 shrink')} onClick={() => show(MAIN_AGENT)}>
-                    {title}
-                </button>
-            )}
-            {steps.map((step) => (
+        <nav aria-label={t('subagents.title')} className={clsx('flex min-w-0 items-center gap-1', className)}>
+            {breadcrumbOf(trail).map((step) => (
                 <Fragment key={step.depth}>
-                    <Icon icon={ChevronRight} size={12} className="shrink-0 text-text-faint" />
+                    {step.depth > 1 && <Icon icon={ChevronRight} size={12} className="shrink-0 text-text-faint" />}
                     {step.current ? (
                         <span aria-current="page" className="min-w-0 truncate text-text">
                             {step.label}
@@ -57,8 +44,24 @@ export function SubagentBreadcrumb({ chatId, title, className }: { chatId: strin
                     )}
                 </Fragment>
             ))}
+        </nav>
+    );
+}
+
+/* Stops the sub-agent on screen where that is on offer, and closes it straight back to the main agent. */
+export function SubagentActions({ chatId }: { chatId: string }) {
+    const { t } = useTranslation('agent-chat');
+    const { trail, show } = useSubagentTrail(chatId);
+    const subagents = useOpenableSubagents(chatId);
+    if (trail.length === 0) {
+        return null;
+    }
+    // Only a row of the chat's own thread can be stopped; a grandchild belongs to the sub-agent that opened it.
+    const shown = trail.length === 1 ? subagents.find((item) => item.toolUseId === trail[0]!.toolUseId) : undefined;
+    return (
+        <div className="flex shrink-0 items-center gap-1">
             {shown !== undefined && <SubagentStopButton chatId={chatId} item={shown} size="sm" />}
             <IconButton icon={X} size="sm" label={t('subagents.backToMain')} onClick={() => show(MAIN_AGENT)} />
-        </nav>
+        </div>
     );
 }

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/Timeline.tsx

@@ -16,6 +16,7 @@ import {
     registerTurnJumper,
     setTimelineAtEnd,
     wantsEarlier,
+    type ItemJumpOptions,
     type ReadingAnchor,
     type TurnTarget
 } from '../timeline-scroll';
@@ -66,6 +67,8 @@ 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 {
@@ -222,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);
@@ -451,9 +454,16 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         if (index !== -1) {
             setSeeking(null);
             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]
     );

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/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/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,7 +424,7 @@ 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>
     );
 }

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':

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

@@ -4,6 +4,7 @@ import i18next from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { ChevronRight, FileDiff, X } from 'lucide-react';
 import type { ChatCheckpointDiff, ChatCheckpointFile, ChatFileChange, ChatToolItem, ChatTurnItem } from '@adecore/agent-contracts';
+import type { BaseMoved } from '../../logic/timeline';
 import { fileChanges, liveOutput, readImagePath, toolStartedAt, toolSummary, unifiedChanges, type FileChange } from '../../logic/tools';
 import { useOpenForFind } from '../find-reveal';
 import { chatHost } from '../../../host';
@@ -289,10 +290,13 @@ function ChangedFilesCard({
     added,
     deleted,
     revealNonce = 0,
+    baseMoved,
     children
 }: {
     count: number;
     truncated?: boolean;
+    /* Set when the branch moved during the turn: the count is then what changed in the folder, not only the agent's work. */
+    baseMoved?: BaseMoved | undefined;
     added?: number;
     deleted?: number;
     /* A jump from outside the chat that asked for this card; each new one opens it. */
@@ -315,13 +319,20 @@ function ChangedFilesCard({
                 onClick={() => setExpanded((value) => !value)}
             >
                 <Icon icon={FileDiff} size={12} className="shrink-0" />
-                <span className="shrink-0 font-medium text-text">{t('work.changedFiles', { count })}</span>
+                <span className="shrink-0 font-medium text-text">
+                    {baseMoved === undefined ? t('work.changedFiles', { count }) : t('work.folderChanges', { count })}
+                </span>
                 {truncated && <span className="min-w-0 truncate text-text-faint">{t('work.andMore')}</span>}
                 <span className="grow" />
                 {added !== undefined && <span className="text-chat-added tabular-nums">+{added}</span>}
                 {deleted !== undefined && <span className="text-chat-removed tabular-nums">-{deleted}</span>}
                 <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', expanded && 'rotate-90')} />
             </button>
+            {baseMoved !== undefined && (
+                <div className="pr-3 pb-2 pl-8 text-xs text-text-faint">
+                    {t('work.baseMoved', { from: baseMoved.from.slice(0, 7), to: baseMoved.to.slice(0, 7) })}
+                </div>
+            )}
             {expanded && children}
         </div>
     );
@@ -337,12 +348,14 @@ export function ChangedFilesRow({
     tools,
     diff,
     checkpoint,
+    baseMoved,
     chatId,
     turnId
 }: {
     tools: ChatToolItem[];
     diff: ChatCheckpointDiff | null;
     checkpoint: boolean;
+    baseMoved?: BaseMoved | undefined;
     chatId: string;
     turnId: string;
 }) {
@@ -375,6 +388,7 @@ export function ChangedFilesRow({
         return (
             <ChangedFilesCard
                 revealNonce={revealNonce}
+                baseMoved={baseMoved}
                 count={files.length}
                 truncated={checkpointDiff.truncated}
                 added={files.reduce((sum, file) => sum + file.added, 0)}

package/src/host.ts

@@ -279,6 +279,8 @@ export interface ChatHost {
     useLoginBlocked(scopeId: string): string | null;
     /* The name and the mark of a project of the host, for the usage per project; null draws the folder's own. */
     useProjectLook(scopeId: string, projectId: string | null): { name: string; mark: ReactNode } | null;
+    /* What a person calls the machine the scope's chats run on, or null when it has no name worth saying. */
+    useMachineLabel(scopeId: string): string | null;
     /* Where another chat of the app stands, for a fork's way back and a note from a fork. */
     useChatPlace(chatId: string): ChatPlace;
     /* What a chat may read besides its folder, named under an empty thread. */
@@ -345,6 +347,7 @@ const DEFAULT_HOST: ChatHost = {
     openLogin: null,
     useLoginBlocked: () => null,
     useProjectLook: () => null,
+    useMachineLabel: () => null,
     useChatPlace: () => NOWHERE,
     useContextSources: () => NO_SOURCES,
     useHidesFolder: () => false,