@oar-sh/oar 0.9.9 → 0.9.11

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 opens it too, read-only,
+ * through the share's sub-agent route. `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,
+  };
+}