@compilr-dev/cli 0.6.5 → 0.7.0

package/dist/ui/markdown-renderer.js

@@ -0,0 +1,474 @@
+/**
+ * Terminal markdown renderer for marked.
+ * Drop-in replacement for `marked-terminal` — returns a marked extension.
+ *
+ * Usage:
+ *   import { markedTerminal } from './markdown-renderer.js';
+ *   marked.use(markedTerminal(options));
+ */
+import { Chalk } from 'chalk';
+import { highlight as cliHighlight } from 'cli-highlight';
+import Table from 'cli-table3';
+import ansiEscapes from 'ansi-escapes';
+import supportsHyperlinks from 'supports-hyperlinks';
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const TABLE_CELL_SPLIT = '^*||*^';
+const TABLE_ROW_WRAP = '*|*|*|*';
+const TABLE_ROW_WRAP_RE = new RegExp(TABLE_ROW_WRAP.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g');
+const COLON_REPLACER = '*#COLON|*';
+const COLON_REPLACER_RE = new RegExp(COLON_REPLACER.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g');
+const HARD_RETURN = '\r';
+const HARD_RETURN_RE = new RegExp(HARD_RETURN);
+const HARD_RETURN_GFM_RE = new RegExp(HARD_RETURN + '|<br />');
+const BULLET_POINT = '* ';
+// eslint-disable-next-line no-control-regex
+const ANSI_RE = /\u001b\[(?:\d{1,3})(?:;\d{1,3})*m/g;
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+const chalk = new Chalk({ level: 3 });
+const defaultOptions = {
+    heading: chalk.green.bold,
+    firstHeading: chalk.magenta.underline.bold,
+    strong: chalk.bold,
+    em: chalk.italic,
+    codespan: chalk.yellow,
+    code: chalk.yellow,
+    blockquote: chalk.gray.italic,
+    del: chalk.dim.gray.strikethrough,
+    link: chalk.blue,
+    href: chalk.blue.underline,
+    html: chalk.gray,
+    hr: chalk.reset,
+    table: chalk.reset,
+    listitem: chalk.reset,
+    paragraph: chalk.reset,
+    text: (s) => s,
+    width: 80,
+    tab: 2,
+    reflowText: true,
+    showSectionPrefix: false,
+    unescape: true,
+    emoji: false,
+    tableOptions: {},
+};
+// ---------------------------------------------------------------------------
+// Utilities
+// ---------------------------------------------------------------------------
+function identity(s) { return s; }
+function textLength(str) {
+    return str.replace(ANSI_RE, '').length;
+}
+function section(text) {
+    return text + '\n\n';
+}
+function indentify(indent, text) {
+    if (!text)
+        return text;
+    return indent + text.split('\n').join('\n' + indent);
+}
+function indentLines(indent, text) {
+    return text.replace(/(^|\n)(.+)/g, '$1' + indent + '$2');
+}
+function unescapeEntities(html) {
+    return html
+        .replace(/&amp;/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'");
+}
+function undoColon(str) {
+    return str.replace(COLON_REPLACER_RE, ':');
+}
+function fixHardReturn(text, reflow) {
+    return reflow ? text.replace(HARD_RETURN_RE, '\n') : text;
+}
+function hr(char, length) {
+    const width = length || process.stdout.columns || 80;
+    return char.repeat(width);
+}
+function highlightCode(code, language, fallbackStyle) {
+    if (chalk.level === 0)
+        return code;
+    try {
+        return cliHighlight(code, { language: language || 'plaintext' });
+    }
+    catch {
+        return fallbackStyle(code);
+    }
+}
+// ---------------------------------------------------------------------------
+// Reflow
+// ---------------------------------------------------------------------------
+function reflowText(text, width, gfm) {
+    const splitRe = gfm ? HARD_RETURN_GFM_RE : HARD_RETURN_RE;
+    const sections = text.split(splitRe);
+    const reflowed = [];
+    for (const sec of sections) {
+        // eslint-disable-next-line no-control-regex
+        const fragments = sec.split(/(\u001b\[(?:\d{1,3})(?:;\d{1,3})*m)/g);
+        let column = 0;
+        let currentLine = '';
+        let lastWasEscape = false;
+        for (const fragment of fragments) {
+            if (fragment === '') {
+                lastWasEscape = false;
+                continue;
+            }
+            if (!textLength(fragment)) {
+                currentLine += fragment;
+                lastWasEscape = true;
+                continue;
+            }
+            const words = fragment.split(/[ \t\n]+/);
+            for (const word of words) {
+                if (!word)
+                    continue;
+                const addSpace = column !== 0 && !lastWasEscape;
+                const neededWidth = word.length + (addSpace ? 1 : 0);
+                if (column + neededWidth > width && word.length <= width) {
+                    reflowed.push(currentLine);
+                    currentLine = word;
+                    column = word.length;
+                }
+                else if (column + neededWidth > width) {
+                    // Word longer than width — split it
+                    let remaining = word;
+                    const space = width - column - (addSpace ? 1 : 0);
+                    if (space > 0) {
+                        if (addSpace)
+                            currentLine += ' ';
+                        currentLine += remaining.substring(0, space);
+                        reflowed.push(currentLine);
+                        remaining = remaining.substring(space);
+                    }
+                    while (remaining.length > width) {
+                        reflowed.push(remaining.substring(0, width));
+                        remaining = remaining.substring(width);
+                    }
+                    currentLine = remaining;
+                    column = remaining.length;
+                }
+                else {
+                    if (addSpace) {
+                        currentLine += ' ';
+                        column++;
+                    }
+                    currentLine += word;
+                    column += word.length;
+                }
+                lastWasEscape = false;
+            }
+        }
+        if (textLength(currentLine))
+            reflowed.push(currentLine);
+    }
+    return reflowed.join('\n');
+}
+// ---------------------------------------------------------------------------
+// List helpers
+// ---------------------------------------------------------------------------
+function isPointedLine(line, indent) {
+    const pointRe = new RegExp('^(?:' + indent.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')*(?:\\*|\\d+\\.)');
+    return pointRe.test(line);
+}
+function bulletPointLines(lines, indent) {
+    return lines.split('\n').filter(Boolean).map(line => isPointedLine(line, indent) ? line : ' '.repeat(BULLET_POINT.length) + line).join('\n');
+}
+function numberedLines(lines, indent) {
+    let num = 0;
+    return lines.split('\n').filter(Boolean).map(line => {
+        if (isPointedLine(line, indent)) {
+            num++;
+            return line.replace(BULLET_POINT, `${String(num)}. `);
+        }
+        return ' '.repeat(`${String(num)}. `.length) + line;
+    }).join('\n');
+}
+function fixNestedLists(body, indent) {
+    const pointRe = '(?:\\*|\\d+\\.)';
+    const regex = new RegExp('(\\S(?: |  )?)' +
+        '((?:' + indent.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')+)' +
+        '(' + pointRe + '(?:.*)+)$', 'gm');
+    return body.replace(regex, '$1\n' + indent + '$2$3');
+}
+// ---------------------------------------------------------------------------
+// Table helpers
+// ---------------------------------------------------------------------------
+function generateTableRow(text, escape) {
+    if (!text)
+        return [];
+    const esc = escape || identity;
+    const lines = esc(text).split('\n');
+    const data = [];
+    for (const line of lines) {
+        if (!line)
+            continue;
+        const parsed = line.replace(TABLE_ROW_WRAP_RE, '').split(TABLE_CELL_SPLIT);
+        data.push(parsed.slice(0, -1));
+    }
+    return data;
+}
+// ---------------------------------------------------------------------------
+// Renderer
+// ---------------------------------------------------------------------------
+class TerminalMarkdownRenderer {
+    o;
+    tab;
+    tableSettings;
+    transform;
+    // Set by marked extension wrapper before each call
+    parser = { parse: () => '', parseInline: () => '' };
+    options = {};
+    constructor(opts) {
+        this.o = { ...defaultOptions, ...opts };
+        this.tab = typeof this.o.tab === 'number' ? ' '.repeat(this.o.tab) : '  ';
+        this.tableSettings = this.o.tableOptions;
+        const unescape = this.o.unescape ? unescapeEntities : identity;
+        this.transform = (s) => undoColon(unescape(s));
+    }
+    space() { return ''; }
+    text(token) {
+        const t = typeof token === 'object' ? (token.text ?? '') : token;
+        return this.o.text(t);
+    }
+    code(token, lang) {
+        let code;
+        if (typeof token === 'object') {
+            lang = token.lang;
+            code = token.text;
+        }
+        else {
+            code = token;
+        }
+        code = fixHardReturn(code, this.o.reflowText);
+        return section(indentify(this.tab, highlightCode(code, lang, this.o.code)));
+    }
+    blockquote(token) {
+        let quote;
+        if (typeof token === 'object' && token.tokens) {
+            quote = this.parser.parse(token.tokens);
+        }
+        else {
+            quote = typeof token === 'string' ? token : '';
+        }
+        return section(this.o.blockquote(indentify(this.tab, quote.trim())));
+    }
+    html(token) {
+        const t = typeof token === 'object' ? (token.text ?? '') : token;
+        return this.o.html(t);
+    }
+    heading(token, level) {
+        let text;
+        if (typeof token === 'object' && token.tokens) {
+            level = token.depth;
+            text = this.parser.parseInline(token.tokens);
+        }
+        else {
+            text = typeof token === 'string' ? token : '';
+        }
+        text = this.transform(text);
+        const prefix = this.o.showSectionPrefix ? '#'.repeat(level ?? 1) + ' ' : '';
+        text = prefix + text;
+        if (this.o.reflowText)
+            text = reflowText(text, this.o.width, !!this.options.gfm);
+        return section(level === 1 ? this.o.firstHeading(text) : this.o.heading(text));
+    }
+    hr() {
+        return section(this.o.hr(hr('─', this.o.reflowText ? this.o.width : undefined)));
+    }
+    list(token, ordered) {
+        let body;
+        if (typeof token === 'object' && token.items) {
+            ordered = token.ordered;
+            body = '';
+            for (const item of token.items) {
+                body += this.listitem(item);
+            }
+        }
+        else {
+            body = typeof token === 'string' ? token : '';
+        }
+        body = body.trim();
+        body = ordered ? numberedLines(body, this.tab) : bulletPointLines(body, this.tab);
+        return section(fixNestedLists(indentLines(this.tab, body), this.tab));
+    }
+    listitem(token) {
+        let text;
+        if (typeof token === 'object' && token.tokens) {
+            const item = token;
+            text = '';
+            if (item.task) {
+                const cb = item.checked ? '[X] ' : '[ ] ';
+                text += cb;
+            }
+            text += this.parser.parse(item.tokens ?? [], !!item.loose);
+        }
+        else {
+            text = typeof token === 'string' ? token : '';
+        }
+        const transform = (s) => this.o.listitem(this.transform(s));
+        const isNested = text.includes('\n');
+        if (isNested)
+            text = text.trim();
+        return '\n' + BULLET_POINT + transform(text);
+    }
+    checkbox(token) {
+        const checked = typeof token === 'object' ? token.checked : token;
+        return '[' + (checked ? 'X' : ' ') + '] ';
+    }
+    paragraph(token) {
+        let text;
+        if (typeof token === 'object' && token.tokens) {
+            text = this.parser.parseInline(token.tokens);
+        }
+        else {
+            text = typeof token === 'string' ? token : '';
+        }
+        text = this.o.paragraph(this.transform(text));
+        if (this.o.reflowText)
+            text = reflowText(text, this.o.width, !!this.options.gfm);
+        return section(text);
+    }
+    table(token, body) {
+        let header;
+        if (typeof token === 'object' && token.header) {
+            header = '';
+            for (const cell of token.header) {
+                header += this.parser.parseInline(cell.tokens) + TABLE_CELL_SPLIT;
+            }
+            header = TABLE_ROW_WRAP + header + TABLE_ROW_WRAP + '\n';
+            body = '';
+            for (const row of token.rows ?? []) {
+                let rowStr = '';
+                for (const cell of row) {
+                    rowStr += this.parser.parseInline(cell.tokens) + TABLE_CELL_SPLIT;
+                }
+                body += TABLE_ROW_WRAP + rowStr + TABLE_ROW_WRAP + '\n';
+            }
+        }
+        else {
+            header = typeof token === 'string' ? token : '';
+        }
+        const table = new Table({
+            head: generateTableRow(header)[0] ?? [],
+            ...this.tableSettings,
+        });
+        for (const row of generateTableRow(body ?? '', this.transform)) {
+            table.push(row);
+        }
+        return section(this.o.table(table.toString()));
+    }
+    tablerow(token) {
+        const content = typeof token === 'object' ? (token.text ?? '') : token;
+        return TABLE_ROW_WRAP + content + TABLE_ROW_WRAP + '\n';
+    }
+    tablecell(token) {
+        if (typeof token === 'object' && token.tokens) {
+            return this.parser.parseInline(token.tokens) + TABLE_CELL_SPLIT;
+        }
+        return (typeof token === 'string' ? token : '') + TABLE_CELL_SPLIT;
+    }
+    strong(token) {
+        let text;
+        if (typeof token === 'object' && token.tokens) {
+            text = this.parser.parseInline(token.tokens);
+        }
+        else {
+            text = typeof token === 'string' ? token : '';
+        }
+        return this.o.strong(text);
+    }
+    em(token) {
+        let text;
+        if (typeof token === 'object' && token.tokens) {
+            text = this.parser.parseInline(token.tokens);
+        }
+        else {
+            text = typeof token === 'string' ? token : '';
+        }
+        return this.o.em(fixHardReturn(text, this.o.reflowText));
+    }
+    codespan(token) {
+        let text = typeof token === 'object' ? (token.text ?? '') : token;
+        text = fixHardReturn(text, this.o.reflowText);
+        return this.o.codespan(text.replace(/:/g, COLON_REPLACER));
+    }
+    br() {
+        return this.o.reflowText ? HARD_RETURN : '\n';
+    }
+    del(token) {
+        let text;
+        if (typeof token === 'object' && token.tokens) {
+            text = this.parser.parseInline(token.tokens);
+        }
+        else {
+            text = typeof token === 'string' ? token : '';
+        }
+        return this.o.del(text);
+    }
+    link(token, _title, _text) {
+        let href;
+        let text;
+        if (typeof token === 'object' && token.tokens) {
+            href = token.href ?? '';
+            text = this.parser.parseInline(token.tokens);
+        }
+        else {
+            href = typeof token === 'string' ? token : '';
+            text = typeof _text === 'string' ? _text : '';
+        }
+        const hasText = text && text !== href;
+        let out = '';
+        if (supportsHyperlinks.stdout) {
+            const linkText = this.o.href(text || href);
+            out = ansiEscapes.link(linkText, href);
+        }
+        else {
+            if (hasText)
+                out += text + ' (';
+            out += this.o.href(href);
+            if (hasText)
+                out += ')';
+        }
+        return this.o.link(out);
+    }
+    image(token, title, text) {
+        if (typeof token === 'object') {
+            title = token.title;
+            text = token.text;
+            token = token.href ?? '';
+        }
+        let out = '![' + (text || '');
+        if (title)
+            out += ' – ' + title;
+        return out + '](' + token + ')\n';
+    }
+}
+// ---------------------------------------------------------------------------
+// Public API — same interface as `marked-terminal`
+// ---------------------------------------------------------------------------
+/**
+ * Returns a marked extension that renders markdown to ANSI terminal output.
+ * Drop-in replacement for `markedTerminal` from the `marked-terminal` package.
+ */
+export function markedTerminal(options) {
+    const r = new TerminalMarkdownRenderer(options ?? {});
+    const methods = [
+        'space', 'text', 'code', 'blockquote', 'html', 'heading', 'hr',
+        'list', 'listitem', 'checkbox', 'paragraph', 'table', 'tablerow',
+        'tablecell', 'strong', 'em', 'codespan', 'br', 'del', 'link', 'image',
+    ];
+    const renderer = {};
+    for (const method of methods) {
+        renderer[method] = function (...args) {
+            r.options = this.options;
+            r.parser = this.parser;
+            return r[method](...args);
+        };
+    }
+    return { renderer, useNewRenderer: true };
+}

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

@@ -10,7 +10,7 @@
  */
 import chalk from 'chalk';
 import { marked } from 'marked';
-import { markedTerminal } from 'marked-terminal';
+import { markedTerminal } from '../../markdown-renderer.js';
 import { BaseOverlayV2 } from '../../base/overlay-base-v2.js';
 import { getCurrentTheme } from '../../../themes/index.js';
 import * as terminal from '../../terminal.js';
@@ -92,7 +92,6 @@ function getThemedMarkedOptions(termWidth) {
 }
 function renderMarkdownSync(content, termWidth) {
     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(content, { async: false });
     return rendered.split('\n');

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

@@ -67,7 +67,7 @@ function setupAlternateScreenCleanup() {
 // Setup cleanup handlers once when module loads
 setupAlternateScreenCleanup();
 import { marked } from 'marked';
-import { markedTerminal } from 'marked-terminal';
+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 { documentRepository } from '../../../db/repositories/document-repository.js';
@@ -236,7 +236,6 @@ function postProcessInlineFormatting(text) {
 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);

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

@@ -32,11 +32,17 @@ export interface HelpOverlayV2Options {
     }[];
     /** Get detailed info for a single command. */
     getCommand: (name: string) => CommandDetail | undefined;
+    /** Get custom skill and binding entries for the help list. */
+    getSkillEntries?: () => {
+        command: string;
+        description: string;
+        isBinding: boolean;
+    }[];
 }
 interface HelpItem {
     name: string;
     description: string;
-    type: 'builtin' | 'custom';
+    type: 'builtin' | 'custom' | 'skill' | 'binding';
     /** For custom commands */
     prompt?: string;
     location?: 'project' | 'personal';

package/dist/ui/overlay/impl/help-overlay-v2.js

@@ -242,6 +242,17 @@ export class HelpOverlayV2 extends TabbedListOverlayV2 {
                 location: cmd.location,
             });
         }
+        // Add custom skills and bindings
+        if (options.getSkillEntries) {
+            for (const entry of options.getSkillEntries()) {
+                items.push({
+                    name: `/${entry.command}`,
+                    description: entry.description,
+                    type: entry.isBinding ? 'binding' : 'skill',
+                    commandName: entry.command,
+                });
+            }
+        }
         super({
             title: VERSION,
             tabs: TABS,
@@ -253,7 +264,7 @@ export class HelpOverlayV2 extends TabbedListOverlayV2 {
                 if (tabId === 'builtin')
                     return item.type === 'builtin';
                 if (tabId === 'custom')
-                    return item.type === 'custom';
+                    return item.type === 'custom' || item.type === 'skill' || item.type === 'binding';
                 return true;
             },
             getSearchText: (item) => `${item.name} ${item.description}`,
@@ -263,7 +274,13 @@ export class HelpOverlayV2 extends TabbedListOverlayV2 {
                     ? styles.primary(item.name.padEnd(20))
                     : styles.muted(item.name.padEnd(20));
                 const desc = styles.muted(item.description);
-                const badge = item.type === 'custom' ? styles.muted(' (custom)') : '';
+                let badge = '';
+                if (item.type === 'custom')
+                    badge = styles.muted(' (custom)');
+                else if (item.type === 'skill')
+                    badge = styles.secondary(' (skill)');
+                else if (item.type === 'binding')
+                    badge = styles.secondary(' (binding)');
                 return prefix + name + desc + badge;
             },
             footerHints: (searchMode) => {

package/dist/ui/overlay/impl/skill-detail-overlay-v2.d.ts

@@ -0,0 +1,91 @@
+/**
+ * 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 { BaseOverlayV2 } from '../../base/overlay-base-v2.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+import { type ForkedFromMarker, type SkillDiffLine } from '@compilr-dev/sdk';
+type SkillDetailMode = 'view' | 'edit' | 'diff';
+interface SkillDetailState {
+    mode: SkillDetailMode;
+    contentLines: string[];
+    scrollOffset: number;
+    rawLines: string[];
+    cursorLine: number;
+    cursorColumn: number;
+    editScrollOffset: number;
+    isDirty: boolean;
+    originalContent: string;
+    showSavePrompt: boolean;
+    saveMessage: string | null;
+    diffLines: SkillDiffLine[] | null;
+    diffScrollOffset: number;
+    skillName: string;
+    scope: string;
+    forkedFrom: ForkedFromMarker | null;
+    boundCommands: string[];
+    validationWarnings: string[];
+}
+export interface SkillDetailResult {
+    /** Whether to go back to the list */
+    goBack: boolean;
+    /** Whether content was modified (caller should reload) */
+    modified: boolean;
+}
+export declare class SkillDetailOverlayV2 extends BaseOverlayV2<SkillDetailState, SkillDetailResult> {
+    readonly type: "inline";
+    readonly id = "skill-detail-overlay-v2";
+    readonly usesAlternateScreen = true;
+    private readonly filePath;
+    constructor(options: {
+        filePath: string;
+        skillName: string;
+        scope: string;
+        content: string;
+        forkedFrom?: ForkedFromMarker;
+        boundCommands?: string[];
+    });
+    onMount(): void;
+    onUnmount(): void;
+    protected renderContent(context: RenderContext): string[];
+    private renderViewMode;
+    private renderEditMode;
+    private renderLineWithCursor;
+    private ensureCursorVisible;
+    private renderDiffMode;
+    handleKey(key: KeyEvent): OverlayAction<SkillDetailResult>;
+    private handleViewModeKey;
+    private handleDiffModeKey;
+    private handleEditModeKey;
+    private handleSavePromptKey;
+    private moveCursorUp;
+    private moveCursorDown;
+    private moveCursorLeft;
+    private moveCursorRight;
+    private clampCursorColumn;
+    private getCurrentLine;
+    private insertText;
+    private handleBackspace;
+    private handleDeleteKey;
+    private handleEnter;
+    private saveSkill;
+    private exitEditMode;
+    private closeWith;
+    private renderAction;
+}
+export {};