feat(annual-report): add command count stats and improve share card UI

MarkShawn2020 · claude · MarkShawn2020 · commit f378d8bd6ae2 · 2025-12-30T09:38:48.000+07:00
- Add total_commands field to annual report data structure - Extract command usage from session history as fallback stats - Improve share card with stats period badge and 3-column layout - Add QR code asset for sharing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/public/lovcode-qrcode.png b/public/lovcode-qrcode.png
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
@@ -3731,6 +3731,7 @@ pub struct TopCommand {
 pub struct AnnualReport2025 {
     pub total_sessions: usize,
     pub total_messages: usize,
+    pub total_commands: usize,
     pub active_days: usize,
     pub first_chat_date: Option<String>,
     pub last_chat_date: Option<String>,
@@ -3835,6 +3836,8 @@ async fn get_annual_report_2025() -> Result<AnnualReport2025, String> {
         let mut total_sessions = 0usize;
         let mut total_messages = 0usize;
         let mut project_stats: HashMap<String, (String, usize, usize)> = HashMap::new(); // id -> (path, sessions, messages)
+        let mut command_counts: HashMap<String, usize> = HashMap::new(); // command -> count (fallback)
+        let command_pattern = regex::Regex::new(r"<command-name>(/[^<]+)</command-name>").ok();
 
         if projects_dir.exists() {
             if let Ok(entries) = fs::read_dir(&projects_dir) {
@@ -3889,6 +3892,19 @@ async fn get_annual_report_2025() -> Result<AnnualReport2025, String> {
                                         if parsed.get("type").and_then(|t| t.as_str()) != Some("meta") {
                                             msg_count += 1;
                                         }
+                                        // Extract commands from assistant messages (for fallback stats)
+                                        if let Some(pattern) = &command_pattern {
+                                            if let Some(text) = parsed.get("message").and_then(|m| {
+                                                m.get("content").and_then(|c| c.as_str())
+                                            }) {
+                                                for cap in pattern.captures_iter(text) {
+                                                    if let Some(cmd_match) = cap.get(1) {
+                                                        let cmd = cmd_match.as_str().trim_start_matches('/').to_string();
+                                                        *command_counts.entry(cmd).or_insert(0) += 1;
+                                                    }
+                                                }
+                                            }
+                                        }
                                     }
                                 }
 
@@ -3920,26 +3936,61 @@ async fn get_annual_report_2025() -> Result<AnnualReport2025, String> {
                 message_count: *messages,
             });
 
-        // Get top commands from command-stats index
+        // Get top commands from command-stats index (aggregate weekly data) or fallback to extracted
         let mut top_commands: Vec<TopCommand> = Vec::new();
-        let index_path = get_claude_dir().join("command-stats.json");
-        if index_path.exists() {
-            if let Ok(content) = fs::read_to_string(&index_path) {
-                if let Ok(stats) = serde_json::from_str::<HashMap<String, usize>>(&content) {
-                    let mut sorted: Vec<_> = stats.into_iter().collect();
-                    sorted.sort_by(|a, b| b.1.cmp(&a.1));
-                    top_commands = sorted
-                        .into_iter()
-                        .take(5)
-                        .map(|(name, count)| TopCommand { name, count })
-                        .collect();
+        let stats_path = get_command_stats_path();
+        let mut use_fallback = true;
+
+        if stats_path.exists() {
+            if let Ok(content) = fs::read_to_string(&stats_path) {
+                if let Ok(parsed) = serde_json::from_str::<serde_json::Value>(&content) {
+                    if let Some(commands) = parsed.get("commands").and_then(|v| v.as_object()) {
+                        let mut aggregated: HashMap<String, usize> = HashMap::new();
+                        for (cmd_name, week_data) in commands {
+                            if let Some(weeks) = week_data.as_object() {
+                                let total: usize = weeks
+                                    .values()
+                                    .filter_map(|v| v.as_u64())
+                                    .map(|n| n as usize)
+                                    .sum();
+                                aggregated.insert(cmd_name.clone(), total);
+                            }
+                        }
+                        if !aggregated.is_empty() {
+                            let mut sorted: Vec<_> = aggregated.into_iter().collect();
+                            sorted.sort_by(|a, b| b.1.cmp(&a.1));
+                            top_commands = sorted
+                                .into_iter()
+                                .take(5)
+                                .map(|(name, count)| TopCommand { name, count })
+                                .collect();
+                            use_fallback = false;
+                        }
+                    }
                 }
             }
         }
 
+        // Fallback: use command counts extracted from session files
+        if use_fallback && !command_counts.is_empty() {
+            let mut sorted: Vec<_> = command_counts.into_iter().collect();
+            sorted.sort_by(|a, b| b.1.cmp(&a.1));
+            top_commands = sorted
+                .into_iter()
+                .take(5)
+                .map(|(name, count)| TopCommand { name, count })
+                .collect();
+        }
+
+        // Count local commands
+        let total_commands = list_local_commands()
+            .map(|cmds| cmds.len())
+            .unwrap_or(0);
+
         Ok(AnnualReport2025 {
             total_sessions,
             total_messages,
+            total_commands,
             active_days: daily_activity.len(),
             first_chat_date: first_date,
             last_chat_date: last_date,
@@ -4429,6 +4480,11 @@ fn write_file(path: String, content: String) -> Result<(), String> {
     fs::write(&path, content).map_err(|e| e.to_string())
 }
 
+#[tauri::command]
+fn write_binary_file(path: String, data: Vec<u8>) -> Result<(), String> {
+    fs::write(&path, data).map_err(|e| e.to_string())
+}
+
 #[tauri::command]
 fn update_mcp_env(server_name: String, env_key: String, env_value: String) -> Result<(), String> {
     let claude_json_path = get_claude_json_path();
@@ -6120,6 +6176,7 @@ pub fn run() {
             get_mcp_config_path,
             get_home_dir,
             write_file,
+            write_binary_file,
             update_mcp_env,
             update_settings_env,
             delete_settings_env,
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -242,6 +242,7 @@ export interface TopCommand {
 export interface AnnualReport2025 {
   total_sessions: number;
   total_messages: number;
+  total_commands: number;
   active_days: number;
   first_chat_date: string | null;
   last_chat_date: string | null;
diff --git a/src/views/AnnualReport/AnnualReport2025.tsx b/src/views/AnnualReport/AnnualReport2025.tsx
@@ -3,6 +3,9 @@ import { createPortal } from "react-dom";
 import { motion, AnimatePresence } from "framer-motion";
 import { Cross2Icon, ChevronDownIcon, DownloadIcon } from "@radix-ui/react-icons";
 import { domToCanvas } from "modern-screenshot";
+import { save } from "@tauri-apps/plugin-dialog";
+import { invoke } from "@tauri-apps/api/core";
+import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import type { AnnualReport2025 as AnnualReportData } from "../../types";
 import { useInvokeQuery } from "../../hooks";
 
@@ -482,48 +485,89 @@ function ShareableCard({ report }: { report: AnnualReportData }) {
             boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
           }}
         >
-          {/* 2x2 Core Stats Grid - Unified warm colors */}
+          {/* Stats Period Badge */}
+          <div
+            style={{
+              textAlign: "center",
+              marginBottom: 12,
+              paddingBottom: 12,
+              borderBottom: "1px solid rgba(216,90,42,0.1)",
+            }}
+          >
+            <span
+              style={{
+                fontSize: 10,
+                color: "#AA7A6A",
+                background: "rgba(216,90,42,0.08)",
+                padding: "4px 12px",
+                borderRadius: 10,
+                fontWeight: 500,
+              }}
+            >
+              统计周期：{report.first_chat_date || "2025.01"} - {report.last_chat_date || "2025.12"}
+            </span>
+          </div>
+
+          {/* 3-column Core Stats Grid */}
           <div
             style={{
               display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: 12,
+              gridTemplateColumns: "1fr 1fr 1fr",
+              gap: 8,
             }}
           >
             {/* Conversations */}
-            <div style={{ textAlign: "center", padding: 12 }}>
-              <div style={{ fontSize: 11, color: "#996B5B", marginBottom: 4, fontWeight: 600 }}>对话总数</div>
-              <div style={{ fontSize: 38, fontWeight: 800, color: "#D85A2A", lineHeight: 1 }}>
+            <div style={{ textAlign: "center", padding: 10 }}>
+              <div style={{ fontSize: 10, color: "#996B5B", marginBottom: 4, fontWeight: 600 }}>对话</div>
+              <div style={{ fontSize: 28, fontWeight: 800, color: "#D85A2A", lineHeight: 1 }}>
                 {report.total_sessions.toLocaleString()}
               </div>
-              <div style={{ fontSize: 11, color: "#AA7A6A", marginTop: 2 }}>次</div>
+              <div style={{ fontSize: 10, color: "#AA7A6A", marginTop: 2 }}>次</div>
             </div>
 
             {/* Messages */}
-            <div style={{ textAlign: "center", padding: 12 }}>
-              <div style={{ fontSize: 11, color: "#996B5B", marginBottom: 4, fontWeight: 600 }}>消息数量</div>
-              <div style={{ fontSize: 38, fontWeight: 800, color: "#E8734A", lineHeight: 1 }}>
+            <div style={{ textAlign: "center", padding: 10 }}>
+              <div style={{ fontSize: 10, color: "#996B5B", marginBottom: 4, fontWeight: 600 }}>消息</div>
+              <div style={{ fontSize: 28, fontWeight: 800, color: "#E8734A", lineHeight: 1 }}>
                 {report.total_messages.toLocaleString()}
               </div>
-              <div style={{ fontSize: 11, color: "#AA7A6A", marginTop: 2 }}>条</div>
+              <div style={{ fontSize: 10, color: "#AA7A6A", marginTop: 2 }}>条</div>
+            </div>
+
+            {/* Commands */}
+            <div style={{ textAlign: "center", padding: 10 }}>
+              <div style={{ fontSize: 10, color: "#996B5B", marginBottom: 4, fontWeight: 600 }}>命令</div>
+              <div style={{ fontSize: 28, fontWeight: 800, color: "#D85A2A", lineHeight: 1 }}>
+                {report.total_commands.toLocaleString()}
+              </div>
+              <div style={{ fontSize: 10, color: "#AA7A6A", marginTop: 2 }}>个</div>
             </div>
 
             {/* Active Days */}
-            <div style={{ textAlign: "center", padding: 12 }}>
-              <div style={{ fontSize: 11, color: "#996B5B", marginBottom: 4, fontWeight: 600 }}>活跃天数</div>
-              <div style={{ fontSize: 38, fontWeight: 800, color: "#D85A2A", lineHeight: 1 }}>
+            <div style={{ textAlign: "center", padding: 10 }}>
+              <div style={{ fontSize: 10, color: "#996B5B", marginBottom: 4, fontWeight: 600 }}>活跃</div>
+              <div style={{ fontSize: 28, fontWeight: 800, color: "#E8734A", lineHeight: 1 }}>
                 {report.active_days}
               </div>
-              <div style={{ fontSize: 11, color: "#AA7A6A", marginTop: 2 }}>天</div>
+              <div style={{ fontSize: 10, color: "#AA7A6A", marginTop: 2 }}>天</div>
             </div>
 
             {/* Projects */}
-            <div style={{ textAlign: "center", padding: 12 }}>
-              <div style={{ fontSize: 11, color: "#996B5B", marginBottom: 4, fontWeight: 600 }}>项目数量</div>
-              <div style={{ fontSize: 38, fontWeight: 800, color: "#E8734A", lineHeight: 1 }}>
+            <div style={{ textAlign: "center", padding: 10 }}>
+              <div style={{ fontSize: 10, color: "#996B5B", marginBottom: 4, fontWeight: 600 }}>项目</div>
+              <div style={{ fontSize: 28, fontWeight: 800, color: "#D85A2A", lineHeight: 1 }}>
                 {report.total_projects}
               </div>
-              <div style={{ fontSize: 11, color: "#AA7A6A", marginTop: 2 }}>个</div>
+              <div style={{ fontSize: 10, color: "#AA7A6A", marginTop: 2 }}>个</div>
+            </div>
+
+            {/* Longest Streak */}
+            <div style={{ textAlign: "center", padding: 10 }}>
+              <div style={{ fontSize: 10, color: "#996B5B", marginBottom: 4, fontWeight: 600 }}>连续</div>
+              <div style={{ fontSize: 28, fontWeight: 800, color: "#E8734A", lineHeight: 1 }}>
+                {report.longest_streak}
+              </div>
+              <div style={{ fontSize: 10, color: "#AA7A6A", marginTop: 2 }}>天</div>
             </div>
           </div>
 
@@ -574,22 +618,17 @@ function ShareableCard({ report }: { report: AnnualReportData }) {
             marginBottom: 16,
           }}
         >
-          {/* Secondary Stats Row */}
+          {/* Secondary Stats Row - Peak Time Info */}
           <div
             style={{
               display: "grid",
-              gridTemplateColumns: "1fr 1fr 1fr",
-              gap: 8,
+              gridTemplateColumns: "1fr 1fr",
+              gap: 12,
               paddingBottom: 14,
               borderBottom: "1px solid rgba(255,255,255,0.1)",
               marginBottom: 14,
             }}
           >
-            <div style={{ textAlign: "center" }}>
-              <div style={{ fontSize: 10, color: "rgba(255,255,255,0.6)", marginBottom: 2 }}>最长连续</div>
-              <div style={{ fontSize: 24, fontWeight: 800, color: "#FFFFFF", lineHeight: 1 }}>{report.longest_streak}</div>
-              <div style={{ fontSize: 10, color: "rgba(255,255,255,0.5)" }}>天</div>
-            </div>
             <div style={{ textAlign: "center" }}>
               <div style={{ fontSize: 10, color: "rgba(255,255,255,0.6)", marginBottom: 2 }}>活跃时段</div>
               <div style={{ fontSize: 24, fontWeight: 800, color: "#FFFFFF", lineHeight: 1 }}>{report.peak_hour}:00</div>
@@ -639,18 +678,24 @@ function ShareableCard({ report }: { report: AnnualReportData }) {
           )}
         </div>
 
-        {/* Footer - Compact */}
-        <div style={{ textAlign: "center" }}>
-          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 6, marginBottom: 4 }}>
+        {/* Footer - with QR code */}
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
             <img
               src="/logo.png"
               alt="Lovcode"
               style={{ width: 20, height: 20, borderRadius: 4 }}
             />
-            <span style={{ fontSize: 13, fontWeight: 700, color: "#FFFFFF" }}>Lovcode</span>
-            <span style={{ fontSize: 10, color: "rgba(255,255,255,0.4)" }}>|</span>
-            <span style={{ fontSize: 10, color: "rgba(255,255,255,0.5)" }}>Your Vibe Coding Hub</span>
+            <div>
+              <div style={{ fontSize: 13, fontWeight: 700, color: "#FFFFFF" }}>Lovcode</div>
+              <div style={{ fontSize: 9, color: "rgba(255,255,255,0.5)" }}>Your Vibe Coding Hub</div>
+            </div>
           </div>
+          <img
+            src="/lovcode-qrcode.png"
+            alt="QR Code"
+            style={{ width: 48, height: 48, borderRadius: 4, background: "#FFFFFF", padding: 2 }}
+          />
         </div>
       </div>
     </div>
@@ -720,7 +765,7 @@ export function AnnualReport2025({ onClose }: AnnualReport2025Props) {
   );
 
   // Share functionality - uses domToCanvas with Portal (no UI flicker)
-  // Inspired by lovshot: clone DOM in memory, use scrollWidth/scrollHeight for original size
+  // Uses Tauri save dialog for proper file saving without Finder popup
   const handleShare = useCallback(async () => {
     const captureEl = shareCardRef.current;
     if (!captureEl || !report) return;
@@ -734,7 +779,7 @@ export function AnnualReport2025({ onClose }: AnnualReport2025Props) {
       // domToCanvas clones DOM in memory - no UI impact
       const canvas = await domToCanvas(captureEl, {
         scale: 2,
-        backgroundColor: "#F9F9F7",
+        backgroundColor: "#C54B24",
         width: originalWidth,
         height: originalHeight,
         style: {
@@ -745,17 +790,32 @@ export function AnnualReport2025({ onClose }: AnnualReport2025Props) {
         },
       });
 
-      // Convert canvas to blob and download
-      canvas.toBlob((blob) => {
-        if (blob) {
-          const url = URL.createObjectURL(blob);
-          const link = document.createElement("a");
-          link.download = "lovcode-2025-report.png";
-          link.href = url;
-          link.click();
-          URL.revokeObjectURL(url);
-        }
-      }, "image/png");
+      // Convert canvas to blob
+      const blob = await new Promise<Blob | null>((resolve) => {
+        canvas.toBlob(resolve, "image/png");
+      });
+
+      if (!blob) {
+        throw new Error("Failed to create blob");
+      }
+
+      // Use Tauri save dialog
+      const path = await save({
+        defaultPath: "lovcode-2025-report.png",
+        filters: [{ name: "PNG Image", extensions: ["png"] }],
+      });
+
+      if (path) {
+        // Convert blob to Uint8Array
+        const arrayBuffer = await blob.arrayBuffer();
+        const data = Array.from(new Uint8Array(arrayBuffer));
+
+        // Write file using Tauri command
+        await invoke("write_binary_file", { path, data });
+
+        // Reveal in Finder
+        await revealItemInDir(path);
+      }
     } catch (err) {
       console.error("Failed to generate image:", err);
     } finally {
