@gotcos/glasses-server 6.98.0 → 6.99.12

package/server/web-control/control.css

@@ -0,0 +1,312 @@
+/* COS Control Web: Control's own chrome and pane kit, loaded after app.css.
+   Measurements follow Control 0.5.366 (ActivityWindow.swift, COSBrand.swift): the 248pt rail with a
+   story under each name from 1100px, the icon rail below that, the navigation bar off Today, and
+   the shared pane pieces (tinted hero, text switch with a gold rule, rows, tags, YOU/COS cards).
+   Phone sizes are set for reading on the iPhone Duo; the desktop steps down toward Control's. */
+
+:root {
+  --tint: var(--accent);
+  --tertiary: #8b8378;
+  --gold: #b98a3e;
+  --green: #2f7d4f;
+  --amber: #a8641c;
+  --amber-bg: rgba(214, 140, 52, 0.14);
+  --green-bg: rgba(47, 125, 79, 0.12);
+  --gold-bg: rgba(185, 138, 62, 0.14);
+  --hairline: var(--row-border);
+}
+:root[data-theme='dark'] {
+  --tertiary: #8f8577;
+  --gold: #d9b06a;
+  --green: #6ccf8f;
+  --amber: #e8a46c;
+  --amber-bg: rgba(232, 164, 108, 0.16);
+  --green-bg: rgba(108, 207, 143, 0.14);
+  --gold-bg: rgba(217, 176, 106, 0.16);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --tertiary: #8f8577; --gold: #d9b06a; --green: #6ccf8f; --amber: #e8a46c;
+    --amber-bg: rgba(232, 164, 108, 0.16); --green-bg: rgba(108, 207, 143, 0.14); --gold-bg: rgba(217, 176, 106, 0.16);
+  }
+}
+
+/* Section tints (ActivitySection.tint). */
+[data-tint='messages'] { --tint: rgb(61, 122, 199); }
+[data-tint='speakers'] { --tint: rgb(199, 87, 99); }
+[data-tint='meetings'] { --tint: rgb(209, 133, 56); }
+[data-tint='memories'] { --tint: rgb(122, 92, 184); }
+[data-tint='threads'] { --tint: rgb(56, 145, 99); }
+[data-tint='sessions'] { --tint: rgb(110, 110, 122); }
+[data-tint='work'] { --tint: var(--gold); }
+[data-tint='dictation'] { --tint: rgb(168, 107, 61); }
+
+/* ── rail ─────────────────────────────────────────────── */
+.rail-head .rail-brand, .rail-story, .server-text { display: none; }
+.rail-text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
+.rail-settings { display: none; }
+.server-line { display: none; }
+.dot.bad { background: var(--hot); }
+#section-menu .rail-story.hot { color: var(--hot); }
+
+@media (min-width: 600px) {
+  .rail-head { display: flex; flex-direction: column; align-items: center; }
+  .rail-head .mark { width: 30px; height: 30px; margin-bottom: 10px; }
+  /* Icon mode: a hot story shows as a dot on the icon (Control's 8pt hot dot). */
+  .rail-btn.hot::after { content: ''; position: absolute; top: 7px; right: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--hot); }
+  .rail-settings { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; min-height: 46px; padding: 6px 0 4px; border-radius: 12px; color: var(--grey); }
+  .rail-settings .icon { width: 20px; height: 20px; }
+  .rail-settings[aria-current='page'] { background: var(--rail-active); color: var(--ink); }
+  .server-line { display: flex; align-items: center; justify-content: center; margin: 8px 0 0; }
+}
+@media (min-width: 600px) and (max-height: 720px) {
+  .rail-head .mark { width: 26px; height: 26px; margin-bottom: 6px; }
+  .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) {
+  .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; }
+  .rail-head .mark { width: 22px; height: 22px; margin: 0; }
+  .rail-head .rail-brand { display: inline; font: 500 20px/1 var(--display); color: var(--ink); }
+  .rail-btn { width: 100%; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 11px; padding: 8px 10px; min-height: 0; border-radius: 10px; border: 1px solid transparent; text-align: left; }
+  .rail-btn .icon { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--ink); }
+  .rail-text { align-items: flex-start; }
+  .rail-label { font: 600 14px/1.25 var(--body); letter-spacing: 0; color: var(--ink); }
+  .rail-story { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.3; color: var(--sub); margin-top: 1px; }
+  .rail-story.hot { color: var(--hot); }
+  .rail-btn[aria-current='page'] { background: var(--rail-active); border-color: var(--panel-border); box-shadow: none; }
+  .rail-btn.hot::after { display: none; }
+  .rail-btn .badge-dot { display: none; }
+  .rail-sep { width: auto; height: 12px; background: none; margin: 0; }
+  .rail-settings { width: auto; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 6px 10px; min-height: 0; font: 400 13px/1.2 var(--body); color: var(--accent); }
+  .rail-settings .icon { display: none; }
+  .rail-settings .rail-label { font: 500 13px/1.2 var(--body); color: var(--accent); }
+  .server-line { justify-content: flex-start; gap: 7px; padding: 4px 10px 0; margin: 0; }
+  .server-text { display: inline; font: 500 11.5px/1 var(--mono); color: var(--ok); }
+  .server-line.down .server-text { color: var(--hot); }
+}
+
+/* ── navigation bar (off Today, 600px and up) ─────────── */
+.navbar { display: none; }
+@media (min-width: 600px) {
+  .navbar:not(.hidden) {
+    display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 20;
+    height: calc(44px + var(--safe-top)); padding: var(--safe-top) calc(var(--gutter) + var(--safe-right)) 0 var(--gutter);
+    background: var(--page); border-bottom: 1px solid var(--rail-border);
+  }
+  .nav-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--panel-border); background: var(--btn-bg); color: var(--ink); font: 500 13px/1 var(--body); flex: none; }
+  .nav-btn .icon { width: 15px; height: 15px; stroke-width: 1.8; }
+  .nav-btn:disabled { opacity: 0.4; }
+  .crumbs { display: flex; align-items: center; min-width: 0; list-style: none; margin: 0 0 0 6px; padding: 0; font: 400 12.5px/1.2 var(--body); color: var(--sub); }
+  .crumb { white-space: nowrap; }
+  .crumb + .crumb::before { content: '›'; margin: 0 6px; color: var(--tertiary); }
+  .crumb.root { font-weight: 600; color: var(--ink); }
+  .crumb.current { font-weight: 600; color: var(--ink); }
+  .crumb.dim { color: var(--sub); }
+  .crumb.detail { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+  .navbar .grow { flex: 1; }
+  body.has-navbar .workspace { padding-top: 18px; }
+}
+@media (min-width: 600px) and (max-width: 759px) {
+  .nav-btn span { display: none; }
+  .nav-btn { padding: 0 8px; }
+}
+
+/* ── pane kit: hero ───────────────────────────────────── */
+.cx { --pad: 16px; }
+.cx-hero {
+  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
+  margin: 0 calc(-1 * var(--gutter)) 0; padding: 14px var(--gutter) 14px;
+  background: color-mix(in srgb, var(--tint) 4.5%, transparent); border-bottom: 1px solid var(--hairline);
+}
+.cx-glyph { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--tint) 14%, transparent); color: var(--tint); flex: none; }
+.cx-glyph .icon { width: 22px; height: 22px; }
+.cx-hero-text { min-width: 0; }
+.cx-title { font: 500 24px/1.15 var(--display); color: var(--ink); margin: 0; letter-spacing: -0.01em; }
+.cx-detail-line { margin: 3px 0 0; font-size: 13px; color: var(--sub); overflow-wrap: anywhere; }
+.cx-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
+.cx-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
+.cx-stat { display: inline-flex; align-items: baseline; gap: 6px; }
+.cx-stat b { font: 600 15px/1 var(--body); color: var(--ink); }
+.cx-stat span { font: 600 9.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--tertiary); }
+@media (max-width: 599px) {
+  .cx-hero { grid-template-columns: auto minmax(0, 1fr); margin-top: -4px; }
+  .cx-actions { grid-column: 1 / -1; justify-content: flex-start; }
+  .cx-glyph { width: 36px; height: 36px; border-radius: 10px; }
+  .cx-title { font-size: 22px; }
+}
+
+/* Quiet bordered button (Control's .bordered small). */
+.cx-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--ink); font: 500 13.5px/1 var(--body); white-space: nowrap; }
+.cx-btn .icon { width: 15px; height: 15px; stroke-width: 1.8; }
+.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; } }
+
+/* ── 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; }
+.cx-switch { display: inline-flex; align-items: baseline; gap: 14px; }
+.cx-switch-label { font-size: 12.5px; color: var(--sub); }
+.cx-switch button { position: relative; padding: 6px 0 7px; font: 500 14px/1 var(--body); color: var(--sub); }
+.cx-switch button[aria-pressed='true'] { color: var(--ink); font-weight: 600; }
+.cx-switch button[aria-pressed='true']::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--gold); }
+.cx-search { position: relative; flex: 1 1 220px; max-width: 320px; display: flex; align-items: center; gap: 8px; }
+.cx-search .field { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 9px; }
+.cx-search .cx-clear { font-size: 13px; color: var(--accent); font-weight: 600; flex: none; }
+.cx-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); margin-left: auto; }
+.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; }
+}
+
+/* Crossing line: "Recent 3 · Archive 2 days ->". */
+.cx-cross { font-size: 12.5px; color: var(--sub); margin: -2px 0 10px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
+.cx-cross .door { color: var(--gold); font-weight: 600; }
+.cx-cross .door { display: inline-flex; align-items: center; gap: 2px; }
+.cx-cross .door .icon { width: 12px; height: 12px; }
+
+/* ── rows ─────────────────────────────────────────────── */
+.cx-list { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; overflow: hidden; }
+.cx-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 12px; gap: 12px; align-items: start; width: 100%; padding: 13px 14px; text-align: left; color: inherit; position: relative; }
+.cx-row + .cx-row::before { content: ''; position: absolute; top: 0; left: 58px; right: 0; height: 1px; background: var(--hairline); }
+.cx-row:hover { background: var(--qopen); }
+.cx-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.cx-row-glyph { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--tint); background: color-mix(in srgb, var(--tint) 11%, transparent); position: relative; }
+.cx-row-glyph .icon { width: 17px; height: 17px; }
+.cx-row-glyph .cx-badge-icon { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 5px; background: var(--panel); border: 1px solid var(--panel-border); display: grid; place-items: center; color: var(--sub); }
+.cx-row-glyph .cx-badge-icon .icon { width: 11px; height: 11px; }
+.cx-row-body { min-width: 0; }
+.cx-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; }
+.cx-num { font: 600 12.5px/1.3 var(--body); color: var(--ink); }
+.cx-time { font: 400 11px/1.3 var(--mono); color: var(--tertiary); }
+.cx-tag { font: 600 9.5px/1.3 var(--mono); letter-spacing: 0.06em; color: var(--sub); }
+.cx-model { font: 400 11px/1.3 var(--mono); color: var(--sub); }
+.cx-att { display: inline-flex; align-items: center; gap: 3px; font: 400 11px/1.3 var(--mono); color: var(--sub); }
+.cx-att .icon { width: 12px; height: 12px; }
+.cx-row-title { margin-top: 3px; font-size: 15px; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
+.cx-row-title.strong { font-weight: 600; }
+.cx-row-sub { margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
+.cx-row-sub.three { -webkit-line-clamp: 3; }
+.cx-id { margin-top: 3px; font: 400 10.5px/1.3 var(--mono); color: var(--tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cx-row .chev { margin-top: 12px; }
+@media (min-width: 1100px) {
+  .cx-row-title { font-size: 13.5px; }
+  .cx-row-sub { font-size: 12px; }
+}
+
+/* Pills and capsules. */
+.cx-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 5px; font: 600 9.5px/1 var(--mono); letter-spacing: 0.05em; white-space: nowrap; background: var(--qopen); color: var(--sub); }
+.cx-pill.warn { background: var(--amber-bg); color: var(--amber); }
+.cx-pill.ok { background: var(--green-bg); color: var(--green); }
+.cx-pill.gold { background: var(--gold-bg); color: var(--gold); }
+.cx-cap { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: 10px; font: 600 11px/1 var(--body); white-space: nowrap; background: var(--qopen); color: var(--sub); }
+.cx-cap.ok { background: var(--green-bg); color: var(--green); }
+.cx-cap.gold { background: var(--gold-bg); color: var(--gold); }
+
+.cx-note { font-size: 12px; color: var(--tertiary); margin: 10px 2px 0; }
+.cx-empty { padding: 22px 16px; color: var(--sub); font-size: 14.5px; line-height: 1.45; }
+.cx-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--qopen); border: 1px solid var(--panel-border); color: var(--sub); font-size: 14px; margin: 8px 0; }
+.cx-notice.warn { color: var(--amber); }
+.cx-mark { background: color-mix(in srgb, var(--gold) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
+
+/* ── detail ───────────────────────────────────────────── */
+.cx-detail-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; padding: 16px 0 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; }
+.cx-detail-title { font: 600 19px/1.25 var(--body); color: var(--ink); margin: 0; }
+.cx-detail-meta { margin-top: 4px; font-size: 12.5px; color: var(--sub); }
+.cx-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; padding: 12px 14px 14px; margin-bottom: 12px; }
+.cx-card.you { background: var(--qopen); }
+.cx-card-label { font: 600 9.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--tertiary); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
+.cx-card-body { font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
+/* md() keeps line breaks as text (shared with the session reader), so the body keeps them too. */
+.cx-card-body.md { white-space: pre-wrap; }
+.cx-card-body.md strong { font-weight: 600; }
+.cx-card-body.md .quote { display: inline-block; padding-left: 10px; border-left: 3px solid var(--panel-border); color: var(--sub); }
+.cx-card-body.md p { margin: 0 0 0.7em; }
+.cx-card-body.md p:last-child { margin-bottom: 0; }
+.cx-card-body.md ul, .cx-card-body.md ol { margin: 0 0 0.7em; padding-left: 1.3em; }
+.cx-card-body.md h1, .cx-card-body.md h2, .cx-card-body.md h3 { font: 600 15px/1.3 var(--body); margin: 0.9em 0 0.4em; }
+.cx-card-body.md code { font: 400 13px/1.4 var(--mono); background: var(--qopen); padding: 0 3px; border-radius: 4px; }
+.cx-card-body.md pre { white-space: pre-wrap; font: 400 12.5px/1.45 var(--mono); background: var(--qopen); padding: 10px; border-radius: 8px; }
+.cx-strip-label { font: 600 9.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--tertiary); margin: 4px 0 8px; }
+.cx-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
+.cx-thumb { position: relative; width: 148px; height: 104px; border-radius: 10px; overflow: hidden; background: var(--qopen); border: 1px solid var(--panel-border); display: grid; place-items: center; color: var(--sub); }
+.cx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.cx-thumb .cx-thumb-badge { position: absolute; right: 6px; bottom: 6px; font: 600 10px/1 var(--mono); padding: 3px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: #fff; }
+.cx-thumb .cx-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
+.cx-thumb .cx-play .icon { width: 30px; height: 30px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }
+.cx-figure { margin: 0 0 14px; }
+.cx-figure img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--panel-border); display: block; }
+.cx-figure figcaption { font-size: 12.5px; color: var(--sub); margin-top: 6px; }
+.cx-find { position: sticky; top: 52px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 0; background: var(--page); }
+.cx-find .field { min-height: 34px; font-size: 14px; padding: 0 10px; border-radius: 9px; max-width: 260px; }
+.cx-find .cx-find-count { font: 400 11.5px/1 var(--mono); color: var(--sub); }
+.cx-find button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--panel-border); display: grid; place-items: center; color: var(--ink); }
+.cx-find button .icon { width: 14px; height: 14px; }
+.cx-turn.match .cx-card { background: color-mix(in srgb, var(--green) 7%, var(--panel)); }
+@media (max-width: 599px) { .cx-find { top: calc(var(--topbar-h) + var(--safe-top)); } .cx-thumb { width: 132px; height: 92px; } }
+
+/* ── Dictation and Dictionary ─────────────────────────── */
+.cx-pair { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.cx-pair .heard { color: var(--sub); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--sub) 60%, transparent); }
+.cx-pair .written { font-weight: 600; color: var(--ink); }
+.cx-pair .icon { width: 12px; height: 12px; color: var(--tertiary); }
+.cx-row-static { cursor: default; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; }
+.cx-row-static:hover { background: none; }
+.cx-col-title { font: 600 14px/1.2 var(--body); color: var(--ink); margin: 18px 2px 10px; }
+.cx-dict-cols { display: grid; gap: 4px 22px; }
+@media (min-width: 900px) { .cx-dict-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
+.cx-inline-form { display: flex; gap: 8px; margin-bottom: 10px; }
+.cx-inline-form .field { flex: 1; min-width: 0; min-height: 36px; font-size: 14px; padding: 0 10px; border-radius: 9px; }
+.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.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; } }
+
+/* ── Settings (Control's hub categories) ──────────────── */
+.cx-set-cat { margin-top: 8px; }
+.cx-set-group { margin: 10px 0 14px; }
+.cx-set-title { font: 600 13px/1.2 var(--body); color: var(--sub); margin: 12px 2px 4px; }
+.cx-set-blurb { font-size: 13px; color: var(--sub); margin: -4px 2px 8px; }
+.cx-set-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 10px 14px; text-align: left; color: inherit; position: relative; }
+.cx-set-row + .cx-set-row::before, .cx-set-row + .device-code + .cx-set-row::before { content: ''; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--hairline); }
+.cx-set-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.cx-set-name { font-size: 15px; font-weight: 500; color: var(--ink); }
+.cx-set-desc { font-size: 13px; color: var(--sub); overflow-wrap: anywhere; }
+.cx-set-value { font: 400 13px/1.3 var(--mono); color: var(--sub); text-align: right; max-width: 55%; overflow-wrap: anywhere; }
+.cx-set-choice .value { margin-left: auto; color: var(--accent); }
+.cx-set-mac { font-size: 12.5px; color: var(--tertiary); margin: 2px 2px 12px; }
+button.cx-set-row:hover { background: var(--qopen); }
+/* 6.99.11 COS reaching out: compact fields at the end of a Settings row. 16px text keeps iOS Safari from zooming. */
+.cx-set-row .cx-set-num, .cx-set-row .cx-set-time, .cx-set-row .cx-set-day { flex: none; width: auto; min-height: 40px; padding: 8px 10px; }
+.cx-set-row .cx-set-num { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
+.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; }
+@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; }
+}
+@media (min-width: 1100px) { .cx-set-name { font-size: 14px; } }
+@media (min-width: 1100px) { .rail-settings[aria-current='page'] { background: var(--rail-active); border: 1px solid var(--panel-border); } }
+
+/* Sign in another device: the QR the phone camera scans. */
+.device-code .qr { display: block; width: 200px; height: 200px; margin: 4px 0 8px; border-radius: 8px; border: 1px solid var(--panel-border); background: #fff; }
+.device-code .qr-hint { font-weight: 600; color: var(--ink); }
+
+/* iOS Safari pull-to-refresh reloaded the whole app on a downward drag at the top of a pane. */
+html, body { overscroll-behavior-y: none; }
+
+/* Today: From today's meetings. */
+.intake-body { padding: 4px 16px 14px; }
+.intake-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 14.5px; }
+.intake-row:first-child { border-top: 0; }
+.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); }

package/server/web-control/index.html

@@ -0,0 +1,275 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="color-scheme" content="light dark">
+  <meta name="theme-color" content="#f5f0e6" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#17120e" media="(prefers-color-scheme: dark)">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="COS">
+  <title>COS Control</title>
+  <link rel="icon" href="/control/mark.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/control/app.css">
+  <link rel="stylesheet" href="/control/control.css">
+  <link rel="stylesheet" href="/control/panes/speakers.css">
+  <link rel="stylesheet" href="/control/panes/meetings.css">
+  <link rel="stylesheet" href="/control/panes/work.css">
+  <link rel="stylesheet" href="/control/panes/sessions.css">
+  <link rel="stylesheet" href="/control/panes/cos-chat.css">
+  <link rel="stylesheet" href="/control/panes/questions.css">
+  <script src="/control/theme.js"></script>
+</head>
+<body>
+  <svg width="0" height="0" style="position:absolute" aria-hidden="true">
+    <symbol id="i-mark" viewBox="0 0 693 760"><g fill="currentColor"><circle cx="348" cy="100" r="100"/><circle cx="100" cy="240" r="100"/><circle cx="100" cy="520" r="100"/><path d="M 29.3 310.7 C 78.3 359.7 78.3 400.3 29.3 449.3 A 100 100 0 1 0 170.7 449.3 C 121.7 400.3 121.7 359.7 170.7 310.7 A 100 100 0 1 0 29.3 310.7 Z"/><circle cx="593" cy="240" r="100"/><circle cx="348" cy="380" r="100"/><path d="M 496.5 213.7 C 478.0 281.6 442.2 302.0 374.3 283.5 A 100 100 0 1 0 444.5 406.3 C 463.0 338.4 498.8 318.0 566.7 336.5 A 100 100 0 1 0 496.5 213.7 Z"/><circle cx="593" cy="520" r="100"/><circle cx="348" cy="660" r="100"/><path d="M 496.5 493.7 C 478.0 561.6 442.2 582.0 374.3 563.5 A 100 100 0 1 0 444.5 686.3 C 463.0 618.4 498.8 598.0 566.7 616.5 A 100 100 0 1 0 496.5 493.7 Z"/></g></symbol>
+    <symbol id="i-today" viewBox="0 0 24 24"><path d="M4 10.5 12 4l8 6.5V19a1.5 1.5 0 0 1-1.5 1.5H15v-6H9v6H5.5A1.5 1.5 0 0 1 4 19z"/></symbol>
+    <symbol id="i-meetings" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
+    <symbol id="i-work" viewBox="0 0 24 24"><path d="M3.5 13.5 6 6.5A2 2 0 0 1 7.9 5h8.2A2 2 0 0 1 18 6.5l2.5 7v4A2.5 2.5 0 0 1 18 20H6a2.5 2.5 0 0 1-2.5-2.5z"/><path d="M3.5 13.5H8l1 2h6l1-2h4.5M8 9h8M7.5 11.5h9"/></symbol>
+    <symbol id="i-sessions" viewBox="0 0 24 24"><rect x="3" y="4.5" width="18" height="15" rx="2.5"/><path d="m7 10 3 2.5L7 15M12.5 15H17"/></symbol>
+    <symbol id="i-more" viewBox="0 0 24 24"><circle cx="5.5" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="18.5" cy="12" r="1.4" fill="currentColor" stroke="none"/></symbol>
+    <symbol id="i-memories" viewBox="0 0 24 24"><path d="M12 3.5c.6 4.6 2.4 6.4 7 7-4.6.6-6.4 2.4-7 7-.6-4.6-2.4-6.4-7-7 4.6-.6 6.4-2.4 7-7z"/></symbol>
+    <symbol id="i-speakers" viewBox="0 0 24 24"><path d="M4 10v4M8 7v10M12 4v16M16 7v10M20 10v4"/></symbol>
+    <symbol id="i-dictation" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M8.5 21h7"/></symbol>
+    <symbol id="i-threads" viewBox="0 0 24 24"><circle cx="5.5" cy="17.5" r="2.2"/><circle cx="12" cy="6" r="2.2"/><circle cx="18.5" cy="17.5" r="2.2"/><path d="M6.6 15.6 10.9 7.9M13.1 7.9l4.3 7.7" stroke-dasharray="1.6 2.2"/><path d="M7.7 17.5h8.6"/></symbol>
+    <symbol id="i-refresh" viewBox="0 0 24 24"><path d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4.2h-4.2"/></symbol>
+    <symbol id="i-chev" viewBox="0 0 24 24"><path d="m9.5 6 6 6-6 6"/></symbol>
+    <symbol id="i-photo" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="14" rx="2.5"/><circle cx="9" cy="10" r="1.6"/><path d="m4 17 5-4.5 3.5 3 3-2.5 4.5 4"/></symbol>
+    <symbol id="i-video" viewBox="0 0 24 24"><rect x="3.5" y="6" width="12.5" height="12" rx="2.5"/><path d="m16 10.5 4.5-2.5v8L16 13.5"/></symbol>
+    <symbol id="i-doc" viewBox="0 0 24 24"><path d="M7 3.5h6.5L18 8v12a.5.5 0 0 1-.5.5h-10.5A.5.5 0 0 1 6.5 20V4a.5.5 0 0 1 .5-.5z"/><path d="M13.5 3.5V8H18M9 12.5h6M9 15.5h6"/></symbol>
+    <symbol id="i-clip" viewBox="0 0 24 24"><path d="m15.5 7.5-6.8 6.8a1.8 1.8 0 0 0 2.5 2.5l7.3-7.3a3.5 3.5 0 0 0-5-5l-7.6 7.6a5.2 5.2 0 0 0 7.4 7.4l5.7-5.7"/></symbol>
+    <symbol id="i-messages" viewBox="0 0 24 24"><path d="M4 7a2.5 2.5 0 0 1 2.5-2.5h11A2.5 2.5 0 0 1 20 7v7a2.5 2.5 0 0 1-2.5 2.5H10L5.5 20v-3.6A2.5 2.5 0 0 1 4 14z"/></symbol>
+    <symbol id="i-usage" viewBox="0 0 24 24"><path d="M4 20h16M7 16v-4M12 16V7M17 16v-7"/></symbol>
+    <symbol id="i-settings" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2"/><path d="M12 2.8v2.6M12 18.6v2.6M2.8 12h2.6M18.6 12h2.6M5.5 5.5l1.8 1.8M16.7 16.7l1.8 1.8M5.5 18.5l1.8-1.8M16.7 7.3l1.8-1.8"/></symbol>
+    <symbol id="i-ask" viewBox="0 0 24 24"><path d="m12 3 1.9 6.1L20 11l-6.1 1.9L12 19l-1.9-6.1L4 11l6.1-1.9z"/></symbol>
+    <symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
+    <symbol id="i-send" viewBox="0 0 24 24"><path d="M12 19V6M6.5 11.5 12 6l5.5 5.5"/></symbol>
+    <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>
+
+  <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>
+      <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>
+      <form id="auth-form">
+        <div id="auth-code-block">
+          <label for="auth-code">Sign-in code</label>
+          <input id="auth-code" class="field code-field" type="text" inputmode="text" autocomplete="one-time-code" autocapitalize="characters" spellcheck="false" maxlength="9" placeholder="K7P3-QX9M">
+          <p class="auth-foot" style="margin-top:8px">Scan the QR with your phone's camera. A browser that is already signed in shows one under Settings, Sign in another device. COS Control on your Mac shows one under Open COS on your phone. Or type the code shown with the QR.</p>
+          <p class="auth-foot">The glasses pairing code does not work here.</p>
+        </div>
+        <div id="auth-token-block" class="hidden">
+          <label for="auth-token">Pairing token</label>
+          <input id="auth-token" class="field" type="password" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="Paste the pairing token">
+          <button type="button" class="link-btn" id="auth-token-show" aria-controls="auth-token" aria-pressed="false">Show token</button>
+          <p class="auth-foot" style="margin-top:8px">In the COS menu-bar panel on your Mac, choose Copy pairing token. The copy clears after 60 seconds, so paste within a minute.</p>
+        </div>
+        <p id="auth-error" class="status-line error hidden" role="alert"></p>
+        <button type="submit" class="btn primary block">Connect</button>
+        <button type="button" class="link-btn" id="auth-switch">Use the pairing token instead</button>
+      </form>
+    </div>
+  </main>
+
+  <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>
+      <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>
+      <button type="button" class="rail-btn" data-pane="speakers" aria-label="Speakers"><svg class="icon"><use href="#i-speakers"/></svg><span class="rail-text"><span class="rail-label">Speakers</span><span class="rail-story" data-story="speakers"></span></span><span class="badge-dot hidden" data-badge="speakers"></span></button>
+      <button type="button" class="rail-btn" data-pane="meetings" aria-label="Meetings"><svg class="icon"><use href="#i-meetings"/></svg><span class="rail-text"><span class="rail-label">Meetings</span><span class="rail-story" data-story="meetings"></span></span><span class="badge-dot hidden" data-badge="meetings"></span></button>
+      <button type="button" class="rail-btn" data-pane="memories" aria-label="Memories"><svg class="icon"><use href="#i-memories"/></svg><span class="rail-text"><span class="rail-label">Memories</span><span class="rail-story" data-story="memories"></span></span><span class="badge-dot hidden" data-badge="memories"></span></button>
+      <button type="button" class="rail-btn" data-pane="threads" aria-label="Threads"><svg class="icon"><use href="#i-threads"/></svg><span class="rail-text"><span class="rail-label">Threads</span><span class="rail-story" data-story="threads"></span></span><span class="badge-dot hidden" data-badge="threads"></span></button>
+      <button type="button" class="rail-btn" data-pane="sessions" aria-label="Sessions"><svg class="icon"><use href="#i-sessions"/></svg><span class="rail-text"><span class="rail-label">Sessions</span><span class="rail-story" data-story="sessions"></span></span><span class="badge-dot hidden" data-badge="sessions"></span></button>
+      <button type="button" class="rail-btn" data-pane="work" aria-label="Work"><svg class="icon"><use href="#i-work"/></svg><span class="rail-text"><span class="rail-label">Work</span><span class="rail-story" data-story="work"></span></span><span class="badge-dot hidden" data-badge="work"></span></button>
+      <button type="button" class="rail-btn" data-pane="dictation" aria-label="Dictation"><svg class="icon"><use href="#i-dictation"/></svg><span class="rail-text"><span class="rail-label">Dictation</span><span class="rail-story" data-story="dictation"></span></span><span class="badge-dot hidden" data-badge="dictation"></span></button>
+      <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>
+    </nav>
+
+    <div class="main-col">
+      <!-- Control's navigation bar (ActivityWindow navigationBar): shown off Today, from 600px. -->
+      <nav class="navbar hidden" id="navbar" aria-label="Where you are">
+        <button type="button" class="nav-btn" id="nav-home" title="Activity home"><svg class="icon"><use href="#i-today"/></svg><span>Home</span></button>
+        <button type="button" class="nav-btn" id="nav-back" title="Go back one step"><svg class="icon"><use href="#i-back"/></svg><span>Back</span></button>
+        <ol class="crumbs" id="crumbs"></ol>
+        <span class="grow"></span>
+        <button type="button" class="nav-btn" id="nav-settings" aria-label="Open Activity settings"><svg class="icon"><use href="#i-settings"/></svg><span>Settings</span></button>
+      </nav>
+      <header class="topbar" id="topbar">
+        <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>
+          </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>
+      </header>
+
+      <main class="workspace" id="workspace">
+        <!-- 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 -->
+        <section id="pane-today" class="pane" data-title="Today">
+          <div class="pane-head with-ask">
+            <div>
+              <h1 class="pane-title">Today</h1>
+              <p id="today-date" class="today-date"></p>
+            </div>
+            <button type="button" class="ask-bar" data-open-ask>
+              <svg class="icon"><use href="#i-ask"/></svg>
+              <span class="ask-text">Ask COS or find a session</span>
+              <kbd class="kbd">⌘K</kbd>
+            </button>
+          </div>
+          <div id="today-rec"></div>
+          <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>
+          <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>
+              <button type="button" class="link-btn" data-goto="sessions">All sessions</button>
+            </div>
+            <div id="run-list"><div class="run-empty">Checking your agents</div></div>
+          </section>
+          </div>
+          <div class="today-side">
+          <section class="card" aria-labelledby="needs-title">
+            <div class="panel-head">
+              <h2 id="needs-title" class="panel-title">Needs you<span id="needs-count" class="count"></span></h2>
+            </div>
+            <div id="needs-list"><div class="skel-row"><div class="skeleton" style="width:70%"></div><div class="skeleton" style="width:40%"></div></div></div>
+          </section>
+          <section class="card hidden" id="intake-card" aria-labelledby="intake-title">
+            <div class="panel-head">
+              <h2 id="intake-title" class="panel-title">From today's meetings<span id="intake-count" class="count"></span></h2>
+              <button type="button" class="link-btn" data-goto="work/sort">Review</button>
+            </div>
+            <div id="intake-body" class="intake-body"></div>
+          </section>
+          <section class="card hidden" id="next-card" aria-labelledby="next-title">
+            <div class="panel-head"><h2 id="next-title" class="panel-title">Up next</h2></div>
+            <div id="next-body" class="next-up"></div>
+          </section>
+          </div>
+          </div>
+        </section>
+
+        <!-- MEETINGS -->
+        <section id="pane-meetings" class="pane wide hidden" data-title="Meetings"><!-- rendered by panes/meetings.js --></section>
+
+        <!-- WORK -->
+        <section id="pane-work" class="pane hidden" data-title="Work"><!-- rendered by panes/work.js --></section>
+
+        <!-- SESSIONS -->
+        <section id="pane-sessions" class="pane wide hidden" data-title="Sessions">
+          <div class="cx sx" data-tint="sessions">
+            <header class="cx-hero sx-hero" id="sessions-hero" data-tint="sessions">
+              <span class="cx-glyph"><svg class="icon"><use href="#i-sessions"/></svg></span>
+              <div class="cx-hero-text"><h1 class="cx-title">Sessions</h1><p class="cx-detail-line">Claude · Codex · Cursor · reading the last 7 days…</p></div>
+            </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="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>
+                </div>
+                <p class="cx-note sx-hint hidden" id="sessions-hint"></p>
+                <div id="sessions-hooks"></div>
+                <div id="sessions-list"></div>
+              </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>
+          </div>
+        </section>
+
+        <!-- MESSAGES (panes/messages.js) -->
+        <section id="pane-messages" class="pane hidden" data-title="Messages"></section>
+
+        <!-- THREADS (panes/threads.js) -->
+        <section id="pane-threads" class="pane hidden" data-title="Threads"></section>
+
+        <!-- DICTATION (panes/dictation.js) -->
+        <section id="pane-dictation" class="pane hidden" data-title="Dictation"></section>
+
+        <!-- MEMORIES -->
+        <section id="pane-memories" class="pane flush hidden" data-title="Memories">
+          <iframe id="memories-frame" class="memories-frame" title="Memories" src="about:blank"></iframe>
+        </section>
+
+        <!-- SPEAKERS -->
+        <section id="pane-speakers" class="pane wide hidden" data-title="Speakers"><!-- rendered by panes/speakers.js --></section>
+
+        <!-- USAGE -->
+        <section id="pane-usage" class="pane hidden" data-title="Usage">
+          <!-- Usage is a view inside Sessions (Sessions | Usage | COS cost); this old route opens it there. -->
+          <p class="reader-placeholder">Opening Usage in Sessions…</p>
+        </section>
+
+        <!-- SETTINGS -->
+        <section id="pane-settings" class="pane hidden" data-title="Settings"><!-- rendered by panes/settings.js --></section>
+
+      </main>
+    </div>
+
+  </div>
+
+  <div id="section-menu" class="sheet-backdrop hidden" role="dialog" aria-modal="true" aria-label="Sections">
+    <div class="sheet">
+      <p class="menu-host"><span class="dot ok" data-host-dot></span><span id="host-name">Connecting</span></p>
+      <div class="list">
+        <button type="button" class="nav-row" data-goto="today"><svg class="icon"><use href="#i-today"/></svg><span class="grow">Today<span class="note rail-story" data-story="today"></span></span><span class="badge-dot hidden" data-badge="today" style="position:static"></span></button>
+        <button type="button" class="nav-row" data-goto="messages"><svg class="icon"><use href="#i-messages"/></svg><span class="grow">Messages<span class="note rail-story" data-story="messages"></span></span><span class="badge-dot hidden" data-badge="messages" style="position:static"></span></button>
+        <button type="button" class="nav-row" data-goto="speakers"><svg class="icon"><use href="#i-speakers"/></svg><span class="grow">Speakers<span class="note rail-story" data-story="speakers"></span></span><span class="badge-dot hidden" data-badge="speakers" style="position:static"></span></button>
+        <button type="button" class="nav-row" data-goto="meetings"><svg class="icon"><use href="#i-meetings"/></svg><span class="grow">Meetings<span class="note rail-story" data-story="meetings"></span></span><span class="badge-dot hidden" data-badge="meetings" style="position:static"></span></button>
+        <button type="button" class="nav-row" data-goto="memories"><svg class="icon"><use href="#i-memories"/></svg><span class="grow">Memories<span class="note rail-story" data-story="memories"></span></span><span class="badge-dot hidden" data-badge="memories" style="position:static"></span></button>
+        <button type="button" class="nav-row" data-goto="threads"><svg class="icon"><use href="#i-threads"/></svg><span class="grow">Threads<span class="note rail-story" data-story="threads"></span></span><span class="badge-dot hidden" data-badge="threads" style="position:static"></span></button>
+        <button type="button" class="nav-row" data-goto="sessions"><svg class="icon"><use href="#i-sessions"/></svg><span class="grow">Sessions<span class="note rail-story" data-story="sessions"></span></span><span class="badge-dot hidden" data-badge="sessions" style="position:static"></span></button>
+        <button type="button" class="nav-row" data-goto="work"><svg class="icon"><use href="#i-work"/></svg><span class="grow">Work<span class="note rail-story" data-story="work"></span></span><span class="badge-dot hidden" data-badge="work" style="position:static"></span></button>
+        <button type="button" class="nav-row" data-goto="dictation"><svg class="icon"><use href="#i-dictation"/></svg><span class="grow">Dictation<span class="note rail-story" data-story="dictation"></span></span><span class="badge-dot hidden" data-badge="dictation" style="position:static"></span></button>
+        <button type="button" class="nav-row" data-goto="settings"><svg class="icon"><use href="#i-settings"/></svg><span class="grow">Settings<span class="note rail-story" data-story="settings"></span></span><span class="badge-dot hidden" data-badge="settings" style="position:static"></span></button>
+      </div>
+    </div>
+  </div>
+
+  <div id="ask-sheet" class="sheet-backdrop hidden" role="dialog" aria-modal="true" aria-label="Ask COS">
+    <div class="sheet">
+      <div class="sheet-grip"></div>
+      <form class="sheet-head" id="ask-form">
+        <input id="ask-q" class="field" type="search" placeholder="Ask COS or find a session" autocomplete="off" enterkeyhint="go">
+        <button type="button" class="link-btn" id="ask-close">Cancel</button>
+      </form>
+      <div id="ask-results"></div>
+    </div>
+  </div>
+
+  <div id="toast" class="toast hidden" role="status"></div>
+
+  <script src="/control/vendor/qrcode-encoder.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/messages.js"></script>
+  <script src="/control/panes/threads.js"></script>
+  <script src="/control/panes/speakers.js"></script>
+  <script src="/control/panes/meetings.js"></script>
+  <script src="/control/panes/work.js"></script>
+  <script src="/control/panes/dictation.js"></script>
+  <script src="/control/panes/settings.js"></script>
+  <script src="/control/panes/questions.js"></script>
+</body>
+</html>

package/server/web-control/mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 693 760" fill="#2b211a" role="img" aria-hidden="true"><circle cx="348" cy="100" r="100"/><circle cx="100" cy="240" r="100"/><circle cx="100" cy="520" r="100"/><path d="M 29.3 310.7 C 78.3 359.7 78.3 400.3 29.3 449.3 A 100 100 0 1 0 170.7 449.3 C 121.7 400.3 121.7 359.7 170.7 310.7 A 100 100 0 1 0 29.3 310.7 Z"/><circle cx="593" cy="240" r="100"/><circle cx="348" cy="380" r="100"/><path d="M 496.5 213.7 C 478.0 281.6 442.2 302.0 374.3 283.5 A 100 100 0 1 0 444.5 406.3 C 463.0 338.4 498.8 318.0 566.7 336.5 A 100 100 0 1 0 496.5 213.7 Z"/><circle cx="593" cy="520" r="100"/><circle cx="348" cy="660" r="100"/><path d="M 496.5 493.7 C 478.0 561.6 442.2 582.0 374.3 563.5 A 100 100 0 1 0 444.5 686.3 C 463.0 618.4 498.8 598.0 566.7 616.5 A 100 100 0 1 0 496.5 493.7 Z"/></svg>