git-watchtower 2.0.3 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-watchtower",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Terminal-based Git branch monitor with activity sparklines and optional dev server with live reload",
   "main": "bin/git-watchtower.js",
   "bin": {

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

@@ -909,6 +909,299 @@ function getDashboardCss() {
   .pref-btn:hover { background: var(--bg-surface-hover); color: var(--text-dim); border-color: var(--text-muted); }
   .pref-btn.active { background: var(--accent-dim); color: #fff; border-color: var(--accent-dim); }
 
+  /* ── Session Stats Card (sidebar) ─────────────────────────────── */
+  .session-stats-card {
+    padding: 10px 16px 12px;
+    border-bottom: 1px solid var(--border-subtle);
+    font-size: 11px;
+    color: var(--text-dim);
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 4px 10px;
+    background: var(--bg);
+  }
+  .session-stats-card .stat-k {
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+    font-size: 10px;
+    font-weight: 600;
+    align-self: center;
+  }
+  .session-stats-card .stat-v {
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    text-align: right;
+  }
+  .session-stats-card .stat-v .sep { color: var(--text-muted); }
+  .session-stats-card .stat-v .added { color: var(--green); }
+  .session-stats-card .stat-v .deleted { color: var(--red); }
+  .session-stats-card .stat-v .accent { color: var(--accent); }
+
+  /* ── Casino Mode ──────────────────────────────────────────────── */
+  .casino-layer {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 90;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  body.casino-active .casino-layer { opacity: 1; }
+
+  /* Marquee: neon border that cycles hues around the viewport. Pure CSS
+     so we don't burn a JS timer for something a single keyframe can do. */
+  .casino-marquee {
+    position: absolute;
+    inset: 0;
+    border: 4px solid transparent;
+    border-radius: 0;
+    box-shadow:
+      inset 0 0 24px rgba(255, 64, 180, 0.45),
+      inset 0 0 60px rgba(255, 220, 64, 0.2);
+    background:
+      linear-gradient(var(--bg), var(--bg)) padding-box,
+      conic-gradient(
+        from 0deg,
+        #ff2d7a, #ffd400, #30ff9c, #29d4ff, #b070ff, #ff2d7a
+      ) border-box;
+    animation: casino-marquee-spin 6s linear infinite;
+  }
+  @keyframes casino-marquee-spin {
+    to { filter: hue-rotate(360deg); }
+  }
+  /* Running chase lights along the top and bottom edges */
+  .casino-marquee::before,
+  .casino-marquee::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 6px;
+    background-image: repeating-linear-gradient(
+      90deg,
+      #ffd400 0 10px,
+      transparent 10px 20px,
+      #ff2d7a 20px 30px,
+      transparent 30px 40px,
+      #29d4ff 40px 50px,
+      transparent 50px 60px
+    );
+    background-size: 60px 6px;
+    opacity: 0.85;
+  }
+  .casino-marquee::before { top: 0; animation: casino-chase-right 1.2s linear infinite; }
+  .casino-marquee::after { bottom: 0; animation: casino-chase-left 1.2s linear infinite; }
+  @keyframes casino-chase-right { to { background-position: 60px 0; } }
+  @keyframes casino-chase-left { to { background-position: -60px 0; } }
+
+  /* Flashing "MAX ADDICTION" header badge */
+  .casino-badge {
+    position: absolute;
+    top: 10px;
+    right: 140px;
+    padding: 3px 10px;
+    border-radius: 10px;
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+    color: #fff200;
+    background: linear-gradient(90deg, #b10096, #ff2d7a);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 0 14px rgba(255, 45, 122, 0.6);
+    animation: casino-badge-flash 0.6s steps(2, end) infinite;
+  }
+  @keyframes casino-badge-flash {
+    0%, 100% {
+      background: linear-gradient(90deg, #b10096, #ff2d7a);
+      color: #fff200;
+    }
+    50% {
+      background: linear-gradient(90deg, #ffd400, #ff9a00);
+      color: #b10096;
+    }
+  }
+
+  /* Slot reels — sits just under the header */
+  .casino-reels {
+    position: absolute;
+    top: 57px;
+    left: 50%;
+    transform: translateX(-50%) translateY(-20px);
+    display: flex;
+    gap: 6px;
+    padding: 8px 14px;
+    background: linear-gradient(180deg, #1a1022, #120818);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 10px;
+    box-shadow:
+      0 10px 24px rgba(0, 0, 0, 0.45),
+      0 0 18px rgba(255, 45, 122, 0.35);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s, transform 0.25s;
+  }
+  .casino-reels.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
+  }
+  .casino-reel {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    line-height: 1;
+    background: #fff;
+    border-radius: 6px;
+    box-shadow:
+      inset 0 -6px 10px rgba(0, 0, 0, 0.1),
+      inset 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  .casino-reels.spinning .casino-reel {
+    animation: casino-reel-blur 0.1s linear infinite;
+  }
+  .casino-reels.spinning .casino-reel[data-reel="1"] { animation-delay: 0.03s; }
+  .casino-reels.spinning .casino-reel[data-reel="2"] { animation-delay: 0.06s; }
+  .casino-reels.spinning .casino-reel[data-reel="3"] { animation-delay: 0.09s; }
+  .casino-reels.spinning .casino-reel[data-reel="4"] { animation-delay: 0.12s; }
+  @keyframes casino-reel-blur {
+    0%   { transform: translateY(-2px); filter: blur(0.6px); }
+    50%  { transform: translateY(2px);  filter: blur(0.6px); }
+    100% { transform: translateY(-2px); filter: blur(0.6px); }
+  }
+  .casino-reels.win .casino-reel {
+    animation: casino-reel-winflash 0.24s steps(2, end) infinite;
+  }
+  @keyframes casino-reel-winflash {
+    0%, 100% { background: #fff; }
+    50%      { background: #ffd400; }
+  }
+  .casino-reel-label {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    white-space: nowrap;
+    text-shadow: 0 0 10px currentColor;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+  .casino-reels.result .casino-reel-label { opacity: 1; }
+
+  /* Centered win / loss overlay flashing banner */
+  .casino-overlay {
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.85);
+    padding: 18px 48px;
+    font-size: 32px;
+    font-weight: 900;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: #fff200;
+    background: linear-gradient(135deg, #b10096, #ff2d7a);
+    border: 3px solid rgba(255, 255, 255, 0.35);
+    border-radius: 14px;
+    box-shadow:
+      0 0 40px rgba(255, 45, 122, 0.7),
+      0 0 80px rgba(255, 220, 64, 0.4);
+    text-shadow: 0 2px 0 rgba(0,0,0,0.3);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.15s, transform 0.2s;
+  }
+  .casino-overlay.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, -50%) scale(1);
+    animation: casino-overlay-flash 0.2s steps(2, end) infinite;
+  }
+  @keyframes casino-overlay-flash {
+    0%, 100% { filter: brightness(1); }
+    50%      { filter: brightness(1.35) saturate(1.3); }
+  }
+  .casino-overlay.level-small   { background: linear-gradient(135deg, #116b2a, #3fb950); }
+  .casino-overlay.level-medium  { background: linear-gradient(135deg, #7a5600, #ffd400); color: #2a1200; }
+  .casino-overlay.level-large   { background: linear-gradient(135deg, #ba6a00, #ff9a00); color: #2a1200; }
+  .casino-overlay.level-huge    { background: linear-gradient(135deg, #7a00ba, #bc8cff); }
+  .casino-overlay.level-jackpot {
+    background: linear-gradient(135deg, #007a82, #29d4ff);
+    color: #fff;
+    animation-duration: 0.12s;
+  }
+  .casino-overlay.level-mega {
+    background: linear-gradient(135deg, #b10000, #ff2d2d);
+    animation-duration: 0.08s;
+    font-size: 40px;
+  }
+  .casino-overlay.loss {
+    background: linear-gradient(135deg, #2a0000, #b10000);
+    color: #fff;
+    font-size: 26px;
+  }
+
+  /* Floating stats panel. Slides in from the right when casino is on. */
+  .casino-stats-panel {
+    position: absolute;
+    right: 16px;
+    bottom: 56px;
+    width: 340px;
+    padding: 12px 14px;
+    background: linear-gradient(160deg, #1a0a24, #0f0616);
+    border: 2px solid #ff2d7a;
+    border-radius: 10px;
+    box-shadow:
+      0 0 20px rgba(255, 45, 122, 0.45),
+      0 8px 28px rgba(0, 0, 0, 0.6);
+    color: var(--text);
+    font-size: 12px;
+    transform: translateX(calc(100% + 32px));
+    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
+    pointer-events: auto;
+  }
+  body.casino-active .casino-stats-panel { transform: translateX(0); }
+  .casino-stats-panel .cstats-title {
+    font-weight: 800;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    font-size: 11px;
+    color: #ffd400;
+    margin-bottom: 8px;
+    text-align: center;
+    text-shadow: 0 0 8px rgba(255, 220, 64, 0.6);
+  }
+  .casino-stats-panel .cstats-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3px 0;
+    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
+    font-family: var(--font-mono);
+  }
+  .casino-stats-panel .cstats-row:last-child { border-bottom: none; }
+  .casino-stats-panel .cstats-k {
+    color: var(--text-dim);
+    font-family: var(--font);
+    font-size: 11px;
+  }
+  .casino-stats-panel .cstats-v { font-weight: 700; }
+  .casino-stats-panel .cstats-v.pos  { color: #3fb950; }
+  .casino-stats-panel .cstats-v.neg  { color: #f85149; }
+  .casino-stats-panel .cstats-v.gold { color: #ffd400; }
+  .casino-stats-panel .cstats-v.neon { color: #29d4ff; }
+
   @media (max-width: 900px) {
   }
 `;

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

@@ -39,6 +39,7 @@ function getDashboardHtml() {
 
   <div class="side-panel" id="side-panel">
     <div class="panel-header">Activity Log <button class="sidebar-toggle" id="sidebar-toggle" title="Toggle sidebar">&#x25b6;</button></div>
+    <div class="session-stats-card" id="session-stats-card"></div>
     <div class="activity-log" id="activity-log"></div>
   </div>
 
@@ -59,6 +60,26 @@ function getDashboardHtml() {
   </div>
 </div>
 
+<!-- Casino Mode overlay layer. Everything inside is hidden by default and
+     only becomes visible when body has the .casino-active class (driven by
+     state.casinoModeEnabled). Pointer-events are off so it never blocks
+     clicks on the real dashboard underneath. -->
+<div class="casino-layer" id="casino-layer">
+  <div class="casino-marquee" id="casino-marquee"></div>
+  <div class="casino-reels" id="casino-reels">
+    <div class="casino-reel" data-reel="0">&#x1f3b0;</div>
+    <div class="casino-reel" data-reel="1">&#x1f3b0;</div>
+    <div class="casino-reel" data-reel="2">&#x1f3b0;</div>
+    <div class="casino-reel" data-reel="3">&#x1f3b0;</div>
+    <div class="casino-reel" data-reel="4">&#x1f3b0;</div>
+    <div class="casino-reel-label" id="casino-reel-label"></div>
+  </div>
+  <div class="casino-overlay" id="casino-win-overlay"></div>
+  <div class="casino-overlay loss" id="casino-loss-overlay"></div>
+  <div class="casino-badge" id="casino-badge">&#x1f3b0; MAX ADDICTION &#x1f3b0;</div>
+  <div class="casino-stats-panel" id="casino-stats-panel"></div>
+</div>
+
 <div class="flash" id="flash"></div>
 <div class="confirm-overlay" id="confirm-overlay">
   <div class="confirm-box" id="confirm-box"></div>

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

@@ -40,6 +40,8 @@ function getDashboardJs() {
   // from the server-pushed 'state' above.
   const ui = {
     prevBranches: null,
+    prevPollingStatus: 'idle',
+    prevCasinoEnabled: false,
     selectedIndex: 0,
     searchMode: false,
     searchQuery: '',
@@ -60,6 +62,35 @@ function getDashboardJs() {
     remoteTabPollTimer: null,
   };
 
+  // Casino mode client state. Kept separate so it can be fully torn down
+  // on disable without touching unrelated UI state.
+  const casino = {
+    reelSpinTimer: null,
+    reelFrame: 0,
+    reelResultClearTimer: null,
+    winFlashTimer: null,
+    winFlashFrames: 0,
+    lossFlashTimer: null,
+    lossFlashFrames: 0,
+    lastTotalPollsWithUpdates: null,
+  };
+  const CASINO_SYMBOLS = ['\u{1f352}','\u{1f34b}','\u{1f34a}','\u{1f347}','\u{1f514}','\u{1f48e}','7⃣','\u{1f3b0}'];
+  const CASINO_WIN_LEVELS = [
+    { key: 'small',   min: 1,    max: 49,    label: '✨ WIN',        color: '#3fb950' },
+    { key: 'medium',  min: 50,   max: 199,   label: '\u{1f389} NICE WIN!', color: '#ffd400' },
+    { key: 'large',   min: 200,  max: 499,   label: '\u{1f525} BIG WIN!',  color: '#ff9a00' },
+    { key: 'huge',    min: 500,  max: 999,   label: '\u{1f4a5} HUGE WIN!', color: '#bc8cff' },
+    { key: 'jackpot', min: 1000, max: 4999,  label: '\u{1f4b0} JACKPOT! \u{1f4b0}', color: '#29d4ff' },
+    { key: 'mega',    min: 5000, max: Infinity, label: '\u{1f3b0} MEGA JACKPOT!!! \u{1f3b0}', color: '#ff2d2d' },
+  ];
+  function getCasinoWinLevel(totalLines) {
+    for (let i = 0; i < CASINO_WIN_LEVELS.length; i++) {
+      const lvl = CASINO_WIN_LEVELS[i];
+      if (totalLines >= lvl.min && totalLines <= lvl.max) return lvl;
+    }
+    return null;
+  }
+
   // ── Persistent Preferences (localStorage) ─────────────────────
   const PREFS_KEY = 'git-watchtower-prefs';
   function loadPrefs() {
@@ -218,7 +249,12 @@ function getDashboardJs() {
             diffBranchesForNotifications(state.branches, newState.branches || []);
           }
           ui.prevBranches = state ? state.branches : null;
+          // Casino effects key off the edge between two SSE frames — grab
+          // the transition BEFORE the new state replaces the old.
+          const prevBranchesForCasino = state ? state.branches : null;
           state = newState;
+          onStateTransition(newState, prevBranchesForCasino);
+          ui.prevPollingStatus = newState.pollingStatus;
         } else {
           if (state) {
             state.projects = newState.projects;
@@ -476,6 +512,200 @@ ${pureFnBlock}
     });
   };
 
+  // ── Casino Mode ────────────────────────────────────────────────
+  // The terminal drives reel/win animations from server-side timers; in
+  // the browser we drive them off state transitions instead. That lets us
+  // avoid pushing a frame-by-frame stream over SSE and keeps effects local
+  // to each connected client.
+
+  function casinoCleanup() {
+    if (casino.reelSpinTimer) { clearInterval(casino.reelSpinTimer); casino.reelSpinTimer = null; }
+    if (casino.reelResultClearTimer) { clearTimeout(casino.reelResultClearTimer); casino.reelResultClearTimer = null; }
+    if (casino.winFlashTimer) { clearInterval(casino.winFlashTimer); casino.winFlashTimer = null; }
+    if (casino.lossFlashTimer) { clearInterval(casino.lossFlashTimer); casino.lossFlashTimer = null; }
+    casino.winFlashFrames = 0;
+    casino.lossFlashFrames = 0;
+    const reels = document.getElementById('casino-reels');
+    if (reels) reels.className = 'casino-reels';
+    const win = document.getElementById('casino-win-overlay');
+    if (win) win.className = 'casino-overlay';
+    const loss = document.getElementById('casino-loss-overlay');
+    if (loss) loss.className = 'casino-overlay loss';
+  }
+
+  function casinoSetReelSymbol(idx, emoji) {
+    const el = document.querySelector('.casino-reel[data-reel="' + idx + '"]');
+    if (el) el.textContent = emoji;
+  }
+
+  function casinoStartSpinning() {
+    if (casino.reelSpinTimer) return;
+    if (casino.reelResultClearTimer) {
+      clearTimeout(casino.reelResultClearTimer);
+      casino.reelResultClearTimer = null;
+    }
+    const reels = document.getElementById('casino-reels');
+    if (!reels) return;
+    reels.className = 'casino-reels active spinning';
+    const label = document.getElementById('casino-reel-label');
+    if (label) label.textContent = '';
+    casino.reelSpinTimer = setInterval(() => {
+      casino.reelFrame++;
+      for (let i = 0; i < 5; i++) {
+        const idx = (casino.reelFrame + i * 3) % CASINO_SYMBOLS.length;
+        casinoSetReelSymbol(i, CASINO_SYMBOLS[idx]);
+      }
+    }, 100);
+  }
+
+  function casinoStopSpinning(hadUpdates, totalLines) {
+    if (casino.reelSpinTimer) { clearInterval(casino.reelSpinTimer); casino.reelSpinTimer = null; }
+    const reels = document.getElementById('casino-reels');
+    const label = document.getElementById('casino-reel-label');
+    if (!reels || !label) return;
+    const winLevel = hadUpdates ? getCasinoWinLevel(totalLines || 1) : null;
+
+    if (hadUpdates && winLevel) {
+      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';
+      label.textContent = winLevel.label.replace(/^[^A-Z0-9]+/, '').trim() || 'WIN';
+      label.style.color = winLevel.color;
+      // Fire the centered banner.
+      casinoTriggerWin(winLevel);
+      // Let the flashing linger a beat, then settle.
+      casino.reelResultClearTimer = setTimeout(() => {
+        casino.reelResultClearTimer = null;
+        reels.className = 'casino-reels';
+      }, 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';
+      label.textContent = '\u{1f634} NOTHING';
+      label.style.color = '#8b949e';
+      casino.reelResultClearTimer = setTimeout(() => {
+        casino.reelResultClearTimer = null;
+        reels.className = 'casino-reels';
+      }, 2000);
+    }
+  }
+
+  function casinoTriggerWin(winLevel) {
+    const overlay = document.getElementById('casino-win-overlay');
+    if (!overlay) return;
+    overlay.textContent = winLevel.label;
+    overlay.className = 'casino-overlay active level-' + winLevel.key;
+    if (casino.winFlashTimer) clearInterval(casino.winFlashTimer);
+    casino.winFlashFrames = 0;
+    const maxFrames = (winLevel.key === 'jackpot' || winLevel.key === 'mega') ? 30 : 16;
+    casino.winFlashTimer = setInterval(() => {
+      casino.winFlashFrames++;
+      if (casino.winFlashFrames >= maxFrames) {
+        clearInterval(casino.winFlashTimer);
+        casino.winFlashTimer = null;
+        overlay.className = 'casino-overlay';
+      }
+    }, 120);
+  }
+
+  function casinoTriggerLoss(message) {
+    const overlay = document.getElementById('casino-loss-overlay');
+    if (!overlay) return;
+    overlay.textContent = '\u{1f480} ' + (message || 'BUST!') + ' \u{1f480}';
+    overlay.className = 'casino-overlay loss active';
+    if (casino.lossFlashTimer) clearInterval(casino.lossFlashTimer);
+    casino.lossFlashFrames = 0;
+    casino.lossFlashTimer = setInterval(() => {
+      casino.lossFlashFrames++;
+      if (casino.lossFlashFrames >= 12) {
+        clearInterval(casino.lossFlashTimer);
+        casino.lossFlashTimer = null;
+        overlay.className = 'casino-overlay loss';
+      }
+    }, 130);
+  }
+
+  // Sum up the line churn from branches that just transitioned to
+  // justUpdated. Mirrors how the terminal decides a poll was a "win".
+  function casinoMeasureUpdate(prevBranches, newBranches, newAheadBehind) {
+    if (!newBranches) return { hadUpdates: false, totalLines: 0 };
+    const prevMap = {};
+    if (prevBranches) {
+      for (let i = 0; i < prevBranches.length; i++) prevMap[prevBranches[i].name] = prevBranches[i];
+    }
+    let hadUpdates = false;
+    let totalLines = 0;
+    for (let i = 0; i < newBranches.length; i++) {
+      const nb = newBranches[i];
+      const ob = prevMap[nb.name];
+      const transitioned = nb.justUpdated && (!ob || !ob.justUpdated);
+      if (transitioned) {
+        hadUpdates = true;
+        const ab = newAheadBehind ? newAheadBehind[nb.name] : null;
+        if (ab) totalLines += (ab.linesAdded || 0) + (ab.linesDeleted || 0);
+      }
+    }
+    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.
+  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;
+    }
+    ui.prevCasinoEnabled = true;
+    renderCasinoStats();
+  }
+
+  // Drive reel spin/stop from the polling status transition, and fire win
+  // effects when new updates land. Called from the SSE state handler so
+  // we see each edge exactly once.
+  function onStateTransition(newState, prevBranches) {
+    if (!newState.casinoModeEnabled) return;
+    const prevStatus = ui.prevPollingStatus;
+    const newStatus = newState.pollingStatus;
+    if (newStatus === 'fetching' && prevStatus !== 'fetching') {
+      casinoStartSpinning();
+    } else if (prevStatus === 'fetching' && newStatus !== 'fetching') {
+      const { hadUpdates, totalLines } = casinoMeasureUpdate(prevBranches, newState.branches, newState.aheadBehindCache);
+      casinoStopSpinning(hadUpdates, totalLines);
+    }
+    if (newState.hasMergeConflict) casinoTriggerLoss('MERGE CONFLICT!');
+  }
+
   // ── Render ─────────────────────────────────────────────────────
   function render() {
     if (!state) return;
@@ -510,7 +740,9 @@ ${pureFnBlock}
     renderBranches();
     renderActivityLog();
     renderSessionStats();
+    renderSessionStatsCard();
     renderPrefsBar();
+    reconcileCasinoMode();
 
     // Auto-show update notification (once per session)
     if (state.updateAvailable && !ui.updateNotificationShown && !anyModalOpen()) {
@@ -1014,6 +1246,33 @@ ${pureFnBlock}
     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;
+    const s = state && state.sessionStats;
+    if (!s) { card.innerHTML = ''; return; }
+    const branches = (state && state.branches) || [];
+    let activeCount = 0;
+    let staleCount = 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;
+  }
+
   // ── Error Toast with Stash Hint ────────────────────────────────
   function showErrorToastWithHint(message, hint) {
     const container = document.getElementById('toast-container');

package/src/server/web.js

@@ -14,6 +14,7 @@ const http = require('http');
 const { getWebDashboardHtml } = require('./web-ui');
 const { version: PACKAGE_VERSION } = require('../../package.json');
 const sessionStats = require('../stats/session');
+const casino = require('../casino');
 
 /**
  * Default web dashboard port
@@ -122,6 +123,13 @@ class WebDashboardServer {
 
       // UI
       soundEnabled: s.soundEnabled,
+      casinoModeEnabled: s.casinoModeEnabled,
+      // Casino stats track server-side regardless of which surface toggled
+      // the mode on, so the web dashboard can render the same winnings box
+      // the terminal does. Null when disabled — keeps payload small and
+      // avoids ticking Math.random()/Date.now() into every SSE push when
+      // nobody's asked for the effect.
+      casinoStats: s.casinoModeEnabled ? casino.getStats() : null,
       projectName: s.projectName,
 
       // Activity