@gotcos/glasses-server 6.99.20 → 6.99.29

package/server/web-control/panes/questions.js

@@ -7,12 +7,18 @@
      older server answers it 401, which would sign the page out, so the page never calls it there);
    - the broker is on (sessionQuestions.enabled);
    - this tab is visible and signed in.
-   `client=web` makes the Mac count this page as a client that can answer (the same 30 s window as the phone), so it
-   holds a question for it instead of showing its own dialog at once. A hidden tab stops polling, and the Mac takes
-   its questions back within 30 s. The poll is a plain fetch: a 401 stops the poll quietly and never signs the page out
-   (the panes say so on their next read).
+   An open tab never makes the Mac hold a question back from its own pop-up (6.99.13, Miles's option B). What the page
+   adds (6.99.26, Miles 11/07: "Away rule, like phone") is its touch: `hold=1&presenceAgeMs=<ms>`, how long ago a touch
+   or a key landed on this page while it was in front. While the Mac's desk is idle, a question that starts within 30
+   minutes of that touch is held for the away hold (up to 10 minutes), answerable here and on the glasses or phone; at
+   the desk the Mac's own pop-up shows at once. No touch since the page opened sends no presence. The poll is a plain
+   fetch: a 401 stops the poll quietly and never signs the page out (the panes say so on their next read).
 
-   Allow once, Deny and Send are tap-then-confirm, as in the Even app: an approval runs a command on the Mac. Leave for
+   A question the Mac's own prompt waits on (`settled` with `waitingAtMac`, a held one that went back to the Mac) shows
+   read-only in the cards drawn for that session (Today's waiting sheet), with its words when this page saw them while
+   it was held: the server keeps codes only once a question settles. Nothing here can answer it.
+
+   Allow once, Deny and Submit are tap-then-confirm, as in the Even app: an approval runs a command on the Mac. Leave for
    the Mac hands the request back to the Mac's own dialog. Plan approvals never come here: the broker never holds
    ExitPlanMode (lib/permission-broker.ts UNBROKERED_TOOLS). */
 (function () {
@@ -28,14 +34,60 @@
     items: [],            // pending items, oldest first
     picks: {},            // id -> [{ labels: [], other: '' }] per question
     armed: {},            // id -> 'send' | 'allow' | 'deny'
+    armedAt: {},          // id -> when it was armed (COSWeb.confirmReady)
     sending: {},          // id -> clientAnswerId while a POST is out
     notes: {},            // id -> one line under the card
     answerIds: {},        // id -> the clientAnswerId this page answers under (a retry replays it)
+    atMac: [],            // settled items the Mac's own prompt still waits on, newest first
+    seen: {},             // id -> { questions: [text], summary } the words of a card this page drew while it was held
+    answered: {},         // id -> { sessionId, at } answered here or anywhere (settled `answered`), for two minutes
+    missing: {},          // id -> the question a Submit tap found unanswered, until the next pick
     timer: null,
     tick: null,
-    stopped: false
+    stopped: false,
+    inflight: false,      // a poll is on the wire
+    again: false,         // something asked for a poll while one was out: one more as soon as it lands
+    lastPollAt: 0         // when the last poll went out (Date.now)
   };
   var DEFAULT_POLL_MS = 10000;
+  // 6.99.27 (Miles 11/07 09:29, "a big delay to see the questions on the homepage"): while this tab is visible on
+  // Today it reads every 3 s, whatever the server's idle pace (10 s). Before, a question parked just after an idle read
+  // waited up to 10 s plus the round trip for the next one. Hidden, the page reads nothing (visibilitychange below).
+  var TODAY_POLL_MS = 3000;
+  // A nudge (a session that just went to waiting, Today coming on screen) never reads more often than this.
+  var NUDGE_GAP_MS = 1000;
+  // Miles's words for a question at the Mac (11/07), one place: Today's Needs you reads them from here too.
+  var MAC_LINE = "Waiting on your Mac's prompt. Answer it on the Mac (or through Screens).";
+  var ANSWERED_LINE = 'Answered. The session carries on.';
+  var ANSWERED_MS = 120000;
+
+  // ── this page's touch, for the Mac's away hold (6.99.26) ──
+  // A real touch, click or key while the tab is in front. Kept on both clocks; its age is the larger of the two, so a
+  // phone that slept never sends a touch younger than it is (the server's own rule, lib/client-liveness).
+  var PRESENCE_MAX_MS = 86400000;
+  var touch = { mono: null, wall: null };
+  function monoNow() { return typeof performance !== 'undefined' && performance && typeof performance.now === 'function' ? performance.now() : null; }
+  function presenceAge() {
+    if (touch.wall === null) return null;
+    var m = monoNow();
+    var age = Math.max(0, Date.now() - touch.wall, m !== null && touch.mono !== null ? m - touch.mono : 0);
+    age = Math.round(age);
+    return age <= PRESENCE_MAX_MS ? age : null;
+  }
+  function noteTouch(e) {
+    if (document.hidden || (e && e.isTrusted === false)) return;
+    var before = presenceAge();
+    touch.mono = monoNow(); touch.wall = Date.now();
+    // The first touch in a while reaches the Mac now, not at the next poll, so a question that starts a moment later
+    // is held for this page.
+    // QA 6.99.27 (N4): through nudge, so it keeps the 1 s gap and the one read on the wire like every other ask.
+    if (before === null || before > 60000) nudge();
+  }
+  ['pointerdown', 'touchstart', 'keydown'].forEach(function (t) { document.addEventListener(t, noteTouch, { capture: true, passive: true }); });
+  function pollUrl() {
+    var age = presenceAge();
+    return '/api/session-questions?client=web&hold=1' + (age === null ? '' : '&presenceAgeMs=' + age);
+  }
 
   function signedIn() { var shell = document.getElementById('app-shell'); return !!(shell && !shell.classList.contains('hidden')); }
   function answerId() {
@@ -61,46 +113,92 @@
     }, function () { return null; });
   }
   function usable(cap) { return !!(cap && cap.enabled === true && cap.webClient === true); }
+  // The capability for this poll. Once this server has said the web may poll, a poll never waits on /api/models again:
+  // an old answer is refreshed alongside the poll (6.99.27: after five minutes away, coming back read /api/models first
+  // and only then the questions). The first read of a page still waits for it, so an older server is never polled.
+  function capForPoll() {
+    if (usable(Q.cap)) { if (Date.now() - Q.capAt >= 5 * 60000) readCap(); return Promise.resolve(Q.cap); }
+    return readCap();
+  }
+  function onToday() { var st = W.state; return !!(st && st.pane === 'today'); }
+  // The wait before the next read: the server's pace, 3 s while one waits (an answer elsewhere clears it here too), and
+  // 3 s while this tab shows Today.
+  function nextWait(every) { return Q.items.length || onToday() ? Math.min(every, TODAY_POLL_MS) : every; }
   function schedule(ms) {
     clearTimeout(Q.timer);
     Q.timer = setTimeout(poll, ms);
   }
+  function landed() {
+    Q.inflight = false;
+    // QA 6.99.27 (N4): the read asked for while this one was out goes through nudge, so it waits out the 1 s gap too.
+    if (Q.again) { Q.again = false; nudge(); }
+  }
   function poll() {
     clearTimeout(Q.timer);
     if (Q.stopped || document.hidden || !signedIn()) return;
-    readCap().then(function (cap) {
-      if (!usable(cap)) { clearCards(); schedule(60000); return; }
-      return fetch('/api/session-questions?client=web', { headers: { 'X-COS-Web': '1' }, credentials: 'same-origin', cache: 'no-store' }).then(function (res) {
-        if (res.status === 401) { Q.stopped = true; clearCards(); return; }
-        if (!res.ok) { schedule(DEFAULT_POLL_MS); return; }
+    // One read on the wire at a time: a second ask while one is out becomes one more read when it lands.
+    if (Q.inflight) { Q.again = true; return; }
+    Q.inflight = true; Q.again = false; Q.lastPollAt = Date.now();
+    capForPoll().then(function (cap) {
+      if (!usable(cap)) { Q.again = false; landed(); clearCards(); schedule(60000); return; }
+      return fetch(pollUrl(), { headers: { 'X-COS-Web': '1' }, credentials: 'same-origin', cache: 'no-store' }).then(function (res) {
+        if (res.status === 401) { Q.again = false; landed(); Q.stopped = true; clearCards(); return; }
+        if (!res.ok) { schedule(DEFAULT_POLL_MS); landed(); return; }
         return res.json().then(function (d) {
-          if (!d || d.enabled === false) { clearCards(); schedule(60000); return; }
-          take(Array.isArray(d.items) ? d.items : []);
+          if (!d || d.enabled === false) { Q.again = false; landed(); clearCards(); schedule(60000); return; }
+          // Painted as soon as the read lands: take() draws the cards and repaints Today's Needs you and the pet.
+          take(Array.isArray(d.items) ? d.items : [], Array.isArray(d.settled) ? d.settled : []);
           var every = Number(d.pollIntervalMs) > 0 ? Number(d.pollIntervalMs) : DEFAULT_POLL_MS;
-          // While one waits, read faster so an answer from the glasses or the Mac clears it here too.
-          schedule(Q.items.length ? Math.min(every, 3000) : every);
+          schedule(nextWait(every));
+          landed();
         });
-      }, function () { schedule(DEFAULT_POLL_MS); });
-    });
+      }, function () { schedule(DEFAULT_POLL_MS); landed(); });
+    }).catch(function () { schedule(DEFAULT_POLL_MS); landed(); });
   }
-  function start() { Q.stopped = false; poll(); }
+  // Read now, unless a read went out under NUDGE_GAP_MS ago (then at the end of that gap) or one is on the wire (then
+  // once more when it lands). Today calls this when a session goes to waiting, so its question shows at once.
+  function nudge() {
+    if (Q.stopped || document.hidden || !signedIn()) return;
+    if (Q.inflight) { Q.again = true; return; }
+    var since = Date.now() - Q.lastPollAt;
+    schedule(since >= NUDGE_GAP_MS ? 0 : NUDGE_GAP_MS - since);
+  }
+  // The first read of the page goes at once; after that (back from hidden, a new sign-in), through nudge (QA 6.99.27, N4).
+  function start() { Q.stopped = false; if (!Q.lastPollAt) poll(); else nudge(); }
   function stop() { clearTimeout(Q.timer); }
 
   // ── state from a poll ─────────────────────────────────
-  function take(items) {
+  function take(items, settled) {
     var pending = items.filter(function (i) { return i && i.answerable !== false && (i.kind === 'question' || i.kind === 'approval'); });
-    var before = Q.items.map(function (i) { return i.id; }).join('|');
-    var after = pending.map(function (i) { return i.id; }).join('|');
+    var atMac = (settled || []).filter(function (i) { return i && i.waitingAtMac === true && (i.kind === 'question' || i.kind === 'approval'); });
+    var before = Q.items.map(function (i) { return i.id; }).join('|') + '/' + Q.atMac.map(function (i) { return i.id; }).join('|');
+    var after = pending.map(function (i) { return i.id; }).join('|') + '/' + atMac.map(function (i) { return i.id; }).join('|');
+    // The words of a held card, kept while the server lists it either way, so one that goes back to the Mac still says
+    // what it asks. Only in memory.
+    pending.forEach(function (i) {
+      Q.seen[i.id] = { questions: (i.questions || []).map(function (q) { return String((q && q.question) || ''); }).filter(Boolean),
+        summary: i.approval && i.approval.summary ? String(i.approval.summary) : '' };
+    });
+    var listed = {}; pending.concat(atMac).forEach(function (i) { listed[i.id] = 1; });
+    Object.keys(Q.seen).forEach(function (id) { if (!listed[id]) delete Q.seen[id]; });
+    Q.atMac = atMac;
+    // Answered on any screen: the session list may still call the session waiting for a moment; this says it is not.
+    (settled || []).forEach(function (i) {
+      if (i && i.resolution === 'answered' && i.sessionId && !Q.answered[i.id]) Q.answered[i.id] = { sessionId: String(i.sessionId).toLowerCase(), at: Date.parse(i.settledAt) || Date.now() };
+    });
+    Object.keys(Q.answered).forEach(function (id) { if (Date.now() - Q.answered[id].at > ANSWERED_MS) delete Q.answered[id]; });
     var ids = {}; pending.forEach(function (i) { ids[i.id] = 1; });
-    Object.keys(Q.picks).forEach(function (id) { if (!ids[id]) { delete Q.picks[id]; delete Q.armed[id]; delete Q.notes[id]; delete Q.answerIds[id]; } });
+    Object.keys(Q.picks).forEach(function (id) { if (!ids[id]) { delete Q.picks[id]; delete Q.armed[id]; delete Q.notes[id]; delete Q.answerIds[id]; delete Q.missing[id]; } });
     pending.forEach(function (i) {
       if (!Q.picks[i.id]) Q.picks[i.id] = (i.questions || []).map(function () { return { labels: [], other: '' }; });
     });
     Q.items = pending;
     // A card that is already drawn is never redrawn by a poll: a half-typed Other answer stays as it is.
-    if (before !== after) render();
+    if (before !== after) { render(); changed(); }
   }
-  function clearCards() { if (Q.items.length) { Q.items = []; render(); } }
+  function clearCards() { if (Q.items.length || Q.atMac.length) { Q.items = []; Q.atMac = []; render(); changed(); } }
+  // Today's Needs you says, per session, whether it can be answered here or waits on the Mac.
+  function changed() { if (W.today && W.today.questionsChanged) { try { W.today.questionsChanged(); } catch (_e) {} } }
 
   // ── drawing ───────────────────────────────────────────
   function complete(item) {
@@ -115,30 +213,91 @@
     var text = Q.notes[item.id] || '';
     return '<p class="sq-note' + (text ? '' : ' hidden') + '" data-sq-note="' + esc(item.id) + '" role="status">' + esc(text) + '</p>';
   }
-  function questionCard(item) {
+  // The card reads like Claude Code's own question in the terminal (Miles 11/07): a strip naming each question, ☒ once
+  // it has an answer, then ✓ Submit; each question in bold, numbered options with their descriptions under them, Other
+  // as the last number, typed in place; keys 1 to 9 pick while a question has focus. Then the answers to review, and
+  // Submit, tap then tap again. Stacked rather than one question per page: Today's sheet is at most 480 px wide, folded
+  // or not, and a stacked card keeps every choice in view while you review. The strip jumps to each part.
+  function qLabel(q, qi) { return q && q.header ? String(q.header) : 'Question ' + (qi + 1); }
+  function answerWords(item, qi) {
+    var p = (Q.picks[item.id] || [])[qi] || { labels: [], other: '' };
+    var parts = p.labels.slice();
+    if (p.other.trim()) parts.push(p.other.trim());
+    return parts.join(', ');
+  }
+  function stepText(item, qi) { return (answerWords(item, qi) ? '☒ ' : '☐ ') + qLabel(item.questions[qi], qi); }
+  function stripHtml(item) {
+    var qs = item.questions || [];
+    if (qs.length < 2) return '';
+    return '<nav class="sq-steps" aria-label="Questions">' + qs.map(function (q, qi) {
+      return '<button type="button" class="sq-step" data-sq="step" data-sq-id="' + esc(item.id) + '" data-sq-step="' + qi + '">' + esc(stepText(item, qi)) + '</button>';
+    }).join('') + '<button type="button" class="sq-step" data-sq="step" data-sq-id="' + esc(item.id) + '" data-sq-step="submit">✓ Submit</button></nav>';
+  }
+  function reviewRows(item) {
+    return (item.questions || []).map(function (q, qi) {
+      var a = answerWords(item, qi);
+      return '<li><span class="sq-review-q">' + esc(qLabel(q, qi)) + '</span><span class="sq-review-a' + (a ? '' : ' empty') + '">' + esc(a || 'Not answered yet') + '</span></li>';
+    }).join('');
+  }
+  function reviewHtml(item) {
+    if ((item.questions || []).length < 2) return '';
+    return '<div class="sq-review" data-sq-review="' + esc(item.id) + '"><p class="sq-review-head">Your answers</p><ol class="sq-review-list">' + reviewRows(item) + '</ol></div>';
+  }
+  // 6.99.27 (Miles's phone, 11/07 09:32: "It's not allowing me to answer the Qs"): Submit was greyed out until every
+  // question had an answer, below the fold on a long card, and a multi-select said "Pick any that apply" though the broker
+  // takes no empty answer (validateQuestionAnswers: `unanswered`). Now the card says what each question needs, keeps
+  // its progress and the answer button in a footer that stays on screen, and a tap with something missing goes to it.
+  function needText(q) { return q.multiSelect ? 'Pick one or more.' : 'Pick one.'; }
+  function answeredCount(item) { var n = 0; (item.questions || []).forEach(function (_q, qi) { if (answerWords(item, qi)) n++; }); return n; }
+  function firstMissing(item, after) {
+    var qs = item.questions || [], n = qs.length;
+    for (var k = 1; k <= n; k++) { var qi = ((after == null ? -1 : after) + k) % n; if (!answerWords(item, qi)) return qi; }
+    return -1;
+  }
+  function progressText(item) {
+    var qs = item.questions || [], done = answeredCount(item), miss = Q.missing[item.id];
+    if (miss != null && !complete(item)) return qLabel(qs[miss], miss) + ' still needs an answer. ' + needText(qs[miss]);
+    if (qs.length < 2) return done ? 'Ready to submit.' : 'Not answered yet. ' + needText(qs[0]);
+    return done + ' of ' + qs.length + ' answered';
+  }
+  function sendText(id) {
+    if (Q.sending[id]) return 'Submitting…';
+    if (Q.armed[id] === 'send') return 'Tap again to submit';
+    var item = itemOf(id);
+    return item && (item.questions || []).length > 1 ? 'Review and submit' : 'Submit';
+  }
+  function questionCard(item, scope) {
     var picks = Q.picks[item.id] || [];
     var sending = !!Q.sending[item.id];
+    var single = (item.questions || []).length < 2;
     var blocks = (item.questions || []).map(function (q, qi) {
       var p = picks[qi] || { labels: [], other: '' };
       var type = q.multiSelect ? 'checkbox' : 'radio';
-      var name = 'sq-' + item.id + '-' + qi;
-      return '<fieldset class="sq-q"><legend class="sq-q-text">' + esc(q.question) + (q.header ? ' <span class="sq-q-tag">' + esc(q.header) + '</span>' : '') + '</legend>' +
-        (q.multiSelect ? '<p class="sq-fine">Pick any that apply.</p>' : '') +
+      var name = (scope || 'sq') + '-' + item.id + '-' + qi;
+      return '<fieldset class="sq-q" data-sq-qblock="' + qi + '" data-sq-id="' + esc(item.id) + '"><legend class="sq-q-text">' + esc(q.question) +
+          (single && q.header ? ' <span class="sq-q-tag">' + esc(q.header) + '</span>' : '') + '</legend>' +
+        '<p class="sq-need" data-sq-need="' + qi + '" data-state="' + (answerWords(item, qi) ? 'done' : 'todo') + '">' + esc(needText(q)) + '</p>' +
         '<div class="sq-options">' + q.options.map(function (o, oi) {
           var on = p.labels.indexOf(o.label) >= 0;
           return '<label class="sq-option"><input type="' + type + '" name="' + esc(name) + '" data-sq-pick data-sq-id="' + esc(item.id) + '" data-q="' + qi + '" data-o="' + oi + '"' + (on ? ' checked' : '') + (sending ? ' disabled' : '') + '>' +
+            '<span class="sq-num" aria-hidden="true">' + (oi + 1) + '.</span>' +
             '<span class="sq-option-text"><span class="sq-option-label">' + esc(o.label) + '</span>' + (o.description ? '<span class="sq-option-desc">' + esc(o.description) + '</span>' : '') + '</span></label>';
-        }).join('') + '</div>' +
-        '<input class="field sq-other" type="text" maxlength="2000" placeholder="Other: type your own answer" aria-label="Your own answer" data-sq-other data-sq-id="' + esc(item.id) + '" data-q="' + qi + '" value="' + esc(p.other) + '"' + (sending ? ' disabled' : '') + '>' +
-        '</fieldset>';
+        }).join('') +
+        '<label class="sq-option sq-option-other"><span class="sq-num" aria-hidden="true">' + (q.options.length + 1) + '.</span>' +
+          '<input class="field sq-other" type="text" maxlength="2000" placeholder="Other: type your own answer" aria-label="Your own answer" data-sq-other data-sq-id="' + esc(item.id) + '" data-q="' + qi + '" value="' + esc(p.other) + '"' + (sending ? ' disabled' : '') + '></label>' +
+        '</div></fieldset>';
     }).join('');
-    var armed = Q.armed[item.id] === 'send';
     return '<article class="sq-card" data-sq-card="' + esc(item.id) + '" data-kind="question">' +
       '<header class="sq-head"><h2 class="sq-title">' + esc(engine(item)) + ' has a question</h2><span class="sq-secs" data-sq-secs="' + esc(item.id) + '">' + esc(timeLeft(secondsLeft(item))) + '</span></header>' +
-      blocks +
-      '<div class="sq-acts"><button type="button" class="cx-btn primary sq-send" data-sq="send" data-sq-id="' + esc(item.id) + '"' + (sending || !complete(item) ? ' disabled' : '') + '>' + (sending ? 'Sending…' : armed ? 'Tap again to send' : 'Send') + '</button>' +
+      stripHtml(item) + blocks + reviewHtml(item) +
+      '<p class="sq-fine sq-keys">Type a number to pick.</p>' +
+      // Sticky to the bottom of the screen while the card is on it (questions.css): the progress, and the button that
+      // always answers: it never greys out for a missing answer, it goes to it.
+      '<div class="sq-foot" data-sq-foot="' + esc(item.id) + '">' +
+        '<p class="sq-progress" data-sq-progress="' + esc(item.id) + '" role="status"' + (Q.missing[item.id] != null && !complete(item) ? ' data-alert="1"' : '') + '>' + esc(progressText(item)) + '</p>' +
+        '<div class="sq-acts"><button type="button" class="cx-btn primary sq-send" data-sq="send" data-sq-id="' + esc(item.id) + '"' + (sending ? ' disabled' : '') + '>' + sendText(item.id) + '</button>' +
         '<button type="button" class="link-btn sq-leave" data-sq="leave" data-sq-id="' + esc(item.id) + '"' + (sending ? ' disabled' : '') + '>Leave for the Mac</button></div>' +
-      noteHtml(item) + '</article>';
+        noteHtml(item) + '</div></article>';
   }
   function approvalCard(item) {
     var a = item.approval || { tool: item.tool, summary: '', detail: '' };
@@ -153,28 +312,88 @@
         '<button type="button" class="link-btn sq-leave" data-sq="leave" data-sq-id="' + esc(item.id) + '"' + (sending ? ' disabled' : '') + '>Leave for the Mac</button></div>' +
       noteHtml(item) + '</article>';
   }
-  function render() {
+  // A question or an approval the Mac's own prompt waits on: what it asks when this page saw it held, and where to answer.
+  // No buttons: nothing here can deliver an answer to that prompt.
+  function macCard(item) {
+    var words = Q.seen[item.id] || { questions: [], summary: '' };
+    var title = item.kind === 'approval' ? engine(item) + ' wants to use ' + (item.tool || 'a tool') : engine(item) + ' has a question';
+    var body = item.kind === 'approval'
+      ? (words.summary ? '<pre class="sq-command">' + esc(words.summary) + '</pre>' : '')
+      : words.questions.map(function (q) { return '<p class="sq-q-text sq-mac-q">' + esc(q) + '</p>'; }).join('');
+    return '<article class="sq-card sq-mac" data-sq-mac="' + esc(item.id) + '" data-kind="' + esc(item.kind) + '">' +
+      '<header class="sq-head"><h2 class="sq-title">' + esc(title) + '</h2></header>' + body +
+      '<p class="sq-mac-line">' + esc(MAC_LINE) + '</p></article>';
+  }
+  function atMacFor(sessionId) {
+    // Every item names its session (the broker validates it), so no session asked for matches none: the top of every
+    // pane never draws a Mac card.
+    var want = String(sessionId || '').toLowerCase();
+    return Q.atMac.filter(function (i) { return String(i.sessionId || '').toLowerCase() === want; });
+  }
+  // True when this session's newest event here is an answer (from this page or any other screen) of the last two
+  // minutes, with nothing held for it now and nothing at the Mac since.
+  function answeredFor(sessionId) {
+    var want = String(sessionId || '').toLowerCase();
+    if (!want || itemsFor(want).length) return false;
+    var at = 0, macAt = 0;
+    Object.keys(Q.answered).forEach(function (id) { var a = Q.answered[id]; if (a.sessionId === want && Date.now() - a.at <= ANSWERED_MS) at = Math.max(at, a.at); });
+    atMacFor(want).forEach(function (i) { macAt = Math.max(macAt, Date.parse(i.settledAt) || Date.parse(i.createdAt) || 0); });
+    return at > 0 && at >= macAt;
+  }
+  function wordsOf(id) { var w = Q.seen[id]; return w ? { questions: w.questions.slice(), summary: w.summary } : null; }
+  // Other places can show the cards for one session (Today's overlay, panes/today-actions.js): the same items, picks,
+  // answer ids and posts, drawn into their own element. A mount is dropped when its element leaves the page.
+  var mounts = [];
+  function hostsOf() {
+    mounts = mounts.filter(function (m) { return m.el.isConnected !== false; });
+    return [{ el: host, sessionId: null, scope: 'sq' }].concat(mounts);
+  }
+  function itemsFor(sessionId) {
+    var want = String(sessionId || '').toLowerCase();
+    return Q.items.filter(function (i) { return !want || String(i.sessionId || '').toLowerCase() === want; });
+  }
+  function drawInto(m) {
     var active = document.activeElement;
-    var focus = active && active.hasAttribute && active.hasAttribute('data-sq-other') ? { id: active.getAttribute('data-sq-id'), q: active.getAttribute('data-q'), start: active.selectionStart, end: active.selectionEnd } : null;
-    host.innerHTML = Q.items.map(function (i) { return i.kind === 'approval' ? approvalCard(i) : questionCard(i); }).join('');
-    host.hidden = !Q.items.length;
+    var focus = active && active.hasAttribute && active.hasAttribute('data-sq-other') && m.el.contains && m.el.contains(active) ? { id: active.getAttribute('data-sq-id'), q: active.getAttribute('data-q'), start: active.selectionStart, end: active.selectionEnd } : null;
+    var list = itemsFor(m.sessionId), mac = atMacFor(m.sessionId);
+    m.el.innerHTML = list.map(function (i) { return i.kind === 'approval' ? approvalCard(i) : questionCard(i, m.scope); }).join('') + mac.map(macCard).join('');
+    m.el.hidden = !list.length && !mac.length;
     if (focus) {
-      var box = host.querySelector('[data-sq-other][data-sq-id="' + focus.id + '"][data-q="' + focus.q + '"]');
+      var box = m.el.querySelector('[data-sq-other][data-sq-id="' + focus.id + '"][data-q="' + focus.q + '"]');
       if (box) { box.focus({ preventScroll: true }); try { box.setSelectionRange(focus.start, focus.end); } catch (_e) {} }
     }
+    if (m.onChange) { try { m.onChange(list.length, mac.length); } catch (_e) {} }
+  }
+  function render() {
+    hostsOf().forEach(drawInto);
     clearInterval(Q.tick);
     if (Q.items.length) Q.tick = setInterval(tickSeconds, 1000);
   }
   function itemOf(id) { for (var i = 0; i < Q.items.length; i++) if (Q.items[i].id === id) return Q.items[i]; return null; }
   // The seconds move without a redraw (a redraw would drop a half-typed answer).
   function tickSeconds() {
-    host.querySelectorAll('[data-sq-secs]').forEach(function (el) { var it = itemOf(el.getAttribute('data-sq-secs')); if (it) el.textContent = timeLeft(secondsLeft(it)); });
+    hostsOf().forEach(function (m) {
+      m.el.querySelectorAll('[data-sq-secs]').forEach(function (el) { var it = itemOf(el.getAttribute('data-sq-secs')); if (it) el.textContent = timeLeft(secondsLeft(it)); });
+    });
   }
   function patchCard(id) {
-    var item = itemOf(id), card = host.querySelector('[data-sq-card="' + id + '"]');
-    if (!item || !card) return render();
+    var item = itemOf(id), cards = [];
+    hostsOf().forEach(function (m) { var c = m.el.querySelector('[data-sq-card="' + id + '"]'); if (c) cards.push(c); });
+    if (!item || !cards.length) return render();
+    cards.forEach(function (card) { patchOne(card, id, item); });
+  }
+  function patchOne(card, id, item) {
     var send = card.querySelector('[data-sq="send"]');
-    if (send) { send.disabled = !!Q.sending[id] || !complete(item); send.textContent = Q.sending[id] ? 'Sending…' : Q.armed[id] === 'send' ? 'Tap again to send' : 'Send'; }
+    if (send) { send.disabled = !!Q.sending[id]; send.textContent = sendText(id); }
+    var progress = card.querySelector('[data-sq-progress]');
+    if (progress && item.kind === 'question') {
+      progress.textContent = progressText(item);
+      if (Q.missing[id] != null && !complete(item)) progress.setAttribute('data-alert', '1'); else progress.removeAttribute('data-alert');
+    }
+    card.querySelectorAll('[data-sq-need]').forEach(function (need) { need.setAttribute('data-state', answerWords(item, Number(need.getAttribute('data-sq-need'))) ? 'done' : 'todo'); });
+    // The strip's ☐ and ☒ and the answers to review follow each pick, without redrawing the boxes being typed in.
+    card.querySelectorAll('[data-sq-step]').forEach(function (step) { var n = step.getAttribute('data-sq-step'); if (n !== 'submit') step.textContent = stepText(item, Number(n)); });
+    var review = card.querySelector('[data-sq-review] .sq-review-list'); if (review) review.innerHTML = reviewRows(item);
     var allow = card.querySelector('[data-sq="allow"]'); if (allow) allow.textContent = Q.armed[id] === 'allow' ? 'Tap again to allow' : 'Allow once';
     var deny = card.querySelector('[data-sq="deny"]'); if (deny) deny.textContent = Q.armed[id] === 'deny' ? 'Tap again to deny' : 'Deny';
     var note = card.querySelector('[data-sq-note]'); if (note) { note.textContent = Q.notes[id] || ''; note.classList.toggle('hidden', !Q.notes[id]); }
@@ -186,26 +405,47 @@
     handed_to_desk: 'The Mac has this one now. Answer it there.', hook_gone: 'The session stopped waiting for this answer.',
     not_found: 'This question is gone.', invalid_answer: 'That answer was not accepted. Check each question has a choice.'
   };
+  // QA round 1: an answer that never reached the server (no HTTP status: offline, a dropped link, a timeout) says so in
+  // plain words, with the button to tap; the retry goes under the same clientAnswerId, so the server replays it.
+  function unreachable(item, what) {
+    // QA 6.99.27 (User 7): the button's own name. A card with more than one question says Review and submit.
+    var tap = what === 'leave' ? 'Leave for the Mac' : item && item.kind === 'approval' ? (what === 'deny' ? 'Deny' : 'Allow once')
+      : item && (item.questions || []).length > 1 ? 'Review and submit' : 'Submit';
+    return 'Could not reach your Mac. Tap ' + tap + ' to retry.';
+  }
+  // Answered, here or on another screen: recorded before the card is redrawn (a waiting sheet reads it as it repaints),
+  // then Today stops pointing at the Mac and reads its lists again.
+  function noteAnswered(item, id) { if (item && item.sessionId) Q.answered[id] = { sessionId: String(item.sessionId).toLowerCase(), at: Date.now() }; }
+  function answeredTold() {
+    changed();
+    if (W.today && W.today.refresh) { try { W.today.refresh(); } catch (_e) {} }
+  }
   function post(id, body, doneLine) {
     Q.sending[id] = 1; Q.armed[id] = ''; Q.notes[id] = '';
     if (!Q.answerIds[id]) Q.answerIds[id] = answerId();
     body.clientAnswerId = Q.answerIds[id];
     render();
+    var asked = itemOf(id);
     api('/api/session-questions/' + encodeURIComponent(id) + '/answer', { method: 'POST', body: body, timeoutMs: 20000 }).then(function () {
       delete Q.sending[id];
+      noteAnswered(asked, id);
       Q.items = Q.items.filter(function (i) { return i.id !== id; });
-      render();
+      render(); answeredTold();
       W.toast(doneLine);
       schedule(500);
     }, function (err) {
       delete Q.sending[id];
       var settled = err && REFUSED[err.code] && err.code !== 'invalid_answer';
       if (settled) {
+        if (err.code === 'already_answered') noteAnswered(asked, id);
         Q.items = Q.items.filter(function (i) { return i.id !== id; });
-        render(); W.toast(REFUSED[err.code]); schedule(500); return;
+        render();
+        if (err.code === 'already_answered') answeredTold(); else changed();
+        W.toast(REFUSED[err.code]); schedule(500); return;
       }
       // A timeout or a lost answer: the same clientAnswerId goes again on the next tap and the server replays it.
-      Q.notes[id] = REFUSED[err && err.code] || ('Not sent: ' + ((err && err.message) || 'the Mac did not answer') + ' Tap again to retry.');
+      Q.notes[id] = REFUSED[err && err.code] || (err && err.status == null ? unreachable(asked, body.decision || 'send')
+        : 'Not sent: ' + ((err && err.message) || 'the Mac did not answer') + ' Tap again to retry.');
       render();
     });
   }
@@ -219,11 +459,51 @@
     });
     post(item.id, { answers: answers }, 'Sent to ' + engine(item) + '.');
   }
-  host.addEventListener('click', function (e) {
+  // Scroll a part of the card into view: smooth unless reduced motion asks otherwise. Questions carry a scroll margin
+  // (questions.css) so the top bar and the sticky footer never cover them.
+  function bringIn(el, block) {
+    if (!el || !el.scrollIntoView) return;
+    var still = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    el.scrollIntoView({ block: block || 'start', behavior: still ? 'auto' : 'smooth' });
+  }
+  function goToQuestion(card, qi) {
+    var to = card && card.querySelector('[data-sq-qblock="' + qi + '"]');
+    bringIn(to, 'start');
+    var f = to && to.querySelector('input');
+    if (f && f.focus && !f.disabled) f.focus({ preventScroll: true });
+  }
+  function goToSubmit(card) {
+    bringIn(card && card.querySelector('[data-sq-review]'), 'nearest');
+    var send = card && card.querySelector('[data-sq="send"]');
+    if (send && send.focus && !send.disabled) send.focus({ preventScroll: true });
+  }
+  // As in the terminal: a pick on a single-choice question moves on to the next one still unanswered, or to Submit.
+  var ADVANCE_MS = 160;
+  function advance(card, item, qi) {
+    if (!card || (item.questions || []).length < 2) return;
+    var next = firstMissing(item, qi);
+    setTimeout(function () { if (itemOf(item.id) && !Q.sending[item.id]) { if (next === -1) goToSubmit(card); else goToQuestion(card, next); } }, ADVANCE_MS);
+  }
+  function onClick(e) {
     var b = e.target.closest('[data-sq]');
     if (!b || b.disabled) return;
     var id = b.getAttribute('data-sq-id'), what = b.getAttribute('data-sq'), item = itemOf(id);
     if (!item) return;
+    var card = b.closest ? b.closest('.sq-card') : null;
+    if (what === 'step') {
+      // The strip brings a question to the top, or the answers and Submit into view.
+      var n = b.getAttribute('data-sq-step');
+      if (n === 'submit') goToSubmit(card); else goToQuestion(card, Number(n));
+      return;
+    }
+    if (what === 'send' && !complete(item)) {
+      // Something is missing: say which, and go to it. Never a greyed-out button that does nothing.
+      Q.armed[id] = '';
+      Q.missing[id] = firstMissing(item, null);
+      patchCard(id);
+      goToQuestion(card, Q.missing[id]);
+      return;
+    }
     if (what === 'leave') {
       Q.armed[id] = '';
       if (!Q.answerIds[id]) Q.answerIds[id] = answerId();
@@ -232,28 +512,73 @@
         delete Q.sending[id]; Q.items = Q.items.filter(function (i) { return i.id !== id; }); render(); W.toast('Left for the Mac.'); schedule(500);
       }, function (err) {
         delete Q.sending[id];
-        if (err && REFUSED[err.code] && err.code !== 'invalid_answer') { Q.items = Q.items.filter(function (i) { return i.id !== id; }); render(); W.toast(REFUSED[err.code]); return; }
-        Q.notes[id] = 'Not sent: ' + ((err && err.message) || 'the Mac did not answer'); render();
+        if (err && REFUSED[err.code] && err.code !== 'invalid_answer') { Q.items = Q.items.filter(function (i) { return i.id !== id; }); render(); changed(); W.toast(REFUSED[err.code]); return; }
+        Q.notes[id] = err && err.status == null ? unreachable(item, 'leave') : 'Not sent: ' + ((err && err.message) || 'the Mac did not answer'); render();
       });
       return;
     }
-    // Tap, then tap again: the first tap only arms the button.
-    if (Q.armed[id] !== what) { Q.armed[id] = what; patchCard(id); return; }
+    // Tap, then tap again: the first tap only arms the button, and the second counts only once the first has been on
+    // screen a moment (COSWeb.confirmReady, the rule Today's overlay uses), so a double tap never allows or sends.
+    if (Q.armed[id] !== what) {
+      Q.armed[id] = what; Q.armedAt[id] = Date.now(); patchCard(id);
+      if (what === 'send') goToSubmit(card);   // the first tap is the review: the answers come into view
+      return;
+    }
+    if (W.confirmReady && !W.confirmReady(Q.armedAt[id])) return;
     if (what === 'send') return sendAnswers(item);
     if (what === 'allow' || what === 'deny') return post(id, { decision: what }, what === 'allow' ? 'Allowed once.' : 'Denied.');
-  });
-  host.addEventListener('change', function (e) {
+  }
+  function onChange(e) {
     var t = e.target;
     if (!t.hasAttribute('data-sq-pick')) return;
-    var id = t.getAttribute('data-sq-id'), item = itemOf(id); if (!item) return;
-    var qi = Number(t.getAttribute('data-q')), q = item.questions[qi], label = q.options[Number(t.getAttribute('data-o'))].label;
-    var p = Q.picks[id][qi];
-    if (q.multiSelect) p.labels = t.checked ? p.labels.concat([label]) : p.labels.filter(function (l) { return l !== label; });
-    else { p.labels = [label]; p.other = ''; var box = host.querySelector('[data-sq-other][data-sq-id="' + id + '"][data-q="' + qi + '"]'); if (box) box.value = ''; }
+    var id = t.getAttribute('data-sq-id'), qi = Number(t.getAttribute('data-q')), item = itemOf(id);
+    if (!applyPick(id, qi, Number(t.getAttribute('data-o')), !!t.checked)) return;
+    if (!item.questions[qi].multiSelect) advance(t.closest ? t.closest('.sq-card') : null, item, qi);
+  }
+  // One pick, from a tap or a number key: the model first, then every drawn copy of the card follows it.
+  function applyPick(id, qi, oi, checked) {
+    var item = itemOf(id); if (!item || Q.sending[id]) return false;
+    var q = item.questions[qi]; if (!q || !q.options[oi]) return false;
+    var label = q.options[oi].label, p = Q.picks[id][qi];
+    if (q.multiSelect) p.labels = checked ? (p.labels.indexOf(label) >= 0 ? p.labels : p.labels.concat([label])) : p.labels.filter(function (l) { return l !== label; });
+    else {
+      p.labels = [label]; p.other = '';
+      hostsOf().forEach(function (m) { var box = m.el.querySelector('[data-sq-other][data-sq-id="' + id + '"][data-q="' + qi + '"]'); if (box) box.value = ''; });
+    }
+    hostsOf().forEach(function (m) {
+      m.el.querySelectorAll('[data-sq-pick][data-sq-id="' + id + '"][data-q="' + qi + '"]').forEach(function (r) { r.checked = p.labels.indexOf(q.options[Number(r.getAttribute('data-o'))].label) >= 0; });
+    });
+    // A change after Submit was armed takes the arm back: review, then submit.
     Q.armed[id] = '';
+    if (Q.missing[id] != null) delete Q.missing[id];
     patchCard(id);
-  });
-  host.addEventListener('input', function (e) {
+    return true;
+  }
+  // Keys 1 to 9 while a question has focus, as in the terminal: the option with that number, or the last number to type
+  // your own. Never while typing in Other, and never with a modifier held.
+  function onKey(e) {
+    var k = e.key;
+    if (!/^[1-9]$/.test(k) || e.metaKey || e.ctrlKey || e.altKey) return;
+    var t = e.target;
+    if (!t || !t.closest || (t.hasAttribute && t.hasAttribute('data-sq-other'))) return;
+    var block = t.closest('[data-sq-qblock]');
+    if (!block) return;
+    var id = block.getAttribute('data-sq-id'), qi = Number(block.getAttribute('data-sq-qblock')), item = itemOf(id);
+    var q = item && item.questions[qi], n = Number(k);
+    if (!q || Q.sending[id]) return;
+    if (n <= q.options.length) {
+      var label = q.options[n - 1].label, on = (Q.picks[id][qi].labels.indexOf(label) >= 0);
+      e.preventDefault();
+      applyPick(id, qi, n - 1, q.multiSelect ? !on : true);
+      var input = block.querySelector('[data-sq-pick][data-o="' + (n - 1) + '"]');
+      if (input && input.focus) input.focus({ preventScroll: true });
+      if (!q.multiSelect) advance(block.closest ? block.closest('.sq-card') : null, item, qi);
+    } else if (n === q.options.length + 1) {
+      var other = block.querySelector('[data-sq-other]');
+      if (other && other.focus) { e.preventDefault(); other.focus(); }
+    }
+  }
+  function onInput(e) {
     var t = e.target;
     if (!t.hasAttribute('data-sq-other')) return;
     var id = t.getAttribute('data-sq-id'), item = itemOf(id); if (!item) return;
@@ -262,14 +587,44 @@
     // Single choice: typing your own answer clears the picked option, as on the phone.
     if (!q.multiSelect && t.value.trim() && p.labels.length) {
       p.labels = [];
-      host.querySelectorAll('[data-sq-pick][data-sq-id="' + id + '"][data-q="' + qi + '"]').forEach(function (r) { r.checked = false; });
+      hostsOf().forEach(function (m) { m.el.querySelectorAll('[data-sq-pick][data-sq-id="' + id + '"][data-q="' + qi + '"]').forEach(function (r) { r.checked = false; }); });
     }
     Q.armed[id] = '';
+    if (Q.missing[id] != null) delete Q.missing[id];
     patchCard(id);
-  });
+  }
+  function listen(el) { el.addEventListener('click', onClick); el.addEventListener('change', onChange); el.addEventListener('input', onInput); el.addEventListener('keydown', onKey); }
+  listen(host);
+  // Draw this session's cards into `el` and keep them in step; `onChange(count)` hears each redraw.
+  function mount(el, sessionId, onChange) {
+    if (!el) return null;
+    var m = { el: el, sessionId: String(sessionId || '').toLowerCase(), scope: 'sqm' + (mounts.length + 1), onChange: onChange || null };
+    mounts.push(m); listen(el); drawInto(m);
+    if (!Q.stopped) nudge();
+    return { count: function () { return itemsFor(m.sessionId).length; }, unmount: function () { mounts = mounts.filter(function (x) { return x !== m; }); } };
+  }
+
+  // QA 6.99.27 (User 2): Today's own card (#sq-host) has a sticky footer, and iOS puts the keyboard over the layout
+  // viewport, so with Other focused the footer sat under it. The keyboard's height (what of the layout viewport the
+  // visible one leaves at the bottom) goes on the host as --sq-kb, and questions.css lifts the footer by it. Today's
+  // overlay needs none of this: its layer already follows the visible viewport (today-actions.js fit).
+  function keyboardInset() {
+    var vv = window.visualViewport;
+    if (!vv) return 0;
+    var inset = Math.round((window.innerHeight || 0) - (vv.height + vv.offsetTop));
+    return inset > 0 ? inset : 0;
+  }
+  function fitKeyboard() {
+    if (host.style && host.style.setProperty) host.style.setProperty('--sq-kb', keyboardInset() + 'px');
+  }
+  if (window.visualViewport) { window.visualViewport.addEventListener('resize', fitKeyboard); window.visualViewport.addEventListener('scroll', fitKeyboard); }
 
+  // Hidden: no reads at all (a phone in a pocket spends nothing). Visible again: one read at once (within the 1 s gap).
   document.addEventListener('visibilitychange', function () { if (document.hidden) stop(); else if (signedIn()) start(); });
   W.onShell(function () { start(); });
+  // Coming to Today: a read at once (within the nudge gap), then every 3 s while it stays on screen.
+  if (W.onRoute) W.onRoute(function (r) { if (r && r.pane === 'today') nudge(); });
 
-  W.sessionQuestions = { _state: Q, _take: take, _render: render, poll: poll };
+  W.sessionQuestions = { _state: Q, _take: take, _render: render, _presenceAge: presenceAge, _pollUrl: pollUrl, _key: onKey, _advanceMs: ADVANCE_MS, _todayPollMs: TODAY_POLL_MS, _fitKeyboard: fitKeyboard, poll: poll, nudge: nudge, mount: mount,
+    itemsFor: itemsFor, atMacFor: atMacFor, answeredFor: answeredFor, wordsOf: wordsOf, macLine: MAC_LINE, answeredLine: ANSWERED_LINE };
 })();