@compilr-dev/cli 0.4.0

package/dist/ui/ask-user-simple-overlay.js

@@ -0,0 +1,242 @@
+/**
+ * Ask User Simple Overlay
+ *
+ * Simplified modal overlay for single-question input.
+ * Used by the ask_user_simple tool during /sketch workflows.
+ *
+ * Features:
+ * - Single question (no tabs, no navigation)
+ * - Options to select from with arrow keys
+ * - Custom text input option
+ * - Simple, clean UI
+ */
+import chalk from 'chalk';
+import * as terminal from './terminal.js';
+import { getStyles } from '../themes/index.js';
+// =============================================================================
+// Rendering
+// =============================================================================
+function render(question, options, allowCustom, state, previousLineCount = 0, targetLineCount = 0) {
+    const s = getStyles();
+    const lines = [];
+    const cols = terminal.getTerminalWidth();
+    const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+    // Clear previous render
+    if (previousLineCount > 0) {
+        terminal.clearLinesAbove(previousLineCount);
+    }
+    // Header
+    lines.push(border);
+    lines.push(' ' + s.primaryBold('Sketch'));
+    lines.push('');
+    // Question
+    lines.push(chalk.bold(` ${question}`));
+    lines.push('');
+    // Options
+    const customIndex = options.length;
+    for (let i = 0; i < options.length; i++) {
+        const isCursor = state.selectedIndex === i && !state.isTypingCustom;
+        const prefix = isCursor ? ' ❯ ' : '   ';
+        const num = `${String(i + 1)}. `;
+        if (isCursor) {
+            lines.push(s.primary(prefix + num + options[i]));
+        }
+        else {
+            lines.push(s.muted(prefix + num + options[i]));
+        }
+    }
+    // Custom input option (if allowed)
+    if (allowCustom) {
+        const isCursor = state.selectedIndex === customIndex && !state.isTypingCustom;
+        const prefix = isCursor ? ' ❯ ' : '   ';
+        const num = `${String(options.length + 1)}. `;
+        if (state.isTypingCustom) {
+            // Show input field
+            lines.push(s.primary(prefix + num + 'Custom: ') + s.primaryBold(state.inputBuffer + '▋'));
+        }
+        else if (isCursor) {
+            lines.push(s.primary(prefix + num + 'Type something else...'));
+        }
+        else {
+            lines.push(s.muted(prefix + num + 'Type something else...'));
+        }
+    }
+    // Footer
+    lines.push('');
+    if (state.isTypingCustom) {
+        lines.push(s.muted(' Enter Submit · Esc Cancel'));
+    }
+    else {
+        lines.push(s.muted(' ↑↓ Navigate · Enter Select · s Skip · Esc Cancel'));
+    }
+    // Bottom border
+    lines.push(border);
+    // Pad with empty lines to maintain consistent height
+    while (lines.length < targetLineCount) {
+        lines.push('');
+    }
+    // Render all lines
+    terminal.write(lines.join('\n'));
+    return lines.length;
+}
+// =============================================================================
+// Main Export
+// =============================================================================
+/**
+ * Show the simple ask user overlay
+ */
+export async function showAskUserSimpleOverlay(options) {
+    const { question, options: choices = [], allowCustom = true } = options;
+    // If no predefined choices and custom is allowed, auto-start in typing mode
+    const autoTyping = choices.length === 0 && allowCustom;
+    const state = {
+        selectedIndex: autoTyping ? 0 : 0,
+        inputBuffer: '',
+        isTypingCustom: autoTyping,
+        cancelled: false,
+    };
+    let lineCount = 0;
+    let maxLineCount = 0;
+    // NOTE: Footer is already paused by the caller (index.ts handler calls sharedState.pauseFooter)
+    // Do NOT call pauseForOverlay() here - it causes double-pause issues
+    // The caller's pause already clears the footer from screen
+    // Text output is also buffered by repl.ts (not flushed until overlay closes)
+    // Ensure we start from a fresh line (like config-overlay does)
+    terminal.writeLine('');
+    terminal.hideCursor();
+    const wasRawMode = process.stdin.isRaw;
+    terminal.enableRawMode();
+    // Initial render
+    lineCount = render(question, choices, allowCustom, state, 0);
+    maxLineCount = Math.max(maxLineCount, lineCount);
+    // Helper: Get total option count
+    const getOptionCount = () => {
+        return allowCustom ? choices.length + 1 : choices.length;
+    };
+    return new Promise((resolve) => {
+        const cleanup = () => {
+            terminal.clearLinesAbove(maxLineCount);
+            terminal.writeLine('');
+            terminal.showCursor();
+            if (!wasRawMode) {
+                terminal.disableRawMode();
+            }
+            process.stdin.removeListener('data', handleData);
+            // NOTE: Footer resume is handled by the caller (index.ts) in the finally block
+        };
+        const handleData = (data) => {
+            const isEscape = data.length === 1 && data[0] === 0x1b;
+            const isUpArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x41;
+            const isDownArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x42;
+            const isCtrlC = data.length === 1 && data[0] === 0x03;
+            const isEnter = data.length === 1 && (data[0] === 0x0d || data[0] === 0x0a);
+            const isBackspace = data.length === 1 && (data[0] === 0x7f || data[0] === 0x08);
+            const isS = data.length === 1 && (data[0] === 0x73 || data[0] === 0x53); // 's' or 'S'
+            // Ctrl+C always cancels
+            if (isCtrlC) {
+                cleanup();
+                resolve({ answer: '', skipped: true });
+                return;
+            }
+            // If typing custom input
+            if (state.isTypingCustom) {
+                if (isEscape) {
+                    // Cancel custom input
+                    state.isTypingCustom = false;
+                    state.inputBuffer = '';
+                }
+                else if (isUpArrow && choices.length > 0) {
+                    // Exit typing mode and navigate up (only if there are other options)
+                    state.isTypingCustom = false;
+                    state.inputBuffer = '';
+                    state.selectedIndex = Math.max(0, state.selectedIndex - 1);
+                }
+                else if (isDownArrow) {
+                    // Exit typing mode (but stay on custom since it's last option)
+                    // This effectively does nothing but we handle it to be consistent
+                }
+                else if (isEnter) {
+                    // Submit custom input
+                    const custom = state.inputBuffer.trim();
+                    if (custom) {
+                        cleanup();
+                        resolve({ answer: custom, skipped: false });
+                        return;
+                    }
+                    // Empty - stay in custom mode
+                }
+                else if (isBackspace) {
+                    state.inputBuffer = state.inputBuffer.slice(0, -1);
+                }
+                else if (data.length === 1 && data[0] >= 0x20 && data[0] < 0x7f) {
+                    // Printable character
+                    state.inputBuffer += String.fromCharCode(data[0]);
+                }
+            }
+            else {
+                // Navigation mode
+                const optionCount = getOptionCount();
+                const customIndex = choices.length;
+                if (isEscape) {
+                    // Cancel overlay
+                    cleanup();
+                    resolve({ answer: '', skipped: true });
+                    return;
+                }
+                else if (isS) {
+                    // Skip question (only in navigation mode, not when typing)
+                    cleanup();
+                    resolve({ answer: '', skipped: true });
+                    return;
+                }
+                else if (isUpArrow) {
+                    state.selectedIndex = Math.max(0, state.selectedIndex - 1);
+                    // Auto-enable typing when navigating to custom option
+                    if (allowCustom && state.selectedIndex === customIndex) {
+                        state.isTypingCustom = true;
+                    }
+                }
+                else if (isDownArrow) {
+                    state.selectedIndex = Math.min(optionCount - 1, state.selectedIndex + 1);
+                    // Auto-enable typing when navigating to custom option
+                    if (allowCustom && state.selectedIndex === customIndex) {
+                        state.isTypingCustom = true;
+                    }
+                }
+                else if (isEnter) {
+                    if (state.selectedIndex < choices.length) {
+                        // Selected a predefined option
+                        cleanup();
+                        resolve({ answer: choices[state.selectedIndex], skipped: false });
+                        return;
+                    }
+                    else if (allowCustom && state.selectedIndex === customIndex) {
+                        // Enter custom input mode
+                        state.isTypingCustom = true;
+                    }
+                }
+                else if (data.length === 1 && data[0] >= 0x31 && data[0] <= 0x39) {
+                    // Number keys 1-9
+                    const numIndex = data[0] - 0x31; // 0-indexed
+                    if (numIndex < optionCount) {
+                        if (numIndex < choices.length) {
+                            // Select predefined option directly
+                            cleanup();
+                            resolve({ answer: choices[numIndex], skipped: false });
+                            return;
+                        }
+                        else if (allowCustom && numIndex === customIndex) {
+                            // Enter custom mode
+                            state.selectedIndex = customIndex;
+                            state.isTypingCustom = true;
+                        }
+                    }
+                }
+            }
+            // Re-render
+            lineCount = render(question, choices, allowCustom, state, maxLineCount, maxLineCount);
+            maxLineCount = Math.max(maxLineCount, lineCount);
+        };
+        process.stdin.on('data', handleData);
+    });
+}

package/dist/ui/backlog-overlay.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Backlog Overlay
+ *
+ * Modal overlay for viewing and managing the project backlog.
+ * Provides a UI for manually adding, editing, and filtering backlog items.
+ *
+ * Features:
+ * - Search by title/description
+ * - Filter tabs by type (All/Feature/Bug/Tech-Debt/Chore)
+ * - Pagination for large backlogs
+ * - Quick status toggle with Space
+ * - Add new items with wizard
+ */
+export interface BacklogOverlayResult {
+    modified: boolean;
+}
+export declare function showBacklogOverlay(): Promise<BacklogOverlayResult>;