@lovek4d/kickflip 0.6.1 → 0.7.1

package/board/public/style.css

@@ -84,11 +84,19 @@ button.chip { border: 0; }
 .sub.next { color: var(--color-notice); }
 .card-hold { color: var(--color-quiet); }
 .card-blocked, .card-action { color: var(--color-notice); }
-.card-ready { color: var(--color-success); }
-.card-staging { color: var(--color-notice); }
+/* docs/adr/2026-11-11-1200-every-lane-has-phases.md: a card's phase word, toned by who acts next (ui-cards.js PHASE_LOOK). */
+.card-phase.ph-quiet { color: var(--color-quiet); }
+.card-phase.ph-info { color: var(--color-info); }
+.card-phase.ph-notice { color: var(--color-notice); }
+.card-phase.ph-success { color: var(--color-success); }
+.card-phase.ph-merged { color: var(--color-merged); }
 /* The footer status of a stale card, and of one the orchestrator stalled (ui-cards.js timeLine). */
 .card-stale { color: var(--muted); }
 .card-stalled { color: var(--color-danger); }
+/* A bumped ready card's footer status while the host holds new work, and a paused build's (ui-cards.js timeLine);
+   a build still pausing reads orange. */
+.card-host-held, .card-paused { color: var(--muted); }
+.card-pausing { color: var(--color-notice); }
 .sub.next.idle { color: var(--muted); }
 .sub.refused { color: var(--color-danger); }
 .toast-stack { position: fixed; left: 50%; bottom: calc(var(--app-bottom, 0px) + 12px + env(safe-area-inset-bottom));
@@ -149,7 +157,7 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
 .wv-link:disabled { color: var(--muted); cursor: default; }
 .wv-busy { display: inline-flex; align-items: center; gap: 6px; color: var(--color-notice); }
 /* docs/adr/2026-11-03-1840-waves-are-bands-in-todo.md: each wave is a lane-style band inside Todo's list. */
-.wb + .wb, .wb-loose { border-top: 1px solid var(--line); }
+.wb + .wb { border-top: 1px solid var(--line); }
 .wb-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 34px; padding: 5px 12px;
   background: var(--band); font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; }
 .wb-head:hover { background: color-mix(in srgb, var(--band), var(--text) 5%); }
@@ -167,7 +175,6 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
   background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.18); color: var(--text); font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; cursor: default; }
 .wb-done { padding: 8px 12px; font-size: 12.5px; color: var(--muted); }
 .wb-done a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
-.wb-loosehead { cursor: default; }
 .wb-counts { position: relative; border: 0; background: none; padding: 4px 0; font: inherit; cursor: help; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
 .wb-tip { display: none; position: absolute; right: 0; top: 100%; z-index: 6; margin-top: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.18); color: var(--text); font-weight: 400; text-align: left; }
 .wb-counts:hover .wb-tip, .wb-counts.open .wb-tip { display: block; }
@@ -175,18 +182,6 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
 .wb-counts .wv-review { color: var(--color-info); }
 .wb-counts .wv-progress { color: var(--color-notice); }
 .wb-counts .wv-todo, .wb-counts .wv-done { color: var(--color-quiet); }
-.wb-lane + .wb-lane, .wb-lane + .wb-loose { border-top: 1px solid var(--line); }
-.wb-loosehead:hover { background: var(--band); }
-/* A wave card's step number, inside its id chip, and its ⋯ menu. */
-.wn { color: var(--muted); font-variant-numeric: tabular-nums; padding-right: 5px; margin-right: 4px; border-right: 1px solid var(--line); }
-.wb .item, .wb .item > summary .title-wrap { position: relative; }
-.wb-dots[aria-expanded="true"] { color: var(--text); background: var(--chip); }
-.wb-dots svg { display: block; }
-.wb-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; min-width: 160px; padding: 4px;
-  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
-.wb-menu button { border: 0; background: none; text-align: left; padding: 8px 10px; min-height: 0; border-radius: 6px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
-.wb-menu button:hover:not(:disabled) { background: var(--chip); }
-.wb-menu button:disabled { color: var(--muted); cursor: default; }
 .lane[data-lane="todo"] > .list:has(.wb) { overflow: visible; }
 .nav a.icon { display: inline-flex; align-items: center; padding: 4px; color: var(--muted); }
 .nav a.icon:hover { color: var(--text); }
@@ -212,9 +207,6 @@ code { overflow-wrap: anywhere; }
 /* A file input draws its "Choose File" text at the 16px coarse-pointer size, wider than the button; iOS Safari widens the page to fit it. */
 .attach input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; font-size: 0; }
 .row > .attach + .muted { flex: 1; min-width: 0; }
-/* The ⌘↵ / Ctrl+↵ hint left of Send: only where there is a keyboard to press it on. */
-.send-hint { display: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
-@media (hover: hover) and (pointer: fine) { .send-hint { display: inline; } }
 /* A composer's text box (BoardUI.dropZone), its attach button inside at the bottom right with the text kept clear of it:
    while files are dragged over the composer, attach.js marks it .dragging and the box gets a dashed accent outline
    with Drop to attach over it. */
@@ -344,7 +336,7 @@ form[data-reply] .icons { display: inline-flex; flex: none; margin-left: auto; }
 /* A composer's send buttons (ui.js sendButton), each with its key as a small gray hint where there is a keyboard and
    room. A pair takes a row of two halves; a Todo card's reply box wraps its pair under the row. */
 .send-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
-.send-actions button, [data-sends] button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
+.send-actions button, [data-sends] button, .view-questions .bar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
 .send-actions button { min-height: 44px; }
 form[data-reply] .row { flex-wrap: wrap; gap: 6px; }
 form[data-reply] .row > .send-actions { flex: 0 0 100%; margin-top: 4px; }
@@ -383,10 +375,15 @@ button.attach:disabled { opacity: .35; }
 /* The session's working line, "thinking", is the owner's blue with one font, size, weight and pulse on the card and in the thread. */
 .thinking { color: var(--accent); font-size: 12px; font-weight: 600; }
 .thinking .working-dot { background: currentColor; }
+/* A New card's "waiting", until the orchestrator picks it up: grey, its dot still. */
+.pickup-wait { color: var(--muted); font-size: 12px; font-weight: 600; }
+.pickup-wait .working-dot { background: currentColor; animation: none; }
 .msg.link { padding: 0 10px; margin: 4px 0; font-size: 13px; }
 .msg.builder-status { padding: 0 10px; margin: 4px 0; font-size: 12px; color: var(--color-notice); overflow-wrap: anywhere; }
 .msg.builder-status .working-dot { animation: none; }
 .msg.request { padding: 0 10px; margin: 4px 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
+.msg.request.readied { color: var(--color-success); }
+.msg.request.hub.fault { color: var(--color-danger); }
 .msg.agent { padding: 0 10px; margin: 4px 0; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
 .msg.agent.started { color: var(--color-notice); } .msg.agent.finished { color: var(--color-success); }
 .msg.agent .muted { font-weight: 400; }
@@ -410,7 +407,6 @@ button.attach:disabled { opacity: .35; }
 .sub.agent.stale .working-dot { animation: none; }
 /* The one class every paused status takes, gray: the card and thread line, the header, the hub banner. */
 .paused { color: var(--muted); font-weight: 600; }
-.phase-bars.in-todo { --bar-fill: var(--muted); }
 .msg.calls { padding: 0 10px; margin: 4px 0; font-size: 12px; overflow-wrap: anywhere; }
 .msg.calls summary { cursor: pointer; color: var(--muted); list-style: none; }
 .msg.calls summary::-webkit-details-marker { display: none; }
@@ -464,7 +460,7 @@ button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chi
 .view-only-strip b { color: var(--accent); }
 /* A board out of reach (docs/adr/2026-11-06-0135-a-board-out-of-reach-keeps-its-copy-or-shows-a-landing.md): it reads as before,
    undimmed, and only the buttons that send, ui.js SENDS, are held, the labelled ones saying why; app-header.js stops their taps. */
-.offline :is(form button[type="submit"], .actions button, button[data-confirm], button[data-deck-pick], button[data-review-answer], button[data-prompt-send], button[data-prompt-choice], button[data-quick], button[data-card-bump], button[data-bump], button[data-withdraw], button[data-band-move], button[data-grill], button[data-proto], button[data-visual], button[data-plan], button[data-main-pull], button[data-arch-run], button[data-try], button[data-reopen]) { opacity: .55; cursor: not-allowed; }
+.offline :is(form button[type="submit"], .actions button, button[data-confirm], button[data-deck-pick], button[data-review-answer], button[data-prompt-send], button[data-prompt-choice], button[data-quick], button[data-card-bump], button[data-bump], button[data-withdraw], button[data-grill], button[data-proto], button[data-visual], button[data-plan], button[data-main-pull], button[data-arch-run], button[data-try], button[data-reopen]) { opacity: .55; cursor: not-allowed; }
 /* With no copy to show, the landing takes the board's place: the kickflip mark and two lines, as hub/front-door.mjs's page has them. */
 .down-landing { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 32px 24px; text-align: center; }
 .down-landing-mark { display: block; margin-bottom: 8px; width: 70px; height: 60px; object-fit: contain; }
@@ -583,7 +579,7 @@ main > * { transition: opacity .25s ease; }
 .view-settings .who.new { border-color: var(--accent); }
 .view-settings .add { display: flex; gap: 6px; margin-top: 8px; }
 .view-settings .add input { flex: 1; min-width: 0; }
-.view-settings .add.pick { flex-wrap: wrap; }
+.view-settings .add.pick { flex-direction: column; }
 .view-settings .share-now { color: var(--ok); font-weight: 600; }
 .view-settings .share-level { display: flex; gap: 4px; margin-top: 6px; }
 .view-settings .share-level button { min-height: 32px; padding: 4px 12px; font-size: 13px; }
@@ -592,7 +588,11 @@ main > * { transition: opacity .25s ease; }
 .view-settings .share-reach { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
 .view-settings .share-reach p { flex: 1 1 220px; margin: 0; }
 .view-settings .share-reach button { flex: none; }
-.view-settings .pick-col { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.view-settings .login-row { display: flex; gap: 6px; }
+.view-settings .login-row input { flex: 1; min-width: 0; }
+.view-settings .chip { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 14px; border: 1px solid var(--accent); font-size: 14px; }
+.view-settings .chip button { padding: 0 6px; min-height: 0; }
+.view-settings .problem { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px dashed var(--line); border-radius: 9px; }
 .view-settings .pick-list { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
 .view-settings .pick-list button { text-align: left; }
 .view-settings .pick-list button[aria-pressed="true"] { border-color: var(--accent); }
@@ -640,9 +640,16 @@ main > * { transition: opacity .25s ease; }
 .view-questions .opt .lbl { font-weight: 600; }
 .view-questions .opt .rec { color: var(--accent); font-weight: 500; font-size: 12px; margin-left: 4px; }
 .view-questions .opt .det { color: var(--muted); font-size: 13px; }
-.view-questions .opt .suggested { margin-left: 6px; white-space: nowrap; }
-.view-questions .opt .suggested-why { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
-.view-questions .opt .suggested-why a { color: var(--accent); }
+/* A question's context and an option's detail take markdown at body size: headings drawn as bold lines, blocks tight
+   (docs/adr/2026-11-09-1500-a-questions-descriptions-are-markdown-and-its-text-is-one-brief-line.md). */
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det) { overflow-wrap: anywhere; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det) :is(p, ul, ol, blockquote, pre, table) { margin: 0 0 6px; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det) :is(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: 600; margin: 6px 0 2px; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det) :is(ul, ol) { padding-left: 18px; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det) :is(pre, code) { white-space: pre-wrap; font-size: 12px; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det) table { display: block; overflow-x: auto; }
+:is(.view-questions .ctx, .view-questions .opt .det, .deck-card .ctx, .deck-opts .det) > :last-child { margin-bottom: 0; }
+.view-questions .opt .suggested-why { margin-top: 4px; color: var(--color-info); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
 .view-questions .note { margin-top: 4px; }
 .view-questions .ans { background: var(--accent-soft); border-radius: 9px; padding: 7px 10px; margin-top: 8px; font-size: 13px; }
 .view-questions .rep { background: var(--claude); border-radius: 9px; padding: 7px 10px; margin-top: 6px; font-size: 13px; }
@@ -650,7 +657,8 @@ main > * { transition: opacity .25s ease; }
 .view-questions .q details > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
 .view-questions .topics { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; margin-bottom: 4px; }
 .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); white-space: normal; text-align: left; overflow-wrap: anywhere; }
+  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.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)); }
@@ -671,9 +679,8 @@ main > * { transition: opacity .25s ease; }
 .view-questions .q.resolved .opt:has(input:checked) .det { display: block; }
 .view-questions .q.resolved .opt:not(:has(input:checked)) { opacity: .6; }
 .view-questions .q.resolved .reask-line { margin-top: 10px; }
-.view-questions .bar { position: sticky; bottom: var(--app-bottom, 0px); padding: 10px 0 max(10px, env(safe-area-inset-bottom)); background: var(--bg);
+.view-questions .bar { position: sticky; bottom: var(--app-bottom, 0px); padding: 10px 0 max(10px, env(safe-area-inset-bottom)); background: var(--bg); z-index: 2;
   display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
-.view-questions .bar .send-hint { margin-left: auto; }
 /* The + rides above the sticky Send bar rather than over its Send. */
 .view-questions .bar #qstatus { min-width: 0; }
 .view-questions .bar #qstatus.sent { color: var(--color-success); font-weight: 600; }
@@ -748,6 +755,8 @@ main > * { transition: opacity .25s ease; }
   :root:has(body > .top, body.has-sidebar > :not(.sidebar) > .top) {
     --app-bottom: calc(49px + max(4px, env(safe-area-inset-bottom)));
   }
+  /* The nav under the bar already pads the safe area (--app-bottom), so the gap under Send stays the 10px above it. */
+  .view-questions .bar { padding-bottom: 10px; }
   body > .top, body.has-sidebar > :not(.sidebar) > .top {
     position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 7;
     border-bottom: 0; border-top: 1px solid var(--line); padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom));
@@ -761,8 +770,12 @@ main > * { transition: opacity .25s ease; }
   .sheet.keyboard-sheet { --sheet-limit: max(80px, calc(var(--vh, 100dvh) + var(--kb, 0px) - max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px))) - max(12px, env(safe-area-inset-top)))); }
 }
 
-/* Typing, a text field focused (shell.js sets :root.typing): the floating + is disabled and the page stays as it is. */
-:root.typing .fab { opacity: .35; pointer-events: none; }
+/* Typing, a text field focused (shell.js sets :root.typing). Only a phone changes: the + hides, so it never sits over the keyboard's field; wider screens keep it as it is. */
+@media (max-width: 699px) {
+  :root.typing .fab { display: none; }
+  /* The board page bottom bar hides too; --app-bottom stays, so the page does not move. */
+  :root.typing body > .top, :root.typing body.has-sidebar > :not(.sidebar) > .top { display: none; }
+}
 
 .settings-modal { position: fixed; inset: max(12px, env(safe-area-inset-top)) 0 calc(12px + max(var(--kb, 0px), var(--app-bottom, 0px))); margin: auto; width: min(680px, calc(100% - 24px));
   height: fit-content; max-width: none; max-height: max(120px, calc(var(--vh, 100dvh) - max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px))) - 24px - env(safe-area-inset-top)));
@@ -876,6 +889,9 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
 .reader-row.sys, .reader-row.out { color: var(--muted); font-size: 12.5px; }
 .reader-row.out { padding-left: 28px; font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
 .reader-row.tool { font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.reader-row.call { cursor: pointer; }
+.reader-caret { display: inline-block; width: 10px; margin-right: 4px; color: var(--muted); }
+.reader-out { margin: 2px 14px 4px 28px; padding: 6px 8px; border-left: 2px solid var(--line); color: var(--muted); font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
 .reader-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: var(--chip); color: var(--accent); font-size: 11px; }
 .reader-raw, .reader-text { margin: 0; padding: 2px 14px 8px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
 .reader-md { padding: 4px 16px 12px; overflow-wrap: anywhere; line-height: 1.5; }
@@ -924,13 +940,14 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
 .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 .rec-word { color: var(--accent); font-weight: 500; font-size: 12px; margin-left: 4px; }
-.deck-opts small { display: block; color: var(--muted); font-size: 12.5px; }
+.deck-opts .det { color: var(--muted); font-size: 12.5px; font-weight: 400; }
 .deck-prompt { margin: 0; padding: 0; list-style: none; }
 .deck-prompt li.prompt { padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
 .deck-acts { display: flex; flex-wrap: wrap; gap: 8px; }
 .deck-bar { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; }
-.deck-dots { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
+.deck-dots { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
 .deck-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
 .deck-dots i.on { background: var(--color-notice); }
 .deck-bar button { border-radius: 999px; padding: 5px 12px; font-size: 13px; }
@@ -949,12 +966,33 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
   .view-board .fab { right: calc(50% - var(--sidebar-w, 0px) / 2 + var(--fab-edge)); }
   body.has-sidebar { --sidebar-w: 272px; }
   html.sb-collapsed body.has-sidebar { --sidebar-w: 0px; }
-  .needs-pane { display: block; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 0; border-left: 1px solid var(--line); }
+  .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; }
   .needs-pane .needs-questions:has(.q-empty), .needs-pane .needs-questions:has(.q-empty) main, .needs-pane #page:has(.q-empty), .needs-pane .q-empty { flex: 1; min-height: 0; }
   .needs-pane .waiting { margin: 0 0 12px; }
+  .needs-pane * { min-width: 0; overflow-wrap: anywhere; }
+  .needs-pane pre, .needs-pane code { white-space: pre-wrap; }
+  .needs-pane :is(.deck-opts, .row, .actions, .btns) { flex-wrap: wrap; }
+  /* A prototype in the pane (app-needs.js openViewer): a top bar over the framed page, whose footer ends the pane; ⤢
+     (.widened) lays the pane over the lanes, from the sidebar's edge. */
+  .needs-pane.viewing { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
+  .needs-pane.viewing > :not(.pane-viewer) { display: none; }
+  .needs-pane.viewing.widened { position: fixed; top: 56px; left: var(--sidebar-w, 0px); right: 0; bottom: 0; height: auto; z-index: 7; border-left: 0; background: var(--bg); }
+  .pane-viewer { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+  .pv-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
+  .pv-top .pv-grow { flex: 1; }
+  .pv-top button { min-height: 36px; border-radius: 8px; font-weight: 600; }
+  .pv-top .pv-back { border: 0; background: transparent; color: var(--text); padding: 6px 8px; }
+  .pv-top .pv-back:hover { background: var(--line); }
+  .pv-top .pv-widen { width: 36px; padding: 0; font-size: 17px; }
+  .pv-top .pv-widen[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
+  .pv-top .ps-chip { border-radius: 999px; padding: 0 14px; }
+  .pv-frame { flex: 1; min-height: 0; width: 100%; border: 0; display: block; background: var(--panel); }
+  .pane-viewer .ps-sheet { position: absolute; left: 8px; right: 8px; top: 56px; z-index: 2; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
+  .pane-viewer .ps-sheet h3 { margin: 0 0 6px; font-size: 14px; }
+  .pane-viewer .ps-sheet button { display: flex; justify-content: space-between; gap: 12px; width: 100%; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); padding: 10px 2px; text-align: left; }
+  .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); }
-.msg.calls.status-fold summary .fold-log { margin-left: 6px; color: var(--accent); text-decoration: underline; }

package/board/public/ui-cards.js

@@ -1,6 +1,6 @@
 // Work card renderers: the lines and chips of a card in a lane, on the board page. Needs ui.js, ui-enums.js and ui-progress-bar.js.
 (function () {
-  const { esc, escText, ago, lasted, clock, cardTime, etaLine, workingLine, thinkingLine, isPaused, PAUSED, badge, bumpButton, cardBumpButton, editButton, withdrawButton, BUTTON, ACTION_KIND, BUILDER_KIND, PR_STATE, LINK_ARROW, progressBar } = globalThis.BoardUI;
+  const { esc, escText, ago, lasted, clock, cardTime, etaLine, workingLine, thinkingLine, isPaused, PAUSED, badge, bumpButton, cardBumpButton, editButton, withdrawButton, BUTTON, ACTION_KIND, BUILDER_KIND, PR_STATE, PHASES, LINK_ARROW, progressBar } = globalThis.BoardUI;
   const EXTERNAL = { target: '_blank', rel: 'noopener' };
   // The PR badge is the one place a PR's state shows: its mark and tone, marked like the reviewer and CI chips, and its
   // title (docs/adr/2026-11-03-1843-a-merged-card-reopens-and-its-pr-badge-shows-the-prs-state.md). A card with several PRs shows a
@@ -68,7 +68,7 @@
   function blockedWords(it) {
     const deps = it.blockedBy || [];
     const waits = it.bumpedAt && !it.held;
-    const refs = deps.map((d, i) => `<a class="card-blocked" href="#item=${encodeURIComponent(d.key)}">${i ? '' : waits ? 'waits on ' : 'blocked by '}${esc(d.ref)}</a>`).join('<span class="sep">, </span>');
+    const refs = deps.map((d, i) => `<a class="card-blocked" href="#selectedCard=${encodeURIComponent(d.key)}">${i ? '' : waits ? 'waits on ' : 'blocked by '}${esc(d.ref)}</a>`).join('<span class="sep">, </span>');
     const until = it.blockedUntil ? `${deps.length ? ' and until' : waits ? 'waits until' : 'blocked until'} ${it.blockedUntil}` : '';
     const tail = until + (it.blockReason && (refs || until) ? `, ${it.blockReason}` : '');
     return refs + (tail ? `<span class="card-blocked">${esc(tail)}</span>` : '');
@@ -99,7 +99,7 @@
     if (!t) return null;
     const words = tryWords(t.kind);
     if (t.state === 'running') return { tone: 'notice', html: spinner + esc(words.going), attrs: { role: 'status' } };
-    if (t.state === 'failed') return { tone: 'danger', html: `${esc(words.failed)} ${LINK_ARROW}`, href: `#item=${encodeURIComponent(it.key)}`,
+    if (t.state === 'failed') return { tone: 'danger', html: `${esc(words.failed)} ${LINK_ARROW}`, href: `#selectedCard=${encodeURIComponent(it.key)}`,
       title: 'The build script stopped with an error. Tap for its log in the card’s thread.', attrs: { 'data-try-log': it.key } };
     if (t.state !== 'ready' || !t.url) return null;
     return { tone: t.stale ? 'quiet' : 'ready', html: `${esc(words.done)}${t.stale ? ' (stale)' : ''} ${LINK_ARROW}`, href: t.url,
@@ -172,23 +172,15 @@
   // Five bars at the end of an In Progress card's time row: reached phases filled, a running one marked. The phases are
   // store.mjs PHASES (docs/adr/2026-11-03-0128-a-builder-status-line-is-a-phase-and-a-short-detail.md,
   // docs/adr/2026-11-03-1519-a-building-cards-phase-bars-end-its-time-row.md).
-  const BUILD_PHASES = ['reading', 'building', 'testing', 'checking', 'landing'];
+  const BUILD_PHASES = PHASES.progress;
   const stepWords = (phase) => `step ${BUILD_PHASES.indexOf(phase) + 1} of ${BUILD_PHASES.length}`;
   const ALL_DONE = `all ${BUILD_PHASES.length} steps done`;
-  // A card's progress bar (ui-progress-bar.js), or null off In Progress and on a card only a planner works on: how many
-  // phases it reached, which of them is running, whether it dims because the card waits on something other than a builder (its
-  // questions, a blocker or queue, a reopening) or its build is stale, and its label. An install is no build: its card keeps the phase its
-  // build reached, undimmed
-  // (docs/adr/2026-11-03-2024-every-in-progress-card-shows-its-phase-bars.md).
-  // A Todo card a grill or prototype runs on draws the planner's dashes instead, in Todo's grey, the grill's first and the
-  // prototype's second running (docs/adr/2026-11-04-2300-each-lane-is-a-queue-for-the-orchestrator.md,
-  // docs/adr/2026-11-06-0145-every-run-takes-its-lanes-colour.md).
+  // A card's progress bar (ui-progress-bar.js), In Progress's phase, or null off In Progress and on a card only a planner
+  // works on: how many phases it reached, which of them is running, whether it dims because the card waits on something
+  // other than a builder (its questions, a blocker or queue, a reopening), its build is stale or paused, and its label. An install
+  // is no build: its card keeps the phase its build reached, undimmed
+  // (docs/adr/2026-11-03-2024-every-in-progress-card-shows-its-phase-bars.md, docs/adr/2026-11-11-1200-every-lane-has-phases.md).
   function phaseStrip(it) {
-    if (it.lane === 'todo' && it.builder?.planner) {
-      const prototype = it.builder.kind === 'prototype';
-      const done = prototype ? 2 : 1;
-      return { count: BUILD_PHASES.length, done, now: done - 1, tone: 'in-todo', label: prototype ? 'Prototyping' : 'Grilling' };
-    }
     if (it.lane !== 'progress' || it.builder?.planner) return null;
     const all = BUILD_PHASES.length;
     // Orchestrator review is the checking phase, before landing (docs/adr/2026-11-04-2130-the-hub-launches-every-agent-from-the-card.md).
@@ -199,7 +191,7 @@
     const name = (phase) => `${phase[0].toUpperCase()}${phase.slice(1)}`;
     if (it.builder && it.builder.kind !== BUILDER_KIND.install) {
       const done = BUILD_PHASES.indexOf(it.builder.phase) + 1;
-      return { count: all, done, now: done ? done - 1 : undefined, dim: asking || Boolean(it.builder.stale || it.builder.quiet), label: `${done ? `${name(it.builder.phase)}, ${stepWords(it.builder.phase)}` : 'Starting, no step yet'}${answers}` };
+      return { count: all, done, now: done ? done - 1 : undefined, dim: asking || Boolean(it.builder.stale || it.builder.quiet || it.builder.pause?.paused), label: `${done ? `${name(it.builder.phase)}, ${stepWords(it.builder.phase)}` : 'Starting, no step yet'}${answers}` };
     }
     const dim = !it.builder || asking;
     if (it.reopened) return { count: all, done: all, dim, label: `Reopened, ${ALL_DONE}${answers}` };
@@ -236,16 +228,16 @@
     if (it.builder.stopped) return `<div class="${classes}">${esc(builderLine(it.builder))}</div>`;
     return `<div class="${classes}">${quiet ? '' : DOT}${esc(builderLine(it.builder))}</div>`;
   }
-  // The open card's Status row: what runs on the card, else where its lane leaves it, never the wave file's raw status
+  // The open card's Status row: what runs on the card, else where its lane leaves it, never the item file's raw status
   // (docs/adr/2026-11-05-0410-a-card-status-word-comes-from-a-signal-the-board-checks.md).
   function statusWord(it) {
     const b = it.builder;
     if (b?.planner) return b.kind === 'prototype' ? 'prototyping' : 'grilling';
-    if (b && b.kind !== BUILDER_KIND.install) return b.stopped || (b.alive === false ? 'stopped' : b.phase === 'landing' ? 'landing' : 'implementing');
+    if (b && b.kind !== BUILDER_KIND.install) return b.stopped || (b.pause ? (b.pause.paused ? 'paused' : 'pausing') : b.alive === false ? 'stopped' : b.phase === 'landing' ? 'landing' : 'implementing');
     if (it.waitsOn === 'checking') return 'Orchestrator review';
     if (it.lane === 'done') return 'done';
     if (it.grilling || it.prototyping) return 'preheating';
-    if (it.lane === 'todo') return it.staging ? 'staging' : it.ready ? 'ready' : 'to do';
+    if (it.lane === 'todo') return it.phase && (it.ready || it.phase !== 'ready') ? PHASE_LOOK[it.phase][0] : 'to do';
     if (it.lane === 'progress') return it.reachedPhase ? `stopped at ${it.reachedPhase}` : 'in progress';
     return 'in review';
   }
@@ -267,17 +259,41 @@
       : `Held until ${d.toLocaleDateString([], { weekday: 'short', month: 'numeric', day: 'numeric' })}, ${clock(d)}. ${it.lane === 'todo' ? 'It starts on its own then, once nothing else blocks it.' : 'Claude picks it up again then.'}`;
     return `<span class="card-hold" title="${esc(title)}">${esc(d ? `held until ${heldUntilWords(it.heldUntil)}` : 'held')}</span>`;
   }
+  // docs/adr/2026-11-11-1200-every-lane-has-phases.md
+  // A Todo, In Review or Done card's phase as a word, toned by who acts next: grey while a machine waits, blue while
+  // Claude works, orange while it waits on the owner, green once it can go and purple once merged. In Progress shows its
+  // phase only as its progress bar, and a card In Review for an owner wait other than the merge has none. Ready reads
+  // only on a card that can start (domain.mjs ready), so a blocked one shows what blocks it instead.
+  const PHASE_LOOK = {
+    new: ['new', 'quiet'], grilling: ['grilling', 'info'], prototyping: ['prototyping', 'info'], staging: ['staging', 'notice'], ready: ['ready', 'success'],
+    draft: ['draft', 'quiet'], reviewers: ['pending review', 'notice'], merge: ['pending merge', 'notice'], stale: ['stale', 'quiet'],
+    merged: ['merged', 'merged'], closed: ['closed', 'quiet'],
+  };
+  function phaseWord(it) {
+    if (it.kind !== 'work' || it.lane === 'progress' || !it.phase || (it.phase === 'ready' && !it.ready)) return '';
+    const [word, tone] = PHASE_LOOK[it.phase];
+    return `<span class="card-phase ph-${tone}">${word}</span>`;
+  }
+  // docs/adr/2026-11-09-1300-a-card-pause-stops-its-builder-at-its-next-stopping-point.md
+  // A paused build's word and cause, which stand in for the hold or block that caused it: "pausing · blocked by #61" in
+  // orange while its builder runs on to its stopping point, then "paused · blocked by #61" in grey.
+  const pauseOf = (it) => (it.lane === 'progress' ? it.builder?.pause ?? null : null);
+  const pauseWords = (pause) => pause && `<span class="card-${pause.paused ? 'paused' : 'pausing'}">${pause.paused ? 'paused' : 'pausing'} · ${esc(pause.words)}</span>`;
   // A card's last line: the time its lane sorts by (domain.mjs sortAt), then its hold, what blocks it, then Action needed,
-  // staging in orange or ready in green (docs/adr/2026-11-07-0700-staging-then-ready.md), stalled in red or stale in grey
-  // (docs/adr/2026-11-06-1252-stale-is-automatic-stalled-is-the-orchestrators-flag.md), then an In Progress card's phase bars, then its unread messages, new questions counting as one, which app-cards.js
+  // held while host recovers on a bumped ready card a busy host holds, in grey
+  // (docs/adr/2026-11-06-1700-a-bump-marks-the-priority-through-every-lane.md), stalled in red or a build's stale
+  // in grey (docs/adr/2026-11-06-1252-stale-is-automatic-stalled-is-the-orchestrators-flag.md), a stale review reading it
+  // once, as its phase, then the phase word (phaseWord), then a paused build's words (pauseWords), then an In Progress card's phase bars, then its unread messages, new questions counting as one, which app-cards.js
   // takes away when the card opens (docs/adr/2026-11-04-0247-a-builder-asks-the-orchestrator-mid-build.md,
   // docs/adr/2026-11-03-0516-a-new-card-is-ready-grilling-or-prototyping.md, docs/adr/2026-11-03-1519-a-building-cards-phase-bars-end-its-time-row.md).
   const SEP = '<span class="sep"> · </span>';
   const newWords = (n, word) => n && `${n} new ${word}${n === 1 ? '' : 's'}`;
   function timeLine(it, unread, bars) {
     const iso = it.sortAt;
-    const parts = [iso && `<time datetime="${esc(iso)}">${esc(cardTime(iso))}</time>`, holdWords(it), blockedWords(it), actionWords(it), it.staging && '<span class="card-staging">staging</span>', it.ready && '<span class="card-ready">ready</span>',
-      it.stalled ? '<span class="card-stalled">stalled</span>' : it.stale && '<span class="card-stale">stale</span>'].filter(Boolean);
+    const pause = pauseOf(it);
+    const parts = [iso && `<time datetime="${esc(iso)}">${esc(cardTime(iso))}</time>`, pause?.cause !== 'held' && holdWords(it), pause?.cause !== 'blocked' && blockedWords(it), actionWords(it),
+      it.hostHeld && '<span class="card-host-held">held while host recovers</span>',
+      it.stalled ? '<span class="card-stalled">stalled</span>' : it.stale && it.phase !== 'stale' && '<span class="card-stale">stale</span>', phaseWord(it), pauseWords(pause)].filter(Boolean);
     const news = newWords(unread, 'message');
     const count = news ? `<span class="card-unread">${parts.length || bars ? SEP : ''}${news}</span>` : '';
     const tail = bars ? `${parts.length ? SEP : ''}${bars}` : '';
@@ -285,7 +301,7 @@
     return `<div class="line6 sub card-time">${parts.join(SEP)}${tail}${count}</div>`;
   }
   // The Hold sheet's picker (app-cards.js): /api/board's holdChoices, the chips hub/duration.mjs shares with Snooze and
-  // Keep awake, then Custom. Its .hub-view root takes hub.css's duration picker rules, which view-hub-settings.js
+  // Pause hub, then Custom. Its .hub-view root takes hub.css's duration picker rules, which view-hub-settings.js
   // durationPicker's markup also uses. Each chip's length (ms, null for Forever) is worded as when it would end if picked
   // at `now`, here rather than on the server, so the board's version doesn't change with the clock
   // (docs/adr/2026-11-04-0128-the-board-download-leaves-out-resolved-questions.md).
@@ -296,7 +312,7 @@
       + `<div class="dur-custom"><span class="btn quiet" aria-hidden="true">Custom</span><input type="datetime-local" data-hold-at="${esc(key)}" required aria-label="Custom hold until a date and time"></div></div></div>`;
   }
   // A New card's bump, edit and delete, and its line from its ask state (domain.mjs askItem;
-  // docs/adr/2026-10-29-1639-the-plus-makes-a-new-card.md). top is whether it is the latest bump.
+  // docs/adr/2026-10-29-1639-the-plus-makes-a-new-card.md). top is whether it is bumped already.
   const askActions = (it, top) => `<div class="ask-actions">${bumpButton(it, top)}${it.ask.canEdit ? editButton(it.id) : ''}${withdrawButton(it.id)}</div>`;
   // A card waiting on its owner step has the owner's Done where the bump sits: a check icon that confirms, then sends
   // card-done (app-cards.js; docs/adr/2026-11-04-0158-a-card-whose-code-landed-stays-in-review-while-an-owner-step-remains.md).
@@ -304,15 +320,18 @@
   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, top) => (it.isNew ? askActions(it, top) : it.ownerStep ? `<div class="ask-actions">${ownerDoneButton(it)}</div>`
     : it.bumpable ? `<div class="ask-actions">${cardBumpButton(it.key, Boolean(it.bumpedAt))}</div>` : '');
-  const askLine = (ask) => [ask.from && `Moved from ${esc(ask.from)}`, ask.edited && 'Edited', ask.state === 'working' && thinkingLine()].filter(Boolean).join(' · ');
-  // In a wave band (app-lanes.js), step is the number of the card's phase in its wave, shown inside its id chip, and actions replace
-  // its bump with the band's ⋯ menu.
-  function workLines(it, { unread = 0, top = false, step = 0, actions = null } = {}) {
+  // 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>';
+  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, top = false } = {}) {
     const ticket = it.ticket ? ticketChip(it) : it.ticketSource === 'linear' ? linearChips(it) : it.internal ? badge('quiet', esc(it.ref), { title: 'Work on this site, not a product PR' }) : linearChips(it);
-    // A work card always shows its ticket; New is only on an ask (askChip).
-    const chip = step ? ticket.replace(/^<[^>]*>/, (open) => `${open}<span class="wn">${step}</span>`) : ticket;
-    const ids = it.kind === 'ask' ? askChip(it) : chip;
+    // A work card always shows its ticket; an ask, which has none, shows New or Ask there (askChip).
+    const ids = it.kind === 'ask' ? askChip(it) : ticket;
     const chips = `${prChips(it)}${reviewChips(it)}${it.risky ? badge('notice', 'risky') : ''}${installChip(it)}`;
+    // A handled ask's asked time sits under its title, since its Ask badge holds the ticket's spot
+    // (docs/adr/2026-11-10-1200-an-ask-is-titled-in-place-and-wears-an-ask-badge.md).
+    const asked = it.kind === 'ask' && !it.isNew ? `<div class="line3 sub">asked ${esc(cardTime(it.ask.askedAt))}</div>` : '';
     const status = it.isNew && !it.action ? (askLine(it.ask) && `<div class="line3 sub">${askLine(it.ask)}</div>`)
       : it.orchestrator && !it.builder ? `${it.rebaseFailed ? `<div class="line3 sub">${escText(it.rebaseFailed)}</div>` : ''}${orchestratorStatus(it)}`
       : it.waitsOn === 'checking' ? `<div class="line3 sub agent${tone(it)}">${DOT}Orchestrator review</div>`
@@ -326,13 +345,13 @@
     // The owner step's code check, which closes the card when it passes (docs/adr/2026-11-04-2308-an-owner-step-can-carry-a-code-check.md).
     const check = !it.ownerCheck ? '' : it.ownerCheck.broken ? `<div class="line3 sub refused">${escText(`Check can't run: ${it.ownerCheck.broken}`)}</div>`
       : `<div class="line3 sub check">${escText(`Checks: ${it.ownerCheck.words}`)}</div>`;
-    return `${actions ?? cardActions(it, top)}<div class="line1 title">${ids ? `${ids} ` : ''}${escText(it.title)}</div>
-      ${status}${check}${eta}
+    return `${cardActions(it, top)}<div class="line1 title">${ids ? `${ids} ` : ''}${escText(it.title)}</div>
+      ${asked}${status}${check}${eta}
       ${chips ? `<div class="line2 meta">${chips}</div>` : ''}
       ${timeLine(it, unread, progressBar(phaseStrip(it)))}`;
   }
   const WAVE_ICON = '<svg class="wave-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9c2.5-3 5-3 7.5 0s5 3 7.5 0 3.5-3 5-1.5"/><path d="M2 16c2.5-3 5-3 7.5 0s5 3 7.5 0 3.5-3 5-1.5"/></svg>';
-  const askChip = (it) => (it.isNew ? badge('notice', 'New') : '');
+  const askChip = (it) => (it.isNew ? badge('notice', 'New') : badge('quiet', 'Ask'));
   function planButton(items) {
     const keys = items.filter((i) => i.kind === 'work' && !i.held && !i.blocked).map((i) => i.key);
     return keys.length > 1 ? `<button type="button" class="thread-more" data-plan="${esc(keys.join(' '))}"${BoardUI.pending.has('todo:plan') ? BoardUI.BUSY : ''}>Plan waves</button>` : '';

package/board/public/ui-enums.js

@@ -7,5 +7,14 @@
   const ACTION_KIND = Object.freeze({ pick: 'pick', questions: 'questions', ready: 'ready', steps: 'steps', merge: 'merge', done: 'done', stalled: 'stalled' });
   const BUILDER_KIND = Object.freeze({ install: 'install' });
   const PR_STATE = Object.freeze({ open: 'open', draft: 'draft', merged: 'merged', closed: 'closed' });
-  Object.assign(globalThis.BoardUI ||= {}, { BUTTON, ACTION_KIND, BUILDER_KIND, PR_STATE });
+  // Each lane's phases, in order, which a card stores beside its lane (docs/adr/2026-11-11-1200-every-lane-has-phases.md).
+  // In Progress's are the five build steps its progress bar draws; a review's "reviewers" and "merge" read "pending review"
+  // and "pending merge" on the card (ui-cards.js PHASE_LOOK).
+  const PHASES = Object.freeze({
+    todo: Object.freeze(['new', 'grilling', 'prototyping', 'staging', 'ready']),
+    progress: Object.freeze(['reading', 'building', 'testing', 'checking', 'landing']),
+    review: Object.freeze(['draft', 'reviewers', 'merge', 'stale']),
+    done: Object.freeze(['merged', 'closed']),
+  });
+  Object.assign(globalThis.BoardUI ||= {}, { BUTTON, ACTION_KIND, BUILDER_KIND, PR_STATE, PHASES });
 })();

package/board/public/ui-hub.js

@@ -68,10 +68,6 @@
       + `<p class="u-share-desc">${off ? 'Off: work keeps going until usage runs out.' : `Claude’s new work waits when either window passes this, and resumes at that window’s reset; Codex hands its work to ${builder} implementers.`}</p></div>`;
   }
 
-  // What polling does now, the last and next check and the queue, with Send now: hub/views.mjs pollingNow's words.
-  const nowRow = (now, icon = '') => row({ icon, title: esc(now.title), sub: now.lines.map((l) => `<span class="sub wrap">${esc(l)}</span>`).join(''),
-    trail: `<form method="post" action="/_hub/push/flush"><button class="btn quiet" ${now.count ? '' : 'disabled'}>Send now</button></form>` });
-
   // This device's notifications (hub-kit.js device): state is {title, sub, action: {label, act, quiet, busy}} or null
   // while unknown, which keeps the row hidden. A busy action waits (ui.js BUSY) while it turns on or tests.
   function deviceRow(state, { compact = false } = {}) {
@@ -122,5 +118,5 @@
     return `<section class="usage"><h2 class="label" style="margin-top:4px">Usage</h2><div class="group">${blocks}${buffer}</div></section>`;
   }
 
-  globalThis.HubUI = { esc, TILE_PATHS, tile, CHEVRON, row, flash, holdBanner, pauseBanner, machineRow, nowRow, deviceRow, usageCard };
+  globalThis.HubUI = { esc, TILE_PATHS, tile, CHEVRON, row, flash, holdBanner, pauseBanner, machineRow, deviceRow, usageCard };
 })();

package/board/public/ui-links.js

@@ -14,21 +14,21 @@
   // from its ref, to its card's key, the issue url prefix of each Linear team the board's cards link to (none on a
   // board without a workspace), that item's repo for a bare #n that is no card's ref, and `base`, which a page other
   // than the board sets to './' so a card link opens the board. A ref shaped like a Linear id, such as INT-<n>, or a
-  // ticket #n links from anywhere; a wave's own short id, such as B1, links only from that wave's cards, since a plan
-  // for another wave reuses those names.
+  // ticket #n links from anywhere; an item file's own short id, such as B1, links only from that file's cards, since
+  // another item file's plan reuses those names.
   function linkContext(items = [], key = null, { base = '' } = {}) {
-    const wave = key && !key.startsWith('ask:') ? key.slice(0, key.indexOf('/')) : null;
+    const file = key && !key.startsWith('ask:') ? key.slice(0, key.indexOf('/')) : null;
     const byRef = new Map();
     for (const i of items) {
       if (i.kind === 'ask') continue;
       for (const ref of new Set([i.ref, i.id])) {
-        if (!ref || (!LINEAR_ID.test(ref) && !ISSUE.test(ref) && i.wave !== wave)) continue;
+        if (!ref || (!LINEAR_ID.test(ref) && !ISSUE.test(ref) && i.file !== file)) continue;
         byRef.set(ref, [...(byRef.get(ref) || []), i]);
       }
     }
     const refs = Object.create(null);
     for (const [ref, list] of byRef) {
-      const pick = list.length === 1 ? list[0] : list.find((i) => i.wave === wave);
+      const pick = list.length === 1 ? list[0] : list.find((i) => i.file === file);
       if (pick) refs[ref] = pick.key;
     }
     const teams = Object.create(null);
@@ -68,7 +68,7 @@
     return anyLink(url, url) + esc(raw.slice(url.length));
   }
 
-  const cardLink = (ref, ctx) => `<a href="${esc(`${ctx.base || ''}#item=${encodeURIComponent(record(ctx.refs, ref))}`)}">${esc(ref)}</a>`;
+  const cardLink = (ref, ctx) => `<a href="${esc(`${ctx.base || ''}#selectedCard=${encodeURIComponent(record(ctx.refs, ref))}`)}">${esc(ref)}</a>`;
 
   // The longest hyphen-prefix of a word that is a known ref or a Linear id, then the rest as text.
   function wordLink(word, ctx) {

package/board/public/ui-order.js

@@ -4,20 +4,22 @@
 // Needs nothing else: board/domain.mjs runs this file in a vm context.
 (function () {
   const LANE_ORDER = { review: 0, progress: 1, todo: 2, done: 3, asks: 4 };
-  // Todo lists bumped cards first, the latest bump on top, a bumped New ask included
-  // (docs/adr/2026-10-29-1639-a-card-that-hasnt-started-can-be-bumped.md); then the rest oldest first by sortAt, a card with no
-  // time last, the first added to its wave file on top, so a New ask and every new card join the bottom and the pull takes the
+  // Every lane but Done lists bumped cards first, the earliest bump on top, a bumped New ask included
+  // (docs/adr/2026-10-29-1639-a-card-that-hasnt-started-can-be-bumped.md,
+  // docs/adr/2026-11-06-1700-a-bump-marks-the-priority-through-every-lane.md). Todo lists the rest oldest first by sortAt, a card with no
+  // time last, the first added to its item file on top, so a New ask and every new card join the bottom and the pull takes the
   // top ready card (docs/adr/2026-11-05-2345-new-todo-cards-join-the-bottom.md,
   // docs/adr/2026-11-06-0300-a-new-task-lands-at-the-bottom-of-todo-and-flashes-blue.md). Every other
-  // lane lists its cards newest first by sortAt, a card with no time last, the last added to its wave file on top.
+  // lane lists its cards newest first by sortAt, a card with no time last, the last added to its item file on top.
+  // Present times first, the earliest on top.
+  const earliest = (x, y) => (x ? 0 : 1) - (y ? 0 : 1) || String(x || '').localeCompare(String(y || ''));
   function laneOrder(a, b) {
-    const bumped = (i) => i.bumpedAt || '';
     const at = (i) => String(i.sortAt || '');
     const oldestFirst = a.lane === 'todo';
     const timeless = (i) => (at(i) ? 0 : 1);
     const age = oldestFirst ? timeless(a) - timeless(b) || at(a).localeCompare(at(b)) : at(b).localeCompare(at(a));
     const added = a.lane !== 'todo' ? b.order - a.order : a.order - b.order;
-    return LANE_ORDER[a.lane] - LANE_ORDER[b.lane] || bumped(b).localeCompare(bumped(a)) || age || added || a.key.localeCompare(b.key);
+    return LANE_ORDER[a.lane] - LANE_ORDER[b.lane] || earliest(a.bumpedAt, b.bumpedAt) || age || added || a.key.localeCompare(b.key);
   }
   Object.assign(globalThis.BoardUI ||= {}, { laneOrder });
 })();

package/board/public/ui-progress-bar.js

@@ -1,19 +1,18 @@
-// The progress bar every bar on the board draws from: an In Progress card's five build phases and a Todo card's planner
-// dashes (ui-cards.js), and a starting board's three start steps (ui-sidebar.js)
+// The progress bar every bar on the board draws from: an In Progress card's five build phases (ui-cards.js), and a
+// starting board's three start steps (ui-sidebar.js)
 // (docs/adr/2026-11-06-0038-a-progress-bar-pulses-one-step-at-a-time.md). It needs nothing else, since hub/hub.mjs
 // renders the shell's first sidebar with it in a vm context. style.css draws the bars.
 (function () {
   const esc = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
-  // {count, done, now, percent, dim, tone, label}, or null for no bar. done counts the steps reached, filled; now is the
+  // {count, done, now, percent, dim, label}, or null for no bar. done counts the steps reached, filled; now is the
   // index of the one step still running, which pulses, so no bar can draw two. percent fills the step after the done
-  // ones that far. A dim bar draws its running step filled, without the pulse. tone is a lane class, 'in-todo' drawing it in
-  // Todo's grey; with none it is In Progress's orange.
+  // ones that far. A dim bar draws its running step filled, without the pulse.
   function progressBar(bar) {
     if (!bar) return '';
-    const { count, done, now, percent, dim, tone, label } = bar;
+    const { count, done, now, percent, dim, label } = bar;
     const step = (i) => (i === now ? `<i class="${dim ? 'done' : 'now'}"></i>` : i < done ? '<i class="done"></i>'
       : i === done && percent !== undefined ? `<i class="fill" style="--p:${percent}%"></i>` : '<i class=""></i>');
-    return `<span class="phase-bars${dim ? ' dim' : ''}${tone ? ` ${tone}` : ''}" role="img" aria-label="${esc(label)}" title="${esc(label)}">${Array.from({ length: count }, (_, i) => step(i)).join('')}</span>`;
+    return `<span class="phase-bars${dim ? ' dim' : ''}" role="img" aria-label="${esc(label)}" title="${esc(label)}">${Array.from({ length: count }, (_, i) => step(i)).join('')}</span>`;
   }
   // Every pulse on the page beats on one clock: each one that starts is set to the document timeline's origin, so a
   // card's running step and its status dot blink together, and a redraw that draws a new copy never restarts the beat.