Refactor code style and formatting across multiple files

- Removed unnecessary blank lines and adjusted formatting for consistency in various files including JSON, HTML, CSS, and TypeScript.
- Improved readability by aligning code structure and ensuring proper indentation.
- Updated comments for clarity and consistency in hooks and utility functions.

Author: agch-dev

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,18 +1,17 @@
 ---
 name: Bug report
 about: Something doesn't work.
-title: "[BUG]"
+title: '[BUG]'
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
-
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -29,5 +28,6 @@ NOTE: You should always try and look for a fix first.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. Windows, Linux, MacOS] including version
- - Browser [e.g. chrome, firefox] including version
+
+- OS: [e.g. Windows, Linux, MacOS] including version
+- Browser [e.g. chrome, firefox] including version

.github/dependabot.yml

@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'

.github/stale.yml

@@ -14,4 +14,4 @@ markComment: >
   recent activity. It will be closed if no further activity occurs. Thank you
   for your contributions.
 # Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: true
+closeComment: true

DEBUGGING.md

@@ -9,22 +9,23 @@ The extension now has comprehensive logging throughout all components. This guid
 ### Logger Architecture
 
 All logging uses a centralized logger (`src/lib/logger.ts`) that provides:
+
 - **Colorized output** - Different colors for different contexts
 - **Log levels** - debug, info, warn, error
 - **Context tagging** - Each module has its own logger context
 - **Filtering** - Can filter by log level and context
 
 ### Log Contexts
 
-| Context | Color | Purpose |
-|---------|-------|---------|
-| `background` | 🔴 Red | Background service worker (event capture) |
-| `panel` | 🔵 Cyan | DevTools panel UI |
-| `devtools` | ⚪ Gray | DevTools registration |
-| `storage` | 🟡 Yellow | Zustand store operations |
-| `popup` | 🔵 Blue | Extension popup |
-| `content` | 🟢 Green | Content script |
-| `ui` | 🟣 Purple | UI components |
+| Context      | Color     | Purpose                                   |
+| ------------ | --------- | ----------------------------------------- |
+| `background` | 🔴 Red    | Background service worker (event capture) |
+| `panel`      | 🔵 Cyan   | DevTools panel UI                         |
+| `devtools`   | ⚪ Gray   | DevTools registration                     |
+| `storage`    | 🟡 Yellow | Zustand store operations                  |
+| `popup`      | 🔵 Blue   | Extension popup                           |
+| `content`    | 🟢 Green  | Content script                            |
+| `ui`         | 🟣 Purple | UI components                             |
 
 ### Key Logging Points
 
@@ -95,10 +96,11 @@ Current event count in store: X
 **Check Console Logs in This Order:**
 
 1. **Background Script Console** (Service Worker):
+
    ```
    chrome://extensions/ → Analytics X-Ray → "service worker" link
    ```
-   
+
    ✅ Should see:
    - `🚀 Background service worker loaded`
    - `📡 webRequest listener registered`
@@ -110,7 +112,7 @@ Current event count in store: X
 2. **DevTools Panel Console** (Open DevTools within DevTools):
    - Right-click in DevTools panel → Inspect
    - OR: `Cmd+Option+I` (Mac) / `Ctrl+Shift+I` (Windows) while DevTools is focused
-   
+
    ✅ Should see:
    - `🔧 DevTools script loading...`
    - `🎨 Panel mounted for tab X`
@@ -134,9 +136,10 @@ Current event count in store: X
 #### Step 2: Verify Background Storage
 
 In background console:
+
 ```javascript
 // Check what's stored
-chrome.storage.local.get('events', console.log)
+chrome.storage.local.get('events', console.log);
 
 // Should show:
 // { events: { "123": [ ...array of events... ] } }
@@ -145,6 +148,7 @@ chrome.storage.local.get('events', console.log)
 #### Step 3: Verify Panel Initialization
 
 In DevTools panel console (inspect the DevTools panel):
+
 ```javascript
 // Check if useEventSync is fetching events
 // Look for: "📥 Fetching initial events"
@@ -171,34 +175,40 @@ In DevTools panel console (inspect the DevTools panel):
 #### 1. Background captures but panel doesn't receive
 
 **Symptoms:**
+
 - Background shows `✅ Captured X event(s)`
 - Background shows `⚠️ No listeners for message`
 - Panel doesn't update
 
 **Solution:**
+
 - Panel isn't registered to listen for messages
 - Check if `useEventSync` hook is being used
 - Check if panel console shows `👂 Message listener registered`
 
 #### 2. Different tab IDs
 
 **Symptoms:**
+
 - Background shows events for tab ID `123`
 - Panel shows it's listening for tab ID `456`
 
 **Solution:**
+
 - DevTools panel gets `Browser.devtools.inspectedWindow.tabId`
 - Make sure you're inspecting the correct tab
 - Check panel console: `Inspected tab ID: X`
 
 #### 3. Storage mismatch
 
 **Symptoms:**
+
 - Background stores in `storage.local['events']`
 - Panel stores in `storage.local['tab-123']`
 - Events never sync
 
 **Solution:**
+
 - This is by design - two separate storage locations
 - Background uses `events` for network capture persistence
 - Panel uses `tab-X` for Zustand store persistence
@@ -209,30 +219,32 @@ In DevTools panel console (inspect the DevTools panel):
 ### Enable Only Specific Log Contexts
 
 In any console:
+
 ```javascript
 // Show only background logs
-logger.configure({ enabledContexts: ['background'] })
+logger.configure({ enabledContexts: ['background'] });
 
 // Show only panel and storage logs
-logger.configure({ enabledContexts: ['panel', 'storage'] })
+logger.configure({ enabledContexts: ['panel', 'storage'] });
 
 // Show all logs (default)
-logger.configure({ enabledContexts: 'all' })
+logger.configure({ enabledContexts: 'all' });
 ```
 
 ### Change Log Level
 
 ```javascript
 // Only show warnings and errors
-logger.configure({ minLevel: 'warn' })
+logger.configure({ minLevel: 'warn' });
 
 // Show everything (default)
-logger.configure({ minLevel: 'debug' })
+logger.configure({ minLevel: 'debug' });
 ```
 
 ### Inspect Store State
 
 In panel console (inspect DevTools):
+
 ```javascript
 // Get the tab store for current tab
 const tabId = chrome.devtools.inspectedWindow.tabId;
@@ -249,18 +261,20 @@ useStore.subscribe(console.log);
 ### Manually Trigger Event Fetch
 
 In panel console:
+
 ```javascript
 const tabId = chrome.devtools.inspectedWindow.tabId;
 const events = await chrome.runtime.sendMessage({
   type: 'GET_EVENTS',
-  tabId
+  tabId,
 });
 console.log('Events from background:', events);
 ```
 
 ## Testing the Fix
 
 1. **Reload extension**:
+
    ```
    chrome://extensions/ → Reload button
    ```
@@ -338,4 +352,3 @@ console.log('Events from background:', events);
 [analytics-x-ray] [storage] ➕ Adding event to store (tabId: 123): ...
 [analytics-x-ray] [panel] 📊 Event count changed: 5
 ```
-

LOGGING-SUMMARY.md

@@ -5,6 +5,7 @@
 ### 1. Created Centralized Logger (`src/lib/logger.ts`)
 
 A powerful, colorized logging system with:
+
 - **Multiple log levels**: debug, info, warn, error
 - **Context tagging**: background, panel, devtools, storage, etc.
 - **Colorized output**: Different colors for different contexts
@@ -15,6 +16,7 @@ A powerful, colorized logging system with:
 ### 2. Added Logging to Background Script (`src/pages/background/index.ts`)
 
 **Key logs added:**
+
 - ✅ Service worker lifecycle (load, init)
 - ✅ webRequest listener registration with endpoints
 - ✅ Request interception (detailed flow with collapsible groups)
@@ -32,6 +34,7 @@ A powerful, colorized logging system with:
 **This was the missing piece!** The panel wasn't syncing with background script.
 
 The hook:
+
 - Fetches initial events from background on mount
 - Listens for `EVENTS_CAPTURED` messages
 - Filters events by tab ID
@@ -113,6 +116,7 @@ yarn build:chrome
 4. Console will open showing background logs
 
 **You should see:**
+
 ```
 [analytics-x-ray] [background] 🚀 Background service worker loaded
 [analytics-x-ray] [background] 🔧 Initializing background script...
@@ -125,10 +129,12 @@ yarn build:chrome
 ### Step 4: Navigate to a Site with Segment
 
 Good test sites:
+
 - segment.com
 - Any site using Segment analytics (check Network tab for api.segment.io requests)
 
 **Background console should show:**
+
 ```
 [analytics-x-ray] [background] 🎯 Request intercepted (tabId: 123)
   URL: https://api.segment.io/v1/t
@@ -150,10 +156,11 @@ Good test sites:
 
 1. With the Analytics X-Ray panel open
 2. Right-click anywhere in the panel
-3. Click "Inspect" 
+3. Click "Inspect"
 4. OR: Press `Cmd+Option+I` (Mac) / `Ctrl+Shift+I` (Windows) while panel is focused
 
 **Panel console should show:**
+
 ```
 [analytics-x-ray] [devtools] 🔧 DevTools script loading...
 [analytics-x-ray] [devtools] Inspected tab ID: 123
@@ -186,11 +193,13 @@ While watching BOTH consoles (background + panel):
 3. Interact with the site
 
 **Background should show:**
+
 - `🎯 Request intercepted`
 - `✅ Captured X event(s)`
 - `📤 Sending message`
 
 **Panel should show:**
+
 - `📬 Received EVENTS_CAPTURED message`
 - `✅ Adding X new event(s) to store`
 - `📊 Event count changed`
@@ -200,6 +209,7 @@ While watching BOTH consoles (background + panel):
 If events don't show:
 
 ### ✅ Check 1: Background is Capturing
+
 - [ ] Open background console
 - [ ] Navigate to test page
 - [ ] See `🎯 Request intercepted` logs?
@@ -208,42 +218,49 @@ If events don't show:
 If NO → Check manifest permissions and webRequest setup
 
 ### ✅ Check 2: Background is Storing
+
 - [ ] Background shows `💾 Stored X event(s)` ?
 - [ ] Background shows `💾 Persisted X event(s)` ?
 
 Run in background console:
+
 ```javascript
-chrome.storage.local.get('events', console.log)
+chrome.storage.local.get('events', console.log);
 ```
 
 Should show events object.
 
 ### ✅ Check 3: Background is Sending Messages
+
 - [ ] Background shows `📤 Sending EVENTS_CAPTURED message` ?
 - [ ] Shows `✅ Message delivered` or `⚠️ No listeners` ?
 
 If "No listeners" → Panel isn't open or didn't register listener
 
 ### ✅ Check 4: Panel is Listening
+
 - [ ] Open panel console (inspect the panel)
 - [ ] See `👂 Message listener registered` ?
 - [ ] See `📬 Received EVENTS_CAPTURED message` ?
 
 If NO → `useEventSync` hook may not be running
 
 ### ✅ Check 5: Panel is Fetching Initial Events
+
 - [ ] Panel shows `📥 Fetching initial events` ?
 - [ ] Shows `✅ Received X initial events` ?
 
 If NO → Background message handler may not be responding
 
 ### ✅ Check 6: Tab IDs Match
+
 - [ ] Background: `tabId: XXX` in logs
 - [ ] Panel: `Inspected tab ID: XXX` matches?
 
 If NO → Inspecting wrong tab or tab ID mismatch
 
 ### ✅ Check 7: Events Added to Store
+
 - [ ] Storage shows `➕ Adding event to store` ?
 - [ ] Shows `Total events in store: X` ?
 - [ ] Panel shows `📊 Event count changed` ?
@@ -257,6 +274,7 @@ If NO → Store may not be connected to UI
 **Cause:** Panel isn't open or message listener not registered
 
 **Fix:**
+
 1. Make sure DevTools panel is open
 2. Check panel console for `👂 Message listener registered`
 3. If missing, `useEventSync` hook may not be running
@@ -266,6 +284,7 @@ If NO → Store may not be connected to UI
 **Cause:** DevTools inspecting different tab than where events are captured
 
 **Fix:**
+
 1. Check background log: `tabId: XXX`
 2. Check panel log: `Inspected tab ID: XXX`
 3. Make sure you're inspecting the correct tab
@@ -275,6 +294,7 @@ If NO → Store may not be connected to UI
 **Cause:** Message passing broken
 
 **Fix:**
+
 1. Check both consoles side-by-side
 2. Verify message is sent (background)
 3. Verify message is received (panel)
@@ -300,4 +320,3 @@ If NO → Store may not be connected to UI
 6. **Use the debugging guide** to troubleshoot
 
 The logging will tell you exactly where the issue is! 🎯
-

components.json

@@ -18,4 +18,3 @@
     "hooks": "@src/hooks"
   }
 }
-