claude-session-dashboard 0.1.2 → 0.2.1

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

@@ -0,0 +1,649 @@
+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, startOfISOWeek, parseISO } from "date-fns";
+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 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";
+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 "./settings.queries-DSQd324O.js";
+import "./settings.types-DntadCHo.js";
+import "zod";
+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: "#1f2937" }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: "dateLabel",
+          tick: { fill: "#6b7280", fontSize: 10 },
+          tickLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: { fill: "#6b7280", fontSize: 10 },
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          contentStyle: {
+            backgroundColor: "#111827",
+            border: "1px solid #374151",
+            borderRadius: "8px",
+            fontSize: "12px"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: "messageCount",
+          name: "Messages",
+          fill: "#3b82f6",
+          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 COLORS$1 = ["#3b82f6", "#8b5cf6", "#10b981", "#f59e0b", "#ef4444", "#6366f1"];
+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: "#1f2937" }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: "dateLabel",
+          tick: { fill: "#6b7280", fontSize: 10 },
+          tickLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: { fill: "#6b7280", 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 = ["#3b82f6", "#8b5cf6", "#10b981", "#f59e0b", "#ef4444", "#6366f1"];
+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: "#111827",
+            border: "1px solid #374151",
+            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(59, 130, 246, ${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 [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-blue-400 hover:underline",
+                children: 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,
+              " 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 { 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: 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-blue-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" })
+    ] }),
+    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(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
+};

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

@@ -1,6 +1,6 @@
 import { c as createServerRpc } from "./createServerRpc-Bd3B-Ah9.js";
 import * as fs from "node:fs";
-import { g as getStatsPath } from "./claude-path-on7ZBAjl.js";
+import { g as getStatsPath } from "./claude-path-BdwflgZ1.js";
 import { z } from "zod";
 import { c as createServerFn } from "../server.js";
 import "node:path";