fix(app): auto-fetch bugs when URL has filters and API key loads

Previously, when the page loaded with URL filters (e.g., ?whiteboard=[kanban]),
bugs weren't fetched automatically even with a valid stored API key. This was
due to a race condition where the filter initialization effect ran before
loadApiKey() completed.

Split the single effect into two:
- Filter initialization (runs once on mount)
- Auto-fetch (triggers when API key becomes available with URL filters)

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

Author: msujaws

src/App.test.tsx

@@ -1,9 +1,11 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
 import App from './App'
 import { useStore } from './store'
 
 describe('App', () => {
+  const originalLocation = window.location
+
   beforeEach(() => {
     // Reset store state before each test
     useStore.setState({
@@ -12,11 +14,40 @@ describe('App', () => {
       bugs: [],
       isLoading: false,
       error: '',
-      filters: { whiteboardTag: '', component: '' },
+      filters: { whiteboardTag: '', component: '', excludeMetaBugs: false, sortOrder: 'priority' },
       changes: new Map(),
       isApplying: false,
       applyError: '',
     })
+
+    // Reset URL to base
+    const mockLocation = {
+      search: '',
+      pathname: '/',
+      href: 'http://localhost:3000/',
+      origin: 'http://localhost:3000',
+      host: 'localhost:3000',
+      hostname: 'localhost',
+      port: '3000',
+      protocol: 'http:',
+      hash: '',
+      assign: vi.fn(),
+      reload: vi.fn(),
+      replace: vi.fn(),
+      toString: () => 'http://localhost:3000/',
+    }
+    Object.defineProperty(window, 'location', {
+      value: mockLocation,
+      writable: true,
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+      writable: true,
+    })
   })
 
   describe('without API key', () => {
@@ -143,4 +174,91 @@ describe('App', () => {
     const appContainer = container.querySelector('.min-h-screen')
     expect(appContainer).toHaveClass('bg-bg-primary')
   })
+
+  describe('auto-fetch with URL filters', () => {
+    it('should auto-fetch bugs when URL has filters and API key is loaded', async () => {
+      // Setup: URL has filters
+      window.location.search = '?whiteboard=%5Bkanban%5D'
+
+      const fetchBugs = vi.fn().mockResolvedValue([])
+
+      // Simulate async API key loading - resolves after a short delay
+      const loadApiKey = vi.fn().mockImplementation(async () => {
+        await new Promise((resolve) => {
+          setTimeout(resolve, 10)
+        })
+        useStore.setState({ apiKey: 'test-api-key', isValid: true })
+      })
+
+      useStore.setState({
+        loadApiKey,
+        fetchBugs,
+        apiKey: '', // No API key initially
+      })
+
+      render(<App />)
+
+      // Wait for loadApiKey to complete and fetchBugs to be called
+      await waitFor(() => {
+        expect(fetchBugs).toHaveBeenCalledWith('test-api-key')
+      })
+    })
+
+    it('should not auto-fetch when URL has no filters even with API key', async () => {
+      // Setup: URL has no filters (search is empty)
+      window.location.search = ''
+
+      const fetchBugs = vi.fn().mockResolvedValue([])
+      const loadApiKey = vi.fn().mockImplementation(() => {
+        useStore.setState({ apiKey: 'test-api-key', isValid: true })
+        return Promise.resolve()
+      })
+
+      useStore.setState({
+        loadApiKey,
+        fetchBugs,
+        apiKey: '',
+      })
+
+      render(<App />)
+
+      // Wait a bit to ensure no auto-fetch happens
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50)
+      })
+
+      expect(fetchBugs).not.toHaveBeenCalled()
+    })
+
+    it('should apply filters from URL to store before fetching', async () => {
+      window.location.search = '?whiteboard=%5Bkanban%5D&component=Core'
+
+      const fetchBugs = vi.fn().mockResolvedValue([])
+      const setFilters = vi.fn()
+      const loadApiKey = vi.fn().mockImplementation(async () => {
+        await new Promise((resolve) => {
+          setTimeout(resolve, 10)
+        })
+        useStore.setState({ apiKey: 'test-api-key', isValid: true })
+      })
+
+      useStore.setState({
+        loadApiKey,
+        fetchBugs,
+        setFilters,
+        apiKey: '',
+      })
+
+      render(<App />)
+
+      await waitFor(() => {
+        expect(setFilters).toHaveBeenCalledWith(
+          expect.objectContaining({
+            whiteboardTag: '[kanban]',
+            component: 'Core',
+          }),
+        )
+      })
+    })
+  })
 })

src/App.tsx

@@ -27,6 +27,7 @@ function App() {
   // URL filter persistence
   const { initialFilters, hasUrlFilters, updateUrl } = useUrlFilters()
   const hasInitializedFilters = useRef(false)
+  const hasAutoFetched = useRef(false)
 
   // Bugs state
   const bugs = useStore((state) => state.bugs)
@@ -67,7 +68,7 @@ function App() {
     }
   }, [changes.size])
 
-  // Initialize filters from URL on mount and auto-fetch if URL has filters
+  // Initialize filters from URL on mount
   useEffect(() => {
     if (hasInitializedFilters.current) {
       return
@@ -77,13 +78,17 @@ function App() {
     // Apply filters from URL
     if (hasUrlFilters) {
       setFilters(initialFilters)
+    }
+  }, [hasUrlFilters, initialFilters, setFilters])
 
-      // Auto-fetch if API key is available
-      if (apiKey) {
-        void fetchBugs(apiKey)
-      }
+  // Auto-fetch when URL has filters and API key becomes available
+  useEffect(() => {
+    if (!hasUrlFilters || hasAutoFetched.current || !apiKey) {
+      return
     }
-  }, [hasUrlFilters, initialFilters, setFilters, apiKey, fetchBugs])
+    hasAutoFetched.current = true
+    void fetchBugs(apiKey)
+  }, [hasUrlFilters, apiKey, fetchBugs])
 
   // Sync filters to URL when they change (after initialization)
   useEffect(() => {