@compilr-dev/cli 0.4.0 → 0.5.0

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

@@ -0,0 +1,138 @@
+/**
+ * Mascot Overlay V2
+ *
+ * Mascot selection overlay using the new Overlay interface.
+ * Shows all mascot expressions with live preview.
+ *
+ * Features:
+ * - All mascot expressions
+ * - Live preview
+ * - Persists selection to settings
+ * - Works with TerminalUI's overlay management
+ */
+import { BaseOverlayV2, isEscape, isEnter, isSpace, isCtrlC, isNavigateUp, isNavigateDown, isClose, renderBorder, } from '../../base/index.js';
+import { getSettings, setSetting } from '../../../settings/index.js';
+import { MASCOT_OPTIONS, MASCOT_LABELS, EXPRESSIONS, } from '../../mascot/index.js';
+// =============================================================================
+// Mascot Overlay V2 Class
+// =============================================================================
+/**
+ * Mascot overlay using the new Overlay interface.
+ * Displays mascot options with live preview.
+ */
+export class MascotOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'mascot-overlay-v2';
+    constructor(options = {}) {
+        const currentMascot = options.currentMascot ?? getSettings().mascot;
+        // Find current mascot in options list
+        let selectedIndex = 0;
+        const mascotIndex = MASCOT_OPTIONS.findIndex(m => m === currentMascot);
+        if (mascotIndex >= 0) {
+            selectedIndex = mascotIndex;
+        }
+        const initialState = {
+            selectedIndex,
+            currentMascot,
+        };
+        super(initialState);
+        this.minHeight = 20;
+    }
+    renderContent(context) {
+        const s = context.styles;
+        const cols = context.width;
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Get preview lines for side-by-side layout
+        const selectedOption = MASCOT_OPTIONS[this.state.selectedIndex];
+        let previewLines = [];
+        let previewLabel = '';
+        if (selectedOption === 'none') {
+            previewLabel = '(No mascot)';
+            previewLines = ['', '', '', '', '', ''];
+        }
+        else if (selectedOption === 'random') {
+            previewLabel = '(Random on startup)';
+            previewLines = EXPRESSIONS.neutral;
+        }
+        else {
+            previewLabel = MASCOT_LABELS[selectedOption];
+            previewLines = EXPRESSIONS[selectedOption];
+        }
+        // Header
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Select Mascot')}`);
+        lines.push('');
+        // Column widths
+        const listColWidth = 28;
+        const gap = 4;
+        const previewColStart = listColWidth + gap;
+        // Build side-by-side layout
+        const optionCount = MASCOT_OPTIONS.length;
+        const previewHeight = previewLines.length;
+        const previewStartRow = Math.max(0, Math.floor((optionCount - previewHeight) / 2));
+        for (let i = 0; i < Math.max(optionCount, previewStartRow + previewHeight + 1); i++) {
+            let leftPart = '';
+            let rightPart = '';
+            // Left column: option list
+            if (i < optionCount) {
+                const option = MASCOT_OPTIONS[i];
+                const isSelected = i === this.state.selectedIndex;
+                const isCurrent = option === this.state.currentMascot;
+                const prefix = isSelected ? s.primary('> ') : '  ';
+                const num = `${String(i + 1).padStart(2)}. `;
+                const checkmark = isCurrent ? s.success(' (current)') : '';
+                const label = isSelected ? s.primary(MASCOT_LABELS[option]) : s.muted(MASCOT_LABELS[option]);
+                leftPart = `  ${prefix}${num}${label}${checkmark}`;
+            }
+            // Right column: preview
+            const previewRow = i - previewStartRow;
+            if (previewRow === -1) {
+                rightPart = s.muted(previewLabel);
+            }
+            else if (previewRow >= 0 && previewRow < previewHeight) {
+                rightPart = s.secondary(previewLines[previewRow]);
+            }
+            // Combine columns with proper spacing
+            // eslint-disable-next-line no-control-regex
+            const leftPlain = leftPart.replace(/\x1b\[[0-9;]*m/g, '');
+            const padding = ' '.repeat(Math.max(0, previewColStart - leftPlain.length));
+            lines.push(leftPart + padding + rightPart);
+        }
+        // Footer
+        lines.push('');
+        lines.push(border);
+        lines.push(`  ${s.muted('up/down/jk Navigate . Enter/Space Select . q/Esc Close')}`);
+        lines.push(border);
+        return lines;
+    }
+    handleKey(key) {
+        const data = key.raw;
+        const maxIndex = MASCOT_OPTIONS.length - 1;
+        // Ctrl+C always closes
+        if (isCtrlC(data)) {
+            return this.cancel();
+        }
+        // q or Esc closes
+        if (isEscape(data) || isClose(data)) {
+            return this.cancel();
+        }
+        // Navigation up
+        if (isNavigateUp(data) && this.state.selectedIndex > 0) {
+            this.state.selectedIndex--;
+            return this.rerender();
+        }
+        // Navigation down
+        if (isNavigateDown(data) && this.state.selectedIndex < maxIndex) {
+            this.state.selectedIndex++;
+            return this.rerender();
+        }
+        // Enter/Space to select
+        if (isEnter(data) || isSpace(data)) {
+            const selectedMascot = MASCOT_OPTIONS[this.state.selectedIndex];
+            setSetting('mascot', selectedMascot);
+            return this.close({ mascotChanged: selectedMascot });
+        }
+        return this.noAction();
+    }
+}

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

@@ -0,0 +1,49 @@
+/**
+ * Model Overlay V2
+ *
+ * Model selection overlay using TabbedListOverlayV2 for the new Overlay interface.
+ * Works with TerminalUI's overlay management.
+ *
+ * Features:
+ * - Tabs by provider (Claude, OpenAI, Gemini, Ollama)
+ * - Hot-swap detection (same provider = immediate, different = restart)
+ * - API key status checking
+ * - Persists selection to settings
+ */
+import { TabbedListOverlayV2 } from '../../base/index.js';
+interface ModelOption {
+    id: string;
+    name: string;
+    description: string;
+    provider: string;
+}
+export interface ModelOverlayV2Options {
+    /** Current model ID */
+    currentModel?: string;
+    /** Current provider (for hot-swap detection) */
+    currentProvider?: string;
+}
+export interface ModelOverlayV2Result {
+    /** Selected model ID (if changed) */
+    modelChanged?: string;
+    /** Selected provider */
+    provider?: string;
+    /** Whether restart is required (different provider) */
+    requiresRestart?: boolean;
+}
+/**
+ * Model selection overlay using the new Overlay interface.
+ * Displays available models in a tabbed list by provider.
+ */
+export declare class ModelOverlayV2 extends TabbedListOverlayV2<ModelOption, ModelOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "model-overlay-v2";
+    private readonly currentModel;
+    private readonly currentProvider;
+    constructor(options?: ModelOverlayV2Options);
+    /**
+     * Override to handle model selection on Enter.
+     */
+    protected onItemSelected(item: ModelOption): ModelOverlayV2Result | undefined;
+}
+export {};

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

@@ -0,0 +1,118 @@
+/**
+ * Model Overlay V2
+ *
+ * Model selection overlay using TabbedListOverlayV2 for the new Overlay interface.
+ * Works with TerminalUI's overlay management.
+ *
+ * Features:
+ * - Tabs by provider (Claude, OpenAI, Gemini, Ollama)
+ * - Hot-swap detection (same provider = immediate, different = restart)
+ * - API key status checking
+ * - Persists selection to settings
+ */
+import { TabbedListOverlayV2, } from '../../base/index.js';
+import { setSetting } from '../../../settings/index.js';
+import { hasApiKey, settingsProviderToCredentialKey } from '../../../utils/credentials.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const PAGE_SIZE = 10;
+const PROVIDER_TABS = [
+    { id: 'claude', label: 'Claude' },
+    { id: 'openai', label: 'OpenAI' },
+    { id: 'gemini', label: 'Gemini' },
+    { id: 'ollama', label: 'Ollama' },
+];
+const MODEL_OPTIONS = [
+    // Claude
+    { id: 'claude-sonnet-4-20250514', name: 'Sonnet 4', description: 'Best for everyday tasks', provider: 'claude' },
+    { id: 'claude-opus-4-20250514', name: 'Opus 4', description: 'Most capable for complex work', provider: 'claude' },
+    { id: 'claude-3-5-haiku-20241022', name: 'Haiku 3.5', description: 'Fastest for quick answers', provider: 'claude' },
+    // OpenAI
+    { id: 'gpt-4o', name: 'GPT-4o', description: 'Best overall', provider: 'openai' },
+    { id: 'gpt-4o-mini', name: 'GPT-4o Mini', description: 'Fast and affordable', provider: 'openai' },
+    // Gemini
+    { id: 'gemini-2.0-flash', name: 'Gemini 2.0 Flash', description: 'Fast multimodal', provider: 'gemini' },
+    { id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash', description: 'Latest stable flash', provider: 'gemini' },
+    { id: 'gemini-2.5-pro', name: 'Gemini 2.5 Pro', description: 'Most capable Gemini', provider: 'gemini' },
+    // Ollama
+    { id: 'llama3.2', name: 'Llama 3.2', description: 'Local model', provider: 'ollama' },
+    { id: 'mistral', name: 'Mistral', description: 'Local model', provider: 'ollama' },
+    { id: 'codellama', name: 'Code Llama', description: 'Code-focused local model', provider: 'ollama' },
+];
+// =============================================================================
+// Model Overlay V2 Class
+// =============================================================================
+/**
+ * Model selection overlay using the new Overlay interface.
+ * Displays available models in a tabbed list by provider.
+ */
+export class ModelOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'model-overlay-v2';
+    currentModel;
+    currentProvider;
+    constructor(options = {}) {
+        const currentModel = options.currentModel ?? 'claude-sonnet-4-20250514';
+        const currentProvider = options.currentProvider ?? 'claude';
+        // Find the initial tab based on current provider
+        const initialTabIndex = PROVIDER_TABS.findIndex((t) => t.id === currentProvider);
+        super({
+            title: 'Select Model',
+            tabs: PROVIDER_TABS,
+            items: MODEL_OPTIONS,
+            pageSize: PAGE_SIZE,
+            filterByTab: (item, tabId) => item.provider === tabId,
+            getSearchText: (item) => `${item.name} ${item.description} ${item.id}`,
+            renderItem: (item, isSelected, styles) => {
+                const isCurrent = item.id === currentModel;
+                const prefix = isSelected ? styles.primary(' > ') : '   ';
+                // Check API key status for this provider
+                const providerType = item.provider;
+                const credKey = settingsProviderToCredentialKey(providerType);
+                const hasKey = item.provider === 'ollama' || hasApiKey(credKey);
+                const keyIndicator = hasKey ? styles.success('●') : styles.error('○');
+                const name = isSelected
+                    ? styles.primary(item.name.padEnd(18))
+                    : styles.muted(item.name.padEnd(18));
+                const desc = styles.muted(item.description);
+                const currentBadge = isCurrent ? styles.success(' (current)') : '';
+                return `${prefix}${keyIndicator} ${name}${desc}${currentBadge}`;
+            },
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to filter · ↑↓/jk Navigate · Enter Select · Esc Exit search';
+                }
+                return 'Tab Provider · ↑↓/jk · / Search · Enter Select · q/Esc Close';
+            },
+            emptyMessage: 'No models available for this provider.',
+            noResultsMessage: 'No models match the search.',
+        });
+        this.currentModel = currentModel;
+        this.currentProvider = currentProvider;
+        // Set initial tab based on current provider
+        if (initialTabIndex >= 0) {
+            this.state.currentTab = initialTabIndex;
+            // Re-filter items for the selected tab
+            this.state.filteredItems = MODEL_OPTIONS.filter((item) => item.provider === PROVIDER_TABS[initialTabIndex]?.id);
+        }
+    }
+    /**
+     * Override to handle model selection on Enter.
+     */
+    onItemSelected(item) {
+        if (item.id === this.currentModel) {
+            // Same model, no change
+            return undefined;
+        }
+        // Save to settings
+        setSetting('defaultModel', item.id);
+        setSetting('defaultProvider', item.provider);
+        const requiresRestart = item.provider !== this.currentProvider;
+        return {
+            modelChanged: item.id,
+            provider: item.provider,
+            requiresRestart,
+        };
+    }
+}

package/dist/ui/overlay/impl/model-warning-overlay-v2.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Model Warning Overlay V2
+ *
+ * Shows a warning when the user runs a command that requires
+ * a larger model than they're currently using.
+ * Uses BaseOverlayV2 for TerminalUI integration.
+ *
+ * Offers options to:
+ * - Switch to a recommended model
+ * - Use a simpler alternative command
+ * - Continue anyway
+ * - Cancel
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+import type { TierLevel } from '../../../utils/model-tiers.js';
+export interface ModelWarningOptionsV2 {
+    /** The command being run (e.g., '/design') */
+    command: string;
+    /** Current model ID */
+    currentModel: string;
+    /** Current model's tier */
+    currentTier: TierLevel;
+    /** Suggested upgrade model (if available) */
+    suggestedModel?: string;
+    /** Alternative simpler command (e.g., '/sketch') */
+    alternativeCommand?: string;
+}
+export type ModelWarningChoiceV2 = 'switch' | 'alternative' | 'continue' | 'cancel';
+interface ModelWarningState {
+    selectedIndex: number;
+}
+export declare class ModelWarningOverlayV2 extends BaseOverlayV2<ModelWarningState, ModelWarningChoiceV2> {
+    readonly type: "inline";
+    readonly id = "model-warning-overlay-v2";
+    private readonly options;
+    private readonly choiceOptions;
+    constructor(options: ModelWarningOptionsV2);
+    protected renderContent(context: RenderContext): string[];
+    handleKey(key: KeyEvent): OverlayAction<ModelWarningChoiceV2>;
+    /**
+     * Summary shown after overlay closes.
+     */
+    getCloseSummary(result: ModelWarningChoiceV2): string | null;
+}
+export {};

package/dist/ui/overlay/impl/model-warning-overlay-v2.js

@@ -0,0 +1,132 @@
+/**
+ * Model Warning Overlay V2
+ *
+ * Shows a warning when the user runs a command that requires
+ * a larger model than they're currently using.
+ * Uses BaseOverlayV2 for TerminalUI integration.
+ *
+ * Offers options to:
+ * - Switch to a recommended model
+ * - Use a simpler alternative command
+ * - Continue anyway
+ * - Cancel
+ */
+import { BaseOverlayV2, renderBorder } from '../../base/index.js';
+// =============================================================================
+// Overlay Implementation
+// =============================================================================
+export class ModelWarningOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'model-warning-overlay-v2';
+    options;
+    choiceOptions;
+    constructor(options) {
+        super({
+            selectedIndex: 0,
+        });
+        this.options = options;
+        this.minHeight = 16; // Prevent jitter
+        // Build choice options based on what's available
+        this.choiceOptions = [];
+        if (options.suggestedModel) {
+            this.choiceOptions.push({
+                key: '1',
+                label: `Switch to ${options.suggestedModel} and continue`,
+                choice: 'switch',
+            });
+        }
+        if (options.alternativeCommand) {
+            this.choiceOptions.push({
+                key: String(this.choiceOptions.length + 1),
+                label: `Use ${options.alternativeCommand} instead (simpler, works with any model)`,
+                choice: 'alternative',
+            });
+        }
+        this.choiceOptions.push({
+            key: String(this.choiceOptions.length + 1),
+            label: 'Continue with current model anyway',
+            choice: 'continue',
+        });
+    }
+    renderContent(context) {
+        const s = context.styles;
+        const lines = [];
+        const cols = context.width;
+        const border = renderBorder(cols, s);
+        // Header
+        lines.push(border);
+        lines.push(' ' + s.warning('! Model Recommendation'));
+        lines.push('');
+        // Description
+        lines.push(` ${this.options.command} works best with larger models for complex`);
+        lines.push(' multi-question workflows.');
+        lines.push('');
+        // Current and recommended
+        lines.push(` Current: ${s.muted(this.options.currentModel)} (${this.options.currentTier} tier)`);
+        if (this.options.suggestedModel) {
+            lines.push(` Recommended: ${s.primary(this.options.suggestedModel)} (large tier)`);
+        }
+        lines.push('');
+        // Separator
+        lines.push(border);
+        // Options
+        for (let i = 0; i < this.choiceOptions.length; i++) {
+            const opt = this.choiceOptions[i];
+            const isCursor = this.state.selectedIndex === i;
+            const prefix = isCursor ? ' > ' : '   ';
+            if (isCursor) {
+                lines.push(s.primary(`${prefix}[${opt.key}] ${opt.label}`));
+            }
+            else {
+                lines.push(s.muted(`${prefix}[${opt.key}] ${opt.label}`));
+            }
+        }
+        // Footer
+        lines.push('');
+        lines.push(s.muted(' Up/Down Navigate | Enter Select | Esc Cancel'));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(key) {
+        // Ctrl+C or Escape cancels
+        if ((key.ctrl && key.name === 'c') || key.name === 'escape') {
+            return this.close('cancel');
+        }
+        // Navigation
+        if (key.name === 'up') {
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+            return this.rerender();
+        }
+        if (key.name === 'down') {
+            this.state.selectedIndex = Math.min(this.choiceOptions.length - 1, this.state.selectedIndex + 1);
+            return this.rerender();
+        }
+        if (key.name === 'return') {
+            return this.close(this.choiceOptions[this.state.selectedIndex].choice);
+        }
+        // Number keys 1-9
+        if (key.char && key.char >= '1' && key.char <= '9') {
+            const numIndex = parseInt(key.char, 10) - 1;
+            if (numIndex < this.choiceOptions.length) {
+                return this.close(this.choiceOptions[numIndex].choice);
+            }
+        }
+        return this.noAction();
+    }
+    /**
+     * Summary shown after overlay closes.
+     */
+    getCloseSummary(result) {
+        const s = this.getStyles();
+        switch (result) {
+            case 'switch':
+                return s.muted('Model: ') + s.success(`Switching to ${this.options.suggestedModel ?? 'recommended'}`);
+            case 'alternative':
+                return s.muted('Model: ') + s.primary(`Using ${this.options.alternativeCommand ?? 'alternative'}`);
+            case 'continue':
+                return s.muted('Model: ') + s.warning('Continuing with current');
+            case 'cancel':
+                return s.muted('Model: ') + s.error('Cancelled');
+        }
+    }
+}

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

@@ -0,0 +1,77 @@
+/**
+ * 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 { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+import { type TechStack, type CodingStandards, type RepoPattern } from '../../../templates/index.js';
+type WizardStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type WorkflowMode = 'flexible' | 'guided';
+interface NewProjectState {
+    step: WizardStep;
+    projectType: 'new' | 'existing' | null;
+    projectName: string;
+    description: string;
+    repoPattern: RepoPattern | null;
+    techStack: TechStack | null;
+    codingStandards: CodingStandards | null;
+    initGit: boolean;
+    trackInDatabase: boolean;
+    workflowMode: WorkflowMode;
+    selectedIndex: number;
+    inputBuffer: string;
+    error: string | null;
+    isGenerating: boolean;
+}
+export interface NewProjectResultV2 {
+    created: boolean;
+    projectPath?: string;
+    docsPath?: string;
+    filesCreated?: string[];
+    trackInDatabase?: boolean;
+    workflowMode?: WorkflowMode;
+    projectName?: string;
+    description?: string;
+}
+export declare class NewProjectOverlayV2 extends BaseOverlayV2<NewProjectState, NewProjectResultV2> {
+    readonly type: "inline";
+    readonly id = "new-project-overlay-v2";
+    constructor();
+    protected renderContent(context: RenderContext): string[];
+    private renderGenerating;
+    private renderStepFooter;
+    private renderSelectionOption;
+    private renderStep0;
+    private renderStep1;
+    private renderStep2;
+    private renderStep3;
+    private renderStep4;
+    private renderStep5;
+    private renderStep6;
+    private renderStep7;
+    private renderStep8;
+    private renderStep9;
+    handleKey(key: KeyEvent): OverlayAction<NewProjectResultV2> | Promise<OverlayAction<NewProjectResultV2>>;
+    private handleSelectionKey;
+    private handleSelectionEnter;
+    private handleInputKey;
+    private nextStep;
+    private prevStep;
+    private validateInput;
+    getCloseSummary(result: NewProjectResultV2): string | null;
+}
+export {};