@gotcos/glasses-server 7.0.27 → 7.0.29

package/server/web-control/index.html

@@ -13,6 +13,42 @@
   <link rel="icon" href="/control/mark.svg" type="image/svg+xml">
   <!-- iOS "Add to Home Screen" ignores SVG icons: without this, a saved Control Web shortcut is a grey letter. -->
   <link rel="apple-touch-icon" href="/control/apple-touch-icon.png">
+  <!-- 7.0.28: the sign-in card and the first paint must look right before, or without, the 10 stylesheets below
+       (Miles 19:28: "Connect this browser" with no styling, the mark twice at full size, when the phone opened the page
+       before it could reach the Mac). These rules are copies of app.css, word for word (a test compares them), so the
+       stylesheets that follow change nothing when they arrive; only the tokens it needs, and the dark set also follows
+       the system when theme.js has not run. theme.js retries a stylesheet that failed. -->
+  <style id="critical-css">
+    :root { --page: #f5f0e6; --ink: #1f1712; --sub: #66635e; --panel: #ffffff; --panel-border: #e3d9c6; --accent: #89662d; --on-accent: #ffffff; --btn-bg: #ffffff; --btn-border: #a08a66; --grey: #5c5a55; --display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --gutter: 16px; --radius: 12px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
+    :root[data-theme='dark'] { --page: #17120e; --ink: #efe7dc; --sub: #b3a796; --panel: #221b15; --panel-border: #3a2f25; --accent: #d9b06a; --on-accent: #17120e; --btn-bg: #221b15; --btn-border: #7a6650; --grey: #a39887; }
+    @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --page: #17120e; --ink: #efe7dc; --sub: #b3a796; --panel: #221b15; --panel-border: #3a2f25; --accent: #d9b06a; --on-accent: #17120e; --btn-bg: #221b15; --btn-border: #7a6650; --grey: #a39887; } }
+    *, *::before, *::after { box-sizing: border-box; }
+    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--page); }
+    body { margin: 0; min-height: 100dvh; background: var(--page); color: var(--ink); font: 400 16px/1.45 var(--body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
+    button, input, select, textarea { font: inherit; color: inherit; }
+    button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
+    .hidden { display: none !important; }
+    .mark { width: 28px; height: 28px; color: var(--ink); flex: none; }
+    .first-paint { display: none; }
+    html.fp-wait .first-paint { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: var(--page); color: var(--ink); pointer-events: none; animation: fp-failsafe 1ms linear 25s forwards; }
+    .first-paint .mark { width: 44px; height: 44px; }
+    @keyframes fp-failsafe { to { visibility: hidden; } }
+    .noscript-note { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 24px var(--gutter); font-size: 17px; color: var(--ink); text-align: center; }
+    .auth-gate { min-height: 100dvh; display: grid; place-items: center; padding: calc(var(--safe-top) + 24px) var(--gutter) calc(var(--safe-bottom) + 24px); }
+    .auth-card { width: 100%; max-width: 420px; }
+    .auth-card .mark { width: 44px; height: 44px; margin-bottom: 22px; }
+    .auth-card h1 { font: 500 40px/1.05 var(--display); margin: 0 0 10px; letter-spacing: -0.01em; }
+    .auth-card p { color: var(--sub); margin: 0 0 24px; }
+    .auth-card label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
+    .auth-card .btn { margin-top: 12px; }
+    .auth-foot { font-size: 14px; color: var(--sub); margin-top: 18px; }
+    .auth-offline p { color: var(--sub); }
+    .field { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--panel-border); background: var(--panel); font-size: 16px; /* 16px keeps iOS Safari from zooming on focus */ }
+    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius); border: 1px solid var(--btn-border); background: var(--btn-bg); font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform 120ms ease; }
+    .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+    .btn.block { width: 100%; }
+    .link-btn { color: var(--accent); font-weight: 600; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
+  </style>
   <link rel="stylesheet" href="/control/app.css">
   <link rel="stylesheet" href="/control/control.css">
   <link rel="stylesheet" href="/control/panes/speakers.css">
@@ -64,16 +100,16 @@
   <!-- 7.0.19: the first paint. Shows at once, before any script or answer from the Mac: the mark on the page's own
        background, true whichever comes next (the sign-in card or the app). Out of the layout (fixed), so nothing moves
        when it goes. app.js removes it; a CSS failsafe hides it after 25 s if the scripts never run. -->
-  <div id="first-paint" class="first-paint" aria-hidden="true"><svg class="mark"><use href="#i-mark"/></svg></div>
+  <div id="first-paint" class="first-paint" aria-hidden="true"><svg class="mark" width="44" height="44"><use href="#i-mark"/></svg></div>
   <noscript><p class="noscript-note">COS Control Web needs JavaScript. Turn it on for this site, then reload.</p></noscript>
 
   <main id="auth-gate" class="auth-gate hidden" aria-labelledby="auth-title">
     <div class="auth-card">
-      <svg class="mark" aria-hidden="true"><use href="#i-mark"/></svg>
+      <svg class="mark" width="44" height="44" aria-hidden="true"><use href="#i-mark"/></svg>
       <h1 id="auth-title">Connect this browser</h1>
       <p id="auth-intro">COS runs on your Mac. Sign in once. You stay signed in while you use COS here, for up to 30 days.</p>
       <div id="auth-offline" class="auth-offline hidden" role="status">
-        <p id="auth-offline-text">Your Mac may be asleep, or this device may be offline or off Tailscale. This page checks again every 30 seconds.</p>
+        <p id="auth-offline-text">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.</p>
         <button type="button" class="btn primary block" id="auth-retry">Try again</button>
       </div>
       <form id="auth-form">
@@ -98,7 +134,7 @@
 
   <div id="app-shell" class="app-shell hidden">
     <nav class="rail" aria-label="Sections">
-      <div class="rail-head"><svg class="mark" aria-hidden="true"><use href="#i-mark"/></svg><span class="rail-brand">Control</span></div>
+      <div class="rail-head"><svg class="mark" width="28" height="28" aria-hidden="true"><use href="#i-mark"/></svg><span class="rail-brand">Control</span></div>
       <button type="button" class="rail-btn rail-today" data-pane="today" aria-label="Today"><svg class="icon"><use href="#i-today"/></svg><span class="rail-text"><span class="rail-label">Today</span><span class="rail-story" data-story="today"></span></span><span class="badge-dot hidden" data-badge="today"></span></button>
       <div class="rail-sep"></div>
       <button type="button" class="rail-btn" data-pane="messages" aria-label="Messages"><svg class="icon"><use href="#i-messages"/></svg><span class="rail-text"><span class="rail-label">Messages</span><span class="rail-story" data-story="messages"></span></span><span class="badge-dot hidden" data-badge="messages"></span></button>
@@ -112,6 +148,9 @@
       <div class="rail-spacer"></div>
       <button type="button" class="rail-settings" data-pane="settings" aria-label="Settings"><svg class="icon"><use href="#i-settings"/></svg><span class="rail-label">Settings</span></button>
       <p class="server-line" data-server-line><span class="dot ok" data-host-dot></span><span class="server-text" data-server-text>Server connected</span></p>
+      <!-- 7.0.29: the folded Duo's side rail only (app.css, html.short-screen): the top bar's Back, at thumb height. Shown
+           where the top bar shows Back today, on a reader, and it calls the same goBack. Never drawn from 600 px. -->
+      <button type="button" class="rail-back" id="rail-back" aria-label="Back" hidden><svg class="icon"><use href="#i-back"/></svg></button>
     </nav>
 
     <div class="main-col">
@@ -127,7 +166,7 @@
         <div class="topbar-left">
           <button type="button" id="topbar-back" class="topbar-back hidden"><svg class="icon"><use href="#i-back"/></svg><span id="topbar-back-label">Back</span></button>
           <button type="button" id="section-btn" class="section-btn" aria-haspopup="dialog" aria-controls="section-menu">
-            <svg class="mark" aria-hidden="true"><use href="#i-mark"/></svg><span id="section-name">Today</span><span class="caret" aria-hidden="true"></span>
+            <svg class="mark" width="28" height="28" aria-hidden="true"><use href="#i-mark"/></svg><span id="section-name">Today</span><span class="caret" aria-hidden="true"></span>
           </button>
         </div>
         <button type="button" class="icon-btn" data-open-ask aria-label="Ask COS or find a session"><svg class="icon"><use href="#i-ask"/></svg></button>

package/server/web-control/theme.js

@@ -25,6 +25,32 @@
   if (media && media.addEventListener) media.addEventListener('change', function () { if (read() === 'system') apply('system'); });
 })();
 
+/* 7.0.29 (Miles 21:42): "for shorter screens like the duo we should use the side rail when it's folded"; tall phones keep
+   the top menu. The test is the SCREEN's shape, never the window's: a screen whose short side is under 600 and whose long
+   side is under 1.6 times its short side is short (html.short-screen). app.css draws the side rail only with this class
+   AND a page under 600 px wide on a touch screen. Missing or odd numbers give no class: no rail, the layout as before.
+   MEASURED: his phone's own device reports (2026-11-10 and 11-11) give screen.width 466 and screen.height 678 in rows laid
+   out 449, 548 and 1119 px wide at visualViewport.scale 0.85, and the canary (11-11 21:56) read screen.width 466 in a
+   Safari tab, folded, at scale 1. 678 / 466 is 1.46. Every iPhone's published screen is 1.78 (SE, 8 Plus) or 2.16 and up.
+   ASSUMED, not measured: which of those rows were the Home Screen app and which a tab, that other zoom settings report
+   the same, and that folding or opening never changes the numbers. So this one function runs at load (before the first
+   paint, so the rail never moves the page on load) and again on every resize and orientation change, and the page's
+   device report and a 'rail' report on each change carry screen.width and screen.height, so his phone settles it. */
+(function () {
+  function shortScreen() {
+    var de = document.documentElement, on = false;
+    try {
+      var s = window.screen, a = s ? Number(s.width) : 0, b = s ? Number(s.height) : 0;
+      if (a > 0 && b > 0 && isFinite(a) && isFinite(b)) { var lo = Math.min(a, b), hi = Math.max(a, b); on = lo < 600 && hi / lo < 1.6; }
+    } catch (_e) { on = false; }
+    try { if (de && de.classList) { if (on) de.classList.add('short-screen'); else de.classList.remove('short-screen'); } } catch (_e) { /* no class: no rail */ }
+    return on;
+  }
+  window.CosShortScreen = shortScreen;
+  shortScreen();
+  if (typeof window.addEventListener === 'function') { window.addEventListener('resize', shortScreen); window.addEventListener('orientationchange', shortScreen); }
+})();
+
 /* The app's scripts (index.html #boot-scripts), loaded one frame after the page is drawn so the first paint never waits
    for them. Same files, same order (async=false keeps insertion order), and app.js's boot runs only once every one of
    them has run, as when they were in the page: window.CosBoot.after(boot). The frame wait has a 50 ms fallback, because
@@ -40,10 +66,16 @@
     list = Array.isArray(list) ? list.filter(function (u) { return typeof u === 'string' && u.indexOf('/control/') === 0; }) : [];
     var left = list.length;
     if (!left) { settle(); return; }
+    // 7.0.28: after a reload that the restyle check below made because a script had failed, ask for every script with a
+    // fresh query, so none comes from the browser's memory of the failed request (WebKit kept the failure across the
+    // reload). Read once.
+    var bust = '';
+    try { bust = sessionStorage.getItem('cos_web_bust') || ''; sessionStorage.removeItem('cos_web_bust'); } catch (_e) { bust = ''; }
     list.forEach(function (src) {
       var el = document.createElement('script');
-      el.src = src; el.async = false;
-      el.onload = el.onerror = function () { if (--left === 0) settle(); };
+      el.src = /^\d{1,15}$/.test(bust) ? src + (src.indexOf('?') >= 0 ? '&' : '?') + 'r=' + bust : src; el.async = false;
+      el.onload = function () { if (--left === 0) settle(); };
+      el.onerror = function () { if (window.CosRestyle) window.CosRestyle.scriptFailed(src); if (--left === 0) settle(); };
       document.body.appendChild(el);
     });
   }
@@ -54,3 +86,138 @@
   }
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', afterFrame); else afterFrame();
 })();
+
+/* 7.0.28 (Miles 19:28, "Connect this browser" with no styling): the page's own files must not stay missing. When the
+   phone opens the page before it can reach the Mac (the tunnel still coming up, or the page drawn from the browser's
+   copy), the HTML draws but a stylesheet or a script can fail, and nothing asked for it again. index.html's inline
+   critical CSS keeps the sign-in card right meanwhile; this brings the rest back. While anything failed, it asks the
+   Mac for the failed file after 1, 2, 4 and 8 s, then every 30 s, only while the page is in front. When the Mac
+   answers: a failed script reloads the page (app.js cannot be re-run in place); failed stylesheets are asked for again
+   in place. A file that keeps failing never loops: at most 2 reloads in 5 minutes. What happened is kept for app.js's numbers-only 'restyle' row (window.CosRestyle.last, and sessionStorage
+   across the reload).
+   7.0.29 (Q1 FIX 1 and 2, the lead's R1 and R2): the page never reloads by itself over his words. While any text box
+   holds words, focus is in a text box, or a send is in flight (app.js's window.CosBusy; when app.js is the script that
+   failed, the boxes alone), it shows one line with a Reload button instead, and only his tap reloads. The cap fails
+   closed: if the reload count cannot be read, or does not read back after writing (storage blocked), it gives up and
+   shows the same line rather than reloading. */
+(function () {
+  var STEPS = [1000, 2000, 4000, 8000], SETTLED_MS = 30000, KEY = 'cos_web_restyle', RELOADS_KEY = 'cos_web_restyle_reloads';
+  var RELOAD_MAX = 2, RELOAD_WINDOW_MS = 5 * 60000;
+  var R = { scripts: [], sheets: 0, tries: 0, t0: 0, timer: null, done: false, last: null };
+  // Every real browser has these; a harness that runs this file without them gets no restyle check, not a throw that
+  // would stop the theme and the loader above from being tested.
+  if (typeof window.addEventListener !== 'function' || typeof document.querySelectorAll !== 'function' || typeof document.addEventListener !== 'function') return;
+  function missing() {
+    return [].filter.call(document.querySelectorAll('link[rel="stylesheet"]'), function (l) {
+      // A sheet that failed to load throws on read in WebKit (SecurityError); count it as missing.
+      try { return !l.sheet || !l.sheet.cssRules || l.sheet.cssRules.length === 0; } catch (_e) { return true; }
+    });
+  }
+  function bust(href) { return href + (href.indexOf('?') >= 0 ? '&' : '?') + 'r=' + Date.now(); }
+  function record(how) {
+    R.last = { how: how, sheets: R.sheets, scripts: R.scripts.length, tries: R.tries, ms: R.t0 ? Date.now() - R.t0 : 0 };
+    try { window.dispatchEvent(new CustomEvent('cos-restyle', { detail: R.last })); } catch (_e) {}
+  }
+  // What would be lost by a reload: words in a text box he can see, focus in one, or a send on its way (app.js).
+  function busy() {
+    var out = { words: false, focus: false, sending: false };
+    try {
+      [].forEach.call(document.querySelectorAll('textarea, input, [contenteditable]'), function (el) {
+        if (el.getAttribute && el.getAttribute('aria-hidden') === 'true') return;   // app.js's hidden measuring copy
+        if (el.tagName === 'INPUT' && !/^(|text|search|email|url|tel|password|number)$/i.test(el.getAttribute('type') || '')) return;
+        var v = el.isContentEditable ? el.textContent : el.value;
+        if (v && String(v).trim()) out.words = true;
+      });
+      var a = document.activeElement;
+      out.focus = !!(a && (a.tagName === 'TEXTAREA' || (a.tagName === 'INPUT' && /^(|text|search|email|url|tel|password|number)$/i.test(a.getAttribute('type') || '')) || a.isContentEditable));
+    } catch (_e) {}
+    try { out.sending = typeof window.CosBusy === 'function' && !!window.CosBusy(); } catch (_e) {}
+    out.any = out.words || out.focus || out.sending;
+    return out;
+  }
+  // The one line, in place of a reload. Inline styles with the theme's own colours where they exist, so it reads right
+  // on a page whose stylesheet failed too. At the top: a fixed bar near the bottom fights the phone browser's own bar.
+  // On the folded Duo it stops at the side rail (--rail-w is set only while that rail shows).
+  function offer(b) {
+    try { offerLine(b); } catch (_e) { /* no line, and still no reload by itself */ }
+  }
+  function offerLine(b) {
+    var line = document.getElementById('cos-reload-line');
+    if (!line) {
+      line = document.createElement('div');
+      line.id = 'cos-reload-line'; line.setAttribute('role', 'status');
+      line.style.cssText = 'position:fixed;left:12px;right:calc(12px + var(--rail-w, 0px));top:calc(env(safe-area-inset-top, 0px) + 8px);z-index:90;display:flex;align-items:center;gap:12px;' +
+        'padding:10px 10px 10px 14px;border-radius:12px;border:1px solid var(--panel-border, #a08a66);background:var(--panel, #ffffff);color:var(--ink, #1f1712);' +
+        'font:400 15px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;max-width:560px;margin:0 auto;';
+      var p = document.createElement('p'); p.style.cssText = 'margin:0;flex:1 1 auto;min-width:0;'; p.id = 'cos-reload-words';
+      var btn = document.createElement('button'); btn.type = 'button'; btn.textContent = 'Reload';
+      btn.style.cssText = 'flex:none;min-height:44px;padding:0 16px;border-radius:10px;border:0;background:var(--accent, #89662d);color:var(--on-accent, #ffffff);font-family:inherit;font-size:15px;font-weight:600;line-height:1;';
+      btn.addEventListener('click', function () { reloadNow(); });
+      line.appendChild(p); line.appendChild(btn);
+      (document.body || document.documentElement).appendChild(line);
+    }
+    var words = document.getElementById('cos-reload-words');
+    if (words) words.textContent = 'Part of this page did not load.' + (b && b.words ? ' Send or copy what you have typed first. A reload clears it.' : '');
+  }
+  function reloadNow() {
+    try { sessionStorage.setItem(KEY, JSON.stringify(R.last)); sessionStorage.setItem('cos_web_bust', String(Date.now())); } catch (_e) {}
+    location.reload();
+  }
+  function recover() {
+    if (R.scripts.length) {
+      // Never by itself over his words (R1): the line, and only his tap reloads.
+      var b = busy();
+      if (b.any) { R.done = true; record('offered'); offer(b); return; }
+      // At most 2 reloads in 5 minutes: a file that keeps failing must never become a reload loop. Fails closed (R2): a
+      // count that cannot be read, or that does not read back after writing, means no reload by itself.
+      var recent = null, back = null;
+      try { recent = JSON.parse(sessionStorage.getItem(RELOADS_KEY) || '[]').filter(function (t) { return Date.now() - t < RELOAD_WINDOW_MS; }); } catch (_e) { recent = null; }
+      if (!recent || recent.length >= RELOAD_MAX) { R.done = true; record('gave-up'); offer(b); return; }
+      var now = Date.now();
+      try { recent.push(now); sessionStorage.setItem(RELOADS_KEY, JSON.stringify(recent)); back = JSON.parse(sessionStorage.getItem(RELOADS_KEY) || 'null'); } catch (_e) { back = null; }
+      if (!back || back.length !== recent.length || back[back.length - 1] !== now) { R.done = true; record('gave-up'); offer(b); return; }
+      record('reload');
+      reloadNow();
+      return;
+    }
+    var gone = missing();
+    gone.forEach(function (old) {
+      var el = document.createElement('link');
+      el.rel = 'stylesheet'; el.href = bust(old.getAttribute('href') || old.href);
+      el.onload = function () { if (old.parentNode) old.parentNode.removeChild(old); };
+      old.parentNode.insertBefore(el, old.nextSibling);
+    });
+    R.done = true; record('sheets');
+  }
+  function schedule() {
+    if (R.timer || R.done || document.hidden) return;
+    var ms = R.tries < STEPS.length ? STEPS[R.tries] : SETTLED_MS;
+    R.timer = setTimeout(check, ms);
+  }
+  function check() {
+    R.timer = null;
+    if (R.done || document.hidden) return;
+    R.tries++;
+    // Ask for the file that failed (a script first): it answering is what matters, and a file that is not there (404)
+    // never counts as the Mac being back.
+    var gone = missing(), url = R.scripts[0] || (gone[0] && (gone[0].getAttribute('href') || gone[0].href)) || '/control/app.css';
+    var probe = window.fetch ? window.fetch(bust(url), { cache: 'no-store', credentials: 'same-origin' }) : Promise.reject(new Error('no fetch'));
+    probe.then(function (r) { if (r && r.ok) recover(); else schedule(); }, function () { schedule(); });
+  }
+  function start() {
+    if (R.done || R.t0) return;
+    R.sheets = missing().length;
+    if (!R.sheets && !R.scripts.length) return;
+    R.t0 = Date.now();
+    schedule();
+  }
+  window.CosRestyle = {
+    scriptFailed: function (src) { if (R.scripts.indexOf(src) < 0) R.scripts.push(src); if (R.t0) schedule(); else start(); },
+    get last() { return R.last; },
+    // After a reload that this caused: what the page that reloaded had seen, read once.
+    takeSaved: function () { try { var v = sessionStorage.getItem(KEY); sessionStorage.removeItem(KEY); return v ? JSON.parse(v) : null; } catch (_e) { return null; } }
+  };
+  document.addEventListener('visibilitychange', function () { if (!document.hidden && R.t0 && !R.done && !R.timer) check(); });
+  // Every <link> in the head has finished (loaded or failed) by the time the page's load event fires.
+  if (document.readyState === 'complete') start(); else window.addEventListener('load', start);
+})();