pi-ele-picker 0.5.0 → 0.6.1

package/README.md

@@ -110,10 +110,10 @@ The launcher starts in the **bottom-right** corner and stays out of the way:
 Vite reloads the page every time you save a file, so the composer is mirrored into `sessionStorage` and re-attached on the next load:
 
 - The description and any attached screenshots come back exactly as they were.
+- The captured element is **snapshotted at pick time and persisted with the draft**, so the element data survives the node being unmounted, an SPA route change, or the reload itself.
 - The captured element is **re-resolved from its selector**, so after an HMR update you land straight back in the panel on the same element — no re-pick.
 - Closing the panel with **✕** also suppresses the automatic reopen; the draft stays reachable through the launcher's hover.
-- If the element is genuinely gone (unmounted, renamed), the words are still restored and the panel says so — picking a new element attaches the existing text to it.
-- Sending is refused while the panel points at an element that has left the page, so a stale pick can never ship a description of nothing. A replaced node under the same selector (the usual HMR case) is picked up automatically instead.
+- **Sending never depends on the element still being on the page.** Pick a button, go copy something from another route, then send — the description goes out with the element as it was when you picked it. A live read is used instead while you are still on the pick-time page, so an HMR swap of the same node is described in its current state; after a route change the snapshot wins, so a lookalike behind the same selector cannot be mistaken for your pick. When a snapshot was used, the status line says so.
 - The draft is per tab and per path (`sessionStorage`, not `localStorage`), and one older than 24h is discarded. A successful send clears it.
 - Screenshots that exceed the ~5MB `sessionStorage` quota are dropped from the draft with a notice rather than silently lost; the description is always kept.
 
@@ -153,6 +153,7 @@ The same payload is available from the bridge directly:
 - Discovery is per-project: the bridge whose `cwd` matches `root` (and whose process is still alive) is selected, so several projects/sessions can run side by side without cross-talk.
 - If pi restarts while a page is open (new random port + token), the next send re-discovers the bridge and retries once automatically — no page refresh needed. The status poll does the same: a stale port flips to `offline` for one cycle, then rediscovers.
 - The bridge never auto-submits on its own: **写入pi输入框** only fills the editor; **直接发送** is an explicit user action in the page.
+- Attached screenshots are decoded to temp files under `<tmpdir>/pi-picker` and referenced by path in the composed prompt (that is what the agent reads). Files older than 24h are swept on the next session start or pick, so the directory cannot grow without bound — nothing is meant to be kept there, and nothing needs cleaning up by hand.
 
 ## Development
 

package/client/picker.js

@@ -155,6 +155,12 @@
   // The selector `target` was captured through. Kept so the draft can be
   // re-attached after a reload replaces the DOM node `target` points at.
   var targetSelector = null;
+  // Everything about the target captured at pick time. Sending must not depend on
+  // the node still being on the page — see elementPayload().
+  var targetSnapshot = null;
+  // The URL the target was picked on. A selector only identifies an element within
+  // one document: after a route change the same selector may hit a lookalike.
+  var targetUrl = null;
   var shots = [];
   // Set when a pick commits on pointerdown; swallows the follow-up click so the
   // page (links, buttons) never reacts to the click that finished the pick.
@@ -491,12 +497,20 @@
     }
   }
 
-  /** Re-show the panel for the element already captured — no re-pick, no overwrite. */
+  /**
+   * Re-show the panel for the element already captured — no re-pick, no overwrite.
+   *
+   * A snapshot is enough to reopen: the developer may have navigated away from the
+   * page that element lives on, and losing access to their own draft over that
+   * would be the wrong trade. The highlight is simply skipped when there is
+   * nothing on screen to outline.
+   */
   function openPanel() {
     var el = resolveTarget();
-    if (!el) return false;
+    if (!el && !targetSnapshot) return false;
     panel.classList.add('open');
-    showHighlight(el);
+    if (el) showHighlight(el);
+    else hideHighlight();
     positionPanel();
     return true;
   }
@@ -504,6 +518,8 @@
   function select(el) {
     target = el;
     targetSelector = cssPath(el);
+    targetSnapshot = describe(el);
+    targetUrl = location.href;
     // A new pick re-arms the draft: the user is working again, so a reload must
     // bring the panel back even if they closed it earlier.
     panelDismissed = false;
@@ -513,6 +529,14 @@
     taEl.focus();
   }
 
+  /**
+   * The element description handed to the bridge is chosen in send(), because the
+   * choice between a live read and the snapshot has to be reported to the user.
+   * Describing a detached node is never an option: `getComputedStyle()` and
+   * `getBoundingClientRect()` return nothing useful once it leaves the document, so
+   * the fallback has to be the captured value, not a fresh read.
+   */
+
   function vueLine(el) {
     var v = vueInfo(el);
     if (v.componentFile) return '<br>组件: <code>' + escapeHtml((v.componentName ? v.componentName + ' ' : '') + v.componentFile) + '</code>';
@@ -729,10 +753,15 @@
     var rec = {
       selector: targetSelector,
       text: taEl.value,
+      // The element as it was when it was picked. Persisted because the reload
+      // that restores the draft is often the same one that removed the node —
+      // without this the send below could only go out with no element at all.
+      element: targetSnapshot,
+      url: targetUrl,
       dismissed: panelDismissed,
       savedAt: Date.now(),
     };
-    if (!rec.text && !rec.selector) {
+    if (!rec.text && !rec.selector && !rec.element) {
       // Nothing worth restoring — do not resurrect an empty panel on reload.
       clearDraft();
       return;
@@ -839,21 +868,26 @@
       }
     }
 
-    if (rec.selector) {
-      targetSelector = String(rec.selector);
-      var el = resolveTarget();
-      if (el) metaEl.innerHTML = '<code>' + escapeHtml(targetSelector) + '</code>' + vueLine(el);
-      else targetSelector = null; // keep the words, drop the dead reference
+    if (rec.selector) targetSelector = String(rec.selector);
+    if (rec.url) targetUrl = String(rec.url);
+    if (rec.element && typeof rec.element === 'object') targetSnapshot = rec.element;
+
+    var el = targetSelector ? resolveTarget() : null;
+    if (el) {
+      metaEl.innerHTML = '<code>' + escapeHtml(targetSelector) + '</code>' + vueLine(el);
+    } else if (targetSnapshot) {
+      // Still sendable: the snapshot carries everything the bridge needs.
+      metaEl.innerHTML =
+        '<code>' + escapeHtml(targetSelector || '') + '</code><br>' +
+        '上次选中的元素已不在页面中，发送时会带上抓取时的快照';
     }
 
     if (rec.dismissed) return;
-    if (target) {
-      openPanel();
-      return;
-    }
+    if (openPanel()) return;
     if (!taEl.value && !shots.length) return;
-    // The element is gone but the words survive: show the composer so the draft is
-    // visibly still there, and let the next pick attach it to a new element.
+    // No element at all (not even a snapshot) but there are words: show the
+    // composer so the draft is visibly still there, and let the next pick attach
+    // it to a new element.
     panel.classList.add('open');
     metaEl.textContent = '上次选中的元素已不在页面中，请重新点击选择';
     positionPanel();
@@ -875,14 +909,16 @@
   }
 
   /** POST the payload to the bridge. Never rejects; status 0 means the fetch itself failed. */
-  function deliver(c, submit) {
+  function deliver(c, submit, element) {
     var payload = {
       text: taEl.value,
       images: shots.map(function (d, i) {
         return { name: 'shot-' + i + '.png', dataUrl: d };
       }),
-      element: describe(target),
-      url: location.href,
+      element: element,
+      // The page the element lives on, which is not necessarily the page that is
+      // open right now.
+      url: targetUrl || location.href,
       title: document.title,
       submit: !!submit,
     };
@@ -919,12 +955,32 @@
   }
 
   function send(submit) {
-    // The picked node can be detached by an HMR update while the panel stays open
-    // on it; describing a dead node would ship a description of nothing.
-    if (!resolveTarget()) {
-      setStatus('目标元素已不在页面中，请重新点击选择元素', 'err');
+    // Deliberately NOT gated on the element still being on the page. Picking an
+    // element and then wandering off to another route to copy something is a
+    // normal way to work, and blocking the send there throws away the words the
+    // developer typed.
+    //
+    // Two sources for the element, and the wrong one silently corrupts the payload:
+    // the snapshot captured at pick time (a plain value, so it survives an unmount,
+    // an SPA route change or a reload), and a live read of whatever the selector
+    // resolves to now. A live read wins only while we are still on the pick-time
+    // URL — an HMR swap of the same element is the case that needs it, while a
+    // route change can put an unrelated lookalike behind the same selector.
+    var live = resolveTarget();
+    var samePage = targetUrl === null || location.href === targetUrl;
+    var element = live && samePage ? describe(live) : targetSnapshot;
+    if (element) targetSnapshot = element;
+
+    if (!element && !taEl.value.trim()) {
+      setStatus('请先点击页面元素，或写下要改什么', 'err');
       return;
     }
+
+    // Only ever affects the status line, never whether the send happens.
+    var note = '';
+    if (element && !live) note = '（元素已不在页面中，已附抓取时的快照）';
+    else if (element && !samePage) note = '（页面已切换，已附抓取时的元素快照）';
+
     sendBtn.disabled = true;
     sendNowBtn.disabled = true;
     setStatus(submit ? '直接发送中…' : '写入中…');
@@ -932,7 +988,7 @@
     function attempt(forceFresh) {
       return loadConfig(forceFresh).then(function (c) {
         if (!c || !c.port) return { status: 0, body: null, noBridge: true };
-        return deliver(c, submit);
+        return deliver(c, submit, element);
       });
     }
 
@@ -950,10 +1006,17 @@
           return;
         }
         if (out.body && out.body.ok) {
+          // Say which element went out, so a stale pick is visible rather than silent.
           if (out.body.submitted) {
-            setStatus(out.body.queued ? '已发送 ✓（agent 忙碌，已排队为后续任务）' : '已直接发送给 pi 并开始执行 ✓', 'ok');
+            setStatus(
+              (out.body.queued ? '已发送 ✓（agent 忙碌，已排队为后续任务）' : '已直接发送给 pi 并开始执行 ✓') + note,
+              'ok'
+            );
           } else {
-            setStatus(out.body.inserted ? '已写入 pi 输入框 ✓（去终端按回车发送）' : '已发送给 pi ✓', 'ok');
+            setStatus(
+              (out.body.inserted ? '已写入 pi 输入框 ✓（去终端按回车发送）' : '已发送给 pi ✓') + note,
+              'ok'
+            );
           }
           taEl.value = '';
           shots = [];

package/extensions/pi-picker.ts

@@ -36,7 +36,7 @@
  */
 import { createServer, type Server } from 'node:http';
 import { randomBytes } from 'node:crypto';
-import { mkdirSync, writeFileSync, rmSync, existsSync, readdirSync, readFileSync } from 'node:fs';
+import { mkdirSync, writeFileSync, rmSync, existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
 import { join } from 'node:path';
 import { homedir, tmpdir } from 'node:os';
 import type { ExtensionAPI, ExtensionUIContext } from '@earendil-works/pi-coding-agent';
@@ -45,6 +45,24 @@ const REG_DIR = join(homedir(), '.pi', 'agent', 'pi-picker');
 const IMG_DIR = join(tmpdir(), 'pi-picker');
 const MAX_BODY = 40 * 1024 * 1024;
 
+/**
+ * How long a staged screenshot is kept.
+ *
+ * The file only has to outlive the moment the agent reads it, and the agent reads
+ * it after the developer sends the prompt — which is not always right away: the
+ * "写入pi输入框" flow can leave a prompt sitting in the editor until the next
+ * morning. A day covers that, and it matches the browser draft's own TTL: once the
+ * draft has expired those paths can never be referenced again.
+ *
+ * Nothing else ever deletes these files, so without the sweep below the directory
+ * grows forever — one screenshot is a few MB, and every pick leaves its own here.
+ */
+const IMG_TTL_MS = 24 * 60 * 60 * 1000;
+
+/** The sweep is cheap but pointless per pick, so it runs at most this often. */
+const IMG_SWEEP_INTERVAL_MS = 60 * 60 * 1000;
+let lastImageSweepAt = 0;
+
 function log(msg: string): void {
   try {
     process.stderr.write(`[pi-picker] ${msg}\n`);
@@ -203,8 +221,49 @@ interface PickPayload {
   submit?: boolean;
 }
 
+/**
+ * Delete staged screenshots older than IMG_TTL_MS.
+ *
+ * Age comes from the file's mtime rather than from any index we keep, so images
+ * orphaned by a pi process that died mid-pick are collected too.
+ *
+ * Best-effort throughout, and `force: true` on removal: a second pi process
+ * sweeping the same shared tmpdir at the same moment must not be able to fail a
+ * pick, and a file that is already gone is the outcome we wanted anyway.
+ *
+ * `force` bypasses the throttle — used on session start, where one sweep per
+ * session is exactly the guarantee we want.
+ */
+function sweepStaleImages(force = false): void {
+  const now = Date.now();
+  if (!force && now - lastImageSweepAt < IMG_SWEEP_INTERVAL_MS) return;
+  lastImageSweepAt = now;
+
+  let removed = 0;
+  try {
+    for (const entry of readdirSync(IMG_DIR, { withFileTypes: true })) {
+      // Only ever touch regular files we could have written ourselves.
+      if (!entry.isFile()) continue;
+      const full = join(IMG_DIR, entry.name);
+      try {
+        if (now - statSync(full).mtimeMs <= IMG_TTL_MS) continue;
+        rmSync(full, { force: true });
+        removed++;
+      } catch {
+        /* vanished under us, or unreadable — nothing left to do for this one */
+      }
+    }
+  } catch {
+    return; // IMG_DIR does not exist yet: nothing has ever been staged
+  }
+  if (removed) log(`swept ${removed} expired screenshot(s) from ${IMG_DIR}`);
+}
+
 function saveImages(images: PickImage[] | undefined): string[] {
   const paths: string[] = [];
+  // Throttled, so a long-running session does not accumulate a week of screenshots
+  // behind it; session start forces a sweep, so a restart always collects.
+  sweepStaleImages();
   (images ?? []).forEach((img, i) => {
     const m = /^data:(image\/[a-z0-9.+-]+);base64,(.+)$/i.exec(img?.dataUrl ?? '');
     if (!m) return;
@@ -467,6 +526,7 @@ export default function (pi: ExtensionAPI): void {
     const port = typeof addr === 'object' && addr ? addr.port : 0;
     mkdirSync(REG_DIR, { recursive: true });
     sweepStaleRegistry();
+    sweepStaleImages(true);
     regFile = join(REG_DIR, `${process.pid}.json`);
     writeFileSync(
       regFile,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-ele-picker",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "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",