@cryptiklemur/lattice 1.22.3 → 1.23.1

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-[9px] 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,9 +61,9 @@ 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">
@@ -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,7 +67,7 @@ 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">
@@ -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,6 +120,7 @@ export function ChartCard(props: ChartCardProps) {
       <>
         <div
           ref={cardRef}
+          aria-label={props.title}
           className={"rounded-xl border border-base-content/8 bg-base-300/50 p-4 invisible " + (props.className || "")}
         >
           {cardContent}
@@ -176,6 +179,7 @@ export function ChartCard(props: ChartCardProps) {
   return (
     <div
       ref={cardRef}
+      aria-label={props.title}
       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}

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,22 +48,26 @@ 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} />}
+          {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>
@@ -71,7 +75,11 @@ export function QuickStats() {
       <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} />}
+          {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>
@@ -79,7 +87,11 @@ export function QuickStats() {
       <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} />}
+          {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>
@@ -89,7 +101,14 @@ export function QuickStats() {
           <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/35">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="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/DailySummaryCards.tsx

@@ -30,7 +30,7 @@ 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>
     );
   }

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/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/sidebar/Sidebar.tsx

@@ -10,7 +10,7 @@ import { useSidebar } from "../../hooks/useSidebar";
 import { useSession } from "../../hooks/useSession";
 import { clearSession } from "../../stores/session";
 import { useOnline } from "../../hooks/useOnline";
-import { openTab, openSessionTab, getWorkspaceStore } from "../../stores/workspace";
+import { openTab, openSessionTab, closeTab, getWorkspaceStore } from "../../stores/workspace";
 import { getSidebarStore, goToAnalytics, openSettings } from "../../stores/sidebar";
 import { setAnalyticsScope } from "../../stores/analytics";
 import { ProjectRail } from "./ProjectRail";
@@ -269,6 +269,22 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
                 </div>
                 <div className="flex-1 overflow-auto px-4 py-3 pb-16">
                   <div className="flex flex-col gap-0.5 mb-3">
+                    <button
+                      type="button"
+                      onClick={function () {
+                        var store = getWorkspaceStore();
+                        var state = store.state;
+                        var activePane = state.panes.find(function (p) { return p.id === state.activePaneId; });
+                        var activeTab = activePane ? state.tabs.find(function (t) { return t.id === activePane!.activeTabId; }) : null;
+                        if (activeTab && activeTab.id !== "chat") {
+                          closeTab(activeTab.id);
+                        }
+                      }}
+                      className="flex items-center gap-2 w-full 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"
+                    >
+                      <LayoutDashboard size={12} />
+                      <span className="font-mono tracking-wide">Dashboard</span>
+                    </button>
                     <button
                       type="button"
                       onClick={function () {

package/package.json

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