@crouton-kit/humanloop 0.3.21 → 0.3.22

package/dist/inbox/tui.js

@@ -113,17 +113,24 @@ export function pickFromInbox(items, opts) {
         const flush = () => {
             const { cols: currentCols, rows: currentRows } = getTerminalSize();
             const lines = buildInboxLines(items, currentCols, selectedIndex);
-            const { writes, nextPrevFrame } = diffFrame(prevFrame, lines, currentRows);
+            const { writes, nextPrevFrame } = diffFrame(prevFrame, lines, currentRows, currentCols);
             process.stdout.write('\x1b[?2026h');
             for (const w of writes)
                 process.stdout.write(w);
             process.stdout.write('\x1b[?2026l');
             prevFrame = nextPrevFrame;
         };
+        // Resize reflows/scrolls what's already on screen, invalidating the diff
+        // model — clear and redraw from scratch at the new size.
+        const onResize = () => {
+            prevFrame = [];
+            process.stdout.write('\x1b[2J\x1b[H');
+            flush();
+        };
         const done = (result) => {
             restoreTerminal();
             process.stdin.removeListener('data', onData);
-            process.stdout.removeListener('resize', flush);
+            process.stdout.removeListener('resize', onResize);
             resolve(result);
         };
         setupTerminal();
@@ -151,6 +158,6 @@ export function pickFromInbox(items, opts) {
             }
         };
         process.stdin.on('data', onData);
-        process.stdout.on('resize', flush);
+        process.stdout.on('resize', onResize);
     });
 }

package/dist/tui/app.js

@@ -254,14 +254,26 @@ export async function resolveInteractionDir(dir, deck, opts = {}) {
         let currentDeck = deck;
         let deckWatch = null;
         const flushHost = (lines) => {
-            const { rows: currentRows } = getTerminalSize();
-            const { writes, nextPrevFrame } = diffFrame(prevFrameLocal, lines, currentRows);
+            const { cols: currentCols, rows: currentRows } = getTerminalSize();
+            const { writes, nextPrevFrame } = diffFrame(prevFrameLocal, lines, currentRows, currentCols);
             process.stdout.write('\x1b[?2026h');
             for (const w of writes)
                 process.stdout.write(w);
             process.stdout.write('\x1b[?2026l');
             prevFrameLocal = nextPrevFrame;
         };
+        // On resize the terminal reflows/scrolls existing content, so the diff
+        // model no longer matches the screen: re-layout at the new size, clear
+        // everything, and redraw from scratch.
+        const onResize = () => {
+            if (panel === null)
+                return;
+            const { cols: c, rows: r } = getTerminalSize();
+            const lines = panel.handleResize(c, r);
+            prevFrameLocal = [];
+            process.stdout.write('\x1b[2J\x1b[H');
+            flushHost(lines);
+        };
         const finalize = (responses) => {
             if (deckWatch !== null) {
                 clearInterval(deckWatch);
@@ -269,6 +281,7 @@ export async function resolveInteractionDir(dir, deck, opts = {}) {
             }
             restoreTerminal();
             process.stdin.removeListener('data', onData);
+            process.stdout.removeListener('resize', onResize);
             panel?.unmount();
             const completedAt = new Date().toISOString();
             // Resolved supersedes in-progress: write response.json, drop progress.json.
@@ -342,6 +355,7 @@ export async function resolveInteractionDir(dir, deck, opts = {}) {
             flushHost(panel.render());
         };
         process.stdin.on('data', onData);
+        process.stdout.on('resize', onResize);
     });
 }
 // ── launchTui — file-path entry over the dir resolver (a kept public export

package/dist/tui/render.d.ts

@@ -1,6 +1,14 @@
 import type { TuiState, Interaction, InteractionResponse } from '../types.js';
 export declare function sanitize(text: string): string;
-export declare function diffFrame(prevFrame: string[], nextLines: string[], rows: number): {
+/**
+ * ANSI-aware clip: truncate a line's *visible* width to `maxWidth`, passing
+ * escape sequences through untouched. Every line written to the terminal must
+ * fit within the columns, or it physically wraps onto the next row — which
+ * breaks diffFrame's one-logical-line-per-row model and strands spillover text
+ * on rows the differ believes are empty (so it never erases them).
+ */
+export declare function clipLine(line: string, maxWidth: number): string;
+export declare function diffFrame(prevFrame: string[], nextLines: string[], rows: number, cols?: number): {
     writes: string[];
     nextPrevFrame: string[];
 };

package/dist/tui/render.js

@@ -143,15 +143,54 @@ function centerHorizontal(lines, cols, contentWidth) {
     return lines.map((line) => (line === '' ? '' : pad + line));
 }
 // ── Frame buffer ─────────────────────────────────────────────────────────────
-export function diffFrame(prevFrame, nextLines, rows) {
+/**
+ * ANSI-aware clip: truncate a line's *visible* width to `maxWidth`, passing
+ * escape sequences through untouched. Every line written to the terminal must
+ * fit within the columns, or it physically wraps onto the next row — which
+ * breaks diffFrame's one-logical-line-per-row model and strands spillover text
+ * on rows the differ believes are empty (so it never erases them).
+ */
+export function clipLine(line, maxWidth) {
+    if (maxWidth < 1)
+        return '';
+    if (stringWidth(line) <= maxWidth)
+        return line; // string-width ignores ANSI
+    let out = '';
+    let w = 0;
+    let i = 0;
+    let sawAnsi = false;
+    while (i < line.length) {
+        if (line[i] === '\x1b') {
+            const m = /^\x1b\[[0-9;?]*[a-zA-Z]|^\x1b[@-_]/.exec(line.slice(i));
+            if (m !== null) {
+                out += m[0];
+                i += m[0].length;
+                sawAnsi = true;
+                continue;
+            }
+        }
+        const ch = String.fromCodePoint(line.codePointAt(i));
+        const cw = stringWidth(ch);
+        if (w + cw > maxWidth)
+            break;
+        out += ch;
+        w += cw;
+        i += ch.length;
+    }
+    return sawAnsi ? out + RESET : out;
+}
+export function diffFrame(prevFrame, nextLines, rows, cols) {
+    const clipped = cols !== undefined
+        ? nextLines.map((l) => clipLine(l, cols))
+        : nextLines;
     const writes = [];
     for (let i = 0; i < rows; i++) {
-        const line = i < nextLines.length ? nextLines[i] : '';
+        const line = i < clipped.length ? clipped[i] : '';
         if (prevFrame[i] !== line) {
             writes.push(`${ESC}${i + 1};1H${ESC}2K${line}`);
         }
     }
-    return { writes, nextPrevFrame: [...nextLines] };
+    return { writes, nextPrevFrame: [...clipped] };
 }
 // ── Renderers ────────────────────────────────────────────────────────────────
 export function renderOverview(state, cols, rows) {
@@ -301,12 +340,14 @@ export function renderItemReview(state, cols, rows) {
                     ? opts.find((o) => o.id === attachedId)
                     : undefined;
                 const valueText = attached !== undefined
-                    ? `${CYAN}${singleLine(attached.label)}${RESET}`
+                    ? `${CYAN}${truncate(singleLine(attached.label), Math.max(10, maxW - 28))}${RESET}`
                     : `${DIM}none (overall)${RESET}`;
                 attachedLine = `  ${DIM}attached:${RESET} ${valueText}  ${DIM}[tab to cycle]${RESET}`;
             }
         }
-        postLines.push(`  ${YELLOW}${label}:${RESET}`);
+        for (const labelLine of wrap(`${singleLine(label)}:`, maxW)) {
+            postLines.push(`  ${YELLOW}${labelLine}${RESET}`);
+        }
         const bufLines = hardWrap(state.inputMode.buffer, maxW - 1);
         for (let i = 0; i < bufLines.length; i++) {
             const isLast = i === bufLines.length - 1;
@@ -326,7 +367,9 @@ export function renderItemReview(state, cols, rows) {
     // just above the footer; cleared on the next keypress.
     if (state.hint !== undefined && state.hint.length > 0) {
         postLines.push('');
-        postLines.push(`  ${YELLOW}${sanitize(state.hint)}${RESET}`);
+        for (const hintLine of wrap(sanitize(state.hint), maxW)) {
+            postLines.push(`  ${YELLOW}${hintLine}${RESET}`);
+        }
     }
     // Window the body
     const reservedRows = preLines.length + postLines.length + 1; // +1 for footer
@@ -428,15 +471,25 @@ function renderActions(interaction, selectedAction, maxW, existing) {
             label = 'Add overall comment  (c on an option for per-option)';
         else
             label = 'Add comment';
-        lines.push(`  ${cursor} ${DIM}[c]${RESET} ${label}`);
+        const ftLines = wrap(sanitize(label), contentMax);
+        for (let j = 0; j < ftLines.length; j++) {
+            const prefix = j === 0 ? `  ${cursor} ${DIM}[c]${RESET} ` : ' '.repeat(8);
+            lines.push(`${prefix}${ftLines[j]}`);
+        }
     }
     else if (interaction.allowFreetext && opts.length === 0) {
         const ftLabel = interaction.freetextLabel !== undefined ? interaction.freetextLabel : 'Enter response';
-        lines.push(`  ${DIM}[r]${RESET} ${ftLabel}`);
+        const ftLines = wrap(sanitize(ftLabel), contentMax);
+        for (let j = 0; j < ftLines.length; j++) {
+            const prefix = j === 0 ? `  ${DIM}[r]${RESET} ` : ' '.repeat(6);
+            lines.push(`${prefix}${ftLines[j]}`);
+        }
     }
     if (existing) {
         lines.push('');
-        lines.push(`  ${GREEN}Current: ${responseSummary(existing, interaction)}${RESET}`);
+        for (const curLine of wrap(`Current: ${responseSummary(existing, interaction)}`, maxW)) {
+            lines.push(`  ${GREEN}${curLine}${RESET}`);
+        }
     }
     return lines;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crouton-kit/humanloop",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "description": "Human-in-the-loop decision TUI — agents write questions, humans answer them",
   "type": "module",
   "main": "dist/index.js",