@compilr-dev/cli 0.4.0

package/dist/ui/arch-type-overlay.js

@@ -0,0 +1,229 @@
+/**
+ * Architecture Type Selection Overlay
+ *
+ * Shows options for what type of architecture documentation to create.
+ * User selects from:
+ * - ADR (Architecture Decision Record)
+ * - System Diagram
+ * - Data Model
+ * - API Design
+ * - Custom topic
+ */
+import * as terminal from './terminal.js';
+import { getStyles } from '../themes/index.js';
+import { pauseForOverlay, resumeAfterOverlay } from './overlay-controller.js';
+const ARCH_OPTIONS = [
+    { key: '1', type: 'adr', label: 'Decision Record (ADR)', description: '"Why we chose X over Y"' },
+    { key: '2', type: 'diagram', label: 'System Diagram', description: 'Mermaid component diagram' },
+    { key: '3', type: 'data-model', label: 'Data Model', description: 'Entities and relationships' },
+    { key: '4', type: 'api', label: 'API Design', description: 'Endpoints and contracts' },
+    { key: '5', type: 'custom', label: 'Custom topic...', description: 'Specify your own' },
+];
+// =============================================================================
+// Rendering
+// =============================================================================
+function render(selectedIndex, 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.primary('Architecture Documentation'));
+    lines.push('');
+    // Question
+    lines.push(' What would you like to document?');
+    lines.push('');
+    // Options
+    for (let i = 0; i < ARCH_OPTIONS.length; i++) {
+        const opt = ARCH_OPTIONS[i];
+        const isCursor = selectedIndex === i;
+        const prefix = isCursor ? ' ❯ ' : '   ';
+        // Calculate max label width for alignment
+        const maxLabelLen = Math.max(...ARCH_OPTIONS.map((o) => o.label.length));
+        const paddedLabel = opt.label.padEnd(maxLabelLen + 2);
+        if (isCursor) {
+            lines.push(s.primary(`${prefix}${opt.key}. ${paddedLabel}`) + s.muted(opt.description));
+        }
+        else {
+            lines.push(s.muted(`${prefix}${opt.key}. ${paddedLabel}${opt.description}`));
+        }
+    }
+    // Footer
+    lines.push('');
+    lines.push(s.muted(' ↑↓ Navigate · Enter Select · Esc Cancel'));
+    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;
+}
+function renderCustomInput(inputValue, 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.primary('Custom Architecture Topic'));
+    lines.push('');
+    // Input field
+    lines.push(' Enter the topic you want to document:');
+    lines.push('');
+    lines.push(' ' + s.primary('> ') + inputValue + s.primary('_'));
+    lines.push('');
+    // Footer
+    lines.push(s.muted(' Enter to confirm · Esc to go back'));
+    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 architecture type selection overlay and return the user's choice.
+ */
+export async function showArchTypeOverlay() {
+    let selectedIndex = 0;
+    let lineCount = 0;
+    let maxLineCount = 0;
+    let mode = 'select';
+    let customInput = '';
+    // Pause footer animation
+    pauseForOverlay();
+    // Clear and prepare
+    terminal.clearToEndOfScreen();
+    terminal.writeLine('');
+    terminal.hideCursor();
+    const wasRawMode = process.stdin.isRaw;
+    terminal.enableRawMode();
+    // Initial render
+    lineCount = render(selectedIndex, 0);
+    maxLineCount = Math.max(maxLineCount, lineCount);
+    // Re-render to stabilize
+    lineCount = render(selectedIndex, lineCount, lineCount);
+    return new Promise((resolve) => {
+        const cleanup = () => {
+            terminal.clearLinesAbove(maxLineCount);
+            terminal.writeLine('');
+            terminal.showCursor();
+            if (!wasRawMode) {
+                terminal.disableRawMode();
+            }
+            process.stdin.removeListener('data', handleData);
+            resumeAfterOverlay();
+        };
+        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);
+            if (mode === 'select') {
+                // Ctrl+C or Escape cancels
+                if (isCtrlC || isEscape) {
+                    cleanup();
+                    resolve(null);
+                    return;
+                }
+                // Navigation
+                if (isUpArrow) {
+                    selectedIndex = Math.max(0, selectedIndex - 1);
+                }
+                else if (isDownArrow) {
+                    selectedIndex = Math.min(ARCH_OPTIONS.length - 1, selectedIndex + 1);
+                }
+                else if (isEnter) {
+                    const selected = ARCH_OPTIONS[selectedIndex];
+                    if (selected.type === 'custom') {
+                        // Switch to custom input mode
+                        mode = 'custom-input';
+                        customInput = '';
+                        terminal.showCursor();
+                        lineCount = renderCustomInput(customInput, maxLineCount, maxLineCount);
+                        maxLineCount = Math.max(maxLineCount, lineCount);
+                        return;
+                    }
+                    cleanup();
+                    resolve({ type: selected.type });
+                    return;
+                }
+                else if (data.length === 1 && data[0] >= 0x31 && data[0] <= 0x35) {
+                    // Number keys 1-5
+                    const numIndex = data[0] - 0x31; // 0-indexed
+                    if (numIndex < ARCH_OPTIONS.length) {
+                        const selected = ARCH_OPTIONS[numIndex];
+                        if (selected.type === 'custom') {
+                            mode = 'custom-input';
+                            customInput = '';
+                            terminal.showCursor();
+                            lineCount = renderCustomInput(customInput, maxLineCount, maxLineCount);
+                            maxLineCount = Math.max(maxLineCount, lineCount);
+                            return;
+                        }
+                        cleanup();
+                        resolve({ type: selected.type });
+                        return;
+                    }
+                }
+                // Re-render
+                lineCount = render(selectedIndex, maxLineCount, maxLineCount);
+                maxLineCount = Math.max(maxLineCount, lineCount);
+            }
+            else {
+                // Custom input mode
+                if (isCtrlC) {
+                    cleanup();
+                    resolve(null);
+                    return;
+                }
+                if (isEscape) {
+                    // Go back to select mode
+                    mode = 'select';
+                    terminal.hideCursor();
+                    lineCount = render(selectedIndex, maxLineCount, maxLineCount);
+                    maxLineCount = Math.max(maxLineCount, lineCount);
+                    return;
+                }
+                if (isEnter) {
+                    if (customInput.trim()) {
+                        cleanup();
+                        resolve({ type: 'custom', customTopic: customInput.trim() });
+                        return;
+                    }
+                    // Don't allow empty custom topic
+                    return;
+                }
+                if (isBackspace) {
+                    customInput = customInput.slice(0, -1);
+                }
+                else if (data.length === 1 && data[0] >= 0x20 && data[0] <= 0x7e) {
+                    // Printable ASCII
+                    customInput += String.fromCharCode(data[0]);
+                }
+                // Re-render
+                lineCount = renderCustomInput(customInput, maxLineCount, maxLineCount);
+                maxLineCount = Math.max(maxLineCount, lineCount);
+            }
+        };
+        process.stdin.on('data', handleData);
+    });
+}

package/dist/ui/ask-user-overlay.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Ask User Overlay
+ *
+ * Modal overlay for presenting multi-question forms to the user.
+ * Used by the ask_user tool during /design and /refine workflows.
+ *
+ * Features:
+ * - Multiple questions with navigation (←/→ or Tab)
+ * - Options to select from with arrow keys
+ * - Custom text input option
+ * - Multi-select support
+ * - Progress indicator showing answered questions
+ */
+import type { AskUserQuestion } from '../tools/ask-user.js';
+export interface AskUserOptions {
+    questions: AskUserQuestion[];
+    context?: string;
+}
+export interface AskUserResult {
+    answers: Record<string, string | string[]>;
+    skipped: string[];
+}
+/**
+ * Show the ask user overlay
+ */
+export declare function showAskUserOverlay(options: AskUserOptions): Promise<AskUserResult>;