claude-session-dashboard 0.2.1 → 0.3.0

package/dist/server/assets/{settings-ko61yfVs.js → settings-C0_KyVQQ.js}

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { s as settingsQuery, u as useSettingsMutation } from "./settings.queries-DSQd324O.js";
 import { a as SUBSCRIPTION_TIERS, b as DEFAULT_PRICING, D as DEFAULT_SETTINGS } from "./settings.types-DntadCHo.js";
+import { u as usePrivacy } from "./router-Cb_hBXHI.js";
 import "./createSsrRpc-CVg2UDl0.js";
 import "../server.js";
 import "@tanstack/history";
@@ -24,7 +25,7 @@ function TierSelector({ value, onChange }) {
       {
         type: "button",
         onClick: () => onChange(tier.id),
-        className: `rounded-lg border px-3 py-2 text-left transition-colors ${isSelected ? "border-blue-500 bg-blue-500/10 text-white" : "border-gray-800 bg-gray-900/50 text-gray-400 hover:border-gray-700 hover:text-gray-300"}`,
+        className: `rounded-lg border px-3 py-2 text-left transition-colors ${isSelected ? "border-brand-500 bg-brand-500/10 text-white" : "border-gray-800 bg-gray-900/50 text-gray-400 hover:border-gray-700 hover:text-gray-300"}`,
         children: [
           /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: tier.displayName }),
           /* @__PURE__ */ jsx("div", { className: "mt-0.5 font-mono text-[10px] text-gray-500", children: tier.monthlyUSD !== null ? `$${tier.monthlyUSD}/mo` : "Custom" })
@@ -92,28 +93,31 @@ function PricingTableEditor({ overrides, onChange }) {
               min: "0",
               value,
               onChange: (e) => handleCellChange(model.modelId, f.key, e.target.value),
-              className: `w-20 rounded border px-2 py-1 text-right font-mono text-xs ${changed ? "border-blue-500/50 bg-blue-500/10 text-blue-400" : "border-gray-700 bg-gray-800 text-gray-300"} focus:border-blue-500 focus:outline-none`
+              className: `w-20 rounded border px-2 py-1 text-right font-mono text-xs ${changed ? "border-brand-500/50 bg-brand-500/10 text-brand-400" : "border-gray-700 bg-gray-800 text-gray-300"} focus:border-brand-500 focus:outline-none`
             }
           ) }, f.key);
         })
       ] }, model.modelId)) })
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "mt-2 text-[10px] text-gray-600", children: "Prices in USD per million tokens. Overridden values shown in blue." })
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-[10px] text-gray-600", children: "Prices in USD per million tokens. Overridden values are highlighted." })
   ] });
 }
 function SettingsPage() {
   const { data: settings, isLoading } = useQuery(settingsQuery);
+  if (isLoading || !settings) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-48 animate-pulse rounded bg-gray-800" }),
+      /* @__PURE__ */ jsx("div", { className: "h-64 animate-pulse rounded-xl bg-gray-900/50" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(SettingsForm, { settings });
+}
+function SettingsForm({ settings }) {
   const mutation = useSettingsMutation();
-  const [tier, setTier] = useState("pro");
-  const [overrides, setOverrides] = useState({});
+  const { privacyMode, togglePrivacyMode } = usePrivacy();
+  const [tier, setTier] = useState(settings.subscriptionTier);
+  const [overrides, setOverrides] = useState(settings.pricingOverrides);
   const [isDirty, setIsDirty] = useState(false);
-  useEffect(() => {
-    if (settings) {
-      setTier(settings.subscriptionTier);
-      setOverrides(settings.pricingOverrides);
-      setIsDirty(false);
-    }
-  }, [settings]);
   function handleTierChange(newTier) {
     setTier(newTier);
     setIsDirty(true);
@@ -139,15 +143,57 @@ function SettingsPage() {
       }
     });
   }
-  if (isLoading) {
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-8 w-48 animate-pulse rounded bg-gray-800" }),
-      /* @__PURE__ */ jsx("div", { className: "h-64 animate-pulse rounded-xl bg-gray-900/50" })
-    ] });
-  }
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-white", children: "Settings" }),
     /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Configure your subscription tier and API pricing for cost estimation." }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-gray-300", children: "Privacy Mode" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-gray-500", children: "Hide project names, file paths, and branch names across the dashboard. Useful when screen-sharing or recording demos." }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded-xl border border-gray-800 bg-gray-900/50 p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-300", children: "Enable privacy mode" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: privacyMode ? "On" : "Off" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "switch",
+                "aria-checked": privacyMode,
+                onClick: togglePrivacyMode,
+                className: `relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors ${privacyMode ? "bg-brand-600" : "bg-gray-800"}`,
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform ${privacyMode ? "translate-x-[18px]" : "translate-x-[3px]"}`
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-gray-800 pt-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium text-gray-400", children: "What gets hidden:" }),
+          /* @__PURE__ */ jsxs("ul", { className: "mt-1.5 space-y-1 text-[10px] text-gray-500", children: [
+            /* @__PURE__ */ jsxs("li", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Project names" }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-gray-600", children: "→ project-1, project-2, ..." })
+            ] }),
+            /* @__PURE__ */ jsxs("li", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "File paths" }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-gray-600", children: "→ .../project-1" })
+            ] }),
+            /* @__PURE__ */ jsxs("li", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Branch names" }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-gray-600", children: "→ branch-1, branch-2, ..." })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-gray-300", children: "Subscription Tier" }),
       /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-gray-500", children: "Select your Claude subscription plan. This is informational only and does not affect cost calculations." }),
@@ -186,7 +232,7 @@ function SettingsPage() {
             type: "button",
             onClick: handleSave,
             disabled: !isDirty || mutation.isPending,
-            className: `rounded-lg px-4 py-1.5 text-xs font-medium transition-colors ${isDirty && !mutation.isPending ? "bg-blue-600 text-white hover:bg-blue-500" : "cursor-not-allowed bg-gray-800 text-gray-500"}`,
+            className: `rounded-lg px-4 py-1.5 text-xs font-medium transition-colors ${isDirty && !mutation.isPending ? "bg-brand-600 text-white hover:bg-brand-500" : "cursor-not-allowed bg-gray-800 text-gray-500"}`,
             children: mutation.isPending ? "Saving..." : "Save"
           }
         )

package/dist/server/assets/{stats-C9cZXTP5.js → stats-BtgVene-.js}

@@ -4,11 +4,12 @@ import { queryOptions, useQuery } from "@tanstack/react-query";
 import { c as createSsrRpc } from "./createSsrRpc-CVg2UDl0.js";
 import { c as createServerFn } from "../server.js";
 import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar, AreaChart, Area, PieChart, Pie, Cell, Legend } from "recharts";
-import { format, startOfISOWeek, parseISO } from "date-fns";
+import { format, addDays, getDay, parseISO, startOfISOWeek } from "date-fns";
+import { createPortal } from "react-dom";
 import { f as formatTokenCount, a as formatDuration, b as formatRelativeTime, c as formatUSD } from "./format-DIZHV7IJ.js";
 import { Link } from "@tanstack/react-router";
+import { u as usePrivacy, R as Route } from "./router-Cb_hBXHI.js";
 import { u as useSessionCost, E as ExportDropdown, d as downloadFile, a as dailyActivityToCSV, b as dailyTokensToCSV, m as modelUsageToCSV, s as statsToJSON } from "./useSessionCost-CYs5UOX-.js";
-import { R as Route } from "./router-ChxlsPNU.js";
 import "@tanstack/history";
 import "@tanstack/router-core/ssr/client";
 import "@tanstack/router-core";
@@ -18,9 +19,9 @@ import "h3-v2";
 import "tiny-invariant";
 import "seroval";
 import "@tanstack/react-router/ssr/server";
+import "zod";
 import "./settings.queries-DSQd324O.js";
 import "./settings.types-DntadCHo.js";
-import "zod";
 const getStats = createServerFn({
   method: "GET"
 }).handler(createSsrRpc("4b9a58c176f487b49800a372100037cdf33cf048f3592a449f115c7e3f5ea799"));
@@ -38,19 +39,19 @@ function ActivityChart({ data }) {
     /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-300", children: "Daily Activity" }),
     /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Messages, sessions, and tool calls per day" }),
     /* @__PURE__ */ jsx("div", { className: "mt-4 h-64", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data: chartData, children: [
-      /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#1f2937" }),
+      /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#2a2926" }),
       /* @__PURE__ */ jsx(
         XAxis,
         {
           dataKey: "dateLabel",
-          tick: { fill: "#6b7280", fontSize: 10 },
+          tick: { fill: "#7a7668", fontSize: 10 },
           tickLine: false
         }
       ),
       /* @__PURE__ */ jsx(
         YAxis,
         {
-          tick: { fill: "#6b7280", fontSize: 10 },
+          tick: { fill: "#7a7668", fontSize: 10 },
           tickLine: false,
           axisLine: false
         }
@@ -59,8 +60,8 @@ function ActivityChart({ data }) {
         Tooltip,
         {
           contentStyle: {
-            backgroundColor: "#111827",
-            border: "1px solid #374151",
+            backgroundColor: "#1c1c1a",
+            border: "1px solid #3d3b36",
             borderRadius: "8px",
             fontSize: "12px"
           }
@@ -71,7 +72,7 @@ function ActivityChart({ data }) {
         {
           dataKey: "messageCount",
           name: "Messages",
-          fill: "#3b82f6",
+          fill: "#d97757",
           radius: [2, 2, 0, 0]
         }
       ),
@@ -96,7 +97,240 @@ function ActivityChart({ data }) {
     ] }) }) })
   ] });
 }
-const COLORS$1 = ["#3b82f6", "#8b5cf6", "#10b981", "#f59e0b", "#ef4444", "#6366f1"];
+const INTENSITY_COLORS = [
+  "#2a2926",
+  // Level 0: warm gray-800 (no activity)
+  "#3d2a1e",
+  // Level 1: dark terracotta
+  "#a8512eb3",
+  // Level 2: brand-700 at ~70% opacity
+  "#d97757cc",
+  // Level 3: brand-500 at ~80% opacity
+  "#e09070"
+  // Level 4: brand-400 (most intense)
+];
+const DAY_LABELS = ["Mon", "", "Wed", "", "Fri", "", ""];
+const CELL_SIZE = 10;
+const CELL_GAP = 2;
+const DAY_LABEL_WIDTH = 28;
+function computePercentiles(values) {
+  if (values.length === 0) return { p25: 0, p50: 0, p75: 0 };
+  const sorted = [...values].sort((a, b) => a - b);
+  const percentile = (p) => {
+    const idx = p / 100 * (sorted.length - 1);
+    const lower = Math.floor(idx);
+    const upper = Math.ceil(idx);
+    if (lower === upper) return sorted[lower];
+    return sorted[lower] + (sorted[upper] - sorted[lower]) * (idx - lower);
+  };
+  return {
+    p25: percentile(25),
+    p50: percentile(50),
+    p75: percentile(75)
+  };
+}
+function getIntensityLevel(tokens, percentiles) {
+  if (tokens === 0) return 0;
+  if (tokens <= percentiles.p25) return 1;
+  if (tokens <= percentiles.p50) return 2;
+  if (tokens <= percentiles.p75) return 3;
+  return 4;
+}
+function toMondayFirst(jsDay) {
+  return jsDay === 0 ? 6 : jsDay - 1;
+}
+function ContributionHeatmap({
+  dailyActivity,
+  dailyModelTokens
+}) {
+  const [tooltip, setTooltip] = useState(null);
+  const { days, monthLabels } = useMemo(() => {
+    const dataMap = /* @__PURE__ */ new Map();
+    for (const entry of dailyActivity) {
+      const existing = dataMap.get(entry.date) ?? { sessionCount: 0, totalTokens: 0 };
+      existing.sessionCount = entry.sessionCount;
+      dataMap.set(entry.date, existing);
+    }
+    for (const entry of dailyModelTokens) {
+      const existing = dataMap.get(entry.date) ?? { sessionCount: 0, totalTokens: 0 };
+      existing.totalTokens = Object.values(entry.tokensByModel).reduce((sum, t) => sum + t, 0);
+      dataMap.set(entry.date, existing);
+    }
+    const today = /* @__PURE__ */ new Date();
+    today.setHours(0, 0, 0, 0);
+    let startDate = addDays(today, -364);
+    const startDayOfWeek = toMondayFirst(getDay(startDate));
+    if (startDayOfWeek !== 0) {
+      startDate = addDays(startDate, -startDayOfWeek);
+    }
+    const allDays = [];
+    let currentDate = startDate;
+    while (currentDate <= today) {
+      const dateStr = format(currentDate, "yyyy-MM-dd");
+      const dayOfWeek = toMondayFirst(getDay(currentDate));
+      const daysSinceStart = Math.floor(
+        (currentDate.getTime() - startDate.getTime()) / (1e3 * 60 * 60 * 24)
+      );
+      const weekIndex = Math.floor(daysSinceStart / 7);
+      const data = dataMap.get(dateStr);
+      allDays.push({
+        date: dateStr,
+        dateFormatted: format(currentDate, "MMM d, yyyy"),
+        sessionCount: data?.sessionCount ?? 0,
+        totalTokens: data?.totalTokens ?? 0,
+        intensity: 0,
+        // computed below
+        weekIndex,
+        dayOfWeek
+      });
+      currentDate = addDays(currentDate, 1);
+    }
+    const nonZeroTokens = allDays.filter((d) => d.totalTokens > 0).map((d) => d.totalTokens);
+    const percentiles = computePercentiles(nonZeroTokens);
+    for (const day of allDays) {
+      day.intensity = getIntensityLevel(day.totalTokens, percentiles);
+    }
+    const labels = [];
+    let lastMonth = -1;
+    for (const day of allDays) {
+      if (day.dayOfWeek === 0) {
+        const parsed = parseISO(day.date);
+        const month = parsed.getMonth();
+        if (month !== lastMonth) {
+          labels.push({
+            label: format(parsed, "MMM"),
+            weekIndex: day.weekIndex
+          });
+          lastMonth = month;
+        }
+      }
+    }
+    return { days: allDays, monthLabels: labels };
+  }, [dailyActivity, dailyModelTokens]);
+  if (days.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-gray-800 bg-gray-900/50 p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-300", children: "Activity" }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-32 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "No activity data available" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-gray-800 bg-gray-900/50 p-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-300", children: "Activity" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Token usage intensity over the past year" }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 overflow-x-auto", children: /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col text-[10px] text-gray-500",
+          style: { width: DAY_LABEL_WIDTH },
+          children: [
+            /* @__PURE__ */ jsx("div", { style: { height: 16, marginBottom: CELL_GAP } }),
+            DAY_LABELS.map((label, i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex items-center",
+                style: { height: CELL_SIZE, marginTop: i > 0 ? CELL_GAP : 0 },
+                children: label
+              },
+              i
+            ))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid text-[10px] text-gray-500",
+            style: {
+              gridAutoFlow: "column",
+              gridAutoColumns: `minmax(${CELL_SIZE}px, 1fr)`,
+              gap: CELL_GAP,
+              height: 16,
+              marginBottom: CELL_GAP
+            },
+            children: monthLabels.map((ml, i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex items-end",
+                style: { gridColumn: ml.weekIndex + 1 },
+                children: ml.label
+              },
+              `${ml.label}-${i}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative grid",
+            style: {
+              gridTemplateRows: `repeat(7, ${CELL_SIZE}px)`,
+              gridAutoFlow: "column",
+              gridAutoColumns: `minmax(${CELL_SIZE}px, 1fr)`,
+              gap: CELL_GAP
+            },
+            children: days.map((day) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "rounded-sm transition-colors",
+                style: {
+                  width: CELL_SIZE,
+                  height: CELL_SIZE,
+                  backgroundColor: INTENSITY_COLORS[day.intensity],
+                  gridRow: day.dayOfWeek + 1,
+                  gridColumn: day.weekIndex + 1
+                },
+                onMouseEnter: (e) => {
+                  const rect = e.target.getBoundingClientRect();
+                  setTooltip({
+                    date: day.date,
+                    dateFormatted: day.dateFormatted,
+                    sessionCount: day.sessionCount,
+                    totalTokens: day.totalTokens,
+                    x: rect.left + rect.width / 2,
+                    y: rect.top - 8
+                  });
+                },
+                onMouseLeave: () => setTooltip(null)
+              },
+              day.date
+            ))
+          }
+        )
+      ] })
+    ] }) }) }),
+    tooltip && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "pointer-events-none fixed z-50 rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs shadow-lg",
+          style: {
+            left: tooltip.x,
+            top: tooltip.y,
+            transform: "translate(-50%, -100%)",
+            whiteSpace: "nowrap"
+          },
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-300", children: tooltip.dateFormatted }),
+            tooltip.totalTokens > 0 || tooltip.sessionCount > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-1 space-y-0.5 text-gray-400", children: [
+              /* @__PURE__ */ jsxs("p", { children: [
+                tooltip.sessionCount,
+                " ",
+                tooltip.sessionCount === 1 ? "session" : "sessions"
+              ] }),
+              /* @__PURE__ */ jsxs("p", { children: [
+                formatTokenCount(tooltip.totalTokens),
+                " tokens"
+              ] })
+            ] }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-gray-500", children: "No activity" })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+const COLORS$1 = ["#d97757", "#8b5cf6", "#10b981", "#f59e0b", "#ef4444", "#b07cc5"];
 function normalizeModelName(model) {
   return model.replace(/^claude-/, "").split("-202")[0];
 }
@@ -244,19 +478,19 @@ function TokenTrendChart({ data }) {
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "mt-4 h-72", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data: chartData, children: [
-      /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#1f2937" }),
+      /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#2a2926" }),
       /* @__PURE__ */ jsx(
         XAxis,
         {
           dataKey: "dateLabel",
-          tick: { fill: "#6b7280", fontSize: 10 },
+          tick: { fill: "#7a7668", fontSize: 10 },
           tickLine: false
         }
       ),
       /* @__PURE__ */ jsx(
         YAxis,
         {
-          tick: { fill: "#6b7280", fontSize: 10 },
+          tick: { fill: "#7a7668", fontSize: 10 },
           tickLine: false,
           axisLine: false,
           tickFormatter: (value) => formatTokenCount(value)
@@ -278,7 +512,7 @@ function TokenTrendChart({ data }) {
     ] }) }) })
   ] });
 }
-const COLORS = ["#3b82f6", "#8b5cf6", "#10b981", "#f59e0b", "#ef4444", "#6366f1"];
+const COLORS = ["#d97757", "#8b5cf6", "#10b981", "#f59e0b", "#ef4444", "#b07cc5"];
 function ModelUsageChart({ data }) {
   const chartData = Object.entries(data).map(([model, usage]) => ({
     name: model.replace(/^claude-/, "").split("-202")[0],
@@ -310,8 +544,8 @@ function ModelUsageChart({ data }) {
         {
           formatter: (value) => formatTokenCount(value),
           contentStyle: {
-            backgroundColor: "#111827",
-            border: "1px solid #374151",
+            backgroundColor: "#1c1c1a",
+            border: "1px solid #3d3b36",
             borderRadius: "8px",
             fontSize: "12px"
           }
@@ -353,7 +587,7 @@ function HourlyDistribution({
                 className: "absolute bottom-0 w-full rounded-t transition-colors",
                 style: {
                   height: `${height}%`,
-                  backgroundColor: `rgba(59, 130, 246, ${0.2 + intensity * 0.6})`
+                  backgroundColor: `rgba(217, 119, 87, ${0.2 + intensity * 0.6})`
                 }
               }
             ),
@@ -392,6 +626,7 @@ const COLUMNS = [
   { key: "lastSessionAt", label: "Last Active", align: "right" }
 ];
 function ProjectTable({ projects }) {
+  const { anonymizeProjectName } = usePrivacy();
   const [sortField, setSortField] = useState("lastSessionAt");
   const [sortDir, setSortDir] = useState("desc");
   const sorted = useMemo(() => {
@@ -455,11 +690,11 @@ function ProjectTable({ projects }) {
               {
                 to: "/sessions",
                 search: { project: project.projectName },
-                className: "text-sm text-blue-400 hover:underline",
-                children: project.projectName
+                className: "text-sm text-brand-300 hover:underline",
+                children: anonymizeProjectName(project.projectName)
               }
             ),
-            project.activeSessions > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-2 rounded-full bg-green-500/20 px-1.5 py-0.5 text-[10px] font-medium text-green-400", children: [
+            project.activeSessions > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-2 rounded-full bg-emerald-500/20 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400", children: [
               project.activeSessions,
               " active"
             ] })
@@ -475,6 +710,7 @@ function ProjectTable({ projects }) {
   ] }) });
 }
 function ProjectAnalytics() {
+  const { anonymizeProjectName } = usePrivacy();
   const { data, isLoading } = useQuery(projectAnalyticsQuery);
   if (isLoading) {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
@@ -518,7 +754,7 @@ function ProjectAnalytics() {
         SummaryCard,
         {
           label: "Most Active",
-          value: mostActive.projectName,
+          value: anonymizeProjectName(mostActive.projectName),
           sub: `${mostActive.totalSessions} sessions`
         }
       )
@@ -588,12 +824,12 @@ function StatsPage() {
         search: {
           tab: "overview"
         }
-      }), className: `px-4 py-2 text-sm border-b-2 transition-colors ${tab === "overview" ? "border-blue-500 text-white" : "border-transparent text-gray-400 hover:text-gray-200"}`, children: "Overview" }),
+      }), className: `px-4 py-2 text-sm border-b-2 transition-colors ${tab === "overview" ? "border-brand-500 text-white" : "border-transparent text-gray-400 hover:text-gray-200"}`, children: "Overview" }),
       /* @__PURE__ */ jsx("button", { onClick: () => navigate({
         search: {
           tab: "projects"
         }
-      }), className: `px-4 py-2 text-sm border-b-2 transition-colors ${tab === "projects" ? "border-blue-500 text-white" : "border-transparent text-gray-400 hover:text-gray-200"}`, children: "Projects" })
+      }), className: `px-4 py-2 text-sm border-b-2 transition-colors ${tab === "projects" ? "border-brand-500 text-white" : "border-transparent text-gray-400 hover:text-gray-200"}`, children: "Projects" })
     ] }),
     tab === "overview" ? /* @__PURE__ */ jsx(StatsOverview, { stats, isLoading, cost }) : /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(ProjectAnalytics, {}) })
   ] });
@@ -625,7 +861,8 @@ function StatsOverview({
       /* @__PURE__ */ jsx(StatCard, { label: "Total Estimated Cost", value: cost ? `~${formatUSD(cost.totalUSD)}` : "N/A" }),
       /* @__PURE__ */ jsx(StatCard, { label: "Longest Session", value: formatDuration(stats.longestSession.duration), sub: `${stats.longestSession.messageCount} messages` })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(ActivityChart, { data: stats.dailyActivity }) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(ContributionHeatmap, { dailyActivity: stats.dailyActivity, dailyModelTokens: stats.dailyModelTokens }) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(ActivityChart, { data: stats.dailyActivity }) }),
     /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(TokenTrendChart, { data: stats.dailyModelTokens }) }),
     /* @__PURE__ */ jsxs("div", { className: "mt-4 grid grid-cols-1 gap-4 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx(ModelUsageChart, { data: stats.modelUsage }),

package/dist/server/assets/{stats.server-52mNk2Yw.js → stats.server-qTOvID9-.js}

@@ -1,10 +1,10 @@
 import { c as createServerRpc } from "./createServerRpc-Bd3B-Ah9.js";
 import * as fs from "node:fs";
 import { g as getStatsPath } from "./claude-path-BdwflgZ1.js";
+import * as path from "node:path";
+import * as os from "node:os";
 import { z } from "zod";
 import { c as createServerFn } from "../server.js";
-import "node:path";
-import "node:os";
 import "@tanstack/history";
 import "@tanstack/router-core/ssr/client";
 import "@tanstack/router-core";
@@ -16,6 +16,59 @@ import "seroval";
 import "react/jsx-runtime";
 import "@tanstack/react-router/ssr/server";
 import "@tanstack/react-router";
+const CACHE_VERSION = 1;
+function getCacheDir() {
+  return path.join(os.homedir(), ".claude-dashboard", "cache");
+}
+function getCachePath(cacheKey) {
+  return path.join(getCacheDir(), `${cacheKey}.cache.json`);
+}
+function readDiskCache(cacheKey, sourceMtimeMs, schema) {
+  try {
+    const cachePath = getCachePath(cacheKey);
+    if (!fs.existsSync(cachePath)) {
+      return null;
+    }
+    const raw = fs.readFileSync(cachePath, "utf-8");
+    const parsed = JSON.parse(raw);
+    if (parsed.version !== CACHE_VERSION) {
+      return null;
+    }
+    if (parsed.sourceMtimeMs !== sourceMtimeMs) {
+      return null;
+    }
+    const result = schema.safeParse(parsed.data);
+    if (!result.success) {
+      console.warn(`[disk-cache] Zod validation failed for "${cacheKey}":`, result.error.message);
+      return null;
+    }
+    return result.data;
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.warn(`[disk-cache] Read failed for "${cacheKey}":`, message);
+    return null;
+  }
+}
+function writeDiskCache(cacheKey, sourceFile, sourceMtimeMs, data) {
+  try {
+    const cacheDir = getCacheDir();
+    fs.mkdirSync(cacheDir, { recursive: true });
+    const cachePath = getCachePath(cacheKey);
+    const tmpPath = `${cachePath}.tmp`;
+    const entry = {
+      version: CACHE_VERSION,
+      sourceFile,
+      sourceMtimeMs,
+      cachedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      data
+    };
+    fs.writeFileSync(tmpPath, JSON.stringify(entry), "utf-8");
+    fs.renameSync(tmpPath, cachePath);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.warn(`[disk-cache] Write failed for "${cacheKey}":`, message);
+  }
+}
 const DailyActivitySchema = z.object({
   date: z.string(),
   messageCount: z.number(),
@@ -64,9 +117,15 @@ async function parseStats() {
   if (cachedStats && cachedStats.mtimeMs === stat.mtimeMs) {
     return cachedStats.data;
   }
+  const diskResult = readDiskCache("stats", stat.mtimeMs, StatsCacheSchema);
+  if (diskResult) {
+    cachedStats = { mtimeMs: stat.mtimeMs, data: diskResult };
+    return diskResult;
+  }
   const raw = await fs.promises.readFile(statsPath, "utf-8");
   const parsed = JSON.parse(raw);
   const result = StatsCacheSchema.parse(parsed);
+  writeDiskCache("stats", statsPath, stat.mtimeMs, result);
   cachedStats = { mtimeMs: stat.mtimeMs, data: result };
   return result;
 }