@reticlehq/browser 3.2.0 → 3.3.0

package/dist/reticle.js

@@ -10,6 +10,7 @@ import { declaredChannels } from './registry/declared-channels.js';
 import { declaredCommands, declaredPlatform } from './registry/declared-platform.js';
 import { registerCapabilities, setCapabilitiesListener, hasCapabilities, } from './registry/capabilities.js';
 import { installAllObservers, runTeardowns } from './observers/install-all.js';
+import { setNetworkBodyMaxChars } from './observers/net-detail/network-body.js';
 import { installOverlay } from './presenter/chrome/overlay.js';
 import { LOG_KIND, LOG_RESULT } from './presenter/chrome/log-kinds.js';
 import { actionVerb } from './presenter/chrome/presenter-verbs.js';
@@ -187,6 +188,9 @@ export class Reticle {
         });
         setCapabilitiesListener(() => this.#transport?.reannounce());
         setPresenterVisible(true === options.exposePresenter);
+        if (options.networkBodyMaxChars !== undefined) {
+            setNetworkBodyMaxChars(options.networkBodyMaxChars);
+        }
         const emit = this.#emit;
         this.#captureBodies = true === options.captureNetworkBodies;
         this.#sourceMapping =
@@ -248,6 +252,7 @@ export class Reticle {
             panelOptions.onControl = (intent) => this.#emit(EventType.HUMAN_CONTROL, intent.text !== undefined
                 ? { kind: intent.kind, text: intent.text }
                 : { kind: intent.kind });
+            panelOptions.onHudUse = (use) => this.#emit(EventType.HUD_USED, { ...use });
             const panel = new Presenter(panelOptions);
             this.#presenter = panel;
             panel.mount();
@@ -263,6 +268,7 @@ export class Reticle {
                     projectId: reticleParamsFromSearch(window.location.search).projectId ?? window.location.origin,
                     isDriving: () => PresenterMode.IDLE !== panel.mode,
                     search: window.location.search,
+                    navigator,
                     copy: (text) => navigator.clipboard?.writeText(text).then(() => true, () => false) ?? false,
                     select: (element) => {
                         const selection = window.getSelection();

package/dist/review/annotator.d.ts

@@ -16,7 +16,9 @@ export interface AnnotatorDeps {
 export interface AnnotatorChrome {
     markersBtn?: HTMLElement;
     clearBtn?: HTMLElement;
+    copyRow?: HTMLElement;
     countEl?: HTMLElement;
+    onCount?: (count: number) => void;
 }
 export declare class Annotator {
     #private;
@@ -29,6 +31,7 @@ export declare class Annotator {
     attachChrome(chrome: AnnotatorChrome): void;
     destroy(): void;
     toggle(on?: boolean): void;
+    agentPrompt(pageUrl: string): string;
     clearAll(): void;
     syncAnchors(): void;
 }

package/dist/review/annotator.js

@@ -2,6 +2,7 @@ import { isSyntheticInput } from '../actions/synthetic/synthetic-input.js';
 import { EventType } from '@reticlehq/core';
 import { isReticleUi, isReticleOverlay } from '../dom/dom-ignore.js';
 import { resolveMarkAnchor } from './mark-anchor.js';
+import { marksCountText, marksForAgent } from './marks-for-agent.js';
 import { nativeSetTimeout, nativeClearTimeout } from '../timers/native/native-timers.js';
 import { ANNOTATOR_CSS, ANNOTATOR_ROOT_HTML, MARK_CANCEL, MARK_PENDING_GLYPH, MARK_PLACEHOLDER, MARK_SUBMIT, } from './annotator-styles.js';
 const HIGHLIGHT_REST_MS = 130;
@@ -33,13 +34,11 @@ export class Annotator {
     #pendingTarget;
     #markersBtn;
     #clearBtn;
+    #copyRow;
+    #onChromeCount;
     #countEl;
     #accent;
-    #onClick;
-    #onKeydown;
-    #onMove;
-    #onScroll;
-    #onResize;
+    #ac;
     #mo;
     constructor(deps) {
         this.#emit = deps.emit;
@@ -69,16 +68,23 @@ export class Annotator {
         this.#hi = root.querySelector(sel('hi')) ?? undefined;
         this.#hiLabel = root.querySelector(sel('hilabel')) ?? undefined;
         this.#selBox = root.querySelector(sel('sel')) ?? undefined;
-        this.#onClick = (ev) => this.#handleClick(ev);
-        document.addEventListener('click', this.#onClick, { capture: true });
-        this.#onMove = (ev) => this.#scheduleMove(ev);
-        document.addEventListener('mousemove', this.#onMove, { passive: true, capture: true });
-        this.#onKeydown = (ev) => this.#handleKey(ev);
-        document.addEventListener('keydown', this.#onKeydown);
-        this.#onScroll = () => this.#reposition();
-        this.#onResize = () => this.#reposition();
-        window.addEventListener('scroll', this.#onScroll, true);
-        window.addEventListener('resize', this.#onResize);
+        const ac = new AbortController();
+        this.#ac = ac;
+        document.addEventListener('click', (ev) => this.#handleClick(ev), {
+            capture: true,
+            signal: ac.signal,
+        });
+        document.addEventListener('mousemove', (ev) => this.#scheduleMove(ev), {
+            passive: true,
+            capture: true,
+            signal: ac.signal,
+        });
+        document.addEventListener('keydown', (ev) => this.#handleKey(ev), { signal: ac.signal });
+        window.addEventListener('scroll', () => this.#reposition(), {
+            capture: true,
+            signal: ac.signal,
+        });
+        window.addEventListener('resize', () => this.#reposition(), { signal: ac.signal });
         this.#mo = new MutationObserver(() => this.syncAnchors());
         this.#mo.observe(document.documentElement, { childList: true, subtree: true });
         if (undefined !== this.#accent)
@@ -94,6 +100,8 @@ export class Annotator {
     attachChrome(chrome) {
         this.#markersBtn = chrome.markersBtn;
         this.#clearBtn = chrome.clearBtn;
+        this.#copyRow = chrome.copyRow;
+        this.#onChromeCount = chrome.onCount;
         this.#countEl = chrome.countEl;
         this.#markersBtn?.addEventListener('click', (e) => {
             e.stopPropagation();
@@ -106,26 +114,8 @@ export class Annotator {
         this.#syncChrome();
     }
     destroy() {
-        if (this.#onClick !== undefined) {
-            document.removeEventListener('click', this.#onClick, { capture: true });
-            this.#onClick = undefined;
-        }
-        if (this.#onKeydown !== undefined) {
-            document.removeEventListener('keydown', this.#onKeydown);
-            this.#onKeydown = undefined;
-        }
-        if (this.#onMove !== undefined) {
-            document.removeEventListener('mousemove', this.#onMove, { capture: true });
-            this.#onMove = undefined;
-        }
-        if (this.#onScroll !== undefined) {
-            window.removeEventListener('scroll', this.#onScroll, true);
-            this.#onScroll = undefined;
-        }
-        if (this.#onResize !== undefined) {
-            window.removeEventListener('resize', this.#onResize);
-            this.#onResize = undefined;
-        }
+        this.#ac?.abort();
+        this.#ac = undefined;
         this.#mo?.disconnect();
         this.#mo = undefined;
         if (this.#hiTimer !== undefined)
@@ -151,6 +141,9 @@ export class Annotator {
         }
         this.#syncChrome();
     }
+    agentPrompt(pageUrl) {
+        return marksForAgent(this.#marks, pageUrl);
+    }
     clearAll() {
         this.#closePopover();
         for (const mark of this.#marks)
@@ -193,6 +186,13 @@ export class Annotator {
             this.#countEl.hidden = 0 === n;
         }
         this.#clearBtn?.toggleAttribute('disabled', 0 === n);
+        this.#onChromeCount?.(n);
+        if (this.#copyRow !== undefined) {
+            this.#copyRow.hidden = 0 === n;
+            const text = this.#copyRow.querySelector('[data-reticle-marks-text]');
+            if (text !== null)
+                text.textContent = marksCountText(n);
+        }
         this.#markersBtn?.toggleAttribute('disabled', 0 === n);
     }
     #handleKey(ev) {
@@ -344,8 +344,8 @@ export class Annotator {
         pop.innerHTML = `<div class="reticle-mark-where"></div>
       <textarea rows="2" placeholder="${MARK_PLACEHOLDER}"></textarea>
       <div class="reticle-mark-row">
-        <button type="button" data-cancel>${MARK_CANCEL}</button>
-        <button type="button" data-send disabled>${MARK_SUBMIT}</button>
+        <button type="button" data-cancel data-reticle-mark-cancel>${MARK_CANCEL}</button>
+        <button type="button" data-send data-reticle-mark-send disabled>${MARK_SUBMIT}</button>
       </div>`;
         const whereEl = pop.querySelector('.reticle-mark-where');
         if (whereEl !== null)

package/dist/review/marks-for-agent.d.ts

@@ -0,0 +1,9 @@
+export interface MarkForAgent {
+    note: string;
+    label: string;
+    anchor: string;
+    route: string;
+    source?: string | undefined;
+}
+export declare function marksCountText(n: number): string;
+export declare function marksForAgent(marks: readonly MarkForAgent[], pageUrl: string): string;

package/dist/review/marks-for-agent.js

@@ -0,0 +1,12 @@
+export function marksCountText(n) {
+    return `${String(n)} ${1 === n ? 'note' : 'notes'} on this page`;
+}
+export function marksForAgent(marks, pageUrl) {
+    const n = marks.length;
+    const head = `I marked ${String(n)} ${1 === n ? 'issue' : 'issues'} on ${pageUrl} with Reticle. Fix each one, then verify it in the running app:`;
+    const rows = marks.map((m, i) => {
+        const where = m.source === undefined ? m.anchor : `${m.anchor}, ${m.source}`;
+        return `${String(i + 1)}. ${m.note}\n   ${m.label} (${where}) on ${m.route}`;
+    });
+    return [head, '', ...rows].join('\n');
+}

package/dist/util/captured-method.d.ts

@@ -1,2 +1 @@
-export declare function capturedMethod<T>(target: object, key: PropertyKey): T | undefined;
 export declare function requireCapturedMethod<T>(target: object, key: PropertyKey): T;

package/dist/util/captured-method.js

@@ -1,4 +1,4 @@
-export function capturedMethod(target, key) {
+function capturedMethod(target, key) {
     return Object.getOwnPropertyDescriptor(target, key)?.value;
 }
 export function requireCapturedMethod(target, key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reticlehq/browser",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Reticle browser SDK — installs observers, builds semantic snapshots, executes actions, talks to the bridge.",
   "type": "module",
   "main": "./dist/index.js",
@@ -10,10 +10,14 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./inject": {
+      "types": "./dist/reticle-inject.d.ts",
+      "default": "./dist/reticle-inject.js"
+    }
   },
   "dependencies": {
-    "@reticlehq/core": "3.2.0"
+    "@reticlehq/core": "3.3.0"
   },
   "devDependencies": {
     "@iconify-json/heroicons-outline": "^1.2.1",
@@ -60,7 +64,7 @@
     "node": ">=20.0.0"
   },
   "scripts": {
-    "build": "node scripts/embed-heroicons.mjs && tsc -b && node ../../../scripts/alias-dist.mjs",
+    "build": "node scripts/embed-heroicons.mjs && tsc -b && node ../../../scripts/alias-dist.mjs && node scripts/bundle-inject.mjs",
     "typecheck": "tsc -b",
     "lint": "eslint src",
     "test:unit": "vitest run src --passWithNoTests",

package/dist/presenter/presenter-offer.d.ts

@@ -1,25 +0,0 @@
-export declare const OFFER_ATTR = "data-reticle-offer";
-export declare const OFFER_SLOT_ATTR = "data-reticle-offer-slot";
-export declare const OFFER_CLAIM_ATTR = "data-reticle-offer-claim";
-export declare const OFFER_DISMISS_ATTR = "data-reticle-offer-dismiss";
-export declare const OFFER_DISMISSED_KEY = "reticle.harnessOffer.dismissed";
-export declare const OFFER_TEXT: {
-    readonly HEADLINE: "Reticle drives your app for you";
-    readonly BODY: "The harness explores your app, proves what works, and saves every journey as a test that replays for free. Built on Jev — no model API key needed.";
-    readonly FREE: "Free for 3 months";
-    readonly CLAIM: "Claim now";
-    readonly DISMISS: "Not now";
-    readonly claimed: (days: number) => string;
-    readonly ending: (days: number) => string;
-};
-export declare function offerDismissed(storage: Pick<Storage, 'getItem'> | undefined): boolean;
-export declare function dismissOffer(storage: Pick<Storage, 'setItem'> | undefined): void;
-export interface OfferState {
-    claimed: boolean;
-    daysRemaining?: number | undefined;
-    claimUrl?: string | undefined;
-    eligible?: boolean | undefined;
-}
-export declare function offerHtml(offer: OfferState | undefined, dismissed: boolean): string;
-export declare function paintOffer(root: ParentNode, offer: OfferState | undefined, storage: Pick<Storage, 'getItem' | 'setItem'> | undefined): void;
-export declare const OFFER_CSS = "\n.reticle-offer{margin:8px 10px;padding:10px 12px;border:1px solid var(--reticle-line,#2a2f3a);border-radius:10px;background:var(--reticle-surface-inset,rgba(255,255,255,.03));}\n.reticle-offer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}\n.reticle-offer-title{font-weight:600;font-size:12px;}\n.reticle-offer-free{font-size:10px;padding:2px 6px;border-radius:999px;background:var(--reticle-accent,#4f7cff);color:#fff;white-space:nowrap;}\n.reticle-offer-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}\n.reticle-offer-actions{display:flex;align-items:center;gap:8px;}\n.reticle-offer-claim{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}\n.reticle-offer-dismiss{font-size:11px;padding:4px 8px;border-radius:6px;background:none;border:0;color:inherit;opacity:.6;cursor:pointer;}\n.reticle-offer-dismiss:hover{opacity:1;}\n.reticle-offer-claimed{margin:6px 10px;font-size:10px;opacity:.6;}\n";

package/dist/presenter/presenter-offer.js

@@ -1,87 +0,0 @@
-export const OFFER_ATTR = 'data-reticle-offer';
-export const OFFER_SLOT_ATTR = 'data-reticle-offer-slot';
-export const OFFER_CLAIM_ATTR = 'data-reticle-offer-claim';
-export const OFFER_DISMISS_ATTR = 'data-reticle-offer-dismiss';
-export const OFFER_DISMISSED_KEY = 'reticle.harnessOffer.dismissed';
-export const OFFER_TEXT = {
-    HEADLINE: 'Reticle drives your app for you',
-    BODY: 'The harness explores your app, proves what works, and saves every journey as a test that replays for free. Built on Jev — no model API key needed.',
-    FREE: 'Free for 3 months',
-    CLAIM: 'Claim now',
-    DISMISS: 'Not now',
-    claimed: (days) => `Harness active — ${String(days)} days left`,
-    ending: (days) => 1 >= days
-        ? 'Harness free period ends today'
-        : `Harness free period ends in ${String(days)} days`,
-};
-const ENDING_SOON_DAYS = 14;
-export function offerDismissed(storage) {
-    try {
-        return '1' === storage?.getItem(OFFER_DISMISSED_KEY);
-    }
-    catch {
-        return false;
-    }
-}
-export function dismissOffer(storage) {
-    try {
-        storage?.setItem(OFFER_DISMISSED_KEY, '1');
-    }
-    catch {
-    }
-}
-const escape = (text) => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-export function offerHtml(offer, dismissed) {
-    if (offer === undefined)
-        return '';
-    if (offer.claimed) {
-        const days = offer.daysRemaining;
-        if (days === undefined || 0 > days)
-            return '';
-        const text = ENDING_SOON_DAYS >= days ? OFFER_TEXT.ending(days) : OFFER_TEXT.claimed(days);
-        return `<div ${OFFER_ATTR} class="reticle-offer reticle-offer-claimed">${escape(text)}</div>`;
-    }
-    if (false === offer.eligible)
-        return '';
-    if (dismissed)
-        return '';
-    const url = offer.claimUrl;
-    if (url === undefined || 0 === url.length)
-        return '';
-    return `<div ${OFFER_ATTR} class="reticle-offer" role="note">
-      <div class="reticle-offer-head">
-        <span class="reticle-offer-title">${escape(OFFER_TEXT.HEADLINE)}</span>
-        <span class="reticle-offer-free">${escape(OFFER_TEXT.FREE)}</span>
-      </div>
-      <p class="reticle-offer-body">${escape(OFFER_TEXT.BODY)}</p>
-      <div class="reticle-offer-actions">
-        <a ${OFFER_CLAIM_ATTR} class="reticle-offer-claim" href="${escape(url)}" target="_blank" rel="noopener noreferrer">${escape(OFFER_TEXT.CLAIM)}</a>
-        <button type="button" ${OFFER_DISMISS_ATTR} class="reticle-offer-dismiss">${escape(OFFER_TEXT.DISMISS)}</button>
-      </div>
-    </div>`;
-}
-export function paintOffer(root, offer, storage) {
-    const slot = root.querySelector(`[${OFFER_SLOT_ATTR}]`);
-    if (!(slot instanceof HTMLElement))
-        return;
-    slot.innerHTML = offerHtml(offer, offerDismissed(storage));
-    const dismiss = slot.querySelector(`[${OFFER_DISMISS_ATTR}]`);
-    dismiss?.addEventListener('click', (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        dismissOffer(storage);
-        slot.innerHTML = '';
-    });
-}
-export const OFFER_CSS = `
-.reticle-offer{margin:8px 10px;padding:10px 12px;border:1px solid var(--reticle-line,#2a2f3a);border-radius:10px;background:var(--reticle-surface-inset,rgba(255,255,255,.03));}
-.reticle-offer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
-.reticle-offer-title{font-weight:600;font-size:12px;}
-.reticle-offer-free{font-size:10px;padding:2px 6px;border-radius:999px;background:var(--reticle-accent,#4f7cff);color:#fff;white-space:nowrap;}
-.reticle-offer-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}
-.reticle-offer-actions{display:flex;align-items:center;gap:8px;}
-.reticle-offer-claim{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}
-.reticle-offer-dismiss{font-size:11px;padding:4px 8px;border-radius:6px;background:none;border:0;color:inherit;opacity:.6;cursor:pointer;}
-.reticle-offer-dismiss:hover{opacity:1;}
-.reticle-offer-claimed{margin:6px 10px;font-size:10px;opacity:.6;}
-`;