From 992c212c76451672757df752665dac28632a62a9 Mon Sep 17 00:00:00 2001
From: ospab <gvoprgrg@gmail.com>
Date: Wed, 8 Jul 2026 23:12:21 +0300
Subject: [PATCH] feat(gui): make RTT and speed display optional

---
 ostp-gui/src/index.html | 34 ++++++++++++++++++++++++++++------
 ostp-gui/src/main.js    | 25 ++++++++++++++++++++++++-
 2 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/ostp-gui/src/index.html b/ostp-gui/src/index.html
index 9c84311..81b223e 100644
--- a/ostp-gui/src/index.html
+++ b/ostp-gui/src/index.html
@@ -90,18 +90,18 @@
           </div>
 
           <!-- Live RTT + speeds -->
-          <div class="live-stats">
-            <div class="live-stat">
+          <div class="live-stats" id="live-stats-container">
+            <div class="live-stat" id="stat-rtt-box">
               <span class="live-stat-label">RTT</span>
               <span id="live-rtt" class="live-stat-value">--</span>
             </div>
-            <div class="live-stat-sep"></div>
-            <div class="live-stat">
+            <div class="live-stat-sep" id="stat-sep-1"></div>
+            <div class="live-stat" id="stat-down-box">
               <span class="live-stat-label">↓</span>
               <span id="live-down-speed" class="live-stat-value">0 B/s</span>
             </div>
-            <div class="live-stat-sep"></div>
-            <div class="live-stat">
+            <div class="live-stat-sep" id="stat-sep-2"></div>
+            <div class="live-stat" id="stat-up-box">
               <span class="live-stat-label">↑</span>
               <span id="live-up-speed" class="live-stat-value">0 B/s</span>
             </div>
@@ -280,6 +280,28 @@
             </label>
           </div>
 
+          <div class="toggle-row" style="border-top:none;">
+            <div class="toggle-text">
+              <span class="toggle-name">Show RTT</span>
+              <span class="toggle-hint">Display live ping on dashboard</span>
+            </div>
+            <label class="toggle">
+              <input type="checkbox" id="in-show-rtt" checked />
+              <span class="toggle-track"><span class="toggle-thumb"></span></span>
+            </label>
+          </div>
+
+          <div class="toggle-row" style="border-top:none;">
+            <div class="toggle-text">
+              <span class="toggle-name">Show Speed</span>
+              <span class="toggle-hint">Display traffic speed on dashboard</span>
+            </div>
+            <label class="toggle">
+              <input type="checkbox" id="in-show-speed" checked />
+              <span class="toggle-track"><span class="toggle-thumb"></span></span>
+            </label>
+          </div>
+
         </div> <!-- client-settings-card -->
         
         <div class="app-version" id="app-version">OSTP GUI</div>
diff --git a/ostp-gui/src/main.js b/ostp-gui/src/main.js
index 3d83cfe..b6cb103 100644
--- a/ostp-gui/src/main.js
+++ b/ostp-gui/src/main.js
@@ -154,6 +154,8 @@ const inExProcs     = $('in-ex-procs');
 const inAutoconnect = $('in-autoconnect');
 const inLaunchStartup = $('in-launch-startup');
 const inDebug       = $('in-debug');
+const inShowRtt     = $('in-show-rtt');
+const inShowSpeed   = $('in-show-speed');
 const groupKillSwitch  = $('group-kill-switch');
 const groupMuxSessions = $('group-mux-sessions');
 
@@ -664,6 +666,8 @@ function loadSettingsIntoForm() {
   inAutoconnect.checked = !!s.autoconnect;
   inLaunchStartup.checked = !!s.launchStartup;
   inDebug.checked       = !!s.debug;
+  inShowRtt.checked     = s.showRtt !== false;
+  inShowSpeed.checked   = s.showSpeed !== false;
   updateClientVisibility();
 }
 
@@ -682,6 +686,8 @@ function collectAndSaveSettings() {
     autoconnect:  inAutoconnect.checked,
     launchStartup: inLaunchStartup.checked,
     debug:        inDebug.checked,
+    showRtt:      inShowRtt.checked,
+    showSpeed:    inShowSpeed.checked,
   };
   saveClientSettings(s);
   updateClientVisibility();
@@ -703,6 +709,23 @@ function collectAndSaveSettings() {
 function updateClientVisibility() {
   groupKillSwitch.style.display  = inTun.checked  ? 'flex' : 'none';
   groupMuxSessions.style.display = inMux.checked  ? 'flex' : 'none';
+
+  const showRtt = inShowRtt.checked;
+  const showSpeed = inShowSpeed.checked;
+  const rttBox = $('stat-rtt-box');
+  const downBox = $('stat-down-box');
+  const upBox = $('stat-up-box');
+  const sep1 = $('stat-sep-1');
+  const sep2 = $('stat-sep-2');
+  const container = $('live-stats-container');
+
+  if (rttBox) rttBox.style.display = showRtt ? 'flex' : 'none';
+  if (downBox) downBox.style.display = showSpeed ? 'flex' : 'none';
+  if (upBox) upBox.style.display = showSpeed ? 'flex' : 'none';
+  
+  if (sep1) sep1.style.display = (showRtt && showSpeed) ? 'block' : 'none';
+  if (sep2) sep2.style.display = showSpeed ? 'block' : 'none';
+  if (container) container.style.display = (showRtt || showSpeed) ? 'flex' : 'none';
 }
 
 // ── INIT ──────────────────────────────────────────────────────────────
@@ -858,7 +881,7 @@ window.addEventListener('DOMContentLoaded', async () => {
   wintunModal.addEventListener('click', e => { if (e.target === wintunModal) wintunModal.classList.add('hidden'); });
 
   // Client settings — wire all inputs
-  [inTun, inKillSwitch, inMux, inAutoconnect, inLaunchStartup, inDebug]
+  [inTun, inKillSwitch, inMux, inAutoconnect, inLaunchStartup, inDebug, inShowRtt, inShowSpeed]
     .forEach(el => el.addEventListener('change', collectAndSaveSettings));
   [inMuxSessions, inMtu, inDns, inSocks, inExDomains, inExIps, inExProcs]
     .forEach(el => {