Polish GUI design

python_app/webui/static/app.js

@@ -117,7 +117,7 @@ btnNextCombo.addEventListener("click", () => changeDisplayCombo("/api/next_combo
 settingsToggle.addEventListener("click", () => sidePanel.classList.toggle("collapsed"));
 
 // The form is built ENTIRELY from the schema the server derives from the Qt widgets
-// (field, group, kind, options, ranges, value, enabled). The web hardcodes nothing
+// (field, label, group, kind, options, ranges, value, enabled). The web hardcodes nothing
 // and shows only the active mode's fields, so it always mirrors the desktop.
 const fieldInputs = {}; // field name -> { el, kind, dirty }
 let formSignature = ""; // field names currently in the form (detect mode/structure change)
@@ -146,7 +146,7 @@ function makeGeometryEditor(entry) {
       input.type = "number";
       input.step = index === 0 ? "1" : "any";
       input.required = true;
-      input.setAttribute("aria-label", `${entry.name} ${key}`);
+      input.setAttribute("aria-label", `${entry.label} ${key}`);
       if (index === 0) { input.min = "0"; input.max = entry.position_count - 1; }
       input.value = record[key] ?? 0;
       input.disabled = entry.enabled === false;
@@ -177,7 +177,7 @@ function makeGeometryEditor(entry) {
   };
   el.setRecords(entry.value);
   add.type = "button";
-  add.textContent = "Add antenna";
+  add.textContent = "Add Antenna";
   add.addEventListener("click", () => {
     if (body.rows.length >= entry.position_count) return;
     const positions = new Set(Array.from(body.rows, (row) => Number(row.querySelector("input").value)));
@@ -196,7 +196,7 @@ function makeFieldRow(entry) {
   row.className = "field";
   if (entry.kind === "geometry") row.classList.add("geometry-field");
   const label = document.createElement("label");
-  label.textContent = entry.kind === "geometry" ? (entry.name === "tx_geometry" ? "Tx antenna positions" : "Rx antenna positions") : entry.name;
+  label.textContent = entry.label;
   label.htmlFor = "f_" + entry.name;
   row.appendChild(label);
 

python_app/webui/static/index.html

@@ -10,21 +10,21 @@
   <header class="topbar">
     <div class="brand">Radar System</div>
     <div class="controls">
-      <button id="btn-start" class="btn">Start</button>
+      <button id="btn-start" class="btn primary">Start</button>
       <button id="btn-single" class="btn">Single Capture</button>
       <button id="btn-stop" class="btn">Stop</button>
-      <button id="btn-tmp-ref" class="btn">Tmp Reference</button>
-      <button id="btn-remove-last" class="btn">Remove Last Measurement</button>
+      <button id="btn-tmp-ref" class="btn">Capture Temporary Reference</button>
+      <button id="btn-remove-last" class="btn destructive">Remove Last Measurement</button>
     </div>
   </header>
 
   <main class="layout">
     <section class="plot-panel">
       <div class="plot-head">
-        <span class="plot-title">Processor output</span>
+        <span class="plot-title">Processor Output</span>
         <div id="display-combo-controls" class="config-row" hidden>
           <select id="display-combo" class="config-control" aria-label="B-scan channel combination"></select>
-          <button id="btn-next-combo" class="btn">Next combination</button>
+          <button id="btn-next-combo" class="btn">Next Combination</button>
         </div>
       </div>
       <div id="sar3d-status" class="sar3d-status" role="status" hidden></div>
@@ -35,7 +35,7 @@
 
     <aside class="side-panel">
       <div class="config-section">
-        <div class="config-title">Config profile</div>
+        <div class="config-title">Config Profile</div>
         <div class="config-row">
           <select id="config-select" class="config-control" aria-label="Run config"></select>
           <button id="btn-load-config" class="btn">Load</button>
@@ -44,7 +44,7 @@
       </div>
 
       <div class="config-section">
-        <div class="config-title">Save / record dataset</div>
+        <div class="config-title">Save / Record Dataset</div>
         <div class="config-row">
           <input id="save-path" class="config-control" type="text" placeholder="Save path" aria-label="Save path" />
         </div>
@@ -55,20 +55,20 @@
         <div class="config-row">
           <input id="record-count" class="config-control" type="number" min="1" step="1"
                  placeholder="Sweeps to record" aria-label="Number of sweeps to record" />
-          <button id="btn-start-recording" class="btn">Start + Record</button>
+          <button id="btn-start-recording" class="btn">Start + Record to Disk</button>
         </div>
         <div class="config-active" id="recording-status"></div>
       </div>
 
       <div class="panel-head" id="settings-toggle">
-        <span class="panel-title">Processor settings</span>
+        <span class="panel-title">Processor Settings</span>
         <span class="chevron" id="settings-chevron">▾</span>
       </div>
       <div class="panel-body" id="settings-body">
         <div id="settings-fields" class="settings-fields"></div>
         <div class="settings-actions">
           <button id="btn-apply" class="btn primary">Apply</button>
-          <button id="btn-reset-history" class="btn">Reset history</button>
+          <button id="btn-reset-history" class="btn destructive">Clear Runtime History</button>
         </div>
         <div id="settings-note" class="note"></div>
       </div>

python_app/webui/static/style.css

@@ -78,6 +78,7 @@ body {
   color: #ffffff;
 }
 .btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
+.btn.destructive { color: #a73545; border-color: #cf9ba4; }
 .btn:disabled {
   color: var(--disabled-text);
   background: var(--disabled-bg);
@@ -125,6 +126,7 @@ body {
   overflow: hidden;
 }
 #plot { display: block; width: 100%; height: 100%; object-fit: contain; }
+#plot:not([src]) { display: none; }
 
 /* Side panel */
 .side-panel {
@@ -154,7 +156,7 @@ body {
   border-radius: 7px;
   padding: 5px 7px;
   color: var(--text);
-  font-family: var(--mono);
+  font-family: inherit;
   font-size: 12px;
 }
 .config-control:focus { outline: none; border-color: var(--accent); }
@@ -197,8 +199,7 @@ body {
 .group-title {
   margin: 12px 0 6px;
   font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
+  text-transform: capitalize;
   color: var(--muted);
   font-weight: 700;
 }
@@ -227,7 +228,7 @@ body {
   border-radius: 7px;
   padding: 4px 7px;
   color: var(--text);
-  font-family: var(--mono);
+  font-family: inherit;
   font-size: 12px;
 }
 .field input:focus,
@@ -251,7 +252,7 @@ body {
   border-radius: 7px;
   padding: 4px 7px;
   color: var(--text);
-  font-family: var(--mono);
+  font-family: inherit;
   font-size: 12px;
 }
 .field textarea:focus { outline: none; border-color: var(--accent); }
@@ -262,7 +263,7 @@ body {
   padding: 10px 12px;
   border-top: 1px solid var(--border-soft);
 }
-.settings-actions .btn { flex: 1; }
+.settings-actions .btn { flex: auto; white-space: nowrap; }
 .note {
   padding: 0 12px 10px;
   color: var(--muted);