@lovek4d/kickflip 0.5.0 → 0.5.3

package/board/public/style.css

@@ -163,6 +163,11 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
 .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; }
+.wb-counts .wv-cur { font-weight: 700; color: var(--accent); }
+.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); }
@@ -202,10 +207,12 @@ code { overflow-wrap: anywhere; }
 /* 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): 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. */
+/* 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. */
 .dz { position: relative; clear: both; border-radius: 8px; }
-.dz > textarea { display: block; }
+.dz > textarea { display: block; padding-bottom: 40px; }
+.dz > .attach { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; z-index: 1; }
 .dz-hint { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; border-radius: 8px; pointer-events: none;
   background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--accent); font-weight: 600; font-size: 15px; }
 [data-composer].dragging .dz { outline: 2px dashed var(--accent); outline-offset: 3px; }
@@ -232,7 +239,6 @@ code { overflow-wrap: anywhere; }
 .msg .body:empty { display: none; }
 .note-tools { display: flex; align-items: flex-start; gap: 6px; }
 .note-tools .pending-files { flex: 1; margin-top: 4px; }
-.note-tools .attach { margin-top: 2px; }
 
 /* Compose button and sheet */
 main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
@@ -324,7 +330,19 @@ main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
 @media (prefers-reduced-motion: no-preference) { .working-dot { animation: pulse 1.4s ease-in-out infinite; } }
 form[data-reply] .row .quick { margin-left: auto; margin-right: 6px; }
 form[data-reply] .row [data-confirm="finish"] { margin-right: 6px; }
-.q .proto { display: inline-block; margin: 0 0 8px; }
+/* 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 { min-height: 44px; }
+form[data-reply] .row { flex-wrap: wrap; }
+form[data-reply] .row > .send-actions { flex: 0 0 100%; margin-top: 4px; }
+.key-hint { display: none; font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; }
+button.primary .key-hint { color: color-mix(in srgb, var(--on-accent) 62%, transparent); }
+@media (hover: hover) and (pointer: fine) and (min-width: 600px) { .key-hint { display: inline; } }
+#askStatus { margin: 6px 2px 0; }
+#askStatus:empty { display: none; }
+.q .proto-view { display: inline-block; margin: 0 0 10px; color: var(--accent); }
 .msg .ask-actions { margin: -4px -6px 0 8px; }
 button.attach { border: 0; background: transparent; padding: 0; }
 button.attach:disabled { opacity: .35; }
@@ -348,10 +366,17 @@ button.attach:disabled { opacity: .35; }
 @media (prefers-reduced-motion: no-preference) { .phase-bars:not(.dim) i.now { animation: pulse-fill 1.4s ease-in-out infinite; } }
 /* A stale build's status line, dot included, is the needs-you red, and a tap on it nudges Claude (ui-cards.js builderStatus). */
 /* A status line that is a button is drawn as the div it replaces: this one reset, then only a colour per state. The font
-   shorthand stays out so .sub's 12px wins. */
-button.sub { display: block; width: 100%; margin-inline: 0; margin-bottom: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none;
+   shorthand stays out so .sub's 12px wins. It sets no width: a button is its own block formatting context, so a full-width one
+   drops below the bump icons' float instead of sitting beside it as the div's line box does (board/layout.test.mjs). */
+button.sub { display: block; margin-inline: 0; margin-bottom: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none;
   font-family: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; appearance: none; -webkit-appearance: none; }
 button.sub.agent.stalled { color: var(--color-danger); }
+/* A tap on it calms the line to the in-progress orange, its dot sending a ripple, until the card's next status line (app-cards.js nudge). */
+button.sub.agent.stalled.nudging { color: var(--color-notice); cursor: default; }
+.nudging .working-dot { position: relative; }
+.nudging .working-dot::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; }
+@keyframes nudge-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
+@media (prefers-reduced-motion: no-preference) { .nudging .working-dot::after { animation: nudge-ping 1.1s ease-out infinite; } }
 .stalled .working-dot { background: currentColor; }
 .brand { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; }
 .brand .hub { grid-row: 1 / span 2; align-self: center; }
@@ -375,6 +400,9 @@ button.sub.agent.stalled { color: var(--color-danger); }
 .sub.agent.in-progress { color: var(--color-notice); }
 .sub.agent.in-todo { color: var(--accent); }
 .sub.agent.in-progress .working-dot, .sub.agent.in-todo .working-dot { background: currentColor; }
+/* docs/adr/2026-11-05-0410-a-card-status-word-comes-from-a-signal-the-board-checks.md: a quiet builder and a request no planner
+   has picked up are grey, after the lane colours so they win. */
+.sub.agent.quiet, .sub.asked { color: var(--muted); }
 .phase-bars.plan { --bar-fill: var(--accent); }
 @keyframes pulse-fill-plan { 50% { background-color: color-mix(in srgb, var(--accent) 35%, transparent); } }
 @media (prefers-reduced-motion: no-preference) { .phase-bars.plan:not(.dim) i.now { animation-name: pulse-fill-plan; } }
@@ -400,8 +428,6 @@ button.sub.agent.stalled { color: var(--color-danger); }
 /* The thread's eye and fire are toggles: pressed reads as chosen, and the hint under the box says what Send posts. */
 form[data-reply] .tools { display: inline-flex; flex: none; }
 button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chip); }
-.flag-hint { margin: 4px 2px 0; min-height: 1.2em; color: var(--muted); font-size: 12px; }
-.flag-hint.on { color: var(--accent); }
 /* INT-30: card line order */
 .line6 { margin-top: 4px; }
 .card-time time { font-variant-numeric: tabular-nums; }
@@ -420,6 +446,13 @@ button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chi
 /* Each lane's sort icon and its menu, grey (docs/adr/2026-11-01-1817-colour-says-whos-waiting.md) */
 /* INT-35: offline header */
 .view-board.offline #compose { display: none; }
+/* A board shared with someone else, view only (docs/adr/2026-11-05-2215-a-board-is-shared-view-only-with-a-tailscale-login.md):
+   shell.js marks the page .shared-view, which hides the +, every composer, Board settings, the architecture review and
+   a card's buttons, keeping its links (Visit, Notes, Open questions). */
+.shared-view #compose, .shared-view [data-composer], .shared-view #settingsLink, .shared-view #archBulb,
+.shared-view .actions button, .shared-view button[data-confirm] { display: none !important; }
+.view-only-strip { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; }
+.view-only-strip b { color: var(--accent); }
 .view-board.offline main > * { opacity: .72; }
 .view-board.offline main, .view-board.offline > .top > :not(.nav), .view-board.offline > .top .nav > :not(.refresh) { pointer-events: none; }
 /* INT-28: answer banner */
@@ -530,6 +563,17 @@ 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 .share-now { color: var(--ok); font-weight: 600; }
+.view-settings .share-now::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
+.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 .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); }
+.view-settings .who .sub { display: block; margin-top: 2px; }
 .view-settings .replies .reply { margin-top: 8px; }
 .view-settings label.who { gap: 12px; cursor: pointer; }
 .view-settings label.who .sub { display: block; margin-top: 2px; }
@@ -576,6 +620,8 @@ 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); white-space: normal; text-align: left; overflow-wrap: anywhere; }
 .view-questions .topics button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
+@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; }
 .view-questions .topichead { margin: 2px 0 6px; }
 .view-questions details.done > summary { cursor: pointer; color: var(--muted); font-size: 13px; margin: 16px 0 4px; }
@@ -600,39 +646,24 @@ main > * { transition: opacity .25s ease; }
   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:has(.bar) .fab { bottom: calc(var(--app-bottom, 0px) + var(--fab-edge) + 72px); }
 .view-questions .bar #qstatus { min-width: 0; }
+/* Typing with the keyboard up: one compact row docked on the keyboard, and the + out of the way (view-questions.js dock). */
+.view-questions.kb-up .bar { position: fixed; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 7; padding: 6px 16px; box-shadow: 0 -6px 14px rgba(0,0,0,.12); }
+.view-questions.kb-up .bar .send-hint { display: none; }
 .view-questions .bar #qstatus.sent { color: var(--color-success); font-weight: 600; }
 .view-questions .solo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0; }
 /* docs/adr/2026-11-02-1332-a-prototype-round-ends-with-a-one-take-confirm.md */
 .view-questions .topichead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
 .view-questions .topichead .try-spin { width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; }
-.view-questions .q .pr-open { display: inline-block; margin: 0 0 8px; }
 .view-questions .pr-rule { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
 .view-questions .pr-rule svg { flex: none; }
 
-/* A question's takes sit in as many columns as keep each at least 380px wide, one on a phone; each its option above its
-   preview, and each row's takes top-aligned, since each frame takes its own page's height. */
+/* A question's drawn takes sit in as many columns as keep each at least 380px wide, one on a phone; each its option above
+   its diagram, and each row's takes top-aligned. */
 .view-questions .takes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; align-items: start; margin: 6px 0; }
 .view-questions .take { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 10px; }
 .view-questions .take:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
 .view-questions .take .opt, .view-questions .take .opt:has(input:checked) { border: 0; padding: 0; margin: 0; background: none; }
-/* view-questions.js sets a frame's height to its page's once measured; until then it shows nothing, so a take that turns
-   its question into the full-width layout never flashes cut off. */
-.view-questions .take-shot { position: relative; display: block; margin-top: 8px; height: 360px; border: 1px solid var(--line); border-radius: 10px;
-  overflow: hidden; transition: height .15s ease; }
-.view-questions .take-shot iframe { width: 100%; height: 100%; border: 0; background: var(--bg); }
-.view-questions .take-shot.measuring { transition: none; }
-.view-questions .take-shot.measuring iframe { visibility: hidden; }
-.view-questions .take-shot.measuring::before { content: 'Loading take…'; position: absolute; inset: 0; display: grid; place-items: center;
-  color: var(--muted); font-size: 12.5px; }
-.view-questions:has(.takes-full) main { max-width: none; }
-.view-questions .takes-full { grid-template-columns: minmax(0, 1fr); }
-.view-questions .take-choices { display: flex; flex-wrap: wrap; gap: 8px; }
-.view-questions .take-choices .opt { flex: 1 1 160px; margin: 0; }
-.view-questions .take-choices .opt[aria-current="true"] { border-color: var(--accent); }
-.view-questions .takes-full .take { padding: 0; border: 0; }
-.view-questions .takes-full .take-shot { margin-top: 0; transition: none; }
 
 /* A take with nothing to see: boxes and arrows, then what it means in practice. */
 .view-questions .flow { margin: 10px 0 4px; }
@@ -683,7 +714,7 @@ main > * { transition: opacity .25s ease; }
 .view-frame .alone { white-space: nowrap; font-size: 13px; }
 
 @media (max-width: 899px) {
-  :root:has(body > .top, body.has-sidebar > :not(.sidebar) > .top):not(.ps-embed) {
+  :root:has(body > .top, body.has-sidebar > :not(.sidebar) > .top) {
     --app-bottom: calc(49px + max(4px, env(safe-area-inset-bottom)));
   }
   body > .top, body.has-sidebar > :not(.sidebar) > .top {
@@ -691,7 +722,7 @@ main > * { transition: opacity .25s ease; }
     border-bottom: 0; border-top: 1px solid var(--line); padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom));
   }
   .top .nav #refresh, .top .nav a.icon, .top .nav .arch-bulb { min-width: 44px; min-height: 44px; }
-  body > main, body.has-sidebar > :not(.sidebar) > main { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: calc(96px + var(--app-bottom, 0px) + env(safe-area-inset-bottom)); }
+  body > main, body.has-sidebar > :not(.sidebar) > main, body.has-sidebar > :not(.sidebar) > .split > main { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: calc(96px + var(--app-bottom, 0px) + env(safe-area-inset-bottom)); }
   .view-frame:not(.own-header) { padding-bottom: var(--app-bottom, 0px); }
   .sheet { bottom: max(0px, calc(var(--app-bottom, 0px) - var(--kb, 0px)));
     max-height: calc(var(--vh, 100dvh) + var(--kb, 0px) - max(var(--app-bottom, 0px), var(--kb, 0px)) - env(safe-area-inset-top) - 12px); }
@@ -716,21 +747,18 @@ main > * { transition: opacity .25s ease; }
 .lk-over, .lk-over > main { display: contents; }
 
 .tk-section { margin: 10px 0; }
-/* The Tickets source row's live state, and Hub's key field opened under it (dialogs.js ticketsControl keyState). */
+/* The Tickets source row's live state (dialogs.js ticketsControl keyState). */
 .tk-status { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
 .tk-status b { font-weight: 600; color: var(--text); }
 .tk-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
 .tk-status.on .dot { background: var(--accent); }
 .tk-status.on b { color: var(--accent); }
-.tk-inline { margin: 6px 0 10px; border: 1px solid var(--accent); border-radius: 10px; padding: 8px 10px; background: var(--accent-soft); }
-.tk-inline .tk-ask { margin: 2px 0 6px; font-size: 13px; }
-.tk-inline .hub-view main { padding: 0; }
 .tk-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 8px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--chip); }
 .tk-seg button { min-width: 0; min-height: 44px; padding: 6px 4px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
 .tk-seg button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
-.ask-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 0; }
-.ask-choice-help { margin: 4px 2px 0; }
 .tk-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
+.landing-seg button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; text-align: center; }
+.landing-seg .sub { font-weight: 400; opacity: .8; line-height: 1.25; }
 .tk-grid { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
 @media (min-width: 560px) { .tk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
 .tk-field { display: block; min-width: 0; }
@@ -844,3 +872,46 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
 .rv-links a { color: var(--accent); text-decoration: none; }
 .rv-acts { display: flex; flex-wrap: wrap; gap: 8px; }
 .view-questions .bar #qstatus .try-spin { color: var(--accent); margin-right: 6px; }
+
+/* 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; }
+.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; }
+.deck-head h2 { margin: 0; flex: 1; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-notice); }
+.deck-n { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--color-notice); color: #1c1407; font-size: 12px; font-weight: 700; text-align: center; }
+.deck-card { padding: 2px 14px 12px; min-width: 0; overflow-wrap: anywhere; }
+.deck-what { margin: 0 0 2px; font-size: 12px; color: var(--muted); }
+.deck-card h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; }
+.deck-card h3 a { color: inherit; text-decoration: none; }
+.deck-card .ctx { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
+.deck-proto { margin: 0 0 10px; color: var(--accent); }
+.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 .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-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 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; }
+.deck-more { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 10px 14px; border-top: 1px solid color-mix(in srgb, var(--color-notice) 28%, var(--line));
+  background: color-mix(in srgb, var(--color-notice) 14%, var(--panel)); color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; }
+.deck-more::after { content: '›'; color: var(--accent); font-size: 18px; }
+@media (min-width: 900px) {
+  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
+  .split > main { max-width: none; margin: 0; }
+  .needs-deck { 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; }
+  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 24px; border-left: 1px solid var(--line); }
+  .needs-pane .needs-questions main { padding: 0; max-width: none; }
+  .needs-pane .waiting { margin: 0 0 12px; }
+}

package/board/public/ui-cards.js

@@ -56,10 +56,12 @@
     const external = it.action.kind === ACTION_KIND.ready ? Object.entries(EXTERNAL).map(([k, v]) => ` ${k}="${esc(v)}"`).join('') : '';
     return `<a class="card-action" href="${esc(it.action.url)}" title="${esc(it.action.label)}" aria-label="${esc(`Action needed: ${it.action.label}`)}"${external}>Action needed</a>`;
   }
-  // Each unfinished dep, linking to its card: "blocked by #53, #54".
+  // Each unfinished dep, linking to its card: "blocked by #53, #54", or "waits on #53" on a bumped card not held, which
+  // the pull takes once nothing blocks it (docs/adr/2026-11-05-0802-todo-has-no-queue.md).
   function blockedWords(it) {
     const deps = it.blockedBy || [];
-    return deps.map((d, i) => `<a class="card-blocked" href="#item=${encodeURIComponent(d.key)}">${i ? '' : 'blocked by '}${esc(d.ref)}</a>`).join('<span class="sep">, </span>');
+    const lead = it.bumpedAt && !it.held ? 'waits on ' : 'blocked by ';
+    return deps.map((d, i) => `<a class="card-blocked" href="#item=${encodeURIComponent(d.key)}">${i ? '' : lead}${esc(d.ref)}</a>`).join('<span class="sep">, </span>');
   }
   const tryWords = (kind) => kind === 'app' ? {
     go: 'Serve', going: 'serving…', done: 'Install', failed: 'serve failed',
@@ -112,16 +114,17 @@
     if (it.kind !== 'work' || !t?.script || t.autoBuild || !t.changes) return '';
     const words = tryWords(t.kind);
     const reason = t.state === 'running' ? words.busy : t.state === 'ready' && !t.stale ? words.current : '';
-    return `<button type="button" data-try="${esc(it.key)}"${reason ? ` aria-disabled="true" title="${esc(reason)}" data-tip="${esc(reason)}"` : ''}>${t.state === 'failed' && !reason ? 'Retry' : words.go}</button>`;
+    const attrs = BoardUI.pending.has(`${it.key}:try`) ? BoardUI.BUSY : reason ? ` aria-disabled="true" title="${esc(reason)}" data-tip="${esc(reason)}"` : '';
+    return `<button type="button" data-try="${esc(it.key)}"${attrs}>${t.state === 'failed' && !reason ? 'Retry' : words.go}</button>`;
   }
   const BRANCH = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="8" r="2.5"/><path d="M6 8.5v7"/><path d="M18 10.5c0 4-6 3-11 6"/></svg>';
   // Main's refresh icon on a local board (docs/adr/2026-11-03-1914-a-local-boards-main-pulls-from-origin-on-its-own.md),
   // the header's refresh icon as a ghost button right of the timestamp: it spins while a pull runs or a tap waits on the
   // server, and turns red when the last pull failed, with the reason as a tooltip on hover or a popover a tap opens
   // (`open`). Visit is left alone: it changes only once Main rebuilds.
-  function mainPull(pull, { sending = false, open = false } = {}) {
+  function mainPull(pull, { open = false } = {}) {
     if (!pull) return '';
-    const busy = pull.running || sending;
+    const busy = pull.running || BoardUI.pending.has('main:pull');
     const failed = !busy && pull.error;
     const label = busy ? 'Pulling main' : failed ? pull.error : 'Pull main now';
     const why = failed ? `<span class="main-pull-why${open ? ' open' : ''}" role="tooltip">${esc(pull.error)}</span>` : '';
@@ -143,21 +146,13 @@
   function mergeButton(it) {
     if (it?.action?.kind !== ACTION_KIND.merge && !it?.merging) return '';
     const busy = it.merging || BoardUI.pending.has(`${it.key}:merge`);
-    return `<button class="${it.resolvedBy === BUTTON.merge ? 'resolves' : 'primary'}" data-confirm="merge" data-key="${esc(it.key)}"${busy ? BoardUI.BUSY : ''}>Merge</button>`;
+    // A merging card has no Action needed left, so resolvedBy is null by then: merging keeps the colour resolvedBy gave it.
+    return `<button class="${it.merging || it.resolvedBy === BUTTON.merge ? 'resolves' : 'primary'}" data-confirm="merge" data-key="${esc(it.key)}"${busy ? BoardUI.BUSY : ''}>Merge</button>`;
   }
-  // The open card's Implement, rightmost in its action row, on every unstarted Todo work card, its questions waiting or
-  // not: it confirms, then
-  // sends card-build, waiting while the board server starts the implementer (app-cards.js). Build and Serve
-  // mean the package only (docs/adr/2026-11-02-1745-a-todo-card-that-nothing-blocks-has-build.md,
-  // docs/adr/2026-11-03-0219-a-build-tap-starts-the-build-in-the-board-server.md, docs/adr/2026-11-03-1549-a-todo-cards-button-reads-implement.md).
-  // Implement is plain until the card is ready, then builder orange (docs/adr/2026-11-04-0131-every-new-task-is-grilled-or-prototyped-at-once.md).
-  function buildButton(it) {
-    if (it.kind !== 'work' || it.lane !== 'todo' || it.queued) return '';
-    return `<button class="build${it.ready ? ' ready' : ''}" data-confirm="card-build" data-key="${esc(it.key)}">Implement</button>`;
-  }
-  // A builder reads "preheating" until its first status line, from the Implement tap or the session's dispatch on, and
-  // ends with how long ago that line was set.
-  const builderLine = (b) => [b.progress || 'preheating', b.at && lasted(b.at)].filter(Boolean).join(' · ');
+  // A builder reads "starting" until its first status line, from the Implement tap or the session's dispatch on, and
+  // ends with how long ago that line was set. One whose process is gone leads with stopped; one whose live process
+  // went quiet keeps its words and only turns grey (domain.mjs builderOf; docs/adr/2026-11-05-0410-a-card-status-word-comes-from-a-signal-the-board-checks.md).
+  const builderLine = (b) => [b.alive === false && 'stopped', b.progress || (b.alive === false ? null : 'starting'), b.at && lasted(b.at)].filter(Boolean).join(' · ');
   // 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).
@@ -185,12 +180,12 @@
     const name = (phase) => `${phase[0].toUpperCase()}${phase.slice(1)}`;
     if (it.builder && it.builder.kind !== BUILDER_KIND.install) {
       const reached = BUILD_PHASES.indexOf(it.builder.phase) + 1;
-      return { reached, running: reached > 0, dim: asking || Boolean(it.builder.stalled), label: `${reached ? `${name(it.builder.phase)}, ${stepWords(it.builder.phase)}` : 'Preheating, no step yet'}${answers}` };
+      return { reached, running: reached > 0, dim: asking || Boolean(it.builder.stalled || it.builder.quiet), label: `${reached ? `${name(it.builder.phase)}, ${stepWords(it.builder.phase)}` : 'Starting, no step yet'}${answers}` };
     }
     const dim = !it.builder || asking;
     if (it.reopened) return { reached: all, running: false, dim, label: `Reopened, ${ALL_DONE}${answers}` };
     const reached = BUILD_PHASES.indexOf(it.reachedPhase) + 1;
-    const label = reached ? `Stopped at ${it.reachedPhase}, ${stepWords(it.reachedPhase)}` : it.queued ? 'Queued, no step yet' : 'No step yet';
+    const label = reached ? `Stopped at ${it.reachedPhase}, ${stepWords(it.reachedPhase)}` : 'No step yet';
     return { reached, running: false, dim, label: `${label}${answers}` };
   }
   // What the bars do when a card's reached count goes from prev to next across redraws, null or undefined meaning no
@@ -213,12 +208,28 @@
     const { since, picked } = it.orchestrator;
     return `<div class="line3 sub agent${tone(it)}">${picked ? `${DOT}orchestrator review · ${esc(lasted(picked))}` : `waiting for orchestrator · ${esc(lasted(since))}`}</div>`;
   }
-  // A stale build's status line is the needs-you red, and a tap on it nudges Claude to check the implementer.
+  // A stale or stopped build's status line is the needs-you red, and a tap on it nudges Claude to check the implementer.
+  // A quiet one is grey, with no dot.
   function builderStatus(it) {
-    const classes = `line3 sub agent${it.builder.planner ? ' planner' : ''}${tone(it)}`;
-    const words = `<span class="working-dot" aria-hidden="true"></span>${esc(builderLine(it.builder))}`;
+    const { quiet } = it.builder;
+    const classes = `line3 sub agent${it.builder.planner ? ' planner' : ''}${tone(it)}${quiet ? ' quiet' : ''}`;
+    const words = `${quiet ? '' : DOT}${esc(builderLine(it.builder))}`;
     if (!it.builder.stalled || it.lane === 'done') return `<div class="${classes}">${words}</div>`;
-    return `<button type="button" class="${classes} stalled" data-confirm="nudge" data-key="${esc(it.key)}" title="No recent progress. Nudge Claude to check this implementer">${words}</button>`;
+    const nudging = BoardUI.pending.has(`${it.key}:nudge`) ? ' nudging' : '';
+    return `<button type="button" class="${classes} stalled${nudging}" data-confirm="nudge" data-key="${esc(it.key)}" title="No recent progress. Nudge Claude to check this implementer">${words}</button>`;
+  }
+  // The open card's Status row: what runs on the card, else where its lane leaves it, never the wave 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.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.ready ? 'ready' : 'to do';
+    if (it.lane === 'progress') return it.reachedPhase ? `stopped at ${it.reachedPhase}` : 'in progress';
+    return 'in review';
   }
   const unreadCount = (othersAt, seenAt) => (seenAt ? (othersAt || []).filter((t) => String(t) > seenAt).length : 0);
   // When a hold ends, as a card reads it: the time today, the weekday within six days, else the date
@@ -283,13 +294,13 @@
     const ids = it.kind === 'ask' ? askChip(it) : it.unsorted ? `${badge('notice', 'New')} ${chip}` : chip;
     const chips = `${prChips(it)}${reviewChips(it)}${it.risky ? badge('notice', 'risky') : ''}${installChip(it)}`;
     const status = it.isNew && !it.action ? (askLine(it.ask) && `<div class="line3 sub">${askLine(it.ask)}</div>`)
-      : it.orchestrator && !it.builder ? orchestratorStatus(it)
+      : it.orchestrator && !it.builder ? `${it.rebaseFailed ? `<div class="line3 sub">${esc(it.rebaseFailed)}</div>` : ''}${orchestratorStatus(it)}`
       : it.waitsOn === 'checking' ? `<div class="line3 sub agent${tone(it)}">${DOT}Orchestrator review</div>`
       : it.builder ? builderStatus(it)
-      : it.grilling || it.prototyping ? `<div class="line3 sub agent planner${tone(it)}">${DOT}${it.grilling ? 'preheating' : 'prototyping'}</div>`
+      : it.grilling || it.prototyping ? '<div class="line3 sub asked">preheating</div>'
       : it.refusal ? `<div class="line3 sub refused">${esc(it.refusal)}</div>`
       : it.working ? `<div class="line3 sub agent">${workingLine}</div>`
-      : it.next ? `<div class="line3 sub next${it.lane === 'todo' || it.lane === 'done' || it.held || it.queued ? ' idle' : ''}">Next: ${esc(it.next)}</div>` : '';
+      : it.next ? `<div class="line3 sub next${it.lane === 'todo' || it.lane === 'done' || it.held ? ' idle' : ''}">Next: ${esc(it.next)}</div>` : '';
     const eta = it.eta && it.builder ? `<div class="line3 sub eta">${esc(etaLine(it.eta))}</div>` : '';
     // 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">${esc(`Check can't run: ${it.ownerCheck.broken}`)}</div>`
@@ -303,7 +314,7 @@
   const askChip = (it) => (it.isNew ? badge('notice', 'New') : '');
   function planButton(items) {
     const keys = items.filter((i) => i.kind === 'work' && !i.held && !i.blockedBy?.length).map((i) => i.key);
-    return keys.length > 1 ? `<button type="button" class="thread-more" data-plan="${esc(keys.join(' '))}">Plan waves</button>` : '';
+    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>` : '';
   }
 
   // docs/adr/2026-11-03-1731-each-board-reviews-incoming-prs-that-touch-its-work.md
@@ -344,5 +355,5 @@
       <div class="list">${list}${fold}</div></details>`;
   }
 
-  Object.assign(globalThis.BoardUI, { prChips, prName, linearChips, ticketChip, REVIEW, reviewAge, reviewChips, pendingQuestions, actionWords, blockedWords, tryWords, tryButton, mainBar, installChip, installButton, mergeButton, buildButton, builderLine, BUILD_PHASES, phaseStrip, phaseMotion, unreadCount, heldUntilWords, holdPicker, workLines, askChip, askActions, askLine, planButton, WAVE_ICON, reviewLane });
+  Object.assign(globalThis.BoardUI, { prChips, prName, linearChips, ticketChip, REVIEW, reviewAge, reviewChips, pendingQuestions, actionWords, blockedWords, tryWords, tryButton, mainBar, installChip, installButton, mergeButton, builderLine, statusWord, BUILD_PHASES, phaseStrip, phaseMotion, unreadCount, heldUntilWords, holdPicker, workLines, askChip, askActions, askLine, planButton, WAVE_ICON, reviewLane });
 })();

package/board/public/ui-header.js

@@ -65,13 +65,13 @@
     ? `<ul class="hub-links">${links.map(linkRow).join('')}</ul>`
     : '<p class="muted">The hub doesn\'t list this board yet. It picks a board up from the manifest on its next check.</p>');
 
-  // The checklist a new board shows at the top until its session answered the hello and GitHub checks reach it; setup
+  // The checklist a new board shows at the top until its session answered the ping and GitHub checks reach it; setup
   // is /api/board's, null once both pass. Cards can start meanwhile.
   const setupCard = (setup) => {
     if (!setup) return '';
     const step = (ok, done, waiting) => `<li><span class="dot ${ok ? 'pass' : 'pending'}" aria-hidden="true"></span>${ok ? done : waiting}</li>`;
     return `<h2>Connecting this board</h2><ul class="setup-steps">
-      ${step(setup.events, 'Claude answered the hello', 'Waiting for Claude to answer the hello')}
+      ${step(setup.events, 'Claude answered the ping', 'Waiting for Claude to answer the ping')}
       ${setup.github === undefined ? '' : step(setup.github, 'GitHub checks reach this board', 'Waiting for the hub\'s next GitHub check')}
     </ul>`;
   };

package/board/public/ui-order.js

@@ -1,21 +1,23 @@
 // The board's order of its items, each lane together, which board/domain.mjs sorts the board by and the page sorts a
 // tap it draws at once by, so the card lands where the server will put it
-// (docs/adr/2026-11-03-0223-each-lane-has-one-fixed-order.md). Each item carries its lane, isNew, queued, bumpedAt, sortAt, order and key.
+// (docs/adr/2026-11-03-0223-each-lane-has-one-fixed-order.md). Each item carries its lane, isNew, bumpedAt, sortAt, order and key.
 // Needs nothing else: board/domain.mjs runs this file in a vm context.
 (function () {
   const LANE_ORDER = { review: 0, stale: 1, progress: 2, todo: 3, done: 4, asks: 5 };
-  // New cards lead Todo, oldest first, so the top one is the next taken (docs/adr/2026-10-29-1639-the-plus-makes-a-new-card.md);
-  // then bumped cards, the latest bump on top (docs/adr/2026-10-29-1639-a-card-that-hasnt-started-can-be-bumped.md); then the rest
-  // newest first by sortAt, a card with no time last, the last added to its wave file on top. Todo's Queued cards
-  // lead it, bumped first and then oldest first, so the top one is the next to build
-  // (docs/adr/2026-11-04-0150-queued-sits-at-the-top-of-todo.md).
+  // 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
+  // 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.
   function laneOrder(a, b) {
     const bumped = (i) => i.bumpedAt || '';
-    const unsorted = (i) => (i.isNew ? 0 : 1);
-    const queued = (i) => (i.queued ? 1 : 0);
     const at = (i) => String(i.sortAt || '');
-    const age = a.isNew || a.queued ? at(a).localeCompare(at(b)) : at(b).localeCompare(at(a));
-    return LANE_ORDER[a.lane] - LANE_ORDER[b.lane] || queued(b) - queued(a) || unsorted(a) - unsorted(b) || bumped(b).localeCompare(bumped(a)) || age || b.order - a.order || a.key.localeCompare(b.key);
+    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);
   }
   Object.assign(globalThis.BoardUI ||= {}, { laneOrder });
 })();