@gotcos/glasses-server 7.0.7 → 7.0.27

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

@@ -32,6 +32,8 @@
     cap: null,            // capabilities.sessionQuestions, once read
     capAt: 0,
     items: [],            // pending items, oldest first
+    waiting: [],          // X1 contract: the questions live sessions wait on (held, at_mac, answered)
+    webAnswer: null,      // X1 final contract: what an answer from this page must carry right now (only with a hold switch on)
     picks: {},            // id -> [{ labels: [], other: '' }] per question
     armed: {},            // id -> 'send' | 'allow' | 'deny'
     armedAt: {},          // id -> when it was armed (COSWeb.confirmReady)
@@ -59,7 +61,12 @@
   // 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).";
+  // W1 A5 (Miles 11/09, "there is no ability to answer the question"): said once, and honest that this page cannot answer it.
+  // Q1 M3 (X1 canary A1; lib/thread-turn-queue.ts:451): a message sent to a session held on its prompt is queued for the
+  // end of the turn. It does not answer the question, and nothing promises a way to answer it here.
+  var MAC_LINE = "Answer this at your Mac's prompt. A message sent from here does not answer it; it waits until the question is answered at the Mac.";
+  // A question that went straight to the Mac's prompt: no route carries its words (the hook keeps none), so say so.
+  var MAC_NO_WORDS = "COS cannot read this question's words from here. They show at the Mac's prompt.";
   var ANSWERED_LINE = 'Answered. The session carries on.';
   var ANSWERED_MS = 120000;
 
@@ -176,7 +183,7 @@
           // the sheets still hear that the failure is over.
           var was = Q.load;
           Q.load = 'ok';
-          take(Array.isArray(d.items) ? d.items : [], Array.isArray(d.settled) ? d.settled : []);
+          take(Array.isArray(d.items) ? d.items : [], Array.isArray(d.settled) ? d.settled : [], Array.isArray(d.waiting) ? d.waiting : null, d.webAnswer);
           if (was !== 'ok') tellMounts();
           var every = Number(d.pollIntervalMs) > 0 ? Number(d.pollIntervalMs) : DEFAULT_POLL_MS;
           schedule(nextWait(every));
@@ -207,7 +214,28 @@
   function stop() { clearTimeout(Q.timer); }
 
   // ── state from a poll ─────────────────────────────────
-  function take(items, settled) {
+  // ── X1 contract v1 (COORD 2026-11-09 21:35): `waiting[]`, every AskUserQuestion a live Claude session waits on that the
+  // server saw asked: state held (a COS surface can answer it now), at_mac (only the Mac's own prompt can) or answered
+  // (kept 120 s). Words only in memory, as on the server. Keyed by `<sessionId>:<toolUseId>`, never by session alone.
+  var WAITING_STATES = { held: 1, at_mac: 1, answered: 1 };
+  function waitingEntry(w) {
+    if (!w || typeof w.key !== 'string' || !WAITING_STATES[w.state] || typeof w.sessionId !== 'string') return null;
+    var qs = (Array.isArray(w.questions) ? w.questions : []).slice(0, 4).map(function (q) {
+      return { question: String((q && q.question) || ''), header: String((q && q.header) || ''), multiSelect: !!(q && q.multiSelect),
+        options: (q && Array.isArray(q.options) ? q.options : []).slice(0, 8).map(function (o) { return { label: String((o && o.label) || ''), description: String((o && o.description) || '') }; }) };
+    }).filter(function (q) { return q.question; });
+    return { key: w.key, sessionId: w.sessionId.toLowerCase(), provider: 'claude', toolUseId: typeof w.toolUseId === 'string' ? w.toolUseId : null, state: w.state,
+      answerable: w.answerable === true && w.state === 'held', heldId: typeof w.heldId === 'string' && /^pq_[a-f0-9]{24}$/.test(w.heldId) ? w.heldId : null,
+      questions: qs, askedAt: Date.parse(w.askedAt) || 0, answeredAt: Date.parse(w.answeredAt) || 0 };
+  }
+  function take(items, settled, waiting, webAnswer) {
+    // An older server sends no `waiting`: keep the last list only for a moment's read, never invent one.
+    Q.waiting = Array.isArray(waiting) ? waiting.map(waitingEntry).filter(Boolean) : [];
+    // X1 final contract (`webAnswer`, sent with `waiting` while a hold switch is on): { touchRequired, touchMaxMs,
+    // confirmApprovals }. Absent: the page learns any rule from a refusal, as before.
+    Q.webAnswer = webAnswer && typeof webAnswer === 'object'
+      ? { touchRequired: webAnswer.touchRequired === true, touchMaxMs: Number(webAnswer.touchMaxMs) > 0 ? Number(webAnswer.touchMaxMs) : 60000, confirmApprovals: webAnswer.confirmApprovals === true }
+      : null;
     var pending = items.filter(function (i) { return i && i.answerable !== false && (i.kind === 'question' || i.kind === 'approval'); });
     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('|');
@@ -249,9 +277,11 @@
       return n > 0 && (q.multiSelect || n === 1);
     });
   }
+  // X1 contract: a question held for the whole wait (fullHold) is on the Mac's screen too. Both answers count; the first wins.
+  var FULL_HOLD_LINE = 'Answer here or at your Mac. The first answer counts.';
   function noteHtml(item) {
     var text = Q.notes[item.id] || '';
-    return '<p class="sq-note' + (text ? '' : ' hidden') + '" data-sq-note="' + esc(item.id) + '" role="status">' + esc(text) + '</p>';
+    return (item.fullHold === true ? '<p class="sq-fullhold">' + esc(FULL_HOLD_LINE) + '</p>' : '') + '<p class="sq-note' + (text ? '' : ' hidden') + '" data-sq-note="' + esc(item.id) + '" role="status">' + esc(text) + '</p>';
   }
   // 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
@@ -357,11 +387,22 @@
   // 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) {
+    if (item.fromWaiting) {
+      var body0 = (item.questions || []).map(function (q) {
+        return '<p class="sq-q-text sq-mac-q">' + esc(q.question) + '</p>' + (q.options.length ? '<ul class="sq-mac-opts">' + q.options.map(function (o) {
+          return '<li>' + esc(o.label) + (o.description ? '<span class="sq-mac-desc"> ' + esc(o.description) + '</span>' : '') + '</li>';
+        }).join('') + '</ul>' : '');
+      }).join('') || '<p class="sq-mac-nowords">' + esc(MAC_NO_WORDS) + '</p>';
+      return '<article class="sq-card sq-mac" data-sq-mac="' + esc(item.id) + '" data-kind="question">' +
+        '<header class="sq-head"><h2 class="sq-title">' + esc(engine(item)) + ' has a question</h2></header>' + body0 +
+        '<p class="sq-mac-line">' + esc(MAC_LINE) + '</p></article>';
+    }
     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('');
+    if (!body) body = '<p class="sq-mac-nowords">' + esc(MAC_NO_WORDS) + '</p>';
     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>';
@@ -370,7 +411,24 @@
     // 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; });
+    // X1 contract: a question at the Mac's own prompt that this server saw asked has its words in `waiting`. One card per
+    // question, matched by tool_use_id: a held item that went back to the Mac and the waiting entry are the same question.
+    var waits = Q.waiting.filter(function (w) { return w.sessionId === want && w.state === 'at_mac'; });
+    var cards = waits.map(function (w) {
+      return { id: 'w:' + w.key, kind: 'question', sessionId: w.sessionId, provider: 'claude', toolUseId: w.toolUseId, fromWaiting: true, questions: w.questions };
+    });
+    var ids = {}; waits.forEach(function (w) { if (w.toolUseId) ids[w.toolUseId] = 1; });
+    var settled = Q.atMac.filter(function (i) {
+      if (String(i.sessionId || '').toLowerCase() !== want) return false;
+      if (i.toolUseId) return !ids[i.toolUseId];
+      // An older server gives a settled item no tool_use_id: show it only when no waiting entry speaks for the session.
+      return !waits.length;
+    });
+    return settled.concat(cards);
+  }
+  function waitingFor(sessionId) {
+    var want = String(sessionId || '').toLowerCase();
+    return Q.waiting.filter(function (w) { return w.sessionId === 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.
@@ -380,6 +438,12 @@
     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); });
+    // X1 contract: answered anywhere (the Mac's prompt or a COS surface) in the last 120 s, newer than any question still open.
+    Q.waiting.forEach(function (w) {
+      if (w.sessionId !== want) return;
+      if (w.state === 'answered' && Date.now() - w.answeredAt <= ANSWERED_MS) at = Math.max(at, w.answeredAt);
+      else if (w.state !== 'answered') macAt = Math.max(macAt, w.askedAt || Date.now());
+    });
     return at > 0 && at >= macAt;
   }
   function wordsOf(id) { var w = Q.seen[id]; return w ? { questions: w.questions.slice(), summary: w.summary } : null; }
@@ -458,10 +522,32 @@
 
   // ── answering ─────────────────────────────────────────
   var REFUSED = {
-    already_answered: 'Already answered, on the glasses or the Mac.', expired: 'Too late: the Mac took this back.',
-    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.'
+    // Q1 (D4 card review M2, same server): already_answered is another COS device (a lens, the phone, Control or a browser);
+    // an answer at the Mac comes back as handed_to_desk with reason retracted (RETRACTED_LINE).
+    already_answered: 'Already answered on another device.', expired: 'This question timed out here. Answer it at the Mac.',
+    handed_to_desk: 'Left for the Mac. Answer it there.', hook_gone: 'This question is no longer waiting.',
+    not_found: 'This question is gone.', invalid_answer: 'That answer was not accepted. Check each question has a choice.',
+    // X1 contract, web door with a full-hold flag on: none of these settle the card; the person taps again.
+    web_touch_required: 'Not sent: tap anywhere on this page, then answer again.',
+    // X1 final contract (Q1 O1): held, but not on your devices yet (the Mac has not been idle long enough). Not settled.
+    not_shown: 'Not sent: this question is not on your devices yet. Answer it at the Mac, or try again in a minute.',
+    confirm_required: 'Not sent: tap again to confirm.', confirm_invalid: 'Not sent: that confirmation ran out. Tap again to confirm.'
   };
+  var RETRACTED_LINE = 'Already answered at the Mac, or the session moved on.';
+  // The page's api() reads a body's `reason` before its `error` (other panes rely on that), so a refusal such as
+  // {error: 'handed_to_desk', reason: 'retracted'} or {error: 'invalid_answer', reason: 'client_answer_id'} arrives with the
+  // reason as its code and the error word as its message. Put the server's error word back as the code, the reason beside it.
+  function refusal(err) {
+    if (!err || err.status == null) return err;
+    var word = typeof err.message === 'string' ? err.message : '';
+    if (!REFUSED[err.code] && REFUSED[word]) { err.reason = err.code; err.code = word; }
+    return err;
+  }
+  function refusedLine(err) {
+    if (err && err.code === 'handed_to_desk' && err.reason === 'retracted') return RETRACTED_LINE;
+    return err ? REFUSED[err.code] : '';
+  }
+  var KEEPS_CARD = { invalid_answer: 1, web_touch_required: 1, confirm_required: 1, confirm_invalid: 1, not_shown: 1 };
   // 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) {
@@ -477,10 +563,37 @@
     changed();
     if (W.today && W.today.refresh) { try { W.today.refresh(); } catch (_e) {} }
   }
+  // X1 contract: the web door sends how long ago this page was last touched (the tap that sent it counts). An older server
+  // or a flags-off server ignores the field.
+  function withTouch(body) {
+    var age = presenceAge();
+    if (age !== null) body.presenceAgeMs = age;
+    return body;
+  }
+  function confirmThen(id, body, doneLine) {
+    Q.sending[id] = 1; render();
+    var c = withTouch({ decision: body.decision });
+    api('/api/session-questions/' + encodeURIComponent(id) + '/confirm', { method: 'POST', body: c, timeoutMs: 20000 }).then(function (d) {
+      if (!d || typeof d.confirmId !== 'string' || !/^pc_[a-f0-9]{24}$/.test(d.confirmId)) throw Object.assign(new Error('confirm'), { status: 403, code: 'confirm_invalid' });
+      body.confirmId = d.confirmId;
+      post(id, body, doneLine);
+    }, function (err) {
+      delete Q.sending[id];
+      err = refusal(err);
+      var settles = err && REFUSED[err.code] && !KEEPS_CARD[err.code];
+      if (settles) { Q.items = Q.items.filter(function (i) { return i.id !== id; }); render(); changed(); W.toast(refusedLine(err)); schedule(500); return; }
+      Q.notes[id] = refusedLine(err) || (err && err.status == null ? unreachable(itemOf(id), body.decision) : 'Not sent: ' + ((err && err.message) || 'the Mac did not answer') + ' Tap again to retry.');
+      render();
+    });
+  }
   function post(id, body, doneLine) {
+    // X1 final contract: when the server says approvals need a confirm, get it first rather than learn it from a refused
+    // answer. It still follows the person's second tap; a 403 confirm_required below stays the fallback.
+    if (body.decision && !body.confirmId && Q.webAnswer && Q.webAnswer.confirmApprovals) return confirmThen(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];
+    withTouch(body);
     render();
     var asked = itemOf(id);
     api('/api/session-questions/' + encodeURIComponent(id) + '/answer', { method: 'POST', body: body, timeoutMs: 20000 }).then(function () {
@@ -492,16 +605,22 @@
       schedule(500);
     }, function (err) {
       delete Q.sending[id];
-      var settled = err && REFUSED[err.code] && err.code !== 'invalid_answer';
+      err = refusal(err);
+      // X1 contract: an approval the server wants confirmed gets its confirm (bound to this item and decision, 60 s, single
+      // use) and goes once more. The person already tapped twice; nothing is sent without a second tap.
+      if (err && err.status === 403 && err.code === 'confirm_required' && body.decision && !body.confirmId) {
+        return confirmThen(id, body, doneLine);
+      }
+      var settled = err && REFUSED[err.code] && !KEEPS_CARD[err.code];
       if (settled) {
         if (err.code === 'already_answered') noteAnswered(asked, id);
         Q.items = Q.items.filter(function (i) { return i.id !== id; });
         render();
         if (err.code === 'already_answered') answeredTold(); else changed();
-        W.toast(REFUSED[err.code]); schedule(500); return;
+        W.toast(refusedLine(err)); 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] || (err && err.status == null ? unreachable(asked, body.decision || 'send')
+      Q.notes[id] = refusedLine(err) || (err && err.status == null ? unreachable(asked, body.decision || 'send')
         : 'Not sent: ' + ((err && err.message) || 'the Mac did not answer') + ' Tap again to retry.');
       render();
     });
@@ -566,11 +685,13 @@
       Q.armed[id] = '';
       if (!Q.answerIds[id]) Q.answerIds[id] = answerId();
       Q.sending[id] = 1; render();
-      api('/api/session-questions/' + encodeURIComponent(id) + '/answer', { method: 'POST', body: { clientAnswerId: Q.answerIds[id], handBack: true }, timeoutMs: 20000 }).then(function () {
+      api('/api/session-questions/' + encodeURIComponent(id) + '/answer', { method: 'POST', body: withTouch({ clientAnswerId: Q.answerIds[id], handBack: true }), timeoutMs: 20000 }).then(function () {
         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(); changed(); W.toast(REFUSED[err.code]); return; }
+        err = refusal(err);
+        if (err && REFUSED[err.code] && !KEEPS_CARD[err.code]) { Q.items = Q.items.filter(function (i) { return i.id !== id; }); render(); changed(); W.toast(refusedLine(err)); return; }
+        if (err && KEEPS_CARD[err.code]) { Q.notes[id] = refusedLine(err); render(); return; }
         Q.notes[id] = err && err.status == null ? unreachable(item, 'leave') : 'Not sent: ' + ((err && err.message) || 'the Mac did not answer'); render();
       });
       return;
@@ -726,6 +847,6 @@
   if (W.onRoute) W.onRoute(function (r) { if (r && r.pane === 'today') nudge(); });
 
   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,
+    itemsFor: itemsFor, atMacFor: atMacFor, waitingFor: waitingFor, answeredFor: answeredFor, wordsOf: wordsOf, fullHoldLine: FULL_HOLD_LINE, macLine: MAC_LINE, macNoWords: MAC_NO_WORDS, answeredLine: ANSWERED_LINE,
     loadState: function () { return Q.load; }, retry: function () { nudge(); } };
 })();

package/server/web-control/panes/sessions.css

@@ -492,3 +492,283 @@
 .u-breakdown summary::-webkit-details-marker { display: none; }
 .u-breakdown summary .u-chev { color: var(--accent); transform: rotate(-90deg); transition: transform 120ms ease; }
 .u-breakdown[open] summary .u-chev { transform: none; }
+
+/* ── the frame (7.0.23, step 1 of the chat-style Sessions; DESIGN_PLAN v2 "The frame") ──────────────────────────────
+   While Sessions shows its list and reader (app.js sxFrameSync sets html.sx-frame), the page is one screen, never
+   taller: the app shell is the visible box the keyboard kit publishes (--vv-top, --vv-h from viewportFit, as kb-chat
+   uses them), so the document has nothing left to scroll. The rail, the list and the reader's body each scroll by
+   themselves; the reader's header stays at its top and the dock (activity with Stop, the Mac's question, the question
+   cards, the reply box, its status and the queue) stays at its bottom. Layout, not a proven fix for the 20:16 report:
+   app.js sxFrameCrumb reports where the parts sit against the visible area. In a Safari tab (not the Home Screen app)
+   a fixed shell ends above Safari's own bottom bar; the app has no such bar. */
+html.sx-frame, html.sx-frame body { height: 100%; overflow: hidden; overscroll-behavior: none; }
+html.sx-frame body { min-height: 0; }
+html.sx-frame .app-shell {
+  position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100dvh); min-height: 0;
+  display: flex; flex-direction: column; overflow: hidden;
+}
+html.sx-frame .main-col { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
+html.sx-frame .topbar, html.sx-frame .navbar { flex: none; position: relative; }
+html.sx-frame .workspace {
+  flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
+  padding-bottom: calc(var(--safe-bottom) + 8px);
+}
+html.sx-frame #pane-sessions { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
+/* What sits over every pane (the Mac not answering, the sign-in ending, a session's waiting question cards) keeps its
+   place above Sessions, but never takes the screen: past 35 percent it scrolls by itself. */
+html.sx-frame #conn-notice, html.sx-frame #sq-host, html.sx-frame .workspace > :not(.pane) { flex: none; }
+html.sx-frame #sq-host { max-height: 35%; overflow: auto; overscroll-behavior: contain; margin-bottom: 10px; }
+/* In the frame a waiting question is its one line at every width (questions.css shows it so under 600 px): a tap opens
+   the cards. The open session's own cards sit in the reader's dock either way. */
+html.sx-frame .sq-host .sq-banner { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 14px;
+  background: var(--panel); border: 1px solid color-mix(in srgb, var(--hot) 45%, var(--panel-border)); color: var(--ink); font: 600 15px/1.3 var(--body); text-align: left; }
+html.sx-frame .sq-host .sq-banner-text { flex: 1; min-width: 0; }
+html.sx-frame .sq-host .sq-banner-act { flex: none; color: var(--accent); }
+html.sx-frame .sq-host .sq-cards:not(.open) { display: none; }
+html.sx-frame #pane-sessions > .sx { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+html.sx-frame .sx-hero, html.sx-frame .sx-views { flex: none; }
+/* In the frame the Sessions header is one line (the same title, sources line, counts and Refresh), so the list and the
+   reader keep the height; the view switch keeps its own row. */
+html.sx-frame .sx-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 0; padding-bottom: 8px; margin-bottom: 0; }
+html.sx-frame .sx-hero .cx-glyph { display: none; }
+html.sx-frame .sx-hero .cx-hero-text { flex: 1 1 260px; display: flex; align-items: baseline; gap: 12px; min-width: 0; }
+html.sx-frame .sx-hero .cx-title { font-size: 22px; flex: none; }
+html.sx-frame .sx-hero .cx-detail-line { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+html.sx-frame .sx-hero .cx-stats { order: 2; margin-top: 0; flex: none; }
+html.sx-frame .sx-hero .cx-actions { order: 3; flex: none; }
+html.sx-frame .sx-views { margin: 4px 0 8px; }
+/* The reader's header in one row: the badge, the title on one line, Hide list; the subtitle is one line under it. */
+html.sx-frame .sx-head-line { flex-wrap: nowrap; }
+html.sx-frame .sx-reader-title { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20px; }
+html.sx-frame .sx-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
+html.sx-frame .sx-reader-head { padding-bottom: 8px; margin-bottom: 0; }
+html.sx-frame .sx-split { flex: 1 1 auto; min-height: 0; margin-top: 0; }
+html.sx-frame .sx-split > .split-list { min-height: 0; overflow: auto; overscroll-behavior: contain; }
+html.sx-frame .sx-split > .sx-reader { min-height: 0; flex-direction: column; overflow: hidden; }
+html.sx-frame .sx-reader-head { flex: none; }
+/* The conversation between the header and the dock; it opens at the newest turn (app.js sxToNewest). */
+.sx-body { min-height: 0; }
+html.sx-frame .sx-body { flex: 1 1 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; }
+/* The dock takes at most 72 percent of the reader (with the keyboard up, what the reader has below its head). 72, not 60:
+   at 951 by 539 with files, a queued note and the busy note, 60 left a 33 px window above the pinned reply box, too
+   short for a 44 px Cancel (dock_sweep). The reply box and its status always
+   show: what can grow above or below them (the activity, the queue) gives way or scrolls inside its own box. */
+html.sx-frame .sx-dock { flex: 0 0 auto; max-height: 72%; min-height: 0; display: flex; flex-direction: column; position: relative;
+  padding-top: 8px; border-top: 1px solid var(--hairline); }
+html.sx-frame .sx-dock > .sx-activity, html.sx-frame .sx-dock > .sx-mac-q { flex: none; }
+/* What it is doing now keeps about four lines in the dock and scrolls past that, so it never pushes the reply box out. */
+html.sx-frame .sx-dock > .sx-activity { flex: 0 4 auto; min-height: 32px; max-height: 96px; overflow: auto; }
+/* The reply part never shrinks: a dock capped at 60 percent with overflow hidden would clip the reply box instead (951 by
+   539, Go to the question shown: the box ran 17 px past the screen). What gives way is the activity; the queue inside the
+   reply part has its own cap and scrolls. */
+html.sx-frame .sx-dock .sx-chat { margin-top: 0; flex: none; display: flex; flex-direction: column; }
+html.sx-frame .sx-dock .sx-chat > * { flex: none; }
+/* Go to the question sits on the dock's top edge, over the last line of the conversation, so it takes no room from the
+   dock at any height (a dock line squeezed its own 44 px button on short screens). */
+html.sx-frame #session-reader > .sx-goq { position: absolute; right: 8px; left: auto; bottom: calc(var(--sx-dock-h, 120px) + 6px); margin: 0; z-index: 2;
+  padding: 0; border: 0; background: transparent; }
+/* Only the button shows there, so it covers the end of one line, not the conversation; the sentence stays for screen
+   readers. */
+html.sx-frame #session-reader > .sx-goq > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+html.sx-frame #session-reader > .sx-goq .cx-btn { background: var(--panel); border-color: color-mix(in srgb, var(--accent) 55%, var(--panel-border));
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
+/* The session's question cards end the conversation (app.js openSession), so they scroll with it; their own footer
+   (Submit) sticks to the bottom of the conversation the way it sticks to the page elsewhere. */
+html.sx-frame .sx-body #session-questions:not(:empty) { margin-top: 12px; }
+/* An empty status line under the reply box takes no room in the frame (it keeps its 20 px when it says something). */
+html.sx-frame .sx-dock #session-status:empty { min-height: 0; margin: 0; }
+html.sx-frame .sx-dock #session-queue { flex: none; max-height: none; overflow: visible; }
+/* With files in the reply box (7.0.23 regression, attach5_check): the chip row wrapped and grew (5 chips at 1119 wide
+   were 221 px), the reply form spilled past the reader's clipped bottom, and Send sat below the screen with nothing to
+   scroll (2 files on the open Duo; 1 file with the keyboard up at 449). The chip row now scrolls inside two rows (one
+   while typing), and the dock scrolls by itself as a last resort, so Send can always be reached. */
+/* THE DOCK RULE (lead 08:47, after three overflows: the reply box at 951 by 539, the sign-in screen, Send under files):
+   the dock never exceeds the visible height (it is capped inside the reader, which is inside the visible box); its
+   inside scrolls; and the reply box, Send included, is always in view, pinned to the dock's bottom while what is above
+   it scrolls. dock_sweep.cjs checks every combination the dock can hold at five sizes, with and without the keyboard. */
+html.sx-frame #session-reader { position: relative; }
+html.sx-frame .sx-dock { overflow-y: auto; overscroll-behavior: contain; }
+/* The reply part's own box is dissolved into the dock (display: contents) so the reply box can stick to the dock's
+   bottom: a sticky box cannot leave its parent, and .sx-chat also holds the queue. The reply box goes last; the
+   busy note, the status line and the queue sit above it and scroll with the dock. Its own rows are capped against the
+   visible height (--vv-h), so it always fits in the dock: the chip row, then the draft, each scroll inside. */
+html.sx-frame .sx-dock .sx-chat { display: contents; }
+html.sx-frame .sx-dock #session-form { order: 10; position: sticky; bottom: 0; z-index: 1; background: var(--page); }
+html.sx-frame .sx-dock #session-input { max-height: min(140px, calc(var(--vv-h, 600px) * 0.1)); }
+/* A swipe that reaches the end of the activity or the chip row carries on into the dock (no overscroll containment):
+   a swipe over the activity line used to stop there and never move the dock. */
+html.sx-frame .sx-dock #session-files:not(.hidden) { max-height: max(52px, min(104px, calc(var(--vv-h, 600px) * 0.1))); overflow-y: auto; }
+html.sx-frame.kb-up .sx-dock #session-files:not(.hidden) { max-height: 52px; }
+html.sx-frame.kb-up .sx-dock #session-input { max-height: min(4.5em, calc(var(--vv-h, 600px) * 0.17)); }
+
+/* Phone and narrow (under 760): one column at a time, the list or the reader, each filling the frame. */
+@media (max-width: 759px) {
+  html.sx-frame .sx-split { display: flex; flex-direction: column; }
+  html.sx-frame .sx-split > .split-list { flex: 1 1 auto; }
+  html.sx-frame .sx-split.reading > .sx-reader { flex: 1 1 auto; display: flex; }
+}
+/* From 600: the rail is a column of the shell and scrolls by itself (its labels from 1100 wide and 721 tall, control.css). */
+@media (min-width: 600px) {
+  html.sx-frame .app-shell { display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
+  html.sx-frame .rail { position: static; top: auto; height: auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+}
+@media (min-width: 1100px) and (min-height: 721px) {
+  html.sx-frame .app-shell { grid-template-columns: 248px minmax(0, 1fr); }
+}
+/* From 760: the list, the divider and the reader side by side, each the full height of the split. */
+@media (min-width: 760px) {
+  html.sx-frame .split.sx-split { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
+  html.sx-frame .sx-split > .split-list { position: static; top: auto; max-height: none; height: 100%; }
+  /* relative, not static: the divider's 44 px touch area (::before) is placed against it and must stay its own size. */
+  html.sx-frame .sx-handle { position: relative; top: auto; height: auto; align-self: stretch; }
+  html.sx-frame .sx-split > .sx-reader { display: flex; height: 100%; }
+}
+/* An on-screen keyboard up (app.js html.kb-up): the header goes to one line and the conversation keeps the rest. */
+html.sx-frame.kb-up .sx-hero, html.sx-frame.kb-up .sx-views, html.sx-frame.kb-up .sx-subtitle,
+html.sx-frame.kb-up .navbar, html.sx-frame.kb-up #conn-notice, html.sx-frame.kb-up #sq-host { display: none; }
+/* Short screens (under 600 tall, Comet's 951 x 539): the subtitle and counts step aside. */
+@media (max-height: 599px) {
+  /* The notices over the pane (the Mac not answering, the sign-in ending) are one line each: the same words, cut with
+     an ellipsis, their buttons kept. */
+  html.sx-frame .conn-notice { margin-bottom: 8px; gap: 6px; grid-template-columns: minmax(0, 1fr); }
+  html.sx-frame .conn-line { flex-wrap: nowrap; min-width: 0; padding: 6px 10px 6px 14px; }
+  html.sx-frame .conn-line > .btn { flex: none; }
+  html.sx-frame .conn-line > :not(.btn):not(button) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  html.sx-frame .conn-line .conn-sub { flex: 1 1 0; }
+  html.sx-frame #sq-host { margin-bottom: 8px; }
+  html.sx-frame .sq-host .sq-banner { min-height: 44px; padding: 6px 14px; }
+  html.sx-frame .sx-views { margin: 2px 0 6px; }
+  /* The Sessions header (title and Refresh) and the view switch share one row. */
+  html.sx-frame #pane-sessions > .sx { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 18px; }
+  html.sx-frame .sx-hero { grid-column: 1; grid-row: 1; flex-wrap: nowrap; padding-bottom: 6px; border-bottom: 0; background: none; margin: 0; padding-left: 0; padding-right: 0; }
+  html.sx-frame .sx-hero .cx-hero-text { flex: none; }
+  html.sx-frame .sx-views { grid-column: 2; grid-row: 1; align-self: center; margin: 0 0 6px; }
+  html.sx-frame .sx-split, html.sx-frame .sx-usage { grid-column: 1 / -1; grid-row: 2; }
+  html.sx-frame .sx-subtitle, html.sx-frame .sx-hero .cx-stats, html.sx-frame .sx-hero .cx-detail-line { display: none; }
+}
+html.sx-frame.kb-up .sx-reader-head { padding: 2px 0 6px; margin-bottom: 4px; }
+html.sx-frame.kb-up .sx-reader-title { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* While typing the reply area wins: the dock takes what it needs up to the whole reader below its head, and the
+   conversation gives way (it can reach 0 on a very short screen: 382 by 557 with the keyboard up). */
+html.sx-frame.kb-up .sx-dock { max-height: none; flex: 0 1 auto; }
+html.sx-frame.kb-up #session-input { max-height: 4.5em; }
+/* While typing, the dock drops the spacing around the reply box: at 382 by 557 with the keyboard up (267 px visible) the
+   dock needed 187 px inside its 155 and the reply box ran 18 px past the screen (MX's step 6 found the same in Messages). */
+html.sx-frame.kb-up .sx-dock { padding-top: 4px; }
+html.sx-frame.kb-up .sx-dock > .sx-activity { margin-bottom: 4px; }
+html.sx-frame.kb-up .sx-dock .sx-chat { padding-top: 0; }
+html.sx-frame.kb-up .sx-dock #session-form { margin-top: 0; }
+/* Touch at any size in the frame: app.css floors controls to 44 px only under 600 wide or 720 tall, so on the open Duo
+   (1119 by 787 at 0.85) Copy session was 32 px and the labelled rail's Settings 28 px (MX's step 6 found the same gap). */
+@media (any-pointer: coarse) {
+  html.sx-frame .sx-foot .cx-btn, html.sx-frame .rail-settings { min-height: 44px; }
+}
+
+/* ── the list (7.0.23, step 2b-1; DESIGN_PLAN v2 "The list", the 23:33 mock) ─────────────────────────────────────────
+   The list's own head (the Sessions menu, Search, one quiet line, the sort menu), then groups with plain headings and
+   rows divided by hairlines (no boxed cards). A row's state is on its left edge and always in words too; the open row
+   has the panel background and a 1 px outline, so selection never rests on colour alone. */
+.sx-lhead { display: grid; gap: 8px; padding: 2px 2px 8px; border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 3; background: var(--page); }
+/* Under 600 px the top bar already names Sessions; the view switch (Sessions, Usage, COS cost) stays for the other two. */
+@media (max-width: 599px) { .sx-lhead .sx-lh-top { display: none; } }
+@media (min-width: 600px) { .sx-views.sx-wide-hide { display: none; } }
+.sx-lh-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
+.sx-view-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font: 600 18px/1.1 var(--body); color: var(--ink); }
+.sx-view-btn .caret { width: 7px; height: 7px; border-right: 2px solid var(--sub); border-bottom: 2px solid var(--sub); transform: rotate(45deg) translateY(-2px); }
+.sx-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 200px; display: grid; padding: 6px; border-radius: 12px;
+  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
+.sx-menu.hidden { display: none; }
+.sx-menu [role='menuitem'] { min-height: 40px; padding: 0 12px; border-radius: 8px; text-align: left; font: 500 15px/1.2 var(--body); color: var(--ink); }
+.sx-menu [role='menuitem']:hover, .sx-menu [role='menuitem']:focus-visible { background: var(--qopen); }
+.sx-lhead .sx-tools { margin: 0; }
+.sx-tools-line { display: flex; align-items: center; gap: 8px; }
+.sx-quiet { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--sub); }
+.sx-tools-line .sx-select { margin-left: auto; }
+
+.sx-groups { padding-bottom: 8px; }
+.sx-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; margin: 0; padding: 14px 12px 6px; font: 600 13px/1.3 var(--body); color: var(--sub); }
+.sx-g:first-child .sx-gh { padding-top: 10px; }
+.sx-gh .n { font: 500 12.5px/1.3 var(--body); color: var(--tertiary); font-variant-numeric: tabular-nums; }
+.sx-gh.state { color: var(--ink); }
+.sx-gh.needs .n { color: var(--accent); }
+.sx-gh.working .n { color: var(--run-green); }
+button.sx-gh { align-items: center; text-align: left; min-height: 36px; }
+button.sx-gh:hover { color: var(--ink); }
+.sx-gh .fold { display: inline-flex; align-items: center; gap: 8px; }
+.sx-gh .chev { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -1px); }
+button.sx-gh[aria-expanded='false'] .chev { transform: rotate(-45deg); }
+.sx-rows { display: grid; }
+.sx-r { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 10px; }
+.sx-rows > .sx-r + .sx-r::before { content: ''; position: absolute; top: 0; left: 12px; right: 0; height: 1px; background: var(--hairline); }
+.sx-r:hover { background: color-mix(in srgb, var(--panel) 55%, transparent); }
+.sx-r[aria-selected='true'] { background: var(--panel); box-shadow: inset 0 0 0 1px var(--btn-border); }
+.sx-r[aria-selected='true']::before, .sx-r[aria-selected='true'] + .sx-r::before { background: transparent !important; }
+.sx-r-edge { position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; }
+.sx-r.running .sx-r-edge { background: var(--run-green); }
+.sx-r.waiting .sx-r-edge { background: var(--accent); }
+.sx-r.failed .sx-r-edge { background: var(--hot); }
+.sx-r-open { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: baseline; min-width: 0; min-height: 56px; padding: 9px 12px 9px 12px; text-align: left; color: inherit; width: 100%; }
+.sx-r-open:focus-visible { outline-offset: -2px; }
+.sx-r-title { font: 600 14px/1.3 var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.sx-r-time { font-size: 12px; line-height: 1.3; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.sx-r-sub { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--sub); }
+.sx-r-sub .sx-glyph { width: 18px; height: 18px; flex: none; }
+.sx-r-sub .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.sx-r-sub .t b.failed { color: var(--hot); font-weight: 600; }
+.sx-r-snip { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.4; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.sx-tag { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--panel-border); font: 600 11px/1 var(--body); color: var(--ink); }
+.sx-r.compact .sx-r-open { min-height: 40px; padding-top: 6px; padding-bottom: 6px; align-items: center; }
+.sx-r.compact .sx-r-title { font-weight: 500; }
+.sx-more-older { margin: 6px 12px 0; }
+/* Touch: every target in the list reaches 44 px. */
+@media (any-pointer: coarse) {
+  .sx-r-open { min-height: 58px; }
+  .sx-r.compact .sx-r-open { min-height: 44px; }
+  button.sx-gh, .sx-view-btn, .sx-menu [role='menuitem'] { min-height: 44px; }
+  .sx-lhead #sessions-q, .sx-lhead #sessions-sort { height: 44px; min-height: 44px; }
+}
+
+/* ── folders, COS pins and rename (7.0.23, step 2b-2) ── */
+.sx-r { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
+.sx-r-more { width: 32px; height: 32px; margin-right: 6px; border-radius: 8px; display: grid; place-items: center; color: var(--sub); font: 600 18px/1 var(--body); }
+.sx-r-more:hover, .sx-r-more[aria-expanded='true'] { background: var(--qopen); color: var(--ink); }
+.sx-r-orig { grid-column: 1 / -1; font-size: 12px; line-height: 1.3; color: var(--tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.sx-gh-row { display: flex; align-items: center; }
+.sx-gh-row .sx-gh { flex: 1 1 auto; }
+.sx-empty-folder { margin: 2px 12px 8px; font-size: 13px; color: var(--sub); }
+.sx-new-folder { flex: none; }
+.sx-org-note { margin: 0; font-size: 13px; color: var(--hot); }
+
+/* ── the list fits its column at every width (7.0.27; Miles 13:01 on 7.0.26, the open Duo) ──────────────────────────
+   THE RULE: at every list width from the divider's minimum (240 px) to its maximum the list's content fits the column, so
+   the column never scrolls sideways and nothing in it is cut. The head is one grid column that grows to its widest
+   item's min-content width; the reach line, New folder and the sort menu on one unwrapped row measured 272 px at the
+   minimum, so the head, the search field with it, and the column were 32 px too wide and the column panned on x. Now
+   the reach line has its own full-width row and New folder and the sort menu share the next one, wrapping under each
+   other if they must. A folder heading may shrink below its name, so a long folder name never widens the list, and
+   it ends in an ellipsis like a title (rows already could). Nothing is hidden to make it fit: width_sweep.cjs
+   drags the real divider from its minimum to its maximum and checks the fit (each rule here is killed there). */
+.sx-tools-line { flex-wrap: wrap; row-gap: 6px; }
+.sx-tools-line .sx-quiet { flex: 1 0 100%; }
+.sx-gh-row .sx-gh, .sx-gh .fold { min-width: 0; }
+.sx-gh .fold .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sx-org-note.hidden { display: none; }
+.sx-inline { display: grid; gap: 8px; padding: 10px 12px 12px; margin: 6px 0; border-radius: 10px; background: var(--qopen); }
+.sx-inline-label { font: 600 13px/1.3 var(--body); color: var(--ink); }
+.sx-inline-hint { margin: 0; font-size: 12.5px; color: var(--sub); }
+.sx-inline-acts { display: flex; flex-wrap: wrap; gap: 8px; }
+.sx-pop { position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 16px)); }
+.sx-pop .sx-pop-note { margin: 0; padding: 8px 12px; font-size: 13px; color: var(--sub); }
+.sx-pop [role='menuitemradio'] { min-height: 40px; padding: 0 12px; border-radius: 8px; text-align: left; font: 500 15px/1.2 var(--body); color: var(--ink); }
+.sx-pop [role='menuitemradio'][aria-checked='true']::after { content: ' (here)'; color: var(--sub); }
+.sx-pop [role='menuitemradio']:hover, .sx-pop [role='menuitemradio']:focus-visible { background: var(--qopen); }
+@media (any-pointer: coarse) {
+  .sx-r-more { width: 44px; height: 44px; }
+  .sx-pop [role='menuitemradio'], .sx-pop [role='menuitem'], .sx-new-folder, .sx-inline .cx-btn { min-height: 44px; }
+}
+
+/* Q1 (23:40): a question waits at the end of the conversation, out of view. */
+.sx-goq { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 6px 6px 6px 12px; border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--panel-border)); background: var(--panel); font-size: 14px; color: var(--ink); }
+.sx-goq[hidden] { display: none; }
+@media (any-pointer: coarse) { .sx-goq .cx-btn { min-height: 44px; } }

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

@@ -16,7 +16,7 @@
   var CATEGORIES = [
     { id: 'general', title: 'General', summary: 'How COS Control opens, its shortcut, Today and the setup guide.', mac: ['App', 'Activity home', 'Setup guide'] },
     { id: 'ai', title: 'AI and accounts', summary: 'The AI apps COS works through, your keys and the models behind Work.', mac: ['Your AI apps', 'Local model', 'Your own key', 'Search'] },
-    { id: 'glasses', title: 'Glasses and iPhone', summary: 'Pair your glasses and phone, and how videos reach this Mac.', mac: ['Devices', 'Video uploads'] },
+    { id: 'glasses', title: 'Glasses, phone and web', summary: 'Pair your glasses and phone, and how videos reach this Mac.', mac: ['Devices', 'Video uploads'] },
     { id: 'meetings', title: 'Meetings', summary: 'Recording, the meeting assistant, live cues and your meeting library.', mac: ['Recording', 'Meeting assistant', 'Library and sync'] },
     { id: 'dictation', title: 'Dictation', summary: 'Type by voice into any Mac app: shortcuts, sounds, text and AI polish.', mac: ['Dictation', 'Microphone', 'Shortcuts', 'Sounds and audio', 'Text', 'AI polish', 'History'] },
     { id: 'voice', title: 'Transcription and voice', summary: 'The engines and models that turn speech into text on this Mac.', mac: ['Voice setup', 'Models', 'Performance'] },

package/server/web-control/panes/today-actions.css

@@ -162,6 +162,41 @@ html.ta-open #sq-host { display: none; }
 .next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 0 16px 14px; }
 .next-actions:empty { display: none; }
 .next-actions .btn.small { min-height: 44px; }
+/* Prep on every Next up row (Miles 11/09, app.js paintCalendarLater and nextPrepPanelHtml): a quiet Prep at the end of
+   each later row, and one small panel under the row it opens (the COS chat's field and buttons, laid flat in the card).
+   Spacing (Miles 14:15, from the 382 px render): every later row is one height, with or without Prep (the hold row
+   too), and its padding is inside that height, so the Prep link never makes a row taller. The open row and its panel
+   read as ONE block: no rules, the panel attached under its row, and the space under the block equals the space
+   between rows. The gap after Prep me, and the gap above "+N more today", are the same as between rows. One pitch per
+   width: --np-row is the row height, --np-gap the space the rows' own height leaves above and below a line of text,
+   --np-after the space under a button row (a button's box is 2 px taller than its line), measured equal to the row gap. */
+#next-card { --np-row: 36px; --np-gap: 8px; --np-after: calc(var(--np-gap) + 2px); }
+#next-card:has(.next-later:not(.hidden)) .next-actions { padding-bottom: var(--np-after); }
+.next-later .later-row { align-items: center; min-height: var(--np-row); padding: 0; }
+.next-later .later-what { flex: 1; min-width: 0; }
+.next-later .later-prep { flex: none; min-height: var(--np-row); font-size: 14px; font-weight: 500; padding: 0 2px; }
+.next-later .later-more { margin-top: 0; padding: 0; min-height: var(--np-row); }
+.next-first-prep { padding: 0 16px var(--np-after); }
+.next-first-prep.hidden { display: none; }
+.next-prep { display: grid; gap: 8px; margin: 0 0 var(--np-after); padding: 2px 0 0; }
+.next-first-prep .next-prep { margin: 0; padding: 0; }
+.next-prep .field { width: 100%; min-height: 64px; max-height: 140px; font-size: 15px; resize: none; }
+.next-prep-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
+.next-prep-files li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; }
+.next-prep-file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sub); }
+.next-prep-files .link-btn { min-height: 32px; font-size: 14px; font-weight: 500; }
+.next-prep-acts { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
+.next-prep-gap { flex: 1; }
+.next-prep-add { position: relative; cursor: pointer; }
+.next-prep-add:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
+.next-prep-acts .cx-btn { height: 40px; }
+.next-prep-acts .link-btn { min-height: 40px; font-size: 14px; }
+/* Phones and short touch screens: 44 px touch rows, on the same query as app.css's 44 px floor for .cx-btn and .field,
+   so the panel's buttons and the rows change height together. */
+@media (max-width: 599px), (pointer: coarse) and (max-height: 720px) {
+  #next-card { --np-row: 44px; --np-gap: 12px; }
+  .next-prep-files .link-btn, .next-prep-acts .link-btn { min-height: 44px; }
+}
 /* The Ask sheet's File to Work inbox result, on its own row (app.js fileNoteHtml). */
 .nav-row .note.file-error { color: var(--hot); white-space: normal; }
 /* Running card when the session list could not be read (app.js renderRunning). */