@gotcos/glasses-server 7.0.27 → 7.0.30

package/server/web-control/app.js

@@ -245,9 +245,55 @@
     clearTimeout(toastTimer); toastTimer = setTimeout(function () { el.classList.add('hidden'); }, 3200);
   }
   function setStatus(el, text, isError) { if (!el) return; el.textContent = text || ''; el.classList.toggle('error', !!isError); }
-  function autoGrow(ta) { ta.style.height = 'auto'; ta.style.height = Math.min(ta.scrollHeight, 140) + 'px'; }
+  // 7.0.29 (lead F2): an empty session reply box is as tall as its placeholder, so a placeholder that wraps (the rail's
+  // width at 382 px wraps "Message this session (not an answer)") is never cut off. Only #session-input; where the
+  // placeholder fits on one line the height is the same as before.
+  function autoGrow(ta) {
+    ta.style.height = 'auto';
+    var h = ta.scrollHeight;
+    if (!ta.value && ta.id === 'session-input' && ta.placeholder) h = Math.max(h, placeholderHeight(ta, ta.placeholder));
+    ta.style.height = Math.min(h, 140) + 'px';
+  }
+  // 7.0.29 (lead F2): with the rail at 382 px, "Message this session (not an answer)" wraps; with the keyboard up the box
+  // is capped under two lines, so the second line would be cut. Where the long words would wrap in the box's width, the
+  // box says the short form instead; checked again when the width changes (railSync). Elsewhere the words are as before.
+  function sxPlaceholderFit(box) {
+    if (!box || !box.setAttribute || !box.phLong) return;
+    var ph = box.phLong;
+    if (box.phShort) { var one = placeholderHeight(box, 'M'), two = placeholderHeight(box, box.phLong); if (one > 0 && two > one + 2) ph = box.phShort; }
+    if (!box.getAttribute || box.getAttribute('placeholder') !== ph) box.setAttribute('placeholder', ph);
+    if (!box.value && box.style) autoGrow(box);
+  }
+  // The placeholder's height in a hidden copy of the box: same width, font, padding and line height. The box's own value
+  // is never touched (setting it would drop its undo history and move the caret).
+  var PH_PROBE = null;
+  function placeholderHeight(ta, text) {
+    try {
+      if (typeof getComputedStyle !== 'function' || !document.body || !ta.getBoundingClientRect) return 0;
+      var cs = getComputedStyle(ta), w = ta.getBoundingClientRect().width;
+      if (!(w > 0)) return 0;
+      var c = PH_PROBE;
+      if (!c) { c = PH_PROBE = document.createElement('textarea'); c.setAttribute('aria-hidden', 'true'); c.tabIndex = -1; c.rows = 1; }
+      c.style.cssText = 'position:absolute;left:-9999px;top:0;visibility:hidden;height:auto;min-height:0;max-height:none;overflow:hidden;resize:none;border:0;' +
+        'box-sizing:' + cs.boxSizing + ';width:' + w + 'px;padding:' + cs.paddingTop + ' ' + cs.paddingRight + ' ' + cs.paddingBottom + ' ' + cs.paddingLeft + ';' +
+        'font:' + cs.font + ';letter-spacing:' + cs.letterSpacing + ';line-height:' + cs.lineHeight + ';white-space:' + cs.whiteSpace + ';word-break:' + cs.wordBreak + ';';
+      c.value = text;
+      if (c.parentNode !== document.body) document.body.appendChild(c);
+      return c.scrollHeight;
+    } catch (_e) { return 0; }
+  }
 
   // ── API ─────────────────────────────────────────────────
+  // 7.0.29 R1 (Q1 FIX 1): a write on its way to the Mac (a send, a save). theme.js's restyle check asks window.CosBusy
+  // before it reloads the page, so a reload never lands on a message in flight.
+  var WRITES = { n: 0 };
+  function writeStart(method) {
+    if (!method || method === 'GET') return function () {};
+    WRITES.n++;
+    var once = false;
+    return function () { if (!once) { once = true; WRITES.n = Math.max(0, WRITES.n - 1); } };
+  }
+  if (typeof window === 'object' && window) window.CosBusy = function () { return WRITES.n > 0 || !!(typeof state === 'object' && state && state.reading && state.reading.sending); };
   function api(path, opts) {
     var o = opts || {};
     var headers = { 'X-COS-Web': '1' };
@@ -260,7 +306,7 @@
     var limit = o.timeoutMs != null ? o.timeoutMs : (method === 'GET' ? API_READ_TIMEOUT_MS : 0);
     var ctrl = limit && window.AbortController ? new AbortController() : null;
     var timer = ctrl ? setTimeout(function () { ctrl.abort(); }, limit) : null;
-    var sentAt = Date.now();
+    var sentAt = Date.now(), writeDone = typeof writeStart === 'function' ? writeStart(method) : function () {};
     return fetch(path, { method: method, headers: headers, credentials: 'same-origin', body: body, signal: ctrl ? ctrl.signal : undefined }).then(function (res) {
       // Blob bodies keep their deadline after headers: a stalled download must release its queue slot.
       if (timer && o.responseType !== 'blob') clearTimeout(timer);
@@ -288,9 +334,11 @@
       });
     }).then(function (value) {
       if (timer) clearTimeout(timer);
+      writeDone();
       return value;
     }, function (err) {
       if (timer) clearTimeout(timer);
+      writeDone();
       if (err && err.name === 'AbortError' && ctrl && ctrl.signal.aborted) {
         // 6.99.32 (QA 6.99.30 canary W1): a read the Mac never answered in time means it is not answering. A write has
         // no deadline unless its caller set one, and a slow save is not a Mac that went away, so only reads say so.
@@ -525,10 +573,187 @@
     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)';
   function isPhone() { return !window.matchMedia('(min-width: 600px)').matches || window.matchMedia(SHORT_TOUCH_MQ).matches; }
+  // 7.0.29: the folded Duo's side rail (app.css "the folded Duo's side rail"). theme.js decides from the screen's shape
+  // (html.short-screen); this media query is app.css's own, so the two never disagree. When it is on, the rail is the one
+  // way to switch panes: the top bar's section button keeps the name and loses its menu (inert), and its Back moves to
+  // the rail's foot (#rail-back, the same goBack).
+  var SIDE_RAIL_MQ = '(max-width: 599px) and (pointer: coarse)';
+  function sideRail() {
+    var de = document.documentElement;
+    return !!(de && de.classList && de.classList.contains('short-screen') && window.matchMedia && window.matchMedia(SIDE_RAIL_MQ).matches);
+  }
+  // 44 points on the phone. Safari's Page Zoom lays the page out wider and draws it at visualViewport.scale (his Duo: 449 px
+  // at 0.85), so 44 px would be 37 points: the rail's buttons are ceil(44 / scale) px: 44 at 100 percent, 52 at 85, 88 at 50 (the lowest Page Zoom). Read at boot and when the
+  // layout width changes (rotation), never on a pinch: a pinch must not resize the rail.
+  var RAIL = { hit: 0, cw: -1, hooked: false, on: null };
+  function railHitSync() {
+    var de = document.documentElement, cw = de ? de.clientWidth : 0;
+    if (RAIL.hit && cw === RAIL.cw) return RAIL.hit;
+    var vv = window.visualViewport, s = vv && typeof vv.scale === 'number' ? vv.scale : 1;
+    if (!(s >= 0.5 && s <= 1)) s = 1;
+    RAIL.hit = Math.ceil(44 / s - 0.01);   // s is 0.5 to 1 here, so 44 to 88
+    RAIL.cw = cw;
+    if (de && de.style) de.style.setProperty('--rail-hit', RAIL.hit + 'px');
+    return RAIL.hit;
+  }
+  function railSync() {
+    var on = false;
+    try {
+      // theme.js's one screen test first (its own resize listener ran too; this keeps the order certain), then the page.
+      if (typeof window.CosShortScreen === 'function') window.CosShortScreen();
+      on = sideRail();
+      var btn = typeof $ === 'function' ? $('section-btn') : null;
+      if (btn) {
+        btn.inert = on;
+        if (on) btn.removeAttribute('aria-haspopup'); else btn.setAttribute('aria-haspopup', 'dialog');
+      }
+      if (on) { railHitSync(); closeMenu(); }
+      // 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 }); }
+      RAIL.on = on;
+      if (!RAIL.hooked && typeof window.matchMedia === 'function' && typeof window.addEventListener === 'function') {
+        RAIL.hooked = true;
+        var mq = window.matchMedia(SIDE_RAIL_MQ);
+        if (mq && mq.addEventListener) mq.addEventListener('change', railSync); else if (mq && mq.addListener) mq.addListener(railSync);
+        window.addEventListener('resize', function () { railSync(); });
+        window.addEventListener('orientationchange', function () { railSync(); });
+      }
+    } catch (_e) { /* a harness without a page: no rail */ }
+    return on;
+  }
   /** A keyboard and a fine pointer are the way in (a Mac, a PC): Return sends. Touch screens type a new line. */
   function keyboardFirst() { return !!(window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches); }
   // Return in a text box sends only where a keyboard and a pointer are the way in (cos-chat.js keyboardFirst): never on
@@ -541,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); } }
@@ -563,9 +789,21 @@
 
     // Top bar (phone): the section switcher at a list, a back button on a reader.
     $('topbar-back').classList.toggle('hidden', !reading);
+    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');
@@ -601,30 +839,36 @@
     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;
   }
-  function openMenu() { $('section-menu').classList.remove('hidden'); var cur = document.querySelector('#section-menu [aria-current="page"]') || document.querySelector('#section-menu [data-goto]'); if (cur) cur.focus(); }
+  function openMenu() { if (sideRail()) return; $('section-menu').classList.remove('hidden'); var cur = document.querySelector('#section-menu [aria-current="page"]') || document.querySelector('#section-menu [data-goto]'); if (cur) cur.focus(); }
   function closeMenu() { $('section-menu').classList.add('hidden'); }
 
   // ── auth ────────────────────────────────────────────────
@@ -660,7 +904,7 @@
     // 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');
     // 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;
@@ -2068,7 +2312,11 @@
     var qs1 = sessionQs(), open = (!!html && !te) || !!(qs1 && ((qs1.itemsFor && qs1.itemsFor(r.id).length) || (qs1.atMacFor && qs1.atMacFor(r.id).length)));
     var box = $('session-input');
     // 7.0.18: here a reply IS the answer (sent with the contract's attribution), so the box says so.
-    if (box && box.setAttribute) box.setAttribute('placeholder', te ? 'Or write your own answer' : open ? 'Message this session (not an answer)' : 'Continue this session…');
+    if (box && box.setAttribute) {
+      box.phLong = te ? 'Or write your own answer' : open ? 'Message this session (not an answer)' : 'Continue this session…';
+      box.phShort = open && !te ? 'Message (not an answer)' : '';
+      if (typeof sxPlaceholderFit === 'function') sxPlaceholderFit(box); else box.setAttribute('placeholder', box.phLong);
+    }
   }
   // ── end at the Mac's prompt
 
@@ -2484,7 +2732,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));
     });
   }
@@ -2759,6 +3007,8 @@
       var touched = function () { SX_PIN.userAt = Date.now(); };
       ['wheel', 'touchstart', 'pointerdown', 'keydown'].forEach(function (t) { body.addEventListener(t, touched, { passive: true }); });
       body.addEventListener('scroll', sxGoQuestionPaint, { passive: true });
+      // 7.0.29 ADD 3: reaching the end shows him what is there.
+      body.addEventListener('scroll', function () { if (typeof sxMarkShown === 'function' && state.reading) sxMarkShown(state.reading); }, { passive: true });
       body.addEventListener('scroll', function () {
         if (SX_PIN.body !== body || Date.now() - SX_PIN.userAt > SX_PIN_USER_MS) return;
         if (Math.abs(body.scrollTop - SX_PIN.put) > 4 && body.scrollTop < body.scrollHeight - body.clientHeight - 4) sxUnpin();
@@ -2907,12 +3157,25 @@
   // Earlier this month as compact rows, folded shut with a count. Days are counted back from today (2 to 6 days ago is
   // Earlier this week, 7 to 13 Last week, 14 to 30 Earlier this month), so no group is empty only because of the
   // calendar.
-  var SX_GROUPS = [['needs', 'Needs you', 'state'], ['working', 'Working now', 'state'], ['pinned', 'Pinned', ''], ['today', 'Today', ''],
+  var SX_GROUPS = [['needs', 'Needs you', 'state'], ['working', 'Working now', 'state'], ['pinned', 'Pinned', 'pinned'], ['today', 'Today', ''],
     ['yesterday', 'Yesterday', ''], ['week', 'Earlier this week', ''], ['lastweek', 'Last week', 'compact'], ['month', 'Earlier this month', 'compact']];
   var SX_DAY_MS = 86400000, SX_REST_MS = 2000, SX_EMPTY_HOLD_MS = 5000;
   // place: each row's group as last drawn at rest; seen: when Needs you and Working now last had rows; open: unfolded
   // compact groups; older: /older's short rows (olderOk false: an older server, 404).
   var SXL = { place: null, down: false, touchAt: 0, scrollAt: 0, timer: 0, seen: {}, open: {}, older: [], olderN: null, olderOk: null, olderNext: null, olderAt: 0, olderBusy: false };
+  // 7.0.29 ADD 1 (Miles 23:53: thirteen pinned rows sat between Working now and Today): Pinned folds like a folder, with
+  // its count, and this browser remembers the choice (localStorage). Open by default, so no list changes until he folds
+  // it. Placement is unchanged: sxGroupFor tests state before pin, so a pinned session that is running is drawn in
+  // Working now, one that waits or failed in Needs you, folded or not, and it goes back under Pinned when idle.
+  var SX_PIN_FOLD_KEY = 'cos_sx_pinned_folded';
+  function sxPinnedOpen() {
+    if (typeof SXL.pinOpen !== 'boolean') { var v = null; try { v = typeof localStorage === 'object' && localStorage ? localStorage.getItem(SX_PIN_FOLD_KEY) : null; } catch (_e) { v = null; } SXL.pinOpen = v !== '1'; }
+    return SXL.pinOpen;
+  }
+  function sxPinnedSet(open) {
+    SXL.pinOpen = !!open;
+    try { if (typeof localStorage === 'object' && localStorage) { if (open) localStorage.removeItem(SX_PIN_FOLD_KEY); else localStorage.setItem(SX_PIN_FOLD_KEY, '1'); } } catch (_e) { /* storage off: this visit only */ }
+  }
   function sxRowKey(s) { var k = splitSessionId(s.provider, s.session_id || s.id); return k.provider + '|' + String(k.id).toLowerCase(); }
   function sxDayStart(t) { var d = new Date(t); d.setHours(0, 0, 0, 0); return d.getTime(); }
   function sxSortTime(s) { return SX.clock === 'opened' ? (sxTime(s.created) || sxTime(s.modified)) : sxTime(s.modified); }
@@ -3017,6 +3280,13 @@
         return;
       }
       if (!n) return;
+      if (g[2] === 'pinned') {
+        var popen = sxPinnedOpen();
+        html += '<section class="sx-g" data-g="pinned"><button type="button" class="sx-gh" data-sx="fold" data-g="pinned" aria-expanded="' + popen + '">' +
+          '<span class="fold"><span class="chev" aria-hidden="true"></span>' + g[1] + '</span><span class="n">' + n + '</span></button>' +
+          (popen ? '<div class="sx-rows">' + rows.map(function (s) { return sxRow(s, null, amb, s.form === 'short'); }).join('') + '</div>' : '') + '</section>';
+        return;
+      }
       if (g[2] === 'compact') {
         var open = !!SXL.open[id];
         html += '<section class="sx-g" data-g="' + id + '"><button type="button" class="sx-gh" data-sx="fold" data-g="' + id + '" aria-expanded="' + open + '">' +
@@ -3188,6 +3458,9 @@
         (s.cos_pinned ? '<button type="button" role="menuitem" data-sx="org-pin" data-key="' + esc(key) + '">Unpin in COS</button>' : '')
         : '<button type="button" role="menuitem" data-sx="org-pin" data-key="' + esc(key) + '">' + (s.cos_pinned ? 'Unpin' : 'Pin') + '</button>') +
       '<button type="button" role="menuitem" data-sx="org-move-menu" data-key="' + esc(key) + '">Move to folder</button>' +
+      // 7.0.29 ADD 2 (Miles 23:53: he could not find how to take a session out of a folder; "No folder" sat at the foot
+      // of Move to folder): a row in a folder gets Remove from folder, the same write as No folder (folder_id null).
+      (s.folder_id && SXF.byId[s.folder_id] ? '<button type="button" role="menuitem" data-sx="org-move" data-key="' + esc(key) + '" data-folder="">Remove from folder</button>' : '') +
       '<button type="button" role="menuitem" data-sx="org-rename" data-key="' + esc(key) + '">Rename</button>';
   }
   function sxFolderMenuHtml(id) {
@@ -3491,6 +3764,7 @@
       if (act === 'view') { sxViewMenu(false); return setSessionsView(t.getAttribute('data-view')); }
       if (act === 'view-menu') return sxViewMenu();
       if (act === 'goto-question') { sxToNewest(); sxGoQuestionPaint(); var gq = $('session-questions'), first = gq && gq.querySelector('button, input, [tabindex]'); if (first && first.focus) first.focus({ preventScroll: true }); return; }
+      if (act === 'fold' && t.getAttribute('data-g') === 'pinned') { sxPinnedSet(!sxPinnedOpen()); return renderSessionGroups(); }
       if (act === 'fold') { var g = t.getAttribute('data-g'), isF = g.indexOf('f:') === 0; SXL.open[g] = isF ? SXL.open[g] === false : !SXL.open[g]; return renderSessionGroups(); }
       if (/^(row-menu|org-|folder-|new-folder|rename-clear|inline-cancel)/.test(act)) { e.stopPropagation(); return sxOrgClick(act, t); }
       if (act === 'older-more') return sxLoadOlder(false, true);
@@ -3507,7 +3781,6 @@
       if (act === 'clear') { var input = $('sessions-q'); input.value = ''; searchSessions(); input.focus(); return; }
       if (act === 'copy-session') return copySessionBrief();
       if (act === 'full') { if (SX_SPLIT) SX_SPLIT.toggleFull(); return; }
-      if (act === 'refresh-turns' && rd) { rd.refusal = null; renderVerdict(rd); refreshTurns(rd.provider, rd.id); return; }
       if (act === 'retry' && rd) { rd.refusal = null; renderVerdict(rd); return sendSessionTurn(!!rd.retryFork); }
       if (act === 'caution-send' && rd) { rd.cautionAck = true; rd.cautionAsk = false; renderVerdict(rd); return sendSessionTurn(false); }
       if (act === 'caution-cancel' && rd) { rd.cautionAsk = false; renderVerdict(rd); return; }
@@ -3803,7 +4076,7 @@
     var timer = ctrl && o.timeoutMs ? setTimeout(function () { ctrl.abort(); }, o.timeoutMs) : null;
     var headers = { 'X-COS-Web': '1' };
     if (o.body !== undefined) headers['Content-Type'] = 'application/json';
-    var sentAt = Date.now();
+    var sentAt = Date.now(), writeDone = typeof writeStart === 'function' ? writeStart(o.method || 'GET') : function () {};
     return fetch(path, { method: o.method || 'GET', headers: headers, credentials: 'same-origin', body: o.body !== undefined ? JSON.stringify(o.body) : undefined, signal: ctrl ? ctrl.signal : undefined })
       .then(function (res) {
         sxNoteClock(res, sentAt);
@@ -3816,7 +4089,7 @@
         noteServer(false);
         throw unreachableError(err);
       })
-      .finally(function () { if (timer) clearTimeout(timer); });
+      .finally(function () { if (timer) clearTimeout(timer); writeDone(); });
   }
 
   // Per-browser memory for one session: messages held until a reply ends, and the queue keys
@@ -3925,6 +4198,8 @@
         // edge says one waits. It sits in the reader, not the dock, because the dock scrolls by itself as a last resort.
         '<p class="sx-goq" id="session-goq" hidden><span>A question is waiting at the end.</span><button type="button" class="cx-btn quiet" data-sx="goto-question">Go to the question</button></p>';
       readerImagesMount($('session-turns'), r);
+      if (typeof unsentRestore === 'function') unsentRestore(r);
+      var si0 = $('session-input'); if (si0 && !si0.value && typeof autoGrow === 'function') autoGrow(si0);
       sxNoteList(r, d);
       setLive({});
       if (typeof readerMacPaint === 'function') readerMacPaint(r, sxState(d) === 'waiting');
@@ -3942,6 +4217,8 @@
         startHeldTimer(state.reading);
       }
       if (turns.length) requestAnimationFrame(function () { if (typeof sxToNewest === 'function') sxToNewest(); else window.scrollTo(0, document.documentElement.scrollHeight); });
+      // 7.0.29 ADD 3: the newest turns he was just taken to count as shown (this frame runs after the one above).
+      if (turns.length) requestAnimationFrame(function () { if (typeof sxMarkShown === 'function') sxMarkShown(r); });
       requestAnimationFrame(function () { if (typeof sxFrameCrumb === 'function') sxFrameCrumb('open'); });
       watchSession(provider, id);
     }).catch(function (err) {
@@ -4230,6 +4507,53 @@
     paintActivity(r);
     if (moved) renderVerdict(r);
   }
+  // ── 7.0.29 ADD 3 (Miles 00:01 "we have to hit continue to steer the session"; 00:03 "Refresh doesn't seem to do
+  // anything"; the lead's ruling 00:02 and A1 to A3 00:47): the changed-thread stop. The server guard is unchanged; the
+  // page does the acknowledging. Shown, not just drawn (A1): a turn counts as shown only while the reader is at the
+  // newest turn (following it, or scrolled to the end since). Read from the reader's own pin and scroll, no observer per
+  // turn. Only turns with words count; tool steps are not turns here.
+  function sxTextTurns(turns) { return (turns || []).filter(function (t) { return t && String(t.text || t.content || '').trim(); }); }
+  function sxAtEnd() {
+    try {
+      var body = $('session-body');
+      if (body && document.documentElement.classList.contains('sx-frame')) return SX_PIN.body === body || body.scrollTop >= body.scrollHeight - body.clientHeight - 4;
+      var de = document.documentElement;
+      return (window.scrollY || 0) + window.innerHeight >= de.scrollHeight - 4;
+    } catch (_e) { return false; }   // a page without these (a test harness): nothing counts as shown, so nothing resends
+  }
+  function sxMarkShown(r) {
+    if (!r || state.reading !== r || !sxAtEnd()) return;
+    r.shown = r.shown || {};
+    sxTextTurns(r.turns).forEach(function (t) { r.shown[sxTurnSig(t)] = 1; });
+  }
+  // At Send: what he had been shown, and whether the session was already waiting on him.
+  function sxPressSeen(r) {
+    sxMarkShown(r);
+    return { shown: Object.assign({}, r.shown || {}), waiting: !!r.waitingNow };
+  }
+  // After a changed-thread refusal: fetch the turns (the refreshTurns request), draw them, and say what is new since Send:
+  // turns with words he had not been shown, or a question or permission now waiting that was not (A2). null: the fetch
+  // failed, so nothing can be said and the box shows.
+  function sxChangedLook(r, seen) {
+    return api(sessionPath(r.provider, r.id, '?turns=' + SX_TURNS + '&cards=1')).then(function (d) {
+      if (state.reading !== r) return null;
+      var turns = Array.isArray(d && d.recent_turns) ? d.recent_turns : [];
+      var box = $('session-turns'); if (box) { sxMergeTurns(box, r.turns || [], turns, d); readerImagesMount(box, r); }
+      r.detail = d; r.turns = turns; r.more = d.recent_turns_more === true;
+      var fresh = sxTextTurns(turns).filter(function (t) { return !seen.shown[sxTurnSig(t)]; });
+      // Waiting by the reader's own rule, or by the detail's own word (a session read as stale may still say it waits):
+      // either way stopping is the safe side.
+      return { fresh: fresh, newWait: (sxState(d) === 'waiting' || (d && d.agent_state === 'waiting')) && !seen.waiting };
+    }, function () { return null; });
+  }
+  // Take him to the first new turn: it is drawn, and the stop is about it.
+  function sxShowFresh(fresh) {
+    if (!fresh || !fresh.length) return;
+    var sig = sxTurnSig(fresh[0]), el = null;
+    document.querySelectorAll('#session-turns .turn[data-sig]').forEach(function (n) { if (!el && n.getAttribute('data-sig') === sig) el = n; });
+    sxUnpin();
+    if (el && el.scrollIntoView) el.scrollIntoView({ block: 'start' }); else sxToNewest();
+  }
   function refreshTurns(provider, id) {
     var reading = state.reading;
     api(sessionPath(provider, id, '?turns=' + SX_TURNS + '&cards=1')).then(function (d) {
@@ -4239,6 +4563,7 @@
       var box = $('session-turns'); if (box) { sxMergeTurns(box, r.turns || [], turns, d); readerImagesMount(box, r); }
       // The header keeps the subtitle it opened with: a rewrap above the turns would move them.
       r.detail = d; r.turns = turns; r.more = d.recent_turns_more === true;
+      sxMarkShown(r);
       renderHeld(r);
       loadQueue(provider, id);
       sxProbeAttach(r);
@@ -4362,9 +4687,10 @@
     } else if (r.refusal) {
       var f = r.refusal;
       html = refusalBox(f.copy, f.supplement,
-        (f.changed ? '<button type="button" class="cx-btn quiet" data-sx="refresh-turns">Refresh</button><button type="button" class="cx-btn quiet" data-action="send-anyway">Continue anyway</button>' : '') +
+        // 7.0.29 ADD 3: a changed thread says what each button does. The page has already refreshed, so no Refresh.
+        (f.changed ? '<button type="button" class="cx-btn quiet" data-action="send-anyway">Send it anyway</button>' : '') +
         (f.retry ? '<button type="button" class="cx-btn quiet" data-sx="retry">Retry</button>' : '') +
-        (f.fork ? forkBtn : ''));
+        (f.fork ? (f.changed ? '<button type="button" class="cx-btn quiet" data-action="fork-session" title="Runs your message in a copy of this thread. The original is untouched.">Send to a copy</button>' : forkBtn) : ''));
     } else if (v && v.attachable === false && /^(native_thread_working|native_target_busy)$/.test(v.reason)) {
       // 6.99.29: "Working right now" only while the one state says so.
       if (sxParkNoteShows(r)) html = '<div class="sx-park"><p>' + esc(sxParkLine(r)) + '</p>' + (/fork/i.test(v.reasonCopy) ? '<div class="sx-box-actions">' + forkBtn + '</div>' : '') + '</div>';
@@ -4399,18 +4725,51 @@
     if (!r.draft || r.draft.text !== text || (r.draft.ids || []).join(',') !== files.join(',')) r.draft = { text: text, key: newTurnKey(), ids: files };
     return r.draft;
   }
-  // The box is cleared only of the very words that were sent; anything typed since stays.
-  function clearBoxOf(text) {
+  // 7.0.29 (lead F3: the rail's Back sits level with Send, so a mis-tap is likely): words typed in a session's reply
+  // box and not sent come back when that session opens again in this tab, after Back, the rail or another pane. Kept in
+  // memory, per session, as he types; dropped when the box is empty or when those words are sent.
+  var SX_UNSENT = {};
+  function unsentKey(provider, id) { return String(provider || '') + '|' + String(id || '').toLowerCase(); }
+  function unsentSave() {
+    var r = state.reading, input = $('session-input');
+    if (!r || !input) return;
+    var k = unsentKey(r.provider, r.id);
+    if (input.value.trim()) SX_UNSENT[k] = input.value; else delete SX_UNSENT[k];
+  }
+  function unsentRestore(r) {
+    var input = $('session-input'), v = r ? SX_UNSENT[unsentKey(r.provider, r.id)] : '';
+    if (input && v && !input.value) { input.value = v; autoGrow(input); }
+  }
+  // 7.0.29 R4 (Q1 Note 1): the saved words of the session the message was sent FROM only, never another session's
+  // words that happen to match. No session named, nothing is dropped.
+  function unsentDrop(text, r) {
+    if (!r || !r.provider || !r.id) return;
+    var k = unsentKey(r.provider, r.id), v = SX_UNSENT[k];
+    if (v == null) return;
+    var t = String(text).trim(), bare = typeof turnEndBare === 'function' ? turnEndBare(text) : t;
+    v = String(v).trim();
+    if (v === t || v === bare) delete SX_UNSENT[k];
+  }
+  // The box is cleared only of the very words that were sent; anything typed since stays. `r` is the session they were
+  // sent from: another session's box is never touched (R4).
+  function clearBoxOf(text, r) {
+    if (typeof unsentDrop === 'function') unsentDrop(text, r || state.reading);
+    if (r && state.reading !== r) return;
     var input = $('session-input');
     // 7.0.18: an answer to a turn-end ask was sent with the attribution in front; the box holds his words without it.
     if (input && (input.value.trim() === String(text).trim() || input.value.trim() === turnEndBare(text))) { input.value = ''; autoGrow(input); }
     if (state.reading && state.reading.draft && state.reading.draft.text === text) state.reading.draft = null;
   }
   // Words go back in the box only if the box is empty; otherwise the status line keeps them. `files` says what became
-  // of the message's files (heldFilesBack).
-  function returnToBox(text, why, files) {
+  // of the message's files (heldFilesBack). 7.0.29 R4: when `r`, the session they came from, is not the one open, they
+  // go to that session's saved words (back in its box when it opens), never into the open session's box.
+  function returnToBox(text, why, files, r) {
+    if (r && r.provider && r.id && state.reading !== r) {
+      if (typeof unsentKey === 'function') { var k = unsentKey(r.provider, r.id), had = SX_UNSENT[k]; SX_UNSENT[k] = had && String(had).trim() ? had + '\n\n' + text : text; }
+      return;
+    }
     var input = $('session-input');
-    if (input && !input.value.trim()) { input.value = text; autoGrow(input); sessionStatus(why + ' Your message is back in the box.' + (files || ''), 'error'); }
+    if (input && !input.value.trim()) { input.value = text; autoGrow(input); if (typeof unsentSave === 'function') unsentSave(); sessionStatus(why + ' Your message is back in the box.' + (files || ''), 'error'); }
     else sessionStatus(why + ' Not sent: “' + String(text).slice(0, 80) + (text.length > 80 ? '…' : '') + '”' + (files || ''), 'error');
   }
   // Your words show in the conversation the moment the Mac accepts them; the next refresh of
@@ -4437,7 +4796,7 @@
   var READER_VIEW = {
     status: function (r, text, kind, actionHtml) { sessionStatus(text, kind, actionHtml); },
     pending: function (r, text, note) { showPendingTurn(text, note); },
-    clear: function (r, text) { clearBoxOf(text); },
+    clear: function (r, text) { clearBoxOf(text, r); },
     verdict: function (r) { renderVerdict(r); },
     hold: function (r, draft) { holdUntilReplyEnds(r, draft); },
     watch: function (r, bindingId, key) { watchTurn(bindingId, key, r.provider, r.id); },
@@ -4552,7 +4911,11 @@
     if (r.refusal || r.cautionAsk) { r.refusal = null; r.cautionAsk = false; renderVerdict(r); }
     // 7.0.18: while a turn-end ask is open, the box's words are his own answer ('Other' in the contract): sent with the
     // same attribution as a choice. A fork goes to a copy and is not an answer, so it is sent as written.
-    if (!fork && r.turnEnd && turnEndOf(readerRowOf(r))) text = turnEndPrompt(text);
+    var answering = !!(!fork && r.turnEnd && turnEndOf(readerRowOf(r)));
+    if (answering) text = turnEndPrompt(text);
+    // 7.0.29 ADD 3: what he had been shown when he pressed Send. A turn-end answer never resends by itself; R6 (Q1's nit):
+    // the same test as the answer's prefix (r.turnEnd AND the ask still open), so a message after a closed ask is a message.
+    if (!fork && typeof sxPressSeen === 'function') opts = Object.assign({}, opts || {}, { seen: answering ? null : sxPressSeen(r) });
     r.sending = true;
     var btns = form.querySelectorAll('button'); btns.forEach(function (b) { b.disabled = true; });
     var done = function () { r.sending = false; btns.forEach(function (b) { b.disabled = false; }); paintReaderFiles(); };
@@ -4633,14 +4996,25 @@
         // it under the same key and sends it the moment the reply ends.
         if (reason === 'native_turn_in_progress') { if (!opts.held) view.hold(r, draft); return 'held'; }
         if (reason === 'native_thread_changed' && b.revision) {
-          if (opts.held) settleHeld(r, opts.held, 'refused', 'This session changed on your Mac while your message waited.');
-          else {
-            // Control's refusal box for a changed thread: Refresh, Continue anyway, Fork with this message.
-            r.sendAnyway = b.revision;
-            view.status(r, '');
-            r.refusal = { copy: b.reasonCopy || 'This session changed on your Mac since you opened it.', changed: true, fork: true };
-            view.verdict(r);
+          // The box. Send it anyway always carries the revision of THIS refusal, the newest (A3).
+          var changedBox = function (copy) { r.sendAnyway = b.revision; view.status(r, ''); r.refusal = { copy: copy, changed: true, fork: true }; view.verdict(r); };
+          if (opts.held) { settleHeld(r, opts.held, 'refused', 'This session changed on your Mac while your message waited.'); return 'changed'; }
+          // 7.0.29 ADD 3, the session reader only (opts.seen; Today's panel keeps its own path): never for a held or
+          // queued message, a turn-end answer (seen is null), or a send that already carries a revision, which the one
+          // automatic resend always does. So at most one resend, and a second refusal shows the box.
+          if (opts.seen && !opts.acknowledgedRevision && state.reading === r) {
+            return sxChangedLook(r, opts.seen).then(function (look) {
+              if (look && !look.fresh.length && !look.newWait && state.reading === r) return continueSession(r, text, Object.assign({}, opts, { acknowledgedRevision: b.revision }));
+              changedBox(!look ? 'This session changed on your Mac, and COS could not load what changed. Your message is not sent yet.'
+                : look.fresh.length ? 'A new reply arrived while you were writing. Your message is not sent yet.'
+                : 'The session is now waiting on a question. Your message is not sent yet.');
+              if (look) sxShowFresh(look.fresh);
+              return 'changed';
+            });
           }
+          changedBox(opts.seen === undefined ? (b.reasonCopy || 'This session changed on your Mac since you opened it.')
+            : opts.seen === null ? 'This session changed on your Mac. Your answer is not sent yet.'
+            : 'This session changed on your Mac again. Your message is not sent yet.');
           return 'changed';
         }
         if (/^(stale_epoch|binding_expired|binding_not_active|binding_unusable|unknown_binding)$/.test(reason) && !opts.reattached) {
@@ -4861,7 +5235,7 @@
       showPendingTurn(draft.text, 'sends after this reply', draft.key);
       saveHeld(r);
     }
-    clearBoxOf(draft.text);
+    clearBoxOf(draft.text, r);
     sessionStatus('COS is still answering. ' + (r.held.length > 1 ? r.held.length + ' messages send' : 'Yours sends') + ' as soon as it finishes. ', null, '<button type="button" class="link-btn" data-action="drop-after">Don’t send</button>');
     startHeldTimer(r);
   }
@@ -4894,7 +5268,7 @@
     } else {
       if (bubble) bubble.remove();
       // The whole message comes back: its words, and its files where the Mac still keeps them.
-      returnToBox(h.text, how === 'cancelled' ? 'Not sent.' : copy || 'Not sent.', heldFilesBack(r, h));
+      returnToBox(h.text, how === 'cancelled' ? 'Not sent.' : copy || 'Not sent.', heldFilesBack(r, h), r);
     }
     if (!r.held.some(function (x) { return !x.cancelled; })) clearInterval(r.heldTimer);
   }
@@ -4966,7 +5340,7 @@
     sessionStatus('Copying the session. This can take up to a minute.');
     var settle = function (b) {
       if (b.forked === true) {
-        r.forkDraft = null; clearBoxOf(text); readerFilesSent(readerFilesOn() ? readerBox(r) : null, ids);
+        r.forkDraft = null; clearBoxOf(text, r); readerFilesSent(readerFilesOn() ? readerBox(r) : null, ids);
         sessionStatus('Forked. The copy has your message and shows in Sessions in a moment.');
         setTimeout(function () { if (state.pane === 'sessions') loadSessions(true); }, 4000);
         return true;
@@ -5361,7 +5735,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;
@@ -7136,10 +7510,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,#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') {
@@ -7284,6 +7661,7 @@
   });
   document.addEventListener('input', function (e) {
     if (e.target.tagName === 'TEXTAREA') autoGrow(e.target);
+    if (e.target.id === 'session-input' && typeof unsentSave === 'function') unsentSave();
     if (e.target.id === 'ask-q') renderAsk();
     if (e.target.hasAttribute && e.target.hasAttribute('data-next-prep-steer')) nextPrepInput(e.target);
     if (e.target.id === 'sessions-q' && !e.target.value.trim()) renderSessionGroups(state.sessions);
@@ -7507,13 +7885,54 @@
     } catch (_e) { return false; }
   }
 
+  // Page errors (lead 08:31, 11/11): Control Web reported none, so "no errors in his rows" proved nothing. A script error
+  // or an unhandled rejection becomes one bounded row, event web.error: what kind it was, the error's class (TypeError),
+  // its code and HTTP status when it has them, the script file's own name, line and column, and the pane. Never the
+  // message, a stack or any text: those can carry what a person typed. At most WEB_ERR_MAX rows a page load, one per
+  // kind, class, code and place.
+  var WEB_ERR_MAX = 10, WEB_ERR = { n: 0, seen: {} };
+  function webErrorRow(kind, err, file, line, col) {
+    try {
+      var name = err && typeof err.name === 'string' ? err.name : '';
+      var cls = /^[A-Za-z][A-Za-z0-9]{0,39}$/.test(name) ? name : (err === null || err === undefined ? 'none' : typeof err === 'object' ? 'object' : typeof err);
+      var code = err && (typeof err.code === 'string' || typeof err.code === 'number') && /^[A-Za-z0-9_.-]{1,40}$/.test(String(err.code)) ? String(err.code) : '';
+      var status = err && typeof err.status === 'number' && isFinite(err.status) ? err.status : null;
+      var src = String(file || '').split(/[?#]/)[0].split('/').pop();
+      src = /^[A-Za-z0-9_.-]{1,40}$/.test(src) ? src : '';
+      var ln = Number(line) > 0 ? Math.floor(Number(line)) : 0, cn = Number(col) > 0 ? Math.floor(Number(col)) : 0;
+      var key = [kind, cls, code, status, src, ln].join('|');
+      if (WEB_ERR.seen[key] || WEB_ERR.n >= WEB_ERR_MAX) return false;
+      WEB_ERR.seen[key] = 1; WEB_ERR.n++;
+      var pane = typeof state === 'object' && state && typeof state.pane === 'string' && /^[a-z-]{1,24}$/.test(state.pane) ? state.pane : '';
+      api('/api/diag/client', { method: 'POST', body: { ts: Date.now(), level: 'error', event: 'web.error',
+        data: { kind: kind, cls: cls, code: code, status: status, src: src, line: ln, col: cn, pane: pane, n: WEB_ERR.n } }, timeoutMs: 5000 }).catch(function () {});
+      return true;
+    } catch (_e) { return false; }
+  }
+  if (window.addEventListener) {
+    // Only script errors: a failed image or file load fires 'error' on its element, which does not reach the window.
+    window.addEventListener('error', function (e) { if (e && (e.error || e.filename)) webErrorRow('error', e.error || null, e.filename, e.lineno, e.colno); });
+    window.addEventListener('unhandledrejection', function (e) { webErrorRow('rejection', e ? e.reason : null, '', 0, 0); });
+  }
+
+  // 7.0.28: when theme.js had to bring back a stylesheet or a script (the page opened before it could reach the Mac), one
+  // numbers-only row says so: how ('sheets', 'reload' or 'gave-up'), how many sheets and scripts had failed, how many
+  // checks it took and how long. A reload's report comes back from sessionStorage once.
+  (function restyleRow() {
+    var R = window.CosRestyle;
+    if (!R) return;
+    var row = function (d) { if (d && typeof d === 'object') layoutCrumb('restyle', { how: String(d.how || '').slice(0, 24), sheets: +d.sheets || 0, scripts: +d.scripts || 0, tries: +d.tries || 0, ms: +d.ms || 0 }); };
+    row(R.takeSaved && R.takeSaved());
+    window.addEventListener('cos-restyle', function (e) { row(e && e.detail); });
+  })();
+
   // ── the shared kit for pane modules (panes/*.js) ───────
   window.COSWeb = {
     $: $, esc: esc, md: md, plain: plain, structureLensAnswer: structureLensAnswer, tableFit: tableFit, api: api, toast: toast, ago: ago, clock: clock, toDate: toDate,
     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,
@@ -7523,7 +7942,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); },
@@ -7679,7 +8098,7 @@
     var sc = window.screen || {}, w = lrWide();
     layoutCrumb('device', { sw: sc.width, sh: sc.height, sah: sc.availHeight, oh: window.outerHeight, ow: window.outerWidth, dpr: window.devicePixelRatio,
       sat: lrProbe('padding-top:env(safe-area-inset-top)', 'paddingTop'), sab: lrProbe('padding-bottom:env(safe-area-inset-bottom)', 'paddingBottom'),
-      anyCoarse: lrMatch('(any-pointer: coarse)'), shortTouch: lrMatch(SHORT_TOUCH_MQ), phone: isPhone(), cw: w.cw, dw: w.dw, scw: w.scw, wide: w.wide });
+      anyCoarse: lrMatch('(any-pointer: coarse)'), shortTouch: lrMatch(SHORT_TOUCH_MQ), rail: typeof sideRail === 'function' ? sideRail() : false, railHit: typeof RAIL === 'object' ? RAIL.hit : 0, phone: isPhone(), cw: w.cw, dw: w.dw, scw: w.scw, wide: w.wide });
   }
   // The focus line is for touch screens only (QA W3): on a Mac it would only spend the budget.
   function lrFocus() {
@@ -7774,6 +8193,7 @@
 
   // Every pane module is a plain script after this one; boot waits for all of them.
   function boot() {
+    if (typeof railSync === 'function') railSync();   // 7.0.29: before the shell shows, so the rail never moves the page
     // The open-time report's clock (ms since navigation start, -1 where there is none) and the two numbers boot gives it:
     // when boot started (every script had run) and the sign-in check's round trip. Kept inside boot, and FIRST_PAINT
     // looked up, never assumed, because the harnesses that run boot alone have neither.
@@ -7822,20 +8242,27 @@
     return api('/api/web-session/status').then(function (st) { return bootAnswer(st); }, function (err) { return bootFail(err); });
   }
   function bootAnswer(st) {
+    AUTH_RETRY.n = 0;   // the Mac answered: a later not-answering card starts its quick checks again
     if (st && st.authenticated) return showShell(st);
     // Q1 S2: a browser that was signed in before learns why it is not now (the 30 days, no use in its last 2 days, a sign-out).
     showAuth(typeof signinKnown === 'function' && signinKnown() ? signinLapsedCopy() : undefined);
   }
   function bootFail(err) {
     // F23: a Mac that did not answer is not a sign-in problem. Say so, offer Try again, keep the form out of the way.
-    if (err && err.status) showAuth(err.message); else { showAuth(); authOffline(true); }
-  }
-  // Q1 M2: the not-answering card checks again every 30 s while the page is in front, and stops while it is hidden.
-  var AUTH_RETRY = { timer: null, ms: 30000 };
+    // showAuth turns the card off first (authOffline(false)); that must not restart the 1, 2, 4, 8 s steps, so only a Mac
+    // that answered (bootAnswer, or an error with a status here) resets them.
+    if (err && err.status) { AUTH_RETRY.n = 0; showAuth(err.message); } else { showAuth(); authOffline(true); }
+  }
+  // Q1 M2: the not-answering card checks again while the page is in front, and stops while it is hidden. 7.0.28 (Miles
+  // 19:28): the first checks come after 1, 2, 4 and 8 s, because a phone that opened the page before its tunnel was up
+  // usually reaches the Mac within seconds; then every 30 s. The steps start over once the Mac has answered.
+  var AUTH_RETRY = { timer: null, ms: 30000, steps: [1000, 2000, 4000, 8000], n: 0 };
   function authRetrySchedule(on) {
     if (AUTH_RETRY.timer) { clearTimeout(AUTH_RETRY.timer); AUTH_RETRY.timer = null; }
     if (!on || document.hidden) return;
-    AUTH_RETRY.timer = setTimeout(function () { AUTH_RETRY.timer = null; if (!document.hidden) bootStatus(); }, AUTH_RETRY.ms);
+    var ms = AUTH_RETRY.n < AUTH_RETRY.steps.length ? AUTH_RETRY.steps[AUTH_RETRY.n] : AUTH_RETRY.ms;
+    AUTH_RETRY.n++;
+    AUTH_RETRY.timer = setTimeout(function () { AUTH_RETRY.timer = null; if (!document.hidden) bootStatus(); }, ms);
   }
   document.addEventListener('visibilitychange', function () {
     var box = $('auth-offline');
@@ -7853,8 +8280,8 @@
     if (title) title.textContent = on ? (offline ? 'This device is offline' : 'COS on your Mac is not answering') : 'Connect this browser';
     if (intro) intro.classList.toggle('hidden', !!on);
     var text = $('auth-offline-text');
-    if (text && on) text.textContent = offline ? 'Connect to the internet and Tailscale. This page checks again every 30 seconds.'
-      : 'Your Mac may be asleep, or this device may be offline or off Tailscale. This page checks again every 30 seconds.';
+    if (text && on) text.textContent = offline ? 'Connect to the internet and Tailscale. This page checks again in a few seconds, then every 30 seconds.'
+      : 'Your Mac may be asleep, or this device may be offline or off Tailscale. This page checks again in a few seconds, then every 30 seconds.';
     authRetrySchedule(!!on);
     if (on) { var err = $('auth-error'); if (err) { setStatus(err, '', true); err.classList.add('hidden'); } }
   }