agent-skill-manager 1.0.0

package/src/utils/colors.ts

@@ -0,0 +1,16 @@
+export const theme = {
+  bg: "#1a1b26",
+  bgAlt: "#24283b",
+  fg: "#c0caf5",
+  fgDim: "#565f89",
+  accent: "#7aa2f7",
+  accentAlt: "#bb9af7",
+  green: "#9ece6a",
+  red: "#f7768e",
+  yellow: "#e0af68",
+  cyan: "#7dcfff",
+  orange: "#ff9e64",
+  border: "#3b4261",
+  borderFocus: "#7aa2f7",
+  white: "#FFFFFF",
+} as const;

package/src/utils/frontmatter.ts

@@ -0,0 +1,87 @@
+export function parseFrontmatter(content: string): Record<string, string> {
+  const result: Record<string, string> = {};
+  const lines = content.split("\n");
+
+  let inFrontmatter = false;
+  let foundFirst = false;
+  let currentKey: string | null = null;
+  let currentValue: string[] = [];
+  let multilineMode: "none" | "literal" | "folded" = "none";
+  let baseIndent = -1;
+
+  function flushKey() {
+    if (currentKey) {
+      const joined = currentValue.join(" ").trim();
+      if (joined) result[currentKey] = joined;
+      currentKey = null;
+      currentValue = [];
+      multilineMode = "none";
+      baseIndent = -1;
+    }
+  }
+
+  for (const line of lines) {
+    if (line.trim() === "---") {
+      if (!foundFirst) {
+        foundFirst = true;
+        inFrontmatter = true;
+        continue;
+      } else {
+        flushKey();
+        break;
+      }
+    }
+
+    if (!inFrontmatter) continue;
+
+    // Check if this is a continuation line (indented) for a multiline value
+    if (multilineMode !== "none" && currentKey) {
+      const stripped = line.replace(/^\s*/, "");
+      const indent = line.length - stripped.length;
+
+      // Continuation line: must be indented more than the key
+      if (indent > 0 && stripped.length > 0) {
+        if (baseIndent === -1) baseIndent = indent;
+        currentValue.push(stripped);
+        continue;
+      } else if (stripped.length === 0) {
+        // Blank line inside multiline — skip it
+        continue;
+      } else {
+        // Not indented — end of multiline, fall through to parse as new key
+        flushKey();
+      }
+    }
+
+    // Try to match a key: value line
+    const match = line.match(/^(\w[\w-]*):\s*(.*?)\s*$/);
+    if (match) {
+      flushKey();
+      const key = match[1];
+      const rawValue = match[2];
+
+      if (rawValue === "|" || rawValue === ">") {
+        // Multiline block scalar
+        currentKey = key;
+        currentValue = [];
+        multilineMode = rawValue === "|" ? "literal" : "folded";
+      } else if (
+        rawValue === "|+" ||
+        rawValue === ">+" ||
+        rawValue === "|-" ||
+        rawValue === ">-"
+      ) {
+        currentKey = key;
+        currentValue = [];
+        multilineMode = rawValue.startsWith("|") ? "literal" : "folded";
+      } else {
+        // Single-line value — strip surrounding quotes
+        const cleaned = rawValue.replace(/^["']|["']$/g, "");
+        if (cleaned) result[key] = cleaned;
+      }
+    }
+  }
+
+  flushKey();
+  return result;
+}

package/src/utils/types.ts

@@ -0,0 +1,57 @@
+// ─── Skill Types ────────────────────────────────────────────────────────────
+
+export interface SkillInfo {
+  name: string;
+  version: string;
+  description: string;
+  dirName: string;
+  path: string;
+  originalPath: string;
+  location: string;
+  scope: "global" | "project";
+  provider: string;
+  providerLabel: string;
+  isSymlink: boolean;
+  symlinkTarget: string | null;
+  fileCount: number;
+}
+
+export interface RemovalPlan {
+  directories: Array<{ path: string; isSymlink: boolean }>;
+  ruleFiles: string[];
+  agentsBlocks: Array<{ file: string; skillName: string }>;
+}
+
+// ─── Config Types ───────────────────────────────────────────────────────────
+
+export interface ProviderConfig {
+  name: string;
+  label: string;
+  global: string;
+  project: string;
+  enabled: boolean;
+}
+
+export interface CustomPathConfig {
+  path: string;
+  label: string;
+  scope: "global" | "project";
+}
+
+export interface UserPreferences {
+  defaultScope: Scope;
+  defaultSort: SortBy;
+}
+
+export interface AppConfig {
+  version: number;
+  providers: ProviderConfig[];
+  customPaths: CustomPathConfig[];
+  preferences: UserPreferences;
+}
+
+// ─── UI Types ───────────────────────────────────────────────────────────────
+
+export type Scope = "global" | "project" | "both";
+export type SortBy = "name" | "version" | "location";
+export type ViewState = "dashboard" | "detail" | "confirm" | "help" | "config";

package/src/utils/version.ts

@@ -0,0 +1,20 @@
+import { resolve } from "path";
+
+const pkg = await Bun.file(
+  resolve(import.meta.dir, "../../package.json"),
+).json();
+
+let commitHash = "unknown";
+try {
+  const proc = Bun.spawn(["git", "rev-parse", "--short", "HEAD"], {
+    stdout: "pipe",
+    stderr: "pipe",
+  });
+  commitHash = (await new Response(proc.stdout).text()).trim() || "unknown";
+} catch {
+  // Not in a git repo or git not available
+}
+
+export const VERSION = pkg.version as string;
+export const COMMIT_HASH = commitHash;
+export const VERSION_STRING = `v${VERSION} (${COMMIT_HASH})`;

package/src/views/config.ts

@@ -0,0 +1,147 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  SelectRenderable,
+  SelectRenderableEvents,
+} from "@opentui/core";
+import type { RenderContext } from "@opentui/core";
+import { theme } from "../utils/colors";
+import { getConfigPath } from "../config";
+import type { AppConfig } from "../utils/types";
+
+function providerRow(
+  label: string,
+  globalPath: string,
+  projectPath: string,
+  enabled: boolean,
+): string {
+  const status = enabled ? "\u2714 ON " : "\u2718 OFF";
+  const statusColor = enabled ? "on" : "off";
+  const name = label.length > 14 ? label.slice(0, 14) : label;
+  return `${status}  ${name.padEnd(15)} ${globalPath}`;
+}
+
+export function createConfigView(
+  ctx: RenderContext,
+  config: AppConfig,
+  onClose: (updatedConfig: AppConfig) => void,
+): BoxRenderable {
+  const boxWidth = 72;
+  const providerCount = config.providers.length;
+  const boxHeight = Math.min(providerCount + 14, 30);
+  const top = Math.max(0, Math.floor((ctx.height - boxHeight) / 2));
+  const left = Math.max(0, Math.floor((ctx.width - boxWidth) / 2));
+
+  // Clone config so mutations don't affect original until close
+  const editConfig: AppConfig = JSON.parse(JSON.stringify(config));
+
+  const container = new BoxRenderable(ctx, {
+    id: "config-overlay",
+    border: true,
+    borderStyle: "rounded",
+    borderColor: theme.accent,
+    backgroundColor: theme.bgAlt,
+    title: " Configuration ",
+    titleAlignment: "center",
+    padding: 1,
+    flexDirection: "column",
+    gap: 1,
+    width: boxWidth,
+    height: boxHeight,
+    position: "absolute",
+    top,
+    left,
+    zIndex: 100,
+  });
+
+  // Config file path
+  const pathText = new TextRenderable(ctx, {
+    id: "config-path",
+    content: `Config: ${getConfigPath()}`,
+    fg: theme.fgDim,
+  });
+  container.add(pathText);
+
+  // Section header
+  const headerText = new TextRenderable(ctx, {
+    id: "config-header",
+    content: "Providers (Enter to toggle, e to edit config file):",
+    fg: theme.yellow,
+  });
+  container.add(headerText);
+
+  // Build provider options
+  function buildProviderOptions() {
+    return editConfig.providers.map((p) => ({
+      name: providerRow(p.label, p.global, p.project, p.enabled),
+      description: `Project: ${p.project}`,
+      value: p.name,
+    }));
+  }
+
+  const select = new SelectRenderable(ctx, {
+    id: "config-select",
+    width: "100%",
+    flexGrow: 1,
+    options: buildProviderOptions(),
+    wrapSelection: true,
+    showDescription: true,
+    showScrollIndicator: true,
+  });
+
+  (select as any).on(SelectRenderableEvents.ITEM_SELECTED, (index: number) => {
+    // Toggle enabled state on Enter
+    if (index >= 0 && index < editConfig.providers.length) {
+      editConfig.providers[index].enabled =
+        !editConfig.providers[index].enabled;
+      select.options = buildProviderOptions();
+    }
+  });
+
+  container.add(select);
+
+  // Custom paths section
+  if (editConfig.customPaths.length > 0) {
+    const customHeader = new TextRenderable(ctx, {
+      id: "config-custom-header",
+      content: "\nCustom Paths:",
+      fg: theme.yellow,
+    });
+    container.add(customHeader);
+
+    for (let i = 0; i < editConfig.customPaths.length; i++) {
+      const cp = editConfig.customPaths[i];
+      const cpText = new TextRenderable(ctx, {
+        id: `config-custom-${i}`,
+        content: `  ${cp.label}: ${cp.path} (${cp.scope})`,
+        fg: theme.fg,
+      });
+      container.add(cpText);
+    }
+  }
+
+  // Preferences
+  const prefText = new TextRenderable(ctx, {
+    id: "config-prefs",
+    content: `\nDefaults: scope=${editConfig.preferences.defaultScope}, sort=${editConfig.preferences.defaultSort}`,
+    fg: theme.fgDim,
+  });
+  container.add(prefText);
+
+  // Footer
+  const footer = new TextRenderable(ctx, {
+    id: "config-footer",
+    content: "  Enter Toggle  e Edit file  Esc Save & close",
+    fg: theme.fgDim,
+  });
+  container.add(footer);
+
+  // Expose select for keyboard handling and store onClose callback
+  (container as any).__configSelect = select;
+  (container as any).__editConfig = editConfig;
+  (container as any).__onClose = onClose;
+
+  select.focus();
+
+  return container;
+}

package/src/views/confirm.ts

@@ -0,0 +1,105 @@
+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";
+
+export interface ConfirmResult {
+  confirmed: boolean;
+}
+
+export function createConfirmView(
+  ctx: RenderContext,
+  skill: SkillInfo,
+  targets: string[],
+  onResult: (result: ConfirmResult) => void,
+): BoxRenderable {
+  const boxWidth = 60;
+  const boxHeight = Math.min(targets.length + 10, 24);
+  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: "confirm-overlay",
+    border: true,
+    borderStyle: "rounded",
+    borderColor: theme.red,
+    backgroundColor: theme.bgAlt,
+    title: ` Uninstall: ${skill.name} `,
+    titleAlignment: "center",
+    padding: 1,
+    flexDirection: "column",
+    gap: 1,
+    width: boxWidth,
+    height: boxHeight,
+    position: "absolute",
+    top,
+    left,
+    zIndex: 100,
+  });
+
+  const header = new TextRenderable(ctx, {
+    content: "The following will be removed:",
+    fg: theme.yellow,
+  });
+  container.add(header);
+
+  const targetBox = new BoxRenderable(ctx, {
+    id: "confirm-targets",
+    flexDirection: "column",
+    width: "100%",
+    paddingLeft: 1,
+  });
+
+  if (targets.length === 0) {
+    const noTargets = new TextRenderable(ctx, {
+      content: "  (no files found to remove)",
+      fg: theme.fgDim,
+    });
+    targetBox.add(noTargets);
+  } else {
+    for (let i = 0; i < targets.length; i++) {
+      const targetText = new TextRenderable(ctx, {
+        id: `confirm-target-${i}`,
+        content: `✗ ${targets[i]}`,
+        fg: theme.red,
+      });
+      targetBox.add(targetText);
+    }
+  }
+  container.add(targetBox);
+
+  const spacer = new TextRenderable(ctx, {
+    content: "",
+    height: 1,
+  });
+  container.add(spacer);
+
+  const select = new SelectRenderable(ctx, {
+    id: "confirm-select",
+    width: 30,
+    height: 4,
+    options: [
+      { name: "Yes, uninstall", description: "", value: "yes" },
+      { name: "Cancel", description: "", value: "cancel" },
+    ],
+    wrapSelection: true,
+    selectedIndex: 1,
+  });
+
+  (select as any).on(
+    SelectRenderableEvents.ITEM_SELECTED,
+    (_index: number, option: any) => {
+      onResult({ confirmed: option.value === "yes" });
+    },
+  );
+
+  container.add(select);
+  select.focus();
+
+  return container;
+}

package/src/views/dashboard.ts

@@ -0,0 +1,252 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  TabSelectRenderable,
+  TabSelectRenderableEvents,
+  TextareaRenderable,
+  ASCIIFontRenderable,
+} from "@opentui/core";
+import type { RenderContext } from "@opentui/core";
+import { theme } from "../utils/colors";
+import type { SkillInfo, Scope, SortBy, AppConfig } from "../utils/types";
+
+const SORT_OPTIONS: SortBy[] = ["name", "version", "location"];
+
+export interface DashboardComponents {
+  root: BoxRenderable;
+  banner: ASCIIFontRenderable;
+  scopeTabs: TabSelectRenderable;
+  searchInput: TextareaRenderable;
+  statsBar: BoxRenderable;
+  contentArea: BoxRenderable;
+  footerText: TextRenderable;
+  updateStats: (skills: SkillInfo[]) => void;
+  updateSortLabel: (by: SortBy) => void;
+  updateProviderInfo: (config: AppConfig) => void;
+}
+
+function buildScopeDescription(
+  config: AppConfig,
+  type: "global" | "project",
+): string {
+  const labels = config.providers.filter((p) => p.enabled).map((p) => p.label);
+  if (labels.length <= 3) return labels.join(", ");
+  return labels.slice(0, 2).join(", ") + ` +${labels.length - 2}`;
+}
+
+export function createDashboard(
+  ctx: RenderContext,
+  config: AppConfig,
+  onScopeChange: (scope: Scope) => void,
+): DashboardComponents {
+  // Root layout
+  const root = new BoxRenderable(ctx, {
+    id: "dashboard-root",
+    flexDirection: "column",
+    width: "100%",
+    height: "100%",
+    padding: 1,
+    gap: 0,
+  });
+
+  // ASCII banner
+  const banner = new ASCIIFontRenderable(ctx, {
+    id: "banner",
+    text: "skill-manager",
+    color: theme.accent,
+  });
+  root.add(banner);
+
+  // Stats bar (moved to top, right after banner)
+  const statsBar = new BoxRenderable(ctx, {
+    id: "stats-bar",
+    border: true,
+    borderStyle: "rounded",
+    borderColor: theme.border,
+    title: " Stats ",
+    titleAlignment: "left",
+    flexDirection: "row",
+    width: "100%",
+    height: 3,
+    paddingLeft: 1,
+    paddingRight: 1,
+    gap: 3,
+  });
+
+  const totalStat = new TextRenderable(ctx, {
+    id: "stat-total",
+    content: "Total: 0",
+    fg: theme.fg,
+  });
+  const globalStat = new TextRenderable(ctx, {
+    id: "stat-global",
+    content: "Global: 0",
+    fg: theme.cyan,
+  });
+  const projectStat = new TextRenderable(ctx, {
+    id: "stat-project",
+    content: "Project: 0",
+    fg: theme.green,
+  });
+  const symlinkStat = new TextRenderable(ctx, {
+    id: "stat-symlinks",
+    content: "Symlinks: 0",
+    fg: theme.yellow,
+  });
+  const providerStat = new TextRenderable(ctx, {
+    id: "stat-providers",
+    content: "Providers: 0",
+    fg: theme.accentAlt,
+  });
+
+  // Sort info with separator
+  const sortSeparator = new TextRenderable(ctx, {
+    id: "sort-sep",
+    content: "\u2502",
+    fg: theme.border,
+  });
+  const sortLabel = new TextRenderable(ctx, {
+    id: "sort-label",
+    content: buildSortLabel("name"),
+    fg: theme.fgDim,
+  });
+
+  statsBar.add(totalStat);
+  statsBar.add(globalStat);
+  statsBar.add(projectStat);
+  statsBar.add(symlinkStat);
+  statsBar.add(providerStat);
+  statsBar.add(sortSeparator);
+  statsBar.add(sortLabel);
+  root.add(statsBar);
+
+  // Scope tabs row
+  const tabRow = new BoxRenderable(ctx, {
+    id: "tab-row",
+    flexDirection: "row",
+    width: "100%",
+    height: 1,
+    alignItems: "center",
+    gap: 2,
+  });
+
+  const globalDesc = buildScopeDescription(config, "global");
+  const projectDesc = buildScopeDescription(config, "project");
+
+  const scopeTabs = new TabSelectRenderable(ctx, {
+    id: "scope-tabs",
+    options: [
+      { name: "Global", description: globalDesc, value: "global" },
+      { name: "Project", description: projectDesc, value: "project" },
+      { name: "Both", description: "All locations", value: "both" },
+    ],
+    tabWidth: 12,
+    showUnderline: false,
+    wrapSelection: true,
+    height: 1,
+    width: 42,
+  });
+
+  (scopeTabs as any).on(
+    TabSelectRenderableEvents.ITEM_SELECTED,
+    (_index: number, option: any) => {
+      onScopeChange(option.value as Scope);
+    },
+  );
+
+  tabRow.add(scopeTabs);
+  root.add(tabRow);
+
+  // Search box
+  const searchBox = new BoxRenderable(ctx, {
+    id: "search-box",
+    border: true,
+    borderStyle: "rounded",
+    borderColor: theme.border,
+    title: " Filter ",
+    titleAlignment: "left",
+    width: "100%",
+    height: 3,
+  });
+
+  const searchInput = new TextareaRenderable(ctx, {
+    id: "search-input",
+    width: "100%",
+    height: 1,
+    placeholder: "type to search...",
+    placeholderColor: theme.fgDim,
+  });
+
+  searchBox.add(searchInput);
+  root.add(searchBox);
+
+  // Content area (skill list gets inserted here)
+  const contentArea = new BoxRenderable(ctx, {
+    id: "content-area",
+    flexDirection: "column",
+    width: "100%",
+    flexGrow: 1,
+    minHeight: 6,
+  });
+  root.add(contentArea);
+
+  // Footer
+  const footerText = new TextRenderable(ctx, {
+    id: "footer",
+    content:
+      "  \u2191/\u2193 Navigate  Enter View  d Uninstall  / Filter  Tab Scope  s Sort  r Refresh  c Config  q Quit  ? Help",
+    fg: theme.fgDim,
+    height: 1,
+    width: "100%",
+  });
+  root.add(footerText);
+
+  function buildSortLabel(by: SortBy): string {
+    return (
+      "(s) Sort: " +
+      SORT_OPTIONS.map((o) => (o === by ? `[${o}]` : o)).join("  ")
+    );
+  }
+
+  function updateStats(skills: SkillInfo[]) {
+    const total = skills.length;
+    const unique = new Set(skills.map((s) => s.dirName)).size;
+    const globalCount = skills.filter((s) => s.scope === "global").length;
+    const projectCount = skills.filter((s) => s.scope === "project").length;
+    const symlinks = skills.filter((s) => s.isSymlink).length;
+    const providers = new Set(skills.map((s) => s.provider)).size;
+
+    totalStat.content = `Total: ${total} (${unique} unique)`;
+    globalStat.content = `Global: ${globalCount}`;
+    projectStat.content = `Project: ${projectCount}`;
+    symlinkStat.content = `Symlinks: ${symlinks}`;
+    providerStat.content = `Providers: ${providers}`;
+  }
+
+  function updateSortLabel(by: SortBy) {
+    sortLabel.content = buildSortLabel(by);
+  }
+
+  function updateProviderInfo(newConfig: AppConfig) {
+    const newGlobalDesc = buildScopeDescription(newConfig, "global");
+    const newProjectDesc = buildScopeDescription(newConfig, "project");
+    scopeTabs.options = [
+      { name: "Global", description: newGlobalDesc, value: "global" },
+      { name: "Project", description: newProjectDesc, value: "project" },
+      { name: "Both", description: "All locations", value: "both" },
+    ];
+  }
+
+  return {
+    root,
+    banner,
+    scopeTabs,
+    searchInput,
+    statsBar,
+    contentArea,
+    footerText,
+    updateStats,
+    updateSortLabel,
+    updateProviderInfo,
+  };
+}