@compilr-dev/cli 0.4.0 → 0.5.0

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

@@ -0,0 +1,555 @@
+/**
+ * Ask User Overlay (Refactored)
+ *
+ * Modal overlay for presenting multi-question forms to the user.
+ * Uses InlineOverlay base class for consistent lifecycle management.
+ *
+ * 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 chalk from 'chalk';
+import { getStyles } from '../themes/index.js';
+import { InlineOverlay } from './base/inline-overlay.js';
+// =============================================================================
+// Overlay Implementation
+// =============================================================================
+class AskUserOverlayImpl extends InlineOverlay {
+    questions;
+    context;
+    constructor(options) {
+        super();
+        this.questions = options.questions;
+        this.context = options.context;
+    }
+    getInitialState() {
+        // Check if first question should auto-start in typing mode
+        const firstQ = this.questions[0];
+        const firstQAutoType = (firstQ.options?.length ?? 0) === 0 &&
+            firstQ.allowCustom !== false &&
+            firstQ.multiSelect !== true;
+        return {
+            currentQuestion: 0,
+            selectedIndex: 0,
+            inputBuffer: '',
+            isTypingCustom: firstQAutoType,
+            answers: {},
+            multiSelections: new Set(),
+            warningMessage: '',
+            isOnSubmitTab: false,
+        };
+    }
+    render() {
+        const s = getStyles();
+        const lines = [];
+        const cols = this.getTerminalWidth();
+        const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+        // Header
+        lines.push(border);
+        lines.push(' ' + s.primaryBold('Questions'));
+        lines.push('');
+        // Tab bar
+        lines.push(...this.renderTabBar());
+        lines.push('');
+        // Current question or Submit tab
+        if (this.state.isOnSubmitTab) {
+            lines.push(...this.renderSubmitTab());
+        }
+        else {
+            lines.push(...this.renderQuestion());
+        }
+        // Footer with instructions
+        lines.push(...this.renderFooter());
+        // 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(data) {
+        // Ctrl+C always cancels
+        if (this.isCtrlCKey(data)) {
+            return { type: 'close', result: this.getResult() };
+        }
+        // Handle Submit tab first
+        if (this.state.isOnSubmitTab) {
+            return this.handleSubmitTabKey(data);
+        }
+        // Handle typing mode
+        if (this.state.isTypingCustom) {
+            return this.handleTypingKey(data);
+        }
+        // Handle navigation mode
+        return this.handleNavigationKey(data);
+    }
+    getCleanupSummary(result) {
+        const s = 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() {
+        const s = getStyles();
+        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() {
+        const s = getStyles();
+        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() {
+        const s = getStyles();
+        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 ← or Tab to go back and answer.'));
+        }
+        return lines;
+    }
+    renderFooter() {
+        const s = getStyles();
+        const lines = [];
+        lines.push('');
+        if (this.state.isOnSubmitTab) {
+            lines.push(s.muted(' Enter Submit all · ←/Tab Go back · Esc Cancel'));
+        }
+        else if (this.state.isTypingCustom) {
+            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(' ↑↓ Navigate · Space Toggle · Enter Confirm · Tab Next · Esc Cancel'));
+            }
+            else {
+                lines.push(s.muted(' ↑↓ Navigate · Enter Select · Tab Next · Esc Cancel'));
+            }
+        }
+        return lines;
+    }
+    // ===========================================================================
+    // Private: Key Handlers
+    // ===========================================================================
+    handleSubmitTabKey(data) {
+        if (this.isEscapeKey(data)) {
+            return { type: 'close', result: this.getResult() };
+        }
+        if (this.isLeftArrowKey(data) || this.isTabKey(data)) {
+            this.prevQuestion();
+            return { type: 'continue' };
+        }
+        if (this.isEnterKey(data)) {
+            if (this.tryComplete()) {
+                return { type: 'close', result: this.getResult() };
+            }
+            // tryComplete sets warning and navigates to first unanswered
+        }
+        return { type: 'continue' };
+    }
+    handleTypingKey(data) {
+        const currentQ = this.questions[this.state.currentQuestion];
+        const options = currentQ.options ?? [];
+        if (this.isEscapeKey(data)) {
+            this.state.isTypingCustom = false;
+            this.state.inputBuffer = '';
+            return { type: 'continue' };
+        }
+        if (this.isUpArrowKey(data) && options.length > 0) {
+            this.state.isTypingCustom = false;
+            this.state.inputBuffer = '';
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+            return { type: 'continue' };
+        }
+        if (this.isDownArrowKey(data)) {
+            // Custom is last option, down arrow does nothing
+            return { type: 'continue' };
+        }
+        if (this.isEnterKey(data)) {
+            if (this.submitAnswer()) {
+                this.state.warningMessage = '';
+                this.nextQuestion();
+            }
+            return { type: 'continue' };
+        }
+        if (this.isBackspaceKey(data)) {
+            this.state.inputBuffer = this.state.inputBuffer.slice(0, -1);
+            return { type: 'continue' };
+        }
+        // Printable character
+        const char = this.getPrintableChar(data);
+        if (char) {
+            this.state.inputBuffer += char;
+        }
+        return { type: 'continue' };
+    }
+    handleNavigationKey(data) {
+        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 (this.isEscapeKey(data)) {
+            return { type: 'close', result: this.getResult() };
+        }
+        if (this.isUpArrowKey(data)) {
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+            if (!isMultiSelect && allowCustom && this.state.selectedIndex === customIndex) {
+                this.state.isTypingCustom = true;
+            }
+            return { type: 'continue' };
+        }
+        if (this.isDownArrowKey(data)) {
+            this.state.selectedIndex = Math.min(optionCount - 1, this.state.selectedIndex + 1);
+            if (!isMultiSelect && allowCustom && this.state.selectedIndex === customIndex) {
+                this.state.isTypingCustom = true;
+            }
+            return { type: 'continue' };
+        }
+        if (this.isLeftArrowKey(data)) {
+            this.prevQuestion();
+            return { type: 'continue' };
+        }
+        if (this.isRightArrowKey(data) || this.isTabKey(data)) {
+            this.nextQuestion();
+            return { type: 'continue' };
+        }
+        if (this.isSpaceKey(data) && isMultiSelect) {
+            if (this.state.multiSelections.has(this.state.selectedIndex)) {
+                this.state.multiSelections.delete(this.state.selectedIndex);
+            }
+            else {
+                this.state.multiSelections.add(this.state.selectedIndex);
+            }
+            return { type: 'continue' };
+        }
+        if (this.isEnterKey(data)) {
+            if (this.submitAnswer()) {
+                this.state.warningMessage = '';
+                this.nextQuestion();
+            }
+            return { type: 'continue' };
+        }
+        // Number keys 1-9
+        if (data.length === 1 && data[0] >= 0x31 && data[0] <= 0x39) {
+            const numIndex = data[0] - 0x31;
+            if (numIndex < optionCount) {
+                this.state.selectedIndex = numIndex;
+                if (!isMultiSelect) {
+                    if (this.submitAnswer()) {
+                        this.state.warningMessage = '';
+                        this.nextQuestion();
+                    }
+                }
+            }
+        }
+        return { type: 'continue' };
+    }
+    // ===========================================================================
+    // 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;
+    }
+}
+// =============================================================================
+// Main Export
+// =============================================================================
+/**
+ * Show the ask user overlay
+ */
+export async function showAskUserOverlay(options) {
+    const overlay = new AskUserOverlayImpl(options);
+    return overlay.show();
+}

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

@@ -1,8 +1,8 @@
 /**
- * Ask User Overlay
+ * Ask User Overlay (Refactored)
  *
  * Modal overlay for presenting multi-question forms to the user.
- * Used by the ask_user tool during /design and /refine workflows.
+ * Uses InlineOverlay base class for consistent lifecycle management.
  *
  * Features:
  * - Multiple questions with navigation (←/→ or Tab)