@oar-sh/oar 0.9.20 → 0.9.22

package/server/public/app/live-activity-cap.mjs

@@ -0,0 +1,103 @@
+// "Tool lines shown while an agent works" (Settings › General ›
+// Appearance): how many of its newest tool lines each agent of a running
+// turn keeps in the live bubble, the main agent and every sub-agent apart.
+// A setting of this browser, kept in localStorage like the scroll-on-send
+// one. The slider runs from 10 to 500 by 10 and has one more step at the far
+// end, no limit (stored as '0'). The document and the storage are passed in
+// by the tests.
+
+import { IN_FLIGHT_ACTIVITY_LIMIT_PER_THREAD, LIVE_ACTIVITY_CAP } from './activity-replay-state.mjs';
+
+export const LIVE_ACTIVITY_CAP_STORAGE_KEY = 'copilot_live_activity_cap';
+export const LIVE_ACTIVITY_CAP_SLIDER_ID = 'live-activity-cap-slider';
+export const LIVE_ACTIVITY_CAP_VALUE_ID = 'live-activity-cap-value';
+// One source with the relay's default and its most per thread.
+export const LIVE_ACTIVITY_CAP_DEFAULT = LIVE_ACTIVITY_CAP;
+export const LIVE_ACTIVITY_CAP_MIN = 10;
+export const LIVE_ACTIVITY_CAP_MAX = IN_FLIGHT_ACTIVITY_LIMIT_PER_THREAD;
+export const LIVE_ACTIVITY_CAP_STEP = 10;
+/** The slider's last step: no limit. */
+export const LIVE_ACTIVITY_CAP_UNLIMITED_POSITION = LIVE_ACTIVITY_CAP_MAX + LIVE_ACTIVITY_CAP_STEP;
+/** The cap that keeps every line. */
+export const LIVE_ACTIVITY_CAP_UNLIMITED = 0;
+
+function clampToStep(value) {
+  const stepped = Math.round(value / LIVE_ACTIVITY_CAP_STEP) * LIVE_ACTIVITY_CAP_STEP;
+  return Math.min(LIVE_ACTIVITY_CAP_MAX, Math.max(LIVE_ACTIVITY_CAP_MIN, stepped));
+}
+
+/** The cap a stored value stands for: a count, or 0 for no limit. */
+export function parseLiveActivityCap(stored) {
+  const text = String(stored ?? '').trim();
+  if (!text) return LIVE_ACTIVITY_CAP_DEFAULT;
+  const value = Number(text);
+  if (!Number.isFinite(value) || value < 0) return LIVE_ACTIVITY_CAP_DEFAULT;
+  if (value === 0) return LIVE_ACTIVITY_CAP_UNLIMITED;
+  return clampToStep(value);
+}
+
+export function serializeLiveActivityCap(cap) {
+  const value = Number(cap);
+  if (!Number.isFinite(value) || value <= 0) return '0';
+  return String(clampToStep(value));
+}
+
+/** The cap at a slider position; the far end is no limit. */
+export function liveActivityCapFromSlider(position) {
+  const value = Number(position);
+  if (!Number.isFinite(value)) return LIVE_ACTIVITY_CAP_DEFAULT;
+  if (value >= LIVE_ACTIVITY_CAP_UNLIMITED_POSITION) return LIVE_ACTIVITY_CAP_UNLIMITED;
+  return clampToStep(value);
+}
+
+export function sliderPositionForLiveActivityCap(cap) {
+  const value = Number(cap);
+  return Number.isFinite(value) && value > 0 ? clampToStep(value) : LIVE_ACTIVITY_CAP_UNLIMITED_POSITION;
+}
+
+export function formatLiveActivityCap(cap) {
+  const value = Number(cap);
+  if (!Number.isFinite(value) || value <= 0) return 'No limit';
+  return `${clampToStep(value)} lines`;
+}
+
+function storage() {
+  try { return globalThis.localStorage || null; } catch { return null; }
+}
+
+/** The cap in force: a count per agent, or 0 for no limit. */
+export function liveActivityCap(store = storage()) {
+  try {
+    return parseLiveActivityCap(store?.getItem(LIVE_ACTIVITY_CAP_STORAGE_KEY));
+  } catch {
+    return LIVE_ACTIVITY_CAP_DEFAULT;
+  }
+}
+
+function showValue(doc, cap) {
+  const text = formatLiveActivityCap(cap);
+  const label = doc?.getElementById?.(LIVE_ACTIVITY_CAP_VALUE_ID);
+  if (label) label.textContent = text;
+  doc?.getElementById?.(LIVE_ACTIVITY_CAP_SLIDER_ID)?.setAttribute?.('aria-valuetext', text);
+}
+
+export function syncLiveActivityCapSlider(doc = globalThis.document, store = storage()) {
+  const cap = liveActivityCap(store);
+  const slider = doc?.getElementById?.(LIVE_ACTIVITY_CAP_SLIDER_ID);
+  if (slider) slider.value = String(sliderPositionForLiveActivityCap(cap));
+  showValue(doc, cap);
+}
+
+/** While the thumb moves: the label follows, nothing is saved. */
+export function previewLiveActivityCap(position, { doc = globalThis.document } = {}) {
+  showValue(doc, liveActivityCapFromSlider(position));
+}
+
+/** Saves the slider's value; returns the cap. */
+export function updateLiveActivityCap(position, { doc = globalThis.document, store = storage(), onChange = null } = {}) {
+  const cap = liveActivityCapFromSlider(position);
+  try { store?.setItem(LIVE_ACTIVITY_CAP_STORAGE_KEY, serializeLiveActivityCap(cap)); } catch {}
+  syncLiveActivityCapSlider(doc, store);
+  if (typeof onChange === 'function') onChange(cap);
+  return cap;
+}

package/server/public/app/phone-landscape-ui.js

@@ -0,0 +1,225 @@
+// A phone turned sideways: keeps :root[data-phone-landscape] in step
+// (phone-landscape.mjs) and runs its typing mode (phone-typing-state.mjs).
+//
+// While the keyboard is up (body.phone-typing):
+// - the label row folds into a floating ⚙ (#composer-float-settings) that
+//   opens the ⚙ panel and leaves the focus in the message box;
+// - the background-task line folds into a floating 🤖
+//   (#background-tasks-float), shown only while the panel would show; a tap
+//   shows the panel as an overlay above the composer
+//   (body.phone-typing-tasks-open), a second tap or a tap elsewhere hides it.
+// Both buttons sit on the composer's top edge on the right (index.html).
+// Everything comes back when the keyboard goes down; an open ⚙ panel holds
+// typing mode until it closes (phone-typing-state.mjs).
+
+import {
+  closeComposerSettings,
+  isComposerSettingsOpen,
+  openComposerSettings,
+  repositionComposerSettings,
+} from './composer-settings-ui.js';
+import { PHONE_LANDSCAPE_CHANGE_EVENT, syncPhoneLandscapeAttribute } from './phone-landscape.mjs';
+import { createPhoneTypingBaseline, resolvePhoneTyping } from './phone-typing-state.mjs';
+
+export const PHONE_TYPING_CLASS = 'phone-typing';
+export const PHONE_TYPING_TASKS_OPEN_CLASS = 'phone-typing-tasks-open';
+
+let deps = {};
+let bound = false;
+let typing = false;
+let taskOverlayOpen = false;
+let baseline = createPhoneTypingBaseline();
+
+function el(id) {
+  return typeof document === 'undefined' ? null : document.getElementById(id);
+}
+
+function isShared() {
+  try {
+    if (deps.isSharedReaderMode?.() === true) return true;
+  } catch {}
+  return document.body?.classList?.contains('shared-reader-mode') === true;
+}
+
+// The visible height, and the tallest seen at this width (the layout height
+// with no keyboard under it; a turn of the phone starts from the old one).
+function measureViewport() {
+  const innerHeight = Number(window.innerHeight) || 0;
+  const visualHeight = Number(window.visualViewport?.height) || innerHeight;
+  const layoutHeight = baseline.note(Number(window.innerWidth) || 0, Math.max(innerHeight, visualHeight));
+  return { layoutHeight, visualHeight };
+}
+
+function syncFloats() {
+  const gear = el('composer-float-settings');
+  if (gear) {
+    gear.hidden = !typing;
+    gear.setAttribute('aria-expanded', isComposerSettingsOpen() ? 'true' : 'false');
+  }
+  const robot = el('background-tasks-float');
+  const panel = el('background-tasks-panel');
+  const panelShows = !!panel && !panel.hidden;
+  if (taskOverlayOpen && !(typing && panelShows)) setTaskOverlayOpen(false);
+  if (robot) {
+    robot.hidden = !(typing && panelShows);
+    robot.setAttribute('aria-expanded', taskOverlayOpen ? 'true' : 'false');
+    const summary = String(el('background-tasks-summary')?.textContent || '').trim();
+    const label = summary ? `Background tasks: ${summary}` : 'Background tasks';
+    if (robot.title !== label) robot.title = label;
+    if (robot.getAttribute('aria-label') !== label) robot.setAttribute('aria-label', label);
+  }
+}
+
+function setTaskOverlayOpen(open) {
+  taskOverlayOpen = !!open && typing;
+  document.body?.classList?.toggle(PHONE_TYPING_TASKS_OPEN_CLASS, taskOverlayOpen);
+  el('background-tasks-float')?.setAttribute('aria-expanded', taskOverlayOpen ? 'true' : 'false');
+}
+
+function setTyping(next) {
+  if (next === typing) return;
+  typing = next;
+  document.body?.classList?.toggle(PHONE_TYPING_CLASS, typing);
+  if (!typing) setTaskOverlayOpen(false);
+  // An open ⚙ panel moves between the label row and the floating ⚙.
+  syncFloats();
+  repositionComposerSettings();
+}
+
+/** Recomputes phone landscape and typing mode; returns whether typing mode is on. */
+export function syncPhoneTyping() {
+  if (typeof document === 'undefined' || !document.body) return false;
+  const phoneLandscape = syncPhoneLandscapeAttribute(window);
+  const input = el('msg-input');
+  const inputFocused = !!input && document.activeElement === input;
+  const { layoutHeight, visualHeight } = measureViewport();
+  // Only the ⚙ panel holds: its selects take the focus (the keyboard goes),
+  // while a press in the task overlay keeps it (bindEvents).
+  const held = typing && isComposerSettingsOpen();
+  setTyping(!isShared() && resolvePhoneTyping({ phoneLandscape, inputFocused, layoutHeight, visualHeight, held }));
+  syncFloats();
+  return typing;
+}
+
+export function isPhoneTypingActive() {
+  return typing;
+}
+
+export function isPhoneTypingTaskOverlayOpen() {
+  return taskOverlayOpen;
+}
+
+/** The floating 🤖's tap: shows or hides the task panel over the composer. */
+export function togglePhoneTypingTaskOverlay() {
+  setTaskOverlayOpen(!taskOverlayOpen);
+  syncPhoneTyping();
+}
+
+/** The floating ⚙'s tap: opens the ⚙ panel, the message box keeping the focus. */
+export function togglePhoneTypingSettings() {
+  if (isComposerSettingsOpen()) closeComposerSettings();
+  else openComposerSettings({ keepComposerFocus: true });
+  syncPhoneTyping();
+}
+
+function eventPath(event) {
+  return typeof event.composedPath === 'function' ? event.composedPath() : [event.target];
+}
+
+// A press that would take the focus from the message box (and the keyboard
+// with it) is cancelled; the click still comes.
+function keepComposerFocus(event) {
+  if (event.button !== undefined && event.button !== 0) return;
+  event.preventDefault();
+}
+
+function isTextEntry(node) {
+  return !!node && typeof node.closest === 'function'
+    && !!node.closest('input, textarea, select, [contenteditable="true"]');
+}
+
+function bindEvents() {
+  if (bound) return;
+  bound = true;
+  const sync = () => { syncPhoneTyping(); };
+  const gear = el('composer-float-settings');
+  if (gear) {
+    gear.addEventListener('pointerdown', keepComposerFocus);
+    gear.addEventListener('mousedown', keepComposerFocus);
+    gear.addEventListener('click', (event) => {
+      event.preventDefault();
+      togglePhoneTypingSettings();
+    });
+  }
+  const robot = el('background-tasks-float');
+  if (robot) {
+    robot.addEventListener('pointerdown', keepComposerFocus);
+    robot.addEventListener('mousedown', keepComposerFocus);
+    robot.addEventListener('click', (event) => {
+      event.preventDefault();
+      togglePhoneTypingTaskOverlay();
+    });
+  }
+  const panel = el('background-tasks-panel');
+  if (panel) {
+    // In the overlay the summary and the rows keep the keyboard up, so the
+    // panel does not move under the finger; a text field still takes the focus.
+    const holdFocus = (event) => {
+      if (!taskOverlayOpen || isTextEntry(event.target)) return;
+      keepComposerFocus(event);
+    };
+    panel.addEventListener('pointerdown', holdFocus);
+    panel.addEventListener('mousedown', holdFocus);
+  }
+  // A press anywhere but the overlay and its 🤖 hides the overlay. Capture
+  // phase, so a control that stops the event still counts.
+  document.addEventListener('pointerdown', (event) => {
+    if (!taskOverlayOpen) return;
+    const path = eventPath(event);
+    if ((panel && path.includes(panel)) || (robot && path.includes(robot))) return;
+    setTaskOverlayOpen(false);
+    syncPhoneTyping();
+  }, true);
+  document.addEventListener('keydown', (event) => {
+    if (!taskOverlayOpen || event.key !== 'Escape') return;
+    setTaskOverlayOpen(false);
+    syncPhoneTyping();
+  }, true);
+
+  const input = el('msg-input');
+  input?.addEventListener('focus', sync);
+  input?.addEventListener('blur', sync);
+  window.addEventListener('resize', sync, { passive: true });
+  window.addEventListener('orientationchange', sync, { passive: true });
+  window.visualViewport?.addEventListener?.('resize', sync, { passive: true });
+  // store.js flips the attribute on its own viewport pass too.
+  window.addEventListener(PHONE_LANDSCAPE_CHANGE_EVENT, sync);
+  try {
+    window.matchMedia?.('(pointer: coarse)')?.addEventListener?.('change', sync);
+  } catch {}
+  if (typeof MutationObserver === 'function') {
+    // The ⚙ panel closing ends a hold; the task panel showing or going
+    // shows or hides the 🤖; the summary names it.
+    const settings = el('composer-settings');
+    if (settings) new MutationObserver(sync).observe(settings, { attributes: true, attributeFilter: ['hidden'] });
+    if (panel) new MutationObserver(() => syncFloats()).observe(panel, { attributes: true, attributeFilter: ['hidden'] });
+    const summary = el('background-tasks-summary');
+    if (summary) new MutationObserver(() => syncFloats()).observe(summary, { childList: true, characterData: true, subtree: true });
+  }
+}
+
+export function initPhoneLandscape(options = {}) {
+  if (typeof document === 'undefined') return;
+  deps = options && typeof options === 'object' ? options : {};
+  bindEvents();
+  syncPhoneTyping();
+}
+
+export function __resetPhoneLandscapeForTests() {
+  deps = {};
+  bound = false;
+  typing = false;
+  taskOverlayOpen = false;
+  baseline = createPhoneTypingBaseline();
+  document.body?.classList?.remove(PHONE_TYPING_CLASS, PHONE_TYPING_TASKS_OPEN_CLASS);
+}

package/server/public/app/phone-landscape.mjs

@@ -0,0 +1,99 @@
+// "Phone landscape": a touch phone turned sideways. Its width is often over
+// 680px, so it gets the desktop layout; :root[data-phone-landscape] lets the
+// stylesheet and the views treat it as the phone it is (one-line header,
+// typing mode, no composer focus on a session pick, the list closing after a
+// pick).
+//
+// The same phone as :root[data-phone-screen] (the screen's short side is
+// 500px or less) with a coarse pointer, held in landscape. The orientation
+// comes from the screen, never from the viewport: the on-screen keyboard
+// shrinks the viewport (interactive-widget=resizes-content), and a portrait
+// phone mid-typing would read as landscape.
+
+export const PHONE_SCREEN_MAX_SHORT_SIDE_PX = 500;
+export const PHONE_LANDSCAPE_ATTRIBUTE = 'data-phone-landscape';
+/** Fired on window when the attribute flips. */
+export const PHONE_LANDSCAPE_CHANGE_EVENT = 'oar:phone-landscape-change';
+
+/**
+ * @param {object} input
+ * @param {boolean} [input.coarsePointer] `(pointer: coarse)` matches
+ * @param {number} [input.screenWidth] screen.width
+ * @param {number} [input.screenHeight] screen.height
+ * @param {string} [input.orientationType] screen.orientation.type, when known
+ * @param {number|null} [input.orientationAngle] window.orientation (old iOS), when known
+ * @returns {boolean}
+ */
+export function isPhoneLandscape({
+  coarsePointer = false,
+  screenWidth = 0,
+  screenHeight = 0,
+  orientationType = '',
+  orientationAngle = null,
+} = {}) {
+  if (!coarsePointer) return false;
+  const width = Number(screenWidth) || 0;
+  const height = Number(screenHeight) || 0;
+  const shortSide = Math.min(width, height);
+  if (!(shortSide > 0) || shortSide > PHONE_SCREEN_MAX_SHORT_SIDE_PX) return false;
+  const type = String(orientationType || '');
+  if (type.startsWith('landscape')) return true;
+  if (type.startsWith('portrait')) return false;
+  // iOS before 16.4 has no screen.orientation and never swaps screen.width
+  // and screen.height; its window.orientation is 90 or -90 on the side.
+  const angle = Number(orientationAngle);
+  if (orientationAngle !== null && orientationAngle !== undefined && Number.isFinite(angle)) {
+    return Math.abs(angle) === 90;
+  }
+  return width > height;
+}
+
+/** The inputs of isPhoneLandscape, read from a window. */
+export function readPhoneLandscapeInputs(win = globalThis.window) {
+  if (!win) return {};
+  let coarsePointer = false;
+  try { coarsePointer = !!win.matchMedia?.('(pointer: coarse)')?.matches; } catch {}
+  const screenRef = win.screen || {};
+  const rawAngle = win.orientation;
+  return {
+    coarsePointer,
+    screenWidth: Number(screenRef.width) || 0,
+    screenHeight: Number(screenRef.height) || 0,
+    orientationType: String(screenRef.orientation?.type || ''),
+    orientationAngle: typeof rawAngle === 'number' ? rawAngle : null,
+  };
+}
+
+/**
+ * Sets or clears :root[data-phone-landscape] from the window; announces a
+ * flip with PHONE_LANDSCAPE_CHANGE_EVENT. Returns the current value.
+ */
+export function syncPhoneLandscapeAttribute(win = globalThis.window) {
+  const root = win?.document?.documentElement;
+  if (!root) return false;
+  const next = isPhoneLandscape(readPhoneLandscapeInputs(win));
+  const before = root.hasAttribute(PHONE_LANDSCAPE_ATTRIBUTE);
+  if (next !== before) {
+    root.toggleAttribute(PHONE_LANDSCAPE_ATTRIBUTE, next);
+    try {
+      if (typeof win.CustomEvent === 'function') {
+        win.dispatchEvent(new win.CustomEvent(PHONE_LANDSCAPE_CHANGE_EVENT, { detail: { phoneLandscape: next } }));
+      }
+    } catch {}
+  }
+  return next;
+}
+
+/** Whether the page is in phone landscape now (the attribute). */
+export function isPhoneLandscapeLayout(doc = globalThis.document) {
+  return !!doc?.documentElement?.hasAttribute?.(PHONE_LANDSCAPE_ATTRIBUTE);
+}
+
+/**
+ * Whether a pick from the session list collapses the list. On a portrait
+ * phone the list is an overlay that openConversation closes; a phone turned
+ * sideways has the desktop's persistent list, which a pick now collapses too.
+ */
+export function shouldCollapseListAfterPick({ phoneLandscape = false, overlayList = false, listOpen = false } = {}) {
+  return !!phoneLandscape && !overlayList && !!listOpen;
+}

package/server/public/app/phone-typing-state.mjs

@@ -0,0 +1,104 @@
+// Typing mode on a phone turned sideways (body.phone-typing): while the
+// on-screen keyboard is up, the composer's label row and the background-task
+// line fold into two small floating buttons, so the few rows the keyboard
+// leaves go to the transcript and the message box. DOM-free; the wiring is in
+// phone-landscape-ui.js.
+//
+// The keyboard is up when the message box has the focus and the visible area
+// is clearly shorter than the layout height. The layout height is the
+// tallest visible height seen at the current width (composer-keyboard.mjs's
+// baseline): on Android the keyboard shrinks the layout viewport with the
+// visual one (interactive-widget=resizes-content), so window.innerHeight
+// alone would never show it. A browser's URL bar coming and going moves the
+// height by about 56px, well under the threshold. A turn of the phone seeds
+// the new width's height from the old one (createPhoneTypingBaseline).
+
+/** A visible area this much shorter has a keyboard under it (either test). */
+export const PHONE_TYPING_MIN_SHRINK_PX = 150;
+export const PHONE_TYPING_MIN_SHRINK_RATIO = 0.25;
+
+/** Whether the visible height is clearly shorter than the layout height. */
+export function isKeyboardShrink({ layoutHeight = 0, visualHeight = 0 } = {}) {
+  const layout = Number(layoutHeight) || 0;
+  const visual = Number(visualHeight) || 0;
+  if (!(layout > 0) || !(visual > 0)) return false;
+  const shrink = layout - visual;
+  if (shrink <= 0) return false;
+  return shrink > PHONE_TYPING_MIN_SHRINK_PX || shrink >= layout * PHONE_TYPING_MIN_SHRINK_RATIO;
+}
+
+/**
+ * The layout height a turn of the phone should give, from the tallest height
+ * seen before it (`previous`: `{ width, tallest }`), or 0 when the new width
+ * is no turn of the old one. The bars (status, URL) cost about the same
+ * either way up, so the old width less those bars:
+ * `previous.width - (newWidth - previous.tallest)`.
+ */
+export function rotatedLayoutHeight(previous, newWidth) {
+  const width = Math.round(Number(previous?.width) || 0);
+  const tallest = Number(previous?.tallest) || 0;
+  const next = Math.round(Number(newWidth) || 0);
+  if (!(width > 0) || !(tallest > 0) || !(next > 0) || next === width) return 0;
+  const wasPortrait = tallest > width;
+  // Upright to sideways makes the width grow, and back makes it shrink.
+  if (wasPortrait ? next <= width : next >= width) return 0;
+  const estimate = width + tallest - next;
+  if (!(estimate > 0)) return 0;
+  // The estimate must stand the other way up than before.
+  if (wasPortrait ? estimate >= next : estimate <= next) return 0;
+  return estimate;
+}
+
+/**
+ * The tallest visible height per width, like composer-keyboard.mjs's
+ * baseline, but a turn of the phone starts the new width from the old one
+ * (rotatedLayoutHeight) instead of from nothing: turned with the keyboard
+ * up, the first height seen is already the short one, and typing mode would
+ * stay off until the keyboard went down once. A height seen later that is
+ * taller still wins.
+ */
+export function createPhoneTypingBaseline() {
+  const tallestByWidth = new Map();
+  let last = null;
+  return {
+    note(width, height) {
+      const key = Math.round(Number(width) || 0);
+      const value = Math.max(0, Number(height) || 0);
+      let tallest = tallestByWidth.get(key) || 0;
+      if (!tallest && last && last.width !== key) tallest = rotatedLayoutHeight(last, key);
+      tallest = Math.max(tallest, value);
+      tallestByWidth.set(key, tallest);
+      last = { width: key, tallest };
+      return tallest;
+    },
+  };
+}
+
+/**
+ * Typing mode on or off.
+ *
+ * `held`: the ⚙ panel, opened in typing mode, is still open. Typing mode
+ * then stays on until it closes, so the panel does not jump from above the
+ * floating ⚙ to above the label row when a select in it takes the focus
+ * from the message box and the keyboard goes down.
+ *
+ * @param {object} input
+ * @param {boolean} [input.phoneLandscape] :root[data-phone-landscape]
+ * @param {boolean} [input.inputFocused] #msg-input has the focus
+ * @param {number} [input.layoutHeight] the tallest visible height at this width
+ * @param {number} [input.visualHeight] window.visualViewport.height
+ * @param {boolean} [input.held] typing mode is on and the ⚙ panel is open
+ * @returns {boolean}
+ */
+export function resolvePhoneTyping({
+  phoneLandscape = false,
+  inputFocused = false,
+  layoutHeight = 0,
+  visualHeight = 0,
+  held = false,
+} = {}) {
+  if (!phoneLandscape) return false;
+  if (held) return true;
+  if (!inputFocused) return false;
+  return isKeyboardShrink({ layoutHeight, visualHeight });
+}

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

@@ -16,6 +16,7 @@ import {
   summaryModalState,
 } from './store.js';
 import { updateMessagePin } from './api-client.js';
+import { notifyHeaderActionsChanged } from './header-priority-actions.mjs';
 
 export const PINNED_MESSAGES_MODAL_KIND = 'pinned-messages';
 
@@ -93,12 +94,16 @@ function syncPinnedHeaderButton() {
   const button = document.getElementById('pinned-messages-btn');
   if (!button) return;
   const count = getConversationPins(currentConversationId).length;
+  // Available or not; whether it fits in the header or goes into ︙ is the
+  // priority+ pass's call, which reads the count from here.
   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 ? `Pinned messages (${count})` : 'Pinned messages';
   button.setAttribute('title', label);
   button.setAttribute('aria-label', label);
+  notifyHeaderActionsChanged();
 }
 
 function pinnedModalContent() {

package/server/public/app/push-settings.js

@@ -130,7 +130,7 @@ function renderDeviceList() {
       || (localSubscriptionEndpoint && device.endpoint === localSubscriptionEndpoint);
     const row = document.createElement('div');
     row.className = 'push-device-row settings-row';
-    row.style.gap = '8px';
+    row.style.gap = 'calc(5px * var(--ui-scale))';
 
     const info = document.createElement('div');
     info.style.flex = '1';
@@ -140,7 +140,7 @@ function renderDeviceList() {
     if (!device.preferences?.enabled) name.textContent += ' — disabled';
     const meta = document.createElement('div');
     meta.className = 'settings-help';
-    meta.style.marginTop = '2px';
+    meta.style.marginTop = 'calc(2px * var(--ui-scale))';
     meta.textContent = `Last delivery: ${formatDeviceTimestamp(device.lastSuccessAt)}${device.lastError ? ` · last error: ${device.lastError}` : ''}`;
     info.appendChild(name);
     info.appendChild(meta);

package/server/public/app/pwa-install.js

@@ -1,5 +1,6 @@
 import { BASE, IS_SHARED_VIEW, showTransientRelayNotice } from './store.js';
 import { loadPwaAppNameSetting, updatePwaAppNameSetting } from './api-client.js';
+import { notifyHeaderActionsChanged } from './header-priority-actions.mjs';
 
 const THEME_COLOR_BASE = '#0d1117';
 const THEME_COLOR_IMMERSIVE = '#161b22';
@@ -265,31 +266,51 @@ export function updateFullscreenButton() {
   const btn = document.getElementById('fullscreen-btn');
   if (!btn) return;
   syncInstalledAppUiState();
+  // The header's priority+ pass (header-priority-actions.mjs) places the
+  // button or its ︙ twin; this only says whether fullscreen is offered at
+  // all (data-header-available) and keeps both labels current.
+  const twin = document.getElementById('chat-menu-fullscreen');
+  const offer = (available) => {
+    const next = available ? '1' : '0';
+    btn.style.display = '';
+    if (!available) btn.hidden = true;
+    if (btn.dataset.headerAvailable !== next) {
+      btn.dataset.headerAvailable = next;
+      notifyHeaderActionsChanged();
+    }
+  };
   if (isInstalledAppMode() || isDisplayModeFullscreen()) {
-    btn.style.display = 'none';
+    offer(false);
     return;
   }
 
   const mobile = window.matchMedia('(max-width: 680px)').matches;
   if (!mobile) {
-    btn.style.display = 'none';
+    offer(false);
     return;
   }
 
   const full = !!document.fullscreenElement;
   const supported = canToggleFullscreen();
-  btn.style.display = 'inline-flex';
+  const wasDisabled = btn.disabled;
   btn.disabled = !supported;
+  // The ︙ twin is disabled with the button (chat-actions-menu-state.mjs reads
+  // btn.disabled) and says why.
+  if (twin) twin.title = supported ? '' : 'Fullscreen not supported on this browser';
+  if (wasDisabled !== btn.disabled) notifyHeaderActionsChanged();
 
   if (full) {
     btn.textContent = '⤢';
     btn.title = 'Exit fullscreen';
+    if (twin) twin.textContent = '⤢ Exit fullscreen';
   } else {
     btn.textContent = '⛶';
     btn.title = isInstalledAppMode()
       ? (supported ? 'Enter fullscreen (recommended for installed app)' : 'Fullscreen not supported on this browser')
       : (supported ? 'Enter fullscreen' : 'Fullscreen not supported on this browser');
+    if (twin) twin.textContent = '⛶ Fullscreen';
   }
+  offer(true);
 }
 
 export function initFullscreenButton() {