@cryptiklemur/lattice 1.47.0 → 2.0.0

package/{client/src → src/client}/components/analytics/charts/ResponseTimeScatter.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import {
   ScatterChart,
   Scatter,
@@ -38,17 +39,21 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 export function ResponseTimeScatter({ data }: ResponseTimeScatterProps) {
   var fullscreenHeight = useChartFullscreen();
   var colors = getChartColors();
-  var models = Array.from(new Set(data.map(function (d) { return d.model; })));
 
-  var byModel = models.map(function (model) {
-    return {
-      model: 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 }; }),
-    };
-  });
+  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}>
@@ -81,6 +86,7 @@ export function ResponseTimeScatter({ data }: ResponseTimeScatterProps) {
               data={group.points}
               fill={group.color}
               fillOpacity={0.7}
+              isAnimationActive={false}
             />
           );
         })}

package/{client/src → src/client}/components/analytics/charts/SessionBubbleChart.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import {
   ScatterChart,
   Scatter,
@@ -47,25 +48,30 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
   var fullscreenHeight = useChartFullscreen();
   var colors = getChartColors();
-  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 { 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) {
-    return {
-      project,
-      color: getColor(project),
-      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) }; }),
-    };
-  });
+    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) }; }),
+      };
+    });
 
-  var minTs = Math.min(...data.map(function (d) { return d.timestamp; }));
-  var maxTs = Math.max(...data.map(function (d) { return d.timestamp; }));
+    return { byProject, minTs: isFinite(minTs) ? minTs : 0, maxTs: isFinite(maxTs) ? maxTs : 0 };
+  }, [data, colors.palette]);
 
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
@@ -98,6 +104,7 @@ export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
               data={group.points}
               fill={group.color}
               fillOpacity={0.7}
+              isAnimationActive={false}
             />
           );
         })}

package/{client/src → src/client}/components/analytics/charts/SessionTimeline.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { createPortal } from "react-dom";
 import { getChartColors } from "../chartTokens";
 
 interface TimelineDatum {
@@ -86,9 +87,9 @@ export function SessionTimeline({ data }: SessionTimelineProps) {
         })}
       </svg>
 
-      {hover && (
+      {hover && createPortal(
         <div
-          className="fixed z-50 rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg pointer-events-none max-w-[200px]"
+          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>
@@ -98,7 +99,8 @@ export function SessionTimeline({ data }: SessionTimelineProps) {
             <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>
+        </div>,
+        document.body
       )}
     </div>
   );

package/{client/src → src/client}/components/analytics/charts/TokenFlowChart.tsx

@@ -69,9 +69,9 @@ export function TokenFlowChart({ data }: TokenFlowChartProps) {
         <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} />
-        <Area type="monotone" dataKey="output" stackId="1" stroke={colors.success} fill="url(#outputGrad)" strokeWidth={2} />
-        <Area type="monotone" dataKey="cacheRead" stackId="1" stroke={colors.warning} fill="url(#cacheReadGrad)" strokeWidth={2} />
+        <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/{client/src → src/client}/components/analytics/charts/ToolSunburst.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
 import { getChartColors } from "../chartTokens";
 
@@ -40,30 +41,30 @@ export function ToolSunburst({ data }: ToolSunburstProps) {
     );
   }
 
-  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: string[] = 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 });
+  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>
@@ -78,6 +79,7 @@ export function ToolSunburst({ data }: ToolSunburstProps) {
             paddingAngle={2}
             startAngle={90}
             endAngle={-270}
+            isAnimationActive={false}
           >
             {innerData.map(function (entry) {
               return <Cell key={"inner-" + entry.name} fill={getCategoryColor(entry.name)} />;
@@ -92,6 +94,7 @@ export function ToolSunburst({ data }: ToolSunburstProps) {
             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;

package/{client/src → src/client}/components/chat/ChatView.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useRef, useCallback, useState, useMemo } from "react";
-import { Terminal, Info, ArrowDown, Pencil, Copy, Check, Menu, AlertTriangle, Zap, Square, X, Bookmark } from "lucide-react";
+import { Terminal, Info, ArrowDown, Pencil, Copy, Check, Menu, AlertTriangle, Zap, Square, X, Bookmark, RefreshCw, Loader2 } from "lucide-react";
 import { LatticeLogomark } from "../ui/LatticeLogomark";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useSession } from "../../hooks/useSession";
 import { useProjects } from "../../hooks/useProjects";
 import { useWebSocket } from "../../hooks/useWebSocket";
-import { setSessionTitle, setIsProcessing, setCurrentStatus, setWasInterrupted, setPendingPrefill } from "../../stores/session";
+import { setSessionTitle, setIsProcessing, setCurrentStatus, setWasInterrupted, setPendingPrefill, getSessionStore, invalidateSessionMessageCache } from "../../stores/session";
 import { openSettings, openProjectSettings } from "../../stores/sidebar";
 import { openTab, updateSessionTabTitle } from "../../stores/workspace";
 import { builtinCommands } from "../../commands";
@@ -21,8 +21,46 @@ import { useSpinnerVerb } from "../../hooks/useSpinnerVerb";
 import { useBookmarks } from "../../hooks/useBookmarks";
 import { formatSessionTitle } from "../../utils/formatSessionTitle";
 
+function SessionLoadingState({ fileSize }: { fileSize: number | null }) {
+  var [progress, setProgress] = useState(0);
+
+  useEffect(function () {
+    var start = Date.now();
+    var raf = 0;
+    // Scale the time constant based on file size:
+    // ~50KB → 800ms, ~500KB → 2s, ~5MB → 8s, unknown → 3s
+    var timeConstant = fileSize != null
+      ? Math.max(800, Math.min(fileSize / 60, 8000))
+      : 3000;
+
+    function tick() {
+      var elapsed = Date.now() - start;
+      var raw = 1 - Math.exp(-elapsed / timeConstant);
+      setProgress(Math.min(raw * 90, 90));
+      raf = requestAnimationFrame(tick);
+    }
+
+    raf = requestAnimationFrame(tick);
+    return function () { cancelAnimationFrame(raf); };
+  }, [fileSize]);
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-5 select-none">
+      <div className="flex flex-col items-center gap-3 w-full max-w-[260px]">
+        <p className="text-[11px] font-mono text-base-content/40 tracking-wide">Loading session…</p>
+        <div className="w-full h-[3px] rounded-full bg-base-content/8 overflow-hidden">
+          <div
+            className="h-full rounded-full bg-primary/60 transition-all duration-300 ease-out"
+            style={{ width: progress + "%" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function ChatView({ sessionId: tabSessionId, projectSlug: tabProjectSlug }: { sessionId?: string; projectSlug?: string } = {}) {
-  var { messages, isProcessing, sendMessage, activeSessionId, activeSessionTitle, currentStatus, contextUsage, contextBreakdown, lastResponseCost, lastResponseDuration, historyLoading, historyHasMore, loadMoreHistory, wasInterrupted, promptSuggestion, failedInput, clearFailedInput, messageQueue, enqueueMessage, removeQueuedMessage, updateQueuedMessage, isPlanMode, pendingPrefill, activateSession, budgetStatus, budgetExceeded, sendBudgetOverride, dismissBudgetExceeded } = useSession();
+  var { messages, isProcessing, sendMessage, activeSessionId, activeSessionTitle, currentStatus, contextUsage, contextBreakdown, lastResponseCost, lastResponseDuration, historyLoading, historyLoadingFileSize, historyHasMore, loadMoreHistory, wasInterrupted, promptSuggestion, failedInput, clearFailedInput, messageQueue, enqueueMessage, removeQueuedMessage, updateQueuedMessage, isPlanMode, pendingPrefill, activateSession, budgetStatus, budgetExceeded, sendBudgetOverride, dismissBudgetExceeded } = useSession();
   var { activeProject } = useProjects();
   var { toggleDrawer } = useSidebar();
 
@@ -515,6 +553,22 @@ export function ChatView({ sessionId: tabSessionId, projectSlug: tabProjectSlug
                 </span>
               </button>
             )}
+            {activeSessionId && (
+              <button
+                onClick={function () {
+                  var state = getSessionStore().state;
+                  if (state.activeProjectSlug && state.activeSessionId) {
+                    invalidateSessionMessageCache(state.activeSessionId);
+                    getSessionStore().setState(function (s) { return { ...s, historyLoading: true, messages: [] }; });
+                    ws.send({ type: "session:activate", projectSlug: state.activeProjectSlug, sessionId: state.activeSessionId, refresh: true } as any);
+                  }
+                }}
+                aria-label="Refresh conversation"
+                className={"btn btn-ghost btn-sm btn-square text-base-content/50 hover:text-base-content/70 transition-colors" + (historyLoading ? " animate-spin" : "")}
+              >
+                {historyLoading ? <Loader2 size={14} /> : <RefreshCw size={14} />}
+              </button>
+            )}
             {activeSessionId && (
               <button
                 ref={infoRef}
@@ -741,27 +795,7 @@ export function ChatView({ sessionId: tabSessionId, projectSlug: tabProjectSlug
           </div>
         )}
         {messages.length === 0 && historyLoading ? (
-          <div className="px-5 pt-6 space-y-4 animate-pulse">
-            <div className="chat chat-end">
-              <div className="chat-bubble bg-primary/10 border-0 w-48 h-10" />
-            </div>
-            <div className="chat chat-start">
-              <div className="chat-bubble bg-base-300/50 border-0 space-y-2 w-80">
-                <div className="h-2.5 bg-base-content/8 rounded w-full" />
-                <div className="h-2.5 bg-base-content/8 rounded w-3/4" />
-                <div className="h-2.5 bg-base-content/8 rounded w-5/6" />
-              </div>
-            </div>
-            <div className="chat chat-end">
-              <div className="chat-bubble bg-primary/10 border-0 w-56 h-10" />
-            </div>
-            <div className="chat chat-start">
-              <div className="chat-bubble bg-base-300/50 border-0 space-y-2 w-72">
-                <div className="h-2.5 bg-base-content/8 rounded w-full" />
-                <div className="h-2.5 bg-base-content/8 rounded w-2/3" />
-              </div>
-            </div>
-          </div>
+          <SessionLoadingState fileSize={historyLoadingFileSize} />
         ) : messages.length === 0 ? (
           <div className="flex items-center justify-center p-10 h-full">
             <div className="text-center max-w-[360px]">
@@ -819,7 +853,7 @@ export function ChatView({ sessionId: tabSessionId, projectSlug: tabProjectSlug
         ) : (
           <div
             className="relative w-full"
-            style={{ height: virtualizer.getTotalSize() + "px" }}
+            style={{ height: virtualizer.getTotalSize() + "px", paddingBottom: "24px" }}
           >
             <div
               className="absolute top-0 left-0 w-full will-change-transform"