@compilr-dev/cli 0.4.0 → 0.5.0

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

@@ -0,0 +1,642 @@
+/**
+ * Backlog Overlay V2
+ *
+ * Modal overlay for viewing and managing the project backlog.
+ * Uses TabbedListOverlayV2 for consistent list/tab/search behavior.
+ *
+ * Features:
+ * - Search by title/description
+ * - Filter tabs by type (All/Feature/Bug/Tech-Debt/Chore)
+ * - Pagination for large backlogs
+ * - Quick status toggle with Space
+ * - Add new items with wizard
+ * - Database-backed with project isolation
+ */
+import chalk from 'chalk';
+import * as terminal from '../../terminal.js';
+import { TabbedListOverlayV2, BaseScreen, stay, popScreen, closeOverlay, isEscape, isCtrlC, isEnter, isSpace, isNavigateUp, isNavigateDown, isLeftArrow, isRightArrow, isVimLeft, isVimRight, isBackspace, extractPrintable, renderBorder, wrapText, } from '../../base/index.js';
+import { workItemRepository } from '../../../db/repositories/work-item-repository.js';
+import { getActiveProject } from '../../../tools/project-db.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const PAGE_SIZE = 8;
+const TYPE_OPTIONS = ['feature', 'bug', 'tech-debt', 'chore'];
+const STATUS_OPTIONS = ['📋', '🚧', '✅'];
+const PRIORITY_OPTIONS = ['critical', 'high', 'medium', 'low'];
+const TYPE_LABELS = {
+    'feature': 'Feature',
+    'bug': 'Bug',
+    'tech-debt': 'Tech Debt',
+    'chore': 'Chore',
+};
+const PRIORITY_LABELS = {
+    'critical': 'Critical',
+    'high': 'High',
+    'medium': 'Medium',
+    'low': 'Low',
+};
+const TABS = [
+    { id: 'all', label: 'All' },
+    { id: 'active', label: 'Active' },
+    { id: 'feature', label: 'Feature' },
+    { id: 'bug', label: 'Bug' },
+    { id: 'tech-debt', label: 'Tech' },
+    { id: 'chore', label: 'Chore' },
+];
+// =============================================================================
+// Status Mapping (Database ↔ Display)
+// =============================================================================
+/**
+ * Map database status to display emoji
+ */
+function dbStatusToEmoji(status) {
+    switch (status) {
+        case 'backlog': return '📋';
+        case 'in_progress': return '🚧';
+        case 'completed': return '✅';
+        case 'skipped': return '✅'; // Show skipped as completed for simplicity
+        default: return '📋';
+    }
+}
+/**
+ * Map display emoji to database status
+ */
+function emojiToDbStatus(emoji) {
+    switch (emoji) {
+        case '📋': return 'backlog';
+        case '🚧': return 'in_progress';
+        case '✅': return 'completed';
+        default: return 'backlog';
+    }
+}
+/**
+ * Convert database WorkItem to display BacklogItem
+ */
+function workItemToBacklogItem(item) {
+    return {
+        id: item.itemId,
+        dbId: item.id,
+        type: item.type,
+        status: dbStatusToEmoji(item.status),
+        priority: item.priority,
+        title: item.title,
+        description: item.description ?? '',
+        commit: item.commitHash ?? undefined,
+    };
+}
+// =============================================================================
+// Database Operations
+// =============================================================================
+/**
+ * Load items from database for a project
+ */
+function loadItemsFromDb(projectId) {
+    const result = workItemRepository.query({
+        project_id: projectId,
+        limit: 1000, // Get all items
+    });
+    return result.items.map(workItemToBacklogItem);
+}
+/**
+ * Update an item's status in the database
+ */
+function updateItemStatus(dbId, status) {
+    workItemRepository.update(dbId, {
+        status: emojiToDbStatus(status),
+    });
+}
+/**
+ * Update an item's type in the database
+ */
+function updateItemType(dbId, type) {
+    workItemRepository.update(dbId, { type });
+}
+/**
+ * Update an item's priority in the database
+ */
+function updateItemPriority(dbId, priority) {
+    workItemRepository.update(dbId, { priority });
+}
+/**
+ * Create a new item in the database
+ */
+function createItem(projectId, type, priority, title, description) {
+    const item = workItemRepository.create({
+        project_id: projectId,
+        type,
+        priority,
+        title,
+        description,
+    });
+    return workItemToBacklogItem(item);
+}
+// =============================================================================
+// Helper Functions
+// =============================================================================
+function getStatusLabel(status) {
+    switch (status) {
+        case '📋': return 'Backlog';
+        case '🚧': return 'In Progress';
+        case '✅': return 'Completed';
+        default: return '';
+    }
+}
+// =============================================================================
+// Detail Screen (In-Place Editing)
+// =============================================================================
+/**
+ * Screen for editing item type, status, and priority.
+ * Renders in-place over the list.
+ */
+class DetailScreen extends BaseScreen {
+    item;
+    editState;
+    styles;
+    selectedField = 0; // 0=type, 1=status, 2=priority
+    constructor(item, editState, styles) {
+        super();
+        this.item = item;
+        this.editState = editState;
+        this.styles = styles;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Header
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Edit Item')}  ${s.muted(this.item.id)}`);
+        lines.push('');
+        // Title
+        lines.push(`  ${chalk.bold(this.item.title)}`);
+        lines.push('');
+        // Editable fields with selection indicator
+        const typePrefix = this.selectedField === 0 ? s.primary('❯ Type: ') : s.muted('  Type: ');
+        const typeValue = this.selectedField === 0 ? s.primary(TYPE_LABELS[this.item.type]) : TYPE_LABELS[this.item.type];
+        lines.push(`  ${typePrefix}${typeValue}`);
+        const statusLabel = this.item.status + ' ' + getStatusLabel(this.item.status);
+        const statusPrefix = this.selectedField === 1 ? s.primary('❯ Status: ') : s.muted('  Status: ');
+        const statusValue = this.selectedField === 1 ? s.primary(statusLabel) : statusLabel;
+        lines.push(`  ${statusPrefix}${statusValue}`);
+        const priPrefix = this.selectedField === 2 ? s.primary('❯ Priority: ') : s.muted('  Priority: ');
+        const priValue = this.selectedField === 2 ? s.primary(PRIORITY_LABELS[this.item.priority]) : PRIORITY_LABELS[this.item.priority];
+        lines.push(`  ${priPrefix}${priValue}`);
+        lines.push('');
+        // Description
+        lines.push(`  ${s.muted('Description:')}`);
+        const descLines = wrapText(this.item.description, cols - 6);
+        for (const line of descLines) {
+            lines.push(`    ${line}`);
+        }
+        // Commit info
+        if (this.item.commit) {
+            lines.push('');
+            lines.push(`  ${s.muted('Commit:')} ${this.item.commit}`);
+        }
+        lines.push('');
+        lines.push(border);
+        lines.push(`  ${s.muted('↑↓/jk Select field · ←→/hl Change value · Esc Back')}`);
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C closes everything
+        if (isCtrlC(data)) {
+            return closeOverlay({ modified: this.editState.modified });
+        }
+        // Escape - back to list
+        if (isEscape(data)) {
+            return popScreen();
+        }
+        // Up/Down or k/j - navigate fields
+        if (isNavigateUp(data) && this.selectedField > 0) {
+            this.selectedField = (this.selectedField - 1);
+            return stay();
+        }
+        if (isNavigateDown(data) && this.selectedField < 2) {
+            this.selectedField = (this.selectedField + 1);
+            return stay();
+        }
+        // Left/Right or h/l - change value of selected field
+        const isLeft = isLeftArrow(data) || isVimLeft(data);
+        const isRight = isRightArrow(data) || isVimRight(data);
+        if (isLeft || isRight) {
+            const direction = isRight ? 1 : -1;
+            if (this.selectedField === 0) {
+                // Type
+                const currentIdx = TYPE_OPTIONS.indexOf(this.item.type);
+                const newIdx = (currentIdx + direction + TYPE_OPTIONS.length) % TYPE_OPTIONS.length;
+                const newType = TYPE_OPTIONS[newIdx];
+                updateItemType(this.item.dbId, newType);
+                this.item.type = newType;
+            }
+            else if (this.selectedField === 1) {
+                // Status
+                const currentIdx = STATUS_OPTIONS.indexOf(this.item.status);
+                const newIdx = (currentIdx + direction + STATUS_OPTIONS.length) % STATUS_OPTIONS.length;
+                const newStatus = STATUS_OPTIONS[newIdx];
+                updateItemStatus(this.item.dbId, newStatus);
+                this.item.status = newStatus;
+            }
+            else {
+                // Priority
+                const currentIdx = PRIORITY_OPTIONS.indexOf(this.item.priority);
+                const newIdx = (currentIdx + direction + PRIORITY_OPTIONS.length) % PRIORITY_OPTIONS.length;
+                const newPriority = PRIORITY_OPTIONS[newIdx];
+                updateItemPriority(this.item.dbId, newPriority);
+                this.item.priority = newPriority;
+            }
+            this.editState.modified = true;
+            this.editState.reloadItems();
+            return stay();
+        }
+        return stay(false);
+    }
+    /**
+     * Minimum height for stable rendering.
+     */
+    getMinHeight() {
+        return 20;
+    }
+}
+// =============================================================================
+// Add Screen (Multi-Step Wizard)
+// =============================================================================
+/**
+ * Screen for adding a new backlog item.
+ * 5 steps: type, priority, title, description, confirm
+ */
+class AddScreen extends BaseScreen {
+    editState;
+    styles;
+    step = 0;
+    selectedIndex = 0;
+    inputBuffer = '';
+    error = null;
+    newItem = { type: null, priority: null, title: '', description: '' };
+    constructor(editState, styles) {
+        super();
+        this.editState = editState;
+        this.styles = styles;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Header
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Add Item')}`);
+        lines.push('');
+        const stepLabels = ['Type', 'Priority', 'Title', 'Description', 'Confirm'];
+        lines.push(`  ${s.muted(`Step ${String(this.step + 1)}/5: ${stepLabels[this.step]}`)}`);
+        lines.push('');
+        switch (this.step) {
+            case 0: // Type
+                lines.push(`  ${chalk.bold('What type of item?')}`);
+                lines.push('');
+                for (let i = 0; i < TYPE_OPTIONS.length; i++) {
+                    const isSelected = this.selectedIndex === i;
+                    const prefix = isSelected ? s.primary('❯ ') : '  ';
+                    const label = `${String(i + 1)}. ${TYPE_LABELS[TYPE_OPTIONS[i]]}`;
+                    lines.push(`  ${prefix}${isSelected ? s.primary(label) : s.muted(label)}`);
+                }
+                break;
+            case 1: // Priority
+                lines.push(`  ${chalk.bold('Priority level?')}`);
+                lines.push('');
+                for (let i = 0; i < PRIORITY_OPTIONS.length; i++) {
+                    const isSelected = this.selectedIndex === i;
+                    const prefix = isSelected ? s.primary('❯ ') : '  ';
+                    const label = `${String(i + 1)}. ${PRIORITY_LABELS[PRIORITY_OPTIONS[i]]}`;
+                    lines.push(`  ${prefix}${isSelected ? s.primary(label) : s.muted(label)}`);
+                }
+                break;
+            case 2: // Title
+                lines.push(`  ${chalk.bold('Title (short description)')}`);
+                lines.push('');
+                lines.push(`  > ${this.inputBuffer}█`);
+                lines.push('');
+                if (this.error) {
+                    lines.push(`  ${s.error(this.error)}`);
+                }
+                else {
+                    lines.push(`  ${s.muted('Keep it concise (2-100 characters)')}`);
+                }
+                break;
+            case 3: // Description
+                lines.push(`  ${chalk.bold('Description (details)')}`);
+                lines.push('');
+                lines.push(`  > ${this.inputBuffer}█`);
+                lines.push('');
+                if (this.error) {
+                    lines.push(`  ${s.error(this.error)}`);
+                }
+                else {
+                    lines.push(`  ${s.muted('Explain the requirement or issue')}`);
+                }
+                break;
+            case 4: // Confirm
+                lines.push(`  ${chalk.bold('Confirm new item:')}`);
+                lines.push('');
+                lines.push(`  ${s.muted('Type:')} ${this.newItem.type ? TYPE_LABELS[this.newItem.type] : 'N/A'}`);
+                lines.push(`  ${s.muted('Priority:')} ${this.newItem.priority ? PRIORITY_LABELS[this.newItem.priority] : 'N/A'}`);
+                lines.push(`  ${s.muted('Title:')} ${this.newItem.title}`);
+                lines.push(`  ${s.muted('Description:')} ${this.newItem.description}`);
+                lines.push('');
+                for (let i = 0; i < 2; i++) {
+                    const isSelected = this.selectedIndex === i;
+                    const prefix = isSelected ? s.primary('❯ ') : '  ';
+                    const label = i === 0 ? '1. Create item' : '2. Cancel';
+                    lines.push(`  ${prefix}${isSelected ? s.primary(label) : s.muted(label)}`);
+                }
+                break;
+        }
+        lines.push('');
+        lines.push(border);
+        if (this.step === 2 || this.step === 3) {
+            lines.push(`  ${s.muted('Enter Confirm · Esc Back')}`);
+        }
+        else {
+            lines.push(`  ${s.muted('↑↓/jk Navigate · Enter Select · Esc Back')}`);
+        }
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        const char = extractPrintable(data);
+        // Ctrl+C closes everything
+        if (isCtrlC(data)) {
+            return closeOverlay({ modified: this.editState.modified });
+        }
+        // Text input steps (title and description)
+        if (this.step === 2 || this.step === 3) {
+            if (isEscape(data)) {
+                if (this.step === 2) {
+                    this.step = 1;
+                    this.selectedIndex = 0;
+                }
+                else {
+                    this.step = 2;
+                    this.inputBuffer = this.newItem.title;
+                }
+                this.error = null;
+                return stay();
+            }
+            if (isEnter(data)) {
+                const text = this.inputBuffer.trim();
+                if (this.step === 2) {
+                    if (text.length < 2) {
+                        this.error = 'Title too short (min 2 characters)';
+                    }
+                    else if (text.length > 100) {
+                        this.error = 'Title too long (max 100 characters)';
+                    }
+                    else {
+                        this.newItem.title = text;
+                        this.step = 3;
+                        this.inputBuffer = '';
+                        this.error = null;
+                    }
+                }
+                else {
+                    if (text.length < 5) {
+                        this.error = 'Description too short (min 5 characters)';
+                    }
+                    else {
+                        this.newItem.description = text;
+                        this.step = 4;
+                        this.selectedIndex = 0;
+                        this.error = null;
+                    }
+                }
+                return stay();
+            }
+            if (isBackspace(data)) {
+                this.inputBuffer = this.inputBuffer.slice(0, -1);
+                return stay();
+            }
+            if (char) {
+                this.inputBuffer += char;
+                return stay();
+            }
+            return stay(false);
+        }
+        // Selection steps (type, priority, confirm)
+        if (isEscape(data)) {
+            if (this.step === 0) {
+                return popScreen();
+            }
+            else if (this.step === 4) {
+                this.step = 3;
+                this.inputBuffer = this.newItem.description;
+            }
+            else {
+                this.step = (this.step - 1);
+                this.selectedIndex = 0;
+            }
+            return stay();
+        }
+        if (isNavigateUp(data)) {
+            this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+            return stay();
+        }
+        if (isNavigateDown(data)) {
+            const maxIdx = this.getMaxIndexForStep();
+            this.selectedIndex = Math.min(maxIdx, this.selectedIndex + 1);
+            return stay();
+        }
+        if (isEnter(data)) {
+            switch (this.step) {
+                case 0:
+                    this.newItem.type = TYPE_OPTIONS[this.selectedIndex];
+                    this.step = 1;
+                    this.selectedIndex = 0;
+                    break;
+                case 1:
+                    this.newItem.priority = PRIORITY_OPTIONS[this.selectedIndex];
+                    this.step = 2;
+                    this.inputBuffer = '';
+                    break;
+                case 4:
+                    if (this.newItem.type && this.newItem.priority && this.editState.projectId) {
+                        if (this.selectedIndex === 0) {
+                            // Create item in database
+                            createItem(this.editState.projectId, this.newItem.type, this.newItem.priority, this.newItem.title, this.newItem.description);
+                            this.editState.modified = true;
+                            this.editState.reloadItems();
+                        }
+                        return popScreen();
+                    }
+                    break;
+            }
+            return stay();
+        }
+        // Number keys for quick selection
+        if (char && char >= '1' && char <= '9') {
+            const numIdx = parseInt(char, 10) - 1;
+            const maxIdx = this.getMaxIndexForStep();
+            if (numIdx <= maxIdx) {
+                this.selectedIndex = numIdx;
+                return stay();
+            }
+        }
+        return stay(false);
+    }
+    getMaxIndexForStep() {
+        switch (this.step) {
+            case 0: return TYPE_OPTIONS.length - 1;
+            case 1: return PRIORITY_OPTIONS.length - 1;
+            case 4: return 1;
+            default: return 0;
+        }
+    }
+    /**
+     * Minimum height for stable rendering.
+     */
+    getMinHeight() {
+        return 18;
+    }
+}
+// =============================================================================
+// Backlog Overlay V2 Class
+// =============================================================================
+export class BacklogOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'backlog-overlay-v2';
+    editState;
+    /**
+     * @param projectId - Optional project ID to view backlog for.
+     *                    If not provided, uses the active project.
+     *                    Pass this when opening from workflow overlay for a specific project.
+     */
+    constructor(projectId) {
+        // Use provided projectId, or fall back to active project
+        const activeProject = getActiveProject();
+        const resolvedProjectId = projectId ?? activeProject?.id ?? null;
+        // Load items from database (empty if no project)
+        const items = resolvedProjectId ? loadItemsFromDb(resolvedProjectId) : [];
+        super({
+            title: 'Backlog',
+            tabs: TABS,
+            items,
+            pageSize: PAGE_SIZE,
+            filterByTab: (item, tabId) => {
+                if (tabId === 'all')
+                    return true;
+                if (tabId === 'active') {
+                    return item.status === '📋' || item.status === '🚧';
+                }
+                return item.type === tabId;
+            },
+            getSearchText: (item) => `${item.id} ${item.title} ${item.description}`,
+            renderItem: (item, isSelected, styles) => {
+                const cols = terminal.getTerminalWidth();
+                const prefix = isSelected ? styles.primary('❯ ') : '  ';
+                const idW = 10;
+                const typeW = 10;
+                const statusW = 4;
+                const priW = 8;
+                const titleW = Math.max(20, cols - idW - typeW - statusW - priW - 10);
+                const row = `${item.id.padEnd(idW)}${item.type.padEnd(typeW)}${item.status.padEnd(statusW)}${item.priority.padEnd(priW)}${item.title.slice(0, titleW - 2)}`;
+                if (isSelected) {
+                    return `${prefix}${styles.primary(row)}`;
+                }
+                return `${prefix}${styles.muted(row)}`;
+            },
+            showCount: true,
+            emptyMessage: resolvedProjectId === null
+                ? 'No active project. Use /projects to select one.'
+                : 'No items found. Use [a] to add or /design to create initial backlog.',
+            noResultsMessage: 'No items match the search.',
+            renderSelectedPreview: (item, styles) => {
+                const cols = terminal.getTerminalWidth();
+                const descPrefix = ' Desc: ';
+                const maxDescLen = cols - descPrefix.length - 2;
+                const truncatedDesc = item.description.length > maxDescLen
+                    ? item.description.slice(0, maxDescLen - 3) + '...'
+                    : item.description;
+                const lines = [styles.muted(descPrefix) + truncatedDesc];
+                if (item.commit) {
+                    lines.push(styles.muted(' Commit: ') + item.commit);
+                }
+                return lines;
+            },
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to search · Enter/Esc Exit search · Backspace Delete';
+                }
+                return '/ Search · ↑↓/jk Navigate · ←→/hl Pages · Tab Filter · Space Toggle · a Add · q/Esc Close';
+            },
+        });
+        // Create edit state that screens can share
+        this.editState = {
+            modified: false,
+            projectId: resolvedProjectId,
+            items,
+            reloadItems: () => {
+                if (this.editState.projectId) {
+                    this.editState.items = loadItemsFromDb(this.editState.projectId);
+                    // Update the overlay's internal state
+                    this.state.items = this.editState.items;
+                    // Re-apply filters
+                    const currentTabId = this.listConfig.tabs[this.state.currentTab]?.id ?? 'all';
+                    let filtered = this.state.items.filter((item) => this.listConfig.filterByTab(item, currentTabId));
+                    if (this.state.searchQuery) {
+                        const query = this.state.searchQuery.toLowerCase();
+                        filtered = filtered.filter((item) => this.listConfig.getSearchText(item).toLowerCase().includes(query));
+                    }
+                    this.state.filteredItems = filtered;
+                }
+            },
+        };
+    }
+    createDetailScreen(item) {
+        return new DetailScreen(item, this.editState, this.getStyles());
+    }
+    /**
+     * Override handleKey to add custom behavior (Space toggle, 'a' add).
+     */
+    handleKey(key) {
+        const data = key.raw;
+        // Only intercept when on the main list screen
+        if (this.screenStack.size() === 1) {
+            // Ctrl+C always closes
+            if (isCtrlC(data)) {
+                return this.close({ modified: this.editState.modified });
+            }
+            // Only handle custom keys when not in search mode
+            if (!this.state.searchMode) {
+                const char = extractPrintable(data);
+                // Space - toggle status
+                if (isSpace(data) && this.state.filteredItems.length > 0) {
+                    const item = this.state.filteredItems[this.state.selectedIndex];
+                    // Cycle through statuses: 📋 → 🚧 → ✅ → 📋
+                    const statusIdx = STATUS_OPTIONS.indexOf(item.status);
+                    const newStatus = STATUS_OPTIONS[(statusIdx + 1) % STATUS_OPTIONS.length];
+                    updateItemStatus(item.dbId, newStatus);
+                    this.editState.modified = true;
+                    this.editState.reloadItems();
+                    return this.rerender();
+                }
+                // 'a' - add mode
+                if (char === 'a' || char === 'A') {
+                    if (this.editState.projectId) {
+                        const addScreen = new AddScreen(this.editState, this.getStyles());
+                        this.screenStack.push(addScreen);
+                        return this.rerender();
+                    }
+                    return this.noAction();
+                }
+                // 'q' or Esc closes with result
+                if (char === 'q' || isEscape(data)) {
+                    return this.close({ modified: this.editState.modified });
+                }
+            }
+        }
+        // Let parent handle other keys (tabs, search, pagination, Enter for detail)
+        return super.handleKey(key);
+    }
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Commands Overlay V2
+ *
+ * Modal overlay for viewing and managing custom command definitions.
+ * Uses TabbedListOverlayV2 for consistent navigation patterns.
+ *
+ * Features:
+ * - Tabs: All, Project, Personal
+ * - Search with / toggle
+ * - Detail view for command information
+ * - Wizard for creating new commands
+ */
+import { type CustomCommand } from '../../../commands/index.js';
+import { TabbedListOverlayV2, BaseScreen } from '../../base/index.js';
+export interface CommandsOverlayV2Result {
+    /** Command that was created (if any) */
+    created?: string;
+}
+type CommandItem = CustomCommand | {
+    type: 'create';
+};
+/**
+ * Commands overlay using TabbedListOverlayV2.
+ * Displays custom commands in a searchable, tabbed list.
+ */
+export declare class CommandsOverlayV2 extends TabbedListOverlayV2<CommandItem, CommandsOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "commands-overlay-v2";
+    private readonly registry;
+    constructor();
+    protected createDetailScreen(item: CommandItem): BaseScreen | null;
+}
+export {};