@cryptiklemur/lattice 1.46.7 → 2.0.0

package/{client/src → src/client}/components/analytics/AnalyticsView.tsx

@@ -59,76 +59,96 @@ import { DailySummaryCards } from "./charts/DailySummaryCards";
 import { ProjectRadar } from "./charts/ProjectRadar";
 import { SessionComplexityList } from "./charts/SessionComplexityList";
 import { NodeFleetOverview } from "./charts/NodeFleetOverview";
+import type { AnalyticsSectionName } from "@lattice/shared";
 
 export function AnalyticsView() {
   const analytics = useAnalytics();
   const mesh = useMesh();
   const nodes = mesh.nodes;
+  const hasAnyData = analytics.loadedSections.length > 0;
+  const isLoading = analytics.loading;
+
+  function sectionLoading(name: AnalyticsSectionName): boolean {
+    return isLoading && !analytics.loadedSections.includes(name);
+  }
 
   return (
     <div className="flex flex-col h-full overflow-hidden bg-base-100 bg-lattice-grid">
       <div className="flex items-center justify-between px-4 h-11 border-b border-base-300 flex-shrink-0">
         <div className="flex items-center gap-2.5">
           <h1 className="text-[13px] font-mono font-bold text-base-content/90">Analytics</h1>
-          {analytics.loading && analytics.data && (
+          {isLoading && hasAnyData && (
             <span className="w-3.5 h-3.5 border-2 border-base-content/15 border-t-primary/60 rounded-full animate-spin" />
           )}
         </div>
         <PeriodSelector value={analytics.period} onChange={analytics.setPeriod} />
       </div>
 
-      <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">
-              {[0, 1, 2, 3].map(function (i) {
-                return <div key={i} className="h-24 rounded-xl bg-base-content/[0.03] animate-pulse" />;
-              })}
+      <div className="flex-1 overflow-y-auto px-3 py-3 sm:px-6 sm:py-4">
+        {analytics.error && (
+          <div className="text-center text-error/60 py-20 font-mono text-[13px]">{analytics.error}</div>
+        )}
+
+        {!analytics.error && !isLoading && !hasAnyData && (
+          <div className="flex flex-col items-center justify-center py-20 gap-6 max-w-[400px] mx-auto">
+            <div className="w-16 h-16 rounded-2xl bg-primary/8 flex items-center justify-center">
+              <BarChart3 size={28} className="text-primary/40" />
+            </div>
+            <div className="text-center">
+              <p className="text-[15px] font-mono font-semibold text-base-content/60 mb-2">No analytics data yet</p>
+              <p className="text-[13px] text-base-content/30 leading-relaxed">
+                Analytics tracks your spending, token usage, cache efficiency, and session patterns across all projects. Start a Claude session to see your first data here.
+              </p>
             </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 className="flex flex-col gap-2 text-[11px] text-base-content/25 font-mono">
+              <div className="flex items-center gap-2">
+                <div className="w-1 h-1 rounded-full bg-primary/40" />
+                <span>Spending trends and cost breakdowns</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-1 h-1 rounded-full bg-primary/40" />
+                <span>Cache hit rates and response speed</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-1 h-1 rounded-full bg-primary/40" />
+                <span>Activity patterns and session complexity</span>
+              </div>
             </div>
           </div>
         )}
 
-        {analytics.error && (
-          <div className="text-center text-error/60 py-20 font-mono text-[13px]">{analytics.error}</div>
-        )}
-
-        {analytics.data && (
+        {(isLoading || hasAnyData) && (
           <div className="flex flex-col max-w-[1200px] mx-auto pb-12">
             <QuickStats />
 
             <section className="flex flex-col gap-3 mt-8">
               <SectionHeader label="Spending" />
-              <ChartCard title="Spending Over Time">
+              <ChartCard title="Spending Over Time" loading={sectionLoading("summary")} skeletonHeight={240}>
                 <ChartErrorBoundary name="CostArea">
-                  <CostAreaChart data={analytics.data.costOverTime} />
+                  <CostAreaChart data={analytics.data?.costOverTime ?? []} />
                 </ChartErrorBoundary>
               </ChartCard>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <ChartCard title="Spend by Model">
+                <ChartCard title="Spend by Model" loading={sectionLoading("spending")}>
                   <ChartErrorBoundary name="CostDonut">
-                    <CostDonutChart modelUsage={analytics.data.modelUsage} totalCost={analytics.data.totalCost} />
+                    <CostDonutChart modelUsage={analytics.data?.modelUsage ?? []} totalCost={analytics.data?.totalCost ?? 0} />
                   </ChartErrorBoundary>
                 </ChartCard>
-                <ChartCard title="Running Total">
+                <ChartCard title="Running Total" loading={sectionLoading("summary")}>
                   <ChartErrorBoundary name="CumulativeCost">
-                    <CumulativeCostChart data={analytics.data.cumulativeCost} />
+                    <CumulativeCostChart data={analytics.data?.cumulativeCost ?? []} />
                   </ChartErrorBoundary>
                 </ChartCard>
               </div>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <ChartCard title="Session Cost Ranges">
+                <ChartCard title="Session Cost Ranges" loading={sectionLoading("spending")}>
                   <ChartErrorBoundary name="CostDistribution">
-                    <CostDistributionChart data={analytics.data.costDistribution} />
+                    <CostDistributionChart data={analytics.data?.costDistribution ?? []} />
                   </ChartErrorBoundary>
                 </ChartCard>
-                <ChartCard title="Cost per Session">
+                <ChartCard title="Cost per Session" loading={sectionLoading("spending")}>
                   <ChartErrorBoundary name="SessionBubble">
-                    <SessionBubbleChart data={analytics.data.sessionBubbles} />
+                    <SessionBubbleChart data={analytics.data?.sessionBubbles ?? []} />
                   </ChartErrorBoundary>
                 </ChartCard>
               </div>
@@ -136,32 +156,32 @@ export function AnalyticsView() {
 
             <section className="flex flex-col gap-3 mt-10">
               <SectionHeader label="Usage & Speed" />
-              <ChartCard title="Token Usage Over Time">
+              <ChartCard title="Token Usage Over Time" loading={sectionLoading("summary")} skeletonHeight={240}>
                 <ChartErrorBoundary name="TokenFlow">
-                  <TokenFlowChart data={analytics.data.tokensOverTime} />
+                  <TokenFlowChart data={analytics.data?.tokensOverTime ?? []} />
                 </ChartErrorBoundary>
               </ChartCard>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <ChartCard title="Cache Hit Rate">
+                <ChartCard title="Cache Hit Rate" loading={sectionLoading("summary")}>
                   <ChartErrorBoundary name="CacheEfficiency">
-                    <CacheEfficiencyChart data={analytics.data.cacheHitRateOverTime} />
+                    <CacheEfficiencyChart data={analytics.data?.cacheHitRateOverTime ?? []} />
                   </ChartErrorBoundary>
                 </ChartCard>
-                <ChartCard title="Response Speed">
+                <ChartCard title="Response Speed" loading={sectionLoading("usage")}>
                   <ChartErrorBoundary name="ResponseTime">
-                    <ResponseTimeScatter data={analytics.data.responseTimeData} />
+                    <ResponseTimeScatter data={analytics.data?.responseTimeData ?? []} />
                   </ChartErrorBoundary>
                 </ChartCard>
               </div>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <ChartCard title="Context Utilization">
+                <ChartCard title="Context Utilization" loading={sectionLoading("usage")}>
                   <ChartErrorBoundary name="ContextUtilization">
-                    <ContextUtilizationChart data={analytics.data.contextUtilization} />
+                    <ContextUtilizationChart data={analytics.data?.contextUtilization ?? []} />
                   </ChartErrorBoundary>
                 </ChartCard>
-                <ChartCard title="Token Breakdown">
+                <ChartCard title="Token Breakdown" loading={sectionLoading("usage")}>
                   <ChartErrorBoundary name="Sankey">
-                    <TokenSankeyChart data={analytics.data.tokenFlowSankey} />
+                    <TokenSankeyChart data={analytics.data?.tokenFlowSankey ?? { nodes: [], links: [] }} />
                   </ChartErrorBoundary>
                 </ChartCard>
               </div>
@@ -169,26 +189,26 @@ export function AnalyticsView() {
 
             <section className="flex flex-col gap-3 mt-10">
               <SectionHeader label="Activity" />
-              <ChartCard title="Activity Calendar">
+              <ChartCard title="Activity Calendar" loading={sectionLoading("activity")} skeletonHeight={160}>
                 <ChartErrorBoundary name="Calendar">
-                  <ActivityCalendar data={analytics.data.activityCalendar} />
+                  <ActivityCalendar data={analytics.data?.activityCalendar ?? []} />
                 </ChartErrorBoundary>
               </ChartCard>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <ChartCard title="Peak Hours">
+                <ChartCard title="Peak Hours" loading={sectionLoading("activity")}>
                   <ChartErrorBoundary name="HourlyHeatmap">
-                    <HourlyHeatmap data={analytics.data.hourlyHeatmap} />
+                    <HourlyHeatmap data={analytics.data?.hourlyHeatmap ?? []} />
                   </ChartErrorBoundary>
                 </ChartCard>
-                <ChartCard title="Session Timeline">
+                <ChartCard title="Session Timeline" loading={sectionLoading("activity")}>
                   <ChartErrorBoundary name="Timeline">
-                    <SessionTimeline data={analytics.data.sessionTimeline} />
+                    <SessionTimeline data={analytics.data?.sessionTimeline ?? []} />
                   </ChartErrorBoundary>
                 </ChartCard>
               </div>
-              <ChartCard title="Daily Summary">
+              <ChartCard title="Daily Summary" loading={sectionLoading("activity")} skeletonHeight={120}>
                 <ChartErrorBoundary name="DailySummary">
-                  <DailySummaryCards data={analytics.data.dailySummaries} />
+                  <DailySummaryCards data={analytics.data?.dailySummaries ?? []} />
                 </ChartErrorBoundary>
               </ChartCard>
             </section>
@@ -196,14 +216,14 @@ export function AnalyticsView() {
             <section className="flex flex-col gap-3 mt-10">
               <SectionHeader label="Projects" />
               <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <ChartCard title="Project Comparison">
+                <ChartCard title="Project Comparison" loading={sectionLoading("projects")}>
                   <ChartErrorBoundary name="Radar">
-                    <ProjectRadar data={analytics.data.projectRadar} />
+                    <ProjectRadar data={analytics.data?.projectRadar ?? []} />
                   </ChartErrorBoundary>
                 </ChartCard>
-                <ChartCard title="Session Complexity">
+                <ChartCard title="Session Complexity" loading={sectionLoading("projects")}>
                   <ChartErrorBoundary name="Complexity">
-                    <SessionComplexityList data={analytics.data.sessionComplexity} />
+                    <SessionComplexityList data={analytics.data?.sessionComplexity ?? []} />
                   </ChartErrorBoundary>
                 </ChartCard>
               </div>
@@ -211,41 +231,13 @@ export function AnalyticsView() {
 
             <SectionHeader label="Fleet" />
 
-            <ChartCard title="Node Fleet">
+            <ChartCard title="Node Fleet" loading={false} skeletonHeight={120}>
               <ChartErrorBoundary name="Fleet">
                 <NodeFleetOverview nodes={nodes} />
               </ChartErrorBoundary>
             </ChartCard>
           </div>
         )}
-
-        {!analytics.loading && !analytics.error && !analytics.data && (
-          <div className="flex flex-col items-center justify-center py-20 gap-6 max-w-[400px] mx-auto">
-            <div className="w-16 h-16 rounded-2xl bg-primary/8 flex items-center justify-center">
-              <BarChart3 size={28} className="text-primary/40" />
-            </div>
-            <div className="text-center">
-              <p className="text-[15px] font-mono font-semibold text-base-content/60 mb-2">No analytics data yet</p>
-              <p className="text-[13px] text-base-content/30 leading-relaxed">
-                Analytics tracks your spending, token usage, cache efficiency, and session patterns across all projects. Start a Claude session to see your first data here.
-              </p>
-            </div>
-            <div className="flex flex-col gap-2 text-[11px] text-base-content/25 font-mono">
-              <div className="flex items-center gap-2">
-                <div className="w-1 h-1 rounded-full bg-primary/40" />
-                <span>Spending trends and cost breakdowns</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <div className="w-1 h-1 rounded-full bg-primary/40" />
-                <span>Cache hit rates and response speed</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <div className="w-1 h-1 rounded-full bg-primary/40" />
-                <span>Activity patterns and session complexity</span>
-              </div>
-            </div>
-          </div>
-        )}
       </div>
     </div>
   );

package/{client/src → src/client}/components/analytics/ChartCard.tsx

@@ -24,6 +24,8 @@ interface ChartCardProps {
   children: ReactNode;
   className?: string;
   action?: ReactNode;
+  loading?: boolean;
+  skeletonHeight?: number;
 }
 
 export function ChartCard(props: ChartCardProps) {
@@ -92,7 +94,9 @@ export function ChartCard(props: ChartCardProps) {
         </div>
       </div>
       <div role="img" aria-label={props.title}>
-        {props.children}
+        {props.loading
+          ? <div className="rounded-lg bg-base-content/[0.04] animate-pulse" style={{ height: (props.skeletonHeight ?? 200) + "px" }} />
+          : props.children}
       </div>
     </>
   );
@@ -166,7 +170,9 @@ export function ChartCard(props: ChartCardProps) {
             <div className="flex-1 p-6 overflow-auto min-h-0">
               <ChartFullscreenContext.Provider value={chartHeight}>
                 <div style={{ height: chartHeight + "px" }}>
-                  {props.children}
+                  {props.loading
+                    ? <div className="rounded-lg bg-base-content/[0.04] animate-pulse h-full" />
+                    : props.children}
                 </div>
               </ChartFullscreenContext.Provider>
             </div>

package/{client/src → src/client}/components/analytics/QuickStats.tsx

@@ -1,5 +1,6 @@
 import { LineChart, Line, ResponsiveContainer } from "recharts";
-import { useAnalytics } from "../../hooks/useAnalytics";
+import { useStore } from "@tanstack/react-store";
+import { getAnalyticsStore } from "../../stores/analytics";
 import { getChartColors } from "./chartTokens";
 
 function formatTokens(n: number): string {
@@ -31,9 +32,10 @@ function Sparkline({ data, stroke }: SparklineProps) {
 }
 
 export function QuickStats() {
-  const analytics = useAnalytics();
+  const analytics = useStore(getAnalyticsStore(), function (s) { return s; });
+  const summaryLoaded = analytics.loadedSections.includes("summary");
 
-  if (!analytics.data) {
+  if (!summaryLoaded) {
     return (
       <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
         {[0, 1, 2, 3].map(function (i) {
@@ -51,12 +53,12 @@ export function QuickStats() {
   const d = analytics.data;
   const colors = getChartColors();
 
-  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 }; });
+  const costSparkData = (d.costOverTime ?? []).slice(-7).map(function (e) { return { v: e.total }; });
+  const sessionsSparkData = (d.sessionsOverTime ?? []).slice(-7).map(function (e) { return { v: e.count }; });
+  const tokensSparkData = (d.tokensOverTime ?? []).slice(-7).map(function (e) { return { v: e.input + e.output }; });
 
-  const totalTokens = d.totalTokens.input + d.totalTokens.output;
-  const cacheHitPct = Math.round(d.cacheHitRate * 100);
+  const totalTokens = (d.totalTokens?.input ?? 0) + (d.totalTokens?.output ?? 0);
+  const cacheHitPct = Math.round((d.cacheHitRate ?? 0) * 100);
 
   return (
     <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
@@ -69,7 +71,7 @@ export function QuickStats() {
             </div>
           )}
         </div>
-        <div className="text-[20px] font-mono text-base-content">${d.totalCost.toFixed(2)}</div>
+        <div className="text-[20px] font-mono text-base-content">${(d.totalCost ?? 0).toFixed(2)}</div>
       </div>
 
       <div className="bg-base-content/[0.03] rounded-xl p-3.5">
@@ -81,7 +83,7 @@ export function QuickStats() {
             </div>
           )}
         </div>
-        <div className="text-[20px] font-mono text-base-content">{d.totalSessions}</div>
+        <div className="text-[20px] font-mono text-base-content">{d.totalSessions ?? 0}</div>
       </div>
 
       <div className="bg-base-content/[0.03] rounded-xl p-3.5">

package/{client/src → src/client}/components/analytics/charts/ActivityCalendar.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
 import { getChartColors } from "../chartTokens";
 
 interface CalendarDatum {
@@ -185,9 +186,9 @@ export function ActivityCalendar({ data }: ActivityCalendarProps) {
         })}
       </svg>
 
-      {hover && (
+      {hover && createPortal(
         <div
-          className="fixed z-50 rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg pointer-events-none"
+          className="fixed z-[9999] rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg pointer-events-none"
           style={{ left: hover.x + 12, top: hover.y - 40 }}
         >
           <p className="text-[10px] font-mono text-base-content/50">{hover.datum.date}</p>
@@ -195,7 +196,8 @@ export function ActivityCalendar({ data }: ActivityCalendarProps) {
             <p><span className="text-base-content/40">sessions </span>{hover.datum.count}</p>
             <p><span className="text-base-content/40">cost </span>${hover.datum.cost.toFixed(4)}</p>
           </div>
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   );

package/{client/src → src/client}/components/analytics/charts/CacheEfficiencyChart.tsx

@@ -49,7 +49,7 @@ export function CacheEfficiencyChart({ data }: CacheEfficiencyChartProps) {
         <XAxis dataKey="date" tick={getTickStyle()} axisLine={false} tickLine={false} />
         <YAxis domain={[0, 100]} tick={getTickStyle()} axisLine={false} tickLine={false} tickFormatter={function (v) { return v + "%"; }} />
         <Tooltip content={<CustomTooltip />} />
-        <Area type="monotone" dataKey="rate" stroke={colors.success} fill="url(#cacheEffGrad)" strokeWidth={2} />
+        <Area type="monotone" dataKey="rate" stroke={colors.success} fill="url(#cacheEffGrad)" strokeWidth={2} isAnimationActive={false} />
       </AreaChart>
     </ResponsiveContainer>
   );

package/{client/src → src/client}/components/analytics/charts/ContextUtilizationChart.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import {
   LineChart,
   Line,
@@ -41,35 +42,41 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 export function ContextUtilizationChart({ data }: ContextUtilizationChartProps) {
   var fullscreenHeight = useChartFullscreen();
   var colors = getChartColors();
-  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];
-    var entry = sessionMap.get(d.sessionId);
-    if (!entry) {
-      entry = { title: d.title, points: [] };
-      sessionMap.set(d.sessionId, entry);
+
+  var { sessions, merged } = useMemo(function () {
+    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];
+      var entry = sessionMap.get(d.sessionId);
+      if (!entry) {
+        entry = { title: d.title, points: [] };
+        sessionMap.set(d.sessionId, entry);
+      }
+      entry.points.push({ messageIndex: d.messageIndex, contextPercent: d.contextPercent });
     }
-    entry.points.push({ messageIndex: d.messageIndex, contextPercent: d.contextPercent });
-  }
 
-  var sessions = Array.from(sessionMap.entries()).slice(0, 5);
+    var sessions = Array.from(sessionMap.entries()).slice(0, 5);
+
+    var maxIndex = 0;
+    for (var si = 0; si < sessions.length; si++) {
+      var pts = sessions[si][1].points;
+      for (var pi = 0; pi < pts.length; pi++) {
+        if (pts[pi].messageIndex > maxIndex) maxIndex = pts[pi].messageIndex;
+      }
+    }
 
-  var maxIndex = 0;
-  sessions.forEach(function (s) {
-    s[1].points.forEach(function (p) {
-      if (p.messageIndex > maxIndex) maxIndex = p.messageIndex;
-    });
-  });
+    var merged: Array<Record<string, number>> = [];
+    for (var mi = 0; mi <= maxIndex; mi++) {
+      var row: Record<string, number> = { messageIndex: mi };
+      for (var sj = 0; sj < sessions.length; sj++) {
+        var point = sessions[sj][1].points.find(function (p) { return p.messageIndex === mi; });
+        if (point) row[sessions[sj][0]] = point.contextPercent;
+      }
+      merged.push(row);
+    }
 
-  var merged: Array<Record<string, number>> = [];
-  for (var mi = 0; mi <= maxIndex; mi++) {
-    var row: Record<string, number> = { messageIndex: mi };
-    sessions.forEach(function (s) {
-      var point = s[1].points.find(function (p) { return p.messageIndex === mi; });
-      if (point) row[s[0]] = point.contextPercent;
-    });
-    merged.push(row);
-  }
+    return { sessions, merged };
+  }, [data]);
 
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
@@ -89,6 +96,7 @@ export function ContextUtilizationChart({ data }: ContextUtilizationChartProps)
               strokeWidth={1.5}
               dot={false}
               connectNulls
+              isAnimationActive={false}
             />
           );
         })}

package/{client/src → src/client}/components/analytics/charts/CostAreaChart.tsx

@@ -69,10 +69,10 @@ export function CostAreaChart({ data }: CostAreaChartProps) {
         <XAxis dataKey="date" tick={getTickStyle()} axisLine={false} tickLine={false} />
         <YAxis tick={getTickStyle()} axisLine={false} tickLine={false} tickFormatter={function (v) { return "$" + v.toFixed(2); }} />
         <Tooltip content={<CustomTooltip />} />
-        <Area type="monotone" dataKey="opus" stackId="1" stroke={colors.secondary} fill="url(#opusGrad)" strokeWidth={1.5} />
-        <Area type="monotone" dataKey="sonnet" stackId="1" stroke={colors.primary} fill="url(#sonnetGrad)" strokeWidth={1.5} />
-        <Area type="monotone" dataKey="haiku" stackId="1" stroke={colors.success} fill="url(#haikuGrad)" strokeWidth={1.5} />
-        <Area type="monotone" dataKey="other" stackId="1" stroke={colors.warning} fill="url(#otherGrad)" strokeWidth={1.5} />
+        <Area type="monotone" dataKey="opus" stackId="1" stroke={colors.secondary} fill="url(#opusGrad)" strokeWidth={1.5} isAnimationActive={false} />
+        <Area type="monotone" dataKey="sonnet" stackId="1" stroke={colors.primary} fill="url(#sonnetGrad)" strokeWidth={1.5} isAnimationActive={false} />
+        <Area type="monotone" dataKey="haiku" stackId="1" stroke={colors.success} fill="url(#haikuGrad)" strokeWidth={1.5} isAnimationActive={false} />
+        <Area type="monotone" dataKey="other" stackId="1" stroke={colors.warning} fill="url(#otherGrad)" strokeWidth={1.5} isAnimationActive={false} />
       </AreaChart>
     </ResponsiveContainer>
   );

package/{client/src → src/client}/components/analytics/charts/CostDistributionChart.tsx

@@ -51,6 +51,7 @@ export function CostDistributionChart({ data }: CostDistributionChartProps) {
           stroke={colors.primary}
           fill="url(#distGrad)"
           strokeWidth={2}
+          isAnimationActive={false}
         />
       </AreaChart>
     </ResponsiveContainer>

package/{client/src → src/client}/components/analytics/charts/CostDonutChart.tsx

@@ -55,6 +55,7 @@ export function CostDonutChart({ modelUsage, totalCost }: CostDonutChartProps) {
             paddingAngle={2}
             startAngle={90}
             endAngle={-270}
+            isAnimationActive={false}
           >
             {modelUsage.map(function (entry, index) {
               return <Cell key={entry.model + index} fill={getModelColor(entry.model)} />;

package/{client/src → src/client}/components/analytics/charts/CumulativeCostChart.tsx

@@ -51,6 +51,7 @@ export function CumulativeCostChart({ data }: CumulativeCostChartProps) {
           stroke={colors.primary}
           fill="url(#cumulativeGrad)"
           strokeWidth={2}
+          isAnimationActive={false}
         />
       </AreaChart>
     </ResponsiveContainer>

package/{client/src → src/client}/components/analytics/charts/HourlyHeatmap.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { createPortal } from "react-dom";
 import { getChartColors } from "../chartTokens";
 
 interface HeatmapDatum {
@@ -115,16 +116,17 @@ export function HourlyHeatmap({ data }: HourlyHeatmapProps) {
         })}
       </svg>
 
-      {hover && (
+      {hover && createPortal(
         <div
-          className="fixed z-50 rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg pointer-events-none"
+          className="fixed z-[9999] rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg pointer-events-none"
           style={{ left: hover.x + 12, top: hover.y - 40 }}
         >
           <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
             <p><span className="text-base-content/40">{hover.day} </span>{hover.hour}:00</p>
             <p><span className="text-base-content/40">sessions </span>{hover.count}</p>
           </div>
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   );

package/{client/src → src/client}/components/analytics/charts/ProjectRadar.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import {
   RadarChart,
   Radar,
@@ -50,6 +51,34 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 
 export function ProjectRadar({ data }: ProjectRadarProps) {
   var colors = getChartColors();
+
+  var { projects, radarData } = useMemo(function () {
+    var projects = data.slice(0, 5);
+    var normalized = new Map<string, Map<string, number>>();
+    for (var ai = 0; ai < AXIS_KEYS.length; ai++) {
+      var key = AXIS_KEYS[ai];
+      var rawValues = projects.map(function (p) { return p[key] as number; });
+      var normValues = normalize(rawValues);
+      for (var pi = 0; pi < projects.length; pi++) {
+        var projMap = normalized.get(projects[pi].project);
+        if (!projMap) {
+          projMap = new Map();
+          normalized.set(projects[pi].project, projMap);
+        }
+        projMap.set(key, normValues[pi]);
+      }
+    }
+    var radarData = AXIS_KEYS.map(function (key) {
+      var entry: Record<string, string | number> = { axis: AXIS_LABELS[key] };
+      for (var pi = 0; pi < projects.length; pi++) {
+        var projMap = normalized.get(projects[pi].project);
+        entry[projects[pi].project] = projMap ? projMap.get(key) || 0 : 0;
+      }
+      return entry;
+    });
+    return { projects, radarData };
+  }, [data]);
+
   if (!data || data.length === 0) {
     return (
       <div className="flex items-center justify-center h-[250px] text-base-content/25 font-mono text-[11px]">
@@ -58,32 +87,6 @@ export function ProjectRadar({ data }: ProjectRadarProps) {
     );
   }
 
-  var projects = data.slice(0, 5);
-
-  var normalized = new Map<string, Map<string, number>>();
-  for (var ai = 0; ai < AXIS_KEYS.length; ai++) {
-    var key = AXIS_KEYS[ai];
-    var rawValues = projects.map(function (p) { return p[key] as number; });
-    var normValues = normalize(rawValues);
-    for (var pi = 0; pi < projects.length; pi++) {
-      var projMap = normalized.get(projects[pi].project);
-      if (!projMap) {
-        projMap = new Map();
-        normalized.set(projects[pi].project, projMap);
-      }
-      projMap.set(key, normValues[pi]);
-    }
-  }
-
-  var radarData = AXIS_KEYS.map(function (key) {
-    var entry: Record<string, string | number> = { axis: AXIS_LABELS[key] };
-    for (var pi = 0; pi < projects.length; pi++) {
-      var projMap = normalized.get(projects[pi].project);
-      entry[projects[pi].project] = projMap ? projMap.get(key) || 0 : 0;
-    }
-    return entry;
-  });
-
   return (
     <ResponsiveContainer width="100%" height={280}>
       <RadarChart data={radarData} margin={{ top: 10, right: 30, bottom: 10, left: 30 }}>
@@ -108,6 +111,7 @@ export function ProjectRadar({ data }: ProjectRadarProps) {
               fill={colors.palette[index % colors.palette.length]}
               fillOpacity={0.1}
               strokeWidth={1.5}
+              isAnimationActive={false}
             />
           );
         })}