@oar-sh/oar 0.9.20 → 0.9.22

package/server/public/app/subagent-timeline-view.mjs

@@ -4,6 +4,7 @@
 
 import { prefixToolActivityEmoji } from './tool-activity-emoji.mjs';
 import { subagentRowHtml } from './subagent-row.mjs';
+import { isThoughtsExpanded, thoughtFoldOpen } from './thoughts-preference.mjs';
 
 function escHtml(value) {
   return String(value ?? '').replace(/[&<>"']/g, (ch) => ({
@@ -100,20 +101,26 @@ function firstLine(text, max = 140) {
 /**
  * One entry's markup. `renderMarkdown(text)` renders reply text (and
  * thoughts); `children` maps a child run id to its header so a child entry
- * renders as a clickable row; `openDetails` keeps a fold the reader opened
- * open across re-renders.
+ * renders as a clickable row; `openDetails` keeps the reader's folds across
+ * re-renders: a Map or a function from seq to 'open' | 'folded' | undefined
+ * (`true` still means "open"). A thought without a choice, streaming or
+ * done, opens as `thoughtsExpanded` (the "Expand thoughts" setting) says.
  */
-export function timelineEntryHtml(entry, { renderMarkdown = (text) => `<p>${escHtml(text)}</p>`, children = new Map(), openDetails = false, clickable = true, now = Date.now() } = {}) {
+export function timelineEntryHtml(entry, { renderMarkdown = (text) => `<p>${escHtml(text)}</p>`, children = new Map(), openDetails = false, thoughtsExpanded = isThoughtsExpanded(), clickable = true, now = Date.now() } = {}) {
   const kind = String(entry?.kind || '');
   const seq = Number(entry?.seq) || 0;
   const open = entry?.done === false;
   const text = String(entry?.text || '');
   const wrap = (inner, extraClass = '') => `<div class="sav-entry sav-entry-${escHtml(kind)}${open ? ' is-open' : ''}${extraClass}" data-seq="${seq}">${inner}</div>`;
-  const openAttr = openDetails ? ' open' : '';
+  const choice = typeof openDetails === 'function'
+    ? openDetails(seq)
+    : (openDetails instanceof Map ? openDetails.get(seq) : (openDetails === true ? 'open' : undefined));
+  const openAttr = choice === 'open' ? ' open' : '';
 
   if (kind === 'thought') {
     const label = open && !text.trim() ? 'Thinking…' : (firstLine(text, 110) || 'Thought');
-    return wrap(`<details class="sav-fold"${open || openDetails ? ' open' : ''}><summary><span class="sav-kind">💭</span> <span class="sav-summary-text">${escHtml(label)}</span></summary><div class="sav-thought-body markdown-body">${renderMarkdown(text)}</div></details>`);
+    const thoughtOpen = thoughtFoldOpen({ choice: choice || null, expanded: thoughtsExpanded });
+    return wrap(`<details class="sav-fold"${thoughtOpen ? ' open' : ''}><summary><span class="sav-kind">💭</span> <span class="sav-summary-text">${escHtml(label)}</span></summary><div class="sav-thought-body markdown-body">${renderMarkdown(text)}</div></details>`);
   }
 
   if (kind === 'text') {

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';
@@ -50,7 +50,9 @@ const viewer = {
   stopTimer: null,
   tickTimer: null,
   sharedPollTimer: null,
-  openFolds: new Set(),
+  // The reader's folds by seq ('open' | 'folded'); a thought without one
+  // follows the "Expand thoughts" setting.
+  openFolds: new Map(),
 };
 
 let viewerHistory = null;
@@ -151,7 +153,7 @@ function buildEntryNode(entry) {
   holder.innerHTML = timelineEntryHtml(entry, {
     renderMarkdown,
     children: viewer.children,
-    openDetails: viewer.openFolds.has(entry.seq),
+    openDetails: viewer.openFolds,
     clickable: true,
   });
   return holder.firstElementChild;
@@ -283,7 +285,7 @@ async function loadRun(runId) {
   if (!id) return;
   viewer.state = createTimelineState(id);
   viewer.children = new Map();
-  viewer.openFolds = new Set();
+  viewer.openFolds = new Map();
   viewer.error = '';
   viewer.stopping = false;
   clearTimeout(viewer.stopTimer);
@@ -360,6 +362,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 +545,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;
@@ -527,7 +554,8 @@ export function initSubagentViewer() {
   body?.addEventListener('scroll', () => {
     if (jump && !jump.hidden && isAtBottom(body)) jump.hidden = true;
   }, { passive: true });
-  // A fold the reader opened stays open while the entry keeps changing.
+  // A fold the reader opened or closed stays that way while the entry keeps
+  // changing.
   timeline?.addEventListener('click', (event) => {
     const summary = event.target?.closest?.('summary');
     const entry = summary?.closest?.('.sav-entry');
@@ -535,8 +563,7 @@ export function initSubagentViewer() {
     const seq = Number(entry.dataset.seq);
     setTimeout(() => {
       const details = summary.parentElement;
-      if (details?.open) viewer.openFolds.add(seq);
-      else viewer.openFolds.delete(seq);
+      viewer.openFolds.set(seq, details?.open ? 'open' : 'folded');
     }, 0);
   });
   document.addEventListener('keydown', (event) => {

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/thoughts-preference.mjs

@@ -0,0 +1,79 @@
+// "Expand thoughts while an agent works" (Settings › General, and its mirror
+// in the 🧠 modal). A setting of this browser, kept in localStorage like the
+// scroll-on-send one. On unless switched off: it decides whether a thought
+// starts open in the live turn, in a live sub-agent bubble and in the
+// sub-agent viewer. A fold the reader opened or closed by hand wins over it.
+// A finished message's 💭 fold stays closed either way. The document, the
+// storage and the event target are passed in by the tests.
+
+export const THOUGHTS_EXPANDED_STORAGE_KEY = 'copilot_thoughts_expanded';
+export const THOUGHTS_EXPANDED_TOGGLE_ID = 'thoughts-expanded-toggle';
+export const THOUGHTS_EXPANDED_CHANGE_EVENT = 'oar:thoughts-expanded-change';
+// The 🧠 modal's two buttons: `data-thoughts-expanded` is "on" or "off".
+export const THOUGHTS_EXPANDED_BUTTON_SELECTOR = '.ctx-thoughts-btn[data-thoughts-expanded]';
+
+/** Anything but an explicit off is on: a missing or damaged value included. */
+export function parseThoughtsExpandedSetting(stored) {
+  const value = String(stored ?? '').trim().toLowerCase();
+  if (!value) return true;
+  return value !== '0' && value !== 'false';
+}
+
+export function serializeThoughtsExpandedSetting(expanded) {
+  return expanded ? '1' : '0';
+}
+
+function storage() {
+  try { return globalThis.localStorage || null; } catch { return null; }
+}
+
+export function isThoughtsExpanded(store = storage()) {
+  try {
+    return parseThoughtsExpandedSetting(store?.getItem(THOUGHTS_EXPANDED_STORAGE_KEY));
+  } catch {
+    return true;
+  }
+}
+
+/** The Settings checkbox and the 🧠 buttons, wherever they are rendered. */
+export function syncThoughtsExpandedToggle(doc = globalThis.document, store = storage()) {
+  const expanded = isThoughtsExpanded(store);
+  const checkbox = doc?.getElementById?.(THOUGHTS_EXPANDED_TOGGLE_ID);
+  if (checkbox) checkbox.checked = expanded;
+  const buttons = doc?.querySelectorAll?.(THOUGHTS_EXPANDED_BUTTON_SELECTOR) || [];
+  for (const btn of buttons) {
+    const active = (btn.dataset?.thoughtsExpanded === 'on') === expanded;
+    btn.classList?.toggle('is-active', active);
+    btn.setAttribute?.('aria-pressed', active ? 'true' : 'false');
+  }
+}
+
+export function updateThoughtsExpandedSetting(expanded, { doc = globalThis.document, store = storage(), target = globalThis.window } = {}) {
+  const value = !!expanded;
+  try { store?.setItem(THOUGHTS_EXPANDED_STORAGE_KEY, serializeThoughtsExpandedSetting(value)); } catch {}
+  syncThoughtsExpandedToggle(doc, store);
+  try {
+    target?.dispatchEvent?.(new CustomEvent(THOUGHTS_EXPANDED_CHANGE_EVENT, { detail: { expanded: value } }));
+  } catch {}
+}
+
+/**
+ * Whether a thought fold shows open. `choice` is what the reader did by hand
+ * ('open' | 'folded'), and it wins; everything else, a thought still
+ * streaming included, follows the setting (`expanded`).
+ */
+export function thoughtFoldOpen({ choice = null, expanded = true } = {}) {
+  if (choice === 'open') return true;
+  if (choice === 'folded') return false;
+  return !!expanded;
+}
+
+export const MAX_THOUGHT_FOLD_CHOICES = 500;
+
+/** Record a hand fold; the oldest choice goes once the map is full. */
+export function rememberThoughtFoldChoice(choices, key, open, max = MAX_THOUGHT_FOLD_CHOICES) {
+  if (!choices || key === undefined || key === null || key === '') return;
+  choices.delete(key);
+  while (choices.size >= max) choices.delete(choices.keys().next().value);
+  choices.set(key, open ? 'open' : 'folded');
+}

package/server/public/app/turn-stream-view.mjs

@@ -0,0 +1,124 @@
+// The stream view of one agent turn, without a DOM: its thoughts, tool calls
+// and reply as one list in the order they happened. The order is the turn's
+// shared number on every thought and tool line (turnSeq, migration 0038).
+// A turn with a row that has none (recorded before, or by an older relay)
+// returns null and keeps the grouped layout. Main thread only: a sub-agent's
+// rows stay in its own row and viewer.
+
+import {
+  isOmittedActivityMarker,
+  normalizeRelayActivityEntry,
+  normalizeTurnSeq,
+} from './activity-replay-state.mjs';
+
+function escHtml(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (ch) => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+  }[ch]));
+}
+
+/** A '● ' line is a progress note: it stays where the grouped layout puts it. */
+export function isProgressActivityText(text) {
+  return String(text || '').startsWith('● ');
+}
+
+function firstLine(text, max = 110) {
+  const line = String(text || '').split('\n').map((part) => part.trim()).find(Boolean) || '';
+  return line.length > max ? `${line.slice(0, max - 1)}…` : line;
+}
+
+/**
+ * The turn's main-thread entries in order, the reply last:
+ * `[{ kind: 'thought'|'tool'|'omitted'|'reply', turnSeq, … }]`, or null when
+ * the turn cannot be ordered (a main-thread thought or tool line without a
+ * turnSeq) or has no thought or tool line at all. `activities` are the
+ * bubble's visible ones (the promoted compaction boundary already taken out);
+ * progress lines ('● ') are left out here. The "… earlier tool lines
+ * omitted" row the relay's cap adds goes where the first line it stands for
+ * was (`metadata.fromTurnSeq`), else right before the first tool line kept
+ * after it.
+ */
+export function turnStreamEntries({ thoughts = [], activities = [], text = '' } = {}) {
+  const entries = [];
+  let missing = false;
+  for (const thought of Array.isArray(thoughts) ? thoughts : []) {
+    if (!thought || thought.subagentRunId || !String(thought.text || '').trim()) continue;
+    const turnSeq = normalizeTurnSeq(thought.turnSeq);
+    if (turnSeq === null) { missing = true; break; }
+    entries.push({
+      kind: 'thought',
+      turnSeq,
+      order: turnSeq,
+      reasoningId: String(thought.reasoningId || ''),
+      text: String(thought.text),
+    });
+  }
+  if (missing) return null;
+
+  let pendingMarkers = [];
+  for (const item of Array.isArray(activities) ? activities : []) {
+    const entry = normalizeRelayActivityEntry(item);
+    if (!entry || entry.subagentRunId) continue;
+    if (isOmittedActivityMarker(entry)) {
+      const marker = { kind: 'omitted', turnSeq: null, text: entry.text, count: Number(entry.metadata.count) || 0 };
+      // Where the first line it stands for was; else before the next line kept.
+      const from = normalizeTurnSeq(entry.metadata.fromTurnSeq);
+      if (from !== null) entries.push({ ...marker, order: from });
+      else pendingMarkers.push(marker);
+      continue;
+    }
+    if (isProgressActivityText(entry.text)) continue;
+    if (entry.turnSeq === undefined) return null;
+    for (const [index, marker] of pendingMarkers.entries()) {
+      entries.push({ ...marker, order: entry.turnSeq - 0.5 + index * 0.001 });
+    }
+    pendingMarkers = [];
+    entries.push({
+      kind: 'tool',
+      turnSeq: entry.turnSeq,
+      order: entry.turnSeq,
+      text: entry.text,
+      ...(entry.metadata ? { metadata: entry.metadata } : {}),
+    });
+  }
+  if (!entries.length) return null;
+  const lastOrder = Math.max(...entries.map((entry) => entry.order));
+  for (const [index, marker] of pendingMarkers.entries()) {
+    entries.push({ ...marker, order: lastOrder + 0.5 + index * 0.001 });
+  }
+  entries.sort((a, b) => a.order - b.order);
+  const ordered = entries.map(({ order, ...entry }) => entry);
+  if (String(text || '').trim()) ordered.push({ kind: 'reply', turnSeq: null, text: String(text) });
+  return ordered;
+}
+
+/**
+ * The list's markup. `renderMarkdown(text)` renders a thought and the reply;
+ * `decorate(text)` is the tool line's display text (its emoji);
+ * `thoughtsOpen` opens the thought folds (closed on a finished turn).
+ */
+export function renderTurnStreamMarkup(entries, {
+  thoughtsOpen = false,
+  renderMarkdown = (text) => `<p>${escHtml(text)}</p>`,
+  decorate = (text) => text,
+} = {}) {
+  const rows = (Array.isArray(entries) ? entries : []).map((entry) => {
+    const seqAttr = entry.turnSeq != null ? ` data-turn-seq="${escHtml(entry.turnSeq)}"` : '';
+    if (entry.kind === 'thought') {
+      return `<details class="msg-stream-thought"${seqAttr}${entry.reasoningId ? ` data-reasoning-id="${escHtml(entry.reasoningId)}"` : ''}${thoughtsOpen ? ' open' : ''}>`
+        + `<summary>💭 ${escHtml(firstLine(entry.text) || 'Thought')}</summary>`
+        + `<div class="msg-stream-thought-body">${renderMarkdown(entry.text)}</div></details>`;
+    }
+    if (entry.kind === 'tool') {
+      return `<div class="msg-activity-item msg-stream-tool"${seqAttr}>${escHtml(decorate(entry.text))}</div>`;
+    }
+    if (entry.kind === 'omitted') {
+      return `<div class="msg-stream-omitted">${escHtml(entry.text)}</div>`;
+    }
+    if (entry.kind === 'reply') {
+      return `<div class="msg-stream-reply">${renderMarkdown(entry.text)}</div>`;
+    }
+    return '';
+  });
+  return `<div class="msg-turn-stream">${rows.join('')}</div>`;
+}

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?.();
     },