@gotcos/glasses-server 6.99.33 → 7.0.18

package/server/web-control/control.css

@@ -303,6 +303,14 @@ button.cx-set-row:hover { background: var(--qopen); }
 .cx-set-row .cx-set-time { width: 148px; }
 .cx-set-row .cx-set-day { width: 150px; padding-right: 36px; background-position: calc(100% - 20px) 17px, calc(100% - 15px) 17px; }
 .cx-set-row .cx-set-steer { flex: none; width: 46%; min-width: 180px; min-height: 64px; }
+/* 7.0.5 extra folders for previews: a folder name wraps, never pushes the row sideways; 16px input keeps iOS from zooming. */
+.cx-set-folder .pf-name { font: 400 14px/1.35 var(--mono); overflow-wrap: anywhere; }
+.cx-set-folder .cx-btn { flex: none; min-height: 44px; }
+.pf-add { flex-wrap: wrap; }
+.pf-add .cx-set-text { flex-basis: 100%; }
+.pf-add-line { display: flex; gap: 8px; width: 100%; min-width: 0; }
+.pf-add-line input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; font-size: 16px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--panel, transparent); color: var(--ink); box-sizing: border-box; }
+.pf-add-line .cx-btn { flex: none; min-height: 44px; }
 @media (max-width: 599px) {
   .cx-set-row:has(.cx-set-steer) { flex-wrap: wrap; }
   .cx-set-row .cx-set-steer { width: 100%; min-width: 0; }
@@ -329,3 +337,20 @@ html, body { overscroll-behavior-y: none; }
    their content stops at 720 px instead of running lines to 137 characters; prose lines stop at about 68 characters. */
 #pane-settings, #pane-dictation { max-width: 720px; }
 .cx-set-desc, .cx-set-blurb, .wk-fine { max-width: 68ch; }
+
+/* Duo tables: every markdown pipe table (Sessions reader, Today's session sheet, Meetings notes and Ask, Memories
+   answers). app.js tableFit sets each column's floor; this keeps words whole. The panes' own text sets
+   overflow-wrap:anywhere, which lets a table squeeze a column to one letter, so cells go back to break-word: a column is
+   never narrower than its longest word, and only a .tf-long token (a URL, a hash) breaks inside. A table wider than its
+   box scrolls inside it, never the page, with the first column held at the left edge. */
+.tf-wrap { overflow-x: auto; max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
+table.tf th, table.tf td { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
+table.tf .tf-min { display: block; }
+table.tf .tf-long { overflow-wrap: anywhere; }
+table.tf.tf-key tr > :first-child { white-space: nowrap; }
+table.tf tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--tf-bg, var(--panel)); }
+/* A held cell keeps its own borders only in the separated model; in a collapsed table the lines stay behind. */
+table.tf-grid { border-collapse: separate; border-spacing: 0; }
+table.tf-grid th, table.tf-grid td { border: 0; border-right: 1px solid var(--tf-line, var(--hairline)); border-bottom: 1px solid var(--tf-line, var(--hairline)); }
+table.tf-grid tr > :first-child { border-left: 1px solid var(--tf-line, var(--hairline)); }
+table.tf-grid > :first-child > tr:first-child > * { border-top: 1px solid var(--tf-line, var(--hairline)); }

package/server/web-control/index.html

@@ -11,6 +11,8 @@
   <meta name="apple-mobile-web-app-title" content="COS">
   <title>COS Control</title>
   <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">
   <link rel="stylesheet" href="/control/app.css">
   <link rel="stylesheet" href="/control/control.css">
   <link rel="stylesheet" href="/control/panes/speakers.css">
@@ -55,7 +57,11 @@
     <div class="auth-card">
       <svg class="mark" aria-hidden="true"><use href="#i-mark"/></svg>
       <h1 id="auth-title">Connect this browser</h1>
-      <p>COS runs on your Mac. Sign in once and this browser stays connected for 7 days.</p>
+      <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>
+        <button type="button" class="btn primary block" id="auth-retry">Try again</button>
+      </div>
       <form id="auth-form">
         <div id="auth-code-block">
           <label for="auth-code">Sign-in code</label>
@@ -114,6 +120,8 @@
       </header>
 
       <main class="workspace" id="workspace">
+        <!-- W1: the Mac not answering, and the sign-in ending soon (app.js "Mac reachability and sign-in lifetime") -->
+        <div id="conn-notice" class="conn-notice" hidden></div>
         <!-- SESSION QUESTIONS (panes/questions.js, 6.99.12): over every pane while one waits -->
         <div id="sq-host" class="sq-host" aria-live="polite" hidden></div>
         <!-- TODAY -->
@@ -123,6 +131,7 @@
               <h1 class="pane-title">Today</h1>
               <p id="today-date" class="today-date"></p>
               <p id="today-weather" class="today-weather hidden"></p>
+              <div class="today-live"><button type="button" id="today-refresh" class="link-btn today-refresh" data-today-refresh>Refresh</button><span id="today-live-note" class="today-live-note" aria-hidden="true"></span><span id="today-live-status" class="sr-only" role="status" aria-live="polite"></span></div>
             </div>
             <button type="button" class="ask-bar" data-open-ask>
               <svg class="icon"><use href="#i-ask"/></svg>
@@ -135,6 +144,10 @@
           <div class="today-cols">
           <div class="today-main">
           <div id="today-story" class="story-skel" aria-live="polite"><div class="skeleton"></div><div class="skeleton" style="width:82%"></div><div class="skeleton" style="width:58%"></div></div>
+          <form id="today-ask" class="cc-composer today-ask hidden" autocomplete="off" aria-label="Ask about this summary">
+            <textarea class="field cc-input" id="today-ask-input" rows="1" maxlength="2000" placeholder="Ask about this or steer a session" aria-label="Ask about this summary"></textarea>
+            <div class="cc-buttons"><button type="submit" class="cx-btn primary cc-ask">Send</button></div>
+          </form>
           <section class="run-panel" aria-labelledby="run-title">
             <div class="panel-head">
               <h2 id="run-title" class="panel-title">Running<span id="run-count" class="count"></span></h2>
@@ -161,6 +174,8 @@
             <div class="panel-head"><h2 id="next-title" class="panel-title">Next up</h2></div>
             <div id="next-body" class="next-up"></div>
             <div id="next-actions" class="next-actions"></div>
+            <div id="next-first-prep" class="next-first-prep hidden"></div>
+            <div id="next-later" class="next-later hidden" aria-label="Later today"></div>
           </section>
           </div>
           </div>
@@ -181,7 +196,7 @@
             </header>
             <div class="cx-controls sx-views" id="sessions-views"></div>
             <div class="split sx-split" id="sessions-split">
-              <div class="split-list">
+              <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">
@@ -197,6 +212,7 @@
                 <div id="sessions-hooks"></div>
                 <div id="sessions-list"></div>
               </div>
+              <div class="sx-handle" id="sessions-handle" role="separator" aria-orientation="vertical" aria-controls="sessions-list-col" aria-label="Session list width" tabindex="0" title="Drag to resize. Double-tap or double-click to reset."></div>
               <div class="reader sx-reader" id="session-reader"><p class="reader-placeholder">Pick a session to read it and send it a turn.</p></div>
             </div>
             <div class="sx-usage hidden" id="sessions-usage"></div>
@@ -266,6 +282,7 @@
   <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>
@@ -281,7 +298,8 @@
     "settings": "/control/panes/settings.js",
     "memories": "/control/panes/memories.js",
     "todayActions": "/control/panes/today-actions.js",
-    "readerMedia": "/control/panes/reader-media.js"
+    "readerMedia": "/control/panes/reader-media.js",
+    "preview": "/control/panes/preview.js"
   }</script>
   <!-- The Knowledge graph explorer, loaded by panes/memories.js when the graph first opens. -->
   <script type="application/json" id="memories-graph-assets">{

package/server/web-control/memory-review.js

@@ -0,0 +1,100 @@
+/* COS Control Web: what counts as "Needs review" in Memories. The one predicate (Miles 2026-11-08: "We
+   should only tag memories that need actual review with that status").
+
+   Loaded by index.html before app.js, so the Memories pane reads it as window.COSMemoryReview, and imported by the
+   server (server/lib/learning-needs-you.ts) for the count it hands Today, the rail story and the To review tab. The
+   producer is MU's `learning_events.py needs-you` (review_state there); the case table REVIEW_CASES in
+   memory-review.test.ts mirrors tests/test_memory_review_state.py in MU, case for case. Change both together.
+
+   An item needs review only when it holds a decision only the owner can make, with a real next step:
+     rule_ready     a suggested rule AT or OVER its promotion bar (0.8): approve, edit or dismiss. Below the bar it
+                    cannot be promoted, so Dismiss is the only action: it is Learning, shown with its confidence and
+                    never counted, until its confidence reaches the bar. `low_confidence` is the older producer's name
+                    for the same suggestion and is judged by its confidence the same way.
+     attribution    a decision that reports what a named person said, with no attribution: whose words were they.
+     scope          a decision or correction with no domain, so recall cannot route it.
+     contradiction  two memories that disagree (not produced yet).
+     candidate      a governed memory awaiting acceptance, or a quarantined one awaiting release or delete.
+     prune_ready    a memory the nightly retention pass would quarantine; it waits for Accept or Quarantine.
+   A decision of accepted, dismissed or pruned moves an item to history. Any gate this file does not name is Learning,
+   never counted. */
+(function (root) {
+  'use strict';
+  // The bar is the producer's: learning_events.py RULE_PROMOTION_BAR, carried as `bar` on the needs-you block and on
+  // each rule item. This copy is only the fallback for a block that does not carry one (an older producer); the parity
+  // test in memory-review.test.ts reads the Python constant and fails if the two ever differ.
+  var RULE_BAR = 0.8;
+  var RULE_GATES = { rule_ready: 1, low_confidence: 1 };
+  var DECISION_GATES = { attribution: 1, scope: 1, contradiction: 1, candidate: 1, prune_ready: 1 };
+  var CLOSING = { accepted: 1, dismissed: 1, pruned: 1 };
+  var NEEDS = 'needs_review', LEARNING = 'learning', HISTORY = 'history';
+  function own(map, key) { return typeof key === 'string' && Object.prototype.hasOwnProperty.call(map, key); }
+  function isNum(v) { return typeof v === 'number' && isFinite(v); }
+
+  /** needs_review, learning or history for one item, from its gate, confidence and latest decision. */
+  function reviewState(gate, confidence, decision, bar) {
+    if (own(CLOSING, decision)) return HISTORY;
+    if (own(RULE_GATES, gate)) return isNum(confidence) && confidence >= (isNum(bar) ? bar : RULE_BAR) ? NEEDS : LEARNING;
+    if (own(DECISION_GATES, gate)) return NEEDS;
+    return LEARNING;
+  }
+  /** The bar a block was judged with: its own `bar`, else the fallback. */
+  function barOf(block) { return block && typeof block === 'object' && isNum(block.bar) ? block.bar : RULE_BAR; }
+  /** The same, for a needs-you item; `decision` (a decision made on this page) wins over one on the item. The item's own
+   *  `bar` wins, then `blockBar` (the block it came in), then the fallback. */
+  function itemState(item, decision, blockBar) {
+    if (!item || typeof item !== 'object') return LEARNING;
+    return reviewState(item.gate, item.confidence, decision || item.decision, isNum(item.bar) ? item.bar : blockBar);
+  }
+  function needsReview(item, decision, blockBar) { return itemState(item, decision, blockBar) === NEEDS; }
+
+  /** A needs-you block whose items are only what needs review. A below-bar suggestion from an older producer moves to
+   *  `learning` and leaves `count`; the count keeps every needs-review item past the shown cap. Never mutates. */
+  function normalizeBlock(block) {
+    if (!block || typeof block !== 'object' || !Array.isArray(block.items)) return block || null;
+    var keep = [], moved = [], bar = barOf(block);
+    block.items.forEach(function (it) { (needsReview(it, null, bar) ? keep : moved).push(it); });
+    var out = {};
+    Object.keys(block).forEach(function (k) { out[k] = block[k]; });
+    out.items = keep;
+    if (isNum(block.count)) out.count = Math.max(keep.length, block.count - moved.length);
+    if (moved.length && block.gates && typeof block.gates === 'object') {
+      var gates = {};
+      Object.keys(block.gates).forEach(function (g) { gates[g] = block.gates[g]; });
+      moved.forEach(function (it) { var g = it && it.gate; if (own(gates, g) && isNum(gates[g])) { gates[g] -= 1; if (gates[g] <= 0) delete gates[g]; } });
+      out.gates = gates;
+    }
+    var learnt = moved.filter(function (it) { return itemState(it, null, bar) === LEARNING && it && typeof it === 'object' && own(RULE_GATES, it.gate); });
+    if (learnt.length || Array.isArray(block.learning)) {
+      out.learning = learnt.concat(Array.isArray(block.learning) ? block.learning : []);
+      out.learning_count = (isNum(block.learning_count) ? block.learning_count : (Array.isArray(block.learning) ? block.learning.length : 0)) + learnt.length;
+    }
+    return out;
+  }
+  /** The shown items that still need review, leaving out any decided on this page (`decisions`: lesson_id to decision). */
+  function openItems(block, decisions) {
+    var d = decisions || {}, bar = barOf(block);
+    return block && Array.isArray(block.items) ? block.items.filter(function (it) { return needsReview(it, it && d[it.lesson_id], bar); }) : [];
+  }
+  /** The count every surface shows (Today, the rail, the To review tab): open shown items, else count capped by limit. */
+  function count(block, decisions) {
+    if (!block || typeof block !== 'object') return null;
+    if (Array.isArray(block.items)) return openItems(block, decisions).length;
+    if (isNum(block.count)) return isNum(block.limit) ? Math.min(block.count, block.limit) : block.count;
+    return null;
+  }
+  /** Every item that needs review, past the shown cap (the "of N" in "Next 7 of N"). */
+  function total(block) {
+    if (!block || typeof block !== 'object') return null;
+    if (isNum(block.count)) return block.count;
+    return Array.isArray(block.items) ? openItems(block).length : null;
+  }
+  /** Below-bar suggestions to show under Learning, leaving out any decided on this page. */
+  function learningItems(block, decisions) {
+    var d = decisions || {}, bar = barOf(block);
+    return block && Array.isArray(block.learning) ? block.learning.filter(function (it) { return itemState(it, it && d[it.lesson_id], bar) === LEARNING; }) : [];
+  }
+
+  root.COSMemoryReview = { RULE_BAR: RULE_BAR, barOf: barOf, NEEDS: NEEDS, LEARNING: LEARNING, HISTORY: HISTORY, reviewState: reviewState, itemState: itemState,
+    needsReview: needsReview, normalizeBlock: normalizeBlock, openItems: openItems, count: count, total: total, learningItems: learningItems };
+})(typeof window !== 'undefined' ? window : globalThis);

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

@@ -6,21 +6,42 @@
 .msg-split[data-show='chat'] > .msg-left { display: none; }
 @media (min-width: 860px) {
   /* Two columns from 860 px (the unfolded Duo reads like the Mac): the list left, the chat right. */
-  .msg-split { display: grid; grid-template-columns: minmax(300px, 40%) minmax(0, 1fr); column-gap: 24px; align-items: start; }
+  .msg-split { display: grid; grid-template-columns: minmax(300px, 40%) 24px minmax(0, 1fr); column-gap: 0; align-items: start; }
   .msg-split[data-show] > .msg-left, .msg-split[data-show] > .msg-right { display: block; }
+  /* Duo tables: the divider (app.js splitKit, styled in app.css) is the 24 px column that was the gap; a dragged width
+     is a share of the split, clamped so the list keeps 240 px and the chat 440 px, room for its composer (messages.js SPLIT). */
+  .msg-split.split-sized { grid-template-columns: clamp(240px, var(--split-list-share, 40%), calc(100% - 464px)) 24px minmax(0, 1fr); }
+  .msg-split > .split-handle { display: flex; top: calc(56px + var(--safe-top, 0px)); height: calc(100dvh - 72px - var(--safe-top, 0px)); }
   /* The list column is narrower than the pane: its header's buttons go under the title instead of over it. */
   .msg-left .cx-hero .cx-actions { grid-column: 1 / -1; justify-content: flex-start; }
-  .msg-right { position: sticky; top: calc(56px + var(--safe-top, 0px)); height: calc(100vh - 72px - var(--safe-top, 0px)); height: calc(100dvh - 72px - var(--safe-top, 0px)); min-height: 420px; }
+  /* 7.0.2 (A4): the floor never asks for more than the screen has (420 px on a 539 px unfolded Duo with the keyboard up
+     pushed the composer under it). */
+  .msg-right { position: sticky; top: calc(56px + var(--safe-top, 0px)); height: calc(100vh - 72px - var(--safe-top, 0px)); height: calc(100dvh - 72px - var(--safe-top, 0px)); min-height: 420px; min-height: min(420px, calc(100dvh - 72px - var(--safe-top, 0px))); }
   .msg-right .cc { height: 100%; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px; overflow: hidden; }
   .msg-right .cc-head { padding: 14px 16px 12px; }
   .msg-right .cc-feed { flex: 1; overflow-y: auto; padding: 12px 16px 8px; overscroll-behavior: contain; }
-  .msg-right .cc-composer { position: static; padding: 10px 16px 12px; background: var(--panel); }
+  .msg-right .cc-composer { position: static; padding: 10px 16px 12px; background: var(--panel); flex: none; }
+  /* 7.0.2 (canary WARNING 1): the feed gives way, never the composer. With the 44 px floor on short touch screens (A8),
+     Model and Effort are 44 px and the composer about 235 px; the feed's 160 px floor then pushed the composer 21 px
+     out of the 467 px card at 951x539 and clipped its fine print. */
+  .msg-right .cc-feed { min-height: 0; }
+  /* 7.0.2 (A4): with an on-screen keyboard up for a field in the chat (cos-chat.js sets html.kb-chat; app.js publishes
+     the visible box, --vv-top and --vv-h), the chat column is the visible box, so its composer stays above the keyboard;
+     the header drops to one row. The Messages search box on the left never resizes it. */
+  html.kb-chat .msg-right { top: calc(var(--vv-top, 0px) + 8px); height: calc(var(--vv-h, 100dvh) - 16px); min-height: 0; }
+  html.kb-chat .msg-right .cc-head { padding: 6px 16px; }
+  html.kb-chat .msg-right .cc-sub, html.kb-chat .msg-right .cc-thread, html.kb-chat .msg-right .cc-head-acts, html.kb-chat .msg-right .cc-avatar.big { display: none; }
+  html.kb-chat .msg-right .cc-title { font-size: 18px; }
+  html.kb-chat .msg-right .cc-prep { max-height: 35%; }
 }
 
 /* Below 860 px the chat fills the screen, so the composer sits at the bottom even when the chat is short. */
 @media (max-width: 859px) {
   .msg-split[data-show='chat'] .cc { min-height: calc(100vh - 64px - var(--safe-top, 0px)); min-height: calc(100dvh - 64px - var(--safe-top, 0px)); display: flex; flex-direction: column; }
   .msg-split[data-show='chat'] .cc-feed { flex: 1; }
+  /* 7.0.2 (A4): with the keyboard up the composer sticks above it: --vv-below is the layout viewport under the visible
+     box (0 where the web view itself shrank). The home indicator is under the keyboard, so its inset goes. */
+  html.kb-chat .msg-split[data-show='chat'] .cc-composer { bottom: var(--vv-below, 0px); padding-bottom: 8px; }
 }
 
 /* ── the pinned row ───────────────────────────────────── */
@@ -35,10 +56,12 @@
 /* ── the chat ─────────────────────────────────────────── */
 .cc { --cc-you: color-mix(in srgb, var(--gold) 22%, var(--panel)); }
 .cc-head { display: flex; align-items: center; gap: 12px; padding: 14px 0 12px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
-.cc-head-text { min-width: 0; flex: 1; }
+.cc-head-text { min-width: 0; flex: 1 1 16rem; }
+/* W1 (open Duo, narrow chat column): the description was squeezed to four short lines beside All messages, Mark all read
+   and New thread. Below 16rem for the words, the links wrap beneath them. */
 .cc-title { font: 500 24px/1.1 var(--display); color: var(--ink); margin: 0; }
 .cc-sub { margin: 3px 0 0; font-size: 13px; line-height: 1.35; color: var(--sub); }
-.cc-head-acts { display: flex; gap: 14px; }
+.cc-head-acts { display: flex; flex-wrap: wrap; gap: 4px 14px; }
 .cc-head-acts .link-btn { min-height: 36px; font-size: 14px; font-weight: 500; }
 .cc-avatar { flex: none; width: 30px; height: 30px; border-radius: 8px; background: #2b211a; color: var(--gold); display: grid; place-items: center; }
 .cc-avatar .icon { width: 17px; height: 17px; }
@@ -62,6 +85,9 @@
 .cc-quote { display: block; width: 100%; text-align: left; margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--gold); background: var(--qopen); border-radius: 6px;
   font-size: 13px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .cc-answer { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
+/* 7.0.5: md() keeps an answer's lines as newlines, as the Messages reader shows them (.cx-card-body.md). Without this
+   every line and list of a finished answer ran together into one paragraph. The streaming partial is <p> and <br>. */
+.cc-answer.md { white-space: pre-wrap; }
 .cc-answer p { margin: 0 0 0.6em; }
 .cc-answer p:last-child { margin-bottom: 0; }
 .cc-wait { color: var(--sub); font-size: 14px; }
@@ -75,12 +101,45 @@
 .cc-move .cc-choice { font-weight: 500; }
 .cc-fine { margin: 8px 0 0; font-size: 12.5px; color: var(--tertiary); }
 .cc-fine.warn { color: var(--hot); }
+/* 7.0.9: a running answer's steps (its trail), newest last; once it ends, a quiet disclosure. A relayed message names the
+   session it went to. Every line wraps inside the card: the Duo folded is 382 px wide. */
+.cc-steps-slot:empty { display: none; }
+.cc-steps { list-style: none; margin: 8px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--hairline); display: grid; gap: 3px; min-width: 0; }
+.cc-step { font-size: 13px; line-height: 1.4; color: var(--sub); overflow-wrap: anywhere; min-width: 0; }
+.cc-step.prose { color: var(--ink); }
+.cc-step.more { color: var(--tertiary); }
+.cc-steps.live .cc-step:last-child { color: var(--ink); }
+.cc-steps-done { margin-top: 8px; min-width: 0; }
+.cc-steps-done > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font-size: 13px; color: var(--tertiary); }
+.cc-steps-done > summary::-webkit-details-marker { display: none; }
+.cc-steps-done > summary::before { content: ''; width: 0; height: 0; margin-right: 8px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent currentColor; transition: transform 160ms ease; }
+.cc-steps-done[open] > summary::before { transform: rotate(90deg); }
+@media (prefers-reduced-motion: reduce) { .cc-steps-done > summary::before { transition: none; } }
+.cc-relay { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hairline); min-width: 0; }
+.cc-relay-line { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
+.cc-relay-reply { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
+/* 7.0.9: older questions, closed until opened, above the chat. */
+.cc-archive { margin: 0 0 14px; padding: 0 0 10px; border-bottom: 1px solid var(--hairline); min-width: 0; }
+.cc-archive > summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; font-size: 13.5px; color: var(--sub); }
+.cc-archive > summary::-webkit-details-marker { display: none; }
+.cc-archive > summary::before { content: ''; width: 0; height: 0; margin-right: 8px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent currentColor; transition: transform 160ms ease; }
+.cc-archive[open] > summary::before { transform: rotate(90deg); }
+@media (prefers-reduced-motion: reduce) { .cc-archive > summary::before { transition: none; } }
+.cc-archive > .cc-fine { margin: 0 0 10px; }
+.cc-relay-who { display: block; font-size: 12.5px; color: var(--tertiary); margin-bottom: 2px; }
 .cc-steer { display: flex; gap: 8px; margin-top: 10px; }
 .cc-steer .field { flex: 1; min-width: 0; height: 36px; }
 
 /* ── the composer: two visible buttons, no key needed ─── */
 .cc-composer { position: sticky; bottom: 0; z-index: 5; background: var(--page); border-top: 1px solid var(--hairline); padding: 10px 0 calc(10px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
-  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; }
+  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
+/* W1 (Miles 2026-11-09, open Duo: "Ask COS, or drop a thought, a task, a ..." wrapped and clipped beside the camera,
+   clip, Ask and Drop in the three-column split). The row follows the composer's own width, not the screen: the words need
+   19rem (every composer placeholder is 36 characters or fewer), and when the buttons do not fit beside that they move to
+   the row below, at its right. Panes are resizable, so no breakpoint can know this. Same rule as the reader's box. */
+.cc-composer > .cc-input { flex: 1 1 19rem; min-width: 0; }
+.cc-composer > .cc-buttons { flex: none; margin-left: auto; }
+.cc-composer > .cc-chips, .cc-composer > .cc-foot, .cc-composer > .cc-note { flex: 1 1 100%; min-width: 0; }
 .cc-input { min-height: 44px; max-height: 140px; padding: 11px 12px; font-size: 16px; border-radius: 12px; }
 .cc-buttons { display: flex; gap: 8px; }
 .cc-buttons .cx-btn { height: 44px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
@@ -88,15 +147,30 @@
 .cc-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; color: var(--tertiary); }
 .cc-model { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); }
 .cc-model .field { width: auto; height: 34px; min-height: 34px; padding: 0 30px 0 10px; font-size: 13px; background-position: calc(100% - 17px) 14px, calc(100% - 12px) 14px; }
+/* 7.0.2 (A5): a long model name never widens the page (16 px on touch makes the select as wide as its longest option). */
+.cc-menus, .cc-model { min-width: 0; max-width: 100%; }
+.cc-model .field { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
 .cc-hint { flex: 1; min-width: 180px; }
 .cc-note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--hot); }
 /* A phone at 390 px: the box on its own row, the buttons under it, the menus under those. */
 @media (max-width: 480px) {
-  .cc-composer { grid-template-columns: minmax(0, 1fr); }
-  .cc-buttons { justify-content: flex-end; }
+  .cc-composer > .cc-input { flex-basis: 100%; }
+  .cc-composer > .cc-buttons { flex: 1 1 100%; justify-content: flex-end; }
   .cc-buttons .cx-btn { flex: 1; justify-content: center; }
   .cc-buttons .cc-attach { flex: none; }
 }
+/* 7.0.2 (A5): the composer the keyboard is for (cos-chat.js marks it .cc-kb) is compact while it is up (about 220 px
+   left folded, 200 unfolded): the box (3 lines at most), then two rows, clip with Ask and Drop, then Model and Effort
+   side by side, their names read from aria-label. Measured in WebKit at 382 px with an empty box: 171 px (was 252). The
+   camera (the clip's own menu offers Take Photo) and the fine print wait for the keyboard to close. */
+html.kb-up .cc-composer.cc-kb { gap: 6px 8px; padding-top: 6px; }
+html.kb-up .cc-kb .cc-input { max-height: 88px; }
+html.kb-up .cc-composer.cc-kb .cc-hint, html.kb-up .cc-composer.cc-kb .cc-camera { display: none; }
+html.kb-up .cc-kb .cc-foot { flex-wrap: nowrap; }
+html.kb-up .cc-kb .cc-menus { display: flex; flex-wrap: nowrap; width: 100%; gap: 8px; }
+html.kb-up .cc-kb .cc-model { flex: 1 1 0; }
+html.kb-up .cc-kb .cc-model > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+html.kb-up .cc-kb .cc-model .field { width: 100%; }
 
 /* ── 6.99.12: the menus, the clip and the chips ───────── */
 .cc-menus { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; }
@@ -210,13 +284,24 @@
    their own above the words, Take photo and the clip beside Fork and Send, and the limits in plain words under the chips. */
 .att-composer { flex-wrap: wrap; }
 .att-composer .att-files { flex: 1 1 100%; padding: 2px 0 4px; }
+/* W1 (Miles 2026-11-09 21:24, closed Duo screenshot: "Continue this session" wrapped onto two lines, the second
+   clipped). The phone's real width did not trip the 430 px rule below, so the row now follows the space the box itself
+   has: the words need at least 19rem (the longest placeholder, "Message this session (not an answer)", is about 277 px
+   in the kit font), and when the buttons do not fit beside that they move to the row below, at its right. Wide panes
+   keep the one-row layout. Measured in WebKit at 382, 440, 520 and 951 px: lanes/W1_evidence/duo_layout_*. */
+.att-composer > textarea { flex: 1 1 19rem; min-width: 0; }
+.att-composer > .composer-actions { margin-left: auto; }
 /* 6.99.30 (canary): the folded Sessions reader squeezed the box to about 101 px beside Fork, the clip and Send. Under
    430 px the words get their own full row and the buttons sit on the row below, at its right. */
 @media (max-width: 429px) {
   .att-composer > textarea { flex: 1 1 100%; }
-  .att-composer > .composer-actions { margin-left: auto; }
 }
 .att-composer .att-files.hidden { display: none; }
+.phone-approval-packet { flex: 1 1 100%; min-width: 0; }
+.phone-approval-packet label { display: block; font-size: 13px; margin-bottom: 4px; }
+.phone-approval-packet select { width: 100%; max-width: 100%; font: inherit; color: inherit; background: var(--card, transparent); }
+.phone-approval-packet pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.4 ui-monospace, monospace; max-height: 11rem; overflow-y: auto; margin: 6px 0; }
+.composer-actions:has([data-phone-offer]) { flex-wrap: wrap; }
 .att-clip, .ta-clip { display: inline-flex; gap: 6px; }
 .att-clip:empty { display: none; }
 .att-clip .cc-attach { height: 38px; width: 42px; border-radius: var(--radius-sm); }