@cryptiklemur/lattice 1.10.3 → 1.11.0

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

@@ -1,7 +1,13 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, createContext, useContext } from "react";
 import { Maximize2, Minimize2 } from "lucide-react";
 import type { ReactNode } from "react";
 
+var ChartFullscreenContext = createContext(false);
+
+export function useChartFullscreen(): boolean {
+  return useContext(ChartFullscreenContext);
+}
+
 interface ChartCardProps {
   title: string;
   children: ReactNode;
@@ -145,7 +151,9 @@ export function ChartCard(props: ChartCardProps) {
               </div>
             </div>
             <div className="flex-1 p-6 overflow-auto min-h-0 fullscreen-chart-container">
-              {props.children}
+              <ChartFullscreenContext.Provider value={true}>
+                {props.children}
+              </ChartFullscreenContext.Provider>
             </div>
           </div>
         </div>

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

@@ -7,6 +7,7 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from "recharts";
+import { useChartFullscreen } from "../ChartCard";
 
 var TICK_STYLE = {
   fontSize: 10,
@@ -36,12 +37,13 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CacheEfficiencyChart({ data }: CacheEfficiencyChartProps) {
+  var isFullscreen = useChartFullscreen();
   var displayData = data.map(function (d) {
     return { date: d.date, rate: d.rate * 100 };
   });
 
   return (
-    <ResponsiveContainer width="100%" height={200}>
+    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 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

@@ -7,6 +7,7 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from "recharts";
+import { useChartFullscreen } from "../ChartCard";
 
 var TICK_STYLE = {
   fontSize: 10,
@@ -53,6 +54,7 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 }
 
 export function ContextUtilizationChart({ data }: ContextUtilizationChartProps) {
+  var isFullscreen = 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];
@@ -84,7 +86,7 @@ export function ContextUtilizationChart({ data }: ContextUtilizationChartProps)
   }
 
   return (
-    <ResponsiveContainer width="100%" height={200}>
+    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 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

@@ -7,6 +7,7 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from "recharts";
+import { useChartFullscreen } from "../ChartCard";
 
 var TICK_STYLE = {
   fontSize: 10,
@@ -48,8 +49,9 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CostAreaChart({ data }: CostAreaChartProps) {
+  var isFullscreen = useChartFullscreen();
   return (
-    <ResponsiveContainer width="100%" height={200}>
+    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 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

@@ -7,6 +7,7 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from "recharts";
+import { useChartFullscreen } from "../ChartCard";
 
 var TICK_STYLE = {
   fontSize: 10,
@@ -36,8 +37,9 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CostDistributionChart({ data }: CostDistributionChartProps) {
+  var isFullscreen = useChartFullscreen();
   return (
-    <ResponsiveContainer width="100%" height={200}>
+    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 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

@@ -1,4 +1,5 @@
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
+import { useChartFullscreen } from "../ChartCard";
 
 var MODEL_COLORS: Record<string, string> = {
   opus: "#a855f7",
@@ -52,9 +53,10 @@ function CenterLabel({ totalCost }: { totalCost: number }) {
 }
 
 export function CostDonutChart({ modelUsage, totalCost }: CostDonutChartProps) {
+  var isFullscreen = useChartFullscreen();
   return (
     <div>
-      <ResponsiveContainer width="100%" height={200}>
+      <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 200}>
         <PieChart>
           <Pie
             data={modelUsage}

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

@@ -7,6 +7,7 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from "recharts";
+import { useChartFullscreen } from "../ChartCard";
 
 var TICK_STYLE = {
   fontSize: 10,
@@ -36,8 +37,9 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CumulativeCostChart({ data }: CumulativeCostChartProps) {
+  var isFullscreen = useChartFullscreen();
   return (
-    <ResponsiveContainer width="100%" height={200}>
+    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 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

@@ -7,6 +7,7 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from "recharts";
+import { useChartFullscreen } from "../ChartCard";
 
 var TICK_STYLE = {
   fontSize: 10,
@@ -49,6 +50,7 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 }
 
 export function ResponseTimeScatter({ data }: ResponseTimeScatterProps) {
+  var isFullscreen = useChartFullscreen();
   var models = Array.from(new Set(data.map(function (d) { return d.model; })));
 
   var byModel = models.map(function (model) {
@@ -62,7 +64,7 @@ export function ResponseTimeScatter({ data }: ResponseTimeScatterProps) {
   });
 
   return (
-    <ResponsiveContainer width="100%" height={200}>
+    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 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

@@ -8,6 +8,7 @@ import {
   ResponsiveContainer,
   ZAxis,
 } from "recharts";
+import { useChartFullscreen } from "../ChartCard";
 
 var TICK_STYLE = {
   fontSize: 10,
@@ -62,6 +63,7 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 }
 
 export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
+  var isFullscreen = useChartFullscreen();
   var projects = Array.from(new Set(data.map(function (d) { return d.project; })));
 
   function getColor(project: string): string {
@@ -83,7 +85,7 @@ export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
   var maxTs = Math.max(...data.map(function (d) { return d.timestamp; }));
 
   return (
-    <ResponsiveContainer width="100%" height={200}>
+    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 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

@@ -7,6 +7,7 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from "recharts";
+import { useChartFullscreen } from "../ChartCard";
 
 var TICK_STYLE = {
   fontSize: 10,
@@ -52,8 +53,9 @@ function formatTokens(v: number): string {
 }
 
 export function TokenFlowChart({ data }: TokenFlowChartProps) {
+  var isFullscreen = useChartFullscreen();
   return (
-    <ResponsiveContainer width="100%" height={200}>
+    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 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

@@ -1,4 +1,5 @@
 import { Sankey, Tooltip, ResponsiveContainer } from "recharts";
+import { useChartFullscreen } from "../ChartCard";
 
 var NODE_COLORS: Record<string, string> = {
   "Input Tokens": "oklch(55% 0.25 280)",
@@ -64,6 +65,7 @@ function SankeyNode({ x, y, width, height, index, payload }: { x: number; y: num
 }
 
 export function TokenSankeyChart({ data }: TokenSankeyChartProps) {
+  var isFullscreen = 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]">
@@ -73,7 +75,7 @@ export function TokenSankeyChart({ data }: TokenSankeyChartProps) {
   }
 
   return (
-    <ResponsiveContainer width="100%" height={250}>
+    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 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

@@ -1,4 +1,5 @@
 import { Treemap, ResponsiveContainer, Tooltip } from "recharts";
+import { useChartFullscreen } from "../ChartCard";
 
 interface ToolTreemapProps {
   data: Array<{ name: string; count: number; avgCost: number }>;
@@ -76,6 +77,7 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 }
 
 export function ToolTreemap({ data }: ToolTreemapProps) {
+  var isFullscreen = useChartFullscreen();
   if (!data || data.length === 0) {
     return (
       <div className="flex items-center justify-center h-[250px] text-base-content/25 font-mono text-[11px]">
@@ -94,7 +96,7 @@ export function ToolTreemap({ data }: ToolTreemapProps) {
   });
 
   return (
-    <ResponsiveContainer width="100%" height={250}>
+    <ResponsiveContainer width="100%" height={isFullscreen ? "100%" : 250}>
       <Treemap
         data={treemapData}
         dataKey="size"

package/package.json

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