feat(bwtest): add prominent segmented protocol selector for UDP and TCP

internal/web/static/app.js

@@ -13999,6 +13999,54 @@ function setBwTestTarget(target) {
   if (inp) inp.value = target;
 }
 
+function setBwTestProtocol(proto) {
+  const hiddenInp = document.getElementById('bwtest-input-protocol');
+  if (hiddenInp) hiddenInp.value = proto;
+
+  const btnUdp = document.getElementById('bwtest-proto-udp');
+  const btnTcp = document.getElementById('bwtest-proto-tcp');
+  const badge = document.getElementById('bwtest-proto-badge');
+  const pktField = document.getElementById('bwtest-field-pktsize');
+
+  const activeUdpCls = 'py-2.5 px-3 rounded-lg text-xs font-bold border transition text-center bg-emerald-600/20 border-emerald-500/50 text-emerald-300 shadow-sm flex items-center justify-center gap-2';
+  const activeTcpCls = 'py-2.5 px-3 rounded-lg text-xs font-bold border transition text-center bg-blue-600/20 border-blue-500/50 text-blue-300 shadow-sm flex items-center justify-center gap-2';
+  const inactiveCls = 'py-2.5 px-3 rounded-lg text-xs font-medium border border-slate-800 bg-slate-950 text-slate-400 hover:text-white transition text-center flex items-center justify-center gap-2';
+
+  if (proto === 'udp') {
+    if (btnUdp) {
+      btnUdp.className = activeUdpCls;
+      const dot = btnUdp.querySelector('span');
+      if (dot) dot.className = 'w-2 h-2 rounded-full bg-emerald-400';
+    }
+    if (btnTcp) {
+      btnTcp.className = inactiveCls;
+      const dot = btnTcp.querySelector('span');
+      if (dot) dot.className = 'w-2 h-2 rounded-full bg-slate-600';
+    }
+    if (badge) {
+      badge.innerText = 'UDP Mode (RFC 3550 Jitter + Loss %)';
+      badge.className = 'text-[10px] font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20';
+    }
+    if (pktField) pktField.classList.remove('opacity-40');
+  } else {
+    if (btnUdp) {
+      btnUdp.className = inactiveCls;
+      const dot = btnUdp.querySelector('span');
+      if (dot) dot.className = 'w-2 h-2 rounded-full bg-slate-600';
+    }
+    if (btnTcp) {
+      btnTcp.className = activeTcpCls;
+      const dot = btnTcp.querySelector('span');
+      if (dot) dot.className = 'w-2 h-2 rounded-full bg-blue-400';
+    }
+    if (badge) {
+      badge.innerText = 'TCP Mode (Sliding Window Throughput)';
+      badge.className = 'text-[10px] font-mono text-blue-400 bg-blue-500/10 px-2 py-0.5 rounded border border-blue-500/20';
+    }
+    if (pktField) pktField.classList.add('opacity-40');
+  }
+}
+
 function setBwTestDirection(dir) {
   const hiddenInp = document.getElementById('bwtest-input-direction');
   if (hiddenInp) hiddenInp.value = dir;

internal/web/static/index.html

@@ -3882,6 +3882,28 @@
                   </div>
                 </div>
 
+                <!-- Protocol Selection (Segmented Selector) -->
+                <div>
+                  <div class="flex justify-between items-center mb-1.5">
+                    <label class="block text-xs font-semibold text-white flex items-center gap-1.5">
+                      <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+                      <span>Transport Protocol</span>
+                    </label>
+                    <span id="bwtest-proto-badge" class="text-[10px] font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">UDP Mode (RFC 3550 Jitter + Loss %)</span>
+                  </div>
+                  <div class="grid grid-cols-2 gap-2">
+                    <button type="button" id="bwtest-proto-udp" onclick="setBwTestProtocol('udp')" class="py-2 px-3 rounded-lg text-xs font-bold border transition text-center bg-emerald-600/20 border-emerald-500/50 text-emerald-300 shadow-sm flex items-center justify-center gap-2">
+                      <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
+                      <span>UDP (Loss & Jitter)</span>
+                    </button>
+                    <button type="button" id="bwtest-proto-tcp" onclick="setBwTestProtocol('tcp')" class="py-2 px-3 rounded-lg text-xs font-medium border border-slate-800 bg-slate-950 text-slate-400 hover:text-white transition text-center flex items-center justify-center gap-2">
+                      <span class="w-2 h-2 rounded-full bg-slate-600"></span>
+                      <span>TCP (Stream Throughput)</span>
+                    </button>
+                  </div>
+                  <input type="hidden" id="bwtest-input-protocol" value="udp">
+                </div>
+
                 <!-- Direction (Both / TX / RX) -->
                 <div>
                   <label class="block text-xs font-semibold text-slate-300 mb-1.5">Traffic Direction</label>
@@ -3899,17 +3921,19 @@
                   <input type="hidden" id="bwtest-input-direction" value="both">
                 </div>
 
-                <!-- Protocol & Streams -->
+                <!-- Protocol Options: Packet Size (UDP) & Parallel Streams (TCP) -->
                 <div class="grid grid-cols-2 gap-3">
-                  <div>
-                    <label class="block text-xs font-semibold text-slate-300 mb-1">Protocol</label>
-                    <select id="bwtest-input-protocol" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-emerald-500">
-                      <option value="udp" selected>UDP (Loss & Jitter)</option>
-                      <option value="tcp">TCP (Stream)</option>
+                  <div id="bwtest-field-pktsize">
+                    <label class="block text-xs font-semibold text-slate-300 mb-1">Packet Payload Size (UDP)</label>
+                    <select id="bwtest-input-pktsize" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-emerald-500">
+                      <option value="1472" selected>1500 (Standard MTU)</option>
+                      <option value="8972">9000 (Jumbo Frame)</option>
+                      <option value="512">512 (Small Payload)</option>
+                      <option value="64">64 (Min VoIP / Small)</option>
                     </select>
                   </div>
-                  <div>
-                    <label class="block text-xs font-semibold text-slate-300 mb-1">Parallel Streams</label>
+                  <div id="bwtest-field-streams">
+                    <label class="block text-xs font-semibold text-slate-300 mb-1">Parallel Streams (TCP/UDP)</label>
                     <select id="bwtest-input-streams" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-emerald-500">
                       <option value="1" selected>1 Stream</option>
                       <option value="2">2 Streams</option>
@@ -10741,6 +10765,6 @@
   </div>
 
   <datalist id="fw-addrlist-datalist"></datalist>
-  <script src="app.js?v=13.0"></script>
+  <script src="app.js?v=14.0"></script>
 </body>
 </html>