@chrok/pi-braid 0.3.2 → 0.3.4

package/dist/command.js

@@ -1,28 +1,75 @@
-import { matchesKey, stripTerminalSequences, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
-import { renderGraphResult, renderNodeResult } from "./display.js";
+import { Input, matchesKey, stripTerminalSequences, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
+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. */
+/** Below this content width the graph and the assistant share the body, switched with Tab. */
+const SPLIT_WIDTH = 100;
+/** Marks a separator row so it can span the whole panel or only the left column. */
+const SEPARATOR = "\u0000separator";
+/**
+ * A live, scrollable panel. Esc steps back one level: session → node selection →
+ * graph → close. Closing the panel leaves jobs running. Tab toggles an assistant
+ * that answers questions about the job and can message running executions.
+ */
 export class BraidPanel {
     jobs;
     tui;
     theme;
     done;
+    assistantModel;
     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;
+    /** While open, the assistant receives keys; it shares a wide panel and fills a narrow one. */
+    assistantOpen = false;
+    /** Where the body sits in the last frame, for routing mouse wheel events. */
+    layout;
+    /** Assistant lines scrolled up from the newest. */
+    chatOffset = 0;
+    chatMaxOffset = 0;
+    chatScope;
+    input;
+    session;
+    chat;
     unsubscribe;
     ticker;
-    constructor(jobs, tui, theme, done, jobId, focus) {
+    constructor(jobs, tui, theme, done, jobId, focus, assistantModel = () => ({ registry: { complete: () => Promise.reject(new Error("No Pi model registry")) } })) {
         this.jobs = jobs;
         this.tui = tui;
         this.theme = theme;
         this.done = done;
+        this.assistantModel = assistantModel;
         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.chat = new NodeSessionView(tui, theme);
+        this.input = new Input({
+            prompt: theme.fg("accent", "› "),
+            placeholder: "Ask, or say how to steer…",
+            placeholderStyle: text => theme.fg("dim", text),
+        });
+        this.input.onSubmit = value => {
+            if (!value.trim() || !this.selected)
+                return;
+            const job = this.jobs.get(this.selected);
+            if (!job)
+                return;
+            this.jobs.assistant(job.jobId, this.assistantNode(job)).send(value, this.describeView(job), this.assistantModel());
+            this.input.setValue("");
+            this.chatOffset = 0;
+            this.refresh();
+        };
         this.unsubscribe = jobs.subscribe(() => this.refresh());
         this.ticker = setInterval(() => this.refresh(), 1000);
         this.ticker.unref();
@@ -64,7 +111,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 +139,59 @@ 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];
+        }
+        if (!current)
+            this.assistantOpen = false;
+        const available = rows - header.length - 4;
+        const open = current !== undefined && this.assistantOpen;
+        const split = open && contentWidth >= SPLIT_WIDTH;
+        const leftWidth = split ? Math.floor((contentWidth - 3) * 0.6) : contentWidth;
+        const chatWidth = split ? contentWidth - leftWidth - 3 : contentWidth;
+        const graph = !open || split ? this.renderGraphPane(current, leftWidth, available) : undefined;
+        const chat = open ? this.renderAssistant(current, chatWidth, available) : [];
+        // Columns: border and gutter, then the left pane, " │ ", then the assistant.
+        this.layout = { top: header.length, height: available,
+            ...(open ? { chatLeft: split ? 2 + leftWidth + 3 : 2 } : {}) };
+        const body = split
+            ? graph.lines.map((line, at) => (line === SEPARATOR ? border("─".repeat(leftWidth)) : truncateToWidth(line, leftWidth, "…", true)) +
+                " " + border("│") + " " + (chat[at] ?? ""))
+            : graph?.lines ?? chat;
+        const tab = current ? "Tab assistant   " : "";
+        const [wide, medium, narrow] = open
+            ? ["Enter send   Esc stop or hide   Tab hide   PgUp/PgDn or wheel scroll   ctrl+c close",
+                "Enter send · Esc hide · Tab hide", "Enter send · Tab hide"]
+            : this.focus
+                ? [`${tab}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
+                    ? [`${tab}↑/↓/←/→ choose node   Enter open session   Esc back   PgUp/PgDn page   q close`,
+                        "↑/↓ choose · Enter open · Esc back", "Enter open · Esc back"]
+                    : [`${tab}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;
+        const status = graph ? graph.range : "Assistant";
+        return [
+            ...header,
+            ...body.map(line => line === SEPARATOR ? rule("├", "┤") : row(line)),
+            rule("├", "┤"),
+            row(this.theme.fg("dim", `${status}${contentWidth >= 60 ? "  ·  Jobs keep running when this panel closes" : ""}`)),
+            row(this.theme.fg("muted", help)),
+            rule("╰", "╯"),
+        ];
+    }
+    /** The graph, node selection, or a node session: pinned summary, separator, scrolled body. */
+    renderGraphPane(current, width, available) {
+        // The node summary (or the selected node) stays pinned while the body scrolls.
+        const focused = current && this.focus ? this.renderFocus(current, this.focus, width) : undefined;
+        let pinned = focused?.pinned ?? (current && this.choosing !== undefined ? [this.choosingLine(current)] : []);
+        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 && focused.executionId ? this.pendingLines(current, focused.executionId) : [])]
             : current
                 ? [
                     ...(current.error
@@ -106,36 +204,126 @@ export class BraidPanel {
                         ...(current.fullOutputPath
                             ? { fullOutputPath: current.fullOutputPath }
                             : {}),
-                    }, true, false, this.theme).render(contentWidth),
+                    }, true, false, this.theme, "", false, this.choosing).render(width),
                 ]
                 : ["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";
+        return {
+            lines: [...(pinned.length ? [...pinned, SEPARATOR] : []), ...body],
+            range: `Lines ${this.offset + 1}–${Math.min(content.length, this.offset + height)}/${content.length}`,
+        };
+    }
+    /** The job's assistant conversation, newest lines at the bottom, above its input line. */
+    renderAssistant(job, width, height) {
+        const nodeId = this.assistantNode(job);
+        const assistant = this.jobs.assistant(job.jobId, nodeId);
+        // Each scope has its own conversation; a new one starts at its newest lines.
+        const scope = JSON.stringify([job.jobId, nodeId ?? null]);
+        if (scope !== this.chatScope) {
+            this.chatScope = scope;
+            this.chatOffset = 0;
+        }
+        const title = this.theme.fg("accent", this.theme.bold(nodeId === undefined ? "Assistant · job" : `Assistant · node ${plain(nodeId)}`)) +
+            this.theme.fg("muted", assistant.busy ? " · working… Esc to stop" : " · Tab to hide");
+        let lines;
+        try {
+            lines = assistant.conversation.messages.length
+                ? this.chat.render(assistant.conversation, width)
+                : [
+                    // Wrapped, not truncated, and kept off the input line like a finished reply.
+                    ...[
+                        nodeId === undefined
+                            ? "Ask what a node is doing, why it failed, or what it produced."
+                            : `Ask what ${plain(nodeId)} is doing, why it failed, or what it produced.`,
+                        "To change a running execution's direction, say what it should do; the assistant messages that execution for you.",
+                    ].flatMap(hint => wrapTextWithAnsi(this.theme.fg("dim", hint), width)),
+                    "",
+                ];
+        }
+        catch (error) {
+            lines = [this.theme.fg("error", `Assistant view unavailable: ${plain(error instanceof Error ? error.message : String(error))}`)];
+        }
+        const visible = Math.max(1, height - 3);
+        this.chatMaxOffset = Math.max(0, lines.length - visible);
+        this.chatOffset = Math.min(this.chatOffset, this.chatMaxOffset);
+        const end = lines.length - this.chatOffset;
+        const body = lines.slice(Math.max(0, end - visible), end);
+        while (body.length < visible)
+            body.unshift("");
+        this.input.focused = true;
+        const input = this.input.render(width)[0] ?? "";
+        return [title, this.theme.fg("borderMuted", "─".repeat(width)), ...body, input].slice(0, height);
+    }
+    /** Messages the assistant sent that this execution has not received yet. */
+    pendingLines(job, executionId) {
+        let pending = [];
+        try {
+            pending = this.jobs.pendingInputs(job.jobId, executionId);
+        }
+        catch { /* The job was removed; show nothing. */ }
+        if (!pending.length)
+            return [];
         return [
-            ...header,
-            ...body.map(row),
-            rule("├", "┤"),
-            row(this.theme.fg("dim", `${range}${contentWidth >= 60 ? "  ·  Jobs keep running when this panel closes" : ""}`)),
-            row(this.theme.fg("muted", help)),
-            rule("╰", "╯"),
+            ...pending.map(input => this.theme.fg("warning", `⧗ pending human input · ${plain(input.text)}`)),
+            this.theme.fg("dim", "  Delivered before the worker's next model request; running tools are not interrupted."),
         ];
     }
+    /** The node whose conversation the assistant shows: the open session's, or the selected one. */
+    assistantNode(job) {
+        if (!this.focus)
+            return this.choosing;
+        if ("nodeId" in this.focus)
+            return this.focus.nodeId;
+        try {
+            return this.jobs.getNode(job.jobId, undefined, this.focus.executionId).id;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    /** What the user is looking at, so "this node" means something to the assistant. */
+    describeView(job) {
+        if (this.focus) {
+            try {
+                const node = "nodeId" in this.focus ? this.jobs.getNode(job.jobId, this.focus.nodeId) : this.jobs.getNode(job.jobId, undefined, this.focus.executionId);
+                return `session of node ${JSON.stringify(node.id)}${node.executionId ? `, execution ${node.executionId}` : ""} (${node.status})`;
+            }
+            catch {
+                return "a node that is no longer in the graph";
+            }
+        }
+        if (this.choosing !== undefined) {
+            const node = (job.result?.nodes ?? job.live.nodes)[this.choosing];
+            return `job graph with node ${JSON.stringify(this.choosing)} selected (${node?.status ?? "pending"})`;
+        }
+        return `job graph overview (${job.status})`;
+    }
+    /** 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 +333,186 @@ 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), executionId: node.executionId };
+            }
+            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 (matchesKey(data, "ctrl+c")) {
+            this.close();
+            return;
+        }
+        if (matchesKey(data, "tab") && this.selected) {
+            this.assistantOpen = !this.assistantOpen;
+            this.refresh();
+            return;
+        }
+        if (this.assistantOpen) {
+            this.assistantInput(data);
+            this.refresh();
+            return;
+        }
+        if (data === "q") {
+            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);
+    }
+    /** The wheel scrolls whichever side it is over; other mouse events are left to Pi. */
+    handleMouse(event) {
+        const layout = this.layout;
+        if (event.type !== "wheel" || !event.wheelDelta || !layout)
+            return undefined;
+        if (event.y < layout.top || event.y >= layout.top + layout.height)
+            return undefined;
+        if (layout.chatLeft !== undefined && event.x >= layout.chatLeft - 1) {
+            this.chatOffset = Math.max(0, Math.min(this.chatMaxOffset, this.chatOffset - event.wheelDelta));
+        }
+        else {
+            const before = this.offset;
+            this.offset = Math.max(0, Math.min(this.maxOffset, this.offset + event.wheelDelta));
+            if (this.offset < before)
+                this.follow = false;
+            else if (this.offset >= this.maxOffset)
+                this.follow = true;
+        }
+        this.refresh();
+        return { handled: true };
+    }
+    /** Every key belongs to the question, including q and c. */
+    assistantInput(data) {
+        const job = this.selected ? this.jobs.get(this.selected) : undefined;
+        const assistant = job ? this.jobs.assistant(job.jobId, this.assistantNode(job)) : undefined;
+        if (matchesKey(data, "escape")) {
+            if (assistant?.busy)
+                assistant.abort();
+            else
+                this.assistantOpen = false;
+        }
+        else if (matchesKey(data, "pageUp"))
+            this.chatOffset = Math.min(this.chatMaxOffset, this.chatOffset + 10);
+        else if (matchesKey(data, "pageDown"))
+            this.chatOffset = Math.max(0, this.chatOffset - 10);
+        else
+            this.input.handleInput(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 +520,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() {
@@ -199,23 +544,54 @@ export class BraidPanel {
     }
 }
 export function registerBraidWidget(pi, jobs) {
+    // Clearing hides the jobs present at that moment; jobs submitted later still show.
+    const cleared = new Set();
+    let lastCleared = [];
+    const shown = () => jobs.list().filter(job => !cleared.has(job.jobId));
+    let refresh = () => { };
     let dispose = () => { };
     const clear = () => {
         dispose();
         dispose = () => { };
+        refresh = () => { };
     };
+    pi.registerCommand("braid:clear", {
+        description: "Clear the Braid progress widget; run again while it is empty to restore it",
+        handler: async (_args, ctx) => {
+            if (ctx.mode !== "tui")
+                throw new Error("The Braid progress widget requires interactive Pi.");
+            const visible = shown();
+            if (visible.length) {
+                lastCleared = visible.map(job => job.jobId);
+                for (const jobId of lastCleared)
+                    cleared.add(jobId);
+                ctx.ui.notify("Cleared Braid progress. Run /braid:clear again to restore it.", "info");
+            }
+            else if (lastCleared.length) {
+                for (const jobId of lastCleared)
+                    cleared.delete(jobId);
+                lastCleared = [];
+                ctx.ui.notify("Restored Braid progress.", "info");
+            }
+            else {
+                ctx.ui.notify("No Braid progress to clear.", "info");
+                return;
+            }
+            refresh();
+        },
+    });
     pi.on("session_start", (_event, ctx) => {
         clear();
         if (ctx.mode !== "tui")
             return;
-        const refresh = () => {
-            if (!jobs.list().length) {
+        refresh = () => {
+            if (!shown().length) {
                 ctx.ui.setWidget("braid-status", undefined);
                 return;
             }
             ctx.ui.setWidget("braid-status", (_tui, theme) => ({
                 render(width) {
-                    const all = jobs.list();
+                    const all = shown();
                     const active = all.filter(job => job.status === "running");
                     const selected = active.length ? active.slice(0, 3) : all.slice(0, 1);
                     const lines = selected.map(job => {
@@ -244,7 +620,7 @@ export function registerBraidWidget(pi, jobs) {
                 invalidate() { },
             }), { placement: "aboveEditor" });
         };
-        const unsubscribe = jobs.subscribe(refresh);
+        const unsubscribe = jobs.subscribe(() => refresh());
         dispose = () => {
             unsubscribe();
             ctx.ui.setWidget("braid-status", undefined);
@@ -267,7 +643,8 @@ export function registerBraidCommand(pi, jobs) {
             let panel;
             try {
                 await ctx.ui.custom((tui, theme, _keys, done) => {
-                    panel = new BraidPanel(jobs, tui, theme, done, jobId, focus);
+                    // The assistant uses whichever model the main session has selected when asked.
+                    panel = new BraidPanel(jobs, tui, theme, done, jobId, focus, () => ({ registry: ctx.modelRegistry, ...(ctx.model ? { model: ctx.model } : {}) }));
                     return panel;
                 }, {
                     overlay: true,