@reticlehq/browser 3.5.0 → 3.7.0

package/dist/presenter/presenter.js

@@ -1,23 +1,29 @@
-import { ActionType, HumanControlKind, ReticleCommand, PresenterMode, SessionState, isPresenterTone, isSessionState, } from '@reticlehq/core';
+import { ActionType, HudCorner, HudVisibility, HumanControlKind, ReticleCommand, PresenterMode, SessionState, isPresenterTone, isSessionState, } from '@reticlehq/core';
 import { refs } from '../dom/addressing/refs.js';
-import { unreachableStripText } from '../transport/unreachable-message.js';
+import { UNREACHABLE_HEADLINE, unreachableMessage } from '../transport/unreachable-message.js';
 import { actionVerb } from './chrome/presenter-verbs.js';
 import { nativeSetTimeout, nativeClearTimeout, nativeNow } from '../timers/native/native-timers.js';
-import { LOG_KIND, CHIP_LABEL, DATA_RETICLE_LOG, clampLogMax, formatElapsed, humanDuration, appendLogRow, clearLogRows, trimLogRows, } from './chrome/presenter-log.js';
+import { LOG_KIND, CHIP_LABEL, LOG_ACTOR, DATA_RETICLE_LOG, clampLogMax, formatElapsed, humanDuration, appendLogRow, clearLogRows, trimLogRows, } from './chrome/presenter-log.js';
 import { PRESENTER_CSS } from './presenter-styles.js';
 import { HudShell } from './presenter-shell.js';
+import { HARNESS_LOG_ATTR, harnessGateIn } from './presenter-harness-row.js';
+import { platformDetails } from './presenter-account.js';
 import { parseImpactSnapshot } from './chrome/presenter-report-copy.js';
-import { BorderMode, DEFAULT_BORDER_MODE, DATA_BUSY, BUSY_OFF, effectivePaceMs, IDLE_AFTER_MS, HEARTBEAT_MS, IDLE_NOTICE_MS, IDLE_END_MS, IDLE_END_MIN_MS, ACT_STRIP, STATE_ATTR, UNREACHABLE_STATE, GLOW_FADE_MS, GLOW_ON, GLOW_OFF, DATA_ON, THROTTLED_ATTR, LIVENESS_ATTR, MARKERS_BTN_ATTR, CLEAR_MARKS_ATTR, COPY_MARKS_ATTR, MARKS_ROW_ATTR, MARK_COUNT_ATTR, } from './presenter-config.js';
+import { scheduleSyncDockLayout } from './presenter-dock-layout.js';
+import { applyHudPosition, clampHudPosition, hudLayoutBox, resetHudDockPosition, } from './presenter-hud-position.js';
+import { BorderMode, DEFAULT_BORDER_MODE, DOCK_ATTR, HIDDEN_UNTIL_RESTART_ATTR, DATA_BUSY, BUSY_OFF, effectivePaceMs, IDLE_AFTER_MS, HEARTBEAT_MS, IDLE_NOTICE_MS, IDLE_END_MS, IDLE_END_MIN_MS, ACT_STRIP, STATE_ATTR, UNREACHABLE_STATE, GLOW_FADE_MS, GLOW_ON, GLOW_OFF, DATA_ON, THROTTLED_ATTR, LIVENESS_ATTR, MARKERS_BTN_ATTR, CLEAR_MARKS_ATTR, COPY_MARKS_ATTR, MARKS_ROW_ATTR, MARK_COUNT_ATTR, } from './presenter-config.js';
 import { buildRunState } from './presenter-run-state.js';
 import { moveCursor, ringAround, spawnRipple, pace } from './chrome/presenter-effects.js';
 import { GlowController } from './presenter-glow.js';
 import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon } from './icons/presenter-icons.js';
 import { renderTally } from './chrome/presenter-tally.js';
-import { CONTROLS_BANNER_HTML, CONTROLS_FLOWS_HTML, CONTROLS_MARKS_HTML, CONTROLS_FOOT_HTML, ENDED_FADE_MS, ControlPanel, } from './presenter-controls.js';
-import { statusTheme, blockerHtml, getPresenterSettings, OutputDetail, syncPageBlocker, } from './presenter-settings.js';
+import { CONTROLS_BANNER_HTML, CONTROLS_MARKS_HTML, CONTROLS_FOOT_HTML, CONTROLS_STATUS_HTML, ENDED_FADE_MS, ControlPanel, } from './presenter-controls.js';
+import { statusTheme, blockerHtml, getPresenterSettings, OutputDetail, syncPageBlocker, paintSdkVersion, } from './presenter-settings.js';
 import { Annotator } from '../review/annotator.js';
 import { shouldAutoOpenChat } from './presenter-shell.js';
 import { installHudTelemetry } from './hud-telemetry.js';
+import { PlanBoard, parsePlanView } from './presenter-plan.js';
+import { claimLog, readRememberedLog, rememberLog, } from './chrome/log-memory.js';
 const COPIED_FLASH_MS = 1600;
 export { GlowPhase } from './presenter-config.js';
 export { LOG_KIND, LOG_RESULT } from './chrome/presenter-log.js';
@@ -42,6 +48,7 @@ export class Presenter {
     #borderMode;
     #glowCtl;
     #lastActionText = '';
+    #lastActor;
     #heartbeatTimer;
     #idleEndMs;
     #sessionId;
@@ -51,6 +58,11 @@ export class Presenter {
     #sessionActive = false;
     #logMax;
     #log;
+    #harnessLog;
+    #harnessRunId;
+    #harnessSteps;
+    #plan = new PlanBoard();
+    #remembered = [];
     #logBaseMs;
     #onControl;
     #onHudUse;
@@ -92,16 +104,26 @@ export class Presenter {
             onAnnotateToggle: () => this.#syncAnnotator(),
             onCollapse: () => this.#syncAnnotator(),
             onSyncNow: () => this.#onControl?.({ kind: HumanControlKind.SYNC }),
+            onSignIn: () => this.#onControl?.({ kind: HumanControlKind.SIGNIN }),
+            onHarness: (enabled) => this.#onControl?.({ kind: HumanControlKind.HARNESS, text: enabled ? 'on' : 'off' }),
+            onHarnessRun: (persona) => this.#onControl?.({
+                kind: HumanControlKind.HARNESS_RUN,
+                ...(persona === undefined ? {} : { text: persona }),
+            }),
+            onHarnessStop: () => this.#onControl?.({ kind: HumanControlKind.HARNESS_STOP }),
+            onHarnessLink: () => this.#onControl?.({ kind: HumanControlKind.HARNESS_LINK }),
             settings: {
                 onBeforeOpen: () => {
                     if (this.#shell.isCollapsed())
                         this.#shell.expand();
                 },
                 onHideUntilRestart: () => this.#applyHideUntilRestart(),
+                onKill: () => options.onKill?.(),
                 onSettingsChange: (s) => this.#onSettingsChange(s),
                 onHarness: (enabled) => this.#onControl?.({ kind: HumanControlKind.HARNESS, text: enabled ? 'on' : 'off' }),
             },
         });
+        this.#shell.setProjectId(options.projectId);
     }
     setControlHandler(handler) {
         this.#onControl = handler;
@@ -118,21 +140,41 @@ export class Presenter {
     refilterFlows() {
         this.#panel.refilterFlows();
     }
+    showSdkVersion(version) {
+        if (this.#root !== undefined)
+            paintSdkVersion(this.#root, version);
+    }
     handlePush(command) {
         const a = command.args;
         if (command.name === ReticleCommand.FLOWS)
             return void this.#panel.setFlows(a['flows']);
+        if (command.name === ReticleCommand.FLOW_PROGRESS)
+            return void this.#panel.setFlowProgress(a);
+        if (command.name === ReticleCommand.PLAN) {
+            const view = parsePlanView(a);
+            if (view !== undefined)
+                this.#plan.paint(view);
+            return;
+        }
         if (command.name === ReticleCommand.IMPACT) {
             const snapshot = parseImpactSnapshot(a['snapshot']);
             if (snapshot !== undefined) {
                 this.#shell.report.setSnapshot(snapshot);
-                this.#shell.paintOffer(snapshot.harnessOffer);
-                this.#shell.paintHarness(snapshot.harnessConfig);
+                this.#shell.paintNotices(snapshot.notices);
+                this.#shell.paintHarness(snapshot.harnessConfig, harnessGateIn(snapshot.instrumentation, snapshot.harnessConfig));
+                this.#shell.paintHarnessDrive(snapshot.harnessDrive);
+                this.#paintHarnessRun(snapshot.harnessDrive);
+                this.#shell.paintAgent(snapshot.agent);
+                this.#shell.paintImpact(snapshot.project.counts.verdicts);
+                const owner = true === snapshot.account?.signedIn ? snapshot.account.email : undefined;
+                if (claimLog(owner))
+                    this.#clearRunLog();
                 this.#shell.paintAccount(snapshot.account, snapshot.dashboardUrl, {
                     projectName: snapshot.projectName,
                     dashboardUrl: snapshot.dashboardUrl,
                     verdicts: snapshot.project.counts.verdicts,
                     defects: snapshot.project.counts.failed,
+                    ...platformDetails(snapshot.harnessConfig, snapshot.sync),
                 });
             }
             return;
@@ -159,13 +201,13 @@ export class Presenter {
         document.head.appendChild(style);
         const root = document.createElement('div');
         root.setAttribute('data-reticle-overlay', '');
-        const actStrip = `<div class="reticle-act-strip" data-liveness="idle"><span class="reticle-act-dot" aria-hidden="true"></span><span class="reticle-act">${ACT_STRIP.READY}</span><span class="reticle-chip" data-reticle-chip></span></div>`;
+        const actStrip = `<div class="reticle-act-strip" data-liveness="idle"><span class="reticle-act-dot" aria-hidden="true"></span><span class="reticle-act">${ACT_STRIP.READY}</span>${CONTROLS_BANNER_HTML}<span class="reticle-chip" data-reticle-chip></span><div class="reticle-act-actions">${CONTROLS_STATUS_HTML}</div></div>`;
         root.innerHTML = `
       ${blockerHtml()}
       <div data-reticle-glow></div>
       <div data-reticle-cursor></div>
       <div data-reticle-ring></div>
-      ${HudShell.dockHtml(actStrip, CONTROLS_BANNER_HTML, DATA_RETICLE_LOG, CONTROLS_MARKS_HTML + CONTROLS_FLOWS_HTML, CONTROLS_FOOT_HTML)}`;
+      ${HudShell.dockHtml(actStrip, '', DATA_RETICLE_LOG, CONTROLS_MARKS_HTML, CONTROLS_FOOT_HTML)}`;
         document.body.appendChild(root);
         this.#root = root;
         this.#glow = root.querySelector('[data-reticle-glow]') ?? undefined;
@@ -179,18 +221,40 @@ export class Presenter {
         this.#chatPillTime =
             root.querySelector('[data-reticle-chat-pill-time]') ?? undefined;
         this.#log = root.querySelector(`[${DATA_RETICLE_LOG}]`) ?? undefined;
+        this.#harnessLog = root.querySelector(`[${HARNESS_LOG_ATTR}]`) ?? undefined;
         this.#chip = root.querySelector('[data-reticle-chip]') ?? undefined;
         this.#tally = root.querySelector('[data-reticle-tally]') ?? undefined;
         this.#shell.mount(root);
         syncPageBlocker(root, getPresenterSettings(), false);
         this.#glowCtl.setElements(this.#glow, this.#cursor);
         this.#panel.mount(root, this.#glow);
+        this.#plan.mount(root);
         if (this.#onHudUse !== undefined) {
             this.#hudTelemetryTeardown = installHudTelemetry(document, root, this.#onHudUse);
         }
         this.setMode(this.#mode);
+        this.#restoreLog();
         this.#renderTally();
     }
+    #restoreLog() {
+        if (this.#log === undefined || 0 < this.#remembered.length)
+            return;
+        for (const row of readRememberedLog().slice(-this.#logMax)) {
+            for (const log of this.#logsFor(row.actor, true === row.summary)) {
+                const handle = appendLogRow(log, row.kind, row.text, row.ts, this.#logMax, row.actor);
+                if (row.result !== undefined)
+                    handle.result(row.result);
+            }
+            this.#logBaseMs = this.#now() - row.at;
+            this.#runLog.push({
+                at: row.at,
+                kind: row.kind,
+                text: row.text,
+                ...(row.result === undefined ? {} : { result: row.result }),
+            });
+            this.#remembered.push(row);
+        }
+    }
     bindAnnotator(annotator) {
         this.#annotator = annotator;
         const root = this.#root;
@@ -207,9 +271,10 @@ export class Presenter {
         let marks = annotator.markCount;
         chrome.onCount = (n) => {
             if (0 === marks && n > 0)
-                this.#shell.openChat();
+                this.#shell.openView('annotations');
             marks = n;
         };
+        chrome.onMarksChange = (items) => this.#shell.paintAnnotations(items);
         if (copy instanceof HTMLElement) {
             copy.addEventListener('click', (e) => {
                 e.stopPropagation();
@@ -253,6 +318,9 @@ export class Presenter {
         this.#sessionActive = false;
         this.#logBaseMs = undefined;
         this.#log = undefined;
+        this.#harnessLog = undefined;
+        this.#remembered = [];
+        rememberLog([]);
         this.#root?.remove();
         document.querySelectorAll('style[data-reticle-overlay]').forEach((s) => s.remove());
         this.#root = undefined;
@@ -283,8 +351,9 @@ export class Presenter {
         const dock = this.#root?.querySelector('[data-reticle-dock]');
         dock?.setAttribute(DATA_ON, GLOW_ON);
         this.#hud?.setAttribute(DATA_ON, GLOW_ON);
-        this.#lastActionText = unreachableStripText(url, attempts);
+        this.#lastActionText = UNREACHABLE_HEADLINE;
         this.#paintActStrip(this.#lastActionText, true);
+        this.#actLine?.setAttribute('title', unreachableMessage(url, attempts));
         if (shouldAutoOpenChat(getPresenterSettings().autoOpenChat))
             this.#shell.openChat();
     }
@@ -362,9 +431,25 @@ export class Presenter {
         this.#lastActionText = text;
         this.#paintActStrip(text, false);
     }
-    #paintActStrip(text, idle) {
-        if (this.#actLine !== undefined)
+    #paintHarnessRun(drive) {
+        if (drive !== undefined && drive.runId !== this.#harnessRunId) {
+            this.#harnessRunId = drive.runId;
+            if (this.#harnessLog !== undefined)
+                clearLogRows(this.#harnessLog);
+        }
+        const was = this.#harnessSteps;
+        this.#harnessSteps = drive?.steps;
+        if (drive !== undefined)
+            this.#paintActStrip(this.#lastActionText, false);
+        else if (was !== undefined)
+            this.#paintActStrip(ACT_STRIP.READY, true);
+    }
+    #paintActStrip(raw, idle) {
+        const text = this.#harnessSteps === undefined ? raw : ACT_STRIP.harnessTesting(this.#harnessSteps);
+        if (this.#actLine !== undefined) {
             this.#actLine.textContent = text;
+            this.#actLine.removeAttribute('title');
+        }
         const liveness = idle ? 'idle' : 'active';
         if (this.#actStrip !== undefined)
             this.#actStrip.setAttribute('data-liveness', liveness);
@@ -400,6 +485,12 @@ export class Presenter {
             return;
         if ('' === this.#lastActionText)
             return;
+        if (this.#harnessSteps !== undefined)
+            return;
+        if (LOG_ACTOR.HARNESS === this.#lastActor) {
+            this.#paintActStrip(ACT_STRIP.READY, true);
+            return;
+        }
         const since = ACT_STRIP.SINCE_LAST;
         this.#paintActStrip(`${ACT_STRIP.PLANNING_PREFIX}${humanDuration(idleMs)}${since}`, true);
         if (this.#chatPillTime !== undefined)
@@ -414,6 +505,37 @@ export class Presenter {
             this.#heartbeatTimer = undefined;
         }
     }
+    placeHud(visibility, corner) {
+        const root = this.#root;
+        if (root === undefined)
+            return [];
+        const applied = [];
+        if (HudVisibility.REMOVED === visibility) {
+            this.destroy();
+            return [visibility];
+        }
+        if (HudVisibility.HIDDEN === visibility)
+            root.setAttribute(HIDDEN_UNTIL_RESTART_ATTR, '1');
+        if (HudVisibility.SHOWN === visibility)
+            root.removeAttribute(HIDDEN_UNTIL_RESTART_ATTR);
+        if (visibility !== undefined)
+            applied.push(visibility);
+        const dock = root.querySelector(`[${DOCK_ATTR}]`);
+        if (corner !== undefined && dock instanceof HTMLElement) {
+            if (HudCorner.BOTTOM_RIGHT === corner)
+                resetHudDockPosition(dock);
+            else {
+                const box = hudLayoutBox(dock);
+                const left = corner.endsWith('left') ? 0 : window.innerWidth;
+                const top = corner.startsWith('top') ? 0 : window.innerHeight;
+                const at = clampHudPosition(left, top, box.width, box.height, window.innerWidth, window.innerHeight);
+                applyHudPosition(dock, at.left, at.top);
+            }
+            applied.push(corner);
+            scheduleSyncDockLayout(dock, root);
+        }
+        return applied;
+    }
     setIdleEndMs(ms) {
         if (!Number.isFinite(ms))
             return;
@@ -446,9 +568,13 @@ export class Presenter {
     }
     #clearRunLog() {
         this.#runLog = [];
+        this.#remembered = [];
+        rememberLog([]);
         this.#tallied = { passes: 0, fails: 0 };
         if (this.#log !== undefined)
             clearLogRows(this.#log);
+        if (this.#harnessLog !== undefined)
+            clearLogRows(this.#harnessLog);
         this.#renderTally();
     }
     #applyHideUntilRestart() {
@@ -463,14 +589,19 @@ export class Presenter {
         else {
             this.#renderTally();
         }
-        if (this.#root !== undefined) {
-            const live = SessionState.ACTIVE === this.#panel.state && !this.#shell.isCollapsed();
-            syncPageBlocker(this.#root, settings, live);
-        }
+        this.#syncAnnotator();
+    }
+    #logsFor(actor, summary) {
+        const agent = this.#log;
+        const harness = this.#harnessLog;
+        if (LOG_ACTOR.HARNESS !== actor || harness === undefined)
+            return agent === undefined ? [] : [agent];
+        return summary && agent !== undefined ? [agent, harness] : [harness];
     }
-    log(kind, text, result) {
+    log(kind, text, result, actor, summary = false) {
         const ms = this.#now();
         this.#glowCtl.markActivity(ms);
+        this.#lastActor = actor;
         if (this.#log === undefined)
             return undefined;
         const trimmed = text.trim();
@@ -484,9 +615,23 @@ export class Presenter {
         while (this.#runLog.length > this.#logMax)
             this.#runLog.shift();
         const ts = formatElapsed(ms - this.#logBaseMs);
-        const handle = appendLogRow(this.#log, kind, trimmed, ts, this.#logMax);
+        const handles = this.#logsFor(actor, summary).map((log) => appendLogRow(log, kind, trimmed, ts, this.#logMax, actor));
+        const handle = { result: (r) => handles.forEach((h) => h.result(r)) };
         if (result !== undefined)
             handle.result(result);
+        const kept = {
+            kind,
+            text: trimmed,
+            ts,
+            at: ms - this.#logBaseMs,
+            ...(actor === undefined ? {} : { actor }),
+            ...(summary ? { summary: true } : {}),
+            ...(result === undefined ? {} : { result }),
+        };
+        this.#remembered.push(kept);
+        while (this.#remembered.length > this.#logMax)
+            this.#remembered.shift();
+        rememberLog(this.#remembered);
         if (this.#shell.isCollapsed())
             this.#shell.pulseFab(true);
         this.#renderTally();
@@ -494,6 +639,8 @@ export class Presenter {
             result: (r) => {
                 handle.result(r);
                 entry.result = r;
+                kept.result = r;
+                rememberLog(this.#remembered);
                 this.#renderTally();
             },
         };
@@ -505,14 +652,16 @@ export class Presenter {
         }
         this.#tallied = renderTally(this.#tally, this.#runLog, this.#tallied);
     }
-    narrate(text, level = 'info') {
+    narrate(text, level = 'info', actor = LOG_ACTOR.AGENT, summary = false) {
         const line = 'info' === level ? text : `[${level}] ${text}`;
-        return this.log(LOG_KIND.NARRATION, line);
+        return this.log(LOG_KIND.NARRATION, line, undefined, actor, summary);
     }
     #pruneLog() {
         if (this.#log === undefined)
             return;
         trimLogRows(this.#log, this.#logMax);
+        if (this.#harnessLog !== undefined)
+            trimLogRows(this.#harnessLog, this.#logMax);
     }
     setThrottled(throttled) {
         this.#root?.setAttribute(THROTTLED_ATTR, throttled ? '1' : '0');

package/dist/presenter/tour/tour.d.ts

@@ -1,5 +1,8 @@
 import { isLastSlide } from './tour-view.js';
-export declare const TOUR_SEEN_KEY_PREFIX = "reticle.tour.seen.";
+import { TourAnchor } from '@reticlehq/core/tour';
+import { TOUR_SEEN_KEY_PREFIX } from '../../storage-keys.js';
+export { TOUR_SEEN_KEY_PREFIX };
+export declare const HUD_CONTROL_SELECTORS: Readonly<Partial<Record<TourAnchor, string>>>;
 export declare const tourSeenKey: (projectId: string) => string;
 export interface TourStorage {
     getItem: (key: string) => string | null;

package/dist/presenter/tour/tour.js

@@ -2,7 +2,8 @@ import { COPIED_LABEL, COPY_FLASH_MS, COPY_LABEL, COPY_MANUAL_LABEL, TOUR_ATTR,
 import { TourAnchor } from '@reticlehq/core/tour';
 import { RETICLE_URL_PARAM } from '@reticlehq/core';
 import { appModalOpen } from '../../dom/dom-ignore.js';
-export const TOUR_SEEN_KEY_PREFIX = 'reticle.tour.seen.';
+import { TOUR_SEEN_KEY_PREFIX } from '../../storage-keys.js';
+export { TOUR_SEEN_KEY_PREFIX };
 const APP_SELECTORS = ['main', '#root', '#app'];
 const HUD_PARTS = ['[data-reticle-hud]', '[data-reticle-chat-panel]'];
 function unionOfVisible(doc, selectors) {
@@ -23,10 +24,11 @@ function unionOfVisible(doc, selectors) {
         return undefined;
     return { left, top, width: right - left, height: bottom - top };
 }
-const HUD_CONTROL_SELECTORS = {
+export const HUD_CONTROL_SELECTORS = {
     [TourAnchor.HUD_CHAT]: '[data-reticle-chat-toggle]',
-    [TourAnchor.HUD_ANNOTATE]: '[data-reticle-annotate-btn]',
-    [TourAnchor.HUD_IMPACT]: '[data-reticle-report-btn]',
+    [TourAnchor.HUD_FLOWS]: '[data-reticle-chat-view-btn="flows"]',
+    [TourAnchor.HUD_ANNOTATE]: '[data-reticle-chat-view-btn="annotations"]',
+    [TourAnchor.HUD_IMPACT]: '[data-reticle-chat-impact]',
     [TourAnchor.HUD_SETTINGS]: '[data-reticle-settings-btn]',
 };
 function anchorBox(doc, anchor) {

package/dist/recorder/recorder.js

@@ -1,3 +1,4 @@
+import { readTestId } from '../dom/addressing/testid-attr.js';
 import { ActionType, AnchorKind, AnnotationKind, DEGRADED_ANCHOR_ROLE, EventType, FLOW_FILE_VERSION, FlowStepTool, RecorderPhase, PredicateKind, } from '@reticlehq/core';
 import { REDACTED_VALUE } from '@reticlehq/core';
 import { sourceFromDom } from '../dom/addressing/source.js';
@@ -9,7 +10,6 @@ export const RECORDER_EMPTY_MSG = 'recorded 0 steps';
 const STATUS_RECORDING = 'recording…';
 const STATUS_IDLE = 'ready';
 const STATUS_ANNOTATE = 'pick an annotation';
-const TESTID_ATTR = 'data-testid';
 const TOOL = FlowStepTool.ACT;
 const BUTTON_LABEL = {
     record: 'Record',
@@ -31,7 +31,7 @@ const NEEDS_SIGNAL = new Set([
 ]);
 const DEFAULT_NAME = 'recorded-flow';
 export function anchorFor(el) {
-    const testid = el.getAttribute(TESTID_ATTR);
+    const testid = readTestId(el);
     if (testid !== null && testid.length > 0) {
         return { anchor: { kind: AnchorKind.TESTID, value: testid }, degraded: false };
     }

package/dist/registry/auto-testids.js

@@ -1,5 +1,4 @@
-const TESTID_ATTR = 'data-testid';
-const TESTID_SELECTOR = `[${TESTID_ATTR}]`;
+import { getTestIdAttr, testIdSelector } from '../dom/addressing/testid-attr.js';
 export const MAX_AUTO_TESTIDS = 200;
 const RETICLE_OWN_PREFIX = 'reticle-';
 export function domTestids(doc) {
@@ -7,13 +6,13 @@ export function domTestids(doc) {
     const seen = new Set();
     let nodes;
     try {
-        nodes = doc.querySelectorAll(TESTID_SELECTOR);
+        nodes = doc.querySelectorAll(testIdSelector());
     }
     catch {
         return out;
     }
     for (let i = 0; i < nodes.length && out.length < MAX_AUTO_TESTIDS; i += 1) {
-        const value = nodes[i]?.getAttribute(TESTID_ATTR);
+        const value = nodes[i]?.getAttribute(getTestIdAttr());
         if (null === value || undefined === value)
             continue;
         const trimmed = value.trim();

package/dist/registry/declared-platform.js

@@ -25,9 +25,13 @@ export const SERVED_COMMANDS = [
     ReticleCommand.PRESENTER,
     ReticleCommand.IMPACT,
     ReticleCommand.CAPTURE,
+    ReticleCommand.RENDER,
     ReticleCommand.NAVIGATE,
     ReticleCommand.REFRESH,
     ReticleCommand.FLOWS,
+    ReticleCommand.FLOW_PROGRESS,
+    ReticleCommand.PLAN,
+    ReticleCommand.MARKERS,
 ];
 export function declaredCommands() {
     return [...SERVED_COMMANDS];