pi-ele-picker 0.4.0 → 0.5.0

package/README.md

@@ -105,6 +105,18 @@ The launcher starts in the **bottom-right** corner and stays out of the way:
    - **写入pi输入框** — pre-fills the current pi input box with the composed prompt; you edit and press Enter.
    - **直接发送** — submits the composed prompt as a real user turn immediately (queued as a follow-up if pi is mid-turn).
 
+### Drafts survive reloads
+
+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 **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.
+- 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.
+
 ### Session status
 
 Status polling is **opt-in and off by default**: each cycle opens a loopback request, so it is disabled unless you want it. There are two levels:
@@ -142,6 +154,18 @@ The same payload is available from the bridge directly:
 - 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.
 
+## Development
+
+```bash
+npm install
+npm test        # end-to-end suite; starts its own Vite dev server
+npm run typecheck
+```
+
+The suite drives the real browser client inside [`test/fixture`](test/fixture), a throwaway Vite app: it picks elements, types descriptions, attaches screenshots and reloads, then asserts the draft survived. It runs against `src/` and `client/` directly — no build step is needed first, and a broken client fails the tests rather than the published package.
+
+Local runs drive your installed Chrome. To use Playwright's pinned Chromium instead, run `npx playwright install chromium` once and set `PW_BUNDLED=1`; CI always uses the pinned build. `npx playwright test --ui` and `--debug` work as usual, and a failing run keeps a trace in `test-results/`.
+
 ## Releasing
 
 Publishing is token-free: `.github/workflows/release.yml` publishes with **Trusted Publishing (OIDC)**, so `npm publish` authenticates through a short-lived OIDC token minted by GitHub Actions and provenance is attached automatically.

package/client/picker.js

@@ -152,10 +152,16 @@
   // 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;
+  // 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;
   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.
   var swallowClick = false;
+  // Set when the user closes the panel themselves, so a reload does not pop it
+  // back open on top of whatever they moved on to.
+  var panelDismissed = false;
 
   document.documentElement.appendChild(host);
 
@@ -487,17 +493,23 @@
 
   /** Re-show the panel for the element already captured — no re-pick, no overwrite. */
   function openPanel() {
-    if (!target) return false;
+    var el = resolveTarget();
+    if (!el) return false;
     panel.classList.add('open');
-    showHighlight(target);
+    showHighlight(el);
     positionPanel();
     return true;
   }
 
   function select(el) {
     target = el;
-    metaEl.innerHTML = '<code>' + escapeHtml(cssPath(el)) + '</code>' + vueLine(el);
+    targetSelector = cssPath(el);
+    // 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;
+    metaEl.innerHTML = '<code>' + escapeHtml(targetSelector) + '</code>' + vueLine(el);
     openPanel();
+    saveDraft();
     taEl.focus();
   }
 
@@ -593,6 +605,7 @@
   function addShot(dataUrl) {
     shots.push(dataUrl);
     renderShots();
+    saveShots();
   }
 
   function renderShots() {
@@ -609,6 +622,7 @@
       x.addEventListener('click', function () {
         shots.splice(i, 1);
         renderShots();
+        saveShots();
       });
       d1.appendChild(img);
       d1.appendChild(x);
@@ -627,6 +641,224 @@
     });
   }
 
+  /* --- draft persistence ---------------------------------------------------
+   *
+   * Vite reloads the page on every save, and the composer is by far the most
+   * expensive thing in this tool to lose: a couple of hundred words of
+   * description plus a few pasted screenshots. So the draft is mirrored into
+   * `sessionStorage` and re-attached on the next boot.
+   *
+   * `sessionStorage`, not `localStorage`: a draft belongs to the tab that
+   * produced it and must not follow the developer into a fresh window.
+   *
+   * Two keys on purpose. The text changes on every keystroke while the shots
+   * change rarely; re-serialising megabytes of base64 per keypress would both
+   * stutter the panel and hit the ~5MB quota needlessly. The text key stays
+   * tiny so writing it aggressively is cheap, and the shots key is rewritten
+   * only when the shot set actually changes.
+   *
+   * Everything here is best-effort: a storage failure must never break the
+   * editor, only lose the draft.
+   */
+  var DRAFT_PREFIX = 'pi-ele-picker:draft:v1';
+  var SHOTS_PREFIX = 'pi-ele-picker:shots:v1';
+  var SAVE_DEBOUNCE = 250;
+  // A draft left over from a tab that stayed open for days is more confusing than
+  // helpful: it describes an element that has almost certainly moved on.
+  var DRAFT_TTL = 24 * 60 * 60 * 1000;
+  var saveTimer = null;
+  // True while an edit has not reached storage yet, so a page that is going
+  // away flushes exactly once and a delivered draft is not resurrected.
+  var draftDirty = false;
+  var shotsDropped = false;
+
+  function draftKey() {
+    return DRAFT_PREFIX + ':' + location.pathname;
+  }
+
+  function shotsKey() {
+    return SHOTS_PREFIX + ':' + location.pathname;
+  }
+
+  /** Never throws: returns false when storage is full or unavailable. */
+  function writeStorage(key, value) {
+    try {
+      sessionStorage.setItem(key, value);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function removeStorage(key) {
+    try {
+      sessionStorage.removeItem(key);
+    } catch (e) {
+      /* storage unavailable — nothing to clear */
+    }
+  }
+
+  function readStorage(key) {
+    try {
+      return sessionStorage.getItem(key);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  function saveShots() {
+    if (!shots.length) {
+      removeStorage(shotsKey());
+      shotsDropped = false;
+      return;
+    }
+    if (writeStorage(shotsKey(), JSON.stringify(shots))) {
+      shotsDropped = false;
+      return;
+    }
+    // The images do not fit. Keep the words and say so once, so a reload does not
+    // silently eat the screenshots that were just pasted.
+    removeStorage(shotsKey());
+    if (!shotsDropped) {
+      shotsDropped = true;
+      setStatus('截图过大，刷新后不会保留（描述仍会保存）', 'err');
+    }
+  }
+
+  function saveDraft() {
+    var rec = {
+      selector: targetSelector,
+      text: taEl.value,
+      dismissed: panelDismissed,
+      savedAt: Date.now(),
+    };
+    if (!rec.text && !rec.selector) {
+      // Nothing worth restoring — do not resurrect an empty panel on reload.
+      clearDraft();
+      return;
+    }
+    // Stay dirty when the write fails, so a page that is going away retries.
+    if (writeStorage(draftKey(), JSON.stringify(rec))) draftDirty = false;
+  }
+
+  /** Debounced text write: the keystroke path must stay cheap. */
+  function scheduleSave() {
+    draftDirty = true;
+    if (saveTimer) clearTimeout(saveTimer);
+    saveTimer = setTimeout(function () {
+      saveTimer = null;
+      saveDraft();
+    }, SAVE_DEBOUNCE);
+  }
+
+  /** Write any pending edit right now — the page is being torn down. */
+  function flushDraft() {
+    if (!draftDirty && !saveTimer) return;
+    if (saveTimer) clearTimeout(saveTimer);
+    saveTimer = null;
+    saveDraft();
+  }
+
+  /** Forget the draft: it has been delivered, or it is stale garbage. */
+  function clearDraft() {
+    if (saveTimer) clearTimeout(saveTimer);
+    saveTimer = null;
+    draftDirty = false;
+    shotsDropped = false;
+    removeStorage(draftKey());
+    removeStorage(shotsKey());
+  }
+
+  /**
+   * The live element the panel acts on.
+   *
+   * `target` is a DOM reference captured at pick time, so an HMR update — or any
+   * re-render that swaps the node — leaves it detached. Re-resolving from the
+   * remembered selector keeps the panel pointed at the right element without
+   * asking the user to pick again, and returns null when the element is really
+   * gone, which is what send() and openPanel() need to know.
+   */
+  function resolveTarget() {
+    if (target && target.isConnected) return target;
+    if (targetSelector) {
+      try {
+        var el = document.querySelector(targetSelector);
+        if (el) {
+          target = el;
+          return el;
+        }
+      } catch (e) {
+        /* not valid CSS (Tailwind-style class names) — cannot re-resolve */
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Re-attach the draft written before this page load.
+   *
+   * The element is re-resolved from its selector rather than trusted blindly:
+   * an HMR update replaces DOM nodes, so a captured `target` reference is dead by
+   * the time the page comes back. If the selector no longer resolves, the text
+   * and screenshots are still restored into the composer, so the next pick
+   * inherits them instead of the user retyping everything.
+   */
+  function restoreDraft() {
+    var raw = readStorage(draftKey());
+    if (!raw) return;
+    var rec;
+    try {
+      rec = JSON.parse(raw);
+    } catch (e) {
+      clearDraft();
+      return;
+    }
+    if (!rec || typeof rec !== 'object') {
+      clearDraft();
+      return;
+    }
+    if (typeof rec.savedAt === 'number' && Date.now() - rec.savedAt > DRAFT_TTL) {
+      clearDraft();
+      return;
+    }
+
+    taEl.value = typeof rec.text === 'string' ? rec.text : '';
+
+    var rawShots = readStorage(shotsKey());
+    if (rawShots) {
+      try {
+        var arr = JSON.parse(rawShots);
+        if (arr instanceof Array) {
+          shots = arr.filter(function (d) {
+            return typeof d === 'string' && d.indexOf('data:image/') === 0;
+          });
+          renderShots();
+        }
+      } catch (e) {
+        removeStorage(shotsKey());
+      }
+    }
+
+    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.dismissed) return;
+    if (target) {
+      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.
+    panel.classList.add('open');
+    metaEl.textContent = '上次选中的元素已不在页面中，请重新点击选择';
+    positionPanel();
+  }
+
   function loadConfig(force) {
     if (!force && cfg.port) return Promise.resolve(cfg);
     return fetch(CFG_URL, { cache: 'no-store' })
@@ -687,6 +919,12 @@
   }
 
   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');
+      return;
+    }
     sendBtn.disabled = true;
     sendNowBtn.disabled = true;
     setStatus(submit ? '直接发送中…' : '写入中…');
@@ -720,6 +958,7 @@
           taEl.value = '';
           shots = [];
           renderShots();
+          clearDraft();
         } else {
           setStatus('失败: ' + ((out.body && out.body.error) || out.error || 'HTTP ' + out.status), 'err');
         }
@@ -777,6 +1016,10 @@
     panel.classList.remove('open');
     hideHighlight();
     setStatus('');
+    // Remember the dismissal so a reload does not pop the panel back open, while
+    // the draft stays available through the launcher's hover-to-reopen.
+    panelDismissed = true;
+    saveDraft();
   });
   attachBtn.addEventListener('click', function () {
     fileEl.click();
@@ -791,6 +1034,8 @@
   sendNowBtn.addEventListener('click', function () {
     send(true);
   });
+  taEl.addEventListener('input', scheduleSave);
+  window.addEventListener('pagehide', flushDraft);
   taEl.addEventListener('paste', function (e) {
     var items = e.clipboardData && e.clipboardData.items;
     if (!items) return;
@@ -944,4 +1189,8 @@
     var override = readStatusOverride();
     setStatusEnabled(override !== null ? override : cfg && cfg.statusDefault === true, false);
   });
+
+  // Last: the draft restore depends on state initialised above it (launcher
+  // position, panel offset) and on the draft storage keys being assigned.
+  restoreDraft();
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-ele-picker",
-  "version": "0.4.0",
+  "version": "0.5.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",
@@ -54,7 +54,8 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.test.json",
+    "test": "playwright test",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
@@ -70,6 +71,7 @@
     }
   },
   "devDependencies": {
+    "@playwright/test": "^1.64.1",
     "@types/node": "^20.11.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",