@ruimte/agents-react 0.0.0 → 0.7.0

package/dist/chat/ui/reveal.js

@@ -0,0 +1,112 @@
+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;
+const isSpace = (text, index) => 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 const advanceReveal = (position, target, elapsedMs, finished) => {
+    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 const revealBoundary = (text, position, complete) => {
+    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;
+};
+/*
+ * 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 const useRevealedText = (text, streaming) => {
+    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 = null;
+        let grewAt = -Infinity;
+        const tick = (now) => {
+            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/dist/chat/ui/rows/ForksRow.d.ts

@@ -0,0 +1,4 @@
+export declare function ForksRow({ chatId, turnId }: {
+    chatId: string;
+    turnId: string;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu } from '@base-ui-components/react/menu';
+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 } from '@ruimte/ui/Icon';
+import { MenuPopup } from '@ruimte/ui/MenuPopup';
+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 }) {
+    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 _jsx(OneFork, { forkId: forks[0], label: label });
+    }
+    return (_jsx("div", { className: "flex", children: _jsxs(Menu.Root, { children: [_jsx(Menu.Trigger, { className: LINK, children: _jsx(ForksLabel, { label: label }) }), _jsx(MenuPopup, { className: "min-w-48", children: forks.map((forkId) => (_jsx(ForkItem, { forkId: forkId }, forkId))) })] }) }));
+}
+function ForksLabel({ label, link = true }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: GitFork, size: 12 }) }), label, link && _jsx(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 }) {
+    const place = chatHost().useChatPlace(forkId);
+    return (_jsx("div", { className: "flex", children: place.title === null ? (_jsx("span", { className: LINE, children: _jsx(ForksLabel, { label: label, link: false }) })) : (_jsx("button", { className: LINK, onClick: place.go, children: _jsx(ForksLabel, { label: label }) })) }));
+}
+function ForkItem({ forkId }) {
+    const { t } = useTranslation('agent-chat');
+    const place = chatHost().useChatPlace(forkId);
+    return (_jsxs(Menu.Item, { className: "menu-item", disabled: place.title === null, onClick: place.go, children: [_jsx(Icon, { icon: GitFork, size: 14 }), " ", _jsx("span", { className: "truncate", children: place.title ?? t('fork.pill.label') })] }));
+}

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

@@ -0,0 +1,36 @@
+import type { ChatApprovalItem, ChatAssistantItem, ChatQuestionItem, ChatThinkingItem, ChatUserItem } from '@ruimte/agent-contracts';
+export declare function UserRow({ chatId, item }: {
+    chatId: string;
+    item: ChatUserItem;
+}): import("react").JSX.Element;
+export declare function ReportRow({ id, text }: {
+    id: string;
+    text: string;
+}): import("react").JSX.Element;
+export declare function AssistantRow({ chatId, item: derived }: {
+    chatId: string;
+    item: ChatAssistantItem;
+}): import("react").JSX.Element;
+export declare function ThinkingRow({ chatId, item: derived }: {
+    chatId: string;
+    item: ChatThinkingItem;
+}): import("react").JSX.Element;
+export declare function NoteRow({ id, level, text, from }: {
+    id: string;
+    level: 'info' | 'warning' | 'error';
+    text: string;
+    from?: string;
+}): import("react").JSX.Element;
+export declare function AgentTurnRow({ label, onOpen }: {
+    label: string;
+    onOpen?: () => void;
+}): import("react").JSX.Element;
+export declare function CompactionRow({ preTokens }: {
+    preTokens: number | null;
+}): import("react").JSX.Element;
+export declare function ApprovalHistoryRow({ item }: {
+    item: ChatApprovalItem;
+}): import("react").JSX.Element | null;
+export declare function QuestionHistoryRow({ item }: {
+    item: ChatQuestionItem;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,190 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } 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 { fileBadge, formatBytes, isImageAttachment } from '../../attachments';
+import { useChatRow } 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 { formatElapsedShort } from '@ruimte/ui/format/duration';
+import { formatTokens } from '@ruimte/ui/format/number';
+import { toolSummary } from '../../logic/tools';
+import { ROW_GUTTER } from '../icons';
+import { useOpenForFind } from '../find-reveal';
+import { Icon } from '@ruimte/ui/Icon';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+// 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)]';
+/*
+ * 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 }) {
+    const { id } = useChatScope();
+    const { url } = chatHost().attachments.useUrl(id, chatId, attachment.id);
+    const badge = fileBadge(attachment.name);
+    return (_jsx(Tooltip, { label: attachment.name, children: _jsxs("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", children: [_jsx("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", children: badge ?? _jsx(Icon, { icon: File, size: 12 }) }), _jsx("span", { className: "mt-auto line-clamp-2 text-xs break-all text-text", children: attachment.name }), _jsx("span", { className: "text-xs text-text-faint", children: formatBytes(attachment.size) })] }) }));
+}
+/* A picture attached to a message, which opens large. */
+function AttachmentThumb({ chatId, attachment }) {
+    const { id } = useChatScope();
+    const source = chatHost().attachments.useUrl(id, chatId, attachment.id);
+    return _jsx(ImageThumb, { source: source, alt: attachment.name, className: "max-h-32 max-w-48 object-cover" });
+}
+export function UserRow({ chatId, item }) {
+    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 (_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.text !== '' && (_jsxs("div", { className: "relative max-w-[80%] rounded-2xl bg-surface-active px-3.5 py-2.5 text-sm 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')] }))] }))] }));
+}
+/*
+ * The item as the thread holds it now. The row was derived from the structure, which a delta leaves
+ * alone, so only this row renders again when a word arrives.
+ */
+const useCurrentItem = (chatId, derived) => useChatRow(chatId, (row) => {
+    const item = row?.items[derived.id];
+    return item?.kind === derived.kind ? item : derived;
+});
+/*
+ * 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 }) {
+    return _jsx("h3", { className: "sr-only select-none", children: children });
+}
+/* The report a subagent handed back, drawn as a reply under a label of its own. */
+export function ReportRow({ id, text }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsxs("div", { "data-find-item": id, className: "-mx-1 px-1 pb-2", children: [_jsx(MessageHeading, { children: t('rows.report.heading') }), _jsx("div", { "aria-hidden": true, className: "mb-1 text-xs font-medium text-text-faint select-none", children: t('rows.report.heading') }), _jsx("div", { "data-find-field": "text", "data-quote-answer": true, className: "contents", children: _jsx(ReplyMarkdown, { text: text, streaming: false }) })] }));
+}
+/* The heading of a reply, named after the agent the chat runs. */
+function ReplyHeading({ chatId }) {
+    const { t } = useTranslation('agent-chat');
+    const kind = useChatRow(chatId, (row) => row?.info.provider);
+    const name = useProviders((s) => s.providers.find((provider) => provider.kind === kind)?.name);
+    return _jsx(MessageHeading, { children: name ?? t('rows.reply.agent') });
+}
+/* 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 _jsx("span", { className: "chat-live-text text-sm", children: t('rows.reply.writing') });
+}
+/*
+ * 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 }) {
+    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 (_jsxs("div", { "data-find-item": item.id, className: "-mx-1 px-1 pb-2", children: [_jsx(ReplyHeading, { chatId: chatId }), settled !== '' && (_jsx("div", { "data-find-field": "text", "data-quote-answer": true, className: "contents", children: _jsx(ReplyMarkdown, { text: settled, streaming: false, arriving: sawWriting }) })), item.streaming && _jsx(Writing, {})] }));
+    }
+    if (mode === 'whole' && item.streaming) {
+        return (_jsxs("div", { className: "-mx-1 px-1 pb-2", children: [_jsx(ReplyHeading, { chatId: chatId }), _jsx(Writing, {})] }));
+    }
+    return (_jsxs("div", { "data-find-item": item.id, className: clsx('-mx-1 px-1 pb-2', mode === 'whole' && sawWriting && WHOLE_FADE_CLASS), children: [_jsx(ReplyHeading, { chatId: chatId }), _jsx("div", { "data-find-field": "text", "data-quote-answer": true, className: "contents", children: _jsx(ReplyMarkdown, { text: reveal.text, streaming: reveal.active }) }), live && item.text === '' && _jsx("span", { className: "inline-block h-3.5 w-1.5 animate-pulse rounded-sm bg-text-faint align-middle" })] }));
+}
+/*
+ * 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 }) {
+    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 (_jsxs("div", { "data-find-item": item.id, className: "-mx-1 px-1 pb-2", children: [_jsxs("button", { className: "flex items-center gap-2 text-xs text-text-muted hover:text-text", disabled: item.streaming, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: Brain, size: 12 }) }), item.streaming ? (_jsx("span", { className: "chat-live-text", children: t('rows.thinking.live') })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: t('rows.thinking.thoughtFor', { duration: formatElapsedShort((item.endedAt ?? item.createdAt) - item.createdAt) }) }), _jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('transition-transform', open && 'rotate-180') })] }))] }), shown && text !== '' && (_jsx("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", children: reveal.active ? _jsx(FadingWords, { text: reveal.text }) : text }))] }));
+}
+const NOTE_ICON = {
+    info: _jsx(Icon, { icon: Info, size: 12 }),
+    warning: _jsx(Icon, { icon: TriangleAlert, size: 12 }),
+    error: _jsx(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 }) {
+    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 (_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 }) }))] })] }));
+}
+/* "Open fork" on a note a fork sent, while that fork is still in the project. */
+function OpenChatButton({ chatId }) {
+    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') }));
+}
+/*
+ * 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 }) {
+    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 = (_jsxs(_Fragment, { children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: Bot, size: 12 }) }), _jsx("span", { className: clsx('min-w-0 truncate', onOpen === undefined && 'select-text'), children: label })] }));
+    if (onOpen === undefined) {
+        return _jsx("div", { className: line, children: content });
+    }
+    return (_jsx("button", { className: clsx(line, 'hover:text-text'), onClick: onOpen, children: content }));
+}
+/* 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 }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsxs("div", { className: "flex items-center gap-3 pb-3 text-xs text-text-faint", children: [_jsx("span", { className: "grow border-t border-dashed border-border" }), _jsx(Tooltip, { label: t('rows.compaction.summary'), children: _jsx("span", { children: preTokens ? t('rows.compaction.from', { tokens: formatTokens(preTokens) }) : t('rows.compaction.plain') }) }), _jsx("span", { className: "grow border-t border-dashed border-border" })] }));
+}
+const DECISION_ICON = {
+    allow: _jsx(Icon, { icon: Check, size: 12 }),
+    'allow-always': _jsx(Icon, { icon: Check, size: 12 }),
+    deny: _jsx(Icon, { icon: X, size: 12 }),
+    cancelled: _jsx(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 }) {
+    const { t } = useTranslation('agent-chat');
+    if (item.decision === 'pending') {
+        return null;
+    }
+    return (_jsxs("div", { className: "-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-faint", children: [_jsx("span", { className: clsx(ROW_GUTTER, item.decision === 'deny' && 'text-status-error'), children: DECISION_ICON[item.decision] }), _jsx("span", { className: clsx(item.decision === 'deny' && 'text-status-error'), children: t(`rows.approval.${item.decision}`) }), _jsx("span", { className: "text-text-muted", children: item.toolName }), _jsx("span", { className: "min-w-0 truncate font-mono", children: toolSummary(item.toolName, item.input) })] }));
+}
+export function QuestionHistoryRow({ item }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsx("div", { children: item.questions.map((question) => (_jsxs("div", { className: "-mx-1 mb-0.5 flex min-h-7 items-start gap-2 px-1 py-1 text-xs text-text-faint", children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: MessageCircleQuestionMark, size: 12 }) }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "text-text-muted", children: question.question }), item.state === 'answered' && item.answers?.[question.id] !== undefined && (_jsx("span", { className: "ml-1.5 text-text", children: item.answers[question.id] })), item.state === 'cancelled' && _jsx("span", { className: "ml-1.5", children: t('rows.question.notAnswered') }), item.state === 'dismissed' && _jsx("span", { className: "ml-1.5", children: t('rows.question.dismissed') })] })] }, question.id))) }));
+}

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

@@ -0,0 +1,12 @@
+import type { TimelineRow } from '../../logic/timeline';
+import type { SubagentStep } from '../../subagent-view';
+export interface RowProps {
+    row: TimelineRow;
+    chatId: string;
+    toggleGroup(id: string): void;
+    toggleTurn(id: string): void;
+    toggleSubagent(id: string): void;
+    openSubagent(toolUseId: string): void;
+    openConversation?(step: SubagentStep): void;
+}
+export declare function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, openSubagent, openConversation }: RowProps): import("react").JSX.Element;

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AgentTurnRow, ApprovalHistoryRow, AssistantRow, CompactionRow, NoteRow, QuestionHistoryRow, ReportRow, ThinkingRow, UserRow } from './MessageRows';
+import { ForksRow } from './ForksRow';
+import { SubagentBranchRow } from './SubagentRow';
+import { WorkflowRow } from './WorkflowRow';
+import { ChangedFilesRow, TurnFoldRow, WorkGroupRow, WorkLiveRow, WorkRow, WorkingRow } from './WorkRows';
+/* One row of a thread, the chat's own or a subagent's read back, drawn the same way in both. */
+export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, openSubagent, openConversation }) {
+    switch (row.kind) {
+        case 'user':
+            return _jsx(UserRow, { chatId: chatId, item: row.item });
+        case 'turn-start': {
+            const toolUseId = row.turn.taskToolUseId;
+            return _jsx(AgentTurnRow, { label: row.label, onOpen: toolUseId ? () => openSubagent(toolUseId) : undefined });
+        }
+        case 'assistant':
+            return _jsx(AssistantRow, { chatId: chatId, item: row.item });
+        case 'report':
+            return _jsx(ReportRow, { id: row.id, text: row.text });
+        case 'thinking':
+            return _jsx(ThinkingRow, { chatId: chatId, item: row.item });
+        case 'work':
+            return _jsx(WorkRow, { tool: row.tool });
+        case 'work-live':
+            return _jsx(WorkLiveRow, { tool: row.tool });
+        case 'workflow':
+            return _jsx(WorkflowRow, { tool: row.tool, workflow: row.workflow, onOpenAgent: openConversation });
+        case 'work-group':
+            return _jsx(WorkGroupRow, { tools: row.tools, summary: row.summary, expanded: row.expanded, onToggle: () => toggleGroup(row.id) });
+        case 'subagent':
+            return _jsx(SubagentBranchRow, { branch: row, onToggle: toggleSubagent, onOpenConversation: openConversation });
+        case 'turn-fold':
+            return _jsx(TurnFoldRow, { turn: row.turn, label: row.label, work: row.work, expanded: row.expanded, onToggle: () => toggleTurn(row.turn.id) });
+        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 });
+        case 'approval':
+            return _jsx(ApprovalHistoryRow, { item: row.item });
+        case 'question':
+            return _jsx(QuestionHistoryRow, { item: row.item });
+        case 'note':
+            return _jsx(NoteRow, { id: row.id, level: row.level, text: row.text, from: row.from });
+        case 'compaction':
+            return _jsx(CompactionRow, { preTokens: row.preTokens });
+        case 'working':
+            return _jsx(WorkingRow, { startedAt: row.startedAt });
+    }
+}

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

@@ -0,0 +1,15 @@
+import type { ChatItem, ChatSubagentItem } from '@ruimte/agent-contracts';
+import type { SubagentBranch } from '../../logic/timeline';
+import { type SubagentStep } from '../../subagent-view';
+export declare function SubagentRow({ item, work, expanded, onToggle, onOpenConversation }: {
+    item: ChatSubagentItem;
+    work: ChatItem[];
+    expanded: boolean;
+    onToggle(): void;
+    onOpenConversation?(): void;
+}): import("react").JSX.Element;
+export declare function SubagentBranchRow({ branch, onToggle, onOpenConversation }: {
+    branch: SubagentBranch;
+    onToggle(id: string): void;
+    onOpenConversation?(step: SubagentStep): void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,98 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Bot, ChevronDown } from 'lucide-react';
+import { formatElapsedShort } from '@ruimte/ui/format/duration';
+import { useOpenForFind } from '../find-reveal';
+import { Markdown } from '../Markdown';
+import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows';
+import { entryTimeOf, statusWordOf, taskIdOf } from '../../subagent-list';
+import { useSubagentSupport } from '../../subagent-support';
+import { canOpenSubagent, crumbOf } from '../../subagent-view';
+import { chatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { Icon } from '@ruimte/ui/Icon';
+import { useNow } from '@ruimte/ui/useNow';
+// The work of a long-running agent scrolls inside its row instead of pushing the thread away.
+const CHILDREN_MAX_PX = 320;
+/*
+ * One step a sub-agent took, inside its parent's row. The thread's own `Row` draws the same kinds,
+ * but off a timeline it has already grouped and folded, and it writes an answer at the size of a
+ * message; here every step is a line and the text is the aside under it.
+ */
+function ChildRow({ item }) {
+    if (item.kind === 'tool') {
+        return item.state === 'running' ? _jsx(WorkLiveRow, { tool: item }) : _jsx(WorkRow, { tool: item });
+    }
+    if (item.kind === 'assistant') {
+        return (_jsx("div", { className: "-mx-1 px-1 pb-2 text-xs text-text-muted select-text", children: _jsx(Markdown, { text: item.text }) }));
+    }
+    return null;
+}
+function StatusPill({ item, task }) {
+    const { t } = useTranslation('agent-chat');
+    const paused = statusWordOf(item, task) === 'paused';
+    const now = useNow(60_000, paused);
+    if (paused) {
+        return _jsx("span", { className: "shrink-0 text-xs text-text-faint tabular-nums", children: entryTimeOf(item, task, now) });
+    }
+    if (item.status === 'running') {
+        return _jsx(RunningFor, { startedAt: item.startedAt });
+    }
+    const failed = item.status === 'failed';
+    const duration = item.finishedAt === null ? null : formatElapsedShort(item.finishedAt - item.startedAt);
+    const outcome = failed ? 'failed' : 'done';
+    return (_jsx("span", { className: clsx('shrink-0 text-xs tabular-nums', failed ? 'text-status-error' : 'text-text-faint'), children: duration === null ? t(`common.status.${outcome}`) : t(`rows.subagent.${outcome}In`, { duration }) }));
+}
+/* What the sub-agent did, live: its own tool calls and the text it wrote, as ordinary rows. */
+function SubagentWork({ item, work }) {
+    const { t } = useTranslation('agent-chat');
+    const scroller = useRef(null);
+    const running = item.status === 'running';
+    useLayoutEffect(() => {
+        // While it works, the newest line is the one worth seeing.
+        if (running && scroller.current) {
+            scroller.current.scrollTop = scroller.current.scrollHeight;
+        }
+    }, [work.length, running]);
+    if (work.length === 0) {
+        // A line inside a chat row, where the centered block of an EmptyState would outweigh the row itself.
+        return _jsx("div", { className: "ml-6 pb-1 text-xs text-text-faint", children: t('rows.subagent.nothingYet') });
+    }
+    return (_jsxs("div", { ref: scroller, className: "ml-6 overflow-y-auto", style: { maxHeight: CHILDREN_MAX_PX }, children: [item.itemsTruncated && _jsx("div", { className: "pb-1 text-xs text-text-faint", children: t('rows.subagent.truncated') }), work.map((child) => (_jsx(ChildRow, { item: child }, child.id)))] }));
+}
+/* The report the sub-agent handed back, behind a fold: the row is about the work, this is the answer. */
+function SubagentResult({ itemId, result }) {
+    const { t } = useTranslation('agent-chat');
+    const [open, setOpen] = useState(false);
+    useOpenForFind(itemId, 'output', setOpen);
+    return (_jsxs("div", { className: "ml-6 pb-1", children: [_jsxs("button", { className: "flex items-center gap-1.5 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.subagent.hideResult') : t('rows.subagent.showResult')] }), open && (_jsx("div", { "data-find-field": "output", className: "mt-1 rounded-md border border-border bg-surface-raised px-3 py-2 select-text", children: _jsx(Markdown, { text: result }) }))] }));
+}
+/*
+ * One agent the agent delegated to. The line says what it is doing and for how long; pressing it
+ * opens the whole conversation in the thread's place, and where there is none to open it folds out
+ * the work the thread kept and, once it settled, the report it wrote.
+ */
+export function SubagentRow({ item, work, expanded, onToggle, onOpenConversation }) {
+    const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    const taskId = taskIdOf(item);
+    const task = chatHost().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 || '';
+    // A row that carries no pointer on a host that already said no has nothing to open.
+    const refused = useSubagentSupport((s) => s.unsupported[id] === true);
+    const press = onOpenConversation !== undefined && canOpenSubagent(item, refused) ? onOpenConversation : onToggle;
+    return (_jsxs("div", { "data-find-item": item.id, children: [_jsx(ToggleLine, { icon: _jsx(Icon, { icon: Bot, size: 12 }), 
+                // A node another agent opened with `--task` reads as the task it is, not as a helper of the CLI's own.
+                label: item.origin === 'ruimte' ? t('rows.subagent.task') : t('rows.subagent.label'), detail: detail, open: expanded, onToggle: press, failed: item.status === 'failed', live: running, trailing: _jsxs(_Fragment, { children: [item.background && _jsx("span", { className: "shrink-0 text-xs text-text-faint", children: t('rows.subagent.background') }), running && item.lastTool && _jsx("span", { className: "shrink-0 text-xs text-text-faint", children: item.lastTool }), _jsx(StatusPill, { item: item, task: task })] }) }), expanded && (_jsxs("div", { className: "mb-1", children: [_jsx(SubagentWork, { item: item, work: work }), item.result !== null && _jsx(SubagentResult, { itemId: item.id, result: item.result })] }))] }));
+}
+/*
+ * A sub-agent's row with the agents it opened in turn under it. Those stay in sight whether its own
+ * work is folded or not, since opening the parent shows its conversation and not theirs.
+ */
+export function SubagentBranchRow({ branch, onToggle, onOpenConversation }) {
+    return (_jsxs(_Fragment, { children: [_jsx(SubagentRow, { item: branch.item, work: branch.children, expanded: branch.expanded, onToggle: () => onToggle(branch.id), onOpenConversation: onOpenConversation ? () => onOpenConversation(crumbOf(branch.item)) : undefined }), branch.nested.length > 0 && (_jsx("div", { className: "ml-6", children: branch.nested.map((child) => (_jsx(SubagentBranchRow, { branch: child, onToggle: onToggle, onOpenConversation: onOpenConversation }, child.id))) }))] }));
+}

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

@@ -0,0 +1,46 @@
+import type { ChatCheckpointDiff, ChatToolItem, ChatTurnItem } from '@ruimte/agent-contracts';
+export declare function ToggleLine({ icon, label, detail, open, onToggle, failed, live, trailing, className }: {
+    icon: React.ReactNode;
+    label: string;
+    detail?: string;
+    open: boolean;
+    onToggle(): void;
+    failed?: boolean;
+    live?: boolean;
+    trailing?: React.ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function WorkRow({ tool, nested, detail }: {
+    tool: ChatToolItem;
+    nested?: boolean;
+    detail?: string;
+}): import("react").JSX.Element;
+export declare function RunningFor({ startedAt }: {
+    startedAt: number;
+}): import("react").JSX.Element;
+export declare function WorkLiveRow({ tool }: {
+    tool: ChatToolItem;
+}): import("react").JSX.Element;
+export declare function WorkGroupRow({ tools, summary, expanded, onToggle }: {
+    tools: ChatToolItem[];
+    summary: string;
+    expanded: boolean;
+    onToggle(): void;
+}): import("react").JSX.Element;
+export declare function TurnFoldRow({ turn, label, work, expanded, onToggle }: {
+    turn: ChatTurnItem;
+    label: string;
+    work: readonly string[];
+    expanded: boolean;
+    onToggle(): void;
+}): import("react").JSX.Element;
+export declare function ChangedFilesRow({ tools, diff, checkpoint, chatId, turnId }: {
+    tools: ChatToolItem[];
+    diff: ChatCheckpointDiff | null;
+    checkpoint: boolean;
+    chatId: string;
+    turnId: string;
+}): import("react").JSX.Element;
+export declare function WorkingRow({ startedAt }: {
+    startedAt: number;
+}): import("react").JSX.Element;