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

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

@@ -0,0 +1,12 @@
+import type { TimelineRow } from '../../logic/timeline.js';
+import type { SubagentStep } from '../../subagent-view.js';
+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,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { ErrorBoundary } from '@adecore/ui';
+import { AgentTurnRow, ApprovalHistoryRow, AssistantRow, CompactionRow, NoteRow, QuestionHistoryRow, ReportRow, ThinkingRow, UserRow } from './MessageRows.js';
+import { ForksRow } from './ForksRow.js';
+import { SubagentBranchRow } from './SubagentRow.js';
+import { WorkflowRow } from './WorkflowRow.js';
+import { ChangedFilesRow, TurnFoldRow, WorkGroupRow, WorkLiveRow, WorkRow, WorkingRow } from './WorkRows.js';
+/* Its own component, so a card that throws while it renders is caught by the boundary around it. */
+function AppCardBody({ card }) {
+    return card.render();
+}
+function AppCardRow({ card }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsx(ErrorBoundary, { label: t('timeline.cardFailed'), resetKeys: [card], compact: true, className: "relative rounded-lg", children: _jsx(AppCardBody, { card: card }) }));
+}
+/* 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, { chatId: chatId, tool: row.tool });
+        case 'workflow':
+            return _jsx(WorkflowRow, { chatId: chatId, 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, { chatId: chatId, 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 });
+        case 'app-card':
+            return _jsx(AppCardRow, { card: row.card });
+    }
+}

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

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

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

@@ -0,0 +1,101 @@
+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 '@adecore/ui/format';
+import { Icon, useNow } from '@adecore/ui';
+import { useOpenForFind } from '../find-reveal.js';
+import { Markdown } from '../Markdown.js';
+import { TaskRow } from './TaskRow.js';
+import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows.js';
+import { entryTimeOf, statusWordOf, taskIdOf } from '../../subagent-list.js';
+import { useSubagentSupport } from '../../subagent-support.js';
+import { canOpenSubagent, crumbOf } from '../../subagent-view.js';
+import { chatHost } from '../../../host.js';
+import { useChatScope } from '../../../scope.js';
+import { useCurrentItem } from '../../../state/chats.js';
+// 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({ chatId, item }) {
+    if (item.kind === 'tool') {
+        return item.state === 'running' ? _jsx(WorkLiveRow, { chatId: chatId, tool: item }) : _jsx(WorkRow, { tool: item });
+    }
+    if (item.kind === 'assistant') {
+        return _jsx(ChildText, { chatId: chatId, item: item });
+    }
+    return null;
+}
+function ChildText({ chatId, item: derived }) {
+    const item = useCurrentItem(chatId, derived);
+    return (_jsx("div", { className: "-mx-1 px-1 pb-2 text-xs text-text-muted select-text", children: _jsx(Markdown, { text: item.text }) }));
+}
+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({ chatId, 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, { chatId: chatId, 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({ chatId, 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: [item.origin === 'ruimte' ? (_jsx(TaskRow, { item: item, task: task, open: expanded, onPress: press })) : (_jsx(ToggleLine, { icon: _jsx(Icon, { icon: Bot, size: 12 }), label: 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, { chatId: chatId, 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({ chatId, branch, onToggle, onOpenConversation }) {
+    return (_jsxs(_Fragment, { children: [_jsx(SubagentRow, { chatId: chatId, 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, { chatId: chatId, branch: child, onToggle: onToggle, onOpenConversation: onOpenConversation }, child.id))) }))] }));
+}

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

@@ -0,0 +1,8 @@
+import type { ChatSubagentItem } from '@adecore/agent-contracts';
+import type { SubagentTask } from '../../../host.js';
+export declare function TaskRow({ item, task, open, onPress }: {
+    item: ChatSubagentItem;
+    task: SubagentTask | null;
+    open: boolean;
+    onPress(): void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Bot, ChevronRight } from 'lucide-react';
+import { formatElapsedShort, formatMoment } from '@adecore/ui/format';
+import { Icon, useNow, useTickingText } from '@adecore/ui';
+import { AgentIcon } from '../../../agents/AgentIcon.js';
+import { modelName, shortModelName } from '../../../agents/model-name.js';
+import { useChatScope } from '../../../scope.js';
+import { useChats } from '../../../state/chats.js';
+import { useProviders } from '../../../state/providers.js';
+import { taskRowStateOf } from '../../subagent-list.js';
+const DOT = {
+    running: 'bg-status-running',
+    waiting: 'bg-status-needs-you',
+    paused: 'bg-text-faint',
+    done: 'bg-status-idle',
+    failed: 'bg-status-error',
+    cancelled: 'bg-text-faint'
+};
+const STATE_TONE = {
+    running: 'text-text-muted chat-live-text',
+    waiting: 'text-status-needs-you',
+    paused: 'text-text-faint',
+    done: 'text-text-faint',
+    failed: 'text-status-error',
+    cancelled: 'text-text-faint'
+};
+function Elapsed({ startedAt }) {
+    const ref = useTickingText(() => formatElapsedShort(Date.now() - startedAt));
+    return _jsx("span", { ref: ref, className: "shrink-0 text-xs text-text-faint tabular-nums" });
+}
+function StateLine({ state, task }) {
+    const { t } = useTranslation('agent-chat');
+    const until = state === 'paused' ? task?.paused?.until : undefined;
+    const now = useNow(60_000, until === undefined);
+    return (_jsx("span", { className: clsx('truncate text-xs', STATE_TONE[state]), children: until === undefined ? t(`rows.task.${state}`) : t('rows.task.pausedUntil', { time: formatMoment(until, now) }) }));
+}
+/*
+ * The row of a task given to another node: that agent's mark and model, what the task is about and
+ * where it stands, read from the status every client gets of the child's chat. A child without one,
+ * a terminal or a node that is gone, keeps the task's own words.
+ */
+export function TaskRow({ item, task, open, onPress }) {
+    const { t } = useTranslation('agent-chat');
+    const { keyOf } = useChatScope();
+    const child = useChats((s) => (item.childId === undefined ? undefined : s.statusByKey[keyOf(item.childId)]?.info));
+    const provider = child?.provider;
+    const slug = child?.model ?? child?.selection.model ?? null;
+    const model = useProviders((s) => {
+        if (slug === null) {
+            return null;
+        }
+        const models = s.providers.find((entry) => entry.kind === provider)?.models;
+        return shortModelName(modelName(slug, models), models);
+    });
+    const state = taskRowStateOf(item, task, child);
+    const title = item.description || t('rows.subagent.task');
+    const startedAt = task?.createdAt ?? item.startedAt;
+    const finishedAt = task === null ? item.finishedAt : (task.settledAt ?? item.finishedAt);
+    const settled = state === 'done' || state === 'failed' || state === 'cancelled';
+    return (_jsxs("button", { className: "-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-center gap-2.5 rounded-md px-1 py-1 text-left hover:bg-surface-hover", onClick: onPress, children: [_jsxs("span", { className: "relative grid size-7 shrink-0 place-items-center rounded-full bg-surface-raised text-text", children: [provider === undefined ? _jsx(Icon, { icon: Bot, size: 14 }) : _jsx(AgentIcon, { kind: provider, size: 14 }), _jsx("span", { className: clsx('absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2 ring-surface', DOT[state]) })] }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { "data-find-field": "summary", className: "truncate text-xs font-medium text-text", children: model === null ? title : t('rows.task.named', { model, title }) }), _jsx(StateLine, { state: state, task: task })] }), (state === 'running' || state === 'waiting') && startedAt > 0 && _jsx(Elapsed, { startedAt: startedAt }), settled && startedAt > 0 && finishedAt !== null && finishedAt >= startedAt && (_jsx("span", { className: "shrink-0 text-xs text-text-faint tabular-nums", children: formatElapsedShort(finishedAt - startedAt) })), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') })] }));
+}

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

@@ -0,0 +1,47 @@
+import type { ChatCheckpointDiff, ChatToolItem, ChatTurnItem } from '@adecore/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({ chatId, tool: derived }: {
+    chatId: string;
+    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;

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

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
+import { ChevronRight, FileDiff, X } from 'lucide-react';
+import { fileChanges, liveOutput, readImagePath, toolStartedAt, toolSummary, unifiedChanges } from '../../logic/tools.js';
+import { useOpenForFind } from '../find-reveal.js';
+import { chatHost } from '../../../host.js';
+import { lazyNamed } from '../../../lazy.js';
+import { useChatActions } from '../../actions.js';
+import { useChatScope } from '../../../scope.js';
+import { useCurrentItem } from '../../../state/chats.js';
+import { useTimelineFlash } from '../../timeline-flash.js';
+import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
+import { Icon, Spinner, useTickingText } from '@adecore/ui';
+import { ROW_GUTTER, toolIcon } from '../icons.js';
+import { AnsiOutput } from '../AnsiOutput.js';
+// The diff renderers carry shiki; they only load once a thread shows a file change.
+const EditDiff = lazyNamed(() => import('../EditDiff.js'), 'default');
+const UnifiedDiff = lazyNamed(() => import('../UnifiedDiff.js'), 'default');
+const OUTPUT_LIMIT = 4000;
+function clip(text) {
+    return text.length > OUTPUT_LIMIT
+        ? `${text.slice(0, OUTPUT_LIMIT)}\n${i18next.t('agent-chat:work.moreCharacters', { count: text.length - OUTPUT_LIMIT })}`
+        : text;
+}
+export function ToggleLine({ icon, label, detail, open, onToggle, failed, live, trailing, className }) {
+    return (_jsxs("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, children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: icon }), _jsx("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: label }), detail && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-text-faint", children: detail })), _jsx("span", { className: "grow" }), trailing, failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') })] }));
+}
+function ToolBody({ tool }) {
+    const { t } = useTranslation('agent-chat');
+    const patches = unifiedChanges(tool);
+    const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
+    return (_jsxs("div", { className: "mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised", children: [patches.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, index))) })) : changes.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: changes.map((change, index) => (_jsx(EditDiff, { change: change }, index))) })) : (_jsx("pre", { className: "max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text", children: clip(JSON.stringify(tool.input, null, 2) ?? '') })), tool.output !== null && tool.output !== '' && patches.length === 0 && (_jsx("pre", { "data-find-field": "output", className: clsx('max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text', tool.state === 'error' ? 'text-chat-removed' : 'text-chat-output'), children: _jsx(AnsiOutput, { text: tool.output, limit: OUTPUT_LIMIT }) }))] }));
+}
+/* One settled tool call: a line, and its input and output behind it. An image the call looked at
+   is drawn under the line, because a picture says more about that read than its path does. */
+export function WorkRow({ tool, nested, detail }) {
+    const [open, setOpen] = useState(false);
+    const image = tool.state === 'done' ? readImagePath(tool.name, tool.input) : null;
+    const { ReadImage } = chatHost();
+    useOpenForFind(tool.id, 'output', setOpen);
+    return (_jsxs("div", { "data-find-item": tool.id, className: nested ? 'ml-6' : undefined, children: [_jsx(ToggleLine, { icon: toolIcon(tool.name), label: tool.name, detail: detail ?? toolSummary(tool.name, tool.input), open: open, onToggle: () => setOpen((o) => !o), failed: tool.state === 'error' }), image !== null && ReadImage !== null && _jsx(ReadImage, { path: image }), open && _jsx(ToolBody, { tool: tool })] }));
+}
+/* "running for 12s" next to a live call. */
+export function RunningFor({ startedAt }) {
+    const { t } = useTranslation('agent-chat');
+    const ref = useTickingText(() => t('work.runningFor', { elapsed: formatElapsedShort(Date.now() - startedAt) }));
+    return _jsx("span", { ref: ref, className: "shrink-0 text-xs text-text-faint tabular-nums" });
+}
+/* A call still running: its timer on the line, and for a provider that streams output, the last lines under it. */
+export function WorkLiveRow({ chatId, tool: derived }) {
+    const [open, setOpen] = useState(false);
+    const tool = useCurrentItem(chatId, derived);
+    const tail = liveOutput(tool);
+    return (_jsxs("div", { children: [_jsx(ToggleLine, { icon: toolIcon(tool.name), label: tool.name, detail: toolSummary(tool.name, tool.input) || tool.progress?.description || '', open: open, onToggle: () => setOpen((o) => !o), trailing: _jsx(RunningFor, { startedAt: toolStartedAt(tool) }), live: true }), open && _jsx(ToolBody, { tool: tool }), tail !== null && !open && (_jsx("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", children: _jsx(AnsiOutput, { text: tail, tailLines: 12 }) }))] }));
+}
+/* A run of tool calls as one line ("Read 4 files"); opening it lists every call. */
+export function WorkGroupRow({ tools, summary, expanded, onToggle }) {
+    const failed = tools.some((tool) => tool.state === 'error');
+    return (_jsx("div", { children: _jsx(ToggleLine, { icon: toolIcon(tools[0].name), label: summary, open: expanded, onToggle: onToggle, failed: failed }) }));
+}
+/*
+ * A settled turn folded behind how long it took and what it did. A line and not a button, like the
+ * tool lines it hides; the work reads fainter than the time so the eye lands on the time first.
+ */
+export function TurnFoldRow({ turn, label, work, expanded, onToggle }) {
+    return (_jsxs("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', turn.state === 'error' && 'text-status-error'), "aria-expanded": expanded, onClick: onToggle, children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('transition-transform', expanded && 'rotate-90') }) }), _jsx("span", { className: "shrink-0 group-hover:text-text", children: label }), work.length > 0 && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: work.map((part) => ` · ${part}`).join('') })] }));
+}
+function omittedLabel(reason) {
+    return reason === 'binary' ? i18next.t('agent-chat:work.omitted.binary') : i18next.t('agent-chat:work.omitted.tooLarge');
+}
+/* One file of a turn's checkpoint diff: its patch, or the reason there is none. */
+function CheckpointFileBody({ file }) {
+    const { t } = useTranslation('agent-chat');
+    if (file.omitted) {
+        return _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: omittedLabel(file.omitted) });
+    }
+    return (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(UnifiedDiff, { change: file }) }));
+}
+/* The frame of a changed files card: a header that folds the list of files away. */
+function ChangedFilesCard({ count, truncated, added, deleted, revealNonce = 0, children }) {
+    const { t } = useTranslation('agent-chat');
+    const [expanded, setExpanded] = useState(false);
+    // A jump from outside opens the card, also when the jump put the row on screen and so mounted it; the flash is gone by the time the row is scrolled to again.
+    const [seenReveal, setSeenReveal] = useState(0);
+    if (revealNonce > 0 && revealNonce !== seenReveal) {
+        setSeenReveal(revealNonce);
+        setExpanded(true);
+    }
+    return (_jsxs("div", { className: "mb-3 overflow-hidden rounded-lg border border-border bg-surface-raised", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-text-muted hover:bg-surface-hover", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: [_jsx(Icon, { icon: FileDiff, size: 12, className: "shrink-0" }), _jsx("span", { className: "shrink-0 font-medium text-text", children: t('work.changedFiles', { count }) }), truncated && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: t('work.andMore') }), _jsx("span", { className: "grow" }), added !== undefined && _jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", added] }), deleted !== undefined && _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", deleted] }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', expanded && 'rotate-90') })] }), expanded && children] }));
+}
+/*
+ * The files a settled turn changed, as a card; each file opens its diff in place. The host's
+ * checkpoint diff comes first (the working tree against the tree the turn started from), then the
+ * unified diffs the CLI reported, then the before and after of its own edits. A turn that has a
+ * checkpoint but no stored diff asks the host for one, which is also how a running turn gets it.
+ */
+export function ChangedFilesRow({ tools, diff, checkpoint, chatId, turnId }) {
+    const [open, setOpen] = useState({});
+    const [fetched, setFetched] = useState(null);
+    const actions = useChatActions();
+    useEffect(() => {
+        if (diff !== null || !checkpoint) {
+            return;
+        }
+        let alive = true;
+        void actions
+            .turnDiff(chatId, turnId)
+            .then((answer) => {
+            if (alive) {
+                setFetched(answer);
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            alive = false;
+        };
+    }, [actions, chatId, turnId, diff, checkpoint]);
+    const checkpointDiff = diff ?? fetched;
+    const { keyOf } = useChatScope();
+    const flash = useTimelineFlash((s) => s.target);
+    const revealNonce = flash !== null && flash.opens && flash.key === keyOf(chatId) && flash.rowId === `files-${turnId}` ? flash.nonce : 0;
+    if (checkpointDiff !== null && checkpointDiff.files.length > 0) {
+        const files = checkpointDiff.files;
+        return (_jsx(ChangedFilesCard, { revealNonce: revealNonce, count: files.length, truncated: checkpointDiff.truncated, added: files.reduce((sum, file) => sum + file.added, 0), deleted: files.reduce((sum, file) => sum + file.deleted, 0), children: files.map((file) => (_jsxs("div", { className: "border-t border-border", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover", "data-file-path": file.path, onClick: () => setOpen((o) => ({ ...o, [file.path]: !o[file.path] })), children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open[file.path] && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: file.path }), _jsx("span", { className: "grow" }), _jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", file.added] }), _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", file.deleted] })] }), open[file.path] && (_jsx("div", { className: "border-t border-border", children: _jsx(CheckpointFileBody, { file: file }) }))] }, file.path))) }));
+    }
+    return _jsx(ProviderChangedFiles, { tools: tools, open: open, setOpen: setOpen, revealNonce: revealNonce });
+}
+/* The fallback card, built from what the CLI itself reported about its edits. */
+function ProviderChangedFiles({ tools, open, setOpen, revealNonce }) {
+    const { t } = useTranslation('agent-chat');
+    const byPath = new Map();
+    const entryFor = (path) => {
+        const existing = byPath.get(path);
+        if (existing) {
+            return existing;
+        }
+        const created = { edits: [], patches: [] };
+        byPath.set(path, created);
+        return created;
+    };
+    for (const tool of tools) {
+        const patches = unifiedChanges(tool);
+        if (patches.length > 0) {
+            for (const patch of patches) {
+                entryFor(patch.path).patches.push(patch);
+            }
+            continue;
+        }
+        for (const change of fileChanges(tool.name, tool.input)) {
+            entryFor(change.path || tool.id).edits.push(change);
+        }
+    }
+    return (_jsx(ChangedFilesCard, { count: byPath.size, revealNonce: revealNonce, children: [...byPath].map(([path, entry]) => {
+            const count = entry.edits.length + entry.patches.length;
+            return (_jsxs("div", { className: "border-t border-border", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover", "data-file-path": path, onClick: () => setOpen((o) => ({ ...o, [path]: !o[path] })), children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open[path] && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: path }), _jsx("span", { className: "grow" }), _jsx("span", { className: "text-text-faint", children: t('work.edits', { count }) })] }), open[path] && (_jsx("div", { className: "border-t border-border", children: _jsxs(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: [entry.patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, `patch-${index}`))), entry.edits.map((change, index) => (_jsx(EditDiff, { change: change }, `edit-${index}`)))] }) }))] }, path));
+        }) }));
+}
+/* "Working for 00:14". */
+export function WorkingRow({ startedAt }) {
+    const { t } = useTranslation('agent-chat');
+    const ref = useTickingText(() => formatClockDuration(Date.now() - startedAt));
+    return (_jsxs("div", { className: "-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-muted", children: [_jsx("span", { className: `${ROW_GUTTER} text-status-running`, children: _jsx(Spinner, { size: 12 }) }), _jsx("span", { className: "chat-live-text", children: t('work.workingFor') }), _jsx("span", { ref: ref, className: "tabular-nums" })] }));
+}

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

@@ -0,0 +1,8 @@
+import { type ChatToolItem, type ChatWorkflow } from '@adecore/agent-contracts';
+import type { SubagentStep } from '../../subagent-view.js';
+export declare function WorkflowRow({ tool, workflow, chatId, onOpenAgent }: {
+    tool: ChatToolItem;
+    workflow: ChatWorkflow;
+    chatId?: string;
+    onOpenAgent?(step: SubagentStep): void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Bot, ListTree, TriangleAlert, Square } from 'lucide-react';
+import { workflowAgentRef } from '@adecore/agent-contracts';
+import { workflowAgentTime, workflowPhases } from '../../logic/workflow.js';
+import { useSubagentSupport } from '../../subagent-support.js';
+import { ROW_GUTTER } from '../icons.js';
+import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows.js';
+import { useChatScope } from '../../../scope.js';
+import { Icon, IconButton } from '@adecore/ui';
+import { useChatActions } from '../../actions.js';
+import { chatHost } from '../../../host.js';
+function AgentLine({ view, onOpen }) {
+    const { agent, state } = view;
+    const time = workflowAgentTime(view);
+    const running = state === 'running';
+    const agentId = agent.agentId;
+    // One still waiting has no transcript yet.
+    const open = onOpen !== undefined && agentId !== null ? () => onOpen({ toolUseId: workflowAgentRef(agentId), description: agent.label }) : () => undefined;
+    return (_jsx(ToggleLine, { icon: _jsx(Icon, { icon: Bot, size: 12 }), label: agent.label, detail: running ? (agent.lastTool ?? undefined) : undefined, open: false, onToggle: open, failed: state === 'failed', live: running, trailing: running && agent.startedAt !== null ? (_jsx(RunningFor, { startedAt: agent.startedAt })) : (_jsx("span", { className: "shrink-0 text-xs text-text-faint tabular-nums", children: time })) }));
+}
+function PhaseBlock({ phase, onOpen }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsxs("div", { children: [phase.title !== null && (_jsxs("div", { className: "mb-0.5 flex h-7 min-w-0 items-center gap-2 text-xs text-text-muted", children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: ListTree, size: 12 }) }), _jsx("span", { className: "min-w-0 truncate", children: phase.title }), _jsx("span", { className: "grow" }), phase.agents.length === 0 && _jsx("span", { className: "shrink-0 text-text-faint", children: t('rows.workflow.notStarted') })] })), phase.agents.length > 0 && (_jsx("div", { className: phase.title === null ? undefined : 'ml-6', children: phase.agents.map((view) => (_jsx(AgentLine, { view: view, onOpen: onOpen }, view.agent.index))) }))] }));
+}
+// Keep background progress visible after the launcher turn ends.
+export function WorkflowRow({ tool, workflow, chatId, onOpenAgent }) {
+    const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    // A host that does not answer `chat.subagent` has no conversation to open for anyone.
+    const refused = useSubagentSupport((s) => s.unsupported[id] === true);
+    const running = tool.state === 'running';
+    const phases = workflowPhases(workflow, running);
+    const onOpen = refused ? undefined : onOpenAgent;
+    const actions = useChatActions();
+    const stop = () => {
+        if (chatId && workflow.taskId) {
+            void actions.stopTask(chatId, workflow.taskId).catch((error) => {
+                chatHost().notify({
+                    kind: 'error',
+                    title: t('activity.stopFailed'),
+                    description: error instanceof Error ? error.message : t('subagents.noAnswer')
+                });
+            });
+        }
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "min-w-0 grow", children: running ? _jsx(WorkLiveRow, { chatId: chatId ?? '', tool: tool }) : _jsx(WorkRow, { tool: tool, detail: workflow.name ?? undefined }) }), running && chatId && workflow.taskId && _jsx(IconButton, { icon: Square, size: "xs", label: t('activity.stop'), onClick: stop })] }), running && workflow.stalledAt !== undefined && (_jsxs("p", { role: "status", className: "ml-6 mb-1 flex items-start gap-1.5 text-xs text-text-muted", children: [_jsx(Icon, { icon: TriangleAlert, size: 12, className: "mt-0.5 shrink-0 text-status-needs-you" }), _jsx("span", { children: t('rows.workflow.stalled') })] })), phases.length > 0 && (_jsx("div", { className: "ml-6", children: phases.map((phase) => (_jsx(PhaseBlock, { phase: phase, onOpen: onOpen }, phase.key))) }))] }));
+}

package/dist/chat/ui/rows/row-rhythm.d.ts

@@ -0,0 +1,6 @@
+import { type TimelineRow } from '../../logic/timeline.js';
+export declare const FOLLOW_THRESHOLD_PX = 40;
+export declare function rowRhythm(row: TimelineRow, previous: TimelineRow | null): string;
+export declare function replyHeader(row: TimelineRow, previous: TimelineRow | null): {
+    at: number | null;
+} | null;

package/dist/chat/ui/rows/row-rhythm.js

@@ -0,0 +1,34 @@
+import clsx from 'clsx';
+import { isBlock } from '../../logic/timeline.js';
+/* Below this distance from the bottom a thread follows what the agent writes; above it the reader scrolled back on purpose. */
+export const FOLLOW_THRESHOLD_PX = 40;
+/*
+ * The gaps a row wears for where it sits: a question is followed by its answer gap, and a seam where
+ * the list rhythm of tool lines meets the block rhythm of prose gets the block gap. A question
+ * already carries the gap before it, and the row after one is the answer, so neither takes a seam.
+ */
+export function rowRhythm(row, previous) {
+    const question = row.kind === 'user';
+    const seam = !question && previous !== null && previous.kind !== 'user' && isBlock(row) !== isBlock(previous);
+    return clsx(question && 'pb-(--chat-answer-gap)', seam && 'pt-(--chat-block-gap)');
+}
+/*
+ * Whether a reply's header goes over this row, and the time it shows: the first row after the question
+ * or the agent's own turn opener, whatever row that is, dated when that turn began. A thread that
+ * starts halfway through a reply has no time to show.
+ */
+export function replyHeader(row, previous) {
+    if (row.kind === 'user' || row.kind === 'turn-start') {
+        return null;
+    }
+    if (previous === null) {
+        return { at: null };
+    }
+    if (previous.kind === 'user') {
+        return { at: previous.item.createdAt };
+    }
+    if (previous.kind === 'turn-start') {
+        return { at: previous.turn.createdAt };
+    }
+    return null;
+}

package/dist/chat/ui/useToggleSet.d.ts

@@ -0,0 +1,6 @@
+export interface ToggleSet {
+    ids: ReadonlySet<string>;
+    toggle(id: string): void;
+    add(id: string): void;
+}
+export declare function useToggleSet(onToggle?: () => void): ToggleSet;

package/dist/chat/ui/useToggleSet.js

@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react';
+/*
+ * The ids of the folds a thread has open. `onToggle` is what a thread does about a person opening
+ * one, which is to stop following the end: a fold is a deliberate look back, not a reason to jump.
+ */
+export function useToggleSet(onToggle) {
+    const [ids, setIds] = useState(() => new Set());
+    const toggle = useCallback((id) => {
+        setIds((current) => {
+            const next = new Set(current);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+        onToggle?.();
+    }, [onToggle]);
+    const add = useCallback((id) => {
+        setIds((current) => new Set(current).add(id));
+    }, []);
+    return { ids, toggle, add };
+}