Cases: show each case's input (prompt, or reference image and instruction) above the outputs

cases.html

@@ -68,6 +68,19 @@ table.cs tr.on{background:var(--accent-wash)}table.cs td.n{color:var(--text-mute
 table.cs td,table.cs th{white-space:nowrap}.panel code{font-size:.82em;background:var(--bg-alt);padding:0 .3em;border-radius:4px}
 .viewer .hint b{font-weight:700}
 
+
+.in-head{display:flex;align-items:baseline;gap:10px;margin:0 0 .6rem}.in-head b{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
+.in-head span{font-size:.85rem;color:var(--text-muted)}
+.case-input{background:var(--bg-alt);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:1rem 1.2rem 1.1rem}
+.in-prompt{margin:0;font-family:"DM Sans",Inter,sans-serif;font-size:1rem;line-height:1.7;color:var(--text-h);border-left:3px solid var(--primary);padding:.1rem 0 .1rem .9rem}
+.in-i2s{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.2rem;align-items:start}
+.in-refs{display:grid;gap:.8rem}.in-refs figure{margin:0}.in-refs img{width:100%;display:block;border-radius:8px;border:1px solid var(--line)}
+.in-refs figcaption{font-size:.8rem;color:var(--text-muted);margin-top:.35rem}
+.in-task h5{margin:0 0 .4rem;font-size:.8rem;font-weight:700;color:var(--text-h)}.in-task h5+.in-prompt{margin-bottom:1rem}
+.in-task p{font-size:.9rem;color:var(--text-secondary);margin:0 0 .8rem}
+.in-open{border:1px solid var(--primary);background:#fff;color:var(--primary-dark);border-radius:8px;padding:.45rem .9rem;font:600 .85rem Inter,sans-serif;cursor:pointer}
+.in-open:hover{background:var(--primary);color:#fff}
+@media(max-width:900px){.in-i2s{grid-template-columns:1fr}}
 </style><script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"}}</script></head><body>
 <nav class="navbar"><a class="navbar-brand" href="index.html"><svg viewBox="0 0 32 32" aria-hidden="true"><defs><linearGradient id="gi" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#92400e"/><stop offset="1" stop-color="#d97706"/></linearGradient></defs><rect x="1" y="1" width="30" height="30" rx="8" fill="url(#gi)"/><path d="M16 6.5 25 11.5v9L16 25.5 7 20.5v-9z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/><path d="M7 11.5 16 16.5 25 11.5M16 16.5v9" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/></svg>Code4Scene</a><ul class="navbar-links"><li class=""><a href="index.html#leaderboard">Leaderboard</a></li><li class="hide-sm"><a href="index.html#takeaways">Takeaways</a></li><li class=""><a href="cases.html" class=on>Cases in 3D</a></li><li class="hide-sm"><a href="https://github.com/SimWorld-AI/Code4Scene" target="_blank" rel="noopener"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg> Code</a></li><li><a class="btn-nav-primary" href="https://simworld.org/" target="_blank" rel="noopener"><img src="img/simworld-logo.png" alt="">SimWorld Home</a></li></ul></nav>
 <section class="alt" style="padding-top:calc(var(--nav-h) + 3rem);padding-bottom:3rem"><div class="container">
@@ -76,6 +89,8 @@ table.cs td,table.cs th{white-space:nowrap}.panel code{font-size:.82em;backgroun
 evaluator scored that scene. 6 cases, 41 scenes in 3D. Pick a case, then an agent.</p></div>
 <div class="casebar" id="casebar"></div>
 <div class="card" style="padding:1.4rem 1.5rem"><div class="case-head"><h3 id="ctitle"></h3><p><b id="ctrack"></b> · <span id="cnote"></span></p></div>
+<div class="case-input" id="cinput"></div>
+<div class="in-head" style="margin-top:1.4rem"><b>Output</b><span>each agent's saved scene, and how the evaluator scored it</span></div>
 <div class="casegrid"><div><div class="viewer" id="viewer"></div><div class="vtabs" id="vtabs"></div><div class="agents" id="agents"></div></div><div id="side"></div></div></div>
 <div class="card" style="margin-top:1.5rem;padding:1.4rem 1.5rem"><div class="sub-title">Every agent on this case</div>
 <div class="sub-desc">The evaluator's scores for all 14 agents on the selected case. Click a row to open that agent's scene.</div><div class="board-wrap" id="ctable"></div></div>
@@ -208,7 +223,6 @@ function drawViewer() {
     if (a.judge) tabs.push(["judge", "Judge's evidence"]);
   } else {
     tabs.push(["res", "Repair, target view"]); if (cur.gt) tabs.push(["gt", "Ground truth"]); if (cur.input) tabs.push(["in", "Corrupted input"]);
-    cur.refs.forEach((r, i) => tabs.push(["ref" + i, `Reference ${i + 1}`]));
   }
   if (!tabs.find(t => t[0] === view)) view = tabs.length ? tabs[0][0] : null;
   $("vtabs").innerHTML = tabs.map(([k, l]) => `<button data-v="${k}" class="${k === view ? "on" : ""}">${l}</button>`).join("");
@@ -245,7 +259,6 @@ function drawSide() {
     h += `<div class="panel"><h4>What the corruption did</h4>${cur.corruption.map(o => `<div class="find mismatch"><span class="m">·</span><span>${say(o)}</span></div>`).join("")}
       <p class="rk" style="margin-top:8px">The agent sees only the corrupted scene and the reference image. Repair F1 counts the target actors it restores to the ground truth; changes to anything else count against it.</p></div>`;
   }
-  h += `<div class="panel"><h4>${cur.track === "t2s" ? "Prompt" : "Task"}</h4><div class="prompt">${cur.prompt}</div></div>`;
   $("side").innerHTML = h;
 }
 function drawAgents() {
@@ -271,8 +284,25 @@ function pick(id) {
   $("cnote").textContent = cur.note;
   document.querySelectorAll("#casebar button").forEach(b => b.classList.toggle("on", b.dataset.id === id));
   history.replaceState(null, "", `#${id}`);
+  drawInput();
   select(cur.agents.find(a => a.glb) || cur.agents[0]);
 }
+// what every agent was given, shown as given: the prompt, or the reference image(s) and the instruction
+function drawInput() {
+  if (cur.track === "t2s") {
+    $("cinput").innerHTML = `<div class="in-head"><b>Input</b><span>the same prompt for all 14 agents, with an empty level and the content pack's asset catalog</span></div>
+      <blockquote class="in-prompt">${cur.prompt}</blockquote>`;
+    return;
+  }
+  const refs = cur.refs.map((r, i) => `<figure><img src="${r}" alt="Reference image ${i + 1}"><figcaption>Reference image${cur.refs.length > 1 ? " " + (i + 1) : ""}, as given to the agent</figcaption></figure>`).join("");
+  $("cinput").innerHTML = `<div class="in-head"><b>Input</b><span>the same for all 14 agents</span></div>
+    <div class="in-i2s"><div class="in-refs">${refs}</div>
+    <div class="in-task"><h5>Instruction</h5><blockquote class="in-prompt">${cur.prompt}</blockquote>
+      <h5>Starting scene</h5><p>A copy of the human-assembled scene with a few actors corrupted. The agent sees it only through the engine.</p>
+      ${cur.input_glb ? '<button class="in-open" id="open-input">Open the corrupted scene in 3D →</button>' : ""}</div></div>`;
+  const b = $("open-input");
+  if (b) b.onclick = () => { view = "3din"; drawViewer(); $("viewer").scrollIntoView({ behavior: "smooth", block: "center" }); };
+}
 // one row per setting: its name, then its cases; each case says how many of its scenes open in 3D
 const btn = c => { const n = c.agents.filter(a => a.glb).length + (c.gt_glb ? 1 : 0) + (c.input_glb ? 1 : 0);
   return `<button data-id="${c.id}"><span>${c.title}</span><small>${n} scenes</small></button>`; };