@oar-sh/oar 0.9.20 → 0.9.22

package/server/migrations/0038-turn-seq.mjs

@@ -0,0 +1,92 @@
+'use strict';
+
+/**
+ * Migration: one order across a turn's thoughts and tool lines.
+ *
+ * `relay_activity.turn_seq` and `relay_thought.turn_seq`: a number per queue
+ * message shared by both tables (repositories/question-repository.mjs
+ * nextTurnSeq), given when a row is first written, so the stream view can
+ * show a turn's thoughts and tool calls in the order they happened. NULL for
+ * every row from before this migration and for rows a session-history
+ * rebuild writes; a turn with such a row keeps the grouped layout.
+ *
+ * Indexes on (queue_message_id, turn_seq), partial (only numbered rows): the
+ * next number is a max() over them. Not unique: one counter spans two tables.
+ *
+ * Not in SCHEMA_SQL (db-schema.mjs): that block runs before the migrations,
+ * so an index on the column there would fail on every existing database.
+ *
+ * Additive and idempotent. Safe to run on every boot; a table that does not
+ * exist yet is left alone. Rolling back needs no data change: older code
+ * ignores the columns.
+ *
+ * Usage: node server/migrations/0038-turn-seq.mjs [path/to/oar.db]
+ */
+
+import { fileURLToPath } from 'url';
+import path from 'path';
+import process from 'process';
+import Database from 'better-sqlite3';
+import { cliDbPath } from '../services/database-file.mjs';
+
+export const TURN_SEQ_TABLES = Object.freeze(['relay_activity', 'relay_thought']);
+
+function tableExists(db, name) {
+  return !!db
+    .prepare(`SELECT name FROM sqlite_master WHERE type = 'table' AND name = ?`)
+    .get(name);
+}
+
+export function hasTurnSeqColumn(db, table) {
+  try {
+    return db.prepare(`PRAGMA table_info(${table})`).all().some((column) => column.name === 'turn_seq');
+  } catch {
+    return false;
+  }
+}
+
+export function migrateTurnSeq(db) {
+  let columnsAdded = 0;
+  let indexesAdded = 0;
+  for (const table of TURN_SEQ_TABLES) {
+    if (!tableExists(db, table)) continue;
+    if (!hasTurnSeqColumn(db, table)) {
+      db.exec(`ALTER TABLE ${table} ADD COLUMN turn_seq INTEGER`);
+      columnsAdded += 1;
+    }
+    const index = `idx_${table}_queue_turn_seq`;
+    const present = db.prepare(`SELECT name FROM sqlite_master WHERE type = 'index' AND name = ?`).get(index);
+    if (!present) {
+      db.exec(`CREATE INDEX ${index} ON ${table}(queue_message_id, turn_seq) WHERE turn_seq IS NOT NULL`);
+      indexesAdded += 1;
+    }
+  }
+  return { applied: columnsAdded + indexesAdded > 0, columnsAdded, indexesAdded };
+}
+
+export function migrate(dbPath, options = {}) {
+  const db = new Database(dbPath, options);
+  try {
+    return migrateTurnSeq(db);
+  } finally {
+    db.close();
+  }
+}
+
+const isMain = process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url);
+if (isMain) {
+  try {
+    // The given path, else the database in server/data (oar.db, else the
+    // name before 0.9.20); never a new one.
+    const dbPath = cliDbPath(process.argv[2], new URL('..', import.meta.url));
+    const result = migrate(dbPath);
+    console.log(`Migration 0038 on ${dbPath}`);
+    console.log(result.applied
+      ? `  turn order: columns added ${result.columnsAdded}, indexes added ${result.indexesAdded}`
+      : '  skipped: nothing to change');
+    process.exit(0);
+  } catch (err) {
+    console.error(`Migration 0038 failed: ${err?.message || err}`);
+    process.exit(1);
+  }
+}

package/server/public/app/about-ui.js

@@ -1,4 +1,4 @@
-// ⋯ → About OAR: the menu entry's label and the modal (about-view.mjs builds
+// ︙ → About OAR: the menu entry's label and the modal (about-view.mjs builds
 // its HTML from GET /api/about).
 
 import {

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

@@ -256,6 +256,23 @@ function backupsRow(backups, formatDateTime) {
   return row('Backups', esc(value), { hint });
 }
 
+/**
+ * The running workers and how many still run the code before the last deploy
+ * (the relay recycles those once idle): "14, all on this build", "14, 3 on an
+ * older build", or the bare count when the relay cannot tell. Empty when no
+ * worker runs, so the row is left out.
+ */
+export function workersBuildText(workers) {
+  const total = finite(workers?.total) || 0;
+  if (total <= 0) return '';
+  const count = formatCount(total);
+  // Number(null) is 0: an unknown count must not read as "all on this build".
+  const other = workers?.onOtherBuild === null || workers?.onOtherBuild === undefined ? null : finite(workers.onOtherBuild);
+  if (other === null) return count;
+  if (other <= 0) return total === 1 ? `${count}, on this build` : `${count}, all on this build`;
+  return `${count}, ${formatCount(other)} on an older build`;
+}
+
 /**
  * @param {object} about the GET /api/about payload
  * @param {object} [options]
@@ -270,8 +287,10 @@ export function buildAboutModalHtml(about = {}, {
 
   const commit = String(about.commit || '').trim();
   const install = about.installMethod === 'git-checkout' ? 'git checkout' : (about.installMethod === 'npm-global' ? 'npm package' : '');
+  const workersText = workersBuildText(about.workers);
   sections.push(section('build', 'OAR', table([
     row('Version', esc(about.version || '–'), install ? { hint: install } : {}),
+    ...(workersText ? [row('Workers', esc(workersText))] : []),
     ...(commit ? [row('Commit', `<code>${esc(commit.slice(0, 7))}</code>`, { title: commit })] : []),
     row('Started', esc(about.startedAt ? formatDateTime(about.startedAt) : '–')),
     row('Uptime', esc(formatUptime(about.uptimeSeconds))),

package/server/public/app/action-confirmations.js

@@ -107,7 +107,7 @@ export async function confirmKillCurrentSession() {
   }
 }
 
-// ⋯ → Restart web relay first shows what the restart would wait for and
+// ︙ → Restart web relay first shows what the restart would wait for and
 // leave running (relay-restart-ui.js); its buttons land in
 // confirmRestartWebRelay below or in confirmRestartRelayNow.
 export { openRestartRelayConfirmation };

package/server/public/app/activity-replay-state.mjs

@@ -1,4 +1,10 @@
-const DEFAULT_ACTIVITY_LIMIT = 24;
+// A row's place in its turn's order (migration 0038), or null: rows from
+// before it, or from an older relay, have none.
+export function normalizeTurnSeq(value) {
+  if (value === null || value === undefined || value === '') return null;
+  const num = Number(value);
+  return Number.isInteger(num) && num > 0 ? num : null;
+}
 
 export function normalizeRelayActivityEntry(item) {
   if (item && typeof item === 'object' && !Array.isArray(item)) {
@@ -8,7 +14,8 @@ export function normalizeRelayActivityEntry(item) {
     const metadata = (item.metadata && typeof item.metadata === 'object' && !Array.isArray(item.metadata))
       ? item.metadata
       : null;
-    return { text, subagentRunId, metadata };
+    const turnSeq = normalizeTurnSeq(item.turnSeq);
+    return { text, subagentRunId, metadata, ...(turnSeq !== null ? { turnSeq } : {}) };
   }
   const text = String(item || '').trim();
   if (!text) return null;
@@ -24,25 +31,87 @@ export function isCompactBoundaryActivityEntry(item) {
   return normalizeRelayActivityEntry(item)?.metadata?.kind === 'compact_boundary';
 }
 
-// The live list of one turn keeps its newest ordinary lines only, but every
-// structured row a line of the transcript is built from: the turn's
-// compaction entries and the session-restart notes (a compaction window, a
-// billing switch) would otherwise scroll out of a busy turn and take their
-// line with them until the next reload.
-export const LIVE_ACTIVITY_CAP = 24;
+// The thread an activity row belongs to: a sub-agent run, or '' for the main
+// agent. Every cap below counts each thread apart, so a busy sub-agent never
+// pushes the main agent's lines out (or another sub-agent's).
+function activityThreadKey(item) {
+  return normalizeRelayActivityEntry(item)?.subagentRunId || '';
+}
+
+// No limit: a cap of 0 (the setting's far end), or anything not a positive
+// number.
+function isUnlimitedCap(cap) {
+  const value = Number(cap);
+  return !Number.isFinite(value) || value <= 0;
+}
+
+/**
+ * Keep the newest `cap` rows of each thread among those `isKept` does not
+ * protect, and every protected row; the order stays. A sub-agent's thread
+ * keeps `subagentCap` (the same unless given). A list already within the cap
+ * is returned as it is.
+ */
+function capNewestPerThread(list, cap, isKept, subagentCap = cap) {
+  if (isUnlimitedCap(cap) && isUnlimitedCap(subagentCap)) return list;
+  const maxFor = (key) => {
+    const limit = key ? subagentCap : cap;
+    return isUnlimitedCap(limit) ? Number.POSITIVE_INFINITY : Math.trunc(Number(limit));
+  };
+  const remaining = new Map();
+  for (const item of list) {
+    if (isKept(item)) continue;
+    const key = activityThreadKey(item);
+    remaining.set(key, (remaining.get(key) || 0) + 1);
+  }
+  if ([...remaining.entries()].every(([key, count]) => count <= maxFor(key))) return list;
+  return list.filter((item) => {
+    if (isKept(item)) return true;
+    const key = activityThreadKey(item);
+    const left = remaining.get(key) - 1;
+    remaining.set(key, left);
+    return left < maxFor(key);
+  });
+}
+
+// The live list of one turn keeps the newest ordinary lines of each thread
+// (the main agent, each sub-agent) only, as many as the "Tool lines shown
+// while an agent works" setting says (live-activity-cap.mjs; 0 keeps all),
+// but every structured row a line of the transcript is built from: the
+// turn's compaction entries and the session-restart notes (a compaction
+// window, a billing switch) would otherwise scroll out of a busy turn and
+// take their line with them until the next reload. The call sites pass the
+// setting; LIVE_ACTIVITY_CAP is its default.
+export const LIVE_ACTIVITY_CAP = 50;
 function isKeptLiveActivityEntry(item) {
   const kind = normalizeRelayActivityEntry(item)?.metadata?.kind;
   return kind === 'compact_boundary' || kind === 'compact_window_respawn' || kind === 'billing_switch_respawn';
 }
 export function capLiveActivityEntries(items, cap = LIVE_ACTIVITY_CAP) {
   const list = Array.isArray(items) ? items : [];
-  let ordinary = list.reduce((count, item) => count + (isKeptLiveActivityEntry(item) ? 0 : 1), 0);
-  if (ordinary <= cap) return list;
-  return list.filter((item) => {
-    if (isKeptLiveActivityEntry(item)) return true;
-    ordinary -= 1;
-    return ordinary < cap;
-  });
+  return capNewestPerThread(list, cap, isKeptLiveActivityEntry);
+}
+
+// What the relay sends of a turn's activity rows, per thread.
+//
+// A running turn (the in-flight snapshot the live bubble polls every 900 ms):
+// as many as the browser shows, which it says with `activityCap` (its "Tool
+// lines shown" setting); a request without it (an older page, a paired
+// relay's read) gets the default 50; the setting's "no limit" asks for the
+// most the relay sends, 500.
+export const IN_FLIGHT_ACTIVITY_LIMIT_PER_THREAD = 500;
+// A finished one (the message payload): the main agent's newest 200 (the
+// stream view lists them), each sub-agent's newest 50 (its own record is in
+// the sub-agent viewer).
+export const FINISHED_ACTIVITY_LIMIT_PER_THREAD = 200;
+export const FINISHED_SUBAGENT_ACTIVITY_LIMIT_PER_THREAD = 50;
+
+/** The in-flight cap a request asks for: `activityCap` as 1…500, 0 → 500, else 50. */
+export function inFlightActivityCap(value) {
+  const text = String(value ?? '').trim();
+  if (!/^\d+$/.test(text)) return LIVE_ACTIVITY_CAP;
+  const cap = Number(text);
+  if (cap === 0) return IN_FLIGHT_ACTIVITY_LIMIT_PER_THREAD;
+  return Math.min(IN_FLIGHT_ACTIVITY_LIMIT_PER_THREAD, cap);
 }
 
 // A compaction is published in up to two steps on the same message: a
@@ -118,56 +187,99 @@ export function visibleActivityEntries(items, promoted) {
   });
 }
 
-// Head-cap that never drops structured rows. Activity lists are capped from
-// the front (the start of a turn is the interesting part), but a
+// The relay's cap of a turn's activity rows, which never drops structured
+// rows. Each thread (the main agent, each sub-agent) keeps its newest `limit`
+// prose rows: a busy sub-agent no longer pushes the main agent's lines out,
+// and the latest lines are the ones a reader of a long turn is after. A
 // metadata-bearing row carries transcript structure rather than prose, and a
 // long agentic turn can push its compaction boundary past the cap — losing
 // the break row entirely, with no prose fallback since the bubble filters
-// compact entries out. Keep every structured row, spend the rest of the
-// budget on the leading prose rows, preserve the original order.
-export function capRelayActivityEntries(items, limit = DEFAULT_ACTIVITY_LIMIT) {
+// compact entries out. Keep every structured row, preserve the original
+// order. Returns a new array. `subagentLimit` is a sub-agent thread's own
+// limit (the finished payload keeps fewer of those).
+//
+// `omittedMarker`: when the main agent's rows were cut, a structured row
+// saying how many (kind ACTIVITY_OMITTED_KIND) goes right before its first
+// kept row, so a reader of the finished turn sees that its list starts late.
+export function capRelayActivityEntries(items, limit, { subagentLimit = limit, omittedMarker = false } = {}) {
   const list = Array.isArray(items) ? items : [];
-  const max = Math.max(1, Math.trunc(Number(limit)) || DEFAULT_ACTIVITY_LIMIT);
-  if (list.length <= max) return list.slice();
-  const structuredIndexes = [];
-  for (let index = 0; index < list.length; index += 1) {
-    if (normalizeRelayActivityEntry(list[index])?.metadata) structuredIndexes.push(index);
-  }
-  if (!structuredIndexes.length) return list.slice(0, max);
+  const max = Math.max(1, Math.trunc(Number(limit)) || LIVE_ACTIVITY_CAP);
+  const subagentMax = Math.max(1, Math.trunc(Number(subagentLimit)) || max);
+  const isStructured = (item) => !!normalizeRelayActivityEntry(item)?.metadata;
+  const structured = list.filter(isStructured);
   // Safety valve for a pathological turn with more structured rows than the
   // cap allows: the most recent ones win.
-  const keep = new Set(structuredIndexes.slice(-max));
-  let budget = max - keep.size;
-  const kept = [];
-  for (let index = 0; index < list.length; index += 1) {
-    if (keep.has(index)) {
-      kept.push(list[index]);
-      continue;
-    }
-    if (budget <= 0) continue;
-    budget -= 1;
-    kept.push(list[index]);
+  let source = list;
+  if (structured.length > max) {
+    const keep = new Set(structured.slice(-max));
+    source = list.filter((item) => !isStructured(item) || keep.has(item));
   }
-  return kept;
+  const capped = capNewestPerThread(source, max, isStructured, subagentMax);
+  if (capped === list) return list.slice();
+  if (!omittedMarker) return capped;
+  const isMainProse = (item) => !isStructured(item) && !activityThreadKey(item);
+  const kept = new Set(capped);
+  const dropped = source.filter((item) => isMainProse(item) && !kept.has(item));
+  if (!dropped.length) return capped;
+  const at = capped.findIndex(isMainProse);
+  // Where the first line left out was in the turn's order, when it had one.
+  const fromTurnSeq = normalizeRelayActivityEntry(dropped[0])?.turnSeq ?? null;
+  const marker = omittedActivityMarker(dropped.length, fromTurnSeq);
+  return at === -1 ? [...capped, marker] : [...capped.slice(0, at), marker, ...capped.slice(at)];
+}
+
+// The row that stands for the main agent's tool lines a finished turn's cap
+// left out. It has no turn order of its own; `fromTurnSeq` is the place of
+// the first line it stands for, where the stream view puts it.
+export const ACTIVITY_OMITTED_KIND = 'activity_omitted';
+
+export function omittedActivityMarker(count, fromTurnSeq = null) {
+  const n = Math.max(1, Math.trunc(Number(count)) || 1);
+  const from = normalizeTurnSeq(fromTurnSeq);
+  return {
+    text: `… ${n} earlier tool ${n === 1 ? 'line' : 'lines'} omitted`,
+    subagentRunId: null,
+    metadata: { kind: ACTIVITY_OMITTED_KIND, count: n, ...(from !== null ? { fromTurnSeq: from } : {}) },
+  };
+}
+
+export function isOmittedActivityMarker(item) {
+  return normalizeRelayActivityEntry(item)?.metadata?.kind === ACTIVITY_OMITTED_KIND;
+}
+
+// The finished turn's cap, as the relay sends it and the bubble reads it; a
+// cut in the main agent's lines is marked.
+export function capFinishedActivityEntries(items) {
+  return capRelayActivityEntries(items, FINISHED_ACTIVITY_LIMIT_PER_THREAD, {
+    subagentLimit: FINISHED_SUBAGENT_ACTIVITY_LIMIT_PER_THREAD,
+    omittedMarker: true,
+  });
 }
 
 export function relayActivityEntryText(item) {
   return normalizeRelayActivityEntry(item)?.text || '';
 }
 
-function normalizeActivityItems(items, limit = DEFAULT_ACTIVITY_LIMIT) {
+// The live list's rule: the newest `cap` ordinary lines of each thread, the
+// structured rows kept (capLiveActivityEntries); Infinity or 0 keeps all.
+function normalizeActivityItems(items, cap = LIVE_ACTIVITY_CAP) {
   const normalized = Array.isArray(items)
     ? items.map((item) => normalizeRelayActivityEntry(item)).filter(Boolean)
     : [];
-  return normalized.slice(-Math.max(1, Number(limit) || DEFAULT_ACTIVITY_LIMIT));
+  return capLiveActivityEntries(normalized, cap);
 }
 
+// A numbered row is the row with that number (the same tool line twice is two
+// rows; a replayed event is one); an unnumbered one is known by its text.
 function activityEntryKey(item) {
   const entry = normalizeRelayActivityEntry(item);
   if (!entry) return '';
+  if (entry.turnSeq !== undefined) return `#${entry.turnSeq}`;
   return `${entry.subagentRunId || ''}::${entry.text}`;
 }
 
+const isNumbered = (item) => normalizeRelayActivityEntry(item)?.turnSeq !== undefined;
+
 function isSubsequence(subset, sequence) {
   if (!subset.length) return true;
   let cursor = 0;
@@ -178,11 +290,17 @@ function isSubsequence(subset, sequence) {
   return false;
 }
 
-export function mergeRelayActivityTexts(existingItems, incomingItems, limit = DEFAULT_ACTIVITY_LIMIT) {
+export function mergeRelayActivityTexts(existingItems, incomingItems, limit = LIVE_ACTIVITY_CAP) {
   const existing = normalizeActivityItems(existingItems, Number.POSITIVE_INFINITY);
   const incoming = normalizeActivityItems(incomingItems, Number.POSITIVE_INFINITY);
   if (!existing.length) return normalizeActivityItems(incoming, limit);
   if (!incoming.length) return normalizeActivityItems(existing, limit);
+  // Both sides numbered (migration 0038): the union by number, in order.
+  if (existing.every(isNumbered) && incoming.every(isNumbered)) {
+    const byTurnSeq = new Map();
+    for (const item of [...existing, ...incoming]) byTurnSeq.set(item.turnSeq, item);
+    return normalizeActivityItems([...byTurnSeq.values()].sort((a, b) => a.turnSeq - b.turnSeq), limit);
+  }
   if (isSubsequence(existing, incoming)) return normalizeActivityItems(incoming, limit);
   if (isSubsequence(incoming, existing)) return normalizeActivityItems(existing, limit);
 

package/server/public/app/api-client.js

@@ -1,4 +1,5 @@
 import { BASE, TOKEN, CLIENT_ID, IS_SHARE_PREVIEW, SHARE_PREVIEW_CONVERSATION_ID, SHARED_CONVERSATION_TOKEN, authHeaders, updateWorkspaceRootHints, applyContextUsageBar, readContextUsageRatio, currentConvId, conversations, setCliOnline, setCloudflaredTunnelState, setActiveRuntimeSessionCount, setRuntimeSessionBindingCount, setContextIndicatorMode, setServerPlatform, setUpdateState } from './store.js';
+import { liveActivityCap } from './live-activity-cap.mjs';
 
 // fetch() has no default timeout. Without one, a request issued while the app is
 // being backgrounded can hang indefinitely on a half-open mobile connection and
@@ -981,8 +982,16 @@ export async function loadConversation(id, options = {}) {
   if (afterTimestamp) params.set('afterTimestamp', afterTimestamp);
   const aroundMessageId = String(options.aroundMessageId || '').trim();
   if (aroundMessageId) params.set('aroundMessageId', aroundMessageId);
+  // The running turn's tool lines per agent this page shows ("Tool lines
+  // shown"; 0 = no limit): the relay sends no more of them.
+  params.set('activityCap', String(liveActivityCap()));
+  // The live poll's finished replies it already holds (held-details.mjs).
+  const heldDetails = String(options.heldDetails || '');
+  if (heldDetails) params.set('heldDetails', heldDetails);
   const query = params.toString();
-  return apiFetch(`/api/conversation/${convId}${query ? `?${query}` : ''}`);
+  // `onErrorResponse` tells a conversation the relay does not know (404) from a failed load.
+  const onErrorResponse = typeof options.onErrorResponse === 'function' ? options.onErrorResponse : undefined;
+  return apiFetch(`/api/conversation/${convId}${query ? `?${query}` : ''}`, onErrorResponse ? { onErrorResponse } : undefined);
 }
 
 export async function refreshConversationHistory(id, options = {}) {
@@ -1247,7 +1256,7 @@ export async function createConversationShareLink(id) {
   });
 }
 
-// Share management (Settings → Shared conversations, the ⋯ menu). These throw
+// Share management (Settings → Shared conversations, the ︙ menu). These throw
 // with the relay's reason, so the caller can say why an action failed.
 export async function listConversationShares() {
   return apiFetchOrThrow('/api/shares');

package/server/public/app/ask-user-view.js

@@ -16,7 +16,8 @@ import { isChatInteractionHeld } from './selection-guard.mjs';
 import { questionCardHeadLabel } from './conversation-provider-indicator.mjs';
 import { questionAcceptsFreeText } from './question-answer-rule.mjs';
 import { beginOwnSend, followsTranscriptEnd, refreshJumpButton, scrollAfterOwnSend } from './transcript-jump-bottom-view.mjs';
-import { renderSessionAskCards } from './inbox-ui.js';
+import { renderQuestionStubs } from './questions-panel-ui.js';
+import { isConversationAutoOpenHeld } from './session-history-ui.js';
 
 let relayQuestionRenderHash = '';
 let renderedRelayQuestionIds = new Set();
@@ -124,13 +125,20 @@ export async function loadRelayQuestions(conversationId) {
   window.renderConvList?.();
   window.syncComposerButtonState?.();
 
-  if (!conversationId && pending.length) {
+  // Nothing open: the latest question's conversation opens. Not from the
+  // Inbox or Status, which show nothing open too: they are being read. And
+  // in place of the empty screen, not as a step of its own in history. Nor
+  // after a link the relay did not know: its notice keeps the screen empty
+  // until the reader opens something.
+  const readingAView = document.body?.classList?.contains('inbox-view-active')
+    || document.body?.classList?.contains('status-view-active');
+  if (!conversationId && pending.length && !readingAView && !isConversationAutoOpenHeld()) {
     const latest = pending
       .slice()
       .sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0))[0];
     const targetConversationId = String(latest?.conversationId || '').trim();
     if (targetConversationId && targetConversationId !== currentConvId && conversations[targetConversationId]) {
-      await window.openConversation?.(targetConversationId);
+      await window.openConversation?.(targetConversationId, { history: 'replace' });
       return;
     }
   }
@@ -171,10 +179,16 @@ export function updatePendingQuestionBanner() {
   banner.dataset.targetQuestionId = String(latest?.id || '').trim();
   const count = pending.length;
   const currentCount = currentConvId ? pending.filter((q) => q?.conversationId === currentConvId).length : 0;
-  const convTitle = escHtml(conversations[targetConversationId]?.title || targetConversationId || 'conversation');
-  banner.innerHTML = currentCount > 0
-    ? `❓ ${count} open question${count === 1 ? '' : 's'}`
-    : `❓ ${count} open question${count === 1 ? '' : 's'} · latest in ${convTitle}`;
+  const rawTitle = String(conversations[targetConversationId]?.title || targetConversationId || 'conversation');
+  const countText = `❓ ${count} open question${count === 1 ? '' : 's'}`;
+  const tailText = currentCount > 0 ? '' : ` · latest in ${rawTitle}`;
+  // The full text, and the compact chip "❓ N" the header fit switches to
+  // (data-compact) where the row is short. Either way the button's name and
+  // tooltip are the full text.
+  banner.innerHTML = `<span class="pending-question-full"><span class="pending-question-count">${escHtml(countText)}</span>${tailText ? `<span class="pending-question-tail">${escHtml(tailText)}</span>` : ''}</span>`
+    + `<span class="pending-question-compact" aria-hidden="true">❓ ${count}</span>`;
+  banner.title = `${countText}${tailText}`;
+  banner.setAttribute('aria-label', `${countText}${tailText}`);
   banner.classList.add('visible');
   banner.disabled = false;
 }
@@ -216,8 +230,9 @@ function scrollQuestionCardIntoMessages(el, target) {
 export function renderRelayQuestions() {
   const el = document.getElementById('messages');
   if (!el) return;
-  // The questions that don't block go first: the cards a turn waits on stay last.
-  renderSessionAskCards();
+  // The questions that don't block: their 📓 stubs, in their turns' bubbles
+  // or standing alone before the cards a turn waits on.
+  renderQuestionStubs();
   const previousScrollTop = el.scrollTop;
   // A card is shown to a reader who is at the end. Anyone further up stays
   // where they are; the jump-to-bottom button says that a question waits.

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

@@ -277,7 +277,7 @@ export function renderAttachmentPreview() {
     const annotatable = att.isImage && att.previewUrl && isAnnotatableImageType(att.type);
     const thumb = att.isImage && att.previewUrl
       ? `<img src="${escHtml(att.previewUrl)}" alt="${escHtml(att.name)}"${annotatable ? ` onclick="openAnnotateEditorForPending(${idx})" title="Annotate ${escHtml(att.name)}" style="cursor: pointer;"` : ''}>`
-      : `<div class="attachment-preview-meta" style="height:88px;display:flex;align-items:center;justify-content:center">📎</div>`;
+      : `<div class="attachment-preview-meta" style="height:calc(88px * var(--ui-scale));display:flex;align-items:center;justify-content:center">📎</div>`;
     const annotateBadge = annotatable
       ? `<span class="attachment-preview-annotate" aria-hidden="true">🖍️</span>`
       : '';

package/server/public/app/back-guard.mjs

@@ -9,7 +9,26 @@
 
 export const BACK_GUARD_FLOOR = 'oarBackGuardFloor';
 export const BACK_GUARD_APP = 'oarApp';
-const FIRST_INTERACTION_EVENTS = ['pointerdown', 'keydown', 'touchstart'];
+// Every entry the app writes carries its place in the stack, so a pop tells
+// back from forward (session-history.mjs, viewer-history.mjs).
+export const HISTORY_POSITION = 'oarPos';
+// The visit's base (the floor, the phone's session list) is laid: a reload
+// on any later entry must not lay it again.
+export const VISIT_LAID = 'oarLaid';
+// The place in the stack of the visit's lowest own entry (the phone's list,
+// else the first session): back from above it stays in the app.
+export const VISIT_BASE = 'oarBase';
+export const FIRST_INTERACTION_EVENTS = Object.freeze(['pointerdown', 'keydown', 'touchstart']);
+
+/** The marks every later entry of the visit carries over from the one below. */
+export function inheritedVisitMarks(state) {
+  const marks = {};
+  if (!state || typeof state !== 'object') return marks;
+  if (state[BACK_GUARD_APP]) marks[BACK_GUARD_APP] = true;
+  if (state[VISIT_LAID]) marks[VISIT_LAID] = state[VISIT_LAID];
+  if (Number.isFinite(state[VISIT_BASE])) marks[VISIT_BASE] = state[VISIT_BASE];
+  return marks;
+}
 
 /**
  * Lay the floor at the first touch or key, not at start-up: an entry a page
@@ -19,13 +38,13 @@ const FIRST_INTERACTION_EVENTS = ['pointerdown', 'keydown', 'touchstart'];
  * interaction nothing a page does keeps back from leaving; from then on
  * the floor holds.
  */
-export function armBackGuardOnFirstInteraction({ history, enabled = true, target, onFloor = null } = {}) {
+export function armBackGuardOnFirstInteraction({ history, enabled = true, target, onFloor = null, entryAgain = null } = {}) {
   if (!enabled || !history || !target) return null;
   const state = { guard: null };
   const arm = () => {
     for (const eventName of FIRST_INTERACTION_EVENTS) target.removeEventListener(eventName, arm, true);
     if (state.guard) return;
-    state.guard = installBackGuard({ history, enabled: true, onFloor });
+    state.guard = installBackGuard({ history, enabled: true, onFloor, entryAgain });
     target.addEventListener('popstate', () => state.guard.onPopState());
   };
   for (const eventName of FIRST_INTERACTION_EVENTS) target.addEventListener(eventName, arm, true);
@@ -38,8 +57,12 @@ export function armBackGuardOnFirstInteraction({ history, enabled = true, target
  * lets the next back leave unless the user touches the app in between:
  * one swallowed press, then the app closes — the pattern phones use, and
  * the moment to say "press back again to close".
+ *
+ * `entryAgain` names the entry pushed back above the floor: `{ state, url }`
+ * (the session list on a phone, else the session on screen). Without it a
+ * bare app entry goes back up.
  */
-export function installBackGuard({ history, enabled = true, onFloor = null } = {}) {
+export function installBackGuard({ history, enabled = true, onFloor = null, entryAgain = null } = {}) {
   if (!enabled || !history) return null;
   const current = history.state && typeof history.state === 'object' ? history.state : {};
   // After a reload on the app's entry the floor already lies beneath it.
@@ -51,7 +74,10 @@ export function installBackGuard({ history, enabled = true, onFloor = null } = {
     /** Feed every popstate here. */
     onPopState() {
       if (!history.state?.[BACK_GUARD_FLOOR]) return;
-      history.pushState({ [BACK_GUARD_APP]: true }, '');
+      const again = typeof entryAgain === 'function' ? entryAgain() : null;
+      if (again?.state && again.url) history.pushState({ ...again.state, [BACK_GUARD_APP]: true }, '', again.url);
+      else if (again?.state) history.pushState({ ...again.state, [BACK_GUARD_APP]: true }, '');
+      else history.pushState({ [BACK_GUARD_APP]: true }, '');
       onFloor?.();
     },
   };