fix: polish local studio demo presentation

README.md

@@ -416,6 +416,12 @@ What works today:
 Current non-goals remain unchanged: no DB, queue, upload service, production auth, billing, or production SaaS worker orchestration.
 Jobs and imported Studio evidence are in-memory and reset when the local server process restarts.
 
+Recommended portfolio demo flow:
+
+1. Open `/studio`.
+2. Click `Load Demo Evidence` to show the stable ONNX Runtime CPU vs TensorRT Jetson comparison.
+3. Use Run / Import only as supporting controls that demonstrate how the local UI extends the CLI/API workflow.
+
 ---
 
 ## CI / Benchmarks

inferedgelab/studio/static/app.js

@@ -701,17 +701,41 @@ function compareStat(label, value) {
 function compareSummaryCard(metric, speedup, base, newer, sameBackend = false, overall = "unknown") {
   const card = createElement("article", `compare-card highlight ${compareTone(overall)}`);
   const diff = formatLatencyDiff(metric);
-  const faster = sameBackend ? "Same backend" : speedup ? `${formatNumber(speedup)}x faster` : "speedup unavailable";
-  const note = sameBackend ? "Import a TensorRT and an ONNX Runtime result to compare backend speedup." : `Latency diff: ${diff}`;
+  const speedLabel = compareSpeedLabel(speedup, sameBackend);
+  const note = sameBackend
+    ? "Import a TensorRT and an ONNX Runtime result to compare backend speedup."
+    : compareSpeedNote(speedup, diff);
   card.append(
     createElement("p", "caption", `Latency comparison / ${overall || "unknown"}`),
-    createElement("h3", "", faster),
+    createElement("h3", "", speedLabel),
     createElement("p", "body-text", note),
     createElement("p", "caption", `${normalizedBackendKey(base) || "-"} -> ${normalizedBackendKey(newer) || "-"}`),
   );
   return card;
 }
 
+function compareSpeedLabel(speedup, sameBackend = false) {
+  if (sameBackend) {
+    return "Same backend";
+  }
+  const ratio = Number(speedup);
+  if (!Number.isFinite(ratio) || ratio <= 0) {
+    return "speedup unavailable";
+  }
+  if (ratio >= 1) {
+    return `${formatNumber(ratio)}x faster`;
+  }
+  return `${formatNumber(1 / ratio)}x slower`;
+}
+
+function compareSpeedNote(speedup, diff) {
+  const ratio = Number(speedup);
+  if (Number.isFinite(ratio) && ratio > 0 && ratio < 1) {
+    return `New result is slower. Latency diff: ${diff}`;
+  }
+  return `Latency diff: ${diff}`;
+}
+
 function errorCompareCard(message) {
   const card = createElement("article", "compare-card empty error-card");
   card.append(

inferedgelab/studio/static/style.css

@@ -455,7 +455,9 @@ body.file-mode .file-protocol-warning {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 12px;
+  min-width: 0;
   width: 100%;
   border: 1px solid var(--line);
   border-radius: 10px;
@@ -474,13 +476,22 @@ body.file-mode .file-protocol-warning {
 }
 
 .job-main {
+  flex: 1 1 auto;
   display: grid;
   gap: 4px;
   min-width: 0;
 }
 
+.job-row .state-pill {
+  flex: 0 0 auto;
+  max-width: 100%;
+  padding-inline: 10px;
+}
+
 .job-main strong,
+.job-main .caption,
 .metric-value {
+  min-width: 0;
   overflow-wrap: anywhere;
 }
 

tests/test_studio_routes.py

@@ -130,6 +130,8 @@ def test_studio_static_assets_include_redesigned_ui_contracts():
     assert "jobDisplayName" in app_text
     assert "jobCaption" in app_text
     assert "compareStatList" in app_text
+    assert "compareSpeedLabel" in app_text
+    assert "New result is slower" in app_text
     assert 'aiguard: hasGuardEvidence ? "completed" : "optional"' in app_text
     assert "#0b0f14" in style_text
     assert "grid-template-columns" in style_text
@@ -141,6 +143,9 @@ def test_studio_static_assets_include_redesigned_ui_contracts():
     assert ".compare-card.improvement" in style_text
     assert ".demo-card" in style_text
     assert ".compare-stat-list" in style_text
+    assert ".job-row .state-pill" in style_text
+    assert "flex-wrap: wrap" in style_text
+    assert "flex: 0 0 auto" in style_text
     assert "justify-content: flex-start" in style_text