@oar-sh/oar 0.9.9 → 0.9.10

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,
@@ -54,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';
@@ -74,6 +75,7 @@ import {
   renderMessages,
   appendMessage,
   replaceRenderedMessage,
+  noteTranscriptLiveRow,
   applyIncomingConversationDraftUpdate,
   getRenderedConversationMessageFingerprints,
   clearBubbleCancelState,
@@ -88,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';
 
@@ -327,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);
@@ -357,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?.())
@@ -371,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?.())
@@ -421,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.
@@ -430,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?.())
@@ -438,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?.())
@@ -485,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 }) => {
@@ -512,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);
@@ -532,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));
@@ -543,6 +572,10 @@ 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);
   });
@@ -623,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;
@@ -811,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

@@ -1498,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;
@@ -1511,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

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

@@ -0,0 +1,138 @@
+// One sub-agent as a row: the same look as a background-task row in the
+// composer panel (icon, title, detail line, model, type badge, tokens, time),
+// used in the finished reply bubble and inside the sub-agent viewer for child
+// agents. The title opens the agent's record in the viewer.
+//
+// Pure: markup in, markup out, so the bubble renderer and the viewer share it
+// and tests run without a DOM.
+
+import { formatTaskModelLabel, formatTaskTokens } from './task-row-format.mjs';
+
+const STATUS_LABELS = {
+  running: 'Running',
+  pending: 'Starting',
+  processing: 'Running',
+  completed: 'Completed',
+  failed: 'Failed',
+  cancelled: 'Stopped',
+};
+
+const STATUS_ICONS = {
+  completed: '✓',
+  failed: '✗',
+  cancelled: '■',
+};
+
+function escHtml(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (ch) => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+  }[ch]));
+}
+
+function parseTime(value) {
+  if (value === null || value === undefined || value === '') return NaN;
+  if (typeof value === 'number') return value;
+  return Date.parse(String(value));
+}
+
+/** "42s", "3m 5s", "1h 4m": how long a run ran, or has been running. */
+export function formatRunDuration(startedAt, endedAt = null, now = Date.now()) {
+  const start = parseTime(startedAt);
+  if (!Number.isFinite(start)) return '';
+  const end = Number.isFinite(parseTime(endedAt)) ? parseTime(endedAt) : now;
+  const seconds = Math.max(0, Math.floor((end - start) / 1000));
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ${seconds % 60}s`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${minutes % 60}m`;
+}
+
+export function subagentStatusLabel(status) {
+  const key = String(status || 'running').trim().toLowerCase();
+  return STATUS_LABELS[key] || (key ? key.charAt(0).toUpperCase() + key.slice(1) : 'Running');
+}
+
+export function isRunningSubagentStatus(status) {
+  const key = String(status || 'running').trim().toLowerCase();
+  return key === 'running' || key === 'pending' || key === 'processing';
+}
+
+/**
+ * The row for one run. `clickable` makes the title the button that opens the
+ * viewer (`data-subagent-open`); a shared view, which cannot read the record,
+ * passes false. `context` lands in a class so the bubble and the viewer can
+ * size the row differently.
+ */
+export function subagentRowHtml(run, { context = 'bubble', clickable = true, now = Date.now() } = {}) {
+  const runId = String(run?.subagentRunId || '').trim();
+  if (!runId) return '';
+  const status = String(run?.status || 'running').trim().toLowerCase() || 'running';
+  const running = isRunningSubagentStatus(status);
+  const title = String(run?.displayName || '').trim() || `Subagent ${runId.slice(0, 8)}`;
+  const modelLabel = formatTaskModelLabel(run?.model);
+  const modelTitle = run?.modelInherited === true ? `${run.model} (inherited from the session)` : (run?.model || '');
+  const kind = String(run?.subagentType || '').trim() || 'Subagent';
+  const tokens = formatTaskTokens(run?.totalTokens);
+  const time = formatRunDuration(run?.startedAt, running ? null : (run?.completedAt || run?.updatedAt), now);
+  const statusIcon = STATUS_ICONS[status] ? `${STATUS_ICONS[status]} ` : '';
+  const detailParts = [`${statusIcon}${subagentStatusLabel(status)}`];
+  if (run?.background) detailParts.push('in the background');
+  if (run?.truncated) detailParts.push('record cut');
+  const titleHtml = clickable
+    ? `<button type="button" class="subagent-open bg-task-desc" data-subagent-open="${escHtml(runId)}" title="Open this sub-agent's thoughts, tool calls and reply">${escHtml(title)}</button>`
+    : `<span class="bg-task-desc">${escHtml(title)}</span>`;
+  return `
+    <div class="bg-task-row subagent-row subagent-row-${escHtml(context)}${running ? ' is-running' : ''}" data-subagent-row="${escHtml(runId)}" data-status="${escHtml(status)}">
+      <span class="bg-task-icon" title="Sub-agent">🤖</span>
+      <span class="bg-task-main">
+        ${titleHtml}
+        <span class="bg-task-detail subagent-row-status subagent-status-${escHtml(status)}">${escHtml(detailParts.join(' · '))}</span>
+      </span>
+      <span class="bg-task-side">
+        <span class="bg-task-side-head">
+          ${modelLabel ? `<span class="bg-task-model" title="${escHtml(modelTitle)}">${escHtml(modelLabel)}</span>` : ''}
+          <span class="bg-task-badge">${escHtml(kind)}</span>
+        </span>
+        <span class="bg-task-side-status">
+          ${tokens ? `<span class="bg-task-tokens">${escHtml(tokens)}</span>` : ''}
+          ${time ? `<span class="bg-task-elapsed subagent-row-time"${running ? ` data-started-at="${escHtml(run?.startedAt || '')}"` : ''}>${escHtml(time)}</span>` : ''}
+        </span>
+      </span>
+    </div>`;
+}
+
+/**
+ * A run from the conversation payload, brought up to date with what the page
+ * has learned since (the store, fed by status events). Only what the store
+ * actually knows wins: an entry a live lane created has no header yet, and
+ * its status is a guess unless a status event reported it.
+ */
+export function mergeLiveSubagentRun(base, live) {
+  if (!live) return base;
+  const merged = { ...base };
+  for (const [key, value] of Object.entries(live)) {
+    if (key === 'status' || key === 'statusReported' || key === 'activities' || key === 'thoughts' || key === 'streamText') continue;
+    if (value === null || value === undefined || value === '') continue;
+    merged[key] = value;
+  }
+  if (live.statusReported && live.status) merged.status = live.status;
+  return merged;
+}
+
+/**
+ * The runs a reply bubble lists: top-level runs only (a child shows inside
+ * its parent's record), in the order they were spawned.
+ */
+export function topLevelSubagentRuns(runs) {
+  return (Array.isArray(runs) ? runs : [])
+    .filter((run) => run && String(run.subagentRunId || '').trim() && !run.parentSubagentId)
+    .sort((a, b) => (parseTime(a.startedAt) || 0) - (parseTime(b.startedAt) || 0));
+}
+
+/** The bubble's list of sub-agent rows, or '' when it spawned none. */
+export function subagentRowsMarkup(runs, { clickable = true, now = Date.now() } = {}) {
+  const roots = topLevelSubagentRuns(runs);
+  if (!roots.length) return '';
+  return `<div class="subagent-rows" data-subagent-rows>${roots.map((run) => subagentRowHtml(run, { context: 'bubble', clickable, now })).join('')}</div>`;
+}

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

@@ -0,0 +1,186 @@
+// The sub-agent viewer's timeline, without a DOM: the merge of fetched and
+// live entries into one ordered record, gap detection, and the markup of each
+// entry. subagent-viewer.mjs owns the modal and calls into this.
+
+import { prefixToolActivityEmoji } from './tool-activity-emoji.mjs';
+import { subagentRowHtml } from './subagent-row.mjs';
+
+function escHtml(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (ch) => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+  }[ch]));
+}
+
+/** One run's record as the viewer holds it. */
+export function createTimelineState(runId) {
+  return { runId: String(runId || ''), entries: new Map(), lastSeq: 0, maxSeq: 0 };
+}
+
+/**
+ * Fold entries (a fetched page or a live event) into the record. An entry the
+ * record already has is replaced (open entries grow in place). Returns the
+ * seqs that changed and whether the record now has a hole: the relay numbers
+ * a run's entries 1, 2, 3…, so a missing number means an event was missed and
+ * the viewer should fetch from `lastSeq`.
+ */
+export function mergeTimelineEntries(state, entries) {
+  const changed = [];
+  for (const raw of Array.isArray(entries) ? entries : []) {
+    const seq = Number(raw?.seq);
+    if (!Number.isInteger(seq) || seq <= 0) continue;
+    const previous = state.entries.get(seq);
+    // A closed entry never reopens: a late open snapshot is stale.
+    if (previous?.done && raw.done === false) continue;
+    state.entries.set(seq, { ...raw, seq });
+    changed.push(seq);
+    if (seq > state.maxSeq) state.maxSeq = seq;
+  }
+  while (state.entries.has(state.lastSeq + 1)) state.lastSeq += 1;
+  return { changed, gap: state.lastSeq < state.maxSeq };
+}
+
+export function orderedTimelineEntries(state) {
+  return [...state.entries.values()].sort((a, b) => a.seq - b.seq);
+}
+
+function parseJsonObject(text) {
+  const value = String(text || '').trim();
+  if (!value.startsWith('{')) return null;
+  try {
+    const parsed = JSON.parse(value);
+    return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+// Same list as shared/subagent-timeline.mjs (the relay's retention sweep
+// keeps this line when it strips a call's input); a test keeps them in step.
+export const SUMMARY_FIELDS = ['command', 'file_path', 'path', 'pattern', 'url', 'query', 'description', 'prompt', 'notebook_path', 'skill'];
+
+/** The one line a tool call is known by: its command, path, pattern… */
+export function toolCallSummary(text) {
+  const input = parseJsonObject(text);
+  if (input) {
+    for (const field of SUMMARY_FIELDS) {
+      const value = input[field];
+      if (typeof value === 'string' && value.trim()) return value.replace(/\s+/g, ' ').trim().slice(0, 200);
+    }
+    const keys = Object.keys(input);
+    return keys.length ? keys.slice(0, 4).join(', ') : '';
+  }
+  return String(text || '').split('\n')[0].trim().slice(0, 200);
+}
+
+/** A tool call's input, readable: pretty JSON, or the text as it came. */
+export function formatToolInput(text) {
+  const input = parseJsonObject(text);
+  return input ? JSON.stringify(input, null, 2) : String(text || '');
+}
+
+export function formatByteSize(length) {
+  const n = Number(length);
+  if (!Number.isFinite(n) || n < 0) return '';
+  if (n < 1024) return `${n} chars`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(n < 10 * 1024 ? 1 : 0)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/** "removed after 90 days": what the relay's retention sweep left a note of. */
+function prunedLabel(entry, what) {
+  const days = Number(entry?.metadata?.retentionDays);
+  return Number.isFinite(days) && days > 0 ? `${what} removed after ${days} days` : `${what} removed`;
+}
+
+function firstLine(text, max = 140) {
+  const line = String(text || '').split('\n').map((part) => part.trim()).find(Boolean) || '';
+  return line.length > max ? `${line.slice(0, max - 1)}…` : line;
+}
+
+/**
+ * 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.
+ */
+export function timelineEntryHtml(entry, { renderMarkdown = (text) => `<p>${escHtml(text)}</p>`, children = new Map(), openDetails = false, 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' : '';
+
+  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>`);
+  }
+
+  if (kind === 'text') {
+    return wrap(`<div class="sav-text markdown-body">${text.trim() ? renderMarkdown(text) : '<span class="sav-muted">Writing…</span>'}</div>`);
+  }
+
+  if (kind === 'tool_call') {
+    const toolName = String(entry?.toolName || 'tool');
+    const headline = prefixToolActivityEmoji(`Tool (${toolName}): x`).split(' Tool (')[0] || '🔧';
+    const summary = toolCallSummary(text);
+    const input = formatToolInput(text);
+    const hasMore = input.trim() && input.trim() !== summary;
+    const legacy = entry?.metadata?.legacy === true;
+    if (entry?.metadata?.pruned === true) {
+      return wrap(`<div class="sav-call-line"><span class="sav-kind">${escHtml(headline)}</span> <span class="sav-tool-name">${escHtml(toolName)}</span> <span class="sav-tool-summary">${escHtml(summary)}</span> <span class="sav-muted sav-pruned">· ${escHtml(prunedLabel(entry, 'Input'))}</span></div>`, ' is-pruned');
+    }
+    if (legacy || !hasMore) {
+      return wrap(`<div class="sav-call-line"><span class="sav-kind">${escHtml(headline)}</span> <span class="sav-tool-name">${escHtml(toolName)}</span> <span class="sav-tool-summary">${escHtml(legacy ? text.replace(/^Tool \([^)]+\):?\s*/, '') : summary)}</span></div>`);
+    }
+    return wrap(`<details class="sav-fold"${openAttr}><summary><span class="sav-kind">${escHtml(headline)}</span> <span class="sav-tool-name">${escHtml(toolName)}</span> <span class="sav-tool-summary">${escHtml(summary)}</span></summary><pre class="sav-pre">${escHtml(input)}</pre></details>`);
+  }
+
+  if (kind === 'tool_result') {
+    const isError = entry?.metadata?.isError === true;
+    const cut = Number(entry?.metadata?.cut);
+    const parts = [isError ? 'Error' : 'Result'];
+    if (text) parts.push(formatByteSize(text.length));
+    if (Number.isFinite(cut) && cut > text.length) parts.push(`cut from ${formatByteSize(cut)}`);
+    const preview = firstLine(text, 120);
+    if (entry?.metadata?.pruned === true) {
+      const size = formatByteSize(entry.metadata.originalChars);
+      const label = [isError ? 'Error' : 'Result', size, prunedLabel(entry, 'output')].filter(Boolean).join(' · ');
+      return wrap(`<div class="sav-result-line"><span class="sav-kind">↳</span> <span class="sav-muted sav-pruned">${escHtml(label)}</span></div>`, `${isError ? ' is-error' : ''} is-pruned`);
+    }
+    if (!text.trim()) {
+      return wrap(`<div class="sav-result-line"><span class="sav-kind">↳</span> <span class="sav-muted">${escHtml(parts.join(' · '))} · empty</span></div>`, isError ? ' is-error' : '');
+    }
+    return wrap(`<details class="sav-fold"${openAttr}><summary><span class="sav-kind">↳</span> <span class="sav-result-label">${escHtml(parts.join(' · '))}</span>${preview ? ` <span class="sav-summary-text sav-muted">${escHtml(preview)}</span>` : ''}</summary><pre class="sav-pre">${escHtml(text)}</pre></details>`, isError ? ' is-error' : '');
+  }
+
+  if (kind === 'child') {
+    const childId = String(entry?.toolUseId || '');
+    const child = children.get(childId) || {
+      subagentRunId: childId,
+      displayName: text || 'Subagent',
+      subagentType: entry?.metadata?.subagentType || null,
+      status: 'running',
+    };
+    return wrap(childId ? subagentRowHtml(child, { context: 'timeline', clickable, now }) : `<div class="sav-muted">🤖 ${escHtml(text)}</div>`);
+  }
+
+  // note
+  const status = String(entry?.metadata?.status || '');
+  return wrap(`<div class="sav-note${status ? ` sav-note-${escHtml(status)}` : ''}">${escHtml(text)}</div>`);
+}
+
+/** The header's meta line: model · type · status · tokens · time. */
+export function headerMetaParts(run, { formatModel, formatTokens, formatDuration, statusLabel, now = Date.now() } = {}) {
+  const parts = [];
+  if (run?.model) parts.push(formatModel ? formatModel(run.model) : run.model);
+  parts.push(String(run?.subagentType || 'Subagent'));
+  parts.push(statusLabel ? statusLabel(run?.status) : String(run?.status || 'running'));
+  if (run?.background) parts.push('background');
+  const tokens = formatTokens ? formatTokens(run?.totalTokens) : '';
+  if (tokens) parts.push(tokens);
+  const running = ['running', 'pending', 'processing'].includes(String(run?.status || 'running'));
+  const time = formatDuration ? formatDuration(run?.startedAt, running ? null : (run?.completedAt || run?.updatedAt), now) : '';
+  if (time) parts.push(time);
+  return parts.filter(Boolean);
+}

package/server/public/app/subagent-viewer-watch.mjs

@@ -0,0 +1,50 @@
+// Tells the relay which run the sub-agent viewer shows, so its record
+// arrives live on this page only (`subagent_viewer_watch` / `_unwatch`). The
+// viewer waits for the watch's answer before it reads the record: a batch
+// sent between the read and the join would otherwise be lost with no later
+// hole in `seq` to show it. The relay's rooms may or may not survive a
+// reconnect, so the viewer watches again on every connect.
+
+const WATCH_TIMEOUT_MS = 3000;
+
+export function createSubagentViewerWatch({ getSocket, timeoutMs = WATCH_TIMEOUT_MS } = {}) {
+  let watched = null;
+  // The relay did not know the run yet (a panel row can come before its run
+  // row): the next status event of that run asks again.
+  let refusedNotFound = false;
+
+  async function watch(conversationId, runId) {
+    watched = { conversationId: String(conversationId || ''), runId: String(runId || '') };
+    refusedNotFound = false;
+    const socket = getSocket?.();
+    if (!socket?.connected || !watched.conversationId || !watched.runId) return { ok: false, code: 'offline' };
+    let result;
+    try {
+      result = await socket.timeout(timeoutMs).emitWithAck('subagent_viewer_watch', {
+        conversationId: watched.conversationId,
+        subagentRunId: watched.runId,
+      });
+    } catch {
+      return { ok: false, code: 'timeout' };
+    }
+    if (watched?.runId === String(runId || '') && result?.ok !== true && result?.code === 'not-found') refusedNotFound = true;
+    return result && typeof result === 'object' ? result : { ok: false, code: 'bad-answer' };
+  }
+
+  function unwatch() {
+    if (!watched) return;
+    watched = null;
+    refusedNotFound = false;
+    const socket = getSocket?.();
+    if (socket?.connected) socket.emit('subagent_viewer_unwatch', {});
+  }
+
+  return {
+    watch,
+    unwatch,
+    /** The run the relay should be sending, or null. */
+    current: () => (watched ? { ...watched } : null),
+    /** True while the relay refused the run on screen as unknown. */
+    refused: () => refusedNotFound,
+  };
+}