@lovek4d/kickflip 0.6.0 → 0.7.0

package/board/public/router.js

@@ -3,7 +3,7 @@
 // ui.test.mjs runs them in node:vm. listen() catches clicks on links to a view the shell mounts, and back and forward.
 // A view is {kind, …}:
 //   start                       `/`, which the shell turns into the last board
-//   board {route, hash}         /<route>/, hash such as #item=<key>&reply
+//   board {route, hash}         /<route>/, hash such as #selectedCard=<key>&openItemsCard=<topic id>, or the older #item=<key>&reply
 //   settings {route}            /<route>/settings.html, a request to open the modal over that board
 //   questions {route, id}       /<route>/questions.html#<id>
 //   notes {route, item | wave}  /<route>/notes.html?item=<key> or ?wave=<lineup slug>, and plan.html, which the board
@@ -45,6 +45,7 @@ globalThis.AppRouter = (function () {
     if (page === 'questions.html') {
       let id = null;
       try { id = u.hash.length > 1 ? decodeURIComponent(u.hash.slice(1)) : null; } catch { id = u.hash.slice(1); }
+      if (id?.startsWith('openItemsCard=')) id = id.slice('openItemsCard='.length);
       return { kind: 'questions', route, id };
     }
     if (page === 'notes.html' || page === 'plan.html') {
@@ -80,10 +81,10 @@ globalThis.AppRouter = (function () {
 
   // The page tree (docs/adr/2026-10-30-1125-back-follows-the-page-tree.md): a board, its Waiting on you, and a prototype page tied
   // to one of its questions by ?q=, framed. levelOf → 0, 1 or 2 down the tree, or null for a view outside it.
+  // A board's prototype page, which from 900px opens in the board's right pane (shell.js go).
+  const isPrototype = (view, boards) => view?.kind === 'frame' && boards.has(view.route) && /^\/[^/]+\/prototype-[\w-]+\.html$/.test(new URL(view.url, 'http://hub').pathname);
   function questionOf(view, boards) {
-    if (view?.kind !== 'frame' || !boards.has(view.route)) return null;
-    const u = new URL(view.url, 'http://hub');
-    return /^\/[^/]+\/prototype-[\w-]+\.html$/.test(u.pathname) ? u.searchParams.get('q') || null : null;
+    return isPrototype(view, boards) ? new URL(view.url, 'http://hub').searchParams.get('q') || null : null;
   }
   // wide: from 900px Waiting on you is the board's pane, so a prototype's parent is the board itself.
   function levelOf(view, { boards = new Set(), wide = false } = {}) {
@@ -96,7 +97,7 @@ globalThis.AppRouter = (function () {
   function parentsOf(view, { boards = new Set(), card = null, wide = false } = {}) {
     const q = questionOf(view, boards);
     if (!q && view?.kind !== 'questions') return [];
-    const board = { kind: 'board', route: view.route, hash: card ? `#item=${encodeURIComponent(card)}` : '' };
+    const board = { kind: 'board', route: view.route, hash: card ? `#selectedCard=${encodeURIComponent(card)}` : '' };
     return q && !wide ? [board, { kind: 'questions', route: view.route, id: q }] : [board];
   }
 
@@ -224,5 +225,32 @@ globalThis.AppRouter = (function () {
     return { push: (href, from) => write('push', href, from), replace: (href) => write('replace', href), up };
   }
 
-  return { viewOf, urlOf, mounted, entryOf, listen };
+  // A board's fragment is &-joined keys: selectedCard=<key> (the focused card), openItemsCard=<topic id> (the selected
+  // open-items pill), review=<PR number>, and a bare reply. The older #item=<key> reads as selectedCard.
+  // → {selectedCard, openItemsCard, review, reply}, each null or false when absent.
+  function fragmentOf(hash) {
+    const out = { selectedCard: null, openItemsCard: null, review: null, reply: false };
+    const decode = (v) => { try { return decodeURIComponent(v); } catch { return v; } };
+    for (const part of String(hash).replace(/^#/, '').split('&')) {
+      const eq = part.indexOf('=');
+      const [k, v] = eq < 0 ? [part, ''] : [part.slice(0, eq), part.slice(eq + 1)];
+      if (k === 'selectedCard' || k === 'item') out.selectedCard = decode(v) || null;
+      else if (k === 'openItemsCard') out.openItemsCard = decode(v) || null;
+      else if (k === 'review' && /^\d+$/.test(v)) out.review = Number(v);
+      else if (k === 'reply') out.reply = true;
+    }
+    return out;
+  }
+  // hash with the named keys of changes replaced (null drops one) → the new fragment, '' for none. A #review= link is
+  // alone in its fragment, so a change to a card or pill replaces it; reply is spent once the card is shown.
+  function hashWith(hash, changes) {
+    const now = fragmentOf(hash);
+    const next = { selectedCard: now.selectedCard, openItemsCard: now.openItemsCard, ...changes };
+    const parts = [];
+    if (next.selectedCard) parts.push(`selectedCard=${encodeURIComponent(next.selectedCard)}`);
+    if (next.openItemsCard) parts.push(`openItemsCard=${encodeURIComponent(next.openItemsCard)}`);
+    return parts.length ? '#' + parts.join('&') : '';
+  }
+
+  return { viewOf, urlOf, mounted, entryOf, isPrototype, listen, fragmentOf, hashWith };
 })();

package/board/public/shell.js

@@ -35,6 +35,10 @@ window.AppShell = (function () {
       channel.port1.onmessage = done;
       try { controller.postMessage({ forget: 'shell' }, [channel.port2]); } catch { done(); }
     });
+    // Only this reload starts at the top: iOS put the old offset back once the page had grown and left that area unpainted until a scroll
+    // (docs/adr/2026-11-06-1100-the-shell-turns-off-scroll-restoration.md). pagehide gives ordinary reloads their restore back.
+    history.scrollRestoration = 'manual';
+    addEventListener('pagehide', () => { history.scrollRestoration = 'auto'; }, { once: true });
     setTimeout(() => location.reload(), 0);
   }
 
@@ -44,9 +48,6 @@ window.AppShell = (function () {
   }
 
   async function start() {
-    // The shell sends every view to the top itself, so the browser's own scroll restore is off: after a reload iOS put the old
-    // offset back once the page had grown, and left that area unpainted until a scroll (docs/adr/2026-11-06-1100-the-shell-turns-off-scroll-restoration.md).
-    history.scrollRestoration = 'manual';
     // A frame that lands on a view's URL, such as a framed page's link back to its card, shows it in the shell around it.
     if (outer()?.open(location.href, { frames: false })) return;
     // The same URL and scope as hub-kit.js's push registration, so the one registration and its push subscription stay.
@@ -245,24 +246,30 @@ window.AppShell = (function () {
     // Board and Waiting on you are a board's two pages (docs/adr/2026-11-07-1300-board-and-open-questions-are-two-pages.md):
     // from 900px the board shows Waiting on you in its pane, so every view of the questions page, a link, a push, a
     // hand-off, a history entry or a cold load, shows the board at its own URL and opens the question's topic there (id,
-    // or null for none). A board just shown takes a moment to fill its pane, so the pane is asked again until it has.
-    function focusPane(id, tries = 50) {
-      if (current?.view.kind !== 'board' || current.v.B.focusQuestion?.(id) || tries <= 0) return;
-      setTimeout(() => focusPane(id, tries - 1), 100);
+    // or null for none). A board's prototype page does the same and opens in the pane
+    // (docs/adr/2026-11-07-2030-on-desktop-the-prototype-viewer-opens-in-the-right-pane.md).
+    const inPane = (view) => wide.matches && (view?.kind === 'questions' || AppRouter.isPrototype(view, boards()));
+    // ask(B) → true once the board's pane did what the view asks. A board just shown takes a moment to fill its pane, so
+    // the pane is asked again until it has.
+    const paneAsk = (view, href) => (view.kind === 'questions' ? (B) => B.focusQuestion?.(view.id) : (B) => B.openViewer?.(href));
+    function askPane(ask, tries = 50) {
+      if (current?.view.kind !== 'board' || ask(current.v.B) || tries <= 0) return;
+      setTimeout(() => askPane(ask, tries - 1), 100);
     }
     function go(view, href, how, from) {
       if (!AppRouter.mounted(view)) return false;
-      if (view.kind === 'questions' && wide.matches) {
+      if (inPane(view)) {
+        const ask = paneAsk(view, href);
         const board = { kind: 'board', route: view.route, hash: '' };
         const boardHref = new URL(AppRouter.urlOf(board), location.href).href;
         if (how === 'pop') history.replaceState(history.state, '', boardHref);
-        // On its own board it only opens the topic, so the URL, history and an open card stay as they are.
+        // On its own board it only asks the pane, so the URL, history and an open card stay as they are.
         else if (current?.view.kind === 'board' && current.route === view.route && !settings) {
-          focusPane(view.id);
+          askPane(ask);
           sidebar.close();
           return true;
         }
-        return Promise.resolve(go(board, boardHref, how, from)).then((shown) => { if (shown) focusPane(view.id); return shown; });
+        return Promise.resolve(go(board, boardHref, how, from)).then((shown) => { if (shown) askPane(ask); return shown; });
       }
       if (view.kind === 'settings') {
         if (current?.view.kind === 'board' && current.route === view.route) {
@@ -316,15 +323,15 @@ window.AppShell = (function () {
     if (!AppRouter.mounted(first)) { location.replace('/_hub/'); return; }
 
     let pane = null;
-    if (first.kind === 'questions' && wide.matches) {
-      pane = { id: first.id };
+    if (inPane(first)) {
+      pane = paneAsk(first, location.href);
       first = { kind: 'board', route: first.route, hash: '' };
       history.replaceState(history.state, '', AppRouter.urlOf(first));
     }
     router = AppRouter.listen({ boards, go, wide: () => wide.matches });
-    // Widening past 900px on Waiting on you swaps to the board with that topic open in the pane.
+    // Widening past 900px on Waiting on you or a prototype swaps to the board with it open in the pane.
     wide.addEventListener('change', () => {
-      if (wide.matches && current?.view.kind === 'questions') go(AppRouter.viewOf(location.href, { boards: boards() }), location.href, 'replace');
+      if (current && inPane(current.view)) go(AppRouter.viewOf(location.href, { boards: boards() }), location.href, 'replace');
     });
     opener = (url, { replace = false, frames = true } = {}) => {
       const view = AppRouter.viewOf(url, { boards: boards() });
@@ -341,7 +348,7 @@ window.AppShell = (function () {
     navigator.serviceWorker?.startMessages?.();
 
     show(first);
-    if (pane) focusPane(pane.id);
+    if (pane) askPane(pane);
     openStream();
     addEventListener('visibilitychange', () => { if (!document.hidden) openStream(); });
     addEventListener('pageshow', openStream);

package/board/public/sidebar.css

@@ -41,6 +41,11 @@
 html.sb-update body.has-sidebar > .top .hub, html.sb-update body.has-sidebar > :not(.sidebar) > .top .hub { position: relative; }
 html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-sidebar > :not(.sidebar) > .top .hub::after {
   content: ''; position: absolute; width: 10px; height: 10px; top: 3px; right: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
+/* A busy hub gets an orange dot on the logo and a broken one a red dot, in the update dot's place (red, then orange, then blue). */
+html:is(.sb-hub-busy, .sb-hub-down) body.has-sidebar > .top .hub, html:is(.sb-hub-busy, .sb-hub-down) body.has-sidebar > :not(.sidebar) > .top .hub { position: relative; }
+html:is(.sb-hub-busy, .sb-hub-down) body.has-sidebar > .top .hub::after, html:is(.sb-hub-busy, .sb-hub-down) body.has-sidebar > :not(.sidebar) > .top .hub::after {
+  content: ''; position: absolute; width: 10px; height: 10px; top: 3px; right: 3px; border-radius: 50%; background: var(--color-notice); box-shadow: 0 0 0 2px var(--bg); }
+html.sb-hub-down body.has-sidebar > .top .hub::after, html.sb-hub-down body.has-sidebar > :not(.sidebar) > .top .hub::after { background: var(--color-danger); }
 .sidebar .sb-text { flex: 1; min-width: 0; }
 .sidebar .sb-title { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .sidebar .sb-moon { display: inline-block; margin-left: 5px; color: var(--muted); vertical-align: -1px; }
@@ -168,12 +173,12 @@ html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-side
 .sidebar .sb-ctx.stale { opacity: .6; }
 .sidebar .lcs { order: -1; flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
 .sidebar .lc { flex: none; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 0 6px; line-height: 18px; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }
-.sidebar .lc-review { --tone: var(--accent); } .sidebar .lc-progress { --tone: var(--color-notice); } .sidebar .lc-todo { --tone: var(--muted); }
+.sidebar .lc-needs { --tone: var(--color-danger); } .sidebar .lc-review { --tone: var(--accent); } .sidebar .lc-progress { --tone: var(--color-notice); } .sidebar .lc-todo { --tone: var(--muted); }
 .sidebar .dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
 @keyframes sb-pulse { 50% { opacity: .35; } }
 @media (prefers-reduced-motion: no-preference) { .sidebar .dot.pulse { animation: sb-pulse 1.4s ease-in-out infinite; } }
 .sidebar .word { flex: none; font-weight: 600; color: var(--tone); }
-.sidebar .t-down, .sidebar .t-needs { --tone: var(--color-danger); }
+.sidebar .t-down { --tone: var(--color-danger); }
 .sidebar .t-starting { --tone: var(--color-notice); }
 .sidebar .t-stopped, .sidebar .t-asleep { --tone: var(--muted); }
 .sidebar .t-working { --tone: var(--color-notice); }

package/board/public/sidebar.js

@@ -102,6 +102,9 @@
     // 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));
+      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;

package/board/public/style.css

@@ -84,8 +84,17 @@ 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-out card's footer status, and a bumped ready card's while the host holds new work (ui-cards.js timeLine). */
+.card-bumped-out, .card-host-held { color: var(--muted); }
 .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));
@@ -197,7 +206,6 @@ button.link { background: none; border: 0; color: var(--accent); padding: 8px 12
 .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. */
@@ -376,29 +384,19 @@ button.attach:disabled { opacity: .35; }
 @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; } }
-/* 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; }
 .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. */
 .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.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; }
@@ -417,9 +415,11 @@ button.sub.agent.stalled.nudging { color: var(--color-notice); cursor: default;
    has picked up are grey, after the lane colours so they win. */
 .sub.agent.quiet, .sub.asked { color: var(--muted); }
 .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; }
@@ -521,7 +521,7 @@ 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; }
@@ -592,7 +592,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; }
@@ -601,7 +601,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); }
@@ -633,12 +637,12 @@ main > * { transition: opacity .25s ease; }
 .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 and a sent or resolved one a green tint, each with its border drawn inside
-   the card as well, so the card keeps its size. */
+   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 { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 9%, var(--panel)); box-shadow: inset 0 0 0 1px var(--color-success); }
 .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; }
@@ -659,7 +663,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)); }
@@ -680,7 +685,7 @@ 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. */
@@ -757,6 +762,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));
@@ -770,8 +777,14 @@ 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. */
+/* Typing, a text field focused (shell.js sets :root.typing): the floating + dims and stops taking taps, and the page stays as it is. */
 :root.typing .fab { opacity: .35; pointer-events: none; }
+/* On a phone the + hides while typing, so it never sits over the keyboard's field. */
+@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)));
@@ -885,6 +898,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; }
@@ -933,13 +949,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-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; }
@@ -953,16 +970,38 @@ button[aria-busy="true"]:is([data-card-bump], [data-bump]) svg { fill: currentCo
   .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 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; }