@adecore/agents-react 0.0.1 → 0.17.0-beta.1

package/src/chat/ui/reveal.ts

@@ -0,0 +1,135 @@
+import { useEffect, useRef, useState } from 'react';
+
+/* How long a word takes to fade in. `.chat-fade` in styles.css carries the same number. */
+export const REVEAL_FADE_MS = 300;
+
+/* The time constant of the catch-up: after this long about two thirds of what was behind is on screen. */
+export const REVEAL_TAU_MS = 250;
+
+// Without a floor the last few characters of a gap crawl, since the exponential step shrinks with the gap.
+export const REVEAL_MIN_CPS = 40;
+
+// Once the item is done nothing more arrives to wait for, so the tail is closed faster.
+export const REVEAL_FINISH_MIN_CPS = 120;
+
+// A tab that comes back hands one frame the whole time it was away; it would show everything at once.
+export const REVEAL_MAX_FRAME_MS = 100;
+
+// A word this long (a URL, a line of CJK) would otherwise hold everything behind it until it ends.
+export const REVEAL_MAX_HELD_WORD = 32;
+
+// The span mounts a commit after the frame that grew the text, so its fade ends a little later than that frame plus the duration.
+const FADE_SETTLE_MS = REVEAL_FADE_MS + 50;
+
+function isSpace(text: string, index: number): boolean {
+    return index >= 0 && index < text.length && /\s/.test(text[index]);
+}
+
+/*
+ * Where the reveal stands `elapsedMs` after it stood at `position`, with `target` characters
+ * received. The exponential part composes over frames, so the pace does not depend on the refresh
+ * rate of the screen.
+ */
+export function advanceReveal(position: number, target: number, elapsedMs: number, finished: boolean): number {
+    if (position >= target) {
+        return target;
+    }
+    const elapsed = Math.min(Math.max(elapsedMs, 0), REVEAL_MAX_FRAME_MS);
+    const eased = (target - position) * (1 - Math.exp(-elapsed / REVEAL_TAU_MS));
+    const floor = ((finished ? REVEAL_FINISH_MIN_CPS : REVEAL_MIN_CPS) * elapsed) / 1000;
+    return Math.min(target, position + Math.max(eased, floor));
+}
+
+/*
+ * How much of `text` to draw for a reveal at `position`: back to the last word boundary, because a
+ * span that starts with half a word shows the rest of its letters at whatever opacity it already
+ * reached. The last word of a text that is still arriving may still grow, so it waits for the
+ * whitespace after it.
+ */
+export function revealBoundary(text: string, position: number, complete: boolean): number {
+    const end = Math.min(text.length, Math.max(0, Math.floor(position)));
+    if (end === text.length && complete) {
+        return end;
+    }
+    let cut = end;
+    while (cut > 0 && !isSpace(text, cut) && !isSpace(text, cut - 1)) {
+        cut -= 1;
+    }
+    if (end - cut <= REVEAL_MAX_HELD_WORD) {
+        return cut;
+    }
+    // Half of a surrogate pair renders as a replacement box.
+    const last = text.charCodeAt(end - 1);
+    return last >= 0xd800 && last <= 0xdbff ? end - 1 : end;
+}
+
+export interface RevealedText {
+    text: string;
+    /* True until the reveal caught up with a finished text and its last fade is over; spans are needed until then. */
+    active: boolean;
+}
+
+/*
+ * The part of a streaming text that is on screen, catching up with what arrived over time. It starts
+ * at whatever was there on mount, so reopening a thread mid-reply does not replay it, and a text that
+ * was already done on mount is shown whole at once.
+ */
+export function useRevealedText(text: string, streaming: boolean): RevealedText {
+    const [active, setActive] = useState(streaming);
+    const [shown, setShown] = useState(() => revealBoundary(text, text.length, !streaming));
+    const latest = useRef({ text, streaming });
+    const position = useRef(text.length);
+    const shownRef = useRef(shown);
+    const activeRef = useRef(active);
+
+    useEffect(() => {
+        latest.current = { text, streaming };
+    });
+
+    // Turning streaming on for a text that stood still (the setting flipped mid-reply) starts from what is there.
+    useEffect(() => {
+        if (!streaming || activeRef.current) {
+            return;
+        }
+        position.current = latest.current.text.length;
+        shownRef.current = revealBoundary(latest.current.text, position.current, false);
+        activeRef.current = true;
+        setShown(shownRef.current);
+        setActive(true);
+    }, [streaming]);
+
+    useEffect(() => {
+        if (!active) {
+            return;
+        }
+        let frame = 0;
+        let previous: number | null = null;
+        let grewAt = -Infinity;
+        const tick = (now: number) => {
+            const elapsed = previous === null ? 0 : now - previous;
+            previous = now;
+            const current = latest.current;
+            const finished = !current.streaming;
+            position.current = advanceReveal(position.current, current.text.length, elapsed, finished);
+            const length = revealBoundary(current.text, position.current, finished);
+            if (length !== shownRef.current) {
+                shownRef.current = length;
+                grewAt = now;
+                setShown(length);
+            }
+            if (finished && length >= current.text.length && now - grewAt >= FADE_SETTLE_MS) {
+                activeRef.current = false;
+                setActive(false);
+                return;
+            }
+            frame = requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frame);
+    }, [active]);
+
+    if (!active) {
+        return { text, active: false };
+    }
+    return { text: text.slice(0, Math.min(shown, text.length)), active: true };
+}

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

@@ -0,0 +1,79 @@
+import { useTranslation } from 'react-i18next';
+import { ChevronRight, GitFork } from 'lucide-react';
+import { useForkIdsAfter } from '../../forks';
+import { ROW_GUTTER } from '../icons';
+import { chatHost } from '../../../host';
+import { Icon, Menu } from '@adecore/ui';
+
+const LINE = '-mx-1 mb-0.5 flex h-7 items-center gap-2 rounded-md px-1 text-xs text-text-muted';
+const LINK = `${LINE} hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-hover data-[popup-open]:text-text`;
+
+/*
+ * Under a turn that forks went on after, the way over to them: one fork opens at once, more open a
+ * menu of them by name.
+ */
+export function ForksRow({ chatId, turnId }: { chatId: string; turnId: string }) {
+    const { t } = useTranslation('agent-chat');
+    const forks = useForkIdsAfter(chatId, turnId);
+    const label = t('work.forksAfter', { count: forks.length });
+    if (forks.length === 0) {
+        return null;
+    }
+    if (forks.length === 1) {
+        return <OneFork forkId={forks[0]!} label={label} />;
+    }
+    return (
+        <div className="flex">
+            <Menu.Root>
+                <Menu.Trigger className={LINK}>
+                    <ForksLabel label={label} />
+                </Menu.Trigger>
+                <Menu.Popup className="min-w-48">
+                    {forks.map((forkId) => (
+                        <ForkItem key={forkId} forkId={forkId} />
+                    ))}
+                </Menu.Popup>
+            </Menu.Root>
+        </div>
+    );
+}
+
+function ForksLabel({ label, link = true }: { label: string; link?: boolean }) {
+    return (
+        <>
+            <span className={ROW_GUTTER}>
+                <Icon icon={GitFork} size={12} />
+            </span>
+            {label}
+            {link && <Icon icon={ChevronRight} size={12} />}
+        </>
+    );
+}
+
+// A fork no longer in this project has nowhere to lead, so it only says it is there.
+function OneFork({ forkId, label }: { forkId: string; label: string }) {
+    const place = chatHost().useChatPlace(forkId);
+    return (
+        <div className="flex">
+            {place.title === null ? (
+                <span className={LINE}>
+                    <ForksLabel label={label} link={false} />
+                </span>
+            ) : (
+                <button className={LINK} onClick={place.go}>
+                    <ForksLabel label={label} />
+                </button>
+            )}
+        </div>
+    );
+}
+
+function ForkItem({ forkId }: { forkId: string }) {
+    const { t } = useTranslation('agent-chat');
+    const place = chatHost().useChatPlace(forkId);
+    return (
+        <Menu.Item disabled={place.title === null} onClick={place.go}>
+            <Icon icon={GitFork} size={14} /> <span className="truncate">{place.title ?? t('fork.pill.label')}</span>
+        </Menu.Item>
+    );
+}

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

@@ -0,0 +1,415 @@
+import { useContext, useState, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Bot, Brain, Check, ChevronDown, CircleAlert, File, Info, MessageCircleQuestionMark, TriangleAlert, X } from 'lucide-react';
+import type { ChatApprovalItem, ChatAttachment, ChatAssistantItem, ChatQuestionItem, ChatThinkingItem, ChatUserItem } 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 { useProviders } from '../../../state/providers';
+import { ChatReferenceChip } from '../ChatReferenceChip';
+import { ImageThumb } from '../ImageView';
+import { 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, formatTokens } from '@adecore/ui/format';
+import { Icon, Tooltip, useTickingText } from '@adecore/ui';
+import { toolSummary } from '../../logic/tools';
+import { ROW_GUTTER } from '../icons';
+import { useOpenForFind } from '../find-reveal';
+import { ReplyContext } from '../reply-context';
+
+// A long prompt folds so the answer stays in view; the reader can open it.
+const USER_FOLD_LINES = 8;
+const USER_FOLD_CHARS = 600;
+
+/* A folded user prompt fades out at the bottom instead of cutting a line in half. */
+const FOLD = 'max-h-[10em] overflow-hidden [mask-image:linear-gradient(to_bottom,black_70%,transparent)]';
+
+function useReplyAuthor(chatId: string) {
+    const { id } = useChatScope();
+    const context = useContext(ReplyContext);
+    const author = chatHost().useReplyAuthor(id, context?.chatId ?? chatId);
+    return context !== null && context.chatId === undefined ? null : author;
+}
+
+/*
+ * A file attached to a message that is not a picture. `download` is what saves a blob URL: the shell
+ * 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 { id } = useChatScope();
+    const { url } = chatHost().attachments.useUrl(id, chatId, attachment.id);
+    const badge = fileBadge(attachment.name);
+    return (
+        <Tooltip label={attachment.name}>
+            <a
+                href={url ?? undefined}
+                download={attachment.name}
+                target="_blank"
+                rel="noreferrer"
+                aria-disabled={url === null}
+                className="flex h-28 w-36 flex-col rounded-xl border border-border bg-surface-raised bg-clip-padding p-2.5 text-left hover:bg-surface-hover"
+            >
+                <span className="flex h-6 min-w-6 items-center justify-center self-start rounded-md border border-border px-1.5 text-xs font-medium text-text-muted">
+                    {badge ?? <Icon icon={File} size={12} />}
+                </span>
+                <span className="mt-auto line-clamp-2 text-xs break-all text-text">{attachment.name}</span>
+                <span className="text-xs text-text-faint">{formatBytes(attachment.size)}</span>
+            </a>
+        </Tooltip>
+    );
+}
+
+/* A picture attached to a message, which opens large. */
+function AttachmentThumb({ chatId, attachment }: { chatId: string; attachment: ChatAttachment }) {
+    const { id } = useChatScope();
+    const source = chatHost().attachments.useUrl(id, chatId, attachment.id);
+    return <ImageThumb source={source} alt={attachment.name} className="max-h-32 max-w-48 object-cover" />;
+}
+
+export function UserRow({ chatId, item }: { chatId: string; item: ChatUserItem }) {
+    const { t } = useTranslation('agent-chat');
+    const [open, setOpen] = useState(false);
+    const long = item.text.split('\n').length > USER_FOLD_LINES || item.text.length > USER_FOLD_CHARS;
+    const attachments = item.attachments ?? [];
+    const chats = item.chats ?? [];
+    useOpenForFind(item.id, 'text', setOpen);
+    return (
+        <div data-find-item={item.id} className="flex flex-col items-end">
+            <MessageHeading>{t('rows.user.heading')}</MessageHeading>
+            {attachments.length > 0 && (
+                <div className="mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5">
+                    {attachments.map((attachment) =>
+                        isImageAttachment(attachment.mime) ? (
+                            <AttachmentThumb key={attachment.id} chatId={chatId} attachment={attachment} />
+                        ) : (
+                            <AttachmentLink key={attachment.id} chatId={chatId} attachment={attachment} />
+                        )
+                    )}
+                </div>
+            )}
+            {chats.length > 0 && (
+                <div className="mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5">
+                    {chats.map((id) => (
+                        <ChatReferenceChip key={id} chatId={id} />
+                    ))}
+                </div>
+            )}
+            {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} />
+                    </div>
+                    {long && (
+                        <button className="mt-1 flex items-center gap-1 text-xs text-text-muted hover:text-text" onClick={() => setOpen((o) => !o)}>
+                            <Icon icon={ChevronDown} size={12} className={clsx('transition-transform', open && 'rotate-180')} />{' '}
+                            {open ? t('rows.user.showLess') : t('rows.user.showAll')}
+                        </button>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
+
+/*
+ * Who wrote a message, for a screen reader only: one heading per message is what lets VoiceOver's
+ * rotor walk a thread from message to message. `select-none`, so a selection copied across two
+ * messages does not pick the names up.
+ */
+function MessageHeading({ children }: { children: ReactNode }) {
+    return <h3 className="sr-only select-none">{children}</h3>;
+}
+
+/* The report a subagent handed back, drawn as a reply under a label of its own. */
+export function ReportRow({ id, text }: { id: string; text: string }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div data-find-item={id} className="-mx-1 px-1 pb-2">
+            <MessageHeading>{t('rows.report.heading')}</MessageHeading>
+            <div aria-hidden className="mb-1 text-xs font-medium text-text-faint select-none">
+                {t('rows.report.heading')}
+            </div>
+            <div data-find-field="text" data-quote-answer className="contents">
+                <ReplyMarkdown text={text} streaming={false} />
+            </div>
+        </div>
+    );
+}
+
+/* The heading of a reply, named after its author when the host names one and after the agent the chat runs otherwise. */
+function ReplyHeading({ chatId }: { chatId: string }) {
+    const { t } = useTranslation('agent-chat');
+    const context = useContext(ReplyContext);
+    const author = useReplyAuthor(chatId);
+    const kind = useChatRow(chatId, (row) => row?.info.provider);
+    const name = useProviders((s) => s.providers.find((provider) => provider.kind === (context?.provider ?? kind))?.name);
+    return <MessageHeading>{author?.name ?? name ?? t('rows.reply.agent')}</MessageHeading>;
+}
+
+/*
+ * The line over a reply with who wrote it and how long ago, when the host names its author. A screen
+ * reader hears the name from the reply's own heading, so this line is for the eye only.
+ */
+export function ReplyHeader({ chatId, at }: { chatId: string; at: number | null }) {
+    const author = useReplyAuthor(chatId);
+    if (author === null) {
+        return null;
+    }
+    return (
+        <div aria-hidden className="mb-1 flex h-6 items-center gap-2 text-sm font-medium text-text select-none">
+            {author.mark}
+            <span className="min-w-0 truncate">{author.name}</span>
+            {at !== null && <ReplyAge at={at} />}
+        </div>
+    );
+}
+
+function ReplyAge({ at }: { at: number }) {
+    const ref = useTickingText(() => formatAgo(Date.now() - at), 30_000);
+    return <span ref={ref} className="shrink-0 font-normal text-text-faint" />;
+}
+
+/* The line that stands where the next words will land; a component, so the word is read at render and not at import. */
+function Writing() {
+    const { t } = useTranslation('agent-chat');
+    return <span className="chat-live-text text-sm">{t('rows.reply.writing')}</span>;
+}
+
+/*
+ * A reply. A word at a time, it follows the text as it arrives. A block at a time, the blocks that
+ * closed are drawn and fade in as they land, with "Writing…" where the next one will stand. Whole,
+ * it says it is being written and fades in once it is done. Only a row that saw the reply being
+ * written fades anything: an old reply scrolled back into view just stands there.
+ */
+export function AssistantRow({ chatId, item: derived }: { chatId: string; item: ChatAssistantItem }) {
+    const item = useCurrentItem(chatId, derived);
+    const mode = chatHost().useStreaming();
+    const [sawWriting] = useState(item.streaming);
+    const live = mode === 'words' && item.streaming;
+    const reveal = useRevealedText(item.text, live);
+
+    if (mode === 'blocks') {
+        const settled = item.streaming ? settledBlocksText(item.text) : item.text;
+        return (
+            <div data-find-item={item.id} className="-mx-1 px-1 pb-2">
+                <ReplyHeading chatId={chatId} />
+                {settled !== '' && (
+                    <div data-find-field="text" data-quote-answer className="contents">
+                        <ReplyMarkdown text={settled} streaming={false} arriving={sawWriting} />
+                    </div>
+                )}
+                {item.streaming && <Writing />}
+            </div>
+        );
+    }
+    if (mode === 'whole' && item.streaming) {
+        return (
+            <div className="-mx-1 px-1 pb-2">
+                <ReplyHeading chatId={chatId} />
+                <Writing />
+            </div>
+        );
+    }
+    return (
+        <div data-find-item={item.id} className={clsx('-mx-1 px-1 pb-2', mode === 'whole' && sawWriting && WHOLE_FADE_CLASS)}>
+            <ReplyHeading chatId={chatId} />
+            <div data-find-field="text" data-quote-answer className="contents">
+                <ReplyMarkdown text={reveal.text} streaming={reveal.active} />
+            </div>
+            {live && item.text === '' && <span className="inline-block h-3.5 w-1.5 animate-pulse rounded-sm bg-text-faint align-middle" />}
+        </div>
+    );
+}
+
+/*
+ * 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.
+ */
+export function ThinkingRow({ chatId, item: derived }: { chatId: string; item: ChatThinkingItem }) {
+    const { t } = useTranslation('agent-chat');
+    const item = useCurrentItem(chatId, derived);
+    const mode = chatHost().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.
+    const settled = mode === 'blocks' && item.streaming ? settledBlocksText(item.text) : null;
+    // 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;
+    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)}>
+                <span className={ROW_GUTTER}>
+                    <Icon icon={Brain} size={12} />
+                </span>
+                {item.streaming ? (
+                    <span className="chat-live-text">{t('rows.thinking.live')}</span>
+                ) : (
+                    <>
+                        <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')} />
+                    </>
+                )}
+            </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>
+            )}
+        </div>
+    );
+}
+
+const NOTE_ICON = {
+    info: <Icon icon={Info} size={12} />,
+    warning: <Icon icon={TriangleAlert} size={12} />,
+    error: <Icon icon={CircleAlert} size={12} />
+};
+
+/*
+ * A line from the machine in the thread. A note of more than one line (a summary a fork sent back)
+ * shows its first line and folds the rest open as markdown; one that came from a fork leads to it.
+ */
+export function NoteRow({ id, level, text, from }: { id: string; level: 'info' | 'warning' | 'error'; text: string; from?: string }) {
+    const { t } = useTranslation('agent-chat');
+    const [open, setOpen] = useState(false);
+    const breakAt = text.indexOf('\n');
+    const head = breakAt === -1 ? text : text.slice(0, breakAt);
+    const rest = breakAt === -1 ? '' : text.slice(breakAt + 1).trim();
+    useOpenForFind(id, 'output', setOpen);
+    return (
+        <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'
+            )}
+        >
+            <span className={ROW_GUTTER}>{NOTE_ICON[level]}</span>
+            <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-center gap-x-2">
+                    <span data-find-field="summary" className="select-text">
+                        {head}
+                    </span>
+                    {rest !== '' && (
+                        <button className="text-text-muted hover:text-text" onClick={() => setOpen(!open)}>
+                            {open ? t('rows.note.hide') : t('rows.note.show')}
+                        </button>
+                    )}
+                    {from !== undefined && <OpenChatButton chatId={from} />}
+                </div>
+                {open && rest !== '' && (
+                    <div data-find-field="output" className="mt-1 text-text-muted select-text">
+                        <MessageMarkdown text={rest} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/* "Open fork" on a note a fork sent, while that fork is still in the project. */
+function OpenChatButton({ chatId }: { chatId: string }) {
+    const { t } = useTranslation('agent-chat');
+    const place = chatHost().useChatPlace(chatId);
+    if (place.title === null) {
+        return null;
+    }
+    return (
+        <button className="text-text-muted hover:text-text" onClick={place.go}>
+            {t('rows.note.openFork')}
+        </button>
+    );
+}
+
+/*
+ * The header of a turn the agent started itself, in place of the message of the person that is
+ * missing. It is one line: what the sub-agent came back with lives on that agent's own row, behind
+ * "Show result". When the CLI named the sub-agent it woke up about, the header opens that row.
+ */
+export function AgentTurnRow({ label, onOpen }: { label: string; onOpen?: () => void }) {
+    const line = 'mb-0.5 flex h-7 w-full items-center gap-2 text-left text-xs text-text-muted';
+    // A header with nowhere to go is text to read and copy; one that opens a row is a button.
+    const content = (
+        <>
+            <span className={ROW_GUTTER}>
+                <Icon icon={Bot} size={12} />
+            </span>
+            <span className={clsx('min-w-0 truncate', onOpen === undefined && 'select-text')}>{label}</span>
+        </>
+    );
+    if (onOpen === undefined) {
+        return <div className={line}>{content}</div>;
+    }
+    return (
+        <button className={clsx(line, 'hover:text-text')} onClick={onOpen}>
+            {content}
+        </button>
+    );
+}
+
+/* A dashed line, since what stands above it is still there for the reader but only a summary to the agent. */
+export function CompactionRow({ preTokens }: { preTokens: number | null }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div className="flex items-center gap-3 pb-3 text-xs text-text-faint">
+            <span className="grow border-t border-dashed border-border" />
+            <Tooltip label={t('rows.compaction.summary')}>
+                <span>{preTokens ? t('rows.compaction.from', { tokens: formatTokens(preTokens) }) : t('rows.compaction.plain')}</span>
+            </Tooltip>
+            <span className="grow border-t border-dashed border-border" />
+        </div>
+    );
+}
+
+const DECISION_ICON: Record<Exclude<ChatApprovalItem['decision'], 'pending'>, React.ReactNode> = {
+    allow: <Icon icon={Check} size={12} />,
+    'allow-always': <Icon icon={Check} size={12} />,
+    deny: <Icon icon={X} size={12} />,
+    cancelled: <Icon icon={X} size={12} />
+};
+
+/* The outcome of a permission request, one quiet line; the request itself lived on the composer. */
+export function ApprovalHistoryRow({ item }: { item: ChatApprovalItem }) {
+    const { t } = useTranslation('agent-chat');
+    if (item.decision === 'pending') {
+        return null;
+    }
+    return (
+        <div className="-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-faint">
+            <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>
+        </div>
+    );
+}
+
+export function QuestionHistoryRow({ item }: { item: ChatQuestionItem }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div>
+            {item.questions.map((question) => (
+                <div key={question.id} className="-mx-1 mb-0.5 flex min-h-7 items-start gap-2 px-1 py-1 text-xs text-text-faint">
+                    <span className={ROW_GUTTER}>
+                        <Icon icon={MessageCircleQuestionMark} size={12} />
+                    </span>
+                    <span className="min-w-0">
+                        <span className="text-text-muted">{question.question}</span>
+                        {item.state === 'answered' && item.answers?.[question.id] !== undefined && (
+                            <span className="ml-1.5 text-text">{item.answers[question.id]}</span>
+                        )}
+                        {item.state === 'cancelled' && <span className="ml-1.5">{t('rows.question.notAnswered')}</span>}
+                        {item.state === 'dismissed' && <span className="ml-1.5">{t('rows.question.dismissed')}</span>}
+                    </span>
+                </div>
+            ))}
+        </div>
+    );
+}