@gotcos/glasses-server 7.0.7 → 7.0.18

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 -->
@@ -136,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>
@@ -162,6 +174,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-first-prep" class="next-first-prep hidden"></div>
             <div id="next-later" class="next-later hidden" aria-label="Later today"></div>
           </section>
           </div>

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

@@ -56,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; }
@@ -99,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; }
@@ -119,8 +154,8 @@
 .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; }
 }
@@ -249,13 +284,24 @@ html.kb-up .cc-kb .cc-model .field { width: 100%; }
    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); }