@cryptiklemur/lattice 1.18.1 → 1.18.3

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

@@ -50,9 +50,6 @@ import { ActivityCalendar } from "./charts/ActivityCalendar";
 import { HourlyHeatmap } from "./charts/HourlyHeatmap";
 import { SessionTimeline } from "./charts/SessionTimeline";
 import { DailySummaryCards } from "./charts/DailySummaryCards";
-import { ToolTreemap } from "./charts/ToolTreemap";
-import { ToolSunburst } from "./charts/ToolSunburst";
-import { PermissionBreakdown } from "./charts/PermissionBreakdown";
 import { ProjectRadar } from "./charts/ProjectRadar";
 import { SessionComplexityList } from "./charts/SessionComplexityList";
 import { NodeFleetOverview } from "./charts/NodeFleetOverview";
@@ -183,27 +180,9 @@ export function AnalyticsView() {
               </ChartErrorBoundary>
             </ChartCard>
 
-            <SectionHeader label="Tools & Projects" />
+            <SectionHeader label="Projects" />
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <ChartCard title="Tool Usage (Treemap)">
-                <ChartErrorBoundary name="Treemap">
-                  <ToolTreemap data={analytics.data.toolTreemap} />
-                </ChartErrorBoundary>
-              </ChartCard>
-              <ChartCard title="Tool Categories">
-                <ChartErrorBoundary name="Sunburst">
-                  <ToolSunburst data={analytics.data.toolSunburst} />
-                </ChartErrorBoundary>
-              </ChartCard>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <ChartCard title="Permissions">
-                <ChartErrorBoundary name="Permissions">
-                  <PermissionBreakdown data={analytics.data.permissionStats} />
-                </ChartErrorBoundary>
-              </ChartCard>
               <ChartCard title="Project Comparison">
                 <ChartErrorBoundary name="Radar">
                   <ProjectRadar data={analytics.data.projectRadar} />

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { getChartColors } from "../chartTokens";
 
 interface CalendarDatum {
@@ -12,11 +12,8 @@ interface ActivityCalendarProps {
   data: CalendarDatum[];
 }
 
-var CELL_SIZE = 11;
-var CELL_GAP = 2;
-var CELL_STEP = CELL_SIZE + CELL_GAP;
 var DAY_LABEL_WIDTH = 28;
-var MONTH_LABEL_HEIGHT = 14;
+var MONTH_LABEL_HEIGHT = 16;
 
 var INTENSITY_OPACITIES = [0.05, 0.15, 0.3, 0.5, 0.8];
 
@@ -46,6 +43,18 @@ export function ActivityCalendar({ data }: ActivityCalendarProps) {
   var colors = getChartColors();
   var PRIMARY_COLOR = colors.primary;
   var [hover, setHover] = useState<{ x: number; y: number; datum: CalendarDatum } | null>(null);
+  var containerRef = useRef<HTMLDivElement>(null);
+  var [containerWidth, setContainerWidth] = useState(0);
+
+  useEffect(function () {
+    if (!containerRef.current) return;
+    let ro = new ResizeObserver(function (entries) {
+      setContainerWidth(entries[0].contentRect.width);
+    });
+    ro.observe(containerRef.current);
+    setContainerWidth(containerRef.current.clientWidth);
+    return function () { ro.disconnect(); };
+  }, []);
 
   if (!data || data.length === 0) {
     return (
@@ -101,12 +110,17 @@ export function ActivityCalendar({ data }: ActivityCalendarProps) {
     }
   }
 
+  var availableWidth = (containerWidth || 800) - DAY_LABEL_WIDTH;
+  var CELL_STEP = Math.max(3, Math.floor(availableWidth / weeks.length));
+  var CELL_GAP = Math.max(1, Math.round(CELL_STEP * 0.15));
+  var CELL_SIZE = CELL_STEP - CELL_GAP;
+
   var svgWidth = DAY_LABEL_WIDTH + weeks.length * CELL_STEP;
   var svgHeight = MONTH_LABEL_HEIGHT + 7 * CELL_STEP;
 
   return (
-    <div className="relative overflow-x-auto">
-      <svg width={svgWidth} height={svgHeight} className="block">
+    <div ref={containerRef} className="relative w-full">
+      <svg width="100%" height={svgHeight} viewBox={"0 0 " + svgWidth + " " + svgHeight} className="block">
         {monthLabels.map(function (ml, idx) {
           return (
             <text

package/client/src/components/project-settings/ProjectClaude.tsx

@@ -62,7 +62,7 @@ export function ProjectClaude({ settings, updateSection }: ProjectClaudeProps) {
   var save = useSaveState();
 
   useEffect(function () {
-    if (save.saving) {
+    if (save.savingRef.current) {
       save.confirmSave();
     } else {
       setClaudeMd(settings.claudeMd ?? "");

package/client/src/components/project-settings/ProjectEnvironment.tsx

@@ -47,7 +47,7 @@ export function ProjectEnvironment({
   var save = useSaveState();
 
   useEffect(function () {
-    if (save.saving) {
+    if (save.savingRef.current) {
       save.confirmSave();
     } else {
       setEntries(envToEntries(settings.env ?? {}));

package/client/src/components/project-settings/ProjectGeneral.tsx

@@ -15,7 +15,7 @@ export function ProjectGeneral({ settings, updateSection }: ProjectGeneralProps)
   var save = useSaveState();
 
   useEffect(function () {
-    if (save.saving) {
+    if (save.savingRef.current) {
       save.confirmSave();
     } else {
       setTitle(settings.title);

package/client/src/components/project-settings/ProjectMcp.tsx

@@ -35,7 +35,7 @@ export function ProjectMcp({
   var [confirmDelete, setConfirmDelete] = useState<string | null>(null);
 
   useEffect(function () {
-    if (save.saving) {
+    if (save.savingRef.current) {
       save.confirmSave();
     } else {
       setServers({ ...(settings.mcpServers ?? {}) });

package/client/src/components/project-settings/ProjectPermissions.tsx

@@ -118,7 +118,7 @@ export function ProjectPermissions({
   var save = useSaveState();
 
   useEffect(function () {
-    if (save.saving) {
+    if (save.savingRef.current) {
       save.confirmSave();
     } else {
       setAllow([...(settings.permissions.allow ?? [])]);

package/client/src/components/project-settings/ProjectRules.tsx

@@ -31,7 +31,7 @@ export function ProjectRules({
   var save = useSaveState();
 
   useEffect(function () {
-    if (save.saving) {
+    if (save.savingRef.current) {
       save.confirmSave();
     } else {
       setRules((settings.rules ?? []).map(function (r: { filename: string; content: string }) {

package/client/src/components/settings/BudgetSettings.tsx

@@ -26,7 +26,7 @@ export function BudgetSettings() {
       var data = msg as SettingsDataMessage;
       var cfg = data.config;
 
-      if (save.saving) {
+      if (save.savingRef.current) {
         save.confirmSave();
       } else {
         if (cfg.costBudget) {

package/client/src/components/settings/ClaudeSettings.tsx

@@ -39,7 +39,7 @@ export function ClaudeSettings() {
       var newModel = cfg.defaultModel ? String(cfg.defaultModel) : CLAUDE_MODELS[0].id;
       var newEffort = cfg.defaultEffort ? String(cfg.defaultEffort) : "normal";
 
-      if (save.saving) {
+      if (save.savingRef.current) {
         save.confirmSave();
       } else {
         setClaudeMd(newClaudeMd);

package/client/src/components/settings/Editor.tsx

@@ -35,7 +35,7 @@ export function Editor() {
       var newType = editor?.type ?? "vscode";
       var newCustomCommand = editor?.customCommand ?? "";
 
-      if (saveRef.current.saving) {
+      if (saveRef.current.savingRef.current) {
         saveRef.current.confirmSave();
       } else {
         setIdeType(newType);

package/client/src/components/settings/Environment.tsx

@@ -29,7 +29,7 @@ export function Environment() {
       var data = msg as SettingsDataMessage;
       var env = data.config.globalEnv ?? {};
 
-      if (save.saving) {
+      if (save.savingRef.current) {
         save.confirmSave();
       }
 
@@ -37,7 +37,7 @@ export function Environment() {
         return { id: genId(), key: k, value: String(v) };
       });
       setEntries(rows);
-      if (!save.saving) {
+      if (!save.savingRef.current) {
         save.resetFromServer();
       }
     }

package/client/src/components/settings/GlobalMcp.tsx

@@ -33,7 +33,7 @@ export function GlobalMcp() {
       var data = msg as SettingsDataMessage;
       var mcpServers = data.mcpServers ?? {};
 
-      if (save.saving) {
+      if (save.savingRef.current) {
         save.confirmSave();
       } else {
         setServers({ ...mcpServers });

package/client/src/hooks/useSaveState.ts

@@ -5,6 +5,7 @@ export type SaveState = "idle" | "saved" | "error";
 export interface UseSaveStateReturn {
   dirty: boolean;
   saving: boolean;
+  savingRef: React.RefObject<boolean>;
   saveState: SaveState;
   markDirty: () => void;
   startSave: () => void;
@@ -17,6 +18,7 @@ export function useSaveState(): UseSaveStateReturn {
   var [saving, setSaving] = useState(false);
   var [saveState, setSaveState] = useState<SaveState>("idle");
   var saveTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  var savingRef = useRef(false);
 
   useEffect(function () {
     return function () {
@@ -31,11 +33,13 @@ export function useSaveState(): UseSaveStateReturn {
 
   function startSave() {
     setSaving(true);
+    savingRef.current = true;
     setSaveState("idle");
 
     if (saveTimeout.current) clearTimeout(saveTimeout.current);
     saveTimeout.current = setTimeout(function () {
       setSaving(false);
+      savingRef.current = false;
       setSaveState("error");
       setTimeout(function () { setSaveState("idle"); }, 3000);
     }, 5000);
@@ -43,6 +47,7 @@ export function useSaveState(): UseSaveStateReturn {
 
   function confirmSave() {
     setSaving(false);
+    savingRef.current = false;
     setSaveState("saved");
     setDirty(false);
     if (saveTimeout.current) clearTimeout(saveTimeout.current);
@@ -53,7 +58,8 @@ export function useSaveState(): UseSaveStateReturn {
     setDirty(false);
     setSaveState("idle");
     setSaving(false);
+    savingRef.current = false;
   }
 
-  return { dirty, saving, saveState, markDirty, startSave, confirmSave, resetFromServer };
+  return { dirty, saving, savingRef, saveState, markDirty, startSave, confirmSave, resetFromServer };
 }

package/package.json

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

package/server/src/analytics/engine.ts

@@ -64,8 +64,9 @@ function formatDate(ts: number): string {
   return year + "-" + month + "-" + day;
 }
 
-function getCostBucket(cost: number): string {
-  if (cost < 0.01) return "$0-0.01";
+function getCostBucket(cost: number): string | null {
+  if (cost <= 0) return null;
+  if (cost < 0.01) return "<$0.01";
   if (cost < 0.05) return "$0.01-0.05";
   if (cost < 0.10) return "$0.05-0.10";
   if (cost < 0.50) return "$0.10-0.50";
@@ -254,7 +255,7 @@ function aggregate(sessions: SessionData[], period: AnalyticsPeriod): AnalyticsP
   var toolStats = new Map<string, { count: number; totalCost: number; sessions: number }>();
 
   var costBuckets = new Map<string, number>();
-  var bucketOrder = ["$0-0.01", "$0.01-0.05", "$0.05-0.10", "$0.10-0.50", "$0.50-1.00", "$1.00-5.00", "$5.00+"];
+  var bucketOrder = ["<$0.01", "$0.01-0.05", "$0.05-0.10", "$0.10-0.50", "$0.50-1.00", "$1.00-5.00", "$5.00+"];
   for (var b = 0; b < bucketOrder.length; b++) {
     costBuckets.set(bucketOrder[b], 0);
   }
@@ -335,7 +336,9 @@ function aggregate(sessions: SessionData[], period: AnalyticsPeriod): AnalyticsP
     });
 
     var bucket = getCostBucket(sess.cost);
-    costBuckets.set(bucket, (costBuckets.get(bucket) || 0) + 1);
+    if (bucket) {
+      costBuckets.set(bucket, (costBuckets.get(bucket) || 0) + 1);
+    }
   }
 
   var totalTokensAll = totalInput + totalOutput + totalCacheRead + totalCacheCreation;
@@ -388,7 +391,8 @@ function aggregate(sessions: SessionData[], period: AnalyticsPeriod): AnalyticsP
   }
 
   var sessionBubbles: AnalyticsPayload["sessionBubbles"] = [];
-  var sorted = filtered.slice().sort(function (a, b) {
+  var nonZeroCost = filtered.filter(function (s) { return s.cost > 0; });
+  var sorted = nonZeroCost.slice().sort(function (a, b) {
     return (b.endTime || b.startTime) - (a.endTime || a.startTime);
   });
   var bubbleCap = Math.min(sorted.length, 200);
@@ -572,7 +576,7 @@ function aggregate(sessions: SessionData[], period: AnalyticsPeriod): AnalyticsP
 
   var sessionTimeline: AnalyticsPayload["sessionTimeline"] = [];
   var tlSorted = filtered
-    .filter(function (s) { return s.startTime > 0 && s.endTime > 0; })
+    .filter(function (s) { return s.startTime > 0 && s.endTime > 0 && s.cost > 0; })
     .sort(function (a, b) { return b.startTime - a.startTime; });
   var tlCap = Math.min(tlSorted.length, 50);
   for (var tli = 0; tli < tlCap; tli++) {