@adecore/agents-react 0.39.0 → 0.40.0

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

@@ -51,6 +51,7 @@ function useReplyAuthor(chatId: string) {
     const { id } = useChatScope();
     const context = useContext(ReplyContext);
     const author = useHostReplyAuthor(id, context?.chatId ?? chatId);
+
     return context !== null && context.chatId === undefined ? null : author;
 }
 
@@ -62,6 +63,7 @@ function AttachmentLink({ chatId, attachment }: { chatId: string; attachment: Ch
     const { id } = useChatScope();
     const { url } = useHostAttachmentUrl(id, chatId, attachment.id);
     const badge = fileBadge(attachment.name);
+
     return (
         <Tooltip label={attachment.name}>
             <a
@@ -86,6 +88,7 @@ function AttachmentLink({ chatId, attachment }: { chatId: string; attachment: Ch
 function AttachmentThumb({ chatId, attachment }: { chatId: string; attachment: ChatAttachment }) {
     const { id } = useChatScope();
     const source = useHostAttachmentUrl(id, chatId, attachment.id);
+
     return <ImageThumb source={source} alt={attachment.name} className="max-h-32 max-w-48 object-cover" />;
 }
 
@@ -113,6 +116,7 @@ export function UserRow({ chatId, item }: { chatId: string; item: ChatUserItem }
             jumpToTimelineItem(keyOf(chatId), source, { flash: true, onMissing: () => setMissing(true) });
         }
     }
+
     return (
         <ReferenceLookupContext value={lookup}>
             <div data-find-item={item.id} className="flex flex-col items-end" onCopy={(e) => copySelectionWithChips(e.nativeEvent)}>
@@ -189,6 +193,7 @@ function ChoiceLine({ chatId, choice }: { chatId: string; choice: ChatUiChoiceOr
     const inherited = useContext(UiReplyNavigationContext);
     const navigation = inherited?.chatId === chatId ? inherited : null;
     const Tag = navigation ? 'button' : 'div';
+
     return (
         <Tag
             type={navigation ? 'button' : undefined}
@@ -220,6 +225,7 @@ function MessageHeading({ children }: { children: ReactNode }) {
 /* The report a subagent handed back, drawn as a reply under a label of its own. */
 export function ReportRow({ id, text }: { id: string; text: string }) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <div data-find-item={id} className="-mx-1 px-1 pb-2">
             <MessageHeading>{t('rows.report.heading')}</MessageHeading>
@@ -240,6 +246,7 @@ function ReplyHeading({ chatId }: { chatId: string }) {
     const author = useReplyAuthor(chatId);
     const kind = useChatRow(chatId, (row) => row?.info.provider);
     const name = useProviders((s) => s.providers.find((provider) => provider.kind === (context?.provider ?? kind))?.name);
+
     return <MessageHeading>{author?.name ?? name ?? t('rows.reply.agent')}</MessageHeading>;
 }
 
@@ -249,9 +256,11 @@ function ReplyHeading({ chatId }: { chatId: string }) {
  */
 export function ReplyHeader({ chatId, at }: { chatId: string; at: number | null }) {
     const author = useReplyAuthor(chatId);
+
     if (author === null) {
         return null;
     }
+
     return (
         <div aria-hidden className="mb-1 flex h-6 items-center gap-2 text-sm font-medium text-text select-none">
             {author.mark}
@@ -263,21 +272,20 @@ export function ReplyHeader({ chatId, at }: { chatId: string; at: number | null
 
 function ReplyAge({ at }: { at: number }) {
     const ref = useTickingText(() => formatAgo(Date.now() - at), 30_000);
+
     return <span ref={ref} className="shrink-0 font-normal text-text-faint" />;
 }
 
 /* The line that stands where the next words will land; a component, so the word is read at render and not at import. */
 function Writing() {
     const { t } = useTranslation('agent-chat');
+
     return <span className="chat-live-text text-sm">{t('rows.reply.writing')}</span>;
 }
 
 /*
- * A reply. A word at a time, it follows the text as it arrives. A block at a time, the blocks that
- * closed are drawn and fade in as they land, with "Writing…" where the next one will stand. Whole,
- * it says it is being written and fades in once it is done. Only a row that saw the reply being
- * written fades anything: an old reply scrolled back into view just stands there. A `#Name` it
- * spells for a view, node or chat of the project is a chip that opens it.
+ * A reply, streamed a word, a block or the whole of it at a time. Only a row that saw the reply being
+ * written fades anything in: an old reply scrolled back into view just stands there.
  */
 export function AssistantRow({ chatId, item: derived }: { chatId: string; item: ChatAssistantItem }) {
     const item = useCurrentItem(chatId, derived);
@@ -310,6 +318,7 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
 
     if (mode === 'blocks') {
         const settled = item.streaming ? settledBlocksText(item.text) : item.text;
+
         return (
             <div data-find-item={item.id} className="-mx-1 px-1 pb-2" onCopy={(e) => copySelectionWithChips(e.nativeEvent)}>
                 <ReplyHeading chatId={chatId} />
@@ -324,6 +333,7 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
             </div>
         );
     }
+
     if (mode === 'whole' && item.streaming) {
         return (
             <div className="-mx-1 px-1 pb-2">
@@ -332,6 +342,7 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
             </div>
         );
     }
+
     return (
         <div
             data-find-item={item.id}
@@ -369,6 +380,7 @@ export function ThinkingRow({ chatId, item: derived }: { chatId: string; item: C
     const preview = item.streaming ? '' : thoughtPreview(item.text);
     const duration = formatElapsedShort((item.endedAt ?? item.createdAt) - item.createdAt);
     useOpenForFind(item.id, 'text', setOpen);
+
     return (
         <div data-find-item={item.id} className="-mx-1 px-1 pb-2">
             <button
@@ -418,9 +430,11 @@ export function ThinkingRow({ chatId, item: derived }: { chatId: string; item: C
 export function LiveThoughtRow({ chatId, item: derived }: { chatId: string; item: ChatThinkingItem }) {
     const item = useCurrentItem(chatId, derived);
     const line = thoughtLine(item.text);
+
     if (line === '') {
         return null;
     }
+
     return (
         <div className="-mx-1 mb-0.5 flex min-h-7 items-start gap-2 px-1 py-1 text-xs text-text-muted">
             <span className={ROW_GUTTER}>
@@ -448,6 +462,7 @@ export function NoteRow({ id, level, text, from }: { id: string; level: 'info' |
     const head = breakAt === -1 ? text : text.slice(0, breakAt);
     const rest = breakAt === -1 ? '' : text.slice(breakAt + 1).trim();
     useOpenForFind(id, 'output', setOpen);
+
     return (
         <div
             data-find-item={id}
@@ -483,9 +498,11 @@ export function NoteRow({ id, level, text, from }: { id: string; level: 'info' |
 function OpenChatButton({ chatId, label }: { chatId: string; label: 'openFork' | 'openWaiting' }) {
     const { t } = useTranslation('agent-chat');
     const place = useHostChatPlace(chatId);
+
     if (place.title === null) {
         return null;
     }
+
     return (
         <button className="text-text-muted hover:text-text" onClick={place.go}>
             {t(`rows.note.${label}`)}
@@ -499,6 +516,7 @@ function OpenChatButton({ chatId, label }: { chatId: string; label: 'openFork' |
  */
 export function AgentTurnRow({ label, onOpen }: { label: string; onOpen?: () => void }) {
     const line = 'mb-0.5 flex h-7 w-full items-center gap-2 text-left text-xs text-text-muted';
+
     // A header with nowhere to go is text to read and copy; one that opens a row is a button.
     const content = (
         <>
@@ -508,9 +526,11 @@ export function AgentTurnRow({ label, onOpen }: { label: string; onOpen?: () =>
             <span className={clsx('min-w-0 truncate', onOpen === undefined && 'select-text')}>{label}</span>
         </>
     );
+
     if (onOpen === undefined) {
         return <div className={line}>{content}</div>;
     }
+
     return (
         <button className={clsx(line, 'hover:text-text')} onClick={onOpen}>
             {content}
@@ -521,6 +541,7 @@ export function AgentTurnRow({ label, onOpen }: { label: string; onOpen?: () =>
 /* A dashed line, since what stands above it is still there for the reader but only a summary to the agent. */
 export function CompactionRow({ preTokens }: { preTokens: number | null }) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <div className="flex items-center gap-3 pb-3 text-xs text-text-faint">
             <span className="grow border-t border-dashed border-border" />
@@ -542,9 +563,11 @@ const DECISION_ICON: Record<Exclude<ChatApprovalItem['decision'], 'pending'>, Re
 /* The outcome of a permission request, one quiet line; the request itself lived on the composer. */
 export function ApprovalHistoryRow({ item }: { item: ChatApprovalItem }) {
     const { t } = useTranslation('agent-chat');
+
     if (item.decision === 'pending') {
         return null;
     }
+
     return (
         <div className="-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-faint">
             <span className={clsx(ROW_GUTTER, item.decision === 'deny' && 'text-status-error')}>{DECISION_ICON[item.decision]}</span>
@@ -563,6 +586,7 @@ export function ApprovalHistoryRow({ item }: { item: ChatApprovalItem }) {
 
 export function QuestionHistoryRow({ item }: { item: ChatQuestionItem }) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <div>
             {item.questions.map((question) => (

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

@@ -14,6 +14,7 @@ export interface RowContainerProps {
 
 export function RowContainer({ row, previous, index, top, ref, children }: RowContainerProps) {
     const wide = row.kind === 'visual' && row.visual.layout === 'wide';
+
     return (
         <div
             data-index={index}

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

@@ -41,6 +41,7 @@ function AppCardBody({ card }: { card: ThreadCard }) {
 
 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} />
@@ -55,6 +56,7 @@ export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, open
             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':

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

@@ -33,16 +33,20 @@ function ChildRow({ chatId, item }: { chatId: string; item: ChatItem }) {
         if (isImageGeneration(item)) {
             return <GeneratedImageRow chatId={chatId} tool={item} />;
         }
+
         return item.state === 'running' ? <WorkLiveRow chatId={chatId} tool={item} /> : <WorkRow chatId={chatId} 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} />
@@ -54,15 +58,19 @@ function StatusPill({ item, task }: { item: ChatSubagentItem; task: SubagentTask
     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 })}
@@ -75,16 +83,19 @@ function SubagentWork({ chatId, item, work }: { chatId: string; item: ChatSubage
     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>}
@@ -100,6 +111,7 @@ 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)}>
@@ -146,6 +158,7 @@ export function SubagentRow({
     // 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' ? (

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

@@ -33,6 +33,7 @@ const STATE_TONE: Record<TaskRowState, string> = {
 
 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" />;
 }
 
@@ -40,6 +41,7 @@ function StateLine({ state, task }: { state: TaskRowState; task: SubagentTask |
     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-2xs', STATE_TONE[state])}>
             {until === undefined ? t(`rows.task.${state}`) : t('rows.task.pausedUntil', { time: formatMoment(until, now) })}
@@ -58,18 +60,23 @@ export function TaskRow({ item, task, open, onPress }: { item: ChatSubagentItem;
     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-start gap-2 rounded-md px-1 py-1 text-left hover:bg-surface-hover" onClick={onPress}>
             <span className={clsx(ROW_GUTTER, 'relative text-text')}>

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

@@ -18,11 +18,15 @@ export function VisualRow({ chatId, visual }: { chatId: string; visual: ChatVisu
     const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const { id: scopeId, keyOf } = useChatScope();
+
     if (host.visuals === null) {
         return null;
     }
+
     const extra = host.visuals.actions?.(scopeId, chatId, visual) ?? [];
+
     const open = (kind: 'expand' | 'remove'): void => useVisualDialog.getState().open(keyOf(chatId), visual.id, kind);
+
     return (
         <ErrorBoundary label={t('visuals.renderFailed')} resetKeys={[visual]} compact className="relative rounded-lg">
             <div className="group/visual relative">

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

@@ -59,6 +59,7 @@ const BRAND = 'font-semibold';
 function withBrand(text: string, brands: readonly string[]): ReactNode {
     for (const brand of brands) {
         const at = brand === '' ? -1 : text.indexOf(brand);
+
         if (at !== -1) {
             return (
                 <>
@@ -69,6 +70,7 @@ function withBrand(text: string, brands: readonly string[]): ReactNode {
             );
         }
     }
+
     return text;
 }
 
@@ -80,18 +82,23 @@ function hasNames(look: CommandLook): look is CommandLook & Required<Pick<Comman
 function NamedLookDetail({ run, chatId, look }: { run: CommandLookRun; chatId: string; look: Required<Pick<CommandLook, 'useNames'>> }) {
     const scope = useContext(ChatScopeContext);
     const nameOf = useCommandNames(look, scope?.id ?? '', chatId);
+
     const names = run.words.flatMap((word): NamedWord[] => {
         const name = nameOf(word.text, word.option);
+
         return name === null ? [] : [{ start: word.start, end: word.end, word: word.text, name }];
     });
+
     return <ShellCommand command={run.detail} code={run.code} names={names} />;
 }
 
 function LookDetail({ run, chatId }: { run: CommandLookRun; chatId: string }) {
     const { look } = run;
+
     if (!hasNames(look)) {
         return <ShellCommand command={run.detail} code={run.code} />;
     }
+
     // Keyed by the look, so a row whose command turns into another look's starts its hooks again.
     return <NamedLookDetail key={look.program} run={run} chatId={chatId} look={look} />;
 }
@@ -102,6 +109,7 @@ const TAG = 'shrink-0 rounded bg-surface-hover px-1.5 text-text-faint';
 function LookTags({ run }: { run: CommandLookRun }) {
     const { t } = useTranslation('agent-chat');
     const also = run.heredoc ? [...run.others, t('work.heredoc')] : run.others;
+
     return (
         <>
             {also.length > 0 && <span className={TAG}>{t('work.alsoRan', { programs: also.join(', ') })}</span>}
@@ -156,6 +164,7 @@ export function ToggleLine({
         failed && 'text-status-error',
         className
     );
+
     const content = (
         <>
             <span className={clsx(ROW_GUTTER, live && 'text-accent')}>{icon}</span>
@@ -192,9 +201,11 @@ export function ToggleLine({
             )}
         </>
     );
+
     if (onToggle === undefined) {
         return <div className={classes}>{content}</div>;
     }
+
     return (
         <button className={classes} onClick={onToggle}>
             {content}
@@ -205,6 +216,7 @@ export function ToggleLine({
 /* The diff renderers load lazily, so a diff waits on them under a line that says so. */
 function DiffSuspense({ children }: { children: ReactNode }) {
     const { t } = useTranslation('agent-chat');
+
     return <LazyBoundary fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>{children}</LazyBoundary>;
 }
 
@@ -262,11 +274,14 @@ function DiffBody({ tool, entries, patched }: { tool: ChatToolItem; entries: rea
 /* What a call answered, muted under the call; a failure in the error color, or its exit code when the tool names one. */
 function ToolOutput({ tool }: { tool: ChatToolItem }) {
     const { t } = useTranslation('agent-chat');
+
     if (!hasOutput(tool.output)) {
         return null;
     }
+
     const failed = tool.state === 'error';
     const { code, rest } = failed ? exitCodeOf(tool.output) : { code: null, rest: tool.output };
+
     return (
         <>
             {hasOutput(rest) && (
@@ -286,10 +301,13 @@ function ToolOutput({ tool }: { tool: ChatToolItem }) {
 export function ToolBody({ tool }: { tool: ChatToolItem }) {
     const patches = unifiedChanges(tool);
     const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
+
     if (patches.length + changes.length > 0) {
         return <DiffBody tool={tool} entries={reviewEntries(patches, changes)} patched={patches.length > 0} />;
     }
+
     const lines = toolCallLines(tool.name, tool.input);
+
     return (
         <div className="mt-0.5 mb-2 ml-6 flex flex-col gap-1.5 font-mono text-code select-text">
             {lines.command !== null && (
@@ -345,6 +363,7 @@ export function WorkRow({
     const opens = hasToolBody(tool);
     const shell = shellCommand(tool.name, tool.input);
     const run = detail === undefined && icon === undefined && label === undefined && shell !== null ? matchCommandLook(shell, host.commandLooks) : null;
+
     return (
         <div data-find-item={tool.id} className={nested ? 'ml-6' : undefined}>
             <ToggleLine
@@ -370,6 +389,7 @@ export function WorkRow({
 export function RunningFor({ startedAt }: { startedAt: number }) {
     const { t } = useTranslation('agent-chat');
     const ref = useTickingText(() => t('work.runningFor', { elapsed: formatElapsedShort(Date.now() - startedAt) }));
+
     return <span ref={ref} className="shrink-0 text-xs text-text-faint tabular-nums" />;
 }
 
@@ -385,6 +405,7 @@ export function WorkLiveRow({ chatId, tool: derived }: { chatId: string; tool: C
     const run = shell === null ? null : matchCommandLook(shell, commandLooks);
     const awaiting = useAwaitsApproval(chatId, tool.toolUseId);
     const { t } = useTranslation('agent-chat');
+
     return (
         <div>
             <ToggleLine
@@ -431,6 +452,7 @@ export function WorkGroupRow({
     onToggle(): void;
 }) {
     const failed = tools.some((tool) => tool.state === 'error');
+
     return (
         <div>
             <ToggleLine
@@ -464,6 +486,7 @@ export function TurnFoldRow({
 }) {
     const { commandLooks } = useChatHost();
     const brands = commandLooks?.flatMap(({ brand }) => (brand === undefined ? [] : [brand])) ?? [];
+
     return (
         <button
             className={clsx(
@@ -502,6 +525,7 @@ function CheckpointFileBody({ file }: { file: ChatCheckpointFile }) {
     if (file.omitted) {
         return <div className="px-3 py-2 text-xs text-text-faint">{omittedLabel(file.omitted)}</div>;
     }
+
     return (
         <DiffSuspense>
             <UnifiedDiff change={file} />
@@ -533,10 +557,12 @@ function ChangedFilesCard({
     const [expanded, setExpanded] = useState(false);
     // A jump opens the card, also one that mounted it by scrolling it on screen; the flash is gone by the next visit.
     const [seenReveal, setSeenReveal] = useState(0);
+
     if (revealNonce > 0 && revealNonce !== seenReveal) {
         setSeenReveal(revealNonce);
         setExpanded(true);
     }
+
     return (
         <div className="mb-3 overflow-hidden rounded-lg border border-border bg-surface-raised">
             <button
@@ -588,11 +614,14 @@ export function ChangedFilesRow({
     const [open, setOpen] = useState<Record<string, boolean>>({});
     const [fetched, setFetched] = useState<ChatCheckpointDiff | null>(null);
     const actions = useChatActions();
+
     useEffect(() => {
         if (diff !== null || !checkpoint) {
             return;
         }
+
         let alive = true;
+
         void actions
             .turnDiff(chatId, turnId)
             .then((answer) => {
@@ -601,16 +630,20 @@ export function ChangedFilesRow({
                 }
             })
             .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 (
             <ChangedFilesCard
                 revealNonce={revealNonce}
@@ -639,6 +672,7 @@ export function ChangedFilesRow({
             </ChangedFilesCard>
         );
     }
+
     return <ProviderChangedFiles tools={tools} open={open} setOpen={setOpen} revealNonce={revealNonce} />;
 }
 
@@ -659,6 +693,7 @@ function ProviderReviewFiles({
 }) {
     const { t } = useTranslation('agent-chat');
     const stack = useReviewStack(reviews.filter(({ path }) => open[path] === true).flatMap(({ reviews }) => reviews));
+
     return reviews.map(({ path, count, reviews }) => (
         <ChangedFileLine
             key={path}
@@ -685,32 +720,42 @@ function ProviderChangedFiles({
     setOpen: Dispatch<SetStateAction<Record<string, boolean>>>;
 }) {
     const byPath = new Map<string, { edits: FileChange[]; patches: ChatFileChange[] }>();
+
     const entryFor = (path: string) => {
         const existing = byPath.get(path);
+
         if (existing) {
             return existing;
         }
+
         const created = { edits: [] as FileChange[], patches: [] as ChatFileChange[] };
         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);
         }
     }
+
     const reviews = [...byPath].map(([path, entry]) => ({
         path,
         count: entry.patches.length + entry.edits.length,
         reviews: reviewEntries(entry.patches, entry.edits)
     }));
+
     return (
         <ChangedFilesCard count={byPath.size} revealNonce={revealNonce}>
             <ProviderReviewFiles reviews={reviews} open={open} setOpen={setOpen} />
@@ -722,6 +767,7 @@ function ProviderChangedFiles({
 export function WorkingRow({ startedAt }: { startedAt: number }) {
     const { t } = useTranslation('agent-chat');
     const ref = useTickingText(() => formatClockDuration(Date.now() - startedAt));
+
     return (
         <div className="-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-muted">
             <span className={`${ROW_GUTTER} text-status-running`}>