@compilr-dev/cli 0.6.6 → 0.7.0

package/dist/ui/overlay/impl/skill-editor-overlay.d.ts

@@ -0,0 +1,56 @@
+/**
+ * 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 { BaseOverlayV2 } from '../../base/overlay-base-v2.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+interface SkillEditorState {
+    rawLines: string[];
+    cursorLine: number;
+    cursorColumn: number;
+    scrollOffset: number;
+    isDirty: boolean;
+    originalContent: string;
+    showSavePrompt: boolean;
+    statusMessage: string | null;
+    statusType: 'success' | 'warning' | 'error' | null;
+}
+export interface SkillEditorResult {
+    saved: boolean;
+}
+export declare class SkillEditorOverlay extends BaseOverlayV2<SkillEditorState, SkillEditorResult> {
+    readonly type: "inline";
+    readonly id = "skill-editor-overlay";
+    readonly usesAlternateScreen = true;
+    private readonly filePath;
+    private readonly skillName;
+    constructor(filePath: string, skillName: string, content: string);
+    onMount(): void;
+    onUnmount(): void;
+    protected renderContent(context: RenderContext): string[];
+    private renderCursorLine;
+    private ensureCursorVisible;
+    handleKey(key: KeyEvent): OverlayAction<SkillEditorResult>;
+    private handleSavePrompt;
+    private save;
+    private currentLine;
+    private moveCursorUp;
+    private moveCursorDown;
+    private moveCursorLeft;
+    private moveCursorRight;
+    private pageUp;
+    private pageDown;
+    private insertText;
+    private insertNewline;
+    private handleBackspace;
+    private handleDelete;
+}
+export {};

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

@@ -0,0 +1,493 @@
+/**
+ * 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;
+        }
+    }
+}

package/dist/ui/overlay/impl/skills-overlay-v2.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Skills Overlay V2
+ *
+ * Displays custom and built-in skills in a tabbed, searchable list.
+ * Uses TabbedListOverlayV2 for consistent overlay UX.
+ *
+ * Features:
+ * - Tabs: Custom (project + user), Built-in (SDK, read-only)
+ * - Detail view for custom skills (metadata + body preview + validation)
+ * - Enable/disable toggle, delete, rename, validate
+ * - New skill creation with name + scope prompts
+ * - Edit via alternate screen raw editor
+ * - ⚠ validation indicator on skills with issues
+ *
+ * Spec: project-docs/00-requirements/compilr-dev-cli/skills-overlay-spec.md
+ */
+import { TabbedListOverlayV2, BaseScreen } from '../../base/index.js';
+import { type CustomSkill } from '@compilr-dev/sdk';
+import { type SkillScope } from '../../../utils/skill-paths.js';
+/** Unified item for the list — custom skills have full data, built-in have name+description only */
+interface SkillItem {
+    name: string;
+    description: string;
+    scope: 'project' | 'user' | 'sdk' | 'binding';
+    enabled: boolean;
+    /** Validation issues (empty = valid) */
+    issues: string[];
+    /** Full CustomSkill data (null for built-in) */
+    skill: CustomSkill | null;
+    /** File path (null for built-in) */
+    filePath: string | null;
+    /** Prompt body preview (null for built-in — IP protected) */
+    bodyPreview: string | null;
+    /** Targeting info */
+    targets?: CustomSkill['compilr'];
+    /** Commands bound to this skill */
+    boundCommands: string[];
+    /** forkedFrom marker */
+    forkedFrom?: CustomSkill['forkedFrom'];
+    /** For binding items: the slash command name */
+    bindingCommand?: string;
+    /** For binding items: the scope of the binding config */
+    bindingScope?: SkillScope;
+}
+export interface SkillsOverlayV2Options {
+    /** Project root path (for project-scoped skills) */
+    projectPath?: string;
+    /** Callback to open the skill detail overlay (view/edit/diff). Returns true if modified. */
+    onOpenDetail?: (filePath: string, skillName: string, scope: string, forkedFrom?: import('@compilr-dev/sdk').ForkedFromMarker, boundCommands?: string[]) => Promise<boolean>;
+}
+export interface SkillsOverlayV2Result {
+    dismissed: boolean;
+}
+export declare class SkillsOverlayV2 extends TabbedListOverlayV2<SkillItem, SkillsOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "skills-overlay-v2";
+    private allItems;
+    private readonly projectPath?;
+    private readonly onOpenDetail?;
+    constructor(options: SkillsOverlayV2Options);
+    /**
+     * Load skills data. Called after construction.
+     */
+    loadItems(): Promise<void>;
+    protected createDetailScreen(item: SkillItem): BaseScreen | null;
+    /**
+     * Handle custom keys on the list view.
+     * Called from the config.handleCustomKey closure.
+     */
+    onCustomKey(data: Buffer): {
+        handled: boolean;
+        render?: boolean;
+        pushScreen?: BaseScreen;
+    };
+    private createSkill;
+    private toggleSkill;
+    private deleteSkill;
+    private renameSkill;
+    private revalidateSkill;
+    private forkSkill;
+    private removeOneBinding;
+}
+export {};