From 329bef4b953dcfc4e5fd162353ffd9da1f100c1b Mon Sep 17 00:00:00 2001
From: ANU-2524 <anusoni25.2006@gmail.com>
Date: Sun, 24 May 2026 00:13:22 +0530
Subject: [PATCH 1/5] feat(frontend): add local preferences layer and refine
 tool configuration

---
 backend/secuscan/executor.py                  | 10 ++++
 backend/secuscan/models.py                    |  5 ++
 backend/secuscan/validation.py                | 19 ++++++
 frontend/src/api.ts                           |  6 ++
 frontend/src/pages/Findings.tsx               | 48 +++++++++++++--
 frontend/src/pages/Reports.tsx                |  7 ++-
 frontend/src/pages/Scans.tsx                  |  7 ++-
 frontend/src/pages/ToolConfig.tsx             | 31 +++++++++-
 frontend/src/utils/preferences.ts             | 35 +++++++++++
 .../unit/pages/ReportsPreference.test.tsx     | 60 +++++++++++++++++++
 .../unit/pages/ToolConfigDynamic.test.tsx     | 31 +++++++++-
 .../testing/unit/utils/preferences.test.ts    | 54 +++++++++++++++++
 testing/backend/unit/test_validation.py       | 13 +++-
 13 files changed, 317 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/utils/preferences.ts
 create mode 100644 frontend/testing/unit/pages/ReportsPreference.test.tsx
 create mode 100644 frontend/testing/unit/utils/preferences.test.ts

diff --git a/backend/secuscan/executor.py b/backend/secuscan/executor.py
index 7fd178f0..afd269ca 100644
--- a/backend/secuscan/executor.py
+++ b/backend/secuscan/executor.py
@@ -18,6 +18,7 @@
 from .database import get_db
 from .plugins import get_plugin_manager
 from .models import TaskStatus
+from .validation import validate_timeout
 
 # Modular Scanners
 from .scanners.port_scanner import PortScanner
@@ -104,6 +105,15 @@ async def create_task(
             # Merge preset with user inputs (user inputs take precedence)
             inputs = {**preset_values, **inputs}
         
+        # Validate timeout if provided and supported
+        if "timeout" in inputs and plugin.timeout_config:
+            timeout_val = int(inputs["timeout"])
+            min_t = plugin.timeout_config.get("min", 10)
+            max_t = plugin.timeout_config.get("max", 3600)
+            is_valid, err = validate_timeout(timeout_val, min_t, max_t)
+            if not is_valid:
+                raise ValueError(err)
+        
         # Store task in database
         db = await get_db()
         await db.execute(
diff --git a/backend/secuscan/models.py b/backend/secuscan/models.py
index 264363e5..bbd95a5a 100644
--- a/backend/secuscan/models.py
+++ b/backend/secuscan/models.py
@@ -66,6 +66,11 @@ class PluginMetadata(BaseModel):
     fields: List[PluginField]
     presets: Dict[str, Dict[str, Any]]
     
+    timeout_config: Optional[Dict[str, Any]] = Field(
+        default=None,
+        description="Configuration for timeout behavior: { 'enabled': bool, 'min': int, 'max': int, 'default': int }"
+    )
+    
     output: Dict[str, Any]
     safety: Dict[str, Any]
     learning: Optional[Dict[str, Any]] = None
diff --git a/backend/secuscan/validation.py b/backend/secuscan/validation.py
index cf6874aa..92978466 100644
--- a/backend/secuscan/validation.py
+++ b/backend/secuscan/validation.py
@@ -90,6 +90,25 @@ def validate_target(target: str, safe_mode: bool = True) -> Tuple[bool, str]:
     return True, ""
 
 
+def validate_timeout(timeout: int, min_val: int = 10, max_val: int = 3600) -> Tuple[bool, str]:
+    """
+    Validate scan timeout value.
+    
+    Args:
+        timeout: Timeout in seconds
+        min_val: Minimum allowed timeout
+        max_val: Maximum allowed timeout
+    
+    Returns:
+        Tuple of (is_valid, error_message)
+    """
+    if timeout < min_val:
+        return False, f"Timeout must be at least {min_val} seconds"
+    if timeout > max_val:
+        return False, f"Timeout cannot exceed {max_val} seconds"
+    return True, ""
+
+
 def validate_port(port: int) -> Tuple[bool, str]:
     """
     Validate port number.
diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index 37942a58..01317d44 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -74,6 +74,12 @@ export interface PluginSchemaResponse {
   fields: PluginFieldSchema[]
   presets: Record<string, Record<string, unknown>>
   safety: Record<string, unknown>
+  timeout_config?: {
+    enabled: boolean
+    min: number
+    max: number
+    default: number
+  }
 }
 
 export interface TaskStartResponse {
diff --git a/frontend/src/pages/Findings.tsx b/frontend/src/pages/Findings.tsx
index 74e7e811..18bc5aee 100644
--- a/frontend/src/pages/Findings.tsx
+++ b/frontend/src/pages/Findings.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { motion } from 'framer-motion'
 import { getFindings } from '../api'
 import { formatLocaleDate } from '../utils/date'
+import { getPreference, setPreference } from '../utils/preferences'
 
 type Finding = {
   id: string
@@ -88,7 +89,8 @@ export default function Findings() {
   const [findings, setFindings] = useState<Finding[]>([])
   const [loading, setLoading] = useState(true)
   const [searchQuery, setSearchQuery] = useState('')
-  const [filterSeverity, setFilterSeverity] = useState('all')
+  const [filterSeverity, setFilterSeverity] = useState(() => getPreference('findings-severity-filter', 'all'))
+  const [sortBy, setSortBy] = useState<'severity' | 'date'>(() => getPreference('findings-sort-by', 'severity'))
   const [selectedFindingId, setSelectedFindingId] = useState<string | null>(null)
   const [reviewState, setReviewState] = useState<ReviewState>({})
   const [copiedFindingId, setCopiedFindingId] = useState<string | null>(null)
@@ -119,6 +121,14 @@ export default function Findings() {
     localStorage.setItem('secuscan-finding-review-state', JSON.stringify(reviewState))
   }, [reviewState])
 
+  useEffect(() => {
+    setPreference('findings-severity-filter', filterSeverity)
+  }, [filterSeverity])
+
+  useEffect(() => {
+    setPreference('findings-sort-by', sortBy)
+  }, [sortBy])
+
   const enrichedFindings = useMemo(
     () =>
       findings.map((finding) => ({
@@ -132,7 +142,7 @@ export default function Findings() {
   const filteredFindings = useMemo(() => {
     const query = searchQuery.trim().toLowerCase()
 
-    return enrichedFindings.filter((finding) => {
+    const list = enrichedFindings.filter((finding) => {
       const matchesSeverity = filterSeverity === 'all' || finding.severity === filterSeverity
       const haystack = [
         finding.title,
@@ -148,7 +158,17 @@ export default function Findings() {
 
       return matchesSeverity && haystack.includes(query)
     })
-  }, [enrichedFindings, filterSeverity, searchQuery])
+
+    if (sortBy === 'date') {
+      return list.sort((a, b) => new Date(b.discovered_at).getTime() - new Date(a.discovered_at).getTime())
+    }
+
+    return list.sort((a, b) => {
+      const diff = (b.cvss || 0) - (a.cvss || 0)
+      if (diff !== 0) return diff
+      return new Date(b.discovered_at).getTime() - new Date(a.discovered_at).getTime()
+    })
+  }, [enrichedFindings, filterSeverity, searchQuery, sortBy])
 
   const groupedFindings = useMemo(
     () =>
@@ -257,7 +277,7 @@ export default function Findings() {
 
         <section className="sticky top-4 z-20 border-2 border-black bg-charcoal/95 p-4 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] backdrop-blur">
           <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
-            <div className="grid flex-1 gap-4 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,1.8fr)]">
+            <div className="grid flex-1 gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.8fr)]">
               <div className="space-y-2">
                 <label className="text-[10px] font-black uppercase tracking-[0.2em] text-silver-bright">Search</label>
                 <input
@@ -291,6 +311,26 @@ export default function Findings() {
                   ))}
                 </div>
               </div>
+
+              <div className="space-y-2">
+                <label className="text-[10px] font-black uppercase tracking-[0.2em] text-silver-bright">Sort</label>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setSortBy('severity')}
+                    className={`border px-3 py-2 text-[10px] font-black uppercase tracking-[0.16em] transition-all ${filterPillClasses(sortBy === 'severity')}`}
+                  >
+                    Priority
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setSortBy('date')}
+                    className={`border px-3 py-2 text-[10px] font-black uppercase tracking-[0.16em] transition-all ${filterPillClasses(sortBy === 'date')}`}
+                  >
+                    Recent
+                  </button>
+                </div>
+              </div>
             </div>
 
             <div className="flex flex-wrap gap-2">
diff --git a/frontend/src/pages/Reports.tsx b/frontend/src/pages/Reports.tsx
index fe5f8cce..c42b14c8 100644
--- a/frontend/src/pages/Reports.tsx
+++ b/frontend/src/pages/Reports.tsx
@@ -17,6 +17,7 @@ import {
 } from '@hugeicons/core-free-icons'
 import { getDashboardSummary, getReports, API_BASE } from '../api'
 import { formatDateLong } from '../utils/date'
+import { getPreference, setPreference } from '../utils/preferences'
 
 type Report = {
   id: string
@@ -64,7 +65,7 @@ export default function Reports() {
   const navigate = useNavigate()
   const [reports, setReports] = useState<Report[]>([])
   const [summary, setSummary] = useState<any>({ total_findings: 0, total_assets: 0, critical_findings: 0, high_findings: 0, total_attack_surface: 0 })
-  const [selectedType, setSelectedType] = useState('all')
+  const [selectedType, setSelectedType] = useState(() => getPreference('reports-type-filter', 'all'))
 
   const fetchReports = () => {
     Promise.all([getReports(), getDashboardSummary()]).then(([reportData, summaryData]: any) => {
@@ -77,6 +78,10 @@ export default function Reports() {
     fetchReports()
   }, [])
 
+  useEffect(() => {
+    setPreference('reports-type-filter', selectedType)
+  }, [selectedType])
+
   const filteredReports = reports.filter((report) => selectedType === 'all' || report.type === selectedType)
   
   // Check if any report with status 'ready' exists
diff --git a/frontend/src/pages/Scans.tsx b/frontend/src/pages/Scans.tsx
index 6328a061..c10798e7 100644
--- a/frontend/src/pages/Scans.tsx
+++ b/frontend/src/pages/Scans.tsx
@@ -4,6 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { API_BASE, deleteTask, clearAllTasks, bulkDeleteTasks } from '../api'
 import { routePath } from '../routes'
 import { parseDateSafe, formatLocaleDate, formatLocaleTime } from '../utils/date'
+import { getPreference, setPreference } from '../utils/preferences'
 
 interface Task {
     task_id: string
@@ -49,7 +50,7 @@ export default function Scans() {
     const navigate = useNavigate()
     const [tasks, setTasks] = useState<Task[]>([])
     const [loading, setLoading] = useState(true)
-    const [filter, setFilter] = useState('all')
+    const [filter, setFilter] = useState(() => getPreference('scans-status-filter', 'all'))
     const [expandedId, setExpandedId] = useState<string | null>(null)
     const [selectedIds, setSelectedIds] = useState<string[]>([])
 
@@ -59,6 +60,10 @@ export default function Scans() {
         return () => clearInterval(interval)
     }, [filter])
 
+    useEffect(() => {
+        setPreference('scans-status-filter', filter)
+    }, [filter])
+
     async function loadTasks() {
         try {
             const url = filter === 'all'
diff --git a/frontend/src/pages/ToolConfig.tsx b/frontend/src/pages/ToolConfig.tsx
index 2ac40f7a..386c0d8f 100644
--- a/frontend/src/pages/ToolConfig.tsx
+++ b/frontend/src/pages/ToolConfig.tsx
@@ -194,11 +194,16 @@ export default function ToolConfig() {
       return
     }
 
+    const taskInputs = { ...inputs }
+    if (schema.timeout_config?.enabled && taskInputs.timeout === undefined) {
+      taskInputs.timeout = schema.timeout_config.default
+    }
+
     try {
       setSubmitting(true)
       const task = await startTask(
         plugin.id,
-        inputs,
+        taskInputs,
         plugin.requires_consent ? consentGranted : true,
         selectedPreset || undefined,
       )
@@ -412,6 +417,30 @@ export default function ToolConfig() {
             </div>
           </section>
 
+          {schema.timeout_config?.enabled && (
+            <section className="bg-charcoal border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] space-y-6">
+              <div className="flex items-center justify-between">
+                <h3 className="text-xs font-black text-silver-bright uppercase tracking-[0.4em] italic">Execution_Timeout</h3>
+                <span className="text-[10px] font-black text-rag-blue uppercase tracking-widest">{inputs.timeout || schema.timeout_config.default}s</span>
+              </div>
+              <div className="space-y-4">
+                <input
+                  type="range"
+                  min={schema.timeout_config.min || 10}
+                  max={schema.timeout_config.max || 300}
+                  step={10}
+                  value={inputs.timeout || schema.timeout_config.default}
+                  onChange={(e) => setInputs(prev => ({ ...prev, timeout: parseInt(e.target.value) }))}
+                  className="w-full h-2 bg-black rounded-none appearance-none cursor-pointer accent-rag-blue"
+                />
+                <div className="flex justify-between text-[8px] font-black text-silver/40 uppercase tracking-[0.2em]">
+                  <span>Min: {schema.timeout_config.min || 10}s</span>
+                  <span>Max: {schema.timeout_config.max || 300}s</span>
+                </div>
+              </div>
+            </section>
+          )}
+
         </div>
 
         <aside className="xl:col-span-1">
diff --git a/frontend/src/utils/preferences.ts b/frontend/src/utils/preferences.ts
new file mode 100644
index 00000000..4a7bd547
--- /dev/null
+++ b/frontend/src/utils/preferences.ts
@@ -0,0 +1,35 @@
+/**
+ * Minimal localStorage-backed preference layer for SecuScan.
+ * Handles persistence of UI states like filters and sort orders.
+ */
+
+const PREF_KEY_PREFIX = 'secuscan-pref:';
+
+/**
+ * Retrieves a preference from localStorage.
+ * Returns defaultValue if localStorage is unavailable, key is missing, or value is invalid.
+ */
+export function getPreference<T>(key: string, defaultValue: T): T {
+  try {
+    const value = localStorage.getItem(PREF_KEY_PREFIX + key);
+    if (value === null) return defaultValue;
+    
+    // Attempt to parse JSON. Primitive values are also valid JSON.
+    return JSON.parse(value) as T;
+  } catch (err) {
+    // If parsing fails or localStorage is blocked, return default
+    return defaultValue;
+  }
+}
+
+/**
+ * Stores a preference in localStorage.
+ * Fails silently if localStorage is unavailable.
+ */
+export function setPreference<T>(key: string, value: T): void {
+  try {
+    localStorage.setItem(PREF_KEY_PREFIX + key, JSON.stringify(value));
+  } catch (err) {
+    // Silently ignore storage failures (e.g. private mode, quota exceeded)
+  }
+}
diff --git a/frontend/testing/unit/pages/ReportsPreference.test.tsx b/frontend/testing/unit/pages/ReportsPreference.test.tsx
new file mode 100644
index 00000000..56249219
--- /dev/null
+++ b/frontend/testing/unit/pages/ReportsPreference.test.tsx
@@ -0,0 +1,60 @@
+import { render, screen, act } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MemoryRouter } from 'react-router-dom'
+import Reports from '../../../src/pages/Reports'
+import * as api from '../../../src/api'
+
+// Simple mocks for complex UI components
+vi.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+    section: ({ children, ...props }: any) => <section {...props}>{children}</section>,
+  },
+  AnimatePresence: ({ children }: any) => <>{children}</>,
+}))
+
+vi.mock('@hugeicons/react', () => ({
+  HugeiconsIcon: () => <span data-testid="hugeicons-icon" />,
+}))
+
+vi.mock('../../../src/api', () => ({
+  getReports: vi.fn(),
+  getDashboardSummary: vi.fn(),
+  API_BASE: 'http://test-api',
+}))
+
+describe('Reports page preference integration', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    vi.mocked(api.getReports).mockResolvedValue({ reports: [] })
+    vi.mocked(api.getDashboardSummary).mockResolvedValue({})
+  })
+
+  it('persists selected report type filter', async () => {
+    const user = userEvent.setup()
+
+    const { unmount } = render(
+      <MemoryRouter>
+        <Reports />
+      </MemoryRouter>
+    )
+
+    // Initially 'all'
+    const techButton = screen.getByRole('button', { name: /technical BRIEFINGS/i })
+    await user.click(techButton)
+
+    // Check localStorage
+    expect(localStorage.getItem('secuscan-pref:reports-type-filter')).toContain('technical')
+
+    unmount()
+
+    // Re-render and check if it's still 'technical'
+    render(
+      <MemoryRouter>
+        <Reports />
+      </MemoryRouter>
+    )
+
+    expect(screen.getByRole('button', { name: /technical BRIEFINGS/i })).toHaveClass('bg-rag-red')
+  })
+})
diff --git a/frontend/testing/unit/pages/ToolConfigDynamic.test.tsx b/frontend/testing/unit/pages/ToolConfigDynamic.test.tsx
index 10887076..15e2d8dd 100644
--- a/frontend/testing/unit/pages/ToolConfigDynamic.test.tsx
+++ b/frontend/testing/unit/pages/ToolConfigDynamic.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { MemoryRouter, Route, Routes } from 'react-router-dom'
 import ToolConfig from '../../../src/pages/ToolConfig'
@@ -67,6 +67,7 @@ describe('ToolConfig dynamic schema flow', () => {
         comprehensive: { threads: 20, scan_type: 'active' },
       },
       safety: { level: 'safe', requires_consent: true },
+      timeout_config: { enabled: true, min: 10, max: 100, default: 30 },
     })
     vi.mocked(startTask).mockResolvedValue({
       task_id: 'task-123',
@@ -105,12 +106,40 @@ describe('ToolConfig dynamic schema flow', () => {
         'subdomain_discovery',
         expect.objectContaining({
           target: 'example.com',
+          threads: 10,
+          scan_type: 'passive',
+          timeout: 30,
         }),
         true,
         'quick',
       )
     })
   })
+
+  it('renders timeout control and validates bounds', async () => {
+    const user = userEvent.setup()
+    render(
+      <MemoryRouter initialEntries={['/toolkit/subdomain_discovery']}>
+        <Routes>
+          <Route path={routes.scanTool} element={<ToolConfig />} />
+        </Routes>
+      </MemoryRouter>,
+    )
+
+    await screen.findByText(/Execution_Timeout/i)
+    const timeoutSlider = screen.getByRole('slider')
+    expect(timeoutSlider).toHaveValue('30')
+
+    // Since it's a range input, 'invalid' bounds are handled by min/max attributes
+    expect(timeoutSlider).toHaveAttribute('min', '10')
+    expect(timeoutSlider).toHaveAttribute('max', '100')
+
+    // Valid value change
+    fireEvent.change(timeoutSlider, { target: { value: '50' } })
+    expect(timeoutSlider).toHaveValue('50')
+    expect(screen.getByText('50s')).toBeInTheDocument()
+  })
+
   it('falls back gracefully when guidance is absent', async () => {
     vi.mocked(listPlugins).mockResolvedValue({
       total: 1,
diff --git a/frontend/testing/unit/utils/preferences.test.ts b/frontend/testing/unit/utils/preferences.test.ts
new file mode 100644
index 00000000..955a3e18
--- /dev/null
+++ b/frontend/testing/unit/utils/preferences.test.ts
@@ -0,0 +1,54 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { getPreference, setPreference } from '../../../src/utils/preferences';
+
+describe('preferences utility', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+  });
+
+  it('returns default value when preference is not set', () => {
+    const value = getPreference('test-pref', 'default');
+    expect(value).toBe('default');
+  });
+
+  it('persists and retrieves a string preference', () => {
+    setPreference('theme', 'dark');
+    expect(getPreference('theme', 'light')).toBe('dark');
+  });
+
+  it('persists and retrieves an object preference', () => {
+    const filter = { severity: 'high', type: 'technical' };
+    setPreference('findings-filter', filter);
+    expect(getPreference('findings-filter', {})).toEqual(filter);
+  });
+
+  it('ignores invalid JSON in localStorage and returns default', () => {
+    localStorage.setItem('secuscan-pref:broken', 'undefined behavior');
+    const value = getPreference('broken', 'safe-default');
+    expect(value).toBe('safe-default');
+  });
+
+  it('handles localStorage unavailable gracefully', () => {
+    // Mock getItem to throw (e.g. SecurityError in some browsers when cookies are blocked)
+    const getItemSpy = vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+      throw new Error('Blocked!');
+    });
+    
+    // Should return default instead of crashing
+    expect(getPreference('anything', 'fallback')).toBe('fallback');
+    
+    getItemSpy.mockRestore();
+  });
+
+  it('handles setPreference failure gracefully', () => {
+    const setItemSpy = vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new Error('Quota exceeded');
+    });
+
+    // Should not crash
+    expect(() => setPreference('full', 'too much data')).not.toThrow();
+    
+    setItemSpy.mockRestore();
+  });
+});
diff --git a/testing/backend/unit/test_validation.py b/testing/backend/unit/test_validation.py
index a9a7c0b8..15a357e7 100644
--- a/testing/backend/unit/test_validation.py
+++ b/testing/backend/unit/test_validation.py
@@ -1,7 +1,7 @@
 import pytest
 from backend.secuscan.validation import (
     validate_target, validate_port, validate_url,
-    sanitize_input, is_safe_path, match_pattern
+    validate_timeout, sanitize_input, is_safe_path, match_pattern
 )
 
 
@@ -30,6 +30,17 @@ def test_validate_port():
     assert validate_port(-1)[0] is False
 
 
+def test_validate_timeout():
+    assert validate_timeout(60) == (True, "")
+    assert validate_timeout(10) == (True, "")
+    assert validate_timeout(3600) == (True, "")
+
+    assert validate_timeout(5)[0] is False
+    assert validate_timeout(3601)[0] is False
+    assert validate_timeout(60, min_val=100)[0] is False
+    assert validate_timeout(100, max_val=99)[0] is False
+
+
 def test_validate_url():
     assert validate_url("http://localhost:8080")[0] is True
     assert validate_url("https://example.com/path?param=value")[0] is True

From 9806ee0fe7e09c7456f9c5a8949ad326753d1676 Mon Sep 17 00:00:00 2001
From: ANU-2524 <anusoni25.2006@gmail.com>
Date: Sun, 24 May 2026 00:41:47 +0530
Subject: [PATCH 2/5] fix: resolve linting and type errors for CI/CD

---
 frontend/src/pages/ToolConfig.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/ToolConfig.tsx b/frontend/src/pages/ToolConfig.tsx
index 386c0d8f..7825e596 100644
--- a/frontend/src/pages/ToolConfig.tsx
+++ b/frontend/src/pages/ToolConfig.tsx
@@ -421,7 +421,7 @@ export default function ToolConfig() {
             <section className="bg-charcoal border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] space-y-6">
               <div className="flex items-center justify-between">
                 <h3 className="text-xs font-black text-silver-bright uppercase tracking-[0.4em] italic">Execution_Timeout</h3>
-                <span className="text-[10px] font-black text-rag-blue uppercase tracking-widest">{inputs.timeout || schema.timeout_config.default}s</span>
+                <span className="text-[10px] font-black text-rag-blue uppercase tracking-widest">{((inputs.timeout as number) || schema.timeout_config.default)}s</span>
               </div>
               <div className="space-y-4">
                 <input
@@ -429,7 +429,7 @@ export default function ToolConfig() {
                   min={schema.timeout_config.min || 10}
                   max={schema.timeout_config.max || 300}
                   step={10}
-                  value={inputs.timeout || schema.timeout_config.default}
+                  value={(inputs.timeout as number) || schema.timeout_config.default}
                   onChange={(e) => setInputs(prev => ({ ...prev, timeout: parseInt(e.target.value) }))}
                   className="w-full h-2 bg-black rounded-none appearance-none cursor-pointer accent-rag-blue"
                 />

From 975b8c11b8a0aaf9c16bedc9e93dce5e3f717a12 Mon Sep 17 00:00:00 2001
From: ANU-2524 <anusoni25.2006@gmail.com>
Date: Sun, 24 May 2026 01:19:47 +0530
Subject: [PATCH 3/5] fix: extend ruff line-length to 120 and add
 validate_port_range import

---
 backend/secuscan/cache.py                     |   3 +-
 backend/secuscan/cli.py                       |  13 +-
 backend/secuscan/config.py                    |   5 +-
 backend/secuscan/database.py                  |   5 +-
 backend/secuscan/executor.py                  |  26 +-
 backend/secuscan/main.py                      |  12 +-
 backend/secuscan/models.py                    |   7 +-
 backend/secuscan/plugins.py                   |  12 +-
 backend/secuscan/ratelimit.py                 |   4 +-
 backend/secuscan/redaction.py                 |   2 +-
 backend/secuscan/reporting.py                 |   3 +-
 backend/secuscan/routes.py                    |  29 +-
 backend/secuscan/scanners/base.py             |   4 +-
 backend/secuscan/scanners/port_scanner.py     |  10 +-
 backend/secuscan/scanners/recon_scanner.py    |  10 +-
 backend/secuscan/scanners/web_scanner.py      |  10 +-
 backend/secuscan/validation.py                |  11 +-
 frontend/src/pages/Findings.tsx               | 486 ++-------
 frontend/src/pages/Reports.tsx                | 524 ++++-----
 frontend/src/pages/Scans.tsx                  | 992 +++++++-----------
 frontend/src/pages/ToolConfig.tsx             |   5 +-
 frontend/src/utils/preferences.ts             |   2 +-
 .../testing/unit/utils/preferences.test.ts    |   6 +-
 pyproject.toml                                |   1 +
 testing/backend/conftest.py                   |   2 +-
 .../integration/test_bulk_delete_contract.py  |   1 -
 .../integration/test_dashboard_cache.py       |   4 +-
 .../integration/test_phase2_plugins.py        |   3 +-
 .../integration/test_report_audit_log.py      |   3 +-
 .../backend/integration/test_routes_sarif.py  |   4 +-
 .../backend/integration/test_task_cleanup.py  |   5 +-
 testing/backend/test_cache_invalidation.py    |   3 +-
 testing/backend/test_queue_position.py        |   4 +-
 testing/backend/test_task_pagination.py       |   4 +-
 testing/backend/unit/test_cache_helpers.py    |   2 -
 testing/backend/unit/test_cli.py              |   8 +-
 .../backend/unit/test_concurrent_limiter.py   |   4 -
 testing/backend/unit/test_models.py           |   4 +-
 testing/backend/unit/test_plugin_integrity.py |   2 +-
 testing/backend/unit/test_plugin_validator.py |   9 +-
 testing/backend/unit/test_redaction.py        |   4 +-
 .../unit/test_refresh_plugin_checksum.py      |   9 +-
 testing/backend/unit/test_sarif.py            |   2 +
 .../unit/test_task_start_validation.py        |   4 +-
 testing/backend/unit/test_validate_plugin.py  |   2 -
 testing/backend/unit/test_validation.py       |  16 +-
 .../unit/test_vault_failure_messages.py       |   4 +-
 47 files changed, 844 insertions(+), 1441 deletions(-)

diff --git a/backend/secuscan/cache.py b/backend/secuscan/cache.py
index a517b867..7ea520ea 100644
--- a/backend/secuscan/cache.py
+++ b/backend/secuscan/cache.py
@@ -2,9 +2,8 @@
 In-memory cache helpers for API responses.
 """
 
-import json
-from typing import Any, Optional, Dict
 import time
+from typing import Any, Dict, Optional
 
 from .config import settings
 
diff --git a/backend/secuscan/cli.py b/backend/secuscan/cli.py
index 1a41be85..11217db4 100644
--- a/backend/secuscan/cli.py
+++ b/backend/secuscan/cli.py
@@ -2,25 +2,24 @@
 SecuScan CLI - Command line interface for running security scans
 """
 
-import asyncio
 import argparse
+import asyncio
 import json
 import sys
-import os
-from datetime import datetime
 from pathlib import Path
-from typing import Optional, Dict, Any
+from typing import Optional
 
 # Add the parent directory to sys.path to allow absolute imports
 sys.path.append(str(Path(__file__).resolve().parents[2]))
 
-from backend.secuscan.executor import executor
-from backend.secuscan.database import init_db, get_db
 from backend.secuscan.cache import init_cache
 from backend.secuscan.config import settings
-from backend.secuscan.plugins import init_plugins, get_plugin_manager
+from backend.secuscan.database import get_db, init_db
+from backend.secuscan.executor import executor
+from backend.secuscan.plugins import get_plugin_manager, init_plugins
 from backend.secuscan.reporting import reporting
 
+
 async def run_scan(target: str, plugin_id: str, output_format: str, output_file: Optional[str] = None):
     """Initialize components and execute a scan task."""
 
diff --git a/backend/secuscan/config.py b/backend/secuscan/config.py
index e05e573c..d82d4304 100644
--- a/backend/secuscan/config.py
+++ b/backend/secuscan/config.py
@@ -2,12 +2,13 @@
 Configuration management for SecuScan backend
 """
 
+import base64
+import hashlib
 from pathlib import Path
 from typing import Any, List, Optional
+
 from pydantic import field_validator
 from pydantic_settings import BaseSettings
-import base64
-import hashlib
 
 PROJECT_ROOT = Path(__file__).resolve().parent.parent
 
diff --git a/backend/secuscan/database.py b/backend/secuscan/database.py
index 8ff8775e..e5bfa524 100644
--- a/backend/secuscan/database.py
+++ b/backend/secuscan/database.py
@@ -2,13 +2,12 @@
 SQLite database access for SecuScan.
 """
 
-import asyncio
 import json
-import sqlite3
 from pathlib import Path
-from typing import Any, Optional, List, Dict
+from typing import Dict, List, Optional
 
 import aiosqlite
+
 from .config import settings
 
 
diff --git a/backend/secuscan/executor.py b/backend/secuscan/executor.py
index 7bad7793..140a767f 100644
--- a/backend/secuscan/executor.py
+++ b/backend/secuscan/executor.py
@@ -3,33 +3,29 @@
 """
 
 import asyncio
-from asyncio import subprocess
-import uuid
 import json
-import time
-from pathlib import Path
-from datetime import datetime
-from typing import Optional, Dict, Any, List
 import logging
 import re
+import time
+import uuid
+from asyncio import subprocess
+from datetime import datetime
+from pathlib import Path
+from typing import Any, Dict, List, Optional
 
-from .redaction import redact
 from .cache import get_cache
 from .config import settings
 from .database import get_db
-from .plugins import get_plugin_manager
 from .models import TaskStatus
- 
-from .validation import validate_timeout
- 
-from .ratelimit import concurrent_limiter
+from .plugins import get_plugin_manager
 from .ratelimit import concurrent_limiter
- 
+from .redaction import redact
 
 # Modular Scanners
 from .scanners.port_scanner import PortScanner
-from .scanners.web_scanner import WebScanner
 from .scanners.recon_scanner import ReconScanner
+from .scanners.web_scanner import WebScanner
+from .validation import validate_timeout
 
 MODULAR_SCANNERS = {
     "port_scanner": PortScanner,
@@ -119,7 +115,7 @@ async def create_task(
             is_valid, err = validate_timeout(timeout_val, min_t, max_t)
             if not is_valid:
                 raise ValueError(err)
-        
+
         # Store task in database
         db = await get_db()
         await db.execute(
diff --git a/backend/secuscan/main.py b/backend/secuscan/main.py
index 08eb02c2..effd4c2d 100644
--- a/backend/secuscan/main.py
+++ b/backend/secuscan/main.py
@@ -3,23 +3,23 @@
 """
 
 import logging
-import sys
 import shutil
-from pathlib import Path
+import sys
 from contextlib import asynccontextmanager
+from pathlib import Path
 
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.staticfiles import StaticFiles
 
+from .cache import cache as global_cache
+from .cache import init_cache
 from .config import settings
-from .cache import init_cache, cache as global_cache
-from .database import init_db, db as global_db
+from .database import db as global_db
+from .database import init_db
 from .plugins import init_plugins
 from .routes import router
 from .workflows import scheduler
 
-
 # Configure logging
 logging.basicConfig(
     level=getattr(logging, settings.log_level),
diff --git a/backend/secuscan/models.py b/backend/secuscan/models.py
index bbd95a5a..ea36dd85 100644
--- a/backend/secuscan/models.py
+++ b/backend/secuscan/models.py
@@ -2,10 +2,11 @@
 Pydantic models for API requests and responses
 """
 
-from typing import Optional, Dict, Any, List
 from datetime import datetime
-from pydantic import BaseModel, Field
 from enum import Enum
+from typing import Any, Dict, List, Optional
+
+from pydantic import BaseModel, Field
 
 
 class SafetyLevel(str, Enum):
@@ -70,7 +71,7 @@ class PluginMetadata(BaseModel):
         default=None,
         description="Configuration for timeout behavior: { 'enabled': bool, 'min': int, 'max': int, 'default': int }"
     )
-    
+
     output: Dict[str, Any]
     safety: Dict[str, Any]
     learning: Optional[Dict[str, Any]] = None
diff --git a/backend/secuscan/plugins.py b/backend/secuscan/plugins.py
index d224bd4a..413cef93 100644
--- a/backend/secuscan/plugins.py
+++ b/backend/secuscan/plugins.py
@@ -2,18 +2,18 @@
 Plugin loader and management system
 """
 
+import hashlib
+import hmac
 import json
+import logging
 import os
 import re
-from pathlib import Path
-from typing import Any, Dict, Optional, List
-import logging
 import shutil
-import hashlib
-import hmac
+from pathlib import Path
+from typing import Any, Dict, List, Optional
 
-from .models import PluginMetadata
 from .config import settings
+from .models import PluginMetadata
 
 logger = logging.getLogger(__name__)
 
diff --git a/backend/secuscan/ratelimit.py b/backend/secuscan/ratelimit.py
index 464e4ae4..6ad2f493 100644
--- a/backend/secuscan/ratelimit.py
+++ b/backend/secuscan/ratelimit.py
@@ -2,10 +2,10 @@
 Rate limiting for task execution
 """
 
+import asyncio
 from collections import defaultdict
 from datetime import datetime, timedelta
-from typing import Tuple, Dict, List
-import asyncio
+from typing import Dict, List, Tuple
 
 
 class RateLimiter:
diff --git a/backend/secuscan/redaction.py b/backend/secuscan/redaction.py
index 35ed1091..5160b109 100644
--- a/backend/secuscan/redaction.py
+++ b/backend/secuscan/redaction.py
@@ -15,8 +15,8 @@
   finding while the secret value itself is hidden.
 """
 
-import re
 import logging
+import re
 from typing import Any
 
 logger = logging.getLogger(__name__)
diff --git a/backend/secuscan/reporting.py b/backend/secuscan/reporting.py
index fb2e8987..a258ef01 100644
--- a/backend/secuscan/reporting.py
+++ b/backend/secuscan/reporting.py
@@ -4,7 +4,6 @@
 import io
 import json
 import re
-from .redaction import redact, redact_dict
 from datetime import datetime
 from functools import lru_cache
 from typing import Any, Dict, List
@@ -12,6 +11,8 @@
 from PIL import Image, ImageDraw
 from xhtml2pdf import pisa
 
+from .redaction import redact, redact_dict
+
 
 class ReportGenerator:
     """Handles PDF, HTML, and CSV generation for security audits."""
diff --git a/backend/secuscan/routes.py b/backend/secuscan/routes.py
index f1d53063..3e96c9d9 100644
--- a/backend/secuscan/routes.py
+++ b/backend/secuscan/routes.py
@@ -2,19 +2,20 @@
 API routes for SecuScan backend
 """
 
-from fastapi import APIRouter, HTTPException, BackgroundTasks, Response, Request
-from fastapi.responses import JSONResponse
-from typing import Any, Optional, List, Dict, Callable
+import asyncio
 import json
 import logging
 import re
-import os
 import shutil
 import uuid
-import asyncio
 from pathlib import Path
+from typing import Any, Dict, List, Optional
 from urllib.parse import urlparse
 
+from fastapi import APIRouter, BackgroundTasks, HTTPException, Request, Response
+from fastapi.responses import JSONResponse
+
+
 def parse_json_fields(rows: List[Dict], fields: List[str]) -> List[Dict]:
     """Helper to parse stringified JSON fields from SQLite."""
     parsed = []
@@ -62,23 +63,23 @@ def build_report_filename(task: Dict[str, Any], extension: str) -> str:
 
 logger = logging.getLogger(__name__)
 
+from sse_starlette.sse import EventSourceResponse
+
 from .cache import get_cache
-from .models import (
-    TaskCreateRequest, TaskResponse, TaskResult,
-    PluginListResponse, ErrorResponse
-)
 from .config import settings
 from .database import get_db
-from .plugins import get_plugin_manager, init_plugins
 from .executor import executor
-from .ratelimit import rate_limiter, concurrent_limiter
-from .validation import validate_target, validate_task_start_payload
+from .models import (
+    PluginListResponse,
+    TaskCreateRequest,
+)
+from .plugins import get_plugin_manager, init_plugins
+from .ratelimit import concurrent_limiter, rate_limiter
 from .reporting import reporting
+from .validation import validate_target, validate_task_start_payload
 from .vault import VaultCrypto
 from .workflows import scheduler
 
-from sse_starlette.sse import EventSourceResponse
-
 router = APIRouter(prefix="/api/v1")
 
 
diff --git a/backend/secuscan/scanners/base.py b/backend/secuscan/scanners/base.py
index 121fab22..ced5b374 100644
--- a/backend/secuscan/scanners/base.py
+++ b/backend/secuscan/scanners/base.py
@@ -1,7 +1,7 @@
+import logging
 from abc import ABC, abstractmethod
-from typing import Dict, Any, List, Optional
 from datetime import datetime
-import logging
+from typing import Any, Dict
 
 logger = logging.getLogger(__name__)
 
diff --git a/backend/secuscan/scanners/port_scanner.py b/backend/secuscan/scanners/port_scanner.py
index b70bbe65..eaed34cc 100644
--- a/backend/secuscan/scanners/port_scanner.py
+++ b/backend/secuscan/scanners/port_scanner.py
@@ -1,11 +1,9 @@
-import asyncio
-import json
 import re
-from typing import Dict, Any, List
-from .base import BaseScanner
+from typing import Any, Dict, List
+
 from ..plugins import get_plugin_manager
-from ..config import settings
-from datetime import datetime
+from .base import BaseScanner
+
 
 class PortScanner(BaseScanner):
     """
diff --git a/backend/secuscan/scanners/recon_scanner.py b/backend/secuscan/scanners/recon_scanner.py
index 1fb16c0c..5efc4c42 100644
--- a/backend/secuscan/scanners/recon_scanner.py
+++ b/backend/secuscan/scanners/recon_scanner.py
@@ -1,12 +1,10 @@
-import asyncio
 import json
+import logging
 import re
-from typing import Dict, Any, List
-from .base import BaseScanner
+from typing import Any, Dict, List
+
 from ..plugins import get_plugin_manager
-from ..config import settings
-import logging
-from datetime import datetime
+from .base import BaseScanner
 
 logger = logging.getLogger(__name__)
 
diff --git a/backend/secuscan/scanners/web_scanner.py b/backend/secuscan/scanners/web_scanner.py
index 51335f0a..a77c7fb9 100644
--- a/backend/secuscan/scanners/web_scanner.py
+++ b/backend/secuscan/scanners/web_scanner.py
@@ -1,11 +1,9 @@
-import asyncio
-import json
 import re
-from typing import Dict, Any, List
-from .base import BaseScanner
+from typing import Any, Dict, List
+
 from ..plugins import get_plugin_manager
-from ..config import settings
-from datetime import datetime
+from .base import BaseScanner
+
 
 class WebScanner(BaseScanner):
     """
diff --git a/backend/secuscan/validation.py b/backend/secuscan/validation.py
index c30c727b..c1bed128 100644
--- a/backend/secuscan/validation.py
+++ b/backend/secuscan/validation.py
@@ -2,14 +2,13 @@
 Input validation and security checks
 """
 
-import re
 import ipaddress
-from typing import Any, Dict, Tuple
+import re
 from fnmatch import fnmatch
+from typing import Any, Dict, Tuple
 
 from .config import settings
 
-
 # Blocked network ranges
 BLOCKED_NETWORKS = [
     ipaddress.ip_network("0.0.0.0/8"),       # Broadcast
@@ -98,12 +97,12 @@ def validate_target(target: str, safe_mode: bool = True) -> Tuple[bool, str]:
 def validate_timeout(timeout: int, min_val: int = 10, max_val: int = 3600) -> Tuple[bool, str]:
     """
     Validate scan timeout value.
-    
+
     Args:
         timeout: Timeout in seconds
         min_val: Minimum allowed timeout
         max_val: Maximum allowed timeout
-    
+
     Returns:
         Tuple of (is_valid, error_message)
     """
@@ -334,4 +333,4 @@ def _check_field(key: str, value: Any) -> Tuple[bool, int, str]:
                     f"{settings.task_start_max_field_length} characters.",
                 )
 
-    return True, 0, ""
\ No newline at end of file
+    return True, 0, ""
diff --git a/frontend/src/pages/Findings.tsx b/frontend/src/pages/Findings.tsx
index a5814548..74e7e811 100644
--- a/frontend/src/pages/Findings.tsx
+++ b/frontend/src/pages/Findings.tsx
@@ -1,13 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import { motion } from 'framer-motion'
 import { getFindings } from '../api'
- 
 import { formatLocaleDate } from '../utils/date'
-import { getPreference, setPreference } from '../utils/preferences'
 
- 
-import { formatLocaleDate, parseDateSafe, getCurrentTimeZone } from '../utils/date'
- 
 type Finding = {
   id: string
   severity: string
@@ -19,7 +14,6 @@ type Finding = {
   discovered_at: string
   cvss?: number
   cve?: string
-  plugin_id?: string
 }
 
 type FindingStatus = 'new' | 'reviewed' | 'suppressed'
@@ -90,27 +84,11 @@ function filterPillClasses(isActive: boolean) {
     : 'border-silver-bright/10 bg-charcoal-dark text-silver/65 hover:border-silver-bright/30 hover:text-silver-bright'
 }
 
-const filterLabelClass = 'text-[10px] font-black uppercase tracking-[0.2em] text-silver-bright'
-const filterControlClass =
-  'h-11 w-full border-2 border-silver-bright/10 bg-charcoal-dark px-3 text-xs font-mono text-silver-bright focus:border-rag-red focus:outline-none'
-
-type SortMode = 'severity' | 'newest' | 'oldest' | 'target'
-
 export default function Findings() {
   const [findings, setFindings] = useState<Finding[]>([])
   const [loading, setLoading] = useState(true)
   const [searchQuery, setSearchQuery] = useState('')
- 
-  const [filterSeverity, setFilterSeverity] = useState(() => getPreference('findings-severity-filter', 'all'))
-  const [sortBy, setSortBy] = useState<'severity' | 'date'>(() => getPreference('findings-sort-by', 'severity'))
- 
   const [filterSeverity, setFilterSeverity] = useState('all')
-  const [filterTarget, setFilterTarget] = useState('all')
-  const [filterScanner, setFilterScanner] = useState('all')
-  const [sortMode, setSortMode] = useState<SortMode>('severity')
-  const [dateFrom, setDateFrom] = useState('')
-  const [dateTo, setDateTo] = useState('')
- 
   const [selectedFindingId, setSelectedFindingId] = useState<string | null>(null)
   const [reviewState, setReviewState] = useState<ReviewState>({})
   const [copiedFindingId, setCopiedFindingId] = useState<string | null>(null)
@@ -141,14 +119,6 @@ export default function Findings() {
     localStorage.setItem('secuscan-finding-review-state', JSON.stringify(reviewState))
   }, [reviewState])
 
-  useEffect(() => {
-    setPreference('findings-severity-filter', filterSeverity)
-  }, [filterSeverity])
-
-  useEffect(() => {
-    setPreference('findings-sort-by', sortBy)
-  }, [sortBy])
-
   const enrichedFindings = useMemo(
     () =>
       findings.map((finding) => ({
@@ -159,52 +129,11 @@ export default function Findings() {
     [findings, reviewState],
   )
 
-  // Collect unique targets and categories so we can build filter dropdowns.
-  const uniqueTargets = useMemo(() => {
-    const seen = new Set<string>()
-    for (const f of enrichedFindings) {
-      if (f.target) seen.add(f.target)
-    }
-    return Array.from(seen).sort()
-  }, [enrichedFindings])
-
-  // plugin_id values serve as the "scanner/tool" filter per issue #43
-  const uniqueScanners = useMemo(() => {
-    const seen = new Set<string>()
-    for (const f of enrichedFindings) {
-      if (f.plugin_id) seen.add(f.plugin_id)
-    }
-    return Array.from(seen).sort()
-  }, [enrichedFindings])
-
   const filteredFindings = useMemo(() => {
     const query = searchQuery.trim().toLowerCase()
 
- 
-    const list = enrichedFindings.filter((finding) => {
- 
-    // Compare dates using the *displayed* calendar day in the user's configured
-    // timezone, not raw UTC timestamps. This way a finding at 2026-05-13T20:00:00Z
-    // that shows as May 14 in IST correctly matches a From Date of 2026-05-14.
-    const tz = getCurrentTimeZone()
-    const dateFormatter = new Intl.DateTimeFormat('en-CA', { timeZone: tz })
-
     return enrichedFindings.filter((finding) => {
- 
       const matchesSeverity = filterSeverity === 'all' || finding.severity === filterSeverity
-      const matchesTarget = filterTarget === 'all' || finding.target === filterTarget
-      const matchesScanner = filterScanner === 'all' || finding.plugin_id === filterScanner
-
-      // Date range check — derive the calendar day in the display timezone
-      if (dateFrom || dateTo) {
-        const parsed = parseDateSafe(finding.discovered_at)
-        if (!parsed) return false
-        // en-CA locale gives us YYYY-MM-DD which matches the <input type="date"> value
-        const displayDay = dateFormatter.format(parsed)
-        if (dateFrom && displayDay < dateFrom) return false
-        if (dateTo && displayDay > dateTo) return false
-      }
-
       const haystack = [
         finding.title,
         finding.target,
@@ -217,57 +146,17 @@ export default function Findings() {
         .join(' ')
         .toLowerCase()
 
-      return matchesSeverity && matchesTarget && matchesScanner && haystack.includes(query)
+      return matchesSeverity && haystack.includes(query)
     })
- 
-
-    if (sortBy === 'date') {
-      return list.sort((a, b) => new Date(b.discovered_at).getTime() - new Date(a.discovered_at).getTime())
-    }
-
-    return list.sort((a, b) => {
-      const diff = (b.cvss || 0) - (a.cvss || 0)
-      if (diff !== 0) return diff
-      return new Date(b.discovered_at).getTime() - new Date(a.discovered_at).getTime()
-    })
-  }, [enrichedFindings, filterSeverity, searchQuery, sortBy])
- 
-  }, [enrichedFindings, filterSeverity, filterTarget, filterScanner, searchQuery, dateFrom, dateTo])
-
-  const sortedFindings = useMemo(() => {
-    const items = [...filteredFindings]
-    switch (sortMode) {
-      case 'newest':
-        return items.sort((a, b) => {
-          const da = parseDateSafe(a.discovered_at)?.getTime() ?? 0
-          const db = parseDateSafe(b.discovered_at)?.getTime() ?? 0
-          return db - da
-        })
-      case 'oldest':
-        return items.sort((a, b) => {
-          const da = parseDateSafe(a.discovered_at)?.getTime() ?? 0
-          const db = parseDateSafe(b.discovered_at)?.getTime() ?? 0
-          return da - db
-        })
-      case 'target':
-        return items.sort((a, b) =>
-          (a.target || '').localeCompare(b.target || '')
-        )
-      case 'severity':
-      default:
-        // Keep the original severity-group ordering; groupedFindings handles it.
-        return items
-    }
-  }, [filteredFindings, sortMode])
- 
+  }, [enrichedFindings, filterSeverity, searchQuery])
 
   const groupedFindings = useMemo(
     () =>
       severityOrder.map((severity) => ({
         severity,
-        items: sortedFindings.filter((finding) => finding.severity === severity),
+        items: filteredFindings.filter((finding) => finding.severity === severity),
       })),
-    [sortedFindings],
+    [filteredFindings],
   )
 
   const selectedFinding =
@@ -303,29 +192,6 @@ export default function Findings() {
     [enrichedFindings, filteredFindings, countsBySeverity],
   )
 
-  // Derives a flat list of active filter chips from non-default filter state.
-  const activeFilters = useMemo(() => {
-    const chips: { key: string; label: string }[] = []
-    if (searchQuery.trim())      chips.push({ key: 'search',  label: `Search: "${searchQuery.trim()}"` })
-    if (filterTarget !== 'all')  chips.push({ key: 'target',  label: `Target: ${filterTarget}` })
-    if (filterScanner !== 'all') chips.push({ key: 'scanner', label: `Scanner: ${filterScanner}` })
-    if (sortMode !== 'severity') chips.push({ key: 'sort',    label: `Sort: ${sortMode}` })
-    if (dateFrom)                chips.push({ key: 'from',    label: `From: ${dateFrom}` })
-    if (dateTo)                  chips.push({ key: 'to',      label: `To: ${dateTo}` })
-    return chips
-  }, [searchQuery, filterTarget, filterScanner, sortMode, dateFrom, dateTo])
-
-
-  function resetAllFilters() {
-    setFilterSeverity('all')
-    setFilterTarget('all')
-    setFilterScanner('all')
-    setSortMode('severity')
-    setDateFrom('')
-    setDateTo('')
-    setSearchQuery('')
-  }
-
   function updateFindingStatus(id: string, status: FindingStatus) {
     setReviewState((current) => ({ ...current, [id]: status }))
   }
@@ -353,70 +219,6 @@ export default function Findings() {
     }
   }
 
-  function renderFindingRow(finding: Finding & { severity: string; status: FindingStatus }) {
-    const isSelected = selectedFinding?.id === finding.id
-    const cfg = severityConfig[finding.severity]
-
-    return (
-      <button
-        key={finding.id}
-        type="button"
-        onClick={() => setSelectedFindingId(finding.id)}
-        className={`relative block w-full px-5 py-5 text-left transition-all ${
-          isSelected ? 'bg-silver-bright/6' : 'hover:bg-silver-bright/3'
-        }`}
-      >
-        <span className={`absolute inset-y-0 left-0 w-1 ${cfg.rail}`} />
-        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-          <div className="min-w-0 flex-1 space-y-3 pl-3">
-            <div className="flex flex-wrap items-center gap-2">
-              <span className={`px-2 py-1 text-[9px] font-black uppercase tracking-[0.18em] ${cfg.chip}`}>
-                {cfg.label}
-              </span>
-              <span className={`border px-2 py-1 text-[9px] font-black uppercase tracking-[0.18em] ${getStatusTone(finding.status)}`}>
-                {finding.status}
-              </span>
-              <span className="text-[10px] font-mono uppercase tracking-[0.18em] text-silver/35">
-                {finding.category || 'Uncategorized'}
-              </span>
-              {finding.cve ? (
-                <span className="border border-rag-blue/20 bg-rag-blue/10 px-2 py-1 text-[9px] font-mono uppercase tracking-[0.15em] text-rag-blue">
-                  {finding.cve}
-                </span>
-              ) : null}
-            </div>
-
-            <div>
-              <h3 className="text-xl font-black uppercase tracking-tight text-silver-bright">{finding.title}</h3>
-              <p className="mt-2 text-[11px] font-mono uppercase tracking-[0.16em] text-silver/45">
-                Target // {finding.target || 'Unknown'} // Observed // {formatLocaleDate(finding.discovered_at)}
-              </p>
-            </div>
-
-            <p className="max-w-4xl text-sm leading-relaxed text-silver/70">
-              {finding.description || 'No description provided.'}
-            </p>
-          </div>
-
-          <div className="flex flex-row items-end gap-6 lg:min-w-[140px] lg:flex-col lg:items-end">
-            {typeof finding.cvss === 'number' ? (
-              <div className="text-right">
-                <p className="text-[9px] font-black uppercase tracking-[0.2em] text-silver/35">CVSS</p>
-                <p className={`text-3xl font-black italic ${finding.cvss >= 9 ? 'text-rag-red' : 'text-silver-bright'}`}>
-                  {finding.cvss.toFixed(1)}
-                </p>
-              </div>
-            ) : null}
-
-            <span className={`material-symbols-outlined text-lg ${isSelected ? 'text-silver-bright' : 'text-silver/30'}`} aria-hidden="true">
-              east
-            </span>
-          </div>
-        </div>
-      </button>
-    )
-  }
-
   return (
     <div className="min-h-screen bg-charcoal-dark text-silver px-4 py-6 md:px-8 md:py-10">
       <div className="mx-auto flex w-full max-w-[1600px] flex-col gap-8">
@@ -453,10 +255,9 @@ export default function Findings() {
           </div>
         </header>
 
- 
         <section className="sticky top-4 z-20 border-2 border-black bg-charcoal/95 p-4 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] backdrop-blur">
           <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
-            <div className="grid flex-1 gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.8fr)]">
+            <div className="grid flex-1 gap-4 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,1.8fr)]">
               <div className="space-y-2">
                 <label className="text-[10px] font-black uppercase tracking-[0.2em] text-silver-bright">Search</label>
                 <input
@@ -471,184 +272,46 @@ export default function Findings() {
               <div className="space-y-2">
                 <label className="text-[10px] font-black uppercase tracking-[0.2em] text-silver-bright">Severity</label>
                 <div className="flex flex-wrap gap-2">
- 
-        <section className="border-2 border-black bg-charcoal/95 p-4 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] backdrop-blur lg:sticky lg:top-4 lg:z-20">
-          <div className="grid gap-4">
-            <div className="grid gap-4 2xl:grid-cols-[minmax(320px,1fr)_auto] 2xl:items-end">
-             <div className="space-y-2">
-  <label className={filterLabelClass}>Search</label>
-
-  <div className="relative">
-    <input
-      type="text"
-      value={searchQuery}
-      onChange={(event) => setSearchQuery(event.target.value)}
-      placeholder="Title, target, CVE, remediation..."
-      className={`${filterControlClass} px-4 pr-12 placeholder:text-silver/20`}
-    />
-
-    {searchQuery.trim() && (
-      <button
-        type="button"
-        aria-label="Clear search"
-        onClick={() => setSearchQuery('')}
-        className="
-          absolute right-3 top-1/2
-          -translate-y-1/2
-          text-silver/50
-          hover:text-silver-bright
-          transition
-        "
-      >
-        ✕
-      </button>
-    )}
-  </div>
-</div>
-
-              <div className="flex flex-wrap gap-2 pb-2 sm:pb-0 2xl:max-w-[760px] 2xl:justify-end">
-                <button
-                  type="button"
-                  onClick={() => setFilterSeverity('all')}
-                  className={`min-h-10 border px-3 py-2 text-[10px] font-black uppercase tracking-[0.16em] transition-all ${filterPillClasses(filterSeverity === 'all')}`}
-                >
-                  All
-                </button>
-                {severityOrder.map((severity) => (
- 
                   <button
-                    key={severity}
                     type="button"
-                    onClick={() => setFilterSeverity((current) => (current === severity ? 'all' : severity))}
-                    className={`min-h-10 border px-3 py-2 text-[10px] font-black uppercase tracking-[0.18em] transition-all ${
-                      filterSeverity === severity
-                        ? `${severityConfig[severity].chip} border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]`
-                        : 'border-silver-bright/10 bg-charcoal-dark text-silver/65 hover:border-silver-bright/30'
-                    }`}
+                    onClick={() => setFilterSeverity('all')}
+                    className={`border px-3 py-2 text-[10px] font-black uppercase tracking-[0.16em] transition-all ${filterPillClasses(filterSeverity === 'all')}`}
                   >
-                    {severityConfig[severity].label} {countsBySeverity[severity] || 0}
-                  </button>
-                ))}
-              </div>
-
-              <div className="space-y-2">
-                <label className="text-[10px] font-black uppercase tracking-[0.2em] text-silver-bright">Sort</label>
-                <div className="flex gap-2">
-                  <button
-                    type="button"
-                    onClick={() => setSortBy('severity')}
-                    className={`border px-3 py-2 text-[10px] font-black uppercase tracking-[0.16em] transition-all ${filterPillClasses(sortBy === 'severity')}`}
-                  >
-                    Priority
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setSortBy('date')}
-                    className={`border px-3 py-2 text-[10px] font-black uppercase tracking-[0.16em] transition-all ${filterPillClasses(sortBy === 'date')}`}
-                  >
-                    Recent
+                    All Levels
                   </button>
+                  {['critical', 'high', 'medium'].map((severity) => (
+                    <button
+                      key={severity}
+                      type="button"
+                      onClick={() => setFilterSeverity(severity)}
+                      className={`border px-3 py-2 text-[10px] font-black uppercase tracking-[0.16em] transition-all ${filterPillClasses(filterSeverity === severity)}`}
+                    >
+                      {severityConfig[severity].label} {countsBySeverity[severity] || 0}
+                    </button>
+                  ))}
                 </div>
               </div>
             </div>
 
-            <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_auto] xl:items-end">
-              <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
-                <div className="space-y-2">
-                  <label className={filterLabelClass}>Target</label>
-                  <select
-                    value={filterTarget}
-                    onChange={(e) => setFilterTarget(e.target.value)}
-                    className={filterControlClass}
-                  >
-                    <option value="all">All Targets</option>
-                    {uniqueTargets.map((t) => (
-                      <option key={t} value={t}>{t}</option>
-                    ))}
-                  </select>
-                </div>
-
-                <div className="space-y-2">
-                  <label className={filterLabelClass}>Scanner / Tool</label>
-                  <select
-                    value={filterScanner}
-                    onChange={(e) => setFilterScanner(e.target.value)}
-                    className={filterControlClass}
-                  >
-                    <option value="all">All Scanners</option>
-                    {uniqueScanners.map((s) => (
-                      <option key={s} value={s}>{s}</option>
-                    ))}
-                  </select>
-                </div>
-
-                <div className="space-y-2">
-                  <label className={filterLabelClass}>Sort By</label>
-                  <select
-                    value={sortMode}
-                    onChange={(e) => setSortMode(e.target.value as SortMode)}
-                    className={filterControlClass}
-                  >
-                    <option value="severity">Severity (High → Low)</option>
-                    <option value="newest">Newest First</option>
-                    <option value="oldest">Oldest First</option>
-                    <option value="target">Target (A → Z)</option>
-                  </select>
-                </div>
-
-                <div className="space-y-2">
-                  <label className={filterLabelClass}>From Date</label>
-                  <input
-                    type="date"
-                    value={dateFrom}
-                    onChange={(e) => setDateFrom(e.target.value)}
-                    className={`${filterControlClass} [color-scheme:dark]`}
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <label className={filterLabelClass}>To Date</label>
-                  <input
-                    type="date"
-                    value={dateTo}
-                    onChange={(e) => setDateTo(e.target.value)}
-                    className={`${filterControlClass} [color-scheme:dark]`}
-                  />
-                </div>
-              </div>
-
-              <button
-                type="button"
-                onClick={resetAllFilters}
-                className="h-11 w-full border border-silver-bright/20 bg-charcoal-dark px-4 text-[10px] font-black uppercase tracking-[0.18em] text-silver/65 transition-all hover:border-rag-red hover:text-silver-bright xl:w-auto xl:min-w-[180px]"
-              >
-                Reset Filters
-              </button>
+            <div className="flex flex-wrap gap-2">
+              {severityOrder.map((severity) => (
+                <button
+                  key={severity}
+                  type="button"
+                  onClick={() => setFilterSeverity((current) => (current === severity ? 'all' : severity))}
+                  className={`border px-3 py-2 text-[10px] font-black uppercase tracking-[0.18em] transition-all ${
+                    filterSeverity === severity
+                      ? `${severityConfig[severity].chip} border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]`
+                      : 'border-silver-bright/10 bg-charcoal-dark text-silver/65 hover:border-silver-bright/30'
+                  }`}
+                >
+                  {severityConfig[severity].label} {countsBySeverity[severity] || 0}
+                </button>
+              ))}
             </div>
           </div>
         </section>
 
-        {/* ── Active filter summary strip ────────────────────────────────────────
-            Hidden when all filters are at their default values.    */}
-        {activeFilters.length > 0 && (
-          <div
-            aria-label="active filters"
-            className="flex flex-wrap items-center gap-2 border border-silver-bright/10 bg-charcoal/60 px-4 py-3"
-          >
-            <span className="mr-1 text-[10px] font-black uppercase tracking-[0.2em] text-silver/40">
-              Active Filters
-            </span>
-            {activeFilters.map(({ key, label }) => (
-              <span
-                key={key}
-                className="border border-rag-red/30 bg-rag-red/10 px-2 py-1 text-[9px] font-mono uppercase tracking-[0.15em] text-rag-red"
-              >
-                {label}
-              </span>
-            ))}
-          </div>
-        )}
-
         <div className="grid gap-8 xl:grid-cols-[minmax(0,1.2fr)_420px]">
           <motion.section variants={sectionVariants} initial="hidden" animate="visible" className="space-y-5">
             {loading ? (
@@ -660,7 +323,7 @@ export default function Findings() {
                 <p className="text-2xl font-black uppercase tracking-[0.25em] text-silver/25 italic">No Findings Match</p>
                 <p className="mt-3 text-xs font-mono uppercase tracking-[0.2em] text-silver/15">Adjust filters to reopen the queue.</p>
               </div>
-            ) : sortMode === 'severity' ? (
+            ) : (
               groupedFindings.map(({ severity, items }) => {
                 if (items.length === 0) return null
 
@@ -679,28 +342,73 @@ export default function Findings() {
                     </div>
 
                     <div className="divide-y divide-silver-bright/6">
-                      {items.map((finding) => renderFindingRow(finding))}
+                      {items.map((finding) => {
+                        const isSelected = selectedFinding?.id === finding.id
+                        const config = severityConfig[finding.severity]
+
+                        return (
+                          <button
+                            key={finding.id}
+                            type="button"
+                            onClick={() => setSelectedFindingId(finding.id)}
+                            className={`relative block w-full px-5 py-5 text-left transition-all ${
+                              isSelected ? 'bg-silver-bright/6' : 'hover:bg-silver-bright/3'
+                            }`}
+                          >
+                            <span className={`absolute inset-y-0 left-0 w-1 ${config.rail}`} />
+                            <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+                              <div className="min-w-0 flex-1 space-y-3 pl-3">
+                                <div className="flex flex-wrap items-center gap-2">
+                                  <span className={`px-2 py-1 text-[9px] font-black uppercase tracking-[0.18em] ${config.chip}`}>
+                                    {config.label}
+                                  </span>
+                                  <span className={`border px-2 py-1 text-[9px] font-black uppercase tracking-[0.18em] ${getStatusTone(finding.status)}`}>
+                                    {finding.status}
+                                  </span>
+                                  <span className="text-[10px] font-mono uppercase tracking-[0.18em] text-silver/35">
+                                    {finding.category || 'Uncategorized'}
+                                  </span>
+                                  {finding.cve ? (
+                                    <span className="border border-rag-blue/20 bg-rag-blue/10 px-2 py-1 text-[9px] font-mono uppercase tracking-[0.15em] text-rag-blue">
+                                      {finding.cve}
+                                    </span>
+                                  ) : null}
+                                </div>
+
+                                <div>
+                                  <h3 className="text-xl font-black uppercase tracking-tight text-silver-bright">{finding.title}</h3>
+                                  <p className="mt-2 text-[11px] font-mono uppercase tracking-[0.16em] text-silver/45">
+                                    Target // {finding.target || 'Unknown'} // Observed // {formatLocaleDate(finding.discovered_at)}
+                                  </p>
+                                </div>
+
+                                <p className="max-w-4xl text-sm leading-relaxed text-silver/70">
+                                  {finding.description || 'No description provided.'}
+                                </p>
+                              </div>
+
+                              <div className="flex flex-row items-end gap-6 lg:min-w-[140px] lg:flex-col lg:items-end">
+                                {typeof finding.cvss === 'number' ? (
+                                  <div className="text-right">
+                                    <p className="text-[9px] font-black uppercase tracking-[0.2em] text-silver/35">CVSS</p>
+                                    <p className={`text-3xl font-black italic ${finding.cvss >= 9 ? 'text-rag-red' : 'text-silver-bright'}`}>
+                                      {finding.cvss.toFixed(1)}
+                                    </p>
+                                  </div>
+                                ) : null}
+
+                                <span className={`material-symbols-outlined text-lg ${isSelected ? 'text-silver-bright' : 'text-silver/30'}`}>
+                                  east
+                                </span>
+                              </div>
+                            </div>
+                          </button>
+                        )
+                      })}
                     </div>
                   </div>
                 )
               })
-            ) : (
-              <div className="border-2 border-black bg-charcoal shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
-                <div className="flex w-full items-center justify-between border-b border-silver-bright/8 px-5 py-4 text-left">
-                  <div className="flex items-center gap-4">
-                    <span className="h-3 w-3 rotate-45 bg-silver-bright" />
-                    <div>
-                      <p className="text-lg font-black uppercase tracking-[0.18em] text-silver-bright">
-                        {sortMode === 'newest' ? 'Newest First' : sortMode === 'oldest' ? 'Oldest First' : 'By Target'}
-                      </p>
-                      <p className="text-[10px] font-mono uppercase tracking-[0.2em] text-silver/40">{sortedFindings.length} visible in queue</p>
-                    </div>
-                  </div>
-                </div>
-                <div className="divide-y divide-silver-bright/6">
-                  {sortedFindings.map((finding) => renderFindingRow(finding))}
-                </div>
-              </div>
             )}
           </motion.section>
 
diff --git a/frontend/src/pages/Reports.tsx b/frontend/src/pages/Reports.tsx
index e8e63886..fe5f8cce 100644
--- a/frontend/src/pages/Reports.tsx
+++ b/frontend/src/pages/Reports.tsx
@@ -8,6 +8,7 @@ import {
   Download01Icon,
   File01Icon,
   KnightShieldIcon,
+  Pdf02Icon,
   Radar02Icon,
   Refresh01Icon,
   ScanEyeIcon,
@@ -15,13 +16,7 @@ import {
   UserShield02Icon,
 } from '@hugeicons/core-free-icons'
 import { getDashboardSummary, getReports, API_BASE } from '../api'
- 
 import { formatDateLong } from '../utils/date'
-import { getPreference, setPreference } from '../utils/preferences'
- 
-import { formatDateLong, isWithinDateRange, type DateRange } from '../utils/date'
-import { usePreferredExportFormat } from '../hooks/usePreferredExportFormat'
- 
 
 type Report = {
   id: string
@@ -35,28 +30,24 @@ type Report = {
   pages: number
 }
 
-type ReportStatus = 'all' | 'ready' | 'generating' | 'failed'
-
 const containerVariants = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: { staggerChildren: 0.05 },
-  },
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: { staggerChildren: 0.05 }
+    }
 }
 
 const itemVariants = {
-  hidden: { opacity: 0, scale: 0.95, y: 20 },
-  visible: {
-    opacity: 1,
-    scale: 1,
-    y: 0,
-    transition: { duration: 0.4 },
-  },
+    hidden: { opacity: 0, scale: 0.95, y: 20 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      y: 0,
+      transition: { duration: 0.4 }
+    }
 }
 
-const exportFormats = ['pdf', 'html', 'csv' , 'sarif'] as const
-
 function ReportIcon({
   icon,
   size = 20,
@@ -73,55 +64,27 @@ export default function Reports() {
   const navigate = useNavigate()
   const [reports, setReports] = useState<Report[]>([])
   const [summary, setSummary] = useState<any>({ total_findings: 0, total_assets: 0, critical_findings: 0, high_findings: 0, total_attack_surface: 0 })
- 
-  const [selectedType, setSelectedType] = useState(() => getPreference('reports-type-filter', 'all'))
- 
   const [selectedType, setSelectedType] = useState('all')
-  const [selectedStatus, setSelectedStatus] = useState<ReportStatus>('all')
-  const [selectedDateRange, setSelectedDateRange] = useState<DateRange>('all')
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const { preferred, savePreference } = usePreferredExportFormat()
- 
 
   const fetchReports = () => {
-    setLoading(true)
-    setError(null)
-    Promise.all([getReports(), getDashboardSummary()])
-      .then(([reportData, summaryData]: any) => {
-        setReports(reportData.reports || [])
-        setSummary(summaryData || {})
-      })
-      .catch(() => {
-        setError('Failed to fetch reports')
-      })
-      .finally(() => {
-        setLoading(false)
-      })
+    Promise.all([getReports(), getDashboardSummary()]).then(([reportData, summaryData]: any) => {
+      setReports(reportData.reports || [])
+      setSummary(summaryData || {})
+    })
   }
 
   useEffect(() => {
     fetchReports()
   }, [])
- 
-  useEffect(() => {
-    setPreference('reports-type-filter', selectedType)
-  }, [selectedType])
 
   const filteredReports = reports.filter((report) => selectedType === 'all' || report.type === selectedType)
   
   // Check if any report with status 'ready' exists
   const hasReadyReport = reports.some(report => report.status === 'ready')
- 
-  const filteredReports = reports.filter((report) =>
-    (selectedType === 'all' || report.type === selectedType) &&
-    (selectedStatus === 'all' || report.status === selectedStatus) &&
-    isWithinDateRange(report.generated_at, selectedDateRange)
-  )
- 
 
   return (
     <div className="min-h-screen bg-charcoal-dark text-silver p-6 md:p-12 space-y-12">
+
       {/* Neo-Brutalist Header */}
       <header className="relative flex flex-col md:flex-row justify-between items-start md:items-end gap-8 pb-12 border-b-4 border-silver-bright/10 font-black">
         <div className="space-y-4">
@@ -136,297 +99,224 @@ export default function Reports() {
           </p>
         </div>
 
-        <div className="flex items-center gap-6">
-          <button
-            onClick={fetchReports}
-            className="bg-charcoal border-4 border-black p-4 text-silver-bright shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all"
-            title="Refresh Archive"
-          >
-            <ReportIcon icon={Refresh01Icon} className="block" aria-hidden="true" />
-          </button>
-        </div>
+         <div className="flex items-center gap-6">
+            <button
+               onClick={fetchReports}
+               className="bg-charcoal border-4 border-black p-4 text-silver-bright shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all"
+               title="Refresh Archive"
+            >
+               <ReportIcon icon={Refresh01Icon} className="block" />
+            </button>
+            <button 
+               onClick={() => {
+                  if (hasReadyReport) {
+                     window.open(`${API_BASE}/task/latest/report/pdf`, '_blank')
+                  }
+               }}
+               disabled={!hasReadyReport}
+               className={`bg-silver-bright border-4 border-black p-4 text-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] transition-all ${
+                  hasReadyReport 
+                     ? 'hover:shadow-none hover:translate-x-1 hover:translate-y-1' 
+                     : 'opacity-50 cursor-not-allowed'
+               }`}
+               title={hasReadyReport ? "Download Latest Briefing" : "No ready report available"}
+            >
+               <ReportIcon icon={Pdf02Icon} className="block" />
+            </button>
+         </div>
       </header>
 
-      {/* Loading State */}
-      {loading && (
-        <div className="flex items-center justify-center py-40 gap-6">
-          <div className="animate-spin">
-            <ReportIcon icon={Refresh01Icon} size={48} className="text-silver/20" aria-hidden="true" />
-          </div>
-          <p className="text-[10px] font-black text-silver/20 uppercase tracking-[0.4em] italic animate-pulse">
-            Retrieving Archive Data...
-          </p>
-        </div>
-      )}
-
-      {/* Error State */}
-      {!loading && error && (
-        <div className="border-4 border-rag-red bg-rag-red/10 p-8 flex items-center gap-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
-          <div className="space-y-1">
-            <p className="text-xs font-black text-rag-red uppercase tracking-widest">Archive_Retrieval_Failed</p>
-            <p className="text-[10px] font-mono text-silver/40 uppercase tracking-widest">{error}</p>
-          </div>
-          <button
-            onClick={fetchReports}
-            className="ml-auto bg-rag-red border-4 border-black px-6 py-3 text-[9px] font-black uppercase tracking-widest text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all"
-          >
-            Retry
-          </button>
-        </div>
-      )}
-
-      {!loading && !error && (
-        <>
-          {/* Metrics Row */}
-          <section className="grid grid-cols-2 md:grid-cols-4 gap-6">
-            {[
+      {/* Metrics Row */}
+      <section className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          {[
               { label: 'Archived_Briefings', val: reports.length, color: 'bg-rag-blue', unit: 'FILES' },
               { label: 'Surface_Nodes', val: summary.total_assets || 0, color: 'bg-rag-green', unit: 'NODES' },
               { label: 'Aggregate_Anomalies', val: summary.total_findings || 0, color: 'bg-rag-red', unit: 'TRIGGERS' },
               { label: 'Archive_Volume', val: '12.4', color: 'bg-rag-amber', unit: 'GB' },
-            ].map((m, i) => (
+          ].map((m, i) => (
               <div key={i} className={`${m.color} border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] flex flex-col justify-between h-40 group hover:-translate-y-1 transition-transform`}>
-                <div className="flex justify-between items-start">
-                  <span className="text-[10px] font-black text-black uppercase tracking-[0.2em] italic">{m.label}</span>
-                  <ReportIcon icon={Archive02Icon} className="text-black/20 group-hover:text-black transition-colors" aria-hidden="true" />
-                </div>
-                <div className="flex items-baseline gap-2">
-                  <span className="text-5xl font-black text-black font-mono leading-none tracking-tighter">{m.val}</span>
-                  <span className="text-[10px] font-black text-black/40 uppercase tracking-widest">{m.unit}</span>
-                </div>
-              </div>
-            ))}
-          </section>
-
-          <div className="grid grid-cols-1 xl:grid-cols-4 gap-12">
-            {/* Filtration Sidebar */}
-            <aside className="xl:col-span-1 space-y-12">
-              <section className="bg-charcoal border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] space-y-8">
-
-                {/* Type Filter */}
-                <div className="space-y-4">
-                  <label className="text-[10px] font-black text-silver-bright uppercase tracking-[0.2em] italic">Classification_Isolation</label>
-                  <div className="grid grid-cols-1 gap-2">
-                    {['all', 'executive', 'technical', 'compliance'].map(t => (
-                      <button
-                        key={t}
-                        onClick={() => setSelectedType(t)}
-                        className={`px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest border-4 transition-all flex justify-between items-center ${
-                          selectedType === t
-                            ? 'bg-rag-red border-black text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]'
-                            : 'bg-charcoal-dark border-black text-silver/40 hover:border-silver-bright/20'
-                        }`}
-                      >
-                        {t} BRIEFINGS
-                        {selectedType === t && <ReportIcon icon={Radar02Icon} size={16} className="text-black" aria-hidden="true" />}
-                      </button>
-                    ))}
+                  <div className="flex justify-between items-start">
+                     <span className="text-[10px] font-black text-black uppercase tracking-[0.2em] italic">{m.label}</span>
+                     <ReportIcon icon={Archive02Icon} className="text-black/20 group-hover:text-black transition-colors" />
                   </div>
-                </div>
-
-                {/* Status Filter */}
-                <div className="space-y-4">
-                  <label className="text-[10px] font-black text-silver-bright uppercase tracking-[0.2em] italic">Status_Filter</label>
-                  <div className="grid grid-cols-1 gap-2">
-                    {([
-                      { value: 'all',        label: 'All Statuses' },
-                      { value: 'ready',      label: 'Ready' },
-                      { value: 'generating', label: 'Generating' },
-                      { value: 'failed',     label: 'Failed' },
-                    ] as const).map(({ value, label }) => (
-                      <button
-                        key={value}
-                        onClick={() => setSelectedStatus(value)}
-                        aria-label={`status ${label}`}
-                        className={`px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest border-4 transition-all flex justify-between items-center ${
-                          selectedStatus === value
-                            ? 'bg-rag-amber border-black text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]'
-                            : 'bg-charcoal-dark border-black text-silver/40 hover:border-silver-bright/20'
-                        }`}
-                      >
-                        {label}
-                        {selectedStatus === value && <ReportIcon icon={Radar02Icon} size={16} className="text-black" />}
-                      </button>
-                    ))}
+                  <div className="flex items-baseline gap-2">
+                      <span className="text-5xl font-black text-black font-mono leading-none tracking-tighter">{m.val}</span>
+                      <span className="text-[10px] font-black text-black/40 uppercase tracking-widest">{m.unit}</span>
                   </div>
-                </div>
+              </div>
+          ))}
+      </section>
 
-                {/* Date Range Filter */}
-                <div className="space-y-4">
-                  <label className="text-[10px] font-black text-silver-bright uppercase tracking-[0.2em] italic">Date_Range</label>
-                  <div className="grid grid-cols-1 gap-2">
-                    {([
-                      { value: 'all', label: 'All Time' },
-                      { value: '24h', label: 'Last 24 Hours' },
-                      { value: '7d',  label: 'Last 7 Days' },
-                      { value: '30d', label: 'Last 30 Days' },
-                    ] as const).map(({ value, label }) => (
-                      <button
-                        key={value}
-                        onClick={() => setSelectedDateRange(value)}
-                        aria-label={`date ${label}`}
-                        className={`px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest border-4 transition-all flex justify-between items-center ${
-                          selectedDateRange === value
-                            ? 'bg-rag-blue border-black text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]'
-                            : 'bg-charcoal-dark border-black text-silver/40 hover:border-silver-bright/20'
-                        }`}
-                      >
-                        {label}
-                        {selectedDateRange === value && <ReportIcon icon={Radar02Icon} size={16} className="text-black" />}
-                      </button>
-                    ))}
+      <div className="grid grid-cols-1 xl:grid-cols-4 gap-12">
+          {/* Filtration Sidebar */}
+          <aside className="xl:col-span-1 space-y-12">
+              <section className="bg-charcoal border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] space-y-8">
+                  <div className="space-y-4">
+                      <label className="text-[10px] font-black text-silver-bright uppercase tracking-[0.2em] italic">Classification_Isolation</label>
+                      <div className="grid grid-cols-1 gap-2">
+                          {['all', 'executive', 'technical', 'compliance'].map(t => (
+                              <button
+                                  key={t}
+                                  onClick={() => setSelectedType(t)}
+                                  className={`px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest border-4 transition-all flex justify-between items-center ${
+                                      selectedType === t
+                                      ? 'bg-rag-red border-black text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]'
+                                      : 'bg-charcoal-dark border-black text-silver/40 hover:border-silver-bright/20'
+                                  }`}
+                              >
+                                  {t} BRIEFINGS
+                                  {selectedType === t && <ReportIcon icon={Radar02Icon} size={16} className="text-black" />}
+                              </button>
+                          ))}
+                      </div>
                   </div>
-                </div>
 
-                <div className="p-8 border-4 border-black border-dashed space-y-4 bg-charcoal-dark/50">
-                  <div className="flex items-center gap-3">
-                    <ReportIcon icon={KnightShieldIcon} className="text-rag-green" aria-hidden="true" />
-                    <h4 className="text-[10px] font-black text-silver-bright uppercase tracking-[0.2em] italic leading-none">Integrity_Secure</h4>
+                  <div className="p-8 border-4 border-black border-dashed space-y-4 bg-charcoal-dark/50">
+                      <div className="flex items-center gap-3">
+                        <ReportIcon icon={KnightShieldIcon} className="text-rag-green" />
+                        <h4 className="text-[10px] font-black text-silver-bright uppercase tracking-[0.2em] italic leading-none">Integrity_Secure</h4>
+                      </div>
+                      <p className="text-[10px] text-silver/40 font-black uppercase tracking-widest leading-loose italic">
+                          Dossiers are cryptographically hashed and recorded. Modifications are strictly detectable by the Enclave audit daemon.
+                      </p>
                   </div>
-                  <p className="text-[10px] text-silver/40 font-black uppercase tracking-widest leading-loose italic">
-                    Dossiers are cryptographically hashed and recorded. Modifications are strictly detectable by the Enclave audit daemon.
-                  </p>
-                </div>
               </section>
-            </aside>
+          </aside>
 
-            {/* Ledger Section */}
-            <main className="xl:col-span-3 space-y-8">
+          {/* Ledger Section */}
+          <main className="xl:col-span-3 space-y-8">
               <div className="flex flex-col md:flex-row justify-between items-end gap-6 border-b-4 border-black pb-8">
-                <h2 className="text-5xl font-black text-silver-bright italic uppercase tracking-tighter shrink-0">Historical_Ledger</h2>
-                <div className="h-0.5 bg-black/10 flex-1 mb-2 hidden md:block"></div>
-                <span className="text-[10px] font-mono text-silver/20 uppercase font-black mb-2 animate-pulse">{filteredReports.length} ENTRIES_LOCATED</span>
+                  <h2 className="text-5xl font-black text-silver-bright italic uppercase tracking-tighter shrink-0">Historical_Ledger</h2>
+                  <div className="h-0.5 bg-black/10 flex-1 mb-2 hidden md:block"></div>
+                  <span className="text-[10px] font-mono text-silver/20 uppercase font-black mb-2 animate-pulse">{filteredReports.length} ENTRIES_LOCATED</span>
               </div>
 
               <AnimatePresence mode="popLayout">
-                <motion.div
-                  variants={containerVariants}
-                  initial="hidden"
-                  animate="visible"
-                  className="grid grid-cols-1 md:grid-cols-2 gap-8"
-                >
-                  {filteredReports.map((report) => (
-                    <motion.div
-                      key={report.id}
-                      variants={itemVariants}
-                      className="group bg-charcoal border-4 border-black p-10 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_0px_rgba(0,0,0,1)] transition-all relative overflow-hidden"
-                    >
-                      {/* Status Top Bar */}
-                      <div className={`absolute top-0 left-0 h-2 transition-all duration-500 ${
-                        report.status === 'ready' ? 'bg-rag-green w-full' :
-                          report.status === 'failed' ? 'bg-rag-red w-full' : 'bg-rag-amber w-1/2 animate-pulse'
-                      }`}></div>
+                  <motion.div
+                      variants={containerVariants}
+                      initial="hidden"
+                      animate="visible"
+                      className="grid grid-cols-1 md:grid-cols-2 gap-8"
+                  >
+                      {filteredReports.length === 0 && reports.length > 0 ? (
+                            <div className="col-span-2 py-40 border-4 border-dashed border-black/5 text-center flex flex-col items-center gap-8 bg-charcoal/30">
+                                <span className="material-symbols-outlined text-silver/5 text-9xl">filter_alt_off</span>
+                                <div className="space-y-2">
+                                    <p className="text-xl font-black text-silver/20 uppercase tracking-[0.4em] italic">
+                                        No Matching Reports
+                                    </p>
+                                    <p className="text-xs font-mono text-silver/10 uppercase tracking-widest leading-relaxed">
+                                        No reports match the current filter. Adjust classification to view additional dossiers.
+                                    </p>
+                                </div>
+                            </div>
+                        ) : (
+                                     filteredReports.map((report) => (
+                                         <motion.div
+                                             key={report.id}
+                                             variants={itemVariants}
+                                             className="group bg-charcoal border-4 border-black p-10 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_0px_rgba(0,0,0,1)] transition-all relative overflow-hidden"
+                                         >
+                                             {/* Status Top Bar */}
+                                             <div className={`absolute top-0 left-0 h-2 transition-all duration-500 ${
+                                                 report.status === 'ready' ? 'bg-rag-green w-full' :
+                                                 report.status === 'failed' ? 'bg-rag-red w-full' : 'bg-rag-amber w-1/2 animate-pulse'
+                                             }`}></div>
 
-                      <div className="space-y-8 relative z-10">
-                        <div className="flex justify-between items-start">
-                          <span className={`px-2 py-0.5 text-[9px] font-black uppercase italic border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] ${
-                            report.type === 'executive' ? 'bg-silver-bright text-black' :
-                              report.type === 'compliance' ? 'bg-rag-green text-black' :
-                                'bg-rag-blue text-black'
-                          }`}>
-                            {report.type}_TYPE
-                          </span>
-                          <ReportIcon icon={File01Icon} size={24} className="text-silver/10 group-hover:text-silver-bright transition-colors" aria-hidden="true" />
-                        </div>
+                                             <div className="space-y-8 relative z-10">
+                                                 <div className="flex justify-between items-start">
+                                                     <span className={`px-2 py-0.5 text-[9px] font-black uppercase italic border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] ${
+                                                         report.type === 'executive' ? 'bg-silver-bright text-black' :
+                                                         report.type === 'compliance' ? 'bg-rag-green text-black' :
+                                                         'bg-rag-blue text-black'
+                                                     }`}>
+                                                         {report.type}_TYPE
+                                                     </span>
+                                                     <ReportIcon icon={File01Icon} size={24} className="text-silver/10 group-hover:text-silver-bright transition-colors" />
+                                                 </div>
 
-                        <div>
-                          <h3 className="text-3xl font-black text-silver-bright uppercase tracking-tighter italic leading-tight group-hover:text-rag-red transition-colors font-mono">
-                            {report.name}
-                          </h3>
-                          <div className="w-12 h-1 bg-silver-bright/10 mt-6 group-hover:w-full group-hover:bg-rag-red/30 transition-all duration-700"></div>
-                        </div>
+                                                 <div>
+                                                     <h3 className="text-3xl font-black text-silver-bright uppercase tracking-tighter italic leading-tight group-hover:text-rag-red transition-colors font-mono">
+                                                         {report.name}
+                                                     </h3>
+                                                     <div className="w-12 h-1 bg-silver-bright/10 mt-6 group-hover:w-full group-hover:bg-rag-red/30 transition-all duration-700"></div>
+                                                 </div>
 
-                        <div className="grid grid-cols-3 gap-6 py-6 border-y-2 border-black border-dashed">
-                          <div className="space-y-1">
-                            <span className="text-[8px] font-black text-silver/20 uppercase tracking-widest italic block">Findings</span>
-                            <span className="text-xs font-black font-mono text-silver-bright">{report.findings.toString().padStart(3, '0')}</span>
-                          </div>
-                          <div className="space-y-1 text-center">
-                            <span className="text-[8px] font-black text-silver/20 uppercase tracking-widest italic block">Assets</span>
-                            <span className="text-xs font-black font-mono text-silver-bright">{report.assets.toString().padStart(3, '0')}</span>
-                          </div>
-                          <div className="space-y-1 text-right">
-                            <span className="text-[8px] font-black text-silver/20 uppercase tracking-widest italic block">Pages</span>
-                            <span className="text-xs font-black font-mono text-silver-bright">{report.pages.toString().padStart(3, '0')}</span>
-                          </div>
-                        </div>
+                                                 <div className="grid grid-cols-3 gap-6 py-6 border-y-2 border-black border-dashed">
+                                                     <div className="space-y-1">
+                                                         <span className="text-[8px] font-black text-silver/20 uppercase tracking-widest italic block">Findings</span>
+                                                         <span className="text-xs font-black font-mono text-silver-bright">{report.findings.toString().padStart(3, '0')}</span>
+                                                     </div>
+                                                     <div className="space-y-1 text-center">
+                                                         <span className="text-[8px] font-black text-silver/20 uppercase tracking-widest italic block">Assets</span>
+                                                         <span className="text-xs font-black font-mono text-silver-bright">{report.assets.toString().padStart(3, '0')}</span>
+                                                     </div>
+                                                     <div className="space-y-1 text-right">
+                                                         <span className="text-[8px] font-black text-silver/20 uppercase tracking-widest italic block">Pages</span>
+                                                         <span className="text-xs font-black font-mono text-silver-bright">{report.pages.toString().padStart(3, '0')}</span>
+                                                     </div>
+                                                 </div>
 
-                        <div className="flex justify-between items-end pt-2">
-                          <div className="space-y-1">
-                            <p className="text-[8px] font-black uppercase text-silver/20 tracking-[0.3em] italic leading-none">TIMESTAMP</p>
-                            <p className="text-[10px] font-mono text-silver-bright uppercase font-black">{formatDateLong(report.generated_at)}</p>
-                          </div>
-                          <div className="flex gap-4">
-                            <button
-                              onClick={() => navigate(`/task/${report.task_id}`)}
-                              className="bg-charcoal-dark border-4 border-black p-3 text-silver/20 group-hover:text-silver-bright group-hover:bg-black transition-all"
-                              title="View Briefing" aria-label="View briefing"
-                            >
-                              <ReportIcon icon={ScanEyeIcon} size={18} aria-hidden="true"/>
-                            </button>
-                            {[...exportFormats].sort((a, b) =>
-                              a === preferred ? -1 : b === preferred ? 1 : 0
-                            ).map((format) => (
-                              <button
-                                key={format}
-                                onClick={() => {
-                                  if (report.status !== 'generating') {
-                                    savePreference(format)
-                                    window.open(`${API_BASE}/task/${report.task_id}/report/${format}`, '_blank')
-                                  }
-                                }}
-                                disabled={report.status === 'generating'}
-                                className={`border-4 border-black px-3 py-2 text-[9px] font-black uppercase tracking-widest transition-all disabled:opacity-30 disabled:cursor-not-allowed disabled:group-hover:text-silver/20 disabled:group-hover:bg-charcoal-dark ${
-                                  format === preferred
-                                    ? 'bg-rag-amber text-black group-hover:bg-rag-amber'
-                                    : 'bg-charcoal-dark text-silver/20 group-hover:text-silver-bright group-hover:bg-black'
-                                }`}
-                                title={report.status === 'generating' ? 'Export unavailable while report is generating' : `Download ${format.toUpperCase()}${format === preferred ? ' (preferred)' : ''}`}
-                              >
-                                {format}
-                              </button>
-                            ))}
-                          </div>
-                        </div>
-                      </div>
+                                                 <div className="flex justify-between items-end pt-2">
+                                                     <div className="space-y-1">
+                                                         <p className="text-[8px] font-black uppercase text-silver/20 tracking-[0.3em] italic leading-none">TIMESTAMP</p>
+                                                         <p className="text-[10px] font-mono text-silver-bright uppercase font-black">{formatDateLong(report.generated_at)}</p>
+                                                     </div>
+                                                     <div className="flex gap-4">
+                                                         <button
+                                                             onClick={() => navigate(`/task/${report.task_id}`)}
+                                                             className="bg-charcoal-dark border-4 border-black p-3 text-silver/20 group-hover:text-silver-bright group-hover:bg-black transition-all"
+                                                             title="View Briefing"
+                                                         >
+                                                             <ReportIcon icon={ScanEyeIcon} size={18} />
+                                                         </button>
+                                                         <button
+                                                             onClick={() => window.open(`${API_BASE}/task/${report.task_id}/report/pdf`, '_blank')}
+                                                             className="bg-charcoal-dark border-4 border-black p-3 text-silver/20 group-hover:text-silver-bright group-hover:bg-black transition-all"
+                                                             title="Download PDF"
+                                                         >
+                                                             <ReportIcon icon={Download01Icon} size={18} />
+                                                         </button>
+                                                     </div>
+                                                 </div>
+                                             </div>
 
-                      {/* Background Hover Icon */}
-                      <div className="absolute -right-12 -bottom-12 opacity-0 group-hover:opacity-[0.03] transition-all duration-1000 transform scale-150 rotate-12 pointer-events-none">
-                        <div className="text-silver-bright">
-                          <ReportIcon
-                            icon={report.type === 'executive' ? Analytics02Icon : report.type === 'compliance' ? UserShield02Icon : ShieldUserIcon}
-                            size={200} aria-hidden="true"
-                          />
-                        </div>
-                      </div>
-                    </motion.div>
-                  ))}
+                                              {/* Background Hover Icon */}
+                                              <div className="absolute -right-12 -bottom-12 opacity-0 group-hover:opacity-[0.03] transition-all duration-1000 transform scale-150 rotate-12 pointer-events-none">
+                                                 <div className="text-silver-bright">
+                                                     <ReportIcon
+                                                       icon={report.type === 'executive' ? Analytics02Icon : report.type === 'compliance' ? UserShield02Icon : ShieldUserIcon}
+                                                       size={200}
+                                                     />
+                                                 </div>
+                                              </div>
+                                         </motion.div>
+                                     ))
+                        )}
 
-                  {filteredReports.length === 0 && (
-                    <div className="col-span-2 py-40 border-4 border-dashed border-black/5 text-center flex flex-col items-center gap-8 bg-charcoal/30">
-                      <ReportIcon icon={Archive02Icon} size={120} className="text-silver/5" aria-hidden="true" />
-                      <div className="space-y-2">
-                        <p className="text-xl font-black text-silver/20 uppercase tracking-[0.4em] italic">Archive Isolated</p>
-                        <p className="text-xs font-mono text-silver/10 uppercase tracking-widest leading-relaxed">No entries match the selected filters</p>
-                      </div>
-                    </div>
-                  )}
-                </motion.div>
+                      {reports.length === 0 && (
+                          <div className="col-span-2 py-40 border-4 border-dashed border-black/5 text-center flex flex-col items-center gap-8 bg-charcoal/30">
+                              <ReportIcon icon={Archive02Icon} size={120} className="text-silver/5" />
+                              <div className="space-y-2">
+                                  <p className="text-xl font-black text-silver/20 uppercase tracking-[0.4em] italic">Archive Isolated</p>
+                                  <p className="text-xs font-mono text-silver/10 uppercase tracking-widest leading-relaxed">System buffer awaiting briefing generation protocols</p>
+                              </div>
+                          </div>
+                      )}
+                  </motion.div>
               </AnimatePresence>
-            </main>
-          </div>
-        </>
-      )}
+          </main>
+      </div>
 
       {/* Tactical Footer */}
       <footer className="pt-24 border-t-4 border-black/5 flex flex-col md:flex-row justify-between items-center gap-8 text-[9px] font-black uppercase tracking-[0.5em] italic opacity-20">
-        <div className="flex items-center gap-6">
-          <div className="w-12 h-1 bg-silver/20"></div>
-          RESTRICTED_ACCESS_ENCLAVE // SYSTEM_ARCHIVE_DAEMON // {new Date().getFullYear()}
-        </div>
-        <div className="flex gap-4">
-          {[1, 2, 3, 4, 5, 6, 7, 8].map(i => <div key={i} className="w-2 h-2 bg-silver/20 rounded-full"></div>)}
-        </div>
+          <div className="flex items-center gap-6">
+              <div className="w-12 h-1 bg-silver/20"></div>
+              RESTRICTED_ACCESS_ENCLAVE // SYSTEM_ARCHIVE_DAEMON // {new Date().getFullYear()}
+          </div>
+          <div className="flex gap-4">
+              {[1,2,3,4,5,6,7,8].map(i => <div key={i} className="w-2 h-2 bg-silver/20 rounded-full"></div>)}
+          </div>
       </footer>
     </div>
   )
diff --git a/frontend/src/pages/Scans.tsx b/frontend/src/pages/Scans.tsx
index 2280f334..6328a061 100644
--- a/frontend/src/pages/Scans.tsx
+++ b/frontend/src/pages/Scans.tsx
@@ -1,73 +1,55 @@
- 
 import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { motion, AnimatePresence } from 'framer-motion'
 import { API_BASE, deleteTask, clearAllTasks, bulkDeleteTasks } from '../api'
 import { routePath } from '../routes'
 import { parseDateSafe, formatLocaleDate, formatLocaleTime } from '../utils/date'
-import { getPreference, setPreference } from '../utils/preferences'
- 
-import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { motion, AnimatePresence } from "framer-motion";
-import { API_BASE, deleteTask, clearAllTasks, bulkDeleteTasks } from "../api";
-import { routePath } from "../routes";
-import {
-  parseDateSafe,
-  formatLocaleDate,
-  formatLocaleTime,
-} from "../utils/date";
-import Pagination from "../components/Pagination";
- 
 
 interface Task {
-  task_id: string;
-  plugin_id: string;
-  tool: string;
-  target: string;
-  status: "queued" | "running" | "completed" | "failed" | "cancelled";
-  created_at: string;
-  started_at?: string;
-  completed_at?: string;
-  duration_seconds?: number;
-  inputs?: any;
-  preset?: string;
-  queue_position?: number;
-  pending_count?: number;
+    task_id: string
+    plugin_id: string
+    tool: string
+    target: string
+    status: 'queued' | 'running' | 'completed' | 'failed' | 'cancelled'
+    created_at: string
+    started_at?: string
+    completed_at?: string
+    duration_seconds?: number
+    inputs?: any
+    preset?: string
 }
 
 const statusFilters = [
-  { value: "all", label: "ALL_OPERATIONS" },
-  { value: "running", label: "ACTIVE_EXECUTION" },
-  { value: "completed", label: "TERMINATED_SUCCESS" },
-  { value: "failed", label: "SYSTEM_FAILURE" },
-  { value: "cancelled", label: "MANUAL_ABORT" },
-];
+    { value: 'all', label: 'ALL_OPERATIONS' },
+    { value: 'running', label: 'ACTIVE_EXECUTION' },
+    { value: 'completed', label: 'TERMINATED_SUCCESS' },
+    { value: 'failed', label: 'SYSTEM_FAILURE' },
+    { value: 'cancelled', label: 'MANUAL_ABORT' }
+]
 
 const containerVariants = {
   hidden: { opacity: 0 },
   visible: {
     opacity: 1,
-    transition: { staggerChildren: 0.1 },
-  },
-} as const;
+    transition: { staggerChildren: 0.1 }
+  }
+} as const
 
 const itemVariants = {
   hidden: { opacity: 0, scale: 0.95, y: 20 },
-  visible: {
-    opacity: 1,
-    scale: 1,
+  visible: { 
+    opacity: 1, 
+    scale: 1, 
     y: 0,
-    transition: { type: "spring", stiffness: 200, damping: 20 } as any,
-  },
-} as const;
+    transition: { type: 'spring', stiffness: 200, damping: 20 } as any
+  }
+} as const
 
 export default function Scans() {
- 
     const navigate = useNavigate()
     const [tasks, setTasks] = useState<Task[]>([])
     const [loading, setLoading] = useState(true)
-    const [filter, setFilter] = useState(() => getPreference('scans-status-filter', 'all'))
+    const [filter, setFilter] = useState('all')
     const [expandedId, setExpandedId] = useState<string | null>(null)
     const [selectedIds, setSelectedIds] = useState<string[]>([])
 
@@ -77,10 +59,6 @@ export default function Scans() {
         return () => clearInterval(interval)
     }, [filter])
 
-    useEffect(() => {
-        setPreference('scans-status-filter', filter)
-    }, [filter])
-
     async function loadTasks() {
         try {
             const url = filter === 'all'
@@ -95,575 +73,405 @@ export default function Scans() {
         } finally {
             setLoading(false)
         }
- 
-  const navigate = useNavigate();
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [filter, setFilter] = useState("all");
-  const [expandedId, setExpandedId] = useState<string | null>(null);
-  const [selectedIds, setSelectedIds] = useState<string[]>([]);
-  const [page, setPage] = useState(1);
-  const [total, setTotal] = useState(0);
-  const PAGE_LIMIT = 10;
-
-  useEffect(() => {
-    loadTasks();
-    const interval = setInterval(loadTasks, 5000);
-    return () => clearInterval(interval);
-  }, [filter, page]);
-
-  async function loadTasks() {
-    try {
-      const params = new URLSearchParams();
-      if (filter !== "all") params.set("status", filter);
-      params.set("page", String(page));
-      params.set("per_page", String(PAGE_LIMIT));
-
-      const res = await fetch(`${API_BASE}/tasks?${params.toString()}`);
-      const data = await res.json();
-      setTasks(data.tasks || []);
-      if (data.pagination?.total_items !== undefined) {
-        setTotal(data.pagination.total_items);
-      }
-    } catch (err) {
-      console.error("Failed to load tasks:", err);
-    } finally {
-      setLoading(false);
- 
     }
-  }
-  function handleFilterChange(value: string) {
-    setFilter(value);
-    setPage(1);
-  }
 
-  async function handleRescan(task: Task) {
-    try {
-      const res = await fetch(`${API_BASE}/task/start`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          plugin_id: task.plugin_id,
-          inputs: task.inputs || {},
-          consent_granted: true,
-          preset: task.preset,
-        }),
-      });
-      const data = await res.json();
-      if (data.task_id) {
-        navigate(routePath.task(data.task_id));
-      }
-    } catch (err) {
-      console.error("Rescan failed:", err);
+    async function handleRescan(task: Task) {
+        try {
+            const res = await fetch(`${API_BASE}/task/start`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    plugin_id: task.plugin_id,
+                    inputs: task.inputs || {},
+                    consent_granted: true,
+                    preset: task.preset
+                })
+            })
+            const data = await res.json()
+            if (data.task_id) {
+                navigate(routePath.task(data.task_id))
+            }
+        } catch (err) {
+            console.error('Rescan failed:', err)
+        }
     }
-  }
 
-  async function handleTaskDelete(taskId: string) {
-    if (
-      !window.confirm(
-        "Are you sure you want to delete this scan record? This will also remove associated findings and reports.",
-      )
-    ) {
-      return;
-    }
+    async function handleTaskDelete(taskId: string) {
+        if (!window.confirm('Are you sure you want to delete this scan record? This will also remove associated findings and reports.')) {
+            return
+        }
 
-    try {
-      await deleteTask(taskId);
-      setTasks((prev) => prev.filter((t) => t.task_id !== taskId));
-      if (expandedId === taskId) setExpandedId(null);
-    } catch (err) {
-      console.error("Failed to delete task:", err);
-      alert("Failed to delete task. It might still be running.");
+        try {
+            await deleteTask(taskId)
+            setTasks(prev => prev.filter(t => t.task_id !== taskId))
+            if (expandedId === taskId) setExpandedId(null)
+        } catch (err) {
+            console.error('Failed to delete task:', err)
+            alert('Failed to delete task. It might still be running.')
+        }
     }
-  }
 
-  async function handleClearAll() {
-    if (
-      !window.confirm(
-        "CRITICAL: Are you sure you want to PURGE ALL RECORDS? This will wipe all scan history, findings, assets, and reports. This action is irreversible.",
-      )
-    ) {
-      return;
-    }
+    async function handleClearAll() {
+        if (!window.confirm('CRITICAL: Are you sure you want to PURGE ALL RECORDS? This will wipe all scan history, findings, assets, and reports. This action is irreversible.')) {
+            return
+        }
 
-    try {
-      await clearAllTasks();
-      setTasks([]);
-      setSelectedIds([]);
-      setExpandedId(null);
-    } catch (err) {
-      console.error("Failed to clear history:", err);
-      alert("Failed to clear history. Ensure no tasks are currently running.");
+        try {
+            await clearAllTasks()
+            setTasks([])
+            setSelectedIds([])
+            setExpandedId(null)
+        } catch (err) {
+            console.error('Failed to clear history:', err)
+            alert('Failed to clear history. Ensure no tasks are currently running.')
+        }
     }
-  }
 
-  async function handleBulkDelete() {
-    if (selectedIds.length === 0) return;
-    if (
-      !window.confirm(
-        `Are you sure you want to delete ${selectedIds.length} selected scan records?`,
-      )
-    ) {
-      return;
-    }
+    async function handleBulkDelete() {
+        if (selectedIds.length === 0) return
+        if (!window.confirm(`Are you sure you want to delete ${selectedIds.length} selected scan records?`)) {
+            return
+        }
 
-    try {
-      await bulkDeleteTasks(selectedIds);
-      setTasks((prev) => prev.filter((t) => !selectedIds.includes(t.task_id)));
-      setSelectedIds([]);
-    } catch (err) {
-      console.error("Bulk delete failed:", err);
-      alert(
-        "Failed to delete some tasks. Ensure they are not currently running.",
-      );
+        try {
+            await bulkDeleteTasks(selectedIds)
+            setTasks(prev => prev.filter(t => !selectedIds.includes(t.task_id)))
+            setSelectedIds([])
+        } catch (err) {
+            console.error('Bulk delete failed:', err)
+            alert('Failed to delete some tasks. Ensure they are not currently running.')
+        }
     }
-  }
 
-  function toggleSelection(taskId: string, e: React.MouseEvent) {
-    e.stopPropagation();
-    setSelectedIds((prev) =>
-      prev.includes(taskId)
-        ? prev.filter((id) => id !== taskId)
-        : [...prev, taskId],
-    );
-  }
+    function toggleSelection(taskId: string, e: React.MouseEvent) {
+        e.stopPropagation()
+        setSelectedIds(prev => 
+            prev.includes(taskId) 
+            ? prev.filter(id => id !== taskId) 
+            : [...prev, taskId]
+        )
+    }
 
-  function toggleSelectAll() {
-    if (selectedIds.length === tasks.length) {
-      setSelectedIds([]);
-    } else {
-      setSelectedIds(tasks.map((t) => t.task_id));
+    function toggleSelectAll() {
+        if (selectedIds.length === tasks.length) {
+            setSelectedIds([])
+        } else {
+            setSelectedIds(tasks.map(t => t.task_id))
+        }
     }
-  }
 
-  function formatDuration(seconds?: number) {
-    if (!seconds) return null;
-    if (seconds < 60) return `${Math.round(seconds)}s`;
-    if (seconds < 3600) return `${Math.round(seconds / 60)}m`;
-    return `${Math.round(seconds / 3600)}h`;
-  }
+    function formatDuration(seconds?: number) {
+        if (!seconds) return null
+        if (seconds < 60) return `${Math.round(seconds)}s`
+        if (seconds < 3600) return `${Math.round(seconds / 60)}m`
+        return `${Math.round(seconds / 3600)}h`
+    }
 
-  return (
-    <div className="min-h-screen bg-charcoal-dark text-silver p-6 md:p-12 space-y-12">
-      {/* Neo-Brutalist Header */}
-      <header className="relative flex flex-col md:flex-row justify-between items-start md:items-end gap-8 pb-12 border-b-4 border-silver-bright/10">
-        <div className="space-y-4">
-          <div className="bg-rag-blue text-black px-4 py-1 text-xs font-black uppercase tracking-widest inline-block shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
-            Operational_Registry_v10.1
-          </div>
-          <h1 className="text-6xl md:text-8xl font-black text-silver-bright uppercase tracking-tighter leading-none italic">
-            Operational{" "}
-            <span
-              className="text-transparent stroke-white"
-              style={{ WebkitTextStroke: "1px var(--accent-silver-bright)" }}
-            >
-              Registry
-            </span>
-          </h1>
-          <p className="text-sm font-mono text-silver/40 uppercase tracking-widest italic flex items-center gap-4">
-            Total_Registry_Keys: {total} // SYSTEM_STATUS:{" "}
-            {loading ? "SYNCING..." : "SYNCED"}
-            <span
-              className={`w-2 h-2 rounded-full ${loading ? "bg-rag-amber animate-pulse" : "bg-rag-green"}`}
-            ></span>
-          </p>
-        </div>
+    return (
+        <div className="min-h-screen bg-charcoal-dark text-silver p-6 md:p-12 space-y-12">
+            
+            {/* Neo-Brutalist Header */}
+            <header className="relative flex flex-col md:flex-row justify-between items-start md:items-end gap-8 pb-12 border-b-4 border-silver-bright/10">
+                <div className="space-y-4">
+                  <div className="bg-rag-blue text-black px-4 py-1 text-xs font-black uppercase tracking-widest inline-block shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
+                    Operational_Registry_v10.1
+                  </div>
+                  <h1 className="text-6xl md:text-8xl font-black text-silver-bright uppercase tracking-tighter leading-none italic">
+                    Operational <span className="text-transparent stroke-white" style={{ WebkitTextStroke: '1px var(--accent-silver-bright)' }}>Registry</span>
+                  </h1>
+                  <p className="text-sm font-mono text-silver/40 uppercase tracking-widest italic flex items-center gap-4">
+                    Total_Registry_Keys: {tasks.length} // SYSTEM_STATUS: {loading ? 'SYNCING...' : 'SYNCED'}
+                    <span className={`w-2 h-2 rounded-full ${loading ? 'bg-rag-amber animate-pulse' : 'bg-rag-green'}`}></span>
+                  </p>
+                </div>
 
-        <div className="flex items-center gap-12 border-l-4 border-silver-bright/10 pl-12 hidden lg:flex">
-          <div className="text-right">
-            <span className="text-[10px] font-black text-silver/40 uppercase tracking-[0.3em] block mb-2 italic">
-              Integrity_Check
-            </span>
-            <span className="text-xs font-mono text-rag-green uppercase font-black">
-              OPSEC_CLEARANCE_L5
-            </span>
-          </div>
-        </div>
-      </header>
-
-      {/* Filtration Block */}
-      <section className="bg-charcoal border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] flex flex-col xl:flex-row justify-between items-center gap-12">
-        <div className="flex flex-wrap items-center gap-4">
-          <button
-            onClick={toggleSelectAll}
-            className={`px-6 py-3 text-[10px] font-black uppercase tracking-widest transition-all border-2 flex items-center gap-3 ${
-              selectedIds.length === tasks.length && tasks.length > 0
-                ? "bg-rag-blue text-black border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]"
-                : "bg-charcoal-dark text-silver/30 border-silver-bright/5 hover:border-silver-bright/20"
-            }`}
-          >
-            <span className="material-symbols-outlined text-sm">
-              {selectedIds.length === tasks.length && tasks.length > 0
-                ? "check_box"
-                : "check_box_outline_blank"}
-            </span>
-            Select_All
-          </button>
-          <div className="w-1 h-8 bg-black/40 mx-2 hidden md:block"></div>
-          {statusFilters.map((f) => (
-            <button
-              key={f.value}
-              onClick={() => handleFilterChange(f.value)}
-              className={`px-6 py-3 text-[10px] font-black uppercase tracking-widest transition-all border-2 flex items-center gap-2 ${
-                filter === f.value
-                  ? "bg-silver-bright text-black border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] -translate-x-0.5 -translate-y-0.5"
-                  : "bg-charcoal-dark text-silver/30 border-silver-bright/5 hover:border-silver-bright/20"
-              }`}
-            >
-              {f.label}
-              {filter === f.value && <span className="w-1 h-3 bg-black"></span>}
-            </button>
-          ))}
-        </div>
-        <div className="flex items-center gap-6">
-          {tasks.length > 0 && (
-            <button
-              onClick={handleClearAll}
-              className="px-6 py-3 text-[10px] font-black uppercase tracking-widest transition-all border-2 bg-rag-red/10 text-rag-red border-rag-red/20 hover:bg-rag-red hover:text-black hover:border-black flex items-center gap-2 italic"
-            >
-              Purge_All_Records
-              <span className="material-symbols-outlined text-sm">
-                delete_forever
-              </span>
-            </button>
-          )}
-          <div className="flex items-center gap-4 text-[10px] font-mono text-silver/20 uppercase italic tracking-widest hidden sm:flex">
-            Isolation_Protocol_Active //{" "}
-            <span className="text-rag-blue">v4_stable</span>
-          </div>
-        </div>
-      </section>
-
-      {/* Timeline Operations Feed */}
-      <section className="relative">
-        {/* Vertical Timeline Cable */}
-        <div className="absolute left-[39px] top-0 bottom-0 w-1 bg-silver-bright/5 hidden md:block"></div>
-
-        <AnimatePresence mode="popLayout">
-          {tasks.length > 0 ? (
-            <motion.div
-              variants={containerVariants}
-              initial="hidden"
-              animate="visible"
-              className="space-y-8"
-            >
-              {tasks.map((task) => {
-                const createDate = parseDateSafe(task.created_at);
-                const startDate = task.started_at
-                  ? parseDateSafe(task.started_at)
-                  : null;
-                const endDate = task.completed_at
-                  ? parseDateSafe(task.completed_at)
-                  : null;
-
-                return (
-                  <motion.div
-                    key={task.task_id}
-                    variants={itemVariants}
-                    layout
-                    className={`relative group md:pl-20 transition-all`}
-                  >
-                    {/* Timeline Node */}
-                    <div
-                      className={`absolute left-[31px] top-12 w-5 h-5 border-4 border-black z-10 hidden md:block transition-all duration-500 ${
-                        task.status === "completed"
-                          ? "bg-rag-green shadow-[0_0_15px_rgba(34,197,94,0.3)]"
-                          : task.status === "failed"
-                            ? "bg-rag-red"
-                            : task.status === "running"
-                              ? "bg-rag-amber animate-pulse"
-                              : "bg-silver/10"
-                      }`}
-                    ></div>
-
-                    <div
-                      className={`bg-charcoal border-4 border-black p-8 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] transition-all cursor-pointer relative overflow-hidden group/card ${
-                        expandedId === task.task_id
-                          ? "border-rag-blue/40 shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]"
-                          : ""
-                      }`}
-                      onClick={() =>
-                        setExpandedId(
-                          expandedId === task.task_id ? null : task.task_id,
-                        )
-                      }
+                <div className="flex items-center gap-12 border-l-4 border-silver-bright/10 pl-12 hidden lg:flex">
+                    <div className="text-right">
+                        <span className="text-[10px] font-black text-silver/40 uppercase tracking-[0.3em] block mb-2 italic">Integrity_Check</span>
+                        <span className="text-xs font-mono text-rag-green uppercase font-black">OPSEC_CLEARANCE_L5</span>
+                    </div>
+                </div>
+            </header>
+
+            {/* Filtration Block */}
+            <section className="bg-charcoal border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] flex flex-col xl:flex-row justify-between items-center gap-12">
+                <div className="flex flex-wrap items-center gap-4">
+                    <button
+                        onClick={toggleSelectAll}
+                        className={`px-6 py-3 text-[10px] font-black uppercase tracking-widest transition-all border-2 flex items-center gap-3 ${
+                            selectedIds.length === tasks.length && tasks.length > 0
+                            ? 'bg-rag-blue text-black border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]' 
+                            : 'bg-charcoal-dark text-silver/30 border-silver-bright/5 hover:border-silver-bright/20'
+                        }`}
                     >
-                      <div className="flex flex-col xl:flex-row justify-between gap-8">
-                        <div className="flex-1 space-y-6">
-                          <div className="flex flex-wrap items-center gap-4">
-                            <div
-                              onClick={(e) => toggleSelection(task.task_id, e)}
-                              className={`w-10 h-10 border-4 border-black flex items-center justify-center transition-all ${
-                                selectedIds.includes(task.task_id)
-                                  ? "bg-rag-blue text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] -translate-x-1 -translate-y-1"
-                                  : "bg-charcoal-dark text-silver/10 hover:border-rag-blue/40"
-                              }`}
-                            >
-                              <span className="material-symbols-outlined text-base font-black">
-                                {selectedIds.includes(task.task_id)
-                                  ? "check"
-                                  : "add"}
-                              </span>
-                            </div>
-                            <span
-                              className={`px-2 py-0.5 text-[9px] font-black uppercase italic border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] ${
-                                task.status === "completed"
-                                  ? "bg-rag-green text-black"
-                                  : task.status === "failed"
-                                    ? "bg-rag-red text-black"
-                                    : "bg-charcoal-dark text-silver-bright/50"
-                              }`}
-                            >
-                              {task.status}
-                            </span>
-                            {task.status === "queued" &&
-                              task.queue_position && (
-                                <span className="text-[9px] font-mono text-rag-amber uppercase tracking-widest">
-                                  Queue #{task.queue_position}/
-                                  {task.pending_count}
-                                </span>
-                              )}
-                            <span className="text-[10px] font-mono text-silver/20 uppercase tracking-widest italic">
-                              OP_ID_{task.task_id.split("-")[0].toUpperCase()}
-                            </span>
-                          </div>
-
-                          <div className="space-y-2">
-                            <h3 className="text-3xl font-black text-silver-bright uppercase tracking-tighter italic leading-none group-hover/card:text-rag-blue transition-colors">
-                              {task.tool}
-                            </h3>
-                            <p className="text-xs font-mono text-silver/40 uppercase tracking-widest flex items-center gap-3">
-                              <span className="material-symbols-outlined text-sm">
-                                target
-                              </span>
-                              {task.target}
-                            </p>
-                          </div>
-                        </div>
-
-                        <div className="flex flex-row xl:flex-col items-center xl:items-end justify-between xl:justify-center gap-8 shrink-0">
-                          <div className="text-left xl:text-right">
-                            <p className="text-[8px] font-black uppercase text-silver/20 tracking-[0.3em] mb-1 italic">
-                              Historical_Execution
-                            </p>
-                            <p className="text-xs font-mono text-silver-bright/80 uppercase">
-                              {formatLocaleDate(createDate)} //{" "}
-                              {formatLocaleTime(createDate)}
-                            </p>
-                          </div>
-                          {task.duration_seconds && (
-                            <div className="bg-charcoal-dark border-2 border-black px-4 py-2 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)]">
-                              <p className="text-[10px] font-black font-mono text-rag-blue leading-none">
-                                {formatDuration(
-                                  task.duration_seconds,
-                                )?.toUpperCase()}
-                              </p>
+                        <span className="material-symbols-outlined text-sm">
+                            {selectedIds.length === tasks.length && tasks.length > 0 ? 'check_box' : 'check_box_outline_blank'}
+                        </span>
+                        Select_All
+                    </button>
+                    <div className="w-1 h-8 bg-black/40 mx-2 hidden md:block"></div>
+                    {statusFilters.map(f => (
+                        <button
+                            key={f.value}
+                            onClick={() => setFilter(f.value)}
+                            className={`px-6 py-3 text-[10px] font-black uppercase tracking-widest transition-all border-2 flex items-center gap-2 ${
+                                filter === f.value 
+                                ? 'bg-silver-bright text-black border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] -translate-x-0.5 -translate-y-0.5' 
+                                : 'bg-charcoal-dark text-silver/30 border-silver-bright/5 hover:border-silver-bright/20'
+                            }`}
+                        >
+                            {f.label}
+                            {filter === f.value && <span className="w-1 h-3 bg-black"></span>}
+                        </button>
+                    ))}
+                </div>
+                <div className="flex items-center gap-6">
+                    {tasks.length > 0 && (
+                        <button
+                            onClick={handleClearAll}
+                            className="px-6 py-3 text-[10px] font-black uppercase tracking-widest transition-all border-2 bg-rag-red/10 text-rag-red border-rag-red/20 hover:bg-rag-red hover:text-black hover:border-black flex items-center gap-2 italic"
+                        >
+                            Purge_All_Records
+                            <span className="material-symbols-outlined text-sm">delete_forever</span>
+                        </button>
+                    )}
+                    <div className="flex items-center gap-4 text-[10px] font-mono text-silver/20 uppercase italic tracking-widest hidden sm:flex">
+                    Isolation_Protocol_Active // <span className="text-rag-blue">v4_stable</span>
+                    </div>
+                </div>
+            </section>
+
+            {/* Timeline Operations Feed */}
+            <section className="relative">
+                {/* Vertical Timeline Cable */}
+                <div className="absolute left-[39px] top-0 bottom-0 w-1 bg-silver-bright/5 hidden md:block"></div>
+
+                <AnimatePresence mode='popLayout'>
+                    {tasks.length > 0 ? (
+                        <motion.div 
+                            variants={containerVariants}
+                            initial="hidden"
+                            animate="visible"
+                            className="space-y-8"
+                        >
+                            {tasks.map((task) => {
+                                const createDate = parseDateSafe(task.created_at);
+                                const startDate = task.started_at ? parseDateSafe(task.started_at) : null;
+                                const endDate = task.completed_at ? parseDateSafe(task.completed_at) : null;
+
+                                return (
+                                    <motion.div 
+                                        key={task.task_id}
+                                        variants={itemVariants}
+                                        layout
+                                        className={`relative group md:pl-20 transition-all`}
+                                    >
+                                        {/* Timeline Node */}
+                                        <div className={`absolute left-[31px] top-12 w-5 h-5 border-4 border-black z-10 hidden md:block transition-all duration-500 ${
+                                            task.status === 'completed' ? 'bg-rag-green shadow-[0_0_15px_rgba(34,197,94,0.3)]' :
+                                            task.status === 'failed' ? 'bg-rag-red' :
+                                            task.status === 'running' ? 'bg-rag-amber animate-pulse' : 'bg-silver/10'
+                                        }`}></div>
+
+                                        <div 
+                                            className={`bg-charcoal border-4 border-black p-8 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] transition-all cursor-pointer relative overflow-hidden group/card ${
+                                                expandedId === task.task_id ? 'border-rag-blue/40 shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]' : ''
+                                            }`}
+                                            onClick={() => setExpandedId(expandedId === task.task_id ? null : task.task_id)}
+                                        >
+                                            <div className="flex flex-col xl:flex-row justify-between gap-8">
+                                                <div className="flex-1 space-y-6">
+                                                    <div className="flex flex-wrap items-center gap-4">
+                                                        <div 
+                                                            onClick={(e) => toggleSelection(task.task_id, e)}
+                                                            className={`w-10 h-10 border-4 border-black flex items-center justify-center transition-all ${
+                                                                selectedIds.includes(task.task_id) 
+                                                                ? 'bg-rag-blue text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] -translate-x-1 -translate-y-1' 
+                                                                : 'bg-charcoal-dark text-silver/10 hover:border-rag-blue/40'
+                                                            }`}
+                                                        >
+                                                            <span className="material-symbols-outlined text-base font-black">
+                                                                {selectedIds.includes(task.task_id) ? 'check' : 'add'}
+                                                            </span>
+                                                        </div>
+                                                        <span className={`px-2 py-0.5 text-[9px] font-black uppercase italic border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] ${
+                                                            task.status === 'completed' ? 'bg-rag-green text-black' :
+                                                            task.status === 'failed' ? 'bg-rag-red text-black' :
+                                                            'bg-charcoal-dark text-silver-bright/50'
+                                                        }`}>
+                                                            {task.status}
+                                                        </span>
+                                                        <span className="text-[10px] font-mono text-silver/20 uppercase tracking-widest italic">
+                                                            OP_ID_{task.task_id.split('-')[0].toUpperCase()}
+                                                        </span>
+                                                    </div>
+
+                                                    <div className="space-y-2">
+                                                        <h3 className="text-3xl font-black text-silver-bright uppercase tracking-tighter italic leading-none group-hover/card:text-rag-blue transition-colors">
+                                                            {task.tool}
+                                                        </h3>
+                                                        <p className="text-xs font-mono text-silver/40 uppercase tracking-widest flex items-center gap-3">
+                                                            <span className="material-symbols-outlined text-sm">target</span>
+                                                            {task.target}
+                                                        </p>
+                                                    </div>
+                                                </div>
+
+                                                <div className="flex flex-row xl:flex-col items-center xl:items-end justify-between xl:justify-center gap-8 shrink-0">
+                                                    <div className="text-left xl:text-right">
+                                                        <p className="text-[8px] font-black uppercase text-silver/20 tracking-[0.3em] mb-1 italic">Historical_Execution</p>
+                                                        <p className="text-xs font-mono text-silver-bright/80 uppercase">
+                                                            {formatLocaleDate(createDate)} // {formatLocaleTime(createDate)}
+                                                        </p>
+                                                    </div>
+                                                    {task.duration_seconds && (
+                                                        <div className="bg-charcoal-dark border-2 border-black px-4 py-2 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)]">
+                                                            <p className="text-[10px] font-black font-mono text-rag-blue leading-none">{formatDuration(task.duration_seconds)?.toUpperCase()}</p>
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </div>
+
+                                            {/* Expandable Details Block */}
+                                            <AnimatePresence>
+                                                {expandedId === task.task_id && (
+                                                    <motion.div 
+                                                        initial={{ height: 0, opacity: 0 }}
+                                                        animate={{ height: 'auto', opacity: 1 }}
+                                                        exit={{ height: 0, opacity: 0 }}
+                                                        className="overflow-hidden"
+                                                    >
+                                                        <div className="mt-12 pt-12 border-t-4 border-black grid grid-cols-1 md:grid-cols-3 gap-12 bg-charcoal-dark/20 -mx-8 -mb-8 p-8 border-dashed">
+                                                            <div className="space-y-4">
+                                                                <h5 className="text-[10px] font-black text-silver-bright uppercase tracking-[0.3em] italic flex items-center gap-3">
+                                                                    <span className="w-1.5 h-3 bg-rag-blue"></span> Signal_Metadata
+                                                                </h5>
+                                                                <div className="space-y-2">
+                                                                    <p className="text-[10px] font-mono text-silver/40">PLUGIN: <span className="text-silver-bright uppercase">{task.plugin_id}</span></p>
+                                                                    <p className="text-[10px] font-mono text-silver/40">SESSION: <span className="text-silver-bright uppercase">ENCRYPTED_VTX</span></p>
+                                                                </div>
+                                                            </div>
+
+                                                            <div className="space-y-4">
+                                                                <h5 className="text-[10px] font-black text-silver-bright uppercase tracking-[0.3em] italic flex items-center gap-3">
+                                                                    <span className="w-1.5 h-3 bg-rag-amber"></span> Time_Matrix
+                                                                </h5>
+                                                                <div className="grid grid-cols-2 gap-4">
+                                                                    <div className="space-y-1">
+                                                                        <span className="text-[8px] text-silver/20 uppercase font-black tracking-widest">In_Lock</span>
+                                                                        <span className="text-[10px] font-mono text-silver-bright block">{startDate ? formatLocaleTime(startDate) : 'PENDING'}</span>
+                                                                    </div>
+                                                                    <div className="space-y-1">
+                                                                        <span className="text-[8px] text-silver/20 uppercase font-black tracking-widest">Release</span>
+                                                                        <span className="text-[10px] font-mono text-silver-bright block">{endDate ? formatLocaleTime(endDate) : 'N/A'}</span>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+
+                                                              <div className="flex items-center justify-end gap-6">
+                                                                {(task.status === 'completed' || task.status === 'failed' || task.status === 'cancelled') && (
+                                                                    <button 
+                                                                        className="bg-rag-red/20 text-rag-red border-2 border-rag-red/20 hover:bg-rag-red hover:text-black hover:border-black px-6 py-4 text-[10px] font-black uppercase tracking-widest transition-all flex items-center gap-3 italic"
+                                                                        onClick={(e) => {
+                                                                            e.stopPropagation()
+                                                                            handleTaskDelete(task.task_id)
+                                                                        }}
+                                                                    >
+                                                                        Delete_Record
+                                                                        <span className="material-symbols-outlined text-sm">delete</span>
+                                                                    </button>
+                                                                )}
+                                                                {(task.status === 'completed' || task.status === 'failed') && (
+                                                                    <button 
+                                                                        className="bg-rag-blue text-black px-8 py-4 text-[10px] font-black uppercase tracking-widest shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all flex items-center gap-3 group/btn italic"
+                                                                        onClick={(e) => {
+                                                                            e.stopPropagation()
+                                                                            handleRescan(task)
+                                                                        }}
+                                                                    >
+                                                                        Rescan_Signal
+                                                                        <span className="material-symbols-outlined text-sm group-hover/btn:translate-x-1 transition-transform">replay</span>
+                                                                    </button>
+                                                                )}
+                                                                <button 
+                                                                    className="bg-silver-bright text-black px-8 py-4 text-[10px] font-black uppercase tracking-widest shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all flex items-center gap-3 group/btn italic"
+                                                                    onClick={(e) => {
+                                                                        e.stopPropagation()
+                                                                        navigate(routePath.task(task.task_id))
+                                                                    }}
+                                                                >
+                                                                    Open_Deep_Brief
+                                                                    <span className="material-symbols-outlined text-sm group-hover/btn:translate-x-1 transition-transform">arrow_right_alt</span>
+                                                                </button>
+                                                            </div>
+                                                        </div>
+                                                    </motion.div>
+                                                )}
+                                            </AnimatePresence>
+                                        </div>
+                                    </motion.div>
+                                );
+                            })}
+                        </motion.div>
+                    ) : (
+                        <div className="py-40 bg-charcoal/30 border-4 border-dashed border-silver-bright/5 text-center flex flex-col items-center gap-8">
+                            <span className="material-symbols-outlined text-silver/5 text-9xl">inventory_2</span>
+                            <div className="space-y-2">
+                                <p className="text-xl font-black text-silver/20 uppercase tracking-[0.4em] italic">Archive Isolated</p>
+                                <p className="text-xs font-mono text-silver/10 uppercase tracking-widest">No historical signal streams available for current selection</p>
                             </div>
-                          )}
                         </div>
-                      </div>
-
-                      {/* Expandable Details Block */}
-                      <AnimatePresence>
-                        {expandedId === task.task_id && (
-                          <motion.div
-                            initial={{ height: 0, opacity: 0 }}
-                            animate={{ height: "auto", opacity: 1 }}
-                            exit={{ height: 0, opacity: 0 }}
-                            className="overflow-hidden"
-                          >
-                            <div className="mt-12 pt-12 border-t-4 border-black grid grid-cols-1 md:grid-cols-3 gap-12 bg-charcoal-dark/20 -mx-8 -mb-8 p-8 border-dashed">
-                              <div className="space-y-4">
-                                <h5 className="text-[10px] font-black text-silver-bright uppercase tracking-[0.3em] italic flex items-center gap-3">
-                                  <span className="w-1.5 h-3 bg-rag-blue"></span>{" "}
-                                  Signal_Metadata
-                                </h5>
-                                <div className="space-y-2">
-                                  <p className="text-[10px] font-mono text-silver/40">
-                                    PLUGIN:{" "}
-                                    <span className="text-silver-bright uppercase">
-                                      {task.plugin_id}
-                                    </span>
-                                  </p>
-                                  <p className="text-[10px] font-mono text-silver/40">
-                                    SESSION:{" "}
-                                    <span className="text-silver-bright uppercase">
-                                      ENCRYPTED_VTX
-                                    </span>
-                                  </p>
-                                </div>
-                              </div>
-
-                              <div className="space-y-4">
-                                <h5 className="text-[10px] font-black text-silver-bright uppercase tracking-[0.3em] italic flex items-center gap-3">
-                                  <span className="w-1.5 h-3 bg-rag-amber"></span>{" "}
-                                  Time_Matrix
-                                </h5>
-                                <div className="grid grid-cols-2 gap-4">
-                                  <div className="space-y-1">
-                                    <span className="text-[8px] text-silver/20 uppercase font-black tracking-widest">
-                                      In_Lock
-                                    </span>
-                                    <span className="text-[10px] font-mono text-silver-bright block">
-                                      {startDate
-                                        ? formatLocaleTime(startDate)
-                                        : "PENDING"}
-                                    </span>
-                                  </div>
-                                  <div className="space-y-1">
-                                    <span className="text-[8px] text-silver/20 uppercase font-black tracking-widest">
-                                      Release
-                                    </span>
-                                    <span className="text-[10px] font-mono text-silver-bright block">
-                                      {endDate
-                                        ? formatLocaleTime(endDate)
-                                        : "N/A"}
-                                    </span>
-                                  </div>
+                    )}
+                </AnimatePresence>
+            </section>
+
+            {/* Floating Bulk Action Bar */}
+            <AnimatePresence>
+                {selectedIds.length > 0 && (
+                    <motion.div 
+                        initial={{ y: 100, opacity: 0 }}
+                        animate={{ y: 0, opacity: 1 }}
+                        exit={{ y: 100, opacity: 0 }}
+                        className="fixed bottom-12 left-1/2 -translate-x-1/2 z-50 w-full max-w-2xl px-6"
+                    >
+                        <div className="bg-black border-4 border-rag-blue p-6 shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] flex items-center justify-between gap-8">
+                            <div className="flex items-center gap-6">
+                                <div className="bg-rag-blue text-black px-4 py-2 text-xl font-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">{selectedIds.length}</div>
+                                <div className="space-y-1">
+                                    <p className="text-[10px] font-black text-rag-blue uppercase tracking-widest italic">Records_Selected_For_Pruning</p>
+                                    <p className="text-[8px] font-mono text-silver/30 uppercase tracking-[0.2em]">Bulk_Action_Protocol_v4_Active</p>
                                 </div>
-                              </div>
-
-                              <div className="flex items-center justify-end gap-6">
-                                {(task.status === "completed" ||
-                                  task.status === "failed" ||
-                                  task.status === "cancelled") && (
-                                  <button
-                                    className="bg-rag-red/20 text-rag-red border-2 border-rag-red/20 hover:bg-rag-red hover:text-black hover:border-black px-6 py-4 text-[10px] font-black uppercase tracking-widest transition-all flex items-center gap-3 italic"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleTaskDelete(task.task_id);
-                                    }}
-                                  >
-                                    Delete_Record
-                                    <span className="material-symbols-outlined text-sm">
-                                      delete
-                                    </span>
-                                  </button>
-                                )}
-                                {(task.status === "completed" ||
-                                  task.status === "failed") && (
-                                  <button
-                                    className="bg-rag-blue text-black px-8 py-4 text-[10px] font-black uppercase tracking-widest shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all flex items-center gap-3 group/btn italic"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleRescan(task);
-                                    }}
-                                  >
-                                    Rescan_Signal
-                                    <span className="material-symbols-outlined text-sm group-hover/btn:translate-x-1 transition-transform">
-                                      replay
-                                    </span>
-                                  </button>
-                                )}
-                                <button
-                                  className="bg-silver-bright text-black px-8 py-4 text-[10px] font-black uppercase tracking-widest shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all flex items-center gap-3 group/btn italic"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    navigate(routePath.task(task.task_id));
-                                  }}
+                            </div>
+                            <div className="flex items-center gap-4">
+                                <button 
+                                    onClick={() => setSelectedIds([])}
+                                    className="px-6 py-3 text-[10px] font-black uppercase tracking-widest text-silver/40 hover:text-silver transition-colors"
                                 >
-                                  Open_Deep_Brief
-                                  <span className="material-symbols-outlined text-sm group-hover/btn:translate-x-1 transition-transform">
-                                    arrow_right_alt
-                                  </span>
+                                    Cancel
+                                </button>
+                                <button 
+                                    onClick={handleBulkDelete}
+                                    className="bg-rag-red text-black px-8 py-3 text-[10px] font-black uppercase tracking-widest shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all flex items-center gap-3 italic"
+                                >
+                                    Prune_Selected_Records
+                                    <span className="material-symbols-outlined text-sm">delete_sweep</span>
                                 </button>
-                              </div>
                             </div>
-                          </motion.div>
-                        )}
-                      </AnimatePresence>
-                    </div>
-                  </motion.div>
-                );
-              })}
-            </motion.div>
-          ) : (
-            <div className="py-40 bg-charcoal/30 border-4 border-dashed border-silver-bright/5 text-center flex flex-col items-center gap-8">
-              <span className="material-symbols-outlined text-silver/5 text-9xl">
-                inventory_2
-              </span>
-              <div className="space-y-2">
-                <p className="text-xl font-black text-silver/20 uppercase tracking-[0.4em] italic">
-                  Archive Isolated
-                </p>
-                <p className="text-xs font-mono text-silver/10 uppercase tracking-widest">
-                  No historical signal streams available for current selection
-                </p>
-              </div>
-            </div>
-          )}
-        </AnimatePresence>
-        {total > PAGE_LIMIT && (
-          <Pagination
-            page={page}
-            total={total}
-            limit={PAGE_LIMIT}
-            loading={loading}
-            onPrev={() => setPage((p) => p - 1)}
-            onNext={() => setPage((p) => p + 1)}
-          />
-        )}
-      </section>
-
-      {/* Floating Bulk Action Bar */}
-      <AnimatePresence>
-        {selectedIds.length > 0 && (
-          <motion.div
-            initial={{ y: 100, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            exit={{ y: 100, opacity: 0 }}
-            className="fixed bottom-12 left-1/2 -translate-x-1/2 z-50 w-full max-w-2xl px-6"
-          >
-            <div className="bg-black border-4 border-rag-blue p-6 shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] flex items-center justify-between gap-8">
-              <div className="flex items-center gap-6">
-                <div className="bg-rag-blue text-black px-4 py-2 text-xl font-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
-                  {selectedIds.length}
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            {/* Restricted Footer */}
+            <footer className="pt-24 opacity-20 pointer-events-none select-none flex flex-col md:flex-row justify-between items-center gap-8 text-[9px] font-black uppercase tracking-[0.5em] italic">
+                <div className="flex items-center gap-4">
+                    <span className="w-8 h-8 border-4 border-silver/20 flex items-center justify-center font-serif text-lg">S</span>
+                    SECUSCAN ARCHIVE INTEGRITY PROTOCOL v10.1
                 </div>
-                <div className="space-y-1">
-                  <p className="text-[10px] font-black text-rag-blue uppercase tracking-widest italic">
-                    Records_Selected_For_Pruning
-                  </p>
-                  <p className="text-[8px] font-mono text-silver/30 uppercase tracking-[0.2em]">
-                    Bulk_Action_Protocol_v4_Active
-                  </p>
+                <div className="flex gap-2">
+                    {[1,2,3,4,5,6,7,8,9,10,11,12].map(i => <div key={i} className="w-1.5 h-3 bg-silver/20"></div>)}
                 </div>
-              </div>
-              <div className="flex items-center gap-4">
-                <button
-                  onClick={() => setSelectedIds([])}
-                  className="px-6 py-3 text-[10px] font-black uppercase tracking-widest text-silver/40 hover:text-silver transition-colors"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={handleBulkDelete}
-                  className="bg-rag-red text-black px-8 py-3 text-[10px] font-black uppercase tracking-widest shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all flex items-center gap-3 italic"
-                >
-                  Prune_Selected_Records
-                  <span className="material-symbols-outlined text-sm">
-                    delete_sweep
-                  </span>
-                </button>
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* Restricted Footer */}
-      <footer className="pt-24 opacity-20 pointer-events-none select-none flex flex-col md:flex-row justify-between items-center gap-8 text-[9px] font-black uppercase tracking-[0.5em] italic">
-        <div className="flex items-center gap-4">
-          <span className="w-8 h-8 border-4 border-silver/20 flex items-center justify-center font-serif text-lg">
-            S
-          </span>
-          SECUSCAN ARCHIVE INTEGRITY PROTOCOL v10.1
-        </div>
-        <div className="flex gap-2">
-          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => (
-            <div key={i} className="w-1.5 h-3 bg-silver/20"></div>
-          ))}
+            </footer>
         </div>
-      </footer>
-    </div>
-  );
+    )
 }
diff --git a/frontend/src/pages/ToolConfig.tsx b/frontend/src/pages/ToolConfig.tsx
index 9a480eae..1ccb2827 100644
--- a/frontend/src/pages/ToolConfig.tsx
+++ b/frontend/src/pages/ToolConfig.tsx
@@ -395,7 +395,7 @@ export default function ToolConfig() {
                 )
               })}
             </div>
-          </section> 
+          </section>
 
           {schema.timeout_config?.enabled && (
             <section className="bg-charcoal border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] space-y-6">
@@ -421,7 +421,6 @@ export default function ToolConfig() {
             </section>
           )}
 
- 
         </div>
 
         <aside className="xl:col-span-1">
@@ -466,4 +465,4 @@ export default function ToolConfig() {
       </main>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/utils/preferences.ts b/frontend/src/utils/preferences.ts
index 4a7bd547..b1163dea 100644
--- a/frontend/src/utils/preferences.ts
+++ b/frontend/src/utils/preferences.ts
@@ -13,7 +13,7 @@ export function getPreference<T>(key: string, defaultValue: T): T {
   try {
     const value = localStorage.getItem(PREF_KEY_PREFIX + key);
     if (value === null) return defaultValue;
-    
+
     // Attempt to parse JSON. Primitive values are also valid JSON.
     return JSON.parse(value) as T;
   } catch (err) {
diff --git a/frontend/testing/unit/utils/preferences.test.ts b/frontend/testing/unit/utils/preferences.test.ts
index 955a3e18..471ba743 100644
--- a/frontend/testing/unit/utils/preferences.test.ts
+++ b/frontend/testing/unit/utils/preferences.test.ts
@@ -34,10 +34,10 @@ describe('preferences utility', () => {
     const getItemSpy = vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
       throw new Error('Blocked!');
     });
-    
+
     // Should return default instead of crashing
     expect(getPreference('anything', 'fallback')).toBe('fallback');
-    
+
     getItemSpy.mockRestore();
   });
 
@@ -48,7 +48,7 @@ describe('preferences utility', () => {
 
     // Should not crash
     expect(() => setPreference('full', 'too much data')).not.toThrow();
-    
+
     setItemSpy.mockRestore();
   });
 });
diff --git a/pyproject.toml b/pyproject.toml
index 24307f37..57eed3c5 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,5 +1,6 @@
 [tool.ruff]
 target-version = "py311"
+line-length = 120
 
 [tool.ruff.lint]
 select = ["F601", "F821", "E722"]
diff --git a/testing/backend/conftest.py b/testing/backend/conftest.py
index 4805de89..a774c242 100644
--- a/testing/backend/conftest.py
+++ b/testing/backend/conftest.py
@@ -9,8 +9,8 @@
 repo_root = Path(__file__).resolve().parents[2]
 sys.path.insert(0, str(repo_root))
 
-from backend.secuscan.config import settings
 from backend.secuscan import database as database_module
+from backend.secuscan.config import settings
 from backend.secuscan.database import init_db
 from backend.secuscan.main import app
 from backend.secuscan.plugins import init_plugins
diff --git a/testing/backend/integration/test_bulk_delete_contract.py b/testing/backend/integration/test_bulk_delete_contract.py
index 4de53405..18619fec 100644
--- a/testing/backend/integration/test_bulk_delete_contract.py
+++ b/testing/backend/integration/test_bulk_delete_contract.py
@@ -14,7 +14,6 @@
   - Associated findings/reports are cleaned for deleted tasks
 """
 
-import pytest
 
 ENDPOINT = "/api/v1/tasks/bulk"
 START_ENDPOINT = "/api/v1/task/start"
diff --git a/testing/backend/integration/test_dashboard_cache.py b/testing/backend/integration/test_dashboard_cache.py
index 42be2244..d7b95bdc 100644
--- a/testing/backend/integration/test_dashboard_cache.py
+++ b/testing/backend/integration/test_dashboard_cache.py
@@ -1,8 +1,8 @@
 import asyncio
-import sqlite3
 import json
-
+import sqlite3
 from unittest.mock import AsyncMock, patch
+
 from backend.secuscan.config import settings
 
 
diff --git a/testing/backend/integration/test_phase2_plugins.py b/testing/backend/integration/test_phase2_plugins.py
index f1ff0625..ebfffef5 100644
--- a/testing/backend/integration/test_phase2_plugins.py
+++ b/testing/backend/integration/test_phase2_plugins.py
@@ -1,7 +1,8 @@
-import time
 import re
+import time
 from pathlib import Path
 from unittest.mock import patch
+
 from backend.secuscan.models import TaskStatus
 
 PHASE2_PLUGIN_IDS = {
diff --git a/testing/backend/integration/test_report_audit_log.py b/testing/backend/integration/test_report_audit_log.py
index 34f62f58..30520ee7 100644
--- a/testing/backend/integration/test_report_audit_log.py
+++ b/testing/backend/integration/test_report_audit_log.py
@@ -3,10 +3,11 @@
 and are NOT created on 404 or 400 error responses.
 """
 
-import json
 import asyncio
+import json
 
 import pytest
+
 from backend.secuscan.database import get_db
 
 
diff --git a/testing/backend/integration/test_routes_sarif.py b/testing/backend/integration/test_routes_sarif.py
index 2f393649..ccaf7e2e 100644
--- a/testing/backend/integration/test_routes_sarif.py
+++ b/testing/backend/integration/test_routes_sarif.py
@@ -1,10 +1,12 @@
-import json
 import asyncio
+import json
 from unittest.mock import patch
 
 import pytest
+
 from backend.secuscan.database import get_db
 
+
 async def insert_mock_completed_task(task_id: str):
     db = await get_db()
     await db.execute(
diff --git a/testing/backend/integration/test_task_cleanup.py b/testing/backend/integration/test_task_cleanup.py
index 6fbb88af..e97cf7ff 100644
--- a/testing/backend/integration/test_task_cleanup.py
+++ b/testing/backend/integration/test_task_cleanup.py
@@ -13,7 +13,6 @@
 import pytest_asyncio
 from httpx import ASGITransport, AsyncClient
 
-
 # ---------------------------------------------------------------------------
 # Fixtures
 # ---------------------------------------------------------------------------
@@ -38,9 +37,9 @@ async def app_client(db_path):
 
     with patch("backend.secuscan.routes.executor", mock_executor):
 
-        from backend.secuscan.main import app
-        from backend.secuscan import database as db_module
         from backend.secuscan import cache as cache_module
+        from backend.secuscan import database as db_module
+        from backend.secuscan.main import app
 
         # Initialise a real in-memory cache (it's just a dict, no external deps)
         await cache_module.init_cache()
diff --git a/testing/backend/test_cache_invalidation.py b/testing/backend/test_cache_invalidation.py
index dd175946..136462a7 100644
--- a/testing/backend/test_cache_invalidation.py
+++ b/testing/backend/test_cache_invalidation.py
@@ -2,9 +2,10 @@
 Cache invalidation tests - Simple version that WILL pass
 """
 
-import pytest
 from unittest.mock import AsyncMock, patch
 
+import pytest
+
 
 class TestInvalidateViewCache:
     """Test the cache invalidation helper function"""
diff --git a/testing/backend/test_queue_position.py b/testing/backend/test_queue_position.py
index 10d110af..f0772ebc 100644
--- a/testing/backend/test_queue_position.py
+++ b/testing/backend/test_queue_position.py
@@ -3,8 +3,10 @@
 Covers: queued tasks get position, non-queued tasks get None.
 """
 
+from unittest.mock import AsyncMock, patch
+
 import pytest
-from unittest.mock import AsyncMock, MagicMock, patch
+
 from backend.secuscan.executor import TaskExecutor
 from backend.secuscan.models import TaskStatus
 
diff --git a/testing/backend/test_task_pagination.py b/testing/backend/test_task_pagination.py
index 3174fa3e..05ef9473 100644
--- a/testing/backend/test_task_pagination.py
+++ b/testing/backend/test_task_pagination.py
@@ -4,8 +4,10 @@
 
 import pytest
 from fastapi.testclient import TestClient
-from backend.secuscan.main import app
+
 from backend.secuscan.database import init_db
+from backend.secuscan.main import app
+
 
 # IMPORTANT: Initialize database before any tests run
 @pytest.fixture(scope="session", autouse=True)
diff --git a/testing/backend/unit/test_cache_helpers.py b/testing/backend/unit/test_cache_helpers.py
index eff67e73..5912ac6d 100644
--- a/testing/backend/unit/test_cache_helpers.py
+++ b/testing/backend/unit/test_cache_helpers.py
@@ -1,9 +1,7 @@
 import asyncio
-from unittest.mock import AsyncMock, patch
 
 from backend.secuscan.cache import CacheClient
 
-
 # ---------------------------------------------------------------------------
 # get_or_set_cached unit tests (directly against CacheClient)
 # ---------------------------------------------------------------------------
diff --git a/testing/backend/unit/test_cli.py b/testing/backend/unit/test_cli.py
index b29dbf43..bfb420c4 100644
--- a/testing/backend/unit/test_cli.py
+++ b/testing/backend/unit/test_cli.py
@@ -1,7 +1,9 @@
-import sys
-from unittest.mock import patch, MagicMock, AsyncMock
+from unittest.mock import AsyncMock, MagicMock, patch
+
 import pytest
-from backend.secuscan.cli import run_scan, main
+
+from backend.secuscan.cli import main, run_scan
+
 
 @pytest.mark.anyio
 async def test_run_scan_plugin_not_found():
diff --git a/testing/backend/unit/test_concurrent_limiter.py b/testing/backend/unit/test_concurrent_limiter.py
index 37727dda..a5dedd19 100644
--- a/testing/backend/unit/test_concurrent_limiter.py
+++ b/testing/backend/unit/test_concurrent_limiter.py
@@ -10,12 +10,9 @@
 """
 
 import asyncio
-import pytest
-from unittest.mock import AsyncMock, patch, MagicMock
 
 from backend.secuscan.ratelimit import ConcurrentTaskLimiter
 
-
 # ---------------------------------------------------------------------------
 # Helpers
 # ---------------------------------------------------------------------------
@@ -151,7 +148,6 @@ def test_route_rejects_task_when_limiter_full(test_client, monkeypatch):
     The route must return 503 and must NOT schedule the background task.
     """
     from backend.secuscan.ratelimit import concurrent_limiter
-    from backend.secuscan import routes as routes_module
 
     # Pre-fill all slots so the next acquire will fail
     async def prefill():
diff --git a/testing/backend/unit/test_models.py b/testing/backend/unit/test_models.py
index 05ac5bc8..e35eedd7 100644
--- a/testing/backend/unit/test_models.py
+++ b/testing/backend/unit/test_models.py
@@ -1,6 +1,8 @@
 import pytest
 from pydantic import ValidationError
-from backend.secuscan.models import TaskCreateRequest, PluginField, PluginFieldType
+
+from backend.secuscan.models import PluginField, PluginFieldType, TaskCreateRequest
+
 
 def test_task_create_request_valid():
     # Valid request
diff --git a/testing/backend/unit/test_plugin_integrity.py b/testing/backend/unit/test_plugin_integrity.py
index 3907d026..7d305d39 100644
--- a/testing/backend/unit/test_plugin_integrity.py
+++ b/testing/backend/unit/test_plugin_integrity.py
@@ -2,8 +2,8 @@
 import json
 from pathlib import Path
 
-from backend.secuscan.plugins import PluginManager
 from backend.secuscan.config import settings
+from backend.secuscan.plugins import PluginManager
 
 
 def test_plugins_load_without_signature_enforcement(setup_test_environment):
diff --git a/testing/backend/unit/test_plugin_validator.py b/testing/backend/unit/test_plugin_validator.py
index f344cd76..8a059ec3 100644
--- a/testing/backend/unit/test_plugin_validator.py
+++ b/testing/backend/unit/test_plugin_validator.py
@@ -18,14 +18,13 @@
 sys.path.insert(0, str(REPO_ROOT))
 
 from backend.secuscan.plugin_validator import (
-    PluginMetadataValidator,
-    ValidationResult,
-    validate_all_plugins,
-    validate_one_plugin,
     VALID_ENGINE_TYPES,
-    VALID_SAFETY_LEVELS,
     VALID_FIELD_TYPES,
     VALID_PARSER_TYPES,
+    VALID_SAFETY_LEVELS,
+    ValidationResult,
+    validate_all_plugins,
+    validate_one_plugin,
 )
 
 FIXTURES_DIR = Path(__file__).resolve().parent / "fixtures" / "plugins"
diff --git a/testing/backend/unit/test_redaction.py b/testing/backend/unit/test_redaction.py
index 5c324ed9..20bb88ef 100644
--- a/testing/backend/unit/test_redaction.py
+++ b/testing/backend/unit/test_redaction.py
@@ -7,9 +7,7 @@
     pytest testing/backend/unit/test_redaction.py -v
 """
 
-import pytest
-from backend.secuscan.redaction import redact, redact_dict, REDACTED
-
+from backend.secuscan.redaction import REDACTED, redact, redact_dict
 
 # ── Helpers ───────────────────────────────────────────────────────────────────
 
diff --git a/testing/backend/unit/test_refresh_plugin_checksum.py b/testing/backend/unit/test_refresh_plugin_checksum.py
index bed8db6e..1515532e 100644
--- a/testing/backend/unit/test_refresh_plugin_checksum.py
+++ b/testing/backend/unit/test_refresh_plugin_checksum.py
@@ -9,9 +9,9 @@
 - Dry run mode does not write anything
 """
 
+import hashlib
 import json
 import sys
-import hashlib
 from pathlib import Path
 
 import pytest
@@ -20,8 +20,11 @@
 repo_root = Path(__file__).resolve().parents[3]
 sys.path.insert(0, str(repo_root))
 
-from scripts.refresh_plugin_checksum import compute_plugin_digest, refresh_plugin, refresh_all_plugins
-
+from scripts.refresh_plugin_checksum import (
+    compute_plugin_digest,
+    refresh_all_plugins,
+    refresh_plugin,
+)
 
 # ── Helpers ───────────────────────────────────────────────────────────────────
 
diff --git a/testing/backend/unit/test_sarif.py b/testing/backend/unit/test_sarif.py
index 374d416a..52990ce0 100644
--- a/testing/backend/unit/test_sarif.py
+++ b/testing/backend/unit/test_sarif.py
@@ -1,6 +1,8 @@
 import json
+
 from backend.secuscan.reporting import ReportGenerator
 
+
 def sample_task():
     return {
         "id": "task-123",
diff --git a/testing/backend/unit/test_task_start_validation.py b/testing/backend/unit/test_task_start_validation.py
index 801bc2d2..abaedde6 100644
--- a/testing/backend/unit/test_task_start_validation.py
+++ b/testing/backend/unit/test_task_start_validation.py
@@ -1,5 +1,5 @@
-import json, pytest
-from unittest.mock import patch, MagicMock
+import json
+from unittest.mock import MagicMock, patch
 
 MOCK_SETTINGS = MagicMock()
 MOCK_SETTINGS.task_start_max_body_bytes = 64_000
diff --git a/testing/backend/unit/test_validate_plugin.py b/testing/backend/unit/test_validate_plugin.py
index 3fdb2f41..dd78b849 100644
--- a/testing/backend/unit/test_validate_plugin.py
+++ b/testing/backend/unit/test_validate_plugin.py
@@ -12,8 +12,6 @@
 import sys
 from pathlib import Path
 
-import pytest
-
 # Add repo root to sys.path so we can import the script directly
 repo_root = Path(__file__).resolve().parents[3]
 sys.path.insert(0, str(repo_root))
diff --git a/testing/backend/unit/test_validation.py b/testing/backend/unit/test_validation.py
index 03d48a4b..71520228 100644
--- a/testing/backend/unit/test_validation.py
+++ b/testing/backend/unit/test_validation.py
@@ -1,12 +1,12 @@
-import pytest
 from backend.secuscan.validation import (
- 
-    validate_target, validate_port, validate_url,
-    validate_timeout, sanitize_input, is_safe_path, match_pattern
- 
-    validate_target, validate_port, validate_port_range, validate_url,
-    sanitize_input, is_safe_path, match_pattern
- 
+    is_safe_path,
+    match_pattern,
+    sanitize_input,
+    validate_port,
+    validate_port_range,
+    validate_target,
+    validate_timeout,
+    validate_url,
 )
 
 
diff --git a/testing/backend/unit/test_vault_failure_messages.py b/testing/backend/unit/test_vault_failure_messages.py
index 0b0c2762..4f2363b5 100644
--- a/testing/backend/unit/test_vault_failure_messages.py
+++ b/testing/backend/unit/test_vault_failure_messages.py
@@ -13,9 +13,11 @@
 """
 
 import base64
+
 import pytest
-from backend.secuscan.vault import VaultCrypto
+
 from backend.secuscan.config import settings
+from backend.secuscan.vault import VaultCrypto
 
 ENDPOINT_PUT    = "/api/v1/vault/{name}"
 ENDPOINT_GET    = "/api/v1/vault/{name}"

From 790cdfdb0b4c1f57f1f4d5b08fcb57eaf3c357fd Mon Sep 17 00:00:00 2001
From: ANU-2524 <anusoni25.2006@gmail.com>
Date: Sun, 24 May 2026 02:03:50 +0530
Subject: [PATCH 4/5] Fix Reports page filters and preferences integration

---
 frontend/src/pages/Reports.tsx                | 131 ++++++++++++++++--
 .../unit/pages/ReportsPreference.test.tsx     |   2 +-
 2 files changed, 121 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/Reports.tsx b/frontend/src/pages/Reports.tsx
index fe5f8cce..fee20762 100644
--- a/frontend/src/pages/Reports.tsx
+++ b/frontend/src/pages/Reports.tsx
@@ -17,6 +17,7 @@ import {
 } from '@hugeicons/core-free-icons'
 import { getDashboardSummary, getReports, API_BASE } from '../api'
 import { formatDateLong } from '../utils/date'
+import { getPreference, setPreference } from '../utils/preferences'
 
 type Report = {
   id: string
@@ -60,25 +61,81 @@ function ReportIcon({
   return <HugeiconsIcon icon={icon} size={size} strokeWidth={1.9} className={className} />
 }
 
+export function isWithinDateRange(dateString: string, range: string): boolean {
+  if (range === 'all') return true
+  if (!dateString) return false
+
+  try {
+    const date = new Date(dateString)
+    if (isNaN(date.getTime())) return false
+
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+
+    if (diffMs < 0) return false // Future dates are invalid
+
+    const diffHours = diffMs / (1000 * 60 * 60)
+    const diffDays = diffMs / (1000 * 60 * 60 * 24)
+
+    switch (range) {
+      case '24h':
+        return diffHours <= 24
+      case '7d':
+        return diffDays <= 7
+      case '30d':
+        return diffDays <= 30
+      default:
+        return false
+    }
+  } catch {
+    return false
+  }
+}
+
 export default function Reports() {
   const navigate = useNavigate()
   const [reports, setReports] = useState<Report[]>([])
   const [summary, setSummary] = useState<any>({ total_findings: 0, total_assets: 0, critical_findings: 0, high_findings: 0, total_attack_surface: 0 })
-  const [selectedType, setSelectedType] = useState('all')
+  const [selectedType, setSelectedType] = useState(() => getPreference('reports-type-filter', 'all'))
+  const [selectedStatus, setSelectedStatus] = useState(() => getPreference('reports-status-filter', 'all'))
+  const [selectedDateRange, setSelectedDateRange] = useState(() => getPreference('reports-date-filter', 'all'))
+  const [error, setError] = useState<string | null>(null)
 
   const fetchReports = () => {
-    Promise.all([getReports(), getDashboardSummary()]).then(([reportData, summaryData]: any) => {
-      setReports(reportData.reports || [])
-      setSummary(summaryData || {})
-    })
+    setError(null)
+    Promise.all([getReports(), getDashboardSummary()])
+      .then(([reportData, summaryData]: any) => {
+        setReports(reportData.reports || [])
+        setSummary(summaryData || {})
+      })
+      .catch((err) => {
+        console.error('Error fetching reports:', err)
+        setError('Failed to fetch reports')
+      })
   }
 
   useEffect(() => {
     fetchReports()
   }, [])
 
-  const filteredReports = reports.filter((report) => selectedType === 'all' || report.type === selectedType)
-  
+  // Save preferences when filters change
+  useEffect(() => {
+    setPreference('reports-type-filter', selectedType)
+  }, [selectedType])
+
+  useEffect(() => {
+    setPreference('reports-status-filter', selectedStatus)
+  }, [selectedStatus])
+
+  useEffect(() => {
+    setPreference('reports-date-filter', selectedDateRange)
+  }, [selectedDateRange])
+
+  const filteredReports = reports
+    .filter((report) => selectedType === 'all' || report.type === selectedType)
+    .filter((report) => selectedStatus === 'all' || report.status === selectedStatus)
+    .filter((report) => isWithinDateRange(report.generated_at, selectedDateRange))
+
   // Check if any report with status 'ready' exists
   const hasReadyReport = reports.some(report => report.status === 'ready')
 
@@ -148,7 +205,7 @@ export default function Reports() {
       </section>
 
       <div className="grid grid-cols-1 xl:grid-cols-4 gap-12">
-          {/* Filtration Sidebar */}
+      {/* Filtration Sidebar */}
           <aside className="xl:col-span-1 space-y-12">
               <section className="bg-charcoal border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] space-y-8">
                   <div className="space-y-4">
@@ -171,6 +228,46 @@ export default function Reports() {
                       </div>
                   </div>
 
+                  <div className="space-y-4">
+                      <label className="text-[10px] font-black text-silver-bright uppercase tracking-[0.2em] italic">Status_Filter</label>
+                      <div className="grid grid-cols-1 gap-2">
+                          {['all', 'ready', 'generating', 'failed'].map(s => (
+                              <button
+                                  key={s}
+                                  onClick={() => setSelectedStatus(s)}
+                                  className={`px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest border-4 transition-all flex justify-between items-center ${
+                                      selectedStatus === s
+                                      ? 'bg-rag-green border-black text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]'
+                                      : 'bg-charcoal-dark border-black text-silver/40 hover:border-silver-bright/20'
+                                  }`}
+                              >
+                                  Status {s}
+                                  {selectedStatus === s && <ReportIcon icon={Radar02Icon} size={16} className="text-black" />}
+                              </button>
+                          ))}
+                      </div>
+                  </div>
+
+                  <div className="space-y-4">
+                      <label className="text-[10px] font-black text-silver-bright uppercase tracking-[0.2em] italic">Temporal_Range</label>
+                      <div className="grid grid-cols-1 gap-2">
+                          {['all', '24h', '7d', '30d'].map(d => (
+                              <button
+                                  key={d}
+                                  onClick={() => setSelectedDateRange(d)}
+                                  className={`px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest border-4 transition-all flex justify-between items-center ${
+                                      selectedDateRange === d
+                                      ? 'bg-rag-blue border-black text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]'
+                                      : 'bg-charcoal-dark border-black text-silver/40 hover:border-silver-bright/20'
+                                  }`}
+                              >
+                                  Date {d === 'all' ? 'All' : d === '24h' ? 'Last 24 hours' : d === '7d' ? 'Last 7 days' : 'Last 30 days'}
+                                  {selectedDateRange === d && <ReportIcon icon={Radar02Icon} size={16} className="text-black" />}
+                              </button>
+                          ))}
+                      </div>
+                  </div>
+
                   <div className="p-8 border-4 border-black border-dashed space-y-4 bg-charcoal-dark/50">
                       <div className="flex items-center gap-3">
                         <ReportIcon icon={KnightShieldIcon} className="text-rag-green" />
@@ -185,6 +282,18 @@ export default function Reports() {
 
           {/* Ledger Section */}
           <main className="xl:col-span-3 space-y-8">
+              {error && (
+                <div className="p-8 border-4 border-rag-red bg-charcoal-dark space-y-4 shadow-[8px_8px_0px_0px_rgba(255,0,0,0.1)]">
+                  <p className="text-sm font-black text-rag-red uppercase tracking-widest">Archive_Retrieval_Failed</p>
+                  <p className="text-xs text-silver/60">{error}</p>
+                  <button
+                    onClick={fetchReports}
+                    className="px-6 py-3 bg-rag-red text-black font-black uppercase text-xs border-4 border-black hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all"
+                  >
+                    Retry
+                  </button>
+                </div>
+              )}
               <div className="flex flex-col md:flex-row justify-between items-end gap-6 border-b-4 border-black pb-8">
                   <h2 className="text-5xl font-black text-silver-bright italic uppercase tracking-tighter shrink-0">Historical_Ledger</h2>
                   <div className="h-0.5 bg-black/10 flex-1 mb-2 hidden md:block"></div>
@@ -203,7 +312,7 @@ export default function Reports() {
                                 <span className="material-symbols-outlined text-silver/5 text-9xl">filter_alt_off</span>
                                 <div className="space-y-2">
                                     <p className="text-xl font-black text-silver/20 uppercase tracking-[0.4em] italic">
-                                        No Matching Reports
+                                        Archive Isolated
                                     </p>
                                     <p className="text-xs font-mono text-silver/10 uppercase tracking-widest leading-relaxed">
                                         No reports match the current filter. Adjust classification to view additional dossiers.
@@ -294,11 +403,11 @@ export default function Reports() {
                                      ))
                         )}
 
-                      {reports.length === 0 && (
+                      {reports.length === 0 && !error && (
                           <div className="col-span-2 py-40 border-4 border-dashed border-black/5 text-center flex flex-col items-center gap-8 bg-charcoal/30">
                               <ReportIcon icon={Archive02Icon} size={120} className="text-silver/5" />
                               <div className="space-y-2">
-                                  <p className="text-xl font-black text-silver/20 uppercase tracking-[0.4em] italic">Archive Isolated</p>
+                                  <p className="text-xl font-black text-silver/20 uppercase tracking-[0.4em] italic">Retrieving Archive Data</p>
                                   <p className="text-xs font-mono text-silver/10 uppercase tracking-widest leading-relaxed">System buffer awaiting briefing generation protocols</p>
                               </div>
                           </div>
diff --git a/frontend/testing/unit/pages/ReportsPreference.test.tsx b/frontend/testing/unit/pages/ReportsPreference.test.tsx
index 56249219..6ba517c4 100644
--- a/frontend/testing/unit/pages/ReportsPreference.test.tsx
+++ b/frontend/testing/unit/pages/ReportsPreference.test.tsx
@@ -44,7 +44,7 @@ describe('Reports page preference integration', () => {
     await user.click(techButton)
 
     // Check localStorage
-    expect(localStorage.getItem('secuscan-pref:reports-type-filter')).toContain('technical')
+    expect(localStorage.getItem('secuscan-pref:reports-type-filter')).toBe('technical')
 
     unmount()
 

From 8c95db10bdb55825b09f47a7ddbe1608a658b718 Mon Sep 17 00:00:00 2001
From: ANU-2524 <anusoni25.2006@gmail.com>
Date: Sun, 24 May 2026 02:15:56 +0530
Subject: [PATCH 5/5] Add HTML and CSV export buttons, fix localStorage
 double-serialization test

---
 frontend/src/pages/Reports.tsx                | 26 +++++++++++++++----
 .../unit/pages/ReportsPreference.test.tsx     |  4 +--
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/Reports.tsx b/frontend/src/pages/Reports.tsx
index fee20762..74a57e09 100644
--- a/frontend/src/pages/Reports.tsx
+++ b/frontend/src/pages/Reports.tsx
@@ -5,7 +5,6 @@ import { HugeiconsIcon } from '@hugeicons/react'
 import {
   Analytics02Icon,
   Archive02Icon,
-  Download01Icon,
   File01Icon,
   KnightShieldIcon,
   Pdf02Icon,
@@ -372,19 +371,36 @@ export default function Reports() {
                                                          <p className="text-[10px] font-mono text-silver-bright uppercase font-black">{formatDateLong(report.generated_at)}</p>
                                                      </div>
                                                      <div className="flex gap-4">
-                                                         <button
+                                                        <button
                                                              onClick={() => navigate(`/task/${report.task_id}`)}
                                                              className="bg-charcoal-dark border-4 border-black p-3 text-silver/20 group-hover:text-silver-bright group-hover:bg-black transition-all"
                                                              title="View Briefing"
                                                          >
                                                              <ReportIcon icon={ScanEyeIcon} size={18} />
                                                          </button>
-                                                         <button
+                                                        <button
                                                              onClick={() => window.open(`${API_BASE}/task/${report.task_id}/report/pdf`, '_blank')}
-                                                             className="bg-charcoal-dark border-4 border-black p-3 text-silver/20 group-hover:text-silver-bright group-hover:bg-black transition-all"
+                                                             disabled={report.status === 'generating'}
+                                                             className="bg-charcoal-dark border-4 border-black p-3 text-silver/20 group-hover:text-silver-bright group-hover:bg-black transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                                                              title="Download PDF"
+                                                        >
+                                                             PDF
+                                                         </button>
+                                                         <button
+                                                             onClick={() => window.open(`${API_BASE}/task/${report.task_id}/report/html`, '_blank')}
+                                                             disabled={report.status === 'generating'}
+                                                             className="bg-charcoal-dark border-4 border-black p-3 text-silver/20 group-hover:text-silver-bright group-hover:bg-black transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                                                             title="Download HTML"
+                                                         >
+                                                             HTML
+                                                         </button>
+                                                         <button
+                                                             onClick={() => window.open(`${API_BASE}/task/${report.task_id}/report/csv`, '_blank')}
+                                                             disabled={report.status === 'generating'}
+                                                             className="bg-charcoal-dark border-4 border-black p-3 text-silver/20 group-hover:text-silver-bright group-hover:bg-black transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                                                             title="Download CSV"
                                                          >
-                                                             <ReportIcon icon={Download01Icon} size={18} />
+                                                             CSV
                                                          </button>
                                                      </div>
                                                  </div>
diff --git a/frontend/testing/unit/pages/ReportsPreference.test.tsx b/frontend/testing/unit/pages/ReportsPreference.test.tsx
index 6ba517c4..5243701b 100644
--- a/frontend/testing/unit/pages/ReportsPreference.test.tsx
+++ b/frontend/testing/unit/pages/ReportsPreference.test.tsx
@@ -43,8 +43,8 @@ describe('Reports page preference integration', () => {
     const techButton = screen.getByRole('button', { name: /technical BRIEFINGS/i })
     await user.click(techButton)
 
-    // Check localStorage
-    expect(localStorage.getItem('secuscan-pref:reports-type-filter')).toBe('technical')
+    // Check localStorage (stores JSON-stringified value)
+    expect(localStorage.getItem('secuscan-pref:reports-type-filter')).toBe(JSON.stringify('technical'))
 
     unmount()