@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/overlay/impl/ask-user-overlay-v2.js

@@ -0,0 +1,584 @@
+/**
+ * Ask User Overlay V2
+ *
+ * Modal overlay for presenting multi-question forms to the user.
+ * Uses BaseOverlayV2 for TerminalUI integration.
+ *
+ * Features:
+ * - Multiple questions with navigation (Left/Right or Tab)
+ * - Options to select from with arrow keys
+ * - Custom text input option
+ * - Multi-select support
+ * - Progress indicator showing answered questions
+ * - Submit tab at the end
+ */
+import chalk from 'chalk';
+import { BaseOverlayV2, renderBorder } from '../../base/index.js';
+// =============================================================================
+// Overlay Implementation
+// =============================================================================
+export class AskUserOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'ask-user-overlay-v2';
+    questions;
+    context;
+    constructor(options) {
+        // Check if first question should auto-start in typing mode
+        const firstQ = options.questions[0];
+        const firstQAutoType = firstQ !== undefined &&
+            (firstQ.options?.length ?? 0) === 0 &&
+            firstQ.allowCustom !== false &&
+            firstQ.multiSelect !== true;
+        super({
+            currentQuestion: 0,
+            selectedIndex: 0,
+            inputBuffer: '',
+            isTypingCustom: firstQAutoType,
+            answers: {},
+            multiSelections: new Set(),
+            warningMessage: '',
+            isOnSubmitTab: false,
+        });
+        this.questions = options.questions;
+        this.context = options.context;
+        this.minHeight = 20; // Prevent jitter with multi-question forms
+    }
+    renderContent(context) {
+        const s = context.styles;
+        const lines = [];
+        const cols = context.width;
+        const border = renderBorder(cols, s);
+        // Header
+        lines.push(border);
+        lines.push(' ' + s.primaryBold('Questions'));
+        lines.push('');
+        // Tab bar
+        lines.push(...this.renderTabBar(s));
+        lines.push('');
+        // Current question or Submit tab
+        if (this.state.isOnSubmitTab) {
+            lines.push(...this.renderSubmitTab(s));
+        }
+        else {
+            lines.push(...this.renderQuestion(s));
+        }
+        // Footer with instructions
+        lines.push(...this.renderInstructions(s));
+        // Warning message if present
+        if (this.state.warningMessage) {
+            lines.push('');
+            lines.push(s.warning(` ! ${this.state.warningMessage}`));
+        }
+        // Bottom border
+        lines.push(border);
+        return lines;
+    }
+    handleKey(key) {
+        // Ctrl+C always cancels
+        if (key.ctrl && key.name === 'c') {
+            return this.close(this.getResult());
+        }
+        // Handle Submit tab first
+        if (this.state.isOnSubmitTab) {
+            return this.handleSubmitTabKey(key);
+        }
+        // Handle typing mode
+        if (this.state.isTypingCustom) {
+            return this.handleTypingKey(key);
+        }
+        // Handle navigation mode
+        return this.handleNavigationKey(key);
+    }
+    /**
+     * Summary shown after overlay closes.
+     */
+    getCloseSummary(result) {
+        const s = this.getStyles();
+        const answeredCount = Object.keys(result.answers).length;
+        const skippedCount = result.skipped.length;
+        if (answeredCount === 0) {
+            return s.muted('Questions: ') + s.warning('Cancelled');
+        }
+        if (skippedCount > 0) {
+            return s.muted('Questions: ') + s.success(`${String(answeredCount)} answered`) + s.muted(`, ${String(skippedCount)} skipped`);
+        }
+        return s.muted('Questions: ') + s.success(`${String(answeredCount)} answered`);
+    }
+    // ===========================================================================
+    // Private: Rendering Helpers
+    // ===========================================================================
+    renderTabBar(s) {
+        const lines = [];
+        let tabLine = ' ';
+        for (let i = 0; i < this.questions.length; i++) {
+            const q = this.questions[i];
+            const hasAnswer = q.id in this.state.answers;
+            const isCurrent = i === this.state.currentQuestion && !this.state.isOnSubmitTab;
+            const label = q.header || q.id.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+            if (isCurrent) {
+                tabLine += s.selected(` ${label} `) + ' ';
+            }
+            else if (hasAnswer) {
+                tabLine += s.success(`* ${label}`) + ' ';
+            }
+            else {
+                tabLine += s.muted(` ${label} `) + ' ';
+            }
+        }
+        // Add Submit tab
+        const allAnswered = this.questions.every((q) => q.id in this.state.answers);
+        if (this.state.isOnSubmitTab) {
+            tabLine += s.selected(' Submit ');
+        }
+        else if (allAnswered) {
+            tabLine += s.success(' Submit ');
+        }
+        else {
+            tabLine += s.muted(' Submit ');
+        }
+        lines.push(tabLine);
+        return lines;
+    }
+    renderQuestion(s) {
+        const lines = [];
+        const question = this.questions[this.state.currentQuestion];
+        const questionIndex = this.state.currentQuestion;
+        const totalQuestions = this.questions.length;
+        // Context if provided (only on first question)
+        if (this.context && questionIndex === 0) {
+            lines.push(s.muted(' ' + this.context));
+            lines.push('');
+        }
+        // Question number and text
+        lines.push(chalk.bold(` [${String(questionIndex + 1)}/${String(totalQuestions)}] ${question.question}`));
+        lines.push('');
+        // Options
+        const options = question.options ?? [];
+        const allowCustom = question.allowCustom !== false;
+        const isMultiSelect = question.multiSelect === true;
+        const customIndex = options.length;
+        // Get existing answer info
+        const { answeredOptions, customAnswerValue } = this.getAnswerInfo(question);
+        for (let i = 0; i < options.length; i++) {
+            const isCursor = this.state.selectedIndex === i;
+            const isMultiSelected = isMultiSelect && this.state.multiSelections.has(i);
+            const isAnswered = answeredOptions.has(i);
+            const prefix = isCursor ? ' > ' : '   ';
+            let marker = '';
+            if (isMultiSelect) {
+                marker = isMultiSelected ? '[*] ' : '[ ] ';
+            }
+            else if (isAnswered) {
+                marker = '* ';
+            }
+            const label = `${String(i + 1)}. ${options[i]}`;
+            if (isCursor) {
+                lines.push(s.primary(prefix + marker + label));
+            }
+            else if (isMultiSelected || isAnswered) {
+                lines.push(s.success(prefix + marker + label));
+            }
+            else {
+                lines.push(s.muted(prefix + marker + label));
+            }
+        }
+        // Custom option
+        if (allowCustom) {
+            const isCursor = this.state.selectedIndex === customIndex;
+            const prefix = isCursor ? ' > ' : '   ';
+            const hasCustomAnswer = customAnswerValue !== '' || this.state.inputBuffer !== '';
+            const displayValue = this.state.inputBuffer || customAnswerValue;
+            if (this.state.isTypingCustom) {
+                lines.push(s.primary(prefix + 'Custom: ' + this.state.inputBuffer + '_'));
+            }
+            else if (hasCustomAnswer) {
+                const marker = isMultiSelect ? '[*] ' : '* ';
+                const label = `${String(options.length + 1)}. Custom: "${displayValue}"`;
+                lines.push(isCursor ? s.primary(prefix + marker + label) : s.success(prefix + marker + label));
+            }
+            else {
+                const label = `${String(options.length + 1)}. Type something custom...`;
+                lines.push(isCursor ? s.primary(prefix + label) : s.muted(prefix + label));
+            }
+        }
+        return lines;
+    }
+    renderSubmitTab(s) {
+        const lines = [];
+        lines.push('');
+        lines.push(chalk.bold(' Ready to submit?'));
+        lines.push('');
+        const answeredCount = Object.keys(this.state.answers).length;
+        const totalCount = this.questions.length;
+        const allAnswered = answeredCount === totalCount;
+        if (allAnswered) {
+            lines.push(s.success(` * All ${String(totalCount)} questions answered`));
+            lines.push('');
+            lines.push(' ' + s.muted('Press Enter to submit your answers.'));
+        }
+        else {
+            const unansweredCount = totalCount - answeredCount;
+            lines.push(s.warning(` ! ${String(unansweredCount)} of ${String(totalCount)} questions not answered`));
+            lines.push('');
+            lines.push(' ' + s.muted('Unanswered:'));
+            for (const q of this.questions) {
+                if (!(q.id in this.state.answers)) {
+                    const label = q.header || q.id.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+                    lines.push('   ' + s.muted(`- ${label}`));
+                }
+            }
+            lines.push('');
+            lines.push(' ' + s.muted('Press Left or Tab to go back and answer.'));
+        }
+        return lines;
+    }
+    renderInstructions(s) {
+        const lines = [];
+        lines.push('');
+        if (this.state.isOnSubmitTab) {
+            lines.push(s.muted(' Enter Submit all | Left/Tab Go back | Esc Cancel'));
+        }
+        else if (this.state.isTypingCustom) {
+            const currentQ = this.questions[this.state.currentQuestion];
+            if (currentQ.multiSelect === true) {
+                lines.push(s.muted(' Enter Done typing | Up Navigate | Esc Clear custom'));
+            }
+            else {
+                lines.push(s.muted(' Enter Submit | Esc Cancel custom'));
+            }
+        }
+        else {
+            const currentQ = this.questions[this.state.currentQuestion];
+            if (currentQ.multiSelect === true) {
+                lines.push(s.muted(' Up/Down Navigate | Space Toggle | Enter Confirm | Tab Next | Esc Cancel'));
+            }
+            else {
+                lines.push(s.muted(' Up/Down Navigate | Enter Select | Tab Next | Esc Cancel'));
+            }
+        }
+        return lines;
+    }
+    // ===========================================================================
+    // Private: Key Handlers
+    // ===========================================================================
+    handleSubmitTabKey(key) {
+        if (key.name === 'escape') {
+            return this.close(this.getResult());
+        }
+        if (key.name === 'left' || key.name === 'tab') {
+            this.prevQuestion();
+            return this.rerender();
+        }
+        if (key.name === 'return') {
+            if (this.tryComplete()) {
+                return this.close(this.getResult());
+            }
+            // tryComplete sets warning and navigates to first unanswered
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    handleTypingKey(key) {
+        const currentQ = this.questions[this.state.currentQuestion];
+        const options = currentQ.options ?? [];
+        if (key.name === 'escape') {
+            this.state.isTypingCustom = false;
+            this.state.inputBuffer = '';
+            return this.rerender();
+        }
+        if (key.name === 'up' && options.length > 0) {
+            this.state.isTypingCustom = false;
+            this.state.inputBuffer = '';
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+            return this.rerender();
+        }
+        if (key.name === 'down') {
+            // Custom is last option, down arrow does nothing
+            return this.noAction();
+        }
+        if (key.name === 'return') {
+            const isMultiSelect = currentQ.multiSelect === true;
+            if (isMultiSelect) {
+                // In multi-select: Enter just confirms the custom text and exits typing mode
+                // The custom option stays selected, user can continue selecting other options
+                if (this.state.inputBuffer.trim()) {
+                    // Custom text entered - keep it and exit typing mode
+                    this.state.isTypingCustom = false;
+                }
+                else {
+                    // No text - deselect custom option and exit typing mode
+                    this.state.multiSelections.delete(options.length);
+                    this.state.isTypingCustom = false;
+                }
+                return this.rerender();
+            }
+            else {
+                // Single-select: submit answer and move to next question
+                if (this.submitAnswer()) {
+                    this.state.warningMessage = '';
+                    this.nextQuestion();
+                }
+                return this.rerender();
+            }
+        }
+        if (key.name === 'backspace') {
+            this.state.inputBuffer = this.state.inputBuffer.slice(0, -1);
+            return this.rerender();
+        }
+        // Printable character
+        if (key.char && key.char.length === 1 && !key.ctrl && !key.meta) {
+            this.state.inputBuffer += key.char;
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    handleNavigationKey(key) {
+        const optionCount = this.getOptionCount();
+        const currentQ = this.questions[this.state.currentQuestion];
+        const isMultiSelect = currentQ.multiSelect === true;
+        const options = currentQ.options ?? [];
+        const allowCustom = currentQ.allowCustom !== false;
+        const customIndex = options.length;
+        if (key.name === 'escape') {
+            return this.close(this.getResult());
+        }
+        if (key.name === 'up') {
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+            if (!isMultiSelect && allowCustom && this.state.selectedIndex === customIndex) {
+                this.state.isTypingCustom = true;
+            }
+            return this.rerender();
+        }
+        if (key.name === 'down') {
+            this.state.selectedIndex = Math.min(optionCount - 1, this.state.selectedIndex + 1);
+            if (!isMultiSelect && allowCustom && this.state.selectedIndex === customIndex) {
+                this.state.isTypingCustom = true;
+            }
+            return this.rerender();
+        }
+        if (key.name === 'left') {
+            this.prevQuestion();
+            return this.rerender();
+        }
+        if (key.name === 'right' || key.name === 'tab') {
+            this.nextQuestion();
+            return this.rerender();
+        }
+        if (key.name === 'space' && isMultiSelect) {
+            const isOnCustom = allowCustom && this.state.selectedIndex === customIndex;
+            if (this.state.multiSelections.has(this.state.selectedIndex)) {
+                // Deselect
+                this.state.multiSelections.delete(this.state.selectedIndex);
+                if (isOnCustom) {
+                    this.state.inputBuffer = '';
+                }
+            }
+            else {
+                // Select
+                this.state.multiSelections.add(this.state.selectedIndex);
+                if (isOnCustom) {
+                    // Start typing mode for custom input
+                    this.state.isTypingCustom = true;
+                }
+            }
+            return this.rerender();
+        }
+        if (key.name === 'return') {
+            if (this.submitAnswer()) {
+                this.state.warningMessage = '';
+                this.nextQuestion();
+            }
+            return this.rerender();
+        }
+        // Number keys 1-9 reserved for tab navigation (jump to question N)
+        if (key.char && key.char >= '1' && key.char <= '9') {
+            const tabIndex = parseInt(key.char, 10) - 1;
+            if (tabIndex < this.questions.length) {
+                this.state.currentQuestion = tabIndex;
+                this.state.isOnSubmitTab = false;
+                this.restoreFromAnswer();
+                return this.rerender();
+            }
+            else if (tabIndex === this.questions.length) {
+                // Jump to Submit tab
+                this.state.isOnSubmitTab = true;
+                this.state.isTypingCustom = false;
+                this.state.inputBuffer = '';
+                return this.rerender();
+            }
+        }
+        return this.noAction();
+    }
+    // ===========================================================================
+    // Private: Helper Methods
+    // ===========================================================================
+    getResult() {
+        const skipped = this.questions.filter((q) => !(q.id in this.state.answers)).map((q) => q.id);
+        return {
+            answers: this.state.answers,
+            skipped,
+        };
+    }
+    getOptionCount() {
+        const q = this.questions[this.state.currentQuestion];
+        const optionCount = q.options?.length ?? 0;
+        const allowCustom = q.allowCustom !== false;
+        return allowCustom ? optionCount + 1 : optionCount;
+    }
+    getAnswerInfo(question) {
+        const options = question.options ?? [];
+        const isMultiSelect = question.multiSelect === true;
+        const answeredOptions = new Set();
+        let customAnswerValue = '';
+        if (question.id in this.state.answers) {
+            const existingAnswer = this.state.answers[question.id];
+            if (isMultiSelect && Array.isArray(existingAnswer)) {
+                for (const ans of existingAnswer) {
+                    const idx = options.indexOf(ans);
+                    if (idx >= 0) {
+                        answeredOptions.add(idx);
+                    }
+                    else {
+                        customAnswerValue = ans;
+                    }
+                }
+            }
+            else if (typeof existingAnswer === 'string') {
+                const idx = options.indexOf(existingAnswer);
+                if (idx >= 0) {
+                    answeredOptions.add(idx);
+                }
+                else {
+                    customAnswerValue = existingAnswer;
+                }
+            }
+        }
+        return { answeredOptions, customAnswerValue };
+    }
+    restoreFromAnswer() {
+        const q = this.questions[this.state.currentQuestion];
+        const options = q.options ?? [];
+        const isMultiSelect = q.multiSelect === true;
+        const allowCustom = q.allowCustom !== false;
+        // Reset state first
+        this.state.selectedIndex = 0;
+        this.state.inputBuffer = '';
+        this.state.isTypingCustom = false;
+        this.state.multiSelections.clear();
+        if (!(q.id in this.state.answers)) {
+            // No existing answer - check if we should auto-type
+            if (options.length === 0 && allowCustom && !isMultiSelect) {
+                this.state.isTypingCustom = true;
+            }
+            return;
+        }
+        const existingAnswer = this.state.answers[q.id];
+        if (isMultiSelect && Array.isArray(existingAnswer)) {
+            for (const answer of existingAnswer) {
+                const idx = options.indexOf(answer);
+                if (idx >= 0) {
+                    this.state.multiSelections.add(idx);
+                }
+                else {
+                    this.state.multiSelections.add(options.length);
+                    this.state.inputBuffer = answer;
+                }
+            }
+            if (this.state.multiSelections.size > 0) {
+                this.state.selectedIndex = Math.min(...this.state.multiSelections);
+            }
+        }
+        else if (typeof existingAnswer === 'string') {
+            const idx = options.indexOf(existingAnswer);
+            if (idx >= 0) {
+                this.state.selectedIndex = idx;
+            }
+            else {
+                this.state.selectedIndex = options.length;
+                this.state.inputBuffer = existingAnswer;
+            }
+        }
+    }
+    nextQuestion() {
+        if (this.state.isOnSubmitTab) {
+            return;
+        }
+        if (this.state.currentQuestion < this.questions.length - 1) {
+            this.state.currentQuestion++;
+            this.restoreFromAnswer();
+        }
+        else {
+            // On last question - move to Submit tab
+            this.state.isOnSubmitTab = true;
+            this.state.isTypingCustom = false;
+            this.state.inputBuffer = '';
+        }
+    }
+    prevQuestion() {
+        if (this.state.isOnSubmitTab) {
+            this.state.isOnSubmitTab = false;
+            this.restoreFromAnswer();
+            return;
+        }
+        if (this.state.currentQuestion > 0) {
+            this.state.currentQuestion--;
+            this.restoreFromAnswer();
+        }
+    }
+    tryComplete() {
+        const unanswered = this.questions.filter((q) => !(q.id in this.state.answers));
+        if (unanswered.length === 0) {
+            this.state.warningMessage = '';
+            return true;
+        }
+        // Navigate to first unanswered question and show warning
+        const firstUnansweredIndex = this.questions.findIndex((q) => !(q.id in this.state.answers));
+        this.state.warningMessage = `${String(unanswered.length)} question${unanswered.length > 1 ? 's' : ''} unanswered. Please answer all questions.`;
+        this.state.currentQuestion = firstUnansweredIndex;
+        this.state.isOnSubmitTab = false;
+        this.restoreFromAnswer();
+        return false;
+    }
+    submitAnswer() {
+        const q = this.questions[this.state.currentQuestion];
+        const options = q.options ?? [];
+        const allowCustom = q.allowCustom !== false;
+        const isMultiSelect = q.multiSelect === true;
+        const customIndex = options.length;
+        if (isMultiSelect) {
+            const selectedAnswers = [];
+            for (const idx of this.state.multiSelections) {
+                if (idx < options.length) {
+                    selectedAnswers.push(options[idx]);
+                }
+            }
+            if (this.state.multiSelections.has(customIndex) && this.state.inputBuffer.trim()) {
+                selectedAnswers.push(this.state.inputBuffer.trim());
+            }
+            if (selectedAnswers.length > 0) {
+                this.state.answers[q.id] = selectedAnswers;
+                return true;
+            }
+            return false;
+        }
+        else {
+            if (this.state.isTypingCustom) {
+                const custom = this.state.inputBuffer.trim();
+                if (custom) {
+                    this.state.answers[q.id] = custom;
+                    return true;
+                }
+                return false;
+            }
+            else if (this.state.selectedIndex < options.length) {
+                this.state.answers[q.id] = options[this.state.selectedIndex];
+                return true;
+            }
+            else if (allowCustom && this.state.selectedIndex === customIndex) {
+                this.state.isTypingCustom = true;
+                return false;
+            }
+        }
+        return false;
+    }
+}

package/dist/ui/overlay/impl/ask-user-simple-overlay-v2.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Ask User Simple Overlay V2
+ *
+ * Simplified modal overlay for single-question input.
+ * Uses BaseOverlayV2 for TerminalUI integration.
+ *
+ * Features:
+ * - Single question (no tabs, no navigation)
+ * - Options to select from with arrow keys
+ * - Custom text input option
+ * - Simple, clean UI
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+interface SimpleState {
+    /** Selected option index */
+    selectedIndex: number;
+    /** Custom input buffer for free-text */
+    inputBuffer: string;
+    /** Whether currently typing custom input */
+    isTypingCustom: boolean;
+}
+export interface AskUserSimpleOptionsV2 {
+    question: string;
+    options?: string[];
+    allowCustom?: boolean;
+}
+export interface AskUserSimpleResultV2 {
+    answer: string;
+    skipped: boolean;
+}
+export declare class AskUserSimpleOverlayV2 extends BaseOverlayV2<SimpleState, AskUserSimpleResultV2> {
+    readonly type: "inline";
+    readonly id = "ask-user-simple-overlay-v2";
+    private readonly question;
+    private readonly choices;
+    private readonly allowCustom;
+    constructor(options: AskUserSimpleOptionsV2);
+    protected renderContent(context: RenderContext): string[];
+    handleKey(key: KeyEvent): OverlayAction<AskUserSimpleResultV2>;
+    /**
+     * Summary shown after overlay closes.
+     */
+    getCloseSummary(result: AskUserSimpleResultV2): string | null;
+}
+export {};