@adecore/agents-react 0.23.1 → 0.24.0

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

@@ -14,21 +14,22 @@ import type {
 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 { useChatHost } 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';
-import { MessageMarkdown, ReplyMarkdown } from '../Markdown';
+import { Markdown, MessageMarkdown, ReplyMarkdown } from '../Markdown';
 import { FadingWords } from '../FadingWords';
 import { settledBlocksText } from '../markdown-blocks';
 import { WHOLE_FADE_CLASS } from '../rehype-fade';
 import { useRevealedText } from '../reveal';
 import { formatAgo, formatElapsedShort, formatMoment, formatTokens } from '@adecore/ui/format';
-import { Icon, Tooltip, useTickingText } from '@adecore/ui';
-import { toolSummary } from '../../logic/tools';
+import { Icon, MiddleTruncate, Tooltip, useTickingText } from '@adecore/ui';
+import { thoughtLine, thoughtPreview } from '../../logic/thought';
+import { toolSummary, toolSummaryIsPath } from '../../logic/tools';
 import { ROW_GUTTER } from '../icons';
 import { useOpenForFind } from '../find-reveal';
 import { ReplyContext, UiReplyNavigationContext } from '../reply-context';
@@ -42,9 +43,10 @@ const USER_FOLD_CHARS = 600;
 const FOLD = 'max-h-[10em] overflow-hidden [mask-image:linear-gradient(to_bottom,black_70%,transparent)]';
 
 function useReplyAuthor(chatId: string) {
+    const host = useChatHost();
     const { id } = useChatScope();
     const context = useContext(ReplyContext);
-    const author = chatHost().useReplyAuthor(id, context?.chatId ?? chatId);
+    const author = host.useReplyAuthor(id, context?.chatId ?? chatId);
     return context !== null && context.chatId === undefined ? null : author;
 }
 
@@ -53,8 +55,9 @@ function useReplyAuthor(chatId: string) {
  * hands a link that opens a window to the system browser, which cannot reach a blob of this page.
  */
 function AttachmentLink({ chatId, attachment }: { chatId: string; attachment: ChatAttachment }) {
+    const host = useChatHost();
     const { id } = useChatScope();
-    const { url } = chatHost().attachments.useUrl(id, chatId, attachment.id);
+    const { url } = host.attachments.useUrl(id, chatId, attachment.id);
     const badge = fileBadge(attachment.name);
     return (
         <Tooltip label={attachment.name}>
@@ -78,8 +81,9 @@ function AttachmentLink({ chatId, attachment }: { chatId: string; attachment: Ch
 
 /* A picture attached to a message, which opens large. */
 function AttachmentThumb({ chatId, attachment }: { chatId: string; attachment: ChatAttachment }) {
+    const host = useChatHost();
     const { id } = useChatScope();
-    const source = chatHost().attachments.useUrl(id, chatId, attachment.id);
+    const source = host.attachments.useUrl(id, chatId, attachment.id);
     return <ImageThumb source={source} alt={attachment.name} className="max-h-32 max-w-48 object-cover" />;
 }
 
@@ -264,6 +268,7 @@ function Writing() {
  * written fades anything: an old reply scrolled back into view just stands there.
  */
 export function AssistantRow({ chatId, item: derived }: { chatId: string; item: ChatAssistantItem }) {
+    const host = useChatHost();
     const item = useCurrentItem(chatId, derived);
     const scope = useChatScope();
     const context = useContext(ReplyContext);
@@ -271,7 +276,7 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
         () => (context === null && !item.parentToolUseId ? { scopeId: scope.id, chatId, itemId: item.id, streaming: item.streaming } : undefined),
         [context, item.parentToolUseId, scope.id, chatId, item.id, item.streaming]
     );
-    const mode = chatHost().useStreaming();
+    const mode = host.useStreaming();
     const [sawWriting] = useState(item.streaming);
     const live = mode === 'words' && item.streaming;
     const reveal = useRevealedText(item.text, live);
@@ -329,12 +334,14 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
 
 /*
  * What the model thought before it answered. It shimmers while it streams and folds itself away
- * once the answer starts, because the thought is worth a glance and rarely worth reading twice.
+ * once the answer starts, because the thought is worth a glance and rarely worth reading twice:
+ * folded, it shows the heading it opens with or itself on one line, and opened, it reads as Markdown.
  */
 export function ThinkingRow({ chatId, item: derived }: { chatId: string; item: ChatThinkingItem }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const item = useCurrentItem(chatId, derived);
-    const mode = chatHost().useStreaming();
+    const mode = host.useStreaming();
     const [open, setOpen] = useState(false);
     const reveal = useRevealedText(item.text, mode === 'words' && item.streaming);
     // A block at a time, the paragraphs of the thought that closed are shown as they land.
@@ -342,31 +349,72 @@ export function ThinkingRow({ chatId, item: derived }: { chatId: string; item: C
     // Whole, the thought stays behind "Thinking…" until it is done and then folds like any other.
     const shown = open || reveal.active || (settled !== null && settled !== '');
     const text = settled ?? reveal.text;
+    const live = useMemo(() => (item.streaming && mode !== 'whole' ? thoughtLine(text) : ''), [item.streaming, mode, text]);
+    const preview = useMemo(() => (item.streaming ? '' : thoughtPreview(item.text)), [item.streaming, item.text]);
+    const duration = formatElapsedShort((item.endedAt ?? item.createdAt) - item.createdAt);
     useOpenForFind(item.id, 'text', setOpen);
     return (
         <div data-find-item={item.id} className="-mx-1 px-1 pb-2">
-            <button className="flex items-center gap-2 text-xs text-text-muted hover:text-text" disabled={item.streaming} onClick={() => setOpen((o) => !o)}>
+            <button
+                className="flex w-full min-w-0 items-center gap-2 text-left text-xs text-text-muted hover:text-text"
+                disabled={item.streaming}
+                aria-expanded={item.streaming ? undefined : open}
+                onClick={() => setOpen((o) => !o)}
+            >
                 <span className={ROW_GUTTER}>
                     <Icon icon={Brain} size={12} />
                 </span>
                 {item.streaming ? (
-                    <span className="chat-live-text">{t('rows.thinking.live')}</span>
+                    <span className="chat-live-text min-w-0 truncate">{live || t('rows.thinking.live')}</span>
+                ) : preview === '' ? (
+                    <>
+                        <span>{t('rows.thinking.thoughtFor', { duration })}</span>
+                        <Icon icon={ChevronDown} size={12} className={clsx('shrink-0 transition-transform', open && 'rotate-180')} />
+                    </>
                 ) : (
                     <>
-                        <span>{t('rows.thinking.thoughtFor', { duration: formatElapsedShort((item.endedAt ?? item.createdAt) - item.createdAt) })}</span>
-                        <Icon icon={ChevronDown} size={12} className={clsx('transition-transform', open && 'rotate-180')} />
+                        <span className="min-w-0 truncate">{open ? t('rows.thinking.thought') : preview}</span>
+                        <span className="grow" />
+                        <span className="shrink-0 text-text-faint tabular-nums">{duration}</span>
+                        <Icon icon={ChevronDown} size={12} className={clsx('shrink-0 transition-transform', open && 'rotate-180')} />
                     </>
                 )}
             </button>
             {shown && text !== '' && (
-                <div data-find-field="text" className="mt-1 border-l border-border pl-2.5 text-sm whitespace-pre-wrap text-text-faint select-text">
-                    {reveal.active ? <FadingWords text={reveal.text} /> : text}
+                <div data-find-field="text" className="mt-1 border-l border-border pl-2.5 select-text">
+                    {reveal.active ? (
+                        <div className="text-sm whitespace-pre-wrap text-text-faint">
+                            <FadingWords text={reveal.text} />
+                        </div>
+                    ) : (
+                        <Markdown text={text} muted />
+                    )}
                 </div>
             )}
         </div>
     );
 }
 
+/*
+ * The latest thought of a running turn over the call it led to, as its heading or first sentence,
+ * so what the model found stays in view while it checks it. Nothing while the thought has no line yet.
+ */
+export function LiveThoughtRow({ chatId, item: derived }: { chatId: string; item: ChatThinkingItem }) {
+    const item = useCurrentItem(chatId, derived);
+    const line = useMemo(() => thoughtLine(item.text), [item.text]);
+    if (line === '') {
+        return null;
+    }
+    return (
+        <div className="-mx-1 mb-0.5 flex min-h-7 items-start gap-2 px-1 py-1 text-xs text-text-muted">
+            <span className={ROW_GUTTER}>
+                <Icon icon={Brain} size={12} />
+            </span>
+            <span className="line-clamp-4 min-w-0 wrap-anywhere select-text">{line}</span>
+        </div>
+    );
+}
+
 const NOTE_ICON = {
     info: <Icon icon={Info} size={12} />,
     warning: <Icon icon={TriangleAlert} size={12} />,
@@ -417,8 +465,9 @@ export function NoteRow({ id, level, text, from }: { id: string; level: 'info' |
 
 /* "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 host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const place = chatHost().useChatPlace(chatId);
+    const place = host.useChatPlace(chatId);
     if (place.title === null) {
         return null;
     }
@@ -486,7 +535,13 @@ export function ApprovalHistoryRow({ item }: { item: ChatApprovalItem }) {
             <span className={clsx(ROW_GUTTER, item.decision === 'deny' && 'text-status-error')}>{DECISION_ICON[item.decision]}</span>
             <span className={clsx(item.decision === 'deny' && 'text-status-error')}>{t(`rows.approval.${item.decision}`)}</span>
             <span className="text-text-muted">{item.toolName}</span>
-            <span className="min-w-0 truncate font-mono">{toolSummary(item.toolName, item.input)}</span>
+            <span className="min-w-0 truncate font-mono">
+                {toolSummaryIsPath(item.toolName, item.input) ? (
+                    <MiddleTruncate text={toolSummary(item.toolName, item.input)} />
+                ) : (
+                    toolSummary(item.toolName, item.input)
+                )}
+            </span>
         </div>
     );
 }

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

@@ -3,7 +3,18 @@ import { ErrorBoundary } from '@adecore/ui';
 import type { ThreadCard } from '../../../host';
 import type { TimelineRow } from '../../logic/timeline';
 import type { SubagentStep } from '../../subagent-view';
-import { AgentTurnRow, ApprovalHistoryRow, AssistantRow, CompactionRow, NoteRow, QuestionHistoryRow, ReportRow, ThinkingRow, UserRow } from './MessageRows';
+import {
+    AgentTurnRow,
+    ApprovalHistoryRow,
+    AssistantRow,
+    CompactionRow,
+    LiveThoughtRow,
+    NoteRow,
+    QuestionHistoryRow,
+    ReportRow,
+    ThinkingRow,
+    UserRow
+} from './MessageRows';
 import { isImageGeneration } from '../../logic/generated-image';
 import { ForksRow } from './ForksRow';
 import { GeneratedImageRow } from './GeneratedImageRow';
@@ -52,6 +63,8 @@ export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, open
             return <ReportRow id={row.id} text={row.text} />;
         case 'thinking':
             return <ThinkingRow chatId={chatId} item={row.item} />;
+        case 'live-thought':
+            return <LiveThoughtRow chatId={chatId} item={row.item} />;
         case 'work':
             return isImageGeneration(row.tool) ? <GeneratedImageRow chatId={chatId} tool={row.tool} /> : <WorkRow tool={row.tool} />;
         case 'work-live':

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

@@ -15,7 +15,7 @@ import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows';
 import { entryTimeOf, statusWordOf, taskIdOf } from '../../subagent-list';
 import { useSubagentSupport } from '../../subagent-support';
 import { canOpenSubagent, crumbOf, type SubagentStep } from '../../subagent-view';
-import { chatHost, type SubagentTask } from '../../../host';
+import { useChatHost, type SubagentTask } from '../../../host';
 import { useChatScope } from '../../../scope';
 import { useCurrentItem } from '../../../state/chats';
 
@@ -135,10 +135,11 @@ export function SubagentRow({
     /* Opens everything it did in the thread's place, for a surface that has somewhere to open it. */
     onOpenConversation?(): void;
 }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     const taskId = taskIdOf(item);
-    const task = chatHost().tasks.useTask(id, taskId);
+    const task = host.tasks.useTask(id, taskId);
     // A task paused on its child's limit is still a running row on the wire, but nothing is at work.
     const running = item.status === 'running' && statusWordOf(item, task) !== 'paused';
     const detail = item.description || item.summary || item.subagentType || '';

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

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { Ellipsis, Maximize2, Trash2 } from 'lucide-react';
 import type { ChatVisual } from '@adecore/agent-contracts';
 import { ButtonGroup, ErrorBoundary, Icon, IconButton, Menu, Surface } from '@adecore/ui';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import { useChatScope } from '../../../scope';
 import { useVisualDialog } from '../../visuals';
 import { VisualFrame } from '../VisualFrame';
@@ -14,9 +14,10 @@ import { VisualFrame } from '../VisualFrame';
  * sit here.
  */
 export function VisualRow({ chatId, visual }: { chatId: string; visual: ChatVisual }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { keyOf } = useChatScope();
-    if (chatHost().visuals === null) {
+    if (host.visuals === null) {
         return null;
     }
     const open = (kind: 'expand' | 'remove'): void => useVisualDialog.getState().open(keyOf(chatId), visual.id, kind);

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

@@ -1,22 +1,38 @@
-import { Suspense, useEffect, useState, type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import { Fragment, Suspense, useEffect, useState, type Dispatch, type ReactNode, type SetStateAction } from 'react';
 import clsx from 'clsx';
 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 {
+    exitCodeOf,
+    fileChanges,
+    hasOutput,
+    hasToolBody,
+    liveOutput,
+    readImagePath,
+    shellCommand,
+    toolCallLines,
+    toolStartedAt,
+    toolSummary,
+    toolSummaryIsPath,
+    unifiedChanges,
+    type FileChange
+} from '../../logic/tools';
 import { useOpenForFind } from '../find-reveal';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import { lazyNamed } from '../../../lazy';
 import { useChatActions } from '../../actions';
 import { useChatScope } from '../../../scope';
 import { useCurrentItem } from '../../../state/chats';
 import { useTimelineFlash } from '../../timeline-flash';
 import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
-import { Icon, Spinner, useTickingText } from '@adecore/ui';
+import { Icon, MiddleTruncate, Spinner, useTickingText } from '@adecore/ui';
 import { ROW_GUTTER, toolIcon } from '../icons';
 import { AnsiOutput } from '../AnsiOutput';
+import { RowTime } from '../RowTime';
+import { ShellCommand } from '../ShellCommand';
 import { DiffStack, ReviewStackView } from '../diff/DiffStack';
 import { reviewEntries, type ReviewEntry } from '../diff/review-plan';
 import { useReviewStack } from '../diff/use-review-stack';
@@ -26,54 +42,79 @@ const UnifiedDiff = lazyNamed(() => import('../UnifiedDiff'), 'default');
 
 const OUTPUT_LIMIT = 4000;
 
+/* The line that says how much of a text past the limit is left out; empty for a text within it. */
+function clipNotice(text: string): string {
+    return text.length > OUTPUT_LIMIT ? `\n${i18next.t('agent-chat:work.moreCharacters', { count: text.length - OUTPUT_LIMIT })}` : '';
+}
+
 function clip(text: string): string {
-    return text.length > OUTPUT_LIMIT
-        ? `${text.slice(0, OUTPUT_LIMIT)}\n${i18next.t('agent-chat:work.moreCharacters', { count: text.length - OUTPUT_LIMIT })}`
-        : text;
+    return text.slice(0, OUTPUT_LIMIT) + clipNotice(text);
 }
 
+/*
+ * The line of a call, a subagent or a group. Without `onToggle` it has nothing to open: no chevron, and
+ * not a button. `time` shows at the right edge while the line is hovered or focused.
+ */
 export function ToggleLine({
     icon,
     label,
     detail,
-    open,
+    command,
+    path,
+    open = false,
     onToggle,
     failed,
     live,
     trailing,
+    time,
     className
 }: {
     icon: ReactNode;
     label: string;
     detail?: string;
-    open: boolean;
-    onToggle(): void;
+    /* Draws `detail` as a shell command, in the colors of the code theme. */
+    command?: boolean;
+    /* `detail` is the path of a file, cut in the middle so its name stays in sight. */
+    path?: boolean;
+    open?: boolean;
+    onToggle?(): void;
     failed?: boolean;
     live?: boolean;
     trailing?: ReactNode;
+    time?: number;
     className?: string;
 }) {
-    return (
-        <button
-            className={clsx(
-                // Fix the width so long commands reach the truncation inside the negative margins.
-                '-mx-1 mb-0.5 flex h-7 w-[calc(100%+8px)] items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted hover:bg-surface-hover',
-                failed && 'text-status-error',
-                className
-            )}
-            onClick={onToggle}
-        >
+    const classes = clsx(
+        // Fix the width so long commands reach the truncation inside the negative margins.
+        'group/line -mx-1 mb-0.5 flex h-7 w-[calc(100%+8px)] items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted',
+        onToggle !== undefined && 'hover:bg-surface-hover',
+        failed && 'text-status-error',
+        className
+    );
+    const content = (
+        <>
             <span className={clsx(ROW_GUTTER, live && 'text-accent')}>{icon}</span>
             <span className={clsx('shrink-0', live && 'chat-live-text')}>{label}</span>
             {detail && (
                 <span data-find-field="summary" className="min-w-0 truncate font-mono text-text-faint">
-                    {detail}
+                    {command ? <ShellCommand command={detail} /> : path ? <MiddleTruncate text={detail} /> : detail}
                 </span>
             )}
             <span className="grow" />
             {trailing}
+            {time !== undefined && <RowTime at={time} />}
             {failed && <Icon icon={X} size={12} className="shrink-0" />}
-            <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90')} />
+            {onToggle !== undefined && (
+                <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90')} />
+            )}
+        </>
+    );
+    if (onToggle === undefined) {
+        return <div className={classes}>{content}</div>;
+    }
+    return (
+        <button className={classes} onClick={onToggle}>
+            {content}
         </button>
     );
 }
@@ -106,7 +147,7 @@ function ChangedFileLine({
                 onClick={onToggle}
             >
                 <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90')} />
-                <span className="min-w-0 truncate font-mono text-text">{path}</span>
+                <MiddleTruncate text={path} className="font-mono text-text" />
                 <span className="grow" />
                 {trailing}
             </button>
@@ -115,19 +156,12 @@ function ChangedFileLine({
     );
 }
 
-function ToolBody({ tool }: { tool: ChatToolItem }) {
-    const patches = unifiedChanges(tool);
-    const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
+/* A diff keeps its card, with what the call answered under it. */
+function DiffBody({ tool, entries, patched }: { tool: ChatToolItem; entries: readonly ReviewEntry[]; patched: boolean }) {
     return (
         <div className="mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised">
-            {patches.length + changes.length > 0 ? (
-                <DiffStack entries={reviewEntries(patches, changes)} />
-            ) : (
-                <pre className="max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text">
-                    {clip(JSON.stringify(tool.input, null, 2) ?? '')}
-                </pre>
-            )}
-            {tool.output !== null && tool.output !== '' && patches.length === 0 && (
+            <DiffStack entries={entries} />
+            {hasOutput(tool.output) && !patched && (
                 <pre
                     data-find-field="output"
                     className={clsx(
@@ -142,9 +176,64 @@ function ToolBody({ tool }: { tool: ChatToolItem }) {
     );
 }
 
+/* What a call answered, muted under the call; a failure in the error color, or its exit code when the tool names one. */
+function ToolOutput({ tool }: { tool: ChatToolItem }) {
+    const { t } = useTranslation('agent-chat');
+    if (!hasOutput(tool.output)) {
+        return null;
+    }
+    const failed = tool.state === 'error';
+    const { code, rest } = failed ? exitCodeOf(tool.output) : { code: null, rest: tool.output };
+    return (
+        <>
+            {hasOutput(rest) && (
+                <pre
+                    data-find-field="output"
+                    className={clsx('max-h-64 overflow-auto whitespace-pre-wrap', failed && code === null ? 'text-status-error' : 'text-text-muted')}
+                >
+                    <AnsiOutput text={rest} limit={OUTPUT_LIMIT} />
+                </pre>
+            )}
+            {code !== null && <div className="text-status-error">{t('work.exitCode', { code: String(code) })}</div>}
+        </>
+    );
+}
+
+/* An opened call without a card: what it was asked in the foreground, what it answered muted below. */
+function ToolBody({ tool }: { tool: ChatToolItem }) {
+    const patches = unifiedChanges(tool);
+    const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
+    if (patches.length + changes.length > 0) {
+        return <DiffBody tool={tool} entries={reviewEntries(patches, changes)} patched={patches.length > 0} />;
+    }
+    const lines = toolCallLines(tool.name, tool.input);
+    return (
+        <div className="mt-0.5 mb-2 ml-6 flex flex-col gap-1.5 font-mono text-code select-text">
+            {lines.command !== null && (
+                <pre className="max-h-64 overflow-auto whitespace-pre-wrap wrap-anywhere text-text">
+                    <ShellCommand command={lines.command.slice(0, OUTPUT_LIMIT)} />
+                    {clipNotice(lines.command)}
+                </pre>
+            )}
+            {lines.args.length > 0 && (
+                <dl className="grid max-h-64 grid-cols-[auto_minmax(0,1fr)] gap-x-3 overflow-auto">
+                    {lines.args.map(([key, value]) => (
+                        <Fragment key={key}>
+                            <dt className="text-text-faint">{key}</dt>
+                            <dd className="whitespace-pre-wrap wrap-anywhere text-text">{clip(value)}</dd>
+                        </Fragment>
+                    ))}
+                </dl>
+            )}
+            {lines.text !== null && <pre className="max-h-64 overflow-auto whitespace-pre-wrap wrap-anywhere text-text">{clip(lines.text)}</pre>}
+            <ToolOutput tool={tool} />
+        </div>
+    );
+}
+
 /*
- * One settled tool call: a line, and its input and output behind it. An image the call looked at is
- * drawn under the line. `icon`, `label` and `failed` let a row that knows the call better name it.
+ * One settled tool call: a line, and what it was asked and answered behind it. An image the call
+ * looked at is drawn under the line. `icon`, `label` and `failed` let a row that knows the call better name it.
  */
 export function WorkRow({
     tool,
@@ -161,22 +250,28 @@ export function WorkRow({
     label?: string;
     failed?: boolean;
 }) {
+    const host = useChatHost();
     const [open, setOpen] = useState(false);
     const image = tool.state === 'done' ? readImagePath(tool.name, tool.input) : null;
-    const { ReadImage } = chatHost();
+    const { ReadImage } = host;
     useOpenForFind(tool.id, 'output', setOpen);
+    const summary = detail ?? toolSummary(tool.name, tool.input);
+    const opens = hasToolBody(tool);
     return (
         <div data-find-item={tool.id} className={nested ? 'ml-6' : undefined}>
             <ToggleLine
                 icon={icon ?? toolIcon(tool.name)}
                 label={label ?? tool.name}
-                detail={detail ?? toolSummary(tool.name, tool.input)}
-                open={open}
-                onToggle={() => setOpen((o) => !o)}
+                detail={summary}
+                command={detail === undefined && summary === shellCommand(tool.name, tool.input)}
+                path={detail === undefined && toolSummaryIsPath(tool.name, tool.input)}
+                open={open && opens}
+                onToggle={opens ? () => setOpen((o) => !o) : undefined}
                 failed={failed ?? tool.state === 'error'}
+                time={tool.createdAt}
             />
             {image !== null && ReadImage !== null && <ReadImage path={image} />}
-            {open && <ToolBody tool={tool} />}
+            {open && opens && <ToolBody tool={tool} />}
         </div>
     );
 }
@@ -193,18 +288,22 @@ export function WorkLiveRow({ chatId, tool: derived }: { chatId: string; tool: C
     const [open, setOpen] = useState(false);
     const tool = useCurrentItem(chatId, derived);
     const tail = liveOutput(tool);
+    const summary = toolSummary(tool.name, tool.input);
+    const opens = hasToolBody(tool);
     return (
         <div>
             <ToggleLine
                 icon={toolIcon(tool.name)}
                 label={tool.name}
-                detail={toolSummary(tool.name, tool.input) || tool.progress?.description || ''}
-                open={open}
-                onToggle={() => setOpen((o) => !o)}
+                detail={summary || tool.progress?.description || ''}
+                command={summary !== '' && summary === shellCommand(tool.name, tool.input)}
+                path={summary !== '' && toolSummaryIsPath(tool.name, tool.input)}
+                open={open && opens}
+                onToggle={opens ? () => setOpen((o) => !o) : undefined}
                 trailing={<RunningFor startedAt={toolStartedAt(tool)} />}
                 live
             />
-            {open && <ToolBody tool={tool} />}
+            {open && opens && <ToolBody tool={tool} />}
             {tail !== null && !open && (
                 <pre className="mt-1.5 mb-2 ml-6 max-h-48 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-code whitespace-pre-wrap text-chat-output select-text">
                     <AnsiOutput text={tail} tailLines={12} />
@@ -219,7 +318,7 @@ export function WorkGroupRow({ tools, summary, expanded, onToggle }: { tools: Ch
     const failed = tools.some((tool) => tool.state === 'error');
     return (
         <div>
-            <ToggleLine icon={toolIcon(tools[0]!.name)} label={summary} open={expanded} onToggle={onToggle} failed={failed} />
+            <ToggleLine icon={toolIcon(tools[0]!.name)} label={summary} open={expanded} onToggle={onToggle} failed={failed} time={tools[0]!.createdAt} />
         </div>
     );
 }
@@ -244,7 +343,7 @@ export function TurnFoldRow({
     return (
         <button
             className={clsx(
-                'group -mx-1 mb-2 flex h-7 w-[calc(100%+8px)] min-w-0 items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted hover:bg-surface-hover',
+                'group group/line -mx-1 mb-2 flex h-7 w-[calc(100%+8px)] min-w-0 items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted hover:bg-surface-hover',
                 turn.state === 'error' && 'text-status-error'
             )}
             aria-expanded={expanded}
@@ -255,6 +354,8 @@ export function TurnFoldRow({
             </span>
             <span className="shrink-0 group-hover:text-text">{label}</span>
             {work.length > 0 && <span className="min-w-0 truncate text-text-faint">{work.map((part) => ` · ${part}`).join('')}</span>}
+            <span className="grow" />
+            <RowTime at={turn.createdAt} />
         </button>
     );
 }

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

@@ -9,7 +9,7 @@ import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows';
 import { useChatScope } from '../../../scope';
 import { Icon, IconButton } from '@adecore/ui';
 import { useChatActions } from '../../actions';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 
 function AgentLine({ view, onOpen }: { view: WorkflowAgentView; onOpen?(step: SubagentStep): void }) {
     const { agent, state } = view;
@@ -75,6 +75,7 @@ export function WorkflowRow({
     chatId?: string;
     onOpenAgent?(step: SubagentStep): void;
 }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id } = useChatScope();
     // A host that does not answer `chat.subagent` has no conversation to open for anyone.
@@ -86,7 +87,7 @@ export function WorkflowRow({
     const stop = (): void => {
         if (chatId && workflow.taskId) {
             void actions.stopTask(chatId, workflow.taskId).catch((error: unknown) => {
-                chatHost().notify({
+                host.notify({
                     kind: 'error',
                     title: t('activity.stopFailed'),
                     description: error instanceof Error ? error.message : t('subagents.noAnswer')

package/src/chat/ui/timestamp-format.ts

@@ -0,0 +1,2 @@
+/* The full date and time a row's time names on its tooltip. */
+export const TIMESTAMP_FORMAT: Intl.DateTimeFormatOptions = { dateStyle: 'full', timeStyle: 'medium' };