From 37483186ac95f6565df3a76b6f934b55fc0d08f4 Mon Sep 17 00:00:00 2001
From: Felix Bernhard <mail@felix-bernhard.com>
Date: Wed, 18 Mar 2026 18:44:10 +0100
Subject: [PATCH 1/4] fix request/response preview in dark mode

---
 .../Tabs/HttpRequests/RequestModal.vue        | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/Tabs/HttpRequests/RequestModal.vue b/src/components/Tabs/HttpRequests/RequestModal.vue
index 971313d..254c460 100644
--- a/src/components/Tabs/HttpRequests/RequestModal.vue
+++ b/src/components/Tabs/HttpRequests/RequestModal.vue
@@ -356,10 +356,14 @@ export default {
     
     .request-info, .response-info, .request-content, .response-content, .response-error {
         background: hsl(240deg 20% 99%);
-        border: 1px solid hsl(240deg 20% 90%);
         border-radius: 8px;
-        box-shadow: 0 2px 2px 0 hsl(240deg 20% 95%);
+        box-shadow: 0 0 0px 1px hsl(240, 20%, 90%), 0 2px 2px 0 hsl(240, 20%, 90%);
         padding: 10px;
+
+        @include dark {
+            background: hsl(240deg 2% 15%);
+            box-shadow: 0 0 0px 1px #15151e, 0 2px 2px 0 #15151e;
+        }
     }
     
     .request-content, .response-content {
@@ -448,9 +452,14 @@ export default {
             
             iframe {
                 border: 1px solid hsl(240deg 20% 90%);
+                background: #fff;
                 border-radius: 8px;
                 min-height: 30vh;
                 width: 100%;
+
+                @include dark {
+                    border: 1px solid hsl(240deg 5% 8%);
+                }
             }
         }
     }
@@ -458,11 +467,6 @@ export default {
     .details-request {
         flex: 1;
 
-        @include dark {
-            background: hsl(240deg 2% 15%);
-            box-shadow: 0 0 0px 1px #15151e, 0 2px 2px 0 #15151e;
-        }
-        
         .info-header {
             font-size: 15px;
 
@@ -498,11 +502,6 @@ export default {
     .details-response {
         flex: 1;
         
-        @include dark {
-            background: hsl(240deg 2% 15%);
-            box-shadow: 0 0 0px 1px #15151e, 0 2px 2px 0 #15151e;
-        }
-        
         .info-header {
             &.client-error {
                 .header-status {

From e9292274f792cdb481f7357866eb3fbe065548d9 Mon Sep 17 00:00:00 2001
From: Felix Bernhard <mail@felix-bernhard.com>
Date: Wed, 18 Mar 2026 18:46:51 +0100
Subject: [PATCH 2/4] prevent loading of styles/scripts

---
 src/components/Tabs/HttpRequests/RequestModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Tabs/HttpRequests/RequestModal.vue b/src/components/Tabs/HttpRequests/RequestModal.vue
index 254c460..46e8c8b 100644
--- a/src/components/Tabs/HttpRequests/RequestModal.vue
+++ b/src/components/Tabs/HttpRequests/RequestModal.vue
@@ -133,7 +133,7 @@
 
                         <code v-else-if="hasJsonResponse" v-html="request.response.body"></code>
 
-                        <iframe v-else ref="responseContent" :srcdoc="request.response.body"></iframe>
+                        <iframe v-else ref="responseContent" :srcdoc="request.response.body" sandbox=""></iframe>
                     </div>
                 </div>
 

From e6d3593cd393dda39a3ce47e7beaaa575b80ab6a Mon Sep 17 00:00:00 2001
From: Felix Bernhard <mail@felix-bernhard.com>
Date: Wed, 18 Mar 2026 18:49:13 +0100
Subject: [PATCH 3/4] sanitize HTML for preview

---
 src/components/Tabs/HttpRequests/RequestModal.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Tabs/HttpRequests/RequestModal.vue b/src/components/Tabs/HttpRequests/RequestModal.vue
index 46e8c8b..e2e1aa6 100644
--- a/src/components/Tabs/HttpRequests/RequestModal.vue
+++ b/src/components/Tabs/HttpRequests/RequestModal.vue
@@ -133,7 +133,7 @@
 
                         <code v-else-if="hasJsonResponse" v-html="request.response.body"></code>
 
-                        <iframe v-else ref="responseContent" :srcdoc="request.response.body" sandbox=""></iframe>
+                        <iframe v-else ref="responseContent" :srcdoc="sanitizeHtmlForPreview(request.response.body)" sandbox=""></iframe>
                     </div>
                 </div>
 
@@ -223,6 +223,16 @@ export default {
         
         formatBytesSpeed(value) {
             return `${this.formatBytesSize(value)}/s`
+        },
+
+        sanitizeHtmlForPreview(html) {
+            if (! html) return ''
+
+            // Prevent navigation when clicking links
+            const base = `<base href="about:srcdoc">`;
+            return html
+                .replace(/<base[^>]*>/gi, '')              // strip existing
+                .replace(/(<head[^>]*>)/i, `$1\n${base}`); // inject our own
         }
     }
 }

From b954d57e361c43ac03518a6646e28c1a3f85da76 Mon Sep 17 00:00:00 2001
From: Felix Bernhard <mail@felix-bernhard.com>
Date: Wed, 18 Mar 2026 18:49:28 +0100
Subject: [PATCH 4/4] add HTTP request counters and total duration

---
 src/components/Tabs/HttpRequestsTab.vue | 32 ++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/Tabs/HttpRequestsTab.vue b/src/components/Tabs/HttpRequestsTab.vue
index 52084fe..4770931 100644
--- a/src/components/Tabs/HttpRequestsTab.vue
+++ b/src/components/Tabs/HttpRequestsTab.vue
@@ -1,5 +1,20 @@
 <template>
 	<div v-if="active">
+		<div class="counters-row">
+			<div class="counter">
+				<div class="counter-value">{{$request.httpRequests.length}}</div>
+				<div class="counter-title">requests</div>
+			</div>
+			<div class="counter" v-for="(count, method) in requestCountsByMethod" :key="method">
+				<div class="counter-value">{{count}}</div>
+				<div class="counter-title">{{method}}</div>
+			</div>
+			<div class="counter">
+				<div class="counter-value">{{httpDurationRounded}}&nbsp;ms</div>
+				<div class="counter-title">time</div>
+			</div>
+		</div>
+
 		<details-table title="HTTP Requests" icon="compass" :columns="[ 'Request', 'Status', 'Duration', '' ]" :items="$request.httpRequests" :filter="filter" filter-example="&quot;/users&quot; method:post" class="http-requests-requests">
 			<template v-slot:body="{ items }">
 				<template v-for="request, index in items" :key="`${$request.id}-http-requests-${index}`">
@@ -50,7 +65,22 @@ export default {
 		]),
 
 		showRequest: null
-	})
+	}),
+	computed: {
+		requestCountsByMethod() {
+			const counts = {};
+
+			this.$request.httpRequests.forEach(request => {
+				const method = request.request.method.toUpperCase();
+				counts[method] = (counts[method] || 0) + 1;
+			});
+
+			return counts;
+		},
+		httpDurationRounded() {
+			return Math.round(this.$request.httpRequests.reduce((acc, request) => acc + (request.duration || 0), 0));
+		}
+	}
 }
 </script>