@gotcos/glasses-server 7.0.30 → 7.0.34

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. -->

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

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

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

@@ -123,7 +123,8 @@
     return W.api('/api/web-bridge/memories', { method: 'POST', body: { id: ++seq, op: op, args: a }, timeoutMs: limit }).then(function (r) {
       if (r && r.ok) return r.details || {};
       var raw = (r && r.message) || 'Your Mac did not answer that.';
-      var err = new Error(PLAIN[raw] || raw); err.code = raw; throw err;
+      // 7.0.33 A8: a code this pane has no words for goes through the page's plain words, never on screen as is.
+      var err = new Error(PLAIN[raw] || (W.plainMessage ? W.plainMessage(raw) : raw)); err.code = raw; throw err;
     });
   }
   // A request that never reached COS is said in plain words by W.api itself (app.js, 6.99.30: code 'unreachable'),
@@ -217,7 +218,7 @@
       seedDecisions(r.rows); prefetchLessons(r.rows);
     }, function (e) {
       if (serial !== serials.recent) return;
-      if (more) W.toast(e.message); else { L.error = e.message; L.loaded = true; }
+      if (more) W.toast(e.message); else { L.error = e.message; L.errorCode = e.code || ''; L.loaded = true; }
     }).then(function () { if (serial === serials.recent) L.loading = false; paint(); });
   }
   function loadReview(more) {
@@ -239,7 +240,7 @@
       seedDecisions(r.rows);
     }, function (e) {
       if (serial !== serials.review) return;
-      if (more) W.toast(e.message + ' Refresh To review to start again.'); else { L.error = e.message; L.loaded = true; }
+      if (more) W.toast(e.message + ' Refresh To review to start again.'); else { L.error = e.message; L.errorCode = e.code || ''; L.loaded = true; }
     }).then(function () { if (serial === serials.review) L.loading = false; paint(); });
   }
   var memTimer = null;
@@ -267,7 +268,7 @@
       L.loaded = true; L.error = '';
     }, function (e) {
       if (serial !== serials.mem) return;
-      if (more) W.toast(e.message); else { L.error = e.message; L.loaded = true; }
+      if (more) W.toast(e.message); else { L.error = e.message; L.errorCode = e.code || ''; L.loaded = true; }
     }).then(function () { if (serial === serials.mem) L.loading = false; paint(); });
   }
   function memQuery(q) {
@@ -777,7 +778,8 @@
     if (n) parts.push('<span><b>' + fmt(n) + '</b> ' + plural(n, 'change', 'changes') + ' to review</span>');
     if (S.recent.total != null) parts.push('<span><b>' + fmt(S.recent.total) + '</b> ' + plural(S.recent.total, 'event', 'events') + ' in 90 days</span>');
     else if (S.recent.loading) parts.push('<span>Counting events…</span>');
-    else if (S.recent.error) parts.push('<span class="mm-warn">Events in 90 days could not be counted</span>');
+    // 7.0.33 A8: said once. When the Recent learning list below already says it failed, this line does not say it again.
+    else if (S.recent.error && S.recent.rows.length) parts.push('<span class="mm-warn">Events in 90 days could not be counted</span>');
     if (S.recent.loaded) parts.push('<span><b>' + fmt(checked) + '</b> ' + plural(checked, 'result', 'results') + ' checked on this page</span>');
     parts.push('<span>Capture status in ' + textBtn('settings', 'Memory settings') + '</span>');
     parts.push('<span>' + textBtn('log', 'View activity log') + '<span class="mm-phone-only"><span class="mm-dot" aria-hidden="true"> · </span>' + textBtn('refresh', 'Refresh') + '</span></span>');
@@ -816,6 +818,12 @@
   }
   function appliedExcerpt(e) { return ((e.source_refs || [])[0] || {}).excerpt || (e.detail && e.detail.excerpts && e.detail.excerpts[0]) || ''; }
   function groupHead(text, side) { return '<h2 class="group-title mm-group"><span>' + text + '</span>' + (side ? '<span>' + side + '</span>' : '') + '</h2>'; }
+  // 7.0.33 A8: a list that failed because its part of COS is not set up on this Mac says that, once, with no Try again
+  // (trying again cannot help); any other failure keeps its own title and Try again.
+  function failBox(L, title, retry) {
+    if (W.notSetUp && W.notSetUp(L.errorCode)) return stateBox('Not set up on this Mac.', L.error, null);
+    return stateBox(title, L.error, retry);
+  }
   function stateBox(title, body, retry) {
     return '<div class="cx-list"><div class="mm-state"><strong>' + esc(title) + '</strong>' + (body ? '<span>' + esc(body) + '</span>' : '') +
       (retry ? '<span class="mm-state-act">' + btn(retry, 'Try again') + '</span>' : '') + '</div></div>';
@@ -841,7 +849,7 @@
   function recentListHtml() {
     var L = S.recent, sel = selectedId();
     if (!L.loaded && L.loading) return groupHead('Recent learning', '90 days') + loadingBox('Reading what COS learned in the last 90 days');
-    if (L.error && !L.rows.length) return groupHead('Recent learning', '90 days') + stateBox('Recent learning did not load.', L.error, 'refresh');
+    if (L.error && !L.rows.length) return groupHead('Recent learning', '90 days') + failBox(L, 'Recent learning did not load.', 'refresh');
     if (!L.rows.length) return groupHead('Recent learning', '90 days') + stateBox('Nothing learned in the last 90 days.', 'Lessons, corrections and recalls show here as COS records them.');
     return groupHead('Recent learning', L.total != null ? fmt(L.total) + ' in 90 days' : '90 days') +
       '<div class="cx-list">' + L.rows.map(function (e) { return rowHtml(e, e.event_id === sel); }).join('') + '</div>' +
@@ -859,7 +867,7 @@
       '<p class="mm-group-note">Suggested rules still gathering evidence. They cannot become a rule until their confidence reaches the bar, and move to Needs you now on their own when it does.</p>' +
       '<div class="cx-list">' + learning.map(function (e) { return rowHtml(e, e.event_id === sel); }).join('') + '</div>' : '';
     if (!L.loaded && L.loading) return out + groupHead('Proposed changes') + loadingBox('Reading the changes waiting for you') + learnHtml;
-    if (L.error && !L.rows.length) return out + groupHead('Proposed changes') + stateBox('The review list did not load.', L.error, 'refresh') + learnHtml;
+    if (L.error && !L.rows.length) return out + groupHead('Proposed changes') + failBox(L, 'The review list did not load.', 'refresh') + learnHtml;
     if (!needs.length && !rest.length) return groupHead('To review') + stateBox('You are up to date.', 'Nothing is waiting for your decision.') + learnHtml;
     if (other.length) out += groupHead('Proposed changes', fmt(other.length) + ' open') + '<div class="cx-list">' + other.map(function (e) { return rowHtml(e, e.event_id === sel); }).join('') + '</div>';
     if (ready.length) {
@@ -881,7 +889,7 @@
     var L = S.mem, q = L.q.trim(), rows = L.hits != null ? L.hits : L.rows, sel = selectedId();
     var head = groupHead(q ? 'Memories matching “' + esc(q) + '”' : 'Saved memories', !q && L.total != null ? fmt(L.total) + ' stored' : '');
     if (!L.loaded && L.loading) return head + loadingBox(q ? 'Searching your memories' : 'Reading your saved memories');
-    if (L.error && !rows.length) return head + stateBox(q ? 'That search did not finish.' : 'Your memories did not load.', L.error, 'mem-retry');
+    if (L.error && !rows.length) return head + failBox(L, q ? 'That search did not finish.' : 'Your memories did not load.', 'mem-retry');
     if (!rows.length) return head + stateBox(q ? 'No memories match that search.' : 'No memories yet.', q ? 'Try fewer or different words.' : 'COS saves memories as you work. Plain notes in the memory folder show here too.');
     var cursor = q ? L.hitCursor : L.cursor;
     return head + '<div class="cx-list">' + rows.map(function (m) { return memRowHtml(m, m.id === sel); }).join('') + '</div>' +
@@ -1864,7 +1872,8 @@
   function stopWatches() { clearInterval(watch.ingest); watch.ingest = null; clearInterval(watch.fetch); watch.fetch = null; clearInterval(watch.build); watch.build = null; clearInterval(askTimer); }
 
   // ── decisions (writes, each from a tap) ──────────────────
-  function arm(key) { S.armed = key; paint(); setTimeout(function () { if (S.armed === key) { S.armed = ''; paint(); } }, 6000); }
+  // 7.0.33 (Q1): the one expiry every armed button uses (app.js ARM_EXPIRE_MS, 5 s; this was 6 s).
+  function arm(key) { S.armed = key; paint(); setTimeout(function () { if (S.armed === key) { S.armed = ''; paint(); } }, W.armExpireMs || 5000); }
   function afterWrite() { loadStatus(); }
   function reviewMemory(id, decision) {
     if (S.reviewBusy) return;

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

@@ -468,15 +468,27 @@
     }).join('') + '</div>';
   }
   function turnCards(t, msgKey) {
-    var a = atts(t);
+    // 7.0.33 A2 (Anand round 2, slide 10): a small time under each message, when he asked and when COS answered. The clock
+    // alone when it is the answer's day (the header has the date); the date too when the question was on an earlier one.
+    // A server before 7.0.33 sends no question time: then only the answer has one.
+    function saidTimes(t) {
+      var asked = t.queryTimestamp != null ? toDate(t.queryTimestamp) : null, answered = t.timestamp != null ? toDate(t.timestamp) : null;
+      var tag = function (d, text) { return '<time datetime="' + esc(d.toISOString()) + '">' + esc(text) + '</time>'; };
+      return {
+        asked: asked ? tag(asked, answered && sameDay(asked, answered) ? shortTime(asked) : timeLabel(asked)) : '',
+        answered: answered ? tag(answered, shortTime(answered)) : ''
+      };
+    }
+    var a = atts(t), when = saidTimes(t);
     // 7.0.30, Miles's pick A: who said what by side, in the COS chat's own shapes. His words on the right in the chat's
     // gold bubble with "You" under it; COS on the left beside its mark, on the page. A screen reader hears "You said"
     // and "COS said" first, since the side and the mark are visual only.
     return '<div class="cx-said you"><span class="sr-only">You said</span><div class="cx-said-bubble cx-card-body" data-hl>' + esc(String(t.query || '').trim() || '(empty query)').replace(/\n/g, '<br>') + '</div>' +
-      '<span class="cx-said-who" aria-hidden="true">You</span></div>' +
+      (when.asked ? '<span class="cx-said-who"><span aria-hidden="true">You · </span>' + when.asked + '</span>' : '<span class="cx-said-who" aria-hidden="true">You</span>') + '</div>' +
       stripHtml(a.filter(isUserAtt), true, msgKey) +
       '<div class="cx-said cos"><span class="cc-avatar" aria-hidden="true"><svg class="icon"><use href="#i-mark"/></svg></span><div class="cx-said-text"><span class="sr-only">COS said</span>' +
-      '<div class="cx-card-body md" data-hl>' + W.md(W.structureLensAnswer(String(t.text || ''))) + '</div></div></div>' +
+      '<div class="cx-card-body md" data-hl>' + W.md(W.structureLensAnswer(String(t.text || ''))) + '</div>' +
+      (when.answered ? '<span class="cx-said-who cx-said-when">' + when.answered + '</span>' : '') + '</div></div>' +
       stripHtml(a.filter(function (x) { return !isUserAtt(x); }), false, msgKey);
   }
   function copyTurnText(t) {

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

@@ -109,7 +109,12 @@
     var left = Math.ceil((deadline - Date.now()) / 1000);
     return Math.max(0, Math.min(span, isFinite(left) ? left : 0));
   }
-  function timeLeft(s) { return s > 99 ? Math.ceil(s / 60) + ' min left' : s + ' s left'; }
+  // 7.0.32 (X1 ask 1): a question can wait 8 hours, so from one hour the time left reads hours and minutes ("7 h 59 m
+  // left", never "480 min left"). From an hour on it is rounded down; under an hour it keeps 7.0.31's minutes (rounded up).
+  function timeLeft(s) {
+    if (s >= 3600) { var h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60); return h + ' h' + (m ? ' ' + m + ' m' : '') + ' left'; }
+    return s > 99 ? Math.ceil(s / 60) + ' min left' : s + ' s left';
+  }
   function engine(item) { return item.provider === 'codex' ? 'Codex' : 'Claude'; }
 
   // ── the capability, then the poll ─────────────────────

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

@@ -24,7 +24,7 @@
     // 6.99.11 (Drop it P2): shown only when the server has the P2 settings and Drop it is on.
     { id: 'reach', title: 'COS reaching out', summary: 'What COS tells you about on its own, when it may interrupt, and your reminders.', mac: [], p2: true },
     { id: 'privacy', title: 'Privacy and permissions', summary: 'What COS can use on this Mac. Each permission turns on one feature.', mac: ['Permissions'] },
-    { id: 'pet', title: 'Pet', summary: 'Which pet this browser shows on Today, and whether it shows. Size, motion and the Mac\u2019s own pet are set in COS Control.', mac: ['Session pet size and motion', 'Characters on the Mac'] },
+    { id: 'pet', title: 'Pet', summary: 'Which pet this browser shows, and where: on Today, in the top bar on a phone, or off. Size, motion and the Mac\u2019s own pet are set in COS Control.', mac: ['Session pet size and motion', 'Characters on the Mac'] },
     { id: 'system', title: 'System and updates', summary: 'The COS server on this Mac, app updates, and checks when something is off.', mac: ['App updates', 'Troubleshooting'] }
   ];
   var DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
@@ -50,8 +50,17 @@
   }
   function petBody() {
     var prefs = W.petPrefs ? W.petPrefs() : { pet: 'mac', show: true };
-    var out = group('On this browser', '',
-      row('Show the pet on Today', 'Only here. The pet on your Mac stays as it is.', toggle(prefs.show, 'data-set="pet-show"', 'Show the pet on Today')));
+    // 7.0.33 A13 (Anand round 2, slide 9): where the pet shows, one of three, in the choice rows Character uses.
+    var where = !prefs.show ? 'off' : prefs.place === 'bar' ? 'bar' : 'today';
+    var placeRow = function (v, name, desc) {
+      return '<button type="button" class="cx-set-row cx-set-choice" data-set="pet-place" data-place="' + v + '" aria-pressed="' + (where === v) + '">' +
+        '<span class="cx-set-text"><span class="cx-set-name">' + esc(name) + '</span><span class="cx-set-desc">' + esc(desc) + '</span></span>' +
+        '<span class="value">' + (where === v ? '<span class="check">✓</span>' : '') + '</span></button>';
+    };
+    var out = group('On this browser', 'Where the pet shows here. The pet on your Mac stays as it is.',
+      placeRow('today', 'On Today', 'As it has been: on Today, with what it is doing under it.') +
+      placeRow('bar', 'In the top bar', 'On a phone: small, beside Ask, on every page. Tap it to see what it is doing. The Duo shows it on Today.') +
+      placeRow('off', 'Off', 'No pet in this browser.'));
     if (PET.state === 'idle') loadPetCatalog();
     if (PET.state !== 'ready') {
       return out + group('Character', '', PET.state === 'error'
@@ -371,12 +380,11 @@
     }
     var t = e.target.closest('[data-set]');
     if (!t || t.disabled) return;
-    if (t.getAttribute('data-set') === 'pet-show') {
-      var shown = t.getAttribute('aria-checked') === 'true';
-      t.setAttribute('aria-checked', String(!shown));
-      if (W.setPetPrefs) W.setPetPrefs({ show: !shown });
-      W.toast(!shown ? 'Pet on' : 'Pet off');
-      return;
+    if (t.getAttribute('data-set') === 'pet-place') {
+      var v = t.getAttribute('data-place');
+      if (W.setPetPrefs) W.setPetPrefs(v === 'off' ? { show: false } : { show: true, place: v });
+      W.toast(v === 'off' ? 'Pet off' : v === 'bar' ? 'Pet in the top bar' : 'Pet on Today');
+      return render();
     }
     if (t.getAttribute('data-set') === 'pet-retry') { PET.state = 'idle'; return render(); }
     var act = t.getAttribute('data-set');
@@ -439,7 +447,7 @@
       return;
     }
     if (act === 'release') {
-      if (t.getAttribute('data-armed') !== '1') { t.setAttribute('data-armed', '1'); t.textContent = 'Tap again to release'; return; }
+      if (!W.armTap(t, t, 'Tap again to release')) return;
       // The server fails closed without confirm; the second tap is the confirmation.
       api('/api/agent-sessions/fences/release', { method: 'POST', body: { target: t.getAttribute('data-target'), confirm: true } })
         .then(function () { W.toast('Released'); S.data = null; S.state = 'idle'; load(true); }, function (err) { say(err.message, true); });

package/server/web-control/shell.js

@@ -252,16 +252,13 @@
     bar.classList.toggle('hidden', onToday);
     document.body.classList.toggle('has-navbar', !onToday);
     var crumbs = $('crumbs');
-    var section = r.pane === 'usage' ? 'Sessions' : (W.titles[r.pane] || '');
     var detail = W.crumb();
-    var parts = ['<li class="crumb root">COS Control</li>'];
-    if (r.pane === 'settings') parts.push('<li class="crumb current">Settings</li>');
-    else {
-      parts.push('<li class="crumb' + (detail || r.pane === 'usage' ? ' dim' : ' current') + '">' + esc(section) + '</li>');
-      if (r.pane === 'usage') parts.push('<li class="crumb' + (detail ? ' dim' : ' current') + '">Usage</li>');
-      if (detail) parts.push('<li class="crumb current detail">' + esc(detail) + '</li>');
-    }
-    crumbs.innerHTML = parts.join('');
+    // 7.0.33 A11: the way you came, the phone's trail (app.js trailNow), not where the page lives. Each step goes back
+    // that many steps; this page last. With no path (a menu pick, a deep link), this page's name alone.
+    var now = W.trailNow ? W.trailNow(r) : { steps: [], here: detail || W.titles[r.pane] || '' };
+    crumbs.innerHTML = (now.steps || []).map(function (s) {
+      return '<li class="crumb dim"><a href="' + esc(s.hash) + '" data-trail-back="' + s.back + '">' + esc(s.label) + '</a></li>';
+    }).join('') + '<li class="crumb current' + (detail ? ' detail' : '') + '" aria-current="page">' + esc(now.here) + '</li>';
     $('nav-back').disabled = onToday;
     // Below 600 px the section name gets the detail too. On a reader that label is hidden (the section button gives way
     // to Back, which names where it goes), so this shows only on a list that has a detail.
@@ -271,11 +268,9 @@
 
   document.addEventListener('click', function (e) {
     if (e.target.closest('#section-btn')) loadStories(true);
-    var t = e.target.closest('#nav-home,#nav-back,#nav-settings');
+    var t = e.target.closest('#nav-back');
     if (!t) return;
-    if (t.id === 'nav-home') W.go('today');
-    else if (t.id === 'nav-back') W.goBack();
-    else W.go('settings');
+    W.goBack();
   });
   document.addEventListener('keydown', function (e) {
     if (!(e.metaKey || e.ctrlKey) || e.altKey) return;