@adecore/agents-react 0.21.2 → 0.22.1

package/src/chat/ui/intelligent-ui/renderers/choices.tsx

@@ -2,9 +2,10 @@ import { useId, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { ArrowRight, Check } from 'lucide-react';
-import type { UiProps } from '@adecore/intelligent-ui';
+import { uiChoiceLabel, type UiProps } from '@adecore/intelligent-ui';
 import { DisabledReason, Icon, Spinner, Tooltip } from '@adecore/ui';
 import type { UiRendererProps } from '../render-context';
+import { UiFallbackPart } from '../UiFallbackPart';
 import { useLater } from '../use-later';
 
 /* A context this long may run past its two lines, so the row offers all of it in a tooltip. */
@@ -28,7 +29,8 @@ export function ChoicesRenderer({ children, context }: UiRendererProps<UiProps<'
 /*
  * A row that shows what it sends: the label, and under it the context the agent receives. It stays
  * closed while the reply streams, once the block is answered and without a host to send it, and
- * remains focusable then so a screen reader hears why.
+ * remains focusable then so a screen reader hears why. A finished Choice the host would refuse for
+ * its label is no row at all, but its text.
  */
 export function ChoiceRenderer({ node, children, context }: UiRendererProps<UiProps<'Choice'>>) {
     const { t } = useTranslation('agent-chat');
@@ -41,6 +43,9 @@ export function ChoiceRenderer({ node, children, context }: UiRendererProps<UiPr
     const failed = answer === null && context.failedChoiceId === node.id;
     const closed = waiting || unavailable || answer !== null;
     const slow = useLater(chosen && answer.state === 'sending', SPINNER_AFTER_MS);
+    if (!waiting && uiChoiceLabel(node) === null) {
+        return <UiFallbackPart fallback={node.fallback} problem={{ kind: 'failed' }} />;
+    }
     const reason = waiting
         ? t('blocks.choice.waiting')
         : answer === null && unavailable
@@ -67,9 +72,9 @@ export function ChoiceRenderer({ node, children, context }: UiRendererProps<UiPr
         >
             <Icon icon={ArrowRight} size={14} className={clsx('mt-1 shrink-0', primary === true ? 'text-accent' : 'text-text-faint')} />
             <span className="flex min-w-0 grow flex-col">
-                <span className="text-sm font-semibold text-text">{children}</span>
+                <span className="text-sm font-semibold wrap-anywhere text-text">{children}</span>
                 {described && (
-                    <span id={descriptionId} className="line-clamp-2 text-xs text-text-muted">
+                    <span id={descriptionId} className="line-clamp-2 text-xs wrap-anywhere text-text-muted">
                         {detail}
                     </span>
                 )}

package/src/chat/ui/intelligent-ui/renderers/content.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { createContext, useContext, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { UiProps } from '@adecore/intelligent-ui';
-import { PreviewCard } from '@adecore/ui';
+import { PreviewCard, Tooltip } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { chatHost } from '../../../../host';
 import { CodeBlock } from '../../CodeBlock';
@@ -10,6 +10,7 @@ import { CodeStreamingContext } from '../../code-streaming';
 import { ImageThumb } from '../../ImageView';
 import { uiChildrenOf, uiNodeLabel, uiNodeText, uiUrlDomain } from '../node-text';
 import type { UiRendererProps } from '../render-context';
+import { useTruncated } from '../use-truncated';
 
 // The number of every source by its node id, which the list counts in its own order.
 const SourceNumbers = createContext<ReadonlyMap<string, number>>(new Map());
@@ -115,26 +116,41 @@ export function SourceRenderer({ node, context }: UiRendererProps<UiProps<'Sourc
     const number = useContext(SourceNumbers).get(node.id);
     const { title, url } = node.props;
     const { openUrl } = context;
+    const [measureDomain, domainCut] = useTruncated<HTMLSpanElement>();
     const face = (
         <>
-            <span className="w-5 shrink-0 text-right text-text-faint tabular-nums">{number}</span>
-            <span className="min-w-0 truncate text-text">{title}</span>
-            <span className="shrink-0 text-text-faint">{uiUrlDomain(url)}</span>
+            <span className="w-5 shrink-0 self-start text-right text-text-faint tabular-nums">{number}</span>
+            <span className="min-w-0 grow wrap-anywhere text-text">{title}</span>
+            <span ref={measureDomain} className="max-w-1/2 min-w-0 shrink-0 self-start truncate text-text-faint">
+                {uiUrlDomain(url)}
+            </span>
         </>
     );
     return (
         <li data-ui-source={node.id} tabIndex={-1} className="chat-ui-source scroll-my-2 rounded-md">
-            {openUrl === undefined ? (
-                <span className="flex h-8 items-center gap-2 px-2 text-xs">{face}</span>
-            ) : (
-                <button
-                    type="button"
-                    className="flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-xs hover:bg-surface-hover"
-                    onClick={() => openUrl(url)}
-                >
-                    {face}
-                </button>
-            )}
+            {/* The title wraps and the domain may be cut short, so the tooltip says both whole; a row that opens nothing takes focus only while it cuts. */}
+            <Tooltip
+                label={
+                    <>
+                        <span className="block">{title}</span>
+                        <span className="block text-text-muted">{url}</span>
+                    </>
+                }
+            >
+                {openUrl === undefined ? (
+                    <span tabIndex={domainCut ? 0 : undefined} className="flex min-h-8 items-start gap-2 rounded-md px-2 py-2 text-xs">
+                        {face}
+                    </span>
+                ) : (
+                    <button
+                        type="button"
+                        className="flex min-h-8 w-full items-start gap-2 rounded-md px-2 py-2 text-left text-xs hover:bg-surface-hover"
+                        onClick={() => openUrl(url)}
+                    >
+                        {face}
+                    </button>
+                )}
+            </Tooltip>
         </li>
     );
 }

package/src/chat/ui/intelligent-ui/renderers/inputs.tsx

@@ -2,9 +2,10 @@ import { createContext, useContext, type MouseEvent, type ReactNode } from 'reac
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import type { UiBinding, UiProps, UiViewNode } from '@adecore/intelligent-ui';
-import { Button, Checkbox, Segmented, Slider, Switch } from '@adecore/ui';
+import { Button, Checkbox, Segmented, Slider, Switch, Tooltip } from '@adecore/ui';
 import { uiChildrenOf, uiNodeLabel, uiWithUnit } from '../node-text';
 import type { UiRenderContext, UiRendererProps } from '../render-context';
+import { useTruncated } from '../use-truncated';
 
 type Scalar = UiProps<'Item'>['value'];
 
@@ -106,6 +107,9 @@ export function SliderRenderer({ node, context }: UiRendererProps<UiProps<'Slide
     );
 }
 
+/* A label longer than this reads as a sentence, which wraps badly beside another; the options then stand in a column. */
+const SIDE_BY_SIDE_LABEL = 24;
+
 /* Left aligned, never the full width. Each Option is a segment by its place, since a value may be any scalar. */
 export function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Segmented'>>) {
     const { t } = useTranslation('agent-chat');
@@ -119,6 +123,7 @@ export function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Se
                 value={picked}
                 options={options}
                 label={t('blocks.options')}
+                orientation={options.some((option) => option.label.length > SIDE_BY_SIDE_LABEL) ? 'vertical' : 'horizontal'}
                 disabled={binding === null}
                 onValueChange={(id) => {
                     const option = options[Number(id)];
@@ -131,14 +136,20 @@ export function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Se
     );
 }
 
-/* Runs its local action once its own node closed; like an input, it closes once the block is answered. */
+/* Runs its local action once its own node closed; like an input, it closes once the block is answered. A label cut to the button's one line reads whole in its tooltip. */
 export function ButtonRenderer({ node, children, context }: UiRendererProps<UiProps<'Button'>>) {
     const enabled = node.onAction !== undefined && node.complete && context.answer === null && node.props.disabled !== true;
+    const label = uiNodeLabel(node);
+    const [measure, truncated] = useTruncated<HTMLSpanElement>();
     return (
         <div className={clsx('px-2', !node.complete && PENDING)}>
-            <Button variant="secondary" size="sm" disabled={!enabled} onClick={() => node.onAction?.()}>
-                {children}
-            </Button>
+            <Tooltip label={label} disabled={!truncated}>
+                <Button variant="secondary" size="sm" className="max-w-full" disabled={!enabled} onClick={() => node.onAction?.()}>
+                    <span ref={measure} className="min-w-0 truncate">
+                        {children}
+                    </span>
+                </Button>
+            </Tooltip>
         </div>
     );
 }

package/src/chat/ui/intelligent-ui/renderers/links.tsx

@@ -115,11 +115,11 @@ function LinkRow({ target, context, described, children }: { target: UiLinkTarge
         return <UiLinkChip target={target} context={context} />;
     }
     return (
-        <div className="flex min-w-0 items-baseline gap-2 px-2 text-sm">
-            <span className="shrink-0">
+        <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 px-2 text-sm">
+            <span className="max-w-full min-w-0">
                 <UiLinkChip target={target} context={context} />
             </span>
-            <span className="min-w-0 text-text-muted">{children}</span>
+            <span className="min-w-0 wrap-break-word text-text-muted">{children}</span>
         </div>
     );
 }

package/src/chat/ui/intelligent-ui/renderers/text.tsx

@@ -31,20 +31,27 @@ function isLive(context: UiRenderContext): boolean {
     return context.phase === 'streaming' || (context.live !== undefined && context.live !== null && context.live.state !== 'refused');
 }
 
+/* A badge longer than this is a sentence, which a tag cannot wrap; it stands under the title as text instead. */
+const BADGE_AS_TAG = 32;
+
 /* The head of the block when it is the first node, a subheading without an icon further down. */
 export function SummaryRenderer({ node, children }: UiRendererProps<UiProps<'Summary'>>) {
     const headId = useContext(UiHeadContext);
     const head = headId === undefined || headId === node.id;
     const { tone, badge } = node.props;
+    const tag = badge !== undefined && badge !== '' && badge.length <= BADGE_AS_TAG;
     return (
         <div className="flex items-start gap-2 px-2">
             {head && tone !== undefined && <Icon icon={UI_TONE_ICONS[tone]} size={16} className={clsx('mt-0.75 shrink-0', UI_TONE_TEXT[tone])} />}
-            <div className="min-w-0 grow text-sm font-semibold text-balance text-text">{children}</div>
-            {badge !== undefined && badge !== '' && (
-                <Pill shape="tag" tone={tone === undefined ? 'muted' : UI_TONE_PILL[tone]} className="shrink-0">
-                    {badge}
-                </Pill>
-            )}
+            <div className="flex min-w-0 grow flex-wrap items-start gap-x-2 gap-y-1">
+                <div className="max-w-full min-w-0 grow basis-48 text-sm font-semibold text-balance wrap-break-word text-text">{children}</div>
+                {tag && (
+                    <Pill shape="tag" tone={tone === undefined ? 'muted' : UI_TONE_PILL[tone]}>
+                        {badge}
+                    </Pill>
+                )}
+                {!tag && badge !== undefined && badge !== '' && <p className="w-full text-xs wrap-anywhere text-text-muted">{badge}</p>}
+            </div>
         </div>
     );
 }
@@ -117,8 +124,11 @@ export function StepRenderer({ node, children, context }: UiRendererProps<UiProp
                 )}
             </span>
             <span className="sr-only">{t(`blocks.step.${state}`)}</span>
-            <span className={clsx('min-w-0 grow', quiet ? 'text-text-faint' : 'text-text')}>{children}</span>
-            {detail !== undefined && detail !== '' && <span className="shrink-0 text-xs text-text-faint tabular-nums">{detail}</span>}
+            {/* A short detail stays beside the title; one that does not fit beside it takes the line under it. */}
+            <span className="flex min-w-0 grow flex-wrap items-baseline justify-between gap-x-2">
+                <span className={clsx('max-w-full min-w-0 grow basis-48 wrap-break-word', quiet ? 'text-text-faint' : 'text-text')}>{children}</span>
+                {detail !== undefined && detail !== '' && <span className="max-w-full text-xs wrap-anywhere text-text-faint tabular-nums">{detail}</span>}
+            </span>
         </li>
     );
 }

package/src/chat/ui/intelligent-ui/table-data.ts

@@ -21,8 +21,8 @@ export type UiTableCell =
 
 /* Rows shown before a person asks for all of them. */
 export const UI_TABLE_ROWS = 50;
-/* Columns a table without Column children takes from its rows. */
-const DERIVED_COLUMNS = 8;
+/* The furthest a JavaScript Date reaches from the epoch either way, in milliseconds. */
+const DATE_RANGE = 8.64e15;
 const NUMERIC_KINDS: ReadonlySet<UiColumnKind> = new Set(['number', 'bytes', 'duration']);
 
 export function isNumericColumn(column: UiTableColumn): boolean {
@@ -51,7 +51,7 @@ export function uiTableColumns(node: UiViewNode<UiProps<'Table'>>): UiTableColum
     const keys: string[] = [];
     for (const row of rows) {
         for (const key of Object.keys(row)) {
-            if (!keys.includes(key) && keys.length < DERIVED_COLUMNS) {
+            if (!keys.includes(key)) {
                 keys.push(key);
             }
         }
@@ -92,7 +92,7 @@ export function uiTableCell(value: unknown, column: UiTableColumn): UiTableCell
         }
         case 'date': {
             const at = typeof value === 'number' ? value : typeof value === 'string' ? Date.parse(value) : Number.NaN;
-            return Number.isFinite(at) ? { kind: 'date', at } : { kind: 'text', text: textOf(value) };
+            return Number.isFinite(at) && Math.abs(at) <= DATE_RANGE ? { kind: 'date', at } : { kind: 'text', text: textOf(value) };
         }
         case 'file':
             return typeof value === 'string' ? { kind: 'file', path: value } : { kind: 'text', text: textOf(value) };

package/src/chat/ui/intelligent-ui/use-truncated.ts

@@ -0,0 +1,33 @@
+import { useCallback, useState } from 'react';
+
+function cut(element: HTMLElement): boolean {
+    return element.scrollWidth > element.clientWidth + 1;
+}
+
+/*
+ * Whether an element's text is cut short where it stands, for a tooltip or a list of values that shows
+ * it whole exactly then. `within` asks the same of every `.truncate` element inside it instead. Measured
+ * again when the box resizes or the text changes, since neither moves the other.
+ */
+export function useTruncated<T extends HTMLElement>(within = false): [(element: T | null) => (() => void) | undefined, boolean] {
+    const [truncated, setTruncated] = useState(false);
+    const measure = useCallback(
+        (element: T | null) => {
+            if (element === null || typeof ResizeObserver === 'undefined') {
+                return undefined;
+            }
+            const check = () => setTruncated(within ? [...element.querySelectorAll<HTMLElement>('.truncate')].some(cut) : cut(element));
+            check();
+            const resize = new ResizeObserver(check);
+            resize.observe(element);
+            const text = new MutationObserver(check);
+            text.observe(element, { characterData: true, childList: true, subtree: true });
+            return () => {
+                resize.disconnect();
+                text.disconnect();
+            };
+        },
+        [within]
+    );
+    return [measure, truncated];
+}

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,