@oar-sh/oar 0.9.3 → 0.9.4

package/server/public/app/remote-relays-store.mjs

@@ -0,0 +1,126 @@
+// The browser's copy of this relay's remote-relay list (Settings → Relays and
+// the composer's @mention popup read it). Filled lazily from
+// GET /api/remote-relays and replaced wholesale by the relay's
+// `remote_relays_updated` socket event; never carries tokens.
+
+import { IS_SHARED_VIEW } from './store.js';
+import { loadRemoteRelays } from './api-client.js';
+
+// A relay without the feature answers 404; do not ask again on every "@".
+const FAILED_LOAD_RETRY_MS = 60_000;
+const KNOWN_STATUSES = new Set(['online', 'offline', 'unauthorized', 'error', 'unknown']);
+
+/** A remote's health for its dot: online, offline, unauthorized, error or unknown. */
+export function remoteRelayStatus(relay) {
+  const status = String(relay?.lastStatus || '').trim().toLowerCase();
+  return KNOWN_STATUSES.has(status) ? status : 'unknown';
+}
+
+let snapshot = null; // { relays: [], self: {} | null } once known
+let loadPromise = null;
+let lastFailedLoadAt = 0;
+const listeners = new Set();
+
+function normalizeRelay(raw) {
+  if (!raw || typeof raw !== 'object') return null;
+  const id = String(raw.id || '').trim();
+  if (!id) return null;
+  return { ...raw, id };
+}
+
+function normalizeSnapshot(payload) {
+  const relays = Array.isArray(payload?.relays)
+    ? payload.relays.map(normalizeRelay).filter(Boolean)
+    : [];
+  const self = payload?.self && typeof payload.self === 'object' ? { ...payload.self } : null;
+  return { relays, self };
+}
+
+function notify() {
+  for (const listener of listeners) {
+    try {
+      listener(snapshot);
+    } catch (error) {
+      console.warn('[remote-relays] listener failed', error?.message || error);
+    }
+  }
+}
+
+/** The last known `{ relays, self }`, or null before the first load. */
+export function getRemoteRelaysSnapshot() {
+  return snapshot;
+}
+
+export function getRemoteRelays() {
+  return snapshot?.relays || [];
+}
+
+/**
+ * Replaces the list (socket event, GET response). A payload without a
+ * `relays` array is ignored rather than wiping what is known; `self` survives
+ * a payload that omits it.
+ */
+export function setRemoteRelaysSnapshot(payload) {
+  if (!payload || typeof payload !== 'object' || !Array.isArray(payload.relays)) return snapshot;
+  const next = normalizeSnapshot(payload);
+  if (!next.self && snapshot?.self) next.self = snapshot.self;
+  snapshot = next;
+  lastFailedLoadAt = 0;
+  notify();
+  return snapshot;
+}
+
+/** Applies one relay a PATCH/check answered with, without a full reload. */
+export function upsertRemoteRelay(relay) {
+  const normalized = normalizeRelay(relay);
+  if (!normalized || !snapshot) return snapshot;
+  const relays = snapshot.relays.slice();
+  const index = relays.findIndex((entry) => entry.id === normalized.id);
+  if (index === -1) relays.push(normalized);
+  else relays[index] = normalized;
+  snapshot = { ...snapshot, relays };
+  notify();
+  return snapshot;
+}
+
+export function removeRemoteRelayFromSnapshot(id) {
+  const key = String(id || '').trim();
+  if (!snapshot || !key) return snapshot;
+  snapshot = { ...snapshot, relays: snapshot.relays.filter((entry) => entry.id !== key) };
+  notify();
+  return snapshot;
+}
+
+/** Fetches the list now. Resolves to the snapshot (null when unavailable). */
+export async function refreshRemoteRelays() {
+  if (IS_SHARED_VIEW) return snapshot;
+  const payload = await loadRemoteRelays();
+  if (payload && Array.isArray(payload.relays)) return setRemoteRelaysSnapshot(payload);
+  lastFailedLoadAt = Date.now();
+  return snapshot;
+}
+
+/** Loads once, lazily (first "@" in the composer); later calls reuse the cache. */
+export function ensureRemoteRelaysLoaded() {
+  if (snapshot) return Promise.resolve(snapshot);
+  if (IS_SHARED_VIEW) return Promise.resolve(null);
+  if (loadPromise) return loadPromise;
+  if (lastFailedLoadAt && Date.now() - lastFailedLoadAt < FAILED_LOAD_RETRY_MS) return Promise.resolve(null);
+  loadPromise = refreshRemoteRelays().finally(() => {
+    loadPromise = null;
+  });
+  return loadPromise;
+}
+
+export function subscribeRemoteRelays(listener) {
+  if (typeof listener !== 'function') return () => {};
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+/** Test hook: forget everything. */
+export function resetRemoteRelaysStoreForTests() {
+  snapshot = null;
+  loadPromise = null;
+  lastFailedLoadAt = 0;
+}

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

@@ -43,6 +43,7 @@ import { refreshClaudeAuthSection } from './claude-auth-ui.js';
 import { refreshGrokAuthSection } from './grok-auth-ui.js';
 import { refreshCliInstallSections } from './cli-install-ui.js';
 import { refreshUpdateSection } from './update-ui.js';
+import { refreshRemoteRelaysSection } from './remote-relays-settings.js';
 import {
   getPreviews,
   renderPreviewRowsInto,
@@ -1632,8 +1633,8 @@ subscribePreviews(() => {
   renderPreviewsSection();
 });
 
-// `tab` / `providerTab` are optional deep links (e.g. openSettingsModal('providers', 'claude'));
-// omitting them restores the last tab the user was on.
+// `tab` / `providerTab` are optional deep links (e.g. openSettingsModal('providers', 'claude')
+// or openSettingsModal('relays')); omitting them restores the last tab the user was on.
 export function openSettingsModal(tab, providerTab) {
   closeChatActionsMenu();
   const modal = document.getElementById('settings-modal');
@@ -1676,6 +1677,7 @@ export function openSettingsModal(tab, providerTab) {
   void refreshBackgroundTaskTimeoutSetting();
   void refreshPushSettingsSection();
   void refreshPreviewsSection();
+  void refreshRemoteRelaysSection();
   void refreshFeatureFlagsSection();
   void refreshUpdateSection();
   modal?.classList.add('visible');

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

@@ -1,7 +1,7 @@
 const SETTINGS_TAB_STORAGE_KEY = 'copilot_settings_tab';
 const SETTINGS_PROVIDER_TAB_STORAGE_KEY = 'copilot_settings_provider_tab';
 
-const SETTINGS_TABS = ['general', 'providers', 'previews', 'notifications', 'features'];
+const SETTINGS_TABS = ['general', 'providers', 'relays', 'previews', 'notifications', 'features'];
 // Copilot leads: it is the default provider, and `SETTINGS_PROVIDER_TABS[0]`
 // is also the sub-tab a first-time visitor lands on.
 const SETTINGS_PROVIDER_TABS = ['copilot', 'openai', 'claude', 'grok', 'cursor'];

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

@@ -42,10 +42,13 @@ import {
 import { upsertRelayBoard, loadRelayBoards, renderRelayBoards } from './relay-board-view.js';
 import { setConversationBackgroundTasks } from './background-tasks-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';
 import { applyClaudeAuthState } from './claude-auth-ui.js';
 import { applyGrokAuthState } from './grok-auth-ui.js';
 import { applyCliInstallState } from './cli-install-ui.js';
 import { renderUpdateSection } from './update-ui.js';
+import { applyHostSuspendState, applyRelayShutdownState } from './host-suspend-ui.js';
 import {
   showThinking,
   removeThinking,
@@ -388,6 +391,14 @@ export async function connectSocket(overrideDeps) {
     setUpdateState(payload || null);
     renderUpdateSection();
   });
+  // Pending host suspend / relay restart: banner + menu labels on every
+  // device. Also sent on connect, so a reconnecting client catches up.
+  socket.on('host_suspend_state', (payload) => {
+    applyHostSuspendState(payload || null);
+  });
+  socket.on('relay_shutdown_state', (payload) => {
+    applyRelayShutdownState(payload || null);
+  });
   socket.on('grok_settings_updated', (payload) => {
     deps?.applyGrokSettingsState?.(payload || {});
     if (Number(payload?.reconciliation?.updatedUnstartedConversations || 0) > 0) {
@@ -422,7 +433,8 @@ export async function connectSocket(overrideDeps) {
   socket.on('user_message', ({ conversationId, messageId, senderClientId, message }) => {
     const normalizedMessage = {
       ...(message && typeof message === 'object' ? message : {}),
-      text: stripRelayPromptContext(message?.text, message?.mode),
+      // `origin`: a prompt another relay's agent sent; its header line hides.
+      text: stripRelayPromptContext(message?.text, message?.mode, { origin: message?.origin }),
     };
     if (senderClientId && senderClientId === CLIENT_ID) {
       pendingUserMessageIds.delete(messageId);
@@ -495,6 +507,11 @@ export async function connectSocket(overrideDeps) {
   socket.on('previews', ({ previews }) => {
     setPreviews(previews);
   });
+  // REPLACE semantics too: the relay ships the whole remote-relay list (no
+  // tokens) whenever a remote is added, removed, renamed or changes status.
+  socket.on(REMOTE_RELAY_SOCKET_EVENT, (payload) => {
+    setRemoteRelaysSnapshot(payload || null);
+  });
   socket.on('relay_activity', ({ conversationId, messageId, text, subagentRunId, metadata }) => {
     if (!messageId || !text) return;
     const entry = {

package/server/public/app/thinking-follow.js

@@ -0,0 +1,260 @@
+// Follow modes for the live thinking bubble: 💭 thoughts, 📃 streamed answer,
+// 🛠️ tool list. While a mode is armed the message pane keeps the tracked
+// section's bottom edge pinned just above the composer as it grows, so the
+// user can read a long reasoning stream without the answer/tool rows below
+// pushing it away. Manual scrolling (wheel, touch, scroll keys, scrollbar)
+// disarms the mode; typing in the composer does not. The mode is remembered
+// per conversation for the life of the page.
+
+import { isChatInteractionHeld } from './selection-guard.mjs';
+
+export const THINKING_FOLLOW_MODES = Object.freeze(['thoughts', 'stream', 'tools']);
+export const THINKING_FOLLOW_BOTTOM_GAP_PX = 16;
+
+const FOLLOW_BUTTONS = Object.freeze([
+  { mode: 'thoughts', icon: '💭', title: 'Follow the thoughts' },
+  { mode: 'stream', icon: '📃', title: 'Follow the streamed answer' },
+  { mode: 'tools', icon: '🛠️', title: 'Follow the tool list' },
+]);
+
+const TARGET_SELECTORS = Object.freeze({
+  thoughts: '#thinking-thoughts > .thinking-thoughts-list',
+  stream: '#thinking-stream',
+  tools: '#thinking-activity',
+});
+
+// Keys a user presses to scroll the pane. Editable targets are excluded by the
+// guard, so these only count when the pane itself (or nothing) has focus.
+const SCROLL_KEYS = new Set(['PageUp', 'PageDown', 'Home', 'End', 'ArrowUp', 'ArrowDown', ' ', 'Spacebar']);
+// A scroll event this close after our own scrollTop write is ours.
+const PROGRAMMATIC_SCROLL_WINDOW_MS = 150;
+const SCROLL_DRIFT_TOLERANCE_PX = 2;
+
+const followModeByConversation = new Map();
+let currentConversationIdResolver = () => '';
+let onModeChanged = () => {};
+let programmaticScrollTop = null;
+let programmaticScrollAt = 0;
+let applyScheduled = false;
+let resizeObserver = null;
+let mutationObserver = null;
+let observedBubble = null;
+let guardsInstalledOn = null;
+
+function normalizeMode(mode) {
+  const value = String(mode || '').trim();
+  return THINKING_FOLLOW_MODES.includes(value) ? value : null;
+}
+
+function conversationKey(conversationId) {
+  const explicit = String(conversationId || '').trim();
+  if (explicit) return explicit;
+  try { return String(currentConversationIdResolver() || '').trim(); } catch { return ''; }
+}
+
+export function getThinkingFollowMode(conversationId = null) {
+  const key = conversationKey(conversationId);
+  return key ? followModeByConversation.get(key) || null : null;
+}
+
+export function setThinkingFollowMode(conversationId, mode) {
+  const key = conversationKey(conversationId);
+  if (!key) return null;
+  const next = normalizeMode(mode);
+  const previous = followModeByConversation.get(key) || null;
+  if (next) followModeByConversation.set(key, next);
+  else followModeByConversation.delete(key);
+  if (next !== previous) {
+    try { onModeChanged({ conversationId: key, mode: next, previous }); } catch {}
+  }
+  return next;
+}
+
+/** Pressing the armed button disarms; pressing another switches. */
+export function toggleThinkingFollowMode(conversationId, mode) {
+  const current = getThinkingFollowMode(conversationId);
+  const next = normalizeMode(mode);
+  return setThinkingFollowMode(conversationId, current === next ? null : next);
+}
+
+export function disarmThinkingFollow(conversationId = null) {
+  return setThinkingFollowMode(conversationId, null);
+}
+
+/** Markup for the three buttons; `mode` marks the armed one. */
+export function renderThinkingFollowButtonsHtml(mode = null) {
+  const active = normalizeMode(mode);
+  const buttons = FOLLOW_BUTTONS.map(({ mode: value, icon, title }) => {
+    const pressed = active === value;
+    return `<button type="button" class="thinking-follow-btn${pressed ? ' active' : ''}" data-action="follow-thinking" data-follow="${value}" aria-pressed="${pressed ? 'true' : 'false'}" title="${title}" aria-label="${title}">${icon}</button>`;
+  }).join('');
+  return `<div class="thinking-follow-group" role="group" aria-label="Follow the live reply">${buttons}</div>`;
+}
+
+/** Update aria-pressed/active on an existing group without rebuilding it. */
+export function syncThinkingFollowButtons(root = document, mode = getThinkingFollowMode()) {
+  const active = normalizeMode(mode);
+  const buttons = root?.querySelectorAll?.('.thinking-follow-btn[data-follow]') || [];
+  for (const btn of buttons) {
+    const pressed = btn.dataset.follow === active;
+    btn.classList.toggle('active', pressed);
+    btn.setAttribute('aria-pressed', pressed ? 'true' : 'false');
+  }
+}
+
+function resolveTarget(mode) {
+  const selector = TARGET_SELECTORS[normalizeMode(mode)];
+  if (!selector) return null;
+  const el = document.querySelector(selector);
+  if (!el) return null;
+  if (el.hidden || el.closest?.('[hidden]')) return null;
+  // A collapsed <details> or an empty list has nothing to follow yet.
+  const details = el.closest?.('details');
+  if (details && !details.open) return null;
+  if (!el.childElementCount && !String(el.textContent || '').trim()) return null;
+  return el;
+}
+
+/**
+ * scrollTop that puts `target`'s bottom edge `gapPx` above the scroller's
+ * bottom edge. Pure for tests: takes rects/metrics rather than elements.
+ */
+export function computeFollowScrollTop({
+  scrollTop,
+  clientHeight,
+  scrollHeight,
+  scrollerTop,
+  targetBottom,
+  gapPx = THINKING_FOLLOW_BOTTOM_GAP_PX,
+}) {
+  const desiredBottomInScroller = clientHeight - gapPx;
+  const targetBottomInScroller = targetBottom - scrollerTop;
+  const next = scrollTop + (targetBottomInScroller - desiredBottomInScroller);
+  const max = Math.max(0, scrollHeight - clientHeight);
+  return Math.max(0, Math.min(max, Math.round(next)));
+}
+
+export function applyThinkingFollow({ force = false } = {}) {
+  const mode = getThinkingFollowMode();
+  if (!mode) return false;
+  const scroller = document.getElementById('messages');
+  const target = resolveTarget(mode);
+  if (!scroller || !target) return false;
+  if (!force && isChatInteractionHeld()) return false;
+  const scrollerRect = scroller.getBoundingClientRect();
+  const targetRect = target.getBoundingClientRect();
+  const next = computeFollowScrollTop({
+    scrollTop: scroller.scrollTop,
+    clientHeight: scroller.clientHeight,
+    scrollHeight: scroller.scrollHeight,
+    scrollerTop: scrollerRect.top,
+    targetBottom: targetRect.bottom,
+  });
+  if (Math.abs(next - scroller.scrollTop) <= SCROLL_DRIFT_TOLERANCE_PX) {
+    programmaticScrollTop = scroller.scrollTop;
+    programmaticScrollAt = Date.now();
+    return true;
+  }
+  programmaticScrollTop = next;
+  programmaticScrollAt = Date.now();
+  scroller.scrollTop = next;
+  return true;
+}
+
+export function scheduleThinkingFollow() {
+  if (!getThinkingFollowMode()) return;
+  if (applyScheduled) return;
+  applyScheduled = true;
+  const raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (fn) => setTimeout(fn, 16);
+  raf(() => {
+    applyScheduled = false;
+    applyThinkingFollow();
+  });
+}
+
+/** Watch the live bubble so any growth re-pins the tracked section. */
+export function observeThinkingBubble(bubbleEl) {
+  if (!bubbleEl || bubbleEl === observedBubble) return;
+  unobserveThinkingBubble();
+  observedBubble = bubbleEl;
+  // Guards go on lazily with the first live bubble, after the pane's own
+  // scroll listeners (history paging) are in place.
+  installThinkingFollowScrollGuards();
+  if (typeof MutationObserver === 'function') {
+    mutationObserver = new MutationObserver(() => scheduleThinkingFollow());
+    mutationObserver.observe(bubbleEl, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ['open', 'hidden', 'class'] });
+  }
+  if (typeof ResizeObserver === 'function') {
+    resizeObserver = new ResizeObserver(() => scheduleThinkingFollow());
+    resizeObserver.observe(bubbleEl);
+    const scroller = document.getElementById('messages');
+    if (scroller) resizeObserver.observe(scroller);
+  }
+}
+
+export function unobserveThinkingBubble() {
+  try { mutationObserver?.disconnect(); } catch {}
+  try { resizeObserver?.disconnect(); } catch {}
+  mutationObserver = null;
+  resizeObserver = null;
+  observedBubble = null;
+}
+
+function isEditableTarget(target) {
+  const el = target instanceof Element ? target : null;
+  if (!el) return false;
+  if (el.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]')) return true;
+  return false;
+}
+
+function disarmFromUserScroll() {
+  if (!getThinkingFollowMode()) return;
+  disarmThinkingFollow();
+  syncThinkingFollowButtons(document, null);
+}
+
+/**
+ * Manual scrolling in the pane disarms the mode. Installed once per scroller;
+ * the composer is outside the pane so typing never trips it.
+ */
+export function installThinkingFollowScrollGuards(scroller = document.getElementById('messages')) {
+  if (!scroller || guardsInstalledOn === scroller) return;
+  guardsInstalledOn = scroller;
+  scroller.addEventListener('wheel', () => disarmFromUserScroll(), { passive: true });
+  scroller.addEventListener('touchmove', () => disarmFromUserScroll(), { passive: true });
+  // A pointer press on the scrollbar gutter (outside the content box).
+  scroller.addEventListener('pointerdown', (event) => {
+    if (event.pointerType && event.pointerType !== 'mouse') return;
+    if (event.offsetX > scroller.clientWidth) disarmFromUserScroll();
+  });
+  scroller.addEventListener('scroll', () => {
+    if (!getThinkingFollowMode()) return;
+    const recent = Date.now() - programmaticScrollAt <= PROGRAMMATIC_SCROLL_WINDOW_MS;
+    if (recent && programmaticScrollTop !== null && Math.abs(scroller.scrollTop - programmaticScrollTop) <= SCROLL_DRIFT_TOLERANCE_PX) return;
+    if (recent) return;
+    // Layout shifts move scrollTop too; only a move away from the pinned
+    // position counts as the user taking over.
+    if (programmaticScrollTop !== null && Math.abs(scroller.scrollTop - programmaticScrollTop) <= SCROLL_DRIFT_TOLERANCE_PX) return;
+    disarmFromUserScroll();
+  }, { passive: true });
+  document.addEventListener('keydown', (event) => {
+    if (!getThinkingFollowMode()) return;
+    if (!SCROLL_KEYS.has(event.key)) return;
+    if (isEditableTarget(event.target)) return;
+    disarmFromUserScroll();
+  });
+}
+
+export function initThinkingFollow({ getCurrentConversationId, onChange } = {}) {
+  if (typeof getCurrentConversationId === 'function') currentConversationIdResolver = getCurrentConversationId;
+  if (typeof onChange === 'function') onModeChanged = onChange;
+}
+
+export function __resetThinkingFollowForTests() {
+  followModeByConversation.clear();
+  programmaticScrollTop = null;
+  programmaticScrollAt = 0;
+  applyScheduled = false;
+  unobserveThinkingBubble();
+  guardsInstalledOn = null;
+}

package/server/public/app/tool-activity-emoji.mjs

@@ -31,6 +31,10 @@ export function prefixToolActivityEmoji(text) {
   if (/^Tool \((create_file|write)\)/i.test(value)) return `🆕 ${value}`;
   if (/^Tool \((bash|shell|terminal)\)/i.test(value)) return `🔧 ${value}`;
   if (/^Tool \((sql|sqlite)\)/i.test(value)) return `🗄️ ${value}`;
+  // Work on another OAR relay. Claude's raw name is mcp__relay__remote_relay and
+  // the Copilot CLI names MCP tools <server>-<tool> (oar-remote_relay); the
+  // activity normalisers strip both, but a line that kept one matches too.
+  if (/^Tool \((?:mcp__[a-z0-9_-]+__|[a-z0-9_]+-)?remote_relay\)/i.test(value)) return `🛰️ ${value}`;
   if (/^Tool \(/i.test(value)) return `🛠️ ${value}`;
   return `ℹ️ ${value}`;
 }