UI Cleanup

ui/src/components/StatusPanels.jsx

@@ -4,8 +4,21 @@ function formatNumber(value, digits = 3) {
   return Number(value ?? 0).toFixed(digits);
 }
 
-export function StatusPanels({ app, performance, runtime, video }) {
+function formatEndpoint(endpoint) {
+  const backend = endpoint?.backend || "none";
+  const device = endpoint?.device ? ` ${endpoint.device}` : "";
+  return `${backend}${device}`;
+}
+
+function formatVideoMode(endpoint) {
+  const resolution = endpoint?.resolution || "Unknown";
+  const frameRate = endpoint?.frameRate ? ` ${endpoint.frameRate}` : "";
+  return `${resolution}${frameRate}`;
+}
+
+export function StatusPanels({ app, performance, runtime, video, videoOutput }) {
   const budgetUsedPercent = Math.max(0, Math.min(100, Number(performance.budgetUsedPercent) || 0));
+  const outputEnabled = Boolean(videoOutput?.enabled);
 
   return (
     <>
@@ -16,8 +29,8 @@ export function StatusPanels({ app, performance, runtime, video }) {
             <span className={`mini-status${runtime.compileSucceeded ? " mini-status--ready" : " mini-status--error"}`}>
               {runtime.compileSucceeded ? "Ready" : "Error"}
             </span>
-            <span className={`mini-status${video.hasSignal ? " mini-status--ready" : " mini-status--error"}`}>
-              {video.hasSignal ? "Signal" : "No signal"}
+            <span className={`mini-status${outputEnabled ? " mini-status--ready" : " mini-status--error"}`}>
+              {outputEnabled ? "Output" : "No output"}
             </span>
           </div>
         </div>
@@ -51,9 +64,13 @@ export function StatusPanels({ app, performance, runtime, video }) {
             <KvList
               variant="rows"
               values={[
-                ["Input mode", video.modeName || "Unknown"],
-                ["Input size", `${video.width || 0} x ${video.height || 0}`],
-                ["Output", `${app.outputVideoFormat || "Unknown"}${app.outputFrameRate ? ` ${app.outputFrameRate}` : ""}`],
+                ["Input", formatEndpoint(app.input)],
+                ["Input mode", formatVideoMode(app.input)],
+                ["Output", formatEndpoint(app.output)],
+                ["Output mode", formatVideoMode(app.output)],
+                ["Output size", `${video.width || 0} x ${video.height || 0}`],
+                ["Output status", videoOutput?.statusMessage || "Unknown"],
+                ["Schedule failures", `${videoOutput?.scheduleFailures ?? 0}`],
               ]}
             />
           </section>