@celljs/ta-web 4.6.1 → 4.8.0

package/src/browser/util/desktop.ts

@@ -0,0 +1,96 @@
+/** What Ta Desktop can do for the page beyond a tab of a browser. */
+export type DesktopFeature = 'webview' | 'debugWebview' | 'showItemInFolder' | 'browserData';
+
+/** The file manager of the system, from Ta Desktop: {@link WebDesktop} of the extension API. */
+export interface DesktopFileManager {
+    /** Node's `process.platform` of the machine: what the file manager is called there. */
+    readonly platform: string;
+    showItemInFolder(path: string): Promise<void>;
+    readonly browserData?: DesktopBrowserData;
+}
+
+/** A profile of the user's Chrome, Edge…, whose sign-ins Ta Desktop can take. */
+export interface DesktopBrowserProfile {
+    id: string;
+    browser: string;
+    name: string;
+}
+
+/** What an import took; `appBound`: cookies only Chrome itself can read (Windows). */
+export interface DesktopBrowserImport {
+    imported: number;
+    skipped: number;
+    appBound: number;
+}
+
+/** The sign-ins of the user's browsers in the browser of Ta: {@link WebBrowserData} of the extension API. */
+export interface DesktopBrowserData {
+    profiles(): Promise<DesktopBrowserProfile[]>;
+    /** After the user said yes in a dialog of the app; `undefined` when they said no. */
+    import(profileId: string): Promise<DesktopBrowserImport | undefined>;
+    clear(): Promise<void>;
+}
+
+/** A command of the DevTools protocol to the page of a `<webview>` of this page, by its getWebContentsId(). */
+export type DebugWebview = (webContentsId: number, method: string, params?: Record<string, unknown>) => Promise<unknown>;
+
+interface DesktopScope {
+    taDesktop?: {
+        features?: unknown;
+        platform?: unknown;
+        showItemInFolder?: unknown;
+        debugWebview?: DebugWebview;
+        browserData?: { profiles?: unknown; import?: unknown; clear?: unknown };
+    };
+}
+
+/**
+ * Ta Desktop gives its window's page `taDesktop` (its preload, apps/ta-desktop): the features it adds to
+ * what a browser can do. A browser, an installed web app and the mobile app have none.
+ */
+export namespace DesktopUtil {
+    export function has(feature: DesktopFeature, scope: object = globalThis): boolean {
+        const features = (scope as DesktopScope).taDesktop?.features;
+        return Array.isArray(features) && features.includes(feature);
+    }
+
+    /** The file manager of the system, when the page is in Ta Desktop. */
+    export function fileManager(scope: object = globalThis): DesktopFileManager | undefined {
+        const desktop = (scope as DesktopScope).taDesktop;
+        const show = desktop?.showItemInFolder;
+        if (!has('showItemInFolder', scope) || typeof show !== 'function') {
+            return undefined;
+        }
+        return Object.freeze({
+            platform: typeof desktop?.platform === 'string' ? desktop.platform : 'unknown',
+            showItemInFolder: (path: string) => Promise.resolve(show(path)).then(() => undefined),
+            browserData: browserData(scope),
+        });
+    }
+
+    /** The sign-ins of the user's browsers, where Ta Desktop can read them (macOS, Windows). */
+    export function browserData(scope: object = globalThis): DesktopBrowserData | undefined {
+        const data = (scope as DesktopScope).taDesktop?.browserData;
+        const { profiles, import: take, clear } = data ?? {};
+        if (!has('browserData', scope) || typeof profiles !== 'function' || typeof take !== 'function' || typeof clear !== 'function') {
+            return undefined;
+        }
+        return Object.freeze({
+            profiles: async () => ((await profiles()) as DesktopBrowserProfile[]) ?? [],
+            import: async (profileId: string) => {
+                const report = (await take(profileId)) as DesktopBrowserImport | { cancelled: true };
+                return 'cancelled' in report ? undefined : report;
+            },
+            clear: async () => {
+                await clear();
+            },
+        });
+    }
+
+    /** `debugWebview` of Ta Desktop; `undefined` elsewhere. */
+    export function debugWebview(scope: object = globalThis): DebugWebview | undefined {
+        const desktop = (scope as DesktopScope).taDesktop;
+        const debug = desktop?.debugWebview;
+        return has('debugWebview', scope) && typeof debug === 'function' ? (webContentsId, method, params) => debug(webContentsId, method, params) : undefined;
+    }
+}

package/src/browser/util/file-drag.spec.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'bun:test';
+import { FileDragUtil } from './file-drag';
+
+/** A DataTransfer as the browser keeps one during a drag. */
+function transfer(): DataTransfer {
+    const data = new Map<string, string>();
+    return {
+        get types() {
+            return [...data.keys()];
+        },
+        setData: (type: string, value: string) => void data.set(type, value),
+        getData: (type: string) => data.get(type) ?? '',
+    } as unknown as DataTransfer;
+}
+
+describe('FileDragUtil', () => {
+    it('puts the files on a drag, and their paths as text', () => {
+        const dataTransfer = transfer();
+        FileDragUtil.set(dataTransfer, { cwd: '/work/app', paths: ['src', 'README.md'] });
+        expect(FileDragUtil.has(dataTransfer)).toBe(true);
+        expect(FileDragUtil.get(dataTransfer)).toEqual({ cwd: '/work/app', paths: ['src', 'README.md'] });
+        expect(dataTransfer.getData('text/plain')).toBe('/work/app/src\n/work/app/README.md');
+    });
+
+    it('reads nothing from other drags', () => {
+        const dataTransfer = transfer();
+        expect(FileDragUtil.has(dataTransfer)).toBe(false);
+        expect(FileDragUtil.get(dataTransfer)).toBeUndefined();
+        dataTransfer.setData(FileDragUtil.TYPE, '{"cwd":1}');
+        expect(FileDragUtil.get(dataTransfer)).toBeUndefined();
+        dataTransfer.setData(FileDragUtil.TYPE, 'not json');
+        expect(FileDragUtil.get(dataTransfer)).toBeUndefined();
+    });
+
+    it('gives the paths inside their machine', () => {
+        expect(FileDragUtil.paths({ cwd: 'ssh://dev/home/me/app', paths: ['src/a.ts', ''] })).toEqual(['/home/me/app/src/a.ts', '/home/me/app']);
+        expect(FileDragUtil.paths({ cwd: 'C:\\work\\app', paths: ['src/a.ts'] })).toEqual(['C:\\work\\app\\src\\a.ts']);
+    });
+
+    it('makes references relative to the conversation when they are inside it', () => {
+        const files = { cwd: '/work/app', paths: ['src/a.ts', 'my notes.md'] };
+        expect(FileDragUtil.references(files, '/work/app')).toBe('@src/a.ts @"my notes.md"');
+        expect(FileDragUtil.references({ cwd: '/work/app/src', paths: ['a.ts'] }, '/work/app')).toBe('@src/a.ts');
+        expect(FileDragUtil.references(files, '/other')).toBe('@/work/app/src/a.ts @"/work/app/my notes.md"');
+        expect(FileDragUtil.references({ cwd: 'ssh://dev/work/app', paths: ['a.ts'] }, '/work/app')).toBe('@/work/app/a.ts');
+        expect(FileDragUtil.references(files, undefined)).toBe('@/work/app/src/a.ts @"/work/app/my notes.md"');
+    });
+});

package/src/browser/util/file-drag.ts

@@ -0,0 +1,78 @@
+import { TaLocation } from '@celljs/ta-protocol';
+import { ComposerUtil } from './composer';
+
+/** Files of a directory dragged from a view (the explorer): {@link WebFileDrag} of the extension API. */
+export interface DraggedFiles {
+    /** The directory they are of: a path of the machine of ta serve, or `ssh://` (TaLocation). */
+    cwd: string;
+    /** Relative to `cwd`, with `/`; '' for `cwd` itself. */
+    paths: string[];
+}
+
+/**
+ * Files on a drag between the views of the page: their own type, read on a drop; and their paths as text,
+ * for what is not of the page (a native field, another app).
+ */
+export namespace FileDragUtil {
+    export const TYPE = 'application/x-ta-files';
+
+    export function set(dataTransfer: DataTransfer, files: DraggedFiles): void {
+        const dragged: DraggedFiles = { cwd: files.cwd, paths: [...files.paths] };
+        dataTransfer.setData(TYPE, JSON.stringify(dragged));
+        dataTransfer.setData('text/plain', paths(dragged).join('\n'));
+    }
+
+    /** Whether a drag holds files: all that `dragover` can tell. */
+    export function has(dataTransfer: Pick<DataTransfer, 'types'>): boolean {
+        return Array.from(dataTransfer.types ?? []).includes(TYPE);
+    }
+
+    /** The files of a drop; undefined when it holds none. */
+    export function get(dataTransfer: Pick<DataTransfer, 'getData'>): DraggedFiles | undefined {
+        try {
+            const value = JSON.parse(dataTransfer.getData(TYPE) || 'null') as Partial<DraggedFiles> | null;
+            if (!value || typeof value.cwd !== 'string' || !Array.isArray(value.paths)) {
+                return undefined;
+            }
+            const list = value.paths.filter((path): path is string => typeof path === 'string');
+            return list.length ? { cwd: value.cwd, paths: list } : undefined;
+        } catch {
+            return undefined;
+        }
+    }
+
+    /** The paths inside their machine, as a terminal there takes them. */
+    export function paths(files: DraggedFiles): string[] {
+        const base = TaLocation.path(files.cwd);
+        const windows = /^[a-zA-Z]:[\\/]|^\\\\/.test(base) && !base.includes('/');
+        const trimmed = base.replace(/[\\/]+$/, '');
+        return files.paths.map(path => {
+            if (!path) {
+                return base;
+            }
+            return windows ? `${trimmed}\\${path.replace(/\//g, '\\')}` : `${trimmed}/${path}`;
+        });
+    }
+
+    /**
+     * The files as `@` references of a conversation in `cwd`: relative to it when they are inside it, on the
+     * same machine; else their paths there.
+     */
+    export function references(files: DraggedFiles, cwd: string | undefined): string {
+        const absolute = paths(files);
+        const sameMachine = cwd !== undefined && TaLocation.host(cwd) === TaLocation.host(files.cwd);
+        const root = cwd === undefined ? '' : TaLocation.path(cwd).replace(/[\\/]+$/, '');
+        return absolute
+            .map((path, index) => {
+                if (files.cwd === cwd) {
+                    return files.paths[index] || '.';
+                }
+                if (sameMachine && root && path.startsWith(`${root}/`)) {
+                    return path.slice(root.length + 1);
+                }
+                return path;
+            })
+            .map(ComposerUtil.reference)
+            .join(' ');
+    }
+}

package/src/browser/util/message.spec.ts

@@ -26,6 +26,8 @@ describe('MessageUtil', () => {
         expect(MessageUtil.basename('/home/me/project/')).toBe('project');
         expect(MessageUtil.shortPath('/home/me/work/project')).toBe('…/work/project');
         expect(MessageUtil.shortPath('/srv')).toBe('/srv');
+        expect(MessageUtil.shortPath('ssh://dev/data/my/workspace')).toBe('dev:…/my/workspace');
+        expect(MessageUtil.shortPath('ssh://dev/srv')).toBe('dev:/srv');
     });
 
     it('finds the entry of a message by its role and time, the newest first', () => {

package/src/browser/util/message.ts

@@ -1,4 +1,5 @@
 import type { SessionMessage, ToolRun } from '@celljs/ta-client';
+import { TaLocation } from '@celljs/ta-protocol';
 
 export interface ContentBlock {
     type: string;
@@ -177,12 +178,14 @@ export namespace MessageUtil {
 
     /** The last two parts of a path: enough to recognize a project. */
     export function shortPath(path: string): string {
-        const parts = path.split(/[\\/]/).filter(Boolean);
-        return parts.length > 2 ? `…/${parts.slice(-2).join('/')}` : path;
+        const remote = TaLocation.parse(path);
+        const parts = (remote ? remote.path : path).split(/[\\/]/).filter(Boolean);
+        const short = parts.length > 2 ? `…/${parts.slice(-2).join('/')}` : remote ? remote.path || '~' : path;
+        return remote ? `${remote.host}:${short}` : short;
     }
 
+    /** The last name of a path, or of an `ssh://` location (TaLocation). */
     export function basename(path: string): string {
-        const parts = path.split(/[\\/]/).filter(Boolean);
-        return parts[parts.length - 1] ?? path;
+        return TaLocation.basename(path);
     }
 }

package/src/browser/util/terminal-text.spec.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'bun:test';
+import { TerminalText } from './terminal-text';
+
+const QR = ['▄▄▄▄▄▄▄▄', '█ ▄▄▄ ██', '█ ███ ▀█', '█▄▄▄▄▄██', '██▀ ▄▀▄█', '█▄▀▀▄ ▀█', '█▀▀▀▀▀▀█', '▀▀▀▀▀▀▀▀'];
+
+describe('TerminalText', () => {
+    it('takes a picture of half blocks out of the text, dark cells true', () => {
+        const { text, art } = TerminalText.art(`Scan with WeChat:\n\n${QR.join('\n')}\n`);
+        expect(text).toBe('Scan with WeChat:');
+        // The dark row above the light margin and the one below it are the terminal's background.
+        expect(art).toHaveLength(QR.length * 2 - 2);
+        expect(art?.[0]).toEqual(new Array(8).fill(false));
+        expect(art?.[1].slice(0, 3)).toEqual([false, true, true]);
+        expect(art?.[2].slice(0, 3)).toEqual([false, true, false]);
+        expect(art?.at(-1)).toEqual(new Array(8).fill(false));
+    });
+
+    it('leaves text without a picture alone, and a short bar is no picture', () => {
+        expect(TerminalText.art('Saved')).toEqual({ text: 'Saved' });
+        expect(TerminalText.art('progress\n████  ')).toEqual({ text: 'progress\n████  ' });
+    });
+
+    it('reads a picture of spaces on black and white, two characters a cell, and drops the escapes of the rest', () => {
+        const dark = '\x1b[40m  \x1b[0m';
+        const light = '\x1b[47m  \x1b[0m';
+        const line = (cells: string) => [...cells].map(cell => (cell === '#' ? dark : light)).join('');
+        const rows = ['#.#.', '.#.#', '##..', '..##', '#..#', '.##.', '####', '....'];
+        const { text, art } = TerminalText.art(`\x1b[1mScan\x1b[22m:\n${rows.map(line).join('\n')}`);
+        expect(text).toBe('Scan:');
+        expect(art).toEqual(rows.map(row => [...row].map(cell => cell === '#')));
+    });
+
+    it('drops the escapes of a terminal', () => {
+        expect(TerminalText.plain('\x1b[31mred\x1b[0m \x1b]8;;https://a.b\x07link\x1b]8;;\x07')).toBe('red link');
+        expect(TerminalText.status('\x1b[32m[git]\x1b[0m ✅ clean')).toEqual({ label: 'git', segments: [{ text: 'clean', tone: 'done' }] });
+    });
+
+    it('draws the dark cells as runs of one row', () => {
+        expect(
+            TerminalText.path([
+                [true, true, false, true],
+                [false, false, false, false],
+            ]),
+        ).toBe('M0 0h2v1h-2zM3 0h1v1h-1z');
+    });
+
+    it('splits a status into its label, segments and tones', () => {
+        expect(TerminalText.status('[微信] ⏳ 登录中...')).toEqual({ label: '微信', segments: [{ text: '登录中...', tone: 'running' }] });
+        expect(TerminalText.status('[微信] ✅ 已连接 | abcd1234... | 🔒')).toEqual({
+            label: '微信',
+            segments: [{ text: '已连接', tone: 'done' }, { text: 'abcd1234...' }, { text: '🔒' }],
+        });
+        expect(TerminalText.status('❌ 已断开 | ❌ 被占用').segments).toEqual([
+            { text: '已断开', tone: 'error' },
+            { text: '被占用', tone: 'error' },
+        ]);
+        expect(TerminalText.status('main ✔')).toEqual({ segments: [{ text: 'main', tone: 'done' }] });
+        expect(TerminalText.status('indexing 3/10')).toEqual({ segments: [{ text: 'indexing 3/10' }] });
+    });
+});

package/src/browser/util/terminal-text.ts

@@ -0,0 +1,223 @@
+/** The tone of a status, from the sign a terminal extension puts before it. */
+export type StatusTone = 'running' | 'done' | 'error' | 'waiting';
+
+export interface StatusSegment {
+    text: string;
+    tone?: StatusTone;
+}
+
+/** A status of an extension (`setStatus`), in its parts: `[WeChat] ✅ connected | abc` is a label and two segments. */
+export interface StatusParts {
+    label?: string;
+    segments: StatusSegment[];
+}
+
+/**
+ * Text that pi extensions write for a terminal (pi's TUI), shown in a page: without the escapes of the
+ * terminal, with the pictures they draw with characters (a QR code to sign in) drawn, and the signs of their
+ * status line as tones.
+ */
+export namespace TerminalText {
+    /** Half blocks, as qrcode-terminal's small mode: the character is the light of two cells, one above the other. */
+    const CELLS: Record<string, [boolean, boolean]> = { '█': [true, true], '▀': [true, false], '▄': [false, true], ' ': [false, false] };
+    const HALF_BLOCKS = /^[█▀▄ ]+$/;
+    // biome-ignore lint/suspicious/noControlCharactersInRegex: the escapes of a terminal are what is matched
+    const ESCAPES = /\x1b\[[0-?]*[ -/]*[@-~]|\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)|\x1b[@-Z\\-_]/g;
+    // biome-ignore lint/suspicious/noControlCharactersInRegex: the colours of a terminal
+    const SGR = /\x1b\[([0-9;]*)m/g;
+    /** Fewer lines than this are not a picture (a bar, a rule). */
+    const MIN_ART_LINES = 8;
+    const TONES: [RegExp, StatusTone][] = [
+        [/^(?:⏳|⌛|🔄)\uFE0F?\s*/u, 'running'],
+        [/^(?:✅|✔|☑)\uFE0F?\s*/u, 'done'],
+        [/^(?:❌|✖|⛔|🚫)\uFE0F?\s*/u, 'error'],
+        [/^(?:⚠)\uFE0F?\s*/u, 'waiting'],
+    ];
+
+    /** The text without the escapes of a terminal (colours, styles, links, titles): a page draws its own. */
+    export function plain(text: string): string {
+        return text.replace(ESCAPES, '');
+    }
+
+    /** A line of half blocks as its two rows of cells, dark ones true. */
+    function halfBlocks(line: string): boolean[][] | undefined {
+        const text = plain(line);
+        if (!HALF_BLOCKS.test(text) || !/[█▀▄]/.test(text)) {
+            return undefined;
+        }
+        const top: boolean[] = [];
+        const bottom: boolean[] = [];
+        for (const char of text) {
+            const [upper, lower] = CELLS[char];
+            top.push(!upper);
+            bottom.push(!lower);
+        }
+        return [top, bottom];
+    }
+
+    /**
+     * A line of spaces on black and white backgrounds, as qrcode-terminal's large mode, as its row of cells:
+     * dark ones true, a cell for each character.
+     */
+    function backgrounds(line: string): boolean[][] | undefined {
+        if (!line.includes('\x1b[') || plain(line).trim()) {
+            return undefined;
+        }
+        const row: boolean[] = [];
+        let dark: boolean | undefined;
+        let at = 0;
+        const take = (until: number) => {
+            for (let i = at; i < until; i++) {
+                if (dark === undefined) {
+                    return false;
+                }
+                row.push(dark);
+            }
+            return true;
+        };
+        for (const match of line.matchAll(SGR)) {
+            if (!take(match.index)) {
+                return undefined;
+            }
+            at = match.index + match[0].length;
+            for (const code of (match[1] || '0').split(';').map(Number)) {
+                if (code === 40 || code === 100) {
+                    dark = true;
+                } else if (code === 47 || code === 107) {
+                    dark = false;
+                } else if (code === 0 || code === 49) {
+                    dark = undefined;
+                }
+            }
+        }
+        if (!take(line.length) || !row.length) {
+            return undefined;
+        }
+        return [row];
+    }
+
+    /** The longest run of lines that `cells` reads, as rows of cells, and where it is. */
+    function longest(lines: string[], cells: (line: string) => boolean[][] | undefined): { start: number; end: number; rows: boolean[][] } | undefined {
+        let best: { start: number; end: number; rows: boolean[][] } | undefined;
+        let run: { start: number; end: number; rows: boolean[][] } | undefined;
+        lines.forEach((line, index) => {
+            const read = cells(line);
+            if (!read) {
+                run = undefined;
+                return;
+            }
+            run = run ? { ...run, end: index, rows: [...run.rows, ...read] } : { start: index, end: index, rows: read };
+            if (!best || run.end - run.start > best.end - best.start) {
+                best = run;
+            }
+        });
+        return best && best.end - best.start + 1 >= MIN_ART_LINES ? best : undefined;
+    }
+
+    /** Two characters make a square cell on a terminal: rows whose characters all go in pairs are halved. */
+    function squared(rows: boolean[][]): boolean[][] {
+        const paired = rows.every(row => row.length % 2 === 0 && row.every((cell, x) => x % 2 === 0 || cell === row[x - 1]));
+        return paired ? rows.map(row => row.filter((_, x) => x % 2 === 0)) : rows;
+    }
+
+    /** Rows of one width: a shorter one is light at its end, as the background of a terminal. */
+    function even(rows: boolean[][]): boolean[][] {
+        const width = Math.max(...rows.map(row => row.length));
+        return rows.map(row => [...row, ...new Array<boolean>(width - row.length).fill(false)]);
+    }
+
+    /**
+     * Without the rows and columns at its edges that are dark all along: the background of the terminal around
+     * the light margin a QR code draws, not part of the picture.
+     */
+    function trimmed(rows: boolean[][]): boolean[][] {
+        let top = 0;
+        let bottom = rows.length;
+        while (top < bottom && rows[top].every(Boolean)) {
+            top++;
+        }
+        while (bottom > top && rows[bottom - 1].every(Boolean)) {
+            bottom--;
+        }
+        const kept = rows.slice(top, bottom);
+        const width = kept[0]?.length ?? 0;
+        const dark = (x: number) => kept.every(row => row[x]);
+        let left = 0;
+        let right = width;
+        while (left < right && dark(left)) {
+            left++;
+        }
+        while (right > left && dark(right - 1)) {
+            right--;
+        }
+        return kept.map(row => row.slice(left, right));
+    }
+
+    /**
+     * The text without the picture in it, and without escapes; and the picture as rows of cells, dark ones true.
+     * A picture is the longest run of lines of half blocks, or of spaces on black and white: how a terminal
+     * extension draws a QR code. Its light is what a dark terminal shows light.
+     */
+    export function art(text: string): { text: string; art?: boolean[][] } {
+        const lines = text.split('\n');
+        const blocks = longest(lines, halfBlocks);
+        const colours = longest(lines, backgrounds);
+        const found = blocks && (!colours || blocks.end - blocks.start >= colours.end - colours.start) ? blocks : colours;
+        if (!found) {
+            return { text: plain(text) };
+        }
+        const rest = plain([...lines.slice(0, found.start), ...lines.slice(found.end + 1)].join('\n')).trim();
+        const art = trimmed(even(found === colours ? squared(found.rows) : found.rows));
+        return art.length ? { text: rest, art } : { text: plain(text) };
+    }
+
+    /** The picture as an SVG path of its dark cells, one unit each. */
+    export function path(art: boolean[][]): string {
+        let d = '';
+        art.forEach((row, y) => {
+            let x = 0;
+            while (x < row.length) {
+                if (!row[x]) {
+                    x++;
+                    continue;
+                }
+                const from = x;
+                while (x < row.length && row[x]) {
+                    x++;
+                }
+                d += `M${from} ${y}h${x - from}v1h-${x - from}z`;
+            }
+        });
+        return d;
+    }
+
+    /** A status line in its parts: a leading `[label]`, segments split by ` | `, and a sign at the start of one as its tone. */
+    export function status(text: string): StatusParts {
+        let rest = plain(text).trim();
+        const labelled = /^\[([^\]]+)\]\s*/.exec(rest);
+        const label = labelled?.[1].trim();
+        if (labelled) {
+            rest = rest.slice(labelled[0].length);
+        }
+        const segments = rest
+            .split(/\s+\|\s+/)
+            .map(part => part.trim())
+            .filter(Boolean)
+            .map(part => {
+                for (const [sign, tone] of TONES) {
+                    if (sign.test(part)) {
+                        return { text: part.replace(sign, ''), tone };
+                    }
+                }
+                // Or after it, as `main ✔`; a sign alone stays, as it is all there is to read.
+                const signed = /\s+(\S+)$/u.exec(part);
+                for (const [sign, tone] of signed ? TONES : []) {
+                    if (signed && sign.test(signed[1])) {
+                        return { text: part.slice(0, signed.index), tone };
+                    }
+                }
+                return { text: part };
+            });
+        return label ? { label, segments } : { segments };
+    }
+}

package/src/browser/util/tool.spec.ts

@@ -13,6 +13,18 @@ describe('ToolUtil', () => {
         expect(ToolUtil.summary('read', { path: 'a.ts', offset: 10, limit: 5 }).target).toBe('a.ts:10-14');
         expect(ToolUtil.summary('start_task', { title: 'Fix the build', instructions: 'long' }).target).toBe('Fix the build');
         expect(ToolUtil.summary('mcp_search', { limit: 3, query: 'cats' })).toEqual({ verb: undefined, name: 'mcp_search', target: 'cats', code: false });
+        expect(ToolUtil.summary('agent_tool', { title: '`npm test`', kind: 'execute', target: 'npm test', tool: 'Bash' })).toEqual({
+            verb: 'ta.tool.verb.bash',
+            name: 'Bash',
+            target: 'npm test',
+            code: true,
+        });
+        expect(ToolUtil.summary('agent_tool', { title: 'Skill', kind: 'other', target: 'Skill', tool: 'Skill' })).toEqual({
+            verb: undefined,
+            name: 'Skill',
+            target: '',
+            code: false,
+        });
         expect(ToolUtil.scriptTitle('// @options: {}\n// read the config\nawait tools.read({})')).toBe('read the config');
         expect(ToolUtil.scriptTitle('const a = 1;\nreturn a')).toBe('const a = 1;');
     });

package/src/browser/util/tool.ts

@@ -61,6 +61,16 @@ const VERBS: Record<string, MessageId> = {
     stop_task: 'ta.tool.verb.stopTask',
 };
 
+/** The verbs of the kinds of calls ACP agents make (`agent_tool` of @celljs/ta-agents). */
+const AGENT_VERBS: Record<string, MessageId> = {
+    execute: 'ta.tool.verb.bash',
+    read: 'ta.tool.verb.read',
+    edit: 'ta.tool.verb.edit',
+    delete: 'ta.tool.verb.edit',
+    move: 'ta.tool.verb.edit',
+    search: 'ta.tool.verb.grep',
+};
+
 const TARGET_CHARS = 160;
 
 function str(value: unknown): string {
@@ -105,6 +115,13 @@ export namespace ToolUtil {
                 return { verb, name, target: scriptTitle(str(args.code)), code: false };
             case 'start_task':
                 return { verb, name, target: str(args.title), code: false };
+            case 'agent_tool': {
+                // A call another agent made with its own tool: its kind, and what it was on.
+                const kind = str(args.kind);
+                const tool = str(args.tool) || str(args.title) || name;
+                const target = line(str(args.target) || str(args.title));
+                return { verb: AGENT_VERBS[kind], name: tool, target: target === tool ? '' : target, code: kind === 'execute' || kind === 'search' };
+            }
             case 'get_task':
             case 'stop_task':
             case 'message_task':

package/src/browser/workbench-protocol.ts

@@ -4,6 +4,8 @@ import type {
     TaAuthServer,
     TaPackageServer,
     TaRelayServer,
+    TaRemoteEvent,
+    TaRemoteServer,
     TaServer,
     TaServerInfo,
     TaSessionInfo,
@@ -42,6 +44,7 @@ export interface TaWorkbench {
     readonly packages: TaPackageServer;
     readonly auth: TaAuthServer;
     readonly relay: TaRelayServer;
+    readonly remote: TaRemoteServer;
     subscribe(listener: (state: WorkbenchState) => void): () => void;
     /** Signs in with the token of the URL fragment (`ta serve --web`) or the one this page used before. */
     start(): Promise<void>;
@@ -63,4 +66,9 @@ export interface TaWorkbench {
     onExtensionData(listener: (name: string, keys: string[], cwd?: string) => void): () => void;
     /** What happens during the sign-ins of this page (TaAuthServer.login); the listener stays across reconnections. */
     onAuthEvent(listener: (loginId: string, event: TaAuthEvent) => void): () => void;
+    /**
+     * What happens with the remote machines (TaRemoteServer.watch, which the page calls on each connection):
+     * the prompts that wait come again as `prompt` events after a reconnection. The listener stays.
+     */
+    onRemoteEvent(listener: (event: TaRemoteEvent) => void): () => void;
 }