@puzzmo/cli 1.0.33 → 1.0.35

package/lib/tui/pipeline.js

@@ -1,19 +1,19 @@
-import { spawn } from "node:child_process";
+import { execSync } from "node:child_process";
 import fs from "node:fs";
 import path from "node:path";
-import { execSync } from "node:child_process";
+import { getAgent } from "../agents/index.js";
 import { skillsPipeline } from "../skills/registry.js";
 import { fetchSkillPrompt } from "../skills/mcp-client.js";
-// ANSI escape helpers
 const ESC = "\x1b";
 const CSI = `${ESC}[`;
 const moveTo = (row, col) => `${CSI}${row};${col}H`;
 const clearScreen = () => `${CSI}2J`;
 const hideCursor = () => `${CSI}?25l`;
 const showCursor = () => `${CSI}?25h`;
-const bold = (s) => `${CSI}1m${s}${CSI}0m`;
-const dim = (s) => `${CSI}2m${s}${CSI}0m`;
-const fg = (code, s) => `${CSI}${code}m${s}${CSI}0m`;
+const reset = () => `${CSI}0m`;
+const bold = (s) => `${CSI}1m${s}${reset()}`;
+const dim = (s) => `${CSI}2m${s}${reset()}`;
+const fg = (code, s) => `${CSI}${code}m${s}${reset()}`;
 const green = (s) => fg(32, s);
 const yellow = (s) => fg(33, s);
 const red = (s) => fg(31, s);
@@ -40,32 +40,47 @@ const phaseColor = {
     commit: magenta,
     idle: gray,
 };
-/** Build agent-specific command for non-interactive mode */
-const buildAgentCmd = (agent, prompt) => {
-    if (agent === "claude")
-        return { cmd: "claude", args: ["-p", "--verbose", "--output-format", "stream-json", prompt] };
-    if (agent === "codex")
-        return { cmd: "codex", args: ["--quiet", prompt] };
-    return { cmd: agent, args: [prompt] };
-};
-/** Fetches step instructions from the MCP server and wraps them as an agent prompt */
+// oxlint-disable-next-line no-control-regex
+const ANSI_RE = /\x1b\[[0-9;]*[A-Za-z]/g;
+const stripAnsi = (s) => s.replace(ANSI_RE, "");
 const buildPrompt = async (stepName, gameDir, repoContext) => {
     const instructions = await fetchSkillPrompt(stepName, gameDir);
     return `Follow these instructions. The game source is in the current directory.\n\n${repoContext}\n\n${instructions}`;
 };
+/**
+ * Format a non-streaming event into discrete lines. text/thinking are handled
+ * separately by appendText so token deltas merge into one in-progress line.
+ */
+const formatDiscreteEvent = (e) => {
+    if (e.type === "tool_use")
+        return [`${yellow(e.name)} ${dim(e.summary)}`];
+    if (e.type === "tool_result")
+        return [(e.ok ? green("  ✓ ") : red("  ✗ ")) + dim(e.summary)];
+    if (e.type === "system")
+        return [dim(e.text)];
+    if (e.type === "result") {
+        const cost = e.costUSD != null ? ` ($${e.costUSD.toFixed(4)})` : "";
+        return [(e.ok ? green : red)(`Done${cost}`)];
+    }
+    if (e.type === "error")
+        return [red(`Error: ${e.message}`)];
+    return [];
+};
 class PipelineTUI {
     agent;
     gameDir;
     repoContext;
     states;
     currentStep = 0;
-    outputLines = [];
-    chatLines = [];
     phase = "idle";
     done = false;
-    activeProc = null;
+    outputLines = [];
+    currentLine = "";
+    chatLines = [];
+    renderScheduled = false;
     sidebarWidth = 30;
     logsDir;
+    abortController = null;
     constructor(agent, gameDir, repoContext) {
         this.agent = agent;
         this.gameDir = gameDir;
@@ -80,37 +95,83 @@ class PipelineTUI {
     get cols() {
         return process.stdout.columns || 80;
     }
-    get maxOutputLines() {
+    get outputWidth() {
+        return Math.max(this.cols - this.sidebarWidth - 1, 20);
+    }
+    get contentRows() {
         return Math.max(this.rows - 4, 8);
     }
     write(s) {
         process.stdout.write(s);
     }
-    /** Draw the entire screen */
+    scheduleRender() {
+        if (this.renderScheduled)
+            return;
+        this.renderScheduled = true;
+        setImmediate(() => {
+            this.renderScheduled = false;
+            this.render();
+        });
+    }
+    /** Lock the in-progress streaming line as a complete entry. */
+    lockCurrent() {
+        if (this.currentLine.length === 0)
+            return;
+        this.outputLines.push(this.currentLine);
+        this.chatLines.push(stripAnsi(this.currentLine));
+        this.currentLine = "";
+    }
+    /**
+     * Append streaming text. Newlines lock the in-progress line; the trailing
+     * fragment continues as the in-progress line. Optional styler wraps each
+     * fragment in ANSI codes (e.g. gray() for thinking).
+     */
+    appendText(text, styler) {
+        if (text.length === 0)
+            return;
+        const parts = text.split("\n");
+        this.currentLine += styler ? styler(parts[0]) : parts[0];
+        for (let i = 1; i < parts.length; i++) {
+            this.lockCurrent();
+            this.currentLine = styler ? styler(parts[i]) : parts[i];
+        }
+        if (this.outputLines.length > 1000)
+            this.outputLines = this.outputLines.slice(-this.contentRows * 4);
+        this.scheduleRender();
+    }
+    /**
+     * Append discrete pre-formatted lines (each becomes its own row). Locks any
+     * in-progress streaming line first so token streams don't bleed into a
+     * following tool_use marker.
+     */
+    appendLines(lines) {
+        if (lines.length === 0)
+            return;
+        this.lockCurrent();
+        for (const line of lines) {
+            this.outputLines.push(line);
+            this.chatLines.push(stripAnsi(line));
+        }
+        if (this.outputLines.length > 1000)
+            this.outputLines = this.outputLines.slice(-this.contentRows * 4);
+        this.scheduleRender();
+    }
     render() {
-        const { rows, cols, sidebarWidth } = this;
-        const outputWidth = cols - sidebarWidth - 1;
+        const { rows, sidebarWidth, outputWidth, contentRows } = this;
         let buf = "";
         buf += clearScreen();
         buf += moveTo(1, 1);
-        // Top border
         buf += "╭" + "─".repeat(sidebarWidth - 2) + "┬" + "─".repeat(outputWidth) + "╮";
-        // Sidebar header
         buf += moveTo(2, 1);
         buf += "│ " + bold("Migration Steps") + " ".repeat(Math.max(0, sidebarWidth - 18)) + "│";
-        // Output panel header
         const headerLabel = this.done ? "Done" : `${skillsPipeline[this.currentStep]?.name ?? ""} ${dim(`(${this.phase})`)}`;
-        const headerColor = phaseColor[this.phase];
-        buf += " " + headerColor(bold(headerLabel));
-        buf += " ".repeat(Math.max(0, outputWidth - this.stripAnsi(headerLabel).length - 1)) + "│";
-        // Separator
+        const styledHeader = phaseColor[this.phase](bold(headerLabel));
+        const headerVisible = stripAnsi(headerLabel).length;
+        buf += " " + styledHeader + " ".repeat(Math.max(0, outputWidth - headerVisible - 1)) + "│";
         buf += moveTo(3, 1);
         buf += "├" + "─".repeat(sidebarWidth - 2) + "┼" + "─".repeat(outputWidth) + "┤";
-        // Content rows
-        const contentRows = rows - 4; // top border + header + separator + bottom border
         for (let row = 0; row < contentRows; row++) {
             buf += moveTo(row + 4, 1);
-            // Sidebar column
             const skillIndex = row;
             if (skillIndex < skillsPipeline.length) {
                 const skill = skillsPipeline[skillIndex];
@@ -120,11 +181,10 @@ class PipelineTUI {
                 const colorFn = stateColor[state];
                 const label = `${icon} ${skill.name}`;
                 const styled = isActive ? bold(colorFn(label)) : colorFn(label);
-                const rawLen = this.stripAnsi(styled).length;
+                const rawLen = stripAnsi(styled).length;
                 buf += "│ " + styled + " ".repeat(Math.max(0, sidebarWidth - rawLen - 3)) + "│";
             }
             else if (skillIndex === skillsPipeline.length + 1) {
-                // Status line
                 const completedCount = this.states.filter((s) => s === "success").length;
                 const failedCount = this.states.filter((s) => s === "failed").length;
                 const status = this.done
@@ -132,248 +192,78 @@ class PipelineTUI {
                         ? red(`${failedCount} failure(s)`)
                         : green("All complete!")
                     : dim(`${completedCount}/${skillsPipeline.length} done`);
-                const rawLen = this.stripAnsi(status).length;
+                const rawLen = stripAnsi(status).length;
                 buf += "│ " + status + " ".repeat(Math.max(0, sidebarWidth - rawLen - 3)) + "│";
             }
             else {
                 buf += "│" + " ".repeat(sidebarWidth - 2) + "│";
             }
-            // Output column
-            const lineIndex = this.outputLines.length - contentRows + row;
-            const line = lineIndex >= 0 ? (this.outputLines[lineIndex] ?? "") : "";
-            const truncated = this.truncateVisible(line, outputWidth - 2);
-            const visibleLen = this.stripAnsi(truncated).length;
+            const visibleCount = this.outputLines.length + (this.currentLine.length > 0 ? 1 : 0);
+            const lineIndex = visibleCount - contentRows + row;
+            const rawLine = lineIndex < 0 ? "" : lineIndex < this.outputLines.length ? (this.outputLines[lineIndex] ?? "") : this.currentLine;
+            const truncated = truncateVisible(rawLine, outputWidth - 2);
+            const visibleLen = stripAnsi(truncated).length;
             buf += " " + truncated + " ".repeat(Math.max(0, outputWidth - visibleLen - 1)) + "│";
         }
-        // Bottom border
         buf += moveTo(rows, 1);
         buf += "╰" + "─".repeat(sidebarWidth - 2) + "┴" + "─".repeat(outputWidth) + "╯";
         this.write(buf);
     }
-    /** Strip ANSI escape codes for length calculation */
-    stripAnsi(s) {
-        // oxlint-disable-next-line no-control-regex
-        return s.replace(/\x1b\[[0-9;]*m/g, "");
-    }
-    /** Truncate a string to a visible width, preserving ANSI codes */
-    truncateVisible(s, maxWidth) {
-        let visible = 0;
-        let i = 0;
-        while (i < s.length && visible < maxWidth) {
-            if (s[i] === "\x1b" && s[i + 1] === "[") {
-                const end = s.indexOf("m", i);
-                if (end !== -1) {
-                    i = end + 1;
+    async runAgent(prompt) {
+        this.abortController = new AbortController();
+        let sawError = false;
+        let resultOk = null;
+        try {
+            for await (const event of this.agent.run({ prompt, cwd: this.gameDir, signal: this.abortController.signal })) {
+                if (event.type === "error")
+                    sawError = true;
+                if (event.type === "result")
+                    resultOk = event.ok;
+                if (event.type === "text") {
+                    this.appendText(event.text);
                     continue;
                 }
-            }
-            visible++;
-            i++;
-        }
-        // Include any trailing ANSI sequences (like reset codes) right after the cut point
-        while (i < s.length && s[i] === "\x1b" && s[i + 1] === "[") {
-            const end = s.indexOf("m", i);
-            if (end !== -1) {
-                i = end + 1;
-            }
-            else
-                break;
-        }
-        return s.slice(0, i);
-    }
-    /** Parse stream-json output from claude, or plain text from other agents */
-    appendOutput(text) {
-        const rawLines = text.split("\n").filter((l) => l.trim());
-        for (const line of rawLines) {
-            const parsed = this.parseStreamLine(line);
-            if (parsed) {
-                for (const displayLine of parsed.split("\n")) {
-                    this.outputLines.push(displayLine);
-                    this.chatLines.push(this.stripAnsi(displayLine));
+                if (event.type === "thinking") {
+                    this.appendText(event.text, gray);
+                    continue;
                 }
+                const lines = formatDiscreteEvent(event);
+                if (lines.length > 0)
+                    this.appendLines(lines);
             }
         }
-        // Keep display buffer bounded, but chatLines grows unbounded per skill
-        if (this.outputLines.length > 500) {
-            this.outputLines = this.outputLines.slice(-this.maxOutputLines);
-        }
-        this.render();
-    }
-    /** Format a tool use block into a display line */
-    formatToolUse(t) {
-        const name = t.name ?? "unknown";
-        if (name === "Edit")
-            return `${yellow("Edit")} ${t.input?.file_path ?? ""}`;
-        if (name === "Write")
-            return `${yellow("Write")} ${t.input?.file_path ?? ""}`;
-        if (name === "Read")
-            return `${yellow("Read")} ${t.input?.file_path ?? ""}`;
-        if (name === "Bash")
-            return `${yellow("Bash")} ${t.input?.command ?? ""}`;
-        if (name === "Glob")
-            return `${yellow("Glob")} ${t.input?.pattern ?? ""}`;
-        if (name === "Grep")
-            return `${yellow("Grep")} ${t.input?.pattern ?? ""}`;
-        return `${yellow(name)}`;
-    }
-    /** Extract human-readable text from a stream-json line, or pass through raw text */
-    parseStreamLine(line) {
-        try {
-            const obj = JSON.parse(line);
-            // Assistant messages - may contain text, tool_use, thinking, or a mix
-            if (obj.type === "assistant" && obj.message?.content) {
-                const content = obj.message.content;
-                const parts = [];
-                const texts = content.filter((c) => c.type === "text").map((c) => c.text);
-                if (texts.length > 0)
-                    parts.push(texts.join(""));
-                const toolUses = content.filter((c) => c.type === "tool_use");
-                if (toolUses.length > 0)
-                    parts.push(toolUses.map((t) => this.formatToolUse(t)).join("\n"));
-                // Thinking blocks - skip silently, they're just internal reasoning
-                if (parts.length > 0)
-                    return parts.join("\n");
-                if (content.some((c) => c.type === "thinking"))
-                    return null;
-                return null;
-            }
-            // Content block delta (streaming text chunks)
-            if (obj.type === "content_block_delta" && obj.delta?.text) {
-                return obj.delta.text;
-            }
-            // Standalone tool use event
-            if (obj.type === "tool_use") {
-                return this.formatToolUse(obj);
-            }
-            // User messages (tool results coming back)
-            if (obj.type === "user") {
-                const content = obj.message?.content;
-                if (!content)
-                    return null;
-                // Show file create/update results
-                const result = obj.tool_use_result;
-                if (result?.type === "create")
-                    return dim(`Created ${result.filePath}`);
-                if (result?.type === "update")
-                    return dim(`Updated ${result.filePath}`);
-                return null;
-            }
-            // Rate limit events - suppress
-            if (obj.type === "rate_limit_event")
-                return null;
-            // Tool results
-            if (obj.type === "result") {
-                const cost = obj.cost_usd ? ` ($${obj.cost_usd.toFixed(4)})` : "";
-                return green(`Done${cost}`);
-            }
-            // System messages
-            if (obj.type === "system") {
-                if (obj.subtype === "init")
-                    return dim(`Session started`);
-                if (obj.subtype === "hook_started")
-                    return null;
-                if (obj.subtype === "hook_response")
-                    return null;
-                if (obj.subtype === "task_started")
-                    return dim(`Subagent: ${obj.description ?? "started"}`);
-                if (obj.subtype === "task_progress")
-                    return dim(`  ${obj.last_tool_name ?? "working"}${obj.description ? ": " + obj.description : ""}`);
-                if (obj.subtype === "task_notification")
-                    return obj.status === "completed"
-                        ? dim(`Subagent done: ${obj.summary ?? ""}`)
-                        : dim(`Subagent ${obj.status ?? "update"}: ${obj.summary ?? ""}`);
-                return dim(`[system:${obj.subtype}]`);
-            }
-            // Show unrecognized types so we can add support
-            return dim(`[${obj.type}${obj.subtype ? ":" + obj.subtype : ""}]`);
+        catch (e) {
+            this.appendLines([red(`Error: ${e.message ?? e}`)]);
+            return false;
         }
-        catch {
-            // Not JSON - show as-is
-            return line;
+        finally {
+            this.abortController = null;
         }
+        this.lockCurrent();
+        if (resultOk != null)
+            return resultOk;
+        return !sawError;
     }
-    /** Run a shell command, capturing output into the TUI panel */
     runCmd(cmd) {
         try {
             const output = execSync(cmd, { cwd: this.gameDir, encoding: "utf-8", stdio: "pipe" });
             if (output.trim())
-                this.appendOutput(output.trim());
+                this.appendLines(output.trim().split("\n"));
             return { success: true, output };
         }
         catch (e) {
             const output = (e.stdout || "") + (e.stderr || "") || e.message;
             if (output.trim())
-                this.appendOutput(output.trim());
+                this.appendLines(output.trim().split("\n"));
             return { success: false, output };
         }
     }
-    /** Spawn agent and stream output */
-    runAgent(prompt) {
-        return new Promise((resolve) => {
-            const { cmd, args } = buildAgentCmd(this.agent, prompt);
-            const env = { ...process.env, FORCE_COLOR: "0", NO_COLOR: "1" };
-            // Remove env vars that prevent nested claude sessions
-            delete env.CLAUDECODE;
-            const proc = spawn(cmd, args, {
-                cwd: this.gameDir,
-                env,
-                stdio: ["ignore", "pipe", "pipe"],
-            });
-            this.activeProc = proc;
-            let resolved = false;
-            let gotResult = false;
-            const debugLog = path.join(this.gameDir, "pipeline-debug.log");
-            const finish = (success) => {
-                if (resolved)
-                    return;
-                resolved = true;
-                this.activeProc = null;
-                resolve(success);
-            };
-            proc.stdout?.on("data", (data) => {
-                const text = data.toString();
-                fs.appendFileSync(debugLog, text);
-                this.appendOutput(text);
-                // Detect the result event in stream-json - the agent is done
-                if (!gotResult) {
-                    for (const line of text.split("\n")) {
-                        try {
-                            const obj = JSON.parse(line);
-                            if (obj.type === "result") {
-                                gotResult = true;
-                                // Give the process a moment to exit cleanly, then force-resolve
-                                setTimeout(() => {
-                                    if (!resolved) {
-                                        proc.kill();
-                                        finish(true);
-                                    }
-                                }, 3000);
-                            }
-                        }
-                        catch { }
-                    }
-                }
-            });
-            proc.stderr?.on("data", (data) => {
-                fs.appendFileSync(debugLog, `[stderr] ${data.toString()}`);
-                this.appendOutput(data.toString());
-            });
-            proc.on("close", (code) => {
-                fs.appendFileSync(debugLog, `\n[close] code=${code}\n`);
-                finish(gotResult || code === 0);
-            });
-            proc.on("error", (err) => {
-                this.appendOutput(`Error: ${err.message}`);
-                finish(false);
-            });
-        });
-    }
-    /** Run one pipeline step */
     async runStep(stepIndex) {
         const skill = skillsPipeline[stepIndex];
         this.states[stepIndex] = "running";
         this.currentStep = stepIndex;
         this.outputLines = [];
+        this.currentLine = "";
         this.chatLines = [];
         this.phase = "agent";
         this.render();
@@ -382,71 +272,58 @@ class PipelineTUI {
             prompt = await buildPrompt(skill.name, this.gameDir, this.repoContext);
         }
         catch (e) {
-            this.appendOutput(`Failed to fetch instructions: ${e.message}`);
+            this.appendLines([red(`Failed to fetch instructions: ${e.message}`)]);
             this.writeSkillLog(skill.name);
             this.states[stepIndex] = "failed";
-            this.render();
             return false;
         }
         let success = await this.runAgent(prompt);
         if (!success) {
-            this.appendOutput("\n--- Retrying ---\n");
+            this.appendLines(["", dim("--- Retrying ---")]);
             success = await this.runAgent(prompt);
             if (!success) {
                 this.writeSkillLog(skill.name);
                 this.states[stepIndex] = "failed";
-                this.render();
                 return false;
             }
         }
-        // Verify build
         this.phase = "build";
         this.render();
-        this.appendOutput("Verifying build...");
+        this.appendLines([dim("Verifying build...")]);
         const buildResult = this.runCmd("npx vite build");
         if (!buildResult.success) {
-            this.appendOutput("Asking agent to fix...");
+            this.appendLines([dim("Asking agent to fix...")]);
             const fixPrompt = `The vite build failed after the "${skill.name}" step. Fix the build errors:\n\n${buildResult.output}`;
             await this.runAgent(fixPrompt);
             const retry = this.runCmd("npx vite build");
             if (!retry.success) {
                 this.writeSkillLog(skill.name);
                 this.states[stepIndex] = "failed";
-                this.render();
                 return false;
             }
         }
-        // Commit
         this.phase = "commit";
         this.render();
         this.runCmd("git add -A");
         const commitResult = this.runCmd(`git commit -m "step: ${skill.name}"`);
-        if (commitResult.success)
-            this.appendOutput("Committed.");
-        else
-            this.appendOutput("No changes to commit.");
-        // Write chat log for this skill
+        this.appendLines([dim(commitResult.success ? "Committed." : "No changes to commit.")]);
         this.writeSkillLog(skill.name);
         this.states[stepIndex] = "success";
         this.render();
         return true;
     }
-    /** Writes the collected chat lines for a skill to a log file */
     writeSkillLog(skillName) {
         const logPath = path.join(this.logsDir, `${skillName}.txt`);
         fs.writeFileSync(logPath, this.chatLines.join("\n") + "\n");
     }
-    /** Set up keyboard handling (Ctrl+C to quit) */
     setupInput() {
-        if (process.stdin.isTTY) {
+        if (process.stdin.isTTY)
             process.stdin.setRawMode(true);
-        }
         process.stdin.resume();
         process.stdin.on("data", (data) => {
             // Ctrl+C
             if (data[0] === 3) {
-                if (this.activeProc)
-                    this.activeProc.kill();
+                this.abortController?.abort();
                 this.cleanup();
                 process.exit(0);
             }
@@ -454,22 +331,19 @@ class PipelineTUI {
     }
     cleanup() {
         this.write(showCursor());
-        if (process.stdin.isTTY) {
+        if (process.stdin.isTTY)
             process.stdin.setRawMode(false);
-        }
         process.stdin.pause();
     }
-    /** Run the full pipeline */
     async run() {
         this.write(hideCursor());
         this.setupInput();
         this.render();
-        // Redraw on terminal resize
         process.stdout.on("resize", () => this.render());
         for (let i = 0; i < skillsPipeline.length; i++) {
             const ok = await this.runStep(i);
             if (!ok) {
-                this.appendOutput("\nPipeline stopped due to failure.");
+                this.appendLines(["", red("Pipeline stopped due to failure.")]);
                 break;
             }
         }
@@ -479,8 +353,34 @@ class PipelineTUI {
         this.cleanup();
     }
 }
-/** Render the pipeline TUI and wait for it to complete */
-export const runPipelineTUI = async (agent, gameDir, repoContext) => {
+/** Truncate a string to a visible width, preserving ANSI codes. */
+const truncateVisible = (s, maxWidth) => {
+    let visible = 0;
+    let i = 0;
+    while (i < s.length && visible < maxWidth) {
+        if (s[i] === "\x1b" && s[i + 1] === "[") {
+            const end = s.indexOf("m", i);
+            if (end !== -1) {
+                i = end + 1;
+                continue;
+            }
+        }
+        visible++;
+        i++;
+    }
+    while (i < s.length && s[i] === "\x1b" && s[i + 1] === "[") {
+        const end = s.indexOf("m", i);
+        if (end !== -1)
+            i = end + 1;
+        else
+            break;
+    }
+    return s.slice(0, i);
+};
+export const runPipelineTUI = async (agentName, gameDir, repoContext) => {
+    const agent = getAgent(agentName);
+    if (!agent)
+        throw new Error(`Unknown agent: ${agentName}`);
     const tui = new PipelineTUI(agent, gameDir, repoContext);
     await tui.run();
 };