@cryptiklemur/lattice 1.4.0 → 1.5.0

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

@@ -0,0 +1,93 @@
+import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
+
+var MODEL_COLORS: Record<string, string> = {
+  opus: "#a855f7",
+  sonnet: "oklch(55% 0.25 280)",
+  haiku: "#22c55e",
+  other: "#f59e0b",
+};
+
+function getModelColor(model: string): string {
+  var key = model.toLowerCase();
+  if (key.includes("opus")) return MODEL_COLORS.opus;
+  if (key.includes("sonnet")) return MODEL_COLORS.sonnet;
+  if (key.includes("haiku")) return MODEL_COLORS.haiku;
+  return MODEL_COLORS.other;
+}
+
+interface ModelUsage {
+  model: string;
+  cost: number;
+  percentage: number;
+}
+
+interface CostDonutChartProps {
+  modelUsage: ModelUsage[];
+  totalCost: number;
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number; payload: ModelUsage }> }) {
+  if (!active || !payload || payload.length === 0) return null;
+  var entry = payload[0];
+  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">{entry.name}</p>
+      <p className="text-[11px] font-mono text-base-content">${entry.value.toFixed(4)}</p>
+      <p className="text-[10px] font-mono text-base-content/50">{entry.payload.percentage.toFixed(1)}%</p>
+    </div>
+  );
+}
+
+function CenterLabel({ totalCost }: { totalCost: number }) {
+  return (
+    <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle">
+      <tspan x="50%" dy="-0.4em" style={{ fontSize: 11, fontFamily: "var(--font-mono)", fill: "oklch(0.9 0.02 280 / 0.4)" }}>
+        TOTAL
+      </tspan>
+      <tspan x="50%" dy="1.4em" style={{ fontSize: 14, fontFamily: "var(--font-mono)", fill: "oklch(0.9 0.02 280 / 0.9)", fontWeight: 700 }}>
+        ${totalCost.toFixed(2)}
+      </tspan>
+    </text>
+  );
+}
+
+export function CostDonutChart({ modelUsage, totalCost }: CostDonutChartProps) {
+  return (
+    <div>
+      <ResponsiveContainer width="100%" height={200}>
+        <PieChart>
+          <Pie
+            data={modelUsage}
+            dataKey="cost"
+            nameKey="model"
+            innerRadius={50}
+            outerRadius={80}
+            paddingAngle={2}
+            startAngle={90}
+            endAngle={-270}
+          >
+            {modelUsage.map(function (entry, index) {
+              return <Cell key={entry.model + index} fill={getModelColor(entry.model)} />;
+            })}
+          </Pie>
+          <Tooltip content={<CustomTooltip />} />
+          <CenterLabel totalCost={totalCost} />
+        </PieChart>
+      </ResponsiveContainer>
+      <div className="flex flex-wrap justify-center gap-3 mt-2">
+        {modelUsage.map(function (entry) {
+          return (
+            <div key={entry.model} className="flex items-center gap-1.5 text-[10px] font-mono text-base-content/50">
+              <span
+                className="inline-block w-2 h-2 rounded-full flex-shrink-0"
+                style={{ background: getModelColor(entry.model) }}
+              />
+              <span className="capitalize">{entry.model}</span>
+              <span className="text-base-content/30">{entry.percentage.toFixed(1)}%</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+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 CumulativeDatum {
+  date: string;
+  total: number;
+}
+
+interface CumulativeCostChartProps {
+  data: CumulativeDatum[];
+}
+
+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.toFixed(4)}</p>
+    </div>
+  );
+}
+
+export function CumulativeCostChart({ data }: CumulativeCostChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height={200}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <defs>
+          <linearGradient id="cumulativeGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.3} />
+            <stop offset="95%" stopColor="oklch(55% 0.25 280)" stopOpacity={0} />
+          </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={function (v) { return "$" + v.toFixed(2); }} />
+        <Tooltip content={<CustomTooltip />} />
+        <Area
+          type="monotone"
+          dataKey="total"
+          stroke="oklch(55% 0.25 280)"
+          fill="url(#cumulativeGrad)"
+          strokeWidth={2}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}

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

@@ -0,0 +1,122 @@
+import {
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  ZAxis,
+} 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 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)",
+];
+
+interface SessionBubbleDatum {
+  id: string;
+  title: string;
+  cost: number;
+  tokens: number;
+  timestamp: number;
+  project: string;
+}
+
+interface SessionBubbleChartProps {
+  data: SessionBubbleDatum[];
+}
+
+function formatDate(ts: number): string {
+  var d = new Date(ts);
+  return (d.getMonth() + 1) + "/" + d.getDate();
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: SessionBubbleDatum }> }) {
+  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 max-w-[180px]">
+      <p className="text-[10px] font-mono text-base-content/50 mb-1 truncate">{d.title || d.id}</p>
+      <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
+        <p><span className="text-base-content/40">cost </span>${d.cost.toFixed(4)}</p>
+        <p><span className="text-base-content/40">tokens </span>{d.tokens.toLocaleString()}</p>
+        <p><span className="text-base-content/40">project </span>{d.project}</p>
+      </div>
+    </div>
+  );
+}
+
+export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
+  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 byProject = projects.map(function (project) {
+    return {
+      project,
+      color: getColor(project),
+      points: data
+        .filter(function (d) { return d.project === project; })
+        .map(function (d) { return { ...d, x: d.timestamp, y: d.tokens, z: Math.max(d.cost * 1000, 20) }; }),
+    };
+  });
+
+  var minTs = Math.min(...data.map(function (d) { return d.timestamp; }));
+  var maxTs = Math.max(...data.map(function (d) { return d.timestamp; }));
+
+  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="x"
+          type="number"
+          domain={[minTs, maxTs]}
+          tick={TICK_STYLE}
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={function (v) { return formatDate(v); }}
+        />
+        <YAxis
+          dataKey="y"
+          type="number"
+          tick={TICK_STYLE}
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={function (v) { return v >= 1000 ? (v / 1000).toFixed(0) + "k" : String(v); }}
+        />
+        <ZAxis dataKey="z" range={[20, 300]} />
+        <Tooltip content={<CustomTooltip />} cursor={{ strokeDasharray: "3 3", stroke: GRID_COLOR }} />
+        {byProject.map(function (group) {
+          return (
+            <Scatter
+              key={group.project}
+              name={group.project}
+              data={group.points}
+              fill={group.color}
+              fillOpacity={0.7}
+            />
+          );
+        })}
+      </ScatterChart>
+    </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.5.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>",