pi-ele-picker 0.3.1 → 0.4.0

package/README.md

@@ -94,6 +94,8 @@ The launcher starts in the **bottom-right** corner and stays out of the way:
 - **Draggable** — grab it and drop it anywhere; the position is remembered per browser (`localStorage`).
 - **Fades when idle** (opacity `0.5`) and returns to full opacity on hover.
 - **Shows the live pi session status** as a coloured dot **when enabled** — green while pi is running, amber while follow-ups are queued, grey while awaiting input, red when the bridge is gone (see [Session status](#session-status)).
+- **Hovering the launcher reopens the panel** for the element you captured last — no need to pick it again, and the captured element is only replaced when you commit a new pick. Closing the panel with **✕** keeps it available this way.
+- Clicking the launcher starts a **new pick**: the panel steps out of the way, and pressing **Esc** keeps the previously captured element intact.
 - The panel always opens **next to the launcher**, flipping sides and clamping to stay on screen.
 - **The panel is draggable too** — grab its title bar (or any empty spot) to move it; the offset from the launcher is remembered per browser (`localStorage`), and the panel still follows the launcher while clamping itself to stay on screen.
 
@@ -131,7 +133,7 @@ The same payload is available from the bridge directly:
   "provider": "anthropic", "pid": 12345, "cwd": "…", "updatedAt": 1700000000000 }
 ```
 
-`/status` needs no token, but non-loopback browser origins get `403`, so an arbitrary website cannot probe session metadata.
+`/status` needs no token, but non-local browser origins get `403`, so an arbitrary website cannot probe session metadata. "Local" covers `localhost` / `*.localhost`, `127.0.0.0/8`, `0.0.0.0`, `[::1]`, and private or link-local IPv4 literals (`10.x.x.x`, `172.16-31.x.x`, `192.168.x.x`, `169.254.x.x`) — so a dev server you open over your machine's LAN IPv4 address (Vite binds `0.0.0.0` by default) works, while an arbitrary site does not.
 
 ## Notes
 

package/client/picker.js

@@ -119,7 +119,7 @@
   triggerDot.className = 'dot st-off';
   trigger.appendChild(triggerDot);
   trigger.appendChild(document.createTextNode('Pi Picker'));
-  trigger.title = '拖拽可移动 · 面板标题栏也可拖拽 · 点击开始选择元素';
+  trigger.title = '拖拽可移动 · 面板标题栏也可拖拽 · 悬浮可再次打开上次元素 · 点击开始选择元素';
   root.appendChild(trigger);
 
   var panel = document.createElement('div');
@@ -149,6 +149,8 @@
   var fileEl = panel.querySelector('.file');
 
   var picking = false;
+  // The captured element the panel acts on. Stays put across close/reopen so
+  // hovering the launcher can bring the panel back without overwriting it.
   var target = null;
   var shots = [];
   // Set when a pick commits on pointerdown; swallows the follow-up click so the
@@ -281,6 +283,7 @@
 
   trigger.addEventListener('pointerdown', function (e) {
     if (e.pointerType === 'mouse' && e.button !== 0) return;
+    clearHoverOpen();
     var r = trigger.getBoundingClientRect();
     drag = { id: e.pointerId, sx: e.clientX, sy: e.clientY, ox: r.left, oy: r.top, moved: false };
     try {
@@ -419,7 +422,8 @@
   function onMove(e) {
     var el = elFromEvent(e);
     if (!el) return;
-    target = el;
+    // Highlight only: `target` is replaced solely by a committed pick, so Esc
+    // or pausing on another element never clobbers the panel's element.
     showHighlight(el);
   }
 
@@ -464,6 +468,12 @@
     hint.style.display = on ? 'block' : 'none';
     trigger.style.display = on ? 'none' : 'flex';
     if (on) {
+      // Picking means "choose another element": hide the panel so it never
+      // covers the page. It reopens when the new pick commits, and the previous
+      // element only gets replaced at that point.
+      clearHoverOpen();
+      panel.classList.remove('open');
+      hideHighlight();
       window.addEventListener('mousemove', onMove, true);
       window.addEventListener('pointerdown', onPointerDown, true);
       window.addEventListener('keydown', onKey, true);
@@ -475,12 +485,19 @@
     }
   }
 
+  /** Re-show the panel for the element already captured — no re-pick, no overwrite. */
+  function openPanel() {
+    if (!target) return false;
+    panel.classList.add('open');
+    showHighlight(target);
+    positionPanel();
+    return true;
+  }
+
   function select(el) {
     target = el;
-    showHighlight(el);
     metaEl.innerHTML = '<code>' + escapeHtml(cssPath(el)) + '</code>' + vueLine(el);
-    panel.classList.add('open');
-    positionPanel();
+    openPanel();
     taEl.focus();
   }
 
@@ -722,6 +739,33 @@
   window.addEventListener('pointerdown', function () { swallowClick = false; }, true);
   window.addEventListener('click', onClick, true);
 
+  /* --- hover reopens the last captured element --- */
+  var HOVER_OPEN_DELAY = 200;
+  var hoverOpenTimer = null;
+
+  function clearHoverOpen() {
+    if (hoverOpenTimer) {
+      clearTimeout(hoverOpenTimer);
+      hoverOpenTimer = null;
+    }
+  }
+
+  trigger.addEventListener('pointerenter', function (e) {
+    // Mouse only: touch/pen enter is part of a tap, which must keep its click.
+    if (e.pointerType !== 'mouse') return;
+    if (picking || drag) return;
+    clearHoverOpen();
+    // A short dwell keeps a mouse merely passing over the launcher from popping
+    // the panel open, while still feeling immediate when you aim at it.
+    hoverOpenTimer = setTimeout(function () {
+      hoverOpenTimer = null;
+      if (picking || drag) return;
+      openPanel();
+    }, HOVER_OPEN_DELAY);
+  });
+
+  trigger.addEventListener('pointerleave', clearHoverOpen);
+
   trigger.addEventListener('click', function () {
     if (suppressClick) {
       suppressClick = false;
@@ -802,7 +846,7 @@
     if (info && info.sessionId) detail.push('会话 ' + String(info.sessionId).slice(0, 8));
     var line = STATUS_LABEL[st] + (detail.length ? ' · ' + detail.join(' · ') : '');
     sessionText.textContent = line;
-    var title = line + ' · 拖拽可移动 · 面板标题栏也可拖拽 · 点击开始选择元素';
+    var title = line + ' · 拖拽可移动 · 面板标题栏也可拖拽 · 悬浮可再次打开上次元素 · 点击开始选择元素';
     if (title !== statusTitle) {
       trigger.title = title;
       statusTitle = title;

package/extensions/pi-picker.ts

@@ -12,7 +12,10 @@
  * Wire protocol (POST /pick):
  *   headers: content-type: application/json
  *            x-pi-picker-token: <token from the registry file>
- *            origin:            http://localhost:<port> | http://127.0.0.1:<port>
+ *            origin:            a local origin — http(s)://localhost:<port>,
+ *                               http(s)://127.0.0.1:<port>, or any loopback /
+ *                               private IPv4 literal (192.168.x.x, 10.x.x.x,
+ *                               172.16-31.x.x, 169.254.x.x, 0.0.0.0)
  *   body:    { text?, images?: [{name, dataUrl}], element?: {...}, url?, title?, submit? }
  *   reply:   { ok: true, mode, inserted } | { ok: true, mode, submitted, queued? }
  *            | { ok: false, error }
@@ -22,9 +25,9 @@
  *              mode, sessionId, model, provider, pid, cwd, updatedAt }
  *
  * `/status` is polled by the browser picker to render a live session badge (the
- * launcher dot + the panel status line). It has no token: any loopback-origin
- * page may read it, but non-loopback browser origins are rejected so an arbitrary
- * website cannot probe session metadata.
+ * launcher dot + the panel status line). It has no token: any local-origin page
+ * may read it, but non-local browser origins are rejected so an arbitrary website
+ * cannot probe session metadata.
  *
  * Two delivery modes:
  *   - default (submit falsy): pre-fill the current pi input editor for review.
@@ -50,12 +53,79 @@ function log(msg: string): void {
   }
 }
 
-function isLoopbackOrigin(origin: unknown): boolean {
-  return typeof origin === 'string' && /^http:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/.test(origin);
+/** Loopback / private / link-local / "this host" IPv4 literals. */
+function isLocalIpv4(ip: string): boolean {
+  const parts = ip.split('.');
+  if (parts.length !== 4) return false;
+  const octets: number[] = [];
+  for (const p of parts) {
+    if (!/^\d{1,3}$/.test(p)) return false;
+    const n = Number(p);
+    if (n > 255) return false;
+    octets.push(n);
+  }
+  const [a, b] = octets;
+  if (a === 127 || a === 0) return true; // 127.0.0.0/8 loopback · 0.0.0.0 "this host"
+  if (a === 10) return true; // 10.0.0.0/8
+  if (a === 172 && b >= 16 && b <= 31) return true; // 172.16.0.0/12
+  if (a === 192 && b === 168) return true; // 192.168.0.0/16
+  if (a === 169 && b === 254) return true; // 169.254.0.0/16 link-local
+  return false;
+}
+
+/**
+ * `::ffff:7f00:1` (the hex form WHATWG normalises IPv4-mapped IPv6 to) and the
+ * literal `::ffff:127.0.0.1` both become `127.0.0.1`; anything else is null.
+ */
+function v4MappedToIpv4(host: string): string | null {
+  const m = /^::ffff:([0-9a-f]{1,4}):([0-9a-f]{1,4})$/.exec(host);
+  if (!m) return null;
+  const hi = parseInt(m[1], 16);
+  const lo = parseInt(m[2], 16);
+  return [hi >> 8, hi & 0xff, lo >> 8, lo & 0xff].join('.');
+}
+
+/**
+ * Is this hostname the developer's own machine?
+ *
+ * The picker is injected by the developer's Vite dev server, which Vite binds to
+ * `0.0.0.0` by default — so the page is routinely opened as
+ * `http://0.0.0.0:5173`, `http://192.168.1.5:5173`, or `http://[::1]:5173`
+ * rather than `http://localhost:5173`. All of those are still local, so they are
+ * accepted alongside `localhost` / `*.localhost` / `127.0.0.1`.
+ *
+ * Only literal addresses are accepted: a *name* (`dev.internal`, `evil.com`)
+ * never passes, which keeps the DNS-rebinding defence intact — that attack needs
+ * a name in the Host header pointed at 127.0.0.1.
+ */
+function isLocalHostname(hostname: string): boolean {
+  const host = hostname.replace(/^\[|\]$/g, '').toLowerCase();
+  if (host === 'localhost' || host.endsWith('.localhost')) return true;
+  if (host === '::1') return true;
+  if (host.startsWith('::ffff:')) {
+    return isLocalIpv4(v4MappedToIpv4(host) ?? host.slice('::ffff:'.length));
+  }
+  return isLocalIpv4(host);
 }
 
-function isLoopbackHost(host: unknown): boolean {
-  return typeof host === 'string' && /^(localhost|127\.0\.0\.1)(:\d+)?$/.test(host);
+/** Validate a browser `Origin` header (`scheme://host[:port]`). */
+function isLocalOrigin(origin: unknown): boolean {
+  if (typeof origin !== 'string' || !origin) return false;
+  let url: URL;
+  try {
+    url = new URL(origin);
+  } catch {
+    return false; // `null` (file://, sandboxed iframes) and junk land here
+  }
+  if (url.protocol !== 'http:' && url.protocol !== 'https:') return false;
+  return isLocalHostname(url.hostname);
+}
+
+/** Validate a raw `Host` header (`host[:port]` or `[ipv6][:port]`). */
+function isLocalHost(host: unknown): boolean {
+  if (typeof host !== 'string' || !host) return false;
+  const bracketed = /^\[([^\]]+)\](?::\d+)?$/.exec(host);
+  return isLocalHostname(bracketed ? bracketed[1] : host.replace(/:\d+$/, ''));
 }
 
 function isPidAlive(pid: number): boolean {
@@ -297,6 +367,13 @@ export default function (pi: ExtensionAPI): void {
     res.setHeader('access-control-allow-headers', 'content-type,x-pi-picker-token');
     res.setHeader('access-control-allow-methods', 'GET,POST,OPTIONS');
     if (req.method === 'OPTIONS') {
+      // Chrome's Private Network Access: a page served from a LAN address is a
+      // "private" context while the bridge on 127.0.0.1 is "local", so the
+      // browser preflights with this header before any fetch. Grant the
+      // permission here — the real origin gate still runs on POST /pick below.
+      if (req.headers['access-control-request-private-network'] === 'true') {
+        res.setHeader('access-control-allow-private-network', 'true');
+      }
       res.writeHead(204);
       res.end();
       return;
@@ -311,9 +388,9 @@ export default function (pi: ExtensionAPI): void {
     }
 
     if (req.method === 'GET' && url === '/status') {
-      // Read-only and tokenless, so gate it on a loopback browser origin: reject a
+      // Read-only and tokenless, so gate it on a local browser origin: reject a
       // foreign page while still allowing no-Origin callers (curl, local scripts).
-      if (origin && !isLoopbackOrigin(origin)) {
+      if (origin && !isLocalOrigin(origin)) {
         res.writeHead(403, { 'content-type': 'application/json' });
         res.end(JSON.stringify({ ok: false, error: 'forbidden origin' }));
         return;
@@ -330,12 +407,13 @@ export default function (pi: ExtensionAPI): void {
     }
 
     // SECURITY: block cross-site / DNS-rebinding requests from arbitrary pages.
-    if (!isLoopbackOrigin(origin)) {
+    // Local dev servers that are opened via a LAN IPv4 address still count as local.
+    if (!isLocalOrigin(origin)) {
       res.writeHead(403, { 'content-type': 'application/json' });
       res.end(JSON.stringify({ ok: false, error: 'forbidden origin' }));
       return;
     }
-    if (!isLoopbackHost(req.headers.host)) {
+    if (!isLocalHost(req.headers.host)) {
       res.writeHead(403, { 'content-type': 'application/json' });
       res.end(JSON.stringify({ ok: false, error: 'forbidden host' }));
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-ele-picker",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Pick an element in your running page, describe the change, and send it to a pi session. Ships a Vite dev plugin (browser picker + discovery endpoint) and the matching pi bridge extension.",
   "type": "module",
   "license": "MIT",