@aiwayds/dsh-tui-pi 0.4.3 → 0.5.1

package/lib/settings.js

@@ -35,11 +35,12 @@
  */
 import { getPath, nodeAtPath, rehydrateSchema, } from '@deepseek-ai/dsh-client-schema-form';
 import { settingsNamespace } from '@deepseek-ai/dsh-settings';
-import { getKeybindings, Input, SettingsList, } from '@earendil-works/pi-tui';
+import { getKeybindings, Input, matchesKey, SettingsList, } from '@earendil-works/pi-tui';
 import { ansiBg, ansiFg, BOLD, RESET } from "./theme/index.js";
 import { clipToWidth, visibleWidth } from "./text.js";
 import { wrapFramedOverlay } from "./frame.js";
 import { catalogEntry, deriveKeyRef, directoryProviderEntries, providerProfileFor, providerRowView, unconfiguredCatalogEntries, } from "./provider-catalog.js";
+import { applySkillFrontmatter, BADGE_WIDTH, clampScrollOffset, clampSkillCursor, filterSkillRows, isPrintableInput, readSkillToggle, skillDisableUpdates, skillEnableUpdates, skillEnabled, skillJumpCursor, skillPanelRowLine, SKILL_INDEX_WIDTH, SKILL_STATE_WIDTH, skillToggleEnabled, } from "./skills.js";
 /**
  * Static namespace→category mapping, mirroring the web settings page's
  * client-side slot structure (see the module header): the data plane carries
@@ -54,6 +55,7 @@ export const CATEGORY_MAP = [
     { id: 'models', label: 'Models', namespaces: ['llm-deepseek', 'llm-pi-ai', 'agent-default-model'] },
     { id: 'plugins', label: 'Plugins', namespaces: ['shell', 'agent-loop', 'web-search-deepseek'] },
     { id: 'agent', label: 'Agent Presets', namespaces: ['agent-presets'] },
+    { id: 'skills', label: 'Skills', namespaces: [] },
 ];
 /** Cap for a category row's member-name description line. */
 export const CATEGORY_DESC_MAX = 60;
@@ -64,7 +66,10 @@ const NS_AGENT_DEFAULT_MODEL = settingsNamespace('agent-default-model');
 /**
  * Group a describe() namespace list into ordered categories — general, models,
  * plugins, agent, then `other` for everything unmapped. Categories with no
- * members are dropped, including `other` when nothing falls into it.
+ * members are dropped, including `other` when nothing falls into it. The
+ * Skills category is the exception: it is not namespace-driven (it lists the
+ * `ctx.skills` registry's user skills, see the Skills category view) and
+ * always appears.
  *
  * Defensive: duplicate namespaces in the input count once (a namespace
  * registered twice must not be listed twice), and the `mapped` guard resolves
@@ -76,6 +81,11 @@ export function categorizeNamespaces(nses) {
     const mapped = new Set();
     const input = new Set(nses);
     for (const def of CATEGORY_MAP) {
+        if (def.id === 'skills') {
+            // Namespace-independent: the user-skill browser always shows.
+            categories.push({ id: def.id, label: def.label, namespaces: [] });
+            continue;
+        }
         const members = [...new Set(def.namespaces)].filter(ns => input.has(ns) && !mapped.has(ns));
         if (members.length === 0)
             continue;
@@ -441,6 +451,203 @@ class ModelsCategoryView {
         this.list?.handleInput(data);
     }
 }
+/**
+ * Self-drawn Skills panel for the `/settings` Skills category. Drawn directly
+ * (no pi-tui SettingsList) so a row shows its toggle state exactly once, in
+ * front — SettingsList forces the currentValue into a right-hand value column
+ * too, which duplicated the state (`true  [skill] x     true`). Navigation is
+ * up/down plus PgUp/PgDn paging and Home/End jump; Enter/Space toggles (the
+ * same keys SettingsList accepts), Esc exits; the selected row's description
+ * is shown under the list, plus a footer hint. Every rendered row is clipped
+ * to the panel width so narrow terminals truncate instead of overflowing.
+ * The browser swaps rows in asynchronously (loading / empty / no-service states
+ * come through setStatus).
+ */
+class SkillsPanel {
+    tui;
+    theme;
+    onToggle;
+    onExit;
+    rows = [];
+    cursor = 0;
+    scrollOffset = 0;
+    /** One-line notice shown in place of the list (loading / empty / no service). */
+    status;
+    /** Filter query accumulated from printable keystrokes; Backspace/Delete erases. */
+    filterQuery = '';
+    /** The overlay renders at `maxHeight` of terminal rows; FramedOverlay adds
+     *  4 chrome rows (top border + spacer + bottom spacer + border); the child
+     *  also appends2 tail rows (description + footer) after the skill list. */
+    static FRAME_OVERHEAD = 4;
+    static TAIL_ROWS = 2;
+    constructor(tui, theme, onToggle, onExit) {
+        this.tui = tui;
+        this.theme = theme;
+        this.onToggle = onToggle;
+        this.onExit = onExit;
+    }
+    invalidate() {
+        this.tui.requestRender();
+    }
+    /** Replace the whole list (keeps the cursor clamped to the filtered length). */
+    setRows(rows) {
+        this.rows = [...rows];
+        this.status = undefined;
+        this.cursor = clampSkillCursor(this.cursor, this.getFilteredRows().length);
+        this.scrollToCursor();
+        this.tui.requestRender();
+    }
+    /** Show a one-line notice in place of the list. */
+    setStatus(text) {
+        this.status = text;
+        this.rows = [];
+        this.cursor = 0;
+        this.scrollOffset = 0;
+        this.tui.requestRender();
+    }
+    render(width) {
+        const p = this.theme.palette;
+        const fg = (hex) => (text) => ansiFg(hex) + text + RESET;
+        if (this.rows.length === 0) {
+            return [fg(p.fgMuted)(clipToWidth(this.status ?? '', width))];
+        }
+        const filtered = this.getFilteredRows();
+        if (filtered.length === 0) {
+            return [
+                fg(p.fgMuted)(clipToWidth(`No matches for '${this.filterQuery}'`, width)),
+                fg(p.fgSubtle)(clipToWidth(this.footer, width)),
+            ];
+        }
+        // Calculate how many skill rows fit. The overlay is capped at 80% of
+        // terminal rows (SettingsBrowser's maxHeight); FramedOverlay adds 4 chrome
+        // rows; the child appends TAIL_ROWS (description + footer) after the
+        // skill list.
+        const overlayMax = Math.floor(this.tui.terminal.rows * 0.8);
+        const maxVisibleRows = Math.max(1, overlayMax - SkillsPanel.FRAME_OVERHEAD - SkillsPanel.TAIL_ROWS);
+        // Ensure the cursor is in the visible window.
+        this.scrollToCursor(maxVisibleRows, filtered.length);
+        const visibleRows = filtered.slice(this.scrollOffset, this.scrollOffset + maxVisibleRows);
+        // Fixed-width prefix segments: marker(2) + index(4) + state(6) + badge(8) = 20.
+        const prefixCols = 2 + (SKILL_INDEX_WIDTH + 1) + (SKILL_STATE_WIDTH + 1) + (BADGE_WIDTH + 1);
+        const out = [];
+        for (let vi = 0; vi < visibleRows.length; vi++) {
+            const i = this.scrollOffset + vi;
+            const row = filtered[i];
+            const selected = i === this.cursor;
+            // One plain-text row (marker+space, index+space, state+space,
+            // badge+space+name), clipped once to width, then colored per
+            // fixed-width segment. The prefix segments are fixed ASCII width so
+            // slicing the clipped line by index is column-exact; the name tail
+            // takes the rest, and clipToWidth guarantees no row ever exceeds
+            // `width`.
+            const plain = clipToWidth(skillPanelRowLine(selected, row.enabled, row.name, i + 1), width);
+            out.push(fg(selected ? p.accent : p.fgMuted)(plain.slice(0, 2))
+                + fg(p.fgSubtle)(plain.slice(2, 2 + SKILL_INDEX_WIDTH + 1))
+                + fg(row.enabled ? p.success : p.fgMuted)(plain.slice(2 + SKILL_INDEX_WIDTH + 1, prefixCols))
+                + fg(selected ? p.accent : p.fgDefault)(plain.slice(prefixCols)));
+        }
+        const sel = filtered[this.cursor];
+        if (sel !== undefined && sel.description !== '') {
+            out.push(fg(p.fgSubtle)(clipToWidth(`  ${sel.description}`, width)));
+        }
+        else {
+            out.push('');
+        }
+        out.push(fg(p.fgSubtle)(clipToWidth(this.footer, width)));
+        return out;
+    }
+    handleInput(data) {
+        const kb = getKeybindings();
+        if (kb.matches(data, 'tui.select.cancel')) {
+            // Esc with an active filter clears it first; a second Esc exits.
+            if (this.filterQuery !== '') {
+                this.filterQuery = '';
+                this.cursor = 0;
+                this.scrollOffset = 0;
+                this.tui.requestRender();
+                return;
+            }
+            this.onExit();
+            return;
+        }
+        if (kb.matches(data, 'tui.select.up')) {
+            this.move('up');
+            return;
+        }
+        if (kb.matches(data, 'tui.select.down')) {
+            this.move('down');
+            return;
+        }
+        if (kb.matches(data, 'tui.select.pageUp')) {
+            this.move('pageUp');
+            return;
+        }
+        if (kb.matches(data, 'tui.select.pageDown')) {
+            this.move('pageDown');
+            return;
+        }
+        // There is no tui.select.home/end binding, so match the raw keys with
+        // matchesKey (the same check the keybindings manager uses internally,
+        // including ctrl+home/end variants).
+        if (matchesKey(data, 'home')) {
+            this.move('home');
+            return;
+        }
+        if (matchesKey(data, 'end')) {
+            this.move('end');
+            return;
+        }
+        // Enter (tui.select.confirm) or Space — the same toggle keys SettingsList
+        // accepts (SettingsList treats a raw space as confirm when not searching).
+        if (kb.matches(data, 'tui.select.confirm') || data === ' ') {
+            const filtered = this.getFilteredRows();
+            const row = filtered[this.cursor];
+            if (row !== undefined)
+                this.onToggle(row.name, !row.enabled);
+            return;
+        }
+        // Backspace / Delete — erase the last character of the filter query.
+        if (data === '\x7f' || matchesKey(data, 'backspace')) {
+            if (this.filterQuery !== '') {
+                this.filterQuery = this.filterQuery.slice(0, -1);
+                this.cursor = 0;
+                this.scrollOffset = 0;
+                this.tui.requestRender();
+            }
+            return;
+        }
+        // Printable characters accumulate into the filter query.
+        if (isPrintableInput(data)) {
+            this.filterQuery += data;
+            this.cursor = 0;
+            this.scrollOffset = 0;
+            this.tui.requestRender();
+        }
+    }
+    /** Move the cursor by a jump kind, then scroll into view and repaint. */
+    move(jump) {
+        const filtered = this.getFilteredRows();
+        this.cursor = skillJumpCursor(this.cursor, filtered.length, jump);
+        this.tui.requestRender();
+    }
+    /** Adjust scrollOffset so the cursor is within `[offset, offset+visibleRows)`. */
+    scrollToCursor(visibleRows, length) {
+        const vr = visibleRows ?? Math.max(1, Math.floor(this.tui.terminal.rows * 0.8) - SkillsPanel.FRAME_OVERHEAD - SkillsPanel.TAIL_ROWS);
+        const len = length ?? this.getFilteredRows().length;
+        this.scrollOffset = clampScrollOffset(this.cursor, vr, len, this.scrollOffset);
+    }
+    /** The rows after applying the current filter query. */
+    getFilteredRows() {
+        return filterSkillRows(this.rows, this.filterQuery);
+    }
+    /** Footer hint changes when a filter is active. */
+    get footer() {
+        if (this.filterQuery !== '') {
+            return `Filter: ${this.filterQuery} · Backspace clear · Esc clear filter`;
+        }
+        return '↑↓ nav · PgUp/PgDn page · Home/End jump · Enter/Space toggle · Esc back';
+    }
+}
 /**
  * Add-provider flow for the Models category — the terminal counterpart of
  * pi-agent's /login, trimmed to the information a user actually needs: pick
@@ -546,6 +753,7 @@ class SettingsBrowser {
     settings;
     restoreFocus;
     onError;
+    agent;
     descriptors = [];
     /** Rehydrated schema roots, cached per namespace (schemas never change). */
     roots = new Map();
@@ -555,6 +763,8 @@ class SettingsBrowser {
     nsList;
     modelsView;
     modelsExit;
+    skillsView;
+    skillsExit;
     /**
      * Credential refs just stored by the add flow (possibly several in one
      * browser session) — their rows read as key set via the merged env.
@@ -577,6 +787,7 @@ class SettingsBrowser {
         this.settings = options.settings;
         this.restoreFocus = options.restoreFocus;
         this.onError = options.onError;
+        this.agent = options.agent;
         // Assigned here, not as a field initializer: a later field declaration
         // would `defineProperty(…, undefined)` over the promise's resolve.
         this.closed = new Promise(resolve => { this.closeResolve = resolve; });
@@ -617,6 +828,8 @@ class SettingsBrowser {
         this.nsList = undefined;
         this.modelsView = undefined;
         this.modelsExit = undefined;
+        this.skillsView = undefined;
+        this.skillsExit = undefined;
         this.justStoredRefs.clear();
         this.restoreFocus();
         this.closeResolve();
@@ -657,11 +870,13 @@ class SettingsBrowser {
             description: this.categoryDescription(cat),
             submenu: cat.id === 'models'
                 ? (_current, done) => this.openModelsSubmenu(done)
-                : (_current, done) => {
-                    const list = this.namespaceList(this.descriptors.filter(d => cat.namespaces.includes(d.ns)), done);
-                    this.nsList = list;
-                    return list;
-                },
+                : cat.id === 'skills'
+                    ? (_current, done) => this.openSkillsSubmenu(done)
+                    : (_current, done) => {
+                        const list = this.namespaceList(this.descriptors.filter(d => cat.namespaces.includes(d.ns)), done);
+                        this.nsList = list;
+                        return list;
+                    },
         }));
         const list = new SettingsList(items, 10, this.listTheme, () => { }, () => this.close(), { enableSearch: true });
         return list;
@@ -955,6 +1170,127 @@ class SettingsBrowser {
         // calling it again here would double-refresh (C8).
         () => { exit(); }, { enableSearch: true });
     }
+    /** Cap for a skill row's description line (columns; width-safe). */
+    static SKILL_DESC_MAX = 60;
+    // ------------------------------------------------------------- skills category --
+    /**
+     * The Skills category is not namespace-driven: it lists the live
+     * `ctx.skills` registry's user skills, each with an enabled/disabled toggle
+     * that writes the skill's own SKILL.md frontmatter (`disable-model-
+     * invocation` / `user-invocable`). Listing is async (unlike the namespace
+     * walk), so the category opens with a "Loading…" notice and swaps in the
+     * rows when discovery settles. Degrades to a distinct notice when the skills
+     * service is absent.
+     */
+    openSkillsSubmenu(done) {
+        this.skillsExit = () => {
+            this.refreshCategoryList();
+            done();
+        };
+        const panel = new SkillsPanel(this.tui, this.theme, (name, enable) => { void this.toggleSkill(name, enable); }, () => { this.skillsExit?.(); });
+        this.skillsView = panel;
+        panel.setStatus('Loading skills…');
+        this.refreshSkillsList();
+        return panel;
+    }
+    /**
+     * Re-fetch the skill list onto the current panel. An optional `diskEnabled`
+     * map overrides the enabled flag for the named skills with on-disk truth
+     * (readSkillToggle) — the toggle path passes it so a stale in-memory summary
+     * or a failed write never leaves a lying row.
+     */
+    refreshSkillsList(diskEnabled) {
+        const view = this.skillsView;
+        if (view === undefined)
+            return;
+        const skills = this.ctx.get('skills');
+        if (skills === undefined) {
+            // Skills service absent — the category degrades to a distinct notice
+            // (vs. an empty list, which means "no user skills").
+            view.setStatus('Skills are not available in this environment.');
+            return;
+        }
+        const cwd = this.agent?.session.header.cwd ?? process.cwd();
+        void skills
+            .list({ scope: this.agent, cwd })
+            .then(listed => {
+            // The category may have closed or re-opened while discovery ran.
+            if (this.skillsView !== view)
+                return;
+            if (listed.length === 0) {
+                view.setStatus('No user-invocable skills available.');
+            }
+            else {
+                view.setRows(this.buildSkillRows(listed, diskEnabled));
+            }
+        })
+            .catch(() => {
+            if (this.skillsView !== view)
+                return;
+            view.setStatus('No user-invocable skills available.');
+        });
+    }
+    buildSkillRows(listed, diskEnabled) {
+        return listed.map(skill => ({
+            name: skill.name,
+            description: clipToWidth(skill.description, SettingsBrowser.SKILL_DESC_MAX),
+            // On-disk truth (readSkillToggle) wins over the in-memory summary when
+            // present, so the toggle reflects the file even before the watcher.
+            enabled: diskEnabled?.has(skill.name)
+                ? diskEnabled.get(skill.name)
+                : skillEnabled(skill),
+        }));
+    }
+    /** The on-disk enabled flag for one skill, as a name→value disk-truth map. */
+    diskToggleOverride(path, name) {
+        const toggle = readSkillToggle(path);
+        if (toggle === undefined)
+            return undefined;
+        return new Map([[name, skillToggleEnabled(toggle)]]);
+    }
+    /** Toggle one user skill by editing its SKILL.md frontmatter. */
+    async toggleSkill(name, enable) {
+        const skills = this.ctx.get('skills');
+        if (skills === undefined)
+            return;
+        const cwd = this.agent?.session.header.cwd ?? process.cwd();
+        let path;
+        try {
+            const skill = await skills.get(name, { scope: this.agent, cwd });
+            if (skill === undefined) {
+                this.onError(`Skill "${name}" is no longer available.`);
+                this.refreshSkillsList();
+                return;
+            }
+            path = skill.path;
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            this.onError(message);
+            this.refreshSkillsList();
+            return;
+        }
+        if (path === undefined) {
+            // A non-local (runtime-registered) skill has no file to edit.
+            this.onError(`Skill "${name}" is not a local file and cannot be toggled.`);
+            this.refreshSkillsList();
+            return;
+        }
+        const error = applySkillFrontmatter(path, enable ? skillEnableUpdates() : skillDisableUpdates());
+        // Read the file's actual toggle state as the row's disk truth: a failed
+        // write (or a watcher/summary lag) must not leave a lying on-screen value.
+        const diskOverride = this.diskToggleOverride(path, name);
+        if (error !== undefined) {
+            this.onError(error);
+            // Re-sync the row to the on-disk truth (the cycle already flipped the
+            // displayed value before the write was attempted).
+            this.refreshSkillsList(diskOverride);
+            return;
+        }
+        // The skill-filesystem watcher rescans the file (no restart needed);
+        // refetch the list so the on-screen rows show the new state.
+        this.refreshSkillsList(diskOverride);
+    }
     /** Value column of the Default model row: provider/model · think level. */
     defaultModelSummary(desc) {
         const value = desc.value;