@asrunjs/asrun 0.12.0 → 0.13.0

package/dist/ui/server/ai-stream.d.ts

@@ -53,8 +53,8 @@ export declare class AiStreamFormatter {
     /** A call the agent has started and not finished yet (Claude reports both ends). */
     private start;
     /**
-     * The end of a call, plus the first lines of what it returned. `fallback` is for a CLI that reports a call only when
-     * it is over (OpenCode), which still knows when it started.
+     * The end of a call, plus what it returned. `fallback` is for a CLI that reports a call only when it is over
+     * (OpenCode), which still knows when it started.
      */
     private finishCall;
     /** Said once per run, after the first tool call that Claude Code's sandbox refused (nobody is there to approve it). */

package/dist/ui/server/ai-stream.js

@@ -1,10 +1,21 @@
+import { expandEscapedText } from '../shared/log-text.js';
 const MAX_DETAIL = 180;
 const MAX_ERROR = 300;
 const MAX_REASONING = 2000;
-/** A call's output is a preview, not a transcript: the first few lines say what it did without flooding the log. */
-const PREVIEW_LINES = 6;
-const PREVIEW_LINE = 200;
-const PREVIEW_CHARS = 500;
+/** The argument of a call is kept whole, within reason: the log opens it instead of a truncated summary. */
+const MAX_INPUT = 4000;
+/**
+ * An edit carries the snippet it replaces and the one it writes, or the whole content of a small file. Keeping more of
+ * it is what lets the log draw a diff instead of a JSON blob cut in the middle.
+ */
+const MAX_INPUT_EDIT = 20_000;
+/** Tools whose argument is a change to a file (the same family the log draws as a diff). */
+const EDIT_TOOL = /^(edit|multiedit|write|notebookedit|patch|applypatch)$/;
+/** What a call returned is kept up to this, so the log can show it all; a runaway dump still has an end. */
+const MAX_RESULT_CHARS = 20_000;
+const MAX_RESULT_LINES = 400;
+/** One line longer than this is a minified document or a data URL: its tail says nothing more. */
+const MAX_RESULT_LINE = 2000;
 const ANSI = /\u001b\[[0-9;?]*[ -/]*[@-~]/g;
 const SANDBOX_ERROR = /listen EPERM|outside of the sandbox|sandbox/i;
 /** A saved login is a password (AGENTS.md F5): never copy what a call read from `.auth` into the log. */
@@ -14,8 +25,15 @@ const oneLine = (value, max) => {
     return text.length > max ? `${text.slice(0, max - 1)}…` : text;
 };
 const cap = (text, max) => (text.length > max ? `${text.slice(0, max - 1)}…` : text);
+/** Keeps a body whole up to `max`, and says how much it left out instead of cutting it silently. */
+function capBody(text, max) {
+    if (text.length <= max)
+        return text;
+    const rest = text.length - max;
+    return `${text.slice(0, max)}\n… (${rest} more character${rest === 1 ? '' : 's'} not shown)`;
+}
 const seconds = (ms) => (ms < 90_000 ? `${Math.round(ms / 1000)} s` : `${(ms / 60_000).toFixed(1)} min`);
-/** The first thing a piece of code does, for a tool whose only argument is the code (`execute`). */
+/** The first thing a piece of code does, for code that makes no tool call of its own (`await page.goto(...)`). */
 function firstStatement(code) {
     const line = code
         .split('\n')
@@ -23,12 +41,98 @@ function firstStatement(code) {
         .find((text) => text !== '' && !text.startsWith('//') && !text.startsWith('#'));
     return line ?? '';
 }
+/** `tools["playwright-test"]`, `tools.playwright.mcp`, `tools['x']['y']`: one step into the tools object. */
+const ACCESSOR = /^\s*(?:\.\s*([A-Za-z0-9_$]+)|\[\s*(['"`])((?:\\.|(?!\2)[^\\])*)\2\s*\])/;
+function stepInto(text) {
+    const match = ACCESSOR.exec(text);
+    if (!match)
+        return null;
+    return { value: match[1] ?? match[3], length: match[0].length };
+}
+/** How much of a call's arguments is read to name the thing it touched. */
+const SUMMARY_ARGS = 600;
+/** The argument that says most about a call, in the order a person would look for it: the place it touched, then the
+ * intent it was given for. */
+const ARG_KEYS = [
+    'url',
+    'path',
+    'file_path',
+    'filePath',
+    'filename',
+    'element',
+    'selector',
+    'pattern',
+    'query',
+    'intent',
+    'description',
+    'name',
+    'text',
+];
+/**
+ * The calls a code-mode `execute` makes on the tools it is given
+ * (`tools["playwright-test"].browser_navigate({url: "..."})`). The code is the only thing that says what such a call
+ * did: the tool `execute` itself names nothing.
+ */
+function nestedCalls(code) {
+    const calls = [];
+    let from = 0;
+    for (;;) {
+        const at = code.indexOf('tools', from);
+        if (at < 0)
+            break;
+        from = at + 'tools'.length;
+        // `prototype.tools[...]` is somebody else's object, not the code mode's own.
+        if (at > 0 && /[A-Za-z0-9_$.]/.test(code[at - 1]))
+            continue;
+        const namespace = stepInto(code.slice(from));
+        if (!namespace)
+            continue;
+        const tool = stepInto(code.slice(from + namespace.length));
+        if (!tool)
+            continue;
+        const callAt = from + namespace.length + tool.length;
+        const open = /^\s*\(/.test(code.slice(callAt)) ? code.indexOf('(', callAt) : -1;
+        if (open < 0)
+            continue;
+        calls.push({ name: tool.value, args: code.slice(open + 1, open + 1 + SUMMARY_ARGS) });
+        from = open + 1;
+    }
+    return calls;
+}
+/** The first argument of a call that says what it touched: the URL, the element, the file, the intent. */
+function firstArgument(args) {
+    const found = new Map();
+    for (const match of args.matchAll(/(['"]?)([A-Za-z_$][\w$]*)\1\s*:\s*(['"`])((?:\\.|(?!\3)[^\\])*?)\3/g)) {
+        if (!found.has(match[2]))
+            found.set(match[2], match[4].replace(/\\(['"`\\])/g, '$1'));
+    }
+    for (const key of ARG_KEYS) {
+        const value = found.get(key);
+        if (value && value.trim())
+            return oneLine(value, MAX_DETAIL);
+    }
+    return '';
+}
+/**
+ * What a code-mode call does, in one line: `browser_navigate(http://…)`, or the code's first statement when it makes no
+ * tool call. The whole code opens from the call's card when the line is not enough.
+ */
+function codeSummary(code) {
+    const calls = nestedCalls(code);
+    const [call] = calls;
+    const summary = call ? `${call.name}(${firstArgument(call.args)})` : oneLine(firstStatement(code), MAX_DETAIL);
+    const extra = calls.length - 1;
+    if (extra > 0)
+        return cap(`${summary} +${extra} more call${extra === 1 ? '' : 's'}`, MAX_DETAIL);
+    return cap(summary, MAX_DETAIL);
+}
 /** `mcp__playwright-test__browser_click` -> `browser_click`. */
 const toolName = (name) => name.replace(/^mcp__[^_]+(?:-[^_]+)*__/, '');
 /**
  * What the call is about, in a few words: the intent the agent gave, or the argument that names the thing it touched.
  * The names differ per CLI and per tool (`file_path` for Claude, `path` for OpenCode; `pattern` for glob and grep;
- * `code` for a code-mode `execute`), so every one of them is looked at.
+ * `code` for a code-mode `execute`), so every one of them is looked at. This is the log's one line; the whole argument
+ * travels next to it (`fullInput`) and is opened on demand.
  */
 function describe(input) {
     if (!input || typeof input !== 'object')
@@ -51,45 +155,100 @@ function describe(input) {
     ].find((name) => typeof args[name] === 'string' && args[name].trim() !== '');
     if (key)
         return oneLine(args[key], MAX_DETAIL);
+    // A patch names its file inside the text, and the text itself would fill the whole line with diff noise.
+    const patch = args.patchText ?? args.patch_text ?? args.patch ?? args.diff ?? args.input;
+    if (typeof patch === 'string') {
+        const file = /^\+\+\+ b\/(.+)$/m.exec(patch)?.[1] ?? /^\*\*\* (?:Update|Add|Delete) File: (.+)$/m.exec(patch)?.[1];
+        if (file)
+            return oneLine(file.trim(), MAX_DETAIL);
+    }
     if (typeof args.code === 'string')
-        return oneLine(firstStatement(args.code), MAX_DETAIL);
+        return codeSummary(args.code);
     // Nothing known: the longest string still tells more than the bare tool name.
     const longest = Object.values(args)
         .filter((value) => typeof value === 'string')
         .sort((a, b) => b.length - a.length)[0];
     return longest ? oneLine(longest, MAX_DETAIL) : '';
 }
-const callOf = (name, input) => ({
-    name: toolName(name),
-    detail: describe(input),
-    ok: true,
-    pending: true,
-});
+/**
+ * The whole call, as the log opens it: the code or the command as written, else the arguments as JSON. One short
+ * argument that the summary already shows is not worth a second copy of the same words.
+ */
+function fullInput(input, detail, tool) {
+    if (!input || typeof input !== 'object')
+        return undefined;
+    const args = input;
+    const edit = EDIT_TOOL.test(tool.toLowerCase().replace(/[_-]/g, ''));
+    const max = edit ? MAX_INPUT_EDIT : MAX_INPUT;
+    if (typeof args.code === 'string' && args.code.trim())
+        return capBody(args.code.trimEnd(), max);
+    if (typeof args.command === 'string' && args.command.trim())
+        return capBody(args.command.trimEnd(), max);
+    // One short argument that the summary already shows is not worth a second copy of the same words; anything longer
+    // than the summary (a patch, a file's content) or anything more (a window, a flag) is worth opening. An edit always
+    // keeps its argument: that is what the log draws as a diff.
+    const named = Object.entries(args).filter(([, value]) => value !== undefined && value !== null && String(value).trim() !== '');
+    const only = named.length === 1 ? named[0][1] : undefined;
+    if (!edit && typeof only === 'string' && only.trim().length <= MAX_DETAIL && oneLine(only, MAX_DETAIL) === detail) {
+        return undefined;
+    }
+    try {
+        const json = JSON.stringify(args, null, 2);
+        return json && json !== '{}' ? capBody(json, max) : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+const callOf = (name, input) => {
+    const detail = describe(input);
+    const full = fullInput(input, detail, name);
+    return {
+        name: toolName(name),
+        detail,
+        ...(full && full !== detail && { input: full }),
+        ok: true,
+        pending: true,
+    };
+};
 const labelText = (call) => (call.detail ? `${call.name}: ${call.detail}` : call.name);
 /**
- * The first lines of what a call returned, with the colors a shell put in it. Long output keeps its head only: the
- * point is to see what happened, not to copy a file into the log.
+ * A JSON result is kept with the indentation a person reads: a minified document is one endless line, which no reader
+ * and no line cap can handle. Anything that is not JSON comes back as it was.
+ */
+function prettyJsonText(text) {
+    if (!text.startsWith('{') && !text.startsWith('['))
+        return text;
+    try {
+        return JSON.stringify(JSON.parse(text), null, 2);
+    }
+    catch {
+        return text;
+    }
+}
+/**
+ * What a call returned, whole: the log opens one call and reads all of it. With the colors the shell put in it. A
+ * runaway dump is still cut at a point a person can come back from, and the line left out says how much it was.
  */
-function previewText(value) {
-    const text = (typeof value === 'string' ? value : value == null ? '' : String(value))
-        .replace(/\r\n?/g, '\n')
-        .replace(/\t/g, '  ')
-        .trim();
+function resultText(value) {
+    const raw = (typeof value === 'string' ? value : value == null ? '' : String(value)).replace(/\r\n?/g, '\n');
+    // A result that is a JSON string of its own text is decoded first: nobody reads `\n` as a line break in their head.
+    const text = prettyJsonText(expandEscapedText(raw).replace(/\t/g, '  ').trim());
     if (!text)
         return null;
     const lines = text.split('\n');
     const kept = [];
     let chars = 0;
     for (const line of lines) {
-        if (kept.length >= PREVIEW_LINES || chars >= PREVIEW_CHARS)
+        if (kept.length >= MAX_RESULT_LINES || chars >= MAX_RESULT_CHARS)
             break;
         // A cut line loses its colors, so a half escape sequence cannot bleed into the rest of the block.
-        const shown = line.length > PREVIEW_LINE ? oneLine(line.replace(ANSI, ''), PREVIEW_LINE) : line;
+        const shown = line.length > MAX_RESULT_LINE ? oneLine(line.replace(ANSI, ''), MAX_RESULT_LINE) : line;
         kept.push(shown);
         chars += shown.length;
     }
     const rest = lines.length - kept.length;
-    return kept.join('\n') + (rest > 0 ? `\n… (${rest} more line${rest === 1 ? '' : 's'})` : '');
+    return kept.join('\n') + (rest > 0 ? `\n… (${rest} more line${rest === 1 ? '' : 's'} not shown)` : '');
 }
 const HANDOFF_CFG = '__handoffCfg';
 const HANDOFF_CARD = /handoff-card\.js/;
@@ -251,12 +410,12 @@ export class AiStreamFormatter {
     /** A call the agent has started and not finished yet (Claude reports both ends). */
     start(id, call) {
         const now = Date.now();
-        this.pending.set(id, { name: call.name, detail: call.detail, startedAt: now });
+        this.pending.set(id, { name: call.name, detail: call.detail, input: call.input, startedAt: now });
         return [{ kind: 'tool', at: now, data: `>> ${labelText(call)}`, tool: call }];
     }
     /**
-     * The end of a call, plus the first lines of what it returned. `fallback` is for a CLI that reports a call only when
-     * it is over (OpenCode), which still knows when it started.
+     * The end of a call, plus what it returned. `fallback` is for a CLI that reports a call only when it is over
+     * (OpenCode), which still knows when it started.
      */
     finishCall(id, ok, output, fallback) {
         const now = Date.now();
@@ -266,6 +425,7 @@ export class AiStreamFormatter {
             this.waitingForUser = null;
         const name = call?.name ?? fallback?.name ?? 'tool';
         const detail = call?.detail ?? fallback?.detail ?? '';
+        const input = call?.input ?? fallback?.input;
         const startedAt = call?.startedAt ?? fallback?.startedAt;
         const took = startedAt ? seconds(now - startedAt) : undefined;
         const label = labelText({ name, detail });
@@ -275,7 +435,7 @@ export class AiStreamFormatter {
                 kind: 'tool',
                 at: now,
                 data: `${ok ? 'ok' : 'FAILED'}: ${label}${took ? ` after ${took}` : ''}`,
-                tool: { name, detail, ok, ...(took && { took }) },
+                tool: { name, detail, ...(input && { input }), ok, ...(took && { took }) },
             },
         ];
         if (!ok) {
@@ -285,9 +445,9 @@ export class AiStreamFormatter {
             return parts;
         }
         // A saved login is a password: what a call read from `.auth` never goes into the log.
-        const preview = SECRET_PATH.test(detail) ? null : previewText(output);
-        if (preview)
-            parts.push({ kind: 'result', at: now, data: preview });
+        const result = SECRET_PATH.test(detail) ? null : resultText(output);
+        if (result)
+            parts.push({ kind: 'result', at: now, data: result });
         return parts;
     }
     /** Said once per run, after the first tool call that Claude Code's sandbox refused (nobody is there to approve it). */

package/dist/ui/shared/log-text.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Text of a tool call, as the log can show it. A tool that answers with a JSON string of its own text (`"…\n…"`, which
+ * is what an MCP result arrives as) is unreadable as escapes: the line is decoded here, once, for both the server that
+ * stores it and the page that renders what an older run already stored.
+ */
+/**
+ * One line of a result. If the whole line is a JSON string literal with escapes in it, the text it holds comes back —
+ * `"a\nb"` becomes two lines; a plain `"OK"` or a sentence in quotes keeps its quotes. Two rounds cover a value that
+ * was serialized twice, which is as deep as tools go.
+ */
+export declare function expandEscapedLine(line: string): string;
+/** The whole result, line by line (`resultText` writes it this way on the server). */
+export declare function expandEscapedText(text: string): string;

package/dist/ui/shared/log-text.js

@@ -0,0 +1,45 @@
+/**
+ * Text of a tool call, as the log can show it. A tool that answers with a JSON string of its own text (`"…\n…"`, which
+ * is what an MCP result arrives as) is unreadable as escapes: the line is decoded here, once, for both the server that
+ * stores it and the page that renders what an older run already stored.
+ */
+/** A string literal that carries an escape: `\n`, `\t`, `\"`, `\\`, `\u001b`. Plain quotes are left alone. */
+const ESCAPED = /\\(?:[nrtbfv"'\\/]|u[0-9a-fA-F]{4})/;
+/**
+ * One line of a result. If the whole line is a JSON string literal with escapes in it, the text it holds comes back —
+ * `"a\nb"` becomes two lines; a plain `"OK"` or a sentence in quotes keeps its quotes. Two rounds cover a value that
+ * was serialized twice, which is as deep as tools go.
+ */
+export function expandEscapedLine(line) {
+    let text = line;
+    for (let depth = 0; depth < 3; depth += 1) {
+        const trimmed = text.trim();
+        if (trimmed.length < 2 || !trimmed.startsWith('"') || !trimmed.endsWith('"'))
+            break;
+        if (!ESCAPED.test(trimmed))
+            break;
+        let parsed;
+        try {
+            parsed = JSON.parse(trimmed);
+        }
+        catch {
+            break;
+        }
+        if (typeof parsed !== 'string')
+            break;
+        // The indentation a log line arrived with stays in front of what it turned into.
+        const indent = /^\s*/.exec(text)?.[0] ?? '';
+        text = parsed
+            .split('\n')
+            .map((part) => `${indent}${part}`)
+            .join('\n');
+    }
+    return text;
+}
+/** The whole result, line by line (`resultText` writes it this way on the server). */
+export function expandEscapedText(text) {
+    return text
+        .split('\n')
+        .map((line) => expandEscapedLine(line))
+        .join('\n');
+}

package/dist/ui/shared/types.d.ts

@@ -67,7 +67,7 @@ export type ResultState = 'ready' | 'needs-input';
 /**
  * How one block of an AI job's log is presented. Absent for the plain output of every other job, which stays raw.
  * `markdown`: what the agent said; `reasoning`: what it was thinking (not a result); `tool`: one call, started or
- * finished; `result`: the first lines of a call's output; `error` / `hint`: what failed and what to do about it;
+ * finished; `result`: what a call returned (whole, up to a cap); `error` / `hint`: what failed and what to do about it;
  * `meta`: anything else a person should read (the waiting line, noise the CLI printed).
  */
 export type JobChunkKind = 'tool' | 'result' | 'reasoning' | 'markdown' | 'error' | 'hint' | 'meta';
@@ -76,6 +76,11 @@ export interface JobChunkTool {
     name: string;
     /** What the call is about (the file, the command, the intent); empty when the CLI gave nothing telling. */
     detail: string;
+    /**
+     * The whole argument the call was made with (its code, its command, the rest as JSON), so the log can open one call
+     * and show it in full. Absent when the call gave nothing beyond `detail`, which a saved login's path never is.
+     */
+    input?: string;
     ok: boolean;
     /** Still running: Claude reports the start of a call, OpenCode only its end. */
     pending?: boolean;

package/docs/web-ui.md

@@ -170,10 +170,24 @@ cancelled there. Opening it shrinks the page instead of covering it.
   job it clashes with. A run that says nothing for 10 minutes — 15 while a handoff card waits for a person — is stopped
   and its log says why; see [troubleshooting](./troubleshooting.md#ai-steps).
 
-- An AI job's log is structured: a timestamp, one line per tool call (name, what it touched, how long it took), the
-  first lines of what it returned with the colors the command printed, the agent's thinking dimmed while **Thinking**
-  is ticked, and its messages rendered as Markdown. Long output is a preview with a count. The same text is kept in
-  `.tmp/ui-jobs/`.
+- An AI job's log is structured: a timestamp, one line per tool call (name, what it touched, how long it took), what
+  that call returned with the colors the command printed, the agent's thinking dimmed while **Thinking** is ticked, and
+  its messages rendered as Markdown. Every call is a card: closed it shows the first lines of what came back, and
+  clicking it opens the whole argument (the code it ran, the command) and the whole output, each with a **Copy**. The
+  line itself names the call in one look — `browser_navigate(http://…)` for code that drives a browser tool. **Expand
+  all** opens every card of the run at once; **Wrap lines** applies to the opened text too. A message of the agent has
+  **Copy markdown**, which takes the source as it wrote it. Colors are mapped onto the theme (`lib/ansi.ts`), because a
+  shell's VGA blue is unreadable on the dark pane. The same text, whole, is kept in `.tmp/ui-jobs/`.
+- A call that answered with JSON is drawn as a tree, in the log's colors, with every node folding on its own
+  (**Expand nodes** / **Collapse nodes** open and close them all, and the section's **Copy** takes the indented
+  document). A document bigger than a tree should draw, or a result that had to be cut short, stays text instead. A tool
+  that answers with a JSON string of its own text (`"\nRunning 1 test…"`) is decoded to lines first, so no escape is
+  read as `\n`.
+- An edit (`edit`, `multi-edit`, `write`, `patch`, …) is drawn as a diff: the file, `+N −M` in the card's line and in
+  the diff's own header, then the lines themselves — removed in red, added in green, long stretches of unchanged lines
+  folded away. **Copy** takes the diff as a unified patch. **Raw** switches back to the arguments the agent passed. An
+  edit's arguments are kept longer than other calls' (20 000 characters) so a whole small file can be diffed; past
+  that the card falls back to the plain argument.
 - When an AI job ends, a thin **What to do next** bar appears under the log (or **Details** opens it in a sheet):
   open questions with an answer box and **Use the suggested defaults**, the confirmations the exploration marked, and
   the next action (**Generate spec**, **Open Run tests**, **View spec**, **Re-explore**). A run that ends with

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asrunjs/asrun",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Multi-profile end-to-end test suite: plain-language cases, AI-written Playwright specs, evidence for every run.",
   "license": "UNLICENSED",
   "author": "Zoro Chen",
@@ -110,7 +110,9 @@
     "@tanstack/react-query": "^5.105.0",
     "@uiw/react-codemirror": "^4.25.12",
     "anser": "^2.3.5",
+    "diff": "^9.0.0",
     "hono": "^4.13.14",
+    "json-edit-react": "2.0.5",
     "pdfjs-dist": "^6.4.299",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",