@oxecli/oxe 1.0.16 → 1.0.18

package/dist/cli.js

@@ -3,7 +3,7 @@ import { fileURLToPath } from "node:url";
 import { loadOrPrompt, default_reasoning_effort, max_action_chars, max_resume_history_items, } from "./config.js";
 import { InferenceEngine, estimateTokens } from "./engine.js";
 import { saveSession, loadSession, listSessions, nextSessionId, conversationLabel, COMMAND_HELP, toolOutputFailed, } from "./sessions.js";
-import { clearScreen, enableAnsi, askBottomPrompt, userDisplayText, aiMarkdown, mutedMarkdown, messageText, formatToolAction, truncateEllipsis, renderPanel, } from "./ui.js";
+import { clearScreen, enableAnsi, askBottomPrompt, userDisplayText, aiMarkdown, mutedMarkdown, messageText, formatToolAction, truncateEllipsis, renderPanel, renderTableString, enableRawStdin, disableRawStdin, waitRawKey, } from "./ui.js";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 function truncateLabel(s) {
     const t = String(s || "(conversation)").trim();
@@ -43,18 +43,52 @@ export class CLI {
         const style = status === "failed" ? "\x1b[31m" : "\x1b[32m";
         process.stdout.write(`${style}${truncateEllipsis(String(text), max_action_chars, "text")}\x1b[0m\n`);
     }
-    showHelp() {
-        process.stdout.write("\n");
-        for (const [cmd, desc] of COMMAND_HELP) {
-            // The whole command column is bold; any `<arg>` placeholder (e.g. <n>,
-            // <level>) is additionally cyan — matching the original's
-            // `[bold cyan]<n>[/bold cyan]`. Pad based on the plain text length so the
-            // ANSI codes don't skew the column alignment.
+    async showHelp() {
+        // Mirror Python's `_show_help`: a bordered table panel with the command
+        // column bold (with `<arg>` placeholders cyan) and descriptions dim, inside
+        // a panel titled "Commands · Enter / Ctrl+C closes". In a TTY it stays on
+        // screen until Enter/Ctrl+C/arrows/q closes it.
+        const rows = COMMAND_HELP.map(([cmd, desc]) => {
             const styled = cmd.replace(/(<[^>]+>)/g, "\x1b[36m$1\x1b[0m");
-            const pad = Math.max(18 - cmd.length, 0);
-            process.stdout.write(`\x1b[1m${styled}${" ".repeat(pad)}\x1b[0m\x1b[2m${desc}\x1b[0m\n`);
+            return { cells: [`\x1b[1m${styled}\x1b[0m`, `\x1b[2m${desc}\x1b[0m`] };
+        });
+        const panel = renderTableString(rows, {
+            title: "Commands  ·  Enter / Ctrl+C closes",
+            borderStyle: "90",
+            expand: false,
+            titleAlign: "left",
+            colGap: 2,
+        });
+        // Write the panel starting on a fresh line. No extra leading/trailing blank
+        // here — askBottomPrompt's own leading newline supplies the single gap.
+        process.stdout.write(panel + "\n");
+        if (process.stdin.isTTY) {
+            // Wait for a close key, then erase the panel (mirrors Python's Live).
+            enableRawStdin();
+            try {
+                for (;;) {
+                    if (await this.awaitRawCloseKey())
+                        break;
+                }
+            }
+            finally {
+                disableRawStdin();
+            }
+            // Cursor sits one line below the panel; move up to its top border and
+            // clear downward so the whole panel disappears and the cursor lands back
+            // on the fresh line before the prompt.
+            const n = panel.split("\n").length;
+            process.stdout.write(`\x1b[${n}A\r\x1b[J`);
         }
-        process.stdout.write("\n");
+    }
+    async awaitRawCloseKey() {
+        const k = await waitRawKey();
+        const closeNames = ["escape", "return", "enter", "up", "down", "left", "right"];
+        if (k.ctrl && (k.name === "c" || k.name === "z"))
+            return true;
+        if (k.str === "q" || k.str === "Q" || k.str === "\x1b" || closeNames.includes(k.name))
+            return true;
+        return false;
     }
     renderHistory(items, maxItems = max_resume_history_items) {
         const outputsByCallId = new Map();
@@ -171,27 +205,111 @@ export class CLI {
         for (const rec of recs) {
             process.stdout.write(this.conversationRow(rec) + "\n");
         }
-        process.stdout.write("\n");
     }
-    pickConversation() {
+    /** Build the interactive picker panel (mirrors Python `_render_picker`). */
+    renderPickerPanel(recs, selected, visible = 8) {
+        const total = recs.length;
+        const half = Math.floor(visible / 2);
+        const lo = Math.min(Math.max(selected - half, 0), Math.max(total - visible, 0));
+        const hi = Math.min(lo + visible, total);
+        const rows = [];
+        for (let idx = lo; idx < hi; idx++) {
+            const rec = recs[idx];
+            const sid = String(rec["id"] ?? "?");
+            const updated = String(rec["updated_at"] ?? "").slice(0, 16).replace("T", " ");
+            const label = truncateLabel(rec["label"]);
+            const items = rec["input_items"] ?? [];
+            const toks = estimateTokens(items).toLocaleString();
+            const content = `\x1b[1m${sid.padStart(4)}\x1b[0m` +
+                `\x1b[2m  ${updated}\x1b[0m  ${label}` +
+                `\x1b[2m  ${items.length} items · ${toks} tok\x1b[0m`;
+            rows.push({
+                cells: [idx === selected ? "\x1b[1m\x1b[36m❯\x1b[0m" : "", content],
+                style: idx === selected ? "\x1b[1m" : undefined,
+            });
+        }
+        const below = total - hi;
+        let footer = "";
+        if (lo > 0 && below > 0)
+            footer = `\x1b[2m▲ ${lo} earlier · ▼ ${below} more\x1b[0m`;
+        else if (lo > 0)
+            footer = `\x1b[2m▲ ${lo} earlier\x1b[0m`;
+        else if (below > 0)
+            footer = `\x1b[2m▼ ${below} more\x1b[0m`;
+        if (footer)
+            rows.push({ cells: ["", footer] });
+        const title = `Conversations  \x1b[1m\x1b[36m${lo + 1}-${hi}/${total}\x1b[0m  (↑/↓ · Quit (q) · Enter)`;
+        return renderTableString(rows, {
+            title,
+            borderStyle: "90",
+            expand: true,
+            titleAlign: "left",
+            colGap: 0,
+            colWidths: [3, undefined],
+        });
+    }
+    /** Interactive arrow up/down project picker (mirrors Python `_pick_conversation`). */
+    async pickConversation() {
         const recs = listSessions();
         if (!recs.length) {
             process.stdout.write("\n");
             renderPanel("No saved conversations yet. Type a prompt to start one.", "Conversations");
             return null;
         }
-        this.showConversationsPlain(recs);
-        return null;
+        if (!process.stdin.isTTY) {
+            this.showConversationsPlain(recs);
+            return null;
+        }
+        enableRawStdin();
+        let selected = 0;
+        let lastRows = 0;
+        const draw = () => {
+            const frame = "\n" + this.renderPickerPanel(recs, selected);
+            const n = frame.split("\n").length;
+            if (lastRows > 0)
+                process.stdout.write(`\x1b[${lastRows - 1}A\r\x1b[J`);
+            process.stdout.write(frame);
+            lastRows = n;
+        };
+        draw();
+        try {
+            for (;;) {
+                const k = await waitRawKey();
+                if (k.name === "up") {
+                    selected = (selected - 1 + recs.length) % recs.length;
+                    draw();
+                }
+                else if (k.name === "down") {
+                    selected = (selected + 1) % recs.length;
+                    draw();
+                }
+                else if (k.name === "return" || k.name === "enter") {
+                    return Number(recs[selected]["id"] ?? null);
+                }
+                else if (k.str === "q" ||
+                    k.str === "Q" ||
+                    k.name === "escape" ||
+                    (k.ctrl && (k.name === "c" || k.name === "z"))) {
+                    return null;
+                }
+            }
+        }
+        finally {
+            process.stdout.write(`\x1b[${lastRows - 1}A\r\x1b[J`);
+            disableRawStdin();
+        }
     }
     async resumeConversation(engine, num) {
         const sid = parseInt(num, 10);
         if (Number.isNaN(sid)) {
-            renderPanel(`Invalid conversation number: ${num}`, "Error");
+            process.stdout.write("\n");
+            renderPanel(`Invalid conversation number: ${num}`, "Error", "", true, "31");
             return;
         }
         const rec = loadSession(sid);
         if (!rec) {
-            renderPanel(`Conversation ${sid} not found.`, "Error");
+            process.stdout.write("\n");
+            renderPanel(`Conversation ${sid} not found.`, "Error", "", true, "31");
             return;
         }
         this.saveSession(engine);
@@ -232,7 +350,7 @@ export class CLI {
                     break;
                 }
                 if (lower === "/help") {
-                    this.showHelp();
+                    await this.showHelp();
                     continue;
                 }
                 if (lower === "/clear") {
@@ -249,7 +367,10 @@ export class CLI {
                 if (lower.startsWith("/resume")) {
                     const parts = input.trim().split(/\s+/);
                     if (parts.length === 1) {
-                        this.pickConversation();
+                        const picked = await this.pickConversation();
+                        if (picked != null && !Number.isNaN(picked)) {
+                            await this.resumeConversation(engine, String(picked));
+                        }
                     }
                     else {
                         await this.resumeConversation(engine, parts[1]);
@@ -264,7 +385,8 @@ export class CLI {
                         process.stdout.write(`\n\x1b[2mReasoning effort set to ${effort}.\x1b[0m\n`);
                     }
                     else {
-                        renderPanel("Usage: /effort none|low|high", "Error");
+                        process.stdout.write("\n");
+                        renderPanel("Usage: /effort none|low|high", "Error", "", true, "31");
                     }
                     continue;
                 }

package/dist/ui.js

@@ -1,5 +1,47 @@
 import * as readline from "node:readline";
 // ---------------------------------------------------------------------------
+// Raw stdin key reading (for interactive help / resume picker)
+// ---------------------------------------------------------------------------
+let rawKeyListeners = 0;
+/** Enter raw mode and emit keypress events on stdin. */
+export function enableRawStdin() {
+    if (rawKeyListeners === 0) {
+        readline.emitKeypressEvents(process.stdin);
+        if (process.stdin.isTTY)
+            process.stdin.setRawMode(true);
+        process.stdin.resume();
+        hideCursor();
+    }
+    rawKeyListeners++;
+}
+/** Exit raw mode. */
+export function disableRawStdin() {
+    rawKeyListeners = Math.max(0, rawKeyListeners - 1);
+    if (rawKeyListeners === 0) {
+        try {
+            process.stdin.setRawMode(false);
+        }
+        catch {
+            /* ignore */
+        }
+        // Do NOT pause stdin here: askBottomPrompt re-acquires raw mode and
+        // resumes the stream itself. Pausing can race with that resume and drop
+        // keypress events on some terminals (prompt appearing "locked" after an
+        // interactive help/picker).
+        showCursor();
+    }
+}
+/** Wait for a single raw keypress. */
+export function waitRawKey() {
+    return new Promise((resolve) => {
+        const onKeypress = (str, key) => {
+            process.stdin.removeListener("keypress", onKeypress);
+            resolve({ name: key?.name ?? "", str: str ?? "", ctrl: !!(key?.ctrl) });
+        };
+        process.stdin.on("keypress", onKeypress);
+    });
+}
+// ---------------------------------------------------------------------------
 // Terminal helpers
 // ---------------------------------------------------------------------------
 export function isWindows() {
@@ -142,7 +184,7 @@ export function mutedMarkdown(text) {
  *  - title/subtitle are embedded in the top/bottom borders, centered by
  *    default (rich default) or left-aligned.
  */
-export function renderPanel(content, title = "", subtitle = "", expand = true, borderStyle = "90", // 90 = bright black (grey50)
+function panelString(content, title = "", subtitle = "", expand = true, borderStyle = "90", // 90 = bright black (grey50)
 titleAlign = "center") {
     const styled = markupToAnsi(content);
     const styledLines = styled.split("\n");
@@ -172,17 +214,59 @@ titleAlign = "center") {
         const right = fill - left;
         return `${"─".repeat(left)}${inner}${"─".repeat(right)}`;
     };
+    const out = [];
     const top = `╭${embed(title, titleAlign)}╮`;
-    process.stdout.write(`\x1b[${borderStyle}m${top}\x1b[0m\n`);
+    out.push(`\x1b[${borderStyle}m${top}\x1b[0m`);
     for (let i = 0; i < styledLines.length; i++) {
         const line = styledLines[i];
         const plain = plainLines[i] ?? "";
         // Keep exactly one space padding each side; only pad the right to fill.
         const pad = Math.max(innerW - plain.length - 2, 0);
-        process.stdout.write(`\x1b[${borderStyle}m│\x1b[0m ${line}${" ".repeat(pad)} \x1b[${borderStyle}m│\x1b[0m\n`);
+        out.push(`\x1b[${borderStyle}m│\x1b[0m ${line}${" ".repeat(pad)} \x1b[${borderStyle}m│\x1b[0m`);
     }
     const bottom = `╰${embed(subtitle, "center")}╯`;
-    process.stdout.write(`\x1b[${borderStyle}m${bottom}\x1b[0m\n`);
+    out.push(`\x1b[${borderStyle}m${bottom}\x1b[0m`);
+    return out.join("\n");
+}
+export function renderPanel(content, title = "", subtitle = "", expand = true, borderStyle = "90", // 90 = bright black (grey50)
+titleAlign = "center") {
+    process.stdout.write(panelString(content, title, subtitle, expand, borderStyle, titleAlign) + "\n");
+}
+function plainLen(s) {
+    return s.replace(/\x1b\[[0-9;]*m/g, "").length;
+}
+/**
+ * Render a rich-style bordered table panel (mirrors rich's Table + Panel).
+ *
+ * `rows` is a list of {cells, style?} where `style` (ANSI prefix) is applied to
+ * the whole row. Columns are left-aligned and padded; `colWidths` can fix a
+ * column's width (used for the selection gutter).
+ */
+export function renderTableString(rows, opts = {}) {
+    const ncols = Math.max(0, ...rows.map((r) => r.cells.length));
+    if (ncols === 0)
+        return panelString("", opts.title ?? "", opts.subtitle ?? "", opts.expand, opts.borderStyle, opts.titleAlign);
+    const colGap = opts.colGap ?? 2;
+    const widths = [];
+    for (let c = 0; c < ncols; c++) {
+        let mw = 0;
+        for (const r of rows)
+            if (r.cells[c])
+                mw = Math.max(mw, plainLen(r.cells[c]));
+        widths.push(Math.max(mw, opts.colWidths?.[c] ?? 0));
+    }
+    const contentLines = [];
+    for (const r of rows) {
+        const parts = [];
+        for (let c = 0; c < ncols; c++) {
+            const cell = r.cells[c] ?? "";
+            const pad = c < ncols - 1 ? widths[c] - plainLen(cell) + colGap : 0;
+            parts.push(cell + " ".repeat(Math.max(pad, 0)));
+        }
+        const line = parts.join("");
+        contentLines.push(r.style ? `${r.style}${line}\x1b[0m` : line);
+    }
+    return panelString(contentLines.join("\n"), opts.title ?? "", opts.subtitle ?? "", opts.expand, opts.borderStyle, opts.titleAlign);
 }
 // ---------------------------------------------------------------------------
 // Durations

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxecli/oxe",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "publishConfig": {
     "access": "public"
   },