@palate/cli 0.0.0-stage → 0.0.2

package/src/point/overlay.js

@@ -0,0 +1,1516 @@
+// palate point: the overlay palate's proxy injects into the user's running app. Vanilla JS in a shadow root
+// (nothing leaks into the page, nothing from the page leaks in), fixed-position only (no layout shift).
+// Point mode: hover highlights an element (box, name, margin and padding), arrows walk up and down the
+// tree, a click opens a small dialog anchored to it. Each request becomes a numbered pin whose status
+// (queued, agent working, done, failed) updates live; a done pin shows before and after. Beside the palate
+// button, a small status says whether an agent is listening, so the user knows their pins will be picked up.
+(() => {
+  if (window.__palatePoint || window.top !== window) return;
+  window.__palatePoint = { version: 1 };
+  const API = "/__palate/api";
+  const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+  const coarse = matchMedia("(pointer: coarse)").matches;
+  const CHIPS = ["Fix spacing", "Fix alignment", "Type hierarchy", "Make it premium", "Add motion", "Real content & avatars", "Variants of this"];
+  const STUCK = "couldn't reopen";
+  const STATUS = { queued: "Queued", working: "Agent working", done: "Done", canceled: "Canceled", failed: "Failed" };
+  const START_AGENT = "In Claude Code run <b>/mcp__palate__point</b>, or start <b>palate point --auto</b>.";
+  const S = { on: false, leaf: null, target: null, dialog: null, requests: [], pop: null, els: new Map(), route: location.pathname, sending: false, agent: null };
+
+  const ICON = {
+    mark: `<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="1.5" y="1.5" width="5.6" height="5.6" rx="1.5" class="m1"/><rect x="8.9" y="1.5" width="5.6" height="5.6" rx="1.5" opacity=".42"/><rect x="1.5" y="8.9" width="5.6" height="5.6" rx="1.5" opacity=".42"/><rect x="8.9" y="8.9" width="5.6" height="5.6" rx="1.5" opacity=".42"/></svg>`,
+    x: `<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>`,
+    up: `<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 12.5V3.5M4 7.5l4-4 4 4"/></svg>`,
+    down: `<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5v9M4 8.5l4 4 4-4"/></svg>`,
+    check: `<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg>`,
+    send: `<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 13V3.5M4 7.5l4-4 4 4"/></svg>`,
+  };
+
+  const STYLES = `
+  :host { all: initial; }
+  * { box-sizing: border-box; }
+  [hidden] { display: none !important; }
+  .root {
+    --surface: #161615; --surface-2: #21211f; --surface-3: #2b2b28;
+    --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.15);
+    --text: #f4f3ef; --muted: #a3a29b; --faint: #75746d;
+    --accent: #0f7a57; --accent-soft: rgba(15,122,87,.16); --accent-ring: rgba(15,122,87,.55);
+    --ok: #1f9e5a; --warn: #e0a43a; --margin: rgba(246,166,72,.30); --padding: rgba(72,196,128,.2);
+    --shadow: 0 1px 1px rgba(0,0,0,.12), 0 6px 16px -4px rgba(0,0,0,.28), 0 24px 48px -12px rgba(0,0,0,.32);
+    --ease: cubic-bezier(.2,.8,.2,1);
+    font: 500 12px/1.4 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, sans-serif;
+    color: var(--text); -webkit-font-smoothing: antialiased; letter-spacing: 0;
+  }
+  .mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; }
+  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+  button:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
+  svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+
+  /* Highlight */
+  .hl { position: fixed; inset: 0; pointer-events: none; }
+  .box { position: fixed; top: 0; left: 0; border: 1.5px solid var(--accent); background: rgba(15,122,87,.07); border-radius: 2px; transition: transform .07s var(--ease), width .07s var(--ease), height .07s var(--ease); will-change: transform; }
+  .box.frozen { background: rgba(15,122,87,.1); box-shadow: 0 0 0 4px rgba(15,122,87,.14); }
+  .band { position: fixed; top: 0; left: 0; }
+  .band.m { background: repeating-linear-gradient(135deg, var(--margin) 0 3px, transparent 3px 6px); }
+  .band.p { background: var(--padding); }
+  .label { position: fixed; top: 0; left: 0; display: flex; flex-direction: column; gap: 1px; max-width: min(460px, calc(100vw - 16px)); padding: 4px 8px 5px; border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); white-space: nowrap; }
+  .label .row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
+  .label b { font-weight: 600; color: var(--text); }
+  .label .tag { color: #86dcb8; font-size: 11px; }
+  .label .txt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+  .label .dim { color: var(--faint); font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 8px; }
+  .label .sp { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
+  .label .sp i { font-style: normal; color: var(--muted); }
+
+  /* Floating button */
+  .fab { position: fixed; right: 20px; bottom: 20px; height: 40px; min-width: 40px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); box-shadow: var(--shadow); pointer-events: auto; transition: background-color .15s ease-out, transform .15s var(--ease); }
+  .fab:hover { background: var(--surface-2); }
+  .fab:active { transform: scale(.96); }
+  .fab .m1 { fill: currentColor; transition: fill .15s ease-out; }
+  .fab rect { fill: currentColor; }
+  .fab .word { display: none; font-weight: 600; }
+  .fab kbd { display: none; }
+  .fab.on .m1 { fill: var(--accent); }
+  .fab.on .word { display: inline; }
+  .fab.on kbd { display: inline-block; }
+  .fab:not(.on) { padding: 0; justify-content: center; width: 40px; }
+  .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--surface); }
+  kbd { font: 500 11px/1 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; color: var(--muted); padding: 3px 5px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--surface-2); }
+
+  /* Agent status, beside the button */
+  .agent { position: fixed; right: 68px; bottom: 26px; height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--muted); font-size: 12px; white-space: nowrap; pointer-events: auto; }
+  .agent .ad { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
+  .agent[data-state="listening"] .ad { background: #3ccf86; box-shadow: 0 0 0 3px rgba(60,207,134,.18); }
+  .agent[data-state="busy"] .ad { background: var(--accent); }
+  .agent[data-state="busy"] .ad::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: #3ccf86; animation: spin .9s linear infinite; }
+  .agent[data-state="none"].waiting .ad { background: #e0a43a; box-shadow: 0 0 0 3px rgba(224,164,58,.18); }
+  .agent[data-state="busy"] .at, .agent[data-state="listening"] .at { color: var(--text); }
+  .agent .at { font-variant-numeric: tabular-nums; }
+  .agent .stop { height: 20px; margin-right: -6px; padding: 0 8px; border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 600; border: 1px solid var(--line-2); transition: background-color .12s ease-out, color .12s ease-out; }
+  .agent .stop:hover { background: var(--surface-2); color: var(--text); }
+
+  /* Hint and toast */
+  .hint, .toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--muted); white-space: nowrap; pointer-events: none; max-width: calc(100vw - 128px); overflow: hidden; }
+  .hint b, .toast b { color: var(--text); font-weight: 600; }
+  .hint .sep { width: 1px; height: 14px; background: var(--line-2); }
+  .hint .ext { display: contents; }
+  .toast { bottom: 64px; color: var(--text); animation: rise .18s var(--ease); }
+  .toast .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
+  .toast.ok .dot { background: #3ccf86; }
+  .toast.warn .dot { background: #e0a43a; }
+  .toast.long { height: auto; min-height: 34px; padding: 8px 14px; border-radius: 17px; white-space: normal; line-height: 1.4; width: max-content; max-width: min(520px, calc(100vw - 32px)); }
+
+  /* Dialog */
+  .dialog { position: fixed; top: 0; left: 0; width: 360px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); pointer-events: auto; animation: pop .16s var(--ease); transform-origin: var(--ox, 0) var(--oy, 0); }
+  .dh { display: flex; align-items: center; gap: 6px; padding: 10px 8px 0 12px; min-width: 0; }
+  .dh .name { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; white-space: nowrap; }
+  .dh .name b { font-weight: 600; }
+  .dh .name .tag { color: #86dcb8; font-size: 11px; }
+  .dh .name .txt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+  .ib { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--muted); flex: none; transition: background-color .12s ease-out, color .12s ease-out; }
+  .ib:hover { background: var(--surface-2); color: var(--text); }
+  .ib:disabled { opacity: .35; cursor: default; background: none; }
+  textarea { display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 14px/1.45 inherit; font-family: inherit; padding: 8px 12px 6px; min-height: 52px; max-height: 160px; }
+  textarea:focus-visible { outline: 0; }
+  textarea::placeholder { color: var(--faint); }
+  .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 12px; }
+  .chip { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 12px; transition: background-color .12s ease-out, border-color .12s ease-out, color .12s ease-out; }
+  .chip:hover { color: var(--text); border-color: rgba(255,255,255,.26); }
+  .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
+  .df { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-top: 1px solid var(--line); }
+  .df .note { color: var(--faint); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .df .steps { color: var(--muted); white-space: nowrap; flex: none; cursor: help; }
+  .send { height: 30px; padding: 0 10px 0 12px; display: flex; align-items: center; gap: 8px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; transition: opacity .12s ease-out, transform .12s var(--ease); }
+  .send:active { transform: scale(.97); }
+  .send:disabled { opacity: .4; cursor: default; transform: none; }
+  .send kbd { color: rgba(255,255,255,.8); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
+
+  /* Pins */
+  .pins { position: fixed; inset: 0; pointer-events: none; }
+  .pin { position: fixed; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.3); pointer-events: auto; transition: background-color .2s ease-out; }
+  .pin:hover { z-index: 2; }
+  .pin.working { background: var(--accent); }
+  .pin.working::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); animation: spin .9s linear infinite; }
+  .pin.done { background: var(--ok); animation: settle .32s var(--ease); }
+  .pin.done svg { width: 13px; height: 13px; stroke-width: 2.2; }
+  .pin.failed { background: #b7432f; }
+  .pin.broke::before { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--surface); }
+  .ghost { position: fixed; top: 0; left: 0; border: 1.5px dashed var(--accent); border-radius: 3px; pointer-events: none; }
+
+  /* Pin popover */
+  .pop { position: fixed; top: 0; left: 0; width: 300px; max-height: calc(100vh - 24px); border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); pointer-events: auto; animation: pop .14s var(--ease); overflow: hidden auto; overscroll-behavior: contain; }
+  .ph { display: flex; align-items: center; gap: 8px; padding: 10px 6px 0 12px; }
+  .vpc { height: 20px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
+  .dh .vp { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 4px; flex: none; }
+  /* Before and after at both widths */
+  .bx { display: grid; gap: 6px; }
+  .bx .cols, .bx .pair2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+  .bx .cols span { color: var(--faint); font-size: 11px; }
+  .bx .rl { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; color: var(--muted); font-size: 11px; }
+  .bx .rl b { color: var(--text); font-weight: 600; }
+  .bx .rl .tg { margin-left: auto; color: var(--faint); }
+  .bx .rl .tg.broke { color: var(--warn); }
+  .cell { position: relative; height: 84px; border-radius: 7px; overflow: hidden; background: #fff; border: 1px solid var(--line); cursor: zoom-in; }
+  .cell img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top; user-select: none; -webkit-user-drag: none; }
+  .cell .cap { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px; background: rgba(22,22,21,.82); color: #fff; font-size: 10px; font-weight: 600; }
+  .cell.empty { display: grid; place-items: center; background: var(--surface-2); border-style: dashed; border-color: var(--line-2); color: var(--muted); font-size: 11px; }
+  .warnbox { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(224,164,58,.1); border: 1px solid rgba(224,164,58,.3); color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
+  .warnbox .wd { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--warn); flex: none; }
+  .warnbox b { font-weight: 600; }
+  .onote { margin: 0; color: var(--faint); font-size: 11px; overflow-wrap: anywhere; }
+  .onote.stuck { color: var(--muted); }
+  .ph .st { display: flex; align-items: center; gap: 6px; flex: 1; color: var(--muted); }
+  .ph .st b { color: var(--text); font-weight: 600; }
+  .ph .st .d { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
+  .ph .st .d.working { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+  .ph .st .d.done { background: #3ccf86; }
+  .ph .st .d.failed { background: #e5664f; }
+  .pb { padding: 6px 12px 12px; display: grid; gap: 8px; }
+  .pb .ask { font-size: 13px; line-height: 1.45; color: var(--text); margin: 0; overflow-wrap: anywhere; }
+  .pb .tags { display: flex; flex-wrap: wrap; gap: 4px; }
+  .pb .tags span { height: 20px; line-height: 18px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 11px; }
+  .pb .sum { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
+  .pb .sum b { color: var(--text); font-weight: 600; }
+  .pb .err { margin: 0; max-height: 120px; overflow: auto; padding: 6px 8px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 11px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
+  .ba { display: grid; gap: 6px; }
+  .seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--surface-2); justify-self: start; }
+  .seg button { height: 22px; padding: 0 9px; border-radius: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
+  .seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
+  .shot { position: relative; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--line); cursor: zoom-in; }
+  .shot img { display: block; width: 100%; max-height: 220px; object-fit: contain; object-position: top; user-select: none; -webkit-user-drag: none; }
+  .shot .cap { position: absolute; right: 6px; top: 6px; padding: 2px 6px; border-radius: 5px; background: rgba(22,22,21,.82); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .02em; }
+  .ba .hold { color: var(--faint); font-size: 11px; }
+  .ba .segs { display: flex; justify-content: space-between; gap: 6px; }
+  .gone { display: grid; place-items: center; gap: 2px; min-height: 96px; padding: 16px; border-radius: 8px; border: 1px dashed var(--line-2); color: var(--muted); text-align: center; }
+  .gone b { color: var(--text); font-weight: 600; }
+  .zoom .gone { min-width: 240px; min-height: 160px; background: var(--surface); }
+  .pa { display: flex; gap: 6px; }
+  .btn { height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line-2); color: var(--muted); font-size: 12px; }
+  .btn:hover { color: var(--text); background: var(--surface-2); }
+  .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
+  .zoom { position: fixed; inset: 0; background: rgba(10,10,10,.72); display: grid; place-items: center; padding: 24px; pointer-events: auto; animation: fade .14s ease-out; cursor: zoom-out; }
+  .zoom .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; max-width: min(1400px, 100%); max-height: 100%; }
+  .zoom figure { margin: 0; display: grid; gap: 8px; min-width: 0; }
+  .zoom figcaption { color: #fff; font-weight: 600; }
+  .zoom img { max-width: 100%; max-height: calc(100vh - 96px); object-fit: contain; border-radius: 8px; background: #fff; }
+
+  @keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.98); } }
+  @keyframes rise { from { opacity: 0; transform: translate(-50%, 6px); } }
+  @keyframes fade { from { opacity: 0; } }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  @keyframes settle { 0% { transform: var(--t) scale(.6); } 60% { transform: var(--t) scale(1.12); } 100% { transform: var(--t) scale(1); } }
+
+  @media (max-width: 520px) {
+    .dialog { width: auto !important; left: 8px !important; right: 8px; top: auto !important; bottom: 8px; }
+    .pop { width: auto !important; left: 8px !important; right: 8px; top: auto !important; bottom: 8px; max-height: calc(100vh - 16px); }
+    .cell { height: 96px; }
+    .hint { bottom: 72px; max-width: calc(100vw - 32px); }
+    .toast { bottom: 112px; max-width: calc(100vw - 32px); width: max-content; height: auto; min-height: 34px; padding: 8px 14px; border-radius: 17px; white-space: normal; line-height: 1.35; }
+    .hint .ext { display: none; }
+    .fab { right: 16px; bottom: 16px; }
+    .agent { right: 64px; bottom: 22px; }
+    .label { max-width: calc(100vw - 16px); }
+  }
+  @media (min-width: 521px) and (max-width: 1000px) {
+    .hint { bottom: 64px; }
+    .toast { bottom: 108px; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .box, .fab, .send, .chip { transition: none; }
+    .agent[data-state="busy"] .ad::after { animation-duration: 2.4s; }
+    .dialog, .pop, .toast, .zoom, .pin.done { animation: none; }
+    .pin.working::after, .spin { animation-duration: 2.4s; }
+  }`;
+
+  // The same names the server uses: every pin is checked at the width it was pinned at and the other one.
+  const wname = (w) => (w <= 500 ? "phone" : w < 1024 ? "tablet" : "desktop");
+  const otherOf = (w) => (w >= 768 ? 390 : 1440);
+  const esc = (s) => String(s ?? "").replace(/[<>&"']/g, (c) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;", '"': "&quot;", "'": "&#39;" })[c]);
+  const host = document.createElement("palate-point");
+  host.setAttribute("data-palate", "");
+  host.style.cssText = "all:initial;position:fixed;top:0;left:0;width:0;height:0;z-index:2147483647;pointer-events:none;";
+  const sr = host.attachShadow({ mode: "open" });
+  sr.innerHTML = `<style>${STYLES}</style><div class="root">
+    <div class="pins"></div>
+    <div class="hl" hidden><div class="band m"></div><div class="band m"></div><div class="band m"></div><div class="band m"></div><div class="band p"></div><div class="band p"></div><div class="band p"></div><div class="band p"></div><div class="box"></div><div class="label"></div></div>
+    <div class="hint" hidden></div>
+    <div class="toast" hidden role="status" aria-live="polite"></div>
+    <div class="agent" data-state="none" role="status" aria-live="polite" hidden><span class="ad" aria-hidden="true"></span><span class="at">No agent listening</span><button class="stop" type="button" hidden title="I'm done pointing: the agent finishes the pins already sent, then stops listening">Done</button></div>
+    <button class="fab" type="button" aria-pressed="false" title="Point at something to fix (${isMac ? "⌥" : "Alt+"}P)">${ICON.mark}<span class="word">Pointing</span><kbd>Esc</kbd><span class="badge" hidden></span></button>
+    <div class="dialog" role="dialog" aria-label="Ask the agent to change this element" hidden></div>
+    <div class="pop" role="dialog" hidden></div>
+  </div>`;
+  const $ = (s) => sr.querySelector(s);
+  const ui = { root: $(".root"), hl: $(".hl"), box: $(".box"), label: $(".label"), bands: [...sr.querySelectorAll(".band")], fab: $(".fab"), badge: $(".badge"), hint: $(".hint"), toast: $(".toast"), dialog: $(".dialog"), pins: $(".pins"), pop: $(".pop"), agent: $(".agent") };
+  const ours = (e) => e.composedPath().includes(host);
+
+  // ---------- What an element is ----------
+  const INTERNAL = /^(InnerLayoutRouter|OuterLayoutRouter|RedirectErrorBoundary|RedirectBoundary|HTTPAccessFallbackErrorBoundary|HTTPAccessFallbackBoundary|DevRootHTTPAccessFallbackBoundary|LoadingBoundary|ErrorBoundary|ErrorBoundaryHandler|GlobalError|ScrollAndFocusHandler|InnerScrollAndFocusHandler|RenderFromTemplateContext|AppRouter|Router|HotReload|ReactDevOverlay|AppDevOverlay|AppDevOverlayErrorBoundary|ServerRoot|Root|ClientPageRoot|ClientSegmentRoot|SegmentViewNode|SegmentViewStateNode|SegmentStateProvider|SegmentBoundaryTriggerNode|SegmentTrieNode|Suspense|Fragment|StrictMode|Profiler|Head|MetadataOutlet|MetadataBoundary|ViewportBoundary|OutletBoundary|RootLayoutBoundary|Link|LinkComponent|Image|ImageElement|Script|Portal|Presence|PresenceChild|AnimatePresence|LayoutGroup|MotionConfig|LazyMotion|PopChild|PopChildMeasure|Slot|SlotClone|Primitive|Provider|Consumer|ThemeProvider)$/;
+  const fiberName = (t) => {
+    if (!t) return null;
+    if (typeof t === "string") return null;
+    const n = t.displayName || t.name || t.render?.displayName || t.render?.name || t.type?.displayName || t.type?.name || null;
+    return n && /^[A-Z]/.test(n) && !/[.$]|^Motion|^Styled|(Context|Provider|Boundary|Handler|Router|Outlet|Root)$/.test(n) && !INTERNAL.test(n) ? n : null;
+  };
+  function framework(el) {
+    const out = {};
+    let node = el;
+    let key = null;
+    for (; node && node !== document.documentElement; node = node.parentElement) {
+      key = Object.keys(node).find((k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$"));
+      if (key) break;
+    }
+    if (key) {
+      const f = node[key];
+      const components = [];
+      for (let x = f; x && components.length < 8; x = x.return) {
+        const n = fiberName(x.type);
+        if (n && components.at(-1) !== n) components.push(n);
+      }
+      // The owner chain: who rendered this element (includes server components in React 19 dev builds).
+      const owners = [];
+      const seen = new Set();
+      for (let o = f._debugOwner; o && owners.length < 8 && !seen.has(o); o = o._debugOwner || o.owner) {
+        seen.add(o);
+        const n = o.name ?? fiberName(o.type);
+        if (n && !INTERNAL.test(n) && owners.at(-1)?.name !== n) owners.push({ name: n, server: o.env ? o.env === "Server" : undefined });
+      }
+      const nearest = owners[0]?.name ?? components[0] ?? null;
+      out.react = { component: nearest, components, owners };
+    }
+    for (let e = el; e && !out.vue; e = e.parentElement) {
+      const c = e.__vueParentComponent;
+      if (c) {
+        const chain = [];
+        for (let x = c; x && chain.length < 6; x = x.parent) chain.push({ name: x.type?.__name || x.type?.name || null, file: x.type?.__file || null });
+        out.vue = { component: chain[0]?.name ?? null, file: chain[0]?.file ?? null, chain };
+      }
+    }
+    for (let e = el; e && !out.svelte; e = e.parentElement) {
+      const m = e.__svelte_meta;
+      if (m?.loc) out.svelte = { file: m.loc.file, line: m.loc.line, column: m.loc.column };
+    }
+    return out;
+  }
+  const componentOf = (el) => {
+    const f = framework(el);
+    return f.react?.component || f.vue?.component || null;
+  };
+
+  const stableId = (id) => id && /^[A-Za-z][\w-]*$/.test(id) && !/^(radix|headlessui|react-aria|mui|chakra)|\d{3,}/i.test(id);
+  const unique = (s) => {
+    try {
+      return document.querySelectorAll(s).length === 1;
+    } catch {
+      return false;
+    }
+  };
+  // The shortest child-combinator path that matches only this element, anchored at an id or test id when there is one.
+  function selectorOf(el) {
+    const parts = [];
+    for (let e = el; e && e.nodeType === 1 && e !== document.documentElement; e = e.parentElement) {
+      if (stableId(e.id)) {
+        parts.unshift(`#${CSS.escape(e.id)}`);
+        if (unique(parts.join(" > "))) return parts.join(" > ");
+        parts[0] = `${e.tagName.toLowerCase()}#${CSS.escape(e.id)}`;
+        continue;
+      }
+      const tid = ["data-testid", "data-test", "data-cy"].map((a) => [a, e.getAttribute(a)]).find(([, v]) => v);
+      let part = tid ? `[${tid[0]}="${CSS.escape(tid[1])}"]` : e.tagName.toLowerCase();
+      if (!tid && e.parentElement) {
+        const same = [...e.parentElement.children].filter((c) => c.tagName === e.tagName);
+        if (same.length > 1) part += `:nth-of-type(${same.indexOf(e) + 1})`;
+      }
+      parts.unshift(part);
+      const s = parts.join(" > ");
+      if ((parts.length >= 2 || tid) && unique(s)) return s;
+      if (e === document.body) break;
+    }
+    return parts.join(" > ");
+  }
+  function domPath(el) {
+    const out = [];
+    for (let e = el; e && e.nodeType === 1 && out.length < 12; e = e.parentElement) {
+      const cls = typeof e.className === "string" ? e.className.trim().split(/\s+/)[0] : "";
+      out.unshift(`${e.tagName.toLowerCase()}${e.id ? `#${e.id}` : ""}${cls ? `.${cls}` : ""}`);
+      if (e === document.body) break;
+    }
+    return out.join(" > ");
+  }
+  const shortText = (el, n = 34) => {
+    const t = (el.innerText || el.textContent || el.getAttribute("aria-label") || el.getAttribute("alt") || "").replace(/\s+/g, " ").trim();
+    return t.length > n ? `${t.slice(0, n - 1).trimEnd()}…` : t;
+  };
+  const textNodes = (el) => {
+    const out = [];
+    const w = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    for (let n = w.nextNode(); n && out.length < 40; n = w.nextNode()) {
+      const t = n.textContent.replace(/\s+/g, " ").trim();
+      if (t.length > 2 && !/^(script|style)$/i.test(n.parentElement?.tagName)) out.push(t.slice(0, 200));
+    }
+    for (const a of ["aria-label", "alt", "placeholder", "title"]) if (el.getAttribute?.(a)) out.push(el.getAttribute(a));
+    return out;
+  };
+  function trimHTML(el) {
+    const c = el.cloneNode(true);
+    // No values from private fields (some frameworks mirror a field's value into its attribute).
+    const live = [el, ...el.querySelectorAll("*")];
+    [c, ...c.querySelectorAll("*")].forEach((n, i) => {
+      if (/^(INPUT|TEXTAREA)$/.test(n.tagName) && live[i] && secret(live[i])) {
+        n.removeAttribute("value");
+        n.textContent = "";
+      }
+    });
+    c.querySelectorAll("script, style, noscript, template, palate-point").forEach((n) => n.remove());
+    c.querySelectorAll("svg").forEach((s) => s.replaceChildren(document.createTextNode("…")));
+    const walk = (n, d) => {
+      const kids = [...n.children];
+      if (d >= 5) return kids.length && n.replaceChildren(document.createTextNode(`…${kids.length} child${kids.length > 1 ? "ren" : ""}`));
+      kids.slice(12).forEach((k) => k.remove());
+      if (kids.length > 12) n.appendChild(document.createComment(` …${kids.length - 12} more `));
+      kids.slice(0, 12).forEach((k) => walk(k, d + 1));
+    };
+    walk(c, 0);
+    for (const n of [c, ...c.querySelectorAll("*")]) for (const a of [...n.attributes]) if (a.value.length > 180) n.setAttribute(a.name, `${a.value.slice(0, 180)}…`);
+    const tw = document.createTreeWalker(c, NodeFilter.SHOW_TEXT);
+    for (let t = tw.nextNode(); t; t = tw.nextNode()) if (t.textContent.length > 240) t.textContent = `${t.textContent.slice(0, 240)}…`;
+    const h = c.outerHTML;
+    return h.length > 6000 ? `${h.slice(0, 6000)}\n<!-- …trimmed -->` : h;
+  }
+  const STYLE_KEYS = ["display", "position", "width", "height", "max-width", "margin", "padding", "gap", "flex-direction", "justify-content", "align-items", "grid-template-columns", "font-family", "font-size", "font-weight", "line-height", "letter-spacing", "text-align", "color", "background-color", "background-image", "border", "border-radius", "box-shadow", "opacity", "transform", "transition"];
+  const DEFAULTS = /^(none|normal|auto|all|0px|0px 0px|0px 0px 0px 0px|rgba\(0, 0, 0, 0\)|static|visible|1|0s|all 0s ease 0s|start|stretch|0px (none|solid).*|row|matrix\(1, 0, 0, 1, 0, 0\))$/;
+  function keyStyles(el) {
+    const cs = getComputedStyle(el);
+    const out = {};
+    for (const k of STYLE_KEYS) {
+      let v = cs.getPropertyValue(k);
+      if (!v || (DEFAULTS.test(v) && !["display", "font-size", "color", "width", "height"].includes(k))) continue;
+      if (k === "font-family") v = v.split(",")[0].replace(/["']/g, "");
+      if (k === "background-image" && v.length > 120) v = `${v.slice(0, 120)}…`;
+      out[k] = v;
+    }
+    return out;
+  }
+  const px = (v) => Math.round(parseFloat(v) || 0);
+  const quad = (a) => (a.every((x) => x === a[0]) ? `${a[0]}` : a[0] === a[2] && a[1] === a[3] ? `${a[0]} ${a[1]}` : a.join(" "));
+  function spacing(cs) {
+    const m = [cs.marginTop, cs.marginRight, cs.marginBottom, cs.marginLeft].map(px);
+    const p = [cs.paddingTop, cs.paddingRight, cs.paddingBottom, cs.paddingLeft].map(px);
+    const g = /flex|grid/.test(cs.display) ? px(cs.rowGap === cs.columnGap ? cs.rowGap : cs.rowGap) : 0;
+    const out = [];
+    if (p.some(Boolean)) out.push(`<i>padding</i> ${quad(p)}`);
+    if (m.some(Boolean)) out.push(`<i>margin</i> ${quad(m)}`);
+    if (g) out.push(`<i>gap</i> ${g}`);
+    return out.join(" · ");
+  }
+  function describe(el) {
+    const comp = componentOf(el);
+    const tag = el.tagName.toLowerCase() + (stableId(el.id) ? `#${el.id}` : "");
+    return { comp, tag, text: shortText(el) };
+  }
+  const nameHTML = ({ comp, tag, text }) => `${comp ? `<b>${esc(comp)}</b>` : ""}<span class="tag mono">${esc(tag)}</span>${text ? `<span class="txt">${esc(text)}</span>` : ""}`;
+
+  // ---------- Highlight ----------
+  const visible = (el) => el && el.isConnected && el.getClientRects().length > 0;
+  function draw(el, { bands = true, frozen = false } = {}) {
+    if (!visible(el)) return void (ui.hl.hidden = true);
+    ui.hl.hidden = false;
+    const r = el.getBoundingClientRect();
+    const cs = getComputedStyle(el);
+    const b = ui.box.style;
+    b.transform = `translate(${r.left}px, ${r.top}px)`;
+    b.width = `${Math.max(r.width, 2)}px`;
+    b.height = `${Math.max(r.height, 2)}px`;
+    b.borderRadius = cs.borderRadius && cs.borderRadius !== "0px" ? cs.borderRadius : "2px";
+    ui.box.classList.toggle("frozen", frozen);
+    const m = [cs.marginTop, cs.marginRight, cs.marginBottom, cs.marginLeft].map((v) => Math.max(0, px(v)));
+    const bw = [cs.borderTopWidth, cs.borderRightWidth, cs.borderBottomWidth, cs.borderLeftWidth].map(px);
+    const p = [cs.paddingTop, cs.paddingRight, cs.paddingBottom, cs.paddingLeft].map((v) => Math.max(0, px(v)));
+    const rects = bands
+      ? [
+          [r.left, r.top - m[0], r.width, m[0]],
+          [r.right, r.top, m[1], r.height],
+          [r.left, r.bottom, r.width, m[2]],
+          [r.left - m[3], r.top, m[3], r.height],
+          [r.left + bw[3], r.top + bw[0], r.width - bw[1] - bw[3], p[0]],
+          [r.right - bw[1] - p[1], r.top + bw[0] + p[0], p[1], r.height - bw[0] - bw[2] - p[0] - p[2]],
+          [r.left + bw[3], r.bottom - bw[2] - p[2], r.width - bw[1] - bw[3], p[2]],
+          [r.left + bw[3], r.top + bw[0] + p[0], p[3], r.height - bw[0] - bw[2] - p[0] - p[2]],
+        ]
+      : [];
+    ui.bands.forEach((d, i) => {
+      const q = rects[i];
+      if (!q || q[2] <= 0 || q[3] <= 0) return void (d.style.display = "none");
+      d.style.display = "block";
+      d.style.transform = `translate(${q[0]}px, ${q[1]}px)`;
+      d.style.width = `${q[2]}px`;
+      d.style.height = `${q[3]}px`;
+    });
+    const d = describe(el);
+    const sp = bands ? spacing(cs) : "";
+    const key = `${d.comp}|${d.tag}|${d.text}|${Math.round(r.width)}|${Math.round(r.height)}|${sp}`;
+    if (ui.label.dataset.key !== key) {
+      ui.label.dataset.key = key;
+      ui.label.innerHTML = `<div class="row">${nameHTML(d)}<span class="dim">${Math.round(r.width)} × ${Math.round(r.height)}</span></div>${sp ? `<div class="sp">${sp}</div>` : ""}`;
+    }
+    const lh = ui.label.offsetHeight || 24;
+    const lw = ui.label.offsetWidth || 120;
+    let ly = r.top - lh - 6;
+    if (ly < 4) ly = r.bottom + 6 + lh < innerHeight ? r.bottom + 6 : Math.max(4, r.top + 4);
+    const lx = Math.min(Math.max(4, r.left), innerWidth - lw - 4);
+    ui.label.style.transform = `translate(${lx}px, ${ly}px)`;
+    ui.label.hidden = Boolean(S.dialog) && innerWidth <= 520;
+  }
+
+  function leafAt(x, y) {
+    for (const el of document.elementsFromPoint(x, y)) {
+      if (el === host || host.contains(el) || el === document.documentElement) continue;
+      return el;
+    }
+    return null;
+  }
+  function hoverAt(x, y) {
+    const leaf = leafAt(x, y);
+    if (!leaf) return;
+    // After walking up with the arrows, stay on that ancestor while the pointer is inside it.
+    if (S.target && S.target !== S.leaf && S.target.contains(leaf)) S.leaf = leaf;
+    else S.leaf = S.target = leaf;
+    draw(S.target);
+  }
+  function up() {
+    const el = S.dialog ? S.dialog.el : S.target;
+    const p = el?.parentElement;
+    if (!p || p === document.documentElement) return;
+    setTarget(p);
+  }
+  function down() {
+    const el = S.dialog ? S.dialog.el : S.target;
+    if (!el || !S.leaf || el === S.leaf || !el.contains(S.leaf)) {
+      const c = el && [...el.children].find(visible);
+      if (c) setTarget(c);
+      return;
+    }
+    let c = S.leaf;
+    while (c.parentElement && c.parentElement !== el) c = c.parentElement;
+    setTarget(c);
+  }
+  function setTarget(el) {
+    S.target = el;
+    if (S.dialog) {
+      S.dialog.el = el;
+      renderDialogHead();
+      draw(el, { bands: false, frozen: true });
+    } else draw(el);
+  }
+
+  // ---------- The trail: the steps that open a state ----------
+  // While palate's overlay is on the page (pointing on or off), the user's own steps since the last navigation
+  // are kept in a small in-memory list: clicks on controls, Enter/Space on a control, Esc, Tab, arrows in menus,
+  // typing (merged per field) and selects. Never a value from a private field (password, card, one-time code,
+  // token…), and never palate's own clicks or keys. A pin carries the few steps that lead to its element's
+  // state (trimTrail in trail.mjs explains which), and palate replays them before every crop.
+  // Form submits aren't recorded: replaying them would send the form again on every check.
+  const T = /*@trail*/ ({ trimTrail: () => [], stepShort: (s) => s.text || s.type, SECRET: /passw|card|cvc|token|secret|ssn/i, SECRET_AUTOCOMPLETE: /cc-|one-time-code|password/i, MAX: 10 }) /*@end*/;
+  const trail = { steps: [], base: null, url: location.pathname + location.search, down: null, born: new WeakMap(), secret: new WeakSet() };
+  const LAYER = 'dialog[open], [role="dialog"], [role="alertdialog"], [aria-modal="true"], [role="menu"], [role="listbox"], [role="tooltip"], [data-state="open"]:not([aria-expanded]):not(button), details[open]';
+  const ACTION = 'a[href], button, input, select, textarea, summary, label, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="switch"], [role="checkbox"], [role="radio"], [role="combobox"], [role="treeitem"], [aria-haspopup], [aria-expanded], [aria-controls], [onclick], [tabindex]:not([tabindex="-1"])';
+  const NAV_KEYS = '[role="menu"], [role="menubar"], [role="listbox"], [role="tablist"], [role="radiogroup"], [role="tree"], [role="grid"], [role="combobox"], select';
+  const shows = (el) => el.isConnected && (el.checkVisibility ? el.checkVisibility({ opacityProperty: true, visibilityProperty: true }) : el.getClientRects().length > 0);
+  const regionOf = (t) => {
+    const id = (t.getAttribute("aria-controls") || "").split(/\s+/)[0];
+    return (id && document.getElementById(id)) || t.parentElement;
+  };
+  const modal = (e) => {
+    try {
+      return e.matches(":modal");
+    } catch {
+      return false;
+    }
+  };
+  const kindOf = (e) => {
+    const role = e.getAttribute("role");
+    if (e.tagName === "DIALOG" || role === "dialog" || role === "alertdialog" || e.getAttribute("aria-modal") === "true") return e.getAttribute("aria-modal") === "true" || role === "alertdialog" || modal(e) ? "modal" : "dialog";
+    if (role === "menu" || role === "listbox" || role === "tooltip") return role;
+    return "expanded part";
+  };
+  // Open dialogs, menus, popovers, listboxes and expanded parts on the page now (element → kind).
+  function layers() {
+    const out = new Map();
+    for (const e of document.querySelectorAll(LAYER)) if (shows(e)) out.set(e, kindOf(e));
+    try {
+      for (const e of document.querySelectorAll(":popover-open")) out.set(e, out.get(e) ?? "popover");
+    } catch {}
+    for (const t of document.querySelectorAll('[aria-expanded="true"]')) {
+      const r = regionOf(t);
+      const pop = t.getAttribute("aria-haspopup");
+      if (r && shows(r) && !out.has(r)) out.set(r, pop && pop !== "false" ? (pop === "dialog" ? "dialog" : pop === "listbox" ? "listbox" : "menu") : "expanded part");
+    }
+    return out;
+  }
+  // What was already open when the user first did anything here (a banner, a menu bar) doesn't count.
+  const ensureBase = () => (trail.base ??= new Set(layers().keys()));
+  const atRest = () => {
+    if (!trail.base) return true;
+    for (const e of layers().keys()) if (!trail.base.has(e)) return false;
+    return true;
+  };
+  const resetTrail = () => {
+    trail.steps = [];
+    trail.base = null;
+    trail.down = null;
+    trail.url = location.pathname + location.search;
+  };
+  const onNav = () => location.pathname + location.search !== trail.url && resetTrail();
+  for (const k of ["pushState", "replaceState"]) {
+    const orig = history[k];
+    if (typeof orig === "function")
+      history[k] = function (...a) {
+        const r = orig.apply(this, a);
+        onNav();
+        return r;
+      };
+  }
+  addEventListener("popstate", onNav);
+  // When parts of the page appear (added, or unhidden): a panel rendered on click counts as opened by it.
+  new MutationObserver((list) => {
+    const now = Date.now();
+    for (const m of list) {
+      if (m.type === "childList") {
+        for (const n of m.addedNodes) if (n.nodeType === 1 && n !== host) trail.born.set(n, now);
+      } else {
+        const t = m.target;
+        const v = t.getAttribute(m.attributeName);
+        if (m.attributeName === "hidden" ? v === null : m.attributeName === "aria-hidden" ? v !== "true" : m.attributeName === "open" ? v !== null : v === "open" || v === "active") trail.born.set(t, now);
+      }
+    }
+  }).observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["hidden", "open", "aria-hidden", "data-state"] });
+
+  const labelOf = (el) => (el.getAttribute("aria-label") || (el.labels && el.labels[0]?.innerText) || el.getAttribute("placeholder") || el.getAttribute("name") || el.getAttribute("title") || "").replace(/\s+/g, " ").trim().slice(0, 80);
+  // A field whose value is never recorded.
+  function secret(el) {
+    if (trail.secret.has(el)) return true;
+    const hint = [el.getAttribute("name"), el.id, el.getAttribute("aria-label"), el.getAttribute("placeholder"), el.getAttribute("data-testid"), el.labels?.[0]?.innerText].filter(Boolean).join(" ");
+    const s = el.type === "password" || T.SECRET_AUTOCOMPLETE.test(el.getAttribute("autocomplete") || "") || T.SECRET.test(hint);
+    // Once private, always private (a "show password" toggle turns it into a text field).
+    if (s) trail.secret.add(el);
+    return s;
+  }
+  const isTextField = (el) => (el.tagName === "INPUT" && /^(text|search|email|url|tel|number|password|)$/i.test(el.getAttribute("type") || "")) || el.tagName === "TEXTAREA";
+  const submits = (el) => {
+    const b = el.closest?.('button, input[type="submit"], input[type="image"]');
+    return Boolean(b && b.form && (b.tagName === "INPUT" || (b.getAttribute("type") || "submit").toLowerCase() === "submit"));
+  };
+  const IMPLICIT = { A: "link", BUTTON: "button", SUMMARY: "button", SELECT: "combobox", TEXTAREA: "textbox" };
+  const roleOf = (el) => {
+    const r = el.getAttribute("role");
+    if (r) return r.split(/\s+/)[0];
+    if (el.tagName === "INPUT") {
+      const t = (el.getAttribute("type") || "text").toLowerCase();
+      return { checkbox: "checkbox", radio: "radio", button: "button", submit: "button", reset: "button", range: "slider", number: "spinbutton" }[t] ?? (el.hasAttribute("list") ? "combobox" : "textbox");
+    }
+    return el.tagName === "A" && !el.hasAttribute("href") ? null : (IMPLICIT[el.tagName] ?? null);
+  };
+  // How the server finds a step's target again: a robust selector (id, test id, aria-label, else a path),
+  // and its role and name, tag and words to fall back on.
+  function locateStep(el) {
+    const tag = el.tagName.toLowerCase();
+    const field = /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName);
+    const tidAttr = ["data-testid", "data-test", "data-cy"].find((a) => el.getAttribute(a));
+    const aria = el.getAttribute("aria-label");
+    let selector;
+    if (stableId(el.id) && unique(`#${CSS.escape(el.id)}`)) selector = `#${CSS.escape(el.id)}`;
+    else if (tidAttr && unique(`[${tidAttr}="${CSS.escape(el.getAttribute(tidAttr))}"]`)) selector = `[${tidAttr}="${CSS.escape(el.getAttribute(tidAttr))}"]`;
+    else if (aria && unique(`${tag}[aria-label="${CSS.escape(aria)}"]`)) selector = `${tag}[aria-label="${CSS.escape(aria)}"]`;
+    else selector = selectorOf(el);
+    const words = field ? labelOf(el) : (aria || (el.innerText || el.textContent || "").replace(/\s+/g, " ").trim() || el.getAttribute("title") || el.getAttribute("alt") || "").slice(0, 80);
+    return { selector, testid: el.getAttribute("data-testid") || undefined, role: roleOf(el) || undefined, name: words || undefined, tag, text: words || undefined };
+  }
+  function push(step, el, rest) {
+    trail.steps.push({ ...step, at: Date.now(), rest, _el: el });
+    if (trail.steps.length > 40) trail.steps.shift();
+  }
+  // The control a click was meant for: the nearest interactive ancestor, or something that looks clickable.
+  function actionOf(t) {
+    const a = t.closest?.(ACTION);
+    if (a && a !== document.body) return a;
+    for (let e = t, k = 0; e && e !== document.body && k < 4; e = e.parentElement, k++) if (getComputedStyle(e).cursor === "pointer") return e;
+    return null;
+  }
+  const quiet = (e) => S.on || S.dialog || S.zoom || ours(e) || !e.isTrusted;
+  addEventListener(
+    "pointerdown",
+    (e) => {
+      if (quiet(e)) return;
+      ensureBase();
+      // Some menus open on pointerdown, before the click: whether the page was at rest is read here.
+      trail.down = { t: Date.now(), rest: atRest() };
+    },
+    true,
+  );
+  addEventListener(
+    "click",
+    (e) => {
+      if (quiet(e)) return;
+      ensureBase();
+      const rest = trail.down && Date.now() - trail.down.t < 1500 ? trail.down.rest : atRest();
+      trail.down = null;
+      const el = actionOf(e.target);
+      if (!el || submits(el)) return;
+      // The click that follows Enter/Space on the same control, or a label's click passed to its field.
+      const prev = trail.steps.at(-1);
+      if (prev && Date.now() - prev.at < 800 && (prev._el === el ? e.detail === 0 || prev.type === "key" : prev._el?.control === el)) return;
+      push({ type: "click", ...locateStep(el) }, el, rest);
+    },
+    true,
+  );
+  addEventListener(
+    "keydown",
+    (e) => {
+      if (quiet(e) || S.pop || e.repeat || e.ctrlKey || e.metaKey || e.altKey) return;
+      const k = e.key;
+      const el = document.activeElement && document.activeElement !== document.body ? document.activeElement : null;
+      let ok = k === "Escape" || k === "Tab";
+      if (k === "Enter" || k === " ") ok = Boolean(el) && !(el.isContentEditable || (isTextField(el) && (k === " " || el.form))) && !submits(el);
+      else if (/^(Arrow(Up|Down|Left|Right)|Home|End)$/.test(k)) ok = Boolean(el?.closest?.(NAV_KEYS));
+      if (!ok) return;
+      ensureBase();
+      push({ type: "key", key: k, ...(k === "Tab" && e.shiftKey ? { shift: true } : {}), ...(el && k !== "Tab" ? locateStep(el) : {}) }, el, atRest());
+    },
+    true,
+  );
+  addEventListener(
+    "input",
+    (e) => {
+      const el = e.target;
+      if (quiet(e) || !el || !isTextField(el)) return;
+      ensureBase();
+      const priv = secret(el);
+      const prev = trail.steps.at(-1);
+      // Typing into the same field is one step that keeps its latest value.
+      if (prev?.type === "type" && prev._el === el) {
+        if (!priv) prev.value = el.value.slice(0, 200);
+        return;
+      }
+      push({ type: "type", ...locateStep(el), ...(priv ? { redacted: true } : { value: el.value.slice(0, 200) }) }, el, atRest());
+    },
+    true,
+  );
+  addEventListener(
+    "change",
+    (e) => {
+      const el = e.target;
+      if (quiet(e) || el?.tagName !== "SELECT") return;
+      ensureBase();
+      const priv = secret(el);
+      push({ type: "select", ...locateStep(el), ...(priv ? { redacted: true } : { value: el.value, label: el.selectedOptions?.[0]?.text?.trim().slice(0, 80) }) }, el, atRest());
+    },
+    true,
+  );
+
+  // A step clicked earlier that still holds over the element: a selected tab whose panel holds it, or an
+  // expander (aria-expanded, details) still open around it.
+  function holds(s, el) {
+    if (s.type !== "click" && s.type !== "key") return false;
+    let t = s._el;
+    if (!t?.isConnected) {
+      try {
+        t = document.querySelector(s.selector);
+      } catch {
+        t = null;
+      }
+    }
+    if (!t) return false;
+    const tab = t.closest('[role="tab"]');
+    if (tab) {
+      if (tab.getAttribute("aria-selected") !== "true" && tab.getAttribute("data-state") !== "active") return false;
+      const p = tab.getAttribute("aria-controls") && document.getElementById(tab.getAttribute("aria-controls"));
+      return p ? p.contains(el) : Boolean(el.closest('[role="tabpanel"]'));
+    }
+    const sum = t.closest("summary");
+    if (sum) return sum.parentElement?.tagName === "DETAILS" && sum.parentElement.open && sum.parentElement.contains(el);
+    const x = t.closest("[aria-expanded]");
+    return Boolean(x && x.getAttribute("aria-expanded") === "true" && regionOf(x)?.contains(el));
+  }
+  // An element that shows only while something is hovered: a CSS rule like ".nav li:hover > ul" (or Tailwind's
+  // group-hover) reveals the box it sits in. Read when the user clicks to pin, while the hover still holds.
+  function hoverOf(el) {
+    let n = 0;
+    const reveals = (st) => (st.display && st.display !== "none") || st.visibility === "visible" || (st.opacity && Number(st.opacity) > 0) || st.maxHeight || st.transform || st.clipPath || st.pointerEvents === "auto";
+    const walk = (rules) => {
+      for (const r of rules) {
+        if (++n > 6000) return null;
+        if (r.cssRules && !r.selectorText) {
+          const x = walk(r.cssRules);
+          if (x) return x;
+          continue;
+        }
+        if (!r.selectorText?.includes(":hover") || !reveals(r.style)) continue;
+        for (const part of r.selectorText.split(/,(?![^(]*\))/)) {
+          const i = part.lastIndexOf(":hover");
+          if (i < 0) continue;
+          const tail = part.slice(i + 6);
+          const own = /^[^\s>+~]*/.exec(tail)[0];
+          // :hover on the shown element itself isn't a reveal.
+          if (own.length === tail.length) continue;
+          const head = part.slice(0, i + 6) + own;
+          let shown = null;
+          try {
+            shown = el.closest(part.trim());
+          } catch {}
+          if (!shown) continue;
+          for (let a = shown; a && a !== document.documentElement; a = a.parentElement) {
+            const cands = a === shown ? [] : [a];
+            for (let s = a.previousElementSibling; s; s = s.previousElementSibling) cands.push(s);
+            for (const c of cands)
+              try {
+                if (c.matches(head)) return { trigger: c, shown };
+              } catch {}
+          }
+        }
+      }
+      return null;
+    };
+    for (const sh of document.styleSheets) {
+      let rules = null;
+      try {
+        rules = sh.cssRules;
+      } catch {}
+      const x = rules && walk(rules);
+      if (x) {
+        // The trigger's own words, without the menu it reveals: "Products", not "Products Analytics Billing".
+        const own = [...x.trigger.childNodes].filter((c) => !c.contains(x.shown)).map((c) => c.textContent).join(" ").replace(/\s+/g, " ").trim().slice(0, 80);
+        const at = locateStep(x.trigger);
+        return { ...x, step: { type: "hover", ...at, ...(own ? { name: own, text: own } : {}), at: Date.now(), rest: false, _el: x.trigger } };
+      }
+      if (n > 6000) break;
+    }
+    return null;
+  }
+  // The steps a pin carries (see trimTrail in trail.mjs), and what the element sits in: the modal, the menu…
+  function pinTrail(el, hover) {
+    const base = trail.base ?? new Set();
+    let layer = null;
+    for (const [e, kind] of layers()) {
+      if (base.has(e) || !e.contains(el)) continue;
+      // A layer the hover reveals is the hover's, not a click's.
+      if (hover && (hover.shown.contains(e) || e === hover.shown)) continue;
+      if (!layer || layer.el.contains(e)) layer = { el: e, kind };
+    }
+    const t0 = trail.steps[0]?.at ?? Infinity;
+    const revealedAt = [];
+    for (let a = el; a && a !== document.body; a = a.parentElement) {
+      const t = trail.born.get(a);
+      if (t >= t0) revealedAt.push(t);
+    }
+    let steps = T.trimTrail(
+      trail.steps.map((s) => ({ ...s, keep: holds(s, el) })),
+      { inOpen: Boolean(layer), revealedAt },
+    );
+    let kind = layer?.kind ?? null;
+    if (hover && hover.shown.contains(el)) {
+      steps = [...steps.filter((s) => s._el !== hover.trigger), hover.step].slice(-T.MAX);
+      kind ??= "hover menu";
+    }
+    if (!kind && steps.length) kind = el.closest('[role="tabpanel"]') ? "tab panel" : null;
+    return { steps: steps.map(({ _el, rest, keep, ...s }) => s), layer: kind };
+  }
+
+  // palate's own UI never tells the page that focus or a press went outside it, so an open modal or menu
+  // (focus traps, close on click outside) stays open while the user writes their pin.
+  for (const t of ["focusin", "focusout"])
+    addEventListener(
+      t,
+      (e) => {
+        if (e.target === host || e.relatedTarget === host) e.stopImmediatePropagation();
+      },
+      true,
+    );
+  for (const t of ["pointerdown", "mousedown", "touchstart", "focusin", "focusout"]) sr.addEventListener(t, (e) => e.stopPropagation());
+
+  // ---------- Point mode ----------
+  function setMode(on) {
+    S.on = on;
+    ui.fab.classList.toggle("on", on);
+    ui.fab.setAttribute("aria-pressed", String(on));
+    document.documentElement.classList.toggle("palate-pointing", on);
+    if (!on) {
+      closeDialog();
+      ui.hl.hidden = true;
+      ui.hint.hidden = true;
+      S.target = S.leaf = null;
+    } else {
+      closePop();
+      ui.hint.hidden = false;
+      ui.hint.innerHTML = coarse ? `<b>Tap</b> an element to point at it` : `<b>Click</b> to point at it<span class="ext"><span class="sep"></span><kbd>↑</kbd><kbd>↓</kbd> parent / child</span><span class="sep"></span><kbd>Esc</kbd> stop`;
+    }
+    loop();
+  }
+  const cursorStyle = document.createElement("style");
+  cursorStyle.textContent = "html.palate-pointing, html.palate-pointing * { cursor: crosshair !important; }";
+
+  for (const t of ["pointerdown", "mousedown", "pointerup", "mouseup", "dblclick", "contextmenu", "auxclick"])
+    window.addEventListener(
+      t,
+      (e) => {
+        if (!S.on || ours(e)) return;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      },
+      true,
+    );
+  window.addEventListener(
+    "click",
+    (e) => {
+      if (!S.on || ours(e)) return;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      if (S.dialog) {
+        // A click elsewhere moves the dialog (and its draft) to that element.
+        const leaf = leafAt(e.clientX, e.clientY);
+        if (!leaf) return;
+        S.leaf = S.target = leaf;
+        openDialog(leaf, { x: e.clientX, y: e.clientY });
+        return;
+      }
+      if (coarse || !S.target) hoverAt(e.clientX, e.clientY);
+      if (S.target) openDialog(S.target, { x: e.clientX, y: e.clientY });
+    },
+    true,
+  );
+  window.addEventListener(
+    "pointermove",
+    (e) => {
+      if (!S.on || S.dialog || e.pointerType === "touch") return;
+      if (ours(e)) return void (ui.hl.hidden = true);
+      hoverAt(e.clientX, e.clientY);
+    },
+    { capture: true, passive: true },
+  );
+  window.addEventListener(
+    "keydown",
+    (e) => {
+      if (e.altKey && !e.ctrlKey && !e.metaKey && e.code === "KeyP") {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        return setMode(!S.on);
+      }
+      if (e.key === "Escape") {
+        if (S.zoom) return void closeZoom();
+        if (S.pop) return void closePop();
+        if (!S.on) return;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        if (S.dialog) closeDialog();
+        else setMode(false);
+        return;
+      }
+      if (!S.on || ours(e)) return;
+      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        e.key === "ArrowUp" ? up() : down();
+      } else if (e.key === "Enter" && S.target && !S.dialog) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        const r = S.target.getBoundingClientRect();
+        openDialog(S.target, { x: r.left + 12, y: r.top + 12 });
+      }
+    },
+    true,
+  );
+  // Keys typed in palate's own UI never reach the page's shortcuts.
+  for (const t of ["keydown", "keyup", "keypress"]) sr.addEventListener(t, (e) => e.stopPropagation());
+  ui.fab.addEventListener("click", () => setMode(!S.on));
+
+  // ---------- Dialog ----------
+  function renderDialogHead() {
+    const d = S.dialog;
+    const head = ui.dialog.querySelector(".name");
+    if (head) head.innerHTML = nameHTML(describe(d.el));
+    renderViewport();
+    const p = d.el.parentElement;
+    ui.dialog.querySelector('[data-a="up"]').disabled = !p || p === document.documentElement;
+    // The steps that opened the state this element sits in: "+2 steps to open", so the user knows.
+    d.trail = pinTrail(d.el, d.hover);
+    const k = d.trail.steps.length;
+    ui.dialog.querySelector(".note").textContent = `Pin ${d.n} · queued${k ? "" : " for the agent"}`;
+    const steps = ui.dialog.querySelector(".steps");
+    steps.hidden = !k;
+    steps.textContent = `+${k} step${k > 1 ? "s" : ""} to open`;
+    steps.title = k ? `palate reopens this for every check: ${d.trail.steps.map(T.stepShort).join(" → ")}${d.trail.layer ? ` → the ${d.trail.layer}` : ""}` : "";
+  }
+  // Which width the user is pinning at, small and muted in the dialog's header.
+  function renderViewport() {
+    const vp = ui.dialog.querySelector(".vp");
+    if (!vp) return;
+    vp.textContent = `${innerWidth} × ${innerHeight}`;
+    vp.title = `You're pinning at ${innerWidth} × ${innerHeight} (${wname(innerWidth)}). The fix is also checked at ${otherOf(innerWidth)} (${wname(otherOf(innerWidth))}).`;
+  }
+  function openDialog(el, at) {
+    closePop();
+    const draft = S.dialog ? { text: ui.dialog.querySelector("textarea").value, chips: [...S.dialog.chips] } : { text: "", chips: [] };
+    const n = (S.requests.reduce((a, r) => Math.max(a, r.n), 0) || 0) + 1;
+    // Read now, while the pointer still holds any hover that shows the element.
+    S.dialog = { el, at, chips: new Set(draft.chips), n, hover: hoverOf(el) };
+    ui.hint.hidden = true;
+    const mod = isMac ? "⌘" : "Ctrl";
+    ui.dialog.innerHTML = `
+      <div class="dh"><div class="name"></div><span class="vp"></span>
+        <button class="ib" type="button" data-a="up" title="Select the parent (↑)" aria-label="Select the parent element">${ICON.up}</button>
+        <button class="ib" type="button" data-a="down" title="Select a child (↓)" aria-label="Select a child element">${ICON.down}</button>
+        <button class="ib" type="button" data-a="close" title="Close (Esc)" aria-label="Close">${ICON.x}</button></div>
+      <textarea rows="2" placeholder="What should change?" aria-label="What should change?"></textarea>
+      <div class="chips" role="group" aria-label="Quick requests">${CHIPS.map((c) => `<button class="chip" type="button" aria-pressed="${S.dialog.chips.has(c)}">${esc(c)}</button>`).join("")}</div>
+      <div class="df"><span class="note">Pin ${n} · queued for the agent</span><span class="steps" hidden></span><button class="send" type="button" disabled>Send <kbd>${mod} ↵</kbd></button></div>`;
+    ui.dialog.hidden = false;
+    const ta = ui.dialog.querySelector("textarea");
+    ta.value = draft.text;
+    renderDialogHead();
+    draw(el, { bands: false, frozen: true });
+    placeDialog();
+    const sendBtn = ui.dialog.querySelector(".send");
+    const sync = () => {
+      sendBtn.disabled = S.sending || (!ta.value.trim() && !S.dialog.chips.size);
+      ta.style.height = "auto";
+      ta.style.height = `${Math.min(ta.scrollHeight, 160)}px`;
+    };
+    ta.addEventListener("input", sync);
+    ta.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        send();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        closeDialog();
+      }
+    });
+    ui.dialog.querySelectorAll(".chip").forEach((b) =>
+      b.addEventListener("click", () => {
+        const c = b.textContent;
+        S.dialog.chips.has(c) ? S.dialog.chips.delete(c) : S.dialog.chips.add(c);
+        b.setAttribute("aria-pressed", String(S.dialog.chips.has(c)));
+        sync();
+        ta.focus();
+      }),
+    );
+    ui.dialog.querySelector('[data-a="up"]').addEventListener("click", up);
+    ui.dialog.querySelector('[data-a="down"]').addEventListener("click", down);
+    ui.dialog.querySelector('[data-a="close"]').addEventListener("click", closeDialog);
+    sendBtn.addEventListener("click", send);
+    sync();
+    requestAnimationFrame(() => ta.focus({ preventScroll: true }));
+    loop();
+  }
+  function placeDialog() {
+    if (!S.dialog || innerWidth <= 520) return;
+    const r = S.dialog.el.getBoundingClientRect();
+    const w = ui.dialog.offsetWidth || 360;
+    const h = ui.dialog.offsetHeight || 200;
+    const big = r.height > innerHeight * 0.55 || r.width > innerWidth * 0.8;
+    let x;
+    let y;
+    if (big) {
+      // Sections: open by the pointer, not at an edge far away.
+      x = S.dialog.at.x - 24;
+      y = S.dialog.at.y + 16;
+      if (y + h > innerHeight - 12) y = S.dialog.at.y - h - 16;
+    } else {
+      x = r.left;
+      y = r.bottom + 10;
+      if (y + h > innerHeight - 12) y = r.top - h - 10;
+      if (y < 12) y = Math.min(innerHeight - h - 12, Math.max(12, r.top + 12));
+    }
+    x = Math.min(Math.max(12, x), innerWidth - w - 12);
+    y = Math.min(Math.max(12, y), innerHeight - h - 12);
+    ui.dialog.style.left = `${x}px`;
+    ui.dialog.style.top = `${y}px`;
+    ui.dialog.style.setProperty("--ox", `${Math.min(Math.max(0, S.dialog.at.x - x), w)}px`);
+    ui.dialog.style.setProperty("--oy", `${y < r.top ? h : 0}px`);
+  }
+  function closeDialog() {
+    if (!S.dialog) return;
+    S.dialog = null;
+    ui.dialog.hidden = true;
+    ui.dialog.innerHTML = "";
+    ui.hl.hidden = true;
+    if (S.on) ui.hint.hidden = false;
+  }
+
+  function payload(el) {
+    const r = el.getBoundingClientRect();
+    return {
+      route: location.pathname + location.search,
+      href: location.href,
+      title: document.title,
+      selector: selectorOf(el),
+      path: domPath(el),
+      tag: el.tagName.toLowerCase(),
+      id: el.id || null,
+      className: typeof el.className === "string" ? el.className : el.getAttribute("class") || "",
+      label: describe(el),
+      text: (el.innerText || el.textContent || "").replace(/\s+/g, " ").trim().slice(0, 600),
+      textNodes: textNodes(el),
+      outerHTML: trimHTML(el),
+      styles: keyStyles(el),
+      framework: framework(el),
+      box: { x: Math.round(r.left), y: Math.round(r.top), width: Math.round(r.width), height: Math.round(r.height) },
+      viewport: { width: innerWidth, height: innerHeight },
+      dpr: devicePixelRatio || 1,
+      scroll: { x: Math.round(scrollX), y: Math.round(scrollY) },
+      colorScheme: matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
+    };
+  }
+  async function send() {
+    const d = S.dialog;
+    if (!d || S.sending) return;
+    const ta = ui.dialog.querySelector("textarea");
+    const prompt = ta.value.trim();
+    const chips = CHIPS.filter((c) => d.chips.has(c));
+    if (!prompt && !chips.length) return;
+    S.sending = true;
+    const btn = ui.dialog.querySelector(".send");
+    btn.disabled = true;
+    try {
+      const res = await fetch(`${API}/request`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ ...payload(d.el), prompt, chips, trail: d.trail?.steps ?? [], layer: d.trail?.layer ?? null }) });
+      if (!res.ok) throw new Error(await res.text());
+      const { agent, ...r } = await res.json();
+      S.els.set(r.id, d.el);
+      if (agent) setAgent(agent);
+      upsert(r);
+      closeDialog();
+      // Nothing is lost without an agent: the pin waits in the queue and the next agent takes it in order.
+      if (noAgent()) toast(`<b>Pin ${r.n} queued, but your agent isn't listening.</b> ${START_AGENT}`, "warn", 9000);
+      else toast(`<b>Pin ${r.n} queued.</b> Point at another element, or ${coarse ? "tap the button" : "Esc"} when you're done.`);
+    } catch (e) {
+      console.warn("palate point:", e);
+      toast(`<b>Couldn't send.</b> Is palate point still running?`);
+      btn.disabled = false;
+    } finally {
+      S.sending = false;
+    }
+  }
+
+  // ---------- Pins ----------
+  const here = (r) => r.route.split("?")[0] === location.pathname && r.status !== "canceled";
+  function elementOf(r) {
+    let el = S.els.get(r.id);
+    if (el && el.isConnected) return el;
+    try {
+      el = document.querySelector(r.selector);
+    } catch {
+      el = null;
+    }
+    if (el) S.els.set(r.id, el);
+    return el;
+  }
+  function upsert(r) {
+    const i = S.requests.findIndex((x) => x.id === r.id);
+    const before = i >= 0 ? S.requests[i] : null;
+    if (i >= 0) S.requests[i] = r;
+    else S.requests.push(r);
+    if (before && before.status !== "done" && r.status === "done") {
+      S.els.delete(r.id);
+      if (here(r)) toast(`<b>Pin ${r.n} done.</b> ${esc(r.summary || "")}`, true);
+    }
+    if (before && before.status !== "failed" && r.status === "failed") toast(`<b>Pin ${r.n} failed.</b> Open the pin to see why, or retry.`, "warn", 6000);
+    if (S.pop?.id === r.id) renderPop();
+    renderPins();
+    renderAgent();
+  }
+  function renderPins() {
+    const list = S.requests.filter(here);
+    const open = S.requests.filter((r) => r.status === "queued" || r.status === "working").length;
+    ui.badge.hidden = !open;
+    ui.badge.textContent = String(open);
+    for (const p of [...ui.pins.children]) if (!list.some((r) => r.id === p.dataset.id)) p.remove();
+    for (const r of list) {
+      let p = ui.pins.querySelector(`[data-id="${CSS.escape(r.id)}"]`);
+      if (!p) {
+        p = document.createElement("button");
+        p.type = "button";
+        p.className = "pin";
+        p.dataset.id = r.id;
+        p.addEventListener("click", (e) => {
+          e.stopPropagation();
+          S.pop?.id === r.id ? closePop() : openPop(r.id);
+        });
+        p.addEventListener("pointerenter", () => ghost(r.id));
+        p.addEventListener("pointerleave", () => ghost(null));
+        ui.pins.appendChild(p);
+      }
+      if (p.dataset.status !== r.status) {
+        p.dataset.status = r.status;
+        p.className = `pin ${r.status}`;
+        p.innerHTML = r.status === "done" ? ICON.check : String(r.n);
+      }
+      // The other width broke: a small amber dot on the pin.
+      const broke = r.other?.verdict === "broke" && (r.status === "done" || r.status === "working");
+      p.classList.toggle("broke", broke);
+      p.setAttribute("aria-label", `Pin ${r.n}: ${STATUS[r.status] ?? r.status}${broke ? `, broke at ${r.other.width}` : ""}`);
+      p.title = `${r.n}. ${r.prompt || r.chips.join(", ")} (${r.status === "failed" ? "Failed: retry" : (STATUS[r.status] ?? r.status)})${broke ? ` · Broke at ${r.other.width}` : ""}`;
+    }
+    loop();
+  }
+  // Where a pin sits: the element's top-right corner, or where the element was when it can't be found.
+  function anchorOf(r) {
+    const el = elementOf(r);
+    if (visible(el)) return el.getBoundingClientRect();
+    const x = r.box.x + r.scroll.x - scrollX;
+    const y = r.box.y + r.scroll.y - scrollY;
+    return { left: x, top: y, right: x + r.box.width, bottom: y + r.box.height, width: r.box.width, height: r.box.height };
+  }
+  function placePins() {
+    const used = new Map();
+    for (const p of ui.pins.children) {
+      const r = S.requests.find((x) => x.id === p.dataset.id);
+      if (!r) continue;
+      const a = anchorOf(r);
+      const key = `${Math.round(a.right)}|${Math.round(a.top)}`;
+      const k = used.get(key) ?? 0;
+      used.set(key, k + 1);
+      const off = a.bottom < 0 || a.top > innerHeight || a.right < 0 || a.left > innerWidth;
+      p.style.display = off ? "none" : "grid";
+      const x = Math.min(Math.max(4, a.right - 12 - k * 28), innerWidth - 28);
+      const y = Math.min(Math.max(4, a.top - 12), innerHeight - 28);
+      const t = `translate(${x}px, ${y}px)`;
+      p.style.transform = t;
+      p.style.setProperty("--t", t);
+    }
+    if (S.ghost) {
+      const r = S.requests.find((x) => x.id === S.ghost.id);
+      const a = r && anchorOf(r);
+      if (a) Object.assign(S.ghost.el.style, { transform: `translate(${a.left}px, ${a.top}px)`, width: `${a.width}px`, height: `${a.height}px` });
+    }
+    if (S.pop) placePop();
+  }
+  function ghost(id) {
+    S.ghost?.el.remove();
+    S.ghost = null;
+    if (!id || S.on) return;
+    const el = document.createElement("div");
+    el.className = "ghost";
+    ui.pins.prepend(el);
+    S.ghost = { id, el };
+    placePins();
+  }
+
+  // ---------- Pin popover ----------
+  function openPop(id) {
+    if (S.dialog) closeDialog();
+    S.pop = { id, view: "after" };
+    ui.pop.hidden = false;
+    renderPop();
+    placePop();
+  }
+  function closePop() {
+    S.pop = null;
+    ui.pop.hidden = true;
+    ui.pop.innerHTML = "";
+  }
+  function renderPop() {
+    const r = S.requests.find((x) => x.id === S.pop?.id);
+    if (!r) return closePop();
+    const v = r.doneAt || r.created;
+    const img = (k) => `/__palate/img/${encodeURIComponent(r.id)}/${k}.png?v=${encodeURIComponent(v)}`;
+    const st = r.status === "working" ? `<span class="spin" aria-hidden="true"></span>` : `<span class="d ${r.status}"></span>`;
+    const view = S.pop.view;
+    // A request about another width ("on mobile") has crops at that width too; they show first.
+    const alt = r.alt?.width ? r.alt : null;
+    const size = alt && S.pop.size !== "main" ? "alt" : "main";
+    const name = (k) => (size === "alt" ? `${k}-${alt.width}` : k);
+    const hasBefore = size === "alt" ? alt.before : r.hasCrop;
+    const gone = r.status === "done" && Boolean(size === "alt" ? alt.removed : r.removed);
+    const hasAfter = r.status === "done" && (size === "alt" ? alt.after : r.hasAfter);
+    const compare = hasAfter || gone;
+    const goneHTML = `<div class="gone"><b>Removed</b><span>The element is gone, as asked.</span></div>`;
+    const sizes = alt ? `<div class="seg" role="group" aria-label="Width"><button type="button" data-s="alt" aria-pressed="${size === "alt"}">${alt.width} wide</button><button type="button" data-s="main" aria-pressed="${size === "main"}">${r.viewport?.width ?? "Desktop"} wide</button></div>` : "";
+    // Before and after at both widths, once done: rows for desktop and phone (widest first), the pinned one marked.
+    const o = r.other?.width ? r.other : null;
+    const vw = r.viewport?.width;
+    const rows =
+      r.status === "done" && o?.after && vw
+        ? [
+            { w: vw, pinned: true, before: r.hasCrop ? img("crop") : null, after: r.removed ? "gone" : r.hasAfter ? img("after") : null, bs: r.reopen?.before === STUCK ? STUCK : null, as: r.reopen?.after === STUCK ? STUCK : null },
+            { w: o.width, pinned: false, before: o.before?.has ? img(`crop-${o.width}`) : null, after: o.after.removed ? "gone" : o.after.has ? img(`after-${o.width}`) : null, bs: o.before?.reopen === STUCK ? STUCK : o.before?.state, as: o.after.reopen === STUCK ? STUCK : o.after.state },
+          ].sort((a, b) => b.w - a.w)
+        : null;
+    const where = (s) => (s === STUCK ? `<span class="cap">Couldn't reopen</span>` : s === "hidden" ? `<span class="cap">Hidden here</span>` : s === "missing" ? `<span class="cap">Not on the page</span>` : "");
+    const cell = (src, i, state, label) =>
+      src === "gone" ? `<button class="cell empty" type="button" data-z="${i}" aria-label="${label}: removed">Removed</button>` : src ? `<button class="cell" type="button" data-z="${i}" aria-label="${label}, enlarge"><img alt="" src="${src}">${where(state)}</button>` : `<div class="cell empty">No crop</div>`;
+    const grid = rows
+      ? `<div class="bx"><div class="cols"><span>Before</span><span>After</span></div>${rows
+          .map((x, i) => {
+            const name = wname(x.w);
+            const tag = x.pinned ? "pinned" : o.verdict && o.verdict !== "unknown" ? o.verdict : "";
+            return `<div class="rl"><b>${name[0].toUpperCase()}${name.slice(1)}</b><span>${x.w}</span><span class="tg ${x.pinned ? "" : esc(o.verdict ?? "")}">${tag}</span></div><div class="pair2">${cell(x.before, i, x.bs, `${name} before`)}${cell(x.after, i, x.as, `${name} after`)}</div>`;
+          })
+          .join("")}</div>`
+      : "";
+    // The other width's verdict: a calm warning when it broke, a quiet note otherwise.
+    const verdict =
+      o?.verdict === "broke" && (r.status === "done" || r.status === "working")
+        ? `<p class="warnbox" role="note"><span class="wd" aria-hidden="true"></span><span>${r.status === "working" ? "The agent's last check: " : ""}<b>Broke at ${o.width}:</b> ${esc((o.problems ?? []).join("; "))}.</span></p>`
+        : r.status === "done" && o?.verdict === "changed"
+          ? `<p class="onote">Changed at ${o.width}: ${esc((o.changes ?? []).join("; "))}.</p>`
+          : r.status === "done" && o?.verdict === "unchanged"
+            ? `<p class="onote">Unchanged at ${o.width}.</p>`
+            : "";
+    // The state this pin sits in, and whether palate could open it again for the checks.
+    const opened = r.trail?.length ? `<p class="onote">Opened by: ${esc(r.trail.map(T.stepShort).join(" → "))}${r.layer ? ` → the ${esc(r.layer)}` : ""}</p>` : "";
+    const stuck = r.reopen?.fail ? `<p class="onote stuck">Couldn't reopen this state for the check${r.reopen.fail.width ? ` at ${r.reopen.fail.width}` : ""}: ${esc(r.reopen.fail.why)}</p>` : "";
+    const vpc = vw ? `<span class="vpc" title="Pinned at ${vw} × ${r.viewport.height} (${wname(vw)})${o ? `; checked at ${o.width} too` : ""}">${vw} × ${r.viewport.height}</span>` : "";
+    ui.pop.setAttribute("aria-label", `Pin ${r.n}`);
+    ui.pop.innerHTML = `
+      <div class="ph"><div class="st">${st}<b>Pin ${r.n}</b><span>${STATUS[r.status] ?? r.status}</span></div>${vpc}<button class="ib" type="button" data-a="close" aria-label="Close">${ICON.x}</button></div>
+      <div class="pb">
+        ${r.prompt ? `<p class="ask">${esc(r.prompt)}</p>` : ""}
+        ${r.chips.length ? `<div class="tags">${r.chips.map((c) => `<span>${esc(c)}</span>`).join("")}</div>` : ""}
+        ${opened}
+        ${r.status === "done" && r.summary ? `<p class="sum"><b>Agent:</b> ${esc(r.summary)}</p>` : ""}
+        ${verdict}
+        ${stuck}
+        ${r.status === "working" ? `<p class="sum">The agent is changing this element. The page reloads by itself when it saves.</p>` : ""}
+        ${r.status === "queued" ? `<p class="sum">${noAgent() ? `Queued${r.position ? ` (${r.position} in line)` : ""}. No agent is listening: ${START_AGENT}` : `Waiting for the agent${r.position ? ` (${r.position} in line)` : ""}.`}</p>` : ""}
+        ${r.status === "failed" ? `<p class="sum">The agent stopped without finishing this one. Its last lines:</p>${r.error ? `<pre class="err mono">${esc(r.error)}</pre>` : ""}` : ""}
+        ${
+          grid
+            ? grid
+            : compare
+            ? `<div class="ba"><div class="segs"><div class="seg" role="group" aria-label="Compare"><button type="button" data-v="before" aria-pressed="${view === "before"}">Before</button><button type="button" data-v="after" aria-pressed="${view === "after"}">After</button></div>${sizes}</div>
+               ${view === "after" && gone ? goneHTML : `<button class="shot" type="button" title="Hold to see before · click to enlarge"><img alt="${view === "after" ? "After" : "Before"} the change" src="${img(name(view === "after" ? "after" : "crop"))}"></button>${gone ? "" : `<span class="hold">Hold the picture to see before</span>`}`}</div>`
+            : hasBefore
+              ? `<div class="ba">${sizes ? `<div class="segs">${sizes}</div>` : ""}<button class="shot" type="button" title="Click to enlarge"><img alt="The element when you pointed at it" src="${img(name("crop"))}"><span class="cap">Before</span></button></div>`
+              : sizes ? `<div class="ba"><div class="segs">${sizes}</div><span class="hold">No crop at this width.</span></div>` : ""
+        }
+        ${r.status === "queued" ? `<div class="pa"><button class="btn" type="button" data-a="cancel">Remove pin</button></div>` : ""}
+        ${r.status === "failed" ? `<div class="pa"><button class="btn" type="button" data-a="retry">Retry</button><button class="btn" type="button" data-a="cancel">Remove pin</button></div>` : ""}
+        ${r.status === "done" ? `<div class="pa"><button class="btn" type="button" data-a="again">Ask again</button></div>` : ""}
+      </div>`;
+    ui.pop.querySelector('[data-a="close"]').addEventListener("click", closePop);
+    ui.pop.querySelectorAll("[data-v]").forEach((b) => b.addEventListener("click", () => ((S.pop.view = b.dataset.v), renderPop())));
+    ui.pop.querySelectorAll("[data-s]").forEach((b) => b.addEventListener("click", () => ((S.pop.size = b.dataset.s), renderPop())));
+    ui.pop.querySelectorAll("[data-z]").forEach((b) =>
+      b.addEventListener("click", () => {
+        const x = rows[Number(b.dataset.z)];
+        const at = `${x.w}${x.pinned ? ", pinned" : ""}`;
+        zoom([
+          [`Before · ${at}`, x.before, "No crop"],
+          [`After · ${at}`, x.after === "gone" ? null : x.after, x.after === "gone" ? null : "No crop"],
+        ]);
+      }),
+    );
+    const shot = ui.pop.querySelector(".shot");
+    if (shot) {
+      const im = shot.querySelector("img");
+      const seg = ui.pop.querySelectorAll("[data-v]");
+      const show = (v) => seg.forEach((b) => b.setAttribute("aria-pressed", String(b.dataset.v === v)));
+      let held = false;
+      let timer = 0;
+      if (hasAfter && !gone) {
+        shot.addEventListener("pointerdown", () => {
+          timer = setTimeout(() => {
+            held = true;
+            im.src = img(name("crop"));
+            show("before");
+          }, 160);
+        });
+        const release = () => {
+          clearTimeout(timer);
+          if (!held) return;
+          setTimeout(() => (held = false), 0);
+          im.src = img(name(view === "after" ? "after" : "crop"));
+          show(view);
+        };
+        shot.addEventListener("pointerup", release);
+        shot.addEventListener("pointerleave", release);
+      }
+      shot.addEventListener("click", () => {
+        if (held) return;
+        zoom(compare ? [["Before", img(name("crop"))], ["After", gone ? null : img(name("after"))]] : [["Before", img(name("crop"))]]);
+      });
+    }
+    ui.pop.querySelector('[data-a="cancel"]')?.addEventListener("click", async () => {
+      await fetch(`${API}/cancel`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ id: r.id }) }).catch(() => {});
+      closePop();
+    });
+    ui.pop.querySelector('[data-a="retry"]')?.addEventListener("click", async () => {
+      const res = await fetch(`${API}/retry`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ id: r.id }) }).catch(() => null);
+      const j = await res?.json().catch(() => null);
+      if (j?.agent) setAgent(j.agent);
+      if (noAgent()) toast(`<b>Pin ${r.n} is queued again, but your agent isn't listening.</b> ${START_AGENT}`, "warn", 9000);
+    });
+    ui.pop.querySelector('[data-a="again"]')?.addEventListener("click", () => {
+      const el = elementOf(r);
+      closePop();
+      if (!el) return toast("<b>That element has changed.</b> Point at it again.");
+      setMode(true);
+      S.leaf = S.target = el;
+      const a = el.getBoundingClientRect();
+      openDialog(el, { x: a.left + 12, y: a.top + 12 });
+    });
+    placePop();
+  }
+  function placePop() {
+    if (!S.pop || innerWidth <= 520) return;
+    const p = ui.pins.querySelector(`[data-id="${CSS.escape(S.pop.id)}"]`);
+    if (!p) return;
+    const pr = p.getBoundingClientRect();
+    const w = ui.pop.offsetWidth || 300;
+    const h = ui.pop.offsetHeight || 160;
+    // Beside the pin when there's room, otherwise under it (right edges aligned), so it covers less of the element.
+    let x = pr.right + 8;
+    let y = pr.top - 8;
+    if (x + w > innerWidth - 12) {
+      x = pr.right - w;
+      y = pr.bottom + 8;
+      if (y + h > innerHeight - 12) y = pr.top - h - 8;
+    }
+    x = Math.min(Math.max(12, x), innerWidth - w - 12);
+    y = Math.min(Math.max(12, y), innerHeight - h - 12);
+    ui.pop.style.left = `${x}px`;
+    ui.pop.style.top = `${y}px`;
+  }
+  function zoom(images) {
+    closeZoom();
+    const z = document.createElement("div");
+    z.className = "zoom";
+    z.setAttribute("role", "dialog");
+    z.setAttribute("aria-label", "Before and after");
+    // [caption, src, text when there's no picture (default: removed, as asked)]
+    z.innerHTML = `<div class="pair">${images.map(([c, src, none]) => `<figure><figcaption>${c}</figcaption>${src ? `<img src="${src}" alt="${c}">` : none ? `<div class="gone"><b>${none}</b></div>` : `<div class="gone"><b>Removed</b><span>The element is gone, as asked.</span></div>`}</figure>`).join("")}</div>`;
+    z.addEventListener("click", closeZoom);
+    ui.root.appendChild(z);
+    S.zoom = z;
+  }
+  function closeZoom() {
+    S.zoom?.remove();
+    S.zoom = null;
+  }
+
+  // ---------- Toast, frame loop, live status ----------
+  let toastTimer = 0;
+  // tone: true or "ok" (done), "warn" (needs the user); long messages wrap and stay longer.
+  function toast(html, tone = false, ms = 3600) {
+    ui.toast.innerHTML = `<span class="dot"></span><span>${html}</span>`;
+    ui.toast.classList.toggle("ok", tone === true || tone === "ok");
+    ui.toast.classList.toggle("warn", tone === "warn");
+    ui.toast.classList.toggle("long", ms > 3600);
+    ui.toast.hidden = false;
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(() => (ui.toast.hidden = true), ms);
+  }
+
+  // ---------- Is an agent listening? ----------
+  // Only what the server says: a point server without the heartbeat (an older palate) shows no status at all.
+  const noAgent = () => Boolean(S.agent) && (S.agent.state === "none" || S.agent.state === "stopped");
+  function setAgent(a) {
+    if (!a) return;
+    S.agent = a;
+    renderAgent();
+    if (S.pop) renderPop();
+  }
+  function renderAgent() {
+    const a = S.agent;
+    ui.agent.hidden = !a;
+    if (!a) return;
+    const queued = S.requests.filter((r) => r.status === "queued").length;
+    const who = a.auto ? "palate point --auto" : a.label === "cli" ? "palate point next" : "your agent";
+    const text = { listening: "Agent listening", busy: `Agent working · pin ${a.pin}`, stopped: "Agent stopped", none: "No agent listening" }[a.state] ?? "No agent listening";
+    ui.agent.dataset.state = a.state;
+    ui.agent.classList.toggle("waiting", a.state === "none" && queued > 0);
+    ui.agent.querySelector(".at").textContent = text;
+    ui.agent.title =
+      a.state === "listening" ? `${who} is waiting for your pins.` : a.state === "busy" ? `${who} is working on pin ${a.pin}.` : a.state === "stopped" ? "You pressed Done. Send a pin to start again." : "Your pins wait in the queue until an agent takes them. In Claude Code run /mcp__palate__point, or start palate point --auto.";
+    ui.agent.querySelector(".stop").hidden = !(a.state === "listening" || a.state === "busy");
+  }
+  ui.agent.querySelector(".stop").addEventListener("click", async () => {
+    const res = await fetch(`${API}/stop`, { method: "POST", headers: { "content-type": "application/json" }, body: "{}" }).catch(() => null);
+    const j = await res?.json().catch(() => null);
+    if (j?.agent) setAgent(j.agent);
+    const open = S.requests.filter((r) => r.status === "queued" || r.status === "working").length;
+    toast(open ? `<b>Done.</b> The agent finishes the ${open} pin${open > 1 ? "s" : ""} you sent, then stops listening.` : "<b>Done.</b> The agent stops listening. Send a pin to start again.");
+  });
+  let raf = 0;
+  function loop() {
+    if (raf) return;
+    const tick = () => {
+      raf = 0;
+      if (S.dialog) {
+        draw(S.dialog.el, { bands: false, frozen: true });
+        placeDialog();
+      } else if (S.on && S.target) draw(S.target);
+      if (ui.pins.children.length) placePins();
+      if (S.on || S.dialog || ui.pins.children.length || S.pop) raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+  }
+  function setState(list, agent) {
+    S.requests = list;
+    if (agent) S.agent = agent;
+    renderPins();
+    renderAgent();
+    if (S.pop) renderPop();
+  }
+  let polling = 0;
+  async function poll() {
+    try {
+      const r = await fetch(`${API}/state`).then((x) => x.json());
+      setState(r.requests ?? [], r.agent);
+    } catch {}
+  }
+  function connect() {
+    if (!window.EventSource) return void (polling ||= setInterval(poll, 2000), poll());
+    const es = new EventSource("/__palate/events");
+    es.onmessage = (m) => {
+      try {
+        const d = JSON.parse(m.data);
+        if (d.type === "state") setState(d.requests ?? [], d.agent);
+        else if (d.type === "update" && d.request) upsert(d.request);
+        else if (d.type === "agent") setAgent(d.agent);
+      } catch {}
+    };
+    es.onerror = () => {
+      es.close();
+      polling ||= setInterval(poll, 2500);
+      setTimeout(() => {
+        clearInterval(polling);
+        polling = 0;
+        connect();
+      }, 4000);
+    };
+  }
+  // Client-side navigation: pins belong to their route.
+  setInterval(() => {
+    // A router that kept history's own pushState still resets the trail here.
+    onNav();
+    if (S.route === location.pathname) return;
+    S.route = location.pathname;
+    closeDialog();
+    closePop();
+    S.els.clear();
+    renderPins();
+  }, 400);
+  addEventListener("resize", () => {
+    renderViewport();
+    placeDialog();
+    placePop();
+  });
+
+  function mount() {
+    if (!document.body) return;
+    (document.head || document.documentElement).appendChild(cursorStyle);
+    document.body.appendChild(host);
+    // Some frameworks replace the body on navigation; come back if that happens.
+    new MutationObserver(() => {
+      if (!host.isConnected && document.body) document.body.appendChild(host);
+      if (!cursorStyle.isConnected) (document.head || document.documentElement).appendChild(cursorStyle);
+    }).observe(document.documentElement, { childList: true, subtree: false });
+    new MutationObserver(() => {
+      if (!host.isConnected && document.body) document.body.appendChild(host);
+    }).observe(document.body, { childList: true });
+    connect();
+  }
+  // After hydration, so the page's framework never sees palate's element.
+  const later = () => (window.requestIdleCallback ? requestIdleCallback(mount, { timeout: 1200 }) : setTimeout(mount, 300));
+  if (document.readyState === "complete") later();
+  else addEventListener("load", later, { once: true });
+})();