Unify viewer metrics panel

frontend/src/app.ts

@@ -428,9 +428,11 @@ function renderInference(): void {
 }
 
 function renderMetrics(): void {
-  metricsPanel.innerHTML = "";
+  metricsPanel.querySelectorAll<HTMLElement>("[data-dynamic='true']").forEach((node) => {
+    node.remove();
+  });
   const frame = getSelectedFrame();
-  const items: Array<[string, string]> = [["Stage", state.currentStage]];
+  const items: Array<[string, string]> = [];
   if (frame) {
     items.push(["Loss", frame.loss === null ? "n/a" : formatNumber(frame.loss, 4)]);
     for (const [key, value] of Object.entries(frame.terms)) {
@@ -447,6 +449,7 @@ function renderMetrics(): void {
   for (const [label, value] of items) {
     const node = document.createElement("div");
     node.className = "metric-chip";
+    node.dataset.dynamic = "true";
     node.innerHTML = `<strong>${label}</strong><span>${value}</span>`;
     metricsPanel.appendChild(node);
   }

src/repixelizer/gui_static/app.js

@@ -327,9 +327,11 @@ function renderInference() {
     }
 }
 function renderMetrics() {
-    metricsPanel.innerHTML = "";
+    metricsPanel.querySelectorAll("[data-dynamic='true']").forEach((node) => {
+        node.remove();
+    });
     const frame = getSelectedFrame();
-    const items = [["Stage", state.currentStage]];
+    const items = [];
     if (frame) {
         items.push(["Loss", frame.loss === null ? "n/a" : formatNumber(frame.loss, 4)]);
         for (const [key, value] of Object.entries(frame.terms)) {
@@ -347,6 +349,7 @@ function renderMetrics() {
     for (const [label, value] of items) {
         const node = document.createElement("div");
         node.className = "metric-chip";
+        node.dataset.dynamic = "true";
         node.innerHTML = `<strong>${label}</strong><span>${value}</span>`;
         metricsPanel.appendChild(node);
     }

src/repixelizer/gui_static/index.html

@@ -146,19 +146,16 @@
                 <canvas id="rightCanvas"></canvas>
               </figure>
             </div>
-            <div class="viewer-metrics">
-              <div class="metrics-toolbar">
-                <div class="metrics-status">
-                  <strong id="statusBadge" class="status-badge">Idle</strong>
-                  <p id="statusText" class="status-text metrics-status-text">Waiting for input.</p>
-                </div>
-                <div class="scrubber">
-                  <label for="stepSlider">Solver Step</label>
-                  <input id="stepSlider" type="range" min="0" max="0" step="1" value="0" disabled />
-                  <span id="stepValue" class="step-value">No frames yet</span>
-                </div>
+            <div id="metricsPanel" class="metrics-panel stats-grid">
+              <div class="metric-chip metric-status-block">
+                <span id="statusBadge" class="status-badge">Idle</span>
+                <p id="statusText" class="status-text metrics-status-text">Waiting for input.</p>
+              </div>
+              <div class="metric-chip scrubber metric-scrubber">
+                <label for="stepSlider">Solver Step</label>
+                <input id="stepSlider" type="range" min="0" max="0" step="1" value="0" disabled />
+                <span id="stepValue" class="step-value">No frames yet</span>
               </div>
-              <div id="metricsPanel" class="metrics-panel stats-grid"></div>
             </div>
           </section>
 

src/repixelizer/gui_static/styles.css

@@ -262,9 +262,7 @@ p {
 .brand,
 .brand-lockup,
 .copy-stack,
-.viewer-heading,
-.viewer-metrics,
-.metrics-status {
+.viewer-heading {
   display: grid;
   gap: 10px;
 }
@@ -544,22 +542,6 @@ p {
   align-content: start;
 }
 
-.viewer-metrics {
-  gap: 12px;
-}
-
-.metrics-toolbar {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
-  gap: 16px 20px;
-  align-items: start;
-}
-
-.metrics-status {
-  min-width: 0;
-  align-content: start;
-}
-
 .metrics-status-text {
   max-width: 42ch;
 }
@@ -632,6 +614,17 @@ p {
   gap: 10px;
 }
 
+.metric-status-block {
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.metric-scrubber {
+  min-width: 0;
+  grid-column: 1 / -1;
+}
+
 .stats-grid {
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
 }
@@ -772,21 +765,11 @@ select:focus-visible {
   outline-offset: 2px;
 }
 
-@media (min-width: 1500px) {
-  .metrics-toolbar {
-    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
-  }
-}
-
 @media (max-width: 1200px) {
   .app-grid,
   .editor-stage {
     grid-template-columns: 1fr;
   }
-
-  .metrics-toolbar {
-    grid-template-columns: 1fr;
-  }
 }
 
 @media (max-width: 940px) {