@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/overlay/impl/new-overlay-v2.js

@@ -0,0 +1,593 @@
+/**
+ * New Project Overlay V2
+ *
+ * Modal overlay for the /new wizard - creates new projects with structured workflow.
+ * Uses BaseOverlayV2 for TerminalUI integration.
+ *
+ * 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 { BaseOverlayV2, renderBorder } from '../../base/index.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)',
+};
+// =============================================================================
+// 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 V2 Implementation
+// =============================================================================
+export class NewProjectOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'new-project-overlay-v2';
+    constructor() {
+        super({
+            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,
+        });
+        this.minHeight = 20; // Prevent jitter between steps
+    }
+    // ===========================================================================
+    // Rendering
+    // ===========================================================================
+    renderContent(context) {
+        const s = context.styles;
+        // Show generating state if applicable
+        if (this.state.isGenerating) {
+            return this.renderGenerating(s);
+        }
+        const lines = [];
+        const border = renderBorder(context.width, s);
+        // Header
+        lines.push(border);
+        lines.push(' ' + s.primaryBold('Initialize New Project') + s.muted(` [${String(this.state.step)}/9]`));
+        lines.push('');
+        // Step content
+        switch (this.state.step) {
+            case 0:
+                lines.push(...this.renderStep0(s));
+                break;
+            case 1:
+                lines.push(...this.renderStep1(s));
+                break;
+            case 2:
+                lines.push(...this.renderStep2(s));
+                break;
+            case 3:
+                lines.push(...this.renderStep3(s));
+                break;
+            case 4:
+                lines.push(...this.renderStep4(s));
+                break;
+            case 5:
+                lines.push(...this.renderStep5(s));
+                break;
+            case 6:
+                lines.push(...this.renderStep6(s));
+                break;
+            case 7:
+                lines.push(...this.renderStep7(s));
+                break;
+            case 8:
+                lines.push(...this.renderStep8(s));
+                break;
+            case 9:
+                lines.push(...this.renderStep9(s));
+                break;
+        }
+        // Footer
+        lines.push(...this.renderStepFooter(s));
+        return lines;
+    }
+    renderGenerating(s) {
+        const lines = [];
+        lines.push('');
+        lines.push(s.primary(` Creating project "${this.state.projectName}"...`));
+        lines.push('');
+        return lines;
+    }
+    renderStepFooter(s) {
+        const lines = [];
+        lines.push('');
+        if (this.state.step === 0) {
+            lines.push(s.muted(' Up/Down Navigate | Enter Select | q/Esc Cancel'));
+        }
+        else if (this.state.step === 9) {
+            lines.push(s.muted(' Up/Down Navigate | Enter Confirm | Esc Back'));
+        }
+        else if (isSelectionStep(this.state.step)) {
+            lines.push(s.muted(' Up/Down Navigate | Enter Select | Esc Back'));
+        }
+        else {
+            lines.push(s.muted(' Enter Confirm | Esc Back'));
+        }
+        return lines;
+    }
+    renderSelectionOption(s, index, label, disabled = false) {
+        const isSelected = index === this.state.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
+    // ===========================================================================
+    renderStep0(s) {
+        const lines = [];
+        lines.push(chalk.bold(' What would you like to do?'));
+        lines.push('');
+        lines.push(this.renderSelectionOption(s, 0, '1. Start a new project'));
+        lines.push(this.renderSelectionOption(s, 1, '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;
+    }
+    renderStep1(s) {
+        const lines = [];
+        lines.push(chalk.bold(' Project name'));
+        lines.push('');
+        lines.push(` > ${this.state.inputBuffer}|`);
+        lines.push('');
+        if (this.state.error) {
+            lines.push(s.error(` ${this.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;
+    }
+    renderStep2(s) {
+        const lines = [];
+        lines.push(chalk.bold(' What are you building?'));
+        lines.push('');
+        lines.push(` > ${this.state.inputBuffer}|`);
+        lines.push('');
+        if (this.state.error) {
+            lines.push(s.error(` ${this.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;
+    }
+    renderStep3(s) {
+        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(this.renderSelectionOption(s, i, `${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;
+    }
+    renderStep4(s) {
+        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(this.renderSelectionOption(s, i, `${String(i + 1)}. ${TECH_STACK_LABELS[stack]}`));
+        }
+        lines.push('');
+        lines.push(s.muted(' Choose a preset or configure later'));
+        return lines;
+    }
+    renderStep5(s) {
+        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(this.renderSelectionOption(s, i, `${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;
+    }
+    renderStep6(s) {
+        const lines = [];
+        lines.push(chalk.bold(' Initialize git repository?'));
+        lines.push('');
+        lines.push(this.renderSelectionOption(s, 0, 'Yes'));
+        lines.push(this.renderSelectionOption(s, 1, 'No'));
+        lines.push('');
+        lines.push(s.muted(' Creates git repo with initial commit'));
+        return lines;
+    }
+    renderStep7(s) {
+        const lines = [];
+        lines.push(chalk.bold(' Track with project database?'));
+        lines.push('');
+        lines.push(this.renderSelectionOption(s, 0, 'Yes (recommended)'));
+        lines.push(this.renderSelectionOption(s, 1, 'No'));
+        lines.push('');
+        lines.push(s.muted(' Enables persistent project tracking, backlog management,'));
+        lines.push(s.muted(' and workflow features across sessions.'));
+        return lines;
+    }
+    renderStep8(s) {
+        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(this.renderSelectionOption(s, i, `${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;
+    }
+    renderStep9(s) {
+        const lines = [];
+        lines.push(chalk.bold(' Ready to create project?'));
+        lines.push('');
+        lines.push(` Project:     ${s.primary(this.state.projectName)}`);
+        lines.push(` Location:    ${s.primary('./' + this.state.projectName + '/')}`);
+        lines.push(` Structure:   ${s.primary(this.state.repoPattern === 'single' ? 'Single repo' : 'Two repos')}`);
+        lines.push(` Tech:        ${s.primary(this.state.techStack ? TECH_STACK_LABELS[this.state.techStack] : 'Not set')}`);
+        lines.push(` Standards:   ${s.primary(this.state.codingStandards ? CODING_STANDARDS_LABELS[this.state.codingStandards] : 'Not set')}`);
+        lines.push(` Git:         ${s.primary(this.state.initGit ? 'Yes' : 'No')}`);
+        lines.push(` DB Tracking: ${s.primary(this.state.trackInDatabase ? 'Yes' : 'No')}`);
+        if (this.state.trackInDatabase) {
+            lines.push(` Workflow:    ${s.primary(WORKFLOW_MODE_LABELS[this.state.workflowMode])}`);
+        }
+        if (this.state.repoPattern === 'two-repo') {
+            lines.push('');
+            lines.push(s.muted(` Docs repo:   ./${this.state.projectName}-docs/`));
+        }
+        lines.push('');
+        if (this.state.error) {
+            lines.push(s.error(` ${this.state.error}`));
+            lines.push('');
+        }
+        lines.push(this.renderSelectionOption(s, 0, 'Create'));
+        lines.push(this.renderSelectionOption(s, 1, 'Cancel'));
+        return lines;
+    }
+    // ===========================================================================
+    // Key Handling
+    // ===========================================================================
+    handleKey(key) {
+        // Ctrl+C always cancels
+        if (this.isInterruptKey(key)) {
+            return this.close({ created: false });
+        }
+        // 'q' key on step 0 cancels
+        if (this.state.step === 0 && key.name === 'q') {
+            return this.close({ created: false });
+        }
+        // Escape on step 0 cancels, otherwise goes back
+        if (key.name === 'escape') {
+            if (this.state.step === 0) {
+                return this.close({ created: false });
+            }
+            this.prevStep();
+            return this.rerender();
+        }
+        // Handle selection steps
+        if (isSelectionStep(this.state.step)) {
+            return this.handleSelectionKey(key);
+        }
+        // Handle input steps
+        if (isInputStep(this.state.step)) {
+            return this.handleInputKey(key);
+        }
+        return this.noAction();
+    }
+    handleSelectionKey(key) {
+        const maxOptions = getMaxOptionsForStep(this.state.step);
+        // j/k for vim-style navigation
+        if (key.name === 'j' && this.state.selectedIndex < maxOptions - 1) {
+            this.state.selectedIndex++;
+            return this.rerender();
+        }
+        if (key.name === 'k' && this.state.selectedIndex > 0) {
+            this.state.selectedIndex--;
+            return this.rerender();
+        }
+        if (this.isUpKey(key) && this.state.selectedIndex > 0) {
+            this.state.selectedIndex--;
+            return this.rerender();
+        }
+        if (this.isDownKey(key) && this.state.selectedIndex < maxOptions - 1) {
+            this.state.selectedIndex++;
+            return this.rerender();
+        }
+        if (this.isEnterKey(key)) {
+            return this.handleSelectionEnter();
+        }
+        return this.noAction();
+    }
+    async handleSelectionEnter() {
+        // Step 0 - only allow "new" option
+        if (this.state.step === 0 && this.state.selectedIndex === 1) {
+            this.state.error = 'This option is coming soon';
+            return this.rerender();
+        }
+        // Step 9 - confirmation
+        if (this.state.step === 9) {
+            if (this.state.selectedIndex === 1) {
+                // Cancel
+                return this.close({ 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 this.rerender();
+            }
+            // Show generating state
+            this.state.isGenerating = true;
+            // 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 this.close({
+                        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 this.rerender();
+                }
+            }
+            catch (error) {
+                this.state.isGenerating = false;
+                this.state.error = error.message;
+                return this.rerender();
+            }
+        }
+        this.nextStep();
+        return this.rerender();
+    }
+    handleInputKey(key) {
+        if (this.isEnterKey(key)) {
+            if (this.validateInput()) {
+                this.nextStep();
+            }
+            return this.rerender();
+        }
+        if (key.name === 'backspace') {
+            this.state.inputBuffer = this.state.inputBuffer.slice(0, -1);
+            this.state.error = null;
+            return this.rerender();
+        }
+        // Regular character input
+        if (key.char && key.char.length === 1 && key.char >= ' ' && key.char <= '~') {
+            this.state.inputBuffer += key.char;
+            this.state.error = null;
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    // ===========================================================================
+    // Step Navigation
+    // ===========================================================================
+    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;
+    }
+    // ===========================================================================
+    // Close Summary
+    // ===========================================================================
+    getCloseSummary(result) {
+        const s = this.getStyles();
+        if (!result.created) {
+            return s.warning('Init cancelled');
+        }
+        return null;
+    }
+}

package/dist/ui/overlay/impl/permission-overlay-v2.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Permission Overlay V2
+ *
+ * Modal overlay for tool permission requests.
+ * Uses BaseOverlayV2 for the new TerminalUI-based REPL.
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../index.js';
+export type PermissionResult = 'allow' | 'deny' | 'allow-always';
+export interface PermissionOverlayV2Options {
+    toolName: string;
+    args: Record<string, unknown>;
+    description?: string;
+    /** Pre-rendered diff lines (for edit tool) */
+    diffLines?: string[];
+}
+interface PermissionState {
+    selectedIndex: number;
+    showingDetail: boolean;
+    detailScrollOffset: number;
+    detailContentLines: string[];
+}
+export declare class PermissionOverlayV2 extends BaseOverlayV2<PermissionState, PermissionResult> {
+    readonly type: "inline";
+    readonly id = "permission-overlay-v2";
+    private readonly options;
+    constructor(options: PermissionOverlayV2Options);
+    protected renderContent(context: RenderContext): string[];
+    private renderMainView;
+    private renderDetailView;
+    handleKey(key: KeyEvent): OverlayAction<PermissionResult>;
+    private handleMainKey;
+    private handleDetailKey;
+    getCloseSummary(result: PermissionResult): string | null;
+}
+export {};