From fbd73f4cdcee5f99baf3fcc3916bf1dc8a304041 Mon Sep 17 00:00:00 2001
From: DeNNiiInc <dennii.inc@gmail.com>
Date: Sun, 28 Dec 2025 02:54:45 +1100
Subject: [PATCH] Phase A.2 - Add expandable Request/Response Headers view

---
 lib/har-parser.js |  4 ++++
 waterfall.js      | 49 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/lib/har-parser.js b/lib/har-parser.js
index b7a92dd..1d26c12 100644
--- a/lib/har-parser.js
+++ b/lib/har-parser.js
@@ -53,6 +53,10 @@ function parseHAR(lighthouseResult) {
       isThirdParty: checkIfThirdParty(request.url, lighthouseResult.finalUrl),
       renderBlocking: request.renderBlocking === 'blocking',
       
+      // HTTP Headers
+      requestHeaders: request.requestHeaders || {},
+      responseHeaders: request.responseHeaders || {},
+      
       // Extracted from response headers if available
       cacheControl: request.responseHeaders?.['cache-control'],
       contentEncoding: request.responseHeaders?.['content-encoding']
diff --git a/waterfall.js b/waterfall.js
index 79f9d79..4ec2db7 100644
--- a/waterfall.js
+++ b/waterfall.js
@@ -415,6 +415,24 @@ function showRequestDetails(requestId) {
                 <span class="detail-value">${(entry.size.compressionRatio * 100).toFixed(1)}% (${formatBytes(entry.size.resourceSize - entry.size.transferSize)} saved)</span>
             </div>` : ''}
         </div>
+        
+        <div class="detail-section">
+            <h3 onclick="toggleHeaderSection('request-headers')" style="cursor: pointer; user-select: none;">
+                Request Headers <span id="request-headers-icon">▼</span>
+            </h3>
+            <div id="request-headers-content" class="headers-content" style="display: none;">
+                ${formatHeaders(entry.requestHeaders)}
+            </div>
+        </div>
+        
+        <div class="detail-section">
+            <h3 onclick="toggleHeaderSection('response-headers')" style="cursor: pointer; user-select: none;">
+                Response Headers <span id="response-headers-icon">▼</span>
+            </h3>
+            <div id="response-headers-content" class="headers-content" style="display: none;">
+                ${formatHeaders(entry.responseHeaders)}
+            </div>
+        </div>
     `;
     
     document.getElementById('dialogContent').innerHTML = content;
@@ -463,5 +481,36 @@ function formatBytes(bytes) {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 }
 
+function formatHeaders(headers) {
+    if (!headers || Object.keys(headers).length === 0) {
+        return '<p style="color: var(--color-text-secondary); font-style: italic;">No headers available</p>';
+    }
+    
+    let html = '<div class="headers-list">';
+    Object.entries(headers).forEach(([key, value]) => {
+        html += `
+            <div class="header-row">
+                <span class="header-key">${key}:</span>
+                <span class="header-value">${value}</span>
+            </div>
+        `;
+    });
+    html += '</div>';
+    return html;
+}
+
+function toggleHeaderSection(sectionId) {
+    const content = document.getElementById(`${sectionId}-content`);
+    const icon = document.getElementById(`${sectionId}-icon`);
+    
+    if (content.style.display === 'none') {
+        content.style.display = 'block';
+        icon.textContent = '▲';
+    } else {
+        content.style.display = 'none';
+        icon.textContent = '▼';
+    }
+}
+
 // Initialize on page load
 document.addEventListener('DOMContentLoaded', init);