@reticlehq/browser 3.1.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();
@@ -255,12 +260,15 @@ export class Reticle {
                 panel.handlePush(buffered);
             this.#pendingPushes.clear();
             void import('./presenter/tour/tour.js').then((tour) => {
-                tour.mountTour({
+                if (!this.#connected)
+                    return;
+                const shown = tour.mountTour({
                     document,
                     storage: tour.safeLocalStorage(),
                     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();
@@ -272,6 +280,8 @@ export class Reticle {
                         selection.addRange(range);
                     },
                 });
+                if (shown !== undefined)
+                    this.#teardowns.push(shown.destroy);
             });
             if (this.#bridgeConnected)
                 panel.sessionStart();

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.1.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.1.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",