@cryptiklemur/lattice 1.6.0 → 1.7.0

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

@@ -32,6 +32,10 @@ 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();
@@ -107,6 +111,31 @@ 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>
         )}
 

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptiklemur/lattice",
-  "version": "1.6.0",
+  "version": "1.7.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

@@ -520,6 +520,124 @@ function aggregate(sessions: SessionData[], period: AnalyticsPeriod): AnalyticsP
 
   var tokenFlowSankey: AnalyticsPayload["tokenFlowSankey"] = { nodes: sankeyNodes, links: sankeyLinks };
 
+  var activityCalendarMap = new Map<string, { count: number; tokens: number; cost: number }>();
+  for (var aci = 0; aci < filtered.length; aci++) {
+    var acSess = filtered[aci];
+    var acDate = formatDate(acSess.endTime > 0 ? acSess.endTime : acSess.startTime);
+    var acEntry = activityCalendarMap.get(acDate);
+    if (!acEntry) {
+      acEntry = { count: 0, tokens: 0, cost: 0 };
+      activityCalendarMap.set(acDate, acEntry);
+    }
+    acEntry.count++;
+    acEntry.tokens += acSess.inputTokens + acSess.outputTokens;
+    acEntry.cost += acSess.cost;
+  }
+
+  var activityCalendar: AnalyticsPayload["activityCalendar"] = [];
+  if (dates.length > 0) {
+    var calStart = new Date(dates[0]);
+    var calEnd = new Date(dates[dates.length - 1]);
+    var calCursor = new Date(calStart);
+    while (calCursor <= calEnd) {
+      var calKey = formatDate(calCursor.getTime());
+      var calData = activityCalendarMap.get(calKey);
+      activityCalendar.push({
+        date: calKey,
+        count: calData ? calData.count : 0,
+        tokens: calData ? calData.tokens : 0,
+        cost: calData ? calData.cost : 0,
+      });
+      calCursor.setDate(calCursor.getDate() + 1);
+    }
+  }
+
+  var hourlyHeatmap: AnalyticsPayload["hourlyHeatmap"] = [];
+  var heatmapGrid = new Map<string, number>();
+  for (var hmi = 0; hmi < filtered.length; hmi++) {
+    var hmSess = filtered[hmi];
+    if (hmSess.startTime <= 0) continue;
+    var hmDate = new Date(hmSess.startTime);
+    var hmDay = hmDate.getDay();
+    var hmHour = hmDate.getHours();
+    var hmKey = hmDay + ":" + hmHour;
+    heatmapGrid.set(hmKey, (heatmapGrid.get(hmKey) || 0) + 1);
+  }
+  for (var hd = 0; hd < 7; hd++) {
+    for (var hh = 0; hh < 24; hh++) {
+      var hhKey = hd + ":" + hh;
+      hourlyHeatmap.push({ day: hd, hour: hh, count: heatmapGrid.get(hhKey) || 0 });
+    }
+  }
+
+  var sessionTimeline: AnalyticsPayload["sessionTimeline"] = [];
+  var tlSorted = filtered
+    .filter(function (s) { return s.startTime > 0 && s.endTime > 0; })
+    .sort(function (a, b) { return b.startTime - a.startTime; });
+  var tlCap = Math.min(tlSorted.length, 50);
+  for (var tli = 0; tli < tlCap; tli++) {
+    var tlSess = tlSorted[tli];
+    sessionTimeline.push({
+      id: tlSess.id,
+      title: tlSess.title,
+      project: tlSess.project,
+      start: tlSess.startTime,
+      end: tlSess.endTime,
+      cost: tlSess.cost,
+    });
+  }
+
+  var dailySummaryMap = new Map<string, { sessions: number; cost: number; tokens: number; tools: Map<string, number>; models: Map<string, number> }>();
+  for (var dsi = 0; dsi < filtered.length; dsi++) {
+    var dsSess = filtered[dsi];
+    var dsDate = formatDate(dsSess.endTime > 0 ? dsSess.endTime : dsSess.startTime);
+    var dsEntry = dailySummaryMap.get(dsDate);
+    if (!dsEntry) {
+      dsEntry = { sessions: 0, cost: 0, tokens: 0, tools: new Map(), models: new Map() };
+      dailySummaryMap.set(dsDate, dsEntry);
+    }
+    dsEntry.sessions++;
+    dsEntry.cost += dsSess.cost;
+    dsEntry.tokens += dsSess.inputTokens + dsSess.outputTokens;
+    dsSess.tools.forEach(function (count, tool) {
+      dsEntry!.tools.set(tool, (dsEntry!.tools.get(tool) || 0) + count);
+    });
+    dsSess.models.forEach(function (val, key) {
+      dsEntry!.models.set(key, (dsEntry!.models.get(key) || 0) + val.cost);
+    });
+  }
+
+  var dailySummaries: AnalyticsPayload["dailySummaries"] = [];
+  var dsSortedDates = Array.from(dailySummaryMap.keys()).sort();
+  for (var dsdi = 0; dsdi < dsSortedDates.length; dsdi++) {
+    var dsd = dsSortedDates[dsdi];
+    var dsData = dailySummaryMap.get(dsd)!;
+    var topTool = "";
+    var topToolCount = 0;
+    dsData.tools.forEach(function (count, tool) {
+      if (count > topToolCount) {
+        topToolCount = count;
+        topTool = tool;
+      }
+    });
+    var modelMix: Record<string, number> = {};
+    var modelTotal = 0;
+    dsData.models.forEach(function (cost) { modelTotal += cost; });
+    if (modelTotal > 0) {
+      dsData.models.forEach(function (cost, model) {
+        modelMix[model] = Math.round((cost / modelTotal) * 100) / 100;
+      });
+    }
+    dailySummaries.push({
+      date: dsd,
+      sessions: dsData.sessions,
+      cost: dsData.cost,
+      tokens: dsData.tokens,
+      topTool: topTool,
+      modelMix: modelMix,
+    });
+  }
+
   return {
     totalCost: totalCost,
     totalSessions: filtered.length,
@@ -545,6 +663,10 @@ function aggregate(sessions: SessionData[], period: AnalyticsPeriod): AnalyticsP
     responseTimeData: responseTimeData,
     contextUtilization: contextUtilization,
     tokenFlowSankey: tokenFlowSankey,
+    activityCalendar: activityCalendar,
+    hourlyHeatmap: hourlyHeatmap,
+    sessionTimeline: sessionTimeline,
+    dailySummaries: dailySummaries,
   };
 }
 

package/shared/src/analytics.ts

@@ -22,6 +22,11 @@ export interface AnalyticsPayload {
   responseTimeData: Array<{ tokens: number; duration: number; model: string; sessionId: string }>;
   contextUtilization: Array<{ messageIndex: number; contextPercent: number; sessionId: string; title: string }>;
   tokenFlowSankey: { nodes: Array<{ name: string }>; links: Array<{ source: number; target: number; value: number }> };
+
+  activityCalendar: Array<{ date: string; count: number; tokens: number; cost: number }>;
+  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> }>;
 }
 
 export type AnalyticsPeriod = "24h" | "7d" | "30d" | "90d" | "all";