@cryptiklemur/lattice 1.5.0 → 1.7.0

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

@@ -0,0 +1,101 @@
+import {
+  ScatterChart,
+  Scatter,
+  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 MODEL_COLORS: Record<string, string> = {
+  opus: "#a855f7",
+  sonnet: "oklch(55% 0.25 280)",
+  haiku: "#22c55e",
+  other: "#f59e0b",
+};
+
+interface ResponseTimeDatum {
+  tokens: number;
+  duration: number;
+  model: string;
+  sessionId: string;
+}
+
+interface ResponseTimeScatterProps {
+  data: ResponseTimeDatum[];
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: { tokens: number; durationSec: number; model: string } }> }) {
+  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">
+      <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
+        <p><span className="text-base-content/40">tokens </span>{d.tokens.toLocaleString()}</p>
+        <p><span className="text-base-content/40">duration </span>{d.durationSec.toFixed(1)}s</p>
+        <p><span className="text-base-content/40">model </span>{d.model}</p>
+      </div>
+    </div>
+  );
+}
+
+export function ResponseTimeScatter({ data }: ResponseTimeScatterProps) {
+  var models = Array.from(new Set(data.map(function (d) { return d.model; })));
+
+  var byModel = models.map(function (model) {
+    return {
+      model: model,
+      color: MODEL_COLORS[model] || "#f59e0b",
+      points: data
+        .filter(function (d) { return d.model === model; })
+        .map(function (d) { return { tokens: d.tokens, durationSec: d.duration / 1000, model: d.model }; }),
+    };
+  });
+
+  return (
+    <ResponsiveContainer width="100%" height={200}>
+      <ScatterChart margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} />
+        <XAxis
+          dataKey="tokens"
+          type="number"
+          tick={TICK_STYLE}
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={function (v) { return v >= 1000 ? (v / 1000).toFixed(0) + "k" : String(v); }}
+          name="tokens"
+        />
+        <YAxis
+          dataKey="durationSec"
+          type="number"
+          tick={TICK_STYLE}
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={function (v) { return v.toFixed(0) + "s"; }}
+          name="duration"
+        />
+        <Tooltip content={<CustomTooltip />} cursor={{ strokeDasharray: "3 3", stroke: GRID_COLOR }} />
+        {byModel.map(function (group) {
+          return (
+            <Scatter
+              key={group.model}
+              name={group.model}
+              data={group.points}
+              fill={group.color}
+              fillOpacity={0.7}
+            />
+          );
+        })}
+      </ScatterChart>
+    </ResponsiveContainer>
+  );
+}

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

@@ -0,0 +1,82 @@
+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 TokenFlowDatum {
+  date: string;
+  input: number;
+  output: number;
+  cacheRead: number;
+}
+
+interface TokenFlowChartProps {
+  data: TokenFlowDatum[];
+}
+
+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 (
+          <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 capitalize">{entry.name}</span>
+            <span className="text-base-content ml-auto pl-4">{entry.value.toLocaleString()}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function formatTokens(v: number): string {
+  if (v >= 1000000) return (v / 1000000).toFixed(1) + "M";
+  if (v >= 1000) return (v / 1000).toFixed(0) + "k";
+  return String(v);
+}
+
+export function TokenFlowChart({ data }: TokenFlowChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height={200}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <defs>
+          <linearGradient id="inputGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.4} />
+            <stop offset="95%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.05} />
+          </linearGradient>
+          <linearGradient id="outputGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="#22c55e" stopOpacity={0.4} />
+            <stop offset="95%" stopColor="#22c55e" stopOpacity={0.05} />
+          </linearGradient>
+          <linearGradient id="cacheReadGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.4} />
+            <stop offset="95%" stopColor="#f59e0b" stopOpacity={0.05} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} vertical={false} />
+        <XAxis dataKey="date" tick={TICK_STYLE} axisLine={false} tickLine={false} />
+        <YAxis tick={TICK_STYLE} axisLine={false} tickLine={false} tickFormatter={formatTokens} />
+        <Tooltip content={<CustomTooltip />} />
+        <Area type="monotone" dataKey="input" stackId="1" stroke="oklch(55% 0.25 280)" fill="url(#inputGrad)" strokeWidth={1.5} />
+        <Area type="monotone" dataKey="output" stackId="1" stroke="#22c55e" fill="url(#outputGrad)" strokeWidth={1.5} />
+        <Area type="monotone" dataKey="cacheRead" stackId="1" stroke="#f59e0b" fill="url(#cacheReadGrad)" strokeWidth={1.5} />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}

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

@@ -0,0 +1,89 @@
+import { Sankey, Tooltip, ResponsiveContainer } from "recharts";
+
+var NODE_COLORS: Record<string, string> = {
+  "Input Tokens": "oklch(55% 0.25 280)",
+  "Cache Read": "#f59e0b",
+  "Cache Creation": "oklch(65% 0.2 240)",
+  "Opus": "#a855f7",
+  "Sonnet": "oklch(55% 0.25 280)",
+  "Haiku": "#22c55e",
+  "Other": "#f59e0b",
+  "Output Tokens": "#22c55e",
+};
+
+interface SankeyData {
+  nodes: Array<{ name: string }>;
+  links: Array<{ source: number; target: number; value: number }>;
+}
+
+interface TokenSankeyChartProps {
+  data: SankeyData;
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: { source?: { name: string }; target?: { name: string }; value?: number; name?: string } }> }) {
+  if (!active || !payload || payload.length === 0) return null;
+  var d = payload[0].payload;
+  if (d.source && d.target) {
+    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">
+          {d.source.name} → {d.target.name}: {(d.value || 0).toLocaleString()}
+        </p>
+      </div>
+    );
+  }
+  if (d.name) {
+    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">{d.name}</p>
+      </div>
+    );
+  }
+  return null;
+}
+
+function SankeyNode({ x, y, width, height, index, payload }: { x: number; y: number; width: number; height: number; index: number; payload: { name: string } }) {
+  var color = NODE_COLORS[payload.name] || "oklch(0.5 0.1 280)";
+  return (
+    <g>
+      <rect x={x} y={y} width={width} height={height} fill={color} fillOpacity={0.85} rx={2} />
+      {height > 14 && (
+        <text
+          x={x + width + 6}
+          y={y + height / 2}
+          dy={4}
+          fill="oklch(0.9 0.02 280 / 0.5)"
+          fontSize={9}
+          fontFamily="var(--font-mono)"
+        >
+          {payload.name}
+        </text>
+      )}
+    </g>
+  );
+}
+
+export function TokenSankeyChart({ data }: TokenSankeyChartProps) {
+  if (!data.links || data.links.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-[250px] text-base-content/30 font-mono text-[12px]">
+        No token flow data
+      </div>
+    );
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={250}>
+      <Sankey
+        data={data}
+        node={<SankeyNode x={0} y={0} width={0} height={0} index={0} payload={{ name: "" }} />}
+        link={{ stroke: "oklch(0.9 0.02 280 / 0.1)" }}
+        margin={{ top: 10, right: 100, left: 10, bottom: 10 }}
+        nodeWidth={12}
+        nodePadding={14}
+      >
+        <Tooltip content={<CustomTooltip />} />
+      </Sankey>
+    </ResponsiveContainer>
+  );
+}

package/package.json

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

@@ -5,6 +5,18 @@ import type { AnalyticsPayload, AnalyticsPeriod, AnalyticsScope } from "@lattice
 import { estimateCost, projectPathToHash } from "../project/session";
 import { loadConfig } from "../config";
 
+interface ResponseTimeDatum {
+  tokens: number;
+  duration: number;
+  model: string;
+}
+
+interface ContextMessage {
+  messageIndex: number;
+  inputTokens: number;
+  model: string;
+}
+
 interface SessionData {
   id: string;
   title: string;
@@ -18,6 +30,8 @@ interface SessionData {
   tools: Map<string, number>;
   startTime: number;
   endTime: number;
+  responseTimePoints: ResponseTimeDatum[];
+  contextMessages: ContextMessage[];
 }
 
 interface CacheEntry {
@@ -83,8 +97,13 @@ function parseSessionFile(filePath: string, sessionId: string, projectSlug: stri
       tools: new Map(),
       startTime: 0,
       endTime: 0,
+      responseTimePoints: [],
+      contextMessages: [],
     };
 
+    var lastUserTimestamp = 0;
+    var assistantIndex = 0;
+
     for (var i = 0; i < lines.length; i++) {
       var line = lines[i].trim();
       if (!line) continue;
@@ -136,6 +155,16 @@ function parseSessionFile(filePath: string, sessionId: string, projectSlug: stri
           } else {
             data.models.set(bucket, { cost: cost, tokens: inTok + outTok });
           }
+
+          if (outTok > 0 && timestamp > 0 && lastUserTimestamp > 0) {
+            var dur = timestamp - lastUserTimestamp;
+            if (dur > 0 && dur < 600000) {
+              data.responseTimePoints.push({ tokens: outTok, duration: dur, model: bucket });
+            }
+          }
+
+          data.contextMessages.push({ messageIndex: assistantIndex, inputTokens: inTok + cacheRead + cacheCreation, model: bucket });
+          assistantIndex++;
         }
 
         if (!data.title && message.content) {
@@ -144,6 +173,7 @@ function parseSessionFile(filePath: string, sessionId: string, projectSlug: stri
           }
         }
       } else if (parsed.type === "user") {
+        if (timestamp > 0) lastUserTimestamp = timestamp;
         var userMsg = parsed.message as Record<string, unknown> | undefined;
         if (!userMsg || !Array.isArray(userMsg.content)) continue;
 
@@ -408,6 +438,206 @@ function aggregate(sessions: SessionData[], period: AnalyticsPeriod): AnalyticsP
   });
   toolUsage.sort(function (a, b) { return b.count - a.count; });
 
+  var responseTimeData: AnalyticsPayload["responseTimeData"] = [];
+  for (var rti = 0; rti < filtered.length; rti++) {
+    var rtSess = filtered[rti];
+    for (var rtj = 0; rtj < rtSess.responseTimePoints.length; rtj++) {
+      var rtp = rtSess.responseTimePoints[rtj];
+      responseTimeData.push({ tokens: rtp.tokens, duration: rtp.duration, model: rtp.model, sessionId: rtSess.id });
+    }
+    if (responseTimeData.length >= 200) break;
+  }
+  if (responseTimeData.length > 200) responseTimeData.length = 200;
+
+  var contextWindowSizes: Record<string, number> = { opus: 200000, sonnet: 200000, haiku: 200000, other: 200000 };
+  var contextUtilization: AnalyticsPayload["contextUtilization"] = [];
+  var recentSessions = sorted.slice(0, 5);
+  for (var cui = 0; cui < recentSessions.length; cui++) {
+    var cuSess = recentSessions[cui];
+    var runningTokens = 0;
+    var primaryModel = "other";
+    var maxModelTokens = 0;
+    cuSess.models.forEach(function (val, key) {
+      if (val.tokens > maxModelTokens) {
+        maxModelTokens = val.tokens;
+        primaryModel = key;
+      }
+    });
+    var windowSize = contextWindowSizes[primaryModel] || 200000;
+    for (var cmj = 0; cmj < cuSess.contextMessages.length; cmj++) {
+      var cm = cuSess.contextMessages[cmj];
+      runningTokens += cm.inputTokens;
+      contextUtilization.push({
+        messageIndex: cm.messageIndex,
+        contextPercent: Math.min((runningTokens / windowSize) * 100, 100),
+        sessionId: cuSess.id,
+        title: cuSess.title,
+      });
+    }
+  }
+
+  var sankeyNodes = [
+    { name: "Input Tokens" },
+    { name: "Cache Read" },
+    { name: "Cache Creation" },
+    { name: "Opus" },
+    { name: "Sonnet" },
+    { name: "Haiku" },
+    { name: "Other" },
+    { name: "Output Tokens" },
+  ];
+  var modelNodeMap: Record<string, number> = { opus: 3, sonnet: 4, haiku: 5, other: 6 };
+  var sankeyLinks: Array<{ source: number; target: number; value: number }> = [];
+  var modelInputTotals = new Map<string, number>();
+  var modelCacheTotals = new Map<string, number>();
+  var modelCacheCreationTotals = new Map<string, number>();
+  var modelOutputTotals = new Map<string, number>();
+
+  for (var ski = 0; ski < filtered.length; ski++) {
+    var skSess = filtered[ski];
+    var skTotal = skSess.inputTokens + skSess.cacheReadTokens + skSess.cacheCreationTokens;
+    if (skTotal === 0) continue;
+    skSess.models.forEach(function (val, key) {
+      var proportion = val.tokens / (skTotal + skSess.outputTokens || 1);
+      modelInputTotals.set(key, (modelInputTotals.get(key) || 0) + skSess.inputTokens * proportion);
+      modelCacheTotals.set(key, (modelCacheTotals.get(key) || 0) + skSess.cacheReadTokens * proportion);
+      modelCacheCreationTotals.set(key, (modelCacheCreationTotals.get(key) || 0) + skSess.cacheCreationTokens * proportion);
+      modelOutputTotals.set(key, (modelOutputTotals.get(key) || 0) + skSess.outputTokens * proportion);
+    });
+  }
+
+  ["opus", "sonnet", "haiku", "other"].forEach(function (model) {
+    var nodeIdx = modelNodeMap[model];
+    var inputVal = Math.round(modelInputTotals.get(model) || 0);
+    var cacheVal = Math.round(modelCacheTotals.get(model) || 0);
+    var cacheCreationVal = Math.round(modelCacheCreationTotals.get(model) || 0);
+    var outputVal = Math.round(modelOutputTotals.get(model) || 0);
+    if (inputVal > 0) sankeyLinks.push({ source: 0, target: nodeIdx, value: inputVal });
+    if (cacheVal > 0) sankeyLinks.push({ source: 1, target: nodeIdx, value: cacheVal });
+    if (cacheCreationVal > 0) sankeyLinks.push({ source: 2, target: nodeIdx, value: cacheCreationVal });
+    if (outputVal > 0) sankeyLinks.push({ source: nodeIdx, target: 7, value: outputVal });
+  });
+
+  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,
@@ -430,6 +660,13 @@ function aggregate(sessions: SessionData[], period: AnalyticsPeriod): AnalyticsP
     modelUsage: modelUsage,
     projectBreakdown: projectBreakdown,
     toolUsage: toolUsage,
+    responseTimeData: responseTimeData,
+    contextUtilization: contextUtilization,
+    tokenFlowSankey: tokenFlowSankey,
+    activityCalendar: activityCalendar,
+    hourlyHeatmap: hourlyHeatmap,
+    sessionTimeline: sessionTimeline,
+    dailySummaries: dailySummaries,
   };
 }