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

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

@@ -0,0 +1,81 @@
+import { useTranslation } from 'react-i18next';
+import { ErrorBoundary } from '@adecore/ui';
+import type { ThreadCard } from '../../../host';
+import type { TimelineRow } from '../../logic/timeline';
+import type { SubagentStep } from '../../subagent-view';
+import { AgentTurnRow, ApprovalHistoryRow, AssistantRow, CompactionRow, NoteRow, QuestionHistoryRow, ReportRow, ThinkingRow, UserRow } from './MessageRows';
+import { ForksRow } from './ForksRow';
+import { SubagentBranchRow } from './SubagentRow';
+import { WorkflowRow } from './WorkflowRow';
+import { ChangedFilesRow, TurnFoldRow, WorkGroupRow, WorkLiveRow, WorkRow, WorkingRow } from './WorkRows';
+
+export interface RowProps {
+    row: TimelineRow;
+    chatId: string;
+    toggleGroup(id: string): void;
+    toggleTurn(id: string): void;
+    toggleSubagent(id: string): void;
+    openSubagent(toolUseId: string): void;
+    /* Opens the whole conversation of a subagent or a workflow's agent in the thread's place; absent where there is nowhere to open it. */
+    openConversation?(step: SubagentStep): void;
+}
+
+/* Its own component, so a card that throws while it renders is caught by the boundary around it. */
+function AppCardBody({ card }: { card: ThreadCard }) {
+    return card.render();
+}
+
+function AppCardRow({ card }: { card: ThreadCard }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <ErrorBoundary label={t('timeline.cardFailed')} resetKeys={[card]} compact className="relative rounded-lg">
+            <AppCardBody card={card} />
+        </ErrorBoundary>
+    );
+}
+
+/* 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 }: RowProps) {
+    switch (row.kind) {
+        case 'user':
+            return <UserRow chatId={chatId} item={row.item} />;
+        case 'turn-start': {
+            const toolUseId = row.turn.taskToolUseId;
+            return <AgentTurnRow label={row.label} onOpen={toolUseId ? () => openSubagent(toolUseId) : undefined} />;
+        }
+        case 'assistant':
+            return <AssistantRow chatId={chatId} item={row.item} />;
+        case 'report':
+            return <ReportRow id={row.id} text={row.text} />;
+        case 'thinking':
+            return <ThinkingRow chatId={chatId} item={row.item} />;
+        case 'work':
+            return <WorkRow tool={row.tool} />;
+        case 'work-live':
+            return <WorkLiveRow chatId={chatId} tool={row.tool} />;
+        case 'workflow':
+            return <WorkflowRow chatId={chatId} tool={row.tool} workflow={row.workflow} onOpenAgent={openConversation} />;
+        case 'work-group':
+            return <WorkGroupRow tools={row.tools} summary={row.summary} expanded={row.expanded} onToggle={() => toggleGroup(row.id)} />;
+        case 'subagent':
+            return <SubagentBranchRow chatId={chatId} branch={row} onToggle={toggleSubagent} onOpenConversation={openConversation} />;
+        case 'turn-fold':
+            return <TurnFoldRow turn={row.turn} label={row.label} work={row.work} expanded={row.expanded} onToggle={() => toggleTurn(row.turn.id)} />;
+        case 'forks':
+            return <ForksRow chatId={chatId} turnId={row.turnId} />;
+        case 'changed-files':
+            return <ChangedFilesRow chatId={chatId} turnId={row.turnId} tools={row.tools} diff={row.diff} checkpoint={row.checkpoint} />;
+        case 'approval':
+            return <ApprovalHistoryRow item={row.item} />;
+        case 'question':
+            return <QuestionHistoryRow item={row.item} />;
+        case 'note':
+            return <NoteRow id={row.id} level={row.level} text={row.text} from={row.from} />;
+        case 'compaction':
+            return <CompactionRow preTokens={row.preTokens} />;
+        case 'working':
+            return <WorkingRow startedAt={row.startedAt} />;
+        case 'app-card':
+            return <AppCardRow card={row.card} />;
+    }
+}

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

@@ -0,0 +1,209 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Bot, ChevronDown } from 'lucide-react';
+import type { ChatAssistantItem, ChatItem, ChatSubagentItem } from '@adecore/agent-contracts';
+import type { SubagentBranch } from '../../logic/timeline';
+import { formatElapsedShort } from '@adecore/ui/format';
+import { Icon, useNow } from '@adecore/ui';
+import { useOpenForFind } from '../find-reveal';
+import { Markdown } from '../Markdown';
+import { TaskRow } from './TaskRow';
+import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows';
+import { entryTimeOf, statusWordOf, taskIdOf } from '../../subagent-list';
+import { useSubagentSupport } from '../../subagent-support';
+import { canOpenSubagent, crumbOf, type SubagentStep } from '../../subagent-view';
+import { chatHost, type SubagentTask } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { useCurrentItem } from '../../../state/chats';
+
+// 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 }: { chatId: string; item: ChatItem }) {
+    if (item.kind === 'tool') {
+        return item.state === 'running' ? <WorkLiveRow chatId={chatId} tool={item} /> : <WorkRow tool={item} />;
+    }
+    if (item.kind === 'assistant') {
+        return <ChildText chatId={chatId} item={item} />;
+    }
+    return null;
+}
+
+function ChildText({ chatId, item: derived }: { chatId: string; item: ChatAssistantItem }) {
+    const item = useCurrentItem(chatId, derived);
+    return (
+        <div className="-mx-1 px-1 pb-2 text-xs text-text-muted select-text">
+            <Markdown text={item.text} />
+        </div>
+    );
+}
+
+function StatusPill({ item, task }: { item: ChatSubagentItem; task: SubagentTask | null }) {
+    const { t } = useTranslation('agent-chat');
+    const paused = statusWordOf(item, task) === 'paused';
+    const now = useNow(60_000, paused);
+    if (paused) {
+        return <span className="shrink-0 text-xs text-text-faint tabular-nums">{entryTimeOf(item, task, now)}</span>;
+    }
+    if (item.status === 'running') {
+        return <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 (
+        <span className={clsx('shrink-0 text-xs tabular-nums', failed ? 'text-status-error' : 'text-text-faint')}>
+            {duration === null ? t(`common.status.${outcome}`) : t(`rows.subagent.${outcome}In`, { duration })}
+        </span>
+    );
+}
+
+/* What the sub-agent did, live: its own tool calls and the text it wrote, as ordinary rows. */
+function SubagentWork({ chatId, item, work }: { chatId: string; item: ChatSubagentItem; work: ChatItem[] }) {
+    const { t } = useTranslation('agent-chat');
+    const scroller = useRef<HTMLDivElement>(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 <div className="ml-6 pb-1 text-xs text-text-faint">{t('rows.subagent.nothingYet')}</div>;
+    }
+    return (
+        <div ref={scroller} className="ml-6 overflow-y-auto" style={{ maxHeight: CHILDREN_MAX_PX }}>
+            {item.itemsTruncated && <div className="pb-1 text-xs text-text-faint">{t('rows.subagent.truncated')}</div>}
+            {work.map((child) => (
+                <ChildRow key={child.id} chatId={chatId} item={child} />
+            ))}
+        </div>
+    );
+}
+
+/* The report the sub-agent handed back, behind a fold: the row is about the work, this is the answer. */
+function SubagentResult({ itemId, result }: { itemId: string; result: string }) {
+    const { t } = useTranslation('agent-chat');
+    const [open, setOpen] = useState(false);
+    useOpenForFind(itemId, 'output', setOpen);
+    return (
+        <div className="ml-6 pb-1">
+            <button className="flex items-center gap-1.5 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.subagent.hideResult') : t('rows.subagent.showResult')}
+            </button>
+            {open && (
+                <div data-find-field="output" className="mt-1 rounded-md border border-border bg-surface-raised px-3 py-2 select-text">
+                    <Markdown text={result} />
+                </div>
+            )}
+        </div>
+    );
+}
+
+/*
+ * 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
+}: {
+    chatId: string;
+    item: ChatSubagentItem;
+    work: ChatItem[];
+    expanded: boolean;
+    onToggle(): void;
+    /* Opens everything it did in the thread's place, for a surface that has somewhere to open it. */
+    onOpenConversation?(): void;
+}) {
+    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 (
+        <div data-find-item={item.id}>
+            {item.origin === 'ruimte' ? (
+                <TaskRow item={item} task={task} open={expanded} onPress={press} />
+            ) : (
+                <ToggleLine
+                    icon={<Icon icon={Bot} size={12} />}
+                    label={t('rows.subagent.label')}
+                    detail={detail}
+                    open={expanded}
+                    onToggle={press}
+                    failed={item.status === 'failed'}
+                    live={running}
+                    trailing={
+                        <>
+                            {item.background && <span className="shrink-0 text-xs text-text-faint">{t('rows.subagent.background')}</span>}
+                            {running && item.lastTool && <span className="shrink-0 text-xs text-text-faint">{item.lastTool}</span>}
+                            <StatusPill item={item} task={task} />
+                        </>
+                    }
+                />
+            )}
+            {expanded && (
+                <div className="mb-1">
+                    <SubagentWork chatId={chatId} item={item} work={work} />
+                    {item.result !== null && <SubagentResult itemId={item.id} result={item.result} />}
+                </div>
+            )}
+        </div>
+    );
+}
+
+/*
+ * 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
+}: {
+    chatId: string;
+    branch: SubagentBranch;
+    onToggle(id: string): void;
+    onOpenConversation?(step: SubagentStep): void;
+}) {
+    return (
+        <>
+            <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 && (
+                <div className="ml-6">
+                    {branch.nested.map((child) => (
+                        <SubagentBranchRow key={child.id} chatId={chatId} branch={child} onToggle={onToggle} onOpenConversation={onOpenConversation} />
+                    ))}
+                </div>
+            )}
+        </>
+    );
+}

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

@@ -0,0 +1,91 @@
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Bot, ChevronRight } from 'lucide-react';
+import type { ChatSubagentItem } from '@adecore/agent-contracts';
+import { formatElapsedShort, formatMoment } from '@adecore/ui/format';
+import { Icon, useNow, useTickingText } from '@adecore/ui';
+import { AgentIcon } from '../../../agents/AgentIcon';
+import { modelName, shortModelName } from '../../../agents/model-name';
+import type { SubagentTask } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { useChats } from '../../../state/chats';
+import { useProviders } from '../../../state/providers';
+import { taskRowStateOf, type TaskRowState } from '../../subagent-list';
+
+const DOT: Record<TaskRowState, string> = {
+    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: Record<TaskRowState, string> = {
+    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 }: { startedAt: number }) {
+    const ref = useTickingText(() => formatElapsedShort(Date.now() - startedAt));
+    return <span ref={ref} className="shrink-0 text-xs text-text-faint tabular-nums" />;
+}
+
+function StateLine({ state, task }: { state: TaskRowState; task: SubagentTask | null }) {
+    const { t } = useTranslation('agent-chat');
+    const until = state === 'paused' ? task?.paused?.until : undefined;
+    const now = useNow(60_000, until === undefined);
+    return (
+        <span className={clsx('truncate text-xs', STATE_TONE[state])}>
+            {until === undefined ? t(`rows.task.${state}`) : t('rows.task.pausedUntil', { time: formatMoment(until, now) })}
+        </span>
+    );
+}
+
+/*
+ * 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 }: { item: ChatSubagentItem; task: SubagentTask | null; open: boolean; onPress(): void }) {
+    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 (
+        <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}>
+            <span className="relative grid size-7 shrink-0 place-items-center rounded-full bg-surface-raised text-text">
+                {provider === undefined ? <Icon icon={Bot} size={14} /> : <AgentIcon kind={provider} size={14} />}
+                <span className={clsx('absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2 ring-surface', DOT[state])} />
+            </span>
+            <span className="flex min-w-0 grow flex-col">
+                <span data-find-field="summary" className="truncate text-xs font-medium text-text">
+                    {model === null ? title : t('rows.task.named', { model, title })}
+                </span>
+                <StateLine state={state} task={task} />
+            </span>
+            {(state === 'running' || state === 'waiting') && startedAt > 0 && <Elapsed startedAt={startedAt} />}
+            {settled && startedAt > 0 && finishedAt !== null && finishedAt >= startedAt && (
+                <span className="shrink-0 text-xs text-text-faint tabular-nums">{formatElapsedShort(finishedAt - startedAt)}</span>
+            )}
+            <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90')} />
+        </button>
+    );
+}