tumwater 0.2.0 → 0.3.0

package/dist/src/ui/gui/gui-client-labels.js

@@ -1,11 +1,10 @@
-// vocabulary: plain
 /** The dashboard's browser-side twins of roleLabel and eventTypeLabel. The script is
  * String.raw text and cannot import server modules, so the data is interpolated at module build
  * and the few lines of logic are hand-kept copies, pinned against their TypeScript originals by
  * test/gui-client-labels.test.ts. Spliced into gui-client.ts's script right after the format
  * helpers, so every later client module can call the two functions. */
 import { EVENT_TYPE_LABELS, RUN_RESULT_LABELS } from "../../events/event-labels.js";
-import { INSTANCE_ID_SOURCE } from "../../roles/loop-ids.js";
+import { INSTANCE_ID_SOURCE } from "../../roles/runner-ids.js";
 export const GUI_CLIENT_LABELS_JS = String.raw `  // labels:start
   const INSTANCE_ID = new RegExp(${JSON.stringify(INSTANCE_ID_SOURCE)});
   const EVENT_TYPE_LABELS = ${JSON.stringify(EVENT_TYPE_LABELS)};

package/dist/src/ui/gui/gui-client-markdown.js

@@ -1,6 +1,5 @@
-// vocabulary: plain
 /** A small, safe Markdown renderer for the dashboard, browser-side: the failure digest and the
- * backlog entries (PLANS/BUGS/QUESTIONS.md bodies) are Markdown the loops write, and reading
+ * backlog entries (PLANS/BUGS/QUESTIONS.md bodies) are Markdown the roles write, and reading
  * them as rendered headings, lists, and tables beats a pre-formatted text blob. It covers what
  * those files use — ATX headings, paragraphs, bullet and numbered lists (continuation lines
  * folded in), pipe tables with right-aligned columns, fenced code, block quotes, and inline

package/dist/src/ui/gui/gui-client-model.js

@@ -1,7 +1,6 @@
-// vocabulary: plain
 /** The dashboard's view model, browser-side — the pure layer between the status payload and
- * what the page shows, with no DOM of its own: each loop's phase pill (label, tone, live
- * detail), its last result in words with the tone of its outcome, the loop sort order and
+ * what the page shows, with no DOM of its own: each role's phase pill (label, tone, live
+ * detail), its last result in words with the tone of its outcome, the role sort order and
  * rank groups, the alerts list with the page's own offline entry, the activity feed's
  * kind/tone classification, the backlog title's trailing "(planned …)" metadata, and the
  * queued prompts in execution order. It is the browser twin of the rules status-model.ts
@@ -11,14 +10,14 @@
  * ENTRY_STAMP_META_SOURCE — String.raw interpolates substitutions normally — so the
  * browser regex cannot drift from the server twin the tests pin it against. */
 import { ENTRY_STAMP_META_SOURCE } from "../../backlog/backlog-structure.js";
-import { STALL_SOURCE } from "../tick-progress-model.js";
+import { STALL_SOURCE } from "../run-progress-model.js";
 import { PROBLEM_EVENTS, PROBLEM_RESULTS, ROUTINE_BUILD_RESULTS, ROUTINE_EVENTS } from "../tone.js";
-import { LOOP_RANK_RULES } from "../status-model.js";
+import { ROLE_RANK_RULES } from "../status-model.js";
 export const GUI_CLIENT_MODEL_JS = String.raw `  // view-model:start
-  // How a loop's phase label (status-model.ts loopPhase) reads here: a status word and tone for
+  // How a role's phase label (status-model.ts rolePhase) reads here: a status word and tone for
   // its pill, whether it is live work, and the detail the label carried after its first word.
   function phaseInfo(phase) {
-    // status-model.ts loopPhase appends a " · no change ×N" streak suffix to a resting idle
+    // status-model.ts rolePhase appends a " · no change ×N" streak suffix to a resting idle
     // cell's label. Strip it so the exact/startsWith matches and the parsed detail see the
     // plain phase; phaseDetailBase re-appends the streak once itself from the payload's
     // noChangeStreak, so the GUI renders it exactly once.
@@ -49,6 +48,7 @@ export const GUI_CLIENT_MODEL_JS = String.raw `  // view-model:start
     if (p === "waiting: daily cap spent") return { key: "cap", label: "Waiting", tone: "amber", live: false, detail: "daily cap" };
     if (p === "waiting: low disk") return { key: "disk", label: "Waiting", tone: "amber", live: false, detail: "low disk" };
     if (p === "waiting: bootstrap") return { key: "bootstrap", label: "Waiting", tone: "amber", live: false, detail: "bootstrap" };
+    if (p.startsWith("waiting: maintenance allowance spent")) return { key: "quota", label: "Waiting", tone: "amber", live: false, detail: "maintenance allowance spent this poll" };
     if (p.startsWith("waiting: maintenance allowance used")) return { key: "quota", label: "Waiting", tone: "amber", live: false, detail: "maintenance " + after(35) };
     if (p.startsWith("sleeping")) return { key: "sleeping", label: "Sleeping", tone: "gray", live: false, detail: "" };
     if (p.startsWith("idle: ")) return { key: "idle", label: "Idle", tone: "gray", live: false, detail: p.slice(6) };
@@ -58,12 +58,12 @@ export const GUI_CLIENT_MODEL_JS = String.raw `  // view-model:start
     if (p === "stopped") return { key: "stopped", label: "Stopped", tone: "gray", live: false, detail: "the team is not running" };
     return { key: "other", label: p || "unknown", tone: "gray", live: false, detail: "" };
   }
-  // A stalled tool call or a long silence, as the phase label names them (tick-progress-model.ts's
-  // inFlightDetail) — the cue that a working loop may be stuck. The pattern is that module's
+  // A stalled tool call or a long silence, as the phase label names them (run-progress-model.ts's
+  // inFlightDetail) — the cue that a working role may be stuck. The pattern is that module's
   // STALL_SOURCE (interpolated at module build), shared with team-alerts.ts's server-side
   // matcher so the two cannot drift from the wording the cell renders.
   const STALL = new RegExp(${JSON.stringify(STALL_SOURCE)});
-  // A tick result (tick-outcome.ts TickResult) in words, with the tone of its outcome.
+  // A run result (run-outcome.ts RunResult) in words, with the tone of its outcome.
   const RESULT_TONES = {
     changed: "green",
     queued: "indigo",
@@ -88,31 +88,31 @@ export const GUI_CLIENT_MODEL_JS = String.raw `  // view-model:start
   // build (like STALL above) so the page cannot drift from the server's eventKind.
   const PROBLEM_RESULTS = ${JSON.stringify(PROBLEM_RESULTS)};
   const ROUTINE_BUILD_RESULTS = ${JSON.stringify(ROUTINE_BUILD_RESULTS)};
-  // What explains a loop's last result: its summary, or — for a problem that carries none — the
-  // last error the loop recorded.
+  // What explains a role's last result: its summary, or — for a problem that carries none — the
+  // last error the role recorded.
   const resultWhy = (l) => l.lastSummary || (PROBLEM_RESULTS.includes(l.lastResult) || l.phase === "failing" ? l.lastError || "" : "");
-  // loop-sort:start
-  // Loop order — status-model.ts's loopRank/sortLoopsByState, the TUI's order too: the running
+  // role-sort:start
+  // Role order — status-model.ts's roleRank/sortRolesByState, the TUI's order too: the running
   // director first (its own live work, outside the maxConcurrent cap it bypasses — BUGS.md
   // 2026-10-06), then live work (working, reviewing, merge), then work waiting in the pipe
-  // line (approved, awaiting a slot), then loops that need attention (failing, main red), then
-  // paused, then idle; within a rank the most recent tick first, a never-ticked loop last, ties
-  // by name. The phase → rank rules are status-model.ts's LOOP_RANK_RULES (interpolated at
+  // line (approved, awaiting a slot), then roles that need attention (failing, main red), then
+  // paused, then idle; within a rank the most recent run first, a never-ran role last, ties
+  // by name. The phase → rank rules are status-model.ts's ROLE_RANK_RULES (interpolated at
   // module build, like STALL/PROBLEM_RESULTS above), so the literals cannot drift from the
   // server's copy.
-  const LOOP_RANK_RULES = ${JSON.stringify(LOOP_RANK_RULES)};
-  function loopRank(phase) {
+  const ROLE_RANK_RULES = ${JSON.stringify(ROLE_RANK_RULES)};
+  function roleRank(phase) {
     const p = String(phase || "");
-    for (const r of LOOP_RANK_RULES) {
+    for (const r of ROLE_RANK_RULES) {
       if (r.active ? isActivePhase(p) : (r.phases || []).includes(p) || (r.prefixes || []).some((x) => p.startsWith(x)))
         return r.rank;
     }
     return 4;
   }
-  function sortLoops(loops) {
-    return loops.slice().sort((a, b) => {
-      const ra = loopRank(a.phase);
-      const rb = loopRank(b.phase);
+  function sortRoles(roles) {
+    return roles.slice().sort((a, b) => {
+      const ra = roleRank(a.phase);
+      const rb = roleRank(b.phase);
       if (ra !== rb) return ra - rb;
       const ta = a.lastRunEndedAt ?? 0;
       const tb = b.lastRunEndedAt ?? 0;
@@ -120,12 +120,12 @@ export const GUI_CLIENT_MODEL_JS = String.raw `  // view-model:start
       return a.role.localeCompare(b.role);
     });
   }
-  // loop-sort:end
+  // role-sort:end
   // The team table's section for each rank. The running director has its own section so it
   // does not join the In-progress rows an operator scans against maxConcurrent; the permit
   // holders (rank 0) and the pipeline waiters (rank 1, labeled "Waiting to start") keep
   // sharing In progress (BUGS.md 2026-10-06).
-  const LOOP_GROUPS = [["Director", -1], ["In progress", 0, 1], ["Needs attention", 2], ["Paused", 3], ["Idle", 4]];
+  const ROLE_GROUPS = [["Director", -1], ["In progress", 0, 1], ["Needs attention", 2], ["Paused", 3], ["Idle", 4]];
   // The payload's alerts (team-alerts.ts teamAlerts — the TUI's attention lines use the same
   // list), plus the one only the page can know: that its server stopped answering.
   const OFFLINE_ALERT = { key: "offline", tone: "red", title: "Lost contact with the dashboard server",
@@ -140,15 +140,6 @@ export const GUI_CLIENT_MODEL_JS = String.raw `  // view-model:start
   // are information.
   const NEEDS_YOU = (a) => a.tone === "red" || a.tone === "amber" || a.tone === "indigo";
   const needsYou = (alerts) => alerts.filter(NEEDS_YOU).length;
-  // The needs-you alerts' keys — the set the sound cue diffs each poll against the last poll's.
-  const needsYouKeys = (alerts) => alerts.filter(NEEDS_YOU).map((a) => a.key);
-  // The needs-you keys of the given alerts that prevKeys (the previous poll's set, or null on
-  // the first poll) lacks — exactly the alerts a new cue should announce. A null prev yields
-  // every needs-you key, so a page opened onto an already-alerting team cues once.
-  const newNeedsYouKeys = (prevKeys, alerts) => {
-    const prior = new Set(prevKeys || []);
-    return needsYouKeys(alerts).filter((k) => !prior.has(k));
-  };
   // needs-you:end
   // An activity item's kind — its icon and tone, and whether the Notable filter keeps it.
   const ROUTINE_EVENTS = ${JSON.stringify(ROUTINE_EVENTS)};
@@ -172,7 +163,7 @@ export const GUI_CLIENT_MODEL_JS = String.raw `  // view-model:start
     const m = ENTRY_STAMP_RE.exec(String(t));
     return m ? { title: String(t).slice(0, m.index), meta: m[1] } : { title: String(t), meta: "" };
   }
-  // Queued prompts in execution order — the director's first, then each loop's — each with the
+  // Queued prompts in execution order — the director's first, then each role's — each with the
   // queue-file address its Cancel button sends (never a list position, so a stale frame can
   // never cancel the wrong prompt).
   function queuedPrompts(d) {

package/dist/src/ui/gui/gui-client-operator.js

@@ -1,4 +1,3 @@
-// vocabulary: plain
 import { PAUSE_REASON_MAX } from "../../team/team-state.js";
 /** The dashboard's team-wide operator controls, browser-side, all living in the sidebar so
  * they are in reach from every view: the daily spend badge — today's spend against the cap
@@ -6,16 +5,14 @@ import { PAUSE_REASON_MAX } from "../../team/team-state.js";
  * setter as the TUI's Ctrl+B) — the pause control, a menu of timed pauses with an
  * optional reason (POST /api/pause with `forSeconds` and `reason`, the CLI's
  * `pause --for`/`--reason`) that turns into a Resume button with the countdown while the
- * team is paused, and the sound toggle that mutes the alert cue (a per-browser preference,
- * no server call). Neither keeps optimistic state: after a successful
+ * team is paused. Neither keeps optimistic state: after a successful
  * POST the next status poll re-renders them from the server's answer, and a failed one toasts
  * the error and leaves the editor open. Spliced into gui-client.ts's script, where it reaches
  * the other sections' shared plumbing through that concatenation: the DOM and HTML helpers
  * ($, esc, icon), the formatters (fmtUsd, fmtCap, humanSeconds), the slot painter and toast
  * (paintPanel, showFlash), the POST helper (postJson), the click hook (onClick), the menu
  * registry (closeMenus, openMenu), the poll re-render (refresh, hoisted from gui-client-boot.ts
- * later in the join), the sound state it flips (soundMuted, setSoundMuted — gui-client-sound.ts
- * earlier in the join), and the shared page state it reads and invalidates (lastStatus,
+ * later in the join), and the shared page state it reads and invalidates (lastStatus,
  * lastPaint). Its own two popovers share their scaffolding through openPopover (each
  * supplies the html plus an onClosed that resets its flag and re-renders the slot), and
  * its two POSTs share their send-toast-close-repaint tail through the core's postAction. */
@@ -68,8 +65,8 @@ export const GUI_CLIENT_OPERATOR_JS = String.raw `  // shared-operator:start
   // The subscription usage window (plans/agent-backends.md §8, PLANS.md part 6d/7): the
   // sidebar's spend card renders it beside the daily spend, or in its place for a
   // subscription-only team. The label/status/clock rules mirror badges.ts's
-  // claudeWindowBadge — the preformatted header fragment the TUI uses cannot be reused here
-  // because the card lists EVERY window, not just the most constrained one.
+  // subscriptionWindowBadge — the preformatted header fragment the TUI uses cannot be reused here
+  // because the card lists EVERY window of EVERY block, not just the most constrained one.
   function windowLabel(type) {
     const m = /^(\w+)_(hour|day|week)$/.exec(String(type));
     if (!m) return String(type).replace(/_/g, " ");
@@ -94,6 +91,12 @@ export const GUI_CLIENT_OPERATOR_JS = String.raw `  // shared-operator:start
     if (hours < 24) return "resets in " + hours + "h " + (minutes % 60) + "m";
     return "resets in " + Math.floor(hours / 24) + "d " + (hours % 24) + "h";
   }
+  // A window's consumed fraction as a whole-number percent, the same shape as node-side
+  // utilizationPct - the browser script keeps its inline copy, so the text percentage and
+  // the meter width share this one home instead of each rounding w.utilization by hand.
+  function windowPct(w) {
+    return Math.round(w.utilization * 100);
+  }
   function chainMoved(chain) {
     return Object.values(chain || {}).some((t) => t.reason === "window" || t.reason === "reserve");
   }
@@ -106,12 +109,12 @@ export const GUI_CLIENT_OPERATOR_JS = String.raw `  // shared-operator:start
       return "<span class='side-card-value window-line'>" + esc(tier + " → " + t.pair + money + until) + "</span>";
     }).join("");
   }
-  function windowLine(w, cw, chain) {
-    const parts = ["Claude " + windowLabel(w.type)];
+  function windowLine(w, block, chain) {
+    const parts = [block.label + " " + windowLabel(w.type)];
     const word = windowWord(w.status);
-    parts.push(typeof w.utilization === "number" ? Math.round(w.utilization * 100) + "%" : word === "ok" ? "ok · usage not reported" : word);
+    parts.push(typeof w.utilization === "number" ? windowPct(w) + "%" : word === "ok" ? "ok · usage not reported" : word);
     if (w.isUsingOverage) parts.push("overage");
-    if (w.status === "rejected" && cw.heldUntil != null) parts.push((chainMoved(chain) ? "on fallback until " : "held until ") + windowClock(cw.heldUntil));
+    if (w.status === "rejected" && block.heldUntil != null) parts.push((chainMoved(chain) ? "on fallback until " : block.label + " model jobs wait until ") + windowClock(block.heldUntil));
     else if (w.status !== "reset" && typeof w.resetsAt === "number") parts.push(windowResets(w.resetsAt));
     return parts.join(" · ");
   }
@@ -120,35 +123,41 @@ export const GUI_CLIENT_OPERATOR_JS = String.raw `  // shared-operator:start
     if (w.status === "allowed_warning") return " t-amber";
     return "";
   }
-  function windowLinesHtml(cw, chain) {
-    if (!cw) return chainLinesHtml(chain);
-    // Shortest window first (5h above 7d), whatever order the server ranks severity in; an
-    // unlabelled type sorts last, then by type name. A copy, so cw.windows keeps its order.
+  function windowLinesHtml(blocks, only, chain) {
+    if (!blocks || blocks.length === 0) return chainLinesHtml(chain);
+    // One window line per block, its windows shortest-first (5h above 7d), whatever order
+    // the server ranks severity in; an unlabelled type sorts last, then by type name. A copy,
+    // so block.windows keeps its order.
+    return blocks.map((block) => blockLinesHtml(block, chain)).join("") + chainLinesHtml(chain);
+  }
+  function blockLinesHtml(block, chain) {
     const hours = (w) => {
       const m = /^(\d+)([hdw])$/.exec(windowLabel(w.type));
       return m ? Number(m[1]) * (m[2] === "h" ? 1 : m[2] === "d" ? 24 : 168) : Infinity;
     };
-    const shortestFirst = cw.windows.slice().sort((a, b) => (hours(a) === hours(b) ? (a.type < b.type ? -1 : a.type > b.type ? 1 : 0) : hours(a) < hours(b) ? -1 : 1));
+    const shortestFirst = block.windows.slice().sort((a, b) => (hours(a) === hours(b) ? (a.type < b.type ? -1 : a.type > b.type ? 1 : 0) : hours(a) < hours(b) ? -1 : 1));
     return shortestFirst.map((w) => {
-      const line = "<span class='side-card-value window-line" + windowLineTone(w) + "'>" + esc(windowLine(w, cw, chain)) + "</span>";
+      const line = "<span class='side-card-value window-line" + windowLineTone(w) + "'>" + esc(windowLine(w, block, chain)) + "</span>";
       if (typeof w.utilization !== "number") return line;
-      const pct = Math.min(100, Math.round(w.utilization * 100));
+      const pct = Math.min(100, windowPct(w));
       return line + meterBar(windowLineTone(w), pct);
-    }).join("") + chainLinesHtml(chain);
+    }).join("");
   }
   // The sidebar's spend card for a payload's budget block: a plain card for an all-free team
   // (no spend a cap could bind, so no editor), otherwise the button that opens the cap editor,
   // with a meter while a cap is set.
-  function budgetCardHtml(b, cw, chain) {
+  function budgetCardHtml(b, blocks, only, chain) {
     // A subscription-only team has no priced spend for a cap to bind, so the window card
-    // stands in place of the spend card and carries no editor.
-    if (cw && cw.only) {
+    // stands in place of the spend card and carries no editor — but only while a window block
+    // actually exists; an all-free subscription-only team (only and free, no windows) falls
+    // through to the "Free models" spend card below so it never renders an empty window card.
+    if (only && blocks && blocks.length > 0) {
       return "<div class='side-card' title='Claude.ai subscription usage windows — a rejected window pauses claude model jobs until it resets'>" +
-        "<span class='side-card-label'>" + icon("clock") + "Claude window</span>" + windowLinesHtml(cw, chain) + "</div>";
+        "<span class='side-card-label'>" + icon("clock") + "Claude window</span>" + windowLinesHtml(blocks, only, chain) + "</div>";
     }
     if (b.free) {
       return "<div class='side-card' title='Every model the team can use is cost n/a, so there is nothing to cap'>" +
-        "<span class='side-card-label'>" + icon("dollar") + "Spend</span><span class='side-card-value'>Free models</span>" + windowLinesHtml(cw, chain) + "</div>";
+        "<span class='side-card-label'>" + icon("dollar") + "Spend</span><span class='side-card-value'>Free models</span>" + windowLinesHtml(blocks, only, chain) + "</div>";
     }
     const capped = b.capUsd > 0;
     const pct = capped ? Math.min(100, (b.spentUsd / b.capUsd) * 100) : 0;
@@ -157,12 +166,12 @@ export const GUI_CLIENT_OPERATOR_JS = String.raw `  // shared-operator:start
       esc(capped ? "Today's spend against the daily cap — click to change the cap" : "No daily cap — click to set one") + "'>" +
       "<span class='side-card-label'>" + icon("dollar") + "Spent today<span class='edit'>" + (capped ? "Edit cap" : "Set a cap") + "</span></span>" +
       "<span class='side-card-value'>" + esc(fmtUsd(b.spentUsd)) + " <small>" + esc(capped ? "of " + fmtCap(b.capUsd) : "no daily cap") + "</small></span>" +
-      (capped ? meterBar(tone, pct.toFixed(1)) : "") + windowLinesHtml(cw, chain) + "</button>";
+      (capped ? meterBar(tone, pct.toFixed(1)) : "") + windowLinesHtml(blocks, only, chain) + "</button>";
   }
   function renderBudgetBadge(d) {
     if (budgetEditing) return; // the open editor owns the slot until save or cancel
     const b = d && d.budget;
-    paintPanel("budgetwrap", b ? budgetCardHtml(b, d && d.claudeWindow, d && d.chain) : "");
+    paintPanel("budgetwrap", b ? budgetCardHtml(b, d && d.subscriptionWindows, d && d.subscriptionOnly, d && d.chain) : "");
   }
   function openBudgetEditor() {
     const b = lastStatus && lastStatus.budget;
@@ -198,7 +207,19 @@ export const GUI_CLIENT_OPERATOR_JS = String.raw `  // shared-operator:start
     const t = String(raw).trim();
     if (t === "") return { ok: true, value: 0 };
     const n = Number(t);
-    if (!/^\d*\.?\d+$/.test(t) || !Number.isFinite(n) || n < 0 || n > Number.MAX_SAFE_INTEGER) {
+    // The two rejections are genuinely different rules, so they name their own one, mirroring
+    // the TUI's parseBudgetInput: the shape rejection (a fine number like "1e2" or "0x10"
+    // that is within the bound but that no one means as USD) names the plain-decimal rule,
+    // while the bounds rejection names the bound because a 25-digit run IS "a number of 0 or
+    // more". A single message would mislead: "1e2" is rejected as shape, yet would be told
+    // it is not a number of 0 or more.
+    if (!/^\d*\.?\d+$/.test(t)) {
+      return {
+        ok: false,
+        error: "the cap must be a plain dollar amount like 25, 12.50, or .5 — no +/-, exponent, or hex notation — leave it empty for no cap",
+      };
+    }
+    if (!Number.isFinite(n) || n < 0 || n > Number.MAX_SAFE_INTEGER) {
       return {
         ok: false,
         error: "the cap must be a number of 0 or more, at most " + Number.MAX_SAFE_INTEGER + " — leave it empty for no cap",
@@ -223,8 +244,12 @@ export const GUI_CLIENT_OPERATOR_JS = String.raw `  // shared-operator:start
     }
     const value = parsed.value;
     // A failure leaves the editor open so the value can be fixed.
-    await postAction("/api/budget", { maxDailyCostUsd: value },
-      value > 0 ? "Daily cap set to " + fmtCap(value) : "Daily cap removed");
+    await postAction("/api/budget", { maxDailyCostUsd: value }, (d) => {
+      if (d && d.unchanged) {
+        return "Daily cap is already " + (value > 0 ? fmtCap(value) : "removed") + " — nothing saved";
+      }
+      return value > 0 ? "Daily cap set to " + fmtCap(value) : "Daily cap removed";
+    });
   }
   onClick((t, ev) => {
     if (t.closest("#budgetbadge")) {
@@ -370,25 +395,4 @@ export const GUI_CLIENT_OPERATOR_JS = String.raw `  // shared-operator:start
     if (choice) postStopSchedule({ inSeconds: Number(choice.dataset.stopin) });
   });
   // stop-control:end
-
-  // sound-control:start
-  // The sidebar's sound control, beside the theme toggle: a speaker icon that flips between
-  // the unmuted and muted glyph. A per-browser preference (setSoundMuted stores it), not team
-  // state — no server call; the choice takes effect on the next cue.
-  function soundControlHtml() {
-    return "<button type='button' class='icon-btn' id='soundtoggle' title='" +
-      (soundMuted ? "Sound is muted — click to unmute the alert cue" : "Sound is on — click to mute the alert cue") +
-      "' aria-label='" + (soundMuted ? "Unmute" : "Mute") + " the alert cue'>" +
-      icon(soundMuted ? "mute" : "sound") + "</button>";
-  }
-  function renderSoundBadge() {
-    paintPanel("soundwrap", soundControlHtml());
-  }
-  function toggleSound() {
-    setSoundMuted(!soundMuted);
-    renderSoundBadge();
-  }
-  onClick((t) => {
-    if (t.closest("#soundtoggle")) toggleSound();
-  });
-  // sound-control:end`;
+`;