@rse/ase 2.0.6 → 2.0.8

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)))));

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

@@ -16,10 +16,45 @@ import { palette, loadPalette, cx } from "./ase-task-board-tui-style.js";
 import { sanitize, renderDialog, renderConfirm, renderTransfer, renderAssign, renderPrompt, renderBusy } from "./ase-task-board-tui-popup.js";
 /*  render the whole screen  */
 const renderScreen = (ctx, project) => {
-    const { columns, rows, all, board, surface, view, filter, typing, dialog, notice, carry, confirm, transfer, assign, prompt, headRef, tabLabels, dialogSel, dialogLines, transferCard, transferList, dim, store, busy, busyTick, agents } = ctx;
+    const { columns, rows, all, board, surface, view, filter, typing, dialog, notice, carry, confirm, transfer, assign, prompt, headRef, tabLabels, dialogW, dialogSel, dialogLines, dialogDiff, transferCard, transferList, dim, store, busy, busyTick, agents, watched } = ctx;
     /*  refuse to draw into a too small window  */
     if (columns < 40 || rows < 16)
         return h(Box, { width: columns, height: rows, justifyContent: "center", alignItems: "center" }, h(Text, cx("signal"), `window too small (${columns}×${rows}) — needs at least 40×16`));
+    /*  the dialog and popups on top of the screen  */
+    const overlays = [
+        dialog !== null ? renderDialog({
+            card: all.cards.get(dialog.id),
+            group: all.groups.find((g) => g.lanes.some((l) => l.status === all.cards.get(dialog.id)?.status))?.title,
+            id: dialog.id,
+            pred: all.pred.get(dialog.id) ?? [],
+            succ: all.succ.get(dialog.id) ?? [],
+            tint: (ref) => {
+                const c = all.cards.get(ref);
+                const tone = c !== undefined ? toneOf(all, c) : "idle";
+                return tone === "active" ? palette.accent : tone === "done" ? palette.dim : palette.normal;
+            },
+            tabs: tabLabels,
+            tab: dialogSel,
+            first: dialog.first,
+            scroll: dialog.scrolls[dialogSel] ?? 0,
+            lines: dialogLines,
+            width: dialogW,
+            columns,
+            rows,
+            notice,
+            viewer: watched !== undefined,
+            diffed: dialogDiff
+        }) : null,
+        confirm !== null ? renderConfirm(confirm.id, confirm.yes, columns, rows) : null,
+        transfer !== null && transferCard !== undefined ?
+            renderTransfer(transfer.id, transferCard.status, transferList, transfer.at, columns, rows) : null,
+        assign !== null ? renderAssign(assign, assignChoices(assign), assignUnknown(assign), columns, rows) : null,
+        prompt !== null ? renderPrompt(prompt, columns, rows, prompt.request !== null ? requestChoices(prompt.request) : []) : null,
+        busy !== null ? renderBusy(busy.label, busy.since, busyTick, columns, rows) : null
+    ];
+    /*  the task viewer shows only the dialog and popups, without the board  */
+    if (watched !== undefined)
+        return h(Box, { width: columns, height: rows, flexDirection: "column" }, ...overlays);
     /*  the status line in the last line of the screen, below the key hints, enclosed
         on its left and right side by the downward lines of the rule above it,
         showing the kind and connection state of the task store (a disconnected one in
@@ -59,27 +94,7 @@ const renderScreen = (ctx, project) => {
         view === "flow" ? renderFlow(ctx) : renderAgents(ctx))
         .filter((el) => surface.keys || !String(el.key).startsWith("keys")), 
     /*  the horizontal rule between the key hints and the status line, turning downward with rounded corners at both ends  */
-    h(Text, cx("dim", dim && "dimmed"), " ╭" + "─".repeat(Math.max(0, columns - 4)) + "╮ "), status, dialog !== null ? renderDialog({
-        card: all.cards.get(dialog.id),
-        group: all.groups.find((g) => g.lanes.some((l) => l.status === all.cards.get(dialog.id)?.status))?.title,
-        id: dialog.id,
-        pred: all.pred.get(dialog.id) ?? [],
-        succ: all.succ.get(dialog.id) ?? [],
-        tint: (ref) => {
-            const c = all.cards.get(ref);
-            const tone = c !== undefined ? toneOf(all, c) : "idle";
-            return tone === "active" ? palette.accent : tone === "done" ? palette.dim : palette.normal;
-        },
-        tabs: tabLabels,
-        tab: dialogSel,
-        first: dialog.first,
-        scroll: dialog.scrolls[dialogSel] ?? 0,
-        lines: dialogLines,
-        columns,
-        rows,
-        notice
-    }) : null, confirm !== null ? renderConfirm(confirm.id, confirm.yes, columns, rows) : null, transfer !== null && transferCard !== undefined ?
-        renderTransfer(transfer.id, transferCard.status, transferList, transfer.at, columns, rows) : null, assign !== null ? renderAssign(assign, assignChoices(assign), assignUnknown(assign), columns, rows) : null, prompt !== null ? renderPrompt(prompt, columns, rows, prompt.request !== null ? requestChoices(prompt.request) : []) : null, busy !== null ? renderBusy(busy.label, busy.since, busyTick, columns, rows) : null);
+    h(Text, cx("dim", dim && "dimmed"), " ╭" + "─".repeat(Math.max(0, columns - 4)) + "╮ "), status, ...overlays);
 };
 /*  pass each pressed SGR mouse report ("ESC[<b;x;y" plus "M"/"m" for press/release, 1-based)
     with its 0-based column/row, read directly from stdin, as Ink 8 drops them before
@@ -138,8 +153,8 @@ export const useMouseReports = (onPress) => {
     }, [stdin]);
 };
 /*  the root component of the terminal board  */
-const App = ({ log, initial, project, relay }) => {
-    const ctx = useBoardState(log, initial, relay);
+const App = ({ log, initial, project, relay, watched }) => {
+    const ctx = useBoardState(log, initial, relay, watched);
     /*  handle the mouse, but ignore it while the modal busy popup is shown  */
     useMouseReports((button, col, row) => {
         if (ctx.busy === null)
@@ -180,8 +195,8 @@ const lateErasing = (stream) => {
         }
     });
 };
-/*  run the terminal board until the user quits  */
-export const runTUI = async (log, relay) => {
+/*  run the terminal board (resp. with a task id, the task viewer) until the user quits  */
+export const runTUI = async (log, relay, watched) => {
     const initial = await buildBoard(log);
     const project = Task.projectIdOf(Task.projectRoot());
     loadPalette(log);
@@ -199,7 +214,7 @@ export const runTUI = async (log, relay) => {
             rewrite only the changed lines of a frame, as otherwise every frame
             is erased and redrawn entirely, which flickers in terminals not
             honoring synchronized output (DEC mode 2026), like tmux popups  */
-        const app = render(h(App, { log, initial, project, relay }), {
+        const app = render(h(App, { log, initial, project, relay, watched }), {
             alternateScreen: true, exitOnCtrlC: true, patchConsole: true, kittyKeyboard: { mode: "auto" },
             incrementalRendering: true, stdout: lateErasing(process.stdout)
         });