@vale-dinap/lucidly 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to Lucidly are listed here. The format follows [Keep a Chang
 
 ## [Unreleased]
 
+## [0.5.0] - 2026-11-11
+
+### Added
+
+- **Optional sound alerts**, with the bell next to keep-awake in the top bar: a short sound when a session finishes, asks you something or runs into trouble, in any of your tabs. Off by default. Each event has its own sound, chosen from a dropdown (17 sounds in three groups: gentle ones, questions, and louder alerts such as Alarm, Siren and Buzzer; or None for no sound) and tried with *Test*, and there is a volume slider. *Only when I'm not looking* (on by default) keeps quiet for the session on screen while the page is visible. The sounds are made in the browser, no files. Browsers only allow sound after you interact with a page: after a reload the bell turns amber until your first click or key press.
+
 ## [0.4.0] - 2026-11-11
 
 ### Added
@@ -68,6 +74,7 @@ All notable changes to Lucidly are listed here. The format follows [Keep a Chang
 
 First public release.
 
+[0.5.0]: https://github.com/vale-dinap/lucidly/compare/v0.4.0...v0.5.0
 [0.4.0]: https://github.com/vale-dinap/lucidly/compare/v0.3.0...v0.4.0
 [0.3.0]: https://github.com/vale-dinap/lucidly/compare/v0.2.0...v0.3.0
 [0.2.0]: https://github.com/vale-dinap/lucidly/compare/v0.1.0...v0.2.0

package/README.md

@@ -144,6 +144,7 @@ In the browser:
 - Switch views with the buttons at the left of the toolbar under the timeline (it stays on screen while you scroll), or `V` to cycle through *Glance*, *Simple*, *Detailed*, *Files* and **Actions**. In Simple and Detailed, the **filters** next to them narrow the list: *All*, *Failed*, *Recovered*, *Subagents* and *Questions* (the exchanges answered without any work), each with its count. When the toolbar is too narrow (for example with the side panel open), they fold into one menu button showing the current filter, with a red dot if anything is still failed. *Hide Q&A* applies to *All* only, and greys out with the other filters. Search is a magnifier until you click it or press `/`. The flame button (or `H`) turns on **token heat**: tasks and steps glow from green to red by the tokens they used (fresh input, cache writes and output, the way the token meter counts them), relative to the rest of the run, on a log scale so only the real outliers turn red. Tasks and questions are ranked together, steps among steps. It is off by default; hover a glowing node or dot for its tokens. Actions is a flat, chronological list of everything the agent did: commands, edits, reads, searches, subagent calls. Filter by kind, show only *Failed* actions or only *Recovered* ones (each failure is tagged *failed*, or *failed → recovered* in grey), search (`/`), or limit to one task. Each failure shows its actual error line. Select a row to see its full input and output, and *Show in path* to jump back to the step it belongs to. A long shell command is shown in parts: its shell lines, the script it runs (`node - <<'EOF'`, `python -c "…"`, highlighted as JavaScript or Python), and the content it writes to a file (`cat > a.py <<'EOF'`), with *Show the whole command* for the command as recorded. For commands that change files, long lines that wrap continue indented so each real line stands out, and dense JavaScript has *Reformat for reading*: line breaks and indentation for display only, with *Show as written* to go back. *Copy commands* copies the listed shell commands, with failed ones marked. In the side panel, every card has its own **copy button**: your messages, the agent's text, plans and results (as Markdown), thinking, commands and each of their parts (without the `$` prompt; a script as written, even when shown reformatted), inputs, outputs and errors (whole, even when only the first lines are shown), and diffs (as a unified diff). A tick confirms the copy.
 - The **pin** in the overview's top-right corner (or `P`) keeps the overview on screen too while you scroll. It is pinned by default: scrolled down, it tightens into a compact card (about half the height) that still shows everything: the stats on one line, the timeline, the subagents on a single row (parallel ones are counted on a *+N* marker), the navigator and the legend. It unfolds again back at the top, and what you were reading stays put during the transition. Unpin it to let it scroll away; Lucidly remembers the choice. The arrows button at the right of the toolbar (or `E`) expands or collapses everything.
 - **Keep awake** (the cup next to the status in the top bar) stops the device from sleeping, like a no-sleep page. Turn it on, and optionally choose *Only while the agent is working*: the device stays awake while a turn runs and may sleep once the work is done and the session is idle (or has had no news for 30 minutes). The cup steams while it is holding the device awake. It uses the browser's Screen Wake Lock, so it works while the Lucidly tab is visible: a hidden or minimised tab lets the device sleep, and it takes effect again when you come back.
+- **Sounds** (the bell next to keep-awake) plays a short sound when a session finishes, asks you something or runs into trouble, in any of your tabs. It is off by default. Each event has its own sound, chosen from a dropdown (17 sounds in three groups: gentle ones, questions, and louder alerts such as Alarm, Siren and Buzzer; or None for no sound) and tried with *Test*, and the volume can be set. With *Only when I'm not looking* (on by default), the session on screen stays quiet while the page is visible. Browsers only play sound after you interact with a page, so after a reload the bell turns amber until your first click or key press.
 - A session opens at the top, on the overview and its timeline, with the side panel closed until you select something. Whenever you're not at the end of the list, a round **arrow button** floats at the bottom right, with a count of actions that arrived since you scrolled away. Click it (or press `F` or `End`) to jump to the end and follow the agent, keeping the current step in view. If the side panel is closed it stays closed: the list just scrolls along. Scrolling or clicking pauses following. **Open session** (the folder button on the left, the run's title, or `O`) lists the Claude Code sessions of this project or of all projects. All projects are grouped by project folder, each group headed by the folder's name, its session count and when it last changed (a green dot if a session in it is live). This project comes first; groups fold, and the ones open by default are this project's and any with a live session (or all of them, when there are only a few). *Expand all* / *Collapse all* sits at the top, and what you open or close stays that way.
 - **Tabs** let you keep several sessions open. Picking a session replaces the one on screen; `Ctrl`/`⌘`-click it, middle-click it or use its **New tab** button to open it in a new tab instead (the **+** at the end of the tab strip does the same). From two tabs on, a strip at the very top of the page, above the top bar, shows them, each with a dot in the orb's colours and a count of running subagents. A tab you're not looking at that asks you something, finishes or runs into trouble flashes, then glows until you open it, and the page title shows how many do. Picking a session that's already in a tab switches to it. Each tab keeps your place (view, selection, spotlight, scroll). `[` / `]` move between tabs, a middle click closes one, and they come back after a reload. Closing a tab stops following its session; one no page has shown for 10 minutes stops by itself.
 - The download button, next to *Open session* on the left, saves a **snapshot** of the run as a `.lucidly.json` file, and *Open a saved snapshot…* in the session list reopens one. You don't need this for Claude Code sessions, which reopen straight from their transcripts. It's for keeping a run after its transcript is cleaned up, sharing it with someone who doesn't have the transcript, and runs streamed from other agents through stdin, which have no transcript to reopen.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vale-dinap/lucidly",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "See what your AI agent is doing, at a glance.",
   "keywords": [
     "claude",

package/web/app.js

@@ -3755,6 +3755,7 @@ function tabsChanged() {
   T.es = es;
   es.addEventListener('tabs', (e) => {
     const { runs } = JSON.parse(e.data);
+    const turned = [];
     for (const [id, sum] of Object.entries(runs)) {
       const tab = tabOf(id);
       if (!tab) continue;
@@ -3764,6 +3765,7 @@ function tabsChanged() {
       }
       const before = tab.sum?.state;
       tab.sum = sum;
+      if (before && before !== sum.state && TAB_ATTN.has(sum.state)) turned.push([tab, sum.state]);
       if (sum.title) tab.title = sum.title;
       if (before && before !== sum.state && TAB_ATTN.has(sum.state) && (tab.uid !== T.active || document.hidden)) {
         tab.attn = true;
@@ -3774,6 +3776,7 @@ function tabsChanged() {
     }
     renderTabs();
     saveTabs();
+    soundFor(turned);
   });
 }
 
@@ -4067,6 +4070,240 @@ document.addEventListener('change', (e) => {
   void syncWake();
 });
 
+// ───────────────────────────── sounds
+/*
+ * Optional sound alerts: a short sound when a session finishes, asks you something or runs into
+ * trouble, the same moments that make a tab flash (see tabsChanged), for every open tab. Off by
+ * default. Each event has its own sound, chosen from a few, or None. "Only when I'm not looking"
+ * (on by default) keeps quiet for the session on screen while the page is visible. The sounds are
+ * made here (Web Audio), no files.
+ *
+ * Browsers only play sound once you've interacted with the page: turning sounds on, or a Test
+ * button, counts. After a reload they wait for your first click or key, and the bell says so.
+ */
+const SND_KINDS = ['done', 'you', 'bad'];
+const SND_LABEL = {
+  done: ['Finished', 'The agent finished its turn.'],
+  you: ['Asked you', 'It asked you something, and waits for your answer.'],
+  bad: ['In trouble', 'Failures in the current step that nothing has fixed yet.'],
+};
+const SND_DEFAULT = { done: 'chime', you: 'question', bad: 'low' };
+S.snd = (() => {
+  const d = { on: false, tones: { ...SND_DEFAULT }, away: true, vol: 0.6 };
+  try {
+    const v = JSON.parse(localStorage.getItem('lucidly.sound') ?? 'null');
+    if (v && typeof v === 'object') {
+      // (Names are checked against the sounds once those are defined, see SOUNDS.)
+      const known = { has: (t) => typeof t === 'string' };
+      const tones = { ...d.tones };
+      for (const k of SND_KINDS) {
+        const t = v.tones?.[k] ?? (v.kinds?.[k] === false ? 'none' : undefined);
+        if (known.has(t)) tones[k] = t;
+      }
+      return { on: !!v.on, away: v.away !== false, vol: Number(v.vol) || d.vol, tones };
+    }
+  } catch {
+    // Unreadable: the defaults.
+  }
+  return d;
+})();
+const saveSnd = () => {
+  try {
+    localStorage.setItem('lucidly.sound', JSON.stringify(S.snd));
+  } catch {
+    // Storage blocked: the choice lasts until the page closes.
+  }
+};
+
+let sndCtx = null;
+let sndLast = 0;
+/** The audio context, resumed when the browser allows it (needs a gesture on the page). */
+function audio() {
+  if (!sndCtx) {
+    const AC = globalThis.AudioContext ?? globalThis.webkitAudioContext;
+    if (!AC) return null;
+    sndCtx = new AC();
+    sndCtx.addEventListener('statechange', renderSound);
+  }
+  if (sndCtx.state === 'suspended') sndCtx.resume().catch(() => {});
+  return sndCtx;
+}
+const sndBlocked = () => S.snd.on && (!sndCtx || sndCtx.state !== 'running');
+// Your first click or key on the page lets sound play (after a reload).
+for (const ev of ['pointerdown', 'keydown'])
+  addEventListener(ev, () => S.snd.on && sndBlocked() && audio(), { capture: true, passive: true });
+
+/** One soft note: a quick attack and a gentle fade. */
+function note(c, out, at, freq, dur, type = 'sine', level = 1, to = 0) {
+  const o = c.createOscillator();
+  const g = c.createGain();
+  o.type = type;
+  o.frequency.setValueAtTime(freq, at);
+  // A pitch that slides (a knock's thud, a rising call).
+  if (to) o.frequency.exponentialRampToValueAtTime(to, at + dur);
+  g.gain.setValueAtTime(0.0001, at);
+  g.gain.exponentialRampToValueAtTime(level, at + 0.012);
+  g.gain.exponentialRampToValueAtTime(0.0001, at + dur);
+  o.connect(g).connect(out);
+  o.start(at);
+  o.stop(at + dur + 0.05);
+}
+
+/** One held note, at full level until just before its end (alarms, sirens), its pitch sliding to `to`. */
+function hold(c, out, at, freq, dur, type = 'square', level = 0.3, to = 0) {
+  const o = c.createOscillator();
+  const g = c.createGain();
+  o.type = type;
+  o.frequency.setValueAtTime(freq, at);
+  if (to) o.frequency.linearRampToValueAtTime(to, at + dur);
+  g.gain.setValueAtTime(0.0001, at);
+  g.gain.exponentialRampToValueAtTime(level, at + 0.01);
+  g.gain.setValueAtTime(level, at + Math.max(0.01, dur - 0.03));
+  g.gain.exponentialRampToValueAtTime(0.0001, at + dur);
+  o.connect(g).connect(out);
+  o.start(at);
+  o.stop(at + dur + 0.05);
+}
+
+/**
+ * The sounds, in groups for the dropdown. Each draws its notes from time `t` into `out` (whose
+ * gain is the volume). Gentle ones are soft and short; questions sound like they call you; alerts
+ * are louder, longer and harsher, to be noticed from across the room.
+ */
+const SND_GROUPS = [
+  [
+    'Gentle',
+    {
+      chime: ['Chime', (c, o, t) => [523.25, 659.25, 783.99].forEach((f, i) => note(c, o, t + i * 0.11, f, i === 2 ? 0.8 : 0.5))],
+      bell: ['Bell', (c, o, t) => (note(c, o, t, 659.25, 1.6, 'sine', 0.9), note(c, o, t, 1318.5, 0.9, 'sine', 0.3), note(c, o, t, 1810, 0.5, 'sine', 0.14))],
+      marimba: ['Marimba', (c, o, t) => [[0, 783.99], [0.14, 1046.5]].forEach(([dt, f]) => (note(c, o, t + dt, f, 0.32), note(c, o, t + dt, f * 4, 0.06, 'sine', 0.15)))],
+      harp: ['Harp', (c, o, t) => [523.25, 659.25, 783.99, 1046.5].forEach((f, i) => note(c, o, t + i * 0.07, f, 0.7, 'triangle', 0.7))],
+      glass: ['Glass', (c, o, t) => (note(c, o, t, 1567.98, 0.9, 'sine', 0.55), note(c, o, t + 0.12, 2093, 1.1, 'sine', 0.42))],
+    },
+  ],
+  [
+    'Questions',
+    {
+      question: ['Question', (c, o, t) => (note(c, o, t, 587.33, 0.45), note(c, o, t + 0.2, 880, 0.9), note(c, o, t + 0.2, 1760, 0.4, 'sine', 0.12))],
+      doorbell: ['Doorbell', (c, o, t) => [[0, 659.25, 0.9], [0.45, 523.25, 1.3]].forEach(([dt, f, d]) => (note(c, o, t + dt, f, d, 'sine', 0.9), note(c, o, t + dt, f * 2, d / 2, 'sine', 0.25)))],
+      ping: ['Ping', (c, o, t) => (note(c, o, t, 1318.5, 0.6, 'sine', 0.8), note(c, o, t, 2637, 0.25, 'sine', 0.15))],
+      knock: ['Knock knock', (c, o, t) => [0, 0.17].forEach((dt) => note(c, o, t + dt, 190, 0.13, 'sine', 1, 95))],
+      rising: ['Rising', (c, o, t) => (note(c, o, t, 440, 0.4, 'sine', 0.9, 880), note(c, o, t + 0.34, 880, 0.5, 'sine', 0.7))],
+    },
+  ],
+  [
+    'Alerts',
+    {
+      low: ['Low tone', (c, o, t) => (note(c, o, t, 311.13, 0.4, 'triangle', 0.9), note(c, o, t + 0.22, 233.08, 0.75, 'triangle', 0.9))],
+      beep: ['Beep', (c, o, t) => [0, 0.18].forEach((dt) => note(c, o, t + dt, 880, 0.12, 'square', 0.28))],
+      triple: ['Triple beep', (c, o, t) => [0, 0.13, 0.26].forEach((dt) => hold(c, o, t + dt, 1000, 0.09, 'square', 0.3))],
+      alarm: ['Alarm', (c, o, t) => [0, 1, 2, 3, 4, 5].forEach((i) => hold(c, o, t + i * 0.17, i % 2 ? 660 : 880, 0.15, 'square', 0.4))],
+      siren: ['Siren', (c, o, t) => [0, 0.9].forEach((dt) => (hold(c, o, t + dt, 600, 0.45, 'sawtooth', 0.28, 1200), hold(c, o, t + dt + 0.45, 1200, 0.45, 'sawtooth', 0.28, 600)))],
+      buzzer: ['Buzzer', (c, o, t) => (hold(c, o, t, 110, 0.7, 'sawtooth', 0.5), hold(c, o, t, 116, 0.7, 'square', 0.3))],
+      klaxon: ['Klaxon', (c, o, t) => [[0, [466.16, 554.37], 0.35], [0.45, [415.3, 493.88], 0.55]].forEach(([dt, fs, d]) => fs.forEach((f) => hold(c, o, t + dt, f, d, 'square', 0.3)))],
+    },
+  ],
+];
+const SOUNDS = Object.fromEntries(SND_GROUPS.flatMap(([, g]) => Object.entries(g)));
+// A saved sound that no longer exists falls back to the default.
+for (const k of SND_KINDS) if (S.snd.tones[k] !== 'none' && !SOUNDS[S.snd.tones[k]]) S.snd.tones[k] = SND_DEFAULT[k];
+
+function playSound(tone) {
+  const s = SOUNDS[tone];
+  if (!s) return;
+  const c = audio();
+  if (!c) return;
+  const out = c.createGain();
+  out.gain.value = 0.32 * S.snd.vol;
+  out.connect(c.destination);
+  s[1](c, out, c.currentTime + 0.02);
+}
+
+/**
+ * Sessions whose state just changed ([tab, new state] pairs): plays one sound for them all, the
+ * most pressing (in trouble, then asked you, then finished), at most every couple of seconds.
+ */
+function soundFor(changes) {
+  const s = S.snd;
+  if (!s.on) return;
+  const wanted = changes.filter(([tab, st]) => s.tones[st] !== 'none' && !(s.away && !document.hidden && tab.uid === T.active)).map(([, st]) => st);
+  const kind = ['bad', 'you', 'done'].find((k) => wanted.includes(k));
+  if (!kind || Date.now() - sndLast < 2000) return;
+  sndLast = Date.now();
+  playSound(s.tones[kind]);
+}
+
+function soundState() {
+  const s = S.snd;
+  if (!s.on) return ['off', 'Off'];
+  if (!globalThis.AudioContext && !globalThis.webkitAudioContext) return ['err', "This browser can't play sounds"];
+  if (sndBlocked()) return ['wait', 'Waiting for a click on the page: browsers only play sound after you interact with it'];
+  const kinds = SND_KINDS.filter((k) => s.tones[k] !== 'none').map((k) => SND_LABEL[k][0].toLowerCase());
+  if (!kinds.length) return ['wait', 'On, but every event is set to None'];
+  return ['on', `On: ${kinds.join(', ')}${s.away ? ", when you're not looking" : ''}`];
+}
+
+function renderSound() {
+  const [st, text] = soundState();
+  const btn = $('#soundBtn');
+  btn.dataset.snd = st;
+  const label = st === 'off' ? 'Sound alerts' : `Sound alerts: ${text.charAt(0).toLowerCase()}${text.slice(1)}`;
+  if (btn.title !== label) {
+    btn.title = label;
+    btn.setAttribute('aria-label', label);
+  }
+  const pop = $('#soundPop');
+  if (pop.hidden) return;
+  const s = S.snd;
+  const rows = SND_KINDS.map(
+    (k) =>
+      `<div class="sn-ev"><span class="sn-l"><b>${SND_LABEL[k][0]}</b><small>${SND_LABEL[k][1]}</small></span><select data-snd="tone" data-kind="${k}" aria-label="Sound when ${SND_LABEL[k][0].toLowerCase()}"><option value="none"${s.tones[k] === 'none' ? ' selected' : ''}>None</option>${SND_GROUPS.map(([g, list]) => `<optgroup label="${g}">${Object.entries(list).map(([v, [l]]) => `<option value="${v}"${s.tones[k] === v ? ' selected' : ''}>${l}</option>`).join('')}</optgroup>`).join('')}</select><button type="button" class="tbtn" data-sndtest="${k}" title="Play this sound"${s.tones[k] === 'none' ? ' disabled' : ''}>Test</button></div>`,
+  ).join('');
+  setHTML(
+    pop,
+    `<div class="pop-h">Sounds</div>
+    <label class="switch wk-row"><input type="checkbox" data-snd="on"${s.on ? ' checked' : ''} /><span></span>Play a sound when a session…</label>
+    ${
+      s.on
+        ? `${rows}
+    <label class="wk-opt sn-away"><input type="checkbox" data-snd="away"${s.away ? ' checked' : ''} /><span><b>Only when I'm not looking</b><small>No sound for the session on screen while this page is visible.</small></span></label>
+    <label class="sn-vol">Volume<input type="range" min="0.1" max="1" step="0.05" value="${s.vol}" data-snd="vol" aria-label="Volume" /></label>
+    <div class="wk-st st-${st}"><i></i>${esc(text)}</div>`
+        : ''
+    }
+    <p class="wk-note">For the sessions in all your tabs.</p>`,
+  );
+}
+
+function toggleSound(show = $('#soundPop').hidden) {
+  $('#soundPop').hidden = !show;
+  $('#soundBtn').classList.toggle('on', show);
+  renderSound();
+}
+
+document.addEventListener('change', (e) => {
+  const t = e.target;
+  if (!(t instanceof HTMLInputElement || t instanceof HTMLSelectElement) || !t.dataset.snd) return;
+  const s = S.snd;
+  if (t.dataset.snd === 'on') {
+    s.on = t.checked;
+    // Turning it on is the click that lets the browser play sound.
+    if (s.on) audio();
+  } else if (t.dataset.snd === 'tone') {
+    // Picking a sound plays it.
+    s.tones[t.dataset.kind] = t.value;
+    playSound(t.value);
+  }
+  else if (t.dataset.snd === 'away') s.away = t.checked;
+  else if (t.dataset.snd === 'vol') {
+    s.vol = Number(t.value);
+    playSound(SND_KINDS.map((k) => s.tones[k]).find((v) => v !== 'none') ?? 'chime');
+  }
+  saveSnd();
+  renderSound();
+});
+renderSound();
+
 function toggleTokens(show = $('#tokensPop').hidden) {
   $('#tokensPop').hidden = !show;
   $('#tokens').classList.toggle('on', show);
@@ -4268,6 +4505,13 @@ document.addEventListener('click', (e) => {
   if (on('#wakeBtn')) return toggleWake();
   if (!on('#wakePop') && !$('#wakePop').hidden) toggleWake(false);
   if (on('#wakePop')) return;
+  if (on('#soundBtn')) return toggleSound();
+  if (!on('#soundPop') && !$('#soundPop').hidden) toggleSound(false);
+  if ((el = on('[data-sndtest]'))) {
+    audio();
+    return playSound(S.snd.tones[el.dataset.sndtest]);
+  }
+  if (on('#soundPop')) return;
   if (on('#emptyOpen')) return void openPicker();
   if ((el = on('[data-view]'))) return setView(el.dataset.view);
   if (on('[data-pin]')) return togglePin();
@@ -4770,6 +5014,7 @@ document.addEventListener('keydown', (e) => {
     schedule();
   } else if (e.key === 'Escape' && !$('#tokensPop').hidden) toggleTokens(false);
   else if (e.key === 'Escape' && !$('#wakePop').hidden) toggleWake(false);
+  else if (e.key === 'Escape' && !$('#soundPop').hidden) toggleSound(false);
   else if (e.key === 'Escape' && !$('#picker').open) {
     S.follow = false;
     S.selected = null;

package/web/index.html

@@ -29,6 +29,12 @@
         </button>
         <div class="pop wake-pop" id="wakePop" hidden></div>
       </div>
+      <div class="wake-wrap">
+        <button class="ibtn snd" id="soundBtn" aria-haspopup="dialog" aria-label="Sound alerts" title="Sound alerts">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5l1.5 2h-14z M10 20.5a2.1 2.1 0 0 0 4 0" /><path class="waves" d="M20 7.5a6 6 0 0 1 1 3.5 M4 7.5a6 6 0 0 0-1 3.5" /><path class="mute" d="M4 4l16 16" /></svg>
+        </button>
+        <div class="pop wake-pop" id="soundPop" hidden></div>
+      </div>
       <div class="grow"></div>
       <div class="meter-wrap">
         <span class="pill warn" id="outdated" hidden title="Lucidly's engine was updated after this server started. Stop it and run lucidly again to apply the update: some data (such as token counts) may be missing until then.">Restart Lucidly to update</span>

package/web/style.css

@@ -1280,3 +1280,28 @@ pre .dh { color: var(--faint); font-weight: 600; }
 .plist .pnew:hover { background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
 .picker-hint { flex: none; padding: 0 18px 8px; color: var(--faint); font-size: 11.5px; }
 .picker-hint:empty { display: none; }
+
+/* ───────── sound alerts (the bell next to keep awake) */
+.snd { color: var(--faint); }
+.snd svg { width: 19px; height: 19px; stroke-width: 1.7; }
+.snd .waves { opacity: 0; transition: opacity 0.2s; }
+.snd .mute { opacity: 0; }
+.snd[data-snd='off'] .mute { opacity: 1; }
+.snd[data-snd='on'] { color: var(--accent); }
+.snd[data-snd='on'] .waves { opacity: 1; }
+.snd[data-snd='wait'] { color: var(--warn); }
+.snd[data-snd='err'] { color: var(--bad); }
+#soundPop { width: 390px; }
+.sn-ev { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px 2px; }
+.sn-l { flex: 1; min-width: 0; font-size: 12.5px; }
+.sn-l b { font-weight: 560; }
+.sn-l small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; line-height: 1.35; }
+.sn-ev select { flex: none; width: 118px; height: 24px; margin-top: -2px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 12px; cursor: pointer; }
+.sn-ev .tbtn:disabled { opacity: 0.4; cursor: default; }
+.sn-ev .tbtn { flex: none; height: 24px; padding: 0 9px; font-size: 12px; margin-top: -2px; }
+.sn-away { padding-top: 10px; border-top: 1px solid var(--border); }
+.sn-vol { display: flex; align-items: center; gap: 10px; margin: 0 0 10px 2px; font-size: 12.5px; color: var(--muted); }
+.sn-vol input { flex: 1; accent-color: var(--accent); }
+.wk-st.st-on { color: var(--text); }
+.wk-st.st-on i { background: var(--accent); }
+.wk-st.st-wait i { background: var(--warn); }