@bubblebrain-ai/bubble 0.0.63 → 0.0.64

package/dist/tui/components/streaming-message.js

@@ -0,0 +1,398 @@
+/**
+ * Streaming assistant message component.
+ *
+ * Rendering contract (verified against the vendored TuiMainScreen with
+ * VirtualTerminal): rebuilding component children every frame makes the
+ * renderer treat old rows as deleted and commits every intermediate frame
+ * to scrollback (the duplicated-prefix bug). A pool of PERSISTENT Text
+ * components updated via setText() is rewritten in place and never leaks —
+ * and Text("") renders zero rows, so empty pool slots vanish from the
+ * document naturally.
+ *
+ * Lifecycle: keep one instance as the transcript container's LAST child,
+ * update() per flush, and clearToNothing() in the same frame the controller
+ * commits the settled message. The scrollable row pool collapses to zero;
+ * the separate activityLane stays one row tall and merely clears its text.
+ */
+import chalk from "chalk";
+import { Spacer, Text, truncateToWidth, VStack, } from "@bubblebrain-ai/pi-tui";
+import { themeDim, themeForeground } from "../model/theme-style.js";
+import { projectAssistantRows, projectReasoningRows, joinTranscriptProjections, MINIMAL_REASONING_BODY_ROWS, projectToolTraceGroups, } from "./transcript.js";
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const GENERIC_PHRASES = [
+    "mapping the workspace",
+    "reading the room",
+    "following the threads",
+    "connecting the pieces",
+    "sorting the context",
+    "scanning the structure",
+    "shaping the next step",
+    "gathering signal",
+    "checking the edges",
+    "lining up the answer",
+    "tracing the flow",
+    "building the picture",
+    "walking the graph",
+    "collecting the clues",
+    "framing the problem",
+    "locating the source",
+    "resolving the shape",
+    "untangling the state",
+    "comparing the paths",
+    "narrowing the target",
+    "tracking the changes",
+    "reading the patterns",
+    "weighing the options",
+    "assembling the context",
+    "following the signal",
+    "checking the assumptions",
+    "aligning the details",
+    "testing the shape",
+    "pulling the thread",
+    "cleaning the edges",
+    "refining the draft",
+    "verifying the route",
+    "making sense of it",
+    "looking for leverage",
+    "stitching the answer",
+    "holding the thread",
+    "distilling the noise",
+    "finding the seam",
+    "reading between the lines",
+    "preparing the response",
+];
+const TOOL_TARGET_PHRASES = {
+    read: "reading files",
+    write: "writing changes",
+    edit: "patching files",
+    grep: "searching the codebase",
+    glob: "scanning paths",
+    ls: "listing directories",
+    bash: "running command",
+    web_search: "searching the web",
+    web_fetch: "fetching a page",
+    task: "spawning subagent",
+    spawn_agent: "spawning subagent",
+    run_workflow: "running workflow",
+    wait_agent: "waiting for subagent",
+    wait_workflow: "waiting for workflow",
+};
+function approximateTokenLabel(chars) {
+    const tokens = Math.max(0, Math.round(chars / 4));
+    if (tokens < 1_000)
+        return `${tokens}`;
+    if (tokens < 10_000)
+        return `${(tokens / 1_000).toFixed(1)}k`;
+    return `${Math.round(tokens / 1_000)}k`;
+}
+/**
+ * A permanent one-row boundary between the scrolling transcript and composer.
+ * Running turns paint the spinner into this lane; idle turns leave it blank.
+ * The row never collapses, so completing a turn cannot change the document /
+ * composer geometry.
+ */
+export class AgentActivityLaneComponent {
+    text = "";
+    setText(text) {
+        this.text = text;
+    }
+    render(width) {
+        return [truncateToWidth(this.text, Math.max(1, Math.floor(width)))];
+    }
+    invalidate() {
+        // No cache: the owner mutates `text` and requests the enclosing TUI render.
+    }
+}
+/**
+ * A pooled projected row needs three states: unused (zero rows), semantic
+ * blank (one empty row), and visible text. `Text` collapses both unused and
+ * whitespace-only values, so it cannot preserve that distinction.
+ */
+class ProjectedRowComponent {
+    onActivate;
+    row = null;
+    target;
+    interaction;
+    constructor(onActivate) {
+        this.onActivate = onActivate;
+    }
+    setRow(row, target, interaction) {
+        this.row = row;
+        this.target = target;
+        this.interaction = interaction;
+    }
+    clear() {
+        this.row = null;
+        this.target = undefined;
+        this.interaction = undefined;
+    }
+    render(width) {
+        if (this.row === null)
+            return [];
+        if (this.row === "")
+            return [""];
+        return [truncateToWidth(this.row, Math.max(1, Math.floor(width)))];
+    }
+    invalidate() {
+        // No cache; rows are already projected to terminal lines.
+    }
+    handleMouse(event) {
+        if (!this.interaction)
+            return false;
+        if (event.kind === "leave") {
+            const changed = this.interaction.clearHover();
+            if (changed)
+                this.onActivate?.();
+            return changed;
+        }
+        if (event.kind === "move") {
+            const changed = this.interaction.hover(this.target);
+            if (changed)
+                this.onActivate?.();
+            return changed;
+        }
+        if (event.release || (event.button & 3) !== 0 || !this.target)
+            return false;
+        const action = this.interaction.activate(this.target, event.clickCount);
+        this.onActivate?.(action);
+        return true;
+    }
+}
+export class StreamingMessageComponent extends VStack {
+    onTraceAction;
+    getTheme;
+    tail = null;
+    commandActivity = null;
+    frame = 0;
+    spinnerActive = false;
+    idlePhraseElapsedMs = 0;
+    onFrame;
+    // Persistent row pool — NEVER re-created, only setText.
+    activityLane;
+    thinkingHeaderRow;
+    thinkingEllipsisRow;
+    reasoningGapRow;
+    timelineEllipsisRow;
+    liveGapRow;
+    reasoningRows;
+    timelineRows;
+    idlePhraseIndex = 0;
+    projectionOptions = {};
+    constructor(maxPreviewRows = 8, onFrame, onTraceAction, getTheme) {
+        super([]);
+        this.onTraceAction = onTraceAction;
+        this.getTheme = getTheme;
+        this.onFrame = onFrame;
+        this.activityLane = new AgentActivityLaneComponent();
+        this.thinkingHeaderRow = new Text("", 0, 0);
+        this.thinkingEllipsisRow = new Text("", 0, 0);
+        this.reasoningGapRow = new Spacer(0);
+        this.timelineEllipsisRow = new Text("", 0, 0);
+        this.liveGapRow = new Spacer(0);
+        this.reasoningRows = Array.from({ length: MINIMAL_REASONING_BODY_ROWS }, () => new Text("", 0, 0));
+        // One ordered pool mirrors Ink's DisplayMessagePart timeline. Reserve
+        // enough rows for a useful grouped tool trace plus an answer tail.
+        this.timelineRows = Array.from({ length: maxPreviewRows + 16 }, () => new ProjectedRowComponent((action) => {
+            if (action)
+                this.onTraceAction?.(action);
+            if (this.tail)
+                this.update(this.tail, this.lastColumns ?? 80, this.projectionOptions);
+            this.onFrame?.();
+        }));
+        // The live tail remains scrollable. Its spinner lives in the permanent
+        // activity lane mounted by the app immediately above the composer.
+        this.addChild(this.thinkingHeaderRow);
+        for (const row of this.reasoningRows)
+            this.addChild(row);
+        this.addChild(this.thinkingEllipsisRow);
+        this.addChild(this.reasoningGapRow);
+        this.addChild(this.timelineEllipsisRow);
+        for (const row of this.timelineRows)
+            this.addChild(row);
+        this.addChild(this.liveGapRow);
+    }
+    /** Live update while streaming. */
+    update(tail, columns, projectionOptions = {}) {
+        this.tail = tail;
+        this.commandActivity = null;
+        this.lastColumns = columns;
+        this.projectionOptions = projectionOptions;
+        const width = Math.max(1, Math.floor(columns));
+        const theme = this.getTheme?.();
+        this.updateActivityLane();
+        let hasLiveRows = false;
+        this.thinkingHeaderRow.setText("");
+        this.thinkingEllipsisRow.setText("");
+        this.reasoningGapRow.setLines(0);
+        this.timelineEllipsisRow.setText("");
+        for (const row of this.reasoningRows)
+            row.setText("");
+        for (const row of this.timelineRows)
+            row.clear();
+        // Reasoning models get a dedicated rolling window instead of burying
+        // their work inside the spinner status line. It is an independent region:
+        // answer/tool bytes must not make Thinking disappear mid-frame.
+        if (tail.reasoning) {
+            hasLiveRows = true;
+            const projected = projectReasoningRows(tail.reasoning, { ...projectionOptions, columns: width }, { running: true, maxBodyRows: MINIMAL_REASONING_BODY_ROWS, fromEnd: true });
+            this.thinkingHeaderRow.setText(projected[0] ?? "");
+            const body = projected.slice(1);
+            const visible = body.slice(0, this.reasoningRows.length);
+            for (let index = 0; index < visible.length; index += 1) {
+                this.reasoningRows[index].setText(visible[index] ?? "");
+            }
+            if (body.length > visible.length)
+                this.thinkingEllipsisRow.setText(body.at(-1) ?? "");
+        }
+        const parts = tail.parts.length > 0
+            ? tail.parts
+            : [
+                ...(tail.tools.length > 0 ? [{ type: "tools", toolCalls: [...tail.tools] }] : []),
+                ...(tail.content ? [{ type: "text", content: tail.content }] : []),
+            ];
+        let lastToolsPart = -1;
+        for (let index = parts.length - 1; index >= 0; index -= 1) {
+            if (parts[index]?.type === "tools") {
+                lastToolsPart = index;
+                break;
+            }
+        }
+        const timelineBlocks = [];
+        for (let partIndex = 0; partIndex < parts.length; partIndex += 1) {
+            const part = parts[partIndex];
+            if (part.type === "tools") {
+                timelineBlocks.push(projectToolTraceGroups(part.toolCalls, { ...projectionOptions, columns: width }, { showActivity: partIndex === lastToolsPart }));
+                continue;
+            }
+            const rows = projectAssistantRows(part.content, { ...projectionOptions, columns: width });
+            timelineBlocks.push({ rows, traceTargets: rows.map(() => undefined) });
+        }
+        const timeline = joinTranscriptProjections(timelineBlocks);
+        const start = Math.max(0, timeline.rows.length - this.timelineRows.length);
+        // The settled transcript joins reasoning and the timeline with exactly one
+        // spacer. A tool group already carries its own top padding, so adding the
+        // gap row on top of it made the live surface one row taller than the
+        // committed one and the trace jumped up at every turn boundary.
+        const timelineBringsSpacer = start === 0 && timeline.leadingSpacer === true;
+        this.reasoningGapRow.setLines(tail.reasoning && timeline.rows.length > 0 && !timelineBringsSpacer ? 1 : 0);
+        if (timeline.rows.length > 0) {
+            hasLiveRows = true;
+            const visible = timeline.rows.slice(start);
+            const visibleTargets = timeline.traceTargets.slice(start);
+            this.timelineEllipsisRow.setText(timeline.rows.length > visible.length
+                ? theme ? themeDim(theme.dim, "  …") : chalk.dim("  …")
+                : "");
+            for (let index = 0; index < visible.length; index += 1) {
+                this.timelineRows[index].setRow(visible[index], visibleTargets[index], projectionOptions.traceInteraction);
+            }
+        }
+        this.liveGapRow.setLines(hasLiveRows ? 1 : 0);
+    }
+    /** Paint a non-turn command into the same permanent activity lane Grok uses
+     * for Thinking, tools and manual compaction. No transcript preview rows are
+     * created, so completion only replaces the spinner with its event line. */
+    updateCommandActivity(label, cancelling, columns) {
+        this.tail = null;
+        this.commandActivity = { label, cancelling };
+        this.lastColumns = columns;
+        this.clearProjectedRows();
+        this.updateActivityLane();
+    }
+    /**
+     * Turn ended: collapse every scrollable slot and clear (but do not collapse)
+     * the permanent activity lane. Same-frame with the controller's settled
+     * append, the full answer replaces the preview without changing the
+     * transcript/composer boundary height.
+     */
+    clearToNothing() {
+        this.stopSpinner();
+        this.tail = null;
+        this.commandActivity = null;
+        this.clearProjectedRows();
+        this.activityLane.setText("");
+    }
+    clearProjectedRows() {
+        this.thinkingHeaderRow.setText("");
+        this.thinkingEllipsisRow.setText("");
+        this.reasoningGapRow.setLines(0);
+        this.timelineEllipsisRow.setText("");
+        this.liveGapRow.setLines(0);
+        for (const row of this.reasoningRows)
+            row.setText("");
+        for (const row of this.timelineRows)
+            row.clear();
+    }
+    startSpinner() {
+        if (this.spinnerActive)
+            return;
+        this.spinnerActive = true;
+        this.idlePhraseElapsedMs = 0;
+    }
+    lastColumns;
+    stopSpinner() {
+        this.spinnerActive = false;
+        this.idlePhraseElapsedMs = 0;
+    }
+    isAnimationActive() {
+        return this.spinnerActive;
+    }
+    /** Advance decorative state only; trace/Markdown projection never runs here. */
+    advanceAnimationFrame(elapsedMs = 100) {
+        if (!this.spinnerActive)
+            return false;
+        this.frame = (this.frame + 1) % SPINNER_FRAMES.length;
+        if (this.tail && !this.tail.content && !this.tail.reasoning && this.tail.tools.length === 0) {
+            this.idlePhraseElapsedMs += Math.max(0, elapsedMs);
+            while (this.idlePhraseElapsedMs >= 1_500) {
+                this.idlePhraseElapsedMs -= 1_500;
+                this.idlePhraseIndex = (this.idlePhraseIndex + 1) % GENERIC_PHRASES.length;
+            }
+        }
+        else {
+            this.idlePhraseElapsedMs = 0;
+        }
+        this.updateActivityLane();
+        return true;
+    }
+    dispose() {
+        this.stopSpinner();
+    }
+    /** Remember the width for spinner-driven rebuilds between flushes. */
+    noteWidth(columns) {
+        this.lastColumns = columns;
+    }
+    updateActivityLane() {
+        const width = Math.max(1, Math.floor(this.lastColumns ?? 80));
+        const theme = this.getTheme?.();
+        const spinner = theme
+            ? themeForeground(theme.accent, SPINNER_FRAMES[this.frame])
+            : chalk.cyan(SPINNER_FRAMES[this.frame]);
+        let text = "";
+        if (this.tail) {
+            const idlePhrase = GENERIC_PHRASES[this.idlePhraseIndex % GENERIC_PHRASES.length];
+            const activeTool = [...this.tail.tools].reverse().find((tool) => (tool.status === "queued"
+                || tool.status === "pending"
+                || tool.status === "running"
+                || (tool.status === undefined && tool.result === undefined)));
+            const phrase = activeTool
+                ? TOOL_TARGET_PHRASES[activeTool.name] ?? `running ${activeTool.name}`
+                : this.tail.content
+                    ? "writing the response"
+                    : this.tail.reasoning
+                        ? "working through the request"
+                        : idlePhrase;
+            const streamedChars = this.tail.content.length + this.tail.reasoning.length;
+            const tokenText = streamedChars > 0 ? ` (↓${approximateTokenLabel(streamedChars)} tok)` : "";
+            text = `${phrase}${tokenText}`;
+        }
+        else if (this.commandActivity) {
+            text = this.commandActivity.cancelling ? "Cancelling…" : `${this.commandActivity.label}…`;
+        }
+        if (!text) {
+            this.activityLane.setText("");
+            return;
+        }
+        const status = theme ? themeDim(theme.dim, text) : chalk.dim(text);
+        this.activityLane.setText(truncateToWidth(` ${spinner} ${status}`, width));
+    }
+}

package/dist/tui/components/subagent-inspector.d.ts

@@ -0,0 +1,28 @@
+import { type Component } from "@bubblebrain-ai/pi-tui";
+import type { BubbleTuiController } from "../controller/controller.js";
+import type { TranscriptRenderOptions } from "./transcript.js";
+import type { SubagentDisplay } from "../model/subagent-view.js";
+import { type Theme } from "../model/theme.js";
+export interface SubagentInspectorOptions {
+    agentId: string;
+    controller: BubbleTuiController;
+    getMember(): SubagentDisplay | undefined;
+    getTerminalRows(): number;
+    renderOptions(): Omit<TranscriptRenderOptions, "columns">;
+    onClose(): void;
+    onNavigate?(direction: -1 | 1): void;
+    onRender(): void;
+    theme?: Theme;
+}
+export declare class SubagentInspectorComponent implements Component {
+    private readonly options;
+    focused: boolean;
+    private scrollOffset;
+    private followEnd;
+    private lastBodyRows;
+    private lastContentRows;
+    constructor(options: SubagentInspectorOptions);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    invalidate(): void;
+}

package/dist/tui/components/subagent-inspector.js

@@ -0,0 +1,127 @@
+import { matchesKey, truncateToWidth, visibleWidth, } from "@bubblebrain-ai/pi-tui";
+import { joinTranscriptBlocks, projectAssistantRows, projectReasoningRows, projectToolTraceGroups, projectTranscript, } from "./transcript.js";
+import { darkTheme } from "../model/theme.js";
+import { themeDim, themeForeground } from "../model/theme-style.js";
+function pad(line, width) {
+    const clipped = truncateToWidth(line, Math.max(1, width), "");
+    return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+function tokens(member) {
+    if (!member?.usage)
+        return "";
+    const total = member.usage.promptTokens + member.usage.completionTokens;
+    return total >= 1000 ? `${(total / 1000).toFixed(total < 10_000 ? 1 : 0)}k tok` : `${total} tok`;
+}
+function elapsed(member) {
+    if (!member?.createdAt)
+        return "";
+    const final = new Set(["completed", "failed", "blocked", "cancelled", "closed"]).has(member.status ?? "");
+    const seconds = Math.floor((((final ? member.updatedAt : Date.now()) ?? Date.now()) - member.createdAt) / 1000);
+    return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m`;
+}
+export class SubagentInspectorComponent {
+    options;
+    focused = false;
+    scrollOffset = 0;
+    followEnd = true;
+    lastBodyRows = 0;
+    lastContentRows = 0;
+    constructor(options) {
+        this.options = options;
+    }
+    render(width) {
+        const theme = this.options.theme ?? darkTheme;
+        const frameWidth = Math.max(1, Math.floor(width));
+        const bodyWidth = Math.max(1, frameWidth - 4);
+        const member = this.options.getMember();
+        const transcript = projectTranscript(this.options.controller.getChildTranscript(this.options.agentId), {
+            ...this.options.renderOptions(),
+            columns: bodyWidth,
+            trailingSpacer: false,
+        }).rows;
+        const tail = this.options.controller.getChildStreamingTail(this.options.agentId);
+        const liveRows = tail
+            ? joinTranscriptBlocks([
+                tail.reasoning ? projectReasoningRows(tail.reasoning, { ...this.options.renderOptions(), columns: bodyWidth }, { running: true }) : [],
+                tail.tools.length > 0 ? projectToolTraceGroups(tail.tools, { ...this.options.renderOptions(), columns: bodyWidth }, { showActivity: true }).rows : [],
+                tail.content ? projectAssistantRows(tail.content, { ...this.options.renderOptions(), columns: bodyWidth }) : [],
+            ])
+            : [];
+        const content = joinTranscriptBlocks([transcript, liveRows]);
+        const terminalRows = Math.max(8, this.options.getTerminalRows());
+        const bodyRows = Math.max(3, terminalRows - 6);
+        this.lastBodyRows = bodyRows;
+        this.lastContentRows = content.length;
+        const maxOffset = Math.max(0, content.length - bodyRows);
+        if (this.followEnd)
+            this.scrollOffset = maxOffset;
+        this.scrollOffset = Math.max(0, Math.min(this.scrollOffset, maxOffset));
+        const visible = content.slice(this.scrollOffset, this.scrollOffset + bodyRows);
+        while (visible.length < bodyRows)
+            visible.push("");
+        const status = member?.status ?? "running";
+        const route = member?.route?.model ?? member?.agentName ?? "subagent";
+        const meta = [status, route, tokens(member), elapsed(member)].filter(Boolean).join(" · ");
+        const title = `${member?.nickname ?? member?.agentName ?? "Subagent"} — read only`;
+        if (frameWidth < 6) {
+            return [title, meta, ...visible]
+                .slice(0, Math.max(1, this.options.getTerminalRows()))
+                .map((row) => truncateToWidth(row, frameWidth, ""));
+        }
+        const border = (text) => themeForeground(theme.border, text);
+        const top = border(`┌─ ${truncateToWidth(title, Math.max(1, frameWidth - 6), "")} ${"─".repeat(Math.max(0, frameWidth - visibleWidth(title) - 5))}┐`);
+        const header = `${border("│")} ${pad(themeDim(theme.dim, meta), bodyWidth)} ${border("│")}`;
+        const separator = border(`├${"─".repeat(frameWidth - 2)}┤`);
+        const body = visible.map((row) => `${border("│")} ${pad(row, bodyWidth)} ${border("│")}`);
+        const hint = pad(themeDim(theme.dim, "↑↓ scroll · [ ] previous/next · x stop · Esc close"), bodyWidth);
+        const bottom = border(`└${"─".repeat(frameWidth - 2)}┘`);
+        return [top, header, separator, ...body, `${border("│")} ${hint} ${border("│")}`, bottom];
+    }
+    handleInput(data) {
+        if (matchesKey(data, "escape")) {
+            this.options.onClose();
+            return;
+        }
+        if (data === "x") {
+            const status = this.options.getMember()?.status ?? "running";
+            if (!new Set(["completed", "failed", "blocked", "cancelled", "closed"]).has(status)) {
+                this.options.controller.stopSubagent(this.options.agentId);
+            }
+            return;
+        }
+        if (data === "[") {
+            this.options.onNavigate?.(-1);
+            return;
+        }
+        if (data === "]") {
+            this.options.onNavigate?.(1);
+            return;
+        }
+        const maxOffset = Math.max(0, this.lastContentRows - this.lastBodyRows);
+        if (matchesKey(data, "up") || data === "k") {
+            this.followEnd = false;
+            this.scrollOffset = Math.max(0, this.scrollOffset - 1);
+        }
+        else if (matchesKey(data, "down") || data === "j") {
+            this.scrollOffset = Math.min(maxOffset, this.scrollOffset + 1);
+            this.followEnd = this.scrollOffset >= maxOffset;
+        }
+        else if (matchesKey(data, "pageUp")) {
+            this.followEnd = false;
+            this.scrollOffset = Math.max(0, this.scrollOffset - this.lastBodyRows);
+        }
+        else if (matchesKey(data, "pageDown")) {
+            this.scrollOffset = Math.min(maxOffset, this.scrollOffset + this.lastBodyRows);
+            this.followEnd = this.scrollOffset >= maxOffset;
+        }
+        else if (matchesKey(data, "end")) {
+            this.followEnd = true;
+            this.scrollOffset = maxOffset;
+        }
+        else {
+            return;
+        }
+        this.options.onRender();
+    }
+    invalidate() { }
+}

package/dist/tui/components/task-inspector.d.ts

@@ -0,0 +1,26 @@
+import { type Component } from "@bubblebrain-ai/pi-tui";
+import { type Theme } from "../model/theme.js";
+export interface TaskInspectorOptions {
+    id: string;
+    title: string;
+    getStatus(): string;
+    getOutput(): string;
+    getTerminalRows(): number;
+    onClose(): void;
+    onStop(): void;
+    onCopy(): void | Promise<void>;
+    onRender(): void;
+    theme?: Theme;
+}
+export declare class TaskInspectorComponent implements Component {
+    private readonly options;
+    focused: boolean;
+    private offset;
+    private follow;
+    private bodyRows;
+    private contentRows;
+    constructor(options: TaskInspectorOptions);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    invalidate(): void;
+}

package/dist/tui/components/task-inspector.js

@@ -0,0 +1,70 @@
+import { matchesKey, truncateToWidth, visibleWidth } from "@bubblebrain-ai/pi-tui";
+import { safeSheetText } from "./bottom-sheet.js";
+import { darkTheme } from "../model/theme.js";
+import { themeDim, themeForeground } from "../model/theme-style.js";
+function pad(line, width) {
+    const clipped = truncateToWidth(line, width, "");
+    return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+export class TaskInspectorComponent {
+    options;
+    focused = false;
+    offset = 0;
+    follow = true;
+    bodyRows = 0;
+    contentRows = 0;
+    constructor(options) {
+        this.options = options;
+    }
+    render(width) {
+        const theme = this.options.theme ?? darkTheme;
+        const frameWidth = Math.max(1, Math.floor(width));
+        const inside = Math.max(1, frameWidth - 4);
+        const bodyRows = Math.max(3, this.options.getTerminalRows() - 6);
+        const output = safeSheetText(this.options.getOutput()).split("\n");
+        this.bodyRows = bodyRows;
+        this.contentRows = output.length;
+        const maxOffset = Math.max(0, output.length - bodyRows);
+        if (this.follow)
+            this.offset = maxOffset;
+        const visible = output.slice(this.offset, this.offset + bodyRows);
+        while (visible.length < bodyRows)
+            visible.push("");
+        const rawTitle = `${this.options.title} — ${this.options.getStatus()}`;
+        if (frameWidth < 6) {
+            return [rawTitle, ...visible]
+                .slice(0, Math.max(1, this.options.getTerminalRows()))
+                .map((line) => truncateToWidth(line, frameWidth, ""));
+        }
+        const title = truncateToWidth(rawTitle, frameWidth - 6, "");
+        return [
+            themeForeground(theme.border, `┌─ ${title} ${"─".repeat(Math.max(0, frameWidth - visibleWidth(title) - 5))}┐`),
+            ...visible.map((line) => `${themeForeground(theme.border, "│")} ${pad(line, inside)} ${themeForeground(theme.border, "│")}`),
+            `${themeForeground(theme.border, "│")} ${pad(themeDim(theme.dim, "↑↓ scroll · y copy · x stop · Esc close"), inside)} ${themeForeground(theme.border, "│")}`,
+            themeForeground(theme.border, `└${"─".repeat(frameWidth - 2)}┘`),
+        ];
+    }
+    handleInput(data) {
+        if (matchesKey(data, "escape"))
+            return this.options.onClose();
+        if (data === "x" && this.options.getStatus() === "running")
+            return this.options.onStop();
+        if (data === "y") {
+            void this.options.onCopy();
+            return;
+        }
+        const maxOffset = Math.max(0, this.contentRows - this.bodyRows);
+        if (matchesKey(data, "up") || data === "k") {
+            this.follow = false;
+            this.offset = Math.max(0, this.offset - 1);
+        }
+        else if (matchesKey(data, "down") || data === "j") {
+            this.offset = Math.min(maxOffset, this.offset + 1);
+            this.follow = this.offset >= maxOffset;
+        }
+        else
+            return;
+        this.options.onRender();
+    }
+    invalidate() { }
+}