@compilr-dev/cli 0.4.0

package/dist/ui/backlog-overlay.js

@@ -0,0 +1,786 @@
+/**
+ * Backlog Overlay
+ *
+ * Modal overlay for viewing and managing the project backlog.
+ * Provides a UI for manually adding, editing, and filtering backlog items.
+ *
+ * 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
+ */
+import chalk from 'chalk';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as terminal from './terminal.js';
+import { getStyles } from '../themes/index.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',
+};
+// =============================================================================
+// Backlog File Operations
+// =============================================================================
+function findBacklogPath() {
+    const cwd = process.cwd();
+    // Single repo pattern: .compilr/backlog.md
+    const singleRepoPath = path.join(cwd, '.compilr', 'backlog.md');
+    if (fs.existsSync(singleRepoPath)) {
+        return singleRepoPath;
+    }
+    // Two repo pattern: look for -docs sibling folder
+    const parentDir = path.dirname(cwd);
+    const projectName = path.basename(cwd);
+    const docsRepoPath = path.join(parentDir, `${projectName}-docs`, '01-planning', 'backlog.md');
+    if (fs.existsSync(docsRepoPath)) {
+        return docsRepoPath;
+    }
+    // Check if we're in the docs repo itself
+    const inDocsPath = path.join(cwd, '01-planning', 'backlog.md');
+    if (fs.existsSync(inDocsPath)) {
+        return inDocsPath;
+    }
+    // Check for project subfolders with -docs pattern
+    try {
+        const entries = fs.readdirSync(cwd, { withFileTypes: true });
+        for (const entry of entries) {
+            if (entry.isDirectory() && entry.name.endsWith('-docs')) {
+                const docsBacklog = path.join(cwd, entry.name, '01-planning', 'backlog.md');
+                if (fs.existsSync(docsBacklog)) {
+                    return docsBacklog;
+                }
+            }
+        }
+    }
+    catch {
+        // Ignore read errors
+    }
+    return null;
+}
+function parseBacklogItems(content) {
+    const items = [];
+    const lines = content.split('\n');
+    let inTable = false;
+    for (const line of lines) {
+        const trimmed = line.trim();
+        if (trimmed.startsWith('| ID |')) {
+            inTable = true;
+            continue;
+        }
+        if (trimmed.startsWith('|---')) {
+            continue;
+        }
+        if (inTable && trimmed.startsWith('|')) {
+            const cells = trimmed.split('|').map(c => c.trim()).filter(c => c !== '');
+            if (cells.length >= 6) {
+                const [id, type, status, priority, title, description, commit] = cells;
+                if (id && /^[A-Z]+-\d{3}$/.test(id)) {
+                    items.push({
+                        id,
+                        type: type,
+                        status: status,
+                        priority: priority,
+                        title,
+                        description,
+                        commit: commit || undefined,
+                    });
+                }
+            }
+        }
+        else if (inTable && !trimmed.startsWith('|')) {
+            inTable = false;
+        }
+    }
+    return items;
+}
+function generateBacklogMarkdown(items) {
+    const date = new Date().toISOString().split('T')[0];
+    let content = `# Backlog
+
+| ID | Type | Status | Priority | Title | Description | Commit |
+|----|------|--------|----------|-------|-------------|--------|
+`;
+    for (const item of items) {
+        content += `| ${item.id} | ${item.type} | ${item.status} | ${item.priority} | ${item.title} | ${item.description} | ${item.commit ?? ''} |\n`;
+    }
+    content += `
+---
+
+*Last updated: ${date} by user*
+`;
+    return content;
+}
+function generateId(type, existingItems) {
+    const prefixMap = {
+        'feature': 'REQ',
+        'bug': 'BUG',
+        'tech-debt': 'TECH',
+        'chore': 'CHORE',
+    };
+    const prefix = prefixMap[type];
+    let maxNum = 0;
+    for (const item of existingItems) {
+        if (item.id.startsWith(prefix + '-')) {
+            const num = parseInt(item.id.split('-')[1], 10);
+            if (!isNaN(num) && num > maxNum) {
+                maxNum = num;
+            }
+        }
+    }
+    return `${prefix}-${String(maxNum + 1).padStart(3, '0')}`;
+}
+// =============================================================================
+// Filtering & Search
+// =============================================================================
+function updateFilteredItems(state) {
+    let results = [...state.items];
+    // Apply type filter
+    if (state.filterType === 'active') {
+        // Active = not completed (📋 or 🚧)
+        results = results.filter(item => item.status === '📋' || item.status === '🚧');
+    }
+    else if (state.filterType !== 'all') {
+        results = results.filter(item => item.type === state.filterType);
+    }
+    // Apply search query
+    if (state.searchQuery.trim()) {
+        const query = state.searchQuery.toLowerCase();
+        results = results.filter(item => item.title.toLowerCase().includes(query) ||
+            item.description.toLowerCase().includes(query) ||
+            item.id.toLowerCase().includes(query));
+    }
+    state.filteredItems = results;
+    state.selectedIndex = 0;
+    state.currentPage = 0;
+}
+// =============================================================================
+// Rendering
+// =============================================================================
+function render(state, prevLineCount) {
+    const s = getStyles();
+    const lines = [];
+    const cols = terminal.getTerminalWidth();
+    const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+    // Clear previous content
+    terminal.clearLinesAbove(prevLineCount);
+    // Header
+    lines.push(border);
+    lines.push(' ' + s.primaryBold('BACKLOG') + s.muted(`  (${String(state.items.length)} total)`));
+    lines.push('');
+    if (state.mode === 'view') {
+        // Search box - show cursor only when in search mode
+        const searchCursor = state.isSearching ? '█' : '';
+        const searchPrefix = state.isSearching ? s.primary(' Search: ') : s.muted(' Search: ');
+        lines.push(searchPrefix + state.searchQuery + searchCursor);
+        // Filter tabs
+        const tabAll = state.filterType === 'all' ? s.selected(' All ') : s.muted(' All ');
+        const tabActive = state.filterType === 'active' ? s.selected(' Active ') : s.muted(' Active ');
+        const tabFeature = state.filterType === 'feature' ? s.selected(' Feature ') : s.muted(' Feature ');
+        const tabBug = state.filterType === 'bug' ? s.selected(' Bug ') : s.muted(' Bug ');
+        const tabTech = state.filterType === 'tech-debt' ? s.selected(' Tech ') : s.muted(' Tech ');
+        const tabChore = state.filterType === 'chore' ? s.selected(' Chore ') : s.muted(' Chore ');
+        lines.push(` Filter: ${tabAll}${tabActive}${tabFeature}${tabBug}${tabTech}${tabChore}  ${s.muted('(Tab)')}`);
+        lines.push('');
+        // Results info
+        const totalResults = state.filteredItems.length;
+        const totalPages = Math.ceil(totalResults / PAGE_SIZE);
+        const startIndex = state.currentPage * PAGE_SIZE;
+        const endIndex = Math.min(startIndex + PAGE_SIZE, totalResults);
+        const pageItems = state.filteredItems.slice(startIndex, endIndex);
+        if (totalResults === 0) {
+            lines.push(s.muted(' No items found'));
+            if (state.searchQuery || state.filterType !== 'all') {
+                lines.push(s.muted(' Try clearing search or changing filter'));
+            }
+            else {
+                lines.push(s.muted(' Use [a] to add a new item or /design to create initial backlog'));
+            }
+        }
+        else {
+            lines.push(s.muted(` Showing ${String(startIndex + 1)}-${String(endIndex)} of ${String(totalResults)}:`));
+            lines.push('');
+            // Table header
+            const idW = 10;
+            const typeW = 10;
+            const statusW = 4;
+            const priW = 8;
+            const titleW = Math.max(20, cols - idW - typeW - statusW - priW - 10);
+            lines.push(s.muted(` ${'ID'.padEnd(idW)}${'Type'.padEnd(typeW)}${'St'.padEnd(statusW)}${'Pri'.padEnd(priW)}${'Title'.slice(0, titleW)}`));
+            // Items
+            for (let i = 0; i < pageItems.length; i++) {
+                const item = pageItems[i];
+                const isSelected = i === state.selectedIndex;
+                const prefix = isSelected ? '❯' : ' ';
+                const row = `${prefix}${item.id.padEnd(idW)}${item.type.padEnd(typeW)}${item.status.padEnd(statusW)}${item.priority.padEnd(priW)}${item.title.slice(0, titleW - 2)}`;
+                if (isSelected) {
+                    lines.push(s.primary(' ' + row));
+                }
+                else {
+                    lines.push(s.muted(' ' + row));
+                }
+            }
+            // Selected item details (truncate to prevent line wrapping)
+            if (pageItems.length > 0 && state.selectedIndex < pageItems.length) {
+                lines.push('');
+                const selected = pageItems[state.selectedIndex];
+                const descPrefix = ' Desc: ';
+                const maxDescLen = cols - descPrefix.length - 2;
+                const truncatedDesc = selected.description.length > maxDescLen
+                    ? selected.description.slice(0, maxDescLen - 3) + '...'
+                    : selected.description;
+                lines.push(s.muted(descPrefix) + truncatedDesc);
+                if (selected.commit) {
+                    lines.push(s.muted(' Commit: ') + selected.commit);
+                }
+            }
+        }
+        lines.push('');
+        // Pagination
+        if (totalPages > 1) {
+            const pageInfo = `Page ${String(state.currentPage + 1)} of ${String(totalPages)}`;
+            const prevHint = state.currentPage > 0 ? '← ' : '  ';
+            const nextHint = state.currentPage < totalPages - 1 ? ' →' : '';
+            lines.push(s.muted(` ${prevHint}${pageInfo}${nextHint}`));
+        }
+        lines.push(border);
+        if (state.isSearching) {
+            lines.push(s.muted(' Type to search · Enter/Esc Exit search · Backspace Delete'));
+        }
+        else {
+            lines.push(s.muted(' / Search · ↑↓ Navigate · ←→ Pages · Tab Filter · Enter Detail · Space Toggle · a Add · Esc Close'));
+        }
+    }
+    else if (state.mode === 'detail') {
+        // Detail view
+        const item = state.detailItem;
+        if (item) {
+            lines.push(chalk.bold(` ${item.id}: ${item.title}`));
+            lines.push('');
+            // Editable fields with selection indicator
+            const typePrefix = state.detailField === 0 ? s.primary('❯ Type: ') : s.muted('  Type: ');
+            const typeValue = state.detailField === 0 ? s.primary(TYPE_LABELS[item.type]) : TYPE_LABELS[item.type];
+            lines.push(typePrefix + typeValue);
+            const statusPrefix = state.detailField === 1 ? s.primary('❯ Status: ') : s.muted('  Status: ');
+            const statusValue = item.status + ' ' + getStatusLabel(item.status);
+            lines.push(statusPrefix + (state.detailField === 1 ? s.primary(statusValue) : statusValue));
+            const priPrefix = state.detailField === 2 ? s.primary('❯ Priority: ') : s.muted('  Priority: ');
+            const priValue = state.detailField === 2 ? s.primary(PRIORITY_LABELS[item.priority]) : PRIORITY_LABELS[item.priority];
+            lines.push(priPrefix + priValue);
+            lines.push('');
+            lines.push(s.muted(' Description:'));
+            // Word-wrap description to fit terminal width
+            const descLines = wrapText(item.description, cols - 4);
+            for (const line of descLines) {
+                lines.push('   ' + line);
+            }
+            if (item.commit) {
+                lines.push('');
+                lines.push(s.muted(' Commit: ') + item.commit);
+            }
+        }
+        lines.push('');
+        lines.push(border);
+        lines.push(s.muted(' ↑↓ Select field · ←→ Change value · Esc Back'));
+    }
+    else {
+        // Add mode rendering
+        const stepLabels = ['Type', 'Priority', 'Title', 'Description', 'Confirm'];
+        lines.push(s.muted(` Step ${String(state.addStep + 1)}/5: ${stepLabels[state.addStep]}`));
+        lines.push('');
+        switch (state.addStep) {
+            case 0: // Type
+                lines.push(chalk.bold(' What type of item?'));
+                lines.push('');
+                for (let i = 0; i < TYPE_OPTIONS.length; i++) {
+                    const isSelected = state.selectedIndex === i;
+                    const prefix = isSelected ? ' ❯ ' : '   ';
+                    const label = `${String(i + 1)}. ${TYPE_LABELS[TYPE_OPTIONS[i]]}`;
+                    lines.push(isSelected ? s.primary(prefix + label) : s.muted(prefix + label));
+                }
+                break;
+            case 1: // Priority
+                lines.push(chalk.bold(' Priority level?'));
+                lines.push('');
+                for (let i = 0; i < PRIORITY_OPTIONS.length; i++) {
+                    const isSelected = state.selectedIndex === i;
+                    const prefix = isSelected ? ' ❯ ' : '   ';
+                    const label = `${String(i + 1)}. ${PRIORITY_LABELS[PRIORITY_OPTIONS[i]]}`;
+                    lines.push(isSelected ? s.primary(prefix + label) : s.muted(prefix + label));
+                }
+                break;
+            case 2: // Title
+                lines.push(chalk.bold(' Title (short description)'));
+                lines.push('');
+                lines.push(` > ${state.inputBuffer}█`);
+                lines.push('');
+                if (state.error) {
+                    lines.push(s.error(` ${state.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(` > ${state.inputBuffer}█`);
+                lines.push('');
+                if (state.error) {
+                    lines.push(s.error(` ${state.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: ') + (state.newItem.type ? TYPE_LABELS[state.newItem.type] : 'N/A'));
+                lines.push(s.muted(' Priority: ') + (state.newItem.priority ? PRIORITY_LABELS[state.newItem.priority] : 'N/A'));
+                lines.push(s.muted(' Title: ') + state.newItem.title);
+                lines.push(s.muted(' Description: ') + state.newItem.description);
+                lines.push('');
+                for (let i = 0; i < 2; i++) {
+                    const isSelected = state.selectedIndex === i;
+                    const prefix = isSelected ? ' ❯ ' : '   ';
+                    const label = i === 0 ? '1. Create item' : '2. Cancel';
+                    lines.push(isSelected ? s.primary(prefix + label) : s.muted(prefix + label));
+                }
+                break;
+        }
+        lines.push('');
+        lines.push(border);
+        if (state.addStep === 2 || state.addStep === 3) {
+            lines.push(s.muted(' Enter Confirm · Esc Go back'));
+        }
+        else {
+            lines.push(s.muted(' ↑↓ Navigate · Enter Select · Esc Go back'));
+        }
+    }
+    // Write new content
+    terminal.write(lines.join('\n'));
+    return lines.length;
+}
+// =============================================================================
+// Helper Functions
+// =============================================================================
+function getStatusLabel(status) {
+    switch (status) {
+        case '📋': return 'Backlog';
+        case '🚧': return 'In Progress';
+        case '✅': return 'Completed';
+        default: return '';
+    }
+}
+function wrapText(text, maxWidth) {
+    if (text.length <= maxWidth)
+        return [text];
+    const words = text.split(' ');
+    const lines = [];
+    let currentLine = '';
+    for (const word of words) {
+        if (currentLine.length === 0) {
+            currentLine = word;
+        }
+        else if (currentLine.length + 1 + word.length <= maxWidth) {
+            currentLine += ' ' + word;
+        }
+        else {
+            lines.push(currentLine);
+            currentLine = word;
+        }
+    }
+    if (currentLine.length > 0) {
+        lines.push(currentLine);
+    }
+    return lines;
+}
+function getMaxIndexForAddStep(step) {
+    switch (step) {
+        case 0: return TYPE_OPTIONS.length - 1;
+        case 1: return PRIORITY_OPTIONS.length - 1;
+        case 4: return 1;
+        default: return 0;
+    }
+}
+// =============================================================================
+// Main Export
+// =============================================================================
+export async function showBacklogOverlay() {
+    const backlogPath = findBacklogPath();
+    let items = [];
+    if (backlogPath && fs.existsSync(backlogPath)) {
+        const content = fs.readFileSync(backlogPath, 'utf-8');
+        items = parseBacklogItems(content);
+    }
+    const state = {
+        mode: 'view',
+        items,
+        filteredItems: [...items],
+        selectedIndex: 0,
+        backlogPath,
+        searchQuery: '',
+        filterType: 'all',
+        isSearching: false,
+        currentPage: 0,
+        detailItem: null,
+        detailField: 0,
+        addStep: 0,
+        newItem: {
+            type: null,
+            priority: null,
+            title: '',
+            description: '',
+        },
+        inputBuffer: '',
+        error: null,
+    };
+    let lineCount = 0;
+    let modified = false;
+    terminal.writeLine('');
+    terminal.hideCursor();
+    const wasRawMode = process.stdin.isRaw;
+    terminal.enableRawMode();
+    lineCount = render(state, 0);
+    // Save changes to file
+    const saveChanges = () => {
+        if (state.backlogPath) {
+            const content = generateBacklogMarkdown(state.items);
+            const dir = path.dirname(state.backlogPath);
+            if (!fs.existsSync(dir)) {
+                fs.mkdirSync(dir, { recursive: true });
+            }
+            fs.writeFileSync(state.backlogPath, content, 'utf-8');
+            modified = true;
+            // Update filtered items after save
+            updateFilteredItems(state);
+        }
+    };
+    return new Promise((resolve) => {
+        const cleanup = () => {
+            terminal.clearLinesAbove(lineCount);
+            terminal.writeLine('');
+            terminal.showCursor();
+            if (!wasRawMode) {
+                terminal.disableRawMode();
+            }
+            process.stdin.removeListener('data', handleData);
+        };
+        const handleData = (data) => {
+            const isEscape = data.length === 1 && data[0] === 0x1b;
+            const isUpArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x41;
+            const isDownArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x42;
+            const isLeftArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x44;
+            const isRightArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x43;
+            const isCtrlC = data.length === 1 && data[0] === 0x03;
+            const isEnter = data.length === 1 && (data[0] === 0x0d || data[0] === 0x0a);
+            const isBackspace = data.length === 1 && (data[0] === 0x7f || data[0] === 0x08);
+            const isSpace = data.length === 1 && data[0] === 0x20;
+            const isTab = data.length === 1 && data[0] === 0x09;
+            const char = data.length === 1 && data[0] >= 0x20 && data[0] < 0x7f ? String.fromCharCode(data[0]) : null;
+            if (isCtrlC) {
+                cleanup();
+                resolve({ modified });
+                return;
+            }
+            // ===== VIEW MODE =====
+            if (state.mode === 'view') {
+                const totalResults = state.filteredItems.length;
+                const totalPages = Math.ceil(totalResults / PAGE_SIZE);
+                const pageItems = state.filteredItems.slice(state.currentPage * PAGE_SIZE, (state.currentPage + 1) * PAGE_SIZE);
+                // ----- SEARCH MODE -----
+                if (state.isSearching) {
+                    // Escape or Enter exits search mode
+                    if (isEscape || isEnter) {
+                        state.isSearching = false;
+                        lineCount = render(state, lineCount);
+                        return;
+                    }
+                    // Backspace deletes search char
+                    if (isBackspace) {
+                        state.searchQuery = state.searchQuery.slice(0, -1);
+                        updateFilteredItems(state);
+                        lineCount = render(state, lineCount);
+                        return;
+                    }
+                    // All printable chars go to search
+                    if (char) {
+                        state.searchQuery += char;
+                        updateFilteredItems(state);
+                        lineCount = render(state, lineCount);
+                        return;
+                    }
+                    return;
+                }
+                // ----- NORMAL MODE (not searching) -----
+                // Escape closes overlay
+                if (isEscape) {
+                    cleanup();
+                    resolve({ modified });
+                    return;
+                }
+                // '/' enters search mode (vim-style)
+                if (char === '/') {
+                    state.isSearching = true;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Tab cycles filter type
+                if (isTab) {
+                    const filters = ['all', 'active', 'feature', 'bug', 'tech-debt', 'chore'];
+                    const currentIdx = filters.indexOf(state.filterType);
+                    state.filterType = filters[(currentIdx + 1) % filters.length];
+                    updateFilteredItems(state);
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Navigation
+                if (isUpArrow && state.selectedIndex > 0) {
+                    state.selectedIndex--;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                if (isDownArrow && state.selectedIndex < pageItems.length - 1) {
+                    state.selectedIndex++;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Page navigation
+                if (isLeftArrow && state.currentPage > 0) {
+                    state.currentPage--;
+                    state.selectedIndex = 0;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                if (isRightArrow && state.currentPage < totalPages - 1) {
+                    state.currentPage++;
+                    state.selectedIndex = 0;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Space - toggle status
+                if (isSpace && pageItems.length > 0) {
+                    const item = pageItems[state.selectedIndex];
+                    // Find actual item in state.items
+                    const actualItem = state.items.find(i => i.id === item.id);
+                    if (actualItem) {
+                        const statusIdx = STATUS_OPTIONS.indexOf(actualItem.status);
+                        actualItem.status = STATUS_OPTIONS[(statusIdx + 1) % STATUS_OPTIONS.length];
+                        saveChanges();
+                    }
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Enter - open detail view
+                if (isEnter && pageItems.length > 0) {
+                    state.detailItem = pageItems[state.selectedIndex];
+                    state.mode = 'detail';
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // 'a' - add mode
+                if (char === 'a' || char === 'A') {
+                    state.mode = 'add';
+                    state.addStep = 0;
+                    state.selectedIndex = 0;
+                    state.newItem = { type: null, priority: null, title: '', description: '' };
+                    state.inputBuffer = '';
+                    state.error = null;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                return;
+            }
+            // ===== DETAIL MODE =====
+            if (state.mode === 'detail') {
+                // Escape - back to view
+                if (isEscape) {
+                    state.mode = 'view';
+                    state.detailItem = null;
+                    state.detailField = 0;
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Up/Down - navigate fields
+                if (isUpArrow && state.detailField > 0) {
+                    state.detailField = (state.detailField - 1);
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                if (isDownArrow && state.detailField < 2) {
+                    state.detailField = (state.detailField + 1);
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                // Left/Right - change value of selected field
+                if ((isLeftArrow || isRightArrow) && state.detailItem) {
+                    const detailId = state.detailItem.id;
+                    const actualItem = state.items.find(i => i.id === detailId);
+                    if (actualItem) {
+                        const direction = isRightArrow ? 1 : -1;
+                        if (state.detailField === 0) {
+                            // Type
+                            const currentIdx = TYPE_OPTIONS.indexOf(actualItem.type);
+                            const newIdx = (currentIdx + direction + TYPE_OPTIONS.length) % TYPE_OPTIONS.length;
+                            actualItem.type = TYPE_OPTIONS[newIdx];
+                        }
+                        else if (state.detailField === 1) {
+                            // Status
+                            const currentIdx = STATUS_OPTIONS.indexOf(actualItem.status);
+                            const newIdx = (currentIdx + direction + STATUS_OPTIONS.length) % STATUS_OPTIONS.length;
+                            actualItem.status = STATUS_OPTIONS[newIdx];
+                        }
+                        else {
+                            // Priority
+                            const currentIdx = PRIORITY_OPTIONS.indexOf(actualItem.priority);
+                            const newIdx = (currentIdx + direction + PRIORITY_OPTIONS.length) % PRIORITY_OPTIONS.length;
+                            actualItem.priority = PRIORITY_OPTIONS[newIdx];
+                        }
+                        state.detailItem = actualItem;
+                        saveChanges();
+                    }
+                    lineCount = render(state, lineCount);
+                    return;
+                }
+                return;
+            }
+            // ===== ADD MODE =====
+            {
+                if (state.addStep === 2 || state.addStep === 3) {
+                    // Text input steps
+                    if (isEscape) {
+                        if (state.addStep === 2) {
+                            state.addStep = 1;
+                            state.selectedIndex = 0;
+                        }
+                        else {
+                            state.addStep = 2;
+                            state.inputBuffer = state.newItem.title;
+                        }
+                        state.error = null;
+                    }
+                    else if (isEnter) {
+                        const text = state.inputBuffer.trim();
+                        if (state.addStep === 2) {
+                            if (text.length < 2) {
+                                state.error = 'Title too short (min 2 characters)';
+                            }
+                            else if (text.length > 100) {
+                                state.error = 'Title too long (max 100 characters)';
+                            }
+                            else {
+                                state.newItem.title = text;
+                                state.addStep = 3;
+                                state.inputBuffer = '';
+                                state.error = null;
+                            }
+                        }
+                        else {
+                            if (text.length < 5) {
+                                state.error = 'Description too short (min 5 characters)';
+                            }
+                            else {
+                                state.newItem.description = text;
+                                state.addStep = 4;
+                                state.selectedIndex = 0;
+                                state.error = null;
+                            }
+                        }
+                    }
+                    else if (isBackspace) {
+                        state.inputBuffer = state.inputBuffer.slice(0, -1);
+                    }
+                    else if (char) {
+                        state.inputBuffer += char;
+                    }
+                }
+                else {
+                    // Selection steps
+                    if (isEscape) {
+                        if (state.addStep === 0) {
+                            state.mode = 'view';
+                            state.selectedIndex = 0;
+                        }
+                        else if (state.addStep === 4) {
+                            state.addStep = 3;
+                            state.inputBuffer = state.newItem.description;
+                        }
+                        else {
+                            state.addStep = (state.addStep - 1);
+                            state.selectedIndex = 0;
+                        }
+                    }
+                    else if (isUpArrow) {
+                        state.selectedIndex = Math.max(0, state.selectedIndex - 1);
+                    }
+                    else if (isDownArrow) {
+                        const maxIdx = getMaxIndexForAddStep(state.addStep);
+                        state.selectedIndex = Math.min(maxIdx, state.selectedIndex + 1);
+                    }
+                    else if (isEnter) {
+                        switch (state.addStep) {
+                            case 0:
+                                state.newItem.type = TYPE_OPTIONS[state.selectedIndex];
+                                state.addStep = 1;
+                                state.selectedIndex = 0;
+                                break;
+                            case 1:
+                                state.newItem.priority = PRIORITY_OPTIONS[state.selectedIndex];
+                                state.addStep = 2;
+                                state.inputBuffer = '';
+                                break;
+                            case 4:
+                                if (state.newItem.type && state.newItem.priority) {
+                                    if (state.selectedIndex === 0) {
+                                        // Create item
+                                        const id = generateId(state.newItem.type, state.items);
+                                        const newItem = {
+                                            id,
+                                            type: state.newItem.type,
+                                            status: '📋',
+                                            priority: state.newItem.priority,
+                                            title: state.newItem.title,
+                                            description: state.newItem.description,
+                                        };
+                                        state.items.push(newItem);
+                                        updateFilteredItems(state);
+                                        saveChanges();
+                                    }
+                                    state.mode = 'view';
+                                    state.selectedIndex = Math.min(state.selectedIndex, Math.max(0, state.filteredItems.length - 1));
+                                }
+                                break;
+                        }
+                    }
+                    else if (char && char >= '1' && char <= '9') {
+                        const numIdx = parseInt(char, 10) - 1;
+                        const maxIdx = getMaxIndexForAddStep(state.addStep);
+                        if (numIdx <= maxIdx) {
+                            state.selectedIndex = numIdx;
+                        }
+                    }
+                }
+                lineCount = render(state, lineCount);
+                return;
+            }
+        };
+        process.stdin.on('data', handleData);
+    });
+}