claude-session-dashboard 0.2.1 → 0.3.1

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

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

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

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

package/dist/server/server.js

@@ -423,7 +423,7 @@ function getResponse() {
   return event.res;
 }
 async function getStartManifest(matchedRoutes) {
-  const { tsrStartManifest } = await import("./assets/_tanstack-start-manifest_v-C5hwNzs-.js");
+  const { tsrStartManifest } = await import("./assets/_tanstack-start-manifest_v-CVdzOaof.js");
   const startManifest = tsrStartManifest();
   const rootRoute = startManifest.routes[rootRouteId] = startManifest.routes[rootRouteId] || {};
   rootRoute.assets = rootRoute.assets || [];
@@ -577,30 +577,30 @@ function createMultiplexedStream(jsonStream, rawStreams) {
     }
   });
 }
-const manifest = { "4b9a58c176f487b49800a372100037cdf33cf048f3592a449f115c7e3f5ea799": {
-  functionName: "getStats_createServerFn_handler",
-  importer: () => import("./assets/stats.server-52mNk2Yw.js")
-}, "ff8a3161afdfa175e9c519e4146a56ab5bce6e80745e99cfc2191ebbb7a859bb": {
+const manifest = { "ff8a3161afdfa175e9c519e4146a56ab5bce6e80745e99cfc2191ebbb7a859bb": {
   functionName: "getSessionDetail_createServerFn_handler",
-  importer: () => import("./assets/session-detail.server-DLXl-Pn-.js")
-}, "bf8e4a7901f1843bdc9c46be1ad5ad59c615b8bbe611b73eb3ff28f20e43ee0d": {
-  functionName: "getSessionList_createServerFn_handler",
-  importer: () => import("./assets/sessions.server-CUhasKW2.js")
-}, "839d29fe93dfa2a6d506af7b48ca25197190a5ff4c796e970ddfdc6e8c98827f": {
-  functionName: "getActiveSessionList_createServerFn_handler",
-  importer: () => import("./assets/sessions.server-CUhasKW2.js")
-}, "a3f42f9012fd83586787da8f7cb90649da739dd947d867eb67572f68735ff495": {
-  functionName: "getPaginatedSessions_createServerFn_handler",
-  importer: () => import("./assets/sessions.server-CUhasKW2.js")
+  importer: () => import("./assets/session-detail.server-IUw67jz-.js")
+}, "4b9a58c176f487b49800a372100037cdf33cf048f3592a449f115c7e3f5ea799": {
+  functionName: "getStats_createServerFn_handler",
+  importer: () => import("./assets/stats.server-DXJiLqey.js")
 }, "810657681a273df5b4e58f0d8fcc6a5451598b489431b9bcaa98eea0ad815da8": {
   functionName: "getSettings_createServerFn_handler",
   importer: () => import("./assets/settings.server-6B2PvLgf.js")
 }, "3050115d92ca91ab1fd8fd698e33076328aae80dc64ca27c088eee16cebccc1a": {
   functionName: "saveSettings_createServerFn_handler",
   importer: () => import("./assets/settings.server-6B2PvLgf.js")
+}, "bf8e4a7901f1843bdc9c46be1ad5ad59c615b8bbe611b73eb3ff28f20e43ee0d": {
+  functionName: "getSessionList_createServerFn_handler",
+  importer: () => import("./assets/sessions.server-Cpffr3MU.js")
+}, "839d29fe93dfa2a6d506af7b48ca25197190a5ff4c796e970ddfdc6e8c98827f": {
+  functionName: "getActiveSessionList_createServerFn_handler",
+  importer: () => import("./assets/sessions.server-Cpffr3MU.js")
+}, "a3f42f9012fd83586787da8f7cb90649da739dd947d867eb67572f68735ff495": {
+  functionName: "getPaginatedSessions_createServerFn_handler",
+  importer: () => import("./assets/sessions.server-Cpffr3MU.js")
 }, "64052f224a1d6696436e5d3deeee2b798f0742e1292ffabd038c3a7bf75e6fcb": {
   functionName: "getProjectAnalytics_createServerFn_handler",
-  importer: () => import("./assets/project-analytics.server-BkWSd6a8.js")
+  importer: () => import("./assets/project-analytics.server-t1bM6wAa.js")
 } };
 async function getServerFnById(id) {
   const serverFnInfo = manifest[id];
@@ -1016,7 +1016,7 @@ let entriesPromise;
 let baseManifestPromise;
 let cachedFinalManifestPromise;
 async function loadEntries() {
-  const routerEntry = await import("./assets/router-ChxlsPNU.js").then((n) => n.r);
+  const routerEntry = await import("./assets/router-kB-tCwY9.js").then((n) => n.r);
   const startEntry = await import("./assets/start-HYkvq4Ni.js");
   return { startEntry, routerEntry };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-session-dashboard",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Local observability dashboard for Claude Code sessions",
   "type": "module",
   "license": "MIT",
@@ -42,6 +42,7 @@
     "e2e": "playwright test",
     "e2e:ui": "playwright test --ui",
     "e2e:headed": "playwright test --headed",
+    "lint": "eslint src/",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
@@ -55,6 +56,7 @@
     "zod": "^3.24.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@playwright/test": "^1.58.2",
     "@tailwindcss/vite": "^4.1.0",
     "@testing-library/react": "^16.3.2",
@@ -63,10 +65,14 @@
     "@types/react-dom": "^19.1.0",
     "@vitejs/plugin-react": "^5.1.0",
     "@vitest/ui": "^4.0.18",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.0",
     "happy-dom": "^20.6.1",
     "jsdom": "^28.0.0",
     "tailwindcss": "^4.1.0",
     "typescript": "^5.8.0",
+    "typescript-eslint": "^8.55.0",
     "vite": "^7.3.0",
     "vite-tsconfig-paths": "^4.3.0",
     "vitest": "^4.0.18"

package/dist/client/assets/_dashboard-Bxw4OxIS.js

@@ -1 +0,0 @@
-import{u as l,j as e,a as c,L as r,O as i}from"./main-CM5g2n-_.js";import{u as x}from"./createServerFn-B0pEGqTk.js";import{a as d}from"./sessions.queries-AUVV0tJj.js";function u(){const{privacyMode:s,togglePrivacyMode:t}=l();return e.jsxs("button",{type:"button",onClick:t,title:s?"Privacy mode on":"Privacy mode off",className:`flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs transition-colors ${s?"bg-blue-600 text-white":"bg-gray-800 text-gray-400 hover:text-gray-200"}`,children:[e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:"h-3.5 w-3.5",children:[s?e.jsx("path",{fillRule:"evenodd",d:"M3.28 2.22a.75.75 0 00-1.06 1.06l14.5 14.5a.75.75 0 101.06-1.06l-1.745-1.745a10.029 10.029 0 003.3-4.38 1.651 1.651 0 000-1.185A10.004 10.004 0 009.999 3a9.956 9.956 0 00-4.744 1.194L3.28 2.22zM7.752 6.69l1.092 1.092a2.5 2.5 0 013.374 3.373l1.092 1.092a4 4 0 00-5.558-5.558z",clipRule:"evenodd"}):e.jsx("path",{d:"M10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"}),s?e.jsx("path",{d:"M10.748 13.93l2.523 2.523a9.987 9.987 0 01-3.27.547c-4.258 0-7.894-2.66-9.337-6.41a1.651 1.651 0 010-1.186A10.007 10.007 0 012.839 6.02L6.07 9.252a4 4 0 004.678 4.678z"}):e.jsx("path",{fillRule:"evenodd",d:"M.458 10a9.996 9.996 0 019.542-6c4.258 0 7.894 2.66 9.337 6.41a1.651 1.651 0 010 1.186A10.004 10.004 0 0110 17.5c-4.258 0-7.894-2.66-9.337-6.41a1.651 1.651 0 010-1.186L.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z",clipRule:"evenodd"})]}),"Privacy"]})}function h(){const{data:s}=x(d),t=s?.length??0;return t===0?null:e.jsx("span",{className:"ml-auto rounded-full bg-green-500/20 px-1.5 py-0.5 text-[10px] font-medium text-green-400",children:t})}const m=[{to:"/sessions",label:"Sessions",icon:">"},{to:"/stats",label:"Stats",icon:"#"},{to:"/settings",label:"Settings",icon:"*"}];function g({children:s}){const t=c(),o=t[t.length-1]?.pathname??"";return e.jsxs("div",{className:"flex min-h-screen",children:[e.jsxs("aside",{className:"flex w-56 shrink-0 flex-col border-r border-gray-800 bg-gray-950",children:[e.jsx("div",{className:"flex h-14 items-center border-b border-gray-800 px-4",children:e.jsxs(r,{to:"/sessions",className:"text-sm font-bold text-white",children:[e.jsx("span",{className:"text-blue-400",children:"Claude"})," Dashboard"]})}),e.jsx("nav",{className:"flex-1 p-3",children:m.map(a=>{const n=o.startsWith(a.to);return e.jsxs(r,{to:a.to,className:`flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors ${n?"bg-gray-800 text-white":"text-gray-400 hover:bg-gray-800/50 hover:text-gray-200"}`,children:[e.jsx("span",{className:"font-mono text-xs text-gray-500",children:a.icon}),a.label,a.to==="/sessions"&&e.jsx(h,{})]},a.to)})}),e.jsxs("div",{className:"border-t border-gray-800 p-3",children:[e.jsx(u,{}),e.jsx("p",{className:"mt-2 text-xs text-gray-600",children:"Read-only observer"})]})]}),e.jsx("main",{className:"flex-1 overflow-auto",children:e.jsx("div",{className:"mx-auto max-w-5xl px-6 py-6",children:s})})]})}function f(){return e.jsx(g,{children:e.jsx(i,{})})}export{f as component};