@cryptiklemur/lattice 1.5.0 → 1.6.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,11 @@ 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";
 
 export function AnalyticsView() {
   var analytics = useAnalytics();
@@ -49,6 +75,38 @@ 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>
           </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/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/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.6.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,88 @@ 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 };
+
   return {
     totalCost: totalCost,
     totalSessions: filtered.length,
@@ -430,6 +542,9 @@ function aggregate(sessions: SessionData[], period: AnalyticsPeriod): AnalyticsP
     modelUsage: modelUsage,
     projectBreakdown: projectBreakdown,
     toolUsage: toolUsage,
+    responseTimeData: responseTimeData,
+    contextUtilization: contextUtilization,
+    tokenFlowSankey: tokenFlowSankey,
   };
 }
 

package/shared/src/analytics.ts

@@ -18,6 +18,10 @@ export interface AnalyticsPayload {
   modelUsage: Array<{ model: string; sessions: number; cost: number; tokens: number; percentage: number }>;
   projectBreakdown: Array<{ project: string; cost: number; sessions: number; tokens: number }>;
   toolUsage: Array<{ tool: string; count: number; avgCost: number }>;
+
+  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 }> };
 }
 
 export type AnalyticsPeriod = "24h" | "7d" | "30d" | "90d" | "all";