Fix reactive state management to prevent infinite loops

- Implemented debounced graph updates with 100ms delay
- Created derived graphDependencies to track all update triggers in one place
- Added setTimeout to defer state changes in auto-disable logic
- Broke synchronous update cycles that were causing stuttering
- Used updateTimer to prevent multiple simultaneous updates

The graph now updates smoothly without stuttering or infinite loops.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/lib/navigator/EventNetwork/index.svelte

@@ -907,21 +907,10 @@
    * Watch for changes that should trigger a graph update
    */
   let isUpdating = false;
+  let updateTimer: ReturnType<typeof setTimeout> | null = null;
   
-  $effect(() => {
+  // Create a derived state that combines all dependencies
-    // Prevent recursive updates
+  const graphDependencies = $derived({
-    if (isUpdating) return;
-    
-    debug("Effect triggered", {
-      hasSvg: !!svg,
-      eventCount: events?.length,
-      currentLevels,
-    });
-
-    try {
-      if (svg && events?.length) {
-        // Track dependencies
-        const deps = {
     levels: currentLevels,
     star: starVisualization,
     tags: showTagAnchors,
@@ -930,17 +919,39 @@
     persons: showPersonNodes,
     disabledPersons: disabledPersons.size,
     showSignedBy,
-          showReferenced
+    showReferenced,
-        };
+    eventsLength: events?.length || 0
+  });
+  
+  // Debounced update function
+  function scheduleGraphUpdate() {
+    if (updateTimer) {
+      clearTimeout(updateTimer);
+    }
     
+    updateTimer = setTimeout(() => {
+      if (!isUpdating && svg && events?.length > 0) {
+        debug("Scheduled graph update executing", graphDependencies);
         isUpdating = true;
+        try {
           updateGraph();
-        isUpdating = false;
-      }
         } catch (error) {
-      console.error("Error in effect:", error);
+          console.error("Error updating graph:", error);
           errorMessage = `Error updating graph: ${error instanceof Error ? error.message : String(error)}`;
+        } finally {
           isUpdating = false;
+          updateTimer = null;
+        }
+      }
+    }, 100); // 100ms debounce
+  }
+  
+  $effect(() => {
+    // Just track the dependencies and schedule update
+    const deps = graphDependencies;
+    
+    if (svg && events?.length > 0) {
+      scheduleGraphUpdate();
     }
   });
 
@@ -996,12 +1007,22 @@
   /**
    * Watch for tag anchor count and auto-disable if exceeds threshold
    */
+  let autoDisableTimer: ReturnType<typeof setTimeout> | null = null;
+  
   $effect(() => {
+    // Clear any pending timer
+    if (autoDisableTimer) {
+      clearTimeout(autoDisableTimer);
+      autoDisableTimer = null;
+    }
+    
     // Only check when tag anchors are shown and we have tags
     if (showTagAnchors && tagAnchorInfo.length > 0) {
       
       // If we have more than MAX_TAG_ANCHORS and haven't auto-disabled yet
       if (tagAnchorInfo.length > MAX_TAG_ANCHORS && !autoDisabledTags) {
+        // Defer the state update to break the sync cycle
+        autoDisableTimer = setTimeout(() => {
           debug(`Auto-disabling tags: ${tagAnchorInfo.length} exceeds maximum of ${MAX_TAG_ANCHORS}`);
           
           // Disable all tags
@@ -1016,17 +1037,22 @@
           
           // Optional: Show a notification to the user
           console.info(`[EventNetwork] Auto-disabled ${tagAnchorInfo.length} tag anchors to prevent graph overload. Click individual tags in the legend to enable them.`);
+        }, 0);
       }
       
       // Reset auto-disabled flag if tag count goes back down
       if (tagAnchorInfo.length <= MAX_TAG_ANCHORS && autoDisabledTags) {
+        autoDisableTimer = setTimeout(() => {
           autoDisabledTags = false;
+        }, 0);
       }
     }
     
     // Reset when tag anchors are hidden
     if (!showTagAnchors && autoDisabledTags) {
+      autoDisableTimer = setTimeout(() => {
         autoDisabledTags = false;
+      }, 0);
     }
   });