@cryptiklemur/lattice 1.6.0 → 1.8.0

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/SessionTimeline.tsx

@@ -0,0 +1,112 @@
+import { useState } from "react";
+
+interface TimelineDatum {
+  id: string;
+  title: string;
+  project: string;
+  start: number;
+  end: number;
+  cost: number;
+}
+
+interface SessionTimelineProps {
+  data: TimelineDatum[];
+}
+
+var ROW_HEIGHT = 16;
+var ROW_GAP = 2;
+var ROW_STEP = ROW_HEIGHT + ROW_GAP;
+var LEFT_MARGIN = 8;
+var RIGHT_MARGIN = 8;
+
+var PROJECT_PALETTE = [
+  "oklch(55% 0.25 280)",
+  "#a855f7",
+  "#22c55e",
+  "#f59e0b",
+  "oklch(65% 0.2 240)",
+  "oklch(65% 0.25 25)",
+  "oklch(65% 0.25 150)",
+  "oklch(70% 0.2 60)",
+];
+
+function formatTime(ts: number): string {
+  var d = new Date(ts);
+  return (d.getMonth() + 1) + "/" + d.getDate() + " " + String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
+}
+
+export function SessionTimeline({ data }: SessionTimelineProps) {
+  var [hover, setHover] = useState<{ x: number; y: number; datum: TimelineDatum } | null>(null);
+
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-[200px] text-base-content/25 font-mono text-[11px]">
+        No data
+      </div>
+    );
+  }
+
+  var projects = Array.from(new Set(data.map(function (d) { return d.project; })));
+  function getColor(project: string): string {
+    var idx = projects.indexOf(project);
+    return PROJECT_PALETTE[idx % PROJECT_PALETTE.length];
+  }
+
+  var minTime = Infinity;
+  var maxTime = -Infinity;
+  for (var i = 0; i < data.length; i++) {
+    if (data[i].start < minTime) minTime = data[i].start;
+    if (data[i].end > maxTime) maxTime = data[i].end;
+  }
+  var timeRange = maxTime - minTime || 1;
+
+  var svgHeight = data.length * ROW_STEP;
+  var maxHeight = 300;
+
+  return (
+    <div className="relative overflow-y-auto overflow-x-hidden" style={{ maxHeight: maxHeight }}>
+      <svg width="100%" height={svgHeight} className="block" viewBox={"0 0 600 " + svgHeight} preserveAspectRatio="none">
+        {data.map(function (d, idx) {
+          var barWidth = 600 - LEFT_MARGIN - RIGHT_MARGIN;
+          var x1 = LEFT_MARGIN + ((d.start - minTime) / timeRange) * barWidth;
+          var x2 = LEFT_MARGIN + ((d.end - minTime) / timeRange) * barWidth;
+          var w = Math.max(x2 - x1, 3);
+          var y = idx * ROW_STEP;
+
+          return (
+            <rect
+              key={d.id}
+              x={x1}
+              y={y}
+              width={w}
+              height={ROW_HEIGHT}
+              rx={3}
+              ry={3}
+              fill={getColor(d.project)}
+              opacity={0.7}
+              onMouseEnter={function (e) {
+                setHover({ x: e.clientX, y: e.clientY, datum: d });
+              }}
+              onMouseLeave={function () { setHover(null); }}
+            />
+          );
+        })}
+      </svg>
+
+      {hover && (
+        <div
+          className="fixed z-50 rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg pointer-events-none max-w-[200px]"
+          style={{ left: hover.x + 12, top: hover.y - 50 }}
+        >
+          <p className="text-[10px] font-mono text-base-content/50 mb-1 truncate">{hover.datum.title}</p>
+          <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
+            <p><span className="text-base-content/40">project </span>{hover.datum.project}</p>
+            <p><span className="text-base-content/40">start </span>{formatTime(hover.datum.start)}</p>
+            <p><span className="text-base-content/40">end </span>{formatTime(hover.datum.end)}</p>
+            <p><span className="text-base-content/40">cost </span>${hover.datum.cost.toFixed(4)}</p>
+          </div>
+        </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.6.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>",