@oar-sh/oar 0.9.14 → 0.9.16

package/server/public/app/inbox-view.mjs

@@ -0,0 +1,370 @@
+// The Inbox, as DOM: every pending question across this relay and its paired
+// relays (GET /api/inbox), grouped by relay, newest first; what was answered
+// or dismissed in the last day under a divider. And the card a question that
+// does not block (remote_relay `ask`) shows in its own session.
+//
+// Every text here is written by an agent, some on other relays: it goes into
+// the page through textContent only, never as HTML or a link. Buttons carry
+// what they act on in data attributes; inbox-ui.js handles the clicks.
+//
+// The browser cannot import shared/ (only server/public is served): the few
+// values of shared/relay-asks.mjs this needs are kept here, and
+// inbox-view.test.mjs asserts they match.
+
+export const RELAY_ASK_SOCKET_EVENT = 'relay_ask_updated';
+export const INBOX_ANSWERED_KEEP_MS = 24 * 60 * 60_000;
+export const INBOX_FILTERS = Object.freeze(['all', 'mine', 'agents']);
+
+const CLOSED_STATUSES = new Set(['answered', 'dismissed']);
+
+function toText(value) {
+  return String(value ?? '').trim();
+}
+
+function el(doc, tag, className = '', text = null) {
+  const node = doc.createElement(tag);
+  if (className) node.className = className;
+  if (text !== null && text !== undefined) node.textContent = String(text);
+  return node;
+}
+
+function button(doc, className, label, data = {}) {
+  const node = el(doc, 'button', className, label);
+  node.type = 'button';
+  for (const [key, value] of Object.entries(data)) {
+    if (value !== undefined && value !== null && value !== '') node.dataset[key] = String(value);
+  }
+  return node;
+}
+
+/** "just now", "5 min", "3 h", "2 d" since `createdAt`. */
+export function formatInboxAge(createdAt, now = Date.now()) {
+  const at = Date.parse(toText(createdAt));
+  if (!Number.isFinite(at)) return '';
+  const minutes = Math.max(0, Math.floor((now - at) / 60_000));
+  if (minutes < 1) return 'just now';
+  if (minutes < 60) return `${minutes} min`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 48) return `${hours} h`;
+  return `${Math.floor(hours / 24)} d`;
+}
+
+/** A link that opens one session in a relay's web UI (remoteConversationUrl's copy). */
+export function inboxSessionUrl(relayUrl, sessionId) {
+  const base = toText(relayUrl).replace(/\/+$/, '');
+  const id = toText(sessionId);
+  if (!base || !/^https?:\/\//i.test(base)) return '';
+  return id ? `${base}/?conv=${encodeURIComponent(id)}` : `${base}/`;
+}
+
+/**
+ * The filter: "mine" are the questions in sessions the owner started,
+ * "agents" those in sessions an agent started.
+ */
+export function inboxFilterMatches(item, filter = 'all') {
+  if (filter === 'mine') return item?.session?.startedBy !== 'agent';
+  if (filter === 'agents') return item?.session?.startedBy === 'agent';
+  return true;
+}
+
+function isClosed(item) {
+  return CLOSED_STATUSES.has(toText(item?.status));
+}
+
+function newestFirst(a, b) {
+  return toText(b?.createdAt).localeCompare(toText(a?.createdAt));
+}
+
+/**
+ * The Inbox's groups: per relay (this one first, then the paired ones as
+ * listed), its pending items newest first and its items closed in the last
+ * day; a relay that did not answer shows as such, with nothing listed.
+ */
+export function inboxSections(relays, { filter = 'all', now = Date.now() } = {}) {
+  return (Array.isArray(relays) ? relays : []).map((relay) => {
+    const items = (Array.isArray(relay?.items) ? relay.items : []).filter((item) => item && toText(item.id) && inboxFilterMatches(item, filter));
+    const pending = items.filter((item) => toText(item.status) === 'pending').sort(newestFirst);
+    const closed = items
+      .filter((item) => isClosed(item) && now - (Date.parse(toText(item.answeredAt || item.createdAt)) || 0) <= INBOX_ANSWERED_KEEP_MS)
+      .sort((a, b) => toText(b.answeredAt || b.createdAt).localeCompare(toText(a.answeredAt || a.createdAt)));
+    return {
+      relay: {
+        id: toText(relay?.id),
+        name: toText(relay?.name) || toText(relay?.id),
+        self: relay?.self === true,
+        url: toText(relay?.url),
+        reachable: relay?.reachable !== false,
+        error: toText(relay?.error),
+      },
+      pending,
+      closed,
+    };
+  });
+}
+
+/**
+ * A load that never runs twice at once, and never misses a change: a call
+ * while one runs is answered by that one and asks for one more after it
+ * (once, however many calls came meanwhile). Resolves with the last load's
+ * result.
+ */
+export function createCoalescedRefresh(load) {
+  let running = null;
+  let again = false;
+  function refresh() {
+    if (running) {
+      again = true;
+      return running;
+    }
+    running = (async () => {
+      let result;
+      try {
+        do {
+          again = false;
+          result = await load();
+        } while (again);
+        return result;
+      } finally {
+        running = null;
+      }
+    })();
+    return running;
+  }
+  return refresh;
+}
+
+/**
+ * This relay's asks out of an Inbox load (GET /api/inbox), by id: what the
+ * session cards show. Built anew from each load, so an ask that was
+ * withdrawn or cancelled (no longer listed) drops out.
+ */
+export function sessionAsksFromInbox(relays) {
+  const own = (Array.isArray(relays) ? relays : []).find((relay) => relay?.self === true);
+  const asks = new Map();
+  for (const item of Array.isArray(own?.items) ? own.items : []) {
+    if (item?.kind === 'ask' && toText(item.id)) asks.set(item.id, { ...item, conversationId: item.session?.id });
+  }
+  return asks;
+}
+
+/** Pending items across every relay (the sidebar's badge), whatever the filter. */
+export function inboxPendingCount(relays) {
+  return (Array.isArray(relays) ? relays : [])
+    .reduce((sum, relay) => sum + (Array.isArray(relay?.items) ? relay.items : []).filter((item) => toText(item?.status) === 'pending').length, 0);
+}
+
+function headLine(doc, item, { relay, now, label }) {
+  const head = el(doc, 'div', 'inbox-item-head');
+  head.append(el(doc, 'span', 'inbox-item-kind', label));
+  if (item.urgency === 'now') head.append(el(doc, 'span', 'inbox-item-urgent', 'urgent'));
+  const age = formatInboxAge(item.createdAt, now);
+  if (age) head.append(el(doc, 'span', 'inbox-item-age', age));
+  if (relay && !relay.self) head.append(el(doc, 'span', 'inbox-item-relay', relay.name));
+  return head;
+}
+
+function sessionLine(doc, item, relay, { withLink = true } = {}) {
+  const line = el(doc, 'div', 'inbox-item-session');
+  const title = toText(item?.session?.title) || 'Untitled session';
+  if (withLink && relay?.self) {
+    line.append(button(doc, 'inbox-open-session', title, { inboxAction: 'open', sessionId: item?.session?.id }));
+  } else if (withLink && relay && !relay.self) {
+    const url = inboxSessionUrl(relay.url, item?.session?.id);
+    if (url) {
+      const link = el(doc, 'a', 'inbox-open-there', title);
+      link.href = url;
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+      line.append(link);
+    } else {
+      line.append(el(doc, 'span', 'inbox-session-title', title));
+    }
+  } else {
+    line.append(el(doc, 'span', 'inbox-session-title', title));
+  }
+  const asker = item?.askedBy;
+  if (item?.onBehalf && asker) {
+    const who = [toText(asker.title) || toText(asker.conversationId), toText(asker.relay) ? `on ${toText(asker.relay)}` : ''].filter(Boolean).join(' ');
+    if (who) line.append(el(doc, 'span', 'inbox-item-asker', `asked by ${who}`));
+  }
+  return line;
+}
+
+function outcomeLine(doc, item) {
+  if (item.status === 'dismissed') return el(doc, 'div', 'inbox-item-outcome', 'Dismissed');
+  if (item.status !== 'answered') return null;
+  const answer = toText(item.answer) || toText(item.choice);
+  const via = toText(item.answeredVia);
+  return el(doc, 'div', 'inbox-item-outcome', `Answered: ${answer}${via ? ` (from ${via})` : ''}`);
+}
+
+/**
+ * A question that does not block, as a card: in the Inbox (`mode` "inbox",
+ * with its session and relay) or in its session ("session"). `answerable`:
+ * the buttons answer it (this relay's, or a paired relay's ask).
+ */
+export function buildAskCard(doc, item, { relay = null, mode = 'inbox', now = Date.now(), answerable = true } = {}) {
+  const card = el(doc, 'article', `inbox-item inbox-ask${mode === 'session' ? ' relay-ask-card' : ''}`);
+  card.dataset.itemId = toText(item.id);
+  card.dataset.kind = 'ask';
+  if (relay?.id) card.dataset.relayId = relay.id;
+  card.dataset.status = toText(item.status) || 'pending';
+  card.append(headLine(doc, item, { relay, now, label: mode === 'session' ? 'Question for you · does not block this session' : 'Question' }));
+  if (mode === 'inbox') card.append(sessionLine(doc, item, relay));
+  else if (item.onBehalf && item.askedBy) card.append(sessionLine(doc, item, relay, { withLink: false }));
+  card.append(el(doc, 'p', 'inbox-item-question', item.question || item.prompt || ''));
+  const options = Array.isArray(item.options) ? item.options.map(toText).filter(Boolean) : [];
+  const recommendation = toText(item.recommendation);
+  const recommendedOption = options.find((option) => option === recommendation) || '';
+  if (recommendation && !recommendedOption) card.append(el(doc, 'p', 'inbox-item-recommendation', `Recommended: ${recommendation}`));
+  if (toText(item.detail)) {
+    const details = el(doc, 'details', 'inbox-item-detail');
+    details.append(el(doc, 'summary', '', 'Details'));
+    // Plain text, line breaks kept: never parsed as markup.
+    details.append(el(doc, 'pre', 'inbox-item-detail-text', item.detail));
+    card.append(details);
+  }
+  const outcome = outcomeLine(doc, item);
+  if (outcome) card.append(outcome);
+  if (item.status === 'pending' && answerable) {
+    const data = { relayId: relay?.id || 'self', itemId: item.id };
+    if (options.length) {
+      const row = el(doc, 'div', 'inbox-item-options');
+      for (const option of options) {
+        const choice = button(doc, `inbox-choice${option === recommendedOption ? ' recommended' : ''}`, option, { ...data, inboxAction: 'choice', choice: option });
+        if (option === recommendedOption) {
+          choice.append(el(doc, 'span', 'inbox-recommended-tag', 'recommended'));
+          choice.setAttribute('aria-label', `${option} (recommended)`);
+        }
+        row.append(choice);
+      }
+      card.append(row);
+    }
+    const reply = el(doc, 'div', 'inbox-item-reply');
+    const field = el(doc, 'textarea', 'inbox-answer-text');
+    field.rows = 2;
+    field.placeholder = options.length ? 'Or type an answer…' : 'Your answer…';
+    field.setAttribute('aria-label', 'Answer');
+    field.dataset.itemId = toText(item.id);
+    reply.append(field);
+    const actions = el(doc, 'div', 'inbox-item-actions');
+    actions.append(button(doc, 'inbox-answer', 'Answer', { ...data, inboxAction: 'answer' }));
+    actions.append(button(doc, 'inbox-dismiss', 'Dismiss', { ...data, inboxAction: 'dismiss' }));
+    reply.append(actions);
+    card.append(reply);
+  }
+  return card;
+}
+
+/**
+ * A card a turn waits on (ask_user) or an approval card, in the Inbox. Here:
+ * a plain one is answered like in its session (choices, or typed text); one
+ * with fields or several picks opens its session. A paired relay's is never
+ * answered from here: "Open there".
+ */
+export function buildCardItem(doc, item, { relay = null, now = Date.now() } = {}) {
+  const approval = item.kind === 'approval';
+  const card = el(doc, 'article', `inbox-item inbox-card${approval ? ' inbox-approval' : ''}`);
+  card.dataset.itemId = toText(item.id);
+  card.dataset.kind = toText(item.kind) || 'ask_user';
+  if (relay?.id) card.dataset.relayId = relay.id;
+  card.dataset.status = toText(item.status) || 'pending';
+  card.append(headLine(doc, item, { relay, now, label: approval ? 'Approval · the session waits' : 'Question · the session waits' }));
+  card.append(sessionLine(doc, item, relay));
+  if (toText(item.header)) card.append(el(doc, 'div', 'inbox-item-header', item.header));
+  if (toText(item.question)) card.append(el(doc, 'p', 'inbox-item-question', item.question));
+  else if (approval) card.append(el(doc, 'p', 'inbox-item-question', 'An Allow / Deny card on that relay.'));
+  const outcome = outcomeLine(doc, item);
+  if (outcome) card.append(outcome);
+  if (item.status !== 'pending') return card;
+  if (!relay?.self) {
+    const url = inboxSessionUrl(relay?.url, item?.session?.id);
+    const actions = el(doc, 'div', 'inbox-item-actions');
+    if (url) {
+      const link = el(doc, 'a', 'inbox-open-there inbox-open-there-button', 'Open there');
+      link.href = url;
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+      actions.append(link);
+    } else {
+      actions.append(el(doc, 'span', 'inbox-item-note', 'Answer it on that relay.'));
+    }
+    card.append(actions);
+    return card;
+  }
+  const options = Array.isArray(item.options) ? item.options.map(toText).filter(Boolean) : [];
+  const data = { relayId: 'self', itemId: item.id, sessionId: item?.session?.id, sdkSessionId: item.sdkSessionId || '' };
+  if (item.structured || item.multiSelect) {
+    const actions = el(doc, 'div', 'inbox-item-actions');
+    actions.append(button(doc, 'inbox-open-session-button', 'Open the session to answer', { inboxAction: 'open', sessionId: item?.session?.id }));
+    card.append(actions);
+    return card;
+  }
+  if (options.length) {
+    const row = el(doc, 'div', 'inbox-item-options');
+    for (const option of options) row.append(button(doc, 'inbox-choice', option, { ...data, inboxAction: 'card-choice', choice: option }));
+    card.append(row);
+  }
+  if (item.allowFreeform !== false || !options.length) {
+    const reply = el(doc, 'div', 'inbox-item-reply');
+    const field = el(doc, 'textarea', 'inbox-answer-text');
+    field.rows = 2;
+    field.placeholder = 'Your answer…';
+    field.setAttribute('aria-label', 'Answer');
+    field.dataset.itemId = toText(item.id);
+    reply.append(field);
+    const actions = el(doc, 'div', 'inbox-item-actions');
+    actions.append(button(doc, 'inbox-answer', 'Answer', { ...data, inboxAction: 'card-answer' }));
+    reply.append(actions);
+    card.append(reply);
+  }
+  return card;
+}
+
+function buildItem(doc, item, relay, now) {
+  if (item.kind === 'ask') return buildAskCard(doc, item, { relay, now, mode: 'inbox', answerable: true });
+  return buildCardItem(doc, item, { relay, now });
+}
+
+/** The whole Inbox: the filter, then one group per relay. */
+export function renderInbox(doc, { relays = [], filter = 'all', now = Date.now(), loading = false } = {}) {
+  const root = el(doc, 'section', 'status-view inbox-view');
+  root.setAttribute('aria-label', 'Inbox');
+  const bar = el(doc, 'div', 'inbox-filter');
+  bar.setAttribute('role', 'group');
+  bar.setAttribute('aria-label', 'Show');
+  for (const [value, label] of [['all', 'All'], ['mine', 'Mine'], ['agents', 'Agents']]) {
+    const option = button(doc, `inbox-filter-option${filter === value ? ' active' : ''}`, label, { inboxFilter: value });
+    option.setAttribute('aria-pressed', filter === value ? 'true' : 'false');
+    bar.append(option);
+  }
+  root.append(bar);
+  const sections = inboxSections(relays, { filter, now });
+  let anything = false;
+  for (const section of sections) {
+    const group = el(doc, 'section', 'inbox-relay');
+    group.dataset.relayId = section.relay.id;
+    const heading = el(doc, 'h2', 'inbox-relay-name', section.relay.self ? `${section.relay.name} (this relay)` : section.relay.name);
+    group.append(heading);
+    if (!section.relay.reachable) {
+      group.append(el(doc, 'p', 'inbox-relay-unreachable', `Not reachable${section.relay.error ? `: ${section.relay.error}` : ''}`));
+      root.append(group);
+      continue;
+    }
+    if (!section.pending.length && !section.closed.length) {
+      if (!section.relay.self) continue;
+      group.append(el(doc, 'p', 'inbox-empty', loading ? 'Loading…' : 'Nothing waits for you here.'));
+    }
+    for (const item of section.pending) group.append(buildItem(doc, item, section.relay, now));
+    if (section.closed.length) {
+      const divider = el(doc, 'div', 'inbox-divider', 'Answered in the last day');
+      divider.setAttribute('role', 'separator');
+      group.append(divider);
+      for (const item of section.closed) group.append(buildItem(doc, item, section.relay, now));
+    }
+    anything = anything || section.pending.length > 0 || section.closed.length > 0;
+    root.append(group);
+  }
+  if (!anything && filter !== 'all') root.append(el(doc, 'p', 'inbox-empty', 'Nothing matches this filter.'));
+  return root;
+}

package/server/public/app/journal-view.js

@@ -29,6 +29,7 @@ import {
   setSummaryModalLeaveHandler,
   conversationGroups,
   mergeConversationGroups,
+  forgetKeptEmptyConversationGroups,
   readConversationGroupFoldChoices,
   pruneConversationGroups,
   hasSessionWorkerStatus,
@@ -113,6 +114,7 @@ import {
   conversationProviderIndicatorLabel,
 } from './conversation-provider-indicator.mjs';
 import { leaveStatusView } from './status-view.mjs';
+import { leaveInboxView } from './inbox-ui.js';
 import {
   CLAUDE_CLOUD_PROVIDER,
   buildCloudSourceWarnings,
@@ -132,6 +134,7 @@ import {
 } from './claude-cloud-ui.mjs';
 import { renderConversationOriginMarkerHtml } from './remote-relay-origin-view.mjs';
 import { relayEventWatchedMarkerHtml } from './relay-event-subscriptions-ui.js';
+import { relayScheduleMarkerHtml } from './relay-schedules-ui.js';
 import {
   normalizeConversationFilter,
   conversationMatchesFilter,
@@ -378,6 +381,9 @@ export async function refreshConversations(options = {}) {
       if (!knownConversationIds.has(id)) delete conversations[id];
     }
   }
+  // The owner's kept empty groups come with the first page only: the page
+  // names the ones still kept.
+  forgetKeptEmptyConversationGroups();
   mergeConversationGroups(r.groups);
   applyConversationPage(r.conversations || []);
   conversationRowsFetchedSinceRefresh = Array.isArray(r.conversations) ? r.conversations.length : 0;
@@ -613,6 +619,8 @@ function paintConvList() {
   const items = arrangeConversationList(inView, conversationGroups, {
     matches: activeFilter ? (row) => conversationMatchesFilter(row, activeFilter) : null,
     groupNameMatches: activeFilter ? (info) => conversationMatchesFilter({ title: info?.displayName || info?.name }, activeFilter) : null,
+    // An owner's group an agent emptied shows in the live list, empty.
+    emptyGroups: !conversationListArchivedView,
     isOpen: (groupId, group) => {
       const described = describeGroupForHead(group, viewOf);
       const holdsOpenConversation = !!currentConvId && group.members.some((row) => row.id === currentConvId);
@@ -690,6 +698,8 @@ function paintConvList() {
       : renderConversationOriginMarkerHtml(c, { conversations });
     // "watched": a session another conversation watches by id (relay events).
     const watchedMarkerHtml = relayEventWatchedMarkerHtml(c.id);
+    // "scheduled": a schedule fires into this session (remote_relay schedule).
+    const scheduledMarkerHtml = relayScheduleMarkerHtml(c.id);
     const groupClass = item.kind === 'head' ? ' conv-group-head' : (item.kind === 'member' ? ' conv-group-member' : '');
     const groupAttr = item.kind === 'head' || item.kind === 'member' ? ` data-group-id="${escHtml(item.group.id)}"` : '';
     // A head row shows the name the group was given by hand; until then the
@@ -700,7 +710,7 @@ function paintConvList() {
     return `
     <div class="conv-item worker-ui-${view.visualState}${view.working ? ' conv-working' : ''}${c.id === currentConvId ? ' active' : ''}${c.archived ? ' archived' : ''}${groupClass}" data-conversation-id="${c.id}"${groupAttr} onclick="openConversation('${c.id}')">
       <div class="conv-title"${titleAttr}>${item.kind === 'head' ? foldButtonHtml(item) : ''}${escHtml(rowTitle)}${pendingByConversation[c.id] ? ` <span class="conv-open-questions">${pendingByConversation[c.id]} open</span>` : ''}</div>
-      <div class="conv-meta"><span class="conv-meta-primary">${fmtDate(c.updatedAt)} · ${c.messageCount} msg${c.messageCount !== 1 ? 's' : ''}</span>${item.kind === 'head' ? groupPillHtml(item) : ''}${originMarkerHtml}${watchedMarkerHtml}${providerIndicatorHtml}</div>
+      <div class="conv-meta"><span class="conv-meta-primary">${fmtDate(c.updatedAt)} · ${c.messageCount} msg${c.messageCount !== 1 ? 's' : ''}</span>${item.kind === 'head' ? groupPillHtml(item) : ''}${originMarkerHtml}${watchedMarkerHtml}${scheduledMarkerHtml}${providerIndicatorHtml}</div>
       ${c.archived
         ? `<button class="conv-archive" onclick="unarchiveConv(event,'${c.id}')" title="Unarchive" aria-label="Unarchive">📂</button>`
         : `<button class="conv-archive" onclick="archiveConv(event,'${c.id}')" title="Archive" aria-label="Archive">🗄</button>`}
@@ -711,6 +721,15 @@ function paintConvList() {
   // archived or deleted): a head line of its own, with the name and the pill.
   const syntheticHeadHtml = (item) => {
     const name = groupDisplayName(item.group.id);
+    // An owner's group an agent emptied: no members, nothing to fold; its
+    // menu (right-click or long-press) renames or dissolves it.
+    if (item.group.empty) {
+      return `
+    <div class="conv-item conv-group-head conv-group-synthetic conv-group-empty worker-ui-offline" data-group-id="${escHtml(item.group.id)}" title="An agent moved the last session out of this group; rename or dissolve it from its menu.">
+      <div class="conv-title">${escHtml(name)}</div>
+      <div class="conv-meta"><span class="conv-meta-primary">group · empty</span></div>
+    </div>`;
+    }
     const described = groupDescriptions.get(item.group.id) || describeGroupForHead(item.group, viewOf);
     return `
     <div class="conv-item conv-group-head conv-group-synthetic worker-ui-${described.summary.strongest === 'waiting' ? 'question' : 'offline'}" data-group-id="${escHtml(item.group.id)}" onclick="toggleConversationGroupFold(event,'${escHtml(item.group.id)}')">
@@ -1059,7 +1078,9 @@ function applyFreshOverCachedConversation(id, response, { cached, keepTranscript
 }
 
 export async function openConversation(id, options = {}) {
-  const didLeaveStatusView = leaveStatusView();
+  // The Inbox owns the transcript like the status view does.
+  const didLeaveInboxView = leaveInboxView();
+  const didLeaveStatusView = leaveStatusView() || didLeaveInboxView;
   document.getElementById('input-area')?.removeAttribute('hidden');
   const previousConversationId = String(currentConvId || '').trim();
   const nextConversationId = String(id || '').trim();

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

@@ -10,6 +10,7 @@ import {
   renderWatchedBadgeHtml,
   renderWatchingPanelHtml,
   watchersOf,
+  watchingChipHint,
   watchingChipText,
   watchingSummary,
 } from './relay-event-view.mjs';
@@ -164,15 +165,16 @@ export function syncRelayEventHeader() {
   }
   const summary = watchingSummary(subscriptions, id);
   const chipText = watchingChipText(summary);
+  const chipHint = chipText ? watchingChipHint(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]);
+  const key = JSON.stringify([id, chipText, chipHint, 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>`);
+    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)}${chipHint ? ` <span class="relay-watch-hint">${escHtml(chipHint)}</span>` : ''}</button>`);
   }
   const badge = renderWatchedBadgeHtml(watchers, { conversations, subscriptions, escHtml });
   if (badge) parts.push(badge);

package/server/public/app/relay-event-view.mjs

@@ -28,6 +28,7 @@ const EVENT_TYPES = new Set([
 ]);
 const URGENT_TYPES = new Set(['question_asked', 'error']);
 const DIGEST_PATTERN = /^Digest of \d+ events?/;
+const QUIET_PATTERN = /^Held during quiet hours/;
 const REPLAYED_PATTERN = /^Replayed: \d+ events?/;
 const LINE_PATTERN = /^\[relay event\] (?:[^"·\n]{1,60} · )?(?:session "(?:[^"]*)" \([^)]*\)(?: on relay "[^"]*")?: )?([a-z_]+)/;
 const LINE_PREFIX = '[relay event] ';
@@ -63,15 +64,17 @@ export function isRelayEventMessage(message) {
 /**
  * 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.
+ * whether it is a digest, whether quiet hours held it, 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 digest = body.some((line) => DIGEST_PATTERN.test(line));
+  const quiet = body.some((line) => QUIET_PATTERN.test(line));
   const replayed = body.some((line) => REPLAYED_PATTERN.test(line));
-  const lines = body.filter((line) => !DIGEST_PATTERN.test(line) && !REPLAYED_PATTERN.test(line));
+  const lines = body.filter((line) => !DIGEST_PATTERN.test(line) && !QUIET_PATTERN.test(line) && !REPLAYED_PATTERN.test(line));
   const types = [];
   let count = 0;
   for (const line of lines) {
@@ -84,7 +87,7 @@ export function parseRelayEventMessageText(text) {
     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 };
+  return { lines, types, count: count || lines.length, digest, quiet, replayed };
 }
 
 /** The collapsed row's one line: "3 events · question, reply". */
@@ -92,7 +95,8 @@ 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;
+  const tags = [parsed?.quiet ? 'After quiet hours' : '', parsed?.digest ? 'Digest' : ''].filter(Boolean);
+  const head = [...tags, events].join(' · ');
   return labels.length ? `${head} · ${labels.join(', ')}` : head;
 }
 
@@ -175,11 +179,23 @@ export function watchersOf(subscriptions, conversationId, { includeAll = true }
   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));
+    const watches = sub.scope === 'all'
+      ? includeAll && !(Array.isArray(sub.exclude) && sub.exclude.includes(id))
+      : sessionIdsOf(sub).includes(id);
+    if (watches) watchers.add(watcherKey(sub));
   }
   return [...watchers];
 }
 
+/** "digest 30 min" / "quiet 23:00–06:00": what a subscription's options hold back, or ''. */
+export function subscriptionOptionHints(sub) {
+  const quiet = sub?.quietHours && typeof sub.quietHours === 'object' ? sub.quietHours : null;
+  return [
+    Number(sub?.digestMinutes) > 0 ? `digest ${Number(sub.digestMinutes)} min` : '',
+    quiet ? `quiet ${String(quiet.from || '')}–${String(quiet.to || '')}` : '',
+  ].filter(Boolean);
+}
+
 export function watchingChipText(summary) {
   if (!summary?.subscriptions?.length) return '';
   if (summary.all) return summary.count ? `watching all sessions (+${summary.count} listed)` : 'watching all sessions';
@@ -188,6 +204,11 @@ export function watchingChipText(summary) {
   return `watching ${summary.count} session${summary.count === 1 ? '' : 's'}`;
 }
 
+/** The chip's small hint: the options of the conversation's subscriptions, each named once (at most two). */
+export function watchingChipHint(summary) {
+  return [...new Set((summary?.subscriptions || []).flatMap(subscriptionOptionHints))].slice(0, 2).join(' · ');
+}
+
 function conversationTitle(conversations, id) {
   const title = String(conversations?.[id]?.title || '').trim();
   return title || `session ${String(id).slice(0, 8)}`;
@@ -203,9 +224,14 @@ function describeSubscription(sub, conversations) {
   const what = sub.scope === 'all'
     ? (paired ? `All sessions of ${relay}` : 'All sessions')
     : (paired ? `${relay} · ${listed}` : (listed || 'This relay'));
+  const quiet = sub.quietHours && typeof sub.quietHours === 'object' ? sub.quietHours : null;
+  const excluded = Array.isArray(sub.exclude) ? sub.exclude.length : 0;
   const extras = [
     sub.once ? 'once' : '',
     sub.heartbeatMinutes ? `heartbeat ${sub.heartbeatMinutes} min` : '',
+    sub.digestMinutes ? `digest ${sub.digestMinutes} min` : '',
+    quiet ? `quiet ${quiet.from}–${quiet.to} ${quiet.tz}` : '',
+    excluded ? `${excluded} left out` : '',
   ].filter(Boolean);
   return { what, events: (sub.events || []).join(', '), extras: extras.join(' · ') };
 }