Upload viewer

index.html

@@ -1,19 +1,292 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>SFT v4 Dataset Viewer</title>
+<link rel="stylesheet" href="vendor/katex.min.css" />
+<script src="vendor/katex.min.js"></script>
+<script src="vendor/marked.min.js"></script>
+<style>
+  :root{
+    --bg:#fbfbfd; --panel:#fff; --ink:#16181d; --muted:#5d6470; --line:#e3e6ec;
+    --accent:#3b5bdb; --accent-soft:#eef2ff; --mr:#7048e8; --mr-soft:#f3f0ff;
+    --exec:#0b7285; --exec-soft:#e7f5f8; --warn:#c92a2a; --ok:#2b8a3e;
+    --code:#f4f5f8;
+  }
+  @media (prefers-color-scheme: dark){
+    :root:not([data-theme="light"]){
+      --bg:#101216; --panel:#171a20; --ink:#e6e8ec; --muted:#9aa2b1; --line:#272b33;
+      --accent:#8ea2ff; --accent-soft:#1c2333; --mr:#b197fc; --mr-soft:#221c33;
+      --exec:#66d9e8; --exec-soft:#12262b; --warn:#ff8787; --ok:#69db7c;
+      --code:#1c2027;
+    }
+  }
+  :root[data-theme="dark"]{
+    --bg:#101216; --panel:#171a20; --ink:#e6e8ec; --muted:#9aa2b1; --line:#272b33;
+    --accent:#8ea2ff; --accent-soft:#1c2333; --mr:#b197fc; --mr-soft:#221c33;
+    --exec:#66d9e8; --exec-soft:#12262b; --warn:#ff8787; --ok:#69db7c;
+    --code:#1c2027;
+  }
+  *{box-sizing:border-box}
+  body{margin:0;background:var(--bg);color:var(--ink);
+       font:15px/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
+  header{position:sticky;top:0;z-index:20;background:var(--panel);
+         border-bottom:1px solid var(--line);padding:12px 20px;
+         display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
+  header h1{margin:0;font-size:16px;letter-spacing:-.01em}
+  header .sub{color:var(--muted);font-size:13px}
+  header .spacer{flex:1}
+  .layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:0;
+          align-items:start;min-height:calc(100vh - 52px)}
+  @media (max-width:900px){ .layout{grid-template-columns:1fr} #side{position:static;height:auto;max-height:none;border-right:0;border-bottom:1px solid var(--line)} }
+  #side{position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto;
+        border-right:1px solid var(--line);background:var(--panel);padding:10px}
+  .item{padding:9px 10px;border-radius:8px;cursor:pointer;border:1px solid transparent}
+  .item:hover{background:var(--accent-soft)}
+  .item.on{background:var(--accent-soft);border-color:var(--accent)}
+  .item .pid{font:12px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;
+             word-break:break-all;color:var(--ink)}
+  .item .meta{margin-top:3px;display:flex;gap:6px;flex-wrap:wrap}
+  .tag{font-size:11px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);
+       color:var(--muted);white-space:nowrap}
+  .tag.d{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
+  .tag.s{background:var(--exec-soft);border-color:transparent;color:var(--exec)}
+  .tag.cap{background:var(--mr-soft);border-color:transparent;color:var(--mr)}
+  main{padding:20px;min-width:0;max-width:1080px}
+  .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
+        padding:16px 18px;margin-bottom:14px}
+  h2{font-size:15px;margin:0 0 10px;letter-spacing:-.01em}
+  h3{font-size:13px;margin:16px 0 6px;color:var(--muted);
+     text-transform:uppercase;letter-spacing:.06em}
+  .prose{overflow-wrap:anywhere}
+  .prose p{margin:.5em 0}
+  .prose pre{background:var(--code);padding:10px 12px;border-radius:8px;overflow-x:auto}
+  .prose code{background:var(--code);padding:1px 5px;border-radius:4px;
+              font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
+  .prose pre code{background:none;padding:0}
+  .katex{font-size:1.01em}
+  .katex-display{overflow-x:auto;overflow-y:hidden;margin:8px 0}
+  .rawtex{color:var(--warn)}
+  .layer{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden}
+  .layer>summary{cursor:pointer;padding:10px 14px;background:var(--accent-soft);
+                 font-weight:600;font-size:14px;list-style:none;display:flex;
+                 gap:10px;align-items:center;flex-wrap:wrap}
+  .layer>summary::-webkit-details-marker{display:none}
+  .layer>summary::before{content:"▸";color:var(--accent);font-size:12px}
+  .layer[open]>summary::before{content:"▾"}
+  .layer .body{padding:12px 14px}
+  .mr{background:var(--mr-soft);border-left:3px solid var(--mr);
+      border-radius:0 8px 8px 0;padding:12px 14px;margin:6px 0}
+  .mr .lab{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
+           color:var(--mr);font-weight:700;margin-bottom:6px}
+  .ex{background:var(--exec-soft);border-left:3px solid var(--exec);
+      border-radius:0 8px 8px 0;padding:10px 12px;margin:8px 0}
+  .ex .lab{font-size:11px;color:var(--exec);font-weight:700;margin-bottom:4px}
+  .dir{font-style:italic;color:var(--muted);margin-bottom:6px}
+  .frag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;margin:0 4px 4px 0}
+  .frag.sel{background:var(--ok);color:#fff}
+  .frag.rej{background:var(--muted);color:var(--bg)}
+  .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px}
+  .kv dt{color:var(--muted)}
+  .kv dd{margin:0}
+  details.raw>summary{cursor:pointer;color:var(--muted);font-size:13px;padding:4px 0}
+  .note{color:var(--muted);font-size:13px}
+  button.theme{background:none;border:1px solid var(--line);border-radius:8px;
+               color:var(--muted);padding:4px 10px;cursor:pointer;font-size:12px}
+</style>
+</head>
+<body>
+<header>
+  <h1>SFT v4 Dataset Viewer</h1>
+  <span class="sub" id="hdr">loading…</span>
+  <span class="spacer"></span>
+  <button class="theme" onclick="toggleTheme()">theme</button>
+</header>
+
+<div class="layout">
+  <nav id="side"></nav>
+  <main id="main"><p class="note">Loading trajectories…</p></main>
+</div>
+
+<script>
+const DATA = "data/trajectories.json";
+let state = { rows: [], i: 0 };
+
+function toggleTheme(){
+  const cur = document.documentElement.getAttribute("data-theme");
+  const dark = cur ? cur === "dark"
+    : window.matchMedia("(prefers-color-scheme: dark)").matches;
+  document.documentElement.setAttribute("data-theme", dark ? "light" : "dark");
+}
+const escapeHtml = s => (s||"").replace(/[&<>"']/g, c =>
+  ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));
+
+// Math is extracted to placeholders before markdown runs, then restored, so
+// marked never mangles LaTeX (and $ inside code stays untouched).
+const MATH = [
+  { re: /\$\$([\s\S]+?)\$\$/g, display: true },
+  { re: /\\\[([\s\S]+?)\\\]/g, display: true },
+  { re: /\\\(([\s\S]+?)\\\)/g, display: false },
+  { re: /(?<![\\$])\$(?!\$)([^\n$]+?)\$(?!\$)/g, display: false },
+];
+function katexSpan(tex, display){
+  if (window.katex){
+    try { return katex.renderToString(tex, {displayMode:display, throwOnError:false, output:"html"}); }
+    catch(e){}
+  }
+  return `<code class="rawtex">${escapeHtml(tex)}</code>`;
+}
+function md(s){
+  if(!s) return "";
+  const spans=[]; let text=s;
+  for(const {re,display} of MATH){
+    text = text.replace(re,(_m,tex)=>{ const t=`@@M${spans.length}@@`;
+      spans.push(katexSpan(tex.trim(),display)); return t; });
+  }
+  let html;
+  try { html = window.marked ? marked.parse(text,{breaks:true}) : "<pre>"+escapeHtml(text)+"</pre>"; }
+  catch(e){ html = "<pre>"+escapeHtml(text)+"</pre>"; }
+  return html.replace(/@@M(\d+)@@/g,(_m,i)=>spans[+i] ?? "");
+}
+function prose(t){ const d=document.createElement("div"); d.className="prose";
+  d.innerHTML=md(t||""); return d; }
+
+// The MR target ships as "<think>…</think>" followed by <direction> tags. Split
+// them so the reasoning reads as prose and the commitments stand out.
+function splitTarget(t){
+  const out={think:"",dirs:[]};
+  if(!t) return out;
+  const m = t.match(/<think>([\s\S]*?)<\/think>/);
+  out.think = m ? m[1].trim() : t;
+  const rest = m ? t.slice(m.index + m[0].length) : "";
+  const re = /<direction>([\s\S]*?)<\/direction>/g; let d;
+  while((d = re.exec(rest))) out.dirs.push(d[1].trim());
+  return out;
+}
+
+function sidebar(){
+  const nav=document.getElementById("side"); nav.innerHTML="";
+  state.rows.forEach((r,i)=>{
+    const el=document.createElement("div");
+    el.className="item"+(i===state.i?" on":"");
+    const capped = r.outcome.excluded_reason === "guided_step_cap";
+    el.innerHTML =
+      `<div class="pid">${escapeHtml(r.problem_id)}</div>
+       <div class="meta">
+         <span class="tag d">depth ${r.outcome.productive_layers ?? "?"}</span>
+         ${r.score!=null?`<span class="tag s">score ${r.score.toFixed(2)}</span>`:""}
+         ${capped?`<span class="tag cap">step-cap</span>`:""}
+       </div>`;
+    el.onclick=()=>{ state.i=i; sidebar(); render(); window.scrollTo(0,0); };
+    nav.appendChild(el);
+  });
+}
+
+function render(){
+  const r = state.rows[state.i];
+  const m = document.getElementById("main");
+  m.innerHTML="";
+
+  const head=document.createElement("div"); head.className="card";
+  head.innerHTML=`<h2>${escapeHtml(r.problem_id)}</h2>
+    <dl class="kv">
+      <dt>source</dt><dd>${escapeHtml(r.source||"—")}</dd>
+      <dt>run</dt><dd>${escapeHtml(r.run)}</dd>
+      <dt>outcome</dt><dd>${escapeHtml(r.outcome.excluded_reason||"COMPLETE")}
+        ${r.outcome.terminated?" (self-terminated)":""}</dd>
+      <dt>layers</dt><dd>${r.outcome.productive_layers ?? "?"}</dd>
+      <dt>judge</dt><dd>${r.score!=null?r.score.toFixed(2):"—"}</dd>
+    </dl>`;
+  head.appendChild(Object.assign(document.createElement("h3"),{textContent:"Problem"}));
+  head.appendChild(prose(r.problem));
+  if(r.rubric){
+    const d=document.createElement("details"); d.className="raw";
+    d.innerHTML="<summary>rubric</summary>";
+    d.appendChild(prose(r.rubric)); head.appendChild(d);
+  }
+  m.appendChild(head);
+
+  r.layers.forEach(L=>{
+    const det=document.createElement("details"); det.className="layer";
+    if(L.layer_idx===0) det.open=true;
+    const kept=L.reviews.filter(x=>x.retain).length;
+    det.innerHTML=`<summary>Layer ${L.layer_idx}
+      <span class="tag">${L.executions.length} executions</span>
+      <span class="tag">${kept} retained</span></summary>`;
+    const body=document.createElement("div"); body.className="body";
+
+    if(L.mr_target){
+      const t=splitTarget(L.mr_target);
+      const box=document.createElement("div"); box.className="mr";
+      box.innerHTML=`<div class="lab">MR reasoning — the SFT target for this layer</div>`;
+      box.appendChild(prose(t.think));
+      if(t.dirs.length){
+        const h=document.createElement("h3"); h.textContent="committed directions";
+        box.appendChild(h);
+        t.dirs.forEach(d=>box.appendChild(prose("- "+d)));
+      }
+      if(L.mr_fragments.length){
+        const f=document.createElement("div"); f.style.marginTop="8px";
+        f.innerHTML = L.mr_fragments.map(x=>
+          `<span class="frag ${x.disposition==="selected"?"sel":"rej"}">${escapeHtml(x.candidate_id||"?")} · ${escapeHtml(x.disposition||"")}</span>`
+        ).join("");
+        box.appendChild(f);
+      }
+      body.appendChild(box);
+    }
+
+    L.executions.forEach(e=>{
+      const box=document.createElement("div"); box.className="ex";
+      box.innerHTML=`<div class="lab">execution ${escapeHtml(e.candidate_id||"")}</div>
+                     <div class="dir">${escapeHtml(e.direction||"")}</div>`;
+      const d=document.createElement("details"); d.className="raw";
+      d.innerHTML="<summary>execution report</summary>";
+      d.appendChild(prose(e.report)); box.appendChild(d);
+      body.appendChild(box);
+    });
+
+    const kepts=L.reviews.filter(x=>x.retain&&x.summary);
+    if(kepts.length){
+      const h=document.createElement("h3"); h.textContent="retained into the frontier";
+      body.appendChild(h);
+      kepts.forEach(x=>body.appendChild(prose(x.summary)));
+    }
+    det.appendChild(body); m.appendChild(det);
+  });
+
+  if(r.termination_target){
+    const c=document.createElement("div"); c.className="card";
+    c.innerHTML="<h2>Termination decision</h2>";
+    const t=splitTarget(r.termination_target);
+    c.appendChild(prose(t.think)); m.appendChild(c);
+  }
+  if(r.final_answer){
+    const c=document.createElement("div"); c.className="card";
+    c.innerHTML="<h2>Final answer</h2>";
+    c.appendChild(prose(r.final_answer));
+    if(r.judge_explanation){
+      const d=document.createElement("details"); d.className="raw";
+      d.innerHTML="<summary>judge</summary>";
+      d.appendChild(prose(r.judge_explanation)); c.appendChild(d);
+    }
+    m.appendChild(c);
+  }
+}
+
+fetch(DATA).then(r=>r.json()).then(j=>{
+  state.rows = j.trajectories || [];
+  const d = state.rows.map(r=>r.outcome.productive_layers).filter(x=>x!=null);
+  const s = state.rows.map(r=>r.score).filter(x=>x!=null);
+  document.getElementById("hdr").textContent =
+    `${state.rows.length} trajectories · depth ${Math.min(...d)}–${Math.max(...d)}`
+    + (s.length?` · judge ${Math.min(...s).toFixed(1)}–${Math.max(...s).toFixed(1)}`:"")
+    + " · MR shown is the F1-ordered (repaired) target";
+  sidebar(); render();
+}).catch(e=>{
+  document.getElementById("main").innerHTML =
+    `<p class="note">Failed to load ${DATA}: ${escapeHtml(String(e))}</p>`;
+});
+</script>
+</body>
 </html>