@oar-sh/oar 0.9.8 → 0.9.10

package/server/public/app/pinned-messages-view.mjs

@@ -0,0 +1,253 @@
+// Pinned messages: the per-conversation pin list, the 📍 header button with
+// its count, and the list modal (the shared summary modal, kind
+// 'pinned-messages'). Fed by the conversation payload's `pins` on load and by
+// the `conversation_pins_updated` socket event (REPLACE semantics per
+// conversation), so a pin set on another device shows here without a reload.
+// This list is also what a bubble's Pin / Unpin label is drawn from.
+
+import {
+  IS_SHARED_VIEW,
+  closeSummaryModal,
+  escHtml,
+  fmtDate,
+  openSummaryModal,
+  renderSummaryModalContent,
+  showTransientRelayNotice,
+  summaryModalState,
+} from './store.js';
+import { updateMessagePin } from './api-client.js';
+
+export const PINNED_MESSAGES_MODAL_KIND = 'pinned-messages';
+
+const pinsByConversation = new Map();
+// The relay numbers its pin lists. A conversation load that left before a pin
+// change can arrive after the change's own socket event: the older list must
+// not win, or the page would stay wrong until the next load.
+const pinRevisionByConversation = new Map();
+const pinTogglesInFlight = new Set();
+let currentConversationId = null;
+let modalBodyBound = false;
+// The transcript lives in conversation-view.js and journal-view.js, which
+// import this module; they hand their side in through initPinnedMessagesView.
+let handlers = {
+  openConversation: null,
+  focusMessage: null,
+  syncRenderedPinState: null,
+};
+
+function normalizePins(pins) {
+  return (Array.isArray(pins) ? pins : [])
+    .map((pin) => ({ ...pin, messageId: String(pin?.messageId || '').trim() }))
+    .filter((pin) => pin.messageId);
+}
+
+export function getConversationPins(conversationId) {
+  return pinsByConversation.get(String(conversationId || '').trim()) || [];
+}
+
+export function isMessagePinned(conversationId, messageId) {
+  const id = String(messageId || '').trim();
+  return !!id && getConversationPins(conversationId).some((pin) => pin.messageId === id);
+}
+
+export function pinnedCountLabel(count) {
+  const total = Number(count) || 0;
+  return total ? `${total} pinned` : '';
+}
+
+function pinRoleLabel(role) {
+  return String(role || '').trim().toLowerCase() === 'user' ? 'You' : 'Agent';
+}
+
+export function renderPinnedListHtml(pins) {
+  const list = normalizePins(pins);
+  if (!list.length) {
+    return '<div class="pinned-empty">No pinned messages. Use Pin on a message to add one.</div>';
+  }
+  return `<div class="pinned-list">${list.map((pin) => {
+    const id = escHtml(pin.messageId);
+    const when = fmtDate(pin.timestamp);
+    const attachmentCount = Number(pin.attachmentCount) || 0;
+    const meta = [
+      escHtml(pinRoleLabel(pin.role)),
+      when ? escHtml(when) : '',
+      attachmentCount ? `📎 ${attachmentCount}` : '',
+      pin.hiddenFromShares === true ? '<span class="pinned-row-chip">hidden from shared</span>' : '',
+    ].filter(Boolean).join(' · ');
+    const preview = String(pin.preview || '').trim();
+    const previewHtml = preview
+      ? escHtml(preview)
+      : '<span class="pinned-row-no-text">(no text)</span>';
+    return `
+      <div class="pinned-row">
+        <button type="button" class="pinned-row-jump" data-pin-jump="${id}">
+          <span class="pinned-row-meta">${meta}</span>
+          <span class="pinned-row-preview">${previewHtml}</span>
+        </button>
+        <button type="button" class="pinned-row-unpin" data-pin-unpin="${id}" title="Unpin" aria-label="Unpin">🗑</button>
+      </div>`;
+  }).join('')}</div>`;
+}
+
+function syncPinnedHeaderButton() {
+  const button = document.getElementById('pinned-messages-btn');
+  if (!button) return;
+  const count = getConversationPins(currentConversationId).length;
+  button.hidden = IS_SHARED_VIEW || !count;
+  const countEl = button.querySelector('.header-icon-count');
+  if (countEl) countEl.textContent = count ? String(count) : '';
+  const label = count ? `Pinned messages (${count})` : 'Pinned messages';
+  button.setAttribute('title', label);
+  button.setAttribute('aria-label', label);
+}
+
+function pinnedModalContent() {
+  const pins = getConversationPins(currentConversationId);
+  return {
+    title: '📍 Pinned messages',
+    subtitle: pinnedCountLabel(pins.length),
+    bodyHtml: renderPinnedListHtml(pins),
+    kind: PINNED_MESSAGES_MODAL_KIND,
+  };
+}
+
+function syncCurrentConversationPins() {
+  syncPinnedHeaderButton();
+  if (summaryModalState.kind === PINNED_MESSAGES_MODAL_KIND) {
+    renderSummaryModalContent(pinnedModalContent());
+  }
+  handlers.syncRenderedPinState?.(
+    new Set(getConversationPins(currentConversationId).map((pin) => pin.messageId)),
+  );
+}
+
+export function setConversationPins(conversationId, pins, revision = 0) {
+  const id = String(conversationId || '').trim();
+  if (!id) return;
+  const nextRevision = Number(revision) || 0;
+  if (nextRevision) {
+    if (nextRevision < (pinRevisionByConversation.get(id) || 0)) return;
+    pinRevisionByConversation.set(id, nextRevision);
+  }
+  const normalized = normalizePins(pins);
+  // The list arrives with every conversation load, the live poll included: an
+  // unchanged one must not redraw the open modal under the user's finger.
+  if (JSON.stringify(normalized) === JSON.stringify(getConversationPins(id))) return;
+  if (normalized.length) pinsByConversation.set(id, normalized);
+  else pinsByConversation.delete(id);
+  if (id === currentConversationId) syncCurrentConversationPins();
+}
+
+export function setPinsConversation(conversationId) {
+  const id = String(conversationId || '').trim() || null;
+  if (id === currentConversationId) return;
+  currentConversationId = id;
+  // The conversation was closed (deleted, new chat): its list goes with it.
+  if (!id && summaryModalState.kind === PINNED_MESSAGES_MODAL_KIND) closeSummaryModal();
+  syncCurrentConversationPins();
+}
+
+export function openPinnedMessagesModal() {
+  if (IS_SHARED_VIEW) return;
+  openSummaryModal(pinnedModalContent());
+}
+
+function setPinButtonBusy(messageId, busy, pinned) {
+  const button = document.querySelector(`.msg-pin-btn[data-message-id="${CSS.escape(messageId)}"]`);
+  if (!button) return;
+  button.disabled = busy;
+  button.textContent = busy
+    ? (pinned ? 'Unpinning…' : 'Pinning…')
+    : (pinned ? 'Unpin' : 'Pin');
+}
+
+// `pinned` is the state the control showed when it was pressed; the request
+// asks for the opposite. The answer carries the conversation's whole pin list,
+// stored under that conversation's id: if the user has switched conversations
+// meanwhile, the open one is not touched.
+export async function toggleMessagePin(conversationId, messageId, pinned) {
+  const conversationKey = String(conversationId || '').trim();
+  const targetMessageId = String(messageId || '').trim();
+  if (!conversationKey || !targetMessageId) return;
+  const flightKey = `${conversationKey}:${targetMessageId}`;
+  if (pinTogglesInFlight.has(flightKey)) return;
+
+  pinTogglesInFlight.add(flightKey);
+  setPinButtonBusy(targetMessageId, true, pinned);
+  const result = await updateMessagePin(conversationKey, targetMessageId, !pinned);
+  pinTogglesInFlight.delete(flightKey);
+  if (!result?.ok) {
+    if (conversationKey === currentConversationId) setPinButtonBusy(targetMessageId, false, pinned);
+    showTransientRelayNotice(String(result?.error || '').trim() || (pinned
+      ? 'Could not unpin the message.'
+      : 'Could not pin the message.'));
+    return;
+  }
+
+  showTransientRelayNotice(result.pinned ? 'Message pinned.' : 'Message unpinned.');
+  if (conversationKey === currentConversationId) setPinButtonBusy(targetMessageId, false, result.pinned === true);
+  setConversationPins(conversationKey, result.pins, result.pinsRevision);
+}
+
+function isMessageOnPage(messageId) {
+  return !!document.querySelector(`#messages .msg[data-message-id="${CSS.escape(messageId)}"]`);
+}
+
+// On the page already: scroll there. Otherwise the path message search takes:
+// the relay answers with the messages around the target and the history
+// loaders page on from that window in both directions.
+export async function jumpToPinnedMessage(messageId) {
+  const targetMessageId = String(messageId || '').trim();
+  const conversationId = currentConversationId;
+  if (!targetMessageId || !conversationId) return;
+  closeSummaryModal();
+  if (handlers.focusMessage?.(targetMessageId)) return;
+
+  await handlers.openConversation?.(conversationId, {
+    aroundMessageId: targetMessageId,
+    focusMessageId: targetMessageId,
+  });
+  if (currentConversationId !== conversationId || isMessageOnPage(targetMessageId)) return;
+  showTransientRelayNotice('That message is no longer in this conversation.');
+  // A message the relay no longer has answers with an empty window; put the
+  // end of the conversation back instead of leaving the page blank.
+  if (!document.querySelector('#messages .msg[data-message-id]')) {
+    await handlers.openConversation?.(conversationId);
+  }
+}
+
+function handlePinnedModalClick(event) {
+  if (summaryModalState.kind !== PINNED_MESSAGES_MODAL_KIND) return;
+  const target = event.target instanceof Element ? event.target : null;
+  const unpinBtn = target?.closest('[data-pin-unpin]');
+  if (unpinBtn) {
+    event.preventDefault();
+    void toggleMessagePin(currentConversationId, unpinBtn.getAttribute('data-pin-unpin'), true);
+    return;
+  }
+  const jumpBtn = target?.closest('[data-pin-jump]');
+  if (jumpBtn) {
+    event.preventDefault();
+    void jumpToPinnedMessage(jumpBtn.getAttribute('data-pin-jump'));
+  }
+}
+
+export function initPinnedMessagesView(nextHandlers = {}) {
+  handlers = { ...handlers, ...nextHandlers };
+  const button = document.getElementById('pinned-messages-btn');
+  if (button && button.dataset.bound !== '1') {
+    button.dataset.bound = '1';
+    button.addEventListener('click', (event) => {
+      event.preventDefault();
+      openPinnedMessagesModal();
+    });
+  }
+  // #summary-modal-body outlives every modal, so it is bound exactly once; the
+  // handler no-ops unless the pin list is the modal currently mounted.
+  const modalBody = document.getElementById('summary-modal-body');
+  if (modalBody && !modalBodyBound) {
+    modalBodyBound = true;
+    modalBody.addEventListener('click', handlePinnedModalClick);
+  }
+  syncPinnedHeaderButton();
+}

package/server/public/app/provider-readiness.mjs

@@ -0,0 +1,120 @@
+// Which providers are known to be ready to run a chat, from what the client
+// already loads: the provider settings payloads and the model catalog. No DOM.
+//
+// OpenAI, Claude, Claude Cloud, Cursor and Grok say so themselves: their
+// settings carry `enabled`. Copilot has no such flag and the relay never asks
+// whether the Copilot CLI is signed in, so the best signal is indirect: has a
+// real Copilot model list ever reached the catalog? A fresh database is seeded
+// with a curated list under the source `bootstrap-seed`; a server discovery,
+// an extension snapshot or a worker snapshot replaces that source. Until one
+// has, Copilot is `unknown`, never "not ready": the signal can be wrong (a
+// signed-in host whose first discovery timed out), so callers only point to
+// Settings and never block.
+//
+// A payload that failed to load is `null`, and makes the whole answer
+// `known: false`. Callers treat an unknown answer as ready, which is today's
+// behaviour: a network blip must never show the setup wall.
+
+export const SEED_CATALOG_SOURCE = 'bootstrap-seed';
+
+const SETTINGS_PROVIDERS = Object.freeze([
+  ['openai', 'openai'],
+  ['claude', 'claude'],
+  ['claudeCloud', 'claude-cloud'],
+  ['cursor', 'cursor'],
+  ['grok', 'grok'],
+]);
+
+/** Payloads whose absence means "could not be loaded" rather than "not offered". */
+const REQUIRED_INPUTS = Object.freeze(['openai', 'claude', 'cursor', 'grok', 'catalog']);
+
+/**
+ * @param {object} input the settings payloads New Chat loads, plus GET /api/models
+ * @param {object|null} [input.openai]
+ * @param {object|null} [input.claude]
+ * @param {object|null} [input.claudeCloud] null on a relay without Claude Cloud: not offered, not unknown
+ * @param {object|null} [input.cursor]
+ * @param {object|null} [input.grok]
+ * @param {object|null} [input.catalog]
+ * @returns {{ known: boolean, anyReady: boolean, ready: string[], copilot: 'ready' | 'unknown' }}
+ */
+export function resolveProviderReadiness(input = {}) {
+  const payloads = input && typeof input === 'object' ? input : {};
+  const known = REQUIRED_INPUTS.every((key) => payloads[key] && typeof payloads[key] === 'object');
+  const ready = [];
+  for (const [key, providerId] of SETTINGS_PROVIDERS) {
+    if (payloads[key]?.enabled === true) ready.push(providerId);
+  }
+  const source = String(payloads.catalog?.source || '').trim();
+  const copilot = payloads.catalog && typeof payloads.catalog === 'object' && source && source !== SEED_CATALOG_SOURCE
+    ? 'ready'
+    : 'unknown';
+  if (copilot === 'ready') ready.push('github');
+  return { known, anyReady: ready.length > 0, ready, copilot };
+}
+
+/** The one question the empty screen, New Chat and the composer ask. */
+export function isSetupRequired(readiness) {
+  return !!readiness && readiness.known === true && readiness.anyReady !== true;
+}
+
+// ── The client's live copy ────────────────────────────────────────────────
+// Fed from the initial loads, the socket events that follow a Settings save
+// or a catalog change, and New Chat's own fresh loads. Subscribers redraw the
+// empty screen and the composer when the answer changes.
+
+const inputs = {
+  openai: undefined,
+  claude: undefined,
+  claudeCloud: undefined,
+  cursor: undefined,
+  grok: undefined,
+  catalog: undefined,
+};
+let current = resolveProviderReadiness(inputs);
+const listeners = new Set();
+
+function readinessKey(readiness) {
+  return `${readiness.known ? 1 : 0}|${readiness.anyReady ? 1 : 0}|${readiness.ready.join(',')}|${readiness.copilot}`;
+}
+
+/**
+ * Records fresh payloads; `null` for a failed load, `undefined` keys are left
+ * as they were. Listeners run only when the resolved answer changed.
+ */
+export function updateProviderReadinessInputs(partial = {}) {
+  if (!partial || typeof partial !== 'object') return current;
+  for (const key of Object.keys(inputs)) {
+    if (partial[key] !== undefined) inputs[key] = partial[key];
+  }
+  const next = resolveProviderReadiness(inputs);
+  const changed = readinessKey(next) !== readinessKey(current);
+  current = next;
+  if (changed) {
+    for (const listener of Array.from(listeners)) {
+      try { listener(current); } catch {}
+    }
+  }
+  return current;
+}
+
+export function getProviderReadiness() {
+  return current;
+}
+
+export function isProviderSetupRequired() {
+  return isSetupRequired(current);
+}
+
+export function subscribeProviderReadiness(listener) {
+  if (typeof listener !== 'function') return () => {};
+  listeners.add(listener);
+  return () => { listeners.delete(listener); };
+}
+
+/** Tests only: back to "nothing loaded yet". */
+export function resetProviderReadinessForTests() {
+  for (const key of Object.keys(inputs)) inputs[key] = undefined;
+  current = resolveProviderReadiness(inputs);
+  listeners.clear();
+}

package/server/public/app/pwa-install.js

@@ -25,7 +25,7 @@ function matchesDisplayMode(query) {
   }
 }
 
-function isInstalledAppMode() {
+export function isInstalledAppMode() {
   const standalone = matchesDisplayMode('(display-mode: standalone)');
   const minimalUi = matchesDisplayMode('(display-mode: minimal-ui)');
   const launchedFromAndroidApp = String(document.referrer || '').startsWith('android-app://');

package/server/public/app/relay-board-view.js

@@ -186,6 +186,9 @@ export function renderRelayBoards() {
   // the live bubble into the reply, or one of another conversation.
   el.querySelectorAll('.relay-board-inline').forEach((node) => { if (!placed.has(node)) node.remove(); });
   el.querySelectorAll('.relay-board-container').forEach((node) => { if (!node.querySelector('.relay-board-inline')) node.remove(); });
+  // A folded agent exchange whose turn waits on a board opens to show it
+  // (agent-exchange-fold-view.mjs).
+  window.syncAgentExchangeFolds?.();
   if (added) window.scrollBottom?.();
 }
 

package/server/public/app/relay-dot-state.mjs

@@ -9,7 +9,9 @@
  * A managed-but-disconnected tunnel stays green rather than going grey: the
  * relay itself is still reachable, and grey would claim otherwise. The tooltip
  * carries the bad news instead. Note this state is only ever visible locally —
- * a remote browser whose tunnel is down cannot load the page at all.
+ * a remote browser whose tunnel is down cannot load the page at all. A tunnel
+ * that never started because cloudflared is not installed reads "off" there,
+ * followed by the relay's sentence on how to install it.
  *
  * `tone` is the same state as `className`, minus the dot's CSS baggage. The
  * mobile burger toggle dyes its bars from it, because the dot itself sits in
@@ -24,6 +26,7 @@ function normalizeTunnel(tunnel) {
   if (!managed) return null;
   return {
     connected: tunnel.connected === true,
+    binaryMissing: tunnel.binaryMissing === true,
     lastError: String(tunnel.lastError || '').trim(),
   };
 }
@@ -56,6 +59,10 @@ export function resolveRelayDotState({
   let reach = 'Web relay reachable';
   if (tunnelled) {
     reach = 'Web relay reachable via Cloudflare Tunnel';
+  } else if (tunnel?.binaryMissing) {
+    reach = tunnel.lastError
+      ? `Web relay reachable; Cloudflare tunnel off: ${tunnel.lastError}`
+      : 'Web relay reachable; Cloudflare tunnel off: cloudflared is not installed';
   } else if (tunnel) {
     reach = tunnel.lastError
       ? `Web relay reachable; Cloudflare tunnel disconnected (${tunnel.lastError})`

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();
+}