@cryptiklemur/lattice 1.13.0 → 1.14.1

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

@@ -136,6 +136,9 @@ export function ChartCard(props: ChartCardProps) {
         <div
           className="fixed inset-0 z-[9999] flex items-center justify-center p-8"
           style={{ pointerEvents: "none" }}
+          role="dialog"
+          aria-modal="true"
+          aria-label={props.title + " (fullscreen)"}
         >
           <div
             className="w-full max-w-[1100px] rounded-2xl border border-base-content/10 bg-base-200 shadow-2xl overflow-hidden flex flex-col"

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

@@ -1,5 +1,6 @@
 import { LineChart, Line, ResponsiveContainer } from "recharts";
 import { useAnalytics } from "../../hooks/useAnalytics";
+import { getChartColors } from "./chartTokens";
 
 function formatTokens(n: number): string {
   if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
@@ -48,6 +49,7 @@ export function QuickStats() {
   }
 
   var d = analytics.data;
+  var colors = getChartColors();
 
   var costSparkData = d.costOverTime.slice(-7).map(function (e) { return { v: e.total }; });
   var sessionsSparkData = d.sessionsOverTime.slice(-7).map(function (e) { return { v: e.count }; });
@@ -61,7 +63,7 @@ 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">Cost</span>
-          {costSparkData.length > 1 && <Sparkline data={costSparkData} stroke="oklch(55% 0.25 280)" />}
+          {costSparkData.length > 1 && <Sparkline data={costSparkData} stroke={colors.primary} />}
         </div>
         <div className="text-[22px] font-mono text-base-content/85">${d.totalCost.toFixed(2)}</div>
       </div>
@@ -69,7 +71,7 @@ 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="#22c55e" />}
+          {sessionsSparkData.length > 1 && <Sparkline data={sessionsSparkData} stroke={colors.success} />}
         </div>
         <div className="text-[22px] font-mono text-base-content/85">{d.totalSessions}</div>
       </div>
@@ -77,7 +79,7 @@ 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="#f59e0b" />}
+          {tokensSparkData.length > 1 && <Sparkline data={tokensSparkData} stroke={colors.warning} />}
         </div>
         <div className="text-[22px] font-mono text-base-content/85">{formatTokens(totalTokens)}</div>
       </div>

package/client/src/components/analytics/chartTokens.ts

@@ -0,0 +1,182 @@
+/**
+ * Theme-aware chart color tokens.
+ *
+ * Reads CSS custom properties set by useTheme so every chart
+ * automatically adapts when the user switches Base16 themes.
+ *
+ * Usage:
+ *   import { getChartColors } from "../chartTokens";
+ *   // inside component render:
+ *   var colors = getChartColors();
+ */
+
+function css(prop: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(prop).trim();
+}
+
+function oklch(raw: string): string {
+  return raw ? "oklch(" + raw + ")" : "";
+}
+
+export interface ChartColors {
+  /** Primary brand color (base0D — blue) */
+  primary: string;
+  /** Secondary color (base0E — purple) */
+  secondary: string;
+  /** Accent / info color (base0C — cyan) */
+  accent: string;
+  /** Success / green (base0B) */
+  success: string;
+  /** Warning / yellow (base0A) */
+  warning: string;
+  /** Error / red (base08) */
+  error: string;
+  /** Orange (base09) */
+  orange: string;
+  /** Magenta (base0F) */
+  magenta: string;
+
+  /** Tick label fill — content color at 30% opacity */
+  tickFill: string;
+  /** Grid stroke — content color at 6% opacity */
+  gridStroke: string;
+
+  /** Model palette keyed by model family */
+  model: {
+    opus: string;
+    sonnet: string;
+    haiku: string;
+    other: string;
+  };
+
+  /** Ordered palette for multi-series charts (8 colors) */
+  palette: string[];
+
+  /** Category colors for tool classification */
+  category: Record<string, string>;
+
+  /** Permission colors */
+  permission: {
+    allowed: string;
+    denied: string;
+    alwaysAllowed: string;
+  };
+}
+
+var _cache: ChartColors | null = null;
+var _cacheKey: string = "";
+
+/**
+ * Returns chart colors derived from the current CSS theme.
+ * Results are cached per theme so repeated calls within
+ * the same render cycle are cheap.
+ */
+export function getChartColors(): ChartColors {
+  var key = css("--color-primary") + css("--color-base-content");
+  if (_cache && _cacheKey === key) return _cache;
+
+  var primary = oklch(css("--color-primary"));
+  var secondary = oklch(css("--color-secondary"));
+  var accent = oklch(css("--color-accent"));
+  var success = oklch(css("--color-success"));
+  var warning = oklch(css("--color-warning"));
+  var error = oklch(css("--color-error"));
+  var orange = css("--base09") ? "#" + css("--base09") : warning;
+  var magenta = css("--base0F") ? "#" + css("--base0F") : secondary;
+  var contentRaw = css("--color-base-content");
+
+  var tickFill = contentRaw
+    ? "oklch(" + contentRaw + " / 0.3)"
+    : "oklch(0.9 0.02 280 / 0.3)";
+
+  var gridStroke = contentRaw
+    ? "oklch(" + contentRaw + " / 0.06)"
+    : "oklch(0.9 0.02 280 / 0.06)";
+
+  _cache = {
+    primary,
+    secondary,
+    accent,
+    success,
+    warning,
+    error,
+    orange,
+    magenta,
+
+    tickFill,
+    gridStroke,
+
+    model: {
+      opus: secondary,
+      sonnet: primary,
+      haiku: success,
+      other: warning,
+    },
+
+    palette: [primary, secondary, success, warning, accent, orange, error, magenta],
+
+    category: {
+      Read: success,
+      Write: warning,
+      Execute: error,
+      AI: secondary,
+      Other: primary,
+    },
+
+    permission: {
+      allowed: success,
+      denied: error,
+      alwaysAllowed: primary,
+    },
+  };
+  _cacheKey = key;
+  return _cache;
+}
+
+/** Tick style object ready to spread onto Recharts axis components. */
+export function getTickStyle() {
+  var c = getChartColors();
+  return {
+    fontSize: 10,
+    fontFamily: "var(--font-mono)",
+    fill: c.tickFill,
+  };
+}
+
+/**
+ * Returns a color for a model name by matching against known families.
+ */
+export function getModelColor(model: string): string {
+  var c = getChartColors();
+  var key = model.toLowerCase();
+  if (key.includes("opus")) return c.model.opus;
+  if (key.includes("sonnet")) return c.model.sonnet;
+  if (key.includes("haiku")) return c.model.haiku;
+  return c.model.other;
+}
+
+/**
+ * Generate a dynamic OKLCH color based on the theme's primary hue.
+ * Useful for heatmaps and treemaps that derive intensity from data.
+ */
+export function getIntensityColor(intensity: number, hueOverride?: number): string {
+  var raw = getComputedStyle(document.documentElement).getPropertyValue("--color-primary").trim();
+  var hue = hueOverride ?? 280;
+  if (raw) {
+    var parts = raw.split(/\s+/);
+    if (parts.length >= 3) {
+      hue = parseFloat(parts[2]) || hue;
+    }
+  }
+  var lightness = 0.45 - intensity * 0.15;
+  var chroma = 0.15 + intensity * 0.12;
+  return "oklch(" + lightness + " " + chroma + " " + hue + ")";
+}
+
+/**
+ * Generate a score-based color using theme hue.
+ */
+export function getScoreColor(score: number, maxScore: number): string {
+  var intensity = maxScore > 0 ? Math.min(score / maxScore, 1) : 0;
+  return getIntensityColor(intensity);
+}

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

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { getChartColors } from "../chartTokens";
 
 interface CalendarDatum {
   date: string;
@@ -18,7 +19,6 @@ var DAY_LABEL_WIDTH = 28;
 var MONTH_LABEL_HEIGHT = 14;
 
 var INTENSITY_OPACITIES = [0.05, 0.15, 0.3, 0.5, 0.8];
-var PRIMARY_COLOR = "oklch(55% 0.25 280)";
 
 var MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 var DAY_LABELS = [
@@ -43,6 +43,8 @@ function parseDateParts(dateStr: string): { year: number; month: number; day: nu
 }
 
 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);
 
   if (!data || data.length === 0) {

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

@@ -8,14 +8,7 @@ import {
   ResponsiveContainer,
 } from "recharts";
 import { useChartFullscreen } from "../ChartCard";
-
-var TICK_STYLE = {
-  fontSize: 10,
-  fontFamily: "var(--font-mono)",
-  fill: "oklch(0.9 0.02 280 / 0.3)",
-};
-
-var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+import { getChartColors, getTickStyle } from "../chartTokens";
 
 interface CacheEfficiencyDatum {
   date: string;
@@ -38,6 +31,7 @@ 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) {
     return { date: d.date, rate: d.rate * 100 };
   });
@@ -47,15 +41,15 @@ export function CacheEfficiencyChart({ data }: CacheEfficiencyChartProps) {
       <AreaChart data={displayData} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
         <defs>
           <linearGradient id="cacheEffGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor="#22c55e" stopOpacity={0.4} />
-            <stop offset="95%" stopColor="#22c55e" stopOpacity={0.02} />
+            <stop offset="5%" stopColor={colors.success} stopOpacity={0.4} />
+            <stop offset="95%" stopColor={colors.success} stopOpacity={0.02} />
           </linearGradient>
         </defs>
-        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} vertical={false} />
-        <XAxis dataKey="date" tick={TICK_STYLE} axisLine={false} tickLine={false} />
-        <YAxis domain={[0, 100]} tick={TICK_STYLE} axisLine={false} tickLine={false} tickFormatter={function (v) { return v + "%"; }} />
+        <CartesianGrid strokeDasharray="3 3" stroke={colors.gridStroke} vertical={false} />
+        <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="#22c55e" fill="url(#cacheEffGrad)" strokeWidth={1.5} />
+        <Area type="monotone" dataKey="rate" stroke={colors.success} fill="url(#cacheEffGrad)" strokeWidth={1.5} />
       </AreaChart>
     </ResponsiveContainer>
   );

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

@@ -8,22 +8,7 @@ import {
   ResponsiveContainer,
 } from "recharts";
 import { useChartFullscreen } from "../ChartCard";
-
-var TICK_STYLE = {
-  fontSize: 10,
-  fontFamily: "var(--font-mono)",
-  fill: "oklch(0.9 0.02 280 / 0.3)",
-};
-
-var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
-
-var LINE_COLORS = [
-  "oklch(55% 0.25 280)",
-  "#a855f7",
-  "#22c55e",
-  "#f59e0b",
-  "oklch(65% 0.2 240)",
-];
+import { getChartColors, getTickStyle } from "../chartTokens";
 
 interface ContextUtilDatum {
   messageIndex: number;
@@ -55,6 +40,7 @@ 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];
@@ -88,9 +74,9 @@ export function ContextUtilizationChart({ data }: ContextUtilizationChartProps)
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 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} />
-        <YAxis domain={[0, 100]} tick={TICK_STYLE} axisLine={false} tickLine={false} tickFormatter={function (v) { return v + "%"; }} />
+        <CartesianGrid strokeDasharray="3 3" stroke={colors.gridStroke} vertical={false} />
+        <XAxis dataKey="messageIndex" tick={getTickStyle()} axisLine={false} tickLine={false} />
+        <YAxis domain={[0, 100]} tick={getTickStyle()} axisLine={false} tickLine={false} tickFormatter={function (v) { return v + "%"; }} />
         <Tooltip content={<CustomTooltip />} />
         {sessions.map(function (s, idx) {
           return (
@@ -99,7 +85,7 @@ export function ContextUtilizationChart({ data }: ContextUtilizationChartProps)
               type="monotone"
               dataKey={s[0]}
               name={s[1].title.slice(0, 30)}
-              stroke={LINE_COLORS[idx % LINE_COLORS.length]}
+              stroke={colors.palette[idx % colors.palette.length]}
               strokeWidth={1.5}
               dot={false}
               connectNulls

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

@@ -8,14 +8,7 @@ import {
   ResponsiveContainer,
 } from "recharts";
 import { useChartFullscreen } from "../ChartCard";
-
-var TICK_STYLE = {
-  fontSize: 10,
-  fontFamily: "var(--font-mono)",
-  fill: "oklch(0.9 0.02 280 / 0.3)",
-};
-
-var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+import { getChartColors, getTickStyle } from "../chartTokens";
 
 interface CostAreaDatum {
   date: string;
@@ -50,35 +43,36 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 
 export function CostAreaChart({ data }: CostAreaChartProps) {
   var fullscreenHeight = useChartFullscreen();
+  var colors = getChartColors();
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 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">
-            <stop offset="5%" stopColor="#a855f7" stopOpacity={0.4} />
-            <stop offset="95%" stopColor="#a855f7" stopOpacity={0.05} />
+            <stop offset="5%" stopColor={colors.secondary} stopOpacity={0.4} />
+            <stop offset="95%" stopColor={colors.secondary} stopOpacity={0.05} />
           </linearGradient>
           <linearGradient id="sonnetGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.4} />
-            <stop offset="95%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.05} />
+            <stop offset="5%" stopColor={colors.primary} stopOpacity={0.4} />
+            <stop offset="95%" stopColor={colors.primary} stopOpacity={0.05} />
           </linearGradient>
           <linearGradient id="haikuGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor="#22c55e" stopOpacity={0.4} />
-            <stop offset="95%" stopColor="#22c55e" stopOpacity={0.05} />
+            <stop offset="5%" stopColor={colors.success} stopOpacity={0.4} />
+            <stop offset="95%" stopColor={colors.success} stopOpacity={0.05} />
           </linearGradient>
           <linearGradient id="otherGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.4} />
-            <stop offset="95%" stopColor="#f59e0b" stopOpacity={0.05} />
+            <stop offset="5%" stopColor={colors.warning} stopOpacity={0.4} />
+            <stop offset="95%" stopColor={colors.warning} stopOpacity={0.05} />
           </linearGradient>
         </defs>
-        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} vertical={false} />
-        <XAxis dataKey="date" tick={TICK_STYLE} axisLine={false} tickLine={false} />
-        <YAxis tick={TICK_STYLE} axisLine={false} tickLine={false} tickFormatter={function (v) { return "$" + v.toFixed(2); }} />
+        <CartesianGrid strokeDasharray="3 3" stroke={colors.gridStroke} vertical={false} />
+        <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="#a855f7" fill="url(#opusGrad)" strokeWidth={1.5} />
-        <Area type="monotone" dataKey="sonnet" stackId="1" stroke="oklch(55% 0.25 280)" fill="url(#sonnetGrad)" strokeWidth={1.5} />
-        <Area type="monotone" dataKey="haiku" stackId="1" stroke="#22c55e" fill="url(#haikuGrad)" strokeWidth={1.5} />
-        <Area type="monotone" dataKey="other" stackId="1" stroke="#f59e0b" fill="url(#otherGrad)" strokeWidth={1.5} />
+        <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} />
       </AreaChart>
     </ResponsiveContainer>
   );

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

@@ -8,14 +8,7 @@ import {
   ResponsiveContainer,
 } from "recharts";
 import { useChartFullscreen } from "../ChartCard";
-
-var TICK_STYLE = {
-  fontSize: 10,
-  fontFamily: "var(--font-mono)",
-  fill: "oklch(0.9 0.02 280 / 0.3)",
-};
-
-var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+import { getChartColors, getTickStyle } from "../chartTokens";
 
 interface DistributionDatum {
   bucket: string;
@@ -38,23 +31,24 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 
 export function CostDistributionChart({ data }: CostDistributionChartProps) {
   var fullscreenHeight = useChartFullscreen();
+  var colors = getChartColors();
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 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">
-            <stop offset="5%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.35} />
-            <stop offset="95%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.02} />
+            <stop offset="5%" stopColor={colors.primary} stopOpacity={0.35} />
+            <stop offset="95%" stopColor={colors.primary} stopOpacity={0.02} />
           </linearGradient>
         </defs>
-        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} vertical={false} />
-        <XAxis dataKey="bucket" tick={TICK_STYLE} axisLine={false} tickLine={false} />
-        <YAxis tick={TICK_STYLE} axisLine={false} tickLine={false} allowDecimals={false} />
+        <CartesianGrid strokeDasharray="3 3" stroke={colors.gridStroke} vertical={false} />
+        <XAxis dataKey="bucket" tick={getTickStyle()} axisLine={false} tickLine={false} />
+        <YAxis tick={getTickStyle()} axisLine={false} tickLine={false} allowDecimals={false} />
         <Tooltip content={<CustomTooltip />} />
         <Area
           type="monotone"
           dataKey="count"
-          stroke="oklch(55% 0.25 280)"
+          stroke={colors.primary}
           fill="url(#distGrad)"
           strokeWidth={2}
         />

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

@@ -1,20 +1,6 @@
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
 import { useChartFullscreen } from "../ChartCard";
-
-var MODEL_COLORS: Record<string, string> = {
-  opus: "#a855f7",
-  sonnet: "oklch(55% 0.25 280)",
-  haiku: "#22c55e",
-  other: "#f59e0b",
-};
-
-function getModelColor(model: string): string {
-  var key = model.toLowerCase();
-  if (key.includes("opus")) return MODEL_COLORS.opus;
-  if (key.includes("sonnet")) return MODEL_COLORS.sonnet;
-  if (key.includes("haiku")) return MODEL_COLORS.haiku;
-  return MODEL_COLORS.other;
-}
+import { getChartColors, getModelColor } from "../chartTokens";
 
 interface ModelUsage {
   model: string;
@@ -40,12 +26,13 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 }
 
 function CenterLabel({ totalCost }: { totalCost: number }) {
+  var colors = getChartColors();
   return (
     <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle">
-      <tspan x="50%" dy="-0.4em" style={{ fontSize: 11, fontFamily: "var(--font-mono)", fill: "oklch(0.9 0.02 280 / 0.4)" }}>
+      <tspan x="50%" dy="-0.4em" style={{ fontSize: 11, fontFamily: "var(--font-mono)", fill: colors.tickFill }}>
         TOTAL
       </tspan>
-      <tspan x="50%" dy="1.4em" style={{ fontSize: 14, fontFamily: "var(--font-mono)", fill: "oklch(0.9 0.02 280 / 0.9)", fontWeight: 700 }}>
+      <tspan x="50%" dy="1.4em" style={{ fontSize: 14, fontFamily: "var(--font-mono)", fill: colors.tickFill, fontWeight: 700 }}>
         ${totalCost.toFixed(2)}
       </tspan>
     </text>
@@ -54,6 +41,7 @@ function CenterLabel({ totalCost }: { totalCost: number }) {
 
 export function CostDonutChart({ modelUsage, totalCost }: CostDonutChartProps) {
   var fullscreenHeight = useChartFullscreen();
+  var colors = getChartColors();
   return (
     <div>
       <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>

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

@@ -8,14 +8,7 @@ import {
   ResponsiveContainer,
 } from "recharts";
 import { useChartFullscreen } from "../ChartCard";
-
-var TICK_STYLE = {
-  fontSize: 10,
-  fontFamily: "var(--font-mono)",
-  fill: "oklch(0.9 0.02 280 / 0.3)",
-};
-
-var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+import { getChartColors, getTickStyle } from "../chartTokens";
 
 interface CumulativeDatum {
   date: string;
@@ -38,23 +31,24 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 
 export function CumulativeCostChart({ data }: CumulativeCostChartProps) {
   var fullscreenHeight = useChartFullscreen();
+  var colors = getChartColors();
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 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">
-            <stop offset="5%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.3} />
-            <stop offset="95%" stopColor="oklch(55% 0.25 280)" stopOpacity={0} />
+            <stop offset="5%" stopColor={colors.primary} stopOpacity={0.3} />
+            <stop offset="95%" stopColor={colors.primary} stopOpacity={0} />
           </linearGradient>
         </defs>
-        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} vertical={false} />
-        <XAxis dataKey="date" tick={TICK_STYLE} axisLine={false} tickLine={false} />
-        <YAxis tick={TICK_STYLE} axisLine={false} tickLine={false} tickFormatter={function (v) { return "$" + v.toFixed(2); }} />
+        <CartesianGrid strokeDasharray="3 3" stroke={colors.gridStroke} vertical={false} />
+        <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="total"
-          stroke="oklch(55% 0.25 280)"
+          stroke={colors.primary}
           fill="url(#cumulativeGrad)"
           strokeWidth={2}
         />

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

@@ -1,3 +1,5 @@
+import { getChartColors } from "../chartTokens";
+
 interface DailySummaryDatum {
   date: string;
   sessions: number;
@@ -11,13 +13,6 @@ interface DailySummaryCardsProps {
   data: DailySummaryDatum[];
 }
 
-var MODEL_COLORS: Record<string, string> = {
-  opus: "oklch(55% 0.25 280)",
-  sonnet: "#a855f7",
-  haiku: "#22c55e",
-  other: "#f59e0b",
-};
-
 function formatCardDate(dateStr: string): string {
   var d = new Date(dateStr + "T00:00:00");
   var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
@@ -25,6 +20,13 @@ function formatCardDate(dateStr: string): string {
 }
 
 export function DailySummaryCards({ data }: DailySummaryCardsProps) {
+  var colors = getChartColors();
+  var MODEL_COLORS: Record<string, string> = {
+    opus: colors.model.opus,
+    sonnet: colors.model.sonnet,
+    haiku: colors.model.haiku,
+    other: colors.model.other,
+  };
   if (!data || data.length === 0) {
     return (
       <div className="flex items-center justify-center h-[100px] text-base-content/25 font-mono text-[11px]">

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

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { getChartColors } from "../chartTokens";
 
 interface HeatmapDatum {
   day: number;
@@ -20,9 +21,9 @@ var DAY_ORDER = [1, 2, 3, 4, 5, 6, 0];
 var DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var HOUR_LABELS = [0, 3, 6, 9, 12, 15, 18, 21];
 
-var PRIMARY_COLOR = "oklch(55% 0.25 280)";
-
 export function HourlyHeatmap({ data }: HourlyHeatmapProps) {
+  var colors = getChartColors();
+  var PRIMARY_COLOR = colors.primary;
   var [hover, setHover] = useState<{ x: number; y: number; day: string; hour: number; count: number } | null>(null);
 
   if (!data || data.length === 0) {

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

@@ -1,15 +1,10 @@
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
+import { getChartColors } from "../chartTokens";
 
 interface PermissionBreakdownProps {
   data: { allowed: number; denied: number; alwaysAllowed: number };
 }
 
-var COLORS = {
-  allowed: "#22c55e",
-  denied: "#ef4444",
-  alwaysAllowed: "oklch(55% 0.25 280)",
-};
-
 function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number }> }) {
   if (!active || !payload || payload.length === 0) return null;
   var entry = payload[0];
@@ -22,6 +17,8 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 }
 
 export function PermissionBreakdown({ data }: PermissionBreakdownProps) {
+  var chartColors = getChartColors();
+  var COLORS = chartColors.permission;
   var total = data.allowed + data.denied + data.alwaysAllowed;
 
   if (total === 0) {
@@ -73,10 +70,10 @@ export function PermissionBreakdown({ data }: PermissionBreakdownProps) {
           </Pie>
           <Tooltip content={<CustomTooltip />} />
           <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle">
-            <tspan x="50%" dy="-0.3em" style={{ fontSize: 14, fontFamily: "var(--font-mono)", fill: "oklch(0.9 0.02 280 / 0.9)", fontWeight: 700 }}>
+            <tspan x="50%" dy="-0.3em" style={{ fontSize: 14, fontFamily: "var(--font-mono)", fill: chartColors.tickFill, fontWeight: 700 }}>
               {total.toLocaleString()}
             </tspan>
-            <tspan x="50%" dy="1.3em" style={{ fontSize: 9, fontFamily: "var(--font-mono)", fill: "oklch(0.9 0.02 280 / 0.35)" }}>
+            <tspan x="50%" dy="1.3em" style={{ fontSize: 9, fontFamily: "var(--font-mono)", fill: chartColors.tickFill }}>
               total
             </tspan>
           </text>