@gotcos/glasses-server 7.0.18 → 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">
@@ -24,6 +60,14 @@
   <link rel="stylesheet" href="/control/panes/memories.css">
   <link rel="stylesheet" href="/control/panes/today-actions.css">
   <script src="/control/theme.js"></script>
+  <!-- The app's scripts start downloading now, while the page parses; theme.js runs them after the first paint
+       (#boot-scripts, the same list). -->
+  <link rel="preload" href="/control/vendor/qrcode-encoder.js" as="script">
+  <link rel="preload" href="/control/memory-review.js" as="script">
+  <link rel="preload" href="/control/app.js" as="script">
+  <link rel="preload" href="/control/shell.js" as="script">
+  <link rel="preload" href="/control/panes/cos-chat.js" as="script">
+  <link rel="preload" href="/control/panes/questions.js" as="script">
 </head>
 <body>
   <svg width="0" height="0" style="position:absolute" aria-hidden="true">
@@ -53,13 +97,19 @@
     <symbol id="i-link" viewBox="0 0 24 24"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></symbol>
   </svg>
 
+  <!-- 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" 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">
@@ -84,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>
@@ -98,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">
@@ -113,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>
@@ -197,16 +250,29 @@
             <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">
-                <div class="sx-tools">
-                  <form class="cx-search sx-search" id="sessions-search-form" role="search">
-                    <input id="sessions-q" class="field" type="search" placeholder="Search titles, transcripts…" enterkeyhint="search" autocomplete="off" aria-label="Search titles, transcripts">
-                    <button type="button" class="cx-clear hidden" id="sessions-clear" data-sx="clear" aria-label="Clear search">Clear</button>
-                  </form>
-                  <select id="sessions-recency" class="field sx-select" aria-label="Recency">
-                    <option value="newest">Newest</option>
-                    <option value="oldest">Oldest</option>
-                    <option value="match">Best match</option>
-                  </select>
+                <!-- 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. -->
+                <div class="sx-lhead" id="sessions-lhead">
+                  <div class="sx-lh-top">
+                    <button type="button" class="sx-view-btn" id="sessions-view-btn" data-sx="view-menu" aria-haspopup="menu" aria-expanded="false" aria-controls="sessions-view-menu"><span>Sessions</span><span class="caret" aria-hidden="true"></span></button>
+                    <div class="sx-menu hidden" id="sessions-view-menu" role="menu" aria-label="Sessions">
+                      <button type="button" role="menuitem" data-sx="view" data-view="sessions">Sessions</button>
+                      <button type="button" role="menuitem" data-sx="view" data-view="usage">Usage</button>
+                      <button type="button" role="menuitem" data-sx="view" data-view="cost">COS cost</button>
+                      <button type="button" role="menuitem" data-sx="refresh">Refresh</button>
+                    </div>
+                  </div>
+                  <div class="sx-tools">
+                    <form class="cx-search sx-search" id="sessions-search-form" role="search">
+                      <input id="sessions-q" class="field" type="search" placeholder="Search titles and transcripts" enterkeyhint="search" autocomplete="off" aria-label="Search titles and transcripts">
+                      <button type="button" class="cx-clear hidden" id="sessions-clear" data-sx="clear" aria-label="Clear search">Clear</button>
+                    </form>
+                  </div>
+                  <div class="sx-tools sx-tools-line">
+                    <p class="sx-quiet hidden" id="sessions-quiet"></p>
+                    <button type="button" class="cx-btn quiet sx-new-folder hidden" id="sessions-new-folder" data-sx="new-folder">New folder</button>
+                    <select id="sessions-sort" class="field sx-select" aria-label="Sort"><option value="updated">Updated</option><option value="opened">Opened</option></select>
+                  </div>
+                  <p class="sx-org-note hidden" id="sessions-org-note" role="status"></p>
                 </div>
                 <p class="cx-note sx-hint hidden" id="sessions-hint"></p>
                 <div id="sessions-hooks"></div>
@@ -281,12 +347,9 @@
 
   <div id="toast" class="toast hidden" role="status"></div>
 
-  <script src="/control/vendor/qrcode-encoder.js"></script>
-  <script src="/control/memory-review.js"></script>
-  <script src="/control/app.js"></script>
-  <script src="/control/shell.js"></script>
-  <script src="/control/panes/cos-chat.js"></script>
-  <script src="/control/panes/questions.js"></script>
+  <!-- The app's scripts, in the order they run. theme.js adds them one frame after the page is drawn, so the first paint
+       (#first-paint) never waits for them, and runs boot only once every one of them has run (W1_first_open_speed.md). -->
+  <script type="application/json" id="boot-scripts">["/control/vendor/qrcode-encoder.js", "/control/memory-review.js", "/control/app.js", "/control/shell.js", "/control/panes/cos-chat.js", "/control/panes/questions.js"]</script>
   <!-- Loaded when first opened, then in the background once the page is idle (app.js ensurePane). -->
   <script type="application/json" id="lazy-panes">{
     "messages": "/control/panes/messages.js",

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

@@ -492,3 +492,283 @@
 .u-breakdown summary::-webkit-details-marker { display: none; }
 .u-breakdown summary .u-chev { color: var(--accent); transform: rotate(-90deg); transition: transform 120ms ease; }
 .u-breakdown[open] summary .u-chev { transform: none; }
+
+/* ── the frame (7.0.23, step 1 of the chat-style Sessions; DESIGN_PLAN v2 "The frame") ──────────────────────────────
+   While Sessions shows its list and reader (app.js sxFrameSync sets html.sx-frame), the page is one screen, never
+   taller: the app shell is the visible box the keyboard kit publishes (--vv-top, --vv-h from viewportFit, as kb-chat
+   uses them), so the document has nothing left to scroll. The rail, the list and the reader's body each scroll by
+   themselves; the reader's header stays at its top and the dock (activity with Stop, the Mac's question, the question
+   cards, the reply box, its status and the queue) stays at its bottom. Layout, not a proven fix for the 20:16 report:
+   app.js sxFrameCrumb reports where the parts sit against the visible area. In a Safari tab (not the Home Screen app)
+   a fixed shell ends above Safari's own bottom bar; the app has no such bar. */
+html.sx-frame, html.sx-frame body { height: 100%; overflow: hidden; overscroll-behavior: none; }
+html.sx-frame body { min-height: 0; }
+html.sx-frame .app-shell {
+  position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100dvh); min-height: 0;
+  display: flex; flex-direction: column; overflow: hidden;
+}
+html.sx-frame .main-col { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
+html.sx-frame .topbar, html.sx-frame .navbar { flex: none; position: relative; }
+html.sx-frame .workspace {
+  flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
+  padding-bottom: calc(var(--safe-bottom) + 8px);
+}
+html.sx-frame #pane-sessions { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
+/* What sits over every pane (the Mac not answering, the sign-in ending, a session's waiting question cards) keeps its
+   place above Sessions, but never takes the screen: past 35 percent it scrolls by itself. */
+html.sx-frame #conn-notice, html.sx-frame #sq-host, html.sx-frame .workspace > :not(.pane) { flex: none; }
+html.sx-frame #sq-host { max-height: 35%; overflow: auto; overscroll-behavior: contain; margin-bottom: 10px; }
+/* In the frame a waiting question is its one line at every width (questions.css shows it so under 600 px): a tap opens
+   the cards. The open session's own cards sit in the reader's dock either way. */
+html.sx-frame .sq-host .sq-banner { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 14px;
+  background: var(--panel); border: 1px solid color-mix(in srgb, var(--hot) 45%, var(--panel-border)); color: var(--ink); font: 600 15px/1.3 var(--body); text-align: left; }
+html.sx-frame .sq-host .sq-banner-text { flex: 1; min-width: 0; }
+html.sx-frame .sq-host .sq-banner-act { flex: none; color: var(--accent); }
+html.sx-frame .sq-host .sq-cards:not(.open) { display: none; }
+html.sx-frame #pane-sessions > .sx { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+html.sx-frame .sx-hero, html.sx-frame .sx-views { flex: none; }
+/* In the frame the Sessions header is one line (the same title, sources line, counts and Refresh), so the list and the
+   reader keep the height; the view switch keeps its own row. */
+html.sx-frame .sx-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 0; padding-bottom: 8px; margin-bottom: 0; }
+html.sx-frame .sx-hero .cx-glyph { display: none; }
+html.sx-frame .sx-hero .cx-hero-text { flex: 1 1 260px; display: flex; align-items: baseline; gap: 12px; min-width: 0; }
+html.sx-frame .sx-hero .cx-title { font-size: 22px; flex: none; }
+html.sx-frame .sx-hero .cx-detail-line { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+html.sx-frame .sx-hero .cx-stats { order: 2; margin-top: 0; flex: none; }
+html.sx-frame .sx-hero .cx-actions { order: 3; flex: none; }
+html.sx-frame .sx-views { margin: 4px 0 8px; }
+/* The reader's header in one row: the badge, the title on one line, Hide list; the subtitle is one line under it. */
+html.sx-frame .sx-head-line { flex-wrap: nowrap; }
+html.sx-frame .sx-reader-title { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20px; }
+html.sx-frame .sx-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
+html.sx-frame .sx-reader-head { padding-bottom: 8px; margin-bottom: 0; }
+html.sx-frame .sx-split { flex: 1 1 auto; min-height: 0; margin-top: 0; }
+html.sx-frame .sx-split > .split-list { min-height: 0; overflow: auto; overscroll-behavior: contain; }
+html.sx-frame .sx-split > .sx-reader { min-height: 0; flex-direction: column; overflow: hidden; }
+html.sx-frame .sx-reader-head { flex: none; }
+/* The conversation between the header and the dock; it opens at the newest turn (app.js sxToNewest). */
+.sx-body { min-height: 0; }
+html.sx-frame .sx-body { flex: 1 1 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; }
+/* The dock takes at most 72 percent of the reader (with the keyboard up, what the reader has below its head). 72, not 60:
+   at 951 by 539 with files, a queued note and the busy note, 60 left a 33 px window above the pinned reply box, too
+   short for a 44 px Cancel (dock_sweep). The reply box and its status always
+   show: what can grow above or below them (the activity, the queue) gives way or scrolls inside its own box. */
+html.sx-frame .sx-dock { flex: 0 0 auto; max-height: 72%; min-height: 0; display: flex; flex-direction: column; position: relative;
+  padding-top: 8px; border-top: 1px solid var(--hairline); }
+html.sx-frame .sx-dock > .sx-activity, html.sx-frame .sx-dock > .sx-mac-q { flex: none; }
+/* What it is doing now keeps about four lines in the dock and scrolls past that, so it never pushes the reply box out. */
+html.sx-frame .sx-dock > .sx-activity { flex: 0 4 auto; min-height: 32px; max-height: 96px; overflow: auto; }
+/* The reply part never shrinks: a dock capped at 60 percent with overflow hidden would clip the reply box instead (951 by
+   539, Go to the question shown: the box ran 17 px past the screen). What gives way is the activity; the queue inside the
+   reply part has its own cap and scrolls. */
+html.sx-frame .sx-dock .sx-chat { margin-top: 0; flex: none; display: flex; flex-direction: column; }
+html.sx-frame .sx-dock .sx-chat > * { flex: none; }
+/* Go to the question sits on the dock's top edge, over the last line of the conversation, so it takes no room from the
+   dock at any height (a dock line squeezed its own 44 px button on short screens). */
+html.sx-frame #session-reader > .sx-goq { position: absolute; right: 8px; left: auto; bottom: calc(var(--sx-dock-h, 120px) + 6px); margin: 0; z-index: 2;
+  padding: 0; border: 0; background: transparent; }
+/* Only the button shows there, so it covers the end of one line, not the conversation; the sentence stays for screen
+   readers. */
+html.sx-frame #session-reader > .sx-goq > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+html.sx-frame #session-reader > .sx-goq .cx-btn { background: var(--panel); border-color: color-mix(in srgb, var(--accent) 55%, var(--panel-border));
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
+/* The session's question cards end the conversation (app.js openSession), so they scroll with it; their own footer
+   (Submit) sticks to the bottom of the conversation the way it sticks to the page elsewhere. */
+html.sx-frame .sx-body #session-questions:not(:empty) { margin-top: 12px; }
+/* An empty status line under the reply box takes no room in the frame (it keeps its 20 px when it says something). */
+html.sx-frame .sx-dock #session-status:empty { min-height: 0; margin: 0; }
+html.sx-frame .sx-dock #session-queue { flex: none; max-height: none; overflow: visible; }
+/* With files in the reply box (7.0.23 regression, attach5_check): the chip row wrapped and grew (5 chips at 1119 wide
+   were 221 px), the reply form spilled past the reader's clipped bottom, and Send sat below the screen with nothing to
+   scroll (2 files on the open Duo; 1 file with the keyboard up at 449). The chip row now scrolls inside two rows (one
+   while typing), and the dock scrolls by itself as a last resort, so Send can always be reached. */
+/* THE DOCK RULE (lead 08:47, after three overflows: the reply box at 951 by 539, the sign-in screen, Send under files):
+   the dock never exceeds the visible height (it is capped inside the reader, which is inside the visible box); its
+   inside scrolls; and the reply box, Send included, is always in view, pinned to the dock's bottom while what is above
+   it scrolls. dock_sweep.cjs checks every combination the dock can hold at five sizes, with and without the keyboard. */
+html.sx-frame #session-reader { position: relative; }
+html.sx-frame .sx-dock { overflow-y: auto; overscroll-behavior: contain; }
+/* The reply part's own box is dissolved into the dock (display: contents) so the reply box can stick to the dock's
+   bottom: a sticky box cannot leave its parent, and .sx-chat also holds the queue. The reply box goes last; the
+   busy note, the status line and the queue sit above it and scroll with the dock. Its own rows are capped against the
+   visible height (--vv-h), so it always fits in the dock: the chip row, then the draft, each scroll inside. */
+html.sx-frame .sx-dock .sx-chat { display: contents; }
+html.sx-frame .sx-dock #session-form { order: 10; position: sticky; bottom: 0; z-index: 1; background: var(--page); }
+html.sx-frame .sx-dock #session-input { max-height: min(140px, calc(var(--vv-h, 600px) * 0.1)); }
+/* A swipe that reaches the end of the activity or the chip row carries on into the dock (no overscroll containment):
+   a swipe over the activity line used to stop there and never move the dock. */
+html.sx-frame .sx-dock #session-files:not(.hidden) { max-height: max(52px, min(104px, calc(var(--vv-h, 600px) * 0.1))); overflow-y: auto; }
+html.sx-frame.kb-up .sx-dock #session-files:not(.hidden) { max-height: 52px; }
+html.sx-frame.kb-up .sx-dock #session-input { max-height: min(4.5em, calc(var(--vv-h, 600px) * 0.17)); }
+
+/* Phone and narrow (under 760): one column at a time, the list or the reader, each filling the frame. */
+@media (max-width: 759px) {
+  html.sx-frame .sx-split { display: flex; flex-direction: column; }
+  html.sx-frame .sx-split > .split-list { flex: 1 1 auto; }
+  html.sx-frame .sx-split.reading > .sx-reader { flex: 1 1 auto; display: flex; }
+}
+/* From 600: the rail is a column of the shell and scrolls by itself (its labels from 1100 wide and 721 tall, control.css). */
+@media (min-width: 600px) {
+  html.sx-frame .app-shell { display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
+  html.sx-frame .rail { position: static; top: auto; height: auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+}
+@media (min-width: 1100px) and (min-height: 721px) {
+  html.sx-frame .app-shell { grid-template-columns: 248px minmax(0, 1fr); }
+}
+/* From 760: the list, the divider and the reader side by side, each the full height of the split. */
+@media (min-width: 760px) {
+  html.sx-frame .split.sx-split { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
+  html.sx-frame .sx-split > .split-list { position: static; top: auto; max-height: none; height: 100%; }
+  /* relative, not static: the divider's 44 px touch area (::before) is placed against it and must stay its own size. */
+  html.sx-frame .sx-handle { position: relative; top: auto; height: auto; align-self: stretch; }
+  html.sx-frame .sx-split > .sx-reader { display: flex; height: 100%; }
+}
+/* An on-screen keyboard up (app.js html.kb-up): the header goes to one line and the conversation keeps the rest. */
+html.sx-frame.kb-up .sx-hero, html.sx-frame.kb-up .sx-views, html.sx-frame.kb-up .sx-subtitle,
+html.sx-frame.kb-up .navbar, html.sx-frame.kb-up #conn-notice, html.sx-frame.kb-up #sq-host { display: none; }
+/* Short screens (under 600 tall, Comet's 951 x 539): the subtitle and counts step aside. */
+@media (max-height: 599px) {
+  /* The notices over the pane (the Mac not answering, the sign-in ending) are one line each: the same words, cut with
+     an ellipsis, their buttons kept. */
+  html.sx-frame .conn-notice { margin-bottom: 8px; gap: 6px; grid-template-columns: minmax(0, 1fr); }
+  html.sx-frame .conn-line { flex-wrap: nowrap; min-width: 0; padding: 6px 10px 6px 14px; }
+  html.sx-frame .conn-line > .btn { flex: none; }
+  html.sx-frame .conn-line > :not(.btn):not(button) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  html.sx-frame .conn-line .conn-sub { flex: 1 1 0; }
+  html.sx-frame #sq-host { margin-bottom: 8px; }
+  html.sx-frame .sq-host .sq-banner { min-height: 44px; padding: 6px 14px; }
+  html.sx-frame .sx-views { margin: 2px 0 6px; }
+  /* The Sessions header (title and Refresh) and the view switch share one row. */
+  html.sx-frame #pane-sessions > .sx { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 18px; }
+  html.sx-frame .sx-hero { grid-column: 1; grid-row: 1; flex-wrap: nowrap; padding-bottom: 6px; border-bottom: 0; background: none; margin: 0; padding-left: 0; padding-right: 0; }
+  html.sx-frame .sx-hero .cx-hero-text { flex: none; }
+  html.sx-frame .sx-views { grid-column: 2; grid-row: 1; align-self: center; margin: 0 0 6px; }
+  html.sx-frame .sx-split, html.sx-frame .sx-usage { grid-column: 1 / -1; grid-row: 2; }
+  html.sx-frame .sx-subtitle, html.sx-frame .sx-hero .cx-stats, html.sx-frame .sx-hero .cx-detail-line { display: none; }
+}
+html.sx-frame.kb-up .sx-reader-head { padding: 2px 0 6px; margin-bottom: 4px; }
+html.sx-frame.kb-up .sx-reader-title { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* While typing the reply area wins: the dock takes what it needs up to the whole reader below its head, and the
+   conversation gives way (it can reach 0 on a very short screen: 382 by 557 with the keyboard up). */
+html.sx-frame.kb-up .sx-dock { max-height: none; flex: 0 1 auto; }
+html.sx-frame.kb-up #session-input { max-height: 4.5em; }
+/* While typing, the dock drops the spacing around the reply box: at 382 by 557 with the keyboard up (267 px visible) the
+   dock needed 187 px inside its 155 and the reply box ran 18 px past the screen (MX's step 6 found the same in Messages). */
+html.sx-frame.kb-up .sx-dock { padding-top: 4px; }
+html.sx-frame.kb-up .sx-dock > .sx-activity { margin-bottom: 4px; }
+html.sx-frame.kb-up .sx-dock .sx-chat { padding-top: 0; }
+html.sx-frame.kb-up .sx-dock #session-form { margin-top: 0; }
+/* Touch at any size in the frame: app.css floors controls to 44 px only under 600 wide or 720 tall, so on the open Duo
+   (1119 by 787 at 0.85) Copy session was 32 px and the labelled rail's Settings 28 px (MX's step 6 found the same gap). */
+@media (any-pointer: coarse) {
+  html.sx-frame .sx-foot .cx-btn, html.sx-frame .rail-settings { min-height: 44px; }
+}
+
+/* ── the list (7.0.23, step 2b-1; DESIGN_PLAN v2 "The list", the 23:33 mock) ─────────────────────────────────────────
+   The list's own head (the Sessions menu, Search, one quiet line, the sort menu), then groups with plain headings and
+   rows divided by hairlines (no boxed cards). A row's state is on its left edge and always in words too; the open row
+   has the panel background and a 1 px outline, so selection never rests on colour alone. */
+.sx-lhead { display: grid; gap: 8px; padding: 2px 2px 8px; border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 3; background: var(--page); }
+/* Under 600 px the top bar already names Sessions; the view switch (Sessions, Usage, COS cost) stays for the other two. */
+@media (max-width: 599px) { .sx-lhead .sx-lh-top { display: none; } }
+@media (min-width: 600px) { .sx-views.sx-wide-hide { display: none; } }
+.sx-lh-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
+.sx-view-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font: 600 18px/1.1 var(--body); color: var(--ink); }
+.sx-view-btn .caret { width: 7px; height: 7px; border-right: 2px solid var(--sub); border-bottom: 2px solid var(--sub); transform: rotate(45deg) translateY(-2px); }
+.sx-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 200px; display: grid; padding: 6px; border-radius: 12px;
+  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
+.sx-menu.hidden { display: none; }
+.sx-menu [role='menuitem'] { min-height: 40px; padding: 0 12px; border-radius: 8px; text-align: left; font: 500 15px/1.2 var(--body); color: var(--ink); }
+.sx-menu [role='menuitem']:hover, .sx-menu [role='menuitem']:focus-visible { background: var(--qopen); }
+.sx-lhead .sx-tools { margin: 0; }
+.sx-tools-line { display: flex; align-items: center; gap: 8px; }
+.sx-quiet { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--sub); }
+.sx-tools-line .sx-select { margin-left: auto; }
+
+.sx-groups { padding-bottom: 8px; }
+.sx-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; margin: 0; padding: 14px 12px 6px; font: 600 13px/1.3 var(--body); color: var(--sub); }
+.sx-g:first-child .sx-gh { padding-top: 10px; }
+.sx-gh .n { font: 500 12.5px/1.3 var(--body); color: var(--tertiary); font-variant-numeric: tabular-nums; }
+.sx-gh.state { color: var(--ink); }
+.sx-gh.needs .n { color: var(--accent); }
+.sx-gh.working .n { color: var(--run-green); }
+button.sx-gh { align-items: center; text-align: left; min-height: 36px; }
+button.sx-gh:hover { color: var(--ink); }
+.sx-gh .fold { display: inline-flex; align-items: center; gap: 8px; }
+.sx-gh .chev { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -1px); }
+button.sx-gh[aria-expanded='false'] .chev { transform: rotate(-45deg); }
+.sx-rows { display: grid; }
+.sx-r { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 10px; }
+.sx-rows > .sx-r + .sx-r::before { content: ''; position: absolute; top: 0; left: 12px; right: 0; height: 1px; background: var(--hairline); }
+.sx-r:hover { background: color-mix(in srgb, var(--panel) 55%, transparent); }
+.sx-r[aria-selected='true'] { background: var(--panel); box-shadow: inset 0 0 0 1px var(--btn-border); }
+.sx-r[aria-selected='true']::before, .sx-r[aria-selected='true'] + .sx-r::before { background: transparent !important; }
+.sx-r-edge { position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; }
+.sx-r.running .sx-r-edge { background: var(--run-green); }
+.sx-r.waiting .sx-r-edge { background: var(--accent); }
+.sx-r.failed .sx-r-edge { background: var(--hot); }
+.sx-r-open { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: baseline; min-width: 0; min-height: 56px; padding: 9px 12px 9px 12px; text-align: left; color: inherit; width: 100%; }
+.sx-r-open:focus-visible { outline-offset: -2px; }
+.sx-r-title { font: 600 14px/1.3 var(--body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.sx-r-time { font-size: 12px; line-height: 1.3; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.sx-r-sub { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--sub); }
+.sx-r-sub .sx-glyph { width: 18px; height: 18px; flex: none; }
+.sx-r-sub .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.sx-r-sub .t b.failed { color: var(--hot); font-weight: 600; }
+.sx-r-snip { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.4; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.sx-tag { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--panel-border); font: 600 11px/1 var(--body); color: var(--ink); }
+.sx-r.compact .sx-r-open { min-height: 40px; padding-top: 6px; padding-bottom: 6px; align-items: center; }
+.sx-r.compact .sx-r-title { font-weight: 500; }
+.sx-more-older { margin: 6px 12px 0; }
+/* Touch: every target in the list reaches 44 px. */
+@media (any-pointer: coarse) {
+  .sx-r-open { min-height: 58px; }
+  .sx-r.compact .sx-r-open { min-height: 44px; }
+  button.sx-gh, .sx-view-btn, .sx-menu [role='menuitem'] { min-height: 44px; }
+  .sx-lhead #sessions-q, .sx-lhead #sessions-sort { height: 44px; min-height: 44px; }
+}
+
+/* ── folders, COS pins and rename (7.0.23, step 2b-2) ── */
+.sx-r { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
+.sx-r-more { width: 32px; height: 32px; margin-right: 6px; border-radius: 8px; display: grid; place-items: center; color: var(--sub); font: 600 18px/1 var(--body); }
+.sx-r-more:hover, .sx-r-more[aria-expanded='true'] { background: var(--qopen); color: var(--ink); }
+.sx-r-orig { grid-column: 1 / -1; font-size: 12px; line-height: 1.3; color: var(--tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.sx-gh-row { display: flex; align-items: center; }
+.sx-gh-row .sx-gh { flex: 1 1 auto; }
+.sx-empty-folder { margin: 2px 12px 8px; font-size: 13px; color: var(--sub); }
+.sx-new-folder { flex: none; }
+.sx-org-note { margin: 0; font-size: 13px; color: var(--hot); }
+
+/* ── the list fits its column at every width (7.0.27; Miles 13:01 on 7.0.26, the open Duo) ──────────────────────────
+   THE RULE: at every list width from the divider's minimum (240 px) to its maximum the list's content fits the column, so
+   the column never scrolls sideways and nothing in it is cut. The head is one grid column that grows to its widest
+   item's min-content width; the reach line, New folder and the sort menu on one unwrapped row measured 272 px at the
+   minimum, so the head, the search field with it, and the column were 32 px too wide and the column panned on x. Now
+   the reach line has its own full-width row and New folder and the sort menu share the next one, wrapping under each
+   other if they must. A folder heading may shrink below its name, so a long folder name never widens the list, and
+   it ends in an ellipsis like a title (rows already could). Nothing is hidden to make it fit: width_sweep.cjs
+   drags the real divider from its minimum to its maximum and checks the fit (each rule here is killed there). */
+.sx-tools-line { flex-wrap: wrap; row-gap: 6px; }
+.sx-tools-line .sx-quiet { flex: 1 0 100%; }
+.sx-gh-row .sx-gh, .sx-gh .fold { min-width: 0; }
+.sx-gh .fold .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sx-org-note.hidden { display: none; }
+.sx-inline { display: grid; gap: 8px; padding: 10px 12px 12px; margin: 6px 0; border-radius: 10px; background: var(--qopen); }
+.sx-inline-label { font: 600 13px/1.3 var(--body); color: var(--ink); }
+.sx-inline-hint { margin: 0; font-size: 12.5px; color: var(--sub); }
+.sx-inline-acts { display: flex; flex-wrap: wrap; gap: 8px; }
+.sx-pop { position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 16px)); }
+.sx-pop .sx-pop-note { margin: 0; padding: 8px 12px; font-size: 13px; color: var(--sub); }
+.sx-pop [role='menuitemradio'] { min-height: 40px; padding: 0 12px; border-radius: 8px; text-align: left; font: 500 15px/1.2 var(--body); color: var(--ink); }
+.sx-pop [role='menuitemradio'][aria-checked='true']::after { content: ' (here)'; color: var(--sub); }
+.sx-pop [role='menuitemradio']:hover, .sx-pop [role='menuitemradio']:focus-visible { background: var(--qopen); }
+@media (any-pointer: coarse) {
+  .sx-r-more { width: 44px; height: 44px; }
+  .sx-pop [role='menuitemradio'], .sx-pop [role='menuitem'], .sx-new-folder, .sx-inline .cx-btn { min-height: 44px; }
+}
+
+/* Q1 (23:40): a question waits at the end of the conversation, out of view. */
+.sx-goq { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 6px 6px 6px 12px; border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--panel-border)); background: var(--panel); font-size: 14px; color: var(--ink); }
+.sx-goq[hidden] { display: none; }
+@media (any-pointer: coarse) { .sx-goq .cx-btn { min-height: 44px; } }

package/server/web-control/panes/today-actions.js

@@ -267,6 +267,7 @@
     if (window.requestAnimationFrame) window.requestAnimationFrame(go); else go();
   }
   function fit() {
+    if (O.open) panCheck();
     if (KB.frame || !O.open) return;
     if (!window.requestAnimationFrame) return applyFit();   // every browser with visualViewport has frames
     KB.frame = window.requestAnimationFrame(applyFit);
@@ -321,6 +322,49 @@
   // opt.from: a session opened from the pet's list ({ scroll }), which gets Back to sessions and its own history entry,
   // so the phone's Back returns to the list too (Miles's iPhone, 11/07). opt.again: the list shown again from there,
   // its entry already current.
+  // Miles 11/10 20:16 (IMG_0570): with the panel open on his Duo, the panel and the page under it moved together. Two
+  // stories fit: the page scrolled behind the panel, or the visible area panned past the layout viewport (the page
+  // drawn at 0.85). These numbers tell them apart, so nothing is fixed on a guess (lead 20:26): while the panel is open,
+  // ONE layout report per open when window.scrollY, visualViewport.pageTop or visualViewport.offsetTop first changes,
+  // with the values at open and now, the panel's top and bottom, and whether a keyboard was up. layoutCrumb adds
+  // innerHeight (ih), the visible height (vvh) and scale (vvs) itself. Numbers only, inside layoutCrumb's caps.
+  var PAN = { at: null, sent: false, fn: null };
+  function panNum(v) { return typeof v === 'number' && isFinite(v) ? Math.round(v) : null; }
+  function panOffsets() {
+    var vv = window.visualViewport;
+    return { sy: panNum(window.scrollY), pt: vv ? panNum(vv.pageTop) : null, ot: vv ? panNum(vv.offsetTop) : null,
+      sx: panNum(window.scrollX), pl: vv ? panNum(vv.pageLeft) : null, ol: vv ? panNum(vv.offsetLeft) : null };
+  }
+  function panState() {
+    var r = layer && typeof layer.getBoundingClientRect === 'function' ? layer.getBoundingClientRect() : null, o = panOffsets();
+    var rail = document.querySelector ? document.querySelector('.rail') : null, rr = rail && rail.getBoundingClientRect ? rail.getBoundingClientRect() : null;
+    o.pTop = r ? panNum(r.top) : null; o.pBot = r ? panNum(r.bottom) : null; o.pL = r ? panNum(r.left) : null; o.pR = r ? panNum(r.right) : null;
+    o.railL = rr ? panNum(rr.left) : null; o.railR = rr ? panNum(rr.right) : null;
+    return o;
+  }
+  // Runs on the window's scroll and, through fit, on every visualViewport resize and scroll while the panel is open.
+  // The panel's box is read only once something has moved, and only once per open.
+  function panCheck() {
+    // PAN.at is set only between open and close (close stops the watch before it clears O.open).
+    if (PAN.sent || !PAN.at) return;
+    var moved = panOffsets(), was = PAN.at;
+    // Up and down (sy, pt, ot) and, like split-drag, sideways (sx, pl, ol: Q1 20:44, lead 20:4x).
+    if (moved.sy === was.sy && moved.pt === was.pt && moved.ot === was.ot && moved.sx === was.sx && moved.pl === was.pl && moved.ol === was.ol) return;
+    PAN.sent = true;
+    var now = panState();
+    if (W.layoutCrumb) W.layoutCrumb('ta-pan', { kind: O.open.kind, kb: !!KB.on, sy0: was.sy, pt0: was.pt, ot0: was.ot, sy: now.sy, pt: now.pt, ot: now.ot,
+      sx0: was.sx, pl0: was.pl, ol0: was.ol, sx: now.sx, pl: now.pl, ol: now.ol,
+      pTop: now.pTop, pBot: now.pBot, pL: now.pL, pR: now.pR, railL: now.railL, railR: now.railR });
+  }
+  function panWatch(on) {
+    if (on) {
+      PAN.at = panOffsets(); PAN.sent = false; PAN.fn = panCheck;
+      window.addEventListener('scroll', panCheck, { passive: true });
+    } else if (PAN.fn) {
+      if (window.removeEventListener) window.removeEventListener('scroll', panCheck, { passive: true });
+      PAN.fn = null; PAN.at = null;
+    }
+  }
   function open(kind, key, opener, opt) {
     opt = opt || {};
     build();
@@ -334,6 +378,7 @@
     document.documentElement.classList.add('ta-open');
     var shell = $('app-shell'); if (shell) shell.setAttribute('inert', '');
     listenViewport(true); applyFit();
+    panWatch(true);
     // The entry names what is open, so a reload can open it again and Back still closes it (restore below).
     var entry = { cosTodayOverlay: 1, kind: kind, key: O.open.key };
     if (O.back) entry.from = 'pet';
@@ -390,6 +435,7 @@
   function close(how) {
     if (!O.open) return;
     stopSession();
+    panWatch(false);
     O.open = null;
     if (layer) layer.hidden = true;
     unfit();

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

@@ -2098,7 +2098,9 @@
     chatGrow(box);
   }
   function chatGrow(box) {
-    var vv = window.visualViewport, h = vv ? vv.height : window.innerHeight || 600;
+    // The visible height the one way Control Web reads it (COSWeb.viewportFit): a visible height of 0 (the unfolded Duo
+    // after a keyboard closed, 11/10) reads as innerHeight, never as a 96 px box.
+    var fit = W.viewportFit ? W.viewportFit() : null, h = fit ? fit.height : window.innerHeight || 600;
     var max = Math.max(96, Math.min(320, Math.round(h * 0.42)));
     box.style.height = 'auto';
     box.style.height = Math.min(box.scrollHeight + 2, max) + 'px';
@@ -2111,9 +2113,11 @@
   // With the on-screen keyboard up, keep the text box and the Plan row inside what is visible: scroll only as much as
   // needed, never past the top of the box. On a folded or unfolded Duo the visual viewport tells us what is visible.
   function chatKeepInView() {
-    var box = $('wk-chat-text'), row = $('wk-cmp-actions'), vv = window.visualViewport;
+    var box = $('wk-chat-text'), row = $('wk-cmp-actions'), fit = W.viewportFit ? W.viewportFit() : null;
     if (!box || !row || document.activeElement !== box) return;
-    var top = vv ? vv.offsetTop : 0, height = vv ? vv.height : window.innerHeight;
+    // Through viewportFit, so a visible height of 0 (11/10) never puts the visible bottom above its top and scrolls the
+    // page away; it reads as innerHeight from offset 0.
+    var top = fit ? fit.top : 0, height = fit ? fit.height : window.innerHeight;
     var bar = document.querySelector('.topbar'), barBottom = bar ? bar.getBoundingClientRect().bottom : 0;
     var visTop = Math.max(top, barBottom > top ? barBottom : top) + 6, visBottom = top + height - 8;
     var boxTop = box.getBoundingClientRect().top, rowBottom = row.getBoundingClientRect().bottom, delta = 0;