@autono/pinbox-toolbar 0.20.0 → 0.21.0

package/dist/{index-xNXeJ2mR.d.ts → index-CMSOhoVs.d.ts}

@@ -150,6 +150,9 @@ declare class PinboxToolbarElement extends BaseElement {
   restore(keyboard?: boolean): void;
 }
 //#endregion
+//#region src/previews.d.ts
+declare function mountPreviewSwitcher(host: HTMLElement, endpoint: string): void;
+//#endregion
 //#region src/transport/mirror.d.ts
 interface StorageLike {
   getItem(key: string): string | null;
@@ -283,4 +286,4 @@ declare const Pinbox: {
   init(config: PinboxConfig): PinboxToolbarElement;
 };
 //#endregion
-export { applyHubEvent as _, HubEvent as a, upsertPin as b, WebSocketLike as c, PinboxToolbarElement as d, Draft as f, appendThreadMessage as g, UiStatus as h, ConnectionState as i, HubError as l, ToolbarState as m, PinboxConfig as n, HubTransport as o, Store as p, defineToolbarElement as r, TransportOptions as s, Pinbox as t, StorageLike as u, createStore as v, CaptureResult as x, deriveUiStatus as y };
+export { CaptureResult as S, appendThreadMessage as _, HubEvent as a, deriveUiStatus as b, WebSocketLike as c, mountPreviewSwitcher as d, PinboxToolbarElement as f, UiStatus as g, ToolbarState as h, ConnectionState as i, HubError as l, Store as m, PinboxConfig as n, HubTransport as o, Draft as p, defineToolbarElement as r, TransportOptions as s, Pinbox as t, StorageLike as u, applyHubEvent as v, upsertPin as x, createStore as y };

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import { _ as applyHubEvent, a as HubEvent, b as upsertPin, c as WebSocketLike, d as PinboxToolbarElement, f as Draft, g as appendThreadMessage, h as UiStatus, i as ConnectionState, l as HubError, m as ToolbarState, n as PinboxConfig, o as HubTransport, p as Store, r as defineToolbarElement, s as TransportOptions, t as Pinbox, u as StorageLike, v as createStore, x as CaptureResult, y as deriveUiStatus } from "./index-xNXeJ2mR.js";
-export { type CaptureResult, type ConnectionState, type Draft, HubError, type HubEvent, HubTransport, Pinbox, PinboxConfig, PinboxToolbarElement, type StorageLike, type Store, type ToolbarState, type TransportOptions, type UiStatus, type WebSocketLike, appendThreadMessage, applyHubEvent, createStore, defineToolbarElement, deriveUiStatus, upsertPin };
+import { S as CaptureResult, _ as appendThreadMessage, a as HubEvent, b as deriveUiStatus, c as WebSocketLike, d as mountPreviewSwitcher, f as PinboxToolbarElement, g as UiStatus, h as ToolbarState, i as ConnectionState, l as HubError, m as Store, n as PinboxConfig, o as HubTransport, p as Draft, r as defineToolbarElement, s as TransportOptions, t as Pinbox, u as StorageLike, v as applyHubEvent, x as upsertPin, y as createStore } from "./index-CMSOhoVs.js";
+export { type CaptureResult, type ConnectionState, type Draft, HubError, type HubEvent, HubTransport, Pinbox, PinboxConfig, PinboxToolbarElement, type StorageLike, type Store, type ToolbarState, type TransportOptions, type UiStatus, type WebSocketLike, appendThreadMessage, applyHubEvent, createStore, defineToolbarElement, deriveUiStatus, mountPreviewSwitcher, upsertPin };

package/dist/index.js

@@ -1,2 +1,2 @@
-import { a as HubError, c as createStore, i as HubTransport, l as deriveUiStatus, n as defineToolbarElement, o as appendThreadMessage, r as PinboxToolbarElement, s as applyHubEvent, t as Pinbox, u as upsertPin } from "./src-DnAkx29T.js";
-export { HubError, HubTransport, Pinbox, PinboxToolbarElement, appendThreadMessage, applyHubEvent, createStore, defineToolbarElement, deriveUiStatus, upsertPin };
+import { a as HubTransport, c as applyHubEvent, d as upsertPin, i as PinboxToolbarElement, l as createStore, n as defineToolbarElement, o as HubError, r as mountPreviewSwitcher, s as appendThreadMessage, t as Pinbox, u as deriveUiStatus } from "./src-B134WXZ8.js";
+export { HubError, HubTransport, Pinbox, PinboxToolbarElement, appendThreadMessage, applyHubEvent, createStore, defineToolbarElement, deriveUiStatus, mountPreviewSwitcher, upsertPin };

package/dist/model.d.ts

@@ -1,4 +1,4 @@
-import { d as PinboxToolbarElement } from "./index-xNXeJ2mR.js";
+import { f as PinboxToolbarElement } from "./index-CMSOhoVs.js";
 import { ModelAnchor, ModelAnchor as ModelAnchor$1, Pin } from "@autono/pinbox-core/schema";
 //#region src/model-target.d.ts
 type ModelProjection = (anchor: ModelAnchor$1) => {

package/dist/{options-CNqXqkp9.d.ts → options-DPsmmgra.d.ts}

@@ -3,6 +3,10 @@
 interface PinboxPluginOptions {
   /** Explicit hub base URL. When set, `.pinbox/server.json` discovery is skipped entirely. */
   hub?: string;
+  /** Vite only: show registered local worktree previews. Opt-in, dev-only. */
+  previews?: boolean;
+  /** Local CLI executable used for preview discovery. Defaults to pinbox on PATH. */
+  previewExecutable?: string;
   /** Directory containing `.pinbox/server.json`. Defaults to `process.cwd()`. */
   projectRoot?: string;
   /** Spawn `pinbox serve` when no healthy hub is found. Defaults to true. */

package/dist/plugins/next.d.ts

@@ -1,4 +1,4 @@
-import { t as PinboxPluginOptions } from "../options-CNqXqkp9.js";
+import { t as PinboxPluginOptions } from "../options-DPsmmgra.js";
 //#region src/plugins/next.d.ts
 /**
  * Structural stand-in for Next's `NextConfig`.

package/dist/plugins/vite.d.ts

@@ -1,4 +1,4 @@
-import { t as PinboxPluginOptions } from "../options-CNqXqkp9.js";
+import { t as PinboxPluginOptions } from "../options-DPsmmgra.js";
 import { Plugin } from "vite";
 //#region src/plugins/vite.d.ts
 /**

package/dist/plugins/vite.js

@@ -1,4 +1,53 @@
 import { a as readHubToken, i as ensureHub, n as VIRTUAL_ID, r as resolveOptions, t as RESOLVED_VIRTUAL_ID } from "../options-DSrJgbJh.js";
+import { execFile } from "node:child_process";
+import { createHash } from "node:crypto";
+import { realpathSync } from "node:fs";
+//#region src/plugins/previews.ts
+const PREVIEWS_PATH = "/__pinbox_previews";
+function servePreviews(server, cwd, executable) {
+	server.middlewares.use((req, res, next) => {
+		const path = req.url?.split("?")[0];
+		if (path !== "/__pinbox_previews" && path !== `/__pinbox_previews/identity`) return next();
+		res.setHeader("Content-Type", "application/json");
+		res.setHeader("Cache-Control", "no-store");
+		if (req.method !== "GET" || req.headers["sec-fetch-site"] === "cross-site") {
+			res.statusCode = 403;
+			res.end(JSON.stringify({
+				ok: false,
+				error: { message: "same-origin GET required" }
+			}));
+			return;
+		}
+		if (path === `/__pinbox_previews/identity`) {
+			res.end(JSON.stringify({ id: createHash("sha256").update(realpathSync(cwd)).digest("hex").slice(0, 12) }));
+			return;
+		}
+		execFile(executable, [
+			"preview",
+			"list",
+			"--json"
+		], {
+			cwd,
+			timeout: 6e3,
+			maxBuffer: 1048576
+		}, (error, stdout) => {
+			if (error) {
+				res.statusCode = 503;
+				res.end(JSON.stringify({
+					ok: false,
+					error: { message: "Preview discovery unavailable. Update the Pinbox CLI." }
+				}));
+			} else try {
+				JSON.parse(stdout);
+				res.end(stdout);
+			} catch {
+				res.statusCode = 503;
+				res.end("{\"ok\":false}");
+			}
+		});
+	});
+}
+//#endregion
 //#region src/plugins/snippet.ts
 /**
 * Build the module source injected into the dev page.
@@ -24,14 +73,17 @@ import { a as readHubToken, i as ensureHub, n as VIRTUAL_ID, r as resolveOptions
 * this import was dropped for real. `src/build.test.ts` bundles this exact import with Vite and
 * asserts `customElements.define` survives, because statting dist/ cannot see that class of break.
 */
-function buildBootstrap(hubUrl, token) {
+function buildBootstrap(hubUrl, token, previews) {
 	const hub = JSON.stringify(hubUrl);
+	const tag = JSON.stringify("pinbox-toolbar");
+	const tokenLiteral = token === void 0 ? "null" : JSON.stringify(token);
 	return `// pinbox dev toolbar — injected by @autono/pinbox-toolbar (dev only)
 import "@autono/pinbox-toolbar";
+${previews ? "import { mountPreviewSwitcher } from \"@autono/pinbox-toolbar\";" : ""}
 
-const TAG = ${JSON.stringify("pinbox-toolbar")};
+const TAG = ${tag};
 const HUB = ${hub};
-const TOKEN = ${token === void 0 ? "null" : JSON.stringify(token)};
+const TOKEN = ${tokenLiteral};
 
 function mount() {
   let el = document.querySelector(TAG);
@@ -44,6 +96,7 @@ function mount() {
   if (TOKEN === null) el.removeAttribute("token");
   else el.setAttribute("token", TOKEN);
   if (created) document.body.appendChild(el);
+  ${previews ? `mountPreviewSwitcher(el, ${JSON.stringify(previews)});` : ""}
 }
 
 if (document.readyState === "loading") {
@@ -63,6 +116,8 @@ const PLUGIN_NAME = "pinbox";
 */
 function pinbox(options) {
 	const resolved = resolveOptions(options);
+	const previews = options?.previews ?? process.env["PINBOX_PREVIEWS"] === "1";
+	const previewExecutable = options?.previewExecutable ?? process.env["PINBOX_PREVIEW_EXECUTABLE"] ?? "pinbox";
 	if (resolved.disabled) return { name: PLUGIN_NAME };
 	let hubPromise;
 	function hub() {
@@ -72,7 +127,8 @@ function pinbox(options) {
 	return {
 		name: PLUGIN_NAME,
 		apply: "serve",
-		async configureServer() {
+		async configureServer(server) {
+			if (previews) servePreviews(server, resolved.projectRoot, previewExecutable);
 			await hub();
 		},
 		resolveId(id) {
@@ -83,7 +139,7 @@ function pinbox(options) {
 			if (id !== "\0virtual:pinbox-toolbar") return null;
 			const status = await hub();
 			if (status === void 0) return "// pinbox: hub unavailable, toolbar not mounted.\nexport {};\n";
-			return buildBootstrap(status.url, readHubToken(resolved.projectRoot));
+			return buildBootstrap(status.url, readHubToken(resolved.projectRoot), previews ? PREVIEWS_PATH : void 0);
 		},
 		transformIndexHtml: {
 			order: "pre",

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { n as PinboxConfig } from "./index-xNXeJ2mR.js";
+import { n as PinboxConfig } from "./index-CMSOhoVs.js";
 import { ReactElement } from "react";
 //#region src/react.d.ts
 /**

package/dist/react.js

@@ -1,4 +1,4 @@
-import { n as defineToolbarElement, r as PinboxToolbarElement } from "./src-DnAkx29T.js";
+import { i as PinboxToolbarElement, n as defineToolbarElement } from "./src-B134WXZ8.js";
 import { createElement, useEffect, useRef } from "react";
 //#region src/react.ts
 /**

package/dist/{src-DnAkx29T.js → src-B134WXZ8.js}

@@ -793,6 +793,125 @@ function createMinimize(host) {
 	};
 }
 //#endregion
+//#region src/reveal-settle.ts
+const pending = /* @__PURE__ */ new WeakMap();
+function cancelRevealSettle(doc) {
+	pending.get(doc)?.();
+}
+function settlePinReveal(doc, reveal) {
+	cancelRevealSettle(doc);
+	const win = doc.defaultView;
+	if (!win) return;
+	let attempts = 0;
+	let timer = 0;
+	const events = [
+		"wheel",
+		"touchstart",
+		"pointerdown",
+		"keydown"
+	];
+	const stop = () => {
+		win.clearTimeout(timer);
+		for (const event of events) doc.removeEventListener(event, stop, true);
+		pending.delete(doc);
+	};
+	for (const event of events) doc.addEventListener(event, stop, {
+		capture: true,
+		passive: true
+	});
+	const tick = () => {
+		reveal();
+		if (++attempts >= 10) stop();
+		else timer = win.setTimeout(tick, 150);
+	};
+	pending.set(doc, stop);
+	timer = win.setTimeout(tick, 150);
+}
+//#endregion
+//#region src/pin-reveal.ts
+/** Query ordering is not a view change; repeated parameter ordering remains intact. */
+function samePinView(win, value) {
+	if (!value) return true;
+	try {
+		const target = new URL(value, win.location.href);
+		const current = new URL(win.location.href);
+		target.searchParams.sort();
+		current.searchParams.sort();
+		return target.pathname === current.pathname && target.search === current.search;
+	} catch {
+		return true;
+	}
+}
+function pagePin(pin) {
+	return pin.target?.selector === "html" || pin.target?.selector === "body";
+}
+/** Resolve before clipping: an offscreen row is precisely the target we need to scroll. */
+function scrollToPin(doc, pin) {
+	if (pin.target?.model || pagePin(pin)) return false;
+	const win = doc.defaultView;
+	if (!win || !samePinView(win, pin.target?.url) || !pin.target?.selector) return false;
+	try {
+		const element = doc.querySelector(pin.target.selector);
+		if (!element?.getClientRects().length) return false;
+		element.scrollIntoView({
+			behavior: "instant",
+			block: "center",
+			inline: "center"
+		});
+		return true;
+	} catch {
+		return false;
+	}
+}
+const key = (endpoint) => `pinbox:${endpoint}:reveal`;
+/** Returns true when leaving this document. Never navigates to a different origin. */
+function revealPin(doc, pin, endpoint) {
+	cancelRevealSettle(doc);
+	const win = doc.defaultView;
+	if (!win) return false;
+	try {
+		win.sessionStorage.removeItem(key(endpoint));
+	} catch {}
+	if (pagePin(pin) || pin.target?.model) return false;
+	if (pin.target?.url && !samePinView(win, pin.target.url)) try {
+		const target = new URL(pin.target.url, win.location.href);
+		if (target.origin !== win.location.origin || !["http:", "https:"].includes(target.protocol)) return false;
+		win.sessionStorage.setItem(key(endpoint), JSON.stringify({
+			id: pin.id,
+			expires: Date.now() + 3e4
+		}));
+		win.location.assign(target.href);
+		return true;
+	} catch {
+		return false;
+	}
+	scrollToPin(doc, pin);
+	return false;
+}
+/** Called on pin updates and DOM changes: SPA content may arrive after the toolbar. */
+function pendingPinReveal(doc, pins, endpoint) {
+	const win = doc.defaultView;
+	if (!win) return null;
+	try {
+		const raw = win.sessionStorage.getItem(key(endpoint));
+		if (!raw) return null;
+		const pending = JSON.parse(raw);
+		if (typeof pending.id !== "string" || !Number.isFinite(pending.expires) || pending.expires < Date.now()) {
+			win.sessionStorage.removeItem(key(endpoint));
+			return null;
+		}
+		const pin = pins.find((p) => p.id === pending.id);
+		if (!pin || !scrollToPin(doc, pin)) return null;
+		win.sessionStorage.removeItem(key(endpoint));
+		settlePinReveal(doc, () => {
+			scrollToPin(doc, pin);
+		});
+		return pin.id;
+	} catch {
+		return null;
+	}
+}
+//#endregion
 //#region src/ui/aim.ts
 /**
 * True when aiming has to be done by dragging rather than by pointing.
@@ -2385,20 +2504,6 @@ const chipMemo = /* @__PURE__ */ new WeakMap();
 function nextOrdinal(pins) {
 	return Math.max(pins.length, ...pins.map((p) => p.n ?? 0)) + 1;
 }
-/**
-* Does the pin's captured URL still describe the view on screen? Path + search
-* only — hashes are anchors, not views. An absent or unparseable URL never
-* gates: old pins (and CLI pins) keep rendering exactly as before.
-*/
-function sameView(win, url) {
-	if (url === void 0) return true;
-	try {
-		const target = new URL(url, win.location.href);
-		return target.pathname === win.location.pathname && target.search === win.location.search;
-	} catch {
-		return true;
-	}
-}
 /** A stored (document-space) rect or point, in today's viewport. */
 function toViewport(win, p) {
 	return {
@@ -2425,21 +2530,21 @@ function anchorRect(doc, pin) {
 function targetRect(doc, target) {
 	if (target?.model) return projectModelTarget(doc, target.model);
 	const stored = target?.rect;
-	if (stored === void 0) return null;
 	const win = doc.defaultView;
-	if (win === null) return stored;
-	if (!sameView(win, target?.url)) return null;
+	if (win === null) return stored ?? null;
+	if (!samePinView(win, target?.url)) return null;
 	const selector = target?.selector;
-	if (selector === void 0) return toViewport(win, stored);
+	if (selector === void 0) return stored ? toViewport(win, stored) : null;
+	if (!stored && (selector === "html" || selector === "body")) return null;
 	let el;
 	try {
 		el = doc.querySelector(selector);
 	} catch {
-		return toViewport(win, stored);
+		return stored ? toViewport(win, stored) : null;
 	}
 	if (el === null) return null;
 	const r = el.getBoundingClientRect();
-	if (r.width <= 0 && r.height <= 0) return toViewport(win, stored);
+	if (r.width <= 0 && r.height <= 0) return stored ? toViewport(win, stored) : null;
 	return clipToScrollAncestors(win, el, {
 		x: r.left,
 		y: r.top,
@@ -2753,6 +2858,7 @@ function anchorOf(root, pin, draft) {
 * labels the card without claiming an element that was never captured.
 */
 function labelOf(target) {
+	if (target?.selector === "html" || target?.selector === "body") return "PAGE";
 	if (target?.model) return `3D · ${target.model.partId}`;
 	return target?.anchor ?? target?.tag?.toUpperCase() ?? "PIN";
 }
@@ -3762,16 +3868,15 @@ var PinboxToolbarElement = class extends BaseElement {
 	/** Inbox item click: activate the pin and scroll it into view (prototype line 700). */
 	#activateFromInbox(pinId) {
 		const pin = this.store.get().pins.find((p) => p.id === pinId);
+		if (!pin) return;
+		this.store.update({
+			inboxOpen: false,
+			activePinId: null,
+			pinsHidden: false
+		});
+		if (revealPin(document, pin, this.config?.endpoint ?? "")) return;
 		this.#ensureThread(pinId);
 		this.store.update({ activePinId: pinId });
-		const rect = pin === void 0 ? null : anchorRect(document, pin);
-		if (rect) {
-			const y = window.scrollY + rect.y + rect.height / 2;
-			window.scrollTo({
-				top: Math.max(0, y - window.innerHeight / 2),
-				behavior: "smooth"
-			});
-		}
 	}
 	/**
 	* Nudge a stale pin: re-post the last human message as a new thread message. A watcher that
@@ -3920,6 +4025,16 @@ var PinboxToolbarElement = class extends BaseElement {
 		});
 	};
 	#render(state) {
+		const restored = pendingPinReveal(document, state.pins, this.config?.endpoint ?? "");
+		if (restored) {
+			this.#ensureThread(restored);
+			this.store.update({
+				activePinId: restored,
+				inboxOpen: false,
+				pinsHidden: false
+			});
+			return;
+		}
 		const placing = state.mode === "placing";
 		this.toggleAttribute("data-placing", placing);
 		document.body.classList.toggle(PAGE_PLACING_CLASS, placing);
@@ -3932,6 +4047,184 @@ var PinboxToolbarElement = class extends BaseElement {
 	}
 };
 //#endregion
+//#region src/ui/preview-styles.ts
+const PREVIEW_STYLES = `
+.pb-preview-wrap { display:flex; align-items:center; border-left:1px solid var(--pb-line); margin-left:4px; padding-left:4px; }
+.pb-preview-trigger { max-width:160px; gap:7px; }
+.pb-preview-trigger .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:110px; }
+.pb-preview-trigger svg { flex-shrink:0; }
+.pb-preview-menu { position:fixed; margin:0; padding:0; width:304px; max-width:calc(100vw - 24px); max-height:70vh; overflow:auto; background:var(--pb-surface); color:var(--pb-fg1); border:1px solid var(--pb-line-2); border-radius:4px; box-shadow:var(--pb-shadow); font-family:var(--pb-font-body); }
+.pb-preview-menu::backdrop { background:transparent; }
+.pb-preview-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px 8px 16px; border-bottom:1px solid var(--pb-line); }
+.pb-preview-head span { font:10px var(--pb-font-mono); letter-spacing:.18em; color:var(--pb-fg3); }
+.pb-preview-list { padding:5px; }
+.pb-preview-option { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 10px; border-radius:2px; color:var(--pb-fg2); }
+.pb-preview-option:hover, .pb-preview-option:focus-visible { background:var(--pb-hover); outline:1px solid var(--pb-line-2); }
+.pb-preview-option[aria-checked="true"] { background:var(--pb-amber-soft); color:var(--pb-fg1); }
+.pb-preview-option:disabled { opacity:.45; cursor:not-allowed; }
+.pb-preview-option .check { width:14px; flex-shrink:0; color:var(--pb-amber); }
+.pb-preview-option .copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
+.pb-preview-option .title { font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.pb-preview-option .branch { font:10px var(--pb-font-mono); color:var(--pb-fg3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.pb-preview-foot { border-top:1px solid var(--pb-line); padding:11px 16px; display:flex; flex-direction:column; gap:8px; }
+.pb-preview-status { font-size:11px; line-height:1.5; color:var(--pb-fg3); }
+.pb-preview-foot a { font:10px var(--pb-font-mono); letter-spacing:.08em; color:var(--pb-amber); text-decoration:none; }
+`;
+//#endregion
+//#region src/ui/preview-switcher.ts
+const CHEVRON = icon("<path d=\"m4 6 4 4 4-4\"/>", 14);
+const REFRESH = icon("<path d=\"M2 8a6 6 0 0 1 10.5-4L14 6M14 2v4h-4M14 8a6 6 0 0 1-10.5 4L2 10M2 14v-4h4\"/>", 14);
+const BRANCH = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"><circle cx=\"4\" cy=\"3\" r=\"1.5\"/><circle cx=\"4\" cy=\"13\" r=\"1.5\"/><circle cx=\"12\" cy=\"4\" r=\"1.5\"/><path d=\"M4 4.5v7M12 5.5v1a3 3 0 0 1-3 3H7a3 3 0 0 0-3 3\"/></svg>";
+function createPreviewView(doc, root, bar) {
+	const style = doc.createElement("style");
+	style.textContent = PREVIEW_STYLES;
+	root.append(style);
+	const wrap = doc.createElement("div");
+	wrap.dataset["previewSwitcher"] = "";
+	wrap.className = "pb-preview-wrap";
+	wrap.innerHTML = `<button type="button" class="pb-tb pb-preview-trigger" aria-label="Switch preview" aria-haspopup="menu" aria-controls="pb-preview-menu" aria-expanded="false">${BRANCH}<span class="name">PREVIEW</span>${CHEVRON}</button>
+    <div id="pb-preview-menu" class="pb-preview-menu" popover="auto" aria-label="Local previews">
+      <div class="pb-preview-head"><span>LOCAL PREVIEWS</span><button type="button" class="pb-tb sq" aria-label="Refresh previews">${REFRESH}</button></div>
+      <div class="pb-preview-list" role="menu" aria-label="Preview branch or worktree"></div>
+      <div class="pb-preview-foot"><span class="pb-preview-status" role="status">Loading previews…</span><a target="_blank" rel="noopener noreferrer" hidden>OPEN PR ↗</a></div>
+    </div>`;
+	bar.append(wrap);
+	const trigger = wrap.querySelector(".pb-preview-trigger");
+	const panel = wrap.querySelector(".pb-preview-menu");
+	const list = wrap.querySelector(".pb-preview-list");
+	const reload = wrap.querySelector("[aria-label=\"Refresh previews\"]");
+	const status = wrap.querySelector("[role=\"status\"]");
+	const pr = wrap.querySelector("a");
+	wirePopover(trigger, panel, list, doc);
+	return {
+		trigger,
+		list,
+		status,
+		reload,
+		render(choices) {
+			renderOptions(doc, list, choices);
+			const current = choices.find((p) => p.current);
+			trigger.querySelector(".name").textContent = compactLabel(current);
+			trigger.setAttribute("aria-label", `Switch preview: ${current?.label ?? "local previews"}`);
+			trigger.title = current ? `${current.branch} · ${current.commit.slice(0, 8)}` : "Choose a preview";
+			status.textContent = current?.backend || "Local frontend preview";
+			pr.hidden = !current?.pr;
+			if (current?.pr) pr.href = current.pr;
+		}
+	};
+}
+function compactLabel(current) {
+	if (!current) return "PREVIEW";
+	return current.label.match(/^PR #\d+/)?.[0] ?? (current.branch === "main" ? "MAIN" : current.branch.replace(/^[^/]+\//, ""));
+}
+function renderOptions(doc, list, choices) {
+	list.replaceChildren();
+	for (const item of choices) {
+		const button = doc.createElement("button");
+		button.type = "button";
+		button.className = "pb-preview-option";
+		button.dataset["previewId"] = item.id;
+		button.setAttribute("role", "menuitemradio");
+		button.setAttribute("aria-checked", String(item.current));
+		button.disabled = !item.ready;
+		button.innerHTML = "<span class=\"check\" aria-hidden=\"true\"></span><span class=\"copy\"><span class=\"title\"></span><span class=\"branch\"></span></span>";
+		button.querySelector(".check").textContent = item.current ? "✓" : "";
+		button.querySelector(".title").textContent = item.label;
+		button.querySelector(".branch").textContent = `${item.branch}${item.ready ? "" : " · unavailable"}`;
+		list.append(button);
+	}
+}
+function wirePopover(trigger, panel, list, doc) {
+	trigger.addEventListener("click", () => {
+		panel.togglePopover();
+		const rect = trigger.getBoundingClientRect();
+		const width = doc.documentElement.clientWidth;
+		panel.style.left = `${Math.max(12, Math.min(rect.right - 304, width - 316))}px`;
+		panel.style.top = `${rect.top > panel.offsetHeight + 20 ? rect.top - panel.offsetHeight - 10 : rect.bottom + 10}px`;
+		(list.querySelector("button[aria-checked=\"true\"]:not(:disabled)") ?? list.querySelector("button:not(:disabled)"))?.focus();
+	});
+	panel.addEventListener("toggle", () => trigger.setAttribute("aria-expanded", String(panel.matches(":popover-open"))));
+	panel.addEventListener("keydown", (e) => {
+		const buttons = [...list.querySelectorAll("button:not(:disabled)")];
+		const index = buttons.indexOf(panel.getRootNode().activeElement);
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(e.key)) {
+			e.preventDefault();
+			buttons[e.key === "Home" ? 0 : e.key === "End" ? buttons.length - 1 : (index + (e.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length]?.focus();
+		}
+		if (e.key === "Escape") {
+			panel.hidePopover();
+			trigger.focus();
+		}
+	});
+}
+//#endregion
+//#region src/previews.ts
+function previewDestination(origin, current) {
+	const target = new URL(origin);
+	const source = new URL(current);
+	if (!["http:", "https:"].includes(target.protocol) || target.username || target.password || target.pathname !== "/" || target.search || target.hash) throw new Error("Invalid preview origin");
+	target.pathname = source.pathname;
+	target.search = source.search;
+	target.hash = source.hash;
+	return target.href;
+}
+function mountPreviewSwitcher(host, endpoint) {
+	const root = host.shadowRoot;
+	const bar = root?.querySelector(".pb-bar");
+	if (!root || !bar || root.querySelector("[data-preview-switcher]")) return;
+	const doc = host.ownerDocument;
+	const { trigger, list, status, reload, render } = createPreviewView(doc, root, bar);
+	let choices = [];
+	let busy = false;
+	const load = async () => {
+		const response = await fetch(endpoint, {
+			credentials: "same-origin",
+			cache: "no-store"
+		});
+		const envelope = await response.json();
+		if (!response.ok || !envelope.ok || !Array.isArray(envelope.data)) throw new Error("Preview discovery unavailable");
+		return envelope.data;
+	};
+	async function refresh() {
+		if (busy) return;
+		busy = true;
+		try {
+			choices = await load();
+			render(choices);
+			trigger.disabled = false;
+		} catch {
+			status.textContent = "Preview discovery unavailable";
+			trigger.disabled = false;
+		} finally {
+			busy = false;
+		}
+	}
+	reload.addEventListener("click", () => {
+		refresh();
+	});
+	list.addEventListener("click", async (event) => {
+		const target = event.target.closest("[data-preview-id]");
+		const id = target?.dataset["previewId"];
+		if (!id || target?.disabled) return;
+		trigger.disabled = true;
+		status.textContent = "Checking preview…";
+		try {
+			const destination = (await load()).find((p) => p.id === id);
+			if (!destination?.ready || !destination.url) throw new Error("unavailable");
+			doc.defaultView?.location.assign(previewDestination(destination.url, doc.location.href));
+		} catch {
+			status.textContent = "Preview unavailable. Refresh to try again.";
+			trigger.disabled = false;
+		}
+	});
+	refresh();
+}
+//#endregion
 //#region src/index.ts
 /** Register <pinbox-toolbar>; no-op outside a browser or when already defined. */
 function defineToolbarElement() {
@@ -3947,4 +4240,4 @@ const Pinbox = { init(config) {
 } };
 defineToolbarElement();
 //#endregion
-export { HubError as a, createStore as c, HubTransport as i, deriveUiStatus as l, defineToolbarElement as n, appendThreadMessage as o, PinboxToolbarElement as r, applyHubEvent as s, Pinbox as t, upsertPin as u };
+export { HubTransport as a, applyHubEvent as c, upsertPin as d, PinboxToolbarElement as i, createStore as l, defineToolbarElement as n, HubError as o, mountPreviewSwitcher as r, appendThreadMessage as s, Pinbox as t, deriveUiStatus as u };

package/dist/svelte.d.ts

@@ -1,4 +1,4 @@
-import { _ as applyHubEvent, a as HubEvent, b as upsertPin, c as WebSocketLike, d as PinboxToolbarElement, f as Draft, g as appendThreadMessage, h as UiStatus, i as ConnectionState, l as HubError, m as ToolbarState, n as PinboxConfig, o as HubTransport, p as Store, r as defineToolbarElement, s as TransportOptions, t as Pinbox, u as StorageLike, v as createStore, x as CaptureResult, y as deriveUiStatus } from "./index-xNXeJ2mR.js";
+import { S as CaptureResult, _ as appendThreadMessage, a as HubEvent, b as deriveUiStatus, c as WebSocketLike, d as mountPreviewSwitcher, f as PinboxToolbarElement, g as UiStatus, h as ToolbarState, i as ConnectionState, l as HubError, m as Store, n as PinboxConfig, o as HubTransport, p as Draft, r as defineToolbarElement, s as TransportOptions, t as Pinbox, u as StorageLike, v as applyHubEvent, x as upsertPin, y as createStore } from "./index-CMSOhoVs.js";
 import { Action } from "svelte/action";
 //#region src/svelte.d.ts
 /**
@@ -8,4 +8,4 @@ import { Action } from "svelte/action";
  */
 declare const pinbox: Action<HTMLElement, PinboxConfig>;
 //#endregion
-export { type CaptureResult, type ConnectionState, type Draft, HubError, type HubEvent, HubTransport, Pinbox, PinboxConfig, PinboxToolbarElement, type StorageLike, type Store, type ToolbarState, type TransportOptions, type UiStatus, type WebSocketLike, appendThreadMessage, applyHubEvent, createStore, defineToolbarElement, deriveUiStatus, pinbox, upsertPin };
+export { type CaptureResult, type ConnectionState, type Draft, HubError, type HubEvent, HubTransport, Pinbox, PinboxConfig, PinboxToolbarElement, type StorageLike, type Store, type ToolbarState, type TransportOptions, type UiStatus, type WebSocketLike, appendThreadMessage, applyHubEvent, createStore, defineToolbarElement, deriveUiStatus, mountPreviewSwitcher, pinbox, upsertPin };

package/dist/svelte.js

@@ -1,4 +1,4 @@
-import { a as HubError, c as createStore, i as HubTransport, l as deriveUiStatus, n as defineToolbarElement, o as appendThreadMessage, r as PinboxToolbarElement, s as applyHubEvent, t as Pinbox, u as upsertPin } from "./src-DnAkx29T.js";
+import { a as HubTransport, c as applyHubEvent, d as upsertPin, i as PinboxToolbarElement, l as createStore, n as defineToolbarElement, o as HubError, r as mountPreviewSwitcher, s as appendThreadMessage, t as Pinbox, u as deriveUiStatus } from "./src-B134WXZ8.js";
 //#region src/svelte.ts
 /**
 * `<div use:pinbox={{ endpoint }} />` — creates + configures the element BEFORE insertion
@@ -15,4 +15,4 @@ const pinbox = (_node, config) => {
 	} };
 };
 //#endregion
-export { HubError, HubTransport, Pinbox, PinboxToolbarElement, appendThreadMessage, applyHubEvent, createStore, defineToolbarElement, deriveUiStatus, pinbox, upsertPin };
+export { HubError, HubTransport, Pinbox, PinboxToolbarElement, appendThreadMessage, applyHubEvent, createStore, defineToolbarElement, deriveUiStatus, mountPreviewSwitcher, pinbox, upsertPin };

package/dist/toolbar.iife.js

@@ -839,6 +839,125 @@ var Pinbox = (function(exports) {
 		return true;
 	}
 	//#endregion
+	//#region src/reveal-settle.ts
+	const pending = /* @__PURE__ */ new WeakMap();
+	function cancelRevealSettle(doc) {
+		pending.get(doc)?.();
+	}
+	function settlePinReveal(doc, reveal) {
+		cancelRevealSettle(doc);
+		const win = doc.defaultView;
+		if (!win) return;
+		let attempts = 0;
+		let timer = 0;
+		const events = [
+			"wheel",
+			"touchstart",
+			"pointerdown",
+			"keydown"
+		];
+		const stop = () => {
+			win.clearTimeout(timer);
+			for (const event of events) doc.removeEventListener(event, stop, true);
+			pending.delete(doc);
+		};
+		for (const event of events) doc.addEventListener(event, stop, {
+			capture: true,
+			passive: true
+		});
+		const tick = () => {
+			reveal();
+			if (++attempts >= 10) stop();
+			else timer = win.setTimeout(tick, 150);
+		};
+		pending.set(doc, stop);
+		timer = win.setTimeout(tick, 150);
+	}
+	//#endregion
+	//#region src/pin-reveal.ts
+	/** Query ordering is not a view change; repeated parameter ordering remains intact. */
+	function samePinView(win, value) {
+		if (!value) return true;
+		try {
+			const target = new URL(value, win.location.href);
+			const current = new URL(win.location.href);
+			target.searchParams.sort();
+			current.searchParams.sort();
+			return target.pathname === current.pathname && target.search === current.search;
+		} catch {
+			return true;
+		}
+	}
+	function pagePin(pin) {
+		return pin.target?.selector === "html" || pin.target?.selector === "body";
+	}
+	/** Resolve before clipping: an offscreen row is precisely the target we need to scroll. */
+	function scrollToPin(doc, pin) {
+		if (pin.target?.model || pagePin(pin)) return false;
+		const win = doc.defaultView;
+		if (!win || !samePinView(win, pin.target?.url) || !pin.target?.selector) return false;
+		try {
+			const element = doc.querySelector(pin.target.selector);
+			if (!element?.getClientRects().length) return false;
+			element.scrollIntoView({
+				behavior: "instant",
+				block: "center",
+				inline: "center"
+			});
+			return true;
+		} catch {
+			return false;
+		}
+	}
+	const key = (endpoint) => `pinbox:${endpoint}:reveal`;
+	/** Returns true when leaving this document. Never navigates to a different origin. */
+	function revealPin(doc, pin, endpoint) {
+		cancelRevealSettle(doc);
+		const win = doc.defaultView;
+		if (!win) return false;
+		try {
+			win.sessionStorage.removeItem(key(endpoint));
+		} catch {}
+		if (pagePin(pin) || pin.target?.model) return false;
+		if (pin.target?.url && !samePinView(win, pin.target.url)) try {
+			const target = new URL(pin.target.url, win.location.href);
+			if (target.origin !== win.location.origin || !["http:", "https:"].includes(target.protocol)) return false;
+			win.sessionStorage.setItem(key(endpoint), JSON.stringify({
+				id: pin.id,
+				expires: Date.now() + 3e4
+			}));
+			win.location.assign(target.href);
+			return true;
+		} catch {
+			return false;
+		}
+		scrollToPin(doc, pin);
+		return false;
+	}
+	/** Called on pin updates and DOM changes: SPA content may arrive after the toolbar. */
+	function pendingPinReveal(doc, pins, endpoint) {
+		const win = doc.defaultView;
+		if (!win) return null;
+		try {
+			const raw = win.sessionStorage.getItem(key(endpoint));
+			if (!raw) return null;
+			const pending = JSON.parse(raw);
+			if (typeof pending.id !== "string" || !Number.isFinite(pending.expires) || pending.expires < Date.now()) {
+				win.sessionStorage.removeItem(key(endpoint));
+				return null;
+			}
+			const pin = pins.find((p) => p.id === pending.id);
+			if (!pin || !scrollToPin(doc, pin)) return null;
+			win.sessionStorage.removeItem(key(endpoint));
+			settlePinReveal(doc, () => {
+				scrollToPin(doc, pin);
+			});
+			return pin.id;
+		} catch {
+			return null;
+		}
+	}
+	//#endregion
 	//#region src/targeting/dom.ts
 	/**
 	* Deepest element under (clientX, clientY) that the caller does not ignore, or null when there is
@@ -2695,20 +2814,6 @@ var Pinbox = (function(exports) {
 	function nextOrdinal(pins) {
 		return Math.max(pins.length, ...pins.map((p) => p.n ?? 0)) + 1;
 	}
-	/**
-	* Does the pin's captured URL still describe the view on screen? Path + search
-	* only — hashes are anchors, not views. An absent or unparseable URL never
-	* gates: old pins (and CLI pins) keep rendering exactly as before.
-	*/
-	function sameView(win, url) {
-		if (url === void 0) return true;
-		try {
-			const target = new URL(url, win.location.href);
-			return target.pathname === win.location.pathname && target.search === win.location.search;
-		} catch {
-			return true;
-		}
-	}
 	/** A stored (document-space) rect or point, in today's viewport. */
 	function toViewport(win, p) {
 		return {
@@ -2735,21 +2840,21 @@ var Pinbox = (function(exports) {
 	function targetRect(doc, target) {
 		if (target?.model) return projectModelTarget(doc, target.model);
 		const stored = target?.rect;
-		if (stored === void 0) return null;
 		const win = doc.defaultView;
-		if (win === null) return stored;
-		if (!sameView(win, target?.url)) return null;
+		if (win === null) return stored ?? null;
+		if (!samePinView(win, target?.url)) return null;
 		const selector = target?.selector;
-		if (selector === void 0) return toViewport(win, stored);
+		if (selector === void 0) return stored ? toViewport(win, stored) : null;
+		if (!stored && (selector === "html" || selector === "body")) return null;
 		let el;
 		try {
 			el = doc.querySelector(selector);
 		} catch {
-			return toViewport(win, stored);
+			return stored ? toViewport(win, stored) : null;
 		}
 		if (el === null) return null;
 		const r = el.getBoundingClientRect();
-		if (r.width <= 0 && r.height <= 0) return toViewport(win, stored);
+		if (r.width <= 0 && r.height <= 0) return stored ? toViewport(win, stored) : null;
 		return clipToScrollAncestors(win, el, {
 			x: r.left,
 			y: r.top,
@@ -3063,6 +3168,7 @@ var Pinbox = (function(exports) {
 	* labels the card without claiming an element that was never captured.
 	*/
 	function labelOf(target) {
+		if (target?.selector === "html" || target?.selector === "body") return "PAGE";
 		if (target?.model) return `3D · ${target.model.partId}`;
 		return target?.anchor ?? target?.tag?.toUpperCase() ?? "PIN";
 	}
@@ -4072,16 +4178,15 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 		/** Inbox item click: activate the pin and scroll it into view (prototype line 700). */
 		#activateFromInbox(pinId) {
 			const pin = this.store.get().pins.find((p) => p.id === pinId);
+			if (!pin) return;
+			this.store.update({
+				inboxOpen: false,
+				activePinId: null,
+				pinsHidden: false
+			});
+			if (revealPin(document, pin, this.config?.endpoint ?? "")) return;
 			this.#ensureThread(pinId);
 			this.store.update({ activePinId: pinId });
-			const rect = pin === void 0 ? null : anchorRect(document, pin);
-			if (rect) {
-				const y = window.scrollY + rect.y + rect.height / 2;
-				window.scrollTo({
-					top: Math.max(0, y - window.innerHeight / 2),
-					behavior: "smooth"
-				});
-			}
 		}
 		/**
 		* Nudge a stale pin: re-post the last human message as a new thread message. A watcher that
@@ -4230,6 +4335,16 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 			});
 		};
 		#render(state) {
+			const restored = pendingPinReveal(document, state.pins, this.config?.endpoint ?? "");
+			if (restored) {
+				this.#ensureThread(restored);
+				this.store.update({
+					activePinId: restored,
+					inboxOpen: false,
+					pinsHidden: false
+				});
+				return;
+			}
 			const placing = state.mode === "placing";
 			this.toggleAttribute("data-placing", placing);
 			document.body.classList.toggle(PAGE_PLACING_CLASS, placing);

package/dist/vue.d.ts

@@ -1,4 +1,4 @@
-import { d as PinboxToolbarElement, n as PinboxConfig } from "./index-xNXeJ2mR.js";
+import { f as PinboxToolbarElement, n as PinboxConfig } from "./index-CMSOhoVs.js";
 import { VNode } from "vue";
 //#region src/vue.d.ts
 /** The slice of the Vue component instance this wrapper touches. */

package/dist/vue.js

@@ -1,4 +1,4 @@
-import { n as defineToolbarElement, r as PinboxToolbarElement } from "./src-DnAkx29T.js";
+import { i as PinboxToolbarElement, n as defineToolbarElement } from "./src-B134WXZ8.js";
 import { h } from "vue";
 //#region src/vue.ts
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autono/pinbox-toolbar",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -75,7 +75,7 @@
     }
   },
   "devDependencies": {
-    "@autono/pinbox-core": "0.20.0",
+    "@autono/pinbox-core": "0.21.0",
     "@types/react": "^19.2.0",
     "typescript": "^7.0.0",
     "tsdown": "^0.22.0",