@reticlehq/browser 3.2.0 → 3.3.0

package/dist/presenter/carousel/carousel.js

@@ -0,0 +1,126 @@
+export const CAROUSEL_ATTR = 'data-reticle-carousel';
+export const CAROUSEL_SLIDE_ATTR = 'data-reticle-carousel-slide';
+export const CAROUSEL_DOT_ATTR = 'data-reticle-carousel-dot';
+export const CAROUSEL_CLOSE_ATTR = 'data-reticle-carousel-close';
+export const CAROUSEL_DISMISSED_KEY = 'reticle.carousel.dismissed';
+const CLOSE_LABEL = 'Close';
+export const ROTATE_MS = 6000;
+const rotations = new WeakMap();
+function stopRotation(log) {
+    const timer = rotations.get(log);
+    if (timer !== undefined)
+        clearInterval(timer);
+    rotations.delete(log);
+}
+function prefersReducedMotion() {
+    try {
+        return true === globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    }
+    catch {
+        return false;
+    }
+}
+function show(root, index) {
+    root.setAttribute('data-active', String(index));
+    root.querySelectorAll(`[${CAROUSEL_SLIDE_ATTR}]`).forEach((slide, i) => {
+        slide.hidden = i !== index;
+    });
+    root.querySelectorAll(`[${CAROUSEL_DOT_ATTR}]`).forEach((dot, i) => {
+        dot.setAttribute('aria-current', String(i === index));
+    });
+}
+const clampIndex = (index, count) => Number.isInteger(index) && index >= 0 && index < count ? index : 0;
+export function carouselHtml(slides, active) {
+    if (0 === slides.length)
+        return '';
+    const current = clampIndex(active, slides.length);
+    const track = slides
+        .map((slide, i) => `<div ${CAROUSEL_SLIDE_ATTR}="${slide.id}" class="reticle-carousel-slide"${i === current ? '' : ' hidden'}>${slide.html}</div>`)
+        .join('');
+    const dots = 1 === slides.length
+        ? ''
+        : `<div class="reticle-carousel-dots">${slides
+            .map((slide, i) => `<button type="button" ${CAROUSEL_DOT_ATTR}="${String(i)}" class="reticle-carousel-dot" aria-label="${slide.id}" aria-current="${String(i === current)}"></button>`)
+            .join('')}</div>`;
+    return `<div ${CAROUSEL_ATTR} class="reticle-carousel" role="region" aria-label="Reticle" data-active="${String(current)}">
+      <button type="button" ${CAROUSEL_CLOSE_ATTR} class="reticle-carousel-close" aria-label="${CLOSE_LABEL}" title="${CLOSE_LABEL}">×</button>
+      <div class="reticle-carousel-track">${track}</div>
+      ${dots}
+    </div>`;
+}
+function dismissed(storage) {
+    try {
+        return '1' === storage?.getItem(CAROUSEL_DISMISSED_KEY);
+    }
+    catch {
+        return false;
+    }
+}
+export function paintCarousel(log, slides, storage) {
+    const existing = log.querySelector(`:scope > [${CAROUSEL_ATTR}]`);
+    const active = Number(existing?.getAttribute('data-active') ?? '0');
+    existing?.remove();
+    stopRotation(log);
+    if (dismissed(storage))
+        return;
+    const html = carouselHtml(slides, active);
+    if ('' === html)
+        return;
+    log.insertAdjacentHTML('afterbegin', html);
+    const root = log.firstElementChild;
+    if (!(root instanceof HTMLElement))
+        return;
+    root.querySelector(`[${CAROUSEL_CLOSE_ATTR}]`)?.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        try {
+            storage?.setItem(CAROUSEL_DISMISSED_KEY, '1');
+        }
+        catch {
+        }
+        stopRotation(log);
+        root.remove();
+    });
+    for (const dot of root.querySelectorAll(`[${CAROUSEL_DOT_ATTR}]`)) {
+        dot.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            show(root, Number(dot.getAttribute(CAROUSEL_DOT_ATTR)));
+        });
+    }
+    startRotation(log, root, slides.length);
+}
+function startRotation(log, root, count) {
+    if (count < 2 || prefersReducedMotion())
+        return;
+    let paused = false;
+    const pause = () => {
+        paused = true;
+    };
+    const resume = () => {
+        paused = false;
+    };
+    root.addEventListener('mouseenter', pause);
+    root.addEventListener('mouseleave', resume);
+    root.addEventListener('focusin', pause);
+    root.addEventListener('focusout', resume);
+    rotations.set(log, setInterval(() => {
+        if (!root.isConnected) {
+            stopRotation(log);
+            return;
+        }
+        if (paused)
+            return;
+        show(root, (Number(root.getAttribute('data-active')) + 1) % count);
+    }, ROTATE_MS));
+}
+export const CAROUSEL_CSS = `
+.reticle-carousel{position:relative;margin:8px 10px;padding:10px 12px 8px;border:1px solid var(--reticle-line,#2a2f3a);border-radius:10px;background:var(--reticle-surface-inset,rgba(255,255,255,.03));}
+.reticle-carousel-track{height:100px;overflow:hidden;}
+.reticle-carousel-slide .reticle-offer,.reticle-carousel-slide .reticle-talk{margin:0;padding:0;border:0;background:none;}
+.reticle-carousel-close{position:absolute;top:4px;right:6px;width:20px;height:20px;padding:0;border:0;background:none;color:inherit;opacity:.55;cursor:pointer;font-size:14px;line-height:20px;}
+.reticle-carousel-close:hover{opacity:1;}
+.reticle-carousel-dots{display:flex;justify-content:center;gap:6px;margin-top:6px;}
+.reticle-carousel-dot{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:currentColor;opacity:.3;cursor:pointer;}
+.reticle-carousel-dot[aria-current="true"]{opacity:.9;}
+`;

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

@@ -0,0 +1,21 @@
+export declare const OFFER_ATTR = "data-reticle-offer";
+export declare const OFFER_CLAIM_ATTR = "data-reticle-offer-claim";
+export declare const OFFER_DISMISSED_KEY = "reticle.harnessOffer.dismissed";
+export declare const OFFER_TEXT: {
+    readonly HEADLINE: "Get Harness free for 3 months";
+    readonly BODY: "Explores your app and saves every journey as a free replay.";
+    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 interface OfferState {
+    claimed: boolean;
+    daysRemaining?: number | undefined;
+    claimUrl?: string | undefined;
+    eligible?: boolean | undefined;
+    drivable?: boolean | undefined;
+}
+export declare function offerHtml(offer: OfferState | undefined, dismissed: boolean): string;
+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-title{display:block;font-weight:600;font-size:12px;padding-right:18px;}\n.reticle-offer-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}\n.reticle-offer-claim{display:inline-block;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-claimed{margin:6px 10px;font-size:10px;opacity:.6;}\n";

package/dist/presenter/carousel/offer-card.js

@@ -0,0 +1,55 @@
+export const OFFER_ATTR = 'data-reticle-offer';
+export const OFFER_CLAIM_ATTR = 'data-reticle-offer-claim';
+export const OFFER_DISMISSED_KEY = 'reticle.harnessOffer.dismissed';
+export const OFFER_TEXT = {
+    HEADLINE: 'Get Harness free for 3 months',
+    BODY: 'Explores your app and saves every journey as a free replay.',
+    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;
+    }
+}
+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 (false === offer.drivable)
+        return '';
+    if (dismissed)
+        return '';
+    const url = offer.claimUrl;
+    if (url === undefined || 0 === url.length)
+        return '';
+    return `<div ${OFFER_ATTR} class="reticle-offer" role="note">
+      <span class="reticle-offer-title">${escape(OFFER_TEXT.HEADLINE)}</span>
+      <p class="reticle-offer-body">${escape(OFFER_TEXT.BODY)}</p>
+      <a ${OFFER_CLAIM_ATTR} class="reticle-offer-claim" href="${escape(url)}" target="_blank" rel="noopener noreferrer">${escape(OFFER_TEXT.CLAIM)}</a>
+    </div>`;
+}
+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-title{display:block;font-weight:600;font-size:12px;padding-right:18px;}
+.reticle-offer-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}
+.reticle-offer-claim{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}
+.reticle-offer-claimed{margin:6px 10px;font-size:10px;opacity:.6;}
+`;

package/dist/presenter/carousel/panel-slides.d.ts

@@ -0,0 +1,7 @@
+import { type OfferState } from './offer-card.js';
+import type { Slide } from './carousel.js';
+export declare const SLIDE_ID: {
+    readonly HARNESS: "harness";
+    readonly FOUNDERS: "founders";
+};
+export declare function panelSlides(offer: OfferState | undefined, offerDeclined: boolean): Slide[];

package/dist/presenter/carousel/panel-slides.js

@@ -0,0 +1,10 @@
+import { offerHtml } from './offer-card.js';
+import { talkCardHtml } from './talk-card.js';
+export const SLIDE_ID = { HARNESS: 'harness', FOUNDERS: 'founders' };
+export function panelSlides(offer, offerDeclined) {
+    const harness = offerHtml(offer, offerDeclined);
+    return [
+        ...('' === harness ? [] : [{ id: SLIDE_ID.HARNESS, html: harness }]),
+        { id: SLIDE_ID.FOUNDERS, html: talkCardHtml() },
+    ];
+}

package/dist/presenter/carousel/talk-card.d.ts

@@ -0,0 +1,8 @@
+export declare const TALK_BOOK_ATTR = "data-reticle-talk-book";
+export declare const TALK_TEXT: {
+    readonly HEADLINE: "Talk to Founders";
+    readonly BODY: "Tell us where Reticle got in your way.";
+    readonly BOOK: "Book a call";
+};
+export declare function talkCardHtml(): string;
+export declare const TALK_CSS = "\n.reticle-talk-title{display:block;font-weight:600;font-size:12px;padding-right:18px;}\n.reticle-talk-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}\n.reticle-talk-book{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}\n";

package/dist/presenter/carousel/talk-card.js

@@ -0,0 +1,20 @@
+import { DISCOVERY_CALL_URL } from '@reticlehq/core';
+export const TALK_BOOK_ATTR = 'data-reticle-talk-book';
+export const TALK_TEXT = {
+    HEADLINE: 'Talk to Founders',
+    BODY: 'Tell us where Reticle got in your way.',
+    BOOK: 'Book a call',
+};
+const escape = (text) => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+export function talkCardHtml() {
+    return `<div class="reticle-talk">
+      <span class="reticle-talk-title">${escape(TALK_TEXT.HEADLINE)}</span>
+      <p class="reticle-talk-body">${escape(TALK_TEXT.BODY)}</p>
+      <a ${TALK_BOOK_ATTR} class="reticle-talk-book" href="${escape(DISCOVERY_CALL_URL)}" target="_blank" rel="noopener noreferrer">${escape(TALK_TEXT.BOOK)}</a>
+    </div>`;
+}
+export const TALK_CSS = `
+.reticle-talk-title{display:block;font-weight:600;font-size:12px;padding-right:18px;}
+.reticle-talk-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}
+.reticle-talk-book{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}
+`;

package/dist/presenter/chrome/presenter-log.d.ts

@@ -6,11 +6,12 @@ export declare const CHIP_LABEL: Record<PresenterMode, string>;
 export declare const DATA_RETICLE_LOG = "data-reticle-log";
 export declare const LOG_TIME_ATTR = "data-reticle-log-time";
 export declare const LOG_CSS: string;
-export declare function scrollLogToLatest(container: HTMLElement): void;
 export declare function settleLogAtLatest(container: HTMLElement): void;
 export interface LogHandle {
     result(r: LogResult): void;
 }
+export declare function trimLogRows(container: HTMLElement, max: number): void;
+export declare function clearLogRows(container: HTMLElement): void;
 export declare function clampLogMax(n: number | undefined): number;
 export declare function humanDuration(ms: number): string;
 export declare function formatElapsed(ms: number): string;

package/dist/presenter/chrome/presenter-log.js

@@ -70,7 +70,7 @@ export const LOG_CSS = `
   border-radius:16px 16px 4px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
 [data-reticle-log-row][data-kind="human"] .reticle-log-text{color:var(--reticle-fg);font-size:12px;line-height:1.45;}
 `;
-export function scrollLogToLatest(container) {
+function scrollLogToLatest(container) {
     container.scrollTop = container.scrollHeight;
 }
 export function settleLogAtLatest(container) {
@@ -81,6 +81,18 @@ export function settleLogAtLatest(container) {
     });
     nativeSetTimeout(() => scrollLogToLatest(container), LOG_SETTLE_MS);
 }
+function logRows(container) {
+    return [...container.children].filter((el) => el.hasAttribute(DATA_RETICLE_LOG_ROW));
+}
+export function trimLogRows(container, max) {
+    const rows = logRows(container);
+    for (const row of rows.slice(0, Math.max(0, rows.length - max)))
+        row.remove();
+}
+export function clearLogRows(container) {
+    for (const row of logRows(container))
+        row.remove();
+}
 export function clampLogMax(n) {
     if (n === undefined || !Number.isFinite(n) || n <= 0)
         return DEFAULT_LOG_MAX;
@@ -135,8 +147,7 @@ export function appendLogRow(container, kind, text, ts, logMax) {
         rowNodes.push(resEl);
     row.append(...rowNodes);
     container.appendChild(row);
-    while (container.childElementCount > logMax)
-        container.firstElementChild?.remove();
+    trimLogRows(container, logMax);
     requestAnimationFrame(() => {
         scrollLogToLatest(container);
     });

package/dist/presenter/chrome/presenter-report-copy.d.ts

@@ -5,7 +5,6 @@ export declare const REPORT_LINKS: {
     readonly GITHUB: "https://github.com/reticlehq/reticle";
     readonly DISCORD: "https://discord.gg/BwAbzv9ZRz";
 };
-export declare const SHARE_VIA_HANDLE = "";
 export declare const REPORT_TEXT: {
     readonly TITLE: "Impact";
     readonly PROJECT: "This project";

package/dist/presenter/chrome/presenter-report-copy.js

@@ -5,7 +5,7 @@ export const REPORT_LINKS = {
     GITHUB: 'https://github.com/reticlehq/reticle',
     DISCORD: 'https://discord.gg/BwAbzv9ZRz',
 };
-export const SHARE_VIA_HANDLE = '';
+const SHARE_VIA_HANDLE = '';
 export const REPORT_TEXT = {
     TITLE: 'Impact',
     PROJECT: 'This project',

package/dist/presenter/hud-telemetry.d.ts

@@ -0,0 +1,3 @@
+import { type HudUseData } from '@reticlehq/core';
+export declare function controlIdOf(el: Element): string | undefined;
+export declare function installHudTelemetry(doc: Document, root: Element, report: (use: HudUseData) => void): () => void;

package/dist/presenter/hud-telemetry.js

@@ -0,0 +1,87 @@
+import { HUD_KEYED_ATTRS, isHudControl } from '@reticlehq/core/hud';
+import { HudPanel, HudToggle, HudView } from '@reticlehq/core';
+import { isReticleUi } from '../dom/dom-ignore.js';
+import { nativeSetTimeout } from '../timers/native/native-timers.js';
+import { CHAT_ATTR, MIN_ATTR, REPORT_ATTR, SETTINGS_ATTR } from './presenter-config.js';
+const PREFIX = 'data-reticle-';
+const TOGGLE_ROLES = new Set(['switch', 'checkbox']);
+export function controlIdOf(el) {
+    for (const attr of Array.from(el.attributes)) {
+        if (!attr.name.startsWith(PREFIX))
+            continue;
+        const name = attr.name.slice(PREFIX.length);
+        const id = HUD_KEYED_ATTRS.includes(name)
+            ? `${name}.${attr.value}`
+            : name;
+        if (isHudControl(id))
+            return id;
+    }
+    return undefined;
+}
+function controlOf(path) {
+    for (const node of path) {
+        if (!(node instanceof Element))
+            continue;
+        if (controlIdOf(node) !== undefined)
+            return node;
+    }
+    return undefined;
+}
+function viewOf(root) {
+    if ('1' === root.getAttribute(MIN_ATTR))
+        return { view: HudView.BUBBLE, panel: HudPanel.NONE };
+    if ('1' === root.getAttribute(SETTINGS_ATTR)) {
+        return { view: HudView.EXPANDED, panel: HudPanel.SETTINGS };
+    }
+    if ('1' === root.getAttribute(REPORT_ATTR)) {
+        return { view: HudView.EXPANDED, panel: HudPanel.REPORT };
+    }
+    if ('1' === root.getAttribute(CHAT_ATTR))
+        return { view: HudView.EXPANDED, panel: HudPanel.CHAT };
+    return { view: HudView.COLLAPSED, panel: HudPanel.NONE };
+}
+export function installHudTelemetry(doc, root, report) {
+    const send = (use) => {
+        try {
+            report(use);
+        }
+        catch {
+        }
+    };
+    const onPress = (event) => {
+        const el = controlOf(event.composedPath());
+        if (el === undefined || !isReticleUi(el))
+            return;
+        const control = controlIdOf(el);
+        if (control === undefined)
+            return;
+        if (!TOGGLE_ROLES.has(el.getAttribute('role') ?? '')) {
+            send({ control });
+            return;
+        }
+        nativeSetTimeout(() => {
+            const on = 'true' === el.getAttribute('aria-checked');
+            send({ control, toggle: on ? HudToggle.ON : HudToggle.OFF });
+        }, 0);
+    };
+    let last = '';
+    const onChange = () => {
+        const now = viewOf(root);
+        const key = `${now.view}/${now.panel}`;
+        if (key === last)
+            return;
+        last = key;
+        send(now);
+    };
+    doc.addEventListener('click', onPress, true);
+    const observer = new MutationObserver(onChange);
+    observer.observe(root, {
+        attributes: true,
+        attributeFilter: [MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR, REPORT_ATTR],
+    });
+    onChange();
+    return () => {
+        doc.removeEventListener('click', onPress, true);
+        observer.disconnect();
+    };
+}

package/dist/presenter/presenter-account.js

@@ -77,7 +77,7 @@ function accountMenuHtml(account, details) {
         detailRow(ACCOUNT_TEXT.DEFECTS_LABEL, details.defects !== undefined ? String(details.defects) : undefined);
     const linked = details.dashboardUrl !== undefined && isSafeDashboardUrl(details.dashboardUrl);
     const dashboard = linked
-        ? `<a class="reticle-account-action" href="${esc(details.dashboardUrl ?? '')}" target="_blank" rel="noreferrer noopener" title="${ACCOUNT_TEXT.DASHBOARD_TITLE}">${hiIconHtml(PresenterIcon.VIEW, PRESENTER_ICON_SIZE.HELP)}<span>${ACCOUNT_TEXT.DASHBOARD_ACTION}</span></a>`
+        ? `<a class="reticle-account-action" data-reticle-account-dashboard href="${esc(details.dashboardUrl ?? '')}" target="_blank" rel="noreferrer noopener" title="${ACCOUNT_TEXT.DASHBOARD_TITLE}">${hiIconHtml(PresenterIcon.VIEW, PRESENTER_ICON_SIZE.HELP)}<span>${ACCOUNT_TEXT.DASHBOARD_ACTION}</span></a>`
         :
             `<button type="button" class="reticle-account-action reticle-account-action--hint" ${ACCOUNT_SIGNIN_ATTR} data-reticle-copy="${ACCOUNT_TEXT.LINK_COMMAND}" title="${ACCOUNT_TEXT.LINK_HINT}"><span>${ACCOUNT_TEXT.LINK_HINT}</span></button>`;
     const signOut = `<button type="button" class="reticle-account-action" ${ACCOUNT_SIGNOUT_ATTR} data-reticle-copy="${ACCOUNT_TEXT.SIGNOUT_COMMAND}" title="${ACCOUNT_TEXT.SIGNOUT_TITLE}"><span>${ACCOUNT_TEXT.SIGNOUT_ACTION}</span></button>`;

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

@@ -1,4 +1,4 @@
-import type { HumanControlKind } from '@reticlehq/core';
+import type { HudUseData, HumanControlKind } from '@reticlehq/core';
 export declare const BorderMode: {
     readonly SESSION: "session";
     readonly BUSY: "busy";
@@ -21,6 +21,7 @@ export interface PresenterOptions {
     border?: BorderMode;
     logMax?: number;
     onControl?: ControlHandler;
+    onHudUse?: (use: HudUseData) => void;
     endedFadeMs?: number;
 }
 export declare const DEFAULT_PACE = 450;
@@ -65,6 +66,8 @@ export declare const Placement: {
 };
 export declare const MARKERS_BTN_ATTR = "data-reticle-markers-btn";
 export declare const CLEAR_MARKS_ATTR = "data-reticle-clear-marks";
+export declare const COPY_MARKS_ATTR = "data-reticle-copy-marks";
+export declare const MARKS_ROW_ATTR = "data-reticle-marks-row";
 export declare const MARK_COUNT_ATTR = "data-reticle-mark-count";
 export declare const ANNOTATE_BTN_ATTR = "data-reticle-annotate-btn";
 export declare const CHAT_MIN_ATTR = "data-reticle-chat-min";
@@ -79,6 +82,7 @@ export declare const SETTINGS_PANEL_ATTR = "data-reticle-settings-panel";
 export declare const SETTINGS_CLOSE_ATTR = "data-reticle-settings-close";
 export declare const SETTING_KEY_ATTR = "data-reticle-setting";
 export declare const SETTINGS_STORAGE_KEY = "reticle-presenter-settings";
+export declare const MINIMISED_STORAGE_KEY = "reticle-presenter-minimised";
 export declare const AMBIENT_GLOW_ATTR = "data-reticle-ambient-glow";
 export declare const LIVENESS_ATTR = "data-reticle-live";
 export declare const BLOCK_ATTR = "data-reticle-block";

package/dist/presenter/presenter-config.js

@@ -45,6 +45,8 @@ export const DOCK_ALIGN_ATTR = 'data-reticle-dock-align';
 export const Placement = { ABOVE: 'above', BELOW: 'below' };
 export const MARKERS_BTN_ATTR = 'data-reticle-markers-btn';
 export const CLEAR_MARKS_ATTR = 'data-reticle-clear-marks';
+export const COPY_MARKS_ATTR = 'data-reticle-copy-marks';
+export const MARKS_ROW_ATTR = 'data-reticle-marks-row';
 export const MARK_COUNT_ATTR = 'data-reticle-mark-count';
 export const ANNOTATE_BTN_ATTR = 'data-reticle-annotate-btn';
 export const CHAT_MIN_ATTR = 'data-reticle-chat-min';
@@ -59,6 +61,7 @@ export const SETTINGS_PANEL_ATTR = 'data-reticle-settings-panel';
 export const SETTINGS_CLOSE_ATTR = 'data-reticle-settings-close';
 export const SETTING_KEY_ATTR = 'data-reticle-setting';
 export const SETTINGS_STORAGE_KEY = 'reticle-presenter-settings';
+export const MINIMISED_STORAGE_KEY = 'reticle-presenter-minimised';
 export const AMBIENT_GLOW_ATTR = 'data-reticle-ambient-glow';
 export const LIVENESS_ATTR = 'data-reticle-live';
 export const BLOCK_ATTR = 'data-reticle-block';
@@ -71,6 +74,6 @@ export const HUD_POS_X_VAR = '--reticle-hud-x';
 export const HUD_POS_Y_VAR = '--reticle-hud-y';
 export const HUD_DRAG_THRESHOLD_PX = 4;
 export const HUD_DOCK_MARGIN_PX = 8;
-export const HUD_DRAG_IGNORE_SEL = '[data-reticle-pause], [data-reticle-annotate-btn], [data-reticle-markers-btn], [data-reticle-clear-marks], [data-reticle-end], [data-reticle-min-btn], [data-reticle-settings-btn], [data-reticle-settings-panel], [data-reticle-report-btn], [data-reticle-report-panel], [data-reticle-chat-panel], [data-reticle-chat-toggle], [data-reticle-workspace-btn], [data-reticle-workspace-menu], [data-reticle-copy], [data-reticle-export], input, textarea, select, a, .reticle-head-ctl, [data-reticle-tally], .reticle-maxhint';
+export const HUD_DRAG_IGNORE_SEL = '[data-reticle-pause], [data-reticle-annotate-btn], [data-reticle-markers-btn], [data-reticle-clear-marks], [data-reticle-copy-marks], [data-reticle-end], [data-reticle-min-btn], [data-reticle-settings-btn], [data-reticle-settings-panel], [data-reticle-report-btn], [data-reticle-report-panel], [data-reticle-chat-panel], [data-reticle-chat-toggle], [data-reticle-workspace-btn], [data-reticle-workspace-menu], [data-reticle-copy], [data-reticle-export], input, textarea, select, a, .reticle-head-ctl, [data-reticle-tally], .reticle-maxhint';
 export const THROTTLED_ATTR = 'data-reticle-throttled';
 export const Z_HUD_TOOLTIP = 100;

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

@@ -4,6 +4,7 @@ export declare const ENDED_FADE_MS = 4000;
 export declare const CONTROLS_CSS: string;
 export declare const CONTROLS_TOOLBAR_HTML: string;
 export declare const CONTROLS_BANNER_HTML = "<div data-reticle-banner class=\"reticle-banner\">Session ended</div>";
+export declare const CONTROLS_MARKS_HTML: string;
 export declare const CONTROLS_FLOWS_HTML = "<div data-reticle-flows class=\"reticle-flows\"><span class=\"reticle-flows-cap\">Replay a flow</span></div>";
 export declare const CONTROLS_FOOT_HTML: string;
 interface ControlPanelHost {

package/dist/presenter/presenter-controls.js

@@ -1,6 +1,6 @@
 import { HumanControlKind, PresenterTone, SessionState } from '@reticlehq/core';
 import { nativeSetTimeout, nativeClearTimeout } from '../timers/native/native-timers.js';
-import { CHAT_TOGGLE_ATTR, CLEAR_MARKS_ATTR, MARKERS_BTN_ATTR } from './presenter-config.js';
+import { CHAT_TOGGLE_ATTR, CLEAR_MARKS_ATTR, COPY_MARKS_ATTR, MARKERS_BTN_ATTR, MARKS_ROW_ATTR, } from './presenter-config.js';
 import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, hiIconHtml, hiToggleIconHtml, } from './icons/presenter-icons.js';
 import { getPresenterSettings } from './presenter-settings.js';
 import { mountWorkspaceSelector, workspaceRowHtml } from './presenter-workspace.js';
@@ -101,6 +101,15 @@ export const CONTROLS_CSS = `
 [data-reticle-chat-panel] .reticle-flow:active{transform:scale(.95);}
 [data-reticle-overlay][data-reticle-state="paused"] [data-reticle-hud] .reticle-tb-btn--primary{
   box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 12px rgba(255,255,255,.04);}
+[data-reticle-chat-panel] .reticle-marks-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
+  padding:7px 12px;border-top:1px solid var(--reticle-line2);pointer-events:auto;}
+[data-reticle-chat-panel] .reticle-marks-row[hidden]{display:none;}
+[data-reticle-chat-panel] .reticle-marks-text{color:var(--reticle-muted);font-size:11px;}
+[data-reticle-chat-panel] .reticle-marks-copy{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;
+  border-radius:7px;border:1px solid var(--reticle-line);background:rgba(255,255,255,.04);color:var(--reticle-fg);
+  font-family:var(--reticle-font);font-size:11px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s;}
+[data-reticle-chat-panel] .reticle-marks-copy:hover{background:var(--reticle-accent-soft);border-color:var(--reticle-accent);}
+[data-reticle-chat-panel] .reticle-marks-copy[data-copied="1"]{color:#22c55e;border-color:#22c55e;}
 [data-reticle-hud] .reticle-export-msg{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
   overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
 `;
@@ -116,6 +125,7 @@ function paintPauseBtn(btn, paused) {
 const CHAT_LABEL = 'Agent chat';
 const MARKERS_LABEL = 'Hide markers';
 const CLEAR_MARKS_LABEL = 'Clear all';
+const COPY_MARKS_LABEL = 'Copy for your agent';
 const TB = PRESENTER_ICON_SIZE.TOOLBAR;
 function tbWrap(btn, tip, kbd) {
     const shortcut = kbd === undefined ? '' : `<span class="reticle-tb-kbd">${kbd}</span>`;
@@ -138,6 +148,7 @@ export const CONTROLS_TOOLBAR_HTML = [
     '<span data-reticle-export-msg class="reticle-export-msg" aria-live="polite"></span>',
 ].join('');
 export const CONTROLS_BANNER_HTML = `<div data-reticle-banner class="reticle-banner">${ENDED_BANNER_TEXT}</div>`;
+export const CONTROLS_MARKS_HTML = `<div ${MARKS_ROW_ATTR} class="reticle-marks-row" hidden><span data-reticle-marks-text class="reticle-marks-text"></span><button type="button" ${COPY_MARKS_ATTR} class="reticle-marks-copy" title="${COPY_MARKS_LABEL}">${hiIconHtml(PresenterIcon.COPY, PRESENTER_ICON_SIZE.HELP)}<span>${COPY_MARKS_LABEL}</span></button></div>`;
 export const CONTROLS_FLOWS_HTML = `<div data-reticle-flows class="reticle-flows"><span class="reticle-flows-cap">${FLOWS_LABEL}</span></div>`;
 export const CONTROLS_FOOT_HTML = `<div data-reticle-foot><div class="reticle-foot-stack">${workspaceRowHtml()}</div></div>`;
 function queryControlRefs(root) {

package/dist/presenter/presenter-report.js

@@ -28,10 +28,10 @@ export function reportPanelHtml() {
         <button type="button" ${REFER_ATTR} class="reticle-report-share reticle-report-refer">${REPORT_TEXT.REFER}</button>
       </div>
       <div class="reticle-report-links">
-        <a href="${REPORT_LINKS.DOCS}" target="_blank" rel="noreferrer noopener">Docs</a>
-        <a href="${REPORT_LINKS.GITHUB}" target="_blank" rel="noreferrer noopener">GitHub</a>
-        <a href="${REPORT_LINKS.SITE}" target="_blank" rel="noreferrer noopener">reticle.sh</a>
-        <a href="${REPORT_LINKS.DISCORD}" target="_blank" rel="noreferrer noopener">Discord</a>
+        <a data-reticle-link="docs" href="${REPORT_LINKS.DOCS}" target="_blank" rel="noreferrer noopener">Docs</a>
+        <a data-reticle-link="github" href="${REPORT_LINKS.GITHUB}" target="_blank" rel="noreferrer noopener">GitHub</a>
+        <a data-reticle-link="site" href="${REPORT_LINKS.SITE}" target="_blank" rel="noreferrer noopener">reticle.sh</a>
+        <a data-reticle-link="discord" href="${REPORT_LINKS.DISCORD}" target="_blank" rel="noreferrer noopener">Discord</a>
       </div>
     </div>
   </div>`;
@@ -63,7 +63,7 @@ function defects(scope, dashboardUrl) {
         return '';
     const linked = dashboardUrl !== undefined && isSafeDashboardUrl(dashboardUrl);
     const rowLink = linked
-        ? `<a class="reticle-report-defect-link" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener" title="${REPORT_TEXT.DEFECT_LINK_TITLE}" aria-label="${REPORT_TEXT.DEFECT_LINK_TITLE}">${hiIconHtml(PresenterIcon.VIEW, PRESENTER_ICON_SIZE.SEND)}</a>`
+        ? `<a class="reticle-report-defect-link" data-reticle-link="defect" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener" title="${REPORT_TEXT.DEFECT_LINK_TITLE}" aria-label="${REPORT_TEXT.DEFECT_LINK_TITLE}">${hiIconHtml(PresenterIcon.VIEW, PRESENTER_ICON_SIZE.SEND)}</a>`
         : '';
     const rows = list
         .map((d) => {
@@ -78,7 +78,7 @@ function defects(scope, dashboardUrl) {
         .join('');
     const more = !linked
         ? ''
-        : `<a class="reticle-report-defects-more" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener">${REPORT_TEXT.DEFECTS_MORE}${scope.counts.failed > list.length ? ` (${String(scope.counts.failed)})` : ''}</a>`;
+        : `<a class="reticle-report-defects-more" data-reticle-link="dashboard" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener">${REPORT_TEXT.DEFECTS_MORE}${scope.counts.failed > list.length ? ` (${String(scope.counts.failed)})` : ''}</a>`;
     const sync = syncButtonHtml(dashboardUrl);
     return `<div class="reticle-report-defects-wrap"><div class="reticle-report-defects-head"><span class="reticle-report-section">${REPORT_TEXT.DEFECTS}</span>${sync}</div><ul class="reticle-report-defects">${rows}</ul>${more}</div>`;
 }

package/dist/presenter/presenter-settings-styles.js

@@ -120,7 +120,8 @@ export const SETTINGS_CSS = `
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link{
   width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
   border:none;background:transparent;color:rgba(255,255,255,.82);font:inherit;font-size:13px;
-  padding:11px 14px;cursor:pointer;text-align:left;transition:background .12s,color .12s;}
+  padding:11px 14px;cursor:pointer;text-align:left;transition:background .12s,color .12s;
+  text-decoration:none;box-sizing:border-box;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link-caret{display:inline-flex;align-items:center;flex:none;opacity:.55;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link:hover{background:rgba(255,255,255,.04);color:#fff;}
 [${SETTINGS_PANEL_ATTR}] .reticle-settings-link:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:-2px;}

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

@@ -9,14 +9,14 @@ export declare const OutputDetail: {
     readonly VERBOSE: "verbose";
 };
 export type OutputDetail = (typeof OutputDetail)[keyof typeof OutputDetail];
-export declare const StatusThemeId: {
+declare const StatusThemeId: {
     readonly SIGNAL: "signal";
     readonly TRAFFIC: "traffic";
     readonly MONO: "mono";
     readonly NEON: "neon";
     readonly EMBER: "ember";
 };
-export type StatusThemeId = (typeof StatusThemeId)[keyof typeof StatusThemeId];
+type StatusThemeId = (typeof StatusThemeId)[keyof typeof StatusThemeId];
 interface StatusTheme {
     id: StatusThemeId;
     label: string;
@@ -24,7 +24,6 @@ interface StatusTheme {
     idle: string;
     ended: string;
 }
-export declare const STATUS_THEMES: readonly StatusTheme[];
 export declare function statusTheme(id: StatusThemeId): StatusTheme;
 export interface PresenterSettings {
     outputDetail: OutputDetail;
@@ -51,7 +50,6 @@ export interface SettingsHost {
     onSettingsChange?: (settings: PresenterSettings) => void;
     onBeforeOpen?: () => void;
 }
-export declare function applyPresenterSettings(root: HTMLElement, settings: PresenterSettings): void;
 export declare function syncPageBlocker(root: HTMLElement, settings: PresenterSettings, annotateLive: boolean): void;
 export declare function blockerHtml(): string;
 export declare class PresenterSettingsPanel {