@@ -8,6 +8,7 @@ document.addEventListener('DOMContentLoaded', () => {
88 const responseOutput = document . getElementById ( 'responseOutput' ) ;
99 const errorBox = document . getElementById ( 'errorBox' ) ;
1010 const statusBadge = document . getElementById ( 'statusBadge' ) ;
11+ const protocolBadge = document . getElementById ( 'protocolBadge' ) ;
1112 const responseTimeText = document . getElementById ( 'responseTime' ) ;
1213 const stacktraceArea = document . getElementById ( 'stacktraceArea' ) ;
1314 const toggleStackBtn = document . getElementById ( 'toggleStackBtn' ) ;
@@ -75,8 +76,9 @@ document.addEventListener('DOMContentLoaded', () => {
7576
7677 const duration = Date . now ( ) - startTime ;
7778 const data = await response . text ( ) ;
79+ const protocol = response . headers . get ( 'x-protocol-version' ) ?? '' ;
7880
79- updateResponseMetadata ( response . status , duration ) ;
81+ updateResponseMetadata ( response . status , duration , protocol ) ;
8082 addToHistory ( payload , response . status , duration , data ) ;
8183
8284 if ( response . status === 502 && data . includes ( "---STACKTRACE---" ) ) {
@@ -127,10 +129,15 @@ document.addEventListener('DOMContentLoaded', () => {
127129 if ( toggleStackBtn ) toggleStackBtn . textContent = 'Stacktrace Details' ;
128130 }
129131
130- function updateResponseMetadata ( status , duration ) {
132+ function updateResponseMetadata ( status , duration , protocol = '' ) {
131133 statusBadge . innerText = `HTTP ${ status } ` ;
132134 statusBadge . className = `badge p-2 ${ status >= 200 && status < 300 ? 'bg-success' : 'bg-danger' } ` ;
133135 responseTimeText . innerText = `Dauer: ${ duration } ms` ;
136+ if ( protocol && protocolBadge ) {
137+ protocolBadge . innerText = protocol ;
138+ protocolBadge . className = `badge ms-2 shadow-sm ${ protocol === 'HTTP/2' ? 'bg-primary' : 'bg-secondary' } ` ;
139+ protocolBadge . style . display = '' ;
140+ }
134141 }
135142
136143 function handleDetailedError ( data ) {
0 commit comments