Add Prettier config and improve extension stability

- Add .prettierrc with 80 character line width
- Update manifest permissions and remove activeTab requirement
- Implement service worker heartbeat to prevent termination
- Remove ping/pong connection health mechanism
- Sort mutations by submission time in ListView
- Update memory-bank submodule and dependencies

Author: dborysov

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 80
+}

memory-bank

@@ -1,15 +1,15 @@
 {
+  "$schema": "https://json.schemastore.org/chrome-manifest",
   "manifest_version": 3,
   "name": "TanStack Query DevTools",
   "version": "0.6.0",
   "description": "Chrome DevTools extension for debugging TanStack Query applications. Inspect queries, mutations, and cache state in real-time.",
-  "permissions": ["activeTab"],
+  "permissions": ["storage"],
   "devtools_page": "devtools.html",
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["content.js"],
-      "run_at": "document_start"
+      "js": ["content.js"]
     }
   ],
   "background": {

package-lock.json

@@ -9,7 +9,6 @@ interface TabConnection {
   inspectedTabId: number;
   connectionId: string;
   connectedAt: number;
-  lastPing: number;
 }
 
 // Track DevTools connections per inspected tab
@@ -59,7 +58,6 @@ chrome.runtime.onConnect.addListener((port) => {
           inspectedTabId,
           connectionId,
           connectedAt: Date.now(),
-          lastPing: Date.now(),
         };
 
         tabConnections.set(inspectedTabId, connection);
@@ -90,19 +88,6 @@ chrome.runtime.onConnect.addListener((port) => {
         return;
       }
 
-      // Handle ping messages for connection health
-      if (message.type === "PING" && inspectedTabId) {
-        const connection = tabConnections.get(inspectedTabId);
-        if (connection) {
-          connection.lastPing = Date.now();
-          port.postMessage({
-            type: "PONG",
-            timestamp: Date.now(),
-          });
-        }
-        return;
-      }
-
       // Forward other messages to the inspected tab's content script
       if (inspectedTabId && message.type) {
         chrome.tabs
@@ -208,6 +193,13 @@ chrome.tabs.onRemoved.addListener((tabId) => {
   tabConnections.delete(tabId);
 });
 
+// https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers#keep_a_service_worker_alive_continuously
+setInterval(
+  () =>
+    void chrome.storage.local.set({ "last-heartbeat": new Date().getTime() }),
+  20000,
+);
+
 // Extension lifecycle
 chrome.runtime.onStartup.addListener(() => {});
 

public/manifest.json

@@ -63,9 +63,13 @@ export function ListView({
           if (aQuery.isActive && !bQuery.isActive) return -1;
           return 0;
         })
-      : filteredData;
+      : [...filteredData].sort((a, b) => {
+          const aMutation = a as MutationData;
+          const bMutation = b as MutationData;
+
+          return bMutation.submittedAt - aMutation.submittedAt;
+        });
 
-  // Update keyboard navigation item count when sorted data changes
   useEffect(() => {
     if (currentView === "queries" && queryKeyboardNavigation) {
       queryKeyboardNavigation.updateItemCount(sortedData.length);
@@ -126,7 +130,7 @@ export function ListView({
               No mutations found.
             </div>
           ) : (
-            filteredData.map((item, index) => {
+            sortedData.map((item, index) => {
               const mutation = item as MutationData;
               const originalIndex = mutations.indexOf(mutation);
               return (

src/background/background.ts

@@ -19,7 +19,6 @@ export const useConnection = (): UseConnectionReturn => {
   >(null);
   const [queries, setQueries] = useState<QueryData[]>([]);
   const [mutations, setMutations] = useState<MutationData[]>([]);
-  const [reconnectAttempts, setReconnectAttempts] = useState(0);
   // Track artificial states triggered by DevTools
   const [artificialStates, setArtificialStates] = useState<
     Map<string, "loading" | "error">
@@ -28,7 +27,6 @@ export const useConnection = (): UseConnectionReturn => {
   // Connection management
   const portRef = useRef<chrome.runtime.Port | null>(null);
   const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const heartbeatIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
   // Send message function
   const sendMessage = useCallback((message: unknown) => {
@@ -58,28 +56,7 @@ export const useConnection = (): UseConnectionReturn => {
       });
 
       port.onMessage.addListener((message) => {
-        if (message.type === "CONNECTION_ESTABLISHED") {
-          setReconnectAttempts(0);
-
-          // Start heartbeat
-          if (heartbeatIntervalRef.current) {
-            clearInterval(heartbeatIntervalRef.current);
-          }
-          heartbeatIntervalRef.current = setInterval(() => {
-            if (portRef.current) {
-              try {
-                portRef.current.postMessage({
-                  type: "PING",
-                  timestamp: Date.now(),
-                });
-              } catch (error) {
-                console.warn("Failed to send ping:", error);
-              }
-            }
-          }, 10000); // Ping every 10 seconds
-        } else if (message.type === "PONG") {
-          // Connection is healthy
-        } else if (message.type === "INITIAL_STATE") {
+        if (message.type === "INITIAL_STATE") {
           // Clear previous data when connecting to a different tab
           setQueries([]);
           setMutations([]);
@@ -110,9 +87,13 @@ export const useConnection = (): UseConnectionReturn => {
           switch (message.subtype) {
             case "QUERY_CLIENT_DETECTED":
               setTanStackQueryDetected(true);
+              // Clear artificial states when TanStack Query is detected (page refresh/reload)
+              setArtificialStates(new Map());
               break;
             case "QUERY_CLIENT_NOT_FOUND":
               setTanStackQueryDetected(false);
+              // Clear artificial states when TanStack Query is not found
+              setArtificialStates(new Map());
               break;
             case "QUERY_STATE_UPDATE":
               break;
@@ -161,50 +142,21 @@ export const useConnection = (): UseConnectionReturn => {
           }
         }
       });
-
-      port.onDisconnect.addListener(() => {
-        portRef.current = null;
-
-        // Clear heartbeat
-        if (heartbeatIntervalRef.current) {
-          clearInterval(heartbeatIntervalRef.current);
-          heartbeatIntervalRef.current = null;
-        }
-
-        // Attempt reconnection with exponential backoff
-        const attempt = reconnectAttempts + 1;
-        setReconnectAttempts(attempt);
-
-        if (attempt <= 5) {
-          const delay = Math.min(1000 * Math.pow(2, attempt - 1), 10000); // Max 10s delay
-
-          reconnectTimeoutRef.current = setTimeout(() => {
-            connectToBackground();
-          }, delay);
-        } else {
-          console.error("Failed to reconnect after 5 attempts");
-        }
-      });
     } catch (error) {
       console.error("Failed to connect to background script:", error);
     }
-  }, [reconnectAttempts]);
+  }, []);
 
   useEffect(() => {
     connectToBackground();
 
+    const reconnectTimeout = reconnectTimeoutRef.current;
+
     // Cleanup function
     return () => {
-      if (portRef.current) {
-        portRef.current.disconnect();
-        portRef.current = null;
-      }
-      if (reconnectTimeoutRef.current) {
-        clearTimeout(reconnectTimeoutRef.current);
-      }
-      if (heartbeatIntervalRef.current) {
-        clearInterval(heartbeatIntervalRef.current);
-      }
+      portRef.current?.disconnect();
+      portRef.current = null;
+      if (reconnectTimeout) clearTimeout(reconnectTimeout);
     };
   }, [connectToBackground]);
 

src/components/layout/ListView.tsx

@@ -4,6 +4,7 @@ interface UseKeyboardNavigationOptions {
   enabled?: boolean;
   itemCount: number;
   enableWrapAround?: boolean;
+  onActivate?: (index: number) => void;
 }
 
 interface UseKeyboardNavigationReturn {
@@ -120,6 +121,15 @@ export function useKeyboardNavigation(
           break;
         }
 
+        case " ":
+        case "Enter": {
+          event.preventDefault();
+          if (focusedIndex !== null && options.onActivate) {
+            options.onActivate(focusedIndex);
+          }
+          break;
+        }
+
         case "Tab": {
           // Allow normal tab behavior but reset keyboard navigation state
           setKeyboardFocused(false);
@@ -132,7 +142,7 @@ export function useKeyboardNavigation(
           break;
       }
     },
-    [enabled, currentItemCount, focusedIndex, enableWrapAround],
+    [enabled, currentItemCount, focusedIndex, enableWrapAround, options],
   );
 
   // Reset focus

src/hooks/useConnection.ts

@@ -36,12 +36,18 @@ export const useViewState = (): UseViewStateReturn => {
     enabled: currentView === "queries",
     itemCount: 0, // Item count will be updated by the component with filtered data
     enableWrapAround: true,
+    onActivate: (index: number) => {
+      setSelectedQueryIndex(index);
+    },
   });
 
   const mutationKeyboardNavigation = useKeyboardNavigation({
     enabled: currentView === "mutations",
     itemCount: 0, // Item count will be updated by the component with filtered data
     enableWrapAround: true,
+    onActivate: (index: number) => {
+      setSelectedMutationIndex(index);
+    },
   });
 
   // Handle view changes with automatic selection clearing

src/hooks/useKeyboardNavigation.ts

@@ -297,6 +297,8 @@ function performEnhancedDetection() {
       subtype: "QUERY_CLIENT_NOT_FOUND",
     });
   }
+
+  return detected;
 }
 
 // Query action handlers
@@ -534,23 +536,23 @@ if (typeof window !== "undefined") {
   window.__TANSTACK_QUERY_DEVTOOLS_INJECTED__ = true;
 
   // Perform initial detection
-  performEnhancedDetection();
-
-  // Also check periodically in case TanStack Query is loaded dynamically
-  // Continue checking until TanStack Query is found (no artificial limit)
-  let detectionFound = false;
-  const interval = setInterval(() => {
-    if (!detectionFound && detectTanStackQuery()) {
-      detectionFound = true;
-      performEnhancedDetection();
-      clearInterval(interval);
-    }
-  }, 1000);
+  if (!performEnhancedDetection()) {
+    // Also check periodically in case TanStack Query is loaded dynamically
+    // Continue checking until TanStack Query is found (no artificial limit)
+    let detectionFound = false;
+    const interval = setInterval(() => {
+      if (!detectionFound && detectTanStackQuery()) {
+        detectionFound = true;
+        performEnhancedDetection();
+        clearInterval(interval);
+      }
+    }, 1000);
 
-  // Stop checking after 2 minutes to avoid infinite polling
-  setTimeout(() => {
-    if (!detectionFound) {
-      clearInterval(interval);
-    }
-  }, 120000);
+    // Stop checking after 2 minutes to avoid infinite polling
+    setTimeout(() => {
+      if (!detectionFound) {
+        clearInterval(interval);
+      }
+    }, 120000);
+  }
 }