@xsft/panels 0.3.3 → 0.4.0

package/README.md

@@ -31,7 +31,7 @@ Run the command in the folder of the product. Each judge starts in that folder,
 
 On a terminal, `panels run` shows the score table, and each judge runs in its interactive harness in a pseudo-terminal inside the command. Each judge writes `judges/N/answer.json` and stays open. The table writes the report when each judge has an answer or an error, and the command exits from `report.json` when you quit. Without a terminal, the judges run in the background (`claude -p`, `codex exec`).
 
-Keys in the table: `1` to `9` open the screen of that judge, and `q` quits and asks `y` while a judge still runs. In a judge, each key goes to the judge, and `ctrl-q` returns to the table. A harness that has not seen the folder asks whether to trust it. The first judge starts alone; press `1`, answer, and the other judges start.
+A tab bar on the last three lines shows a pill per view: the scores, then each judge with its number, name, and mark (spinner, score, ✗ for an error, · while queued, ! while the harness asks whether to trust the folder). Keys in the table: `1` to `9` open the screen of that judge, and `q` quits and asks `y` while a judge still runs. In a judge, each key goes to the judge, and `ctrl-q` returns to the table. A harness that has not seen the folder asks whether to trust it. The first judge starts alone; press `1`, answer, and the other judges start.
 
 ## Run folder
 

package/lib/table.js

@@ -28,6 +28,12 @@ const TABLE_MODES = '\x1b[?1049h\x1b[r\x1b[0m\x1b[4l\x1b[?6l\x1b[?7h\x1b[?1l\x1b
  * final is null until the report exists, then { status, path }. confirm is true while q waits for y.
  */
 const SPIN = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+// The tab bar takes the last three lines of the terminal, like a tmux status bar with three-line pills.
+const TAB_ROWS = 3;
+const BAR = '\x1b[48;5;236m';
+const PILL = '\x1b[48;5;239m\x1b[38;5;253m';
+const ACTIVE = '\x1b[48;2;255;106;61m\x1b[38;5;235m\x1b[1m';
+const DIM = '\x1b[38;5;245m';
 
 export function render({ title, rows, final, confirm, width, frame = 0 }) {
   const rule = `${GREY}${'─'.repeat(width)}${RESET}`;
@@ -46,10 +52,39 @@ export function render({ title, rows, final, confirm, width, frame = 0 }) {
     const at4 = rows.filter((r) => r.state === 'done' && r.result.score === 4).length;
     lines.push(` ${BOLD}${final.status.toUpperCase()}${RESET}  ${at4} of ${rows.length} at 4`, ` report ${final.path}`);
   }
-  lines.push(confirm ? ' judges still run. y quits, another key stays' : `${GREY} 1-${Math.min(rows.length, 9)} open judge   q quit${RESET}`);
+  if (confirm) lines.push(' judges still run. y quits, another key stays');
   return lines;
 }
 
+/**
+ * The three lines of the tab bar: a pill for the scores tab and one per judge, with a padding line above and
+ * below. A judge pill reads "N name mark", where the mark is the spinner, the score, ✗ for an error, · while
+ * queued, or ! while the harness asks whether to trust the folder. The names shrink to fit the width.
+ */
+export function renderTabs({ rows, view, final, frame = 0, width }) {
+  const mark = (r) => {
+    if (r.state === 'running') return r.trust ? '!' : SPIN[frame % SPIN.length];
+    if (r.state === 'queued') return '·';
+    if (r.state === 'error') return '✗';
+    return String(r.result.score);
+  };
+  const scores = final ? `scores ${final.status.toUpperCase()}` : 'scores';
+  // Each pill is its label plus two spaces each side and a one-space gap. A judge label is "N name m", 9 columns
+  // plus the name. The key hint sits at the right of the bottom line. A narrow terminal drops the hint, so the
+  // names keep at least four letters.
+  const fixed = 1 + scores.length + 5 + rows.length * 9;
+  const fit = (hint) => Math.max(0, Math.floor((width - fixed - hint.length) / rows.length));
+  const hint = fit('ctrl-q scores  q quit ') >= 4 ? 'ctrl-q scores  q quit ' : '';
+  const nameWidth = fit(hint);
+  const labels = [scores, ...rows.map((r) => `${r.rank}${nameWidth ? ` ${r.name.slice(0, nameWidth)}` : ''} ${mark(r)}`)];
+  const style = (i) => (i === view ? ACTIVE : rows[i - 1]?.state === 'queued' ? `${PILL}${DIM}` : PILL);
+  const pills = (text) => labels.map((l, i) => `${style(i)}  ${text(l)}  ${RESET}${BAR}`).join(' ');
+  const used = labels.reduce((n, l) => n + l.length + 5, 0);
+  const pad = `${BAR} ${pills((l) => ' '.repeat(l.length))}\x1b[K${RESET}`;
+  const bottom = `${BAR} ${pills((l) => ' '.repeat(l.length))}${' '.repeat(Math.max(0, width - used - hint.length))}${GREY}${hint}\x1b[K${RESET}`;
+  return [pad, `${BAR} ${pills((l) => l)}\x1b[K${RESET}`, bottom];
+}
+
 /**
  * The next { view, confirm } after one key, plus send: true when the key goes to the judge, or quit: true.
  * view is 0 for the table, or N for judge N. open holds the ranks of the judges that have started.
@@ -70,11 +105,12 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
   let rows = [];
   let final = null;
   let ui = { view: 0, confirm: false };
-  let footerTimer;
+  let tabsTimer;
+  let lastData = 0;
 
   const judgeDir = (rank) => join(runDir, 'judges', String(rank));
-  // A judge gets one line less than the terminal. The last line holds the footer.
-  const size = () => ({ cols: out.columns, rows: out.rows - 1 });
+  // A judge gets the lines above the tab bar.
+  const size = () => ({ cols: out.columns, rows: out.rows - TAB_ROWS });
 
   function state(c, i) {
     const file = join(judgeDir(c.rank), 'answer.json');
@@ -107,7 +143,8 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
     proc.onData((data) => term.write(data, () => {
       if (ui.view !== rank) return;
       out.write(data);
-      footer();
+      lastData = Date.now();
+      tabsSoon();
     }));
     proc.onExit(() => { j.exited = true; });
     // The headless terminal answers the queries of the harness, such as the cursor position.
@@ -122,16 +159,18 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
     judges[rank - 1] = j;
   }
 
-  function drawFooter() {
-    if (!ui.view) return;
-    const { cursorX, cursorY } = judges[ui.view - 1].term.buffer.active;
-    out.write(`\x1b[${out.rows};1H${RESET}${GREY} judge ${ui.view}   ctrl-q scores${RESET}\x1b[K\x1b[${cursorY + 1};${cursorX + 1}H`);
+  // In a judge, the cursor goes back to where the judge left it. The table hides the cursor.
+  function drawTabs() {
+    const lines = renderTabs({ rows, view: ui.view, final, frame, width: out.columns });
+    const top = out.rows - TAB_ROWS + 1;
+    const back = ui.view ? (({ cursorX, cursorY }) => `\x1b[${cursorY + 1};${cursorX + 1}H`)(judges[ui.view - 1].term.buffer.active) : '';
+    out.write(`${RESET}${lines.map((l, i) => `\x1b[${top + i};1H${l}`).join('')}${back}`);
   }
 
-  // Waits for a pause in the output, so the footer does not land inside an escape sequence that a chunk split.
-  function footer() {
-    clearTimeout(footerTimer);
-    footerTimer = setTimeout(drawFooter, 50);
+  // Waits for a pause in the output, so the tab bar does not land inside an escape sequence that a chunk split.
+  function tabsSoon() {
+    clearTimeout(tabsTimer);
+    tabsTimer = setTimeout(drawTabs, 50);
   }
 
   function showJudge(rank) {
@@ -139,10 +178,10 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
     j.term.write('', () => {
       if (ui.view !== rank) return;
       // The table already holds the alternate screen, so a judge on its alternate screen gets a clear after
-      // the normal screen, which the serializer writes first. The scroll region keeps the judge off the footer line.
+      // the normal screen, which the serializer writes first. The scroll region keeps the judge off the tab bar.
       const screen = j.serializer.serialize({ scrollback: 0 }).replace('\x1b[?1049h\x1b[H', '$&\x1b[2J');
-      out.write(`${RESET}\x1b[H\x1b[2J\x1b[1;${out.rows - 1}r${screen}${Object.entries(j.modes).map(([mode, final]) => `\x1b[?${mode}${final}`).join('')}`);
-      drawFooter();
+      out.write(`${RESET}\x1b[H\x1b[2J\x1b[1;${out.rows - TAB_ROWS}r${screen}${Object.entries(j.modes).map(([mode, final]) => `\x1b[?${mode}${final}`).join('')}`);
+      drawTabs();
     });
   }
 
@@ -158,7 +197,9 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
   let frame = 0;
   function draw() {
     const lines = render({ title: `${panel.owner}/${panel.name} v${panel.version}`, rows, final, confirm: ui.confirm, width: Math.min(out.columns, 100), frame });
-    out.write(`\x1b[H${lines.map((l) => `${l}\x1b[K`).join('\n')}\x1b[J`);
+    while (lines.length < out.rows - TAB_ROWS) lines.push('');
+    out.write(lines.slice(0, out.rows - TAB_ROWS).map((l, i) => `\x1b[${i + 1};1H${l}\x1b[K`).join(''));
+    drawTabs();
   }
 
   function tick() {
@@ -181,7 +222,9 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
     const timer = setInterval(tick, 1000);
     const spinner = setInterval(() => {
       frame += 1;
-      if (!ui.view && !final) draw();
+      if (final) return;
+      if (!ui.view) draw();
+      else if (Date.now() - lastData > 60) drawTabs();
     }, 100);
     out.write('\x1b[?1049h\x1b[?25l');
     process.stdin.setRawMode(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsft/panels",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "private": false,
   "description": "Run a panel of AI judges from cross.software/panels against a target.",
   "type": "module",