@cryptiklemur/lattice 4.0.2 → 5.0.0

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

@@ -1,42 +0,0 @@
-type Period = "24h" | "7d" | "30d" | "90d" | "all";
-
-const PERIODS: Array<{ value: Period; label: string }> = [
-  { value: "24h", label: "24h" },
-  { value: "7d", label: "7d" },
-  { value: "30d", label: "30d" },
-  { value: "90d", label: "90d" },
-  { value: "all", label: "All" },
-];
-
-interface PeriodSelectorProps {
-  value: Period;
-  onChange: (period: Period) => void;
-}
-
-export function PeriodSelector({ value, onChange }: PeriodSelectorProps) {
-  return (
-    <div role="radiogroup" aria-label="Time period" className="flex items-center gap-1">
-      {PERIODS.map(function (period) {
-        const isActive = period.value === value;
-        return (
-          <button
-            key={period.value}
-            role="radio"
-            aria-checked={isActive}
-            onClick={function () { onChange(period.value); }}
-            className={[
-              "px-2 py-0.5 rounded border text-[10px] font-mono font-bold uppercase tracking-widest transition-colors cursor-pointer",
-              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",
-            ].join(" ")}
-          >
-            {period.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
-export type { Period };

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

@@ -1,122 +0,0 @@
-import { LineChart, Line, ResponsiveContainer } from "recharts";
-import { useStore } from "@tanstack/react-store";
-import { getAnalyticsStore } from "../../stores/analytics";
-import { getChartColors } from "./chartTokens";
-
-function formatTokens(n: number): string {
-  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
-  if (n >= 1_000) return Math.round(n / 1_000) + "k";
-  return String(n);
-}
-
-interface SparklineProps {
-  data: Array<{ v: number }>;
-  stroke: string;
-}
-
-function Sparkline({ data, stroke }: SparklineProps) {
-  return (
-    <ResponsiveContainer width={60} height={20}>
-      <LineChart data={data} margin={{ top: 2, right: 2, left: 2, bottom: 2 }}>
-        <Line
-          type="monotone"
-          dataKey="v"
-          stroke={stroke}
-          strokeWidth={1.5}
-          dot={false}
-          isAnimationActive={false}
-        />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-}
-
-export function QuickStats() {
-  const analytics = useStore(getAnalyticsStore(), function (s) { return s; });
-  const summaryLoaded = analytics.loadedSections.includes("summary");
-
-  if (!summaryLoaded) {
-    return (
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-        {[0, 1, 2, 3].map(function (i) {
-          return (
-            <div key={i} className="bg-base-content/[0.03] rounded-xl p-3.5 animate-pulse">
-              <div className="h-2.5 w-16 bg-base-content/10 rounded mb-3" />
-              <div className="h-6 w-12 bg-base-content/10 rounded" />
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-  const d = analytics.data;
-  const colors = getChartColors();
-
-  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 ?? 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">
-      <div className="bg-base-content/[0.03] rounded-xl p-3.5">
-        <div className="flex items-center justify-between mb-1">
-          <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40">Total Spend</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-[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">
-        <div className="flex items-center justify-between mb-1">
-          <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-[20px] font-mono text-base-content">{d.totalSessions ?? 0}</div>
-      </div>
-
-      <div className="bg-base-content/[0.03] rounded-xl p-3.5">
-        <div className="flex items-center justify-between mb-1">
-          <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40">Total 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-[20px] font-mono text-base-content">{formatTokens(totalTokens)}</div>
-      </div>
-
-      <div className="bg-base-content/[0.03] rounded-xl p-3.5">
-        <div className="mb-1">
-          <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40">Cache Rate</span>
-        </div>
-        <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 + "%" }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,188 +0,0 @@
-/**
- * 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") + css("--base0D");
-  if (_cache && _cacheKey === key) return _cache;
-
-  var b08 = css("--base08");
-  var b09 = css("--base09");
-  var b0A = css("--base0A");
-  var b0B = css("--base0B");
-  var b0C = css("--base0C");
-  var b0D = css("--base0D");
-  var b0E = css("--base0E");
-  var b0F = css("--base0F");
-
-  var primary = b0D || oklch(css("--color-primary"));
-  var secondary = b0E || oklch(css("--color-secondary"));
-  var accent = b0C || oklch(css("--color-accent"));
-  var success = b0B || oklch(css("--color-success"));
-  var warning = b0A || oklch(css("--color-warning"));
-  var error = b08 || oklch(css("--color-error"));
-  var orange = b09 || warning;
-  var magenta = b0F || secondary;
-  var b03 = css("--base03");
-  var b04 = css("--base04");
-  var b02 = css("--base02");
-
-  var tickFill = b04 || b03 || "#9ea8c7";
-  var gridStroke = b02 || "#44475a";
-
-  _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/src/client/components/analytics/charts/ActivityCalendar.tsx

@@ -1,204 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import { createPortal } from "react-dom";
-import { getChartColors } from "../chartTokens";
-
-interface CalendarDatum {
-  date: string;
-  count: number;
-  tokens: number;
-  cost: number;
-}
-
-interface ActivityCalendarProps {
-  data: CalendarDatum[];
-}
-
-var DAY_LABEL_WIDTH = 28;
-var MONTH_LABEL_HEIGHT = 16;
-
-var INTENSITY_OPACITIES = [0.05, 0.15, 0.3, 0.5, 0.8];
-
-var MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-var DAY_LABELS = [
-  { index: 1, label: "Mon" },
-  { index: 3, label: "Wed" },
-  { index: 5, label: "Fri" },
-];
-
-function getIntensity(count: number, maxCount: number): number {
-  if (count === 0 || maxCount === 0) return -1;
-  var ratio = count / maxCount;
-  if (ratio <= 0.2) return 0;
-  if (ratio <= 0.4) return 1;
-  if (ratio <= 0.6) return 2;
-  if (ratio <= 0.8) return 3;
-  return 4;
-}
-
-function parseDateParts(dateStr: string): { year: number; month: number; day: number } {
-  var parts = dateStr.split("-");
-  return { year: parseInt(parts[0], 10), month: parseInt(parts[1], 10) - 1, day: parseInt(parts[2], 10) };
-}
-
-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 (
-      <div className="flex flex-col items-center justify-center h-[120px] gap-1">
-        <span className="text-base-content/25 font-mono text-[11px]">No activity recorded</span>
-        <span className="text-base-content/15 text-[10px]">Sessions will appear as colored cells by day</span>
-      </div>
-    );
-  }
-
-  var dataMap = new Map<string, CalendarDatum>();
-  var maxCount = 0;
-  for (var i = 0; i < data.length; i++) {
-    dataMap.set(data[i].date, data[i]);
-    if (data[i].count > maxCount) maxCount = data[i].count;
-  }
-
-  var lastDate = new Date(data[data.length - 1].date + "T00:00:00");
-  var startDate = new Date(lastDate);
-  startDate.setDate(startDate.getDate() - 364);
-  var startDay = startDate.getDay();
-  if (startDay !== 0) {
-    startDate.setDate(startDate.getDate() - startDay);
-  }
-
-  var weeks: Array<Array<{ date: string; datum: CalendarDatum | undefined } | null>> = [];
-  var cursor = new Date(startDate);
-  var currentWeek: Array<{ date: string; datum: CalendarDatum | undefined } | null> = [];
-
-  while (cursor <= lastDate) {
-    var dow = cursor.getDay();
-    if (dow === 0 && currentWeek.length > 0) {
-      weeks.push(currentWeek);
-      currentWeek = [];
-    }
-    var key = cursor.getFullYear() + "-" + String(cursor.getMonth() + 1).padStart(2, "0") + "-" + String(cursor.getDate()).padStart(2, "0");
-    currentWeek.push({ date: key, datum: dataMap.get(key) });
-    cursor.setDate(cursor.getDate() + 1);
-  }
-  if (currentWeek.length > 0) {
-    while (currentWeek.length < 7) currentWeek.push(null);
-    weeks.push(currentWeek);
-  }
-
-  var monthLabels: Array<{ col: number; label: string }> = [];
-  var lastMonth = -1;
-  for (var wi = 0; wi < weeks.length; wi++) {
-    var firstCell = weeks[wi][0];
-    if (!firstCell) continue;
-    var parts = parseDateParts(firstCell.date);
-    if (parts.month !== lastMonth) {
-      monthLabels.push({ col: wi, label: MONTH_NAMES[parts.month] });
-      lastMonth = parts.month;
-    }
-  }
-
-  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 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
-              key={idx}
-              x={DAY_LABEL_WIDTH + ml.col * CELL_STEP}
-              y={10}
-              className="fill-base-content/30"
-              style={{ fontSize: 10, fontFamily: "var(--font-mono)" }}
-            >
-              {ml.label}
-            </text>
-          );
-        })}
-
-        {DAY_LABELS.map(function (dl) {
-          return (
-            <text
-              key={dl.index}
-              x={0}
-              y={MONTH_LABEL_HEIGHT + dl.index * CELL_STEP + CELL_SIZE - 1}
-              className="fill-base-content/30"
-              style={{ fontSize: 10, fontFamily: "var(--font-mono)" }}
-            >
-              {dl.label}
-            </text>
-          );
-        })}
-
-        {weeks.map(function (week, col) {
-          return week.map(function (cell, row) {
-            if (!cell) return null;
-            var intensity = getIntensity(cell.datum?.count || 0, maxCount);
-            var x = DAY_LABEL_WIDTH + col * CELL_STEP;
-            var y = MONTH_LABEL_HEIGHT + row * CELL_STEP;
-            var opacity = intensity >= 0 ? INTENSITY_OPACITIES[intensity] : 0.05;
-            var fillColor = intensity >= 0 ? PRIMARY_COLOR : undefined;
-
-            return (
-              <rect
-                key={cell.date}
-                x={x}
-                y={y}
-                width={CELL_SIZE}
-                height={CELL_SIZE}
-                rx={2}
-                ry={2}
-                fill={fillColor || "currentColor"}
-                opacity={opacity}
-                className={fillColor ? "" : "text-base-content/5"}
-                onMouseEnter={function (e) {
-                  setHover({
-                    x: e.clientX,
-                    y: e.clientY,
-                    datum: cell!.datum || { date: cell!.date, count: 0, tokens: 0, cost: 0 },
-                  });
-                }}
-                onMouseLeave={function () { setHover(null); }}
-              />
-            );
-          });
-        })}
-      </svg>
-
-      {hover && createPortal(
-        <div
-          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>
-          <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
-            <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>,
-        document.body
-      )}
-    </div>
-  );
-}

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

@@ -1,56 +0,0 @@
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import { useChartFullscreen } from "../ChartCard";
-import { getChartColors, getTickStyle } from "../chartTokens";
-
-interface CacheEfficiencyDatum {
-  date: string;
-  rate: number;
-}
-
-interface CacheEfficiencyChartProps {
-  data: CacheEfficiencyDatum[];
-}
-
-function CustomTooltip({ active, payload, label }: { active?: boolean; payload?: Array<{ value: number }>; label?: string }) {
-  if (!active || !payload || payload.length === 0) return null;
-  return (
-    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg">
-      <p className="text-[10px] font-mono text-base-content/50 mb-1">{label}</p>
-      <p className="text-[11px] font-mono text-base-content">{(payload[0].value * 100).toFixed(1)}%</p>
-    </div>
-  );
-}
-
-export function CacheEfficiencyChart({ data }: CacheEfficiencyChartProps) {
-  const fullscreenHeight = useChartFullscreen();
-  const colors = getChartColors();
-  const displayData = 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: -15, bottom: 0 }}>
-        <defs>
-          <linearGradient id="cacheEffGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor={colors.success} stopOpacity={0.8} />
-            <stop offset="95%" stopColor={colors.success} stopOpacity={0.2} />
-          </linearGradient>
-        </defs>
-        <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={colors.success} fill="url(#cacheEffGrad)" strokeWidth={2} isAnimationActive={false} />
-      </AreaChart>
-    </ResponsiveContainer>
-  );
-}