@oar-sh/oar 0.9.20 → 0.9.22

package/server/public/app/cwd-picker.js

@@ -19,11 +19,13 @@ import {
   resolveCwdMenuPlacement,
   resolveTypeaheadIndex,
 } from './cwd-menu-placement.mjs';
+import { FONT_SCALE_CHANGE_EVENT, getUiScale } from './font-scaling.js';
 import {
   buildKnownCwdOptions as buildKnownCwdOptionsFromInputs,
   normalizeKnownCwdPath,
 } from './known-cwd-options.mjs';
 import { buildCloudLineModel, cloudHeaderLabel, isClaudeCloudConversation } from './claude-cloud-ui.mjs';
+import { CHAT_META_LONG_CLASS, CHAT_META_SHORT_CLASS, cwdFolderName } from './chat-header-meta.mjs';
 
 export { normalizeKnownCwdPath };
 
@@ -163,6 +165,7 @@ function positionChangeCwdMenu() {
     viewportWidth,
     viewportHeight,
     panelHeight: panel.scrollHeight,
+    scale: getUiScale(),
   });
   panel.style.left = `${Math.round(placement.left)}px`;
   panel.style.top = `${Math.round(placement.top)}px`;
@@ -176,6 +179,8 @@ function bindRepositionListeners() {
   // Capture phase so scrolling inside .summary-body (which does not bubble) counts.
   window.addEventListener('scroll', positionChangeCwdMenu, true);
   window.addEventListener('resize', positionChangeCwdMenu);
+  // A zoom moves the trigger and rescales the gap and the panel's sizes.
+  window.addEventListener(FONT_SCALE_CHANGE_EVENT, positionChangeCwdMenu);
   window.visualViewport?.addEventListener?.('resize', positionChangeCwdMenu);
   window.visualViewport?.addEventListener?.('scroll', positionChangeCwdMenu);
 }
@@ -185,6 +190,7 @@ function unbindRepositionListeners() {
   repositionBound = false;
   window.removeEventListener('scroll', positionChangeCwdMenu, true);
   window.removeEventListener('resize', positionChangeCwdMenu);
+  window.removeEventListener(FONT_SCALE_CHANGE_EVENT, positionChangeCwdMenu);
   window.visualViewport?.removeEventListener?.('resize', positionChangeCwdMenu);
   window.visualViewport?.removeEventListener?.('scroll', positionChangeCwdMenu);
 }
@@ -231,7 +237,7 @@ function openChangeCwdMenu() {
   bindRepositionListeners();
 }
 
-function closeChangeCwdMenu({ focusTrigger = false } = {}) {
+export function closeChangeCwdMenu({ focusTrigger = false } = {}) {
   const { trigger, panel, backdrop } = getPickerEls();
   menuOpen = false;
   typeaheadBuffer = '';
@@ -470,6 +476,7 @@ export function syncChatHeaderWorkspaceLabel() {
     const label = cloudHeaderLabel(conversation.cloud);
     labelEl.hidden = !label;
     labelEl.textContent = label;
+    labelEl.classList.remove('chat-title-cwd-expanded');
     if (label) labelEl.title = buildCloudLineModel(conversation.cloud)?.repoUrl || label;
     else labelEl.removeAttribute('title');
     return;
@@ -479,11 +486,34 @@ export function syncChatHeaderWorkspaceLabel() {
     labelEl.hidden = true;
     labelEl.textContent = '';
     labelEl.removeAttribute('title');
+    labelEl.classList.remove('chat-title-cwd-expanded');
     return;
   }
   labelEl.hidden = false;
-  labelEl.textContent = cwd;
   labelEl.title = cwd;
+  // The whole path, and its last folder for the phone's meta row
+  // (chat-header-meta.mjs); a tap there shows the whole path.
+  const longEl = labelEl.querySelector(`.${CHAT_META_LONG_CLASS}`);
+  const shortEl = labelEl.querySelector(`.${CHAT_META_SHORT_CLASS}`);
+  const folder = cwdFolderName(cwd) || cwd;
+  if (longEl && shortEl && longEl.textContent === cwd && shortEl.textContent === folder) return;
+  if (longEl?.textContent !== cwd) labelEl.classList.remove('chat-title-cwd-expanded');
+  const long = document.createElement('span');
+  long.className = CHAT_META_LONG_CLASS;
+  long.textContent = cwd;
+  const short = document.createElement('span');
+  short.className = CHAT_META_SHORT_CLASS;
+  short.textContent = folder;
+  labelEl.replaceChildren(long, short);
+  if (labelEl.dataset.cwdToggleBound !== '1') {
+    labelEl.dataset.cwdToggleBound = '1';
+    labelEl.addEventListener('click', () => {
+      // Only the two-label folder line toggles (not a cloud repo or the
+      // status view's text); on a desktop the class changes nothing.
+      if (!labelEl.querySelector(`.${CHAT_META_SHORT_CLASS}`)) return;
+      labelEl.classList.toggle('chat-title-cwd-expanded');
+    });
+  }
 }
 
 function getCurrentLaunchableSessionId() {
@@ -513,14 +543,14 @@ export function openChangeCwdModal() {
     subtitle: 'Select a known launch directory',
     kind: 'change-cwd',
     bodyHtml: `
-      <p style="margin-bottom:10px;color:var(--muted);line-height:1.45">
+      <p style="margin-bottom:calc(5px * var(--ui-scale));color:var(--muted);line-height:1.45">
         Pick the selected session's launch directory. An idle CLI restarts in the selected CWD; active turns must finish first.
       </p>
-      <div style="display:grid;gap:4px;margin-bottom:10px;font-size:0.78rem;color:var(--muted)">
+      <div style="display:grid;gap:calc(4px * var(--ui-scale));margin-bottom:calc(5px * var(--ui-scale));font-size:0.78rem;color:var(--muted)">
         <div><strong style="color:var(--text)">Current CWD:</strong> ${escHtml(currentCwd || 'Unknown')}</div>
         <div><strong style="color:var(--text)">Next launch:</strong> ${escHtml(nextLaunchCwd || currentCwd || 'Unknown')}</div>
       </div>
-      <div class="change-cwd-picker" style="margin-bottom:10px">
+      <div class="change-cwd-picker" style="margin-bottom:calc(5px * var(--ui-scale))">
         <label class="change-cwd-picker-label" for="change-cwd-manual-path">Manual path</label>
         <div class="cwd-browse-row">
           <input id="change-cwd-manual-path" class="change-cwd-manual-input" type="text" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="Manual path">
@@ -539,7 +569,7 @@ export function openChangeCwdModal() {
           ${menuItemsHtml}
         </div>
       </div>
-      <div id="change-cwd-details" style="margin-top:10px;font-size:0.78rem;color:var(--muted);line-height:1.45;word-break:break-word"></div>
+      <div id="change-cwd-details" style="margin-top:calc(5px * var(--ui-scale));font-size:0.78rem;color:var(--muted);line-height:1.45;word-break:break-word"></div>
       <div class="summary-modal-actions" id="change-cwd-actions">
         <button class="summary-btn" type="button" onclick="confirmChangeCwd()">🗂️ Save next-launch CWD</button>
         <button class="summary-btn" type="button" ${launchableSessionId ? 'onclick="confirmChangeCwdAndLaunch()"' : 'disabled data-keep-disabled="1"'} title="${escHtml(launchDisabledReason || 'Set the CWD and (re)launch the current session worker')}">🚀 Set new CWD and (re)launch</button>

package/server/public/app/emoji-view.js

@@ -23,7 +23,7 @@ function updateEmojiButton() {
   button.textContent = getLastEmoji();
 }
 
-function closeEmojiPicker() {
+export function closeEmojiPicker() {
   const popup = document.getElementById('emoji-popup');
   if (!popup) return;
   popup.classList.remove('visible');

package/server/public/app/font-scaling.js

@@ -8,6 +8,9 @@ const FONT_SCALE_WHEEL_STEP_MIN = 0.01;
 const FONT_SCALE_WHEEL_STEP_MAX = 0.2;
 const FONT_SCALE_PILL_VISIBLE_MS = 900;
 
+/** Fired on window after --font-scale changed; detail: { scale }. */
+export const FONT_SCALE_CHANGE_EVENT = 'oar:font-scale-change';
+
 let fontScaleValue = FONT_SCALE_DEFAULT;
 let fontScaleIndicatorTimer = null;
 let fontScalePinchState = {
@@ -46,6 +49,25 @@ function readStoredFontScale() {
   return clampFontScale(readLocalStorage(FONT_SCALE_STORAGE_KEY));
 }
 
+/**
+ * The factor the stylesheet multiplies its px sizes by (--ui-scale, which
+ * follows --font-scale). JS that places popovers with px gaps and margins
+ * of its own multiplies them by this, so they match the scaled CSS. Read
+ * per call: the inline value (set before first paint and on every change),
+ * else the computed one; 1 outside a browser.
+ */
+export function getUiScale() {
+  if (typeof document === 'undefined' || !document.documentElement) return FONT_SCALE_DEFAULT;
+  let raw = '';
+  try { raw = document.documentElement.style.getPropertyValue('--font-scale'); } catch {}
+  if (!String(raw || '').trim() && typeof getComputedStyle === 'function') {
+    try { raw = getComputedStyle(document.documentElement).getPropertyValue('--font-scale'); } catch {}
+  }
+  const numeric = Number(String(raw || '').trim());
+  if (!Number.isFinite(numeric) || numeric <= 0) return FONT_SCALE_DEFAULT;
+  return clampFontScale(numeric);
+}
+
 function normalizeFontScaleSelectValue(raw = '') {
   const text = String(raw || '').trim();
   if (!text) return null;
@@ -90,6 +112,10 @@ export function setFontScale(nextScale, { persist = true, preserveMessageAnchor
   document.documentElement.style.setProperty('--font-scale-percent', `${Math.round(normalized * 100)}%`);
   if (persist) writeLocalStorage(FONT_SCALE_STORAGE_KEY, String(normalized));
   syncFontScaleSelect();
+  // Layout that measures itself (the header's priority+ actions) re-runs.
+  if (typeof window !== 'undefined' && typeof window.dispatchEvent === 'function' && typeof CustomEvent === 'function') {
+    window.dispatchEvent(new CustomEvent(FONT_SCALE_CHANGE_EVENT, { detail: { scale: normalized } }));
+  }
   if (anchor) {
     requestAnimationFrame(() => {
       restoreTranscriptAnchor(document.getElementById('messages'), anchor);

package/server/public/app/header-priority-actions.mjs

@@ -0,0 +1,238 @@
+// The chat header's priority+ actions: which icon buttons sit in the header
+// and which fall back into the ︙ menu when the header runs out of room.
+//
+// Every action exists twice in the markup: an inline header button and a twin
+// entry in #chat-actions-menu. Nothing moves in the DOM; a pass toggles
+// `hidden` on the pair, so listeners are bound once and the menu keeps its
+// order. This module is DOM-free: bootstrap.js measures, calls
+// fitHeaderPriorityActions and writes the result.
+//
+// Order is priority: the first entry is the LAST to overflow. Once one action
+// does not fit, it and every later one go into the menu, so a lower priority
+// action never "jumps" a higher one back into the header.
+
+export const HEADER_PRIORITY_ACTIONS = Object.freeze([
+  Object.freeze({ key: 'questions', inlineId: 'questions-btn', menuId: 'chat-menu-questions' }),
+  Object.freeze({ key: 'pins', inlineId: 'pinned-messages-btn', menuId: 'chat-menu-pins' }),
+  Object.freeze({ key: 'hidden', inlineId: 'hidden-messages-btn', menuId: 'chat-menu-hidden' }),
+  Object.freeze({ key: 'search', inlineId: 'message-search-btn', menuId: 'chat-menu-search' }),
+  Object.freeze({ key: 'context', inlineId: 'context-btn', menuId: 'chat-menu-context' }),
+  Object.freeze({ key: 'usage', inlineId: 'usage-btn', menuId: 'chat-menu-usage' }),
+  Object.freeze({ key: 'theme', inlineId: 'theme-toggle-btn', menuId: 'chat-menu-theme-toggle' }),
+  Object.freeze({ key: 'fullscreen', inlineId: 'fullscreen-btn', menuId: 'chat-menu-fullscreen' }),
+]);
+
+export const HEADER_PRIORITY_ACTION_KEYS = Object.freeze(HEADER_PRIORITY_ACTIONS.map((action) => action.key));
+
+/** The twin menu entries, in priority order. */
+export const HEADER_PRIORITY_MENU_IDS = Object.freeze(HEADER_PRIORITY_ACTIONS.map((action) => action.menuId));
+
+/** The width the title keeps before any action is shown inline, in rem. */
+export const HEADER_TITLE_MIN_REM = 8;
+
+/** The window event that asks for a new pass (counts, availability). */
+export const HEADER_ACTIONS_CHANGE_EVENT = 'oar:header-actions-change';
+
+/**
+ * Where the pending-question banner has a row of its own (the phone's header
+ * CSS): there it takes nothing from the first row.
+ */
+export const HEADER_BANNER_OWN_ROW_QUERY = '(max-width: 680px)';
+
+/**
+ * The share of the header's content width the question banner may take on
+ * the first row (its `max-width: 40%` in index.html): the title keeps the rest.
+ */
+export const HEADER_BANNER_MAX_SHARE = 0.4;
+
+/**
+ * The width of everything on the header's first row that never overflows:
+ * its padding, ☰, the title's minimum, ︙, the question banner and the flex
+ * gaps between them. Widths of 0 are elements that do not show. The banner
+ * counts only while it shares the first row (`bannerOwnRow` false), and only
+ * with its compact width ("❓ N"): the rest of it gives way before an action
+ * does (resolveQuestionBannerMode).
+ *
+ * @param {object} input
+ * @param {number} [input.padding] left plus right padding
+ * @param {number} [input.titleMin] the width the title keeps
+ * @param {number} [input.toggle] ☰
+ * @param {number} [input.banner] the question banner's compact chip
+ * @param {number} [input.menu] ︙ (its wrapper)
+ * @param {number} [input.gap] the header's column gap
+ * @param {boolean} [input.bannerOwnRow] the banner sits on a row of its own
+ * @returns {number}
+ */
+export function headerReservedWidth({
+  padding = 0,
+  titleMin = 0,
+  toggle = 0,
+  banner = 0,
+  menu = 0,
+  gap = 0,
+  bannerOwnRow = false,
+} = {}) {
+  const size = (value) => (Number.isFinite(Number(value)) && Number(value) > 0 ? Number(value) : 0);
+  let width = size(padding) + size(titleMin) + size(menu);
+  let items = 2; // the title and #chat-header-actions
+  if (size(toggle)) {
+    width += size(toggle);
+    items += 1;
+  }
+  if (size(banner) && !bannerOwnRow) {
+    width += size(banner);
+    items += 1;
+  }
+  return width + size(gap) * (items - 1);
+}
+
+/**
+ * How the question banner shows once the actions have their places:
+ * - 'hidden': no banner;
+ * - 'row': a row of its own (a phone held upright, or a header whose first
+ *   row cannot hold even the chip next to ☰, the title's minimum and ︙),
+ *   the whole text;
+ * - 'compact': the chip "❓ N" on the first row (always on a phone on its
+ *   side; elsewhere where the room cannot even hold "❓ N open questions");
+ * - 'full': the whole text on the first row, ending in an ellipsis where
+ *   the room is short.
+ * The room is what the first row leaves it (the compact width the fit
+ * reserved plus whatever the inline actions did not take), capped at
+ * `maxShare` of the header's content width.
+ *
+ * @param {object} input
+ * @param {boolean} [input.visible] the banner shows
+ * @param {boolean} [input.ownRow] it sits on a row of its own
+ * @param {boolean} [input.phoneLandscape] :root[data-phone-landscape]
+ * @param {number} [input.room] the width the first row leaves it
+ * @param {number} [input.compact] the chip's width: a room below it is 'row'
+ * @param {number} [input.contentWidth] the header's width minus its padding
+ * @param {number} [input.maxShare] HEADER_BANNER_MAX_SHARE
+ * @param {number} [input.fullMin] "❓ N open questions" with the banner's padding and border
+ * @returns {'hidden'|'row'|'compact'|'full'}
+ */
+export function resolveQuestionBannerMode({
+  visible = false,
+  ownRow = false,
+  phoneLandscape = false,
+  room = 0,
+  compact = 0,
+  contentWidth = Infinity,
+  maxShare = HEADER_BANNER_MAX_SHARE,
+  fullMin = 0,
+} = {}) {
+  if (!visible) return 'hidden';
+  if (ownRow) return 'row';
+  if (phoneLandscape) return 'compact';
+  // Not even the chip fits on the first row: it would push ︙ off the
+  // screen, so the banner takes a row of its own (an unmeasured room does not).
+  if (Number.isFinite(Number(room)) && Number(room) < (Number(compact) || 0)) return 'row';
+  const share = Number(maxShare);
+  const width = Number(contentWidth);
+  const cap = Number.isFinite(share) && share > 0 && Number.isFinite(width) ? width * share : Infinity;
+  // An unmeasured room (NaN) is the chip: it is the width the fit reserved.
+  const space = Math.min(Number(room), cap);
+  return space >= Math.max(0, Number(fullMin) || 0) ? 'full' : 'compact';
+}
+
+/**
+ * Whether each action may show at all, in the header or in the menu. Distinct
+ * from the fit question, which is only about WHERE an available action shows.
+ *
+ * @param {object} input
+ * @param {boolean} [input.sharedMode] the shared read-only view: Day/Night only
+ * @param {number} [input.questionCount] pending questions (📓) of the open conversation
+ * @param {number} [input.pinCount] pins of the open conversation
+ * @param {number} [input.hiddenCount] messages hidden from shared viewers
+ * @param {boolean} [input.fullscreenAvailable] pwa-install.js's verdict (a phone, not installed)
+ * @returns {Record<string, boolean>}
+ */
+export function resolveHeaderActionAvailability({
+  sharedMode = false,
+  questionCount = 0,
+  pinCount = 0,
+  hiddenCount = 0,
+  fullscreenAvailable = false,
+} = {}) {
+  if (sharedMode) {
+    return { questions: false, pins: false, hidden: false, search: false, context: false, usage: false, theme: true, fullscreen: false };
+  }
+  return {
+    questions: Number(questionCount) > 0,
+    pins: Number(pinCount) > 0,
+    hidden: Number(hiddenCount) > 0,
+    search: true,
+    context: true,
+    usage: true,
+    theme: true,
+    fullscreen: !!fullscreenAvailable,
+  };
+}
+
+/**
+ * The fit decision. `available` is the width the inline actions may use in
+ * total; each inline action costs its width plus `gap`. An action whose width
+ * is unknown (not a finite number) counts as 0. An `available` that is not a
+ * finite number means the header could not be measured: every available
+ * action then goes into the menu, which always reaches all of them.
+ *
+ * @param {object} input
+ * @param {Record<string, number>} input.widths the inline buttons' widths, by key
+ * @param {number} [input.gap] the gap after each inline button
+ * @param {number} input.available the width left for the inline actions
+ * @param {Record<string, boolean>} input.availability from resolveHeaderActionAvailability
+ * @param {string[]} [input.order] priority order (default: HEADER_PRIORITY_ACTION_KEYS)
+ * @returns {{ inline: string[], menu: string[], unavailable: string[], used: number }}
+ *   `used` is the width the inline actions take, their gaps included
+ */
+export function fitHeaderPriorityActions({
+  widths = {},
+  gap = 0,
+  available,
+  availability = {},
+  order = HEADER_PRIORITY_ACTION_KEYS,
+} = {}) {
+  const inline = [];
+  const menu = [];
+  const unavailable = [];
+  const room = Number(available);
+  const step = Math.max(0, Number(gap) || 0);
+  let overflowing = !Number.isFinite(room);
+  let used = 0;
+  let inlineUsed = 0;
+  for (const key of order) {
+    if (!availability[key]) {
+      // Spends no width, so it never pushes an available action out.
+      unavailable.push(key);
+      continue;
+    }
+    const width = Number(widths[key]);
+    used += (Number.isFinite(width) && width > 0 ? width : 0) + step;
+    if (!overflowing && used <= room) {
+      inline.push(key);
+      inlineUsed = used;
+    } else {
+      overflowing = true;
+      menu.push(key);
+    }
+  }
+  return { inline, menu, unavailable, used: inlineUsed };
+}
+
+/** The menu ids of the keys a fit put into the menu. */
+export function headerPriorityMenuIdsFor(keys) {
+  const wanted = new Set(keys || []);
+  return HEADER_PRIORITY_ACTIONS.filter((action) => wanted.has(action.key)).map((action) => action.menuId);
+}
+
+/**
+ * Asks for a new pass. Views that change an action's availability (pin and
+ * hidden counts, fullscreen) call this; a no-op outside a browser.
+ */
+export function notifyHeaderActionsChanged() {
+  const target = typeof window !== 'undefined' ? window : null;
+  if (!target || typeof target.dispatchEvent !== 'function' || typeof CustomEvent !== 'function') return;
+  try {
+    target.dispatchEvent(new CustomEvent(HEADER_ACTIONS_CHANGE_EVENT));
+  } catch {}
+}

package/server/public/app/held-details.mjs

@@ -0,0 +1,202 @@
+// The live poll's diet: the page polls its conversation every 900 ms, and a
+// finished reply's tool lines and thoughts do not change, so the poll names
+// the replies whose details it already holds and the relay leaves those out.
+// Pure: the relay's route uses the param side, the page the store side.
+//
+// The param (`heldDetails`) is `id~version,id~version,…`: an assistant
+// message id and the version of its details the page holds. The version
+// (`detailsVersion` on every assistant message of a full payload) changes
+// with any row that arrives or changes after the turn (a late sub-agent
+// line, a thought update, a history rebuild), and the relay then sends the
+// details again. A held message comes back as `detailsHeld: true` with empty
+// `activities` and `thoughts`, which the page fills from its store.
+
+export const HELD_DETAILS_MAX_IDS = 200;
+export const HELD_DETAILS_MAX_BYTES = 8 * 1024;
+const ID_PATTERN = /^[A-Za-z0-9_-]{1,64}$/;
+// The shape of a held reply's activities and thoughts. Bump it whenever the
+// relay changes how those arrays are built for a finished reply (a cap, a
+// sanitiser, a new field): every page then holds a stale version and gets
+// each reply in full once.
+export const HELD_DETAILS_SHAPE = 's1';
+// `s1.<tool rows>.<their highest row id>.<thought rows>.<their highest row
+// id>.<fingerprint of the thoughts' text and done>`. Anything else (a version
+// from before this form) is dropped, so the reply goes out in full.
+const VERSION_PATTERN = /^s\d{1,3}\.\d{1,12}\.\d{1,15}\.\d{1,12}\.\d{1,15}\.[0-9a-f]{8}$/;
+
+const nonNegative = (value) => Math.max(0, Math.trunc(Number(value) || 0));
+
+/**
+ * A finished reply's details version. Tool rows are only ever inserted, so
+ * their count and highest row id see every change. A thought row is updated
+ * in place as its text streams in and when it is done, so the thoughts also
+ * carry a fingerprint of their content (`thoughtFingerprint`).
+ */
+export function detailsVersion({ activityCount = 0, activityMaxRowId = 0, thoughtCount = 0, thoughtMaxRowId = 0, thoughtHash = '00000000' } = {}) {
+  const hash = /^[0-9a-f]{8}$/.test(String(thoughtHash)) ? String(thoughtHash) : '00000000';
+  return [HELD_DETAILS_SHAPE, nonNegative(activityCount), nonNegative(activityMaxRowId), nonNegative(thoughtCount), nonNegative(thoughtMaxRowId), hash].join('.');
+}
+
+/**
+ * The fingerprint of one reply's thought rows: FNV-1a (32 bit) over each
+ * row's id, done and text, in row id order. Any change to a thought's text or
+ * done changes it, two in the same millisecond included.
+ */
+export function thoughtFingerprint(rows) {
+  let hash = 0x811c9dc5;
+  const mix = (text) => {
+    for (let i = 0; i < text.length; i += 1) {
+      hash ^= text.charCodeAt(i);
+      hash = Math.imul(hash, 0x01000193) >>> 0;
+    }
+  };
+  const ordered = [...(Array.isArray(rows) ? rows : [])].sort((a, b) => Number(a?.rowid) - Number(b?.rowid));
+  for (const row of ordered) mix(`${nonNegative(row?.rowid)}\u0001${Number(row?.done) ? 1 : 0}\u0001${String(row?.text ?? '')}\u0002`);
+  return hash.toString(16).padStart(8, '0');
+}
+
+/**
+ * The relay's reading of the param: a Map id → version, or null when it
+ * names nothing usable or is too big (over 8 KB or 200 entries: the poll
+ * then gets the full payload). Entries that are not `id~version` with an id
+ * of [A-Za-z0-9_-]{1,64} are dropped.
+ */
+export function parseHeldDetailsParam(raw) {
+  if (raw === undefined || raw === null) return null;
+  const text = Array.isArray(raw) ? '' : String(raw);
+  if (!text || text.length > HELD_DETAILS_MAX_BYTES) return null;
+  const parts = text.split(',');
+  if (parts.length > HELD_DETAILS_MAX_IDS) return null;
+  const held = new Map();
+  for (const part of parts) {
+    const at = part.indexOf('~');
+    if (at <= 0) continue;
+    const id = part.slice(0, at);
+    const version = part.slice(at + 1);
+    if (!ID_PATTERN.test(id) || !VERSION_PATTERN.test(version)) continue;
+    held.set(id, version);
+  }
+  return held.size ? held : null;
+}
+
+/**
+ * The page's side: what it holds of one open conversation's finished
+ * replies. Filled only from conversation payloads fetched over HTTP (never
+ * from a socket's reply: the turn-end fallback carries the live list, not
+ * the finished one), and only with what it is shown.
+ */
+export function createHeldDetailsStore() {
+  let conversationId = '';
+  // id → { version, activities, thoughts }, in the payload's message order.
+  let held = new Map();
+  // A poll whose answer named a reply the page does not hold is dropped; the
+  // next poll goes without the param. Two such drops in a row and the param
+  // stays off until the next full load.
+  let fullNext = false;
+  let disabled = false;
+  let dropStreak = 0;
+
+  function forConversation(id) {
+    const key = String(id || '');
+    if (key !== conversationId) {
+      conversationId = key;
+      held = new Map();
+      fullNext = false;
+      disabled = false;
+      dropStreak = 0;
+    }
+  }
+
+  function record(messages) {
+    for (const message of Array.isArray(messages) ? messages : []) {
+      if (message?.role !== 'assistant' || message.detailsHeld) continue;
+      const id = String(message.id || '');
+      const version = String(message.detailsVersion || '');
+      if (!ID_PATTERN.test(id) || !VERSION_PATTERN.test(version)) continue;
+      held.delete(id);
+      held.set(id, {
+        version,
+        activities: Array.isArray(message.activities) ? message.activities : [],
+        thoughts: Array.isArray(message.thoughts) ? message.thoughts : [],
+      });
+    }
+  }
+
+  return {
+    /**
+     * A payload was applied. `full`: a load of the whole window (opening,
+     * reconnecting, a reload), which replaces what is held; otherwise (a
+     * poll, a page of older history) its replies are added. `shownIds`, when
+     * given, is every message on screen now: entries for others go.
+     */
+    noteApplied(id, payload, { full = false, shownIds = null } = {}) {
+      forConversation(id);
+      if (full) {
+        held = new Map();
+        fullNext = false;
+        disabled = false;
+        dropStreak = 0;
+      }
+      record(payload?.messages);
+      if (shownIds) {
+        const shown = new Set(Array.from(shownIds, (value) => String(value)));
+        for (const key of [...held.keys()]) if (!shown.has(key)) held.delete(key);
+      }
+    },
+
+    /** The param for the next poll of `id`, or '' to ask for everything. */
+    param(id) {
+      forConversation(id);
+      if (fullNext) {
+        fullNext = false;
+        return '';
+      }
+      if (disabled || !held.size) return '';
+      // The newest first, as many as fit in 8 KB and 200 entries.
+      const parts = [];
+      let bytes = 0;
+      for (const [key, entry] of [...held.entries()].reverse()) {
+        const part = `${key}~${entry.version}`;
+        if (parts.length >= HELD_DETAILS_MAX_IDS || bytes + part.length + 1 > HELD_DETAILS_MAX_BYTES) break;
+        parts.push(part);
+        bytes += part.length + 1;
+      }
+      return parts.join(',');
+    },
+
+    /**
+     * Fill the held replies of a poll's answer from the store, in place.
+     * Returns false (the answer must be dropped) when it names one the store
+     * does not hold.
+     */
+    restore(id, payload) {
+      forConversation(id);
+      const messages = Array.isArray(payload?.messages) ? payload.messages : [];
+      const missing = messages.some((message) => message?.detailsHeld && !held.has(String(message.id || '')));
+      if (missing) {
+        dropStreak += 1;
+        if (dropStreak >= 2) disabled = true;
+        else fullNext = true;
+        return false;
+      }
+      let restored = 0;
+      for (const message of messages) {
+        if (!message?.detailsHeld) continue;
+        const entry = held.get(String(message.id));
+        message.activities = entry.activities;
+        message.thoughts = entry.thoughts;
+        message.detailsVersion = entry.version;
+        delete message.detailsHeld;
+        restored += 1;
+      }
+      // Only a poll the store answered for ends a run of drops; the full
+      // poll after a drop does not.
+      if (restored) dropStreak = 0;
+      return true;
+    },
+
+    /** For tests and the page's own checks. */
+    size() { return held.size; },
+    has(messageId) { return held.has(String(messageId || '')); },
+  };
+}

package/server/public/app/hidden-messages-view.mjs

@@ -19,6 +19,7 @@ import {
 } from './store.js';
 import { unhideAllMessagesFromShares, updateMessageShareVisibility } from './api-client.js';
 import { jumpToPinnedMessage } from './pinned-messages-view.mjs';
+import { notifyHeaderActionsChanged } from './header-priority-actions.mjs';
 
 export const HIDDEN_MESSAGES_MODAL_KIND = 'hidden-messages';
 
@@ -113,12 +114,15 @@ function syncHiddenHeaderButton() {
   const button = document.getElementById('hidden-messages-btn');
   if (!button) return;
   const count = getConversationHiddenMessages(currentConversationId).length;
+  // Available or not; the priority+ pass places it (header or ︙).
   button.hidden = IS_SHARED_VIEW || !count;
+  button.dataset.count = IS_SHARED_VIEW ? '0' : String(count);
   const countEl = button.querySelector('.header-icon-count');
   if (countEl) countEl.textContent = count ? String(count) : '';
   const label = count ? `Hidden from shared viewers (${count})` : 'Hidden from shared viewers';
   button.setAttribute('title', label);
   button.setAttribute('aria-label', label);
+  notifyHeaderActionsChanged();
 }
 
 function hiddenModalContent() {