@bongos/core 1.20.81 → 1.20.83

package/modules/hall-ui/public/gate.js

@@ -248,86 +248,242 @@
   // cosmetic: POST /autonomy/fence and the two allowlist routes carry
   // `autonomy.fence.manage`, which the catalog declares system:true + archon, so
   // it cannot be granted to a custom rank. The wall is the server's.
+  //
+  // ONE panel, two shapes (task 1004509). While anything the runner needs is
+  // missing it is a checklist, each unticked line saying what to do; once every
+  // line is ticked it collapses to a single status line with the switch beside
+  // it. The code version, the Claude account and the other PCs sit behind
+  // Details, because they only matter when something is wrong.
+
+  // The runner's liveness verdict is the SERVER's — modules/autonomy/runner-health.js
+  // decides what dead means and the route attaches it — so this page and any
+  // future alert cannot drift into two definitions of the same word. These are
+  // only the order to pick the runner to describe in, and the colour of its dot.
+  const HEALTH_RANK = { alive: 0, late: 1, restarting: 2, dead: 3, never_seen: 4 };
+  const HEALTH_DOT = { alive: 'ok', late: 'ok', restarting: 'info', dead: 'danger', never_seen: 'info' };
+
+  // The panel is drawn from both reads at once; each is kept so a write that only
+  // reloads one of them redraws with the other's last answer.
+  const fenceView = { runners: null, fence: null, detailsOpen: false, adding: false };
+
+  // The runner to describe: the healthiest one, so a second PC that died long
+  // ago does not hide the one that is working. The rest are listed in Details.
+  function primaryRunner(runners) {
+    return (runners || []).slice().sort((a, b) =>
+      (HEALTH_RANK[(a.health || {}).state] ?? 9) - (HEALTH_RANK[(b.health || {}).state] ?? 9))[0] || null;
+  }
+
+  // Each checklist line is ok, todo, or wait (nothing to do yet; it follows from
+  // another line). Only a todo keeps the checklist open. An unknown is never a
+  // todo: an older runner that does not report its Claude account is not drawn
+  // as signed out.
+  //
+  // `fence` is the PROJECT fence (the switch and the allowlist); `mine` is the
+  // caller's own, narrowed to the goals they picked in Settings and stopped if the
+  // owner paused them (task 1004501). A server that predates that split sends no
+  // `project`, and then there is no second layer to check.
+  function readiness(runner, fence, mine) {
+    const h = (runner && runner.health) || {};
+    const connected = ['alive', 'late', 'restarting'].includes(h.state);
+    const goals = (fence && fence.goals) || [];
+    const items = [];
+    if (!runner) {
+      items.push({ key: 'pc', state: 'todo', text: 'Connect a PC', hint: 'Install the runner on an always-on PC. It shows up here when it first checks in.' });
+    } else if (!connected) {
+      items.push({ key: 'pc', state: 'todo', text: `${h.host || 'The PC'} has gone quiet`, hint: `No check-in for ${h.age || 'a while'}. Check the PC is on, then restart the runner.` });
+    } else {
+      items.push({ key: 'pc', state: 'ok', text: 'PC connected', meta: h.host || '' });
+    }
+    if (!connected) items.push({ key: 'claude', state: 'wait', text: 'Claude signed in' });
+    else if (h.account) items.push({ key: 'claude', state: 'ok', text: 'Claude signed in' });
+    if (connected && h.code && h.code.behind === true) {
+      items.push({ key: 'code', state: 'wait', text: 'Updating to the latest code', hint: 'It does this by itself.' });
+    } else if (connected && h.code) {
+      items.push({ key: 'code', state: 'ok', text: 'Up to date' });
+    }
+    items.push(goals.length
+      ? { key: 'goals', state: 'ok', text: goals.length === 1 ? '1 goal picked' : `${goals.length} goals picked` }
+      : { key: 'goals', state: 'todo', text: 'Pick at least one goal', hint: 'The runner only works on goals you add below.', action: 'add-goal' });
+    if (mine && goals.length) {
+      items.push((mine.goals || []).length
+        ? { key: 'mine', state: 'ok', text: 'Your runner has its goals' }
+        : { key: 'mine', state: 'todo', text: 'Choose which goals your runner works', hint: 'Each builder picks from the goals below, in Settings.', action: 'settings' });
+    }
+    items.push(fence && fence.enabled
+      ? { key: 'switch', state: 'ok', text: 'Turned on' }
+      : { key: 'switch', state: 'todo', text: 'Turn it on', hint: fence && fence.paused_reason ? `Turned off: ${fence.paused_reason}` : 'Use the switch at the top.' });
+    // On, but not for you: no permission to run one, or paused on your builder.
+    if (mine && fence && fence.enabled && mine.enabled === false && (mine.goals || []).length) {
+      items.push({ key: 'mine-stop', state: 'todo', text: 'Your runner is held', hint: mine.paused_reason || 'It is not allowed to take work right now.' });
+    }
+    return { items, ready: !items.some((i) => i.state === 'todo') };
+  }
+
+  // The headline when everything is ticked: what it is doing, in four words.
+  function headline(runner) {
+    const h = (runner && runner.health) || {};
+    if (h.state === 'restarting') return 'Restarting to pick up new code';
+    if (h.workingTaskId) return `Working on task ${h.workingTaskId}`;
+    return 'Ready — waiting for a task';
+  }
+
+  const ICON = { ok: '✓', todo: '!', wait: '…' };
+
+  function checklistHtml(items) {
+    return `<ul class="rn-check">${items.map((i) => `
+      <li class="rn-check__item rn-check__item--${i.state}">
+        <span class="rn-check__icon" aria-hidden="true">${ICON[i.state]}</span>
+        <span class="rn-check__text">${escapeHtml(i.text)}${i.meta ? ` <span class="rn-meta">${escapeHtml(i.meta)}</span>` : ''}
+          ${i.hint && i.state !== 'ok' ? `<span class="rn-check__hint">${escapeHtml(i.hint)}</span>` : ''}</span>
+        ${i.action === 'add-goal' ? '<button type="button" class="btn btn--sm" data-rn="add-goal">Choose goals</button>' : ''}
+        ${i.action === 'settings' ? '<a class="btn btn--sm" href="/builders/settings#autobongos">Open Settings</a>' : ''}
+      </li>`).join('')}</ul>`;
+  }
+
+  function goalChipsHtml(goals, priorityGoalId) {
+    const pri = priorityGoalId == null ? null : Number(priorityGoalId);
+    // The priority goal first, because that is the order the runner works them in.
+    const ordered = (goals || []).slice().sort((a, b) => (Number(b.goal_id) === pri) - (Number(a.goal_id) === pri));
+    const chips = ordered.map((g) => {
+      const id = escapeHtml(String(g.goal_id));
+      const isPri = Number(g.goal_id) === pri;
+      const name = escapeHtml(g.note || `Goal ${g.goal_id}`);
+      return `<li class="rn-chip${isPri ? ' rn-chip--pri' : ''}">
+        <button type="button" class="rn-chip__star" data-priority="${isPri ? '' : id}"
+          aria-label="${isPri ? `Stop working goal ${id} first` : `Work goal ${id} first`}"
+          title="${isPri ? 'Worked first — click to clear' : 'Work this goal first'}">${isPri ? '★' : '☆'}</button>
+        <a href="/builders#/goal/${encodeURIComponent(g.goal_id)}" title="Goal ${id}">${name}</a>
+        <button type="button" class="rn-chip__x" data-revoke="${id}" aria-label="Remove goal ${id}" title="Remove">×</button>
+      </li>`;
+    }).join('');
+    const add = fenceView.adding
+      ? `<li><form id="fence-add" class="rn-add">
+          <label class="sr-only" for="fence-goal-id">Goal number</label>
+          <input type="number" id="fence-goal-id" min="1" step="1" required placeholder="Goal number">
+          <label class="sr-only" for="fence-goal-note">Name (optional)</label>
+          <input type="text" id="fence-goal-note" maxlength="500" placeholder="Name (optional)">
+          <button type="submit" class="btn btn--sm">Add</button>
+          <button type="button" class="btn btn--ghost btn--sm" data-rn="cancel-add">Cancel</button>
+        </form></li>`
+      : '<li><button type="button" class="rn-chip rn-chip--add" data-rn="add-goal">+ Add goal</button></li>';
+    return `<h3 class="rn-sub">Goals it can work on</h3><ul class="rn-chips">${chips}${add}</ul>`;
+  }
 
-  function renderFenceState(fence) {
+  function factsHtml(runner) {
+    const h = runner.health || {};
+    const facts = [];
+    if (h.host) facts.push(`PC <strong>${escapeHtml(h.host)}</strong>`);
+    if (h.account) facts.push(`Claude account ${escapeHtml(h.account)}`);
+    if (h.code) {
+      const c = h.code;
+      const status = c.behind === true ? ` — behind main (${escapeHtml(c.mainShort)})`
+        : c.behind === false ? ' — up to date' : '';
+      const disk = c.diskShort ? `, updated in place to ${escapeHtml(c.diskShort)}` : '';
+      facts.push(`code <code>${escapeHtml(c.short)}</code>${disk}${status}`);
+    }
+    facts.push(`${escapeHtml(h.detail || '')}${h.age ? `, last check-in ${escapeHtml(h.age)} ago` : ''}`);
+    return `<li>${facts.join(' · ')}</li>`;
+  }
+
+  function renderFencePanel() {
+    const el = document.getElementById('fence-body');
+    const { runners } = fenceView;
+    const raw = fenceView.fence;
+    if (!el || runners === null || raw === null) return;
+    if (raw.error) {
+      // A fence the HALL cannot read is only a rendering problem — the RUNNER
+      // reads it separately and refuses on the same failure. Say so plainly rather
+      // than showing a switch whose position is a guess.
+      el.innerHTML = emptyStateHtml('Could not read the runner switch just now.');
+      return;
+    }
+    const runner = runners.error ? null : primaryRunner(runners.list);
+    const h = (runner && runner.health) || {};
+    // GET /autonomy/fence answers with the CALLER'S fence (task 1004501); the
+    // switch and the chips are the project's, which rides along as `project`.
+    const fence = raw.project || raw;
+    const mine = raw.project ? raw : null;
+    const { items, ready } = readiness(runner, fence, mine);
+    // Read the fold off the page before redrawing: the toggle event fires after
+    // a click that also redraws, so a listener would record it too late.
+    const openNow = el.querySelector('.rn-details');
+    if (openNow) fenceView.detailsOpen = openNow.open;
     const on = fence.enabled === true;
-    const el = document.getElementById('fence-state');
+    const dot = ready ? (HEALTH_DOT[h.state] || 'info') : 'warn';
+    const title = ready ? headline(runner) : 'Set up the runner';
+    const sub = runners.error ? 'Could not read the runner’s check-ins just now.'
+      : ready ? `${escapeHtml(h.host || '')} · checked in ${escapeHtml(h.age || '?')} ago`
+        : `${items.filter((i) => i.state === 'ok').length} of ${items.length} done`;
+
     el.innerHTML = `
-      <div class="ov-foot" style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
-        <span class="fact-pill ${on ? 'fact-pill--ok' : 'fact-pill--warn'}">${on ? 'Allowed to work' : 'Stopped'}</span>
-        <span>${on ? 'The runner may claim and work allowlisted goals.' : escapeHtml(fence.paused_reason || 'The runner is doing nothing.')}</span>
-        <button type="button" id="fence-toggle" class="btn">${on ? 'Stop the runner' : 'Start the runner'}</button>
-      </div>`;
+      <div class="rn-head">
+        <span class="rn-dot rn-dot--${dot}" aria-hidden="true"></span>
+        <div class="rn-head__text">
+          <p class="rn-title">${escapeHtml(title)}</p>
+          <p class="rn-meta">${sub}</p>
+        </div>
+        <button type="button" id="fence-toggle" class="rn-switch" role="switch" aria-checked="${on}"
+          aria-label="Runner allowed to work"><span class="rn-switch__label">${on ? 'On' : 'Off'}</span><span class="rn-switch__track" aria-hidden="true"></span></button>
+      </div>
+      ${ready ? '' : checklistHtml(items)}
+      ${goalChipsHtml(fence.goals, fence.priority_goal_id)}
+      <details class="rn-details"${fenceView.detailsOpen ? ' open' : ''}>
+        <summary>Details</summary>
+        <p>Runners work only the goals above, and only while the switch is on. Each builder picks which of them their own runner takes, and you can pause any one builder's runner below. All of it lives on the server, so a runner's PC can read it but cannot change it.</p>
+        ${runners.list && runners.list.length ? `<ul>${runners.list.map(factsHtml).join('')}</ul>` : ''}
+      </details>`;
+    wireFencePanel(el, on);
+  }
+
+  function wireFencePanel(el, on) {
     document.getElementById('fence-toggle').addEventListener('click', async () => {
       // Turning it OFF asks why. Stopping an unattended machine is the kind of act
       // someone reconstructs weeks later, and "halted" answers none of their
       // questions. Turning it ON needs no reason — the allowlist already is one.
       let reason = null;
       if (on) {
-        reason = window.prompt('Why are you stopping the runner? (shown to anyone who asks why it is idle)');
+        reason = window.prompt('Why are you turning the runner off? (shown to anyone who asks why it is idle)');
         if (reason === null) return;   // cancelled — not the same as an empty reason
       }
       try {
         await sendJson('POST', '/autonomy/fence', { enabled: !on, reason: reason || undefined });
-        toast(on ? 'Runner stopped.' : 'Runner started.');
+        toast(on ? 'Runner turned off.' : 'Runner turned on.');
         await loadFence();
       } catch (err) { toast(err.message || 'Could not change the switch.'); }
     });
-  }
 
-  // The priority goal (task 1004453) is one of the allowlisted rows, marked and
-  // listed first, because that is the order the runner works them in. Its button
-  // clears it; every other row's button makes that goal the priority.
-  function renderFenceGoals(goals, priorityGoalId) {
-    const el = document.getElementById('fence-goals');
-    const pri = priorityGoalId == null ? null : Number(priorityGoalId);
-    // true - false = 1, so the priority row sorts ahead of every other; the rest keep their order.
-    const ordered = (goals || []).slice().sort((a, b) => (Number(b.goal_id) === pri) - (Number(a.goal_id) === pri));
-    const rows = ordered.map((g) => {
-      const isPri = Number(g.goal_id) === pri;
-      return `
-      <li class="ov-row" style="display:flex;align-items:center;gap:12px;">
-        <a href="/builders#/goal/${encodeURIComponent(g.goal_id)}">Goal ${escapeHtml(String(g.goal_id))}</a>
-        ${isPri ? '<span class="fact-pill fact-pill--ok">Priority</span>' : ''}
-        <span style="flex:1;">${escapeHtml(g.note || '')}</span>
-        <button type="button" class="btn" data-priority="${isPri ? '' : escapeHtml(String(g.goal_id))}">${isPri ? 'Clear priority' : 'Make priority'}</button>
-        <button type="button" class="btn" data-revoke="${escapeHtml(String(g.goal_id))}">Remove</button>
-      </li>`;
-    }).join('');
-    const priLine = pri === null
-      ? 'No priority goal: the runner works these in any order.'
-      : `The runner works goal ${escapeHtml(String(pri))} first, then the others once it has nothing left to claim there.`;
-    el.innerHTML = `
-      <h3 class="scroll__h" style="font-size:1rem;">Allowlisted goals</h3>
-      ${goals && goals.length ? `<p class="ov-foot">${priLine}</p>` : ''}
-      ${goals && goals.length ? `<ul class="ov-rows">${rows}</ul>`
-        : emptyStateHtml('No goal is allowlisted, so the runner has nothing it may work on.')}
-      <form id="fence-add" class="ov-foot" style="display:flex;gap:8px;align-items:center;margin-top:12px;">
-        <label for="fence-goal-id">Allow goal</label>
-        <input type="number" id="fence-goal-id" min="1" step="1" required placeholder="1000119">
-        <input type="text" id="fence-goal-note" maxlength="500" placeholder="why (optional)">
-        <button type="submit" class="btn">Add</button>
-      </form>`;
-
-    document.getElementById('fence-add').addEventListener('submit', async (e) => {
+    for (const btn of el.querySelectorAll('[data-rn="add-goal"]')) {
+      btn.addEventListener('click', () => {
+        fenceView.adding = true;
+        renderFencePanel();
+        const input = document.getElementById('fence-goal-id');
+        if (input) input.focus();
+      });
+    }
+    const cancel = el.querySelector('[data-rn="cancel-add"]');
+    if (cancel) cancel.addEventListener('click', () => { fenceView.adding = false; renderFencePanel(); });
+
+    const form = document.getElementById('fence-add');
+    if (form) form.addEventListener('submit', async (e) => {
       e.preventDefault();
       const goalId = Number(document.getElementById('fence-goal-id').value);
       if (!Number.isSafeInteger(goalId) || goalId <= 0) { toast('Enter a goal number.'); return; }
       try {
         await sendJson('POST', '/autonomy/fence/goals', { goal_id: goalId, note: document.getElementById('fence-goal-note').value || undefined });
-        toast(`Goal ${goalId} allowlisted.`);
+        toast(`Goal ${goalId} added.`);
+        fenceView.adding = false;
         await loadFence();
       } catch (err) { toast(err.message || 'Could not add that goal.'); }
     });
 
     for (const btn of el.querySelectorAll('[data-priority]')) {
       btn.addEventListener('click', async () => {
-        // An empty attribute is the Clear button on the current priority row.
+        // An empty attribute is the star on the current priority goal: clear it.
         const v = btn.getAttribute('data-priority');
         const goalId = v ? Number(v) : null;
         try {
           await sendJson('POST', '/autonomy/fence/priority', { goal_id: goalId });
-          toast(goalId === null ? 'Priority cleared.' : `Goal ${goalId} is now the priority.`);
+          toast(goalId === null ? 'No goal is worked first now.' : `Goal ${goalId} is worked first.`);
           await loadFence();
         } catch (err) { toast(err.message || 'Could not change the priority.'); }
       });
@@ -345,92 +501,25 @@
     }
   }
 
-  // The runner's liveness (task 1003905). Rendered ABOVE the switch on purpose:
-  // "is it running at all" is the first question, and an owner who has just
-  // flipped the switch on wants to see the machine notice.
-  //
-  // The verdict is the SERVER's — modules/autonomy/runner-health.js decides what
-  // dead means and the route attaches it — so this page and any future alert
-  // cannot drift into two definitions of the same word.
-  // This page's OWN class vocabulary (style.css `.fact-pill--{ok,warn,danger}`),
-  // the same one renderRow spends for a PR's verdict. The first cut reached for
-  // inline `--color-text-*` tokens from a different design system: they do not
-  // exist here, resolved to inherited grey, and drew a dead runner in exactly the
-  // same colour as a healthy one. Named classes cannot fail that way silently —
-  // a missing class is visible in the stylesheet, a missing var is not.
-  const HEALTH_CLASS = { alive: 'fact-pill--ok', late: 'fact-pill--warn', dead: 'fact-pill--danger', never_seen: 'fact-pill--info', restarting: 'fact-pill--info' };
-
   async function loadRunners() {
-    const el = document.getElementById('fence-runner');
-    if (!el) return;
-    let resp;
     try {
-      resp = await fetchJson('/autonomy/runners');
+      const resp = await fetchJson('/autonomy/runners');
+      fenceView.runners = { list: resp.runners || [] };
     } catch (err) {
       if (err && err.kind === '401') return;
-      el.innerHTML = emptyStateHtml('Could not read the runner\u2019s check-ins just now.');
-      return;
+      fenceView.runners = { error: true, list: [] };
     }
-    const runners = resp.runners || [];
-    if (!runners.length) {
-      // never_seen, and the server said so rather than this page guessing. Not an
-      // alarm: nobody has set the host up yet.
-      el.innerHTML = `<p class="ov-foot">${escapeHtml(resp.none ? resp.none.detail : 'No runner has ever checked in.')}</p>`;
-      return;
-    }
-    el.innerHTML = runners.map((r) => {
-      const h = r.health || {};
-      const cls = HEALTH_CLASS[h.state] || 'fact-pill--info';
-      // NOT the word "running": the switch below already uses it for a different
-      // thing (allowed to work), and the two lines sit one above the other. A
-      // reader should never have to work out which sense is meant.
-      const label = { dead: 'Not checking in', late: 'Quiet', alive: 'Checking in', restarting: 'Restarting' }[h.state] || 'Unknown';
-      // Which PC, which Claude account, which code (task 1004407). Each line is
-      // drawn only when the runner reported it, so an older runner shows less
-      // rather than a guess.
-      const facts = [];
-      if (h.host) facts.push(`<span class="ov-fact">PC <strong>${escapeHtml(h.host)}</strong></span>`);
-      if (h.account) facts.push(`<span class="ov-fact">Claude account ${escapeHtml(h.account)}</span>`);
-      if (h.code) {
-        const c = h.code;
-        const status = c.behind === true ? ` — behind main (${escapeHtml(c.mainShort)})`
-          : c.behind === false ? ' — up to date' : '';
-        const disk = c.diskShort ? `, updated in place to ${escapeHtml(c.diskShort)}` : '';
-        facts.push(`<span class="ov-fact">code <code>${escapeHtml(c.short)}</code>${disk}${status}</span>`);
-      }
-      return `<div class="ov-foot">
-        <p style="display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0;">
-          <span class="fact-pill ${cls}">${escapeHtml(label)}</span>
-          <span>${escapeHtml(h.detail || '')}</span>
-          ${r.working_goal_id ? `<span class="ov-fact">from goal ${escapeHtml(String(r.working_goal_id))}</span>` : ''}
-          <span class="ov-fact">last check-in ${escapeHtml(h.age || 'unknown')} ago</span>
-        </p>
-        ${facts.length ? `<p style="display:flex;gap:14px;flex-wrap:wrap;margin:4px 0 0;">${facts.join('')}</p>` : ''}
-      </div>`;
-    }).join('');
+    renderFencePanel();
   }
 
   async function loadFence() {
-    let fence;
     try {
-      fence = await fetchJson('/autonomy/fence');
+      fenceView.fence = await fetchJson('/autonomy/fence');
     } catch (err) {
       if (err && err.kind === '401') return;
-      // A fence the HALL cannot read is only a rendering problem — the RUNNER
-      // reads it separately and refuses on the same failure. Say so plainly rather
-      // than showing a switch whose position is a guess.
-      document.getElementById('fence-state').innerHTML = emptyStateHtml('Could not read the runner switch just now.');
-      document.getElementById('fence-goals').innerHTML = '';
-      return;
+      fenceView.fence = { error: true };
     }
-    // GET /autonomy/fence answers with the CALLER'S fence (task 1004501): the
-    // project allowlist narrowed to the viewer's own picks. This panel is the
-    // project switch, so it draws the unnarrowed `project` the route carries
-    // alongside. A server that predates the split has no `project`, and then the
-    // top level IS the project fence.
-    const project = fence.project || fence;
-    renderFenceState(project);
-    renderFenceGoals(project.goals, project.priority_goal_id);
+    renderFencePanel();
   }
 
   // ---- every builder's runner (task 1004501) --------------------------------
@@ -446,9 +535,8 @@
       : 'has picked no goals, so their runner takes no work';
     const beats = (b.runners || []).map((r) => {
       const h = r.health || {};
-      const cls = HEALTH_CLASS[h.state] || 'fact-pill--info';
-      const label = { dead: 'Not checking in', late: 'Quiet', alive: 'Checking in', restarting: 'Restarting' }[h.state] || 'Unknown';
-      return `<span class="fact-pill ${cls}">${escapeHtml(label)}</span><span class="ov-fact">${escapeHtml(h.host || r.host || '')}</span>`;
+      const label = { dead: 'not checking in', late: 'quiet', alive: 'checking in', restarting: 'restarting' }[h.state] || 'unknown';
+      return `<span class="ov-fact"><span class="rn-dot rn-dot--sm rn-dot--${HEALTH_DOT[h.state] || 'info'}" aria-hidden="true"></span> ${escapeHtml(h.host || r.host || '')} ${escapeHtml(label)}</span>`;
     }).join('');
     const paused = b.owner_paused === true;
     return `
@@ -458,7 +546,7 @@
         ${paused ? '<span class="fact-pill fact-pill--warn">Paused</span>' : ''}
         <span style="flex:1;">${goals}${paused && b.owner_paused_reason ? ` — paused: ${escapeHtml(b.owner_paused_reason)}` : ''}</span>
         ${beats || '<span class="ov-fact">no runner has checked in</span>'}
-        <button type="button" class="btn" data-pause="${escapeHtml(String(b.builder_id))}" data-paused="${paused ? '1' : '0'}">${paused ? 'Resume' : 'Pause'}</button>
+        <button type="button" class="btn btn--ghost btn--sm" data-pause="${escapeHtml(String(b.builder_id))}" data-paused="${paused ? '1' : '0'}">${paused ? 'Resume' : 'Pause'}</button>
       </li>`;
   }
 
@@ -475,7 +563,7 @@
     }
     const builders = resp.builders || [];
     el.innerHTML = `
-      <h3 class="scroll__h" style="font-size:1rem;margin-top:24px;">Each builder's runner</h3>
+      <h3 class="rn-sub">Each builder's runner</h3>
       ${builders.length ? `<ul class="ov-rows">${builders.map(builderRowHtml).join('')}</ul>`
         : emptyStateHtml('No builder has picked goals or run a runner yet.')}`;
     for (const btn of el.querySelectorAll('[data-pause]')) {