feat: save a full panel screenshot to the Desktop

Add a camera button beside the theme toggle that rasterizes the entire
panel — full scrollable content, including the charts and heatmap — to a
2x PNG and writes it to ~/Desktop via a new save_screenshot command. DOM
rasterization (modern-screenshot) avoids the macOS Screen Recording
permission entirely, and the capture button itself is filtered out of the
shot. A top-of-panel toast confirms "Saved to Desktop" / "Screenshot
failed".

Bump version to 0.1.19.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: HduSy

index.html

@@ -15,6 +15,22 @@
       *:focus-visible {
         outline: none !important;
       }
+      /* Spinner shown on the screenshot button while a capture is in flight. */
+      @keyframes om-spin {
+        to { transform: rotate(360deg); }
+      }
+      .om-spin {
+        animation: om-spin 0.7s linear infinite;
+        transform-origin: 50% 50%;
+      }
+      /* Screenshot save/fail toast — fades in at the top of the panel. */
+      @keyframes om-toast-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      .om-toast {
+        animation: om-toast-in 0.18s ease-out;
+      }
     </style>
   </head>
   <body>

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^2.1.1",
+    "modern-screenshot": "^4.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 [package]
 name = "tokenscope"
-version = "0.1.18"
+version = "0.1.19"
 description = "Claude CLI token usage dashboard"
 authors = ["you"]
 edition = "2021"
@@ -14,6 +14,8 @@ tauri-build = { version = "2", features = [] }
 
 [dependencies]
 tauri = { version = "2", features = ["tray-icon", "macos-private-api"] }
+# decode the base64 PNG body of a screenshot data URL (see save_screenshot)
+base64 = "0.22"
 tauri-plugin-shell = "2"
 tauri-plugin-autostart = "2"
 tauri-plugin-positioner = { version = "2", features = ["tray-icon"] }

src-tauri/Cargo.lock

@@ -415,6 +415,29 @@ fn get_dashboard(app: tauri::AppHandle) -> Dashboard {
     dash
 }
 
+/// Save a full-panel screenshot (a `data:image/png;base64,...` URL captured in
+/// the webview) to the user's Desktop as `Tokenscope <date> at <time>.png`.
+/// DOM rasterization sidesteps macOS Screen Recording permission entirely.
+/// Returns the written file path on success.
+#[tauri::command]
+fn save_screenshot(data_url: String) -> Result<String, String> {
+    use base64::Engine;
+    let body = data_url
+        .strip_prefix("data:image/png;base64,")
+        .ok_or_else(|| "expected a data:image/png;base64,... URL".to_string())?;
+    let bytes = base64::engine::general_purpose::STANDARD
+        .decode(body.trim())
+        .map_err(|e| format!("invalid base64: {e}"))?;
+
+    let dir = dirs::desktop_dir()
+        .ok_or_else(|| "could not resolve the Desktop directory".to_string())?;
+    let stamp = chrono::Local::now().format("Tokenscope %Y-%m-%d at %H.%M.%S.png");
+    let path = dir.join(stamp.to_string());
+
+    std::fs::write(&path, &bytes).map_err(|e| format!("failed to write file: {e}"))?;
+    Ok(path.to_string_lossy().into_owned())
+}
+
 /// For CLI/example validation against real logs.
 pub fn dashboard_json() -> String {
     serde_json::to_string_pretty(&parser::build_dashboard()).unwrap_or_default()
@@ -462,7 +485,7 @@ pub fn run() {
     }
 
     builder
-        .invoke_handler(tauri::generate_handler![get_dashboard])
+        .invoke_handler(tauri::generate_handler![get_dashboard, save_screenshot])
         .setup(move |app| {
             // Menu-bar–only app: no Dock icon, runs in the background.
             #[cfg(target_os = "macos")]

src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Tokenscope",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "identifier": "com.tokenscope.app",
   "build": {
     "beforeDevCommand": "pnpm dev",

src-tauri/src/lib.rs

@@ -1,6 +1,8 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { listen } from "@tauri-apps/api/event";
 import { getCurrentWindow } from "@tauri-apps/api/window";
+import { invoke } from "@tauri-apps/api/core";
+import { domToPng } from "modern-screenshot";
 import {
   Dashboard, PeriodReport, ModelStat, Theme, TH,
   fetchDashboard, fmtInt, fmtTokens, pct,
@@ -158,6 +160,28 @@ function ThemeToggle({ dark, theme, onToggle }: { dark: boolean; theme: Theme; o
   );
 }
 
+function ScreenshotButton({ theme, busy, onClick }: { theme: Theme; busy: boolean; onClick: () => void }) {
+  const t = theme;
+  return (
+    <button onClick={onClick} disabled={busy} title="Save screenshot to Desktop" aria-label="save screenshot" style={{
+      display: "inline-flex", alignItems: "center", justifyContent: "center",
+      width: 26, height: 26, borderRadius: 7, cursor: busy ? "default" : "pointer", padding: 0,
+      background: t.segBg, border: `1px solid ${t.segBorder}`, color: t.dim,
+    }}>
+      {busy ? (
+        <svg className="om-spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={t.dim} strokeWidth="2.6" strokeLinecap="round">
+          <path d="M12 3a9 9 0 1 0 9 9" />
+        </svg>
+      ) : (
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={t.dim} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M3 8.5A2.5 2.5 0 0 1 5.5 6h1.7l1.1-1.6A1.5 1.5 0 0 1 9.5 4h5a1.5 1.5 0 0 1 1.2.4L16.8 6h1.7A2.5 2.5 0 0 1 21 8.5v8A2.5 2.5 0 0 1 18.5 19h-13A2.5 2.5 0 0 1 3 16.5z" />
+          <circle cx="12" cy="12.2" r="3.4" />
+        </svg>
+      )}
+    </button>
+  );
+}
+
 function Panel({ dash, dark, onToggleTheme, openGen, active }: { dash: Dashboard; dark: boolean; onToggleTheme: () => void; openGen: number; active: boolean }) {
   const t = TH[dark ? "dark" : "light"];
   const [period, setPeriod] = useState<"Day" | "Week" | "Month">("Week");
@@ -182,9 +206,56 @@ function Panel({ dash, dark, onToggleTheme, openGen, active }: { dash: Dashboard
   const tokenShares = sharePcts(tokenModels.map((m) => m.tokens));
   const trendSub = { Day: "today 24h", Week: "this week", Month: "this month" }[period];
 
+  // screenshot capture: rasterize the full panel card to a PNG and hand it to
+  // the Rust `save_screenshot` command (browser preview falls back to a download).
+  const [shotBusy, setShotBusy] = useState(false);
+  const [toast, setToast] = useState<{ msg: string; ok: boolean } | null>(null);
+  const toastTimer = useRef<number | null>(null);
+  const showToast = (msg: string, ok: boolean) => {
+    if (toastTimer.current) window.clearTimeout(toastTimer.current);
+    setToast({ msg, ok });
+    toastTimer.current = window.setTimeout(() => setToast(null), 1800);
+  };
+  const captureScreenshot = async () => {
+    if (shotBusy) return;
+    const el = document.querySelector<HTMLElement>(".om-scroll");
+    if (!el) { showToast("Nothing to capture", false); return; }
+    setShotBusy(true);
+    try {
+      // explicit width/height = full scrollable content, not just the viewport;
+      // filter drops the capture button itself (and its in-flight spinner) so
+      // the saved image is a clean dashboard, not a shot of the button.
+      const dataUrl = await domToPng(el, {
+        scale: 2,
+        backgroundColor: dark ? "#1f2226" : "#ffffff",
+        width: el.scrollWidth,
+        height: el.scrollHeight,
+        filter: (n) => !(n instanceof HTMLElement && n.getAttribute("aria-label") === "save screenshot"),
+      });
+      const inTauri = typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
+      if (inTauri) {
+        await invoke<string>("save_screenshot", { dataUrl });
+        showToast("Saved to Desktop", true);
+      } else {
+        const a = document.createElement("a");
+        a.href = dataUrl;
+        a.download = "tokenscope.png";
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        showToast("Downloaded", true);
+      }
+    } catch {
+      showToast("Screenshot failed", false);
+    } finally {
+      setShotBusy(false);
+    }
+  };
+
   return (
     <div style={{
       width: "100%", height: "100vh", overflow: "hidden", boxSizing: "border-box",
+      position: "relative",
       background: "transparent", padding: 0,
       fontFamily: t.ui,
     }}>
@@ -209,6 +280,7 @@ function Panel({ dash, dark, onToggleTheme, openGen, active }: { dash: Dashboard
           <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
             <Segmented value={period} theme={t} onSelect={(v) => setPeriod(v as any)} />
             <ThemeToggle dark={dark} theme={t} onToggle={onToggleTheme} />
+            <ScreenshotButton theme={t} busy={shotBusy} onClick={captureScreenshot} />
           </div>
         </div>
         {/* scrolling body */}
@@ -301,6 +373,18 @@ function Panel({ dash, dark, onToggleTheme, openGen, active }: { dash: Dashboard
         </div>
         </div>{/* /scrolling body */}
       </div>
+      {toast && (
+        <div className="om-toast" style={{
+          position: "absolute", top: 58, left: "50%", transform: "translateX(-50%)",
+          zIndex: 20, whiteSpace: "nowrap", pointerEvents: "none",
+          font: `600 12px ${t.mono}`, color: "#fff",
+          background: toast.ok ? t.accent : "#e0795f",
+          padding: "7px 13px", borderRadius: 9,
+          boxShadow: "0 8px 22px rgba(0,0,0,0.34)",
+        }}>
+          {toast.msg}
+        </div>
+      )}
     </div>
   );
 }