fix(v1.2.1): input line-wrap bug, live bottom separator, restore header (#33)

victormartingil · web-flow · commit bcdf9effe658 · 2026-02-10T12:03:03.000+01:00
* fix(v1.2.1): input line-wrap bug, live bottom separator, restore header - Fix extra blank line when user text fills exactly one terminal row (exact boundary detection in cursor position calculation) - Add bottom separator line that renders live while typing, growing with wrapped text (previously only appeared on Enter) - Restore styled purple header box for all users, not just first-time - Remove unused imports (existsSync, path) - Bump version to 1.2.1 * fix(v1.2.1): input line-wrap extra line, header box right border - Fix extra blank line when typed text fills exactly one terminal row by skipping the \n before the bottom separator when the terminal has already auto-wrapped the cursor. - Fix header box right border misalignment caused by emoji width variance: use ANSI absolute column positioning (\x1b[<col>G) to place the closing │ at a fixed column matching the top/bottom corners. * fix(repl): header box alignment and bottom separator persistence - Header box: use ANSI CHA (\x1b[<col>G) + EL (\x1b[K) to position the right │ at a fixed column (43) matching the top/bottom corners, regardless of terminal emoji width rendering (2 vs 3 cols for 🥥). - Bottom separator: preserve it on screen after the user presses Enter. clearMenu now moves the cursor past the separator before erasing, so the separator stays visible while the agent is thinking/responding. * fix(repl): use string-width for header box alignment (boxen approach) Replace custom visualWidth() with the industry-standard `string-width` package (6900+ npm dependents, used by boxen/ink/chalk ecosystem). The header box now uses pure space-padding (like boxen) instead of ANSI cursor positioning. stringWidth correctly measures emoji, ZWJ sequences, and CJK characters via Intl.Segmenter + grapheme clusters, so the right │ border always aligns with the ╮/╯ corners regardless of terminal emoji width rendering. * fix(repl): move emoji outside box for perfect right border alignment Emoji widths are unpredictable across terminals (🥥 renders as 2 or 3 cols depending on the emulator). No JS library — including string-width — can query the actual terminal rendering width. This mismatch caused the right │ to be offset on the title line. Move the 🥥 emoji outside the box (before the top-left corner) so only ASCII content lives inside. ASCII chars always have width 1, making the right border perfectly continuous across all terminals and emulators. * fix(repl): adjust top border indent to match emoji terminal width * fix(repl): nudge top border line right to align with box body * fix(repl): remove emoji from header box for clean alignment * refactor(repl): rename header to "COCO - Coding Agent" Simplify branding: the npm scope @corbat-tech already carries the company name, so the product name in the header is just "COCO". Added "- Coding Agent" descriptor for clarity. * refactor(repl): 3-line header with tagline and color hierarchy - COCO in bold white (protagonist) - "code that converges to quality" tagline in magenta (brand color) - "open source • corbat.tech" in dim (attribution) * chore: bump version to 1.2.2
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@corbat-tech/coco",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Autonomous Coding Agent with Self-Review, Quality Convergence, and Production-Ready Output",
   "type": "module",
   "main": "dist/index.js",
@@ -91,6 +91,7 @@
     "openai": "^6.17.0",
     "ora": "^9.2.0",
     "simple-git": "^3.27.0",
+    "string-width": "^8.1.1",
     "tslog": "^4.9.3",
     "zod": "^4.3.6"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/cli/repl/index.ts b/src/cli/repl/index.ts
@@ -2,9 +2,8 @@
  * REPL main entry point
  */
 
-import { existsSync } from "node:fs";
-import path from "node:path";
 import chalk from "chalk";
+import stringWidth from "string-width";
 import {
   createSession,
   initializeSessionTrust,
@@ -63,50 +62,9 @@ import {
   type CocoQualityResult,
 } from "./coco-mode.js";
 
-/**
- * Calculate the visual width of a string, accounting for ANSI escape codes
- * and wide characters (emoji, CJK).
- *
- * - Strips ANSI escape sequences (zero width)
- * - Counts emoji and wide Unicode characters as width 2
- * - Counts all other printable characters as width 1
- */
-function visualWidth(str: string): number {
-  // Strip ANSI escape codes
-  // eslint-disable-next-line no-control-regex
-  const stripped = str.replace(/\x1b\[[0-9;]*m/g, "");
-  let width = 0;
-  for (const char of stripped) {
-    const cp = char.codePointAt(0) || 0;
-    // Emoji ranges (common emoji blocks)
-    if (
-      cp > 0x1f600 ||
-      (cp >= 0x2600 && cp <= 0x27bf) ||
-      (cp >= 0x1f300 && cp <= 0x1fad6) ||
-      (cp >= 0x1f900 && cp <= 0x1f9ff) ||
-      (cp >= 0x2702 && cp <= 0x27b0) ||
-      (cp >= 0xfe00 && cp <= 0xfe0f) ||
-      cp === 0x200d
-    ) {
-      width += 2;
-    } else if (
-      // CJK Unified Ideographs and other wide characters
-      (cp >= 0x1100 && cp <= 0x115f) ||
-      (cp >= 0x2e80 && cp <= 0x303e) ||
-      (cp >= 0x3040 && cp <= 0x33bf) ||
-      (cp >= 0x4e00 && cp <= 0x9fff) ||
-      (cp >= 0xf900 && cp <= 0xfaff) ||
-      (cp >= 0xfe30 && cp <= 0xfe6f) ||
-      (cp >= 0xff01 && cp <= 0xff60) ||
-      (cp >= 0xffe0 && cp <= 0xffe6)
-    ) {
-      width += 2;
-    } else {
-      width += 1;
-    }
-  }
-  return width;
-}
+// stringWidth (from 'string-width') is the industry-standard way to measure
+// visual terminal width of strings.  It correctly handles ANSI codes, emoji
+// (including ZWJ sequences), CJK, and grapheme clusters via Intl.Segmenter.
 
 /**
  * Start the REPL
@@ -521,55 +479,53 @@ export async function startRepl(
  * Brand color: Magenta/Purple
  */
 async function printWelcome(session: { projectPath: string; config: ReplConfig }): Promise<void> {
-  const providerType = session.config.provider.type;
-  const model = session.config.provider.model || "default";
-
-  // Compact welcome for returning users
-  const isReturningUser = existsSync(path.join(session.projectPath, ".coco"));
-  if (isReturningUser) {
-    const versionStr = chalk.dim(`v${VERSION}`);
-    const providerStr = chalk.dim(`${providerType}/${model}`);
-    console.log(
-      `\n  \u{1F965} Coco ${versionStr} ${chalk.dim("\u2502")} ${providerStr} ${chalk.dim("\u2502")} ${chalk.yellow("/help")}\n`,
-    );
-    return;
-  }
-
   const trustStore = createTrustStore();
   await trustStore.init();
   const trustLevel = trustStore.getLevel(session.projectPath);
 
-  // Box dimensions - fixed width for consistency
+  // Box dimensions — fixed width for consistency.
+  // Using the same approach as `boxen`: measure content with `stringWidth`,
+  // pad with spaces to a uniform inner width, then wrap with border chars.
+  // IMPORTANT: Emoji MUST stay outside the box.  Terminal emoji widths are
+  // unpredictable (some render 🥥 as 2 cols, others as 3) and no JS lib
+  // can query the actual terminal width.  Only ASCII content goes inside
+  // so the right │ always aligns perfectly with the corners.
   const boxWidth = 41;
-  const innerWidth = boxWidth - 4; // Account for "\u2502 " and " \u2502"
+  const innerWidth = boxWidth - 2; // visible columns between the two │ chars
 
-  // Build content lines with proper padding using visualWidth()
-  const titleContent = "\u{1F965} CORBAT-COCO";
   const versionText = `v${VERSION}`;
-  const titleContentVisualWidth = visualWidth(titleContent);
-  const versionVisualWidth = visualWidth(versionText);
-  const titlePadding = innerWidth - titleContentVisualWidth - versionVisualWidth;
-
   const subtitleText = "open source \u2022 corbat.tech";
-  const subtitleVisualWidth = visualWidth(subtitleText);
-  const subtitlePadding = innerWidth - subtitleVisualWidth;
 
+  // Helper: build a padded content line inside the box.
+  // Measures the visual width of `content` with stringWidth, then pads it
+  // with trailing spaces so every line has exactly `innerWidth` visible
+  // columns.  The right │ is always placed immediately after the padding.
+  const boxLine = (content: string): string => {
+    const pad = Math.max(0, innerWidth - stringWidth(content));
+    return chalk.magenta("\u2502") + content + " ".repeat(pad) + chalk.magenta("\u2502");
+  };
+
+  // Line 1: " COCO                    v1.2.x "
+  const titleLeftRaw = " COCO";
+  const titleRightRaw = versionText + " ";
+  const titleLeftStyled = " " + chalk.bold.white("COCO");
+  const titleGap = Math.max(1, innerWidth - stringWidth(titleLeftRaw) - stringWidth(titleRightRaw));
+  const titleContent = titleLeftStyled + " ".repeat(titleGap) + chalk.dim(titleRightRaw);
+
+  // Line 2: tagline in brand color
+  const taglineText = "code that converges to quality";
+  const taglineContent = " " + chalk.magenta(taglineText) + " ";
+
+  // Line 3: attribution (dim)
+  const subtitleContent = " " + chalk.dim(subtitleText) + " ";
+
+  // Always show the styled header box.
+  // Only ASCII inside the box — emoji widths are unpredictable across terminals.
   console.log();
   console.log(chalk.magenta("  \u256D" + "\u2500".repeat(boxWidth - 2) + "\u256E"));
-  console.log(
-    chalk.magenta("  \u2502 ") +
-      "\u{1F965} " +
-      chalk.bold.white("CORBAT-COCO") +
-      " ".repeat(Math.max(0, titlePadding)) +
-      chalk.dim(versionText) +
-      chalk.magenta(" \u2502"),
-  );
-  console.log(
-    chalk.magenta("  \u2502 ") +
-      chalk.dim(subtitleText) +
-      " ".repeat(Math.max(0, subtitlePadding)) +
-      chalk.magenta(" \u2502"),
-  );
+  console.log("  " + boxLine(titleContent));
+  console.log("  " + boxLine(taglineContent));
+  console.log("  " + boxLine(subtitleContent));
   console.log(chalk.magenta("  \u2570" + "\u2500".repeat(boxWidth - 2) + "\u256F"));
 
   // Check for updates (non-blocking, with 3s timeout)
@@ -650,7 +606,7 @@ async function checkProjectTrust(projectPath: string): Promise<boolean> {
 
   // Compact first-time access warning
   console.log();
-  console.log(chalk.cyan.bold("  \u{1F965} Corbat-Coco") + chalk.dim(` v${VERSION}`));
+  console.log(chalk.cyan.bold("  \u{1F965} Coco") + chalk.dim(` v${VERSION}`));
   console.log(chalk.dim(`  \u{1F4C1} ${projectPath}`));
   console.log();
   console.log(chalk.yellow("  \u26A0 First time accessing this directory"));
diff --git a/src/cli/repl/input/handler.ts b/src/cli/repl/input/handler.ts
@@ -140,6 +140,7 @@ export function createInputHandler(_session: ReplSession): InputHandler {
   let tempLine = "";
   let lastMenuLines = 0;
   let lastCursorRow = 0; // Track cursor row from previous render for accurate clearing
+  let lastContentRows = 1; // Track content rows so clearMenu can preserve the bottom separator
   let isFirstRender = true;
 
   // Bracketed paste mode state
@@ -192,9 +193,9 @@ export function createInputHandler(_session: ReplSession): InputHandler {
     const termCols = process.stdout.columns || 80;
     const prompt = getPrompt();
 
-    // On re-renders, move cursor up from previous position to the separator line,
-    // then clear everything. lastCursorRow tracks where the cursor was left,
-    // +1 accounts for the separator line drawn above the prompt.
+    // On re-renders, move cursor up from previous position to the top separator,
+    // then clear everything. lastCursorRow tracks the cursor row relative to
+    // the prompt start; +1 accounts for the top separator line.
     if (!isFirstRender) {
       const linesToGoUp = lastCursorRow + 1;
       if (linesToGoUp > 0) {
@@ -204,7 +205,7 @@ export function createInputHandler(_session: ReplSession): InputHandler {
     isFirstRender = false;
     process.stdout.write("\r" + ansiEscapes.eraseDown);
 
-    // Build separator line above input area
+    // Build top separator line
     const separator = chalk.dim("\u2500".repeat(termCols));
     let output = separator + "\n";
 
@@ -227,10 +228,27 @@ export function createInputHandler(_session: ReplSession): InputHandler {
       }
     }
 
+    // Calculate how many visual rows the content (prompt + full text) occupies.
+    // This determines where to place the bottom separator.
+    const totalContentLen = prompt.visualLen + currentLine.length;
+    const contentRows = totalContentLen === 0 ? 1 : Math.ceil(totalContentLen / termCols);
+
+    // When content exactly fills a row (totalContentLen is a multiple of termCols),
+    // the terminal auto-wraps the cursor to col 0 of the next row. In that case
+    // we must NOT emit an extra "\n" before the bottom separator, because the
+    // cursor is already on the next row. Emitting "\n" would create a blank line.
+    const contentExactFill = totalContentLen > 0 && totalContentLen % termCols === 0;
+
+    // Bottom separator — always drawn below the input content
+    output += (contentExactFill ? "" : "\n") + separator;
+
     // Draw dropdown menu if we have completions
     const showMenu =
       completions.length > 0 && currentLine.startsWith("/") && currentLine.length >= 1;
 
+    // Count extra lines below the bottom separator (menu + margin)
+    let extraLinesBelow = 0;
+
     if (showMenu) {
       const cols = getColumnCount();
       const maxVisibleItems = MAX_ROWS * cols;
@@ -257,11 +275,13 @@ export function createInputHandler(_session: ReplSession): InputHandler {
         output += "\n";
         output += chalk.dim(`  \u2191 ${startIndex} more above`);
         lastMenuLines++;
+        extraLinesBelow++;
       }
 
       // Render items in columns (items flow left-to-right, top-to-bottom)
       for (let row = 0; row < rowCount; row++) {
         output += "\n";
+        extraLinesBelow++;
 
         for (let col = 0; col < cols; col++) {
           const itemIndex = row * cols + col;
@@ -287,33 +307,38 @@ export function createInputHandler(_session: ReplSession): InputHandler {
         output += "\n";
         output += chalk.dim(`  \u2193 ${completions.length - endIndex} more below`);
         lastMenuLines++;
+        extraLinesBelow++;
       }
-
-      // Add bottom margin below menu, then move cursor back to prompt line
-      for (let i = 0; i < BOTTOM_MARGIN; i++) {
-        output += "\n";
-      }
-      // +1 for the separator line we added above the prompt
-      output += ansiEscapes.cursorUp(lastMenuLines + BOTTOM_MARGIN + 1);
     } else {
       lastMenuLines = 0;
+    }
 
-      // Add bottom margin below prompt, then move cursor back
-      for (let i = 0; i < BOTTOM_MARGIN; i++) {
-        output += "\n";
-      }
-      // +1 for the separator line
-      output += ansiEscapes.cursorUp(BOTTOM_MARGIN + 1);
+    // Add bottom margin
+    for (let i = 0; i < BOTTOM_MARGIN; i++) {
+      output += "\n";
+      extraLinesBelow++;
     }
 
-    // Account for the separator line: cursor is now on the separator line.
-    // Move down 1 to the prompt line.
+    // Move cursor back up to the top separator line.
+    // From current position we need to go up past:
+    //   extraLinesBelow + 1 (bottom separator) + contentRows (input) rows
+    // to reach the top separator, then down 1 to the prompt start.
+    const totalUp = extraLinesBelow + 1 + contentRows;
+    output += ansiEscapes.cursorUp(totalUp);
+
+    // We're now on the top separator. Move down 1 to the prompt line.
     output += ansiEscapes.cursorDown(1);
 
-    // Position cursor correctly within the input, accounting for wrapping
+    // Position cursor correctly within the input, accounting for wrapping.
+    // When cursorAbsolutePos is an exact multiple of termCols, the terminal
+    // auto-wraps to col 0 of the next row. We treat this as staying on the
+    // last content row to prevent the "extra line" bug on next re-render.
     const cursorAbsolutePos = prompt.visualLen + cursorPos;
-    const finalLine = Math.floor(cursorAbsolutePos / termCols);
-    const finalCol = cursorAbsolutePos % termCols;
+    const onExactBoundary = cursorAbsolutePos > 0 && cursorAbsolutePos % termCols === 0;
+    const finalLine = onExactBoundary
+      ? cursorAbsolutePos / termCols - 1
+      : Math.floor(cursorAbsolutePos / termCols);
+    const finalCol = onExactBoundary ? 0 : cursorAbsolutePos % termCols;
 
     output += "\r";
     if (finalLine > 0) {
@@ -323,19 +348,29 @@ export function createInputHandler(_session: ReplSession): InputHandler {
       output += ansiEscapes.cursorForward(finalCol);
     }
 
-    // Track cursor row for next render's clearing calculation
+    // Track cursor row and content height for next render / clearMenu
     lastCursorRow = finalLine;
+    lastContentRows = contentRows;
 
     // Write everything at once
     process.stdout.write(output);
   }
 
   /**
-   * Clear the menu before exiting or submitting
+   * Clear the menu and margin while preserving the bottom separator.
+   * Moves the cursor from its current editing position down to one row
+   * past the bottom separator, then erases everything below (menu + margin).
+   * The bottom separator line remains on screen.
    */
   function clearMenu() {
-    // Always erase below to clear menu and/or bottom margin
-    process.stdout.write(ansiEscapes.eraseDown);
+    // Cursor is on row `lastCursorRow` (0-indexed, relative to prompt start).
+    // Bottom separator is on row `lastContentRows` (one row past the content).
+    // Move cursor to one row AFTER the separator, then erase below.
+    const rowsDown = lastContentRows - lastCursorRow + 1; // +1 to go past the separator
+    if (rowsDown > 0) {
+      process.stdout.write(ansiEscapes.cursorDown(rowsDown));
+    }
+    process.stdout.write("\r" + ansiEscapes.eraseDown);
     lastMenuLines = 0;
   }
 
@@ -372,6 +407,7 @@ export function createInputHandler(_session: ReplSession): InputHandler {
         tempLine = "";
         lastMenuLines = 0;
         lastCursorRow = 0;
+        lastContentRows = 1;
         isFirstRender = true;
 
         // Initial render
@@ -580,10 +616,8 @@ export function createInputHandler(_session: ReplSession): InputHandler {
             }
 
             cleanup();
-            // Print closing separator after submission
-            const termWidth = process.stdout.columns || 80;
+            // Bottom separator is already rendered live; just move past it
             console.log(); // New line after input
-            console.log(chalk.dim("\u2500".repeat(termWidth)));
             const result = currentLine.trim();
             if (result) {
               sessionHistory.push(result);
