@adecore/agents-react 0.25.8 → 0.25.9

package/src/chat/logic/timeline.ts

@@ -14,12 +14,13 @@ import type {
     ChatWorkflow
 } from '@adecore/agent-contracts';
 import { abortedByMachine } from '@adecore/agent-contracts';
-import type { ThreadCard } from '../../host';
+import type { CommandLook, ThreadCard } from '../../host';
 import { formatElapsedShort } from '@adecore/ui/format';
+import { matchCommandLook } from './command-looks';
 import { isImageGeneration } from './generated-image';
 import { handbackReportOf } from './handback';
 import { toolEntry } from './tool-catalog';
-import { hasFileChanges, isFileChange } from './tools';
+import { hasFileChanges, isFileChange, shellCommand } from './tools';
 
 /* A subagent's row: the work the thread kept of it, and the agents it opened in turn, each a row of its own under it. */
 export interface SubagentBranch {
@@ -43,7 +44,8 @@ export type TimelineRow =
     | { kind: 'report'; id: string; text: string }
     | { kind: 'thinking'; id: string; item: ChatThinkingItem }
     | { kind: 'work'; id: string; tool: ChatToolItem }
-    | { kind: 'work-group'; id: string; tools: ChatToolItem[]; summary: string; expanded: boolean }
+    // `look` is set when every call is a run of that look and the summary is its sentence.
+    | { kind: 'work-group'; id: string; tools: ChatToolItem[]; summary: string; expanded: boolean; look?: CommandLook }
     | { kind: 'work-live'; id: string; tool: ChatToolItem }
     // The latest thought of a running turn, repeated over the call it led to; `at` is when that call began.
     | { kind: 'live-thought'; id: string; item: ChatThinkingItem; at: number }
@@ -70,6 +72,8 @@ interface TimelineOptions {
     activeTurnId: string | null;
     /* The settled turns a fork went on after; a thread that cannot fork leaves it out. */
     forkedTurns?: ReadonlySet<string>;
+    /* The host's programs drawn as tools of their own, whose runs read as their own sentences. */
+    commandLooks?: readonly CommandLook[];
 }
 
 /*
@@ -83,8 +87,42 @@ export function isBlock(row: TimelineRow): boolean {
     return BLOCK_KINDS.has(row.kind) || isImageRow(row);
 }
 
-/* "Read 4 files", "Ran 2 commands", or "12 tool calls" when the run mixes kinds. */
-export function summarizeGroup(tools: ChatToolItem[]): string {
+/*
+ * The sentence of a run of shell calls that are all runs of one look: its group's when they share a key,
+ * else the look's own; null for any other run, which reads as shell calls.
+ */
+function lookSummary(tools: readonly ChatToolItem[], looks: readonly CommandLook[] | undefined): { look: CommandLook; summary: string } | null {
+    let look: CommandLook | null = null;
+    let group: { key: string; sentence(count: number): string } | undefined;
+    let sameKey = true;
+    for (const tool of tools) {
+        const command = shellCommand(tool.name, tool.input);
+        const run = command === null ? null : matchCommandLook(command, looks);
+        if (run === null || (look !== null && run.look !== look)) {
+            return null;
+        }
+        if (look === null) {
+            look = run.look;
+            group = run.match.group;
+        } else if (run.match.group?.key !== group?.key) {
+            sameKey = false;
+        }
+    }
+    if (look === null) {
+        return null;
+    }
+    if (sameKey && group !== undefined) {
+        return { look, summary: group.sentence(tools.length) };
+    }
+    return look.sentence === undefined ? null : { look, summary: look.sentence(tools.length) };
+}
+
+/* "Read 4 files", "Ran 2 commands", "12 tool calls" when the run mixes kinds, or the sentence of a look all its calls are runs of. */
+export function summarizeGroup(tools: ChatToolItem[], looks?: readonly CommandLook[]): string {
+    const looked = lookSummary(tools, looks);
+    if (looked !== null) {
+        return looked.summary;
+    }
     const names = new Set(tools.map((tool) => tool.name));
     const only = names.size === 1 ? tools[0]!.name : null;
     if (only !== null && toolEntry(only)?.grouped === true) {
@@ -110,23 +148,37 @@ function editedPath(tool: ChatToolItem): string {
  * "Searched 2 patterns". Every file change reads as one sentence, and calls without a sentence of
  * their own are counted together at the end.
  */
-export function summarizeTurn(tools: readonly ChatToolItem[]): string[] {
+export function summarizeTurn(tools: readonly ChatToolItem[], looks?: readonly CommandLook[]): string[] {
     // Keyed by the sentence, so its place is where the first call of that kind came.
-    const counts = new Map<string, number>();
+    const counts = new Map<string, { count: number; say(count: number): string }>();
+    const add = (key: string, say: (count: number) => string, total?: number): void => {
+        const known = counts.get(key);
+        if (known === undefined) {
+            counts.set(key, { count: total ?? 1, say });
+        } else {
+            known.count = total ?? known.count + 1;
+        }
+    };
     const edited = new Set<string>();
     let other = 0;
     for (const tool of tools) {
-        if (isFileChange(tool.name)) {
+        const command = shellCommand(tool.name, tool.input);
+        const run = command === null ? null : matchCommandLook(command, looks);
+        const group = run?.match.group;
+        if (run !== null && group !== undefined) {
+            // Keyed by the program too, so two looks with a key in common keep their own sentences.
+            add(`look:${run.look.program}:${group.key}`, group.sentence);
+        } else if (isFileChange(tool.name)) {
             edited.add(editedPath(tool));
-            counts.set('agent-chat:group.edited', edited.size);
+            add('agent-chat:group.edited', (count) => i18next.t('agent-chat:group.edited', { count }), edited.size);
         } else if (toolEntry(tool.name)?.grouped === true) {
             const key = `agent-chat:group.tools.${tool.name}`;
-            counts.set(key, (counts.get(key) ?? 0) + 1);
+            add(key, (count) => i18next.t(key, { count }));
         } else {
             other += 1;
         }
     }
-    const parts = [...counts].map(([key, count]) => i18next.t(key, { count }));
+    const parts = [...counts.values()].map(({ count, say }) => say(count));
     if (other > 0) {
         parts.push(i18next.t(parts.length === 0 ? 'agent-chat:group.toolCalls' : 'agent-chat:group.otherCalls', { count: other }));
     }
@@ -239,7 +291,12 @@ function flushTools(buffer: ChatToolItem[], rows: TimelineRow[], options: Timeli
     } else if (settled.length > 1) {
         const id = `group-${settled[0]!.id}`;
         const expanded = options.expandedGroups.has(id);
-        rows.push({ kind: 'work-group', id, tools: settled, summary: summarizeGroup(settled), expanded });
+        const looked = lookSummary(settled, options.commandLooks);
+        rows.push(
+            looked === null
+                ? { kind: 'work-group', id, tools: settled, summary: summarizeGroup(settled), expanded }
+                : { kind: 'work-group', id, tools: settled, summary: looked.summary, expanded, look: looked.look }
+        );
         if (expanded) {
             for (const tool of settled) {
                 rows.push({ kind: 'work', id: tool.id, tool });
@@ -462,7 +519,7 @@ export function deriveTimelineRows(items: ChatItem[], options: TimelineOptions):
                 id: `fold-${turnId}`,
                 turn,
                 label: turnLabel(turn, chunk.items),
-                work: summarizeTurn(tools),
+                work: summarizeTurn(tools, options.commandLooks),
                 hiddenCount: folded.length,
                 expanded
             });

package/src/chat/ui/ShellCommand.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState, type ReactNode } from 'react';
 import type { BundledLanguage } from 'shiki';
-import { EMBEDDED_CODE_LIMIT, SHELL_LANGUAGE, embeddedCode } from '../logic/embedded-code';
+import { Tooltip } from '@adecore/ui';
+import { EMBEDDED_CODE_LIMIT, SHELL_LANGUAGE, embeddedCode, type EmbeddedCode } from '../logic/embedded-code';
 import type { CodeToken } from './code-lines';
-import { useChatHost } from '../../host';
+import { useChatHost, type CommandName } from '../../host';
 import { useCodeTheme } from './code-theme';
 import { tokenStyle, useCodeHighlighter, type CodeHighlighter, type Highlighter } from './highlighter';
 
@@ -12,6 +13,17 @@ interface Run extends CodeToken {
     end: number;
 }
 
+/* A word of a command drawn as the name a host gave it, as offsets into the command. */
+export interface NamedWord {
+    readonly start: number;
+    readonly end: number;
+    readonly word: string;
+    readonly name: CommandName;
+}
+
+const NO_CODE: readonly EmbeddedCode[] = [];
+const NO_NAMES: readonly NamedWord[] = [];
+
 // Rows redraw often and a thread holds many commands, so each is tokenized once per theme.
 const CACHE_LIMIT = 300;
 const cache = new Map<string, Run[]>();
@@ -47,13 +59,20 @@ function overlay(base: readonly Run[], start: number, end: number, inner: readon
     return [...kept, ...inner].sort((left, right) => left.start - right.start);
 }
 
-function languagesOf(command: string): Set<string> {
-    return new Set([SHELL_LANGUAGE, ...embeddedCode(command).map(({ language }) => language)]);
+/* The code inside a command, with the stretches a caller knows the language of on top. */
+function codeIn(command: string, extra: readonly EmbeddedCode[]): EmbeddedCode[] {
+    return extra.length === 0
+        ? embeddedCode(command)
+        : [...embeddedCode(command), ...extra].sort((left, right) => left.start - right.start || right.end - left.end);
+}
+
+function languagesOf(command: string, extra: readonly EmbeddedCode[]): Set<string> {
+    return new Set([SHELL_LANGUAGE, ...codeIn(command, extra).map(({ language }) => language)]);
 }
 
 /* The colored runs of a command, or null while a grammar or the theme is still on its way. */
-function highlight(command: string, theme: string, code: CodeHighlighter): Run[] | null {
-    const key = `${theme}\n${command}`;
+function highlight(command: string, extra: readonly EmbeddedCode[], theme: string, code: CodeHighlighter): Run[] | null {
+    const key = `${theme}\n${extra.map(({ start, end, language }) => `${start}:${end}:${language}`).join(',')}\n${command}`;
     const known = cache.get(key);
     if (known !== undefined) {
         // Touched entries move to the end, so the oldest falls out first.
@@ -61,7 +80,7 @@ function highlight(command: string, theme: string, code: CodeHighlighter): Run[]
         cache.set(key, known);
         return known;
     }
-    const embedded = embeddedCode(command);
+    const embedded = codeIn(command, extra);
     const highlighter = code.ready([SHELL_LANGUAGE, ...embedded.map(({ language }) => language)], theme);
     if (highlighter === null) {
         return null;
@@ -77,58 +96,99 @@ function highlight(command: string, theme: string, code: CodeHighlighter): Run[]
     return runs;
 }
 
-function draw(command: string, runs: readonly Run[]): ReactNode[] {
+/* `command[from, to)` in its colors, or as it is while there are none. */
+function draw(command: string, runs: readonly Run[] | null, from: number, to: number): ReactNode[] {
+    if (runs === null) {
+        return [command.slice(from, to)];
+    }
     const parts: ReactNode[] = [];
-    let at = 0;
+    let at = from;
     for (const run of runs) {
+        if (run.end <= from || run.start >= to) {
+            continue;
+        }
+        const start = Math.max(run.start, from);
+        const end = Math.min(run.end, to);
         // Shiki leaves the line breaks out of its tokens; they come from the command itself.
-        if (run.start > at) {
-            parts.push(command.slice(at, run.start));
+        if (start > at) {
+            parts.push(command.slice(at, start));
         }
+        const content = run.content.slice(start - run.start, end - run.start);
         const style = tokenStyle(run);
         parts.push(
             style === undefined ? (
-                run.content
+                content
             ) : (
-                <span key={run.start} style={style}>
-                    {run.content}
+                <span key={start} style={style}>
+                    {content}
                 </span>
             )
         );
-        at = run.end;
+        at = end;
+    }
+    if (at < to) {
+        parts.push(command.slice(at, to));
     }
-    if (at < command.length) {
-        parts.push(command.slice(at));
+    return parts;
+}
+
+/* A word as its name, in a frame so it reads as a reference; the word itself stays in the text, for a find. */
+function Name({ named }: { named: NamedWord }) {
+    return (
+        <Tooltip label={named.word}>
+            <span className="inline-flex items-center gap-1 rounded bg-surface-hover px-1 font-sans text-text ring-1 ring-border ring-inset">
+                {named.name.icon}
+                {named.name.name}
+                <span className="sr-only">{named.word}</span>
+            </span>
+        </Tooltip>
+    );
+}
+
+function drawNamed(command: string, runs: readonly Run[] | null, names: readonly NamedWord[]): ReactNode[] {
+    const parts: ReactNode[] = [];
+    let at = 0;
+    for (const named of names) {
+        if (named.start < at) {
+            continue;
+        }
+        parts.push(...draw(command, runs, at, named.start), <Name key={`name-${named.start}`} named={named} />);
+        at = named.end;
     }
+    parts.push(...draw(command, runs, at, command.length));
     return parts;
 }
 
 /*
  * A shell command in the colors of the code theme, with the code inside it (a `bash -lc` script, a
  * `python3 -c` argument, a heredoc) in its own language. Plain text until the grammars are in, which
- * changes no size; a command past the limit stays plain.
+ * changes no size; a command past the limit stays plain. `code` adds stretches whose language the
+ * caller knows, and `names` draws words as the names a host gave them, both as offsets into `command`.
  */
-export function ShellCommand({ command }: { command: string }) {
+export function ShellCommand({ command, code = NO_CODE, names = NO_NAMES }: { command: string; code?: readonly EmbeddedCode[]; names?: readonly NamedWord[] }) {
     const theme = useCodeTheme();
     const { custom } = useChatHost().code;
     const highlighter = useCodeHighlighter();
     // Bumped when a load settles, so the cache is asked again.
     const [, setLoads] = useState(0);
     const tooLong = command.length > EMBEDDED_CODE_LIMIT;
-    const runs = tooLong ? null : highlight(command, theme, highlighter);
+    const runs = tooLong ? null : highlight(command, code, theme, highlighter);
 
     useEffect(() => {
         if (runs !== null || tooLong) {
             return;
         }
         let cancelled = false;
-        Promise.all([highlighter.loadTheme(theme, custom), ...[...languagesOf(command)].map((lang) => highlighter.loadLanguage(lang))])
+        Promise.all([highlighter.loadTheme(theme, custom), ...[...languagesOf(command, code)].map((lang) => highlighter.loadLanguage(lang))])
             .then(() => !cancelled && setLoads((count) => count + 1))
             .catch(() => undefined);
         return () => {
             cancelled = true;
         };
-    }, [highlighter, command, theme, custom, runs, tooLong]);
+    }, [highlighter, command, code, theme, custom, runs, tooLong]);
 
-    return <>{runs === null ? command : draw(command, runs)}</>;
+    if (names.length > 0) {
+        return <>{drawNamed(command, runs, names)}</>;
+    }
+    return <>{runs === null ? command : draw(command, runs, 0, command.length)}</>;
 }

package/src/chat/ui/SubagentTimeline.tsx

@@ -19,6 +19,7 @@ import { FileLinkContext } from './file-links';
 import { useChatRow } from '../../state/chats';
 import { useChatPreferences } from '../preferences';
 import { readingWidthStyle } from '../reading-width';
+import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { EmptyState, ContextMenu, Icon } from '@adecore/ui';
 
@@ -31,6 +32,7 @@ const NO_TURNS = new Set<string>();
 export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUseId: string }) {
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
+    const { commandLooks } = useChatHost();
     const connected = useSyncExternalStore(
         useCallback((changed) => scope.transport.subscribeStatus(changed), [scope]),
         useCallback(() => scope.transport.status === 'open', [scope]),
@@ -71,8 +73,15 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
     }, [state.unsupported, scope]);
 
     const rows = useMemo(
-        () => deriveTimelineRows(state.items, { expandedGroups: groups.ids, expandedTurns: NO_TURNS, expandedSubagents: subagents.ids, activeTurnId: null }),
-        [state.items, groups.ids, subagents.ids]
+        () =>
+            deriveTimelineRows(state.items, {
+                expandedGroups: groups.ids,
+                expandedTurns: NO_TURNS,
+                expandedSubagents: subagents.ids,
+                activeTurnId: null,
+                commandLooks
+            }),
+        [state.items, groups.ids, subagents.ids, commandLooks]
     );
 
     useLayoutEffect(() => {

package/src/chat/ui/Timeline.tsx

@@ -252,9 +252,16 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         }
         return deriveTimelineRows(
             order.map((id) => items[id]!),
-            { expandedGroups: groups.ids, expandedTurns: turns.ids, expandedSubagents: subagents.ids, activeTurnId, forkedTurns }
+            {
+                expandedGroups: groups.ids,
+                expandedTurns: turns.ids,
+                expandedSubagents: subagents.ids,
+                activeTurnId,
+                forkedTurns,
+                commandLooks: host.commandLooks
+            }
         );
-    }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns]);
+    }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns, host.commandLooks]);
     const cards = host.useThreadCards(scopeId, chatId);
     const drawsVisuals = host.visuals !== null;
     // Where the part of the thread this client holds begins, while there is a page before it.

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

@@ -66,13 +66,13 @@ export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, open
         case 'live-thought':
             return <LiveThoughtRow chatId={chatId} item={row.item} />;
         case 'work':
-            return isImageGeneration(row.tool) ? <GeneratedImageRow chatId={chatId} tool={row.tool} /> : <WorkRow tool={row.tool} />;
+            return isImageGeneration(row.tool) ? <GeneratedImageRow chatId={chatId} tool={row.tool} /> : <WorkRow chatId={chatId} tool={row.tool} />;
         case 'work-live':
             return isImageGeneration(row.tool) ? <GeneratedImageRow chatId={chatId} tool={row.tool} /> : <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)} />;
+            return <WorkGroupRow tools={row.tools} summary={row.summary} look={row.look} expanded={row.expanded} onToggle={() => toggleGroup(row.id)} />;
         case 'subagent':
             return <SubagentBranchRow chatId={chatId} branch={row} onToggle={toggleSubagent} onOpenConversation={openConversation} />;
         case 'turn-fold':

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

@@ -32,7 +32,7 @@ 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 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} />;