@chrok/pi-braid 0.3.2 → 0.3.3

package/README.md

@@ -225,11 +225,39 @@ Use Left/Right to select jobs, Up/Down or Page Up/Page Down to scroll, `c` to
 cancel the selected job, and Escape or `q` to close the panel. Closing the panel
 leaves jobs running. In RPC or noninteractive modes, use `braid_status`.
 
-Run `/braid <jobId> <nodeId>` to open the panel on one node's latest invocation,
-or `/braid <jobId> <executionId>` for an exact invocation such as an earlier loop
-iteration. The node view refreshes live with its status, model, elapsed time,
-token usage, context size, tool-call count, workspace, and full output or error.
-Press Backspace to return to the whole graph; switching jobs also returns to it.
+A flowchart wider than the terminal is cropped to the terminal width around the
+first running node, or from its left edge; a `[chart 1–76 of 245 cols]` line
+shows the visible columns.
+
+Press `v` to select a node: the arrow keys move a `◆` marker through the
+flowchart (starting at a running node), and the view pans horizontally and
+scrolls vertically to keep the selected node in sight. If the flowchart cannot be
+drawn, a node list replaces it while selecting. Enter opens that node's latest
+invocation as a live session. The session is drawn with Pi's own chat
+components, as in the main conversation: the worker's prompt, streamed
+assistant text and thinking, and tool cards whose arguments and output update
+while they run. The node summary—status, elapsed time, usage, context, and live
+activity (see below)—stays pinned at the top while the session scrolls. The
+session follows the newest lines; scroll up to pause, and press End to follow again. Left/Right switch between
+invocations of the same node (for example loop iterations), and ctrl+o expands
+tool output. Escape steps back one level—session, then node selection, then the
+graph—and closes the panel from the graph; `q` closes it from anywhere. Sessions
+are read-only. Running invocations and the 20 most recently finished ones per
+job keep their session; older ones show the summary and activity history.
+
+Run `/braid <jobId> <nodeId>` to open that node's latest invocation directly in
+the session view, or `/braid <jobId> <executionId>` for an exact invocation such
+as an earlier loop iteration. The header shows live activity for that exact invocation: the current phase
+(workspace preparation, worker, model request, tool, or checkpoint/cleanup) and
+how long it has been in it, time since the last observed signal, total time, the
+in-flight model request (sent, awaiting the first stream event, or streaming
+text/reasoning/tool-call arguments with a character count and latest tail), and
+running tools with their arguments, elapsed time, and latest output. Focused
+`braid_status` reads, and invocations whose session is no longer retained, add a
+chronological history of model requests and responses, assistant text, tool calls
+and results, workspace changes, and completion, with bounded detail previews.
+A quiet period is shown as elapsed time, not declared a stall. If the host cannot
+report a signal—for example a model registry without streaming—the view says so.
 Tab completes job handles and then that job's node IDs.
 IDs with leading/trailing whitespace, terminal controls, or a leading double
 quote use JSON string syntax, such as `/braid job-1 " review "` or
@@ -241,7 +269,10 @@ estimates or provider-reported usage, context-window sizes, filesystem tool-call
 counts, and the execution log. Active nodes are marked `▶ ACTIVE`. The status
 tool also renders a flowchart; expand its result to see more log events.
 When selecting `nodeId` or `executionId`, it instead shows that invocation's
-output/error, with the full text available on expansion.
+output/error and activity, with the full text and history available on expansion.
+The JSON includes `activity` with the latest 40 history entries; pass
+`activityBefore` with an entry sequence to page earlier ones. While the invocation
+runs, `activity` comes before `node` so it survives preview truncation.
 
 `/braid` now opens this panel; it no longer arms the next prompt. To request
 Braid explicitly, ask the agent to analyze the task using Braid.

package/dist/command.js

@@ -1,9 +1,13 @@
 import { matchesKey, stripTerminalSequences, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
-import { renderGraphResult, renderNodeResult } from "./display.js";
+import { renderGraphResult, renderNodeDetails, renderSessionHeader, SELECTED_NODE_MARK } from "./display.js";
+import { NodeSessionView } from "./session-view.js";
 // Match the overlay height exactly so Pi never clips the footer or bottom border.
 const panelHeight = (rows) => Math.max(1, Math.floor(rows * 0.9));
 const plain = (value) => stripTerminalSequences(value).replace(/\p{Cc}/gu, " ");
-/** A live, scrollable panel. Closing the panel leaves jobs running. */
+/**
+ * A live, scrollable panel. Esc steps back one level: session → node selection →
+ * graph → close. Closing the panel leaves jobs running.
+ */
 export class BraidPanel {
     jobs;
     tui;
@@ -11,9 +15,16 @@ export class BraidPanel {
     done;
     selected;
     focus;
+    /** Node highlighted in selection mode (`v`); undefined in the plain graph view. */
+    choosing;
+    /** Keep the newest transcript lines in view until the user scrolls up. */
+    follow = true;
+    /** The selection last scrolled into view, so manual scrolling is not overridden. */
+    revealed;
     offset = 0;
     maxOffset = 0;
     disposed = false;
+    session;
     unsubscribe;
     ticker;
     constructor(jobs, tui, theme, done, jobId, focus) {
@@ -23,6 +34,8 @@ export class BraidPanel {
         this.done = done;
         this.selected = jobId ? jobs.get(jobId)?.jobId ?? jobId : undefined;
         this.focus = focus;
+        // Pi's tool components only request renders through the TUI.
+        this.session = new NodeSessionView(tui, theme);
         this.unsubscribe = jobs.subscribe(() => this.refresh());
         this.ticker = setInterval(() => this.refresh(), 1000);
         this.ticker.unref();
@@ -64,7 +77,7 @@ export class BraidPanel {
                     : "muted";
         const focusLabel = this.focus
             ? "nodeId" in this.focus ? `node ${plain(this.focus.nodeId)}` : `execution ${plain(this.focus.executionId)}`
-            : "";
+            : this.choosing !== undefined ? "select a node" : "";
         const heading = current
             ? `Job ${index + 1} of ${jobs.length}  ·  ${this.theme.fg(statusColor, current.status)}${focusLabel ? `  ·  ${focusLabel}` : ""}`
             : this.theme.fg("muted", "No background jobs");
@@ -92,8 +105,19 @@ export class BraidPanel {
                 : "Jobs will appear here as soon as they are submitted.")),
             rule("├", "┤"),
         ];
-        const content = current && this.focus
-            ? this.renderFocus(current, this.focus, contentWidth)
+        if (current && this.choosing !== undefined && !this.nodeIds(current).includes(this.choosing)) {
+            this.choosing = this.nodeIds(current)[0];
+        }
+        // The node summary (or the selected node) stays pinned while the body scrolls.
+        const focused = current && this.focus ? this.renderFocus(current, this.focus, contentWidth) : undefined;
+        let pinned = focused?.pinned ?? (current && this.choosing !== undefined ? [this.choosingLine(current)] : []);
+        const available = rows - header.length - 4;
+        const maxPinned = Math.max(2, Math.floor(available / 2));
+        if (pinned.length > maxPinned) {
+            pinned = [...pinned.slice(0, maxPinned - 1), this.theme.fg("dim", `… ${pinned.length - maxPinned + 1} more summary lines`)];
+        }
+        const content = focused
+            ? focused.body
             : current
                 ? [
                     ...(current.error
@@ -106,29 +130,38 @@ export class BraidPanel {
                         ...(current.fullOutputPath
                             ? { fullOutputPath: current.fullOutputPath }
                             : {}),
-                    }, true, false, this.theme).render(contentWidth),
+                    }, true, false, this.theme, "", false, this.choosing).render(contentWidth),
                 ]
                 : ["No Braid jobs in this session."];
-        const height = rows - header.length - 4;
+        const height = available - (pinned.length ? pinned.length + 1 : 0);
         this.maxOffset = Math.max(0, content.length - height);
-        this.offset = Math.min(this.offset, this.maxOffset);
+        this.offset = this.focus && this.follow ? this.maxOffset : Math.min(this.offset, this.maxOffset);
+        if (!this.focus && this.choosing !== undefined && this.choosing !== this.revealed) {
+            // Bring a newly selected node's box into view in a tall flowchart.
+            this.revealed = this.choosing;
+            const line = content.findIndex(text => stripTerminalSequences(text).includes(SELECTED_NODE_MARK));
+            if (line >= 0 && (line < this.offset || line > this.offset + height - 3)) {
+                this.offset = Math.max(0, Math.min(this.maxOffset, line - Math.floor(height / 3)));
+            }
+        }
+        if (this.choosing === undefined)
+            this.revealed = undefined;
         const body = content.slice(this.offset, this.offset + height);
         while (body.length < height)
             body.push("");
         const range = `Lines ${this.offset + 1}–${Math.min(content.length, this.offset + height)}/${content.length}`;
-        const help = this.focus
-            ? contentWidth >= 72
-                ? "⌫ graph   ←/→ jobs   ↑/↓ scroll   PgUp/PgDn page   c cancel   Esc close"
-                : contentWidth >= 42
-                    ? "⌫ graph · ↑/↓ scroll · c cancel · Esc close"
-                    : "⌫ graph · Esc close"
-            : contentWidth >= 72
-                ? "←/→ jobs   ↑/↓ scroll   PgUp/PgDn page   c cancel   Esc close"
-                : contentWidth >= 42
-                    ? "←/→ jobs · ↑/↓ scroll · c cancel · Esc close"
-                    : "↑/↓ scroll · Esc close";
+        const [wide, medium, narrow] = this.focus
+            ? ["Esc back   ←/→ executions   ↑/↓ scroll   End follow   ctrl+o tools   c cancel   q close",
+                "Esc back · ←/→ executions · ↑/↓ scroll · q close", "Esc back · q close"]
+            : this.choosing !== undefined
+                ? ["↑/↓/←/→ choose node   Enter open session   Esc back   PgUp/PgDn page   q close",
+                    "↑/↓ choose · Enter open · Esc back", "Enter open · Esc back"]
+                : ["v select node   ←/→ jobs   ↑/↓ scroll   PgUp/PgDn page   c cancel   Esc close",
+                    "v select node · ←/→ jobs · ↑/↓ scroll · Esc close", "v select · Esc close"];
+        const help = contentWidth >= 80 ? wide : contentWidth >= 42 ? medium : narrow;
         return [
             ...header,
+            ...(pinned.length ? [...pinned.map(row), rule("├", "┤")] : []),
             ...body.map(row),
             rule("├", "┤"),
             row(this.theme.fg("dim", `${range}${contentWidth >= 60 ? "  ·  Jobs keep running when this panel closes" : ""}`)),
@@ -136,6 +169,17 @@ export class BraidPanel {
             rule("╰", "╯"),
         ];
     }
+    /** Graph definition order, which is also the flowchart's declaration order. */
+    nodeIds(job) {
+        return Object.keys(job.result?.nodes ?? job.live.nodes);
+    }
+    choosingLine(job) {
+        const nodes = job.result?.nodes ?? job.live.nodes;
+        const node = this.choosing !== undefined ? nodes[this.choosing] : undefined;
+        const ids = this.nodeIds(job);
+        return this.theme.fg("warning", `${SELECTED_NODE_MARK} Selected ${ids.indexOf(this.choosing ?? "") + 1}/${ids.length}: `) +
+            this.theme.bold(plain(this.choosing ?? "")) + this.theme.fg("muted", ` · ${node?.status ?? "pending"} · Enter to open its session`);
+    }
     /** A focused node can disappear after a live graph update; say so instead of failing. */
     renderFocus(job, focus, width) {
         let node;
@@ -145,39 +189,134 @@ export class BraidPanel {
                 : this.jobs.getNode(job.jobId, undefined, focus.executionId);
         }
         catch {
-            return [
-                this.theme.fg("warning", "This node or execution is no longer in the job's graph."),
-                this.theme.fg("muted", "Press Backspace to return to the graph."),
-            ];
+            return { pinned: [], body: [
+                    this.theme.fg("warning", "This node or execution is no longer in the job's graph."),
+                    this.theme.fg("muted", "Press Esc to return to the graph."),
+                ] };
         }
         // Latest-node results omit the loop iteration; their execution record has it.
         const executions = job.result?.executions ?? job.execution?.executions;
         const iteration = node.iteration ??
             (node.executionId ? executions?.[node.executionId]?.iteration : undefined);
-        return renderNodeResult(iteration === undefined ? node : { ...node, iteration }, true, this.theme, undefined, job.live.progress[node.id], job.live.observedAt)
-            .render(width);
+        const withIteration = iteration === undefined ? node : { ...node, iteration };
+        const activity = node.executionId ? this.jobs.getActivity(job.jobId, node.executionId) : undefined;
+        const transcript = node.executionId ? this.jobs.getTranscript(job.jobId, node.executionId) : undefined;
+        const siblings = this.executionsOf(job, node.id);
+        const position = node.executionId ? siblings.indexOf(node.executionId) : -1;
+        const header = [
+            ...renderSessionHeader(withIteration, this.theme, job.live.observedAt, job.live.progress[node.id], activity),
+            ...(siblings.length > 1 ? [this.theme.fg("dim", `execution ${position + 1} of ${siblings.length} for this node · ←/→ to switch`)] : []),
+        ];
+        let failure;
+        if (transcript) {
+            try {
+                return { pinned: header, body: this.session.render(transcript, width) };
+            }
+            catch (error) {
+                // A rendering failure must not take down the overlay; fall back to the summary.
+                failure = this.theme.fg("error", `Session view unavailable: ${plain(error instanceof Error ? error.message : String(error))}`);
+            }
+        }
+        // Pending, recorded before this session, or evicted: show details and history instead.
+        const note = failure ?? (node.executionId
+            ? this.theme.fg("muted", "The live session for this execution is no longer retained; showing its details and activity history.")
+            : this.theme.fg("muted", "This node has not run yet."));
+        return { pinned: header, body: [note, ...renderNodeDetails(node, this.theme, job.live.observedAt, activity)] };
+    }
+    executionsOf(job, nodeId) {
+        const executions = job.result?.executions ?? job.execution?.executions ?? {};
+        return Object.values(executions).filter(execution => execution.id === nodeId).map(execution => execution.executionId);
+    }
+    open(job, nodeId) {
+        const executionId = this.executionsOf(job, nodeId).at(-1);
+        this.focus = executionId ? { executionId } : { nodeId };
+        this.follow = true;
+        this.offset = 0;
     }
     handleInput(data) {
-        if (matchesKey(data, "escape") ||
-            data === "q" ||
-            matchesKey(data, "ctrl+c")) {
-            this.dispose();
-            this.done();
+        if (data === "q" || matchesKey(data, "ctrl+c")) {
+            this.close();
             return;
         }
         const jobs = this.jobs.list();
         const index = Math.max(0, jobs.findIndex((job) => job.jobId === this.selected));
-        if (matchesKey(data, "left") || matchesKey(data, "right")) {
+        const job = this.selected ? this.jobs.get(this.selected) : undefined;
+        if (this.focus)
+            this.sessionInput(data, job);
+        else if (this.choosing !== undefined && job)
+            this.chooseInput(data, job);
+        else if (matchesKey(data, "escape")) {
+            this.close();
+            return;
+        }
+        else if (data === "v" && job) {
+            const ids = this.nodeIds(job);
+            this.choosing = ids.find(id => (job.result?.nodes ?? job.live.nodes)[id]?.status === "running") ?? ids[0];
+        }
+        else if (matchesKey(data, "left") || matchesKey(data, "right")) {
             const step = matchesKey(data, "right") ? 1 : -1;
             this.selected = jobs[(index + step + jobs.length) % jobs.length]?.jobId;
-            this.focus = undefined;
             this.offset = 0;
         }
-        else if (matchesKey(data, "backspace") && this.focus) {
+        else
+            this.scroll(data);
+        if (data === "c" && this.selected)
+            this.jobs.cancel(this.selected);
+        this.refresh();
+    }
+    chooseInput(data, job) {
+        const ids = this.nodeIds(job);
+        const at = Math.max(0, ids.indexOf(this.choosing));
+        if (matchesKey(data, "escape") || matchesKey(data, "backspace"))
+            this.choosing = undefined;
+        else if (matchesKey(data, "up") || matchesKey(data, "left"))
+            this.choosing = ids[(at - 1 + ids.length) % ids.length];
+        else if (matchesKey(data, "down") || matchesKey(data, "right"))
+            this.choosing = ids[(at + 1) % ids.length];
+        else if (matchesKey(data, "enter") && this.choosing !== undefined)
+            this.open(job, this.choosing);
+        else
+            this.scroll(data);
+    }
+    sessionInput(data, job) {
+        if (matchesKey(data, "escape") || matchesKey(data, "backspace")) {
+            // Return to selection on the same node, so another node is one keypress away.
+            const focus = this.focus;
+            let nodeId;
+            try {
+                nodeId = job && ("nodeId" in focus ? focus.nodeId : this.jobs.getNode(job.jobId, undefined, focus.executionId).id);
+            }
+            catch { /* The node was removed; fall back to the plain graph. */ }
             this.focus = undefined;
+            this.choosing = nodeId !== undefined && job && this.nodeIds(job).includes(nodeId) ? nodeId : undefined;
             this.offset = 0;
         }
-        else if (matchesKey(data, "up"))
+        else if ((matchesKey(data, "left") || matchesKey(data, "right")) && job) {
+            let node;
+            try {
+                node = "nodeId" in this.focus ? this.jobs.getNode(job.jobId, this.focus.nodeId) : this.jobs.getNode(job.jobId, undefined, this.focus.executionId);
+            }
+            catch {
+                return;
+            }
+            const siblings = this.executionsOf(job, node.id);
+            const at = node.executionId ? siblings.indexOf(node.executionId) : -1;
+            const next = siblings[at + (matchesKey(data, "right") ? 1 : -1)];
+            if (next) {
+                this.focus = { executionId: next };
+                this.follow = true;
+            }
+        }
+        else if (matchesKey(data, "end"))
+            this.follow = true;
+        else if (matchesKey(data, "ctrl+o"))
+            this.session.toggleExpanded();
+        else
+            this.scroll(data);
+    }
+    scroll(data) {
+        const before = this.offset;
+        if (matchesKey(data, "up"))
             this.offset = Math.max(0, this.offset - 1);
         else if (matchesKey(data, "down"))
             this.offset = Math.min(this.maxOffset, this.offset + 1);
@@ -185,9 +324,19 @@ export class BraidPanel {
             this.offset = Math.max(0, this.offset - 10);
         else if (matchesKey(data, "pageDown"))
             this.offset = Math.min(this.maxOffset, this.offset + 10);
-        else if (data === "c" && this.selected)
-            this.jobs.cancel(this.selected);
-        this.refresh();
+        else if (matchesKey(data, "home"))
+            this.offset = 0;
+        else
+            return;
+        // Scrolling up pauses following; reaching the bottom resumes it.
+        if (this.offset < before)
+            this.follow = false;
+        else if (this.offset >= this.maxOffset)
+            this.follow = true;
+    }
+    close() {
+        this.dispose();
+        this.done();
     }
     invalidate() { }
     dispose() {

package/dist/display.js

@@ -1,26 +1,46 @@
 import { render as renderMermaid } from "grok-mermaid";
-import { Text, stripTerminalSequences, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
+import { Text, sliceByColumn, stripTerminalSequences, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
+import { formatActivityStatus, } from "@chrok/braid";
 export const MAX_VISIBLE_EVENTS = 80;
 export const MAX_VISIBLE_NODES = 80;
 class FixedLines {
     lines;
     chartStart;
     chartLength;
-    constructor(lines, chartStart = lines.length, chartLength = 0) {
+    fallback;
+    focusMarks;
+    /**
+     * A too-wide chart is cropped to the terminal width around the first
+     * `focusMarks` entry drawn in it (the selected node, then a running node),
+     * or from its left edge. `fallback` (a node list while selecting) appears when
+     * there is no chart, or when the selected node cannot be found in it.
+     */
+    constructor(lines, chartStart = lines.length, chartLength = 0, fallback = [], focusMarks = []) {
         this.lines = lines;
         this.chartStart = chartStart;
         this.chartLength = chartLength;
+        this.fallback = fallback;
+        this.focusMarks = focusMarks;
     }
     render(width) {
         const chart = this.lines.slice(this.chartStart, this.chartStart + this.chartLength);
-        if (chart.length === 0)
+        const fallback = this.fallback.map((line) => truncateToWidth(line, width, ""));
+        if (chart.length === 0 && fallback.length === 0)
             return this.lines.map((line) => truncateToWidth(line, width, ""));
-        const chartWidth = Math.max(...chart.map((line) => visibleWidth(line)));
-        const chartOutput = chartWidth <= width
-            ? chart
-            : [
-                truncateToWidth(`[Flowchart needs ${chartWidth} columns; terminal width is ${width}. Expand your terminal to see it.]`, width, ""),
+        const chartWidth = chart.length ? Math.max(...chart.map((line) => visibleWidth(line))) : 0;
+        let chartOutput = chart;
+        if (!chart.length)
+            chartOutput = fallback;
+        else if (chartWidth > width) {
+            const focus = this.focus(chart);
+            const start = focus === undefined ? 0 : Math.max(0, Math.min(chartWidth - width, focus.column - Math.floor(width / 2)));
+            chartOutput = [
+                truncateToWidth(`[chart ${start + 1}–${start + width} of ${chartWidth} cols${focus ? ` · ${focus.label}` : ""}]`, width, ""),
+                ...chart.map((line) => sliceByColumn(line, start, width, true)),
+                // The first mark is the selection; list nodes if it is not drawn.
+                ...(this.focusMarks.length && focus?.mark !== this.focusMarks[0].mark ? fallback : []),
             ];
+        }
         const output = [];
         let chartInserted = false;
         for (let index = 0; index < this.lines.length; index++) {
@@ -37,6 +57,22 @@ class FixedLines {
             output.push(...chartOutput);
         return output;
     }
+    /** The first focus mark drawn in the chart and its centre column. */
+    focus(chart) {
+        for (const { mark, label } of this.focusMarks) {
+            for (const line of chart) {
+                const plain = stripTerminalSequences(line);
+                const index = plain.indexOf(mark);
+                if (index < 0)
+                    continue;
+                // Centre on the label: from the mark to the node's right border, when drawn.
+                const border = plain.indexOf("│", index);
+                const end = border < 0 ? index : border;
+                return { mark, label, column: Math.floor((visibleWidth(plain.slice(0, index)) + visibleWidth(plain.slice(0, end))) / 2) };
+            }
+        }
+        return undefined;
+    }
     invalidate() { }
 }
 function record(value) {
@@ -121,7 +157,9 @@ function nodeElapsed(node, now) {
     }
     return "—";
 }
-function mermaidLabelLines(id, result) {
+/** Replaces the selected node's one-column status icon, so selection never moves the layout. */
+export const SELECTED_NODE_MARK = "◆";
+function mermaidLabelLines(id, result, selected = false) {
     const progress = "progress" in result ? result.progress?.[id] : undefined;
     const node = result.nodes[id];
     if (!node)
@@ -140,7 +178,7 @@ function mermaidLabelLines(id, result) {
     const now = "observedAt" in result ? result.observedAt : Date.now();
     const iteration = "executions" in result ? result.executions[node.executionId ?? ""]?.iteration : result.iterations?.[id];
     const lines = [
-        `${icon} ${compact(id, 24)}${iteration ? ` #${iteration}` : ""}`,
+        `${selected ? SELECTED_NODE_MARK + icon.slice(1) : icon} ${compact(id, 24)}${iteration ? ` #${iteration}` : ""}`,
         `${status}${decision} · ${nodeElapsed(node, now)}`,
     ];
     if (progress) {
@@ -152,7 +190,7 @@ function mermaidLabelLines(id, result) {
     }
     return lines;
 }
-function mermaidSource(result) {
+function mermaidSource(result, selected) {
     const parts = graphParts(result);
     const ids = Object.keys(parts.nodes);
     const names = new Map(ids.map((id, index) => [id, `n${index}`]));
@@ -173,15 +211,22 @@ function mermaidSource(result) {
     for (const id of ids) {
         const shape = parts.nodeTypes[id] === "decision" ? "{" : "[";
         const close = parts.nodeTypes[id] === "decision" ? "}" : "]";
-        lines.push(`  ${names.get(id)}${shape}"${mermaidLabelLines(id, result).map(escapeMermaidText).join("<br/>")}"${close}`);
+        lines.push(`  ${names.get(id)}${shape}"${mermaidLabelLines(id, result, id === selected).map(escapeMermaidText).join("<br/>")}"${close}`);
     }
     for (const edge of parts.edges) {
         lines.push(`  ${names.get(edge.from)} -->${edge.choice ? `|${escapeMermaidText(edge.choice)}|` : ""} ${names.get(edge.to)}`);
     }
     return lines.join("\n");
 }
-function mermaidLines(result, theme) {
-    const art = renderMermaid(mermaidSource(result));
+function mermaidLines(result, theme, selected) {
+    let art;
+    try {
+        art = renderMermaid(mermaidSource(result, selected));
+    }
+    catch {
+        // The chart is a view of state already listed elsewhere; never fail the panel for it.
+        return [];
+    }
     if (!art)
         return [];
     return art.styled.map((row) => row
@@ -190,6 +235,8 @@ function mermaidLines(result, theme) {
             case "border":
                 return theme.fg("borderMuted", span.text);
             case "text":
+                if (selected !== undefined && span.text.includes(SELECTED_NODE_MARK))
+                    return theme.bg("selectedBg", theme.bold(theme.fg("warning", span.text)));
                 return span.text.includes("▶ ACTIVE")
                     ? theme.bg("selectedBg", theme.bold(theme.fg("accent", span.text)))
                     : theme.fg("text", span.text);
@@ -428,8 +475,46 @@ export function applyProgress(state, progress) {
         writable: true,
     });
 }
+export const COLLAPSED_ACTIVITY_ENTRIES = 6;
+/** Live phase, waits, and chronological history; absence of activity is shown, not judged. */
+export function renderActivity(activity, expanded, theme, now, part = "all") {
+    const ago = (at) => elapsed(Math.max(0, now - at));
+    if (part === "history")
+        return renderActivity(activity, expanded, theme, now).slice(renderActivity(activity, expanded, theme, now, "summary").length);
+    const lines = [theme.fg(activity.finishedAt === undefined ? "accent" : "muted", `activity: ${compact(formatActivityStatus(activity, now), 200)}`)];
+    const model = activity.model;
+    if (model && model.completedAt === undefined) {
+        lines.push(theme.fg("muted", model.firstStreamAt === undefined
+            ? `  model request #${model.round} sent ${ago(model.startedAt)} ago · no stream events received yet`
+            : `  model request #${model.round} sent ${ago(model.startedAt)} ago · ${model.streamEvents} stream events, ${compactCount(model.receivedChars)} chars · last ${ago(model.lastStreamAt)} ago`));
+        if (model.tail)
+            lines.push(theme.fg("dim", `  receiving ${model.receiving === "tool_call" ? `${compact(model.toolName ?? "tool call", 40)} arguments` : model.receiving ?? "output"}: …${compact(model.tail, 160)}`));
+    }
+    for (const tool of activity.tools) {
+        lines.push(theme.fg("warning", `  tool ${compact(tool.name, 40)} running ${ago(tool.startedAt)} · ${tool.lastOutputAt === undefined ? "no output yet" : `last output ${ago(tool.lastOutputAt)} ago`}`));
+        lines.push(theme.fg("dim", `    args: ${compact(tool.arguments, 200)}`));
+        if (tool.outputTail)
+            lines.push(theme.fg("dim", `    output: …${compact(tool.outputTail, 200)}`));
+    }
+    for (const limitation of activity.limitations)
+        lines.push(theme.fg("muted", `  unavailable: ${compact(limitation, 200)}`));
+    if (part === "summary")
+        return lines;
+    const visible = expanded ? activity.entries : activity.entries.slice(-COLLAPSED_ACTIVITY_ENTRIES);
+    const hidden = activity.droppedEntries + activity.entries.length - visible.length;
+    lines.push(theme.fg("dim", `history · ${activity.sequence} events${hidden ? ` · ${hidden} earlier ${expanded ? "trimmed" : "hidden (expand for more)"}` : ""}:`));
+    for (const entry of visible) {
+        const color = entry.isError ? "error" : entry.kind === "tool_call" ? "accent" : entry.kind === "assistant" ? "text" : "muted";
+        lines.push(theme.fg(color, `  ${`+${elapsed(Math.max(0, entry.timestamp - activity.startedAt))}`.padStart(7)} ${compact(entry.summary, 200)}`));
+        // Show a detail preview only when the summary line does not already contain it.
+        if (expanded && entry.detail && entry.kind !== "workspace" && !compact(entry.summary, 400).includes(compact(entry.detail, 400))) {
+            lines.push(theme.fg("dim", `          ${compact(entry.detail, 300)}${entry.detailLength ? ` (${compactCount(entry.detailLength)} chars)` : ""}`));
+        }
+    }
+    return lines;
+}
 /** Focused status reads must show the requested execution, including historical ones. */
-export function renderNodeResult(node, expanded, theme, fullOutputPath, progress, now = Date.now()) {
+export function renderNodeResult(node, expanded, theme, fullOutputPath, progress, now = Date.now(), activity) {
     const failed = node.status === "failed";
     const clean = (value) => stripTerminalSequences(value).replace(/[\u0000-\u0008\u000b-\u001f\u007f-\u009f]/gu, "");
     const timing = [
@@ -453,13 +538,48 @@ export function renderNodeResult(node, expanded, theme, fullOutputPath, progress
         ...(node.decision ? [theme.fg("accent", `decision: ${compact(node.decision, 80)}`)] : []),
         ...(node.error ? [theme.fg("error", `${node.error.code}: ${clean(node.error.message)}`)] : []),
         ...(node.skipReason ? [theme.fg("muted", `skipped: ${node.skipReason}`)] : []),
+        // Activity describes one execution; never mix histories from repeated visits.
+        ...(activity && activity.executionId === node.executionId ? renderActivity(activity, expanded, theme, now) : []),
         ...(node.output ? [expanded ? clean(node.output) : compact(node.output, 400)] : []),
         ...(!expanded && node.output && (node.output.length > 400 || node.output.includes("\n")) ? [theme.fg("dim", "Expand for full node output")] : []),
         ...(fullOutputPath ? [theme.fg("dim", `full node result: ${compact(fullOutputPath, 240)}`)] : []),
     ];
     return new Text(lines.join("\n"), 0, 0);
 }
-export function renderGraphResult(result, expanded, isPartial, theme, fallback = "", isError = false) {
+/** Status, timing, and live waits above a node's session transcript. */
+export function renderSessionHeader(node, theme, now, progress, activity) {
+    const failed = node.status === "failed";
+    const live = progress && (!progress.executionId || progress.executionId === node.executionId) ? progress : undefined;
+    const facts = [
+        ...(node.executionId ? [compact(node.executionId, 80)] : []),
+        ...(node.iteration ? [`iteration #${node.iteration}`] : []),
+        ...(node.model ? [compact(node.model, 60)] : []),
+        ...(node.startedAt !== undefined || node.latencyMs !== undefined ? [`elapsed ${nodeElapsed(node, now)}`] : []),
+        ...(node.usage ? [`${compactCount(node.usage.inputTokens)} in / ${compactCount(node.usage.outputTokens)} out tokens`] : []),
+    ];
+    return [
+        theme.fg(failed ? "error" : "accent", `${failed ? "✗" : node.status === "completed" ? "✓" : node.status === "running" ? "▶" : "○"} Braid node ${compact(node.id, 80)} · ${node.status}`),
+        ...(facts.length ? [theme.fg("muted", facts.join(" · "))] : []),
+        ...(live ? [theme.fg("muted", `context ${live.contextSource === "estimate" ? "~" : ""}${compactCount(live.contextTokens)}/${live.contextWindow === undefined ? "—" : compactCount(live.contextWindow)} · ${live.toolCalls} tool calls in ${live.toolRounds} rounds · ${live.phase} phase`)] : []),
+        ...(activity && activity.executionId === node.executionId ? renderActivity(activity, false, theme, now, "summary") : []),
+        ...(node.error ? [theme.fg("error", `${node.error.code}: ${compact(node.error.message, 300)}`)] : []),
+    ];
+}
+/** What a node view shows below its pinned header when no live session is retained. */
+export function renderNodeDetails(node, theme, now, activity) {
+    const clean = (value) => stripTerminalSequences(value).replace(/[\u0000-\u0008\u000b-\u001f\u007f-\u009f]/gu, "");
+    const workspace = node.workspace;
+    const workspaceActive = workspace && ["preparing", "ready", "failed"].includes(workspace.state);
+    const workspaceRef = workspaceActive ? workspace.worktreeRoot : workspace?.checkpointRef ?? workspace?.reason;
+    return [
+        ...(workspace ? [theme.fg("dim", `workspace: ${workspace.mode} · ${workspace.state}${workspaceRef ? ` · ${compact(workspaceRef, 160)}` : ""}`)] : []),
+        ...(node.decision ? [theme.fg("accent", `decision: ${compact(node.decision, 80)}`)] : []),
+        ...(node.skipReason ? [theme.fg("muted", `skipped: ${node.skipReason}`)] : []),
+        ...(activity && activity.executionId === node.executionId ? renderActivity(activity, true, theme, now, "history") : []),
+        ...(node.output ? ["", ...clean(node.output).split("\n")] : []),
+    ];
+}
+export function renderGraphResult(result, expanded, isPartial, theme, fallback = "", isError = false, selectedNodeId) {
     if (isError || !result?.nodes) {
         const message = fallback ||
             (isPartial ? "Braid is running…" : "Braid returned no execution details");
@@ -495,8 +615,17 @@ export function renderGraphResult(result, expanded, isPartial, theme, fallback =
     if ("executions" in result)
         lines.push(theme.fg("dim", `${Object.keys(result.executions).length} executions · revision ${result.revision}`));
     const chartStart = lines.length;
-    const chart = mermaidLines(result, theme);
+    const chart = mermaidLines(result, theme, selectedNodeId);
     lines.push(...chart);
+    // Selection must stay usable when the chart cannot be drawn or does not fit.
+    const nodeList = selectedNodeId === undefined ? [] : [
+        theme.fg("dim", chart.length ? "nodes (selected node not found in the flowchart):" : "nodes (flowchart unavailable):"),
+        ...Object.keys(graphParts(result).nodes).map(id => {
+            const node = result.nodes[id];
+            const text = `${id === selectedNodeId ? `${SELECTED_NODE_MARK} ` : "  "}${compact(id, 60)} · ${node?.status ?? "pending"}`;
+            return id === selectedNodeId ? theme.bg("selectedBg", theme.bold(theme.fg("warning", text))) : theme.fg("muted", text);
+        }),
+    ];
     const workspaces = Object.values(result.workspaces ?? {}).filter(workspace => workspace.worktreeRoot);
     if (workspaces.length) {
         const active = workspaces.filter(workspace => ["preparing", "ready", "failed"].includes(workspace.state)).length;
@@ -512,5 +641,8 @@ export function renderGraphResult(result, expanded, isPartial, theme, fallback =
         lines.push(...renderEventLog(result.events ?? [], true, theme));
     if ("fullOutputPath" in result && result.fullOutputPath)
         lines.push(theme.fg("dim", `full result/log: ${compact(result.fullOutputPath, 240)}`));
-    return new FixedLines(lines, chartStart, chart.length);
+    return new FixedLines(lines, chartStart, chart.length, nodeList, [
+        ...(selectedNodeId === undefined ? [] : [{ mark: SELECTED_NODE_MARK, label: "selected node" }]),
+        { mark: "▶ ACTIVE", label: "running node" },
+    ]);
 }

package/dist/index.js

@@ -108,6 +108,8 @@ function isJobSnapshot(value) {
         ["running", "completed", "failed", "cancelled"].includes(job.status ?? "") &&
         !!job.live && typeof job.live.nodes === "object" && job.live.nodes !== null;
 }
+/** Focused reads return the latest activity entries; activityBefore pages earlier ones. */
+export const STATUS_ACTIVITY_ENTRIES = 40;
 function executionControl(job) {
     return job.execution && {
         status: job.execution.status,
@@ -202,11 +204,12 @@ export function createBraidTools(jobs) {
         jobId: Type.Optional(text("Exact session handle (e.g. job-1) or UUID; omit all IDs to list jobs.")),
         executionId: Type.Optional(text("Exact execution ID from braid_status or a reminder; requires jobId. Takes precedence over nodeId; if both are provided they must match.")),
         nodeId: Type.Optional(text("Exact node ID; requires jobId. Retrieve this node's latest full output/error even while the job is running.")),
+        activityBefore: Type.Optional(Type.Integer({ minimum: 1, maximum: Number.MAX_SAFE_INTEGER, description: `Focused reads include activity: the current phase, model/tool waits, and the latest ${STATUS_ACTIVITY_ENTRIES} history entries. Pass an entry sequence to page earlier entries.` })),
     }, { additionalProperties: false });
     const statusTool = defineTool({
         name: "braid_status",
         label: "Braid status",
-        description: "Retrieve a background Braid job's status, node progress, and final results by exact session handle (e.g. job-1) or UUID in jobId. Add executionId for an exact execution, or nodeId for the latest instance, including intermediate results while the job runs. All job reads include current execution.revision and execution.pausedExecutionIds for live control; node.revision is the historical invocation revision. Large results include a path to the full JSON, including while running. For usage totals use usage (Pi provider accounting, including rounds from failed nodes), or piUsage in the saved final result. Prefer the short handle from submission/reminders. Omit all IDs to list jobs in this session. Completion reminders arrive automatically; avoid repeated polling.",
+        description: "Retrieve a background Braid job's status, node progress, and final results by exact session handle (e.g. job-1) or UUID in jobId. Add executionId for an exact execution, or nodeId for the latest instance, including intermediate results while the job runs. Focused reads include live activity: phase, time in phase and since the last observed signal, model request/stream state, running tools, and recent history. Lack of observed activity is a diagnostic signal, not proof of a stall. All job reads include current execution.revision and execution.pausedExecutionIds for live control; node.revision is the historical invocation revision. Large results include a path to the full JSON, including while running. For usage totals use usage (Pi provider accounting, including rounds from failed nodes), or piUsage in the saved final result. Prefer the short handle from submission/reminders. Omit all IDs to list jobs in this session. Completion reminders arrive automatically; avoid repeated polling.",
         parameters: statusParameters,
         renderResult(result, options, theme, ctx) {
             const job = result.details;
@@ -227,7 +230,7 @@ export function createBraidTools(jobs) {
                 : nodeId && state && Object.hasOwn(state.nodes, nodeId) ? state.nodes[nodeId] : undefined);
             // Render at the read's observation time so a saved result never keeps counting.
             if (selectedNode)
-                return renderNodeResult(selectedNode, options.expanded, theme, job.nodeOutputPath, job.live.progress?.[selectedNode.id], job.live.observedAt);
+                return renderNodeResult(selectedNode, options.expanded, theme, job.nodeOutputPath, job.live.progress?.[selectedNode.id], job.live.observedAt, job.selectedActivity);
             if (executionId || nodeId)
                 return new Text(fallback || "Braid returned no node details", 0, 0);
             if (job.error)
@@ -242,6 +245,8 @@ export function createBraidTools(jobs) {
         async execute(_id, params) {
             if ((params.nodeId !== undefined || params.executionId !== undefined) && !params.jobId)
                 throw new Error("nodeId/executionId requires jobId");
+            if (params.activityBefore !== undefined && params.nodeId === undefined && params.executionId === undefined)
+                throw new Error("activityBefore requires nodeId or executionId");
             if (!params.jobId)
                 return {
                     content: [{ type: "text", text: JSON.stringify(jobs.list()) }],
@@ -253,9 +258,18 @@ export function createBraidTools(jobs) {
             if (params.nodeId !== undefined || params.executionId !== undefined) {
                 const node = jobs.getNode(params.jobId, params.nodeId, params.executionId);
                 const { id, executionId, status, error, output, ...nodeDetails } = node;
+                const activity = executionId ? jobs.getActivity(params.jobId, executionId, {
+                    limit: STATUS_ACTIVITY_ENTRIES, ...(params.activityBefore === undefined ? {} : { before: params.activityBefore }),
+                }) : undefined;
+                // While running, activity is the useful part; afterwards the output is,
+                // so it comes first and history cannot push it out of the preview.
+                const running = activity && activity.finishedAt === undefined;
+                const live = activity ? { observedAt: job.live.observedAt, activity } : {};
                 const full = JSON.stringify({
                     jobId: job.jobId, handle: job.handle, status: job.status, execution: executionControl(job),
+                    ...(running ? live : {}),
                     node: { id, executionId, status, error, output, ...nodeDetails },
+                    ...(running ? {} : live),
                 }, null, 2);
                 const preview = truncateHead(full);
                 let suffix = "";
@@ -269,7 +283,7 @@ export function createBraidTools(jobs) {
                 }
                 // Focused reads do not claim the whole job's usage; final job retrieval does.
                 return { content: [{ type: "text", text: preview.content + suffix }], details: {
-                        ...job, selectedNode: node, ...(nodeOutputPath ? { nodeOutputPath } : {}),
+                        ...job, selectedNode: node, ...(activity ? { selectedActivity: activity } : {}), ...(nodeOutputPath ? { nodeOutputPath } : {}),
                     } };
             }
             const { jobId, handle, status, error, usage: providerUsage, fullOutputPath, execution, ...snapshot } = job;

package/dist/jobs.js

@@ -3,9 +3,10 @@ import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { setImmediate as nextTurn } from "node:timers/promises";
 import { truncateHead, } from "@earendil-works/pi-coding-agent";
-import { startBraid, validateGraph, } from "@chrok/braid";
+import { ExecutionActivityTracker, startBraid, validateGraph, } from "@chrok/braid";
 import { applyEvent, applyProgress, createLiveState, } from "./display.js";
 import { createPiRunner, sumPiUsage } from "./runner.js";
+import { PiTranscripts } from "./transcript.js";
 /** Jobs belong to one extension/session lifetime, independently of foreground turns. */
 export class BraidJobs {
     onFinished;
@@ -57,6 +58,8 @@ export class BraidJobs {
             done: Promise.resolve(),
             usageClaimed: false,
             runningExecutions: new Map(),
+            activity: new ExecutionActivityTracker({ onChange: () => this.changed() }),
+            transcripts: new PiTranscripts(() => this.changed()),
             nodeResults: new Map(snapshot.nodes.map((node) => [node.id, { id: node.id, status: "pending" }])),
         };
         this.jobs.set(job.jobId, job);
@@ -79,6 +82,8 @@ export class BraidJobs {
                 runner: (() => {
                     const invoke = createPiRunner(registry, {
                         cwd,
+                        activity: job.activity,
+                        transcripts: job.transcripts,
                         maxToolRounds: options.maxToolRounds ?? Infinity,
                         maxToolCalls: options.maxToolCalls ?? Infinity,
                         onUsage: (usage) => {
@@ -92,9 +97,19 @@ export class BraidJobs {
                             this.changed();
                         },
                     });
-                    return async (request) => { await nextTurn(); return invoke(request); };
+                    return async (request) => {
+                        try {
+                            await nextTurn();
+                            return await invoke(request);
+                        }
+                        finally {
+                            job.activity.workerFinished(request.execution.executionId);
+                            job.transcripts.finish(request.execution.executionId, request.signal.aborted ? "Execution was stopped before this step finished" : undefined);
+                        }
+                    };
                 })(),
                 onEvent: (event) => {
+                    job.activity.observe(event);
                     if (event.type === "workspace_updated") {
                         job.workspaces ??= {};
                         Object.defineProperty(job.workspaces, event.workspace.executionId ?? event.workspace.nodeId, {
@@ -198,7 +213,7 @@ export class BraidJobs {
         const job = this.lookup(jobId);
         if (!job)
             return undefined;
-        const { run: _run, controller: _controller, done: _done, usageClaimed: _claimed, nodeResults: _nodeResults, runningExecutions: _runningExecutions, ...snapshot } = job;
+        const { run: _run, controller: _controller, done: _done, usageClaimed: _claimed, nodeResults: _nodeResults, runningExecutions: _runningExecutions, activity: _activity, transcripts: _transcripts, ...snapshot } = job;
         const copy = structuredClone(snapshot);
         if (job.run)
             copy.execution = job.run.snapshot();
@@ -220,6 +235,20 @@ export class BraidJobs {
             throw new Error(`Unknown Braid node or execution in ${job.handle}. Use braid_status with only jobId to list executions.`);
         return structuredClone(node);
     }
+    /** Live activity for one exact execution; undefined until it is first observed. */
+    getActivity(jobId, executionId, page) {
+        const job = this.lookup(jobId);
+        if (!job)
+            throw this.unknownJob(jobId);
+        return job.activity.get(executionId, page);
+    }
+    /** The live conversation for one execution; read-only, and absent once evicted. */
+    getTranscript(jobId, executionId) {
+        const job = this.lookup(jobId);
+        if (!job)
+            throw this.unknownJob(jobId);
+        return job.transcripts.get(executionId);
+    }
     update(jobId, patch) {
         const job = this.lookup(jobId);
         if (!job)

package/dist/runner.js

@@ -41,6 +41,9 @@ export function createPiRunner(registry, onUsageOrOptions, cwd = process.cwd())
         const model = registry.find(name.slice(0, slash), name.slice(slash + 1));
         if (!model)
             throw new Error(`Pi model '${name}' is not registered; use an exact provider/modelId from /model`);
+        const activity = options.activity?.recorder(request);
+        if (!registry.stream)
+            activity?.limitation("This Pi model registry does not stream; model activity is observed only when a request starts and finishes.");
         const workspace = request.workspace ?? {
             nodeId: request.node.id, mode: "read-only", workingDirectory: sourceDirectory, state: "ready",
         };
@@ -139,6 +142,14 @@ export function createPiRunner(registry, onUsageOrOptions, cwd = process.cwd())
             tools: allToolDefinitions,
         };
         const toolByName = new Map(fileTools.map((tool) => [tool.name, tool]));
+        const executionId = request.execution.executionId;
+        const transcripts = executionId === undefined ? undefined : options.transcripts;
+        transcripts?.start(executionId, request.node.id, workingDirectory, {
+            prompt: request.node.prompt ?? `Default ${request.node.type} instructions`,
+            goal: request.goal,
+            predecessors: request.predecessors.length,
+            workspace: `${workspace.mode} · ${workingDirectory}`,
+        }, toolByName);
         const systemPrompt = context.systemPrompt;
         const sessionId = crypto.randomUUID();
         const usage = { inputTokens: 0, outputTokens: 0 };
@@ -171,14 +182,54 @@ export function createPiRunner(registry, onUsageOrOptions, cwd = process.cwd())
                 toolRounds,
                 phase: "model",
             });
-            // Registry.complete resolves stored API keys, OAuth, custom headers and endpoints.
-            const response = await registry.complete(model, context, {
+            // The registry resolves stored API keys, OAuth, custom headers and endpoints.
+            // complete() is stream().result(); streaming only adds observation.
+            const requestOptions = {
                 signal: request.signal,
                 sessionId,
                 cacheRetention: "none",
                 transport: "sse",
                 maxRetries: 0,
+            };
+            activity?.modelRequest();
+            let response;
+            try {
+                if (registry.stream) {
+                    const stream = registry.stream(model, context, requestOptions);
+                    for await (const event of stream) {
+                        if (event.type !== "done" && event.type !== "error")
+                            transcripts?.streaming(executionId, event.partial);
+                        if (event.type === "text_delta")
+                            activity?.modelStream("text", event.delta);
+                        else if (event.type === "thinking_delta")
+                            activity?.modelStream("reasoning", event.delta);
+                        else if (event.type === "toolcall_start" || event.type === "toolcall_delta") {
+                            const block = event.partial.content[event.contentIndex];
+                            activity?.modelStream("tool_call", event.type === "toolcall_delta" ? event.delta : "", block?.type === "toolCall" ? block.name : undefined);
+                        }
+                    }
+                    response = await stream.result();
+                }
+                else {
+                    response = await registry.complete(model, context, requestOptions);
+                }
+            }
+            catch (error) {
+                activity?.modelError(error instanceof Error ? error.message : String(error));
+                throw error;
+            }
+            transcripts?.assistant(executionId, response);
+            activity?.modelResponse({
+                text: response.content.flatMap(block => block.type === "text" ? [block.text] : []).join("\n\n"),
+                reasoning: response.content.flatMap(block => block.type === "thinking" ? [block.thinking] : []).join("\n\n"),
+                toolCalls: response.content.flatMap(block => block.type === "toolCall" ? [{ id: block.id, name: block.name }] : []),
+                stopReason: response.stopReason,
+                inputTokens: response.usage.input + response.usage.cacheRead + response.usage.cacheWrite,
+                outputTokens: response.usage.output,
             });
+            if (response.stopReason !== "stop" && response.stopReason !== "toolUse") {
+                activity?.modelError(response.errorMessage || `Pi model ended with '${response.stopReason}'`);
+            }
             actualModel = `${response.provider}/${response.responseModel ?? response.model}`;
             const providerContextTokens = response.usage.input +
                 response.usage.cacheRead +
@@ -234,7 +285,13 @@ export function createPiRunner(registry, onUsageOrOptions, cwd = process.cwd())
                     return toolResult(call, "Merge dispositions recorded. Return your final answer.", false);
                 }
                 const args = validateToolCall(allToolDefinitions, call);
-                const execute = () => tool.execute(call.id, args, request.signal, undefined);
+                const execute = () => tool.execute(call.id, args, request.signal, 
+                // Bash sends cumulative, throttled output snapshots.
+                (partial) => {
+                    activity?.toolOutput(call.id, partial.content
+                        .flatMap(block => block.type === "text" ? [block.text] : []).join(""), "replace");
+                    transcripts?.toolUpdate(executionId, call.id, { content: partial.content, details: partial.details });
+                });
                 const result = ["write", "edit", "bash", "powershell"].includes(call.name) && request.withWorkspaceWrite
                     ? await request.withWorkspaceWrite(execute)
                     : await execute();
@@ -254,6 +311,24 @@ export function createPiRunner(registry, onUsageOrOptions, cwd = process.cwd())
                 return toolResult(call, error instanceof Error ? error.message : String(error), true);
             }
         };
+        const executeCall = async (call) => {
+            if (call.name !== "decide")
+                return executeFileTool(call);
+            if (request.node.type !== "decision") {
+                return toolResult(call, "decide is available only on decision nodes", true);
+            }
+            const args = call.arguments;
+            if (!args ||
+                Array.isArray(args) ||
+                Object.keys(args).length !== 1 ||
+                typeof args.choice !== "string") {
+                throw new Error("decide requires exactly one string argument: choice");
+            }
+            // No coercion or prose parsing: the core enforces the enum and exactly one call.
+            request.decide(args.choice);
+            decided = true;
+            return toolResult(call, JSON.stringify({ choice: args.choice }), false);
+        };
         while (true) {
             const response = await complete();
             textParts.push(...response.content
@@ -287,26 +362,20 @@ export function createPiRunner(registry, onUsageOrOptions, cwd = process.cwd())
             const results = [];
             for (const call of calls) {
                 request.signal.throwIfAborted();
-                if (call.name === "decide") {
-                    if (request.node.type !== "decision") {
-                        results.push(toolResult(call, "decide is available only on decision nodes", true));
-                        continue;
-                    }
-                    const args = call.arguments;
-                    if (!args ||
-                        Array.isArray(args) ||
-                        Object.keys(args).length !== 1 ||
-                        typeof args.choice !== "string") {
-                        throw new Error("decide requires exactly one string argument: choice");
-                    }
-                    // No coercion or prose parsing: the core enforces the enum and exactly one call.
-                    request.decide(args.choice);
-                    decided = true;
-                    results.push(toolResult(call, JSON.stringify({ choice: args.choice }), false));
+                activity?.toolStart(call.id, call.name, call.arguments);
+                transcripts?.toolStart(executionId, call.id);
+                let result;
+                try {
+                    result = await executeCall(call);
                 }
-                else {
-                    results.push(await executeFileTool(call));
+                catch (error) {
+                    activity?.toolEnd(call.id, error instanceof Error ? error.message : String(error), true);
+                    throw error;
                 }
+                activity?.toolEnd(call.id, result.content
+                    .flatMap(block => block.type === "text" ? [block.text] : []).join("\n"), result.isError);
+                transcripts?.toolResult(executionId, result);
+                results.push(result);
             }
             context.messages.push(...results);
             if (decided) {

package/dist/session-view.js

@@ -0,0 +1,112 @@
+import { AssistantMessageComponent, getMarkdownTheme, ToolExecutionComponent, UserMessageComponent, } from "@earendil-works/pi-coding-agent";
+import { Container, stripTerminalSequences, Text } from "@earendil-works/pi-tui";
+const plain = (value) => stripTerminalSequences(value).replace(/\p{Cc}/gu, " ");
+/**
+ * Renders a worker conversation with Pi's own chat components, applying only
+ * what changed since the last sync, the way Pi's interactive mode streams.
+ */
+export class NodeSessionView {
+    tui;
+    theme;
+    chat = new Container();
+    transcript;
+    version = -1;
+    rendered = 0;
+    streaming;
+    tools = new Map();
+    partials = new Map();
+    expanded = false;
+    constructor(tui, theme) {
+        this.tui = tui;
+        this.theme = theme;
+    }
+    /** Tool output expansion, like Pi's ctrl+o. */
+    toggleExpanded() {
+        this.expanded = !this.expanded;
+        for (const tool of this.tools.values())
+            tool.setExpanded(this.expanded);
+        this.version = -1;
+    }
+    render(transcript, width) {
+        this.sync(transcript);
+        // Pi marks its own prompts for terminal shell integration; these are not prompts.
+        return this.chat.render(width).map(line => line.replace(/\x1b\]133;[^\x07\x1b]*(?:\x07|\x1b\\)/g, ""));
+    }
+    sync(transcript) {
+        if (transcript !== this.transcript)
+            this.reset(transcript);
+        if (transcript.version === this.version)
+            return;
+        this.version = transcript.version;
+        for (; this.rendered < transcript.messages.length; this.rendered++) {
+            const message = transcript.messages[this.rendered];
+            if (message.role === "toolResult") {
+                this.tools.get(message.toolCallId)?.updateResult(message);
+                this.partials.delete(message.toolCallId);
+                continue;
+            }
+            // The final message replaces the streamed partial in the same component.
+            const component = this.streaming ?? this.add(new AssistantMessageComponent(undefined, false, getMarkdownTheme()));
+            this.streaming = undefined;
+            component.updateContent(message, false);
+            this.toolCalls(message, transcript, true);
+        }
+        if (transcript.streaming) {
+            this.streaming ??= this.add(new AssistantMessageComponent(undefined, false, getMarkdownTheme()));
+            this.streaming.updateContent(transcript.streaming, true);
+            this.toolCalls(transcript.streaming, transcript, false);
+        }
+        for (const [callId, partial] of transcript.running) {
+            const tool = this.tools.get(callId);
+            if (!tool || this.partials.get(callId) === partial)
+                continue;
+            this.partials.set(callId, partial);
+            tool.markExecutionStarted();
+            if (partial)
+                tool.updateResult({ ...partial, isError: false }, true);
+        }
+    }
+    toolCalls(message, transcript, complete) {
+        for (const block of message.content) {
+            if (block.type !== "toolCall")
+                continue;
+            let tool = this.tools.get(block.id);
+            if (!tool) {
+                tool = new ToolExecutionComponent(block.name, block.id, block.arguments, undefined, transcript.renderers.get(block.name), this.tui, transcript.cwd);
+                tool.setExpanded(this.expanded);
+                this.tools.set(block.id, tool);
+                this.add(tool);
+            }
+            else if (!complete)
+                tool.updateArgs(block.arguments);
+            if (complete) {
+                if (message.stopReason === "aborted" || message.stopReason === "error") {
+                    tool.updateResult({ content: [{ type: "text", text: message.errorMessage || "Error" }], isError: true });
+                }
+                else {
+                    tool.updateArgs(block.arguments);
+                    tool.setArgsComplete();
+                }
+            }
+        }
+    }
+    reset(transcript) {
+        this.transcript = transcript;
+        this.chat.clear();
+        this.tools.clear();
+        this.partials.clear();
+        this.streaming = undefined;
+        this.rendered = 0;
+        this.version = -1;
+        const intro = transcript.intro;
+        this.add(new UserMessageComponent(intro.prompt, getMarkdownTheme()));
+        this.add(new Text(this.theme.fg("dim", [
+            `goal: ${plain(intro.goal)}`,
+            `context: ${intro.predecessors} predecessor output${intro.predecessors === 1 ? "" : "s"} · workspace ${plain(intro.workspace)}`,
+        ].join("\n")), 1, 0));
+    }
+    add(component) {
+        this.chat.addChild(component);
+        return component;
+    }
+}

package/dist/transcript.js

@@ -0,0 +1,100 @@
+/**
+ * Live worker conversations keyed by execution ID. Running executions and the
+ * newest finished ones are retained; older transcripts are dropped to bound memory.
+ */
+export class PiTranscripts {
+    onChange;
+    maxFinished;
+    transcripts = new Map();
+    finishedIds = [];
+    pending;
+    constructor(onChange = () => { }, maxFinished = 20) {
+        this.onChange = onChange;
+        this.maxFinished = maxFinished;
+    }
+    get(executionId) {
+        return this.transcripts.get(executionId);
+    }
+    start(executionId, nodeId, cwd, intro, renderers) {
+        this.transcripts.set(executionId, {
+            executionId, nodeId, cwd, intro, messages: [], running: new Map(), renderers, version: 0, finished: false,
+        });
+        this.changed();
+    }
+    streaming(executionId, partial) {
+        this.update(executionId, transcript => { transcript.streaming = partial; }, true);
+    }
+    assistant(executionId, message) {
+        this.update(executionId, transcript => {
+            delete transcript.streaming;
+            transcript.messages.push(message);
+        });
+    }
+    toolStart(executionId, callId) {
+        this.update(executionId, transcript => { transcript.running.set(callId, undefined); });
+    }
+    toolUpdate(executionId, callId, partial) {
+        this.update(executionId, transcript => {
+            if (transcript.running.has(callId))
+                transcript.running.set(callId, partial);
+        }, true);
+    }
+    toolResult(executionId, result) {
+        this.update(executionId, transcript => {
+            transcript.running.delete(result.toolCallId);
+            transcript.messages.push(result);
+        });
+    }
+    /** Close interrupted streams and tools so the view does not show them as still running. */
+    finish(executionId, reason = "Execution ended before this step finished") {
+        if (executionId === undefined)
+            return;
+        this.update(executionId, transcript => {
+            if (transcript.streaming) {
+                transcript.messages.push({ ...transcript.streaming, stopReason: "aborted", errorMessage: reason });
+                delete transcript.streaming;
+            }
+            for (const callId of transcript.running.keys()) {
+                const call = transcript.messages.flatMap(message => message.role === "assistant" ? message.content : [])
+                    .find(block => block.type === "toolCall" && block.id === callId);
+                transcript.messages.push({
+                    role: "toolResult", toolCallId: callId, toolName: call?.type === "toolCall" ? call.name : "tool",
+                    content: [{ type: "text", text: reason }], isError: true, timestamp: Date.now(),
+                });
+            }
+            transcript.running.clear();
+            transcript.finished = true;
+            if (!this.finishedIds.includes(executionId))
+                this.finishedIds.push(executionId);
+            while (this.finishedIds.length > this.maxFinished)
+                this.transcripts.delete(this.finishedIds.shift());
+        });
+    }
+    /** Token and output bursts coalesce into at most one notification per 100 ms. */
+    update(executionId, change, burst = false) {
+        const transcript = this.transcripts.get(executionId);
+        if (!transcript || transcript.finished)
+            return;
+        try {
+            change(transcript);
+            transcript.version++;
+        }
+        catch {
+            // Display state must never affect node execution.
+        }
+        if (!burst)
+            this.changed();
+        else if (!this.pending) {
+            this.pending = setTimeout(() => this.changed(), 100);
+            this.pending.unref?.();
+        }
+    }
+    changed() {
+        clearTimeout(this.pending);
+        this.pending = undefined;
+        try {
+            this.onChange();
+        }
+        catch { /* Observers cannot fail a worker. */ }
+    }
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@chrok/pi-braid",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "license": "MIT",
   "description": "Pi extension for Braid: background agent graphs, bounded loops, live updates, and a flow panel",
   "type": "module",
   "dependencies": {
     "grok-mermaid": "^0.2.2",
-    "@chrok/braid": "0.3.2"
+    "@chrok/braid": "0.3.3"
   },
   "peerDependencies": {
     "@earendil-works/pi-ai": "*",