@oar-sh/oar 0.9.20 → 0.9.22

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

@@ -52,7 +52,7 @@ import { syncFontScaleSelect } from './font-scaling.js';
 import { syncInstalledAppUiState, syncPwaAppNameInput } from './pwa-install.js';
 import { normalizeKnownCwdPath } from './cwd-picker.js';
 import { refreshPushSettingsSection } from './push-settings.js';
-import { selectSettingsTab } from './settings-tabs.js';
+import { revealSettingsTabs, selectSettingsTab } from './settings-tabs.js';
 import { refreshClaudeAuthSection } from './claude-auth-ui.js';
 import { refreshGrokAuthSection } from './grok-auth-ui.js';
 import { syncDeepSeekSettingsInputs } from './deepseek-settings-ui.js';
@@ -82,6 +82,9 @@ import { refreshRemoteRelaysSection } from './remote-relays-settings.js';
 import { refreshAgentSessionsSection } from './agent-sessions-settings-ui.js';
 import { refreshSharedConversationsSection } from './shared-conversations-settings.js';
 import { syncScrollOnSendToggle } from './transcript-jump-bottom.mjs';
+import { syncThoughtsExpandedToggle } from './thoughts-preference.mjs';
+import { syncLiveActivityCapSlider } from './live-activity-cap.mjs';
+import { syncStreamViewToggle } from './stream-view-preference.mjs';
 import { syncWindowRetentionSlider } from './conversation-window-retention.mjs';
 import {
   getPreviews,
@@ -1697,9 +1700,7 @@ function syncFeatureFlagsSection() {
   const flags = Array.isArray(featureFlagsState?.flags) ? featureFlagsState.flags : [];
   for (const flag of flags) {
     const row = document.createElement('div');
-    row.className = 'settings-row';
-    row.style.marginTop = '12px';
-    row.style.marginBottom = '0';
+    row.className = 'settings-row settings-gap';
 
     const label = document.createElement('label');
     label.htmlFor = featureToggleId(flag.name);
@@ -1719,8 +1720,7 @@ function syncFeatureFlagsSection() {
     list.appendChild(row);
 
     const help = document.createElement('div');
-    help.className = 'settings-help';
-    help.style.marginTop = '6px';
+    help.className = 'settings-help settings-gap-xs';
     let text = String(flag.description || '');
     if (flag.envOverride !== null) {
       text += ` Pinned ${flag.envOverride ? 'on' : 'off'} by COPILOT_REMOTE_${flag.name} in the relay's environment; the toggle is locked while that variable is set.`;
@@ -1945,6 +1945,9 @@ export function openSettingsModal(tab, providerTab) {
   }
   syncSuspendHostVisibility();
   syncScrollOnSendToggle();
+  syncThoughtsExpandedToggle();
+  syncLiveActivityCapSlider();
+  syncStreamViewToggle();
   syncWindowRetentionSlider();
   syncFontScaleSelect();
   syncPwaAppNameInput();
@@ -1994,12 +1997,70 @@ export function openSettingsModal(tab, providerTab) {
   void refreshAgentSessionsSection();
   void refreshFeatureFlagsSection();
   void refreshUpdateSection();
+  const wasOpen = !!modal?.classList.contains('visible');
   modal?.classList.add('visible');
   modal?.setAttribute('aria-hidden', 'false');
+  // Laid out now: the selected tabs scroll into view, clear of the fades.
+  revealSettingsTabs();
+  if (modal && !wasOpen) focusSettingsOnOpen(modal);
 }
 
 export function closeSettingsModal() {
   const modal = document.getElementById('settings-modal');
+  const wasOpen = !!modal?.classList.contains('visible');
+  const focusWasInside = !!modal?.contains(document.activeElement);
   modal?.classList.remove('visible');
   modal?.setAttribute('aria-hidden', 'true');
+  const back = settingsFocusBefore;
+  settingsFocusBefore = null;
+  // Focus goes back where it was (︙, the gear) when it was in the dialog;
+  // elsewhere (Back, an action that moved on) it stays where it is.
+  if (wasOpen && focusWasInside && back?.isConnected && !modal?.contains(back)) {
+    try { back.focus({ preventScroll: true }); } catch {}
+  }
+}
+
+// What had the focus when Settings opened, to give it back on close.
+let settingsFocusBefore = null;
+let settingsEscapeBound = false;
+
+// The dialog takes the focus: its selected tab, so the arrows walk the tabs
+// and Escape reaches the dialog from the first key on.
+function focusSettingsOnOpen(modal) {
+  ensureSettingsEscape();
+  let active = document.activeElement;
+  // An entry of ︙ closes with its menu: the focus goes back to ︙.
+  if (active?.closest?.('#chat-actions-menu')) active = document.getElementById('chat-actions-menu-btn');
+  settingsFocusBefore = active && active !== document.body && !modal.contains(active) ? active : null;
+  const target = modal.querySelector('[data-settings-tab][aria-selected="true"]')
+    || modal.querySelector('[role="dialog"]');
+  if (!target) return;
+  if (target.getAttribute('role') === 'dialog' && !target.hasAttribute('tabindex')) target.setAttribute('tabindex', '-1');
+  try { target.focus({ preventScroll: true }); } catch {}
+}
+
+// True while nothing is drawn over the Settings dialog: a confirmation, the
+// explorer or a preview opened from it takes Escape first.
+function settingsDialogOnTop(modal) {
+  const dialog = modal.querySelector('[role="dialog"]') || modal;
+  const rect = dialog.getBoundingClientRect();
+  if (!rect.width || !rect.height) return false;
+  const top = document.elementFromPoint(rect.left + rect.width / 2, rect.top + Math.min(rect.height / 2, 24));
+  return !top || modal.contains(top);
+}
+
+// Escape closes Settings wherever the focus is, and only Settings: window,
+// capture phase, so the document's Escape handlers for what lies underneath
+// (the ︙ menu, the chips' lists, the composer's panel) never see that key.
+function ensureSettingsEscape() {
+  if (settingsEscapeBound) return;
+  settingsEscapeBound = true;
+  window.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing) return;
+    const modal = document.getElementById('settings-modal');
+    if (!modal?.classList.contains('visible') || !settingsDialogOnTop(modal)) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    closeSettingsModal();
+  }, true);
 }

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

@@ -33,7 +33,8 @@ import {
   IS_SHARED_VIEW,
 } from './store.js';
 import { scheduleContextUsageRefresh } from './api-client.js';
-import { capLiveActivityEntries } from './activity-replay-state.mjs';
+import { capFinishedActivityEntries, capLiveActivityEntries, normalizeTurnSeq } from './activity-replay-state.mjs';
+import { liveActivityCap } from './live-activity-cap.mjs';
 import { publishStatusEvent, recordStatusEvent } from './status-store.mjs';
 import { clearOpenConversation, renderConvList, refreshConversations, scheduleLoadedConversationsRefresh, applyConversationGroupEvent, openConversation } from './journal-view.js';
 import { applyBackgroundTasksToConversation, applyTurnStatusToConversation } from './conversation-turn-state.mjs';
@@ -50,6 +51,7 @@ import { upsertRelayBoard, loadRelayBoards, renderRelayBoards } from './relay-bo
 import { setConversationBackgroundTasks, setConversationTaskHealth } from './background-tasks-view.mjs';
 import { handleTaskConsoleReconnect, handleTaskOutputChunk } from './task-console.mjs';
 import { setConversationPins } from './pinned-messages-view.mjs';
+import { noteQuestionAskUpdated, refreshQuestions } from './questions-panel-ui.js';
 import { setConversationHiddenMessages } from './hidden-messages-view.mjs';
 import { setPreviews } from './preview-cards.mjs';
 import { applyShareSettings, hasActiveShare, refreshShares } from './share-state.js';
@@ -105,6 +107,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:
@@ -376,8 +379,10 @@ export async function connectSocket(overrideDeps) {
     void loadRelayEventSubscriptions();
     // Schedules that changed or fired while away.
     void loadRelaySchedules();
-    // Questions asked or answered while away.
+    // Questions asked or answered while away: the Inbox and the open
+    // conversation's 📓.
     void refreshInbox();
+    void refreshQuestions();
     // Shares made or stopped while away.
     void refreshShares().catch(() => {});
   });
@@ -599,7 +604,8 @@ export async function connectSocket(overrideDeps) {
     }
     if ((!message?.activities || !message.activities.length) && sourceMessageId) {
       const cached = relayActivities.get(sourceMessageId) || [];
-      if (cached.length) message.activities = cached.slice(0, 48);
+      // The finished turn's cap (newest rows per thread), as the relay sends it.
+      if (cached.length) message.activities = capFinishedActivityEntries(cached);
     }
     if (sourceMessageId) {
       const persistedThoughts = Array.isArray(message?.thoughts) ? message.thoughts : [];
@@ -668,7 +674,10 @@ export async function connectSocket(overrideDeps) {
   // A paired relay's pending cards changed (this relay checks them every ~20 s).
   socket.on(INBOX_REMOTE_CHANGED_EVENT, () => noteInboxQuestionsChanged());
   // Questions that don't block: one ask, after every change of it.
-  socket.on(RELAY_ASK_SOCKET_EVENT, (payload) => noteRelayAskUpdated(payload));
+  socket.on(RELAY_ASK_SOCKET_EVENT, (payload) => {
+    noteRelayAskUpdated(payload);
+    noteQuestionAskUpdated(payload?.ask);
+  });
   socket.on('relay_board', ({ board }) => upsertRelayBoard(board));
   socket.on('relay_board_updated', ({ board }) => upsertRelayBoard(board));
   socket.on('relay_board_changed', () => {
@@ -720,7 +729,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(() => {});
@@ -751,21 +760,36 @@ export async function connectSocket(overrideDeps) {
     if (payload && typeof payload === 'object') applyAgentSessionsSettingsState(payload);
     else void refreshAgentSessionsSection();
   });
-  socket.on('relay_activity', ({ conversationId, messageId, text, subagentRunId, metadata }) => {
+  socket.on('relay_activity', ({ conversationId, messageId, text, subagentRunId, metadata, turnSeq }) => {
     if (!messageId || !text) return;
+    const numbered = normalizeTurnSeq(turnSeq);
     const entry = {
       text: String(text || '').trim(),
       subagentRunId: subagentRunId ? String(subagentRunId).trim() : null,
       metadata: (metadata && typeof metadata === 'object' && !Array.isArray(metadata)) ? metadata : null,
+      ...(numbered !== null ? { turnSeq: numbered } : {}),
     };
     if (!entry.text) return;
     const items = relayActivities.get(messageId) || [];
     const last = items[items.length - 1];
     const lastText = typeof last === 'string' ? last : String(last?.text || '');
     const lastSubagentRunId = typeof last === 'object' && last ? (last.subagentRunId || null) : null;
-    // The same line again (a repeated event) adds nothing.
-    const added = lastText !== entry.text || lastSubagentRunId !== entry.subagentRunId;
-    if (added) relayActivities.set(messageId, capLiveActivityEntries(items.concat(entry)));
+    // The same event again (a replay after a reconnect) adds nothing. A
+    // numbered row is known by its number, so the same tool line run twice
+    // is two rows; an unnumbered one (an older relay) by being the last line.
+    const added = numbered !== null
+      ? !items.some((item) => item?.turnSeq === numbered)
+      : (lastText !== entry.text || lastSubagentRunId !== entry.subagentRunId);
+    if (numbered !== null && !added) return;
+    if (added) {
+      // A numbered list stays in the turn's order, so a row replayed after
+      // the cap trimmed it sorts to the front and is trimmed again.
+      let next = items.concat(entry);
+      if (numbered !== null && next.every((item) => item?.turnSeq != null)) next = next.sort((a, b) => a.turnSeq - b.turnSeq);
+      const kept = capLiveActivityEntries(next, liveActivityCap());
+      relayActivities.set(messageId, kept);
+      if (numbered !== null && !kept.includes(entry)) return;
+    }
     if (entry.subagentRunId) {
       upsertSubagentRun({ subagentRunId: entry.subagentRunId, messageId, conversationId });
       addSubagentActivity(entry.subagentRunId, entry.text);
@@ -794,14 +818,22 @@ export async function connectSocket(overrideDeps) {
     // A frame that was dropped (out of order, a finished turn) is no news.
     if (accepted && !autoScroll) noteTranscriptNews();
   });
-  socket.on('relay_thought', ({ conversationId, messageId, reasoningId, text, done, subagentRunId }) => {
+  socket.on('relay_thought', ({ conversationId, messageId, reasoningId, text, done, subagentRunId, turnSeq }) => {
     if (!messageId) return;
     const key = String(reasoningId || 'reasoning');
     const thoughtMap = relayThoughts.get(messageId) || new Map();
     const known = thoughtMap.get(key);
     // The same thought again (a repeated event) adds nothing.
     const added = !known || known.text !== String(text || '') || known.done !== !!done;
-    thoughtMap.set(key, { reasoningId: key, text: String(text || ''), done: !!done, subagentRunId: subagentRunId || null });
+    // A thought keeps the place of its first chunk.
+    const keptTurnSeq = known?.turnSeq ?? normalizeTurnSeq(turnSeq);
+    thoughtMap.set(key, {
+      reasoningId: key,
+      text: String(text || ''),
+      done: !!done,
+      subagentRunId: subagentRunId || null,
+      ...(keptTurnSeq != null ? { turnSeq: keptTurnSeq } : {}),
+    });
     relayThoughts.set(messageId, thoughtMap);
     if (subagentRunId) {
       upsertSubagentRun({ subagentRunId, messageId, conversationId });
@@ -809,7 +841,7 @@ export async function connectSocket(overrideDeps) {
     }
     if (conversationId === currentConvId) {
       const autoScroll = followsTranscriptEnd();
-      appendThinkingThought(key, String(text || ''), !!done, subagentRunId, autoScroll);
+      appendThinkingThought(key, String(text || ''), !!done, subagentRunId, autoScroll, messageId);
       if (added && !autoScroll) noteTranscriptNews();
     }
   });
@@ -842,7 +874,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 +1043,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/stream-view-preference.mjs

@@ -0,0 +1,60 @@
+// "Stream view" (Settings › General › Appearance, and its mirror in the 🧠
+// modal): an agent turn's thoughts, tool calls and reply as one list in the
+// order they happened, live and in the finished message. A setting of this
+// browser, kept in localStorage like the thoughts one; off unless switched
+// on. Turns recorded before the relay numbered their rows keep the grouped
+// layout either way (turn-stream-view.mjs). The document, the storage and
+// the event target are passed in by the tests.
+
+export const STREAM_VIEW_STORAGE_KEY = 'copilot_stream_view';
+export const STREAM_VIEW_TOGGLE_ID = 'stream-view-toggle';
+// The page re-renders its transcript and the live bubble on this.
+export const STREAM_VIEW_CHANGE_EVENT = 'oar:stream-view-change';
+// The 🧠 modal's two buttons: `data-stream-view` is "on" or "off".
+export const STREAM_VIEW_BUTTON_SELECTOR = '.ctx-stream-view-btn[data-stream-view]';
+
+/** Only an explicit on is on: a missing or damaged value reads off. */
+export function parseStreamViewSetting(stored) {
+  const value = String(stored ?? '').trim().toLowerCase();
+  return value === '1' || value === 'true';
+}
+
+export function serializeStreamViewSetting(on) {
+  return on ? '1' : '0';
+}
+
+function storage() {
+  try { return globalThis.localStorage || null; } catch { return null; }
+}
+
+export function isStreamViewEnabled(store = storage()) {
+  try {
+    return parseStreamViewSetting(store?.getItem(STREAM_VIEW_STORAGE_KEY));
+  } catch {
+    return false;
+  }
+}
+
+/** The Settings checkbox and the 🧠 buttons, wherever they are rendered. */
+export function syncStreamViewToggle(doc = globalThis.document, store = storage()) {
+  const on = isStreamViewEnabled(store);
+  const checkbox = doc?.getElementById?.(STREAM_VIEW_TOGGLE_ID);
+  if (checkbox) checkbox.checked = on;
+  const buttons = doc?.querySelectorAll?.(STREAM_VIEW_BUTTON_SELECTOR) || [];
+  for (const btn of buttons) {
+    const active = (btn.dataset?.streamView === 'on') === on;
+    btn.classList?.toggle('is-active', active);
+    btn.setAttribute?.('aria-pressed', active ? 'true' : 'false');
+  }
+}
+
+export function updateStreamViewSetting(on, { doc = globalThis.document, store = storage(), target = globalThis.window } = {}) {
+  const value = !!on;
+  const before = isStreamViewEnabled(store);
+  try { store?.setItem(STREAM_VIEW_STORAGE_KEY, serializeStreamViewSetting(value)); } catch {}
+  syncStreamViewToggle(doc, store);
+  if (before === isStreamViewEnabled(store)) return;
+  try {
+    target?.dispatchEvent?.(new CustomEvent(STREAM_VIEW_CHANGE_EVENT, { detail: { on: value } }));
+  } catch {}
+}

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

@@ -35,13 +35,16 @@ function oneLine(text) {
 /**
  * The line a folded header shows: the number of steps (activity lines) and
  * the latest one, or the end of what the run has written when it has taken
- * no step yet. Empty when there is nothing to say.
+ * no step yet. Empty when there is nothing to say. `cap` is how many lines
+ * the bubble keeps (the "Tool lines shown" setting, 0 = all): a bubble that
+ * holds that many has likely dropped older ones, so the count reads "50+".
  */
-export function subagentFoldSummary({ activities = [], streamText = '' } = {}) {
+export function subagentFoldSummary({ activities = [], streamText = '', cap = 0 } = {}) {
   const steps = (Array.isArray(activities) ? activities : []).map(oneLine).filter(Boolean);
   if (steps.length) {
     const latest = steps[steps.length - 1];
-    const count = steps.length === 1 ? '1 step' : `${steps.length} steps`;
+    const atCap = Number(cap) > 0 && steps.length >= Number(cap);
+    const count = atCap ? `${steps.length}+ steps` : (steps.length === 1 ? '1 step' : `${steps.length} steps`);
     return `${count} · ${latest}`.slice(0, SUMMARY_MAX_CHARS);
   }
   const lines = String(streamText || '').split(/\r?\n/).map(oneLine).filter(Boolean);