claude-session-dashboard 0.4.4 → 0.4.5

package/dist/server/assets/{_dashboard-smfIqyQC.js → _dashboard-61fpMMMe.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMatches, Link, Outlet } from "@tanstack/react-router";
 import { useQuery, queryOptions } from "@tanstack/react-query";
-import { a as activeSessionsQuery } from "./sessions.queries-B5ZBiVJy.js";
+import { a as activeSessionsQuery } from "./sessions.queries-CvAnVbE8.js";
 import { c as createSsrRpc } from "./createSsrRpc-CVg2UDl0.js";
 import { c as createServerFn } from "../server.js";
 import "zod";
@@ -22,7 +22,7 @@ function ActiveSessionsBadge() {
 }
 const getAppInfo = createServerFn({
   method: "GET"
-}).handler(createSsrRpc("955327d72ca3168c4751159ca07b8fb0fe0d2381dd0b991f06b941480959fbe8"));
+}).handler(createSsrRpc("04ac41a7e3e644815167d098c2d6c3375d00a72a11e5af0d37033ba771081ba9"));
 const appInfoQuery = queryOptions({
   queryKey: ["app-info"],
   queryFn: () => getAppInfo(),
@@ -64,7 +64,7 @@ function AppShell({ children }) {
   const { data: appInfo } = useQuery(appInfoQuery);
   return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen", children: [
     /* @__PURE__ */ jsxs("aside", { className: "flex w-56 shrink-0 flex-col border-r border-gray-800 bg-gray-950", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex h-14 items-center border-b border-gray-800 px-4", children: /* @__PURE__ */ jsxs(Link, { to: "/sessions", className: "text-sm font-bold text-white", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-14 items-center border-b border-gray-800 px-4", children: /* @__PURE__ */ jsxs(Link, { to: "/sessions", className: "text-sm font-bold text-gray-100", children: [
         /* @__PURE__ */ jsx("span", { className: "text-brand-500", children: "Claude" }),
         " Dashboard"
       ] }) }),
@@ -74,7 +74,7 @@ function AppShell({ children }) {
           Link,
           {
             to: item.to,
-            className: `flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors ${isActive ? "bg-gray-800 text-white" : "text-gray-400 hover:bg-gray-800/50 hover:text-gray-200"}`,
+            className: `flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors ${isActive ? "bg-gray-800 text-gray-100" : "text-gray-400 hover:bg-gray-900 hover:text-gray-200"}`,
             children: [
               /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: item.icon }),
               item.label,
@@ -84,7 +84,7 @@ function AppShell({ children }) {
           item.to
         );
       }) }),
-      /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-800 p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-800 p-3 space-y-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(
@@ -110,12 +110,12 @@ function AppShell({ children }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600", children: "Read-only" })
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: "Read-only" })
         ] }),
         appInfo && /* @__PURE__ */ jsxs(
           "p",
           {
-            className: "mt-1.5 truncate text-[10px] text-gray-600",
+            className: "mt-1.5 truncate text-[10px] text-gray-500",
             title: `v${appInfo.version} · ${appInfo.appPath}`,
             children: [
               "v",

package/dist/server/assets/{_sessionId-DIUMcrWR.js → _sessionId-B_O50OfN.js}

@@ -7,10 +7,10 @@ import { useRef, useCallback, useState, useEffect, useMemo } from "react";
 import { format } from "date-fns";
 import { a as formatDuration, f as formatTokenCount, e as formatDateTime, c as formatUSD } from "./format-DIZHV7IJ.js";
 import { ResponsiveContainer, AreaChart, YAxis, Tooltip, ReferenceLine, Area } from "recharts";
-import { s as settingsQuery } from "./settings.queries-DSQd324O.js";
-import { g as getMergedPricing, c as calculateSessionCost, u as useSessionCost, E as ExportDropdown, d as downloadFile, e as sessionToJSON } from "./useSessionCost-CYs5UOX-.js";
-import { a as activeSessionsQuery } from "./sessions.queries-B5ZBiVJy.js";
-import { b as Route, u as usePrivacy } from "./router-5hznwWqr.js";
+import { s as settingsQuery } from "./settings.queries-BVEZA-1G.js";
+import { g as getMergedPricing, c as calculateSessionCost, u as useSessionCost, E as ExportDropdown, d as downloadFile, e as sessionToJSON } from "./useSessionCost-CyWBuljV.js";
+import { a as activeSessionsQuery } from "./sessions.queries-CvAnVbE8.js";
+import { c as Route, u as usePrivacy } from "./router-BvYNknMb.js";
 import "@tanstack/history";
 import "@tanstack/router-core/ssr/client";
 import "@tanstack/router-core";
@@ -24,7 +24,7 @@ import "./settings.types-DntadCHo.js";
 import "zod";
 const getSessionDetail = createServerFn({
   method: "GET"
-}).inputValidator((input) => input).handler(createSsrRpc("ff8a3161afdfa175e9c519e4146a56ab5bce6e80745e99cfc2191ebbb7a859bb"));
+}).inputValidator((input) => input).handler(createSsrRpc("71794080473579a94431392ab409ebd02772f6a9f6a08386cadbb8c0d3cf804a"));
 function sessionDetailQuery(sessionId, projectPath, isActive) {
   return queryOptions({
     queryKey: ["session", "detail", sessionId],
@@ -305,7 +305,7 @@ function TimelineChart({ data, width, onHover }) {
             y1: TOP_MARGIN - 4,
             x2: chartWidth - RIGHT_MARGIN,
             y2: TOP_MARGIN - 4,
-            stroke: "#374151",
+            stroke: "var(--color-gray-700)",
             strokeWidth: 1
           }
         ),
@@ -317,7 +317,7 @@ function TimelineChart({ data, width, onHover }) {
               y1: TOP_MARGIN - 8,
               x2: tick.x,
               y2: TOP_MARGIN - 4,
-              stroke: "#4b5563",
+              stroke: "var(--color-gray-600)",
               strokeWidth: 1
             }
           ),
@@ -348,7 +348,7 @@ function TimelineChart({ data, width, onHover }) {
             y1: mainLaneY + LANE_HEIGHT / 2,
             x2: chartWidth - RIGHT_MARGIN,
             y2: mainLaneY + LANE_HEIGHT / 2,
-            stroke: "#1f2937",
+            stroke: "var(--color-gray-800)",
             strokeWidth: 1,
             strokeDasharray: "2,4"
           }
@@ -405,7 +405,7 @@ function TimelineChart({ data, width, onHover }) {
               y1: skillRowY + LANE_HEIGHT / 2,
               x2: chartWidth - RIGHT_MARGIN,
               y2: skillRowY + LANE_HEIGHT / 2,
-              stroke: "#1f2937",
+              stroke: "var(--color-gray-800)",
               strokeWidth: 1,
               strokeDasharray: "2,4"
             }
@@ -457,7 +457,7 @@ function TimelineChart({ data, width, onHover }) {
               y1: errorRowY + LANE_HEIGHT / 2,
               x2: chartWidth - RIGHT_MARGIN,
               y2: errorRowY + LANE_HEIGHT / 2,
-              stroke: "#1f2937",
+              stroke: "var(--color-gray-800)",
               strokeWidth: 1,
               strokeDasharray: "2,4"
             }
@@ -908,7 +908,7 @@ function ContextWindowPanel({ contextWindow, tokens }) {
       /* @__PURE__ */ jsx("span", { className: "rounded bg-gray-800 px-1.5 py-0.5 text-[10px] font-mono text-gray-400", children: shortModel })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-baseline gap-1", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold text-white", children: formatTokenCount(currentContextSize) }),
+      /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold text-gray-100", children: formatTokenCount(currentContextSize) }),
       /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500", children: [
         "/ ",
         formatTokenCount(contextLimit)
@@ -1032,8 +1032,8 @@ function ContextWindowPanel({ contextWindow, tokens }) {
           Tooltip,
           {
             contentStyle: {
-              background: "#1c1c1a",
-              border: "1px solid #3d3b36",
+              background: "var(--color-gray-900)",
+              border: "1px solid var(--color-gray-700)",
               borderRadius: "8px",
               fontSize: "11px"
             },
@@ -1155,7 +1155,7 @@ function TokenFallback({ tokens }) {
   ];
   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" }),
-    /* @__PURE__ */ jsx("p", { className: "mt-1 text-2xl font-bold text-white", children: formatTokenCount(activeTotal) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-2xl font-bold text-gray-100", children: formatTokenCount(activeTotal) }),
     /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-gray-500", children: [
       "input + output (",
       formatTokenCount(allTotal),
@@ -1336,7 +1336,7 @@ function SkillInvocationsPanel({
     ] }),
     /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-1", children: groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "rounded bg-gray-950/40 px-2 py-1.5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("span", { className: "shrink-0 rounded bg-amber-500/20 px-1.5 py-0.5 text-[10px] font-semibold text-amber-300", children: [
+        /* @__PURE__ */ jsxs("span", { className: "shrink-0 rounded bg-brand-500/20 px-1.5 py-0.5 text-[10px] font-semibold text-brand-400", children: [
           "/",
           group.skill
         ] }),
@@ -1425,7 +1425,7 @@ function CostEstimationPanel({ tokensByModel }) {
   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__ */ jsx("h3", { className: "text-sm font-semibold text-gray-300", children: "Cost Estimation" }),
-      /* @__PURE__ */ jsxs("span", { className: "font-mono text-lg font-bold text-white", children: [
+      /* @__PURE__ */ jsxs("span", { className: "font-mono text-lg font-bold text-gray-100", children: [
         "~",
         formatUSD(cost.totalUSD)
       ] })
@@ -1581,7 +1581,7 @@ function SessionDetailPage() {
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(Link, { to: "/sessions", className: "text-xs text-gray-500 hover:text-gray-300", children: "← Sessions" }),
-        /* @__PURE__ */ jsx("h1", { className: "mt-1 text-xl font-bold text-white", children: privacyMode ? anonymizeProjectName(detail.projectName) : detail.projectName }),
+        /* @__PURE__ */ jsx("h1", { className: "mt-1 text-xl font-bold text-gray-100", children: privacyMode ? anonymizeProjectName(detail.projectName) : detail.projectName }),
         /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-3 text-xs text-gray-400", children: [
           detail.branch && /* @__PURE__ */ jsx("span", { className: "font-mono", children: anonymizeBranch(detail.branch) }),
           startedAt && /* @__PURE__ */ jsx("span", { children: formatDateTime(startedAt) }),

package/dist/server/assets/_tanstack-start-manifest_v-Dva5sIpS.js

@@ -0,0 +1,4 @@
+const tsrStartManifest = () => ({ "routes": { "__root__": { "filePath": "/home/runner/work/claude-session-dashboard/claude-session-dashboard/apps/web/src/routes/__root.tsx", "children": ["/", "/_dashboard"], "preloads": ["/assets/main-B6FohBFQ.js"], "assets": [] }, "/": { "filePath": "/home/runner/work/claude-session-dashboard/claude-session-dashboard/apps/web/src/routes/index.tsx" }, "/_dashboard": { "filePath": "/home/runner/work/claude-session-dashboard/claude-session-dashboard/apps/web/src/routes/_dashboard.tsx", "children": ["/_dashboard/settings", "/_dashboard/stats", "/_dashboard/sessions/$sessionId", "/_dashboard/sessions/"], "assets": [], "preloads": ["/assets/_dashboard-Job6DOd1.js", "/assets/createServerFn-6SJrpRCO.js", "/assets/sessions.queries-ClgzoOt4.js"] }, "/_dashboard/settings": { "filePath": "/home/runner/work/claude-session-dashboard/claude-session-dashboard/apps/web/src/routes/_dashboard/settings.tsx", "assets": [], "preloads": ["/assets/settings-DQD2EaIq.js", "/assets/settings.types-LYd9Z8Y1.js"] }, "/_dashboard/stats": { "filePath": "/home/runner/work/claude-session-dashboard/claude-session-dashboard/apps/web/src/routes/_dashboard/stats.tsx", "assets": [], "preloads": ["/assets/stats-CrWQ_y2R.js", "/assets/format-Bsprb3az.js", "/assets/useSessionCost-Drt0v6oj.js", "/assets/settings.types-LYd9Z8Y1.js"] }, "/_dashboard/sessions/$sessionId": { "filePath": "/home/runner/work/claude-session-dashboard/claude-session-dashboard/apps/web/src/routes/_dashboard/sessions/$sessionId.tsx", "assets": [], "preloads": ["/assets/_sessionId-CIFXqjVa.js", "/assets/format-Bsprb3az.js", "/assets/useSessionCost-Drt0v6oj.js", "/assets/settings.types-LYd9Z8Y1.js"] }, "/_dashboard/sessions/": { "filePath": "/home/runner/work/claude-session-dashboard/claude-session-dashboard/apps/web/src/routes/_dashboard/sessions/index.tsx", "assets": [], "preloads": ["/assets/index-DDr2smLW.js", "/assets/format-Bsprb3az.js"] } }, "clientEntry": "/assets/main-B6FohBFQ.js" });
+export {
+  tsrStartManifest
+};

package/dist/server/assets/{app-info.server-CXcS0a5s.js → app-info.api-CdaWsxHl.js}

@@ -14,9 +14,9 @@ import "react/jsx-runtime";
 import "@tanstack/react-router/ssr/server";
 import "@tanstack/react-router";
 const getAppInfo_createServerFn_handler = createServerRpc({
-  id: "955327d72ca3168c4751159ca07b8fb0fe0d2381dd0b991f06b941480959fbe8",
+  id: "04ac41a7e3e644815167d098c2d6c3375d00a72a11e5af0d37033ba771081ba9",
   name: "getAppInfo",
-  filename: "src/features/settings/app-info.server.ts"
+  filename: "src/features/settings/app-info.api.ts"
 }, (opts) => getAppInfo.__executeServer(opts));
 const getAppInfo = createServerFn({
   method: "GET"

package/dist/server/assets/{index-hFrIPkke.js → index-BYcFI9Ho.js}

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Link, useNavigate } from "@tanstack/react-router";
-import { p as paginatedSessionListQuery, a as activeSessionsQuery } from "./sessions.queries-B5ZBiVJy.js";
+import { p as paginatedSessionListQuery, a as activeSessionsQuery } from "./sessions.queries-CvAnVbE8.js";
 import { a as formatDuration, b as formatRelativeTime, d as formatBytes } from "./format-DIZHV7IJ.js";
-import { u as usePrivacy, a as Route } from "./router-5hznwWqr.js";
+import { u as usePrivacy, b as Route } from "./router-BvYNknMb.js";
 import "./createSsrRpc-CVg2UDl0.js";
 import "../server.js";
 import "@tanstack/history";
@@ -61,7 +61,7 @@ function SessionCard({ session }) {
         /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("h3", { className: "truncate text-sm font-semibold text-white", children: displayName }),
+              /* @__PURE__ */ jsx("h3", { className: "truncate text-sm font-semibold text-gray-100", children: displayName }),
               /* @__PURE__ */ jsx(StatusBadge, { isActive: session.isActive })
             ] }),
             displayBranch && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-xs text-gray-500", children: /* @__PURE__ */ jsx("span", { className: "font-mono", children: displayBranch }) })
@@ -137,7 +137,7 @@ function SessionFilters({ projects, activeCount }) {
       "button",
       {
         onClick: () => handleStatusChange(s),
-        className: `px-3 py-1.5 capitalize transition-colors ${status === s ? "bg-gray-700 text-white" : "text-gray-400 hover:text-gray-200"} ${s === "all" ? "rounded-l-lg" : ""} ${s === "completed" ? "rounded-r-lg" : ""}`,
+        className: `px-3 py-1.5 capitalize transition-colors ${status === s ? "bg-gray-700 text-gray-100" : "text-gray-400 hover:text-gray-200"} ${s === "all" ? "rounded-l-lg" : ""} ${s === "completed" ? "rounded-r-lg" : ""}`,
         children: [
           s,
           s === "active" && activeCount > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-1 text-emerald-400", children: [
@@ -256,7 +256,7 @@ function PaginationControls({
           "button",
           {
             onClick: () => onPageChange(item),
-            className: `min-w-[2rem] rounded-lg px-2 py-1.5 text-xs font-mono transition-colors ${item === page ? "bg-brand-600 text-white" : "border border-gray-700 bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200"}`,
+            className: `min-w-[2rem] rounded-lg px-2 py-1.5 text-xs font-mono transition-colors ${item === page ? "bg-brand-600 text-gray-100" : "border border-gray-700 bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200"}`,
             children: item
           },
           item
@@ -367,7 +367,7 @@ function SessionList() {
 }
 function SessionsPage() {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-white", children: "Sessions" }),
+    /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-gray-100", children: "Sessions" }),
     /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-400", children: "All Claude Code sessions from ~/.claude" }),
     /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(SessionList, {}) })
   ] });

package/dist/server/assets/{project-analytics.server-Bxk8-NnT.js → project-analytics.api-QnhRRs7T.js}

@@ -1,9 +1,9 @@
 import { c as createServerRpc } from "./createServerRpc-Bd3B-Ah9.js";
-import { a as scanAllSessions } from "./session-scanner-CpgOq5m1.js";
+import { a as scanAllSessions } from "./session-scanner-DRGzVO2T.js";
 import { c as createServerFn } from "../server.js";
 import "node:fs";
 import "node:path";
-import "./session-parser-B0pdBvgT.js";
+import "./session-parser-DxLcS8VW.js";
 import "node:os";
 import "node:readline";
 import "@tanstack/history";
@@ -45,9 +45,9 @@ function aggregateProjectAnalytics(allSessions) {
   };
 }
 const getProjectAnalytics_createServerFn_handler = createServerRpc({
-  id: "64052f224a1d6696436e5d3deeee2b798f0742e1292ffabd038c3a7bf75e6fcb",
+  id: "39e65590d2bc41f653f54a9b6a9e0a72f185da275304c0a4a595d811cf185572",
   name: "getProjectAnalytics",
-  filename: "src/features/project-analytics/project-analytics.server.ts"
+  filename: "src/features/project-analytics/project-analytics.api.ts"
 }, (opts) => getProjectAnalytics.__executeServer(opts));
 const getProjectAnalytics = createServerFn({
   method: "GET"

package/dist/server/assets/{router-5hznwWqr.js → router-BvYNknMb.js}

@@ -1,7 +1,7 @@
 import { createRootRoute, Outlet, HeadContent, Scripts, createFileRoute, lazyRouteComponent, redirect, createRouter } from "@tanstack/react-router";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import { useState, useRef, useCallback, createContext, useContext } from "react";
+import { useState, useRef, useCallback, createContext, useContext, useEffect, useMemo } from "react";
 import { z } from "zod";
 const OS_USERNAME_PATTERN = /^(\/(?:Users|home))\/[^/]+/;
 function anonymizePath(path, anonymizedProjectName) {
@@ -96,7 +96,57 @@ function usePrivacy() {
   }
   return ctx;
 }
-const appCss = "/assets/app-DREGBD44.css";
+const THEME_STORAGE_KEY = "csd-theme";
+const ThemeContext = createContext(null);
+function getInitialTheme() {
+  if (typeof window === "undefined") return "dark";
+  const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+  if (stored === "light" || stored === "dark") {
+    return stored;
+  }
+  const prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+  return prefersDark ? "dark" : "light";
+}
+function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState(getInitialTheme);
+  useEffect(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-theme", theme);
+    window.localStorage.setItem(THEME_STORAGE_KEY, theme);
+    const metaTheme = document.querySelector('meta[name="theme-color"]');
+    if (metaTheme) {
+      metaTheme.setAttribute("content", theme === "dark" ? "#141413" : "#f5f3ec");
+    }
+  }, [theme]);
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const listener = (event) => {
+      const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+      if (stored !== "light" && stored !== "dark") {
+        setTheme(event.matches ? "dark" : "light");
+      }
+    };
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, []);
+  const value = useMemo(
+    () => ({
+      theme,
+      toggleTheme: () => setTheme((prev) => prev === "dark" ? "light" : "dark"),
+      setTheme
+    }),
+    [theme]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return ctx;
+}
+const appCss = "/assets/app-CkRVT69z.css";
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -125,18 +175,35 @@ const Route$6 = createRootRoute({
   component: RootComponent
 });
 function RootComponent() {
-  return /* @__PURE__ */ jsx(RootDocument, { children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(PrivacyProvider, { children: /* @__PURE__ */ jsx(Outlet, {}) }) }) });
+  return /* @__PURE__ */ jsx(RootDocument, { children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(PrivacyProvider, { children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
 }
+const themeInitScript = `
+(() => {
+  try {
+    const stored = localStorage.getItem('csd-theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = stored === 'light' || stored === 'dark' ? stored : (prefersDark ? 'dark' : 'light');
+    document.documentElement.setAttribute('data-theme', theme);
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) meta.setAttribute('content', theme === 'dark' ? '#141413' : '#f5f3ec');
+  } catch (e) {
+    document.documentElement.setAttribute('data-theme', 'dark');
+  }
+})();
+`;
 function RootDocument({ children }) {
   return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
-    /* @__PURE__ */ jsx("head", { children: /* @__PURE__ */ jsx(HeadContent, {}) }),
-    /* @__PURE__ */ jsxs("body", { className: "bg-gray-950 text-gray-100 antialiased", children: [
+    /* @__PURE__ */ jsxs("head", { children: [
+      /* @__PURE__ */ jsx(HeadContent, {}),
+      /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: themeInitScript } })
+    ] }),
+    /* @__PURE__ */ jsxs("body", { className: "antialiased", children: [
       children,
       /* @__PURE__ */ jsx(Scripts, {})
     ] })
   ] });
 }
-const $$splitComponentImporter$4 = () => import("./_dashboard-smfIqyQC.js");
+const $$splitComponentImporter$4 = () => import("./_dashboard-61fpMMMe.js");
 const Route$5 = createFileRoute("/_dashboard")({
   component: lazyRouteComponent($$splitComponentImporter$4, "component")
 });
@@ -145,7 +212,7 @@ const Route$4 = createFileRoute("/")({
     throw redirect({ to: "/sessions" });
   }
 });
-const $$splitComponentImporter$3 = () => import("./stats-Ae6umrPI.js");
+const $$splitComponentImporter$3 = () => import("./stats-CZEpvzmd.js");
 const statsSearchSchema = z.object({
   tab: z.enum(["overview", "projects"]).default("overview").catch("overview")
 });
@@ -153,11 +220,11 @@ const Route$3 = createFileRoute("/_dashboard/stats")({
   validateSearch: statsSearchSchema,
   component: lazyRouteComponent($$splitComponentImporter$3, "component")
 });
-const $$splitComponentImporter$2 = () => import("./settings-D0FgLIR5.js");
+const $$splitComponentImporter$2 = () => import("./settings-Ct2BZGxb.js");
 const Route$2 = createFileRoute("/_dashboard/settings")({
   component: lazyRouteComponent($$splitComponentImporter$2, "component")
 });
-const $$splitComponentImporter$1 = () => import("./index-hFrIPkke.js");
+const $$splitComponentImporter$1 = () => import("./index-BYcFI9Ho.js");
 const sessionsSearchSchema = z.object({
   page: z.number().int().min(1).default(1).catch(1),
   pageSize: z.number().int().min(5).max(100).default(5).catch(5),
@@ -169,7 +236,7 @@ const Route$1 = createFileRoute("/_dashboard/sessions/")({
   validateSearch: sessionsSearchSchema,
   component: lazyRouteComponent($$splitComponentImporter$1, "component")
 });
-const $$splitComponentImporter = () => import("./_sessionId-DIUMcrWR.js");
+const $$splitComponentImporter = () => import("./_sessionId-B_O50OfN.js");
 const searchSchema = z.object({
   project: z.string().optional()
 });
@@ -233,8 +300,9 @@ const router = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
 }, Symbol.toStringTag, { value: "Module" }));
 export {
   Route$3 as R,
-  Route$1 as a,
-  Route as b,
+  useTheme as a,
+  Route$1 as b,
+  Route as c,
   router as r,
   usePrivacy as u
 };

package/dist/server/assets/{session-detail.server-BIoOQwSE.js → session-detail.api-8plxSeB0.js}

@@ -1,7 +1,7 @@
 import { c as createServerRpc } from "./createServerRpc-Bd3B-Ah9.js";
 import * as path from "node:path";
 import * as fs from "node:fs";
-import { e as extractProjectName, p as parseDetail, g as getProjectsDir, d as decodeProjectDirName } from "./session-parser-B0pdBvgT.js";
+import { e as extractProjectName, p as parseDetail, a as getProjectsDir, d as decodeProjectDirName } from "./session-parser-DxLcS8VW.js";
 import { c as createServerFn } from "../server.js";
 import "node:os";
 import "node:readline";
@@ -17,9 +17,9 @@ import "react/jsx-runtime";
 import "@tanstack/react-router/ssr/server";
 import "@tanstack/react-router";
 const getSessionDetail_createServerFn_handler = createServerRpc({
-  id: "ff8a3161afdfa175e9c519e4146a56ab5bce6e80745e99cfc2191ebbb7a859bb",
+  id: "71794080473579a94431392ab409ebd02772f6a9f6a08386cadbb8c0d3cf804a",
   name: "getSessionDetail",
-  filename: "src/features/session-detail/session-detail.server.ts"
+  filename: "src/features/session-detail/session-detail.api.ts"
 }, (opts) => getSessionDetail.__executeServer(opts));
 const getSessionDetail = createServerFn({
   method: "GET"

package/dist/server/assets/{session-parser-B0pdBvgT.js → session-parser-DxLcS8VW.js}

@@ -664,11 +664,11 @@ function extractTextContent(msg) {
   return texts.length > 0 ? texts.join("\n").slice(0, 500) : void 0;
 }
 export {
-  getStatsPath as a,
+  getProjectsDir as a,
   extractSessionId as b,
   parseSummary as c,
   decodeProjectDirName as d,
   extractProjectName as e,
-  getProjectsDir as g,
+  getStatsPath as g,
   parseDetail as p
 };

package/dist/server/assets/{session-scanner-CpgOq5m1.js → session-scanner-DRGzVO2T.js}

@@ -1,6 +1,6 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
-import { g as getProjectsDir, d as decodeProjectDirName, e as extractProjectName, b as extractSessionId, c as parseSummary } from "./session-parser-B0pdBvgT.js";
+import { a as getProjectsDir, d as decodeProjectDirName, e as extractProjectName, b as extractSessionId, c as parseSummary } from "./session-parser-DxLcS8VW.js";
 async function scanProjects() {
   const projectsDir = getProjectsDir();
   let entries;

package/dist/server/assets/{sessions.server-Biq8gbAJ.js → sessions.api-DRmOjipJ.js}

@@ -1,10 +1,10 @@
 import { c as createServerRpc } from "./createServerRpc-Bd3B-Ah9.js";
 import { z } from "zod";
-import { a as scanAllSessions, g as getActiveSessions } from "./session-scanner-CpgOq5m1.js";
+import { a as scanAllSessions, g as getActiveSessions } from "./session-scanner-DRGzVO2T.js";
 import { c as createServerFn } from "../server.js";
 import "node:fs";
 import "node:path";
-import "./session-parser-B0pdBvgT.js";
+import "./session-parser-DxLcS8VW.js";
 import "node:os";
 import "node:readline";
 import "@tanstack/history";
@@ -19,9 +19,9 @@ import "react/jsx-runtime";
 import "@tanstack/react-router/ssr/server";
 import "@tanstack/react-router";
 const getSessionList_createServerFn_handler = createServerRpc({
-  id: "bf8e4a7901f1843bdc9c46be1ad5ad59c615b8bbe611b73eb3ff28f20e43ee0d",
+  id: "8fd6c4e5b4d5590acf1ec73da75f249978e8aced6dd2be23de06ade8431033be",
   name: "getSessionList",
-  filename: "src/features/sessions/sessions.server.ts"
+  filename: "src/features/sessions/sessions.api.ts"
 }, (opts) => getSessionList.__executeServer(opts));
 const getSessionList = createServerFn({
   method: "GET"
@@ -29,9 +29,9 @@ const getSessionList = createServerFn({
   return scanAllSessions();
 });
 const getActiveSessionList_createServerFn_handler = createServerRpc({
-  id: "839d29fe93dfa2a6d506af7b48ca25197190a5ff4c796e970ddfdc6e8c98827f",
+  id: "946cc550946f64ee7985dc35913a690eb13183d7ba83cffe398e424e697b4265",
   name: "getActiveSessionList",
-  filename: "src/features/sessions/sessions.server.ts"
+  filename: "src/features/sessions/sessions.api.ts"
 }, (opts) => getActiveSessionList.__executeServer(opts));
 const getActiveSessionList = createServerFn({
   method: "GET"
@@ -83,9 +83,9 @@ async function paginateAndFilterSessions(allSessions, input) {
   };
 }
 const getPaginatedSessions_createServerFn_handler = createServerRpc({
-  id: "a3f42f9012fd83586787da8f7cb90649da739dd947d867eb67572f68735ff495",
+  id: "e574977967ea9b3387e72d70704b6ca87230e72becaf69f0b98cbc91c9cd1339",
   name: "getPaginatedSessions",
-  filename: "src/features/sessions/sessions.server.ts"
+  filename: "src/features/sessions/sessions.api.ts"
 }, (opts) => getPaginatedSessions.__executeServer(opts));
 const getPaginatedSessions = createServerFn({
   method: "GET"

package/dist/server/assets/{sessions.queries-B5ZBiVJy.js → sessions.queries-CvAnVbE8.js}

@@ -4,10 +4,10 @@ import { z } from "zod";
 import { c as createServerFn } from "../server.js";
 const getSessionList = createServerFn({
   method: "GET"
-}).handler(createSsrRpc("bf8e4a7901f1843bdc9c46be1ad5ad59c615b8bbe611b73eb3ff28f20e43ee0d"));
+}).handler(createSsrRpc("8fd6c4e5b4d5590acf1ec73da75f249978e8aced6dd2be23de06ade8431033be"));
 const getActiveSessionList = createServerFn({
   method: "GET"
-}).handler(createSsrRpc("839d29fe93dfa2a6d506af7b48ca25197190a5ff4c796e970ddfdc6e8c98827f"));
+}).handler(createSsrRpc("946cc550946f64ee7985dc35913a690eb13183d7ba83cffe398e424e697b4265"));
 const paginatedSessionsInputSchema = z.object({
   page: z.number().int().min(1),
   pageSize: z.number().int().min(5).max(100),
@@ -17,7 +17,7 @@ const paginatedSessionsInputSchema = z.object({
 });
 const getPaginatedSessions = createServerFn({
   method: "GET"
-}).inputValidator((input) => paginatedSessionsInputSchema.parse(input)).handler(createSsrRpc("a3f42f9012fd83586787da8f7cb90649da739dd947d867eb67572f68735ff495"));
+}).inputValidator((input) => paginatedSessionsInputSchema.parse(input)).handler(createSsrRpc("e574977967ea9b3387e72d70704b6ca87230e72becaf69f0b98cbc91c9cd1339"));
 queryOptions({
   queryKey: ["sessions", "list"],
   queryFn: () => getSessionList(),

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

@@ -1,9 +1,9 @@
 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 { s as settingsQuery, u as useSettingsMutation } from "./settings.queries-BVEZA-1G.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 { u as usePrivacy, a as useTheme } from "./router-BvYNknMb.js";
 import "./createSsrRpc-CVg2UDl0.js";
 import "../server.js";
 import "@tanstack/history";
@@ -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);
@@ -144,7 +146,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 +196,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 +260,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"
           }
         )