@cryptiklemur/lattice 1.4.0 → 1.6.0

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/client/src/components/dashboard/DashboardView.tsx

@@ -4,6 +4,7 @@ import { useProjects } from "../../hooks/useProjects";
 import { useSidebar } from "../../hooks/useSidebar";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { LatticeLogomark } from "../ui/LatticeLogomark";
+import { QuickStats } from "../analytics/QuickStats";
 import {
   Network, FolderOpen, Activity, MessageSquare, Menu,
   ChevronRight, Lock, Bug,
@@ -118,6 +119,10 @@ export function DashboardView() {
           </div>
         </div>
 
+        <div className="mt-4 mb-8">
+          <QuickStats />
+        </div>
+
         {sessions.length > 0 && (
           <div className="mb-8">
             <h2 className="text-[11px] font-semibold tracking-wider uppercase text-base-content/40 mb-3">Recent Sessions</h2>

package/client/src/components/sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Plus, ChevronDown, Search, LayoutDashboard, FolderOpen, TerminalSquare, StickyNote, Calendar } from "lucide-react";
+import { Plus, ChevronDown, Search, LayoutDashboard, FolderOpen, TerminalSquare, StickyNote, Calendar, BarChart3 } from "lucide-react";
 import { LatticeLogomark } from "../ui/LatticeLogomark";
 import type { SessionSummary, ServerMessage, SettingsDataMessage } from "@lattice/shared";
 import { useProjects } from "../../hooks/useProjects";
@@ -10,7 +10,7 @@ import { useSession } from "../../hooks/useSession";
 import { clearSession } from "../../stores/session";
 import { useOnline } from "../../hooks/useOnline";
 import { openTab } from "../../stores/workspace";
-import { getSidebarStore } from "../../stores/sidebar";
+import { getSidebarStore, goToAnalytics } from "../../stores/sidebar";
 import { ProjectRail } from "./ProjectRail";
 import { SessionList } from "./SessionList";
 import { UserIsland } from "./UserIsland";
@@ -175,6 +175,14 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
                       </button>
                     );
                   })}
+                  <button
+                    type="button"
+                    onClick={goToAnalytics}
+                    className="flex items-center gap-2 px-2 py-1.5 rounded-lg text-[11px] text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30 transition-colors"
+                  >
+                    <BarChart3 size={12} />
+                    <span className="font-mono tracking-wide">Analytics</span>
+                  </button>
                 </div>
 
                 <SectionLabel

package/client/src/hooks/useAnalytics.ts

@@ -0,0 +1,75 @@
+import { useEffect, useRef } from "react";
+import { useStore } from "@tanstack/react-store";
+import { useWebSocket } from "./useWebSocket";
+import type { ServerMessage } from "@lattice/shared";
+import type { AnalyticsPeriod, AnalyticsScope } from "@lattice/shared";
+import {
+  getAnalyticsStore,
+  setAnalyticsData,
+  setAnalyticsLoading,
+  setAnalyticsError,
+  setAnalyticsPeriod,
+  setAnalyticsScope,
+} from "../stores/analytics";
+import type { AnalyticsState } from "../stores/analytics";
+
+export function useAnalytics(): AnalyticsState & {
+  setPeriod: (period: AnalyticsPeriod) => void;
+  setScope: (scope: AnalyticsScope, projectSlug?: string) => void;
+  refresh: () => void;
+} {
+  var store = getAnalyticsStore();
+  var state = useStore(store, function (s) { return s; });
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var sendRef = useRef(send);
+  sendRef.current = send;
+
+  function requestAnalytics(forceRefresh?: boolean) {
+    var s = getAnalyticsStore().state;
+    setAnalyticsLoading(true);
+    sendRef.current({
+      type: "analytics:request",
+      requestId: crypto.randomUUID(),
+      scope: s.scope,
+      projectSlug: s.projectSlug || undefined,
+      period: s.period,
+      forceRefresh: forceRefresh,
+    } as any);
+  }
+
+  useEffect(function () {
+    function handleData(msg: ServerMessage) {
+      var m = msg as { type: string; data: any };
+      setAnalyticsData(m.data);
+    }
+
+    function handleError(msg: ServerMessage) {
+      var m = msg as { type: string; message: string };
+      setAnalyticsError(m.message);
+    }
+
+    subscribe("analytics:data", handleData);
+    subscribe("analytics:error", handleError);
+
+    return function () {
+      unsubscribe("analytics:data", handleData);
+      unsubscribe("analytics:error", handleError);
+    };
+  }, [subscribe, unsubscribe]);
+
+  useEffect(function () {
+    requestAnalytics();
+  }, [state.period, state.scope, state.projectSlug]);
+
+  return {
+    data: state.data,
+    loading: state.loading,
+    error: state.error,
+    period: state.period,
+    scope: state.scope,
+    projectSlug: state.projectSlug,
+    setPeriod: setAnalyticsPeriod,
+    setScope: setAnalyticsScope,
+    refresh: function () { requestAnalytics(true); },
+  };
+}

package/client/src/router.tsx

@@ -8,6 +8,7 @@ import { SettingsView } from "./components/settings/SettingsView";
 import { ProjectSettingsView } from "./components/project-settings/ProjectSettingsView";
 import { DashboardView } from "./components/dashboard/DashboardView";
 import { ProjectDashboardView } from "./components/dashboard/ProjectDashboardView";
+import { AnalyticsView } from "./components/analytics/AnalyticsView";
 import { NodeSettingsModal } from "./components/sidebar/NodeSettingsModal";
 import { AddProjectModal } from "./components/sidebar/AddProjectModal";
 import { useSidebar } from "./hooks/useSidebar";
@@ -421,6 +422,9 @@ function IndexPage() {
   if (sidebar.activeView.type === "project-dashboard") {
     return <ProjectDashboardView />;
   }
+  if (sidebar.activeView.type === "analytics") {
+    return <AnalyticsView />;
+  }
   return <WorkspaceView />;
 }
 

package/client/src/stores/analytics.ts

@@ -0,0 +1,54 @@
+import { Store } from "@tanstack/react-store";
+import type { AnalyticsPayload, AnalyticsPeriod, AnalyticsScope } from "@lattice/shared";
+
+export interface AnalyticsState {
+  data: AnalyticsPayload | null;
+  loading: boolean;
+  error: string | null;
+  period: AnalyticsPeriod;
+  scope: AnalyticsScope;
+  projectSlug: string | null;
+}
+
+var analyticsStore = new Store<AnalyticsState>({
+  data: null,
+  loading: false,
+  error: null,
+  period: "7d",
+  scope: "global",
+  projectSlug: null,
+});
+
+export function getAnalyticsStore(): Store<AnalyticsState> {
+  return analyticsStore;
+}
+
+export function setAnalyticsData(data: AnalyticsPayload): void {
+  analyticsStore.setState(function (state) {
+    return { ...state, data: data, loading: false, error: null };
+  });
+}
+
+export function setAnalyticsLoading(loading: boolean): void {
+  analyticsStore.setState(function (state) {
+    return { ...state, loading: loading };
+  });
+}
+
+export function setAnalyticsError(error: string): void {
+  analyticsStore.setState(function (state) {
+    return { ...state, error: error, loading: false };
+  });
+}
+
+export function setAnalyticsPeriod(period: AnalyticsPeriod): void {
+  analyticsStore.setState(function (state) {
+    return { ...state, period: period };
+  });
+}
+
+export function setAnalyticsScope(scope: AnalyticsScope, projectSlug?: string): void {
+  analyticsStore.setState(function (state) {
+    return { ...state, scope: scope, projectSlug: projectSlug || null };
+  });
+}

package/client/src/stores/sidebar.ts

@@ -13,6 +13,7 @@ export type SidebarMode = "project" | "settings";
 export type ActiveView =
   | { type: "dashboard" }
   | { type: "project-dashboard" }
+  | { type: "analytics" }
   | { type: "chat" }
   | { type: "settings"; section: SettingsSection }
   | { type: "project-settings"; section: ProjectSettingsSection };
@@ -246,6 +247,13 @@ export function goToDashboard(): void {
   pushUrl(null, null);
 }
 
+export function goToAnalytics(): void {
+  sidebarStore.setState(function (state) {
+    return { ...state, activeView: { type: "analytics" }, sidebarMode: "project" };
+  });
+  pushUrl(sidebarStore.state.activeProjectSlug, null);
+}
+
 export function handlePopState(): void {
   var url = parseInitialUrl();
   if (url.settingsSection) {

package/client/vite.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
     VitePWA({
       registerType: "prompt",
       workbox: {
+        maximumFileSizeToCacheInBytes: 4 * 1024 * 1024,
         globPatterns: ["**/*.{js,css,html,svg,png,woff2}"],
         navigateFallback: "/index.html",
         navigateFallbackDenylist: [/^\/ws/, /^\/api/],

package/package.json

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