@lovek4d/kickflip 0.7.7 → 0.8.0

package/board/public/app.html

@@ -42,6 +42,7 @@ window.BoardBoot = (function () {
 <body class="has-sidebar">
 <aside id="sidebar" class="sidebar" aria-label="Boards">{{sidebar}}</aside>
 <div id="sidebarScrim" class="sidebar-scrim"></div>
+<div class="col-handle" data-col="sidebar" role="separator" aria-orientation="vertical" aria-label="Resize the boards sidebar" tabindex="0"></div>
 <script id="sidebarData" type="application/json">{{sidebarData}}</script>
 <script src="/_hub/app/ui.js"></script>
 <script src="/_hub/app/ui-links.js"></script>
@@ -67,6 +68,7 @@ window.BoardBoot = (function () {
 <script src="/_hub/app/attach.js"></script>
 <script src="/_hub/app/hub-kit.js"></script>
 <script src="/_hub/app/linear-key.js"></script>
+<script src="/_hub/app/col-resize.js"></script>
 <script src="/_hub/app/sidebar.js"></script>
 <script src="/_hub/app/app.js"></script>
 <script src="/_hub/app/new-task.js"></script>

package/board/public/app.js

@@ -464,6 +464,7 @@ ${strip}  <section id="setup" class="setup" aria-live="polite" hidden></section>
   <div id="downLanding" hidden></div>
   ${BoardUI.boardFoot()}
 </main>
+<div class="col-handle" data-col="pane" role="separator" aria-orientation="vertical" aria-label="Resize the Waiting on you pane" tabindex="0"></div>
 <aside id="needsPane" class="needs-pane" aria-label="Needs you"><section id="waiting" class="waiting" hidden></section></aside>
 </div>
 ${BoardNewTask.markup()}

package/board/public/col-resize.js

@@ -0,0 +1,73 @@
+// Drag-resizing of the desktop columns (docs/adr/2026-11-10-1600-the-desktop-columns-drag-and-this-device-keeps-their-widths.md).
+// A `.col-handle[data-col="sidebar"|"pane"]` drags its column's edge: the sidebar rail's, or the seam between the lanes
+// and the Waiting on you pane. Widths are clamped (sidebar 220–420px, the lanes and the pane each 360px or more), kept
+// per device for every board, and set on <html> as --sb-w and --pane-w, which style.css and sidebar.css read. A double-click
+// on a handle forgets the width; ←/→ on a focused handle moves it 16px. Loaded after the body's first elements so the
+// stored widths land before the first paint of the board.
+(function () {
+  const KEYS = { sidebar: 'hub:sidebarWidth', pane: 'hub:paneWidth' };
+  const VARS = { sidebar: '--sb-w', pane: '--pane-w' };
+  const SIDEBAR_MIN = 220, SIDEBAR_MAX = 420, LANE_MIN = 360, STEP = 16, DEFAULT_SIDEBAR = 272;
+  const html = document.documentElement;
+  const wide = () => window.matchMedia('(min-width: 900px)').matches;
+  const read = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
+  const write = (k, v) => { try { localStorage.setItem(k, v); } catch { /* private mode or full: kept for this page only */ } };
+  const forget = (k) => { try { localStorage.removeItem(k); } catch { /* nothing kept */ } };
+  const stored = (col) => { const n = Number(read(KEYS[col])); return Number.isFinite(n) && n > 0 ? n : null; };
+  // The sidebar's width now, which the pane's room depends on.
+  const sidebarNow = (viewport) => (html.classList.contains('sb-collapsed') ? 0 : clamp('sidebar', stored('sidebar') ?? DEFAULT_SIDEBAR, viewport, 0));
+
+  // → px clamped for the column: the pane's ceiling leaves the lanes their minimum beside the sidebar, and its floor
+  // wins where the window is too narrow for both.
+  function clamp(col, px, viewport, sidebarW) {
+    if (col === 'sidebar') return Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, px));
+    return Math.max(LANE_MIN, Math.min(px, viewport - sidebarW - LANE_MIN));
+  }
+  function paint(col) {
+    const px = stored(col);
+    if (px === null) { html.style.removeProperty(VARS[col]); return; }
+    html.style.setProperty(VARS[col], `${col === 'pane' ? clamp('pane', px, window.innerWidth, sidebarNow(window.innerWidth)) : clamp('sidebar', px)}px`);
+  }
+  function paintAll() { paint('sidebar'); paint('pane'); }
+  function set(col, px) { write(KEYS[col], String(Math.round(px))); paintAll(); }
+  function reset(col) { forget(KEYS[col]); paintAll(); }
+  paintAll();
+  window.addEventListener('resize', paintAll);
+
+  // The width a handle's drag edge is at now, and the width the pointer at x asks for.
+  const current = (col, el) => {
+    const edge = el.getBoundingClientRect();
+    return col === 'sidebar' ? edge.left + edge.width / 2 : window.innerWidth - (edge.left + edge.width / 2);
+  };
+  const wanted = (col, x) => (col === 'sidebar' ? x : window.innerWidth - x);
+
+  document.addEventListener('pointerdown', (e) => {
+    const el = e.target.closest?.('.col-handle');
+    if (!el || !wide() || e.button > 0) return;
+    const col = el.dataset.col;
+    e.preventDefault();
+    el.setPointerCapture?.(e.pointerId);
+    el.classList.add('dragging');
+    html.classList.add('col-dragging');
+    const move = (m) => set(col, wanted(col, m.clientX));
+    const end = () => { el.classList.remove('dragging'); html.classList.remove('col-dragging'); el.removeEventListener('pointermove', move); el.removeEventListener('pointerup', end); el.removeEventListener('pointercancel', end); };
+    el.addEventListener('pointermove', move);
+    el.addEventListener('pointerup', end);
+    el.addEventListener('pointercancel', end);
+  });
+  document.addEventListener('dblclick', (e) => {
+    const el = e.target.closest?.('.col-handle');
+    if (el && wide()) reset(el.dataset.col);
+  });
+  document.addEventListener('keydown', (e) => {
+    const el = e.target.closest?.('.col-handle');
+    if (!el || !wide() || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;
+    const col = el.dataset.col;
+    e.preventDefault();
+    // → grows the sidebar and shrinks the pane, as the edge moves right.
+    const dx = (e.key === 'ArrowRight' ? STEP : -STEP) * (col === 'sidebar' ? 1 : -1);
+    set(col, (stored(col) ?? current(col, el)) + dx);
+  });
+
+  window.ColResize = { clamp, set, reset };
+})();

package/board/public/hub.css

@@ -78,6 +78,7 @@
 .hub-view .dur-on .title { font-weight:600; white-space:normal; }
 .hub-view code { font-family:var(--mono); font-size:.85em; white-space:nowrap; }
 .hub-view footer { color:var(--muted); font-size:12px; margin:1.8rem 2px 0; }
+.hub-view .version { font:inherit; color:inherit; background:none; border:0; padding:0; text-decoration:underline dotted; cursor:pointer; }
 .hub-view .host { font-family:var(--mono); font-size:11px; overflow-wrap:anywhere; }
 .hub-view .st.ok { color:var(--color-success); }
 .hub-view .links { display:block; margin-top:2px; }

package/board/public/prototype.html

@@ -84,6 +84,7 @@
 <script src="attach.js"></script>
 <script src="hub-kit.js"></script>
 <script src="linear-key.js"></script>
+<script src="col-resize.js"></script>
 <script src="sidebar.js"></script>
 <script src="app.js"></script>
 <script src="new-task.js"></script>

package/board/public/sidebar.css

@@ -188,12 +188,14 @@ html.sb-hub-down body.has-sidebar > .top .hub::after, html.sb-hub-down body.has-
 .sidebar .t-paused { --tone: var(--muted); }
 
 @media (min-width: 900px) {
-  body.has-sidebar { padding-left: 272px; }
-  body.has-sidebar .sidebar { width: 272px; transform: none; visibility: visible; transition: none; z-index: 4; }
+  body.has-sidebar { padding-left: var(--sidebar-w, 272px); }
+  body.has-sidebar .sidebar { width: var(--sb-w, 272px); transform: none; visibility: visible; transition: none; z-index: 4; }
   body.has-sidebar .sidebar .sb-close { display: none; }
   body.has-sidebar .sidebar-scrim { display: none; }
   html:not(.sb-collapsed) body.has-sidebar > .top .hub, html:not(.sb-collapsed) body.has-sidebar > :not(.sidebar) > .top .hub { display: none; }
   html.sb-collapsed body.has-sidebar { padding-left: 0; }
+  body.has-sidebar > .col-handle { position: fixed; left: calc(var(--sidebar-w, 272px) - 4px); }
+  html.sb-collapsed body.has-sidebar > .col-handle { display: none; }
   html.sb-collapsed body.has-sidebar .sidebar { transform: translateX(-102%); visibility: hidden; }
   /* Switch mode shows a collapsed rail over the page until it ends, and leaves it collapsed. */
   html.sb-collapsed body.has-sidebar .sidebar.ks-on { transform: none; visibility: visible; z-index: 20; }
@@ -244,3 +246,7 @@ html.sb-hub-down body.has-sidebar > .top .hub::after, html.sb-hub-down body.has-
   font: 600 12.5px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
 .shortcuts-sheet .sc-foot { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
 @media (prefers-reduced-motion: reduce) { .sheet.shortcuts-sheet[open] { animation: none; } }
+/* A held row (hub/home.mjs holdNeeds): its last good line, flat gray with (stale) after the word. */
+.sidebar .held .dot, .sidebar .held .word, .sidebar .held .lc { --tone: var(--muted); }
+.sidebar .held .dot.pulse { animation: none; }
+.sidebar .held .stale-word { flex: none; color: var(--muted); font-size: 11px; }

package/board/public/style.css

@@ -240,7 +240,7 @@ code { overflow-wrap: anywhere; }
 /* Compose button and sheet */
 main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
 /* The + sits two thirds of (16px + the safe area) from the corner, and at least 32px where there is no safe area. */
-:root { --fab-edge: max(32px, calc((16px + env(safe-area-inset-bottom)) * 2 / 3)); }
+:root { --sel-bg: var(--accent-soft); --sel-line: var(--accent); --fab-edge: max(32px, calc((16px + env(safe-area-inset-bottom)) * 2 / 3)); }
 .fab { position: fixed; z-index: 6; right: max(32px, calc((16px + max(env(safe-area-inset-right), env(safe-area-inset-bottom))) * 2 / 3)); bottom: calc(var(--app-bottom, 0px) + var(--fab-edge));
   width: 75px; height: 75px; padding: 0; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent);
   display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
@@ -289,13 +289,15 @@ main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
 @keyframes sheet-in { from { transform: translateY(100%); } }
 @keyframes sheet-out { to { transform: translateY(100%); } }
 @keyframes fade-in { from { opacity: 0; } }
+@keyframes reader-in { from { transform: translateX(100%); } }
+@keyframes reader-out { to { transform: translateX(100%); } }
 @media (min-width: 700px) {
   .sheet { bottom: calc(var(--kb, 0px) + 24px); max-height: calc(var(--vh, 100dvh) - env(safe-area-inset-top) - 12px); padding-bottom: 0;
     border-bottom: 1px solid var(--line); border-radius: 16px; }
   .sheet form { padding-bottom: 14px; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .sheet[open], .sheet[open]::backdrop, .sheet.closing, .sheet.closing::backdrop { animation: none; }
+  .sheet[open], .sheet.reader-sheet[open], .sheet[open]::backdrop, .sheet.closing, .sheet.reader-sheet.closing, .sheet.closing::backdrop { animation: none; }
   .fab:active { transform: none; }
 }
 /* The hub lives at the tailnet root, outside this site, so its link is root-absolute. */
@@ -417,6 +419,11 @@ div.status-line { padding-left: 33px; text-indent: -23px; }
 /* Only a run's finished line is green: the fold's summary mirrors its last line, green once the run has finished, else the
    started and status lines' orange or a planner's blue (docs/adr/2026-11-07-1600-only-a-runs-finished-line-is-green.md). */
 .msg.calls.status-fold summary.finished { color: var(--color-success); }
+.msg.fault-detail summary { cursor: pointer; list-style: none; overflow-wrap: anywhere; }
+.msg.fault-detail summary::-webkit-details-marker { display: none; }
+.msg.fault-detail[open] summary .mark-icon { transform: rotate(90deg); }
+/* The whole error of a fault line, monospace, wrapping at any width. */
+.fault-error { margin: 4px 0 4px 23px; padding: 8px; font: 12px/1.4 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-soft, rgba(127,127,127,.12)); border-radius: 6px; color: var(--fg, inherit); }
 .msg.calls ol { margin: 4px 0; padding-left: 23px; }
 .agent-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
 /* Every thread status line's leading mark, icon or dot, sits centred in one 18px box, so the text after it always starts
@@ -636,7 +643,7 @@ main > * { transition: opacity .25s ease; }
 .view-questions .ctx { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
 .view-questions .opt { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 8px; border: 1px solid var(--line);
   border-radius: 8px; margin: 6px 0; cursor: pointer; }
-.view-questions .opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
+.view-questions .opt:has(input:checked) { border-color: var(--sel-line); background: var(--sel-bg); }
 .view-questions .opt input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--accent); }
 .view-questions .opt .lbl { font-weight: 600; }
 .view-questions .opt .rec { color: var(--accent); font-weight: 500; font-size: 12px; margin-left: 4px; }
@@ -664,9 +671,9 @@ main > * { transition: opacity .25s ease; }
 .view-questions .topics button { min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px;
   background: var(--panel); color: var(--text); display: inline-flex; max-width: 100%; text-align: left; }
 .view-questions .topics .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.view-questions .topics button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
+.view-questions .topics button[aria-pressed="true"] { border-color: var(--sel-line); background: var(--sel-bg); }
 .view-questions .topics button.progress { border-color: var(--line); background: color-mix(in srgb, var(--color-notice) 12%, var(--panel)); }
-.view-questions .topics button.progress[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--color-notice) 12%, var(--accent-soft)); }
+.view-questions .topics button.progress[aria-pressed="true"] { border-color: var(--sel-line); background: var(--sel-bg); }
 @keyframes pill-arrive { from { opacity: 0; transform: translateX(-12px); box-shadow: 0 0 0 3px var(--accent); } to { opacity: 1; transform: none; box-shadow: 0 0 0 0 transparent; } }
 @media (prefers-reduced-motion: no-preference) { .view-questions .topics button.arrived { animation: pill-arrive .6s ease-out; } }
 .view-questions .topics .n { color: var(--muted); margin-left: 4px; }
@@ -934,6 +941,7 @@ button[aria-busy="true"]:is([data-card-bump]) svg { fill: currentColor; }
 /* Needs you (app-needs.js): a deck at the top of the board on a phone; from 900px a pane beside the lanes, its lines over
    Waiting on you (docs/adr/2026-11-05-0408-needs-you-is-a-deck-on-a-phone-and-a-pane-on-a-desktop.md). */
 .needs-pane { display: none; }
+.col-handle { display: none; }
 .needs-deck { margin: 0 0 12px; border: 1px solid color-mix(in srgb, var(--color-notice) 45%, var(--line)); border-radius: 14px;
   background: color-mix(in srgb, var(--color-notice) 7%, var(--panel)); overflow: hidden; }
 .deck-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px 4px; }
@@ -948,7 +956,7 @@ button[aria-busy="true"]:is([data-card-bump]) svg { fill: currentColor; }
 .deck-opts { display: flex; flex-direction: column; gap: 6px; }
 .deck-opts button { text-align: left; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
 .deck-opts button.rec { border-color: var(--accent); }
-.deck-opts button.armed { background: var(--color-notice); border-color: var(--color-notice); color: #000; font-weight: 600; }
+.deck-opts button.armed { border-color: var(--sel-line); background: var(--sel-bg); font-weight: 600; }
 .deck-opts .rec-word { color: var(--accent); font-weight: 500; font-size: 12px; margin-left: 4px; }
 .deck-opts .det { color: var(--muted); font-size: 12.5px; font-weight: 400; }
 .deck-prompt { margin: 0; padding: 0; list-style: none; }
@@ -964,16 +972,30 @@ button[aria-busy="true"]:is([data-card-bump]) svg { fill: currentColor; }
 .deck-more::after { content: '›'; color: var(--accent); font-size: 18px; }
 .deck-more:hover { text-decoration: none; }
 @media (min-width: 900px) {
-  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
+  .split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--pane-w, minmax(0, 1fr)); align-items: start; }
   .split > main { max-width: none; margin: 0; }
   .needs-deck { display: none; }
   /* Waiting on you is the board's pane here, so neither page shows the switch to the other. */
   .top .pages-switch { display: none; }
   .top .nav a.pages-switch { display: none; }
   /* The board's + sits at the bottom right of the left pane: the pane ends at the middle of the space right of the sidebar. */
-  .view-board .fab { right: calc(50% - var(--sidebar-w, 0px) / 2 + var(--fab-edge)); }
-  body.has-sidebar { --sidebar-w: 272px; }
+  .view-board .fab { right: calc(var(--pane-w, calc(50% - var(--sidebar-w, 0px) / 2)) + var(--fab-edge)); }
+  body.has-sidebar { --sidebar-w: var(--sb-w, 272px); }
   html.sb-collapsed body.has-sidebar { --sidebar-w: 0px; }
+  /* The drag edges (col-resize.js): a hairline that thickens on hover, on the pane's left edge and the sidebar's right. */
+  .col-handle { display: block; position: absolute; z-index: 5; top: 0; bottom: 0; width: 9px; cursor: col-resize; touch-action: none; }
+  .col-handle::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: transparent; transition: background .12s, width .12s, left .12s; }
+  .col-handle:is(:hover, :focus-visible, .dragging)::after { left: 3px; width: 3px; background: var(--accent); }
+  .col-handle:focus-visible { outline: none; }
+  html.col-dragging, html.col-dragging * { cursor: col-resize !important; user-select: none; }
+  .split > .col-handle { right: calc(var(--pane-w, 50%) - 4px); }
+  .split:has(.needs-pane.widened) > .col-handle { display: none; }
+  /* The reader sheet (app-reader.js) is a panel over the pane's half, at the width the seam gives it, while it is open. */
+  .sheet.reader-sheet { inset: 56px 0 0 auto; margin: 0; width: var(--pane-w, calc((100vw - var(--sidebar-w, 0px)) / 2)); max-width: none;
+    height: auto; max-height: none; border-width: 0 0 0 1px; border-radius: 0; box-shadow: none; }
+  .sheet.reader-sheet[open] { animation: reader-in .22s ease-out; }
+  .sheet.reader-sheet.closing { animation: reader-out .18s ease-in forwards; }
+  .reader-sheet::backdrop { background: transparent; }
   .needs-pane { display: block; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 12px 16px 0; border-left: 1px solid var(--line); }
   .needs-pane .needs-questions main { padding: 0; max-width: none; }
   .needs-pane:has(.q-empty), .needs-pane .needs-questions:has(.q-empty), .needs-pane .needs-questions:has(.q-empty) main, .needs-pane #page:has(.q-empty) { display: flex; flex-direction: column; }
@@ -1003,5 +1025,5 @@ button[aria-busy="true"]:is([data-card-bump]) svg { fill: currentColor; }
   .pane-viewer .ps-sheet button span + span { color: var(--muted); }
 }
 /* The Send bar is the last thing on its page: only the phone nav under it is left clear, so its background runs to the edge. */
-body .view-questions main { padding-bottom: var(--app-bottom, 0px); }
+body .view-questions.view-questions main { padding-bottom: var(--app-bottom, 0px); }
 .pfile.retry { cursor: pointer; }

package/board/public/ui-cards.js

@@ -333,9 +333,9 @@
   const ownerDoneButton = (it) => `<button type="button" class="ghost icon owner-done" data-confirm="finish" data-key="${esc(it.key)}" aria-label="Done" title="${esc(`Done: ${it.ownerStep}`)}">${CHECK}</button>`;
   const cardActions = (it) => (it.isNew ? askActions(it) : it.ownerStep ? `<div class="ask-actions">${ownerDoneButton(it)}</div>`
     : it.bumpable ? `<div class="ask-actions">${cardBumpButton(it.key, Boolean(it.bumpedAt))}</div>` : '');
-  // docs/adr/2026-11-07-0115-the-orchestrator-sorts-new-tasks-itself.md: a New card reads a grey "waiting", its dot
-  // still, until the orchestrator picks it up (the watcher's working mark), then "thinking".
-  const PICKUP_WAIT = '<span class="pickup-wait"><span class="working-dot" aria-hidden="true"></span>waiting</span>';
+  // docs/adr/2026-11-07-0115-the-orchestrator-sorts-new-tasks-itself.md: a New card reads a grey "waiting…", its dot
+  // still, until the orchestrator picks it up (the watcher's or the PostToolUse hook's working mark), then "thinking…".
+  const PICKUP_WAIT = '<span class="pickup-wait"><span class="working-dot" aria-hidden="true"></span>waiting…</span>';
   const askLine = (ask) => [ask.from && `Moved from ${esc(ask.from)}`, ask.edited && 'Edited', ask.state === 'working' ? thinkingLine() : ask.state === 'waiting' && PICKUP_WAIT].filter(Boolean).join(' · ');
   function workLines(it, { unread = 0 } = {}) {
     const ticket = it.ticket ? ticketChip(it) : it.internal ? badge('quiet', esc(it.ref), { title: 'Work on this site, not a product PR' }) : it.linear?.length ? linearChips(it) : taskChip(it);

package/board/public/ui-sidebar.js

@@ -44,7 +44,15 @@
     if (w.state === 'reset') return `Reset ${esc(usageClock(w.resets_at))}`;
     return `<span class="u-num">${Math.round(w.used_percentage)}%</span> · resets ${esc(usageClock(w.resets_at))}`;
   }
-  function sidebarUsage(data) {
+  // Claude's week shows as a second bar once it is live within the near band under the pause line, which starts twice the
+  // buffer below 100 (shared/usage-gate.mjs nearFrom): orange under the line, red at it. Off (100) has no band.
+  function weekBar(reading, pauseAt) {
+    const w = reading.seven_day;
+    if (!(pauseAt < 100) || w?.state !== 'live' || !(w.used_percentage >= 2 * pauseAt - 100)) return '';
+    const tone = w.used_percentage >= pauseAt ? 'full' : 'high';
+    return `<span class="u-one u-tone-${tone}"><span class="u-line"><span class="u-name">Claude week</span> ${usageWords(reading, 'seven_day')}</span>${usageBar(w)}</span>`;
+  }
+  function sidebarUsage(data, pauseAt) {
     const products = usageProducts(data);
     return products.length ? `<span class="sb-usage">${products.map((p) => {
       const r = data[p];
@@ -54,7 +62,7 @@
         : w.state === 'stale' ? `${name} · last seen ${esc(usageClock(r.at))}`
           : w.state === 'reset' ? `${name} · reset ${esc(usageClock(w.resets_at))}`
             : `${name} ${usageWords(r, 'five_hour')}`;
-      return `<span class="u-one u-tone-${usageTone(w)}"><span class="u-line">${words}</span>${usageBar(w)}</span>`;
+      return `<span class="u-one u-tone-${usageTone(w)}"><span class="u-line">${words}</span>${usageBar(w)}</span>${p === 'claude' ? weekBar(r, pauseAt) : ''}`;
     }).join('')}</span>` : '';
   }
   // The utility rows, in the order they show.
@@ -227,7 +235,7 @@
     const turnOn = device === 'off' ? row({ href: '/_hub/#notifications', icon: tile('bell', 'var(--accent)'), title: 'Turn on notifications', sub: 'Off on this device', cls: 'sb-turnon' })
       : device === 'install' ? row({ href: '/_hub/#notifications', icon: tile('bell', 'var(--accent)'), title: 'Add Claude to your Home Screen', sub: 'Notifications come only to the Home Screen app', cls: 'sb-turnon' })
       : '';
-    const usage = sidebarUsage(data?.usage);
+    const usage = sidebarUsage(data?.usage, data?.pause?.pause_at);
     const hub = data?.hub?.tone === 'down' || data?.hub?.tone === 'wait' ? data.hub : paused ? { tone: 'paused', word: 'paused', detail: pauseUntilWords(data.pause.resets_at) } : busy ? { tone: 'wait', word: 'busy', detail: 'the host is busy' } : data?.hub;
     const n = data?.notifications || {};
     const lower = (text) => String(text || '').replace(/^\w/, (c) => c.toLowerCase());

package/board/public/ui-threads.js

@@ -20,7 +20,7 @@
   const stateOf = (m) => m.state || (m.reply ? 'replied' : 'waiting');
   // A message's footer: the tap it came from (m.status, such as "answers submitted"), then, to its right, Claude's
   // pick-up while it waits (docs/adr/2026-11-04-2130-a-button-tap-is-a-status-line-or-a-message-footer.md).
-  const PICK_UP = { working: thinkingLine, waiting: () => 'Waiting for Claude…' };
+  const PICK_UP = { working: thinkingLine, waiting: () => 'waiting…' };
   const msgFooter = (m) => {
     const parts = [m.status && `<span class="foot-status">${statusMark(m.status)}${esc(m.status)}</span>`, PICK_UP[stateOf(m)]?.()].filter(Boolean);
     return parts.length ? `<div class="reply muted small">${parts.join('')}</div>` : '';
@@ -49,6 +49,7 @@
     : m.request ? `<div class="msg status-line request${m.command === 'readied' ? ' readied' : ''}">${statusMark(m.mark || m.text)}${escText(m.text)} <span class="muted">· ${m.by ? `${esc(m.by)} · ` : ''}${esc(time(m.ts))}</span></div>`
     // docs/adr/2026-11-09-1200-the-board-writes-status-lines-and-only-the-orchestrator-writes-messages.md: the board's
     // own line, its kind's mark and words, red for a fault.
+    : m.kind === 'hub' && m.detail ? `<details class="msg status-line request hub fault-detail${m.fault ? ' fault' : ''}"><summary>${statusMark(m.mark)}${escText(m.text)} <span class="muted">· ${esc(time(m.ts))}</span></summary><pre class="fault-error">${esc(m.detail)}</pre></details>`
     : m.kind === 'hub' ? `<div class="msg status-line request hub${m.fault ? ' fault' : ''}">${statusMark(m.mark)}${m.link ? `<a href="${esc(m.link)}">${escText(m.text)}</a>` : escText(m.text)} <span class="muted">· ${esc(time(m.ts))}</span></div>`
     // docs/adr/2026-11-07-1400-a-card-stores-its-lane-and-facts-replace-statuses.md: a card's move between lanes.
     : m.kind === 'move' ? `<div class="msg status-line request move">${statusMark('move')}${escText(m.text)} <span class="muted">· ${esc(time(m.ts))}</span></div>`

package/board/public/ui.js

@@ -136,7 +136,7 @@
   const cardBumpButton = (key, bumped) => (bumped
     ? `<button class="ghost icon bumped" data-card-bump="${esc(key)}" data-bumped aria-pressed="true" aria-label="Unbump" title="Bumped. Tap to unbump">${BUMP}</button>`
     : `<button class="ghost icon" data-card-bump="${esc(key)}" aria-pressed="false" aria-label="Bump to top" title="Bump to top">${BUMP}</button>`);
-  const workingLine = '<span class="thinking"><span class="working-dot" aria-hidden="true"></span>thinking</span>';
+  const workingLine = '<span class="thinking"><span class="working-dot" aria-hidden="true"></span>thinking…</span>';
   // Every paused status, whatever its place, is this one class (style.css .paused); BoardUI.usagePause is set by the
   // board view (app.js) to read the hub's usage pause.
   const PAUSED = '<span class="paused">paused</span>';

package/board/public/view-hub.js

@@ -91,7 +91,15 @@ ${d.empty ? row({ title: 'No sites yet', sub: 'In a Claude session, run <code>/k
 ${integrationsHtml(d.integrations)}${sitesHtml(d.groups, restarting)}${d.remembered?.length ? `<h2 class="label">Sessions without a board</h2><div class="group">${rememberedHtml(d.remembered)}</div>` : ''}<p class="note">The hub runs every site and restarts one that stops. A board's links are what the hub owes it: GitHub polling, the fetch of its repo, events (its session and a watcher run, or the hub can wake it), daily wakes and reviewer links. One that just broke reads settling first.</p>`;
   }
 
-  const footer = (d) => `<footer>${esc(d.sites)}. Each belongs to one Claude session, which adds it with <code>/kickflip &lt;route&gt;</code>. This page refreshes every 30 seconds.<br><span class="host">${esc(d.host)}</span><br><span class="brand"><a href="https://kickflip.sh">kickflip.sh</a> / v${esc(d.version)}</span></footer>`;
+  // The version is a button: a tap checks npm now (POST /_hub/check-update) and the answer shows beside it (updateNote).
+  const footer = (d, note = '') => `<footer>${esc(d.sites)}. Each belongs to one Claude session, which adds it with <code>/kickflip &lt;route&gt;</code>. This page refreshes every 30 seconds.<br><span class="host">${esc(d.host)}</span><br><span class="brand"><a href="https://kickflip.sh">kickflip.sh</a> / <button type="button" class="version" data-check-update>v${esc(d.version)}</button>${note ? ` <span class="update-note" role="status">${esc(note)}</span>` : ''}</span></footer>`;
+  // What the hub's answer to a version tap says (hub/upgrade.mjs check()).
+  const updateNote = (out) => ({
+    clone: `${out.commit} · pulls with main`,
+    same: 'up to date',
+    pulling: `pulling ${out.latest}…`,
+    failed: `check failed: ${out.error}`,
+  })[out.state];
 
   // iOS shows an app badge only in a Home Screen app with notifications allowed; elsewhere this does nothing.
   function badge(n) {
@@ -166,6 +174,20 @@ ${integrationsHtml(d.integrations)}${sitesHtml(d.groups, restarting)}${d.remembe
         flash = { text: `The hub hasn’t come back. On the host, run ${out.command}`, error: true };
         if (B.alive()) paint();
       }
+      // A tap on the version asks the hub to check npm now and shows the answer beside it until the next paint of new data.
+      let updateText = '';
+      async function checkUpdate() {
+        if (updateText === 'checking…') return;
+        updateText = 'checking…';
+        paint();
+        try {
+          const r = await fetch('/_hub/check-update', { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/json' }, body: '{}' });
+          const out = await r.json();
+          if (!r.ok) throw new Error();
+          updateText = updateNote(out);
+        } catch { updateText = 'could not check. Is the host awake?'; }
+        if (B.alive()) paint();
+      }
       async function forgetDevice(id) {
         const out = await fetch('/_hub/push/forget', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id }) }).then((r) => r.ok, () => false);
         if (!out) { flash = { text: 'Could not remove that device. Is the host awake?', error: true }; paint(); return; }
@@ -181,12 +203,13 @@ ${integrationsHtml(d.integrations)}${sitesHtml(d.groups, restarting)}${d.remembe
         if (restarter) restart(restarter.dataset.restart, restarter.dataset.title);
       });
       const foot = B.$('.hub-foot');
+      B.on(foot, 'click', (e) => { if (e.target.closest?.('[data-check-update]')) checkUpdate(); });
       // A #keep-awake link scrolls to Health's Keep awake row once it is drawn.
       let scrollToAwake = ctx.view?.hash === '#keep-awake';
       const paint = () => {
         if (!last) return;
         main.innerHTML = html(last, { flash, prompts, restarting, restartingHub });
-        foot.innerHTML = footer(last);
+        foot.innerHTML = footer(last, updateText);
         if (scrollToAwake) { scrollToAwake = false; B.$('#keep-awake')?.scrollIntoView(); }
       };
       const prompts = PromptAnswers.wire(B, {

package/board/render-check.mjs

@@ -1,10 +1,10 @@
-var _=Object.defineProperty;var l=(t,e)=>_(t,"name",{value:e,configurable:!0});import g from"node:fs";import $ from"node:fs/promises";import B from"node:http";import E from"node:os";import m from"node:path";import{spawn as P}from"node:child_process";import{setTimeout as k}from"node:timers/promises";import{fileURLToPath as D}from"node:url";import{createInterface as R}from"node:readline";import{BoardError as w,readPrototypes as F}from"./store.mjs";import{prototypePage as G}from"./prototype-page.mjs";import{BASE_KEY as U,baseWorktreeOf as K}from"./prototype-base.mjs";import{buildScriptError as W,buildScriptOf as O}from"./build-script.mjs";import{boardAt as q}from"../hub/boards.mjs";const S=m.dirname(D(import.meta.url)),C=[390,1280],j=process.env.CHROME||"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",M={".js":"text/javascript",".css":"text/css",".html":"text/html",".json":"application/json",".png":"image/png",".svg":"image/svg+xml"},N=3e3,J=300,Y=12e4,I="(document.getElementById('stage')?.innerHTML || '').trim()",V="(document.body?.innerText || '').trim()";function z(t,e){const o=[m.join(t,"public"),m.join(S,"public"),m.join(S,"..","starter","public"),m.join(S,"..","shared")];return B.createServer(async(u,s)=>{const r=decodeURIComponent(new URL(u.url,"http://x").pathname);if(r===`/prototype-${e.topic}.html`){s.writeHead(200,{"content-type":M[".html"]}).end(await G(t,e));return}for(const d of o){const a=m.resolve(d,`.${r}`);if(a.startsWith(d+m.sep)&&g.existsSync(a)&&g.statSync(a).isFile()){s.writeHead(200,{"content-type":M[m.extname(a)]||"application/octet-stream"}).end(await $.readFile(a));return}}s.writeHead(r==="/favicon.ico"?204:404).end()})}l(z,"serve");async function L(t){if(!g.existsSync(j))throw new w(`the render check needs Chrome; none at ${j}, set CHROME to its path`);const e=P(j,["--headless=new","--remote-debugging-port=0",`--user-data-dir=${t}`,"--no-first-run","about:blank"],{stdio:"ignore",env:{...process.env,HOME:E.userInfo().homedir}}),o=m.join(t,"DevToolsActivePort");for(let i=0;i<100&&!g.existsSync(o);i++)await k(100);if(!g.existsSync(o))throw e.kill(),new w("the render check could not start Chrome");const u=g.readFileSync(o,"utf8").split(`
-`)[0];let s;for(let i=0;i<100&&!s;i++)s=(await fetch(`http://127.0.0.1:${u}/json`).then(c=>c.json(),()=>[])).find(c=>c.type==="page"),s||await k(100);if(!s)throw e.kill(),new w("the render check could not start Chrome");const r=new WebSocket(s.webSocketDebuggerUrl);try{await new Promise((i,c)=>{r.onopen=i,r.onerror=c})}catch{throw e.kill(),new w("the render check could not start Chrome")}let d=0;const a=new Map,p=[];return r.onmessage=({data:i})=>{const c=JSON.parse(i);c.id?a.get(c.id)?.(c):p.forEach(h=>h(c))},{cdp:l((i,c={})=>new Promise((h,b)=>{const y=++d;a.set(y,v=>v.error?b(new Error(v.error.message)):h(v.result)),r.send(JSON.stringify({id:y,method:i,params:c}))}),"cdp"),on:l(i=>(p.push(i),()=>p.splice(p.indexOf(i),1)),"on"),close:l(async()=>{r.close();const i=new Promise(c=>e.once("exit",c));e.kill(),await i},"close")}}l(L,"launchOnce");async function Q(t){try{return await L(t)}catch(e){if(!(e instanceof w)||!/could not start Chrome/.test(e.message))throw e;return await $.rm(t,{recursive:!0,force:!0}),await $.mkdir(t),L(t)}}l(Q,"launch");const X=l(t=>t.exception?.description?.split(`
-`)[0]||t.text,"described");async function A({cdp:t,on:e},o,u,s=I){const r=[],d=e(n=>{n.method==="Runtime.exceptionThrown"?r.push(X(n.params.exceptionDetails)):n.method==="Runtime.consoleAPICalled"&&n.params.type==="error"?r.push(`console error: ${n.params.args.map(f=>f.value??f.description).join(" ").split(`
-`)[0]}`):n.method==="Log.entryAdded"&&n.params.entry.level==="error"&&n.params.entry.source!=="javascript"&&!/\/favicon\.ico$/.test(n.params.entry.url||"")&&r.push(`${n.params.entry.text}${n.params.entry.url?` ${n.params.entry.url}`:""}`)});await t("Emulation.setDeviceMetricsOverride",{width:u,height:900,deviceScaleFactor:1,mobile:u<600}),await t("Page.navigate",{url:o});const a=l(async()=>(await t("Runtime.evaluate",{expression:s,returnByValue:!0})).result.value,"stage");let p="";for(let n=0;n<N&&!p;n+=100)await k(100),p=await a();return await k(J),d(),p||r.push(s===I?"renders an empty stage":"renders an empty page"),[...new Set(r)]}l(A,"checkTake");async function Z(t){const e=q(t);if(!e)throw new w(`${t} is not a board in the hub's manifest, so it has no base prototype worktree to check`);const o=K(e.route),u=m.join(o,O(e.build_target)),s=W(u);if(s)throw new w(`the base prototype worktree can't serve the round: ${s} (${u})`);const r=P(u,[U,o],{cwd:o,detached:!0,stdio:["ignore","pipe","pipe"],env:{...process.env,KICKFLIP_BOARD:e.route,HOST:"127.0.0.1"}}),d=[],a=l(h=>{d.push(h),d.length>5&&d.shift()},"keep");R({input:r.stderr}).on("line",a);const p=new Promise(h=>r.once("exit",h)),n=l(async()=>{try{process.kill(-r.pid,"SIGTERM")}catch{return}if(!await Promise.race([p.then(()=>!0),k(4e3).then(()=>!1)])){try{process.kill(-r.pid,"SIGKILL")}catch{}await p}},"stop"),f=await new Promise(h=>{const b=R({input:r.stdout}),y=l(x=>{clearTimeout(v),b.close(),h(x)},"done"),v=setTimeout(()=>y(null),Y);b.on("line",x=>{const T=/^port (\d{1,5})$/.exec(x);T?y(Number(T[1])):a(x)}),p.then(()=>y(null))}),i=l(()=>fetch(`http://127.0.0.1:${f}/`,{signal:AbortSignal.timeout(1e3)}).then(()=>!0,()=>!1),"answers");let c=!!f;for(let h=0;c&&!await i();h+=250)h>=6e4?c=!1:await k(250);if(!c)throw await n(),new w(`the base prototype worktree's ${O(e.build_target)} didn't serve on a port, so the round's question is not published:
+var A=Object.defineProperty;var l=(t,e)=>A(t,"name",{value:e,configurable:!0});import g from"node:fs";import k from"node:fs/promises";import B from"node:http";import P from"node:os";import m from"node:path";import{spawn as R}from"node:child_process";import{setTimeout as b}from"node:timers/promises";import{fileURLToPath as D}from"node:url";import{createInterface as O}from"node:readline";import{BoardError as w,readPrototypes as F}from"./store.mjs";import{prototypePage as G}from"./prototype-page.mjs";import{BASE_KEY as U,baseWorktreeOf as K}from"./prototype-base.mjs";import{buildScriptError as W,buildScriptOf as C}from"./build-script.mjs";import{boardAt as q}from"../hub/boards.mjs";const S=m.dirname(D(import.meta.url)),_=[390,1280],j=process.env.CHROME||"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",T={".js":"text/javascript",".css":"text/css",".html":"text/html",".json":"application/json",".png":"image/png",".svg":"image/svg+xml"},N=3e3,J=300,Y=12e4,M="(document.getElementById('stage')?.innerHTML || '').trim()",V="(document.body?.innerText || '').trim()";function z(t,e){const n=[m.join(t,"public"),m.join(S,"public"),m.join(S,"..","starter","public"),m.join(S,"..","shared")];return B.createServer(async(u,r)=>{let o=decodeURIComponent(new URL(u.url,"http://x").pathname);const d=/^\/_hub\/(icon-(?:180|192|512)\.png)$/.exec(o);if(d){r.writeHead(200,{"content-type":T[".png"]}).end(await k.readFile(m.join(S,"..","hub",d[1])));return}if(["/_hub/kickflip.png","/_hub/hub.css","/_hub/colors.css"].includes(o)&&(o=o.slice(5)),o===`/prototype-${e.topic}.html`){r.writeHead(200,{"content-type":T[".html"]}).end(await G(t,e));return}for(const c of n){const i=m.resolve(c,`.${o}`);if(i.startsWith(c+m.sep)&&g.existsSync(i)&&g.statSync(i).isFile()){r.writeHead(200,{"content-type":T[m.extname(i)]||"application/octet-stream"}).end(await k.readFile(i));return}}r.writeHead(o==="/favicon.ico"?204:404).end()})}l(z,"serve");async function H(t){if(!g.existsSync(j))throw new w(`the render check needs Chrome; none at ${j}, set CHROME to its path`);const e=R(j,["--headless=new","--remote-debugging-port=0",`--user-data-dir=${t}`,"--no-first-run","about:blank"],{stdio:"ignore",env:{...process.env,HOME:P.userInfo().homedir}}),n=m.join(t,"DevToolsActivePort");for(let a=0;a<100&&!g.existsSync(n);a++)await b(100);if(!g.existsSync(n))throw e.kill(),new w("the render check could not start Chrome");const u=g.readFileSync(n,"utf8").split(`
+`)[0];let r;for(let a=0;a<100&&!r;a++)r=(await fetch(`http://127.0.0.1:${u}/json`).then(p=>p.json(),()=>[])).find(p=>p.type==="page"),r||await b(100);if(!r)throw e.kill(),new w("the render check could not start Chrome");const o=new WebSocket(r.webSocketDebuggerUrl);try{await new Promise((a,p)=>{o.onopen=a,o.onerror=p})}catch{throw e.kill(),new w("the render check could not start Chrome")}let d=0;const c=new Map,i=[];return o.onmessage=({data:a})=>{const p=JSON.parse(a);p.id?c.get(p.id)?.(p):i.forEach(f=>f(p))},{cdp:l((a,p={})=>new Promise((f,$)=>{const y=++d;c.set(y,v=>v.error?$(new Error(v.error.message)):f(v.result)),o.send(JSON.stringify({id:y,method:a,params:p}))}),"cdp"),on:l(a=>(i.push(a),()=>i.splice(i.indexOf(a),1)),"on"),close:l(async()=>{o.close();const a=new Promise(p=>e.once("exit",p));e.kill(),await a},"close")}}l(H,"launchOnce");async function Q(t){try{return await H(t)}catch(e){if(!(e instanceof w)||!/could not start Chrome/.test(e.message))throw e;return await k.rm(t,{recursive:!0,force:!0}),await k.mkdir(t),H(t)}}l(Q,"launch");const X=l(t=>t.exception?.description?.split(`
+`)[0]||t.text,"described");async function I({cdp:t,on:e},n,u,r=M){const o=[],d=e(s=>{s.method==="Runtime.exceptionThrown"?o.push(X(s.params.exceptionDetails)):s.method==="Runtime.consoleAPICalled"&&s.params.type==="error"?o.push(`console error: ${s.params.args.map(h=>h.value??h.description).join(" ").split(`
+`)[0]}`):s.method==="Log.entryAdded"&&s.params.entry.level==="error"&&s.params.entry.source!=="javascript"&&!/\/favicon\.ico$/.test(s.params.entry.url||"")&&o.push(`${s.params.entry.text}${s.params.entry.url?` ${s.params.entry.url}`:""}`)});await t("Emulation.setDeviceMetricsOverride",{width:u,height:900,deviceScaleFactor:1,mobile:u<600}),await t("Page.navigate",{url:n});const c=l(async()=>(await t("Runtime.evaluate",{expression:r,returnByValue:!0})).result.value,"stage");let i="";for(let s=0;s<N&&!i;s+=100)await b(100),i=await c();return await b(J),d(),i||o.push(r===M?"renders an empty stage":"renders an empty page"),[...new Set(o)]}l(I,"checkTake");async function Z(t){const e=q(t);if(!e)throw new w(`${t} is not a board in the hub's manifest, so it has no base prototype worktree to check`);const n=K(e.route),u=m.join(n,C(e.build_target)),r=W(u);if(r)throw new w(`the base prototype worktree can't serve the round: ${r} (${u})`);const o=R(u,[U,n],{cwd:n,detached:!0,stdio:["ignore","pipe","pipe"],env:{...process.env,KICKFLIP_BOARD:e.route,HOST:"127.0.0.1"}}),d=[],c=l(f=>{d.push(f),d.length>5&&d.shift()},"keep");O({input:o.stderr}).on("line",c);const i=new Promise(f=>o.once("exit",f)),s=l(async()=>{try{process.kill(-o.pid,"SIGTERM")}catch{return}if(!await Promise.race([i.then(()=>!0),b(4e3).then(()=>!1)])){try{process.kill(-o.pid,"SIGKILL")}catch{}await i}},"stop"),h=await new Promise(f=>{const $=O({input:o.stdout}),y=l(x=>{clearTimeout(v),$.close(),f(x)},"done"),v=setTimeout(()=>y(null),Y);$.on("line",x=>{const E=/^port (\d{1,5})$/.exec(x);E?y(Number(E[1])):c(x)}),i.then(()=>y(null))}),a=l(()=>fetch(`http://127.0.0.1:${h}/`,{signal:AbortSignal.timeout(1e3)}).then(()=>!0,()=>!1),"answers");let p=!!h;for(let f=0;p&&!await a();f+=250)f>=6e4?p=!1:await b(250);if(!p)throw await s(),new w(`the base prototype worktree's ${C(e.build_target)} didn't serve on a port, so the round's question is not published:
 ${d.join(`
-`)}`);return{origin:`http://127.0.0.1:${f}`,dir:o,stop:n}}l(Z,"serveBase");async function H(t){const e=await $.mkdtemp(m.join(E.tmpdir(),"render-check-"));let o;try{return o=await Q(e),await o.cdp("Runtime.enable"),await o.cdp("Log.enable"),await t(o)}finally{await o?.close(),await $.rm(e,{recursive:!0,force:!0,maxRetries:30,retryDelay:200})}}l(H,"withChrome");async function ee(t,e){const o=await Z(t);try{const u=e.takes[0].key,s=(e.states||[]).map(a=>a.key),r=[...e.takes.map(a=>[a.key,s[0]??null]),...s.slice(1).map(a=>[u,a])],d=await H(async a=>{const p=[];for(const[n,f]of r){const i=new URL(e.served,o.origin);i.searchParams.set("variant",n),f&&i.searchParams.set("state",f);for(const c of C)for(const h of await A(a,i.href,c,V))p.push(`take ${n}${f?`, state ${f}`:""} at ${c}px: ${h}`)}return p});if(d.length)throw new w(`prototype ${e.topic} does not render, so its question is not published; fix its page in ${o.dir} and ask again:
+`)}`);return{origin:`http://127.0.0.1:${h}`,dir:n,stop:s}}l(Z,"serveBase");async function L(t){const e=await k.mkdtemp(m.join(P.tmpdir(),"render-check-"));let n;try{return n=await Q(e),await n.cdp("Runtime.enable"),await n.cdp("Log.enable"),await t(n)}finally{await n?.close(),await k.rm(e,{recursive:!0,force:!0,maxRetries:30,retryDelay:200})}}l(L,"withChrome");async function ee(t,e){const n=await Z(t);try{const u=e.takes[0].key,r=(e.states||[]).map(c=>c.key),o=[...e.takes.map(c=>[c.key,r[0]??null]),...r.slice(1).map(c=>[u,c])],d=await L(async c=>{const i=[];for(const[s,h]of o){const a=new URL(e.served,n.origin);a.searchParams.set("variant",s),h&&a.searchParams.set("state",h);for(const p of _)for(const f of await I(c,a.href,p,V))i.push(`take ${s}${h?`, state ${h}`:""} at ${p}px: ${f}`)}return i});if(d.length)throw new w(`prototype ${e.topic} does not render, so its question is not published; fix its page in ${n.dir} and ask again:
 ${d.join(`
-`)}`)}finally{await o.stop()}}l(ee,"checkServedRender");async function we(t,e){const o=(await F(t)).find(s=>s.topic===e);if(o.served)return ee(t,o);const u=z(t,o);await new Promise(s=>u.listen(0,"127.0.0.1",s));try{const s=`http://127.0.0.1:${u.address().port}/prototype-${e}.html`,r=await H(async d=>{const a=[];for(const p of o.takes)for(const n of C)for(const f of await A(d,`${s}?variant=${p.key}`,n))a.push(`take ${p.key} at ${n}px: ${f}`);return a});if(r.length)throw new w(`prototype ${e} does not render, so its question is not published; fix the take files and ask again:
-${r.join(`
-`)}`)}finally{u.close()}}l(we,"checkTakesRender");export{C as WIDTHS,we as checkTakesRender};
+`)}`)}finally{await n.stop()}}l(ee,"checkServedRender");async function we(t,e){const n=(await F(t)).find(r=>r.topic===e);if(n.served)return ee(t,n);const u=z(t,n);await new Promise(r=>u.listen(0,"127.0.0.1",r));try{const r=`http://127.0.0.1:${u.address().port}/prototype-${e}.html`,o=await L(async d=>{const c=[];for(const i of n.takes)for(const s of _)for(const h of await I(d,`${r}?variant=${i.key}`,s))c.push(`take ${i.key} at ${s}px: ${h}`);return c});if(o.length)throw new w(`prototype ${e} does not render, so its question is not published; fix the take files and ask again:
+${o.join(`
+`)}`)}finally{u.close()}}l(we,"checkTakesRender");export{_ as WIDTHS,we as checkTakesRender};