@oar-sh/oar 0.9.20 → 0.9.21

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

@@ -1,3 +1,5 @@
+import { revealSelectedTabs, watchTabStripFades } from './tab-strip-fade.mjs';
+
 const SETTINGS_TAB_STORAGE_KEY = 'copilot_settings_tab';
 const SETTINGS_PROVIDER_TAB_STORAGE_KEY = 'copilot_settings_provider_tab';
 
@@ -109,6 +111,7 @@ export function ensureSettingsTabsBound() {
   const modal = document.getElementById('settings-modal');
   if (!modal) return;
   settingsTabsBound = true;
+  watchTabStripFades();
   modal.addEventListener('click', handleTabClick);
   modal.addEventListener('keydown', handleTabKeydown);
 }
@@ -125,5 +128,14 @@ export function selectSettingsTab(tab, providerTab) {
   if (applyTabState('data-settings-provider-tab', 'data-settings-provider-panel', nextProviderTab)) {
     writeLocalStorage(SETTINGS_PROVIDER_TAB_STORAGE_KEY, nextProviderTab);
   }
+  // The selected tabs whole, clear of the strips' fades (a closed dialog
+  // is not laid out: openSettingsModal does it again once it shows).
+  revealSettingsTabs();
   return { tab: nextTab, providerTab: nextProviderTab };
 }
+
+/** Each Settings strip: its selected tab scrolled into view, its fade marked. */
+export function revealSettingsTabs() {
+  const modal = document.getElementById('settings-modal');
+  if (modal) revealSelectedTabs(modal);
+}

package/server/public/app/share-state.js

@@ -1,6 +1,6 @@
 // The relay's active public shares, as it last reported them: one entry per
 // shared conversation (Settings → Shared conversations) and whether the open
-// conversation has one (the ⋯ menu's "Stop sharing"). Read from GET /api/shares
+// conversation has one (the ︙ menu's "Stop sharing"). Read from GET /api/shares
 // when the socket connects and again on every share event; no DOM here.
 
 import { listConversationShares } from './api-client.js';

package/server/public/app/shared-conversations-settings.js

@@ -1,5 +1,5 @@
 // Settings → Sharing: every conversation with a public link, its access log,
-// and the actions on a link (copy, renew, stop). The ⋯ menu's "Stop sharing"
+// and the actions on a link (copy, renew, stop). The ︙ menu's "Stop sharing"
 // uses the same confirmation. The list lives in share-state.js; the socket's
 // share events keep it current while the modal is open.
 
@@ -461,7 +461,7 @@ export function openRenewShareConfirmation(conversationId, title = '') {
   }));
 }
 
-/** ⋯ → Share conversation: the link, made if there is none, to the clipboard. */
+/** ︙ → Share conversation: the link, made if there is none, to the clipboard. */
 export async function shareConversationFromMenu(conversationId) {
   const result = await createConversationShareLink(conversationId);
   const shareUrl = String(result?.shareUrl || '').trim();

package/server/public/app/socket-handlers.js

@@ -105,6 +105,7 @@ import { isLikelyLiveDuplicateMessage } from './live-message-dedupe.mjs';
 import { mergeRelayThoughts } from './relay-thoughts.mjs';
 import { conversationPayloadCache } from './conversation-payload-cache.mjs';
 import { planOnlyAfterBroadcast } from './plan-board-shared.mjs';
+import { noteConversationGone } from './session-history-ui.js';
 
 // A live row of the conversation on screen joins its kept window, so a
 // switch away and back still shows it. Rows of other conversations do not:
@@ -720,7 +721,7 @@ export async function connectSocket(overrideDeps) {
     setPreviews(previews);
   });
   // Public shares: the events name the conversation only; the list (Settings
-  // → Sharing, the ⋯ menu's Stop sharing) is read again.
+  // → Sharing, the ︙ menu's Stop sharing) is read again.
   for (const event of ['share_created', 'share_renewed', 'share_revoked']) {
     socket.on(event, () => {
       void refreshShares().catch(() => {});
@@ -842,7 +843,8 @@ export async function connectSocket(overrideDeps) {
     conversationPayloadCache.forget(targetConversationId);
     await refreshConversations();
     if (currentConvId === sourceConversationId) {
-      await openConversation(targetConversationId);
+      // The successor takes the compacted one's history entry: no step back into it.
+      await openConversation(targetConversationId, { history: 'replace' });
     } else {
       updateCompactButton();
     }
@@ -1010,6 +1012,7 @@ export async function connectSocket(overrideDeps) {
   });
   socket.on('conversation_deleted', ({ conversationId }) => {
     delete conversations[conversationId];
+    noteConversationGone(conversationId);
     conversationPayloadCache.forget(conversationId);
     for (const [id, question] of relayQuestions.entries()) {
       if (question?.conversationId === conversationId) relayQuestions.delete(id);

package/server/public/app/status-view.mjs

@@ -285,12 +285,28 @@ export function leaveStatusView() {
   return wasActive;
 }
 
-export async function toggleStatusView() {
+/**
+ * Nothing to go back to (opened with nothing open, as after an unknown
+ * link): the header and the transcript give way to the empty screen.
+ * Loaded on demand: the transcript's module is already in the page.
+ */
+async function showNothingOpen() {
+  const { clearOpenConversation } = await import('./journal-view.js');
+  clearOpenConversation({ history: false });
+}
+
+/**
+ * Opens Status, or leaves it for the conversation it was opened from. Opened
+ * from the Inbox there is none stored: `returnTo` (the session the history
+ * stands on) is opened instead, so the transcript never keeps Status's rows.
+ */
+export async function toggleStatusView({ returnTo = '' } = {}) {
   if (statusViewActive) {
     leaveStatusView();
-    const restoreId = previousConversationId;
+    const restoreId = previousConversationId || String(returnTo || '').trim();
     previousConversationId = '';
     if (restoreId) await window.openConversation?.(restoreId, { restoreScroll: true });
+    else await showNothingOpen();
     return;
   }
   previousConversationId = String(currentConvId || '').trim();

package/server/public/app/store.js

@@ -7,6 +7,8 @@ import { isChatInteractionHeld } from './selection-guard.mjs';
 import { nextSubagentStatus } from './subagent-fold.mjs';
 import { useStrictStrikethrough } from './markdown-strikethrough.mjs';
 import { parseGroupFoldChoices, pruneGroupFoldChoices } from './conversation-group-state.mjs';
+import { isPhoneLandscapeLayout, shouldCollapseListAfterPick, syncPhoneLandscapeAttribute } from './phone-landscape.mjs';
+import { FONT_SCALE_CHANGE_EVENT } from './font-scaling.js';
 
 function resolveAppBase() {
   const configuredBase = typeof window.__COPILOT_APP_CONFIG?.basePath === 'string'
@@ -265,26 +267,37 @@ export function pruneConversationGroups(keepGroupIds) {
   return dropped;
 }
 
-export function readConversationGroupFoldChoices() {
-  return parseGroupFoldChoices(localStorage.getItem(CONVERSATION_GROUP_FOLDS_STORAGE_KEY) || '');
+// The live list and the Archived view keep their fold choices apart.
+function conversationGroupFoldsStorageKey(archived) {
+  return archived === true ? `${CONVERSATION_GROUP_FOLDS_STORAGE_KEY}_archived` : CONVERSATION_GROUP_FOLDS_STORAGE_KEY;
+}
+
+export function readConversationGroupFoldChoices({ archived = false } = {}) {
+  return parseGroupFoldChoices(localStorage.getItem(conversationGroupFoldsStorageKey(archived)) || '');
 }
 
 // The stored fold choices are trimmed to the loaded groups only past this
-// size: a choice for a group on an older page or in the other view must
-// not go with every toggle.
+// size: a choice for a group on an older page must not go with every toggle.
 const CONVERSATION_GROUP_FOLDS_MAX = 300;
 
-/** Stores the user's fold choice for a group. */
-export function setConversationGroupFoldChoice(groupId, choice) {
-  const id = String(groupId || '').trim();
-  if (!id) return;
-  let next = readConversationGroupFoldChoices();
-  if (Object.keys(next).length > CONVERSATION_GROUP_FOLDS_MAX) {
-    next = pruneGroupFoldChoices(next, [...Object.keys(conversationGroups), id]);
+/** Stores the user's fold choice for a group, in the live list or the Archived view. */
+export function setConversationGroupFoldChoice(groupId, choice, { archived = false } = {}) {
+  setConversationGroupFoldChoices([groupId], choice, { archived });
+}
+
+/** Stores one fold choice for several groups at once (fold all, unfold all). */
+export function setConversationGroupFoldChoices(groupIds, choice, { archived = false } = {}) {
+  const ids = (Array.isArray(groupIds) ? groupIds : []).map((groupId) => String(groupId || '').trim()).filter(Boolean);
+  if (!ids.length) return;
+  let next = readConversationGroupFoldChoices({ archived });
+  if (Object.keys(next).length + ids.length > CONVERSATION_GROUP_FOLDS_MAX) {
+    next = pruneGroupFoldChoices(next, [...Object.keys(conversationGroups), ...ids]);
+  }
+  for (const id of ids) {
+    if (choice === 'open' || choice === 'folded') next[id] = choice;
+    else delete next[id];
   }
-  if (choice === 'open' || choice === 'folded') next[id] = choice;
-  else delete next[id];
-  localStorage.setItem(CONVERSATION_GROUP_FOLDS_STORAGE_KEY, JSON.stringify(next));
+  localStorage.setItem(conversationGroupFoldsStorageKey(archived), JSON.stringify(next));
 }
 
 export function setConversationWatcherCount(conversationId, count) {
@@ -744,6 +757,14 @@ export function isMobileComposerViewport() {
   return window.matchMedia('(max-width: 680px)').matches;
 }
 
+// A phone either way round: the portrait layout above, or a phone turned
+// sideways, which has the desktop layout (:root[data-phone-landscape]).
+// Opening a session leaves the message box unfocused here, so no keyboard
+// comes up by itself.
+export function isPhoneComposerViewport() {
+  return isMobileComposerViewport() || isPhoneLandscapeLayout();
+}
+
 export function releaseComposerFocusAfterSend(input) {
   if (!input || !isMobileComposerViewport()) return;
   try { input.blur(); } catch {}
@@ -1131,18 +1152,30 @@ function measureSidebarHeaderMinWidthPx() {
     sectionCount += 1;
   }
 
+  // New Chat grows into the free room, so its box says nothing: its label's
+  // own width is what the head wraps by.
   const newConversationButton = document.getElementById('new-conv-btn');
   if (isVisibleElement(newConversationButton)) {
     const buttonStyle = window.getComputedStyle(newConversationButton);
-    neededWidth += Math.ceil(parseCssPx(buttonStyle.minWidth));
+    let labelWidth = 0;
+    try {
+      const range = document.createRange();
+      range.selectNodeContents(newConversationButton);
+      labelWidth = range.getBoundingClientRect().width || 0;
+    } catch {}
+    const natural = labelWidth
+      + parseCssPx(buttonStyle.paddingLeft) + parseCssPx(buttonStyle.paddingRight)
+      + parseCssPx(buttonStyle.borderLeftWidth) + parseCssPx(buttonStyle.borderRightWidth);
+    neededWidth += Math.ceil(Math.max(parseCssPx(buttonStyle.minWidth), natural));
     sectionCount += 1;
   }
 
+  // These two keep their own width (Inbox grows with its count).
   for (const id of ['status-btn', 'inbox-btn']) {
     const headerButton = document.getElementById(id);
     if (!isVisibleElement(headerButton)) continue;
     const buttonStyle = window.getComputedStyle(headerButton);
-    neededWidth += Math.ceil(parseCssPx(buttonStyle.minWidth));
+    neededWidth += Math.ceil(Math.max(parseCssPx(buttonStyle.minWidth), headerButton.getBoundingClientRect().width || 0));
     sectionCount += 1;
   }
 
@@ -1260,6 +1293,23 @@ export function toggleSidebar(forceOpen = null) {
   setDesktopSidebarCollapsed(!nextOpen);
 }
 
+/**
+ * A session picked from the list (a tap on its row, or Open in its menu). A
+ * phone turned sideways has the desktop's persistent list; the pick collapses
+ * it, as the overlay list closes on a portrait phone (openConversation's
+ * closeSidebar). A long press never gets here: it opens the row menu, and
+ * the click its release makes is swallowed (context-menu.mjs).
+ */
+export function collapseSidebarAfterListPick() {
+  const collapse = shouldCollapseListAfterPick({
+    phoneLandscape: isPhoneLandscapeLayout(),
+    overlayList: isOverlaySidebarViewport(),
+    listOpen: isSidebarOpen(),
+  });
+  if (collapse) toggleSidebar(false);
+  return collapse;
+}
+
 export function syncSidebarLayoutState() {
   applySidebarWidthPercent(readSidebarWidthPercentForCurrentOrientation(), { persist: false });
   if (isOverlaySidebarViewport()) {
@@ -1312,11 +1362,30 @@ export function initSidebarLayout() {
   const resync = () => syncSidebarLayoutState();
   window.addEventListener('resize', resync, { passive: true });
   window.addEventListener('orientationchange', resync, { passive: true });
+  // A zoom changes the head's buttons, and with them the narrowest list.
+  window.addEventListener(FONT_SCALE_CHANGE_EVENT, resync);
   const chatHeader = document.getElementById('chat-header');
   if (chatHeader && typeof ResizeObserver === 'function') {
     const observer = new ResizeObserver(syncMobileSidebarTopOffset);
     observer.observe(chatHeader);
   }
+  // The Inbox count arrives after the first pass (and changes): the list
+  // widens to keep the head on one row where it can. Neither button takes
+  // its width from the list's, so this cannot feed back.
+  if (typeof ResizeObserver === 'function') {
+    const headButtons = ['status-btn', 'inbox-btn'].map((id) => document.getElementById(id)).filter(Boolean);
+    const widths = new Map();
+    const headObserver = new ResizeObserver((entries) => {
+      let changed = false;
+      for (const entry of entries) {
+        const width = Math.round(entry.contentRect?.width || 0);
+        if (widths.get(entry.target) !== width) changed = true;
+        widths.set(entry.target, width);
+      }
+      if (changed && !isOverlaySidebarViewport()) syncSidebarLayoutState();
+    });
+    for (const button of headButtons) headObserver.observe(button);
+  }
 }
 
 export function setCompactInFlight(value) {
@@ -1436,6 +1505,8 @@ function syncScreenShortSide() {
   if (!shortSide) return;
   document.documentElement.style.setProperty('--screen-short-side', `${shortSide}px`);
   document.documentElement.toggleAttribute('data-phone-screen', shortSide <= 500);
+  // The same screen, turned sideways: :root[data-phone-landscape].
+  syncPhoneLandscapeAttribute(window);
 }
 
 export function syncViewportMetrics() {

package/server/public/app/subagent-viewer.mjs

@@ -16,7 +16,7 @@
 
 import { apiFetch, cancelSubagentRun, loadSharedSubagentRecord } from './api-client.js';
 import { renderMarkdownPreview } from './router.js';
-import { currentConvId, getSubagentRun, IS_SHARED_VIEW, upsertSubagentRun } from './store.js';
+import { closeSummaryModal, currentConvId, getSubagentRun, IS_SHARED_VIEW, openSummaryModal, upsertSubagentRun } from './store.js';
 import { createViewerHistory } from './viewer-history.mjs';
 import { getSocket } from './socket-handlers.js';
 import { createSubagentViewerWatch } from './subagent-viewer-watch.mjs';
@@ -360,6 +360,31 @@ async function openParent() {
   await loadRun(top.runId);
 }
 
+/** Stop asks first: the agent's work so far stays, but it ends here. */
+function askBeforeStopRun() {
+  const run = viewer.run;
+  if (IS_SHARED_VIEW || !run || viewer.stopping || !runIsRunning(run)) return;
+  openSummaryModal({
+    title: 'Stop agent',
+    subtitle: run.displayName || '',
+    kind: 'subagent-stop',
+    bodyHtml: `
+      <p>Stop <strong>${escHtml(run.displayName || 'this agent')}</strong>?</p>
+      <p>It ends where it is now; what it has done so far stays.</p>
+      <div class="summary-modal-actions">
+        <button class="chat-title-action-btn danger-btn" type="button" data-subagent-stop-confirm="1">⏹ Stop agent</button>
+        <button class="chat-title-action-btn" type="button" data-subagent-stop-cancel="1">Cancel</button>
+      </div>
+    `,
+  });
+  const dialog = document.getElementById('summary-modal');
+  dialog?.querySelector('[data-subagent-stop-confirm]')?.addEventListener('click', () => {
+    closeSummaryModal();
+    void stopRun();
+  }, { once: true });
+  dialog?.querySelector('[data-subagent-stop-cancel]')?.addEventListener('click', () => closeSummaryModal(), { once: true });
+}
+
 async function stopRun() {
   const run = viewer.run;
   if (IS_SHARED_VIEW || !run || viewer.stopping || !runIsRunning(run)) return;
@@ -518,7 +543,7 @@ export function initSubagentViewer() {
     if (event.target === modal) closeSubagentViewer();
   });
   modal?.querySelector('.subagent-viewer-close')?.addEventListener('click', () => closeSubagentViewer());
-  stop?.addEventListener('click', () => void stopRun());
+  stop?.addEventListener('click', () => askBeforeStopRun());
   parent?.addEventListener('click', () => void openParent());
   jump?.addEventListener('click', () => {
     if (body) body.scrollTop = body.scrollHeight;

package/server/public/app/tab-strip-fade.mjs

@@ -0,0 +1,101 @@
+// The fade on a tab strip that scrolls sideways (Settings, its provider tabs,
+// the usage dialog's providers): the strip has no scrollbar, so the side with
+// more tabs fades out. Marked from the strip's own scroll as `data-fade`
+// ("right" at the start, "both" in between, "left" at the end, none when the
+// strip fits or is not laid out); the CSS draws the mask from it.
+
+import { FONT_SCALE_CHANGE_EVENT } from './font-scaling.js';
+
+export const TAB_STRIP_SELECTOR = '.settings-tab-strip, .plan-usage-tab-strip';
+
+// Sub-pixel scroll ends (a zoomed page) count as the end.
+const EDGE_SLACK_PX = 1;
+
+let watching = false;
+
+/** The `data-fade` value for a strip's scroll metrics ('' for none). */
+export function tabStripFadeState({ scrollLeft = 0, scrollWidth = 0, clientWidth = 0 } = {}) {
+  const room = Number(scrollWidth) - Number(clientWidth);
+  if (!(room > EDGE_SLACK_PX)) return '';
+  const offset = Math.abs(Number(scrollLeft) || 0);
+  const before = offset > EDGE_SLACK_PX;
+  const after = offset < room - EDGE_SLACK_PX;
+  if (before && after) return 'both';
+  if (before) return 'left';
+  return after ? 'right' : '';
+}
+
+export function syncTabStripFade(strip) {
+  if (!strip?.setAttribute) return '';
+  const state = tabStripFadeState(strip);
+  if (state) {
+    if (strip.getAttribute('data-fade') !== state) strip.setAttribute('data-fade', state);
+  } else if (strip.hasAttribute('data-fade')) {
+    strip.removeAttribute('data-fade');
+  }
+  return state;
+}
+
+function fadeWidth(strip) {
+  try {
+    // The CSS gives the strip the fade's width as its scroll padding.
+    const value = parseFloat(getComputedStyle(strip).scrollPaddingLeft);
+    return Number.isFinite(value) ? value : 0;
+  } catch {
+    return 0;
+  }
+}
+
+/**
+ * Scrolls the strip (and nothing around it) so `tab` shows whole and clear of
+ * the fade; at either end the strip stops there, and that edge has none.
+ */
+export function revealTab(strip, tab) {
+  if (!strip || !tab || !strip.contains(tab)) return;
+  const room = strip.scrollWidth - strip.clientWidth;
+  if (room > EDGE_SLACK_PX) {
+    const stripBox = strip.getBoundingClientRect();
+    const tabBox = tab.getBoundingClientRect();
+    const margin = fadeWidth(strip);
+    const left = tabBox.left - stripBox.left - strip.clientLeft;
+    const right = left + tabBox.width;
+    let next = strip.scrollLeft;
+    if (left - margin < 0) next += left - margin;
+    else if (right + margin > strip.clientWidth) next += right + margin - strip.clientWidth;
+    next = Math.max(0, Math.min(room, next));
+    if (Math.abs(next - strip.scrollLeft) >= 0.5) strip.scrollLeft = next;
+  }
+  syncTabStripFade(strip);
+}
+
+/** Each strip under `root`: its selected tab in view, its fade marked. */
+export function revealSelectedTabs(root = document) {
+  if (!root?.querySelectorAll) return;
+  const strips = root.matches?.(TAB_STRIP_SELECTOR) ? [root] : Array.from(root.querySelectorAll(TAB_STRIP_SELECTOR));
+  for (const strip of strips) {
+    const selected = strip.querySelector('[aria-selected="true"]');
+    if (selected) revealTab(strip, selected);
+    else syncTabStripFade(strip);
+  }
+}
+
+/**
+ * Once per page: a strip's scroll re-marks it (scroll does not bubble, so the
+ * listener captures), and so does a resize or a turn of the phone.
+ */
+export function watchTabStripFades() {
+  if (watching || typeof document === 'undefined') return;
+  watching = true;
+  document.addEventListener('scroll', (event) => {
+    const strip = event.target;
+    if (strip?.matches?.(TAB_STRIP_SELECTOR)) syncTabStripFade(strip);
+  }, { capture: true, passive: true });
+  if (typeof window !== 'undefined') {
+    const syncAll = () => {
+      for (const strip of document.querySelectorAll(TAB_STRIP_SELECTOR)) syncTabStripFade(strip);
+    };
+    window.addEventListener('resize', syncAll, { passive: true });
+    // The zoom (font-scaling.js) resizes the tabs, not the window.
+    window.addEventListener(FONT_SCALE_CHANGE_EVENT, () => requestAnimationFrame(syncAll));
+  }
+}

package/server/public/app/tap-actions.js

@@ -35,6 +35,71 @@ export function bindTapAction(element, handler) {
   });
 }
 
+// The ︙ menu's shield (see lockChatActionsMenuShield in bootstrap.js).
+export const CHAT_ACTIONS_MENU_SHIELD_ID = 'chat-actions-menu-backdrop';
+// Longer than the shield's lock and the gap between a touch's pointerup and
+// its compatibility click.
+export const OPENING_CLICK_GRACE_MS = 400;
+
+/**
+ * True for the click that belongs to the gesture which opened a popover, so
+ * a document-level "click outside closes it" handler must leave it alone.
+ * A ︙ entry runs on pointerup and closes the menu; the touch's compatibility
+ * click then lands on the menu's shield and bubbles to `document`, where it
+ * would close the popover that entry has just opened. Later clicks on the
+ * shield (a tap beside the open ︙ menu) still count as outside.
+ *
+ * `openedAt` is the Date.now() of the opening, 0 when unknown.
+ */
+export function isOpeningGestureClick(event, openedAt, now = Date.now()) {
+  const opened = Number(openedAt) || 0;
+  if (opened <= 0) return false;
+  const sinceOpen = now - opened;
+  if (sinceOpen < 0 || sinceOpen >= OPENING_CLICK_GRACE_MS) return false;
+  return event?.target?.id === CHAT_ACTIONS_MENU_SHIELD_ID;
+}
+
+/**
+ * The one click a touch still owes after a ︙ entry ran on its pointerup.
+ * The browser hit-tests that compatibility click when it fires, a few ms
+ * later, so it lands on whatever the entry opened: a dialog's backdrop
+ * (which closes on a click on itself) or the shield (whose click reaches
+ * `document`, where a list closes on a click outside it). `arm()` on the
+ * pointerup; the next pointer click within the window is that click.
+ */
+export function createGhostClickGuard({ now = () => Date.now() } = {}) {
+  let until = 0;
+  return {
+    arm(ms = OPENING_CLICK_GRACE_MS) {
+      until = now() + Math.max(0, Number(ms) || 0);
+    },
+    // Disarms on the first click it sees, swallowed or not.
+    take(event) {
+      if (!until) return false;
+      const live = now() < until;
+      until = 0;
+      // detail 0: Enter or Space on a button, or a script, never a touch.
+      return live && Number(event?.detail) !== 0;
+    },
+  };
+}
+
+const ghostClickGuard = createGhostClickGuard();
+let ghostClickListenerBound = false;
+
+function swallowGhostClickAfterTouch(event) {
+  // A mouse's click goes to the entry it pressed, which drops it itself.
+  if (!event || event.pointerType === 'mouse') return;
+  ghostClickGuard.arm();
+  if (ghostClickListenerBound || typeof window === 'undefined') return;
+  ghostClickListenerBound = true;
+  window.addEventListener('click', (clickEvent) => {
+    if (!ghostClickGuard.take(clickEvent)) return;
+    clickEvent.preventDefault();
+    clickEvent.stopImmediatePropagation();
+  }, true);
+}
+
 export function bindMenuAction(element, handler) {
   if (!element || element.dataset.menuTapBound === '1') return;
   element.dataset.menuTapBound = '1';
@@ -48,6 +113,7 @@ export function bindMenuAction(element, handler) {
     event.stopPropagation();
     event.stopImmediatePropagation();
     markSuppressed();
+    swallowGhostClickAfterTouch(event);
     handler(event);
   }, true);
   element.addEventListener('click', (event) => {

package/server/public/app/usage-limit-ui.js

@@ -29,6 +29,8 @@ let currentConversationId = '';
 let currentProviderType = '';
 let actionInFlight = false;
 let wakeTimer = null;
+// The report whose one-line warning was tapped open (its dismissedKey).
+let expandedKey = '';
 
 function notifyBilling(conversationId) {
   const id = String(conversationId || '').trim();
@@ -88,6 +90,30 @@ export function usageLimitAccountText(state, nowMs = Date.now()) {
   return `Claude usage at ${Math.round(utilization * 100)} % of the ${label} — resets ${resets}`;
 }
 
+/** "04:00" today, "Tue 04:00" on another day: the one-line banner's time. */
+export function formatUsageLimitShortTime(iso, nowMs = Date.now()) {
+  const at = new Date(String(iso || ''));
+  if (Number.isNaN(at.getTime())) return '';
+  const clock = at.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  if (new Date(nowMs).toDateString() === at.toDateString()) return clock;
+  return `${at.toLocaleDateString([], { weekday: 'short' })} ${clock}`;
+}
+
+/**
+ * The account's line in one short line, for the compact banner:
+ * "⚠ Claude 94 % weekly · resets Tue 04:00", or at the limit
+ * "⚠ Claude weekly limit reached · resets Tue 04:00". '' when
+ * usageLimitAccountText says nothing.
+ */
+export function usageLimitAccountShortText(state, nowMs = Date.now()) {
+  if (!usageLimitAccountText(state, nowMs)) return '';
+  const label = String(state.label || 'usage limit');
+  const resets = formatUsageLimitShortTime(state.resetsAt, nowMs);
+  if (state.status === 'rejected') return `⚠ Claude ${label} reached · resets ${resets}`;
+  const limitWindow = label.replace(/\s*limit$/i, '').trim() || label;
+  return `⚠ Claude ${Math.round(Number(state.utilization) * 100)} % ${limitWindow} · resets ${resets}`;
+}
+
 /**
  * Whether the usage-limit note offers to move the chat to the API key: a
  * subscription chat (never a cloud one) whose relay says the switch is
@@ -201,6 +227,8 @@ export function renderUsageLimitBanner(nowMs = Date.now()) {
   const banner = document.getElementById(BANNER_ID);
   if (!banner) return;
   const children = [];
+  let compact = false;
+  let expanded = false;
   const pause = activeUsageLimitPause(currentConversationId, nowMs);
   if (pause) {
     const text = document.createElement('span');
@@ -225,14 +253,46 @@ export function renderUsageLimitBanner(nowMs = Date.now()) {
       ? usageLimitAccountText(account, nowMs)
       : '';
     if (line) {
+      // One line with the full sentence in the title; a tap on it opens the
+      // full sentence until the report changes.
+      if (expandedKey && expandedKey !== dismissedKey(account)) expandedKey = '';
+      expanded = expandedKey !== '' && expandedKey === dismissedKey(account);
       const text = document.createElement('span');
       text.className = 'usage-limit-text';
-      text.textContent = line;
-      children.push(text, button('Hide', 'usage-limit-dismiss', async () => dismissWarning()));
+      text.textContent = expanded ? line : (usageLimitAccountShortText(account, nowMs) || line);
+      text.title = line;
+      text.setAttribute('role', 'button');
+      text.tabIndex = 0;
+      text.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+      const toggle = (event) => {
+        event.preventDefault();
+        expandedKey = expanded ? '' : dismissedKey(account);
+        renderUsageLimitBanner();
+      };
+      text.addEventListener('click', toggle);
+      text.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') toggle(event);
+      });
+      const hide = button('✕', 'usage-limit-dismiss', async () => dismissWarning());
+      hide.title = 'Hide';
+      hide.setAttribute('aria-label', 'Hide');
+      children.push(text, hide);
       banner.dataset.state = account.status === 'rejected' ? 'reached' : 'warning';
+      compact = true;
     }
   }
+  banner.classList.toggle('usage-limit-compact', compact);
+  banner.classList.toggle('usage-limit-expanded', compact && expanded);
+  // The banner is drawn anew: the control that had the focus (the line's
+  // toggle, a button) gets it back in its new node, found by its class.
+  const focused = typeof document.activeElement?.className === 'string' && banner.contains(document.activeElement)
+    ? document.activeElement.className
+    : '';
   banner.replaceChildren(...children);
+  if (focused) {
+    const again = children.find((child) => child.className === focused);
+    try { again?.focus({ preventScroll: true }); } catch {}
+  }
   banner.classList.toggle('visible', children.length > 0);
   banner.hidden = children.length === 0;
   if (!children.length) delete banner.dataset.state;
@@ -350,6 +410,7 @@ export function __resetUsageLimitUiForTests() {
   currentConversationId = '';
   currentProviderType = '';
   actionInFlight = false;
+  expandedKey = '';
   if (wakeTimer) { clearTimeout(wakeTimer); wakeTimer = null; }
   try { localStorage.removeItem(DISMISSED_KEY); } catch {}
   renderUsageLimitBanner();

package/server/public/app/viewer-history.mjs

@@ -4,7 +4,11 @@
 // and the pop closes the viewer. Closing by any other means (the × button,
 // Escape, a swipe down) pops that entry itself so history is left as it
 // was, and the pop that follows is recognised as our own and ignored. The
-// address never changes: the entry carries only its state.
+// address never changes: the entry carries only its state, its place in the
+// stack and the visit's marks of the entry below (session-history.mjs, the
+// back guard).
+
+import { HISTORY_POSITION, inheritedVisitMarks } from './back-guard.mjs';
 
 export const VIEWER_HISTORY_MARK = 'oarFileViewer';
 const OWN_POP_WINDOW_MS = 1500;
@@ -18,7 +22,11 @@ export function createViewerHistory({ history, onBack, now = () => Date.now(), m
     /** The viewer came up: one entry, however many files it then shows. */
     opened() {
       if (state.pushed) return;
-      history.pushState({ [mark]: true }, '');
+      const below = history.state;
+      const entry = { ...inheritedVisitMarks(below), [mark]: true };
+      const position = below?.[HISTORY_POSITION];
+      if (Number.isFinite(position)) entry[HISTORY_POSITION] = position + 1;
+      history.pushState(entry, '');
       state.pushed = true;
     },
     /** The viewer went away by itself: take its entry back out of history. */
@@ -38,6 +46,9 @@ export function createViewerHistory({ history, onBack, now = () => Date.now(), m
       }
       state.ownPopAt = 0;
       if (!state.pushed) return;
+      // Our entry is still the current one: what was popped lay above it
+      // (a dialog opened over the viewer), the viewer stays.
+      if (history.state?.[mark]) return;
       state.pushed = false;
       onBack?.();
     },