claude-session-dashboard 0.1.0

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

@@ -0,0 +1,266 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { 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, PieChart, Pie, Cell, Legend } from "recharts";
+import { format } from "date-fns";
+import { f as formatTokenCount, a as formatUSD, b as formatDuration } from "./format-CGmJnuhZ.js";
+import { u as useSessionCost } from "./useSessionCost-EB0VxklP.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 "@tanstack/react-router";
+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 = ["#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 EMPTY_TOKENS_BY_MODEL = {};
+function StatsPage() {
+  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);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-32 animate-pulse rounded bg-gray-800" }),
+      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("div", { children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-white", children: "Stats" }),
+    /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-gray-400", children: [
+      "Aggregate usage from ",
+      stats.firstSessionDate?.split("T")[0],
+      " to",
+      " ",
+      stats.lastComputedDate
+    ] }),
+    /* @__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__ */ 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-BZWxV-mC.js

@@ -0,0 +1,85 @@
+import { c as createServerRpc } from "./createServerRpc-Bd3B-Ah9.js";
+import * as fs from "node:fs";
+import { a as getStatsPath } from "./claude-path-CkuljM34.js";
+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";
+import "node:async_hooks";
+import "@tanstack/router-core/ssr/server";
+import "h3-v2";
+import "tiny-invariant";
+import "seroval";
+import "react/jsx-runtime";
+import "@tanstack/react-router/ssr/server";
+import "@tanstack/react-router";
+const DailyActivitySchema = z.object({
+  date: z.string(),
+  messageCount: z.number(),
+  sessionCount: z.number(),
+  toolCallCount: z.number()
+});
+const DailyModelTokensSchema = z.object({
+  date: z.string(),
+  tokensByModel: z.record(z.string(), z.number())
+});
+const ModelUsageSchema = z.record(
+  z.string(),
+  z.object({
+    inputTokens: z.number(),
+    outputTokens: z.number(),
+    cacheReadInputTokens: z.number(),
+    cacheCreationInputTokens: z.number(),
+    webSearchRequests: z.number().optional(),
+    costUSD: z.number().optional()
+  })
+);
+const LongestSessionSchema = z.object({
+  sessionId: z.string(),
+  duration: z.number(),
+  messageCount: z.number(),
+  timestamp: z.string()
+});
+const StatsCacheSchema = z.object({
+  version: z.number(),
+  lastComputedDate: z.string(),
+  dailyActivity: z.array(DailyActivitySchema),
+  dailyModelTokens: z.array(DailyModelTokensSchema),
+  modelUsage: ModelUsageSchema,
+  totalSessions: z.number(),
+  totalMessages: z.number(),
+  longestSession: LongestSessionSchema,
+  firstSessionDate: z.string(),
+  hourCounts: z.record(z.string(), z.number()),
+  totalSpeculationTimeSavedMs: z.number().optional()
+});
+let cachedStats = null;
+async function parseStats() {
+  const statsPath = getStatsPath();
+  const stat = await fs.promises.stat(statsPath).catch(() => null);
+  if (!stat) return null;
+  if (cachedStats && cachedStats.mtimeMs === stat.mtimeMs) {
+    return cachedStats.data;
+  }
+  const raw = await fs.promises.readFile(statsPath, "utf-8");
+  const parsed = JSON.parse(raw);
+  const result = StatsCacheSchema.parse(parsed);
+  cachedStats = { mtimeMs: stat.mtimeMs, data: result };
+  return result;
+}
+const getStats_createServerFn_handler = createServerRpc({
+  id: "4b9a58c176f487b49800a372100037cdf33cf048f3592a449f115c7e3f5ea799",
+  name: "getStats",
+  filename: "src/features/stats/stats.server.ts"
+}, (opts) => getStats.__executeServer(opts));
+const getStats = createServerFn({
+  method: "GET"
+}).handler(getStats_createServerFn_handler, async () => {
+  return parseStats();
+});
+export {
+  getStats_createServerFn_handler
+};

package/dist/server/assets/useSessionCost-EB0VxklP.js

@@ -0,0 +1,76 @@
+import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { s as settingsQuery } from "./settings.queries-DSQd324O.js";
+import { b as DEFAULT_PRICING, n as normalizeModelId } from "./settings.types-DntadCHo.js";
+function getMergedPricing(settings) {
+  const table = {};
+  for (const model of DEFAULT_PRICING) {
+    const override = settings.pricingOverrides[model.modelId];
+    table[model.modelId] = override ? { ...model, ...override } : { ...model };
+  }
+  return table;
+}
+const FALLBACK_MODEL_ID = "claude-sonnet-4";
+function calculateSessionCost(tokensByModel, pricingTable) {
+  const byModel = {};
+  const byCategory = {
+    input: 0,
+    output: 0,
+    cacheRead: 0,
+    cacheWrite: 0
+  };
+  for (const [rawModelId, tokens] of Object.entries(tokensByModel)) {
+    const normalized = normalizeModelId(rawModelId);
+    const pricing = pricingTable[normalized] ?? pricingTable[FALLBACK_MODEL_ID];
+    if (!pricing) continue;
+    const inputCost = tokens.inputTokens / 1e6 * pricing.inputPerMTok;
+    const outputCost = tokens.outputTokens / 1e6 * pricing.outputPerMTok;
+    const cacheReadCost = tokens.cacheReadInputTokens / 1e6 * pricing.cacheReadPerMTok;
+    const cacheWriteCost = tokens.cacheCreationInputTokens / 1e6 * pricing.cacheWritePerMTok;
+    const totalCost = inputCost + outputCost + cacheReadCost + cacheWriteCost;
+    const existing = byModel[normalized];
+    if (existing) {
+      existing.inputCost += inputCost;
+      existing.outputCost += outputCost;
+      existing.cacheReadCost += cacheReadCost;
+      existing.cacheWriteCost += cacheWriteCost;
+      existing.totalCost += totalCost;
+      existing.tokens.inputTokens += tokens.inputTokens;
+      existing.tokens.outputTokens += tokens.outputTokens;
+      existing.tokens.cacheReadInputTokens += tokens.cacheReadInputTokens;
+      existing.tokens.cacheCreationInputTokens += tokens.cacheCreationInputTokens;
+    } else {
+      byModel[normalized] = {
+        modelId: normalized,
+        displayName: pricing.displayName,
+        inputCost,
+        outputCost,
+        cacheReadCost,
+        cacheWriteCost,
+        totalCost,
+        tokens: { ...tokens }
+      };
+    }
+    byCategory.input += inputCost;
+    byCategory.output += outputCost;
+    byCategory.cacheRead += cacheReadCost;
+    byCategory.cacheWrite += cacheWriteCost;
+  }
+  const totalUSD = byCategory.input + byCategory.output + byCategory.cacheRead + byCategory.cacheWrite;
+  return { totalUSD, byModel, byCategory };
+}
+function useSessionCost(tokensByModel) {
+  const { data: settings, isLoading } = useQuery(settingsQuery);
+  const cost = useMemo(() => {
+    if (!settings) return null;
+    if (Object.keys(tokensByModel).length === 0) return null;
+    const pricingTable = getMergedPricing(settings);
+    return calculateSessionCost(tokensByModel, pricingTable);
+  }, [settings, tokensByModel]);
+  return { cost, isLoading };
+}
+export {
+  calculateSessionCost as c,
+  getMergedPricing as g,
+  useSessionCost as u
+};