claude-session-dashboard 0.2.1 → 0.3.1

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-BZf2Aqy5.js → _sessionId-BvDwvNyA.js}

@@ -10,7 +10,7 @@ import { ResponsiveContainer, AreaChart, YAxis, Tooltip, ReferenceLine, Area } f
 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-ChxlsPNU.js";
+import { b as Route, u as usePrivacy } from "./router-kB-tCwY9.js";
 import "@tanstack/history";
 import "@tanstack/router-core/ssr/client";
 import "@tanstack/router-core";
@@ -121,7 +121,8 @@ function buildTimelineChartData(turns, agents, skills, errors) {
       durationMs: agent.durationMs ?? null,
       totalTokens: agent.totalTokens ?? null,
       totalToolUseCount: agent.totalToolUseCount ?? null,
-      toolDots
+      toolDots,
+      skills: agent.skills?.map((s) => ({ skill: s.skill, args: s.args })) ?? []
     };
   });
   const skillMarkers = skills.map((s) => {
@@ -161,10 +162,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
@@ -382,7 +383,6 @@ function TimelineChart({ data, width, onHover }) {
             y: agentLaneYs[i],
             toX,
             laneHeight: LANE_HEIGHT,
-            leftMargin: LEFT_MARGIN,
             onHover,
             getPosition
           },
@@ -526,7 +526,6 @@ function AgentLaneSVG({
   y,
   toX,
   laneHeight,
-  leftMargin,
   onHover,
   getPosition
 }) {
@@ -605,7 +604,40 @@ function AgentLaneSVG({
         ] })
       },
       `${dot.toolName}-${i}`
-    ))
+    )),
+    lane.skills && lane.skills.length > 0 && lane.skills.map((skill, i) => {
+      const skillRelX = lane.startX + (lane.endX - lane.startX) / (lane.skills.length + 1) * (i + 1);
+      const cx = toX(skillRelX);
+      const cy = y + 6;
+      const size = 3;
+      return /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: `${cx},${cy - size} ${cx + size},${cy} ${cx},${cy + size} ${cx - size},${cy}`,
+          fill: "#fbbf24",
+          opacity: 0.85,
+          className: "cursor-pointer hover:opacity-100",
+          onMouseEnter: (e) => onHover(
+            {
+              kind: "skill",
+              skill: skill.skill,
+              args: skill.args,
+              timestamp: new Date(lane.startMs).toISOString()
+            },
+            getPosition(e)
+          ),
+          onMouseLeave: () => onHover(null, { x: 0, y: 0 }),
+          children: /* @__PURE__ */ jsxs("title", { children: [
+            "/",
+            skill.skill,
+            " (",
+            lane.subagentType,
+            ")"
+          ] })
+        },
+        `skill-${skill.skill}-${i}`
+      );
+    })
   ] });
 }
 function TimelineTooltip({ item, position }) {
@@ -827,7 +859,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",
@@ -900,7 +932,7 @@ function ContextWindowPanel({ contextWindow, tokens }) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "bg-blue-500",
+          className: "bg-brand-500",
           style: { width: `${messagesPct}%` },
           title: `Messages: ~${formatTokenCount(messagesEstimate)}`
         }
@@ -934,7 +966,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: [
@@ -959,7 +991,7 @@ function ContextWindowPanel({ contextWindow, tokens }) {
           label: "Messages",
           value: messagesEstimate,
           total: contextLimit,
-          color: "bg-blue-500",
+          color: "bg-brand-500",
           prefix: "~"
         }
       ),
@@ -986,8 +1018,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,
@@ -1000,8 +1032,8 @@ function ContextWindowPanel({ contextWindow, tokens }) {
           Tooltip,
           {
             contentStyle: {
-              background: "#1f2937",
-              border: "1px solid #374151",
+              background: "#1c1c1a",
+              border: "1px solid #3d3b36",
               borderRadius: "8px",
               fontSize: "11px"
             },
@@ -1032,7 +1064,7 @@ function ContextWindowPanel({ contextWindow, tokens }) {
           {
             type: "stepAfter",
             dataKey: "context",
-            stroke: "#3b82f6",
+            stroke: "#d97757",
             fill: "url(#contextGrad)",
             strokeWidth: 1.5,
             dot: false
@@ -1092,7 +1124,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" }
@@ -1116,7 +1148,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" }
@@ -1167,9 +1199,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)) })
@@ -1183,7 +1215,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) })
@@ -1192,9 +1224,12 @@ function ErrorPanel({ errors }) {
     ] }, i)) })
   ] });
 }
-function AgentsSkillsPanel({
-  agents,
-  skills
+function computeAgentTokens(agent) {
+  if (!agent.tokens) return void 0;
+  return agent.tokens.inputTokens + agent.tokens.outputTokens;
+}
+function AgentDispatchesPanel({
+  agents
 }) {
   const { data: settings } = useQuery(settingsQuery);
   const { agentCosts, totalAgentCost } = useMemo(() => {
@@ -1215,27 +1250,13 @@ function AgentsSkillsPanel({
     }
     return { agentCosts: costs, totalAgentCost: total };
   }, [settings, agents]);
-  if (agents.length === 0 && skills.length === 0) return null;
-  const agentCounts = /* @__PURE__ */ new Map();
-  for (const a of agents) {
-    agentCounts.set(a.subagentType, (agentCounts.get(a.subagentType) ?? 0) + 1);
-  }
-  const sortedAgentCounts = [...agentCounts.entries()].sort(
-    ([, a], [, b]) => b - a
-  );
+  if (agents.length === 0) return null;
   const totalAgentTokens = agents.reduce(
     (sum, a) => sum + (a.totalTokens ?? computeAgentTokens(a) ?? 0),
     0
   );
-  const skillCounts = /* @__PURE__ */ new Map();
-  for (const s of skills) {
-    skillCounts.set(s.skill, (skillCounts.get(s.skill) ?? 0) + 1);
-  }
-  const sortedSkillCounts = [...skillCounts.entries()].sort(
-    ([, a], [, b]) => b - a
-  );
   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: "Agents & Skills" }),
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-300", children: "Agent Dispatches" }),
     /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-gray-500", children: [
       agents.length,
       " agent dispatch",
@@ -1246,106 +1267,100 @@ function AgentsSkillsPanel({
         " tokens",
         totalAgentCost > 0 && ` · ~${formatUSD(totalAgentCost)}`,
         ")"
-      ] }),
-      skills.length > 0 && `, ${skills.length} skill invocation${skills.length !== 1 ? "s" : ""}`
-    ] }),
-    sortedAgentCounts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-500", children: "Agent Types" }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: sortedAgentCounts.map(([type, count]) => /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: "inline-flex items-center gap-1 rounded-md bg-indigo-500/15 px-2 py-0.5 text-xs text-indigo-300",
-          children: [
-            type,
-            count > 1 && /* @__PURE__ */ jsxs("span", { className: "text-indigo-400/60", children: [
-              "×",
-              count
-            ] })
-          ]
-        },
-        type
-      )) })
-    ] }),
-    sortedSkillCounts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-500", children: "Skills" }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: sortedSkillCounts.map(([skill, count]) => /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: "inline-flex items-center gap-1 rounded-md bg-amber-500/15 px-2 py-0.5 text-xs text-amber-300",
-          children: [
-            "/",
-            skill,
-            count > 1 && /* @__PURE__ */ jsxs("span", { className: "text-amber-400/60", children: [
-              "×",
-              count
-            ] })
-          ]
-        },
-        skill
-      )) })
-    ] }),
-    agents.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-1", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-500", children: "Agent Dispatches" }),
-      agents.map((a, i) => {
-        const tokenCount = a.totalTokens ?? computeAgentTokens(a);
-        const agentCost = agentCosts.get(i);
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "flex items-start gap-2 rounded bg-gray-950/40 px-2 py-1.5",
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-indigo-500/20 px-1.5 py-0.5 text-[10px] font-semibold text-indigo-300", children: a.subagentType }),
-              a.model && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-gray-800 px-1.5 py-0.5 text-[10px] font-mono text-gray-400", children: a.model.replace(/^claude-/, "").replace(/-\d{8}$/, "") }),
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-xs text-gray-400", children: a.description }),
-              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
-                tokenCount != null && tokenCount > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-indigo-400/80", children: formatTokenCount(tokenCount) }),
-                agentCost != null && agentCost > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-emerald-400/80", children: [
-                  "~",
-                  formatUSD(agentCost)
-                ] }),
-                a.totalToolUseCount != null && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-500", children: [
-                  a.totalToolUseCount,
-                  " tools"
-                ] }),
-                a.durationMs != null && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-600", children: formatDuration(a.durationMs) }),
-                a.timestamp && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-600", children: format(new Date(a.timestamp), "HH:mm:ss") })
-              ] })
-            ]
-          },
-          `a-${i}`
-        );
-      })
+      ] })
     ] }),
-    skills.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-1", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-500", children: "Skill Invocations" }),
-      skills.map((s, i) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-start gap-2 rounded bg-gray-950/40 px-2 py-1.5",
-          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: [
-              "/",
-              s.skill
-            ] }),
-            s.args && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-xs font-mono text-gray-500", children: s.args }),
-            s.timestamp && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[10px] text-gray-600", children: format(new Date(s.timestamp), "HH:mm:ss") })
-          ]
-        },
-        `s-${i}`
-      ))
-    ] })
+    /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-1", children: agents.map((a, i) => {
+      const tokenCount = a.totalTokens ?? computeAgentTokens(a);
+      const agentCost = agentCosts.get(i);
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 rounded bg-gray-950/40 px-2 py-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-indigo-500/20 px-1.5 py-0.5 text-[10px] font-semibold text-indigo-300", children: a.subagentType }),
+        a.model && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-gray-800 px-1.5 py-0.5 text-[10px] font-mono text-gray-400", children: a.model.replace(/^claude-/, "").replace(/-\d{8}$/, "") }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-xs text-gray-400", children: a.description }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+          tokenCount != null && tokenCount > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-indigo-400/80", children: formatTokenCount(tokenCount) }),
+          agentCost != null && agentCost > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-emerald-400/80", children: [
+            "~",
+            formatUSD(agentCost)
+          ] }),
+          a.totalToolUseCount != null && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-500", children: [
+            a.totalToolUseCount,
+            " tools"
+          ] }),
+          a.durationMs != null && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-600", children: formatDuration(a.durationMs) }),
+          a.timestamp && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-600", children: format(new Date(a.timestamp), "HH:mm:ss") })
+        ] })
+      ] }, `a-${i}`);
+    }) })
   ] });
 }
-function computeAgentTokens(agent) {
-  if (!agent.tokens) return void 0;
-  return agent.tokens.inputTokens + agent.tokens.outputTokens;
+function SkillInvocationsPanel({
+  agents,
+  skills
+}) {
+  const { groups, totalCount } = useMemo(() => {
+    const allSkills = [
+      ...skills.map((s) => ({ ...s, agentSource: null })),
+      ...agents.flatMap(
+        (a) => (a.skills ?? []).map((s) => ({ ...s, agentSource: a.subagentType }))
+      )
+    ].sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+    const groupMap = /* @__PURE__ */ new Map();
+    for (const s of allSkills) {
+      let group = groupMap.get(s.skill);
+      if (!group) {
+        group = { skill: s.skill, count: 0, hasInjected: false, invocations: [] };
+        groupMap.set(s.skill, group);
+      }
+      group.count++;
+      if (s.source === "injected") group.hasInjected = true;
+      group.invocations.push({
+        agentSource: s.agentSource,
+        timestamp: s.timestamp,
+        source: s.source
+      });
+    }
+    return { groups: Array.from(groupMap.values()), totalCount: allSkills.length };
+  }, [skills, agents]);
+  if (totalCount === 0) return null;
+  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: "Skill Invocations" }),
+    /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-gray-500", children: [
+      groups.length,
+      " unique skill",
+      groups.length !== 1 ? "s" : "",
+      ",",
+      " ",
+      totalCount,
+      " invocation",
+      totalCount !== 1 ? "s" : ""
+    ] }),
+    /* @__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: [
+          "/",
+          group.skill
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-500", children: [
+          "×",
+          group.count
+        ] }),
+        group.hasInjected && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-gray-800/40 px-1 py-0.5 text-[9px] text-gray-500", children: "context" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 ml-2 flex flex-wrap gap-x-1 text-[10px] text-gray-500", children: group.invocations.map((inv, j) => /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: inv.agentSource ?? "session" }),
+        ", ",
+        /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: format(new Date(inv.timestamp), "HH:mm:ss") }),
+        j < group.invocations.length - 1 && /* @__PURE__ */ jsx("span", { className: "text-gray-700", children: "; " })
+      ] }, j)) })
+    ] }, group.skill)) })
+  ] });
 }
 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",
@@ -1439,7 +1454,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" }
@@ -1452,7 +1467,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" }
@@ -1513,10 +1528,10 @@ function CostSummaryLine({ tokensByModel }) {
   );
 }
 function ActiveSessionBanner() {
-  return /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-2 rounded-lg border border-green-800 bg-green-900/30 px-4 py-2 text-sm text-green-300", children: [
+  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-green-400 opacity-75" }),
-      /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-green-500" })
+      /* @__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."
   ] });
@@ -1534,7 +1549,8 @@ function SessionDetailPage() {
   } = Route.useSearch();
   const {
     privacyMode,
-    anonymizeProjectName
+    anonymizeProjectName,
+    anonymizeBranch
   } = usePrivacy();
   const isActive = useIsSessionActive(sessionId);
   const {
@@ -1554,7 +1570,7 @@ 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;
@@ -1567,7 +1583,7 @@ function SessionDetailPage() {
         /* @__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: [
@@ -1591,13 +1607,14 @@ function SessionDetailPage() {
       /* @__PURE__ */ jsx(ToolUsagePanel, { toolFrequency: detail.toolFrequency })
     ] }),
     /* @__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.agents.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(AgentDispatchesPanel, { agents: detail.agents }) }),
     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 })
-    ] })
+    ] }),
+    (detail.skills.length > 0 || detail.agents.some((a) => (a.skills?.length ?? 0) > 0)) && /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(SkillInvocationsPanel, { agents: detail.agents, skills: detail.skills }) })
   ] });
 }
 export {

package/dist/server/assets/_tanstack-start-manifest_v-CVdzOaof.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-CkUc_xJ0.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-C-1YOzkf.js", "/assets/createServerFn-B5mibSc4.js", "/assets/sessions.queries-C-HTNzuR.js"] }, "/_dashboard/settings": { "filePath": "/home/runner/work/claude-session-dashboard/claude-session-dashboard/apps/web/src/routes/_dashboard/settings.tsx", "assets": [], "preloads": ["/assets/settings-D56cUmNH.js", "/assets/settings.types-l5MKKuAK.js"] }, "/_dashboard/stats": { "filePath": "/home/runner/work/claude-session-dashboard/claude-session-dashboard/apps/web/src/routes/_dashboard/stats.tsx", "assets": [], "preloads": ["/assets/stats-BunIdzj_.js", "/assets/format-Bsprb3az.js", "/assets/useSessionCost-BDldLkTA.js", "/assets/settings.types-l5MKKuAK.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-C4jQeEqE.js", "/assets/format-Bsprb3az.js", "/assets/useSessionCost-BDldLkTA.js", "/assets/settings.types-l5MKKuAK.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-C83jHUdL.js", "/assets/format-Bsprb3az.js"] } }, "clientEntry": "/assets/main-CkUc_xJ0.js" });
+export {
+  tsrStartManifest
+};

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

@@ -23,9 +23,9 @@ function extractSessionId(filename) {
   return filename.replace(/\.jsonl$/, "");
 }
 export {
-  getProjectsDir as a,
+  getStatsPath as a,
   extractSessionId as b,
   decodeProjectDirName as d,
   extractProjectName as e,
-  getStatsPath as g
+  getProjectsDir as g
 };