@compilr-dev/cli 0.5.0 → 0.5.1

package/dist/ui/init-overlay.js

@@ -1,604 +0,0 @@
-/**
- * Init Overlay (Refactored)
- *
- * Modal overlay for the /init wizard - creates new projects with structured workflow.
- * Uses InlineOverlay base class for consistent lifecycle management.
- *
- * Steps:
- *   0. Project type (new vs existing)
- *   1. Project name
- *   2. Description
- *   3. Repo pattern (single vs two-repo)
- *   4. Tech stack
- *   5. Coding standards
- *   6. Initialize git?
- *   7. Track with project database?
- *   8. Workflow mode (if tracking enabled)
- *   9. Confirmation
- */
-import chalk from 'chalk';
-import * as terminal from './terminal.js';
-import { getStyles } from '../themes/index.js';
-import { InlineOverlay } from './base/inline-overlay.js';
-import { TECH_STACK_LABELS, CODING_STANDARDS_LABELS, REPO_PATTERN_LABELS, generateProject, isValidProjectName, projectExists, } from '../templates/index.js';
-import { getProjectsPath, ensureProjectsDirectory } from '../settings/paths.js';
-// =============================================================================
-// Constants
-// =============================================================================
-const TECH_STACK_OPTIONS = ['react-node-pg', 'react-python-pg', 'vue-node-pg', 'custom'];
-const CODING_STANDARDS_OPTIONS = ['strict', 'relaxed', 'custom'];
-const REPO_PATTERN_OPTIONS = ['single', 'two-repo'];
-const WORKFLOW_MODE_OPTIONS = ['flexible', 'guided'];
-const WORKFLOW_MODE_LABELS = {
-    flexible: 'Flexible (user-driven, exploratory)',
-    guided: 'Guided (structured step-by-step workflow)',
-};
-// =============================================================================
-// Rendering Helpers
-// =============================================================================
-function renderHeader(step) {
-    const s = getStyles();
-    const lines = [];
-    const cols = terminal.getTerminalWidth();
-    lines.push(s.muted('─'.repeat(Math.max(1, cols - 1))));
-    lines.push(' ' + s.primaryBold('Initialize New Project') + s.muted(` [${String(step)}/9]`));
-    lines.push('');
-    return lines;
-}
-function renderFooter(step) {
-    const s = getStyles();
-    const lines = [];
-    lines.push('');
-    if (step === 0) {
-        lines.push(s.muted(' ↑↓/jk Navigate · Enter Select · q/Esc Cancel'));
-    }
-    else if (step === 9) {
-        lines.push(s.muted(' ↑↓/jk Navigate · Enter Confirm · Esc Back'));
-    }
-    else if (isSelectionStep(step)) {
-        lines.push(s.muted(' ↑↓/jk Navigate · Enter Select · Esc Back'));
-    }
-    else {
-        lines.push(s.muted(' Enter Confirm · Esc Back'));
-    }
-    return lines;
-}
-function renderSelectionOption(index, selectedIndex, label, disabled = false) {
-    const s = getStyles();
-    const isSelected = index === selectedIndex;
-    const prefix = isSelected ? ' ❯ ' : '   ';
-    if (disabled) {
-        return s.muted(prefix + label + ' (coming soon)');
-    }
-    return isSelected ? s.primary(prefix + label) : s.muted(prefix + label);
-}
-// =============================================================================
-// Step Renderers
-// =============================================================================
-function renderStep0(state) {
-    const s = getStyles();
-    const lines = [];
-    lines.push(chalk.bold(' What would you like to do?'));
-    lines.push('');
-    lines.push(renderSelectionOption(0, state.selectedIndex, '1. Start a new project'));
-    lines.push(renderSelectionOption(1, state.selectedIndex, '2. Add workflow to existing project', true));
-    lines.push('');
-    lines.push(s.muted(' Start fresh with a structured project layout'));
-    lines.push(s.muted(' optimized for AI-assisted development.'));
-    return lines;
-}
-function renderStep1(state) {
-    const s = getStyles();
-    const lines = [];
-    lines.push(chalk.bold(' Project name'));
-    lines.push('');
-    lines.push(` > ${state.inputBuffer}█`);
-    lines.push('');
-    if (state.error) {
-        lines.push(s.error(` ${state.error}`));
-    }
-    else {
-        lines.push(s.muted(' Use lowercase letters, numbers, hyphens (e.g., my-saas-app)'));
-        lines.push(s.muted(' 2-50 characters, must start with a letter'));
-    }
-    return lines;
-}
-function renderStep2(state) {
-    const s = getStyles();
-    const lines = [];
-    lines.push(chalk.bold(' What are you building?'));
-    lines.push('');
-    lines.push(` > ${state.inputBuffer}█`);
-    lines.push('');
-    if (state.error) {
-        lines.push(s.error(` ${state.error}`));
-    }
-    else {
-        lines.push(s.muted(' Brief description (1-2 sentences)'));
-        lines.push(s.muted(' Example: "A task management SaaS for small teams"'));
-    }
-    return lines;
-}
-function renderStep3(state) {
-    const s = getStyles();
-    const lines = [];
-    lines.push(chalk.bold(' Documentation structure'));
-    lines.push('');
-    for (let i = 0; i < REPO_PATTERN_OPTIONS.length; i++) {
-        const pattern = REPO_PATTERN_OPTIONS[i];
-        lines.push(renderSelectionOption(i, state.selectedIndex, `${String(i + 1)}. ${REPO_PATTERN_LABELS[pattern]}`));
-    }
-    lines.push('');
-    lines.push(s.muted(' Single repo: All files in one repository'));
-    lines.push(s.muted(' Two repos: Code and docs in separate repositories'));
-    return lines;
-}
-function renderStep4(state) {
-    const s = getStyles();
-    const lines = [];
-    lines.push(chalk.bold(' Tech stack'));
-    lines.push('');
-    for (let i = 0; i < TECH_STACK_OPTIONS.length; i++) {
-        const stack = TECH_STACK_OPTIONS[i];
-        lines.push(renderSelectionOption(i, state.selectedIndex, `${String(i + 1)}. ${TECH_STACK_LABELS[stack]}`));
-    }
-    lines.push('');
-    lines.push(s.muted(' Choose a preset or configure later'));
-    return lines;
-}
-function renderStep5(state) {
-    const s = getStyles();
-    const lines = [];
-    lines.push(chalk.bold(' Coding standards preset'));
-    lines.push('');
-    for (let i = 0; i < CODING_STANDARDS_OPTIONS.length; i++) {
-        const standard = CODING_STANDARDS_OPTIONS[i];
-        lines.push(renderSelectionOption(i, state.selectedIndex, `${String(i + 1)}. ${CODING_STANDARDS_LABELS[standard]}`));
-    }
-    lines.push('');
-    lines.push(s.muted(' Strict: Full TypeScript with strict mode + ESLint'));
-    lines.push(s.muted(' Relaxed: TypeScript with basic strict mode'));
-    lines.push(s.muted(' Custom: Configure your own standards later'));
-    return lines;
-}
-function renderStep6(state) {
-    const s = getStyles();
-    const lines = [];
-    lines.push(chalk.bold(' Initialize git repository?'));
-    lines.push('');
-    lines.push(renderSelectionOption(0, state.selectedIndex, 'Yes'));
-    lines.push(renderSelectionOption(1, state.selectedIndex, 'No'));
-    lines.push('');
-    lines.push(s.muted(' Creates git repo with initial commit'));
-    return lines;
-}
-function renderStep7(state) {
-    const s = getStyles();
-    const lines = [];
-    lines.push(chalk.bold(' Track with project database?'));
-    lines.push('');
-    lines.push(renderSelectionOption(0, state.selectedIndex, 'Yes (recommended)'));
-    lines.push(renderSelectionOption(1, state.selectedIndex, 'No'));
-    lines.push('');
-    lines.push(s.muted(' Enables persistent project tracking, backlog management,'));
-    lines.push(s.muted(' and workflow features across sessions.'));
-    return lines;
-}
-function renderStep8(state) {
-    const s = getStyles();
-    const lines = [];
-    lines.push(chalk.bold(' Workflow mode'));
-    lines.push('');
-    for (let i = 0; i < WORKFLOW_MODE_OPTIONS.length; i++) {
-        const mode = WORKFLOW_MODE_OPTIONS[i];
-        const suffix = i === 0 ? ' (recommended)' : '';
-        lines.push(renderSelectionOption(i, state.selectedIndex, `${String(i + 1)}. ${WORKFLOW_MODE_LABELS[mode]}${suffix}`));
-    }
-    lines.push('');
-    lines.push(s.muted(' Flexible: Work at your own pace, agent responds to requests'));
-    lines.push(s.muted(' Guided: Agent suggests next steps, tracks work item progress'));
-    return lines;
-}
-function renderStep9(state) {
-    const s = getStyles();
-    const lines = [];
-    lines.push(chalk.bold(' Ready to create project?'));
-    lines.push('');
-    lines.push(` Project:     ${s.primary(state.projectName)}`);
-    lines.push(` Location:    ${s.primary('./' + state.projectName + '/')}`);
-    lines.push(` Structure:   ${s.primary(state.repoPattern === 'single' ? 'Single repo' : 'Two repos')}`);
-    lines.push(` Tech:        ${s.primary(state.techStack ? TECH_STACK_LABELS[state.techStack] : 'Not set')}`);
-    lines.push(` Standards:   ${s.primary(state.codingStandards ? CODING_STANDARDS_LABELS[state.codingStandards] : 'Not set')}`);
-    lines.push(` Git:         ${s.primary(state.initGit ? 'Yes' : 'No')}`);
-    lines.push(` DB Tracking: ${s.primary(state.trackInDatabase ? 'Yes' : 'No')}`);
-    if (state.trackInDatabase) {
-        lines.push(` Workflow:    ${s.primary(WORKFLOW_MODE_LABELS[state.workflowMode])}`);
-    }
-    if (state.repoPattern === 'two-repo') {
-        lines.push('');
-        lines.push(s.muted(` Docs repo:   ./${state.projectName}-docs/`));
-    }
-    lines.push('');
-    if (state.error) {
-        lines.push(s.error(` ${state.error}`));
-        lines.push('');
-    }
-    lines.push(renderSelectionOption(0, state.selectedIndex, 'Create'));
-    lines.push(renderSelectionOption(1, state.selectedIndex, 'Cancel'));
-    return lines;
-}
-function renderGenerating(state) {
-    const lines = [];
-    lines.push('');
-    lines.push(chalk.cyan(` Creating project "${state.projectName}"...`));
-    lines.push('');
-    return lines;
-}
-// =============================================================================
-// Step Helpers
-// =============================================================================
-function getMaxOptionsForStep(step) {
-    switch (step) {
-        case 0:
-            return 2;
-        case 3:
-            return REPO_PATTERN_OPTIONS.length;
-        case 4:
-            return TECH_STACK_OPTIONS.length;
-        case 5:
-            return CODING_STANDARDS_OPTIONS.length;
-        case 6:
-            return 2;
-        case 7:
-            return 2;
-        case 8:
-            return WORKFLOW_MODE_OPTIONS.length;
-        case 9:
-            return 2;
-        default:
-            return 0;
-    }
-}
-function isSelectionStep(step) {
-    return [0, 3, 4, 5, 6, 7, 8, 9].includes(step);
-}
-function isInputStep(step) {
-    return [1, 2].includes(step);
-}
-// =============================================================================
-// Init Overlay Implementation
-// =============================================================================
-class InitOverlayImpl extends InlineOverlay {
-    getInitialState() {
-        return {
-            step: 0,
-            projectType: null,
-            projectName: '',
-            description: '',
-            repoPattern: null,
-            techStack: null,
-            codingStandards: null,
-            initGit: true,
-            trackInDatabase: true,
-            workflowMode: 'flexible',
-            selectedIndex: 0,
-            inputBuffer: '',
-            error: null,
-            isGenerating: false,
-        };
-    }
-    render() {
-        // Show generating state if applicable
-        if (this.state.isGenerating) {
-            return renderGenerating(this.state);
-        }
-        const lines = [];
-        lines.push(...renderHeader(this.state.step));
-        switch (this.state.step) {
-            case 0:
-                lines.push(...renderStep0(this.state));
-                break;
-            case 1:
-                lines.push(...renderStep1(this.state));
-                break;
-            case 2:
-                lines.push(...renderStep2(this.state));
-                break;
-            case 3:
-                lines.push(...renderStep3(this.state));
-                break;
-            case 4:
-                lines.push(...renderStep4(this.state));
-                break;
-            case 5:
-                lines.push(...renderStep5(this.state));
-                break;
-            case 6:
-                lines.push(...renderStep6(this.state));
-                break;
-            case 7:
-                lines.push(...renderStep7(this.state));
-                break;
-            case 8:
-                lines.push(...renderStep8(this.state));
-                break;
-            case 9:
-                lines.push(...renderStep9(this.state));
-                break;
-        }
-        lines.push(...renderFooter(this.state.step));
-        return lines;
-    }
-    async handleKey(data) {
-        // Ctrl+C always cancels
-        if (this.isCtrlCKey(data)) {
-            return { type: 'close', result: { created: false } };
-        }
-        // q key on step 0 cancels
-        const char = data.length === 1 && data[0] >= 0x20 && data[0] < 0x7f ? String.fromCharCode(data[0]) : null;
-        if (this.state.step === 0 && char === 'q') {
-            return { type: 'close', result: { created: false } };
-        }
-        // Escape on step 0 cancels, otherwise goes back
-        if (this.isEscapeKey(data)) {
-            if (this.state.step === 0) {
-                return { type: 'close', result: { created: false } };
-            }
-            this.prevStep();
-            return { type: 'continue' };
-        }
-        // Handle selection steps
-        if (isSelectionStep(this.state.step)) {
-            const maxOptions = getMaxOptionsForStep(this.state.step);
-            // j/k for vim-style navigation
-            if (char === 'j' && this.state.selectedIndex < maxOptions - 1) {
-                this.state.selectedIndex++;
-                return { type: 'continue' };
-            }
-            if (char === 'k' && this.state.selectedIndex > 0) {
-                this.state.selectedIndex--;
-                return { type: 'continue' };
-            }
-            if (this.isUpArrowKey(data) && this.state.selectedIndex > 0) {
-                this.state.selectedIndex--;
-                return { type: 'continue' };
-            }
-            if (this.isDownArrowKey(data) && this.state.selectedIndex < maxOptions - 1) {
-                this.state.selectedIndex++;
-                return { type: 'continue' };
-            }
-            if (this.isEnterKey(data)) {
-                // Step 0 - only allow "new" option
-                if (this.state.step === 0 && this.state.selectedIndex === 1) {
-                    this.state.error = 'This option is coming soon';
-                    return { type: 'continue' };
-                }
-                // Step 9 - confirmation
-                if (this.state.step === 9) {
-                    if (this.state.selectedIndex === 1) {
-                        // Cancel
-                        return { type: 'close', result: { created: false } };
-                    }
-                    // Verify all required fields are set
-                    if (!this.state.repoPattern || !this.state.techStack || !this.state.codingStandards) {
-                        this.state.error = 'Missing configuration values';
-                        return { type: 'continue' };
-                    }
-                    // Show generating state
-                    this.state.isGenerating = true;
-                    this.requestRender();
-                    // Create project
-                    const config = {
-                        name: this.state.projectName,
-                        description: this.state.description,
-                        repoPattern: this.state.repoPattern,
-                        techStack: this.state.techStack,
-                        codingStandards: this.state.codingStandards,
-                        initGit: this.state.initGit,
-                    };
-                    try {
-                        // Ensure projects directory exists and create project there
-                        ensureProjectsDirectory();
-                        const projectsPath = getProjectsPath();
-                        const result = await generateProject(config, projectsPath);
-                        if (result.success) {
-                            return {
-                                type: 'close',
-                                result: {
-                                    created: true,
-                                    projectPath: result.projectPath,
-                                    docsPath: result.docsPath,
-                                    filesCreated: result.filesCreated,
-                                    trackInDatabase: this.state.trackInDatabase,
-                                    workflowMode: this.state.workflowMode,
-                                    projectName: this.state.projectName,
-                                    description: this.state.description,
-                                },
-                            };
-                        }
-                        else {
-                            this.state.isGenerating = false;
-                            this.state.error = result.error ?? 'Unknown error';
-                            return { type: 'continue' };
-                        }
-                    }
-                    catch (error) {
-                        this.state.isGenerating = false;
-                        this.state.error = error.message;
-                        return { type: 'continue' };
-                    }
-                }
-                this.nextStep();
-                return { type: 'continue' };
-            }
-        }
-        // Handle input steps
-        if (isInputStep(this.state.step)) {
-            if (this.isEnterKey(data)) {
-                if (this.validateInput()) {
-                    this.nextStep();
-                }
-                return { type: 'continue' };
-            }
-            if (this.isBackspaceKey(data)) {
-                this.state.inputBuffer = this.state.inputBuffer.slice(0, -1);
-                this.state.error = null;
-                return { type: 'continue' };
-            }
-            // Regular character input
-            const inputChar = this.getPrintableChar(data);
-            if (inputChar) {
-                this.state.inputBuffer += inputChar;
-                this.state.error = null;
-                return { type: 'continue' };
-            }
-        }
-        return { type: 'continue' };
-    }
-    getCleanupSummary(result) {
-        if (!result.created) {
-            return chalk.yellow(' Init cancelled');
-        }
-        return null;
-    }
-    // ===========================================================================
-    // Private Helpers
-    // ===========================================================================
-    nextStep() {
-        switch (this.state.step) {
-            case 0:
-                if (this.state.selectedIndex === 0) {
-                    this.state.projectType = 'new';
-                    this.state.step = 1;
-                    this.state.inputBuffer = '';
-                    this.state.selectedIndex = 0;
-                }
-                break;
-            case 1:
-                this.state.projectName = this.state.inputBuffer.trim();
-                this.state.step = 2;
-                this.state.inputBuffer = '';
-                break;
-            case 2:
-                this.state.description = this.state.inputBuffer.trim();
-                this.state.step = 3;
-                this.state.selectedIndex = 0;
-                break;
-            case 3:
-                this.state.repoPattern = REPO_PATTERN_OPTIONS[this.state.selectedIndex];
-                this.state.step = 4;
-                this.state.selectedIndex = 0;
-                break;
-            case 4:
-                this.state.techStack = TECH_STACK_OPTIONS[this.state.selectedIndex];
-                this.state.step = 5;
-                this.state.selectedIndex = 0;
-                break;
-            case 5:
-                this.state.codingStandards = CODING_STANDARDS_OPTIONS[this.state.selectedIndex];
-                this.state.step = 6;
-                this.state.selectedIndex = 0;
-                break;
-            case 6:
-                this.state.initGit = this.state.selectedIndex === 0;
-                this.state.step = 7;
-                this.state.selectedIndex = 0;
-                break;
-            case 7:
-                this.state.trackInDatabase = this.state.selectedIndex === 0;
-                // If tracking in DB, ask for workflow mode; otherwise skip to confirmation
-                this.state.step = this.state.trackInDatabase ? 8 : 9;
-                this.state.selectedIndex = 0;
-                break;
-            case 8:
-                this.state.workflowMode = WORKFLOW_MODE_OPTIONS[this.state.selectedIndex];
-                this.state.step = 9;
-                this.state.selectedIndex = 0;
-                break;
-        }
-        this.state.error = null;
-    }
-    prevStep() {
-        switch (this.state.step) {
-            case 1:
-                this.state.step = 0;
-                this.state.selectedIndex = 0;
-                break;
-            case 2:
-                this.state.step = 1;
-                this.state.inputBuffer = this.state.projectName;
-                break;
-            case 3:
-                this.state.step = 2;
-                this.state.inputBuffer = this.state.description;
-                break;
-            case 4:
-                this.state.step = 3;
-                this.state.selectedIndex = this.state.repoPattern ? REPO_PATTERN_OPTIONS.indexOf(this.state.repoPattern) : 0;
-                break;
-            case 5:
-                this.state.step = 4;
-                this.state.selectedIndex = this.state.techStack ? TECH_STACK_OPTIONS.indexOf(this.state.techStack) : 0;
-                break;
-            case 6:
-                this.state.step = 5;
-                this.state.selectedIndex = this.state.codingStandards ? CODING_STANDARDS_OPTIONS.indexOf(this.state.codingStandards) : 0;
-                break;
-            case 7:
-                this.state.step = 6;
-                this.state.selectedIndex = this.state.initGit ? 0 : 1;
-                break;
-            case 8:
-                this.state.step = 7;
-                this.state.selectedIndex = this.state.trackInDatabase ? 0 : 1;
-                break;
-            case 9:
-                // Go back to workflow mode if DB tracking is on, otherwise go to DB tracking step
-                this.state.step = this.state.trackInDatabase ? 8 : 7;
-                this.state.selectedIndex = this.state.trackInDatabase
-                    ? WORKFLOW_MODE_OPTIONS.indexOf(this.state.workflowMode)
-                    : 1;
-                break;
-        }
-        this.state.error = null;
-    }
-    validateInput() {
-        if (this.state.step === 1) {
-            const name = this.state.inputBuffer.trim();
-            if (!name) {
-                this.state.error = 'Project name is required';
-                return false;
-            }
-            if (!isValidProjectName(name)) {
-                this.state.error = 'Invalid name. Use lowercase letters, numbers, hyphens (2-50 chars, start with letter)';
-                return false;
-            }
-            if (projectExists(name)) {
-                this.state.error = `Directory "${name}" already exists`;
-                return false;
-            }
-        }
-        if (this.state.step === 2) {
-            const desc = this.state.inputBuffer.trim();
-            if (!desc) {
-                this.state.error = 'Description is required';
-                return false;
-            }
-            if (desc.length < 10) {
-                this.state.error = 'Description too short (min 10 characters)';
-                return false;
-            }
-        }
-        return true;
-    }
-}
-// =============================================================================
-// Main Export
-// =============================================================================
-/**
- * Show the init wizard overlay
- */
-export async function showInitOverlay() {
-    const overlay = new InitOverlayImpl();
-    return overlay.show();
-}