skillops-cli 1.3.7 → 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.7";
+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) {
@@ -5684,27 +5789,51 @@ function renderMultiSelectFrame(title, state, options = {}) {
   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 ? `${realFilteredSkills.length}/${totalSkills}` : `${totalSkills}`;
   const agentCountStr = hasQuery ? `${realFilteredAgents.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 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}`,
@@ -5722,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,
@@ -5736,21 +5873,21 @@ function renderMultiSelectFrame(title, state, options = {}) {
       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 ? style.cyan("\u276F", c) : " ";
-      const checkbox = isChecked ? style.green("\u25C9", c) : opt.isSelectAll && someRealSelected ? style.cyan("\u25D0", c) : style.dim("\u25EF", c);
+      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}`
       );
     }
   }
@@ -5766,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");
 }
@@ -7038,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([
         {

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.7";
+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`).
  *
@@ -2361,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, 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 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.7";
+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) {
@@ -5702,27 +5845,51 @@ function renderMultiSelectFrame(title, state, options = {}) {
   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 ? `${realFilteredSkills.length}/${totalSkills}` : `${totalSkills}`;
   const agentCountStr = hasQuery ? `${realFilteredAgents.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 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}`,
@@ -5740,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,
@@ -5754,21 +5929,21 @@ function renderMultiSelectFrame(title, state, options = {}) {
       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 ? style.cyan("\u276F", c) : " ";
-      const checkbox = isChecked ? style.green("\u25C9", c) : opt.isSelectAll && someRealSelected ? style.cyan("\u25D0", c) : style.dim("\u25EF", c);
+      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}`
       );
     }
   }
@@ -5784,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");
 }
@@ -6566,6 +6742,7 @@ export {
   ALL_RUNTIME_TARGETS,
   BenchmarkArmSchema,
   BenchmarkDeltaSchema,
+  CHARM_PALETTE,
   COMMAND_HELP_SPECS,
   CORE_RUNTIME_TARGETS,
   CatalogEvalSummarySchema,
@@ -6610,6 +6787,7 @@ export {
   auditCatalogTokenBudgets,
   auditSkillTokenBudget,
   auditSubagentTokenBudget,
+  bgHex,
   classifyCollisionSeverity,
   cleanSyncedArtifacts,
   compileSkillBundle,
@@ -6631,6 +6809,7 @@ export {
   evaluateCatalog,
   evaluateSkillDirectory,
   extractSkillFeatures,
+  fgHex,
   findCommandHelpSpec,
   fingerprintRepository,
   formatBadge,
@@ -6647,9 +6826,11 @@ export {
   formatTokenEconomyReport,
   getFilteredTabOptions,
   handleMcpJsonRpcRequest,
+  hexToRgb,
   inspectCatalogItem,
   inspectHarnesses,
   isColorEnabled,
+  joinHorizontal,
   levenshteinDistance,
   loadSkillOpsConfig,
   normalizePackageName,
@@ -6665,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.7",
+	"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",