claude-session-dashboard 0.1.3 → 0.3.0

package/dist/client/favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="32" height="32" fill="#d97757">
+  <path d="m146-346-42-42 147-147-147-147 42-42 189 189-189 189Zm254 26v-60h414v60H400Z"/>
+</svg>

package/dist/server/assets/_dashboard-TUzgwLqB.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMatches, Link, Outlet } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { a as activeSessionsQuery } from "./sessions.queries-B5ZBiVJy.js";
+import "./createSsrRpc-CVg2UDl0.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 "tiny-invariant";
+import "seroval";
+import "@tanstack/react-router/ssr/server";
+import "zod";
+function ActiveSessionsBadge() {
+  const { data: activeSessions } = useQuery(activeSessionsQuery);
+  const count = activeSessions?.length ?? 0;
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsx("span", { className: "ml-auto rounded-full bg-emerald-500/20 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400", children: count });
+}
+const NAV_ITEMS = [
+  {
+    to: "/sessions",
+    label: "Sessions",
+    icon: /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+      /* @__PURE__ */ jsx("line", { x1: "2", y1: "4", x2: "14", y2: "4" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", y1: "8", x2: "14", y2: "8" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "14", y2: "12" })
+    ] })
+  },
+  {
+    to: "/stats",
+    label: "Stats",
+    icon: /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 16 16", fill: "currentColor", children: [
+      /* @__PURE__ */ jsx("rect", { x: "1", y: "8", width: "3", height: "7", rx: "0.5" }),
+      /* @__PURE__ */ jsx("rect", { x: "6.5", y: "4", width: "3", height: "11", rx: "0.5" }),
+      /* @__PURE__ */ jsx("rect", { x: "12", y: "1", width: "3", height: "14", rx: "0.5" })
+    ] })
+  },
+  {
+    to: "/settings",
+    label: "Settings",
+    icon: /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 16 16", fill: "currentColor", children: [
+      /* @__PURE__ */ jsx("path", { d: "M8 10a2 2 0 100-4 2 2 0 000 4z" }),
+      /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.5.8a1 1 0 011-.8h1a1 1 0 011 .8l.15.9a5.5 5.5 0 011.1.64l.86-.36a1 1 0 011.17.36l.5.86a1 1 0 01-.18 1.17l-.7.55a5.5 5.5 0 010 1.27l.7.55a1 1 0 01.18 1.17l-.5.86a1 1 0 01-1.17.36l-.86-.36a5.5 5.5 0 01-1.1.64l-.14.9a1 1 0 01-1 .8h-1a1 1 0 01-1-.8l-.14-.9a5.5 5.5 0 01-1.1-.64l-.87.36a1 1 0 01-1.17-.36l-.5-.86a1 1 0 01.18-1.17l.7-.55a5.5 5.5 0 010-1.27l-.7-.55a1 1 0 01-.18-1.17l.5-.86a1 1 0 011.17-.36l.87.36a5.5 5.5 0 011.1-.64L6.5.8zM8 11a3 3 0 100-6 3 3 0 000 6z" })
+    ] })
+  }
+];
+function AppShell({ children }) {
+  const matches = useMatches();
+  const currentPath = matches[matches.length - 1]?.pathname ?? "";
+  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("span", { className: "text-brand-500", children: "Claude" }),
+        " Dashboard"
+      ] }) }),
+      /* @__PURE__ */ jsx("nav", { className: "flex-1 p-3", children: NAV_ITEMS.map((item) => {
+        const isActive = currentPath.startsWith(item.to);
+        return /* @__PURE__ */ jsxs(
+          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"}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: item.icon }),
+              item.label,
+              item.to === "/sessions" && /* @__PURE__ */ jsx(ActiveSessionsBadge, {})
+            ]
+          },
+          item.to
+        );
+      }) }),
+      /* @__PURE__ */ jsx("div", { className: "border-t border-gray-800 p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "https://github.com/dlupiak/claude-session-dashboard",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-gray-500 hover:text-gray-300 transition-colors",
+              title: "GitHub Repository",
+              children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "https://www.npmjs.com/package/claude-session-dashboard",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-gray-500 hover:text-gray-300 transition-colors",
+              title: "npm Package",
+              children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M0 0v16h16V0H0zm13 13H8V5H5v8H3V3h10v10z" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600", children: "Read-only" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-5xl px-6 py-6", children }) })
+  ] });
+}
+function DashboardLayout() {
+  return /* @__PURE__ */ jsx(AppShell, { children: /* @__PURE__ */ jsx(Outlet, {}) });
+}
+export {
+  DashboardLayout as component
+};

package/dist/server/assets/{_sessionId-BwZK4Ezz.js → _sessionId-C-XZIPqn.js}

@@ -5,11 +5,12 @@ import { c as createSsrRpc } from "./createSsrRpc-CVg2UDl0.js";
 import { c as createServerFn } from "../server.js";
 import { useRef, useCallback, useState, useEffect, useMemo } from "react";
 import { format } from "date-fns";
-import { b as formatDuration, f as formatTokenCount, e as formatDateTime, a as formatUSD } from "./format-CGmJnuhZ.js";
+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 } from "./useSessionCost-EB0VxklP.js";
-import { a as Route, u as usePrivacy } from "./router-xTSe9UH_.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-Cb_hBXHI.js";
 import "@tanstack/history";
 import "@tanstack/router-core/ssr/client";
 import "@tanstack/router-core";
@@ -24,11 +25,12 @@ import "zod";
 const getSessionDetail = createServerFn({
   method: "GET"
 }).inputValidator((input) => input).handler(createSsrRpc("ff8a3161afdfa175e9c519e4146a56ab5bce6e80745e99cfc2191ebbb7a859bb"));
-function sessionDetailQuery(sessionId, projectPath) {
+function sessionDetailQuery(sessionId, projectPath, isActive) {
   return queryOptions({
     queryKey: ["session", "detail", sessionId],
     queryFn: () => getSessionDetail({ data: { sessionId, projectPath } }),
-    staleTime: 3e4
+    staleTime: isActive ? 2e3 : 3e4,
+    refetchInterval: isActive ? 5e3 : void 0
   });
 }
 function buildTimelineChartData(turns, agents, skills, errors) {
@@ -159,10 +161,10 @@ function shortenToolName(name) {
 }
 const TOOL_COLORS = {
   // File reading
-  Read: "#60a5fa",
-  // blue-400
-  Grep: "#60a5fa",
-  Glob: "#60a5fa",
+  Read: "#e09070",
+  // brand-400
+  Grep: "#e09070",
+  Glob: "#e09070",
   // File writing
   Write: "#34d399",
   // emerald-400
@@ -380,7 +382,6 @@ function TimelineChart({ data, width, onHover }) {
             y: agentLaneYs[i],
             toX,
             laneHeight: LANE_HEIGHT,
-            leftMargin: LEFT_MARGIN,
             onHover,
             getPosition
           },
@@ -524,7 +525,6 @@ function AgentLaneSVG({
   y,
   toX,
   laneHeight,
-  leftMargin,
   onHover,
   getPosition
 }) {
@@ -825,7 +825,7 @@ function StatBadge({
   color
 }) {
   const colorMap = {
-    blue: "bg-blue-500/15 text-blue-400",
+    blue: "bg-brand-500/15 text-brand-400",
     purple: "bg-purple-500/15 text-purple-400",
     gray: "bg-gray-800 text-gray-300",
     indigo: "bg-indigo-500/15 text-indigo-400",
@@ -898,7 +898,7 @@ function ContextWindowPanel({ contextWindow, tokens }) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "bg-blue-500",
+          className: "bg-brand-500",
           style: { width: `${messagesPct}%` },
           title: `Messages: ~${formatTokenCount(messagesEstimate)}`
         }
@@ -932,7 +932,7 @@ function ContextWindowPanel({ contextWindow, tokens }) {
         "system"
       ] }),
       /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "inline-block h-2 w-2 rounded-sm bg-blue-500" }),
+        /* @__PURE__ */ jsx("span", { className: "inline-block h-2 w-2 rounded-sm bg-brand-500" }),
         "messages"
       ] }),
       /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
@@ -957,7 +957,7 @@ function ContextWindowPanel({ contextWindow, tokens }) {
           label: "Messages",
           value: messagesEstimate,
           total: contextLimit,
-          color: "bg-blue-500",
+          color: "bg-brand-500",
           prefix: "~"
         }
       ),
@@ -984,8 +984,8 @@ function ContextWindowPanel({ contextWindow, tokens }) {
       /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] text-gray-500", children: "Context growth" }),
       /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 96, children: /* @__PURE__ */ jsxs(AreaChart, { data: chartData, children: [
         /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "contextGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#3b82f6", stopOpacity: 0.3 }),
-          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#3b82f6", stopOpacity: 0.05 })
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#d97757", stopOpacity: 0.3 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#d97757", stopOpacity: 0.05 })
         ] }) }),
         /* @__PURE__ */ jsx(
           YAxis,
@@ -998,8 +998,8 @@ function ContextWindowPanel({ contextWindow, tokens }) {
           Tooltip,
           {
             contentStyle: {
-              background: "#1f2937",
-              border: "1px solid #374151",
+              background: "#1c1c1a",
+              border: "1px solid #3d3b36",
               borderRadius: "8px",
               fontSize: "11px"
             },
@@ -1030,7 +1030,7 @@ function ContextWindowPanel({ contextWindow, tokens }) {
           {
             type: "stepAfter",
             dataKey: "context",
-            stroke: "#3b82f6",
+            stroke: "#d97757",
             fill: "url(#contextGrad)",
             strokeWidth: 1.5,
             dot: false
@@ -1090,7 +1090,7 @@ function CategoryRow({
 function TokenBreakdown({ tokens }) {
   const allTotal = tokens.inputTokens + tokens.outputTokens + tokens.cacheReadInputTokens + tokens.cacheCreationInputTokens;
   const items = [
-    { label: "Input", value: tokens.inputTokens, color: "bg-blue-400" },
+    { label: "Input", value: tokens.inputTokens, color: "bg-brand-400" },
     { label: "Output", value: tokens.outputTokens, color: "bg-emerald-400" },
     { label: "Cache Read", value: tokens.cacheReadInputTokens, color: "bg-amber-400" },
     { label: "Cache Create", value: tokens.cacheCreationInputTokens, color: "bg-purple-400" }
@@ -1114,7 +1114,7 @@ function TokenFallback({ tokens }) {
   const activeTotal = tokens.inputTokens + tokens.outputTokens;
   const allTotal = activeTotal + tokens.cacheReadInputTokens + tokens.cacheCreationInputTokens;
   const items = [
-    { label: "Input", value: tokens.inputTokens, color: "text-blue-400" },
+    { label: "Input", value: tokens.inputTokens, color: "text-brand-400" },
     { label: "Output", value: tokens.outputTokens, color: "text-emerald-400" },
     { label: "Cache Read", value: tokens.cacheReadInputTokens, color: "text-amber-400" },
     { label: "Cache Create", value: tokens.cacheCreationInputTokens, color: "text-purple-400" }
@@ -1165,9 +1165,9 @@ function ToolUsagePanel({
       /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: "h-4 rounded bg-blue-500/20",
+          className: "h-4 rounded bg-brand-500/20",
           style: { width: `${count / maxCount * 100}%` },
-          children: /* @__PURE__ */ jsx("span", { className: "px-1.5 text-xs text-blue-300", children: count })
+          children: /* @__PURE__ */ jsx("span", { className: "px-1.5 text-xs text-brand-300", children: count })
         }
       ) })
     ] }, tool)) })
@@ -1181,7 +1181,7 @@ function ErrorPanel({ errors }) {
       errors.length,
       ")"
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-2", children: errors.map((error, i) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-red-950/30 p-2.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "mt-3 max-h-64 space-y-2 overflow-y-auto", children: errors.map((error, i) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-red-950/30 p-2.5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-red-300", children: error.type }),
         error.timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: formatDateTime(error.timestamp) })
@@ -1342,8 +1342,8 @@ const statusConfig = {
   pending: { label: "Pending", bg: "bg-gray-500/20", text: "text-gray-400" },
   in_progress: {
     label: "In Progress",
-    bg: "bg-blue-500/20",
-    text: "text-blue-400"
+    bg: "bg-brand-500/20",
+    text: "text-brand-400"
   },
   completed: {
     label: "Done",
@@ -1437,7 +1437,7 @@ function CostEstimationPanel({ tokensByModel }) {
 }
 function CategoryBreakdown({ cost }) {
   const categories = [
-    { label: "Input tokens", value: cost.byCategory.input, color: "text-blue-400" },
+    { label: "Input tokens", value: cost.byCategory.input, color: "text-brand-400" },
     { label: "Output tokens", value: cost.byCategory.output, color: "text-emerald-400" },
     { label: "Cache read", value: cost.byCategory.cacheRead, color: "text-amber-400" },
     { label: "Cache write", value: cost.byCategory.cacheWrite, color: "text-purple-400" }
@@ -1450,7 +1450,7 @@ function CategoryBreakdown({ cost }) {
 function CostBar({ cost }) {
   if (cost.totalUSD === 0) return null;
   const segments = [
-    { key: "input", value: cost.byCategory.input, color: "bg-blue-400" },
+    { key: "input", value: cost.byCategory.input, color: "bg-brand-400" },
     { key: "output", value: cost.byCategory.output, color: "bg-emerald-400" },
     { key: "cacheRead", value: cost.byCategory.cacheRead, color: "bg-amber-400" },
     { key: "cacheWrite", value: cost.byCategory.cacheWrite, color: "bg-purple-400" }
@@ -1510,6 +1510,19 @@ function CostSummaryLine({ tokensByModel }) {
     }
   );
 }
+function ActiveSessionBanner() {
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-2 rounded-lg border border-emerald-800 bg-emerald-900/30 px-4 py-2 text-sm text-emerald-300", children: [
+    /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" }),
+      /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-emerald-500" })
+    ] }),
+    "This session is currently active. Data refreshes automatically."
+  ] });
+}
+function useIsSessionActive(sessionId) {
+  const { data: activeSessions } = useQuery(activeSessionsQuery);
+  return activeSessions?.some((s) => s.sessionId === sessionId) ?? false;
+}
 function SessionDetailPage() {
   const {
     sessionId
@@ -1519,13 +1532,15 @@ function SessionDetailPage() {
   } = Route.useSearch();
   const {
     privacyMode,
-    anonymizeProjectName
+    anonymizeProjectName,
+    anonymizeBranch
   } = usePrivacy();
+  const isActive = useIsSessionActive(sessionId);
   const {
     data: detail,
     isLoading,
     error
-  } = useQuery(sessionDetailQuery(sessionId, project));
+  } = useQuery(sessionDetailQuery(sessionId, project, isActive));
   if (isLoading) {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "h-8 w-48 animate-pulse rounded bg-gray-800" }),
@@ -1538,19 +1553,20 @@ function SessionDetailPage() {
         "Failed to load session: ",
         error?.message ?? "Not found"
       ] }),
-      /* @__PURE__ */ jsx(Link, { to: "/sessions", className: "mt-2 inline-block text-sm text-blue-400 hover:underline", children: "Back to sessions" })
+      /* @__PURE__ */ jsx(Link, { to: "/sessions", className: "mt-2 inline-block text-sm text-brand-300 hover:underline", children: "Back to sessions" })
     ] });
   }
   const startedAt = detail.turns[0]?.timestamp;
   const endedAt = detail.turns[detail.turns.length - 1]?.timestamp;
   const durationMs = startedAt && endedAt ? new Date(endedAt).getTime() - new Date(startedAt).getTime() : 0;
   return /* @__PURE__ */ jsxs("div", { children: [
+    isActive && /* @__PURE__ */ jsx(ActiveSessionBanner, {}),
     /* @__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__ */ 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: detail.branch }),
+          detail.branch && /* @__PURE__ */ jsx("span", { className: "font-mono", children: anonymizeBranch(detail.branch) }),
           startedAt && /* @__PURE__ */ jsx("span", { children: formatDateTime(startedAt) }),
           /* @__PURE__ */ jsx("span", { children: formatDuration(durationMs) }),
           /* @__PURE__ */ jsxs("span", { children: [
@@ -1561,7 +1577,13 @@ function SessionDetailPage() {
         ] }),
         detail.models.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex gap-1", children: detail.models.map((m) => /* @__PURE__ */ jsx("span", { className: "rounded bg-gray-800 px-1.5 py-0.5 text-[10px] font-mono text-gray-400", children: m.replace(/^claude-/, "").split("-202")[0] }, m)) })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-gray-600", children: sessionId.slice(0, 8) })
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(ExportDropdown, { options: [{
+          label: "Export Session (JSON)",
+          onClick: () => downloadFile(sessionToJSON(detail), `session-${sessionId.slice(0, 8)}.json`, "application/json")
+        }] }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-gray-600", children: sessionId.slice(0, 8) })
+      ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "mt-6 grid grid-cols-1 gap-4 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx(ContextWindowPanel, { contextWindow: detail.contextWindow, tokens: detail.totalTokens }),
@@ -1570,7 +1592,7 @@ function SessionDetailPage() {
     /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(CostEstimationPanel, { tokensByModel: detail.tokensByModel }) }),
     (detail.agents.length > 0 || detail.skills.length > 0) && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(AgentsSkillsPanel, { agents: detail.agents, skills: detail.skills }) }),
     detail.tasks.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(TasksPanel, { tasks: detail.tasks }) }),
-    /* @__PURE__ */ jsx(ErrorPanel, { errors: detail.errors }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(ErrorPanel, { errors: detail.errors }) }),
     /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
       /* @__PURE__ */ jsx("h2", { className: "mb-3 text-sm font-semibold text-gray-300", children: "Timeline" }),
       /* @__PURE__ */ jsx(TimelineEventsChart, { turns: detail.turns, agents: detail.agents, skills: detail.skills, errors: detail.errors })

package/dist/server/assets/_tanstack-start-manifest_v-B51mSkGz.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-CfJIADCp.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-I7m6D7BE.js", "/assets/createServerFn-Bn6_ISOt.js", "/assets/sessions.queries-CrJg4dYU.js"] }, "/_dashboard/settings": { "filePath": "/home/runner/work/claude-session-dashboard/claude-session-dashboard/apps/web/src/routes/_dashboard/settings.tsx", "assets": [], "preloads": ["/assets/settings-C4_lsEzl.js", "/assets/settings.types-9Qf5WcRY.js"] }, "/_dashboard/stats": { "filePath": "/home/runner/work/claude-session-dashboard/claude-session-dashboard/apps/web/src/routes/_dashboard/stats.tsx", "assets": [], "preloads": ["/assets/stats-_r1gmaTe.js", "/assets/format-Bsprb3az.js", "/assets/useSessionCost-DPZ-ubM1.js", "/assets/settings.types-9Qf5WcRY.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-DEliIff6.js", "/assets/format-Bsprb3az.js", "/assets/useSessionCost-DPZ-ubM1.js", "/assets/settings.types-9Qf5WcRY.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-BkqRvnEf.js", "/assets/format-Bsprb3az.js"] } }, "clientEntry": "/assets/main-CfJIADCp.js" });
+export {
+  tsrStartManifest
+};

package/dist/server/assets/{claude-path-CkuljM34.js → claude-path-BdwflgZ1.js}

@@ -1,6 +1,12 @@
 import * as path from "node:path";
 import * as os from "node:os";
-const CLAUDE_DIR = path.join(os.homedir(), ".claude");
+function resolveClaudeDir() {
+  if (process.env.CLAUDE_HOME) {
+    return path.resolve(process.env.CLAUDE_HOME);
+  }
+  return path.join(os.homedir(), ".claude");
+}
+const CLAUDE_DIR = resolveClaudeDir();
 function getProjectsDir() {
   return path.join(CLAUDE_DIR, "projects");
 }
@@ -17,9 +23,9 @@ function extractSessionId(filename) {
   return filename.replace(/\.jsonl$/, "");
 }
 export {
-  getStatsPath as a,
+  getProjectsDir as a,
   extractSessionId as b,
   decodeProjectDirName as d,
   extractProjectName as e,
-  getProjectsDir as g
+  getStatsPath as g
 };

package/dist/server/assets/{format-CGmJnuhZ.js → format-DIZHV7IJ.js}

@@ -48,9 +48,9 @@ function formatUSD(amount) {
   return `$${amount.toFixed(2)}`;
 }
 export {
-  formatUSD as a,
-  formatDuration as b,
-  formatRelativeTime as c,
+  formatDuration as a,
+  formatRelativeTime as b,
+  formatUSD as c,
   formatBytes as d,
   formatDateTime as e,
   formatTokenCount as f

package/dist/server/assets/{index-D4VWrt2z.js → index-CKfH7HpA.js}

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
-import { queryOptions, keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Link, useNavigate } from "@tanstack/react-router";
-import { c as createSsrRpc } from "./createSsrRpc-CVg2UDl0.js";
-import { z } from "zod";
-import { c as createServerFn } from "../server.js";
-import { b as formatDuration, c as formatRelativeTime, d as formatBytes } from "./format-CGmJnuhZ.js";
-import { u as usePrivacy, R as Route } from "./router-xTSe9UH_.js";
+import { p as paginatedSessionListQuery, a as activeSessionsQuery } from "./sessions.queries-B5ZBiVJy.js";
+import { a as formatDuration, b as formatRelativeTime, d as formatBytes } from "./format-DIZHV7IJ.js";
+import { u as usePrivacy, a as Route } from "./router-Cb_hBXHI.js";
+import "./createSsrRpc-CVg2UDl0.js";
+import "../server.js";
 import "@tanstack/history";
 import "@tanstack/router-core/ssr/client";
 import "@tanstack/router-core";
@@ -16,41 +16,8 @@ import "h3-v2";
 import "tiny-invariant";
 import "seroval";
 import "@tanstack/react-router/ssr/server";
+import "zod";
 import "date-fns";
-const getSessionList = createServerFn({
-  method: "GET"
-}).handler(createSsrRpc("bf8e4a7901f1843bdc9c46be1ad5ad59c615b8bbe611b73eb3ff28f20e43ee0d"));
-const getActiveSessionList = createServerFn({
-  method: "GET"
-}).handler(createSsrRpc("839d29fe93dfa2a6d506af7b48ca25197190a5ff4c796e970ddfdc6e8c98827f"));
-const paginatedSessionsInputSchema = z.object({
-  page: z.number().int().min(1),
-  pageSize: z.number().int().min(5).max(100),
-  search: z.string(),
-  status: z.enum(["all", "active", "completed"]),
-  project: z.string()
-});
-const getPaginatedSessions = createServerFn({
-  method: "GET"
-}).inputValidator((input) => paginatedSessionsInputSchema.parse(input)).handler(createSsrRpc("a3f42f9012fd83586787da8f7cb90649da739dd947d867eb67572f68735ff495"));
-queryOptions({
-  queryKey: ["sessions", "list"],
-  queryFn: () => getSessionList(),
-  refetchInterval: 3e4
-});
-const activeSessionsQuery = queryOptions({
-  queryKey: ["sessions", "active"],
-  queryFn: () => getActiveSessionList(),
-  refetchInterval: 3e3
-});
-function paginatedSessionListQuery(params) {
-  return queryOptions({
-    queryKey: ["sessions", "paginated", params],
-    queryFn: () => getPaginatedSessions({ data: params }),
-    placeholderData: keepPreviousData,
-    refetchInterval: 3e4
-  });
-}
 function StatusBadge({ isActive }) {
   if (isActive) {
     return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-emerald-500/15 px-2.5 py-0.5 text-xs font-medium text-emerald-400", children: [
@@ -79,9 +46,10 @@ function RunningTimer({ startedAt }) {
   return /* @__PURE__ */ jsx("span", { className: "text-emerald-400", children: formatDuration(elapsed) });
 }
 function SessionCard({ session }) {
-  const { privacyMode, anonymizePath, anonymizeProjectName } = usePrivacy();
+  const { privacyMode, anonymizePath, anonymizeProjectName, anonymizeBranch } = usePrivacy();
   const displayName = privacyMode ? anonymizeProjectName(session.projectName) : session.projectName;
-  const displayCwd = session.cwd ? privacyMode ? anonymizePath(session.cwd) : session.cwd : null;
+  const displayCwd = session.cwd ? anonymizePath(session.cwd, session.projectName) : null;
+  const displayBranch = session.branch ? anonymizeBranch(session.branch) : null;
   return /* @__PURE__ */ jsxs(
     Link,
     {
@@ -96,7 +64,7 @@ function SessionCard({ session }) {
               /* @__PURE__ */ jsx("h3", { className: "truncate text-sm font-semibold text-white", children: displayName }),
               /* @__PURE__ */ jsx(StatusBadge, { isActive: session.isActive })
             ] }),
-            session.branch && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-xs text-gray-500", children: /* @__PURE__ */ jsx("span", { className: "font-mono", children: session.branch }) })
+            displayBranch && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-xs text-gray-500", children: /* @__PURE__ */ jsx("span", { className: "font-mono", children: displayBranch }) })
           ] }),
           /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-gray-500", children: formatRelativeTime(session.lastActiveAt) })
         ] }),
@@ -162,7 +130,7 @@ function SessionFilters({ projects, activeCount }) {
         placeholder: "Search sessions...",
         value: localSearch,
         onChange: (e) => handleSearchChange(e.target.value),
-        className: "rounded-lg border border-gray-700 bg-gray-800/50 px-3 py-1.5 text-sm text-gray-200 placeholder-gray-500 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+        className: "rounded-lg border border-gray-700 bg-gray-800/50 px-3 py-1.5 text-sm text-gray-200 placeholder-gray-500 outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500"
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "flex rounded-lg border border-gray-700 text-xs", children: ["all", "active", "completed"].map((s) => /* @__PURE__ */ jsxs(
@@ -186,7 +154,7 @@ function SessionFilters({ projects, activeCount }) {
       {
         value: project,
         onChange: (e) => handleProjectChange(e.target.value),
-        className: "rounded-lg border border-gray-700 bg-gray-800/50 px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-blue-500",
+        className: "rounded-lg border border-gray-700 bg-gray-800/50 px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-brand-500",
         children: [
           /* @__PURE__ */ jsx("option", { value: "", children: "All projects" }),
           projects.map((p) => /* @__PURE__ */ jsx("option", { value: p, children: privacyMode ? anonymizeProjectName(p) : p }, p))
@@ -200,20 +168,20 @@ const VALID_SIZES = [5, 10, 25, 50];
 function isValidSize(value) {
   return VALID_SIZES.includes(value);
 }
-function usePageSizePreference() {
-  const [storedPageSize, setStoredPageSize] = useState(null);
-  useEffect(() => {
-    try {
-      const raw = localStorage.getItem(STORAGE_KEY);
-      if (raw !== null) {
-        const parsed = Number(raw);
-        if (isValidSize(parsed)) {
-          setStoredPageSize(parsed);
-        }
-      }
-    } catch {
+function readStoredPageSize() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw !== null) {
+      const parsed = Number(raw);
+      if (isValidSize(parsed)) return parsed;
     }
-  }, []);
+  } catch {
+  }
+  return null;
+}
+function usePageSizePreference() {
+  const [storedPageSize, setStoredPageSize] = useState(readStoredPageSize);
   const setPageSize = useCallback((size) => {
     if (!isValidSize(size)) return;
     try {
@@ -244,7 +212,7 @@ function PaginationControls({
         {
           value: pageSize,
           onChange: (e) => onPageSizeChange(Number(e.target.value)),
-          className: "rounded-lg border border-gray-700 bg-gray-800/50 px-2 py-1 text-xs text-gray-200 outline-none focus:border-blue-500",
+          className: "rounded-lg border border-gray-700 bg-gray-800/50 px-2 py-1 text-xs text-gray-200 outline-none focus:border-brand-500",
           children: VALID_SIZES.map((size) => /* @__PURE__ */ jsxs("option", { value: size, children: [
             size,
             " / page"
@@ -288,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-blue-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-white" : "border border-gray-700 bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200"}`,
             children: item
           },
           item