@xsft/panels 0.8.0 → 0.10.0

package/lib/table.js

@@ -1,9 +1,10 @@
-// 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.
+// The terminal mode of `panels run`: one screen, the overview. The criteria at the left, and at the right the
+// detail of the cursor criterion: its verdict, its judge's live terminal, or its text. Each judge runs its
+// interactive harness in a pseudo-terminal, and a headless terminal keeps its screen; the Agent pane draws
+// that screen from the buffer, so no mode of a judge reaches the real terminal.
 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 { check, MINUTES_PER_CRITERION, parseAnswer, writeJudge } from './judge.js';
 import { buildReport, VERSION } from './report.js';
@@ -17,29 +18,33 @@ 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' };
+// The colour of a score, from the 16-colour palette: 4 bright green, 3 green, 2 yellow, 1 red.
+const SCORE_COLOUR = { 4: '\x1b[92m', 3: '\x1b[32m', 2: '\x1b[33m', 1: '\x1b[31m' };
+// Inline code in the markdown of a verdict or a body: ink on a dark grey ground.
+const CODE = '\x1b[48;5;236m';
+const CODE_END = '\x1b[49m';
+const BOLD_END = '\x1b[22m';
 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.
+// ctrl-q brings the focus back from the Agent pane. 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 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 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;
+// The sub tabs of the detail pane, in the order the arrows walk them.
+export const SUBS = ['verdict', 'agent', 'criterion'];
+// The header line and the hairline under it; the panes take the rest of the screen.
+const TOP_ROWS = 2;
+// The detail pane holds the sub tab bar and its hairline, then the content.
+const PANE_FRAME = 2;
 
 /**
  * text with the glimmer at frame, where the text starts at the screen column start (0-based) on a screen width
@@ -77,7 +82,6 @@ export function tokensOnScreen(text) {
 
 const plainLength = (s) => s.replace(/\x1b\[[0-9;]*m/g, '').length;
 const padTo = (s, width) => s + ' '.repeat(Math.max(0, width - plainLength(s)));
-const centre = (s, width) => ' '.repeat(Math.max(0, Math.floor((width - plainLength(s)) / 2))) + 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) {
@@ -86,67 +90,40 @@ export function clip(line, width) {
   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);
+    const characters = [...part];
+    out += characters.slice(0, room).join('');
+    seen += Math.min(characters.length, room);
   }
   return out;
 }
 
-/** The words of text in lines of at most width characters. */
+/** The words of text in lines of at most width visible characters. A word can carry escape sequences. */
 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; }
+    if (line && plainLength(line) + 1 + plainLength(word) > width) { lines.push(line); line = word; }
     else line = line ? `${line} ${word}` : word;
   }
   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 Cross mark: a half disc inside a square frame, drawn in a halftone screen. Two sizes, rows by columns.
-const MARK_SIZES = [[11, 22], [7, 14]];
-const HALFTONE = [' ', '░', '▒', '▓'];
-const BREATH = 20;
-
 /**
- * The lines of the Cross mark at frame: a square frame of box-drawing lines, grey, and inside it a half disc on
- * the left, its flat side on the frame, made of halftone cells two columns per row. The screen breathes: its
- * density pulses over BREATH frames, and the glimmer wave runs across the cells by screen column, where start is
- * the screen column of the frame. size is [rows, columns].
+ * Markdown as styled lines for a pane: each paragraph wraps on its own, one blank line stays where the text has
+ * one or more, a heading becomes a grey upper-case label, a list item keeps its dash with a hanging indent, a
+ * fenced block is indented two spaces as it is, a table line stays as it is, inline code is ink on a dark grey
+ * ground, bold is bold, and link marks go.
  */
-export function renderMark({ frame = 0, start = 0, width = 80, size = MARK_SIZES[0] }) {
-  const [rows, cols] = size;
-  const inner = { rows: rows - 2, cols: cols - 2 };
-  const cy = (inner.rows - 1) / 2;
-  const radius = inner.rows / 2;
-  const pulse = Math.sin((2 * Math.PI * frame) / BREATH);
-  const lines = [`${GREY}┌${'─'.repeat(inner.cols)}┐${RESET}`];
-  for (let y = 0; y < inner.rows; y++) {
-    let cells = '';
-    for (let x = 0; x < inner.cols; x++) {
-      const d = Math.hypot((x + 0.5) / 2, y - cy) / radius;
-      cells += d > 1 ? ' ' : HALFTONE[Math.max(1, Math.min(3, Math.round(1.5 + (1 - d) * 1.5 + pulse)))];
+export function renderMarkdown(markdown, width) {
+  const inline = (text, heading = false) => text.split(/(`[^`]+`)/).map((part) => {
+    if (part.startsWith('`') && part.endsWith('`')) {
+      return part.slice(1, -1).split(/(\s+)/).map((word) => /^\s*$/.test(word) ? word : `${CODE}${word}${CODE_END}`).join('');
     }
-    lines.push(`${GREY}│${RESET}${glimmer(cells, frame, start + 1, width)}${GREY}│${RESET}`);
-  }
-  lines.push(`${GREY}└${'─'.repeat(inner.cols)}┘${RESET}`);
-  return lines;
-}
-
-/** The size of the mark that fits a pane of columnWidth by lines, or null when only the one-line form fits. */
-export const markSize = (columnWidth, lines) => MARK_SIZES.find(([r, c]) => r + 2 <= lines && c <= columnWidth) ?? null;
-
-/**
- * The body of a criterion as plain lines for the text 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 plainMarkdown(markdown, width) {
-  const inline = (t) => t.replace(/\*\*(.+?)\*\*/g, '$1').replace(/__(.+?)__/g, '$1').replace(/`([^`]+)`/g, '$1').replace(/\*(\S[^*]*?)\*/g, '$1').replace(/\[([^\]]+)\]\([^)]*\)/g, '$1');
+    const words = heading ? part.toUpperCase() : part;
+    return words.replace(/\*\*(.+?)\*\*/g, `${BOLD}$1${BOLD_END}`).replace(/__(.+?)__/g, `${BOLD}$1${BOLD_END}`)
+      .replace(/(^|\s)\*(\S[^*]*?)\*(?=\s|$|[.,;:])/g, '$1$2').replace(/\[([^\]]+)\]\(([^)]*)\)/g, '$1 ($2)');
+  }).join('');
   const lines = [];
   let paragraph = [];
   let fence = false;
@@ -154,15 +131,21 @@ export function plainMarkdown(markdown, width) {
     if (paragraph.length) lines.push(...wrap(inline(paragraph.join(' ')), width));
     paragraph = [];
   };
-  for (const raw of markdown.split('\n')) {
+  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; }
+    if (fence) { lines.push(`  ${line}`); continue; }
+    if (!line.trim()) { flush(); if (lines.length && 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 (heading) { flush(); if (lines.length && lines.at(-1) !== '') lines.push(''); lines.push(`${GREY}${inline(heading[1], true)}${RESET}`); continue; }
+    const item = /^\s*([-*+]|\d+\.)\s+(.*)$/.exec(line);
+    if (item) {
+      flush();
+      const dash = item[1].length === 1 ? '-' : item[1];
+      const [first, ...rest] = wrap(inline(item[2]), width - dash.length - 1);
+      lines.push(`${dash} ${first ?? ''}`, ...rest.map((l) => `${' '.repeat(dash.length + 1)}${l}`));
+      continue;
+    }
     if (/^\s*\|/.test(line)) { flush(); lines.push(inline(line)); continue; }
     paragraph.push(line.trim());
   }
@@ -172,73 +155,111 @@ export function plainMarkdown(markdown, width) {
   return lines;
 }
 
-/** The lines of the body of a criterion in the Panel tab. */
-function criterionText(row, columnWidth) {
+/** 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 lines of the screen of a judge, from the active buffer of its headless terminal: each row's cells with
+ * their attributes (bold, dim, italic, underline, inverse, strikethrough, and the colours in the default,
+ * palette, or rgb modes), runs with equal attributes merged, padded or clipped to width. A wide character
+ * takes its two cells.
+ */
+export function screenLines(term, width, rows) {
+  const buffer = term.buffer.active;
+  const sgr = (c) => {
+    const codes = [];
+    if (c.isBold()) codes.push('1');
+    if (c.isDim()) codes.push('2');
+    if (c.isItalic()) codes.push('3');
+    if (c.isUnderline()) codes.push('4');
+    if (c.isInverse()) codes.push('7');
+    if (c.isStrikethrough()) codes.push('9');
+    if (c.isFgPalette()) codes.push(`38;5;${c.getFgColor()}`);
+    else if (c.isFgRGB()) { const v = c.getFgColor(); codes.push(`38;2;${(v >> 16) & 255};${(v >> 8) & 255};${v & 255}`); }
+    if (c.isBgPalette()) codes.push(`48;5;${c.getBgColor()}`);
+    else if (c.isBgRGB()) { const v = c.getBgColor(); codes.push(`48;2;${(v >> 16) & 255};${(v >> 8) & 255};${v & 255}`); }
+    return codes.join(';');
+  };
   const lines = [];
-  if (row.description) lines.push(...wrap(row.description, columnWidth));
-  if (row.body) lines.push('', ...plainMarkdown(row.body, columnWidth));
+  for (let y = 0; y < rows; y++) {
+    const line = buffer.getLine(buffer.viewportY + y);
+    let out = '';
+    let run = null;
+    let seen = 0;
+    for (let x = 0; line && x < line.length && seen < width; x++) {
+      const cell = line.getCell(x);
+      const chars = cell.getChars();
+      const w = cell.getWidth();
+      if (w === 0) continue;
+      if (seen + w > width) break;
+      const attrs = sgr(cell);
+      if (attrs !== run) { out += `${RESET}${attrs ? `\x1b[${attrs}m` : ''}`; run = attrs; }
+      out += chars || ' ';
+      seen += w;
+    }
+    lines.push(`${out}${RESET}${' '.repeat(Math.max(0, width - seen))}`);
+  }
   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 };
-};
+const completed = (state) => state === 'done' || state === 'error';
 
-const headerLine = (title, target, harness, elapsed, width, version) => {
-  const run = ` panels run  ${title}   ${target}`;
-  const meta = `${version} · ${harness} · ${clock(elapsed)} `;
-  return ` ${BOLD}panels run${RESET}  ${title}${GREY}   ${target}${' '.repeat(Math.max(2, width - run.length - meta.length))}${meta}${RESET}`;
-};
+/** A manual tab choice lasts until the judge completes or restarts. subs maps ranks to { sub, state }. */
+export function subOf(subs, row) {
+  const choice = subs[row.rank];
+  if (choice && completed(choice.state) === completed(row.state)) return choice.sub;
+  return completed(row.state) ? 'verdict' : 'agent';
+}
 
-const paneHeight = (width, body) => (width >= TWO_COLUMNS ? body : body - Math.floor(body / 2) - 1);
+const layout = (rows, width) => {
+  // The name column is as wide as the longest name, and at least as wide as the words of the total row.
+  const desired = Math.max(12, ...rows.map((r) => r.name.length)) + 27;
+  const leftWidth = Math.min(desired, width >= TWO_COLUMNS ? Math.floor(width * 0.48) : width);
+  return width >= TWO_COLUMNS ? { leftWidth, columnWidth: width - leftWidth - 3 } : { leftWidth, columnWidth: width - 2 };
+};
 
-/** The number of lines of the text pane of the Panel tab that the scroll can hide. */
-export function panelScrollMax({ rows, cursor, width, height }) {
+/** The size of the panes: the width of the detail pane and the rows of its content, for a screen width by height. */
+export function paneSize(rows, width, height) {
   const { columnWidth } = layout(rows, width);
-  const window = paneHeight(width, height - 2) - 2;
-  return window < 1 ? 0 : Math.max(0, criterionText(rows[cursor], columnWidth).length - window);
+  const body = height - TOP_ROWS;
+  const paneRows = width >= TWO_COLUMNS ? body : body - Math.floor(body / 2) - 1;
+  return { cols: Math.max(1, columnWidth), rows: Math.max(1, paneRows - PANE_FRAME) };
 }
 
-/**
- * Lays a page out: the header and the hairline, then the list at the left and a pane at the right from
- * TWO_COLUMNS wide, or the list above the pane below that. pane(lines) gives the lines of the pane for a height,
- * or for undefined when there is no height. edge is the divider character between the columns.
- */
-function page({ header, width, height, left, leftBottom, pane, edge }) {
-  const { leftWidth } = layout(left.rows, width);
-  const fill = (top, bottom, lines) => {
-    const n = lines === undefined || lines < top.length + bottom.length ? 0 : lines - top.length - bottom.length;
-    return [...top, ...Array(n).fill(''), ...bottom];
-  };
-  const lines = [header, `${GREY}${'─'.repeat(width)}${RESET}`];
-  const body = height === undefined ? undefined : height - 2;
-  if (width >= TWO_COLUMNS) {
-    const leftLines = fill(left.lines, leftBottom, body);
-    const rightLines = pane(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 = fill(left.lines, leftBottom, half);
-    lines.push(...list, '', ...pane(body === undefined ? undefined : body - list.length - 1).map((l) => `${edge === `${GREY}│${RESET}` ? ' ' : edge} ${l}`));
+/** The lines of the Verdict or Criterion content of a row, for a pane of columnWidth. */
+function paneText(row, sub, columnWidth) {
+  if (sub === 'criterion') {
+    const lines = [];
+    if (row.description) lines.push(...wrap(row.description, columnWidth));
+    if (row.body) lines.push('', ...renderMarkdown(row.body, columnWidth));
+    return lines;
   }
-  return lines.map((l) => clip(l, width));
+  if (row.state === 'done') return renderMarkdown(row.result.verdict, columnWidth);
+  if (row.state === 'error') return renderMarkdown(row.error, columnWidth);
+  return [`${GREY}waiting for the verdict${RESET}`];
+}
+
+/** The number of lines of the Verdict or Criterion content that the scroll can hide. */
+export function scrollMax({ rows, cursor, sub, width, height }) {
+  if (sub === 'agent') return 0;
+  const { columnWidth } = layout(rows, width);
+  const window = paneSize(rows, width, height).rows;
+  return Math.max(0, paneText(rows[cursor], sub, columnWidth).length - window);
 }
 
 /**
- * The lines of the overview. rows hold { rank, name, 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. 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. The detail of a running judge is the Cross mark, centred in the pane, with the time
- * under it. Without a height, or when the content is taller than the height, the lines follow each other.
+ * Draws the criterion list and selected detail pane. cursor selects a row; scroll skips lines of its text.
+ * The selected row stays visible above the totals. At TWO_COLUMNS or more, the panes sit side by side.
+ * At smaller widths, the list sits above the detail. height can be omitted to include all content.
  */
-export function renderOverview({ title, target, harness, elapsed, rows, cursor, width, height, frame = 0, version = VERSION }) {
-  const { leftWidth, columnWidth, start } = layout(rows, width);
+export function renderScreen({ title, target, harness, elapsed, rows, cursor, sub, agent = null, focus = 'list', scroll = 0, keys = '', width, height, frame = 0, version = VERSION }) {
+  const run = ` ${BOLD}panels run${RESET}  ${title}${GREY}   ${target}   ${version} · ${harness} · ${clock(elapsed)}${RESET}`;
+  const parts = keys.split(' · ');
+  while (parts.length > 1 && parts.join(' · ').length > width - 24) parts.pop();
+  const keysText = parts.join(' · ');
+  const runWidth = Math.max(0, width - keysText.length - 3);
+  const header = `${padTo(clip(run, runWidth), runWidth)}${RESET}  ${GREY}${keysText}${RESET}`;
+  const { leftWidth, columnWidth } = 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) => {
@@ -248,195 +269,179 @@ export function renderOverview({ title, target, harness, elapsed, rows, cursor,
     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);
+      const name = glimmer(clip(r.name, pad).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}`;
+    const colour = r.state === 'done' ? SCORE_COLOUR[r.result.score] : r.state === 'error' ? SCORE_COLOUR[1] : current ? ORANGE : GREY;
+    const name = current ? `${ORANGE}${clip(r.name, pad).padEnd(pad)}${RESET}` : r.state === 'queued' ? `${GREY}${clip(r.name, pad).padEnd(pad)}${RESET}` : clip(r.name, pad).padEnd(pad);
+    const rest = r.state === 'running' ? `${ORANGE}enter Agent to answer 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 finished = rows.filter((r) => completed(r.state)).length;
   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 totalLine = `${padTo(`${GREY}   ${finished} of ${rows.length} done${RESET}`, 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 = `${BOLD}${name}${RESET}${' '.repeat(Math.max(1, columnWidth - name.length - level.length))}${GREY}${level}${RESET}`;
-  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}`];
-  // The pane: the header, the content, then the bottom lines at the bottom. A running judge shows the mark centred.
+  const subTab = (label, key) => `${sub === key ? (focus === 'pane' ? `${ORANGE}${BOLD}` : BOLD) : GREY}${label}${RESET}`;
+  const levelColour = row.state === 'done' ? SCORE_COLOUR[row.result.score] : row.state === 'error' ? SCORE_COLOUR[1] : GREY;
   const pane = (lines) => {
-    // The pane holds the header, a blank line, the content, a blank line, then the bottom lines.
-    const window = lines === undefined ? undefined : lines - 2 - 1 - bottom.length;
+    const window = lines === undefined ? undefined : Math.max(0, lines - PANE_FRAME);
     let content;
-    if (row.state === 'running' && !row.trust) {
-      const since = row.restarted !== null ? `restarted with ${row.harness} · ` : '';
-      const line = `${GREY}${since}${clock(row.time ?? 0)} · ${row.rank} to watch${RESET}`;
-      const size = markSize(columnWidth, window ?? MARK_SIZES[0][0] + 2);
-      const art = size ? renderMark({ frame, start: start + Math.floor((columnWidth - size[1]) / 2), width, size }) : [glimmer('judging', frame, start + Math.floor((columnWidth - 7) / 2), width)];
-      const block = [...art, '', line].map((l) => centre(l, columnWidth));
-      const above = window === undefined ? 0 : Math.max(0, Math.floor((window - block.length) / 2));
-      content = [...Array(above).fill(''), ...block];
-    } 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.`;
-      content = wrap(text, columnWidth);
+    if (sub === 'agent') content = agent ?? [`${GREY}${row.state === 'queued' ? 'the judge has not started' : 'no screen yet'}${RESET}`];
+    else {
+      const text = paneText(row, sub, columnWidth);
+      const from = window === undefined ? 0 : Math.min(scroll, Math.max(0, text.length - window));
+      content = window === undefined ? text : text.slice(from, from + window);
     }
-    const top = [detailHeader, '', ...content];
-    if (window === undefined || content.length > window) return [...top, '', ...bottom];
-    return [...top, ...Array(window - content.length).fill(''), '', ...bottom];
+    // The sub tab bar at the left, the name and the level of the row at the right, then a hairline.
+    const bar = `${subTab('Verdict', 'verdict')}${GREY} │ ${RESET}${subTab('Agent', 'agent')}${GREY} │ ${RESET}${subTab('Criterion', 'criterion')}`;
+    const tail = `${BOLD}${name}${RESET}  ${levelColour}${level}${RESET}`;
+    const space = columnWidth - plainLength(bar) - 1;
+    const detail = space >= plainLength(tail) ? tail : `${levelColour}${level}${RESET}`;
+    const top = [`${bar}${' '.repeat(Math.max(1, columnWidth - plainLength(bar) - plainLength(detail)))}${space >= plainLength(detail) ? detail : ''}`, `${GREY}${'─'.repeat(columnWidth)}${RESET}`];
+    if (window === undefined) return [...top, ...content];
+    return [...top, ...content.slice(0, window), ...Array(Math.max(0, window - content.length)).fill('')];
   };
-  return page({
-    header: headerLine(title, target, harness, elapsed, width, version),
-    width,
-    height,
-    left: { rows, lines: left },
-    leftBottom: [`${GREY}${'─'.repeat(leftWidth)}${RESET}`, totalLine],
-    pane,
-    edge: `${GREY}│${RESET}`,
-  });
+  const edge = focus === 'pane' ? `${ORANGE}▌${RESET}` : `${GREY}│${RESET}`;
+  const lines = [header, `${GREY}${'─'.repeat(width)}${RESET}`];
+  const body = height === undefined ? undefined : height - TOP_ROWS;
+  const fill = (top, bottom, n) => {
+    if (n === undefined) return [...top, ...bottom];
+    const visible = Math.max(0, n - bottom.length);
+    const from = Math.max(0, Math.min(cursor - visible + 1, top.length - visible));
+    const entries = top.slice(from, from + visible);
+    return [...entries, ...Array(Math.max(0, visible - entries.length)).fill(''), ...bottom].slice(0, n);
+  };
+  if (width >= TWO_COLUMNS) {
+    const leftLines = fill(left, leftBottom, body);
+    const rightLines = pane(body);
+    for (let i = 0; i < Math.max(leftLines.length, rightLines.length); i++) lines.push(`${padTo(clip(leftLines[i] ?? '', leftWidth), leftWidth)} ${edge} ${rightLines[i] ?? ''}`);
+  } else {
+    const half = body === undefined ? undefined : Math.floor(body / 2);
+    const list = fill(left, leftBottom, half);
+    lines.push(...list, '', ...pane(body === undefined ? undefined : body - list.length - 1).map((l) => `${focus === 'pane' ? `${ORANGE}▌${RESET}` : ' '} ${l}`));
+  }
+  return lines.map((l) => clip(l, width));
 }
 
-/**
- * The lines of the Panel tab: the same header, the criteria at the left (rank and name, the cursor row orange),
- * and at the right the description and the body of the cursor criterion as plain text. focus 'text' marks the
- * pane with an orange edge and an orange header, and scroll hides that many lines of the text.
- */
-export function renderPanel({ title, target, harness, elapsed, rows, cursor, width, height, version = VERSION, focus = 'list', scroll = 0 }) {
-  const { leftWidth, columnWidth } = layout(rows, width);
-  const pad = leftWidth - 27;
-  const left = rows.map((r, i) => (i === cursor ? `${ORANGE}▸ ${String(r.rank).padStart(2)}  ${r.name.padEnd(pad)}${RESET}` : `  ${String(r.rank).padStart(2)}  ${r.name.padEnd(pad)}`));
-  const row = rows[cursor];
-  const name = `${row.rank}  ${row.name.toUpperCase()}`;
-  const header = `${focus === 'text' ? `${ORANGE}${BOLD}` : BOLD}${name}${RESET}`;
-  const text = criterionText(row, columnWidth);
-  const pane = (lines) => {
-    const window = lines === undefined ? text.length : lines - 2;
-    const from = Math.min(scroll, Math.max(0, text.length - window));
-    return [header, '', ...text.slice(from, from + Math.max(0, window))];
-  };
-  return page({
-    header: headerLine(title, target, harness, elapsed, width, version),
-    width,
-    height,
-    left: { rows, lines: left },
-    leftBottom: [],
-    pane,
-    edge: focus === 'text' ? `${ORANGE}▌${RESET}` : `${GREY}│${RESET}`,
-  });
+/** Where the Agent pane's content starts on the screen: { row, col }, 0-based, for the cursor of the judge. */
+export function paneOrigin(rows, width, height) {
+  const { leftWidth } = layout(rows, width);
+  if (width >= TWO_COLUMNS) return { row: TOP_ROWS + PANE_FRAME, col: leftWidth + 3 };
+  const body = height - TOP_ROWS;
+  return { row: TOP_ROWS + Math.floor(body / 2) + 1 + PANE_FRAME, col: 2 };
 }
 
-// The pages: the overview (view 0) and the Panel tab (view 'panel'). The other views are judges.
-export const PANEL = 'panel';
-export const isPage = (view) => view === 0 || view === PANEL;
+const HARNESSES = ['claude', 'codex'];
 
 /**
- * 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 tabs are Overview, Panel, 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), 'text' (the text pane of the Panel tab scrolls), or 'judge' (the active tab is bold ink, the keys go to
- * the judge). confirm replaces the progress with the quit question.
+ * The modal states: { kind: 'harness', rank, options, cursor } picks the harness of judge rank; { kind: 'restart',
+ * rank, options, cursor } asks before a restart. options are the rows, cursor the index of the orange row.
  */
-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 keys = focus === 'judge' ? 'ctrl-q tabs'
-    : focus === 'text' ? '↑ ↓ scroll · enter list · ← → tabs · q q quit'
-      : view === 0 ? '↑ ↓ criterion · r restart · h harness · ← → tabs · q q quit'
-        : view === PANEL ? '↑ ↓ criterion · enter text · ← → tabs · q q quit' : '← → tabs · enter back · q quit';
-  const names = (level) => ['Overview', 'Panel', ...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);
-  const activeIndex = view === 0 ? 0 : view === PANEL ? 1 : view + 1;
-  let line = ' ';
-  let col = 1;
-  list.forEach((text, i) => {
-    if (i) { line += `${GREY} │ ${RESET}`; col += 3; }
-    const active = i === activeIndex;
-    const row = rows[i - 2];
-    const start = col;
-    col += text.length;
-    if (row?.state === 'running' && !row.trust) {
-      line += glimmer(text, frame, start, width, active && focus === 'strip' ? GLIMMER_ORANGE : GLIMMER, active ? BOLD : '');
-      return;
-    }
-    line += `${active ? (focus === 'judge' ? BOLD : `${ORANGE}${BOLD}`) : GREY}${text}${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}`];
+export const harnessModal = (rank, current) => ({ kind: 'harness', rank, options: HARNESSES, cursor: Math.max(0, HARNESSES.indexOf(current)) });
+export const restartModal = (rank) => ({ kind: 'restart', rank, options: ['restart', 'cancel'], cursor: 1 });
+
+/**
+ * The lines of a modal and where they go: { top, left, lines }, centred on a screen width by height. A grey
+ * box-drawing frame, a bold title, a grey note when there is one, then one row per option, the cursor row orange
+ * with ▸. current is the harness the judge uses now, marked in the harness picker.
+ */
+export function renderModal({ modal, current, width, height }) {
+  const title = modal.kind === 'harness' ? `Harness for judge ${modal.rank}` : `Restart judge ${modal.rank}?`;
+  const note = modal.kind === 'restart' ? `with ${current} · the current answer is discarded` : null;
+  const rows = modal.options.map((o) => (modal.kind === 'harness' && o === current ? `${o}  (current)` : o));
+  const inner = Math.max(title.length, note?.length ?? 0, ...rows.map((r) => r.length + 2)) + 2;
+  const line = (text) => `${GREY}│${RESET} ${padTo(text, inner - 2)} ${GREY}│${RESET}`;
+  const lines = [`${GREY}┌${'─'.repeat(inner)}┐${RESET}`, line(`${BOLD}${title}${RESET}`)];
+  if (note) lines.push(line(`${GREY}${note}${RESET}`));
+  lines.push(line(''));
+  rows.forEach((r, i) => lines.push(line(i === modal.cursor ? `${ORANGE}▸ ${r}${RESET}` : `  ${r}`)));
+  lines.push(`${GREY}└${'─'.repeat(inner)}┘${RESET}`);
+  return { top: Math.max(0, Math.floor((height - lines.length) / 2)), left: Math.max(0, Math.floor((width - inner - 2) / 2)), lines };
+}
+
+/** The key hint for the state: the list, the pane on a text sub tab, the Agent pane, a modal, or the quit question. */
+export function hint({ focus, sub, modal, confirm }) {
+  if (confirm) return 'judges still run · q again quits · another key stays';
+  if (modal) return '↑ ↓ · enter pick · esc close';
+  if (focus === 'pane') return sub === 'agent' ? 'ctrl-q list · keys go to judge' : '← → tabs · ↑ ↓ scroll · esc list · q quit';
+  return '↑ ↓ rows · ← → tabs · enter pane · r restart · h harness · q quit';
 }
 
 /**
- * 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, PANEL for the Panel tab, or N for judge N. open holds the ranks of the judges that have started,
- * count the number of criteria, maxScroll the lines the text 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 left and right move the active tab and switch the view, 1-9
- * jump to a started judge, 0 to the overview, and q quits (a second q confirms while a judge runs). On the
- * overview and the Panel tab, which take no text, up and down move the shared cursor; on the overview r
- * restarts the judge of the cursor row and h flips its harness; on the Panel tab Enter moves the focus into
- * the text pane, where up and down scroll one line, PgUp and PgDn a page, and Esc or Enter return the focus.
- * On a judge tab, Enter, Esc, or ctrl-q give the focus to the judge.
+ * The next state after one key: { cursor, focus, subs, scroll, modal, confirm }, plus send: true when the key goes
+ * to the judge of the cursor row, quit: true, restart: N, or harness: { rank, value }. focus is 'list' or 'pane'.
+ * subs maps a rank to the explicit { sub, state } choice of the engineer. ctx holds open (the ranks of the judges
+ * that have started), running, count, states (by index), harnesses, maxScroll, and page.
+ * The list: up and down move the cursor, left and right the sub tab of the cursor row, Enter focuses the pane,
+ * r opens the restart modal, h the harness modal, q quits (a second q while a judge runs). The pane on Verdict or
+ * Criterion: up and down scroll, PgUp and PgDn a page, left and right the sub tab, Esc or Enter back, q quits.
+ * The pane on Agent: every key goes to the judge, except ctrl-q, which returns to the list. A modal takes every
+ * key until Enter or Esc.
  */
-export function press({ view, confirm, focus, cursor, scroll = 0 }, key, { open, running, count, maxScroll: limit = 0, page: step = 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', cursor, scroll } : { ...strip(0), quit: true };
-  if (RIGHT.includes(key) || LEFT.includes(key)) {
-    const cycle = [0, PANEL, ...open];
-    const dir = RIGHT.includes(key) ? 1 : -1;
-    return strip(cycle[(cycle.indexOf(view) + dir + cycle.length) % cycle.length]);
-  }
-  if (/^[1-9]$/.test(key)) return open.includes(Number(key)) ? strip(Number(key)) : { ...strip(view), focus };
-  if (key === '0') return strip(0);
-  if (isPage(view)) {
-    if (view === 0 && key === 'r') return open.includes(cursor + 1) ? { ...strip(0), restart: cursor + 1 } : strip(0);
-    if (view === 0 && key === 'h') return { ...strip(0), flip: cursor + 1 };
-    if (focus === 'text') {
-      const text = (s) => ({ view, confirm: false, focus: 'text', cursor, scroll: Math.max(0, Math.min(limit, s)) });
-      if (UP.includes(key)) return text(scroll - 1);
-      if (DOWN.includes(key)) return text(scroll + 1);
-      if (key === '\x1b[5~') return text(scroll - step);
-      if (key === '\x1b[6~') return text(scroll + step);
-      if (key === '\r' || key === '\x1b') return strip(view);
-      return text(scroll);
+export function press(state, key, { open, running, count, states, harnesses = [], maxScroll: limit = 0, page: step = 10 }) {
+  const { cursor, focus, subs, scroll, modal, confirm } = state;
+  const row = { rank: cursor + 1, state: states[cursor] };
+  const sub = subOf(subs, row);
+  const list = { cursor, focus: 'list', subs, scroll, modal: null, confirm: false };
+  const turn = (dir) => ({ ...subs, [row.rank]: { sub: SUBS[(SUBS.indexOf(sub) + dir + SUBS.length) % SUBS.length], state: row.state } });
+  if (modal) {
+    // The modal takes every key: up and down move its cursor, Enter picks the row, Esc closes it, the rest is ignored.
+    if (UP.includes(key)) return { ...state, modal: { ...modal, cursor: Math.max(0, modal.cursor - 1) } };
+    if (DOWN.includes(key)) return { ...state, modal: { ...modal, cursor: Math.min(modal.options.length - 1, modal.cursor + 1) } };
+    if (key === '\x1b') return list;
+    if (key === '\r') {
+      const pick = modal.options[modal.cursor];
+      if (modal.kind === 'harness') return { ...list, harness: { rank: modal.rank, value: pick } };
+      return pick === 'restart' ? { ...list, restart: modal.rank } : list;
     }
-    if (UP.includes(key)) return { ...strip(view), cursor: Math.max(0, cursor - 1), scroll: 0 };
-    if (DOWN.includes(key)) return { ...strip(view), cursor: Math.min(count - 1, cursor + 1), scroll: 0 };
-    if (view === PANEL && key === '\r') return { view, confirm: false, focus: 'text', cursor, scroll: 0 };
-    return strip(view);
+    return state;
   }
-  if (BACK.includes(key)) return { view, confirm: false, focus: 'judge', cursor, scroll };
-  return strip(view);
+  if (confirm) return { ...list, quit: key === 'q' };
+  if (focus === 'pane' && sub === 'agent') return TOGGLE.includes(key) ? list : { ...state, send: true };
+  if (key === 'q') return running ? { ...list, confirm: true } : { ...list, quit: true };
+  if (RIGHT.includes(key)) return { ...state, subs: turn(1), scroll: 0 };
+  if (LEFT.includes(key)) return { ...state, subs: turn(-1), scroll: 0 };
+  if (focus === 'pane') {
+    const at = (s) => ({ ...state, scroll: Math.max(0, Math.min(limit, s)) });
+    if (UP.includes(key)) return at(scroll - 1);
+    if (DOWN.includes(key)) return at(scroll + 1);
+    if (key === '\x1b[5~') return at(scroll - step);
+    if (key === '\x1b[6~') return at(scroll + step);
+    if (key === '\r' || key === '\x1b') return list;
+    return state;
+  }
+  if (UP.includes(key)) return { ...list, cursor: Math.max(0, cursor - 1), scroll: 0 };
+  if (DOWN.includes(key)) return { ...list, cursor: Math.min(count - 1, cursor + 1), scroll: 0 };
+  if (key === '\r') return { ...list, focus: 'pane', scroll: 0 };
+  if (key === 'r') return open.includes(row.rank) ? { ...list, modal: restartModal(row.rank) } : list;
+  if (key === 'h') return { ...list, modal: harnessModal(row.rank, harnesses[cursor]) };
+  return list;
 }
 
 /** Runs the judges, shows the overview, and writes the report. Resolves when the engineer quits. */
-export function runTable({ panel, runDir, harness, cwd, target, yolo = false }) {
+export function runTable({ sid, panel, runDir, harness, cwd, target, 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.
+  // The harness of each judge: the run harness, until the harness modal picks another.
   const harnesses = criteria.map(() => harness);
   let rows = [];
-  let final = null;
-  let ui = { view: 0, confirm: false, focus: 'strip', cursor: 0, scroll: 0 };
-  let stripTimer;
-  let lastData = 0;
+  let reportWritten = false;
+  let ui = { cursor: 0, focus: 'list', subs: {}, scroll: 0, modal: null, confirm: false };
   const started = Date.now();
 
   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);
+  // Every judge's pseudo-terminal has the size of the Agent pane.
+  const size = () => paneSize(criteria, out.columns, out.rows);
 
   function screenText(j) {
     const buffer = j.term.buffer.active;
@@ -447,7 +452,7 @@ export function runTable({ panel, runDir, harness, cwd, target, yolo = false })
 
   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 facts = { time: j ? seconds(j.started, j.finished) : null, tokens: j?.tokens ?? null };
     const file = join(judgeDir(c.rank), 'answer.json');
     if (existsSync(file)) {
       if (j && !j.finished) j.finished = Date.now();
@@ -457,6 +462,7 @@ export function runTable({ panel, runDir, harness, cwd, target, yolo = false })
       return errors.length ? { ...facts, state: 'error', error: `invalid answer: ${errors.join(' ')}` } : { ...facts, state: 'done', result: answer };
     }
     if (j === undefined) return { ...facts, state: 'queued' };
+    if (j.exited) return { ...facts, state: 'error', error: 'the judge exited without an answer.json' };
     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);
@@ -464,28 +470,20 @@ export function runTable({ panel, runDir, harness, cwd, target, yolo = false })
     return { ...facts, tokens: j.tokens ?? null, state: 'running', trust: TRUST_PROMPT.test(screen) };
   }
 
-  function start(rank, restartedAt = null) {
+  function start(rank) {
     const [command, ...argv] = writeJudge({ dir: judgeDir(rank), criterion: criteria[rank - 1], harness: harnesses[rank - 1], cwd, target, 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(), 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 || judges[rank - 1] !== j) return;
-      out.write(data);
-      lastData = Date.now();
-      stripSoon();
-    }));
+    const j = { started: Date.now(), finished: undefined, tokens: null, term, proc, cursorShown: true, exited: false, dirty: true, screen: null };
+    proc.onData((data) => term.write(data, () => { j.dirty = true; }));
     proc.onExit(() => { j.exited = true; });
     // The headless terminal answers the queries of the harness, such as the cursor position.
     term.onData((data) => proc.write(data));
-    // The serializer does not keep the cursor visibility (25) or the mouse encoding (1006), so each judge keeps them here.
+    // The judge shows or hides its cursor with DECTCEM (mode 25); the Agent pane follows it.
     for (const final of ['h', 'l']) {
       term.parser.registerCsiHandler({ prefix: '?', final }, (params) => {
-        for (const p of params) if (p in j.modes) j.modes[p] = final;
+        if (params.includes(25)) j.cursorShown = final === 'h';
         return false;
       });
     }
@@ -501,60 +499,56 @@ export function runTable({ panel, runDir, harness, cwd, target, yolo = false })
     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, 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 (isPage(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 strip does not land inside an escape sequence that a chunk split.
-  function stripSoon() {
-    clearTimeout(stripTimer);
-    stripTimer = setTimeout(drawStrip, 50);
-  }
-
-  function showJudge(rank) {
-    const j = judges[rank - 1];
-    j.term.write('', () => {
-      if (ui.view !== rank) return;
-      // 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('')}`);
-      drawStrip();
-    });
+    start(rank);
+    reportWritten = false;
   }
 
   function finish() {
     const outcomes = rows.map((r) => (r.state === 'done' ? { answer: r.result } : { error: r.error }));
-    const report = buildReport({ panel, target, outcomes });
+    const report = buildReport({ sid, panel, target, outcomes });
     writeFileSync(join(runDir, 'report.json'), `${JSON.stringify(report, null, 2)}\n`);
-    final = { status: report.status };
+    reportWritten = true;
+  }
+
+  /** The lines of the Agent pane of judge j, rendered again only when the judge wrote output or the size changed. */
+  function agentLines(j) {
+    const { cols, rows: lines } = size();
+    if (j.dirty || !j.screen || j.screen.cols !== cols || j.screen.rows !== lines) {
+      j.screen = { cols, rows: lines, lines: screenLines(j.term, cols, lines) };
+      j.dirty = false;
+    }
+    return j.screen.lines;
   }
 
   let frame = 0;
   function draw() {
-    const common = { 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 };
-    const lines = ui.view === PANEL ? renderPanel({ ...common, focus: ui.focus === 'text' ? 'text' : 'list', scroll: ui.scroll }) : renderOverview({ ...common, frame });
-    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();
+    if (!rows.length) return;
+    const row = rows[ui.cursor];
+    const sub = subOf(ui.subs, row);
+    const j = judges[ui.cursor];
+    const lines = renderScreen({
+      title: `${panel.owner}/${panel.name} v${panel.version}`, target, harness, elapsed: seconds(started), rows, cursor: ui.cursor, sub,
+      agent: sub === 'agent' && j ? agentLines(j) : null, focus: ui.focus, scroll: ui.scroll, keys: hint({ ...ui, sub }), width: out.columns, height: out.rows, frame,
+    });
+    while (lines.length < out.rows) lines.push('');
+    let screen = `\x1b[?25l${lines.slice(0, out.rows).map((l, i) => `\x1b[${i + 1};1H${l}\x1b[K`).join('')}`;
+    // The modal sits over the overview; the next draw without it shows the overview again.
+    if (ui.modal) {
+      const { top, left, lines: box } = renderModal({ modal: ui.modal, current: harnesses[ui.modal.rank - 1], width: out.columns, height: out.rows });
+      screen += box.map((l, i) => `\x1b[${top + i + 1};${left + 1}H${l}`).join('');
+    }
+    // In the Agent pane with the focus, the real cursor sits where the judge's cursor is, when the judge shows it.
+    if (ui.focus === 'pane' && sub === 'agent' && j && j.cursorShown && !ui.modal) {
+      const { row: r, col } = paneOrigin(rows, out.columns, out.rows);
+      const { cursorX, cursorY } = j.term.buffer.active;
+      screen += `\x1b[${r + cursorY + 1};${col + Math.min(cursorX, size().cols - 1) + 1}H\x1b[?25h`;
+    }
+    out.write(screen);
   }
 
   function tick() {
     rows = criteria.map((c, i) => ({ ...c, ...state(c, i) }));
-    if (!final) {
+    if (!reportWritten) {
       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);
@@ -563,60 +557,57 @@ export function runTable({ panel, runDir, harness, cwd, target, yolo = false })
         start(r.rank);
         r.state = 'running';
       }
-      if (rows.every((r) => r.state === 'done' || r.state === 'error')) finish();
+      if (rows.every((r) => completed(r.state))) finish();
     }
-    if (isPage(ui.view)) draw();
+    draw();
   }
 
   return new Promise((done) => {
     const timer = setInterval(tick, 1000);
-    const spinner = setInterval(() => {
-      frame += 1;
-      if (isPage(ui.view)) draw();
-      else if (Date.now() - lastData > 60) drawStrip();
-    }, 100);
+    const frames = setInterval(() => { frame += 1; draw(); }, 100);
     out.write('\x1b[?1049h\x1b[?25l');
     process.stdin.setRawMode(true);
-    process.stdin.on('data', (data) => {
-      const key = data.toString();
-      const from = ui.view;
-      const height = out.rows - STRIP_ROWS;
-      const limit = rows.length ? panelScrollMax({ 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 };
+    const onKey = (key) => {
+      const sub = rows.length ? subOf(ui.subs, rows[ui.cursor]) : 'verdict';
+      const limit = rows.length ? scrollMax({ rows, cursor: ui.cursor, sub, width: out.columns, height: out.rows }) : 0;
+      const next = press(ui, key, { open: judges.flatMap((j, i) => (j ? [i + 1] : [])), running: rows.some((r) => r.state === 'running'), count: criteria.length, states: rows.map((r) => r.state), harnesses, maxScroll: limit, page: Math.max(1, size().rows - 1) });
+      ui = { cursor: next.cursor, focus: next.focus, subs: next.subs, scroll: next.scroll, modal: next.modal, confirm: next.confirm };
       if (next.send) {
-        judges[from - 1].proc.write(key);
+        judges[ui.cursor]?.proc.write(key);
       } else if (next.quit) {
         clearInterval(timer);
-        clearInterval(spinner);
+        clearInterval(frames);
         for (const j of judges) stop(j);
-        out.write(`${TABLE_MODES}\x1b[?25h\x1b[?1049l`);
+        out.write(`${RESET}\x1b[?25h\x1b[?1049l`);
         process.stdin.setRawMode(false);
         process.stdin.pause();
         done();
       } else if (next.restart) {
+        delete ui.subs[next.restart];
+        ui.scroll = 0;
         restart(next.restart);
         tick();
-      } else if (next.flip) {
-        harnesses[next.flip - 1] = harnesses[next.flip - 1] === 'claude' ? 'codex' : 'claude';
+      } else if (next.harness) {
+        harnesses[next.harness.rank - 1] = next.harness.value;
         tick();
-      } else if (!isPage(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 (!isPage(from)) out.write(TABLE_MODES);
-        if (isPage(ui.view)) draw();
-        else showJudge(ui.view);
+        draw();
       }
+    };
+    process.stdin.on('data', (data) => {
+      const text = data.toString();
+      const sub = rows.length ? subOf(ui.subs, rows[ui.cursor]) : 'verdict';
+      if (ui.focus === 'pane' && sub === 'agent') onKey(text);
+      else for (const key of text.match(/\x1b\[[0-?]*[ -/]*[@-~]|\x1bO.|[\s\S]/g)) onKey(key);
     });
     out.on('resize', () => {
       const { cols, rows: lines } = size();
       for (const j of judges) {
         if (j && !j.exited) j.proc.resize(cols, lines);
         j?.term.resize(cols, lines);
+        if (j) j.dirty = true;
       }
-      if (isPage(ui.view)) draw();
-      else showJudge(ui.view);
+      draw();
     });
     tick();
   });