@xsft/panels 0.4.0 → 0.5.1

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`).
 
-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.
+A tab strip on the last three lines shows a hairline, a tab per view, and a status line with the progress, the elapsed time, and the keys. The tabs are the scores, then each judge with its number, name, and mark (score, ✗ for an error, · while queued, ! while the harness asks whether to trust the folder). The label of a running judge glimmers. The strip is the navigation area. With the focus on the strip, `←` and `→` move the active tab and switch the view, `1` to `9` jump to a started judge, `0` to the scores, `enter` gives the focus to the judge, and `q` quits and asks `y` while a judge still runs. With the focus on a judge, each key goes to the judge, and `ctrl-q` gives the focus back to the strip. The scores take no input, so the strip keeps the focus there. 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

@@ -17,8 +17,12 @@ const ORANGE = '\x1b[38;2;255;106;61m';
 const GREY = '\x1b[90m';
 const BOLD = '\x1b[1m';
 const RESET = '\x1b[0m';
-// ctrl-q returns from a judge to the table. A terminal in the kitty keyboard mode sends it as CSI 113;5u.
-const BACK = ['\x11', '\x1b[113;5u'];
+// ctrl-q moves the focus between a judge and the tab strip. A terminal in the kitty keyboard mode sends it as CSI 113;5u.
+const TOGGLE = ['\x11', '\x1b[113;5u'];
+const RIGHT = ['\x1b[C', '\x1bOC'];
+const LEFT = ['\x1b[D', '\x1bOD'];
+// Enter, Esc, or ctrl-q give the focus back to the judge of the active tab.
+const BACK = ['\r', '\x1b', ...TOGGLE];
 // Turns off each mode that the screen of a judge can turn on, so the table gets the keys and the screen as before.
 const TABLE_MODES = '\x1b[?1049h\x1b[r\x1b[0m\x1b[4l\x1b[?6l\x1b[?7h\x1b[?1l\x1b>\x1b[?1000l\x1b[?1002l\x1b[?1003l\x1b[?1006l\x1b[?1004l\x1b[?2004l\x1b[<u\x1b[?25l\x1b[2J';
 
@@ -27,13 +31,21 @@ const TABLE_MODES = '\x1b[?1049h\x1b[r\x1b[0m\x1b[4l\x1b[?6l\x1b[?7h\x1b[?1l\x1b
  * trust is true while the harness of a running judge asks whether to trust the folder.
  * 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';
+// The glimmer on the text of a running judge: grey text, and a bright highlight three characters wide that
+// sweeps from left to right one character per frame and wraps.
+const GLIMMER = { base: '\x1b[38;5;244m', mid: '\x1b[38;5;250m', high: '\x1b[38;5;255m' };
+const GLIMMER_ORANGE = { base: ORANGE, mid: '\x1b[38;2;255;170;140m', high: '\x1b[38;5;255m' };
+
+/** text with the glimmer at frame. colours is { base, mid, high }; prefix (such as bold) goes before each piece. */
+export function glimmer(text, frame, colours = GLIMMER, prefix = '') {
+  const centre = frame % text.length;
+  return [...text].map((c, i) => {
+    const d = Math.min(Math.abs(i - centre), text.length - Math.abs(i - centre));
+    return `${prefix}${d === 0 ? colours.high : d === 1 ? colours.mid : colours.base}${c}`;
+  }).join('') + RESET;
+}
+// The tab strip takes the last three lines of the terminal: a hairline, the tabs, then the status and the keys.
+const STRIP_ROWS = 3;
 
 export function render({ title, rows, final, confirm, width, frame = 0 }) {
   const rule = `${GREY}${'─'.repeat(width)}${RESET}`;
@@ -42,7 +54,7 @@ export function render({ title, rows, final, confirm, width, frame = 0 }) {
   for (const r of rows) {
     const head = `${String(r.rank).padStart(3)}  ${r.name.padEnd(pad)}`;
     if (r.state === 'running' && r.trust) lines.push(`${ORANGE}${head}press ${r.rank} and answer the trust prompt${RESET}`);
-    else if (r.state === 'running') lines.push(`${ORANGE}${head}${SPIN[frame % SPIN.length]}${RESET}`);
+    else if (r.state === 'running') lines.push(`${String(r.rank).padStart(3)}  ${glimmer(r.name, frame)}`);
     else if (r.state === 'queued') lines.push(`${head}${GREY}queued${RESET}`);
     else if (r.state === 'error') lines.push(`${head}error`);
     else lines.push(`${head}${r.result.score} ${GREY}b${r.result.band}${RESET}`);
@@ -57,44 +69,74 @@ export function render({ title, rows, final, confirm, width, frame = 0 }) {
 }
 
 /**
- * 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.
+ * The three lines of the tab strip: a grey hairline, the tabs, then a grey status line with the progress and
+ * the elapsed time at the left and the keys of the focus at the right. The first tab is the scores; each judge
+ * tab reads "N name mark". A running judge has no mark and its label glimmers. The mark is the score (bold at
+ * 4), ✗ for an error, · while queued, or ! while the harness asks whether to trust the folder. The names step
+ * down to fit the width: the whole name, the first word, or no name. focus is 'strip' (the active tab is bold
+ * orange, the arrows move it) or 'judge' (the active tab is bold ink, the keys go to the judge).
  */
-export function renderTabs({ rows, view, final, frame = 0, width }) {
+export function renderStrip({ rows, view, final, frame = 0, width, focus = 'strip', elapsed = 0 }) {
   const mark = (r) => {
-    if (r.state === 'running') return r.trust ? '!' : SPIN[frame % SPIN.length];
+    if (r.state === 'running') return r.trust ? '!' : '';
     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];
+  const finished = rows.filter((r) => r.state === 'done' || r.state === 'error').length;
+  const clock = `${Math.floor(elapsed / 60)}:${String(elapsed % 60).padStart(2, '0')}`;
+  const keys = focus === 'strip' ? '← → tabs · enter back · q quit' : 'ctrl-q tabs';
+  const tabs = (level) => [
+    { rank: '', name: final ? `scores ${final.status.toUpperCase()}` : 'scores', mark: '' },
+    ...rows.map((r) => ({ rank: String(r.rank), name: level === 0 ? r.name : level === 1 ? r.name.split(' ')[0] : '', mark: mark(r) })),
+  ];
+  const plain = (t) => [t.rank, t.name, t.mark].filter(Boolean).join(' ');
+  const used = (list) => 1 + list.reduce((n, t) => n + plain(t).length, 0) + 2 * (list.length - 1);
+  const list = [0, 1, 2].map(tabs).find((l) => used(l) <= width) ?? tabs(2);
+  let line = ' ';
+  list.forEach((t, i) => {
+    if (i) line += '  ';
+    const active = i === view;
+    const base = active ? (focus === 'strip' ? `${ORANGE}${BOLD}` : BOLD) : GREY;
+    const text = plain(t);
+    const row = rows[i - 1];
+    if (row?.state === 'running' && !row.trust) {
+      line += glimmer(text, frame, active && focus === 'strip' ? GLIMMER_ORANGE : GLIMMER, active ? BOLD : '');
+      return;
+    }
+    const pieces = [];
+    if (t.rank) pieces.push(`${base}${t.rank}${RESET}`);
+    if (t.name) pieces.push(`${base}${t.name}${RESET}`);
+    if (t.mark) pieces.push(`${row.state === 'done' && row.result.score === 4 ? `${base}${BOLD}` : base}${t.mark}${RESET}`);
+    line += pieces.join(' ');
+  });
+  const progress = `${finished} of ${rows.length} done · ${clock}`;
+  const status = ` ${progress}${' '.repeat(Math.max(2, width - progress.length - keys.length - 2))}${keys}`;
+  return [`${GREY}${'─'.repeat(width)}${RESET}`, line, `${GREY}${status}${RESET}`];
 }
 
 /**
- * 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.
+ * The next { view, confirm, focus } after one key, plus send: true when the key goes to the judge, or quit: true.
+ * view is 0 for the scores, or N for judge N. open holds the ranks of the judges that have started. With the
+ * focus on a judge, every key but ctrl-q goes to the judge, and ctrl-q moves the focus to the strip. With the
+ * focus on the strip, the arrows move the active tab and switch the view, 1-9 jump to a started judge, 0 to the
+ * scores, Enter, Esc, or ctrl-q give the focus back to the judge, and q quits (y confirms while a judge runs).
+ * The scores take no input, so the strip keeps the focus there.
  */
-export function press({ view, confirm }, key, { open, running }) {
-  if (view) return BACK.includes(key) ? { view: 0, confirm: false } : { view, confirm, send: true };
-  if (confirm) return { view: 0, confirm: false, quit: key === 'y' };
-  if (key === 'q') return running ? { view: 0, confirm: true } : { view: 0, confirm: false, quit: true };
-  if (/^[1-9]$/.test(key) && open.includes(Number(key))) return { view: Number(key), confirm: false };
-  return { view: 0, confirm: false };
+export function press({ view, confirm, focus }, key, { open, running }) {
+  const strip = (v) => ({ view: v, confirm: false, focus: 'strip' });
+  if (focus === 'judge') return TOGGLE.includes(key) ? strip(view) : { view, confirm, focus, send: true };
+  if (confirm) return { ...strip(0), quit: key === 'y' };
+  if (key === 'q') return running ? { view: 0, confirm: true, focus: 'strip' } : { ...strip(0), quit: true };
+  if (RIGHT.includes(key) || LEFT.includes(key)) {
+    const cycle = [0, ...open];
+    const step = RIGHT.includes(key) ? 1 : -1;
+    return strip(cycle[(cycle.indexOf(view) + step + cycle.length) % cycle.length]);
+  }
+  if (/^[1-9]$/.test(key)) return open.includes(Number(key)) ? strip(Number(key)) : strip(view);
+  if (key === '0') return strip(0);
+  if (BACK.includes(key) && view) return { view, confirm: false, focus: 'judge' };
+  return strip(view);
 }
 
 /** Runs the judges, shows the table, and writes the report. Resolves when the engineer quits. */
@@ -104,13 +146,14 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
   const judges = [];
   let rows = [];
   let final = null;
-  let ui = { view: 0, confirm: false };
-  let tabsTimer;
+  let ui = { view: 0, confirm: false, focus: 'strip' };
+  let stripTimer;
   let lastData = 0;
+  const started = Date.now();
 
   const judgeDir = (rank) => join(runDir, 'judges', String(rank));
-  // A judge gets the lines above the tab bar.
-  const size = () => ({ cols: out.columns, rows: out.rows - TAB_ROWS });
+  // A judge gets the lines above the tab strip.
+  const size = () => ({ cols: out.columns, rows: out.rows - STRIP_ROWS });
 
   function state(c, i) {
     const file = join(judgeDir(c.rank), 'answer.json');
@@ -144,7 +187,7 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
       if (ui.view !== rank) return;
       out.write(data);
       lastData = Date.now();
-      tabsSoon();
+      stripSoon();
     }));
     proc.onExit(() => { j.exited = true; });
     // The headless terminal answers the queries of the harness, such as the cursor position.
@@ -159,18 +202,23 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
     judges[rank - 1] = j;
   }
 
-  // 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}`);
+  // In a judge, the strip hides the cursor while it draws and then puts it back where the judge had it. A cursor
+  // past the last column waits for the next character to wrap; a move there would lose that, so the strip waits.
+  function drawStrip() {
+    const lines = renderStrip({ rows, view: ui.view, final, frame, width: out.columns, focus: ui.focus, elapsed: Math.floor((Date.now() - started) / 1000) });
+    const top = out.rows - STRIP_ROWS + 1;
+    const strip = lines.map((l, i) => `\x1b[${top + i};1H${l}\x1b[K`).join('');
+    if (!ui.view) return void out.write(`${RESET}${strip}`);
+    const j = judges[ui.view - 1];
+    const { cursorX, cursorY } = j.term.buffer.active;
+    if (cursorX >= out.columns) return;
+    out.write(`\x1b[?25l${RESET}${strip}\x1b[${cursorY + 1};${cursorX + 1}H\x1b[?25${j.modes[25]}`);
   }
 
-  // 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);
+  // Waits for a pause in the output, so the strip does not land inside an escape sequence that a chunk split.
+  function stripSoon() {
+    clearTimeout(stripTimer);
+    stripTimer = setTimeout(drawStrip, 50);
   }
 
   function showJudge(rank) {
@@ -178,10 +226,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 tab bar.
+      // the normal screen, which the serializer writes first. The scroll region keeps the judge above the strip.
       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 - TAB_ROWS}r${screen}${Object.entries(j.modes).map(([mode, final]) => `\x1b[?${mode}${final}`).join('')}`);
-      drawTabs();
+      out.write(`${RESET}\x1b[H\x1b[2J\x1b[1;${out.rows - STRIP_ROWS}r${screen}${Object.entries(j.modes).map(([mode, final]) => `\x1b[?${mode}${final}`).join('')}`);
+      drawStrip();
     });
   }
 
@@ -197,9 +245,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 });
-    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();
+    while (lines.length < out.rows - STRIP_ROWS) lines.push('');
+    out.write(lines.slice(0, out.rows - STRIP_ROWS).map((l, i) => `\x1b[${i + 1};1H${l}\x1b[K`).join(''));
+    drawStrip();
   }
 
   function tick() {
@@ -224,7 +272,7 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
       frame += 1;
       if (final) return;
       if (!ui.view) draw();
-      else if (Date.now() - lastData > 60) drawTabs();
+      else if (Date.now() - lastData > 60) drawStrip();
     }, 100);
     out.write('\x1b[?1049h\x1b[?25l');
     process.stdin.setRawMode(true);
@@ -232,7 +280,7 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
       const key = data.toString();
       const from = ui.view;
       const next = press(ui, key, { open: judges.flatMap((j, i) => (j ? [i + 1] : [])), running: rows.some((r) => r.state === 'running') });
-      ui = { view: next.view, confirm: next.confirm };
+      ui = { view: next.view, confirm: next.confirm, focus: next.focus };
       if (next.send) {
         judges[from - 1].proc.write(key);
       } else if (next.quit) {
@@ -245,11 +293,13 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
         process.stdin.setRawMode(false);
         process.stdin.pause();
         done();
-      } else if (ui.view) {
-        showJudge(ui.view);
+      } else if (ui.view && ui.view === from) {
+        drawStrip();
       } else {
+        // A judge can leave its modes on (mouse, bracketed paste, the kitty keyboard). The next view starts clean.
         if (from) out.write(TABLE_MODES);
-        draw();
+        if (ui.view) showJudge(ui.view);
+        else draw();
       }
     });
     out.on('resize', () => {

package/package.json

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