failproofai 0.0.13 → 0.0.14-beta.0

package/src/hooks/install-prompt.ts

@@ -10,6 +10,17 @@
  * Keybindings: ↑↓ navigate · Space toggle · Ctrl+A all · Ctrl+S save · Esc clear search
  */
 import * as readline from "node:readline";
+// Brand palette, ANSI-aware truncation, and glyphs shared with the configure
+// wizard (tui.ts) so every failproofai menu reads as one system.
+import {
+  paint,
+  truncate as truncateLine,
+  BAR,
+  STEP_ACTIVE as STEP,
+  STEP_DONE as DONE,
+  CHECK_ON as BOX_ON,
+  CHECK_OFF as BOX_OFF,
+} from "./tui";
 import { BUILTIN_POLICIES } from "./builtin-policies";
 import { detectInstalledClis, getIntegration, listInstallableIds } from "./integrations";
 import { type IntegrationType } from "./types";
@@ -82,14 +93,14 @@ export async function resolveTargetClis(
       // Uninstall flow: no agent CLIs detected — nothing to remove from. Default to
       // claude so removeHooks operates over Claude's scopes (no-op if no settings file).
       console.log(
-        "\x1B[33mWarning: no agent CLI binary found in PATH (claude, codex, copilot, cursor-agent, opencode, pi, gemini). " +
+        "\x1B[33mWarning: no agent CLI binary found in PATH (claude, codex, copilot, cursor-agent, opencode, pi)." +
           "Defaulting to Claude Code; nothing will be removed if no settings file exists.\x1B[0m",
       );
       fireDetectionEvent(["claude"], "defaulted_to_claude");
       return ["claude"];
     }
     console.log(
-      "\x1B[33mWarning: no agent CLI binary found in PATH (claude, codex, copilot, cursor-agent, opencode, pi, gemini). " +
+      "\x1B[33mWarning: no agent CLI binary found in PATH (claude, codex, copilot, cursor-agent, opencode, pi)." +
         "Defaulting to Claude Code; hooks will activate when an agent is installed.\x1B[0m",
     );
     fireDetectionEvent(["claude"], "defaulted_to_claude");
@@ -246,79 +257,49 @@ async function promptCliTargetSelection(
     }
   }
 
-  function truncateLine(line: string, width: number): string {
-    let visual = 0;
-    let result = "";
-    let i = 0;
-    while (i < line.length) {
-      if (line[i] === "\x1B" && line[i + 1] === "[") {
-        let j = i + 2;
-        while (j < line.length && !/[A-Za-z]/.test(line[j])) j++;
-        j++;
-        result += line.slice(i, j);
-        i = j;
-      } else {
-        if (visual >= width) break;
-        result += line[i];
-        visual++;
-        i++;
-      }
-    }
-    return result;
-  }
+  // Shared brand painter from tui.ts (NO_COLOR-gated like the rest of this file).
+  const { dim, bold, guide: teal, pink, pinkBold } = paint(!process.env.NO_COLOR);
 
-  const heading = action === "uninstall" ? "Remove Hooks" : "Install Hooks";
+  const heading =
+    action === "uninstall" ? "Remove failproofai hooks" : "Install failproofai hooks";
 
   function render(): void {
-    const cols = process.stdout.columns || 120;
+    const cols = process.stdout.columns || 100;
     hideCursor();
 
-    const lines: string[] = [];
-    lines.push(`  \x1B[1mFailproof AI\x1B[0m \x1B[2m—\x1B[0m ${heading}`);
-    lines.push("");
+    const g = dim(BAR);
+    const lines: string[] = [g, `${teal(STEP)}  ${bold(heading)}`];
 
     for (const row of buildDisplayRows()) {
       if (row.kind === "blank") {
-        lines.push("");
+        lines.push(g);
         continue;
       }
       if (row.kind === "header") {
-        const hintVisible = row.hint ? ` · ${row.hint}` : "";
-        // Line shape: "  " + "── " + title + hintVisible + " " + dashes  → cols
-        const dashLen = Math.max(2, cols - 2 - 3 - row.title.length - hintVisible.length - 1);
-        const suffix = row.hint ? ` \x1B[2m· ${row.hint}\x1B[0m` : "";
-        lines.push(
-          `  \x1B[2m── \x1B[0m\x1B[1m${row.title}\x1B[0m${suffix} \x1B[2m${"─".repeat(dashLen)}\x1B[0m`,
-        );
+        const hint = row.hint ? `  ${dim("· " + row.hint)}` : "";
+        lines.push(`${g}  ${dim(row.title)}${hint}`);
         continue;
       }
 
       const opt = row.option;
       const isActive = row.itemIndex === cursor;
-      const pointer = isActive ? "\x1B[36m❯\x1B[0m" : " ";
-      const marker = opt.isAll
-        ? "\x1B[33m★\x1B[0m"
-        : opt.detected
-          ? "\x1B[32m●\x1B[0m"
-          : "\x1B[2m○\x1B[0m";
+      const caret = isActive ? pink("❯") : " ";
+      const marker = opt.isAll ? teal("★") : opt.detected ? pink("●") : dim("○");
       const label = isActive
-        ? `\x1B[1;36m${opt.label}\x1B[0m`
+        ? pinkBold(opt.label)
         : opt.detected
           ? opt.label
-          : `\x1B[2m${opt.label}\x1B[0m`;
-      lines.push(`  ${pointer} ${marker}  ${label}`);
+          : dim(opt.label);
+      lines.push(`${g}  ${caret} ${marker}  ${label}`);
     }
 
-    lines.push("");
-    lines.push("  \x1B[2m" + "─".repeat(Math.max(2, cols - 2)) + "\x1B[0m");
-    lines.push("  [↑↓] Move  [Enter] Select  [^C] Quit");
+    lines.push(g);
+    lines.push(`${g}  ${dim("↑/↓ move · ↵ select · esc cancel")}`);
 
     if (lastLineCount > 0) {
       process.stdout.write(`\x1B[${lastLineCount}A\x1B[J`);
     }
-    const output =
-      lines.map((l) => (l === "" ? l : truncateLine(l, cols))).join("\n") + "\n";
-    process.stdout.write(output);
+    process.stdout.write(lines.map((l) => truncateLine(l, cols)).join("\n") + "\n");
     lastLineCount = lines.length;
   }
 
@@ -340,7 +321,7 @@ async function promptCliTargetSelection(
 
     function onKey(_str: string | undefined, key: readline.Key): void {
       if (!key) return;
-      if (key.ctrl && (key.name === "c" || key.name === "d")) {
+      if ((key.ctrl && (key.name === "c" || key.name === "d")) || key.name === "escape") {
         cleanup();
         process.stdout.write("\n");
         process.exit(130); // SIGINT-equivalent
@@ -394,7 +375,19 @@ export async function promptPolicySelection(
     }));
 
   const total = items.length;
-  const WINDOW_SIZE = 8;
+  const WINDOW_SIZE = 10;
+
+  // Shared brand painter from tui.ts, bound to role names so a reader never has
+  // to decode which hue a role happens to use today (glyphs imported above).
+  const useColor = !process.env.NO_COLOR;
+  const c = paint(useColor);
+  const { dim, bold } = c;
+  const stepMark = c.guide; // ◆ step marker + live selected-count
+  const activeName = c.pinkBold; // row under the cursor
+  const selectedMark = c.pink; // checked boxes / selected names
+  const betaTag = c.softPink; // "beta" pill
+  // Fixed name column so descriptions align into a clean, scannable second column.
+  const NAME_COL = Math.min(34, Math.max(10, ...items.map((i) => i.name.length)));
 
   let cursor = 0;
   let search = "";
@@ -415,28 +408,6 @@ export async function promptPolicySelection(
     }
   }
 
-  // Truncate a line to `width` visual columns, skipping ANSI CSI sequences.
-  function truncateLine(line: string, width: number): string {
-    let visual = 0;
-    let result = "";
-    let i = 0;
-    while (i < line.length) {
-      if (line[i] === "\x1B" && line[i + 1] === "[") {
-        let j = i + 2;
-        while (j < line.length && !/[A-Za-z]/.test(line[j])) j++;
-        j++;
-        result += line.slice(i, j);
-        i = j;
-      } else {
-        if (visual >= width) break;
-        result += line[i];
-        visual++;
-        i++;
-      }
-    }
-    return result;
-  }
-
   function getFiltered(): SelectItem[] {
     if (!search) return items;
     const q = search.toLowerCase();
@@ -483,44 +454,36 @@ export async function promptPolicySelection(
   }
 
   function render(): void {
-    const cols = process.stdout.columns || 120;
+    const cols = process.stdout.columns || 100;
     hideCursor();
 
     const filtered = getFiltered();
     const shown = filtered.length;
-
-    // Clamp cursor to filtered list bounds
     if (shown > 0 && cursor >= shown) cursor = shown - 1;
+    const selectedCount = items.filter((i) => i.selected).length;
 
+    const g = dim(BAR);
     const lines: string[] = [];
 
-    // ── Title ────────────────────────────────────────────────────
-    lines.push("  Failproof AI \u2014 Policy Manager");
-    lines.push("");
-
-    // ── Bordered search box ──────────────────────────────────────
-    const innerWidth = Math.max(20, cols - 6);
-    const topBorder = "  \u250c" + "\u2500".repeat(innerWidth + 2) + "\u2510";
-    const botBorder = "  \u2514" + "\u2500".repeat(innerWidth + 2) + "\u2518";
-    const cursorChar = "\x1B[7m \x1B[0m"; // reverse-video block cursor
-    const countPart = search
-      ? ` \x1B[2m(${shown}/${total})\x1B[0m`
-      : ` \x1B[2m(${total} policies)\x1B[0m`;
-    const searchContent = `\x1B[1mSearch:\x1B[0m ${search}${cursorChar}${countPart}`;
-    lines.push(topBorder);
-    lines.push(`  \u2502 ${searchContent}`);
-    lines.push(botBorder);
-    lines.push("");
-
-    // ── Content area ─────────────────────────────────────────────
+    // header
+    lines.push(g);
+    lines.push(
+      `${stepMark(STEP)}  ${bold("Choose the policies to enable")}   ${dim("·")}   ` +
+        `${stepMark(String(selectedCount))} ${dim("selected")}`,
+    );
+
+    // search
+    const blockCursor = useColor ? "\x1B[7m \x1B[0m" : "_";
+    const countLabel = search ? dim(`${shown}/${total} shown`) : dim(`${total} policies`);
+    lines.push(`${g}  ${dim("filter ›")} ${search}${blockCursor}   ${countLabel}`);
+    lines.push(g);
+
     if (shown === 0) {
-      lines.push("  \x1B[2mNo policies match \u201c" + search + "\u201d\x1B[0m");
-      // Pad to stable height: 1 (scroll-up) + WINDOW_SIZE (rows) + 1 (scroll-down)
-      for (let i = 0; i < WINDOW_SIZE + 1; i++) lines.push("");
+      lines.push(`${g}  ${dim(`no policies match “${search}”`)}`);
+      for (let i = 0; i < WINDOW_SIZE + 1; i++) lines.push(g);
     } else {
       const displayRows = buildDisplayRows(filtered);
 
-      // Find the display row index that corresponds to the current cursor
       let cursorDisplayRow = 0;
       for (let i = 0; i < displayRows.length; i++) {
         const row = displayRows[i];
@@ -529,89 +492,42 @@ export async function promptPolicySelection(
           break;
         }
       }
-
-      // Viewport: keep cursor row roughly centred
       let windowStart = cursorDisplayRow - Math.floor(WINDOW_SIZE / 2);
       windowStart = Math.max(0, windowStart);
       windowStart = Math.min(windowStart, Math.max(0, displayRows.length - WINDOW_SIZE));
       const windowEnd = Math.min(displayRows.length, windowStart + WINDOW_SIZE);
 
-      // Scroll-up indicator (always reserve this line for stable height)
-      const aboveItems = displayRows
-        .slice(0, windowStart)
-        .filter((r) => r.kind === "item").length;
-      if (aboveItems > 0) {
-        lines.push(`  \x1B[2m  \u2191 ${aboveItems} more above\x1B[0m`);
-      } else {
-        lines.push("");
-      }
+      const aboveItems = displayRows.slice(0, windowStart).filter((r) => r.kind === "item").length;
+      lines.push(aboveItems > 0 ? `${g}  ${dim(`↑ ${aboveItems} more`)}` : g);
 
-      // Visible display rows
       for (let i = windowStart; i < windowEnd; i++) {
         const row = displayRows[i];
         if (row.kind === "header") {
-          // ── CATEGORY NAME (enabled/total) ─────
-          const label = ` ${row.category.toUpperCase()} (${row.enabledCount}/${row.totalCount}) `;
-          const prefix = "\u2500\u2500 ";
-          const prefixLen = 3 + label.length;
-          const dashLen = Math.max(2, cols - 2 - prefixLen);
-          lines.push(
-            `  \x1B[2m${prefix}${label}${"\u2500".repeat(dashLen)}\x1B[0m`,
-          );
+          lines.push(`${g}  ${dim(row.category.toUpperCase())}  ${dim(`${row.enabledCount}/${row.totalCount}`)}`);
         } else {
           const item = row.item;
-          const isActive = row.filteredIndex === cursor;
-          const pointer = isActive ? "\x1B[36m\u276f\x1B[0m" : " ";
-          const check = item.selected ? "\x1B[32m[\u2713]\x1B[0m" : "[ ]";
-          const namePart = isActive
-            ? `\x1B[1;36m${item.name}\x1B[0m`
-            : item.name;
-          const betaPart = item.beta ? " \x1B[35m[beta]\x1B[0m" : "";
-          const pad = " ".repeat(Math.max(1, 28 - item.name.length));
-          const desc = `\x1B[2m${item.description}\x1B[0m`;
-          lines.push(`  ${pointer} ${check} ${namePart}${betaPart}${pad}${desc}`);
+          const active = row.filteredIndex === cursor;
+          const box = item.selected ? selectedMark(BOX_ON) : dim(BOX_OFF);
+          const rawName = item.name.padEnd(NAME_COL);
+          const name = active ? activeName(rawName) : item.selected ? rawName : dim(rawName);
+          const beta = item.beta ? ` ${betaTag("beta")}` : "";
+          const descWidth = Math.max(8, cols - NAME_COL - 8 - (item.beta ? 5 : 0));
+          const desc = dim(truncateLine(item.description, descWidth));
+          lines.push(`${g}  ${box} ${name}${beta}  ${desc}`);
         }
       }
+      for (let i = windowEnd - windowStart; i < WINDOW_SIZE; i++) lines.push(g);
 
-      // Pad window to fixed WINDOW_SIZE rows for stable height
-      for (let i = windowEnd - windowStart; i < WINDOW_SIZE; i++) {
-        lines.push("");
-      }
-
-      // Scroll-down indicator (always reserve this line for stable height)
-      const belowItems = displayRows
-        .slice(windowEnd)
-        .filter((r) => r.kind === "item").length;
-      if (belowItems > 0) {
-        lines.push(`  \x1B[2m  \u2193 ${belowItems} more below\x1B[0m`);
-      } else {
-        lines.push("");
-      }
+      const belowItems = displayRows.slice(windowEnd).filter((r) => r.kind === "item").length;
+      lines.push(belowItems > 0 ? `${g}  ${dim(`↓ ${belowItems} more`)}` : g);
     }
 
-    // ── Footer ───────────────────────────────────────────────────
-    lines.push("");
-    lines.push("  \x1B[2m" + "\u2500".repeat(cols - 2) + "\x1B[0m");
-    lines.push(
-      "  [\u2191\u2193] Move  [Space] Toggle  [Ctrl+A] All  [Ctrl+S] Save  [Esc] Clear  [^C] Quit",
-    );
-    lines.push("");
-    lines.push(
-      "  \x1B[2mTip: `policies` for a flat list \u00b7 `policies --install <name\u2026>` to skip prompt\x1B[0m",
-    );
-    if (!includeBeta) {
-      lines.push(
-        "  \x1B[2mTip: `policies --install --beta` to include beta policies\x1B[0m",
-      );
-    }
+    // footer
+    lines.push(g);
+    lines.push(`${g}  ${dim("↑/↓ move · space select · ctrl+a all · ↵ save · type to filter · esc clear")}`);
 
-    // ── Repaint: cursor-up by previous line count, clear to end, redraw ──
-    if (lastLineCount > 0) {
-      process.stdout.write(`\x1B[${lastLineCount}A\x1B[J`);
-    }
-    const output =
-      lines.map((l) => (l === "" ? l : truncateLine(l, cols))).join("\n") + "\n";
-    process.stdout.write(output);
+    if (lastLineCount > 0) process.stdout.write(`\x1B[${lastLineCount}A\x1B[J`);
+    process.stdout.write(lines.map((l) => truncateLine(l, cols)).join("\n") + "\n");
     lastLineCount = lines.length;
   }
 
@@ -645,10 +561,19 @@ export async function promptPolicySelection(
           cursor = cursor < filtered.length - 1 ? cursor + 1 : 0;
         }
         render();
-      } else if (key.name === "return" || key.name === "space") {
+      } else if (key.name === "space") {
         const item = filtered[cursor];
         if (item) item.selected = !item.selected;
         render();
+      } else if (key.name === "return" || (key.ctrl && key.name === "s")) {
+        // Save — collapse the picker to a one-line summary, then resolve.
+        cleanup();
+        const selected = items.filter((i) => i.selected).map((i) => i.name);
+        if (lastLineCount > 0) process.stdout.write(`\x1B[${lastLineCount}A\x1B[J`);
+        process.stdout.write(
+          `${dim(BAR)}\n${dim(DONE)}  Policies\n${dim(BAR)}  ${dim(`${selected.length} selected`)}\n`,
+        );
+        resolve(selected);
       } else if (key.name === "escape") {
         // Clear search filter
         search = "";
@@ -659,12 +584,6 @@ export async function promptPolicySelection(
         const allSelected = filtered.length > 0 && filtered.every((i) => i.selected);
         for (const item of filtered) item.selected = !allSelected;
         render();
-      } else if (key.ctrl && key.name === "s") {
-        // Submit
-        cleanup();
-        const selected = items.filter((i) => i.selected).map((i) => i.name);
-        process.stdout.write("\n");
-        resolve(selected);
       } else if (key.name === "backspace" || key.name === "delete") {
         if (search.length > 0) {
           search = search.slice(0, -1);