git-watchtower 2.2.2 → 2.3.0

package/src/server/web-ui/js.js

@@ -525,8 +525,10 @@ ${pureFnBlock}
     if (casino.lossFlashTimer) { clearInterval(casino.lossFlashTimer); casino.lossFlashTimer = null; }
     casino.winFlashFrames = 0;
     casino.lossFlashFrames = 0;
+    // Reels stay in DOM but drop the dynamic state classes — the casino
+    // layer's opacity transition handles hiding them visually.
     const reels = document.getElementById('casino-reels');
-    if (reels) reels.className = 'casino-reels';
+    if (reels) reels.className = 'casino-reels-header';
     const win = document.getElementById('casino-win-overlay');
     if (win) win.className = 'casino-overlay';
     const loss = document.getElementById('casino-loss-overlay');
@@ -546,7 +548,7 @@ ${pureFnBlock}
     }
     const reels = document.getElementById('casino-reels');
     if (!reels) return;
-    reels.className = 'casino-reels active spinning';
+    reels.className = 'casino-reels-header spinning';
     const label = document.getElementById('casino-reel-label');
     if (label) label.textContent = '';
     casino.reelSpinTimer = setInterval(() => {
@@ -569,7 +571,7 @@ ${pureFnBlock}
       const isJackpot = winLevel.key === 'jackpot' || winLevel.key === 'mega';
       const sym = isJackpot ? '7⃣' : CASINO_SYMBOLS[Math.floor(Math.random() * (CASINO_SYMBOLS.length - 1))];
       for (let i = 0; i < 5; i++) casinoSetReelSymbol(i, sym);
-      reels.className = 'casino-reels active result win';
+      reels.className = 'casino-reels-header result win';
       label.textContent = winLevel.label.replace(/^[^A-Z0-9]+/, '').trim() || 'WIN';
       label.style.color = winLevel.color;
       // Fire the centered banner.
@@ -577,19 +579,19 @@ ${pureFnBlock}
       // Let the flashing linger a beat, then settle.
       casino.reelResultClearTimer = setTimeout(() => {
         casino.reelResultClearTimer = null;
-        reels.className = 'casino-reels';
+        reels.className = 'casino-reels-header';
       }, isJackpot ? 4000 : 2400);
     } else {
       // No updates — show a random losing line and auto-fade.
       for (let i = 0; i < 5; i++) {
         casinoSetReelSymbol(i, CASINO_SYMBOLS[(casino.reelFrame + i * 3) % CASINO_SYMBOLS.length]);
       }
-      reels.className = 'casino-reels active result';
+      reels.className = 'casino-reels-header result';
       label.textContent = '\u{1f634} NOTHING';
       label.style.color = '#8b949e';
       casino.reelResultClearTimer = setTimeout(() => {
         casino.reelResultClearTimer = null;
-        reels.className = 'casino-reels';
+        reels.className = 'casino-reels-header';
       }, 2000);
     }
   }
@@ -652,42 +654,19 @@ ${pureFnBlock}
     return { hadUpdates, totalLines };
   }
 
-  function renderCasinoStats() {
-    const panel = document.getElementById('casino-stats-panel');
-    if (!panel) return;
-    const cs = state && state.casinoStats;
-    if (!cs) { panel.innerHTML = ''; return; }
-    const netClass = cs.netWinnings >= 0 ? 'pos' : 'neg';
-    const netSign = cs.netWinnings >= 0 ? '+' : '';
-    let html = '<div class="cstats-title">\u{1f3b0} CASINO WINNINGS \u{1f3b0}</div>';
-    html += '<div class="cstats-row"><span class="cstats-k">\u{1f4dd} Line Changes</span><span class="cstats-v"><span class="pos">+' + (cs.totalLinesAdded || 0) + '</span> / <span class="neg">-' + (cs.totalLinesDeleted || 0) + '</span> = <span class="gold">$' + (cs.totalLines || 0) + '</span></span></div>';
-    html += '<div class="cstats-row"><span class="cstats-k">\u{1f4b8} Poll Cost</span><span class="cstats-v neg">$' + (cs.totalPolls || 0) + '</span></div>';
-    html += '<div class="cstats-row"><span class="cstats-k">\u{1f4b0} Net Earnings</span><span class="cstats-v ' + netClass + '">' + netSign + '$' + (cs.netWinnings || 0) + '</span></div>';
-    html += '<div class="cstats-row"><span class="cstats-k">\u{1f3b0} House Edge</span><span class="cstats-v neon">' + (cs.houseEdge || 0) + '%</span></div>';
-    html += '<div class="cstats-row"><span class="cstats-k">\u{1f60e} Vibes</span><span class="cstats-v">' + escHtml(cs.vibesQuality || '') + '</span></div>';
-    html += '<div class="cstats-row"><span class="cstats-k">\u{1f3b2} Luck</span><span class="cstats-v gold">' + (cs.luckMeter || 0) + '%</span></div>';
-    html += '<div class="cstats-row"><span class="cstats-k">\u{1f9e0} Dopamine Hits</span><span class="cstats-v pos">' + (cs.dopamineHits || 0) + '</span></div>';
-    if (cs.consecutivePolls > 1) {
-      html += '<div class="cstats-row"><span class="cstats-k">\u{1f525} Streak</span><span class="cstats-v gold">' + cs.consecutivePolls + 'x</span></div>';
-    }
-    html += '<div class="cstats-row"><span class="cstats-k">⏱ Session</span><span class="cstats-v">' + escHtml(cs.sessionDuration || '') + '</span></div>';
-    panel.innerHTML = html;
-  }
-
   // Apply/tear down casino mode based on state.casinoModeEnabled.
+  // Stats rendering is handled by renderDashboardStats — this function
+  // only owns the body class flip, header icon swap, and timer cleanup.
   function reconcileCasinoMode() {
     if (!state) return;
     const enabled = !!state.casinoModeEnabled;
     document.body.classList.toggle('casino-active', enabled);
-    if (!enabled) {
-      if (ui.prevCasinoEnabled) {
-        casinoCleanup();
-        ui.prevCasinoEnabled = false;
-      }
-      return;
+    const icon = document.getElementById('header-icon');
+    if (icon) icon.innerHTML = enabled ? '\u{1f3b0}' : '\u{1f3f0}';
+    if (!enabled && ui.prevCasinoEnabled) {
+      casinoCleanup();
     }
-    ui.prevCasinoEnabled = true;
-    renderCasinoStats();
+    ui.prevCasinoEnabled = enabled;
   }
 
   // Drive reel spin/stop from the polling status transition, and fire win
@@ -710,6 +689,10 @@ ${pureFnBlock}
   function render() {
     if (!state) return;
 
+    // Apply casino mode FIRST so a later renderer throwing (the SSE
+    // handler wraps render() in try/catch) can't swallow casino effects.
+    reconcileCasinoMode();
+
     // Header — hide project name pill when tabs are showing it
     const projectEl = document.getElementById('project-name');
     const hasTabs = state.projects && state.projects.length > 1;
@@ -739,10 +722,8 @@ ${pureFnBlock}
 
     renderBranches();
     renderActivityLog();
-    renderSessionStats();
-    renderSessionStatsCard();
+    renderDashboardStats();
     renderPrefsBar();
-    reconcileCasinoMode();
 
     // Auto-show update notification (once per session)
     if (state.updateAvailable && !ui.updateNotificationShown && !anyModalOpen()) {
@@ -890,7 +871,7 @@ ${pureFnBlock}
     let html = '';
     for (let i = 0; i < log.length; i++) {
       const entry = log[i];
-      const t = '';
+      let t = '';
       if (entry.timestamp) {
         const d = new Date(entry.timestamp);
         t = isNaN(d.getTime()) ? '' : d.toLocaleTimeString();
@@ -1217,60 +1198,71 @@ ${pureFnBlock}
 
   function hideUpdate() { updateModal.hide(); }
 
-  // ── Session Stats ──────────────────────────────────────────────
-  function renderSessionStats() {
-    if (!state || !state.sessionStats) return;
-    const s = state.sessionStats;
-    const bar = document.getElementById('stats-bar');
-    const activeBranches = 0;
-    const staleBranches = 0;
-    if (state.branches) {
-      for (let i = 0; i < state.branches.length; i++) {
-        const b = state.branches[i];
-        // Consider stale if no updates and not current
-        if (b.justUpdated || b.name === state.currentBranch) {
-          activeBranches++;
-        } else {
-          staleBranches++;
-        }
-      }
-    }
-    let html = '';
-    html += '<span class="stat-item"><span class="stat-label">Session:</span> <span class="stat-value">' + escHtml(s.sessionDuration || '0m') + '</span></span>';
-    html += '<span class="stat-item"><span class="stat-label">Lines:</span> <span class="stat-value">+' + (s.linesAdded || 0) + '/-' + (s.linesDeleted || 0) + '</span></span>';
-    html += '<span class="stat-item"><span class="stat-label">Polls:</span> <span class="stat-value">' + (s.totalPolls || 0) + '</span> <span class="stat-label">(' + (s.hitRate || 0) + '% hit)</span></span>';
-    if (s.lastUpdate) {
-      html += '<span class="stat-item"><span class="stat-label">Last update:</span> <span class="stat-value">' + escHtml(s.lastUpdate) + '</span></span>';
+  // ── Dashboard Stats Bar ────────────────────────────────────────
+  // Permanent row above the keyboard footer. Default: grounded session
+  // metrics. When casino mode is on the same row re-skins to "casino
+  // winnings" — same DOM, different content + .casino-mode class.
+  function renderDashboardStats() {
+    const bar = document.getElementById('dashboard-stats');
+    if (!bar) return;
+    if (state && state.casinoModeEnabled && state.casinoStats) {
+      bar.className = 'dashboard-stats casino-mode';
+      bar.innerHTML = renderCasinoStatsRow(state.casinoStats);
+    } else {
+      bar.className = 'dashboard-stats';
+      bar.innerHTML = renderSessionStatsRow();
     }
-    html += '<span class="stat-item"><span class="stat-label">Active:</span> <span class="stat-value">' + activeBranches + '</span> <span class="stat-label">Stale:</span> <span class="stat-value">' + staleBranches + '</span></span>';
-    bar.innerHTML = html;
   }
 
-  // ── Session Stats Card (sidebar) ───────────────────────────────
-  // Lives at the top of the activity log. Real, grounded numbers the
-  // dashboard always shows — not dependent on casino mode.
-  function renderSessionStatsCard() {
-    const card = document.getElementById('session-stats-card');
-    if (!card) return;
+  function renderSessionStatsRow() {
     const s = state && state.sessionStats;
-    if (!s) { card.innerHTML = ''; return; }
+    if (!s) return '';
     const branches = (state && state.branches) || [];
-    let activeCount = 0;
-    let staleCount = 0;
+    let active = 0;
+    let stale = 0;
     for (let i = 0; i < branches.length; i++) {
       const b = branches[i];
-      if (b.justUpdated || b.name === state.currentBranch) activeCount++;
-      else staleCount++;
-    }
-    let html = '';
-    html += '<span class="stat-k">Session</span><span class="stat-v">' + escHtml(s.sessionDuration || '0m') + '</span>';
-    html += '<span class="stat-k">Lines</span><span class="stat-v"><span class="added">+' + fmtCompact(s.linesAdded || 0) + '</span> <span class="sep">/</span> <span class="deleted">-' + fmtCompact(s.linesDeleted || 0) + '</span></span>';
-    html += '<span class="stat-k">Polls</span><span class="stat-v">' + (s.totalPolls || 0) + ' <span class="sep">·</span> <span class="accent">' + (s.hitRate || 0) + '%</span> hit</span>';
-    if (s.lastUpdate) {
-      html += '<span class="stat-k">Last hit</span><span class="stat-v">' + escHtml(s.lastUpdate) + '</span>';
-    }
-    html += '<span class="stat-k">Branches</span><span class="stat-v">' + activeCount + ' <span class="sep">active</span> <span class="sep">·</span> ' + staleCount + ' <span class="sep">stale</span></span>';
-    card.innerHTML = html;
+      if (b.justUpdated || b.name === state.currentBranch) active++;
+      else stale++;
+    }
+    const stat = (k, v) => '<span class="stat"><span class="stat-k">' + k + '</span><span class="stat-v">' + v + '</span></span>';
+    // Left = identity / what session this is.
+    let left = '<div class="stats-group">';
+    left += '<span class="stats-title">\u{1f4ca} Session Stats</span>';
+    left += stat('Duration', escHtml(s.sessionDuration || '0m'));
+    left += stat('Branches', active + ' <span class="sep">active</span> <span class="sep">·</span> ' + stale + ' <span class="sep">stale</span>');
+    left += '</div>';
+    // Right = live activity readouts.
+    let right = '<div class="stats-group">';
+    right += stat('Lines', '<span class="added">+' + fmtCompact(s.linesAdded || 0) + '</span> <span class="sep">/</span> <span class="deleted">-' + fmtCompact(s.linesDeleted || 0) + '</span>');
+    right += stat('Polls', (s.totalPolls || 0) + ' <span class="sep">·</span> <span class="accent">' + (s.hitRate || 0) + '%</span> hit');
+    if (s.lastUpdate) right += stat('Last hit', escHtml(s.lastUpdate));
+    right += '</div>';
+    return left + right;
+  }
+
+  function renderCasinoStatsRow(cs) {
+    const netClass = cs.netWinnings >= 0 ? 'pos' : 'neg';
+    const netSign = cs.netWinnings >= 0 ? '+' : '';
+    const stat = (k, v) => '<span class="stat"><span class="stat-k">' + k + '</span><span class="stat-v">' + v + '</span></span>';
+    const dollar = '$';  // avoid bare $ in generated JS — see js.dom.test.js
+    // Left = identity + the underlying churn that drove the winnings.
+    let left = '<div class="stats-group">';
+    left += '<span class="stats-title">\u{1f3b0} Casino Stats</span>';
+    left += stat('Session', escHtml(cs.sessionDuration || ''));
+    left += stat('\u{1f4dd} Lines', '<span class="pos">+' + (cs.totalLinesAdded || 0) + '</span> <span class="sep">/</span> <span class="neg">-' + (cs.totalLinesDeleted || 0) + '</span> <span class="sep">=</span> <span class="gold">' + dollar + (cs.totalLines || 0) + '</span>');
+    left += '</div>';
+    // Right = the gambling readouts (fast-changing, attention-grabbing).
+    let right = '<div class="stats-group">';
+    right += stat('\u{1f4b8} Cost', '<span class="neg">' + dollar + (cs.totalPolls || 0) + '</span>');
+    right += stat('\u{1f4b0} Net', '<span class="' + netClass + '">' + netSign + dollar + (cs.netWinnings || 0) + '</span>');
+    right += stat('\u{1f3b0} Edge', '<span class="neon">' + (cs.houseEdge || 0) + '%</span>');
+    right += stat('\u{1f3b2} Luck', '<span class="gold">' + (cs.luckMeter || 0) + '%</span>');
+    right += stat('\u{1f60e} Vibes', escHtml(cs.vibesQuality || ''));
+    right += stat('\u{1f9e0} Hits', '<span class="pos">' + (cs.dopamineHits || 0) + '</span>');
+    if (cs.consecutivePolls > 1) right += stat('\u{1f525} Streak', '<span class="gold">' + cs.consecutivePolls + 'x</span>');
+    right += '</div>';
+    return left + right;
   }
 
   // ── Error Toast with Stash Hint ────────────────────────────────

package/src/utils/sound.js

@@ -3,30 +3,57 @@
  * @module utils/sound
  */
 
-const { exec } = require('child_process');
+const { execFile } = require('child_process');
+
+const noop = () => {};
+
+const playBell = () => {
+  process.stdout.write('\x07');
+};
+
+// Linux audio-tool cascade. Each entry is [command, args]; we try them in
+// order and fall through on non-zero exit, ending in a terminal bell.
+// Mirrors the previous shell `||` chain without spawning a shell.
+const LINUX_ATTEMPTS = [
+  ['paplay', ['/usr/share/sounds/freedesktop/stereo/message-new-instant.oga']],
+  ['paplay', ['/usr/share/sounds/freedesktop/stereo/complete.oga']],
+  ['aplay', ['-q', '/usr/share/sounds/sound-icons/prompt.wav']],
+];
+
+function cascade(attempts, onAllFailed, options) {
+  if (attempts.length === 0) {
+    onAllFailed();
+    return;
+  }
+  const [cmd, args] = attempts[0];
+  execFile(cmd, args, options, (err) => {
+    if (err) cascade(attempts.slice(1), onAllFailed, options);
+  });
+}
 
 /**
  * Play a system notification sound (non-blocking).
- * Cross-platform: macOS (afplay), Linux (paplay/aplay), Windows (terminal bell).
+ *
+ * Cross-platform: macOS (afplay), Linux (paplay/aplay cascade), Windows
+ * (terminal bell). Uses execFile (no shell) to match the pattern in
+ * casino/sounds.js — the previous exec calls passed fixed strings so
+ * there was no injection surface either way, but dropping the shell
+ * removes the per-call /bin/sh fork and makes the two sound modules
+ * consistent.
+ *
  * @param {object} [options]
- * @param {string} [options.cwd] - Working directory for exec
+ * @param {string} [options.cwd] - Working directory
  */
 function playSound(options = {}) {
   const { platform } = process;
   const cwd = options.cwd || process.cwd();
 
   if (platform === 'darwin') {
-    exec('afplay /System/Library/Sounds/Pop.aiff 2>/dev/null', { cwd });
+    execFile('afplay', ['/System/Library/Sounds/Pop.aiff'], { cwd }, noop);
   } else if (platform === 'linux') {
-    exec(
-      'paplay /usr/share/sounds/freedesktop/stereo/message-new-instant.oga 2>/dev/null || ' +
-      'paplay /usr/share/sounds/freedesktop/stereo/complete.oga 2>/dev/null || ' +
-      'aplay /usr/share/sounds/sound-icons/prompt.wav 2>/dev/null || ' +
-      'printf "\\a"',
-      { cwd }
-    );
+    cascade(LINUX_ATTEMPTS, playBell, { cwd });
   } else {
-    process.stdout.write('\x07');
+    playBell();
   }
 }