@cryptiklemur/lattice 4.0.2 → 5.0.1

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

@@ -1,106 +0,0 @@
-import { useMemo } from "react";
-import {
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import { useChartFullscreen } from "../ChartCard";
-import { getChartColors, getTickStyle } from "../chartTokens";
-
-interface ContextUtilDatum {
-  messageIndex: number;
-  contextPercent: number;
-  sessionId: string;
-  title: string;
-}
-
-interface ContextUtilizationChartProps {
-  data: ContextUtilDatum[];
-}
-
-function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number; color: 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">
-      {payload.map(function (entry) {
-        return (
-          <div key={entry.name} className="flex items-center gap-2 text-[11px] font-mono">
-            <span className="inline-block w-2 h-2 rounded-full" style={{ background: entry.color }} />
-            <span className="text-base-content/60 truncate max-w-[120px]">{entry.name}</span>
-            <span className="text-base-content ml-auto pl-4">{entry.value.toFixed(1)}%</span>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export function ContextUtilizationChart({ data }: ContextUtilizationChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
-
-  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 });
-    }
-
-    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 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);
-    }
-
-    return { sessions, merged };
-  }, [data]);
-
-  return (
-    <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <LineChart data={merged} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
-        <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 (
-            <Line
-              key={s[0]}
-              type="monotone"
-              dataKey={s[0]}
-              name={s[1].title.slice(0, 30)}
-              stroke={colors.palette[idx % colors.palette.length]}
-              strokeWidth={1.5}
-              dot={false}
-              connectNulls
-              isAnimationActive={false}
-            />
-          );
-        })}
-      </LineChart>
-    </ResponsiveContainer>
-  );
-}

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

@@ -1,79 +0,0 @@
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import { useChartFullscreen } from "../ChartCard";
-import { getChartColors, getTickStyle } from "../chartTokens";
-
-interface CostAreaDatum {
-  date: string;
-  total: number;
-  opus: number;
-  sonnet: number;
-  haiku: number;
-  other: number;
-}
-
-interface CostAreaChartProps {
-  data: CostAreaDatum[];
-}
-
-function CustomTooltip({ active, payload, label }: { active?: boolean; payload?: Array<{ name: string; value: number; color: string }>; 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>
-      {payload.map(function (entry) {
-        return (
-          <div key={entry.name} className="flex items-center gap-2 text-[11px] font-mono">
-            <span className="inline-block w-2 h-2 rounded-full" style={{ background: entry.color }} />
-            <span className="text-base-content/60 capitalize">{entry.name}</span>
-            <span className="text-base-content ml-auto pl-4">${entry.value.toFixed(4)}</span>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export function CostAreaChart({ data }: CostAreaChartProps) {
-  const fullscreenHeight = useChartFullscreen();
-  const colors = getChartColors();
-  return (
-    <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
-        <defs>
-          <linearGradient id="opusGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor={colors.secondary} stopOpacity={0.8} />
-            <stop offset="95%" stopColor={colors.secondary} stopOpacity={0.2} />
-          </linearGradient>
-          <linearGradient id="sonnetGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor={colors.primary} stopOpacity={0.8} />
-            <stop offset="95%" stopColor={colors.primary} stopOpacity={0.2} />
-          </linearGradient>
-          <linearGradient id="haikuGrad" 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>
-          <linearGradient id="otherGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor={colors.warning} stopOpacity={0.8} />
-            <stop offset="95%" stopColor={colors.warning} stopOpacity={0.2} />
-          </linearGradient>
-        </defs>
-        <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={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/src/client/components/analytics/charts/CostDistributionChart.tsx

@@ -1,59 +0,0 @@
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import { useChartFullscreen } from "../ChartCard";
-import { getChartColors, getTickStyle } from "../chartTokens";
-
-interface DistributionDatum {
-  bucket: string;
-  count: number;
-}
-
-interface CostDistributionChartProps {
-  data: DistributionDatum[];
-}
-
-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} sessions</p>
-    </div>
-  );
-}
-
-export function CostDistributionChart({ data }: CostDistributionChartProps) {
-  const fullscreenHeight = useChartFullscreen();
-  const colors = getChartColors();
-  return (
-    <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
-        <defs>
-          <linearGradient id="distGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor={colors.primary} stopOpacity={0.8} />
-            <stop offset="95%" stopColor={colors.primary} stopOpacity={0.2} />
-          </linearGradient>
-        </defs>
-        <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={colors.primary}
-          fill="url(#distGrad)"
-          strokeWidth={2}
-          isAnimationActive={false}
-        />
-      </AreaChart>
-    </ResponsiveContainer>
-  );
-}

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

@@ -1,84 +0,0 @@
-import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
-import { useChartFullscreen } from "../ChartCard";
-import { getChartColors, getModelColor } from "../chartTokens";
-
-interface ModelUsage {
-  model: string;
-  cost: number;
-  percentage: number;
-}
-
-interface CostDonutChartProps {
-  modelUsage: ModelUsage[];
-  totalCost: number;
-}
-
-function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number; payload: ModelUsage }> }) {
-  if (!active || !payload || payload.length === 0) return null;
-  var entry = payload[0];
-  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">{entry.name}</p>
-      <p className="text-[11px] font-mono text-base-content">${entry.value.toFixed(4)}</p>
-      <p className="text-[10px] font-mono text-base-content/50">{entry.payload.percentage.toFixed(1)}%</p>
-    </div>
-  );
-}
-
-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: colors.tickFill }}>
-        TOTAL
-      </tspan>
-      <tspan x="50%" dy="1.4em" style={{ fontSize: 14, fontFamily: "var(--font-mono)", fill: colors.tickFill, fontWeight: 700 }}>
-        ${totalCost.toFixed(2)}
-      </tspan>
-    </text>
-  );
-}
-
-export function CostDonutChart({ modelUsage, totalCost }: CostDonutChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
-  return (
-    <div>
-      <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-        <PieChart>
-          <Pie
-            data={modelUsage}
-            dataKey="cost"
-            nameKey="model"
-            innerRadius={50}
-            outerRadius={80}
-            paddingAngle={2}
-            startAngle={90}
-            endAngle={-270}
-            isAnimationActive={false}
-          >
-            {modelUsage.map(function (entry, index) {
-              return <Cell key={entry.model + index} fill={getModelColor(entry.model)} />;
-            })}
-          </Pie>
-          <Tooltip content={<CustomTooltip />} />
-          <CenterLabel totalCost={totalCost} />
-        </PieChart>
-      </ResponsiveContainer>
-      <div className="flex flex-wrap justify-center gap-3 mt-2">
-        {modelUsage.map(function (entry) {
-          return (
-            <div key={entry.model} className="flex items-center gap-1.5 text-[10px] font-mono text-base-content/50">
-              <span
-                className="inline-block w-2 h-2 rounded-full flex-shrink-0"
-                style={{ background: getModelColor(entry.model) }}
-              />
-              <span className="capitalize">{entry.model}</span>
-              <span className="text-base-content/30">{entry.percentage.toFixed(1)}%</span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

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

@@ -1,59 +0,0 @@
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import { useChartFullscreen } from "../ChartCard";
-import { getChartColors, getTickStyle } from "../chartTokens";
-
-interface CumulativeDatum {
-  date: string;
-  total: number;
-}
-
-interface CumulativeCostChartProps {
-  data: CumulativeDatum[];
-}
-
-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.toFixed(4)}</p>
-    </div>
-  );
-}
-
-export function CumulativeCostChart({ data }: CumulativeCostChartProps) {
-  const fullscreenHeight = useChartFullscreen();
-  const colors = getChartColors();
-  return (
-    <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
-        <defs>
-          <linearGradient id="cumulativeGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor={colors.primary} stopOpacity={0.7} />
-            <stop offset="95%" stopColor={colors.primary} stopOpacity={0.15} />
-          </linearGradient>
-        </defs>
-        <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={colors.primary}
-          fill="url(#cumulativeGrad)"
-          strokeWidth={2}
-          isAnimationActive={false}
-        />
-      </AreaChart>
-    </ResponsiveContainer>
-  );
-}

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

@@ -1,86 +0,0 @@
-import { getChartColors } from "../chartTokens";
-
-interface DailySummaryDatum {
-  date: string;
-  sessions: number;
-  cost: number;
-  tokens: number;
-  topTool: string;
-  modelMix: Record<string, number>;
-}
-
-interface DailySummaryCardsProps {
-  data: DailySummaryDatum[];
-}
-
-function formatCardDate(dateStr: string): string {
-  const d = new Date(dateStr + "T00:00:00");
-  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  return days[d.getDay()] + " " + (d.getMonth() + 1) + "/" + d.getDate();
-}
-
-export function DailySummaryCards({ data }: DailySummaryCardsProps) {
-  const colors = getChartColors();
-  const 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 flex-col items-center justify-center h-[100px] gap-1">
-        <span className="text-base-content/25 font-mono text-[11px]">No daily data</span>
-        <span className="text-base-content/15 text-[10px]">Day-by-day cost, session, and model breakdown</span>
-      </div>
-    );
-  }
-
-  const reversed = data.slice().reverse();
-
-  return (
-    <div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-2 scrollbar-thin">
-      {reversed.map(function (d) {
-        const mixEntries = Object.entries(d.modelMix);
-
-        return (
-          <div
-            key={d.date}
-            className="flex-shrink-0 snap-start rounded-lg bg-base-300 border border-base-content/5 px-3 py-2.5 w-[140px]"
-          >
-            <p className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40 mb-1.5">
-              {formatCardDate(d.date)}
-            </p>
-
-            <div className="text-[11px] font-mono text-base-content space-y-0.5">
-              <p><span className="text-base-content/30">sessions </span>{d.sessions}</p>
-              <p><span className="text-base-content/30">cost </span>${d.cost.toFixed(2)}</p>
-              {d.topTool && (
-                <p className="truncate"><span className="text-base-content/30">tool </span>{d.topTool}</p>
-              )}
-            </div>
-
-            {mixEntries.length > 0 && (
-              <div className="mt-2 h-[4px] rounded-full overflow-hidden flex bg-base-content/5">
-                {mixEntries.map(function (entry) {
-                  const model = entry[0];
-                  const pct = entry[1];
-                  if (pct <= 0) return null;
-                  return (
-                    <div
-                      key={model}
-                      style={{
-                        width: (pct * 100) + "%",
-                        backgroundColor: MODEL_COLORS[model] || MODEL_COLORS.other,
-                      }}
-                    />
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,133 +0,0 @@
-import { useState } from "react";
-import { createPortal } from "react-dom";
-import { getChartColors } from "../chartTokens";
-
-interface HeatmapDatum {
-  day: number;
-  hour: number;
-  count: number;
-}
-
-interface HourlyHeatmapProps {
-  data: HeatmapDatum[];
-}
-
-var CELL_SIZE = 18;
-var CELL_GAP = 2;
-var CELL_STEP = CELL_SIZE + CELL_GAP;
-var DAY_LABEL_WIDTH = 32;
-var HOUR_LABEL_HEIGHT = 16;
-
-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];
-
-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) {
-    return (
-      <div className="flex flex-col items-center justify-center h-[200px] gap-1">
-        <span className="text-base-content/25 font-mono text-[11px]">No activity in this period</span>
-        <span className="text-base-content/15 text-[10px]">Shows your busiest hours and days of the week</span>
-      </div>
-    );
-  }
-
-  var grid = new Map<string, number>();
-  var maxCount = 0;
-  for (var i = 0; i < data.length; i++) {
-    var key = data[i].day + ":" + data[i].hour;
-    grid.set(key, data[i].count);
-    if (data[i].count > maxCount) maxCount = data[i].count;
-  }
-
-  var svgWidth = DAY_LABEL_WIDTH + 24 * CELL_STEP;
-  var svgHeight = HOUR_LABEL_HEIGHT + 7 * CELL_STEP;
-
-  return (
-    <div className="relative overflow-x-auto">
-      <svg width={svgWidth} height={svgHeight} className="block">
-        {HOUR_LABELS.map(function (h) {
-          return (
-            <text
-              key={h}
-              x={DAY_LABEL_WIDTH + h * CELL_STEP + CELL_SIZE / 2}
-              y={11}
-              textAnchor="middle"
-              className="fill-base-content/30"
-              style={{ fontSize: 10, fontFamily: "var(--font-mono)" }}
-            >
-              {h}
-            </text>
-          );
-        })}
-
-        {DAY_ORDER.map(function (dayIdx, row) {
-          return (
-            <text
-              key={dayIdx}
-              x={0}
-              y={HOUR_LABEL_HEIGHT + row * CELL_STEP + CELL_SIZE - 3}
-              className="fill-base-content/30"
-              style={{ fontSize: 10, fontFamily: "var(--font-mono)" }}
-            >
-              {DAY_NAMES[dayIdx]}
-            </text>
-          );
-        })}
-
-        {DAY_ORDER.map(function (dayIdx, row) {
-          return Array.from({ length: 24 }, function (_, h) {
-            var cellKey = dayIdx + ":" + h;
-            var count = grid.get(cellKey) || 0;
-            var opacity = maxCount > 0 && count > 0 ? Math.max(0.1, count / maxCount) : 0.05;
-            var x = DAY_LABEL_WIDTH + h * CELL_STEP;
-            var y = HOUR_LABEL_HEIGHT + row * CELL_STEP;
-            var dayName = DAY_NAMES[dayIdx];
-
-            return (
-              <rect
-                key={cellKey}
-                x={x}
-                y={y}
-                width={CELL_SIZE}
-                height={CELL_SIZE}
-                rx={2}
-                ry={2}
-                fill={count > 0 ? PRIMARY_COLOR : "currentColor"}
-                opacity={opacity}
-                className={count > 0 ? "" : "text-base-content/5"}
-                onMouseEnter={function (e) {
-                  setHover({
-                    x: e.clientX,
-                    y: e.clientY,
-                    day: dayName,
-                    hour: h,
-                    count: count,
-                  });
-                }}
-                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 }}
-        >
-          <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>,
-        document.body
-      )}
-    </div>
-  );
-}