@compilr-dev/cli 0.4.0 → 0.5.1

package/dist/ui/overlay/impl/document-detail-overlay-v2.js

@@ -0,0 +1,1112 @@
+/**
+ * Document Detail Overlay V2
+ *
+ * Fullscreen markdown document viewer AND editor with vim-style navigation.
+ * Separate from DocsOverlayV2 (inline list) to allow proper fullscreen rendering.
+ *
+ * Features:
+ * - Full-screen document viewing with markdown rendering
+ * - Vim-style navigation (j/k, g/G, PgUp/PgDn)
+ * - Edit mode with raw markdown editing
+ * - Save to database (Ctrl+S)
+ * - Dirty check with save prompt on exit
+ */
+import chalk from 'chalk';
+import hljs from 'highlight.js';
+// =============================================================================
+// Alternate Screen Buffer Management
+// =============================================================================
+let inAlternateScreen = false;
+function enterAlternateScreen() {
+    if (inAlternateScreen)
+        return;
+    process.stdout.write('\x1b[?1049h'); // Switch to alternate screen
+    process.stdout.write('\x1b[H'); // Move cursor to home
+    inAlternateScreen = true;
+}
+function exitAlternateScreen() {
+    if (!inAlternateScreen)
+        return;
+    process.stdout.write('\x1b[?1049l'); // Switch back to main screen
+    inAlternateScreen = false;
+}
+// Ensure we exit alternate screen on process termination
+function setupAlternateScreenCleanup() {
+    const cleanup = () => {
+        exitAlternateScreen();
+    };
+    // Handle normal exit
+    process.on('exit', cleanup);
+    // Handle Ctrl+C
+    process.on('SIGINT', () => {
+        cleanup();
+        process.exit(130);
+    });
+    // Handle termination
+    process.on('SIGTERM', () => {
+        cleanup();
+        process.exit(143);
+    });
+    // Handle uncaught exceptions
+    process.on('uncaughtException', (err) => {
+        cleanup();
+        console.error('Uncaught exception:', err);
+        process.exit(1);
+    });
+    // Handle unhandled promise rejections
+    process.on('unhandledRejection', (reason) => {
+        cleanup();
+        console.error('Unhandled rejection:', reason);
+        process.exit(1);
+    });
+}
+// Setup cleanup handlers once when module loads
+setupAlternateScreenCleanup();
+import { marked } from 'marked';
+import { markedTerminal } from 'marked-terminal';
+import { BaseOverlayV2 } from '../../base/overlay-base-v2.js';
+import { renderBorder, isCtrlC, isClose, isNavigateUp, isNavigateDown, isUpArrow, isDownArrow, isLeftArrow, isRightArrow, isHome, isEnd, isPageUp, isPageDown, isSpace, isBackspace, isDelete, isEnter, isTab, isEscape, isE, getPrintableChar, } from '../../base/index.js';
+import { documentRepository } from '../../../db/repositories/document-repository.js';
+import { planRepository } from '../../../db/repositories/plan-repository.js';
+import { getCurrentTheme } from '../../../themes/index.js';
+import * as terminal from '../../terminal.js';
+import { DOC_TYPE_LABELS, PLAN_STATUS_LABELS, PLAN_STATUS_COLORS } from '../../constants/labels.js';
+// =============================================================================
+// Register Additional Languages for Syntax Highlighting
+// =============================================================================
+// Register aliases for common language names that map to existing languages
+const languageAliases = {
+    // Shell variants → bash
+    'sh': 'bash', 'zsh': 'bash', 'fish': 'bash',
+    'console': 'bash', 'terminal': 'bash', 'command': 'bash',
+    // JSX/TSX → base language (highlighting won't be perfect but won't error)
+    'jsx': 'javascript', 'tsx': 'typescript',
+    // HTML variants → xml
+    'htm': 'xml', 'html': 'xml', 'vue': 'xml', 'svelte': 'xml', 'astro': 'xml',
+    // Plain text variants
+    'text': 'plaintext', 'txt': 'plaintext', 'log': 'plaintext',
+    'output': 'plaintext', 'result': 'plaintext',
+    'gitignore': 'plaintext', 'dockerignore': 'plaintext', 'ignore': 'plaintext',
+    'requirements': 'plaintext', 'csv': 'plaintext', 'tsv': 'plaintext',
+    // Diff variants
+    'patch': 'diff',
+    // JSON variants
+    'jsonc': 'json', 'json5': 'json', 'jsonl': 'json', 'ndjson': 'json',
+    // Config file variants → ini
+    'conf': 'ini', 'config': 'ini', 'env': 'ini', 'dotenv': 'ini',
+    'editorconfig': 'ini', 'toml': 'ini', 'pipfile': 'ini',
+    // Infrastructure as code (approximate)
+    'tf': 'json', 'hcl': 'json', 'terraform': 'json',
+};
+for (const [alias, target] of Object.entries(languageAliases)) {
+    try {
+        hljs.registerAliases(alias, { languageName: target });
+    }
+    catch {
+        // Ignore if alias already exists
+    }
+}
+// Register custom language definitions for diagram/DSL languages
+// Mermaid diagrams
+hljs.registerLanguage('mermaid', () => ({
+    name: 'Mermaid',
+    case_insensitive: true,
+    keywords: {
+        keyword: 'graph subgraph end flowchart sequenceDiagram classDiagram stateDiagram erDiagram gantt pie journey gitGraph',
+        built_in: 'TD TB BT RL LR participant actor loop alt else opt par and critical break'
+    },
+    contains: [
+        hljs.QUOTE_STRING_MODE,
+        hljs.COMMENT('%%', '$'),
+        { className: 'operator', begin: /-->|--o|--x|<-->|---|->|<-|==>|==|-.->|-.-/ },
+        { className: 'string', begin: /\|/, end: /\|/ },
+        { className: 'title', begin: /\[/, end: /\]/ }
+    ]
+}));
+// PlantUML diagrams
+hljs.registerLanguage('plantuml', () => ({
+    name: 'PlantUML',
+    case_insensitive: true,
+    keywords: {
+        keyword: 'startuml enduml participant actor usecase class interface abstract enum component package node database cloud frame folder rectangle',
+        built_in: 'left right up down over note end activate deactivate return'
+    },
+    contains: [
+        hljs.QUOTE_STRING_MODE,
+        hljs.COMMENT("'", '$'),
+        { className: 'operator', begin: /-->|->|<--|<-|\.\.>|<\.\.|--|-/ }
+    ]
+}));
+// GraphQL
+hljs.registerLanguage('graphql', () => ({
+    name: 'GraphQL',
+    keywords: {
+        keyword: 'query mutation subscription fragment on type interface union enum scalar input extend implements directive',
+        literal: 'true false null'
+    },
+    contains: [
+        hljs.QUOTE_STRING_MODE,
+        hljs.HASH_COMMENT_MODE,
+        { className: 'variable', begin: /\$\w+/ },
+        { className: 'type', begin: /\b[A-Z]\w*\b/ }
+    ]
+}));
+hljs.registerAliases('gql', { languageName: 'graphql' });
+// Graphviz DOT
+hljs.registerLanguage('dot', () => ({
+    name: 'DOT',
+    keywords: {
+        keyword: 'graph digraph subgraph node edge strict',
+        built_in: 'shape label color style fillcolor fontcolor fontsize rankdir rank'
+    },
+    contains: [
+        hljs.QUOTE_STRING_MODE,
+        hljs.C_LINE_COMMENT_MODE,
+        hljs.C_BLOCK_COMMENT_MODE,
+        { className: 'operator', begin: /->|--/ }
+    ]
+}));
+hljs.registerAliases('graphviz', { languageName: 'dot' });
+// =============================================================================
+// Constants
+// =============================================================================
+// DOC_TYPE_LABELS, PLAN_STATUS_LABELS, PLAN_STATUS_COLORS imported from '../../constants/labels.js'
+// Valid status transitions
+const VALID_TRANSITIONS = {
+    draft: ['approved', 'abandoned'],
+    approved: ['in_progress', 'abandoned'],
+    in_progress: ['completed', 'abandoned'],
+    completed: [],
+    abandoned: ['draft'],
+};
+const TAB_SIZE = 2;
+// =============================================================================
+// Markdown Rendering
+// =============================================================================
+function getThemedMarkedOptions(termWidth) {
+    const theme = getCurrentTheme();
+    const primaryColor = chalk.hex(theme.colors.primary);
+    const secondaryColor = chalk.hex(theme.colors.secondary || theme.colors.primary);
+    const mutedColor = chalk.hex(theme.colors.muted);
+    const borderColor = chalk.hex(theme.colors.border);
+    const fgColor = chalk.hex(theme.colors.foreground);
+    return {
+        showSectionPrefix: false,
+        reflowText: false,
+        width: Math.min(100, termWidth - 4),
+        unescape: true,
+        tab: 2,
+        heading: primaryColor.bold,
+        firstHeading: primaryColor.bold,
+        strong: fgColor.bold,
+        em: fgColor.italic,
+        link: secondaryColor,
+        href: secondaryColor.underline,
+        blockquote: mutedColor.italic,
+        del: mutedColor.strikethrough,
+        hr: borderColor,
+        codespan: secondaryColor,
+        code: secondaryColor,
+        html: mutedColor,
+        table: fgColor,
+        listitem: fgColor,
+        paragraph: fgColor,
+        tableOptions: {
+            style: { head: ['bold'], border: [] },
+            chars: {
+                'top': '─', 'top-mid': '─', 'top-left': '─', 'top-right': '─',
+                'bottom': '─', 'bottom-mid': '─', 'bottom-left': '─', 'bottom-right': '─',
+                'left': ' ', 'left-mid': ' ', 'mid': '─', 'mid-mid': '─',
+                'right': ' ', 'right-mid': ' ', 'middle': ' ',
+            },
+        },
+    };
+}
+function preprocessMarkdown(content) {
+    const lines = content.split('\n');
+    return lines.map(line => /^(\s*)\* /.test(line) ? line.replace(/^(\s*)\* /, '$1- ') : line).join('\n');
+}
+function postProcessInlineFormatting(text) {
+    return text.replace(/\*\*([^*]+)\*\*/g, (_match, content) => chalk.bold(content));
+}
+function renderMarkdownSync(content, termWidth) {
+    const preprocessed = preprocessMarkdown(content);
+    const options = getThemedMarkedOptions(termWidth);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
+    marked.use(markedTerminal(options));
+    const rendered = marked.parse(preprocessed, { async: false });
+    const postProcessed = postProcessInlineFormatting(rendered);
+    return postProcessed.split('\n');
+}
+// =============================================================================
+// Edit Mode Syntax Highlighting
+// =============================================================================
+// Import cli-highlight for code block highlighting
+import { highlight as cliHighlight, supportsLanguage } from 'cli-highlight';
+/**
+ * Highlight a line, considering code block context.
+ * Returns the highlighted line and updated code block state.
+ */
+function highlightEditLine(line, codeBlockState, theme) {
+    const secondary = chalk.hex(theme.colors.secondary || theme.colors.primary);
+    // Check for code fence start/end
+    const fenceMatch = line.match(/^(`{3,}|~{3,})(\w*)\s*$/);
+    if (fenceMatch) {
+        const [, fence, lang] = fenceMatch;
+        const fenceChar = fence[0];
+        const fenceLength = fence.length;
+        if (!codeBlockState.inCodeBlock) {
+            // Starting a code block
+            return {
+                highlighted: secondary(line),
+                newState: {
+                    inCodeBlock: true,
+                    language: lang || 'plaintext',
+                    fenceChar,
+                    fenceLength,
+                },
+            };
+        }
+        else if (fenceChar === codeBlockState.fenceChar && fenceLength >= codeBlockState.fenceLength) {
+            // Ending a code block (matching or longer fence)
+            return {
+                highlighted: secondary(line),
+                newState: { inCodeBlock: false, language: '', fenceChar: '', fenceLength: 0 },
+            };
+        }
+    }
+    // Inside a code block - apply language-specific highlighting
+    if (codeBlockState.inCodeBlock) {
+        return {
+            highlighted: highlightCodeLine(line, codeBlockState.language, theme),
+            newState: codeBlockState,
+        };
+    }
+    // Regular markdown line
+    return {
+        highlighted: highlightMarkdownLine(line, theme),
+        newState: codeBlockState,
+    };
+}
+/**
+ * Highlight a single line of code using cli-highlight.
+ */
+function highlightCodeLine(line, language, theme) {
+    // Map language aliases to supported languages
+    const langMap = {
+        'js': 'javascript',
+        'ts': 'typescript',
+        'py': 'python',
+        'rb': 'ruby',
+        'sh': 'bash',
+        'shell': 'bash',
+        'zsh': 'bash',
+        'yml': 'yaml',
+        'md': 'markdown',
+        'jsx': 'javascript',
+        'tsx': 'typescript',
+        'mermaid': 'plaintext', // highlight.js handles via our custom registration
+        'plantuml': 'plaintext',
+        'graphql': 'graphql',
+        'gql': 'graphql',
+        'dot': 'plaintext',
+        'graphviz': 'plaintext',
+    };
+    const mappedLang = langMap[language.toLowerCase()] || language.toLowerCase();
+    // Check if language is supported
+    if (!supportsLanguage(mappedLang) && mappedLang !== 'plaintext') {
+        // Fall back to plaintext styling for unsupported languages
+        const secondary = chalk.hex(theme.colors.secondary || theme.colors.primary);
+        return secondary(line);
+    }
+    try {
+        // cli-highlight for supported languages
+        if (mappedLang === 'plaintext') {
+            const secondary = chalk.hex(theme.colors.secondary || theme.colors.primary);
+            return secondary(line);
+        }
+        return cliHighlight(line, { language: mappedLang, ignoreIllegals: true });
+    }
+    catch {
+        // Fallback to secondary color on error
+        const secondary = chalk.hex(theme.colors.secondary || theme.colors.primary);
+        return secondary(line);
+    }
+}
+/**
+ * Apply syntax highlighting to a raw markdown line for edit mode.
+ * Shows the raw markdown characters with visual styling.
+ */
+function highlightMarkdownLine(line, theme) {
+    const primary = chalk.hex(theme.colors.primary);
+    const secondary = chalk.hex(theme.colors.secondary || theme.colors.primary);
+    const muted = chalk.hex(theme.colors.muted);
+    // Empty line
+    if (!line.trim()) {
+        return line;
+    }
+    // Headers: # ## ### etc.
+    const headerMatch = line.match(/^(#{1,6})\s(.*)$/);
+    if (headerMatch) {
+        return primary(headerMatch[1]) + ' ' + primary.bold(headerMatch[2]);
+    }
+    // Blockquote: > text
+    const blockquoteMatch = line.match(/^(>\s*)(.*)$/);
+    if (blockquoteMatch) {
+        return muted(blockquoteMatch[1]) + muted.italic(blockquoteMatch[2]);
+    }
+    // Horizontal rule: --- or *** or ___
+    if (line.match(/^([-*_])\1{2,}\s*$/)) {
+        return muted(line);
+    }
+    // Unordered list: - or * or +
+    const ulMatch = line.match(/^(\s*)([-*+])\s+(.*)$/);
+    if (ulMatch) {
+        const [, indent, bullet, content] = ulMatch;
+        return indent + secondary(bullet) + ' ' + highlightInlineMarkdown(content, theme);
+    }
+    // Ordered list: 1. 2. etc.
+    const olMatch = line.match(/^(\s*)(\d+\.)\s+(.*)$/);
+    if (olMatch) {
+        const [, indent, num, content] = olMatch;
+        return indent + secondary(num) + ' ' + highlightInlineMarkdown(content, theme);
+    }
+    // Regular line - apply inline formatting
+    return highlightInlineMarkdown(line, theme);
+}
+/**
+ * Apply inline markdown highlighting (bold, italic, code, links).
+ */
+function highlightInlineMarkdown(text, theme) {
+    const primary = chalk.hex(theme.colors.primary);
+    const secondary = chalk.hex(theme.colors.secondary || theme.colors.primary);
+    const muted = chalk.hex(theme.colors.muted);
+    const fg = chalk.hex(theme.colors.foreground);
+    let result = text;
+    // Images first (before links): ![alt](url)
+    result = result.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, url) => {
+        return muted('![') + fg(alt) + muted('](') + secondary(url) + muted(')');
+    });
+    // Links: [text](url)
+    result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, linkText, url) => {
+        return muted('[') + primary(linkText) + muted('](') + secondary(url) + muted(')');
+    });
+    // Inline code: `code` (must be before bold/italic to avoid conflicts)
+    result = result.replace(/`([^`]+)`/g, (_match, code) => {
+        return muted('`') + secondary(code) + muted('`');
+    });
+    // Bold: **text** or __text__
+    result = result.replace(/(\*\*|__)(.+?)\1/g, (_match, marker, content) => {
+        return muted(marker) + fg.bold(content) + muted(marker);
+    });
+    // Italic: *text* or _text_
+    result = result.replace(/(\*|_)(.+?)\1/g, (_match, marker, content) => {
+        return muted(marker) + fg.italic(content) + muted(marker);
+    });
+    return result;
+}
+// =============================================================================
+// Key Detection Helpers (local functions not in ui-core)
+// =============================================================================
+// Most key detection functions are imported from '../../base/index.js'.
+// Only custom/specialized ones are defined locally here.
+function isCtrlS(data) {
+    return data.length === 1 && data[0] === 0x13;
+}
+function isEditKey(data) {
+    // Check if 'e' or 'i' key is pressed (to enter edit mode)
+    return isE(data) || (data.length === 1 && data[0] === 0x69); // 'i' = 0x69
+}
+// =============================================================================
+// Document Detail Overlay V2
+// =============================================================================
+/**
+ * Fullscreen document viewer and editor overlay.
+ * Shows a single document with vim-style scrolling navigation.
+ * Supports edit mode for modifying raw markdown content.
+ */
+export class DocumentDetailOverlayV2 extends BaseOverlayV2 {
+    document;
+    // Use 'inline' type so terminal-ui doesn't clear screen - we manage alternate screen ourselves
+    type = 'inline';
+    id = 'document-detail-overlay-v2';
+    // Tell terminal-ui we manage our own screen buffer - skip clearing on close
+    usesAlternateScreen = true;
+    constructor(document) {
+        // Initialize state with rendered markdown
+        const termWidth = terminal.getTerminalWidth();
+        const contentLines = renderMarkdownSync(document.content, termWidth);
+        const rawLines = document.content.split('\n');
+        // Initialize plan-specific state
+        const isPlan = document.docType === 'plan';
+        const planStatus = isPlan ? document.status ?? 'draft' : null;
+        const availableStatuses = planStatus ? VALID_TRANSITIONS[planStatus] : [];
+        super({
+            contentLines,
+            scrollOffset: 0,
+            isEditMode: false,
+            rawLines,
+            cursorLine: 0,
+            cursorColumn: 0,
+            editScrollOffset: 0,
+            isDirty: false,
+            originalContent: document.content,
+            showSavePrompt: false,
+            saveMessage: null,
+            planStatus,
+            showStatusMenu: false,
+            statusMenuIndex: 0,
+            availableStatuses,
+        });
+        this.document = document;
+    }
+    /**
+     * Enter alternate screen buffer when overlay mounts.
+     * This preserves the main screen content.
+     */
+    onMount() {
+        enterAlternateScreen();
+    }
+    /**
+     * Exit alternate screen buffer when overlay unmounts.
+     * This restores the main screen content.
+     */
+    onUnmount() {
+        exitAlternateScreen();
+    }
+    renderContent(context) {
+        if (this.state.isEditMode) {
+            return this.renderEditMode(context);
+        }
+        return this.renderViewMode(context);
+    }
+    // ===========================================================================
+    // View Mode Rendering
+    // ===========================================================================
+    renderViewMode(context) {
+        const s = context.styles;
+        const cols = context.width;
+        const rows = context.height;
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Header
+        const typeLabel = DOC_TYPE_LABELS[this.document.docType] || this.document.docType.toUpperCase();
+        lines.push(border);
+        // For plans, show status in header
+        if (this.state.planStatus) {
+            const statusLabel = PLAN_STATUS_LABELS[this.state.planStatus];
+            const statusColor = PLAN_STATUS_COLORS[this.state.planStatus];
+            const styledStatus = s[statusColor](statusLabel);
+            lines.push(` ${s.primaryBold(typeLabel)}${s.muted(' │ ')}${chalk.bold(this.document.title)}  ${styledStatus}`);
+        }
+        else {
+            lines.push(` ${s.primaryBold(typeLabel)}${s.muted(' │ ')}${chalk.bold(this.document.title)}`);
+        }
+        lines.push(border);
+        // Calculate content area
+        const headerLines = 3;
+        const footerLines = 3;
+        const contentHeight = rows - headerLines - footerLines;
+        // Get visible lines
+        const totalLines = this.state.contentLines.length;
+        const visibleLines = [];
+        let physicalLinesUsed = 0;
+        for (let i = this.state.scrollOffset; i < totalLines && physicalLinesUsed < contentHeight; i++) {
+            const line = this.state.contentLines[i];
+            // eslint-disable-next-line no-control-regex
+            const visualLen = line.replace(/\x1b\[[0-9;]*m/g, '').length;
+            const linePhysicalHeight = Math.max(1, Math.ceil(visualLen / cols));
+            if (physicalLinesUsed + linePhysicalHeight <= contentHeight) {
+                visibleLines.push(line);
+                physicalLinesUsed += linePhysicalHeight;
+            }
+            else {
+                break;
+            }
+        }
+        // Content
+        for (const line of visibleLines) {
+            lines.push(line);
+        }
+        // Pad remaining space
+        for (let i = physicalLinesUsed; i < contentHeight; i++) {
+            lines.push('');
+        }
+        // Footer with position info
+        const canScrollUp = this.state.scrollOffset > 0;
+        const canScrollDown = this.state.scrollOffset + contentHeight < totalLines;
+        const arrows = (canScrollUp ? '▲' : ' ') + (canScrollDown ? '▼' : ' ');
+        const position = totalLines > 0
+            ? `Line ${String(this.state.scrollOffset + 1)}-${String(Math.min(this.state.scrollOffset + contentHeight, totalLines))} of ${String(totalLines)}`
+            : '';
+        const scrollPercent = totalLines > contentHeight
+            ? Math.round(((this.state.scrollOffset + contentHeight) / totalLines) * 100)
+            : 100;
+        lines.push(border);
+        // Show status menu if open
+        if (this.state.showStatusMenu && this.state.availableStatuses.length > 0) {
+            const statusOptions = this.state.availableStatuses.map((status, idx) => {
+                const label = PLAN_STATUS_LABELS[status];
+                return idx === this.state.statusMenuIndex ? s.primary(`[${label}]`) : s.muted(label);
+            }).join('  ');
+            lines.push(s.warning(' Change status: ') + statusOptions + s.muted('  ↑↓ Select · Enter Confirm · Esc Cancel'));
+        }
+        else {
+            // Normal footer with plan-specific hint
+            const planHint = this.state.planStatus && this.state.availableStatuses.length > 0 ? ' · s Status' : '';
+            lines.push(s.muted(` ${arrows} ${position} (${String(scrollPercent)}%)  ↑↓/jk Scroll · e/i Edit${planHint} · q/Esc Back`));
+        }
+        lines.push(border);
+        return lines;
+    }
+    // ===========================================================================
+    // Edit Mode Rendering
+    // ===========================================================================
+    renderEditMode(context) {
+        const s = context.styles;
+        const cols = context.width;
+        const rows = context.height;
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Header with [EDIT] indicator
+        const typeLabel = DOC_TYPE_LABELS[this.document.docType] || this.document.docType.toUpperCase();
+        const editIndicator = this.state.isDirty ? s.warning('[EDIT*]') : s.primary('[EDIT]');
+        lines.push(border);
+        lines.push(` ${s.primaryBold(typeLabel)}${s.muted(' │ ')}${chalk.bold(this.document.title)}  ${editIndicator}`);
+        lines.push(border);
+        // Calculate content area
+        const headerLines = 3;
+        const footerLines = 3;
+        const contentHeight = rows - headerLines - footerLines;
+        // Ensure cursor is visible (adjust scroll if needed)
+        this.ensureCursorVisible(contentHeight);
+        // Get visible lines with line numbers
+        const totalLines = this.state.rawLines.length;
+        const lineNumWidth = String(totalLines).length + 1;
+        // Get current theme for syntax highlighting
+        const theme = getCurrentTheme();
+        // Pre-compute code block state for all lines up to and including visible area
+        // This ensures we know if we're inside a code block when rendering
+        let codeBlockState = { inCodeBlock: false, language: '', fenceChar: '', fenceLength: 0 };
+        const lineStates = [];
+        for (let i = 0; i < totalLines; i++) {
+            const line = this.state.rawLines[i];
+            // Check for code fence (we only need to track state, not highlight)
+            const fenceMatch = line.match(/^(`{3,}|~{3,})(\w*)\s*$/);
+            if (fenceMatch) {
+                const [, fence, lang] = fenceMatch;
+                const fenceChar = fence[0];
+                const fenceLength = fence.length;
+                if (!codeBlockState.inCodeBlock) {
+                    codeBlockState = { inCodeBlock: true, language: lang || 'plaintext', fenceChar, fenceLength };
+                }
+                else if (fenceChar === codeBlockState.fenceChar && fenceLength >= codeBlockState.fenceLength) {
+                    codeBlockState = { inCodeBlock: false, language: '', fenceChar: '', fenceLength: 0 };
+                }
+            }
+            lineStates[i] = { ...codeBlockState };
+        }
+        for (let i = 0; i < contentHeight; i++) {
+            const lineIndex = this.state.editScrollOffset + i;
+            if (lineIndex < totalLines) {
+                const lineNum = String(lineIndex + 1).padStart(lineNumWidth);
+                const lineContent = this.state.rawLines[lineIndex];
+                const isCursorLine = lineIndex === this.state.cursorLine;
+                // Render line with cursor if this is the cursor line (no highlighting for accurate positioning)
+                if (isCursorLine) {
+                    const renderedLine = this.renderLineWithCursor(lineContent, this.state.cursorColumn, cols - lineNumWidth - 2);
+                    lines.push(s.muted(`${lineNum}│`) + renderedLine);
+                }
+                else {
+                    // Apply syntax highlighting to non-cursor lines
+                    const maxLen = cols - lineNumWidth - 2;
+                    const truncated = lineContent.length > maxLen;
+                    const displayContent = truncated
+                        ? lineContent.slice(0, maxLen - 1)
+                        : lineContent;
+                    // Get the state BEFORE this line to know if we're inside a code block
+                    const prevState = lineIndex > 0 ? lineStates[lineIndex - 1] : { inCodeBlock: false, language: '', fenceChar: '', fenceLength: 0 };
+                    const { highlighted } = highlightEditLine(displayContent, prevState, theme);
+                    lines.push(s.muted(`${lineNum}│`) + highlighted + (truncated ? s.muted('…') : ''));
+                }
+            }
+            else {
+                // Empty line beyond document
+                const lineNum = ' '.repeat(lineNumWidth);
+                lines.push(s.muted(`${lineNum}│`) + s.muted('~'));
+            }
+        }
+        // Footer
+        lines.push(border);
+        if (this.state.showSavePrompt) {
+            // Save prompt
+            lines.push(s.warning(' Unsaved changes. Save? ') + s.primary('(y)') + 'es / ' + s.primary('(n)') + 'o / ' + s.primary('(c)') + 'ancel');
+        }
+        else if (this.state.saveMessage) {
+            // Brief save message
+            lines.push(s.success(` ${this.state.saveMessage}`));
+        }
+        else {
+            // Normal edit mode footer
+            const cursorPos = `Ln ${String(this.state.cursorLine + 1)}, Col ${String(this.state.cursorColumn + 1)}`;
+            const modifiedIndicator = this.state.isDirty ? s.warning('[modified]') : '';
+            lines.push(s.primaryBold(' ── INSERT ── ') + s.muted(cursorPos) + '  ' + modifiedIndicator + s.muted('  Ctrl+S Save · Esc Exit'));
+        }
+        lines.push(border);
+        return lines;
+    }
+    renderLineWithCursor(line, cursorCol, maxLen) {
+        const theme = getCurrentTheme();
+        const cursorStyle = chalk.inverse;
+        // Handle cursor beyond line end
+        const effectiveCursorCol = Math.min(cursorCol, line.length);
+        // Calculate visible portion
+        let viewStart = 0;
+        if (effectiveCursorCol >= maxLen - 5) {
+            viewStart = effectiveCursorCol - maxLen + 10;
+        }
+        viewStart = Math.max(0, viewStart);
+        const viewEnd = viewStart + maxLen;
+        const visibleLine = line.slice(viewStart, viewEnd);
+        const cursorPosInView = effectiveCursorCol - viewStart;
+        // Build the line with cursor
+        let result = '';
+        for (let i = 0; i < visibleLine.length; i++) {
+            if (i === cursorPosInView) {
+                result += cursorStyle(visibleLine[i]);
+            }
+            else {
+                result += visibleLine[i];
+            }
+        }
+        // If cursor is at end of line (or beyond), show cursor as block
+        if (cursorPosInView >= visibleLine.length) {
+            result += cursorStyle(' ');
+        }
+        // Add truncation indicator
+        if (viewStart > 0) {
+            result = chalk.hex(theme.colors.muted)('…') + result.slice(1);
+        }
+        if (line.length > viewEnd) {
+            result = result.slice(0, -1) + chalk.hex(theme.colors.muted)('…');
+        }
+        return result;
+    }
+    ensureCursorVisible(contentHeight) {
+        // Scroll up if cursor is above visible area
+        if (this.state.cursorLine < this.state.editScrollOffset) {
+            this.state.editScrollOffset = this.state.cursorLine;
+        }
+        // Scroll down if cursor is below visible area
+        if (this.state.cursorLine >= this.state.editScrollOffset + contentHeight) {
+            this.state.editScrollOffset = this.state.cursorLine - contentHeight + 1;
+        }
+    }
+    // ===========================================================================
+    // Key Handling
+    // ===========================================================================
+    handleKey(key) {
+        const data = key.raw;
+        // Handle save prompt state
+        if (this.state.showSavePrompt) {
+            return this.handleSavePromptKey(data);
+        }
+        // Handle status menu
+        if (this.state.showStatusMenu) {
+            return this.handleStatusMenuKey(data);
+        }
+        // Handle edit mode
+        if (this.state.isEditMode) {
+            return this.handleEditModeKey(data);
+        }
+        // Handle view mode
+        return this.handleViewModeKey(data);
+    }
+    // ===========================================================================
+    // View Mode Key Handling
+    // ===========================================================================
+    handleViewModeKey(data) {
+        const char = getPrintableChar(data);
+        const keyStr = data.toString();
+        const rows = terminal.getTerminalHeight();
+        const contentHeight = rows - 6;
+        const totalLines = this.state.contentLines.length;
+        const maxScroll = Math.max(0, totalLines - contentHeight);
+        // Ctrl+C closes everything (no going back)
+        if (isCtrlC(data)) {
+            return this.close({ goBack: false });
+        }
+        // Escape or q - go back to list
+        if (isClose(data)) {
+            return this.close({ goBack: true });
+        }
+        // e or i - enter edit mode
+        if (isEditKey(data)) {
+            this.state.isEditMode = true;
+            this.state.cursorLine = 0;
+            this.state.cursorColumn = 0;
+            this.state.editScrollOffset = 0;
+            this.state.saveMessage = null;
+            return this.rerender();
+        }
+        // s - open status menu (plans only)
+        if (char === 's' && this.state.planStatus && this.state.availableStatuses.length > 0) {
+            this.state.showStatusMenu = true;
+            this.state.statusMenuIndex = 0;
+            return this.rerender();
+        }
+        // Up / k
+        if (isNavigateUp(data)) {
+            if (this.state.scrollOffset > 0) {
+                this.state.scrollOffset--;
+                return this.rerender();
+            }
+            return this.noAction();
+        }
+        // Down / j
+        if (isNavigateDown(data)) {
+            if (this.state.scrollOffset < maxScroll) {
+                this.state.scrollOffset++;
+                return this.rerender();
+            }
+            return this.noAction();
+        }
+        // Page Up
+        if (keyStr === '\x1b[5~') {
+            this.state.scrollOffset = Math.max(0, this.state.scrollOffset - contentHeight);
+            return this.rerender();
+        }
+        // Page Down / Space
+        if (keyStr === '\x1b[6~' || isSpace(data)) {
+            this.state.scrollOffset = Math.min(maxScroll, this.state.scrollOffset + contentHeight);
+            return this.rerender();
+        }
+        // g = top
+        if (char === 'g') {
+            this.state.scrollOffset = 0;
+            return this.rerender();
+        }
+        // G = bottom
+        if (char === 'G') {
+            this.state.scrollOffset = maxScroll;
+            return this.rerender();
+        }
+        // Home
+        if (keyStr === '\x1b[H') {
+            this.state.scrollOffset = 0;
+            return this.rerender();
+        }
+        // End
+        if (keyStr === '\x1b[F') {
+            this.state.scrollOffset = maxScroll;
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    // ===========================================================================
+    // Edit Mode Key Handling
+    // ===========================================================================
+    handleEditModeKey(data) {
+        // Clear save message on any key
+        if (this.state.saveMessage) {
+            this.state.saveMessage = null;
+        }
+        // Ctrl+C - exit immediately without saving
+        if (isCtrlC(data)) {
+            return this.close({ goBack: false });
+        }
+        // Ctrl+S - save
+        if (isCtrlS(data)) {
+            this.saveDocument();
+            return this.rerender();
+        }
+        // Escape - exit edit mode (prompt if dirty)
+        if (isEscape(data)) {
+            if (this.state.isDirty) {
+                this.state.showSavePrompt = true;
+                return this.rerender();
+            }
+            // Exit edit mode, re-render markdown
+            return this.exitEditMode();
+        }
+        // Navigation
+        if (isUpArrow(data)) {
+            return this.moveCursorUp();
+        }
+        if (isDownArrow(data)) {
+            return this.moveCursorDown();
+        }
+        if (isLeftArrow(data)) {
+            return this.moveCursorLeft();
+        }
+        if (isRightArrow(data)) {
+            return this.moveCursorRight();
+        }
+        if (isHome(data)) {
+            this.state.cursorColumn = 0;
+            return this.rerender();
+        }
+        if (isEnd(data)) {
+            this.state.cursorColumn = this.getCurrentLine().length;
+            return this.rerender();
+        }
+        if (isPageUp(data)) {
+            const rows = terminal.getTerminalHeight();
+            const pageSize = rows - 6;
+            this.state.cursorLine = Math.max(0, this.state.cursorLine - pageSize);
+            this.clampCursorColumn();
+            return this.rerender();
+        }
+        if (isPageDown(data)) {
+            const rows = terminal.getTerminalHeight();
+            const pageSize = rows - 6;
+            this.state.cursorLine = Math.min(this.state.rawLines.length - 1, this.state.cursorLine + pageSize);
+            this.clampCursorColumn();
+            return this.rerender();
+        }
+        // Editing
+        if (isBackspace(data)) {
+            return this.handleBackspace();
+        }
+        if (isDelete(data)) {
+            return this.handleDelete();
+        }
+        if (isEnter(data)) {
+            return this.handleEnter();
+        }
+        if (isTab(data)) {
+            return this.insertText(' '.repeat(TAB_SIZE));
+        }
+        // Printable characters
+        const char = getPrintableChar(data);
+        if (char) {
+            return this.insertText(char);
+        }
+        return this.noAction();
+    }
+    // ===========================================================================
+    // Save Prompt Key Handling
+    // ===========================================================================
+    handleSavePromptKey(data) {
+        const char = getPrintableChar(data);
+        // y = save and exit edit mode
+        if (char === 'y' || char === 'Y') {
+            this.saveDocument();
+            this.state.showSavePrompt = false;
+            return this.exitEditMode();
+        }
+        // n = discard and exit edit mode
+        if (char === 'n' || char === 'N') {
+            // Revert to original content
+            this.state.rawLines = this.state.originalContent.split('\n');
+            this.state.isDirty = false;
+            this.state.showSavePrompt = false;
+            return this.exitEditMode();
+        }
+        // c or Escape = cancel, stay in edit mode
+        if (char === 'c' || char === 'C' || isEscape(data)) {
+            this.state.showSavePrompt = false;
+            return this.rerender();
+        }
+        // Ctrl+C = exit everything
+        if (isCtrlC(data)) {
+            return this.close({ goBack: false });
+        }
+        return this.noAction();
+    }
+    // ===========================================================================
+    // Status Menu Key Handling (Plans only)
+    // ===========================================================================
+    handleStatusMenuKey(data) {
+        // Ctrl+C closes everything
+        if (isCtrlC(data)) {
+            return this.close({ goBack: false });
+        }
+        // Escape - close status menu
+        if (isEscape(data)) {
+            this.state.showStatusMenu = false;
+            return this.rerender();
+        }
+        // Up arrow - previous status
+        if (isUpArrow(data)) {
+            if (this.state.statusMenuIndex > 0) {
+                this.state.statusMenuIndex--;
+                return this.rerender();
+            }
+            return this.noAction();
+        }
+        // Down arrow - next status
+        if (isDownArrow(data)) {
+            if (this.state.statusMenuIndex < this.state.availableStatuses.length - 1) {
+                this.state.statusMenuIndex++;
+                return this.rerender();
+            }
+            return this.noAction();
+        }
+        // Enter - confirm status change
+        if (isEnter(data)) {
+            const newStatus = this.state.availableStatuses[this.state.statusMenuIndex];
+            return this.changeStatus(newStatus);
+        }
+        return this.noAction();
+    }
+    changeStatus(newStatus) {
+        try {
+            // Update the plan status in the database
+            planRepository.update(this.document.id, { status: newStatus });
+            // Update local state
+            this.state.planStatus = newStatus;
+            this.state.availableStatuses = VALID_TRANSITIONS[newStatus];
+            this.state.showStatusMenu = false;
+            this.state.statusMenuIndex = 0;
+            // Also update the document's status field for consistency
+            this.document.status = newStatus;
+            return this.rerender();
+        }
+        catch {
+            // On error, just close the menu
+            this.state.showStatusMenu = false;
+            return this.rerender();
+        }
+    }
+    // ===========================================================================
+    // Cursor Movement
+    // ===========================================================================
+    moveCursorUp() {
+        if (this.state.cursorLine > 0) {
+            this.state.cursorLine--;
+            this.clampCursorColumn();
+        }
+        return this.rerender();
+    }
+    moveCursorDown() {
+        if (this.state.cursorLine < this.state.rawLines.length - 1) {
+            this.state.cursorLine++;
+            this.clampCursorColumn();
+        }
+        return this.rerender();
+    }
+    moveCursorLeft() {
+        if (this.state.cursorColumn > 0) {
+            this.state.cursorColumn--;
+        }
+        else if (this.state.cursorLine > 0) {
+            // Wrap to end of previous line
+            this.state.cursorLine--;
+            this.state.cursorColumn = this.getCurrentLine().length;
+        }
+        return this.rerender();
+    }
+    moveCursorRight() {
+        const lineLen = this.getCurrentLine().length;
+        if (this.state.cursorColumn < lineLen) {
+            this.state.cursorColumn++;
+        }
+        else if (this.state.cursorLine < this.state.rawLines.length - 1) {
+            // Wrap to start of next line
+            this.state.cursorLine++;
+            this.state.cursorColumn = 0;
+        }
+        return this.rerender();
+    }
+    clampCursorColumn() {
+        const lineLen = this.getCurrentLine().length;
+        this.state.cursorColumn = Math.min(this.state.cursorColumn, lineLen);
+    }
+    getCurrentLine() {
+        return this.state.rawLines[this.state.cursorLine] || '';
+    }
+    // ===========================================================================
+    // Text Editing
+    // ===========================================================================
+    insertText(text) {
+        const line = this.getCurrentLine();
+        const before = line.slice(0, this.state.cursorColumn);
+        const after = line.slice(this.state.cursorColumn);
+        this.state.rawLines[this.state.cursorLine] = before + text + after;
+        this.state.cursorColumn += text.length;
+        this.state.isDirty = true;
+        return this.rerender();
+    }
+    handleBackspace() {
+        if (this.state.cursorColumn > 0) {
+            // Delete character before cursor
+            const line = this.getCurrentLine();
+            const before = line.slice(0, this.state.cursorColumn - 1);
+            const after = line.slice(this.state.cursorColumn);
+            this.state.rawLines[this.state.cursorLine] = before + after;
+            this.state.cursorColumn--;
+            this.state.isDirty = true;
+        }
+        else if (this.state.cursorLine > 0) {
+            // Join with previous line
+            const currentLine = this.getCurrentLine();
+            const prevLine = this.state.rawLines[this.state.cursorLine - 1];
+            this.state.rawLines[this.state.cursorLine - 1] = prevLine + currentLine;
+            this.state.rawLines.splice(this.state.cursorLine, 1);
+            this.state.cursorLine--;
+            this.state.cursorColumn = prevLine.length;
+            this.state.isDirty = true;
+        }
+        return this.rerender();
+    }
+    handleDelete() {
+        const line = this.getCurrentLine();
+        if (this.state.cursorColumn < line.length) {
+            // Delete character at cursor
+            const before = line.slice(0, this.state.cursorColumn);
+            const after = line.slice(this.state.cursorColumn + 1);
+            this.state.rawLines[this.state.cursorLine] = before + after;
+            this.state.isDirty = true;
+        }
+        else if (this.state.cursorLine < this.state.rawLines.length - 1) {
+            // Join with next line
+            const nextLine = this.state.rawLines[this.state.cursorLine + 1];
+            this.state.rawLines[this.state.cursorLine] = line + nextLine;
+            this.state.rawLines.splice(this.state.cursorLine + 1, 1);
+            this.state.isDirty = true;
+        }
+        return this.rerender();
+    }
+    handleEnter() {
+        const line = this.getCurrentLine();
+        const before = line.slice(0, this.state.cursorColumn);
+        const after = line.slice(this.state.cursorColumn);
+        this.state.rawLines[this.state.cursorLine] = before;
+        this.state.rawLines.splice(this.state.cursorLine + 1, 0, after);
+        this.state.cursorLine++;
+        this.state.cursorColumn = 0;
+        this.state.isDirty = true;
+        return this.rerender();
+    }
+    // ===========================================================================
+    // Save and Exit
+    // ===========================================================================
+    saveDocument() {
+        const content = this.state.rawLines.join('\n');
+        try {
+            documentRepository.update(this.document.id, { content });
+            this.state.originalContent = content;
+            this.state.isDirty = false;
+            this.state.saveMessage = 'Saved!';
+            // Clear message after a delay (will be cleared on next keypress anyway)
+            setTimeout(() => {
+                if (this.state.saveMessage === 'Saved!') {
+                    this.state.saveMessage = null;
+                }
+            }, 2000);
+        }
+        catch (error) {
+            this.state.saveMessage = `Error: ${error.message}`;
+        }
+    }
+    exitEditMode() {
+        this.state.isEditMode = false;
+        // Re-render markdown from current content
+        const content = this.state.rawLines.join('\n');
+        const termWidth = terminal.getTerminalWidth();
+        this.state.contentLines = renderMarkdownSync(content, termWidth);
+        this.state.scrollOffset = 0;
+        return this.rerender();
+    }
+}