skillops-cli 1.3.6 → 1.3.8

package/dist/cli.js

@@ -10,7 +10,7 @@ import YAML6 from "yaml";
 import fs from "fs";
 import YAML from "yaml";
 import { z } from "zod";
-var SKILLOPS_VERSION = "1.3.6";
+var SKILLOPS_VERSION = "1.3.8";
 var SKILL_NAME_REGEX = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 var SEMVER_REGEX = /^\d+\.\d+\.\d+$/;
 var FRONTMATTER_REGEX = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/;
@@ -1426,9 +1426,104 @@ import fs3 from "fs";
 import path2 from "path";
 import YAML2 from "yaml";
 
-// src/ui/terminal.ts
+// src/ui/lipgloss.ts
 var ESC = String.fromCharCode(27);
-var ANSI_ESCAPE_REGEX = new RegExp(`${ESC}\\[[0-9;]*m`, "g");
+var CHARM_PALETTE = {
+  indigo: "#7D56F4",
+  fuchsia: "#EE6FF8",
+  hotPink: "#F25D94",
+  mint: "#04B575",
+  amber: "#FFBD2E",
+  coral: "#FF5F56",
+  cyan: "#00D7FF",
+  lavender: "#B4A7D6",
+  white: "#FAFAFA",
+  muted: "#6C6C6C",
+  subtle: "#4A4A4A",
+  surface: "#2A2438",
+  keycapBg: "#302B3F"
+};
+function hexToRgb(hex) {
+  const cleaned = hex.trim().replace(/^#/, "");
+  if (cleaned.length === 3) {
+    const r2 = Number.parseInt(`${cleaned[0]}${cleaned[0]}`, 16);
+    const g2 = Number.parseInt(`${cleaned[1]}${cleaned[1]}`, 16);
+    const b2 = Number.parseInt(`${cleaned[2]}${cleaned[2]}`, 16);
+    return [
+      Number.isNaN(r2) ? 255 : r2,
+      Number.isNaN(g2) ? 255 : g2,
+      Number.isNaN(b2) ? 255 : b2
+    ];
+  }
+  const r = Number.parseInt(cleaned.slice(0, 2), 16);
+  const g = Number.parseInt(cleaned.slice(2, 4), 16);
+  const b = Number.parseInt(cleaned.slice(4, 6), 16);
+  return [
+    Number.isNaN(r) ? 255 : r,
+    Number.isNaN(g) ? 255 : g,
+    Number.isNaN(b) ? 255 : b
+  ];
+}
+function fgHex(hex, text, enabled) {
+  const useColor = enabled ?? isColorEnabled();
+  if (!useColor || text.length === 0) {
+    return text;
+  }
+  const [r, g, b] = hexToRgb(hex);
+  return `${ESC}[38;2;${r};${g};${b}m${text}${ESC}[39m`;
+}
+function bgHex(hex, text, enabled) {
+  const useColor = enabled ?? isColorEnabled();
+  if (!useColor || text.length === 0) {
+    return text;
+  }
+  const [r, g, b] = hexToRgb(hex);
+  return `${ESC}[48;2;${r};${g};${b}m${text}${ESC}[49m`;
+}
+function renderPill(text, options) {
+  const useColor = options?.colorEnabled ?? isColorEnabled();
+  if (!useColor || text.length === 0) {
+    return text;
+  }
+  const fg = options?.fg ?? CHARM_PALETTE.white;
+  const bg = options?.bg ?? CHARM_PALETTE.indigo;
+  const bold = options?.bold ?? true;
+  let styled = fgHex(fg, text, true);
+  styled = bgHex(bg, styled, true);
+  if (bold) {
+    styled = `${ESC}[1m${styled}${ESC}[22m`;
+  }
+  return styled;
+}
+function renderKeycap(keyLabel, actionLabel, colorEnabled) {
+  const useColor = colorEnabled ?? isColorEnabled();
+  if (!useColor) {
+    return `${keyLabel} ${actionLabel}`;
+  }
+  const keyStyled = `${ESC}[1m${fgHex(CHARM_PALETTE.lavender, keyLabel, true)}${ESC}[22m`;
+  const actionStyled = fgHex(CHARM_PALETTE.muted, actionLabel, true);
+  return `${keyStyled} ${actionStyled}`;
+}
+function renderPaginationDots(currentPage, totalPages, colorEnabled) {
+  const safeTotal = Math.max(1, Math.min(12, totalPages));
+  const safeCurrent = Math.max(0, Math.min(safeTotal - 1, currentPage));
+  const useColor = colorEnabled ?? isColorEnabled();
+  const dots = [];
+  for (let i = 0; i < safeTotal; i++) {
+    if (i === safeCurrent) {
+      dots.push(
+        useColor ? `${ESC}[1m${fgHex(CHARM_PALETTE.hotPink, "\u2022", true)}${ESC}[22m` : "\u2022"
+      );
+    } else {
+      dots.push(useColor ? fgHex(CHARM_PALETTE.muted, "\u25E6", true) : "\u25E6");
+    }
+  }
+  return dots.join(" ");
+}
+
+// src/ui/terminal.ts
+var ESC2 = String.fromCharCode(27);
+var ANSI_ESCAPE_REGEX = new RegExp(`${ESC2}\\[[0-9;]*m`, "g");
 function isColorEnabled(options) {
   const env = options?.env ?? process.env;
   const isTTY = options?.isTTY ?? Boolean(process.stdout?.isTTY);
@@ -1454,21 +1549,21 @@ function wrapAnsi(openCode, closeCode, text, enabled) {
   if (!useColor || text.length === 0) {
     return text;
   }
-  return `${ESC}[${openCode}m${text}${ESC}[${closeCode}m`;
+  return `${ESC2}[${openCode}m${text}${ESC2}[${closeCode}m`;
 }
 var style = {
   bold: (text, enabled) => wrapAnsi("1", "22", text, enabled),
   dim: (text, enabled) => wrapAnsi("2", "22", text, enabled),
   italic: (text, enabled) => wrapAnsi("3", "23", text, enabled),
   underline: (text, enabled) => wrapAnsi("4", "24", text, enabled),
-  cyan: (text, enabled) => wrapAnsi("36", "39", text, enabled),
-  green: (text, enabled) => wrapAnsi("32", "39", text, enabled),
-  yellow: (text, enabled) => wrapAnsi("33", "39", text, enabled),
-  red: (text, enabled) => wrapAnsi("31", "39", text, enabled),
-  magenta: (text, enabled) => wrapAnsi("35", "39", text, enabled),
-  blue: (text, enabled) => wrapAnsi("34", "39", text, enabled),
-  gray: (text, enabled) => wrapAnsi("90", "39", text, enabled),
-  white: (text, enabled) => wrapAnsi("37", "39", text, enabled)
+  cyan: (text, enabled) => fgHex(CHARM_PALETTE.cyan, text, enabled),
+  green: (text, enabled) => fgHex(CHARM_PALETTE.mint, text, enabled),
+  yellow: (text, enabled) => fgHex(CHARM_PALETTE.amber, text, enabled),
+  red: (text, enabled) => fgHex(CHARM_PALETTE.coral, text, enabled),
+  magenta: (text, enabled) => fgHex(CHARM_PALETTE.fuchsia, text, enabled),
+  blue: (text, enabled) => fgHex(CHARM_PALETTE.indigo, text, enabled),
+  gray: (text, enabled) => fgHex(CHARM_PALETTE.muted, text, enabled),
+  white: (text, enabled) => fgHex(CHARM_PALETTE.white, text, enabled)
 };
 function stripAnsi(text) {
   return text.replace(ANSI_ESCAPE_REGEX, "");
@@ -1495,7 +1590,13 @@ function padVisible(text, width, align = "left") {
 function renderHeaderBanner(subtitle = "Framework & Library for AI Skills & Subagents", options) {
   const ver = options?.version ?? SKILLOPS_VERSION;
   const c = options?.colorEnabled;
-  return `${style.bold(style.cyan(`\u25C6 SkillOps v${ver}`, c), c)} ${style.dim("\u2014", c)} ${subtitle}`;
+  const brandPill = renderPill(`\u25C6 SkillOps v${ver}`, {
+    fg: CHARM_PALETTE.white,
+    bg: CHARM_PALETTE.indigo,
+    bold: true,
+    colorEnabled: c
+  });
+  return `${brandPill} ${style.dim("\u2014", c)} ${fgHex(CHARM_PALETTE.lavender, subtitle, c)}`;
 }
 function renderTable(headers, rows, options) {
   const indent = " ".repeat(options?.indent ?? 2);
@@ -1572,15 +1673,19 @@ function formatBadge(type, customLabel, colorEnabled) {
         colorEnabled
       );
     case "skill":
-      return style.bold(
-        style.cyan(`[${customLabel ?? "SKILL"}]`, colorEnabled),
+      return renderPill(`[${customLabel ?? "SKILL"}]`, {
+        fg: CHARM_PALETTE.white,
+        bg: CHARM_PALETTE.indigo,
+        bold: true,
         colorEnabled
-      );
+      });
     case "subagent":
-      return style.bold(
-        style.magenta(`[${customLabel ?? "SUBAGENT"}]`, colorEnabled),
+      return renderPill(`[${customLabel ?? "SUBAGENT"}]`, {
+        fg: CHARM_PALETTE.white,
+        bg: CHARM_PALETTE.hotPink,
+        bold: true,
         colorEnabled
-      );
+      });
   }
 }
 function renderStep(step, total, title, detail, status = "done", colorEnabled) {
@@ -5412,6 +5517,9 @@ function optionMatchesQuery(opt, rawQuery) {
   if (!q) {
     return true;
   }
+  if (opt.isSelectAll) {
+    return false;
+  }
   return opt.label.toLowerCase().includes(q) || opt.value.toLowerCase().includes(q) || (opt.hint ?? "").toLowerCase().includes(q);
 }
 function getFilteredTabOptions(state, tab = state.activeTab) {
@@ -5419,16 +5527,47 @@ function getFilteredTabOptions(state, tab = state.activeTab) {
     (opt) => optionMatchesTab(opt, tab) && optionMatchesQuery(opt, state.searchQuery)
   );
 }
-function createMultiSelectState(options) {
+function createMultiSelectState(options, stateOptions = {}) {
+  let finalOptions = options;
+  if (stateOptions.showSelectAll && !options.some((opt) => opt.isSelectAll === true)) {
+    const skillItems = options.filter((opt) => optionMatchesTab(opt, "skill"));
+    const agentItems = options.filter((opt) => optionMatchesTab(opt, "agent"));
+    const withAll = [];
+    if (skillItems.length > 0) {
+      withAll.push({
+        value: "__all_skills__",
+        label: "[ALL] Select all Skills",
+        kind: "skill",
+        tab: "skill",
+        isSelectAll: true,
+        hint: `Select or deselect all ${skillItems.length} Skills in this tab`
+      });
+      withAll.push(...skillItems);
+    }
+    if (agentItems.length > 0) {
+      withAll.push({
+        value: "__all_agents__",
+        label: "[ALL] Select all Agents",
+        kind: "agent",
+        tab: "agent",
+        isSelectAll: true,
+        hint: `Select or deselect all ${agentItems.length} Agents in this tab`
+      });
+      withAll.push(...agentItems);
+    }
+    if (withAll.length > 0) {
+      finalOptions = withAll;
+    }
+  }
   const initial = /* @__PURE__ */ new Set();
-  for (const opt of options) {
-    if (opt.initialSelected) {
+  for (const opt of finalOptions) {
+    if (opt.initialSelected && !opt.isSelectAll) {
       initial.add(opt.value);
     }
   }
-  const hasSkills = options.some((opt) => optionMatchesTab(opt, "skill"));
+  const hasSkills = finalOptions.some((opt) => optionMatchesTab(opt, "skill"));
   return {
-    options,
+    options: finalOptions,
     activeTab: hasSkills ? "skill" : "agent",
     cursor: 0,
     selected: initial,
@@ -5518,6 +5657,29 @@ function applyMultiSelectKey(state, key, options = {}) {
     if (!currentOpt) {
       return state;
     }
+    if (currentOpt.isSelectAll) {
+      const realVisible = visible.filter((opt) => !opt.isSelectAll);
+      if (realVisible.length === 0) {
+        return state;
+      }
+      const allTabSelected = realVisible.every(
+        (opt) => state.selected.has(opt.value)
+      );
+      const nextSelected2 = new Set(state.selected);
+      if (allTabSelected) {
+        for (const opt of realVisible) {
+          nextSelected2.delete(opt.value);
+        }
+      } else {
+        for (const opt of realVisible) {
+          nextSelected2.add(opt.value);
+        }
+      }
+      return {
+        ...state,
+        selected: nextSelected2
+      };
+    }
     const nextSelected = new Set(state.selected);
     if (nextSelected.has(currentOpt.value)) {
       nextSelected.delete(currentOpt.value);
@@ -5581,19 +5743,20 @@ function applyMultiSelectKey(state, key, options = {}) {
     };
   }
   if (key === "a" || key === "A") {
-    if (visible.length === 0) {
+    const realVisible = visible.filter((opt) => !opt.isSelectAll);
+    if (realVisible.length === 0) {
       return state;
     }
-    const allTabSelected = visible.every(
+    const allTabSelected = realVisible.every(
       (opt) => state.selected.has(opt.value)
     );
     const nextSelected = new Set(state.selected);
     if (allTabSelected) {
-      for (const opt of visible) {
+      for (const opt of realVisible) {
         nextSelected.delete(opt.value);
       }
     } else {
-      for (const opt of visible) {
+      for (const opt of realVisible) {
         nextSelected.add(opt.value);
       }
     }
@@ -5608,41 +5771,69 @@ function renderMultiSelectFrame(title, state, options = {}) {
   const c = options.colorEnabled;
   const bar = style.dim("\u2502", c);
   const maxVisible = options.maxVisible ?? 10;
-  const totalSkills = state.options.filter(
+  const realOptions = state.options.filter((o) => !o.isSelectAll);
+  const totalSkills = realOptions.filter(
     (o) => optionMatchesTab(o, "skill")
   ).length;
-  const totalAgents = state.options.filter(
+  const totalAgents = realOptions.filter(
     (o) => optionMatchesTab(o, "agent")
   ).length;
   const filteredSkills = getFilteredTabOptions(state, "skill");
   const filteredAgents = getFilteredTabOptions(state, "agent");
+  const realFilteredSkills = filteredSkills.filter((o) => !o.isSelectAll);
+  const realFilteredAgents = filteredAgents.filter((o) => !o.isSelectAll);
   const visible = state.activeTab === "skill" ? filteredSkills : filteredAgents;
+  const realVisible = state.activeTab === "skill" ? realFilteredSkills : realFilteredAgents;
   const total = visible.length;
   const skillTabTitle = options.tabLabels?.skill ?? "Skills";
   const agentTabTitle = options.tabLabels?.agent ?? "Agents";
   const submitVerb = options.submitActionLabel ?? "import";
   const isSinglePage = totalAgents === 0 || totalSkills === 0;
-  const header = `${style.bold(style.cyan(`\u25C6 ${title}`, c), c)}`;
-  const tabHint = isSinglePage ? "" : " \xB7 \u2190/\u2192 tab";
-  const instructions = state.searchMode ? `${bar}  ${style.dim(`\u2191/\u2193 move${tabHint} \xB7 Space select \xB7 Esc clear \xB7 Enter ${submitVerb}`, c)}` : `${bar}  ${style.dim(`\u2191/\u2193 move${tabHint} \xB7 Space select \xB7 / search \xB7 a all \xB7 Enter ${submitVerb}`, c)}`;
+  const header = renderPill(`\u25C6 ${title}`, {
+    fg: CHARM_PALETTE.white,
+    bg: CHARM_PALETTE.indigo,
+    bold: true,
+    colorEnabled: c
+  });
+  const sep = style.dim(" \xB7 ", c);
+  const keyItems = [
+    renderKeycap("\u2191/\u2193", "move", c),
+    ...isSinglePage ? [] : [renderKeycap("\u2190/\u2192", "tab", c)],
+    renderKeycap("Space", "select", c),
+    ...state.searchMode ? [renderKeycap("Esc", "clear", c)] : [renderKeycap("/", "search", c), renderKeycap("a", "all", c)],
+    renderKeycap("Enter", submitVerb, c)
+  ];
+  const instructions = `${bar}  ${keyItems.join(sep)}`;
   const lines = [header];
   if (options.subtitle) {
-    lines.push(`${bar}  ${options.subtitle}`);
+    lines.push(`${bar}  ${fgHex(CHARM_PALETTE.lavender, options.subtitle, c)}`);
   }
   lines.push(instructions, bar);
   const hasQuery = state.searchQuery.length > 0;
-  const skillCountStr = hasQuery ? `${filteredSkills.length}/${totalSkills}` : `${totalSkills}`;
-  const agentCountStr = hasQuery ? `${filteredAgents.length}/${totalAgents}` : `${totalAgents}`;
-  const skillTabLabel = state.activeTab === "skill" ? style.bold(
-    style.cyan(`[ \u25C6 ${skillTabTitle} (${skillCountStr}) ]`, c),
-    c
-  ) : style.dim(`\u25CB ${skillTabTitle} (${skillCountStr})`, c);
-  const agentTabLabel = state.activeTab === "agent" ? style.bold(
-    style.magenta(`[ \u25C6 ${agentTabTitle} (${agentCountStr}) ]`, c),
-    c
-  ) : style.dim(`\u25CB ${agentTabTitle} (${agentCountStr})`, c);
+  const skillCountStr = hasQuery ? `${realFilteredSkills.length}/${totalSkills}` : `${totalSkills}`;
+  const agentCountStr = hasQuery ? `${realFilteredAgents.length}/${totalAgents}` : `${totalAgents}`;
+  const skillTabLabel = state.activeTab === "skill" ? renderPill(`[ \u25C6 ${skillTabTitle} (${skillCountStr}) ]`, {
+    fg: CHARM_PALETTE.white,
+    bg: CHARM_PALETTE.indigo,
+    bold: true,
+    colorEnabled: c
+  }) : style.dim(`\u25CB ${skillTabTitle} (${skillCountStr})`, c);
+  const agentTabLabel = state.activeTab === "agent" ? renderPill(`[ \u25C6 ${agentTabTitle} (${agentCountStr}) ]`, {
+    fg: CHARM_PALETTE.white,
+    bg: CHARM_PALETTE.hotPink,
+    bold: true,
+    colorEnabled: c
+  }) : style.dim(`\u25CB ${agentTabTitle} (${agentCountStr})`, c);
   const rawQuerySlice = state.searchQuery.length > 14 ? `\u2026${state.searchQuery.slice(-13)}` : state.searchQuery;
-  const searchSuffix = state.searchMode || hasQuery ? `   ${style.yellow(`/ Filter: ${rawQuerySlice}${state.searchMode ? "\u2588" : ""}`, c)}` : `   ${style.dim("(/ search)", c)}`;
+  const searchSuffix = state.searchMode || hasQuery ? `   ${renderPill(
+    `/ Filter: ${rawQuerySlice}${state.searchMode ? "\u2588" : ""}`,
+    {
+      fg: CHARM_PALETTE.amber,
+      bg: CHARM_PALETTE.surface,
+      bold: true,
+      colorEnabled: c
+    }
+  )}` : `   ${style.dim("(/ search)", c)}`;
   const singleTabLabel = totalSkills > 0 ? skillTabLabel : agentTabLabel;
   lines.push(
     isSinglePage ? `${style.dim("\u251C\u2500", c)} ${singleTabLabel}${searchSuffix}` : `${style.dim("\u251C\u2500", c)} ${skillTabLabel}   ${agentTabLabel}${searchSuffix}`,
@@ -5660,8 +5851,16 @@ function renderMultiSelectFrame(title, state, options = {}) {
       startIdx = Math.max(0, Math.min(state.cursor - half, total - maxVisible));
     }
     const endIdx = Math.min(total, startIdx + maxVisible);
+    const totalPages = Math.max(1, Math.ceil(total / maxVisible));
+    const currentPage = Math.min(
+      totalPages - 1,
+      Math.floor(state.cursor / maxVisible)
+    );
+    const pageDots = totalPages > 1 ? `  ${renderPaginationDots(currentPage, totalPages, c)}` : "";
     if (startIdx > 0) {
-      lines.push(`${bar}  ${style.dim(`\u2191 ${startIdx} more above...`, c)}`);
+      lines.push(
+        `${bar}  ${style.dim(`\u2191 ${startIdx} more above...`, c)}${endIdx >= total ? pageDots : ""}`
+      );
     }
     const maxLabelCols = Math.min(
       26,
@@ -5671,30 +5870,32 @@ function renderMultiSelectFrame(title, state, options = {}) {
       const opt = visible[i];
       if (!opt) continue;
       const isCurrent = i === state.cursor;
-      const isChecked = state.selected.has(opt.value);
-      const pointer = isCurrent ? style.cyan("\u276F", c) : " ";
-      const checkbox = isChecked ? style.green("\u25C9", c) : style.dim("\u25EF", c);
+      const allRealSelected = realVisible.length > 0 && realVisible.every((o) => state.selected.has(o.value));
+      const someRealSelected = realVisible.some((o) => state.selected.has(o.value)) && !allRealSelected;
+      const isChecked = opt.isSelectAll ? allRealSelected : state.selected.has(opt.value);
+      const pointer = isCurrent ? fgHex(CHARM_PALETTE.hotPink, style.bold("\u276F", c), c) : " ";
+      const checkbox = isChecked ? style.green("\u25C9", c) : opt.isSelectAll && someRealSelected ? fgHex(CHARM_PALETTE.fuchsia, "\u25D0", c) : style.dim("\u25EF", c);
       const labelRaw = opt.label.length > maxLabelCols ? `${opt.label.slice(0, maxLabelCols - 1)}\u2026` : opt.label;
       const labelPadded = padVisible(labelRaw, maxLabelCols + 1, "left");
-      const styledLabel = isCurrent ? style.bold(labelPadded, c) : isChecked ? style.green(labelPadded, c) : labelPadded;
+      const styledLabel = isCurrent ? fgHex(CHARM_PALETTE.fuchsia, style.bold(labelPadded, c), c) : isChecked ? style.green(labelPadded, c) : labelPadded;
       const prefixWidth = 7 + maxLabelCols + 1;
       const maxHintCols = Math.max(10, 76 - prefixWidth);
       const rawHint = opt.hint ?? "";
       const shortHint = rawHint.length > maxHintCols ? `${rawHint.slice(0, maxHintCols - 1)}\u2026` : rawHint;
-      const hintPart = shortHint ? ` ${style.dim(shortHint, c)}` : "";
+      const hintPart = shortHint ? ` ${isCurrent ? fgHex(CHARM_PALETTE.lavender, shortHint, c) : style.dim(shortHint, c)}` : "";
       lines.push(`${bar}  ${pointer} ${checkbox} ${styledLabel}${hintPart}`);
     }
     if (endIdx < total) {
       lines.push(
-        `${bar}  ${style.dim(`\u2193 ${total - endIdx} more below...`, c)}`
+        `${bar}  ${style.dim(`\u2193 ${total - endIdx} more below...`, c)}${pageDots}`
       );
     }
   }
   lines.push(bar);
-  const selectedSkillsCount = state.options.filter(
+  const selectedSkillsCount = realOptions.filter(
     (o) => optionMatchesTab(o, "skill") && state.selected.has(o.value)
   ).length;
-  const selectedAgentsCount = state.options.filter(
+  const selectedAgentsCount = realOptions.filter(
     (o) => optionMatchesTab(o, "agent") && state.selected.has(o.value)
   ).length;
   const currentOptLabel = visible[state.cursor]?.label ?? "";
@@ -5702,8 +5903,9 @@ function renderMultiSelectFrame(title, state, options = {}) {
   const rawTarget = options.targetHint ?? "";
   const shortTarget = rawTarget.length > 18 ? `${rawTarget.slice(0, 17)}\u2026` : rawTarget;
   const targetSuffix = shortTarget ? ` \xB7 IDE: ${shortTarget}` : "";
+  const styledSummary = state.selected.size > 0 ? fgHex(CHARM_PALETTE.mint, style.bold(summaryText, c), c) : fgHex(CHARM_PALETTE.lavender, style.bold(summaryText, c), c);
   lines.push(
-    `${style.dim("\u2570\u2500", c)} ${style.bold(summaryText, c)}${style.dim(`${targetSuffix} \u2014 Enter to ${submitVerb}`, c)}`
+    `${style.dim("\u2570\u2500", c)} ${styledSummary}${style.dim(`${targetSuffix} \u2014 Enter to ${submitVerb}`, c)}`
   );
   return lines.join("\n");
 }
@@ -5711,7 +5913,9 @@ async function runMultiSelectPrompt(title, options, renderOpts = {}) {
   if (!process.stdin.isTTY || !process.stdout.isTTY) {
     return null;
   }
-  let state = createMultiSelectState(options);
+  let state = createMultiSelectState(options, {
+    showSelectAll: renderOpts.showSelectAll
+  });
   let renderedLineCount = 0;
   const render = () => {
     const frame = renderMultiSelectFrame(title, state, renderOpts);
@@ -6972,16 +7176,19 @@ function runCli(argv) {
       unit: "tokens"
     });
     const firstSkill = summary.skills[0]?.skillName ?? "security-sast-gate";
+    const skillBadge = formatBadge("skill", "SKILL");
+    const subagentBadge = formatBadge("subagent", "SUBAGENT");
     const lines = [
-      `=== SkillOps Catalog (v${SKILLOPS_VERSION}) ===`,
-      `Skills (${summary.skills.length}) \u2014 Total L1 Routing Tax: ${summary.totalL1Tokens} tokens`,
-      `L1 Budget Meter: ${l1Bar}`,
+      renderHeaderBanner("Catalog \u2014 Hybrid Skills & Context-Isolated Agents"),
+      `${style.dim("\u251C\u2500")} ${style.bold(`Skills (${summary.skills.length})`)} \u2014 Total L1 Routing Tax: ${style.green(`${summary.totalL1Tokens} tokens`)}`,
+      `${style.dim("\u2502")}  L1 Budget Meter: ${l1Bar}`,
       ...summary.skills.map(
-        (s) => `  [SKILL] ${s.skillName} \u2014 L1: ${s.l1Tokens}t | L2: ${s.l2Lines} lines (${s.l2Tokens}t) | L3 Scripts: ${s.scriptsCount}`
+        (s) => `${style.dim("\u2502")}  ${skillBadge} ${style.bold(s.skillName)} \u2014 L1: ${s.l1Tokens}t | L2: ${s.l2Lines} lines (${s.l2Tokens}t) | L3 Scripts: ${s.scriptsCount}`
       ),
-      `Subagents (${summary.subagents.length}) \u2014 Context-Isolated Specialist Agents:`,
+      style.dim("\u2502"),
+      `${style.dim("\u251C\u2500")} ${style.bold(`Subagents (${summary.subagents.length})`)} \u2014 Context-Isolated Specialist Agents:`,
       ...summary.subagents.map(
-        (a) => `  [SUBAGENT] ${a.subagentName} (prompt=${a.systemPromptTokens}t, max_out<=${a.maxOutputTokens}t, tools=${a.tools.length})`
+        (a) => `${style.dim("\u2502")}  ${subagentBadge} ${style.bold(a.subagentName)} (prompt=${a.systemPromptTokens}t, max_out<=${a.maxOutputTokens}t, tools=${a.tools.length})`
       ),
       renderNextSteps([
         {
@@ -7478,7 +7685,8 @@ async function runCliInteractive(argv) {
       const options = buildInteractiveCatalogOptions(catalogDir);
       const step2Title = !explicitTargetsArg ? "SkillOps \u2014 Step 2/2: Select Skills & Agents to Import" : "SkillOps \u2014 Select Skills & Agents to Import";
       const selected = await runMultiSelectPrompt(step2Title, options, {
-        targetHint: targets.join(", ")
+        targetHint: targets.join(", "),
+        showSelectAll: true
       });
       if (!selected || selected.length === 0) {
         process.stdout.write("No Skills or Agents selected.\n");
@@ -7529,7 +7737,8 @@ async function runCliInteractive(argv) {
         installedOptions,
         {
           submitActionLabel: "remove",
-          targetHint: targets ? targets.join(", ") : void 0
+          targetHint: targets ? targets.join(", ") : void 0,
+          showSelectAll: true
         }
       );
       if (!selected || selected.length === 0) {

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import { z } from 'zod';
  * telemetry and Multi-Runtime Transpilation lockfiles.
  */
 
-declare const SKILLOPS_VERSION = "1.3.6";
+declare const SKILLOPS_VERSION = "1.3.8";
 /**
  * Count whitespace-delimited words in text.
  */
@@ -2173,6 +2173,67 @@ declare function renderGlobalHelp(version: string, colorEnabled?: boolean): stri
  */
 declare function renderCommandHelp(spec: CommandHelpSpec, version: string, colorEnabled?: boolean): string;
 
+/**
+ * Charmbracelet Lip Gloss & Bubbles Inspired Terminal Styling Engine (`src/ui/lipgloss.ts`).
+ *
+ * Zero-dependency TypeScript implementation of Lip Gloss TrueColor (24-bit RGB)
+ * palettes, background pills, Bubbles paginator dots, keycap status bars, and
+ * ANSI-aware horizontal block composition (`joinHorizontal`).
+ */
+/**
+ * Official Charmbracelet Lip Gloss / Huh / Bubbles inspired TrueColor palette.
+ */
+declare const CHARM_PALETTE: {
+    readonly indigo: "#7D56F4";
+    readonly fuchsia: "#EE6FF8";
+    readonly hotPink: "#F25D94";
+    readonly mint: "#04B575";
+    readonly amber: "#FFBD2E";
+    readonly coral: "#FF5F56";
+    readonly cyan: "#00D7FF";
+    readonly lavender: "#B4A7D6";
+    readonly white: "#FAFAFA";
+    readonly muted: "#6C6C6C";
+    readonly subtle: "#4A4A4A";
+    readonly surface: "#2A2438";
+    readonly keycapBg: "#302B3F";
+};
+type CharmColorKey = keyof typeof CHARM_PALETTE;
+/**
+ * Parse a `#RRGGBB` or `#RGB` hex color string into an `[r, g, b]` tuple.
+ */
+declare function hexToRgb(hex: string): readonly [number, number, number];
+/**
+ * Apply 24-bit TrueColor foreground (`\x1b[38;2;R;G;Bm`) when color is enabled.
+ */
+declare function fgHex(hex: string, text: string, enabled?: boolean): string;
+/**
+ * Apply 24-bit TrueColor background (`\x1b[48;2;R;G;Bm`) when color is enabled.
+ */
+declare function bgHex(hex: string, text: string, enabled?: boolean): string;
+interface PillOptions {
+    readonly fg?: string;
+    readonly bg?: string;
+    readonly bold?: boolean;
+    readonly colorEnabled?: boolean;
+}
+/**
+ * Render a Lip Gloss background pill badge without altering visible character length.
+ */
+declare function renderPill(text: string, options?: PillOptions): string;
+/**
+ * Render a Charm `bubbles/help` style keybinding hint (`key action`).
+ */
+declare function renderKeycap(keyLabel: string, actionLabel: string, colorEnabled?: boolean): string;
+/**
+ * Render Charm `bubbles/paginator` style pagination dots (`• ◦ ◦`).
+ */
+declare function renderPaginationDots(currentPage: number, totalPages: number, colorEnabled?: boolean): string;
+/**
+ * Compose two multi-line blocks horizontally (`lipgloss.JoinHorizontal`).
+ */
+declare function joinHorizontal(align: "top" | "center" | "bottom", leftBlock: string, rightBlock: string, gap?: number): string;
+
 /**
  * Zero-dependency interactive terminal multi-select prompt (`src/ui/prompt.ts`).
  *
@@ -2190,6 +2251,10 @@ interface MultiSelectOption {
     readonly tab?: MultiSelectTab;
     readonly hint?: string;
     readonly initialSelected?: boolean;
+    readonly isSelectAll?: boolean;
+}
+interface CreateMultiSelectStateOptions {
+    readonly showSelectAll?: boolean;
 }
 interface MultiSelectState {
     readonly options: readonly MultiSelectOption[];
@@ -2212,6 +2277,7 @@ interface RenderMultiSelectOptions {
     };
     readonly submitActionLabel?: string;
     readonly selectCursorOnEmptySubmit?: boolean;
+    readonly showSelectAll?: boolean;
     readonly maxVisible?: number;
     readonly colorEnabled?: boolean;
 }
@@ -2222,7 +2288,7 @@ declare function getFilteredTabOptions(state: MultiSelectState, tab?: MultiSelec
 /**
  * Initialize a deterministic multi-select state from a list of options.
  */
-declare function createMultiSelectState(options: readonly MultiSelectOption[]): MultiSelectState;
+declare function createMultiSelectState(options: readonly MultiSelectOption[], stateOptions?: CreateMultiSelectStateOptions): MultiSelectState;
 /**
  * Pure state reducer for keyboard input in the tabbed + searchable multi-select TUI.
  */
@@ -2356,4 +2422,4 @@ declare const DEFAULT_VALID_COMMANDS: readonly string[];
  */
 declare function suggestCommand(unknownCommand: string, validCommands?: readonly string[]): string | null;
 
-export { ALL_RUNTIME_TARGETS, type AddOptions, type AnalyzeTokenEconomyOptions, type ApplyMultiSelectKeyOptions, type AuditCatalogOptions, type BadgeType, type BenchmarkArm, BenchmarkArmSchema, type BenchmarkDelta, BenchmarkDeltaSchema, type BoxOptions, COMMAND_HELP_SPECS, CORE_RUNTIME_TARGETS, type CatalogEvalSummary, CatalogEvalSummarySchema, type CatalogItemInfo, type CatalogSearchMatch, type CatalogSearchReport, type CatalogTokenBudgetSummary, type CatalogTrack, CatalogTrackSchema, type CleanOptions, type CollisionPair, CollisionPairSchema, type CollisionReport, CollisionReportSchema, type CollisionSeverity, CollisionSeveritySchema, type ColorOverrideOptions, type CommandHelpSpec, type CommandOptionSpec, DEFAULT_VALID_COMMANDS, type DiagnoseRepositoryOptions, type DoctorCheckItem, type DoctorReport, type EvalAssertion, EvalAssertionSchema, type EvalCase, EvalCaseSchema, ExitCode, type ExitCodeValue, type HarnessCategory, type HarnessInspectionEntry, type HarnessInspectionReport, type HarnessSkillFormat, type JsonRpcRequest, type JsonRpcResponse, type LoadedSkillOpsConfigResult, type LockfileArtifactDiagnostic, type McpConfigAction, type McpServerContext, type McpSetupOptions, type McpSetupReport, type MultiSelectOption, type MultiSelectState, type MultiSelectTab, type NextStepHint, type ParseSkillOptions, type ParsedSkillDirectory, type ParsedSubagentFile, type QuickstartOptions, type QuickstartReport, RUNTIME_HARNESS_SPECS, type RemoveOptions, type RenderMultiSelectOptions, RepoFingerprinter, type RepoProfile, RepoProfileSchema, type RouteOptions, type RoutedBundle, RoutedBundleSchema, type RoutingSignals, RoutingSignalsSchema, type RuntimeHarnessSpec, type RuntimeTarget, RuntimeTargetSchema, SKILLOPS_VERSION, type ScaffoldOptions, type ScaffoldResult, type ScoredSkill, ScoredSkillSchema, type ScriptEntrypoint, ScriptEntrypointSchema, type SkillBenchmark, SkillBenchmarkSchema, type SkillEntrypoints, SkillEntrypointsSchema, type SkillEvalSuite, SkillEvalSuiteSchema, type SkillManifest, type SkillManifestInput, SkillManifestSchema, type SkillOpsConfig, SkillOpsConfigSchema, type SkillOpsDetectedStackConfig, SkillOpsDetectedStackConfigSchema, type SkillOpsTokenEconomyConfig, SkillOpsTokenEconomyConfigSchema, type SkillTokenBudgetAudit, type SkippedSkill, SkippedSkillSchema, type SubagentManifest, SubagentManifestSchema, type SubagentTokenBudgetAudit, type SyncLockEntry, SyncLockEntrySchema, type SyncLockfile, SyncLockfileSchema, type SyncOptions, type SyncReport, SyncReportSchema, type SyncedArtifact, SyncedArtifactSchema, type TableOptions, type TokenBarOptions, type TokenEconomyReport, TokenEconomyReportSchema, type TokenFileCategory, TokenFileCategorySchema, type TokenFileEntry, TokenFileEntrySchema, type TokenWasteHotspot, TokenWasteHotspotSchema, addSkillOrSubagent, analyzeRepoTokenEconomy, applyMultiSelectKey, auditCatalog, auditCatalogTokenBudgets, auditSkillTokenBudget, auditSubagentTokenBudget, classifyCollisionSeverity, cleanSyncedArtifacts, compileSkillBundle, computeCollisionMatrix, computeFeatureCosine, computeIdfWeights, computeSha256, countWords, createCollisionPair, createCollisionReport, createMultiSelectState, createSkillManifest, createSubagentManifest, detectInstalledHarnesses, diagnoseRepository, discoverSkillDirectories, discoverSubagentFiles, estimateTokenCount, evaluateCatalog, evaluateSkillDirectory, extractSkillFeatures, findCommandHelpSpec, fingerprintRepository, formatBadge, formatCatalogItemInfo, formatCatalogSearchReport, formatDoctorReport, formatEvalSummary, formatHarnessInspectionReport, formatMcpSetupReport, formatQuickstartReport, formatRoutedBundle, formatScaffoldReport, formatSyncReport, formatTokenEconomyReport, getFilteredTabOptions, handleMcpJsonRpcRequest, inspectCatalogItem, inspectHarnesses, isColorEnabled, levenshteinDistance, loadSkillOpsConfig, normalizePackageName, padVisible, parseSkillDirectory, parseSkillMdFile, parseSubagentFile, parseSubagentMdFile, removeSkillOrSubagent, renderAiUsageGuide, renderBox, renderCodexAgentsIndex, renderCommandHelp, renderGlobalHelp, renderHeaderBanner, renderMultiSelectFrame, renderNextSteps, renderProgressBar, renderSectionHeader, renderStep, renderTable, renderTokenBar, resolveRuntimeTargets, routeRepository, runMultiSelectPrompt, runQuickstart, scaffoldFrameworkItem, scoreSkillAgainstProfile, searchCatalog, setupMcpForHarnesses, splitFrontmatter, startMcpStdioServer, stripAnsi, stripCodexAgentsBlock, stripNegativeTriggerClauses, style, suggestCommand, syncRepository, tokenizeRoutingText, visibleLength };
+export { ALL_RUNTIME_TARGETS, type AddOptions, type AnalyzeTokenEconomyOptions, type ApplyMultiSelectKeyOptions, type AuditCatalogOptions, type BadgeType, type BenchmarkArm, BenchmarkArmSchema, type BenchmarkDelta, BenchmarkDeltaSchema, type BoxOptions, CHARM_PALETTE, COMMAND_HELP_SPECS, CORE_RUNTIME_TARGETS, type CatalogEvalSummary, CatalogEvalSummarySchema, type CatalogItemInfo, type CatalogSearchMatch, type CatalogSearchReport, type CatalogTokenBudgetSummary, type CatalogTrack, CatalogTrackSchema, type CharmColorKey, type CleanOptions, type CollisionPair, CollisionPairSchema, type CollisionReport, CollisionReportSchema, type CollisionSeverity, CollisionSeveritySchema, type ColorOverrideOptions, type CommandHelpSpec, type CommandOptionSpec, type CreateMultiSelectStateOptions, DEFAULT_VALID_COMMANDS, type DiagnoseRepositoryOptions, type DoctorCheckItem, type DoctorReport, type EvalAssertion, EvalAssertionSchema, type EvalCase, EvalCaseSchema, ExitCode, type ExitCodeValue, type HarnessCategory, type HarnessInspectionEntry, type HarnessInspectionReport, type HarnessSkillFormat, type JsonRpcRequest, type JsonRpcResponse, type LoadedSkillOpsConfigResult, type LockfileArtifactDiagnostic, type McpConfigAction, type McpServerContext, type McpSetupOptions, type McpSetupReport, type MultiSelectOption, type MultiSelectState, type MultiSelectTab, type NextStepHint, type ParseSkillOptions, type ParsedSkillDirectory, type ParsedSubagentFile, type PillOptions, type QuickstartOptions, type QuickstartReport, RUNTIME_HARNESS_SPECS, type RemoveOptions, type RenderMultiSelectOptions, RepoFingerprinter, type RepoProfile, RepoProfileSchema, type RouteOptions, type RoutedBundle, RoutedBundleSchema, type RoutingSignals, RoutingSignalsSchema, type RuntimeHarnessSpec, type RuntimeTarget, RuntimeTargetSchema, SKILLOPS_VERSION, type ScaffoldOptions, type ScaffoldResult, type ScoredSkill, ScoredSkillSchema, type ScriptEntrypoint, ScriptEntrypointSchema, type SkillBenchmark, SkillBenchmarkSchema, type SkillEntrypoints, SkillEntrypointsSchema, type SkillEvalSuite, SkillEvalSuiteSchema, type SkillManifest, type SkillManifestInput, SkillManifestSchema, type SkillOpsConfig, SkillOpsConfigSchema, type SkillOpsDetectedStackConfig, SkillOpsDetectedStackConfigSchema, type SkillOpsTokenEconomyConfig, SkillOpsTokenEconomyConfigSchema, type SkillTokenBudgetAudit, type SkippedSkill, SkippedSkillSchema, type SubagentManifest, SubagentManifestSchema, type SubagentTokenBudgetAudit, type SyncLockEntry, SyncLockEntrySchema, type SyncLockfile, SyncLockfileSchema, type SyncOptions, type SyncReport, SyncReportSchema, type SyncedArtifact, SyncedArtifactSchema, type TableOptions, type TokenBarOptions, type TokenEconomyReport, TokenEconomyReportSchema, type TokenFileCategory, TokenFileCategorySchema, type TokenFileEntry, TokenFileEntrySchema, type TokenWasteHotspot, TokenWasteHotspotSchema, addSkillOrSubagent, analyzeRepoTokenEconomy, applyMultiSelectKey, auditCatalog, auditCatalogTokenBudgets, auditSkillTokenBudget, auditSubagentTokenBudget, bgHex, classifyCollisionSeverity, cleanSyncedArtifacts, compileSkillBundle, computeCollisionMatrix, computeFeatureCosine, computeIdfWeights, computeSha256, countWords, createCollisionPair, createCollisionReport, createMultiSelectState, createSkillManifest, createSubagentManifest, detectInstalledHarnesses, diagnoseRepository, discoverSkillDirectories, discoverSubagentFiles, estimateTokenCount, evaluateCatalog, evaluateSkillDirectory, extractSkillFeatures, fgHex, findCommandHelpSpec, fingerprintRepository, formatBadge, formatCatalogItemInfo, formatCatalogSearchReport, formatDoctorReport, formatEvalSummary, formatHarnessInspectionReport, formatMcpSetupReport, formatQuickstartReport, formatRoutedBundle, formatScaffoldReport, formatSyncReport, formatTokenEconomyReport, getFilteredTabOptions, handleMcpJsonRpcRequest, hexToRgb, inspectCatalogItem, inspectHarnesses, isColorEnabled, joinHorizontal, levenshteinDistance, loadSkillOpsConfig, normalizePackageName, padVisible, parseSkillDirectory, parseSkillMdFile, parseSubagentFile, parseSubagentMdFile, removeSkillOrSubagent, renderAiUsageGuide, renderBox, renderCodexAgentsIndex, renderCommandHelp, renderGlobalHelp, renderHeaderBanner, renderKeycap, renderMultiSelectFrame, renderNextSteps, renderPaginationDots, renderPill, renderProgressBar, renderSectionHeader, renderStep, renderTable, renderTokenBar, resolveRuntimeTargets, routeRepository, runMultiSelectPrompt, runQuickstart, scaffoldFrameworkItem, scoreSkillAgainstProfile, searchCatalog, setupMcpForHarnesses, splitFrontmatter, startMcpStdioServer, stripAnsi, stripCodexAgentsBlock, stripNegativeTriggerClauses, style, suggestCommand, syncRepository, tokenizeRoutingText, visibleLength };

package/dist/index.js

@@ -2,7 +2,7 @@
 import fs from "fs";
 import YAML from "yaml";
 import { z } from "zod";
-var SKILLOPS_VERSION = "1.3.6";
+var SKILLOPS_VERSION = "1.3.8";
 var SKILL_NAME_REGEX = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 var SEMVER_REGEX = /^\d+\.\d+\.\d+$/;
 var FRONTMATTER_REGEX = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/;
@@ -1418,9 +1418,142 @@ import fs3 from "fs";
 import path2 from "path";
 import YAML2 from "yaml";
 
-// src/ui/terminal.ts
+// src/ui/lipgloss.ts
 var ESC = String.fromCharCode(27);
-var ANSI_ESCAPE_REGEX = new RegExp(`${ESC}\\[[0-9;]*m`, "g");
+var CHARM_PALETTE = {
+  indigo: "#7D56F4",
+  fuchsia: "#EE6FF8",
+  hotPink: "#F25D94",
+  mint: "#04B575",
+  amber: "#FFBD2E",
+  coral: "#FF5F56",
+  cyan: "#00D7FF",
+  lavender: "#B4A7D6",
+  white: "#FAFAFA",
+  muted: "#6C6C6C",
+  subtle: "#4A4A4A",
+  surface: "#2A2438",
+  keycapBg: "#302B3F"
+};
+function hexToRgb(hex) {
+  const cleaned = hex.trim().replace(/^#/, "");
+  if (cleaned.length === 3) {
+    const r2 = Number.parseInt(`${cleaned[0]}${cleaned[0]}`, 16);
+    const g2 = Number.parseInt(`${cleaned[1]}${cleaned[1]}`, 16);
+    const b2 = Number.parseInt(`${cleaned[2]}${cleaned[2]}`, 16);
+    return [
+      Number.isNaN(r2) ? 255 : r2,
+      Number.isNaN(g2) ? 255 : g2,
+      Number.isNaN(b2) ? 255 : b2
+    ];
+  }
+  const r = Number.parseInt(cleaned.slice(0, 2), 16);
+  const g = Number.parseInt(cleaned.slice(2, 4), 16);
+  const b = Number.parseInt(cleaned.slice(4, 6), 16);
+  return [
+    Number.isNaN(r) ? 255 : r,
+    Number.isNaN(g) ? 255 : g,
+    Number.isNaN(b) ? 255 : b
+  ];
+}
+function fgHex(hex, text, enabled) {
+  const useColor = enabled ?? isColorEnabled();
+  if (!useColor || text.length === 0) {
+    return text;
+  }
+  const [r, g, b] = hexToRgb(hex);
+  return `${ESC}[38;2;${r};${g};${b}m${text}${ESC}[39m`;
+}
+function bgHex(hex, text, enabled) {
+  const useColor = enabled ?? isColorEnabled();
+  if (!useColor || text.length === 0) {
+    return text;
+  }
+  const [r, g, b] = hexToRgb(hex);
+  return `${ESC}[48;2;${r};${g};${b}m${text}${ESC}[49m`;
+}
+function renderPill(text, options) {
+  const useColor = options?.colorEnabled ?? isColorEnabled();
+  if (!useColor || text.length === 0) {
+    return text;
+  }
+  const fg = options?.fg ?? CHARM_PALETTE.white;
+  const bg = options?.bg ?? CHARM_PALETTE.indigo;
+  const bold = options?.bold ?? true;
+  let styled = fgHex(fg, text, true);
+  styled = bgHex(bg, styled, true);
+  if (bold) {
+    styled = `${ESC}[1m${styled}${ESC}[22m`;
+  }
+  return styled;
+}
+function renderKeycap(keyLabel, actionLabel, colorEnabled) {
+  const useColor = colorEnabled ?? isColorEnabled();
+  if (!useColor) {
+    return `${keyLabel} ${actionLabel}`;
+  }
+  const keyStyled = `${ESC}[1m${fgHex(CHARM_PALETTE.lavender, keyLabel, true)}${ESC}[22m`;
+  const actionStyled = fgHex(CHARM_PALETTE.muted, actionLabel, true);
+  return `${keyStyled} ${actionStyled}`;
+}
+function renderPaginationDots(currentPage, totalPages, colorEnabled) {
+  const safeTotal = Math.max(1, Math.min(12, totalPages));
+  const safeCurrent = Math.max(0, Math.min(safeTotal - 1, currentPage));
+  const useColor = colorEnabled ?? isColorEnabled();
+  const dots = [];
+  for (let i = 0; i < safeTotal; i++) {
+    if (i === safeCurrent) {
+      dots.push(
+        useColor ? `${ESC}[1m${fgHex(CHARM_PALETTE.hotPink, "\u2022", true)}${ESC}[22m` : "\u2022"
+      );
+    } else {
+      dots.push(useColor ? fgHex(CHARM_PALETTE.muted, "\u25E6", true) : "\u25E6");
+    }
+  }
+  return dots.join(" ");
+}
+function joinHorizontal(align, leftBlock, rightBlock, gap = 2) {
+  const leftLines = leftBlock.split("\n");
+  const rightLines = rightBlock.split("\n");
+  const totalRows = Math.max(leftLines.length, rightLines.length);
+  const leftWidth = leftLines.reduce(
+    (max, line) => Math.max(max, visibleLength(line)),
+    0
+  );
+  const gapStr = " ".repeat(Math.max(0, gap));
+  const padBlockLines = (lines) => {
+    const diff = totalRows - lines.length;
+    if (diff <= 0) {
+      return lines;
+    }
+    if (align === "bottom") {
+      return [...Array.from({ length: diff }, () => ""), ...lines];
+    }
+    if (align === "center") {
+      const top = Math.floor(diff / 2);
+      const bottom = diff - top;
+      return [
+        ...Array.from({ length: top }, () => ""),
+        ...lines,
+        ...Array.from({ length: bottom }, () => "")
+      ];
+    }
+    return [...lines, ...Array.from({ length: diff }, () => "")];
+  };
+  const paddedLeft = padBlockLines(leftLines);
+  const paddedRight = padBlockLines(rightLines);
+  const out = [];
+  for (let i = 0; i < totalRows; i++) {
+    const l = padVisible(paddedLeft[i] ?? "", leftWidth, "left");
+    const r = paddedRight[i] ?? "";
+    out.push(r.length > 0 ? `${l}${gapStr}${r}` : l.trimEnd());
+  }
+  return out.join("\n");
+}
+
+// src/ui/terminal.ts
+var ESC2 = String.fromCharCode(27);
+var ANSI_ESCAPE_REGEX = new RegExp(`${ESC2}\\[[0-9;]*m`, "g");
 function isColorEnabled(options) {
   const env = options?.env ?? process.env;
   const isTTY = options?.isTTY ?? Boolean(process.stdout?.isTTY);
@@ -1446,21 +1579,21 @@ function wrapAnsi(openCode, closeCode, text, enabled) {
   if (!useColor || text.length === 0) {
     return text;
   }
-  return `${ESC}[${openCode}m${text}${ESC}[${closeCode}m`;
+  return `${ESC2}[${openCode}m${text}${ESC2}[${closeCode}m`;
 }
 var style = {
   bold: (text, enabled) => wrapAnsi("1", "22", text, enabled),
   dim: (text, enabled) => wrapAnsi("2", "22", text, enabled),
   italic: (text, enabled) => wrapAnsi("3", "23", text, enabled),
   underline: (text, enabled) => wrapAnsi("4", "24", text, enabled),
-  cyan: (text, enabled) => wrapAnsi("36", "39", text, enabled),
-  green: (text, enabled) => wrapAnsi("32", "39", text, enabled),
-  yellow: (text, enabled) => wrapAnsi("33", "39", text, enabled),
-  red: (text, enabled) => wrapAnsi("31", "39", text, enabled),
-  magenta: (text, enabled) => wrapAnsi("35", "39", text, enabled),
-  blue: (text, enabled) => wrapAnsi("34", "39", text, enabled),
-  gray: (text, enabled) => wrapAnsi("90", "39", text, enabled),
-  white: (text, enabled) => wrapAnsi("37", "39", text, enabled)
+  cyan: (text, enabled) => fgHex(CHARM_PALETTE.cyan, text, enabled),
+  green: (text, enabled) => fgHex(CHARM_PALETTE.mint, text, enabled),
+  yellow: (text, enabled) => fgHex(CHARM_PALETTE.amber, text, enabled),
+  red: (text, enabled) => fgHex(CHARM_PALETTE.coral, text, enabled),
+  magenta: (text, enabled) => fgHex(CHARM_PALETTE.fuchsia, text, enabled),
+  blue: (text, enabled) => fgHex(CHARM_PALETTE.indigo, text, enabled),
+  gray: (text, enabled) => fgHex(CHARM_PALETTE.muted, text, enabled),
+  white: (text, enabled) => fgHex(CHARM_PALETTE.white, text, enabled)
 };
 function stripAnsi(text) {
   return text.replace(ANSI_ESCAPE_REGEX, "");
@@ -1488,7 +1621,7 @@ function renderBox(lines, options) {
   const paddingX = options?.paddingX ?? 2;
   const minWidth = options?.minWidth ?? 36;
   const colorEnabled = options?.colorEnabled;
-  const borderFn = options?.borderColor ?? style.cyan;
+  const borderFn = options?.borderColor ?? style.blue;
   const titleText = options?.title ? ` ${options.title.trim()} ` : "";
   const titleVisibleLen = visibleLength(titleText);
   const maxLineLen = lines.reduce(
@@ -1513,7 +1646,13 @@ function renderBox(lines, options) {
 function renderHeaderBanner(subtitle = "Framework & Library for AI Skills & Subagents", options) {
   const ver = options?.version ?? SKILLOPS_VERSION;
   const c = options?.colorEnabled;
-  return `${style.bold(style.cyan(`\u25C6 SkillOps v${ver}`, c), c)} ${style.dim("\u2014", c)} ${subtitle}`;
+  const brandPill = renderPill(`\u25C6 SkillOps v${ver}`, {
+    fg: CHARM_PALETTE.white,
+    bg: CHARM_PALETTE.indigo,
+    bold: true,
+    colorEnabled: c
+  });
+  return `${brandPill} ${style.dim("\u2014", c)} ${fgHex(CHARM_PALETTE.lavender, subtitle, c)}`;
 }
 function renderTable(headers, rows, options) {
   const indent = " ".repeat(options?.indent ?? 2);
@@ -1590,15 +1729,19 @@ function formatBadge(type, customLabel, colorEnabled) {
         colorEnabled
       );
     case "skill":
-      return style.bold(
-        style.cyan(`[${customLabel ?? "SKILL"}]`, colorEnabled),
+      return renderPill(`[${customLabel ?? "SKILL"}]`, {
+        fg: CHARM_PALETTE.white,
+        bg: CHARM_PALETTE.indigo,
+        bold: true,
         colorEnabled
-      );
+      });
     case "subagent":
-      return style.bold(
-        style.magenta(`[${customLabel ?? "SUBAGENT"}]`, colorEnabled),
+      return renderPill(`[${customLabel ?? "SUBAGENT"}]`, {
+        fg: CHARM_PALETTE.white,
+        bg: CHARM_PALETTE.hotPink,
+        bold: true,
         colorEnabled
-      );
+      });
   }
 }
 function renderStep(step, total, title, detail, status = "done", colorEnabled) {
@@ -5430,6 +5573,9 @@ function optionMatchesQuery(opt, rawQuery) {
   if (!q) {
     return true;
   }
+  if (opt.isSelectAll) {
+    return false;
+  }
   return opt.label.toLowerCase().includes(q) || opt.value.toLowerCase().includes(q) || (opt.hint ?? "").toLowerCase().includes(q);
 }
 function getFilteredTabOptions(state, tab = state.activeTab) {
@@ -5437,16 +5583,47 @@ function getFilteredTabOptions(state, tab = state.activeTab) {
     (opt) => optionMatchesTab(opt, tab) && optionMatchesQuery(opt, state.searchQuery)
   );
 }
-function createMultiSelectState(options) {
+function createMultiSelectState(options, stateOptions = {}) {
+  let finalOptions = options;
+  if (stateOptions.showSelectAll && !options.some((opt) => opt.isSelectAll === true)) {
+    const skillItems = options.filter((opt) => optionMatchesTab(opt, "skill"));
+    const agentItems = options.filter((opt) => optionMatchesTab(opt, "agent"));
+    const withAll = [];
+    if (skillItems.length > 0) {
+      withAll.push({
+        value: "__all_skills__",
+        label: "[ALL] Select all Skills",
+        kind: "skill",
+        tab: "skill",
+        isSelectAll: true,
+        hint: `Select or deselect all ${skillItems.length} Skills in this tab`
+      });
+      withAll.push(...skillItems);
+    }
+    if (agentItems.length > 0) {
+      withAll.push({
+        value: "__all_agents__",
+        label: "[ALL] Select all Agents",
+        kind: "agent",
+        tab: "agent",
+        isSelectAll: true,
+        hint: `Select or deselect all ${agentItems.length} Agents in this tab`
+      });
+      withAll.push(...agentItems);
+    }
+    if (withAll.length > 0) {
+      finalOptions = withAll;
+    }
+  }
   const initial = /* @__PURE__ */ new Set();
-  for (const opt of options) {
-    if (opt.initialSelected) {
+  for (const opt of finalOptions) {
+    if (opt.initialSelected && !opt.isSelectAll) {
       initial.add(opt.value);
     }
   }
-  const hasSkills = options.some((opt) => optionMatchesTab(opt, "skill"));
+  const hasSkills = finalOptions.some((opt) => optionMatchesTab(opt, "skill"));
   return {
-    options,
+    options: finalOptions,
     activeTab: hasSkills ? "skill" : "agent",
     cursor: 0,
     selected: initial,
@@ -5536,6 +5713,29 @@ function applyMultiSelectKey(state, key, options = {}) {
     if (!currentOpt) {
       return state;
     }
+    if (currentOpt.isSelectAll) {
+      const realVisible = visible.filter((opt) => !opt.isSelectAll);
+      if (realVisible.length === 0) {
+        return state;
+      }
+      const allTabSelected = realVisible.every(
+        (opt) => state.selected.has(opt.value)
+      );
+      const nextSelected2 = new Set(state.selected);
+      if (allTabSelected) {
+        for (const opt of realVisible) {
+          nextSelected2.delete(opt.value);
+        }
+      } else {
+        for (const opt of realVisible) {
+          nextSelected2.add(opt.value);
+        }
+      }
+      return {
+        ...state,
+        selected: nextSelected2
+      };
+    }
     const nextSelected = new Set(state.selected);
     if (nextSelected.has(currentOpt.value)) {
       nextSelected.delete(currentOpt.value);
@@ -5599,19 +5799,20 @@ function applyMultiSelectKey(state, key, options = {}) {
     };
   }
   if (key === "a" || key === "A") {
-    if (visible.length === 0) {
+    const realVisible = visible.filter((opt) => !opt.isSelectAll);
+    if (realVisible.length === 0) {
       return state;
     }
-    const allTabSelected = visible.every(
+    const allTabSelected = realVisible.every(
       (opt) => state.selected.has(opt.value)
     );
     const nextSelected = new Set(state.selected);
     if (allTabSelected) {
-      for (const opt of visible) {
+      for (const opt of realVisible) {
         nextSelected.delete(opt.value);
       }
     } else {
-      for (const opt of visible) {
+      for (const opt of realVisible) {
         nextSelected.add(opt.value);
       }
     }
@@ -5626,41 +5827,69 @@ function renderMultiSelectFrame(title, state, options = {}) {
   const c = options.colorEnabled;
   const bar = style.dim("\u2502", c);
   const maxVisible = options.maxVisible ?? 10;
-  const totalSkills = state.options.filter(
+  const realOptions = state.options.filter((o) => !o.isSelectAll);
+  const totalSkills = realOptions.filter(
     (o) => optionMatchesTab(o, "skill")
   ).length;
-  const totalAgents = state.options.filter(
+  const totalAgents = realOptions.filter(
     (o) => optionMatchesTab(o, "agent")
   ).length;
   const filteredSkills = getFilteredTabOptions(state, "skill");
   const filteredAgents = getFilteredTabOptions(state, "agent");
+  const realFilteredSkills = filteredSkills.filter((o) => !o.isSelectAll);
+  const realFilteredAgents = filteredAgents.filter((o) => !o.isSelectAll);
   const visible = state.activeTab === "skill" ? filteredSkills : filteredAgents;
+  const realVisible = state.activeTab === "skill" ? realFilteredSkills : realFilteredAgents;
   const total = visible.length;
   const skillTabTitle = options.tabLabels?.skill ?? "Skills";
   const agentTabTitle = options.tabLabels?.agent ?? "Agents";
   const submitVerb = options.submitActionLabel ?? "import";
   const isSinglePage = totalAgents === 0 || totalSkills === 0;
-  const header = `${style.bold(style.cyan(`\u25C6 ${title}`, c), c)}`;
-  const tabHint = isSinglePage ? "" : " \xB7 \u2190/\u2192 tab";
-  const instructions = state.searchMode ? `${bar}  ${style.dim(`\u2191/\u2193 move${tabHint} \xB7 Space select \xB7 Esc clear \xB7 Enter ${submitVerb}`, c)}` : `${bar}  ${style.dim(`\u2191/\u2193 move${tabHint} \xB7 Space select \xB7 / search \xB7 a all \xB7 Enter ${submitVerb}`, c)}`;
+  const header = renderPill(`\u25C6 ${title}`, {
+    fg: CHARM_PALETTE.white,
+    bg: CHARM_PALETTE.indigo,
+    bold: true,
+    colorEnabled: c
+  });
+  const sep = style.dim(" \xB7 ", c);
+  const keyItems = [
+    renderKeycap("\u2191/\u2193", "move", c),
+    ...isSinglePage ? [] : [renderKeycap("\u2190/\u2192", "tab", c)],
+    renderKeycap("Space", "select", c),
+    ...state.searchMode ? [renderKeycap("Esc", "clear", c)] : [renderKeycap("/", "search", c), renderKeycap("a", "all", c)],
+    renderKeycap("Enter", submitVerb, c)
+  ];
+  const instructions = `${bar}  ${keyItems.join(sep)}`;
   const lines = [header];
   if (options.subtitle) {
-    lines.push(`${bar}  ${options.subtitle}`);
+    lines.push(`${bar}  ${fgHex(CHARM_PALETTE.lavender, options.subtitle, c)}`);
   }
   lines.push(instructions, bar);
   const hasQuery = state.searchQuery.length > 0;
-  const skillCountStr = hasQuery ? `${filteredSkills.length}/${totalSkills}` : `${totalSkills}`;
-  const agentCountStr = hasQuery ? `${filteredAgents.length}/${totalAgents}` : `${totalAgents}`;
-  const skillTabLabel = state.activeTab === "skill" ? style.bold(
-    style.cyan(`[ \u25C6 ${skillTabTitle} (${skillCountStr}) ]`, c),
-    c
-  ) : style.dim(`\u25CB ${skillTabTitle} (${skillCountStr})`, c);
-  const agentTabLabel = state.activeTab === "agent" ? style.bold(
-    style.magenta(`[ \u25C6 ${agentTabTitle} (${agentCountStr}) ]`, c),
-    c
-  ) : style.dim(`\u25CB ${agentTabTitle} (${agentCountStr})`, c);
+  const skillCountStr = hasQuery ? `${realFilteredSkills.length}/${totalSkills}` : `${totalSkills}`;
+  const agentCountStr = hasQuery ? `${realFilteredAgents.length}/${totalAgents}` : `${totalAgents}`;
+  const skillTabLabel = state.activeTab === "skill" ? renderPill(`[ \u25C6 ${skillTabTitle} (${skillCountStr}) ]`, {
+    fg: CHARM_PALETTE.white,
+    bg: CHARM_PALETTE.indigo,
+    bold: true,
+    colorEnabled: c
+  }) : style.dim(`\u25CB ${skillTabTitle} (${skillCountStr})`, c);
+  const agentTabLabel = state.activeTab === "agent" ? renderPill(`[ \u25C6 ${agentTabTitle} (${agentCountStr}) ]`, {
+    fg: CHARM_PALETTE.white,
+    bg: CHARM_PALETTE.hotPink,
+    bold: true,
+    colorEnabled: c
+  }) : style.dim(`\u25CB ${agentTabTitle} (${agentCountStr})`, c);
   const rawQuerySlice = state.searchQuery.length > 14 ? `\u2026${state.searchQuery.slice(-13)}` : state.searchQuery;
-  const searchSuffix = state.searchMode || hasQuery ? `   ${style.yellow(`/ Filter: ${rawQuerySlice}${state.searchMode ? "\u2588" : ""}`, c)}` : `   ${style.dim("(/ search)", c)}`;
+  const searchSuffix = state.searchMode || hasQuery ? `   ${renderPill(
+    `/ Filter: ${rawQuerySlice}${state.searchMode ? "\u2588" : ""}`,
+    {
+      fg: CHARM_PALETTE.amber,
+      bg: CHARM_PALETTE.surface,
+      bold: true,
+      colorEnabled: c
+    }
+  )}` : `   ${style.dim("(/ search)", c)}`;
   const singleTabLabel = totalSkills > 0 ? skillTabLabel : agentTabLabel;
   lines.push(
     isSinglePage ? `${style.dim("\u251C\u2500", c)} ${singleTabLabel}${searchSuffix}` : `${style.dim("\u251C\u2500", c)} ${skillTabLabel}   ${agentTabLabel}${searchSuffix}`,
@@ -5678,8 +5907,16 @@ function renderMultiSelectFrame(title, state, options = {}) {
       startIdx = Math.max(0, Math.min(state.cursor - half, total - maxVisible));
     }
     const endIdx = Math.min(total, startIdx + maxVisible);
+    const totalPages = Math.max(1, Math.ceil(total / maxVisible));
+    const currentPage = Math.min(
+      totalPages - 1,
+      Math.floor(state.cursor / maxVisible)
+    );
+    const pageDots = totalPages > 1 ? `  ${renderPaginationDots(currentPage, totalPages, c)}` : "";
     if (startIdx > 0) {
-      lines.push(`${bar}  ${style.dim(`\u2191 ${startIdx} more above...`, c)}`);
+      lines.push(
+        `${bar}  ${style.dim(`\u2191 ${startIdx} more above...`, c)}${endIdx >= total ? pageDots : ""}`
+      );
     }
     const maxLabelCols = Math.min(
       26,
@@ -5689,30 +5926,32 @@ function renderMultiSelectFrame(title, state, options = {}) {
       const opt = visible[i];
       if (!opt) continue;
       const isCurrent = i === state.cursor;
-      const isChecked = state.selected.has(opt.value);
-      const pointer = isCurrent ? style.cyan("\u276F", c) : " ";
-      const checkbox = isChecked ? style.green("\u25C9", c) : style.dim("\u25EF", c);
+      const allRealSelected = realVisible.length > 0 && realVisible.every((o) => state.selected.has(o.value));
+      const someRealSelected = realVisible.some((o) => state.selected.has(o.value)) && !allRealSelected;
+      const isChecked = opt.isSelectAll ? allRealSelected : state.selected.has(opt.value);
+      const pointer = isCurrent ? fgHex(CHARM_PALETTE.hotPink, style.bold("\u276F", c), c) : " ";
+      const checkbox = isChecked ? style.green("\u25C9", c) : opt.isSelectAll && someRealSelected ? fgHex(CHARM_PALETTE.fuchsia, "\u25D0", c) : style.dim("\u25EF", c);
       const labelRaw = opt.label.length > maxLabelCols ? `${opt.label.slice(0, maxLabelCols - 1)}\u2026` : opt.label;
       const labelPadded = padVisible(labelRaw, maxLabelCols + 1, "left");
-      const styledLabel = isCurrent ? style.bold(labelPadded, c) : isChecked ? style.green(labelPadded, c) : labelPadded;
+      const styledLabel = isCurrent ? fgHex(CHARM_PALETTE.fuchsia, style.bold(labelPadded, c), c) : isChecked ? style.green(labelPadded, c) : labelPadded;
       const prefixWidth = 7 + maxLabelCols + 1;
       const maxHintCols = Math.max(10, 76 - prefixWidth);
       const rawHint = opt.hint ?? "";
       const shortHint = rawHint.length > maxHintCols ? `${rawHint.slice(0, maxHintCols - 1)}\u2026` : rawHint;
-      const hintPart = shortHint ? ` ${style.dim(shortHint, c)}` : "";
+      const hintPart = shortHint ? ` ${isCurrent ? fgHex(CHARM_PALETTE.lavender, shortHint, c) : style.dim(shortHint, c)}` : "";
       lines.push(`${bar}  ${pointer} ${checkbox} ${styledLabel}${hintPart}`);
     }
     if (endIdx < total) {
       lines.push(
-        `${bar}  ${style.dim(`\u2193 ${total - endIdx} more below...`, c)}`
+        `${bar}  ${style.dim(`\u2193 ${total - endIdx} more below...`, c)}${pageDots}`
       );
     }
   }
   lines.push(bar);
-  const selectedSkillsCount = state.options.filter(
+  const selectedSkillsCount = realOptions.filter(
     (o) => optionMatchesTab(o, "skill") && state.selected.has(o.value)
   ).length;
-  const selectedAgentsCount = state.options.filter(
+  const selectedAgentsCount = realOptions.filter(
     (o) => optionMatchesTab(o, "agent") && state.selected.has(o.value)
   ).length;
   const currentOptLabel = visible[state.cursor]?.label ?? "";
@@ -5720,8 +5959,9 @@ function renderMultiSelectFrame(title, state, options = {}) {
   const rawTarget = options.targetHint ?? "";
   const shortTarget = rawTarget.length > 18 ? `${rawTarget.slice(0, 17)}\u2026` : rawTarget;
   const targetSuffix = shortTarget ? ` \xB7 IDE: ${shortTarget}` : "";
+  const styledSummary = state.selected.size > 0 ? fgHex(CHARM_PALETTE.mint, style.bold(summaryText, c), c) : fgHex(CHARM_PALETTE.lavender, style.bold(summaryText, c), c);
   lines.push(
-    `${style.dim("\u2570\u2500", c)} ${style.bold(summaryText, c)}${style.dim(`${targetSuffix} \u2014 Enter to ${submitVerb}`, c)}`
+    `${style.dim("\u2570\u2500", c)} ${styledSummary}${style.dim(`${targetSuffix} \u2014 Enter to ${submitVerb}`, c)}`
   );
   return lines.join("\n");
 }
@@ -5729,7 +5969,9 @@ async function runMultiSelectPrompt(title, options, renderOpts = {}) {
   if (!process.stdin.isTTY || !process.stdout.isTTY) {
     return null;
   }
-  let state = createMultiSelectState(options);
+  let state = createMultiSelectState(options, {
+    showSelectAll: renderOpts.showSelectAll
+  });
   let renderedLineCount = 0;
   const render = () => {
     const frame = renderMultiSelectFrame(title, state, renderOpts);
@@ -6500,6 +6742,7 @@ export {
   ALL_RUNTIME_TARGETS,
   BenchmarkArmSchema,
   BenchmarkDeltaSchema,
+  CHARM_PALETTE,
   COMMAND_HELP_SPECS,
   CORE_RUNTIME_TARGETS,
   CatalogEvalSummarySchema,
@@ -6544,6 +6787,7 @@ export {
   auditCatalogTokenBudgets,
   auditSkillTokenBudget,
   auditSubagentTokenBudget,
+  bgHex,
   classifyCollisionSeverity,
   cleanSyncedArtifacts,
   compileSkillBundle,
@@ -6565,6 +6809,7 @@ export {
   evaluateCatalog,
   evaluateSkillDirectory,
   extractSkillFeatures,
+  fgHex,
   findCommandHelpSpec,
   fingerprintRepository,
   formatBadge,
@@ -6581,9 +6826,11 @@ export {
   formatTokenEconomyReport,
   getFilteredTabOptions,
   handleMcpJsonRpcRequest,
+  hexToRgb,
   inspectCatalogItem,
   inspectHarnesses,
   isColorEnabled,
+  joinHorizontal,
   levenshteinDistance,
   loadSkillOpsConfig,
   normalizePackageName,
@@ -6599,8 +6846,11 @@ export {
   renderCommandHelp,
   renderGlobalHelp,
   renderHeaderBanner,
+  renderKeycap,
   renderMultiSelectFrame,
   renderNextSteps,
+  renderPaginationDots,
+  renderPill,
   renderProgressBar,
   renderSectionHeader,
   renderStep,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "skillops-cli",
-	"version": "1.3.6",
+	"version": "1.3.8",
 	"description": "SkillOps — The Zero-API Framework & Benchmark-Verified Library for High-End AI Coding Skills & Context-Isolated Subagents with Universal Top-28 AI Agent Transpilation & Token Economy Auditing.",
 	"type": "module",
 	"license": "MIT",