@lovek4d/kickflip 0.7.8 → 0.9.0

package/board/hub-lines.mjs

@@ -1 +1 @@
-var b=Object.defineProperty;var t=(e,o)=>b(e,"name",{value:o,configurable:!0});import w from"node:os";const h=100,P=2e3,$=/(?:~|\/)[^\s:;,()'"]*\/([^\s:;,()'"/]+)/g;function r(e,o,s=""){const d=h-e.length-s.length;let l=String(o??"").split(w.homedir()).join("~").replace(/\s+/g," ").trim();return l.length>d&&(l=l.replace($,"\u2026/$1")),l.length<=d?e+l+s:`${e}${l.slice(0,d-1).trimEnd()}\u2026${s.replace(/^\./,"")}`}t(r,"fit");const i="Held",c="Resumed",m="Blocked",a="Fault",u="move",g="questions",k="Implementation requested",x="Prototype requested",n="Marked done",y="prototype",f="owner/a-long-repo-name#10000",v="Wed, 11/30, 12:00 PM",p={"host-busy":{mark:i,text:t(()=>"Host is busy, work will resume when the host recovers","text")},"planner-held":{mark:i,text:t(({kind:e})=>`The ${e} waits and starts when the hold lifts.`,"text"),longest:{kind:y}},paused:{mark:i,text:t(({phase:e,words:o,clear:s})=>r(`Paused${e?` at ${e}`:""}: `,o,`. It resumes once ${s}.`),"text"),longest:{phase:"building",clear:"the usage pause lifts"}},"run-stopped":{mark:i,text:t(({words:e})=>e,"text"),longest:{words:"build stopped by orchestrator"}},"land-moved-first":{mark:u,text:t(({words:e})=>e,"text"),longest:{words:"land moved first by orchestrator"}},"builder-stopped":{mark:i,text:t(()=>"Stopped its builder.","text")},"land-waiting":{mark:i,text:t(({card:e})=>r("Waiting for ",e," to land"),"text")},resumed:{mark:c,text:t(({clear:e})=>`Resumed: ${e}.`,"text"),longest:{clear:"the usage pause lifted"}},"hold-ended":{mark:c,text:t(({at:e})=>`Resumed: its hold until ${e} ended.`,"text"),longest:{at:v}},unblocked:{mark:c,text:t(({lifted:e})=>r("Unblocked: ",e,"."),"text")},"unblocked-done":{mark:c,text:t(({card:e})=>r("Unblocked: ",e," is done."),"text")},"blocked-pausing":{mark:m,text:t(({blocked:e})=>r("Blocked ",e,": its builder pauses at its next stopping point and it stays In Progress."),"text")},"blocked-stays":{mark:m,text:t(({blocked:e})=>r("Blocked ",e,": it stays In Progress."),"text")},"cant-start-yet":{mark:m,text:t(({names:e})=>r("Can\u2019t start yet: waits on ",e,". Bumped to the top of Todo."),"text")},"split-moved":{mark:m,text:t(({card:e,to:o})=>r("Split: ",`${e} became ${o}`,", so it waits on those now."),"text")},"merge-blocked":{mark:m,text:t(({blocked:e})=>r("Not merged: blocked ",e,"."),"text")},pulled:{mark:k,text:t(()=>"Pulled in: an implementer slot was free.","text")},"helper-asked":{mark:k,text:t(({agent:e,writes:o})=>r("Asked for helper ",e,o?", which writes code":""),"text"),longest:{writes:!0}},"arch-review":{mark:k,text:t(({card:e})=>r("Started an architecture review of ",e,"; its report becomes the notes"),"text")},"prototype-after":{mark:x,text:t(()=>"Prototype round asked: it moves to prototyping once every question is answered.","text")},"prototype-round":{mark:x,text:t(()=>"You asked for a prototype round, so the board moved the card to prototyping.","text")},"ticket-made":{mark:u,text:t(({ticket:e})=>r("You asked for a ticket, so the board made ",e,"."),"text")},"new-question":{mark:g,text:t(()=>"A new question on it, so it is grilling until you answer.","text")},"screen-timeout":{mark:g,text:t(()=>"Questions passed to you unscreened: the orchestrator didn\u2019t screen them in 15 minutes.","text")},"ask-moved":{mark:u,text:t(({board:e})=>r("Moved to ",e,"."),"text")},"card-merged":{mark:u,text:t(({card:e})=>r("Merged into ",e,"."),"text")},"pr-found":{mark:u,text:t(({pr:e,branch:o})=>r(`Found PR #${e} on branch `,o,"."),"text"),longest:{pr:1e5}},"ci-passed":{mark:n,text:t(({pr:e})=>`CI passed, so PR #${e} is marked ready for review.`,"text"),longest:{pr:1e5}},"worktree-remade":{mark:u,text:t(()=>"Remade its leftover worktree: it held no commits or changes.","text")},merged:{mark:n,text:t(({words:e})=>r("",e),"text")},"already-merged":{mark:n,text:t(({prs:e,many:o})=>r(`PR${o?"s":""} `,e,` ${o?"were":"was"} already merged.`),"text"),longest:{many:!0}},"ask-moved-closed":{mark:n,text:t(({board:e})=>r("Closed: its ask moved to ",e,"."),"text")},"check-passed":{mark:n,text:t(({found:e})=>r("Check passed: ",e,". Closed."),"text")},"findings-settled":{mark:n,text:t(({filed:e})=>r("Every finding is settled: ",e?`filed ${e}`:"none filed","."),"text")},"branch-merged":{mark:n,text:t(({branch:e,into:o,host:s})=>r("",`${e} is merged into ${o} on ${s}`,", so this card is Done."),"text")},"branch-gone":{mark:n,text:t(({branch:e,host:o})=>r("",`${e} is gone from ${o}`,", so this card is Done."),"text")},"prs-closed":{mark:n,text:t(({prs:e})=>r("Closed: ",e," closed unmerged."),"text"),longest:{prs:`${f}, ${f}`}},"landed-on-merge":{mark:n,text:t(({base:e})=>r("Landed on ",e," on your Merge."),"text")},"lander-handoff":{mark:k,text:t(({why:e})=>r("Not merged yet: ",e,". Its builder resumes to fix it and land it."),"text")},"builder-resumed-to-land":{mark:k,text:t(({session:e})=>r("Builder resumed to land, session ",e),"text")},"build-refused":{mark:a,fault:!0,text:t(({why:e})=>r("Couldn't start implementing: ",e),"text")},"planner-failed":{mark:a,fault:!0,text:t(({kind:e,error:o})=>r(`Couldn't start the ${e}: `,o),"text"),longest:{kind:"visual agent"}},"helper-failed":{mark:a,fault:!0,text:t(({name:e,error:o})=>r(`Couldn't start helper ${e}: `,o),"text"),longest:{name:"a-helper-name-of-24-char"}},"exited-twice":{mark:a,fault:!0,text:t(()=>"Its builder exited twice unfinished; it reads stopped until the orchestrator takes it up.","text")},"resume-failed":{mark:a,fault:!0,text:t(({error:e})=>r("Couldn't resume the builder headless: ",e),"text")},"relaunch-failed":{mark:a,fault:!0,text:t(({error:e})=>r("Couldn't relaunch the builder headless: ",e),"text")},"lander-failed":{mark:a,fault:!0,text:t(({error:e})=>r("Couldn't launch the lander; land it by hand: ",e),"text")},"rebase-failed":{mark:a,fault:!0,text:t(({pr:e,error:o})=>r(`PR #${e} conflicts, but the rebase run couldn't start: `,o),"text"),longest:{pr:1e5}},"rebase-launch-failed":{mark:a,fault:!0,text:t(({error:e})=>r("Couldn't launch the rebase run; it reads stopped: ",e),"text")},"gh-limited":{mark:a,fault:!0,text:t(({what:e,words:o})=>r(`${e}: `,o,"."),"text"),longest:{what:"No PR opened"}},"merge-refused":{mark:a,fault:!0,text:t(({why:e})=>r("Not merged: ",e,"."),"text")},"land-failed":{mark:a,fault:!0,text:t(({why:e})=>r("Not merged: ",e,". Tap Merge again."),"text")},"push-failed":{mark:a,fault:!0,text:t(({base:e,error:o})=>r(`Landed, but ${e} didn't reach origin: `,o),"text"),longest:{base:"a-long-base-branch"}},"answers-failed":{mark:a,fault:!0,text:t(({what:e,error:o})=>r(`Answers recorded, but ${e} failed: `,o),"text"),longest:{what:"writing them into its notes"}},"notes-missing":{mark:a,fault:!0,text:t(()=>"Its notes file was missing, so the board started a new one.","text")},"notes-shared":{mark:a,fault:!0,text:t(({card:e})=>r("It shared its notes file with ",e,", so the board gave it its own copy."),"text")},"check-broken":{mark:a,fault:!0,text:t(({error:e})=>r("The owner step's check can't run, so it stopped: ",e),"text")},"run-failed":{mark:a,fault:!0,text:t(({kind:e,code:o,why:s})=>r(`${e} failed (exit ${o})`,s?`: ${s}`:""),"text"),longest:{kind:"Serve",code:255}}};function C(e,o={}){const s=p[e];if(!s)throw new Error(`no status line kind "${e}"`);const d=s.text(o);if(!d||d.length>h)throw new Error(`the "${e}" status line runs to ${d.length} characters, past ${h}: ${d}`);return d}t(C,"hubText");const R=t(e=>({mark:p[e.line]?.mark||"",fault:!!p[e.line]?.fault}),"hubLineOf"),T="hub";export{h as BRIEF_LINE_LIMIT,T as HUB,p as HUB_LINES,P as MESSAGE_LIMIT,r as fit,R as hubLineOf,C as hubText};
+var b=Object.defineProperty;var t=(e,a)=>b(e,"name",{value:a,configurable:!0});import $ from"node:os";const p=100,g=2e3,y=/(?:~|\/)[^\s:;,()'"]*\/([^\s:;,()'"/]+)/g;function r(e,a,s=""){const d=p-e.length-s.length;let l=String(a??"").split($.homedir()).join("~").replace(/\s+/g," ").trim();return l.length>d&&(l=l.replace(y,"\u2026/$1")),l.length<=d?e+l+s:`${e}${l.slice(0,d-1).trimEnd()}\u2026${s.replace(/^\./,"")}`}t(r,"fit");const i="Held",h="Resumed",m="Blocked",o="Fault",u="move",x="questions",k="Implementation requested",f="Prototype requested",n="Marked done",v="prototype",w="owner/a-long-repo-name#10000",I="Wed, 11/30, 12:00 PM",c={"host-busy":{mark:i,text:t(()=>"Host is busy, work will resume when the host recovers","text")},"planner-held":{mark:i,text:t(({kind:e})=>`The ${e} waits and starts when the hold lifts.`,"text"),longest:{kind:v}},paused:{mark:i,text:t(({phase:e,words:a,clear:s})=>r(`Paused${e?` at ${e}`:""}: `,a,`. It resumes once ${s}.`),"text"),longest:{phase:"building",clear:"the usage pause lifts"}},"run-stopped":{mark:i,text:t(({words:e})=>e,"text"),longest:{words:"build stopped by orchestrator"}},"land-moved-first":{mark:u,text:t(({words:e})=>e,"text"),longest:{words:"land moved first by orchestrator"}},"builder-stopped":{mark:i,text:t(()=>"Stopped its builder.","text")},"land-waiting":{mark:i,text:t(({card:e})=>r("Waiting for ",e," to land"),"text")},resumed:{mark:h,text:t(({clear:e})=>`Resumed: ${e}.`,"text"),longest:{clear:"the usage pause lifted"}},"hold-ended":{mark:h,text:t(({at:e})=>`Resumed: its hold until ${e} ended.`,"text"),longest:{at:I}},unblocked:{mark:h,text:t(({lifted:e})=>r("Unblocked: ",e,"."),"text")},"unblocked-done":{mark:h,text:t(({card:e})=>r("Unblocked: ",e," is done."),"text")},"blocked-pausing":{mark:m,text:t(({blocked:e})=>r("Blocked ",e,": its builder pauses at its next stopping point and it stays In Progress."),"text")},"blocked-stays":{mark:m,text:t(({blocked:e})=>r("Blocked ",e,": it stays In Progress."),"text")},"cant-start-yet":{mark:m,text:t(({names:e})=>r("Can\u2019t start yet: waits on ",e,". Bumped to the top of Todo."),"text")},"split-moved":{mark:m,text:t(({card:e,to:a})=>r("Split: ",`${e} became ${a}`,", so it waits on those now."),"text")},"merge-blocked":{mark:m,text:t(({blocked:e})=>r("Not merged: blocked ",e,"."),"text")},pulled:{mark:k,text:t(()=>"Pulled in: an implementer slot was free.","text")},"helper-asked":{mark:k,text:t(({agent:e,writes:a})=>r("Asked for helper ",e,a?", which writes code":""),"text"),longest:{writes:!0}},"arch-review":{mark:k,text:t(({card:e})=>r("Started an architecture review of ",e,"; its report becomes the notes"),"text")},"prototype-after":{mark:f,text:t(()=>"Prototype round asked: it moves to prototyping once every question is answered.","text")},"prototype-round":{mark:f,text:t(()=>"You asked for a prototype round, so the board moved the card to prototyping.","text")},"ticket-made":{mark:u,text:t(({ticket:e})=>r("The board made ",e,"."),"text")},"new-question":{mark:x,text:t(()=>"A new question on it, so it is grilling until you answer.","text")},"screen-timeout":{mark:x,text:t(()=>"Questions passed to you unscreened: the orchestrator didn\u2019t screen them in 15 minutes.","text")},"ask-moved":{mark:u,text:t(({board:e})=>r("Moved to ",e,"."),"text")},"card-merged":{mark:u,text:t(({card:e})=>r("Merged into ",e,"."),"text")},"pr-found":{mark:u,text:t(({pr:e,branch:a})=>r(`Found PR #${e} on branch `,a,"."),"text"),longest:{pr:1e5}},"ci-passed":{mark:n,text:t(({pr:e})=>`CI passed, so PR #${e} is marked ready for review.`,"text"),longest:{pr:1e5}},"worktree-remade":{mark:u,text:t(()=>"Remade its leftover worktree: it held no commits or changes.","text")},merged:{mark:n,text:t(({words:e})=>r("",e),"text")},"already-merged":{mark:n,text:t(({prs:e,many:a})=>r(`PR${a?"s":""} `,e,` ${a?"were":"was"} already merged.`),"text"),longest:{many:!0}},"ask-moved-closed":{mark:n,text:t(({board:e})=>r("Closed: its ask moved to ",e,"."),"text")},"check-passed":{mark:n,text:t(({found:e})=>r("Check passed: ",e,". Closed."),"text")},"findings-settled":{mark:n,text:t(({filed:e})=>r("Every finding is settled: ",e?`filed ${e}`:"none filed","."),"text")},"branch-merged":{mark:n,text:t(({branch:e,into:a,host:s})=>r("",`${e} is merged into ${a} on ${s}`,", so this card is Done."),"text")},"branch-gone":{mark:n,text:t(({branch:e,host:a})=>r("",`${e} is gone from ${a}`,", so this card is Done."),"text")},"prs-closed":{mark:n,text:t(({prs:e})=>r("Closed: ",e," closed unmerged."),"text"),longest:{prs:`${w}, ${w}`}},"landed-on-merge":{mark:n,text:t(({base:e})=>r("Landed on ",e," on your Merge."),"text")},"lander-handoff":{mark:k,text:t(({why:e})=>r("Not merged yet: ",e,". Its builder resumes to fix it and land it."),"text")},"builder-resumed-to-land":{mark:k,text:t(({session:e})=>r("Builder resumed to land, session ",e),"text")},"build-refused":{mark:o,fault:!0,detail:t(({why:e})=>e,"detail"),text:t(({why:e})=>r("Couldn't start implementing: ",e),"text")},"planner-unasked":{mark:o,fault:!0,detail:t(({kind:e})=>e,"detail"),text:t(({kind:e})=>`Its ${e} planner ended without posting a question, so it waits on the orchestrator.`,"text"),longest:{kind:"prototype"}},"planner-failed":{mark:o,fault:!0,detail:t(({error:e})=>e,"detail"),text:t(({kind:e,error:a})=>r(`Couldn't start the ${e}: `,a),"text"),longest:{kind:"visual agent"}},"helper-failed":{mark:o,fault:!0,detail:t(({error:e})=>e,"detail"),text:t(({name:e,error:a})=>r(`Couldn't start helper ${e}: `,a),"text"),longest:{name:"a-helper-name-of-24-char"}},"exited-twice":{mark:o,fault:!0,text:t(()=>"Its builder exited twice unfinished; it reads stopped until the orchestrator takes it up.","text")},"resume-failed":{mark:o,fault:!0,detail:t(({error:e})=>e,"detail"),text:t(({error:e})=>r("Couldn't resume the builder headless: ",e),"text")},"relaunch-failed":{mark:o,fault:!0,detail:t(({error:e})=>e,"detail"),text:t(({error:e})=>r("Couldn't relaunch the builder headless: ",e),"text")},"lander-failed":{mark:o,fault:!0,detail:t(({error:e})=>e,"detail"),text:t(({error:e})=>r("Couldn't launch the lander; land it by hand: ",e),"text")},"rebase-failed":{mark:o,fault:!0,detail:t(({error:e})=>e,"detail"),text:t(({pr:e,error:a})=>r(`PR #${e} conflicts, but the rebase run couldn't start: `,a),"text"),longest:{pr:1e5}},"rebase-launch-failed":{mark:o,fault:!0,detail:t(({error:e})=>e,"detail"),text:t(({error:e})=>r("Couldn't launch the rebase run; it reads stopped: ",e),"text")},"gh-limited":{mark:o,fault:!0,detail:t(({words:e})=>e,"detail"),text:t(({what:e,words:a})=>r(`${e}: `,a,"."),"text"),longest:{what:"No PR opened"}},"merge-refused":{mark:o,fault:!0,detail:t(({why:e})=>e,"detail"),text:t(({why:e})=>r("Not merged: ",e,"."),"text")},"land-failed":{mark:o,fault:!0,detail:t(({why:e})=>e,"detail"),text:t(({why:e})=>r("Not merged: ",e,". Tap Merge again."),"text")},"push-failed":{mark:o,fault:!0,detail:t(({error:e})=>e,"detail"),text:t(({base:e,error:a})=>r(`Landed, but ${e} didn't reach origin: `,a),"text"),longest:{base:"a-long-base-branch"}},"answers-failed":{mark:o,fault:!0,detail:t(({error:e})=>e,"detail"),text:t(({what:e,error:a})=>r(`Answers recorded, but ${e} failed: `,a),"text"),longest:{what:"writing them into its notes"}},"notes-missing":{mark:o,fault:!0,text:t(()=>"Its notes file was missing, so the board started a new one.","text")},"notes-shared":{mark:o,fault:!0,text:t(({card:e})=>r("It shared its notes file with ",e,", so the board gave it its own copy."),"text")},"check-broken":{mark:o,fault:!0,detail:t(({error:e})=>e,"detail"),text:t(({error:e})=>r("The owner step's check can't run, so it stopped: ",e),"text")},"run-failed":{mark:o,fault:!0,detail:t(({why:e})=>e,"detail"),text:t(({kind:e,code:a})=>`${e} failed (exit ${a})`,"text"),longest:{kind:"Serve",code:255}}};function C(e,a={}){const s=c[e];if(!s)throw new Error(`no status line kind "${e}"`);const d=s.text(a);if(!d||d.length>p)throw new Error(`the "${e}" status line runs to ${d.length} characters, past ${p}: ${d}`);return d}t(C,"hubText");function T(e,a={}){const s=String(c[e]?.detail?.(a)??"").trim();return s.length>g?`\u2026${s.slice(-(g-1))}`:s}t(T,"detailOf");const R=t(e=>({mark:c[e.line]?.mark||"",fault:!!c[e.line]?.fault}),"hubLineOf"),S="hub";export{p as BRIEF_LINE_LIMIT,S as HUB,c as HUB_LINES,g as MESSAGE_LIMIT,T as detailOf,r as fit,R as hubLineOf,C as hubText};

package/board/public/app-header.js

@@ -19,11 +19,34 @@ BoardView.part((B) => {
   // The status line, and the moon right of the title while the owner reads away (hub/presence.mjs ownerTracker).
   const renderStatus = () => {
     $('#status').innerHTML = statusLine(state.fresh?.at, { link: state.link, watcher: state.board?.checks?.watcher, pause: B.pause?.(), waking: state.waking });
+    renderPause(B.pause?.());
     const moon = $('.away-moon');
     const away = Boolean(B.away?.());
     moon.classList.toggle('on', away);
     moon.setAttribute('aria-hidden', String(!away));
   };
+  // The hub's pause banner (HubUI.pauseBanner) at the top of the board while the gate pauses or nears its line, its forms
+  // posting to the hub. Pause board's own pause has no hub form, so the header's title alone says it.
+  const renderPause = (pause) => {
+    const el = $('#pauseBanner');
+    const html = pause?.manual === 'board' ? '' : HubUI.pauseBanner(pause);
+    el.hidden = !html;
+    BoardUI.setHTML(el, html);
+  };
+  B.on($('#pauseBanner'), 'submit', async (ev) => {
+    const form = ev.target;
+    const action = form.getAttribute('action') || '';
+    if (!action.startsWith('/_hub/')) return;
+    ev.preventDefault();
+    const body = new URLSearchParams(new FormData(form));
+    if (ev.submitter?.name) body.append(ev.submitter.name, ev.submitter.value);
+    try {
+      const r = await fetch(action, { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/x-www-form-urlencoded' }, body });
+      if (!r.ok) throw new Error(String(r.status));
+      const out = await r.json().catch(() => null);
+      if (out?.pause) renderPause(out.pause);
+    } catch { toast('Could not reach the hub. Is the host awake?'); }
+  });
   // A board load and its open threads landed; via is ui-header.js nextFresh's.
   function landed(via) {
     state.fresh = nextFresh(state.fresh, { via, at: new Date().toISOString(), sig: freshSig(state.board, state.threadCache, state.openItems) });

package/board/public/app-needs.js

@@ -90,7 +90,7 @@ BoardView.part((B) => {
     const marked = getDraft(q.id).choice;
     const optionHtml = (o) => {
       const armed = o.id === marked;
-      const label = armed ? `Send “${esc(o.label)}”` : `${esc(choiceLabel(q, o.id))}${o.recommended ? ' <span class="rec-word">recommended</span>' : ''}`;
+      const label = armed ? `Send “${esc(o.label)}”?` : `${esc(choiceLabel(q, o.id))}${o.recommended ? ' <span class="rec-word">recommended</span>' : ''}`;
       return `<button type="button" class="${[o.recommended && 'rec', armed && 'armed'].filter(Boolean).join(' ')}" aria-pressed="${armed}" data-deck-pick="${esc(o.id)}"><span class="lbl">${label}</span>${o.detail ? `<div class="det">${markdown(o.detail, links)}</div>` : ''}</button>`;
     };
     return `<h3>${escText(q.question)}</h3>${q.context ? `<div class="ctx">${markdown(q.context, links)}</div>` : ''}

package/board/public/app-reader.js

@@ -1,7 +1,7 @@
 // The reader sheet (docs/adr/2026-11-04-2345-a-builders-log-and-notes-open-in-a-sheet.md): a thread's "View transcript"
 // (ui-threads.js) and a card's or a wave's Notes (app-cards.js, app-lanes.js) open over the board in one sheet in
 // place of log.html and notes.html, which still open on their own. It closes on its ✕, Escape, a tap on the dim area
-// and Back, through a history entry of its own that carries the board's URL, so the router's pop keeps the board.
+// and Back (from 900px it is not modal: no dim area, and the left pane stays live), through a history entry of its own that carries the board's URL, so the router's pop keeps the board.
 // A link in it closes it first, then opens through the shell.
 // A log written as a stream (headless.mjs: one stream-json event per line) reads as the run's transcript, the whole of
 // it as GET /api/transcript's rows: what Claude says, and each tool call as one line whose output opens on a tap, with a
@@ -17,6 +17,7 @@ BoardView.part((B) => {
   const more = sheet.querySelector('.reader-new');
   let opened = 0;
   let pushed = false;
+  let modal = true;
   let pending = null;
   let log = null;
   let stopReading = null;
@@ -109,7 +110,8 @@ BoardView.part((B) => {
     tools.innerHTML = '';
     more.hidden = true;
     body.innerHTML = '<p class="muted">Loading…</p>';
-    sheet.showModal();
+    modal = !matchMedia('(min-width: 900px)').matches;
+    if (modal) sheet.showModal(); else sheet.show();
     history.pushState({ ...history.state, idx: history.state.idx + 1, reader: true }, '', location.href);
     pushed = true;
     return opened;
@@ -169,6 +171,8 @@ BoardView.part((B) => {
     pending = new URL(a.getAttribute('href'), location.href).href;
     close();
   });
+  // A non-modal sheet (from 900px) gets no cancel event from Escape, so the page's own key closes it.
+  B.on(document, 'keydown', (ev) => { if (ev.key === 'Escape' && sheet.open && !modal) close(); });
   B.on(sheet, 'cancel', (ev) => { ev.preventDefault(); close(); });
   B.on(body, 'scroll', () => {
     if (!log?.stream) return;

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

@@ -457,6 +457,7 @@ window.BoardView = (function () {
 <div class="split">
 <main>
 ${strip}  <section id="setup" class="setup" aria-live="polite" hidden></section>
+  <section id="pauseBanner" class="hub-view" hidden></section>
   <section id="answers" class="answer-banner" hidden></section>
   <section id="needsDeck" class="needs-deck" aria-label="Needs you" hidden></section>
   <div id="tryMain"></div>
@@ -464,6 +465,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/attach.js

@@ -76,12 +76,24 @@ window.BoardAttach = (function () {
     paint(id, site);
   }
 
+  // Pressing the button does not take focus from the text box, so the cursor stays where it was while the picker opens
+  // (iOS may still hide the keyboard for its picker), and a pick puts focus back in the box that held it.
+  let focused = null;
+  document.addEventListener('mousedown', (ev) => {
+    const input = ev.target.closest && ev.target.closest('input[data-attach]');
+    if (!input) return;
+    const a = document.activeElement;
+    focused = a && a.tagName === 'TEXTAREA' && input.closest('[data-composer]')?.contains(a) ? a : null;
+    ev.preventDefault();
+  });
   document.addEventListener('change', (ev) => {
     const input = ev.target.closest && ev.target.closest('input[data-attach]');
     const c = input && input.closest('[data-composer]');
     if (!c) return;
     addFiles(c, input.files);
     input.value = '';
+    if (focused) focused.focus({ preventScroll: true });
+    focused = null;
   });
   // A drag of files over a composer marks it .dragging, which outlines its drop zone. dragenter and dragleave fire on
   // each child it crosses, so the composer counts them, and a drop ends the drag.

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/dialogs.js

@@ -171,12 +171,15 @@
     vv?.addEventListener('resize', fit);
     vv?.addEventListener('scroll', fit);
     window.addEventListener('resize', fit);
+    // A file picker closing returns focus to the window without a resize, so the sheet is measured again.
+    window.addEventListener('focus', fit);
     window.addEventListener('scroll', pin);
     return () => {
       clearTimeout(settle);
       vv?.removeEventListener('resize', fit);
       vv?.removeEventListener('scroll', fit);
       window.removeEventListener('resize', fit);
+      window.removeEventListener('focus', fit);
       window.removeEventListener('scroll', pin);
     };
   }

package/board/public/prototype-kit.js

@@ -115,7 +115,7 @@
 <div class="group">${d.sites.map(site).join('')}</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, events (its session and a watcher run, or the hub can wake it), daily wakes, pushes and reviewer links. One that just broke reads settling first.</p></div>
 <section class="hub-settings"><h2 class="label">Hub settings</h2>${settings}</section>
-<div class="hub-foot"><footer>${d.sites.length} 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">mac.example.ts.net</span><br><span class="brand"><a href="https://kickflip.sh">kickflip.sh</a> / v0.4.2</span></footer></div></main></div>`;
+<div class="hub-foot"><footer><span class="host">mac.example.ts.net</span><br><span class="brand"><a href="https://kickflip.sh">kickflip.sh</a> / v0.4.2</span></footer></div></main></div>`;
   }
 
   const LANES = [['review', 'In Review'], ['progress', 'In Progress'], ['todo', 'Todo'], ['done', 'Done']];

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

@@ -186,7 +186,7 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
 .refresh #refresh { padding: 4px; margin-left: -4px; flex: none; }
 .refresh #status { font-size: 12px; min-width: 0; }
 .refresh .late { color: var(--color-notice); font-weight: 600; }
-/* The header's time keeps its text; a stopped or offline board turns it and the refresh arrow red, paused usage orange. */
+/* The header's time keeps its text; a stopped or offline board turns it and the refresh arrow red. */
 .refresh .down, .refresh:has(.down) #refresh { color: var(--color-danger); }
 .refresh .hold, .refresh:has(.hold) #refresh { color: var(--color-notice); }
 .lane-github { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); text-align: right; }
@@ -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 { position: fixed; z-index: 30; 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-header.js

@@ -4,7 +4,7 @@
   // The header's short time beside refresh: `at` is when the page last got fresh data (nextFresh). It reads that age;
   // the board's other states only move the span's colour (the arrow follows it, style.css) and its title. watcher is
   // /api/board's checks.watcher (docs/adr/2026-10-29-1639-the-board-shows-github-checks-and-watcher-health.md): stopped
-  // (nothing will wake it) and an offline link turn it red, paused usage turns it orange. A busy host doesn't change it
+  // (nothing will wake it) and an offline link turn it red, paused usage leaves it as it is (the board's pause banner says it). A busy host doesn't change it
   // at all (docs/adr/2026-11-06-1305-a-busy-host-shows-only-on-the-hub-row-and-the-logo-dot.md).
   // link is 'online', 'offline' (the last board load failed) or 'reconnecting' (a refresh tap is retrying it, and the icon spins).
   const statusLine = (at, { link = 'online', watcher, pause, waking = false } = {}) => {
@@ -18,7 +18,7 @@
       : watcher === 'asleep' ? 'Asleep: its session idled out. Refresh, or any tap on the page, wakes it' : '';
     if (!at && !reason) return '';
     const title = [reason, at && `Updated ${since(at)}: the last change from the host, or your last refresh`].filter(Boolean).join('. ');
-    return `<span class="fresh${down ? ' down' : paused ? ' hold' : ''}" title="${esc(title)}">${at ? shortSince(at) : ''}</span>`;
+    return `<span class="fresh${down ? ' down' : ''}" title="${esc(title)}">${at ? shortSince(at) : ''}</span>`;
   };
   // What the page shows, for telling whether a change signal brought anything new; generatedAt changes on every load.
   const freshSig = (board, threads, openKeys) => JSON.stringify([{ ...board, generatedAt: null }, [...openKeys].sort().map((k) => [k, threads.get(k) ?? null])]);

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

@@ -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/view-hub.js

@@ -51,7 +51,7 @@
     // GitHub's row while its rate limit holds is red, a fault, and says when it resets
     // (docs/adr/2026-11-09-1626-gh-refuses-while-githubs-hourly-limit-holds.md).
     const rows = integrations.map((it) => row({ icon: tile(it.id, it.ready ? 'var(--color-quiet)' : it.limited ? 'var(--color-danger)' : 'var(--color-notice)'), title: esc(it.name), wrap: true, trail: keyButton(it),
-      sub: it.ready ? `<span class="st ok">ready</span> · ${esc(it.detail)}${devices(it)}`
+      sub: it.ready ? `<span class="st ok">ready</span> · ${esc(it.detail)}${devices(it)}${it.note ? `<span class="links"><span class="rd-waits">${esc(it.note)}</span></span>` : ''}`
         : `${it.limited ? '<span class="st down">rate limited</span>' : '<span class="st wait">not ready</span>'} · ${esc(it.missing)}${missingLinks(it)}` })).join('');
     return `<h2 class="label" id="integrations">Integrations</h2><div class="group">${rows}</div>
 <p class="note">A feature that needs an integration stays off until it’s ready, and says why.</p>
@@ -92,7 +92,7 @@ ${integrationsHtml(d.integrations)}${sitesHtml(d.groups, restarting)}${d.remembe
   }
 
   // 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>`;
+  const footer = (d, note = '') => `<footer><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`,

package/board/public/view-questions.js

@@ -390,7 +390,8 @@
         const first = topics.find((t) => t.id === topicId)?.questions[0];
         if (first) setHash(first);
         ctx.onTopic?.(topicId);
-        render(); scroll(0);
+        const y = scrollY;
+        render(); scroll(y);
         if (ctx.embedded) openOnBoard(topicId);
       }
     });