@crouton-kit/humanloop 0.1.3 → 0.1.4

package/dist/tui/app.js

@@ -103,8 +103,11 @@ export function validateInput(parsed) {
 }
 // ── Internal helpers ──────────────────────────────────────────────────────────
 function buildInitialState(deck) {
+    // Single-question decks skip the overview list — there's nothing to overview,
+    // and overview hides the option hotkeys so users press 'y' and nothing happens.
+    const initialPhase = deck.interactions.length === 1 ? 'item-review' : 'overview';
     return {
-        phase: 'overview',
+        phase: initialPhase,
         currentIndex: 0,
         interactions: deck.interactions,
         responses: new Map(),

package/dist/tui/input.js

@@ -62,18 +62,21 @@ function handleOverview(input, key, state, render, exit) {
     if (input === 'j' || key.downArrow) {
         state.currentIndex = Math.min(state.currentIndex + 1, state.interactions.length - 1);
         render();
+        return;
     }
-    else if (input === 'k' || key.upArrow) {
+    if (input === 'k' || key.upArrow) {
         state.currentIndex = Math.max(state.currentIndex - 1, 0);
         render();
+        return;
     }
-    else if (key.return) {
+    if (key.return || input === ' ') {
         state.phase = 'item-review';
         state.selectedAction = 0;
         state.detailExpanded = false;
         render();
+        return;
     }
-    else if (input === 'q') {
+    if (input === 'q') {
         if (state.responses.size >= state.interactions.length) {
             exit();
         }
@@ -81,6 +84,19 @@ function handleOverview(input, key, state, render, exit) {
             state.phase = 'final';
             render();
         }
+        return;
+    }
+    // Quick-answer: option shortcut for the focused interaction. Lets users
+    // answer from the overview list without pressing Enter first.
+    const interaction = state.interactions[state.currentIndex];
+    if (interaction !== undefined) {
+        const matched = interaction.options.find((o) => o.shortcut === input);
+        if (matched !== undefined) {
+            submitOption(state, interaction, matched.id, undefined);
+            // Don't auto-advance the cursor — users may want to re-answer the same
+            // question. The response icon flips ✓ and they can j/k away when ready.
+            render();
+        }
     }
 }
 // ── Item Review ──────────────────────────────────────────────────────────────

package/dist/tui/render.js

@@ -166,6 +166,22 @@ function hardWrap(text, maxWidth) {
     }
     return out;
 }
+// ── Horizontal centering ─────────────────────────────────────────────────────
+/**
+ * Pad each non-empty line with leading spaces to horizontally center the
+ * `contentWidth`-wide block within `cols`. Wide terminals (dashboard, full
+ * screen) get visual breathing room; narrow panes (split tmux pane next to a
+ * spawning agent) skip centering because there's nothing to center.
+ *
+ * Empty lines stay empty so frame diffing can keep them as cheap no-ops.
+ */
+function centerHorizontal(lines, cols, contentWidth) {
+    const extraPad = Math.max(0, Math.floor((cols - contentWidth) / 2));
+    if (extraPad === 0)
+        return lines;
+    const pad = ' '.repeat(extraPad);
+    return lines.map((line) => (line === '' ? '' : pad + line));
+}
 // ── Frame buffer ─────────────────────────────────────────────────────────────
 export function diffFrame(prevFrame, nextLines, rows) {
     const writes = [];
@@ -237,7 +253,10 @@ export function renderOverview(state, cols, rows) {
     lines.push(`  ${DIM}enter${RESET} review  ${DIM}j/k${RESET} navigate  ${DIM}q${RESET} finish`);
     while (lines.length < rows)
         lines.push('');
-    return lines.slice(0, rows);
+    // Overview content extends roughly cols-16 wide for option labels; center
+    // against a 60-col cap (the divider width) when the terminal is much wider.
+    const centered = centerHorizontal(lines.slice(0, rows), cols, Math.min(cols, 60) + 2);
+    return centered;
 }
 export function renderItemReview(state, cols, rows) {
     const interaction = state.interactions[state.currentIndex];
@@ -307,7 +326,7 @@ export function renderItemReview(state, cols, rows) {
                     ? opts.find((o) => o.id === attachedId)
                     : undefined;
                 const valueText = attached !== undefined
-                    ? `${CYAN}${sanitize(attached.label)}${RESET}`
+                    ? `${CYAN}${singleLine(attached.label)}${RESET}`
                     : `${DIM}none${RESET}`;
                 attachedLine = `  ${DIM}attached:${RESET} ${valueText}  ${DIM}[tab to cycle]${RESET}`;
             }
@@ -326,7 +345,7 @@ export function renderItemReview(state, cols, rows) {
         postLines.push(`  ${DIM}enter${RESET} submit  ${DIM}esc${RESET} cancel`);
     }
     else {
-        postLines.push(...renderActions(interaction, state.selectedAction, response));
+        postLines.push(...renderActions(interaction, state.selectedAction, maxW, response));
     }
     // Window the body
     const reservedRows = preLines.length + postLines.length + 1; // +1 for footer
@@ -365,21 +384,37 @@ export function renderItemReview(state, cols, rows) {
         lines.push('');
     lines.push(footer);
     // Final clamp (safety net for very small terminals)
-    if (lines.length > rows) {
-        return [...lines.slice(0, rows - 1), footer];
-    }
-    return lines;
+    const clamped = lines.length > rows
+        ? [...lines.slice(0, rows - 1), footer]
+        : lines;
+    // Content occupies maxW cols of body + 2 cols of left prefix — center the
+    // whole block when the terminal is wider than that.
+    return centerHorizontal(clamped, cols, maxW + 2);
 }
-function renderActions(interaction, selectedAction, existing) {
+function renderActions(interaction, selectedAction, maxW, existing) {
     const lines = [];
     const opts = interaction.options;
+    // Prefix on first row: "  X [s] " — 2 + 1 (cursor) + 1 + 3 ([s]) + 1 = 8 visible cols.
+    // Continuation rows align under the label so each option reads as a block.
+    const prefixWidth = 8;
+    const indent = ' '.repeat(prefixWidth);
+    const contentMax = Math.max(20, maxW - prefixWidth);
     for (let i = 0; i < opts.length; i++) {
         const o = opts[i];
         const cursor = i === selectedAction ? `${CYAN}▸${RESET}` : ' ';
         const sc = o.shortcut ?? ' ';
         const keyBadge = `${DIM}[${sc}]${RESET}`;
-        const desc = o.description ? ` ${DIM}— ${sanitize(o.description)}${RESET}` : '';
-        lines.push(`  ${cursor} ${keyBadge} ${sanitize(o.label)}${desc}`);
+        const labelLines = wrap(sanitize(o.label), contentMax);
+        for (let j = 0; j < labelLines.length; j++) {
+            const prefix = j === 0 ? `  ${cursor} ${keyBadge} ` : indent;
+            lines.push(`${prefix}${labelLines[j]}`);
+        }
+        if (o.description) {
+            const descLines = wrap(`— ${sanitize(o.description)}`, contentMax);
+            for (const dl of descLines) {
+                lines.push(`${indent}${DIM}${dl}${RESET}`);
+            }
+        }
     }
     if (interaction.allowFreetext && opts.length > 0) {
         const cursor = opts.length === selectedAction ? `${CYAN}▸${RESET}` : ' ';
@@ -435,7 +470,7 @@ export function renderFinal(state, cols, rows) {
     const lines = [...header, ...visible, ...footer];
     while (lines.length < rows)
         lines.push('');
-    return lines.slice(0, rows);
+    return centerHorizontal(lines.slice(0, rows), cols, maxW + 2);
 }
 export function responseSummary(r, interaction) {
     const opt = r.selectedOptionId

package/package.json

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