feat: full-screen confetti when week/month crosses a 100M-token milestone

HduSy · claude · HduSy · commit b421d0483bfd · 2026-06-15T23:21:49.000+08:00
Celebrate every new 100M tokens of usage with a full-screen, click-through
fireworks overlay (like a Product Hunt launch).

- Detection watches week ∪ month floors of ⌊total/100M⌋ (day is implied by
  month, except a calendar week can straddle a month boundary, so both are
  kept). Baselined on first observation so launch never fires retroactively;
  a single chunk advancing both floors fires once.
- Overlay is a non-activating NSPanel on the primary monitor: transparent,
  mouse-event-ignoring (clicks pass through), focus-stealing-free, and able
  to float over apps in native fullscreen (MoveToActiveSpace |
  FullScreenAuxiliary). It auto-hides after the animation; an active flag
  prevents overlapping celebrations.
- Animation (public/confetti.html) is a dependency-free canvas: a staggered
  series of confetti bursts at random positions around the screen centre.
- Bump version to 0.1.16.

Co-Authored-By: Claude &lt;noreply@anthropic.com&gt;
diff --git a/public/confetti.html b/public/confetti.html
@@ -0,0 +1,147 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Tokenscope Celebration</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: transparent;
+        /* the window is click-through at the OS level too, but be safe */
+        pointer-events: none;
+        user-select: none;
+      }
+      #c {
+        display: block;
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="c"></canvas>
+    <script>
+      (function () {
+        const cv = document.getElementById("c");
+        const ctx = cv.getContext("2d");
+        let W = 0,
+          H = 0,
+          dpr = 1;
+
+        function resize() {
+          dpr = window.devicePixelRatio || 1;
+          W = window.innerWidth;
+          H = window.innerHeight;
+          cv.width = Math.round(W * dpr);
+          cv.height = Math.round(H * dpr);
+          ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        }
+        resize();
+        window.addEventListener("resize", resize);
+
+        // Festive, Product-Hunt-style multi-colour palette.
+        const COLORS = [
+          "#ff5e5b", "#ffd23f", "#1f9d63", "#34c27e", "#3b82f6",
+          "#a855f7", "#ff8c42", "#ec4899", "#00c2ff", "#ffffff",
+        ];
+
+        let parts = [];
+        let raf = null;
+        let stopAt = 0;
+        let timers = [];
+
+        const rand = (a, b) => a + Math.random() * (b - a);
+
+        // Spawn `count` confetti from (x,y) in a radial spray of strength `power`,
+        // with a slight upward bias (`upBias`) so particles arc up then rain down.
+        function spray(x, y, count, power, upBias) {
+          for (let i = 0; i < count; i++) {
+            const ang = rand(0, Math.PI * 2);
+            const sp = rand(power * 0.35, power);
+            parts.push({
+              x, y,
+              vx: Math.cos(ang) * sp,
+              vy: Math.sin(ang) * sp - rand(upBias * 0.4, upBias),
+              g: rand(0.12, 0.22),
+              size: rand(6, 12),
+              color: COLORS[(Math.random() * COLORS.length) | 0],
+              rot: rand(0, Math.PI * 2),
+              vr: rand(-0.3, 0.3),
+              shape: Math.random() < 0.5 ? "rect" : "circ",
+              life: 1,
+              decay: rand(0.005, 0.012),
+              sway: rand(0.4, 1.4),
+              swayP: rand(0, Math.PI * 2),
+            });
+          }
+        }
+
+        // A firework burst at a random position around the centre of the screen.
+        function firework() {
+          const n = rand(65, 95) | 0;
+          spray(W * rand(0.2, 0.8), H * rand(0.22, 0.66), n, rand(11, 15), 2);
+        }
+
+        function tick() {
+          ctx.clearRect(0, 0, W, H);
+          for (let i = parts.length - 1; i >= 0; i--) {
+            const p = parts[i];
+            p.vy += p.g;
+            p.vx *= 0.99;
+            p.swayP += 0.08;
+            p.x += p.vx + Math.sin(p.swayP) * p.sway * 0.3;
+            p.y += p.vy;
+            p.rot += p.vr;
+            p.life -= p.decay;
+            if (p.life <= 0 || p.y > H + 40) {
+              parts.splice(i, 1);
+              continue;
+            }
+            ctx.save();
+            ctx.globalAlpha = Math.max(0, Math.min(1, p.life));
+            ctx.translate(p.x, p.y);
+            ctx.rotate(p.rot);
+            ctx.fillStyle = p.color;
+            if (p.shape === "rect") {
+              ctx.fillRect(-p.size / 2, -p.size / 3, p.size, p.size * 0.66);
+            } else {
+              ctx.beginPath();
+              ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2);
+              ctx.fill();
+            }
+            ctx.restore();
+          }
+          if (parts.length > 0 || performance.now() < stopAt) {
+            raf = requestAnimationFrame(tick);
+          } else {
+            raf = null;
+            ctx.clearRect(0, 0, W, H);
+          }
+        }
+
+        // (Re)start a celebration. Safe to call repeatedly; the backend triggers
+        // this via eval, and we also auto-run it on first load.
+        window.__burst = function () {
+          resize();
+          timers.forEach(clearTimeout);
+          timers = [];
+          // A staggered series of bursts at random positions around the centre.
+          firework();
+          [140, 340, 580, 850, 1150, 1500, 1900].forEach((t) =>
+            timers.push(setTimeout(firework, t))
+          );
+          // Stop emitting after ~2.2s; existing confetti keeps falling/fading.
+          stopAt = performance.now() + 2200;
+          if (!raf) raf = requestAnimationFrame(tick);
+        };
+
+        window.addEventListener("load", () => window.__burst());
+      })();
+    </script>
+  </body>
+</html>
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "tokenscope"
-version = "0.1.15"
+version = "0.1.16"
 description = "Claude CLI token usage dashboard"
 authors = ["you"]
 edition = "2021"
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
@@ -5,7 +5,7 @@ mod pricing;
 mod store;
 
 use model::Dashboard;
-use std::sync::atomic::{AtomicI64, Ordering};
+use std::sync::atomic::{AtomicBool, AtomicI64, Ordering};
 use std::sync::Arc;
 use std::time::{SystemTime, UNIX_EPOCH};
 use tauri::{
@@ -41,9 +41,159 @@ fn refresh(app: &tauri::AppHandle) {
     if let Some(tray) = app.tray_by_id("main") {
         let _ = tray.set_title(Some(fmt_tokens_m(dash.today_tokens)));
     }
+    check_milestones(app, &dash);
     let _ = app.emit("dashboard-updated", &dash);
 }
 
+/// 100M-token celebration state. `floors` holds the last-seen ⌊total/100M⌋ for
+/// (week, month); `None` until the first observation baselines it (so we never
+/// fire retroactively for usage that already happened before launch). `active`
+/// guards against overlapping celebrations.
+struct Celebration {
+    floors: std::sync::Mutex<Option<(i64, i64)>>,
+    active: AtomicBool,
+}
+
+/// Fire one full-screen celebration whenever the week OR month total crosses a
+/// new 100M-token boundary. We watch only week ∪ month, not day: today is always
+/// within both the current week and month, so a day crossing is already implied
+/// by the month — but a calendar week can straddle a month boundary, so early in
+/// a month the week total can lead the (freshly reset) month, hence both.
+/// Dedup is inherent: a single chunk of usage advancing both floors at once
+/// still calls celebrate() once.
+fn check_milestones(app: &tauri::AppHandle, dash: &Dashboard) {
+    let Some(state) = app.try_state::<Celebration>() else {
+        return;
+    };
+    // total_tokens is already in millions, so a 100M milestone is total / 100.
+    let wf = (dash.week.metrics.total_tokens / 100.0).floor() as i64;
+    let mf = (dash.month.metrics.total_tokens / 100.0).floor() as i64;
+    let mut g = state.floors.lock().unwrap();
+    let fire = match *g {
+        None => false, // first observation: baseline only, never celebrate
+        Some((pw, pm)) => wf > pw || mf > pm,
+    };
+    *g = Some((wf, mf)); // always update (also walks the baseline back down on a period reset)
+    drop(g);
+    if fire {
+        celebrate(app);
+    }
+}
+
+/// Trigger the celebration overlay. Window/panel work must run on the main
+/// thread (refresh() runs on a background thread), so hop there.
+fn celebrate(app: &tauri::AppHandle) {
+    let handle = app.clone();
+    let _ = app.run_on_main_thread(move || show_celebration(&handle));
+}
+
+/// Show (or reuse) a full-screen, click-through, non-activating overlay on the
+/// primary monitor and run the confetti animation, then hide it after it plays.
+/// Must be called on the main thread.
+fn show_celebration(app: &tauri::AppHandle) {
+    let Some(state) = app.try_state::<Celebration>() else {
+        return;
+    };
+    // Skip if a celebration is already playing.
+    if state.active.swap(true, Ordering::SeqCst) {
+        return;
+    }
+
+    let (pos, size) = match app.primary_monitor() {
+        Ok(Some(m)) => (*m.position(), *m.size()),
+        _ => {
+            state.active.store(false, Ordering::SeqCst);
+            return;
+        }
+    };
+
+    let existed = app.get_webview_window("confetti").is_some();
+    let win = match app.get_webview_window("confetti") {
+        Some(w) => w,
+        None => {
+            match tauri::WebviewWindowBuilder::new(
+                app,
+                "confetti",
+                tauri::WebviewUrl::App("confetti.html".into()),
+            )
+            .title("Tokenscope Celebration")
+            .inner_size(size.width as f64, size.height as f64)
+            .decorations(false)
+            .transparent(true)
+            .shadow(false)
+            .always_on_top(true)
+            .skip_taskbar(true)
+            .focused(false)
+            .resizable(false)
+            .visible(false)
+            .build()
+            {
+                Ok(w) => w,
+                Err(_) => {
+                    state.active.store(false, Ordering::SeqCst);
+                    return;
+                }
+            }
+        }
+    };
+
+    // Cover the whole primary monitor and let clicks pass through to the apps
+    // beneath — the celebration must never interrupt what the user is doing.
+    let _ = win.set_position(pos);
+    let _ = win.set_size(size);
+    let _ = win.set_ignore_cursor_events(true);
+
+    #[cfg(target_os = "macos")]
+    {
+        use tauri_nspanel::cocoa::appkit::NSWindowCollectionBehavior;
+        #[allow(non_upper_case_globals)]
+        const NS_NONACTIVATING_PANEL: i32 = 1 << 7;
+
+        // Convert to a non-activating panel once, so it can float over apps in
+        // native fullscreen without stealing focus (same approach as the main
+        // popover). On reuse the window is already a panel.
+        if !existed {
+            if let Ok(panel) = win.to_panel() {
+                panel.set_level(25); // NSMainMenuWindowLevel (24) + 1
+                panel.set_style_mask(NS_NONACTIVATING_PANEL);
+                panel.set_collection_behaviour(
+                    NSWindowCollectionBehavior::NSWindowCollectionBehaviorMoveToActiveSpace
+                        | NSWindowCollectionBehavior::NSWindowCollectionBehaviorFullScreenAuxiliary,
+                );
+            }
+        }
+        let _ = win.eval("window.__burst&&window.__burst()");
+        if let Ok(panel) = app.get_webview_panel("confetti") {
+            panel.show();
+        }
+    }
+    #[cfg(not(target_os = "macos"))]
+    {
+        let _ = win.eval("window.__burst&&window.__burst()");
+        let _ = win.show();
+    }
+
+    // Hide once the animation has played out (emission ~2.3s + fall/fade).
+    let app2 = app.clone();
+    std::thread::spawn(move || {
+        std::thread::sleep(Duration::from_millis(4200));
+        let app3 = app2.clone();
+        let _ = app2.run_on_main_thread(move || {
+            #[cfg(target_os = "macos")]
+            if let Ok(panel) = app3.get_webview_panel("confetti") {
+                panel.order_out(None);
+            }
+            #[cfg(not(target_os = "macos"))]
+            if let Some(w) = app3.get_webview_window("confetti") {
+                let _ = w.hide();
+            }
+            if let Some(st) = app3.try_state::<Celebration>() {
+                st.active.store(false, Ordering::SeqCst);
+            }
+        });
+    });
+}
+
 /// Last tray-icon rectangle (physical px: x, y, width, height), captured on tray
 /// click. Used to anchor the panel like tauri-plugin-positioner's
 /// TrayBottomCenter — but we can't use the positioner itself on a swizzled
@@ -193,6 +343,7 @@ fn get_dashboard(app: tauri::AppHandle) -> Dashboard {
     if let Some(tray) = app.tray_by_id("main") {
         let _ = tray.set_title(Some(fmt_tokens_m(dash.today_tokens)));
     }
+    check_milestones(&app, &dash);
     dash
 }
 
@@ -253,6 +404,12 @@ pub fn run() {
             #[cfg(target_os = "macos")]
             app.manage(TrayAnchor(std::sync::Mutex::new(None)));
 
+            // 100M-token celebration tracking (baselined on first observation).
+            app.manage(Celebration {
+                floors: std::sync::Mutex::new(None),
+                active: AtomicBool::new(false),
+            });
+
             // Launch at login (idempotent — safe to call every start).
             let _ = app.autolaunch().enable();
 
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Tokenscope",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "identifier": "com.tokenscope.app",
   "build": {
     "beforeDevCommand": "pnpm dev",

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "https://schema.tauri.app/config/2",`
`3`	`3`	`"productName": "Tokenscope",`
`4`		`- "version": "0.1.15",`
	`4`	`+ "version": "0.1.16",`
`5`	`5`	`"identifier": "com.tokenscope.app",`
`6`	`6`	`"build": {`
`7`	`7`	`"beforeDevCommand": "pnpm dev",`