fix: improve upload telemetry readability

Increase the lower-sidebar availability and telemetry type scale, and update the header and sidebar speed values through one shared formatter so both surfaces stay synchronized with every live sample.

renderer/app.js

@@ -3652,10 +3652,16 @@ function _setRollingUploadMetric(id, value) {
   });
 }
 
-function formatUploadSpeed(kbs) {
+function getUploadSpeedText(kbs = lastUploadStats.globalSpeedKbs) {
   return !kbs || kbs <= 0 ? '0 B/s' : formatSpeed(kbs);
 }
 
+function updateUploadSpeedDisplays() {
+  const text = getUploadSpeedText();
+  _setUploadTelemetryText('uploadTelemetrySpeed', text);
+  _setUploadTelemetryText('uploadSpeedValue', text);
+}
+
 function syncUploadSpeedSparklineVisibility(view) {
   const widget = document.getElementById('uploadSpeedSparkline');
   if (!widget) return;
@@ -3714,7 +3720,7 @@ function drawUploadSpeedSparkline() {
 function updateUploadSpeedSparkline() {
   const speedKbs = Math.max(0, Number(lastUploadStats.globalSpeedKbs) || 0);
   window.SpeedHistory.updateSpeedHistory(uploadSpeedState, speedKbs * 1024);
-  _setUploadTelemetryText('uploadSpeedValue', formatUploadSpeed(speedKbs));
+  updateUploadSpeedDisplays();
   drawUploadSpeedSparkline();
 }
 
@@ -3740,7 +3746,7 @@ function updateStatusBar() {
   _setRollingUploadMetric('uploadTelemetryRunning', stats.inProgress);
   _setRollingUploadMetric('uploadTelemetryCompleted', _sessionDoneCount);
   _setRollingUploadMetric('uploadTelemetryFailed', _sessionErrorCount);
-  _setUploadTelemetryText('uploadTelemetrySpeed', formatUploadSpeed(lastUploadStats.globalSpeedKbs || 0));
+  updateUploadSpeedDisplays();
   _setUploadTelemetryText('uploadTelemetryEta', etaSeconds > 0 ? formatTime(etaSeconds) : '--:--');
   updateUploadSidebarSummary(stats);
 }

renderer/styles.css

@@ -2545,6 +2545,14 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   margin-top: 0;
 }
 
+.upload-sidebar-lower .view-sidebar-section-label {
+  font-size: 11px;
+}
+
+.upload-sidebar-lower .view-sidebar-summary {
+  font-size: 12px;
+}
+
 .upload-telemetry {
   display: grid;
   gap: 6px;
@@ -2553,34 +2561,34 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
 }
 
 .upload-telemetry-row {
-  min-height: 15px;
+  min-height: 17px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   color: var(--text-dim);
-  font-size: 11px;
-  line-height: 15px;
+  font-size: 12px;
+  line-height: 17px;
 }
 
 .upload-telemetry-value {
   min-width: 58px;
   color: var(--text);
-  font-size: 11px;
+  font-size: 12px;
   font-variant-numeric: tabular-nums;
   text-align: right;
   white-space: nowrap;
 }
 
 .upload-rolling-value {
-  height: 15px;
+  height: 17px;
   overflow: hidden;
   position: relative;
 }
 
 .upload-rolling-value > span {
   width: 100%;
-  height: 15px;
+  height: 17px;
   display: block;
 }
 

tests/ui-smoke.js

@@ -315,6 +315,9 @@ setTimeout(async () => {
     const uploadSidebarInformation = await wc.executeJavaScript('(() => { const sidebar = document.querySelector("#upload-view > .view-sidebar")?.getBoundingClientRect(); const availability = document.getElementById("uploadAvailability")?.getBoundingClientRect(); const telemetry = document.getElementById("uploadTelemetry")?.getBoundingClientRect(); return Boolean(sidebar && availability && telemetry && availability.bottom <= telemetry.top && telemetry.bottom <= sidebar.bottom + 1 && document.getElementById("uploadSidebarAccountsCount")); })()');
     check('Upload sidebar stacks availability above bottom telemetry', uploadSidebarInformation === true);
 
+    const lowerSidebarTypography = await wc.executeJavaScript('(() => { const availabilityLabel = document.querySelector("#uploadAvailability .view-sidebar-section-label"); const availabilityText = document.querySelector("#uploadAvailability .view-sidebar-summary"); const telemetryLabel = document.querySelector("#uploadTelemetry .upload-telemetry-label"); const telemetryValue = document.querySelector("#uploadTelemetry .upload-telemetry-value"); return [availabilityLabel, availabilityText, telemetryLabel, telemetryValue].map(element => parseFloat(getComputedStyle(element).fontSize)); })()');
+    check('Availability and telemetry use the larger readable type scale', lowerSidebarTypography[0] >= 11 && lowerSidebarTypography[1] >= 12 && lowerSidebarTypography[2] >= 12 && lowerSidebarTypography[3] >= 12);
+
     const telemetryUpdate = await wc.executeJavaScript(\`(() => {
       queueJobs = [
         { id: 'telemetry-running', status: 'uploading', bytesTotal: 4096, bytesUploaded: 1024 },
@@ -334,11 +337,15 @@ setTimeout(async () => {
           return element?.getAttribute('aria-label') || element?.textContent.trim();
         }).join('|'),
         rolling,
-        direction: total?.dataset.direction
+        direction: total?.dataset.direction,
+        speedPair: [document.getElementById('uploadTelemetrySpeed')?.textContent, document.getElementById('uploadSpeedValue')?.textContent].join('|')
       };
     })()\`);
     check('Upload telemetry reflects queue and session activity', telemetryUpdate.values === '4|1|2|1|7|2|2 kB/s|00:03');
     check('Changing integer telemetry rolls vertically', telemetryUpdate.rolling === 2 && telemetryUpdate.direction === 'up');
+    check('Header and sidebar speed update synchronously from the same live sample', telemetryUpdate.speedPair === '2 kB/s|2 kB/s');
+    const secondSynchronizedSpeed = await wc.executeJavaScript('lastUploadStats = { ...lastUploadStats, globalSpeedKbs: 1536 }; updateStatusBar(); [document.getElementById("uploadTelemetrySpeed")?.textContent, document.getElementById("uploadSpeedValue")?.textContent].join("|")');
+    check('Header and sidebar speed stay synchronized across later samples', secondSynchronizedSpeed === '1.5 MB/s|1.5 MB/s');
     await new Promise(resolve => setTimeout(resolve, 360));
     await wc.executeJavaScript('queueJobs = []; _sessionDoneCount = 0; _sessionErrorCount = 0; lastUploadStats = { ...lastUploadStats, globalSpeedKbs: 0, activeJobs: 0, state: "idle" }; updateStatusBar();');