@cryptiklemur/lattice 1.6.0 → 1.8.0

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

@@ -32,6 +32,15 @@ import { CacheEfficiencyChart } from "./charts/CacheEfficiencyChart";
 import { ResponseTimeScatter } from "./charts/ResponseTimeScatter";
 import { ContextUtilizationChart } from "./charts/ContextUtilizationChart";
 import { TokenSankeyChart } from "./charts/TokenSankeyChart";
+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();
@@ -107,6 +116,63 @@ export function AnalyticsView() {
                 </ChartErrorBoundary>
               </ChartCard>
             </div>
+
+            <ChartCard title="Activity Calendar">
+              <ChartErrorBoundary name="Calendar">
+                <ActivityCalendar data={analytics.data.activityCalendar} />
+              </ChartErrorBoundary>
+            </ChartCard>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <ChartCard title="Hourly Activity">
+                <ChartErrorBoundary name="HourlyHeatmap">
+                  <HourlyHeatmap data={analytics.data.hourlyHeatmap} />
+                </ChartErrorBoundary>
+              </ChartCard>
+              <ChartCard title="Session Timeline">
+                <ChartErrorBoundary name="Timeline">
+                  <SessionTimeline data={analytics.data.sessionTimeline} />
+                </ChartErrorBoundary>
+              </ChartCard>
+            </div>
+
+            <ChartCard title="Daily Summary">
+              <ChartErrorBoundary name="DailySummary">
+                <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/ActivityCalendar.tsx

@@ -0,0 +1,185 @@
+import { useState } from "react";
+
+interface CalendarDatum {
+  date: string;
+  count: number;
+  tokens: number;
+  cost: number;
+}
+
+interface ActivityCalendarProps {
+  data: CalendarDatum[];
+}
+
+var CELL_SIZE = 11;
+var CELL_GAP = 2;
+var CELL_STEP = CELL_SIZE + CELL_GAP;
+var DAY_LABEL_WIDTH = 28;
+var MONTH_LABEL_HEIGHT = 14;
+
+var INTENSITY_OPACITIES = [0.05, 0.15, 0.3, 0.5, 0.8];
+var PRIMARY_COLOR = "oklch(55% 0.25 280)";
+
+var MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var DAY_LABELS = [
+  { index: 1, label: "Mon" },
+  { index: 3, label: "Wed" },
+  { index: 5, label: "Fri" },
+];
+
+function getIntensity(count: number, maxCount: number): number {
+  if (count === 0 || maxCount === 0) return -1;
+  var ratio = count / maxCount;
+  if (ratio <= 0.2) return 0;
+  if (ratio <= 0.4) return 1;
+  if (ratio <= 0.6) return 2;
+  if (ratio <= 0.8) return 3;
+  return 4;
+}
+
+function parseDateParts(dateStr: string): { year: number; month: number; day: number } {
+  var parts = dateStr.split("-");
+  return { year: parseInt(parts[0], 10), month: parseInt(parts[1], 10) - 1, day: parseInt(parts[2], 10) };
+}
+
+export function ActivityCalendar({ data }: ActivityCalendarProps) {
+  var [hover, setHover] = useState<{ x: number; y: number; datum: CalendarDatum } | null>(null);
+
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-[120px] text-base-content/25 font-mono text-[11px]">
+        No data
+      </div>
+    );
+  }
+
+  var dataMap = new Map<string, CalendarDatum>();
+  var maxCount = 0;
+  for (var i = 0; i < data.length; i++) {
+    dataMap.set(data[i].date, data[i]);
+    if (data[i].count > maxCount) maxCount = data[i].count;
+  }
+
+  var lastDate = new Date(data[data.length - 1].date + "T00:00:00");
+  var startDate = new Date(lastDate);
+  startDate.setDate(startDate.getDate() - 364);
+  var startDay = startDate.getDay();
+  if (startDay !== 0) {
+    startDate.setDate(startDate.getDate() - startDay);
+  }
+
+  var weeks: Array<Array<{ date: string; datum: CalendarDatum | undefined } | null>> = [];
+  var cursor = new Date(startDate);
+  var currentWeek: Array<{ date: string; datum: CalendarDatum | undefined } | null> = [];
+
+  while (cursor <= lastDate) {
+    var dow = cursor.getDay();
+    if (dow === 0 && currentWeek.length > 0) {
+      weeks.push(currentWeek);
+      currentWeek = [];
+    }
+    var key = cursor.getFullYear() + "-" + String(cursor.getMonth() + 1).padStart(2, "0") + "-" + String(cursor.getDate()).padStart(2, "0");
+    currentWeek.push({ date: key, datum: dataMap.get(key) });
+    cursor.setDate(cursor.getDate() + 1);
+  }
+  if (currentWeek.length > 0) {
+    while (currentWeek.length < 7) currentWeek.push(null);
+    weeks.push(currentWeek);
+  }
+
+  var monthLabels: Array<{ col: number; label: string }> = [];
+  var lastMonth = -1;
+  for (var wi = 0; wi < weeks.length; wi++) {
+    var firstCell = weeks[wi][0];
+    if (!firstCell) continue;
+    var parts = parseDateParts(firstCell.date);
+    if (parts.month !== lastMonth) {
+      monthLabels.push({ col: wi, label: MONTH_NAMES[parts.month] });
+      lastMonth = parts.month;
+    }
+  }
+
+  var svgWidth = DAY_LABEL_WIDTH + weeks.length * CELL_STEP;
+  var svgHeight = MONTH_LABEL_HEIGHT + 7 * CELL_STEP;
+
+  return (
+    <div className="relative overflow-x-auto">
+      <svg width={svgWidth} height={svgHeight} className="block">
+        {monthLabels.map(function (ml, idx) {
+          return (
+            <text
+              key={idx}
+              x={DAY_LABEL_WIDTH + ml.col * CELL_STEP}
+              y={10}
+              className="fill-base-content/30"
+              style={{ fontSize: 10, fontFamily: "var(--font-mono)" }}
+            >
+              {ml.label}
+            </text>
+          );
+        })}
+
+        {DAY_LABELS.map(function (dl) {
+          return (
+            <text
+              key={dl.index}
+              x={0}
+              y={MONTH_LABEL_HEIGHT + dl.index * CELL_STEP + CELL_SIZE - 1}
+              className="fill-base-content/30"
+              style={{ fontSize: 10, fontFamily: "var(--font-mono)" }}
+            >
+              {dl.label}
+            </text>
+          );
+        })}
+
+        {weeks.map(function (week, col) {
+          return week.map(function (cell, row) {
+            if (!cell) return null;
+            var intensity = getIntensity(cell.datum?.count || 0, maxCount);
+            var x = DAY_LABEL_WIDTH + col * CELL_STEP;
+            var y = MONTH_LABEL_HEIGHT + row * CELL_STEP;
+            var opacity = intensity >= 0 ? INTENSITY_OPACITIES[intensity] : 0.05;
+            var fillColor = intensity >= 0 ? PRIMARY_COLOR : undefined;
+
+            return (
+              <rect
+                key={cell.date}
+                x={x}
+                y={y}
+                width={CELL_SIZE}
+                height={CELL_SIZE}
+                rx={2}
+                ry={2}
+                fill={fillColor || "currentColor"}
+                opacity={opacity}
+                className={fillColor ? "" : "text-base-content/5"}
+                onMouseEnter={function (e) {
+                  setHover({
+                    x: e.clientX,
+                    y: e.clientY,
+                    datum: cell!.datum || { date: cell!.date, count: 0, tokens: 0, cost: 0 },
+                  });
+                }}
+                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"
+          style={{ left: hover.x + 12, top: hover.y - 40 }}
+        >
+          <p className="text-[10px] font-mono text-base-content/50">{hover.datum.date}</p>
+          <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
+            <p><span className="text-base-content/40">sessions </span>{hover.datum.count}</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/DailySummaryCards.tsx

@@ -0,0 +1,83 @@
+interface DailySummaryDatum {
+  date: string;
+  sessions: number;
+  cost: number;
+  tokens: number;
+  topTool: string;
+  modelMix: Record<string, number>;
+}
+
+interface DailySummaryCardsProps {
+  data: DailySummaryDatum[];
+}
+
+var MODEL_COLORS: Record<string, string> = {
+  opus: "oklch(55% 0.25 280)",
+  sonnet: "#a855f7",
+  haiku: "#22c55e",
+  other: "#f59e0b",
+};
+
+function formatCardDate(dateStr: string): string {
+  var d = new Date(dateStr + "T00:00:00");
+  var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  return days[d.getDay()] + " " + (d.getMonth() + 1) + "/" + d.getDate();
+}
+
+export function DailySummaryCards({ data }: DailySummaryCardsProps) {
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-[100px] text-base-content/25 font-mono text-[11px]">
+        No data
+      </div>
+    );
+  }
+
+  var reversed = data.slice().reverse();
+
+  return (
+    <div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-2 scrollbar-thin">
+      {reversed.map(function (d) {
+        var mixEntries = Object.entries(d.modelMix);
+
+        return (
+          <div
+            key={d.date}
+            className="flex-shrink-0 snap-start rounded-lg bg-base-300 border border-base-content/5 px-3 py-2.5 w-[140px]"
+          >
+            <p className="text-[11px] font-mono font-bold text-base-content/60 mb-1.5">
+              {formatCardDate(d.date)}
+            </p>
+
+            <div className="text-[10px] font-mono text-base-content/50 space-y-0.5">
+              <p><span className="text-base-content/30">sessions </span>{d.sessions}</p>
+              <p><span className="text-base-content/30">cost </span>${d.cost.toFixed(2)}</p>
+              {d.topTool && (
+                <p className="truncate"><span className="text-base-content/30">tool </span>{d.topTool}</p>
+              )}
+            </div>
+
+            {mixEntries.length > 0 && (
+              <div className="mt-2 h-[4px] rounded-full overflow-hidden flex bg-base-content/5">
+                {mixEntries.map(function (entry) {
+                  var model = entry[0];
+                  var pct = entry[1];
+                  if (pct <= 0) return null;
+                  return (
+                    <div
+                      key={model}
+                      style={{
+                        width: (pct * 100) + "%",
+                        backgroundColor: MODEL_COLORS[model] || MODEL_COLORS.other,
+                      }}
+                    />
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,129 @@
+import { useState } from "react";
+
+interface HeatmapDatum {
+  day: number;
+  hour: number;
+  count: number;
+}
+
+interface HourlyHeatmapProps {
+  data: HeatmapDatum[];
+}
+
+var CELL_SIZE = 18;
+var CELL_GAP = 2;
+var CELL_STEP = CELL_SIZE + CELL_GAP;
+var DAY_LABEL_WIDTH = 32;
+var HOUR_LABEL_HEIGHT = 16;
+
+var DAY_ORDER = [1, 2, 3, 4, 5, 6, 0];
+var DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var HOUR_LABELS = [0, 3, 6, 9, 12, 15, 18, 21];
+
+var PRIMARY_COLOR = "oklch(55% 0.25 280)";
+
+export function HourlyHeatmap({ data }: HourlyHeatmapProps) {
+  var [hover, setHover] = useState<{ x: number; y: number; day: string; hour: number; count: number } | 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 grid = new Map<string, number>();
+  var maxCount = 0;
+  for (var i = 0; i < data.length; i++) {
+    var key = data[i].day + ":" + data[i].hour;
+    grid.set(key, data[i].count);
+    if (data[i].count > maxCount) maxCount = data[i].count;
+  }
+
+  var svgWidth = DAY_LABEL_WIDTH + 24 * CELL_STEP;
+  var svgHeight = HOUR_LABEL_HEIGHT + 7 * CELL_STEP;
+
+  return (
+    <div className="relative overflow-x-auto">
+      <svg width={svgWidth} height={svgHeight} className="block">
+        {HOUR_LABELS.map(function (h) {
+          return (
+            <text
+              key={h}
+              x={DAY_LABEL_WIDTH + h * CELL_STEP + CELL_SIZE / 2}
+              y={11}
+              textAnchor="middle"
+              className="fill-base-content/30"
+              style={{ fontSize: 10, fontFamily: "var(--font-mono)" }}
+            >
+              {h}
+            </text>
+          );
+        })}
+
+        {DAY_ORDER.map(function (dayIdx, row) {
+          return (
+            <text
+              key={dayIdx}
+              x={0}
+              y={HOUR_LABEL_HEIGHT + row * CELL_STEP + CELL_SIZE - 3}
+              className="fill-base-content/30"
+              style={{ fontSize: 10, fontFamily: "var(--font-mono)" }}
+            >
+              {DAY_NAMES[dayIdx]}
+            </text>
+          );
+        })}
+
+        {DAY_ORDER.map(function (dayIdx, row) {
+          return Array.from({ length: 24 }, function (_, h) {
+            var cellKey = dayIdx + ":" + h;
+            var count = grid.get(cellKey) || 0;
+            var opacity = maxCount > 0 && count > 0 ? Math.max(0.1, count / maxCount) : 0.05;
+            var x = DAY_LABEL_WIDTH + h * CELL_STEP;
+            var y = HOUR_LABEL_HEIGHT + row * CELL_STEP;
+            var dayName = DAY_NAMES[dayIdx];
+
+            return (
+              <rect
+                key={cellKey}
+                x={x}
+                y={y}
+                width={CELL_SIZE}
+                height={CELL_SIZE}
+                rx={2}
+                ry={2}
+                fill={count > 0 ? PRIMARY_COLOR : "currentColor"}
+                opacity={opacity}
+                className={count > 0 ? "" : "text-base-content/5"}
+                onMouseEnter={function (e) {
+                  setHover({
+                    x: e.clientX,
+                    y: e.clientY,
+                    day: dayName,
+                    hour: h,
+                    count: count,
+                  });
+                }}
+                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"
+          style={{ left: hover.x + 12, top: hover.y - 40 }}
+        >
+          <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
+            <p><span className="text-base-content/40">{hover.day} </span>{hover.hour}:00</p>
+            <p><span className="text-base-content/40">sessions </span>{hover.count}</p>
+          </div>
+        </div>
+      )}
+    </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>
+  );
+}