From 79fcb1ba9c1a1598326ec9a02d8ac912b683db1b Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Thu, 26 Mar 2026 21:23:47 +0100
Subject: [PATCH] [feat](trx-frontend-http): add Client sub-tab to About page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/index.html   | 176 +++++++++---------
 1 file changed, 93 insertions(+), 83 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index 9830c6e..fb1d15d 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -1020,92 +1020,102 @@
     </div>
     <div id="tab-about" class="tab-panel" style="display:none;">
       <div id="auth-badge" style="display:none; margin-bottom: 1rem; padding: 0.5rem; background: var(--bg-secondary); border-radius: 0.25rem; color: var(--text-muted); font-size: 0.85rem;">Authenticated as: <strong id="auth-role-badge">--</strong></div>
-      <div class="about-grid">
-        <!-- Server -->
-        <div class="about-card">
-          <div class="about-card-title">
-            <svg class="about-card-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="12" height="5" rx="1"/><rect x="2" y="9" width="12" height="5" rx="1"/><circle cx="5" cy="4.5" r="0.7" fill="currentColor" stroke="none"/><circle cx="5" cy="11.5" r="0.7" fill="currentColor" stroke="none"/></svg>
-            Server
+      <div class="sub-tab-bar">
+        <button class="sub-tab active" data-subtab="about-server">Server</button>
+        <button class="sub-tab" data-subtab="about-client">Client</button>
+      </div>
+      <div id="subtab-about-server" class="sub-tab-panel">
+        <div class="about-grid">
+          <!-- Server -->
+          <div class="about-card">
+            <div class="about-card-title">
+              <svg class="about-card-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="12" height="5" rx="1"/><rect x="2" y="9" width="12" height="5" rx="1"/><circle cx="5" cy="4.5" r="0.7" fill="currentColor" stroke="none"/><circle cx="5" cy="11.5" r="0.7" fill="currentColor" stroke="none"/></svg>
+              Server
+            </div>
+            <table class="about-table">
+              <tr><td>Version</td><td id="about-server-ver">--</td></tr>
+              <tr><td>Build date</td><td id="about-server-build-date">--</td></tr>
+              <tr><td>Address</td><td id="about-server-addr">--</td></tr>
+              <tr><td>Callsign</td><td id="about-server-call">--</td></tr>
+              <tr><td>Location</td><td id="about-server-location">--</td></tr>
+              <tr><td>Uptime</td><td id="about-uptime">--</td></tr>
+            </table>
+          </div>
+          <!-- Radio -->
+          <div class="about-card">
+            <div class="about-card-title">
+              <svg class="about-card-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5h12v8H2z"/><path d="M4 5V3l8 -1v3"/><circle cx="11" cy="9" r="2"/><path d="M4 8h4"/><path d="M4 10h3"/></svg>
+              Radio
+            </div>
+            <table class="about-table">
+              <tr><td>Rig</td><td id="about-rig-info">--</td></tr>
+              <tr><td>Active rig</td><td id="about-active-rig">--</td></tr>
+              <tr><td>Available rigs</td><td id="about-rig-list">--</td></tr>
+              <tr><td>Connection</td><td id="about-rig-access">--</td></tr>
+              <tr><td>Modes</td><td id="about-modes">--</td></tr>
+              <tr><td>VFOs</td><td id="about-vfos">--</td></tr>
+            </table>
+          </div>
+          <!-- Audio -->
+          <div class="about-card">
+            <div class="about-card-title">
+              <svg class="about-card-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5v6"/><path d="M6 3v10"/><path d="M9 6v4"/><path d="M12 4v8"/></svg>
+              Audio
+            </div>
+            <table class="about-table">
+              <tr><td>Codec</td><td id="about-audio-codec">--</td></tr>
+              <tr><td>Sample rate</td><td id="about-audio-samplerate">--</td></tr>
+              <tr><td>Channels</td><td id="about-audio-channels">--</td></tr>
+              <tr><td>Bitrate</td><td id="about-audio-bitrate">--</td></tr>
+              <tr><td>Frame duration</td><td id="about-audio-frame">--</td></tr>
+              <tr><td>RX status</td><td id="about-audio-rx">Off</td></tr>
+              <tr><td>Active streams</td><td id="about-audio-streams">--</td></tr>
+            </table>
+          </div>
+          <!-- Decoders -->
+          <div class="about-card">
+            <div class="about-card-title">
+              <svg class="about-card-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12 L5 4 L8 10 L10 6 L14 12"/></svg>
+              Decoders
+            </div>
+            <table class="about-table">
+              <tr><td>FT8</td><td id="about-dec-ft8" class="about-status-off">Off</td></tr>
+              <tr><td>FT4</td><td id="about-dec-ft4" class="about-status-off">Off</td></tr>
+              <tr><td>FT2</td><td id="about-dec-ft2" class="about-status-off">Off</td></tr>
+              <tr><td>WSPR</td><td id="about-dec-wspr" class="about-status-off">Off</td></tr>
+              <tr><td>CW</td><td id="about-dec-cw" class="about-status-off">Off</td></tr>
+              <tr><td>APRS</td><td id="about-dec-aprs" class="about-status-off">Off</td></tr>
+            </table>
+          </div>
+          <!-- Integrations -->
+          <div class="about-card">
+            <div class="about-card-title">
+              <svg class="about-card-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="2"/><path d="M8 2v2"/><path d="M8 12v2"/><path d="M2 8h2"/><path d="M12 8h2"/><path d="M3.8 3.8l1.4 1.4"/><path d="M10.8 10.8l1.4 1.4"/><path d="M3.8 12.2l1.4-1.4"/><path d="M10.8 5.2l1.4-1.4"/></svg>
+              Integrations
+            </div>
+            <table class="about-table">
+              <tr><td>PSK Reporter</td><td id="about-pskreporter">--</td></tr>
+              <tr><td>APRS-IS</td><td id="about-aprs-is">--</td></tr>
+              <tr><td>Rigctl endpoint</td><td id="about-rigctl-endpoint">--</td></tr>
+              <tr><td>Rigctl clients</td><td id="about-rigctl-clients">--</td></tr>
+            </table>
           </div>
-          <table class="about-table">
-            <tr><td>Version</td><td id="about-server-ver">--</td></tr>
-            <tr><td>Build date</td><td id="about-server-build-date">--</td></tr>
-            <tr><td>Address</td><td id="about-server-addr">--</td></tr>
-            <tr><td>Callsign</td><td id="about-server-call">--</td></tr>
-            <tr><td>Location</td><td id="about-server-location">--</td></tr>
-            <tr><td>Uptime</td><td id="about-uptime">--</td></tr>
-          </table>
         </div>
-        <!-- Radio -->
-        <div class="about-card">
-          <div class="about-card-title">
-            <svg class="about-card-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5h12v8H2z"/><path d="M4 5V3l8 -1v3"/><circle cx="11" cy="9" r="2"/><path d="M4 8h4"/><path d="M4 10h3"/></svg>
-            Radio
+      </div>
+      <div id="subtab-about-client" class="sub-tab-panel" style="display:none;">
+        <div class="about-grid">
+          <!-- Client -->
+          <div class="about-card">
+            <div class="about-card-title">
+              <svg class="about-card-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="5" r="3"/><path d="M2 14c0-3 2.7-5 6-5s6 2 6 5"/></svg>
+              Client
+            </div>
+            <table class="about-table">
+              <tr><td>Version</td><td>{pkg} v{ver}</td></tr>
+              <tr><td>Build date</td><td>{client_build_date}</td></tr>
+              <tr><td>HTTP clients</td><td id="about-clients">--</td></tr>
+            </table>
           </div>
-          <table class="about-table">
-            <tr><td>Rig</td><td id="about-rig-info">--</td></tr>
-            <tr><td>Active rig</td><td id="about-active-rig">--</td></tr>
-            <tr><td>Available rigs</td><td id="about-rig-list">--</td></tr>
-            <tr><td>Connection</td><td id="about-rig-access">--</td></tr>
-            <tr><td>Modes</td><td id="about-modes">--</td></tr>
-            <tr><td>VFOs</td><td id="about-vfos">--</td></tr>
-          </table>
-        </div>
-        <!-- Audio -->
-        <div class="about-card">
-          <div class="about-card-title">
-            <svg class="about-card-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5v6"/><path d="M6 3v10"/><path d="M9 6v4"/><path d="M12 4v8"/></svg>
-            Audio
-          </div>
-          <table class="about-table">
-            <tr><td>Codec</td><td id="about-audio-codec">--</td></tr>
-            <tr><td>Sample rate</td><td id="about-audio-samplerate">--</td></tr>
-            <tr><td>Channels</td><td id="about-audio-channels">--</td></tr>
-            <tr><td>Bitrate</td><td id="about-audio-bitrate">--</td></tr>
-            <tr><td>Frame duration</td><td id="about-audio-frame">--</td></tr>
-            <tr><td>RX status</td><td id="about-audio-rx">Off</td></tr>
-            <tr><td>Active streams</td><td id="about-audio-streams">--</td></tr>
-          </table>
-        </div>
-        <!-- Decoders -->
-        <div class="about-card">
-          <div class="about-card-title">
-            <svg class="about-card-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12 L5 4 L8 10 L10 6 L14 12"/></svg>
-            Decoders
-          </div>
-          <table class="about-table">
-            <tr><td>FT8</td><td id="about-dec-ft8" class="about-status-off">Off</td></tr>
-            <tr><td>FT4</td><td id="about-dec-ft4" class="about-status-off">Off</td></tr>
-            <tr><td>FT2</td><td id="about-dec-ft2" class="about-status-off">Off</td></tr>
-            <tr><td>WSPR</td><td id="about-dec-wspr" class="about-status-off">Off</td></tr>
-            <tr><td>CW</td><td id="about-dec-cw" class="about-status-off">Off</td></tr>
-            <tr><td>APRS</td><td id="about-dec-aprs" class="about-status-off">Off</td></tr>
-          </table>
-        </div>
-        <!-- Integrations -->
-        <div class="about-card">
-          <div class="about-card-title">
-            <svg class="about-card-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="2"/><path d="M8 2v2"/><path d="M8 12v2"/><path d="M2 8h2"/><path d="M12 8h2"/><path d="M3.8 3.8l1.4 1.4"/><path d="M10.8 10.8l1.4 1.4"/><path d="M3.8 12.2l1.4-1.4"/><path d="M10.8 5.2l1.4-1.4"/></svg>
-            Integrations
-          </div>
-          <table class="about-table">
-            <tr><td>PSK Reporter</td><td id="about-pskreporter">--</td></tr>
-            <tr><td>APRS-IS</td><td id="about-aprs-is">--</td></tr>
-            <tr><td>Rigctl endpoint</td><td id="about-rigctl-endpoint">--</td></tr>
-            <tr><td>Rigctl clients</td><td id="about-rigctl-clients">--</td></tr>
-          </table>
-        </div>
-        <!-- Clients -->
-        <div class="about-card">
-          <div class="about-card-title">
-            <svg class="about-card-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="5" r="3"/><path d="M2 14c0-3 2.7-5 6-5s6 2 6 5"/></svg>
-            Clients
-          </div>
-          <table class="about-table">
-            <tr><td>HTTP clients</td><td id="about-clients">--</td></tr>
-            <tr><td>Client version</td><td>{pkg} v{ver}</td></tr>
-            <tr><td>Client build</td><td>{client_build_date}</td></tr>
-          </table>
         </div>
       </div>
     </div>