Render LaTeX (KaTeX) + format CoT into readable numbered steps

index.html

@@ -63,11 +63,9 @@
     display:flex;align-items:center;gap:7px}
   .q{font-weight:600;margin:10px 0 2px;white-space:pre-wrap;font-size:15.5px}
   .lbl{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:18px 0 7px}
-  .prev{white-space:pre-wrap;background:var(--chip);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
-    padding:10px 13px;font-size:12.5px;line-height:1.5;max-height:168px;overflow:auto}
+  .prev{background:var(--chip);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
+    padding:11px 14px;max-height:240px;overflow:auto}
   details{margin:7px 0 0} summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:600;user-select:none}
-  pre.cot{white-space:pre-wrap;background:var(--chip);border-radius:10px;padding:13px;margin:9px 0 0;
-    max-height:380px;overflow:auto;font-size:12.5px;line-height:1.55}
   /* prediction stat tiles */
   .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:11px}
   .tile{border:1px solid var(--border);border-radius:12px;padding:11px 13px;background:var(--surface)}
@@ -89,7 +87,19 @@
   .mem pre{white-space:pre-wrap;font-size:12.5px;line-height:1.55;margin:0;max-height:300px;overflow:auto}
   .foot{color:var(--muted);font-size:12.5px;margin-top:36px;border-top:1px solid var(--border);padding-top:16px}
   a{color:var(--accent)}
+  /* readable CoT / prefix: prose steps, not a monospace blob */
+  .cotwrap{background:var(--chip);border-radius:10px;padding:14px;margin:9px 0 0;max-height:460px;overflow:auto}
+  .sc{white-space:pre-wrap;font-size:13px;line-height:1.62;overflow-wrap:anywhere}
+  .step{display:flex;gap:11px;margin:0 0 13px} .step:last-child{margin-bottom:0} .step .sc{flex:1;min-width:0}
+  .sn{flex:none;width:22px;height:22px;border-radius:50%;background:var(--track);color:var(--muted);font-size:11px;
+    font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;margin-top:1px}
+  .prevnote{color:var(--muted);font-size:11.5px;margin:0 0 8px}
+  .memtext{white-space:pre-wrap;font-size:12.5px;line-height:1.55;margin:0;max-height:300px;overflow:auto;overflow-wrap:anywhere}
+  .katex{font-size:1.04em} .katex-display{margin:.5em 0;overflow-x:auto;overflow-y:hidden}
 </style>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>
 </head>
 <body><div class="wrap">
   <header class="hero">
@@ -143,6 +153,14 @@ const ORDER=["full_CoT","teacher","base","instruct","base-lr5e-5","instruct-lr1e
 function esc(s){return (s||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");}
 function dot(s){return `<span class="dot" style="background:var(${SRC[s].cvar})"></span>`;}
 function stat(err){ if(err<0.15) return {v:"--st-good",g:"✓"}; if(err<0.35) return {v:"--st-warn",g:"≈"}; return {v:"--st-bad",g:"✗"}; }
+function steps(txt){ return (txt||"").split(/\n\n+/).map(s=>s.replace(/\s+$/,"")).filter(s=>s.trim().length); }
+function fmtSteps(txt){ const p=steps(txt);
+  return p.length ? p.map((s,i)=>`<div class="step"><span class="sn">${i+1}</span><div class="sc">${esc(s)}</div></div>`).join("")
+                  : `<div class="sc">${esc(txt||"")}</div>`; }
+function renderMath(el){ if(el && window.renderMathInElement){ try{ renderMathInElement(el,{delimiters:[
+  {left:"$$",right:"$$",display:true},{left:"\\[",right:"\\]",display:true},
+  {left:"$",right:"$",display:false},{left:"\\(",right:"\\)",display:false}],
+  throwOnError:false, errorColor:"var(--ink2)", ignoredClasses:["meta","ttok","tname","py"]}); }catch(e){} } }
 
 // source legend
 document.getElementById("srcleg").innerHTML =
@@ -172,7 +190,9 @@ document.getElementById("exsec").insertAdjacentHTML("beforeend"," ("+DATA.exampl
 for(const e of DATA.examples){
   const V=e.value, corr=e.correct;
   const cotTok=e.reprs.full_CoT&&e.reprs.full_CoT.tok?("~"+e.reprs.full_CoT.tok+" tok"):"";
-  const pfx=e.prefix||""; const tail=pfx.length>700?"…"+pfx.slice(-700):pfx;
+  const pfx=e.prefix||""; const _st=steps(pfx);
+  const prevNote=_st.length>2?`showing the last 2 of ${_st.length} steps — expand for the full trace`:"";
+  const prevHtml=(_st.slice(-2).map(s=>`<div class="sc">${esc(s)}</div>`).join(""))||`<div class="sc">${esc(pfx)}</div>`;
   const vpillStyle = corr? "background:color-mix(in srgb,var(--st-good) 15%,transparent);color:var(--st-good)"
                          : "background:color-mix(in srgb,var(--st-bad) 15%,transparent);color:var(--st-bad)";
   let tiles='';
@@ -188,7 +208,7 @@ for(const e of DATA.examples){
   let mems='';
   for(const s of ORDER){ if(s==="full_CoT") continue; const r=e.reprs[s]; if(!r) continue;
     mems+=`<div class="mem"><h4><span class="mh">${dot(s)}${SRC[s].label}</span>`
-      +`<span class="py">V̂ ${r.pyes.toFixed(2)} · ~${r.tok} tok</span></h4><pre>${esc(r.text)}</pre></div>`;
+      +`<span class="py">V̂ ${r.pyes.toFixed(2)} · ~${r.tok} tok</span></h4><div class="memtext">${esc(r.text)}</div></div>`;
   }
   ex.insertAdjacentHTML("beforeend",
     `<div class="card">
@@ -198,13 +218,19 @@ for(const e of DATA.examples){
       </div>
       <div class="q">${esc(e.question)}</div>
       <div class="lbl">Partial reasoning trace — the prefix V is computed for (${cotTok})</div>
-      <div class="prev">${esc(tail)}</div>
-      <details><summary>Show the full partial trace</summary><pre class="cot">${esc(pfx)}</pre></details>
+      <div class="prev">${prevNote?('<div class="prevnote">'+prevNote+'</div>'):''}${prevHtml}</div>
+      <details><summary>Show the full partial trace</summary><div class="cotwrap">${fmtSteps(pfx)}</div></details>
       <div class="lbl">Value prediction V̂ — read from each representation of this prefix</div>
       <div class="tiles">${tiles}</div>
       <div class="lbl">Mementos — compressions of the prefix above</div>
       <div class="mems">${mems}</div>
     </div>`);
 }
+// render LaTeX after KaTeX (deferred) loads; do the heavy full-CoT lazily on first expand
+window.addEventListener("load", ()=>{
+  document.querySelectorAll(".q,.prev,.tiles,.mems,.def,.take,.legrow").forEach(renderMath);
+  document.querySelectorAll("details").forEach(d=> d.addEventListener("toggle", ()=>{
+    if(d.open && !d._rendered){ renderMath(d.querySelector(".cotwrap")); d._rendered=1; } }));
+});
 </script>
 </body></html>