@dealdeploy/skl 1.0.0 → 1.1.0

package/add-tui.test.ts

@@ -0,0 +1,338 @@
+import { test, expect } from "bun:test";
+import { createTestRenderer } from "@opentui/core/testing";
+import { createAddTui, type AddSkillEntry } from "./add-tui.ts";
+
+const WIDTH = 80;
+const HEIGHT = 15;
+
+function makeSkills(...names: string[]): AddSkillEntry[] {
+  return names.map((n) => ({
+    name: n,
+    prefix: `skills/${n}`,
+    treeSHA: `sha-${n}`,
+    exists: false,
+  }));
+}
+
+function withExists(skills: AddSkillEntry[], ...existingNames: string[]): AddSkillEntry[] {
+  return skills.map((s) => ({
+    ...s,
+    exists: existingNames.includes(s.name),
+  }));
+}
+
+function setup(skills: AddSkillEntry[], repo = "owner/repo") {
+  const confirmCalls: AddSkillEntry[][] = [];
+  let cancelCalled = false;
+
+  return {
+    confirmCalls,
+    get cancelCalled() { return cancelCalled; },
+    makeDeps() {
+      return {
+        repo,
+        skills,
+        async onConfirm(selected: AddSkillEntry[]) {
+          confirmCalls.push(selected);
+        },
+        onCancel() {
+          cancelCalled = true;
+        },
+      };
+    },
+  };
+}
+
+test("renders repo name and skill names", async () => {
+  const skills = makeSkills("alpha", "beta");
+  const ctx = setup(skills, "vercel-labs/agent-skills");
+  const { renderer, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+
+  const frame = captureCharFrame();
+  expect(frame).toContain("vercel-labs/agent-skills");
+  expect(frame).toContain("alpha");
+  expect(frame).toContain("beta");
+
+  renderer.destroy();
+});
+
+test("existing skills show [*] and (exists) label", async () => {
+  const skills = withExists(makeSkills("alpha", "beta"), "alpha");
+  const ctx = setup(skills);
+  const { renderer, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+
+  const frame = captureCharFrame();
+  const lines = frame.split("\n");
+  const alphaLine = lines.find((l) => l.includes("alpha"))!;
+  const betaLine = lines.find((l) => l.includes("beta"))!;
+
+  expect(alphaLine).toContain("[*]");
+  expect(alphaLine).toContain("(exists)");
+  expect(betaLine).toContain("[ ]");
+  expect(betaLine).not.toContain("(exists)");
+
+  renderer.destroy();
+});
+
+test("cursor starts on first addable skill, skipping existing", async () => {
+  const skills = withExists(makeSkills("alpha", "beta", "gamma"), "alpha");
+  const ctx = setup(skills);
+  const { renderer, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+
+  // alpha exists, so cursor should start on beta (index 1)
+  expect(tui.state.cursor).toBe(1);
+
+  renderer.destroy();
+});
+
+test("j/down moves cursor down, k/up moves cursor up", async () => {
+  const skills = makeSkills("alpha", "beta", "gamma");
+  const ctx = setup(skills);
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+  expect(tui.state.cursor).toBe(0);
+
+  mockInput.pressKey("j");
+  await renderOnce();
+  expect(tui.state.cursor).toBe(1);
+
+  mockInput.pressArrow("down");
+  await renderOnce();
+  expect(tui.state.cursor).toBe(2);
+
+  // Can't go past end
+  mockInput.pressKey("j");
+  await renderOnce();
+  expect(tui.state.cursor).toBe(2);
+
+  mockInput.pressKey("k");
+  await renderOnce();
+  expect(tui.state.cursor).toBe(1);
+
+  mockInput.pressArrow("up");
+  await renderOnce();
+  expect(tui.state.cursor).toBe(0);
+
+  // Can't go before start
+  mockInput.pressKey("k");
+  await renderOnce();
+  expect(tui.state.cursor).toBe(0);
+
+  renderer.destroy();
+});
+
+test("space toggles selection on addable skill", async () => {
+  const skills = makeSkills("alpha", "beta");
+  const ctx = setup(skills);
+  const { renderer, mockInput, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+
+  // Toggle alpha on
+  mockInput.pressKey(" ");
+  await renderOnce();
+  expect(tui.state.checked.has(0)).toBe(true);
+
+  const frame = captureCharFrame();
+  const lines = frame.split("\n");
+  const alphaLine = lines.find((l) => l.includes("alpha"))!;
+  expect(alphaLine).toContain("[x]");
+
+  // Toggle alpha off
+  mockInput.pressKey(" ");
+  await renderOnce();
+  expect(tui.state.checked.has(0)).toBe(false);
+
+  renderer.destroy();
+});
+
+test("space on existing skill does not toggle", async () => {
+  const skills = withExists(makeSkills("alpha", "beta"), "alpha", "beta");
+  const ctx = setup(skills);
+  const { renderer, mockInput, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+
+  mockInput.pressKey(" ");
+  await renderOnce();
+
+  expect(tui.state.checked.size).toBe(0);
+  const frame = captureCharFrame();
+  expect(frame).toContain("already exists");
+
+  renderer.destroy();
+});
+
+test("'a' selects all addable skills, toggles off if all selected", async () => {
+  const skills = withExists(makeSkills("alpha", "beta", "gamma"), "alpha");
+  const ctx = setup(skills);
+  const { renderer, mockInput, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+
+  // Select all addable
+  mockInput.pressKey("a");
+  await renderOnce();
+
+  // beta (1) and gamma (2) should be checked, alpha (0) should not
+  expect(tui.state.checked.has(0)).toBe(false);
+  expect(tui.state.checked.has(1)).toBe(true);
+  expect(tui.state.checked.has(2)).toBe(true);
+
+  const frame = captureCharFrame();
+  expect(frame).toContain("2 selected");
+
+  // Toggle all off
+  mockInput.pressKey("a");
+  await renderOnce();
+  expect(tui.state.checked.size).toBe(0);
+
+  renderer.destroy();
+});
+
+test("enter with selection calls onConfirm with selected skills", async () => {
+  const skills = makeSkills("alpha", "beta", "gamma");
+  const ctx = setup(skills);
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+
+  // Select alpha and gamma
+  mockInput.pressKey(" ");
+  await renderOnce();
+  mockInput.pressKey("j");
+  mockInput.pressKey("j");
+  await renderOnce();
+  mockInput.pressKey(" ");
+  await renderOnce();
+
+  mockInput.pressEnter();
+  await renderOnce();
+
+  expect(ctx.confirmCalls.length).toBe(1);
+  const selected = ctx.confirmCalls[0]!;
+  expect(selected.length).toBe(2);
+  expect(selected.map((s) => s.name).sort()).toEqual(["alpha", "gamma"]);
+
+  renderer.destroy();
+});
+
+test("enter with nothing selected shows warning", async () => {
+  const skills = makeSkills("alpha");
+  const ctx = setup(skills);
+  const { renderer, mockInput, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+
+  mockInput.pressEnter();
+  await renderOnce();
+
+  expect(ctx.confirmCalls.length).toBe(0);
+  const frame = captureCharFrame();
+  expect(frame).toContain("Nothing selected");
+
+  renderer.destroy();
+});
+
+test("q calls onCancel", async () => {
+  const skills = makeSkills("alpha");
+  const ctx = setup(skills);
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+
+  mockInput.pressKey("q");
+  await renderOnce();
+
+  expect(ctx.cancelCalled).toBe(true);
+
+  renderer.destroy();
+});
+
+test("escape calls onCancel", async () => {
+  const skills = makeSkills("alpha");
+  const ctx = setup(skills);
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+
+  mockInput.pressEscape();
+  await new Promise((r) => setTimeout(r, 100));
+  await renderOnce();
+
+  expect(ctx.cancelCalled).toBe(true);
+
+  renderer.destroy();
+});
+
+test("header updates with selection count", async () => {
+  const skills = makeSkills("alpha", "beta");
+  const ctx = setup(skills, "owner/repo");
+  const { renderer, mockInput, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+
+  const frame0 = captureCharFrame();
+  expect(frame0).toContain("0 selected");
+
+  mockInput.pressKey(" ");
+  await renderOnce();
+
+  const frame1 = captureCharFrame();
+  expect(frame1).toContain("1 selected");
+
+  mockInput.pressKey("j");
+  await renderOnce();
+  mockInput.pressKey(" ");
+  await renderOnce();
+
+  const frame2 = captureCharFrame();
+  expect(frame2).toContain("2 selected");
+
+  renderer.destroy();
+});
+
+test("renders without crashing with empty skills list", async () => {
+  const ctx = setup([]);
+  const { renderer, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createAddTui(renderer, ctx.makeDeps());
+  await renderOnce();
+
+  const frame = captureCharFrame();
+  expect(frame).toContain("owner/repo");
+
+  renderer.destroy();
+});

package/add-tui.ts

@@ -0,0 +1,269 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  ScrollBoxRenderable,
+  TextAttributes,
+  type KeyEvent,
+  type CliRenderer,
+} from "@opentui/core";
+
+export type AddSkillEntry = {
+  name: string;
+  prefix: string;
+  treeSHA: string;
+  exists: boolean;
+};
+
+export type AddTuiDeps = {
+  repo: string;
+  skills: AddSkillEntry[];
+  onConfirm: (selected: AddSkillEntry[]) => Promise<void>;
+  onCancel: () => void;
+};
+
+export function createAddTui(renderer: CliRenderer, deps: AddTuiDeps) {
+  const { repo, skills } = deps;
+
+  const C = {
+    bg: "#1a1a2e",
+    rowBg: "#1a1a2e",
+    rowAltBg: "#1f1f38",
+    cursorBg: "#2a2a5a",
+    border: "#444477",
+    fg: "#ccccdd",
+    fgDim: "#666688",
+    checked: "#66ff88",
+    unchecked: "#555566",
+    warning: "#ffaa44",
+    accent: "#8888ff",
+    title: "#aaaaff",
+    footer: "#888899",
+    statusOk: "#66ff88",
+    statusErr: "#ff6666",
+  };
+
+  let cursor = 0;
+  const checked = new Set<number>();
+  let statusTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  // Start cursor on first addable skill
+  for (let i = 0; i < skills.length; i++) {
+    if (!skills[i]!.exists) { cursor = i; break; }
+  }
+
+  const outer = new BoxRenderable(renderer, {
+    id: "outer",
+    width: "100%",
+    height: "100%",
+    flexDirection: "column",
+    backgroundColor: C.bg,
+  });
+
+  const header = new TextRenderable(renderer, {
+    id: "header",
+    content: ` Add skills from ${repo}`,
+    fg: C.title,
+    attributes: TextAttributes.BOLD,
+    height: 1,
+  });
+
+  const sep = new TextRenderable(renderer, {
+    id: "sep",
+    content: "\u2500".repeat(60),
+    fg: C.border,
+    height: 1,
+  });
+
+  const scrollBox = new ScrollBoxRenderable(renderer, {
+    id: "skill-list",
+    flexGrow: 1,
+    width: "100%",
+  });
+
+  type RowRefs = {
+    row: BoxRenderable;
+    checkText: TextRenderable;
+    nameText: TextRenderable;
+  };
+  const rows: RowRefs[] = [];
+
+  for (let i = 0; i < skills.length; i++) {
+    const skill = skills[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 checkText = new TextRenderable(renderer, {
+      id: `check-${i}`,
+      content: skill.exists ? "[*]" : "[ ]",
+      fg: skill.exists ? C.fgDim : C.unchecked,
+      width: 4,
+    });
+
+    const label = skill.exists ? `${skill.name} (exists)` : skill.name;
+    const nameText = new TextRenderable(renderer, {
+      id: `name-${i}`,
+      content: `  ${label}`,
+      fg: skill.exists ? C.fgDim : C.fg,
+      width: 40,
+    });
+
+    row.add(checkText);
+    row.add(nameText);
+    scrollBox.add(row);
+    rows.push({ row, checkText, nameText });
+  }
+
+  const footerSep = new TextRenderable(renderer, {
+    id: "footer-sep",
+    content: "\u2500".repeat(60),
+    fg: C.border,
+    height: 1,
+  });
+
+  const footer = new TextRenderable(renderer, {
+    id: "footer",
+    content: " j/k move  space toggle  a all  enter confirm  q cancel",
+    fg: C.footer,
+    height: 1,
+  });
+
+  const statusLine = new TextRenderable(renderer, {
+    id: "status",
+    content: "",
+    fg: C.statusOk,
+    height: 1,
+  });
+
+  outer.add(header);
+  outer.add(sep);
+  outer.add(scrollBox);
+  outer.add(footerSep);
+  outer.add(footer);
+  outer.add(statusLine);
+  renderer.root.add(outer);
+
+  function updateRow(i: number) {
+    const skill = skills[i]!;
+    const r = rows[i]!;
+    const isCursor = cursor === i;
+
+    const baseBg = i % 2 === 0 ? C.rowBg : C.rowAltBg;
+    r.row.backgroundColor = isCursor ? C.cursorBg : baseBg;
+
+    if (skill.exists) {
+      r.checkText.content = "[*]";
+      r.checkText.fg = C.fgDim;
+      const pointer = isCursor ? "\u25b8" : " ";
+      r.nameText.content = `${pointer} ${skill.name} (exists)`;
+      r.nameText.fg = C.fgDim;
+      r.nameText.attributes = isCursor ? TextAttributes.BOLD : TextAttributes.NONE;
+    } else {
+      const isChecked = checked.has(i);
+      r.checkText.content = isChecked ? "[x]" : "[ ]";
+      r.checkText.fg = isCursor ? C.accent : (isChecked ? C.checked : C.unchecked);
+      const pointer = isCursor ? "\u25b8" : " ";
+      r.nameText.content = `${pointer} ${skill.name}`;
+      r.nameText.fg = isCursor ? "#ffffff" : C.fg;
+      r.nameText.attributes = isCursor ? TextAttributes.BOLD : TextAttributes.NONE;
+    }
+  }
+
+  function setStatus(msg: string, color: string) {
+    statusLine.content = ` ${msg}`;
+    statusLine.fg = color;
+    if (statusTimeout) clearTimeout(statusTimeout);
+    statusTimeout = setTimeout(() => {
+      statusLine.content = "";
+    }, 3000);
+  }
+
+  function updateHeader() {
+    header.content = ` Add skills from ${repo}  (${checked.size} selected)`;
+  }
+
+  function refreshAll() {
+    for (let i = 0; i < skills.length; i++) updateRow(i);
+    updateHeader();
+  }
+
+  function ensureVisible() {
+    scrollBox.scrollTo(Math.max(0, cursor - 2));
+  }
+
+  refreshAll();
+
+  renderer.keyInput.on("keypress", (key: KeyEvent) => {
+    const prevCursor = cursor;
+
+    switch (key.name) {
+      case "j":
+      case "down":
+        if (cursor < skills.length - 1) cursor++;
+        break;
+      case "k":
+      case "up":
+        if (cursor > 0) cursor--;
+        break;
+      case "space": {
+        if (skills[cursor]!.exists) {
+          setStatus(`${skills[cursor]!.name} already exists`, C.warning);
+          break;
+        }
+        if (checked.has(cursor)) {
+          checked.delete(cursor);
+        } else {
+          checked.add(cursor);
+        }
+        break;
+      }
+      case "a": {
+        const addable = skills
+          .map((s, i) => (!s.exists ? i : -1))
+          .filter((i) => i >= 0);
+        const allChecked = addable.every((i) => checked.has(i));
+        if (allChecked) {
+          for (const i of addable) checked.delete(i);
+        } else {
+          for (const i of addable) checked.add(i);
+        }
+        for (const i of addable) updateRow(i);
+        updateHeader();
+        ensureVisible();
+        return;
+      }
+      case "return": {
+        const selected = [...checked].map((i) => skills[i]!);
+        if (selected.length === 0) {
+          setStatus("Nothing selected \u2014 use space to toggle", C.warning);
+          return;
+        }
+        deps.onConfirm(selected);
+        return;
+      }
+      case "q":
+      case "escape":
+        deps.onCancel();
+        return;
+      default:
+        return;
+    }
+
+    if (prevCursor !== cursor) updateRow(prevCursor);
+    updateRow(cursor);
+    updateHeader();
+    ensureVisible();
+  });
+
+  return {
+    get state() {
+      return { cursor, checked };
+    },
+  };
+}