@cryptiklemur/lattice 1.23.0 → 1.23.2

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

@@ -3,19 +3,25 @@ import { BarChart3 } from "lucide-react";
 import { useAnalytics } from "../../hooks/useAnalytics";
 import { useMesh } from "../../hooks/useMesh";
 
-class ChartErrorBoundary extends Component<{ children: React.ReactNode; name: string }, { error: Error | null }> {
+class ChartErrorBoundary extends Component<{ children: React.ReactNode; name: string }, { hasError: boolean }> {
   constructor(props: { children: React.ReactNode; name: string }) {
     super(props);
-    this.state = { error: null };
+    this.state = { hasError: false };
   }
-  static getDerivedStateFromError(error: Error) {
-    return { error: error };
+  static getDerivedStateFromError() {
+    return { hasError: true };
   }
   render() {
-    if (this.state.error) {
+    if (this.state.hasError) {
       return (
-        <div className="flex items-center justify-center h-[200px] text-base-content/25 font-mono text-[11px]">
-          Chart error: {this.props.name}
+        <div className="flex flex-col items-center justify-center h-[200px] gap-3">
+          <span className="text-base-content/30 font-mono text-[12px]">Unable to load chart</span>
+          <button
+            onClick={() => this.setState({ hasError: false })}
+            className="text-[11px] font-mono text-primary/60 hover:text-primary transition-colors cursor-pointer px-3 py-1 rounded-md border border-primary/20 hover:border-primary/40"
+          >
+            Retry
+          </button>
         </div>
       );
     }
@@ -26,9 +32,9 @@ class ChartErrorBoundary extends Component<{ children: React.ReactNode; name: st
 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 className="h-px flex-1 bg-base-content/10" />
+      <span className="text-[10px] font-mono font-bold uppercase tracking-[0.15em] text-base-content/40">{props.label}</span>
+      <div className="h-px flex-1 bg-base-content/10" />
     </div>
   );
 }
@@ -55,15 +61,15 @@ import { SessionComplexityList } from "./charts/SessionComplexityList";
 import { NodeFleetOverview } from "./charts/NodeFleetOverview";
 
 export function AnalyticsView() {
-  var analytics = useAnalytics();
-  var mesh = useMesh();
-  var nodes = mesh.nodes;
+  const analytics = useAnalytics();
+  const mesh = useMesh();
+  const nodes = mesh.nodes;
 
   return (
     <div className="flex flex-col h-full overflow-hidden bg-base-100 bg-lattice-grid">
       <div className="flex items-center justify-between px-2 sm:px-4 min-h-10 sm:min-h-12 border-b border-base-300 flex-shrink-0">
         <div className="flex items-center gap-2.5">
-          <h1 className="text-sm font-mono font-semibold text-base-content">Analytics</h1>
+          <h1 className="text-[17px] font-mono font-bold text-base-content">Analytics</h1>
           {analytics.loading && analytics.data && (
             <span className="w-3.5 h-3.5 border-2 border-base-content/15 border-t-primary/60 rounded-full animate-spin" />
           )}
@@ -71,7 +77,7 @@ export function AnalyticsView() {
         <PeriodSelector value={analytics.period} onChange={analytics.setPeriod} />
       </div>
 
-      <div className={"flex-1 overflow-y-auto px-6 py-4 transition-opacity duration-200 " + (analytics.loading && analytics.data ? "opacity-50" : "opacity-100")}>
+      <div className={"flex-1 overflow-y-auto px-3 py-3 sm:px-6 sm:py-4 transition-opacity duration-200 " + (analytics.loading && analytics.data ? "opacity-50" : "opacity-100")}>
         {analytics.loading && !analytics.data && (
           <div className="flex flex-col gap-4 max-w-[1200px] mx-auto">
             <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
@@ -98,24 +104,34 @@ export function AnalyticsView() {
             <SectionHeader label="Cost" />
 
             <ChartCard title="Cost Over Time">
-              <CostAreaChart data={analytics.data.costOverTime} />
+              <ChartErrorBoundary name="CostArea">
+                <CostAreaChart data={analytics.data.costOverTime} />
+              </ChartErrorBoundary>
             </ChartCard>
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <ChartCard title="Cost Breakdown">
-                <CostDonutChart modelUsage={analytics.data.modelUsage} totalCost={analytics.data.totalCost} />
+                <ChartErrorBoundary name="CostDonut">
+                  <CostDonutChart modelUsage={analytics.data.modelUsage} totalCost={analytics.data.totalCost} />
+                </ChartErrorBoundary>
               </ChartCard>
               <ChartCard title="Cumulative Cost">
-                <CumulativeCostChart data={analytics.data.cumulativeCost} />
+                <ChartErrorBoundary name="CumulativeCost">
+                  <CumulativeCostChart data={analytics.data.cumulativeCost} />
+                </ChartErrorBoundary>
               </ChartCard>
             </div>
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <ChartCard title="Cost Distribution">
-                <CostDistributionChart data={analytics.data.costDistribution} />
+                <ChartErrorBoundary name="CostDistribution">
+                  <CostDistributionChart data={analytics.data.costDistribution} />
+                </ChartErrorBoundary>
               </ChartCard>
               <ChartCard title="Session Costs">
-                <SessionBubbleChart data={analytics.data.sessionBubbles} />
+                <ChartErrorBoundary name="SessionBubble">
+                  <SessionBubbleChart data={analytics.data.sessionBubbles} />
+                </ChartErrorBoundary>
               </ChartCard>
             </div>
 
@@ -182,13 +198,11 @@ export function AnalyticsView() {
 
             <SectionHeader label="Projects" />
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <ChartCard title="Project Comparison">
-                <ChartErrorBoundary name="Radar">
-                  <ProjectRadar data={analytics.data.projectRadar} />
-                </ChartErrorBoundary>
-              </ChartCard>
-            </div>
+            <ChartCard title="Project Comparison">
+              <ChartErrorBoundary name="Radar">
+                <ProjectRadar data={analytics.data.projectRadar} />
+              </ChartErrorBoundary>
+            </ChartCard>
 
             <ChartCard title="Session Complexity">
               <ChartErrorBoundary name="Complexity">

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

@@ -3,14 +3,14 @@ import { useFocusTrap } from "../../hooks/useFocusTrap";
 import { Maximize2, Minimize2 } from "lucide-react";
 import type { ReactNode } from "react";
 
-var ChartFullscreenContext = createContext<number | false>(false);
+const ChartFullscreenContext = createContext<number | false>(false);
 
 export function useChartFullscreen(): number | false {
   return useContext(ChartFullscreenContext);
 }
 
 function useViewportChartHeight(): number {
-  var [h, setH] = useState(Math.round(window.innerHeight * 0.5));
+  const [h, setH] = useState(Math.round(window.innerHeight * 0.5));
   useEffect(function () {
     function onResize() { setH(Math.round(window.innerHeight * 0.5)); }
     window.addEventListener("resize", onResize);
@@ -27,13 +27,13 @@ interface ChartCardProps {
 }
 
 export function ChartCard(props: ChartCardProps) {
-  var [isFullscreen, setIsFullscreen] = useState(false);
-  var chartHeight = useViewportChartHeight();
-  var cardRef = useRef<HTMLDivElement>(null);
-  var [originRect, setOriginRect] = useState<DOMRect | null>(null);
-  var [animating, setAnimating] = useState(false);
-  var fullscreenModalRef = useRef<HTMLDivElement>(null);
-  var closeFullscreenCb = useCallback(function () { closeFullscreen(); }, []);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const chartHeight = useViewportChartHeight();
+  const cardRef = useRef<HTMLDivElement>(null);
+  const [originRect, setOriginRect] = useState<DOMRect | null>(null);
+  const [animating, setAnimating] = useState(false);
+  const fullscreenModalRef = useRef<HTMLDivElement>(null);
+  const closeFullscreenCb = useCallback(function () { closeFullscreen(); }, []);
   useFocusTrap(fullscreenModalRef, closeFullscreenCb, isFullscreen);
 
   function openFullscreen() {
@@ -67,10 +67,10 @@ export function ChartCard(props: ChartCardProps) {
     return function () { document.body.style.overflow = ""; };
   }, [isFullscreen]);
 
-  var cardContent = (
+  const cardContent = (
     <>
-      <div className="flex items-center justify-between mb-4">
-        <span className="text-[10px] font-mono font-bold uppercase tracking-widest text-base-content/35">
+      <div className="flex items-center justify-between mb-3 sm:mb-4">
+        <span className="text-[11px] font-mono font-bold uppercase tracking-wider text-base-content/40">
           {props.title}
         </span>
         <div className="flex items-center gap-2">
@@ -91,17 +91,19 @@ export function ChartCard(props: ChartCardProps) {
           </button>
         </div>
       </div>
-      {props.children}
+      <div role="img" aria-label={props.title}>
+        {props.children}
+      </div>
     </>
   );
 
   if (isFullscreen) {
-    var overlayStyle: React.CSSProperties = {
+    const overlayStyle: React.CSSProperties = {
       transition: "opacity 250ms cubic-bezier(0.4, 0, 0.2, 1)",
       opacity: animating ? 0 : 1,
     };
 
-    var modalStyle: React.CSSProperties = {
+    const modalStyle: React.CSSProperties = {
       transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1)",
     };
 
@@ -118,7 +120,8 @@ export function ChartCard(props: ChartCardProps) {
       <>
         <div
           ref={cardRef}
-          className={"rounded-xl border border-base-content/8 bg-base-300/50 p-4 invisible " + (props.className || "")}
+          aria-label={props.title}
+          className={"rounded-xl border border-base-content/8 bg-base-300/50 p-3 sm:p-4 invisible " + (props.className || "")}
         >
           {cardContent}
         </div>
@@ -176,7 +179,8 @@ export function ChartCard(props: ChartCardProps) {
   return (
     <div
       ref={cardRef}
-      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 || "")}
+      aria-label={props.title}
+      className={"group rounded-xl border border-base-content/8 bg-base-300/50 p-3 sm:p-4 cursor-pointer hover:border-base-content/12 transition-all duration-200 " + (props.className || "")}
     >
       {cardContent}
     </div>

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

@@ -1,6 +1,6 @@
 type Period = "24h" | "7d" | "30d" | "90d" | "all";
 
-var PERIODS: Array<{ value: Period; label: string }> = [
+const PERIODS: Array<{ value: Period; label: string }> = [
   { value: "24h", label: "24h" },
   { value: "7d", label: "7d" },
   { value: "30d", label: "30d" },
@@ -17,7 +17,7 @@ export function PeriodSelector({ value, onChange }: PeriodSelectorProps) {
   return (
     <div role="radiogroup" aria-label="Time period" className="flex items-center gap-1">
       {PERIODS.map(function (period) {
-        var isActive = period.value === value;
+        const isActive = period.value === value;
         return (
           <button
             key={period.value}
@@ -25,7 +25,7 @@ export function PeriodSelector({ value, onChange }: PeriodSelectorProps) {
             aria-checked={isActive}
             onClick={function () { onChange(period.value); }}
             className={[
-              "px-2.5 py-1 rounded-md border text-[10px] font-mono font-bold uppercase tracking-widest transition-colors",
+              "min-h-[44px] min-w-[36px] px-3 py-2.5 sm:px-2.5 sm:py-1 rounded-md border text-[10px] font-mono font-bold uppercase tracking-widest transition-colors",
               isActive
                 ? "bg-primary/15 text-primary border-primary/30"
                 : "text-base-content/35 border-base-content/8 hover:text-base-content/60 hover:border-base-content/20",

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

@@ -31,7 +31,7 @@ function Sparkline({ data, stroke }: SparklineProps) {
 }
 
 export function QuickStats() {
-  var analytics = useAnalytics();
+  const analytics = useAnalytics();
 
   if (!analytics.data) {
     return (
@@ -48,48 +48,67 @@ export function QuickStats() {
     );
   }
 
-  var d = analytics.data;
-  var colors = getChartColors();
+  const d = analytics.data;
+  const colors = getChartColors();
 
-  var costSparkData = d.costOverTime.slice(-7).map(function (e: typeof d.costOverTime[number]) { return { v: e.total }; });
-  var sessionsSparkData = d.sessionsOverTime.slice(-7).map(function (e: typeof d.sessionsOverTime[number]) { return { v: e.count }; });
-  var tokensSparkData = d.tokensOverTime.slice(-7).map(function (e: typeof d.tokensOverTime[number]) { return { v: e.input + e.output }; });
+  const costSparkData = d.costOverTime.slice(-7).map(function (e: typeof d.costOverTime[number]) { return { v: e.total }; });
+  const sessionsSparkData = d.sessionsOverTime.slice(-7).map(function (e: typeof d.sessionsOverTime[number]) { return { v: e.count }; });
+  const tokensSparkData = d.tokensOverTime.slice(-7).map(function (e: typeof d.tokensOverTime[number]) { return { v: e.input + e.output }; });
 
-  var totalTokens = d.totalTokens.input + d.totalTokens.output;
-  var cacheHitPct = Math.round(d.cacheHitRate * 100);
+  const totalTokens = d.totalTokens.input + d.totalTokens.output;
+  const cacheHitPct = Math.round(d.cacheHitRate * 100);
 
   return (
     <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
       <div className="bg-base-content/[0.03] border border-base-content/8 rounded-xl p-3.5">
         <div className="flex items-center justify-between mb-1">
-          <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/35">Cost</span>
-          {costSparkData.length > 1 && <Sparkline data={costSparkData} stroke={colors.primary} />}
+          <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40">Cost</span>
+          {costSparkData.length > 1 && (
+            <div role="img" aria-label={"Cost trend: " + (costSparkData[costSparkData.length - 1].v > costSparkData[0].v ? "increasing" : costSparkData[costSparkData.length - 1].v < costSparkData[0].v ? "decreasing" : "stable")}>
+              <Sparkline data={costSparkData} stroke={colors.primary} />
+            </div>
+          )}
         </div>
-        <div className="text-[22px] font-mono text-base-content/85">${d.totalCost.toFixed(2)}</div>
+        <div className="text-[20px] font-mono text-base-content">${d.totalCost.toFixed(2)}</div>
       </div>
 
       <div className="bg-base-content/[0.03] border border-base-content/8 rounded-xl p-3.5">
         <div className="flex items-center justify-between mb-1">
-          <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/35">Sessions</span>
-          {sessionsSparkData.length > 1 && <Sparkline data={sessionsSparkData} stroke={colors.success} />}
+          <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40">Sessions</span>
+          {sessionsSparkData.length > 1 && (
+            <div role="img" aria-label={"Sessions trend: " + (sessionsSparkData[sessionsSparkData.length - 1].v > sessionsSparkData[0].v ? "increasing" : sessionsSparkData[sessionsSparkData.length - 1].v < sessionsSparkData[0].v ? "decreasing" : "stable")}>
+              <Sparkline data={sessionsSparkData} stroke={colors.success} />
+            </div>
+          )}
         </div>
-        <div className="text-[22px] font-mono text-base-content/85">{d.totalSessions}</div>
+        <div className="text-[20px] font-mono text-base-content">{d.totalSessions}</div>
       </div>
 
       <div className="bg-base-content/[0.03] border border-base-content/8 rounded-xl p-3.5">
         <div className="flex items-center justify-between mb-1">
-          <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/35">Tokens</span>
-          {tokensSparkData.length > 1 && <Sparkline data={tokensSparkData} stroke={colors.warning} />}
+          <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40">Tokens</span>
+          {tokensSparkData.length > 1 && (
+            <div role="img" aria-label={"Tokens trend: " + (tokensSparkData[tokensSparkData.length - 1].v > tokensSparkData[0].v ? "increasing" : tokensSparkData[tokensSparkData.length - 1].v < tokensSparkData[0].v ? "decreasing" : "stable")}>
+              <Sparkline data={tokensSparkData} stroke={colors.warning} />
+            </div>
+          )}
         </div>
-        <div className="text-[22px] font-mono text-base-content/85">{formatTokens(totalTokens)}</div>
+        <div className="text-[20px] font-mono text-base-content">{formatTokens(totalTokens)}</div>
       </div>
 
       <div className="bg-base-content/[0.03] border border-base-content/8 rounded-xl p-3.5">
         <div className="mb-1">
-          <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/35">Cache Hit</span>
+          <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40">Cache Hit</span>
         </div>
-        <div className="text-[22px] font-mono text-base-content/85 mb-2">{cacheHitPct}%</div>
-        <div className="w-full h-1 rounded-full bg-base-content/10 overflow-hidden">
+        <div className="text-[20px] font-mono text-base-content mb-2">{cacheHitPct}%</div>
+        <div
+          className="w-full h-1 rounded-full bg-base-content/10 overflow-hidden"
+          role="progressbar"
+          aria-valuenow={cacheHitPct}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-label="Cache hit rate"
+        >
           <div
             className="h-full rounded-full bg-primary transition-all duration-300"
             style={{ width: cacheHitPct + "%" }}

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

@@ -59,7 +59,7 @@ export function ActivityCalendar({ data }: ActivityCalendarProps) {
   if (!data || data.length === 0) {
     return (
       <div className="flex items-center justify-center h-[120px] text-base-content/25 font-mono text-[11px]">
-        No data
+        No data for this period
       </div>
     );
   }

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

@@ -30,15 +30,15 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CacheEfficiencyChart({ data }: CacheEfficiencyChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
-  var displayData = data.map(function (d) {
+  constfullscreenHeight = useChartFullscreen();
+  constcolors = getChartColors();
+  constdisplayData = data.map(function (d) {
     return { date: d.date, rate: d.rate * 100 };
   });
 
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={displayData} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+      <AreaChart data={displayData} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
         <defs>
           <linearGradient id="cacheEffGrad" x1="0" y1="0" x2="0" y2="1">
             <stop offset="5%" stopColor={colors.success} stopOpacity={0.8} />

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

@@ -42,11 +42,11 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CostAreaChart({ data }: CostAreaChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
+  constfullscreenHeight = useChartFullscreen();
+  constcolors = getChartColors();
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
         <defs>
           <linearGradient id="opusGrad" x1="0" y1="0" x2="0" y2="1">
             <stop offset="5%" stopColor={colors.secondary} stopOpacity={0.8} />

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

@@ -30,11 +30,11 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CostDistributionChart({ data }: CostDistributionChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
+  constfullscreenHeight = useChartFullscreen();
+  constcolors = getChartColors();
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
         <defs>
           <linearGradient id="distGrad" x1="0" y1="0" x2="0" y2="1">
             <stop offset="5%" stopColor={colors.primary} stopOpacity={0.8} />

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

@@ -30,11 +30,11 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CumulativeCostChart({ data }: CumulativeCostChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
+  constfullscreenHeight = useChartFullscreen();
+  constcolors = getChartColors();
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
         <defs>
           <linearGradient id="cumulativeGrad" x1="0" y1="0" x2="0" y2="1">
             <stop offset="5%" stopColor={colors.primary} stopOpacity={0.7} />

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

@@ -14,14 +14,14 @@ interface DailySummaryCardsProps {
 }
 
 function formatCardDate(dateStr: string): string {
-  var d = new Date(dateStr + "T00:00:00");
-  var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const d = new Date(dateStr + "T00:00:00");
+  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
   return days[d.getDay()] + " " + (d.getMonth() + 1) + "/" + d.getDate();
 }
 
 export function DailySummaryCards({ data }: DailySummaryCardsProps) {
-  var colors = getChartColors();
-  var MODEL_COLORS: Record<string, string> = {
+  const colors = getChartColors();
+  const MODEL_COLORS: Record<string, string> = {
     opus: colors.model.opus,
     sonnet: colors.model.sonnet,
     haiku: colors.model.haiku,
@@ -30,28 +30,28 @@ export function DailySummaryCards({ data }: DailySummaryCardsProps) {
   if (!data || data.length === 0) {
     return (
       <div className="flex items-center justify-center h-[100px] text-base-content/25 font-mono text-[11px]">
-        No data
+        No data for this period
       </div>
     );
   }
 
-  var reversed = data.slice().reverse();
+  const reversed = data.slice().reverse();
 
   return (
     <div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-2 scrollbar-thin">
       {reversed.map(function (d) {
-        var mixEntries = Object.entries(d.modelMix);
+        const mixEntries = Object.entries(d.modelMix);
 
         return (
           <div
             key={d.date}
             className="flex-shrink-0 snap-start rounded-lg bg-base-300 border border-base-content/5 px-3 py-2.5 w-[140px]"
           >
-            <p className="text-[11px] font-mono font-bold text-base-content/60 mb-1.5">
+            <p className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40 mb-1.5">
               {formatCardDate(d.date)}
             </p>
 
-            <div className="text-[10px] font-mono text-base-content/50 space-y-0.5">
+            <div className="text-[11px] font-mono text-base-content space-y-0.5">
               <p><span className="text-base-content/30">sessions </span>{d.sessions}</p>
               <p><span className="text-base-content/30">cost </span>${d.cost.toFixed(2)}</p>
               {d.topTool && (
@@ -62,8 +62,8 @@ export function DailySummaryCards({ data }: DailySummaryCardsProps) {
             {mixEntries.length > 0 && (
               <div className="mt-2 h-[4px] rounded-full overflow-hidden flex bg-base-content/5">
                 {mixEntries.map(function (entry) {
-                  var model = entry[0];
-                  var pct = entry[1];
+                  const model = entry[0];
+                  const pct = entry[1];
                   if (pct <= 0) return null;
                   return (
                     <div

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

@@ -29,7 +29,7 @@ export function HourlyHeatmap({ data }: HourlyHeatmapProps) {
   if (!data || data.length === 0) {
     return (
       <div className="flex items-center justify-center h-[200px] text-base-content/25 font-mono text-[11px]">
-        No data
+        No data for this period
       </div>
     );
   }

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

@@ -13,11 +13,12 @@ export function SessionComplexityList({ data }: SessionComplexityListProps) {
     );
   }
 
-  var maxScore = data.length > 0 ? data[0].score : 1;
+  const maxScore = data.length > 0 ? data[0].score : 1;
 
   return (
-    <div className="flex flex-col gap-1 max-h-[400px] overflow-y-auto">
-      <div className="grid grid-cols-[2.5rem_1fr_4rem_3rem_3rem_3.5rem] gap-2 px-2 py-1 text-[9px] font-mono text-base-content/30 uppercase tracking-wider">
+    <div className="overflow-x-auto">
+    <div className="flex flex-col gap-1 max-h-[400px] overflow-y-auto min-w-[370px]">
+      <div className="grid grid-cols-[2.5rem_1fr_4rem_3rem_3rem_3.5rem] gap-2 px-2 py-1 text-[10px] font-mono text-base-content/30 uppercase tracking-wider">
         <span>Rank</span>
         <span>Session</span>
         <span className="text-right">Score</span>
@@ -58,5 +59,6 @@ export function SessionComplexityList({ data }: SessionComplexityListProps) {
         );
       })}
     </div>
+    </div>
   );
 }

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

@@ -33,7 +33,7 @@ export function SessionTimeline({ data }: SessionTimelineProps) {
   if (!data || data.length === 0) {
     return (
       <div className="flex items-center justify-center h-[200px] text-base-content/25 font-mono text-[11px]">
-        No data
+        No data for this period
       </div>
     );
   }

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

@@ -46,11 +46,11 @@ function formatTokens(v: number): string {
 }
 
 export function TokenFlowChart({ data }: TokenFlowChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
+  constfullscreenHeight = useChartFullscreen();
+  constcolors = getChartColors();
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
         <defs>
           <linearGradient id="inputGrad" x1="0" y1="0" x2="0" y2="1">
             <stop offset="5%" stopColor={colors.primary} stopOpacity={0.8} />

package/package.json

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