@compilr-dev/cli 0.6.6 → 0.7.0

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

@@ -0,0 +1,1095 @@
+/**
+ * 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 { promises as fs, readFileSync } from 'node:fs';
+import * as terminal from '../../terminal.js';
+import { TabbedListOverlayV2, BaseScreen, stay, popScreen, closeOverlay, isEscape, isCtrlC, isEnter, isUpArrow, isDownArrow, renderBorder, truncate, isPrintable, getPrintableChar, } from '../../base/index.js';
+import { isReservedSkillName, parseSkillMarkdown, loadSkillsFromDir, platformSkills, builtinSkills, validateSkillQuality, buildForkContent, buildNewSkillContent, } from '@compilr-dev/sdk';
+import { getSkillsDir, getSkillFolder, getSkillFile, ensureSkillsDir, readScopeConfig, writeScopeConfig, getScopeConfigPath, isValidSkillName, } from '../../../utils/skill-paths.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const PAGE_SIZE = 12;
+const NAME_WIDTH = 24;
+const BODY_PREVIEW_LINES = 10;
+const SKILL_TABS = [
+    { id: 'custom', label: 'Custom' },
+    { id: 'builtin', label: 'Built-in' },
+    { id: 'bindings', label: 'Bindings' },
+];
+// =============================================================================
+// Data Loading
+// =============================================================================
+function validateSkill(skill, folderName) {
+    return validateSkillQuality(skill, folderName).map((issue) => issue.message);
+}
+async function loadCustomSkills(projectPath) {
+    const items = [];
+    // Load all bindings to map skills → bound commands
+    const bindingsBySkill = new Map();
+    for (const scope of ['project', 'user']) {
+        const config = await readScopeConfig(scope);
+        if (config.slashCommands) {
+            for (const [cmd, skillName] of Object.entries(config.slashCommands)) {
+                const existing = bindingsBySkill.get(skillName) ?? [];
+                existing.push(`/${cmd}`);
+                bindingsBySkill.set(skillName, existing);
+            }
+        }
+    }
+    // Project-scoped skills
+    if (projectPath) {
+        try {
+            const projectDir = getSkillsDir('project');
+            const skills = await loadSkillsFromDir(projectDir, 'project');
+            for (const skill of skills) {
+                const filePath = getSkillFile(skill.name, 'project');
+                const issues = validateSkill(skill, skill.name);
+                items.push({
+                    name: skill.name,
+                    description: skill.description,
+                    scope: 'project',
+                    enabled: skill.enabled !== false,
+                    issues,
+                    skill,
+                    filePath,
+                    bodyPreview: skill.prompt ? skill.prompt.split('\n').slice(0, BODY_PREVIEW_LINES).join('\n') : null,
+                    targets: skill.compilr,
+                    boundCommands: bindingsBySkill.get(skill.name) ?? [],
+                    forkedFrom: skill.forkedFrom,
+                });
+            }
+        }
+        catch {
+            // Project skills dir may not exist yet
+        }
+    }
+    // User-scoped skills
+    try {
+        const userDir = getSkillsDir('user');
+        const skills = await loadSkillsFromDir(userDir, 'user');
+        for (const skill of skills) {
+            const filePath = getSkillFile(skill.name, 'user');
+            const issues = validateSkill(skill, skill.name);
+            items.push({
+                name: skill.name,
+                description: skill.description,
+                scope: 'user',
+                enabled: skill.enabled !== false,
+                issues,
+                skill,
+                filePath,
+                bodyPreview: skill.prompt ? skill.prompt.split('\n').slice(0, BODY_PREVIEW_LINES).join('\n') : null,
+                targets: skill.compilr,
+                boundCommands: bindingsBySkill.get(skill.name) ?? [],
+                forkedFrom: skill.forkedFrom,
+            });
+        }
+    }
+    catch {
+        // User skills dir may not exist yet
+    }
+    return items;
+}
+function loadBuiltinSkills() {
+    const seen = new Set();
+    const items = [];
+    const addSkill = (skill) => {
+        if (seen.has(skill.name))
+            return;
+        seen.add(skill.name);
+        items.push({
+            name: skill.name,
+            description: skill.description,
+            scope: 'sdk',
+            enabled: true,
+            issues: [],
+            skill: null,
+            filePath: null,
+            bodyPreview: null,
+            boundCommands: [],
+        });
+    };
+    // SDK platform skills first (have updated descriptions)
+    for (const skill of platformSkills)
+        addSkill(skill);
+    // agents library built-in skills (deduplicated)
+    for (const skill of builtinSkills)
+        addSkill(skill);
+    return items;
+}
+async function loadBindingItems() {
+    const items = [];
+    for (const scope of ['project', 'user']) {
+        const config = await readScopeConfig(scope);
+        if (!config.slashCommands)
+            continue;
+        for (const [cmd, skillName] of Object.entries(config.slashCommands)) {
+            items.push({
+                name: skillName,
+                description: `/${cmd} → ${skillName}`,
+                scope: 'binding',
+                enabled: true,
+                issues: [],
+                skill: null,
+                filePath: null,
+                bodyPreview: null,
+                boundCommands: [],
+                bindingCommand: cmd,
+                bindingScope: scope,
+            });
+        }
+    }
+    return items;
+}
+// =============================================================================
+// Scaffold template
+// =============================================================================
+function buildScaffold(name, scope) {
+    return buildNewSkillContent(name, scope);
+}
+// =============================================================================
+// Frontmatter helpers (reused from skill.ts)
+// =============================================================================
+function matchFrontmatter(content) {
+    if (!content.startsWith('---'))
+        return null;
+    const lines = content.split('\n');
+    if (lines[0] !== '---')
+        return null;
+    for (let i = 1; i < lines.length; i++) {
+        if (lines[i] === '---') {
+            return {
+                frontmatter: lines.slice(1, i).join('\n'),
+                body: lines.slice(i + 1).join('\n'),
+            };
+        }
+    }
+    return null;
+}
+function setEnabledFlag(content, enabled) {
+    const fm = matchFrontmatter(content);
+    if (!fm)
+        return content;
+    const fmLines = fm.frontmatter.split('\n');
+    const idx = fmLines.findIndex((l) => /^enabled\s*:/.test(l));
+    if (idx >= 0) {
+        fmLines[idx] = `enabled: ${String(enabled)}`;
+    }
+    else {
+        fmLines.push(`enabled: ${String(enabled)}`);
+    }
+    return ['---', ...fmLines, '---', fm.body].join('\n');
+}
+function replaceFrontmatterName(content, newName) {
+    const fm = matchFrontmatter(content);
+    if (!fm)
+        return content;
+    const fmLines = fm.frontmatter.split('\n').map((l) => /^name\s*:/.test(l) ? `name: ${newName}` : l);
+    return ['---', ...fmLines, '---', fm.body].join('\n');
+}
+async function pathExists(p) {
+    try {
+        await fs.stat(p);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+class NewSkillScreen extends BaseScreen {
+    styles;
+    onCreated;
+    phase = 'name';
+    nameInput = '';
+    selectedScope = 'project';
+    error = '';
+    hasProject;
+    constructor(styles, onCreated, hasProject) {
+        super();
+        this.styles = styles;
+        this.onCreated = onCreated;
+        this.hasProject = hasProject;
+        if (!hasProject)
+            this.selectedScope = 'user';
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('New Skill')}`);
+        lines.push('');
+        if (this.phase === 'name') {
+            lines.push(`  ${s.muted('Name (lowercase letters, digits, hyphens):')}`);
+            lines.push(`  ${s.primary('> ')}${this.nameInput}${s.primary('█')}`);
+            if (this.error) {
+                lines.push(`  ${s.warning(this.error)}`);
+            }
+            lines.push('');
+            lines.push(`  ${s.muted('Enter to continue · Esc to cancel')}`);
+        }
+        else {
+            lines.push(`  ${s.muted('Name:')} ${s.primary(this.nameInput)}`);
+            lines.push('');
+            lines.push(`  ${s.muted('Scope:')}`);
+            if (this.hasProject) {
+                const pCursor = this.selectedScope === 'project' ? s.primary('> ') : '  ';
+                const pLabel = this.selectedScope === 'project' ? s.primary('project') : s.muted('project');
+                lines.push(`  ${pCursor}${pLabel}  ${s.muted('(shared with team via version control)')}`);
+            }
+            const uCursor = this.selectedScope === 'user' ? s.primary('> ') : '  ';
+            const uLabel = this.selectedScope === 'user' ? s.primary('user') : s.muted('user');
+            lines.push(`  ${uCursor}${uLabel}  ${s.muted('(personal, cross-project)')}`);
+            lines.push('');
+            lines.push(`  ${s.muted('↑↓ Select · Enter to create · Esc to cancel')}`);
+        }
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        if (isCtrlC(data))
+            return closeOverlay({ dismissed: true });
+        if (isEscape(data))
+            return popScreen();
+        if (this.phase === 'name') {
+            if (isEnter(data)) {
+                const name = this.nameInput.trim();
+                if (!name) {
+                    this.error = 'Name cannot be empty.';
+                    return stay(true);
+                }
+                if (!isValidSkillName(name)) {
+                    this.error = 'Use lowercase letters, digits, and hyphens only.';
+                    return stay(true);
+                }
+                if (isReservedSkillName(name)) {
+                    this.error = `'${name}' is reserved by SDK. Use a different name.`;
+                    return stay(true);
+                }
+                this.error = '';
+                this.phase = 'scope';
+                return stay(true);
+            }
+            // Backspace
+            if (data[0] === 127 || data[0] === 8) {
+                this.nameInput = this.nameInput.slice(0, -1);
+                this.error = '';
+                return stay(true);
+            }
+            // Printable char
+            if (isPrintable(data)) {
+                this.nameInput += getPrintableChar(data) ?? '';
+                this.error = '';
+                return stay(true);
+            }
+            return stay(false);
+        }
+        // Scope selection phase
+        if (isEnter(data)) {
+            void this.onCreated(this.nameInput.trim(), this.selectedScope);
+            return popScreen();
+        }
+        if (isUpArrow(data) || isDownArrow(data)) {
+            if (this.hasProject) {
+                this.selectedScope = this.selectedScope === 'project' ? 'user' : 'project';
+            }
+            return stay(true);
+        }
+        if (isPrintable(data)) {
+            const ch = getPrintableChar(data) ?? '';
+            if (ch === 'p' && this.hasProject) {
+                this.selectedScope = 'project';
+                return stay(true);
+            }
+            if (ch === 'u') {
+                this.selectedScope = 'user';
+                return stay(true);
+            }
+        }
+        return stay(false);
+    }
+    getMinHeight() {
+        return 12;
+    }
+}
+// =============================================================================
+// Rename Input Screen
+// =============================================================================
+class RenameScreen extends BaseScreen {
+    currentName;
+    scope;
+    styles;
+    onRenamed;
+    nameInput;
+    error = '';
+    constructor(currentName, scope, styles, onRenamed) {
+        super();
+        this.currentName = currentName;
+        this.scope = scope;
+        this.styles = styles;
+        this.onRenamed = onRenamed;
+        this.nameInput = currentName;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Rename Skill')}`);
+        lines.push('');
+        lines.push(`  ${s.muted('Current:')} ${this.currentName}`);
+        lines.push(`  ${s.muted('New name:')}`);
+        lines.push(`  ${s.primary('> ')}${this.nameInput}${s.primary('█')}`);
+        if (this.error) {
+            lines.push(`  ${s.warning(this.error)}`);
+        }
+        lines.push('');
+        lines.push(`  ${s.muted('Enter to rename · Esc to cancel')}`);
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        if (isCtrlC(data))
+            return closeOverlay({ dismissed: true });
+        if (isEscape(data))
+            return popScreen();
+        if (isEnter(data)) {
+            const name = this.nameInput.trim();
+            if (!name || name === this.currentName)
+                return popScreen();
+            if (!isValidSkillName(name)) {
+                this.error = 'Use lowercase letters, digits, and hyphens only.';
+                return stay(true);
+            }
+            if (isReservedSkillName(name)) {
+                this.error = `'${name}' is reserved by SDK.`;
+                return stay(true);
+            }
+            void this.onRenamed(this.currentName, name, this.scope);
+            return popScreen();
+        }
+        if (data[0] === 127 || data[0] === 8) {
+            this.nameInput = this.nameInput.slice(0, -1);
+            this.error = '';
+            return stay(true);
+        }
+        if (isPrintable(data)) {
+            this.nameInput += getPrintableChar(data) ?? '';
+            this.error = '';
+            return stay(true);
+        }
+        return stay(false);
+    }
+    getMinHeight() {
+        return 10;
+    }
+}
+// =============================================================================
+// Delete Confirmation Screen
+// =============================================================================
+class DeleteConfirmScreen extends BaseScreen {
+    item;
+    styles;
+    onConfirmed;
+    constructor(item, styles, onConfirmed) {
+        super();
+        this.item = item;
+        this.styles = styles;
+        this.onConfirmed = onConfirmed;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        return [
+            border,
+            `  ${s.warning('Delete Skill')}`,
+            '',
+            `  ${s.muted('Are you sure you want to delete')} ${s.primaryBold(this.item.name)} ${s.muted(`(${this.item.scope} scope)?`)}`,
+            `  ${s.muted('This will remove the entire skill folder.')}`,
+            '',
+            `  ${s.muted('y Confirm · n/Esc Cancel')}`,
+            border,
+        ];
+    }
+    handleKey(data) {
+        if (isCtrlC(data))
+            return closeOverlay({ dismissed: true });
+        if (isEscape(data))
+            return popScreen();
+        if (isPrintable(data)) {
+            const ch = getPrintableChar(data) ?? '';
+            if (ch === 'y') {
+                void this.onConfirmed();
+                return popScreen();
+            }
+            if (ch === 'n')
+                return popScreen();
+        }
+        return stay(false);
+    }
+    getMinHeight() {
+        return 8;
+    }
+}
+// =============================================================================
+// Unbind Confirmation Screen
+// =============================================================================
+// UnbindConfirmScreen removed — replaced by SkillBindingScreen
+// =============================================================================
+// Fork Screen (for SDK skills)
+// =============================================================================
+class ForkScreen extends BaseScreen {
+    sdkSkillName;
+    styles;
+    onForked;
+    nameInput;
+    selectedScope = 'project';
+    error = '';
+    hasProject;
+    constructor(sdkSkillName, styles, hasProject, onForked) {
+        super();
+        this.sdkSkillName = sdkSkillName;
+        this.styles = styles;
+        this.onForked = onForked;
+        this.hasProject = hasProject;
+        this.nameInput = sdkSkillName + '-custom';
+        if (!hasProject)
+            this.selectedScope = 'user';
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Fork SDK Skill')}`);
+        lines.push(`  ${s.muted('Source:')} ${s.secondary(this.sdkSkillName)} ${s.muted('(SDK)')}`);
+        lines.push('');
+        lines.push(`  ${s.muted('New name (must be different from SDK name):')}`);
+        lines.push(`  ${s.primary('> ')}${this.nameInput}${s.primary('█')}`);
+        if (this.error) {
+            lines.push(`  ${s.warning(this.error)}`);
+        }
+        lines.push('');
+        lines.push(`  ${s.muted('Scope:')}`);
+        if (this.hasProject) {
+            const pCursor = this.selectedScope === 'project' ? s.primary('> ') : '  ';
+            const pLabel = this.selectedScope === 'project' ? s.primary('project') : s.muted('project');
+            lines.push(`  ${pCursor}${pLabel}`);
+        }
+        const uCursor = this.selectedScope === 'user' ? s.primary('> ') : '  ';
+        const uLabel = this.selectedScope === 'user' ? s.primary('user') : s.muted('user');
+        lines.push(`  ${uCursor}${uLabel}`);
+        lines.push('');
+        lines.push(`  ${s.muted('Tab Switch scope · Enter Fork · Esc Cancel')}`);
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        if (isCtrlC(data))
+            return closeOverlay({ dismissed: true });
+        if (isEscape(data))
+            return popScreen();
+        if (isEnter(data)) {
+            const name = this.nameInput.trim();
+            if (!name) {
+                this.error = 'Name cannot be empty.';
+                return stay(true);
+            }
+            if (!isValidSkillName(name)) {
+                this.error = 'Use lowercase letters, digits, and hyphens.';
+                return stay(true);
+            }
+            if (isReservedSkillName(name)) {
+                this.error = `'${name}' is reserved. Choose a different name.`;
+                return stay(true);
+            }
+            if (name === this.sdkSkillName) {
+                this.error = 'Fork name must differ from SDK name.';
+                return stay(true);
+            }
+            void this.onForked(name, this.selectedScope);
+            return popScreen();
+        }
+        // Tab to switch scope
+        if (data[0] === 0x09 && this.hasProject) {
+            this.selectedScope = this.selectedScope === 'project' ? 'user' : 'project';
+            return stay(true);
+        }
+        if (isUpArrow(data) || isDownArrow(data)) {
+            if (this.hasProject) {
+                this.selectedScope = this.selectedScope === 'project' ? 'user' : 'project';
+            }
+            return stay(true);
+        }
+        if (data[0] === 127 || data[0] === 8) {
+            this.nameInput = this.nameInput.slice(0, -1);
+            this.error = '';
+            return stay(true);
+        }
+        if (isPrintable(data)) {
+            this.nameInput += getPrintableChar(data) ?? '';
+            this.error = '';
+            return stay(true);
+        }
+        return stay(false);
+    }
+    getMinHeight() { return 14; }
+}
+class SkillBindingScreen extends BaseScreen {
+    skillName;
+    styles;
+    onChanged;
+    mode = 'list';
+    bindings = [];
+    selectedIndex = 0;
+    addInput = '';
+    addScope = 'user';
+    error = '';
+    hasProject;
+    constructor(skillName, styles, onChanged, hasProject) {
+        super();
+        this.skillName = skillName;
+        this.styles = styles;
+        this.onChanged = onChanged;
+        this.hasProject = hasProject;
+        if (hasProject)
+            this.addScope = 'project';
+        this.loadBindingsSync();
+    }
+    loadBindingsSync() {
+        this.bindings = [];
+        for (const scope of ['project', 'user']) {
+            try {
+                const configPath = getScopeConfigPath(scope);
+                const content = readFileSync(configPath, 'utf-8');
+                const config = JSON.parse(content);
+                if (!config.slashCommands)
+                    continue;
+                for (const [cmd, skill] of Object.entries(config.slashCommands)) {
+                    if (skill === this.skillName) {
+                        this.bindings.push({ command: cmd, scope });
+                    }
+                }
+            }
+            catch { /* config doesn't exist */ }
+        }
+        if (this.selectedIndex >= this.bindings.length) {
+            this.selectedIndex = Math.max(0, this.bindings.length - 1);
+        }
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const lines = [];
+        lines.push(border);
+        lines.push(`  ${s.primaryBold('Bindings')}${s.muted(' │ ')}${s.secondary(this.skillName)}`);
+        lines.push('');
+        if (this.mode === 'add') {
+            lines.push(`  ${s.muted('Slash command name (without /):')}`);
+            lines.push(`  ${s.muted('/')}${s.primary(this.addInput)}${s.primary('█')}`);
+            if (this.error)
+                lines.push(`  ${s.warning(this.error)}`);
+            lines.push('');
+            lines.push(`  ${s.muted('Scope:')}`);
+            if (this.hasProject) {
+                const pCur = this.addScope === 'project' ? s.primary('> ') : '  ';
+                lines.push(`  ${pCur}${this.addScope === 'project' ? s.primary('project') : s.muted('project')}`);
+            }
+            const uCur = this.addScope === 'user' ? s.primary('> ') : '  ';
+            lines.push(`  ${uCur}${this.addScope === 'user' ? s.primary('user') : s.muted('user')}`);
+            lines.push('');
+            lines.push(`  ${s.muted('Tab Switch scope · Enter Add · Esc Cancel')}`);
+        }
+        else if (this.mode === 'confirm-remove' && this.bindings[this.selectedIndex]) {
+            const b = this.bindings[this.selectedIndex];
+            lines.push(`  ${s.warning('Remove binding')} ${s.primary(`/${b.command}`)} ${s.muted(`(${b.scope})?`)}`);
+            lines.push('');
+            lines.push(`  ${s.muted('y Confirm · n/Esc Cancel')}`);
+        }
+        else {
+            // List mode
+            if (this.bindings.length === 0) {
+                lines.push(`  ${s.muted('No bindings for this skill. Press a to add one.')}`);
+            }
+            else {
+                lines.push(`  ${s.muted('Slash commands bound to this skill:')}`);
+                lines.push('');
+                for (let i = 0; i < this.bindings.length; i++) {
+                    const b = this.bindings[i];
+                    const cursor = i === this.selectedIndex ? s.primary('> ') : '  ';
+                    const cmd = i === this.selectedIndex ? s.primary(`/${b.command}`) : s.muted(`/${b.command}`);
+                    const scopeBadge = b.scope === 'project' ? s.secondary('[project]') : s.muted('[user]');
+                    lines.push(`  ${cursor}${cmd}  ${scopeBadge}`);
+                }
+            }
+            lines.push('');
+            lines.push(`  ${s.muted('a Add · d Remove · Esc Back')}`);
+        }
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        if (isCtrlC(data))
+            return closeOverlay({ dismissed: true });
+        if (this.mode === 'add')
+            return this.handleAddKey(data);
+        if (this.mode === 'confirm-remove')
+            return this.handleConfirmRemoveKey(data);
+        return this.handleListKey(data);
+    }
+    handleListKey(data) {
+        if (isEscape(data))
+            return popScreen();
+        const ch = isPrintable(data) ? (getPrintableChar(data) ?? '') : '';
+        if (isUpArrow(data) && this.selectedIndex > 0) {
+            this.selectedIndex--;
+            return stay(true);
+        }
+        if (isDownArrow(data) && this.selectedIndex < this.bindings.length - 1) {
+            this.selectedIndex++;
+            return stay(true);
+        }
+        if (ch === 'a') {
+            this.mode = 'add';
+            this.addInput = '';
+            this.error = '';
+            return stay(true);
+        }
+        if (ch === 'd' && this.bindings.length > 0) {
+            this.mode = 'confirm-remove';
+            return stay(true);
+        }
+        return stay(false);
+    }
+    handleAddKey(data) {
+        if (isEscape(data)) {
+            this.mode = 'list';
+            return stay(true);
+        }
+        if (isEnter(data)) {
+            const cmd = this.addInput.trim();
+            if (!cmd) {
+                this.error = 'Name cannot be empty.';
+                return stay(true);
+            }
+            if (!isValidSkillName(cmd)) {
+                this.error = 'Use lowercase letters, digits, and hyphens.';
+                return stay(true);
+            }
+            void this.addBinding(cmd, this.addScope);
+            return stay(true);
+        }
+        // Tab to switch scope
+        if (data[0] === 0x09 && this.hasProject) {
+            this.addScope = this.addScope === 'project' ? 'user' : 'project';
+            return stay(true);
+        }
+        if (isUpArrow(data) || isDownArrow(data)) {
+            if (this.hasProject)
+                this.addScope = this.addScope === 'project' ? 'user' : 'project';
+            return stay(true);
+        }
+        if (data[0] === 127 || data[0] === 8) {
+            this.addInput = this.addInput.slice(0, -1);
+            this.error = '';
+            return stay(true);
+        }
+        if (isPrintable(data)) {
+            this.addInput += getPrintableChar(data) ?? '';
+            this.error = '';
+            return stay(true);
+        }
+        return stay(false);
+    }
+    handleConfirmRemoveKey(data) {
+        if (isEscape(data)) {
+            this.mode = 'list';
+            return stay(true);
+        }
+        const ch = isPrintable(data) ? (getPrintableChar(data) ?? '') : '';
+        if (ch === 'y') {
+            void this.removeBinding();
+            return stay(true);
+        }
+        if (ch === 'n') {
+            this.mode = 'list';
+            return stay(true);
+        }
+        return stay(false);
+    }
+    async addBinding(command, scope) {
+        const config = await readScopeConfig(scope);
+        if (!config.slashCommands)
+            config.slashCommands = {};
+        config.slashCommands[command] = this.skillName;
+        await writeScopeConfig(scope, config);
+        this.loadBindingsSync();
+        this.mode = 'list';
+        void this.onChanged();
+    }
+    async removeBinding() {
+        if (this.selectedIndex >= this.bindings.length)
+            return;
+        const b = this.bindings[this.selectedIndex];
+        const config = await readScopeConfig(b.scope);
+        if (config.slashCommands) {
+            const filtered = {};
+            for (const [cmd, skill] of Object.entries(config.slashCommands)) {
+                if (cmd !== b.command)
+                    filtered[cmd] = skill;
+            }
+            config.slashCommands = filtered;
+            await writeScopeConfig(b.scope, config);
+        }
+        this.loadBindingsSync();
+        this.mode = 'list';
+        void this.onChanged();
+    }
+    getMinHeight() { return 14; }
+}
+// =============================================================================
+// Skills Overlay V2
+// =============================================================================
+export class SkillsOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'skills-overlay-v2';
+    allItems = [];
+    projectPath;
+    onOpenDetail;
+    constructor(options) {
+        const projectPath = options.projectPath;
+        // We need the selected item in handleCustomKey but can't reference `this`
+        // before super(). Use a deferred reference populated after construction.
+        let overlayRef = null;
+        // Start with empty items — loadItems will populate async
+        super({
+            title: 'Skills',
+            tabs: SKILL_TABS,
+            items: [],
+            pageSize: PAGE_SIZE,
+            filterByTab: (item, tabId) => {
+                if (tabId === 'custom')
+                    return item.scope !== 'sdk' && item.scope !== 'binding';
+                if (tabId === 'builtin')
+                    return item.scope === 'sdk';
+                if (tabId === 'bindings')
+                    return item.scope === 'binding';
+                return true;
+            },
+            getSearchText: (item) => {
+                if (item.bindingCommand)
+                    return `${item.bindingCommand} ${item.name} ${item.description}`;
+                return `${item.name} ${item.description}`;
+            },
+            renderItem: (item, isSelected, styles) => {
+                const cols = terminal.getTerminalWidth();
+                const cursor = isSelected ? styles.primary('> ') : '  ';
+                // Binding items have their own rendering
+                if (item.scope === 'binding' && item.bindingCommand) {
+                    const cmd = `/${item.bindingCommand}`.padEnd(NAME_WIDTH);
+                    const cmdStyled = isSelected ? styles.primary(cmd) : styles.muted(cmd);
+                    const arrow = styles.muted('→');
+                    const scopeBadge = item.bindingScope === 'project' ? styles.secondary('[project]') : styles.muted('[user]');
+                    return `  ${cursor}${cmdStyled} ${arrow} ${styles.secondary(item.name)} ${scopeBadge}`;
+                }
+                const isCustom = item.scope !== 'sdk';
+                // Warning indicator
+                const warn = isCustom && item.issues.length > 0 ? styles.warning('⚠ ') : '  ';
+                // Name
+                const nameText = item.name.padEnd(NAME_WIDTH);
+                const name = isSelected
+                    ? styles.primary(nameText)
+                    : styles.muted(nameText);
+                // Disabled indicator
+                const disabledTag = !item.enabled && isCustom ? styles.warning(' OFF') : '';
+                // Scope badge
+                let scopeBadge;
+                if (item.scope === 'project')
+                    scopeBadge = styles.secondary('[project]');
+                else if (item.scope === 'user')
+                    scopeBadge = styles.muted('[user]');
+                else
+                    scopeBadge = styles.muted('[sdk]');
+                // Description
+                const badgeLen = item.scope.length + 2 + (disabledTag ? 4 : 0);
+                const descWidth = Math.max(10, cols - NAME_WIDTH - badgeLen - 14);
+                const desc = truncate(item.description.replace(/\s+/g, ' ').trim(), descWidth);
+                const descColor = isSelected ? styles.secondary(desc) : styles.muted(desc);
+                return `${warn}${cursor}${name} ${scopeBadge}${disabledTag}  ${descColor}`;
+            },
+            handleCustomKey: (key, _tabId) => {
+                if (!overlayRef)
+                    return { handled: false };
+                return overlayRef.onCustomKey(key);
+            },
+            footerHints: (searchMode, activeTabId) => {
+                if (searchMode) {
+                    return 'Type to filter · ↑↓/jk Navigate · Enter · Esc Exit search';
+                }
+                if (activeTabId === 'builtin') {
+                    return '←→ Tab · ↑↓/jk · / Search · f Fork · q/Esc Close';
+                }
+                if (activeTabId === 'bindings') {
+                    return '←→ Tab · ↑↓/jk · / Search · Enter Manage · d Remove · q/Esc Close';
+                }
+                return '←→ Tab · ↑↓/jk · / Search · Enter Open · n New · b Bindings · Space On/Off · d Del · q/Esc';
+            },
+            emptyMessage: 'No custom skills yet. Press n to create one.',
+            noResultsMessage: 'No skills match the search.',
+        });
+        this.projectPath = projectPath;
+        this.onOpenDetail = options.onOpenDetail;
+        overlayRef = this; // eslint-disable-line @typescript-eslint/no-this-alias
+    }
+    /**
+     * Load skills data. Called after construction.
+     */
+    async loadItems() {
+        const custom = await loadCustomSkills(this.projectPath);
+        const builtin = loadBuiltinSkills();
+        const bindings = await loadBindingItems();
+        // Sort: project first, then user (within custom), all alphabetical
+        custom.sort((a, b) => {
+            if (a.scope !== b.scope)
+                return a.scope === 'project' ? -1 : 1;
+            return a.name.localeCompare(b.name);
+        });
+        builtin.sort((a, b) => a.name.localeCompare(b.name));
+        bindings.sort((a, b) => (a.bindingCommand ?? '').localeCompare(b.bindingCommand ?? ''));
+        this.allItems = [...custom, ...builtin, ...bindings];
+        this.state.items = this.allItems;
+        // Re-filter: apply tab filter based on current tab index
+        const tabId = SKILL_TABS[this.state.currentTab]?.id ?? 'custom';
+        this.state.filteredItems = this.allItems.filter((item) => {
+            if (tabId === 'custom')
+                return item.scope !== 'sdk' && item.scope !== 'binding';
+            if (tabId === 'builtin')
+                return item.scope === 'sdk';
+            if (tabId === 'bindings')
+                return item.scope === 'binding';
+            return true;
+        });
+        this.state.selectedIndex = 0;
+        this.state.scrollOffset = 0;
+    }
+    createDetailScreen(item) {
+        // Binding items → open SkillBindingScreen for the bound skill
+        if (item.scope === 'binding') {
+            return new SkillBindingScreen(item.name, this.getStyles(), async () => {
+                await this.loadItems();
+                this.requestRender();
+            }, !!this.projectPath);
+        }
+        // Custom skills open in a separate fullscreen overlay (not a pushed screen)
+        if (item.scope !== 'sdk' && item.filePath && this.onOpenDetail) {
+            void this.onOpenDetail(item.filePath, item.name, item.scope, item.forkedFrom, item.boundCommands).then(async (modified) => {
+                if (modified) {
+                    await this.loadItems();
+                }
+                this.requestRender();
+            });
+        }
+        // Return null for custom/sdk — we handle custom via overlay, sdk has no detail
+        return null;
+    }
+    /**
+     * Handle custom keys on the list view.
+     * Called from the config.handleCustomKey closure.
+     */
+    onCustomKey(data) {
+        const selectedItem = this.getSelectedItem() ?? null;
+        if (!isPrintable(data) && data.toString() !== ' ')
+            return { handled: false };
+        const ch = isPrintable(data) ? (getPrintableChar(data) ?? '') : '';
+        // n — new skill
+        if (ch === 'n') {
+            const screen = new NewSkillScreen(this.getStyles(), async (name, scope) => {
+                await this.createSkill(name, scope);
+            }, !!this.projectPath);
+            return { handled: true, pushScreen: screen };
+        }
+        if (!selectedItem)
+            return { handled: false };
+        // f — fork (SDK skills only)
+        if (ch === 'f' && selectedItem.scope === 'sdk') {
+            const screen = new ForkScreen(selectedItem.name, this.getStyles(), !!this.projectPath, async (newName, scope) => {
+                await this.forkSkill(selectedItem.name, newName, scope);
+            });
+            return { handled: true, pushScreen: screen };
+        }
+        // b — open binding screen (custom skills only)
+        if (ch === 'b' && selectedItem.scope !== 'sdk' && selectedItem.scope !== 'binding') {
+            const screen = new SkillBindingScreen(selectedItem.name, this.getStyles(), async () => {
+                await this.loadItems();
+                this.requestRender();
+            }, !!this.projectPath);
+            return { handled: true, pushScreen: screen };
+        }
+        // Enter on Bindings tab — open binding screen for that skill
+        // (handled via createDetailScreen returning null + onOpenDetail for custom,
+        //  but for binding items we open SkillBindingScreen)
+        // d — remove binding (Bindings tab only)
+        if (ch === 'd' && selectedItem.scope === 'binding' && selectedItem.bindingCommand && selectedItem.bindingScope) {
+            void this.removeOneBinding(selectedItem.bindingCommand, selectedItem.bindingScope);
+            return { handled: true, render: true };
+        }
+        // Actions below are for custom skills only
+        if (selectedItem.scope === 'sdk' || selectedItem.scope === 'binding')
+            return { handled: false };
+        // e — open skill detail (same as Enter, but explicit shortcut)
+        if (ch === 'e' && selectedItem.filePath && this.onOpenDetail) {
+            void this.onOpenDetail(selectedItem.filePath, selectedItem.name, selectedItem.scope, selectedItem.forkedFrom, selectedItem.boundCommands).then(async (modified) => {
+                if (modified)
+                    await this.loadItems();
+                this.requestRender();
+            });
+            return { handled: true };
+        }
+        // Space — toggle enable/disable
+        if (data.toString() === ' ') {
+            void this.toggleSkill(selectedItem);
+            return { handled: true, render: true };
+        }
+        // d — delete
+        if (ch === 'd') {
+            const screen = new DeleteConfirmScreen(selectedItem, this.getStyles(), async () => {
+                await this.deleteSkill(selectedItem);
+            });
+            return { handled: true, pushScreen: screen };
+        }
+        // r — rename
+        if (ch === 'r') {
+            const scope = selectedItem.scope === 'project' ? 'project' : 'user';
+            const screen = new RenameScreen(selectedItem.name, scope, this.getStyles(), async (oldName, newName, scope) => {
+                await this.renameSkill(oldName, newName, scope);
+            });
+            return { handled: true, pushScreen: screen };
+        }
+        // v — validate
+        if (ch === 'v') {
+            void this.revalidateSkill(selectedItem);
+            return { handled: true, render: true };
+        }
+        return { handled: false };
+    }
+    // ===========================================================================
+    // Skill operations
+    // ===========================================================================
+    async createSkill(name, scope) {
+        const folder = getSkillFolder(name, scope);
+        if (await pathExists(folder))
+            return; // Already exists
+        await ensureSkillsDir(scope);
+        await fs.mkdir(folder, { recursive: true });
+        await fs.writeFile(getSkillFile(name, scope), buildScaffold(name, scope));
+        // Reload items and trigger re-render
+        await this.loadItems();
+        this.requestRender();
+    }
+    async toggleSkill(item) {
+        if (!item.filePath)
+            return;
+        const content = await fs.readFile(item.filePath, 'utf-8');
+        const newEnabled = !item.enabled;
+        const updated = setEnabledFlag(content, newEnabled);
+        await fs.writeFile(item.filePath, updated);
+        item.enabled = newEnabled;
+    }
+    async deleteSkill(item) {
+        if (item.scope === 'sdk')
+            return;
+        const scope = item.scope === 'project' ? 'project' : 'user';
+        const folder = getSkillFolder(item.name, scope);
+        await fs.rm(folder, { recursive: true, force: true });
+        await this.loadItems();
+        this.requestRender();
+    }
+    async renameSkill(oldName, newName, scope) {
+        const newFolder = getSkillFolder(newName, scope);
+        if (await pathExists(newFolder))
+            return; // Target exists
+        await fs.rename(getSkillFolder(oldName, scope), newFolder);
+        const newFile = getSkillFile(newName, scope);
+        const content = await fs.readFile(newFile, 'utf-8');
+        await fs.writeFile(newFile, replaceFrontmatterName(content, newName));
+        await this.loadItems();
+        this.requestRender();
+    }
+    async revalidateSkill(item) {
+        if (!item.filePath)
+            return;
+        try {
+            const content = await fs.readFile(item.filePath, 'utf-8');
+            const parsed = parseSkillMarkdown(content);
+            if (!parsed) {
+                item.issues = ['Invalid frontmatter — required fields: name, description.'];
+            }
+            else {
+                item.issues = validateSkill(parsed, item.name);
+            }
+        }
+        catch {
+            item.issues = ['Failed to read skill file.'];
+        }
+    }
+    async forkSkill(sdkName, newName, scope) {
+        const folder = getSkillFolder(newName, scope);
+        if (await pathExists(folder))
+            return;
+        // Find the SDK skill
+        const allSdk = [...platformSkills, ...builtinSkills];
+        const sdkSkill = allSdk.find((s) => s.name === sdkName);
+        if (!sdkSkill)
+            return;
+        const content = buildForkContent(sdkSkill, newName, getSDKVersion());
+        await ensureSkillsDir(scope);
+        await fs.mkdir(folder, { recursive: true });
+        await fs.writeFile(getSkillFile(newName, scope), content);
+        await this.loadItems();
+        this.requestRender();
+    }
+    async removeOneBinding(command, scope) {
+        const config = await readScopeConfig(scope);
+        if (!config.slashCommands)
+            return;
+        const filtered = {};
+        for (const [cmd, skill] of Object.entries(config.slashCommands)) {
+            if (cmd !== command)
+                filtered[cmd] = skill;
+        }
+        config.slashCommands = filtered;
+        await writeScopeConfig(scope, config);
+        await this.loadItems();
+        this.requestRender();
+    }
+}
+/** Get SDK version from package.json (best effort). */
+function getSDKVersion() {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const pkg = require('@compilr-dev/sdk/package.json');
+        return pkg.version;
+    }
+    catch {
+        return 'unknown';
+    }
+}