@gotcos/glasses-server 7.0.29 → 7.0.31

package/server/web-control/app.js

@@ -573,6 +573,133 @@
     var hash = '#/' + [pane].concat(args || []).map(encodeURIComponent).join('/');
     if (location.hash === hash) route(); else location.hash = hash;
   }
+  // ── Back by path (7.0.30, item 1: Anand on the 11-12 HC call, Miles's pick) ──
+  // Back goes where the person came from. Each address this page makes is marked in its own history entry
+  // (history.state.cosNav): this page load's id, the entry's position, and the address it came from. Back is then the
+  // browser's own Back (history.back), so the system Back and ours agree and Back adds no entry. With no mark (a deep
+  // link, a reload, the first page, or an entry an overlay took over), Back keeps the parent chain it always had, and it
+  // REPLACES the entry rather than adding one, so the two can never bounce between each other. The image viewer and
+  // Today's sheet push entries of their own (cosImageViewer, cosTodayOverlay): those are never marked, never stepped into,
+  // and an address made while one of them still sat behind gets no mark, because the entry behind it is not an address
+  // (its position is not the last address's position plus one).
+  var NAV = { doc: Math.random().toString(36).slice(2, 10), last: null, replace: null };
+  function navState() { try { return history.state; } catch (_e) { return null; } }
+  function navOverlay(st) { return !!(st && (st.cosImageViewer || st.cosTodayOverlay)); }
+  function navStamp() {
+    if (typeof history === 'undefined' || !history || typeof location === 'undefined') return;   // a page without them: the parent chain
+    var hash = location.hash || '', st = navState(), pos;
+    if (navOverlay(st)) { NAV.last = null; NAV.replace = null; return; }
+    if (st && st.cosNav && st.cosNav.doc === NAV.doc) { NAV.last = { hash: hash, pos: st.cosNav.pos, back: st.cosNav.back, trail: st.cosNav.trail || null, label: st.cosNav.label || '' }; NAV.replace = null; return; }
+    if (st && st.cosNav) {
+      // Marked by an earlier load of this page (a reload): what lies behind it belongs to that load, so no path.
+      pos = st.cosNav.pos;
+    } else if (st) { NAV.last = null; NAV.replace = null; return; }   // someone else's state: leave it alone
+    else pos = NAV.replace ? NAV.replace.pos : history.length - 1;
+    var back = null;
+    if (!st && !NAV.replace && NAV.last && typeof NAV.last.pos === 'number' && pos === NAV.last.pos + 1) back = NAV.last.hash;
+    NAV.replace = null;
+    // 7.0.30, Miles's pick B: the steps before this one ride in the same mark, the last of them being where Back goes.
+    var trail = back ? (NAV.last.trail || []).concat([{ h: NAV.last.hash, t: NAV.last.label || '' }]).slice(-NAV_TRAIL_MAX) : null;
+    var mark = { doc: NAV.doc, pos: pos, back: back };
+    if (trail) mark.trail = trail;
+    try { history.replaceState(Object.assign({}, st || {}, { cosNav: mark }), ''); } catch (_e) { /* no history API: the parent chain */ }
+    NAV.last = { hash: hash, pos: pos, back: back, trail: trail, label: '' };
+  }
+  var NAV_TRAIL_MAX = 12;
+  // The page's own name, kept in its mark, so the next page's trail can name it. setCrumb calls this.
+  function navLabel(text) {
+    var st = navState();
+    if (navOverlay(st) || !st || !st.cosNav || st.cosNav.doc !== NAV.doc || (st.cosNav.label || '') === text) return;
+    try { history.replaceState(Object.assign({}, st, { cosNav: Object.assign({}, st.cosNav, { label: text }) }), ''); } catch (_e) { return; }
+    if (NAV.last && NAV.last.pos === st.cosNav.pos) NAV.last.label = text;
+  }
+  // The way he came, oldest first, from this entry's mark: [{ label, hash, back }], back being how many steps back that
+  // one is. Null when Back has no path (a deep link, a reload, the first page, an overlay).
+  function navTrail() {
+    var st = navState();
+    if (navOverlay(st) || !st || !st.cosNav || !st.cosNav.back || !st.cosNav.trail || !st.cosNav.trail.length) return null;
+    var t = st.cosNav.trail;
+    return t.map(function (s, i) { return { label: trailName(s.h, s.t), hash: s.h, back: t.length - i }; });
+  }
+  // A step is named by what kind of page it is, not its title (the title is the heading under the row): "Meeting",
+  // "Session", "Naming voices". A list is its pane. A message, a day and a chat keep their own short name.
+  function trailName(hash, crumb) {
+    var a = String(hash || '').replace(/^#\/?/, '').split('/').filter(function (x) { return x !== ''; }), p = ROOT_PANES.indexOf(a[0]) >= 0 ? a[0] : 'today';
+    if (a.length < 2 || isTabRoute(a.slice(1))) return TITLES[p] || 'Today';
+    if (p === 'meetings') return 'Meeting';
+    if (p === 'sessions') return 'Session';
+    if (p === 'speakers' && a[1] === 'review') return 'Naming voices';
+    return crumb || TITLES[p] || 'Today';
+  }
+  // One line that never wraps. When it is too wide, steps leave from the middle (the one after the first, then the next),
+  // never the first, the one before this page, or this page; "…" stands where they were. widths: each step's, then this
+  // page's; more: the width "…" adds. Returns the indexes to leave out.
+  function trailCut(widths, more, avail) {
+    var n = widths.length - 1, total = widths.reduce(function (a, b) { return a + b; }, 0), cut = [];
+    if (total <= avail) return cut;
+    total += more;
+    for (var i = 1; i < n - 1 && total > avail; i++) { cut.push(i); total -= widths[i]; }
+    return cut;
+  }
+  // The row under the top bar, on a phone (below 600 px; wider screens have the navigation bar's crumbs). Only on a page
+  // you opened (a reader, a meeting, a session), and only when there is a path.
+  function paintTrail(r) {
+    var el = typeof document !== 'undefined' && document.getElementById('nav-trail');
+    if (!el) return;
+    r = r || parseRoute();
+    var steps = r.args.length && !isTabRoute(r.args) ? navTrail() : null;
+    if (!steps) { el.hidden = true; el.innerHTML = ''; return; }
+    var here = trailName(location.hash, crumbDetail);
+    el.innerHTML = '<ol>' + steps.map(function (s, i) {
+      return '<li class="trail-step"><a href="' + esc(s.hash) + '" data-trail-back="' + s.back + '">' + esc(s.label) + '</a></li>' +
+        (i === 0 ? '<li class="trail-more" aria-hidden="true" hidden>…</li>' : '');
+    }).join('') + '<li class="trail-here" aria-current="page"><span>' + esc(here) + '</span></li></ol>';
+    el.hidden = false;
+    var items = Array.prototype.slice.call(el.querySelectorAll('.trail-step,.trail-here')), more = el.querySelector('.trail-more');
+    if (!more || !el.clientWidth) return;
+    el.classList.add('trail-fit');   // each step at its full width, to measure
+    more.hidden = false;
+    var moreW = more.offsetWidth, widths = items.map(function (li) { return li.offsetWidth; });
+    more.hidden = true;
+    el.classList.remove('trail-fit');
+    var cut = trailCut(widths, moreW, el.clientWidth);
+    // A left-out step stays for a screen reader but takes no keyboard focus (Q1 L1): it is not on screen.
+    cut.forEach(function (i) { items[i].classList.add('trail-cut'); var a = items[i].querySelector('a'); if (a) a.setAttribute('tabindex', '-1'); });
+    more.hidden = !cut.length;
+  }
+  // Where Back goes from here: { pane, path } (path true: the way he came; false: the parent chain).
+  function navBackTo() {
+    var st = navState();
+    // navStamp has run on this entry (every landing routes), so its mark is this load's: an earlier load's was re-marked
+    // with no path there.
+    if (!navOverlay(st) && st && st.cosNav && st.cosNav.back) {
+      var p = String(st.cosNav.back).replace(/^#\/?/, '').split('/')[0];
+      return { pane: ROOT_PANES.indexOf(p) >= 0 ? p : 'today', path: true };
+    }
+    var r = parseRoute(), up = PANES[r.pane] && PANES[r.pane].up ? PANES[r.pane].up(r.args) : null;
+    return { pane: up || (r.args.length && !isTabRoute(r.args)) ? r.pane : 'today', path: false };
+  }
+  // The one way this page replaces an address (W.replace for the panes; Q1 7.0.30 H1). It tells navStamp the entry was
+  // replaced, never pushed, so a replaced entry never gets a path: a pane switching a tab with location.replace after a
+  // Back (a forward entry left) was stamped as a push at history.length - 1, and Back then called history.back() from
+  // the first entry, out of the app. Its position is this entry's mark, or one above the last mark when an overlay's
+  // entry (Today's sheet, the image viewer) is the one replaced. Returns false, doing nothing, when the address is the
+  // same (location.replace would not route, and the flag would wrongly mark the next address).
+  function navReplace(hash) {
+    if (location.hash === hash) return false;
+    var st = navState(), pos;
+    if (navOverlay(st)) pos = NAV.last && typeof NAV.last.pos === 'number' ? NAV.last.pos + 1 : history.length - 1;
+    else pos = st && st.cosNav && typeof st.cosNav.pos === 'number' ? st.cosNav.pos : history.length - 1;
+    NAV.replace = { pos: pos };
+    try { location.replace(location.pathname + location.search + hash); } catch (_e) { NAV.replace = null; location.hash = hash; }
+    return true;
+  }
+  // The parent chain, replacing this entry (never adding one).
+  function goReplace(pane, args) {
+    var hash = '#/' + [pane].concat(args || []).map(encodeURIComponent).join('/');
+    if (!navReplace(hash)) route();
+  }
+  // ── end back by path
   // 7.0.2 (A8): a phone is under 600 px wide, or a short touch screen at any width (the unfolded Duo is 951x539 in
   // Comet): height is its scarce axis, so it gets the phone Ask sheet and the 44 px tap floor (app.css), as folded does.
   var SHORT_TOUCH_MQ = '(pointer: coarse) and (max-height: 720px)';
@@ -615,7 +742,7 @@
       // The rail changes the reply box's width: an empty box re-fits its placeholder (autoGrow, F2).
       var si = typeof $ === 'function' ? $('session-input') : null; if (si && typeof sxPlaceholderFit === 'function' && si.phLong) sxPlaceholderFit(si); else if (si && !si.value && typeof autoGrow === 'function') autoGrow(si);
       // A change after boot (a fold, a rotation, a new screen) is reported once, with the screen's own numbers.
-      if (RAIL.on !== null && RAIL.on !== on && typeof layoutCrumb === 'function') { var sc = window.screen || {}; layoutCrumb('rail', { sw: sc.width, sh: sc.height, rail: on, railHit: RAIL.hit }); }
+      if (RAIL.on !== null && RAIL.on !== on && typeof layoutCrumb === 'function') { var sc = window.screen || {}; layoutCrumb('rail', { sw: sc.width, sh: sc.height, rail: on, railHit: RAIL.hit, dvh: typeof lrProbe === 'function' ? lrProbe('height:100dvh', 'h') : null }); }
       RAIL.on = on;
       if (!RAIL.hooked && typeof window.matchMedia === 'function' && typeof window.addEventListener === 'function') {
         RAIL.hooked = true;
@@ -639,6 +766,7 @@
     return !!(e.metaKey || e.ctrlKey || keyboardFirst());
   }
   function route(forceChanged) {
+    if (typeof navStamp === 'function') navStamp();
     var r = parseRoute();
     var changedPane = forceChanged === true || r.pane !== state.pane || !document.querySelector('#pane-' + r.pane + ':not(.hidden)');
     if (state.pane !== r.pane && PANES[state.pane] && PANES[state.pane].leave) { try { PANES[state.pane].leave(); } catch (err) { console.error(err); } }
@@ -654,6 +782,7 @@
 
     var reading = r.args.length > 0 && !isTabRoute(r.args);
     if (typeof sxFrameSync === 'function') sxFrameSync();
+    if (typeof rdFrameSync === 'function') rdFrameSync(r);
     var paneEl = $('pane-' + r.pane);
     if (paneEl) paneEl.classList.toggle('reading', reading);
     var split = paneEl && paneEl.querySelector('.split');
@@ -664,8 +793,18 @@
     var railBack = $('rail-back');
     if (railBack) railBack.hidden = !reading;
     $('section-btn').classList.toggle('hidden', reading);
-    $('topbar-back-label').textContent = TITLES[r.pane] || 'Back';
+    // 7.0.30: Back names where it goes, the way he came or the parent (navBackTo).
+    var backTo = typeof navBackTo === 'function' ? navBackTo() : { pane: r.pane };
+    $('topbar-back-label').textContent = TITLES[backTo.pane] || 'Back';
+    var topBack = $('topbar-back');
+    if (topBack && topBack.setAttribute) topBack.setAttribute('aria-label', 'Back to ' + (TITLES[backTo.pane] || 'the list'));
+    if (railBack && railBack.setAttribute) railBack.setAttribute('aria-label', 'Back to ' + (TITLES[backTo.pane] || 'the list'));
+    // From 600 px Back is the navigation bar's (shell.js): its word stays "Back", as on the Mac's bar, and its name and
+    // tooltip say where it goes, as the rail's do (7.0.30 counted run, items_check B1 and B2 at the open Duo).
+    var navBack = $('nav-back');
+    if (navBack && navBack.setAttribute) { navBack.setAttribute('aria-label', 'Back to ' + (TITLES[backTo.pane] || 'the list')); navBack.setAttribute('title', 'Back to ' + (TITLES[backTo.pane] || 'the list')); }
     $('section-name').textContent = TITLES[r.pane] || 'Today';
+    if (typeof paintTrail === 'function') paintTrail(r);
     closeMenu();
     if (changedPane) window.scrollTo(0, 0);
     $('topbar').classList.remove('tucked');
@@ -701,26 +840,32 @@
     runHooks(routeHooks, r);
   }
   function runHooks(list, arg) { list.forEach(function (fn) { try { fn(arg); } catch (err) { console.error(err); } }); }
-  // Back unwinds one step, the way Control's Back does: a pane module may name the step above a
-  // nested reader (an archive chat goes back to its day, not to the list).
+  // Back (7.0.30): the way he came, when this page made the entry behind (navBackTo). Otherwise one step up, the way
+  // Control's Back does: a pane module may name the step above a nested reader (an archive chat goes back to its day,
+  // not to the list), replacing this entry.
   function goBack() {
+    if (typeof navBackTo === 'function' && navBackTo().path) { history.back(); return; }
     var r = parseRoute();
     var up = PANES[r.pane] && PANES[r.pane].up ? PANES[r.pane].up(r.args) : null;
-    if (up) go(r.pane, up);
-    else if (r.args.length && !isTabRoute(r.args)) go(r.pane);
-    else go('today');
+    var step = typeof goReplace === 'function' ? goReplace : go;
+    if (up) step(r.pane, up);
+    else if (r.args.length && !isTabRoute(r.args)) step(r.pane);
+    else step('today');
   }
   // '#/<pane>/t/<tab>' is the pane's list on one of its tabs, not a reader: the phone keeps the section switcher and Back
   // leaves the pane. Memories keeps its tab in the address this way, so a reload or a new browser lands on the same tab.
   function isTabRoute(args) { return args.length === 2 && args[0] === 't'; }
-  // On the closed Duo every vertical pixel counts: the top bar slides away while you scroll
-  // down and comes back the moment you scroll up.
+  // On a phone every vertical pixel counts: the top bar slides away while you scroll down a list and comes back the
+  // moment you scroll up. 7.0.30 (item 1): never on a reader, where the top bar holds Back, so Back stays in reach on a
+  // tall phone however far down he reads.
   var lastY = 0;
   function onScroll() {
     var y = Math.max(0, window.scrollY || 0);
-    var bar = $('topbar');
+    // On a reader the bar stays (its Back is there). The folded Duo's Back is on the side rail (the bar's is hidden by CSS,
+    // not the class), so there the bar tucks as before (Q1 7.0.30 M1).
+    var bar = $('topbar'), back = $('topbar-back'), onReader = !!(back && !back.classList.contains('hidden')) && !(typeof sideRail === 'function' && sideRail());
     bar.classList.toggle('scrolled', y > 8);
-    if (y < 60 || y < lastY - 4) bar.classList.remove('tucked');
+    if (y < 60 || y < lastY - 4 || onReader) bar.classList.remove('tucked');
     else if (y > lastY + 4 && isPhone()) bar.classList.add('tucked');
     lastY = y;
   }
@@ -760,7 +905,8 @@
     // 7.0.23 regression (lapse_check, 08:2x): a frame class left on keeps html and body at one screen with overflow
     // hidden, so the gate could not scroll and Connect sat below a keyboard-height screen. The gate is a normal page;
     // showShell's route() puts the frame back (sxFrameSync) when the shell returns.
-    document.documentElement.classList.remove('sx-frame', 'mx-frame');
+    document.documentElement.classList.remove('sx-frame');
+    document.documentElement.classList.remove('rd-frame');
     // A later 401 from a pane still polling (W.api passes no message) must not blank what the gate already says:
     // the reason it opened, or "That code did not match" while the person retypes.
     if (!message && alreadyOpen) return;
@@ -2588,7 +2734,7 @@
       var dest = session ? ['sessions', s[0], s.slice(1).join('|')] : kind === 'pet' ? ['sessions'] : ['work'].concat(kind === 'need' ? [] : ['sort']);
       console.error('[today] the overlay did not open (' + kind + '); opening ' + dest.join('/') + ' instead.', err);
       toast(session ? 'Could not open that here. Opening the session.' : kind === 'pet' ? 'Could not open that here. Opening Sessions.' : 'Could not open that here. Opening it in Work.');
-      if (history.state && history.state.cosTodayOverlay) location.replace('#/' + dest.map(encodeURIComponent).join('/'));
+      if (history.state && history.state.cosTodayOverlay) navReplace('#/' + dest.map(encodeURIComponent).join('/'));
       else go(dest[0], dest.slice(1));
     });
   }
@@ -2791,6 +2937,150 @@
     if (on) sxFrameHook();
     return on;
   }
+  // 7.0.31 hotfix (Miles 17:25, the open Duo): the message reader in its own frame from 600 px. html.rd-frame makes the
+  // page one screen, as Sessions' frame does (panes/cos-chat.css): the app shell is the visible box (--vv-top, --vv-h
+  // from viewportFit, which falls back to innerHeight when the visual viewport reads 0 or less), and the reader scrolls
+  // in the workspace under the navigation bar, with Reply pinned to its bottom. Before, the reader was the document: its Reply stuck to the
+  // document's scrollport and the rail was 100dvh, so when Safari's viewport went stale after folds (his Duo reported
+  // visual viewport heights of 0 and -33554432 from 17:17 to 17:24) both ended mid-screen and the message drew below
+  // them. Below 600 px (phones, the folded Duo's side rail) the reader is unchanged; the CSS is gated the same way, so a
+  // class left on across a fold does nothing there. A message's image (#/messages/m/<no>/a/<id>) has no Reply: no frame.
+  function rdFrameOn(r) {
+    var shell = $('app-shell'), wide = !!(window.matchMedia && window.matchMedia('(min-width: 600px)').matches);
+    return !!(r && r.pane === 'messages' && r.args && r.args[0] === 'm' && r.args.length === 2 && wide && !(shell && shell.classList.contains('hidden')));
+  }
+  var RD_FRAME = { hooked: false, n: 0 };
+  function rdFrameSync(r) {
+    var de = document.documentElement, on = rdFrameOn(r || parseRoute());
+    if (de && de.classList) de.classList.toggle('rd-frame', on);
+    if (!RD_FRAME.hooked && window.matchMedia) {
+      RD_FRAME.hooked = true;
+      var mq = window.matchMedia('(min-width: 600px)');
+      if (mq && mq.addEventListener) mq.addEventListener('change', function () { rdFrameSync(); }); else if (mq && mq.addListener) mq.addListener(function () { rdFrameSync(); });
+    }
+    var r2 = r || parseRoute();
+    rdPosHook();
+    // A different message just opened: its place is its top until he scrolls. (This also runs when the width crosses
+    // 600 px; the same message then keeps its anchor and its pending restore.)
+    if (window.requestAnimationFrame) window.requestAnimationFrame(function () {
+      var cx = rdPosReader(), key = cx ? cx.getAttribute('data-reader-key') : '';
+      if (!RD_POS.a || RD_POS.a.key !== key) { RD_POS.pending = false; rdPosCapture(); }
+    });
+    if (r2 && r2.pane === 'messages' && r2.args && r2.args[0] === 'm' && r2.args.length === 2 && window.requestAnimationFrame) window.requestAnimationFrame(function () { rdFrameCrumb('open'); });
+    return on;
+  }
+  // One report per message reader opened, at any width, at most 8 a page load (numbers only; lead 17:48): whether the frame
+  // is on, the visible box viewportFit uses, the reader's box (top, bottom, height), the workspace's height and content height (the frame's scroller), Reply's top
+  // and bottom, the document's height and scroll, and 100dvh. layoutCrumb adds innerWidth and innerHeight and the visual
+  // viewport's height, top and scale, so a pan like 17:25's (top about 409) shows in the same row. The 17:25 frame could
+  // not be measured; the next one will be.
+  function rdFrameCrumb(why) {
+    if (RD_FRAME.n >= 8 || typeof layoutCrumb !== 'function') return false;
+    try {
+      var v = viewportFit(), f = document.querySelector('#pane-messages .cx-reply-form'), cx = document.querySelector('#pane-messages > .cx'), ws = $('workspace');
+      var fr = f && f.getBoundingClientRect ? f.getBoundingClientRect() : null, cr = cx && cx.getBoundingClientRect ? cx.getBoundingClientRect() : null;
+      var se = document.scrollingElement || document.documentElement;
+      var out = { why: String(why || '').slice(0, 24), frame: !!(document.documentElement.classList && document.documentElement.classList.contains('rd-frame')), fb: !!v.bad,
+        boxT: v.top, boxB: v.top + v.height, rdT: cr ? cr.top : -1, rdB: cr ? cr.bottom : -1, rdH: cx ? cx.clientHeight : -1, wsH: ws ? ws.clientHeight : -1, wsSH: ws ? ws.scrollHeight : -1,
+        replyT: fr ? fr.top : -1, replyB: fr ? fr.bottom : -1, docH: se ? se.scrollHeight : -1, sy: window.scrollY || 0, dvh: typeof lrProbe === 'function' ? lrProbe('height:100dvh', 'h') : null };
+      if (layoutCrumb('reader', out)) { RD_FRAME.n++; return true; }
+    } catch (_e) { /* a report never stops the page */ }
+    return false;
+  }
+  // 7.0.31 (Q1 FIX FIRST, lead 20:41): ONE job. A fold or an unfold that crosses 600 px switches the message between the
+  // page's scroll (under 600) and the frame's workspace (600 and up), and the new scroller would open at the top. So the
+  // page keeps an anchor, the character at the top of the reading area, read as he scrolls, and applies it ONCE after a
+  // switch: when no finger is down and the scroll has been still for RD_POS_STILL_MS. If he scrolls on purpose first (a
+  // touch that moves, the wheel, a key), his scroll wins and the anchor is dropped. Nothing else moves the text: no
+  // other resize, no keyboard, no card or notice. Under 600 px with no switch, the reader is 7.0.30's.
+  var RD_POS_STILL_MS = 300, RD_POS_MOVE_PX = 10;
+  var RD_POS = { a: null, mode: '', pending: false, timer: 0, touching: false, ty: 0, moved: false, scrollAt: 0, queued: false, hooked: false };
+  function rdPosReader() {
+    var r = parseRoute();
+    return r && r.pane === 'messages' && r.args && r.args[0] === 'm' && r.args.length === 2 ? document.querySelector('#pane-messages > .cx[data-reader-key]') : null;
+  }
+  function rdPosMode() { var ws = $('workspace'); return ws && getComputedStyle(ws).overflowY === 'auto' ? 'frame' : 'page'; }
+  // The top of the reading area: the workspace's top in the frame; on the page, below the pinned top bar.
+  function rdPosTop(mode) {
+    if (mode === 'frame') return $('workspace').getBoundingClientRect().top;
+    var t = 0;
+    ['.topbar', '.navbar'].forEach(function (sel) {
+      var e = document.querySelector(sel), st = e && getComputedStyle(e), r = e && e.getBoundingClientRect();
+      if (e && st.display !== 'none' && r.height > 0 && r.bottom > 0 && (st.position === 'sticky' || st.position === 'fixed')) t = Math.max(t, r.bottom);
+    });
+    return t;
+  }
+  // One character's line box (a collapsed range has none in every engine).
+  function rdPosRect(node, offset) {
+    var len = node && node.nodeValue ? node.nodeValue.length : 0;
+    if (!len) return null;
+    var rg = document.createRange(), at = Math.min(offset, len - 1);
+    rg.setStart(node, at); rg.setEnd(node, at + 1);
+    var r = rg.getBoundingClientRect();
+    return r.height || r.width ? r : null;
+  }
+  function rdPosCapture() {
+    var cx = rdPosReader();
+    if (!cx) { RD_POS.a = null; RD_POS.mode = ''; return null; }
+    var mode = rdPosMode(), top = rdPosTop(mode), key = cx.getAttribute('data-reader-key');
+    RD_POS.mode = mode;
+    if ((mode === 'frame' ? $('workspace').scrollTop : window.scrollY || 0) <= 2) return (RD_POS.a = { key: key, atTop: true });
+    var c = cx.getBoundingClientRect(), body = cx.querySelector('.cx-said.cos .cx-card-body'), xs = [c.left + 8, c.left + c.width / 2];
+    if (body) xs.unshift(body.getBoundingClientRect().left + 6);
+    for (var dy = 2; dy <= 62; dy += 12) {
+      for (var i = 0; i < xs.length; i++) {
+        var hit = document.caretRangeFromPoint ? document.caretRangeFromPoint(xs[i], top + dy) : null, n = hit && hit.startContainer;
+        if (!n || n.nodeType !== 3 || !cx.contains(n) || n.parentElement.closest('.cx-reply-form')) continue;
+        var r = rdPosRect(n, hit.startOffset);
+        if (r) return (RD_POS.a = { key: key, node: n, offset: hit.startOffset, dy: r.top - top });
+      }
+    }
+    return null;
+  }
+  function rdPosApply() {
+    var cx = rdPosReader(), a = RD_POS.a, mode = rdPosMode(), ws = $('workspace');
+    RD_POS.mode = mode;
+    if (!cx || !a || a.key !== cx.getAttribute('data-reader-key')) return false;
+    if (a.atTop) { if (mode === 'frame') ws.scrollTop = 0; else window.scrollTo(0, 0); return true; }
+    var r = a.node.isConnected ? rdPosRect(a.node, a.offset) : null;
+    if (!r) return false;
+    var want = Math.round(r.top - rdPosTop(mode) - a.dy);
+    if (mode === 'frame') ws.scrollTop += want; else window.scrollBy(0, want);
+    return true;
+  }
+  // The scroller changed under him: wait for no finger and a still scroll, then apply once; his own scroll drops it.
+  function rdPosTick() {
+    RD_POS.timer = 0;
+    if (!RD_POS.pending) return;
+    if (RD_POS.moved) { RD_POS.pending = false; rdPosCapture(); return; }
+    if (RD_POS.touching || Date.now() - RD_POS.scrollAt < RD_POS_STILL_MS) { RD_POS.timer = setTimeout(rdPosTick, 80); return; }
+    RD_POS.pending = false;
+    rdPosApply();
+  }
+  function rdPosCheck() {
+    var mode = rdPosReader() ? rdPosMode() : '';
+    if (!mode || !RD_POS.mode || mode === RD_POS.mode || RD_POS.pending) return;
+    RD_POS.pending = true; RD_POS.moved = false;
+    if (!RD_POS.timer) RD_POS.timer = setTimeout(rdPosTick, 80);
+  }
+  function rdPosHook() {
+    if (RD_POS.hooked || !document.addEventListener) return;
+    RD_POS.hooked = true;
+    var o = { capture: true, passive: true };
+    document.addEventListener('scroll', function () {
+      RD_POS.scrollAt = Date.now();
+      if (!rdPosReader()) return;
+      rdPosCheck();
+      if (RD_POS.pending || RD_POS.queued) return;
+      RD_POS.queued = true;
+      requestAnimationFrame(function () { RD_POS.queued = false; rdPosCheck(); if (!RD_POS.pending) rdPosCapture(); });
+    }, o);
+    window.addEventListener('resize', rdPosCheck);
+    document.addEventListener('touchstart', function (e) { RD_POS.touching = true; RD_POS.ty = e.touches && e.touches[0] ? e.touches[0].clientY : 0; }, o);
+    document.addEventListener('touchmove', function (e) { var y = e.touches && e.touches[0] ? e.touches[0].clientY : RD_POS.ty; if (RD_POS.pending && Math.abs(y - RD_POS.ty) > RD_POS_MOVE_PX) RD_POS.moved = true; }, o);
+    ['touchend', 'touchcancel'].forEach(function (t) { document.addEventListener(t, function () { RD_POS.touching = false; }, o); });
+    ['wheel', 'keydown'].forEach(function (t) { document.addEventListener(t, function () { if (RD_POS.pending) RD_POS.moved = true; }, o); });
+  }
   // Where the frame's parts sit against the VISIBLE area (step 1's position report, lead 23:00): on a reader's open, and
   // KB_AFTER_MS after an on-screen keyboard closes while the frame is on. The visible area is viewportFit's box (a
   // visible height under 80 px is no reading, so it is innerHeight from 0, and fb says so) and, across, visualViewport's
@@ -5591,7 +5881,7 @@
   // estimates into them, and its rows keep Control's category titles.
   function loadUsage() {
     SX.view = 'usage'; sxSave();
-    location.replace('#/sessions');
+    navReplace('#/sessions');
   }
   function renderUsageView(force) {
     var box = $('sessions-usage'); if (!box) return;
@@ -7366,11 +7656,13 @@
 
   // ── events (one delegated listener) ─────────────────────
   document.addEventListener('click', function (e) {
-    var t = e.target.closest('[data-today-next],[data-next-prep],[data-next-prep-cancel],[data-next-prep-remove],[data-today-needs],[data-today],[data-goto],[data-pane],[data-session],[data-meeting],[data-speakers],[data-action],[data-open-ask],[data-theme-choice],#topbar-back,#rail-back,#section-btn,#sign-out,#copy-link,#ask-close,#auth-switch,#auth-token-show,#auth-retry,#device-code-btn');
+    var t = e.target.closest('[data-today-next],[data-next-prep],[data-next-prep-cancel],[data-next-prep-remove],[data-today-needs],[data-today],[data-goto],[data-pane],[data-session],[data-meeting],[data-speakers],[data-action],[data-open-ask],[data-theme-choice],[data-trail-back],#topbar-back,#rail-back,#section-btn,#sign-out,#copy-link,#ask-close,#auth-switch,#auth-token-show,#auth-retry,#device-code-btn');
     if (!t) { if (e.target.id === 'ask-sheet') closeAsk(); if (e.target.id === 'section-menu') closeMenu(); return; }
     var inSheet = !!t.closest('#ask-sheet');
     if (t.id === 'topbar-back') return goBack();
     if (t.id === 'rail-back') return goBack();
+    // 7.0.30 (pick B): a trail step is the browser's own Back, that many steps.
+    if (t.hasAttribute('data-trail-back')) { e.preventDefault(); history.go(-Number(t.getAttribute('data-trail-back'))); return; }
     if (t.id === 'section-btn') return openMenu();
     if (t.id === 'auth-retry') { t.disabled = true; t.textContent = 'Checking'; bootStatus().then(function () { t.disabled = false; t.textContent = 'Try again'; }); return; }
     if (t.id === 'auth-switch') {
@@ -7786,7 +8078,7 @@
     plural: plural, countWord: countWord, dayWord: dayWord, plainDay: plainDay, providerLabel: providerLabel, domainLabel: domainLabel,
     skeletonRows: skeletonRows, emptyBox: emptyBox, setStatus: setStatus, autoGrow: autoGrow,
     readStore: readStore, writeStore: writeStore, copyText: copyText, isPhone: isPhone,
-    state: state, titles: TITLES, go: go, parseRoute: parseRoute, goBack: goBack,
+    state: state, titles: TITLES, go: go, replace: navReplace, parseRoute: parseRoute, goBack: goBack,
     registerPane: function (name, def) { PANES[name] = def; },
     sessionList: sessionList,
     petPrefs: petPrefs,
@@ -7796,7 +8088,7 @@
     onShell: function (fn) { shellHooks.push(fn); },
     // The detail title after "COS Control > Section" (Control's breadcrumb). Pane modules set it
     // once a detail has loaded; route() clears it on every navigation.
-    setCrumb: function (text) { crumbDetail = String(text || ''); runHooks(routeHooks, parseRoute()); },
+    setCrumb: function (text) { crumbDetail = String(text || ''); navLabel(crumbDetail); paintTrail(); runHooks(routeHooks, parseRoute()); },
     crumb: function () { return crumbDetail; },
     // Panes that read with their own fetch call this on a 401 so the sign-in screen shows.
     showAuth: function (message) { showAuth(message); },

package/server/web-control/control.css

@@ -1,7 +1,7 @@
 /* COS Control Web: Control's own chrome and pane kit, loaded after app.css.
    Measurements follow Control 0.5.366 (ActivityWindow.swift, COSBrand.swift): the 248pt rail with a
    story under each name from 1100px, the icon rail below that, the navigation bar off Today, and
-   the shared pane pieces (tinted hero, text switch with a gold rule, rows, tags, YOU/COS cards).
+   the shared pane pieces (tinted hero, text switch with a gold rule, rows, tags, and the reader's sides for who said what).
    Phone sizes are set for reading on the iPhone Duo; the desktop steps down toward Control's. */
 
 :root {
@@ -236,6 +236,18 @@
 .cx-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; padding: 12px 14px 14px; margin-bottom: 12px; }
 .cx-card.you { background: var(--qopen); }
 .cx-card-label { font: 600 9.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--tertiary); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
+/* 7.0.30, Miles's pick A (who said what): sides, in the COS chat's shapes (.cc-bubble, .cc-line.cos). His bubble's edge
+   is opaque in light, gold 85% with ink, 3.48:1 against the page; the chat's 45% gold edge composites to 1.52:1 there.
+   Dark keeps the chat's edge as it is (2.79:1 composited). */
+:root { --said-edge: color-mix(in srgb, var(--gold) 85%, var(--ink)); }
+:root[data-theme='dark'] { --said-edge: color-mix(in srgb, var(--gold) 45%, transparent); }
+@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --said-edge: color-mix(in srgb, var(--gold) 45%, transparent); } }
+.cx-said.you { display: flex; flex-direction: column; align-items: flex-end; margin: 4px 0 16px; }
+.cx-said-bubble { max-width: min(80%, 560px); background: color-mix(in srgb, var(--gold) 22%, var(--panel)); border: 1px solid var(--said-edge);
+  border-radius: 18px 18px 6px 18px; padding: 10px 14px; line-height: 1.45; }
+.cx-said-who { font-size: 12px; color: var(--sub); margin: 4px 4px 0; }
+.cx-said.cos { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0 0 14px; }
+.cx-said-text { min-width: 0; }
 .cx-card-body { font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
 /* md() keeps line breaks as text (shared with the session reader), so the body keeps them too. */
 .cx-card-body.md { white-space: pre-wrap; }
@@ -262,9 +274,27 @@
 .cx-find .cx-find-count { font: 400 11.5px/1 var(--mono); color: var(--sub); }
 .cx-find button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--panel-border); display: grid; place-items: center; color: var(--ink); }
 .cx-find button .icon { width: 14px; height: 14px; }
-.cx-turn.match .cx-card { background: color-mix(in srgb, var(--green) 7%, var(--panel)); }
+.cx-turn.match .cx-said-bubble, .cx-turn.match .cx-said-text { background: color-mix(in srgb, var(--green) 7%, var(--panel)); }
+.cx-turn.match .cx-said-text { border-radius: 10px; }
 @media (max-width: 599px) { .cx-find { top: calc(var(--topbar-h) + var(--safe-top)); } .cx-thumb { width: 132px; height: 92px; } }
 
+/* 7.0.30, Miles's pick B (how you got here): one plain row of text links under the top bar, on a phone only (from 600 px
+   the navigation bar has its crumbs). No box, border or label. It never wraps: steps leave from the middle (app.js
+   trailCut) and a long name ends in an ellipsis. A left-out step stays for a screen reader. */
+.trail { display: none; }
+@media (max-width: 599px) {
+  .trail:not([hidden]) { display: block; margin: 0 0 2px; }
+  .trail ol { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; overflow: hidden; white-space: nowrap; font-size: 13.5px; color: var(--sub); }
+  .trail li { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
+  .trail li + li::before { content: '/'; content: '/' / ''; flex: none; padding: 0 6px; color: var(--tertiary); }
+  .trail a, .trail-here span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 32px; }
+  .trail a { color: var(--accent); }
+  .trail-here span { color: var(--ink); font-weight: 600; }
+  .trail .trail-more[hidden] { display: none; }
+  .trail.trail-fit li { flex-shrink: 0; }
+  .trail .trail-cut { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+}
+
 /* ── Dictation and Dictionary ─────────────────────────── */
 .cx-pair { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
 .cx-pair .heard { color: var(--sub); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--sub) 60%, transparent); }

package/server/web-control/index.html

@@ -173,6 +173,8 @@
       </header>
 
       <main class="workspace" id="workspace">
+        <!-- 7.0.30, Miles's pick B: how you got here, on a phone (app.js paintTrail), from Back's own marks. -->
+        <nav class="trail" id="nav-trail" aria-label="How you got here" hidden></nav>
         <!-- W1: the Mac not answering, and the sign-in ending soon (app.js "Mac reachability and sign-in lifetime") -->
         <div id="conn-notice" class="conn-notice" hidden></div>
         <!-- SESSION QUESTIONS (panes/questions.js, 6.99.12): over every pane while one waits -->

package/server/web-control/panes/cos-chat.css

@@ -215,7 +215,32 @@ html.kb-up .cc-kb .cc-model .field { width: 100%; }
 .cx-reply-sub { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--sub); }
 .cx-reply-feed { min-height: 0; padding: 10px 0 0; }
 .cx-reply-feed:empty { display: none; }
-.cx-reply .cc-composer { position: static; background: transparent; border-top: 0; padding: 10px 0 0; }
+/* 7.0.30 item 2: the Reply box is the reader's last child, outside .cx-reply, so .cc-composer's own rule pins it to the
+   bottom of the screen (sticky, the page's colour, a hairline above). With the keyboard up for it (cos-chat.js sets
+   html.kb-reply; app.js publishes --vv-below, the layout viewport under the visible box) it sits on the keyboard, the
+   same way the chat's box does; the home indicator is under the keyboard, so its inset goes. */
+html.kb-reply .cx-reply-form { bottom: var(--vv-below, 0px); padding-bottom: 8px; }
+/* 7.0.31 hotfix (Miles 17:25, the open Duo): from 600 px the message reader is its own frame (app.js rdFrameSync sets
+   html.rd-frame on #/messages/m/<no>). The page is one screen, never taller, as in Sessions (panes/sessions.css): the
+   app shell is the visible box and the rail a column of it that scrolls by itself. The workspace under the navigation
+   bar is the one thing that scrolls: the sign-in notice, a question card and the message scroll together as they did
+   in 7.0.30, and Reply sticks to the workspace's bottom. Before, the reader was the document, so Reply stuck to the
+   document's viewport and the rail was 100dvh: with Safari's view left panned or short after folds, both ended
+   mid-screen and the message drew below them. Nothing here reaches under 600 px, where the phone and the folded Duo
+   keep the reader as shipped. */
+@media (min-width: 600px) {
+  html.rd-frame, html.rd-frame body { height: 100%; overflow: hidden; overscroll-behavior: none; }
+  html.rd-frame body { min-height: 0; }
+  html.rd-frame .app-shell { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100dvh); min-height: 0;
+    grid-template-rows: minmax(0, 1fr); overflow: hidden; }
+  html.rd-frame .rail { position: static; top: auto; height: auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+  html.rd-frame .main-col { min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
+  html.rd-frame .topbar, html.rd-frame .navbar { flex: none; position: relative; }
+  /* The scroller. No bottom padding: at the end of the message, Reply is the last thing and sits on the frame's bottom. */
+  html.rd-frame .workspace { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; }
+  /* With the keyboard up the frame is already the visible box (--vv-top, --vv-h), so the box stays at the frame's bottom. */
+  html.rd-frame.kb-reply .cx-reply-form { bottom: 0; }
+}
 
 /* ── the Messages badge in the rail and the section menu ─ */
 .inbox-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hot); color: var(--panel); font: 600 11px/18px var(--body); text-align: center; }

package/server/web-control/panes/cos-chat.js

@@ -1549,8 +1549,11 @@
     return '<section class="cc cx-reply" data-reply-host="' + esc(key) + '" aria-label="' + esc(label) + '">' +
       '<h3 class="cx-reply-title">Reply</h3>' +
       '<p class="cx-reply-sub">' + esc(k.sessionId ? 'Continues this conversation. The answer lands in Messages with its own number.' : 'Starts a conversation. The answer lands in Messages with its own number.') + '</p>' +
-      '<div class="cc-feed cx-reply-feed" data-reply-feed="' + esc(key) + '" aria-live="polite">' + replyFeedHtml(key) + '</div>' +
-      composerHtml(k, { drop: false, placeholder: label, label: label }) + '</section>';
+      '<div class="cc-feed cx-reply-feed" data-reply-feed="' + esc(key) + '" aria-live="polite">' + replyFeedHtml(key) + '</div>' + '</section>' +
+      // 7.0.30 item 2 (Anand: "the reply box stays at the bottom"): the box sits OUTSIDE the section, as a child of the
+      // reader's column, so the composer's own sticky rule keeps it at the bottom of the screen while he reads the
+      // message above (a sticky box cannot leave its parent, and the section is only at the end of the page).
+      composerHtml(k, { drop: false, placeholder: label, label: label }).replace('class="cc-composer"', 'class="cc-composer cx-reply-form"');
   }
   function replyFeedHtml(key) {
     return C.asks.filter(function (a) { return a.replyKey === replyName(key); }).map(function (a) { return askHtml(a, false); }).join('');
@@ -2396,6 +2399,9 @@
     if (form && form.classList) form.classList.add('cc-kb');
     var inChat = !!(a && C.host && C.host.contains && C.host.contains(a));
     if (de && de.classList) de.classList.toggle('kb-chat', inChat);
+    // 7.0.30 item 2: the message reader's Reply box, the same kit (cos-chat.css lifts it onto the keyboard).
+    var inReply = !!(form && form.classList && typeof form.classList.contains === 'function' && form.classList.contains('cx-reply-form'));
+    if (de && de.classList) de.classList.toggle('kb-reply', inReply);
     return inChat;
   }
   // The composer that has the keyboard, brought into view on open and on every later change of the visible box (a fold
@@ -2403,7 +2409,7 @@
   // (a steer box or the search box is left where it is).
   function revealComposer() {
     var a = document.activeElement, de = document.documentElement;
-    if (!a || !de || !de.classList || !de.classList.contains('kb-chat')) return false;
+    if (!a || !de || !de.classList || !(de.classList.contains('kb-chat') || de.classList.contains('kb-reply'))) return false;
     var form = a.closest ? a.closest('[data-cos-form]') : null;
     if (!form || !form.scrollIntoView) return false;
     form.scrollIntoView({ block: 'nearest' });

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

@@ -28,6 +28,10 @@
 .mt-day:not(:disabled):hover { background: var(--qopen); }
 .mt-day[aria-pressed='true'] { background: color-mix(in srgb, var(--tint) 18%, transparent); font-weight: 600; }
 .mt-day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+/* 7.0.30 item 4: today is marked with a ring in the theme's accent (no fill, so a picked day still reads as picked). */
+.mt-day.mt-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
+.mt-day.mt-today .mt-dnum { font-weight: 600; }
+.mt-jump-row { margin: 0 2px 12px; }
 .mt-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
 .mt-dot.on { background: var(--tint); }
 .mt-all { margin-top: 8px; }