Update src/components/WorldTreeVisualizer.tsx

src/components/WorldTreeVisualizer.tsx

@@ -86,6 +86,119 @@ export const WorldTreeVisualizer: React.FC<WorldTreeVisualizerProps> = ({ audioE
     frameCount: 0
   })
 
+  // Hidden Auto-Refresh System
+  const autoRefreshRef = useRef({
+    lastRefresh: 0,
+    refreshInterval: 120000, // 2 minutes base interval
+    performanceDegradationCount: 0,
+    particleHealthChecks: 0,
+    emergencyResetCount: 0,
+    isRefreshing: false
+  })
+
+  // Monitor particle system health
+  const checkParticleHealth = useCallback(() => {
+    if (!spheresRef.current) return true
+    
+    let healthyParticles = 0
+    let totalParticles = 0
+    
+    spheresRef.current.forEach(sphere => {
+      if (!sphere.params.enabled) return
+      
+      const { positions, velocities } = sphere
+      const particleCount = sphere.params.particleCount
+      totalParticles += particleCount
+      
+      for (let i = 0; i < particleCount; i++) {
+        const i3 = i * 3
+        const x = positions[i3]
+        const y = positions[i3 + 1]
+        const z = positions[i3 + 2]
+        const vx = velocities[i3]
+        const vy = velocities[i3 + 1]
+        const vz = velocities[i3 + 2]
+        
+        // Check if particle is healthy (finite values, reasonable position/velocity)
+        if (isFinite(x) && isFinite(y) && isFinite(z) && 
+            isFinite(vx) && isFinite(vy) && isFinite(vz)) {
+          const dist = Math.sqrt(x*x + y*y + z*z)
+          const vel = Math.sqrt(vx*vx + vy*vy + vz*vz)
+          
+          if (dist < 10 && vel < 1) { // Reasonable bounds
+            healthyParticles++
+          }
+        }
+      }
+    })
+    
+    const healthRatio = totalParticles > 0 ? healthyParticles / totalParticles : 1
+    return healthRatio > 0.85 // 85% healthy particles threshold
+  }, [])
+
+  // Perform hidden refresh of particle systems
+  const performHiddenRefresh = useCallback(async (force = false) => {
+    if (autoRefreshRef.current.isRefreshing && !force) return
+    
+    autoRefreshRef.current.isRefreshing = true
+    console.log('🔄 Performing hidden system refresh...')
+    
+    try {
+      // Gradual refresh to avoid frame drops
+      for (let sphereIndex = 0; sphereIndex < spheresRef.current.length; sphereIndex++) {
+        const sphere = spheresRef.current[sphereIndex]
+        if (!sphere.params.enabled) continue
+        
+        // Refresh 20% of particles at a time over 5 frames
+        const particleCount = sphere.params.particleCount
+        const batchSize = Math.floor(particleCount * 0.2)
+        
+        for (let batch = 0; batch < 5; batch++) {
+          const startIdx = batch * batchSize
+          const endIdx = Math.min(startIdx + batchSize, particleCount)
+          
+          // Reset particles in this batch
+          for (let i = startIdx; i < endIdx; i++) {
+            const i3 = i * 3
+            const radius = sphere.params.sphereRadius * sphere.params.innerSphereRadius
+            const theta = Math.random() * Math.PI * 2
+            const phi = Math.acos(2 * Math.random() - 1)
+            const r = Math.cbrt(Math.random()) * radius
+
+            sphere.positions[i3] = r * Math.sin(phi) * Math.cos(theta)
+            sphere.positions[i3 + 1] = r * Math.sin(phi) * Math.sin(theta)
+            sphere.positions[i3 + 2] = r * Math.cos(phi)
+
+            sphere.velocities[i3] = 0
+            sphere.velocities[i3 + 1] = 0
+            sphere.velocities[i3 + 2] = 0
+
+            sphere.lifetimes[i] = Math.random() * sphere.params.particleLifetime
+            sphere.beatEffects[i] = 0
+          }
+          
+          // Wait one frame between batches to maintain smooth animation
+          if (batch < 4) {
+            await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)))
+          }
+        }
+        
+                 // Note: Geometry updates are handled by the main animation loop
+      }
+      
+      // Reset counters
+      autoRefreshRef.current.performanceDegradationCount = 0
+      autoRefreshRef.current.emergencyResetCount = 0
+      autoRefreshRef.current.lastRefresh = Date.now()
+      
+      console.log('✅ Hidden refresh completed successfully')
+    } catch (error) {
+      console.warn('⚠️ Hidden refresh error:', error)
+    } finally {
+      autoRefreshRef.current.isRefreshing = false
+    }
+  }, [])
+
   // ENTRONAUT: Initialize emergence field analysis - SIMPLIFIED for performance
   const initializeEntronaut = useCallback(() => {
     // Simplified - basic structure for UI display only
@@ -692,7 +805,7 @@ export const WorldTreeVisualizer: React.FC<WorldTreeVisualizerProps> = ({ audioE
     const deltaTime = lastTimeRef.current ? (currentTime - lastTimeRef.current) / 1000 : 0
     lastTimeRef.current = currentTime
 
-    // Simple FPS monitoring - no complex optimization
+    // Enhanced FPS monitoring with auto-refresh triggers
     setPerformanceStats(prev => {
       const frameCount = prev.frameCount + 1
       const timeSinceLastUpdate = currentTime - prev.lastFpsUpdate
@@ -702,6 +815,52 @@ export const WorldTreeVisualizer: React.FC<WorldTreeVisualizerProps> = ({ audioE
         const totalParticles = spheresRef.current.reduce((sum, sphere) => 
           sum + (sphere.params.enabled ? sphere.params.particleCount : 0), 0)
         
+        // Hidden Auto-Refresh Logic
+        const autoRefresh = autoRefreshRef.current
+        const now = Date.now()
+        
+        // Check for performance degradation
+        if (fps < 30) {
+          autoRefresh.performanceDegradationCount++
+        } else {
+          autoRefresh.performanceDegradationCount = Math.max(0, autoRefresh.performanceDegradationCount - 1)
+        }
+        
+        // Check particle health every 5 seconds
+        if (frameCount % 5 === 0) {
+          autoRefresh.particleHealthChecks++
+          const isHealthy = checkParticleHealth()
+          
+          if (!isHealthy) {
+            autoRefresh.emergencyResetCount++
+          }
+        }
+        
+        // Trigger hidden refresh if conditions are met
+        const timeSinceLastRefresh = now - autoRefresh.lastRefresh
+        const shouldRefresh = (
+          // Periodic refresh (every 2 minutes base)
+          timeSinceLastRefresh > autoRefresh.refreshInterval ||
+          // Performance degradation (3 consecutive low FPS readings)
+          autoRefresh.performanceDegradationCount >= 3 ||
+          // Particle health issues (2 consecutive unhealthy checks)
+          autoRefresh.emergencyResetCount >= 2
+        )
+        
+        if (shouldRefresh && !autoRefresh.isRefreshing) {
+          // Adjust refresh interval based on performance
+          if (autoRefresh.performanceDegradationCount >= 3) {
+            autoRefresh.refreshInterval = 60000 // 1 minute for poor performance
+          } else if (fps > 45) {
+            autoRefresh.refreshInterval = 180000 // 3 minutes for good performance
+          } else {
+            autoRefresh.refreshInterval = 120000 // 2 minutes default
+          }
+          
+          // Perform refresh without blocking the main thread
+          setTimeout(() => performHiddenRefresh(), 100)
+        }
+        
         return {
           fps,
           particleCount: totalParticles,
@@ -2333,14 +2492,36 @@ export const WorldTreeVisualizer: React.FC<WorldTreeVisualizerProps> = ({ audioE
         {!aboutCollapsed && (
           <div style={{
             padding: '20px',
-            transition: 'all 0.3s ease-in-out'
+            transition: 'all 0.3s ease-in-out',
+            position: 'relative'
           }}>
+            {/* Subtle Logo Background */}
             <div style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              marginBottom: '15px'
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundImage: 'url(/images/logo.webp)',
+              backgroundSize: 'contain',
+              backgroundRepeat: 'no-repeat',
+              backgroundPosition: 'center center',
+              opacity: 0.18,
+              borderRadius: '10px',
+              pointerEvents: 'none'
+            }} />
+            
+            {/* Content Overlay */}
+            <div style={{
+              position: 'relative',
+              zIndex: 2
             }}>
+              <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginBottom: '15px'
+              }}>
               <h3 className="ancient-title" style={{ 
                 margin: 0, 
                 fontSize: '15px', 
@@ -2385,6 +2566,7 @@ export const WorldTreeVisualizer: React.FC<WorldTreeVisualizerProps> = ({ audioE
               <div><span className="rune">◯</span> audio-visual emergence field</div>
               <div><span className="rune">≋</span> real-time particle dynamics</div>
             </div>
+            </div>
           </div>
         )}
       </div>