@myrtilleio/redline 0.1.0

package/client/core.js

@@ -0,0 +1,1610 @@
+// Redline overlay. Bundled after src/format.js inside one IIFE, so VERDICTS,
+// describeMark and formatMarkdown are in scope. Everything the overlay draws
+// lives in a closed-off shadow root so the page's CSS can't touch it (and vice versa).
+
+if (window.__redline) return;
+
+const currentScript = document.currentScript;
+const SERVER =
+  window.REDLINE_SERVER ||
+  (currentScript && /\/__redline\/client\.js(\?|$)/.test(currentScript.src) ? new URL(currentScript.src).origin : null);
+// A key from a shared link (?rk=…): kept for this tab, and taken out of the address bar
+// so it doesn't end up in screenshots, bookmarks or referrers.
+const KEY = (() => {
+  try {
+    const url = new URL(location.href);
+    const given = url.searchParams.get('rk');
+    if (given) {
+      sessionStorage.setItem('redline:key', given);
+      url.searchParams.delete('rk');
+      history.replaceState(history.state, '', url);
+    }
+    return sessionStorage.getItem('redline:key');
+  } catch {
+    return null;
+  }
+})();
+const withKey = (u) => (KEY ? u + (u.includes('?') ? '&' : '?') + 'rk=' + encodeURIComponent(KEY) : u);
+const keyHeader = () => (KEY ? { 'x-redline-key': KEY } : {});
+const pagePath = () => location.pathname.replace(/\/index\.html?$/i, '/') || '/';
+let PAGE = pagePath(); // updated on client-side navigation, see watchRoutes()
+const COLORS = { good: '#22c55e', fix: '#f43f5e', idea: '#f59e0b' };
+const MOD_KEY = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent) ? '⌘' : 'Ctrl';
+
+// ---------------------------------------------------------------- storage
+
+function prefs(key, value) {
+  try {
+    if (arguments.length === 1) return JSON.parse(localStorage.getItem('redline:ui:' + key));
+    localStorage.setItem('redline:ui:' + key, JSON.stringify(value));
+  } catch {
+    return null;
+  }
+}
+
+function sessionPref(key, value) {
+  try {
+    if (arguments.length === 1) return sessionStorage.getItem('redline:' + key);
+    if (value == null) sessionStorage.removeItem('redline:' + key);
+    else sessionStorage.setItem('redline:' + key, value);
+  } catch {
+    return null;
+  }
+}
+
+function localStore() {
+  const KEY = 'redline:annotations:v1';
+  const read = () => {
+    try {
+      return JSON.parse(localStorage.getItem(KEY)) || [];
+    } catch {
+      return [];
+    }
+  };
+  const write = (list) => {
+    try {
+      localStorage.setItem(KEY, JSON.stringify(list));
+    } catch {
+      toast('Could not save: browser storage is unavailable');
+    }
+  };
+  return {
+    remote: false,
+    all: async () => read(),
+    list: async () => read().filter((a) => a.page === PAGE),
+    async create(input) {
+      const list = read();
+      const now = new Date().toISOString();
+      const a = {
+        ...input,
+        id: 'a_' + Math.random().toString(16).slice(2, 10),
+        n: Number.isInteger(input.n) && !list.some((x) => x.n === input.n) ? input.n : list.reduce((m, x) => Math.max(m, x.n || 0), 0) + 1,
+        status: 'open',
+        createdAt: now,
+        updatedAt: now,
+      };
+      list.push(a);
+      write(list);
+      return a;
+    },
+    async update(id, patch) {
+      const list = read();
+      const i = list.findIndex((a) => a.id === id);
+      if (i < 0) return null;
+      const prev = list[i];
+      list[i] = { ...prev, ...patch, updatedAt: new Date().toISOString() };
+      if (patch.status === 'open' && prev.status === 'resolved') {
+        if (prev.resolution) list[i].history = [...(prev.history || []), prev.resolution];
+        delete list[i].resolution;
+      }
+      write(list);
+      return list[i];
+    },
+    async remove(id) {
+      write(read().filter((a) => a.id !== id));
+    },
+    // Rounds, in this browser: Send copies the brief for an AI chat and marks the drafts sent.
+    async rounds() {
+      try {
+        return JSON.parse(localStorage.getItem(KEY + ':rounds')) || { rounds: [] };
+      } catch {
+        return { rounds: [] };
+      }
+    },
+    async send() {
+      const list = read();
+      const data = await this.rounds();
+      const n = (data.rounds.at(-1)?.n || 0) + 1;
+      let count = 0;
+      for (const a of list) if (a.draft) (delete a.draft, (a.round = n), count++);
+      if (!count) return null;
+      write(list);
+      data.rounds.push({ n, sentAt: new Date().toISOString(), count });
+      try {
+        localStorage.setItem(KEY + ':rounds', JSON.stringify(data));
+      } catch {}
+      return data.rounds.at(-1);
+    },
+    async answerRound() {},
+    subscribe(on) {
+      window.addEventListener('storage', (e) => e.key && e.key.startsWith(KEY) && on.annotations());
+    },
+  };
+}
+
+function remoteStore(base) {
+  async function call(method, path, body) {
+    const res = await fetch(base + '/__redline/api' + path, {
+      method,
+      headers: { ...(body ? { 'content-type': 'application/json' } : {}), ...keyHeader() },
+      body: body ? JSON.stringify(body) : undefined,
+    });
+    if (!res.ok) throw new Error(`Redline server: ${res.status}`);
+    return res.json();
+  }
+  return {
+    remote: true,
+    all: () => call('GET', '/annotations'),
+    list: () => call('GET', '/annotations?page=' + encodeURIComponent(PAGE)),
+    create: (a) => call('POST', '/annotations', a),
+    update: (id, patch) => call('PATCH', '/annotations/' + encodeURIComponent(id), patch),
+    remove: (id) => call('DELETE', '/annotations/' + encodeURIComponent(id)),
+    send: () => call('POST', '/send'),
+    rounds: () => call('GET', '/rounds'),
+    answerRound: (n, body) => call('PATCH', '/rounds/' + n, body),
+    subscribe(on) {
+      const es = new EventSource(withKey(base + '/__redline/api/events'));
+      es.addEventListener('hello', () => on.status(true));
+      es.addEventListener('annotations', () => on.annotations());
+      es.addEventListener('reload', () => on.reload());
+      es.onerror = () => on.status(false);
+    },
+  };
+}
+
+const store = SERVER ? remoteStore(SERVER) : localStore();
+
+// ---------------------------------------------------------------- DOM helpers
+
+function h(tag, attrs, ...children) {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs || {})) {
+    if (v == null || v === false) continue;
+    if (k.startsWith('on')) el.addEventListener(k.slice(2), v);
+    else if (k === 'html') el.append(markup(v));
+    // Through CSSOM rather than the style attribute, which a strict style-src CSP blocks.
+    else if (k === 'style') el.style.cssText = v;
+    else el.setAttribute(k, v === true ? '' : v);
+  }
+  for (const c of children.flat()) if (c != null && c !== false) el.append(c.nodeType ? c : String(c));
+  return el;
+}
+
+// replaceChildren() would render null/false as text; skip them like h() does.
+function fill(el, ...children) {
+  el.replaceChildren(...children.flat().filter((c) => c != null && c !== false));
+  return el;
+}
+
+function fillAppend(el, ...children) {
+  el.append(...children.flat().filter((c) => c != null && c !== false));
+  return el;
+}
+
+const SVGNS = 'http://www.w3.org/2000/svg';
+
+// Build DOM from the overlay's own constant markup (icons, hints) without
+// innerHTML, which pages that enforce Trusted Types (e.g. YouTube) forbid.
+function markup(src) {
+  const frag = document.createDocumentFragment();
+  const stack = [frag];
+  for (const m of src.matchAll(/<(\/?)([a-zA-Z][\w-]*)((?:\s+[\w:-]+(?:="[^"]*")?)*)\s*(\/?)>|([^<]+)/g)) {
+    const parent = stack[stack.length - 1];
+    if (m[5] !== undefined) parent.append(m[5]);
+    else if (m[1]) stack.length > 1 && stack.pop();
+    else {
+      const el = m[2] === 'svg' || parent.namespaceURI === SVGNS ? document.createElementNS(SVGNS, m[2]) : document.createElement(m[2]);
+      for (const a of m[3].matchAll(/([\w:-]+)(?:="([^"]*)")?/g)) el.setAttribute(a[1], a[2] ?? '');
+      parent.append(el);
+      if (!m[4] && m[2] !== 'br') stack.push(el);
+    }
+  }
+  return frag;
+}
+function s(tag, attrs) {
+  const el = document.createElementNS(SVGNS, tag);
+  for (const [k, v] of Object.entries(attrs || {})) el.setAttribute(k, v);
+  return el;
+}
+
+const icon = (d, extra = '') =>
+  `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" ${extra}>${d}</svg>`;
+const ICONS = {
+  report: icon('<path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5M10 13h6M10 17h4"/>'),
+  link: icon('<path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/>'),
+  browse: icon('<path d="M4 4l7 17 2.5-7.5L21 11z"/>'),
+  select: icon('<path d="M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3"/><rect x="9" y="9" width="6" height="6" rx="1"/>'),
+  pen: icon('<path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/>'),
+  list: icon('<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>'),
+  copy: icon('<rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"/>'),
+  eye: icon('<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>'),
+  eyeOff: icon('<path d="M3 3l18 18M10.6 10.6a2 2 0 0 0 2.8 2.8M9.9 5.2A9.8 9.8 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3.2 4M6.6 6.6C3.8 8.4 2 12 2 12s3.5 7 10 7a9.6 9.6 0 0 0 5.4-1.6"/>'),
+  minimize: icon('<path d="M5 12h14"/>'),
+  close: icon('<path d="M18 6 6 18M6 6l12 12"/>'),
+  check: icon('<path d="M20 6 9 17l-5-5"/>'),
+  trash: icon('<path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/>'),
+  // Redline's mark: one confident red pen stroke. It's also the toolbar's drag handle.
+  mark: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true"><path d="M4 16.5c2.6-1.2 4.4-5.6 6.6-5.9 2.1-.3.9 4.3 3 4.1 2-.2 3.4-4.6 6.4-6.2" stroke="#f43f5e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  grip: icon('<circle cx="9" cy="6" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="18" r="1"/>', 'stroke-width="2.5"'),
+  move: icon('<path d="M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20"/>'),
+  image: icon('<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="M21 15l-5-5L5 21"/>'),
+  sliders: icon('<path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"/>'),
+  options: icon('<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>'),
+  devices: icon('<rect x="2" y="4" width="14" height="11" rx="1.5"/><path d="M6 19h6"/><rect x="17" y="8" width="5" height="11" rx="1"/>'),
+  split: icon('<path d="M12 3v18"/><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 12h2M15 12h2"/>'),
+  box: icon('<rect x="4" y="5" width="16" height="14" rx="2.5"/>'),
+  more: icon('<circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/>', 'stroke-width="2.4"'),
+  download: icon('<path d="M12 3v12M7 10l5 5 5-5M5 21h14"/>'),
+};
+
+// ---------------------------------------------------------------- element capture
+
+function isOurs(node) {
+  return node === host || (node && host.contains(node));
+}
+
+function eventIsOurs(e) {
+  return e.composedPath().includes(host);
+}
+
+function queryOne(selector) {
+  try {
+    const found = document.querySelectorAll(selector);
+    return found.length === 1 ? found[0] : found[0] || null;
+  } catch {
+    return null;
+  }
+}
+
+function isUnique(selector) {
+  try {
+    return document.querySelectorAll(selector).length === 1;
+  } catch {
+    return false;
+  }
+}
+
+// Skip class names that won't match later: generated ones (css-1x2y3z, sc-AbCdE,
+// jsx-123) change between builds, and state ones (open, is-active) come and go.
+const STATE_CLASS = /^(is-|has-)|^(open|opened|active|selected|current|show|shown|visible|hidden|expanded|collapsed|focus|focused|hover|disabled|checked|on|off|in|out|fade|loading|loaded|sticky|scrolled)$/;
+function stableClasses(el) {
+  return [...el.classList]
+    .filter((c) => /^[a-zA-Z][\w-]{0,40}$/.test(c) && !/(^(css|sc|jsx|svelte|emotion)-)|\d{3,}|^_/.test(c) && !STATE_CLASS.test(c))
+    .slice(0, 2);
+}
+
+function cssPath(el) {
+  if (el === document.body || el === document.documentElement) return el.tagName.toLowerCase();
+  if (el.id && isUnique('#' + CSS.escape(el.id))) return '#' + CSS.escape(el.id);
+  const parts = [];
+  for (let node = el; node && node.nodeType === 1 && node !== document.documentElement; node = node.parentElement) {
+    if (node !== el && node.id && isUnique('#' + CSS.escape(node.id))) {
+      parts.unshift('#' + CSS.escape(node.id));
+      break;
+    }
+    const testId = node.getAttribute('data-testid');
+    if (testId && isUnique(`[data-testid="${CSS.escape(testId)}"]`)) {
+      parts.unshift(`[data-testid="${CSS.escape(testId)}"]`);
+      break;
+    }
+    let part = node.tagName.toLowerCase();
+    if (node === document.body) {
+      parts.unshift(part);
+      break;
+    }
+    const classes = stableClasses(node);
+    if (classes.length) part += '.' + classes.map((c) => CSS.escape(c)).join('.');
+    const parent = node.parentElement;
+    if (parent && [...parent.children].filter((c) => c !== node && c.matches(part)).length) {
+      const same = [...parent.children].filter((c) => c.tagName === node.tagName);
+      part += `:nth-of-type(${same.indexOf(node) + 1})`;
+    }
+    parts.unshift(part);
+    if (isUnique(parts.join(' > '))) break;
+  }
+  return parts.join(' > ');
+}
+
+function hex(color) {
+  const m = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/.exec(color);
+  if (!m) return color;
+  if (m[4] !== undefined && Number(m[4]) < 1) return Number(m[4]) === 0 ? 'transparent' : color;
+  return '#' + [m[1], m[2], m[3]].map((n) => Number(n).toString(16).padStart(2, '0')).join('');
+}
+
+function openTag(el) {
+  const attrs = ['id', 'class', 'href', 'src', 'alt', 'type', 'role', 'aria-label', 'name', 'placeholder']
+    .filter((a) => el.hasAttribute(a))
+    .map((a) => {
+      const v = el.getAttribute(a);
+      return `${a}="${v.length > 60 ? v.slice(0, 57) + '…' : v}"`;
+    });
+  return `<${el.tagName.toLowerCase()}${attrs.length ? ' ' + attrs.join(' ') : ''}>`;
+}
+
+function label(el) {
+  let out = el.tagName.toLowerCase();
+  if (el.id) out += '#' + el.id;
+  const cls = stableClasses(el);
+  if (cls.length) out += '.' + cls.join('.');
+  return out;
+}
+
+// Notes describe the site as built, never the reviewer's own previews (an agent
+// searching the code for previewed text or sizes would find nothing).
+function asBuilt(fn) {
+  if (!previewed.size && !variantSheets.length && !variantHtml.size) return fn();
+  clearPreviews();
+  try {
+    return fn();
+  } finally {
+    applyPreviews();
+  }
+}
+
+function describeEl(el) {
+  return asBuilt(() => describeRaw(el));
+}
+
+function describeRaw(el) {
+  const r = el.getBoundingClientRect();
+  const cs = getComputedStyle(el);
+  const text = (el.innerText || el.textContent || el.getAttribute('alt') || el.getAttribute('aria-label') || '')
+    .replace(/\s+/g, ' ')
+    .trim();
+  const styles = {
+    font: `${cs.fontSize}/${cs.lineHeight} ${cs.fontFamily.split(',')[0].trim()} ${cs.fontWeight}`,
+    color: hex(cs.color),
+  };
+  const bg = hex(cs.backgroundColor);
+  if (bg !== 'transparent') styles.background = bg;
+  if (cs.backgroundImage !== 'none') styles.background = (styles.background ? styles.background + ' + ' : '') + (cs.backgroundImage.includes('gradient') ? 'gradient' : 'image');
+  if (cs.padding !== '0px') styles.padding = cs.padding;
+  if (cs.borderRadius !== '0px') styles.radius = cs.borderRadius;
+  if (cs.display === 'flex' || cs.display === 'grid' || cs.display === 'inline-flex') {
+    styles.layout = `${cs.display}${cs.gap && cs.gap !== 'normal' ? ' gap ' + cs.gap : ''}`;
+  }
+  return {
+    selector: cssPath(el),
+    html: openTag(el),
+    text: text.length > 120 ? text.slice(0, 117) + '…' : text,
+    rect: { x: r.left + scrollX, y: r.top + scrollY, w: r.width, h: r.height },
+    styles,
+  };
+}
+
+// What the page looked like beyond the element itself: its width, and the
+// toggles, tabs and menus near it, on or off, so the agent can reproduce the view.
+const UI_STATE = [
+  '[aria-pressed]', '[aria-selected="true"]', '[aria-checked]', '[role="switch"]', '[aria-expanded="true"]',
+  'input[type="checkbox"]', 'input[type="radio"]:checked', 'details[open] > summary',
+  'button.active', 'button.is-active', 'button.selected', 'button.on', '[role="tab"].active',
+].join(',');
+const REGION = 'section, article, form, dialog, header, nav, footer, aside, [role="region"], [role="dialog"], [role="tabpanel"]';
+
+function stateOf(el) {
+  if (el.matches('[aria-expanded="true"], details[open] > summary')) return 'open';
+  if (el.matches('[aria-selected="true"], [role="tab"].active, input[type="radio"]')) return 'selected';
+  if (el.matches('input[type="checkbox"]')) return el.checked ? 'on' : 'off';
+  const v = el.getAttribute('aria-checked') ?? el.getAttribute('aria-pressed');
+  if (v != null) return v === 'true' ? 'on' : v === 'mixed' ? 'mixed' : 'off';
+  return 'on';
+}
+
+// State of a control right now, including "off" for toggles that only mark the on state.
+function stateNow(el) {
+  return el.matches(UI_STATE) ? stateOf(el) : 'off';
+}
+
+// The page section a mark is in: its landmark and first heading, so the agent can
+// connect a drawing to what that part of the page is for.
+function sectionFor(el) {
+  for (let n = el; n && n !== document.body; n = n.parentElement) {
+    if (/^(SECTION|HEADER|FOOTER|NAV|ASIDE|ARTICLE)$/.test(n.tagName) || (n.id && n.parentElement === document.body) || (n.parentElement && n.parentElement.tagName === 'MAIN')) {
+      const heading = n.querySelector('h1, h2, h3');
+      return { selector: cssPath(n), heading: heading ? heading.textContent.replace(/\s+/g, ' ').trim().slice(0, 100) : '' };
+    }
+  }
+  return null;
+}
+
+function captureContext(target) {
+  // Controls in the same section as the target (plus any open menu), not the whole page.
+  const scope = (target && target.closest && target.closest(REGION)) || null;
+  const ui = [];
+  const uiReplay = []; // the same controls by selector, so screenshots can restore them
+  for (const el of document.querySelectorAll(UI_STATE)) {
+    if (ui.length >= 8 || isOurs(el)) continue;
+    const global = el.matches('[aria-expanded="true"]');
+    if (scope && !scope.contains(el) && !global) continue;
+    const labelEl = el.matches('input') && el.labels && el.labels[0];
+    const r = (labelEl || el).getBoundingClientRect(); // styled switches hide the input itself
+    if (!r.width && !r.height) continue;
+    const text = labelEl ? labelEl.innerText : el.getAttribute('aria-label') || el.innerText || el.name || el.value;
+    const name = (text || label(el)).replace(/\s+/g, ' ').trim().slice(0, 40);
+    const line = `“${name}” ${stateOf(el)}`;
+    if (!ui.includes(line)) {
+      ui.push(line);
+      uiReplay.push({ selector: cssPath(el), state: stateOf(el) });
+    }
+  }
+  const ctx = { viewport: { w: innerWidth, h: innerHeight }, uiState: ui, uiReplay };
+  const section = target && sectionFor(target);
+  if (section) ctx.section = section;
+  if (location.search || location.hash) ctx.url = location.search + location.hash;
+  return ctx;
+}
+
+// The words under an underline: the text from where the stroke starts to where it
+// ends, read just above the line.
+function textAlong(points) {
+  const b = bboxOf(points);
+  const y = b.y - 8;
+  const at = (x) => {
+    if (document.caretPositionFromPoint) {
+      const p = document.caretPositionFromPoint(x, y);
+      return p && { node: p.offsetNode, offset: p.offset };
+    }
+    const r = document.caretRangeFromPoint && document.caretRangeFromPoint(x, y);
+    return r && { node: r.startContainer, offset: r.startOffset };
+  };
+  // Caret hit-testing would land on the pen surface; let it see through.
+  ink.style.pointerEvents = 'none';
+  let start, end;
+  try {
+    start = at(b.x + 2);
+    end = at(b.x + b.w - 2);
+  } finally {
+    ink.style.pointerEvents = '';
+  }
+  if (!start || !end || isOurs(start.node) || isOurs(end.node)) return '';
+  try {
+    const range = document.createRange();
+    range.setStart(start.node, start.offset);
+    range.setEnd(end.node, end.offset);
+    if (range.collapsed) return '';
+    return range.toString().replace(/\s+/g, ' ').trim().slice(0, 300);
+  } catch {
+    return '';
+  }
+}
+
+// ---------------------------------------------------------------- state
+
+const state = {
+  mode: 'browse',
+  verdict: prefs('verdict') || 'fix', // the ink: red (change) by default
+  annotations: [],
+  hidden: false,
+  panel: false,
+  filter: 'open',
+  collapsed: !!prefs('collapsed'),
+  preview: false, // the page as visitors see it: Redline hidden until the backslash key brings it back
+  hoverEl: null,
+  hoverStack: [],
+  composer: null, // { annotation?, draft?, el?, point }
+  connected: !SERVER,
+  pendingReload: false,
+  showElsewhere: false,
+  previewEdits: true, // show open items' proposed edits and chosen options on the page
+  devices: false, // desktop / tablet / mobile side by side
+  lastStrokeIds: [],
+};
+
+// ---------------------------------------------------------------- shadow root + styles
+
+const host = document.createElement('redline-overlay');
+// Inline so it beats page CSS (set through CSSOM, which CSP allows); `all:initial`
+// would otherwise also reset the font the :host rule sets.
+host.style.cssText =
+  'all:initial;position:fixed;inset:0;z-index:2147483647;pointer-events:none;display:block;' +
+  'font:13px/1.4 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#f4f4f5;';
+const root = host.attachShadow({ mode: 'open' });
+
+const CSS_TEXT = `
+:host { --good:${COLORS.good}; --fix:${COLORS.fix}; --idea:${COLORS.idea};
+  --bg: #16161a; /* solid: backdrop blurs re-render on every scroll frame */ --bg2:#232328; --line: rgba(255,255,255,.1); --text:#f4f4f5; --muted:#a1a1aa;
+  --radius: 12px; --shadow: 0 10px 30px -8px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25);
+  /* Motion: fast out of the gate, soft landing. Pop is for rare, happy moments only. */
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --focus: #60a5fa; --agent: #8b5cf6; }
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
+button:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.marks { position: fixed; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+.marks path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
+
+.marks path { vector-effect: non-scaling-stroke; }
+.marks .elsewhere { stroke-dasharray: 2 8; opacity: .5; }
+.marks-hit { position: fixed; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+.marks-hit path { fill: none; pointer-events: stroke; cursor: pointer; }
+.marks-hit .resolved, :host([data-mode="select"]) .marks-hit, .hidden-marks .marks-hit, :host([data-devices]) .marks-hit { display: none; }
+.marks g path { transition: stroke-opacity 140ms ease, stroke-width 140ms var(--ease-out); }
+/* Boxes: a tint and a line in the ink colour; the inside stays usable. */
+.marks rect.box { stroke-width: 1.5; stroke-opacity: .75; transition: fill-opacity 140ms ease, stroke-opacity 140ms ease; }
+.marks rect.box.fix { fill: var(--fix); stroke: var(--fix); } .marks rect.box.good { fill: var(--good); stroke: var(--good); } .marks rect.box.idea { fill: var(--idea); stroke: var(--idea); }
+.marks rect.box { fill-opacity: .07; }
+.pins .pin.tab { position: absolute; overflow: visible; }
+/* Conversation in the card */
+.thread { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; }
+.msg { font-size: 12.5px; line-height: 1.45; padding: 7px 10px; border-radius: 12px; max-width: 88%; overflow-wrap: anywhere; }
+.msg.you { justify-self: end; background: rgba(255,255,255,.1); border-bottom-right-radius: 4px; }
+.msg.agent { justify-self: start; background: rgba(139,92,246,.2); border: 1px solid rgba(139,92,246,.35); border-bottom-left-radius: 4px; }
+.msg.agent::before { content: '✦ '; color: #c4b5fd; }
+.msg .tag { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #86efac; margin-bottom: 2px; }
+
+.marks rect.box.hot { fill-opacity: .14; stroke-opacity: 1; }
+.marks .sent, .pins .pin.tab.sent { opacity: .6; } /* with the agent */
+.marks .fixed { opacity: .35; } /* fixed: check it */
+.pins .pin.tab.check { background: #fafafa; color: #18181b; } /* fixed, waiting for your review: neutral, not a green alarm */
+/* An approval that changed since: the one alarm on the page. */
+.pins .pin.tab.changed { background: #18181b; color: #fecdd3; box-shadow: 0 0 0 1.5px var(--fix), 0 2px 10px rgba(244,63,94,.35); padding-left: 16px; }
+.pins .pin.tab.changed::before { content: ''; position: absolute; left: 6px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--fix);
+  animation: alarm 1.6s ease-in-out infinite; }
+@keyframes alarm { 50% { opacity: .35; } }
+.marks rect.box.changed { fill: var(--fix); stroke: var(--fix); fill-opacity: .05; stroke-dasharray: 5 4; stroke-opacity: .9; }
+.marks g.changed path { stroke-dasharray: 3 7; }
+.marks rect.box.pop { animation: ink-in 180ms ease-out; }
+.marks-hit rect.box-hit { fill: none; stroke: transparent; stroke-width: 10; pointer-events: stroke; cursor: pointer; }
+.marks-hit rect.box-hit.resolved { display: none; }
+.box-draft { position: fixed; display: none; border: 2px solid; border-radius: 6px; pointer-events: none; }
+/* A note's tab: its first words, on the box's corner. */
+.pins .pin.tab { margin: -22px 0 0 -1px; height: 20px; min-width: 20px; max-width: 200px; padding: 0 7px; border-radius: 6px 6px 6px 2px;
+  font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
+.marks g.hot path { stroke-opacity: 1; stroke-width: 6; }
+.pin.elsewhere { opacity: .55; }
+.ink { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; cursor: var(--pen-cursor, crosshair); touch-action: none; }
+:host([data-mode="pen"]) .ink { pointer-events: auto; }
+.pick { position: fixed; inset: 0; pointer-events: none; }
+:host([data-mode="select"]) .pick { pointer-events: auto; cursor: default; }
+.ink path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
+.hidden-marks .marks, .hidden-marks .pins { display: none; }
+
+.pins { position: fixed; inset: 0; pointer-events: none; }
+.pin { position: absolute; left: 0; top: 0; pointer-events: auto; min-width: 22px; height: 22px; padding: 0 6px; margin: -11px 0 0 -11px;
+  border-radius: 11px 11px 11px 3px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 2px #fff; }
+.pin.resolved { background: #71717a !important; opacity: .75; }
+.pin svg { width: 12px; height: 12px; stroke-width: 3; }
+.good { background: var(--good); } .fix { background: var(--fix); } .idea { background: var(--idea); }
+
+.hover, .focus { position: fixed; left: 0; top: 0; pointer-events: none; border-radius: 3px; display: none; }
+.hover { outline: 2px solid #3b82f6; background: rgba(59,130,246,.08); }
+.focus { outline: 2px dashed #fff; box-shadow: 0 0 0 4px rgba(0,0,0,.35); }
+.focus.flash { animation: flash 1.2s ease-out forwards; }
+@keyframes flash { 0%,40% { opacity: 1 } 100% { opacity: 0 } }
+.hover span { position: absolute; left: -2px; bottom: 100%; margin-bottom: 4px; white-space: nowrap; background: #3b82f6; color: #fff;
+  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 4px 6px; border-radius: 4px; }
+.hover span.below { bottom: auto; top: 100%; margin: 4px 0 0; }
+.hover kbd { opacity: .75; font: inherit; }
+
+.bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); pointer-events: auto; display: flex; align-items: center; gap: 2px;
+  padding: 5px; background: var(--bg); border: 1px solid var(--line);
+  border-radius: 14px; box-shadow: var(--shadow); user-select: none; max-width: calc(100vw - 24px); }
+.bar .sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; flex: none; }
+.tool { height: 32px; min-width: 32px; padding: 0 9px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  color: #d4d4d8; white-space: nowrap; position: relative; z-index: 1; }
+.tool[aria-pressed="true"] { background: #fafafa; color: #18181b; }
+/* Mode buttons share one sliding pill instead of each lighting up on its own. */
+.modes { display: flex; gap: 2px; position: relative; }
+.modes .tool[aria-pressed="true"] { background: transparent; }
+.tool.icon-only { padding: 0; width: 34px; }
+/* The turn: Send your marks / the agent is on it / check its fixes. */
+.turn { height: 30px; padding: 0 12px; margin: 0 2px; border-radius: 999px; font-weight: 650; font-size: 12.5px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
+  transition: transform 140ms var(--ease-out), background-color 160ms ease, color 160ms ease; }
+@starting-style { .turn { opacity: 0; transform: scale(.9); } }
+.turn:active { transform: scale(.96); }
+.turn.send { background: #fafafa; color: #18181b; }
+.turn.check { background: #fafafa; color: #18181b; }
+.turn.send ~ .turn.check { background: rgba(255,255,255,.1); color: #fafafa; } /* one primary at a time */
+.turn.waiting { background: rgba(255,255,255,.08); color: #d4d4d8; font-weight: 500; }
+.turn.waiting i { width: 7px; height: 7px; border-radius: 50%; background: #a1a1aa; animation: waiting 1.4s ease-in-out infinite; }
+@keyframes waiting { 50% { opacity: .3; } }
+.review-idle { font-size: 12px; color: var(--muted); padding: 0 10px; white-space: nowrap; }
+.pen-ink { position: absolute; right: 6px; bottom: 6px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--bg); }
+.menu { position: fixed; pointer-events: auto; min-width: 200px; padding: 5px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
+  box-shadow: var(--shadow); display: grid; gap: 1px;
+  transition: opacity 150ms ease, transform 170ms var(--ease-out); }
+@starting-style { .menu { opacity: 0; transform: scale(.96); } }
+.menu-item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: 8px; color: #e4e4e7; text-align: left; transition: background-color 120ms ease, transform 140ms var(--ease-out); }
+.menu-item:active { transform: scale(.98); }
+@media (hover: hover) and (pointer: fine) { .menu-item:hover { background: rgba(255,255,255,.08); } }
+.menu-icon { width: 16px; height: 16px; display: grid; place-items: center; color: var(--muted); }
+.menu-swatch { width: 14px; height: 14px; border-radius: 50%; margin: 0 1px; }
+.menu-label { flex: 1; }
+.menu-check svg { width: 14px; height: 14px; color: #fafafa; }
+.menu kbd { font: 11px ui-monospace, monospace; color: #71717a; }
+.menu-note { display: flex; align-items: center; gap: 8px; padding: 8px 8px 4px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
+.menu-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--fix); } .menu-note i.ok { background: var(--good); }
+.mode-pill { position: absolute; left: 0; top: 0; height: 32px; border-radius: 9px; background: #fafafa; z-index: 0; }
+.tool .count { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.14); border-radius: 8px; padding: 1px 6px; }
+.grip { cursor: grab; padding: 0 4px 0 6px; min-width: 28px; }
+.grip svg path { stroke-dasharray: 30; }
+.bar.intro .grip svg path { animation: mark-draw 700ms 180ms var(--ease-out) backwards; }
+@keyframes mark-draw { from { stroke-dashoffset: 30; } }
+.grip:active { cursor: grabbing; }
+.verdicts { display: flex; gap: 2px; padding: 0 2px; }
+.swatch { width: 28px; height: 32px; border-radius: 9px; display: grid; place-items: center; }
+.swatch i { width: 14px; height: 14px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
+.swatch[aria-pressed="true"] { background: rgba(255,255,255,.12); }
+.swatch[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
+.status { width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin: 0 6px; flex: none; }
+.status.off { background: var(--fix); }
+.status.local { background: var(--muted); }
+.label-sm { font-size: 12px; }
+@media (max-width: 720px) { .tool .txt { display: none; } }
+@media (max-width: 480px) {
+  .bar { gap: 0; padding: 4px; overflow-x: auto; scrollbar-width: none; }
+  .bar .grip, .bar .sep { display: none; }
+  .tool { min-width: 30px; padding: 0 6px; }
+  .swatch { width: 26px; }
+  .status { margin: 0 4px; }
+}
+
+.fab { position: fixed; right: 16px; bottom: 16px; pointer-events: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--bg);
+  border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; place-items: center; font-weight: 800; color: var(--fix); font-size: 15px; }
+
+:is(.composer, .composer-out) { position: fixed; width: 320px; max-height: calc((100vh - 16px) / var(--ui-zoom, 1)); overflow-y: auto; pointer-events: auto; background: var(--bg);
+  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; display: grid; gap: 10px; }
+:is(.composer, .composer-out) header { display: flex; align-items: center; gap: 8px; min-width: 0; }
+:is(.composer, .composer-out) header code { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: rgba(255,255,255,.05); padding: 3px; border-radius: 10px; }
+.seg button { height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-weight: 600; }
+.seg button i { width: 8px; height: 8px; border-radius: 50%; }
+.seg button[aria-pressed="true"] { background: var(--bg2); color: #fff; box-shadow: inset 0 0 0 1px var(--line); }
+textarea { width: 100%; min-height: 72px; max-height: 240px; resize: none; overflow-y: auto; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 8px;
+  color: var(--text); font: inherit; padding: 8px 10px; outline: none; }
+textarea:focus { border-color: rgba(255,255,255,.35); }
+textarea::placeholder { color: #71717a; }
+.chips { display: flex; flex-wrap: wrap; gap: 4px; }
+.chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
+.chip[aria-pressed="true"] { background: #fafafa; color: #18181b; border-color: #fafafa; }
+.actions { display: flex; align-items: center; gap: 6px; }
+.actions .grow { flex: 1; }
+.btn { height: 30px; padding: 0 12px; border-radius: 8px; font-weight: 600; background: rgba(255,255,255,.08); }
+
+.btn.primary { background: #fafafa; color: #18181b; }
+
+.btn.icon { padding: 0; width: 30px; display: grid; place-items: center; color: var(--muted); }
+
+.hint { font-size: 11px; color: #71717a; }
+.resolution { font-size: 12px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); border-radius: 8px; padding: 8px 10px; color: #bbf7d0; }
+
+.panel { position: fixed; top: 12px; right: 12px; bottom: 12px; width: 340px; max-width: calc(100vw - 24px); pointer-events: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
+  display: flex; flex-direction: column; overflow: hidden; }
+.panel[hidden] { display: none; }
+.panel > header { padding: 14px 14px 10px; display: flex; align-items: center; gap: 8px; }
+.panel h2 { font-size: 14px; margin: 0; flex: 1; }
+.tabs { display: flex; gap: 4px; padding: 0 14px 10px; border-bottom: 1px solid var(--line); }
+.tabs button { font-size: 12px; padding: 4px 10px; border-radius: 999px; color: var(--muted); }
+.tabs button[aria-pressed="true"] { background: rgba(255,255,255,.1); color: #fff; }
+.items { flex: 1; overflow: auto; padding: 8px; display: grid; align-content: start; gap: 6px; }
+.item { cursor: pointer; text-align: left; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid transparent; }
+
+.item .pin { position: static; margin: 0; box-shadow: none; }
+
+.item > span { min-width: 0; }
+.item b { font-weight: 600; display: block; margin-bottom: 2px; }
+.item code { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.item p { margin: 4px 0 0; color: #d4d4d8; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+.cmp-btn { align-self: center; flex: none; }
+.sbs { display: flex; gap: 16px; align-items: flex-start; justify-content: center; max-width: 100%; max-height: calc(100vh - 140px); overflow: auto; }
+.sbs-pane { margin: 0; display: grid; gap: 6px; flex: 1 1 0; min-width: 0; }
+.sbs-pane img { max-width: 100%; max-height: calc(100vh - 180px); object-fit: contain; border-radius: 8px; background: #fff; }
+.sbs-pane figcaption { color: #e4e4e7; font-size: 12px; text-align: center; }
+.item .res { color: #86efac; font-size: 12px; margin-top: 6px; }
+.item .tagline { font-size: 11px; color: var(--muted); margin-top: 4px; }
+.width-tag { margin-left: 6px; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.1); color: var(--muted); }
+.elsewhere-toggle { display: flex; gap: 8px; align-items: center; padding: 8px 14px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); cursor: pointer; }
+.empty { color: var(--muted); padding: 24px 12px; text-align: center; line-height: 1.6; }
+.empty kbd, .hint kbd { font: 11px ui-monospace, monospace; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; color: #d4d4d8; }
+.group { display: grid; gap: 6px; }
+.group + .group { margin-top: 10px; }
+.group h3 { margin: 4px 4px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #71717a; display: flex; gap: 6px; align-items: center; }
+.group h3 .n { font-weight: 600; color: #a1a1aa; background: rgba(255,255,255,.08); border-radius: 6px; padding: 0 5px; }
+.item .ink-dot { width: 10px; height: 10px; border-radius: 50%; margin: 5px 6px 0; }
+.item { grid-template-columns: 22px 1fr; }
+.report { margin: 10px 12px 2px; padding: 12px; border-radius: 12px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); display: grid; gap: 10px; }
+.report h3 { margin: 0; font-size: 13px; }
+.report .stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
+.report .stat { font-size: 12px; color: #d4d4d8; padding: 3px 9px 3px 8px; border-radius: 999px; background: rgba(34,197,94,.12); }
+.report .stat b { font-size: 12px; letter-spacing: 0; text-transform: none; color: #86efac; font-variant-numeric: tabular-nums; }
+.report .stat.bad { background: rgba(244,63,94,.14); } .report .stat.bad b { color: #fda4af; }
+.report p { margin: 2px 0 0; color: #d4d4d8; font-size: 12.5px; line-height: 1.5; }
+.report b { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #86efac; }
+.report textarea { min-height: 34px; margin-top: 6px; font-size: 12.5px; }
+.report .questions label { display: grid; gap: 4px; margin-top: 6px; font-size: 12.5px; color: #e4e4e7; }
+.report .btn { justify-self: start; }
+.panel footer { border-top: 1px solid var(--line); padding: 12px 14px; display: grid; gap: 8px; }
+.panel footer .row { display: flex; gap: 6px; }
+.panel footer .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
+
+.toast { position: fixed; left: 50%; bottom: 76px; transform: translate(-50%, 8px) scale(.98); opacity: 0; pointer-events: none;
+  background: var(--bg); color: var(--text); border: 1px solid var(--line);
+  font-weight: 500; padding: 9px 14px 9px 12px; border-radius: 12px; box-shadow: var(--shadow); max-width: calc(100vw - 32px);
+  display: flex; align-items: center; gap: 9px; transition: opacity 160ms ease, transform 160ms var(--ease-out); }
+.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; transition-duration: 240ms; }
+.toast-action { margin-left: 4px; font-weight: 600; color: #93c5fd; padding: 2px 6px; border-radius: 6px; }
+:is(.composer, .composer-out) .what { flex: 1; min-width: 0; display: grid; gap: 2px; }
+:is(.composer, .composer-out) .what b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+:is(.composer, .composer-out) .what code { font-size: 11px; }
+
+/* shot mode (headless screenshots) and inline text editing */
+:host([data-shot]) .bar, :host([data-shot]) .fab, :host([data-shot]) .toast, :host([data-shot]) .panel, :host([data-shot]) .hover { display: none !important; }
+:host([data-text-edit]) .pick, :host([data-text-edit]) .ink { pointer-events: none !important; }
+
+/* Preview: the page exactly as visitors see it. Everything Redline draws is gone except a
+   small tab in the corner, which shows when you enter and when the pointer comes near it. */
+:host([data-preview]) :not(.preview-tab, .preview-tab *) { display: none !important; }
+.preview-tab { position: fixed; right: 14px; bottom: 14px; display: none; align-items: center; gap: 8px; padding: 6px 7px 6px 12px;
+  border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 500; border: 1px solid var(--line);
+  box-shadow: 0 10px 28px -10px rgba(0,0,0,.5); cursor: pointer; pointer-events: none; opacity: 0; transform: translateY(6px);
+  transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out); }
+:host([data-preview]) .preview-tab { display: flex; }
+.preview-tab.near, .preview-tab.announce, .preview-tab:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
+.preview-tab b { color: var(--text); font-weight: 600; }
+.preview-tab kbd { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); background: var(--bg2);
+  border-radius: 6px; padding: 4px 7px; }
+
+/* composer sections */
+:is(.composer, .composer-out).wide { width: 360px; }
+.more-section { display: grid; gap: 10px; }
+.more-section[hidden] { display: none; }
+.more-actions { display: flex; gap: 6px; }
+.btn.danger { color: #fda4af; }
+.ink-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 8px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12px; font-weight: 600; color: #e4e4e7; transition: background-color 140ms ease, transform 140ms var(--ease-out); }
+.ink-chip:active { transform: scale(.97); }
+.ink-chip i { width: 10px; height: 10px; border-radius: 50%; }
+@media (hover: hover) and (pointer: fine) { .ink-chip:hover { background: rgba(255,255,255,.12); } }
+.more-btn[aria-expanded="true"] { color: #fafafa; background: rgba(255,255,255,.1); }
+:is(.composer, .composer-out) textarea { min-height: 44px; }
+:is(.composer, .composer-out).compact { width: 260px; }
+:is(.composer, .composer-out).compact textarea { min-height: 44px; }
+:is(.composer, .composer-out).compact .chips, :is(.composer, .composer-out).compact .tools-row, :is(.composer, .composer-out).compact .adjust-slot, :is(.composer, .composer-out).compact .section-label, :is(.composer, .composer-out).compact .options, :is(.composer, .composer-out).compact .thumbs, :is(.composer, .composer-out).compact .hint { display: none; }
+:is(.composer, .composer-out).dropping { outline: 2px dashed #60a5fa; outline-offset: -4px; }
+.tools-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.section-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #71717a; margin-bottom: -4px; }
+.btn.small { height: 26px; padding: 0 9px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
+.btn.small svg { width: 14px; height: 14px; }
+.btn[disabled] { opacity: .4; cursor: not-allowed; }
+.adj-count { font-size: 10px; font-weight: 700; background: #3b82f6; color: #fff; border-radius: 8px; padding: 0 5px; }
+.adj-count:empty { display: none; }
+.adjust { display: grid; gap: 8px; }
+.adj-group { border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
+.adj-group[open] { padding-bottom: 8px; }
+.adj-group > summary { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a1a1aa; cursor: pointer; padding: 4px 0; list-style-position: inside; }
+.adj-group > .adj-row + .adj-row { margin-top: 4px; }
+.adj-input { display: inline-flex; align-items: center; gap: 3px; }
+.adj-unit { font: 11px ui-monospace, monospace; color: #71717a; }
+.adj-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
+.adj-name, .adj-label { font-size: 12px; color: #d4d4d8; text-transform: capitalize; white-space: nowrap; }
+.adj-label { cursor: ew-resize; user-select: none; }
+.adj-label:hover { color: #fff; text-decoration: underline dotted; }
+.adj-field { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: 1; }
+.adj-field.side { flex: 0 0 auto; gap: 3px; }
+.adj-field.side .adj-label { font-size: 10px; color: var(--muted); }
+.adj-sides { display: flex; gap: 6px; }
+.adj-num, .adj-hex, .adj-select { background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; height: 24px; padding: 0 6px; }
+.adj-num { width: 58px; text-align: right; }
+.adj-field.side .adj-num { width: 40px; padding: 0 4px; }
+.adj-hex { width: 84px; }
+.adj-select { width: 110px; }
+.adj-colorwrap { display: flex; gap: 4px; align-items: center; }
+.adj-color { width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
+.adj-foot { display: flex; gap: 6px; align-items: center; }
+.adj-scope { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #d4d4d8; flex-wrap: wrap; }
+.adj-scope code { font: 11px ui-monospace, monospace; color: #93c5fd; }
+
+/* references and screenshots */
+.refs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+.ref { position: relative; }
+.ref img { width: 40px; height: 30px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); cursor: zoom-in; display: block; }
+.ref-x { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: #3f3f46; font-size: 11px; line-height: 16px; }
+.thumbs { display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; padding-bottom: 2px; }
+.thumb { display: grid; gap: 3px; flex: none; }
+.thumb img { width: 84px; height: 56px; object-fit: contain; border-radius: 6px; border: 1px solid var(--line); background: #111; }
+.thumb span { font-size: 10px; color: var(--muted); max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.item .thumbs { margin-top: 8px; }
+.gallery { position: fixed; inset: 0; pointer-events: auto; background: rgba(9,9,11,.88); display: grid; place-items: center; grid-template-rows: 1fr auto; padding: 48px 24px 24px; gap: 12px; z-index: 2; }
+.gal-img, .cmp { max-width: min(1200px, 100%); max-height: calc(100vh - 140px); border-radius: 8px; box-shadow: var(--shadow); }
+.gal-img { object-fit: contain; background: #fff; }
+.gal-cap { color: #e4e4e7; font-size: 13px; }
+.gal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; }
+.gal-nav { position: absolute; top: 50%; width: 44px; height: 64px; font-size: 32px; color: #fff; background: rgba(255,255,255,.08); border-radius: 10px; }
+.gal-nav.prev { left: 12px; } .gal-nav.next { right: 12px; }
+.cmp { width: min(1100px, 92vw); position: relative; overflow: hidden; cursor: ew-resize; touch-action: none; user-select: none; background: #fff; }
+.cmp img { display: block; width: 100%; height: auto; pointer-events: none; }
+.cmp-top { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top left; }
+.cmp-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #3b82f6; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
+
+/* options */
+.options { display: grid; gap: 6px; }
+.opt-row { display: flex; flex-wrap: wrap; gap: 4px; }
+.opt { font-size: 12px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); color: #d4d4d8; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.opt[aria-pressed="true"] { background: #fafafa; color: #18181b; border-color: #fafafa; }
+.opt.chosen { box-shadow: 0 0 0 2px var(--good); }
+.opt-note { font-size: 12px; color: var(--muted); }
+.opt-wait { font-size: 12px; color: #fcd34d; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.btn.small.primary { background: #fafafa; color: #18181b; }
+.item .badge { font-size: 10px; font-weight: 700; border-radius: 6px; padding: 1px 6px; margin-left: 6px; background: rgba(59,130,246,.2); color: #93c5fd; }
+
+/* devices stage */
+.stage { position: fixed; inset: 0; pointer-events: auto; background: #18181b; display: grid; grid-template-rows: auto 1fr; }
+.stage[hidden] { display: none; }
+.stage-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: #e4e4e7; font-size: 13px; border-bottom: 1px solid var(--line); }
+.stage-head .grow { flex: 1; }
+.stage-head label { display: flex; gap: 6px; align-items: center; color: var(--muted); }
+.stage-frames { display: flex; gap: 24px; justify-content: center; align-items: flex-start; padding: 16px 16px 80px; overflow: auto; }
+.device { display: grid; gap: 6px; justify-items: start; flex: none; }
+.device-label { font-size: 12px; color: var(--muted); }
+.device-box { overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), var(--shadow); background: #fff; }
+.device-box iframe { border: 0; display: block; transform-origin: 0 0; background: #fff; }
+:host([data-frame]) .bar, :host([data-frame]) .fab { display: none !important; }
+:is(.composer, .composer-out), .toast { zoom: var(--ui-zoom, 1); }
+.pins .pin { scale: var(--pin-scale, 1); }
+.stage-head .sep-v { width: 1px; height: 18px; background: var(--line); }
+:host([data-devices]) .pick, :host([data-devices]) .ink, :host([data-devices]) .marks, :host([data-devices]) .pins { display: none; }
+
+/* ------------------------------------------------ motion & feel */
+/* Press feedback: everything you can press gives a little under your finger. */
+.tool, .btn, .swatch, .chip, .opt, .seg button, .item, .thumb, .fab, .pin, .gal-nav, .gal-close, .toast-action {
+  transition: transform 140ms var(--ease-out), background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, opacity 140ms ease; }
+.tool:active, .btn:active, .chip:active, .opt:active, .seg button:active, .thumb:active, .toast-action:active { transform: scale(.97); }
+.swatch:active, .fab:active, .pin:active { transform: scale(.92); }
+.item:active { transform: scale(.99); }
+.mode-pill.animate { transition: transform 200ms var(--ease-out), width 200ms var(--ease-out); }
+.swatch i { transition: box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out); }
+.swatch[aria-pressed="true"] i { transform: scale(1.08); }
+/* Hover only where there is a real pointer (touch would stick). */
+@media (hover: hover) and (pointer: fine) {
+  .tool:hover { background: rgba(255,255,255,.08); color: #fff; }
+  .modes .tool[aria-pressed="true"]:hover { background: transparent; color: #18181b; }
+  .btn:hover { background: rgba(255,255,255,.14); }
+  .btn.primary:hover { background: #fff; }
+  .btn.icon:hover { color: var(--fix); }
+  .item:hover { background: rgba(255,255,255,.07); border-color: var(--line); }
+  .pins .pin:hover { box-shadow: 0 4px 14px rgba(0,0,0,.4), 0 0 0 2px #fff; transform: scale(1.12); }
+  .toast-action:hover { background: rgba(147,197,253,.12); }
+  .thumb:hover img { border-color: rgba(255,255,255,.35); }
+}
+
+/* Surfaces enter from where they come from, quickly; leave faster. */
+:is(.composer, .composer-out) { transition: opacity 180ms ease, transform 200ms var(--ease-out); transform-origin: var(--origin, top left); }
+@starting-style { .composer { opacity: 0; transform: scale(.96); } }
+.composer-out { opacity: 0; transform: scale(.98); transition-duration: 120ms; pointer-events: none; }
+.panel:not([hidden]) { transition: transform 260ms var(--ease-drawer), opacity 200ms ease; }
+@starting-style { .panel:not([hidden]) { transform: translateX(20px); opacity: 0; } }
+.panel.opening .item { animation: item-in 260ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
+@keyframes item-in { from { opacity: 0; transform: translateY(6px); } }
+.gallery { transition: opacity 180ms ease; }
+@starting-style { .gallery { opacity: 0; } }
+.gallery .gal-img, .gallery .cmp, .gallery .sbs { transition: transform 220ms var(--ease-out); }
+@starting-style { .gallery .gal-img, .gallery .cmp, .gallery .sbs { transform: scale(.97); } }
+.bar.intro { animation: bar-in 420ms var(--ease-out) backwards; }
+@keyframes bar-in { from { opacity: 0; transform: translate(-50%, 14px); } }
+.hover span { box-shadow: 0 2px 8px rgba(0,0,0,.25); border-radius: 5px; letter-spacing: .01em; }
+
+/* A new pin lands; a fixed one rings green once. Rare moments, so they may play. */
+/* Mark chip: the receipt after a stroke. Small, near the ink, never in the way. */
+.mark-chip { position: fixed; pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 6px;
+  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); font-size: 12px; transform-origin: left bottom;
+  transition: opacity 160ms ease, transform 180ms var(--ease-out); }
+@starting-style { .mark-chip { opacity: 0; transform: scale(.9) translateY(4px); } }
+.mark-chip.out { opacity: 0; transform: scale(.96); transition-duration: 120ms; pointer-events: none; }
+.chip-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); transition: transform 140ms var(--ease-out), background-color 160ms ease; }
+.chip-dot:active { transform: scale(.85); }
+.chip-label { color: #d4d4d8; padding: 0 4px 0 2px; white-space: nowrap; }
+.chip-btn { height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.1); font-weight: 600; font-size: 12px; transition: transform 140ms var(--ease-out), background-color 140ms ease; }
+.chip-btn:active { transform: scale(.95); }
+.chip-btn.icon { width: 24px; padding: 0; display: grid; place-items: center; color: var(--muted); }
+.chip-btn.icon svg { width: 12px; height: 12px; }
+@media (hover: hover) and (pointer: fine) { .chip-btn:hover { background: rgba(255,255,255,.18); } .chip-btn.icon:hover { color: var(--fix); } }
+.pins .pin.pop { animation: pin-pop 240ms var(--ease-pop) backwards; }
+@keyframes pin-pop { from { opacity: 0; transform: scale(.55); } }
+.pins .pin.just-resolved { animation: pin-done 900ms var(--ease-out); }
+@keyframes pin-done { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(34,197,94,.7); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 16px rgba(34,197,94,0); } }
+.marks g.pop path { animation: ink-in 180ms ease-out; }
+@keyframes ink-in { from { opacity: 0; } }
+
+/* Toast icons */
+.toast-icon { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; }
+.toast-icon.ok { background: rgba(34,197,94,.18); color: var(--good); }
+.toast-icon.info { background: rgba(147,197,253,.15); color: #93c5fd; }
+.toast-icon.warn { background: rgba(244,63,94,.18); color: var(--fix); }
+.toast-icon svg { width: 12px; height: 12px; stroke-width: 3; }
+.toast-icon.draw path { stroke-dasharray: 24; animation: check-draw 280ms var(--ease-out) backwards; }
+@keyframes check-draw { from { stroke-dashoffset: 24; } }
+
+/* First-run coachmark */
+.demo-intro { position: fixed; left: 50%; bottom: 84px; width: min(440px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: auto;
+  background: #18181b; color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.55);
+  padding: 16px 18px; display: grid; gap: 8px; transition: opacity 160ms ease, translate 160ms var(--ease-out); }
+@starting-style { .demo-intro { opacity: 0; translate: 0 8px; } }
+.demo-intro.out { opacity: 0; translate: 0 6px; }
+.demo-intro .demo-tag { justify-self: start; font-size: 11px; font-weight: 600; color: #a1a1aa; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
+.demo-intro h2 { margin: 2px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
+.demo-intro p { margin: 0; font-size: 13px; line-height: 1.5; color: #a1a1aa; }
+.demo-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
+.demo-actions .btn { height: 32px; padding: 0 12px; }
+.coach { position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%); pointer-events: auto; background: #fafafa; color: #18181b;
+  border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 32px);
+  animation: coach-in 420ms 500ms var(--ease-out) backwards; }
+@keyframes coach-in { from { opacity: 0; transform: translate(-50%, 10px); } }
+.coach b { font-weight: 650; }
+.coach kbd { font: 600 11px ui-monospace, monospace; padding: 2px 6px; border-radius: 5px; background: #f4f4f5; border: 1px solid #e4e4e7; }
+.coach .step { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
+.coach .dismiss { font-weight: 600; color: #52525b; padding: 4px 8px; border-radius: 7px; }
+.coach .dismiss:hover { background: #f4f4f5; }
+.coach::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fafafa; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
+
+/* Reduced motion: keep gentle fades, drop movement. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-property: opacity, background-color, color, border-color !important; }
+  @starting-style { :is(.composer, .composer-out), .panel:not([hidden]), .gallery .gal-img { transform: none; } }
+}
+`;
+// A constructed stylesheet isn't subject to the page's CSP; <style> is the fallback for old browsers.
+function addStyles(css) {
+  try {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+  } catch {
+    const sheet = document.createElement('style');
+    sheet.textContent = css;
+    root.prepend(sheet);
+  }
+}
+addStyles(CSS_TEXT);
+
+const marks = s('svg', { class: 'marks' });
+const ink = s('svg', { class: 'ink' });
+const marksHit = s('svg', { class: 'marks-hit' });
+const pick = h('div', { class: 'pick' });
+const pins = h('div', { class: 'pins' });
+const hoverBox = h('div', { class: 'hover' }, h('span'));
+const focusBox = h('div', { class: 'focus' });
+const bar = h('div', { class: 'bar', role: 'toolbar', 'aria-label': 'Redline design feedback' });
+const fab = h('button', { class: 'fab', title: 'Open Redline (design feedback)', 'aria-label': 'Open Redline', html: ICONS.mark });
+const panel = h('aside', { class: 'panel', hidden: true, 'aria-label': 'Feedback notes' });
+const toastEl = h('div', { class: 'toast', role: 'status' });
+const previewTab = h('button', { class: 'preview-tab', type: 'button', 'aria-label': 'Show Redline again', title: 'Show Redline (\\)' },
+  h('b', {}, 'Redline hidden'), h('kbd', {}, '\\'), 'to show');
+const layer = h('div', { class: 'layer' });
+layer.append(marks, pick, ink, marksHit, pins, hoverBox, focusBox); // marks stay clickable in browse and pen mode
+root.append(layer, bar, fab, panel, toastEl, previewTab);
+
+// ---------------------------------------------------------------- event isolation
+
+// Keep the page's scripts from reacting to what happens inside the overlay:
+// focus traps in the site's own modals would pull focus out of the note field,
+// and global hotkeys would fire while typing (events from the shadow tree reach
+// the page retargeted to <redline-overlay>, which doesn't look like an input).
+// Focus and mouse events are stopped at window capture, before any page
+// listener; the overlay itself only uses pointer and click events.
+for (const type of ['focusin', 'focusout', 'focus', 'blur', 'mousedown', 'mouseup', 'touchstart', 'touchend']) {
+  addEventListener(type, (e) => eventIsOurs(e) && e.stopImmediatePropagation(), true);
+}
+// Everything else is stopped as it bubbles out of the overlay, after our own handlers ran.
+for (const type of ['keydown', 'keyup', 'keypress', 'beforeinput', 'input', 'change', 'click', 'dblclick', 'pointerdown', 'pointerup', 'pointermove', 'wheel', 'contextmenu', 'paste', 'copy', 'cut', 'compositionstart', 'compositionend', 'submit']) {
+  host.addEventListener(type, (e) => e.stopPropagation());
+}
+
+// ---------------------------------------------------------------- toast
+
+let toastTimer;
+const TOAST_ICONS = {
+  ok: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>',
+  warn: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round"><path d="M12 7v6M12 17h.01"/></svg>',
+  info: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round"><path d="M12 11v6M12 7h.01"/></svg>',
+};
+// Tone from the wording, so every call site stays a one-liner.
+function toneOf(msg) {
+  if (/^(Could not|Redline server)|failed|blocked/i.test(msg)) return 'warn';
+  if (/resolved|saved|Picked|Copied|All clear|Deleted|now points|is back|Sent round|Accepted/i.test(msg)) return 'ok';
+  return 'info';
+}
+function toast(msg, action, { celebrate = false } = {}) {
+  const tone = toneOf(msg);
+  toastEl.replaceChildren(h('span', { class: `toast-icon ${tone}${celebrate || tone === 'ok' ? ' draw' : ''}`, html: TOAST_ICONS[tone] }), h('span', {}, msg));
+  if (action) {
+    toastEl.append(h('button', { class: 'toast-action', onclick: () => (toastEl.classList.remove('show'), action.run()) }, action.label));
+  }
+  toastEl.classList.add('show');
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => toastEl.classList.remove('show'), action ? 6000 : 2200);
+}
+
+// ---------------------------------------------------------------- toolbar
+
+// Ink colours carry the meaning: red = change, green = keep, amber = idea.
+const INKS = [
+  { v: 'fix', name: 'Change', key: '1' },
+  { v: 'good', name: 'Keep', key: '2' },
+  { v: 'idea', name: 'Idea', key: '3' },
+];
+const inkOf = (v) => INKS.find((i) => i.v === v) || INKS[0];
+
+function renderBar() {
+  bar.hidden = state.collapsed;
+  fab.hidden = !state.collapsed;
+  host.dataset.mode = state.mode;
+  layer.classList.toggle('hidden-marks', state.hidden);
+  const tool = (mode, key, text, icon) =>
+    h('button', { class: 'tool icon-only', 'aria-pressed': String(state.mode === mode), title: `${text} (${key})`, 'aria-label': text, onclick: () => setMode(mode), html: ICONS[icon] });
+  // The toolbar holds the next step and nothing else: use the site, mark it, and
+  // whichever turn applies (Send, With agent, Check). Everything else is behind ⋯.
+  const pen = tool('pen', 'P', 'Pen: draw, or click something to say why', 'pen');
+  const review = state.reviewOnly;
+  // The ink shows on the pen only when it isn't the default red (1 · 2 · 3 change it).
+  if (state.verdict !== 'fix') pen.append(h('i', { class: 'pen-ink', style: `background:${COLORS[state.verdict]}` }));
+  fill(bar,
+    h('button', { class: 'tool grip', title: 'Redline · drag to move', 'aria-label': 'Move toolbar', html: ICONS.mark, onpointerdown: startDrag }),
+    // Opened from a shared Check link: no tools, only the turn (someone else marks the page).
+    review ? null : h('div', { class: 'modes', role: 'group', 'aria-label': 'Tool' }, modePill, tool('browse', 'V', 'Pointer', 'browse'), pen,
+      // Box (B) is for the rare area that isn't an element: it shows up only while in use.
+      state.mode === 'select' ? tool('select', 'B', 'Box an area', 'box') : null),
+    turnPill(),
+    review && !turnPill().some(Boolean) ? h('span', { class: 'review-idle' }, 'Nothing to check') : null,
+    h('button', {
+      class: 'tool icon-only',
+      title: 'More',
+      'aria-label': 'More',
+      'aria-haspopup': 'menu',
+      html: ICONS.more,
+      onclick: (e) => openMenu(e.currentTarget, [
+        { label: 'Notes', key: 'L', icon: ICONS.list, checked: state.panel, run: togglePanel },
+        review ? null : { label: 'Box an area', key: 'B', icon: ICONS.box, checked: state.mode === 'select', run: () => setMode(state.mode === 'select' ? 'pen' : 'select') },
+        review ? null : { label: 'Devices', key: 'D', icon: ICONS.devices, checked: state.devices, run: toggleDevices },
+        review ? null : { label: 'Copy for AI', key: 'C', icon: ICONS.copy, run: copyPrompt },
+        // Proof that leaves the tool: the round as one page, and a link that opens straight into Check.
+        SERVER && (state.rounds || []).length ? { label: 'Round report', icon: ICONS.report, run: () => window.open(withKey(SERVER + '/__redline/api/report'), '_blank', 'noopener') } : null,
+        SERVER && !review ? { label: 'Copy review link', icon: ICONS.link, run: copyCheckLink } : null,
+        hasPreviews() ? { label: state.previewEdits ? 'Show the page as built' : 'Show my edits', key: 'E', icon: ICONS.split, run: togglePreviews } : null,
+        { label: 'Preview the page', key: '\\', icon: ICONS.eye, run: () => setPreviewMode(true) },
+        { label: state.hidden ? 'Show marks' : 'Hide marks', key: 'H', icon: state.hidden ? ICONS.eye : ICONS.eyeOff, run: toggleHidden },
+        { label: 'Minimize', icon: ICONS.minimize, run: () => setCollapsed(true) },
+        { note: SERVER ? (state.connected ? 'Synced with your project' : 'Redline server offline') : 'Saved in this browser only', ok: !SERVER || state.connected },
+      ]),
+    }),
+  );
+  const pos = prefs('barPos');
+  if (pos) Object.assign(bar.style, { left: pos.x + 'px', top: pos.y + 'px', bottom: 'auto', transform: 'none' });
+  placeModePill();
+  host.style.setProperty('--pen-cursor', penCursor(COLORS[state.verdict]));
+}
+
+// A small menu that grows out of its button; closes on choice, Esc or a click elsewhere.
+let menuEl = null;
+function closeMenu() {
+  if (menuEl) menuEl.remove();
+  menuEl = null;
+}
+function openMenu(anchor, items) {
+  const again = menuEl && menuEl.anchor === anchor;
+  closeMenu();
+  if (again) return;
+  const el = h('div', { class: 'menu', role: 'menu' },
+    items.filter(Boolean).map((it) =>
+      it.note
+        ? h('div', { class: 'menu-note' }, h('i', { class: it.ok ? 'ok' : 'off' }), it.note)
+        : h('button', {
+            class: 'menu-item',
+            role: 'menuitem',
+            'aria-checked': it.checked === undefined ? null : String(!!it.checked),
+            onclick: () => {
+              closeMenu();
+              it.run();
+            },
+          },
+          it.swatch ? h('i', { class: 'menu-swatch', style: `background:${it.swatch}` }) : h('span', { class: 'menu-icon', html: it.icon || '' }),
+          h('span', { class: 'menu-label' }, it.label),
+          it.checked ? h('span', { class: 'menu-check', html: ICONS.check }) : null,
+          it.key ? h('kbd', {}, it.key) : null)),
+  );
+  el.anchor = anchor;
+  root.append(el);
+  const r = anchor.getBoundingClientRect();
+  const w = el.offsetWidth, hh = el.offsetHeight;
+  const above = r.top - hh - 8 > 8;
+  el.style.left = Math.min(Math.max(8, r.left + r.width / 2 - w / 2), innerWidth - w - 8) + 'px';
+  el.style.top = (above ? r.top - hh - 8 : r.bottom + 8) + 'px';
+  el.style.transformOrigin = above ? 'bottom center' : 'top center';
+  menuEl = el;
+}
+addEventListener('pointerdown', (e) => menuEl && !e.composedPath().includes(menuEl) && !e.composedPath().includes(menuEl.anchor) && closeMenu(), true);
+
+// The pill glides to the chosen mode; switching by keyboard (done all day) is instant.
+const modePill = h('span', { class: 'mode-pill', 'aria-hidden': 'true' });
+let pillAt = null;
+function placeModePill() {
+  requestAnimationFrame(() => {
+    const btn = bar.querySelector('.modes .tool[aria-pressed="true"]');
+    if (!btn || !btn.offsetWidth) return;
+    const next = { x: btn.offsetLeft, w: btn.offsetWidth };
+    const glide = pillAt && !state.viaKeyboard && (pillAt.x !== next.x || pillAt.w !== next.w);
+    modePill.classList.toggle('animate', !!glide);
+    modePill.style.transform = `translateX(${next.x}px)`;
+    modePill.style.width = next.w + 'px';
+    pillAt = next;
+  });
+}
+
+// Pen cursor: a dot in the colour you're about to draw with.
+function penCursor(color) {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="5" fill="${color}" stroke="white" stroke-width="2"/><circle cx="10" cy="10" r="7.5" fill="none" stroke="rgba(0,0,0,.25)"/></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}") 10 10, crosshair`;
+}
+
+function startDrag(e) {
+  e.preventDefault();
+  const r = bar.getBoundingClientRect();
+  const off = { x: e.clientX - r.left, y: e.clientY - r.top };
+  const move = (ev) => {
+    const x = Math.min(Math.max(ev.clientX - off.x, 4), innerWidth - r.width - 4);
+    const y = Math.min(Math.max(ev.clientY - off.y, 4), innerHeight - r.height - 4);
+    Object.assign(bar.style, { left: x + 'px', top: y + 'px', bottom: 'auto', transform: 'none' });
+  };
+  const up = () => {
+    removeEventListener('pointermove', move, true);
+    removeEventListener('pointerup', up, true);
+    const b = bar.getBoundingClientRect();
+    prefs('barPos', { x: b.left, y: b.top });
+  };
+  addEventListener('pointermove', move, true);
+  addEventListener('pointerup', up, true);
+}
+
+fab.addEventListener('click', () => setCollapsed(false));
+
+function setCollapsed(v) {
+  state.collapsed = v;
+  prefs('collapsed', v);
+  if (v) setMode('browse');
+  renderBar();
+}
+
+// Preview hides everything Redline draws, so the page looks exactly as it will ship.
+// The backslash key toggles it; the choice survives the agent's live reloads (this tab only), and a
+// ?redline=off link opens straight into it without remembering it.
+let previewTimer;
+function setPreviewMode(on, { remember = true } = {}) {
+  state.preview = on;
+  if (remember) sessionPref('preview', on ? '1' : null);
+  if (on) {
+    setMode('browse');
+    hoverBox.style.display = 'none';
+  }
+  host.toggleAttribute('data-preview', on);
+  // Say where the way back is, once, then keep the tab out of sight until the pointer comes near.
+  clearTimeout(previewTimer);
+  previewTab.classList.toggle('announce', on);
+  if (on) previewTimer = setTimeout(() => previewTab.classList.remove('announce'), 2600);
+}
+previewTab.addEventListener('click', () => setPreviewMode(false));
+addEventListener(
+  'pointermove',
+  (e) => {
+    if (!state.preview) return;
+    const near = innerWidth - e.clientX < 220 && innerHeight - e.clientY < 110;
+    if (near !== previewTab.classList.contains('near')) previewTab.classList.toggle('near', near);
+  },
+  { passive: true },
+);
+
+function setMode(mode) {
+  if (state.mode === mode || (state.reviewOnly && mode !== 'browse')) return;
+  state.mode = mode;
+  sessionPref('mode', mode === 'browse' ? null : mode);
+  state.hoverEl = null;
+  hoverBox.style.display = 'none';
+  if (mode !== 'browse') closeCoach();
+  hideMarkChip(true);
+  renderBar();
+  syncFrames();
+}
+
+function setVerdict(v) {
+  state.verdict = v;
+  prefs('verdict', v);
+  renderBar();
+  syncFrames();
+  if (state.composer) state.composer.setVerdict(v);
+}
+
+function toggleHidden() {
+  state.hidden = !state.hidden;
+  renderBar();
+}
+
+// ---------------------------------------------------------------- geometry of annotations
+
+const elCache = new Map();
+function anchorEl(a) {
+  if (!a.target) return null;
+  const cached = elCache.get(a.id);
+  if (cached && cached.selector === a.target.selector && cached.el && cached.el.isConnected) return cached.el;
+  const el = queryOne(a.target.selector);
+  elCache.set(a.id, { el, selector: a.target.selector });
+  return el;
+}
+
+// Where an annotation's element is right now: on screen, present but hidden at
+// this width (display:none, collapsed menu), or gone from the page.
+function anchorRect(a) {
+  const el = anchorEl(a);
+  if (!el || !el.isConnected) return { state: 'missing' };
+  const r = el.getBoundingClientRect();
+  return r.width || r.height ? { state: 'visible', r } : { state: 'hidden' };
+}
+
+function breakpoint(w) {
+  return w < 768 ? 'mobile' : w < 1100 ? 'tablet' : 'desktop';
+}
+
+function madeElsewhere(a) {
+  return !!a.viewport && breakpoint(a.viewport.w) !== breakpoint(innerWidth);
+}
+
+// How to draw a stroke right now. Marks are stored relative to their element and
+// scaled with it, so a circle drawn at 1440px still surrounds the same card at
+// 390px; if the element is gone, they fall back to where they were drawn on the page.
+function strokeFrame(a, at = anchorRect(a)) {
+  const st = a.stroke || {};
+  if (at.state === 'visible' && st.local) {
+    const t = (a.target && a.target.rect) || {};
+    return { mode: 'local', tx: at.r.left, ty: at.r.top, sx: t.w ? at.r.width / t.w : 1, sy: t.h ? at.r.height / t.h : 1 };
+  }
+  return { mode: 'page', tx: -scrollX, ty: -scrollY, sx: 1, sy: 1 };
+}
+
+// Viewport-space points of a stroke (for hit-testing and joining strokes).
+function strokePaths(a, at) {
+  const f = strokeFrame(a, at);
+  const src = f.mode === 'local' ? a.stroke.local : a.stroke.paths || [];
+  return src.map((path) => path.map(([x, y]) => [f.tx + x * f.sx, f.ty + y * f.sy]));
+}
+
+// The box a note draws: its drawn region (scaled with the element) or the whole element.
+function noteRect(a, at = anchorRect(a)) {
+  const t = (a.target && a.target.rect) || null;
+  const reg = a.region;
+  if (at.state === 'visible') {
+    if (!reg) return { left: at.r.left, top: at.r.top, width: at.r.width, height: at.r.height };
+    const sx = t && t.w ? at.r.width / t.w : 1, sy = t && t.h ? at.r.height / t.h : 1;
+    return { left: at.r.left + reg.x * sx, top: at.r.top + reg.y * sy, width: reg.w * sx, height: reg.h * sy };
+  }
+  if (!t) return null;
+  if (reg) return { left: t.x + reg.x - scrollX, top: t.y + reg.y - scrollY, width: reg.w, height: reg.h };
+  return { left: t.x - scrollX, top: t.y - scrollY, width: t.w, height: t.h };
+}
+
+function pinPoint(a, at = anchorRect(a)) {
+  if (a.kind === 'stroke') {
+    const f = strokeFrame(a, at);
+    const first = ((f.mode === 'local' ? a.stroke.local : a.stroke.paths) || [])[0];
+    return first && first.length ? { x: f.tx + first[0][0] * f.sx, y: f.ty + first[0][1] * f.sy } : null;
+  }
+  // A note's tab sits on the top-left corner of its box.
+  const r = noteRect(a, at);
+  return r ? { x: r.left, y: r.top } : null;
+}
+
+const fmt = (n) => Math.round(n * 10) / 10;
+
+// A smooth curve through the points: Catmull-Rom segments as cubic Béziers.
+function smoothPath(points) {
+  if (!points.length) return '';
+  const p = points;
+  let d = `M${fmt(p[0][0])},${fmt(p[0][1])}`;
+  if (p.length === 1) return d + ` L${fmt(p[0][0])},${fmt(p[0][1])}`;
+  for (let i = 0; i < p.length - 1; i++) {
+    const p0 = p[i - 1] || p[i], p1 = p[i], p2 = p[i + 1], p3 = p[i + 2] || p2;
+    d += ` C${fmt(p1[0] + (p2[0] - p0[0]) / 6)},${fmt(p1[1] + (p2[1] - p0[1]) / 6)}` +
+      ` ${fmt(p2[0] - (p3[0] - p1[0]) / 6)},${fmt(p2[1] - (p3[1] - p1[1]) / 6)} ${fmt(p2[0])},${fmt(p2[1])}`;
+  }
+  return d;
+}
+
+// ---------------------------------------------------------------- rendering marks & pins
+
+const nodes = new Map(); // id -> { pin, paths: [svg path] }
+
+// What was on screen last time, so only genuinely new pins pop in (not every reload).
+let seenPins = null; // Map id -> status
+
+function rebuildMarks() {
+  marks.replaceChildren();
+  marksHit.replaceChildren();
+  pins.replaceChildren();
+  nodes.clear();
+  const seen = seenPins;
+  seenPins = new Map(state.annotations.map((a) => [a.id, a.status]));
+  for (const a of state.annotations) {
+    // Accepted fixes are done: they leave the page, unless they changed since.
+    const broken = guardBroken(a);
+    if (a.accepted && !broken) continue;
+    const resolved = a.status === 'resolved' && !a.accepted; // fixed by the agent, waiting for your check
+    const sent = !a.draft && !resolved;
+    const isNew = seen && !seen.has(a.id);
+    const justResolved = seen && seen.get(a.id) === 'open' && resolved;
+    // Drawn marks carry no numbered badge: the ink itself is the handle (see hit paths below).
+    const isStroke = a.kind === 'stroke' && a.stroke;
+    const ink = a.verdict;
+    const pin = isStroke && !resolved && !broken ? null : h('button', {
+      class: `pin tab ${resolved ? 'check' : broken ? 'changed' : ink}${sent && !broken ? ' sent' : ''}`,
+      title: `#${a.n} ${VERDICTS[a.verdict].label}${a.comment ? ': ' + a.comment : ''}${resolved ? ' (resolved)' : ''}${a.viewport ? ` · made at ${a.viewport.w}px` : ''}`,
+      'aria-label': `Feedback ${a.n}: ${VERDICTS[a.verdict].label}`,
+      onclick: (e) => {
+        e.stopPropagation();
+        resolved || broken ? startCheck(a.id) : openComposer({ annotation: a });
+      },
+      // In pen mode, dragging from a pin draws (re-marking reviewed elements); a click still opens it.
+      onpointerdown: (e) => state.mode === 'pen' && e.button === 0 && startStroke(e, a),
+    });
+    if (pin) {
+      // The tab shows the start of the note, or invites one.
+      const first = a.comment || (a.thread && a.thread[0] && a.thread[0].text) || '';
+      pin.textContent = resolved ? 'Fixed' : broken ? 'Changed' : first ? (first.length > 26 ? first.slice(0, 25) + '…' : first) : '+';
+      if (isNew) pin.classList.add('pop');
+      if (justResolved) pin.classList.add('just-resolved');
+      pins.append(pin);
+    }
+    let group = null;
+    let hit = null;
+    let box = null;
+    if (!isStroke) {
+      box = s('rect', { class: `box ${ink}${resolved ? ' fixed' : ''}${broken ? ' changed' : sent ? ' sent' : ''}${isNew ? ' pop' : ''}`, rx: 6 });
+      const boxHit = s('rect', { class: 'box-hit', rx: 6 });
+      boxHit.addEventListener('pointerenter', () => box.classList.add('hot'));
+      boxHit.addEventListener('pointerleave', () => box.classList.remove('hot'));
+      boxHit.addEventListener('click', () => (resolved || broken ? startCheck(a.id) : openComposer({ annotation: a })));
+      boxHit.addEventListener('pointerdown', (e) => state.mode === 'pen' && e.button === 0 && startStroke(e, a));
+      pin.addEventListener('pointerenter', () => box.classList.add('hot'));
+      pin.addEventListener('pointerleave', () => box.classList.remove('hot'));
+      marks.append(box);
+      marksHit.append(boxHit);
+      hit = boxHit;
+    }
+    if (isStroke) {
+      group = s('g', { class: (resolved ? 'fixed' : '') + (broken ? ' changed' : sent ? ' sent' : '') + (isNew ? ' pop' : '') });
+      // A wider, invisible copy of the line above the drawing surface: hover it to
+      // see which mark it is, click to open its (optional) note, drag in pen mode to draw.
+      hit = s('g');
+      const tip = s('title');
+      tip.textContent = `${VERDICTS[a.verdict].label} · ${describeMark(a.stroke.paths)}${a.comment ? ': ' + a.comment : ''}`;
+      hit.append(tip);
+      for (let i = 0; i < (a.stroke.paths || []).length; i++) {
+        // non-scaling-stroke keeps the line width constant when the mark is scaled with its element.
+        group.append(s('path', { stroke: COLORS[a.verdict], 'stroke-width': a.stroke.width || 4, 'stroke-opacity': '.85', 'vector-effect': 'non-scaling-stroke' }));
+        hit.append(s('path', { stroke: 'transparent', 'stroke-width': 18, 'vector-effect': 'non-scaling-stroke' }));
+      }
+      hit.addEventListener('pointerenter', () => group.classList.add('hot'));
+      hit.addEventListener('pointerleave', () => group.classList.remove('hot'));
+      hit.addEventListener('pointerdown', (e) => state.mode === 'pen' && e.button === 0 && startStroke(e, a));
+      hit.addEventListener('click', (e) => (resolved || broken ? startCheck(a.id) : openComposer({ annotation: a, point: { x: e.clientX, y: e.clientY } })));
+      marks.append(group);
+      marksHit.append(hit);
+      if (pin) {
+        pin.addEventListener('pointerenter', () => group.classList.add('hot'));
+        pin.addEventListener('pointerleave', () => group.classList.remove('hot'));
+      }
+    }
+    nodes.set(a.id, { pin, group, hit, box, last: {} });
+  }
+  positionMarks();
+}
+
+// Write only what changed: most frames (the periodic layout check) move nothing.
+function put(n, key, value, apply) {
+  if (n.last[key] !== value) {
+    n.last[key] = value;
+    apply(value);
+  }
+}
+
+const FAN = [[0, 0], [-22, 0], [22, 0], [0, 22], [-22, 22], [22, 22], [-44, 0], [44, 0], [0, -22], [-44, 22], [44, 22]];
+
+function positionMarks() {
+  // Read all geometry first, then write, so the browser lays out once per frame.
+  const frames = state.annotations.map((a) => ({ a, n: nodes.get(a.id), at: anchorRect(a) }));
+  const placed = [];
+  const margin = 200;
+  for (const { a, n, at } of frames) {
+    if (!n) continue;
+    // Hidden at this width (e.g. a note on the mobile menu, seen on desktop): don't float it somewhere random.
+    const show = at.state !== 'hidden';
+    // Items made at another screen width are about another layout; they stay in
+    // the Notes panel but only draw on the page when asked to.
+    const otherWidth = madeElsewhere(a) && !state.showElsewhere;
+    const p = show && !otherWidth && pinPoint(a, at);
+    const onScreen = p && p.y > -margin && p.y < innerHeight + margin;
+    const elsewhere = at.state === 'missing' || madeElsewhere(a);
+    if (n.pin) put(n, 'pinShown', !!onScreen, (v) => (n.pin.style.display = v ? '' : 'none'));
+    put(n, 'elsewhere', elsewhere, (v) => {
+      if (n.pin) n.pin.classList.toggle('elsewhere', v);
+      if (n.group) n.group.classList.toggle('elsewhere', v);
+    });
+    if (n.box) {
+      const r = show && !otherWidth ? noteRect(a, at) : null;
+      put(n, 'boxRect', r ? `${Math.round(r.left)},${Math.round(r.top)},${Math.round(r.width)},${Math.round(r.height)}` : '', (v) => {
+        for (const el of [n.box, n.hit]) {
+          if (!v) {
+            el.style.display = 'none';
+            continue;
+          }
+          const [x, y, w, hh] = v.split(',');
+          el.style.display = '';
+          el.setAttribute('x', x);
+          el.setAttribute('y', y);
+          el.setAttribute('width', Math.max(0, w));
+          el.setAttribute('height', Math.max(0, hh));
+        }
+      });
+    }
+    if (onScreen && n.pin) {
+      // Keep pins on screen horizontally, and fan out pins that land on the same spot.
+      // A fixed list of nearby spots, so crowded pins can never loop.
+      const clampX = (x) => Math.min(Math.max(x, 14), innerWidth - 14);
+      let spot = { x: clampX(p.x), y: p.y };
+      for (const [dx, dy] of FAN) {
+        const c = { x: clampX(p.x + dx), y: p.y + dy };
+        if (!placed.some((q) => Math.abs(q.x - c.x) < 16 && Math.abs(q.y - c.y) < 16)) {
+          spot = c;
+          break;
+        }
+      }
+      placed.push(spot);
+      put(n, 'pin', `${Math.round(spot.x)}px ${Math.round(spot.y)}px`, (v) => (n.pin.style.translate = v));
+    }
+    if (n.group) {
+      const f = show && !otherWidth ? strokeFrame(a, at) : null;
+      const visible = !!f && (f.mode === 'page' || (at.r.bottom > -margin && at.r.top < innerHeight + margin));
+      put(n, 'groupShown', visible, (v) => {
+        n.group.style.display = v ? '' : 'none';
+        n.hit.style.display = v ? '' : 'none';
+      });
+      if (!visible) continue;
+      put(n, 'mode', f.mode, (mode) => {
+        const src = mode === 'local' ? a.stroke.local : a.stroke.paths || [];
+        [...n.group.children].forEach((path, i) => path.setAttribute('d', smoothPath(src[i] || [])));
+        n.hit.querySelectorAll('path').forEach((path, i) => path.setAttribute('d', smoothPath(src[i] || [])));
+      });
+      put(n, 'transform', `translate(${f.tx.toFixed(1)} ${f.ty.toFixed(1)}) scale(${f.sx.toFixed(4)} ${f.sy.toFixed(4)})`, (v) => {
+        n.group.setAttribute('transform', v);
+        n.hit.setAttribute('transform', v);
+      });
+    }
+  }
+  if (state.hoverEl) placeBox(hoverBox, state.hoverEl.getBoundingClientRect());
+  if (state.composer && state.composer.el) placeBox(focusBox, state.composer.focusRect());
+}
+
+let frame = 0;
+function schedule() {
+  if (!frame) frame = requestAnimationFrame(() => {
+    frame = 0;
+    positionMarks();
+  });
+}
+
+addEventListener('scroll', schedule, { capture: true, passive: true });
+addEventListener('resize', schedule, { passive: true });
+setInterval(schedule, 600); // catch layout shifts from late-loading images, fonts, animations
+
+function placeBox(box, r) {
+  Object.assign(box.style, { display: 'block', transform: `translate(${r.left}px, ${r.top}px)`, width: r.width + 'px', height: r.height + 'px' });
+}
+
+// ---------------------------------------------------------------- rounds
+
+// Review happens in turns: your marks are drafts until you Send them; the agent
+// fixes them and closes the round with a short report; you check each fix.
+async function loadRounds() {
+  try {
+    state.rounds = (await store.rounds()).rounds || [];
+  } catch {
+    state.rounds = [];
+  }
+  const last = state.rounds[state.rounds.length - 1];
+  // One signal when the agent is done, not a stream of pop-ups while it works.
+  if (last && last.returnedAt && (prefs('seenRound') || 0) < last.n && !SHOT && !FRAME) {
+    prefs('seenRound', last.n);
+    toast(`Round ${last.n} is back: ${toCheck().length} fix${toCheck().length === 1 ? '' : 'es'} to review`, { label: 'Review', run: () => startCheck() });
+  }
+}
+
+const drafts = () => state.annotations.filter((a) => a.draft);
+const toCheck = () => state.annotations.filter((a) => (a.status === 'resolved' && !a.accepted) || guardBroken(a));
+
+// A link for a PM or client: the same page, opened straight into Check, without the tools.
+async function copyCheckLink() {
+  const url = new URL(location.href);
+  url.searchParams.set('redline', 'check');
+  url.hash = '';
+  // The review key lets whoever opens it give verdicts, and nothing else.
+  try {
+    const info = await (await fetch(SERVER + '/__redline/api/info', { headers: keyHeader() })).json();
+    if (info.reviewKey) url.searchParams.set('rk', info.reviewKey);
+  } catch {}
+  const link = url.toString();
+  const local = /^(localhost|127\.|\[::1\])/.test(location.hostname);
+  if (await writeClipboard(link)) toast(local ? 'Copied. Serve with --host 0.0.0.0 (or a tunnel) so others can open it' : 'Copied the review link');
+  else toast(link);
+}
+
+async function sendRound() {
+  const n = drafts().length;
+  if (!n) return;
+  try {
+    if (!store.remote) {
+      // No server: the hand-off is your clipboard.
+      await writeClipboard(formatMarkdown(state.annotations.filter((a) => a.draft), { includeDrafts: true }));
+    }
+    const round = await store.send();
+    await load();
+    toast(store.remote ? `Sent round ${round.n} to your agent` : `Copied round ${round.n}: paste it into your AI chat`);
+  } catch (err) {
+    toast('Could not send: ' + err.message);
+  }
+}
+
+// The turn, at a glance: every next step that applies (send your marks, the agent
+// is working, check its fixes), as small pills in the toolbar.
+function turnPill() {
+  const d = drafts().length;
+  const last = state.rounds && state.rounds[state.rounds.length - 1];
+  const check = toCheck().length;
+  const openPanel = () => !state.panel && togglePanel();
+  const working = SERVER && last && !last.returnedAt && state.annotations.some((a) => a.round === last.n && a.status !== 'resolved');
+  return [
+    d ? h('button', { class: 'turn send', title: `Send ${d} mark${d === 1 ? '' : 's'} to your agent`, onclick: sendRound }, `Send ${d}`) : null,
+    working ? h('button', { class: 'turn waiting', title: 'Your agent is working on round ' + last.n, onclick: openPanel }, h('i'), 'With agent') : null,
+    check ? h('button', { class: 'turn check', title: `Your agent fixed ${check} thing${check === 1 ? '' : 's'} you marked. Review them one at a time`, onclick: () => startCheck() }, `Review ${check}`) : null,
+  ];
+}
+
+// ---------------------------------------------------------------- loading
+
+async function load() {
+  try {
+    const before = new Map(state.annotations.map((a) => [a.id, a]));
+    const openBefore = state.annotations.filter((a) => a.status !== 'resolved').length;
+    state.annotations = (await store.list()).sort((a, b) => a.n - b.n);
+    const openNow = state.annotations.filter((a) => a.status !== 'resolved').length;
+    await loadRounds();
+    if (openBefore > 0 && openNow === 0 && state.annotations.length && !SHOT) {
+      setTimeout(() => toast('All clear: every item on this page is resolved', null, { celebrate: true }), 900);
+    }
+    for (const a of state.annotations) {
+      const was = before.get(a.id);
+      if (!was) continue;
+      if (!(was.variants || []).length && (a.variants || []).length) toast(`${a.variants.length} options ready for #${a.n}. Open it to compare`);
+    }
+    if (SERVER && !state.connected) {
+      state.connected = true;
+    }
+  } catch {
+    state.connected = false;
+  }
+  elCache.clear();
+  applyPreviews();
+  rebuildMarks();
+  renderBar();
+  renderPanel();
+  if (state.composer && state.composer.annotation) {
+    const fresh = state.annotations.find((a) => a.id === state.composer.annotation.id);
+    if (!fresh) closeComposer(true);
+  }
+}