ruled-progress bar

review.html

@@ -55,6 +55,11 @@ footer .sp { flex: 1; }
     style="font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-width:190px">
   <button onclick="theme()" title="toggle theme">◐</button>
 </header>
+<div style="display:flex;align-items:center;gap:10px;padding:6px 16px;background:var(--card);border-bottom:1px solid var(--line);font-size:13px;color:var(--mut)">
+  <span id="ruledLab" style="white-space:nowrap">0 ruled</span>
+  <div style="flex:1;height:6px;background:var(--chip);border-radius:3px;overflow:hidden"><div id="ruledFill" style="height:100%;width:0;background:var(--keep)"></div></div>
+  <span id="ruledPct"></span>
+</div>
 <main>
   <div class="meta"><span id="key"></span><span id="surface"></span></div>
   <div id="passage"></div>
@@ -198,6 +203,8 @@ function render() {
     p = b;
   }
   pts.push(esc(o.text.slice(p, hi)));
+  if (hi < L) pts.push('<span style="color:var(--mut)">…</span>');
+  pts.push(`<div style="color:var(--mut);font-size:12px;margin-top:8px">window ${lo}–${hi} of ${L} · ${wlabel()} · <kbd>[</kbd><kbd>]</kbd> slide · <kbd>-</kbd><kbd>+</kbd> size</div>`);
   plo = lo; phi = hi;
   $('passage').innerHTML = pts.join('');
   bindMarks(o);
@@ -228,6 +235,14 @@ function lightMeta() {
   $('bDrop').className = 'drop' + (mine === 'NON_MENTION' ? ' on' : '');
   $('mine').textContent = mine ? `your ruling: ${mine === 'DATA_MENTION' ? 'keep' : 'drop'}` : '';
   $('count').textContent = Object.keys(R).length + ' ruled' + (lastSaved ? ' · last save: ' + lastSaved : '');
+  paintRuled();
+}
+function paintRuled() {
+  let tot = 0, done = 0;
+  for (const o of ITEMS) for (const x of o.spans) { tot++; if (R[x.key]) done++; }
+  $('ruledFill').style.width = (tot ? 100 * done / tot : 0) + '%';
+  $('ruledLab').textContent = `${done}/${tot} mentions ruled`;
+  $('ruledPct').textContent = tot ? Math.round(100 * done / tot) + '%' : '';
 }
 function bindMarks(o) {
   document.querySelectorAll('#passage mark').forEach(m => m.onclick = () => {