@gotcos/glasses-server 6.99.29 → 7.0.7

package/server/web-control/control.css

@@ -6,7 +6,8 @@
 
 :root {
   --tint: var(--accent);
-  --tertiary: #8b8378;
+  /* 6.99.30 (design QA): #8b8378 measured 3.29:1 on the light page; this reads at 4.5:1 or better. Dark is unchanged. */
+  --tertiary: #6e675d;
   --gold: #b98a3e;
   --green: #2f7d4f;
   --amber: #a8641c;
@@ -64,8 +65,9 @@
   .rail-settings { min-height: 40px; }
 }
 
-/* Full rail (Control's at window width 1100 and up): name and story beside the glyph. */
-@media (min-width: 1100px) {
+/* Full rail (Control's at window width 1100 and up, on a screen tall enough for it: the same clause as app.css's desktop
+   step, so a wide short window keeps the icon rail and its short-screen sizes). */
+@media (min-width: 1100px) and (min-height: 721px) {
   .app-shell { grid-template-columns: 248px minmax(0, 1fr); }
   .rail { align-items: stretch; padding: calc(var(--safe-top) + 18px) 12px 14px; gap: 2px; }
   .rail-head { flex-direction: row; align-items: center; gap: 8px; padding: 0 8px 14px; }
@@ -145,7 +147,7 @@
 .cx-btn:disabled { opacity: 0.45; }
 .cx-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
 .cx-btn.quiet { border-color: var(--panel-border); }
-@media (max-width: 599px) { .cx-btn { height: 36px; font-size: 14.5px; } }
+@media (max-width: 599px) { .cx-btn { font-size: 14.5px; } }
 
 /* ── text switch (COSBrand: words with a 2pt gold rule, never pills) ── */
 .cx-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 12px 0 10px; }
@@ -161,7 +163,6 @@
 .cx-check input { width: 16px; height: 16px; accent-color: var(--gold); }
 @media (max-width: 599px) {
   .cx-search { max-width: none; flex-basis: 100%; order: 3; }
-  .cx-search .field { min-height: 40px; font-size: 16px; }
   .cx-switch button { font-size: 15px; padding: 8px 0 9px; }
 }
 
@@ -280,7 +281,7 @@
 .cx-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--panel-border); font-size: 13px; color: var(--ink); }
 .cx-chip button, .cx-x { width: 24px; height: 24px; border-radius: 12px; color: var(--sub); font-size: 15px; line-height: 1; display: grid; place-items: center; }
 .cx-chip.more { padding-right: 10px; color: var(--sub); }
-@media (max-width: 599px) { .cx-inline-form .field { min-height: 40px; font-size: 16px; } .cx-chip { height: 32px; } }
+@media (max-width: 599px) { .cx-chip { height: 32px; } }
 
 /* ── Settings (Control's hub categories) ──────────────── */
 .cx-set-cat { margin-top: 8px; }
@@ -302,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; }
@@ -323,3 +332,25 @@ html, body { overscroll-behavior-y: none; }
 .intake-meeting { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
 .intake-n { font: 600 12px/1.6 var(--mono); color: var(--sub); }
 .intake-foot { margin: 6px 0 0; font-size: 12.5px; color: var(--tertiary); }
+
+/* 6.99.30 (design QA, the unfolded Duo at 1430 px): Settings and Dictation are forms and short reads, not boards, so
+   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

@@ -122,6 +122,8 @@
             <div>
               <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>
@@ -160,6 +162,7 @@
             <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-later" class="next-later hidden" aria-label="Later today"></div>
           </section>
           </div>
           </div>
@@ -180,7 +183,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">
@@ -196,6 +199,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>
@@ -265,6 +269,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>
@@ -280,7 +285,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)); 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)); display: flex; flex-direction: column; }
+  .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 ───────────────────────────────────── */
@@ -62,6 +83,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; }
@@ -88,6 +112,9 @@
 .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. */
@@ -97,6 +124,18 @@
   .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; }
@@ -190,7 +229,7 @@
 .cc-prep-add:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
 .cc-prep-acts .cx-btn { height: 40px; }
 @media (max-width: 480px) {
-  .cc-prep-acts .cx-btn { height: 44px; min-width: 44px; }
+  .cc-prep-acts .cx-btn { min-width: 44px; }
   .cc-prep-head-acts button { min-height: 44px; }
 }
 .cc-prep-note { margin: 0; font-size: 13px; }
@@ -210,9 +249,15 @@
    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; }
+/* 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; }
 .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); }
 .att-composer.dragging { outline: 2px dashed var(--accent); outline-offset: 4px; }
-.cc-chips .att-limit { flex-basis: 100%; margin: 0 2px; font-size: 12.5px; line-height: 1.35; color: var(--sub); }
+.cc-chips .att-limit { flex-basis: 100%; min-width: 0; max-width: 100%; margin: 0 2px; font-size: 12.5px; line-height: 1.35; color: var(--sub); white-space: normal; overflow-wrap: anywhere; }