@dealdeploy/skl 0.4.0 → 1.1.0

package/index.ts

@@ -1,29 +1,11 @@
 #!/usr/bin/env bun
 
-import {
-  createCliRenderer,
-  BoxRenderable,
-  TextRenderable,
-  ScrollBoxRenderable,
-  TextAttributes,
-  type KeyEvent,
-} from "@opentui/core";
-import {
-  readdirSync,
-  lstatSync,
-  readlinkSync,
-  symlinkSync,
-  unlinkSync,
-  mkdirSync,
-  existsSync,
-  rmSync,
-  renameSync,
-  cpSync,
-  readSync,
-} from "fs";
-import { join, resolve } from "path";
+import { createCliRenderer } from "@opentui/core";
+import { existsSync, rmSync, cpSync, mkdirSync, readdirSync } from "fs";
+import { join } from "path";
 import { homedir } from "os";
-import { findOrphanSkills, adoptSkills } from "./lib.ts";
+import { getCatalogSkills, removeFromLock, catalogDir, buildAddArgs, parseSkillsListOutput } from "./lib.ts";
+import { createTui, type ColId } from "./tui.ts";
 
 // @ts-ignore - bun supports JSON imports
 const { version: VERSION } = await import("./package.json");
@@ -34,6 +16,21 @@ if (arg === "-v" || arg === "--version") {
   console.log(`skl ${VERSION}`);
   process.exit(0);
 }
+if (arg === "-h" || arg === "--help" || arg === "help") {
+  console.log(`skl ${VERSION} — TUI skill manager for Claude Code agents
+
+Usage:
+  skl                Open the interactive TUI
+  skl add <repo>     Add skills from a GitHub repo (interactive)
+  skl add <repo> --all  Add all skills from a repo (non-interactive)
+  skl update         Update all remote skills
+  skl help           Show this help message
+
+Options:
+  -h, --help         Show this help message
+  -v, --version      Show version`);
+  process.exit(0);
+}
 
 // ── Subcommand routing ───────────────────────────────────────────────
 if (arg === "add") {
@@ -47,977 +44,116 @@ if (arg === "update") {
 
 try {
 
-// ── Constants & helpers ─────────────────────────────────────────────
-
-const LIBRARY = join(homedir(), "dotfiles/skills");
-const GLOBAL_DIR = join(homedir(), ".agents/skills");
-const GLOBAL_CLAUDE_DIR = join(homedir(), ".claude/skills");
-
-if (!existsSync(LIBRARY)) {
-  console.error(`skl: library not found at ${LIBRARY}`);
-  console.error("Create it with: mkdir -p ~/dotfiles/skills");
-  process.exit(1);
-}
-
-function ellipsize(text: string, max: number): string {
-  if (max <= 0) return "";
-  if (text.length <= max) return text;
-  if (max === 1) return "…";
-  return `${text.slice(0, max - 1)}…`;
-}
-
-// Safety: ensure skill dirs aren't symlinks pointing at the library itself
-for (const [dir, label] of [[GLOBAL_DIR, "~/.agents/skills"], [GLOBAL_CLAUDE_DIR, "~/.claude/skills"]] as const) {
-  try {
-    if (lstatSync(dir).isSymbolicLink() && resolve(readlinkSync(dir)) === resolve(LIBRARY)) {
-      console.error(`ERROR: ${label} is a symlink to the library — it must be a real directory.`);
-      console.error(`Remove it and create a real directory: rm ${label} && mkdir ${label}`);
-      process.exit(1);
-    }
-  } catch {
-    // doesn't exist yet, that's fine — toggle will mkdir
-  }
-}
-
-function isLibraryLink(dir: string, name: string): boolean {
-  const full = join(dir, name);
-  try {
-    return (
-      lstatSync(full).isSymbolicLink() &&
-      resolve(readlinkSync(full)) === resolve(join(LIBRARY, name))
-    );
-  } catch {
-    return false;
-  }
-}
-
-function nonLibraryExists(dir: string, name: string): boolean {
-  const full = join(dir, name);
-  try {
-    return existsSync(full) && !isLibraryLink(dir, name);
-  } catch {
-    return false;
-  }
-}
-
-function isLocalDir(dir: string): boolean {
-  return dir !== GLOBAL_DIR && dir !== GLOBAL_CLAUDE_DIR;
-}
-
-function isEnabled(dir: string, name: string): boolean {
-  if (isLocalDir(dir)) return existsSync(join(dir, name));
-  return isLibraryLink(dir, name);
-}
-
-function isBlocked(dir: string, name: string): boolean {
-  if (isLocalDir(dir)) return false;
-  return nonLibraryExists(dir, name);
-}
-
-function toggle(dir: string, name: string): boolean {
-  const full = join(dir, name);
-  if (isLocalDir(dir)) {
-    // Copy-based toggle for project-local dirs
-    if (existsSync(full)) {
-      rmSync(full, { recursive: true, force: true });
-      return true;
-    }
-    // Remove any broken symlink left from old behavior
-    try { rmSync(full, { force: true }); } catch {}
-    mkdirSync(dir, { recursive: true });
-    cpSync(join(LIBRARY, name), full, { recursive: true });
-    return true;
-  }
-  // Symlink-based toggle for global dirs
-  if (isLibraryLink(dir, name)) {
-    unlinkSync(full);
-    return true;
-  }
-  if (existsSync(full)) {
-    return false;
-  }
-  mkdirSync(dir, { recursive: true });
-  symlinkSync(join(LIBRARY, name), full);
-  return true;
-}
-
-function findLocalDir(): string | null {
-  const dir = join(process.cwd(), ".agents/skills");
-  if (existsSync(dir)) return dir;
-  return null;
-}
-
-function ensureLocalDir(): string {
-  if (localDir) return localDir;
-  const dir = join(process.cwd(), ".agents/skills");
-  mkdirSync(dir, { recursive: true });
-  localDir = dir;
-  localLabel = dir.replace(homedir(), "~");
-  colLocal.content = ellipsize(localLabel, COL_W - 1);
-  refreshAll();
-  return dir;
-}
-
-function findLocalClaudeDir(): string | null {
-  const dir = join(process.cwd(), ".claude/skills");
-  if (existsSync(dir)) return dir;
-  return null;
-}
-
-function ensureLocalClaudeDir(): string {
-  if (localClaudeDir) return localClaudeDir;
-  const dir = join(process.cwd(), ".claude/skills");
-  mkdirSync(dir, { recursive: true });
-  localClaudeDir = dir;
-  localClaudeLabel = dir.replace(homedir(), "~");
-  colLocalClaude.content = ellipsize(localClaudeLabel, COL_W - 1);
-  refreshAll();
-  return dir;
-}
-
-// ── Migration check ──────────────────────────────────────────────────
-{
-  // Only migrate global dirs — project-local dirs use copies, not symlinks
-  const dirsToCheck: [string, string][] = [
-    [GLOBAL_DIR, "~/.agents/skills"],
-    [GLOBAL_CLAUDE_DIR, "~/.claude/skills"],
-  ];
-
-  const migrations: { dir: string; label: string; name: string; conflict: boolean }[] = [];
-
-  for (const [dir, label] of dirsToCheck) {
-    try {
-      for (const name of readdirSync(dir)) {
-        if (!isLibraryLink(dir, name)) {
-          migrations.push({ dir, label, name, conflict: existsSync(join(LIBRARY, name)) });
-        }
-      }
-    } catch {
-      // dir doesn't exist
-    }
-  }
-
-  if (migrations.length > 0) {
-    console.log("\nFound skills not managed by library:");
-    for (const m of migrations) {
-      console.log(`  ${m.label}/${m.name}${m.conflict ? "  (already in library)" : ""}`);
-    }
-    process.stdout.write(`\nMigrate to ${LIBRARY.replace(homedir(), "~")} and replace with symlinks? [y/N] `);
-
-    const buf = new Uint8Array(100);
-    const n = readSync(0, buf);
-    const answer = new TextDecoder().decode(buf.subarray(0, n)).trim().toLowerCase();
-
-    if (answer === "y" || answer === "yes") {
-      let migrated = 0;
-      for (const m of migrations) {
-        const src = join(m.dir, m.name);
-        const dest = join(LIBRARY, m.name);
-        if (m.conflict) {
-          // Library already has this skill — remove local and symlink to library
-          rmSync(src, { recursive: true, force: true });
-          symlinkSync(dest, src);
-          console.log(`  replaced ${m.name} (library version kept)`);
-        } else {
-          try {
-            renameSync(src, dest);
-          } catch {
-            // cross-device fallback
-            cpSync(src, dest, { recursive: true });
-            rmSync(src, { recursive: true, force: true });
-          }
-          symlinkSync(dest, src);
-          console.log(`  migrated ${m.name}`);
-        }
-        migrated++;
-      }
-      console.log(`\n${migrated} migrated\n`);
-    } else {
-      console.log("Skipping migration.\n");
-    }
-  }
-}
-
-// ── Local symlink → copy conversion ─────────────────────────────────
-{
-  const localDirsToCheck: [string, string][] = [];
-  const ld = findLocalDir();
-  if (ld) localDirsToCheck.push([ld, ld.replace(homedir(), "~")]);
-  const lcd = findLocalClaudeDir();
-  if (lcd) localDirsToCheck.push([lcd, lcd.replace(homedir(), "~")]);
+// ── Migration: ~/dotfiles/skills → ~/.skl/catalog ───────────────────
+const OLD_LIBRARY = join(homedir(), "dotfiles/skills");
+const CATALOG = catalogDir();
 
-  const localSymlinks: { dir: string; label: string; name: string; target: string }[] = [];
-
-  for (const [dir, label] of localDirsToCheck) {
+if (!existsSync(CATALOG) && existsSync(OLD_LIBRARY)) {
+  console.log("Migrating skills from ~/dotfiles/skills to ~/.skl/catalog...");
+  mkdirSync(CATALOG, { recursive: true });
+  for (const name of readdirSync(OLD_LIBRARY)) {
+    const src = join(OLD_LIBRARY, name);
+    const dest = join(CATALOG, name);
     try {
-      for (const name of readdirSync(dir)) {
-        const full = join(dir, name);
-        try {
-          if (lstatSync(full).isSymbolicLink()) {
-            localSymlinks.push({ dir, label, name, target: readlinkSync(full) });
-          }
-        } catch {}
-      }
+      cpSync(src, dest, { recursive: true });
+      console.log(`  ${name}`);
     } catch {}
   }
-
-  if (localSymlinks.length > 0) {
-    console.log("\nFound symlinked skills in project-local dirs:");
-    for (const s of localSymlinks) {
-      console.log(`  ${s.label}/${s.name} → ${s.target}`);
-    }
-    process.stdout.write("\nConvert to local copies? (recommended for portability) [y/N] ");
-
-    const buf = new Uint8Array(100);
-    const n = readSync(0, buf);
-    const answer = new TextDecoder().decode(buf.subarray(0, n)).trim().toLowerCase();
-
-    if (answer === "y" || answer === "yes") {
-      let converted = 0;
-      for (const s of localSymlinks) {
-        const full = join(s.dir, s.name);
-        const libPath = join(LIBRARY, s.name);
-        unlinkSync(full);
-        if (existsSync(libPath)) {
-          cpSync(libPath, full, { recursive: true });
-          console.log(`  converted ${s.name}`);
-          converted++;
-        } else {
-          console.log(`  removed ${s.name} (not in library)`);
-        }
-      }
-      console.log(`\n${converted} converted\n`);
-    } else {
-      console.log("Skipping conversion.\n");
-    }
-  }
-}
-
-// ── Adopt local-only skills into library ────────────────────────────
-{
-  const localDirsToScan: string[] = [];
-  const ld = findLocalDir();
-  if (ld) localDirsToScan.push(ld);
-  const lcd = findLocalClaudeDir();
-  if (lcd) localDirsToScan.push(lcd);
-
-  const orphans = findOrphanSkills(localDirsToScan, LIBRARY);
-
-  if (orphans.length > 0) {
-    console.log("\nFound skills in this repo not in your library:");
-    for (const o of orphans) {
-      console.log(`  ${o.dir.replace(homedir(), "~")}/${o.name}`);
-    }
-    process.stdout.write(`\nCopy to ${LIBRARY.replace(homedir(), "~")}? [y/N] `);
-
-    const buf = new Uint8Array(100);
-    const n = readSync(0, buf);
-    const answer = new TextDecoder().decode(buf.subarray(0, n)).trim().toLowerCase();
-
-    if (answer === "y" || answer === "yes") {
-      const results = adoptSkills(orphans, LIBRARY);
-      for (const r of results) {
-        console.log(`  copied ${r.name}`);
-      }
-      console.log(`\n${results.filter(r => r.copied).length} added to library\n`);
-    } else {
-      console.log("Skipping.\n");
-    }
-  }
+  console.log("Done. You can remove ~/dotfiles/skills when ready.\n");
 }
 
-const allSkills = readdirSync(LIBRARY).sort();
-
-// ── State ───────────────────────────────────────────────────────────
-
-type ColId = "global" | "globalClaude" | "local" | "localClaude";
-
-let cursor = 0; // index into filteredIndices
-let cursorCol: ColId = "global";
-let focusArea: "search" | "grid" = "search";
-let localDir = findLocalDir();
-let localClaudeDir = findLocalClaudeDir();
-let statusTimeout: ReturnType<typeof setTimeout> | null = null;
-let pendingDelete: number | null = null; // allSkills index awaiting confirmation
-const deletedSkills = new Set<number>();
-let searchQuery = "";
-let filteredIndices: number[] = allSkills.map((_, i) => i);
-const COL_ORDER: ColId[] = ["global", "globalClaude", "local", "localClaude"];
+mkdirSync(CATALOG, { recursive: true });
 
-// ── Colors ──────────────────────────────────────────────────────────
+// ── Load installed state from skills CLI ─────────────────────────────
 
-const C = {
-  bg: "#1a1a2e",
-  rowBg: "#1a1a2e",
-  rowAltBg: "#1f1f38",
-  cursorBg: "#2a2a5a",
-  accentBg: "#3a3a7a",
-  border: "#444477",
-  fg: "#ccccdd",
-  fgDim: "#666688",
-  checked: "#66ff88",
-  unchecked: "#555566",
-  warning: "#ffaa44",
-  accent: "#8888ff",
-  title: "#aaaaff",
-  footer: "#888899",
-  statusOk: "#66ff88",
-  statusErr: "#ff6666",
-  search: "#ffdd55",
-};
-
-// ── Checkbox helpers ────────────────────────────────────────────────
-
-function checkboxStr(checked: boolean, blocked: boolean): string {
-  if (blocked) return "[!]";
-  return checked ? "[x]" : "[ ]";
+async function listInstalled(global: boolean): Promise<Set<string>> {
+  const args = ["npx", "-y", "skills", "list", "--json"];
+  if (global) args.push("-g");
+  try {
+    const proc = Bun.spawn(args, { stdout: "pipe", stderr: "pipe" });
+    const out = await new Response(proc.stdout).text();
+    const code = await proc.exited;
+    if (code !== 0) return new Set();
+    return new Set(parseSkillsListOutput(out.trim()));
+  } catch {}
+  return new Set();
 }
 
-function checkboxColor(checked: boolean, blocked: boolean, active: boolean): string {
-  if (blocked) return C.warning;
-  if (active) return C.accent;
-  return checked ? C.checked : C.unchecked;
-}
+process.stdout.write("Loading installed skills...");
+const [globalInstalled, localInstalled] = await Promise.all([
+  listInstalled(true),
+  listInstalled(false),
+]);
+console.log(" done");
 
-// ── Build TUI ───────────────────────────────────────────────────────
+// ── Create TUI ──────────────────────────────────────────────────────
 
 const renderer = await createCliRenderer({ exitOnCtrlC: true });
 
-const outer = new BoxRenderable(renderer, {
-  id: "outer",
-  width: "100%",
-  height: "100%",
-  flexDirection: "column",
-  backgroundColor: C.bg,
-});
-
-// Search bar (lives inside scrollBox as the first row)
-const searchRow = new BoxRenderable(renderer, {
-  id: "search-row",
-  flexDirection: "row",
-  height: 1,
-  width: "100%",
-  paddingLeft: 1,
-  backgroundColor: C.rowBg,
-});
-const searchBar = new TextRenderable(renderer, {
-  id: "search-bar",
-  content: "",
-  fg: C.search,
-  height: 1,
-});
-searchRow.add(searchBar);
-
-const colHeaderRow = new BoxRenderable(renderer, {
-  id: "col-header-row",
-  flexDirection: "row",
-  height: 1,
-  paddingLeft: 1,
-});
-
-let COL_W = 14;
-let NAME_W = 34;
-
-function calcWidths() {
-  const w = process.stdout.columns || 80;
-  COL_W = Math.max(5, Math.min(14, Math.floor((w - 20) / 4)));
-  NAME_W = Math.min(34, Math.max(15, w - COL_W * 4 - 1));
-}
-calcWidths();
-
-const colName = new TextRenderable(renderer, {
-  id: "col-name",
-  content: "Skill",
-  fg: C.fgDim,
-  attributes: TextAttributes.BOLD,
-  width: NAME_W,
-});
-const colGlobal = new TextRenderable(renderer, {
-  id: "col-global",
-  content: "~/.agents",
-  fg: C.fgDim,
-  attributes: TextAttributes.BOLD,
-  width: COL_W,
-});
-const colGlobalClaude = new TextRenderable(renderer, {
-  id: "col-global-claude",
-  content: "~/.claude",
-  fg: C.fgDim,
-  attributes: TextAttributes.BOLD,
-  width: COL_W,
-});
-let localLabel = localDir ? localDir.replace(homedir(), "~") : ".agents/skills";
-const colLocal = new TextRenderable(renderer, {
-  id: "col-local",
-  content: ellipsize(localLabel, COL_W - 1),
-  fg: C.fgDim,
-  attributes: TextAttributes.BOLD,
-  width: COL_W,
-});
-let localClaudeLabel = localClaudeDir ? localClaudeDir.replace(homedir(), "~") : ".claude/skills";
-const colLocalClaude = new TextRenderable(renderer, {
-  id: "col-local-claude",
-  content: ellipsize(localClaudeLabel, COL_W - 1),
-  fg: C.fgDim,
-  attributes: TextAttributes.BOLD,
-  width: COL_W,
-});
-
-colHeaderRow.add(colName);
-colHeaderRow.add(colGlobal);
-colHeaderRow.add(colGlobalClaude);
-colHeaderRow.add(colLocal);
-colHeaderRow.add(colLocalClaude);
-
-const sep = new TextRenderable(renderer, {
-  id: "sep",
-  content: "─".repeat(200),
-  fg: C.border,
-  width: "100%",
-  height: 1,
-});
-
-const scrollBox = new ScrollBoxRenderable(renderer, {
-  id: "skill-list",
-  flexGrow: 1,
-  width: "100%",
-});
-
-type RowRefs = {
-  row: BoxRenderable;
-  nameText: TextRenderable;
-  globalText: TextRenderable;
-  globalClaudeText: TextRenderable;
-  localText: TextRenderable;
-  localClaudeText: TextRenderable;
-};
-const rows: RowRefs[] = [];
-
-scrollBox.add(searchRow);
-
-for (let i = 0; i < allSkills.length; i++) {
-  const skill = allSkills[i];
-
-  const row = new BoxRenderable(renderer, {
-    id: `row-${i}`,
-    flexDirection: "row",
-    height: 1,
-    width: "100%",
-    paddingLeft: 1,
-    backgroundColor: i % 2 === 0 ? C.rowBg : C.rowAltBg,
-  });
-
-  const nameText = new TextRenderable(renderer, {
-    id: `name-${i}`,
-    content: `  ${ellipsize(skill, NAME_W - 3)}`,
-    fg: C.fg,
-    width: NAME_W,
-  });
-
-  const gChecked = isLibraryLink(GLOBAL_DIR, skill);
-  const gBlocked = nonLibraryExists(GLOBAL_DIR, skill);
-  const globalText = new TextRenderable(renderer, {
-    id: `global-${i}`,
-    content: checkboxStr(gChecked, gBlocked),
-    fg: checkboxColor(gChecked, gBlocked, false),
-    width: COL_W,
-  });
-
-  const gcChecked = isLibraryLink(GLOBAL_CLAUDE_DIR, skill);
-  const gcBlocked = nonLibraryExists(GLOBAL_CLAUDE_DIR, skill);
-  const globalClaudeText = new TextRenderable(renderer, {
-    id: `global-claude-${i}`,
-    content: checkboxStr(gcChecked, gcBlocked),
-    fg: checkboxColor(gcChecked, gcBlocked, false),
-    width: COL_W,
-  });
-
-  const lChecked = localDir ? isEnabled(localDir, skill) : false;
-  const lBlocked = localDir ? isBlocked(localDir, skill) : false;
-  const localText = new TextRenderable(renderer, {
-    id: `local-${i}`,
-    content: localDir ? checkboxStr(lChecked, lBlocked) : "  -",
-    fg: localDir ? checkboxColor(lChecked, lBlocked, false) : C.fgDim,
-    width: COL_W,
-  });
-
-  const lcChecked = localClaudeDir ? isEnabled(localClaudeDir, skill) : false;
-  const lcBlocked = localClaudeDir ? isBlocked(localClaudeDir, skill) : false;
-  const localClaudeText = new TextRenderable(renderer, {
-    id: `local-claude-${i}`,
-    content: localClaudeDir ? checkboxStr(lcChecked, lcBlocked) : "  -",
-    fg: localClaudeDir ? checkboxColor(lcChecked, lcBlocked, false) : C.fgDim,
-    width: COL_W,
-  });
-
-  row.add(nameText);
-  row.add(globalText);
-  row.add(globalClaudeText);
-  row.add(localText);
-  row.add(localClaudeText);
-  scrollBox.add(row);
-  rows.push({ row, nameText, globalText, globalClaudeText, localText, localClaudeText });
-}
-
-const footerSep = new TextRenderable(renderer, {
-  id: "footer-sep",
-  content: "─".repeat(200),
-  fg: C.border,
-  width: "100%",
-  height: 1,
-});
-
-const footer = new TextRenderable(renderer, {
-  id: "footer",
-  content: " ↑↓ move  ←→/tab col  enter toggle  a all  e edit  d del  / search  q/esc quit",
-  fg: C.footer,
-  height: 1,
-});
-
-const statusLine = new TextRenderable(renderer, {
-  id: "status",
-  content: "",
-  fg: C.statusOk,
-  height: 1,
-});
-
-outer.add(colHeaderRow);
-outer.add(sep);
-outer.add(scrollBox);
-outer.add(footerSep);
-outer.add(footer);
-outer.add(statusLine);
-renderer.root.add(outer);
-
-// ── Search / filter ─────────────────────────────────────────────────
-
-function applyFilter() {
-  const term = searchQuery.toLowerCase();
-  filteredIndices = [];
-  for (let i = 0; i < allSkills.length; i++) {
-    if (deletedSkills.has(i)) {
-      rows[i].row.visible = false;
-      continue;
-    }
-    const match = !term || allSkills[i].toLowerCase().includes(term);
-    rows[i].row.visible = match;
-    if (match) filteredIndices.push(i);
-  }
-  // clamp cursor
-  if (filteredIndices.length === 0) {
-    cursor = 0;
-  } else if (cursor >= filteredIndices.length) {
-    cursor = filteredIndices.length - 1;
-  }
-}
-
-function updateSearchBar() {
-  if (focusArea === "search") {
-    searchBar.content = `▸ ${searchQuery}█`;
-    searchBar.fg = C.search;
-    searchRow.backgroundColor = C.cursorBg;
-  } else {
-    searchBar.content = searchQuery ? `  ${searchQuery}` : `  search...`;
-    searchBar.fg = C.fgDim;
-    searchRow.backgroundColor = C.rowBg;
-  }
-}
-
-// ── Update display ──────────────────────────────────────────────────
-
-function currentSkillIndex(): number | null {
-  return filteredIndices.length > 0 ? filteredIndices[cursor] : null;
-}
-
-function updateRow(i: number) {
-  const skill = allSkills[i];
-  const r = rows[i];
-  const ci = currentSkillIndex();
-  const isCursor = ci === i && focusArea === "grid";
-
-  const visPos = filteredIndices.indexOf(i);
-  const baseBg = visPos % 2 === 0 ? C.rowBg : C.rowAltBg;
-  r.row.backgroundColor = isCursor ? C.cursorBg : baseBg;
-
-  const pointer = isCursor ? "▸" : " ";
-  r.nameText.content = `${pointer} ${ellipsize(skill, NAME_W - 3)}`;
-  r.nameText.fg = isCursor ? "#ffffff" : C.fg;
-  r.nameText.attributes = isCursor ? TextAttributes.BOLD : TextAttributes.NONE;
-
-  const gChecked = isLibraryLink(GLOBAL_DIR, skill);
-  const gBlocked = nonLibraryExists(GLOBAL_DIR, skill);
-  const gActive = isCursor && cursorCol === "global";
-  r.globalText.content = checkboxStr(gChecked, gBlocked);
-  r.globalText.fg = checkboxColor(gChecked, gBlocked, gActive);
-  r.globalText.bg = gActive ? C.accentBg : undefined;
-  r.globalText.attributes = gActive ? TextAttributes.BOLD : TextAttributes.NONE;
-
-  const gcChecked = isLibraryLink(GLOBAL_CLAUDE_DIR, skill);
-  const gcBlocked = nonLibraryExists(GLOBAL_CLAUDE_DIR, skill);
-  const gcActive = isCursor && cursorCol === "globalClaude";
-  r.globalClaudeText.content = checkboxStr(gcChecked, gcBlocked);
-  r.globalClaudeText.fg = checkboxColor(gcChecked, gcBlocked, gcActive);
-  r.globalClaudeText.bg = gcActive ? C.accentBg : undefined;
-  r.globalClaudeText.attributes = gcActive ? TextAttributes.BOLD : TextAttributes.NONE;
-
-  const lChecked = localDir ? isEnabled(localDir, skill) : false;
-  const lBlocked = localDir ? isBlocked(localDir, skill) : false;
-  const lActive = isCursor && cursorCol === "local";
-  if (localDir) {
-    r.localText.content = checkboxStr(lChecked, lBlocked);
-    r.localText.fg = checkboxColor(lChecked, lBlocked, lActive);
-    r.localText.bg = lActive ? C.accentBg : undefined;
-    r.localText.attributes = lActive ? TextAttributes.BOLD : TextAttributes.NONE;
-  } else {
-    r.localText.content = "  -";
-    r.localText.fg = C.fgDim;
-    r.localText.bg = lActive ? C.accentBg : undefined;
-  }
-
-  const lcChecked = localClaudeDir ? isEnabled(localClaudeDir, skill) : false;
-  const lcBlocked = localClaudeDir ? isBlocked(localClaudeDir, skill) : false;
-  const lcActive = isCursor && cursorCol === "localClaude";
-  if (localClaudeDir) {
-    r.localClaudeText.content = checkboxStr(lcChecked, lcBlocked);
-    r.localClaudeText.fg = checkboxColor(lcChecked, lcBlocked, lcActive);
-    r.localClaudeText.bg = lcActive ? C.accentBg : undefined;
-    r.localClaudeText.attributes = lcActive ? TextAttributes.BOLD : TextAttributes.NONE;
-  } else {
-    r.localClaudeText.content = "  -";
-    r.localClaudeText.fg = C.fgDim;
-    r.localClaudeText.bg = lcActive ? C.accentBg : undefined;
-  }
-}
-
-function setStatus(msg: string, color: string) {
-  statusLine.content = ` ${msg}`;
-  statusLine.fg = color;
-  if (statusTimeout) clearTimeout(statusTimeout);
-  statusTimeout = setTimeout(() => {
-    statusLine.content = "";
-  }, 3000);
-}
-
-function relayout() {
-  calcWidths();
-  colName.width = NAME_W;
-  colGlobal.width = COL_W;
-  colGlobalClaude.width = COL_W;
-  colLocal.width = COL_W;
-  colLocal.content = ellipsize(localLabel, COL_W - 1);
-  colLocalClaude.width = COL_W;
-  colLocalClaude.content = ellipsize(localClaudeLabel, COL_W - 1);
-  for (let i = 0; i < allSkills.length; i++) {
-    const r = rows[i];
-    r.nameText.width = NAME_W;
-    r.globalText.width = COL_W;
-    r.globalClaudeText.width = COL_W;
-    r.localText.width = COL_W;
-    r.localClaudeText.width = COL_W;
-  }
-}
-
-process.stdout.on("resize", () => {
-  relayout();
-  refreshAll();
-});
-
-function refreshAll() {
-  for (const i of filteredIndices) updateRow(i);
-  updateSearchBar();
-}
-
-refreshAll();
-
-// ── Scrolling helper ────────────────────────────────────────────────
-
-function ensureVisible() {
-  if (focusArea === "search") {
-    scrollBox.scrollTo(0);
-  } else {
-    // +1 offset because searchRow is child 0 in scrollBox
-    scrollBox.scrollTo(Math.max(0, cursor + 1 - 2));
-  }
-}
-
-// ── Toggle all in column ────────────────────────────────────────────
-
-function toggleAllColumn(col: ColId) {
-  let dir: string;
-  let dirLabel: string;
-  switch (col) {
-    case "global": dir = GLOBAL_DIR; dirLabel = "~/.agents"; break;
-    case "globalClaude": dir = GLOBAL_CLAUDE_DIR; dirLabel = "~/.claude"; break;
-    case "local": dir = ensureLocalDir(); dirLabel = localLabel; break;
-    case "localClaude": dir = ensureLocalClaudeDir(); dirLabel = localClaudeLabel; break;
-  }
-
-  // Determine intent: if majority of visible skills are linked, unlink all; otherwise link all
-  let linkedCount = 0;
-  for (const i of filteredIndices) {
-    if (isEnabled(dir, allSkills[i])) linkedCount++;
-  }
-  const shouldLink = linkedCount <= filteredIndices.length / 2;
-  let changed = 0;
-  let skipped = 0;
-
-  for (const i of filteredIndices) {
-    const skill = allSkills[i];
-    const isLinked = isEnabled(dir, skill);
-    if (shouldLink && !isLinked) {
-      if (toggle(dir, skill)) changed++;
-      else skipped++;
-    } else if (!shouldLink && isLinked) {
-      if (toggle(dir, skill)) changed++;
-    }
-  }
-
-  const action = shouldLink ? "linked" : "unlinked";
-  let msg = `${action} ${changed} skills in ${dirLabel}`;
-  if (skipped) msg += ` (${skipped} skipped)`;
-  setStatus(msg, shouldLink ? C.statusOk : C.statusErr);
-}
-
-// ── Edit skill ──────────────────────────────────────────────────
-
-async function editSkill(idx: number) {
-  const skill = allSkills[idx];
-  const skillPath = join(LIBRARY, skill);
-  renderer.destroy();
-  const editor = process.env.EDITOR || "nvim";
-  const proc = Bun.spawn([editor, skillPath], {
-    stdio: ["inherit", "inherit", "inherit"],
-  });
-  await proc.exited;
-  // Re-exec so the TUI picks up any changes
-  const self = Bun.spawn(["bun", ...process.argv.slice(1)], {
-    stdio: ["inherit", "inherit", "inherit"],
-  });
-  await self.exited;
-  process.exit(0);
-}
-
-// ── Delete skill ────────────────────────────────────────────────
-
-function cancelPendingDelete() {
-  if (pendingDelete !== null) {
-    pendingDelete = null;
-    statusLine.content = "";
-  }
-}
-
-function deleteSkill(idx: number) {
-  const skill = allSkills[idx];
-
-  // Remove from all skill dirs (symlinks for global, copies for local)
-  if (isLibraryLink(GLOBAL_DIR, skill)) unlinkSync(join(GLOBAL_DIR, skill));
-  if (isLibraryLink(GLOBAL_CLAUDE_DIR, skill)) unlinkSync(join(GLOBAL_CLAUDE_DIR, skill));
-  if (localDir && existsSync(join(localDir, skill))) rmSync(join(localDir, skill), { recursive: true, force: true });
-  if (localClaudeDir && existsSync(join(localClaudeDir, skill))) rmSync(join(localClaudeDir, skill), { recursive: true, force: true });
-
-  // Remove from library
-  rmSync(join(LIBRARY, skill), { recursive: true, force: true });
-
-  // Mark deleted and hide
-  deletedSkills.add(idx);
-  rows[idx].row.visible = false;
-  pendingDelete = null;
-
-  applyFilter();
-  setStatus(`🗑 ${skill} deleted`, C.statusErr);
-  refreshAll();
-  ensureVisible();
-}
-
-// ── Key handler ─────────────────────────────────────────────────────
-
-function dirForCol(col: ColId): { dir: string; label: string } {
-  switch (col) {
-    case "global": return { dir: GLOBAL_DIR, label: "~/.agents/skills" };
-    case "globalClaude": return { dir: GLOBAL_CLAUDE_DIR, label: "~/.claude/skills" };
-    case "local": return { dir: ensureLocalDir(), label: localLabel };
-    case "localClaude": return { dir: ensureLocalClaudeDir(), label: localClaudeLabel };
-  }
-}
-
-function colNext(col: ColId): ColId {
-  const i = COL_ORDER.indexOf(col);
-  return COL_ORDER[(i + 1) % COL_ORDER.length];
-}
-
-function colPrev(col: ColId): ColId {
-  const i = COL_ORDER.indexOf(col);
-  return COL_ORDER[(i - 1 + COL_ORDER.length) % COL_ORDER.length];
-}
-
-renderer.keyInput.on("keypress", (key: KeyEvent) => {
-  // ── Delete confirmation mode ──
-  if (pendingDelete !== null) {
-    if (key.name === "y") {
-      deleteSkill(pendingDelete);
-    } else {
-      cancelPendingDelete();
-      setStatus("delete cancelled", C.fgDim);
-    }
-    return;
-  }
-
-  const prevIdx = currentSkillIndex();
-
-  // ── Escape ──
-  if (key.name === "escape") {
-    if (focusArea === "search" && searchQuery) {
-      searchQuery = "";
-      applyFilter();
-      refreshAll();
-      ensureVisible();
-    } else if (focusArea === "search") {
-      focusArea = "grid";
-      refreshAll();
-      ensureVisible();
-    } else {
-      renderer.destroy();
-      process.exit(0);
-    }
-    return;
-  }
-
-  // ── Search-focused input ──
-  if (focusArea === "search") {
-    if (key.name === "backspace") {
-      if (searchQuery) {
-        searchQuery = searchQuery.slice(0, -1);
-        applyFilter();
-        cursor = 0;
-        refreshAll();
-        ensureVisible();
-      }
-      return;
-    }
-    if (key.name === "down" || key.name === "return") {
-      focusArea = "grid";
-      refreshAll();
-      ensureVisible();
-      return;
-    }
-    // Printable character → append to search
-    if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
-      searchQuery += key.sequence;
-      applyFilter();
-      cursor = 0;
-      refreshAll();
-      ensureVisible();
-      return;
-    }
-    return;
-  }
-
-  // ── Grid-focused input ──
-
-  // ── Backspace in grid: do nothing ──
-  if (key.name === "backspace") return;
-
-  if (key.ctrl) return;
-
-  // ── Single-key shortcuts ──
-  if (key.sequence === "q") {
+const tui = createTui(renderer, {
+  allSkills: getCatalogSkills(),
+  globalInstalled,
+  localInstalled,
+  catalogPath: CATALOG,
+
+  async onToggle(col: ColId, name: string, enable: boolean) {
+    const isGlobal = col === "global";
+    const args = enable
+      ? buildAddArgs(CATALOG, name, isGlobal)
+      : ["remove", name, "-y", ...(isGlobal ? ["-g"] : [])];
+    const proc = Bun.spawn(["npx", "-y", "skills", ...args], {
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+    const code = await proc.exited;
+    return code === 0;
+  },
+
+  async onDelete(name: string) {
+    const procs = [];
+    if (globalInstalled.has(name)) {
+      procs.push(
+        Bun.spawn(["npx", "-y", "skills", "remove", name, "-y", "-g"], {
+          stdout: "pipe", stderr: "pipe",
+        })
+      );
+    }
+    if (localInstalled.has(name)) {
+      procs.push(
+        Bun.spawn(["npx", "-y", "skills", "remove", name, "-y"], {
+          stdout: "pipe", stderr: "pipe",
+        })
+      );
+    }
+    for (const p of procs) await p.exited;
+    rmSync(join(CATALOG, name), { recursive: true, force: true });
+    removeFromLock(name);
+  },
+
+  async onEdit(name: string) {
+    const skillPath = join(CATALOG, name);
     renderer.destroy();
+    const editor = process.env.EDITOR || "nvim";
+    const proc = Bun.spawn([editor, skillPath], {
+      stdio: ["inherit", "inherit", "inherit"],
+    });
+    await proc.exited;
+    const self = Bun.spawn(["bun", ...process.argv.slice(1)], {
+      stdio: ["inherit", "inherit", "inherit"],
+    });
+    await self.exited;
     process.exit(0);
-  }
+  },
 
-  if (key.sequence === "/") {
-    focusArea = "search";
-    refreshAll();
-    ensureVisible();
-    return;
-  }
-
-  if (key.sequence === "a") {
-    toggleAllColumn(cursorCol);
-    for (const i of filteredIndices) updateRow(i);
-    ensureVisible();
-    return;
-  }
-
-  if (key.sequence === "e") {
-    const idx = currentSkillIndex();
-    if (idx !== null) editSkill(idx);
-    return;
-  }
-
-  if (key.sequence === "d") {
-    const idx = currentSkillIndex();
-    if (idx !== null) {
-      pendingDelete = idx;
-      setStatus(`delete ${allSkills[idx]}? (y to confirm)`, C.warning);
-    }
-    return;
-  }
-
-  // ── Navigation & actions ──
-  switch (key.name) {
-    case "down":
-      if (cursor < filteredIndices.length - 1) cursor++;
-      break;
-    case "up":
-      if (cursor > 0) {
-        cursor--;
-      } else {
-        // At top of grid → move to search
-        focusArea = "search";
-        refreshAll();
-        return;
-      }
-      break;
-    case "left":
-      cursorCol = colPrev(cursorCol);
-      break;
-    case "right":
-      cursorCol = colNext(cursorCol);
-      break;
-    case "tab":
-      cursorCol = colNext(cursorCol);
-      break;
-    case "pagedown":
-      cursor = Math.min(filteredIndices.length - 1, cursor + 10);
-      break;
-    case "pageup":
-      cursor = Math.max(0, cursor - 10);
-      break;
-    case "home":
-      cursor = 0;
-      break;
-    case "end":
-      cursor = Math.max(0, filteredIndices.length - 1);
-      break;
-    case "space":
-    case "return": {
-      const idx = currentSkillIndex();
-      if (idx === null) break;
-      const skill = allSkills[idx];
-      const { dir, label } = dirForCol(cursorCol);
-      const ok = toggle(dir, skill);
-      if (ok) {
-        const linked = isEnabled(dir, skill);
-        setStatus(
-          linked ? `✓ ${skill} → ${label}` : `✗ ${skill} removed from ${label}`,
-          linked ? C.statusOk : C.statusErr
-        );
-      } else {
-        setStatus(`⚠ ${skill}: non-library file exists in ${label}, skipped`, C.warning);
-      }
-      break;
-    }
-    default:
-      return;
-  }
+  onQuit() {
+    renderer.destroy();
+    process.exit(0);
+  },
+});
 
-  if (prevIdx !== null && prevIdx !== currentSkillIndex()) {
-    updateRow(prevIdx);
-  }
-  const ci = currentSkillIndex();
-  if (ci !== null) updateRow(ci);
-  ensureVisible();
+process.stdout.on("resize", () => {
+  tui.relayout();
+  tui.refreshAll();
 });
 
 } catch (err: any) {