@oar-sh/oar 0.9.9 → 0.9.10

package/server/public/app/relay-event-subscriptions-ui.js

@@ -0,0 +1,184 @@
+// Relay event subscriptions on the page: the header's "watching N sessions"
+// chip with its list and Unsubscribe buttons (on the watcher), and the
+// "watched" badge (on a watched session, in the header and the sidebar).
+// The relay sends the whole active list on every change (socket
+// `relay_event_subscriptions`); the page loads it once at start.
+
+import { apiFetch } from './api-client.js';
+import { conversations, currentConvId, escHtml, IS_SHARED_VIEW, showTransientRelayNotice } from './store.js';
+import {
+  renderWatchedBadgeHtml,
+  renderWatchingPanelHtml,
+  watchersOf,
+  watchingChipText,
+  watchingSummary,
+} from './relay-event-view.mjs';
+
+let subscriptions = [];
+let renderedChipKey = '';
+let panelOpen = false;
+let panelConversationId = '';
+const changeListeners = new Set();
+
+export function getRelayEventSubscriptions() {
+  return subscriptions;
+}
+
+/** Runs after every change of the list (the sidebar re-renders its badges). */
+export function onRelayEventSubscriptionsChanged(listener) {
+  changeListeners.add(listener);
+  return () => changeListeners.delete(listener);
+}
+
+export function applyRelayEventSubscriptions(list) {
+  subscriptions = Array.isArray(list) ? list.filter((sub) => sub && typeof sub === 'object') : [];
+  syncRelayEventHeader();
+  for (const listener of changeListeners) {
+    try { listener(subscriptions); } catch {}
+  }
+}
+
+export async function loadRelayEventSubscriptions() {
+  if (IS_SHARED_VIEW) return;
+  const response = await apiFetch('/api/relay-events/subscriptions');
+  if (response && Array.isArray(response.subscriptions)) applyRelayEventSubscriptions(response.subscriptions);
+}
+
+/** The sidebar's badge for one conversation: listed sessions only. */
+export function relayEventWatchedMarkerHtml(conversationId) {
+  if (IS_SHARED_VIEW) return '';
+  return renderWatchedBadgeHtml(watchersOf(subscriptions, conversationId, { includeAll: false }), { conversations, subscriptions, escHtml });
+}
+
+async function unsubscribe(subscriptionId, button) {
+  if (!subscriptionId) return;
+  if (button) button.disabled = true;
+  const response = await apiFetch(`/api/relay-events/subscriptions/${encodeURIComponent(subscriptionId)}`, { method: 'DELETE' });
+  if (!response?.ok) {
+    if (button) button.disabled = false;
+    showTransientRelayNotice?.('The subscription could not be ended. Try again in a moment.');
+    return;
+  }
+  // The socket brings the new list; this page does not wait for it.
+  applyRelayEventSubscriptions(subscriptions.filter((sub) => sub.id !== subscriptionId));
+}
+
+// The list opens as a fixed popover on <body>, placed under the chip: the
+// title slot clips its overflow (that keeps the title's ellipsis), so a panel
+// inside it would be cut off.
+function ensurePanel() {
+  let panel = document.getElementById('relay-watch-panel');
+  if (panel) return panel;
+  panel = document.createElement('div');
+  panel.id = 'relay-watch-panel';
+  panel.className = 'relay-watch-panel';
+  panel.hidden = true;
+  document.body.appendChild(panel);
+  panel.addEventListener('click', (event) => {
+    const target = event.target instanceof Element ? event.target : null;
+    const unsubscribeButton = target?.closest?.('.relay-watch-unsubscribe');
+    if (!unsubscribeButton) return;
+    void unsubscribe(unsubscribeButton.getAttribute('data-subscription-id'), unsubscribeButton);
+  });
+  document.addEventListener('click', (event) => {
+    if (!panelOpen) return;
+    // composedPath: an Unsubscribe click may have re-rendered the panel already.
+    const path = event.composedPath();
+    if (path.includes(panel) || path.some((node) => node instanceof Element && node.classList.contains('relay-watch-chip'))) return;
+    setPanelOpen(false);
+  });
+  document.addEventListener('keydown', (event) => {
+    if (!panelOpen || event.key !== 'Escape') return;
+    event.stopPropagation();
+    setPanelOpen(false);
+    document.querySelector('#chat-title-relay-events .relay-watch-chip')?.focus?.();
+  }, true);
+  window.addEventListener('resize', () => { if (panelOpen) placePanel(); });
+  return panel;
+}
+
+function setPanelOpen(open) {
+  panelOpen = Boolean(open);
+  renderedChipKey = '';
+  syncRelayEventHeader();
+}
+
+function placePanel() {
+  const panel = document.getElementById('relay-watch-panel');
+  const chip = document.querySelector('#chat-title-relay-events .relay-watch-chip');
+  if (!panel || panel.hidden) return;
+  const rect = chip?.getBoundingClientRect?.();
+  if (!rect || (!rect.width && !rect.height)) {
+    panel.hidden = true;
+    return;
+  }
+  const margin = 8;
+  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+  const top = Math.round(rect.bottom + 4);
+  panel.style.top = `${top}px`;
+  panel.style.maxHeight = `${Math.max(120, window.innerHeight - top - margin)}px`;
+  panel.style.left = '0px';
+  const width = panel.offsetWidth;
+  const left = Math.max(margin, Math.min(rect.left, viewportWidth - width - margin));
+  panel.style.left = `${Math.round(left)}px`;
+}
+
+function ensureHeaderElements() {
+  const slot = document.getElementById('chat-title-slot');
+  if (!slot) return null;
+  let line = document.getElementById('chat-title-relay-events');
+  if (!line) {
+    line = document.createElement('span');
+    line.id = 'chat-title-relay-events';
+    line.hidden = true;
+    const origin = document.getElementById('chat-title-origin');
+    if (origin?.nextSibling) slot.insertBefore(line, origin.nextSibling);
+    else slot.appendChild(line);
+    line.addEventListener('click', (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      if (target?.closest?.('.relay-watch-chip')) {
+        event.stopPropagation();
+        setPanelOpen(!panelOpen);
+      }
+    });
+  }
+  return line;
+}
+
+/** The header's chip and badge for the conversation on screen. Idempotent. */
+export function syncRelayEventHeader() {
+  const line = ensureHeaderElements();
+  if (!line) return;
+  const panel = ensurePanel();
+  const id = String(currentConvId || '').trim();
+  // Another conversation on screen closes the list.
+  if (id !== panelConversationId) panelOpen = false;
+  panelConversationId = id;
+  if (IS_SHARED_VIEW || !id) {
+    line.hidden = true;
+    line.innerHTML = '';
+    panel.hidden = true;
+    panel.innerHTML = '';
+    renderedChipKey = '';
+    return;
+  }
+  const summary = watchingSummary(subscriptions, id);
+  const chipText = watchingChipText(summary);
+  const watchers = watchersOf(subscriptions, id, { includeAll: true });
+  if (!chipText) panelOpen = false;
+  const key = JSON.stringify([id, chipText, panelOpen, summary.subscriptions.map((sub) => [sub.id, sub.sessions, sub.events]), watchers]);
+  if (key === renderedChipKey) return;
+  renderedChipKey = key;
+  const parts = [];
+  if (chipText) {
+    const where = summary.relays.length ? ` (also on ${summary.relays.join(', ')})` : '';
+    parts.push(`<button type="button" class="relay-watch-chip" aria-expanded="${panelOpen ? 'true' : 'false'}" aria-controls="relay-watch-panel" title="${escHtml(`Event subscriptions of this conversation${where}`)}">👁 ${escHtml(chipText)}</button>`);
+  }
+  const badge = renderWatchedBadgeHtml(watchers, { conversations, subscriptions, escHtml });
+  if (badge) parts.push(badge);
+  line.innerHTML = parts.join('');
+  line.hidden = parts.length === 0;
+  panel.innerHTML = panelOpen ? renderWatchingPanelHtml(summary, { conversations, escHtml }) : '';
+  panel.hidden = !panelOpen;
+  if (panelOpen) placePanel();
+}

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