@oar-sh/oar 0.9.21 → 0.9.22

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

@@ -0,0 +1,89 @@
+// 📓 Questions of one conversation: the order the panel lists them in, the
+// header icon's count and its labels. Pure: no DOM, no fetch.
+//
+// An ask (relay-ask-service.mjs shape) is pending, or closed: answered,
+// dismissed, withdrawn or cancelled. Pending asks come first, the urgent ones
+// (`urgency: 'now'`) ahead of the rest, each group newest first; then those
+// closed in the last day, the latest close first.
+
+export const QUESTIONS_CLOSED_KEEP_MS = 24 * 60 * 60_000;
+
+function toText(value) {
+  return String(value ?? '').trim();
+}
+
+function timeOf(value) {
+  const ms = Date.parse(toText(value));
+  return Number.isFinite(ms) ? ms : 0;
+}
+
+function newestFirst(a, b) {
+  return timeOf(b.createdAt) - timeOf(a.createdAt) || toText(b.id).localeCompare(toText(a.id));
+}
+
+function closedAt(ask) {
+  return timeOf(ask.answeredAt) || timeOf(ask.updatedAt);
+}
+
+export function isUrgentAsk(ask) {
+  return ask?.urgency === 'now';
+}
+
+/**
+ * The asks of `conversationId`, split and ordered for the panel:
+ * `{ pending, urgent, answered }` where `pending` lists every pending ask
+ * (urgent ones first), `urgent` counts them and `answered` holds the asks
+ * closed within the last day.
+ */
+export function questionsOfConversation(asks, conversationId, now = Date.now()) {
+  const id = toText(conversationId);
+  const mine = (Array.isArray(asks) ? asks : [])
+    .filter((ask) => ask && !ask.relayId && id && toText(ask.conversationId || ask.session?.id) === id);
+  const pending = mine.filter((ask) => ask.status === 'pending');
+  const urgentAsks = pending.filter(isUrgentAsk).sort(newestFirst);
+  const normalAsks = pending.filter((ask) => !isUrgentAsk(ask)).sort(newestFirst);
+  const since = now - QUESTIONS_CLOSED_KEEP_MS;
+  const answered = mine
+    .filter((ask) => ask.status !== 'pending' && closedAt(ask) >= since)
+    .sort((a, b) => closedAt(b) - closedAt(a) || toText(b.id).localeCompare(toText(a.id)));
+  return { pending: [...urgentAsks, ...normalAsks], urgent: urgentAsks.length, answered };
+}
+
+/**
+ * A count badge: nothing at zero; with an urgent one waiting the urgent
+ * count, marked; else the pending count.
+ */
+export function questionsBadge({ pending = 0, urgent = 0 } = {}) {
+  const open = Math.max(0, Number(pending) || 0);
+  const hot = Math.max(0, Number(urgent) || 0);
+  if (hot > 0) return { text: String(hot), urgent: true };
+  if (open > 0) return { text: String(open), urgent: false };
+  return { text: '', urgent: false };
+}
+
+/** The 📓 button's tooltip and label. */
+export function questionsAria({ pending = 0, urgent = 0 } = {}) {
+  const open = Math.max(0, Number(pending) || 0);
+  const hot = Math.max(0, Number(urgent) || 0);
+  if (hot > 0) return `Questions (${hot} urgent of ${open} open)`;
+  if (open > 0) return `Questions (${open} open)`;
+  return 'Questions';
+}
+
+/** The ︙ twin's text: "📓 Questions (2 urgent)" / "(3 open)". */
+export function questionsTwinLabel({ pending = 0, urgent = 0 } = {}) {
+  const open = Math.max(0, Number(pending) || 0);
+  const hot = Math.max(0, Number(urgent) || 0);
+  if (hot > 0) return `📓 Questions (${hot} urgent)`;
+  if (open > 0) return `📓 Questions (${open} open)`;
+  return '📓 Questions';
+}
+
+/** The panel's head line: "📓 Questions · 2 urgent · 5 open". */
+export function questionsPanelTitle({ pending = 0, urgent = 0 } = {}) {
+  const open = Math.max(0, Number(pending) || 0);
+  const hot = Math.max(0, Number(urgent) || 0);
+  return ['📓 Questions', hot > 0 ? `${hot} urgent` : '', open > 0 ? `${open} open` : 'none open']
+    .filter(Boolean)
+    .join(' · ');
+}

package/server/public/app/relay-board-view.js

@@ -77,8 +77,18 @@ async function loadBoardHistory(conversationId) {
 
 /** Where a board is shown: its turn's reply, the live bubble of its turn, or nowhere yet. */
 function findBoardHost(el, board) {
-  const source = String(board?.messageId || board?.queueId || '').trim();
-  if (!source) return null;
+  return findTurnBubble(el, board?.messageId || board?.queueId);
+}
+
+/**
+ * The bubble of the turn that answers queue row `queueId`: its reply
+ * (`{ bubble, live: false }`), else the live bubble while it runs
+ * (`live: true`), else null (not loaded, or not there). Plan boards and 📓
+ * stubs both live there.
+ */
+export function findTurnBubble(el, queueId) {
+  const source = String(queueId || '').trim();
+  if (!el || !source) return null;
   const replies = el.querySelectorAll(`.msg.assistant[data-source-message-id="${CSS.escape(source)}"]`);
   // The turn's own reply is the last row that answers the message; a steer's
   // marker above it is not a reply.

package/server/public/app/relay-thoughts.mjs

@@ -11,6 +11,13 @@ function normalizeTimestampMs(value) {
   return Number.isFinite(parsed) ? parsed : null;
 }
 
+// A thought's place in its turn's order (migration 0038), or null.
+function normalizeTurnSeq(value) {
+  if (value === null || value === undefined || value === '') return null;
+  const num = Number(value);
+  return Number.isInteger(num) && num > 0 ? num : null;
+}
+
 function toThoughtEntry(value, order) {
   const text = String(value?.text || '');
   if (!text.trim()) return null;
@@ -19,6 +26,7 @@ function toThoughtEntry(value, order) {
   const subagentRunId = String(value?.subagentRunId || '').trim() || null;
   return {
     reasoningId,
+    turnSeq: normalizeTurnSeq(value?.turnSeq),
     seq: normalizeSeq(value?.seq),
     text,
     done: !!value?.done,
@@ -75,7 +83,12 @@ export function normalizeRelayThoughtList(thoughts = []) {
     }
     const existing = byReasoningId.get(entry.reasoningId);
     if (!existing || isCandidateNewer(entry, existing)) {
-      byReasoningId.set(entry.reasoningId, entry);
+      // The text goes to the newer copy; the turn order stays the first one
+      // known (a thought sits where its first chunk arrived).
+      const turnSeq = existing?.turnSeq ?? entry.turnSeq;
+      byReasoningId.set(entry.reasoningId, { ...entry, turnSeq });
+    } else if (existing.turnSeq === null && entry.turnSeq !== null) {
+      existing.turnSeq = entry.turnSeq;
     }
   }
 
@@ -87,6 +100,7 @@ export function normalizeRelayThoughtList(thoughts = []) {
     done: !!entry.done,
     timestamp: entry.timestamp || null,
     subagentRunId: entry.subagentRunId || null,
+    ...(entry.turnSeq !== null ? { turnSeq: entry.turnSeq } : {}),
   }));
 }
 

package/server/public/app/session-history-ui.js

@@ -96,6 +96,7 @@ function overlayDescriptors(closers) {
     { name: 'tmux-inspector-modal', find: byId('tmux-inspector-modal'), isOpen: isVisible, close: closers.closeTmuxInspector },
     { name: 'image-annotate-modal', find: byId('image-annotate-modal'), isOpen: isVisible, close: closers.closeAnnotateEditor },
     { name: 'relay-watch-panel', find: byId('relay-watch-panel'), isOpen: isShown, close: closers.closeRelayWatchPanel },
+    { name: 'questions-panel', find: byId('questions-panel'), isOpen: isShown, close: closers.closeQuestionsPanel },
     { name: 'relay-schedule-panel', find: byId('relay-schedule-panel'), isOpen: isShown, close: closers.closeRelaySchedulePanel },
     { name: 'emoji-popup', find: byId('emoji-popup'), isOpen: isVisible, close: closers.closeEmojiPicker },
     // A row's menu (right-click, long press, ⓘ): on <body> while open.

package/server/public/app/settings-modal.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,
@@ -1942,6 +1945,9 @@ export function openSettingsModal(tab, providerTab) {
   }
   syncSuspendHostVisibility();
   syncScrollOnSendToggle();
+  syncThoughtsExpandedToggle();
+  syncLiveActivityCapSlider();
+  syncStreamViewToggle();
   syncWindowRetentionSlider();
   syncFontScaleSelect();
   syncPwaAppNameInput();

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';
@@ -377,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(() => {});
   });
@@ -600,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 : [];
@@ -669,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', () => {
@@ -752,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);
@@ -795,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 });
@@ -810,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();
     }
   });

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);

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

@@ -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);
@@ -552,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');
@@ -560,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/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');
+}