@dealdeploy/skl 0.4.0 → 1.0.0

package/tui.ts

@@ -0,0 +1,612 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  ScrollBoxRenderable,
+  TextAttributes,
+  type KeyEvent,
+  type CliRenderer,
+} from "@opentui/core";
+import { rmSync } from "fs";
+import { join } from "path";
+import { getLockEntry, removeFromLock, catalogDir } from "./lib.ts";
+
+export type ColId = "global" | "local";
+
+export type TuiDeps = {
+  allSkills: string[];
+  globalInstalled: Set<string>;
+  localInstalled: Set<string>;
+  catalogPath: string;
+  /** Called when a skill toggle is requested. Return true on success. */
+  onToggle: (col: ColId, name: string, enable: boolean) => Promise<boolean>;
+  /** Called when a skill delete is requested. */
+  onDelete: (name: string) => Promise<void>;
+  /** Called when edit is requested. Return false to stay in TUI. */
+  onEdit: (name: string) => Promise<void>;
+  /** Called on quit. */
+  onQuit: () => void;
+};
+
+export function createTui(renderer: CliRenderer, deps: TuiDeps) {
+  const {
+    allSkills,
+    globalInstalled,
+    localInstalled,
+    catalogPath: CATALOG,
+  } = deps;
+
+  // ── Helpers ──────────────────────────────────────────────────────────
+
+  function ellipsize(text: string, max: number): string {
+    if (max <= 0) return "";
+    if (text.length <= max) return text;
+    if (max === 1) return "\u2026";
+    return `${text.slice(0, max - 1)}\u2026`;
+  }
+
+  // ── State ───────────────────────────────────────────────────────────
+
+  let cursor = 0;
+  let cursorCol: ColId = "global";
+  let focusArea: "search" | "grid" = "search";
+  let statusTimeout: ReturnType<typeof setTimeout> | null = null;
+  let pendingDelete: number | null = null;
+  const deletedSkills = new Set<number>();
+  let searchQuery = "";
+  let filteredIndices: number[] = allSkills.map((_, i) => i);
+  const COL_ORDER: ColId[] = ["global", "local"];
+
+  const pendingToggles = new Map<string, "adding" | "removing">();
+
+  // ── Colors ──────────────────────────────────────────────────────────
+
+  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(col: ColId, name: string): string {
+    const key = `${col}:${name}`;
+    if (pendingToggles.has(key)) return "[~]";
+    const set = col === "global" ? globalInstalled : localInstalled;
+    return set.has(name) ? "[x]" : "[ ]";
+  }
+
+  function checkboxColor(col: ColId, name: string, active: boolean): string {
+    const key = `${col}:${name}`;
+    if (pendingToggles.has(key)) return C.warning;
+    if (active) return C.accent;
+    const set = col === "global" ? globalInstalled : localInstalled;
+    return set.has(name) ? C.checked : C.unchecked;
+  }
+
+  function isEnabled(col: ColId, name: string): boolean {
+    return (col === "global" ? globalInstalled : localInstalled).has(name);
+  }
+
+  // ── Build TUI ───────────────────────────────────────────────────────
+
+  const outer = new BoxRenderable(renderer, {
+    id: "outer",
+    width: "100%",
+    height: "100%",
+    flexDirection: "column",
+    backgroundColor: C.bg,
+  });
+
+  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 = (renderer as any).width ?? process.stdout.columns ?? 80;
+    COL_W = Math.max(5, Math.min(14, Math.floor((w - 20) / 2)));
+    NAME_W = Math.min(40, Math.max(15, w - COL_W * 2 - 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: "Global",
+    fg: C.fgDim,
+    attributes: TextAttributes.BOLD,
+    width: COL_W,
+  });
+  const colLocal = new TextRenderable(renderer, {
+    id: "col-local",
+    content: "Local",
+    fg: C.fgDim,
+    attributes: TextAttributes.BOLD,
+    width: COL_W,
+  });
+
+  colHeaderRow.add(colName);
+  colHeaderRow.add(colGlobal);
+  colHeaderRow.add(colLocal);
+
+  const sep = new TextRenderable(renderer, {
+    id: "sep",
+    content: "\u2500".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;
+    localText: 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 globalText = new TextRenderable(renderer, {
+      id: `global-${i}`,
+      content: checkboxStr("global", skill),
+      fg: checkboxColor("global", skill, false),
+      width: COL_W,
+    });
+
+    const localText = new TextRenderable(renderer, {
+      id: `local-${i}`,
+      content: checkboxStr("local", skill),
+      fg: checkboxColor("local", skill, false),
+      width: COL_W,
+    });
+
+    row.add(nameText);
+    row.add(globalText);
+    row.add(localText);
+    scrollBox.add(row);
+    rows.push({ row, nameText, globalText, localText });
+  }
+
+  const footerSep = new TextRenderable(renderer, {
+    id: "footer-sep",
+    content: "\u2500".repeat(200),
+    fg: C.border,
+    width: "100%",
+    height: 1,
+  });
+
+  const footer = new TextRenderable(renderer, {
+    id: "footer",
+    content: " \u2191\u2193 move  \u2190\u2192/tab col  enter toggle  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);
+    }
+    if (filteredIndices.length === 0) {
+      cursor = 0;
+    } else if (cursor >= filteredIndices.length) {
+      cursor = filteredIndices.length - 1;
+    }
+  }
+
+  function updateSearchBar() {
+    if (focusArea === "search") {
+      searchBar.content = `\u25b8 ${searchQuery}\u2588`;
+      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) : 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 ? "\u25b8" : " ";
+    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 gActive = isCursor && cursorCol === "global";
+    r.globalText.content = checkboxStr("global", skill);
+    r.globalText.fg = checkboxColor("global", skill, gActive);
+    r.globalText.bg = gActive ? C.accentBg : undefined;
+    r.globalText.attributes = gActive ? TextAttributes.BOLD : TextAttributes.NONE;
+
+    const lActive = isCursor && cursorCol === "local";
+    r.localText.content = checkboxStr("local", skill);
+    r.localText.fg = checkboxColor("local", skill, lActive);
+    r.localText.bg = lActive ? C.accentBg : undefined;
+    r.localText.attributes = lActive ? 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 relayout() {
+    calcWidths();
+    colName.width = NAME_W;
+    colGlobal.width = COL_W;
+    colLocal.width = COL_W;
+    for (let i = 0; i < allSkills.length; i++) {
+      const r = rows[i]!;
+      r.nameText.width = NAME_W;
+      r.globalText.width = COL_W;
+      r.localText.width = COL_W;
+    }
+  }
+
+  function refreshAll() {
+    for (const i of filteredIndices) updateRow(i);
+    updateSearchBar();
+  }
+
+  refreshAll();
+
+  // ── Scrolling helper ────────────────────────────────────────────────
+
+  function ensureVisible() {
+    if (focusArea === "search") {
+      scrollBox.scrollTo(0);
+    } else {
+      scrollBox.scrollTo(Math.max(0, cursor + 1 - 2));
+    }
+  }
+
+  // ── Toggle skill (background) ───────────────────────────────────────
+
+  async function toggleSkill(col: ColId, name: string) {
+    const key = `${col}:${name}`;
+    if (pendingToggles.has(key)) return;
+
+    const enabled = isEnabled(col, name);
+    pendingToggles.set(key, enabled ? "removing" : "adding");
+    refreshAll();
+
+    try {
+      const ok = await deps.onToggle(col, name, !enabled);
+      if (ok) {
+        const set = col === "global" ? globalInstalled : localInstalled;
+        if (enabled) {
+          set.delete(name);
+          setStatus(`Removed ${name}`, C.statusErr);
+        } else {
+          set.add(name);
+          setStatus(`Added ${name}`, C.statusOk);
+        }
+      } else {
+        setStatus(`Failed to ${enabled ? "remove" : "add"} ${name}`, C.statusErr);
+      }
+    } finally {
+      pendingToggles.delete(key);
+      refreshAll();
+    }
+  }
+
+  // ── Edit skill ──────────────────────────────────────────────────────
+
+  async function editSkill(idx: number) {
+    const skill = allSkills[idx]!;
+    await deps.onEdit(skill);
+  }
+
+  // ── Delete skill ────────────────────────────────────────────────────
+
+  function cancelPendingDelete() {
+    if (pendingDelete !== null) {
+      pendingDelete = null;
+      statusLine.content = "";
+    }
+  }
+
+  async function deleteSkill(idx: number) {
+    const skill = allSkills[idx]!;
+
+    await deps.onDelete(skill);
+
+    globalInstalled.delete(skill);
+    localInstalled.delete(skill);
+
+    deletedSkills.add(idx);
+    rows[idx]!.row.visible = false;
+    pendingDelete = null;
+
+    applyFilter();
+    setStatus(`${skill} deleted`, C.statusErr);
+    refreshAll();
+    ensureVisible();
+  }
+
+  // ── Key handler ─────────────────────────────────────────────────────
+
+  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 {
+        deps.onQuit();
+      }
+      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;
+      }
+      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+        searchQuery += key.sequence;
+        applyFilter();
+        cursor = 0;
+        refreshAll();
+        ensureVisible();
+        return;
+      }
+      return;
+    }
+
+    // ── Grid-focused input ──
+
+    if (key.name === "backspace") return;
+    if (key.ctrl) return;
+
+    if (key.sequence === "q") {
+      deps.onQuit();
+      return;
+    }
+
+    if (key.sequence === "/") {
+      focusArea = "search";
+      refreshAll();
+      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 {
+          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]!;
+        toggleSkill(cursorCol, skill);
+        break;
+      }
+      default:
+        return;
+    }
+
+    if (prevIdx !== null && prevIdx !== currentSkillIndex()) {
+      updateRow(prevIdx);
+    }
+    const ci = currentSkillIndex();
+    if (ci !== null) updateRow(ci);
+    ensureVisible();
+  });
+
+  return {
+    refreshAll,
+    relayout,
+    get state() {
+      return {
+        cursor,
+        cursorCol,
+        focusArea,
+        searchQuery,
+        filteredIndices,
+        pendingDelete,
+        pendingToggles,
+        currentSkillIndex,
+      };
+    },
+  };
+}