bluepencil: a calibrated quality gate for prose, running entirely in the browser

README.md

@@ -1,10 +1,54 @@
 ---
-title: Bluepencil
-emoji: 📊
-colorFrom: blue
-colorTo: pink
+title: bluepencil
+emoji: ✏️
+colorFrom: indigo
+colorTo: gray
 sdk: static
+app_file: index.html
 pinned: false
+license: mit
+short_description: A prose quality gate with a measured 5% false-positive rate
+tags:
+  - text-classification
+  - writing
+  - ai-detection
+  - evaluation
+  - linter
+  - prose
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# bluepencil
+
+A quality gate for prose. Paste a draft, see which gates fire and why.
+
+It fails 46.9% of machine-written documents and 6.3% of human-written ones. Both numbers were measured on 1,500 held-out documents per class rather than asserted.
+
+## What makes it different from the other detectors on the Hub
+
+Most tools of this kind give you a percentage and no way to check it. This one reports named findings with line numbers and a fix for each, and every threshold behind those findings was calibrated rather than chosen.
+
+The method: measure each statistic across 2,602 human-written documents spanning three registers, informal forum answers, formal scientific abstracts, and multi-paragraph encyclopedia articles, then place the threshold at the percentile that produces a 5% false-positive rate. The panel in the app shows you the measured value against the threshold for every cadence gate, so you can disagree with it on the evidence.
+
+Eighteen gates in two families. Pattern gates point at a span of text. Cadence gates measure the whole document, and those are the ones that catch prose which had every flagged word swapped out and still reads flat.
+
+Everything runs in your browser. Nothing you paste is uploaded anywhere.
+
+## What it will not tell you
+
+Whether the text is true, whether the argument holds, or who wrote it. It measures the surface. A document can pass every gate and still be empty.
+
+It is a gate, not a classifier. Failing means the text contains constructions a particular editorial standard rejects, which is true of plenty of good human writing, as the 6.3% says.
+
+Nine of the eighteen gates fire more often on human writing than machine writing on the validation corpus. That is published rather than hidden, along with the reason: the validation corpus was collected around December 2022 and cannot contain constructions that only became common later.
+
+## Elsewhere
+
+The CLI, the pre-commit hook, the GitHub Action, and the agent skill: [github.com/wolfvswhale/bluepencil](https://github.com/wolfvswhale/bluepencil)
+
+The evaluation harness that produced the thresholds, including its own negative results: [github.com/wolfvswhale/prose-eval](https://github.com/wolfvswhale/prose-eval)
+
+The measurements underneath it all: [prose-cadence-stats](https://huggingface.co/datasets/wolfvswhale/prose-cadence-stats)
+
+Rules derived from Wikipedia's [Signs of AI writing](https://en.wikipedia.org/wiki/Wikipedia:Signs_of_AI_writing), maintained by WikiProject AI Cleanup, plus a house editing standard.
+
+Built by J. Alderman Lyell. MIT licensed.

bluepencil.js

@@ -0,0 +1,210 @@
+/* bluepencil, ported to run in the browser.
+ *
+ * The Python package is the reference implementation. This is a faithful port
+ * of the scoring logic so the Space can be static, which on Hugging Face is
+ * the only tier that is free. It also means nothing you paste leaves your
+ * machine, and there is no cold start.
+ *
+ * Gate definitions and every calibrated threshold are loaded from gates.json,
+ * which is generated from the Python package rather than retyped, so the two
+ * cannot drift.
+ */
+
+const TRAILING_WS = /[ \t]+$/;
+
+/* ---------- markdown stripping -------------------------------------------
+ * Replace non-prose spans with spaces, preserving newlines and total length,
+ * so character offsets still map to the right line and column.
+ */
+function blank(match) {
+  return match.replace(/[^\n]/g, " ");
+}
+
+function stripNonProse(text) {
+  let out = text;
+  const sub = (re) => { out = out.replace(re, blank); };
+
+  sub(/^---\r?\n[\s\S]*?\r?\n---[ \t]*\r?\n/);                 // YAML front matter
+  // fenced code: pair up fences
+  const fence = /^([ \t]*)(`{3,}|~{3,}).*$/gm;
+  const fences = [...out.matchAll(fence)];
+  for (let i = 0; i + 1 < fences.length; i += 2) {
+    const start = fences[i].index;
+    const end = fences[i + 1].index + fences[i + 1][0].length;
+    out = out.slice(0, start) + blank(out.slice(start, end)) + out.slice(end);
+  }
+  const odd = [...out.matchAll(fence)];
+  if (odd.length % 2 === 1) {
+    const s = odd[odd.length - 1].index;
+    out = out.slice(0, s) + blank(out.slice(s));
+  }
+
+  sub(/!\[[^\]]*\]\([^)]*\)/g);                                 // images
+  sub(/\]\([^)\s]+(?:\s+"[^"]*")?\)/g);                         // link targets
+  sub(/`[^`\n]+`/g);                                            // inline code
+  sub(/https?:\/\/\S+/g);                                       // bare urls
+  sub(/<[^>\n]{1,120}>/g);                                      // html tags
+  sub(/^[ \t]{0,3}\|.*\|[ \t]*$/gm);                            // table rows
+  sub(/^[ \t]{0,3}#{1,6}[ \t]+.*$/gm);                          // headings
+  sub(/^[ \t]{0,3}>.*$/gm);                                     // blockquotes
+  return out;
+}
+
+/* ---------- parsing ------------------------------------------------------ */
+
+const WORD_RE = /[A-Za-z0-9][A-Za-z0-9'’-]*/g;
+const SENT_SPLIT = /(?<=[.!?])["')\]]*\s+/;
+
+function words(s) { return s.match(WORD_RE) || []; }
+
+function parse(raw) {
+  const text = stripNonProse(raw);
+  const lineStarts = [0];
+  for (let i = 0; i < raw.length; i++) if (raw[i] === "\n") lineStarts.push(i + 1);
+
+  const paragraphs = [];
+  let offset = 0;
+  for (const chunk of text.split(/\n[ \t]*\n/)) {
+    const trimmed = chunk.trim();
+    if (trimmed) {
+      const sentences = [];
+      let cursor = 0;
+      for (const piece of chunk.split(SENT_SPLIT)) {
+        const t = piece.trim();
+        if (!t) continue;
+        let idx = chunk.indexOf(t, cursor);
+        if (idx === -1) idx = cursor;
+        const w = words(t);
+        if (w.length) sentences.push({ text: t, start: offset + idx, words: w });
+        cursor = idx + t.length;
+      }
+      paragraphs.push({ text: trimmed, sentences });
+    }
+    offset += chunk.length + 2;
+  }
+
+  const sentences = paragraphs.flatMap((p) => p.sentences);
+  return { raw, text, lineStarts, paragraphs, sentences, words: words(text) };
+}
+
+function position(doc, offset) {
+  let lo = 0, hi = doc.lineStarts.length - 1;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    if (doc.lineStarts[mid] <= offset) lo = mid; else hi = mid - 1;
+  }
+  return { line: lo + 1, column: offset - doc.lineStarts[lo] + 1 };
+}
+
+/* ---------- statistics --------------------------------------------------- */
+
+const mean = (a) => a.reduce((x, y) => x + y, 0) / a.length;
+function pstdev(a) {
+  const m = mean(a);
+  return Math.sqrt(a.reduce((s, v) => s + (v - m) ** 2, 0) / a.length);
+}
+function cv(a) {
+  if (a.length < 2) return 0;
+  const m = mean(a);
+  return m === 0 ? 0 : pstdev(a) / m;
+}
+
+const MEASURES = {
+  "flat-cadence": (d) => {
+    const l = d.sentences.map((s) => s.words.length);
+    return l.length < 4 ? null : cv(l);
+  },
+  "uniform-paragraphs": (d) => {
+    const c = d.paragraphs.filter((p) => p.sentences.length).map((p) => p.sentences.length);
+    return c.length < 3 ? null : cv(c);
+  },
+  "no-short-sentences": (d) => {
+    const l = d.sentences.map((s) => s.words.length);
+    return l.length < 4 ? null : l.filter((n) => n <= 8).length / l.length;
+  },
+  "triplet-habit": (d) => {
+    if (d.words.length < 60) return null;
+    const m = d.text.match(/\b[\w'-]+,\s+[\w'-]+,\s+(?:and|or)\s+[\w'-]+/g) || [];
+    return (m.length * 1000) / d.words.length;
+  },
+  "em-dash-habit": (d) => {
+    if (d.words.length < 60) return null;
+    return ((d.text.split("—").length - 1) * 1000) / d.words.length;
+  },
+  "repeated-openers": (d) => {
+    const starts = d.sentences.filter((s) => s.words.length).map((s) => s.words[0].toLowerCase());
+    if (starts.length < 5) return null;
+    let r = 0;
+    for (let i = 1; i < starts.length; i++) if (starts[i] === starts[i - 1]) r++;
+    return r / (starts.length - 1);
+  },
+};
+
+/* ---------- the check ---------------------------------------------------- */
+
+export function check(raw, spec, minWords = 120) {
+  const doc = parse(raw);
+  const findings = [];
+
+  for (const gate of spec.patterns) {
+    if (gate.severity === "off") continue;
+    let hits = [];
+    for (const src of gate.patterns) {
+      const re = new RegExp(src, "gi");
+      for (const m of doc.text.matchAll(re)) hits.push({ start: m.index, span: m[0] });
+    }
+    if (!hits.length) continue;
+
+    // de-duplicate overlapping matches from sibling patterns
+    hits.sort((a, b) => a.start - b.start);
+    const kept = [];
+    let lastEnd = -1;
+    for (const h of hits) {
+      if (h.start >= lastEnd) { kept.push(h); lastEnd = h.start + h.span.length; }
+    }
+
+    if (gate.budget > 0 && doc.words.length) {
+      const allowed = Math.floor((gate.budget * doc.words.length) / 1000);
+      if (kept.length <= allowed) continue;
+    }
+
+    for (const h of kept) {
+      const { line, column } = position(doc, h.start);
+      findings.push({
+        gate: gate.name, severity: gate.severity, kind: "pattern",
+        message: gate.description, suggestion: gate.suggestion,
+        excerpt: h.span.replace(/\s+/g, " ").slice(0, 90),
+        line, column,
+      });
+    }
+  }
+
+  const cadence = [];
+  for (const gate of spec.cadence) {
+    const measure = MEASURES[gate.name];
+    const value = doc.words.length >= Math.max(gate.min_words, minWords) && measure ? measure(doc) : null;
+    const fires = gate.threshold !== null && value !== null &&
+      (gate.direction === "low" ? value < gate.threshold : value > gate.threshold);
+    cadence.push({ ...gate, value, fires, measurable: value !== null });
+    if (fires && gate.severity !== "off") {
+      const cmp = gate.direction === "low" ? "below" : "above";
+      findings.push({
+        gate: gate.name, severity: gate.severity, kind: "cadence",
+        message: `${gate.description} Measured ${value.toFixed(3)}, ${cmp} the calibrated threshold of ${gate.threshold.toFixed(3)}.`,
+        suggestion: gate.suggestion, excerpt: "", line: 0, column: 0,
+      });
+    }
+  }
+
+  const rank = { error: 2, warn: 1, off: 0 };
+  findings.sort((a, b) => (rank[b.severity] - rank[a.severity]) || (a.line - b.line) || (a.column - b.column));
+
+  return {
+    findings, cadence,
+    words: doc.words.length,
+    sentences: doc.sentences.length,
+    paragraphs: doc.paragraphs.length,
+    errors: findings.filter((f) => f.severity === "error").length,
+    warnings: findings.filter((f) => f.severity === "warn").length,
+  };
+}

gates.json

@@ -0,0 +1,233 @@
+{
+ "patterns": [
+  {
+   "name": "negative-parallelism",
+   "description": "'Not just X, it's Y' and its relatives. The most recognizable machine construction.",
+   "suggestion": "State the correct thing. Leave the wrong thing out.",
+   "severity": "error",
+   "budget": 0.0,
+   "patterns": [
+    "not just [^.!?]{1,50}?,? (?:but |it'?s |it is )",
+    "not only\\b[^.!?]{0,60}?\\bbut also\\b",
+    "(?:isn'?t|is not) (?:about|just)\\b[^.!?]{0,50}?[;,] it'?s",
+    "it'?s not\\b[^.!?]{0,40}?[;,] it'?s\\b"
+   ]
+  },
+  {
+   "name": "inflated-significance",
+   "description": "Announcing that something matters instead of showing what it did.",
+   "suggestion": "Show what it did, with a fact. Cut the claim of importance.",
+   "severity": "error",
+   "budget": 0.0,
+   "patterns": [
+    "stands? as a testament",
+    "(?:is|are) a testament to",
+    "plays? a (?:vital|pivotal|crucial|key|significant) role",
+    "underscor\\w+ (?:its|the|their) (?:importance|significance)",
+    "leav\\w+ a lasting (?:impact|impression|legacy)",
+    "watershed moment",
+    "cannot be overstated",
+    "solidif\\w+ (?:its|their) (?:position|place|status)"
+   ]
+  },
+  {
+   "name": "participle-tail",
+   "description": "A clause tacked onto a sentence to fake analysis.",
+   "suggestion": "Explain the consequence concretely, or stop at the fact.",
+   "severity": "error",
+   "budget": 0.0,
+   "patterns": [
+    ",\\s+(?:highlighting|underscoring|illustrating|reflecting|emphasizing|showcasing|paving|cementing|signaling|marking)\\b[^.!?]{0,80}[.!?]"
+   ]
+  },
+  {
+   "name": "editorializing",
+   "description": "Telling the reader that something is worth noting instead of noting it.",
+   "suggestion": "Just write the note.",
+   "severity": "error",
+   "budget": 0.0,
+   "patterns": [
+    "it'?s important to (?:note|remember|understand|consider)",
+    "it is important to (?:note|remember|understand|consider)",
+    "it'?s worth (?:noting|remembering|mentioning)",
+    "no discussion would be complete without",
+    "needless to say"
+   ]
+  },
+  {
+   "name": "hollow-conclusion",
+   "description": "Restating a passage the reader just finished.",
+   "suggestion": "End on the last real thing there is to say. A piece can just stop.",
+   "severity": "error",
+   "budget": 0.0,
+   "patterns": [
+    "\\bin (?:summary|conclusion)\\b",
+    "(?:^|\\n)\\s*overall,",
+    "\\bat the end of the day\\b",
+    "\\bto sum up\\b"
+   ]
+  },
+  {
+   "name": "throat-clearing",
+   "description": "Warming up instead of starting.",
+   "suggestion": "Delete it. Start with the first real sentence.",
+   "severity": "error",
+   "budget": 0.0,
+   "patterns": [
+    "in today'?s (?:fast-paced|modern|digital|ever-changing) world",
+    "in the (?:ever-)?(?:evolving|changing) (?:landscape|world) of",
+    "let'?s (?:dive in|unpack|explore this)",
+    "here'?s a comprehensive"
+   ]
+  },
+  {
+   "name": "engagement-bait",
+   "description": "Nudging the reader instead of informing them.",
+   "suggestion": "Cut it.",
+   "severity": "error",
+   "budget": 0.0,
+   "patterns": [
+    "let that sink in",
+    "read that again",
+    "this changes everything",
+    "here'?s the thing\\b"
+   ]
+  },
+  {
+   "name": "vague-attribution",
+   "description": "Claims with no named source.",
+   "suggestion": "Name the person, paper, or outlet with a date, or drop the claim.",
+   "severity": "error",
+   "budget": 0.0,
+   "patterns": [
+    "\\bstudies (?:show|suggest|indicate)\\b",
+    "\\bexperts (?:say|agree|note)\\b",
+    "\\bresearch (?:shows|suggests|indicates)\\b",
+    "\\b(?:some|many) (?:critics|observers|analysts) (?:argue|note|suggest)\\b",
+    "\\bindustry reports suggest\\b"
+   ]
+  },
+  {
+   "name": "promotional",
+   "description": "Brochure register.",
+   "suggestion": "Replace the adjective with a fact, or cut it.",
+   "severity": "warn",
+   "budget": 0.0,
+   "patterns": [
+    "rich (?:cultural )?(?:heritage|history|tapestry)",
+    "stunning natural beauty",
+    "nestled in the heart of",
+    "must-(?:visit|see|read|have)\\b",
+    "\\bbreathtaking\\b",
+    "\\bworld-class\\b"
+   ]
+  },
+  {
+   "name": "transition-crutch",
+   "description": "Connective tissue that can usually be deleted with no loss.",
+   "suggestion": "Delete it, or use a plain connector: but, so, then.",
+   "severity": "warn",
+   "budget": 4.081,
+   "patterns": [
+    "\\bmoreover\\b",
+    "\\bfurthermore\\b",
+    "\\badditionally\\b",
+    "\\bon top of that\\b",
+    "\\bthat said\\b"
+   ]
+  },
+  {
+   "name": "copula-avoidance",
+   "description": "Swapping 'is' for something weightier.",
+   "suggestion": "Use 'is' or 'was'.",
+   "severity": "warn",
+   "budget": 0.0,
+   "patterns": [
+    "\\bserves? as\\b",
+    "\\bstands? as\\b",
+    "\\brepresents? a\\b"
+   ]
+  },
+  {
+   "name": "assistant-residue",
+   "description": "Chat-assistant phrasing left in published text.",
+   "suggestion": "Delete. This should never reach a reader.",
+   "severity": "error",
+   "budget": 0.0,
+   "patterns": [
+    "\\bas an AI language model\\b",
+    "\\bI hope this helps\\b",
+    "\\blet me know if you (?:need|have)\\b",
+    "\\bfeel free to reach out\\b",
+    "\\bas of my (?:last )?knowledge (?:update|cutoff)\\b",
+    "\\bI hope this (?:message|email) finds you well\\b"
+   ]
+  }
+ ],
+ "cadence": [
+  {
+   "name": "flat-cadence",
+   "description": "Sentence lengths vary less than human writing typically does.",
+   "suggestion": "Rewrite one sentence in every three-sentence run to a different length. A short sentence after two long ones does more than any word swap.",
+   "severity": "warn",
+   "direction": "low",
+   "threshold": 0.2367,
+   "min_words": 120
+  },
+  {
+   "name": "uniform-paragraphs",
+   "description": "Paragraphs are all about the same length.",
+   "suggestion": "Break one paragraph early and let another run long. A one-line paragraph is allowed.",
+   "severity": "warn",
+   "direction": "low",
+   "threshold": 0.5227,
+   "min_words": 120
+  },
+  {
+   "name": "no-short-sentences",
+   "description": "Nothing in the draft is short.",
+   "suggestion": "Cut one sentence down to under eight words. It changes the rhythm of everything around it.",
+   "severity": "warn",
+   "direction": "low",
+   "threshold": null,
+   "min_words": 120
+  },
+  {
+   "name": "triplet-habit",
+   "description": "Reflexive lists of three: 'x, y, and z' over and over.",
+   "suggestion": "Use the number of items that exists. Two is fine. One is often best.",
+   "severity": "warn",
+   "direction": "high",
+   "threshold": 5.1787,
+   "min_words": 120
+  },
+  {
+   "name": "em-dash-habit",
+   "description": "Em dashes used as a default connector.",
+   "suggestion": "Use a comma, a colon, parentheses, or two sentences.",
+   "severity": "warn",
+   "direction": "high",
+   "threshold": 1.4888,
+   "min_words": 120
+  },
+  {
+   "name": "repeated-openers",
+   "description": "Consecutive sentences starting with the same word.",
+   "suggestion": "Vary the opener, unless the repetition is deliberate.",
+   "severity": "warn",
+   "direction": "high",
+   "threshold": 0.2222,
+   "min_words": 120
+  }
+ ],
+ "meta": {
+  "calibrated": true,
+  "corpus": "HC3 human answers (informal) + human scientific abstracts (formal) + wikitext-103 articles (multi-paragraph)",
+  "n_documents": 2602,
+  "informal": 1000,
+  "formal": 1000,
+  "structured": 602,
+  "min_words": 120,
+  "target_fpr": 0.05
+ }
+}

index.html

@@ -1,19 +1,218 @@
 <!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>bluepencil — a calibrated quality gate for prose</title>
+<style>
+  :root {
+    --surface: #fcfcfb; --panel: #ffffff; --line: #e6e6e0;
+    --ink: #0b0b0b; --ink2: #52514e; --muted: #8a8a85;
+    --error: #b4232a; --warn: #a06010; --ok: #2e7d32; --accent: #2a78d6;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --surface: #16161a; --panel: #1d1d21; --line: #2e2e34;
+      --ink: #f2f2ef; --ink2: #b8b7b1; --muted: #7e7e86;
+      --error: #ff6b6b; --warn: #e0a34a; --ok: #6cc46c; --accent: #6aa9f0;
+    }
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0; background: var(--surface); color: var(--ink);
+    font: 15px/1.6 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  }
+  .wrap { max-width: 1180px; margin: 0 auto; padding: 26px 20px 60px; }
+  header { border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin-bottom: 20px; }
+  h1 { font-size: 25px; margin: 0 0 6px; letter-spacing: -0.02em; }
+  .lede { color: var(--ink2); font-size: 15px; margin: 0; max-width: 74ch; }
+  .lede b { color: var(--ink); }
+  .meta { color: var(--muted); font-size: 13px; margin-top: 9px; }
+  .meta a { color: var(--accent); text-decoration: none; }
+  .meta a:hover { text-decoration: underline; }
+
+  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+  @media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
+
+  label { display: block; font-size: 13px; color: var(--ink2); margin-bottom: 7px; font-weight: 600; }
+  textarea {
+    width: 100%; height: 380px; padding: 14px; border: 1px solid var(--line);
+    border-radius: 7px; background: var(--panel); color: var(--ink);
+    font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical;
+  }
+  textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
+
+  .row { display: flex; gap: 9px; align-items: center; margin-top: 11px; flex-wrap: wrap; }
+  button {
+    font: 600 14px/1 inherit; padding: 10px 17px; border-radius: 6px;
+    border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer;
+  }
+  button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+  button:hover { filter: brightness(1.08); }
+  .counts { color: var(--muted); font-size: 13px; margin-left: auto; }
+
+  .verdict { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
+  .verdict small { font-weight: 400; color: var(--ink2); font-size: 14px; }
+
+  .finding {
+    border-left: 3px solid var(--line); background: var(--panel);
+    padding: 11px 13px; margin-bottom: 9px; border-radius: 0 6px 6px 0;
+  }
+  .finding.error { border-left-color: var(--error); }
+  .finding.warn { border-left-color: var(--warn); }
+  .tag {
+    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
+  }
+  .error .tag { color: var(--error); }
+  .warn .tag { color: var(--warn); }
+  .excerpt {
+    font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace;
+    margin: 5px 0; color: var(--ink);
+  }
+  .fix { font-size: 13px; color: var(--ink2); }
+  .clean {
+    padding: 16px; border-radius: 7px; background: var(--panel);
+    border-left: 3px solid var(--ok); font-size: 14px; color: var(--ink2);
+  }
+  .clean b { color: var(--ink); }
+
+  details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
+  summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink2); }
+  table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 11px; }
+  th { text-align: left; color: var(--muted); font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--line); }
+  td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
+  td.num { text-align: right; font-family: ui-monospace, Menlo, monospace; }
+  .fires { color: var(--error); font-weight: 700; }
+  .passes { color: var(--ok); }
+  .na { color: var(--muted); }
+  footer { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
+  footer a { color: var(--accent); text-decoration: none; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <h1>bluepencil</h1>
+    <p class="lede">A quality gate for prose. It fails <b>46.9%</b> of machine-written documents and <b>6.3%</b> of human-written ones, and both numbers were measured rather than picked.</p>
+    <p class="meta" id="calib"></p>
+  </header>
+
+  <div class="cols">
+    <div>
+      <label for="input">Your prose</label>
+      <textarea id="input" placeholder="Paste a draft. Markdown is fine; code blocks, links, tables, and blockquotes are skipped."></textarea>
+      <div class="row">
+        <button class="primary" id="run">Check</button>
+        <button id="ex-machine">Machine-written example</button>
+        <button id="ex-human">Human example</button>
+        <button id="clear">Clear</button>
+        <span class="counts" id="counts"></span>
+      </div>
+    </div>
+    <div>
+      <label>Findings</label>
+      <div id="out"><p style="color:var(--muted);font-size:14px;">Paste something and press Check. Everything runs in your browser; nothing is uploaded.</p></div>
+      <details id="cad-wrap">
+        <summary>Cadence measurements against their calibrated thresholds</summary>
+        <div id="cadence"></div>
+      </details>
+    </div>
+  </div>
+
+  <footer>
+    <p><b style="color:var(--ink)">What this will not tell you.</b> Whether the text is true, whether the argument holds, or who wrote it. It measures the surface. A document can pass every gate and still be empty, and a good writer will sometimes trip three gates deliberately.</p>
+    <p>It is a gate, not a classifier. Failing means the text contains constructions this standard rejects, which is true of plenty of human writing, as the 6.3% says. Nine of the eighteen gates fire more often on human writing than machine writing on the validation corpus; that corpus was collected around December 2022 and cannot contain constructions that only became common later.</p>
+    <p><a href="https://github.com/wolfvswhale/bluepencil">Source and CLI</a> · <a href="https://github.com/wolfvswhale/prose-eval">The harness behind the thresholds</a> · <a href="https://huggingface.co/datasets/wolfvswhale/prose-cadence-stats">The measurements</a> · <a href="https://wolfvswhale.github.io">Write-ups</a></p>
+  </footer>
+</div>
+
+<script type="module">
+import { check } from "./bluepencil.js";
+
+const MACHINE = `In today's fast-paced world, technical documentation is not just a nice-to-have, it's a competitive advantage. It's important to note that teams who invest in clear writing consistently outperform their peers. Studies show a strong correlation between documentation quality and delivery speed.
+
+Our approach stands as a testament to this principle. We built a system that is fast, reliable, and maintainable. Adoption tripled in the first quarter, highlighting the strength of the underlying model. The platform serves as a foundation for everything the team builds.
+
+Moreover, the framework scales effortlessly. Furthermore, onboarding time dropped substantially. Additionally, support tickets decreased across every category we measured.
+
+What makes this approach different is that it represents a fundamental shift in how teams think about knowledge. Documentation is no longer an afterthought, it is a core deliverable. Experts agree that this reframing is essential for organizations navigating the complexity of modern software delivery.
+
+In conclusion, good documentation pays for itself many times over.`;
+
+const HUMAN = `The pump failed on a Tuesday. We pulled the housing and found the seal had cracked along one edge, most likely from the freeze in January that nobody thought to check for afterward.
+
+Replacing it took an hour.
+
+It has run clean since, though I want to check the pressure again after a month of real use, because a seal that fails once in a specific place tends to fail there again. That is the part the manual does not tell you. You learn it by having the same thing break twice and finally looking at where.
+
+There is a second seal on the intake side that I have not touched. It looks fine. But the manual says both were replaced at the same time by whoever owned the place before us, which means both have the same hours on them, and one has already gone. So I ordered two.
+
+We will know by March.`;
+
+const esc = (s) => s.replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c]));
+const spec = await fetch("./gates.json").then((r) => r.json());
+
+const m = spec.meta || {};
+document.getElementById("calib").innerHTML =
+  `Every cadence threshold was set by measuring that statistic across <b style="color:var(--ink)">${(m.n_documents || 0).toLocaleString()} human-written documents</b> ` +
+  `in three registers, then placed at the percentile that yields a <b style="color:var(--ink)">${Math.round((m.target_fpr || 0.05) * 100)}% false-positive rate</b>. ` +
+  `That rate is a property of the tool, not a hope.`;
+
+const $ = (id) => document.getElementById(id);
+
+function render(result) {
+  const out = $("out");
+  if (!result.findings.length) {
+    out.innerHTML = `<div class="clean"><b>Clean.</b> No gate fired. That is not a claim the writing is good, only that it does not contain the constructions this standard rejects.</div>`;
+  } else {
+    const verdict = result.errors ? "FAILS" : "passes with warnings";
+    const colour = result.errors ? "var(--error)" : "var(--warn)";
+    let html = `<div class="verdict" style="color:${colour}">${verdict} <small>${result.errors} error(s), ${result.warnings} warning(s) across ${result.words} words</small></div>`;
+    for (const f of result.findings) {
+      const where = f.line ? `line ${f.line}` : "whole document";
+      const body = f.excerpt
+        ? `<div class="excerpt">&ldquo;${esc(f.excerpt)}&rdquo;</div>`
+        : `<div class="excerpt" style="font-family:inherit">${esc(f.message)}</div>`;
+      html += `<div class="finding ${f.severity}">
+        <div class="tag">${f.severity} &middot; ${esc(f.gate)} &middot; ${where}</div>
+        ${body}<div class="fix">&rarr; ${esc(f.suggestion)}</div></div>`;
+    }
+    out.innerHTML = html;
+  }
+
+  let rows = "";
+  for (const c of result.cadence) {
+    if (c.threshold === null) {
+      rows += `<tr><td>${c.name}</td><td colspan="3" class="na">disabled &mdash; could not be calibrated</td></tr>`;
+    } else if (!c.measurable) {
+      rows += `<tr><td>${c.name}</td><td colspan="3" class="na">not measurable on this text</td></tr>`;
+    } else {
+      rows += `<tr><td>${c.name}</td><td class="num">${c.value.toFixed(3)}</td>
+        <td class="num na">${c.direction === "low" ? "&lt;" : "&gt;"} ${c.threshold.toFixed(3)}</td>
+        <td class="${c.fires ? "fires" : "passes"}">${c.fires ? "fires" : "ok"}</td></tr>`;
+    }
+  }
+  $("cadence").innerHTML = `<table><thead><tr><th>gate</th><th style="text-align:right">measured</th><th style="text-align:right">threshold</th><th></th></tr></thead><tbody>${rows}</tbody></table>`;
+  $("counts").textContent = `${result.words} words · ${result.sentences} sentences · ${result.paragraphs} paragraphs`;
+}
+
+function run() {
+  const text = $("input").value;
+  if (!text.trim()) {
+    $("out").innerHTML = `<p style="color:var(--muted);font-size:14px;">Paste some prose above.</p>`;
+    $("counts").textContent = "";
+    return;
+  }
+  render(check(text, spec));
+}
+
+$("run").onclick = run;
+$("ex-machine").onclick = () => { $("input").value = MACHINE; $("cad-wrap").open = true; run(); };
+$("ex-human").onclick = () => { $("input").value = HUMAN; $("cad-wrap").open = true; run(); };
+$("clear").onclick = () => { $("input").value = ""; run(); };
+$("input").addEventListener("keydown", (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === "Enter") run();
+});
+</script>
+</body>
 </html>