@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/anchors-overlay.js

@@ -0,0 +1,775 @@
+/**
+ * Anchors Overlay
+ *
+ * Provides a UI for viewing and managing anchors:
+ * - View all anchors (global + project-specific)
+ * - Add new anchors
+ * - Edit existing anchors
+ * - Delete anchors
+ *
+ * Uses TabbedListOverlay for consistent tabbed list behavior.
+ */
+import * as terminal from './terminal.js';
+import { TabbedListOverlay, BaseScreen, stay, popScreen, closeOverlay, isEnter, isCtrlC, isEscape, isClose, isBackspace, isNavigateUp, isNavigateDown, isLeftArrow, isRightArrow, isTab, isShiftTab, renderBorder, } from './base/index.js';
+import { getGlobalAnchorManager, getAnchorManager, } from '../anchors/index.js';
+import { getActiveProject } from '../tools/project-db.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const PAGE_SIZE = 10;
+const MAX_ANCHOR_LENGTH = 500;
+const PRIORITIES = ['critical', 'safety', 'info'];
+const TABS = [
+    { id: 'all', label: 'All' },
+    { id: 'critical', label: 'Critical' },
+    { id: 'safety', label: 'Safety' },
+    { id: 'info', label: 'Info' },
+    { id: 'global', label: 'Global' },
+    { id: 'project', label: 'Project' },
+];
+// =============================================================================
+// Helper Functions
+// =============================================================================
+function getPriorityBadge(priority, s) {
+    switch (priority) {
+        case 'critical':
+            return s.error('[!]');
+        case 'safety':
+            return s.warning('[S]');
+        case 'info':
+            return s.muted('[i]');
+    }
+}
+function isWordChar(char) {
+    return /\w/.test(char);
+}
+function findPrevWordBoundary(text, cursor) {
+    if (cursor <= 0)
+        return 0;
+    let pos = cursor - 1;
+    while (pos > 0 && !isWordChar(text[pos])) {
+        pos--;
+    }
+    while (pos > 0 && isWordChar(text[pos - 1])) {
+        pos--;
+    }
+    return pos;
+}
+function findNextWordBoundary(text, cursor) {
+    if (cursor >= text.length)
+        return text.length;
+    let pos = cursor;
+    while (pos < text.length && isWordChar(text[pos])) {
+        pos++;
+    }
+    while (pos < text.length && !isWordChar(text[pos])) {
+        pos++;
+    }
+    return pos;
+}
+function extractPrintable(data) {
+    if (data.length === 1 && data[0] >= 0x20 && data[0] < 0x7f) {
+        return String.fromCharCode(data[0]);
+    }
+    return null;
+}
+// =============================================================================
+// Add Anchor Screen
+// =============================================================================
+class AddAnchorScreen extends BaseScreen {
+    editState;
+    styles;
+    hasProject;
+    activeProjectId;
+    onComplete;
+    constructor(editState, styles, hasProject, activeProjectId, onComplete) {
+        super();
+        this.editState = editState;
+        this.styles = styles;
+        this.hasProject = hasProject;
+        this.activeProjectId = activeProjectId;
+        this.onComplete = onComplete;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('ADD NEW ANCHOR')}`);
+        lines.push('');
+        // Content field
+        const contentLabel = this.editState.addField === 'content' ? s.primary('Content:') : s.muted('Content:');
+        lines.push(`  ${contentLabel}`);
+        const maxDisplayLen = cols - 6;
+        let displayContent = this.editState.addContent;
+        if (displayContent.length > maxDisplayLen) {
+            displayContent = '…' + displayContent.slice(-(maxDisplayLen - 1));
+        }
+        lines.push(`  ${displayContent}${this.editState.addField === 'content' ? '█' : ''}`);
+        lines.push('');
+        // Priority field
+        const priorityLabel = this.editState.addField === 'priority' ? s.primary('Priority:') : s.muted('Priority:');
+        const priorityOptions = PRIORITIES.map(p => p === this.editState.addPriority ? s.inverse(` ${p} `) : s.muted(` ${p} `)).join(' ');
+        lines.push(`  ${priorityLabel} ${priorityOptions}`);
+        // Scope field (only if project is active)
+        if (this.hasProject) {
+            const scopeLabel = this.editState.addField === 'scope' ? s.primary('Scope:') : s.muted('Scope:');
+            const scopeOptions = ['global', 'project'].map(sc => sc === this.editState.addScope ? s.inverse(` ${sc} `) : s.muted(` ${sc} `)).join(' ');
+            lines.push(`  ${scopeLabel} ${scopeOptions}`);
+        }
+        lines.push('');
+        const remaining = MAX_ANCHOR_LENGTH - this.editState.addContent.length;
+        lines.push(s.muted(`  ${String(remaining)} chars remaining`));
+        // Message
+        if (this.editState.message) {
+            lines.push('');
+            switch (this.editState.messageType) {
+                case 'success':
+                    lines.push(s.success(`  ${this.editState.message}`));
+                    break;
+                case 'error':
+                    lines.push(s.error(`  ${this.editState.message}`));
+                    break;
+                default:
+                    lines.push(s.muted(`  ${this.editState.message}`));
+            }
+        }
+        lines.push('');
+        lines.push(border);
+        lines.push(s.muted('  Tab Switch field · ↑↓/←→ Change value · Enter Save · Esc Cancel'));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        const char = extractPrintable(data);
+        if (isCtrlC(data)) {
+            return closeOverlay(undefined);
+        }
+        if (isEscape(data)) {
+            this.editState.message = null;
+            return popScreen();
+        }
+        // Tab - switch fields
+        if (isTab(data)) {
+            if (this.editState.addField === 'content') {
+                this.editState.addField = 'priority';
+            }
+            else if (this.editState.addField === 'priority') {
+                this.editState.addField = this.hasProject ? 'scope' : 'content';
+            }
+            else {
+                this.editState.addField = 'content';
+            }
+            return stay();
+        }
+        // Shift+Tab - switch fields backward
+        if (isShiftTab(data)) {
+            if (this.editState.addField === 'content') {
+                this.editState.addField = this.hasProject ? 'scope' : 'priority';
+            }
+            else if (this.editState.addField === 'priority') {
+                this.editState.addField = 'content';
+            }
+            else {
+                this.editState.addField = 'priority';
+            }
+            return stay();
+        }
+        // Enter - save
+        if (isEnter(data)) {
+            if (this.editState.addContent.trim()) {
+                try {
+                    const manager = this.editState.addScope === 'global'
+                        ? getGlobalAnchorManager()
+                        : getAnchorManager(String(this.activeProjectId));
+                    manager.add({
+                        content: this.editState.addContent.trim(),
+                        priority: this.editState.addPriority,
+                        scope: 'persistent',
+                    });
+                    this.onComplete();
+                    this.editState.message = null;
+                    return popScreen();
+                }
+                catch (error) {
+                    this.editState.message = `Error: ${error.message}`;
+                    this.editState.messageType = 'error';
+                    return stay();
+                }
+            }
+            else {
+                this.editState.message = 'Content cannot be empty';
+                this.editState.messageType = 'error';
+                return stay();
+            }
+        }
+        // Field-specific input
+        if (this.editState.addField === 'content') {
+            if (isBackspace(data)) {
+                this.editState.addContent = this.editState.addContent.slice(0, -1);
+                return stay();
+            }
+            if (char && this.editState.addContent.length < MAX_ANCHOR_LENGTH) {
+                this.editState.addContent += char;
+                return stay();
+            }
+        }
+        else if (this.editState.addField === 'priority') {
+            if (isNavigateUp(data) || isLeftArrow(data)) {
+                const idx = PRIORITIES.indexOf(this.editState.addPriority);
+                this.editState.addPriority = PRIORITIES[(idx - 1 + PRIORITIES.length) % PRIORITIES.length];
+                return stay();
+            }
+            if (isNavigateDown(data) || isRightArrow(data)) {
+                const idx = PRIORITIES.indexOf(this.editState.addPriority);
+                this.editState.addPriority = PRIORITIES[(idx + 1) % PRIORITIES.length];
+                return stay();
+            }
+        }
+        else {
+            // Scope field
+            if (isNavigateUp(data) || isNavigateDown(data) || isLeftArrow(data) || isRightArrow(data)) {
+                this.editState.addScope = this.editState.addScope === 'global' ? 'project' : 'global';
+                return stay();
+            }
+        }
+        return stay(false);
+    }
+}
+// =============================================================================
+// Edit Anchor Screen
+// =============================================================================
+class EditAnchorScreen extends BaseScreen {
+    editState;
+    styles;
+    onComplete;
+    maxVisibleLines = 6;
+    constructor(editState, styles, onComplete) {
+        super();
+        this.editState = editState;
+        this.styles = styles;
+        this.onComplete = onComplete;
+    }
+    /**
+     * Wrap text to fit within maxWidth, preserving word boundaries where possible
+     */
+    wrapText(text, maxWidth) {
+        if (text.length <= maxWidth)
+            return [text];
+        const wrapped = [];
+        let remaining = text;
+        while (remaining.length > 0) {
+            if (remaining.length <= maxWidth) {
+                wrapped.push(remaining);
+                break;
+            }
+            // Find a good break point (space within last 20 chars of maxWidth)
+            let breakPoint = maxWidth;
+            const searchStart = Math.max(0, maxWidth - 20);
+            for (let i = maxWidth - 1; i >= searchStart; i--) {
+                if (remaining[i] === ' ') {
+                    breakPoint = i + 1;
+                    break;
+                }
+            }
+            wrapped.push(remaining.slice(0, breakPoint));
+            remaining = remaining.slice(breakPoint);
+        }
+        return wrapped;
+    }
+    /**
+     * Convert linear cursor position to wrapped display position (row, col)
+     */
+    getWrappedCursorPosition(wrappedLines, linearCursor) {
+        let pos = 0;
+        for (let row = 0; row < wrappedLines.length; row++) {
+            const lineLen = wrappedLines[row].length;
+            if (pos + lineLen >= linearCursor) {
+                return { row, col: linearCursor - pos };
+            }
+            pos += lineLen;
+        }
+        // Cursor at very end
+        const lastRow = wrappedLines.length - 1;
+        return { row: lastRow, col: wrappedLines[lastRow]?.length ?? 0 };
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        const item = this.editState.targetItem;
+        if (!item) {
+            lines.push(border);
+            lines.push(s.error('  No anchor selected'));
+            lines.push(border);
+            return lines;
+        }
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('EDIT ANCHOR')}`);
+        lines.push('');
+        lines.push(s.muted(`  ID: ${item.anchor.id}`));
+        lines.push(s.muted(`  Priority: ${item.anchor.priority}`));
+        lines.push(s.muted(`  Scope: ${item.scope}`));
+        lines.push('');
+        lines.push(`  ${s.primary('Content:')}`);
+        // Wrap content to fit terminal width
+        const maxLineWidth = cols - 4;
+        const content = this.editState.editContent;
+        const cursor = this.editState.editCursor;
+        // Wrap the content for display
+        const wrappedLines = this.wrapText(content, maxLineWidth);
+        const { row: cursorRow, col: cursorCol } = this.getWrappedCursorPosition(wrappedLines, cursor);
+        // Calculate visible window (scroll if needed)
+        let startLine = 0;
+        if (cursorRow >= this.maxVisibleLines) {
+            startLine = cursorRow - this.maxVisibleLines + 1;
+        }
+        const endLine = Math.min(startLine + this.maxVisibleLines, wrappedLines.length);
+        for (let i = startLine; i < endLine; i++) {
+            const line = wrappedLines[i];
+            const isCursorLine = i === cursorRow;
+            if (isCursorLine) {
+                // Render line with block cursor highlighting the character
+                if (cursorCol < line.length) {
+                    const beforeCursor = line.slice(0, cursorCol);
+                    const cursorChar = line[cursorCol];
+                    const afterCursor = line.slice(cursorCol + 1);
+                    lines.push(`  ${beforeCursor}${s.inverse(cursorChar)}${afterCursor}`);
+                }
+                else {
+                    // Cursor at end of line - show block cursor
+                    lines.push(`  ${line}${s.inverse(' ')}`);
+                }
+            }
+            else {
+                lines.push(`  ${line}`);
+            }
+        }
+        // Pad to fixed height for consistency
+        for (let i = endLine - startLine; i < this.maxVisibleLines; i++) {
+            lines.push('');
+        }
+        // Show scroll indicator if needed
+        if (wrappedLines.length > this.maxVisibleLines) {
+            const scrollInfo = `Lines ${String(startLine + 1)}-${String(endLine)} of ${String(wrappedLines.length)}`;
+            lines.push(s.muted(`  ${scrollInfo}`));
+        }
+        else {
+            lines.push('');
+        }
+        const remaining = MAX_ANCHOR_LENGTH - this.editState.editContent.length;
+        lines.push(s.muted(`  ${String(remaining)} chars remaining`));
+        // Message
+        if (this.editState.message) {
+            lines.push('');
+            switch (this.editState.messageType) {
+                case 'success':
+                    lines.push(s.success(`  ${this.editState.message}`));
+                    break;
+                case 'error':
+                    lines.push(s.error(`  ${this.editState.message}`));
+                    break;
+                default:
+                    lines.push(s.muted(`  ${this.editState.message}`));
+            }
+        }
+        lines.push('');
+        lines.push(border);
+        lines.push(s.muted('  ←→ Navigate · Opt+←/→ Word jump · Enter Save · Esc Cancel'));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        const char = extractPrintable(data);
+        const keyStr = data.toString();
+        const item = this.editState.targetItem;
+        if (!item) {
+            return popScreen();
+        }
+        if (isCtrlC(data)) {
+            return closeOverlay(undefined);
+        }
+        if (isEscape(data)) {
+            this.editState.message = null;
+            this.editState.targetItem = null;
+            return popScreen();
+        }
+        // Enter - save (since we use word-wrap, Enter saves instead of inserting newline)
+        if (isEnter(data)) {
+            return this.saveAndClose();
+        }
+        // Ctrl+S also saves
+        if (keyStr === '\x13') {
+            return this.saveAndClose();
+        }
+        // Left arrow - cursor left
+        if (isLeftArrow(data)) {
+            if (this.editState.editCursor > 0) {
+                this.editState.editCursor--;
+                return stay();
+            }
+            return stay(false);
+        }
+        // Right arrow - cursor right
+        if (isRightArrow(data)) {
+            if (this.editState.editCursor < this.editState.editContent.length) {
+                this.editState.editCursor++;
+                return stay();
+            }
+            return stay(false);
+        }
+        // Option+Left (ESC+b) - move to start of previous word
+        if (keyStr === '\x1bb') {
+            this.editState.editCursor = findPrevWordBoundary(this.editState.editContent, this.editState.editCursor);
+            return stay();
+        }
+        // Option+Right (ESC+f) - move to end of next word
+        if (keyStr === '\x1bf') {
+            this.editState.editCursor = findNextWordBoundary(this.editState.editContent, this.editState.editCursor);
+            return stay();
+        }
+        // Home/Ctrl+A - go to start
+        if (keyStr === '\x1b[H' || keyStr === '\x01') {
+            this.editState.editCursor = 0;
+            return stay();
+        }
+        // End/Ctrl+E - go to end
+        if (keyStr === '\x1b[F' || keyStr === '\x05') {
+            this.editState.editCursor = this.editState.editContent.length;
+            return stay();
+        }
+        // Backspace
+        if (isBackspace(data) && this.editState.editCursor > 0) {
+            this.editState.editContent =
+                this.editState.editContent.slice(0, this.editState.editCursor - 1) +
+                    this.editState.editContent.slice(this.editState.editCursor);
+            this.editState.editCursor--;
+            return stay();
+        }
+        // Delete key
+        if (keyStr === '\x1b[3~' && this.editState.editCursor < this.editState.editContent.length) {
+            this.editState.editContent =
+                this.editState.editContent.slice(0, this.editState.editCursor) +
+                    this.editState.editContent.slice(this.editState.editCursor + 1);
+            return stay();
+        }
+        // Printable character
+        if (char && this.editState.editContent.length < MAX_ANCHOR_LENGTH) {
+            this.editState.editContent =
+                this.editState.editContent.slice(0, this.editState.editCursor) +
+                    char +
+                    this.editState.editContent.slice(this.editState.editCursor);
+            this.editState.editCursor++;
+            return stay();
+        }
+        return stay(false);
+    }
+    saveAndClose() {
+        const item = this.editState.targetItem;
+        if (!item)
+            return popScreen();
+        if (this.editState.editContent.trim()) {
+            try {
+                const manager = item.scope === 'global'
+                    ? getGlobalAnchorManager()
+                    : getAnchorManager(item.projectId ?? '');
+                const oldAnchor = item.anchor;
+                manager.remove(oldAnchor.id);
+                manager.add({
+                    id: oldAnchor.id,
+                    content: this.editState.editContent.trim(),
+                    priority: oldAnchor.priority,
+                    scope: oldAnchor.scope,
+                    tags: oldAnchor.tags,
+                    metadata: oldAnchor.metadata,
+                    projectId: oldAnchor.projectId,
+                });
+                this.onComplete();
+                this.editState.message = null;
+                this.editState.targetItem = null;
+                return popScreen();
+            }
+            catch (error) {
+                this.editState.message = `Error: ${error.message}`;
+                this.editState.messageType = 'error';
+                return stay();
+            }
+        }
+        else {
+            this.editState.message = 'Content cannot be empty';
+            this.editState.messageType = 'error';
+            return stay();
+        }
+    }
+}
+// =============================================================================
+// Delete Confirm Screen
+// =============================================================================
+class DeleteConfirmScreen extends BaseScreen {
+    editState;
+    styles;
+    onComplete;
+    constructor(editState, styles, onComplete) {
+        super();
+        this.editState = editState;
+        this.styles = styles;
+        this.onComplete = onComplete;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        const item = this.editState.targetItem;
+        if (!item) {
+            lines.push(border);
+            lines.push(s.error('  No anchor selected'));
+            lines.push(border);
+            return lines;
+        }
+        lines.push(border);
+        lines.push(`  ${s.warning('DELETE ANCHOR')}`);
+        lines.push('');
+        lines.push(s.muted(`  ID: ${item.anchor.id}`));
+        lines.push(s.muted(`  Priority: ${item.anchor.priority}`));
+        lines.push(s.muted(`  Scope: ${item.scope}`));
+        lines.push('');
+        const maxContentLen = cols - 14;
+        let content = item.anchor.content;
+        if (content.length > maxContentLen) {
+            content = content.slice(0, maxContentLen - 3) + '...';
+        }
+        lines.push(`  Content: ${content}`);
+        lines.push('');
+        lines.push(s.warning('  Are you sure you want to delete this anchor?'));
+        lines.push('');
+        lines.push(border);
+        lines.push(s.muted('  y Yes · n/Esc No'));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        const char = extractPrintable(data);
+        const item = this.editState.targetItem;
+        if (!item) {
+            return popScreen();
+        }
+        if (isCtrlC(data)) {
+            return closeOverlay(undefined);
+        }
+        if (char === 'y' || char === 'Y') {
+            try {
+                const manager = item.scope === 'global'
+                    ? getGlobalAnchorManager()
+                    : getAnchorManager(item.projectId ?? '');
+                manager.remove(item.anchor.id);
+                this.onComplete();
+                this.editState.targetItem = null;
+                return popScreen();
+            }
+            catch (error) {
+                this.editState.message = `Error: ${error.message}`;
+                this.editState.messageType = 'error';
+                return popScreen();
+            }
+        }
+        if (char === 'n' || char === 'N' || isEscape(data)) {
+            this.editState.targetItem = null;
+            return popScreen();
+        }
+        return stay(false);
+    }
+}
+// =============================================================================
+// Anchors Overlay
+// =============================================================================
+class AnchorsOverlay extends TabbedListOverlay {
+    editState;
+    activeProject;
+    constructor() {
+        const activeProject = getActiveProject();
+        // Load anchors
+        const anchors = loadAnchors(activeProject?.id ?? null);
+        const config = {
+            title: 'Anchors',
+            tabs: TABS,
+            items: anchors,
+            pageSize: PAGE_SIZE,
+            filterByTab: (item, tabId) => {
+                if (tabId === 'all')
+                    return true;
+                if (tabId === 'critical' || tabId === 'safety' || tabId === 'info') {
+                    return item.anchor.priority === tabId;
+                }
+                if (tabId === 'global')
+                    return item.scope === 'global';
+                if (tabId === 'project')
+                    return item.scope === 'project';
+                return true;
+            },
+            getSearchText: (item) => `${item.anchor.content} ${item.anchor.priority} ${item.scope}`,
+            renderItem: (item, isSelected, s) => {
+                const cols = terminal.getTerminalWidth();
+                const priorityBadge = getPriorityBadge(item.anchor.priority, s);
+                const scopeBadge = item.scope === 'global' ? s.muted('[G]') : s.info('[P]');
+                const prefixLen = 15;
+                const maxContentLen = Math.max(20, cols - prefixLen - 8);
+                let content = item.anchor.content;
+                if (content.length > maxContentLen) {
+                    content = content.slice(0, maxContentLen - 3) + '...';
+                }
+                const cursor = isSelected ? s.primary('❯ ') : '  ';
+                const line = `${priorityBadge} ${scopeBadge} ${content}`;
+                if (isSelected) {
+                    return `${cursor}${s.primary(line)}`;
+                }
+                return `${cursor}${line}`;
+            },
+            showCount: true,
+            emptyMessage: 'No anchors defined. Press [a] to add one.',
+            noResultsMessage: 'No anchors match the filter.',
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to filter · ↑↓/jk Navigate · Enter Edit · Esc Exit search';
+                }
+                return '↑↓/jk Navigate · ←→/hl Tabs · / Search · a Add · e Edit · d Delete · q/Esc Close';
+            },
+            // Render edit screens in-place, not full-screen
+            detailScreensFullScreen: false,
+        };
+        super(config);
+        this.activeProject = activeProject ? { id: activeProject.id, displayName: activeProject.displayName } : null;
+        this.editState = {
+            addContent: '',
+            addPriority: 'info',
+            addScope: activeProject ? 'project' : 'global',
+            addField: 'content',
+            editContent: '',
+            editCursor: 0,
+            targetItem: null,
+            message: null,
+            messageType: 'info',
+        };
+    }
+    /**
+     * Refresh anchors from storage
+     */
+    refreshAnchors() {
+        const anchors = loadAnchors(this.activeProject?.id ?? null);
+        this.state.items = anchors;
+        // Re-apply tab filter
+        const tabId = TABS[this.state.currentTab]?.id ?? 'all';
+        let filtered = anchors.filter((item) => {
+            if (tabId === 'all')
+                return true;
+            if (tabId === 'critical' || tabId === 'safety' || tabId === 'info') {
+                return item.anchor.priority === tabId;
+            }
+            if (tabId === 'global')
+                return item.scope === 'global';
+            if (tabId === 'project')
+                return item.scope === 'project';
+            return true;
+        });
+        // Re-apply search filter
+        if (this.state.searchQuery) {
+            const query = this.state.searchQuery.toLowerCase();
+            filtered = filtered.filter((item) => item.anchor.content.toLowerCase().includes(query) ||
+                item.anchor.priority.toLowerCase().includes(query) ||
+                item.scope.toLowerCase().includes(query));
+        }
+        this.state.filteredItems = filtered;
+        this.state.selectedIndex = Math.min(this.state.selectedIndex, Math.max(0, filtered.length - 1));
+    }
+    /**
+     * Override to intercept custom keys
+     */
+    handleKey(data) {
+        const char = extractPrintable(data);
+        // Only intercept when on the main list screen (screen stack size = 1)
+        if (this.screenStack.size() === 1) {
+            // Ctrl+C always closes
+            if (isCtrlC(data)) {
+                this.close();
+                return;
+            }
+            // Don't intercept if in search mode
+            if (!this.state.searchMode) {
+                // q/Esc closes
+                if (isClose(data)) {
+                    this.close();
+                    return;
+                }
+                // 'a' - add mode
+                if (char === 'a') {
+                    this.editState.addContent = '';
+                    this.editState.addPriority = 'info';
+                    this.editState.addScope = this.activeProject ? 'project' : 'global';
+                    this.editState.addField = 'content';
+                    this.editState.message = null;
+                    this.screenStack.push(new AddAnchorScreen(this.editState, this.styles, this.activeProject !== null, this.activeProject?.id ?? null, () => { this.refreshAnchors(); }));
+                    this.update();
+                    return;
+                }
+                // 'e' or Enter - edit mode
+                if ((char === 'e' || isEnter(data)) && this.state.filteredItems.length > 0) {
+                    const item = this.state.filteredItems[this.state.selectedIndex];
+                    this.editState.targetItem = item;
+                    this.editState.editContent = item.anchor.content;
+                    this.editState.editCursor = item.anchor.content.length;
+                    this.editState.message = null;
+                    this.screenStack.push(new EditAnchorScreen(this.editState, this.styles, () => { this.refreshAnchors(); }));
+                    this.update();
+                    return;
+                }
+                // 'd' or backspace - delete confirm
+                if ((char === 'd' || isBackspace(data)) && this.state.filteredItems.length > 0) {
+                    const item = this.state.filteredItems[this.state.selectedIndex];
+                    this.editState.targetItem = item;
+                    this.editState.message = null;
+                    this.screenStack.push(new DeleteConfirmScreen(this.editState, this.styles, () => { this.refreshAnchors(); }));
+                    this.update();
+                    return;
+                }
+            }
+        }
+        // Let TabbedListOverlay handle everything else
+        super.handleKey(data);
+    }
+}
+// =============================================================================
+// Helper: Load Anchors
+// =============================================================================
+function loadAnchors(activeProjectId) {
+    const items = [];
+    // Global anchors
+    const globalManager = getGlobalAnchorManager();
+    for (const anchor of globalManager.getAll()) {
+        items.push({ anchor, scope: 'global', projectId: null });
+    }
+    // Project anchors (if active project)
+    if (activeProjectId !== null) {
+        const projectManager = getAnchorManager(String(activeProjectId));
+        for (const anchor of projectManager.getAll()) {
+            items.push({ anchor, scope: 'project', projectId: String(activeProjectId) });
+        }
+    }
+    // Sort by priority (critical first), then by content
+    const priorityOrder = { critical: 0, safety: 1, info: 2 };
+    items.sort((a, b) => {
+        const pa = priorityOrder[a.anchor.priority] ?? 2;
+        const pb = priorityOrder[b.anchor.priority] ?? 2;
+        if (pa !== pb)
+            return pa - pb;
+        return a.anchor.content.localeCompare(b.anchor.content);
+    });
+    return items;
+}
+// =============================================================================
+// Export Function (Backward Compatible)
+// =============================================================================
+export function showAnchorsOverlay() {
+    return new AnchorsOverlay().show();
+}