@rse/ase 2.0.7 → 2.0.8

package/dst/ase-agent-relay-client.js

@@ -4,8 +4,6 @@
 **  Licensed under Apache 2.0 <https://spdx.org/licenses/Apache-2.0>
 */
 import os from "node:os";
-import { ofetch } from "ofetch";
-import { Agent } from "undici";
 import * as v from "valibot";
 import { WebSocket } from "ws";
 import { isScalar } from "yaml";
@@ -14,6 +12,7 @@ import { configSchema } from "./ase-config-schema.js";
 import { parseScope } from "./ase-config-scope.js";
 import * as TaskFormat from "./ase-task-format.js";
 import { urlHost, isLoopback } from "./ase-lib-server-bind.js";
+import { dispatchFetch, insecureAgent } from "./ase-lib-fetch.js";
 import { storeSchema } from "./ase-task-store-server-cli.js";
 import { relaySchema } from "./ase-agent-relay-server-cli.js";
 import * as Relay from "./ase-agent-relay-core.js";
@@ -181,7 +180,7 @@ export class AgentRelayClient {
     constructor(log, spec) {
         this.log = log;
         this.spec = spec;
-        this.dispatcher = spec.insecure ? new Agent({ connect: { rejectUnauthorized: false } }) : undefined;
+        this.dispatcher = spec.insecure ? insecureAgent() : undefined;
     }
     /*  the base URL of the agent relay  */
     get base() {
@@ -189,7 +188,7 @@ export class AgentRelayClient {
     }
     /*  perform a request, raising an error response or a failed connection  */
     async request(method, url, body) {
-        const r = await ofetch.raw(`${this.spec.base}/projects/${this.spec.prjId}/agents${url}`, {
+        const r = await dispatchFetch.raw(`${this.spec.base}/projects/${this.spec.prjId}/agents${url}`, {
             method,
             headers: {
                 Authorization: `Bearer ${this.spec.token}`,

package/dst/ase-config-schema.js

@@ -78,6 +78,7 @@ export const projectClassificationPresets = {
         "board.web.color.accent": webColorDefaults.accent,
         "board.web.color.signal": webColorDefaults.signal,
         "board.web.editor.keymap": "default",
+        "board.web.theme": "auto",
         "telemetry.enabled": "false",
         "telemetry.implicit": "true",
         "telemetry.prices.ai": "*=4.00/20.00/0.20/5.00",
@@ -131,6 +132,7 @@ export const configWritableScopes = {
     "board.web.color.accent": ["user", "project"],
     "board.web.color.signal": ["user", "project"],
     "board.web.editor.keymap": ["user", "project"],
+    "board.web.theme": ["user", "project"],
     "telemetry.enabled": ["user", "project"],
     "telemetry.implicit": ["user", "project"],
     "telemetry.service.port": ["user"],
@@ -337,7 +339,8 @@ export const configSchema = v.nullish(v.strictObject({
             })),
             editor: v.optional(v.strictObject({
                 keymap: v.optional(v.picklist(["default", "vim", "emacs"]))
-            }))
+            })),
+            theme: v.optional(v.picklist(["auto", "light", "dark"]))
         }))
     }))
 }));

package/dst/ase-lib-fetch.js

@@ -0,0 +1,12 @@
+/*
+**  Agentic Software Engineering (ASE)
+**  Copyright (c) 2025-2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
+**  Licensed under Apache 2.0 <https://spdx.org/licenses/Apache-2.0>
+*/
+import { ofetch } from "ofetch";
+import { Agent, fetch as undiciFetch } from "undici";
+/*  the fetch for requests with a dispatcher of the npm "undici": its own fetch, as the
+    built-in fetch of Node (its bundled, possibly older undici) rejects a foreign dispatcher  */
+export const dispatchFetch = ofetch.create({}, { fetch: undiciFetch });
+/*  create a dispatcher skipping the TLS certificate verification  */
+export const insecureAgent = () => new Agent({ connect: { rejectUnauthorized: false } });

package/dst/ase-lib-server-cli.js

@@ -7,20 +7,19 @@ import path from "node:path";
 import fs from "node:fs";
 import crypto from "node:crypto";
 import os from "node:os";
-import { ofetch } from "ofetch";
-import { Agent } from "undici";
 import { isSeq, isScalar } from "yaml";
 import { Config } from "./ase-config-core.js";
 import { parseScope } from "./ase-config-scope.js";
 import { isLogLevel } from "./ase-lib-log.js";
 import { writeStdout } from "./ase-lib-stdio.js";
+import { dispatchFetch, insecureAgent } from "./ase-lib-fetch.js";
 import { Daemon, DaemonCommand } from "./ase-lib-daemon-cli.js";
 import { urlHost, isLoopback, serverHeader } from "./ase-lib-server-bind.js";
 /*  the defaults  */
 export const DEFAULT_ADDRESS = "127.0.0.1";
 /*  the dispatcher of the host-local probe, skipping the certificate verification,
     as a certificate rarely covers a loopback or local interface address  */
-const probeAgent = new Agent({ connect: { rejectUnauthorized: false } });
+const probeAgent = insecureAgent();
 /*  whether an address belongs to this host (loopback or a local network interface)  */
 export const isLocal = (address) => isLoopback(address) || Object.values(os.networkInterfaces())
     .some((ifaces) => (ifaces ?? []).some((iface) => iface.address === address));
@@ -146,7 +145,7 @@ export class ServerCommand extends DaemonCommand {
         /*  skip the certificate verification for host-local addresses only,
             as elsewhere a man-in-the-middle could capture the token  */
         const lax = isLocal(host.replace(/^\[|\]$/g, ""));
-        const request = (auth) => ofetch.raw(url, {
+        const request = (auth) => dispatchFetch.raw(url, {
             method: "GET",
             headers: auth !== null ? { Authorization: `Bearer ${auth}` } : {},
             dispatcher: lax ? probeAgent : undefined,
@@ -170,8 +169,12 @@ export class ServerCommand extends DaemonCommand {
                 return "running";
             return "foreign";
         }
-        catch {
+        catch (err) {
             /*  treat an unreachable or unresponsive server as not running  */
+            let cause = err;
+            while (cause instanceof Error && cause.cause instanceof Error)
+                cause = cause.cause;
+            this.log.write("debug", `${this.label}: probe of ${url} failed: ${cause instanceof Error ? cause.message : String(cause)}`);
             return null;
         }
     }

package/dst/ase-task-board-diff.js

@@ -0,0 +1,120 @@
+/*
+**  Agentic Software Engineering (ASE)
+**  Copyright (c) 2025-2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
+**  Licensed under Apache 2.0 <https://spdx.org/licenses/Apache-2.0>
+*/
+import { diffArrays } from "diff";
+/*  the changed share of the words up to which they are emphasized, the Markdown
+    syntax characters never being emphasized (as this would break their constructs),
+    the closing placeholder of a change mark, and the leading syntax of a Markdown
+    line (block quote, heading, or list marker) and its checkbox, staying outside of
+    its mark resp. of its emphasized words  */
+const ALIKE = 0.4;
+const SYNTAX = /^[*`~|\\[\]()<>#!]$/;
+const CLOSE = "⟦/chg⟧";
+const HEAD = /^\s*(?:>\s*)*(?:#{1,6}[ \t]+|(?:[-*+]|\d+[.)])[ \t]+)?/;
+const BOX = /^\[.\][ \t]+/;
+/*  split two lists of items, compared by their keys, into the parts of their diff  */
+export const diffHunks = (before, after, key) => {
+    const hunks = [];
+    let i = 0;
+    let j = 0;
+    for (const { added, removed, count } of diffArrays(before.map(key), after.map(key))) {
+        if (!added && !removed) {
+            hunks.push({ kept: after.slice(j, j + count), removed: [], added: [] });
+            i += count;
+            j += count;
+            continue;
+        }
+        let hunk = hunks.at(-1);
+        if (hunk === undefined || hunk.kept.length > 0) {
+            hunk = { kept: [], removed: [], added: [] };
+            hunks.push(hunk);
+        }
+        if (removed) {
+            hunk.removed.push(...before.slice(i, i + count));
+            i += count;
+        }
+        else {
+            hunk.added.push(...after.slice(j, j + count));
+            j += count;
+        }
+    }
+    return hunks;
+};
+const tokens = (lines) => lines.flatMap((line, row) => [...line.matchAll(/[\p{L}\p{N}_]+|\S/gu)].map((m) => ({ text: m[0], row, from: m.index, to: m.index + m[0].length })));
+/*  determine the changed words of the removed and added lines of a change (joined with
+    the blanks between adjacent ones), unless too many of the words changed, where the
+    words alone decide, so a change of the wrapping only emphasizes nothing  */
+export const changedWords = (removed, added) => {
+    const a = tokens(removed);
+    const b = tokens(added);
+    const del = removed.map(() => []);
+    const add = added.map(() => []);
+    const changes = diffArrays(a.map((token) => token.text), b.map((token) => token.text));
+    const changed = changes.reduce((n, change) => n + (change.added || change.removed ? change.count : 0), 0);
+    if (changed > (a.length + b.length) * ALIKE)
+        return [del, add];
+    const mark = (list, spans) => {
+        let last;
+        for (const token of list) {
+            const row = spans[token.row];
+            if (SYNTAX.test(token.text))
+                last = undefined;
+            else {
+                if (last?.row === token.row)
+                    row[row.length - 1].to = token.to;
+                else
+                    row.push({ from: token.from, to: token.to });
+                last = token;
+            }
+        }
+    };
+    let i = 0;
+    let j = 0;
+    for (const { added: plus, removed: minus, count } of changes) {
+        if (minus)
+            mark(a.slice(i, i + count), del);
+        else if (plus)
+            mark(b.slice(j, j + count), add);
+        i += plus ? 0 : count;
+        j += minus ? 0 : count;
+    }
+    return [del, add];
+};
+/*  mark a changed Markdown line and its changed words through placeholders surviving
+    the Markdown rendering: fences and lines of pure syntax stay unmarked (as a
+    mark would break them), and the cells of a table row are marked individually  */
+const markLine = (line, kind, spans) => {
+    if (!/[\p{L}\p{N}]/u.test(line) || /^\s*(?:```|~~~)/.test(line))
+        return line;
+    if (/^\s*\|/.test(line))
+        return line.split(/(?<!\\)\|/).map((cell) => cell.replace(/\S(?:.*\S)?/, (text) => `⟦chg:${kind}⟧${text}${CLOSE}`)).join("|");
+    const head = HEAD.exec(line)[0];
+    const rest = line.slice(head.length);
+    const box = BOX.exec(rest)?.[0] ?? "";
+    let text = rest.slice(box.length);
+    for (const { from, to } of [...spans].reverse())
+        text = `${text.slice(0, from)}⟦chg:${kind}-word⟧${text.slice(from, to)}${CLOSE}${text.slice(to)}`;
+    return `${head}⟦chg:${kind}⟧${box}${text}${CLOSE}`;
+};
+/*  the text of a Markdown line, without its leading syntax and its checkbox  */
+const lineText = (line) => {
+    const rest = line.slice(HEAD.exec(line)[0].length);
+    return rest.slice(BOX.exec(rest)?.[0].length ?? 0);
+};
+/*  merge two Markdown texts into one, with the removed before the added lines of a
+    change and with both marked through placeholders (resolved by "diffMarksToHTML")  */
+export const diffMarkdown = (before, after) => diffHunks(before.split(/\r?\n/), after.split(/\r?\n/), (line) => line).flatMap(({ kept, removed, added }) => {
+    const [del, add] = changedWords(removed.map(lineText), added.map(lineText));
+    return [
+        ...kept,
+        ...removed.map((line, k) => markLine(line, "del", del[k])),
+        ...added.map((line, k) => markLine(line, "add", add[k]))
+    ];
+}).join("\n");
+/*  resolve the placeholders of the change marks in rendered HTML, where
+    the ones which ended up inside a tag (like in a link target) are dropped  */
+export const diffMarksToHTML = (html) => html.replace(/<[^>]*⟦[^>]*>/g, (tag) => tag.replace(/⟦\/?chg[^⟧]*⟧/g, ""))
+    .replace(/⟦chg:([a-z-]+)⟧/g, (_m, kinds) => `<span class="chg ${kinds.replace(/-/g, " ")}">`)
+    .replace(/⟦\/chg⟧/g, "</span>");

package/dst/ase-task-board-tui-control.js

@@ -12,7 +12,7 @@ import { refSegs, tabFirst, tabLayout, confirmBox, transferBox, assignBox, promp
 /*  handle a mouse press onto the deletion confirmation, the transfer popup, the assign
     popup, the prompt popup, or the read dialog, returning whether one of them was open  */
 const handlePopupMouse = (ctx, btn, mx, my) => {
-    const { columns, rows, all, dialog, setDialog, setNotice, confirm, setConfirm, transfer, setTransfer, assign, setAssign, assignTo, prompt, setPrompt, cancelPrompt, submitPrompt, dialogW, tabLabels, dialogSel, dialogScroll, transferList, remove, transferTo } = ctx;
+    const { columns, rows, all, dialog, setDialog, setNotice, confirm, setConfirm, transfer, setTransfer, assign, setAssign, assignTo, prompt, setPrompt, cancelPrompt, submitPrompt, dialogW, tabLabels, dialogSel, dialogScroll, transferList, remove, transferTo, watched } = ctx;
     if (prompt !== null) {
         /*  a click onto a suggested request name of the drop-down picks it (and switches to the
             prompt, resp. to the request button if the prompt is ignored), a click onto the request
@@ -85,10 +85,11 @@ const handlePopupMouse = (ctx, btn, mx, my) => {
         return true;
     }
     if (dialog !== null) {
-        /*  a click onto the " X " of the header (the second dialog row) closes  */
+        /*  a click onto the " X " of the header (the second dialog row) closes
+            (the task viewer has no " X " at all, as only "q" quits it)  */
         const barX = Math.floor((columns - dialogW) / 2) + 1;
         const closeX = barX - 1 + dialogW - DIALOG_CLOSE;
-        if (btn === 0 && my === 1 && mx >= closeX && mx < closeX + 3)
+        if (btn === 0 && my === 1 && mx >= closeX && mx < closeX + 3 && watched === undefined)
             setDialog(null);
         else if (btn === 0 && my === 3 && mx >= barX && mx < barX + dialogW - 2) {
             /*  a click onto a predecessor or successor id (in the fourth dialog row) jumps to its task view  */
@@ -457,12 +458,14 @@ const handlePopupKey = (ctx, input, key) => {
 };
 /*  handle a key press within the read dialog  */
 const handleDialogKey = (ctx, dialog, input, key) => {
-    const { rows, setDialog, dialogW, tabLabels, dialogSel, dialogScroll, startEdit } = ctx;
+    const { rows, setDialog, dialogW, tabLabels, dialogSel, dialogScroll, dialogDiff, clearDiff, startEdit, watched } = ctx;
     const page = Math.max(1, rows - DIALOG_CHROME - 2);
-    if (key.escape || key.return)
+    if (watched !== undefined ? input === "q" : key.escape || key.return)
         setDialog(null);
     else if (input === "e")
         startEdit(dialog.id);
+    else if (input === "#" && dialogDiff)
+        clearDiff();
     else if (key.leftArrow || key.rightArrow || key.tab) {
         const tab = Math.max(0, Math.min(tabLabels.length - 1, dialogSel + (key.leftArrow || (key.tab && key.shift) ? -1 : 1)));
         setDialog({ ...dialog, tab, first: tabFirst(tabLabels, dialog.first, tab, dialogW - 4) });

package/dst/ase-task-board-tui-model.js

@@ -19,7 +19,7 @@ import { statsOf, statsRanges, effortScale } from "./ase-task-board-stats.js";
 import { layoutGraph } from "./ase-task-board-graph.js";
 import { flowOf, layoutFlow, flowState } from "./ase-task-board-flow.js";
 import { fitGroups, agentLogWidth, agentOpLines, agentOpHeight, AGENT_INFO_H } from "./ase-task-board-tui-view.js";
-import { dialogTabs, planLines, attachmentLines, agentLogLines, agentLogKey, DIALOG_CHROME, DIALOG_WIDTH } from "./ase-task-board-tui-popup.js";
+import { dialogTabs, planLines, planChanged, planDiffLines, attachmentLines, agentLogLines, agentLogKey, DIALOG_CHROME, DIALOG_WIDTH } from "./ase-task-board-tui-popup.js";
 import { pulseFrames } from "./ase-task-board-tui-style.js";
 /*  the suggested request names of a request by prompt, matching its request name as last
     typed (all of them for an empty or an exactly suggested request name, to offer the
@@ -407,13 +407,14 @@ const usePromptActions = (ctx) => {
     };
     return { startPrompt, startRequest, cancelPrompt, submitPrompt };
 };
-/*  the state of the terminal board: all state, the derived values, and the actions  */
-export const useBoardState = (log, initial, relay) => {
+/*  the state of the terminal board (resp. with a task id, of the
+    task viewer): all state, the derived values, and the actions  */
+export const useBoardState = (log, initial, relay, watched) => {
     const { exit, suspendTerminal } = useApp();
     const { columns, rows } = useWindowSize();
     const [all, setBoard] = React.useState(initial);
     const [surface, setSurface] = React.useState(() => BoardState.load().tui);
-    const [view, setView] = React.useState(() => surface.view);
+    const [view, setView] = React.useState(() => watched !== undefined ? "lanes" : surface.view);
     const [filter, setFilter] = React.useState("");
     const [typing, setTyping] = React.useState(false);
     /*  the shown board: all tasks reduced onto the ones matching the filter
@@ -424,7 +425,7 @@ export const useBoardState = (log, initial, relay) => {
         return view === "graph" && !surface.standalone ? dropStandalone(found) : found;
     }, [all, filter, view, surface.standalone]);
     const [sel, setSel] = React.useState(() => relocate(board, { g: 0, l: 0, id: "" }, surface));
-    const [dialog, setDialog] = React.useState(null);
+    const [dialog, setDialog] = React.useState(watched !== undefined ? { id: watched, tab: 0, first: 0, scrolls: {} } : null);
     const [plan, setPlan] = React.useState(null);
     const [files, setFiles] = React.useState(new Map());
     const [first, setFirst] = React.useState(0);
@@ -480,6 +481,8 @@ export const useBoardState = (log, initial, relay) => {
     }, [log, all]);
     /*  persist the shown view for the next start of the terminal board  */
     React.useEffect(() => {
+        if (watched !== undefined)
+            return;
         BoardState.setView("tui", view).catch((err) => {
             log.write("warning", `board: persisting view failed: ${err instanceof Error ? err.message : String(err)}`);
         });
@@ -523,6 +526,21 @@ export const useBoardState = (log, initial, relay) => {
             setNotice(`editing task "${prompt.id}" by prompt cancelled: task vanished in the meantime`);
         }
     }, [all, prompt]);
+    /*  quit the task viewer once its dialog is closed, resp. with a warning once
+        its task vanished (except while an edit may rename it, which the dialog follows)  */
+    const seen = React.useRef("");
+    React.useEffect(() => {
+        if (watched === undefined)
+            return;
+        if (dialog === null)
+            exit();
+        else if (all.cards.has(dialog.id))
+            seen.current = dialog.id;
+        else if (seen.current === dialog.id && !editing.current) {
+            log.write("warning", `board: task "${dialog.id}" no longer exists`);
+            exit();
+        }
+    }, [all, dialog?.id]);
     /*  remember the box of every graph node for the spatial navigation and the scrolling  */
     const places = React.useMemo(() => placesOf(layout?.graph), [layout]);
     /*  follow changes of the task storage and of the lifecycle mode,
@@ -624,18 +642,26 @@ export const useBoardState = (log, initial, relay) => {
     };
     /*  fetch the plan (with its attachments) of the read dialog whenever it is opened or the board changes
         (the latter in the background, i.e. without the busy popup), together with loading the
-        syntax highlighter of YAML or JSON attachments (on the first opening only)  */
+        syntax highlighter of YAML or JSON attachments (on the first opening only), where a
+        change with a shown effect remembers its predecessor for the diff of the read dialog,
+        and where closing the dialog forgets the plan, as its changes are followed only while open  */
     const dialogId = dialog?.id;
     const dialogTab = dialog?.tab ?? 0;
     React.useEffect(() => {
-        if (dialogId === undefined)
+        if (dialogId === undefined) {
+            setPlan(null);
             return;
+        }
         let live = true;
         const load = Promise.all([Task.parts(log, dialogId), Task.attachments(log, dialogId), dataLoad()]);
         const run = plan?.id === dialogId ? load : track({ text: "loading task", id: dialogId }, load);
         run.then(([parts, atts]) => {
             if (live)
-                setPlan({ id: dialogId, parts: parts === null ? null : { ...parts, atts } });
+                setPlan((prev) => {
+                    const next = parts === null ? null : { ...parts, atts };
+                    const same = prev?.id === dialogId && next !== null;
+                    return { id: dialogId, parts: next, before: !same ? undefined : planChanged(prev.parts, next) ? prev.parts : prev.before };
+                });
         }).catch((err) => {
             log.write("warning", `board: loading plan failed: ${err instanceof Error ? err.message : String(err)}`);
             if (live)
@@ -708,6 +734,12 @@ export const useBoardState = (log, initial, relay) => {
             const ref = process.platform === "win32" ? "\"%ASE_TASK_FILE%\"" : "\"$ASE_TASK_FILE\"";
             await suspendTerminal(async () => {
                 mouseReporting(false);
+                /*  stop the read of stdin still pending from Ink, which only removes its
+                    listener, as it else takes the next input away from the editor and
+                    passes it to the board afterwards (a pause in non-flowing mode does
+                    not emit the event on which Node stops reading, and the stop is deferred)  */
+                process.stdin.emit("pause");
+                await new Promise((resolve) => { process.nextTick(resolve); });
                 try {
                     await execa(`${editor} ${ref}`, { shell: true, stdio: "inherit", env: { ASE_TASK_FILE: file } });
                 }
@@ -791,9 +823,10 @@ export const useBoardState = (log, initial, relay) => {
             setNotice(`creating task failed: ${msg} (press "N" to re-edit, or empty it to discard)`);
         }
     };
-    /*  delete a task (after its confirmation), closing its read dialog  */
+    /*  delete a task (after its confirmation), closing its read dialog
+        (in the task viewer only once it vanished, as closing it quits the process)  */
     const remove = (id) => {
-        if (dialog?.id === id)
+        if (dialog?.id === id && watched === undefined)
             setDialog(null);
         track({ text: "deleting task", id }, Task.delete(log, id)).then((existed) => {
             setNotice(existed ? `task "${id}" deleted` : `task "${id}" no longer exists`);
@@ -910,16 +943,23 @@ export const useBoardState = (log, initial, relay) => {
     const { agentList, agentIdx, agent, agentOp, logLines, logH, logFirst, logMax, selectAgent, scrollLog, focusAgent } = useAgentsView(agents, columns, boardH);
     /*  the tabs of the read dialog, the lines of its selected tab (clamped to
         the existing tabs), and the maximum scroll offset of these lines  */
-    const dialogW = Math.min(columns - 2, DIALOG_WIDTH);
+    const dialogW = watched !== undefined ? columns : Math.min(columns - 2, DIALOG_WIDTH);
     const dialogParts = dialog !== null && plan?.id === dialog.id ? plan.parts : undefined;
     const tabLabels = dialogTabs(dialogParts);
     const dialogSel = Math.min(dialogTab, tabLabels.length - 1);
     const dialogAtt = dialogSel > 0 && dialogParts !== undefined && dialogParts !== null && !(dialogParts instanceof Error) ?
         dialogParts.atts[dialogSel - 1] : undefined;
+    const planDiff = React.useMemo(() => plan?.before !== undefined ?
+        planDiffLines(plan.before, plan.parts, plan.id, Math.max(1, dialogW - 5)) : null, [plan, dialogW]);
+    const dialogDiff = planDiff !== null && dialogSel === 0 && plan?.id === dialog?.id;
     const dialogLines = dialog === null ? [] : dialogAtt !== undefined ?
         attachmentLines(dialogAtt, files.get(`${dialog.id}:${dialogSel}`), Math.max(1, dialogW - 5)) :
-        planLines(dialogParts, dialog.id, Math.max(1, dialogW - 5));
+        dialogDiff ? planDiff : planLines(dialogParts, dialog.id, Math.max(1, dialogW - 5));
     const dialogMax = Math.max(0, dialogLines.length - (rows - DIALOG_CHROME));
+    /*  drop the diff of the last change from the read dialog, so just the latest state remains  */
+    const clearDiff = () => {
+        setPlan((prev) => prev !== null ? { ...prev, before: undefined } : prev);
+    };
     /*  the entries of the transfer popup of its (still existing) task  */
     const transferCard = transfer !== null ? all.cards.get(transfer.id) : undefined;
     const transferList = transferCard !== undefined && cycle !== null ? transferEntries(all, cycle, transferCard) : [];
@@ -1015,11 +1055,11 @@ export const useBoardState = (log, initial, relay) => {
     /*  the wall-clock and the heartbeats of the agents (for the agents view and the agent graph)  */
     const { now, beatOf } = useBeats(agents, view);
     return {
-        log, exit, columns, rows, all, board, surface, view, setView, filter, setFilter, typing, setTyping,
+        log, exit, watched, columns, rows, all, board, surface, view, setView, filter, setFilter, typing, setTyping,
         sel, setSel, dialog, setDialog, scroll, layout, notice, setNotice, carry, setCarry, cycle,
         confirm, setConfirm, transfer, setTransfer, assign, setAssign, prompt, setPrompt, mouse, setMouse, lastClick, grown, setGrow,
         cardBoxes, laneBoxes, groupBoxes, headBoxes, agentBoxes, rangeBoxes, cardRef, laneRef, groupRef, headRef, agentRef, rangeRef, boxAt, graphView,
-        places, graphTitles, boardH, dialogW, tabLabels, dialogSel, dialogLines, dialogScroll,
+        places, graphTitles, boardH, dialogW, tabLabels, dialogSel, dialogLines, dialogScroll, dialogDiff, clearDiff,
         transferCard, transferList, fit, viewH, viewW, x, y, nodes, dim, pulse, now, beatOf, store, busy, busyTick,
         agents, working, cycleView, agentList, agentIdx, agent, agentOp, logLines, logH, logFirst, logMax, selectAgent, scrollLog, stats, usage, range, setRange, stepRange,
         flow, flowLayout, flowSel, setFlowSel, flowPlaces, focusAgent, scrollFlow,

package/dst/ase-task-board-tui-popup.js

@@ -5,6 +5,7 @@
 */
 import { Box, Text } from "ink";
 import { cardLabel, groupLabel, attachmentTabs, isDiff, diffTones, dataLang, dataSpans, clampLines } from "./ase-task-board-core.js";
+import { diffHunks, changedWords } from "./ase-task-board-diff.js";
 import { h } from "./ase-task-board-tui-view.js";
 import { palette, cx, spinnerFrames, eighths } from "./ase-task-board-tui-style.js";
 const BOLD = 1;
@@ -13,6 +14,7 @@ const CODE = 4;
 const ACCENT = 8;
 const SIGNAL = 16;
 const DIM = 32;
+const CHANGED = 64;
 /*  strip the Markdown inline markers of a line ("`" for code, "**" and
     "__" for bold, "*" for italic), recording the style of the marked text  */
 const emphasis = (line) => {
@@ -109,6 +111,35 @@ export const planLines = (parts, id, width) => {
         ...markdownLines(parts.body, width)
     ];
 };
+/*  determine whether a task plan differs from its predecessor in what the read
+    dialog shows (and not, for instance, only in its attachments)  */
+export const planChanged = (before, after) => {
+    const shown = (parts) => parts === undefined || parts === null || parts instanceof Error ? null :
+        JSON.stringify([[...parts.keys].filter(([key]) => key !== "Type"), parts.body]);
+    return shown(before) !== null && shown(after) !== null && shown(before) !== shown(after);
+};
+/*  the lines of the diff of two task plans for the read dialog: the rendered lines of
+    both, where removed lines are red and added lines blue, with their sign in the
+    otherwise empty first column and their changed words marked, and where only the
+    shown content of the lines decides about a change  */
+export const planDiffLines = (before, after, id, width) => {
+    const changed = (line, sign, tint, spans) => {
+        const mask = [...(line.mask ?? new Array(line.text.length).fill(0))];
+        for (const { from, to } of spans)
+            for (let k = from; k < to; k++)
+                mask[k] |= CHANGED;
+        return { ...line, mask, sign, tint };
+    };
+    return diffHunks(planLines(before, id, width), planLines(after, id, width), (line) => JSON.stringify(line))
+        .flatMap(({ kept, removed, added }) => {
+        const [del, add] = changedWords(removed.map((line) => line.text), added.map((line) => line.text));
+        return [
+            ...kept,
+            ...removed.map((line, k) => changed(line, "-", "red", del[k])),
+            ...added.map((line, k) => changed(line, "+", "blue", add[k]))
+        ];
+    });
+};
 /*  the lines of a task plan attachment for the read dialog: its embedded
     data or its (lazily loaded) file content, rendered as Markdown for a
     Markdown type, syntax-highlighted for a YAML or JSON type, colored per
@@ -549,8 +580,7 @@ export const renderAssign = (assign, choices, unknown, columns, rows) => {
 };
 /*  render the read dialog: full height, horizontally centered, with a
     vertical scroll bar in its right border  */
-export const renderDialog = ({ card, group, id, pred, succ, tint, tabs, tab, first, scroll, lines, columns, rows, notice }) => {
-    const width = Math.min(columns - 2, DIALOG_WIDTH);
+export const renderDialog = ({ card, group, id, pred, succ, tint, tabs, tab, first, scroll, lines, width, columns, rows, notice, viewer, diffed }) => {
     const left = Math.floor((columns - width) / 2);
     const bodyW = width - 5;
     const viewH = rows - DIALOG_CHROME;
@@ -599,14 +629,16 @@ export const renderDialog = ({ card, group, id, pred, succ, tint, tabs, tab, fir
     /*  the key hints, or instead the status notice of an edit, truncated to the free width  */
     const free = Math.max(0, innerW - pos.length - 1);
     const keys = (notice !== null ? " " + sanitize(notice) :
-        " ←/→/⇤/⇥: switch tab · ↑/↓/⇈/⇊: scroll · e: edit · E: edit by prompt · R: request by prompt · T: transition · A: assign · D: delete · M: toggle mouse · ⏎/ESC: close").slice(0, free);
-    return h(Box, { key: "dialog", top: 0, left, width, height: rows, ...cx("popup", "border-dim") }, h(Text, {}, " ", ...(prefix !== "" ? [h(Text, { ...cx("bold"), color: tint(id) }, prefix)] : []), h(Text, { ...cx("badge"), color: tint(id) }, ` ${epic ? "♛ " : ""}≡ ${head.slice(0, id.length)} `), h(Text, { color: tint(id) }, head.slice(id.length)), h(Text, cx("dim"), right.slice(0, right.length - lane.length)), h(Text, cx("dim", "bold"), lane), " ", h(Text, cx("dim", "inverse"), " X "), " "), separator("sep-title"), h(Text, {}, ...segs.map((seg, k) => h(Text, { key: k, color: seg.color, inverse: seg.inverse }, seg.text))), separator("sep-head"), h(Text, { wrap: "truncate" }, ...tabBar.map((seg, k) => h(Text, { key: k, color: seg.color, bold: seg.bold, inverse: seg.inverse }, seg.text))), separator("sep-tabs"), ...Array.from({ length: viewH }, (_, i) => {
+        (diffed ? " #: clear diff ·" : "") +
+            " ←/→/⇤/⇥: switch tab · ↑/↓/⇈/⇊: scroll · e: edit · E: edit by prompt · R: request by prompt · T: transition · A: assign · D: delete · M: toggle mouse · " +
+            (viewer ? "q: quit" : "⏎/ESC: close")).slice(0, free);
+    return h(Box, { key: "dialog", top: 0, left, width, height: rows, ...cx("popup", "border-dim") }, h(Text, {}, " ", ...(prefix !== "" ? [h(Text, { ...cx("bold"), color: tint(id) }, prefix)] : []), h(Text, { ...cx("badge"), color: tint(id) }, ` ${epic ? "♛ " : ""}≡ ${head.slice(0, id.length)} `), h(Text, { color: tint(id) }, head.slice(id.length)), h(Text, cx("dim"), right.slice(0, right.length - lane.length)), h(Text, cx("dim", "bold"), lane), " ", h(Text, cx("dim", !viewer && "inverse"), viewer ? "   " : " X "), " "), separator("sep-title"), h(Text, {}, ...segs.map((seg, k) => h(Text, { key: k, color: seg.color, inverse: seg.inverse }, seg.text))), separator("sep-head"), h(Text, { wrap: "truncate" }, ...tabBar.map((seg, k) => h(Text, { key: k, color: seg.color, bold: seg.bold, inverse: seg.inverse }, seg.text))), separator("sep-tabs"), ...Array.from({ length: viewH }, (_, i) => {
         const line = lines[s + i];
         const bar = lines.length <= viewH ? " " : (i >= thumbY && i < thumbY + thumbH ? "█" : "░");
         /*  split the padded line into runs of equal inline style (cut to the body width,
             as a wider line would wrap and push the rows of the dialog out of place)  */
-        const text = " " + (line?.text ?? "").slice(0, bodyW).padEnd(bodyW);
-        const mask = [0, ...(line?.mask ?? [])];
+        const text = (line?.sign ?? " ") + (line?.text ?? "").slice(0, bodyW).padEnd(bodyW);
+        const mask = [line?.sign !== undefined ? CHANGED : 0, ...(line?.mask ?? [])];
         const runs = [];
         for (let k = 0; k < text.length; k++) {
             const style = mask[k] ?? 0;
@@ -617,8 +649,9 @@ export const renderDialog = ({ card, group, id, pred, succ, tint, tabs, tab, fir
         }
         return h(Box, { key: i }, ...runs.map((run, k) => h(Text, {
             key: k, wrap: "truncate",
-            color: (run.style & (CODE | ACCENT)) !== 0 ? palette.accent : (run.style & SIGNAL) !== 0 ? palette.signal :
-                (run.style & DIM) !== 0 ? palette.dim : line?.color,
+            color: line?.tint ?? ((run.style & (CODE | ACCENT)) !== 0 ? palette.accent : (run.style & SIGNAL) !== 0 ? palette.signal :
+                (run.style & DIM) !== 0 ? palette.dim : line?.color),
+            inverse: (run.style & CHANGED) !== 0,
             bold: (line?.bold ?? false) || (run.style & BOLD) !== 0, italic: (run.style & ITALIC) !== 0
         }, run.text)), h(Text, cx("signal"), ` ${bar}`));
     }), separator("sep-foot"), h(Box, {}, h(Text, cx("hint", notice !== null && "signal"), keys), h(Text, cx("hint"), pos.padStart(Math.max(0, innerW - keys.length)))));