paperlint 13.3.2 → 13.5.0

package/skills/build-label-page/scripts/label-page.ts

@@ -40,6 +40,7 @@
  *     "seed": 7,                            fixes the order; change it and every id changes
  *     "groups": {"python": "Python"},
  *     "labeller_knows": ["python"],         optional: items of other groups are not put on the page
+ *     "familiarity": false,                 optional: no "how well do you know" question (approval page)
  *     "familiarity_question": "How well do you know {group}?",          optional
  *     "questions": [{"id": "label", "text": "Is this correct?", "short": "correct?",
  *                    "options": [{"value": "yes", "label": "Yes", "example": "one real case",
@@ -52,7 +53,11 @@
  *     "practice": [{"body": "…", "expected": {"label": "yes"}, "why": "one line"}, …],   3 or more
  *     "practice_round": 1,                  optional; raise it after rewording, the practice reopens
  *     "items": [{"source_id": "case-0412-b", "group": "python", "body": "…", "code": "…",
- *                "context": "…"}]
+ *                "context": "…",
+ *                "unit": {"id": "a.md:12", "text": "the whole line", "part": 1, "of": 2}}]
+ *                                           unit: optional; one requirement of a line that holds
+ *                                           several. Every part of the line is an item, in one group;
+ *                                           id (never shown) tells two places with the same words apart.
  *   }
  *
  * TypeScript, compiled beside itself to `label-page.js` by `npm run build`: a consumer runs the skill

package/skills/build-label-page/scripts/page-template.html

@@ -90,6 +90,9 @@ pre { overflow-x: auto; background: var(--surface); border: 1px solid var(--line
     editing: {},      // item id -> the question id the labeller tapped "Change" on
     mineWhy: {},      // item id -> the reasons this page has just written (ahead of the store)
     draftWhy: {},     // item id -> {question id: text typed and not yet saved}
+    whyTimers: {},    // "<item id>|<question id>" -> the pending save of a reason being typed
+    whyBoxes: {},     // "<item id>|<question id>" -> the reason box of the last render
+    typingIn: null,   // the item whose reason box has the keyboard: shown even when complete
     mine: {},         // item/group key -> the answers this page has just written (ahead of the store)
     inflight: {},     // item/group key -> writes not yet confirmed
     failed: {},       // item/group key -> error code of the last refused write
@@ -99,6 +102,7 @@ pre { overflow-x: auto; background: var(--surface); border: 1px solid var(--line
   };
   var db = null;
   var chains = {};
+  var WHY_PAUSE_MS = 800;
 
   try { if (localStorage.getItem("label-filter") === "next") state.filter = "next"; } catch (e) {}
 
@@ -142,7 +146,11 @@ pre { overflow-x: auto; background: var(--surface); border: 1px solid var(--line
     }).filter(function (q) { return q !== null; });
   }
   function itemDone(id) { return missingFor(id).length === 0; }
+  // A page built with "familiarity": false asks no group anything (an approval page): every group
+  // counts as rated, and neither the question nor "how well you know it" is ever shown.
+  var ASKS_FAMILIARITY = DATA.familiarity.length > 0;
   function familiarity(g) {
+    if (!ASKS_FAMILIARITY) return null;
     var d = state.mine["group:" + g] || state.groups[g];
     return d && valid(DATA.allowed.familiarity, d.familiarity) ? d.familiarity : undefined;
   }
@@ -197,6 +205,8 @@ pre { overflow-x: auto; background: var(--surface); border: 1px solid var(--line
   }
   // A reason saves when the labeller leaves the box (the text equivalent of a tap).
   function setReason(id, qid, text) {
+    clearTimeout(state.whyTimers[id + "|" + qid]);
+    delete state.whyTimers[id + "|" + qid];
     if (!canWrite()) return;
     var why = Object.assign({}, reasonsOf(id));
     why[qid] = text;
@@ -302,6 +312,11 @@ pre { overflow-x: auto; background: var(--surface); border: 1px solid var(--line
     card.appendChild(rich("p", "body", item.body));
     if (item.code) card.appendChild(codeBlock(item.code));
     if (item.context) card.appendChild(rich("p", "muted", item.context));
+    // One requirement of a line that holds several: which one, and the whole line it came from.
+    if (item.unit) {
+      card.appendChild(el("p", "muted", "From the line (requirement " + item.unit.part + " of " + item.unit.of + "):"));
+      card.appendChild(rich("p", "quote", item.unit.text));
+    }
     var a = answersOf(item.id);
     askOne(card, a, state.editing[item.id], function (q, v) {
       delete state.editing[item.id];
@@ -315,8 +330,16 @@ pre { overflow-x: auto; background: var(--surface); border: 1px solid var(--line
       var draft = draftOf(item.id, q.id);
       box.value = draft !== undefined ? draft : reasonsOf(item.id)[q.id] || "";
       box.disabled = off;
-      // Every keystroke is kept as a draft, so a render from the store never erases unsaved text.
-      box.addEventListener("input", function () { keepDraft(item.id, q.id, box.value); });
+      // Every keystroke is kept as a draft, so a render from the store never erases unsaved text,
+      // and a pause in typing saves it: a reason that waits for the box to lose focus is lost when
+      // the labeller leaves the page from inside the box (measured: the store kept the drop alone).
+      box.addEventListener("input", function () {
+        keepDraft(item.id, q.id, box.value);
+        var k = item.id + "|" + q.id;
+        clearTimeout(state.whyTimers[k]);
+        state.whyTimers[k] = setTimeout(function () { setReason(item.id, q.id, box.value); }, WHY_PAUSE_MS);
+      });
+      state.whyBoxes[item.id + "|" + q.id] = box;
       box.addEventListener("change", function () { setReason(item.id, q.id, box.value); });
       card.appendChild(box);
     });
@@ -407,20 +430,56 @@ pre { overflow-x: auto; background: var(--surface); border: 1px solid var(--line
   function groupBlock(g, off, onlyOpen) {
     var sec = el("section");
     sec.appendChild(el("h2", "", g.label));
-    var fam = el("div", "ask");
-    fam.appendChild(el("p", "q", DATA.familiarity_question.replace("{group}", g.label)));
-    fam.appendChild(options(DATA.familiarity, familiarity(g.id), function (v) { setFamiliarity(g.id, v); }, off));
-    var gs = state.groups[g.id];
-    fam.appendChild(statusLine("group:" + g.id,
-      familiarity(g.id) === undefined ? [{ text: "an answer" }] : [], gs && gs.savedAt));
-    sec.appendChild(fam);
+    if (ASKS_FAMILIARITY) {
+      var fam = el("div", "ask");
+      fam.appendChild(el("p", "q", DATA.familiarity_question.replace("{group}", g.label)));
+      fam.appendChild(options(DATA.familiarity, familiarity(g.id), function (v) { setFamiliarity(g.id, v); }, off));
+      var gs = state.groups[g.id];
+      fam.appendChild(statusLine("group:" + g.id,
+        familiarity(g.id) === undefined ? [{ text: "an answer" }] : [], gs && gs.savedAt));
+      sec.appendChild(fam);
+    }
     groupItems(g.id).forEach(function (i) {
-      if (onlyOpen && itemDone(i.id)) return;
+      if (onlyOpen && itemDone(i.id) && i.id !== state.typingIn) return;
       sec.appendChild(itemCard(i, off));
     });
     return sec;
   }
+  // Every reason typed and not yet saved goes to the store now: the page is being left.
+  function flushReasons() {
+    Object.keys(state.whyTimers).forEach(function (k) {
+      var at = k.indexOf("|"), id = k.slice(0, at), qid = k.slice(at + 1);
+      var draft = draftOf(id, qid);
+      if (draft === undefined) { clearTimeout(state.whyTimers[k]); delete state.whyTimers[k]; return; }
+      setReason(id, qid, draft);
+    });
+  }
+  // The page is rebuilt on every store snapshot; the reason box being typed in gets the keyboard back,
+  // with its caret where it was, or the rest of the sentence goes nowhere.
+  // Chrome fires "change" on a focused box while a render is removing it, and that change saves and
+  // renders: a render started inside a render would paint with no box focused and hide the item being
+  // typed in. It is skipped; the write it started renders again when the store confirms it.
+  var painting = false;
   function render() {
+    if (painting) return;
+    painting = true;
+    try { renderOnce(); } finally { painting = false; }
+  }
+  function renderOnce() {
+    var typing = null;
+    Object.keys(state.whyBoxes).forEach(function (k) {
+      var b = state.whyBoxes[k];
+      if (document.activeElement === b) typing = { key: k, start: b.selectionStart, end: b.selectionEnd };
+    });
+    state.whyBoxes = {};
+    // Under "Next unanswered" the save that completes an item would hide it, box and all, mid-sentence:
+    // the item being typed in stays on the page until the labeller leaves its box.
+    state.typingIn = typing ? typing.key.slice(0, typing.key.indexOf("|")) : null;
+    paint();
+    var again = typing && state.whyBoxes[typing.key];
+    if (again) { again.focus(); again.setSelectionRange(typing.start, typing.end); }
+  }
+  function paint() {
     var off = !canWrite();
     var done = DATA.items.filter(function (i) { return itemDone(i.id); }).length;
     var total = DATA.items.length;
@@ -482,7 +541,8 @@ pre { overflow-x: auto; background: var(--surface); border: 1px solid var(--line
       progress.appendChild(note);
     }
     DATA.groups.forEach(function (g) {
-      if (onlyOpen && groupDone(g.id)) return;
+      var typingHere = groupItems(g.id).some(function (i) { return i.id === state.typingIn; });
+      if (onlyOpen && groupDone(g.id) && !typingHere) return;
       app.appendChild(groupBlock(g, off, onlyOpen));
     });
   }
@@ -499,6 +559,10 @@ pre { overflow-x: auto; background: var(--surface); border: 1px solid var(--line
   }
   function broken() { state.store = "none"; render(); }
 
+  document.addEventListener("visibilitychange", function () {
+    if (document.visibilityState !== "visible") flushReasons();
+  });
+  window.addEventListener("pagehide", flushReasons);
   render();
   if (!window.claude || typeof window.claude.use !== "function") { broken(); return; }
   window.claude.use("db").then(function (store) {