@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/init-overlay-v2.js

@@ -0,0 +1,600 @@
+/**
+ * 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';
+// =============================================================================
+// 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 {
+                        const result = await generateProject(config);
+                        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();
+}

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

@@ -1,7 +1,9 @@
 /**
- * Init Overlay
+ * 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
@@ -10,15 +12,23 @@
  *   4. Tech stack
  *   5. Coding standards
  *   6. Initialize git?
- *   7. Confirmation
+ *   7. Track with project database?
+ *   8. Workflow mode (if tracking enabled)
+ *   9. Confirmation
  */
+type WorkflowMode = 'flexible' | 'guided';
 export interface InitResult {
     created: boolean;
     projectPath?: string;
     docsPath?: string;
     filesCreated?: string[];
+    trackInDatabase?: boolean;
+    workflowMode?: WorkflowMode;
+    projectName?: string;
+    description?: string;
 }
 /**
  * Show the init wizard overlay
  */
 export declare function showInitOverlay(): Promise<InitResult>;
+export {};