@adecore/agents-react 0.25.8 → 0.25.9

package/dist/chat/index.d.ts

@@ -6,6 +6,7 @@ export { sendFromComposer, type ComposerSend } from './composer-send.js';
 export { EMPTY_DRAFT, useDrafts, readDraft, writeDraft, offerDraft, type ChatDraft } from './drafts.js';
 export { stripAnsi } from './logic/ansi.js';
 export { FORKABLE_PROVIDERS, forkRefusal, summaryRefusal, lastSettledTurn, forkPointOf, forkPointLabel, type ForkShape, forkShapes, type ForkCliChoice, forkPayload, branchRefusal, type ForkPoint, type ForkWorktreeChoice } from './logic/fork.js';
+export { matchCommandLook, type CommandLookRun, type CommandLookWord } from './logic/command-looks.js';
 export { handbackReportOf } from './logic/handback.js';
 export { limitView, type LimitView } from './logic/limit.js';
 export type { TickKind, ScrubberTick } from './logic/scrubber.js';

package/dist/chat/index.js

@@ -6,6 +6,7 @@ export { sendFromComposer } from './composer-send.js';
 export { EMPTY_DRAFT, useDrafts, readDraft, writeDraft, offerDraft } from './drafts.js';
 export { stripAnsi } from './logic/ansi.js';
 export { FORKABLE_PROVIDERS, forkRefusal, summaryRefusal, lastSettledTurn, forkPointOf, forkPointLabel, forkShapes, forkPayload, branchRefusal } from './logic/fork.js';
+export { matchCommandLook } from './logic/command-looks.js';
 export { handbackReportOf } from './logic/handback.js';
 export { limitView } from './logic/limit.js';
 export { withTimedRows, timedRowsOf } from './logic/thread-cards.js';

package/dist/chat/logic/command-looks.d.ts

@@ -0,0 +1,19 @@
+import type { CommandLook, CommandLookMatch } from '../../host.js';
+import { type EmbeddedCode } from './embedded-code.js';
+export interface CommandLookWord {
+    readonly start: number;
+    readonly end: number;
+    readonly text: string;
+    readonly option: string | null;
+}
+export interface CommandLookRun {
+    readonly look: CommandLook;
+    readonly match: CommandLookMatch;
+    readonly detail: string;
+    readonly code: readonly EmbeddedCode[];
+    readonly words: readonly CommandLookWord[];
+    readonly others: readonly string[];
+    readonly more: number;
+    readonly heredoc: boolean;
+}
+export declare function matchCommandLook(command: string, looks: readonly CommandLook[] | undefined): CommandLookRun | null;

package/dist/chat/logic/command-looks.js

@@ -0,0 +1,123 @@
+import { EMBEDDED_CODE_LIMIT, shellCommands } from './embedded-code.js';
+// 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;
+const caches = new WeakMap();
+/* The look of a simple command and what it says about it, or null when no look knows it. */
+function lookOf(command, looks) {
+    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, word, fold) {
+    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, command, match) {
+    const first = command.program.index + 1 + Math.max(0, match.detailFrom);
+    let detail = '';
+    const code = [];
+    const words = [];
+    let previous = null;
+    // The option the word before was, whose value this word may be.
+    let option = 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, looks) {
+    let found = null;
+    let more = 0;
+    const others = [];
+    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, looks) {
+    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;
+}

package/dist/chat/logic/embedded-code.d.ts

@@ -5,4 +5,29 @@ export interface EmbeddedCode {
 }
 export declare const SHELL_LANGUAGE = "shellscript";
 export declare const EMBEDDED_CODE_LIMIT = 20000;
+export interface ShellSpan {
+    readonly start: number;
+    readonly end: number;
+}
+export interface ShellWord extends ShellSpan {
+    readonly text: string;
+    readonly body: ShellSpan | null;
+}
+export interface ShellRedirect extends ShellSpan {
+    readonly op: string;
+    readonly target: ShellWord;
+}
+export interface ShellHeredoc extends ShellSpan {
+    readonly body: ShellSpan;
+}
+export interface ShellSimpleCommand {
+    readonly words: readonly ShellWord[];
+    readonly program: {
+        readonly index: number;
+        readonly name: string;
+    } | null;
+    readonly redirects: readonly ShellRedirect[];
+    readonly heredocs: readonly ShellHeredoc[];
+}
+export declare function shellCommands(source: string): ShellSimpleCommand[];
 export declare function embeddedCode(command: string): EmbeddedCode[];

package/dist/chat/logic/embedded-code.js

@@ -78,11 +78,14 @@ function parseCommands(source, from, to) {
     const commands = [];
     let current = { words: [], redirects: [], heredocs: [] };
     const pending = [];
+    // The start of the `2` of a `2>&1` just read, which the redirect after it begins at.
+    let descriptorStart = null;
     const finish = () => {
         if (current.words.length > 0 || current.redirects.length > 0) {
             commands.push(current);
         }
         current = { words: [], redirects: [], heredocs: [] };
+        descriptorStart = null;
     };
     const skipBlanks = (index) => {
         while (index < to && BLANKS.includes(source[index])) {
@@ -168,7 +171,7 @@ function parseCommands(source, from, to) {
             index++;
             for (const heredoc of pending) {
                 const { body, next } = readHeredoc(index, heredoc.delimiter, heredoc.strip);
-                heredoc.command.heredocs.push(body);
+                heredoc.command.heredocs.push({ ...heredoc.operator, body });
                 index = next;
             }
             pending.length = 0;
@@ -188,11 +191,12 @@ function parseCommands(source, from, to) {
             index = readWord(skipBlanks(index + 3)).end;
         }
         else if (source.startsWith('<<', index)) {
+            const start = index;
             index += 2;
             const strip = source[index] === '-';
             const word = readWord(skipBlanks(strip ? index + 1 : index));
             if (word.text !== '') {
-                pending.push({ command: current, delimiter: word.text, strip });
+                pending.push({ command: current, delimiter: word.text, strip, operator: { start, end: word.end } });
             }
             index = word.end;
         }
@@ -203,7 +207,8 @@ function parseCommands(source, from, to) {
             }
             const op = source.slice(index, end);
             const target = readWord(skipBlanks(end));
-            current.redirects.push({ op, target });
+            current.redirects.push({ start: descriptorStart ?? index, end: Math.max(target.end, end), op, target });
+            descriptorStart = null;
             index = Math.max(target.end, end);
         }
         else if (SEPARATORS.includes(char)) {
@@ -214,7 +219,10 @@ function parseCommands(source, from, to) {
             const word = readWord(index);
             // The `2` of `2>&1` is a file descriptor, not an argument.
             const descriptor = /^\d+$/.test(word.text) && (source[word.end] === '>' || source[word.end] === '<');
-            if (!descriptor) {
+            if (descriptor) {
+                descriptorStart = word.start;
+            }
+            else {
                 current.words.push(word);
             }
             index = Math.max(word.end, index + 1);
@@ -317,7 +325,7 @@ function codeOf(command) {
     }
     const heredocLanguage = interpreter !== undefined && (!readsFile || interpreter.client === true) ? interpreter.language : writtenLanguage(command, program);
     if (heredocLanguage !== null) {
-        for (const body of command.heredocs) {
+        for (const { body } of command.heredocs) {
             found.push({ ...body, language: heredocLanguage });
         }
     }
@@ -354,6 +362,20 @@ function collect(source, from, to, depth, into) {
         }
     }
 }
+/*
+ * The simple commands of a shell line, in the order they come: a pipeline, a list and a line each split
+ * apart, a heredoc with the command it feeds. Only the line itself: the script of a `bash -lc '…'` stays a word.
+ */
+export function shellCommands(source) {
+    return parseCommands(source, 0, source.length).map((command) => {
+        const index = programIndex(command.words);
+        const word = command.words[index];
+        return {
+            ...command,
+            program: word === undefined ? null : { index, name: word.text.slice(word.text.lastIndexOf('/') + 1) }
+        };
+    });
+}
 /*
  * The code inside a shell command that is in another language, or a shell script of its own: the
  * script of `bash -lc '…'`, `python3 -c '…'`, `node -e '…'`, `psql -c '…'`, and a heredoc fed to an

package/dist/chat/logic/timeline.d.ts

@@ -1,5 +1,5 @@
 import type { ChatApprovalItem, ChatAssistantItem, ChatCheckpointDiff, ChatItem, ChatQuestionItem, ChatSubagentItem, ChatThinkingItem, ChatToolItem, ChatTurnItem, ChatUserItem, ChatVisual, ChatWorkflow } from '@adecore/agent-contracts';
-import type { ThreadCard } from '../../host.js';
+import type { CommandLook, ThreadCard } from '../../host.js';
 export interface SubagentBranch {
     id: string;
     item: ChatSubagentItem;
@@ -38,6 +38,7 @@ export type TimelineRow = {
     tools: ChatToolItem[];
     summary: string;
     expanded: boolean;
+    look?: CommandLook;
 } | {
     kind: 'work-live';
     id: string;
@@ -111,10 +112,11 @@ interface TimelineOptions {
     expandedSubagents: ReadonlySet<string>;
     activeTurnId: string | null;
     forkedTurns?: ReadonlySet<string>;
+    commandLooks?: readonly CommandLook[];
 }
 export declare function isBlock(row: TimelineRow): boolean;
-export declare function summarizeGroup(tools: ChatToolItem[]): string;
-export declare function summarizeTurn(tools: readonly ChatToolItem[]): string[];
+export declare function summarizeGroup(tools: ChatToolItem[], looks?: readonly CommandLook[]): string;
+export declare function summarizeTurn(tools: readonly ChatToolItem[], looks?: readonly CommandLook[]): string[];
 export declare function agentTurnLabel(turn: ChatTurnItem): string;
 export declare function turnLabel(turn: ChatTurnItem, items?: readonly ChatItem[]): string;
 export declare function findSubagentBranch(rows: readonly TimelineRow[], toolUseId: string): {

package/dist/chat/logic/timeline.js

@@ -1,10 +1,11 @@
 import i18next from 'i18next';
 import { abortedByMachine } from '@adecore/agent-contracts';
 import { formatElapsedShort } from '@adecore/ui/format';
+import { matchCommandLook } from './command-looks.js';
 import { isImageGeneration } from './generated-image.js';
 import { handbackReportOf } from './handback.js';
 import { toolEntry } from './tool-catalog.js';
-import { hasFileChanges, isFileChange } from './tools.js';
+import { hasFileChanges, isFileChange, shellCommand } from './tools.js';
 /*
  * A turn runs in two rhythms. The tool lines are a list and read as one when they sit tight
  * against each other; prose and cards are blocks and need room around them. Where the two meet,
@@ -14,8 +15,42 @@ const BLOCK_KINDS = new Set(['assistant', 'report', 'thinking', 'changed-files',
 export function isBlock(row) {
     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) {
+/*
+ * 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, looks) {
+    let look = null;
+    let group;
+    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, looks) {
+    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) {
@@ -39,25 +74,41 @@ function editedPath(tool) {
  * "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) {
+export function summarizeTurn(tools, looks) {
     // Keyed by the sentence, so its place is where the first call of that kind came.
     const counts = new Map();
+    const add = (key, say, total) => {
+        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();
     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 }));
     }
@@ -163,7 +214,10 @@ function flushTools(buffer, rows, options) {
     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 });
@@ -365,7 +419,7 @@ export function deriveTimelineRows(items, options) {
                 id: `fold-${turnId}`,
                 turn,
                 label: turnLabel(turn, chunk.items),
-                work: summarizeTurn(tools),
+                work: summarizeTurn(tools, options.commandLooks),
                 hiddenCount: folded.length,
                 expanded
             });

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

@@ -1,3 +1,13 @@
-export declare function ShellCommand({ command }: {
+import { type EmbeddedCode } from '../logic/embedded-code.js';
+import { type CommandName } from '../../host.js';
+export interface NamedWord {
+    readonly start: number;
+    readonly end: number;
+    readonly word: string;
+    readonly name: CommandName;
+}
+export declare function ShellCommand({ command, code, names }: {
     command: string;
+    code?: readonly EmbeddedCode[];
+    names?: readonly NamedWord[];
 }): import("react").JSX.Element;

package/dist/chat/ui/ShellCommand.js

@@ -1,9 +1,12 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import { Tooltip } from '@adecore/ui';
 import { EMBEDDED_CODE_LIMIT, SHELL_LANGUAGE, embeddedCode } from '../logic/embedded-code.js';
 import { useChatHost } from '../../host.js';
 import { useCodeTheme } from './code-theme.js';
 import { tokenStyle, useCodeHighlighter } from './highlighter.js';
+const NO_CODE = [];
+const NO_NAMES = [];
 // Rows redraw often and a thread holds many commands, so each is tokenized once per theme.
 const CACHE_LIMIT = 300;
 const cache = new Map();
@@ -36,12 +39,18 @@ function overlay(base, start, end, inner) {
     }
     return [...kept, ...inner].sort((left, right) => left.start - right.start);
 }
-function languagesOf(command) {
-    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, extra) {
+    return extra.length === 0
+        ? embeddedCode(command)
+        : [...embeddedCode(command), ...extra].sort((left, right) => left.start - right.start || right.end - left.end);
+}
+function languagesOf(command, extra) {
+    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, theme, code) {
-    const key = `${theme}\n${command}`;
+function highlight(command, extra, theme, code) {
+    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.
@@ -49,7 +58,7 @@ function highlight(command, theme, code) {
         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;
@@ -64,47 +73,78 @@ function highlight(command, theme, code) {
     }
     return runs;
 }
-function draw(command, runs) {
+/* `command[from, to)` in its colors, or as it is while there are none. */
+function draw(command, runs, from, to) {
+    if (runs === null) {
+        return [command.slice(from, to)];
+    }
     const parts = [];
-    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) : (_jsx("span", { style: style, children: run.content }, run.start)));
-        at = run.end;
+        parts.push(style === undefined ? (content) : (_jsx("span", { style: style, children: content }, start)));
+        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 }) {
+    return (_jsx(Tooltip, { label: named.word, children: _jsxs("span", { className: "inline-flex items-center gap-1 rounded bg-surface-hover px-1 font-sans text-text ring-1 ring-border ring-inset", children: [named.name.icon, named.name.name, _jsx("span", { className: "sr-only", children: named.word })] }) }));
+}
+function drawNamed(command, runs, names) {
+    const parts = [];
+    let at = 0;
+    for (const named of names) {
+        if (named.start < at) {
+            continue;
+        }
+        parts.push(...draw(command, runs, at, named.start), _jsx(Name, { named: named }, `name-${named.start}`));
+        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 }) {
+export function ShellCommand({ command, code = NO_CODE, names = NO_NAMES }) {
     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]);
-    return _jsx(_Fragment, { children: runs === null ? command : draw(command, runs) });
+    }, [highlighter, command, code, theme, custom, runs, tooLong]);
+    if (names.length > 0) {
+        return _jsx(_Fragment, { children: drawNamed(command, runs, names) });
+    }
+    return _jsx(_Fragment, { children: runs === null ? command : draw(command, runs, 0, command.length) });
 }

package/dist/chat/ui/SubagentTimeline.js

@@ -20,6 +20,7 @@ import { FileLinkContext } from './file-links.js';
 import { useChatRow } from '../../state/chats.js';
 import { useChatPreferences } from '../preferences.js';
 import { readingWidthStyle } from '../reading-width.js';
+import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { EmptyState, ContextMenu, Icon } from '@adecore/ui';
 const NO_TURNS = new Set();
@@ -30,6 +31,7 @@ const NO_TURNS = new Set();
 export function SubagentTimeline({ chatId, toolUseId }) {
     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]), () => false);
     const { trail, show } = useSubagentTrail(chatId);
     const [state, setState] = useState(INITIAL_CONVERSATION);
@@ -62,7 +64,13 @@ export function SubagentTimeline({ chatId, toolUseId }) {
             useSubagentSupport.getState().markUnsupported(scope.id);
         }
     }, [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]);
+    const rows = useMemo(() => deriveTimelineRows(state.items, {
+        expandedGroups: groups.ids,
+        expandedTurns: NO_TURNS,
+        expandedSubagents: subagents.ids,
+        activeTurnId: null,
+        commandLooks
+    }), [state.items, groups.ids, subagents.ids, commandLooks]);
     useLayoutEffect(() => {
         const element = scrollRef.current;
         if (element === null) {

package/dist/chat/ui/Timeline.js

@@ -145,8 +145,15 @@ export function Timeline({ chatId, composer, overlay }) {
         if (!order || !items) {
             return [];
         }
-        return deriveTimelineRows(order.map((id) => items[id]), { expandedGroups: groups.ids, expandedTurns: turns.ids, expandedSubagents: subagents.ids, activeTurnId, forkedTurns });
-    }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns]);
+        return deriveTimelineRows(order.map((id) => items[id]), {
+            expandedGroups: groups.ids,
+            expandedTurns: turns.ids,
+            expandedSubagents: subagents.ids,
+            activeTurnId,
+            forkedTurns,
+            commandLooks: host.commandLooks
+        });
+    }, [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/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':