@plmbr/notebook-intelligence 5.0.0

package/lib/components/skills-panel.js

@@ -0,0 +1,1264 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Dialog, showDialog } from '@jupyterlab/apputils';
+import { VscCopy, VscEdit, VscTrash } from '../icons';
+import { NBIAPI } from '../api';
+// Closes the enclosing modal on document-level Escape, regardless of which
+// element inside the dialog has focus. The previous per-input handler only
+// fired while the URL field was focused, leaving keyboard users stuck once
+// they tabbed onto a button.
+function useEscapeKey(onEscape) {
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                onEscape();
+            }
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [onEscape]);
+}
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+// Constrain Tab / Shift+Tab to cycle within ``container``. Without this, Tab
+// from the last button in the modal escapes into the lab toolbar — keyboard
+// users lose the dialog. ARIA APG's modal pattern requires the trap.
+function useFocusTrap(container) {
+    useEffect(() => {
+        const node = container.current;
+        if (!node) {
+            return;
+        }
+        const handler = (e) => {
+            if (e.key !== 'Tab') {
+                return;
+            }
+            const focusables = Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => !el.hasAttribute('disabled'));
+            if (focusables.length === 0) {
+                return;
+            }
+            const first = focusables[0];
+            const last = focusables[focusables.length - 1];
+            const active = document.activeElement;
+            if (e.shiftKey && active === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && active === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        node.addEventListener('keydown', handler);
+        return () => node.removeEventListener('keydown', handler);
+    }, [container]);
+}
+// Must match SKILL_NAME_PATTERN in notebook_intelligence/skillset.py
+const SKILL_NAME_PATTERN = /^[a-z0-9][a-z0-9-]{0,63}$/;
+const SKILL_NAME_REQUIREMENT = 'Must be lowercase letters, digits, or hyphens (starting with a letter or digit), max 64 chars.';
+const SKILL_ENTRY_FILE = 'SKILL.md';
+// Bundles with more files than this collapse their file tabs to just SKILL.md.
+// Keeps the tab strip usable for reference-data skills that ship hundreds of
+// helper files; those are easier to edit on disk anyway.
+const BUNDLE_FILE_DISPLAY_LIMIT = 20;
+const COMMON_TOOLS = [
+    'Read',
+    'Write',
+    'Edit',
+    'Bash',
+    'Glob',
+    'Grep',
+    'Task',
+    'TodoWrite',
+    'WebFetch',
+    'WebSearch',
+    'NotebookEdit'
+];
+export function SettingsPanelComponentSkills(_props) {
+    const [skills, setSkills] = useState([]);
+    const [context, setContext] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [view, setView] = useState({ kind: 'list' });
+    const [prompt, setPrompt] = useState(null);
+    const [undo, setUndo] = useState(null);
+    const [importOpen, setImportOpen] = useState(false);
+    const [syncing, setSyncing] = useState(false);
+    const [syncMessage, setSyncMessage] = useState(null);
+    const [allowGithubImport, setAllowGithubImport] = useState(NBIAPI.config.allowGithubSkillImport);
+    const hasManagedSkills = skills.some(s => s.managed);
+    const hasTrackingSkills = skills.some(s => s.tracksUpstream);
+    const refresh = async () => {
+        var _a;
+        setLoading(true);
+        setError(null);
+        try {
+            const list = await NBIAPI.listSkills();
+            setSkills(list);
+        }
+        catch (e) {
+            setError((_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        refresh();
+        NBIAPI.getSkillsContext()
+            .then(setContext)
+            .catch(() => {
+            // Non-fatal — panel still works without the context hints.
+        });
+        const listener = () => {
+            refresh();
+        };
+        const configListener = () => {
+            setAllowGithubImport(NBIAPI.config.allowGithubSkillImport);
+        };
+        NBIAPI.skillsReloaded.connect(listener);
+        NBIAPI.configChanged.connect(configListener);
+        return () => {
+            NBIAPI.skillsReloaded.disconnect(listener);
+            NBIAPI.configChanged.disconnect(configListener);
+        };
+    }, []);
+    const undoRef = useRef(null);
+    undoRef.current = undo;
+    const dismissUndo = () => {
+        setUndo(prev => {
+            if (prev) {
+                window.clearTimeout(prev.timerId);
+            }
+            return null;
+        });
+    };
+    useEffect(() => {
+        return () => {
+            if (undoRef.current) {
+                window.clearTimeout(undoRef.current.timerId);
+            }
+        };
+    }, []);
+    const handleSyncManaged = async () => {
+        var _a;
+        setSyncing(true);
+        setSyncMessage(null);
+        setError(null);
+        try {
+            const r = await NBIAPI.reconcileManagedSkills();
+            const summary = `Sync complete. ${r.added} added, ${r.updated} updated, ${r.removed} removed, ${r.unchanged} unchanged.`;
+            setSyncMessage(r.errors.length ? `${summary} (${r.errors.length} error(s))` : summary);
+            if (r.errors.length) {
+                setError(r.errors.join('\n'));
+            }
+            await refresh();
+        }
+        catch (e) {
+            setError(`Sync failed: ${(_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : e}`);
+        }
+        finally {
+            setSyncing(false);
+        }
+    };
+    const handleSyncTracking = async (skill) => {
+        var _a;
+        setSyncing(true);
+        setSyncMessage(null);
+        setError(null);
+        try {
+            const r = await NBIAPI.syncTrackingSkill(skill.scope, skill.name);
+            setSyncMessage(r.updated
+                ? `Synced "${skill.name}" to ${r.ref.slice(0, 7)}.`
+                : `"${skill.name}" already up to date at ${r.ref.slice(0, 7)}.`);
+            await refresh();
+        }
+        catch (e) {
+            setError(`Sync failed for "${skill.name}": ${(_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : e}`);
+        }
+        finally {
+            setSyncing(false);
+        }
+    };
+    const handleSyncAllTracking = async () => {
+        var _a;
+        setSyncing(true);
+        setSyncMessage(null);
+        setError(null);
+        try {
+            const results = await NBIAPI.syncAllTrackingSkills();
+            const updated = results.filter(r => r.updated).length;
+            const unchanged = results.filter(r => r.updated === false).length;
+            const errors = results.filter(r => r.error);
+            const summary = `Sync complete. ${updated} updated, ${unchanged} unchanged, ${errors.length} error(s).`;
+            setSyncMessage(summary);
+            if (errors.length) {
+                setError(errors.map(r => `${r.name}: ${r.error}`).join('\n'));
+            }
+            await refresh();
+        }
+        catch (e) {
+            setError(`Sync failed: ${(_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : e}`);
+        }
+        finally {
+            setSyncing(false);
+        }
+    };
+    const handleDelete = async (skill) => {
+        var _a, _b, _c;
+        const result = await showDialog({
+            title: 'Delete skill?',
+            body: `"${skill.name}" will be deleted.`,
+            buttons: [Dialog.cancelButton(), Dialog.warnButton({ label: 'Delete' })]
+        });
+        if (!result.button.accept) {
+            return;
+        }
+        // Snapshot the full bundle (SKILL.md + helper files) *before* deleting so the Undo
+        // toast can recreate it byte-for-byte. The backend only exposes a shallow delete
+        // API, so restoration is the client's job.
+        let detail;
+        try {
+            detail = await NBIAPI.readSkill(skill.scope, skill.name);
+        }
+        catch (e) {
+            setError(`Failed to read skill: ${(_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : e}`);
+            return;
+        }
+        const pathsToSnapshot = ((_b = detail.files) !== null && _b !== void 0 ? _b : []).filter(p => p !== SKILL_ENTRY_FILE);
+        const snapshots = await Promise.all(pathsToSnapshot.map(async (path) => {
+            try {
+                const content = await NBIAPI.readBundleFile(skill.scope, skill.name, path);
+                return { path, content };
+            }
+            catch (_a) {
+                // Best-effort snapshot — skip unreadable files.
+                return null;
+            }
+        }));
+        const bundleFiles = snapshots.filter((s) => s !== null);
+        try {
+            await NBIAPI.deleteSkill(skill.scope, skill.name);
+            await refresh();
+        }
+        catch (e) {
+            setError(`Failed to delete skill: ${(_c = e === null || e === void 0 ? void 0 : e.message) !== null && _c !== void 0 ? _c : e}`);
+            return;
+        }
+        dismissUndo();
+        const timerId = window.setTimeout(() => {
+            setUndo(null);
+        }, 8000);
+        setUndo({ detail, bundleFiles, timerId });
+    };
+    const handleUndoDelete = async () => {
+        var _a;
+        if (!undo) {
+            return;
+        }
+        const { detail, bundleFiles } = undo;
+        dismissUndo();
+        try {
+            await NBIAPI.createSkill({
+                scope: detail.scope,
+                name: detail.name,
+                description: detail.description,
+                allowedTools: detail.allowedTools,
+                body: detail.body
+            });
+            await Promise.all(bundleFiles.map(({ path, content }) => NBIAPI.writeBundleFile(detail.scope, detail.name, path, content).catch(() => {
+                // Non-fatal — skill is restored even if a bundle file fails.
+            })));
+            await refresh();
+        }
+        catch (e) {
+            setError(`Failed to restore skill: ${(_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : e}`);
+        }
+    };
+    const handleRename = (skill) => {
+        setPrompt({ kind: 'rename', skill });
+    };
+    const handleDuplicate = (skill) => {
+        setPrompt({ kind: 'duplicate', skill });
+    };
+    const commitRename = async (skill, newName) => {
+        await NBIAPI.renameSkill(skill.scope, skill.name, newName);
+        setPrompt(null);
+        await refresh();
+    };
+    const commitDuplicate = async (skill, targetScope, newName) => {
+        const detail = await NBIAPI.readSkill(skill.scope, skill.name);
+        await NBIAPI.createSkill({
+            scope: targetScope,
+            name: newName,
+            description: detail.description,
+            allowedTools: detail.allowedTools,
+            body: detail.body
+        });
+        const filesToCopy = detail.files.filter(f => f !== SKILL_ENTRY_FILE);
+        await Promise.all(filesToCopy.map(async (file) => {
+            const content = await NBIAPI.readBundleFile(skill.scope, skill.name, file);
+            await NBIAPI.writeBundleFile(targetScope, newName, file, content);
+        }));
+        setPrompt(null);
+        await refresh();
+    };
+    if (view.kind === 'editor') {
+        return (React.createElement(SkillEditor, { scope: view.scope, name: view.name, onClose: async () => {
+                await refresh();
+                setView({ kind: 'list' });
+            } }));
+    }
+    const userSkills = skills.filter(s => s.scope === 'user');
+    const projectSkills = skills.filter(s => s.scope === 'project');
+    return (React.createElement("div", { className: "config-dialog-body nbi-skills-panel" },
+        React.createElement("div", { className: "nbi-skills-header" },
+            React.createElement("div", { className: "nbi-skills-title" }, "Skills"),
+            React.createElement("div", { className: "nbi-skills-header-actions" },
+                hasManagedSkills && (React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: handleSyncManaged, disabled: syncing, title: "Reconcile managed skills against the org manifest" },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, syncing ? 'Syncing…' : 'Sync managed skills'))),
+                hasTrackingSkills && allowGithubImport && (React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: handleSyncAllTracking, disabled: syncing, title: "Re-fetch every skill set to track upstream from GitHub" },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, syncing ? 'Syncing…' : 'Sync tracking skills'))),
+                allowGithubImport && (React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: () => setImportOpen(true), title: "Import from GitHub" },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, hasManagedSkills ? 'Import' : 'Import from GitHub'))),
+                React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: () => setView({ kind: 'editor', scope: 'user', name: null }) },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "New Skill")))),
+        !NBIAPI.config.isInClaudeCodeMode && (React.createElement("div", { className: "nbi-skills-info-banner", role: "note" }, "Skills are consumed by Claude Code. Enable Claude mode in the Claude settings tab to use skills you author here.")),
+        syncMessage && (React.createElement("div", { className: "nbi-skills-sync-message", role: "status" }, syncMessage)),
+        error && (React.createElement("div", { className: "nbi-skills-error", role: "alert" }, error)),
+        React.createElement(SkillScopeSection, { scope: "user", label: "USER", pathHint: (context === null || context === void 0 ? void 0 : context.userSkillsDir) || '~/.claude/skills/', skills: userSkills, loading: loading, onEdit: s => setView({ kind: 'editor', scope: s.scope, name: s.name }), onNew: () => setView({ kind: 'editor', scope: 'user', name: null }), onRename: handleRename, onDuplicate: handleDuplicate, onDelete: handleDelete, onSync: handleSyncTracking, syncDisabled: syncing || !allowGithubImport }),
+        React.createElement(SkillScopeSection, { scope: "project", label: (context === null || context === void 0 ? void 0 : context.projectName) ? `PROJECT · ${context.projectName}` : 'PROJECT', pathHint: (context === null || context === void 0 ? void 0 : context.projectSkillsDir) || '<project>/.claude/skills/', skills: projectSkills, loading: loading, onEdit: s => setView({ kind: 'editor', scope: s.scope, name: s.name }), onNew: () => setView({ kind: 'editor', scope: 'project', name: null }), onRename: handleRename, onDuplicate: handleDuplicate, onDelete: handleDelete, onSync: handleSyncTracking, syncDisabled: syncing || !allowGithubImport }),
+        prompt && (React.createElement(SkillPromptDialog, { prompt: prompt, existingNames: skills, onCancel: () => setPrompt(null), onRename: commitRename, onDuplicate: commitDuplicate })),
+        undo && (React.createElement(UndoToast, { message: `Deleted "${undo.detail.name}"`, onUndo: handleUndoDelete, onDismiss: dismissUndo })),
+        importOpen && (React.createElement(GitHubImportDialog, { onCancel: () => setImportOpen(false), onImported: async () => {
+                setImportOpen(false);
+                await refresh();
+            } }))));
+}
+function GitHubImportDialog(props) {
+    const [step, setStep] = useState('url');
+    const [url, setUrl] = useState('');
+    const [scope, setScope] = useState('user');
+    const [preview, setPreview] = useState(null);
+    const [nameOverride, setNameOverride] = useState('');
+    const [overwrite, setOverwrite] = useState(false);
+    const [tracksUpstream, setTracksUpstream] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    useEscapeKey(props.onCancel);
+    const formRef = useRef(null);
+    useFocusTrap(formRef);
+    const effectiveName = (nameOverride.trim() || (preview === null || preview === void 0 ? void 0 : preview.name) || '').trim();
+    const nameValid = SKILL_NAME_PATTERN.test(effectiveName);
+    const collides = preview !== null &&
+        ((scope === 'user' && preview.existsInUserScope) ||
+            (scope === 'project' && preview.existsInProjectScope)) &&
+        effectiveName === preview.name;
+    const canFetchPreview = !busy && url.trim().length > 0;
+    const canInstall = !busy && preview !== null && nameValid && (!collides || overwrite);
+    const handleFetchPreview = async (e) => {
+        var _a;
+        e.preventDefault();
+        if (!canFetchPreview) {
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            const p = await NBIAPI.previewSkillImport(url.trim());
+            setPreview(p);
+            setNameOverride('');
+            setOverwrite(false);
+            setStep('preview');
+        }
+        catch (err) {
+            setError((_a = err === null || err === void 0 ? void 0 : err.message) !== null && _a !== void 0 ? _a : String(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const handleInstall = async (e) => {
+        var _a;
+        e.preventDefault();
+        if (!canInstall || !preview) {
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            await NBIAPI.importSkill({
+                url: url.trim(),
+                scope,
+                name: effectiveName !== preview.name ? effectiveName : undefined,
+                overwrite: collides ? true : undefined,
+                tracksUpstream: tracksUpstream || undefined
+            });
+            await props.onImported();
+        }
+        catch (err) {
+            setError((_a = err === null || err === void 0 ? void 0 : err.message) !== null && _a !== void 0 ? _a : String(err));
+            setBusy(false);
+        }
+    };
+    return (React.createElement("div", { className: "nbi-modal-backdrop", onClick: props.onCancel, role: "presentation" },
+        React.createElement("form", { ref: formRef, className: "nbi-modal-card", role: "dialog", "aria-modal": "true", "aria-label": "Import skill from GitHub", onClick: e => e.stopPropagation(), onSubmit: step === 'url' ? handleFetchPreview : handleInstall },
+            React.createElement("div", { className: "nbi-modal-title" }, "Import skill from GitHub"),
+            React.createElement("div", { className: "nbi-modal-body" },
+                step === 'url' && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "nbi-form-field" },
+                        React.createElement("label", { htmlFor: "nbi-import-url" }, "GitHub repo URL"),
+                        React.createElement("input", { id: "nbi-import-url", type: "text", autoFocus: true, value: url, onChange: e => setUrl(e.target.value), placeholder: "https://github.com/owner/repo or .../tree/main/path/to/skill" }),
+                        React.createElement("div", { className: "nbi-form-hint" },
+                            "Link to the repo root, a branch, or a subdirectory containing",
+                            ' ',
+                            React.createElement("code", null, "SKILL.md"),
+                            ". Private repos work if",
+                            ' ',
+                            React.createElement("code", null, "GITHUB_TOKEN"),
+                            " is set or ",
+                            React.createElement("code", null, "gh auth login"),
+                            ' ',
+                            "is configured on the Jupyter server.")),
+                    React.createElement("div", { className: "nbi-form-field" },
+                        React.createElement("label", { htmlFor: "nbi-import-scope" }, "Install into"),
+                        React.createElement("select", { id: "nbi-import-scope", value: scope, onChange: e => setScope(e.target.value) },
+                            React.createElement("option", { value: "user" }, "User (available in all projects)"),
+                            React.createElement("option", { value: "project" }, "Project (this project only)"))))),
+                step === 'preview' && preview && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "nbi-import-preview" },
+                        React.createElement("div", { className: "nbi-import-preview-row" },
+                            React.createElement("span", { className: "nbi-import-preview-label" }, "Name"),
+                            React.createElement("span", { className: "nbi-import-preview-value" }, preview.name)),
+                        preview.description && (React.createElement("div", { className: "nbi-import-preview-row" },
+                            React.createElement("span", { className: "nbi-import-preview-label" }, "Description"),
+                            React.createElement("span", { className: "nbi-import-preview-value" }, preview.description))),
+                        preview.allowedTools.length > 0 && (React.createElement("div", { className: "nbi-import-preview-row" },
+                            React.createElement("span", { className: "nbi-import-preview-label" }, "Allowed tools"),
+                            React.createElement("span", { className: "nbi-import-preview-value" }, preview.allowedTools.join(', ')))),
+                        React.createElement("div", { className: "nbi-import-preview-row" },
+                            React.createElement("span", { className: "nbi-import-preview-label" }, "Files"),
+                            React.createElement("span", { className: "nbi-import-preview-value" },
+                                "SKILL.md",
+                                preview.files.length > 0 &&
+                                    ` + ${preview.files.length} other${preview.files.length === 1 ? '' : 's'}`)),
+                        React.createElement("div", { className: "nbi-import-preview-row" },
+                            React.createElement("span", { className: "nbi-import-preview-label" }, "Source"),
+                            React.createElement("span", { className: "nbi-import-preview-value nbi-import-preview-source" }, preview.canonicalUrl))),
+                    React.createElement("div", { className: "nbi-form-field" },
+                        React.createElement("label", { htmlFor: "nbi-import-name" }, "Name (optional override)"),
+                        React.createElement("input", { id: "nbi-import-name", type: "text", value: nameOverride, onChange: e => setNameOverride(e.target.value), placeholder: preview.name, "aria-invalid": effectiveName.length > 0 && !nameValid ? true : undefined }),
+                        effectiveName.length > 0 && !nameValid && (React.createElement("div", { className: "nbi-form-field-error" }, SKILL_NAME_REQUIREMENT))),
+                    collides && (React.createElement("div", { className: "nbi-form-field" },
+                        React.createElement("label", { className: "nbi-checkbox-label" },
+                            React.createElement("input", { type: "checkbox", checked: overwrite, onChange: e => setOverwrite(e.target.checked) }),
+                            "Overwrite existing ",
+                            scope,
+                            " skill \"",
+                            preview.name,
+                            "\""))),
+                    React.createElement("div", { className: "nbi-form-field" },
+                        React.createElement("label", { className: "nbi-checkbox-label" },
+                            React.createElement("input", { type: "checkbox", checked: tracksUpstream, onChange: e => setTracksUpstream(e.target.checked) }),
+                            "Track upstream. Show a Sync button so I can re-pull this skill from GitHub later"))))),
+            error && (React.createElement("div", { className: "nbi-skills-error", role: "alert" }, error)),
+            React.createElement("div", { className: "nbi-modal-actions" },
+                step === 'preview' && (React.createElement("button", { type: "button", className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: () => {
+                        setStep('url');
+                        setPreview(null);
+                        setError(null);
+                    } },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Back"))),
+                React.createElement("button", { type: "button", className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: props.onCancel },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Cancel")),
+                step === 'url' ? (React.createElement("button", { type: "submit", className: "jp-Dialog-button jp-mod-accept jp-mod-styled", disabled: !canFetchPreview },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, busy ? 'Fetching…' : 'Next'))) : (React.createElement("button", { type: "submit", className: "jp-Dialog-button jp-mod-accept jp-mod-styled", disabled: !canInstall },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, busy ? 'Installing…' : 'Install')))))));
+}
+function SkillScopeSection(props) {
+    return (React.createElement("div", { className: "nbi-skills-section" },
+        React.createElement("div", { className: "nbi-skills-section-caption", title: props.pathHint },
+            props.label,
+            " \u00B7 ",
+            props.skills.length),
+        props.loading && props.skills.length === 0 && (React.createElement("div", { className: "nbi-skills-empty" }, "Loading\u2026")),
+        !props.loading && props.skills.length === 0 && (React.createElement("div", { className: "nbi-skills-empty" },
+            React.createElement("span", null,
+                "No ",
+                props.scope,
+                " skills. They live in ",
+                React.createElement("code", null, props.pathHint),
+                "."),
+            React.createElement("button", { className: "jp-toast-button jp-mod-small jp-Button", onClick: props.onNew },
+                React.createElement("div", { className: "jp-Dialog-buttonLabel" },
+                    "+ New ",
+                    props.scope,
+                    " skill")))),
+        props.skills.map(skill => (React.createElement(SkillRow, { key: `${skill.scope}:${skill.name}`, skill: skill, onEdit: () => props.onEdit(skill), onRename: () => props.onRename(skill), onDuplicate: () => props.onDuplicate(skill), onDelete: () => props.onDelete(skill), onSync: () => props.onSync(skill), syncDisabled: props.syncDisabled })))));
+}
+function ManagedBadge(props) {
+    var _a;
+    return (React.createElement("span", { className: "nbi-skill-managed-badge", title: `Managed by org manifest (${(_a = props.source) !== null && _a !== void 0 ? _a : ''})` }, "Managed"));
+}
+function TrackingBadge(props) {
+    const refSuffix = props.ref ? ` (last sync: ${props.ref.slice(0, 7)})` : '';
+    return (React.createElement("span", { className: "nbi-skill-tracking-badge", title: `Tracking upstream from ${props.source}${refSuffix}` }, "Tracking"));
+}
+function SkillRow(props) {
+    const { skill } = props;
+    const stopAnd = (fn) => (e) => {
+        e.stopPropagation();
+        fn();
+    };
+    // The wrapper div is no longer interactive. Nested interactive widgets
+    // (role=button on a div that contains <button> children) violate ARIA
+    // semantics and confuse screen readers and form serialisation. The
+    // visible Edit button is the canonical activation path; the wrapper
+    // keeps its click handler purely as a sighted-user convenience so a
+    // click anywhere on the row still opens the editor, but it's no longer
+    // in the keyboard tab order — that role belongs to the explicit
+    // buttons below.
+    return (React.createElement("div", { className: "nbi-skill-row", onClick: props.onEdit },
+        React.createElement("div", { className: "nbi-skill-row-main" },
+            React.createElement("div", { className: "nbi-skill-row-name" },
+                skill.name,
+                skill.managed && React.createElement(ManagedBadge, { source: skill.managedSource }),
+                !skill.managed && skill.tracksUpstream && (React.createElement(TrackingBadge, { source: skill.source, ref: skill.trackingRef }))),
+            skill.description && (React.createElement("div", { className: "nbi-skill-row-description" }, skill.description))),
+        React.createElement("div", { className: "nbi-skill-row-actions", onClick: e => e.stopPropagation() },
+            !skill.managed && skill.tracksUpstream && (React.createElement("button", { type: "button", className: "nbi-icon-button", "aria-label": "Sync skill from GitHub", title: "Sync from GitHub", onClick: stopAnd(props.onSync), disabled: props.syncDisabled }, "\u21BB")),
+            React.createElement("button", { type: "button", className: "nbi-icon-button", "aria-label": skill.managed ? 'View skill' : 'Edit skill', title: skill.managed ? 'View (managed, read-only)' : 'Edit', onClick: stopAnd(props.onEdit) },
+                React.createElement(VscEdit, { "aria-hidden": "true" })),
+            !skill.managed && (React.createElement("button", { type: "button", className: "nbi-icon-button", "aria-label": "Rename skill", title: "Rename", onClick: stopAnd(props.onRename) },
+                React.createElement("span", { "aria-hidden": "true", className: "nbi-icon-button-text" }, "Aa"))),
+            React.createElement("button", { type: "button", className: "nbi-icon-button", "aria-label": "Duplicate skill", title: "Duplicate", onClick: stopAnd(props.onDuplicate) },
+                React.createElement(VscCopy, { "aria-hidden": "true" })),
+            !skill.managed && (React.createElement("button", { type: "button", className: "nbi-icon-button danger", "aria-label": "Delete skill", title: "Delete", onClick: stopAnd(props.onDelete) },
+                React.createElement(VscTrash, { "aria-hidden": "true" }))))));
+}
+function SkillPromptDialog(props) {
+    const { prompt } = props;
+    const isRename = prompt.kind === 'rename';
+    const initialName = isRename
+        ? prompt.skill.name
+        : `${prompt.skill.name}-copy`;
+    const initialScope = isRename
+        ? prompt.skill.scope
+        : prompt.skill.scope === 'user'
+            ? 'project'
+            : 'user';
+    const [name, setName] = useState(initialName);
+    const [scope, setScope] = useState(initialScope);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEscapeKey(props.onCancel);
+    const formRef = useRef(null);
+    useFocusTrap(formRef);
+    const trimmed = name.trim();
+    const nameValid = SKILL_NAME_PATTERN.test(trimmed);
+    const isUnchangedRename = isRename && trimmed === prompt.skill.name;
+    const conflict = props.existingNames.some(s => s.scope === scope && s.name === trimmed && !isUnchangedRename);
+    const canSubmit = !busy && nameValid && !conflict && !isUnchangedRename;
+    const title = isRename ? 'Rename skill' : 'Duplicate skill';
+    const submitLabel = isRename ? 'Rename' : 'Duplicate';
+    const handleSubmit = async (e) => {
+        var _a;
+        e.preventDefault();
+        if (!canSubmit) {
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            if (isRename) {
+                await props.onRename(prompt.skill, trimmed);
+            }
+            else {
+                await props.onDuplicate(prompt.skill, scope, trimmed);
+            }
+        }
+        catch (err) {
+            setError((_a = err === null || err === void 0 ? void 0 : err.message) !== null && _a !== void 0 ? _a : String(err));
+            setBusy(false);
+        }
+    };
+    return (React.createElement("div", { className: "nbi-modal-backdrop", onClick: props.onCancel, role: "presentation" },
+        React.createElement("form", { ref: formRef, className: "nbi-modal-card", role: "dialog", "aria-modal": "true", "aria-label": title, onClick: e => e.stopPropagation(), onSubmit: handleSubmit },
+            React.createElement("div", { className: "nbi-modal-title" }, title),
+            React.createElement("div", { className: "nbi-modal-body" },
+                !isRename && (React.createElement("div", { className: "nbi-form-field" },
+                    React.createElement("label", { htmlFor: "nbi-dup-scope" }, "Target scope"),
+                    React.createElement("select", { id: "nbi-dup-scope", value: scope, onChange: e => setScope(e.target.value) },
+                        React.createElement("option", { value: "user" }, "User"),
+                        React.createElement("option", { value: "project" }, "Project")))),
+                React.createElement("div", { className: "nbi-form-field" },
+                    React.createElement("label", { htmlFor: "nbi-prompt-name" }, "New name"),
+                    React.createElement("input", { id: "nbi-prompt-name", type: "text", autoFocus: true, value: name, onChange: e => setName(e.target.value), onKeyDown: e => {
+                            if (e.key === 'Escape') {
+                                e.preventDefault();
+                                props.onCancel();
+                            }
+                        }, "aria-invalid": (!nameValid && trimmed.length > 0) || conflict
+                            ? true
+                            : undefined }),
+                    trimmed.length > 0 && !nameValid && (React.createElement("div", { className: "nbi-form-field-error" }, SKILL_NAME_REQUIREMENT)),
+                    conflict && (React.createElement("div", { className: "nbi-form-field-error" },
+                        "A ",
+                        scope,
+                        " skill named \"",
+                        trimmed,
+                        "\" already exists.")))),
+            error && (React.createElement("div", { className: "nbi-skills-error", role: "alert" }, error)),
+            React.createElement("div", { className: "nbi-modal-actions" },
+                React.createElement("button", { type: "button", className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: props.onCancel },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Cancel")),
+                React.createElement("button", { type: "submit", className: "jp-Dialog-button jp-mod-accept jp-mod-styled", disabled: !canSubmit },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, busy ? 'Working…' : submitLabel))))));
+}
+function UndoToast(props) {
+    return (React.createElement("div", { className: "nbi-undo-toast", role: "status" },
+        React.createElement("span", { className: "nbi-undo-toast-message" }, props.message),
+        React.createElement("button", { type: "button", className: "nbi-undo-toast-action", onClick: props.onUndo }, "Undo"),
+        React.createElement("button", { type: "button", className: "nbi-undo-toast-close", "aria-label": "Dismiss", onClick: props.onDismiss }, "\u00D7")));
+}
+function SkillEditor(props) {
+    var _a, _b, _c, _d;
+    const isNew = props.name === null;
+    const [scope, setScope] = useState(props.scope);
+    const [name, setName] = useState((_a = props.name) !== null && _a !== void 0 ? _a : '');
+    const [description, setDescription] = useState('');
+    const [allowedTools, setAllowedTools] = useState([]);
+    const [savedMeta, setSavedMeta] = useState({
+        description: '',
+        allowedTools: []
+    });
+    // Bundle files are lazy-loaded when the user switches to their tab (see the fetch effect
+    // below). `loaded: false` means we know the file exists on disk but haven't fetched its
+    // content yet. SKILL.md is always loaded eagerly in loadSkill().
+    const [buffers, setBuffers] = useState(new Map([[SKILL_ENTRY_FILE, { content: '', saved: '', loaded: true }]]));
+    const orderedFileList = useMemo(() => [
+        SKILL_ENTRY_FILE,
+        ...Array.from(buffers.keys())
+            .filter(f => f !== SKILL_ENTRY_FILE)
+            .sort()
+    ], [buffers]);
+    const bundleOverflow = orderedFileList.length > BUNDLE_FILE_DISPLAY_LIMIT;
+    const displayedFileList = bundleOverflow
+        ? [SKILL_ENTRY_FILE]
+        : orderedFileList;
+    const [activeFile, setActiveFile] = useState(SKILL_ENTRY_FILE);
+    // If a reload pushes the bundle over the threshold while a helper file is
+    // selected, snap back to SKILL.md — otherwise the tab strip shows no active
+    // tab and there's no way to navigate anywhere else.
+    useEffect(() => {
+        if (bundleOverflow && activeFile !== SKILL_ENTRY_FILE) {
+            setActiveFile(SKILL_ENTRY_FILE);
+        }
+    }, [bundleOverflow, activeFile]);
+    const [renaming, setRenaming] = useState(null);
+    const [renameDraft, setRenameDraft] = useState('');
+    const [addFileDraft, setAddFileDraft] = useState('');
+    const [loading, setLoading] = useState(!isNew);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [hasCreated, setHasCreated] = useState(false);
+    const [managed, setManaged] = useState(false);
+    const [managedSource, setManagedSource] = useState('');
+    const [tracksUpstream, setTracksUpstream] = useState(false);
+    const [trackingRef, setTrackingRef] = useState('');
+    const [skillSource, setSkillSource] = useState('');
+    const [togglingTracking, setTogglingTracking] = useState(false);
+    const [rootPath, setRootPath] = useState('');
+    const errorRef = useRef(null);
+    const effectiveName = isNew && !hasCreated ? name : ((_b = props.name) !== null && _b !== void 0 ? _b : name);
+    const effectiveIsNew = isNew && !hasCreated;
+    const loadSkill = async (s, n) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const skill = await NBIAPI.readSkill(s, n);
+        setDescription(skill.description);
+        setAllowedTools((_a = skill.allowedTools) !== null && _a !== void 0 ? _a : []);
+        setManaged(skill.managed);
+        setManagedSource((_b = skill.managedSource) !== null && _b !== void 0 ? _b : '');
+        setTracksUpstream(skill.tracksUpstream);
+        setTrackingRef((_c = skill.trackingRef) !== null && _c !== void 0 ? _c : '');
+        setSkillSource((_d = skill.source) !== null && _d !== void 0 ? _d : '');
+        setRootPath((_e = skill.rootPath) !== null && _e !== void 0 ? _e : '');
+        const skillMdBody = (_f = skill.body) !== null && _f !== void 0 ? _f : '';
+        setSavedMeta({
+            description: skill.description,
+            allowedTools: (_g = skill.allowedTools) !== null && _g !== void 0 ? _g : []
+        });
+        const newBuffers = new Map();
+        newBuffers.set(SKILL_ENTRY_FILE, {
+            content: skillMdBody,
+            saved: skillMdBody,
+            loaded: true
+        });
+        for (const file of (_h = skill.files) !== null && _h !== void 0 ? _h : []) {
+            if (file !== SKILL_ENTRY_FILE) {
+                newBuffers.set(file, { content: '', saved: '', loaded: false });
+            }
+        }
+        setBuffers(newBuffers);
+        setActiveFile(SKILL_ENTRY_FILE);
+    };
+    useEffect(() => {
+        if (isNew) {
+            return;
+        }
+        let cancelled = false;
+        (async () => {
+            var _a;
+            try {
+                await loadSkill(props.scope, props.name);
+            }
+            catch (e) {
+                if (!cancelled) {
+                    setError((_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e));
+                }
+            }
+            finally {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [isNew, props.scope, props.name]);
+    useEffect(() => {
+        if (isNew && !hasCreated) {
+            return;
+        }
+        const onReload = () => {
+            var _a;
+            const skillName = (_a = props.name) !== null && _a !== void 0 ? _a : (hasCreated ? name : null);
+            if (!skillName) {
+                return;
+            }
+            loadSkill(props.scope, skillName).catch((e) => {
+                var _a;
+                setError((_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e));
+            });
+        };
+        NBIAPI.skillsReloaded.connect(onReload);
+        return () => {
+            NBIAPI.skillsReloaded.disconnect(onReload);
+        };
+    }, [isNew, hasCreated, props.scope, props.name, name]);
+    useEffect(() => {
+        var _a;
+        if (error) {
+            (_a = errorRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+        }
+    }, [error]);
+    const metaDirty = description !== savedMeta.description ||
+        allowedTools.length !== savedMeta.allowedTools.length ||
+        allowedTools.some((t, i) => t !== savedMeta.allowedTools[i]);
+    const fileDirty = (path) => {
+        const b = buffers.get(path);
+        return b !== undefined && b.content !== b.saved;
+    };
+    const anyFileDirty = Array.from(buffers.keys()).some(fileDirty);
+    const anyDirty = metaDirty || anyFileDirty;
+    const nameValid = SKILL_NAME_PATTERN.test(name);
+    const descriptionValid = description.trim().length > 0;
+    const canSave = !saving && !managed && (!effectiveIsNew || nameValid) && descriptionValid;
+    const updateBuffer = (path, content) => {
+        setBuffers(prev => {
+            var _a;
+            const next = new Map(prev);
+            const existing = (_a = next.get(path)) !== null && _a !== void 0 ? _a : {
+                content: '',
+                saved: '',
+                loaded: true
+            };
+            next.set(path, { ...existing, content });
+            return next;
+        });
+    };
+    const currentBuffer = (_d = (_c = buffers.get(activeFile)) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : '';
+    const handleSave = async () => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        setError(null);
+        if (effectiveIsNew && !nameValid) {
+            setError(`Invalid name. ${SKILL_NAME_REQUIREMENT}`);
+            return;
+        }
+        setSaving(true);
+        try {
+            if (effectiveIsNew) {
+                const initialBody = (_b = (_a = buffers.get(SKILL_ENTRY_FILE)) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : '';
+                await NBIAPI.createSkill({
+                    scope,
+                    name,
+                    description,
+                    allowedTools,
+                    body: initialBody
+                });
+                const extraFiles = Array.from(buffers.entries()).filter(([p]) => p !== SKILL_ENTRY_FILE);
+                for (const [path, buf] of extraFiles) {
+                    try {
+                        await NBIAPI.writeBundleFile(scope, name, path, buf.content);
+                    }
+                    catch (e) {
+                        setError(`${path}: ${(_c = e === null || e === void 0 ? void 0 : e.message) !== null && _c !== void 0 ? _c : String(e)}`);
+                    }
+                }
+                setHasCreated(true);
+                await loadSkill(scope, name);
+            }
+            else {
+                const skillName = effectiveName;
+                const dirtyFilePaths = Array.from(buffers.keys()).filter(p => p !== SKILL_ENTRY_FILE && fileDirty(p));
+                const skillMdBody = (_e = (_d = buffers.get(SKILL_ENTRY_FILE)) === null || _d === void 0 ? void 0 : _d.content) !== null && _e !== void 0 ? _e : '';
+                const skillMdDirty = fileDirty(SKILL_ENTRY_FILE);
+                const savedPaths = new Set();
+                const fileResults = await Promise.allSettled(dirtyFilePaths.map(p => NBIAPI.writeBundleFile(scope, skillName, p, buffers.get(p).content)));
+                const errors = [];
+                fileResults.forEach((result, i) => {
+                    var _a, _b;
+                    const p = dirtyFilePaths[i];
+                    if (result.status === 'fulfilled') {
+                        savedPaths.add(p);
+                    }
+                    else {
+                        errors.push(`${p}: ${(_b = (_a = result.reason) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : result.reason}`);
+                    }
+                });
+                let metaSaved = !(metaDirty || skillMdDirty);
+                if (metaDirty || skillMdDirty) {
+                    try {
+                        await NBIAPI.updateSkill(scope, skillName, {
+                            description,
+                            allowedTools,
+                            body: skillMdBody
+                        });
+                        metaSaved = true;
+                        if (skillMdDirty) {
+                            savedPaths.add(SKILL_ENTRY_FILE);
+                        }
+                    }
+                    catch (e) {
+                        errors.push((_f = e === null || e === void 0 ? void 0 : e.message) !== null && _f !== void 0 ? _f : String(e));
+                    }
+                }
+                setBuffers(prev => {
+                    const next = new Map(prev);
+                    for (const path of savedPaths) {
+                        const b = next.get(path);
+                        if (b) {
+                            next.set(path, {
+                                content: b.content,
+                                saved: b.content,
+                                loaded: true
+                            });
+                        }
+                    }
+                    return next;
+                });
+                if (metaSaved) {
+                    setSavedMeta({ description, allowedTools });
+                }
+                if (errors.length > 0) {
+                    setError(errors.join('\n'));
+                }
+            }
+        }
+        catch (e) {
+            setError((_g = e === null || e === void 0 ? void 0 : e.message) !== null && _g !== void 0 ? _g : String(e));
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const handleBack = async () => {
+        if (anyDirty) {
+            const result = await showDialog({
+                title: 'Discard unsaved changes?',
+                body: 'This skill has unsaved changes. Discard them?',
+                buttons: [
+                    Dialog.cancelButton({ label: 'Keep editing' }),
+                    Dialog.warnButton({ label: 'Discard' })
+                ]
+            });
+            if (!result.button.accept) {
+                return;
+            }
+        }
+        props.onClose();
+    };
+    const handleSelectFile = (path) => {
+        if (path === activeFile) {
+            return;
+        }
+        setActiveFile(path);
+    };
+    const handleAddFile = async () => {
+        var _a;
+        const relPath = addFileDraft.trim();
+        if (!relPath) {
+            return;
+        }
+        if (buffers.has(relPath)) {
+            setError(`"${relPath}" already exists in this bundle.`);
+            return;
+        }
+        try {
+            if (!effectiveIsNew) {
+                await NBIAPI.writeBundleFile(scope, effectiveName, relPath, '');
+            }
+            setBuffers(prev => {
+                const next = new Map(prev);
+                // For new skills, mark as dirty (saved='' vs content='' — equal, so not dirty;
+                // but the initial empty file write happens on skill creation save).
+                next.set(relPath, { content: '', saved: '', loaded: true });
+                return next;
+            });
+            setActiveFile(relPath);
+            setAddFileDraft('');
+        }
+        catch (e) {
+            setError((_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e));
+        }
+    };
+    const handleDeleteFile = async (path) => {
+        var _a;
+        const result = await showDialog({
+            title: 'Delete file?',
+            body: `"${path}" will be permanently deleted.`,
+            buttons: [Dialog.cancelButton(), Dialog.warnButton({ label: 'Delete' })]
+        });
+        if (!result.button.accept) {
+            return;
+        }
+        try {
+            if (!effectiveIsNew) {
+                await NBIAPI.deleteBundleFile(scope, effectiveName, path);
+            }
+            setBuffers(prev => {
+                const next = new Map(prev);
+                next.delete(path);
+                return next;
+            });
+            if (activeFile === path) {
+                setActiveFile(SKILL_ENTRY_FILE);
+            }
+        }
+        catch (e) {
+            setError((_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e));
+        }
+    };
+    const handleBeginRename = (path) => {
+        setRenaming(path);
+        setRenameDraft(path);
+    };
+    const handleCommitRename = async () => {
+        var _a;
+        if (renaming === null) {
+            return;
+        }
+        const newPath = renameDraft.trim();
+        if (!newPath || newPath === renaming) {
+            setRenaming(null);
+            return;
+        }
+        try {
+            if (!effectiveIsNew) {
+                await NBIAPI.renameBundleFile(scope, effectiveName, renaming, newPath);
+            }
+            setBuffers(prev => {
+                const next = new Map(prev);
+                const b = next.get(renaming);
+                if (b) {
+                    next.set(newPath, b);
+                    next.delete(renaming);
+                }
+                return next;
+            });
+            if (activeFile === renaming) {
+                setActiveFile(newPath);
+            }
+            setRenaming(null);
+            setRenameDraft('');
+        }
+        catch (e) {
+            setError((_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e));
+            setRenaming(null);
+        }
+    };
+    useEffect(() => {
+        if (effectiveIsNew || activeFile === SKILL_ENTRY_FILE) {
+            return;
+        }
+        const existing = buffers.get(activeFile);
+        if (existing === null || existing === void 0 ? void 0 : existing.loaded) {
+            return;
+        }
+        let cancelled = false;
+        (async () => {
+            var _a;
+            try {
+                const content = await NBIAPI.readBundleFile(scope, effectiveName, activeFile);
+                if (cancelled) {
+                    return;
+                }
+                setBuffers(prev => {
+                    const existing = prev.get(activeFile);
+                    // Don't clobber user edits that happened while the fetch was in flight.
+                    if (existing === null || existing === void 0 ? void 0 : existing.loaded) {
+                        return prev;
+                    }
+                    const next = new Map(prev);
+                    next.set(activeFile, { content, saved: content, loaded: true });
+                    return next;
+                });
+            }
+            catch (e) {
+                if (!cancelled) {
+                    setError((_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e));
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [activeFile, effectiveIsNew, scope, effectiveName]);
+    const nameError = effectiveIsNew && name && !nameValid ? SKILL_NAME_REQUIREMENT : null;
+    const descriptionError = !descriptionValid && (description.length > 0 || !effectiveIsNew)
+        ? 'Description is required.'
+        : null;
+    const editingSkillMd = activeFile === SKILL_ENTRY_FILE;
+    const bodyLanguageHint = editingSkillMd ? 'markdown' : activeFile;
+    return (React.createElement("form", { className: "nbi-skill-editor", onSubmit: e => {
+            e.preventDefault();
+            if (canSave && (effectiveIsNew || anyDirty)) {
+                handleSave();
+            }
+        } },
+        React.createElement("div", { className: "nbi-skill-editor-header" },
+            React.createElement("nav", { className: "nbi-skill-editor-breadcrumb", "aria-label": "Breadcrumb" },
+                React.createElement("button", { type: "button", className: "nbi-breadcrumb-link", onClick: handleBack }, "Skills"),
+                React.createElement("span", { className: "nbi-breadcrumb-separator", "aria-hidden": "true" }, "/"),
+                React.createElement("span", { className: "nbi-breadcrumb-current" },
+                    effectiveIsNew ? 'New skill' : effectiveName,
+                    managed && React.createElement(ManagedBadge, { source: managedSource }))),
+            React.createElement("div", { className: "nbi-skill-editor-actions" },
+                React.createElement("button", { type: "button", className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: handleBack },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, managed ? 'Close' : 'Cancel')),
+                !managed && (React.createElement("button", { type: "submit", className: "jp-Dialog-button jp-mod-accept jp-mod-styled", disabled: !canSave || (!effectiveIsNew && !anyDirty) },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" },
+                        saving ? 'Saving…' : 'Save',
+                        anyDirty && (React.createElement("span", { className: "nbi-dirty-marker", "aria-label": "Unsaved changes" },
+                            ' ',
+                            "\u2022"))))))),
+        managed && (React.createElement("div", { className: "nbi-skills-managed-banner", role: "note" }, "This skill is managed by the organization manifest and is read-only. Changes will be overwritten on the next sync.")),
+        !managed && !effectiveIsNew && skillSource && (React.createElement("div", { className: "nbi-skills-tracking-row" },
+            React.createElement("label", { className: "nbi-checkbox-label" },
+                React.createElement("input", { type: "checkbox", checked: tracksUpstream, disabled: togglingTracking || saving, onChange: async (e) => {
+                        var _a;
+                        const next = e.target.checked;
+                        // Optimistic flip so the checkbox tracks the click while
+                        // the PUT is in flight; rolled back on failure below.
+                        setTracksUpstream(next);
+                        setTogglingTracking(true);
+                        setError(null);
+                        try {
+                            const updated = await NBIAPI.updateSkill(scope, effectiveName, { tracksUpstream: next });
+                            setTracksUpstream(updated.tracksUpstream);
+                            setTrackingRef(updated.trackingRef);
+                        }
+                        catch (err) {
+                            // Roll back the optimistic flip so the UI matches the
+                            // server's state (the server kept the prior value).
+                            setTracksUpstream(!next);
+                            setError((_a = err === null || err === void 0 ? void 0 : err.message) !== null && _a !== void 0 ? _a : String(err));
+                        }
+                        finally {
+                            setTogglingTracking(false);
+                        }
+                    } }),
+                "Track upstream"),
+            React.createElement("span", { className: "nbi-form-hint" },
+                "Source: ",
+                skillSource,
+                tracksUpstream &&
+                    trackingRef &&
+                    ` · last sync: ${trackingRef.slice(0, 7)}`))),
+        loading ? (React.createElement("div", { className: "nbi-skill-editor-loading" }, "Loading skill\u2026")) : (React.createElement(React.Fragment, null,
+            error && (React.createElement("div", { className: "nbi-skills-error", role: "alert", ref: errorRef }, error)),
+            React.createElement("div", { className: "nbi-skill-editor-meta" },
+                React.createElement("div", { className: "nbi-form-row" },
+                    React.createElement("div", { className: "nbi-form-row-inline" },
+                        React.createElement("div", { className: "nbi-form-field" },
+                            React.createElement("label", null, "Scope"),
+                            React.createElement("select", { value: scope, disabled: !effectiveIsNew, onChange: e => setScope(e.target.value) },
+                                React.createElement("option", { value: "user" }, "User"),
+                                React.createElement("option", { value: "project" }, "Project"))),
+                        React.createElement("div", { className: "nbi-form-field" },
+                            React.createElement("label", null, "Name"),
+                            React.createElement("input", { type: "text", value: name, disabled: !effectiveIsNew, onChange: e => setName(e.target.value), placeholder: "my-skill-name", "aria-invalid": nameError ? true : undefined }),
+                            nameError && (React.createElement("div", { className: "nbi-form-field-error" }, nameError)))),
+                    !effectiveIsNew && (React.createElement("div", { className: "nbi-form-hint" }, "Scope and name are set at creation and can't be changed. Delete and recreate to change them."))),
+                React.createElement("div", { className: "nbi-form-field nbi-form-field-wide" },
+                    React.createElement("label", null, "Description"),
+                    React.createElement("textarea", { rows: 3, value: description, onChange: e => setDescription(e.target.value), placeholder: "What this skill does, shown to Claude when deciding whether to use it", "aria-invalid": descriptionError ? true : undefined, required: true }),
+                    descriptionError ? (React.createElement("div", { className: "nbi-form-field-error" }, descriptionError)) : (React.createElement("div", { className: "nbi-form-hint" }, "Required. Claude uses this to decide when to apply the skill."))),
+                React.createElement("div", { className: "nbi-form-field nbi-form-field-wide" },
+                    React.createElement("label", null, "Allowed tools"),
+                    React.createElement(AllowedToolsPicker, { value: allowedTools, onChange: setAllowedTools }),
+                    React.createElement("div", { className: "nbi-form-hint" },
+                        "Quick-add pills cover common tools. Type patterns like",
+                        ' ',
+                        React.createElement("code", null, "Bash(git:*)"),
+                        " or ",
+                        React.createElement("code", null, "Read(./docs/**)"),
+                        " for finer-grained permissions."))),
+            bundleOverflow && (React.createElement("div", { className: "nbi-form-hint" },
+                "Bundle contains ",
+                orderedFileList.length,
+                " files \u2014 showing",
+                ' ',
+                SKILL_ENTRY_FILE,
+                " only. Edit supporting files directly on disk.",
+                rootPath && (React.createElement(React.Fragment, null,
+                    ' ',
+                    "Path: ",
+                    React.createElement("code", null, rootPath))))),
+            React.createElement(BundleFileTabs, { files: displayedFileList, activeFile: activeFile, renaming: renaming, renameDraft: renameDraft, addFileDraft: addFileDraft, fileDirty: fileDirty, canAddFiles: !bundleOverflow, onSelect: handleSelectFile, onBeginRename: handleBeginRename, onCommitRename: handleCommitRename, onCancelRename: () => setRenaming(null), onRenameDraftChange: setRenameDraft, onDelete: handleDeleteFile, onAddFileDraftChange: setAddFileDraft, onAddFile: handleAddFile }),
+            React.createElement("div", { className: "nbi-skill-editor-body" },
+                React.createElement("div", { className: "nbi-skill-editor-pane" },
+                    React.createElement(AutoGrowTextarea, { value: currentBuffer, onChange: v => updateBuffer(activeFile, v), minRows: 18, languageHint: bodyLanguageHint })))))));
+}
+function BundleFileTabs(props) {
+    const [openMenu, setOpenMenu] = useState(null);
+    const [adding, setAdding] = useState(false);
+    useEffect(() => {
+        if (!openMenu) {
+            return;
+        }
+        const onDocClick = () => setOpenMenu(null);
+        document.addEventListener('click', onDocClick);
+        return () => document.removeEventListener('click', onDocClick);
+    }, [openMenu]);
+    const commitAdd = () => {
+        if (props.addFileDraft.trim()) {
+            props.onAddFile();
+        }
+        setAdding(false);
+    };
+    return (React.createElement("div", { className: "nbi-skill-editor-tabs", role: "tablist" },
+        props.files.map(file => {
+            const active = file === props.activeFile;
+            const dirty = props.fileDirty(file);
+            const isRenaming = props.renaming === file;
+            const canModify = file !== SKILL_ENTRY_FILE;
+            return (React.createElement("div", { key: file, role: "tab", "aria-selected": active, className: `nbi-skill-editor-tab${active ? ' active' : ''}`, onClick: () => !isRenaming && props.onSelect(file) }, isRenaming ? (React.createElement("input", { type: "text", autoFocus: true, value: props.renameDraft, onChange: e => props.onRenameDraftChange(e.target.value), onKeyDown: e => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        props.onCommitRename();
+                    }
+                    else if (e.key === 'Escape') {
+                        e.preventDefault();
+                        props.onCancelRename();
+                    }
+                }, onBlur: props.onCancelRename, onClick: e => e.stopPropagation(), className: "nbi-skill-editor-tab-rename-input" })) : (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "nbi-skill-editor-tab-label" },
+                    file,
+                    dirty && React.createElement("span", { className: "nbi-dirty-marker" }, " \u2022")),
+                canModify && (React.createElement("div", { className: "nbi-skill-editor-tab-kebab-wrap", onClick: e => e.stopPropagation() },
+                    React.createElement("button", { type: "button", className: "nbi-icon-button", "aria-label": `Actions for ${file}`, "aria-haspopup": "menu", "aria-expanded": openMenu === file, onClick: e => {
+                            e.stopPropagation();
+                            setOpenMenu(openMenu === file ? null : file);
+                        } }, "\u22EF"),
+                    openMenu === file && (React.createElement("div", { className: "nbi-skill-editor-tab-menu", role: "menu" },
+                        React.createElement("button", { type: "button", role: "menuitem", onClick: () => {
+                                setOpenMenu(null);
+                                props.onBeginRename(file);
+                            } }, "Rename"),
+                        React.createElement("button", { type: "button", role: "menuitem", className: "danger", onClick: () => {
+                                setOpenMenu(null);
+                                props.onDelete(file);
+                            } }, "Delete")))))))));
+        }),
+        props.canAddFiles &&
+            (adding ? (React.createElement("div", { className: "nbi-skill-editor-tab adding" },
+                React.createElement("input", { type: "text", autoFocus: true, placeholder: "new-file.md", value: props.addFileDraft, onChange: e => props.onAddFileDraftChange(e.target.value), onKeyDown: e => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            commitAdd();
+                        }
+                        else if (e.key === 'Escape') {
+                            e.preventDefault();
+                            props.onAddFileDraftChange('');
+                            setAdding(false);
+                        }
+                    }, onBlur: commitAdd, className: "nbi-skill-editor-tab-rename-input" }))) : (React.createElement("button", { type: "button", className: "nbi-skill-editor-tab-add", "aria-label": "Add file", title: "Add file", onClick: () => setAdding(true) }, "+")))));
+}
+function AllowedToolsPicker(props) {
+    const [draft, setDraft] = useState('');
+    const commit = (raw) => {
+        const parts = raw
+            .split(',')
+            .map(t => t.trim())
+            .filter(t => t.length > 0 && !props.value.includes(t));
+        if (parts.length === 0) {
+            setDraft('');
+            return;
+        }
+        props.onChange([...props.value, ...parts]);
+        setDraft('');
+    };
+    const toggle = (tool) => {
+        if (props.value.includes(tool)) {
+            props.onChange(props.value.filter(t => t !== tool));
+        }
+        else {
+            props.onChange([...props.value, tool]);
+        }
+    };
+    const remove = (tool) => {
+        props.onChange(props.value.filter(t => t !== tool));
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ',') {
+            if (draft.trim()) {
+                e.preventDefault();
+                commit(draft);
+            }
+        }
+        else if (e.key === 'Backspace' && !draft && props.value.length > 0) {
+            remove(props.value[props.value.length - 1]);
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "nbi-tools-picker-input" },
+            props.value.map(tool => (React.createElement("span", { key: tool, className: "pill-item checked" },
+                tool,
+                React.createElement("button", { onClick: () => remove(tool), "aria-label": `Remove ${tool}`, className: "nbi-pill-remove" }, "\u00D7")))),
+            React.createElement("input", { type: "text", value: draft, onChange: e => setDraft(e.target.value), onKeyDown: handleKeyDown, onBlur: () => draft.trim() && commit(draft), placeholder: props.value.length === 0 ? 'e.g. Bash(git:*)' : '' })),
+        React.createElement("div", { className: "nbi-tools-picker-suggestions" }, COMMON_TOOLS.map(tool => (React.createElement("span", { key: tool, className: `pill-item${props.value.includes(tool) ? ' checked' : ''}`, onClick: () => toggle(tool) }, tool))))));
+}
+function AutoGrowTextarea(props) {
+    const ref = useRef(null);
+    const lineHeightRef = useRef(null);
+    useLayoutEffect(() => {
+        const ta = ref.current;
+        if (!ta) {
+            return;
+        }
+        if (lineHeightRef.current === null) {
+            const computed = window.getComputedStyle(ta);
+            const parsed = parseFloat(computed.lineHeight);
+            // CSS "normal" resolves to NaN here; 1.4× font-size is a standard approximation.
+            lineHeightRef.current = Number.isNaN(parsed)
+                ? parseFloat(computed.fontSize) * 1.4
+                : parsed;
+        }
+        ta.style.height = 'auto';
+        const next = Math.max(ta.scrollHeight, props.minRows * lineHeightRef.current);
+        ta.style.height = `${next}px`;
+    }, [props.value, props.minRows]);
+    return (React.createElement("textarea", { ref: ref, className: "nbi-skill-editor-textarea", value: props.value, onChange: e => props.onChange(e.target.value), spellCheck: false, "data-language": props.languageHint }));
+}