@xsft/panels 0.6.0 → 0.7.1

package/lib/table.js

@@ -1,12 +1,13 @@
-// The terminal mode of `panels run`: the score table, and a view of each judge. Each judge runs its interactive
+// The terminal mode of `panels run`: the overview, and a view of each judge. Each judge runs its interactive
 // harness in a pseudo-terminal, and a headless terminal keeps its screen for the switch to its view.
-import { existsSync, readFileSync, writeFileSync } from 'node:fs';
-import { join, relative } from 'node:path';
+import { existsSync, readFileSync, unlinkSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
 import pty from '@homebridge/node-pty-prebuilt-multiarch';
 import { SerializeAddon } from '@xterm/addon-serialize';
 import xterm from '@xterm/headless';
+import figlet from 'figlet';
 import { check, MINUTES_PER_CRITERION, parseAnswer, writeJudge } from './judge.js';
-import { buildReport, renderMarkdown } from './report.js';
+import { buildReport, VERSION } from './report.js';
 
 const LIVE_JUDGES = 10;
 // A harness asks this in a folder it has not seen. Only the first judge starts until its screen no longer asks,
@@ -17,26 +18,29 @@ const ORANGE = '\x1b[38;2;255;106;61m';
 const GREY = '\x1b[90m';
 const BOLD = '\x1b[1m';
 const RESET = '\x1b[0m';
+// The colour of a score, from the 16-colour palette: 4 green, 3 the default ink, 2 yellow, 1 red.
+const SCORE_COLOUR = { 4: '\x1b[32m', 3: '', 2: '\x1b[33m', 1: '\x1b[31m' };
+const LEVELS = { 1: 'Fails', 2: 'Falls short', 3: 'Almost met', 4: 'Met' };
 // 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'];
+const UP = ['\x1b[A', '\x1bOA'];
+const DOWN = ['\x1b[B', '\x1bOB'];
 // 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.
+// Turns off each mode that the screen of a judge can turn on, so the overview 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';
-
-/**
- * The lines of the table. rows hold { rank, name, state, result, trust }, and state is queued, running, done, or error.
- * 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.
- */
 // The glimmer on the text of the running judges: grey text, and one soft wave three columns wide that moves one
 // column per frame from the left edge of the screen to the right edge and starts over. A running label lights
 // up only where the wave passes over its own columns, so every running label lights at the same columns.
 const GLIMMER = { base: '\x1b[38;5;244m', mid: '\x1b[38;5;247m', high: '\x1b[38;5;250m' };
 const GLIMMER_ORANGE = { base: ORANGE, mid: '\x1b[38;2;255;140;100m', high: '\x1b[38;2;255;175;145m' };
 const WAVE = 3;
+// 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;
+// The overview shows two columns from this width up, and the list above the detail below it.
+const TWO_COLUMNS = 100;
 
 /**
  * text with the glimmer at frame, where the text starts at the screen column start (0-based) on a screen width
@@ -49,62 +53,241 @@ export function glimmer(text, frame, start, width, colours = GLIMMER, prefix = '
     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}`;
-  const pad = Math.max(...rows.map((r) => r.name.length)) + 2;
-  const lines = [` ${BOLD}panels run${RESET}  ${title}`, rule];
-  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(`${String(r.rank).padStart(3)}  ${glimmer(r.name, frame, 5, width)}`);
-    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}/4`);
+/** m:ss for a number of seconds. */
+export const clock = (seconds) => `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
+
+/** "12.4k" for 12400 tokens, "0.3k" for 300, "1.2M" from a million, and "" for none. */
+export function tokensText(n) {
+  if (n === null || n === undefined) return '';
+  return n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : `${(n / 1000).toFixed(1)}k`;
+}
+
+/**
+ * The largest token count on the screen of a judge, or null. Claude shows "↓ 354 tokens" and a context count
+ * such as "12532 tokens"; Codex shows its count with a k or M suffix. The largest number before "tokens" wins.
+ */
+export function tokensOnScreen(text) {
+  let best = null;
+  for (const m of text.matchAll(/(\d[\d,]*(?:\.\d+)?)\s*([kKmM])?\s*tokens/g)) {
+    const n = Number(m[1].replaceAll(',', '')) * (m[2] ? { k: 1e3, m: 1e6 }[m[2].toLowerCase()] : 1);
+    if (best === null || n > best) best = n;
+  }
+  return best;
+}
+
+let artLines;
+/** The word "judging" as big letters, in the ANSI Shadow font (Standard when that font is missing). Rendered once. */
+export function art() {
+  if (!artLines) {
+    const font = figlet.fontsSync().includes('ANSI Shadow') ? 'ANSI Shadow' : 'Standard';
+    artLines = figlet.textSync('judging', { font }).split('\n').filter((l) => l.trim());
+  }
+  return artLines;
+}
+
+const plainLength = (s) => s.replace(/\x1b\[[0-9;]*m/g, '').length;
+const padTo = (s, width) => s + ' '.repeat(Math.max(0, width - plainLength(s)));
+
+/** The first width visible characters of a styled line, with every escape sequence kept, so the line never wraps. */
+export function clip(line, width) {
+  let seen = 0;
+  let out = '';
+  for (const part of line.split(/(\x1b\[[0-9;]*m)/)) {
+    if (part.startsWith('\x1b')) { out += part; continue; }
+    const room = Math.max(0, width - seen);
+    out += [...part].slice(0, room).join('');
+    seen += Math.min([...part].length, room);
   }
-  lines.push(rule);
-  if (final) {
-    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}`);
+  return out;
+}
+
+/** The words of text in lines of at most width characters. */
+export function wrap(text, width) {
+  const lines = [];
+  let line = '';
+  for (const word of text.split(/\s+/).filter(Boolean)) {
+    if (line && line.length + 1 + word.length > width) { lines.push(line); line = word; }
+    else line = line ? `${line} ${word}` : word;
   }
-  if (confirm) lines.push(' judges still run. q again quits, another key stays');
+  if (line) lines.push(line);
   return lines;
 }
 
+/** The scores added as quarters: 1/4 + 1/4 + 2/4 is "1". No trailing zeros. */
+const quarters = (sum) => String(Math.round((sum / 4) * 100) / 100);
+
 /**
- * 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).
+ * The body of a criterion as plain lines for the detail pane: a heading becomes a grey upper-case label, a list
+ * item keeps its dash, a fenced block is indented four spaces as it is, a table line stays as it is, and the
+ * other text is wrapped to width with the emphasis, code, and link marks removed.
  */
-export function renderStrip({ rows, view, final, frame = 0, width, focus = 'strip', elapsed = 0 }) {
-  const mark = (r) => {
-    if (r.state === 'running') return r.trust ? '!' : '';
-    if (r.state === 'queued') return '·';
-    if (r.state === 'error') return '✗';
-    return `${r.result.score}/4`;
+export function plainMarkdown(markdown, width) {
+  const inline = (t) => t.replace(/\*\*(.+?)\*\*/g, '$1').replace(/__(.+?)__/g, '$1').replace(/`([^`]+)`/g, '$1').replace(/\*(\S[^*]*?)\*/g, '$1').replace(/\[([^\]]+)\]\([^)]*\)/g, '$1');
+  const lines = [];
+  let paragraph = [];
+  let fence = false;
+  const flush = () => {
+    if (paragraph.length) lines.push(...wrap(inline(paragraph.join(' ')), width));
+    paragraph = [];
   };
+  for (const raw of markdown.split('\n')) {
+    const line = raw.trimEnd();
+    if (/^\s*```/.test(line)) { flush(); fence = !fence; continue; }
+    if (fence) { lines.push(`    ${line}`); continue; }
+    if (!line.trim()) { flush(); if (lines.at(-1) !== '') lines.push(''); continue; }
+    const heading = /^#{1,6}\s+(.*)$/.exec(line);
+    if (heading) { flush(); if (lines.length && lines.at(-1) !== '') lines.push(''); lines.push(`${GREY}${inline(heading[1]).toUpperCase()}${RESET}`); continue; }
+    const item = /^\s*(?:[-*+]|\d+\.)\s+(.*)$/.exec(line);
+    if (item) { flush(); const [first, ...rest] = wrap(inline(item[1]), width - 2); lines.push(`- ${first ?? ''}`, ...rest.map((l) => `  ${l}`)); continue; }
+    if (/^\s*\|/.test(line)) { flush(); lines.push(inline(line)); continue; }
+    paragraph.push(line.trim());
+  }
+  flush();
+  while (lines.at(-1) === '') lines.pop();
+  while (lines[0] === '') lines.shift();
+  return lines;
+}
+
+/** The lines of the detail pane under its header: the verdict or the judging art, then the criterion text. */
+function detailContent(row, columnWidth, start, width, frame) {
+  const lines = [''];
+  if (row.state === 'running' && !row.trust) {
+    // The judge works: the word judging in big letters with the wave over it, or in one line in a narrow pane.
+    const letters = art();
+    lines.push(...(letters[0].length <= columnWidth ? letters : ['judging']).map((l) => glimmer(l, frame, start, width)));
+    const since = row.restarted !== null ? `restarted with ${row.harness} · ` : '';
+    lines.push(`${GREY}${since}${clock(row.time ?? 0)} · ${row.rank} to watch${RESET}`);
+  } else {
+    const text = row.state === 'done' ? row.result.verdict
+      : row.state === 'error' ? row.error
+        : row.state === 'queued' ? 'The judge has not started.'
+          : `Press ${row.rank} and answer the trust prompt.`;
+    lines.push(...wrap(text, columnWidth));
+  }
+  if (row.description) lines.push('', ...wrap(row.description, columnWidth));
+  if (row.body) lines.push('', ...plainMarkdown(row.body, columnWidth));
+  return lines;
+}
+
+const layout = (rows, width) => {
+  // The name column is as wide as the longest name, and at least as wide as the word total under it.
+  const leftWidth = Math.max(5, ...rows.map((r) => r.name.length)) + 27;
+  return width >= TWO_COLUMNS ? { leftWidth, columnWidth: width - leftWidth - 3, start: leftWidth + 3 } : { leftWidth, columnWidth: width - 2, start: 2 };
+};
+
+/** The number of lines of the detail pane that the scroll can hide: the content past the window of the pane. */
+export function maxScroll({ rows, cursor, width, height }) {
+  const { columnWidth, start } = layout(rows, width);
+  const content = detailContent(rows[cursor], columnWidth, start, width, 0);
+  const body = height - 2;
+  const paneHeight = width >= TWO_COLUMNS ? body : body - Math.floor(body / 2) - 1;
+  // The pane holds the header, the content window, a blank line, and the three bottom lines.
+  const window = paneHeight - 5;
+  return window < 1 ? 0 : Math.max(0, content.length - window);
+}
+
+/**
+ * The lines of the overview. rows hold { rank, name, description, body, state, result, error, trust, time, tokens,
+ * harness, restarted }, and state is queued, running, done, or error. time is the seconds the judge has run,
+ * tokens the count it used (null for none), harness the one its next restart uses, restarted the seconds since
+ * a restart (null for none). cursor is the index of the row whose detail shows at the right; focus is 'list'
+ * or 'detail' (the detail pane shows an orange bar and its header turns orange); scroll hides that many lines
+ * of the detail content under its header. The header line holds the run: panel and target at the left, the
+ * version, the harness, and the elapsed time at the right edge. Two columns from TWO_COLUMNS wide, the list
+ * above the detail below that. height is the number of lines the overview may fill: the column divider runs
+ * the whole height, the rows and the detail header stay at the top, and the total row and the key and fact
+ * lines sit at the bottom. Without a height, or when the content is taller than the height, the lines follow
+ * each other and nothing scrolls.
+ */
+export function renderOverview({ title, target, harness, elapsed, rows, cursor, width, height, frame = 0, version = VERSION, focus = 'list', scroll = 0 }) {
+  const run = ` panels run  ${title}   ${target}`;
+  const meta = `${version} · ${harness} · ${clock(elapsed)} `;
+  const header = ` ${BOLD}panels run${RESET}  ${title}${GREY}   ${target}${' '.repeat(Math.max(2, width - run.length - meta.length))}${meta}${RESET}`;
+  const rule = `${GREY}${'─'.repeat(width)}${RESET}`;
+  const { leftWidth, columnWidth, start } = layout(rows, width);
+  const pad = leftWidth - 27;
+  const cells = (score, time, tokens) => `   ${score.padStart(3)}  ${time.padStart(5)}  ${tokens.padStart(6)}`;
+  const left = rows.map((r, i) => {
+    const current = i === cursor;
+    const mark = current ? `${ORANGE}▸${RESET} ` : '  ';
+    const rank = `${String(r.rank).padStart(2)}  `;
+    const time = r.time === null ? '' : clock(r.time);
+    const tokens = tokensText(r.tokens);
+    if (r.state === 'running' && !r.trust) {
+      const name = glimmer(r.name.padEnd(pad), frame, 6, width, current ? GLIMMER_ORANGE : GLIMMER);
+      return `${mark}${current ? ORANGE : ''}${rank}${RESET}${name}${current ? ORANGE : GREY}${cells('·/4', time, tokens)}${RESET}`;
+    }
+    // A row without a score yet holds the place of the score with ·/4.
+    const score = r.state === 'done' ? `${r.result.score}/4` : r.state === 'error' ? '✗' : '·/4';
+    const colour = current ? ORANGE : r.state === 'done' ? SCORE_COLOUR[r.result.score] : r.state === 'error' ? SCORE_COLOUR[1] : GREY;
+    const name = current ? `${ORANGE}${r.name.padEnd(pad)}${RESET}` : r.state === 'queued' ? `${GREY}${r.name.padEnd(pad)}${RESET}` : r.name.padEnd(pad);
+    const rest = r.state === 'running' ? `${ORANGE}press ${r.rank} and answer the trust prompt${RESET}` : `${colour}${cells(score, time, tokens)}${RESET}`;
+    return `${mark}${current ? ORANGE : ''}${rank}${RESET}${name}${rest}`;
+  });
+  const done = rows.filter((r) => r.state === 'done');
+  const sum = done.length ? `${quarters(done.reduce((n, r) => n + r.result.score, 0))}/${rows.length}` : `·/${rows.length}`;
+  const total = cells(sum, clock(Math.max(0, ...rows.map((r) => r.time ?? 0))), tokensText(rows.some((r) => r.tokens !== null) ? rows.reduce((n, r) => n + (r.tokens ?? 0), 0) : null));
+  const totalLine = `${padTo('      total', leftWidth - total.length)}${done.length ? total : total.replace(sum, `${GREY}${sum}${RESET}`)}`;
+  const leftBottom = [`${GREY}${'─'.repeat(leftWidth)}${RESET}`, totalLine];
+
+  const row = rows[cursor];
+  const level = row.state === 'done' ? `${row.result.score}/4  ${LEVELS[row.result.score]}` : row.state === 'error' ? 'error' : row.state;
+  const name = `${row.rank}  ${row.name.toUpperCase()}`;
+  const detailHeader = `${focus === 'detail' ? `${ORANGE}${BOLD}` : BOLD}${name}${RESET}${' '.repeat(Math.max(1, columnWidth - name.length - level.length))}${GREY}${level}${RESET}`;
+  const content = detailContent(row, columnWidth, start, width, frame);
+  const facts = [`judge ${row.rank}`, row.harness, ...(row.time === null ? [] : [clock(row.time)]), ...(row.state === 'done' || row.state === 'error' ? [`judges/${row.rank}/answer.json`] : [])];
+  const bottom = [`${ORANGE}r${RESET} restart   ${ORANGE}h${RESET} harness ${row.harness}   ${ORANGE}${row.rank}${RESET} watch`, '', `${GREY}${facts.join(' · ')}${RESET}`];
+
+  // top, gap blank lines, then bottom; with a height that holds them, the blank lines grow so bottom ends at the height.
+  const pane = (top, bottomLines, lines, gap) => {
+    const fill = lines === undefined || lines < top.length + gap + bottomLines.length ? gap : lines - top.length - bottomLines.length;
+    return [...top, ...Array(fill).fill(''), ...bottomLines];
+  };
+  // The detail pane: the header, a window of the content that the scroll moves, a blank line, then the bottom lines.
+  const detailPane = (lines) => {
+    const window = lines === undefined ? 0 : lines - 5;
+    if (window < 1) return pane([detailHeader, ...content], bottom, lines, 1);
+    const from = Math.min(scroll, Math.max(0, content.length - window));
+    return [detailHeader, ...content.slice(from, from + window), ...Array(Math.max(0, window - content.length)).fill(''), '', ...bottom];
+  };
+  const edge = focus === 'detail' ? `${ORANGE}▌${RESET}` : `${GREY}│${RESET}`;
+
+  const lines = [header, rule];
+  const body = height === undefined ? undefined : height - 2;
+  if (width >= TWO_COLUMNS) {
+    const leftLines = pane(left, leftBottom, body, 0);
+    const rightLines = detailPane(body);
+    for (let i = 0; i < Math.max(leftLines.length, rightLines.length); i++) lines.push(`${padTo(leftLines[i] ?? '', leftWidth)} ${edge} ${rightLines[i] ?? ''}`);
+  } else {
+    const half = body === undefined ? undefined : Math.floor(body / 2);
+    const list = pane(left, leftBottom, half, 0);
+    lines.push(...list, '', ...detailPane(body === undefined ? undefined : body - list.length - 1).map((l) => `${focus === 'detail' ? `${ORANGE}▌${RESET}` : ' '} ${l}`));
+  }
+  return lines.map((l) => clip(l, 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 Overview, then the
+ * name of each criterion, with a grey │ between the tabs. A running tab glimmers. The names step down to the
+ * first word when they do not fit the width. focus is 'strip' (the active tab is bold orange, the arrows move
+ * it), 'detail' (the detail pane of the overview scrolls), or 'judge' (the active tab is bold ink, the keys go to
+ * the judge). confirm replaces the progress with the quit question.
+ */
+export function renderStrip({ rows, view, frame = 0, width, focus = 'strip', elapsed = 0, confirm = false }) {
   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);
+  const keys = focus === 'judge' ? 'ctrl-q tabs'
+    : focus === 'detail' ? '↑ ↓ scroll · enter list · ← → tabs · q q quit'
+      : view === 0 ? '↑ ↓ criterion · r restart · h harness · ← → tabs · q q quit' : '← → tabs · enter back · q quit';
+  const names = (level) => ['Overview', ...rows.map((r) => (level === 0 ? r.name : r.name.split(' ')[0]))];
+  const used = (list) => 1 + list.reduce((n, t) => n + t.length, 0) + 3 * (list.length - 1);
+  const list = [0, 1].map(names).find((l) => used(l) <= width) ?? names(1);
   let line = ' ';
   let col = 1;
-  list.forEach((t, i) => {
-    if (i) { line += '  '; col += 2; }
+  list.forEach((text, i) => {
+    if (i) { line += `${GREY} │ ${RESET}`; col += 3; }
     const active = i === view;
-    const base = active ? (focus === 'strip' ? `${ORANGE}${BOLD}` : BOLD) : GREY;
-    const text = plain(t);
     const row = rows[i - 1];
     const start = col;
     col += text.length;
@@ -112,49 +295,70 @@ export function renderStrip({ rows, view, final, frame = 0, width, focus = 'stri
       line += glimmer(text, frame, start, width, 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(' ');
+    line += `${active ? (focus === 'strip' ? `${ORANGE}${BOLD}` : BOLD) : GREY}${text}${RESET}`;
   });
-  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}`];
+  const progress = confirm ? 'judges still run. q again quits, another key stays' : `${finished} of ${rows.length} done · ${clock(elapsed)}`;
+  // A narrow terminal drops the keys before the progress, and then the end of the progress.
+  const gap = width - progress.length - keys.length - 2;
+  const status = gap >= 2 ? ` ${progress}${' '.repeat(gap)}${keys}` : ` ${progress}`;
+  return [`${GREY}${'─'.repeat(width)}${RESET}`, clip(line, width), `${GREY}${clip(status, width)}${RESET}`];
 }
 
 /**
- * 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
+ * The next { view, confirm, focus, cursor, scroll } after one key, plus send: true when the key goes to the judge,
+ * quit: true, restart: N to restart judge N, or flip: N to flip the harness of judge N. view is 0 for the
+ * overview, or N for judge N. open holds the ranks of the judges that have started, count the number of
+ * criteria, maxScroll the lines the detail pane can hide, page the lines one PgUp or PgDn moves. 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 (a second q confirms while a judge runs).
- * The scores take no input, so the strip keeps the focus there.
+ * focus on the strip, the arrows left and right move the active tab and switch the view, 1-9 jump to a started
+ * judge, 0 to the overview, Enter, Esc, or ctrl-q give the focus back to the judge, and q quits (a second q
+ * confirms while a judge runs). On the overview, which takes no text, up and down move the cursor, r restarts
+ * the judge of the cursor row, h flips its harness, and Enter moves the focus into the detail pane: there up
+ * and down scroll one line, PgUp and PgDn a page, and Esc or Enter return the focus to the list.
  */
-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 };
+export function press({ view, confirm, focus, cursor, scroll = 0 }, key, { open, running, count, maxScroll: limit = 0, page = 10 }) {
+  const strip = (v) => ({ view: v, confirm: false, focus: 'strip', cursor, scroll });
+  if (focus === 'judge') return TOGGLE.includes(key) ? strip(view) : { view, confirm, focus, cursor, scroll, send: true };
   if (confirm) return { ...strip(0), quit: key === 'q' };
-  if (key === 'q') return running ? { view: 0, confirm: true, focus: 'strip' } : { ...strip(0), quit: true };
+  if (key === 'q') return running ? { view: 0, confirm: true, focus: 'strip', cursor, scroll } : { ...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 (/^[1-9]$/.test(key)) return open.includes(Number(key)) ? strip(Number(key)) : { ...strip(view), focus };
   if (key === '0') return strip(0);
-  if (BACK.includes(key) && view) return { view, confirm: false, focus: 'judge' };
+  if (view === 0) {
+    const detail = (s) => ({ view: 0, confirm: false, focus: 'detail', cursor, scroll: Math.max(0, Math.min(limit, s)) });
+    if (key === 'r') return open.includes(cursor + 1) ? { ...strip(0), focus, restart: cursor + 1 } : { ...strip(0), focus };
+    if (key === 'h') return { ...strip(0), focus, flip: cursor + 1 };
+    if (focus === 'detail') {
+      if (UP.includes(key)) return detail(scroll - 1);
+      if (DOWN.includes(key)) return detail(scroll + 1);
+      if (key === '\x1b[5~') return detail(scroll - page);
+      if (key === '\x1b[6~') return detail(scroll + page);
+      if (key === '\r' || key === '\x1b') return strip(0);
+      return detail(scroll);
+    }
+    if (UP.includes(key)) return { ...strip(0), cursor: Math.max(0, cursor - 1), scroll: 0 };
+    if (DOWN.includes(key)) return { ...strip(0), cursor: Math.min(count - 1, cursor + 1), scroll: 0 };
+    if (key === '\r') return detail(0);
+    return strip(0);
+  }
+  if (BACK.includes(key)) return { view, confirm: false, focus: 'judge', cursor, scroll };
   return strip(view);
 }
 
-/** Runs the judges, shows the table, and writes the report. Resolves when the engineer quits. */
-export function runTable({ panel, runDir, harness, cwd, target, brief, sources }) {
+/** Runs the judges, shows the overview, and writes the report. Resolves when the engineer quits. */
+export function runTable({ panel, runDir, harness, cwd, target, brief, sources, yolo = false }) {
   const out = process.stdout;
   const criteria = panel.criteria.map((c, i) => ({ rank: i + 1, ...c }));
   const judges = [];
+  // The harness of each judge: the run harness, until h flips it.
+  const harnesses = criteria.map(() => harness);
   let rows = [];
   let final = null;
-  let ui = { view: 0, confirm: false, focus: 'strip' };
+  let ui = { view: 0, confirm: false, focus: 'strip', cursor: 0, scroll: 0 };
   let stripTimer;
   let lastData = 0;
   const started = Date.now();
@@ -162,37 +366,45 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
   const judgeDir = (rank) => join(runDir, 'judges', String(rank));
   // A judge gets the lines above the tab strip.
   const size = () => ({ cols: out.columns, rows: out.rows - STRIP_ROWS });
+  const seconds = (from, to = Date.now()) => Math.floor((to - from) / 1000);
+
+  function screenText(j) {
+    const buffer = j.term.buffer.active;
+    const lines = [];
+    for (let y = 0; y < buffer.length; y++) lines.push(buffer.getLine(y).translateToString(true));
+    return lines.join(' ');
+  }
 
   function state(c, i) {
+    const j = judges[i];
+    const facts = { harness: harnesses[i], time: j ? seconds(j.started, j.finished) : null, tokens: j?.tokens ?? null, restarted: j?.restartedAt ? seconds(j.restartedAt) : null };
     const file = join(judgeDir(c.rank), 'answer.json');
     if (existsSync(file)) {
+      if (j && !j.finished) j.finished = Date.now();
+      facts.time = j ? seconds(j.started, j.finished) : null;
       const answer = parseAnswer(readFileSync(file, 'utf8'));
-      const errors = check(answer, [c]);
-      return errors.length ? { state: 'error', error: `invalid answer: ${errors.join(' ')}` } : { state: 'done', result: answer.results[0] };
+      const errors = check(answer, c);
+      return errors.length ? { ...facts, state: 'error', error: `invalid answer: ${errors.join(' ')}` } : { ...facts, state: 'done', result: answer };
     }
-    if (judges[i] === undefined) return { state: 'queued' };
-    if (Date.now() - judges[i].started > MINUTES_PER_CRITERION * 60_000) return { state: 'error', error: `no answer.json after ${MINUTES_PER_CRITERION} minutes` };
-    return { state: 'running', trust: asksTrust(judges[i]) };
-  }
-
-  function asksTrust(j) {
-    const buffer = j.term.buffer.active;
-    const lines = [];
-    for (let y = 0; y < buffer.length; y++) lines.push(buffer.getLine(y).translateToString(true));
-    return TRUST_PROMPT.test(lines.join(' '));
+    if (j === undefined) return { ...facts, state: 'queued' };
+    if (Date.now() - j.started > MINUTES_PER_CRITERION * 60_000) return { ...facts, state: 'error', error: `no answer.json after ${MINUTES_PER_CRITERION} minutes` };
+    const screen = screenText(j);
+    const tokens = tokensOnScreen(screen);
+    if (tokens !== null) j.tokens = tokens;
+    return { ...facts, tokens: j.tokens ?? null, state: 'running', trust: TRUST_PROMPT.test(screen) };
   }
 
-  function start(rank) {
-    const [command, ...argv] = writeJudge({ dir: judgeDir(rank), criteria: [criteria[rank - 1]], harness, cwd, target, brief, sources });
+  function start(rank, restartedAt = null) {
+    const [command, ...argv] = writeJudge({ dir: judgeDir(rank), criterion: criteria[rank - 1], harness: harnesses[rank - 1], cwd, target, brief, sources, yolo });
     const { cols, rows: lines } = size();
     const term = new xterm.Terminal({ cols, rows: lines, allowProposedApi: true });
     const serializer = new SerializeAddon();
     term.loadAddon(serializer);
     const proc = pty.spawn(command, argv, { name: 'xterm-256color', cols, rows: lines, cwd, env: process.env });
-    const j = { started: Date.now(), term, serializer, proc, modes: { 25: 'h', 1006: 'l' }, exited: false };
+    const j = { started: Date.now(), finished: undefined, restartedAt, tokens: null, term, serializer, proc, modes: { 25: 'h', 1006: 'l' }, exited: false };
     // The write callback keeps the order of the live output and of the screen that showJudge writes.
     proc.onData((data) => term.write(data, () => {
-      if (ui.view !== rank) return;
+      if (ui.view !== rank || judges[rank - 1] !== j) return;
       out.write(data);
       lastData = Date.now();
       stripSoon();
@@ -210,10 +422,23 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
     judges[rank - 1] = j;
   }
 
+  // The harness on PATH can be a shell script that runs the real binary as a child and waits for it, so
+  // SIGHUP goes to the process group of the judge. The pty makes each judge the leader of its own group.
+  const stop = (j) => { if (j && !j.exited) process.kill(-j.proc.pid, 'SIGHUP'); };
+
+  /** Stops judge rank, drops its answer, and starts it again with its harness. The report is written again later. */
+  function restart(rank) {
+    stop(judges[rank - 1]);
+    const file = join(judgeDir(rank), 'answer.json');
+    if (existsSync(file)) unlinkSync(file);
+    start(rank, Date.now());
+    final = null;
+  }
+
   // 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 lines = renderStrip({ rows, view: ui.view, frame, width: out.columns, focus: ui.focus, elapsed: seconds(started), confirm: ui.confirm });
     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}`);
@@ -233,7 +458,7 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
     const j = judges[rank - 1];
     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 overview 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 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 - STRIP_ROWS}r${screen}${Object.entries(j.modes).map(([mode, final]) => `\x1b[?${mode}${final}`).join('')}`);
@@ -242,25 +467,23 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
   }
 
   function finish() {
-    const outcomes = rows.map((r) => (r.state === 'done' ? { results: [r.result] } : { error: r.error }));
-    const report = buildReport({ panel, target, cwd, harness, judges: rows.map((_, i) => [i]), outcomes });
-    const reportPath = join(runDir, 'report.json');
-    writeFileSync(join(runDir, 'report.md'), renderMarkdown(report));
-    writeFileSync(reportPath, `${JSON.stringify(report, null, 2)}\n`);
-    final = { status: report.status, path: relative(cwd, reportPath) };
+    const outcomes = rows.map((r) => (r.state === 'done' ? { answer: r.result } : { error: r.error }));
+    const report = buildReport({ panel, target, outcomes });
+    writeFileSync(join(runDir, 'report.json'), `${JSON.stringify(report, null, 2)}\n`);
+    final = { status: report.status };
   }
 
   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 });
+    const lines = renderOverview({ title: `${panel.owner}/${panel.name} v${panel.version}`, target, harness, elapsed: seconds(started), rows, cursor: ui.cursor, width: out.columns, height: out.rows - STRIP_ROWS, frame, focus: ui.focus === 'detail' ? 'detail' : 'list', scroll: ui.scroll });
     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() {
+    rows = criteria.map((c, i) => ({ ...c, ...state(c, i) }));
     if (!final) {
-      rows = criteria.map((c, i) => ({ ...c, ...state(c, i) }));
       const live = rows.filter((r) => r.state === 'running').length;
       const first = judges[0];
       const hold = first && !first.exited && (Date.now() - first.started < FIRST_JUDGE_HEAD_START || rows[0].trust);
@@ -278,7 +501,6 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
     const timer = setInterval(tick, 1000);
     const spinner = setInterval(() => {
       frame += 1;
-      if (final) return;
       if (!ui.view) draw();
       else if (Date.now() - lastData > 60) drawStrip();
     }, 100);
@@ -287,20 +509,26 @@ export function runTable({ panel, runDir, harness, cwd, target, brief, sources }
     process.stdin.on('data', (data) => {
       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, focus: next.focus };
+      const height = out.rows - STRIP_ROWS;
+      const limit = rows.length ? maxScroll({ rows, cursor: ui.cursor, width: out.columns, height }) : 0;
+      const next = press(ui, key, { open: judges.flatMap((j, i) => (j ? [i + 1] : [])), running: rows.some((r) => r.state === 'running'), count: criteria.length, maxScroll: limit, page: Math.max(1, height - 7) });
+      ui = { view: next.view, confirm: next.confirm, focus: next.focus, cursor: next.cursor, scroll: next.scroll };
       if (next.send) {
         judges[from - 1].proc.write(key);
       } else if (next.quit) {
         clearInterval(timer);
         clearInterval(spinner);
-        // The harness on PATH can be a shell script that runs the real binary as a child and waits for it, so
-        // SIGHUP goes to the process group of the judge. The pty makes each judge the leader of its own group.
-        for (const j of judges) if (j && !j.exited) process.kill(-j.proc.pid, 'SIGHUP');
+        for (const j of judges) stop(j);
         out.write(`${TABLE_MODES}\x1b[?25h\x1b[?1049l`);
         process.stdin.setRawMode(false);
         process.stdin.pause();
         done();
+      } else if (next.restart) {
+        restart(next.restart);
+        tick();
+      } else if (next.flip) {
+        harnesses[next.flip - 1] = harnesses[next.flip - 1] === 'claude' ? 'codex' : 'claude';
+        tick();
       } else if (ui.view && ui.view === from) {
         drawStrip();
       } else {