@oddessentials/agent-guild 0.19.0 → 0.20.0

package/README.md

@@ -120,7 +120,23 @@ puts a crew of little robots in deep space; **Grove** is a calm moss garden
 of gentle nature spirits; **Gnomeland** is a lantern-lit village of gnome
 builders, engineers with a little magic. The page
 follows your system's light or dark setting until you pick one. See
-[docs/SKINS.md](docs/SKINS.md) to make another.
+[docs/SKINS.md](docs/SKINS.md) to make another. **Alert sounds**, off until
+you turn them on in the same menu, chime when the session manager confirms
+a stop or restart, remains unavailable after a brief recovery check, or a
+new version is discovered after the initial version check. Session activity
+and assistant responses have no sounds:
+the providers do not yet offer consistently reliable completion signals.
+
+Sounds play in one eligible tab per browser and origin after browser playback
+permission (usually a click or keypress). They require Web Locks and writable
+local storage. Opening or reconnecting a page does not replay old alerts,
+even when a different manager has taken over. Closing a browser does not
+stop the manager. After an unexpected disconnect, an already connected page
+checks the local health endpoint twice, two seconds apart, with a one-second
+timeout per request. If both fail, it shows “Manager unavailable” and alerts
+once; it cannot confirm whether the process exited or sessions ended.
+A successful health check, reconnection, or closing the page cancels the alert.
+There is no added polling while connected and no additional monitoring process.
 
 ## Commands
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Launch and watch AI coding-assistant terminal sessions from one local web page. A bundled session manager owns the terminals so the page can close and reconnect.",
   "license": "MIT",
   "repository": {

package/src/manager/server.mjs

@@ -25,6 +25,7 @@ const MIME = {
   '.webp': 'image/webp',
   '.woff2': 'font/woff2',
   '.ico': 'image/x-icon',
+  '.wav': 'audio/wav',
   '.json': 'application/json; charset=utf-8',
 };
 
@@ -450,7 +451,7 @@ export function createManagerServer({
 
   function handleEvents(ws) {
     eventClients.add(ws);
-    safeSend(ws, { type: 'hello', version, pid: process.pid, launcher, upgrade: upgradeInfo(), sessions: manager.list() });
+    safeSend(ws, { type: 'hello', version, pid: process.pid, startedAt, launcher, upgrade: upgradeInfo(), sessions: manager.list() });
     ws.on('close', () => eventClients.delete(ws));
     ws.on('message', () => { /* events socket is server -> client only */ });
   }

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();
@@ -3068,7 +3148,9 @@ 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 }));
+    this.term.onData((data) => {
+      this.send({ type: 'input', data });
+    });
     this.opened = false;
     this.disposed = false;
     this.retry = 0;
@@ -3324,7 +3406,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 +3468,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 +3500,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 +3522,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 +3535,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 +3577,7 @@ let statsInterval;
 let newsTimer;
 
 function showAuth(message = '') {
+  managerLoss.cancel();
   closeModels();
   closeNews();
   closeChangelog();
@@ -3611,6 +3713,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 +3741,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 +3787,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 +3821,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 {