@oddessentials/agent-guild 0.19.0 → 0.21.0

package/web/alerts.js

@@ -0,0 +1,155 @@
+// Sounds follow manager availability and new releases, never session activity.
+export const SOUNDS = {
+  stopped: 'sounds/manager-stopped.wav',
+  update: 'sounds/update-available.wav',
+};
+
+export const MAX_ALERT_AGE_MS = 10000;
+export const RECOVERY_WAIT_MS = 2000;
+export const HEALTH_TIMEOUT_MS = 1000;
+const PLAYED_KEY = 'agentGuild.playedSounds';
+
+/** Queue eligible pages, allowing another page to try if playback fails.
+ * Record only successful playback, under the same cross-tab lock. A bounded
+ * ledger prevents delayed tabs from replaying the event after lock release.
+ * Without shared coordination, stay silent rather than multiply alerts.
+ */
+export async function playOnce(key, play, { locks = globalThis.navigator?.locks, storage, fresh = () => true, related = [] } = {}) {
+  if (!locks) return false;
+  try {
+    storage ??= globalThis.localStorage;
+    if (!storage) return false;
+    return await locks.request('agentGuild.sound', async () => {
+      if (!fresh()) return false;
+      let played = JSON.parse(storage.getItem(PLAYED_KEY) || '[]');
+      if (!Array.isArray(played)) played = [];
+      if (played.includes(key) || related.some((other) => played.includes(other))) return false;
+      // Check storage is writable before making a sound.
+      storage.setItem(PLAYED_KEY, JSON.stringify(played.slice(-127)));
+      try {
+        if (await play() === false) return false;
+      } catch { return false; }
+      storage.setItem(PLAYED_KEY, JSON.stringify([...played.slice(-127), key]));
+      return true;
+    });
+  } catch { return false; }
+}
+
+/** A live connection rearms an availability alert for a later outage. */
+export async function rearmSound(key, { locks = globalThis.navigator?.locks, storage } = {}) {
+  if (!locks) return;
+  try {
+    storage ??= globalThis.localStorage;
+    if (!storage) return;
+    await locks.request('agentGuild.sound', () => {
+      const played = JSON.parse(storage.getItem(PLAYED_KEY) || '[]');
+      if (Array.isArray(played) && played.includes(key)) {
+        storage.setItem(PLAYED_KEY, JSON.stringify(played.filter((item) => item !== key)));
+      }
+    });
+  } catch { /* Optional sound coordination may be unavailable. */ }
+}
+
+/** Two bounded health checks, only after losing a previously live connection.
+ * Reconnect, shutdown and page departure cancel both requests and timers.
+ * The callback's freshness check also cancels playback waiting on another tab.
+ */
+export function managerLossWatcher({ reachable, unavailable, now = Date.now, setTimer = setTimeout, clearTimer = clearTimeout }) {
+  let live = false;
+  let pending = null;
+  const cancel = () => {
+    pending?.abort();
+    pending = null;
+    live = false;
+  };
+  const check = async (signal) => {
+    const request = new AbortController();
+    const abort = () => request.abort();
+    signal.addEventListener('abort', abort, { once: true });
+    const timer = setTimer(abort, HEALTH_TIMEOUT_MS);
+    try { return await reachable(request.signal); }
+    catch { return false; }
+    finally {
+      clearTimer(timer);
+      signal.removeEventListener('abort', abort);
+    }
+  };
+  const wait = (signal) => new Promise((resolve) => {
+    const done = () => {
+      clearTimer(timer);
+      signal.removeEventListener('abort', done);
+      resolve();
+    };
+    const timer = setTimer(done, RECOVERY_WAIT_MS);
+    signal.addEventListener('abort', done, { once: true });
+  });
+  return {
+    connected() { cancel(); live = true; },
+    cancel,
+    async disconnected() {
+      if (!live) return;
+      live = false;
+      const controller = new AbortController();
+      pending = controller;
+      const at = now();
+      const fresh = () => pending === controller && !controller.signal.aborted && now() - at <= MAX_ALERT_AGE_MS;
+      if (await check(controller.signal) || !fresh()) return;
+      await wait(controller.signal);
+      if (!fresh() || await check(controller.signal) || !fresh()) return;
+      unavailable(at, fresh);
+    },
+  };
+}
+
+/** Reconnecting establishes a baseline; only a live stop event alerts. */
+export function stopWatcher() {
+  let instance = null;
+  let stopped = false;
+  return {
+    connected(next) {
+      if (next !== instance) stopped = false;
+      instance = next;
+    },
+    stopped() {
+      if (!instance || stopped) return null;
+      stopped = true;
+      return instance;
+    },
+  };
+}
+
+// Published releases use semantic versions, including numerically ordered
+// prerelease identifiers. Build metadata does not affect precedence.
+function versionParts(value) {
+  return typeof value === 'string' ? value.match(/^(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?(?:\+[0-9A-Za-z.-]+)?$/) : null;
+}
+function newer(a, b) {
+  const av = versionParts(a), bv = versionParts(b);
+  for (let i = 1; i <= 3; i++) if (+av[i] !== +bv[i]) return +av[i] > +bv[i];
+  if (!av[4] || !bv[4]) return Boolean(bv[4]) && !av[4];
+  const ap = av[4].split('.'), bp = bv[4].split('.');
+  for (let i = 0; i < Math.max(ap.length, bp.length); i++) {
+    if (ap[i] === bp[i]) continue;
+    if (ap[i] === undefined || bp[i] === undefined) return bp[i] === undefined;
+    const an = /^\d+$/.test(ap[i]), bn = /^\d+$/.test(bp[i]);
+    if (an && bn) return +ap[i] > +bp[i];
+    if (an !== bn) return bn;
+    return ap[i] > bp[i];
+  }
+  return false;
+}
+
+/** The first successful version report is a baseline, even after nulls.
+ * Reconnect snapshots also advance it silently. Never alert on a rollback.
+ */
+export function updateWatcher() {
+  let seen = null;
+  return (upgrade, baseline = false) => {
+    const version = upgrade?.latestVersion;
+    if (!versionParts(version)) return false;
+    if (!seen) { seen = version; return false; }
+    if (!newer(version, seen)) return false;
+    seen = version;
+    return !baseline && upgrade.available === true;
+  };
+}

package/web/app.js

@@ -1,6 +1,8 @@
 // Agent Guild web page. A thin client of the session manager's local API:
 // it never owns sessions, so closing the page leaves them running.
 
+import { SOUNDS, MAX_ALERT_AGE_MS, playOnce, rearmSound, managerLossWatcher, stopWatcher, updateWatcher } from './alerts.js';
+
 const TOKEN_KEY = 'agentGuild.token';
 const CWD_KEY = 'agentGuild.cwd';
 const ACCOUNTS_KEY = 'agentGuild.accounts';
@@ -13,6 +15,7 @@ const CHANGELOG_SEEN_KEY = 'agentGuild.changelogSeen';
 const GITHUB_ACCOUNT_KEY = 'agentGuild.githubAccount';
 const CLONE_PARENT_KEY = 'agentGuild.cloneParent';
 const SESSION_ORDER_KEY = 'agentGuild.sessionOrder';
+const SOUND_KEY = 'agentGuild.sound';
 const RELEASES_URL = 'https://github.com/oddessentials/agent-guild/releases';
 const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
@@ -36,6 +39,8 @@ const state = {
   activeId: null,
   eventsSocket: null,
   eventsRetry: 0,
+  pageAway: false,
+  managerUnavailable: false,
   /** True while the events socket is open. */
   connected: false,
   /** The manager's own version check, from `hello` and `manager.upgrade`. */
@@ -206,6 +211,80 @@ function changeSkin(input) {
   revealChange(input.closest('label'), () => { document.documentElement.dataset.skin = skin; });
 }
 
+// ---- sound ----------------------------------------------------------------
+
+const audio = {};
+const stopAlert = stopWatcher();
+const updateAlert = updateWatcher();
+const managerLoss = managerLossWatcher({
+  async reachable(signal) {
+    const res = await fetch('/api/v1/health', { cache: 'no-store', signal });
+    const health = await res.json();
+    return res.ok && health.ok === true && health.name === 'agent-guild';
+  },
+  unavailable(at, fresh) {
+    state.managerUnavailable = true;
+    showManagerUnavailable();
+    alertSound('stopped', `unavailable.${state.managerInstance}`, at, fresh, [`stopped.${state.managerInstance}`]);
+  },
+});
+
+function soundOn() {
+  return load(SOUND_KEY) === 'on';
+}
+
+/** Keep the tiny clips ready while the manager can still serve them. */
+function prepareSounds() {
+  if (!soundOn()) return;
+  for (const [name, file] of Object.entries(SOUNDS)) {
+    audio[name] ??= new Audio(file);
+    audio[name].preload = 'auto';
+    if (audio[name].error) audio[name].load();
+  }
+}
+
+/** Plays a sound when sounds are on. Browsers allow it once the user has clicked or typed on the page. */
+function playSound(name) {
+  if (!soundOn()) return Promise.resolve(false);
+  audio[name] ??= new Audio(SOUNDS[name]);
+  audio[name].currentTime = 0;
+  return audio[name].play().then(() => true);
+}
+
+/** Plays an alert in one open page only; `key` names the event. */
+function alertSound(name, key, at = Date.now(), fresh = () => true, related = []) {
+  if (soundOn()) playOnce(key, () => playSound(name), {
+    fresh: () => !state.pageAway && soundOn() && fresh() && Date.now() - at <= MAX_ALERT_AGE_MS,
+    related,
+  });
+}
+
+function changeSound(input) {
+  save(SOUND_KEY, input.checked ? 'on' : null);
+  prepareSounds();
+  playSound('update').catch(() => {});
+}
+
+/** A hello identifies this manager lifetime, independent of connections. */
+function managerConnected(msg) {
+  prepareSounds();
+  state.managerInstance = msg.startedAt && msg.pid ? `${msg.pid}.${msg.startedAt}` : null;
+  stopAlert.connected(state.managerInstance);
+  state.managerUnavailable = false;
+  if (state.managerInstance) managerLoss.connected();
+  else managerLoss.cancel();
+  if (state.managerInstance) rearmSound(`unavailable.${state.managerInstance}`);
+}
+
+/** A confirmed manager stop; a browser socket closing never calls this. */
+function managerGone() {
+  managerLoss.cancel();
+  state.managerUnavailable = false;
+  const instance = stopAlert.stopped();
+  if (instance) alertSound('stopped', `stopped.${instance}`, Date.now(),
+    () => state.managerInstance === instance && !state.connected, [`unavailable.${instance}`]);
+}
+
 /** Places the open menu under its button, right-aligned with it and kept on screen. */
 function placeAppearanceMenu() {
   const menu = $('appearance-menu');
@@ -269,9 +348,10 @@ function renderUpgrade() {
   note.title = title;
 }
 
-function setUpgrade(upgrade) {
+function setUpgrade(upgrade, baseline = false) {
   const before = state.upgrade;
   state.upgrade = upgrade || null;
+  if (updateAlert(state.upgrade, baseline)) alertSound('update', `update.${state.upgrade.latestVersion}`);
   renderUpgrade();
   renderVersion();
   if ($('changelog').open) renderChangelog();
@@ -500,7 +580,9 @@ function renderShells(card, provider) {
     const chip = host.children[i];
     chip.setAttribute('aria-selected', String(shell.id === selected));
     chip.textContent = shell.label;
-    chip.title = `Start new sessions in ${shell.label}${shell.id === provider.defaultShell ? ', used unless you pick another' : ''}\n${shell.path}`;
+    chip.title = shell.multiplexer
+      ? `Start new sessions inside ${shell.label}. Stopping or closing one detaches it; it keeps running in ${shell.label}.\n${shell.path}`
+      : `Start new sessions in ${shell.label}${shell.id === provider.defaultShell ? ', used unless you pick another' : ''}\n${shell.path}`;
   });
 }
 
@@ -2609,6 +2691,8 @@ function accountLabel(s) {
 
 function statusText(s) {
   if (s.status === 'exited') {
+    // A multiplexer's client exits 1 when detached by Stop: its exit code tells the user nothing.
+    if (s.multiplexer) return 'Closed';
     if (s.signal) return `Exited (${s.signal})`;
     return s.exitCode === 0 || s.exitCode === null ? 'Exited' : `Exited (${s.exitCode})`;
   }
@@ -2652,8 +2736,24 @@ function resumable(s) {
     && !runningOn(s.provider.id, s.account?.id ?? 'default', id));
 }
 
+/** A stopped tmux or herdr card whose multiplexer still has its session. */
+function reattachable(s) {
+  return Boolean(s.status === 'exited' && s.multiplexer?.reattachable);
+}
+
+async function reattachSession(id) {
+  try {
+    upsertSession((await api('POST', `/sessions/${id}/reattach`)).session);
+    openPanel(id);
+  } catch (err) {
+    if (err instanceof AuthError) return showAuth(err.message);
+    toast(err.message, 8000);
+  }
+}
+
 function resumeCard(id) {
   const s = state.sessions.get(id);
+  if (s && reattachable(s)) return reattachSession(id);
   if (!s || !resumable(s)) return;
   const provider = state.providers.find((p) => p.id === s.provider.id);
   const account = provider.accounts?.find((a) => a.id === s.account?.id)?.id;
@@ -2698,14 +2798,20 @@ function updateCard(node, s) {
   renderAgents(node.querySelector('.agents'), s.agents, s.shells || []);
   paintReporting(node.querySelector('.agents-row'), s);
   node.classList.toggle('exited', s.status === 'exited');
-  node.querySelector('.stop').hidden = s.status !== 'running';
+  const stop = node.querySelector('.stop');
+  stop.hidden = s.status !== 'running';
+  stop.textContent = s.multiplexer ? 'Detach' : 'Stop';
+  stop.title = s.multiplexer ? `Detach from ${s.multiplexer.label}; it keeps running. Reattach with: ${s.multiplexer.attach}` : '';
   node.querySelector('.remove').hidden = s.status === 'running';
   const useButton = node.querySelector('.use-folder');
   useButton.hidden = !clonedPath(s);
   useButton.title = clonedPath(s) ? `Make ${s.clone.path} the working folder, so new sessions start there` : '';
   const resume = node.querySelector('.resume');
-  resume.hidden = !resumable(s);
-  resume.title = `Start ${s.provider.tool} again on this session${id ? ` (${id})` : ''} in ${s.cwd}`;
+  resume.hidden = !resumable(s) && !reattachable(s);
+  resume.textContent = s.multiplexer ? 'Reattach' : 'Resume';
+  resume.title = s.multiplexer
+    ? `Attach this card to its ${s.multiplexer.label} session again, as ${s.multiplexer.attach} would`
+    : `Start ${s.provider.tool} again on this session${id ? ` (${id})` : ''} in ${s.cwd}`;
   const modelLabel = s.model ? `, model ${modelText(s)}` : '';
   const accountName = accountLabel(s) ? `, ${accountLabel(s)} account` : '';
   const shellCount = (s.shells || []).length;
@@ -2757,6 +2863,11 @@ function guardLeaving() {
 }
 
 function upsertSession(session) {
+  // An exit is final for the process it ended. A reply sent before it, such as Stop's, can
+  // arrive after the exit was announced and must not show the session running again; a
+  // reattached tmux or herdr session runs a newer process, started after that exit.
+  const known = state.sessions.get(session.id);
+  if (known?.status === 'exited' && session.status !== 'exited' && !(Date.parse(session.startedAt) > Date.parse(known.exitedAt))) return;
   state.sessions.set(session.id, session);
   renderSessions();
   noticeClone(session);
@@ -2770,17 +2881,25 @@ function dropSession(id) {
   renderSessions();
 }
 
+/** What happens to a running session when it is stopped, for the confirmation. */
+function stopNote(s) {
+  const mux = s.multiplexer;
+  return mux ? `${mux.label} keeps running it. Reattach it from its card, or in a terminal with: ${mux.attach}` : `The ${s.provider.tool} process will be ended.`;
+}
+
 async function stopSession(id) {
   const s = state.sessions.get(id);
   if (!s || s.status !== 'running') return;
-  if (!confirm(`Stop "${s.name}"? The ${s.provider.tool} process will be ended.`)) return;
+  if (!confirm(`${s.multiplexer ? 'Detach' : 'Stop'} "${s.name}"? ${stopNote(s)}`)) return;
   try { upsertSession((await api('POST', `/sessions/${id}/stop`)).session); } catch (err) { toast(err.message); }
 }
 
 async function removeSession(id) {
   const s = state.sessions.get(id);
   if (!s) return;
-  if (s.status === 'running' && !confirm(`"${s.name}" is still running. End it and remove it?`)) return;
+  // The card goes, so only the terminal can reattach it.
+  const question = s.multiplexer ? `Detach it and remove it? ${s.multiplexer.label} keeps running it. Reattach it in a terminal with: ${s.multiplexer.attach}` : 'End it and remove it?';
+  if (s.status === 'running' && !confirm(`"${s.name}" is still running. ${question}`)) return;
   try { await api('DELETE', `/sessions/${id}`); dropSession(id); } catch (err) { toast(err.message); }
 }
 
@@ -3051,6 +3170,23 @@ function suppressQueryReplies(term) {
   }
 }
 
+/** The text an OSC 52 sequence ("c;<base64>") asks to copy, or null for a clipboard query or anything unreadable. */
+function osc52Text(data) {
+  const payload = data.slice(data.indexOf(';') + 1);
+  if (!data.includes(';') || !payload || payload === '?' || payload.length > 4 * 1024 * 1024) return null;
+  try {
+    return new TextDecoder().decode(Uint8Array.from(atob(payload), (c) => c.charCodeAt(0)));
+  } catch {
+    return null;
+  }
+}
+
+/** The line a terminal shows when its process ends. A tmux or herdr client's exit code says nothing about the session it showed. */
+function exitLine(s, { exitCode, signal }) {
+  if (s?.multiplexer) return '[closed]';
+  return `[process exited with ${signal ? `signal ${signal}` : `code ${exitCode ?? 0}`}]`;
+}
+
 class TerminalView {
   constructor(sessionId) {
     this.id = sessionId;
@@ -3061,6 +3197,8 @@ class TerminalView {
       fontSize: coarsePointer.matches ? 14 : 13,
       scrollback: 5000,
       macOptionIsMeta: true,
+      // Option-drag selects text even while a program reads the mouse, as Shift-drag does elsewhere.
+      macOptionClickForcesSelection: true,
       theme: TERMINAL_THEME,
     });
     this.fit = new window.FitAddon.FitAddon();
@@ -3068,7 +3206,16 @@ class TerminalView {
     this.term.loadAddon(new window.WebLinksAddon.WebLinksAddon((_e, uri) => window.open(uri, '_blank', 'noopener,noreferrer')));
     this.term.attachCustomKeyEventHandler((e) => this.handleKey(e));
     suppressQueryReplies(this.term);
-    this.term.onData((data) => this.send({ type: 'input', data }));
+    // Programs copy with OSC 52: tmux's copy mode, and herdr where it cannot reach the
+    // system clipboard itself. Only the open terminal may write it; nothing reads it.
+    this.term.parser.registerOscHandler(52, (data) => {
+      const text = osc52Text(data);
+      if (text !== null && state.activeId === this.id) navigator.clipboard?.writeText(text).catch(() => {});
+      return true;
+    });
+    this.term.onData((data) => {
+      this.send({ type: 'input', data });
+    });
     this.opened = false;
     this.disposed = false;
     this.retry = 0;
@@ -3116,11 +3263,9 @@ class TerminalView {
       case 'data':
         this.term.write(msg.data);
         break;
-      case 'exit': {
-        const how = msg.signal ? `signal ${msg.signal}` : `code ${msg.exitCode ?? 0}`;
-        this.term.write(`\r\n\x1b[2m[process exited with ${how}]\x1b[0m\r\n`);
+      case 'exit':
+        this.term.write(`\r\n\x1b[2m${exitLine(state.sessions.get(this.id), msg)}\x1b[0m\r\n`);
         break;
-      }
       default:
         break;
     }
@@ -3238,7 +3383,7 @@ function updatePanel() {
   $('panel-sub').title = modelTitle(s);
   renderAgents($('panel-agents'), s.agents, s.shells || []);
   const stop = $('panel-stop');
-  stop.textContent = s.status === 'running' ? 'Stop' : 'Remove';
+  stop.textContent = s.status !== 'running' ? 'Remove' : s.multiplexer ? 'Detach' : 'Stop';
 }
 
 // ---- stopping the manager -------------------------------------------------
@@ -3324,7 +3469,7 @@ function leaveStopping() {
 function restartGaveUp() {
   if (!state.stopping || !state.restarting) return;
   state.restarting = false;
-  setConnection('down', 'Session manager stopped');
+  setConnection('down', state.stopRemaining === null ? 'Manager unavailable' : 'Session manager stopped');
   showStopped('stopped', 'The session manager did not come back',
     `Nothing answered within ${Math.round(RESTART_WAIT_MS / 1000)} seconds of the restart. Check manager.log in the Agent Guild data folder, then start it yourself.`);
 }
@@ -3386,14 +3531,26 @@ function showManagerStopped() {
 
 // ---- events ---------------------------------------------------------------
 
+function showManagerUnavailable() {
+  setConnection('down', 'Manager unavailable. Trying to reconnect…');
+  if (state.stopping) {
+    clearTimeout(restartTimer);
+    showStopped('stopped', 'Manager unavailable', 'The manager stopped responding before confirming shutdown. Sessions may still be running. This page will reconnect automatically.');
+  }
+}
+
 function connectEvents() {
+  if (state.pageAway) return;
   const ws = new WebSocket(wsUrl('/events'));
   state.eventsSocket = ws;
   ws.onopen = () => {
+    if (state.pageAway || state.eventsSocket !== ws) return;
+    managerLoss.cancel();
     state.eventsRetry = 0;
     setConnection('ok', 'Connected to session manager');
   };
   ws.onmessage = (event) => {
+    if (state.pageAway || state.eventsSocket !== ws) return;
     const msg = JSON.parse(event.data);
     if (msg.type === 'hello') {
       // The manager is back after a stop or restart; the page picks up where it was.
@@ -3406,9 +3563,10 @@ function connectEvents() {
       setConnection('ok', 'Connected to session manager');
       state.sessions = new Map(msg.sessions.map((s) => [s.id, s]));
       for (const id of [...state.views.keys()]) if (!state.sessions.has(id)) dropSession(id);
+      managerConnected(msg);
       renderSessions();
       sessionsShown = true;
-      setUpgrade(msg.upgrade);
+      setUpgrade(msg.upgrade, true);
       loadNews();
       // A changelog.updated sent while the socket was down is lost; catch up the open panel.
       if ($('changelog').open) loadChangelog();
@@ -3427,6 +3585,7 @@ function connectEvents() {
       enterStopping(0, msg.restart === true);
       state.stopRemaining = Number(msg.remaining) || 0;
       showManagerStopped();
+      managerGone();
     } else if (msg.type === 'session.created' || msg.type === 'session.updated') {
       upsertSession(msg.session);
     } else if (msg.type === 'session.removed') {
@@ -3439,16 +3598,21 @@ function connectEvents() {
     }
   };
   ws.onclose = () => {
-    if (state.stopping) {
+    if (state.pageAway || state.eventsSocket !== ws) return;
+    if (state.managerUnavailable) {
+      showManagerUnavailable();
+    } else if (state.stopping && state.stopRemaining !== null) {
       showManagerStopped();
     } else {
-      setConnection('down', 'Session manager not reachable. Run "agent-guild open" to start it.');
+      setConnection('down', 'Connection interrupted. Trying to reconnect…');
     }
+    managerLoss.disconnected();
     // Keep trying: after a stop, a relaunched manager brings the page back by itself.
     const delay = Math.min(5000, 500 * 2 ** state.eventsRetry++);
     setTimeout(async () => {
+      if (state.pageAway || state.eventsSocket !== ws) return;
       try { await loadProviders(); } catch (err) { if (err instanceof AuthError) return showAuth(err.message); }
-      connectEvents();
+      if (!state.pageAway && state.eventsSocket === ws) connectEvents();
     }, delay);
   };
 }
@@ -3476,6 +3640,7 @@ let statsInterval;
 let newsTimer;
 
 function showAuth(message = '') {
+  managerLoss.cancel();
   closeModels();
   closeNews();
   closeChangelog();
@@ -3611,6 +3776,16 @@ $('news').addEventListener('close', () => {
 document.addEventListener('visibilitychange', () => {
   if (document.visibilityState === 'visible' && state.connected && Date.now() - newsLoadedAt > 60000) loadNews();
 });
+addEventListener('pagehide', () => {
+  state.pageAway = true;
+  managerLoss.cancel();
+  state.eventsSocket?.close();
+});
+addEventListener('pageshow', (event) => {
+  if (!event.persisted) return;
+  state.pageAway = false;
+  connectEvents();
+});
 $('version').addEventListener('click', openChangelog);
 $('changelog-close').addEventListener('click', closeChangelog);
 $('changelog').addEventListener('click', (e) => { if (e.target === $('changelog')) closeChangelog(); });
@@ -3629,6 +3804,7 @@ $('changelog-restart').addEventListener('click', () => {
 });
 addEventListener('storage', (e) => {
   if (e.key === CHANGELOG_SEEN_KEY) renderVersion();
+  else if (e.key === SOUND_KEY) { $('sound').checked = soundOn(); prepareSounds(); }
   // Another tab reordered the cards.
   else if (e.key === SESSION_ORDER_KEY && !drag) arrange(parseOrder(e.newValue));
 });
@@ -3674,6 +3850,7 @@ $('upgrade').addEventListener('click', upgradeManager);
 $('appearance-menu').addEventListener('change', (e) => {
   if (e.target.name === 'skin') changeSkin(e.target);
   else if (e.target.name === 'theme') changeTheme(e.target);
+  else if (e.target.name === 'sound') changeSound(e.target);
 });
 $('appearance-menu').addEventListener('toggle', (e) => {
   if (e.newState !== 'open') return;
@@ -3707,6 +3884,7 @@ $('providers').addEventListener('pointerout', (e) => {
 });
 applyTheme(currentTheme());
 renderSkinChoices();
+$('sound').checked = soundOn();
 // Follow the system setting until the user picks a theme.
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
   if (!load(THEME_KEY)) applyTheme(e.matches ? 'dark' : 'light');

package/web/index.html

@@ -36,6 +36,10 @@
           <label class="choice"><input type="radio" name="theme" value="light"><span class="mode-light">Light</span></label>
           <label class="choice"><input type="radio" name="theme" value="dark"><span class="mode-dark">Dark</span></label>
         </fieldset>
+        <fieldset>
+          <legend>Sound</legend>
+          <label class="choice" title="Plays when the session manager stops, remains unavailable after a brief recovery check, or a new Agent Guild update is discovered. Click or type on this page to allow playback."><input id="sound" type="checkbox" name="sound"><span class="sound-alerts">Alert sounds</span></label>
+        </fieldset>
       </div>
       <button id="restart-manager" class="btn restart-manager" type="button" hidden>Restart manager</button>
       <button id="stop-manager" class="btn danger stop-manager" type="button" hidden title="Stop the session manager. This ends every session.">Stop manager</button>

package/web/sounds/License.txt

@@ -0,0 +1,22 @@
+	
+
+	Interface Sounds (1.0)
+
+	Created/distributed by Kenney (www.kenney.nl)
+	Creation date: 11-02-2020
+
+			------------------------------
+
+	License: (Creative Commons Zero, CC0)
+	http://creativecommons.org/publicdomain/zero/1.0/
+
+	This content is free to use in personal, educational and commercial projects.
+	Support us by crediting Kenney or www.kenney.nl (this is not mandatory)
+
+			------------------------------
+
+	Donate:   http://support.kenney.nl
+	Patreon:  http://patreon.com/kenney/
+
+	Follow on Twitter for updates:
+	http://twitter.com/KenneyNL

package/web/styles.css

@@ -22,7 +22,8 @@
   --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
   --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E");
   --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.6A8 8 0 0 1 9.4 4.5a8 8 0 1 0 10.1 10.1z'/%3E%3C/svg%3E");
-  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
+  --icon-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4.2 4.2 0 0 1 0 6M18.3 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E");
+  --icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
   --icon-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 18.5h10.5a4 4 0 0 0 .6-7.96A6 6 0 0 0 6.5 9.6 4.5 4.5 0 0 0 7 18.5z'/%3E%3C/svg%3E");
   --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E");
   --icon-github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z'/%3E%3C/svg%3E");
@@ -341,6 +342,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
   background: currentColor; mask: var(--icon-sun) center / contain no-repeat;
 }
 :root[data-theme="dark"] .appearance::before, .appearance-menu .choice > .mode-dark::before { mask-image: var(--icon-moon); }
+.appearance-menu .choice > .sound-alerts::before { mask-image: var(--icon-sound); }
 .appearance::after { margin-left: 0.45em; transform: rotate(90deg); transition: transform 0.15s var(--ease); }
 .appearance:has(+ :popover-open)::after { transform: rotate(-90deg); }
 .appearance-menu {