@compilr-dev/cli 0.8.6 → 0.8.8

package/dist/ui/overlay/impl/skill-editor-overlay.js

@@ -1,493 +0,0 @@
-/**
- * Skill Editor Overlay
- *
- * Fullscreen raw markdown editor for SKILL.md files.
- * Uses alternate screen buffer (same pattern as DocumentDetailOverlayV2).
- *
- * Features:
- * - Raw markdown editing with syntax highlighting
- * - Line numbers, cursor, scroll
- * - Ctrl+S saves to disk + validates + shows warnings
- * - Dirty check with save prompt on exit
- */
-import { promises as fs } from 'node:fs';
-import chalk from 'chalk';
-import { ttyWrite } from '../../terminal.js';
-import { BaseOverlayV2 } from '../../base/overlay-base-v2.js';
-import { renderBorder, isCtrlC, isUpArrow, isDownArrow, isLeftArrow, isRightArrow, isHome, isEnd, isPageUp, isPageDown, isBackspace, isDelete, isEnter, isTab, isEscape, getPrintableChar, isPrintable, } from '../../base/index.js';
-import * as terminal from '../../terminal.js';
-import { getCurrentTheme } from '../../../themes/index.js';
-import { parseSkillMarkdown } from '@compilr-dev/sdk';
-// =============================================================================
-// Alternate Screen
-// =============================================================================
-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;
-}
-// =============================================================================
-// Key helpers
-// =============================================================================
-function isCtrlS(data) {
-    return data.length === 1 && data[0] === 0x13;
-}
-// =============================================================================
-// Syntax highlighting (simplified — YAML frontmatter + markdown)
-// =============================================================================
-function highlightLine(line, inFrontmatter) {
-    const theme = getCurrentTheme();
-    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;
-    // Frontmatter delimiter
-    if (line === '---')
-        return muted(line);
-    // Inside frontmatter — YAML highlighting
-    if (inFrontmatter) {
-        // Comment
-        if (line.trimStart().startsWith('#'))
-            return muted(line);
-        // Key: value
-        const kvMatch = line.match(/^(\s*)([\w-]+)(\s*:\s*)(.*)/);
-        if (kvMatch) {
-            const [, indent, key, colon, value] = kvMatch;
-            return indent + primary(key) + muted(colon) + secondary(value);
-        }
-        // List item
-        if (line.trimStart().startsWith('-'))
-            return secondary(line);
-        return secondary(line);
-    }
-    // Markdown highlighting
-    const headerMatch = line.match(/^(#{1,6})\s(.*)$/);
-    if (headerMatch)
-        return primary(headerMatch[1]) + ' ' + primary.bold(headerMatch[2]);
-    if (line.match(/^([-*_])\1{2,}\s*$/))
-        return muted(line);
-    const ulMatch = line.match(/^(\s*)([-*+])\s+(.*)/);
-    if (ulMatch)
-        return ulMatch[1] + secondary(ulMatch[2]) + ' ' + ulMatch[3];
-    const olMatch = line.match(/^(\s*)(\d+\.)\s+(.*)/);
-    if (olMatch)
-        return olMatch[1] + secondary(olMatch[2]) + ' ' + olMatch[3];
-    const bqMatch = line.match(/^(>\s*)(.*)/);
-    if (bqMatch)
-        return muted(bqMatch[1]) + muted.italic(bqMatch[2]);
-    return line;
-}
-// =============================================================================
-// Skill Editor Overlay
-// =============================================================================
-export class SkillEditorOverlay extends BaseOverlayV2 {
-    type = 'inline';
-    id = 'skill-editor-overlay';
-    usesAlternateScreen = true;
-    filePath;
-    skillName;
-    constructor(filePath, skillName, content) {
-        super({
-            rawLines: content.split('\n'),
-            cursorLine: 0,
-            cursorColumn: 0,
-            scrollOffset: 0,
-            isDirty: false,
-            originalContent: content,
-            showSavePrompt: false,
-            statusMessage: null,
-            statusType: null,
-        });
-        this.filePath = filePath;
-        this.skillName = skillName;
-    }
-    onMount() {
-        enterAlternateScreen();
-    }
-    onUnmount() {
-        exitAlternateScreen();
-    }
-    // ===========================================================================
-    // Rendering
-    // ===========================================================================
-    renderContent(context) {
-        const s = context.styles;
-        const cols = context.width;
-        const rows = context.height;
-        const border = renderBorder(cols, s);
-        const lines = [];
-        // Header
-        const editIndicator = this.state.isDirty ? s.warning('[EDIT*]') : s.primary('[EDIT]');
-        lines.push(border);
-        lines.push(` ${s.primaryBold('SKILL')}${s.muted(' │ ')}${chalk.bold(this.skillName)}  ${editIndicator}`);
-        lines.push(border);
-        // Content area
-        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;
-        // Determine frontmatter state for each visible line
-        let inFrontmatter = false;
-        let fmCount = 0;
-        for (let i = 0; i <= Math.min(this.state.scrollOffset + contentHeight, totalLines - 1); i++) {
-            if (this.state.rawLines[i] === '---') {
-                fmCount++;
-                if (fmCount === 1)
-                    inFrontmatter = true;
-                else if (fmCount === 2)
-                    inFrontmatter = false;
-            }
-        }
-        // Reset and track frontmatter state for rendering
-        inFrontmatter = false;
-        fmCount = 0;
-        for (let i = 0; i < contentHeight; i++) {
-            const lineIndex = this.state.scrollOffset + i;
-            if (lineIndex < totalLines) {
-                const lineContent = this.state.rawLines[lineIndex];
-                const lineNum = String(lineIndex + 1).padStart(lineNumWidth);
-                const isCursorLine = lineIndex === this.state.cursorLine;
-                // Track frontmatter state
-                if (lineContent === '---') {
-                    fmCount++;
-                    if (fmCount === 1)
-                        inFrontmatter = true;
-                    else if (fmCount === 2)
-                        inFrontmatter = false;
-                }
-                if (isCursorLine) {
-                    const rendered = this.renderCursorLine(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 highlighted = highlightLine(display, inFrontmatter && fmCount < 2);
-                    lines.push(s.muted(`${lineNum}│`) + highlighted + (truncated ? s.muted('…') : ''));
-                }
-            }
-            else {
-                const lineNum = ' '.repeat(lineNumWidth);
-                lines.push(s.muted(`${lineNum}│`) + s.muted('~'));
-            }
-        }
-        // Footer
-        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.statusMessage) {
-            const styleFn = this.state.statusType === 'success' ? s.success
-                : this.state.statusType === 'warning' ? s.warning
-                    : this.state.statusType === 'error' ? s.warning
-                        : s.muted;
-            lines.push(styleFn(` ${this.state.statusMessage}`));
-        }
-        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;
-    }
-    renderCursorLine(line, cursorCol, maxLen) {
-        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(' ');
-        }
-        const theme = getCurrentTheme();
-        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.scrollOffset) {
-            this.state.scrollOffset = this.state.cursorLine;
-        }
-        if (this.state.cursorLine >= this.state.scrollOffset + contentHeight) {
-            this.state.scrollOffset = this.state.cursorLine - contentHeight + 1;
-        }
-    }
-    // ===========================================================================
-    // Key Handling
-    // ===========================================================================
-    handleKey(key) {
-        const data = key.raw;
-        // Clear status message on any keypress
-        if (this.state.statusMessage && !isCtrlS(data)) {
-            this.state.statusMessage = null;
-            this.state.statusType = null;
-        }
-        // Save prompt
-        if (this.state.showSavePrompt) {
-            return this.handleSavePrompt(data);
-        }
-        // Ctrl+C — force close
-        if (isCtrlC(data)) {
-            return { type: 'close', result: { saved: false } };
-        }
-        // Ctrl+S — save
-        if (isCtrlS(data)) {
-            void this.save();
-            return { type: 'render' };
-        }
-        // Esc — exit (with dirty check)
-        if (isEscape(data)) {
-            if (this.state.isDirty) {
-                this.state.showSavePrompt = true;
-                return { type: 'render' };
-            }
-            return { type: 'close', result: { saved: false } };
-        }
-        // Navigation
-        if (isUpArrow(data)) {
-            this.moveCursorUp();
-            return { type: 'render' };
-        }
-        if (isDownArrow(data)) {
-            this.moveCursorDown();
-            return { type: 'render' };
-        }
-        if (isLeftArrow(data)) {
-            this.moveCursorLeft();
-            return { type: 'render' };
-        }
-        if (isRightArrow(data)) {
-            this.moveCursorRight();
-            return { type: 'render' };
-        }
-        if (isHome(data)) {
-            this.state.cursorColumn = 0;
-            return { type: 'render' };
-        }
-        if (isEnd(data)) {
-            this.state.cursorColumn = this.currentLine().length;
-            return { type: 'render' };
-        }
-        if (isPageUp(data)) {
-            this.pageUp();
-            return { type: 'render' };
-        }
-        if (isPageDown(data)) {
-            this.pageDown();
-            return { type: 'render' };
-        }
-        // Editing
-        if (isEnter(data)) {
-            this.insertNewline();
-            return { type: 'render' };
-        }
-        if (isBackspace(data)) {
-            this.handleBackspace();
-            return { type: 'render' };
-        }
-        if (isDelete(data)) {
-            this.handleDelete();
-            return { type: 'render' };
-        }
-        if (isTab(data)) {
-            this.insertText('  ');
-            return { type: 'render' };
-        }
-        // Printable character
-        if (isPrintable(data)) {
-            const ch = getPrintableChar(data);
-            if (ch) {
-                this.insertText(ch);
-                return { type: 'render' };
-            }
-        }
-        return { type: 'none' };
-    }
-    // ===========================================================================
-    // Save prompt
-    // ===========================================================================
-    handleSavePrompt(data) {
-        if (isPrintable(data)) {
-            const ch = getPrintableChar(data) ?? '';
-            if (ch === 'y') {
-                void this.save();
-                this.state.showSavePrompt = false;
-                return { type: 'close', result: { saved: true } };
-            }
-            if (ch === 'n') {
-                this.state.showSavePrompt = false;
-                return { type: 'close', result: { saved: false } };
-            }
-            if (ch === 'c') {
-                this.state.showSavePrompt = false;
-                return { type: 'render' };
-            }
-        }
-        if (isEscape(data)) {
-            this.state.showSavePrompt = false;
-            return { type: 'render' };
-        }
-        return { type: 'none' };
-    }
-    // ===========================================================================
-    // Save + Validate
-    // ===========================================================================
-    async save() {
-        const content = this.state.rawLines.join('\n');
-        await fs.writeFile(this.filePath, content);
-        this.state.isDirty = false;
-        this.state.originalContent = content;
-        // Validate
-        const parsed = parseSkillMarkdown(content);
-        const warnings = [];
-        if (!parsed) {
-            warnings.push('Invalid frontmatter (required: name, description)');
-        }
-        else {
-            if (parsed.description.length < 60) {
-                warnings.push(`Description is ${String(parsed.description.length)} chars (recommend 60+)`);
-            }
-            if (!parsed.prompt || parsed.prompt.trim().length === 0) {
-                warnings.push('Body is empty');
-            }
-            if (parsed.name !== this.skillName) {
-                warnings.push(`Frontmatter name '${parsed.name}' doesn't match folder '${this.skillName}'`);
-            }
-        }
-        if (warnings.length > 0) {
-            this.state.statusMessage = `⚠ Saved with ${String(warnings.length)} warning${warnings.length > 1 ? 's' : ''}: ${warnings.join('; ')}`;
-            this.state.statusType = 'warning';
-        }
-        else {
-            this.state.statusMessage = '✓ Saved';
-            this.state.statusType = 'success';
-        }
-        this.requestRender();
-    }
-    // ===========================================================================
-    // Cursor movement
-    // ===========================================================================
-    currentLine() {
-        return this.state.rawLines[this.state.cursorLine] ?? '';
-    }
-    moveCursorUp() {
-        if (this.state.cursorLine > 0) {
-            this.state.cursorLine--;
-            this.state.cursorColumn = Math.min(this.state.cursorColumn, this.currentLine().length);
-        }
-    }
-    moveCursorDown() {
-        if (this.state.cursorLine < this.state.rawLines.length - 1) {
-            this.state.cursorLine++;
-            this.state.cursorColumn = Math.min(this.state.cursorColumn, this.currentLine().length);
-        }
-    }
-    moveCursorLeft() {
-        if (this.state.cursorColumn > 0) {
-            this.state.cursorColumn--;
-        }
-        else if (this.state.cursorLine > 0) {
-            this.state.cursorLine--;
-            this.state.cursorColumn = this.currentLine().length;
-        }
-    }
-    moveCursorRight() {
-        if (this.state.cursorColumn < this.currentLine().length) {
-            this.state.cursorColumn++;
-        }
-        else if (this.state.cursorLine < this.state.rawLines.length - 1) {
-            this.state.cursorLine++;
-            this.state.cursorColumn = 0;
-        }
-    }
-    pageUp() {
-        const pageSize = Math.max(1, terminal.getTerminalHeight() - 10);
-        this.state.cursorLine = Math.max(0, this.state.cursorLine - pageSize);
-        this.state.cursorColumn = Math.min(this.state.cursorColumn, this.currentLine().length);
-    }
-    pageDown() {
-        const pageSize = Math.max(1, terminal.getTerminalHeight() - 10);
-        this.state.cursorLine = Math.min(this.state.rawLines.length - 1, this.state.cursorLine + pageSize);
-        this.state.cursorColumn = Math.min(this.state.cursorColumn, this.currentLine().length);
-    }
-    // ===========================================================================
-    // Text editing
-    // ===========================================================================
-    insertText(text) {
-        const line = this.currentLine();
-        const col = this.state.cursorColumn;
-        this.state.rawLines[this.state.cursorLine] = line.slice(0, col) + text + line.slice(col);
-        this.state.cursorColumn += text.length;
-        this.state.isDirty = true;
-    }
-    insertNewline() {
-        const line = this.currentLine();
-        const col = this.state.cursorColumn;
-        const before = line.slice(0, col);
-        const after = line.slice(col);
-        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;
-    }
-    handleBackspace() {
-        if (this.state.cursorColumn > 0) {
-            const line = this.currentLine();
-            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.currentLine();
-            const prevLine = this.state.rawLines[this.state.cursorLine - 1];
-            this.state.cursorColumn = prevLine.length;
-            this.state.rawLines[this.state.cursorLine - 1] = prevLine + currentLine;
-            this.state.rawLines.splice(this.state.cursorLine, 1);
-            this.state.cursorLine--;
-            this.state.isDirty = true;
-        }
-    }
-    handleDelete() {
-        const line = this.currentLine();
-        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;
-        }
-    }
-}