claude-session-dashboard 0.1.3 → 0.3.0

package/dist/server/assets/stats-BtgVene-.js

@@ -0,0 +1,886 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+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, 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 "@tanstack/history";
+import "@tanstack/router-core/ssr/client";
+import "@tanstack/router-core";
+import "node:async_hooks";
+import "@tanstack/router-core/ssr/server";
+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";
+const getStats = createServerFn({
+  method: "GET"
+}).handler(createSsrRpc("4b9a58c176f487b49800a372100037cdf33cf048f3592a449f115c7e3f5ea799"));
+const statsQuery = queryOptions({
+  queryKey: ["stats"],
+  queryFn: () => getStats(),
+  refetchInterval: 6e4
+});
+function ActivityChart({ data }) {
+  const chartData = data.map((d) => ({
+    ...d,
+    dateLabel: format(new Date(d.date), "MMM d")
+  }));
+  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: "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: "#2a2926" }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: "dateLabel",
+          tick: { fill: "#7a7668", fontSize: 10 },
+          tickLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: { fill: "#7a7668", fontSize: 10 },
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          contentStyle: {
+            backgroundColor: "#1c1c1a",
+            border: "1px solid #3d3b36",
+            borderRadius: "8px",
+            fontSize: "12px"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: "messageCount",
+          name: "Messages",
+          fill: "#d97757",
+          radius: [2, 2, 0, 0]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: "toolCallCount",
+          name: "Tool Calls",
+          fill: "#8b5cf6",
+          radius: [2, 2, 0, 0]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: "sessionCount",
+          name: "Sessions",
+          fill: "#10b981",
+          radius: [2, 2, 0, 0]
+        }
+      )
+    ] }) }) })
+  ] });
+}
+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];
+}
+function getTopModels(data, limit) {
+  const totals = {};
+  for (const day of data) {
+    for (const [model, tokens] of Object.entries(day.tokensByModel)) {
+      const normalized = normalizeModelName(model);
+      totals[normalized] = (totals[normalized] ?? 0) + tokens;
+    }
+  }
+  const sorted = Object.entries(totals).sort((a, b) => b[1] - a[1]);
+  const topModels = sorted.slice(0, limit).map(([name]) => name);
+  const hasOther = sorted.length > limit;
+  return { topModels, hasOther };
+}
+function processDaily(data, topModels, hasOther) {
+  return data.map((day) => {
+    const entry = {
+      dateLabel: format(parseISO(day.date), "MMM d"),
+      sortKey: day.date
+    };
+    for (const model of topModels) {
+      entry[model] = 0;
+    }
+    if (hasOther) {
+      entry["Other"] = 0;
+    }
+    for (const [rawModel, tokens] of Object.entries(day.tokensByModel)) {
+      const normalized = normalizeModelName(rawModel);
+      if (topModels.includes(normalized)) {
+        entry[normalized] = entry[normalized] + tokens;
+      } else if (hasOther) {
+        entry["Other"] = entry["Other"] + tokens;
+      }
+    }
+    return entry;
+  });
+}
+function processWeekly(data, topModels, hasOther) {
+  const weekMap = /* @__PURE__ */ new Map();
+  for (const day of data) {
+    const weekStart = startOfISOWeek(parseISO(day.date));
+    const weekKey = format(weekStart, "yyyy-MM-dd");
+    if (!weekMap.has(weekKey)) {
+      const entry2 = {
+        dateLabel: `Week of ${format(weekStart, "MMM d")}`,
+        sortKey: weekKey
+      };
+      for (const model of topModels) {
+        entry2[model] = 0;
+      }
+      if (hasOther) {
+        entry2["Other"] = 0;
+      }
+      weekMap.set(weekKey, entry2);
+    }
+    const entry = weekMap.get(weekKey);
+    for (const [rawModel, tokens] of Object.entries(day.tokensByModel)) {
+      const normalized = normalizeModelName(rawModel);
+      if (topModels.includes(normalized)) {
+        entry[normalized] = entry[normalized] + tokens;
+      } else if (hasOther) {
+        entry["Other"] = entry["Other"] + tokens;
+      }
+    }
+  }
+  return Array.from(weekMap.values()).sort(
+    (a, b) => a.sortKey.localeCompare(b.sortKey)
+  );
+}
+function CustomTooltip({ active, payload, label }) {
+  if (!active || !payload || payload.length === 0) return null;
+  const total = payload.reduce((sum, entry) => sum + entry.value, 0);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-gray-700 bg-gray-800 p-3 text-xs shadow-lg", children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-2 font-medium text-gray-300", children: label }),
+    payload.filter((entry) => entry.value > 0).sort((a, b) => b.value - a.value).map((entry) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-2 w-2 rounded-full",
+            style: { backgroundColor: entry.color }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: entry.name })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-gray-300", children: formatTokenCount(entry.value) })
+    ] }, entry.name)),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1.5 border-t border-gray-700 pt-1.5 flex justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Total" }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono font-medium text-white", children: formatTokenCount(total) })
+    ] })
+  ] });
+}
+function TokenTrendChart({ data }) {
+  const [granularity, setGranularity] = useState("daily");
+  const { topModels, hasOther } = useMemo(
+    () => getTopModels(data, 5),
+    [data]
+  );
+  const allModelKeys = useMemo(() => {
+    const keys = [...topModels];
+    if (hasOther) keys.push("Other");
+    return keys;
+  }, [topModels, hasOther]);
+  const chartData = useMemo(() => {
+    if (granularity === "weekly") {
+      return processWeekly(data, topModels, hasOther);
+    }
+    return processDaily(data, topModels, hasOther);
+  }, [data, topModels, hasOther, granularity]);
+  if (data.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: "Token Usage Over Time" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Total tokens by model per day" }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "No data available" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-gray-800 bg-gray-900/50 p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-300", children: "Token Usage Over Time" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Total tokens by model per day" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex rounded-lg border border-gray-700 text-xs", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setGranularity("daily"),
+            className: `rounded-l-lg px-3 py-1 ${granularity === "daily" ? "bg-gray-700 text-white" : "text-gray-400 hover:text-gray-300"}`,
+            children: "Daily"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setGranularity("weekly"),
+            className: `rounded-r-lg px-3 py-1 ${granularity === "weekly" ? "bg-gray-700 text-white" : "text-gray-400 hover:text-gray-300"}`,
+            children: "Weekly"
+          }
+        )
+      ] })
+    ] }),
+    /* @__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: "#2a2926" }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: "dateLabel",
+          tick: { fill: "#7a7668", fontSize: 10 },
+          tickLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: { fill: "#7a7668", fontSize: 10 },
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: (value) => formatTokenCount(value)
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}) }),
+      allModelKeys.map((model, i) => /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: "monotone",
+          dataKey: model,
+          stackId: "1",
+          stroke: COLORS$1[i % COLORS$1.length],
+          fill: COLORS$1[i % COLORS$1.length],
+          fillOpacity: 0.6
+        },
+        model
+      ))
+    ] }) }) })
+  ] });
+}
+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],
+    fullName: model,
+    totalTokens: usage.inputTokens + usage.outputTokens,
+    outputTokens: usage.outputTokens
+  }));
+  chartData.sort((a, b) => b.totalTokens - a.totalTokens);
+  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: "Model Usage" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Token usage by model" }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 h-64", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
+      /* @__PURE__ */ jsx(
+        Pie,
+        {
+          data: chartData,
+          cx: "50%",
+          cy: "50%",
+          innerRadius: 50,
+          outerRadius: 80,
+          dataKey: "totalTokens",
+          nameKey: "name",
+          strokeWidth: 0,
+          children: chartData.map((_, i) => /* @__PURE__ */ jsx(Cell, { fill: COLORS[i % COLORS.length], opacity: 0.8 }, i))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          formatter: (value) => formatTokenCount(value),
+          contentStyle: {
+            backgroundColor: "#1c1c1a",
+            border: "1px solid #3d3b36",
+            borderRadius: "8px",
+            fontSize: "12px"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Legend,
+        {
+          wrapperStyle: { fontSize: "11px" }
+        }
+      )
+    ] }) }) })
+  ] });
+}
+function HourlyDistribution({
+  hourCounts
+}) {
+  const hours = Array.from({ length: 24 }, (_, i) => ({
+    hour: i,
+    label: `${i.toString().padStart(2, "0")}:00`,
+    count: hourCounts[String(i)] ?? 0
+  }));
+  const maxCount = Math.max(...hours.map((h) => h.count), 1);
+  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: "Hourly Distribution" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Session starts by hour of day" }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 flex items-end gap-0.5", style: { height: "120px" }, children: hours.map((h) => {
+      const height = h.count > 0 ? Math.max(h.count / maxCount * 100, 4) : 0;
+      const intensity = h.count / maxCount;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group relative flex-1",
+          style: { height: "100%" },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute bottom-0 w-full rounded-t transition-colors",
+                style: {
+                  height: `${height}%`,
+                  backgroundColor: `rgba(217, 119, 87, ${0.2 + intensity * 0.6})`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "absolute -top-8 left-1/2 hidden -translate-x-1/2 whitespace-nowrap rounded bg-gray-800 px-1.5 py-0.5 text-[10px] text-gray-300 group-hover:block", children: [
+              h.label,
+              ": ",
+              h.count
+            ] })
+          ]
+        },
+        h.hour
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex justify-between text-[10px] text-gray-600", children: [
+      /* @__PURE__ */ jsx("span", { children: "00:00" }),
+      /* @__PURE__ */ jsx("span", { children: "06:00" }),
+      /* @__PURE__ */ jsx("span", { children: "12:00" }),
+      /* @__PURE__ */ jsx("span", { children: "18:00" }),
+      /* @__PURE__ */ jsx("span", { children: "23:00" })
+    ] })
+  ] });
+}
+const getProjectAnalytics = createServerFn({
+  method: "GET"
+}).handler(createSsrRpc("64052f224a1d6696436e5d3deeee2b798f0742e1292ffabd038c3a7bf75e6fcb"));
+const projectAnalyticsQuery = queryOptions({
+  queryKey: ["projects", "analytics"],
+  queryFn: () => getProjectAnalytics(),
+  refetchInterval: 6e4
+});
+const COLUMNS = [
+  { key: "projectName", label: "Project" },
+  { key: "totalSessions", label: "Sessions", align: "right" },
+  { key: "totalMessages", label: "Messages", align: "right" },
+  { key: "totalDurationMs", label: "Duration", align: "right" },
+  { 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(() => {
+    const copy = [...projects];
+    copy.sort((a, b) => {
+      let cmp = 0;
+      switch (sortField) {
+        case "projectName":
+          cmp = a.projectName.localeCompare(b.projectName);
+          break;
+        case "totalSessions":
+          cmp = a.totalSessions - b.totalSessions;
+          break;
+        case "totalMessages":
+          cmp = a.totalMessages - b.totalMessages;
+          break;
+        case "totalDurationMs":
+          cmp = a.totalDurationMs - b.totalDurationMs;
+          break;
+        case "lastSessionAt":
+          cmp = a.lastSessionAt.localeCompare(b.lastSessionAt);
+          break;
+      }
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+    return copy;
+  }, [projects, sortField, sortDir]);
+  function handleSort(field) {
+    if (field === sortField) {
+      setSortDir((prev) => prev === "asc" ? "desc" : "asc");
+    } else {
+      setSortField(field);
+      setSortDir("desc");
+    }
+  }
+  function renderSortIndicator(field) {
+    if (field !== sortField) return null;
+    return /* @__PURE__ */ jsx("span", { className: "ml-1", children: sortDir === "asc" ? "▲" : "▼" });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-xl border border-gray-800 bg-gray-900/50", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-gray-800", children: COLUMNS.map((col) => /* @__PURE__ */ jsxs(
+      "th",
+      {
+        onClick: () => handleSort(col.key),
+        className: `cursor-pointer px-4 py-3 text-xs font-medium text-gray-400 hover:text-gray-200 ${col.align === "right" ? "text-right" : "text-left"}`,
+        children: [
+          col.label,
+          renderSortIndicator(col.key)
+        ]
+      },
+      col.key
+    )) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: sorted.map((project) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        className: "border-b border-gray-800/50 transition-colors hover:bg-gray-800/30",
+        children: [
+          /* @__PURE__ */ jsxs("td", { className: "px-4 py-3", children: [
+            /* @__PURE__ */ jsx(
+              Link,
+              {
+                to: "/sessions",
+                search: { project: 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-emerald-500/20 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400", children: [
+              project.activeSessions,
+              " active"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-right font-mono text-sm text-gray-300", children: project.totalSessions }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-right font-mono text-sm text-gray-300", children: project.totalMessages.toLocaleString() }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-right font-mono text-sm text-gray-300", children: formatDuration(project.totalDurationMs) }),
+          /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-right text-sm text-gray-400", children: formatRelativeTime(project.lastSessionAt) })
+        ]
+      },
+      project.projectPath
+    )) })
+  ] }) });
+}
+function ProjectAnalytics() {
+  const { anonymizeProjectName } = usePrivacy();
+  const { data, isLoading } = useQuery(projectAnalyticsQuery);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-20 animate-pulse rounded-xl bg-gray-900/50"
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "h-64 animate-pulse rounded-xl bg-gray-900/50" })
+    ] });
+  }
+  const projects = data?.projects ?? [];
+  if (projects.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "py-12 text-center text-sm text-gray-500", children: "No projects found. Sessions will appear here once scanned." });
+  }
+  const totalSessions = projects.reduce((sum, p) => sum + p.totalSessions, 0);
+  const totalDurationMs = projects.reduce((sum, p) => sum + p.totalDurationMs, 0);
+  const mostActive = projects.reduce(
+    (max, p) => p.totalSessions > max.totalSessions ? p : max
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4", children: [
+      /* @__PURE__ */ jsx(SummaryCard, { label: "Total Projects", value: String(projects.length) }),
+      /* @__PURE__ */ jsx(
+        SummaryCard,
+        {
+          label: "Total Sessions",
+          value: totalSessions.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SummaryCard,
+        {
+          label: "Total Duration",
+          value: formatDuration(totalDurationMs)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SummaryCard,
+        {
+          label: "Most Active",
+          value: anonymizeProjectName(mostActive.projectName),
+          sub: `${mostActive.totalSessions} sessions`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(ProjectTable, { projects })
+  ] });
+}
+function SummaryCard({
+  label,
+  value,
+  sub
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-gray-800 bg-gray-900/50 p-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-xl font-bold text-white", children: value }),
+    sub && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: sub })
+  ] });
+}
+const EMPTY_TOKENS_BY_MODEL = {};
+function StatsPage() {
+  const {
+    tab
+  } = Route.useSearch();
+  const navigate = Route.useNavigate();
+  const {
+    data: stats,
+    isLoading
+  } = useQuery(statsQuery);
+  const tokensByModel = useMemo(() => {
+    if (!stats) return EMPTY_TOKENS_BY_MODEL;
+    const result = {};
+    for (const [model, usage] of Object.entries(stats.modelUsage)) {
+      result[model] = {
+        inputTokens: usage.inputTokens,
+        outputTokens: usage.outputTokens,
+        cacheReadInputTokens: usage.cacheReadInputTokens,
+        cacheCreationInputTokens: usage.cacheCreationInputTokens
+      };
+    }
+    return result;
+  }, [stats]);
+  const {
+    cost
+  } = useSessionCost(tokensByModel);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-white", children: "Stats" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-400", children: "Usage analytics and project insights" })
+      ] }),
+      tab === "overview" && stats && /* @__PURE__ */ jsx(ExportDropdown, { options: [{
+        label: "Daily Activity (CSV)",
+        onClick: () => downloadFile(dailyActivityToCSV(stats), "daily-activity.csv", "text/csv")
+      }, {
+        label: "Token Usage (CSV)",
+        onClick: () => downloadFile(dailyTokensToCSV(stats), "daily-tokens.csv", "text/csv")
+      }, {
+        label: "Model Usage (CSV)",
+        onClick: () => downloadFile(modelUsageToCSV(stats), "model-usage.csv", "text/csv")
+      }, {
+        label: "Full Stats (JSON)",
+        onClick: () => downloadFile(statsToJSON(stats), "stats.json", "application/json")
+      }] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-1 border-b border-gray-800", children: [
+      /* @__PURE__ */ jsx("button", { onClick: () => navigate({
+        search: {
+          tab: "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-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, {}) })
+  ] });
+}
+function StatsOverview({
+  stats,
+  isLoading,
+  cost
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-5", children: Array.from({
+        length: 5
+      }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-xl bg-gray-900/50" }, i)) }),
+      Array.from({
+        length: 3
+      }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-64 animate-pulse rounded-xl bg-gray-900/50" }, i))
+    ] });
+  }
+  if (!stats) {
+    return /* @__PURE__ */ jsx("div", { className: "py-12 text-center text-sm text-gray-500", children: "No stats data found. Check ~/.claude/stats-cache.json" });
+  }
+  const totalTokens = Object.values(stats.modelUsage).reduce((sum, m) => sum + m.inputTokens + m.outputTokens, 0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mt-6 grid grid-cols-2 gap-3 md:grid-cols-5", children: [
+      /* @__PURE__ */ jsx(StatCard, { label: "Total Sessions", value: String(stats.totalSessions) }),
+      /* @__PURE__ */ jsx(StatCard, { label: "Total Messages", value: stats.totalMessages.toLocaleString() }),
+      /* @__PURE__ */ jsx(StatCard, { label: "Total Tokens", value: formatTokenCount(totalTokens), sub: cost ? `~${formatUSD(cost.totalUSD)}` : void 0 }),
+      /* @__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(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 }),
+      /* @__PURE__ */ jsx(HourlyDistribution, { hourCounts: stats.hourCounts })
+    ] })
+  ] });
+}
+function StatCard({
+  label,
+  value,
+  sub
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-gray-800 bg-gray-900/50 p-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-xl font-bold text-white", children: value }),
+    sub && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: sub })
+  ] });
+}
+export {
+  StatsPage as component
+};