ai-heatmap 1.10.1 → 1.12.0

package/.github/workflows/deploy.yml

@@ -10,7 +10,7 @@ on:
       - "index.html"
 
 permissions:
-  contents: read
+  contents: write
   pages: write
   id-token: write
 
@@ -33,6 +33,13 @@ jobs:
       - name: Generate static SVG from data.json
         run: npm run generate:svg --if-present
 
+      - name: Commit heatmap.svg if changed
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add public/heatmap.svg
+          git diff --staged --quiet || (git commit -m "chore: update heatmap.svg [skip ci]" && git push)
+
       - run: npm run build
 
       - uses: actions/upload-pages-artifact@v3

package/README.md

@@ -12,23 +12,22 @@ Powered by [ccusage](https://github.com/ryoppippi/ccusage) + [react-activity-cal
 
 ## Preview
 
-<!-- Replace YOUR_VERCEL_DOMAIN with your actual Vercel deployment URL -->
-![AI Heatmap](https://seunggabi-ai-heatmap/api/heatmap)
+<!-- Replace seunggabi-ai-heatmap.vercel.app with your actual Vercel deployment URL -->
+![AI Heatmap](https://seunggabi-ai-heatmap.vercel.app/api/heatmap)
 
 ### Variations
-
 ```markdown
 <!-- Dark mode with full stats -->
-![](https://YOUR_VERCEL_DOMAIN/api/heatmap?colorScheme=dark)
+![](https://{user}-ai-heatmap.vercel.app/api/heatmap?colorScheme=dark)
 
 <!-- Blue theme, heatmap + stats only -->
-![](https://YOUR_VERCEL_DOMAIN/api/heatmap?theme=blue&weekday=false)
+![](https://{user}-ai-heatmap.vercel.app/api/heatmap?theme=blue&weekday=false)
 
 <!-- Heatmap only (clean embed) -->
-![](https://YOUR_VERCEL_DOMAIN/api/heatmap?stats=false&weekday=false)
+![](https://{user}-ai-heatmap.vercel.app/api/heatmap?stats=false&weekday=false)
 
 <!-- Custom date range -->
-![](https://YOUR_VERCEL_DOMAIN/api/heatmap?start=2026-01-01&end=2026-02-18)
+![](https://{user}-ai-heatmap.vercel.app/api/heatmap?start=2026-01-01&end=2026-02-18)
 ```
 
 ## Quick Start
@@ -36,19 +35,21 @@ Powered by [ccusage](https://github.com/ryoppippi/ccusage) + [react-activity-cal
 ```bash
 # Init a new heatmap repo (creates repo + generates data + pushes)
 npx ai-heatmap init
-npx ai-heatmap init {user}-ai-heatmap
+# npx ai-heatmap init --repo {user}-ai-heatmap
 
 # Update data (generate + push)
 npx ai-heatmap update
-npx ai-heatmap update --repo {user}-ai-heatmap
+# npx ai-heatmap update --repo {user}-ai-heatmap
 ```
 
-## SVG API (Vercel)
+## SVG API (Vercel Only)
+
+Deploy this repo to Vercel for a dynamic SVG endpoint. This is Vercel-only — GitHub Pages does not support serverless API routes.
 
-~~Deploy~~ this repo to Vercel for a dynamic SVG endpoint. Embed it in any README:
+Embed it in any README:
 
 ```markdown
-![AI Heatmap](https://your-app.vercel.app/api/heatmap)
+![AI Heatmap](https://{user}}-ai-heatmap.vercel.app/api/heatmap)
 ```
 
 The SVG is generated on each request from `public/data.json`, so you can control the output with query parameters.
@@ -88,10 +89,18 @@ The SVG is generated on each request from `public/data.json`, so you can control
 /api/heatmap?start=2026-01-01&end=2026-02-18
 ```
 
-## GitHub Pages (Interactive)
+## GitHub Pages (Interactive + Static SVG)
 
 The interactive version with tooltips is deployed via GitHub Pages. Tooltips show cost, tokens, cache hit rate, and per-model breakdown.
 
+A static SVG (`heatmap.svg`) is also generated during build. You can embed it as an image:
+
+```markdown
+![AI Heatmap](https://{user}.github.io/{user}-ai-heatmap/heatmap.svg)
+```
+
+> Static SVG is pre-generated at build time. For real-time rendering, use the [Vercel SVG API](#svg-api-vercel-only).
+
 ### GitHub Pages Options
 
 All options are controlled via query string:
@@ -127,6 +136,10 @@ https://owner.github.io/{user}-ai-heatmap/?colorScheme=dark&blockSize=14
 
 ## Configuration
 
+```
+https://owner.github.io/{user}-ai-heatmap/heatmap.svg
+```
+
 Customize the static SVG output by editing `heatmap.config.json` in the project root:
 
 ```json
@@ -160,8 +173,7 @@ npx ai-heatmap update
 For automated updates, use a local cron job or macOS LaunchAgent:
 
 ```bash
-# crontab -e (runs daily at midnight)
-0 0 * * * npx ai-heatmap update
+0 0 * * * npx --yes ai-heatmap@latest update
 ```
 
 ## Upgrade
@@ -169,10 +181,6 @@ For automated updates, use a local cron job or macOS LaunchAgent:
 To use the latest version of ai-heatmap:
 
 ```bash
-# Always uses latest (npx caches, so clear if needed)
-npx ai-heatmap@latest generate
-
-# Clear npx cache and run
 npx --yes ai-heatmap@latest update
 ```
 
@@ -184,35 +192,18 @@ npx --yes ai-heatmap@latest update
 2. Push `data.json` to `main` to trigger the first deploy
 3. Manual deploy: Actions tab > "Deploy AI Heatmap" > "Run workflow"
 
-### Vercel
-
-1. Import this repo on [vercel.com](https://vercel.com)
-2. Deploy (zero config — `vercel.json` included)
-3. Use the deployed URL for dynamic SVG embeds
-
-## Local Development
+### Vercel (SVG API)
 
 ```bash
-npm install
-npm run generate              # Generate data.json from ccusage
-npm run dev                   # Vite dev server (interactive heatmap)
-node scripts/serve-svg.mjs    # Local SVG API on :3333
+npx --yes ai-heatmap@latest deploy
 ```
 
-## Project Structure
+Or manually:
 
-```
-ai-heatmap/
-  api/heatmap.ts              # Vercel serverless SVG endpoint
-  bin/cli.mjs                 # CLI entrypoint
-  bin/init.mjs                # Repo scaffolding
-  bin/push.mjs                # Push data to GitHub
-  scripts/generate.mjs        # ccusage -> data.json
-  scripts/generate-svg.mjs    # data.json -> static heatmap.svg
-  scripts/serve-svg.mjs       # Local SVG dev server
-  src/App.tsx                 # React interactive heatmap
-  public/data.json            # Generated activity data
-```
+1. Import this repo on [vercel.com](https://vercel.com)
+2. Deploy (zero config — `vercel.json` included)
+3. Make public: Project Settings > Deployment Protection > Vercel Authentication > **OFF**
+4. Use the deployed URL for dynamic SVG embeds
 
 ## Star History
 

package/bin/cli.mjs

@@ -13,28 +13,35 @@ const HELP = `
 ai-heatmap - AI usage cost heatmap
 
 Commands:
-  init [repo-name]           Create a new heatmap repo and generate initial data
-  update [--repo <owner/repo>]  Generate data + push to repo (default: {user}/{user}-ai-heatmap)
-  delete [repo-name]         Delete the heatmap GitHub repo
-  deploy                     Deploy to Vercel (SVG API endpoint)
+  init    [--repo <name>]        Create a new heatmap repo and generate initial data
+  update  [--repo <owner/repo>]  Generate data + push to repo
+  delete  [--repo <name>]        Delete the heatmap GitHub repo
+  deploy  [--repo <name>]        Deploy to Vercel (SVG API endpoint)
 
-Update options:
-  --since YYYYMMDD        Start date
-  --until YYYYMMDD        End date
-  --repo <owner/repo>     Target repo (default: auto-detect)
+Options:
+  --repo <name>           Target repo (default: {user}-ai-heatmap)
+  --since YYYYMMDD        Start date (update only)
+  --until YYYYMMDD        End date (update only)
 
 Examples:
   npx ai-heatmap init
+  npx ai-heatmap init --repo my-heatmap
   npx ai-heatmap update
-  npx ai-heatmap update --repo {user}-ai-heatmap
+  npx ai-heatmap update --repo owner/repo-name
   npx ai-heatmap delete
   npx ai-heatmap deploy
 `;
 
+function getArg(flag) {
+  const idx = args.indexOf(flag);
+  return idx !== -1 && args[idx + 1] ? args[idx + 1] : null;
+}
+
 switch (command) {
   case "init": {
     const script = resolve(__dirname, "init.mjs");
-    execSync(`node ${script} ${args.join(" ")}`, { stdio: "inherit" });
+    const repoName = getArg("--repo") || args[0] || "";
+    execSync(`node ${script} ${repoName}`, { stdio: "inherit" });
     break;
   }
   case "update": {
@@ -50,7 +57,8 @@ switch (command) {
   }
   case "delete": {
     const script = resolve(__dirname, "delete.mjs");
-    execSync(`node ${script} ${args.join(" ")}`, { stdio: "inherit" });
+    const repoName = getArg("--repo") || args[0] || "";
+    execSync(`node ${script} ${repoName}`, { stdio: "inherit" });
     break;
   }
   case "deploy": {
@@ -60,9 +68,9 @@ switch (command) {
       console.log("Installing Vercel CLI...");
       execSync("npm install -g vercel", { stdio: "inherit" });
     }
-    // Determine target directory: argument > auto-detect {user}-ai-heatmap > cwd
+    // Determine target directory: --repo > positional arg > auto-detect {user}-ai-heatmap > cwd
     let deployDir = process.cwd();
-    const repoArg = args[0];
+    const repoArg = getArg("--repo") || args[0];
     if (repoArg) {
       deployDir = resolve(process.cwd(), repoArg);
     } else {
@@ -75,6 +83,11 @@ switch (command) {
       } catch {}
     }
     console.log(`Deploying from ${deployDir}...`);
+    try {
+      execSync("git pull", { cwd: deployDir, stdio: "inherit" });
+    } catch {
+      console.log("git pull skipped (not a git repo or no remote)");
+    }
     execSync(`vercel --prod`, {
       cwd: deployDir,
       stdio: "inherit",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-heatmap",
-  "version": "1.10.1",
+  "version": "1.12.0",
   "description": "AI usage cost heatmap powered by ccusage + react-activity-calendar",
   "type": "module",
   "bin": {
@@ -24,6 +24,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "generate:svg": "node scripts/generate-svg.mjs",
+    "update": "node bin/cli.mjs update",
     "deploy": "npm run generate && npm run generate:svg && npm run build"
   },
   "keywords": [],

package/src/App.tsx

@@ -282,10 +282,6 @@ export default function App() {
       style={containerStyle}
     >
       <h1>AI Usage Heatmap</h1>
-      <p className="summary">
-        💰 Total: {formatUSD(totalCost)} across {filtered.length} days ({yearLabel})
-      </p>
-
       <ActivityCalendar
         data={filtered}
         blockSize={options.blockSize}
@@ -299,7 +295,7 @@ export default function App() {
         weekStart={options.weekStart}
         colorScheme={options.colorScheme}
         labels={{
-          totalCount: `💰 ${formatUSD(totalCost)} spent in ${yearLabel}`,
+          totalCount: `💰 Total: ${formatUSD(totalCost)} across ${filtered.length} days (${yearLabel})`,
         }}
         theme={{
           light: themeColors,