@cryptiklemur/lattice 1.11.0 → 1.11.1

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

@@ -1,4 +1,5 @@
 import { Component } from "react";
+import { BarChart3 } from "lucide-react";
 import { useAnalytics } from "../../hooks/useAnalytics";
 import { useMesh } from "../../hooks/useMesh";
 
@@ -21,8 +22,20 @@ class ChartErrorBoundary extends Component<{ children: React.ReactNode; name: st
     return this.props.children;
   }
 }
+
+function SectionHeader(props: { label: string }) {
+  return (
+    <div className="flex items-center gap-3 pt-4 pb-1">
+      <div className="h-px flex-1 bg-base-content/6" />
+      <span className="text-[9px] font-mono font-bold uppercase tracking-[0.15em] text-base-content/20">{props.label}</span>
+      <div className="h-px flex-1 bg-base-content/6" />
+    </div>
+  );
+}
+
 import { PeriodSelector } from "./PeriodSelector";
 import { ChartCard } from "./ChartCard";
+import { QuickStats } from "./QuickStats";
 import { CostAreaChart } from "./charts/CostAreaChart";
 import { CumulativeCostChart } from "./charts/CumulativeCostChart";
 import { CostDonutChart } from "./charts/CostDonutChart";
@@ -58,7 +71,18 @@ export function AnalyticsView() {
 
       <div className="flex-1 overflow-y-auto px-6 py-4">
         {analytics.loading && !analytics.data && (
-          <div className="text-center text-base-content/30 py-20 font-mono text-[13px]">Loading analytics...</div>
+          <div className="flex flex-col gap-4 max-w-[1200px] mx-auto">
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+              {[0, 1, 2, 3].map(function (i) {
+                return <div key={i} className="h-24 rounded-xl bg-base-content/[0.03] animate-pulse" />;
+              })}
+            </div>
+            <div className="h-[240px] rounded-xl bg-base-content/[0.03] animate-pulse" />
+            <div className="grid grid-cols-2 gap-4">
+              <div className="h-[240px] rounded-xl bg-base-content/[0.03] animate-pulse" />
+              <div className="h-[240px] rounded-xl bg-base-content/[0.03] animate-pulse" />
+            </div>
+          </div>
         )}
 
         {analytics.error && (
@@ -67,6 +91,10 @@ export function AnalyticsView() {
 
         {analytics.data && (
           <div className="flex flex-col gap-4 max-w-[1200px] mx-auto pb-8">
+            <QuickStats />
+
+            <SectionHeader label="Cost" />
+
             <ChartCard title="Cost Over Time">
               <CostAreaChart data={analytics.data.costOverTime} />
             </ChartCard>
@@ -89,6 +117,8 @@ export function AnalyticsView() {
               </ChartCard>
             </div>
 
+            <SectionHeader label="Tokens & Performance" />
+
             <ChartCard title="Token Flow">
               <ChartErrorBoundary name="TokenFlow">
                 <TokenFlowChart data={analytics.data.tokensOverTime} />
@@ -121,6 +151,8 @@ export function AnalyticsView() {
               </ChartCard>
             </div>
 
+            <SectionHeader label="Activity" />
+
             <ChartCard title="Activity Calendar">
               <ChartErrorBoundary name="Calendar">
                 <ActivityCalendar data={analytics.data.activityCalendar} />
@@ -146,6 +178,8 @@ export function AnalyticsView() {
               </ChartErrorBoundary>
             </ChartCard>
 
+            <SectionHeader label="Tools & Projects" />
+
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <ChartCard title="Tool Usage (Treemap)">
                 <ChartErrorBoundary name="Treemap">
@@ -178,6 +212,8 @@ export function AnalyticsView() {
               </ChartErrorBoundary>
             </ChartCard>
 
+            <SectionHeader label="Fleet" />
+
             <ChartCard title="Node Fleet">
               <ChartErrorBoundary name="Fleet">
                 <NodeFleetOverview nodes={nodes} />
@@ -187,7 +223,13 @@ export function AnalyticsView() {
         )}
 
         {!analytics.loading && !analytics.error && !analytics.data && (
-          <div className="text-center text-base-content/30 py-20 font-mono text-[13px]">No analytics data yet</div>
+          <div className="flex flex-col items-center justify-center py-24 gap-4">
+            <BarChart3 size={40} className="text-base-content/10" />
+            <div className="text-center">
+              <p className="text-[14px] font-mono text-base-content/40">No analytics data yet</p>
+              <p className="text-[12px] text-base-content/25 mt-1">Start a Claude session to begin tracking usage</p>
+            </div>
+          </div>
         )}
       </div>
     </div>

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

@@ -2,12 +2,39 @@ import { useState, useEffect, useRef, createContext, useContext } from "react";
 import { Maximize2, Minimize2 } from "lucide-react";
 import type { ReactNode } from "react";
 
-var ChartFullscreenContext = createContext(false);
+var ChartFullscreenContext = createContext<number | false>(false);
 
-export function useChartFullscreen(): boolean {
+export function useChartFullscreen(): number | false {
   return useContext(ChartFullscreenContext);
 }
 
+function FullscreenChartArea(props: { children: ReactNode }) {
+  var containerRef = useRef<HTMLDivElement>(null);
+  var [height, setHeight] = useState(400);
+
+  useEffect(function () {
+    if (!containerRef.current) return;
+    var observer = new ResizeObserver(function (entries) {
+      for (var i = 0; i < entries.length; i++) {
+        var h = entries[i].contentRect.height;
+        if (h > 0) setHeight(h);
+      }
+    });
+    observer.observe(containerRef.current);
+    var h = containerRef.current.clientHeight;
+    if (h > 0) setHeight(h);
+    return function () { observer.disconnect(); };
+  }, []);
+
+  return (
+    <div ref={containerRef} className="flex-1 p-6 overflow-auto min-h-0">
+      <ChartFullscreenContext.Provider value={height - 48}>
+        {props.children}
+      </ChartFullscreenContext.Provider>
+    </div>
+  );
+}
+
 interface ChartCardProps {
   title: string;
   children: ReactNode;
@@ -77,7 +104,7 @@ export function ChartCard(props: ChartCardProps) {
                 openFullscreen();
               }
             }}
-            className="text-base-content/20 hover:text-base-content/50 transition-colors cursor-pointer p-0.5 rounded hover:bg-base-content/5"
+            className="opacity-0 group-hover:opacity-100 text-base-content/20 hover:text-base-content/50 transition-all duration-200 cursor-pointer p-0.5 rounded hover:bg-base-content/5"
             aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
             title={isFullscreen ? "Exit fullscreen (Esc)" : "Fullscreen"}
           >
@@ -150,11 +177,9 @@ export function ChartCard(props: ChartCardProps) {
                 </button>
               </div>
             </div>
-            <div className="flex-1 p-6 overflow-auto min-h-0 fullscreen-chart-container">
-              <ChartFullscreenContext.Provider value={true}>
-                {props.children}
-              </ChartFullscreenContext.Provider>
-            </div>
+            <FullscreenChartArea>
+              {props.children}
+            </FullscreenChartArea>
           </div>
         </div>
       </>
@@ -164,7 +189,7 @@ export function ChartCard(props: ChartCardProps) {
   return (
     <div
       ref={cardRef}
-      className={"rounded-xl border border-base-content/8 bg-base-300/50 p-4 " + (props.className || "")}
+      className={"group rounded-xl border border-base-content/8 bg-base-300/50 p-4 cursor-pointer hover:border-base-content/12 transition-all duration-200 " + (props.className || "")}
     >
       {cardContent}
     </div>

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

@@ -37,13 +37,13 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CacheEfficiencyChart({ data }: CacheEfficiencyChartProps) {
-  var isFullscreen = useChartFullscreen();
+  var fullscreenHeight = useChartFullscreen();
   var displayData = data.map(function (d) {
     return { date: d.date, rate: d.rate * 100 };
   });
 
   return (
-    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 200}>
+    <ResponsiveContainer width="100%" height={fullscreenHeight || 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">

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

@@ -54,7 +54,7 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 }
 
 export function ContextUtilizationChart({ data }: ContextUtilizationChartProps) {
-  var isFullscreen = useChartFullscreen();
+  var fullscreenHeight = useChartFullscreen();
   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];
@@ -86,7 +86,7 @@ export function ContextUtilizationChart({ data }: ContextUtilizationChartProps)
   }
 
   return (
-    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 200}>
+    <ResponsiveContainer width="100%" height={fullscreenHeight || 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} />

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

@@ -49,9 +49,9 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CostAreaChart({ data }: CostAreaChartProps) {
-  var isFullscreen = useChartFullscreen();
+  var fullscreenHeight = useChartFullscreen();
   return (
-    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 200}>
+    <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
       <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
         <defs>
           <linearGradient id="opusGrad" x1="0" y1="0" x2="0" y2="1">

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

@@ -37,9 +37,9 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CostDistributionChart({ data }: CostDistributionChartProps) {
-  var isFullscreen = useChartFullscreen();
+  var fullscreenHeight = useChartFullscreen();
   return (
-    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 200}>
+    <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
       <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
         <defs>
           <linearGradient id="distGrad" x1="0" y1="0" x2="0" y2="1">

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

@@ -53,10 +53,10 @@ function CenterLabel({ totalCost }: { totalCost: number }) {
 }
 
 export function CostDonutChart({ modelUsage, totalCost }: CostDonutChartProps) {
-  var isFullscreen = useChartFullscreen();
+  var fullscreenHeight = useChartFullscreen();
   return (
     <div>
-      <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 200}>
+      <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
         <PieChart>
           <Pie
             data={modelUsage}

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

@@ -37,9 +37,9 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CumulativeCostChart({ data }: CumulativeCostChartProps) {
-  var isFullscreen = useChartFullscreen();
+  var fullscreenHeight = useChartFullscreen();
   return (
-    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 200}>
+    <ResponsiveContainer width="100%" height={fullscreenHeight || 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">

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

@@ -50,7 +50,7 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 }
 
 export function ResponseTimeScatter({ data }: ResponseTimeScatterProps) {
-  var isFullscreen = useChartFullscreen();
+  var fullscreenHeight = useChartFullscreen();
   var models = Array.from(new Set(data.map(function (d) { return d.model; })));
 
   var byModel = models.map(function (model) {
@@ -64,7 +64,7 @@ export function ResponseTimeScatter({ data }: ResponseTimeScatterProps) {
   });
 
   return (
-    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 200}>
+    <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
       <ScatterChart margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
         <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} />
         <XAxis

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

@@ -63,7 +63,7 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 }
 
 export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
-  var isFullscreen = useChartFullscreen();
+  var fullscreenHeight = useChartFullscreen();
   var projects = Array.from(new Set(data.map(function (d) { return d.project; })));
 
   function getColor(project: string): string {
@@ -85,7 +85,7 @@ export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
   var maxTs = Math.max(...data.map(function (d) { return d.timestamp; }));
 
   return (
-    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 200}>
+    <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
       <ScatterChart margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
         <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} />
         <XAxis

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

@@ -53,9 +53,9 @@ function formatTokens(v: number): string {
 }
 
 export function TokenFlowChart({ data }: TokenFlowChartProps) {
-  var isFullscreen = useChartFullscreen();
+  var fullscreenHeight = useChartFullscreen();
   return (
-    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 200}>
+    <ResponsiveContainer width="100%" height={fullscreenHeight || 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">

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

@@ -65,7 +65,7 @@ function SankeyNode({ x, y, width, height, index, payload }: { x: number; y: num
 }
 
 export function TokenSankeyChart({ data }: TokenSankeyChartProps) {
-  var isFullscreen = useChartFullscreen();
+  var fullscreenHeight = useChartFullscreen();
   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]">
@@ -75,7 +75,7 @@ export function TokenSankeyChart({ data }: TokenSankeyChartProps) {
   }
 
   return (
-    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 250}>
+    <ResponsiveContainer width="100%" height={fullscreenHeight || 250}>
       <Sankey
         data={data}
         node={<SankeyNode x={0} y={0} width={0} height={0} index={0} payload={{ name: "" }} />}

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

@@ -77,7 +77,7 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 }
 
 export function ToolTreemap({ data }: ToolTreemapProps) {
-  var isFullscreen = useChartFullscreen();
+  var fullscreenHeight = useChartFullscreen();
   if (!data || data.length === 0) {
     return (
       <div className="flex items-center justify-center h-[250px] text-base-content/25 font-mono text-[11px]">
@@ -96,7 +96,7 @@ export function ToolTreemap({ data }: ToolTreemapProps) {
   });
 
   return (
-    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 250}>
+    <ResponsiveContainer width="100%" height={fullscreenHeight || 250}>
       <Treemap
         data={treemapData}
         dataKey="size"

package/package.json

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