@adecore/agents-react 0.25.8 → 0.26.0

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

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

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

@@ -29,7 +29,7 @@ function ChildRow({ chatId, item }) {
         if (isImageGeneration(item)) {
             return _jsx(GeneratedImageRow, { chatId: chatId, tool: item });
         }
-        return item.state === 'running' ? _jsx(WorkLiveRow, { chatId: chatId, tool: item }) : _jsx(WorkRow, { tool: item });
+        return item.state === 'running' ? _jsx(WorkLiveRow, { chatId: chatId, tool: item }) : _jsx(WorkRow, { chatId: chatId, tool: item });
     }
     if (item.kind === 'assistant') {
         return _jsx(ChildText, { chatId: chatId, item: item });

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

@@ -1,11 +1,18 @@
 import { type ReactNode } from 'react';
 import type { ChatCheckpointDiff, ChatToolItem, ChatTurnItem } from '@adecore/agent-contracts';
 import type { BaseMoved } from '../../logic/timeline.js';
-export declare function ToggleLine({ icon, label, detail, command, path, open, onToggle, failed, live, trailing, time, className }: {
+import { type CommandLookRun } from '../../logic/command-looks.js';
+import { type CommandLook } from '../../../host.js';
+export declare function ToggleLine({ icon, label, brand, detail, command, look, path, open, onToggle, failed, live, trailing, time, className }: {
     icon: ReactNode;
-    label: string;
+    label: ReactNode;
+    brand?: string;
     detail?: string;
     command?: boolean;
+    look?: {
+        run: CommandLookRun;
+        chatId: string;
+    };
     path?: boolean;
     open?: boolean;
     onToggle?(): void;
@@ -15,8 +22,9 @@ export declare function ToggleLine({ icon, label, detail, command, path, open, o
     time?: number;
     className?: string;
 }): import("react").JSX.Element;
-export declare function WorkRow({ tool, nested, detail, icon, label, failed }: {
+export declare function WorkRow({ tool, chatId, nested, detail, icon, label, failed }: {
     tool: ChatToolItem;
+    chatId?: string;
     nested?: boolean;
     detail?: string;
     icon?: ReactNode;
@@ -30,9 +38,10 @@ export declare function WorkLiveRow({ chatId, tool: derived }: {
     chatId: string;
     tool: ChatToolItem;
 }): import("react").JSX.Element;
-export declare function WorkGroupRow({ tools, summary, expanded, onToggle }: {
+export declare function WorkGroupRow({ tools, summary, look, expanded, onToggle }: {
     tools: ChatToolItem[];
     summary: string;
+    look?: CommandLook;
     expanded: boolean;
     onToggle(): void;
 }): import("react").JSX.Element;

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

@@ -1,15 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, useContext, 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 { matchCommandLook } from '../../logic/command-looks.js';
 import { exitCodeOf, fileChanges, hasOutput, hasToolBody, liveOutput, readImagePath, shellCommand, toolCallLines, toolStartedAt, toolSummary, toolSummaryIsPath, unifiedChanges } from '../../logic/tools.js';
 import { useOpenForFind } from '../find-reveal.js';
 import { useChatHost } from '../../../host.js';
 import { lazyNamed } from '../../../lazy.js';
 import { useChatActions } from '../../actions.js';
-import { useChatScope } from '../../../scope.js';
+import { ChatScopeContext, useChatScope } from '../../../scope.js';
 import { useCurrentItem } from '../../../state/chats.js';
 import { useTimelineFlash } from '../../timeline-flash.js';
 import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
@@ -31,15 +32,51 @@ function clipNotice(text) {
 function clip(text) {
     return text.slice(0, OUTPUT_LIMIT) + clipNotice(text);
 }
+const BRAND = 'font-semibold';
+/* `text` with `brand` in semibold where it names it, as a sentence about a look does. */
+function withBrand(text, brands) {
+    for (const brand of brands) {
+        const at = brand === '' ? -1 : text.indexOf(brand);
+        if (at !== -1) {
+            return (_jsxs(_Fragment, { children: [text.slice(0, at), _jsx("span", { className: BRAND, children: brand }), text.slice(at + brand.length)] }));
+        }
+    }
+    return text;
+}
+/* The detail of a look's run, with the words its host names drawn as those names. */
+function NamedLookDetail({ run, chatId, useNames }) {
+    const scope = useContext(ChatScopeContext);
+    const nameOf = useNames(scope?.id ?? '', chatId);
+    const names = run.words.flatMap((word) => {
+        const name = nameOf(word.text, word.option);
+        return name === null ? [] : [{ start: word.start, end: word.end, word: word.text, name }];
+    });
+    return _jsx(ShellCommand, { command: run.detail, code: run.code, names: names });
+}
+function LookDetail({ run, chatId }) {
+    const { useNames } = run.look;
+    if (useNames === undefined) {
+        return _jsx(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 _jsx(NamedLookDetail, { run: run, chatId: chatId, useNames: useNames }, run.look.program);
+}
+const TAG = 'shrink-0 rounded bg-surface-hover px-1.5 text-text-faint';
+/* What else the line ran, in quiet tags: the other programs and a heredoc, and how many more runs of a look. */
+function LookTags({ run }) {
+    const { t } = useTranslation('agent-chat');
+    const also = run.heredoc ? [...run.others, t('work.heredoc')] : run.others;
+    return (_jsxs(_Fragment, { children: [also.length > 0 && _jsx("span", { className: TAG, children: t('work.alsoRan', { programs: also.join(', ') }) }), run.more > 0 && _jsx("span", { className: TAG, children: t('work.moreRuns', { count: run.more }) })] }));
+}
 /*
  * The line of a call, a subagent or a group. Without `onToggle` it has nothing to open: no chevron, and
  * not a button. `time` shows at the right edge while the line is hovered or focused.
  */
-export function ToggleLine({ icon, label, detail, command, path, open = false, onToggle, failed, live, trailing, time, className }) {
+export function ToggleLine({ icon, label, brand, detail, command, look, path, open = false, onToggle, failed, live, trailing, time, className }) {
     const classes = clsx(
     // Fix the width so long commands reach the truncation inside the negative margins.
     'group/line -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', onToggle !== undefined && 'hover:bg-surface-hover', failed && 'text-status-error', className);
-    const content = (_jsxs(_Fragment, { 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: command ? _jsx(ShellCommand, { command: detail }) : path ? _jsx(MiddleTruncate, { text: detail }) : detail })), _jsx("span", { className: "grow" }), trailing, time !== undefined && _jsx(RowTime, { at: time }), failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), onToggle !== undefined && (_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }))] }));
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: icon }), _jsxs("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: [brand !== undefined && _jsx("span", { className: BRAND, children: brand }), brand !== undefined && label !== '' && ' ', label] }), look !== undefined ? (_jsxs(_Fragment, { children: [look.run.detail !== '' && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-text-faint", children: _jsx(LookDetail, { run: look.run, chatId: look.chatId }) })), _jsx(LookTags, { run: look.run })] })) : (detail && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-text-faint", children: command ? _jsx(ShellCommand, { command: detail }) : path ? _jsx(MiddleTruncate, { text: detail }) : detail }))), _jsx("span", { className: "grow" }), trailing, time !== undefined && _jsx(RowTime, { at: time }), failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), onToggle !== undefined && (_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }))] }));
     if (onToggle === undefined) {
         return _jsx("div", { className: classes, children: content });
     }
@@ -82,7 +119,7 @@ function ToolBody({ tool }) {
  * One settled tool call: a line, and what it was asked and answered behind it. An image the call
  * looked at is drawn under the line. `icon`, `label` and `failed` let a row that knows the call better name it.
  */
-export function WorkRow({ tool, nested, detail, icon, label, failed }) {
+export function WorkRow({ tool, chatId, nested, detail, icon, label, failed }) {
     const host = useChatHost();
     const [open, setOpen] = useState(false);
     const image = tool.state === 'done' ? readImagePath(tool.name, tool.input) : null;
@@ -90,7 +127,9 @@ export function WorkRow({ tool, nested, detail, icon, label, failed }) {
     useOpenForFind(tool.id, 'output', setOpen);
     const summary = detail ?? toolSummary(tool.name, tool.input);
     const opens = hasToolBody(tool);
-    return (_jsxs("div", { "data-find-item": tool.id, className: nested ? 'ml-6' : undefined, children: [_jsx(ToggleLine, { icon: icon ?? toolIcon(tool.name), label: label ?? tool.name, detail: summary, command: detail === undefined && summary === shellCommand(tool.name, tool.input), path: detail === undefined && toolSummaryIsPath(tool.name, tool.input), open: open && opens, onToggle: opens ? () => setOpen((o) => !o) : undefined, failed: failed ?? tool.state === 'error', time: tool.createdAt }), image !== null && ReadImage !== null && _jsx(ReadImage, { path: image }), open && opens && _jsx(ToolBody, { tool: tool })] }));
+    const shell = shellCommand(tool.name, tool.input);
+    const run = detail === undefined && icon === undefined && label === undefined && shell !== null ? matchCommandLook(shell, host.commandLooks) : null;
+    return (_jsxs("div", { "data-find-item": tool.id, className: nested ? 'ml-6' : undefined, children: [_jsx(ToggleLine, { icon: run === null ? (icon ?? toolIcon(tool.name)) : _jsx(run.look.Mark, { size: 12 }), label: run === null ? (label ?? tool.name) : run.match.label, brand: run?.look.brand, detail: summary, look: run === null ? undefined : { run, chatId: chatId ?? '' }, command: detail === undefined && summary === shell, path: detail === undefined && toolSummaryIsPath(tool.name, tool.input), open: open && opens, onToggle: opens ? () => setOpen((o) => !o) : undefined, failed: failed ?? tool.state === 'error', time: tool.createdAt }), image !== null && ReadImage !== null && _jsx(ReadImage, { path: image }), open && opens && _jsx(ToolBody, { tool: tool })] }));
 }
 /* "running for 12s" next to a live call. */
 export function RunningFor({ startedAt }) {
@@ -105,19 +144,24 @@ export function WorkLiveRow({ chatId, tool: derived }) {
     const tail = liveOutput(tool);
     const summary = toolSummary(tool.name, tool.input);
     const opens = hasToolBody(tool);
-    return (_jsxs("div", { children: [_jsx(ToggleLine, { icon: toolIcon(tool.name), label: tool.name, detail: summary || tool.progress?.description || '', command: summary !== '' && summary === shellCommand(tool.name, tool.input), path: summary !== '' && toolSummaryIsPath(tool.name, tool.input), open: open && opens, onToggle: opens ? () => setOpen((o) => !o) : undefined, trailing: _jsx(RunningFor, { startedAt: toolStartedAt(tool) }), live: true }), open && opens && _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 }) }))] }));
+    const shell = shellCommand(tool.name, tool.input);
+    const { commandLooks } = useChatHost();
+    const run = shell === null ? null : matchCommandLook(shell, commandLooks);
+    return (_jsxs("div", { children: [_jsx(ToggleLine, { icon: run === null ? toolIcon(tool.name) : _jsx(run.look.Mark, { size: 12 }), label: run === null ? tool.name : run.match.label, brand: run?.look.brand, look: run === null ? undefined : { run, chatId }, detail: summary || tool.progress?.description || '', command: summary !== '' && summary === shellCommand(tool.name, tool.input), path: summary !== '' && toolSummaryIsPath(tool.name, tool.input), open: open && opens, onToggle: opens ? () => setOpen((o) => !o) : undefined, trailing: _jsx(RunningFor, { startedAt: toolStartedAt(tool) }), live: true }), open && opens && _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 }) {
+/* A run of tool calls as one line ("Read 4 files"); opening it lists every call. A run of one look wears its mark and its brand. */
+export function WorkGroupRow({ tools, summary, look, 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, time: tools[0].createdAt }) }));
+    return (_jsx("div", { children: _jsx(ToggleLine, { icon: look === undefined ? toolIcon(tools[0].name) : _jsx(look.Mark, { size: 12 }), label: look?.brand === undefined ? summary : withBrand(summary, [look.brand]), open: expanded, onToggle: onToggle, failed: failed, time: tools[0].createdAt }) }));
 }
 /*
  * 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 group/line -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('') }), _jsx("span", { className: "grow" }), _jsx(RowTime, { at: turn.createdAt })] }));
+    const { commandLooks } = useChatHost();
+    const brands = commandLooks?.flatMap(({ brand }) => (brand === undefined ? [] : [brand])) ?? [];
+    return (_jsxs("button", { className: clsx('group group/line -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, index) => (_jsxs(Fragment, { children: [' · ', withBrand(part, brands)] }, index))) })), _jsx("span", { className: "grow" }), _jsx(RowTime, { at: turn.createdAt })] }));
 }
 function omittedLabel(reason) {
     return reason === 'binary' ? i18next.t('agent-chat:work.omitted.binary') : i18next.t('agent-chat:work.omitted.tooLarge');

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

@@ -45,5 +45,5 @@ export function WorkflowRow({ tool, workflow, chatId, onOpenAgent }) {
             });
         }
     };
-    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))) }))] }));
+    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, { chatId: chatId, 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/host.d.ts

@@ -125,6 +125,30 @@ export interface ReplyAuthor {
     name: string;
     mark?: ReactNode;
 }
+export interface CommandName {
+    name: string;
+    icon?: ReactNode;
+}
+export interface CommandLookMatch {
+    label: string;
+    detailFrom: number;
+    group?: {
+        key: string;
+        sentence(count: number): string;
+    };
+    fold?: readonly string[];
+    languages?: Readonly<Record<string, string>>;
+}
+export interface CommandLook {
+    program: string;
+    brand?: string;
+    Mark: ComponentType<{
+        size: number;
+    }>;
+    describe(args: readonly string[]): CommandLookMatch | null;
+    sentence?(count: number): string;
+    useNames?(scopeId: string, chatId: string): (word: string, option: string | null) => CommandName | null;
+}
 export type UiMapSource = {
     state: 'tiles';
     styleUrl(theme: 'light' | 'dark'): string;
@@ -240,6 +264,7 @@ export interface ChatHost {
     useThreadCards(scopeId: string, chatId: string): readonly ThreadCard[];
     useReplyAuthor(scopeId: string, chatId: string): ReplyAuthor | null;
     visuals: VisualHost | null;
+    commandLooks?: readonly CommandLook[];
 }
 export declare function ChatHostProvider({ host, children }: {
     host: Partial<ChatHost>;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { type ChatActions, type FileRef, type ShellCodeBlockContext, type ChatPlace, type SubagentTask, type TimelineFindOptions, type TimelineFind, type ComposerDictationProps, type ComposerSlotProps, type SubagentSlotProps, type ThreadCard, type VisualHost, type ReplyAuthor, type ChatHost, type UiMapSource, ChatHostProvider, useChatHost, type AccentChoice, type ChatToast, type TextareaProps, type ResourceUrl } from './host.js';
+export { type ChatActions, type FileRef, type ShellCodeBlockContext, type ChatPlace, type SubagentTask, type TimelineFindOptions, type TimelineFind, type ComposerDictationProps, type ComposerSlotProps, type SubagentSlotProps, type ThreadCard, type VisualHost, type ReplyAuthor, type ChatHost, type UiMapSource, type CommandLook, type CommandLookMatch, type CommandName, ChatHostProvider, useChatHost, type AccentChoice, type ChatToast, type TextareaProps, type ResourceUrl } from './host.js';
 export { type ChatScope, ChatScopeContext, useChatScope } from './scope.js';
 export { type ChatRequestMap, type ChatEventMap, type ChatTransportStatus, type ChatTransport, ChatTransportError, errorCode, isConnectionError } from './transport.js';
 export { portTransport, type PortTransport } from './port-transport.js';

package/dist/locales/en/agent-chat.d.ts

@@ -199,6 +199,10 @@ declare const _default: {
         edits_other: string;
         workingFor: string;
         exitCode: string;
+        alsoRan: string;
+        heredoc: string;
+        moreRuns_one: string;
+        moreRuns_other: string;
     };
     timeline: {
         welcome: {

package/dist/locales/en/agent-chat.js

@@ -198,7 +198,11 @@ export default {
         edits_one: '{{count}} edit',
         edits_other: '{{count}} edits',
         workingFor: 'Working for',
-        exitCode: 'Exit code {{code}}'
+        exitCode: 'Exit code {{code}}',
+        alsoRan: '+ {{programs}}',
+        heredoc: 'heredoc',
+        moreRuns_one: '+{{count}}',
+        moreRuns_other: '+{{count}}'
     },
     timeline: {
         welcome: {
@@ -223,7 +227,7 @@ export default {
         menu: {
             copyMessage: 'Copy message',
             copyCode: 'Copy code',
-            copyMarkdown: 'Copy as markdown',
+            copyMarkdown: 'Copy as Markdown',
             forkFromHere: 'Fork from here',
             openInPreview: 'Open in preview'
         }

package/dist/locales/nl/agent-chat.d.ts

@@ -199,6 +199,10 @@ declare const _default: {
         edits_other: string;
         workingFor: string;
         exitCode: string;
+        alsoRan: string;
+        heredoc: string;
+        moreRuns_one: string;
+        moreRuns_other: string;
     };
     timeline: {
         welcome: {

package/dist/locales/nl/agent-chat.js

@@ -198,7 +198,11 @@ export default {
         edits_one: '{{count}} bewerking',
         edits_other: '{{count}} bewerkingen',
         workingFor: 'Werkt al',
-        exitCode: 'Afsluitcode {{code}}'
+        exitCode: 'Afsluitcode {{code}}',
+        alsoRan: '+ {{programs}}',
+        heredoc: 'heredoc',
+        moreRuns_one: '+{{count}}',
+        moreRuns_other: '+{{count}}'
     },
     timeline: {
         welcome: {
@@ -223,7 +227,7 @@ export default {
         menu: {
             copyMessage: 'Bericht kopiëren',
             copyCode: 'Code kopiëren',
-            copyMarkdown: 'Kopiëren als markdown',
+            copyMarkdown: 'Kopiëren als Markdown',
             forkFromHere: 'Vanaf hier forken',
             openInPreview: 'Openen in preview'
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.25.8",
+  "version": "0.26.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.25.8",
-    "@adecore/editor": "0.25.8",
-    "@adecore/editor-react": "0.25.8",
-    "@adecore/intelligent-ui": "0.25.8",
-    "@adecore/merge": "0.25.8",
+    "@adecore/agent-contracts": "0.26.0",
+    "@adecore/editor": "0.26.0",
+    "@adecore/editor-react": "0.26.0",
+    "@adecore/intelligent-ui": "0.26.0",
+    "@adecore/merge": "0.26.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.25.8",
+    "@adecore/ui": "^0.26.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.25.8",
+    "@adecore/ui": "0.26.0",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/index.ts

@@ -21,6 +21,7 @@ export {
     type ForkPoint,
     type ForkWorktreeChoice
 } from './logic/fork';
+export { matchCommandLook, type CommandLookRun, type CommandLookWord } from './logic/command-looks';
 export { handbackReportOf } from './logic/handback';
 export { limitView, type LimitView } from './logic/limit';
 export type { TickKind, ScrubberTick } from './logic/scrubber';

package/src/chat/logic/command-looks.ts

@@ -0,0 +1,157 @@
+import type { CommandLook, CommandLookMatch } from '../../host';
+import { EMBEDDED_CODE_LIMIT, shellCommands, type EmbeddedCode, type ShellSimpleCommand, type ShellWord } from './embedded-code';
+
+// A folded value keeps this many characters of what it says.
+const FOLD_LENGTH = 40;
+// Rows redraw often and a thread holds many commands, so each is read once per set of looks.
+const CACHE_LIMIT = 300;
+
+/* A word of a detail a host may give a name, as offsets into the detail. */
+export interface CommandLookWord {
+    readonly start: number;
+    readonly end: number;
+    /* The word as the program gets it, quotes taken out. */
+    readonly text: string;
+    /* The option right before it, whose value it may be; null when it follows none. */
+    readonly option: string | null;
+}
+
+/* A shell call read as a tool of its own: the first command of the line a look knows. */
+export interface CommandLookRun {
+    readonly look: CommandLook;
+    readonly match: CommandLookMatch;
+    /* The source from the detail word on, as typed, without redirects and with folded values shortened. */
+    readonly detail: string;
+    /* The values the match names a language for, as offsets into the detail. */
+    readonly code: readonly EmbeddedCode[];
+    /* The words of the detail that are no option. */
+    readonly words: readonly CommandLookWord[];
+    /* The programs of the other commands in the line, each once, in the order they run. */
+    readonly others: readonly string[];
+    /* How many more commands of the line a look knows. */
+    readonly more: number;
+    /* Whether the command is fed a heredoc, which the detail leaves out. */
+    readonly heredoc: boolean;
+}
+
+const caches = new WeakMap<readonly CommandLook[], Map<string, CommandLookRun | null>>();
+
+/* The look of a simple command and what it says about it, or null when no look knows it. */
+function lookOf(command: ShellSimpleCommand, looks: readonly CommandLook[]): { look: CommandLook; match: CommandLookMatch } | null {
+    const program = command.program;
+    if (program === null) {
+        return null;
+    }
+    const args = command.words.slice(program.index + 1).map(({ text }) => text);
+    for (const look of looks) {
+        if (look.program !== program.name) {
+            continue;
+        }
+        const match = look.describe(args);
+        if (match !== null) {
+            return { look, match };
+        }
+    }
+    return null;
+}
+
+/* The source of `word`, with its value cut past the fold; the body comes back as offsets into what is returned. */
+function foldedWord(source: string, word: ShellWord, fold: boolean): { text: string; body: { start: number; end: number } | null } {
+    const text = source.slice(word.start, word.end);
+    const body = word.body === null ? null : { start: word.body.start - word.start, end: word.body.end - word.start };
+    if (!fold) {
+        return { text, body };
+    }
+    if (body !== null && body.end - body.start > FOLD_LENGTH) {
+        const cut = body.start + FOLD_LENGTH;
+        return { text: `${text.slice(0, cut)}…${text.slice(body.end)}`, body: { start: body.start, end: cut + 1 } };
+    }
+    if (body === null && text.length > FOLD_LENGTH) {
+        return { text: `${text.slice(0, FOLD_LENGTH)}…`, body: null };
+    }
+    return { text, body };
+}
+
+/* The detail of a command from the word the match names: its words with their spacing, a redirect or heredoc between them a single space. */
+function detailOf(source: string, command: ShellSimpleCommand, match: CommandLookMatch): Pick<CommandLookRun, 'detail' | 'code' | 'words'> {
+    const first = command.program!.index + 1 + Math.max(0, match.detailFrom);
+    let detail = '';
+    const code: EmbeddedCode[] = [];
+    const words: CommandLookWord[] = [];
+    let previous: ShellWord | null = null;
+    // The option the word before was, whose value this word may be.
+    let option: string | null = null;
+    for (const word of command.words.slice(first)) {
+        if (previous !== null) {
+            const gap = source.slice(previous.end, word.start);
+            detail += /^[ \t]*$/.test(gap) ? gap : ' ';
+        }
+        const start = detail.length;
+        const { text, body } = foldedWord(source, word, option !== null && match.fold?.includes(option) === true);
+        const language = option === null ? undefined : match.languages?.[option];
+        if (language !== undefined && body !== null && body.end > body.start) {
+            code.push({ start: start + body.start, end: start + body.end, language });
+        }
+        detail += text;
+        const isOption = word.text.startsWith('-') && word.text !== '-';
+        if (!isOption) {
+            words.push({ start, end: detail.length, text: word.text, option });
+        }
+        option = isOption ? word.text : null;
+        previous = word;
+    }
+    return { detail, code, words };
+}
+
+function read(command: string, looks: readonly CommandLook[]): CommandLookRun | null {
+    let found: { command: ShellSimpleCommand; look: CommandLook; match: CommandLookMatch } | null = null;
+    let more = 0;
+    const others: string[] = [];
+    for (const simple of shellCommands(command)) {
+        const known = lookOf(simple, looks);
+        if (known !== null && found === null) {
+            found = { command: simple, ...known };
+        } else if (known !== null) {
+            more++;
+        } else if (simple.program !== null && !others.includes(simple.program.name)) {
+            others.push(simple.program.name);
+        }
+    }
+    if (found === null) {
+        return null;
+    }
+    return {
+        look: found.look,
+        match: found.match,
+        ...detailOf(command, found.command, found.match),
+        others,
+        more,
+        heredoc: found.command.heredocs.length > 0
+    };
+}
+
+/*
+ * The first command of a shell line that one of `looks` knows, read as that look's tool: a program
+ * counts only where the shell runs it, past assignments and wrappers, so `grep tool` is no run of
+ * `tool`. Null for a line no look knows, and for one past the length that is drawn without looking inside.
+ */
+export function matchCommandLook(command: string, looks: readonly CommandLook[] | undefined): CommandLookRun | null {
+    if (looks === undefined || looks.length === 0 || command.length > EMBEDDED_CODE_LIMIT || !looks.some(({ program }) => command.includes(program))) {
+        return null;
+    }
+    let cache = caches.get(looks);
+    if (cache === undefined) {
+        cache = new Map();
+        caches.set(looks, cache);
+    }
+    const known = cache.get(command);
+    if (known !== undefined) {
+        return known;
+    }
+    const run = read(command, looks);
+    cache.set(command, run);
+    if (cache.size > CACHE_LIMIT) {
+        cache.delete(cache.keys().next().value!);
+    }
+    return run;
+}