@adecore/agents-react 0.21.2 → 0.22.1

package/dist/chat/ui/intelligent-ui/renderers/choices.js

@@ -3,7 +3,9 @@ import { useId, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { ArrowRight, Check } from 'lucide-react';
+import { uiChoiceLabel } from '@adecore/intelligent-ui';
 import { DisabledReason, Icon, Spinner, Tooltip } from '@adecore/ui';
+import { UiFallbackPart } from '../UiFallbackPart.js';
 import { useLater } from '../use-later.js';
 /* A context this long may run past its two lines, so the row offers all of it in a tooltip. */
 const LONG_CONTEXT = 120;
@@ -17,7 +19,8 @@ export function ChoicesRenderer({ children, context }) {
 /*
  * 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 }) {
     const { t } = useTranslation('agent-chat');
@@ -30,6 +33,9 @@ export function ChoiceRenderer({ node, children, context }) {
     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 _jsx(UiFallbackPart, { fallback: node.fallback, problem: { kind: 'failed' } });
+    }
     const reason = waiting
         ? t('blocks.choice.waiting')
         : answer === null && unavailable
@@ -40,6 +46,6 @@ export function ChoiceRenderer({ node, children, context }) {
             if (!closed) {
                 onChoose?.(node.id);
             }
-        }, children: [_jsx(Icon, { icon: ArrowRight, size: 14, className: clsx('mt-1 shrink-0', primary === true ? 'text-accent' : 'text-text-faint') }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "text-sm font-semibold text-text", children: children }), described && (_jsx("span", { id: descriptionId, className: "line-clamp-2 text-xs text-text-muted", children: detail }))] }), chosen && (_jsxs("span", { className: "mt-0.5 flex shrink-0 items-center gap-1 text-xs text-accent", children: [slow ? _jsx(Spinner, { size: 12 }) : _jsx(Icon, { icon: Check, size: 12 }), answer.state === 'queued' ? t('blocks.choice.queued') : t('blocks.choice.sent')] }))] }));
+        }, children: [_jsx(Icon, { icon: ArrowRight, size: 14, className: clsx('mt-1 shrink-0', primary === true ? 'text-accent' : 'text-text-faint') }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "text-sm font-semibold wrap-anywhere text-text", children: children }), described && (_jsx("span", { id: descriptionId, className: "line-clamp-2 text-xs wrap-anywhere text-text-muted", children: detail }))] }), chosen && (_jsxs("span", { className: "mt-0.5 flex shrink-0 items-center gap-1 text-xs text-accent", children: [slow ? _jsx(Spinner, { size: 12 }) : _jsx(Icon, { icon: Check, size: 12 }), answer.state === 'queued' ? t('blocks.choice.queued') : t('blocks.choice.sent')] }))] }));
     return (_jsxs("div", { className: "flex flex-col gap-1", children: [reason !== null ? (_jsx(DisabledReason, { reason: reason, children: row })) : described && detail.length > LONG_CONTEXT ? (_jsx(Tooltip, { label: detail, children: row })) : (row), failed && (_jsx("p", { role: "alert", className: "px-2 text-xs text-status-error", children: t('blocks.choice.failed') }))] }));
 }

package/dist/chat/ui/intelligent-ui/renderers/content.js

@@ -2,13 +2,14 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import clsx from 'clsx';
 import { createContext, useContext, useId } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PreviewCard } from '@adecore/ui';
+import { PreviewCard, Tooltip } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { chatHost } from '../../../../host.js';
 import { CodeBlock } from '../../CodeBlock.js';
 import { CodeStreamingContext } from '../../code-streaming.js';
 import { ImageThumb } from '../../ImageView.js';
 import { uiChildrenOf, uiNodeLabel, uiNodeText, uiUrlDomain } from '../node-text.js';
+import { useTruncated } from '../use-truncated.js';
 // The number of every source by its node id, which the list counts in its own order.
 const SourceNumbers = createContext(new Map());
 /* Plain text in the same measure until the node closes, so highlighting never makes it jump. */
@@ -54,6 +55,7 @@ export function SourceRenderer({ node, context }) {
     const number = useContext(SourceNumbers).get(node.id);
     const { title, url } = node.props;
     const { openUrl } = context;
-    const face = (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-5 shrink-0 text-right text-text-faint tabular-nums", children: number }), _jsx("span", { className: "min-w-0 truncate text-text", children: title }), _jsx("span", { className: "shrink-0 text-text-faint", children: uiUrlDomain(url) })] }));
-    return (_jsx("li", { "data-ui-source": node.id, tabIndex: -1, className: "chat-ui-source scroll-my-2 rounded-md", children: openUrl === undefined ? (_jsx("span", { className: "flex h-8 items-center gap-2 px-2 text-xs", children: face })) : (_jsx("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), children: face })) }));
+    const [measureDomain, domainCut] = useTruncated();
+    const face = (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-5 shrink-0 self-start text-right text-text-faint tabular-nums", children: number }), _jsx("span", { className: "min-w-0 grow wrap-anywhere text-text", children: title }), _jsx("span", { ref: measureDomain, className: "max-w-1/2 min-w-0 shrink-0 self-start truncate text-text-faint", children: uiUrlDomain(url) })] }));
+    return (_jsx("li", { "data-ui-source": node.id, tabIndex: -1, className: "chat-ui-source scroll-my-2 rounded-md", children: _jsx(Tooltip, { label: _jsxs(_Fragment, { children: [_jsx("span", { className: "block", children: title }), _jsx("span", { className: "block text-text-muted", children: url })] }), children: openUrl === undefined ? (_jsx("span", { tabIndex: domainCut ? 0 : undefined, className: "flex min-h-8 items-start gap-2 rounded-md px-2 py-2 text-xs", children: face })) : (_jsx("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), children: face })) }) }));
 }

package/dist/chat/ui/intelligent-ui/renderers/inputs.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-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.js';
+import { useTruncated } from '../use-truncated.js';
 const ChecklistContext = createContext({ values: [], enabled: false, toggle: () => undefined });
 /*
  * The binding of an input, or null for a read-only node. An input works once its own node closed and
@@ -51,6 +52,8 @@ export function SliderRenderer({ node, context }) {
         // The slider prints its unit right after the number, so the space a unit stands apart with comes from here.
         unit: uiWithUnit('', unit), label: uiNodeLabel(node), disabled: binding === null, className: clsx('px-2', !node.complete && PENDING) }));
 }
+/* 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 }) {
     const { t } = useTranslation('agent-chat');
@@ -58,15 +61,17 @@ export function SegmentedRenderer({ node, context }) {
     const current = binding?.value ?? node.props.value;
     const options = uiChildrenOf(node, 'Option').map((option, index) => ({ id: String(index), label: uiNodeLabel(option), value: option.props.value }));
     const picked = options.find((option) => option.value === current)?.id ?? '';
-    return (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(Segmented, { value: picked, options: options, label: t('blocks.options'), disabled: binding === null, onValueChange: (id) => {
+    return (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(Segmented, { 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)];
                 if (option !== undefined) {
                     binding?.onValueChange(option.value);
                 }
             } }) }));
 }
-/* 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 }) {
     const enabled = node.onAction !== undefined && node.complete && context.answer === null && node.props.disabled !== true;
-    return (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(Button, { variant: "secondary", size: "sm", disabled: !enabled, onClick: () => node.onAction?.(), children: children }) }));
+    const label = uiNodeLabel(node);
+    const [measure, truncated] = useTruncated();
+    return (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(Tooltip, { label: label, disabled: !truncated, children: _jsx(Button, { variant: "secondary", size: "sm", className: "max-w-full", disabled: !enabled, onClick: () => node.onAction?.(), children: _jsx("span", { ref: measure, className: "min-w-0 truncate", children: children }) }) }) }));
 }

package/dist/chat/ui/intelligent-ui/renderers/links.js

@@ -70,7 +70,7 @@ function LinkRow({ target, context, described, children }) {
     if (!described) {
         return _jsx(UiLinkChip, { target: target, context: context });
     }
-    return (_jsxs("div", { className: "flex min-w-0 items-baseline gap-2 px-2 text-sm", children: [_jsx("span", { className: "shrink-0", children: _jsx(UiLinkChip, { target: target, context: context }) }), _jsx("span", { className: "min-w-0 text-text-muted", children: children })] }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 px-2 text-sm", children: [_jsx("span", { className: "max-w-full min-w-0", children: _jsx(UiLinkChip, { target: target, context: context }) }), _jsx("span", { className: "min-w-0 wrap-break-word text-text-muted", children: children })] }));
 }
 export function FileRenderer({ node, children, context }) {
     const { path, line } = node.props;

package/dist/chat/ui/intelligent-ui/renderers/text.js

@@ -25,12 +25,15 @@ const STEP_TONES = {
 function isLive(context) {
     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 }) {
     const headId = useContext(UiHeadContext);
     const head = headId === undefined || headId === node.id;
     const { tone, badge } = node.props;
-    return (_jsxs("div", { className: "flex items-start gap-2 px-2", children: [head && tone !== undefined && _jsx(Icon, { icon: UI_TONE_ICONS[tone], size: 16, className: clsx('mt-0.75 shrink-0', UI_TONE_TEXT[tone]) }), _jsx("div", { className: "min-w-0 grow text-sm font-semibold text-balance text-text", children: children }), badge !== undefined && badge !== '' && (_jsx(Pill, { shape: "tag", tone: tone === undefined ? 'muted' : UI_TONE_PILL[tone], className: "shrink-0", children: badge }))] }));
+    const tag = badge !== undefined && badge !== '' && badge.length <= BADGE_AS_TAG;
+    return (_jsxs("div", { className: "flex items-start gap-2 px-2", children: [head && tone !== undefined && _jsx(Icon, { icon: UI_TONE_ICONS[tone], size: 16, className: clsx('mt-0.75 shrink-0', UI_TONE_TEXT[tone]) }), _jsxs("div", { className: "flex min-w-0 grow flex-wrap items-start gap-x-2 gap-y-1", children: [_jsx("div", { className: "max-w-full min-w-0 grow basis-48 text-sm font-semibold text-balance wrap-break-word text-text", children: children }), tag && (_jsx(Pill, { shape: "tag", tone: tone === undefined ? 'muted' : UI_TONE_PILL[tone], children: badge })), !tag && badge !== undefined && badge !== '' && _jsx("p", { className: "w-full text-xs wrap-anywhere text-text-muted", children: badge })] })] }));
 }
 export function CalloutRenderer({ node, children }) {
     const { tone, title } = node.props;
@@ -57,5 +60,5 @@ export function StepRenderer({ node, children, context }) {
     const { t } = useTranslation('agent-chat');
     const { state, detail } = node.props;
     const quiet = state === 'pending' || state === 'skipped';
-    return (_jsxs("li", { className: "flex min-h-7 items-center gap-2 text-sm", children: [_jsx("span", { className: clsx('grid size-4 shrink-0 place-items-center', STEP_TONES[state]), children: state === 'running' ? (isLive(context) ? (_jsx(Spinner, { size: 14 })) : (_jsx(Icon, { icon: CircleDot, size: 14 }))) : (_jsx(Icon, { icon: STEP_ICONS[state], size: 14 })) }), _jsx("span", { className: "sr-only", children: t(`blocks.step.${state}`) }), _jsx("span", { className: clsx('min-w-0 grow', quiet ? 'text-text-faint' : 'text-text'), children: children }), detail !== undefined && detail !== '' && _jsx("span", { className: "shrink-0 text-xs text-text-faint tabular-nums", children: detail })] }));
+    return (_jsxs("li", { className: "flex min-h-7 items-center gap-2 text-sm", children: [_jsx("span", { className: clsx('grid size-4 shrink-0 place-items-center', STEP_TONES[state]), children: state === 'running' ? (isLive(context) ? (_jsx(Spinner, { size: 14 })) : (_jsx(Icon, { icon: CircleDot, size: 14 }))) : (_jsx(Icon, { icon: STEP_ICONS[state], size: 14 })) }), _jsx("span", { className: "sr-only", children: t(`blocks.step.${state}`) }), _jsxs("span", { className: "flex min-w-0 grow flex-wrap items-baseline justify-between gap-x-2", children: [_jsx("span", { className: clsx('max-w-full min-w-0 grow basis-48 wrap-break-word', quiet ? 'text-text-faint' : 'text-text'), children: children }), detail !== undefined && detail !== '' && _jsx("span", { className: "max-w-full text-xs wrap-anywhere text-text-faint tabular-nums", children: detail })] })] }));
 }

package/dist/chat/ui/intelligent-ui/table-data.js

@@ -1,8 +1,8 @@
 import { uiChildrenOf } from './node-text.js';
 /* 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 = new Set(['number', 'bytes', 'duration']);
 export function isNumericColumn(column) {
     return NUMERIC_KINDS.has(column.as);
@@ -29,7 +29,7 @@ export function uiTableColumns(node) {
     const keys = [];
     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);
             }
         }
@@ -67,7 +67,7 @@ export function uiTableCell(value, column) {
         }
         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/dist/chat/ui/intelligent-ui/use-truncated.d.ts

@@ -0,0 +1 @@
+export declare function useTruncated<T extends HTMLElement>(within?: boolean): [(element: T | null) => (() => void) | undefined, boolean];

package/dist/chat/ui/intelligent-ui/use-truncated.js

@@ -0,0 +1,28 @@
+import { useCallback, useState } from 'react';
+function cut(element) {
+    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(within = false) {
+    const [truncated, setTruncated] = useState(false);
+    const measure = useCallback((element) => {
+        if (element === null || typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+        const check = () => setTruncated(within ? [...element.querySelectorAll('.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/dist/chat/ui/quote-selection.d.ts

@@ -1,3 +1,6 @@
-export type QuoteTaker = (quote: string) => void;
+export type QuoteTaker = (quote: string, itemId: string | null) => void;
 export declare const QuoteTakerContext: import("react").Context<((take: QuoteTaker) => () => void) | null>;
-export declare function selectedAnswerQuote(selection: Selection | null, thread: HTMLElement | null): string | null;
+export declare function selectedAnswerQuote(selection: Selection | null, thread: HTMLElement | null): {
+    text: string;
+    itemId: string | null;
+} | null;

package/dist/chat/ui/quote-selection.js

@@ -28,7 +28,7 @@ function selectsOutside(range, answer) {
     }
     return false;
 }
-/* The quote the selection makes, when it lies in one answer of this thread. */
+/* 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, thread) {
     if (thread === null || selection === null || selection.isCollapsed || selection.rangeCount === 0) {
         return null;
@@ -42,5 +42,6 @@ export function selectedAnswerQuote(selection, thread) {
     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/dist/chat/ui/rows/MessageRows.js

@@ -3,10 +3,13 @@ import { useContext, useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Bot, Brain, Check, ChevronDown, CircleAlert, File, Info, MessageCircleQuestionMark, Reply, TriangleAlert, X } from 'lucide-react';
+import { WAITING_NOTE_PREFIX } from '@adecore/agent-contracts';
 import { fileBadge, formatBytes, isImageAttachment } from '../../attachments.js';
 import { useChatRow, useCurrentItem } from '../../../state/chats.js';
 import { chatHost } from '../../../host.js';
 import { useChatScope } from '../../../scope.js';
+import { splitQuote } from '../../quote.js';
+import { jumpToTimelineItem } from '../../timeline-scroll.js';
 import { useProviders } from '../../../state/providers.js';
 import { ChatReferenceChip } from '../ChatReferenceChip.js';
 import { ImageThumb } from '../ImageView.js';
@@ -55,8 +58,24 @@ export function UserRow({ chatId, item }) {
     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);
-    return (_jsxs("div", { "data-find-item": item.id, className: "flex flex-col items-end", children: [_jsx(MessageHeading, { children: t('rows.user.heading') }), attachments.length > 0 && (_jsx("div", { className: "mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5", children: attachments.map((attachment) => isImageAttachment(attachment.mime) ? (_jsx(AttachmentThumb, { chatId: chatId, attachment: attachment }, attachment.id)) : (_jsx(AttachmentLink, { chatId: chatId, attachment: attachment }, attachment.id))) })), chats.length > 0 && (_jsx("div", { className: "mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5", children: chats.map((id) => (_jsx(ChatReferenceChip, { chatId: id }, id))) })), item.uiChoice !== undefined && _jsx(ChoiceLine, { chatId: chatId, choice: item.uiChoice }), item.text !== '' && (_jsxs("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", children: [_jsx("div", { "data-find-field": "text", className: clsx(long && !open && FOLD), children: _jsx(MessageMarkdown, { text: item.text, mentions: item.mentions, skills: item.skills }) }), long && (_jsxs("button", { className: "mt-1 flex items-center gap-1 text-xs text-text-muted hover:text-text", onClick: () => setOpen((o) => !o), children: [_jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('transition-transform', open && 'rotate-180') }), ' ', open ? t('rows.user.showLess') : t('rows.user.showAll')] }))] }))] }));
+    // 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() {
+        if (source !== undefined) {
+            setMissing(false);
+            jumpToTimelineItem(keyOf(chatId), source, { flash: true, onMissing: () => setMissing(true) });
+        }
+    }
+    return (_jsxs("div", { "data-find-item": item.id, className: "flex flex-col items-end", children: [_jsx(MessageHeading, { children: t('rows.user.heading') }), attachments.length > 0 && (_jsx("div", { className: "mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5", children: attachments.map((attachment) => isImageAttachment(attachment.mime) ? (_jsx(AttachmentThumb, { chatId: chatId, attachment: attachment }, attachment.id)) : (_jsx(AttachmentLink, { chatId: chatId, attachment: attachment }, attachment.id))) })), chats.length > 0 && (_jsx("div", { className: "mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5", children: chats.map((id) => (_jsx(ChatReferenceChip, { chatId: id }, id))) })), item.uiChoice !== undefined && _jsx(ChoiceLine, { chatId: chatId, choice: item.uiChoice }), item.text !== '' && (_jsxs("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", children: [_jsx("div", { "data-find-field": "text", className: clsx(long && !open && FOLD), children: quoted !== null && source !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: t('composer.quote.goToSource'), children: _jsx("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();
+                                            }
+                                        }, children: _jsx(MessageMarkdown, { text: quoted.quote }) }) }), missing && _jsx("div", { className: "mb-2 text-xs text-text-faint", children: t('rows.user.quoteGone') }), quoted.rest !== '' && _jsx(MessageMarkdown, { text: quoted.rest, mentions: item.mentions, skills: item.skills })] })) : (_jsx(MessageMarkdown, { text: item.text, mentions: item.mentions, skills: item.skills })) }), long && (_jsxs("button", { className: "mt-1 flex items-center gap-1 text-xs text-text-muted hover:text-text", onClick: () => setOpen((o) => !o), children: [_jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('transition-transform', open && 'rotate-180') }), ' ', open ? t('rows.user.showLess') : t('rows.user.showAll')] }))] }))] }));
 }
 /*
  * The choice a message answers. The label stays out of the message, which holds exactly what the agent
@@ -174,16 +193,16 @@ export function NoteRow({ id, level, text, from }) {
     const head = breakAt === -1 ? text : text.slice(0, breakAt);
     const rest = breakAt === -1 ? '' : text.slice(breakAt + 1).trim();
     useOpenForFind(id, 'output', setOpen);
-    return (_jsxs("div", { "data-find-item": id, className: clsx('-mx-1 mb-0.5 flex min-h-7 items-start gap-2 px-1 py-1 text-xs', level === 'error' ? 'text-status-error' : level === 'warning' ? 'text-status-needs-you' : 'text-text-faint'), children: [_jsx("span", { className: ROW_GUTTER, children: NOTE_ICON[level] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2", children: [_jsx("span", { "data-find-field": "summary", className: "select-text", children: head }), rest !== '' && (_jsx("button", { className: "text-text-muted hover:text-text", onClick: () => setOpen(!open), children: open ? t('rows.note.hide') : t('rows.note.show') })), from !== undefined && _jsx(OpenChatButton, { chatId: from })] }), open && rest !== '' && (_jsx("div", { "data-find-field": "output", className: "mt-1 text-text-muted select-text", children: _jsx(MessageMarkdown, { text: rest }) }))] })] }));
+    return (_jsxs("div", { "data-find-item": id, className: clsx('-mx-1 mb-0.5 flex min-h-7 items-start gap-2 px-1 py-1 text-xs', level === 'error' ? 'text-status-error' : level === 'warning' ? 'text-status-needs-you' : 'text-text-faint'), children: [_jsx("span", { className: ROW_GUTTER, children: NOTE_ICON[level] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2", children: [_jsx("span", { "data-find-field": "summary", className: "select-text", children: head }), rest !== '' && (_jsx("button", { className: "text-text-muted hover:text-text", onClick: () => setOpen(!open), children: open ? t('rows.note.hide') : t('rows.note.show') })), from !== undefined && _jsx(OpenChatButton, { chatId: from, label: id.startsWith(WAITING_NOTE_PREFIX) ? 'openWaiting' : 'openFork' })] }), open && rest !== '' && (_jsx("div", { "data-find-field": "output", className: "mt-1 text-text-muted select-text", children: _jsx(MessageMarkdown, { text: rest }) }))] })] }));
 }
-/* "Open fork" on a note a fork sent, while that fork is still in the project. */
-function OpenChatButton({ chatId }) {
+/* "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 }) {
     const { t } = useTranslation('agent-chat');
     const place = chatHost().useChatPlace(chatId);
     if (place.title === null) {
         return null;
     }
-    return (_jsx("button", { className: "text-text-muted hover:text-text", onClick: place.go, children: t('rows.note.openFork') }));
+    return (_jsx("button", { className: "text-text-muted hover:text-text", onClick: place.go, children: t(`rows.note.${label}`) }));
 }
 /*
  * The header of a turn the agent started itself, in place of a message of the person. What the

package/dist/chat/ui/rows/Rows.js

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

package/dist/chat/ui/rows/WorkRows.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import type { ChatCheckpointDiff, ChatToolItem, ChatTurnItem } from '@adecore/agent-contracts';
+import type { BaseMoved } from '../../logic/timeline.js';
 export declare function ToggleLine({ icon, label, detail, open, onToggle, failed, live, trailing, className }: {
     icon: ReactNode;
     label: string;
@@ -39,10 +40,11 @@ export declare function TurnFoldRow({ turn, label, work, expanded, onToggle }: {
     expanded: boolean;
     onToggle(): void;
 }): import("react").JSX.Element;
-export declare function ChangedFilesRow({ tools, diff, checkpoint, chatId, turnId }: {
+export declare function ChangedFilesRow({ tools, diff, checkpoint, baseMoved, chatId, turnId }: {
     tools: ChatToolItem[];
     diff: ChatCheckpointDiff | null;
     checkpoint: boolean;
+    baseMoved?: BaseMoved | undefined;
     chatId: string;
     turnId: string;
 }): import("react").JSX.Element;

package/dist/chat/ui/rows/WorkRows.js

@@ -91,7 +91,7 @@ function CheckpointFileBody({ file }) {
     return (_jsx(DiffSuspense, { children: _jsx(UnifiedDiff, { change: file }) }));
 }
 /* The frame of a changed files card: a header that folds the list of files away. */
-function ChangedFilesCard({ count, truncated, added, deleted, revealNonce = 0, children }) {
+function ChangedFilesCard({ count, truncated, added, deleted, revealNonce = 0, baseMoved, children }) {
     const { t } = useTranslation('agent-chat');
     const [expanded, setExpanded] = useState(false);
     // A jump opens the card, also one that mounted it by scrolling it on screen; the flash is gone by the next visit.
@@ -100,7 +100,7 @@ function ChangedFilesCard({ count, truncated, added, deleted, revealNonce = 0, c
         setSeenReveal(revealNonce);
         setExpanded(true);
     }
-    return (_jsxs("div", { className: "mb-3 overflow-hidden rounded-lg border border-border bg-surface-raised", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-text-muted hover:bg-surface-hover", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: [_jsx(Icon, { icon: FileDiff, size: 12, className: "shrink-0" }), _jsx("span", { className: "shrink-0 font-medium text-text", children: t('work.changedFiles', { count }) }), truncated && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: t('work.andMore') }), _jsx("span", { className: "grow" }), added !== undefined && _jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", added] }), deleted !== undefined && _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", deleted] }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', expanded && 'rotate-90') })] }), expanded && children] }));
+    return (_jsxs("div", { className: "mb-3 overflow-hidden rounded-lg border border-border bg-surface-raised", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-text-muted hover:bg-surface-hover", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: [_jsx(Icon, { icon: FileDiff, size: 12, className: "shrink-0" }), _jsx("span", { className: "shrink-0 font-medium text-text", children: baseMoved === undefined ? t('work.changedFiles', { count }) : t('work.folderChanges', { count }) }), truncated && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: t('work.andMore') }), _jsx("span", { className: "grow" }), added !== undefined && _jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", added] }), deleted !== undefined && _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", deleted] }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', expanded && 'rotate-90') })] }), baseMoved !== undefined && (_jsx("div", { className: "pr-3 pb-2 pl-8 text-xs text-text-faint", children: t('work.baseMoved', { from: baseMoved.from.slice(0, 7), to: baseMoved.to.slice(0, 7) }) })), expanded && children] }));
 }
 /*
  * The files a settled turn changed, as a card; each file opens its diff in place. The host's
@@ -108,7 +108,7 @@ function ChangedFilesCard({ count, truncated, added, deleted, revealNonce = 0, c
  * unified diffs the CLI reported, then the before and after of its own edits. A turn that has a
  * checkpoint but no stored diff asks the host for one, which is also how a running turn gets it.
  */
-export function ChangedFilesRow({ tools, diff, checkpoint, chatId, turnId }) {
+export function ChangedFilesRow({ tools, diff, checkpoint, baseMoved, chatId, turnId }) {
     const [open, setOpen] = useState({});
     const [fetched, setFetched] = useState(null);
     const actions = useChatActions();
@@ -135,7 +135,7 @@ export function ChangedFilesRow({ tools, diff, checkpoint, chatId, turnId }) {
     const revealNonce = flash !== null && flash.opens && flash.key === keyOf(chatId) && flash.rowId === `files-${turnId}` ? flash.nonce : 0;
     if (checkpointDiff !== null && checkpointDiff.files.length > 0) {
         const files = checkpointDiff.files;
-        return (_jsx(ChangedFilesCard, { revealNonce: revealNonce, count: files.length, truncated: checkpointDiff.truncated, added: files.reduce((sum, file) => sum + file.added, 0), deleted: files.reduce((sum, file) => sum + file.deleted, 0), children: files.map((file) => (_jsx(ChangedFileLine, { path: file.path, open: open[file.path] === true, onToggle: () => setOpen((o) => ({ ...o, [file.path]: !o[file.path] })), trailing: _jsxs(_Fragment, { children: [_jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", file.added] }), _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", file.deleted] })] }), children: _jsx(CheckpointFileBody, { file: file }) }, file.path))) }));
+        return (_jsx(ChangedFilesCard, { revealNonce: revealNonce, baseMoved: baseMoved, count: files.length, truncated: checkpointDiff.truncated, added: files.reduce((sum, file) => sum + file.added, 0), deleted: files.reduce((sum, file) => sum + file.deleted, 0), children: files.map((file) => (_jsx(ChangedFileLine, { path: file.path, open: open[file.path] === true, onToggle: () => setOpen((o) => ({ ...o, [file.path]: !o[file.path] })), trailing: _jsxs(_Fragment, { children: [_jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", file.added] }), _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", file.deleted] })] }), children: _jsx(CheckpointFileBody, { file: file }) }, file.path))) }));
     }
     return _jsx(ProviderChangedFiles, { tools: tools, open: open, setOpen: setOpen, revealNonce: revealNonce });
 }

package/dist/host.d.ts

@@ -194,6 +194,7 @@ export interface ChatHost {
         name: string;
         mark: ReactNode;
     } | null;
+    useMachineLabel(scopeId: string): string | null;
     useChatPlace(chatId: string): ChatPlace;
     useContextSources(chatId: string): ReadonlyArray<{
         title: string;

package/dist/host.js

@@ -29,6 +29,7 @@ const DEFAULT_HOST = {
     openLogin: null,
     useLoginBlocked: () => null,
     useProjectLook: () => null,
+    useMachineLabel: () => null,
     useChatPlace: () => NOWHERE,
     useContextSources: () => NO_SOURCES,
     useHidesFolder: () => false,

package/dist/locales/en/agent-chat.json

@@ -91,7 +91,8 @@
     "user": {
       "heading": "You",
       "showAll": "Show all",
-      "showLess": "Show less"
+      "showLess": "Show less",
+      "quoteGone": "The reply this quote came from is no longer in this chat."
     },
     "report": {
       "heading": "Report"
@@ -107,7 +108,8 @@
     "note": {
       "hide": "Hide",
       "show": "Show",
-      "openFork": "Open fork"
+      "openFork": "Open fork",
+      "openWaiting": "Open to answer"
     },
     "compaction": {
       "plain": "Context compacted",
@@ -165,6 +167,9 @@
     },
     "changedFiles_one": "{{count}} changed file",
     "changedFiles_other": "{{count}} changed files",
+    "folderChanges_one": "{{count}} change in the folder this turn",
+    "folderChanges_other": "{{count}} changes in the folder this turn",
+    "baseMoved": "The branch moved during this turn ({{from}} to {{to}}), so this includes what came in with it.",
     "andMore": "and more, truncated",
     "edits_one": "{{count}} edit",
     "edits_other": "{{count}} edits",
@@ -249,6 +254,17 @@
   },
   "composer": {
     "slotFailed": "This control failed to render",
+    "inputLabel": "Message",
+    "menu": {
+      "commands": "Commands",
+      "skills": "Skills",
+      "mentions": "Mentions"
+    },
+    "held": {
+      "question": "A question is waiting. It opens when you pause typing.",
+      "approval": "An approval is waiting. It opens when you pause typing.",
+      "show": "Show now"
+    },
     "commands": {
       "model": "Switch the model",
       "compact": "Compact the context",
@@ -294,7 +310,8 @@
     },
     "quote": {
       "add": "Quote",
-      "remove": "Remove quote"
+      "remove": "Remove quote",
+      "goToSource": "Go to the reply"
     },
     "removeAttachment": "Remove {{name}}",
     "attach": "Attach files",
@@ -319,6 +336,9 @@
     "monitors_one": "{{count}} monitor",
     "monitors_other": "{{count}} monitors",
     "pausedUntil": "paused until {{time}}",
+    "progress": "{{done}} of {{total}} sub-agents done",
+    "needsYou_one": "{{count}} needs you",
+    "needsYou_other": "{{count}} need you",
     "took": {
       "done": "done in {{duration}}",
       "failed": "failed after {{duration}}",
@@ -332,8 +352,10 @@
   "subagents": {
     "stop": {
       "task": "Stop this task",
+      "native": "Stop this sub-agent",
       "mark": "Mark as stopped. The CLI cannot stop one sub-agent, so it may keep working until the chat's process ends."
     },
+    "stale": "This sub-agent belongs to a process that has ended.",
     "title": "Sub-agents",
     "backToMain": "Back to the main agent",
     "loading": "Loading the conversation…",
@@ -344,9 +366,7 @@
     "stopFailed": "The sub-agent could not be stopped",
     "info": {
       "label": "About this sub-agent",
-      "tokens": "{{tokens}} tokens",
-      "showTask": "Show its task",
-      "hideTask": "Hide its task"
+      "tokens": "{{tokens}} tokens"
     }
   },
   "modes": {
@@ -382,7 +402,10 @@
       "noMatch": "No models match",
       "legacyGroup_one": "Legacy models ({{count}})",
       "legacyGroup_other": "Legacy models ({{count}})",
-      "legacy": "Legacy"
+      "legacy": "Legacy",
+      "requires": "Requires {{cli}} {{version}} or later on {{machine}}",
+      "requiresHere": "Requires {{cli}} {{version}} or later",
+      "providerSettings": "Provider settings"
     },
     "stash": {
       "title": "Stashed prompts",
@@ -504,7 +527,13 @@
     "chart": {
       "values": "Values",
       "summary": "{{count}} values, highest {{label}} at {{value}}",
-      "summarySeries": "{{count}} categories, highest {{series}} for {{label}} at {{value}}"
+      "summarySeries": "{{count}} categories, highest {{series}} for {{label}} at {{value}}",
+      "rowsLeftOut": "The first {{shown}} of {{total}} rows are drawn.",
+      "seriesLeftOut_one": "{{series}} is not drawn.",
+      "seriesLeftOut_other": "{{series}} are not drawn.",
+      "sideBySide": "Negative values cannot be stacked, so the series stand side by side.",
+      "showValues": "Show all values",
+      "hideValues": "Hide values"
     },
     "image": {
       "label": "Image",
@@ -528,8 +557,8 @@
     "answered": "Answered with “{{label}}”",
     "chose": "Chose “{{label}}”",
     "choseOlder": "Chose “{{label}}” on the reply of {{time}}",
-    "fixes_one": "{{count}} fix",
-    "fixes_other": "{{count}} fixes",
+    "notes_one": "{{count}} note",
+    "notes_other": "{{count}} notes",
     "shownAsText": "Shown as text",
     "unknownComponent": "This version cannot draw {{component}}",
     "renderFailed": "Could not draw this part",