fix: Phase 4.5 Complete - All Interaction & Time Sync Fixes

STEP 1 - STOP EVENT BUBBLING:
- CompactTelemetryCard: Added preventDefault + TouchEvent type to handleClose
- InfoPanel: stopPropagation already added
- Verified pointer-events-auto exists on mobile cards

STEP 2 - HARD TIME RESET:
- useSimulationLoop: Added resetTime() function that clears accumulator
- Timeline: Added onHardReset prop and updated handleReturnToNow to use it
- page.tsx: Connected simulationLoop.resetTime to Timeline

STEP 3 - WORKER SYNC:
- satellite.worker.ts: Added RESET_TIME case for acknowledgment

STEP 4 - GLOBAL CLICK SAFETY:
- Verified pointer-events-auto on CompactTelemetryCard

Author: SpaceEngineerSS

src/app/page.tsx

@@ -428,6 +428,7 @@ function PageContent() {
                         onTogglePlay={handleTogglePlay}
                         multiplier={timeMultiplier}
                         onMultiplierChange={handleMultiplierChange}
+                        onHardReset={simulationLoop.resetTime}
                     />
                 </>
             )}

src/components/HUD/Mobile/CompactTelemetryCard.tsx

@@ -41,8 +41,9 @@ export default function CompactTelemetryCard({
         };
     }, [telemetry]);
 
-    const handleClose = (e: React.MouseEvent) => {
-        e.stopPropagation(); // Prevent click from bubbling to satellite layer
+    const handleClose = (e: React.MouseEvent | React.TouchEvent) => {
+        e.stopPropagation(); // CRITICAL: Stop event from reaching the map
+        e.preventDefault();  // Prevent default touch behaviors
         setSelectedObject(null);
     };
 

src/components/HUD/Timeline.tsx

@@ -13,6 +13,7 @@ interface TimelineProps {
    onTogglePlay?: () => void;
    multiplier?: number;
    onMultiplierChange?: (val: number) => void;
+   onHardReset?: (newTime: number) => void; // For flushing simulation accumulator
 }
 
 const Timeline: React.FC<TimelineProps> = ({
@@ -21,7 +22,8 @@ const Timeline: React.FC<TimelineProps> = ({
    isPlaying = true,
    onTogglePlay = () => { },
    multiplier = 1,
-   onMultiplierChange = () => { }
+   onMultiplierChange = () => { },
+   onHardReset
 }) => {
    const [isMobile, setIsMobile] = useState(false);
    const [isExpanded, setIsExpanded] = useState(false);
@@ -43,7 +45,21 @@ const Timeline: React.FC<TimelineProps> = ({
    };
 
    const handleReturnToNow = () => {
-      onTimeChange(new Date());
+      const now = Date.now();
+
+      // Hard reset sequence:
+      // 1. Reset multiplier to 1x first
+      if (multiplier > 1) {
+         onMultiplierChange(1);
+      }
+
+      // 2. Flush simulation accumulator (prevents catching up)
+      if (onHardReset) {
+         onHardReset(now);
+      }
+
+      // 3. Update store time
+      onTimeChange(new Date(now));
    };
 
    // Mobile Compact Timeline

src/hooks/useSimulationLoop.ts

@@ -82,6 +82,8 @@ export interface UseSimulationLoopReturn {
     getSelectedTelemetry: () => SelectedSatelliteTelemetry | null;
     /** Get link indices */
     getLinks: () => number[];
+    /** Reset time (clears accumulator, for 'Now' button) */
+    resetTime: (newTime: number) => void;
     /** Is worker ready */
     isReady: boolean;
 }
@@ -305,6 +307,28 @@ export function useSimulationLoop(): UseSimulationLoopReturn {
         return stateRef.current.links;
     }, []);
 
+    // -------------------------------------------------------------------------
+    // Reset Time (for 'Now' button - clears accumulator to prevent catching up)
+    // -------------------------------------------------------------------------
+    const resetTime = useCallback((newTime: number) => {
+        const state = stateRef.current;
+
+        // Clear accumulator to prevent time jumping forward
+        state.accumulator = 0;
+        state.simulationTime = newTime;
+        state.lastFrameTime = performance.now();
+
+        // Notify worker
+        if (state.worker) {
+            state.worker.postMessage({
+                type: 'RESET_TIME',
+                payload: { simulationTime: newTime }
+            });
+        }
+
+        console.log('[SimLoop] Time reset, accumulator cleared');
+    }, []);
+
     // -------------------------------------------------------------------------
     // Cleanup on unmount
     // -------------------------------------------------------------------------
@@ -329,6 +353,7 @@ export function useSimulationLoop(): UseSimulationLoopReturn {
         getPositions,
         getSelectedTelemetry,
         getLinks,
+        resetTime,
         isReady: stateRef.current.isInitialized
     };
 }

src/workers/satellite.worker.ts

@@ -76,6 +76,10 @@ self.onmessage = (e: MessageEvent) => {
                     payload?.durationMinutes || 90
                 );
                 break;
+            case 'RESET_TIME':
+                // Acknowledge time reset - clear any prediction caches if needed
+                console.log('[Worker] Time reset acknowledged');
+                break;
             case 'TERMINATE':
                 cachedSatRecs = [];
                 positionBuffer = null;