diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 103a980..bae047a 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1,4 +1,4 @@
-name: Build & Lint Extension
+name: Build & Release Extension
 
 on:
   push:
@@ -9,28 +9,74 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write   # needed to create releases and upload assets
 
     steps:
-    - uses: actions/checkout@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
 
-    - name: Use Node.js 20
-      uses: actions/setup-node@v4
-      with:
-        node-version: 20
-        cache: 'npm'
+      - name: Set up Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
 
-    - name: Install dependencies
-      run: npm ci
+      - name: Install dependencies
+        run: npm ci
 
-    - name: Type Check
-      run: npm run type-check
+      - name: Type check
+        run: npm run type-check
 
-    - name: Build Extension
-      run: npm run build
+      - name: Build extension
+        run: npm run build
 
-    - name: Upload Build Artifact
-      uses: actions/upload-artifact@v4
-      with:
-        name: testpilot-extension
-        path: dist/
-        retention-days: 5
+      # ── Build info ──────────────────────────────────────────────────────────
+      - name: Generate build info
+        id: build_info
+        run: |
+          SHA_SHORT=$(git rev-parse --short HEAD)
+          DATE=$(date -u +"%Y-%m-%d")
+          echo "sha_short=$SHA_SHORT" >> $GITHUB_OUTPUT
+          echo "date=$DATE" >> $GITHUB_OUTPUT
+          echo "zip_name=testpilot-${SHA_SHORT}.zip" >> $GITHUB_OUTPUT
+
+      # ── Zip the dist folder ─────────────────────────────────────────────────
+      - name: Zip dist folder
+        run: |
+          cd dist
+          zip -r "../${{ steps.build_info.outputs.zip_name }}" .
+          cd ..
+          echo "Created ${{ steps.build_info.outputs.zip_name }}"
+          ls -lh "${{ steps.build_info.outputs.zip_name }}"
+
+      # ── Upload zip as a workflow artifact (available on every PR + push) ────
+      - name: Upload extension zip (artifact)
+        uses: actions/upload-artifact@v4
+        with:
+          name: testpilot-${{ steps.build_info.outputs.sha_short }}
+          path: ${{ steps.build_info.outputs.zip_name }}
+          retention-days: 14
+
+      # ── On main: create/update a "latest" GitHub Release with the zip ───────
+      - name: Create or update latest Release
+        if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: latest
+          name: "TestPilot – Latest Build (${{ steps.build_info.outputs.date }})"
+          body: |
+            ## ⬇️ Install TestPilot
+
+            1. Download `testpilot-${{ steps.build_info.outputs.sha_short }}.zip` below
+            2. Unzip it anywhere on your machine
+            3. Open `chrome://extensions` in Chrome
+            4. Enable **Developer mode** (top-right toggle)
+            5. Click **Load unpacked** and select the unzipped folder
+
+            ---
+            **Commit:** `${{ steps.build_info.outputs.sha_short }}`  
+            **Built:** ${{ steps.build_info.outputs.date }}
+          files: ${{ steps.build_info.outputs.zip_name }}
+          prerelease: false
+          make_latest: true
diff --git a/README.md b/README.md
index f99f863..f63cad6 100644
--- a/README.md
+++ b/README.md
@@ -1,86 +1,197 @@
 # 🧪 TestPilot
 
-**Intelligent Bug Detection & Telemetry Extension for Modern Web Apps**
-
-TestPilot is a powerful, production-grade Chrome extension designed to catch bugs before your users do. It acts as a black-box flight recorder for your web application, capturing console errors, network failures, slow APIs, performance metrics, and security risks in real-time.
-
-![TestPilot Banner](https://via.placeholder.com/800x200?text=TestPilot+Extension)
-
-## ✨ Key Features
-
-- **🚀 Real-time Telemetry**: Captures `console.error`, `console.warn`, unhandled exceptions, and promise rejections.
-- **🌐 Network Intelligence**: 
-  - Detects **Slow APIs** (>1000ms by default)
-  - Identifies **Retry Storms** (rapid repeated failures)
-  - Captures **CORS Errors** and HTTP 4xx/5xx failures
-- **⚡ Performance Monitoring**:
-  - **Long Task Detection**: Flags UI freezes (>200ms)
-  - **White Screen Detection**: Alerts on potential rendering crashes
-- **🛡️ Security Scanner**:
-  - Detects sensitive data leaks (JWTs, API keys, PII) in console/storage
-  - Monitors unsafe storage access
-- **📱 Smart Context**: Captures environment details (User Agent, Viewport, Route Changes) for actionable bug reports.
-- **🧠 Adaptive Severity**: Automatically escalates issue severity based on frequency (e.g., repeating errors become Critical).
-
-## 🛠️ Usage
-
-1. **Install the Extension** (Developer Mode):
-   - Clone this repo
-   - Run `npm install` and `npm run build`
-   - Open `chrome://extensions`
-   - Enable "Developer mode"
-   - Click "Load unpacked" and select the `dist` folder
-
-2. **Start a Session**:
-   - Click the extension icon
-   - Hit **Start Session**
-   - Interact with your web application
-   - TestPilot records all hidden issues in the background
-
-3. **Analyze & Export**:
-   - Open the popup to see a categorized list of issues
-   - Use **Filters** to focus on Critical/High severity bugs
-   - Click **Export JSON** or **Export Markdown** to generate a bug report
+**Intelligent Bug Detection & Telemetry Chrome Extension for Modern Web Apps**
+
+TestPilot is a production-grade Chrome extension that acts as a silent flight recorder for your web application. It captures bugs, network failures, security risks, and performance issues in real-time — before your users report them.
+
+---
+
+## ✨ Features
+
+### 🖥️ Console Monitoring
+- Intercepts `console.error` and `console.warn` calls from deep inside the page (via a **Main World bridge script** that runs before any other JS)
+- Captures the **caller file, line, and column** from the stack trace automatically
+- Passes every console message through the **Security Scanner** before logging
+
+### 🌐 Network Intelligence
+- Wraps both **`window.fetch`** and **`XMLHttpRequest`** to intercept all outgoing requests
+- Captures **HTTP 4xx / 5xx** failures as `network_failure` issues
+- Detects **Slow APIs** — requests exceeding the configurable threshold (default: 1000ms)
+- Detects **API Retry Storms** — automatically escalates to `retry_storm` (Critical) when the same endpoint fails 3+ times within 5 seconds
+- Records **request payload**, **response status**, and **response body** (up to 2000 chars) for every failing or slow request
+
+### ⚡ Runtime Crash Detection
+- Listens for `window.onerror` to catch **unhandled JavaScript exceptions** with full file/line/column/stack metadata
+- Listens for `window.onunhandledrejection` to catch **unhandled Promise rejections**
+
+### 📦 Broken Resource Detection
+- Listens on the capture phase for failed loads of `<img>`, `<script>`, and `<link>` tags
+- Records the tag type, source URL, and outer HTML of the broken element
+
+### 🛡️ Security Scanner
+Automatically scans console output and `localStorage` writes for sensitive data leaks:
+| Pattern | Detected As |
+|---|---|
+| JWT tokens (`eyJ...`) | `JWT Token` |
+| Email addresses | `Email Address` |
+| Phone numbers | `Phone Number` |
+| API keys / secrets | `API Key/Secret` |
+| Sensitive keys written to `localStorage` (`token`, `password`, `api_key`, `jwt`, `auth`) | `storage_leak` |
+
+### 🧠 Severity Engine
+All issues are automatically classified into four severity levels:
+
+| Level | Issue Types |
+|---|---|
+| 🔴 **Critical** | Runtime crashes, white screens, retry storms, CORS failures, security risks, HTTP 5xx |
+| 🟠 **High** | Console errors, resource failures, HTTP 4xx network failures |
+| 🟡 **Medium** | Slow APIs, console warnings |
+| ⚪ **Low** | Console logs |
+
+**Adaptive Escalation:** If the same issue repeats beyond a configurable threshold (default: 10×), its severity automatically upgrades one level (e.g. Medium → High → Critical).
+
+### 🗂️ Issue Deduplication
+Issues are fingerprinted by type + message hash. Repeated occurrences of the same bug increment an `occurrences` counter and update `lastSeen` instead of creating duplicates — keeping reports clean and actionable.
+
+### 📊 Session Management
+- Every recording is isolated as a **Session** with a unique UUID
+- Sessions store full metadata: `userAgent`, `viewport`, `URL`, `platform`
+- Sessions persist across page navigations via `chrome.storage.local`
+- Session history is browsable from the popup
+
+### 📤 Report Export
+Completed sessions can be exported in two formats:
+
+- **JSON** — Raw structured data, ideal for programmatic processing or filing in issue trackers
+- **Markdown** — Human-readable report with:
+  - Executive summary with issue counts per severity
+  - ⚠️ Critical issue call-out banner
+  - **Release Blockers** section (Critical issues only)
+  - **High Priority** section
+  - **Medium Priority** section
+  - Full **Timeline** of all issues sorted by time of occurrence
+
+### 🎨 UI
+- Modern, white-and-blue minimal popup (400px wide)
+- Live issue list with **severity filter buttons** (All / Critical / High / Medium / Low)
+- Issue cards showing type, message, occurrence count, and URL
+- Expandable **request/response body detail** for network issues
+- Session history view with per-session issue count pills
+- Extension badge shows the live total issue count during recording
+
+---
 
 ## ⚙️ Configuration
 
-TestPilot includes a **Settings Panel** (click the ⚙ icon) to customize detection thresholds:
+Click the **⚙** icon in the popup to open the Settings panel:
 
 | Setting | Default | Description |
-|Observed Metric| Threshold | Impact |
 |---|---|---|
-| **Slow API** | 1000ms | Requests taking longer than this are flagged as "Medium" severity |
-| **Long Task** | 200ms | UI freezes longer than this are flagged as "Medium" severity |
-| **Escalation** | 10x | Issues repeating this many times automatically upgrade severity |
+| **Slow API Threshold** | `1000` ms | Requests taking longer than this are flagged as Slow API (Medium) |
+| **Escalation Threshold** | `10` × | Issues repeating this many times auto-escalate one severity level |
+| **Monitor Types** | All enabled | Toggle individual monitors on/off (runtime crash, console error, network failure, slow API, retry storm, resource failure, CORS, security risk, white screen) |
 
-## 🏗️ Architecture
-
-- **Core**: TypeScript, Vite, Preact
-- **State Management**: Chronicled session storage in `chrome.storage.local`
-- **Bridge**: Injected script (`bridge.ts`) for deep network/console interception
-- **Analysis**: Independent `SeverityEngine` for classifying and prioritizing issues
+---
 
-## 📦 Build & Develop
+## 🛠️ Installation (Developer Mode)
 
 ```bash
-# Install dependencies
+# 1. Clone the repo
+git clone https://github.com/your-username/TestPilot.git
+cd TestPilot
+
+# 2. Install dependencies
 npm install
 
-# Run development build (watch mode)
+# 3. Build for production
+npm run build
+```
+
+Then in Chrome:
+1. Go to `chrome://extensions`
+2. Enable **Developer mode** (top-right toggle)
+3. Click **Load unpacked**
+4. Select the `dist/` folder
+
+---
+
+## 💻 Development
+
+```bash
+# Type-check only (no emit)
+npm run type-check
+
+# Start Vite dev server (for popup UI iteration)
 npm run dev
 
 # Build for production
 npm run build
 ```
 
+---
+
+## 🏗️ Architecture
+
+```
+src/
+├── background/          # Service Worker (persistent background process)
+│   ├── main.ts          # Message router — receives TELEMETRY_EVENT messages
+│   ├── eventProcessor.ts # Deduplication, retry-storm detection, badge updates
+│   ├── sessionManager.ts # Start/end sessions, persist to chrome.storage.local
+│   ├── severityEngine.ts # Classifies and escalates issue severity levels
+│   └── storage.ts       # Typed wrapper around chrome.storage.local
+│
+├── content/             # Content Script (runs on every page)
+│   ├── main.ts          # Orchestrator — injects bridge, enables all monitors
+│   ├── bridge.ts        # Injected into Main World to intercept fetch/XHR/console
+│   ├── consoleMonitor.ts # console.error / console.warn override + security scan
+│   ├── networkMonitor.ts # fetch + XHR override for slow/failed requests
+│   ├── runtimeMonitor.ts # window.onerror + unhandledrejection listeners
+│   └── securityScanner.ts# Regex-based PII / secret detection engine
+│
+├── core/                # Shared types and utilities
+│   ├── types.ts         # IssueType, IssueLevel, Issue, Session, StorageSchema
+│   ├── issueFactory.ts  # Constructs Issue objects with fingerprinting
+│   └── fingerprint.ts   # Deterministic hash for issue deduplication
+│
+├── popup/               # Preact UI
+│   ├── index.html
+│   ├── popup.tsx        # Full popup app — all views and state logic
+│   └── popup.css        # Design system — white/blue theme, scrollbars, animations
+│
+└── reporting/
+    └── reportGenerator.ts # Generates Markdown and JSON session reports
+```
+
+**Key design decisions:**
+- The **bridge script** (`bridge.ts`) is injected into the **Main World** (not isolated content script context) so it can intercept the page's own `fetch`, `XMLHttpRequest`, and `console` before any frameworks or libraries wrap them.
+- The **background service worker** is the single source of truth for session state, keeping the popup and content scripts stateless and easily restartable.
+- **Fingerprinting** is done at issue creation time, making deduplication a simple array lookup.
+
+---
+
+## 📦 Tech Stack
+
+| Layer | Technology |
+|---|---|
+| UI | [Preact](https://preactjs.com/) + TypeScript |
+| Build | [Vite](https://vitejs.dev/) v7 |
+| Styles | Vanilla CSS |
+| Storage | `chrome.storage.local` |
+| Types | `@types/chrome` |
+
+---
+
 ## 🤝 Contributing
 
 1. Fork the repository
 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add amazing feature'`)
+3. Commit your changes (`git commit -m 'feat: add amazing feature'`)
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
+---
+
 ## 📄 License
 
-MIT License - free to use for personal and commercial projects.
+MIT License — free to use for personal and commercial projects.
diff --git a/src/background/main.ts b/src/background/main.ts
index 92a58ae..8b8abb3 100644
--- a/src/background/main.ts
+++ b/src/background/main.ts
@@ -2,41 +2,65 @@
 
 import { SessionManager } from './sessionManager.ts';
 import { EventProcessor } from './eventProcessor.ts';
+import { StorageService } from './storage.ts';
 
 // Listen for messages from Content Script or Popup
-chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.action === 'TELEMETRY_EVENT') {
-        EventProcessor.processEvent(message.payload);
+        // Only accept telemetry from the tab that owns the session
+        StorageService.getCurrentTabId().then((ownedTabId) => {
+            if (sender.tab?.id === ownedTabId) {
+                EventProcessor.processEvent(message.payload);
+            }
+        });
+
     } else if (message.action === 'GET_SESSION_STATUS') {
-        SessionManager.isActive().then((active) => {
-            sendResponse({ active });
+        // Only return active=true to the tab that owns the session
+        Promise.all([
+            SessionManager.getCurrentSession(),
+            StorageService.getCurrentTabId()
+        ]).then(([session, ownedTabId]) => {
+            const isOwnerTab = sender.tab?.id === ownedTabId;
+            sendResponse({
+                active: !!session && isOwnerTab,
+                config: (!!session && isOwnerTab) ? session.config : undefined
+            });
         });
         return true; // async
+
     } else if (message.action === 'START_SESSION') {
-        const { envData } = message.payload || {};
-        SessionManager.startSession(envData).then((session) => {
-            notifyTabs('SESSION_STARTED');
+        // tabId is sent by the popup, which queries the active tab before sending
+        const tabId: number | undefined = message.payload?.tabId;
+        SessionManager.startSession(message.payload).then(async (session) => {
+            if (tabId) {
+                await StorageService.setCurrentTabId(tabId);
+                // Only notify the single target tab
+                chrome.tabs.sendMessage(tabId, {
+                    action: 'SESSION_STARTED',
+                    config: session.config
+                }).catch(() => { });
+            }
             sendResponse({ session });
         });
         return true;
+
     } else if (message.action === 'STOP_SESSION') {
-        SessionManager.endSession().then((session) => {
-            notifyTabs('SESSION_STOPPED', { session });
-            sendResponse({ session });
+        StorageService.getCurrentTabId().then((tabId) => {
+            SessionManager.endSession().then(async (session) => {
+                await StorageService.setCurrentTabId(null);
+                // Only notify the tab that owned the session
+                if (tabId) {
+                    chrome.tabs.sendMessage(tabId, {
+                        action: 'SESSION_STOPPED'
+                    }).catch(() => { });
+                }
+                sendResponse({ session });
+            });
         });
         return true;
     }
 });
 
-async function notifyTabs(action: string, payload?: any) {
-    const tabs = await chrome.tabs.query({});
-    tabs.forEach((tab) => {
-        if (tab.id) {
-            chrome.tabs.sendMessage(tab.id, { action, ...payload }).catch(() => { });
-        }
-    });
-}
-
 // Initialize
 chrome.runtime.onInstalled.addListener(() => {
     // Extension installed
diff --git a/src/background/sessionManager.ts b/src/background/sessionManager.ts
index 93d0d5e..31762f7 100644
--- a/src/background/sessionManager.ts
+++ b/src/background/sessionManager.ts
@@ -2,8 +2,9 @@ import { StorageService } from './storage.ts';
 import type { Session } from '../core/types.ts';
 
 export class SessionManager {
-    static async startSession(envData?: any): Promise<Session> {
+    static async startSession(payload?: { envData?: any, config?: any }): Promise<Session> {
         const sessionId = crypto.randomUUID();
+        const { envData, config } = payload || {};
         const session: Session = {
             sessionId,
             startTime: Date.now(),
@@ -14,10 +15,21 @@ export class SessionManager {
                 url: location.href,
                 platform: (navigator as any).platform
             },
-            config: {
+            config: config || {
                 slowApiThreshold: 1000,
-                longTaskThreshold: 200,
-                escalationThreshold: 10
+                escalationThreshold: 10,
+                enabledTypes: {
+                    runtime_crash: true,
+                    console_error: true,
+                    console_log: false,
+                    network_failure: true,
+                    slow_api: true,
+                    retry_storm: true,
+                    resource_failure: true,
+                    cors_failure: true,
+                    security_risk: true,
+                    white_screen: true
+                }
             }
         };
         await StorageService.saveSession(session);
diff --git a/src/background/severityEngine.ts b/src/background/severityEngine.ts
index 8337221..2e32227 100644
--- a/src/background/severityEngine.ts
+++ b/src/background/severityEngine.ts
@@ -19,11 +19,9 @@ export class SeverityEngine {
                 return 'high';
 
             case 'slow_api':
-            case 'long_task':
                 return 'medium';
 
             case 'console_log':
-            case 'route_change':
                 return 'low';
 
             default:
diff --git a/src/background/storage.ts b/src/background/storage.ts
index e099a52..fc98b45 100644
--- a/src/background/storage.ts
+++ b/src/background/storage.ts
@@ -5,6 +5,7 @@ import type { Session } from '../core/types.ts';
 const STORAGE_KEYS = {
     SESSIONS: 'sessions',
     CURRENT_SESSION_ID: 'currentSessionId',
+    CURRENT_TAB_ID: 'currentTabId',
 };
 
 export class StorageService {
@@ -29,6 +30,18 @@ export class StorageService {
         }
     }
 
+    static async getCurrentTabId(): Promise<number | undefined> {
+        return this.get<number>(STORAGE_KEYS.CURRENT_TAB_ID);
+    }
+
+    static async setCurrentTabId(tabId: number | null): Promise<void> {
+        if (tabId === null) {
+            await chrome.storage.local.remove(STORAGE_KEYS.CURRENT_TAB_ID);
+        } else {
+            await this.set(STORAGE_KEYS.CURRENT_TAB_ID, tabId);
+        }
+    }
+
     static async getSession(sessionId: string): Promise<Session | undefined> {
         const sessions = await this.get<Record<string, Session>>(STORAGE_KEYS.SESSIONS) || {};
         return sessions[sessionId];
diff --git a/src/content/bridge.ts b/src/content/bridge.ts
index d1f5b63..f903725 100644
--- a/src/content/bridge.ts
+++ b/src/content/bridge.ts
@@ -59,6 +59,7 @@
         const startTime = Date.now();
         let url = '';
         let method = 'GET';
+        let requestBody: any = null;
 
         try {
             if (typeof args[0] === 'string') {
@@ -70,19 +71,30 @@
                 method = args[0].method;
             }
 
-            if (args[1] && args[1].method) {
-                method = args[1].method;
+            if (args[1]) {
+                if (args[1].method) method = args[1].method;
+                if (args[1].body) requestBody = args[1].body;
             }
 
             const response = await originalFetch(...args);
             const duration = Date.now() - startTime;
 
             if (response.status >= 400 || duration > 1000) {
+                let responseBody = '';
+                try {
+                    const clone = response.clone();
+                    responseBody = await clone.text();
+                } catch (e) {
+                    responseBody = '[Unable to read body]';
+                }
+
                 emit('network_event', {
                     url,
                     method,
                     status: response.status,
-                    duration
+                    duration,
+                    requestPayload: requestBody ? (typeof requestBody === 'string' ? requestBody : '[Non-string body]') : null,
+                    responseBody: responseBody.substring(0, 2000)
                 });
             }
 
@@ -91,7 +103,8 @@
             emit('network_error', {
                 url,
                 method,
-                message: (error as Error).message
+                message: (error as Error).message,
+                requestPayload: requestBody ? (typeof requestBody === 'string' ? requestBody : '[Non-string body]') : null
             });
             throw error;
         }
@@ -102,6 +115,7 @@
         private _method?: string;
         private _url?: string;
         private _startTime?: number;
+        private _requestBody?: any;
 
         open(method: string, url: string | URL, ...args: any[]) {
             this._method = method;
@@ -111,6 +125,7 @@
         }
 
         send(body?: Document | XMLHttpRequestBodyInit | null) {
+            this._requestBody = body;
             this.addEventListener('load', () => {
                 const duration = Date.now() - (this._startTime || 0);
                 if (this.status >= 400 || duration > 1000) {
@@ -118,7 +133,9 @@
                         url: this._url,
                         method: this._method,
                         status: this.status,
-                        duration
+                        duration,
+                        requestPayload: this._requestBody ? (typeof this._requestBody === 'string' ? this._requestBody : '[Non-string body]') : null,
+                        responseBody: (this.responseText || '').substring(0, 2000)
                     });
                 }
             });
@@ -126,7 +143,8 @@
                 emit('network_error', {
                     url: this._url,
                     method: this._method,
-                    message: 'XHR Error'
+                    message: 'XHR Error',
+                    requestPayload: this._requestBody ? (typeof this._requestBody === 'string' ? this._requestBody : '[Non-string body]') : null
                 });
             });
             return super.send(body);
@@ -152,47 +170,9 @@
         });
     });
 
-    // SPA Route Change Tracking
-    const wrapHistory = (method: string) => {
-        const original = (history as any)[method];
-        return function (this: History, ...args: any[]) {
-            const result = original.apply(this, args);
-            emit('route_change', {
-                url: window.location.href,
-                method,
-                title: args[0]
-            });
-            return result;
-        };
-    };
-    history.pushState = wrapHistory('pushState');
-    history.replaceState = wrapHistory('replaceState');
-    window.addEventListener('popstate', () => {
-        emit('route_change', {
-            url: window.location.href,
-            method: 'popstate'
-        });
-    });
 
-    // Performance: Long Task Detection
-    if ('PerformanceObserver' in window) {
-        try {
-            const observer = new PerformanceObserver((list) => {
-                list.getEntries().forEach((entry) => {
-                    if (entry.duration > 200) { // Threshold: 200ms
-                        emit('long_task', {
-                            duration: entry.duration,
-                            name: entry.name,
-                            startTime: entry.startTime
-                        });
-                    }
-                });
-            });
-            observer.observe({ entryTypes: ['longtask'] });
-        } catch (e) {
-            console.warn('[TestPilot] PerformanceObserver not supported for longtask');
-        }
-    }
+
+
 
     // Broken Resource Detection
     window.addEventListener('error', (event) => {
@@ -220,6 +200,4 @@
         return originalSetItem.apply(this, [key, value]);
     };
 
-    const context = window.self === window.top ? 'Main Window' : 'IFrame';
-    console.log(`[TestPilot] Injected bridge active in ${context} with Advanced Monitoring`);
 })();
diff --git a/src/content/main.ts b/src/content/main.ts
index 2157ac4..d89c4e8 100644
--- a/src/content/main.ts
+++ b/src/content/main.ts
@@ -4,6 +4,29 @@
 
 // Content Script Loaded
 
+// Helper to safely send messages to background
+function safeSendMessage(message: any, callback?: (response: any) => void) {
+    try {
+        if (chrome.runtime?.id) {
+            if (callback) {
+                chrome.runtime.sendMessage(message, (response) => {
+                    if (chrome.runtime.lastError) {
+                        // Context likely invalidated, ignore
+                        return;
+                    }
+                    callback(response);
+                });
+            } else {
+                chrome.runtime.sendMessage(message).catch(() => {
+                    // Context likely invalidated, ignore
+                });
+            }
+        }
+    } catch (e) {
+        // Extension context invalidated, ignore
+    }
+}
+
 // Always listen for bridge messages, regardless of when it's injected
 window.addEventListener('message', (event) => {
     if (event.data?.source === 'testpilot-bridge') {
@@ -14,17 +37,43 @@ window.addEventListener('message', (event) => {
 
 function injectBridge() {
     if (document.getElementById('testpilot-bridge')) return;
-    const script = document.createElement('script');
-    script.id = 'testpilot-bridge';
-    script.src = chrome.runtime.getURL('src/bridge/bridge.js');
-    (document.head || document.documentElement).appendChild(script);
+    try {
+        if (!chrome.runtime?.id) return;
+        const script = document.createElement('script');
+        script.id = 'testpilot-bridge';
+        script.src = chrome.runtime.getURL('src/bridge/bridge.js');
+        (document.head || document.documentElement).appendChild(script);
+    } catch (e) {
+        // Context invalidated
+    }
 }
 
 let isMonitoring = false;
+let sessionConfig: any = null;
 
 function handleBridgeEvent(type: string, data: any) {
     if (!isMonitoring) return;
 
+    // Filter by type if config is available
+    if (sessionConfig?.enabledTypes) {
+        // Map common internal types to IssueType if they differ
+        let issueType: string = type;
+        if (type === 'network_event' || type === 'network_error') {
+            const isError = type === 'network_error' || (data.status && data.status >= 400);
+            issueType = isError ? 'network_failure' : 'slow_api';
+        } else if (type === 'runtime_error') {
+            issueType = 'runtime_crash';
+        } else if (type === 'resource_failure') {
+            issueType = 'resource_failure';
+        } else if (type === 'security_risk') {
+            issueType = 'security_risk';
+        }
+
+        if (sessionConfig.enabledTypes[issueType] === false) {
+            return;
+        }
+    }
+
     let payload: any = {
         type,
         url: window.location.href,
@@ -59,7 +108,7 @@ function handleBridgeEvent(type: string, data: any) {
         setTimeout(() => {
             const contentLen = document.body?.innerText?.length || 0;
             if (contentLen < 50) {
-                chrome.runtime.sendMessage({
+                safeSendMessage({
                     action: 'TELEMETRY_EVENT',
                     payload: {
                         type: 'white_screen',
@@ -70,46 +119,55 @@ function handleBridgeEvent(type: string, data: any) {
                 });
             }
         }, 1000);
-    } else if (type === 'long_task') {
-        payload.type = 'long_task';
-        payload.message = `UI Thread frozen for ${Math.round(data.duration)}ms`;
-        payload.metadata = data;
+
     } else if (type === 'resource_failure') {
         payload.type = 'resource_failure';
         payload.message = `Failed to load ${data.tagName}: ${data.url}`;
         payload.metadata = data;
-    } else if (type === 'route_change') {
-        payload.type = 'route_change';
-        payload.message = `Navigation: ${data.method} to ${data.url}`;
-        payload.metadata = data;
+
+    } else if (type === 'security_risk') {
+        payload.type = 'security_risk';
+        // data from bridge: { type: 'storage_leak', key, value }
+        if (data.type === 'storage_leak') {
+            payload.message = `Sensitive key written to localStorage: "${data.key}"`;
+        } else {
+            payload.message = `Security risk detected in page context`;
+        }
+        payload.metadata = { ...data };
     }
 
-    chrome.runtime.sendMessage({ action: 'TELEMETRY_EVENT', payload });
+    safeSendMessage({ action: 'TELEMETRY_EVENT', payload });
 }
 
-function enableMonitors() {
+function enableMonitors(config?: any) {
     isMonitoring = true;
+    sessionConfig = config;
     injectBridge();
 }
 
 function disableMonitors() {
     isMonitoring = false;
+    sessionConfig = null;
 }
 
 // 1. Check initial state
-chrome.runtime.sendMessage({ action: 'GET_SESSION_STATUS' }, (response: any) => {
-    if (chrome.runtime.lastError) return;
+safeSendMessage({ action: 'GET_SESSION_STATUS' }, (response: any) => {
     if (response && response.active) {
-        enableMonitors();
+        enableMonitors(response.config);
     }
 });
 
 // 2. Listen for Command changes
-chrome.runtime.onMessage.addListener((message: any) => {
-    if (message.action === 'SESSION_STARTED') {
-        enableMonitors();
-    } else if (message.action === 'SESSION_STOPPED') {
-        disableMonitors();
-        // Session ended - check popup for report
+try {
+    if (chrome.runtime?.id) {
+        chrome.runtime.onMessage.addListener((message: any) => {
+            if (message.action === 'SESSION_STARTED') {
+                enableMonitors(message.config);
+            } else if (message.action === 'SESSION_STOPPED') {
+                disableMonitors();
+            }
+        });
     }
-});
+} catch (e) {
+    // Context invalidated
+}
diff --git a/src/core/types.ts b/src/core/types.ts
index 34be406..2e7bfbc 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -5,11 +5,9 @@ export type IssueType =
     | 'network_failure'
     | 'slow_api'
     | 'retry_storm'
-    | 'long_task'
     | 'resource_failure'
     | 'cors_failure'
     | 'security_risk'
-    | 'route_change'
     | 'white_screen';
 
 export type IssueLevel = 'critical' | 'high' | 'medium' | 'low';
@@ -45,8 +43,8 @@ export interface Session {
     };
     config?: {
         slowApiThreshold: number;
-        longTaskThreshold: number;
         escalationThreshold: number;
+        enabledTypes: Record<IssueType, boolean>;
     };
 }
 
diff --git a/src/popup/popup.css b/src/popup/popup.css
index 525ee56..680bf38 100644
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -124,6 +124,37 @@ body {
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
+.monitor-types-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  background: white;
+  padding: 16px;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 8px;
+}
+
+.monitor-type-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.monitor-type-item input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.monitor-type-item label {
+  font-size: 13px;
+  color: #1e293b;
+  text-transform: capitalize;
+  letter-spacing: normal;
+  font-weight: 500;
+  cursor: pointer;
+}
+
 .history-state {
   background: #f8fafc;
   max-height: 480px;
@@ -424,22 +455,98 @@ body {
   padding-right: 4px;
 }
 
+/* ── Scrollbar Design System ─────────────────────────────── */
+
+/* Global fallback for any overflow container */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 99px;
+  border: 1px solid #e2e8f0;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #bfdbfe;
+  border-radius: 99px;
+  transition: background 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #3b82f6;
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Issue list — primary scroll area */
+.issue-list {
+  scrollbar-gutter: stable;
+}
+
 .issue-list::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
 }
 
 .issue-list::-webkit-scrollbar-track {
-  background: #f1f5f9;
-  border-radius: 10px;
+  background: #eff6ff;
+  border-radius: 99px;
+  border: 1px solid #dbeafe;
 }
 
 .issue-list::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
-  border-radius: 10px;
+  background: #93c5fd;
+  border-radius: 99px;
+  transition: background 0.25s ease;
 }
 
 .issue-list::-webkit-scrollbar-thumb:hover {
+  background: #2563eb;
+}
+
+/* Issue body detail — compact scroll area */
+.issue-body-detail::-webkit-scrollbar {
+  width: 4px;
+}
+
+.issue-body-detail::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 99px;
+}
+
+.issue-body-detail::-webkit-scrollbar-thumb {
   background: #94a3b8;
+  border-radius: 99px;
+  transition: background 0.2s ease;
+}
+
+.issue-body-detail::-webkit-scrollbar-thumb:hover {
+  background: #475569;
+}
+
+/* History state — full-panel scroll area */
+.history-state::-webkit-scrollbar {
+  width: 5px;
+}
+
+.history-state::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 99px;
+  border: 1px solid #e2e8f0;
+}
+
+.history-state::-webkit-scrollbar-thumb {
+  background: #93c5fd;
+  border-radius: 99px;
+  transition: background 0.25s ease;
+}
+
+.history-state::-webkit-scrollbar-thumb:hover {
+  background: #2563eb;
 }
 
 .issue-item {
@@ -513,6 +620,133 @@ body {
   font-weight: 500;
 }
 
+.issue-body-detail {
+  margin-top: 8px;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 4px;
+  font-family: 'SF Mono', 'Monaco', monospace;
+  font-size: 10px;
+  color: #475569;
+  word-break: break-all;
+  white-space: pre-wrap;
+  max-height: 80px;
+  overflow-y: auto;
+}
+
+.issue-body-detail strong {
+  color: #1e293b;
+  text-transform: uppercase;
+  font-size: 9px;
+  display: block;
+  margin-bottom: 2px;
+}
+
+/* URL row */
+.issue-url {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  color: #3b82f6 !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  cursor: default;
+}
+
+/* File location */
+.issue-location {
+  margin-top: 4px;
+  color: #7c3aed !important;
+}
+
+/* Timestamp row */
+.issue-timestamps {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  flex-wrap: wrap;
+}
+
+.issue-time-tag {
+  font-size: 9px;
+  font-family: 'SF Mono', 'Monaco', monospace;
+  color: #94a3b8;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+/* Detail chip grid (network method/status, security key, etc.) */
+.issue-detail-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 6px;
+  margin-bottom: 4px;
+}
+
+.detail-chip {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 99px;
+  font-family: 'SF Mono', 'Monaco', monospace;
+  max-width: 180px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detail-chip.method {
+  background: #eff6ff;
+  color: #2563eb;
+  border: 1px solid #bfdbfe;
+}
+
+.detail-chip.status {
+  background: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+}
+
+.detail-chip.duration {
+  background: #fefce8;
+  color: #ca8a04;
+  border: 1px solid #fde68a;
+}
+
+.detail-chip.endpoint {
+  background: #f8fafc;
+  color: #475569;
+  border: 1px solid #e2e8f0;
+  max-width: 220px;
+}
+
+.detail-chip.key {
+  background: #fff7ed;
+  color: #ea580c;
+  border: 1px solid #fed7aa;
+}
+
+.detail-chip.detected {
+  background: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+}
+
+.detail-chip.snippet {
+  background: #f1f5f9;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+/* Stack trace block */
+.issue-stack {
+  color: #7c3aed;
+}
+
 .no-issues {
   text-align: center;
   color: #94a3b8;
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index eebc651..c1daf94 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -16,8 +16,19 @@ function App() {
     const [showSettings, setShowSettings] = useState(false);
     const [config, setConfig] = useState({
         slowApiThreshold: 1000,
-        longTaskThreshold: 200,
-        escalationThreshold: 10
+        escalationThreshold: 10,
+        enabledTypes: {
+            runtime_crash: true,
+            console_error: true,
+            console_log: false,
+            network_failure: true,
+            slow_api: true,
+            retry_storm: true,
+            resource_failure: true,
+            cors_failure: true,
+            security_risk: true,
+            white_screen: true
+        }
     });
 
     useEffect(() => {
@@ -49,19 +60,27 @@ function App() {
     };
 
     const handleStartSession = async () => {
+        // Find the active tab so we can pin monitoring to it specifically
+        const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
+        const tabId = activeTab?.id;
+
         const envData = {
             userAgent: navigator.userAgent,
             viewport: { width: window.innerWidth, height: window.innerHeight },
-            url: location.href,
+            url: activeTab?.url || location.href,
             platform: (navigator as any).platform || 'unknown'
         };
-        chrome.runtime.sendMessage({ action: 'START_SESSION', payload: { envData, config } }, (response) => {
-            if (response?.session) {
-                setCurrentSession(response.session);
-                setIsActive(true);
-                setShowSettings(false);
+
+        chrome.runtime.sendMessage(
+            { action: 'START_SESSION', payload: { envData, config, tabId } },
+            (response) => {
+                if (response?.session) {
+                    setCurrentSession(response.session);
+                    setIsActive(true);
+                    setShowSettings(false);
+                }
             }
-        });
+        );
     };
 
     const handleEndSession = async () => {
@@ -196,18 +215,99 @@ function App() {
                     </div>
                 </div>
                 <div class="issue-list">
-                    {filteredIssues.slice().reverse().map((issue, idx) => (
-                        <div key={issue.id || idx} class={`issue-item ${issue.level}`}>
-                            <div class="issue-item-header">
-                                <span class="issue-type">{issue.type.replace('_', ' ')}</span>
-                                <span class="issue-occ">x{issue.occurrences}</span>
+                    {filteredIssues.slice().reverse().map((issue, idx) => {
+                        const m = issue.metadata || {};
+                        const shortUrl = (issue.url || '').replace(/^https?:\/\//, '').substring(0, 50);
+                        const firstSeen = issue.firstSeen ? new Date(issue.firstSeen).toLocaleTimeString() : null;
+                        const lastSeen = issue.lastSeen && issue.occurrences > 1 ? new Date(issue.lastSeen).toLocaleTimeString() : null;
+
+                        return (
+                            <div key={issue.id || idx} class={`issue-item ${issue.level}`}>
+                                {/* Header: type badge + occurrence count */}
+                                <div class="issue-item-header">
+                                    <span class="issue-type">{issue.type.replace(/_/g, ' ')}</span>
+                                    <span class="issue-occ">×{issue.occurrences}</span>
+                                </div>
+
+                                {/* Primary message */}
+                                {issue.message && (
+                                    <div class="issue-msg">{issue.message}</div>
+                                )}
+
+                                {/* Page URL where it happened */}
+                                {shortUrl && (
+                                    <div class="issue-meta issue-url" title={issue.url}>🔗 {shortUrl}</div>
+                                )}
+
+                                {/* Timestamps */}
+                                <div class="issue-timestamps">
+                                    {firstSeen && <span class="issue-time-tag">First: {firstSeen}</span>}
+                                    {lastSeen && <span class="issue-time-tag">Last: {lastSeen}</span>}
+                                </div>
+
+                                {/* ── Network: method, status, duration, endpoint ── */}
+                                {(issue.type === 'network_failure' || issue.type === 'slow_api' || issue.type === 'cors_failure' || issue.type === 'retry_storm') && (
+                                    <div class="issue-detail-grid">
+                                        {m.method && <span class="detail-chip method">{m.method}</span>}
+                                        {m.status && <span class="detail-chip status">{m.status}</span>}
+                                        {m.duration && <span class="detail-chip duration">{m.duration}ms</span>}
+                                        {m.endpoint && (
+                                            <span class="detail-chip endpoint" title={m.endpoint}>
+                                                {m.endpoint.replace(/^https?:\/\/[^/]+/, '').substring(0, 40) || m.endpoint.substring(0, 40)}
+                                            </span>
+                                        )}
+                                    </div>
+                                )}
+
+                                {/* ── Runtime crash: file, line, col ── */}
+                                {(issue.type === 'runtime_crash') && (issue.file || issue.line) && (
+                                    <div class="issue-meta issue-location">
+                                        📄 {issue.file && issue.file.split('/').pop()}{issue.line ? `:${issue.line}` : ''}{issue.column ? `:${issue.column}` : ''}
+                                    </div>
+                                )}
+
+                                {/* ── Security risk: key and storage value ── */}
+                                {issue.type === 'security_risk' && (
+                                    <div class="issue-detail-grid">
+                                        {m.key && <span class="detail-chip key">key: {m.key}</span>}
+                                        {m.detectedTypes && <span class="detail-chip detected">{(m.detectedTypes as string[]).join(', ')}</span>}
+                                        {m.snippet && <span class="detail-chip snippet" title={m.snippet}>{m.snippet.substring(0, 30)}…</span>}
+                                    </div>
+                                )}
+
+                                {/* ── Resource failure: tag + src ── */}
+                                {issue.type === 'resource_failure' && m.url && (
+                                    <div class="issue-meta">
+                                        🏷 &lt;{(m.tagName || '').toLowerCase()}&gt; {String(m.url).split('/').pop()}
+                                    </div>
+                                )}
+
+                                {/* ── Request payload ── */}
+                                {m.requestPayload && (
+                                    <div class="issue-body-detail">
+                                        <strong>Request Payload:</strong>
+                                        {String(m.requestPayload).substring(0, 300)}
+                                    </div>
+                                )}
+
+                                {/* ── Response body ── */}
+                                {m.responseBody && (
+                                    <div class="issue-body-detail">
+                                        <strong>Response Body:</strong>
+                                        {String(m.responseBody).substring(0, 300)}
+                                    </div>
+                                )}
+
+                                {/* ── Stack trace (first 3 meaningful lines) ── */}
+                                {issue.stackTrace && (
+                                    <div class="issue-body-detail issue-stack">
+                                        <strong>Stack:</strong>
+                                        {issue.stackTrace.split('\n').filter((l: string) => l.trim()).slice(0, 3).join('\n')}
+                                    </div>
+                                )}
                             </div>
-                            <div class="issue-msg">{issue.message}</div>
-                            {issue.metadata?.duration && (
-                                <div class="issue-meta">{issue.metadata.duration}ms • {issue.metadata.status || 'Error'}</div>
-                            )}
-                        </div>
-                    ))}
+                        );
+                    })}
                 </div>
             </div>
         );
@@ -244,14 +344,7 @@ function App() {
                                 onChange={(e) => setConfig({ ...config, slowApiThreshold: parseInt((e.target as HTMLInputElement).value) })}
                             />
                         </div>
-                        <div class="setting-item">
-                            <label>Long Task Threshold (ms)</label>
-                            <input
-                                type="number"
-                                value={config.longTaskThreshold}
-                                onChange={(e) => setConfig({ ...config, longTaskThreshold: parseInt((e.target as HTMLInputElement).value) })}
-                            />
-                        </div>
+
                         <div class="setting-item">
                             <label>Escalation Threshold (counts)</label>
                             <input
@@ -260,6 +353,29 @@ function App() {
                                 onChange={(e) => setConfig({ ...config, escalationThreshold: parseInt((e.target as HTMLInputElement).value) })}
                             />
                         </div>
+
+                        <div class="setting-item">
+                            <label>Monitor Types</label>
+                            <div class="monitor-types-grid">
+                                {Object.entries(config.enabledTypes).map(([type, enabled]) => (
+                                    <div key={type} class="monitor-type-item">
+                                        <input
+                                            type="checkbox"
+                                            id={`type-${type}`}
+                                            checked={enabled}
+                                            onChange={(e) => setConfig({
+                                                ...config,
+                                                enabledTypes: {
+                                                    ...config.enabledTypes,
+                                                    [type]: (e.target as HTMLInputElement).checked
+                                                }
+                                            })}
+                                        />
+                                        <label for={`type-${type}`}>{type.replace('_', ' ')}</label>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
                     </div>
                     <button class="btn btn-primary" onClick={() => setShowSettings(false)}>Save & Close</button>
                 </div>