@oar-sh/oar 0.9.15 → 0.9.17

package/server/public/app/plan-usage-view.mjs

@@ -35,6 +35,7 @@ const TAB_LABELS = Object.freeze(Object.assign(Object.create(null), {
   'claude-cloud': 'Claude Cloud',
   cursor: 'Cursor',
   grok: 'Grok',
+  deepseek: 'DeepSeek',
 }));
 
 // The composer speaks 'github'/'openai'/… while the usage report keys Copilot as
@@ -86,9 +87,9 @@ export function utilizationColor(utilization) {
 export function formatAmount(value, unit) {
   const n = toNullableNumber(value);
   if (n === null) return null;
-  if (unit === 'usd') {
+  if (unit === 'usd' || unit === 'cny') {
     const rounded = Math.round(n * 100) / 100;
-    return `${rounded < 0 ? '-' : ''}$${Math.abs(rounded).toFixed(2)}`;
+    return `${rounded < 0 ? '-' : ''}${unit === 'cny' ? '¥' : '$'}${Math.abs(rounded).toFixed(2)}`;
   }
   if (unit === 'percent') return `${Math.round(n * 10) / 10}%`;
   const abs = Math.abs(n);
@@ -189,15 +190,103 @@ function renderMeter(meter, now) {
   `;
 }
 
+/**
+ * A chart from `buildChart` data: stacked `columns` (one per item, e.g. a
+ * day) or horizontal stacked `bars` (one per item, e.g. a model), drawn with
+ * plain HTML and CSS. Colours come from the theme's series variables (fixed
+ * order, so a series keeps its colour between reads); every item has a text
+ * equivalent as its label, a tooltip on hover, focus or tap, and the chart
+ * has a legend for more than one series and a table view of the same data.
+ */
+function renderChart(chart) {
+  const series = Array.isArray(chart?.series) ? chart.series.filter((entry) => entry && entry.key) : [];
+  const items = Array.isArray(chart?.items) ? chart.items.filter((entry) => entry && entry.key) : [];
+  if (!series.length || !items.length) return '';
+  const unit = chart.unit || 'credits';
+  // Money under a cent keeps four decimals, as the card's estimates do.
+  const amount = (value) => {
+    const n = toNullableNumber(value) ?? 0;
+    if ((unit === 'usd' || unit === 'cny') && n !== 0 && Math.abs(n) < 0.01) {
+      return `${n < 0 ? '-' : ''}${unit === 'cny' ? '¥' : '$'}${Math.abs(n).toFixed(4)}`;
+    }
+    return formatAmount(n, unit) ?? '0';
+  };
+  const valueOf = (item, key) => Math.max(0, toNullableNumber(item.values?.[key]) ?? 0);
+  const totalOf = (item) => series.reduce((sum, entry) => sum + valueOf(item, entry.key), 0);
+  const seriesColor = (index) => `var(--plan-usage-series-${Math.min(index + 1, 5)})`;
+  const partsText = (item) => {
+    const total = totalOf(item);
+    return series
+      .map((entry) => ({ entry, value: valueOf(item, entry.key) }))
+      .filter(({ value }) => value > 0)
+      .map(({ entry, value }) => `${entry.label} ${amount(value)}${series.length > 1 && total > 0 ? ` (${Math.round((value / total) * 100)}%)` : ''}`)
+      .join(', ');
+  };
+  const itemText = (item) => {
+    const total = totalOf(item);
+    if (total <= 0) return `${item.label}: nothing`;
+    const parts = series.length > 1 ? partsText(item) : '';
+    return `${item.label}: ${amount(total)}${parts ? ` (${parts})` : ''}`;
+  };
+  const max = Math.max(0, ...items.map(totalOf));
+  const segments = (item, dimension) => series.map((entry, index) => {
+    const value = valueOf(item, entry.key);
+    if (value <= 0) return '';
+    const base = dimension === 'height' ? max : totalOf(item);
+    const share = base > 0 ? (value / base) * 100 : 0;
+    return `<span class="plan-usage-chart-seg" data-series="${escapeHtml(entry.key)}" style="${dimension}:${share.toFixed(2)}%;background:${seriesColor(index)}" title="${escapeHtml(`${entry.label} ${amount(value)}`)}"></span>`;
+  }).join('');
+
+  const plot = chart.kind === 'bars'
+    ? `<div class="plan-usage-chart-bars">${items.map((item) => `
+        <div class="plan-usage-chart-row" tabindex="0" aria-label="${escapeHtml(itemText(item))}">
+          <span class="plan-usage-chart-row-label">${escapeHtml(item.label)}</span>
+          <span class="plan-usage-chart-bar" aria-hidden="true">${segments(item, 'width')}</span>
+          <span class="plan-usage-chart-row-value">${escapeHtml(amount(totalOf(item)))}</span>
+          <span class="plan-usage-chart-tip" role="tooltip">${escapeHtml(itemText(item))}</span>
+        </div>`).join('')}</div>`
+    : `<div class="plan-usage-chart-columns" style="--plan-usage-columns:${items.length}">${items.map((item) => `
+        <div class="plan-usage-chart-col${totalOf(item) > 0 ? '' : ' plan-usage-chart-col-empty'}" tabindex="0" aria-label="${escapeHtml(itemText(item))}" data-item="${escapeHtml(item.key)}">
+          <span class="plan-usage-chart-stack" aria-hidden="true">${segments(item, 'height')}</span>
+          <span class="plan-usage-chart-tip" role="tooltip">${escapeHtml(itemText(item))}</span>
+        </div>`).join('')}
+        <span class="plan-usage-chart-axis" aria-hidden="true"><span>${escapeHtml(items[0].label)}</span><span>${escapeHtml(items[items.length - 1].label)}</span></span>
+      </div>`;
+
+  const legend = series.length > 1
+    ? `<ul class="plan-usage-chart-legend">${series.map((entry, index) => `<li><span class="plan-usage-chart-swatch" style="background:${seriesColor(index)}" aria-hidden="true"></span>${escapeHtml(entry.label)}</li>`).join('')}</ul>`
+    : '';
+  const table = `
+    <details class="plan-usage-chart-table">
+      <summary>As a table</summary>
+      <table class="plan-usage-detail-table">
+        <thead><tr><th scope="col"></th>${series.map((entry) => `<th scope="col">${escapeHtml(entry.label)}</th>`).join('')}${series.length > 1 ? '<th scope="col">Total</th>' : ''}</tr></thead>
+        <tbody>${items.filter((item) => totalOf(item) > 0).map((item) => `<tr><th scope="row">${escapeHtml(item.label)}</th>${series.map((entry) => `<td class="plan-usage-detail-value">${escapeHtml(amount(valueOf(item, entry.key)))}</td>`).join('')}${series.length > 1 ? `<td class="plan-usage-detail-value">${escapeHtml(amount(totalOf(item)))}</td>` : ''}</tr>`).join('')}</tbody>
+      </table>
+    </details>`;
+  return `
+    <figure class="plan-usage-chart plan-usage-chart-kind-${chart.kind === 'bars' ? 'bars' : 'columns'}" data-chart-id="${escapeHtml(chart.id)}" role="group" aria-label="${escapeHtml(chart.label)}">
+      <figcaption class="plan-usage-chart-head">
+        <span class="plan-usage-chart-label">${escapeHtml(chart.label)}</span>
+        ${chart.summary ? `<span class="plan-usage-chart-summary">${escapeHtml(chart.summary)}</span>` : ''}
+      </figcaption>
+      ${plot}
+      ${legend}
+      ${chart.note ? `<div class="plan-usage-meter-note">${escapeHtml(chart.note)}</div>` : ''}
+      ${table}
+    </figure>
+  `;
+}
+
 function renderDetailSection(section) {
   const rows = section.rows.map((row) => `
     <tr>
       <td class="plan-usage-detail-label">${escapeHtml(row.label)}${row.hint ? `<span class="plan-usage-detail-hint">${escapeHtml(row.hint)}</span>` : ''}</td>
-      <td class="plan-usage-detail-value">${escapeHtml(row.value)}</td>
+      <td class="plan-usage-detail-value">${String(row.value).split(' · ').map((part) => `<span class="plan-usage-detail-part">${escapeHtml(part)}</span>`).join(' · ')}</td>
     </tr>
   `).join('');
   return `
-    <details class="plan-usage-details" data-section-id="${escapeHtml(section.id)}">
+    <details class="plan-usage-details" data-section-id="${escapeHtml(section.id)}"${section.open ? ' open' : ''}>
       <summary>${escapeHtml(section.label)}</summary>
       ${section.note ? `<div class="plan-usage-detail-note">${escapeHtml(section.note)}</div>` : ''}
       <table class="plan-usage-detail-table"><tbody>${rows}</tbody></table>
@@ -205,9 +294,59 @@ function renderDetailSection(section) {
   `;
 }
 
-/** A line of text on the card itself, with an optional link behind it. */
-function renderNote(note) {
+/**
+ * Hours of the day the card note names, shown in the reader's own time zone.
+ * `utcRanges` are `[start, end)` whole hours in UTC; the day is `now`'s, so
+ * daylight-saving time is the reader's current one. "03:00–06:00 and
+ * 08:00–12:00 in your time zone" for `[[1, 4], [6, 10]]` read in Berlin in
+ * summer. `timeZone` is for tests; the browser leaves it to Intl.
+ */
+export function formatLocalHourRanges(utcRanges, { now = new Date(), timeZone = undefined } = {}) {
+  if (!Array.isArray(utcRanges) || !utcRanges.length) return null;
+  let formatter;
+  try {
+    formatter = new Intl.DateTimeFormat('en-GB', { hour: '2-digit', minute: '2-digit', hourCycle: 'h23', timeZone });
+  } catch {
+    return null;
+  }
+  const day = now instanceof Date && !Number.isNaN(now.getTime()) ? now : new Date();
+  const clock = (hour) => formatter.format(new Date(Date.UTC(day.getUTCFullYear(), day.getUTCMonth(), day.getUTCDate(), hour, 0, 0)));
+  const parts = [];
+  for (const range of utcRanges) {
+    if (!Array.isArray(range) || range.length !== 2) return null;
+    const start = Number(range[0]);
+    const end = Number(range[1]);
+    if (!Number.isInteger(start) || !Number.isInteger(end) || start < 0 || end > 24 || start >= end) return null;
+    parts.push(`${clock(start)}–${clock(end)}`);
+  }
+  const joined = parts.length > 1 ? `${parts.slice(0, -1).join(', ')} and ${parts[parts.length - 1]}` : parts[0];
+  return `${joined} in your time zone`;
+}
+
+/** The note's text with its UTC hours replaced by the reader's local ones, when it names any. */
+function noteTextForReader(note, { now, timeZone } = {}) {
   const text = String(note?.text ?? '').trim();
+  const utcText = String(note?.hours?.utcText ?? '').trim();
+  if (!text || !utcText || !text.includes(utcText)) return text;
+  const local = formatLocalHourRanges(note.hours.utcRanges, { now, timeZone });
+  return local ? text.split(utcText).join(local) : text;
+}
+
+/**
+ * A note that is a figure (buildCardNote's label and value): one row of the
+ * card's figures, the hint under the label, the whole sentence as its title.
+ */
+function renderFact(note) {
+  const hint = String(note?.hint ?? '').trim();
+  return `<div class="plan-usage-fact" data-note-id="${escapeHtml(note?.id ?? '')}" title="${escapeHtml(String(note?.text ?? '').trim())}">`
+    + `<dt>${escapeHtml(note.label)}${hint ? `<span class="plan-usage-fact-hint">${escapeHtml(hint)}</span>` : ''}</dt>`
+    + `<dd>${escapeHtml(note.value)}</dd></div>`;
+}
+
+const isFactNote = (note) => Boolean(String(note?.label ?? '').trim() && String(note?.value ?? '').trim());
+
+function renderNote(note, { now, timeZone } = {}) {
+  const text = noteTextForReader(note, { now, timeZone });
   if (!text) return '';
   const url = String(note?.link?.url ?? '').trim();
   const label = String(note?.link?.label ?? '').trim();
@@ -215,7 +354,11 @@ function renderNote(note) {
   const link = label && /^https:\/\//i.test(url)
     ? ` <a class="plan-usage-link" href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`
     : '';
-  return `<div class="plan-usage-detail-note plan-usage-note" data-note-id="${escapeHtml(note?.id ?? '')}">${escapeHtml(text)}${link}</div>`;
+  // The UTC wording stays on the element for a reader who wants it.
+  const utcTitle = note?.hours?.utcText && text !== String(note.text ?? '').trim()
+    ? ` title="${escapeHtml(String(note.text).trim())}"`
+    : '';
+  return `<div class="plan-usage-detail-note plan-usage-note" data-note-id="${escapeHtml(note?.id ?? '')}"${utcTitle}>${escapeHtml(text)}${link}</div>`;
 }
 
 /**
@@ -240,10 +383,18 @@ function renderAccountLine(account) {
   return `<span class="plan-usage-account">${parts.map(escapeHtml).join(' · ')}</span>`;
 }
 
-function renderCard(card, now, { active = true } = {}) {
+function renderCard(card, now, { active = true, timeZone = undefined } = {}) {
   const meters = Array.isArray(card.meters) ? card.meters : [];
+  const charts = Array.isArray(card.charts) ? card.charts.filter(Boolean) : [];
   const details = Array.isArray(card.details) ? card.details : [];
-  const notes = Array.isArray(card.notes) ? card.notes.filter(Boolean) : [];
+  const allNotes = Array.isArray(card.notes) ? card.notes.filter(Boolean) : [];
+  // Figures go in one list under the bars; sentences stay notes, and on a
+  // card with figures they come last, after the tables, so the numbers read
+  // first.
+  const facts = allNotes.filter(isFactNote);
+  const notes = allNotes.filter((note) => !isFactNote(note));
+  const notesHtml = notes.map((note) => renderNote(note, { now, timeZone })).join('');
+  const detailsHtml = details.map(renderDetailSection).join('');
   const links = Array.isArray(card.links) ? card.links : [];
 
   const statusBadge = STATUS_BADGES[card.status];
@@ -281,8 +432,9 @@ function renderCard(card, now, { active = true } = {}) {
       </header>
       ${card.message ? `<div class="plan-usage-message">${escapeHtml(card.message)}</div>` : ''}
       ${metersHtml}
-      ${notes.map(renderNote).join('')}
-      ${details.map(renderDetailSection).join('')}
+      ${facts.length ? `<dl class="plan-usage-facts">${facts.map(renderFact).join('')}</dl>` : ''}
+      ${charts.map(renderChart).join('')}
+      ${facts.length ? `${detailsHtml}${notesHtml}` : `${notesHtml}${detailsHtml}`}
       <div class="plan-usage-card-foot">
         ${capturedLabel ? `<span class="plan-usage-captured">${capturedLabel}</span>` : ''}
         ${links.map((link) => `<a class="plan-usage-link" href="${escapeHtml(link.url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(link.label)}</a>`).join('')}
@@ -306,13 +458,13 @@ function renderTab(card, activeProvider) {
  *   tab when that provider has a card
  * @returns {string} modal body HTML, or '' when there is nothing to render
  */
-export function renderPlanUsageHtml(report, { now = new Date(), activeProvider = '' } = {}) {
+export function renderPlanUsageHtml(report, { now = new Date(), activeProvider = '', timeZone = undefined } = {}) {
   const providers = Array.isArray(report?.providers) ? report.providers.filter(Boolean) : [];
   if (!providers.length) return '';
   const active = resolveActiveUsageProvider(providers, activeProvider);
   const tabs = providers.map((card) => renderTab(card, active)).join('');
   const cards = providers
-    .map((card) => renderCard(card, now, { active: normalizeUsageProvider(card.provider) === active }))
+    .map((card) => renderCard(card, now, { active: normalizeUsageProvider(card.provider) === active, timeZone }))
     .join('');
   return `<div class="plan-usage"><div class="plan-usage-tab-strip" role="tablist" aria-label="Usage providers">${tabs}</div>${cards}</div>`;
 }

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

@@ -1,7 +1,7 @@
 // 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
+// OpenAI, Claude, Claude Cloud, Cursor, Grok and DeepSeek 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
@@ -23,6 +23,7 @@ const SETTINGS_PROVIDERS = Object.freeze([
   ['claudeCloud', 'claude-cloud'],
   ['cursor', 'cursor'],
   ['grok', 'grok'],
+  ['deepseek', 'deepseek'],
 ]);
 
 /** Payloads whose absence means "could not be loaded" rather than "not offered". */
@@ -35,6 +36,7 @@ const REQUIRED_INPUTS = Object.freeze(['openai', 'claude', 'cursor', 'grok', 'ca
  * @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.deepseek] null on a relay without DeepSeek: not offered, not unknown
  * @param {object|null} [input.catalog]
  * @returns {{ known: boolean, anyReady: boolean, ready: string[], copilot: 'ready' | 'unknown' }}
  */
@@ -69,6 +71,7 @@ const inputs = {
   claudeCloud: undefined,
   cursor: undefined,
   grok: undefined,
+  deepseek: undefined,
   catalog: undefined,
 };
 let current = resolveProviderReadiness(inputs);

package/server/public/app/relay-error-ctas.mjs

@@ -36,6 +36,14 @@ const RELAY_ERROR_CTAS = Object.freeze({
   'claude-account-on-hold': CLAUDE_SETTINGS_CTA,
   'claude-verification-required': CLAUDE_SETTINGS_CTA,
   'claude-account-access': CLAUDE_SETTINGS_CTA,
+  // A DeepSeek turn refused for its key or its balance (deepseek-claude-backend.mjs).
+  'deepseek-api-key': Object.freeze([
+    Object.freeze({ action: 'open-deepseek-settings', label: 'DeepSeek settings' }),
+  ]),
+  'deepseek-balance': Object.freeze([
+    Object.freeze({ action: 'open-deepseek-top-up', label: 'Top up DeepSeek' }),
+    Object.freeze({ action: 'open-deepseek-settings', label: 'DeepSeek settings' }),
+  ]),
 });
 
 const STABLE_CODE_PATTERN = /error code:\s*relay\.([a-z0-9-]+)/i;

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

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

@@ -0,0 +1,119 @@
+// Relay schedules in the browser: the "scheduled" marker on a conversation's
+// sidebar row and the header's "N scheduled" chip with its list and Cancel
+// buttons.
+//
+// DOM-free on purpose, like relay-event-view.mjs: the callers own the
+// elements, this module owns the decisions and the markup.
+//
+// The interval words mirror shared/relay-schedules.mjs, which the browser
+// cannot import (only server/public is served); relay-schedule-view.test.mjs
+// holds the two together.
+
+export const RELAY_SCHEDULE_SOCKET_EVENT = 'relay_schedules';
+export const RELAY_SCHEDULE_MESSAGE_KIND = 'relay-schedule';
+
+function defaultEscape(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function defaultFormatTime(iso) {
+  const at = new Date(iso);
+  if (!Number.isFinite(at.getTime())) return '';
+  const sameDay = new Date().toDateString() === at.toDateString();
+  return at.toLocaleString([], sameDay
+    ? { hour: '2-digit', minute: '2-digit' }
+    : { weekday: 'short', day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
+}
+
+function activeList(schedules) {
+  return (Array.isArray(schedules) ? schedules : []).filter((schedule) => schedule && schedule.id && !schedule.endedAt);
+}
+
+/** "every 30 min", "every 2 h", "every day", "every 7 days". */
+export function describeScheduleInterval(everyMinutes) {
+  const minutes = Number(everyMinutes);
+  if (!(minutes > 0)) return '';
+  if (minutes % 1440 === 0) return minutes === 1440 ? 'every day' : `every ${minutes / 1440} days`;
+  if (minutes % 60 === 0) return minutes === 60 ? 'every hour' : `every ${minutes / 60} h`;
+  return `every ${minutes} min`;
+}
+
+/** The schedules that fire into a conversation. */
+export function schedulesInto(schedules, conversationId) {
+  const id = String(conversationId || '').trim();
+  if (!id) return [];
+  return activeList(schedules).filter((schedule) => schedule.session?.id === id);
+}
+
+/** The schedules that fire into a conversation or that it set for another. */
+export function schedulesOf(schedules, conversationId) {
+  const id = String(conversationId || '').trim();
+  if (!id) return [];
+  return activeList(schedules).filter((schedule) => schedule.session?.id === id || schedule.setBy?.id === id);
+}
+
+/** "every 30 min · next 10:30", or "once · 06:30". */
+export function describeScheduleWhen(schedule, { formatTime = defaultFormatTime } = {}) {
+  const next = schedule?.nextFireAt ? formatTime(schedule.nextFireAt) : '';
+  const every = schedule?.once ? '' : describeScheduleInterval(schedule?.everyMinutes);
+  if (every) return next ? `${every} · next ${next}` : every;
+  return next ? `once · ${next}` : 'once';
+}
+
+/** The earliest next time among the schedules, or null. */
+export function nextScheduledAt(schedules) {
+  const times = activeList(schedules).map((schedule) => Date.parse(schedule.nextFireAt || '')).filter(Number.isFinite);
+  return times.length ? new Date(Math.min(...times)).toISOString() : null;
+}
+
+export function scheduleChipText(schedules) {
+  const count = activeList(schedules).length;
+  return count ? `${count} scheduled` : '';
+}
+
+function conversationTitle(conversations, id, fallback = '') {
+  const title = String(conversations?.[id]?.title || fallback || '').trim();
+  return title || `session ${String(id).slice(0, 8)}`;
+}
+
+/** The sidebar's marker for a conversation a schedule fires into, or ''. */
+export function renderScheduledBadgeHtml(schedules, conversationId, { escHtml = defaultEscape, formatTime = defaultFormatTime } = {}) {
+  const into = schedulesInto(schedules, conversationId);
+  if (!into.length) return '';
+  const next = nextScheduledAt(into);
+  const hint = `${into.length} schedule${into.length === 1 ? '' : 's'}${next ? ` · next ${formatTime(next)}` : ''}`;
+  return `<span class="conv-scheduled-badge" title="${escHtml(hint)}">scheduled</span>`;
+}
+
+/**
+ * The chip's list for the conversation on screen: one row per schedule, what
+ * it is called and sends, where it goes or who set it, when it fires next,
+ * and its Cancel button.
+ */
+export function renderSchedulePanelHtml(schedules, conversationId, { conversations = null, escHtml = defaultEscape, formatTime = defaultFormatTime } = {}) {
+  const id = String(conversationId || '').trim();
+  const rows = schedulesOf(schedules, id).map((schedule) => {
+    const name = String(schedule.title || '').trim() || String(schedule.text || '').trim().split(/\r?\n/)[0] || schedule.id;
+    const where = schedule.session?.id !== id
+      ? `for ${conversationTitle(conversations, schedule.session?.id, schedule.session?.title)}`
+      : (schedule.setBy?.id ? `set by ${conversationTitle(conversations, schedule.setBy.id, schedule.setBy.title)}` : '');
+    // Held: its setter's agent has prompted other agents as often as it may
+    // before you write in that conversation.
+    const held = schedule.heldForApproval
+      ? `waiting until you write in ${conversationTitle(conversations, schedule.setBy?.id, schedule.setBy?.title)}`
+      : '';
+    const details = [held || describeScheduleWhen(schedule, { formatTime }), where, schedule.skippedCount ? `${schedule.skippedCount} skipped` : '']
+      .filter(Boolean).join(' · ');
+    return '<li class="relay-watch-item relay-schedule-item">'
+      + `<span class="relay-watch-what" title="${escHtml(schedule.text || '')}">${escHtml(name)}</span>`
+      + `<span class="relay-watch-events">${escHtml(details)}</span>`
+      + `<button type="button" class="relay-schedule-cancel" data-schedule-id="${escHtml(schedule.id)}">Cancel</button>`
+      + '</li>';
+  }).join('');
+  return `<ul class="relay-watch-list">${rows}</ul>`;
+}