@gotcos/glasses-server 7.0.31 → 7.0.34

package/server/web-control/app.js

@@ -294,6 +294,26 @@
     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); };
+  // 7.0.33 A8 (Anand round 2, slide 19): an answer that is only a machine code ("cos_pipeline_not_configured") is never
+  // put on screen as is. Known codes get plain words that say what to do; any other bare code gets one plain sentence.
+  // err.code keeps the code, so a pane can still tell them apart.
+  var NOT_SET_UP = 'This part of COS is not set up on this Mac, so there is nothing to show here. Nothing is broken.';
+  // When trying again does not help, the next step: COS Control's menu restarts the server.
+  var STILL = ' If it keeps happening, restart COS from the COS Control menu on your Mac.';
+  var PLAIN_CODES = {
+    cos_pipeline_not_configured: NOT_SET_UP, pipeline_missing: NOT_SET_UP,
+    // Q1: a scripts folder is set (COS_SCRIPTS_DIR) but COS cannot run it: a broken setup, not a missing feature.
+    bridge_missing: 'COS on your Mac is set to use a scripts folder it cannot run, so this cannot be read. Check the COS_SCRIPTS_DIR setting on your Mac, then restart COS from the COS Control menu.',
+    task_runtime_unavailable: 'Work is not set up on this Mac yet. Open COS Control on your Mac to finish setting it up.',
+    unknown_command: 'COS on your Mac is older than this page. Update it from COS Control on your Mac.',
+    bridge_error: 'COS on your Mac could not read this just now. Try again in a moment.' + STILL
+  };
+  function plainMessage(msg) {
+    var m = String(msg || '').trim();
+    if (!/^[a-z0-9]+(?:_[a-z0-9]+)+$/.test(m)) return msg;
+    return PLAIN_CODES[m] || 'COS on your Mac could not do that just now. Try again in a moment.' + STILL;
+  }
+  function notSetUp(code) { return code === 'cos_pipeline_not_configured' || code === 'pipeline_missing'; }
   function api(path, opts) {
     var o = opts || {};
     var headers = { 'X-COS-Web': '1' };
@@ -322,7 +342,7 @@
         try { data = text ? JSON.parse(text) : {}; } catch (_e) { data = {}; }
         if (!res.ok) {
           var msg = (data && (data.message || (data.error && data.error.message) || data.error)) || ('The server answered ' + res.status + '.');
-          var err = new Error(typeof msg === 'string' ? msg : 'The server answered ' + res.status + '.');
+          var err = new Error((typeof plainMessage === 'function' ? plainMessage : String)(typeof msg === 'string' ? msg : 'The server answered ' + res.status + '.'));
           err.status = res.status;
           // The machine-readable reason, so a pane can say the right thing for a refusal whose
           // body carries a code and no sentence (for example work-intake's {error: {code}}).
@@ -597,6 +617,10 @@
     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;
+    // 7.0.33 A11 (Anand round 2, slides 5 and 28): a place picked from the menu (the rail, the pane menu, Ask's Go to)
+    // starts a new trail. That page has no path behind it, so Back goes up from it, as after a deep link.
+    if (NAV.fresh && Date.now() - NAV.fresh < 2000) back = null;
+    NAV.fresh = 0;
     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;
@@ -621,15 +645,22 @@
     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.
+  // 7.0.33 A11: a step is named by what it shows, its title (a meeting's, a session's, "Message #2", a day's date), cut
+  // to TRAIL_NAME_MAX characters with an ellipsis; a list is its pane. Only while the title is not loaded does the kind
+  // stand in ("Meeting", "Session", "Naming voices"). The same rule as COS Control's trail on the Mac (D4, 0.5.394).
+  var TRAIL_NAME_MAX = 28;
+  function trailCap(text) { var t = String(text || '').replace(/\s+/g, ' ').trim(); return t.length > TRAIL_NAME_MAX ? t.slice(0, TRAIL_NAME_MAX - 1).replace(/\s+$/, '') + '\u2026' : t; }
   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';
+    // Naming voices is a page of its own about a meeting; its crumb is the meeting's title, so by title it read the same
+    // as the meeting after it ("Speakers / Pricing review / Pricing review"). It keeps its name.
+    if (p === 'speakers' && a[1] === 'review') return 'Naming voices';
+    if (crumb) return trailCap(crumb);
     if (p === 'meetings') return 'Meeting';
     if (p === 'sessions') return 'Session';
     if (p === 'speakers' && a[1] === 'review') return 'Naming voices';
-    return crumb || TITLES[p] || 'Today';
+    return 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
@@ -807,8 +838,12 @@
     if (typeof paintTrail === 'function') paintTrail(r);
     closeMenu();
     if (changedPane) window.scrollTo(0, 0);
-    $('topbar').classList.remove('tucked');
+    // 7.0.33 A12 (Q1): through barShow, so a bar sliding back after a page change catches its first tap too.
+    barShow($('topbar'));
     onScroll();
+    // 7.0.33 A13: the pet in the top bar stays on every page; its card closes when the page changes.
+    if (typeof petCardClose === 'function') petCardClose();
+    if (typeof petInBar === 'function' && petInBar() && state.sessions) { placePet(); if (changedPane && $('today-pet').classList.contains('hidden')) renderPet(state.sessions); }
 
     if (!PANES[r.pane] && LAZY()[r.pane]) {
       var lazyPane = r.pane, lazyEl = $('pane-' + lazyPane), wasEmpty = lazyEl && !lazyEl.getAttribute('data-lazy-ready');
@@ -861,16 +896,44 @@
   var lastY = 0;
   function onScroll() {
     var y = Math.max(0, window.scrollY || 0);
-    // 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());
+    // On a reader the bar stays (its Back is there). 7.0.33 A12: on the folded Duo too, where the bar now shows a named
+    // Back (app.css); before, the bar tucked there and a tap meant for it landed on the page.
+    var bar = $('topbar'), back = $('topbar-back'), onReader = !!(back && !back.classList.contains('hidden'));
     bar.classList.toggle('scrolled', y > 8);
-    if (y < 60 || y < lastY - 4 || onReader) bar.classList.remove('tucked');
+    if (y < 60 || y < lastY - 4 || onReader) barShow(bar);
     else if (y > lastY + 4 && isPhone()) bar.classList.add('tucked');
     lastY = y;
   }
   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'); }
+  // 7.0.33 A12 (Anand round 2, slide 27): no tap falls through a hidden top bar. Once the bar has slid away its band shows
+  // the page, and a tap meant for the bar (Ask, Back) landed on whatever was there; on Settings that armed, then fired,
+  // "Sign out every browser". Now, while the bar is away or still sliding back, the first tap in its band only brings
+  // the bar back. Every page and size: the class is the test, so wherever the bar tucks, its band catches.
+  var barBackAt = 0, barCatch = null;
+  function barShow(bar) { if (bar.classList.contains('tucked')) { bar.classList.remove('tucked'); barBackAt = Date.now(); } }
+  // Inside the bar's own band only: its height, and its own left and right (Q1: on the folded Duo the rail's top icon
+  // sits beside the bar, and a tap on it while the bar was away was swallowed). The bar only moves up and down, so its
+  // left and right hold while it is away.
+  function barCatches(x, y) {
+    var bar = $('topbar');
+    if (!bar || !(y >= 0) || y >= bar.offsetHeight) return false;
+    var r = bar.getBoundingClientRect ? bar.getBoundingClientRect() : null;
+    if (r && !(x >= r.left && x < r.right)) return false;
+    return bar.classList.contains('tucked') || Date.now() - barBackAt < BAR_SLIDE_MS;
+  }
+  var BAR_SLIDE_MS = 320;   // app.css: the bar's transform takes 220 ms; a little more for the finger
+  document.addEventListener('pointerdown', function (e) {
+    barCatch = null;
+    if (!barCatches(e.clientX, e.clientY)) return;
+    barCatch = { y: e.clientY, until: Date.now() + 1500 };
+    barShow($('topbar')); lastY = Math.max(0, window.scrollY || 0);
+  }, true);
+  document.addEventListener('click', function (e) {
+    var c = barCatch; barCatch = null;
+    if (!c || Date.now() > c.until || Math.abs(e.clientY - c.y) > 24) return;
+    e.preventDefault(); e.stopPropagation();
+  }, true);
 
   // ── auth ────────────────────────────────────────────────
   // 7.0.19: the first paint (index.html #first-paint) ends the moment the sign-in card or the app shows, whichever
@@ -1433,17 +1496,19 @@
   function petPrefs() {
     var p = readStore(PET_KEY);
     var pet = typeof p.pet === 'string' && /^(mac|(shipped|gallery):[a-z0-9][a-z0-9-]{0,80})$/.test(p.pet) ? p.pet : 'mac';
-    return { pet: pet, show: p.show !== false };
+    // 7.0.33 A13 (Anand round 2, slide 9): where it shows. 'today' as before, or 'bar': small in the top bar on a phone.
+    return { pet: pet, show: p.show !== false, place: p.place === 'bar' ? 'bar' : 'today' };
   }
   function setPetPrefs(next) {
     var cur = petPrefs();
-    var merged = { pet: next.pet != null ? next.pet : cur.pet, show: next.show != null ? !!next.show : cur.show };
+    var merged = { pet: next.pet != null ? next.pet : cur.pet, show: next.show != null ? !!next.show : cur.show, place: next.place != null ? (next.place === 'bar' ? 'bar' : 'today') : cur.place };
     writeStore(PET_KEY, merged);
     // Forget the old pet's manifest and loop; Today repaints with the new choice next time it shows.
     PET.manifest = null; PET.fetchedAt = 0; PET.pose = null; PET.token++; petStop();
     var box = $('today-pet');
     if (box) { box.innerHTML = ''; box.classList.add('hidden'); }
-    if (state.pane === 'today' && state.sessions) renderPet(state.sessions);
+    placePet();
+    if ((state.pane === 'today' || petInBar()) && state.sessions) renderPet(state.sessions);
     return merged;
   }
   var PET_HEIGHT = 140;
@@ -1560,13 +1625,72 @@
   // Folded (one column) the pet sits above the story. Unfolded (two columns, the same 760px line as
   // .today-cols in app.css) it moves to the top of the right-hand column, above Needs you (Miles 11/06).
   var PET_WIDE = window.matchMedia ? window.matchMedia('(min-width: 760px)') : null;
+  // 7.0.33 A13 (Anand round 2, slide 9; Miles 12:43, the three choices and Anand's top bar mock): "In the top bar" puts the
+  // same pet, small and round, in a phone's top bar left of Ask, on every page; a tap opens a card under it (the pet, its
+  // line, Change pet and Hide). The folded and the open Duo have the rail instead of that bar: there it stays on Today
+  // until its place there is chosen (render sent to the lead). The default stays On Today.
+  var PET_BAR_MQ = window.matchMedia ? window.matchMedia('(min-width: 600px)') : null;
+  function petInBar() { var p = petPrefs(); return p.show && p.place === 'bar' && !(PET_BAR_MQ && PET_BAR_MQ.matches) && !(typeof sideRail === 'function' && sideRail()); }
   function placePet() {
     var box = $('today-pet'), side = document.querySelector('#pane-today .today-side'), rec = $('today-rec');
     if (!box || !side || !rec) return;
+    var bar = $('topbar'), ask = bar && bar.querySelector('[data-open-ask]');
+    if (petInBar() && ask) { if (ask.previousElementSibling !== box) bar.insertBefore(box, ask); box.classList.add('in-bar'); return; }
+    box.classList.remove('in-bar'); petCardClose();
     if (PET_WIDE && PET_WIDE.matches) { if (side.firstElementChild !== box) side.insertBefore(box, side.firstElementChild); }
     else if (rec.previousElementSibling !== box) rec.parentNode.insertBefore(box, rec);
   }
-  if (PET_WIDE) { if (PET_WIDE.addEventListener) PET_WIDE.addEventListener('change', placePet); else if (PET_WIDE.addListener) PET_WIDE.addListener(placePet); }
+  function petReplace() { placePet(); if (petInBar() && state.sessions) renderPet(state.sessions); }
+  [PET_WIDE, PET_BAR_MQ].forEach(function (mq) { if (mq) { if (mq.addEventListener) mq.addEventListener('change', petReplace); else if (mq.addListener) mq.addListener(petReplace); } });
+  // The card under the small pet, as in Anand's mock: the pet, its line (petCaption, the words Today shows under it), one
+  // more line when nothing runs, then Change pet and Hide. With something to open, the pet and its line open it, as the
+  // pet on Today does (petTap). Hide turns the pet off and says where it comes back.
+  var PET_IDLE_LINE = 'I\u2019ll wave when an agent starts.';
+  function petCardToggle() {
+    var box = $('today-pet'); if (!box) return;
+    if (box.querySelector('.pet-card')) return petCardClose();
+    var cap = box.querySelector('.pet-caption'), txt = cap ? cap.textContent : '', btn = box.querySelector('.pet-btn');
+    var live = btn && btn.getAttribute('aria-disabled') === 'false';
+    box.insertAdjacentHTML('beforeend', '<div class="pet-card" role="dialog" aria-label="Your pet">' +
+      '<button type="button" class="pet-card-head" data-today="pet-open"' + (live ? '' : ' aria-disabled="true"') + '><span class="pet-card-pet" aria-hidden="true"></span>' +
+      '<span class="pet-card-text"><span class="pet-card-title"></span>' + (txt === 'Nothing running' ? '<span class="pet-card-sub">' + esc(PET_IDLE_LINE) + '</span>' : '') + '</span></button>' +
+      '<div class="pet-card-acts"><button type="button" class="cx-btn quiet" data-goto="settings/pet">Change pet</button><button type="button" class="cx-btn quiet" data-action="pet-hide">Hide</button></div></div>');
+    box.querySelector('.pet-card-title').textContent = txt;
+    var art = box.querySelector('.pet-btn .pet-still, .pet-btn .pet-sprite');
+    if (art) box.querySelector('.pet-card-pet').appendChild(art.cloneNode(true));
+    if (btn) btn.setAttribute('aria-expanded', 'true');
+    petCardPlace(box.querySelector('.pet-card'));
+  }
+  // The card hangs under the pet, but never over a banner's own buttons (the sign-in notice's Hide, the question banner's
+  // Answer, lead 12:5x): if it would cover one, it sits just below the lowest such banner instead.
+  function petCardPlace(card) {
+    if (!card || !card.getBoundingClientRect) return;
+    var c = card.getBoundingClientRect(), drop = 0;
+    document.querySelectorAll('#conn-notice:not([hidden]) button, #sq-host:not([hidden]) button, #sq-host:not([hidden]) a, .rec-banner').forEach(function (b) {
+      var r = b.getBoundingClientRect();
+      if (r.width && r.height && r.left < c.right && r.right > c.left && r.top < c.bottom && r.bottom > c.top) {
+        var host = b.closest('#conn-notice, #sq-host'), h = host ? host.getBoundingClientRect() : r;   // the recording banner is its own button
+        drop = Math.max(drop, h.bottom + 8 - c.top);
+      }
+    });
+    if (drop > 0) card.style.top = 'calc(100% + 8px + ' + Math.ceil(drop) + 'px)';
+  }
+  function petHide() {
+    petCardClose(); setPetPrefs({ show: false });
+    toast('Pet hidden. Turn it back on in Settings, Pet.');
+  }
+  if (typeof document !== 'undefined' && document.addEventListener) {
+    document.addEventListener('click', function (e) {
+      var box = $('today-pet');
+      if (box && box.querySelector('.pet-card') && !box.contains(e.target)) petCardClose();
+    }, true);
+    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') petCardClose(); });
+  }
+  function petCardClose() {
+    var box = $('today-pet'), card = box && box.querySelector('.pet-card');
+    if (card) card.remove();
+    var btn = box && box.querySelector('.pet-btn'); if (btn) btn.removeAttribute('aria-expanded');
+  }
   var PET_CHANGE = '<button type="button" class="pet-change" data-goto="settings/pet">Change pet</button>';
   // A still pet (a gallery pick, Cloud Puff, or a single image on the Mac): one picture for every state.
   function renderPetStill(box, m, sessions) {
@@ -1626,9 +1750,11 @@
           if (still || spec.frames < 2) return;
           var step = function () {
             // Runs only while Today is on screen: leaving the pane or hiding the page stops the loop.
-            if (token !== PET.token || document.hidden || state.pane !== 'today') { PET.timer = null; return; }
+            if (token !== PET.token || document.hidden || (state.pane !== 'today' && !petInBar())) { PET.timer = null; return; }
             PET.frame = (PET.frame + 1) % spec.frames;
             petPaint(el, spec, PET.frame, scale);
+            // 7.0.33 A13: the card's copy of the pet moves with it.
+            var cardArt = box.querySelector('.pet-card .pet-sprite'); if (cardArt) petPaint(cardArt, spec, PET.frame, scale);
             PET.timer = setTimeout(step, Math.max(20, spec.interval * 1000));
           };
           PET.timer = setTimeout(step, Math.max(20, spec.interval * 1000));
@@ -1862,7 +1988,10 @@
     var write = typeof storyWrite === 'function' ? storyWrite : function (e, kind, text, when) {
       if (kind === 'brief') e.innerHTML = esc(text) + '<span class="story-when">' + esc(when) + '</span>'; else e.textContent = text;
     };
-    if (TODAY.offline) { askBox(null); write(el, 'offline', 'COS on ' + state.serverName + ' is not answering right now. Today fills in when it does.'); return; }
+    // 7.0.33 A6 (Anand round 2, slide 20): what the sentence says, Needs you and Running do not say again. TODAY.storySaid
+    // is the list of failures this sentence named ('offline' when it says the Mac is not answering); renderNeeds reads it.
+    var said = function (v, brief) { var was = JSON.stringify([TODAY.storySaid, TODAY.storyBrief]); TODAY.storySaid = v; TODAY.storyBrief = !!brief; if (was !== JSON.stringify([v, !!brief]) && typeof renderNeeds === 'function' && $('needs-list')) renderNeeds(m); };
+    if (TODAY.offline) { askBox(null); write(el, 'offline', 'COS on ' + state.serverName + ' is not answering right now. Today fills in when it does.'); said('offline'); return; }
     // The model's summary when there is one (it never blocks: the counts line below shows until it lands). The test
     // harnesses that run this block alone have no requestBrief, so it is looked up, never assumed.
     askBox(null);
@@ -1870,7 +1999,7 @@
       requestBrief(m);
       var brief = briefShown();
       askBox(brief);
-      if (brief) { write(el, 'brief', brief.text, briefWhen(brief, m)); return; }
+      if (brief) { write(el, 'brief', brief.text, briefWhen(brief, m)); said([], true); return; }
     }
     var first = '';
     if (m.sessionsWaiting > 0) first = countWord(m.sessionsWaiting) + ' ' + plural(m.sessionsWaiting, 'session is', 'sessions are') + ' waiting on you';
@@ -1891,7 +2020,11 @@
     else second = 'No agents are running';
     if (TODAY.recording) second += (unread || working > 0 || open > 0 ? ', and ' : '. ') + 'COS is recording a meeting';
     var out = (first ? first + '. ' : '') + second + '.';
-    var others = m.failed.filter(function (n) { return n !== 'sessions'; });
+    // 7.0.33 A6: more than two sources unread is the Mac not answering, said once, here (it was Needs you's row).
+    if (m.failed.length > 2) { said(m.failed.slice()); write(el, 'counts', (first ? first + '. ' : '') + 'Your Mac is not answering, so this may not be everything.'); return; }
+    var others = m.failed.filter(function (n) { return n !== 'sessions'; }), named = unread ? ['sessions'] : [];
+    if (!m.settled && !m.now.length && !m.later.length && (unread ? others : m.failed).length) named = named.concat(unread ? others : m.failed);
+    said(named);
     if (!m.settled && !m.now.length && !m.later.length) out += (unread ? others : m.failed).length ? ' Couldn\u2019t read ' + listWords(unread ? others : m.failed) + ', so this may not be everything.' : unread ? ' This may not be everything that needs you.' : ' Still reading what needs you.';
     else if (unread) out += ' This may not be everything that needs you.';
     write(el, 'counts', out);
@@ -1921,6 +2054,10 @@
     $('run-count').textContent = working.length + jobs.n ? String(working.length + jobs.n) : '';
     var list = $('run-list');
     // Never "Nothing running" about a list that was not read.
+    // 7.0.33 A6: when nothing runs, the sentence ("No agents are running", or that sessions could not be read) is all
+    // Today says about it; the panel shows again the moment a session or a COS job runs.
+    var panel = list.closest ? list.closest('.run-panel') : null;
+    if (panel && panel.classList) panel.classList.toggle('hidden', !jobs.n && (TODAY.sessionsState === 'failed' || (TODAY.sessionsState === 'answered' && !working.length && !open.length)));
     if (TODAY.sessionsState === 'failed') { list.innerHTML = jobs.html + '<button type="button" class="run-more run-failed" data-today-needs="retry">Couldn\u2019t read sessions. Try again</button>'; return; }
     var shown = working.slice(0, 3);
     var html = jobs.html + shown.map(function (s) { return runRow(s, true); }).join('');
@@ -2426,12 +2563,18 @@
     if (m.later.length && !TODAY.showLater) html += '<button type="button" class="need-more" data-today-needs="later">' + esc(m.later.length + (m.later.length === 1 ? ' thing can' : ' things can') + ' wait until tomorrow. Show') + '</button>';
     // 6.99.30 (design QA): no empty line above a failed read (it left a 45 px gap), and one retry row, never one per
     // source: with the Mac not answering (sessions and Work both unread, or more than two sources) it says so once.
-    if (!m.rows.length) html = m.failed.length ? '' : '<p class="card-empty">' + esc(m.settled ? 'Nothing is waiting on you.' : 'Reading sessions, Work, voices and memories.') + '</p>';
-    if (m.failed.length) {
-      var silent = TODAY.offline || m.failed.length > 2;
-      html += '<button type="button" class="need-more need-failed" data-today-needs="retry">' + esc(silent ? 'Your Mac is not answering. Try again.' : 'Couldn’t read ' + listWords(m.failed) + '. Try again') + '</button>';
+    // 7.0.33 A6: a failure the sentence above already names is not said again here (Refresh at the top tries again), and
+    // with nothing to show (nothing waiting, which the sentence says, or only what it said) the card steps aside.
+    var said = TODAY.storySaid || [], left = said === 'offline' ? [] : m.failed.filter(function (n) { return said.indexOf(n) < 0; });
+    // A model summary does not say "Nothing is waiting on you", so under one the card still does.
+    if (!m.rows.length) html = m.failed.length || (m.settled && !TODAY.storyBrief) ? '' : '<p class="card-empty">' + esc(m.settled ? 'Nothing is waiting on you.' : 'Reading sessions, Work, voices and memories.') + '</p>';
+    if (left.length) {
+      var silent = TODAY.offline || left.length > 2;
+      html += '<button type="button" class="need-more need-failed" data-today-needs="retry">' + esc(silent ? 'Your Mac is not answering. Try again.' : 'Couldn’t read ' + listWords(left) + '. Try again') + '</button>';
     }
     list.innerHTML = html;
+    var card = list.closest ? list.closest('.card') : null;
+    if (card && card.classList) card.classList.toggle('hidden', !html);
   }
   // Weather sits under the date at the top left (Miles, 11/07), where the eye starts, not inside Next up.
   // It shows whether or not a meeting is next.
@@ -2764,7 +2907,7 @@
     view: sxPref('view', 'sessions', ['sessions', 'usage', 'cost']),
     recency: sxPref('recency', 'newest', ['newest', 'oldest', 'match']),
     q: '', instant: [], remote: [], searching: false, searchError: '', ranFor: '', semantic: null, semanticReason: '', searchSeq: 0, searchTimer: null,
-    hooks: null, hooksAt: 0,
+    hooks: null, hooksAt: 0, hooksOffer: false, offerPutAway: false,
     usage: null, usageAt: 0, usageLoading: false, usageError: '',
     uPeriod: 'Last 30 days', uTool: 'All tools', uModel: 'All models',
     // Usage on a wide screen (uWideModel): the custom range, the chart sentence, the chosen bar, the table's order.
@@ -2902,7 +3045,8 @@
     var stats = view === 'sessions' ? sxStats(vis) : [];
     var busy = view === 'sessions' ? SX.loading : SX.usageLoading;
     hero.innerHTML = '<span class="cx-glyph"><svg class="icon"><use href="#i-sessions"/></svg></span>' +
-      '<div class="cx-hero-text"><h1 class="cx-title">Sessions</h1><p class="cx-detail-line">' + esc(detail) + liveHeroNote(view) + '</p></div>' +
+      // 7.0.33 A5: the heading names the view the top bar names (Usage, COS cost), not the place, so the page has one name.
+      '<div class="cx-hero-text"><h1 class="cx-title">' + esc(SX_VIEWS[view] || 'Sessions') + '</h1><p class="cx-detail-line">' + esc(detail) + liveHeroNote(view) + '</p></div>' +
       '<div class="cx-actions"><button type="button" class="cx-btn quiet" data-sx="refresh"' + (busy ? ' disabled' : '') + '><svg class="icon"><use href="#i-refresh"/></svg>Refresh</button></div>' +
       (stats.length ? '<div class="cx-stats">' + stats.map(function (s) { return '<span class="cx-stat"><b>' + esc(typeof s[0] === 'number' ? s[0].toLocaleString() : s[0]) + '</b><span>' + s[1] + '</span></span>'; }).join('') + '</div>' : '');
     // 7.0.23 step 2b: Updated and Opened are the sort menu now, and Pinned a group; no clock switches here.
@@ -3876,17 +4020,40 @@
     if (Date.now() - SX.hooksAt < 60000) { paintHooks(); return; }
     SX.hooksAt = Date.now();
     api('/api/session-hooks/status').then(function (d) {
-      SX.hooks = (d && d.sessionHooks && d.sessionHooks.state) || null; paintHooks();
-    }, function (err) { SX.hooks = err && err.status === 404 ? 'route_absent' : null; paintHooks(); });
+      SX.hooks = (d && d.sessionHooks && d.sessionHooks.state) || null;
+      // 7.0.34 (X1): the 8 hour question wait is on by default and offered until this Mac reinstalls its hooks.
+      SX.hooksOffer = !!(d && d.sessionHooks && d.sessionHooks.questionWait && d.sessionHooks.questionWait.offered === true);
+      paintHooks();
+    }, function (err) { SX.hooks = err && err.status === 404 ? 'route_absent' : null; SX.hooksOffer = false; paintHooks(); });
+  }
+  // 7.0.34 (X1): "Not now" puts the 8 hour offer away in THIS browser only. A store that cannot be read or written
+  // just means the line shows again; a hooks-problem line is never hidden by it.
+  var SX_OFFER_HIDE_KEY = 'cos.sx.questionWaitOfferHidden';
+  function offerHidden() {
+    try { return typeof localStorage === 'object' && !!localStorage && localStorage.getItem(SX_OFFER_HIDE_KEY) === '1'; } catch (_e) { return false; }
+  }
+  function hideOffer() {
+    try { if (typeof localStorage === 'object' && localStorage) localStorage.setItem(SX_OFFER_HIDE_KEY, '1'); } catch (_e) { /* not kept: it shows next visit */ }
   }
   function paintHooks() {
     var el = $('sessions-hooks'); if (!el) return;
     var st = SX.hooks;
-    if (['missing', 'drift', 'script_outdated', 'route_absent'].indexOf(st) < 0) { el.innerHTML = ''; return; }
-    var text = st === 'route_absent' ? 'Live session state needs COS server 6.48.0 or later.'
-      : st === 'missing' ? 'Claude Code hooks are not installed: sessions read from their transcripts only.'
-      : 'Claude Code hooks need a refresh (' + (st === 'drift' ? 'settings changed' : 'script outdated') + ').';
-    var where = st === 'route_absent' ? 'Update Server from COS Control on your Mac.' : (st === 'missing' ? 'Install hooks' : 'Reinstall hooks') + ' from COS Control on your Mac.';
+    if (['missing', 'drift', 'script_outdated', 'route_absent'].indexOf(st) < 0) {
+      // 7.0.34 (X1): read-only, no dot. A hooks problem above already says Reinstall hooks, so this shows only
+      // when there is none (A8: each thing once). Installing hooks stays a Mac action.
+      var offer = st === 'installed' && SX.hooksOffer && !SX.offerPutAway && !offerHidden();
+      el.innerHTML = offer
+        ? '<div class="sx-hooks"><span>' + esc('Questions can now wait up to 8 hours.') + ' <span class="sx-hooks-where">' + esc('In COS Control on your Mac, choose Reinstall hooks.') + '</span> <button type="button" class="sx-link" data-sx-offer="hide">' + esc('Not now') + '</button></span></div>'
+        : '';
+      var notNow = offer && el.querySelector ? el.querySelector('[data-sx-offer="hide"]') : null;
+      if (notNow) notNow.onclick = function () { SX.offerPutAway = true; hideOffer(); paintHooks(); };
+      return;
+    }
+    // 7.0.33 A8: plain words, then what to do.
+    var text = st === 'route_absent' ? 'Whether a session is working or waiting needs a newer COS on your Mac.'
+      : st === 'missing' ? 'COS cannot yet tell when a Claude Code session is working or waiting on you.'
+      : 'COS\u2019s link to Claude Code needs a refresh, so working and waiting may be out of date.';
+    var where = st === 'route_absent' ? 'Update it from COS Control on your Mac.' : 'In COS Control on your Mac, choose ' + (st === 'missing' ? 'Install hooks' : 'Reinstall hooks') + '.';
     el.innerHTML = '<div class="sx-hooks"><span class="sx-hooks-dot" aria-hidden="true"></span><span>' + esc(text) + ' <span class="sx-hooks-where">' + esc(where) + '</span></span></div>';
   }
 
@@ -7635,13 +7802,18 @@
         (recent.length ? '<h2 class="group-title">Recent sessions</h2><div class="list">' + recent.map(function (s) { return sessionRow(s); }).join('') + '</div>' : '');
       return;
     }
-    var jumps = JUMPS.filter(function (j) { return j[1].toLowerCase().indexOf(q.toLowerCase()) === 0; });
-    out.innerHTML = '<div class="list" style="margin-top:14px">' +
+    // 7.0.33 A7 (Anand round 2, slide 20): typing "usage" put Go to Usage last, under four Ask rows. When the words name a
+    // place (its whole name, or its first three letters or more, "go to" allowed in front), Go to comes first.
+    var ql = q.toLowerCase().replace(/^go to\s+/, '');
+    var jumps = JUMPS.filter(function (j) { return j[1].toLowerCase().indexOf(ql) === 0; });
+    var placeFirst = jumps.length > 0 && (ql.length >= 3 || jumps.some(function (j) { return j[1].toLowerCase() === ql; }));
+    var jumpRows = jumps.map(function (j) { return '<button type="button" class="nav-row" data-goto="' + j[0] + '"><svg class="icon"><use href="#i-' + j[0] + '"/></svg><span class="grow">Go to ' + esc(j[1]) + '</span><span class="chev"></span></button>'; }).join('');
+    out.innerHTML = '<div class="list" style="margin-top:14px">' + (placeFirst ? jumpRows : '') +
       '<button type="button" class="nav-row" data-action="ask-cos"><svg class="icon"><use href="#i-ask"/></svg><span class="grow">Ask COS<span class="note">' + esc(askRowNote(q)) + '</span></span></button>' +
       '<button type="button" class="nav-row" data-action="ask-file"' + (ASK_FILE.busy ? ' disabled' : '') + '><svg class="icon"><use href="#i-work"/></svg><span class="grow">' + (ASK_FILE.busy ? 'Filing\u2026' : 'File to Work inbox') + fileNoteHtml(q) + '</span></button>' +
       '<button type="button" class="nav-row" data-action="ask-meaning"><svg class="icon"><use href="#i-sessions"/></svg><span class="grow">Find a session about this<span class="note">Ranks every session by meaning</span></span></button>' +
       '<button type="button" class="nav-row" data-action="ask-work"><svg class="icon"><use href="#i-work"/></svg><span class="grow">Find a task about this<span class="note">Searches Work by meaning</span></span></button>' +
-      jumps.map(function (j) { return '<button type="button" class="nav-row" data-goto="' + j[0] + '"><svg class="icon"><use href="#i-' + j[0] + '"/></svg><span class="grow">Go to ' + esc(j[1]) + '</span><span class="chev"></span></button>'; }).join('') +
+      (placeFirst ? '' : jumpRows) +
       '</div><div id="ask-hits"></div><p class="status-line" id="ask-status"></p>';
     paintAskRow();
     clearTimeout(renderAsk.t);
@@ -7691,7 +7863,12 @@
       return;
     }
     if (t.hasAttribute('data-open-ask')) return openAsk();
-    if (t.hasAttribute('data-today')) return t.getAttribute('data-today') === 'pet' ? petTap(t) : openTodayAction(t);
+    if (t.hasAttribute('data-today')) {
+      var dt = t.getAttribute('data-today');
+      if (dt === 'pet-open') { if (t.getAttribute('aria-disabled') !== 'true') { petCardClose(); petTap($('today-pet').querySelector('.pet-btn')); } return; }
+      return dt === 'pet' ? (petInBar() ? petCardToggle() : petTap(t)) : openTodayAction(t);
+    }
+    if (t.getAttribute('data-action') === 'pet-hide') return petHide();
     if (t.hasAttribute('data-today-next')) return prepNext();
     if (t.hasAttribute('data-next-prep')) return toggleNextPrep(t.getAttribute('data-next-prep'));
     if (t.hasAttribute('data-next-prep-cancel')) return closeNextPrep(true);
@@ -7705,6 +7882,8 @@
     }
     if (t.hasAttribute('data-theme-choice')) { window.CosTheme.set(t.getAttribute('data-theme-choice')); paintAppearance(); return; }
     if (t.hasAttribute('data-goto') || t.hasAttribute('data-pane')) {
+      // 7.0.33 A11: a pick from the menu (the rail, the pane menu, Ask's Go to) starts a new trail (navStamp).
+      if (t.closest('.rail, #section-menu, #ask-results')) NAV.fresh = Date.now();
       if (inSheet) closeAsk(); closeMenu();
       // "work/sort" is a pane and its arguments, not one name.
       var dest = String(t.getAttribute('data-goto') || t.getAttribute('data-pane')).split('/');
@@ -7723,7 +7902,7 @@
     if (action === 'drop-after') return dropHeld();
     if (action === 'unqueue') return removeQueued(t.getAttribute('data-turn-key'));
     if (action === 'revoke-all') {
-      if (t.getAttribute('data-armed') !== '1') { t.setAttribute('data-armed', '1'); t.querySelector('.grow').firstChild.textContent = 'Tap again to sign out every browser'; return; }
+      if (!window.COSWeb.armTap(t, t.querySelector('.grow').firstChild, 'Tap again to sign out every browser')) return;
       api('/api/web-session/revoke-all', { method: 'POST', body: {} }).then(function () { showAuth('Every browser is signed out, this one too.'); }).catch(function (err) { setStatus($('settings-status'), err.message, true); });
       return;
     }
@@ -8090,6 +8269,9 @@
     // once a detail has loaded; route() clears it on every navigation.
     setCrumb: function (text) { crumbDetail = String(text || ''); navLabel(crumbDetail); paintTrail(); runHooks(routeHooks, parseRoute()); },
     crumb: function () { return crumbDetail; },
+    // 7.0.33 A11: the trail for the navigation bar from 600 px (shell.js paintNavbar): the same steps and names as the
+    // phone's row, and this page's name.
+    trailNow: function (r) { r = r || parseRoute(); var steps = r.args.length && !isTabRoute(r.args) ? navTrail() : null; return { steps: steps || [], here: steps || r.args.length ? trailName(location.hash, crumbDetail) : (crumbDetail || TITLES[r.pane] || 'Today') }; },
     // Panes that read with their own fetch call this on a 401 so the sign-in screen shows.
     showAuth: function (message) { showAuth(message); },
     // Control's session state (the Sessions pane's sxState) and warm-up test, so the rail's
@@ -8124,12 +8306,29 @@
   // Today as a place to act (panes/today-actions.js, Miles 11/06): what the Today cards show, a repaint after a
   // decision, and the Sessions reader's own pieces, so the overlay sends and reads through the reader's code.
   window.COSWeb.pane = function (name) { return PANES[name] || null; };
+  window.COSWeb.plainMessage = plainMessage; window.COSWeb.notSetUp = notSetUp;
   // Tap, then tap again (Today's Dismiss, Stop and Send anyway; a question card's Allow, Deny and Send): the second tap
   // counts only once the first has been on screen ARM_CONFIRM_MS, so a double tap or a finger bounce arms and never
   // confirms (W2-r2). The one rule both panes/today-actions.js and panes/questions.js read.
   var ARM_CONFIRM_MS = 400;
   window.COSWeb.armConfirmMs = ARM_CONFIRM_MS;
   window.COSWeb.confirmReady = function (armedAt) { return typeof armedAt === 'number' && Date.now() - armedAt >= ARM_CONFIRM_MS; };
+  // 7.0.33 A12: the same rule for a button armed in place (Sign out every browser, Settings' Release), which until now
+  // stayed armed with no time limit, so a stray tap minutes later confirmed it. armTap(button, label, armedText) returns
+  // true on a confirming tap; otherwise it arms (label says armedText) for ARM_EXPIRE_MS and puts the words back after.
+  var ARM_EXPIRE_MS = 5000;
+  window.COSWeb.armExpireMs = ARM_EXPIRE_MS;
+  window.COSWeb.armTap = function (el, label, armedText) {
+    var now = Date.now(), at = Number(el.getAttribute('data-armed-at')) || 0;
+    if (el.getAttribute('data-armed') === '1' && now - at < ARM_EXPIRE_MS) return now - at >= ARM_CONFIRM_MS;
+    if (el.getAttribute('data-armed') !== '1') el.setAttribute('data-idle-text', label.textContent);
+    el.setAttribute('data-armed', '1'); el.setAttribute('data-armed-at', String(now)); label.textContent = armedText;
+    setTimeout(function () {
+      if (el.getAttribute('data-armed-at') !== String(now)) return;
+      el.removeAttribute('data-armed'); el.removeAttribute('data-armed-at'); label.textContent = el.getAttribute('data-idle-text') || label.textContent;
+    }, ARM_EXPIRE_MS);
+    return false;
+  };
   window.COSWeb.today = {
     data: function () {
       return { needs: TODAY.needs, working: TODAY.working, open: TODAY.open, welcome: TODAY.welcome, offline: TODAY.offline, at: TODAY.at,

package/server/web-control/control.css

@@ -104,7 +104,9 @@
   .nav-btn:disabled { opacity: 0.4; }
   .crumbs { display: flex; align-items: center; min-width: 0; list-style: none; margin: 0 0 0 6px; padding: 0; font: 400 12.5px/1.2 var(--body); color: var(--sub); }
   .crumb { white-space: nowrap; }
-  .crumb + .crumb::before { content: '›'; margin: 0 6px; color: var(--tertiary); }
+  /* 7.0.33 A11: the phone trail's look: '/' between steps, a step you can go back to in the accent colour. */
+  .crumb + .crumb::before { content: '/'; content: '/' / ''; margin: 0 6px; color: var(--tertiary); }
+  .crumb a { color: var(--accent); }
   .crumb.root { font-weight: 600; color: var(--ink); }
   .crumb.current { font-weight: 600; color: var(--ink); }
   .crumb.dim { color: var(--sub); }
@@ -246,6 +248,8 @@
 .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; }
+/* 7.0.33 A2: COS's answer time, under its text on the left, as "You" sits under the question on the right. */
+.cx-said-when { display: block; margin: 6px 0 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; }

package/server/web-control/index.html

@@ -115,7 +115,7 @@
       <form id="auth-form">
         <div id="auth-code-block">
           <label for="auth-code">Sign-in code</label>
-          <input id="auth-code" class="field code-field" type="text" inputmode="text" autocomplete="one-time-code" autocapitalize="characters" spellcheck="false" maxlength="9" placeholder="K7P3-QX9M">
+          <input id="auth-code" class="field code-field" type="text" inputmode="text" autocomplete="one-time-code" autocapitalize="characters" spellcheck="false" maxlength="17" placeholder="K7P3-QX9M">
           <p class="auth-foot" style="margin-top:8px">Scan the QR with your phone's camera. A browser that is already signed in shows one under Settings, Use COS on another phone or browser. COS Control on your Mac shows one under Open COS on your phone. Or type the code shown with the QR.</p>
           <p class="auth-foot">The glasses pairing code does not work here.</p>
         </div>
@@ -155,12 +155,12 @@
 
     <div class="main-col">
       <!-- Control's navigation bar (ActivityWindow navigationBar): shown off Today, from 600px. -->
-      <nav class="navbar hidden" id="navbar" aria-label="Where you are">
-        <button type="button" class="nav-btn" id="nav-home" title="Activity home"><svg class="icon"><use href="#i-today"/></svg><span>Home</span></button>
+      <!-- 7.0.33 A10 and A11 (Anand round 2, slides 5 and 28): Back and the way you came, as on the phone. Home and
+           Settings left this bar: the rail has Today and Settings. -->
+      <nav class="navbar hidden" id="navbar" aria-label="How you got here">
         <button type="button" class="nav-btn" id="nav-back" title="Go back one step"><svg class="icon"><use href="#i-back"/></svg><span>Back</span></button>
         <ol class="crumbs" id="crumbs"></ol>
         <span class="grow"></span>
-        <button type="button" class="nav-btn" id="nav-settings" aria-label="Open Activity settings"><svg class="icon"><use href="#i-settings"/></svg><span>Settings</span></button>
       </nav>
       <header class="topbar" id="topbar">
         <div class="topbar-left">
@@ -245,11 +245,13 @@
         <!-- SESSIONS -->
         <section id="pane-sessions" class="pane wide hidden" data-title="Sessions">
           <div class="cx sx" data-tint="sessions">
+            <!-- 7.0.33 A5 (Anand round 2, slide 17): the view switch comes first, so Sessions, Usage and COS cost sit in one place
+                 on all three, right under the top bar; Usage's and COS cost's header follows it. -->
+            <div class="cx-controls sx-views" id="sessions-views"></div>
             <header class="cx-hero sx-hero" id="sessions-hero" data-tint="sessions">
               <span class="cx-glyph"><svg class="icon"><use href="#i-sessions"/></svg></span>
               <div class="cx-hero-text"><h1 class="cx-title">Sessions</h1><p class="cx-detail-line">Claude · Codex · Cursor · reading the last 7 days…</p></div>
             </header>
-            <div class="cx-controls sx-views" id="sessions-views"></div>
             <div class="split sx-split" id="sessions-split">
               <div class="split-list" id="sessions-list-col">
                 <!-- 7.0.23 step 2b: the list's own head (DESIGN_PLAN v2 "The list"): the Sessions menu, Search, one quiet line and the sort menu. -->