agent-skill-manager 1.0.0

package/src/views/help.ts

@@ -0,0 +1,83 @@
+import { BoxRenderable, TextRenderable } from "@opentui/core";
+import type { RenderContext } from "@opentui/core";
+import { theme } from "../utils/colors";
+import { VERSION_STRING } from "../utils/version";
+
+const KEYBINDINGS = [
+  ["\u2191 / k", "Move up"],
+  ["\u2193 / j", "Move down"],
+  ["Enter", "View skill details"],
+  ["d", "Uninstall skill"],
+  ["/", "Search / filter"],
+  ["Esc", "Back / clear filter"],
+  ["Tab", "Cycle scope"],
+  ["s", "Cycle sort order"],
+  ["r", "Refresh / rescan skills"],
+  ["c", "Open configuration"],
+  ["?", "Toggle this help"],
+  ["q", "Quit"],
+];
+
+export function createHelpView(ctx: RenderContext): BoxRenderable {
+  const boxWidth = 44;
+  const boxHeight = KEYBINDINGS.length + 7;
+  const top = Math.max(0, Math.floor((ctx.height - boxHeight) / 2));
+  const left = Math.max(0, Math.floor((ctx.width - boxWidth) / 2));
+
+  const container = new BoxRenderable(ctx, {
+    id: "help-overlay",
+    border: true,
+    borderStyle: "rounded",
+    borderColor: theme.accent,
+    backgroundColor: theme.bgAlt,
+    title: " Keyboard Shortcuts ",
+    titleAlignment: "center",
+    padding: 1,
+    flexDirection: "column",
+    gap: 0,
+    width: boxWidth,
+    height: boxHeight,
+    position: "absolute",
+    top,
+    left,
+    zIndex: 100,
+  });
+
+  for (const [key, action] of KEYBINDINGS) {
+    const row = new BoxRenderable(ctx, {
+      id: `help-row-${key}`,
+      flexDirection: "row",
+      width: "100%",
+      height: 1,
+    });
+
+    const keyText = new TextRenderable(ctx, {
+      content: key.padEnd(12),
+      fg: theme.cyan,
+      width: 14,
+    });
+
+    const actionText = new TextRenderable(ctx, {
+      content: action,
+      fg: theme.fg,
+    });
+
+    row.add(keyText);
+    row.add(actionText);
+    container.add(row);
+  }
+
+  const footer = new TextRenderable(ctx, {
+    content: `\n  Press ? or Esc to close`,
+    fg: theme.fgDim,
+  });
+  container.add(footer);
+
+  const versionText = new TextRenderable(ctx, {
+    content: `  ${VERSION_STRING}`,
+    fg: theme.fgDim,
+  });
+  container.add(versionText);
+
+  return container;
+}

package/src/views/skill-detail.ts

@@ -0,0 +1,114 @@
+import { BoxRenderable, TextRenderable } from "@opentui/core";
+import type { RenderContext } from "@opentui/core";
+import { theme } from "../utils/colors";
+import type { SkillInfo } from "../utils/types";
+
+function detailRow(
+  ctx: RenderContext,
+  id: string,
+  label: string,
+  value: string,
+  valueColor: string = theme.fg,
+): BoxRenderable {
+  const row = new BoxRenderable(ctx, {
+    id: `detail-row-${id}`,
+    flexDirection: "row",
+    width: "100%",
+    height: 1,
+  });
+
+  const labelText = new TextRenderable(ctx, {
+    content: `${label}:`.padEnd(15),
+    fg: theme.fgDim,
+    width: 16,
+  });
+
+  const valueText = new TextRenderable(ctx, {
+    content: value,
+    fg: valueColor,
+  });
+
+  row.add(labelText);
+  row.add(valueText);
+  return row;
+}
+
+export function createDetailView(
+  ctx: RenderContext,
+  skill: SkillInfo,
+): BoxRenderable {
+  const boxWidth = 64;
+  const boxHeight = 20;
+  const top = Math.max(0, Math.floor((ctx.height - boxHeight) / 2));
+  const left = Math.max(0, Math.floor((ctx.width - boxWidth) / 2));
+
+  const container = new BoxRenderable(ctx, {
+    id: "detail-overlay",
+    border: true,
+    borderStyle: "rounded",
+    borderColor: theme.accent,
+    backgroundColor: theme.bgAlt,
+    title: ` ${skill.name} `,
+    titleAlignment: "center",
+    padding: 1,
+    flexDirection: "column",
+    gap: 0,
+    width: boxWidth,
+    height: boxHeight,
+    position: "absolute",
+    top,
+    left,
+    zIndex: 100,
+  });
+
+  container.add(detailRow(ctx, "name", "Name", skill.name, theme.accent));
+  container.add(
+    detailRow(ctx, "version", "Version", skill.version, theme.green),
+  );
+  container.add(
+    detailRow(
+      ctx,
+      "provider",
+      "Provider",
+      skill.providerLabel,
+      theme.accentAlt,
+    ),
+  );
+  container.add(
+    detailRow(ctx, "location", "Location", skill.location, theme.cyan),
+  );
+  container.add(detailRow(ctx, "path", "Path", skill.path));
+  container.add(
+    detailRow(
+      ctx,
+      "symlink",
+      "Symlink",
+      skill.isSymlink ? `yes \u2192 ${skill.symlinkTarget}` : "no",
+      skill.isSymlink ? theme.yellow : theme.fgDim,
+    ),
+  );
+  container.add(detailRow(ctx, "files", "Files", String(skill.fileCount)));
+  container.add(detailRow(ctx, "scope", "Scope", skill.scope, theme.accentAlt));
+
+  const descLabel = new TextRenderable(ctx, {
+    content: "\nDescription:",
+    fg: theme.fgDim,
+  });
+  container.add(descLabel);
+
+  const desc = skill.description || "(no description)";
+  const descText = new TextRenderable(ctx, {
+    content: `  ${desc}`,
+    fg: theme.fg,
+    width: 58,
+  });
+  container.add(descText);
+
+  const footer = new TextRenderable(ctx, {
+    content: "\n  Esc Back    d Uninstall",
+    fg: theme.fgDim,
+  });
+  container.add(footer);
+
+  return container;
+}

package/src/views/skill-list.ts

@@ -0,0 +1,122 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  SelectRenderable,
+  SelectRenderableEvents,
+} from "@opentui/core";
+import type { RenderContext } from "@opentui/core";
+import { theme } from "../utils/colors";
+import type { SkillInfo } from "../utils/types";
+
+function formatSkillRow(
+  index: number,
+  skill: SkillInfo,
+  descWidth: number,
+): string {
+  const idx = String(index).padStart(3);
+  const prefix = skill.isSymlink ? "~ " : "  ";
+  const nameMax = 24 - prefix.length;
+  const rawName =
+    skill.name.length > nameMax
+      ? skill.name.slice(0, nameMax - 3) + "..."
+      : skill.name;
+  const name = prefix + rawName;
+  const ver =
+    skill.version.length > 7 ? skill.version.slice(0, 7) : skill.version;
+  const prov =
+    skill.providerLabel.length > 11
+      ? skill.providerLabel.slice(0, 11)
+      : skill.providerLabel;
+  const scope = skill.scope;
+  const type = skill.isSymlink ? "\u2192link" : " dir ";
+  const desc =
+    descWidth > 0 ? " " + (skill.description || "").slice(0, descWidth) : "";
+  return `${idx} ${name.padEnd(24)} ${ver.padEnd(8)} ${prov.padEnd(12)} ${scope.padEnd(8)} ${type.padEnd(6)}${desc}`;
+}
+
+function buildOptions(skills: SkillInfo[], descWidth: number) {
+  if (skills.length === 0) {
+    return [
+      { name: "     (no skills found)", description: "", value: "__none__" },
+    ];
+  }
+  return skills.map((s, i) => ({
+    name: formatSkillRow(i + 1, s, descWidth),
+    description: "",
+    value: s.dirName,
+  }));
+}
+
+function calcDescWidth(termWidth: number): number {
+  // 2(border) + 2(padding) + 4(#) + 24(name) + 8(ver) + 12(provider) + 8(scope) + 6(type) + 6(spaces) = 72
+  const fixed = 72;
+  return Math.max(0, termWidth - fixed);
+}
+
+export function createSkillList(
+  ctx: RenderContext,
+  skills: SkillInfo[],
+  onSelect: (skill: SkillInfo) => void,
+  termWidth: number = 80,
+): {
+  container: BoxRenderable;
+  select: SelectRenderable;
+  update: (skills: SkillInfo[], tw?: number) => void;
+} {
+  let descWidth = calcDescWidth(termWidth);
+
+  const container = new BoxRenderable(ctx, {
+    id: "skill-list-box",
+    border: true,
+    borderStyle: "rounded",
+    borderColor: theme.border,
+    title: ` Skills (${skills.length}) `,
+    titleAlignment: "left",
+    flexDirection: "column",
+    width: "100%",
+    flexGrow: 1,
+    minHeight: 6,
+  });
+
+  // Header row
+  const descHeader = descWidth > 0 ? " Description" : "";
+  const headerRow = new TextRenderable(ctx, {
+    id: "skill-list-header",
+    content: `${"#".padStart(3)} ${"Name".padEnd(26)} ${"Ver".padEnd(8)} ${"Provider".padEnd(12)} ${"Scope".padEnd(8)} ${"Type".padEnd(6)}${descHeader}`,
+    fg: theme.fgDim,
+    height: 1,
+  });
+
+  const select = new SelectRenderable(ctx, {
+    id: "skill-select",
+    width: "100%",
+    flexGrow: 1,
+    options: buildOptions(skills, descWidth),
+    wrapSelection: true,
+    showScrollIndicator: true,
+    fastScrollStep: 5,
+    showDescription: false,
+  });
+
+  let currentSkills = skills;
+
+  (select as any).on(SelectRenderableEvents.ITEM_SELECTED, (index: number) => {
+    if (currentSkills[index]) {
+      onSelect(currentSkills[index]);
+    }
+  });
+
+  container.add(headerRow);
+  container.add(select);
+
+  function update(newSkills: SkillInfo[], tw?: number) {
+    if (tw !== undefined) {
+      descWidth = calcDescWidth(tw);
+    }
+    currentSkills = newSkills;
+    select.options = buildOptions(newSkills, descWidth);
+    container.title = ` Skills (${newSkills.length}) `;
+  }
+
+  return { container, select, update };
+}