@xsft/panels 0.8.0 → 0.8.1

package/README.md

@@ -31,11 +31,11 @@ Run the command in the folder of the product. Each judge starts in that folder,
 
 On a terminal, `panels run` shows the overview, and each judge runs in its interactive harness in a pseudo-terminal inside the command. Each judge writes `judges/N/answer.json` and stays open. The overview writes the report when each judge has an answer or an error, and the command exits from `report.json` when you quit. Without a terminal, the judges run in the background (`claude -p`, `codex exec`), and stdout prints `N/4  name` and the verdict of each criterion, then the report path. Plain mode needs `--yolo`, because a background judge cannot answer a question; without it the command exits 2.
 
-The overview fills the terminal: a header line with the run (panel and target at the left, the version, the harness, and the elapsed time at the right edge) and two columns from 100 columns up (stacked below that). The left column lists the criteria: rank, name, score (4 green, 3 ink, 2 yellow, 1 red, a grey `·/4` until the score arrives), the time the judge has run, and the tokens it used, with a total row at the bottom under a hairline: the scores added as quarters over the number of criteria, the longest judge time, and the tokens added up. The right column shows the criterion under the cursor: its name, score, and level word, the verdict paragraph, and at the bottom the key line and a grey fact line with the judge number, the harness, the time, and the answer file. While a judge runs, its detail shows the Cross mark, a half disc in a square frame drawn in a halftone screen that breathes, centred in the pane, with the time under it. One soft wave sweeps across the running rows and the mark. On the overview, `↑` and `↓` move the cursor, `r` restarts the judge of the cursor row with its harness (its answer is dropped and the report is written again when it finishes), and `h` flips that harness between `claude` and `codex`. The page never says pass or fail; the total is the result.
+The overview fills the terminal: a header line with the run (panel and target at the left, the version, the harness, and the elapsed time at the right edge) and two columns from 100 columns up (stacked below that). The left column lists the criteria: rank, name, score (4 green, 3 ink, 2 yellow, 1 red, a grey `·/4` until the score arrives), the time the judge has run, and the tokens it used, with a total row at the bottom under a hairline: the scores added as quarters over the number of criteria, the longest judge time, and the tokens added up. The right column shows the criterion under the cursor: its name, score, and level word, then a sub tab bar, `Verdict │ Criterion`, and on the last row the key line. `tab` switches the sub tab: Verdict shows the verdict paragraph, Criterion the description and the body of the criterion as plain text. `enter` moves the focus into the pane (an orange bar marks it): `↑` and `↓` scroll one line, `PgUp` and `PgDn` a page, `esc` or `enter` return to the list. While a judge runs, the Verdict sub tab shows a piece of halftone art in a square frame, generated from a seed per criterion for the run (a half disc, a disc, a ring, a quarter disc, a band, or two discs), breathing, centred in the pane, with the time under it. One soft wave sweeps across the running rows and the art. On the overview, `↑` and `↓` move the cursor. The page never says pass or fail; the total is the result.
 
-The second tab, `Panel`, holds the text of the panel: the criteria at the left with the same cursor as the overview, and at the right the description and the body of the cursor criterion as plain text. `enter` moves the focus into that pane (an orange bar marks it): `↑` and `↓` scroll one line, `PgUp` and `PgDn` a page, `esc` or `enter` return to the list.
+`r` opens a small modal that asks before it restarts the judge of the cursor row (the current answer is discarded; `enter` on restart runs it, `esc` cancels). `h` opens a modal that picks the harness of that judge, `claude` or `codex`, for its next restart. While a modal is open, every other key is ignored.
 
-A tab strip on the last three lines shows a hairline, the tabs (`Overview`, `Panel`, then the name of each criterion, split by a grey `│`, cut to the first word when they do not fit), and a status line with the progress, the elapsed time, and the keys. The strip is the navigation area. With the focus on the strip, `←` and `→` move the active tab and switch the view, `1` to `9` jump to a started judge by list order, `0` to the overview, `enter` gives the focus to the judge, and `q` quits; while a judge still runs, the first `q` asks and a second `q` quits. With the focus on a judge, each key goes to the judge, and `ctrl-q` gives the focus back to the strip. The overview takes no text, so the strip keeps the focus there. A harness that has not seen the folder asks whether to trust it. The first judge starts alone; press `1`, answer, and the other judges start.
+A tab strip on the last three lines shows a hairline, the tabs (`Overview`, then the name of each criterion, split by a grey `│`, cut to the first word when they do not fit), and a status line with the progress, the elapsed time, and the keys. The strip is the navigation area. With the focus on the strip, `←` and `→` move the active tab and switch the view, `1` to `9` jump to a started judge by list order, `0` to the overview, `enter` gives the focus to the judge, and `q` quits; while a judge still runs, the first `q` asks and a second `q` quits. With the focus on a judge, each key goes to the judge, and `ctrl-q` gives the focus back to the strip. The overview takes no text, so the strip keeps the focus there. A harness that has not seen the folder asks whether to trust it. The first judge starts alone; press `1`, answer, and the other judges start.
 
 ## Run folder
 

package/lib/table.js

@@ -107,29 +107,65 @@ export function wrap(text, width) {
 /** 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.
+// The art of a running judge: a halftone piece inside a square frame, generated from a seed. Two sizes, rows by columns.
 const MARK_SIZES = [[11, 22], [7, 14]];
 const HALFTONE = [' ', '░', '▒', '▓'];
-const BREATH = 20;
+const SHAPES = ['half-left', 'half-right', 'half-top', 'half-bottom', 'disc', 'ring', 'quarter-tl', 'quarter-tr', 'quarter-bl', 'quarter-br', 'band', 'twin'];
+
+/** A small seeded random generator (mulberry32): the same seed gives the same sequence. */
+export function mulberry32(seed) {
+  let a = seed | 0;
+  return () => {
+    a = (a + 0x6D2B79F5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
 
 /**
- * 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].
+ * The lines of the art of a judge at frame: a grey square frame of box-drawing lines, and inside it a shape in a
+ * halftone screen, two cells per row unit so it looks round. The seed picks the shape (a half disc on one side,
+ * a disc, a ring, a quarter disc in a corner, a diagonal band, or two discs), its size and place, the grain of
+ * the screen, and the phase and the speed of its pulse. The screen breathes, and the glimmer wave runs across the
+ * cells by screen column, where start is the screen column of the frame. size is [rows, columns].
  */
-export function renderMark({ frame = 0, start = 0, width = 80, size = MARK_SIZES[0] }) {
+export function renderArt({ seed = 0, frame = 0, start = 0, width = 80, size = MARK_SIZES[0] }) {
+  const rng = mulberry32(seed);
+  const shape = SHAPES[Math.floor(rng() * SHAPES.length)];
+  const scale = 0.65 + rng() * 0.35;
+  const dx = (rng() - 0.5) * 0.3;
+  const dy = (rng() - 0.5) * 0.3;
+  const phase = rng() * Math.PI * 2;
+  const period = 14 + rng() * 12;
+  const grain = 0.4 + rng() * 0.6;
   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 w = inner.cols / 2;
+  const h = inner.rows;
+  const r = (scale * h) / 2;
+  const centres = {
+    'half-left': [0, h / 2], 'half-right': [w, h / 2], 'half-top': [w / 2, 0], 'half-bottom': [w / 2, h],
+    'quarter-tl': [0, 0], 'quarter-tr': [w, 0], 'quarter-bl': [0, h], 'quarter-br': [w, h],
+  };
+  const [cx, cy] = centres[shape] ?? [w / 2 + dx * w, h / 2 + dy * h];
+  // The distance of a cell from the shape, 0 at the heart and 1 at the edge; past 1 the cell is empty.
+  const distance = (u, v) => {
+    const d = Math.hypot(u - cx, v - cy);
+    if (shape === 'ring') { const t = Math.abs(d - r * 0.75) / (r * 0.3); return t; }
+    if (shape === 'band') return Math.abs((u - cx) - (v - cy)) / (r * 0.6);
+    if (shape === 'twin') return Math.min(Math.hypot(u - (cx - r * 0.5), v - cy), Math.hypot(u - (cx + r * 0.5), v - cy)) / (r * 0.75);
+    if (shape.startsWith('quarter')) return d / (r * 1.5);
+    return d / r;
+  };
+  const pulse = Math.sin((2 * Math.PI * frame) / period + phase);
   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)))];
+      const d = distance((x + 0.5) / 2, y + 0.5);
+      const noise = mulberry32(seed * 7919 + y * 1021 + x * 31)() - 0.5;
+      cells += d > 1 ? ' ' : HALFTONE[Math.max(1, Math.min(3, Math.round(1.5 + (1 - d) * 1.5 + pulse + noise * grain)))];
     }
     lines.push(`${GREY}│${RESET}${glimmer(cells, frame, start + 1, width)}${GREY}│${RESET}`);
   }
@@ -137,7 +173,7 @@ export function renderMark({ frame = 0, start = 0, width = 80, size = MARK_SIZES
   return lines;
 }
 
-/** The size of the mark that fits a pane of columnWidth by lines, or null when only the one-line form fits. */
+/** The size of the art 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;
 
 /**
@@ -194,11 +230,30 @@ const headerLine = (title, target, harness, elapsed, width, version) => {
 
 const paneHeight = (width, body) => (width >= TWO_COLUMNS ? body : body - Math.floor(body / 2) - 1);
 
-/** The number of lines of the text pane of the Panel tab that the scroll can hide. */
-export function panelScrollMax({ rows, cursor, 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);
+// The detail pane holds the header, the sub tab bar, its hairline, the content, then the key line on its last row.
+const PANE_FRAME = 4;
+
+/** The lines of the detail pane under its sub tab bar: the verdict (or the mark while running), or the criterion text. */
+function detailContent(row, sub, columnWidth, start, width, frame, window) {
+  if (sub === 'criterion') return criterionText(row, columnWidth);
+  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 ? renderArt({ seed: row.seed ?? 0, 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));
+    return [...Array(above).fill(''), ...block];
+  }
+  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.`;
+  return wrap(text, columnWidth);
+}
+
+/** The number of lines of the detail pane of the overview that the scroll can hide, for the sub tab sub. */
+export function overviewScrollMax({ rows, cursor, sub = 'verdict', width, height }) {
+  const { columnWidth, start } = layout(rows, width);
+  const window = paneHeight(width, height - 2) - PANE_FRAME;
+  return window < 1 ? 0 : Math.max(0, detailContent(rows[cursor], sub, columnWidth, start, width, 0, window).length - window);
 }
 
 /**
@@ -227,17 +282,21 @@ function page({ header, width, height, left, leftBottom, pane, edge }) {
 }
 
 /**
- * The lines of the overview. rows hold { rank, name, state, result, error, trust, time, tokens, harness, restarted },
+ * The lines of the overview. rows hold { rank, name, seed, 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).
+ * (null for none), harness the one its next restart uses, restarted the seconds since a restart (null for none),
+ * seed the seed of the art of the criterion.
  * 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.
+ * runs the whole height, the rows and the detail header stay at the top, and the total row and the key
+ * line sits at the bottom. Under the detail header a sub tab bar picks the content: sub 'verdict' shows the
+ * verdict, or the Cross mark centred in the pane with the time under it while the judge runs; sub 'criterion'
+ * shows the description and the body of the 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 content. 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 }) {
+export function renderOverview({ title, target, harness, elapsed, rows, cursor, width, height, frame = 0, version = VERSION, sub = 'verdict', focus = 'list', scroll = 0 }) {
   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)}`;
@@ -266,29 +325,19 @@ export function renderOverview({ title, target, harness, elapsed, rows, cursor,
   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 detailHeader = `${focus === 'text' ? `${ORANGE}${BOLD}` : BOLD}${name}${RESET}${' '.repeat(Math.max(1, columnWidth - name.length - level.length))}${GREY}${level}${RESET}`;
+  const subTab = (label, key) => `${sub === key ? BOLD : GREY}${label}${RESET}`;
+  const subBar = [`${subTab('Verdict', 'verdict')}${GREY} │ ${RESET}${subTab('Criterion', 'criterion')}`, `${GREY}${'─'.repeat(columnWidth)}${RESET}`];
+  const bottom = [`${ORANGE}r${RESET} restart   ${ORANGE}h${RESET} harness ${row.harness}   ${ORANGE}${row.rank}${RESET} watch`];
+  // The pane: the header, the sub tab bar and its hairline, a window of the content that the scroll moves, then
+  // the key line on the last row.
   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;
-    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);
-    }
-    const top = [detailHeader, '', ...content];
-    if (window === undefined || content.length > window) return [...top, '', ...bottom];
-    return [...top, ...Array(window - content.length).fill(''), '', ...bottom];
+    const window = lines === undefined ? undefined : lines - PANE_FRAME;
+    const content = detailContent(row, sub, columnWidth, start, width, frame, window);
+    const top = [detailHeader, ...subBar];
+    if (window === undefined || window < 1) return [...top, ...content, ...bottom];
+    const from = Math.min(scroll, Math.max(0, content.length - window));
+    return [...top, ...content.slice(from, from + window), ...Array(Math.max(0, window - content.length)).fill(''), ...bottom];
   };
   return page({
     header: headerLine(title, target, harness, elapsed, width, version),
@@ -297,67 +346,70 @@ export function renderOverview({ title, target, harness, elapsed, rows, cursor,
     left: { rows, lines: left },
     leftBottom: [`${GREY}${'─'.repeat(leftWidth)}${RESET}`, totalLine],
     pane,
-    edge: `${GREY}│${RESET}`,
+    edge: focus === 'text' ? `${ORANGE}▌${RESET}` : `${GREY}│${RESET}`,
   });
 }
 
+// The overview is view 0. The other views are judges.
+export const isPage = (view) => view === 0;
+
+const HARNESSES = ['claude', 'codex'];
+
 /**
- * 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.
+ * 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 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}`,
-  });
-}
+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 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;
+/**
+ * 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 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 elapsed time at the left and the keys of the focus at the right. The tabs are 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), 'text'
+ * (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; focus 'modal' shows the keys of the open modal. The keys
+ * of the overview drop their last words when they do not fit beside the progress.
  */
 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 progress = confirm ? 'judges still run. q again quits, another key stays' : `${finished} of ${rows.length} done · ${clock(elapsed)}`;
+  const full = focus === 'judge' ? 'ctrl-q tabs'
+    : focus === 'modal' ? '↑ ↓ · enter pick · esc close'
+      : focus === 'text' ? '↑ ↓ scroll · enter list · ← → tabs · q q quit'
+      : view === 0 ? '↑ ↓ criterion · tab verdict/criterion · enter scroll · r restart · h harness · ← → tabs · q q quit' : '← → tabs · enter back · q quit';
+  const parts = full.split(' · ');
+  while (parts.length > 1 && progress.length + 2 + parts.join(' · ').length + 2 > width) parts.pop();
+  const keys = parts.join(' · ');
+  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);
-  const activeIndex = view === 0 ? 0 : view === PANEL ? 1 : view + 1;
+  const activeIndex = view;
   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 row = rows[i - 1];
     const start = col;
     col += text.length;
     if (row?.state === 'running' && !row.trust) {
@@ -366,7 +418,6 @@ export function renderStrip({ rows, view, frame = 0, width, focus = 'strip', ela
     }
     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}`;
@@ -374,61 +425,79 @@ export function renderStrip({ rows, view, frame = 0, width, focus = 'strip', ela
 }
 
 /**
- * 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 { view, confirm, focus, cursor, sub, 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 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, which takes
+ * no text, up and down move the cursor, Tab switches the sub tab of the detail pane (verdict or criterion),
+ * r opens the restart modal of the judge of the cursor row, h the harness picker, and Enter moves the focus into
+ * the pane: there up and down scroll one line, PgUp and PgDn a page, and Esc or Enter return the focus. A modal
+ * (state.modal) takes every key until Enter or Esc. On a judge tab, Enter, Esc, or ctrl-q give the focus to the
+ * judge. The result carries harness: { rank, value } when the picker picked one.
  */
-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 };
+export function press({ view, confirm, focus, cursor, sub = 'verdict', scroll = 0, modal = null }, key, { open, running, count, maxScroll: limit = 0, page: step = 10, harnesses = [] }) {
+  const strip = (v) => ({ view: v, confirm: false, focus: 'strip', cursor, sub, scroll, modal: null });
+  if (modal) {
+    // The modal takes every key: up and down move its cursor, Enter picks the row, Esc closes it, the rest is ignored.
+    const same = { view, confirm, focus, cursor, sub, scroll, modal };
+    if (UP.includes(key)) return { ...same, modal: { ...modal, cursor: Math.max(0, modal.cursor - 1) } };
+    if (DOWN.includes(key)) return { ...same, modal: { ...modal, cursor: Math.min(modal.options.length - 1, modal.cursor + 1) } };
+    if (key === '\x1b') return strip(0);
+    if (key === '\r') {
+      const pick = modal.options[modal.cursor];
+      if (modal.kind === 'harness') return { ...strip(0), harness: { rank: modal.rank, value: pick } };
+      return pick === 'restart' ? { ...strip(0), restart: modal.rank } : strip(0);
+    }
+    return same;
+  }
+  if (focus === 'judge') return TOGGLE.includes(key) ? strip(view) : { view, confirm, focus, cursor, sub, scroll, modal: null, 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 (key === 'q') return running ? { view: 0, confirm: true, focus: 'strip', cursor, sub, scroll, modal: null } : { ...strip(0), quit: true };
   if (RIGHT.includes(key) || LEFT.includes(key)) {
-    const cycle = [0, PANEL, ...open];
+    const cycle = [0, ...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 (view === 0) {
+    const keep = { ...strip(0), focus };
+    if (key === 'r') return open.includes(cursor + 1) ? { ...keep, focus: 'modal', modal: restartModal(cursor + 1) } : keep;
+    if (key === 'h') return { ...keep, focus: 'modal', modal: harnessModal(cursor + 1, harnesses[cursor]) };
+    if (key === '\t') return { ...keep, sub: sub === 'verdict' ? 'criterion' : 'verdict', scroll: 0 };
     if (focus === 'text') {
-      const text = (s) => ({ view, confirm: false, focus: 'text', cursor, scroll: Math.max(0, Math.min(limit, s)) });
+      const text = (s) => ({ ...keep, 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);
+      if (key === '\r' || key === '\x1b') return strip(0);
+      return keep;
     }
-    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);
+    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 { ...strip(0), focus: 'text', scroll: 0 };
+    return strip(0);
   }
-  if (BACK.includes(key)) return { view, confirm: false, focus: 'judge', cursor, scroll };
+  if (BACK.includes(key)) return { view, confirm: false, focus: 'judge', cursor, sub, scroll, modal: null };
   return strip(view);
 }
 
 /** 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 }) {
   const out = process.stdout;
-  const criteria = panel.criteria.map((c, i) => ({ rank: i + 1, ...c }));
+  // One random seed per run; each criterion keeps its own art for the whole run, through restarts.
+  const runSeed = Math.floor(Math.random() * 2 ** 31);
+  const criteria = panel.criteria.map((c, i) => ({ rank: i + 1, seed: runSeed + 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', cursor: 0, scroll: 0 };
+  let ui = { view: 0, confirm: false, focus: 'strip', cursor: 0, sub: 'verdict', scroll: 0, modal: null };
   let stripTimer;
   let lastData = 0;
   const started = Date.now();
@@ -545,10 +614,14 @@ export function runTable({ panel, runDir, harness, cwd, target, yolo = false })
 
   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 });
+    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, sub: ui.sub, focus: ui.focus === 'text' ? 'text' : '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(''));
+    // 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 - STRIP_ROWS });
+      out.write(box.map((l, i) => `\x1b[${top + i + 1};${left + 1}H${l}`).join(''));
+    }
     drawStrip();
   }
 
@@ -581,9 +654,9 @@ export function runTable({ panel, runDir, harness, cwd, target, yolo = false })
       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 limit = rows.length ? overviewScrollMax({ rows, cursor: ui.cursor, sub: ui.sub, 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 - PANE_FRAME), harnesses });
+      ui = { view: next.view, confirm: next.confirm, focus: next.focus, cursor: next.cursor, sub: next.sub, scroll: next.scroll, modal: next.modal };
       if (next.send) {
         judges[from - 1].proc.write(key);
       } else if (next.quit) {
@@ -597,8 +670,8 @@ export function runTable({ panel, runDir, harness, cwd, target, yolo = false })
       } else if (next.restart) {
         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();

package/package.json

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