oh-skillhub 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oh-skillhub",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "OpenHarmony Skills installer for Codex, Claude Code, and OpenCode.",
   "type": "commonjs",
   "bin": {

package/src/cli.js

@@ -21,6 +21,14 @@ const DOMAIN_NAMES = [
   "kernel",
   "security",
 ];
+const ANSI = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+  cyan: "\x1b[36m",
+  green: "\x1b[32m",
+  reverse: "\x1b[7m",
+};
 
 async function main(argv = []) {
   if (argv.length === 0) {
@@ -165,12 +173,12 @@ async function runInteractiveInstaller(input = process.stdin, output = process.s
 function buildRepositoryChoices(manifest) {
   const choices = [];
   for (const stage of COMMON_STAGES) {
-    const count = manifest.skills.filter((skill) => skill.scope === "common" && skill.stage === stage).length;
-    choices.push({ scope: "common", stage, path: `common / ${stage}`, count });
+    const skills = manifest.skills.filter((skill) => skill.scope === "common" && skill.stage === stage);
+    choices.push({ scope: "common", stage, path: `common / ${stage}`, count: skills.length, skills });
   }
   for (const domain of DOMAIN_NAMES) {
-    const count = manifest.skills.filter((skill) => skill.scope === "domain" && skill.domain === domain).length;
-    choices.push({ scope: "domain", domain, path: `domain / ${domain}`, count });
+    const skills = manifest.skills.filter((skill) => skill.scope === "domain" && skill.domain === domain);
+    choices.push({ scope: "domain", domain, path: `domain / ${domain}`, count: skills.length, skills });
   }
   return choices;
 }
@@ -196,6 +204,9 @@ function renderTuiMenu(choices) {
   choices.forEach((choice, index) => {
     const marker = choice.count > 0 ? "[ ]" : "[ ]";
     lines.push(`  ${String(index + 1).padStart(2, " ")}. ${marker} ${choice.path.padEnd(28, " ")} ${choice.count} skill(s)`);
+    for (const leaf of renderSkillLeaves(choice)) {
+      lines.push(`       - ${leaf}`);
+    }
   });
   lines.push("");
   return `${lines.join("\n")}\n`;
@@ -271,27 +282,62 @@ function renderRawTuiMenu(choices, cursor, selected) {
   const line = `+${"-".repeat(width - 2)}+`;
   const lines = [
     line,
-    `| ${padRight("OH SkillHub", width - 4)} |`,
-    `| ${padRight("OpenHarmony Skills Installer", width - 4)} |`,
+    rawHeaderLine("OH SkillHub", width, ANSI.cyan, ANSI.bold),
+    rawHeaderLine("OpenHarmony Skills Installer", width, ANSI.dim),
     line,
     "",
-    "Target",
+    colorize("Target", ANSI.bold),
     "  Agent: codex",
     "  Scope: user",
     "",
-    "Choose skill groups",
-    "  Up/Down or j/k: move    Space: select    Enter: install    Ctrl+C: cancel",
+    colorize("Choose skill groups", ANSI.bold),
+    colorize("  Up/Down or j/k: move    Space: select    Enter: install    Ctrl+C: cancel", ANSI.dim),
     "",
   ];
   choices.forEach((choice, index) => {
     const pointer = index === cursor ? ">" : " ";
-    const checkbox = selected.has(index) ? "[x]" : "[ ]";
-    lines.push(`${pointer} ${checkbox} ${choice.path.padEnd(28, " ")} ${choice.count} skill(s)`);
+    const highlighted = index === cursor;
+    const checkbox = rawCheckbox(selected.has(index), highlighted);
+    const row = `${pointer} ${checkbox} ${choice.path.padEnd(28, " ")} ${choice.count} skill(s)`;
+    lines.push(highlighted ? colorize(row, ANSI.reverse, ANSI.bold) : row);
+    for (const leaf of renderSkillLeaves(choice)) {
+      lines.push(colorize(`      - ${leaf}`, ANSI.dim));
+    }
   });
   lines.push("");
   return `${lines.join("\n")}\n`;
 }
 
+function colorize(value, ...codes) {
+  return `${codes.join("")}${value}${ANSI.reset}`;
+}
+
+function rawHeaderLine(value, width, ...codes) {
+  const styled = colorize(value, ...codes);
+  return `| ${styled}${" ".repeat(width - 4 - value.length)} |`;
+}
+
+function rawCheckbox(isSelected, highlighted) {
+  if (!isSelected) {
+    return "[ ]";
+  }
+  const restore = highlighted ? `${ANSI.reverse}${ANSI.bold}` : "";
+  return `${colorize("[✓]", ANSI.green, ANSI.bold)}${restore}`;
+}
+
+function renderSkillLeaves(choice) {
+  return (choice.skills || []).map((skill) => {
+    if (choice.scope === "common") {
+      return skill.name;
+    }
+    const prefix = `skills/domain/${choice.domain}/`;
+    if (skill.path.startsWith(prefix)) {
+      return skill.path.slice(prefix.length).split("/").join(" / ");
+    }
+    return skill.name;
+  });
+}
+
 function padRight(value, width) {
   return value.length >= width ? value.slice(0, width) : `${value}${" ".repeat(width - value.length)}`;
 }
@@ -439,6 +485,7 @@ module.exports = {
   renderTelemetry,
   buildRepositoryChoices,
   parseSelection,
+  renderRawTuiMenu,
   renderTuiMenu,
   selectSkillsForChoices,
 };

package/src/data/manifest.json

@@ -144,6 +144,17 @@
       "version": "0.1.0",
       "status": "stable",
       "tags": ["arkui", "review"]
+    },
+    {
+      "name": "ohos-design-graphics-explain-code",
+      "scope": "domain",
+      "domain": "graphics",
+      "stage": "design",
+      "path": "skills/domain/graphics/design/ohos-design-graphics-explain-code",
+      "description": "Use when explaining OpenHarmony graphics design code.",
+      "version": "0.1.0",
+      "status": "stable",
+      "tags": ["graphics", "design"]
     }
   ]
 }