@compilr-dev/cli 0.6.6 → 0.7.0

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

@@ -0,0 +1,863 @@
+/**
+ * Skill Detail Overlay V2
+ *
+ * Fullscreen SKILL.md viewer AND editor with vim-style navigation.
+ * Copied from DocumentDetailOverlayV2 — adapted for file-based skills.
+ *
+ * Modes:
+ * - View: rendered markdown, scrollable (j/k, g/G, PgUp/PgDn)
+ * - Edit: raw markdown editing with cursor, line numbers, syntax highlighting
+ * - Diff: side-by-side diff against upstream SDK version (forked skills only)
+ *
+ * Features:
+ * - Full-screen viewing with markdown rendering
+ * - Vim-style navigation
+ * - Edit mode with raw markdown editing
+ * - Save to disk (Ctrl+S) with validation warnings
+ * - Dirty check with save prompt on exit
+ * - Diff view for forked skills (D key)
+ */
+import { promises as fsAsync } from 'node:fs';
+import chalk from 'chalk';
+import hljs from 'highlight.js';
+import { ttyWrite } from '../../terminal.js';
+// =============================================================================
+// Alternate Screen Buffer Management
+// =============================================================================
+let inAlternateScreen = false;
+function enterAlternateScreen() {
+    if (inAlternateScreen)
+        return;
+    ttyWrite('\x1b[?1049h');
+    ttyWrite('\x1b[H');
+    inAlternateScreen = true;
+}
+function exitAlternateScreen() {
+    if (!inAlternateScreen)
+        return;
+    ttyWrite('\x1b[?1049l');
+    inAlternateScreen = false;
+}
+function setupAlternateScreenCleanup() {
+    const cleanup = () => { exitAlternateScreen(); };
+    process.on('exit', cleanup);
+    process.on('SIGINT', () => { cleanup(); process.exit(130); });
+    if (process.platform !== 'win32') {
+        process.on('SIGTERM', () => { cleanup(); process.exit(143); });
+    }
+    process.on('uncaughtException', (err) => { cleanup(); console.error('Uncaught exception:', err); process.exit(1); });
+    process.on('unhandledRejection', (reason) => { cleanup(); console.error('Unhandled rejection:', reason); process.exit(1); });
+}
+setupAlternateScreenCleanup();
+import { marked } from 'marked';
+import { markedTerminal } from '../../markdown-renderer.js';
+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 { getCurrentTheme } from '../../../themes/index.js';
+import * as terminal from '../../terminal.js';
+import { parseSkillMarkdown, diffForkVsUpstream, validateSkillQuality, } from '@compilr-dev/sdk';
+import { highlight as cliHighlight, supportsLanguage } from 'cli-highlight';
+// =============================================================================
+// Syntax Highlighting (from document-detail-overlay-v2.ts)
+// =============================================================================
+const languageAliases = {
+    'sh': 'bash', 'zsh': 'bash', 'fish': 'bash',
+    'console': 'bash', 'terminal': 'bash', 'command': 'bash',
+    'jsx': 'javascript', 'tsx': 'typescript',
+    'htm': 'xml', 'html': 'xml', 'vue': 'xml', 'svelte': 'xml',
+    'text': 'plaintext', 'txt': 'plaintext', 'log': 'plaintext',
+    'output': 'plaintext', 'result': 'plaintext',
+    'jsonc': 'json', 'json5': 'json', 'jsonl': 'json',
+    'conf': 'ini', 'config': 'ini', 'env': 'ini', 'dotenv': 'ini',
+};
+for (const [alias, target] of Object.entries(languageAliases)) {
+    try {
+        hljs.registerAliases(alias, { languageName: target });
+    }
+    catch { /* ignore */ }
+}
+// =============================================================================
+// Markdown Rendering
+// =============================================================================
+function getThemedMarkedOptions(termWidth) {
+    const theme = getCurrentTheme();
+    const primary = chalk.hex(theme.colors.primary);
+    const secondary = chalk.hex(theme.colors.secondary || theme.colors.primary);
+    const fg = chalk.hex(theme.colors.foreground);
+    const muted = chalk.hex(theme.colors.muted);
+    const border = chalk.hex(theme.colors.border);
+    return {
+        reflowText: true,
+        width: Math.min(100, termWidth - 4),
+        unescape: true,
+        tab: 2,
+        showSectionPrefix: false,
+        heading: primary.bold,
+        firstHeading: primary.bold,
+        strong: fg.bold,
+        em: fg.italic,
+        link: secondary,
+        href: secondary.underline,
+        blockquote: muted.italic,
+        del: muted.strikethrough,
+        hr: border,
+        codespan: primary,
+        code: secondary,
+        html: muted,
+        table: fg,
+        listitem: fg,
+        paragraph: fg,
+        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 renderMarkdownSync(content, termWidth) {
+    const options = getThemedMarkedOptions(termWidth);
+    marked.use(markedTerminal(options));
+    const rendered = marked.parse(content, { async: false });
+    return rendered.split('\n');
+}
+function highlightEditLine(line, codeBlockState, theme) {
+    const secondary = chalk.hex(theme.colors.secondary || theme.colors.primary);
+    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) {
+            return {
+                highlighted: secondary(line),
+                newState: { inCodeBlock: true, language: lang || 'plaintext', fenceChar, fenceLength },
+            };
+        }
+        else if (fenceChar === codeBlockState.fenceChar && fenceLength >= codeBlockState.fenceLength) {
+            return {
+                highlighted: secondary(line),
+                newState: { inCodeBlock: false, language: '', fenceChar: '', fenceLength: 0 },
+            };
+        }
+    }
+    if (codeBlockState.inCodeBlock) {
+        return {
+            highlighted: highlightCodeLine(line, codeBlockState.language, theme),
+            newState: codeBlockState,
+        };
+    }
+    return { highlighted: highlightMarkdownLine(line, theme), newState: codeBlockState };
+}
+function highlightCodeLine(line, language, theme) {
+    const langMap = {
+        'js': 'javascript', 'ts': 'typescript', 'py': 'python', 'rb': 'ruby',
+        'sh': 'bash', 'shell': 'bash', 'zsh': 'bash', 'yml': 'yaml', 'md': 'markdown',
+        'jsx': 'javascript', 'tsx': 'typescript',
+    };
+    const mappedLang = langMap[language.toLowerCase()] || language.toLowerCase();
+    if (!supportsLanguage(mappedLang) && mappedLang !== 'plaintext') {
+        return chalk.hex(theme.colors.secondary || theme.colors.primary)(line);
+    }
+    try {
+        if (mappedLang === 'plaintext')
+            return chalk.hex(theme.colors.secondary || theme.colors.primary)(line);
+        return cliHighlight(line, { language: mappedLang, ignoreIllegals: true });
+    }
+    catch {
+        return chalk.hex(theme.colors.secondary || theme.colors.primary)(line);
+    }
+}
+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);
+    if (!line.trim())
+        return line;
+    // YAML frontmatter delimiter
+    if (line === '---')
+        return muted(line);
+    // Headers
+    const headerMatch = line.match(/^(#{1,6})\s(.*)$/);
+    if (headerMatch)
+        return primary(headerMatch[1]) + ' ' + primary.bold(headerMatch[2]);
+    // Horizontal rule
+    if (line.match(/^([-*_])\1{2,}\s*$/))
+        return muted(line);
+    // Unordered list
+    const ulMatch = line.match(/^(\s*)([-*+])\s+(.*)$/);
+    if (ulMatch)
+        return ulMatch[1] + secondary(ulMatch[2]) + ' ' + ulMatch[3];
+    // Ordered list
+    const olMatch = line.match(/^(\s*)(\d+\.)\s+(.*)$/);
+    if (olMatch)
+        return olMatch[1] + secondary(olMatch[2]) + ' ' + olMatch[3];
+    // Blockquote
+    const bqMatch = line.match(/^(>\s*)(.*)$/);
+    if (bqMatch)
+        return muted(bqMatch[1]) + muted.italic(bqMatch[2]);
+    // YAML key: value (inside frontmatter)
+    const kvMatch = line.match(/^(\s*)([\w-]+)(\s*:\s*)(.*)/);
+    if (kvMatch)
+        return kvMatch[1] + primary(kvMatch[2]) + muted(kvMatch[3]) + secondary(kvMatch[4]);
+    return line;
+}
+// =============================================================================
+// Key helpers
+// =============================================================================
+function isCtrlS(data) {
+    return data.length === 1 && data[0] === 0x13;
+}
+function isEditKey(data) {
+    return isE(data) || (data.length === 1 && data[0] === 0x69); // 'i'
+}
+const TAB_SIZE = 2;
+// =============================================================================
+// Skill Detail Overlay
+// =============================================================================
+export class SkillDetailOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'skill-detail-overlay-v2';
+    usesAlternateScreen = true;
+    filePath;
+    constructor(options) {
+        const termWidth = terminal.getTerminalWidth();
+        // Render body only (skip frontmatter for view mode)
+        const bodyContent = extractBody(options.content);
+        const contentLines = renderMarkdownSync(bodyContent, termWidth);
+        const rawLines = options.content.split('\n');
+        // Validate
+        const parsed = parseSkillMarkdown(options.content);
+        const warnings = parsed
+            ? validateSkillQuality(parsed, options.skillName).map((i) => i.message)
+            : ['Invalid frontmatter — required fields: name, description.'];
+        // Compute diff if forked
+        let diffLines = null;
+        if (options.forkedFrom && parsed?.prompt) {
+            diffLines = diffForkVsUpstream(parsed.prompt, options.forkedFrom.skill);
+        }
+        super({
+            mode: 'view',
+            contentLines,
+            scrollOffset: 0,
+            rawLines,
+            cursorLine: 0,
+            cursorColumn: 0,
+            editScrollOffset: 0,
+            isDirty: false,
+            originalContent: options.content,
+            showSavePrompt: false,
+            saveMessage: null,
+            diffLines,
+            diffScrollOffset: 0,
+            skillName: options.skillName,
+            scope: options.scope,
+            forkedFrom: options.forkedFrom ?? null,
+            boundCommands: options.boundCommands ?? [],
+            validationWarnings: warnings,
+        });
+        this.filePath = options.filePath;
+    }
+    onMount() { enterAlternateScreen(); }
+    onUnmount() { exitAlternateScreen(); }
+    // ===========================================================================
+    // Render dispatch
+    // ===========================================================================
+    renderContent(context) {
+        if (this.state.mode === 'edit')
+            return this.renderEditMode(context);
+        if (this.state.mode === 'diff')
+            return this.renderDiffMode(context);
+        return this.renderViewMode(context);
+    }
+    // ===========================================================================
+    // View Mode
+    // ===========================================================================
+    renderViewMode(context) {
+        const s = context.styles;
+        const cols = context.width;
+        const rows = context.height;
+        const border = renderBorder(cols, s);
+        const lines = [];
+        // Header
+        lines.push(border);
+        const scopeLabel = this.state.scope === 'project' ? s.secondary('[project]') : s.muted('[user]');
+        let headerExtra = ` ${scopeLabel}`;
+        if (this.state.boundCommands.length > 0) {
+            headerExtra += `  ${s.muted('→')} ${s.primary(this.state.boundCommands.join(', '))}`;
+        }
+        if (this.state.forkedFrom) {
+            headerExtra += `  ${s.muted(`forked from ${this.state.forkedFrom.skill}`)}`;
+        }
+        lines.push(` ${s.primaryBold('SKILL')}${s.muted(' │ ')}${chalk.bold(this.state.skillName)}${headerExtra}`);
+        lines.push(border);
+        // Validation warnings
+        if (this.state.validationWarnings.length > 0) {
+            lines.push(` ${s.warning(`⚠ ${String(this.state.validationWarnings.length)} warning${this.state.validationWarnings.length > 1 ? 's' : ''}`)}`);
+        }
+        // Content area
+        const headerUsed = lines.length;
+        const footerLines = 3;
+        const contentHeight = rows - headerUsed - footerLines;
+        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;
+            }
+        }
+        for (const line of visibleLines)
+            lines.push(line);
+        for (let i = physicalLinesUsed; i < contentHeight; i++)
+            lines.push('');
+        // Footer
+        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;
+        const diffHint = this.state.diffLines ? ' · D Diff' : '';
+        lines.push(border);
+        lines.push(s.muted(` ${arrows} ${position} (${String(scrollPercent)}%)  ↑↓/jk Scroll · e/i Edit${diffHint} · q/Esc Back`));
+        lines.push(border);
+        return lines;
+    }
+    // ===========================================================================
+    // Edit Mode
+    // ===========================================================================
+    renderEditMode(context) {
+        const s = context.styles;
+        const cols = context.width;
+        const rows = context.height;
+        const border = renderBorder(cols, s);
+        const lines = [];
+        const editIndicator = this.state.isDirty ? s.warning('[EDIT*]') : s.primary('[EDIT]');
+        lines.push(border);
+        lines.push(` ${s.primaryBold('SKILL')}${s.muted(' │ ')}${chalk.bold(this.state.skillName)}  ${editIndicator}`);
+        lines.push(border);
+        const headerLines = 3;
+        const footerLines = 3;
+        const contentHeight = rows - headerLines - footerLines;
+        this.ensureCursorVisible(contentHeight);
+        const totalLines = this.state.rawLines.length;
+        const lineNumWidth = String(totalLines).length + 1;
+        const theme = getCurrentTheme();
+        // Pre-compute code block state
+        let codeBlockState = { inCodeBlock: false, language: '', fenceChar: '', fenceLength: 0 };
+        const lineStates = [];
+        for (let i = 0; i < totalLines; i++) {
+            const line = this.state.rawLines[i];
+            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;
+                if (isCursorLine) {
+                    const rendered = this.renderLineWithCursor(lineContent, this.state.cursorColumn, cols - lineNumWidth - 2);
+                    lines.push(s.muted(`${lineNum}│`) + rendered);
+                }
+                else {
+                    const maxLen = cols - lineNumWidth - 2;
+                    const truncated = lineContent.length > maxLen;
+                    const display = truncated ? lineContent.slice(0, maxLen - 1) : lineContent;
+                    const prevState = lineIndex > 0 ? lineStates[lineIndex - 1] : { inCodeBlock: false, language: '', fenceChar: '', fenceLength: 0 };
+                    const { highlighted } = highlightEditLine(display, prevState, theme);
+                    lines.push(s.muted(`${lineNum}│`) + highlighted + (truncated ? s.muted('…') : ''));
+                }
+            }
+            else {
+                const lineNum = ' '.repeat(lineNumWidth);
+                lines.push(s.muted(`${lineNum}│`) + s.muted('~'));
+            }
+        }
+        lines.push(border);
+        if (this.state.showSavePrompt) {
+            lines.push(s.warning(' Unsaved changes. Save? ') + s.primary('(y)') + 'es / ' + s.primary('(n)') + 'o / ' + s.primary('(c)') + 'ancel');
+        }
+        else if (this.state.saveMessage) {
+            lines.push(s.success(` ${this.state.saveMessage}`));
+        }
+        else {
+            const cursorPos = `Ln ${String(this.state.cursorLine + 1)}, Col ${String(this.state.cursorColumn + 1)}`;
+            const mod = this.state.isDirty ? s.warning('[modified]') : '';
+            lines.push(s.primaryBold(' ── INSERT ── ') + s.muted(cursorPos) + '  ' + mod + s.muted('  Ctrl+S Save · Esc Exit'));
+        }
+        lines.push(border);
+        return lines;
+    }
+    renderLineWithCursor(line, cursorCol, maxLen) {
+        const theme = getCurrentTheme();
+        const cursorStyle = chalk.inverse;
+        const effectiveCursorCol = Math.min(cursorCol, line.length);
+        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;
+        let result = '';
+        for (let i = 0; i < visibleLine.length; i++) {
+            result += i === cursorPosInView ? cursorStyle(visibleLine[i]) : visibleLine[i];
+        }
+        if (cursorPosInView >= visibleLine.length)
+            result += cursorStyle(' ');
+        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) {
+        if (this.state.cursorLine < this.state.editScrollOffset) {
+            this.state.editScrollOffset = this.state.cursorLine;
+        }
+        if (this.state.cursorLine >= this.state.editScrollOffset + contentHeight) {
+            this.state.editScrollOffset = this.state.cursorLine - contentHeight + 1;
+        }
+    }
+    // ===========================================================================
+    // Diff Mode
+    // ===========================================================================
+    renderDiffMode(context) {
+        const s = context.styles;
+        const cols = context.width;
+        const rows = context.height;
+        const border = renderBorder(cols, s);
+        const lines = [];
+        const diff = this.state.diffLines ?? [];
+        lines.push(border);
+        const upstream = this.state.forkedFrom?.skill ?? 'unknown';
+        lines.push(` ${s.primaryBold('DIFF')}${s.muted(' │ ')}${chalk.bold(this.state.skillName)} ${s.muted('vs')} ${s.secondary(`sdk:${upstream}`)}`);
+        lines.push(border);
+        const headerUsed = 3;
+        const footerLines = 3;
+        const contentHeight = rows - headerUsed - footerLines;
+        const totalLines = diff.length;
+        for (let i = 0; i < contentHeight; i++) {
+            const lineIndex = this.state.diffScrollOffset + i;
+            if (lineIndex < totalLines) {
+                const d = diff[lineIndex];
+                const maxLen = cols - 4;
+                const content = d.content.length > maxLen ? d.content.slice(0, maxLen - 1) + '…' : d.content;
+                if (d.type === 'added') {
+                    lines.push(` ${s.success('+')} ${s.success(content)}`);
+                }
+                else if (d.type === 'removed') {
+                    lines.push(` ${s.warning('-')} ${s.warning(content)}`);
+                }
+                else {
+                    lines.push(`   ${s.muted(content)}`);
+                }
+            }
+            else {
+                lines.push('');
+            }
+        }
+        const changed = diff.filter((d) => d.type !== 'same').length;
+        const canScrollUp = this.state.diffScrollOffset > 0;
+        const canScrollDown = this.state.diffScrollOffset + contentHeight < totalLines;
+        const arrows = (canScrollUp ? '▲' : ' ') + (canScrollDown ? '▼' : ' ');
+        lines.push(border);
+        lines.push(s.muted(` ${arrows} ${String(changed)} changed lines · ${String(totalLines)} total · ↑↓/jk Scroll · q/Esc Back`));
+        lines.push(border);
+        return lines;
+    }
+    // ===========================================================================
+    // Key Handling
+    // ===========================================================================
+    handleKey(key) {
+        const data = key.raw;
+        if (this.state.showSavePrompt)
+            return this.handleSavePromptKey(data);
+        if (this.state.mode === 'edit')
+            return this.handleEditModeKey(data);
+        if (this.state.mode === 'diff')
+            return this.handleDiffModeKey(data);
+        return this.handleViewModeKey(data);
+    }
+    // ===========================================================================
+    // View Mode Keys
+    // ===========================================================================
+    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);
+        if (isCtrlC(data))
+            return this.closeWith({ goBack: false, modified: this.state.isDirty });
+        if (isClose(data))
+            return this.closeWith({ goBack: true, modified: this.state.isDirty });
+        // e/i — edit mode
+        if (isEditKey(data)) {
+            this.state.mode = 'edit';
+            this.state.cursorLine = 0;
+            this.state.cursorColumn = 0;
+            this.state.editScrollOffset = 0;
+            this.state.saveMessage = null;
+            return this.renderAction();
+        }
+        // D — diff mode (forked skills only)
+        if (char === 'D' && this.state.diffLines) {
+            this.state.mode = 'diff';
+            this.state.diffScrollOffset = 0;
+            return this.renderAction();
+        }
+        // Scroll
+        if (isNavigateUp(data)) {
+            if (this.state.scrollOffset > 0)
+                this.state.scrollOffset--;
+            return this.renderAction();
+        }
+        if (isNavigateDown(data)) {
+            if (this.state.scrollOffset < maxScroll)
+                this.state.scrollOffset++;
+            return this.renderAction();
+        }
+        if (keyStr === '\x1b[5~') {
+            this.state.scrollOffset = Math.max(0, this.state.scrollOffset - contentHeight);
+            return this.renderAction();
+        }
+        if (keyStr === '\x1b[6~' || isSpace(data)) {
+            this.state.scrollOffset = Math.min(maxScroll, this.state.scrollOffset + contentHeight);
+            return this.renderAction();
+        }
+        if (char === 'g') {
+            this.state.scrollOffset = 0;
+            return this.renderAction();
+        }
+        if (char === 'G') {
+            this.state.scrollOffset = maxScroll;
+            return this.renderAction();
+        }
+        if (isHome(data)) {
+            this.state.scrollOffset = 0;
+            return this.renderAction();
+        }
+        if (isEnd(data)) {
+            this.state.scrollOffset = maxScroll;
+            return this.renderAction();
+        }
+        return this.noAction();
+    }
+    // ===========================================================================
+    // Diff Mode Keys
+    // ===========================================================================
+    handleDiffModeKey(data) {
+        const char = getPrintableChar(data);
+        const rows = terminal.getTerminalHeight();
+        const contentHeight = rows - 6;
+        const totalLines = this.state.diffLines?.length ?? 0;
+        const maxScroll = Math.max(0, totalLines - contentHeight);
+        if (isCtrlC(data))
+            return this.closeWith({ goBack: false, modified: false });
+        if (isClose(data) || isEscape(data)) {
+            this.state.mode = 'view';
+            return this.renderAction();
+        }
+        if (isNavigateUp(data)) {
+            if (this.state.diffScrollOffset > 0)
+                this.state.diffScrollOffset--;
+            return this.renderAction();
+        }
+        if (isNavigateDown(data)) {
+            if (this.state.diffScrollOffset < maxScroll)
+                this.state.diffScrollOffset++;
+            return this.renderAction();
+        }
+        if (char === 'g') {
+            this.state.diffScrollOffset = 0;
+            return this.renderAction();
+        }
+        if (char === 'G') {
+            this.state.diffScrollOffset = maxScroll;
+            return this.renderAction();
+        }
+        if (isPageUp(data)) {
+            this.state.diffScrollOffset = Math.max(0, this.state.diffScrollOffset - contentHeight);
+            return this.renderAction();
+        }
+        if (isPageDown(data) || isSpace(data)) {
+            this.state.diffScrollOffset = Math.min(maxScroll, this.state.diffScrollOffset + contentHeight);
+            return this.renderAction();
+        }
+        return this.noAction();
+    }
+    // ===========================================================================
+    // Edit Mode Keys
+    // ===========================================================================
+    handleEditModeKey(data) {
+        if (this.state.saveMessage)
+            this.state.saveMessage = null;
+        if (isCtrlC(data))
+            return this.closeWith({ goBack: false, modified: this.state.isDirty });
+        if (isCtrlS(data)) {
+            void this.saveSkill();
+            return this.renderAction();
+        }
+        if (isEscape(data)) {
+            if (this.state.isDirty) {
+                this.state.showSavePrompt = true;
+                return this.renderAction();
+            }
+            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.renderAction();
+        }
+        if (isEnd(data)) {
+            this.state.cursorColumn = this.getCurrentLine().length;
+            return this.renderAction();
+        }
+        if (isPageUp(data)) {
+            const pageSize = terminal.getTerminalHeight() - 6;
+            this.state.cursorLine = Math.max(0, this.state.cursorLine - pageSize);
+            this.clampCursorColumn();
+            return this.renderAction();
+        }
+        if (isPageDown(data)) {
+            const pageSize = terminal.getTerminalHeight() - 6;
+            this.state.cursorLine = Math.min(this.state.rawLines.length - 1, this.state.cursorLine + pageSize);
+            this.clampCursorColumn();
+            return this.renderAction();
+        }
+        // Editing
+        if (isBackspace(data))
+            return this.handleBackspace();
+        if (isDelete(data))
+            return this.handleDeleteKey();
+        if (isEnter(data))
+            return this.handleEnter();
+        if (isTab(data))
+            return this.insertText(' '.repeat(TAB_SIZE));
+        const char = getPrintableChar(data);
+        if (char)
+            return this.insertText(char);
+        return this.noAction();
+    }
+    // ===========================================================================
+    // Save Prompt Keys
+    // ===========================================================================
+    handleSavePromptKey(data) {
+        const char = getPrintableChar(data);
+        if (char === 'y' || char === 'Y') {
+            void this.saveSkill();
+            this.state.showSavePrompt = false;
+            return this.exitEditMode();
+        }
+        if (char === 'n' || char === 'N') {
+            this.state.rawLines = this.state.originalContent.split('\n');
+            this.state.isDirty = false;
+            this.state.showSavePrompt = false;
+            return this.exitEditMode();
+        }
+        if (char === 'c' || char === 'C' || isEscape(data)) {
+            this.state.showSavePrompt = false;
+            return this.renderAction();
+        }
+        if (isCtrlC(data))
+            return this.closeWith({ goBack: false, modified: false });
+        return this.noAction();
+    }
+    // ===========================================================================
+    // Cursor Movement
+    // ===========================================================================
+    moveCursorUp() {
+        if (this.state.cursorLine > 0) {
+            this.state.cursorLine--;
+            this.clampCursorColumn();
+        }
+        return this.renderAction();
+    }
+    moveCursorDown() {
+        if (this.state.cursorLine < this.state.rawLines.length - 1) {
+            this.state.cursorLine++;
+            this.clampCursorColumn();
+        }
+        return this.renderAction();
+    }
+    moveCursorLeft() {
+        if (this.state.cursorColumn > 0) {
+            this.state.cursorColumn--;
+        }
+        else if (this.state.cursorLine > 0) {
+            this.state.cursorLine--;
+            this.state.cursorColumn = this.getCurrentLine().length;
+        }
+        return this.renderAction();
+    }
+    moveCursorRight() {
+        const lineLen = this.getCurrentLine().length;
+        if (this.state.cursorColumn < lineLen) {
+            this.state.cursorColumn++;
+        }
+        else if (this.state.cursorLine < this.state.rawLines.length - 1) {
+            this.state.cursorLine++;
+            this.state.cursorColumn = 0;
+        }
+        return this.renderAction();
+    }
+    clampCursorColumn() {
+        this.state.cursorColumn = Math.min(this.state.cursorColumn, this.getCurrentLine().length);
+    }
+    getCurrentLine() {
+        return this.state.rawLines[this.state.cursorLine] || '';
+    }
+    // ===========================================================================
+    // Text Editing
+    // ===========================================================================
+    insertText(text) {
+        const line = this.getCurrentLine();
+        this.state.rawLines[this.state.cursorLine] = line.slice(0, this.state.cursorColumn) + text + line.slice(this.state.cursorColumn);
+        this.state.cursorColumn += text.length;
+        this.state.isDirty = true;
+        return this.renderAction();
+    }
+    handleBackspace() {
+        if (this.state.cursorColumn > 0) {
+            const line = this.getCurrentLine();
+            this.state.rawLines[this.state.cursorLine] = line.slice(0, this.state.cursorColumn - 1) + line.slice(this.state.cursorColumn);
+            this.state.cursorColumn--;
+            this.state.isDirty = true;
+        }
+        else if (this.state.cursorLine > 0) {
+            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.renderAction();
+    }
+    handleDeleteKey() {
+        const line = this.getCurrentLine();
+        if (this.state.cursorColumn < line.length) {
+            this.state.rawLines[this.state.cursorLine] = line.slice(0, this.state.cursorColumn) + line.slice(this.state.cursorColumn + 1);
+            this.state.isDirty = true;
+        }
+        else if (this.state.cursorLine < this.state.rawLines.length - 1) {
+            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.renderAction();
+    }
+    handleEnter() {
+        const line = this.getCurrentLine();
+        this.state.rawLines[this.state.cursorLine] = line.slice(0, this.state.cursorColumn);
+        this.state.rawLines.splice(this.state.cursorLine + 1, 0, line.slice(this.state.cursorColumn));
+        this.state.cursorLine++;
+        this.state.cursorColumn = 0;
+        this.state.isDirty = true;
+        return this.renderAction();
+    }
+    // ===========================================================================
+    // Save + Validate
+    // ===========================================================================
+    async saveSkill() {
+        const content = this.state.rawLines.join('\n');
+        try {
+            await fsAsync.writeFile(this.filePath, content);
+            this.state.originalContent = content;
+            this.state.isDirty = false;
+            // Re-validate
+            const parsed = parseSkillMarkdown(content);
+            const warnings = parsed
+                ? validateSkillQuality(parsed, this.state.skillName).map((i) => i.message)
+                : ['Invalid frontmatter — required fields: name, description.'];
+            this.state.validationWarnings = warnings;
+            // Re-compute diff if forked
+            if (this.state.forkedFrom && parsed?.prompt) {
+                this.state.diffLines = diffForkVsUpstream(parsed.prompt, this.state.forkedFrom.skill);
+            }
+            if (warnings.length > 0) {
+                this.state.saveMessage = `⚠ Saved with ${String(warnings.length)} warning${warnings.length > 1 ? 's' : ''}: ${warnings.join('; ')}`;
+            }
+            else {
+                this.state.saveMessage = '✓ Saved';
+            }
+        }
+        catch (error) {
+            this.state.saveMessage = `Error: ${error.message}`;
+        }
+        this.requestRender();
+    }
+    exitEditMode() {
+        this.state.mode = 'view';
+        const content = this.state.rawLines.join('\n');
+        const bodyContent = extractBody(content);
+        const termWidth = terminal.getTerminalWidth();
+        this.state.contentLines = renderMarkdownSync(bodyContent, termWidth);
+        this.state.scrollOffset = 0;
+        return this.renderAction();
+    }
+    // ===========================================================================
+    // Helpers
+    // ===========================================================================
+    closeWith(result) {
+        return { type: 'close', result };
+    }
+    renderAction() {
+        return { type: 'render' };
+    }
+}
+/**
+ * Extract the body content from a SKILL.md (skip frontmatter).
+ */
+function extractBody(content) {
+    if (!content.startsWith('---'))
+        return content;
+    const lines = content.split('\n');
+    for (let i = 1; i < lines.length; i++) {
+        if (lines[i] === '---') {
+            return lines.slice(i + 1).join('\n').trim();
+        }
+    }
+    return content;
+}