@oar-sh/oar 0.9.19 → 0.9.21

package/server/public/app/conversation-group-state.mjs

@@ -42,12 +42,24 @@ export function summarizeGroupMembers(states = []) {
 export function groupSummaryText(summary) {
   const count = Number(summary?.count || 0);
   if (!count) return '';
+  const activity = groupActivityText(summary);
+  if (!activity) return groupSessionCountText(count);
+  return `${count} · ${activity}`;
+}
+
+/** "1 waiting for you, 2 running", or "" while nothing waits, runs or failed. */
+export function groupActivityText(summary) {
   const parts = [];
-  if (summary.waiting > 0) parts.push(`${summary.waiting} waiting for you`);
-  if (summary.running > 0) parts.push(`${summary.running} running`);
-  if (summary.error > 0) parts.push(`${summary.error} failed`);
-  if (!parts.length) return `${count} session${count === 1 ? '' : 's'}`;
-  return `${count} · ${parts.join(', ')}`;
+  if (Number(summary?.waiting) > 0) parts.push(`${summary.waiting} waiting for you`);
+  if (Number(summary?.running) > 0) parts.push(`${summary.running} running`);
+  if (Number(summary?.error) > 0) parts.push(`${summary.error} failed`);
+  return parts.join(', ');
+}
+
+/** "1 session", "4 sessions". */
+export function groupSessionCountText(count) {
+  const n = Number(count) || 0;
+  return `${n} session${n === 1 ? '' : 's'}`;
 }
 
 /** Whether a group has something going on: a member runs or waits. */
@@ -55,14 +67,39 @@ export function groupIsActive(summary) {
   return Number(summary?.running || 0) > 0 || Number(summary?.waiting || 0) > 0;
 }
 
+/**
+ * A member's colour in its group's name: 'waiting', 'running', 'ready' (idle
+ * with a live worker, the darker green) or 'offline'. A failed member does
+ * not colour the name; the pill says so.
+ */
+export function memberTone({ memberState = 'idle', visualState = '' } = {}) {
+  if (memberState === 'waiting' || memberState === 'running') return memberState;
+  return String(visualState || '').trim().toLowerCase() === 'ready' ? 'ready' : 'offline';
+}
+
+/**
+ * The colour of a group's name from its members' tones: red while one waits
+ * for the user, bright green while one works, the darker green while one is
+ * ready, else the plain title colour. Returns 'question' | 'working' |
+ * 'ready' | 'offline'.
+ */
+export function groupTitleTone(tones = []) {
+  const list = Array.isArray(tones) ? tones : [];
+  if (list.includes('waiting')) return 'question';
+  if (list.includes('running')) return 'working';
+  if (list.includes('ready')) return 'ready';
+  return 'offline';
+}
+
 /**
  * Open or folded. The user's choice ('open' | 'folded') wins; otherwise a
- * group is open while active and folded once everything is finished. The
- * group that holds the open conversation, and every group under a title
- * filter, is always open.
+ * group is open while active and folded once everything is finished. Every
+ * group under a title filter is always open. A folded group that holds the
+ * open conversation still shows that row (arrangeConversationList's
+ * keepVisibleId).
  */
-export function resolveGroupFold({ choice = null, active = false, holdsOpenConversation = false, filterActive = false } = {}) {
-  if (holdsOpenConversation || filterActive) return true;
+export function resolveGroupFold({ choice = null, active = false, filterActive = false } = {}) {
+  if (filterActive) return true;
   if (choice === 'open') return true;
   if (choice === 'folded') return false;
   return active === true;

package/server/public/app/conversation-origin-ui.js

@@ -6,7 +6,23 @@
 // marker is all there is), and neither has one a person started.
 
 import { conversations, currentConvId, IS_SHARED_VIEW } from './store.js';
-import { renderConversationHeaderOriginHtml } from './remote-relay-origin-view.mjs';
+import { conversationOriginInfo, renderConversationHeaderOriginHtml } from './remote-relay-origin-view.mjs';
+
+/**
+ * The ︙ entry that stands in for the line where the meta line is hidden
+ * (phone landscape): `{ label: 'Started by an agent in “title”',
+ * conversationId }` while the line is a button that opens that conversation,
+ * else null.
+ */
+export function conversationOriginMenuEntry() {
+  if (IS_SHARED_VIEW) return null;
+  const id = String(currentConvId || '').trim();
+  const conversation = id ? (conversations[id] || null) : null;
+  if (!conversation) return null;
+  const info = conversationOriginInfo(conversation, { conversations, linkable: true });
+  if (!info || info.kind !== 'local' || !info.linkable || !info.conversationId) return null;
+  return { label: info.label, conversationId: info.conversationId };
+}
 
 let renderedHtml = '';
 

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

@@ -155,6 +155,7 @@ import { buildInFlightSnapshotKey } from './in-flight-snapshot.mjs';
 import { computeStablePrefixLength, planListPatch } from './streaming-dom-patch.mjs';
 import { prefixToolActivityEmoji } from './tool-activity-emoji.mjs';
 import { conversationPayloadCache } from './conversation-payload-cache.mjs';
+import { noteConversationShown } from './session-history-ui.js';
 
 const CONVERSATION_HISTORY_PAGE_SIZE = 20;
 const HISTORY_LOAD_MORE_ID = 'history-load-more';
@@ -612,6 +613,15 @@ function steeringHoldForConversation(conversationId) {
   return { held: false, reason: null };
 }
 
+// Plan mode on one side, the writing modes on the other (a turn's mode not yet
+// known crosses nothing).
+function modesCrossPlan(turnMode, composerMode) {
+  const turn = String(turnMode || '').trim().toLowerCase();
+  const composer = String(composerMode || '').trim().toLowerCase();
+  if (!turn || !composer) return false;
+  return (turn === 'plan') !== (composer === 'plan');
+}
+
 function syncSendButtonState() {
   const btn = document.getElementById('send-btn');
   if (!btn) return;
@@ -631,6 +641,7 @@ function syncSendButtonState() {
     steeringSupported: conversationSupportsSteering(currentConvId),
     steeringHeld: steeringHold.held,
     steeringHoldReason: steeringHold.reason,
+    crossesPlanMode: modesCrossPlan(currentTurn?.mode, document.getElementById('mode-select')?.value),
     archived: conversations[String(currentConvId || '').trim()]?.archived === true,
     setupRequired: !String(currentConvId || '').trim() && isProviderSetupRequired(),
   });
@@ -1202,10 +1213,15 @@ function setConversationTurnState(conversationId, state = null) {
     syncSendButtonState();
     return;
   }
+  const messageId = String(state.messageId || '').trim();
+  const previous = activeTurnsByConversation.get(conversationKey);
   activeTurnsByConversation.set(conversationKey, {
-    messageId: String(state.messageId || '').trim(),
+    messageId,
     status: String(state.status || 'processing').trim().toLowerCase() || 'processing',
     cancelRequested: state.cancelRequested === true,
+    // The live turn's relay mode (the in-flight snapshot carries it); a status
+    // update for the same turn keeps the one already known.
+    mode: String(state.mode || (previous?.messageId === messageId ? previous.mode : '') || '').trim().toLowerCase(),
   });
   syncSendButtonState();
 }
@@ -2293,7 +2309,7 @@ export function restoreInFlightThinking(inFlight, autoScroll = true) {
   const liveStreamSeq = relayStreamStateByMessageId.get(messageId)?.seq || 0;
   const liveStreamText = relayStreamTextByMessageId.get(messageId);
   clearRelayStreamState();
-  setConversationTurnState(currentConvId, { messageId, status: 'processing' });
+  setConversationTurnState(currentConvId, { messageId, status: 'processing', mode: inFlight?.mode });
   const activities = mergeRelayActivityTexts(
     relayActivities.get(messageId) || [],
     Array.isArray(inFlight.activities) ? inFlight.activities : [],
@@ -4740,6 +4756,8 @@ export async function sendMessage() {
       const adoptNewConversation = viewingSendConversation();
       if (adoptNewConversation) {
         setCurrentConv(r.conversationId);
+        // The new chat gets its history entry, as one opened from the list does.
+        noteConversationShown(r.conversationId);
         composerConversationId = r.conversationId;
         nameOwnSendConversation(send, r.conversationId);
       }

package/server/public/app/cwd-menu-placement.mjs

@@ -2,6 +2,7 @@
 // Kept DOM-free so they can run under `node --test` without a browser.
 
 const FLIP_THRESHOLD_PX = 180;
+const FALLBACK_WIDTH_PX = 260;
 
 function clamp(value, min, max) {
   if (max < min) return min;
@@ -11,17 +12,28 @@ function clamp(value, min, max) {
 /**
  * Decide where the fixed-position picker panel should sit relative to its trigger.
  * Used on desktop only; the mobile layout is a bottom sheet driven purely by CSS.
+ *
+ * `gap`, `edge`, `minHeight`, `maxHeight` are design sizes at 100 %; `scale`
+ * is the UI zoom (font-scaling.js getUiScale) they are multiplied by, so the
+ * panel keeps its proportions next to the scaled stylesheet. The trigger rect
+ * and the viewport are measured, never scaled.
  */
 export function resolveCwdMenuPlacement({
   triggerRect,
   viewportWidth = 0,
   viewportHeight = 0,
   panelHeight = 0,
-  gap = 6,
-  edge = 8,
-  minHeight = 140,
-  maxHeight = 300,
+  gap: gapBase = 6,
+  edge: edgeBase = 8,
+  minHeight: minHeightBase = 140,
+  maxHeight: maxHeightBase = 300,
+  scale = 1,
 } = {}) {
+  const factor = Number.isFinite(Number(scale)) && Number(scale) > 0 ? Number(scale) : 1;
+  const gap = gapBase * factor;
+  const edge = edgeBase * factor;
+  const minHeight = minHeightBase * factor;
+  const maxHeight = maxHeightBase * factor;
   const top = Number(triggerRect?.top) || 0;
   const left = Number(triggerRect?.left) || 0;
   const width = Math.max(0, Number(triggerRect?.width) || 0);
@@ -30,13 +42,13 @@ export function resolveCwdMenuPlacement({
 
   const spaceBelow = Math.max(0, viewportHeight - bottom - gap - edge);
   const spaceAbove = Math.max(0, top - gap - edge);
-  const flip = spaceBelow < FLIP_THRESHOLD_PX && spaceAbove > spaceBelow;
+  const flip = spaceBelow < FLIP_THRESHOLD_PX * factor && spaceAbove > spaceBelow;
   const available = flip ? spaceAbove : spaceBelow;
 
   const desiredHeight = panelHeight > 0 ? Math.min(panelHeight, maxHeight) : maxHeight;
   const resolvedMaxHeight = clamp(Math.min(desiredHeight, available), Math.min(minHeight, available), maxHeight);
 
-  const resolvedWidth = width > 0 ? width : 260;
+  const resolvedWidth = width > 0 ? width : FALLBACK_WIDTH_PX * factor;
   const maxLeft = Math.max(edge, viewportWidth - resolvedWidth - edge);
   const resolvedLeft = clamp(left, edge, maxLeft);
   const resolvedTop = flip

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,234 @@
+// 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: '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.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,
+  pinCount = 0,
+  hiddenCount = 0,
+  fullscreenAvailable = false,
+} = {}) {
+  if (sharedMode) {
+    return { pins: false, hidden: false, search: false, context: false, usage: false, theme: true, fullscreen: false };
+  }
+  return {
+    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/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() {