@oar-sh/oar 0.9.3 → 0.9.4

package/server/public/app/host-suspend-ui.js

@@ -0,0 +1,272 @@
+// Pending host suspend / relay restart, as every device sees it: an app-wide
+// banner with a countdown and Cancel, plus the chat-actions menu labels.
+// State arrives over the socket (`host_suspend_state`, `relay_shutdown_state`)
+// and is also re-read from GET /api/status polls, so a client that missed an
+// event still catches up. The banner ignores the per-device "Show Suspend
+// host action" setting on purpose: a device with the action hidden must still
+// be able to see and cancel a queued suspend.
+
+import { escHtml, showTransientRelayNotice } from './store.js';
+import { cancelHostSuspend, cancelRelayRestart } from './api-client.js';
+
+const BANNER_ID = 'pending-action-banner';
+const SUSPEND_MENU_ID = 'chat-menu-suspend-host';
+const RESTART_MENU_ID = 'chat-menu-restart-relay';
+const SUSPEND_MENU_LABEL = '💤 Suspend host';
+const SUSPEND_MENU_PENDING_LABEL = '💤 Suspend pending…';
+const RESTART_MENU_LABEL = '🌄 Restart web relay';
+const RESTART_MENU_PENDING_LABEL = '🌄 Restart pending…';
+
+let hostSuspendState = null;
+let relayShutdownState = null;
+let countdownTimer = null;
+let cancelInFlight = false;
+
+export function getHostSuspendState() {
+  return hostSuspendState;
+}
+
+export function getRelayShutdownState() {
+  return relayShutdownState;
+}
+
+export function isHostSuspendPending(state = hostSuspendState) {
+  const status = String(state?.status || '').trim();
+  return status === 'queued' || status === 'countdown' || status === 'suspending';
+}
+
+export function isRelayShutdownPending(state = relayShutdownState) {
+  const status = String(state?.status || '').trim();
+  return status === 'queued' || status === 'shutting_down';
+}
+
+/** "0:27" style remaining time from a fireAt ISO string; null when not counting. */
+export function formatCountdown(fireAt, nowMs = Date.now()) {
+  const target = Date.parse(String(fireAt || ''));
+  if (!Number.isFinite(target)) return null;
+  const remaining = Math.max(0, Math.ceil((target - nowMs) / 1000));
+  const minutes = Math.floor(remaining / 60);
+  const seconds = remaining % 60;
+  return `${minutes}:${String(seconds).padStart(2, '0')}`;
+}
+
+/** One human line per blocker, e.g. "sidebar polish — 2 background agents: …". */
+export function describeHostSuspendBlocker(blocker) {
+  if (!blocker || typeof blocker !== 'object') return '';
+  const title = String(blocker.title || '').trim();
+  const detail = String(blocker.detail || '').trim();
+  switch (String(blocker.kind || '')) {
+    case 'turn':
+      return `${title || 'a session'} — ${detail || 'turn running'}`;
+    case 'background':
+      return `${title || 'a session'} — ${detail || 'background agents running'}`;
+    case 'ci':
+      return `CI ${title ? `in ${title}` : ''} — ${detail || 'runs open'}`.replace(/\s+—/, ' —');
+    case 'ci-unknown':
+      return detail || `CI state of ${title || 'a repository'} unknown`;
+    case 'ci-checking':
+      return detail || 'Checking CI state';
+    case 'error':
+      return detail || 'Activity check failed';
+    default:
+      return [title, detail].filter(Boolean).join(' — ');
+  }
+}
+
+/** Short banner summary: first two blockers, "+N more". */
+export function summarizeHostSuspendBlockers(blockers) {
+  const list = (Array.isArray(blockers) ? blockers : []).map(describeHostSuspendBlocker).filter(Boolean);
+  if (!list.length) return '';
+  const shown = list.slice(0, 2);
+  const rest = list.length - shown.length;
+  return shown.join('; ') + (rest > 0 ? `; +${rest} more` : '');
+}
+
+export function hostSuspendBannerText(state, nowMs = Date.now()) {
+  if (!isHostSuspendPending(state)) return '';
+  const status = String(state.status || '');
+  if (status === 'suspending') return '💤 Suspending host now…';
+  if (status === 'countdown') {
+    const countdown = formatCountdown(state.fireAt, nowMs);
+    return countdown ? `💤 Everything is idle — suspending host in ${countdown}` : '💤 Everything is idle — suspending host shortly';
+  }
+  const summary = summarizeHostSuspendBlockers(state.blockers);
+  return summary
+    ? `💤 Suspend queued — waiting for: ${summary}`
+    : '💤 Suspend queued — waiting for running agents to finish';
+}
+
+export function relayShutdownBannerText(state) {
+  if (!isRelayShutdownPending(state)) return '';
+  const action = state.action === 'restart' || state.restart ? 'restart' : 'shutdown';
+  const icon = action === 'restart' ? '🌄' : '⏻';
+  if (String(state.status || '') === 'shutting_down') {
+    return `${icon} Relay ${action === 'restart' ? 'restarting' : 'shutting down'} now…`;
+  }
+  const queue = state.queue || {};
+  const turns = Number(queue.pendingCount || 0) + Number(queue.processingCount || 0) + Number(queue.parkedCount || 0);
+  const waiting = turns > 0 ? `waiting for ${turns} turn${turns === 1 ? '' : 's'} to finish` : 'queue is idle, going down now';
+  return `${icon} Relay ${action} queued — ${waiting}`;
+}
+
+function ensureBanner() {
+  let banner = document.getElementById(BANNER_ID);
+  if (banner) return banner;
+  banner = document.createElement('div');
+  banner.id = BANNER_ID;
+  banner.setAttribute('role', 'status');
+  banner.setAttribute('aria-live', 'polite');
+  document.body?.appendChild(banner);
+  return banner;
+}
+
+function bannerRow({ text, cancelLabel, onCancel, key }) {
+  const row = document.createElement('div');
+  row.className = 'pending-action-row';
+  row.dataset.pending = key;
+  const label = document.createElement('span');
+  label.className = 'pending-action-text';
+  label.textContent = text;
+  row.appendChild(label);
+  if (cancelLabel && typeof onCancel === 'function') {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'relay-toast-action pending-action-cancel';
+    btn.textContent = cancelLabel;
+    btn.disabled = cancelInFlight;
+    btn.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      void onCancel();
+    });
+    row.appendChild(btn);
+  }
+  return row;
+}
+
+async function runCancelHostSuspend() {
+  if (cancelInFlight) return;
+  cancelInFlight = true;
+  renderPendingActionBanner();
+  try {
+    const result = await cancelHostSuspend();
+    if (!result?.ok) {
+      showTransientRelayNotice('Failed to cancel the queued suspend.', 5000);
+      return;
+    }
+    if (result.state) applyHostSuspendState(result.state);
+    showTransientRelayNotice(result.cancelled ? 'Queued host suspend cancelled.' : 'No host suspend was pending.', 4000);
+  } finally {
+    cancelInFlight = false;
+    renderPendingActionBanner();
+  }
+}
+
+async function runCancelRelayShutdown() {
+  if (cancelInFlight) return;
+  cancelInFlight = true;
+  renderPendingActionBanner();
+  try {
+    const result = await cancelRelayRestart();
+    if (!result?.ok) {
+      showTransientRelayNotice('Failed to cancel the queued relay restart.', 5000);
+      return;
+    }
+    applyRelayShutdownState(result);
+    showTransientRelayNotice(result.cancelled ? 'Queued relay restart cancelled.' : 'No relay restart was pending.', 4000);
+  } finally {
+    cancelInFlight = false;
+    renderPendingActionBanner();
+  }
+}
+
+function syncCountdownTimer() {
+  const needsTicker = isHostSuspendPending() && String(hostSuspendState?.status || '') === 'countdown' && hostSuspendState?.fireAt;
+  if (needsTicker && !countdownTimer) {
+    countdownTimer = setInterval(() => renderPendingActionBanner(), 1000);
+  } else if (!needsTicker && countdownTimer) {
+    clearInterval(countdownTimer);
+    countdownTimer = null;
+  }
+}
+
+export function renderPendingActionBanner() {
+  if (typeof document === 'undefined') return;
+  const rows = [];
+  if (isHostSuspendPending()) {
+    rows.push(bannerRow({
+      key: 'host-suspend',
+      text: hostSuspendBannerText(hostSuspendState),
+      cancelLabel: String(hostSuspendState?.status || '') === 'suspending' ? '' : 'Cancel',
+      onCancel: runCancelHostSuspend,
+    }));
+  }
+  if (isRelayShutdownPending()) {
+    const restarting = String(relayShutdownState?.status || '') === 'shutting_down';
+    rows.push(bannerRow({
+      key: 'relay-shutdown',
+      text: relayShutdownBannerText(relayShutdownState),
+      cancelLabel: restarting ? '' : 'Cancel',
+      onCancel: runCancelRelayShutdown,
+    }));
+  }
+  const banner = document.getElementById(BANNER_ID) || (rows.length ? ensureBanner() : null);
+  if (!banner) return;
+  banner.replaceChildren(...rows);
+  banner.classList.toggle('visible', rows.length > 0);
+  banner.hidden = rows.length === 0;
+  syncMenuLabels();
+  syncCountdownTimer();
+}
+
+function syncMenuLabels() {
+  const suspendBtn = document.getElementById(SUSPEND_MENU_ID);
+  if (suspendBtn) suspendBtn.textContent = isHostSuspendPending() ? SUSPEND_MENU_PENDING_LABEL : SUSPEND_MENU_LABEL;
+  const restartBtn = document.getElementById(RESTART_MENU_ID);
+  if (restartBtn) restartBtn.textContent = isRelayShutdownPending() ? RESTART_MENU_PENDING_LABEL : RESTART_MENU_LABEL;
+}
+
+export function applyHostSuspendState(state) {
+  const previous = hostSuspendState;
+  hostSuspendState = state && typeof state === 'object' ? state : null;
+  if (isHostSuspendPending(previous) && !isHostSuspendPending(hostSuspendState) && hostSuspendState?.lastError) {
+    showTransientRelayNotice(`Host suspend failed: ${hostSuspendState.lastError}`, 8000);
+  }
+  renderPendingActionBanner();
+}
+
+export function applyRelayShutdownState(state) {
+  relayShutdownState = state && typeof state === 'object' ? state : null;
+  renderPendingActionBanner();
+}
+
+/** GET /api/status carries both states; the poll keeps late clients honest. */
+export function applyPendingActionsFromStatus(status) {
+  if (!status || typeof status !== 'object') return;
+  if ('hostSuspend' in status) hostSuspendState = status.hostSuspend || null;
+  if ('relayShutdown' in status) {
+    const next = status.relayShutdown ? { ...status.relayShutdown } : null;
+    if (next && !next.queue) {
+      next.queue = {
+        pendingCount: Number(status.pendingCount || 0),
+        processingCount: Number(status.processingCount || 0),
+        parkedCount: Number(status.parkedCount || 0),
+      };
+    }
+    relayShutdownState = next;
+  }
+  renderPendingActionBanner();
+}
+
+export function initHostSuspendUi() {
+  renderPendingActionBanner();
+}
+
+export function __resetHostSuspendUiForTests() {
+  hostSuspendState = null;
+  relayShutdownState = null;
+  cancelInFlight = false;
+  if (countdownTimer) { clearInterval(countdownTimer); countdownTimer = null; }
+  document.getElementById(BANNER_ID)?.remove();
+  syncMenuLabels();
+}

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

@@ -58,6 +58,7 @@ import {
   conversationProviderIndicatorLabel,
 } from './conversation-provider-indicator.mjs';
 import { leaveStatusView } from './status-view.mjs';
+import { renderConversationOriginMarkerHtml } from './remote-relay-origin-view.mjs';
 import {
   normalizeConversationFilter,
   filterConversations,
@@ -349,10 +350,12 @@ export function renderConvList() {
     const providerIndicatorHtml = providerIndicatorLabel
       ? `<span class="conv-provider-indicator"${providerIndicatorKey ? ` data-provider="${providerIndicatorKey}"` : ''}>${providerIndicatorLabel}</span>`
       : '';
+    // "↗ win-test": another relay's agent created this conversation.
+    const originMarkerHtml = renderConversationOriginMarkerHtml(c);
     return `
     <div class="conv-item worker-ui-${view.visualState}${c.id === currentConvId ? ' active' : ''}" onclick="openConversation('${c.id}')">
       <div class="conv-title">${escHtml(c.title)}${processingDots ? `<span class="conv-processing-dots">${escHtml(` ${processingDots}`)}</span>` : ''}${c.archived ? ' <span style="font-size:0.68rem;color:var(--muted)">(archived)</span>' : ''}${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>${providerIndicatorHtml}</div>
+      <div class="conv-meta"><span class="conv-meta-primary">${fmtDate(c.updatedAt)} · ${c.messageCount} msg${c.messageCount !== 1 ? 's' : ''}</span>${originMarkerHtml}${providerIndicatorHtml}</div>
       <button class="conv-delete" onclick="deleteConv(event,'${c.id}')" title="Delete">🗑</button>
     </div>`;
   }).join('')}${footerHtml}`;

package/server/public/app/mention-autocomplete.mjs

@@ -0,0 +1,298 @@
+// The composer's @mention popup for remote relays: typing "@" at the start of a
+// word lists the relays this relay is paired with, and picking one inserts
+// "@name " — the mention that unlocks that relay for the conversation's agent
+// (docs/plans/2026-09-27-remote-relays.md, decisions 9 and 10).
+//
+// A sibling of slash-autocomplete.mjs with the same key contract: nothing is
+// highlighted by default, so plain Enter keeps its newline and Ctrl/Cmd+Enter
+// keeps sending; only an arrow-selected row makes Enter accept; Tab accepts
+// the highlighted row or the top one. The popup closes as soon as the typed
+// token matches no relay — "@file:" and friends are never touched — and it
+// never opens while the slash menu is open, so exactly one popup owns the keys.
+
+import { mentionQueryAt, mentionTokenEnd } from './remote-relay-shared.mjs';
+import {
+  ensureRemoteRelaysLoaded,
+  getRemoteRelays,
+  getRemoteRelaysSnapshot,
+  remoteRelayStatus,
+  subscribeRemoteRelays,
+} from './remote-relays-store.mjs';
+import { isSlashAutocompleteOpen } from './slash-autocomplete.mjs';
+
+const POPUP_ID = 'mention-autocomplete-popup';
+const OPTION_ID_PREFIX = 'mention-autocomplete-option-';
+
+let openState = null; // { items, start } while the popup is visible
+let selectedIndex = -1;
+// The composer that typed "@" before the list was loaded; the load re-runs it.
+let pendingInput = null;
+
+function popupEl() {
+  return document.getElementById(POPUP_ID);
+}
+
+function composerInput() {
+  return document.getElementById('msg-input');
+}
+
+function hostOf(relay) {
+  const explicit = String(relay?.host || '').trim().toLowerCase();
+  if (explicit) return explicit;
+  try {
+    return new URL(String(relay?.url || '')).hostname.toLowerCase();
+  } catch {
+    return '';
+  }
+}
+
+/**
+ * The popup rows for `query` (the text after "@", lowercase): relays whose name
+ * or URL host starts with it. `insert` is what a pick writes: "@name", or
+ * "@host" when the name is empty or shared by two relays (a shared name is
+ * ambiguous and would unlock nothing).
+ */
+export function mentionCandidates(relays, query = '') {
+  const list = Array.isArray(relays) ? relays : [];
+  const wanted = String(query || '').trim().toLowerCase();
+  const nameCounts = new Map();
+  for (const relay of list) {
+    const key = String(relay?.name || '').trim().toLowerCase();
+    if (key) nameCounts.set(key, (nameCounts.get(key) || 0) + 1);
+  }
+  const items = [];
+  for (const relay of list) {
+    const id = String(relay?.id || '').trim();
+    const name = String(relay?.name || '').trim();
+    const host = hostOf(relay);
+    if (!id || (!name && !host)) continue;
+    if (wanted && !name.toLowerCase().startsWith(wanted) && !host.startsWith(wanted)) continue;
+    const ambiguous = !!name && nameCounts.get(name.toLowerCase()) > 1;
+    const insertName = (!name || ambiguous) && host ? host : name;
+    items.push({
+      id,
+      name: name || host,
+      host,
+      status: remoteRelayStatus(relay),
+      insert: `@${insertName}`,
+    });
+  }
+  return items;
+}
+
+export function isMentionAutocompleteOpen() {
+  return openState !== null;
+}
+
+function syncInputAria(input) {
+  const target = input || composerInput();
+  if (!target) return;
+  if (!openState) {
+    target.removeAttribute('aria-activedescendant');
+    target.setAttribute('aria-expanded', 'false');
+    return;
+  }
+  target.setAttribute('aria-controls', POPUP_ID);
+  target.setAttribute('aria-expanded', 'true');
+  if (selectedIndex >= 0) target.setAttribute('aria-activedescendant', `${OPTION_ID_PREFIX}${selectedIndex}`);
+  else target.removeAttribute('aria-activedescendant');
+}
+
+export function closeMentionAutocomplete() {
+  const wasOpen = openState !== null;
+  openState = null;
+  selectedIndex = -1;
+  const popup = popupEl();
+  if (popup) {
+    popup.classList.remove('visible');
+    popup.setAttribute('aria-hidden', 'true');
+    popup.textContent = '';
+  }
+  if (wasOpen) syncInputAria(null);
+}
+
+function renderPopup(input) {
+  const popup = popupEl();
+  if (!popup || !openState) return;
+  popup.textContent = '';
+  openState.items.forEach((item, index) => {
+    const row = document.createElement('div');
+    row.className = 'slash-item mention-item';
+    if (index === selectedIndex) row.classList.add('slash-item-selected');
+    row.id = `${OPTION_ID_PREFIX}${index}`;
+    row.setAttribute('role', 'option');
+    row.setAttribute('aria-selected', index === selectedIndex ? 'true' : 'false');
+    row.dataset.index = String(index);
+    row.dataset.relayId = item.id;
+
+    const dot = document.createElement('span');
+    dot.className = 'remote-relay-dot';
+    dot.dataset.status = item.status;
+    dot.setAttribute('aria-hidden', 'true');
+    row.appendChild(dot);
+
+    // textContent throughout: names come from other relays.
+    const nameEl = document.createElement('span');
+    nameEl.className = 'slash-item-name';
+    nameEl.textContent = item.name;
+    row.appendChild(nameEl);
+
+    if (item.host && item.host !== item.name.toLowerCase()) {
+      const hostEl = document.createElement('span');
+      hostEl.className = 'slash-item-desc';
+      hostEl.textContent = item.host;
+      row.appendChild(hostEl);
+    }
+    popup.appendChild(row);
+  });
+  popup.classList.add('visible');
+  popup.setAttribute('aria-hidden', 'false');
+  syncInputAria(input);
+}
+
+/**
+ * Recomputes the popup for the composer's text and caret. The composer calls
+ * this from its input handler, after the slash menu had its turn.
+ */
+export function updateMentionAutocomplete(input) {
+  if (!input) return;
+  if (isSlashAutocompleteOpen()) {
+    pendingInput = null;
+    closeMentionAutocomplete();
+    return;
+  }
+  const text = String(input.value || '');
+  const caret = Number.isFinite(input.selectionStart) ? input.selectionStart : text.length;
+  const selectionEnd = Number.isFinite(input.selectionEnd) ? input.selectionEnd : caret;
+  const query = selectionEnd === caret ? mentionQueryAt(text, caret) : null;
+  if (!query) {
+    pendingInput = null;
+    closeMentionAutocomplete();
+    return;
+  }
+  if (!getRemoteRelaysSnapshot()) {
+    // First "@" of the page: fetch the list, and come back once it is here.
+    pendingInput = input;
+    closeMentionAutocomplete();
+    void ensureRemoteRelaysLoaded();
+    return;
+  }
+  pendingInput = null;
+  const items = mentionCandidates(getRemoteRelays(), query.query);
+  if (!items.length) {
+    closeMentionAutocomplete();
+    return;
+  }
+  // A rebuild replaces the rows, so a highlight only survives on the same relay.
+  const previous = selectedIndex >= 0 ? openState?.items?.[selectedIndex] : null;
+  openState = { items, start: query.start };
+  selectedIndex = previous ? items.findIndex((item) => item.id === previous.id) : -1;
+  renderPopup(input);
+}
+
+function acceptItem(input, index) {
+  const item = openState?.items?.[index];
+  if (!item || !input) return false;
+  const value = String(input.value || '');
+  const caret = Number.isFinite(input.selectionStart) ? input.selectionStart : value.length;
+  // Re-read the token at the caret: the caret may have moved since the popup
+  // was drawn, and a stale range must never overwrite unrelated text.
+  const query = mentionQueryAt(value, caret);
+  if (!query || query.start !== openState.start) {
+    closeMentionAutocomplete();
+    return false;
+  }
+  const end = mentionTokenEnd(value, caret);
+  const after = value.slice(end);
+  const inserted = /^\s/.test(after) ? item.insert : `${item.insert} `;
+  input.value = `${value.slice(0, query.start)}${inserted}${after}`;
+  const nextCaret = query.start + item.insert.length + 1;
+  input.selectionStart = nextCaret;
+  input.selectionEnd = nextCaret;
+  closeMentionAutocomplete();
+  input.focus();
+  // Re-runs the composer's input pipeline (autoResize, draft sync, the menus).
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+  return true;
+}
+
+/**
+ * Offers a keydown to the popup. Returns true when consumed; the composer's
+ * handleKey calls this after the slash menu's handler and stops on true.
+ */
+export function handleMentionAutocompleteKey(event, input) {
+  if (!openState || event?.isComposing) return false;
+
+  if (event.key === 'Escape') {
+    closeMentionAutocomplete();
+    event.preventDefault();
+    // Swallowed so document-level Escape handlers (modals, pickers) stay put.
+    event.stopPropagation();
+    return true;
+  }
+
+  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    const count = openState.items.length;
+    if (!count) return false;
+    if (event.key === 'ArrowDown') {
+      selectedIndex = selectedIndex >= count - 1 ? 0 : selectedIndex + 1;
+    } else {
+      // ↑ from the top row returns to "nothing highlighted", so plain Enter's
+      // newline stays reachable without Escape.
+      selectedIndex = selectedIndex <= 0 ? -1 : selectedIndex - 1;
+    }
+    renderPopup(input);
+    event.preventDefault();
+    return true;
+  }
+
+  if (event.key === 'Tab' && !event.ctrlKey && !event.metaKey && !event.altKey) {
+    if (!openState.items.length) return false;
+    // A pick the caret no longer supports closes the popup and lets the key through.
+    if (!acceptItem(input, selectedIndex >= 0 ? selectedIndex : 0)) return false;
+    event.preventDefault();
+    return true;
+  }
+
+  if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+    if (selectedIndex < 0) return false;
+    if (!acceptItem(input, selectedIndex)) return false;
+    event.preventDefault();
+    return true;
+  }
+
+  return false;
+}
+
+export function initMentionAutocomplete() {
+  const popup = popupEl();
+  if (!popup || popup.dataset.bound === '1') return;
+  popup.dataset.bound = '1';
+  // pointerdown, not click: the textarea loses focus on the tap, and a click
+  // handler would race the focus-driven close.
+  popup.addEventListener('pointerdown', (event) => {
+    const row = event.target?.closest?.('.mention-item');
+    if (!row || !openState) return;
+    event.preventDefault();
+    const input = composerInput();
+    if (input) acceptItem(input, Number(row.dataset.index));
+  });
+  document.addEventListener('pointerdown', (event) => {
+    if (!openState) return;
+    const target = event.target;
+    if (popupEl()?.contains(target)) return;
+    if (composerInput()?.contains?.(target)) return;
+    closeMentionAutocomplete();
+  });
+  // The list arrived (lazy load) or changed (remote_relays_updated): redraw
+  // for the composer that is waiting on it or showing it.
+  subscribeRemoteRelays(() => {
+    const waiting = pendingInput;
+    pendingInput = null;
+    if (waiting && document.activeElement === waiting) {
+      updateMentionAutocomplete(waiting);
+      return;
+    }
+    if (openState) updateMentionAutocomplete(composerInput());
+  });
+}

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

@@ -10,6 +10,7 @@ const PUSH_EVENT_CONTROL_IDS = {
   turnFailed: 'push-event-turn-failed-toggle',
   board: 'push-event-board-toggle',
   cliOffline: 'push-event-cli-offline-toggle',
+  hostSuspend: 'push-event-host-suspend-toggle',
 };
 
 let pushUpdateInFlight = false;

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

@@ -306,6 +306,8 @@ export function initFullscreenButton() {
 // The app name is stored on the relay and baked into /manifest.webmanifest by
 // the server, so every manifest fetch — including Android's out-of-page WebAPK
 // update checks — sees the same name. The client only edits the setting.
+// Settings shows it as "Relay name": it is also the name paired relays know
+// this one by (and mention it by).
 
 function paintPwaAppNameInput() {
   const input = document.getElementById('pwa-app-name-input');
@@ -330,16 +332,19 @@ export async function updatePwaAppName(rawValue) {
   const seq = ++pwaAppNameRequestSeq;
   const result = await updatePwaAppNameSetting(rawValue);
   if (!result || typeof result.appName !== 'string') {
-    alert('Failed to update the install app name.');
+    alert('Failed to update the relay name.');
     if (seq === pwaAppNameRequestSeq) paintPwaAppNameInput();
     return;
   }
   if (seq !== pwaAppNameRequestSeq) return; // a newer edit owns the UI now
   pwaAppName = result.appName;
   showTransientRelayNotice(result.appName
-    ? `Install app name updated to "${result.appName}".`
-    : 'Install app name reset to default.');
+    ? `Relay name updated to "${result.appName}".`
+    : 'Relay name reset to default.');
   paintPwaAppNameInput();
+  // The same name is what paired relays see (GET /api/relay/identity); the
+  // Relays tab re-reads it, including the host-name fallback for an empty one.
+  window.dispatchEvent(new CustomEvent('oar:relay-name-changed', { detail: { name: result.appName } }));
 }
 
 /**