@lawrence369/loop-cli 0.1.0

package/dist/ui/colors.js

@@ -0,0 +1,65 @@
+/**
+ * Brand colors and ANSI formatting helpers.
+ *
+ * Uses raw ANSI escape codes for zero external dependencies.
+ */
+const ESC = "\x1b[";
+const RESET = `${ESC}0m`;
+// ── Brand colors (24-bit / true-color) ───────────────
+/** Claude brand orange (#F07623) */
+export const claude = (s) => `${ESC}38;2;240;118;35m${s}${RESET}`;
+/** Gemini brand blue (#4285F4) */
+export const gemini = (s) => `${ESC}38;2;66;133;244m${s}${RESET}`;
+/** Codex brand green (#10A37F) */
+export const codex = (s) => `${ESC}38;2;16;163;127m${s}${RESET}`;
+/** Loop brand cyan (#00D4FF) */
+export const loop = (s) => `${ESC}38;2;0;212;255m${s}${RESET}`;
+// ── Semantic colors ──────────────────────────────────
+/** Green for success messages */
+export const success = (s) => `${ESC}32m${s}${RESET}`;
+/** Red for error messages */
+export const error = (s) => `${ESC}31m${s}${RESET}`;
+/** Yellow for warnings */
+export const warn = (s) => `${ESC}33m${s}${RESET}`;
+/** Gray / dim text */
+export const dim = (s) => `${ESC}2m${s}${RESET}`;
+/** Bold text */
+export const bold = (s) => `${ESC}1m${s}${RESET}`;
+// ── Aliases for convenience ─────────────────────────
+export const orange = claude;
+export const gBlue = gemini;
+export const gGreen = codex;
+export const red = error;
+export const green = success;
+export const yellow = warn;
+export const cyan = loop;
+export const blue = (s) => `${ESC}34m${s}${RESET}`;
+// ── Lookup helper ────────────────────────────────────
+/**
+ * Return the brand-color function for an engine name.
+ * Falls back to `loop` cyan for unknown engines.
+ */
+export function brandColor(engine) {
+    switch (engine) {
+        case "claude":
+            return claude;
+        case "gemini":
+            return gemini;
+        case "codex":
+            return codex;
+        default:
+            return loop;
+    }
+}
+/**
+ * Format a byte count for human-readable display.
+ */
+export function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes}B`;
+    const kb = bytes / 1024;
+    if (kb < 1024)
+        return `${kb.toFixed(1)}KB`;
+    return `${(kb / 1024).toFixed(1)}MB`;
+}
+//# sourceMappingURL=colors.js.map

package/dist/ui/dashboard.d.ts

@@ -0,0 +1,32 @@
+interface AgentInfo {
+    id: string;
+    label: string;
+    state: "working" | "waiting_input" | "idle" | "blocked";
+}
+interface Message {
+    from: string;
+    text: string;
+    timestamp: string;
+}
+/**
+ * Simple blessed dashboard for monitoring loop agents.
+ * Layout: agent list panel (left) + message panel (right) + status bar (bottom).
+ */
+export declare class Dashboard {
+    private screen;
+    private agentList;
+    private messageBox;
+    private statusBar;
+    private agents;
+    private messages;
+    start(): void;
+    stop(): void;
+    /** Update the agent list display. */
+    updateAgents(agents: AgentInfo[]): void;
+    /** Append a message to the message panel. */
+    addMessage(msg: Message): void;
+    /** Update the status bar text. */
+    setStatus(text: string): void;
+}
+export {};
+//# sourceMappingURL=dashboard.d.ts.map

package/dist/ui/dashboard.js

@@ -0,0 +1,138 @@
+import blessed from "blessed";
+/**
+ * Simple blessed dashboard for monitoring loop agents.
+ * Layout: agent list panel (left) + message panel (right) + status bar (bottom).
+ */
+export class Dashboard {
+    screen = null;
+    agentList = null;
+    messageBox = null;
+    statusBar = null;
+    agents = [];
+    messages = [];
+    start() {
+        this.screen = blessed.screen({
+            smartCSR: true,
+            title: "loop dashboard",
+        });
+        // Agent list panel (left, 30% width)
+        this.agentList = blessed.list({
+            parent: this.screen,
+            label: " Agents ",
+            left: 0,
+            top: 0,
+            width: "30%",
+            height: "100%-1",
+            border: { type: "line" },
+            style: {
+                border: { fg: "cyan" },
+                selected: { bg: "blue" },
+                item: { fg: "white" },
+            },
+            keys: true,
+            vi: true,
+            scrollable: true,
+            items: [],
+        });
+        // Message panel (right, 70% width)
+        this.messageBox = blessed.box({
+            parent: this.screen,
+            label: " Messages ",
+            left: "30%",
+            top: 0,
+            width: "70%",
+            height: "100%-1",
+            border: { type: "line" },
+            style: {
+                border: { fg: "cyan" },
+                label: { fg: "cyan" },
+            },
+            scrollable: true,
+            alwaysScroll: true,
+            tags: true,
+            content: "{gray-fg}No messages yet{/gray-fg}",
+        });
+        // Status bar (bottom)
+        this.statusBar = blessed.box({
+            parent: this.screen,
+            bottom: 0,
+            left: 0,
+            width: "100%",
+            height: 1,
+            style: {
+                bg: "blue",
+                fg: "white",
+            },
+            tags: true,
+            content: " loop dashboard | q: quit | tab: switch focus",
+        });
+        // Keybindings
+        this.screen.key(["q", "C-c"], () => {
+            this.stop();
+        });
+        this.screen.key(["tab"], () => {
+            if (this.agentList && this.messageBox) {
+                if (this.screen.focused === this.agentList) {
+                    this.messageBox.focus();
+                }
+                else {
+                    this.agentList.focus();
+                }
+                this.screen?.render();
+            }
+        });
+        this.agentList.focus();
+        this.screen.render();
+    }
+    stop() {
+        if (this.screen) {
+            this.screen.destroy();
+            this.screen = null;
+        }
+    }
+    /** Update the agent list display. */
+    updateAgents(agents) {
+        this.agents = agents;
+        if (!this.agentList)
+            return;
+        const items = this.agents.map((a) => {
+            const marker = stateMarker(a.state);
+            return `${marker} ${a.label}`;
+        });
+        this.agentList.setItems(items);
+        this.screen?.render();
+    }
+    /** Append a message to the message panel. */
+    addMessage(msg) {
+        this.messages.push(msg);
+        if (!this.messageBox)
+            return;
+        const lines = this.messages
+            .slice(-100) // Keep last 100 messages
+            .map((m) => `{gray-fg}${m.timestamp}{/gray-fg} {cyan-fg}${m.from}{/cyan-fg}: ${m.text}`);
+        this.messageBox.setContent(lines.join("\n"));
+        this.messageBox.setScrollPerc(100);
+        this.screen?.render();
+    }
+    /** Update the status bar text. */
+    setStatus(text) {
+        if (!this.statusBar)
+            return;
+        this.statusBar.setContent(` ${text}`);
+        this.screen?.render();
+    }
+}
+function stateMarker(state) {
+    switch (state) {
+        case "working":
+            return "{green-fg}*{/green-fg}";
+        case "waiting_input":
+            return "{yellow-fg}?{/yellow-fg}";
+        case "blocked":
+            return "{red-fg}!{/red-fg}";
+        case "idle":
+        default:
+            return "{gray-fg}-{/gray-fg}";
+    }
+}
+//# sourceMappingURL=dashboard.js.map

package/dist/ui/input.d.ts

@@ -0,0 +1,10 @@
+export type ExecutionMode = "auto" | "manual";
+export interface PromptResult {
+    value: string;
+    action: "submit" | "done" | "cancel";
+}
+export declare function promptUser(opts?: {
+    hint?: string;
+    mode?: string;
+}): Promise<PromptResult>;
+//# sourceMappingURL=input.d.ts.map

package/dist/ui/input.js

@@ -0,0 +1,96 @@
+import { dim, cyan, bold } from "./colors.js";
+function modeIndicator(mode) {
+    const a = mode === "auto" ? bold("\u23F5\u23F5 Auto") : dim("\u23F5\u23F5 Auto");
+    const m = mode === "manual" ? bold("\u23F5\u23F5 Manual") : dim("\u23F5\u23F5 Manual");
+    return `  ${a}      ${m}                    ${dim("Shift+Tab \u21C4")}`;
+}
+export function promptUser(opts) {
+    const cols = process.stdout.columns || 80;
+    let mode = (opts?.mode === "auto" ? "auto" : "manual");
+    // Top bar
+    const tag = opts?.hint ? ` ${opts.hint} ` : " \u25AA\u25AA\u25AA ";
+    const barLen = Math.max(0, cols - tag.length - 4);
+    const leftBar = "\u2500".repeat(Math.floor(barLen * 0.85));
+    const rightBar = "\u2500".repeat(barLen - leftBar.length);
+    process.stdout.write(dim(`  ${leftBar}${tag}${rightBar}`) + "\n");
+    // Pre-print: input line (empty), bottom bar, mode indicator
+    process.stdout.write("\n");
+    process.stdout.write(dim(`  ${"\u2500".repeat(Math.max(0, cols - 4))}`) + "\n");
+    process.stdout.write(modeIndicator(mode));
+    // Move cursor up to input line, write prompt
+    process.stdout.write("\x1b[2A\r");
+    process.stdout.write(cyan("  \u276F "));
+    // Raw-mode input loop
+    let buffer = "";
+    return new Promise((resolve) => {
+        const isTTY = !!process.stdin.isTTY;
+        if (isTTY)
+            process.stdin.setRawMode(true);
+        process.stdin.resume();
+        function cleanup() {
+            process.stdin.removeListener("data", onData);
+            if (isTTY)
+                process.stdin.setRawMode(false);
+            process.stdin.pause();
+        }
+        function finish(action) {
+            // Move cursor past bottom bar + mode indicator, then newline
+            process.stdout.write("\x1b[2B\n");
+            cleanup();
+            resolve({ value: buffer.trim(), action });
+        }
+        function onData(data) {
+            const str = typeof data === "string" ? data : data.toString("utf8");
+            // Shift+Tab: toggle mode
+            if (str === "\x1b[Z") {
+                mode = mode === "auto" ? "manual" : "auto";
+                process.stdout.write("\x1b7"); // save cursor
+                process.stdout.write("\x1b[2B\r\x1b[2K"); // down 2, beginning, clear line
+                process.stdout.write(modeIndicator(mode));
+                process.stdout.write("\x1b8"); // restore cursor
+                return;
+            }
+            // Ctrl+C: cancel
+            if (str === "\x03") {
+                finish("cancel");
+                return;
+            }
+            // Ctrl+D: done (exit multi-turn)
+            if (str === "\x04") {
+                finish("done");
+                return;
+            }
+            // Enter: submit
+            if (str === "\r" || str === "\n") {
+                finish("submit");
+                return;
+            }
+            // Backspace
+            if (str === "\x7f" || str === "\x08") {
+                if (buffer.length > 0) {
+                    const chars = [...buffer];
+                    const removed = chars.pop();
+                    buffer = chars.join("");
+                    // Move back by the display width of the removed character
+                    const width = removed.length > 1 || (removed.codePointAt(0) ?? 0) > 0xFFFF ? 2 : 1;
+                    for (let i = 0; i < width; i++) {
+                        process.stdout.write("\x1b[1D \x1b[1D");
+                    }
+                }
+                return;
+            }
+            // Ignore other escape sequences
+            if (str.startsWith("\x1b"))
+                return;
+            // Printable characters (supports paste)
+            for (const ch of str) {
+                if (ch >= " ") {
+                    buffer += ch;
+                    process.stdout.write(ch);
+                }
+            }
+        }
+        process.stdin.on("data", onData);
+    });
+}
+//# sourceMappingURL=input.js.map

package/dist/ui/interactive.d.ts

@@ -0,0 +1,13 @@
+export interface InteractiveConfig {
+    executor: string;
+    reviewer: string;
+    task: string;
+    iterations: number;
+    threshold: number;
+    dir: string;
+    verbose: boolean;
+    mode: string;
+    passthroughArgs: string[];
+}
+export declare function interactive(): Promise<InteractiveConfig | null>;
+//# sourceMappingURL=interactive.d.ts.map

package/dist/ui/interactive.js

@@ -0,0 +1,230 @@
+import * as p from "@clack/prompts";
+import { existsSync } from "node:fs";
+import { resolve } from "node:path";
+import { renderBanner } from "./banner.js";
+import { orange, gBlue, gGreen, bold, dim } from "./colors.js";
+export async function interactive() {
+    // Banner
+    console.log(renderBanner());
+    p.intro("Configure your loop session");
+    // Working directory
+    const dirChoice = await p.select({
+        message: "Working directory",
+        options: [
+            {
+                value: "cwd",
+                label: `Current directory (${process.cwd()})`,
+                hint: "recommended",
+            },
+            { value: "custom", label: "Custom path" },
+        ],
+    });
+    if (p.isCancel(dirChoice)) {
+        p.cancel("Cancelled.");
+        return null;
+    }
+    let dir = ".";
+    if (dirChoice === "custom") {
+        while (true) {
+            const dirInput = await p.text({
+                message: "Enter path",
+                placeholder: "/path/to/your/project",
+            });
+            if (p.isCancel(dirInput)) {
+                p.cancel("Cancelled.");
+                return null;
+            }
+            if (existsSync(resolve(dirInput))) {
+                dir = dirInput;
+                break;
+            }
+            p.log.error(`Directory not found: ${resolve(dirInput)}. Please try again.`);
+        }
+    }
+    // Executor
+    const executor = await p.select({
+        message: "Select executor",
+        options: [
+            {
+                value: "claude",
+                label: orange("\u25CF") + " Claude",
+                hint: "Anthropic Claude Code CLI",
+            },
+            {
+                value: "gemini",
+                label: gBlue("\u25CF") + " Gemini",
+                hint: "Google Gemini CLI",
+            },
+            {
+                value: "codex",
+                label: gGreen("\u25CF") + " Codex",
+                hint: "OpenAI Codex CLI",
+            },
+        ],
+    });
+    if (p.isCancel(executor)) {
+        p.cancel("Cancelled.");
+        return null;
+    }
+    // Reviewer
+    const reviewer = await p.select({
+        message: "Select reviewer",
+        options: [
+            {
+                value: "claude",
+                label: orange("\u25CF") + " Claude",
+                hint: "Anthropic Claude Code CLI",
+            },
+            {
+                value: "gemini",
+                label: gBlue("\u25CF") + " Gemini",
+                hint: "Google Gemini CLI",
+            },
+            {
+                value: "codex",
+                label: gGreen("\u25CF") + " Codex",
+                hint: "OpenAI Codex CLI",
+            },
+        ],
+        initialValue: (executor === "claude" ? "gemini" : "claude"),
+    });
+    if (p.isCancel(reviewer)) {
+        p.cancel("Cancelled.");
+        return null;
+    }
+    // Native CLI flags (optional)
+    const passArgsInput = await p.text({
+        message: "Native CLI flags for executor (optional)",
+        placeholder: "e.g., --model claude-sonnet-4-20250514",
+        defaultValue: "",
+    });
+    if (p.isCancel(passArgsInput)) {
+        p.cancel("Cancelled.");
+        return null;
+    }
+    const passthroughArgs = passArgsInput.trim()
+        ? passArgsInput.split(/\s+/).filter(Boolean)
+        : [];
+    // Task
+    const task = await p.text({
+        message: "Enter your task",
+        placeholder: "e.g. Write a quicksort implementation in Python",
+        validate(value) {
+            if (!value.trim())
+                return "Task cannot be empty";
+        },
+    });
+    if (p.isCancel(task)) {
+        p.cancel("Cancelled.");
+        return null;
+    }
+    // Execution mode
+    const mode = await p.select({
+        message: "Execution mode",
+        options: [
+            {
+                value: "manual",
+                label: bold("\u23F5\u23F5 Manual"),
+                hint: "review each step, multi-turn conversation",
+            },
+            {
+                value: "auto",
+                label: bold("\u23F5\u23F5 Auto"),
+                hint: "fully automatic executor \u2192 reviewer",
+            },
+        ],
+    });
+    if (p.isCancel(mode)) {
+        p.cancel("Cancelled.");
+        return null;
+    }
+    // Iterations
+    const iterations = await p.text({
+        message: "Max iterations",
+        placeholder: "3",
+        defaultValue: "3",
+        validate(value) {
+            const n = parseInt(value, 10);
+            if (isNaN(n) || n < 1 || n > 20)
+                return "Enter a number between 1 and 20";
+        },
+    });
+    if (p.isCancel(iterations)) {
+        p.cancel("Cancelled.");
+        return null;
+    }
+    // Threshold
+    const threshold = await p.text({
+        message: "Approval threshold (1-10)",
+        placeholder: "9",
+        defaultValue: "9",
+        validate(value) {
+            const n = parseInt(value, 10);
+            if (isNaN(n) || n < 1 || n > 10)
+                return "Enter a number between 1 and 10";
+        },
+    });
+    if (p.isCancel(threshold)) {
+        p.cancel("Cancelled.");
+        return null;
+    }
+    // Verbose
+    const verbose = await p.confirm({
+        message: "Stream verbose output?",
+        initialValue: false,
+    });
+    if (p.isCancel(verbose)) {
+        p.cancel("Cancelled.");
+        return null;
+    }
+    // Summary
+    const resolvedDir = resolve(dir || ".");
+    const engineLabel = (name) => {
+        switch (name) {
+            case "claude":
+                return orange("\u25CF") + " Claude";
+            case "gemini":
+                return gBlue("\u25CF") + " Gemini";
+            case "codex":
+                return gGreen("\u25CF") + " Codex";
+            default:
+                return name;
+        }
+    };
+    const modeLabel = mode === "auto" ? bold("\u23F5\u23F5 Auto") : bold("\u23F5\u23F5 Manual");
+    const summary = [
+        `  Executor:    ${engineLabel(executor)}`,
+        `  Reviewer:    ${engineLabel(reviewer)}`,
+        "",
+        `  Task:        ${task.length > 40 ? task.slice(0, 40) + "..." : task}`,
+        `  Iterations:  ${iterations}`,
+        `  Threshold:   ${threshold}`,
+        `  Directory:   ${resolvedDir}`,
+        `  Verbose:     ${verbose ? "on" : "off"}`,
+        `  Mode:        ${modeLabel}`,
+        `  CLI flags:   ${passthroughArgs.length > 0 ? passthroughArgs.join(" ") : dim("none")}`,
+    ].join("\n");
+    p.note(summary, "Configuration");
+    // Confirm
+    const confirmed = await p.confirm({
+        message: "Launch?",
+        initialValue: true,
+    });
+    if (p.isCancel(confirmed) || !confirmed) {
+        p.cancel("Cancelled.");
+        return null;
+    }
+    p.outro("Launching loop...");
+    return {
+        executor,
+        reviewer,
+        task,
+        iterations: parseInt(iterations, 10),
+        threshold: parseInt(threshold, 10),
+        dir: resolvedDir,
+        verbose,
+        mode,
+        passthroughArgs,
+    };
+}
+//# sourceMappingURL=interactive.js.map

package/dist/ui/renderer.d.ts

@@ -0,0 +1,33 @@
+export interface RendererStats {
+    elapsed_ms: number;
+    bytes: number;
+}
+export declare class PtyRenderer {
+    private color;
+    private engineLabel;
+    private role;
+    private receivedBytes;
+    private started;
+    private endedWithLineBreak;
+    start(engineLabel: string, role: string, color: (s: string) => string): void;
+    write(data: string): void;
+    stop(stats: RendererStats): void;
+    get totalBytes(): number;
+}
+export interface KeystrokeHandlerOpts {
+    writeToPty: (data: string) => void;
+    onDone: () => void;
+    onCancel: () => void;
+    onModeToggle: () => void;
+}
+/**
+ * Forward user input to the PTY while reserving a small set of
+ * loop control shortcuts.
+ * Returns a cleanup function.
+ */
+export declare function startKeystrokeHandler(writeToPty: (data: string) => void, opts: {
+    onDone: () => void;
+    onCancel: () => void;
+    onModeToggle: () => void;
+}): () => void;
+//# sourceMappingURL=renderer.d.ts.map