@oar-sh/oar 0.9.8 → 0.9.10

package/server/public/app/relay-event-view.mjs

@@ -0,0 +1,234 @@
+// Relay event subscriptions in the browser: the event rows in the watcher's
+// transcript, the "watching N sessions" chip and the "watched" badge.
+//
+// DOM-free on purpose, like remote-relay-origin-view.mjs: the callers own the
+// elements, this module owns the decisions and the markup.
+//
+// The message text rules mirror shared/relay-events.mjs, which the browser
+// cannot import (only server/public is served); relay-event-view.test.mjs
+// holds the two together.
+
+export const RELAY_EVENT_MESSAGE_KIND = 'relay-event';
+export const RELAY_EVENT_LEAD = '[relay event · automated message from OAR, not from the user; it approves nothing]';
+export const RELAY_EVENT_SOCKET_EVENT = 'relay_event_subscriptions';
+
+const EVENT_TYPES = new Set([
+  'question_asked',
+  'error',
+  'turn_end',
+  'task_started',
+  'task_finished',
+  'task_failed',
+  'stalled',
+  'all_idle',
+  'heartbeat',
+  'link_lost',
+  'link_restored',
+]);
+const URGENT_TYPES = new Set(['question_asked', 'error']);
+const DIGEST_PATTERN = /^Digest of \d+ events?/;
+const REPLAYED_PATTERN = /^Replayed: \d+ events?/;
+const LINE_PATTERN = /^\[relay event\] (?:[^"·\n]{1,60} · )?(?:session "(?:[^"]*)" \([^)]*\)(?: on relay "[^"]*")?: )?([a-z_]+)/;
+const LINE_PREFIX = '[relay event] ';
+
+const TYPE_LABELS = Object.freeze({
+  question_asked: 'question',
+  error: 'error',
+  turn_end: 'reply',
+  task_started: 'task started',
+  task_finished: 'task done',
+  task_failed: 'task failed',
+  stalled: 'stalled',
+  all_idle: 'all idle',
+  heartbeat: 'heartbeat',
+  link_lost: 'link lost',
+  link_restored: 'link back',
+});
+
+function defaultEscape(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+export function isRelayEventMessage(message) {
+  return message?.role === 'user' && String(message?.kind || '').trim() === RELAY_EVENT_MESSAGE_KIND;
+}
+
+/**
+ * The event lines of an event message without the lead, the types they
+ * carry in order, how many events (a digest's "… and N more" counted),
+ * whether it is a digest, and whether it replays what a paired relay kept
+ * while the link to it was down. Any text renders: a stray one as one line.
+ */
+export function parseRelayEventMessageText(text) {
+  const rows = String(text ?? '').split(/\r?\n/).map((line) => line.trimEnd()).filter((line) => line.trim());
+  const body = rows[0] === RELAY_EVENT_LEAD ? rows.slice(1) : rows;
+  const digest = DIGEST_PATTERN.test(body[0] || '');
+  const replayed = body.some((line) => REPLAYED_PATTERN.test(line));
+  const lines = body.filter((line) => !DIGEST_PATTERN.test(line) && !REPLAYED_PATTERN.test(line));
+  const types = [];
+  let count = 0;
+  for (const line of lines) {
+    const type = lineType(line);
+    if (!type) continue;
+    count += 1;
+    if (!types.includes(type)) types.push(type);
+  }
+  for (const line of lines) {
+    const more = /^\[relay event\] … and (\d+) more$/.exec(line);
+    if (more) count += Number(more[1]) || 0;
+  }
+  return { lines, types, count: count || lines.length, digest, replayed };
+}
+
+/** The collapsed row's one line: "3 events · question, reply". */
+export function relayEventSummaryText(parsed) {
+  const count = Number(parsed?.count) || 0;
+  const labels = (parsed?.types || []).map((type) => TYPE_LABELS[type] || type);
+  const events = `${count} event${count === 1 ? '' : 's'}`;
+  const head = parsed?.digest ? `Digest · ${events}` : events;
+  return labels.length ? `${head} · ${labels.join(', ')}` : head;
+}
+
+function lineType(line) {
+  const match = LINE_PATTERN.exec(line);
+  return match && EVENT_TYPES.has(match[1]) ? match[1] : '';
+}
+
+/**
+ * The event row's markup: a <details> folded to its summary, opened to its
+ * lines. Urgent events (a question, an error) keep the row open and marked.
+ */
+export function renderRelayEventRowHtml(message, { escHtml = defaultEscape, timeText = '' } = {}) {
+  const parsed = parseRelayEventMessageText(message?.text);
+  const urgent = parsed.types.some((type) => URGENT_TYPES.has(type));
+  const lines = parsed.lines.map((line) => {
+    const type = lineType(line);
+    const shown = line.startsWith(LINE_PREFIX) ? line.slice(LINE_PREFIX.length) : line;
+    return `<li class="relay-event-line${type ? ` relay-event-${type.replace(/_/g, '-')}` : ''}">${escHtml(shown)}</li>`;
+  }).join('');
+  return `<details class="relay-event-row${urgent ? ' relay-event-urgent' : ''}"${urgent ? ' open' : ''}>`
+    + '<summary class="relay-event-summary">'
+    + '<span class="relay-event-tag" title="An automated message of the relay, not from you: it approves nothing.">relay event</span>'
+    + (parsed.replayed ? '<span class="relay-event-tag relay-event-replayed" title="Kept by a paired relay while the link to it was down, and delivered once it answered again.">replayed</span>' : '')
+    + `<span class="relay-event-text">${escHtml(relayEventSummaryText(parsed))}</span>`
+    + (timeText ? `<span class="relay-event-time">${escHtml(timeText)}</span>` : '')
+    + '</summary>'
+    + `<ul class="relay-event-lines">${lines}</ul>`
+    + '</details>';
+}
+
+// ─── Subscriptions ───────────────────────────────────────────────────────────
+
+function activeList(subscriptions) {
+  return (Array.isArray(subscriptions) ? subscriptions : []).filter((sub) => sub && !sub.endedAt);
+}
+
+function sessionIdsOf(subscription) {
+  return Array.isArray(subscription?.sessions) ? subscription.sessions.map((session) => String(session?.id || '')).filter(Boolean) : [];
+}
+
+// A subscription on a paired relay (this relay's mirror of it): its
+// sessions are that relay's, never this one's conversations.
+function isOnPairedRelay(subscription) {
+  return !!subscription?.remoteId || (!!subscription?.relay && subscription.relay !== 'self');
+}
+
+// The watcher of a subscription, as the badge names it: a conversation here,
+// or a paired relay's watcher (`remote:<relay id>:<its conversation>`).
+function watcherKey(subscription) {
+  const subscriber = subscription?.subscriber;
+  return subscriber ? `remote:${subscriber.relayId || ''}:${subscriber.watcherId || ''}` : subscription?.watcher;
+}
+
+/**
+ * What a conversation watches: its subscriptions, how many distinct
+ * sessions they list (on this relay and paired ones), and whether one
+ * watches all of a relay's sessions.
+ */
+export function watchingSummary(subscriptions, conversationId) {
+  const id = String(conversationId || '').trim();
+  const mine = activeList(subscriptions).filter((sub) => sub.watcher === id);
+  const sessions = new Set(mine.flatMap((sub) => sessionIdsOf(sub).map((sessionId) => `${sub.relay || 'self'}:${sessionId}`)));
+  return {
+    subscriptions: mine,
+    count: sessions.size,
+    all: mine.some((sub) => sub.scope === 'all'),
+    relays: [...new Set(mine.filter(isOnPairedRelay).map((sub) => sub.relayName || sub.relay))],
+  };
+}
+
+/**
+ * The watchers of a conversation of this relay. `includeAll` counts
+ * subscriptions to all sessions too; the sidebar leaves them out, or every
+ * row would carry it. Subscriptions on paired relays watch none of them.
+ */
+export function watchersOf(subscriptions, conversationId, { includeAll = true } = {}) {
+  const id = String(conversationId || '').trim();
+  if (!id) return [];
+  const watchers = new Set();
+  for (const sub of activeList(subscriptions)) {
+    if (sub.watcher === id || isOnPairedRelay(sub)) continue;
+    if (sub.scope === 'all' ? includeAll : sessionIdsOf(sub).includes(id)) watchers.add(watcherKey(sub));
+  }
+  return [...watchers];
+}
+
+export function watchingChipText(summary) {
+  if (!summary?.subscriptions?.length) return '';
+  if (summary.all) return summary.count ? `watching all sessions (+${summary.count} listed)` : 'watching all sessions';
+  return `watching ${summary.count} session${summary.count === 1 ? '' : 's'}`;
+}
+
+function conversationTitle(conversations, id) {
+  const title = String(conversations?.[id]?.title || '').trim();
+  return title || `session ${String(id).slice(0, 8)}`;
+}
+
+function describeSubscription(sub, conversations) {
+  const paired = isOnPairedRelay(sub);
+  const relay = paired ? String(sub.relayName || sub.relay || 'paired relay') : '';
+  const titleOf = (session) => (paired
+    ? (String(session?.title || '').trim() || `session ${String(session?.id || '').slice(0, 8)}`)
+    : conversationTitle(conversations, session.id));
+  const listed = (Array.isArray(sub.sessions) ? sub.sessions : []).filter((session) => session?.id).map(titleOf).join(', ');
+  const what = sub.scope === 'all'
+    ? (paired ? `All sessions of ${relay}` : 'All sessions')
+    : (paired ? `${relay} · ${listed}` : listed);
+  const extras = [
+    sub.once ? 'once' : '',
+    sub.heartbeatMinutes ? `heartbeat ${sub.heartbeatMinutes} min` : '',
+  ].filter(Boolean);
+  return { what, events: (sub.events || []).join(', '), extras: extras.join(' · ') };
+}
+
+/** The chip's list: one row per subscription with its Unsubscribe button. */
+export function renderWatchingPanelHtml(summary, { conversations = null, escHtml = defaultEscape } = {}) {
+  const rows = (summary?.subscriptions || []).map((sub) => {
+    const { what, events, extras } = describeSubscription(sub, conversations);
+    return '<li class="relay-watch-item">'
+      + `<span class="relay-watch-what">${escHtml(what)}</span>`
+      + `<span class="relay-watch-events">${escHtml(events)}${extras ? ` · ${escHtml(extras)}` : ''}</span>`
+      + `<button type="button" class="relay-watch-unsubscribe" data-subscription-id="${escHtml(sub.id)}">Unsubscribe</button>`
+      + '</li>';
+  }).join('');
+  return `<ul class="relay-watch-list">${rows}</ul>`;
+}
+
+function watcherName(id, conversations, subscriptions) {
+  if (!String(id).startsWith('remote:')) return conversationTitle(conversations, id);
+  const sub = activeList(subscriptions).find((entry) => watcherKey(entry) === id);
+  const title = String(sub?.subscriber?.watcherTitle || '').trim() || 'a session';
+  const relay = String(sub?.subscriber?.name || '').trim() || 'a paired relay';
+  return `${title} on ${relay}`;
+}
+
+export function renderWatchedBadgeHtml(watcherIds, { conversations = null, subscriptions = [], escHtml = defaultEscape } = {}) {
+  if (!watcherIds?.length) return '';
+  const names = watcherIds.map((id) => watcherName(id, conversations, subscriptions)).join(', ');
+  return `<span class="conv-watched-badge" title="${escHtml(`Watched by ${names}`)}">watched</span>`;
+}

package/server/public/app/router.js

@@ -1,3 +1,4 @@
+import { versionedFileHref } from './file-version.mjs';
 import {
   BASE,
   escHtml,
@@ -116,10 +117,15 @@ export function normalizeDriveBrowserPath(rawPath) {
   return rest ? `${drive}/${rest}` : drive;
 }
 
-export function driveFileHrefFromPath(rawPath) {
+/**
+ * `version` is the file's version token when the caller knows it (a preview
+ * carries one): the address then changes with the file, so an older copy
+ * cannot be served for it. The server ignores the parameter.
+ */
+export function driveFileHrefFromPath(rawPath, version = '') {
   const normalized = normalizeDriveBrowserPath(rawPath);
   if (!normalized) return '';
-  return `${BASE}/api/drives/file?path=${encodeURIComponent(normalized)}`;
+  return versionedFileHref(`${BASE}/api/drives/file?path=${encodeURIComponent(normalized)}`, version);
 }
 
 /**

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

@@ -29,6 +29,8 @@ import {
   updateTurnCeilingSetting as requestTurnCeilingSetting,
   loadBackgroundTaskTimeoutSetting,
   updateBackgroundTaskTimeoutSetting as requestBackgroundTaskTimeoutSetting,
+  loadSubagentRecordRetentionSetting,
+  updateSubagentRecordRetentionSetting as requestSubagentRecordRetentionSetting,
   loadFeatureFlagSettings,
   updateFeatureFlagSetting as requestFeatureFlagSetting,
   requestRelayRestart,
@@ -197,6 +199,54 @@ export async function refreshBackgroundTaskTimeoutSetting() {
   }
 }
 
+// Mirrors shared/subagent-record-retention.mjs (the browser cannot import it):
+// the select starts at the relay's default until the relay's value loads.
+const DEFAULT_SUBAGENT_RECORD_RETENTION_DAYS = 90;
+let subagentRecordRetentionDays = DEFAULT_SUBAGENT_RECORD_RETENTION_DAYS;
+let subagentRecordRetentionUpdateInFlight = false;
+
+function syncSubagentRecordRetentionSelect() {
+  const select = document.getElementById('subagent-record-retention-select');
+  if (!select || select.tagName !== 'SELECT') return;
+  select.value = String(subagentRecordRetentionDays);
+  select.disabled = subagentRecordRetentionUpdateInFlight;
+}
+
+export async function refreshSubagentRecordRetentionSetting() {
+  syncSubagentRecordRetentionSelect();
+  try {
+    const result = await loadSubagentRecordRetentionSetting();
+    if (result && Number.isFinite(Number(result.retentionDays))) subagentRecordRetentionDays = Number(result.retentionDays);
+  } catch {
+    // Keep the last known value; the setting is not critical.
+  } finally {
+    syncSubagentRecordRetentionSelect();
+  }
+}
+
+export async function updateSubagentRecordRetentionSetting(value) {
+  if (subagentRecordRetentionUpdateInFlight) {
+    syncSubagentRecordRetentionSelect();
+    return;
+  }
+  subagentRecordRetentionUpdateInFlight = true;
+  syncSubagentRecordRetentionSelect();
+  try {
+    const result = await requestSubagentRecordRetentionSetting(Number(value));
+    if (result && Number.isFinite(Number(result.retentionDays))) subagentRecordRetentionDays = Number(result.retentionDays);
+    showTransientRelayNotice(
+      subagentRecordRetentionDays === 0
+        ? 'Sub-agent tool output is kept for good.'
+        : `Sub-agent tool output is removed after ${subagentRecordRetentionDays} days.`,
+    );
+  } catch (error) {
+    alert(error?.message || 'Failed to update how long sub-agent tool output is kept.');
+  } finally {
+    subagentRecordRetentionUpdateInFlight = false;
+    syncSubagentRecordRetentionSelect();
+  }
+}
+
 export async function updateBackgroundTaskTimeoutSetting(value) {
   if (backgroundTaskTimeoutUpdateInFlight) {
     syncBackgroundTaskTimeoutSlider();
@@ -1534,7 +1584,7 @@ async function restartRelayForFeatureFlags() {
       alert('Failed to request a relay restart. Restarts can only be requested from the relay host itself.');
       return;
     }
-    showTransientRelayNotice('Relay restart requested. It will restart once the queue is idle.');
+    showTransientRelayNotice('Relay restart requested. It will restart once the running turns finish; queued messages wait for it.');
   } finally {
     featureFlagsUpdateInFlight = false;
     syncFeatureFlagsSection();
@@ -1708,6 +1758,8 @@ export function openSettingsModal(tab, providerTab) {
   void refreshTurnCeilingSetting();
   syncBackgroundTaskTimeoutSlider();
   void refreshBackgroundTaskTimeoutSetting();
+  syncSubagentRecordRetentionSelect();
+  void refreshSubagentRecordRetentionSetting();
   void refreshPushSettingsSection();
   void refreshPreviewsSection();
   void refreshRemoteRelaysSection();

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

@@ -16,14 +16,13 @@ import {
   setRelayOnline,
   setCliOnline,
   setCloudflaredTunnelState,
-  setCurrentConv,
   updateWorkspaceRootHints,
   updateCompactButton,
-  updateSessionPill,
   clearPendingUserMessage,
   hasPendingUserMessageDuplicate,
   isMessagesAtBottom,
   upsertSubagentRun,
+  getSubagentRun,
   addSubagentActivity,
   addSubagentThought,
   clearSubagentCancelInFlight,
@@ -36,7 +35,8 @@ import {
 import { scheduleContextUsageRefresh } from './api-client.js';
 import { capLiveActivityEntries } from './activity-replay-state.mjs';
 import { publishStatusEvent, recordStatusEvent } from './status-store.mjs';
-import { renderConvList, refreshConversations, openConversation } from './journal-view.js';
+import { clearOpenConversation, renderConvList, refreshConversations, openConversation } from './journal-view.js';
+import { applyRelayEventSubscriptions, loadRelayEventSubscriptions } from './relay-event-subscriptions-ui.js';
 import {
   upsertRelayQuestion,
   loadRelayQuestions,
@@ -44,6 +44,7 @@ import {
 } from './ask-user-view.js';
 import { upsertRelayBoard, loadRelayBoards, renderRelayBoards } from './relay-board-view.js';
 import { setConversationBackgroundTasks } from './background-tasks-view.mjs';
+import { setConversationPins } from './pinned-messages-view.mjs';
 import { setPreviews } from './preview-cards.mjs';
 import { setRemoteRelaysSnapshot } from './remote-relays-store.mjs';
 import { REMOTE_RELAY_SOCKET_EVENT } from './remote-relay-shared.mjs';
@@ -53,6 +54,7 @@ import { applyClaudeAuthState } from './claude-auth-ui.js';
 import { applyGrokAuthState } from './grok-auth-ui.js';
 import { applyClaudeCloudSettingsState, refreshClaudeCloudSettingsState } from './claude-cloud-settings-ui.js';
 import { applyClaudeCloudSessionEvent } from './claude-cloud-conversation-ui.js';
+import { updateProviderReadinessInputs } from './provider-readiness.mjs';
 import { applyCliInstallState } from './cli-install-ui.js';
 import { renderUpdateSection } from './update-ui.js';
 import { applyHostSuspendState, applyRelayShutdownState } from './host-suspend-ui.js';
@@ -73,6 +75,7 @@ import {
   renderMessages,
   appendMessage,
   replaceRenderedMessage,
+  noteTranscriptLiveRow,
   applyIncomingConversationDraftUpdate,
   getRenderedConversationMessageFingerprints,
   clearBubbleCancelState,
@@ -87,6 +90,12 @@ import { clearMessageSearchRuntimeState } from './message-search-view.js';
 import { stripRelayPromptContext } from './relay-prompt-sanitizer.mjs';
 import { isLikelyLiveDuplicateMessage } from './live-message-dedupe.mjs';
 import { mergeRelayThoughts } from './relay-thoughts.mjs';
+import {
+  handleSubagentStatusEventForViewer,
+  handleSubagentTimelineEvent,
+  handleSubagentViewerReconnect,
+  refreshSubagentRows,
+} from './subagent-viewer.mjs';
 
 const FALLBACK_MODE = 'agent';
 
@@ -326,6 +335,10 @@ export async function connectSocket(overrideDeps) {
     resyncAfterConnect();
     refreshSessionWorkerStatus().catch(() => {});
     refreshModelCatalog().catch(() => {});
+    // An open sub-agent viewer fetches whatever it missed while away.
+    handleSubagentViewerReconnect();
+    // Subscriptions that changed while away.
+    void loadRelayEventSubscriptions();
   });
   socket.on('connect_error', (e) => {
     setRelayOnline(false);
@@ -356,8 +369,11 @@ export async function connectSocket(overrideDeps) {
     updateModelCatalogState(payload || {});
     void reconcileOpenModelVariantModal();
   });
+  // Each settings event also feeds provider readiness (provider-readiness.mjs),
+  // so a Settings save changes the empty screen without a reload.
   socket.on('openai_settings_updated', (payload) => {
-    deps?.applyOpenAISettingsState?.(payload || {});
+    const state = deps?.applyOpenAISettingsState?.(payload || {});
+    updateProviderReadinessInputs({ openai: state || payload || null });
     if (Number(payload?.reconciliation?.updatedUnstartedConversations || 0) > 0) {
       void Promise.resolve()
         .then(() => deps?.refreshCurrentView?.())
@@ -370,7 +386,8 @@ export async function connectSocket(overrideDeps) {
     deps?.applyCopilotSettingsState?.(payload || {});
   });
   socket.on('claude_settings_updated', (payload) => {
-    deps?.applyClaudeSettingsState?.(payload || {});
+    const state = deps?.applyClaudeSettingsState?.(payload || {});
+    updateProviderReadinessInputs({ claude: state || payload || null });
     if (Number(payload?.reconciliation?.updatedUnstartedConversations || 0) > 0) {
       void Promise.resolve()
         .then(() => deps?.refreshCurrentView?.())
@@ -420,8 +437,13 @@ export async function connectSocket(overrideDeps) {
   // carries the same shape as GET /api/settings/claude-cloud; one without a
   // body is read as "something changed" and answered with a fresh read.
   socket.on('claude_cloud_settings_updated', (payload) => {
-    if (payload && typeof payload === 'object') applyClaudeCloudSettingsState(payload);
-    else void refreshClaudeCloudSettingsState();
+    if (payload && typeof payload === 'object') {
+      updateProviderReadinessInputs({ claudeCloud: applyClaudeCloudSettingsState(payload) || null });
+    } else {
+      void refreshClaudeCloudSettingsState().then((state) => {
+        updateProviderReadinessInputs({ claudeCloud: state || null });
+      });
+    }
   });
   // A cloud session got its id, pushed a branch or reported a new cost: the
   // conversation's `cloud` field changed, and with it the cloud line.
@@ -429,7 +451,8 @@ export async function connectSocket(overrideDeps) {
     if (applyClaudeCloudSessionEvent(payload || null)) deps?.syncChatTitleControls?.();
   });
   socket.on('grok_settings_updated', (payload) => {
-    deps?.applyGrokSettingsState?.(payload || {});
+    const state = deps?.applyGrokSettingsState?.(payload || {});
+    updateProviderReadinessInputs({ grok: state || payload || null });
     if (Number(payload?.reconciliation?.updatedUnstartedConversations || 0) > 0) {
       void Promise.resolve()
         .then(() => deps?.refreshCurrentView?.())
@@ -437,7 +460,8 @@ export async function connectSocket(overrideDeps) {
     }
   });
   socket.on('cursor_settings_updated', (payload) => {
-    deps?.applyCursorSettingsState?.(payload || {});
+    const state = deps?.applyCursorSettingsState?.(payload || {});
+    updateProviderReadinessInputs({ cursor: state || payload || null });
     if (Number(payload?.reconciliation?.updatedUnstartedConversations || 0) > 0) {
       void Promise.resolve()
         .then(() => deps?.refreshCurrentView?.())
@@ -484,7 +508,11 @@ export async function connectSocket(overrideDeps) {
       })) {
         return;
       }
-      appendMessage(normalizedMessage, true, messageId);
+      // Another client's message (an agent's prompt included) follows the
+      // end like any live row: a reader scrolled up stays where they are,
+      // and the jump-to-bottom badge counts it.
+      appendMessage(normalizedMessage, isMessagesAtBottom(), messageId);
+      noteTranscriptLiveRow();
     }
   });
   socket.on('assistant_message', ({ conversationId, message, messageId, sourceMessageId }) => {
@@ -511,6 +539,7 @@ export async function connectSocket(overrideDeps) {
     if (messageId && seenMessageIds?.has(messageId)) return;
     if (isCurrentConversation) {
       appendMessage(message, autoScroll, messageId || null, false, sourceMessageId || null);
+      noteTranscriptLiveRow();
       scheduleContextUsageRefresh(conversationId, 120);
     }
     if (sourceMessageId) relayActivities.delete(sourceMessageId);
@@ -531,6 +560,7 @@ export async function connectSocket(overrideDeps) {
     if (!replaceRenderedMessage(message, messageId)) {
       appendMessage(message, isMessagesAtBottom(), messageId, false);
     }
+    noteTranscriptLiveRow();
   });
   socket.on('relay_question', ({ question }) => upsertRelayQuestion(question));
   socket.on('relay_question_updated', ({ question }) => upsertRelayQuestion(question));
@@ -542,9 +572,18 @@ export async function connectSocket(overrideDeps) {
   socket.on('relay_board_changed', () => {
     loadRelayBoards();
   });
+  // Relay event subscriptions: the whole active list, after every change.
+  socket.on('relay_event_subscriptions', ({ subscriptions }) => {
+    applyRelayEventSubscriptions(subscriptions);
+  });
   socket.on('background_tasks', ({ conversationId, tasks }) => {
     setConversationBackgroundTasks(conversationId, tasks);
   });
+  // A message was pinned or unpinned (any client): the conversation's whole
+  // pin list, replacing what this page had.
+  socket.on('conversation_pins_updated', ({ conversationId, pins, revision }) => {
+    setConversationPins(conversationId, pins, revision);
+  });
   // REPLACE semantics for the whole set: the preview registry is relay-owned
   // and global, so every change ships the full list.
   socket.on('previews', ({ previews }) => {
@@ -617,24 +656,28 @@ export async function connectSocket(overrideDeps) {
       appendThinkingThought(key, String(text || ''), !!done, subagentRunId, autoScroll);
     }
   });
-  socket.on('subagent_status', ({ conversationId, messageId, subagentRunId, parentSubagentId, displayName, status, timestamp, stopUnsupported }) => {
-    if (!messageId || !subagentRunId) return;
-    upsertSubagentRun({
-      subagentRunId,
-      messageId,
-      conversationId,
-      parentSubagentId,
-      displayName,
-      status,
-      timestamp,
-    });
+  socket.on('subagent_status', (payload = {}) => {
+    const { conversationId, subagentRunId, status, stopUnsupported } = payload;
+    if (!subagentRunId) return;
+    // An event without its turn is placed on the run the store already
+    // knows; one for an unknown run without a turn cannot be placed.
+    const messageId = payload.messageId || getSubagentRun(subagentRunId)?.messageId || null;
+    if (!messageId) return;
+    upsertSubagentRun({ ...payload, messageId });
     clearSubagentCancelInFlight(subagentRunId);
     // The provider answered "not supported": pin the state so the button does
     // not re-arm into an endless click-and-fail loop.
     if (stopUnsupported) markSubagentStopUnsupported(subagentRunId);
     if (conversationId === currentConvId) {
       updateSubagentBubbleFromStatus(subagentRunId, status);
+      refreshSubagentRows(subagentRunId);
     }
+    handleSubagentStatusEventForViewer({ ...payload, messageId });
+  });
+  // Entries of a sub-agent's record; the relay sends them only while this
+  // page's viewer watches that run.
+  socket.on('subagent_timeline', (payload) => {
+    handleSubagentTimelineEvent(payload);
   });
   socket.on('conversation_compacted', async ({ sourceConversationId, targetConversationId }) => {
     if (!sourceConversationId || !targetConversationId) return;
@@ -805,13 +848,7 @@ export async function connectSocket(overrideDeps) {
     renderRelayBoards();
     renderConvList();
     if (currentConvId === conversationId) {
-      setCurrentConv(null);
-      renderMessages([]);
-      document.getElementById('chat-title').textContent = 'Select or start a conversation';
-      syncChatTitleControls();
-      updateSessionPill(null, null);
-      updateCompactButton();
-      scheduleContextUsageRefresh(null);
+      clearOpenConversation();
     } else {
       updateCompactButton();
     }

package/server/public/app/store.js

@@ -133,6 +133,8 @@ export let filePreviewState = {
     preload: 'metadata',
     autoplay: false,
   },
+  // The files the viewer can step through (see viewer-gallery.mjs), or null.
+  gallery: null,
 };
 // Toolbar filters are sticky per browser (all default off); the toggles in
 // attachments-view.js are the only writers.
@@ -1418,6 +1420,9 @@ export function renderSummaryModalContent({ title, subtitle = '', bodyHtml = '',
   runSummaryModalLeave(String(kind || '').trim());
   summaryModalState.kind = String(kind || '').trim();
   summaryModalState.refresh = typeof refresh === 'function' ? refresh : null;
+  // Lets the stylesheet tell one kind of this shared modal from another.
+  const modalEl = document.getElementById('summary-modal');
+  if (modalEl?.dataset) modalEl.dataset.kind = summaryModalState.kind;
 
   const titleEl = document.getElementById('summary-modal-title');
   const subtitleEl = document.getElementById('summary-modal-subtitle');
@@ -1445,6 +1450,7 @@ export function closeSummaryModal() {
   const modal = document.getElementById('summary-modal');
   modal?.classList.remove('visible');
   modal?.setAttribute('aria-hidden', 'true');
+  if (modal?.dataset) delete modal.dataset.kind;
   const titleEl = document.getElementById('summary-modal-title');
   const subtitleEl = document.getElementById('summary-modal-subtitle');
   const bodyEl = document.getElementById('summary-modal-body');
@@ -1492,6 +1498,17 @@ export function isSubagentCancelInFlight(subagentRunId) {
   return id ? subagentCancelInFlight.has(id) : false;
 }
 
+const SUBAGENT_HEADER_FIELDS = ['completedAt', 'model', 'modelInherited', 'subagentType', 'taskId', 'totalTokens', 'background', 'truncated', 'stoppable'];
+
+function subagentHeaderFields(payload, existing) {
+  const fields = {};
+  for (const name of SUBAGENT_HEADER_FIELDS) {
+    const value = payload?.[name];
+    fields[name] = value === undefined ? (existing?.[name] ?? null) : value;
+  }
+  return fields;
+}
+
 export function upsertSubagentRun(payload) {
   const subagentRunId = normalizeSubagentRunId(payload?.subagentRunId);
   if (!subagentRunId) return null;
@@ -1505,8 +1522,14 @@ export function upsertSubagentRun(payload) {
     parentSubagentId: normalizeSubagentRunId(payload?.parentSubagentId) || existing?.parentSubagentId || null,
     displayName: String(payload?.displayName || existing?.displayName || '').trim() || null,
     status: nextSubagentStatus({ reported: payload?.status, known: existing?.status, normalize: normalizeSubagentStatus }),
-    startedAt: existing?.startedAt || payload?.timestamp || now,
-    updatedAt: payload?.timestamp || now,
+    startedAt: payload?.startedAt || existing?.startedAt || payload?.timestamp || now,
+    updatedAt: payload?.updatedAt || payload?.timestamp || now,
+    // The run header (relay 0009): what the sub-agent rows and the viewer
+    // show. An event that does not name a field keeps the known value.
+    ...subagentHeaderFields(payload, existing),
+    // Whether `status` came from the relay rather than the default a live
+    // lane's first frame starts with.
+    statusReported: Boolean(String(payload?.status || '').trim()) || existing?.statusReported === true,
     activities: existing?.activities || [],
     thoughts: existing?.thoughts || [],
     // Cumulative streamed text for this run, replayed when its bubble is