@oxecli/oxe 1.0.3 → 1.0.4

package/dist/cli.js

@@ -17,7 +17,7 @@ export class CLI {
     promptHistory = [];
     constructor() {
         clearScreen();
-        renderPanel("AI CODING AGENT", "", "Engine: Ready");
+        renderPanel("AI CODING AGENT", "", "Engine: Ready", false);
         process.stdout.write("\n");
         this.config = null;
     }
@@ -189,7 +189,7 @@ export class CLI {
         this.sessionId = sid;
         engine.reasoningEffort = String(rec["reasoning_effort"] ?? default_reasoning_effort);
         clearScreen();
-        renderPanel(`AI CODING AGENT  (resumed ${sid})`, "", "Engine: Ready");
+        renderPanel(`AI CODING AGENT  (resumed ${sid})`, "", "Engine: Ready", false);
         process.stdout.write(`\x1b[2mResumed:\x1b[0m ${truncateLabel(rec["label"])}\n`);
         process.stdout.write(`\x1b[2m(${this.inputItems.length} items · ${estimateTokens(this.inputItems).toLocaleString()} tokens · Effort: \x1b[1;36m${engine.reasoningEffort}\x1b[0m\x1b[2m)\x1b[0m\n\n`);
         renderPanel("Conversation history", "Restored");
@@ -226,7 +226,7 @@ export class CLI {
                     this.story = [];
                     this.sessionId = null;
                     clearScreen();
-                    renderPanel("AI CODING AGENT", "", "Engine: Ready");
+                    renderPanel("AI CODING AGENT", "", "Engine: Ready", false);
                     process.stdout.write("\n");
                     continue;
                 }

package/dist/config.js

@@ -153,7 +153,7 @@ export async function loadOrPrompt() {
             renderPanel("[bold white]Oxe Desktop Authentication[/bold white]\n\n" +
                 `[dim]Only valid Oxe API keys (starting with [bold]${OXE_KEY_PREFIX}[/bold]) generated on your\n` +
                 "Oxe web dashboard are authorized to run this agent.\n\n" +
-                "Get your key at: [bold underline]http://localhost:5173/dashboard/api-keys[/bold underline][/dim]", "Oxe Cloud Access");
+                "Get your key at: [bold underline]http://localhost:5173/dashboard/api-keys[/bold underline][/dim]", "Oxe Cloud Access", "", false);
             process.stdout.write("\n");
             api_key = await promptApiKey("Enter Oxe API Key: ");
             if (!api_key) {

package/dist/ui.js

@@ -135,46 +135,54 @@ export function mutedMarkdown(text) {
 // Panel
 // ---------------------------------------------------------------------------
 /**
- * Render a rich-style rounded panel: title in the top border, optional subtitle
- * in the bottom border, content lines inside.
+ * Render a rich-style rounded panel.
+ *
+ * Matches rich's Panel behavior:
+ *  - `expand=false` shrinks the frame to fit the content (banner/auth).
+ *  - title/subtitle are embedded in the top/bottom borders, centered by
+ *    default (rich default) or left-aligned.
  */
-export function renderPanel(content, title = "", subtitle = "", borderStyle = "90" // 90 = bright black (grey50)
-) {
-    const w = terminalWidth();
-    const innerW = Math.max(w - 4, 10);
+export function renderPanel(content, title = "", subtitle = "", expand = true, borderStyle = "90", // 90 = bright black (grey50)
+titleAlign = "center") {
     const styled = markupToAnsi(content);
     const styledLines = styled.split("\n");
     const plainLines = styled.replace(/\x1b\[[0-9;]*m/g, "").split("\n");
-    // Effective width used by the border (accounting for a title/subtitle side)
-    const borderW = innerW;
-    const topSegs = [];
-    topSegs.push("╭");
-    if (title) {
-        const t = ` ${title} `;
-        topSegs.push(`─${t}${"─".repeat(Math.max(borderW - t.length - 2, 0))}`);
-    }
-    else {
-        topSegs.push("─".repeat(borderW));
-    }
-    topSegs.push("╮");
-    process.stdout.write(`\x1b[${borderStyle}m${topSegs.join("")}\x1b[0m\n`);
+    // Inner width = widest content line + 1 space padding each side.
+    let contentW = 0;
+    for (const p of plainLines)
+        contentW = Math.max(contentW, p.length);
+    contentW = Math.max(contentW, 1);
+    let innerW = contentW + 2;
+    if (title)
+        innerW = Math.max(innerW, title.length + 2);
+    if (subtitle)
+        innerW = Math.max(innerW, subtitle.length + 2);
+    const w = terminalWidth();
+    innerW = expand ? Math.max(w - 4, 10) : Math.min(innerW, w - 4);
+    // Build a border run of `innerW` chars with `text` embedded.
+    const embed = (text, align) => {
+        if (!text)
+            return "─".repeat(innerW);
+        const inner = ` ${text} `;
+        const fill = Math.max(innerW - inner.length, 0);
+        if (align === "left") {
+            return `${inner}${"─".repeat(fill)}`;
+        }
+        const left = Math.floor(fill / 2);
+        const right = fill - left;
+        return `${"─".repeat(left)}${inner}${"─".repeat(right)}`;
+    };
+    const top = `╭${embed(title, titleAlign)}╮`;
+    process.stdout.write(`\x1b[${borderStyle}m${top}\x1b[0m\n`);
     for (let i = 0; i < styledLines.length; i++) {
         const line = styledLines[i];
         const plain = plainLines[i] ?? "";
-        const pad = Math.max(borderW - plain.length - 1, 0);
+        // 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`);
     }
-    const bottomSegs = [];
-    bottomSegs.push("╰");
-    if (subtitle) {
-        const s = ` ${subtitle} `;
-        bottomSegs.push(`─${s}${"─".repeat(Math.max(borderW - s.length - 2, 0))}`);
-    }
-    else {
-        bottomSegs.push("─".repeat(borderW));
-    }
-    bottomSegs.push("╯");
-    process.stdout.write(`\x1b[${borderStyle}m${bottomSegs.join("")}\x1b[0m\n`);
+    const bottom = `╰${embed(subtitle, "center")}╯`;
+    process.stdout.write(`\x1b[${borderStyle}m${bottom}\x1b[0m\n`);
 }
 // ---------------------------------------------------------------------------
 // Durations
@@ -345,51 +353,51 @@ export function splitBlocks(buffer, pasteSpans) {
     }
     return segs;
 }
-function renderBufferWithCursor(buffer, pasteSpans, prefix, label, cursor) {
+export function renderBufferWithCursor(buffer, pasteSpans, prefix, label, cursor) {
     const w = terminalWidth();
-    const innerW = Math.max(w - 4, 10);
-    const border = "─".repeat(innerW);
+    const borderW = Math.max(w - 4, 10);
     const [row, col] = cursorLineCol(buffer, cursor);
-    const segs = splitBlocks(buffer, pasteSpans);
-    let display = "";
-    for (let i = 0; i < segs.length; i++) {
-        const [, kind, disp] = segs[i];
-        if (i && !endsWithWs(segs[i - 1][2]))
-            display += " ";
-        display += kind === "collapsed" ? `\x1b[1m\x1b[36m${disp}\x1b[0m` : disp;
+    // Build the inner content line(s) — the whole prefix+text (or placeholder)
+    // lives on a single row when the buffer is empty, matching the original.
+    let content;
+    if (!buffer) {
+        content = `\x1b[1m${prefix}\x1b[0m \x1b[1m▏\x1b[0m\x1b[2m${PROMPT_PLACEHOLDER}\x1b[0m`;
     }
-    const prefixStr = `\x1b[1m${prefix}\x1b[0m `;
-    const innerLines = (prefixStr + display).split("\n");
-    // Build the panel lines, each padded to innerW.
-    const lines = [];
-    for (const l of innerLines) {
-        const plain = l.replace(/\x1b\[[0-9;]*m/g, "");
-        const pad = Math.max(innerW - 1 - plain.length, 0);
-        lines.push(`\x1b[90m│\x1b[0m ${l}${" ".repeat(pad)} \x1b[90m│\x1b[0m`);
+    else {
+        const segs = splitBlocks(buffer, pasteSpans);
+        let display = "";
+        for (let i = 0; i < segs.length; i++) {
+            const [, kind, disp] = segs[i];
+            if (i && !endsWithWs(segs[i - 1][2]))
+                display += " ";
+            display += kind === "collapsed" ? `\x1b[1m\x1b[36m${disp}\x1b[0m` : disp;
+        }
+        content = `\x1b[1m${prefix}\x1b[0m ${display}`;
     }
-    // Placeholder row when empty
-    if (!buffer) {
-        const ph = `\x1b[2m${PROMPT_PLACEHOLDER}\x1b[0m`;
-        const pad = Math.max(innerW - 1 - PROMPT_PLACEHOLDER.length, 0);
-        lines.push(`\x1b[90m│\x1b[0m ${ph}${" ".repeat(pad)} \x1b[90m│\x1b[0m`);
+    const lines = content.split("\n");
+    // Top border with the label embedded on the left.
+    const topPad = Math.max(borderW - label.length - 2, 0);
+    const top = `\x1b[90m╭─ ${label} ${"─".repeat(topPad)}╮\x1b[0m`;
+    // Body rows.
+    const body = [];
+    for (const l of lines) {
+        const plain = l.replace(/\x1b\[[0-9;]*m/g, "");
+        const pad = Math.max(borderW - 2 - plain.length, 0);
+        body.push(`\x1b[90m│\x1b[0m ${l}${" ".repeat(pad)} \x1b[90m│\x1b[0m`);
     }
-    const frame = [
-        `\x1b[90m┌─${label}─${border.slice(label.length + 2)}┐\x1b[0m`,
-        ...lines,
-        `\x1b[90m└${border}┘\x1b[0m`,
-    ].join("\n");
-    // Compute where the cursor should be placed.
-    let cursorRow = row;
-    let cursorCol = col + (row === 0 ? prefix.length + 1 : 0);
-    // +1 row for the top border.
-    cursorRow += 1;
-    const totalRows = frame.split("\n").length;
+    const bottom = `\x1b[90m╰${"─".repeat(borderW)}╯\x1b[0m`;
+    const frame = [top, ...body, bottom].join("\n");
+    // Cursor placement: one row below the top border. Column includes the
+    // "│ " left border (2) plus "prefix " (prefix.length + 1).
+    const cursorRow = row + 1;
+    const cursorCol = col + prefix.length + 3;
+    const totalRows = body.length + 2;
     let cmd = "";
     if (totalRows - 1 > cursorRow)
         cmd += `\x1b[${totalRows - 1 - cursorRow}A`;
     else if (cursorRow > totalRows - 1)
         cmd += `\x1b[${cursorRow - (totalRows - 1)}B`;
-    cmd += `\r\x1b[${cursorCol + 2}C`;
+    cmd += `\r\x1b[${cursorCol}C`;
     return frame + cmd;
 }
 export function askBottomPrompt(label = "You", prefix = "❯", history = []) {

package/package.json

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