spirewise 1.9.0 → 1.9.1

package/bin/cli.js

@@ -211,29 +211,21 @@ function removeFromAgent(agentKey, agent, scope, skills, onItem) {
   return removed;
 }
 
-// Clean single-line horizontal stepper (like a React UI-library Steps component):
-// completed steps show a check, the active step is a filled, highlighted circle,
-// upcoming steps are dim outline circles — joined by thin connectors.
-const STEP_FILLED  = ['', '❶', '❷', '❸', '❹', '❺', '❻'];
-const STEP_OUTLINE = ['', '①', '②', '③', '④', '⑤', '⑥'];
-function stepper(current, steps) {
-  const parts = steps.map((label, i) => {
-    const n = i + 1;
-    if (n < current) return `${paint(RAW.green, '✓')} ${paint(RAW.dim, label)}`;          // done
-    if (n === current) return `${paint(RAW.cyan, STEP_FILLED[n])} ${paint(RAW.bold, label)}`; // active
-    return paint(RAW.dim, `${STEP_OUTLINE[n]} ${label}`);                                  // upcoming
-  });
-  return ['  ' + parts.join(paint(RAW.dim, '  ──  '))];
-}
+// Clack/Appwrite-style prompt frame: a continuous left rail (│) connects every
+// step; each step is introduced by ◇  #NN - Title, options sit under the rail, and
+// finished steps persist as a compact transcript line. ◆ opens the flow, └ closes it.
+const G = { bar: '│', step: '◇', open: '◆', close: '└', done: '◇' };
+const rail   = () => paint(RAW.cyan, G.bar);
+const railLn = (s = '') => (s ? `${paint(RAW.cyan, G.bar)}  ${s}` : paint(RAW.cyan, G.bar));
 
 // Single, in-place updating status line (collapses the install/remove progress
 // so the whole "done process" lives on one line instead of streaming many rows).
 const IS_TTY = !!process.stdout.isTTY;
-const live = (s) => { if (IS_TTY) process.stdout.write('\r\x1b[2K  ' + s); };
-const liveEnd = (s) => { if (IS_TTY) process.stdout.write('\r\x1b[2K  ' + s + '\n'); else console.log('  ' + s); };
+const live = (s) => { if (IS_TTY) process.stdout.write('\r\x1b[2K' + s); };
+const liveEnd = (s) => { if (IS_TTY) process.stdout.write('\r\x1b[2K' + s + '\n'); else console.log(s); };
 
-// --- Interactive full-width selector ---------------------------------------
-function interactiveSelect({ title, subtitle, items, multi = true, preselected = [], pageSize = 5, step, steps }) {
+// --- Interactive prompt (Clack / Appwrite style) ---------------------------
+function interactiveSelect({ title, subtitle, items, multi = true, preselected = [], pageSize = 6, step = 1 }) {
   return new Promise((resolve) => {
     const stdin = process.stdin, stdout = process.stdout;
     if (!stdin.isTTY) { resolve(null); return; }
@@ -243,18 +235,10 @@ function interactiveSelect({ title, subtitle, items, multi = true, preselected =
     if (multi) items.forEach((it, i) => { if (preselected.includes(it.value)) selected.add(i); });
     else { const pi = items.findIndex((it) => preselected.includes(it.value)); if (pi >= 0) index = pi; }
 
-    const cols = () => stdout.columns || 80;
+    const num = '#' + String(step).padStart(2, '0');
     let lastLines = 0;
 
-    const bar = (text) => {
-      const w = cols(), label = ` ${text} `;
-      const side = Math.max(0, w - label.length), left = Math.floor(side / 2);
-      return paint(RAW.cyan, '═'.repeat(left) + label + '═'.repeat(side - left));
-    };
-
-    function render() {
-      // Windowed viewport: show at most `pageSize` rows and keep the cursor
-      // centered so long lists (e.g. skills) scroll smoothly with up/down.
+    function frame() {
       const PAGE = Math.min(pageSize, items.length);
       const half = Math.floor(PAGE / 2);
       let start = index - half;
@@ -262,60 +246,75 @@ function interactiveSelect({ title, subtitle, items, multi = true, preselected =
       if (start > items.length - PAGE) start = items.length - PAGE;
       const end = start + PAGE;
 
-      const head = (step && steps) ? stepper(step, steps) : [bar(title)];
-      const lines = ['', ...head, ''];
-      if (subtitle) lines.push(paint(RAW.dim, '  ' + subtitle));
-      if (items.length > PAGE) {
-        const above = start > 0 ? '▲ more' : '      ';
-        lines.push(paint(RAW.dim, `  ${above}   ${index + 1}/${items.length}`));
-      }
-      lines.push('');
+      const nav = multi
+        ? '↑/↓ move   space select   a all   enter confirm'
+        : '↑/↓ move   enter confirm';
+
+      const lines = [];
+      lines.push(rail());
+      lines.push(`${paint(RAW.cyan, G.step)}  ${paint(RAW.bold, `${num} - ${title}`)}`);
+      if (subtitle) lines.push(railLn(paint(RAW.dim, subtitle)));
+      lines.push(railLn(paint(RAW.dim, nav)));
+      if (items.length > PAGE) lines.push(railLn(paint(RAW.dim, start > 0 ? '↑ more' : ' ')));
       for (let i = start; i < end; i++) {
         const it = items[i];
-        const cur = i === index ? paint(RAW.cyan, '❯') : ' ';
-        const mark = multi ? (selected.has(i) ? paint(RAW.green, '◉') : paint(RAW.dim, '◯'))
-                           : (i === index ? paint(RAW.green, '◉') : paint(RAW.dim, '◯'));
-        const label = i === index ? paint(RAW.bold, it.label) : it.label;
+        const on = i === index;
+        const ptr = on ? paint(RAW.cyan, '❯') : ' ';
+        const mark = multi
+          ? (selected.has(i) ? paint(RAW.green, '◉') : paint(RAW.dim, '○'))
+          : (on ? paint(RAW.cyan, '●') : paint(RAW.dim, '○'));
+        const label = on ? paint(RAW.bold, it.label) : it.label;
         const hint = it.hint ? paint(RAW.dim, '  ' + it.hint) : '';
-        lines.push(`   ${cur} ${mark}  ${label}${hint}`);
+        lines.push(`${rail()}  ${ptr} ${mark} ${label}${hint}`);
       }
-      if (items.length > PAGE) {
-        lines.push(paint(RAW.dim, `  ${end < items.length ? '▼ more' : '      '}`));
-      }
-      lines.push('');
-      lines.push(paint(RAW.dim, '  ' + (multi
-        ? '↑/↓ move · space toggle · a all/none · enter confirm · esc cancel'
-        : '↑/↓ move · enter confirm · esc cancel')));
+      if (items.length > PAGE) lines.push(railLn(paint(RAW.dim, `${end < items.length ? '↓ more' : ' '}   ${index + 1}/${items.length}`)));
+      lines.push(rail());
+
       if (lastLines > 0) stdout.write(`\x1b[${lastLines}A`);
       stdout.write('\x1b[0J' + lines.join('\n') + '\n');
       lastLines = lines.length;
     }
 
+    // Replace the live frame with a compact, persisted transcript line.
+    function persist() {
+      const summary = multi
+        ? (() => { const l = items.filter((_, i) => selected.has(i)).map((it) => it.label);
+                   return l.length === 0 ? paint(RAW.dim, 'none') : l.length > 3 ? `${l.length} selected` : l.join(', '); })()
+        : items[index].label;
+      const out = [
+        `${paint(RAW.green, G.done)}  ${paint(RAW.bold, `${num} - ${title}`)}`,
+        railLn(paint(RAW.cyan, summary)),
+      ];
+      if (lastLines > 0) stdout.write(`\x1b[${lastLines}A`);
+      stdout.write('\x1b[0J' + out.join('\n') + '\n');
+      lastLines = 0;
+    }
+
     function cleanup() {
       try { stdin.setRawMode(false); } catch (_) {}
       stdin.pause();
       stdin.removeListener('data', onData);
     }
-    const finish = (r) => { cleanup(); resolve(r); };
 
     function onData(s) {
-      if (s === '\x03' || s === '\x1b' || s === 'q') return finish(null);          // ctrl-c / esc / q
+      if (s === '\x03' || s === '\x1b' || s === 'q') { cleanup(); return resolve(null); }   // ctrl-c / esc / q
       if (s === '\r' || s === '\n') {
-        return finish(multi ? items.filter((_, i) => selected.has(i)).map((it) => it.value) : items[index].value);
+        const val = multi ? items.filter((_, i) => selected.has(i)).map((it) => it.value) : items[index].value;
+        persist(); cleanup(); return resolve(val);
       }
-      if (s === '\x1b[A' || s === 'k') { index = (index - 1 + items.length) % items.length; return render(); }
-      if (s === '\x1b[B' || s === 'j') { index = (index + 1) % items.length; return render(); }
-      if (multi && s === ' ') { selected.has(index) ? selected.delete(index) : selected.add(index); return render(); }
+      if (s === '\x1b[A' || s === 'k') { index = (index - 1 + items.length) % items.length; return frame(); }
+      if (s === '\x1b[B' || s === 'j') { index = (index + 1) % items.length; return frame(); }
+      if (multi && s === ' ') { selected.has(index) ? selected.delete(index) : selected.add(index); return frame(); }
       if (multi && (s === 'a' || s === 'A')) {
         if (selected.size === items.length) selected.clear(); else items.forEach((_, i) => selected.add(i));
-        return render();
+        return frame();
       }
-      if (!multi && s === ' ') return finish(items[index].value);
+      if (!multi && s === ' ') { const val = items[index].value; persist(); cleanup(); return resolve(val); }
     }
 
     stdin.setRawMode(true); stdin.resume(); stdin.setEncoding('utf8');
     stdin.on('data', onData);
-    render();
+    frame();
   });
 }
 
@@ -406,6 +405,16 @@ async function main() {
   const Ving = action === 'remove' ? 'Removing' : 'Installing';
   banner();
 
+  // Clack-style flow frame: opens with ◆, each step hangs off the │ rail, and the
+  // run closes with └. Only drawn when we actually show interactive steps.
+  let framed = false;
+  const ensureIntro = () => {
+    if (framed || !tty) return;
+    framed = true;
+    console.log('');
+    console.log(`${paint(RAW.cyan, G.open)}  ${paint(RAW.bold, action === 'remove' ? 'Remove skills' : 'Install skills')}`);
+  };
+
   // 1) SKILLS
   let skills = o.skills;
   if (skills) {
@@ -415,9 +424,9 @@ async function main() {
       return id;
     });
   } else if (tty) {
+    ensureIntro();
     skills = await interactiveSelect({
-      title: `Skills`,
-      step: 1, steps: ['Skills', 'Tools', 'Where'],
+      title: 'Choose Skills', step: 1,
       subtitle: action === 'remove' ? 'Pick the skills to remove.' : 'Pick the skills you want.',
       items: available.map((s) => ({ value: s, label: s, hint: skillHint(s) })),
       multi: true, preselected: [],
@@ -431,11 +440,11 @@ async function main() {
   if (agentKeys) {
     for (const k of agentKeys) if (!AGENTS[k]) die(`Unknown agent '${k}'. Run "spirewise agents".`);
   } else if (tty) {
+    ensureIntro();
     agentKeys = await interactiveSelect({
-      title: `Tools`,
-      step: 2, steps: ['Skills', 'Tools', 'Where'],
+      title: 'Choose Tools', step: 2,
       subtitle: action === 'remove' ? 'Pick which tools to remove them from.' : 'Pick which tools to add them to.',
-      items: Object.entries(AGENTS).map(([k, a]) => ({ value: k, label: a.label, hint: `(${k}) · ${a.format}` })),
+      items: Object.entries(AGENTS).map(([k, a]) => ({ value: k, label: a.label, hint: `(${k})` })),
       multi: true, preselected: [],
     });
     if (agentKeys === null) die('Cancelled.');
@@ -445,9 +454,9 @@ async function main() {
   // 3) SCOPE
   let scope = o.scope;
   if (!scope && tty) {
+    ensureIntro();
     scope = await interactiveSelect({
-      title: 'Where',
-      step: 3, steps: ['Skills', 'Tools', 'Where'],
+      title: 'Choose Where', step: 3,
       subtitle: action === 'remove' ? 'Where to remove them from?' : 'Where should they go?',
       items: [
         { value: 'project', label: 'This project', hint: 'just this folder' },
@@ -462,34 +471,30 @@ async function main() {
   const scopes = scope === 'both' ? ['project', 'global'] : [scope];
 
   // ACTION
-  console.log('');
+  if (framed) console.log(railLn());
 
   const pl = (n, w) => `${n} ${w}${n === 1 ? '' : 's'}`;
   const where = { project: 'this project', global: 'everywhere', both: 'this project + everywhere' }[scope];
+  const lead = framed ? `${rail()}  ` : '  ';   // hang progress/result off the rail
+  const end = framed ? `${paint(RAW.cyan, G.close)}  ` : '  ';
 
   let count = 0;
   const totalOps = scopes.length * agentKeys.length * skills.length;
   let seen = 0;
-  const progress = (agent, skill) => {
+  const progress = (agent) => {
     seen++;
-    live(`${paint(RAW.cyan, '⟳')} ${Ving}…  ${paint(RAW.bold, `${seen}/${totalOps}`)}  ${c.dim}${agent.label}${c.reset}`);
+    live(`${lead}${paint(RAW.cyan, '⟳')} ${Ving}…  ${paint(RAW.bold, `${seen}/${totalOps}`)}  ${c.dim}${agent.label}${c.reset}`);
   };
   for (const sc of scopes) for (const k of agentKeys) {
     if (action === 'remove') count += removeFromAgent(k, AGENTS[k], sc, skills, progress);
     else { installToAgent(k, AGENTS[k], sc, skills, progress); count += skills.length; }
   }
-  // Collapse the whole done process into one final line.
+  // Collapse the whole done process into one final line (the └ that closes the flow).
   if (action === 'remove') {
-    liveEnd(`${count === 0 ? paint(RAW.yellow, '·') : paint(RAW.green, '✓')} Removed ${paint(RAW.bold, pl(count, 'skill'))} from ${pl(agentKeys.length, 'tool')} ${c.dim}(${where})${c.reset}`);
+    liveEnd(`${end}${count === 0 ? paint(RAW.yellow, 'Nothing to remove — already clean') : `${paint(RAW.green, '✓')} Removed ${paint(RAW.bold, pl(count, 'skill'))} from ${pl(agentKeys.length, 'tool')} ${c.dim}(${where})${c.reset}`}`);
   } else {
-    liveEnd(`${paint(RAW.green, '✓')} Added ${paint(RAW.bold, pl(skills.length, 'skill'))} to ${pl(agentKeys.length, 'tool')} ${c.dim}(${where})${c.reset}`);
-  }
-
-  if (action === 'remove') {
-    if (count === 0) liveEnd(paint(RAW.dim, '  nothing to remove — already clean'));
-  } else {
-    console.log('');
-    info(`Done. Open your tool and ask it to use a skill.`);
+    liveEnd(`${end}${paint(RAW.green, '✓')} Added ${paint(RAW.bold, pl(skills.length, 'skill'))} to ${pl(agentKeys.length, 'tool')} ${c.dim}(${where})${c.reset}`);
+    console.log(`${'  '}${c.dim}Open your tool and ask it to use a skill.${c.reset}`);
   }
   console.log('');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spirewise",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "Installable Agent Skills for GitHub Copilot, Claude Code, and Cursor — copywriting (F6S & LinkedIn) and NVIDIA Inception tooling.",
   "bin": {
     "spirewise": "bin/cli.js"