@cryptiklemur/lattice 1.7.0 → 1.8.0

package/client/src/components/analytics/AnalyticsView.tsx

@@ -36,6 +36,11 @@ import { ActivityCalendar } from "./charts/ActivityCalendar";
 import { HourlyHeatmap } from "./charts/HourlyHeatmap";
 import { SessionTimeline } from "./charts/SessionTimeline";
 import { DailySummaryCards } from "./charts/DailySummaryCards";
+import { ToolTreemap } from "./charts/ToolTreemap";
+import { ToolSunburst } from "./charts/ToolSunburst";
+import { PermissionBreakdown } from "./charts/PermissionBreakdown";
+import { ProjectRadar } from "./charts/ProjectRadar";
+import { SessionComplexityList } from "./charts/SessionComplexityList";
 
 export function AnalyticsView() {
   var analytics = useAnalytics();
@@ -136,6 +141,38 @@ export function AnalyticsView() {
                 <DailySummaryCards data={analytics.data.dailySummaries} />
               </ChartErrorBoundary>
             </ChartCard>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <ChartCard title="Tool Usage (Treemap)">
+                <ChartErrorBoundary name="Treemap">
+                  <ToolTreemap data={analytics.data.toolTreemap} />
+                </ChartErrorBoundary>
+              </ChartCard>
+              <ChartCard title="Tool Categories">
+                <ChartErrorBoundary name="Sunburst">
+                  <ToolSunburst data={analytics.data.toolSunburst} />
+                </ChartErrorBoundary>
+              </ChartCard>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <ChartCard title="Permissions">
+                <ChartErrorBoundary name="Permissions">
+                  <PermissionBreakdown data={analytics.data.permissionStats} />
+                </ChartErrorBoundary>
+              </ChartCard>
+              <ChartCard title="Project Comparison">
+                <ChartErrorBoundary name="Radar">
+                  <ProjectRadar data={analytics.data.projectRadar} />
+                </ChartErrorBoundary>
+              </ChartCard>
+            </div>
+
+            <ChartCard title="Session Complexity">
+              <ChartErrorBoundary name="Complexity">
+                <SessionComplexityList data={analytics.data.sessionComplexity} />
+              </ChartErrorBoundary>
+            </ChartCard>
           </div>
         )}
 

package/client/src/components/analytics/charts/PermissionBreakdown.tsx

@@ -0,0 +1,101 @@
+import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
+
+interface PermissionBreakdownProps {
+  data: { allowed: number; denied: number; alwaysAllowed: number };
+}
+
+var COLORS = {
+  allowed: "#22c55e",
+  denied: "#ef4444",
+  alwaysAllowed: "oklch(55% 0.25 280)",
+};
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number }> }) {
+  if (!active || !payload || payload.length === 0) return null;
+  var entry = payload[0];
+  return (
+    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg">
+      <p className="text-[11px] font-mono text-base-content">{entry.name}</p>
+      <p className="text-[10px] font-mono text-base-content/60">{entry.value.toLocaleString()}</p>
+    </div>
+  );
+}
+
+export function PermissionBreakdown({ data }: PermissionBreakdownProps) {
+  var total = data.allowed + data.denied + data.alwaysAllowed;
+
+  if (total === 0) {
+    return (
+      <div className="flex items-center justify-center h-[200px] text-base-content/25 font-mono text-[11px]">
+        No permission data
+      </div>
+    );
+  }
+
+  if (data.denied === 0 && data.alwaysAllowed === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-[200px] gap-2">
+        <div className="text-[32px] font-mono font-bold text-base-content/80">{total.toLocaleString()}</div>
+        <div className="text-[11px] font-mono text-base-content/40">tool calls — all allowed</div>
+      </div>
+    );
+  }
+
+  var pieData = [
+    { name: "Allowed", value: data.allowed },
+    { name: "Denied", value: data.denied },
+    { name: "Always Allowed", value: data.alwaysAllowed },
+  ].filter(function (d) { return d.value > 0; });
+
+  var colorMap: Record<string, string> = {
+    Allowed: COLORS.allowed,
+    Denied: COLORS.denied,
+    "Always Allowed": COLORS.alwaysAllowed,
+  };
+
+  return (
+    <div>
+      <ResponsiveContainer width="100%" height={180}>
+        <PieChart>
+          <Pie
+            data={pieData}
+            dataKey="value"
+            nameKey="name"
+            innerRadius={45}
+            outerRadius={70}
+            paddingAngle={2}
+            startAngle={90}
+            endAngle={-270}
+          >
+            {pieData.map(function (entry) {
+              return <Cell key={entry.name} fill={colorMap[entry.name] || "#888"} />;
+            })}
+          </Pie>
+          <Tooltip content={<CustomTooltip />} />
+          <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle">
+            <tspan x="50%" dy="-0.3em" style={{ fontSize: 14, fontFamily: "var(--font-mono)", fill: "oklch(0.9 0.02 280 / 0.9)", fontWeight: 700 }}>
+              {total.toLocaleString()}
+            </tspan>
+            <tspan x="50%" dy="1.3em" style={{ fontSize: 9, fontFamily: "var(--font-mono)", fill: "oklch(0.9 0.02 280 / 0.35)" }}>
+              total
+            </tspan>
+          </text>
+        </PieChart>
+      </ResponsiveContainer>
+      <div className="flex flex-wrap justify-center gap-3 mt-1">
+        {pieData.map(function (entry) {
+          return (
+            <div key={entry.name} className="flex items-center gap-1.5 text-[10px] font-mono text-base-content/50">
+              <span
+                className="inline-block w-2 h-2 rounded-full flex-shrink-0"
+                style={{ background: colorMap[entry.name] }}
+              />
+              <span>{entry.name}</span>
+              <span className="text-base-content/30">{entry.value.toLocaleString()}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/client/src/components/analytics/charts/ProjectRadar.tsx

@@ -0,0 +1,122 @@
+import {
+  RadarChart,
+  Radar,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+
+interface ProjectRadarProps {
+  data: Array<{ project: string; cost: number; sessions: number; avgDuration: number; toolDiversity: number; tokensPerSession: number }>;
+}
+
+var PROJECT_COLORS = ["#a855f7", "#22c55e", "#f59e0b", "#ef4444", "oklch(55% 0.25 280)"];
+
+var AXIS_KEYS = ["cost", "sessions", "avgDuration", "toolDiversity", "tokensPerSession"] as const;
+var AXIS_LABELS: Record<string, string> = {
+  cost: "Cost",
+  sessions: "Sessions",
+  avgDuration: "Duration",
+  toolDiversity: "Tool Diversity",
+  tokensPerSession: "Tokens/Session",
+};
+
+function normalize(values: number[]): number[] {
+  var max = 0;
+  for (var i = 0; i < values.length; i++) {
+    if (values[i] > max) max = values[i];
+  }
+  if (max === 0) return values.map(function () { return 0; });
+  return values.map(function (v) { return Math.round((v / max) * 100); });
+}
+
+function CustomTooltip({ active, payload, label }: { active?: boolean; payload?: Array<{ name: string; value: number; color: string }>; label?: string }) {
+  if (!active || !payload || payload.length === 0) return null;
+  return (
+    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg">
+      <p className="text-[10px] font-mono text-base-content/50 mb-1">{label}</p>
+      {payload.map(function (entry) {
+        return (
+          <p key={entry.name} className="text-[10px] font-mono text-base-content/70">
+            <span style={{ color: entry.color }}>{entry.name}</span>: {entry.value}
+          </p>
+        );
+      })}
+    </div>
+  );
+}
+
+export function ProjectRadar({ data }: ProjectRadarProps) {
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-[250px] text-base-content/25 font-mono text-[11px]">
+        No project data
+      </div>
+    );
+  }
+
+  var projects = data.slice(0, 5);
+
+  var normalized = new Map<string, Map<string, number>>();
+  for (var ai = 0; ai < AXIS_KEYS.length; ai++) {
+    var key = AXIS_KEYS[ai];
+    var rawValues = projects.map(function (p) { return p[key] as number; });
+    var normValues = normalize(rawValues);
+    for (var pi = 0; pi < projects.length; pi++) {
+      var projMap = normalized.get(projects[pi].project);
+      if (!projMap) {
+        projMap = new Map();
+        normalized.set(projects[pi].project, projMap);
+      }
+      projMap.set(key, normValues[pi]);
+    }
+  }
+
+  var radarData = AXIS_KEYS.map(function (key) {
+    var entry: Record<string, string | number> = { axis: AXIS_LABELS[key] };
+    for (var pi = 0; pi < projects.length; pi++) {
+      var projMap = normalized.get(projects[pi].project);
+      entry[projects[pi].project] = projMap ? projMap.get(key) || 0 : 0;
+    }
+    return entry;
+  });
+
+  return (
+    <ResponsiveContainer width="100%" height={280}>
+      <RadarChart data={radarData} margin={{ top: 10, right: 30, bottom: 10, left: 30 }}>
+        <PolarGrid stroke="oklch(0.9 0.02 280 / 0.08)" />
+        <PolarAngleAxis
+          dataKey="axis"
+          tick={{ fontSize: 9, fontFamily: "var(--font-mono)", fill: "oklch(0.9 0.02 280 / 0.4)" }}
+        />
+        <PolarRadiusAxis
+          angle={90}
+          domain={[0, 100]}
+          tick={false}
+          axisLine={false}
+        />
+        {projects.map(function (project, index) {
+          return (
+            <Radar
+              key={project.project}
+              name={project.project}
+              dataKey={project.project}
+              stroke={PROJECT_COLORS[index % PROJECT_COLORS.length]}
+              fill={PROJECT_COLORS[index % PROJECT_COLORS.length]}
+              fillOpacity={0.1}
+              strokeWidth={1.5}
+            />
+          );
+        })}
+        <Tooltip content={<CustomTooltip />} />
+        <Legend
+          wrapperStyle={{ fontSize: 10, fontFamily: "var(--font-mono)" }}
+          iconSize={8}
+        />
+      </RadarChart>
+    </ResponsiveContainer>
+  );
+}

package/client/src/components/analytics/charts/SessionComplexityList.tsx

@@ -0,0 +1,67 @@
+interface SessionComplexityListProps {
+  data: Array<{ id: string; title: string; score: number; messages: number; tools: number; contextPercent: number }>;
+}
+
+function getScoreColor(score: number, maxScore: number): string {
+  var intensity = maxScore > 0 ? Math.min(score / maxScore, 1) : 0;
+  var lightness = 0.45 - intensity * 0.1;
+  var chroma = 0.1 + intensity * 0.18;
+  return "oklch(" + lightness + " " + chroma + " 280)";
+}
+
+export function SessionComplexityList({ data }: SessionComplexityListProps) {
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-[200px] text-base-content/25 font-mono text-[11px]">
+        No session data
+      </div>
+    );
+  }
+
+  var maxScore = data.length > 0 ? data[0].score : 1;
+
+  return (
+    <div className="flex flex-col gap-1 max-h-[400px] overflow-y-auto">
+      <div className="grid grid-cols-[2.5rem_1fr_4rem_3rem_3rem_3.5rem] gap-2 px-2 py-1 text-[9px] font-mono text-base-content/30 uppercase tracking-wider">
+        <span>Rank</span>
+        <span>Session</span>
+        <span className="text-right">Score</span>
+        <span className="text-right">Msgs</span>
+        <span className="text-right">Tools</span>
+        <span className="text-right">Ctx%</span>
+      </div>
+      {data.map(function (entry, index) {
+        return (
+          <div
+            key={entry.id}
+            className="grid grid-cols-[2.5rem_1fr_4rem_3rem_3rem_3.5rem] gap-2 px-2 py-1.5 rounded hover:bg-base-content/[0.03] transition-colors"
+          >
+            <span className="font-mono text-[11px] text-base-content/40 font-bold tabular-nums">
+              #{index + 1}
+            </span>
+            <span className="font-mono text-[11px] text-base-content/70 truncate" title={entry.title}>
+              {entry.title}
+            </span>
+            <span className="text-right">
+              <span
+                className="inline-block px-1.5 py-0.5 rounded text-[10px] font-mono font-bold text-white/90 tabular-nums"
+                style={{ background: getScoreColor(entry.score, maxScore) }}
+              >
+                {entry.score}
+              </span>
+            </span>
+            <span className="text-right font-mono text-[10px] text-base-content/50 tabular-nums self-center">
+              {entry.messages}
+            </span>
+            <span className="text-right font-mono text-[10px] text-base-content/50 tabular-nums self-center">
+              {entry.tools}
+            </span>
+            <span className="text-right font-mono text-[10px] text-base-content/50 tabular-nums self-center">
+              {entry.contextPercent}%
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/client/src/components/analytics/charts/ToolSunburst.tsx

@@ -0,0 +1,126 @@
+import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
+
+interface ToolSunburstProps {
+  data: Array<{ name: string; category: string; count: number }>;
+}
+
+var CATEGORY_COLORS: Record<string, string> = {
+  Read: "#22c55e",
+  Write: "#f59e0b",
+  Execute: "#ef4444",
+  AI: "#a855f7",
+  Other: "oklch(55% 0.15 280)",
+};
+
+function getCategoryColor(category: string): string {
+  return CATEGORY_COLORS[category] || CATEGORY_COLORS.Other;
+}
+
+function getToolColor(category: string, index: number): string {
+  var base = getCategoryColor(category);
+  var opacity = 0.9 - index * 0.12;
+  if (opacity < 0.4) opacity = 0.4;
+  return base.startsWith("oklch") ? base.replace(")", " / " + opacity + ")") : base + String(Math.round(opacity * 255).toString(16)).padStart(2, "0");
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number; payload: { category?: string } }> }) {
+  if (!active || !payload || payload.length === 0) return null;
+  var entry = payload[0];
+  return (
+    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg">
+      <p className="text-[11px] font-mono text-base-content font-bold">{entry.name}</p>
+      {entry.payload.category && (
+        <p className="text-[10px] font-mono text-base-content/40">{entry.payload.category}</p>
+      )}
+      <p className="text-[10px] font-mono text-base-content/60">{entry.value.toLocaleString()} calls</p>
+    </div>
+  );
+}
+
+export function ToolSunburst({ data }: ToolSunburstProps) {
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-[250px] text-base-content/25 font-mono text-[11px]">
+        No tool data
+      </div>
+    );
+  }
+
+  var categoryTotals = new Map<string, number>();
+  for (var i = 0; i < data.length; i++) {
+    var cat = data[i].category;
+    categoryTotals.set(cat, (categoryTotals.get(cat) || 0) + data[i].count);
+  }
+
+  var innerData: Array<{ name: string; value: number }> = [];
+  categoryTotals.forEach(function (count, category) {
+    innerData.push({ name: category, value: count });
+  });
+  innerData.sort(function (a, b) { return b.value - a.value; });
+
+  var categoryOrder: string[] = innerData.map(function (d) { return d.name; });
+
+  var outerData: Array<{ name: string; category: string; value: number }> = [];
+  for (var ci = 0; ci < categoryOrder.length; ci++) {
+    var catName = categoryOrder[ci];
+    var catTools = data
+      .filter(function (d) { return d.category === catName; })
+      .sort(function (a, b) { return b.count - a.count; });
+    for (var ti = 0; ti < catTools.length; ti++) {
+      outerData.push({ name: catTools[ti].name, category: catName, value: catTools[ti].count });
+    }
+  }
+
+  return (
+    <div>
+      <ResponsiveContainer width="100%" height={220}>
+        <PieChart>
+          <Pie
+            data={innerData}
+            dataKey="value"
+            nameKey="name"
+            innerRadius={35}
+            outerRadius={60}
+            paddingAngle={2}
+            startAngle={90}
+            endAngle={-270}
+          >
+            {innerData.map(function (entry) {
+              return <Cell key={"inner-" + entry.name} fill={getCategoryColor(entry.name)} />;
+            })}
+          </Pie>
+          <Pie
+            data={outerData}
+            dataKey="value"
+            nameKey="name"
+            innerRadius={65}
+            outerRadius={90}
+            paddingAngle={1}
+            startAngle={90}
+            endAngle={-270}
+          >
+            {outerData.map(function (entry, index) {
+              var catIndex = outerData.slice(0, index).filter(function (d) { return d.category === entry.category; }).length;
+              return <Cell key={"outer-" + entry.name} fill={getToolColor(entry.category, catIndex)} />;
+            })}
+          </Pie>
+          <Tooltip content={<CustomTooltip />} />
+        </PieChart>
+      </ResponsiveContainer>
+      <div className="flex flex-wrap justify-center gap-3 mt-1">
+        {innerData.map(function (entry) {
+          return (
+            <div key={entry.name} className="flex items-center gap-1.5 text-[10px] font-mono text-base-content/50">
+              <span
+                className="inline-block w-2 h-2 rounded-full flex-shrink-0"
+                style={{ background: getCategoryColor(entry.name) }}
+              />
+              <span>{entry.name}</span>
+              <span className="text-base-content/30">{entry.value}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/client/src/components/analytics/charts/ToolTreemap.tsx

@@ -0,0 +1,108 @@
+import { Treemap, ResponsiveContainer, Tooltip } from "recharts";
+
+interface ToolTreemapProps {
+  data: Array<{ name: string; count: number; avgCost: number }>;
+}
+
+var MAX_COST_INTENSITY = 0.5;
+
+function getColor(avgCost: number, maxCost: number): string {
+  var intensity = maxCost > 0 ? Math.min(avgCost / maxCost, 1) : 0.3;
+  var lightness = 0.45 - intensity * 0.15;
+  var chroma = 0.15 + intensity * 0.12;
+  return "oklch(" + lightness + " " + chroma + " 280)";
+}
+
+function CustomContent(props: {
+  x?: number; y?: number; width?: number; height?: number;
+  name?: string; count?: number; avgCost?: number;
+  maxCost?: number;
+}) {
+  var { x = 0, y = 0, width = 0, height = 0, name = "", count = 0, avgCost = 0, maxCost = MAX_COST_INTENSITY } = props;
+  if (width < 4 || height < 4) return null;
+  var showLabel = width > 40 && height > 20;
+  var showCount = width > 50 && height > 34;
+  return (
+    <g>
+      <rect
+        x={x + 1}
+        y={y + 1}
+        width={width - 2}
+        height={height - 2}
+        rx={3}
+        fill={getColor(avgCost, maxCost)}
+        fillOpacity={0.85}
+        stroke="oklch(0.2 0.02 280)"
+        strokeWidth={1}
+      />
+      {showLabel && (
+        <text
+          x={x + width / 2}
+          y={y + height / 2 + (showCount ? -5 : 0)}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          style={{ fontSize: 10, fontFamily: "var(--font-mono)", fill: "oklch(0.95 0.02 280 / 0.9)" }}
+        >
+          {name}
+        </text>
+      )}
+      {showCount && (
+        <text
+          x={x + width / 2}
+          y={y + height / 2 + 9}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          style={{ fontSize: 9, fontFamily: "var(--font-mono)", fill: "oklch(0.95 0.02 280 / 0.5)" }}
+        >
+          {count}
+        </text>
+      )}
+    </g>
+  );
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: { name: string; count: number; avgCost: number } }> }) {
+  if (!active || !payload || payload.length === 0) return null;
+  var d = payload[0].payload;
+  return (
+    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg">
+      <p className="text-[11px] font-mono text-base-content font-bold mb-1">{d.name}</p>
+      <div className="text-[10px] font-mono text-base-content/60 space-y-0.5">
+        <p><span className="text-base-content/40">calls </span>{d.count.toLocaleString()}</p>
+        <p><span className="text-base-content/40">avg cost </span>${d.avgCost.toFixed(4)}</p>
+      </div>
+    </div>
+  );
+}
+
+export function ToolTreemap({ data }: ToolTreemapProps) {
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-[250px] text-base-content/25 font-mono text-[11px]">
+        No tool data
+      </div>
+    );
+  }
+
+  var maxCost = 0;
+  for (var i = 0; i < data.length; i++) {
+    if (data[i].avgCost > maxCost) maxCost = data[i].avgCost;
+  }
+
+  var treemapData = data.map(function (d) {
+    return { name: d.name, size: d.count, count: d.count, avgCost: d.avgCost, maxCost: maxCost };
+  });
+
+  return (
+    <ResponsiveContainer width="100%" height={250}>
+      <Treemap
+        data={treemapData}
+        dataKey="size"
+        aspectRatio={4 / 3}
+        content={<CustomContent maxCost={maxCost} />}
+      >
+        <Tooltip content={<CustomTooltip />} />
+      </Treemap>
+    </ResponsiveContainer>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptiklemur/lattice",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Multi-machine agentic dashboard for Claude Code. Monitor sessions, manage MCP servers and skills, orchestrate across mesh-networked nodes.",
   "license": "MIT",
   "author": "Aaron Scherer <me@aaronscherer.me>",

package/server/src/analytics/engine.ts

@@ -638,6 +638,98 @@ function aggregate(sessions: SessionData[], period: AnalyticsPeriod): AnalyticsP
     });
   }
 
+  var toolTreemap: AnalyticsPayload["toolTreemap"] = [];
+  toolStats.forEach(function (val, key) {
+    toolTreemap.push({
+      name: key,
+      count: val.count,
+      avgCost: val.sessions > 0 ? val.totalCost / val.sessions : 0,
+    });
+  });
+  toolTreemap.sort(function (a, b) { return b.count - a.count; });
+
+  var toolCategoryMap: Record<string, string> = {
+    Read: "Read", Glob: "Read", Grep: "Read", LS: "Read",
+    Edit: "Write", Write: "Write", MultiEdit: "Write",
+    Bash: "Execute",
+    Agent: "AI", Skill: "AI",
+  };
+  var toolSunburst: AnalyticsPayload["toolSunburst"] = [];
+  toolStats.forEach(function (val, key) {
+    var category = toolCategoryMap[key] || "Other";
+    toolSunburst.push({ name: key, category: category, count: val.count });
+  });
+  toolSunburst.sort(function (a, b) { return b.count - a.count; });
+
+  var totalToolCalls = 0;
+  toolStats.forEach(function (val) { totalToolCalls += val.count; });
+  var permissionStats: AnalyticsPayload["permissionStats"] = {
+    allowed: totalToolCalls,
+    denied: 0,
+    alwaysAllowed: 0,
+  };
+
+  var projectRadarMap = new Map<string, { cost: number; sessions: number; totalDuration: number; durationCount: number; tools: Set<string>; totalTokens: number }>();
+  for (var pri = 0; pri < filtered.length; pri++) {
+    var prSess = filtered[pri];
+    var prEntry = projectRadarMap.get(prSess.project);
+    if (!prEntry) {
+      prEntry = { cost: 0, sessions: 0, totalDuration: 0, durationCount: 0, tools: new Set(), totalTokens: 0 };
+      projectRadarMap.set(prSess.project, prEntry);
+    }
+    prEntry.cost += prSess.cost;
+    prEntry.sessions++;
+    prEntry.totalTokens += prSess.inputTokens + prSess.outputTokens;
+    if (prSess.startTime > 0 && prSess.endTime > prSess.startTime) {
+      prEntry.totalDuration += prSess.endTime - prSess.startTime;
+      prEntry.durationCount++;
+    }
+    prSess.tools.forEach(function (_count, tool) { prEntry!.tools.add(tool); });
+  }
+  var projectRadar: AnalyticsPayload["projectRadar"] = [];
+  projectRadarMap.forEach(function (val, key) {
+    projectRadar.push({
+      project: key,
+      cost: val.cost,
+      sessions: val.sessions,
+      avgDuration: val.durationCount > 0 ? val.totalDuration / val.durationCount : 0,
+      toolDiversity: val.tools.size,
+      tokensPerSession: val.sessions > 0 ? val.totalTokens / val.sessions : 0,
+    });
+  });
+  projectRadar.sort(function (a, b) { return b.cost - a.cost; });
+  if (projectRadar.length > 5) projectRadar.length = 5;
+
+  var contextWindowSizesForComplexity: Record<string, number> = { opus: 200000, sonnet: 200000, haiku: 200000, other: 200000 };
+  var sessionComplexity: AnalyticsPayload["sessionComplexity"] = [];
+  for (var sci = 0; sci < filtered.length; sci++) {
+    var scSess = filtered[sci];
+    var scUniqueTools = scSess.tools.size;
+    var scMessages = scSess.contextMessages.length;
+    var scRunning = 0;
+    var scPrimaryModel = "other";
+    var scMaxTokens = 0;
+    scSess.models.forEach(function (val, key) {
+      if (val.tokens > scMaxTokens) { scMaxTokens = val.tokens; scPrimaryModel = key; }
+    });
+    var scWindowSize = contextWindowSizesForComplexity[scPrimaryModel] || 200000;
+    for (var scmi = 0; scmi < scSess.contextMessages.length; scmi++) {
+      scRunning += scSess.contextMessages[scmi].inputTokens;
+    }
+    var scContextPercent = Math.min((scRunning / scWindowSize) * 100, 100);
+    var scScore = (scMessages * 1) + (scUniqueTools * 5) + (scContextPercent * 0.5);
+    sessionComplexity.push({
+      id: scSess.id,
+      title: scSess.title,
+      score: Math.round(scScore * 10) / 10,
+      messages: scMessages,
+      tools: scUniqueTools,
+      contextPercent: Math.round(scContextPercent * 10) / 10,
+    });
+  }
+  sessionComplexity.sort(function (a, b) { return b.score - a.score; });
+  if (sessionComplexity.length > 20) sessionComplexity.length = 20;
+
   return {
     totalCost: totalCost,
     totalSessions: filtered.length,
@@ -667,6 +759,11 @@ function aggregate(sessions: SessionData[], period: AnalyticsPeriod): AnalyticsP
     hourlyHeatmap: hourlyHeatmap,
     sessionTimeline: sessionTimeline,
     dailySummaries: dailySummaries,
+    toolTreemap: toolTreemap,
+    toolSunburst: toolSunburst,
+    permissionStats: permissionStats,
+    projectRadar: projectRadar,
+    sessionComplexity: sessionComplexity,
   };
 }
 

package/shared/src/analytics.ts

@@ -27,6 +27,12 @@ export interface AnalyticsPayload {
   hourlyHeatmap: Array<{ day: number; hour: number; count: number }>;
   sessionTimeline: Array<{ id: string; title: string; project: string; start: number; end: number; cost: number }>;
   dailySummaries: Array<{ date: string; sessions: number; cost: number; tokens: number; topTool: string; modelMix: Record<string, number> }>;
+
+  toolTreemap: Array<{ name: string; count: number; avgCost: number }>;
+  toolSunburst: Array<{ name: string; category: string; count: number }>;
+  permissionStats: { allowed: number; denied: number; alwaysAllowed: number };
+  projectRadar: Array<{ project: string; cost: number; sessions: number; avgDuration: number; toolDiversity: number; tokensPerSession: number }>;
+  sessionComplexity: Array<{ id: string; title: string; score: number; messages: number; tools: number; contextPercent: number }>;
 }
 
 export type AnalyticsPeriod = "24h" | "7d" | "30d" | "90d" | "all";