@lovek4d/kickflip 0.5.3 → 0.6.1

package/board/public/sidebar.js

@@ -1,5 +1,5 @@
 // The sidebar's behaviour on a page with <aside id="sidebar" class="sidebar"> and <div id="sidebarScrim"
-// class="sidebar-scrim">, after ui-phase-bars.js, ui-page-header.js and ui-sidebar.js (docs/adr/2026-10-29-1639-a-sidebar-of-every-board-replaces-the-hub-home.md).
+// class="sidebar-scrim">, after ui-progress-bar.js, ui-page-header.js and ui-sidebar.js (docs/adr/2026-10-29-1639-a-sidebar-of-every-board-replaces-the-hub-home.md).
 // Sidebar.mount({here, data}) paints `data` or the last copy this device stored; the app shell hands it each new copy
 // through setData from its one stream (shell.js). The page header's logo (a.hub) toggles the sidebar at every
 // width, with what waits on the other sites in its accessible label. Below 900px the sidebar is a drawer: the logo or a swipe in from the
@@ -17,8 +17,8 @@
 // logo does, checkDevice reading this device's push subscription again, and keydown and pointerdown taking a framed
 // page's events (view-frame.js), as the document's own
 // A starting board's row (docs/adr/2026-11-04-1914-a-new-board-shows-its-start-steps-and-clone-progress.md): its seconds
-// tick in place each second, and a repaint sets its running bar's pulse from the clock, so a new copy never restarts
-// it. When the board joins, its row fades in, and a repaint during the fade carries it on from where it was.
+// tick in place each second, and its running bar beats on every pulse's one clock (ui-progress-bar.js onePulse). When
+// the board joins, its row fades in, and a repaint during the fade carries it on from where it was.
 (function () {
   const DATA_KEY = 'hub:sidebar';
   // app.html reads it before the first paint, so a collapsed rail never shows for a moment.
@@ -27,8 +27,7 @@
   // A phone has no keys to press, so it never shows the shortcuts sheet.
   const DESKTOP = '(hover: hover) and (pointer: fine)';
   const TWICE_MS = 1000;
-  // style.css pulse-fill's period, and sidebar.css sb-join's length.
-  const PULSE_MS = 1400;
+  // sidebar.css sb-join's length.
   const JOIN_MS = 2500;
   // paint() sets the bar's duration from this and its delay from switching.started.
   const IDLE_MS = 3000;
@@ -58,9 +57,8 @@
     if (!data) { try { data = JSON.parse(read(DATA_KEY) || 'null'); } catch { data = null; } }
     let device = null;
     let update = null;
-    // While Restart waits for the hub: null | {version} | {version, error}, which replaces the hub's upgrade field in the row.
-    let restart = null;
-    const upgradeShown = () => (restart ? { state: restart.error ? 'updated' : 'restarting', ...restart } : data?.upgrade);
+    // The hub's version when this page booted; the row names the version only once it differs.
+    let bootVersion = data?.version ?? null;
     let updateHTML = '';
     const rail = matchMedia(RAIL);
     const html = document.documentElement;
@@ -73,7 +71,7 @@
       const logo = [...document.querySelectorAll('.top a.hub')].find(pageLogo);
       if (!logo) return;
       const n = othersWaiting(data, here);
-      logo.setAttribute('aria-label', `Boards${update ? ', new version ready' : upgradeShown() ? ', update available' : ''}${n ? `, ${n} waiting on other boards` : ''}`);
+      logo.setAttribute('aria-label', `Boards${update ? ', new version ready' : ''}${n ? `, ${n} waiting on other boards` : ''}`);
     }
     // switching: {opened, started, timer} while switch mode shows, opened when it opened the drawer, started on performance.now().
     let switching = null;
@@ -91,7 +89,6 @@
     }
     function paintStarts() {
       const now = Date.now();
-      for (const bar of aside.querySelectorAll('.sb-starting .phase-bars i.now')) bar.style.animationDelay = `-${now % PULSE_MS}ms`;
       for (const [route, at] of joined) {
         const row = now - at < JOIN_MS && aside.querySelector(`a.sb-row[href="/${encodeURIComponent(route)}/"]`);
         if (!row) { joined.delete(route); continue; }
@@ -104,7 +101,10 @@
     }
     // A repaint keeps the drawer's scroll, so a new copy doesn't move the list under a finger.
     function paint() {
-      html.classList.toggle('sb-update', Boolean(update || upgradeShown()));
+      html.classList.toggle('sb-update', Boolean(update));
+      const dot = globalThis.BoardUI?.hubDot?.(data);
+      html.classList.toggle('sb-hub-busy', dot === 'busy');
+      html.classList.toggle('sb-hub-down', dot === 'down');
       if (!data) return;
       const scroll = aside.querySelector('.sb-scroll');
       const top = painted ? scroll?.scrollTop : undefined;
@@ -116,11 +116,14 @@
         bar.style.animationDelay = `${switching.started - performance.now()}ms`;
         bar.style.animationDuration = `${IDLE_MS}ms`;
       }
+      // A shared person's sidebar has no update row (ui-sidebar.js).
       const fresh = aside.querySelector('.sb-update');
-      if (held) fresh.replaceWith(held);
-      const row = updateRow(update, upgradeShown());
-      if (!held || row !== updateHTML) (held || fresh).innerHTML = row;
-      updateHTML = row;
+      if (fresh) {
+        if (held) fresh.replaceWith(held);
+        const row = updateRow(update, data.version && data.version !== bootVersion ? data.version : null);
+        if (!held || row !== updateHTML) (held || fresh).innerHTML = row;
+        updateHTML = row;
+      }
       const list = aside.querySelector('.sb-scroll');
       if (list) list.scrollTop = top ?? list.scrollHeight;
       paintStarts();
@@ -131,6 +134,7 @@
       if (!next) return;
       const starting = new Set(startsRunning().map((s) => s.route));
       for (const s of next.sites || []) if (starting.has(s.route)) joined.set(s.route, Date.now());
+      bootVersion ??= next.version ?? null;
       data = next;
       write(DATA_KEY, JSON.stringify(data));
       paint();
@@ -195,64 +199,10 @@
         if (!refreshApp.disabled && update !== 'reloading') { setUpdate('reloading'); reload(); }
         return;
       }
-      const restartApp = e.target.closest?.('[data-app-restart]');
-      if (restartApp) { if (!restartApp.disabled) restartHub(); return; }
-      const upgradeApp = e.target.closest?.('[data-app-upgrade]');
-      if (upgradeApp) { if (!upgradeApp.disabled) upgrade(upgradeApp); return; }
       if (e.target.closest?.('[data-new-board]')) { newBoard(); return; }
       const failed = e.target.closest?.('[data-failed-start]');
       if (failed) openFailed(failed.dataset.failedStart);
     });
-    // Restart asks the hub to restart (POST /_hub/restart-hub), then polls until it answers with other code than it ran (its
-    // x-hub-code) and reloads the page (docs/adr/2026-11-05-2200-the-hub-pulls-a-new-version-itself-and-offers-restart.md).
-    // Past RESTART_TRIES polls the row goes back to Restart with how to restart by hand.
-    const RESTART_TRIES = 120;
-    async function restartHub() {
-      if (restart) return;
-      const version = data.upgrade.version;
-      restart = { version };
-      paint();
-      let before, command;
-      try {
-        const response = await fetch('/_hub/restart-hub', { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/json' }, body: '{}' });
-        const body = await response.json().catch(() => ({}));
-        if (!response.ok) throw new Error(body.error || 'The hub didn’t restart.');
-        before = response.headers.get('x-hub-code');
-        command = body.command;
-      } catch (e) {
-        restart = { version, error: e.message || 'The hub didn’t answer.' };
-        paint();
-        restart = null;
-        return;
-      }
-      for (let i = 0; i < RESTART_TRIES; i++) {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        try {
-          const response = await fetch('/_hub/api/hub', { cache: 'no-store', headers: { accept: 'application/json' } });
-          const code = response.headers.get('x-hub-code');
-          if (response.ok && code && code !== before) { reload(); return; }
-        } catch { /* the hub is down while it restarts */ }
-      }
-      restart = { version, error: `The hub hasn’t come back. On the host, run ${command}` };
-      paint();
-      restart = null;
-    }
-    // Update pulls again after a failed pull (docs/adr/2026-11-05-2200-the-hub-pulls-a-new-version-itself-and-offers-restart.md). The row
-    // waits (ui.js waitOn) until the hub answers with what it did, then while that pull runs (ui-sidebar.js
-    // updateRow), and a refusal shows as a failed update.
-    function upgrade(button) {
-      BoardUI.waitOn(button, (async () => {
-        let next;
-        try {
-          const response = await fetch('/_hub/upgrade', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' });
-          const body = await response.json().catch(() => ({}));
-          next = response.ok ? body.upgrade : { ...data.upgrade, state: 'failed', error: body.error || 'The hub didn’t answer.' };
-        } catch {
-          next = { ...data.upgrade, state: 'failed', error: 'The hub didn’t answer.' };
-        }
-        setData({ ...data, upgrade: next });
-      })());
-    }
     // A failed start's sheet (docs/adr/2026-11-02-2006-a-failed-start-retries-from-its-sheet.md). Dismiss deletes its Starting
     // record; Retry starts it again, and its row reads starting… until the hub's next copy says otherwise.
     function openFailed(route) {

package/board/public/style.css

@@ -82,8 +82,13 @@ button.chip { border: 0; }
 .status.review { border-color: var(--color-info); background: conic-gradient(var(--color-info) 0 75%, transparent 75% 100%); }
 .sub.agent { color: var(--color-notice); }
 .sub.next { color: var(--color-notice); }
-.card-hold, .card-blocked, .card-action { 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); }
+/* 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); }
 .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));
@@ -166,7 +171,10 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
 .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-counts .wv-cur { font-weight: 700; }
+.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. */
@@ -186,12 +194,12 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
 .refresh #refresh { padding: 4px; margin-left: -4px; flex: none; }
 .refresh #status { font-size: 12px; min-width: 0; }
 .refresh .late { color: var(--color-notice); font-weight: 600; }
-.refresh .down { color: var(--color-danger); font-weight: 600; }
-.refresh .asleep { color: var(--muted); font-weight: 600; }
+/* The header's time keeps its text; a stopped or offline board turns it and the refresh arrow red, paused usage orange. */
+.refresh .down, .refresh:has(.down) #refresh { color: var(--color-danger); }
+.refresh .hold, .refresh:has(.hold) #refresh { color: var(--color-notice); }
 .lane-github { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); text-align: right; }
 .lane-github .late { color: var(--color-notice); }
 .msg.other { background: transparent; border: 1px solid var(--line); }
-.status.stale { border-color: var(--color-danger); background: conic-gradient(var(--color-danger) 0 75%, transparent 75% 100%); }
 .msg .reply, .msg .small, .rep, .sent { overflow-wrap: anywhere; }
 code { overflow-wrap: anywhere; }
 /* iOS Safari zooms the page when a field under 16px takes focus, which shifts the page width. */
@@ -328,14 +336,17 @@ main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
 }
 .working-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-notice); margin-right: 5px; vertical-align: 1px; }
 @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; }
+/* A thread box's row: What's left? at the left, the eye, fire and attach at the right, then Send, or a pair below
+   (docs/adr/2026-11-05-1918-done-shows-only-in-in-review-beside-reply.md). */
+form[data-reply] .row .quick { margin: 0; }
+form[data-reply] .icons { display: inline-flex; flex: none; margin-left: auto; }
+.dz.bare > textarea { padding-bottom: 12px; }
 /* 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 { flex-wrap: wrap; gap: 6px; }
 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); }
@@ -355,29 +366,18 @@ button.attach:disabled { opacity: .35; }
    pixel off its siblings (docs/adr/2026-11-03-1519-a-building-cards-phase-bars-end-its-time-row.md). */
 .card-time .phase-bars { display: inline-flex; gap: 2px; vertical-align: middle; position: relative; top: -1px; }
 .phase-bars i { width: 9px; height: 4px; border-radius: 2px; background: var(--line); }
-/* A strip dims, and its running bar stops blinking, while the card waits on something other than a builder
-   (docs/adr/2026-11-03-2024-every-in-progress-card-shows-its-phase-bars.md). app-cards.js sweeps bars in --bar-fill. */
+/* A strip dims while the card waits on something other than a builder; ui-progress-bar.js then writes its running bar
+   as done, so it stops blinking (docs/adr/2026-11-03-2024-every-in-progress-card-shows-its-phase-bars.md). app-cards.js
+   sweeps bars in --bar-fill. */
 .phase-bars { --bar-fill: var(--color-notice); }
 .phase-bars.dim { --bar-fill: color-mix(in srgb, var(--muted) 55%, transparent); }
 .phase-bars i.done, .phase-bars i.now { background: var(--bar-fill); }
 /* A bar part way, to --p: a starting board's clone (ui-sidebar.js). */
 .phase-bars i.fill { background: linear-gradient(to right, var(--bar-fill) var(--p), var(--line) var(--p)); }
-@keyframes pulse-fill { 50% { background-color: color-mix(in srgb, var(--color-notice) 35%, transparent); } }
-@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. 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; }
+/* The pulse dims the bar's own fill, so it pulses in its lane's colour. */
+@keyframes pulse-fill { 50% { background-color: color-mix(in srgb, var(--bar-fill) 35%, transparent); } }
+/* Every pulse beats on one clock (ui-progress-bar.js onePulse), so a card's running bar and its status dot blink together. */
+@media (prefers-reduced-motion: no-preference) { .phase-bars i.now { animation: pulse-fill 1.4s ease-in-out infinite; } }
 .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; }
 /* 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. */
@@ -390,26 +390,36 @@ button.sub.agent.stalled.nudging { color: var(--color-notice); cursor: default;
 .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; }
-/* A planner's line, dot included, is the owner's blue, on the card and in the thread; its finish stays green
-   (docs/adr/2026-11-03-1551-planners-and-implementers-are-two-kinds-of-agent.md). */
-.sub.agent.planner, .msg.builder-status.planner, .msg.agent.started.planner { color: var(--accent); }
+/* A planner's line in the thread, dot included, is the owner's blue; its finish stays green
+   (docs/adr/2026-11-03-1551-planners-and-implementers-are-two-kinds-of-agent.md). On the card it takes the lane's colour below. */
+.msg.builder-status.planner, .msg.agent.started.planner { color: var(--accent); }
 .planner .working-dot { background: currentColor; }
-/* Every status line on an In Progress card is the phase-bar orange, a planner's too, and every build or plan line on a
-   Todo card the owner's blue, dot included; a Todo card's planner dashes are that blue, the running one pulsing
-   (docs/adr/2026-11-04-2300-each-lane-is-a-queue-for-the-orchestrator.md). */
+/* A run's status line, dot included, takes its card's lane colour, a planner's too: grey in Todo, the phase-bar orange in
+   In Progress, blue in In Review; a Todo card's planner dashes are its grey, the running one pulsing
+   (docs/adr/2026-11-06-0145-every-run-takes-its-lanes-colour.md). */
+.sub.agent.in-todo { color: var(--muted); }
 .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; }
+.sub.agent.in-review { color: var(--color-info); }
+.sub.agent.in-todo .working-dot, .sub.agent.in-progress .working-dot, .sub.agent.in-review .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; } }
+.sub.agent.waiting-gray { color: var(--muted); }
+/* A stale build's status line is grey, its dot still (ui-cards.js builderStatus). */
+.sub.agent.stale { color: var(--muted); }
+.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; }
 .msg.calls[open] summary .mark-icon { transform: rotate(90deg); }
+.msg.calls.status-fold summary { color: var(--color-notice); overflow-wrap: anywhere; }
+.msg.calls.status-fold.planner summary { color: var(--accent); }
+/* Only a run's finished line is green: the fold's summary mirrors its last line, green once the run has finished, else the
+   started and status lines' orange or a planner's blue (docs/adr/2026-11-07-1600-only-a-runs-finished-line-is-green.md). */
+.msg.calls.status-fold summary.finished { color: var(--color-success); }
 .msg.calls ol { margin: 4px 0; padding-left: 23px; }
 .agent-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
 /* Every thread status line's leading mark, icon or dot, sits centred in one 18px box, so the text after it always starts
@@ -426,7 +436,6 @@ button.sub.agent.stalled.nudging { color: var(--color-notice); cursor: default;
 .msg .reply { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; }
 .msg-foot .foot-status { display: inline-flex; align-items: center; }
 /* 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); }
 /* INT-30: card line order */
 .line6 { margin-top: 4px; }
@@ -444,17 +453,25 @@ button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chi
 .lane[open] > .list { border-radius: 0 0 10px 10px; }
 .lane > summary .count { color: var(--muted); font-weight: 400; }
 /* 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; }
+/* A board shared with someone else (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 Board settings and the architecture review, and, unless the person
+   has Full on this board (.shared-full; docs/adr/2026-11-05-1912-a-shared-person-is-view-or-full.md), the +, every
+   composer and a card's buttons, keeping its links (Visit, Notes, Open questions). Merge shows disabled under Full. */
+.shared-view :is(#settingsLink, #archBulb) { display: none !important; }
+.shared-view:not(.shared-full) :is(#compose, [data-composer], .actions button, button[data-confirm]) { display: none !important; }
+.shared-full button[data-confirm="merge"] { opacity: .45; pointer-events: none; }
 .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; }
+/* 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; }
+/* 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; }
+.down-landing-line { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
+.down-landing-hint { margin: 0; font-size: 14px; color: var(--muted); }
+.view-board.down main > :not(#downLanding), .view-board.down :is(#needsPane, #compose) { display: none; }
+.view-settings.down .settings-body > :not(.down-landing) { display: none; }
 /* INT-28: answer banner */
 .answer-banner { display: flex; align-items: center; gap: 4px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
   border-radius: 10px; padding: 2px 4px 2px 0; margin-bottom: 12px; }
@@ -495,16 +512,26 @@ button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chi
 }
 @keyframes refresh-spin { to { transform: rotate(360deg); } }
 /* INT-55: the header's right group (the time then ↻, settings) sits one gap apart; each control paints disabled until app-header.js wires it */
-.top .nav { gap: 8px; }
+.top .nav { gap: 2px; }
 .top .nav .refresh { flex-direction: row-reverse; gap: 2px; }
 .top .nav #refresh, .top .nav a.icon { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 4px; border: 0; line-height: 1; }
 .top .nav #status { line-height: 1.1; white-space: nowrap; }
 .top .nav #refresh:disabled, .top .nav a.icon[aria-disabled="true"] { opacity: .35; pointer-events: none; }
-/* [the bulb runs an architecture review of the board's repo](docs/adr/2026-11-02-1813-the-bulb-runs-an-architecture-review-of-the-boards-repo.md): the bulb sits between refresh and the gear, and glows orange while an architecture review runs */
-.top .nav .arch-bulb { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 4px; border: 0; line-height: 1; color: var(--muted); }
-.top .nav .arch-bulb:hover { color: var(--text); }
-.top .nav .arch-bulb[hidden] { display: none; }
-.top .nav .arch-bulb.running { color: var(--color-notice); }
+/* The foot of the board (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md): the bulb and the gear, centred under the lanes.
+   [the bulb runs an architecture review of the board's repo](docs/adr/2026-11-02-1813-the-bulb-runs-an-architecture-review-of-the-boards-repo.md): it glows orange while an architecture review runs */
+.board-foot { display: flex; justify-content: center; gap: 8px; margin: 20px 0 0; }
+.board-foot .arch-bulb, .board-foot a.icon { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; padding: 4px; border: 0; line-height: 1; color: var(--muted); }
+.board-foot :is(.arch-bulb, a.icon):hover { color: var(--text); }
+.board-foot .arch-bulb[hidden] { display: none; }
+.board-foot .arch-bulb.running { color: var(--color-notice); }
+.board-foot a.icon[aria-disabled="true"] { opacity: .35; pointer-events: none; }
+/* The pages switch below 900px: the board header's ? with the open-question count on its corner, and Waiting on you's check back to the board. */
+.top .pages-switch { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: auto; height: auto; margin: 0; padding: 4px; border: 0; border-radius: 0; line-height: 1; color: var(--muted); }
+.top .pages-switch:hover { color: var(--text); }
+.top .pages-switch:active { background: none; }
+.pages-switch .q-badge { position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--color-notice); color: #1c1407;
+  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 1.5px var(--bg); }
+.pages-switch .q-badge[hidden] { display: none; }
 .arch-bulb.running svg { filter: drop-shadow(0 0 4px currentColor); }
 @media (prefers-reduced-motion: no-preference) { .arch-bulb.running svg { animation: arch-glow 1.4s ease-in-out infinite; } }
 @keyframes arch-glow { 50% { filter: drop-shadow(0 0 1px currentColor); opacity: .55; } }
@@ -514,8 +541,6 @@ button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chi
 .arch-last .muted { font-size: 12.5px; }
 .arch-body .arch-waits { color: var(--color-notice); }
 .arch-body .arch-run { width: 100%; min-height: 44px; font-size: 15px; }
-/* INT-64: offline, the header's time and refresh turn red */
-.view-board.offline .refresh #refresh, .refresh .link-state.offline { color: var(--color-danger); }
 .back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; color: var(--accent); text-decoration: none; }
 /* The lead slot, logo or back, is one 44px tap box on the page's left edge, so every page's header lines up the same
    (docs/adr/2026-10-29-1639-a-questions-takes-show-inline.md). The brand keeps that height when the rail hides the logo, so the
@@ -526,15 +551,10 @@ button.attach[aria-pressed="true"] { color: var(--accent); background: var(--chi
 .top .hub + .back { margin-left: 0; }
 .top .back:active { background: var(--accent-soft); }
 .top .brand :is(h1, h2) { font-size: 17px; font-weight: 600; line-height: 22px; }
-/* The last visit paints dimmed until the fresh board lands; the controls ui-snapshot.js liveControls blocks rest meanwhile.
-   A changed line, and a card that changed lanes, gets a blue border that fades once; an updated card, open body included, takes
-   a blue tint that fades (app-snapshot.js, whose SIGNS holds each animation's length). */
+/* Every change, a line, a moved card or an updated card, open body included, takes the one blue tint that fades
+   (app-snapshot.js highlight, whose TINT_MS is its length). */
 main > * { transition: opacity .25s ease; }
-.view-board[data-board="snapshot"]:not(.offline) main > * { opacity: .62; }
-.view-board[data-board="snapshot"] :is(.actions button, button[data-plan], button[data-bump], button[data-confirm="bump"], button[data-edit], button[data-withdraw], button[data-check-github], form[data-reply] button[type=submit], form[data-reply] button[data-quick], form[data-reply] button[data-proto], form[data-reply] button[data-confirm], .prompt button) { opacity: .45; pointer-events: none; }
-.flash { animation: snapshot-flash 1.6s ease-out var(--sign-delay, 0s) 1; border-radius: 6px; }
-@keyframes snapshot-flash { from { box-shadow: inset 0 0 0 2px var(--color-info); } to { box-shadow: inset 0 0 0 2px transparent; } }
-.item.tint { animation: card-tint 2.4s ease-out var(--sign-delay, 0s) 1; border-radius: 6px; }
+.tint { animation: card-tint 2.4s ease-out var(--sign-delay, 0s) 1; border-radius: 6px; }
 @keyframes card-tint { 0%, 25% { background: var(--accent-soft); } 100% { background: transparent; } }
 .msg .quote { margin: 4px 0 6px; padding: 2px 0 2px 8px; border-left: 2px solid var(--line); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
 /* [one board registry for every hub feature](docs/adr/2026-10-29-1639-one-board-registry-for-every-hub-feature.md): the GitHub mark opens the Hub links sheet, with a red dot while a link is broken; a new board's setup checklist */
@@ -565,6 +585,9 @@ main > * { transition: opacity .25s ease; }
 .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-level { display: flex; gap: 4px; margin-top: 6px; }
+.view-settings .share-level button { min-height: 32px; padding: 4px 12px; font-size: 13px; }
+.view-settings .share-level button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); 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; }
@@ -579,6 +602,7 @@ main > * { transition: opacity .25s ease; }
 .view-settings label.who .sub { display: block; margin-top: 2px; }
 .view-settings input.toggle { flex: none; width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--accent); }
 .view-settings input.count { flex: none; width: 4.5em; text-align: center; }
+.view-settings label.who select { flex: none; max-width: 45%; min-height: 36px; }
 /* A settings switch waiting on the server (ui.js waitOn) keeps its face, disabled, with a spinner beside it
    (docs/adr/2026-11-03-1921-board-settings-grant-a-boards-session-permissions.md) */
 .view-settings .toggle-slot { flex: none; display: inline-flex; align-items: center; gap: 8px; }
@@ -599,6 +623,14 @@ main > * { transition: opacity .25s ease; }
 .view-settings .close-board-warning:has(li) { border: 1px solid var(--color-danger); padding: 0 12px; border-radius: 10px; margin-bottom: 14px; }
 .view-questions .q { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 12px 0; }
 .view-questions .q.urgent { border-color: var(--color-notice); }
+/* docs/adr/2026-11-05-2331-a-sent-answer-is-resolved-in-place-until-the-page-reloads.md
+   A requested question takes an accent tint, with its border drawn inside the card as well, so the card keeps its size.
+   A resolved question has no border or tint of its own; its Resolved badge marks it
+   (docs/adr/2026-11-06-1200-a-resolved-question-drops-its-green-border-and-tint.md). */
+.view-questions .q.pr-busy { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); box-shadow: inset 0 0 0 1px var(--accent); }
+.view-questions .q.pr-busy .opt { opacity: .55; cursor: default; }
+.view-questions .q.pr-busy .opt:has(input:checked) { opacity: 1; }
+.view-questions .q.resolved .sent-line { margin: 6px 0; font-size: 13px; color: var(--color-success); }
 .view-questions .q h3 { font-size: 15px; margin: 6px 0 4px; line-height: 1.3; }
 .view-questions .ctx { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
 .view-questions .opt { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 8px; border: 1px solid var(--line);
@@ -620,20 +652,17 @@ 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); }
+.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)); }
 @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; }
-.view-questions details.done .trow { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
-.view-questions details.done button.ghost { font-size: 14px; text-align: left; padding: 6px 2px; }
-.view-questions details.done .trow button { min-width: 0; }
-.view-questions details.done .trow span { flex: none; }
 .view-questions details.resolved-group > summary { list-style: none; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 12px 0; }
 .view-questions details.resolved-group > summary::-webkit-details-marker { display: none; }
 .view-questions details.resolved-group > summary .caret { transition: transform .15s; }
 .view-questions details.resolved-group[open] > summary .caret { transform: rotate(90deg); }
-.view-questions details.resolved-group > summary .names { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
 .view-questions .q.resolved button.chip { cursor: pointer; font: inherit; font-size: 12px; min-height: 28px; }
 .view-questions .q.resolved button.chip:disabled { cursor: default; }
 .view-questions .q.resolved .resolved-line { margin: 8px 0; }
@@ -647,10 +676,12 @@ main > * { transition: opacity .25s ease; }
 .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; }
-/* 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; }
+/* With no open question, the moon and its line sit at the centre of what the page shows between its top and the nav,
+   or of what the desktop pane has left under its Needs you lines. */
+.view-questions .q-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); text-align: center;
+  min-height: calc(var(--vh, 100dvh) - var(--app-bottom, 0px) - max(16px, env(safe-area-inset-top))); }
+.view-questions .q-empty p { margin: 0; font-size: 15px; }
 .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; }
@@ -721,7 +752,7 @@ main > * { transition: opacity .25s ease; }
     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));
   }
-  .top .nav #refresh, .top .nav a.icon, .top .nav .arch-bulb { min-width: 44px; min-height: 44px; }
+  .top .nav #refresh, .top .nav a.icon, .top .pages-switch { min-width: 44px; min-height: 44px; }
   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)));
@@ -730,6 +761,9 @@ 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; }
+
 .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)));
   padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text);
@@ -903,15 +937,24 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
 .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; }
+.deck-more:hover { text-decoration: none; }
 @media (min-width: 900px) {
   .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
   .split > main { max-width: none; margin: 0; }
   .needs-deck { display: none; }
+  /* Waiting on you is the board's pane here, so neither page shows the switch to the other. */
+  .top .pages-switch { display: none; }
+  .top .nav a.pages-switch { display: none; }
   /* The board's + sits at the bottom right of the left pane: the pane ends at the middle of the space right of the sidebar. */
   .view-board .fab { right: calc(50% - var(--sidebar-w, 0px) / 2 + var(--fab-edge)); }
   body.has-sidebar { --sidebar-w: 272px; }
   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 { 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 .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; }
 }
+/* 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; }