ccperm 1.5.1 → 1.6.0

package/dist/interactive.js

@@ -6,6 +6,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.startInteractive = startInteractive;
 const node_readline_1 = __importDefault(require("node:readline"));
 const colors_js_1 = require("./colors.js");
+// strip ANSI escape codes for visible length
+function visLen(s) {
+    return s.replace(/\x1b\[[0-9;]*m/g, '').length;
+}
+function boxLine(text, width) {
+    const vis = visLen(text);
+    const padRight = Math.max(0, width - vis - 1);
+    return `${colors_js_1.DIM}│${colors_js_1.NC} ${text}${' '.repeat(padRight)}${colors_js_1.DIM}│${colors_js_1.NC}`;
+}
+function boxTop(title, info, width) {
+    const inner = width - 2;
+    const titlePart = ` ${title} `;
+    const infoPart = info ? ` ${info} ` : '';
+    const fill = Math.max(0, inner - titlePart.length - infoPart.length);
+    return `${colors_js_1.DIM}┌${titlePart}${'─'.repeat(fill)}${infoPart}┐${colors_js_1.NC}`;
+}
+function boxBottom(hint, width) {
+    const inner = width - 2;
+    const hintPart = ` ${hint} `;
+    const fill = Math.max(0, inner - hintPart.length);
+    return `${colors_js_1.DIM}└${'─'.repeat(fill)}${hintPart}┘${colors_js_1.NC}`;
+}
+function boxSep(width) {
+    return `${colors_js_1.DIM}├${'─'.repeat(width - 2)}┤${colors_js_1.NC}`;
+}
 function startInteractive(merged, results) {
     return new Promise((resolve) => {
         const withPerms = merged.filter((r) => r.totalCount > 0).sort((a, b) => b.totalCount - a.totalCount);
@@ -26,16 +51,11 @@ function startInteractive(merged, results) {
             process.stdin.pause();
             process.stdin.removeListener('keypress', onKey);
             process.removeListener('SIGINT', onSigint);
-            // show cursor
             process.stdout.write('\x1b[?25h');
         };
-        const onSigint = () => {
-            cleanup();
-            process.exit(0);
-        };
+        const onSigint = () => { cleanup(); process.exit(0); };
         process.on('SIGINT', onSigint);
         const render = () => {
-            // clear screen + move cursor home + hide cursor
             process.stdout.write('\x1b[2J\x1b[H\x1b[?25l');
             if (state.view === 'list')
                 renderList(state, withPerms, emptyCount);
@@ -52,12 +72,10 @@ function startInteractive(merged, results) {
                 return;
             }
             if (state.view === 'list') {
-                if (key.name === 'up') {
+                if (key.name === 'up')
                     state.cursor = Math.max(0, state.cursor - 1);
-                }
-                else if (key.name === 'down') {
+                else if (key.name === 'down')
                     state.cursor = Math.min(withPerms.length - 1, state.cursor + 1);
-                }
                 else if (key.name === 'return') {
                     state.selectedProject = state.cursor;
                     state.detailCursor = 0;
@@ -67,7 +85,6 @@ function startInteractive(merged, results) {
                 }
             }
             else {
-                // detail view
                 if (key.name === 'escape' || key.name === 'backspace') {
                     state.view = 'list';
                     state.detailCursor = 0;
@@ -80,7 +97,6 @@ function startInteractive(merged, results) {
                     state.detailCursor++;
                 }
                 else if (key.name === 'return') {
-                    // toggle handled in renderDetail via detailRows
                     state._toggle = true;
                 }
             }
@@ -93,29 +109,30 @@ function startInteractive(merged, results) {
 function renderList(state, withPerms, emptyCount) {
     const rows = process.stdout.rows || 24;
     const cols = process.stdout.columns || 80;
+    const w = Math.min(cols, 82);
+    const inner = w - 4; // box border + 1 space each side
     const cats = ['Bash', 'WebFetch', 'MCP', 'Tools'];
     const catsPresent = cats.filter((c) => withPerms.some((r) => r.groups.has(c)));
-    const nameWidth = Math.min(Math.max(...withPerms.map((r) => r.shortName.length), 7), 40);
-    // header takes 4 lines, footer takes 3 lines
-    const headerLines = 4;
-    const footerLines = 3 + (emptyCount > 0 ? 1 : 0);
-    const visibleRows = Math.max(1, rows - headerLines - footerLines);
-    // adjust scroll offset
+    const catColWidth = catsPresent.length * 7;
+    const nameWidth = Math.min(Math.max(...withPerms.map((r) => r.shortName.length), 7), inner - catColWidth - 8);
+    // box takes: top(1) + header(2) + sep(1) + content + emptyLine?(1) + sep(1) + bottom(1) = 6-7 + content
+    const chrome = 6 + (emptyCount > 0 ? 1 : 0);
+    const visibleRows = Math.max(1, rows - chrome);
     if (state.cursor < state.scrollOffset)
         state.scrollOffset = state.cursor;
     if (state.cursor >= state.scrollOffset + visibleRows)
         state.scrollOffset = state.cursor - visibleRows + 1;
+    const scrollInfo = withPerms.length > visibleRows ? `${state.cursor + 1}/${withPerms.length}` : '';
     const lines = [];
-    const scrollInfo = withPerms.length > visibleRows ? `  ${colors_js_1.DIM}${state.cursor + 1}/${withPerms.length}${colors_js_1.NC}` : '';
-    lines.push(`  ${colors_js_1.CYAN}${colors_js_1.BOLD}ccperm${colors_js_1.NC} ${colors_js_1.DIM}interactive${colors_js_1.NC}${scrollInfo}\n`);
-    lines.push(`  ${colors_js_1.DIM}${pad('PROJECT', nameWidth)}  ${catsPresent.map((c) => rpad(c, 5)).join('  ')}  TOTAL${colors_js_1.NC}`);
-    lines.push(`  ${colors_js_1.DIM}${'─'.repeat(nameWidth + catsPresent.length * 7 + 8)}${colors_js_1.NC}`);
+    lines.push(boxTop('ccperm', scrollInfo, w));
+    lines.push(boxLine(`${colors_js_1.DIM}${pad('PROJECT', nameWidth)}  ${catsPresent.map((c) => rpad(c, 5)).join('  ')}  TOTAL${colors_js_1.NC}`, w));
+    lines.push(boxSep(w));
     const end = Math.min(state.scrollOffset + visibleRows, withPerms.length);
     for (let i = state.scrollOffset; i < end; i++) {
         const r = withPerms[i];
         const isCursor = i === state.cursor;
         const truncName = r.shortName.length > nameWidth ? r.shortName.slice(0, nameWidth - 1) + '…' : r.shortName;
-        const marker = isCursor ? `${colors_js_1.CYAN}> ` : '  ';
+        const marker = isCursor ? `${colors_js_1.CYAN}▸ ` : '  ';
         const nameStyle = isCursor ? `${colors_js_1.BOLD}` : `${colors_js_1.DIM}`;
         const nameCol = `${marker}${nameStyle}${pad(truncName, nameWidth)}${colors_js_1.NC}`;
         const catCols = catsPresent.map((c) => {
@@ -125,18 +142,18 @@ function renderList(state, withPerms, emptyCount) {
             return `${colors_js_1.DIM}${rpad('·', 5)}${colors_js_1.NC}`;
         }).join('  ');
         const totalCol = isCursor ? `${colors_js_1.BOLD}${rpad(r.totalCount, 5)}${colors_js_1.NC}` : rpad(r.totalCount, 5);
-        lines.push(`${nameCol}  ${catCols}  ${totalCol}`);
+        lines.push(boxLine(`${nameCol}  ${catCols}  ${totalCol}`, w));
     }
     if (emptyCount > 0) {
-        lines.push(`\n  ${colors_js_1.DIM}+ ${emptyCount} projects with no permissions${colors_js_1.NC}`);
+        lines.push(boxLine(`${colors_js_1.DIM}+ ${emptyCount} projects with no permissions${colors_js_1.NC}`, w));
     }
-    lines.push('');
-    lines.push(`  ${colors_js_1.DIM}[↑↓] navigate  [Enter] detail  [q] quit${colors_js_1.NC}`);
+    lines.push(boxBottom('[↑↓] navigate  [Enter] detail  [q] quit', w));
     process.stdout.write(lines.join('\n') + '\n');
 }
 function renderDetail(state, withPerms, results) {
     const rows = process.stdout.rows || 24;
     const cols = process.stdout.columns || 80;
+    const w = Math.min(cols, 82);
     const project = withPerms[state.selectedProject];
     if (!project)
         return;
@@ -153,17 +170,17 @@ function renderDetail(state, withPerms, results) {
         if (result.totalCount === 0)
             continue;
         const fileName = result.display.replace(/.*\/\.claude\//, '');
-        navRows.push({ line: `  ${colors_js_1.CYAN}${fileName}${colors_js_1.NC}  ${colors_js_1.DIM}(${result.totalCount})${colors_js_1.NC}` });
+        navRows.push({ text: `${colors_js_1.CYAN}${fileName}${colors_js_1.NC}  ${colors_js_1.DIM}(${result.totalCount})${colors_js_1.NC}` });
         for (const group of result.groups) {
             const key = `${result.path}:${group.category}`;
             const isOpen = state.expanded.has(key);
             const arrow = isOpen ? '▾' : '▸';
-            navRows.push({ line: `    ${colors_js_1.YELLOW}${arrow} ${group.category}${colors_js_1.NC} ${colors_js_1.DIM}(${group.items.length})${colors_js_1.NC}`, key });
+            navRows.push({ text: `  ${colors_js_1.YELLOW}${arrow} ${group.category}${colors_js_1.NC} ${colors_js_1.DIM}(${group.items.length})${colors_js_1.NC}`, key });
             if (isOpen) {
-                const maxLen = cols - 10;
+                const maxLen = w - 12;
                 for (const item of group.items) {
                     const name = item.name.length > maxLen ? item.name.slice(0, maxLen - 1) + '…' : item.name;
-                    navRows.push({ line: `      ${colors_js_1.DIM}${name}${colors_js_1.NC}` });
+                    navRows.push({ text: `    ${colors_js_1.DIM}${name}${colors_js_1.NC}` });
                 }
             }
         }
@@ -177,39 +194,30 @@ function renderDetail(state, withPerms, results) {
                 state.expanded.delete(row.key);
             else
                 state.expanded.add(row.key);
-            // re-render needed — will happen on next render() call
             renderDetail(state, withPerms, results);
             return;
         }
     }
-    // clamp cursor
     if (state.detailCursor >= navRows.length)
         state.detailCursor = Math.max(0, navRows.length - 1);
-    // scroll
-    const headerLines = 3;
-    const footerLines = 2;
-    const visibleRows = Math.max(1, rows - headerLines - footerLines);
+    // box chrome: top(1) + sep(1) + bottom(1) = 3
+    const visibleRows = Math.max(1, rows - 3);
     if (state.detailCursor < state.detailScroll)
         state.detailScroll = state.detailCursor;
     if (state.detailCursor >= state.detailScroll + visibleRows)
         state.detailScroll = state.detailCursor - visibleRows + 1;
     const visible = navRows.slice(state.detailScroll, state.detailScroll + visibleRows);
+    const scrollInfo = navRows.length > visibleRows ? `${state.detailCursor + 1}/${navRows.length}` : '';
     const lines = [];
-    lines.push(`  ${colors_js_1.CYAN}${colors_js_1.BOLD}${project.shortName}${colors_js_1.NC}  ${colors_js_1.DIM}(${project.totalCount} permissions)${colors_js_1.NC}`);
-    lines.push('');
+    lines.push(boxTop(`${project.shortName}  (${project.totalCount})`, scrollInfo, w));
     for (let i = 0; i < visible.length; i++) {
         const globalIdx = state.detailScroll + i;
         const isCursor = globalIdx === state.detailCursor;
         const row = visible[i];
-        if (isCursor) {
-            lines.push(row.line.replace(/^  /, `${colors_js_1.CYAN}> `));
-        }
-        else {
-            lines.push(row.line);
-        }
+        const prefix = isCursor ? `${colors_js_1.CYAN}▸ ` : '  ';
+        lines.push(boxLine(`${prefix}${row.text}`, w));
     }
-    lines.push('');
-    lines.push(`  ${colors_js_1.DIM}[↑↓] navigate  [Enter] expand/collapse  [Esc] back  [q] quit${colors_js_1.NC}`);
+    lines.push(boxBottom('[↑↓] navigate  [Enter] expand  [Esc] back  [q] quit', w));
     process.stdout.write(lines.join('\n') + '\n');
 }
 function pad(s, n) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccperm",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Audit Claude Code permissions across all your projects",
   "bin": {
     "ccperm": "bin/ccperm.js"