Integrate timeline into Trace panel and filters

Wire TracePanel to the global timeline context so trace data respect timeline source and paused time. Import useTimeline and pass source into useTraceBuffer; apply timelineMode/selectedTimeMs filtering (when paused) to visible frames and add those values to the effect deps.

Simplify Trace page pause handling by removing the frozenRef snapshot logic and instead freezing the cursor via seek to collection end when pausing; update filteredFrames to use the canonical frames array and adjust its deps accordingly. These changes ensure the trace list follows the global timeline source and paused time and simplify state handling.

Author: haoruizhou

pecan/src/components/TracePanel.tsx

@@ -3,6 +3,7 @@ import { useTraceBuffer } from "../lib/useDataStore";
 import type { TelemetrySample } from "../lib/DataStore";
 import TourGuide, { type TourStep } from "./TourGuide";
 import { Play, Pause, Trash2, X, HelpCircle } from "lucide-react";
+import { useTimeline } from "../context/TimelineContext";
 
 type DirectionFilter = "all" | "rx" | "tx";
 
@@ -72,7 +73,8 @@ export default function TracePanel({
   onClose,
   initialOffset = { x: 0, y: 0 },
 }: TracePanelProps) {
-  const { frames, clearTrace } = useTraceBuffer(100);
+  const { source, mode: timelineMode, selectedTimeMs } = useTimeline();
+  const { frames, clearTrace } = useTraceBuffer(100, source);
   const [open, setOpen] = useState(true);
   const [position, setPosition] = useState({ top: 80, left: 80 });
   const [size, setSize] = useState({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
@@ -102,10 +104,14 @@ export default function TracePanel({
   const activeSource = paused ? snapshot : frames;
 
   const visible = useMemo(() => {
+    const timelinePaused = timelineMode === "paused";
+    const timeFiltered = timelinePaused
+      ? activeSource.filter((f) => f.timestamp <= selectedTimeMs)
+      : activeSource;
     let filtered =
       direction === "all"
-        ? activeSource
-        : activeSource.filter((f) => (f.direction ?? "rx") === direction);
+        ? timeFiltered
+        : timeFiltered.filter((f) => (f.direction ?? "rx") === direction);
     if (filter) {
       const term = filter.trim().toLowerCase();
       filtered = filtered.filter(
@@ -115,7 +121,7 @@ export default function TracePanel({
       );
     }
     return filtered.slice(-maxRows);
-  }, [activeSource, direction, maxRows, filter]);
+  }, [activeSource, direction, maxRows, filter, timelineMode, selectedTimeMs]);
 
   const handlePause = () => {
     if (!paused) {

pecan/src/pages/Trace.tsx

@@ -434,14 +434,10 @@ function Trace() {
   const [tourOpen, setTourOpen] = useState(false);
   const [currentTourStep, setCurrentTourStep] = useState(0);
 
-  // Frozen copy while paused
-  const frozenRef = useRef<TelemetrySample[]>([]);
-  const activeFrames = paused ? frozenRef.current : frames;
-
   // Easter Egg State
   const [showRaceGame, setShowRaceGame] = useState(false);
 
-  // Freeze on pause
+  // Pause: freeze the cursor at the latest data point
   const handlePause = useCallback(() => {
     if (replayLocked) {
       return;
@@ -452,15 +448,8 @@ function Trace() {
       return;
     }
 
-    frozenRef.current = [...frames];
     seek(collectionEndMs ?? Date.now());
-  }, [paused, replayLocked, goLive, frames, seek, collectionEndMs]);
-
-  useEffect(() => {
-    if (paused && frozenRef.current.length === 0) {
-      frozenRef.current = [...frames];
-    }
-  }, [paused, frames]);
+  }, [paused, replayLocked, goLive, seek, collectionEndMs]);
 
   // Re-enable auto-scroll when unpausing
   useEffect(() => {
@@ -486,8 +475,8 @@ function Trace() {
   // Filter logic: match CAN ID or message name (comma-separated terms)
   const filteredFrames = useMemo(() => {
     const timelineFrames = paused
-      ? activeFrames.filter((frame) => frame.timestamp <= selectedTimeMs)
-      : activeFrames;
+      ? frames.filter((frame) => frame.timestamp <= selectedTimeMs)
+      : frames;
 
     const terms = filter
       .split(",")
@@ -499,7 +488,7 @@ function Trace() {
       const name = f.messageName.toLowerCase();
       return terms.some((t) => id.includes(t) || name.includes(t));
     });
-  }, [activeFrames, filter, paused, selectedTimeMs]);
+  }, [frames, filter, paused, selectedTimeMs]);
 
   const enriched = useMemo(() => buildEnriched(filteredFrames), [filteredFrames]);
   const fixed = useMemo(() => enriched, [enriched]);