fix: dashboard charts cache tokens, timeframe selectors, and percentile calculation (#11)

- Fix Usage by Model chart to include cache tokens (cacheReadTokens + cacheCreationTokens) in Tokens mode, which was causing GPT models to appear above Claude models incorrectly
- Add shared TimeframeSelector component (7D/30D/1Y/All) used across all charts
- Add timeframe selector to Model Usage Over Time chart
- Fix user percentile calculation: with 1 user shows "Top 100%" (correct) instead of "Top 1%" (misleading)
- Improve Insights card: when no reasoning tokens, show just "Top X%" without progress bar
- Add EXCLUDED_MODELS filter to hide synthetic models (auto, cursor-small, etc.) from charts
- Use pre-calculated cost from database instead of estimation for Fun Facts
- Change token_usage insert to upsert for re-import support
- Add migration to cleanup synthetic model entries
- Update model name mappings for newer Claude/GPT/Gemini models

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: fricoben

CLAUDE.md

@@ -244,6 +244,9 @@ SUPABASE_SERVICE_ROLE_KEY=xxx  # For server-side operations
 ### Development
 
 ```bash
+# Ensure Node.js 22+ is active (if using nvm)
+nvm use 22
+
 # Install dependencies
 pnpm install
 

conductor.json

@@ -1 +1,7 @@
-{  "scripts": {    "setup": "bun install",    "run": "bun run dev",    "archive": ""  }}
+{
+  "scripts": {
+    "setup": "export NVM_DIR=\"$HOME/.nvm\" && [ -s \"$NVM_DIR/nvm.sh\" ] && . \"$NVM_DIR/nvm.sh\" && nvm use 22 && pnpm install && cd packages/core && pnpm build && pnpm test",
+    "run": "export NVM_DIR=\"$HOME/.nvm\" && [ -s \"$NVM_DIR/nvm.sh\" ] && . \"$NVM_DIR/nvm.sh\" && nvm use 22 && bun run dev",
+    "archive": ""
+  }
+}

src/app/api/import/route.ts

@@ -280,12 +280,12 @@ export async function POST(request: Request) {
           if (error) console.error("daily_activity error:", error);
         }
       })(),
-      // Token usage chunks (insert, not upsert)
+      // Token usage chunks (upsert to handle re-imports)
       (async () => {
         for (const chunk of tokenChunks) {
           const { error } = await serviceSupabase
             .from("token_usage")
-            .insert(chunk);
+            .upsert(chunk, { onConflict: "user_id,date,tool,model" });
           if (error) console.error("token_usage error:", error);
         }
       })(),

src/app/api/submit/route.ts

@@ -229,7 +229,7 @@ async function handleTokenContributionData(
       for (const chunk of tokenChunks) {
         const { error } = await supabase
           .from("token_usage")
-          .insert(chunk);
+          .upsert(chunk, { onConflict: "user_id,date,tool,model" });
         if (error) console.error("token_usage error:", error);
       }
     })(),

src/app/user/[username]/page.tsx

@@ -97,6 +97,7 @@ export default async function UserProfilePage({ params }: PageParams) {
               ? {
                   totalTokens: mockStats.total_tokens,
                   totalSessions: mockStats.total_sessions,
+                  totalCost: mockStats.total_cost || 0,
                   favoriteModel: mockStats.favorite_model,
                   favoriteTool: mockStats.favorite_tool,
                   longestSessionMs: mockStats.longest_session_ms,
@@ -159,14 +160,15 @@ export default async function UserProfilePage({ params }: PageParams) {
 
   // Calculate user percentile based on estimated spend
   // "Top X%" means you're in the top X% of users by API spend
-  // E.g., "Top 5%" means you're better than 95% of users
+  // E.g., "Top 5%" means you're rank 5 out of 100 (better than 95%)
+  // Formula: percentile = (rank / totalUsers) * 100
   let userPercentile = 50; // Default
   if (stats) {
     const { data: allUserStats } = await supabase
       .from("user_stats")
       .select("user_id, total_tokens, favorite_model");
 
-    if (allUserStats && allUserStats.length > 1) {
+    if (allUserStats && allUserStats.length > 0) {
       const userSpend = estimateApiSpendUsd({
         model: stats.favorite_model,
         totalTokens: stats.total_tokens,
@@ -177,15 +179,14 @@ export default async function UserProfilePage({ params }: PageParams) {
           totalTokens: u.total_tokens,
         })
       );
-      // Count users with higher spend (higher rank)
+      // Count users with higher spend (better rank)
       const usersAbove = allSpends.filter((spend) => spend > userSpend).length;
       // Your rank = usersAbove + 1 (1-indexed)
       // Percentile = (rank / total) * 100
-      // If 0 users above, you're rank 1 = top (1/N * 100)%
+      // With 1 user: rank 1 / 1 = 100% (you ARE the top 100%)
+      // With 2 users: if #1, rank 1 / 2 = 50% (top half)
+      // With 100 users: if #1, rank 1 / 100 = 1% (top 1%)
       userPercentile = Math.max(1, Math.ceil(((usersAbove + 1) / allUserStats.length) * 100));
-    } else {
-      // Only 1 user in the system = you're #1
-      userPercentile = 1;
     }
   }
 
@@ -205,6 +206,7 @@ export default async function UserProfilePage({ params }: PageParams) {
           ? {
               totalTokens: stats.total_tokens,
               totalSessions: stats.total_sessions,
+              totalCost: parseFloat(stats.total_cost) || 0,
               favoriteModel: stats.favorite_model,
               favoriteTool: stats.favorite_tool,
               longestSessionMs: stats.longest_session_ms,

src/components/dashboard/ModelMigrationTimeline.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import {
   AreaChart,
   Area,
@@ -12,12 +12,15 @@ import {
   Legend,
 } from "recharts";
 import { formatModelName } from "@/lib/formatModelName";
+import { TimeframeSelector, filterByTimeframe, type Timeframe } from "./TimeframeSelector";
 
 interface TokenUsage {
   date: string;
   model: string;
   inputTokens: number;
   outputTokens: number;
+  cacheReadTokens?: number;
+  cacheCreationTokens?: number;
 }
 
 interface ModelMigrationTimelineProps {
@@ -49,13 +52,26 @@ function getModelColor(model: string): string {
   return colors[Math.abs(hash) % colors.length];
 }
 
+// Models to exclude from the timeline chart (synthetic/placeholder entries)
+const EXCLUDED_MODELS = new Set([
+  "<synthetic>",
+  "auto",
+  "unknown",
+  "cursor-small",
+  "agent_review",
+  "composer-1",
+]);
+
 // Aggregate data by week and model
 function aggregateByWeekAndModel(
   data: TokenUsage[]
 ): { week: string; [model: string]: number | string }[] {
   const weekMap = new Map<string, Map<string, number>>();
 
   data.forEach((item) => {
+    // Skip excluded models
+    if (EXCLUDED_MODELS.has(item.model)) return;
+
     const date = new Date(item.date);
     // Get Monday of the week
     const dayOfWeek = date.getDay();
@@ -68,7 +84,9 @@ function aggregateByWeekAndModel(
       weekMap.set(weekKey, new Map());
     }
     const modelMap = weekMap.get(weekKey)!;
-    const tokens = item.inputTokens + item.outputTokens;
+    // Include all token types for accurate total
+    const tokens = item.inputTokens + item.outputTokens +
+                   (item.cacheReadTokens || 0) + (item.cacheCreationTokens || 0);
     modelMap.set(item.model, (modelMap.get(item.model) || 0) + tokens);
   });
 
@@ -86,25 +104,32 @@ function aggregateByWeekAndModel(
 }
 
 export function ModelMigrationTimeline({ tokenUsage }: ModelMigrationTimelineProps) {
+  const [timeframe, setTimeframe] = useState<Timeframe>("all");
+
   const { chartData, models } = useMemo(() => {
     if (!tokenUsage || tokenUsage.length === 0) {
       return { chartData: [], models: [] };
     }
 
-    const aggregated = aggregateByWeekAndModel(tokenUsage);
+    // Filter by timeframe
+    const filteredUsage = filterByTimeframe(tokenUsage, timeframe);
 
-    // Get all unique models
+    const aggregated = aggregateByWeekAndModel(filteredUsage);
+
+    // Get all unique models (excluding synthetic ones)
     const modelSet = new Set<string>();
     aggregated.forEach((week) => {
       Object.keys(week).forEach((key) => {
-        if (key !== "week") modelSet.add(key);
+        if (key !== "week" && !EXCLUDED_MODELS.has(key)) modelSet.add(key);
       });
     });
 
-    // Sort models by total usage
+    // Sort models by total usage (including cache tokens)
     const modelTotals = new Map<string, number>();
-    tokenUsage.forEach((item) => {
-      const tokens = item.inputTokens + item.outputTokens;
+    filteredUsage.forEach((item) => {
+      if (EXCLUDED_MODELS.has(item.model)) return;
+      const tokens = item.inputTokens + item.outputTokens +
+                     (item.cacheReadTokens || 0) + (item.cacheCreationTokens || 0);
       modelTotals.set(item.model, (modelTotals.get(item.model) || 0) + tokens);
     });
 
@@ -116,7 +141,7 @@ export function ModelMigrationTimeline({ tokenUsage }: ModelMigrationTimelinePro
     const topModels = sortedModels.slice(0, 6);
 
     return { chartData: aggregated, models: topModels };
-  }, [tokenUsage]);
+  }, [tokenUsage, timeframe]);
 
   if (!tokenUsage || tokenUsage.length === 0 || chartData.length < 2) {
     return null;
@@ -171,7 +196,10 @@ export function ModelMigrationTimeline({ tokenUsage }: ModelMigrationTimelinePro
 
   return (
     <div className="card">
-      <h3 className="font-bold mb-4">Model Usage Over Time</h3>
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="font-bold">Model Usage Over Time</h3>
+        <TimeframeSelector value={timeframe} onChange={setTimeframe} />
+      </div>
       <div className="h-[280px]">
         <ResponsiveContainer width="100%" height="100%">
           <AreaChart

src/components/dashboard/TimeframeSelector.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+export type Timeframe = "7d" | "30d" | "1y" | "all";
+
+interface TimeframeSelectorProps {
+  value: Timeframe;
+  onChange: (timeframe: Timeframe) => void;
+  compact?: boolean;
+}
+
+const TIMEFRAME_LABELS: Record<Timeframe, string> = {
+  "7d": "7D",
+  "30d": "30D",
+  "1y": "1Y",
+  all: "All",
+};
+
+export function TimeframeSelector({ value, onChange, compact = false }: TimeframeSelectorProps) {
+  const timeframes: Timeframe[] = ["7d", "30d", "1y", "all"];
+
+  return (
+    <div className="flex items-center gap-0.5 bg-[#EEF0F2] rounded-full p-0.5 border border-[#232323]/10">
+      {timeframes.map((tf) => (
+        <button
+          key={tf}
+          onClick={() => onChange(tf)}
+          className={`px-2 py-0.5 text-xs font-medium rounded-full transition-all ${
+            value === tf
+              ? "bg-white text-[#232323] shadow-sm"
+              : "text-[#232323]/60 hover:text-[#232323]"
+          }`}
+        >
+          {TIMEFRAME_LABELS[tf]}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// Helper to filter data by timeframe
+export function filterByTimeframe<T extends { date: string }>(
+  data: T[],
+  timeframe: Timeframe
+): T[] {
+  if (timeframe === "all") return data;
+
+  const now = new Date();
+  const cutoff = new Date();
+
+  switch (timeframe) {
+    case "7d":
+      cutoff.setDate(now.getDate() - 7);
+      break;
+    case "30d":
+      cutoff.setDate(now.getDate() - 30);
+      break;
+    case "1y":
+      cutoff.setFullYear(now.getFullYear() - 1);
+      break;
+  }
+
+  const cutoffStr = cutoff.toISOString().split("T")[0];
+  return data.filter((item) => item.date >= cutoffStr);
+}