claude-session-dashboard 0.4.4 → 0.5.0

package/dist/server/assets/{settings-D0FgLIR5.js → settings-DsLaw8yg.js}

@@ -1,21 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 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-5hznwWqr.js";
-import "./createSsrRpc-CVg2UDl0.js";
+import { s as settingsQuery, u as useSettingsMutation } from "./settings.queries-CMWxUDF-.js";
+import { a as SUBSCRIPTION_TIERS, b as DEFAULT_PRICING, D as DEFAULT_SETTINGS } from "./settings.types-CphWe-HW.js";
+import { u as usePrivacy, a as useTheme } from "./router-DAepjaOj.js";
+import "./createSsrRpc-OFLSk08e.js";
 import "../server.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 "@tanstack/router-core";
 import "tiny-invariant";
 import "seroval";
-import "@tanstack/react-router/ssr/server";
+import "@tanstack/history";
+import "@tanstack/router-core/ssr/client";
+import "@tanstack/router-core/ssr/server";
 import "@tanstack/react-router";
+import "@tanstack/react-router/ssr/server";
 import "zod";
 function TierSelector({ value, onChange }) {
   return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4", children: SUBSCRIPTION_TIERS.map((tier) => {
@@ -25,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-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"}`,
+        className: `rounded-lg border px-3 py-2 text-left transition-colors ${isSelected ? "border-brand-500 bg-brand-500/10 text-gray-100" : "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" })
@@ -115,6 +115,8 @@ function SettingsPage() {
 function SettingsForm({ settings }) {
   const mutation = useSettingsMutation();
   const { privacyMode, togglePrivacyMode } = usePrivacy();
+  const { theme, toggleTheme } = useTheme();
+  const isDark = theme === "dark";
   const [tier, setTier] = useState(settings.subscriptionTier);
   const [overrides, setOverrides] = useState(settings.pricingOverrides);
   const [isDirty, setIsDirty] = useState(false);
@@ -135,7 +137,8 @@ function SettingsForm({ settings }) {
     const updated = {
       version: 1,
       subscriptionTier: tier,
-      pricingOverrides: overrides
+      pricingOverrides: overrides,
+      dataSources: []
     };
     mutation.mutate(updated, {
       onSuccess: () => {
@@ -144,7 +147,7 @@ function SettingsForm({ settings }) {
     });
   }
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-white", children: "Settings" }),
+    /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-gray-100", 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" }),
@@ -194,6 +197,32 @@ function SettingsForm({ settings }) {
         ] })
       ] })
     ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-gray-300", children: "Theme" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-gray-500", children: "Switch between dark and light mode. Defaults to your system preference." }),
+      /* @__PURE__ */ jsx("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: isDark ? "Dark mode" : "Light mode" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: isDark ? "🌙" : "☀️" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": !isDark,
+              onClick: toggleTheme,
+              className: `relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors ${!isDark ? "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 ${!isDark ? "translate-x-[18px]" : "translate-x-[3px]"}`
+                }
+              )
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
     /* @__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." }),
@@ -232,7 +261,7 @@ function SettingsForm({ settings }) {
             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-brand-600 text-white hover:bg-brand-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-gray-100 hover:bg-brand-500" : "cursor-not-allowed bg-gray-800 text-gray-500"}`,
             children: mutation.isPending ? "Saving..." : "Save"
           }
         )

package/dist/server/assets/{settings.server-6B2PvLgf.js → settings.api-Cq5KPUxN.js}

@@ -1,21 +1,22 @@
-import { c as createServerRpc } from "./createServerRpc-Bd3B-Ah9.js";
+import { c as createServerRpc } from "./createServerRpc-D_-6bKnO.js";
 import * as path from "node:path";
 import * as fs from "node:fs";
 import * as os from "node:os";
-import { S as SettingsSchema, D as DEFAULT_SETTINGS } from "./settings.types-DntadCHo.js";
+import { S as SettingsSchema, D as DEFAULT_SETTINGS } from "./settings.types-CphWe-HW.js";
 import { c as createServerFn } from "../server.js";
 import "zod";
-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 "@tanstack/router-core";
 import "tiny-invariant";
 import "seroval";
+import "@tanstack/history";
+import "@tanstack/router-core/ssr/client";
+import "@tanstack/router-core/ssr/server";
+import "react";
+import "@tanstack/react-router";
 import "react/jsx-runtime";
 import "@tanstack/react-router/ssr/server";
-import "@tanstack/react-router";
 const SETTINGS_DIR = ".claude-dashboard";
 const SETTINGS_FILE = "settings.json";
 function getSettingsPath() {
@@ -25,9 +26,9 @@ function getSettingsDir() {
   return path.join(os.homedir(), SETTINGS_DIR);
 }
 const getSettings_createServerFn_handler = createServerRpc({
-  id: "810657681a273df5b4e58f0d8fcc6a5451598b489431b9bcaa98eea0ad815da8",
+  id: "72f81ef9e8fa751bab60a8bdabd7e77816e2a6723a5e6e26e03712c01b3a249c",
   name: "getSettings",
-  filename: "src/features/settings/settings.server.ts"
+  filename: "src/features/settings/settings.api.ts"
 }, (opts) => getSettings.__executeServer(opts));
 const getSettings = createServerFn({
   method: "GET"
@@ -47,9 +48,9 @@ const getSettings = createServerFn({
   }
 });
 const saveSettings_createServerFn_handler = createServerRpc({
-  id: "3050115d92ca91ab1fd8fd698e33076328aae80dc64ca27c088eee16cebccc1a",
+  id: "7fe8c2b131c4fc81aa9a2570aec79640ff84603fe0060d13c24928b7329cb236",
   name: "saveSettings",
-  filename: "src/features/settings/settings.server.ts"
+  filename: "src/features/settings/settings.api.ts"
 }, (opts) => saveSettings.__executeServer(opts));
 const saveSettings = createServerFn({
   method: "POST"

package/dist/server/assets/{settings.queries-DSQd324O.js → settings.queries-CMWxUDF-.js}

@@ -1,16 +1,16 @@
 import { queryOptions, useQueryClient, useMutation } from "@tanstack/react-query";
-import { c as createSsrRpc } from "./createSsrRpc-CVg2UDl0.js";
-import { S as SettingsSchema } from "./settings.types-DntadCHo.js";
+import { c as createSsrRpc } from "./createSsrRpc-OFLSk08e.js";
+import { S as SettingsSchema } from "./settings.types-CphWe-HW.js";
 import { c as createServerFn } from "../server.js";
 const getSettings = createServerFn({
   method: "GET"
-}).handler(createSsrRpc("810657681a273df5b4e58f0d8fcc6a5451598b489431b9bcaa98eea0ad815da8"));
+}).handler(createSsrRpc("72f81ef9e8fa751bab60a8bdabd7e77816e2a6723a5e6e26e03712c01b3a249c"));
 const saveSettings = createServerFn({
   method: "POST"
 }).inputValidator((input) => {
   const result = SettingsSchema.parse(input);
   return result;
-}).handler(createSsrRpc("3050115d92ca91ab1fd8fd698e33076328aae80dc64ca27c088eee16cebccc1a"));
+}).handler(createSsrRpc("7fe8c2b131c4fc81aa9a2570aec79640ff84603fe0060d13c24928b7329cb236"));
 const settingsQuery = queryOptions({
   queryKey: ["settings"],
   queryFn: () => getSettings(),

package/dist/server/assets/{settings.types-DntadCHo.js → settings.types-CphWe-HW.js}

@@ -9,6 +9,14 @@ const SettingsSchema = z.object({
   version: z.literal(1),
   subscriptionTier: z.enum(["free", "pro", "max-5x", "max-20x", "teams", "enterprise", "api"]).default("pro"),
   pricingOverrides: z.record(z.string(), ModelPricingOverrideSchema).default({}),
+  dataSources: z.array(
+    z.object({
+      id: z.string(),
+      label: z.string(),
+      path: z.string(),
+      enabled: z.boolean().default(true)
+    })
+  ).default([]),
   updatedAt: z.string().datetime().optional()
 });
 const DEFAULT_PRICING = [
@@ -97,7 +105,8 @@ const SUBSCRIPTION_TIERS = [
 const DEFAULT_SETTINGS = {
   version: 1,
   subscriptionTier: "pro",
-  pricingOverrides: {}
+  pricingOverrides: {},
+  dataSources: []
 };
 function normalizeModelId(raw) {
   return raw.replace(/-\d{8}$/, "");

package/dist/server/assets/{stats-Ae6umrPI.js → stats-DKbhSePW.js}

@@ -1,35 +1,43 @@
 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 createSsrRpc } from "./createSsrRpc-OFLSk08e.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-5hznwWqr.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 { u as usePrivacy, R as Route } from "./router-DAepjaOj.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-iQEg4FRM.js";
 import "node:async_hooks";
-import "@tanstack/router-core/ssr/server";
 import "h3-v2";
+import "@tanstack/router-core";
 import "tiny-invariant";
 import "seroval";
+import "@tanstack/history";
+import "@tanstack/router-core/ssr/client";
+import "@tanstack/router-core/ssr/server";
 import "@tanstack/react-router/ssr/server";
 import "zod";
-import "./settings.queries-DSQd324O.js";
-import "./settings.types-DntadCHo.js";
+import "./settings.queries-CMWxUDF-.js";
+import "./settings.types-CphWe-HW.js";
 const getStats = createServerFn({
   method: "GET"
-}).handler(createSsrRpc("4b9a58c176f487b49800a372100037cdf33cf048f3592a449f115c7e3f5ea799"));
+}).handler(createSsrRpc("44af69d3bfcf3ec46fffb3f297d2b12cd7fe4db36c654b8a322df34d549c6493"));
 const statsQuery = queryOptions({
   queryKey: ["stats"],
   queryFn: () => getStats(),
   refetchInterval: 6e4
 });
+const getProjectAnalytics = createServerFn({
+  method: "GET"
+}).handler(createSsrRpc("39e65590d2bc41f653f54a9b6a9e0a72f185da275304c0a4a595d811cf185572"));
+const projectAnalyticsQuery = queryOptions({
+  queryKey: ["projects", "analytics"],
+  queryFn: () => getProjectAnalytics(),
+  refetchInterval: 6e4
+});
 function ActivityChart({ data }) {
   const chartData = data.map((d) => ({
     ...d,
@@ -39,19 +47,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: "#2a2926" }),
+      /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--color-gray-800)" }),
       /* @__PURE__ */ jsx(
         XAxis,
         {
           dataKey: "dateLabel",
-          tick: { fill: "#7a7668", fontSize: 10 },
+          tick: { fill: "var(--color-gray-500)", fontSize: 10 },
           tickLine: false
         }
       ),
       /* @__PURE__ */ jsx(
         YAxis,
         {
-          tick: { fill: "#7a7668", fontSize: 10 },
+          tick: { fill: "var(--color-gray-500)", fontSize: 10 },
           tickLine: false,
           axisLine: false
         }
@@ -60,8 +68,8 @@ function ActivityChart({ data }) {
         Tooltip,
         {
           contentStyle: {
-            backgroundColor: "#1c1c1a",
-            border: "1px solid #3d3b36",
+            backgroundColor: "var(--color-gray-900)",
+            border: "1px solid var(--color-gray-700)",
             borderRadius: "8px",
             fontSize: "12px"
           }
@@ -98,7 +106,7 @@ function ActivityChart({ data }) {
   ] });
 }
 const INTENSITY_COLORS = [
-  "#2a2926",
+  "var(--color-gray-800)",
   // Level 0: warm gray-800 (no activity)
   "#3d2a1e",
   // Level 1: dark terracotta
@@ -422,7 +430,7 @@ function CustomTooltip({ active, payload, label }) {
     ] }, 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) })
+      /* @__PURE__ */ jsx("span", { className: "font-mono font-medium text-gray-100", children: formatTokenCount(total) })
     ] })
   ] });
 }
@@ -462,7 +470,7 @@ function TokenTrendChart({ data }) {
           {
             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"}`,
+            className: `rounded-l-lg px-3 py-1 ${granularity === "daily" ? "bg-gray-700 text-gray-100" : "text-gray-400 hover:text-gray-300"}`,
             children: "Daily"
           }
         ),
@@ -471,26 +479,26 @@ function TokenTrendChart({ data }) {
           {
             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"}`,
+            className: `rounded-r-lg px-3 py-1 ${granularity === "weekly" ? "bg-gray-700 text-gray-100" : "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(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--color-gray-800)" }),
       /* @__PURE__ */ jsx(
         XAxis,
         {
           dataKey: "dateLabel",
-          tick: { fill: "#7a7668", fontSize: 10 },
+          tick: { fill: "var(--color-gray-500)", fontSize: 10 },
           tickLine: false
         }
       ),
       /* @__PURE__ */ jsx(
         YAxis,
         {
-          tick: { fill: "#7a7668", fontSize: 10 },
+          tick: { fill: "var(--color-gray-500)", fontSize: 10 },
           tickLine: false,
           axisLine: false,
           tickFormatter: (value) => formatTokenCount(value)
@@ -544,8 +552,8 @@ function ModelUsageChart({ data }) {
         {
           formatter: (value) => formatTokenCount(value),
           contentStyle: {
-            backgroundColor: "#1c1c1a",
-            border: "1px solid #3d3b36",
+            backgroundColor: "var(--color-gray-900)",
+            border: "1px solid var(--color-gray-700)",
             borderRadius: "8px",
             fontSize: "12px"
           }
@@ -610,14 +618,6 @@ function HourlyDistribution({
     ] })
   ] });
 }
-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" },
@@ -690,7 +690,7 @@ function ProjectTable({ projects }) {
               {
                 to: "/sessions",
                 search: { project: project.projectName },
-                className: "text-sm text-brand-300 hover:underline",
+                className: "text-sm text-brand-500 hover:underline",
                 children: anonymizeProjectName(project.projectName)
               }
             ),
@@ -769,7 +769,7 @@ function SummaryCard({
 }) {
   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 }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-xl font-bold text-gray-100", children: value }),
     sub && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: sub })
   ] });
 }
@@ -802,7 +802,7 @@ function StatsPage() {
   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("h1", { className: "text-2xl font-bold text-gray-100", 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: [{
@@ -824,12 +824,12 @@ function StatsPage() {
         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" }),
+      }), className: `px-4 py-2 text-sm border-b-2 transition-colors ${tab === "overview" ? "border-brand-500 text-gray-100" : "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" })
+      }), className: `px-4 py-2 text-sm border-b-2 transition-colors ${tab === "projects" ? "border-brand-500 text-gray-100" : "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, {}) })
   ] });
@@ -839,10 +839,16 @@ function StatsOverview({
   isLoading,
   cost
 }) {
+  const {
+    data: projectData
+  } = useQuery(projectAnalyticsQuery);
   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
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4", children: Array.from({
+        length: 4
+      }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-xl bg-gray-900/50" }, i)) }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4", children: Array.from({
+        length: 4
       }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-xl bg-gray-900/50" }, i)) }),
       Array.from({
         length: 3
@@ -853,12 +859,20 @@ function StatsOverview({
     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);
+  const totalToolCalls = stats.dailyActivity.reduce((sum, d) => sum + d.toolCallCount, 0);
+  const totalDurationMs = projectData?.projects.reduce((sum, p) => sum + p.totalDurationMs, 0) ?? 0;
+  const projectCount = projectData?.projects.length ?? 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "mt-6 grid grid-cols-2 gap-3 md:grid-cols-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mt-6 grid grid-cols-2 gap-3 md:grid-cols-4", 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: "Total Time", value: formatDuration(totalDurationMs) }),
+      /* @__PURE__ */ jsx(StatCard, { label: "Projects", value: String(projectCount) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-3 md:grid-cols-4", children: [
+      /* @__PURE__ */ jsx(StatCard, { label: "Total Tokens", value: formatTokenCount(totalTokens) }),
+      /* @__PURE__ */ jsx(StatCard, { label: "Estimated Cost", value: cost ? `~${formatUSD(cost.totalUSD)}` : "N/A" }),
+      /* @__PURE__ */ jsx(StatCard, { label: "Tool Calls", value: totalToolCalls.toLocaleString() }),
       /* @__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 }) }),
@@ -877,7 +891,7 @@ function StatCard({
 }) {
   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 }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-xl font-bold text-gray-100", children: value }),
     sub && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: sub })
   ] });
 }

package/dist/server/assets/{stats.server-DhzOihwM.js → stats.api-tIZqhk4B.js}

@@ -1,23 +1,25 @@
-import { c as createServerRpc } from "./createServerRpc-Bd3B-Ah9.js";
+import { c as createServerRpc } from "./createServerRpc-D_-6bKnO.js";
 import * as fs from "node:fs";
-import { a as getStatsPath, p as parseDetail } from "./session-parser-B0pdBvgT.js";
+import { g as getStatsPath, p as parseDetail } from "./session-parser-DKZZMuh6.js";
 import * as path from "node:path";
 import * as os from "node:os";
 import { z } from "zod";
-import { s as scanAllSessionsWithPaths } from "./session-scanner-CpgOq5m1.js";
+import { a as scanAllSessionsWithPaths } from "./session-scanner-CECpfGFh.js";
 import { c as createServerFn } from "../server.js";
+import "node:fs/promises";
 import "node:readline";
-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 "@tanstack/router-core";
 import "tiny-invariant";
 import "seroval";
+import "@tanstack/history";
+import "@tanstack/router-core/ssr/client";
+import "@tanstack/router-core/ssr/server";
+import "react";
+import "@tanstack/react-router";
 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");
@@ -384,9 +386,9 @@ async function computeStatsFromSessions() {
   }
 }
 const getStats_createServerFn_handler = createServerRpc({
-  id: "4b9a58c176f487b49800a372100037cdf33cf048f3592a449f115c7e3f5ea799",
+  id: "44af69d3bfcf3ec46fffb3f297d2b12cd7fe4db36c654b8a322df34d549c6493",
   name: "getStats",
-  filename: "src/features/stats/stats.server.ts"
+  filename: "src/features/stats/stats.api.ts"
 }, (opts) => getStats.__executeServer(opts));
 const getStats = createServerFn({
   method: "GET"

package/dist/server/assets/{useSessionCost-CYs5UOX-.js → useSessionCost-iQEg4FRM.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect, 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";
+import { s as settingsQuery } from "./settings.queries-CMWxUDF-.js";
+import { b as DEFAULT_PRICING, n as normalizeModelId } from "./settings.types-CphWe-HW.js";
 function escapeCSVField(value) {
   if (value.includes(",") || value.includes('"') || value.includes("\n")) {
     return `"${value.replace(/"/g, '""')}"`;