@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/backlog-overlay.js

@@ -2,7 +2,7 @@
  * Backlog Overlay
  *
  * Modal overlay for viewing and managing the project backlog.
- * Provides a UI for manually adding, editing, and filtering backlog items.
+ * Uses TabbedListOverlay for consistent list/tab/search behavior.
  *
  * Features:
  * - Search by title/description
@@ -10,12 +10,13 @@
  * - 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 fs from 'fs';
-import * as path from 'path';
 import * as terminal from './terminal.js';
-import { getStyles } from '../themes/index.js';
+import { TabbedListOverlay, BaseScreen, stay, popScreen, closeOverlay, isEscape, isCtrlC, isEnter, isSpace, isNavigateUp, isNavigateDown, isLeftArrow, isRightArrow, isVimLeft, isVimRight, isBackspace, extractPrintable, renderBorder, } from './base/index.js';
+import { workItemRepository } from '../db/repositories/work-item-repository.js';
+import { getActiveProject } from '../tools/project-db.js';
 // =============================================================================
 // Constants
 // =============================================================================
@@ -35,752 +36,617 @@ const PRIORITY_LABELS = {
     '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' },
+];
 // =============================================================================
-// Backlog File Operations
+// Status Mapping (Database ↔ Display)
 // =============================================================================
-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;
-        }
+/**
+ * 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 '📋';
     }
-    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`;
+/**
+ * Map display emoji to database status
+ */
+function emojiToDbStatus(emoji) {
+    switch (emoji) {
+        case '📋': return 'backlog';
+        case '🚧': return 'in_progress';
+        case '✅': return 'completed';
+        default: return 'backlog';
     }
-    content += `
----
-
-*Last updated: ${date} by user*
-`;
-    return content;
 }
-function generateId(type, existingItems) {
-    const prefixMap = {
-        'feature': 'REQ',
-        'bug': 'BUG',
-        'tech-debt': 'TECH',
-        'chore': 'CHORE',
+/**
+ * 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,
     };
-    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
+// Database Operations
 // =============================================================================
-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 === '🚧');
+/**
+ * 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 '';
     }
-    else if (state.filterType !== 'all') {
-        results = results.filter(item => item.type === state.filterType);
+}
+function wrapText(text, maxWidth) {
+    if (!text || 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;
+        }
     }
-    // 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));
+    if (currentLine.length > 0) {
+        lines.push(currentLine);
     }
-    state.filteredItems = results;
-    state.selectedIndex = 0;
-    state.currentPage = 0;
+    return lines.length > 0 ? lines : [''];
 }
 // =============================================================================
-// Rendering
+// Detail Screen (In-Place Editing)
 // =============================================================================
-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)')}`);
+/**
+ * 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('');
-        // 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'));
-            }
+        // 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}`);
         }
-        else {
-            lines.push(s.muted(` Showing ${String(startIndex + 1)}-${String(endIndex)} of ${String(totalResults)}:`));
+        // Commit info
+        if (this.item.commit) {
             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(`  ${s.muted('Commit:')} ${this.item.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'));
+        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 });
         }
-        else {
-            lines.push(s.muted(' / Search · ↑↓ Navigate · ←→ Pages · Tab Filter · Enter Detail · Space Toggle · a Add · Esc Close'));
+        // Escape - back to list
+        if (isEscape(data)) {
+            return popScreen();
         }
-    }
-    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);
+        // 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;
             }
-            if (item.commit) {
-                lines.push('');
-                lines.push(s.muted(' Commit: ') + item.commit);
+            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();
         }
-        lines.push('');
-        lines.push(border);
-        lines.push(s.muted(' ↑↓ Select field · ←→ Change value · Esc Back'));
+        return stay(false);
+    }
+}
+// =============================================================================
+// 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;
     }
-    else {
-        // Add mode rendering
+    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(state.addStep + 1)}/5: ${stepLabels[state.addStep]}`));
+        lines.push(`  ${s.muted(`Step ${String(this.step + 1)}/5: ${stepLabels[this.step]}`)}`);
         lines.push('');
-        switch (state.addStep) {
+        switch (this.step) {
             case 0: // Type
-                lines.push(chalk.bold(' What type of item?'));
+                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 isSelected = this.selectedIndex === i;
+                    const prefix = isSelected ? s.primary('❯ ') : '  ';
                     const label = `${String(i + 1)}. ${TYPE_LABELS[TYPE_OPTIONS[i]]}`;
-                    lines.push(isSelected ? s.primary(prefix + label) : s.muted(prefix + label));
+                    lines.push(`  ${prefix}${isSelected ? s.primary(label) : s.muted(label)}`);
                 }
                 break;
             case 1: // Priority
-                lines.push(chalk.bold(' Priority level?'));
+                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 isSelected = this.selectedIndex === i;
+                    const prefix = isSelected ? s.primary('❯ ') : '  ';
                     const label = `${String(i + 1)}. ${PRIORITY_LABELS[PRIORITY_OPTIONS[i]]}`;
-                    lines.push(isSelected ? s.primary(prefix + label) : s.muted(prefix + label));
+                    lines.push(`  ${prefix}${isSelected ? s.primary(label) : s.muted(label)}`);
                 }
                 break;
             case 2: // Title
-                lines.push(chalk.bold(' Title (short description)'));
+                lines.push(`  ${chalk.bold('Title (short description)')}`);
                 lines.push('');
-                lines.push(` > ${state.inputBuffer}█`);
+                lines.push(`  > ${this.inputBuffer}█`);
                 lines.push('');
-                if (state.error) {
-                    lines.push(s.error(` ${state.error}`));
+                if (this.error) {
+                    lines.push(`  ${s.error(this.error)}`);
                 }
                 else {
-                    lines.push(s.muted(' Keep it concise (2-100 characters)'));
+                    lines.push(`  ${s.muted('Keep it concise (2-100 characters)')}`);
                 }
                 break;
             case 3: // Description
-                lines.push(chalk.bold(' Description (details)'));
+                lines.push(`  ${chalk.bold('Description (details)')}`);
                 lines.push('');
-                lines.push(` > ${state.inputBuffer}█`);
+                lines.push(`  > ${this.inputBuffer}█`);
                 lines.push('');
-                if (state.error) {
-                    lines.push(s.error(` ${state.error}`));
+                if (this.error) {
+                    lines.push(`  ${s.error(this.error)}`);
                 }
                 else {
-                    lines.push(s.muted(' Explain the requirement or issue'));
+                    lines.push(`  ${s.muted('Explain the requirement or issue')}`);
                 }
                 break;
             case 4: // Confirm
-                lines.push(chalk.bold(' Confirm new item:'));
+                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(`  ${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 = state.selectedIndex === i;
-                    const prefix = isSelected ? ' ❯ ' : '   ';
+                    const isSelected = this.selectedIndex === i;
+                    const prefix = isSelected ? s.primary('❯ ') : '  ';
                     const label = i === 0 ? '1. Create item' : '2. Cancel';
-                    lines.push(isSelected ? s.primary(prefix + label) : s.muted(prefix + label));
+                    lines.push(`  ${prefix}${isSelected ? s.primary(label) : s.muted(label)}`);
                 }
                 break;
         }
         lines.push('');
         lines.push(border);
-        if (state.addStep === 2 || state.addStep === 3) {
-            lines.push(s.muted(' Enter Confirm · Esc Go back'));
+        if (this.step === 2 || this.step === 3) {
+            lines.push(`  ${s.muted('Enter Confirm · Esc Back')}`);
         }
         else {
-            lines.push(s.muted(' ↑↓ Navigate · Enter Select · Esc Go back'));
+            lines.push(`  ${s.muted('↑↓/jk Navigate · Enter Select · Esc Back')}`);
         }
+        lines.push(border);
+        return lines;
     }
-    // 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;
+    handleKey(data) {
+        const char = extractPrintable(data);
+        // Ctrl+C closes everything
+        if (isCtrlC(data)) {
+            return closeOverlay({ modified: this.editState.modified });
         }
-        else if (currentLine.length + 1 + word.length <= maxWidth) {
-            currentLine += ' ' + word;
+        // 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);
         }
-        else {
-            lines.push(currentLine);
-            currentLine = word;
+        // 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);
     }
-    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;
+    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;
+        }
     }
 }
 // =============================================================================
-// Main Export
+// Backlog Overlay
 // =============================================================================
-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;
+class BacklogOverlay extends TabbedListOverlay {
+    editState;
+    constructor() {
+        const activeProject = getActiveProject();
+        const projectId = activeProject?.id ?? null;
+        // Load items from database (empty if no project)
+        const items = projectId ? loadItemsFromDb(projectId) : [];
+        const config = {
+            title: 'Backlog',
+            tabs: TABS,
+            items,
+            pageSize: PAGE_SIZE,
+            detailScreensFullScreen: false, // Render screens in-place
+            filterByTab: (item, tabId) => {
+                if (tabId === 'all')
+                    return true;
+                if (tabId === 'active') {
+                    return item.status === '📋' || item.status === '🚧';
                 }
-                if (isDownArrow && state.selectedIndex < pageItems.length - 1) {
-                    state.selectedIndex++;
-                    lineCount = render(state, lineCount);
-                    return;
+                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)}`;
                 }
-                // Page navigation
-                if (isLeftArrow && state.currentPage > 0) {
-                    state.currentPage--;
-                    state.selectedIndex = 0;
-                    lineCount = render(state, lineCount);
-                    return;
+                return `${prefix}${styles.muted(row)}`;
+            },
+            showCount: true,
+            emptyMessage: projectId === 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);
                 }
-                if (isRightArrow && state.currentPage < totalPages - 1) {
-                    state.currentPage++;
-                    state.selectedIndex = 0;
-                    lineCount = render(state, lineCount);
-                    return;
+                return lines;
+            },
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to search · Enter/Esc Exit search · Backspace Delete';
                 }
-                // 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();
+                return '/ Search · ↑↓/jk Navigate · ←→/hl Pages · Tab Filter · Space Toggle · a Add · q/Esc Close';
+            },
+        };
+        super(config);
+        // Create edit state that screens can share
+        this.editState = {
+            modified: false,
+            projectId,
+            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));
                     }
-                    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;
+                    this.state.filteredItems = filtered;
                 }
+            },
+        };
+    }
+    createDetailScreen(item) {
+        return new DetailScreen(item, this.editState, this.styles);
+    }
+    handleKey(data) {
+        // Only intercept when on the main list screen
+        if (this.screenStack.size() === 1) {
+            // Ctrl+C always closes
+            if (isCtrlC(data)) {
+                this.close({ modified: this.editState.modified });
                 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);
+            // 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();
+                    this.update();
                     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();
+                // 'a' - add mode
+                if (char === 'a' || char === 'A') {
+                    if (this.editState.projectId) {
+                        const addScreen = new AddScreen(this.editState, this.styles);
+                        this.screenStack.push(addScreen);
+                        this.update();
                     }
-                    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;
-                        }
-                    }
+                // 'q' or Esc closes
+                if (char === 'q' || isEscape(data)) {
+                    this.close({ modified: this.editState.modified });
+                    return;
                 }
-                lineCount = render(state, lineCount);
-                return;
             }
-        };
-        process.stdin.on('data', handleData);
-    });
+        }
+        // Let parent handle other keys (tabs, search, pagination, Enter for detail)
+        super.handleKey(data);
+    }
+}
+// =============================================================================
+// Export Function (Backward Compatible)
+// =============================================================================
+export async function showBacklogOverlay() {
+    return new BacklogOverlay().show();
 }