name lock, checkpoint toasts, modern selects, header export

review.html

@@ -34,8 +34,23 @@ button.drop { border-color: var(--drop); } button.drop.on { background: var(--dr
 button.nav { padding: 10px 14px; }
 #mine { color: var(--mut); font-size: 13px; margin-top: 8px; min-height: 20px; }
 kbd { background: var(--chip); border-radius: 4px; padding: 1px 6px; font-size: 12px; }
+select { appearance: none; -webkit-appearance: none; background-color: var(--card);
+  border: 1px solid var(--line); border-radius: 8px; padding: 8px 30px 8px 12px; cursor: pointer;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: right 10px center; max-width: 220px; }
+select:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--hl); outline-offset: 1px; }
+button { transition: background .12s ease, transform .05s ease; }
+button:active:not(:disabled) { transform: scale(.97); }
+button:disabled { cursor: not-allowed; }
+input[type="text"], input:not([type]) { font: inherit; color: var(--fg); background: var(--bg);
+  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
+#who { max-width: 170px; }
+#who.locked { background: var(--chip); color: var(--mut); border-style: dashed; }
+#lockBtn { padding: 8px 10px; }
+#toast { position: fixed; top: 110px; left: 50%; transform: translateX(-50%); background: var(--card);
+  border: 1px solid var(--hl); border-radius: 12px; padding: 12px 16px; display: none; gap: 12px;
+  align-items: center; z-index: 50; box-shadow: 0 8px 30px rgba(0,0,0,.25); font-size: 14px; }
 footer { position: fixed; bottom: 0; left: 0; right: 0; background: var(--card); border-top: 1px solid var(--line); padding: 8px 16px; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--mut); }
-footer .sp { flex: 1; }
 </style>
 </head>
 <body>
@@ -51,10 +66,12 @@ footer .sp { flex: 1; }
     <option value="rafael">rafael · 240</option>
   </select>
   <select id="src" onchange="reset()"></select>
-  <input id="who" placeholder="your name to annotate" autocomplete="off"
-    style="font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-width:190px">
+  <input id="who" placeholder="your name to annotate" autocomplete="off">
+  <button id="lockBtn" onclick="toggleLock()" title="lock / change name">unlock</button>
+  <button onclick="exp()" title="export rulings now">export</button>
   <button onclick="theme()" title="toggle theme">◐</button>
 </header>
+<div id="toast" role="status"></div>
 <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>
@@ -129,8 +146,25 @@ function loadWho() {
   });
   const ht = $('hubtok');
   if (ht) { ht.value = localStorage.getItem('review_hubtok') || ''; ht.addEventListener('input', () => localStorage.setItem('review_hubtok', ht.value.trim())); }
+  if (localStorage.getItem('review_locked') === '1' && who()) setLocked(true);
   paintGate();
 }
+function setLocked(on) {
+  $('who').disabled = on;
+  $('who').classList.toggle('locked', on);
+  $('lockBtn').textContent = on ? 'locked' : 'unlock';
+  localStorage.setItem('review_locked', on ? '1' : '0');
+}
+function toggleLock() {
+  if ($('who').disabled) {
+    if (confirm('Change annotator name? Existing rulings stay under the old name.')) {
+      setLocked(false); $('who').focus();
+    }
+    return;
+  }
+  if (!who()) { needName(); return; }
+  setLocked(true);
+}
 function paintGate() {
   const ok = who().length > 0;
   $('who').style.borderColor = ok ? '' : 'var(--drop)';
@@ -228,12 +262,10 @@ function renderRef(sp) {
   }
   $('ref').innerHTML = ref;
 }
-let lastSaved = '';
 function lightMeta() {
   const mine = R[span().key];
   $('bKeep').className = 'keep' + (mine === 'DATA_MENTION' ? ' on' : '');
   $('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();
 }
@@ -242,8 +274,27 @@ function paintRuled() {
   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) + '%' : '';
+  const pct = tot ? Math.round(100 * done / tot) : 0;
+  $('ruledPct').textContent = tot ? pct + '%' : '';
+  // checkpoint nudge at each new 10% mark (per dataset)
+  const mark = Math.floor(pct / 10) * 10;
+  const mem = 'review_decile_' + $('ds').value;
+  if (tot && mark >= 10 && +(localStorage.getItem(mem) || 0) < mark) {
+    localStorage.setItem(mem, String(mark));
+    toast(`${mark}% annotated — export a checkpoint?`, true);
+  }
+}
+let toastTimer = null;
+function toast(msg, withExport) {
+  const t = $('toast');
+  t.innerHTML = `<span>${esc(msg)}</span>` +
+    (withExport ? `<button onclick="exp();hideToast()">export now</button>` : '') +
+    `<button onclick="hideToast()">dismiss</button>`;
+  t.style.display = 'flex';
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(hideToast, 15000);
 }
+function hideToast() { $('toast').style.display = 'none'; }
 function bindMarks(o) {
   document.querySelectorAll('#passage mark').forEach(m => m.onclick = () => {
     show(i, o.spans.findIndex(x => x.key === m.dataset.k));
@@ -287,6 +338,7 @@ async function rule(v) {
   RQ[k] = $('ds').value;
   localStorage.setItem(LS, JSON.stringify(R));
   localStorage.setItem('review_queues', JSON.stringify(RQ));
+  setLocked(true);
   paintGate();
   const entry = {key: k, ruling: v, queue: $('ds').value, annotator: who()};
   let saved = 'this browser only';