@myrtilleio/redline 0.1.0

package/client/keyboard.js

@@ -0,0 +1,110 @@
+// ---------------------------------------------------------------- keyboard
+
+const HOVER_KEYS = ['ArrowUp', 'ArrowDown', 'Enter'];
+
+// Select mode: ↑/↓ walk the highlight up and back down the tree, Enter comments on it.
+function hoverKey(key) {
+  if (state.mode !== 'select' || !state.hoverEl || state.composer) return false;
+  if (key === 'ArrowUp') {
+    const parent = state.hoverEl.parentElement;
+    if (parent && parent !== document.documentElement) {
+      state.hoverStack.unshift(parent);
+      showHover(parent);
+    }
+  } else if (key === 'ArrowDown') {
+    if (state.hoverStack.length > 1) {
+      state.hoverStack.shift();
+      showHover(state.hoverStack[0]);
+    }
+  } else if (key === 'Enter') {
+    if (state.retarget) return retargetTo(state.hoverEl, { dx: 1, dy: 0 }), true;
+    const r = state.hoverEl.getBoundingClientRect();
+    openComposer({ el: state.hoverEl, draft: { kind: 'note', anchor: { dx: 1, dy: 0 } }, point: { x: r.right, y: r.top } });
+    hoverBox.style.display = 'none';
+  } else return false;
+  return true;
+}
+
+function inkKey(v) {
+  setVerdict(v);
+  toast(`Ink: ${inkOf(v).name}`);
+}
+
+function isTyping(e) {
+  const t = e.composedPath()[0];
+  return t && (t.isContentEditable || /^(input|textarea|select)$/i.test(t.tagName));
+}
+
+addEventListener(
+  'keydown',
+  (e) => {
+    state.viaKeyboard = true;
+    // The backslash key shows the page without Redline and back, from anywhere; while previewing, no other key is ours.
+    if (e.key === '\\' && !e.metaKey && !e.ctrlKey && !isTyping(e)) {
+      e.preventDefault();
+      return setPreviewMode(!state.preview);
+    }
+    if (state.preview) return;
+    if (checkKey(e)) return; // checking: one key per verdict
+    const mod = e.metaKey || e.ctrlKey;
+    // Ctrl/⌘+Enter saves the open note wherever focus is (e.g. after editing text on the page).
+    if (mod && e.key === 'Enter' && state.composer && !eventIsOurs(e)) {
+      e.preventDefault();
+      state.composer.commit();
+      return;
+    }
+    if (state.collapsed || isTyping(e) || e.altKey) return;
+    if (mod && e.key.toLowerCase() === 'z' && state.mode === 'pen' && state.lastStrokeIds.length) {
+      e.preventDefault();
+      const id = state.lastStrokeIds.pop();
+      const a = state.annotations.find((x) => x.id === id);
+      if (a) remove(a);
+      return;
+    }
+    if (mod) return;
+    // Enter right after drawing: write a note for that mark.
+    if (e.key === 'Enter' && !mod && !state.composer && noteFromChip()) return e.preventDefault();
+    if (HOVER_KEYS.includes(e.key) && state.mode === 'select' && !state.composer) {
+      // In Devices view the hovered element lives in a frame, which may not have focus.
+      if (state.devices) {
+        e.preventDefault();
+        return forwardToFrames({ type: 'hoverKey', key: e.key });
+      }
+      if (hoverKey(e.key)) return e.preventDefault();
+    }
+    const actions = {
+      v: () => setMode('browse'),
+      b: () => setMode('select'), // Box
+      s: () => setMode('select'), // Box (old muscle memory: Select)
+      p: () => setMode('pen'),
+      // Inks: red change · green keep · amber idea. The gesture usually says it
+      // (✓ keeps, ✗ changes), so these are for the rest.
+      1: () => inkKey('fix'),
+      2: () => inkKey('good'),
+      3: () => inkKey('idea'),
+      h: toggleHidden,
+      d: toggleDevices,
+      e: () => hasPreviews() && togglePreviews(),
+      l: togglePanel,
+      c: copyPrompt,
+      // Innermost first: an open image, a pending move, the note, the panel, then select/pen mode.
+      Escape: () =>
+        menuEl ? closeMenu()
+        : galleryEl ? closeGallery()
+        : state.retarget ? ((state.retarget = null), toast('Move cancelled'))
+        : state.composer ? closeComposer(true)
+        : state.panel ? togglePanel()
+        : setMode('browse'),
+    };
+    const fn = actions[e.key] || actions[e.key.toLowerCase()];
+    if (fn && (state.mode !== 'browse' || e.key !== 'Escape' || state.composer || state.panel || galleryEl || menuEl)) {
+      e.preventDefault();
+      e.stopPropagation();
+      fn();
+    }
+  },
+  true,
+);
+
+// Anything done with the pointer after a key press is animated normally again.
+addEventListener('pointerdown', () => (state.viaKeyboard = false), true);

package/client/panel.js

@@ -0,0 +1,222 @@
+// ---------------------------------------------------------------- panel
+
+function togglePanel() {
+  if (FRAME) return post(window.parent, { type: 'key', action: 'panel' });
+  if (!state.panel && !state.viaKeyboard) {
+    panel.classList.add('opening');
+    setTimeout(() => panel.classList.remove('opening'), 700);
+  }
+  state.panel = !state.panel;
+  renderPanel();
+  renderBar();
+}
+
+// What else is attached to an item, at a glance.
+function itemBadges(a) {
+  const badges = [];
+  if (a.edits) badges.push(`✎ ${a.edits.props.length + (a.edits.text ? 1 : 0)} edit${a.edits.props.length + (a.edits.text ? 1 : 0) === 1 ? '' : 's'}${a.edits.scope === 'all' ? ' · all similar' : ''}`);
+  if (a.chosen) badges.push(`Picked option ${a.chosen}`);
+  else if (a.variants && a.variants.length) badges.push(`${a.variants.length} options to review`);
+  else if (a.request) badges.push('Options requested');
+  if (a.references && a.references.length) badges.push(`${a.references.length} reference${a.references.length === 1 ? '' : 's'}`);
+  return badges.length ? h('div', {}, badges.map((b) => h('span', { class: 'badge' }, b))) : null;
+}
+
+function renderPanel() {
+  panel.hidden = !state.panel;
+  if (!state.panel) return;
+  const list = state.annotations;
+  // Grouped by whose turn it is: yours to send, with the agent, yours to check, done.
+  const groups = [
+    { key: 'check', title: 'Fixed · to review', items: list.filter((a) => a.status === 'resolved' && !a.accepted) },
+    { key: 'changed', title: 'Changed · you approved these', items: list.filter(guardBroken) },
+    { key: 'draft', title: 'Your marks · not sent yet', items: list.filter((a) => a.draft) },
+    { key: 'sent', title: 'With your agent', items: list.filter((a) => !a.draft && a.status !== 'resolved') },
+    { key: 'done', title: 'Accepted', items: list.filter((a) => a.accepted && !guardBroken(a)), collapsed: true },
+  ];
+  // What came back goes through Check; everything else opens its note.
+  const open = (a) => ((a.status === 'resolved' && !a.accepted) || guardBroken(a) ? startCheck(a.id) : focusAnnotation(a));
+  const kindOf = (a) => (a.kind === 'stroke' ? describeMark(a.stroke && a.stroke.paths).replace(/ \(.*\)$/, '') : a.region ? 'box' : 'element');
+  const item = (a) =>
+    // A div, not a button: it contains buttons of its own (thumbnails, Compare).
+    h('div', {
+      class: 'item',
+      style: `--i:${Math.min(list.indexOf(a), 10)}`,
+      role: 'button',
+      tabindex: '0',
+      onclick: () => open(a),
+      onkeydown: (e) => e.key === 'Enter' && e.target === e.currentTarget && open(a),
+    },
+      h('i', { class: 'ink-dot', style: `background:${COLORS[a.verdict]}` }),
+      h('span', {},
+        h('b', {}, a.comment || (a.kind === 'stroke' ? markMeaning(a).split(':')[0] : inkOf(a.verdict).name),
+          a.viewport && madeElsewhere(a) ? h('span', { class: 'width-tag' }, `${a.viewport.w}px`) : null),
+        h('code', {}, `${kindOf(a)} · ${a.target ? a.target.selector : 'page'}`),
+        itemBadges(a),
+        a.status === 'resolved' ? h('div', { class: 'res' }, a.resolution || 'Fixed') : null,
+        a.status === 'resolved' && a.shots ? thumbStrip(a) : null,
+      ),
+    );
+  const group = (g) =>
+    g.items.length
+      ? h('section', { class: 'group' },
+          h('h3', {}, g.title, h('span', { class: 'n' }, g.items.length)),
+          g.collapsed && !state.showDone
+            ? h('button', { class: 'btn small', onclick: () => ((state.showDone = true), renderPanel()) }, 'Show')
+            : g.items.map(item))
+      : null;
+  const empty = !list.length;
+  fill(panel,
+    h('header', {},
+      h('h2', {}, 'Review ', h('code', {}, PAGE)),
+      h('button', { class: 'btn icon', title: 'Close (L)', 'aria-label': 'Close notes', html: ICONS.close, onclick: togglePanel }),
+    ),
+    roundReport(),
+    list.some(madeElsewhere)
+      ? h('label', { class: 'elsewhere-toggle' },
+          h('input', { type: 'checkbox', checked: state.showElsewhere, onchange: (e) => ((state.showElsewhere = e.target.checked), positionMarks()) }),
+          `Show marks made at other screen widths`)
+      : null,
+    h('div', { class: 'items' },
+      empty
+        ? h('div', { class: 'empty', html: 'Nothing here yet.<br><kbd>P</kbd> draw on the page, or click something to say why.<br>Then press <b>Send</b>.' })
+        : groups.map(group),
+    ),
+    h('footer', {},
+      drafts().length
+        ? h('button', { class: 'btn primary', onclick: sendRound }, `Send ${drafts().length} to your agent`)
+        : h('div', { class: 'row' },
+            h('button', { class: 'btn', onclick: copyPrompt, html: ICONS.copy + ' Copy for AI' }),
+            h('button', { class: 'btn', onclick: downloadPrompt, html: ICONS.download + ' .md' })),
+      h('div', { class: 'hint' }, SERVER
+        ? 'Send hands your marks to your agent (.redline/FEEDBACK.md). It fixes them and reports back here.'
+        : 'No server: Send copies your marks for your AI chat.'),
+    ),
+  );
+}
+
+// What you've typed into the report but not saved yet. The panel re-renders whenever
+// anything changes (a screenshot arrives, the agent resolves a mark), so the fields
+// are rebuilt from this, and keep their focus.
+let reportDraft = null; // { n, fields: { reading, 0, 1, 2 }, focus }
+
+// The agent's report on the last round: what it did, how it reads the page
+// (correctable), and at most three questions (answerable). One place, one time.
+function roundReport() {
+  const r = state.rounds && state.rounds[state.rounds.length - 1];
+  if (!r || !r.returnedAt) return null;
+  if (!reportDraft || reportDraft.n !== r.n) reportDraft = { n: r.n, fields: {}, focus: null };
+  const draft = reportDraft;
+  const field = (key, saved, attrs) => {
+    const t = h('textarea', attrs);
+    t.value = key in draft.fields ? draft.fields[key] : saved || '';
+    t.addEventListener('input', () => (draft.fields[key] = t.value));
+    t.addEventListener('focus', () => (draft.focus = key));
+    t.addEventListener('blur', () => draft.focus === key && (draft.focus = null));
+    if (draft.focus === key) queueMicrotask(() => t.isConnected && (t.focus({ preventScroll: true }), t.setSelectionRange(t.value.length, t.value.length)));
+    return t;
+  };
+  const correction = field('reading', r.readingCorrection, { rows: 2, placeholder: 'Not quite? Say what this page is really for…' });
+  const answers = (r.questions || []).map((q, i) => field(i, q.answer, { rows: 1, placeholder: 'Your answer…' }));
+  const saveBtn = h('button', {
+    class: 'btn small primary',
+    onclick: async () => {
+      await store.answerRound(r.n, { readingCorrection: correction.value.trim(), answers: answers.map((t) => t.value.trim()) });
+      draft.fields = {};
+      toast('Your answers go out with the next round');
+      await load();
+    },
+  }, 'Save answers');
+  // How the round went, at a glance: fixes accepted first time, and whether approvals held.
+  const judged = (r.accepted || 0) + (r.redone || 0);
+  const checked = state.annotations.filter((a) => a.guard && a.guard.now && a.guard.now.at >= r.returnedAt);
+  const broken = checked.filter(guardBroken).length;
+  const stats = [
+    judged ? h('span', { class: 'stat' }, h('b', {}, `${Math.round((100 * (r.accepted || 0)) / judged)}%`), ' accepted first time') : null,
+    checked.length ? h('span', { class: `stat${broken ? ' bad' : ''}` }, h('b', {}, broken ? `${broken} of ${checked.length}` : String(checked.length)), broken ? ' approvals changed' : ` approval${checked.length === 1 ? '' : 's'} held`) : null,
+  ].filter(Boolean);
+  return h('section', { class: 'report' },
+    h('h3', {}, `Round ${r.n} report`),
+    stats.length ? h('div', { class: 'stats' }, stats) : null,
+    r.summary ? h('p', { class: 'summary' }, r.summary) : null,
+    r.reading ? h('div', { class: 'reading' }, h('b', {}, 'How I read this page'), h('p', {}, r.reading), correction) : null,
+    (r.questions || []).length
+      ? h('div', { class: 'questions' }, h('b', {}, 'Questions'), (r.questions || []).map((q, i) => h('label', {}, h('span', {}, q.text), answers[i])))
+      : null,
+    r.reading || (r.questions || []).length ? saveBtn : null,
+  );
+}
+
+function focusAnnotation(a) {
+  if (focusInDevices(a)) return;
+  const at = anchorRect(a);
+  const el = at.state === 'visible' ? anchorEl(a) : null;
+  if (innerWidth < 760 && state.panel) togglePanel(); // the panel covers the page on phones
+  if (madeElsewhere(a)) toast(`Made at ${a.viewport.w}px wide — resize to see it in place`);
+  if (el) el.scrollIntoView({ block: 'center', behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
+  setTimeout(() => {
+    positionMarks();
+    if (el) {
+      placeBox(focusBox, el.getBoundingClientRect());
+      focusBox.classList.remove('flash');
+      void focusBox.offsetWidth;
+      focusBox.classList.add('flash');
+    }
+    openComposer({ annotation: a, el, point: el ? pinPoint(a) : null });
+  }, el ? 350 : 0);
+}
+
+// ---------------------------------------------------------------- export
+
+async function allAnnotations() {
+  try {
+    return await store.all();
+  } catch {
+    return state.annotations;
+  }
+}
+
+async function copyPrompt() {
+  const list = await allAnnotations();
+  const md = formatMarkdown(list, { cli: !!SERVER, includeDrafts: true });
+  const open = list.filter((a) => a.status !== 'resolved').length;
+  if (await writeClipboard(md)) {
+    toast(open ? `Copied ${open} item${open === 1 ? '' : 's'} — paste into your AI chat` : 'Nothing open to copy');
+  } else {
+    downloadText(md);
+    toast('Clipboard blocked — downloaded feedback.md instead');
+  }
+}
+
+async function writeClipboard(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    // navigator.clipboard is missing on plain-http origins; the legacy path still works there.
+    const area = h('textarea', { style: 'position:fixed;opacity:0' });
+    area.value = text;
+    root.append(area);
+    area.select();
+    try {
+      return document.execCommand('copy');
+    } catch {
+      return false;
+    } finally {
+      area.remove();
+    }
+  }
+}
+
+async function downloadPrompt() {
+  downloadText(formatMarkdown(await allAnnotations(), { cli: !!SERVER, includeDrafts: true }));
+}
+
+function downloadText(md) {
+  const url = URL.createObjectURL(new Blob([md], { type: 'text/markdown' }));
+  const link = h('a', { href: url, download: 'redline-feedback.md' });
+  root.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

package/client/pen.js

@@ -0,0 +1,324 @@
+// ---------------------------------------------------------------- pen mode
+
+let drawing = null; // { id, points, smooth, path, fromPin, frame }
+
+// Freehand input is noisy (a mouse reports whole pixels, so slow diagonals come in
+// as a staircase). Each point is pulled part of the way from the previous smoothed
+// point toward the pointer, a light stabilizer that removes jitter without lag you'd notice.
+const STABILIZE = 0.45; // 0 = raw input, 1 = frozen
+const MIN_STEP = 2.5; // px between kept points
+
+function startStroke(e, fromPin) {
+  e.preventDefault();
+  ink.setPointerCapture(e.pointerId); // also keeps the pin's click from firing
+  const path = s('path', { stroke: COLORS[state.verdict], 'stroke-width': 4, 'stroke-opacity': '.85' });
+  ink.append(path);
+  const start = [e.clientX, e.clientY];
+  drawing = { id: e.pointerId, points: [start], smooth: start.slice(), path, fromPin, frame: 0, startedAt: Date.now() };
+  if (chip) hideMarkChip(true);
+}
+
+ink.addEventListener('pointerdown', (e) => {
+  if (state.mode !== 'pen' || e.button > 0) return;
+  startStroke(e);
+});
+
+ink.addEventListener('pointermove', (e) => {
+  if (!drawing || e.pointerId !== drawing.id) return;
+  const events = e.getCoalescedEvents ? e.getCoalescedEvents() : [];
+  for (const ev of events.length ? events : [e]) {
+    const sm = drawing.smooth;
+    sm[0] += (ev.clientX - sm[0]) * (1 - STABILIZE);
+    sm[1] += (ev.clientY - sm[1]) * (1 - STABILIZE);
+    const last = drawing.points[drawing.points.length - 1];
+    if (Math.hypot(sm[0] - last[0], sm[1] - last[1]) >= MIN_STEP) drawing.points.push([sm[0], sm[1]]);
+  }
+  // Redraw at most once per frame, however fast the pointer reports.
+  if (!drawing.frame) {
+    const d = drawing;
+    d.frame = requestAnimationFrame(() => {
+      d.frame = 0;
+      d.path.setAttribute('d', smoothPath(d.points));
+    });
+  }
+});
+
+ink.addEventListener('pointerup', finishStroke);
+ink.addEventListener('pointercancel', () => {
+  if (drawing) {
+    cancelAnimationFrame(drawing.frame);
+    drawing.path.remove();
+  }
+  drawing = null;
+});
+
+// Drop points that don't change the shape (Ramer–Douglas–Peucker), keeping marks light.
+function simplify(points, tolerance = 0.7) {
+  if (points.length < 3) return points;
+  const [ax, ay] = points[0];
+  const [bx, by] = points[points.length - 1];
+  const len = Math.hypot(bx - ax, by - ay);
+  let far = 0, index = 0;
+  for (let i = 1; i < points.length - 1; i++) {
+    const [px, py] = points[i];
+    // Closed loops (a circle ends where it starts) have no line to measure against:
+    // use the distance from the start point instead.
+    const dist = len < 1 ? Math.hypot(px - ax, py - ay) : Math.abs((by - ay) * px - (bx - ax) * py + bx * ay - by * ax) / len;
+    if (dist > far) {
+      far = dist;
+      index = i;
+    }
+  }
+  if (far <= tolerance) return [points[0], points[points.length - 1]];
+  return [...simplify(points.slice(0, index + 1), tolerance).slice(0, -1), ...simplify(points.slice(index), tolerance)];
+}
+
+function bboxOf(points) {
+  const xs = points.map((p) => p[0]);
+  const ys = points.map((p) => p[1]);
+  const x = Math.min(...xs), y = Math.min(...ys);
+  return { x, y, w: Math.max(...xs) - x, h: Math.max(...ys) - y };
+}
+
+function overlapArea(r, b) {
+  const w = Math.min(r.right, b.x + b.w) - Math.max(r.left, b.x);
+  const h2 = Math.min(r.bottom, b.y + b.h) - Math.max(r.top, b.y);
+  return w > 0 && h2 > 0 ? w * h2 : 0;
+}
+
+// Work out which element a freehand mark is about, and which ones it covers.
+function elementsUnder(points) {
+  const b = bboxOf(points);
+  const area = (r) => r.width * r.height;
+  const boxArea = Math.max(b.w * b.h, 1);
+  const shape = describeMark([points]);
+
+  // Underline: the text is just above the line, so look there, not at the line.
+  if (shape.startsWith('horizontal')) {
+    const hits = new Map();
+    for (let i = 1; i <= 9; i++) {
+      const el = pageElementAt(b.x + (b.w * i) / 10, b.y - 10);
+      if (el) hits.set(el, (hits.get(el) || 0) + 1);
+    }
+    const best = [...hits.entries()].sort((x, y) => y[1] - x[1])[0];
+    if (best && best[0] !== document.body) return { target: best[0], covers: [] };
+  }
+
+  const hits = new Map();
+  const probe = (x, y) => {
+    if (x < 0 || y < 0 || x > innerWidth || y > innerHeight) return;
+    const el = pageElementAt(x, y);
+    if (el) hits.set(el, (hits.get(el) || 0) + 1);
+  };
+  for (let i = 1; i <= 5; i++) for (let j = 1; j <= 5; j++) probe(b.x + (b.w * i) / 6, b.y + (b.h * j) / 6);
+  const step = Math.max(1, Math.floor(points.length / 12));
+  for (let i = 0; i < points.length; i += step) probe(points[i][0], points[i][1]);
+
+  // Elements the mark mostly encloses, largest first, without their own descendants.
+  const covers = [...hits.keys()]
+    .filter((el) => el !== document.body)
+    .map((el) => ({ el, r: el.getBoundingClientRect() }))
+    .filter(({ r }) => area(r) > 0 && overlapArea(r, b) / area(r) >= 0.5 && area(r) >= boxArea * 0.04)
+    .sort((x, y) => area(y.r) - area(x.r))
+    .filter((c, i, arr) => !arr.slice(0, i).some((p) => p.el.contains(c.el)))
+    .slice(0, 4)
+    .map((c) => c.el);
+  if (covers.length === 1) return { target: covers[0], covers };
+
+  // A small mark over a small thing (an ✗ on an icon that spills into padding):
+  // the element under its centre, if it's about the mark's size.
+  const center = pageElementAt(b.x + b.w / 2, b.y + b.h / 2);
+  if (center && center !== document.body) {
+    const r = center.getBoundingClientRect();
+    if (area(r) <= boxArea * 4 && overlapArea(r, b) >= Math.min(area(r), boxArea) * 0.4) return { target: center, covers };
+  }
+
+  // Otherwise the smallest element that contains the whole mark.
+  let container = center || document.body;
+  while (container.parentElement && container !== document.body) {
+    const r = container.getBoundingClientRect();
+    if (overlapArea(r, b) >= boxArea * 0.85 && r.width >= b.w * 0.9) break;
+    container = container.parentElement;
+  }
+  return { target: container, covers };
+}
+
+async function finishStroke(e) {
+  if (!drawing || e.pointerId !== drawing.id) return;
+  cancelAnimationFrame(drawing.frame);
+  const { path, fromPin } = drawing;
+  // End exactly where the pointer lifted (the stabilizer trails slightly), then thin out.
+  const raw = drawing.points;
+  const end = [e.clientX, e.clientY];
+  const lastPt = raw[raw.length - 1];
+  if (Math.hypot(end[0] - lastPt[0], end[1] - lastPt[1]) > 0.5) raw.push(end);
+  const points = simplify(raw);
+  const startedAt = drawing.startedAt;
+  drawing = null;
+  path.setAttribute('d', smoothPath(points));
+  const b = bboxOf(points);
+  if (points.length < 2 || Math.max(b.w, b.h) < 6) {
+    path.remove();
+    // A press on a pin that didn't move is a click: open it. Anywhere else, a click
+    // boxes the element under the pen and asks why (the Box tool, without switching).
+    if (fromPin) (fromPin.status === 'resolved' && !fromPin.accepted) || guardBroken(fromPin) ? startCheck(fromPin.id) : openComposer({ annotation: fromPin });
+    else if (state.composer) closeComposer();
+    else boxAt(e.clientX, e.clientY);
+    return;
+  }
+  // Saves run one after another, so a quick second stroke sees the first one saved.
+  penQueue = penQueue.then(() => saveStroke(points, path, b, startedAt)).catch(() => {});
+}
+
+// The shape carries the verdict, so there's rarely a colour to pick: a tick keeps,
+// a cross changes (or questions, in amber). Everything else takes the current ink.
+function gestureInk(shape, ink) {
+  if (/check mark/.test(shape)) return 'good';
+  if (/cross|scribble/.test(shape)) return ink === 'idea' ? 'idea' : 'fix';
+  return ink;
+}
+
+// A click with the pen: box the element under it and open its note.
+function boxAt(x, y) {
+  const el = pageElementAt(x, y);
+  if (!el) return;
+  const r = el.getBoundingClientRect();
+  const anchor = { dx: r.width ? (x - r.left) / r.width : 0, dy: r.height ? (y - r.top) / r.height : 0 };
+  if (state.retarget) return retargetTo(el, anchor);
+  openComposer({ el, draft: { kind: 'note', anchor }, point: { x, y } });
+}
+
+let penQueue = Promise.resolve();
+let lastMark = null; // { id, ink, endedAt, box } — the mark a quick follow-up stroke may join
+
+async function saveStroke(points, path, b, startedAt) {
+  // A stroke started right after the previous one ended, over it (the second line
+  // of an ✗), joins it. Anything later or elsewhere is its own mark.
+  // Compared in page coordinates, so scrolling in between can't fake an overlap.
+  const prev = lastMark && state.annotations.find((x) => x.id === lastMark.id);
+  const m = 40;
+  // Same colour, drawn right after, and really over it (an ✗'s second line crosses
+  // the first); a stroke beside the last mark, or in a new colour, is a new mark.
+  const px = b.x + scrollX, py = b.y + scrollY;
+  const lb = lastMark && lastMark.box;
+  const overlap = lb ? Math.max(0, Math.min(px + b.w, lb.x + lb.w) - Math.max(px, lb.x) + m) * Math.max(0, Math.min(py + b.h, lb.y + lb.h) - Math.max(py, lb.y) + m) : 0;
+  const smaller = lb ? Math.min((b.w + m) * (b.h + m), (lb.w + m) * (lb.h + m)) : 1;
+  const joinable = !!prev && lastMark.ink === state.verdict && startedAt - lastMark.endedAt < 1500 && overlap / smaller >= 0.35;
+  const { target, covers } = elementsUnder(joinable ? [...strokePaths(prev).flat(), ...points] : points);
+  const r = target.getBoundingClientRect();
+  const page = (pts) => pts.map(([x, y]) => [fmt(x + scrollX), fmt(y + scrollY)]);
+  const local = (pts) => pts.map(([x, y]) => [fmt(x - r.left), fmt(y - r.top)]);
+  const viewPaths = joinable ? [...strokePaths(prev), points] : [points];
+  const shape = describeMark(viewPaths);
+  const data = {
+    kind: 'stroke',
+    verdict: gestureInk(shape, state.verdict),
+    target: describeEl(target),
+    covers: covers.map(describeEl),
+    stroke: { paths: viewPaths.map(page), local: viewPaths.map(local), width: 4 },
+    page: PAGE,
+    ...captureContext(target),
+  };
+  data.quote = shape.startsWith('horizontal') ? textAlong(points) : '';
+  // An arrow relates two things: record what it starts on and what it points at.
+  if (shape.startsWith('diagonal') || shape.startsWith('vertical')) {
+    const from = pageElementAt(points[0][0], points[0][1]);
+    const endPt = points[points.length - 1];
+    const to = pageElementAt(endPt[0], endPt[1]);
+    if (from && to && from !== to && from !== document.body && to !== document.body) {
+      data.arrow = { from: describeEl(from), to: describeEl(to) };
+    }
+  }
+  try {
+    const saved = joinable ? await store.update(prev.id, data) : await store.create({ ...data, comment: '', tags: [], draft: true });
+    if (!joinable) state.lastStrokeIds.push(saved.id);
+    const box = bboxOf(viewPaths.flat());
+    lastMark = { id: saved.id, ink: state.verdict, endedAt: Date.now(), box: { ...box, x: box.x + scrollX, y: box.y + scrollY } };
+    await load();
+    path.remove();
+    // Drawing never opens anything: a small receipt appears just outside the mark.
+    showMarkChip(saved, bboxOf(viewPaths.flat()));
+  } catch (err) {
+    path.remove();
+    toast('Could not save mark: ' + err.message);
+  }
+}
+
+// ---- the mark chip: a quiet receipt at the end of a stroke
+
+let chip = null; // { el, a, point, timer }
+
+function hideMarkChip(instant) {
+  if (!chip) return;
+  const el = chip.el;
+  clearTimeout(chip.timer);
+  chip = null;
+  if (instant || state.viaKeyboard) return el.remove();
+  el.classList.add('out');
+  setTimeout(() => el.remove(), 130);
+}
+
+function armChip(ms) {
+  clearTimeout(chip.timer);
+  chip.timer = setTimeout(() => hideMarkChip(), ms);
+}
+
+/** Open the note for the mark in the chip (click "Note", or press Enter). Returns true if there was one. */
+function noteFromChip() {
+  if (!chip) return false;
+  const { a, point } = chip;
+  hideMarkChip(true);
+  const fresh = state.annotations.find((x) => x.id === a.id) || a;
+  openComposer({ annotation: fresh, point, compact: true });
+  return true;
+}
+
+// Two or three words for the chip; the brief has the full description.
+function gestureName(paths) {
+  const shape = describeMark(paths);
+  if (/cross|scribble/.test(shape)) return 'crossed out';
+  if (/check/.test(shape)) return 'ticked';
+  if (/circled/.test(shape)) return 'circled';
+  if (/horizontal/.test(shape)) return 'underlined';
+  if (/diagonal|vertical/.test(shape)) return 'line';
+  if (shape === 'dot') return 'dot';
+  return 'mark';
+}
+
+function showMarkChip(a, box) {
+  const point = { x: box.x + box.w, y: box.y + box.h };
+  hideMarkChip(true);
+  const order = ['good', 'fix', 'idea'];
+  const dot = h('button', { class: 'chip-dot', type: 'button' });
+  const paint = () => {
+    dot.style.background = COLORS[a.verdict];
+    dot.title = `${VERDICTS[a.verdict].label}: click to change`;
+    dot.setAttribute('aria-label', `Verdict ${VERDICTS[a.verdict].label}, click to change`);
+  };
+  dot.addEventListener('click', async () => {
+    a.verdict = order[(order.indexOf(a.verdict) + 1) % order.length];
+    paint();
+    armChip(4000);
+    await store.update(a.id, { verdict: a.verdict });
+    await load();
+  });
+  paint();
+  const el = h('div', { class: 'mark-chip', role: 'status' },
+    dot,
+    h('span', { class: 'chip-label' }, gestureName(a.stroke && a.stroke.paths)),
+    h('button', { type: 'button', class: 'chip-btn', title: 'Add a note to this mark (Enter)', onclick: noteFromChip }, 'Note'),
+    h('button', { type: 'button', class: 'chip-btn icon', title: 'Delete this mark', 'aria-label': 'Delete mark', html: ICONS.close, onclick: () => (hideMarkChip(true), remove(a)) }),
+  );
+  root.append(el);
+  // Below the mark's bottom-right corner (or above it, near the screen edge), never on the ink.
+  const w = el.offsetWidth, hgt = el.offsetHeight;
+  const below = box.y + box.h + 10;
+  const top = below + hgt < innerHeight - 70 ? below : box.y - hgt - 10; // stay clear of the toolbar
+  el.style.left = Math.min(Math.max(8, box.x + box.w - w), innerWidth - w - 8) + 'px';
+  el.style.top = Math.min(Math.max(8, top), innerHeight - hgt - 8) + 'px';
+  chip = { el, a, point, timer: 0 };
+  // Stays while you look at it; otherwise fades after a few seconds.
+  el.addEventListener('pointerenter', () => clearTimeout(chip && chip.timer));
+  el.addEventListener('pointerleave', () => chip && chip.el === el && armChip(2000));
+  armChip(4000);
+}