@cryptiklemur/lattice 1.5.0 → 1.7.0

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

@@ -1,4 +1,25 @@
+import { Component } from "react";
 import { useAnalytics } from "../../hooks/useAnalytics";
+
+class ChartErrorBoundary extends Component<{ children: React.ReactNode; name: string }, { error: Error | null }> {
+  constructor(props: { children: React.ReactNode; name: string }) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error: Error) {
+    return { error: error };
+  }
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="flex items-center justify-center h-[200px] text-base-content/25 font-mono text-[11px]">
+          Chart error: {this.props.name}
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
 import { PeriodSelector } from "./PeriodSelector";
 import { ChartCard } from "./ChartCard";
 import { CostAreaChart } from "./charts/CostAreaChart";
@@ -6,6 +27,15 @@ import { CumulativeCostChart } from "./charts/CumulativeCostChart";
 import { CostDonutChart } from "./charts/CostDonutChart";
 import { CostDistributionChart } from "./charts/CostDistributionChart";
 import { SessionBubbleChart } from "./charts/SessionBubbleChart";
+import { TokenFlowChart } from "./charts/TokenFlowChart";
+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";
 
 export function AnalyticsView() {
   var analytics = useAnalytics();
@@ -49,6 +79,63 @@ export function AnalyticsView() {
                 <SessionBubbleChart data={analytics.data.sessionBubbles} />
               </ChartCard>
             </div>
+
+            <ChartCard title="Token Flow">
+              <ChartErrorBoundary name="TokenFlow">
+                <TokenFlowChart data={analytics.data.tokensOverTime} />
+              </ChartErrorBoundary>
+            </ChartCard>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <ChartCard title="Cache Efficiency">
+                <ChartErrorBoundary name="CacheEfficiency">
+                  <CacheEfficiencyChart data={analytics.data.cacheHitRateOverTime} />
+                </ChartErrorBoundary>
+              </ChartCard>
+              <ChartCard title="Response Time vs Tokens">
+                <ChartErrorBoundary name="ResponseTime">
+                  <ResponseTimeScatter data={analytics.data.responseTimeData} />
+                </ChartErrorBoundary>
+              </ChartCard>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <ChartCard title="Context Window Usage">
+                <ChartErrorBoundary name="ContextUtilization">
+                  <ContextUtilizationChart data={analytics.data.contextUtilization} />
+                </ChartErrorBoundary>
+              </ChartCard>
+              <ChartCard title="Token Flow (Sankey)">
+                <ChartErrorBoundary name="Sankey">
+                  <TokenSankeyChart data={analytics.data.tokenFlowSankey} />
+                </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>
         )}
 

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

@@ -0,0 +1,60 @@
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+var TICK_STYLE = {
+  fontSize: 10,
+  fontFamily: "var(--font-mono)",
+  fill: "oklch(0.9 0.02 280 / 0.3)",
+};
+
+var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+
+interface CacheEfficiencyDatum {
+  date: string;
+  rate: number;
+}
+
+interface CacheEfficiencyChartProps {
+  data: CacheEfficiencyDatum[];
+}
+
+function CustomTooltip({ active, payload, label }: { active?: boolean; payload?: Array<{ value: number }>; 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>
+      <p className="text-[11px] font-mono text-base-content">{(payload[0].value * 100).toFixed(1)}%</p>
+    </div>
+  );
+}
+
+export function CacheEfficiencyChart({ data }: CacheEfficiencyChartProps) {
+  var displayData = data.map(function (d) {
+    return { date: d.date, rate: d.rate * 100 };
+  });
+
+  return (
+    <ResponsiveContainer width="100%" height={200}>
+      <AreaChart data={displayData} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <defs>
+          <linearGradient id="cacheEffGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="#22c55e" stopOpacity={0.4} />
+            <stop offset="95%" stopColor="#22c55e" stopOpacity={0.02} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} vertical={false} />
+        <XAxis dataKey="date" tick={TICK_STYLE} axisLine={false} tickLine={false} />
+        <YAxis domain={[0, 100]} tick={TICK_STYLE} axisLine={false} tickLine={false} tickFormatter={function (v) { return v + "%"; }} />
+        <Tooltip content={<CustomTooltip />} />
+        <Area type="monotone" dataKey="rate" stroke="#22c55e" fill="url(#cacheEffGrad)" strokeWidth={1.5} />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}

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

@@ -0,0 +1,110 @@
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+var TICK_STYLE = {
+  fontSize: 10,
+  fontFamily: "var(--font-mono)",
+  fill: "oklch(0.9 0.02 280 / 0.3)",
+};
+
+var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+
+var LINE_COLORS = [
+  "oklch(55% 0.25 280)",
+  "#a855f7",
+  "#22c55e",
+  "#f59e0b",
+  "oklch(65% 0.2 240)",
+];
+
+interface ContextUtilDatum {
+  messageIndex: number;
+  contextPercent: number;
+  sessionId: string;
+  title: string;
+}
+
+interface ContextUtilizationChartProps {
+  data: ContextUtilDatum[];
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number; color: 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">
+      {payload.map(function (entry) {
+        return (
+          <div key={entry.name} className="flex items-center gap-2 text-[11px] font-mono">
+            <span className="inline-block w-2 h-2 rounded-full" style={{ background: entry.color }} />
+            <span className="text-base-content/60 truncate max-w-[120px]">{entry.name}</span>
+            <span className="text-base-content ml-auto pl-4">{entry.value.toFixed(1)}%</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function ContextUtilizationChart({ data }: ContextUtilizationChartProps) {
+  var sessionMap = new Map<string, { title: string; points: Array<{ messageIndex: number; contextPercent: number }> }>();
+  for (var i = 0; i < data.length; i++) {
+    var d = data[i];
+    var entry = sessionMap.get(d.sessionId);
+    if (!entry) {
+      entry = { title: d.title, points: [] };
+      sessionMap.set(d.sessionId, entry);
+    }
+    entry.points.push({ messageIndex: d.messageIndex, contextPercent: d.contextPercent });
+  }
+
+  var sessions = Array.from(sessionMap.entries()).slice(0, 5);
+
+  var maxIndex = 0;
+  sessions.forEach(function (s) {
+    s[1].points.forEach(function (p) {
+      if (p.messageIndex > maxIndex) maxIndex = p.messageIndex;
+    });
+  });
+
+  var merged: Array<Record<string, number>> = [];
+  for (var mi = 0; mi <= maxIndex; mi++) {
+    var row: Record<string, number> = { messageIndex: mi };
+    sessions.forEach(function (s) {
+      var point = s[1].points.find(function (p) { return p.messageIndex === mi; });
+      if (point) row[s[0]] = point.contextPercent;
+    });
+    merged.push(row);
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={200}>
+      <LineChart data={merged} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} vertical={false} />
+        <XAxis dataKey="messageIndex" tick={TICK_STYLE} axisLine={false} tickLine={false} />
+        <YAxis domain={[0, 100]} tick={TICK_STYLE} axisLine={false} tickLine={false} tickFormatter={function (v) { return v + "%"; }} />
+        <Tooltip content={<CustomTooltip />} />
+        {sessions.map(function (s, idx) {
+          return (
+            <Line
+              key={s[0]}
+              type="monotone"
+              dataKey={s[0]}
+              name={s[1].title.slice(0, 30)}
+              stroke={LINE_COLORS[idx % LINE_COLORS.length]}
+              strokeWidth={1.5}
+              dot={false}
+              connectNulls
+            />
+          );
+        })}
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}

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>
+  );
+}