claude-agent-skills 1.3.4 → 1.3.6

package/lib/picker.js

@@ -0,0 +1,172 @@
+/**
+ * Custom skill picker — grid layout, full description panel for focused skill.
+ * Navigation: ↑↓←→  space=toggle  a=all  enter=confirm  esc=back
+ */
+import ansis from 'ansis';
+import { skillColor, white, muted, success, brand, warn } from './theme.js';
+
+const KEY = {
+  UP:     '\x1b[A',
+  DOWN:   '\x1b[B',
+  RIGHT:  '\x1b[C',
+  LEFT:   '\x1b[D',
+  SPACE:  ' ',
+  ENTER:  '\r',
+  CTRL_C: '\x03',
+  ESC:    '\x1b',
+};
+
+function wordWrap(text, width) {
+  const words = text.split(' ');
+  const lines = [];
+  let cur = '';
+  for (const w of words) {
+    if (cur && cur.length + 1 + w.length > width) { lines.push(cur); cur = w; }
+    else cur = cur ? `${cur} ${w}` : w;
+  }
+  if (cur) lines.push(cur);
+  return lines;
+}
+
+export async function skillPicker({ message, options }) {
+  const termW = process.stdout.columns || 100;
+  const termH = process.stdout.rows    || 40;
+
+  // Grid dimensions
+  const maxName = Math.max(...options.map(o => o.label.length));
+  const colW    = maxName + 6;                             // □ name + padding
+  const numCols = Math.max(1, Math.floor((termW - 2) / colW));
+  const numRows = Math.ceil(options.length / numCols);
+
+  // Fixed layout heights
+  const HEADER   = 2;
+  const GRID_H   = numRows;
+  const SEP      = 1;
+  const DESC_H   = Math.max(4, Math.min(8, termH - HEADER - GRID_H - SEP - 3));
+  const FOOTER   = 1;
+  const TOTAL    = HEADER + GRID_H + SEP + DESC_H + FOOTER;
+
+  let cursor = 0;
+  const sel  = new Set();
+  let lastLines = 0;
+
+  function clamp(c) {
+    return Math.max(0, Math.min(options.length - 1, c));
+  }
+
+  function renderGrid() {
+    const lines = [];
+
+    // Header
+    lines.push(brand('◆') + '  ' + ansis.bold(white(message)) +
+      muted('  ↑↓←→ navigate · space toggle · a=all · enter confirm · esc back'));
+    lines.push(muted('│'));
+
+    // Grid rows
+    for (let r = 0; r < numRows; r++) {
+      let row = muted('│') + ' ';
+      for (let c = 0; c < numCols; c++) {
+        const idx = r * numCols + c;
+        if (idx >= options.length) break;
+        const opt     = options[idx];
+        const focused = idx === cursor;
+        const checked = sel.has(idx);
+        const box     = checked ? success('■') : muted('□');
+        const arrow   = focused ? brand('▶') : ' ';
+        const label   = focused
+          ? ansis.bold(skillColor(idx)(opt.label))
+          : skillColor(idx)(opt.label);
+        const cell = `${arrow}${box} ${label}`;
+        // Pad to colW (accounting for invisible ANSI chars: pad by name length, not cell length)
+        const visLen   = 3 + opt.label.length;           // arrow(1) + box(1) + space(1) + name
+        const pad      = Math.max(0, colW - visLen);
+        row += cell + ' '.repeat(pad);
+      }
+      lines.push(row);
+    }
+
+    // Separator + description
+    lines.push(muted('├' + '─'.repeat(Math.min(termW - 2, 78)) + '┤'));
+
+    const focused = options[cursor];
+    const desc    = focused?.description ?? '';
+    const wrapped = desc ? wordWrap(desc, termW - 6) : [];
+    for (let i = 0; i < DESC_H; i++) {
+      const line = wrapped[i] ?? '';
+      lines.push(muted('│ ') + white(line));
+    }
+
+    // Footer
+    const selCount = sel.size;
+    lines.push(
+      '  ' + (selCount > 0 ? success(`${selCount} selected`) : muted('0 selected')) +
+      muted(`  ·  ${cursor + 1} of ${options.length}`)
+    );
+
+    return lines;
+  }
+
+  function draw() {
+    const lines = renderGrid();
+    // Go up by however many lines we drew last time
+    if (lastLines > 0) {
+      process.stdout.write(`\x1b[${lastLines}A`);
+    }
+    for (const line of lines) {
+      process.stdout.write('\x1b[2K' + line + '\n');
+    }
+    lastLines = lines.length;
+  }
+
+  // Initial draw
+  draw();
+
+  return new Promise((resolve, reject) => {
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.setEncoding('utf8');
+
+    function cleanup() {
+      process.stdin.setRawMode(false);
+      process.stdin.pause();
+      process.stdin.removeAllListeners('data');
+    }
+
+    function cancel() {
+      cleanup();
+      reject(Object.assign(new Error('cancel'), { isCancel: true }));
+    }
+
+    process.stdin.on('data', key => {
+      const row = Math.floor(cursor / numCols);
+      const col = cursor % numCols;
+
+      if (key === KEY.CTRL_C) { cleanup(); process.exit(0); }
+      if (key === KEY.ESC)    { cancel(); return; }
+
+      if (key === KEY.UP)    cursor = clamp((row - 1) * numCols + col);
+      if (key === KEY.DOWN)  cursor = clamp((row + 1) * numCols + col);
+      if (key === KEY.LEFT)  cursor = clamp(cursor - 1);
+      if (key === KEY.RIGHT) cursor = clamp(cursor + 1);
+
+      if (key === KEY.SPACE) {
+        sel.has(cursor) ? sel.delete(cursor) : sel.add(cursor);
+      }
+      if (key === 'a' || key === 'A') {
+        sel.size === options.length
+          ? sel.clear()
+          : options.forEach((_, i) => sel.add(i));
+      }
+      if (key === KEY.ENTER) {
+        if (!sel.size) return;
+        cleanup();
+        process.stdout.write('\x1b[2K' + success('◆') + '  ' +
+          white(`${sel.size} skill(s) selected`) + '\n');
+        resolve([...sel].sort((a, b) => a - b).map(i => options[i].value));
+        return;
+      }
+
+      draw();
+    });
+  });
+}

package/lib/prompts.js

@@ -1,6 +1,7 @@
-import { select, multiselect, confirm, isCancel } from '@clack/prompts';
+import { select, confirm, isCancel } from '@clack/prompts';
 import ansis from 'ansis';
 import { skillColor, white, muted, divider } from './theme.js';
+import { skillPicker } from './picker.js';
 
 export class CliCancel extends Error {}
 
@@ -28,23 +29,17 @@ export async function pickSkills(names, flags = {}, descriptions = {}) {
   if (flags.all) return names;
   if (flags.skill?.length) return flags.skill;
 
-  // Hard cap so descriptions never wrap — single line always fits ≥80 col terminals.
-  // prefix(4) + name(32) + divider(3) + desc(45) = 84 chars total.
-  const DESC_MAX = 45;
-  function fitDesc(s) {
-    if (!s) return '';
-    return s.length <= DESC_MAX ? s : s.slice(0, DESC_MAX - 1) + '…';
+  try {
+    const result = await skillPicker({
+      message: 'Select skills',
+      options: names.map(n => ({ value: n, label: n, description: descriptions[n] || '' })),
+    });
+    if (result === null) throw new CliCancel();
+    return result;
+  } catch (e) {
+    if (e?.isCancel) throw new CliCancel();
+    throw e;
   }
-
-  return guard(await multiselect({
-    message: 'Select skills  (space to toggle, a for all, enter to confirm)',
-    options: names.map((n, i) => {
-      const name = skillColor(i)(ansis.bold(n.padEnd(32)));
-      const desc = descriptions[n] ? white(fitDesc(descriptions[n])) : '';
-      return { value: n, label: name + divider + desc };
-    }),
-    required: true,
-  }));
 }
 
 export async function pickLinkType(flags = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-agent-skills",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "Install and manage Pavi's Claude Code agent skills",
   "license": "MIT",
   "type": "module",

package/skills.json

@@ -1,7 +1,7 @@
 {
   "schema_version": 1,
   "name": "claude-agent-skills",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "skills": [
     "ask-matt",
     "brainstorming",