@cryptiklemur/lattice 4.0.2 → 5.0.0

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

@@ -1,107 +0,0 @@
-import { useState } from "react";
-import { createPortal } from "react-dom";
-import { getChartColors } from "../chartTokens";
-
-interface TimelineDatum {
-  id: string;
-  title: string;
-  project: string;
-  start: number;
-  end: number;
-  cost: number;
-}
-
-interface SessionTimelineProps {
-  data: TimelineDatum[];
-}
-
-var ROW_HEIGHT = 16;
-var ROW_GAP = 2;
-var ROW_STEP = ROW_HEIGHT + ROW_GAP;
-var LEFT_MARGIN = 8;
-var RIGHT_MARGIN = 8;
-
-
-function formatTime(ts: number): string {
-  var d = new Date(ts);
-  return (d.getMonth() + 1) + "/" + d.getDate() + " " + String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
-}
-
-export function SessionTimeline({ data }: SessionTimelineProps) {
-  var [hover, setHover] = useState<{ x: number; y: number; datum: TimelineDatum } | null>(null);
-  var colors = getChartColors();
-
-  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 in this period</span>
-        <span className="text-base-content/15 text-[10px]">Session durations will appear as bars on a timeline</span>
-      </div>
-    );
-  }
-
-  var projects = Array.from(new Set(data.map(function (d) { return d.project; })));
-  function getColor(project: string): string {
-    var idx = projects.indexOf(project);
-    return colors.palette[idx % colors.palette.length];
-  }
-
-  var minTime = Infinity;
-  var maxTime = -Infinity;
-  for (var i = 0; i < data.length; i++) {
-    if (data[i].start < minTime) minTime = data[i].start;
-    if (data[i].end > maxTime) maxTime = data[i].end;
-  }
-  var timeRange = maxTime - minTime || 1;
-
-  var svgHeight = data.length * ROW_STEP;
-  var maxHeight = 300;
-
-  return (
-    <div className="relative overflow-y-auto overflow-x-hidden" style={{ maxHeight: maxHeight }}>
-      <svg width="100%" height={svgHeight} className="block" viewBox={"0 0 600 " + svgHeight} preserveAspectRatio="none">
-        {data.map(function (d, idx) {
-          var barWidth = 600 - LEFT_MARGIN - RIGHT_MARGIN;
-          var x1 = LEFT_MARGIN + ((d.start - minTime) / timeRange) * barWidth;
-          var x2 = LEFT_MARGIN + ((d.end - minTime) / timeRange) * barWidth;
-          var w = Math.max(x2 - x1, 3);
-          var y = idx * ROW_STEP;
-
-          return (
-            <rect
-              key={d.id}
-              x={x1}
-              y={y}
-              width={w}
-              height={ROW_HEIGHT}
-              rx={3}
-              ry={3}
-              fill={getColor(d.project)}
-              opacity={0.7}
-              onMouseEnter={function (e) {
-                setHover({ x: e.clientX, y: e.clientY, datum: d });
-              }}
-              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 max-w-[200px]"
-          style={{ left: hover.x + 12, top: hover.y - 50 }}
-        >
-          <p className="text-[10px] font-mono text-base-content/50 mb-1 truncate">{hover.datum.title}</p>
-          <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
-            <p><span className="text-base-content/40">project </span>{hover.datum.project}</p>
-            <p><span className="text-base-content/40">start </span>{formatTime(hover.datum.start)}</p>
-            <p><span className="text-base-content/40">end </span>{formatTime(hover.datum.end)}</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/TokenFlowChart.tsx

@@ -1,78 +0,0 @@
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import { useChartFullscreen } from "../ChartCard";
-import { getChartColors, getTickStyle } from "../chartTokens";
-
-interface TokenFlowDatum {
-  date: string;
-  input: number;
-  output: number;
-  cacheRead: number;
-}
-
-interface TokenFlowChartProps {
-  data: TokenFlowDatum[];
-}
-
-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.toLocaleString()}</span>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-function formatTokens(v: number): string {
-  if (v >= 1000000) return (v / 1000000).toFixed(1) + "M";
-  if (v >= 1000) return (v / 1000).toFixed(0) + "k";
-  return String(v);
-}
-
-export function TokenFlowChart({ data }: TokenFlowChartProps) {
-  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="inputGrad" 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.25} />
-          </linearGradient>
-          <linearGradient id="outputGrad" 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.25} />
-          </linearGradient>
-          <linearGradient id="cacheReadGrad" 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.25} />
-          </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={formatTokens} />
-        <Tooltip content={<CustomTooltip />} />
-        <Area type="monotone" dataKey="input" stackId="1" stroke={colors.primary} fill="url(#inputGrad)" strokeWidth={2} isAnimationActive={false} />
-        <Area type="monotone" dataKey="output" stackId="1" stroke={colors.success} fill="url(#outputGrad)" strokeWidth={2} isAnimationActive={false} />
-        <Area type="monotone" dataKey="cacheRead" stackId="1" stroke={colors.warning} fill="url(#cacheReadGrad)" strokeWidth={2} isAnimationActive={false} />
-      </AreaChart>
-    </ResponsiveContainer>
-  );
-}

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

@@ -1,93 +0,0 @@
-import { Sankey, Tooltip, ResponsiveContainer } from "recharts";
-import { useChartFullscreen } from "../ChartCard";
-import { getChartColors } from "../chartTokens";
-
-interface SankeyData {
-  nodes: Array<{ name: string }>;
-  links: Array<{ source: number; target: number; value: number }>;
-}
-
-interface TokenSankeyChartProps {
-  data: SankeyData;
-}
-
-function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: { source?: { name: string }; target?: { name: string }; value?: number; name?: string } }> }) {
-  if (!active || !payload || payload.length === 0) return null;
-  var d = payload[0].payload;
-  if (d.source && d.target) {
-    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">
-          {d.source.name} → {d.target.name}: {(d.value || 0).toLocaleString()}
-        </p>
-      </div>
-    );
-  }
-  if (d.name) {
-    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">{d.name}</p>
-      </div>
-    );
-  }
-  return null;
-}
-
-function SankeyNode({ x, y, width, height, index, payload }: { x: number; y: number; width: number; height: number; index: number; payload: { name: string } }) {
-  var colors = getChartColors();
-  var NODE_COLORS: Record<string, string> = {
-    "Input Tokens": colors.primary,
-    "Cache Read": colors.warning,
-    "Cache Creation": colors.accent,
-    "Opus": colors.secondary,
-    "Sonnet": colors.primary,
-    "Haiku": colors.success,
-    "Other": colors.warning,
-    "Output Tokens": colors.success,
-  };
-  var color = NODE_COLORS[payload.name] || colors.primary;
-  return (
-    <g>
-      <rect x={x} y={y} width={width} height={height} fill={color} fillOpacity={0.85} rx={2} />
-      {height > 14 && (
-        <text
-          x={x + width + 6}
-          y={y + height / 2}
-          dy={4}
-          fill={colors.tickFill}
-          fontSize={9}
-          fontFamily="var(--font-mono)"
-        >
-          {payload.name}
-        </text>
-      )}
-    </g>
-  );
-}
-
-export function TokenSankeyChart({ data }: TokenSankeyChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
-  if (!data.links || data.links.length === 0) {
-    return (
-      <div className="flex items-center justify-center h-[250px] text-base-content/30 font-mono text-[12px]">
-        No token flow data
-      </div>
-    );
-  }
-
-  return (
-    <ResponsiveContainer width="100%" height={fullscreenHeight || 250}>
-      <Sankey
-        data={data}
-        node={<SankeyNode x={0} y={0} width={0} height={0} index={0} payload={{ name: "" }} />}
-        link={{ stroke: colors.gridStroke }}
-        margin={{ top: 10, right: 100, left: 10, bottom: 10 }}
-        nodeWidth={12}
-        nodePadding={14}
-      >
-        <Tooltip content={<CustomTooltip />} />
-      </Sankey>
-    </ResponsiveContainer>
-  );
-}

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

@@ -1,123 +0,0 @@
-import { useMemo } from "react";
-import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
-import { getChartColors } from "../chartTokens";
-
-interface ToolSunburstProps {
-  data: Array<{ name: string; category: string; count: number }>;
-}
-
-function getCategoryColor(category: string): string {
-  var colors = getChartColors();
-  return colors.category[category] || colors.category.Other;
-}
-
-function getToolColor(category: string, index: number): string {
-  var base = getCategoryColor(category);
-  var opacity = 0.9 - index * 0.12;
-  if (opacity < 0.4) opacity = 0.4;
-  return base.startsWith("oklch") ? base.replace(")", " / " + opacity + ")") : base + String(Math.round(opacity * 255).toString(16)).padStart(2, "0");
-}
-
-function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number; payload: { category?: string } }> }) {
-  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 font-bold">{entry.name}</p>
-      {entry.payload.category && (
-        <p className="text-[10px] font-mono text-base-content/40">{entry.payload.category}</p>
-      )}
-      <p className="text-[10px] font-mono text-base-content/60">{entry.value.toLocaleString()} calls</p>
-    </div>
-  );
-}
-
-export function ToolSunburst({ data }: ToolSunburstProps) {
-  if (!data || data.length === 0) {
-    return (
-      <div className="flex items-center justify-center h-[250px] text-base-content/25 font-mono text-[11px]">
-        No tool data
-      </div>
-    );
-  }
-
-  var { innerData, outerData } = useMemo(function () {
-    var categoryTotals = new Map<string, number>();
-    for (var i = 0; i < data.length; i++) {
-      var cat = data[i].category;
-      categoryTotals.set(cat, (categoryTotals.get(cat) || 0) + data[i].count);
-    }
-    var innerData: Array<{ name: string; value: number }> = [];
-    categoryTotals.forEach(function (count, category) {
-      innerData.push({ name: category, value: count });
-    });
-    innerData.sort(function (a, b) { return b.value - a.value; });
-    var categoryOrder = innerData.map(function (d) { return d.name; });
-    var outerData: Array<{ name: string; category: string; value: number }> = [];
-    for (var ci = 0; ci < categoryOrder.length; ci++) {
-      var catName = categoryOrder[ci];
-      var catTools = data
-        .filter(function (d) { return d.category === catName; })
-        .sort(function (a, b) { return b.count - a.count; });
-      for (var ti = 0; ti < catTools.length; ti++) {
-        outerData.push({ name: catTools[ti].name, category: catName, value: catTools[ti].count });
-      }
-    }
-    return { innerData, outerData };
-  }, [data]);
-
-  return (
-    <div>
-      <ResponsiveContainer width="100%" height={220}>
-        <PieChart>
-          <Pie
-            data={innerData}
-            dataKey="value"
-            nameKey="name"
-            innerRadius={35}
-            outerRadius={60}
-            paddingAngle={2}
-            startAngle={90}
-            endAngle={-270}
-            isAnimationActive={false}
-          >
-            {innerData.map(function (entry) {
-              return <Cell key={"inner-" + entry.name} fill={getCategoryColor(entry.name)} />;
-            })}
-          </Pie>
-          <Pie
-            data={outerData}
-            dataKey="value"
-            nameKey="name"
-            innerRadius={65}
-            outerRadius={90}
-            paddingAngle={1}
-            startAngle={90}
-            endAngle={-270}
-            isAnimationActive={false}
-          >
-            {outerData.map(function (entry, index) {
-              var catIndex = outerData.slice(0, index).filter(function (d) { return d.category === entry.category; }).length;
-              return <Cell key={"outer-" + entry.name} fill={getToolColor(entry.category, catIndex)} />;
-            })}
-          </Pie>
-          <Tooltip content={<CustomTooltip />} />
-        </PieChart>
-      </ResponsiveContainer>
-      <div className="flex flex-wrap justify-center gap-3 mt-1">
-        {innerData.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: getCategoryColor(entry.name) }}
-              />
-              <span>{entry.name}</span>
-              <span className="text-base-content/30">{entry.value}</span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

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

@@ -1,110 +0,0 @@
-import { Treemap, ResponsiveContainer, Tooltip } from "recharts";
-import { useChartFullscreen } from "../ChartCard";
-import { getChartColors, getIntensityColor } from "../chartTokens";
-
-interface ToolTreemapProps {
-  data: Array<{ name: string; count: number; avgCost: number }>;
-}
-
-var MAX_COST_INTENSITY = 0.5;
-
-function getColor(avgCost: number, maxCost: number): string {
-  var intensity = maxCost > 0 ? Math.min(avgCost / maxCost, 1) : 0.3;
-  return getIntensityColor(intensity);
-}
-
-function CustomContent(props: {
-  x?: number; y?: number; width?: number; height?: number;
-  name?: string; count?: number; avgCost?: number;
-  maxCost?: number;
-}) {
-  var { x = 0, y = 0, width = 0, height = 0, name = "", count = 0, avgCost = 0, maxCost = MAX_COST_INTENSITY } = props;
-  if (width < 4 || height < 4) return null;
-  var colors = getChartColors();
-  var showLabel = width > 40 && height > 20;
-  var showCount = width > 50 && height > 34;
-  return (
-    <g>
-      <rect
-        x={x + 1}
-        y={y + 1}
-        width={width - 2}
-        height={height - 2}
-        rx={3}
-        fill={getColor(avgCost, maxCost)}
-        fillOpacity={0.85}
-        stroke={colors.gridStroke}
-        strokeWidth={1}
-      />
-      {showLabel && (
-        <text
-          x={x + width / 2}
-          y={y + height / 2 + (showCount ? -5 : 0)}
-          textAnchor="middle"
-          dominantBaseline="middle"
-          style={{ fontSize: 10, fontFamily: "var(--font-mono)", fill: colors.tickFill }}
-        >
-          {name}
-        </text>
-      )}
-      {showCount && (
-        <text
-          x={x + width / 2}
-          y={y + height / 2 + 9}
-          textAnchor="middle"
-          dominantBaseline="middle"
-          style={{ fontSize: 9, fontFamily: "var(--font-mono)", fill: colors.tickFill }}
-        >
-          {count}
-        </text>
-      )}
-    </g>
-  );
-}
-
-function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: { name: string; count: number; avgCost: number } }> }) {
-  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">
-      <p className="text-[11px] font-mono text-base-content font-bold mb-1">{d.name}</p>
-      <div className="text-[10px] font-mono text-base-content/60 space-y-0.5">
-        <p><span className="text-base-content/40">calls </span>{d.count.toLocaleString()}</p>
-        <p><span className="text-base-content/40">avg cost </span>${d.avgCost.toFixed(4)}</p>
-      </div>
-    </div>
-  );
-}
-
-export function ToolTreemap({ data }: ToolTreemapProps) {
-  var fullscreenHeight = useChartFullscreen();
-  if (!data || data.length === 0) {
-    return (
-      <div className="flex items-center justify-center h-[250px] text-base-content/25 font-mono text-[11px]">
-        No tool data
-      </div>
-    );
-  }
-
-  var maxCost = 0;
-  for (var i = 0; i < data.length; i++) {
-    if (data[i].avgCost > maxCost) maxCost = data[i].avgCost;
-  }
-
-  var treemapData = data.map(function (d) {
-    return { name: d.name, size: d.count, count: d.count, avgCost: d.avgCost, maxCost: maxCost };
-  });
-
-  return (
-    <ResponsiveContainer width="100%" height={fullscreenHeight || 250}>
-      <Treemap
-        data={treemapData}
-        dataKey="size"
-        aspectRatio={4 / 3}
-        content={<CustomContent maxCost={maxCost} />}
-      >
-        <Tooltip content={<CustomTooltip />} />
-      </Treemap>
-    </ResponsiveContainer>
-  );
-}

package/src/client/components/auth/PassphrasePrompt.tsx

@@ -1,70 +0,0 @@
-import { useState } from "react";
-
-export function PassphrasePrompt() {
-  var [passphrase, setPassphrase] = useState("");
-  var [error, setError] = useState("");
-  var [loading, setLoading] = useState(false);
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setError("");
-    setLoading(true);
-
-    fetch("/auth", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ passphrase }),
-    })
-      .then(function (res) {
-        if (res.ok) {
-          window.location.reload();
-        } else {
-          setError("Invalid passphrase.");
-          setLoading(false);
-        }
-      })
-      .catch(function () {
-        setError("Connection error.");
-        setLoading(false);
-      });
-  }
-
-  return (
-    <div className="min-h-screen bg-base-100 flex items-center justify-center">
-      <div className="card bg-base-200 border border-base-300 w-full max-w-[340px] shadow-xl">
-        <div className="card-body p-10">
-          <h1 className="text-[15px] font-bold tracking-[0.12em] uppercase text-base-content/60 mb-7">
-            Lattice
-          </h1>
-          <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-            <fieldset className="fieldset">
-              <legend className="fieldset-legend text-[11px] uppercase tracking-[0.1em] text-base-content/40">
-                Passphrase
-              </legend>
-              <input
-                id="passphrase"
-                type="password"
-                value={passphrase}
-                onChange={function (e) { setPassphrase(e.target.value); }}
-                autoFocus
-                autoComplete="current-password"
-                disabled={loading}
-                className="input input-bordered w-full bg-base-100 text-base-content text-[14px]"
-              />
-            </fieldset>
-            <button
-              type="submit"
-              disabled={loading}
-              className={"btn btn-primary w-full mt-1 " + (loading ? "cursor-not-allowed" : "")}
-            >
-              {loading ? "Authenticating..." : "Authenticate"}
-            </button>
-            {error && (
-              <p className="text-[12px] text-error text-center">{error}</p>
-            )}
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}