@agwab/pi-workflow 0.1.0

package/dist/workflow-view.js

@@ -0,0 +1,1525 @@
+// @ts-nocheck
+import { readFile } from "node:fs/promises";
+import { workflowRunPath, fromProjectPath, listRunRecords, readIndex, readRunRecord, } from "./store.js";
+import { WORKFLOW_RUN_TYPE, } from "./types.js";
+const REFRESH_INTERVAL_MS = 1_000;
+const MAX_LIST_ROWS = 18;
+const MAX_STAGE_TASK_ROWS = 18;
+const TASK_ARTIFACT_MAX_LINES = 1_000;
+const TASK_ARTIFACT_VIEW_LINES = 16;
+export async function showWorkflowView(ctx, initialRunId, workflowCwd = ctx.cwd) {
+    await ctx.ui.custom((tui, theme, _keybindings, done) => {
+        const view = new WorkflowView(workflowCwd, tui, theme, done, initialRunId);
+        view.start();
+        return view;
+    });
+}
+export class WorkflowView {
+    cwd;
+    tui;
+    theme;
+    done;
+    initialRunId;
+    mode = "runs";
+    flows = [];
+    selectedFlow = 0;
+    selectedStage = 0;
+    selectedTask = 0;
+    selectedTaskId = "";
+    detailRun;
+    taskArtifactView = "output";
+    artifactScrollLine = 0;
+    outputLines = [];
+    promptLines = [];
+    loadedTaskKey = "";
+    message = "";
+    error = "";
+    loading = true;
+    reloadActive = false;
+    timer;
+    constructor(cwd, tui, theme, done, initialRunId) {
+        this.cwd = cwd;
+        this.tui = tui;
+        this.theme = theme;
+        this.done = done;
+        this.initialRunId = initialRunId;
+    }
+    start() {
+        void this.reload(true);
+        this.timer = setInterval(() => void this.reload(false), REFRESH_INTERVAL_MS);
+        this.timer.unref?.();
+    }
+    dispose() {
+        if (this.timer)
+            clearInterval(this.timer);
+        this.timer = undefined;
+    }
+    invalidate() { }
+    handleInput(data) {
+        if (this.isCloseInput(data)) {
+            this.close();
+            return;
+        }
+        if (data === "r" || data === "R") {
+            this.message = "refreshing";
+            void this.reload(true);
+            this.tui.requestRender();
+            return;
+        }
+        if (this.mode === "task") {
+            this.handleTaskInput(data);
+            return;
+        }
+        this.handleBoardInput(data);
+    }
+    render(width) {
+        const viewportWidth = Math.max(1, Math.floor(width || 1));
+        // Leave a small right gutter. Some terminals/container PTYs wrap or leave
+        // stale cells when a custom view writes border glyphs in the final columns,
+        // which makes the right edge of the workflow panel look broken.
+        const contentWidth = Math.max(1, viewportWidth - 2);
+        const selectedTask = this.selectedTaskRecord();
+        const lines = this.mode === "task" && this.detailRun && selectedTask
+            ? this.renderTaskDetail(contentWidth, this.detailRun, selectedTask)
+            : this.renderBoard(contentWidth);
+        // Return full-width lines so Pi clears stale cells to the right, while the
+        // actual border/content remains inside contentWidth and never touches the
+        // terminal's final columns.
+        return lines.map((line) => padAnsi(fit(line, contentWidth), viewportWidth));
+    }
+    handleBoardInput(data) {
+        if (matchesKey(data, "escape") || this.isBackInput(data)) {
+            this.drillUp();
+            return;
+        }
+        if (data === "[" || data === "p" || data === "P") {
+            this.moveModeSelection(-1);
+            return;
+        }
+        if (data === "]" || data === "n" || data === "N") {
+            this.moveModeSelection(1);
+            return;
+        }
+        if (matchesKey(data, "left") || data === "h" || data === "H") {
+            this.drillUp();
+            return;
+        }
+        if (matchesKey(data, "right") || data === "l" || data === "L") {
+            this.drillDown();
+            return;
+        }
+        if (matchesKey(data, "up") || data === "k" || data === "K") {
+            this.moveModeSelection(-1);
+            return;
+        }
+        if (matchesKey(data, "down") || data === "j" || data === "J") {
+            this.moveModeSelection(1);
+            return;
+        }
+        if (matchesKey(data, "enter") ||
+            matchesKey(data, "return") ||
+            data === "\r") {
+            this.drillDown();
+        }
+    }
+    handleTaskInput(data) {
+        if (matchesKey(data, "escape") ||
+            data === "b" ||
+            data === "B" ||
+            matchesKey(data, "backspace")) {
+            this.mode = "tasks";
+            this.message = "";
+            this.tui.requestRender();
+            return;
+        }
+        if (matchesKey(data, "left")) {
+            this.switchTaskArtifact(-1);
+            return;
+        }
+        if (matchesKey(data, "right")) {
+            this.switchTaskArtifact(1);
+            return;
+        }
+        if (matchesKey(data, "up")) {
+            this.scrollTaskArtifact(-1);
+            return;
+        }
+        if (matchesKey(data, "down")) {
+            this.scrollTaskArtifact(1);
+            return;
+        }
+        if (data === "[" || data === "p" || data === "P") {
+            this.moveTask(-1);
+            return;
+        }
+        if (data === "]" || data === "n" || data === "N") {
+            this.moveTask(1);
+        }
+    }
+    async reload(forceDetail) {
+        if (this.reloadActive)
+            return;
+        this.reloadActive = true;
+        try {
+            const flows = await loadFlowSummaries(this.cwd, this.initialRunId);
+            this.flows = flows;
+            this.selectedFlow = clampIndex(this.selectedFlow, flows.length);
+            const initialRunId = this.initialRunId;
+            if (initialRunId && this.loading) {
+                const initialIndex = flows.findIndex((flow) => flow.runId === initialRunId || flow.runId.startsWith(initialRunId));
+                if (initialIndex >= 0) {
+                    this.selectedFlow = initialIndex;
+                    this.mode = "stages";
+                }
+            }
+            if ((this.mode === "runs" ||
+                this.mode === "stages" ||
+                this.mode === "tasks" ||
+                this.mode === "task" ||
+                forceDetail) &&
+                flows.length > 0) {
+                const selected = flows[this.selectedFlow];
+                if (selected) {
+                    this.detailRun = await readRunRecord(this.cwd, selected.runId);
+                    this.clampStageAndTask();
+                    await this.updateTaskPreviews();
+                }
+            }
+            this.error = "";
+            if (this.message === "refreshing")
+                this.message = "refreshed";
+        }
+        catch (error) {
+            this.error = error instanceof Error ? error.message : String(error);
+        }
+        finally {
+            this.loading = false;
+            this.reloadActive = false;
+            this.tui.requestRender();
+        }
+    }
+    async updateTaskPreviews() {
+        const task = this.selectedTaskRecord();
+        if (!task) {
+            this.outputLines = [];
+            this.promptLines = [];
+            this.loadedTaskKey = "";
+            this.resetArtifactScroll();
+            return;
+        }
+        const taskKey = `${task.taskId}:${task.files.output}:${task.files.taskPrompt}`;
+        if (taskKey !== this.loadedTaskKey) {
+            this.loadedTaskKey = taskKey;
+            this.resetArtifactScroll();
+        }
+        const [outputLines, promptLines] = await Promise.all([
+            readFileLinesBounded(this.cwd, task.files.output, TASK_ARTIFACT_MAX_LINES),
+            readFileLinesBounded(this.cwd, task.files.taskPrompt, TASK_ARTIFACT_MAX_LINES),
+        ]);
+        this.outputLines = outputLines;
+        this.promptLines = promptLines;
+        this.artifactScrollLine = Math.min(this.artifactScrollLine, this.maxArtifactScrollLine());
+    }
+    renderBoard(width) {
+        const lines = [...this.renderDrilldownHeader(width)];
+        if (this.loading && this.flows.length === 0) {
+            lines.push(...boxed(this.theme, "Loading", width, [
+                placeholder(this.theme, "loading workflows..."),
+            ]));
+        }
+        else if (this.flows.length === 0) {
+            lines.push(...boxed(this.theme, "Runs", width, [
+                placeholder(this.theme, "no workflow runs found"),
+            ]));
+        }
+        else if (this.mode === "runs") {
+            lines.push(...this.renderRunsScreen(width));
+        }
+        else if (this.mode === "stages" && this.detailRun) {
+            lines.push(...this.renderStagesScreen(width, this.detailRun));
+        }
+        else if (this.mode === "tasks" && this.detailRun) {
+            lines.push(...this.renderTasksScreen(width, this.detailRun));
+        }
+        else if (this.detailRun) {
+            lines.push(...this.renderTasksScreen(width, this.detailRun));
+        }
+        lines.push("", this.footer(this.footerText(width)));
+        if (this.message)
+            lines.push(messageText(this.theme, this.message));
+        if (this.error)
+            lines.push(errorText(this.theme, this.error));
+        return lines;
+    }
+    renderDrilldownHeader(width) {
+        const taskSummary = this.mode !== "runs" ? this.detailRun?.taskSummary : undefined;
+        const active = taskSummary
+            ? taskSummary.running
+            : this.flows.filter((flow) => flow.status === "running").length;
+        const blocked = taskSummary
+            ? taskSummary.blocked
+            : this.flows.filter((flow) => flow.status === "blocked").length;
+        const failed = taskSummary
+            ? taskSummary.failed + taskSummary.interrupted
+            : this.flows.filter((flow) => flow.status === "failed" || flow.status === "interrupted").length;
+        const completed = taskSummary
+            ? taskSummary.completed
+            : this.flows.filter((flow) => flow.status === "completed").length;
+        const lines = [
+            `${chip(this.theme, "mode", this.mode === "task" ? "detail" : this.mode, "accent")} ${chip(this.theme, "running", String(active), "accent")} ${chip(this.theme, "blocked", String(blocked), "warning")} ${chip(this.theme, "failed", String(failed), "error")} ${chip(this.theme, "done", String(completed), "success")}`,
+        ];
+        if (this.mode !== "tasks")
+            lines.push(`${metaLabel(this.theme, "path")} ${metaValue(this.theme, this.breadcrumbText())} ${muted(this.theme, "·")} ${metaLabel(this.theme, "source")} ${pathText(this.theme, `${this.cwd}/.pi/workflows/index.json`)}`);
+        return [
+            ...boxed(this.theme, "✦ Flow Board", width, lines, "borderAccent"),
+            "",
+        ];
+    }
+    renderRunsScreen(width) {
+        const selected = this.flows[this.selectedFlow];
+        const sideLines = [
+            accent(this.theme, "All runs"),
+            kvRow(this.theme, "total", String(this.flows.length)),
+            kvRow(this.theme, "running", String(this.flows.filter((flow) => flow.status === "running").length)),
+            "",
+            accent(this.theme, "Selected"),
+            ...(selected
+                ? this.runSummaryLines(selected)
+                : [placeholder(this.theme, "none")]),
+        ];
+        return this.renderTwoPane(width, "Filters / Summary", sideLines, "Runs", this.runLines(Math.max(1, this.mainPaneBodyWidth(width))), 32);
+    }
+    renderStagesScreen(width, run) {
+        const sideLines = [
+            ...this.runDetailSummaryLines(run),
+            "",
+            accent(this.theme, "Navigation"),
+            navHint(this.theme, "Enter/right: tasks"),
+            navHint(this.theme, "b/Esc/left: runs"),
+        ];
+        return this.renderTwoPane(width, "Run Summary", sideLines, "Stages", this.stageLines(run, Math.max(1, this.mainPaneBodyWidth(width))), 34);
+    }
+    renderTasksScreen(width, run) {
+        const leftBodyWidth = width < 92 ? Math.max(1, width - 4) : 30;
+        const leftLines = this.compactStageLines(run, leftBodyWidth);
+        const rightBodyWidth = Math.max(1, this.mainPaneBodyWidth(width));
+        return this.renderTwoPane(width, "Stages", leftLines, `${this.currentStageId(run) ?? "Stage"} tasks`, this.taskLines(run, rightBodyWidth), 34);
+    }
+    renderTwoPane(width, leftTitle, leftLines, rightTitle, rightLines, preferredLeftWidth) {
+        if (width < 92) {
+            return [
+                ...boxed(this.theme, leftTitle, width, leftLines),
+                "",
+                ...boxed(this.theme, rightTitle, width, rightLines, "borderAccent"),
+            ];
+        }
+        const leftWidth = Math.min(Math.max(28, preferredLeftWidth), Math.max(28, Math.floor(width * 0.32)));
+        const rightWidth = Math.max(40, width - leftWidth - 1);
+        const left = boxed(this.theme, leftTitle, leftWidth, leftLines);
+        const right = boxed(this.theme, rightTitle, rightWidth, rightLines, "borderAccent");
+        const maxRows = Math.max(left.length, right.length);
+        const rendered = [];
+        for (let index = 0; index < maxRows; index += 1) {
+            rendered.push(joinFixedColumns([left[index] ?? "", right[index] ?? ""], [leftWidth, rightWidth]));
+        }
+        return rendered;
+    }
+    mainPaneBodyWidth(width) {
+        if (width < 92)
+            return width - 4;
+        const leftWidth = Math.min(34, Math.max(28, Math.floor(width * 0.32)));
+        return width - leftWidth - 5;
+    }
+    renderTaskDetail(width, run, task) {
+        const lines = [
+            ...boxed(this.theme, "Task Detail", width, [
+                `${statusGlyph(this.theme, task.status)} ${strong(this.theme, task.displayName)} ${statusBadge(this.theme, task.status)} ${muted(this.theme, this.breadcrumbText())}`,
+                taskMetaLine(this.theme, [
+                    ["agent", task.agent],
+                    ["stage", task.stageId ?? "(none)"],
+                    ["runtime", taskRuntimeSummary(task)],
+                    ["elapsed", taskElapsed(task)],
+                ]),
+            ], statusColor(task.status)),
+            "",
+        ];
+        const validationLines = this.taskValidationStripLines(task, width - 4);
+        if (validationLines.length > 0) {
+            lines.push(...boxed(this.theme, "Validation", width, validationLines, task.outputValidation?.status === "invalid" ||
+                task.outputValidation?.valid === false
+                ? "error"
+                : "warning"), "");
+        }
+        if (width >= 118) {
+            const leftWidth = 42;
+            const mainWidth = Math.max(60, width - leftWidth - 1);
+            const widths = [leftWidth, mainWidth];
+            const left = boxed(this.theme, "Task / Runtime", leftWidth, [
+                ...this.taskOverviewLines(run, task, leftWidth - 4),
+                "",
+                ...this.taskTimelineLines(run, task, leftWidth - 4),
+            ], statusColor(task.status));
+            const main = boxed(this.theme, "Artifact Viewer", mainWidth, this.taskArtifactViewerLines(task, mainWidth - 4), "borderAccent");
+            const maxRows = Math.max(left.length, main.length);
+            for (let index = 0; index < maxRows; index += 1) {
+                lines.push(joinFixedColumns([left[index] ?? "", main[index] ?? ""], widths));
+            }
+        }
+        else {
+            lines.push(...boxed(this.theme, "Agent / Timeline", width, this.taskIdentityLines(run, task, width - 4)), "", ...boxed(this.theme, "Artifact Viewer", width, this.taskArtifactViewerLines(task, width - 4), "borderAccent"));
+        }
+        lines.push("", this.footer(this.footerText(width)));
+        if (this.message)
+            lines.push(messageText(this.theme, this.message));
+        if (this.error)
+            lines.push(errorText(this.theme, this.error));
+        return lines;
+    }
+    runLines(width) {
+        const window = visibleWindow(this.flows, this.selectedFlow, MAX_LIST_ROWS);
+        const lines = [];
+        if (window.hiddenBefore > 0)
+            lines.push(scrollIndicator(this.theme, `  ${window.hiddenBefore} more runs above`));
+        const statusWidth = Math.max(7, ...window.rows.map(({ item }) => visibleWidth(statusLabelText(runStatusLabel(item)))));
+        for (const { item: flow, index } of window.rows) {
+            const selected = index === this.selectedFlow;
+            const prefix = selected ? accent(this.theme, "› ") : "  ";
+            const marker = statusGlyph(this.theme, flow.status);
+            const name = flow.name ?? flow.type;
+            const left = `${prefix}${marker} ${selected ? strong(this.theme, name) : name}`;
+            const runIdText = shortId(flow.runId).slice(0, 16).padEnd(16, " ");
+            const runningText = flow.taskSummary.running > 0
+                ? ` ${muted(this.theme, "·")} ${metaLabel(this.theme, "running")} ${metaValue(this.theme, String(flow.taskSummary.running))}`
+                : "";
+            const baseRight = `${statusColumn(this.theme, flow.status, runStatusLabel(flow), statusWidth)}  ${progressBar(this.theme, flow.taskSummary, 5)} ${metaValue(this.theme, runIdText)}`;
+            const right = width >= 90
+                ? `${baseRight} ${muted(this.theme, "·")} ${metaLabel(this.theme, "start")} ${metaValue(this.theme, timestampText(flow.createdAt))}${runningText}`
+                : `${baseRight}${runningText}`;
+            const line = joinColumns(left, right, width, 17);
+            lines.push(selectedLine(this.theme, line, width, selected, true));
+        }
+        if (window.hiddenAfter > 0)
+            lines.push(scrollIndicator(this.theme, `  ${window.hiddenAfter} more runs below`));
+        return lines;
+    }
+    stageLines(run, width) {
+        const stages = stageSummaries(run);
+        const currentStage = this.currentStageId(run);
+        return stages.map((stage) => {
+            const selected = stage.id === currentStage;
+            const status = statusForSummary(stage.summary);
+            const prefix = selected ? accent(this.theme, "› ") : "  ";
+            const label = `${prefix}${statusGlyph(this.theme, status)} ${selected ? strong(this.theme, stage.id) : stage.id}`;
+            const right = `${statusBadge(this.theme, status)} ${progressBar(this.theme, stage.summary, 8)}`;
+            const line = joinColumns(label, right, width, Math.max(16, Math.floor(width * 0.52)));
+            return selectedLine(this.theme, line, width, selected, true);
+        });
+    }
+    compactStageLines(run, width) {
+        const stages = stageSummaries(run);
+        const currentStage = this.currentStageId(run);
+        return stages.map((stage) => {
+            const selected = stage.id === currentStage;
+            const status = statusForSummary(stage.summary);
+            const prefix = selected ? accent(this.theme, "› ") : "  ";
+            const label = `${prefix}${statusGlyph(this.theme, status)} ${selected ? strong(this.theme, stage.id) : stage.id}`;
+            const line = joinColumns(label, compactStatusLabel(this.theme, status), width, Math.max(12, Math.floor(width * 0.55)));
+            return selectedLine(this.theme, line, width, selected, true);
+        });
+    }
+    taskLines(run, width) {
+        const allTasks = this.tasksForSelectedStage(run);
+        const window = visibleWindow(allTasks, this.selectedTask, MAX_STAGE_TASK_ROWS);
+        const lines = [];
+        if (window.hiddenBefore > 0)
+            lines.push(scrollIndicator(this.theme, `  ${window.hiddenBefore} more tasks above`));
+        for (const { item: task, index } of window.rows) {
+            const selected = index === this.selectedTask;
+            const prefix = selected ? accent(this.theme, "› ") : "  ";
+            const left = `${prefix}${statusGlyph(this.theme, task.status)} ${selected ? strong(this.theme, task.displayName) : task.displayName}`;
+            const right = taskListStatusLabel(this.theme, task);
+            const line = joinColumns(left, metaByStatus(this.theme, task.status, right), width, Math.max(22, Math.floor(width * 0.45)));
+            lines.push(selectedLine(this.theme, line, width, selected, true));
+        }
+        if (window.hiddenAfter > 0)
+            lines.push(scrollIndicator(this.theme, `  ${window.hiddenAfter} more tasks below`));
+        return lines.length > 0
+            ? lines
+            : [placeholder(this.theme, "  no tasks in selected stage")];
+    }
+    taskIdentityLines(run, task, width) {
+        return [
+            ...this.taskOverviewLines(run, task, width),
+            "",
+            ...this.taskTimelineLines(run, task, width),
+        ];
+    }
+    taskOverviewLines(run, task, width) {
+        const lines = [
+            `${statusGlyph(this.theme, task.status)} ${strong(this.theme, task.displayName)}`,
+            kvRow(this.theme, "run", run.runId),
+            kvRow(this.theme, "stage", task.stageId ?? "(none)"),
+            kvRow(this.theme, "task", task.taskId),
+            "",
+            accent(this.theme, "Runtime"),
+            kvRow(this.theme, "agent", task.agent, "syntaxType"),
+            kvRow(this.theme, "model", task.runtime.model ?? "(not recorded)"),
+            kvRow(this.theme, "thinking", task.runtime.thinking ?? "(not recorded)"),
+            kvRow(this.theme, "tools", (task.tools ?? []).join(",") || "(default)"),
+        ];
+        return lines.map((line) => fit(line, width));
+    }
+    taskTimelineLines(run, task, width) {
+        const lines = [timelineLine(this.theme, "created", run.createdAt, "dim")];
+        if (task.startedAt)
+            lines.push(timelineLine(this.theme, "started", task.startedAt, "accent"));
+        if (task.completedAt)
+            lines.push(timelineLine(this.theme, "completed", task.completedAt, statusColor(task.status)));
+        lines.push(timelineLine(this.theme, "elapsed", taskElapsed(task), statusColor(task.status)));
+        if (task.lastMessage)
+            lines.push(timelineLine(this.theme, "last", task.lastMessage, "warning"));
+        const validation = taskValidationSummary(task);
+        if (validation)
+            lines.push(timelineLine(this.theme, "contract", validation.status, validation.status === "valid"
+                ? "success"
+                : validation.status === "invalid"
+                    ? "error"
+                    : "warning"));
+        return lines.map((line) => fit(line, width));
+    }
+    taskValidationStripLines(task, width) {
+        const summary = taskValidationSummary(task);
+        if (!summary)
+            return [];
+        return [
+            fit(validationLine(this.theme, summary.status, summary.message), width),
+        ];
+    }
+    taskArtifactViewerLines(task, width) {
+        const selectedLabel = this.taskArtifactView === "output" ? "Output" : "Prompt";
+        const switchHint = this.taskArtifactView === "output" ? "→ Prompt" : "← Output";
+        const sourceLines = this.currentArtifactSourceLines();
+        const total = sourceLines.length;
+        const maxStart = Math.max(0, total - TASK_ARTIFACT_VIEW_LINES);
+        const start = Math.min(this.artifactScrollLine, maxStart);
+        const end = total === 0
+            ? 0
+            : Math.min(total, start + TASK_ARTIFACT_VIEW_LINES);
+        const visible = total === 0
+            ? [
+                this.taskArtifactView === "output"
+                    ? "(empty log)"
+                    : "(task prompt unavailable)",
+            ]
+            : sourceLines.slice(start, end);
+        return [
+            `${accent(this.theme, `Viewing: ${selectedLabel}`)}    ${muted(this.theme, switchHint)}`,
+            `${metaLabel(this.theme, "lines")} ${metaValue(this.theme, total === 0 ? "0-0 / 0" : `${start + 1}-${end} / ${total}`)} ${muted(this.theme, "·")} ${pathText(this.theme, this.currentArtifactPath(task))}`,
+            "",
+            ...visible.map((line) => fit(previewText(this.theme, line), width)),
+        ];
+    }
+    currentArtifactSourceLines() {
+        return this.taskArtifactView === "output"
+            ? this.outputLines
+            : this.promptLines;
+    }
+    currentArtifactPath(task) {
+        return this.taskArtifactView === "output"
+            ? task.files.output
+            : task.files.taskPrompt;
+    }
+    switchTaskArtifact(delta) {
+        const views = ["output", "prompt"];
+        const currentIndex = views.indexOf(this.taskArtifactView);
+        this.taskArtifactView =
+            views[wrapIndex(currentIndex + delta, views.length)] ?? "output";
+        this.resetArtifactScroll();
+        this.message = "";
+        this.tui.requestRender();
+    }
+    scrollTaskArtifact(delta) {
+        const max = this.maxArtifactScrollLine();
+        this.artifactScrollLine = Math.max(0, Math.min(max, this.artifactScrollLine + delta));
+        this.message = "";
+        this.tui.requestRender();
+    }
+    maxArtifactScrollLine() {
+        return Math.max(0, this.currentArtifactSourceLines().length - TASK_ARTIFACT_VIEW_LINES);
+    }
+    resetArtifactScroll() {
+        this.artifactScrollLine = 0;
+    }
+    moveModeSelection(delta) {
+        if (this.mode === "runs") {
+            this.moveRun(delta);
+            return;
+        }
+        if (this.mode === "stages") {
+            this.moveStage(delta);
+            return;
+        }
+        if (this.mode === "tasks")
+            this.moveTask(delta);
+    }
+    drillUp() {
+        if (this.mode === "task") {
+            this.mode = "tasks";
+            this.message = "";
+            this.tui.requestRender();
+            return;
+        }
+        if (this.mode === "tasks") {
+            this.mode = "stages";
+            this.message = "";
+            this.tui.requestRender();
+            return;
+        }
+        if (this.mode === "stages") {
+            this.mode = "runs";
+            this.message = "";
+            this.tui.requestRender();
+            return;
+        }
+        this.close();
+    }
+    drillDown() {
+        if (this.mode === "runs") {
+            if (this.flows.length === 0)
+                return;
+            this.mode = "stages";
+            this.message = "";
+            void this.reload(true);
+            this.tui.requestRender();
+            return;
+        }
+        if (this.mode === "stages") {
+            if (!this.detailRun)
+                return;
+            this.mode = "tasks";
+            this.message = "";
+            void this.updateTaskPreviews();
+            this.tui.requestRender();
+            return;
+        }
+        if (this.mode === "tasks") {
+            if (!this.selectedTaskRecord())
+                return;
+            this.mode = "task";
+            this.message = "";
+            this.resetArtifactScroll();
+            void this.updateTaskPreviews();
+            this.tui.requestRender();
+        }
+    }
+    moveRun(delta) {
+        if (this.flows.length <= 0)
+            return;
+        this.selectedFlow = wrapIndex(this.selectedFlow + delta, this.flows.length);
+        this.selectedStage = 0;
+        this.selectedTask = 0;
+        this.selectedTaskId = "";
+        this.resetArtifactScroll();
+        this.message = "";
+        void this.reload(true);
+        this.tui.requestRender();
+    }
+    moveStage(delta) {
+        if (!this.detailRun)
+            return;
+        const stages = stageSummaries(this.detailRun);
+        this.selectedStage = wrapIndex(this.selectedStage + delta, stages.length);
+        this.selectedTask = 0;
+        this.selectedTaskId = "";
+        this.resetArtifactScroll();
+        this.message = "";
+        void this.updateTaskPreviews();
+        this.tui.requestRender();
+    }
+    moveTask(delta) {
+        if (!this.detailRun)
+            return;
+        const tasks = this.tasksForSelectedStage(this.detailRun);
+        this.selectedTask = wrapIndex(this.selectedTask + delta, tasks.length);
+        this.syncSelectedTaskId(tasks);
+        this.resetArtifactScroll();
+        this.message = "";
+        void this.updateTaskPreviews();
+        this.tui.requestRender();
+    }
+    clampStageAndTask() {
+        if (!this.detailRun)
+            return;
+        const stages = stageSummaries(this.detailRun);
+        this.selectedStage = clampIndex(this.selectedStage, stages.length);
+        const tasks = this.tasksForSelectedStage(this.detailRun);
+        const selectedTaskIndex = this.selectedTaskId
+            ? tasks.findIndex((task) => task.taskId === this.selectedTaskId)
+            : -1;
+        this.selectedTask =
+            selectedTaskIndex >= 0
+                ? selectedTaskIndex
+                : clampIndex(this.selectedTask, tasks.length);
+        this.syncSelectedTaskId(tasks);
+    }
+    currentStageId(run) {
+        const stages = stageSummaries(run);
+        return stages[this.selectedStage]?.id;
+    }
+    tasksForSelectedStage(run) {
+        const stageId = this.currentStageId(run);
+        const tasks = !stageId || run.type !== WORKFLOW_RUN_TYPE
+            ? run.tasks
+            : run.tasks.filter((task) => (task.stageId ?? "unknown") === stageId);
+        return tasks
+            .map((task, index) => ({ task, index }))
+            .sort((left, right) => {
+            const priority = taskProblemPriority(left.task.status) -
+                taskProblemPriority(right.task.status);
+            return priority || left.index - right.index;
+        })
+            .map((entry) => entry.task);
+    }
+    selectedTaskRecord() {
+        if (!this.detailRun)
+            return undefined;
+        return this.tasksForSelectedStage(this.detailRun)[this.selectedTask];
+    }
+    syncSelectedTaskId(tasks) {
+        const stageTasks = tasks ?? (this.detailRun ? this.tasksForSelectedStage(this.detailRun) : []);
+        this.selectedTaskId = stageTasks[this.selectedTask]?.taskId ?? "";
+    }
+    breadcrumbText() {
+        const parts = ["workflow"];
+        const flow = this.flows[this.selectedFlow];
+        if (flow && this.mode !== "runs")
+            parts.push(flow.name ?? shortId(flow.runId));
+        const stageId = this.detailRun
+            ? this.currentStageId(this.detailRun)
+            : undefined;
+        if (stageId && (this.mode === "tasks" || this.mode === "task"))
+            parts.push(stageId);
+        const task = this.selectedTaskRecord();
+        if (task && this.mode === "task")
+            parts.push(task.displayName);
+        return parts.join(" › ");
+    }
+    runSummaryLines(flow) {
+        return [
+            `${statusGlyph(this.theme, flow.status)} ${strong(this.theme, flow.name ?? flow.type)} ${statusBadge(this.theme, flow.status, runStatusLabel(flow))}`,
+            progressBar(this.theme, flow.taskSummary, 8),
+            taskMetaLine(this.theme, [
+                ["run", shortId(flow.runId)],
+                ["started", timestampText(flow.createdAt)],
+            ]),
+            taskMetaLine(this.theme, [
+                ["tasks", `${flow.taskSummary.completed}/${flow.taskSummary.total}`],
+                ["running", String(flow.taskSummary.running)],
+            ]),
+            taskMetaLine(this.theme, [
+                ["updated", timestampText(flow.updatedAt)],
+                [
+                    "elapsed",
+                    elapsedText(flow.createdAt, flow.updatedAt, flow.status === "running"),
+                ],
+            ]),
+        ];
+    }
+    runDetailSummaryLines(run) {
+        const lines = [
+            `${statusGlyph(this.theme, run.status)} ${strong(this.theme, run.name ?? run.type)} ${statusBadge(this.theme, run.status)}`,
+            progressBar(this.theme, run.taskSummary, 10),
+            taskMetaLine(this.theme, [
+                ["tasks", `${run.taskSummary.completed}/${run.taskSummary.total}`],
+                ["running", String(run.taskSummary.running)],
+            ]),
+            taskMetaLine(this.theme, [
+                ["pending", String(run.taskSummary.pending)],
+                [
+                    "elapsed",
+                    elapsedText(run.createdAt, run.updatedAt, run.status === "running"),
+                ],
+            ]),
+            taskMetaLine(this.theme, [
+                ["started", timestampText(run.createdAt)],
+                ["updated", timestampText(run.updatedAt)],
+            ]),
+            kvRow(this.theme, "run", shortId(run.runId)),
+        ];
+        if (run.fanout && run.fanout.length > 0) {
+            lines.push("", accent(this.theme, "Fanout"));
+            for (const item of run.fanout.slice(0, 3)) {
+                lines.push(taskMetaLine(this.theme, [
+                    [item.stageId, `expanded=${item.expandedCount}`],
+                    ["max", String(item.maxConcurrency)],
+                ]));
+            }
+        }
+        return lines;
+    }
+    stageContextLines(run) {
+        const stageId = this.currentStageId(run);
+        const lines = [kvRow(this.theme, "run", shortId(run.runId))];
+        if (stageId)
+            lines.push(kvRow(this.theme, "stage", stageId));
+        if (run.fanout?.some((item) => item.stageId === stageId))
+            lines.push(warning(this.theme, "fanout stage"));
+        return lines;
+    }
+    footerText(width) {
+        if (width < 72) {
+            if (this.mode === "task")
+                return "←/→ artifact · ↑/↓ scroll · Esc back · r refresh · q close";
+            if (this.mode === "tasks")
+                return "Enter detail · ←/→ nav · ↑/↓ move · q close";
+            if (this.mode === "stages")
+                return "Enter tasks · ←/→ nav · ↑/↓ move · q close";
+            return "Enter stages · ↑/↓ move · q/Esc close";
+        }
+        if (this.mode === "task")
+            return "←/→ switch Output/Prompt · ↑/↓ scroll artifact · b/Esc back · r refresh · q close";
+        if (this.mode === "tasks")
+            return "Enter/→ detail · b/Esc/← stages · ↑/↓ move · [/]/n/p sibling · r refresh · q close";
+        if (this.mode === "stages")
+            return "Enter/→ tasks · b/Esc/← runs · ↑/↓ move · [/]/n/p sibling · r refresh · q close";
+        return "Enter/→ stages · ↑/↓ move · [/]/n/p sibling · r refresh · q/Esc close";
+    }
+    footer(text) {
+        return navHint(this.theme, text);
+    }
+    isCloseInput(data) {
+        return (data === "q" ||
+            data === "Q" ||
+            matchesKey(data, "ctrl+c") ||
+            matchesKey(data, "ctrl+d"));
+    }
+    isBackInput(data) {
+        return (data === "b" ||
+            data === "B" ||
+            matchesKey(data, "left") ||
+            matchesKey(data, "backspace"));
+    }
+    close() {
+        this.dispose();
+        this.done();
+    }
+}
+async function loadFlowSummaries(cwd, initialRunId) {
+    const index = await readIndex(cwd).catch(() => undefined);
+    let flows = index?.runs ?? [];
+    if (flows.length === 0) {
+        const records = await listRunRecords(cwd);
+        flows = records
+            .sort((left, right) => right.updatedAt.localeCompare(left.updatedAt))
+            .map((run) => runToSummary(cwd, run));
+    }
+    if (initialRunId &&
+        !flows.some((flow) => flow.runId === initialRunId || flow.runId.startsWith(initialRunId))) {
+        const run = await readRunRecord(cwd, initialRunId).catch(() => undefined);
+        if (run)
+            flows = [runToSummary(cwd, run), ...flows];
+    }
+    return flows;
+}
+function runToSummary(cwd, run) {
+    return {
+        runId: run.runId,
+        name: run.name,
+        type: run.type,
+        status: run.status,
+        taskSummary: run.taskSummary,
+        createdAt: run.createdAt,
+        updatedAt: run.updatedAt,
+        runJson: workflowRunPath(cwd, run.runId),
+        parentRunId: run.parentRunId,
+        rootRunId: run.rootRunId,
+        round: run.round,
+        fanout: run.fanout,
+        tasks: run.tasks.map((task) => ({
+            taskId: task.taskId,
+            displayName: task.displayName,
+            kind: task.kind,
+            stageId: task.stageId,
+            agent: task.agent,
+            status: task.status,
+            statusDetail: task.statusDetail,
+            backendHandle: task.backendHandle,
+            lastMessage: task.lastMessage,
+        })),
+    };
+}
+async function readFileLinesBounded(cwd, projectPath, maxLines) {
+    if (!projectPath)
+        return [];
+    const text = await readFile(fromProjectPath(cwd, projectPath), "utf8").catch((error) => {
+        if (error.code === "ENOENT")
+            return "";
+        throw error;
+    });
+    if (!text)
+        return [];
+    const lines = text.split(/\r?\n/);
+    if (lines[lines.length - 1] === "")
+        lines.pop();
+    return lines.slice(-maxLines);
+}
+function stageSummaries(run) {
+    if (run.type !== WORKFLOW_RUN_TYPE)
+        return [{ id: String(run.type), summary: run.taskSummary }];
+    const order = [];
+    const byStage = new Map();
+    for (const task of run.tasks) {
+        const stageId = task.stageId ?? "unknown";
+        if (!byStage.has(stageId)) {
+            byStage.set(stageId, []);
+            order.push(stageId);
+        }
+        byStage.get(stageId)?.push(task);
+    }
+    return order.map((id) => ({
+        id,
+        summary: summarizeTasks(byStage.get(id) ?? []),
+    }));
+}
+function summarizeTasks(tasks) {
+    const summary = {
+        pending: 0,
+        running: 0,
+        blocked: 0,
+        completed: 0,
+        failed: 0,
+        skipped: 0,
+        interrupted: 0,
+        total: 0,
+    };
+    for (const task of tasks) {
+        summary[task.status] += 1;
+        summary.total += 1;
+    }
+    return summary;
+}
+function statusForSummary(summary) {
+    if (summary.running > 0)
+        return "running";
+    if (summary.blocked > 0)
+        return "blocked";
+    if (summary.failed > 0 || summary.interrupted > 0)
+        return "failed";
+    if (summary.pending > 0)
+        return "pending";
+    if (summary.total > 0 && summary.completed === summary.total)
+        return "completed";
+    return "interrupted";
+}
+function taskElapsed(task) {
+    if (task.elapsedMs !== undefined)
+        return formatDuration(task.elapsedMs);
+    if (task.startedAt && task.status === "running")
+        return formatDuration(Date.now() - Date.parse(task.startedAt));
+    return task.status;
+}
+function taskRuntimeSummary(task) {
+    const model = task.runtime.model
+        ? shortModelName(task.runtime.model)
+        : "not-recorded";
+    const thinking = task.runtime.thinking ?? "not-recorded";
+    return `${model}/${thinking}`;
+}
+function shortModelName(model) {
+    return model.split("/").pop() || model;
+}
+function elapsedText(createdAt, updatedAt, running) {
+    const start = Date.parse(createdAt);
+    const end = running ? Date.now() : Date.parse(updatedAt);
+    if (!Number.isFinite(start) || !Number.isFinite(end))
+        return "unknown";
+    return formatDuration(Math.max(0, end - start));
+}
+function timestampText(value) {
+    const date = new Date(value);
+    if (!Number.isFinite(date.getTime()))
+        return value;
+    const pad = (part) => String(part).padStart(2, "0");
+    const currentYear = new Date().getFullYear();
+    const datePart = date.getFullYear() === currentYear
+        ? `${pad(date.getMonth() + 1)}/${pad(date.getDate())}`
+        : `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+    return `${datePart} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+function formatDuration(ms) {
+    const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    if (hours > 0)
+        return `${hours}h ${minutes}m`;
+    if (minutes > 0)
+        return `${minutes}m ${seconds}s`;
+    return `${seconds}s`;
+}
+function statusGlyph(theme, status) {
+    if (status === "completed")
+        return success(theme, "✓");
+    if (status === "running")
+        return accent(theme, "↻");
+    if (status === "blocked")
+        return warning(theme, "◆");
+    if (status === "failed" || status === "interrupted")
+        return errorText(theme, "✕");
+    if (status === "skipped")
+        return muted(theme, "↷");
+    return muted(theme, "•");
+}
+function metaByStatus(theme, status, content) {
+    if (status === "running")
+        return accent(theme, content);
+    if (status === "blocked")
+        return warning(theme, content);
+    if (status === "failed" || status === "interrupted")
+        return errorText(theme, content);
+    return content;
+}
+function statusBadge(theme, status, label = statusText(status)) {
+    const normalized = statusLabelText(label);
+    const padded = normalized.padEnd(9, " ");
+    const content = ` ${padded} `;
+    const colored = fg(theme, statusColor(status), strong(theme, content));
+    if (status === "pending")
+        return colored;
+    return theme.bg
+        ? bgBand(theme, statusBgColor(status), colored)
+        : fg(theme, statusColor(status), strong(theme, `[${padded.trimEnd()}]`));
+}
+function statusColumn(theme, status, label, width) {
+    const normalized = statusLabelText(label);
+    return padAnsi(fg(theme, statusColor(status), strong(theme, normalized)), width);
+}
+function statusLabelText(label) {
+    return label.toUpperCase().replace(/_/g, " ");
+}
+function statusBgColor(status) {
+    if (status === "completed")
+        return "toolSuccessBg";
+    if (status === "failed" || status === "interrupted")
+        return "toolErrorBg";
+    if (status === "running" || status === "blocked")
+        return "toolPendingBg";
+    return "customMessageBg";
+}
+function progressBar(theme, summary, cells) {
+    const safeCells = Math.max(1, cells);
+    const visibleProgress = summary.running > 0
+        ? summary.completed + summary.running
+        : summary.completed;
+    const filled = summary.total <= 0
+        ? 0
+        : Math.max(0, Math.min(safeCells, Math.round((visibleProgress / summary.total) * safeCells)));
+    const bar = `${"▰".repeat(filled)}${"▱".repeat(safeCells - filled)}`;
+    const denominatorWidth = Math.max(2, String(summary.total).length);
+    const totalText = String(summary.total).padStart(denominatorWidth, " ");
+    const progressText = `${String(visibleProgress).padStart(denominatorWidth, " ")}/${totalText}`;
+    return fg(theme, statusColor(statusForSummary(summary)), `${bar} ${progressText}`);
+}
+function statusColor(status) {
+    if (status === "completed")
+        return "success";
+    if (status === "running")
+        return "accent";
+    if (status === "blocked")
+        return "warning";
+    if (status === "failed" || status === "interrupted")
+        return "error";
+    return "dim";
+}
+function statusText(status) {
+    return status;
+}
+function taskListStatusLabel(theme, task) {
+    const validation = taskValidationSummary(task);
+    const label = validation?.status === "invalid"
+        ? "invalid output"
+        : validation?.status === "valid"
+            ? "valid"
+            : task.status === "completed"
+                ? "done"
+                : statusText(task.status);
+    return fg(theme, statusColor(task.status), strong(theme, label));
+}
+function compactStatusLabel(theme, status) {
+    const label = status === "completed" ? "done" : statusText(status);
+    return fg(theme, statusColor(status), strong(theme, label));
+}
+function runStatusLabel(flow) {
+    return statusText(flow.status);
+}
+function shortId(runId) {
+    return runId.replace(/^workflow_/, "workflow_").slice(0, 24);
+}
+function visibleWindow(items, selectedIndex, maxRows) {
+    const total = items.length;
+    if (total === 0)
+        return { rows: [], hiddenBefore: 0, hiddenAfter: 0 };
+    const safeMaxRows = Math.max(1, maxRows);
+    const selected = clampIndex(selectedIndex, total);
+    const start = total <= safeMaxRows
+        ? 0
+        : Math.max(0, Math.min(selected - Math.floor(safeMaxRows / 2), total - safeMaxRows));
+    const end = Math.min(total, start + safeMaxRows);
+    return {
+        rows: items
+            .slice(start, end)
+            .map((item, offset) => ({ item, index: start + offset })),
+        hiddenBefore: start,
+        hiddenAfter: Math.max(0, total - end),
+    };
+}
+function wrapIndex(index, length) {
+    if (length <= 0)
+        return 0;
+    return (index + length) % length;
+}
+function clampIndex(index, length) {
+    if (length <= 0)
+        return 0;
+    return Math.max(0, Math.min(index, length - 1));
+}
+function taskProblemPriority(status) {
+    if (status === "failed" || status === "interrupted")
+        return 0;
+    if (status === "blocked")
+        return 1;
+    if (status === "running")
+        return 2;
+    return 3;
+}
+function taskValidationSummary(task) {
+    const validation = task.outputValidation;
+    if (!validation)
+        return undefined;
+    const status = validation.status ??
+        (validation.valid === true
+            ? "valid"
+            : validation.valid === false
+                ? "invalid"
+                : "warning");
+    const issue = Array.isArray(validation.issues)
+        ? validation.issues[0]
+        : undefined;
+    const issueMessage = typeof issue === "string"
+        ? issue
+        : issue?.message ?? issue?.path ?? issue?.code ?? "";
+    const message = validation.message ?? validation.reason ?? issueMessage;
+    if (status === "valid" && !message)
+        return undefined;
+    return { status, message };
+}
+const MOD_CTRL = 4;
+const ARROW_CODEPOINTS = { up: -1, down: -2, right: -3, left: -4 };
+const KITTY_FUNCTIONAL_EQUIVALENTS = new Map([
+    [57414, 13],
+    [57417, ARROW_CODEPOINTS.left],
+    [57418, ARROW_CODEPOINTS.right],
+    [57419, ARROW_CODEPOINTS.up],
+    [57420, ARROW_CODEPOINTS.down],
+]);
+function matchesKey(data, key) {
+    if (key === "escape")
+        return data === "\u001b" || matchesSpecialKey(data, 27, 0);
+    if (key === "up")
+        return (matchesArrowKey(data, "up") ||
+            matchesSpecialKey(data, ARROW_CODEPOINTS.up, 0));
+    if (key === "down")
+        return (matchesArrowKey(data, "down") ||
+            matchesSpecialKey(data, ARROW_CODEPOINTS.down, 0));
+    if (key === "left")
+        return (matchesArrowKey(data, "left") ||
+            matchesSpecialKey(data, ARROW_CODEPOINTS.left, 0));
+    if (key === "right")
+        return (matchesArrowKey(data, "right") ||
+            matchesSpecialKey(data, ARROW_CODEPOINTS.right, 0));
+    if (key === "enter" || key === "return")
+        return (data === "\r" ||
+            data === "\n" ||
+            data === "\u001bOM" ||
+            matchesSpecialKey(data, 13, 0));
+    if (key === "backspace")
+        return (data === "\u007f" || data === "\b" || matchesSpecialKey(data, 127, 0));
+    if (key === "ctrl+c")
+        return data === "\u0003" || matchesSpecialKey(data, 99, MOD_CTRL);
+    if (key === "ctrl+d")
+        return data === "\u0004" || matchesSpecialKey(data, 100, MOD_CTRL);
+    return data === key || matchesPrintableKey(data, key);
+}
+function matchesArrowKey(data, key) {
+    const legacy = {
+        up: ["\u001b[A", "\u001bOA"],
+        down: ["\u001b[B", "\u001bOB"],
+        left: ["\u001b[D", "\u001bOD"],
+        right: ["\u001b[C", "\u001bOC"],
+    }[key];
+    if (legacy.includes(data))
+        return true;
+    const arrowMatch = /^\u001b\[1;(\d+)(?::(\d+))?([ABCD])$/.exec(data);
+    if (!arrowMatch)
+        return false;
+    const modifier = Number(arrowMatch[1]) - 1;
+    if (modifier !== 0)
+        return false;
+    const codepoint = {
+        A: ARROW_CODEPOINTS.up,
+        B: ARROW_CODEPOINTS.down,
+        C: ARROW_CODEPOINTS.right,
+        D: ARROW_CODEPOINTS.left,
+    }[arrowMatch[3]];
+    return codepoint === ARROW_CODEPOINTS[key];
+}
+function matchesSpecialKey(data, expectedCodepoint, expectedModifier) {
+    const parsed = parseKittySequence(data) ?? parseModifyOtherKeysSequence(data);
+    if (!parsed)
+        return false;
+    const codepoint = KITTY_FUNCTIONAL_EQUIVALENTS.get(parsed.codepoint) ?? parsed.codepoint;
+    return (codepoint === expectedCodepoint && parsed.modifier === expectedModifier);
+}
+function matchesPrintableKey(data, key) {
+    if (key.length !== 1)
+        return false;
+    const parsed = parseKittySequence(data);
+    if (!parsed || parsed.modifier !== 0)
+        return false;
+    return parsed.codepoint === key.charCodeAt(0);
+}
+function parseKittySequence(data) {
+    const csiUMatch = /^\u001b\[(\d+)(?::(\d*))?(?::(\d+))?(?:;(\d+))?(?::(\d+))?u$/.exec(data);
+    if (csiUMatch) {
+        return {
+            codepoint: Number(csiUMatch[1]),
+            modifier: Number(csiUMatch[4] ?? "1") - 1,
+        };
+    }
+    const arrowMatch = /^\u001b\[1;(\d+)(?::(\d+))?([ABCD])$/.exec(data);
+    if (arrowMatch) {
+        const codepoint = {
+            A: ARROW_CODEPOINTS.up,
+            B: ARROW_CODEPOINTS.down,
+            C: ARROW_CODEPOINTS.right,
+            D: ARROW_CODEPOINTS.left,
+        }[arrowMatch[3]];
+        return { codepoint, modifier: Number(arrowMatch[1]) - 1 };
+    }
+    return undefined;
+}
+function parseModifyOtherKeysSequence(data) {
+    const match = /^\u001b\[27;(\d+);(\d+)~$/.exec(data);
+    if (!match)
+        return undefined;
+    return { modifier: Number(match[1]) - 1, codepoint: Number(match[2]) };
+}
+function joinFixedColumns(columns, widths) {
+    return columns
+        .map((column, index) => padAnsi(fit(column, widths[index] ?? 1), widths[index] ?? 1))
+        .join(" ");
+}
+function boxed(theme, titleText, width, content, color = "borderMuted") {
+    const safeWidth = Math.max(8, width);
+    const bodyWidth = Math.max(1, safeWidth - 4);
+    const topLabel = `╭─ ${titleText} `;
+    const top = `${topLabel}${"─".repeat(Math.max(0, safeWidth - visibleWidth(topLabel) - 1))}╮`;
+    const bottom = `╰${"─".repeat(Math.max(0, safeWidth - 2))}╯`;
+    const body = content.length > 0 ? content : [""];
+    return [
+        fg(theme, color, top),
+        ...body.map((line) => `${fg(theme, color, "│")} ${padAnsi(fit(line, bodyWidth), bodyWidth)} ${fg(theme, color, "│")}`),
+        fg(theme, color, bottom),
+    ];
+}
+function joinColumns(left, right, width, leftWidth) {
+    const safeLeftWidth = Math.max(1, Math.min(leftWidth, width - 1));
+    const safeRightWidth = Math.max(1, width - safeLeftWidth - 1);
+    const leftText = fit(left, safeLeftWidth);
+    const rightText = fit(right, safeRightWidth);
+    return `${padAnsi(leftText, safeLeftWidth)} ${rightText}`;
+}
+function padAnsi(text, width) {
+    const visible = visibleWidth(text);
+    return visible >= width ? text : `${text}${" ".repeat(width - visible)}`;
+}
+function fit(text, width) {
+    return truncateToWidth(text, Math.max(1, width));
+}
+const GRAPHEME_SEGMENTER = new Intl.Segmenter(undefined, {
+    granularity: "grapheme",
+});
+function visibleWidth(text) {
+    const clean = stripAnsi(text);
+    let width = 0;
+    for (const { segment } of GRAPHEME_SEGMENTER.segment(clean)) {
+        width += graphemeWidth(segment);
+    }
+    return width;
+}
+function truncateToWidth(text, width) {
+    const safeWidth = Math.max(0, Math.floor(width || 0));
+    if (safeWidth === 0)
+        return "";
+    if (visibleWidth(text) <= safeWidth)
+        return text;
+    const hasAnsi = text.includes("\u001b[") || text.includes("\u001b]") || text.includes("\u001b_");
+    const ellipsis = "…";
+    const ellipsisWidth = visibleWidth(ellipsis);
+    const limit = Math.max(0, safeWidth - ellipsisWidth);
+    let visible = 0;
+    let output = "";
+    for (let index = 0; index < text.length;) {
+        const ansi = readAnsi(text, index);
+        if (ansi) {
+            output += ansi.value;
+            index = ansi.nextIndex;
+            continue;
+        }
+        const codePoint = text.codePointAt(index);
+        if (codePoint === undefined)
+            break;
+        const char = String.fromCodePoint(codePoint);
+        const charWidth = graphemeWidth(char);
+        if (visible + charWidth > limit)
+            break;
+        output += char;
+        visible += charWidth;
+        index += char.length;
+    }
+    return `${output}${ellipsis}${hasAnsi ? "\u001b[0m" : ""}`;
+}
+function stripAnsi(text) {
+    let output = "";
+    for (let index = 0; index < text.length;) {
+        const ansi = readAnsi(text, index);
+        if (ansi) {
+            index = ansi.nextIndex;
+            continue;
+        }
+        const codePoint = text.codePointAt(index);
+        if (codePoint === undefined)
+            break;
+        const char = String.fromCodePoint(codePoint);
+        output += char;
+        index += char.length;
+    }
+    return output;
+}
+function readAnsi(text, index) {
+    if (text.charCodeAt(index) !== 0x1b)
+        return undefined;
+    const next = text[index + 1];
+    if (next === "[")
+        return readCsi(text, index);
+    if (next === "]")
+        return readTerminatedEscape(text, index, 2);
+    if (next === "_")
+        return readTerminatedEscape(text, index, 2);
+    return undefined;
+}
+function readCsi(text, index) {
+    let nextIndex = index + 2;
+    while (nextIndex < text.length) {
+        const code = text.charCodeAt(nextIndex);
+        nextIndex += 1;
+        if (code >= 0x40 && code <= 0x7e)
+            return { value: text.slice(index, nextIndex), nextIndex };
+    }
+    return { value: text.slice(index), nextIndex: text.length };
+}
+function readTerminatedEscape(text, index, bodyOffset) {
+    let nextIndex = index + bodyOffset;
+    while (nextIndex < text.length) {
+        if (text[nextIndex] === "\x07") {
+            const end = nextIndex + 1;
+            return { value: text.slice(index, end), nextIndex: end };
+        }
+        if (text[nextIndex] === "\x1b" && text[nextIndex + 1] === "\\") {
+            const end = nextIndex + 2;
+            return { value: text.slice(index, end), nextIndex: end };
+        }
+        nextIndex += 1;
+    }
+    return { value: text.slice(index), nextIndex: text.length };
+}
+function graphemeWidth(segment) {
+    if (segment.length === 0)
+        return 0;
+    if (segment === "\t")
+        return 3;
+    if (/^[\p{Mark}\p{Control}\p{Surrogate}\u200d\ufe0e\ufe0f]+$/u.test(segment))
+        return 0;
+    if (isEmojiLike(segment))
+        return 2;
+    const base = segment.replace(/^[\p{Mark}\p{Control}\p{Format}\p{Surrogate}]+/u, "");
+    const codePoint = base.codePointAt(0);
+    if (codePoint === undefined)
+        return 0;
+    return isWideCodePoint(codePoint) ? 2 : 1;
+}
+function isEmojiLike(segment) {
+    if (/[\ufe0f\u200d]/u.test(segment))
+        return true;
+    const codePoint = segment.codePointAt(0);
+    if (codePoint === undefined)
+        return false;
+    return ((codePoint >= 0x1f000 && codePoint <= 0x1fbff) ||
+        codePoint === 0x2705 ||
+        (codePoint >= 0x2b50 && codePoint <= 0x2b55));
+}
+function isWideCodePoint(codePoint) {
+    return ((codePoint >= 0x1100 && codePoint <= 0x115f) ||
+        codePoint === 0x2329 ||
+        codePoint === 0x232a ||
+        (codePoint >= 0x2e80 && codePoint <= 0xa4cf) ||
+        (codePoint >= 0xac00 && codePoint <= 0xd7a3) ||
+        (codePoint >= 0xf900 && codePoint <= 0xfaff) ||
+        (codePoint >= 0xfe10 && codePoint <= 0xfe19) ||
+        (codePoint >= 0xfe30 && codePoint <= 0xfe6f) ||
+        (codePoint >= 0xff00 && codePoint <= 0xff60) ||
+        (codePoint >= 0xffe0 && codePoint <= 0xffe6));
+}
+function placeholder(theme, text) {
+    return muted(theme, text);
+}
+function messageText(theme, text) {
+    return accent(theme, text);
+}
+function scrollIndicator(theme, text) {
+    return muted(theme, text);
+}
+function metaLabel(theme, text) {
+    return muted(theme, text);
+}
+function metaValue(theme, text) {
+    return fg(theme, "text", text);
+}
+function agentText(theme, text) {
+    return fg(theme, "syntaxType", text);
+}
+function kvRow(theme, key, value, valueColor = "text") {
+    return `${metaLabel(theme, `${key}:`)} ${fg(theme, valueColor, value)}`;
+}
+function taskMetaLine(theme, pairs) {
+    return pairs
+        .map(([key, value]) => kvRow(theme, key, value))
+        .join(` ${muted(theme, "·")} `);
+}
+function pathRow(theme, label, projectPath) {
+    return `${metaLabel(theme, label)} ${pathText(theme, projectPath)}`;
+}
+function pathText(theme, projectPath) {
+    const lastSlash = projectPath.lastIndexOf("/");
+    if (lastSlash < 0)
+        return fg(theme, "mdLinkUrl", projectPath);
+    return `${dim(theme, projectPath.slice(0, lastSlash + 1))}${metaValue(theme, projectPath.slice(lastSlash + 1))}`;
+}
+function navHint(theme, text) {
+    return text
+        .split(" · ")
+        .map((part) => {
+        const firstSpace = part.indexOf(" ");
+        if (firstSpace < 0)
+            return accent(theme, part);
+        return `${accent(theme, part.slice(0, firstSpace))}${muted(theme, part.slice(firstSpace))}`;
+    })
+        .join(` ${muted(theme, "·")} `);
+}
+function timelineLine(theme, label, value, color) {
+    const glyph = color === "success" ? "✓" : color === "error" ? "✕" : "●";
+    return `${fg(theme, color, glyph)} ${metaLabel(theme, label)} ${metaValue(theme, value)}`;
+}
+function validationLine(theme, status, message) {
+    const color = status === "valid" ? "success" : status === "invalid" ? "error" : "warning";
+    const suffix = message
+        ? ` ${muted(theme, "·")} ${metaValue(theme, message)}`
+        : "";
+    return `${fg(theme, color, strong(theme, status))}${suffix}`;
+}
+function previewText(theme, line) {
+    if (/^\([^)]*\)$/.test(line))
+        return placeholder(theme, line);
+    const trimmedStart = line.trimStart();
+    const indent = line.slice(0, line.length - trimmedStart.length);
+    if (/^#{1,6}\s/.test(trimmedStart))
+        return `${indent}${fg(theme, "mdHeading", strong(theme, trimmedStart))}`;
+    if (/^```/.test(trimmedStart))
+        return fg(theme, "mdCodeBlockBorder", line);
+    if (/^(?:\/\/|<!--)/.test(trimmedStart))
+        return fg(theme, "syntaxComment", line);
+    const bullet = /^(\s*)([-*])\s+(.*)$/.exec(line);
+    if (bullet)
+        return `${bullet[1]}${fg(theme, "mdListBullet", bullet[2] ?? "-")} ${inlinePreviewText(theme, bullet[3] ?? "")}`;
+    const keyValue = /^(\s*(?:"[^"]+"|[A-Za-z0-9_.-]+)\s*[:=])(\s*)(.*)$/.exec(line);
+    if (keyValue)
+        return `${fg(theme, "syntaxVariable", keyValue[1] ?? "")}${keyValue[2] ?? ""}${inlinePreviewText(theme, keyValue[3] ?? "")}`;
+    return inlinePreviewText(theme, line);
+}
+function inlinePreviewText(theme, text) {
+    return text
+        .split(/(`[^`]*`|[A-Z][A-Z0-9_]{3,}|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g)
+        .map((part) => {
+        if (!part)
+            return "";
+        if (/^`[^`]*`$/.test(part))
+            return fg(theme, "mdCode", part);
+        if (/^[A-Z][A-Z0-9_]{3,}$/.test(part))
+            return fg(theme, "mdCode", part);
+        if (/^"(?:[^"\\]|\\.)*"$/.test(part) || /^'(?:[^'\\]|\\.)*'$/.test(part))
+            return fg(theme, "syntaxString", part);
+        return metaValue(theme, part);
+    })
+        .join("");
+}
+function bgBand(theme, color, text) {
+    if (!theme.bg)
+        return text;
+    const marker = "__PI_WORKFLOW_BG_MARKER__";
+    const wrapped = theme.bg(color, marker);
+    const markerIndex = wrapped.indexOf(marker);
+    if (markerIndex < 0)
+        return theme.bg(color, text);
+    const prefix = wrapped.slice(0, markerIndex);
+    const suffix = wrapped.slice(markerIndex + marker.length);
+    return `${prefix}${text.replace(/\u001b\[0m/g, `\u001b[0m${prefix}`)}${suffix}`;
+}
+function chip(theme, label, value, color) {
+    const content = ` ${label} ${value} `;
+    return fg(theme, color, strong(theme, `●${content}`));
+}
+function rule(theme, width) {
+    return fg(theme, "borderMuted", "─".repeat(Math.max(1, Math.min(width, 160))));
+}
+function selectedLine(theme, line, width, selected, active) {
+    if (!selected)
+        return line;
+    const padded = padAnsi(line, width);
+    if (active && theme.bg)
+        return bgBand(theme, "selectedBg", padded);
+    return active ? accent(theme, padded) : muted(theme, padded);
+}
+function strong(theme, text) {
+    return theme.bold ? theme.bold(text) : text;
+}
+function fg(theme, color, text) {
+    return theme.fg ? theme.fg(color, text) : text;
+}
+function accent(theme, text) {
+    return fg(theme, "accent", text);
+}
+function muted(theme, text) {
+    return fg(theme, "muted", text);
+}
+function dim(theme, text) {
+    return fg(theme, "dim", text);
+}
+function success(theme, text) {
+    return fg(theme, "success", text);
+}
+function warning(theme, text) {
+    return fg(theme, "warning", text);
+}
+function errorText(theme, text) {
+    return fg(theme, "error", text);
+}