@cryptiklemur/lattice 4.0.1 → 5.0.0

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

@@ -1,89 +0,0 @@
-import { Server, Wifi, WifiOff } from "lucide-react";
-import type { NodeInfo } from "#shared";
-
-interface NodeFleetOverviewProps {
-  nodes: NodeInfo[];
-}
-
-export function NodeFleetOverview(props: NodeFleetOverviewProps) {
-  var nodes = props.nodes;
-
-  if (nodes.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center h-[200px] gap-1">
-        <span className="text-base-content/30 font-mono text-[12px]">No nodes connected</span>
-        <span className="text-base-content/20 text-[11px]">Pair a node in Settings to see fleet data</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-      {nodes.map(function (node) {
-        return (
-          <div
-            key={node.id}
-            className={
-              "rounded-lg border p-3.5 transition-colors " +
-              (node.online
-                ? "border-success/20 bg-success/[0.03]"
-                : "border-base-content/8 bg-base-content/[0.02] opacity-60")
-            }
-          >
-            <div className="flex items-center gap-2.5 mb-2.5">
-              <Server size={14} className={node.online ? "text-success/60" : "text-base-content/25"} />
-              <span className="text-[13px] font-mono font-medium text-base-content/80 truncate">{node.name}</span>
-              <span className="ml-auto flex-shrink-0">
-                {node.online
-                  ? <Wifi size={12} className="text-success/50" />
-                  : <WifiOff size={12} className="text-base-content/20" />
-                }
-              </span>
-            </div>
-
-            <div className="flex flex-col gap-1">
-              <div className="flex items-center justify-between text-[10px] font-mono">
-                <span className="text-base-content/35 uppercase tracking-wider">Address</span>
-                <span className="text-base-content/50">{node.address}:{node.port}</span>
-              </div>
-              <div className="flex items-center justify-between text-[10px] font-mono">
-                <span className="text-base-content/35 uppercase tracking-wider">Projects</span>
-                <span className="text-base-content/50">{node.projects.length}</span>
-              </div>
-              <div className="flex items-center justify-between text-[10px] font-mono">
-                <span className="text-base-content/35 uppercase tracking-wider">Status</span>
-                <span className={node.online ? "text-success/70" : "text-base-content/30"}>
-                  {node.online ? "Online" : "Offline"}
-                </span>
-              </div>
-              {node.isLocal && (
-                <div className="flex items-center justify-between text-[10px] font-mono">
-                  <span className="text-base-content/35 uppercase tracking-wider">Type</span>
-                  <span className="text-primary/50">Local</span>
-                </div>
-              )}
-            </div>
-
-            {node.projects.length > 0 && (
-              <div className="mt-2.5 pt-2 border-t border-base-content/5">
-                <div className="text-[9px] font-mono text-base-content/25 uppercase tracking-widest mb-1.5">Projects</div>
-                <div className="flex flex-wrap gap-1">
-                  {node.projects.map(function (p: typeof node.projects[number]) {
-                    return (
-                      <span
-                        key={p.slug}
-                        className="px-1.5 py-0.5 rounded text-[9px] font-mono bg-base-content/5 text-base-content/40"
-                      >
-                        {p.slug}
-                      </span>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,98 +0,0 @@
-import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
-import { getChartColors } from "../chartTokens";
-
-interface PermissionBreakdownProps {
-  data: { allowed: number; denied: number; alwaysAllowed: number };
-}
-
-function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number }> }) {
-  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-[11px] font-mono text-base-content">{entry.name}</p>
-      <p className="text-[10px] font-mono text-base-content/60">{entry.value.toLocaleString()}</p>
-    </div>
-  );
-}
-
-export function PermissionBreakdown({ data }: PermissionBreakdownProps) {
-  var chartColors = getChartColors();
-  var COLORS = chartColors.permission;
-  var total = data.allowed + data.denied + data.alwaysAllowed;
-
-  if (total === 0) {
-    return (
-      <div className="flex items-center justify-center h-[200px] text-base-content/25 font-mono text-[11px]">
-        No permission data
-      </div>
-    );
-  }
-
-  if (data.denied === 0 && data.alwaysAllowed === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center h-[200px] gap-2">
-        <div className="text-[32px] font-mono font-bold text-base-content/80">{total.toLocaleString()}</div>
-        <div className="text-[11px] font-mono text-base-content/40">tool calls — all allowed</div>
-      </div>
-    );
-  }
-
-  var pieData = [
-    { name: "Allowed", value: data.allowed },
-    { name: "Denied", value: data.denied },
-    { name: "Always Allowed", value: data.alwaysAllowed },
-  ].filter(function (d) { return d.value > 0; });
-
-  var colorMap: Record<string, string> = {
-    Allowed: COLORS.allowed,
-    Denied: COLORS.denied,
-    "Always Allowed": COLORS.alwaysAllowed,
-  };
-
-  return (
-    <div>
-      <ResponsiveContainer width="100%" height={180}>
-        <PieChart>
-          <Pie
-            data={pieData}
-            dataKey="value"
-            nameKey="name"
-            innerRadius={45}
-            outerRadius={70}
-            paddingAngle={2}
-            startAngle={90}
-            endAngle={-270}
-          >
-            {pieData.map(function (entry) {
-              return <Cell key={entry.name} fill={colorMap[entry.name] || "#888"} />;
-            })}
-          </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: chartColors.tickFill, fontWeight: 700 }}>
-              {total.toLocaleString()}
-            </tspan>
-            <tspan x="50%" dy="1.3em" style={{ fontSize: 9, fontFamily: "var(--font-mono)", fill: chartColors.tickFill }}>
-              total
-            </tspan>
-          </text>
-        </PieChart>
-      </ResponsiveContainer>
-      <div className="flex flex-wrap justify-center gap-3 mt-1">
-        {pieData.map(function (entry) {
-          return (
-            <div key={entry.name} 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: colorMap[entry.name] }}
-              />
-              <span>{entry.name}</span>
-              <span className="text-base-content/30">{entry.value.toLocaleString()}</span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

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

@@ -1,126 +0,0 @@
-import { useMemo } from "react";
-import {
-  RadarChart,
-  Radar,
-  PolarGrid,
-  PolarAngleAxis,
-  PolarRadiusAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-} from "recharts";
-import { getChartColors } from "../chartTokens";
-
-interface ProjectRadarProps {
-  data: Array<{ project: string; cost: number; sessions: number; avgDuration: number; toolDiversity: number; tokensPerSession: number }>;
-}
-
-var AXIS_KEYS = ["cost", "sessions", "avgDuration", "toolDiversity", "tokensPerSession"] as const;
-var AXIS_LABELS: Record<string, string> = {
-  cost: "Cost",
-  sessions: "Sessions",
-  avgDuration: "Duration",
-  toolDiversity: "Tool Diversity",
-  tokensPerSession: "Tokens/Session",
-};
-
-function normalize(values: number[]): number[] {
-  var max = 0;
-  for (var i = 0; i < values.length; i++) {
-    if (values[i] > max) max = values[i];
-  }
-  if (max === 0) return values.map(function () { return 0; });
-  return values.map(function (v) { return Math.round((v / max) * 100); });
-}
-
-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 (
-          <p key={entry.name} className="text-[10px] font-mono text-base-content/70">
-            <span style={{ color: entry.color }}>{entry.name}</span>: {entry.value}
-          </p>
-        );
-      })}
-    </div>
-  );
-}
-
-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]">
-        No project data
-      </div>
-    );
-  }
-
-  return (
-    <ResponsiveContainer width="100%" height={280}>
-      <RadarChart data={radarData} margin={{ top: 10, right: 30, bottom: 10, left: 30 }}>
-        <PolarGrid stroke={colors.gridStroke} />
-        <PolarAngleAxis
-          dataKey="axis"
-          tick={{ fontSize: 9, fontFamily: "var(--font-mono)", fill: colors.tickFill }}
-        />
-        <PolarRadiusAxis
-          angle={90}
-          domain={[0, 100]}
-          tick={false}
-          axisLine={false}
-        />
-        {projects.map(function (project, index) {
-          return (
-            <Radar
-              key={project.project}
-              name={project.project}
-              dataKey={project.project}
-              stroke={colors.palette[index % colors.palette.length]}
-              fill={colors.palette[index % colors.palette.length]}
-              fillOpacity={0.1}
-              strokeWidth={1.5}
-              isAnimationActive={false}
-            />
-          );
-        })}
-        <Tooltip content={<CustomTooltip />} />
-        <Legend
-          wrapperStyle={{ fontSize: 10, fontFamily: "var(--font-mono)" }}
-          iconSize={8}
-        />
-      </RadarChart>
-    </ResponsiveContainer>
-  );
-}

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

@@ -1,96 +0,0 @@
-import { useMemo } from "react";
-import {
-  ScatterChart,
-  Scatter,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import { useChartFullscreen } from "../ChartCard";
-import { getChartColors, getTickStyle, getModelColor } from "../chartTokens";
-
-interface ResponseTimeDatum {
-  tokens: number;
-  duration: number;
-  model: string;
-  sessionId: string;
-}
-
-interface ResponseTimeScatterProps {
-  data: ResponseTimeDatum[];
-}
-
-function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: { tokens: number; durationSec: number; model: string } }> }) {
-  if (!active || !payload || payload.length === 0) return null;
-  var d = payload[0].payload;
-  return (
-    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg">
-      <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
-        <p><span className="text-base-content/40">tokens </span>{d.tokens.toLocaleString()}</p>
-        <p><span className="text-base-content/40">duration </span>{d.durationSec.toFixed(1)}s</p>
-        <p><span className="text-base-content/40">model </span>{d.model}</p>
-      </div>
-    </div>
-  );
-}
-
-export function ResponseTimeScatter({ data }: ResponseTimeScatterProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
-
-  var byModel = useMemo(function () {
-    var modelSet = new Set<string>();
-    for (var i = 0; i < data.length; i++) modelSet.add(data[i].model);
-    var models = Array.from(modelSet);
-    return models.map(function (model) {
-      return {
-        model,
-        color: getModelColor(model),
-        points: data
-          .filter(function (d) { return d.model === model; })
-          .map(function (d) { return { tokens: d.tokens, durationSec: d.duration / 1000, model: d.model }; }),
-      };
-    });
-  }, [data]);
-
-  return (
-    <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <ScatterChart margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
-        <CartesianGrid strokeDasharray="3 3" stroke={colors.gridStroke} />
-        <XAxis
-          dataKey="tokens"
-          type="number"
-          tick={getTickStyle()}
-          axisLine={false}
-          tickLine={false}
-          tickFormatter={function (v) { return v >= 1000 ? (v / 1000).toFixed(0) + "k" : String(v); }}
-          name="tokens"
-        />
-        <YAxis
-          dataKey="durationSec"
-          type="number"
-          tick={getTickStyle()}
-          axisLine={false}
-          tickLine={false}
-          tickFormatter={function (v) { return v.toFixed(0) + "s"; }}
-          name="duration"
-        />
-        <Tooltip content={<CustomTooltip />} cursor={{ strokeDasharray: "3 3", stroke: colors.gridStroke }} />
-        {byModel.map(function (group) {
-          return (
-            <Scatter
-              key={group.model}
-              name={group.model}
-              data={group.points}
-              fill={group.color}
-              fillOpacity={0.7}
-              isAnimationActive={false}
-            />
-          );
-        })}
-      </ScatterChart>
-    </ResponsiveContainer>
-  );
-}

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

@@ -1,114 +0,0 @@
-import { useMemo } from "react";
-import {
-  ScatterChart,
-  Scatter,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  ZAxis,
-} from "recharts";
-import { useChartFullscreen } from "../ChartCard";
-import { getChartColors, getTickStyle } from "../chartTokens";
-
-interface SessionBubbleDatum {
-  id: string;
-  title: string;
-  cost: number;
-  tokens: number;
-  timestamp: number;
-  project: string;
-}
-
-interface SessionBubbleChartProps {
-  data: SessionBubbleDatum[];
-}
-
-function formatDate(ts: number): string {
-  var d = new Date(ts);
-  return (d.getMonth() + 1) + "/" + d.getDate();
-}
-
-function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: SessionBubbleDatum }> }) {
-  if (!active || !payload || payload.length === 0) return null;
-  var d = payload[0].payload;
-  return (
-    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg max-w-[180px]">
-      <p className="text-[10px] font-mono text-base-content/50 mb-1 truncate">{d.title || d.id}</p>
-      <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
-        <p><span className="text-base-content/40">cost </span>${d.cost.toFixed(4)}</p>
-        <p><span className="text-base-content/40">tokens </span>{d.tokens.toLocaleString()}</p>
-        <p><span className="text-base-content/40">project </span>{d.project}</p>
-      </div>
-    </div>
-  );
-}
-
-export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
-
-  var { byProject, minTs, maxTs } = useMemo(function () {
-    var projectSet = new Set<string>();
-    var minTs = Infinity;
-    var maxTs = -Infinity;
-    for (var i = 0; i < data.length; i++) {
-      projectSet.add(data[i].project);
-      if (data[i].timestamp < minTs) minTs = data[i].timestamp;
-      if (data[i].timestamp > maxTs) maxTs = data[i].timestamp;
-    }
-    var projects = Array.from(projectSet);
-
-    var byProject = projects.map(function (project, idx) {
-      return {
-        project,
-        color: colors.palette[idx % colors.palette.length],
-        points: data
-          .filter(function (d) { return d.project === project; })
-          .map(function (d) { return { ...d, x: d.timestamp, y: d.tokens, z: Math.max(d.cost * 1000, 20) }; }),
-      };
-    });
-
-    return { byProject, minTs: isFinite(minTs) ? minTs : 0, maxTs: isFinite(maxTs) ? maxTs : 0 };
-  }, [data, colors.palette]);
-
-  return (
-    <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <ScatterChart margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
-        <CartesianGrid strokeDasharray="3 3" stroke={colors.gridStroke} />
-        <XAxis
-          dataKey="x"
-          type="number"
-          domain={[minTs, maxTs]}
-          tick={getTickStyle()}
-          axisLine={false}
-          tickLine={false}
-          tickFormatter={function (v) { return formatDate(v); }}
-        />
-        <YAxis
-          dataKey="y"
-          type="number"
-          tick={getTickStyle()}
-          axisLine={false}
-          tickLine={false}
-          tickFormatter={function (v) { return v >= 1000 ? (v / 1000).toFixed(0) + "k" : String(v); }}
-        />
-        <ZAxis dataKey="z" range={[20, 300]} />
-        <Tooltip content={<CustomTooltip />} cursor={{ strokeDasharray: "3 3", stroke: colors.gridStroke }} />
-        {byProject.map(function (group) {
-          return (
-            <Scatter
-              key={group.project}
-              name={group.project}
-              data={group.points}
-              fill={group.color}
-              fillOpacity={0.7}
-              isAnimationActive={false}
-            />
-          );
-        })}
-      </ScatterChart>
-    </ResponsiveContainer>
-  );
-}

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

@@ -1,65 +0,0 @@
-import { getScoreColor } from "../chartTokens";
-
-interface SessionComplexityListProps {
-  data: Array<{ id: string; title: string; score: number; messages: number; tools: number; contextPercent: number }>;
-}
-
-export function SessionComplexityList({ data }: SessionComplexityListProps) {
-  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 sessions to rank</span>
-        <span className="text-base-content/15 text-[10px]">Sessions ranked by messages, tools, and context usage</span>
-      </div>
-    );
-  }
-
-  const maxScore = data.length > 0 ? data[0].score : 1;
-
-  return (
-    <div className="overflow-x-auto">
-    <div className="flex flex-col gap-1 max-h-[400px] overflow-y-auto min-w-[370px]">
-      <div className="grid grid-cols-[2.5rem_1fr_4rem_3rem_3rem_3.5rem] gap-2 px-2 py-1 text-[10px] font-mono text-base-content/30 uppercase tracking-wider">
-        <span>Rank</span>
-        <span>Session</span>
-        <span className="text-right">Score</span>
-        <span className="text-right">Msgs</span>
-        <span className="text-right">Tools</span>
-        <span className="text-right">Ctx%</span>
-      </div>
-      {data.map(function (entry, index) {
-        return (
-          <div
-            key={entry.id}
-            className="grid grid-cols-[2.5rem_1fr_4rem_3rem_3rem_3.5rem] gap-2 px-2 py-1.5 rounded hover:bg-base-content/[0.03] transition-colors"
-          >
-            <span className="font-mono text-[11px] text-base-content/40 font-bold tabular-nums">
-              #{index + 1}
-            </span>
-            <span className="font-mono text-[11px] text-base-content/70 truncate" title={entry.title}>
-              {entry.title}
-            </span>
-            <span className="text-right">
-              <span
-                className="inline-block px-1.5 py-0.5 rounded text-[10px] font-mono font-bold text-white/90 tabular-nums"
-                style={{ background: getScoreColor(entry.score, maxScore) }}
-              >
-                {entry.score}
-              </span>
-            </span>
-            <span className="text-right font-mono text-[10px] text-base-content/50 tabular-nums self-center">
-              {entry.messages}
-            </span>
-            <span className="text-right font-mono text-[10px] text-base-content/50 tabular-nums self-center">
-              {entry.tools}
-            </span>
-            <span className="text-right font-mono text-[10px] text-base-content/50 tabular-nums self-center">
-              {entry.contextPercent}%
-            </span>
-          </div>
-        );
-      })}
-    </div>
-    </div>
-  );
-}