@reticlehq/browser 3.6.0 → 3.7.0

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

@@ -1,23 +1,29 @@
-import { offerHtml } from './offer-card.js';
 import { HudNoticeSchema } from '@reticlehq/core/hud';
 import { esc } from '../chrome/presenter-safe-html.js';
 import { DEFAULT_PLATFORM_URL } from '@reticlehq/core';
 const HARNESS_PATH = '/settings?group=billing';
 export const SLIDE_ID = {
-    HARNESS: 'harness-journeys',
     REPLAY: 'replay-confidence',
-    OFFER: 'harness-offer',
+    NOTES: 'notes-for-agent',
+};
+const SLIDE_TEXT = {
+    REPLAY_TITLE: 'Replay what your agent verified',
+    REPLAY_DETAIL: 'Saved flows re-run after each edit.',
+    REPLAY_LINK: 'See how →',
+    NOTES_TITLE: 'Point your agent at anything',
+    NOTES_DETAIL: 'Open Notes, then click an element.',
 };
 const valueSlides = (base) => [
     {
-        id: SLIDE_ID.HARNESS,
-        html: `<div class="reticle-promo-copy"><span class="reticle-promo-kicker">RETICLE HARNESS</span><strong class="reticle-promo-title">Let Reticle drive your app for you</strong><span class="reticle-promo-detail">Describe a user; it drives the journey and saves it to replay.</span><a data-reticle-promo-link class="reticle-promo-link" href="${base}${HARNESS_PATH}" target="_blank" rel="noopener noreferrer">Explore →</a></div>`,
+        id: SLIDE_ID.REPLAY,
+        html: `<div class="reticle-promo-copy"><strong class="reticle-promo-title">${SLIDE_TEXT.REPLAY_TITLE}</strong><span class="reticle-promo-detail">${SLIDE_TEXT.REPLAY_DETAIL}</span><a data-reticle-promo-link class="reticle-promo-link" href="${base}${HARNESS_PATH}" target="_blank" rel="noopener noreferrer">${SLIDE_TEXT.REPLAY_LINK}</a></div>`,
     },
     {
-        id: SLIDE_ID.REPLAY,
-        html: `<div class="reticle-promo-copy"><span class="reticle-promo-kicker">FROM RUN TO REGRESSION</span><strong class="reticle-promo-title">Keep every journey replayable</strong><span class="reticle-promo-detail">Catch what changes before users do.</span><a data-reticle-promo-link class="reticle-promo-link" href="${base}${HARNESS_PATH}" target="_blank" rel="noopener noreferrer">See how →</a></div>`,
+        id: SLIDE_ID.NOTES,
+        html: `<div class="reticle-promo-copy"><strong class="reticle-promo-title">${SLIDE_TEXT.NOTES_TITLE}</strong><span class="reticle-promo-detail">${SLIDE_TEXT.NOTES_DETAIL}</span></div>`,
     },
 ];
+const HARNESS_NOTICE_PREFIX = 'harness';
 const NOTICE_SLIDE_PREFIX = 'notice-';
 function noticeSlide(notice) {
     const kicker = notice.kicker === undefined
@@ -25,7 +31,7 @@ function noticeSlide(notice) {
         : `<span class="reticle-promo-kicker">${esc(notice.kicker)}</span>`;
     const detail = notice.detail === undefined
         ? ''
-        : `<span class="reticle-promo-detail">${esc(notice.detail)}</span>`;
+        : `<span class="reticle-promo-detail" title="${esc(notice.detail)}">${esc(notice.detail)}</span>`;
     const link = notice.cta === undefined
         ? ''
         : `<a data-reticle-promo-link class="reticle-promo-link" href="${esc(notice.cta.url)}" target="_blank" rel="noopener noreferrer">${esc(notice.cta.label)} →</a>`;
@@ -34,14 +40,10 @@ function noticeSlide(notice) {
         html: `<div class="reticle-promo-copy">${kicker}<strong class="reticle-promo-title">${esc(notice.title)}</strong>${detail}${link}</div>`,
     };
 }
-export function panelSlides(offer, offerDeclined, notices = [], base = DEFAULT_PLATFORM_URL) {
-    const harnessOffer = offerHtml(offer, offerDeclined);
+export function panelSlides(notices = [], base = DEFAULT_PLATFORM_URL) {
     const valid = notices.flatMap((n) => {
         const parsed = HudNoticeSchema.safeParse(n);
-        return parsed.success ? [parsed.data] : [];
+        return parsed.success && !parsed.data.id.startsWith(HARNESS_NOTICE_PREFIX) ? [parsed.data] : [];
     });
-    return [
-        ...('' === harnessOffer ? [] : [{ id: SLIDE_ID.OFFER, html: harnessOffer }]),
-        ...(0 < valid.length ? valid.map(noticeSlide) : valueSlides(base)),
-    ];
+    return 0 < valid.length ? valid.map(noticeSlide) : [...valueSlides(base)];
 }

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

@@ -5,6 +5,7 @@ export interface RememberedRow {
     ts: string;
     at: number;
     actor?: LogActor;
+    summary?: true;
     result?: LogResult;
 }
 export declare function readRememberedLog(): RememberedRow[];

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

@@ -3,8 +3,15 @@ import { LOG_ACTOR, LOG_KIND, LOG_RESULT, type LogActor, type LogKind, type LogR
 export { LOG_ACTOR, LOG_KIND, LOG_RESULT };
 export type { LogActor, LogKind, LogResult };
 export declare const CHIP_LABEL: Record<PresenterMode, string>;
+export declare const LAST_ACTOR_ATTR = "data-reticle-log-actor";
 export declare const DATA_RETICLE_LOG = "data-reticle-log";
 export declare const LOG_TIME_ATTR = "data-reticle-log-time";
+export declare const LOG_EMPTY_TEXT: {
+    readonly TITLE: "Reticle checks your app from the inside.";
+    readonly OFFLINE_TITLE: "Not connected yet.";
+    readonly OFFLINE_BODY: "Once Reticle is running, this page connects by itself and the steps show here.";
+    readonly BODY: "Ask your coding agent to verify a change with Reticle: each step shows here, live.\\AOr open Harness below: Reticle clicks through the app as the person you pick and reports what breaks.";
+};
 export declare const LOG_CSS: string;
 export declare const LOG_SCROLLABLE_ATTR = "data-reticle-log-scrollable";
 export declare function settleLogAtLatest(container: HTMLElement): void;

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

@@ -25,7 +25,7 @@ const HANDOVER_TEXT = {
     agent: 'Your agent is driving',
     harness: 'Reticle Harness is driving',
 };
-const LAST_ACTOR_ATTR = 'data-reticle-log-actor';
+export const LAST_ACTOR_ATTR = 'data-reticle-log-actor';
 const DATA_ACTOR = 'data-actor';
 const DATA_STATE = 'data-state';
 const HANDOVER_KIND = 'handover';
@@ -35,18 +35,29 @@ const DATA_RETICLE_LOG_ROW = 'data-reticle-log-row';
 export const LOG_TIME_ATTR = 'data-reticle-log-time';
 const DATA_KIND = 'data-kind';
 const LOG_TEXT_CLASS = 'reticle-log-text';
+const REPEAT_ATTR = 'data-reticle-repeat';
+const LOG_REPEAT_CLASS = 'reticle-log-repeat';
 const LOG_RES_CLASS = 'reticle-res';
 const LOG_CHIP_CLASS = 'reticle-chip';
-const LOG_EMPTY_HINT = 'Agent activity will appear here';
+export const LOG_EMPTY_TEXT = {
+    TITLE: 'Reticle checks your app from the inside.',
+    OFFLINE_TITLE: 'Not connected yet.',
+    OFFLINE_BODY: 'Once Reticle is running, this page connects by itself and the steps show here.',
+    BODY: 'Ask your coding agent to verify a change with Reticle: each step shows here, live.\\AOr open Harness below: Reticle clicks through the app as the person you pick and reports what breaks.',
+};
 const LOG_SETTLE_MS = 160;
 export const LOG_CSS = `
 [data-reticle-log]{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;touch-action:pan-y;
   display:flex;flex-direction:column;
   gap:4px;padding:8px 10px 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
   background:transparent;}
-[data-reticle-log]:empty{align-items:center;justify-content:center;}
-[data-reticle-log]:empty::after{content:"${LOG_EMPTY_HINT}";display:block;padding:24px 16px;text-align:center;
-  color:var(--reticle-faint);font-size:11.5px;line-height:1.5;letter-spacing:.01em;}
+[data-reticle-log]:empty{align-items:center;justify-content:center;gap:6px;padding:16px 18px;}
+[data-reticle-log]:empty::before{content:"${LOG_EMPTY_TEXT.TITLE}";display:block;text-align:center;
+  color:var(--reticle-hud-text);font-size:var(--reticle-hud-size-base);font-weight:600;line-height:1.4;}
+[data-reticle-log]:empty::after{content:"${LOG_EMPTY_TEXT.BODY}";display:block;max-width:260px;text-align:center;white-space:pre-line;
+  color:var(--reticle-hud-text-muted);font-size:var(--reticle-hud-size-sm);line-height:1.5;}
+[data-reticle-state="unreachable"] [data-reticle-log]:empty::before{content:"${LOG_EMPTY_TEXT.OFFLINE_TITLE}";}
+[data-reticle-state="unreachable"] [data-reticle-log]:empty::after{content:"${LOG_EMPTY_TEXT.OFFLINE_BODY}";}
 [data-reticle-log]::-webkit-scrollbar{width:8px;}
 [data-reticle-log]::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px;border:2px solid transparent;background-clip:content-box;}
 [data-reticle-log]::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);background-clip:content-box;}
@@ -69,8 +80,9 @@ export const LOG_CSS = `
 [data-reticle-log] [data-reticle-log-row] .reticle-chip-label{
   position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
 [data-reticle-log] [data-reticle-log-row][data-kind="read"] .reticle-chip{opacity:.5;}
-[${LOG_TIME_ATTR}]{flex:none;color:var(--reticle-faint);font-size:9px;font-variant-numeric:tabular-nums;padding-top:2px;min-width:2em;opacity:.85;}
+[${LOG_TIME_ATTR}]{flex:none;color:var(--reticle-faint);font-size:11px;font-variant-numeric:tabular-nums;padding-top:2px;min-width:2em;opacity:.85;}
 [data-reticle-log] .reticle-log-text{flex:1;min-width:0;color:var(--reticle-muted);overflow-wrap:anywhere;word-break:break-word;}
+[data-reticle-log] .reticle-log-repeat{flex:none;color:var(--reticle-muted);font-variant-numeric:tabular-nums;opacity:.7;}
 [data-reticle-log] .reticle-res{flex:none;font-size:7.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--reticle-bad);opacity:.75;padding-top:2px;}
 [data-reticle-log] .reticle-res.reticle-pass{display:none;}
 [data-reticle-log-row][data-kind="human"]{align-self:flex-end;max-width:78%;margin:6px 0 2px;
@@ -85,14 +97,14 @@ export const LOG_CSS = `
 [data-reticle-log-row][data-state="running"] .reticle-res{display:inline-block;width:6px;height:6px;margin-top:5px;
   border-radius:50%;background:var(--reticle-c-active);opacity:1;animation:reticle-row-pulse 1s ease-in-out infinite;}
 @keyframes reticle-row-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
-[data-reticle-log] .reticle-res.reticle-pass{display:inline;color:#4ade80;font-size:10px;opacity:.9;}
+[data-reticle-log] .reticle-res.reticle-pass{display:inline;color:#4ade80;font-size:11px;opacity:.9;}
 [data-reticle-log] .reticle-res.reticle-fail{color:#fca5a5;background:rgba(239,68,68,.16);border-radius:999px;padding:1px 6px;font-size:8px;opacity:1;}
 /* The Harness's rows wear its own colour, so two drivers never read as one. */
 [data-reticle-log-row][data-actor="harness"]{--reticle-row-accent:#a78bfa;}
 [data-reticle-log-row][data-actor="harness"] .reticle-chip{color:#a78bfa;}
 [data-reticle-log-row][data-actor="harness"]:not([data-kind="handover"]){box-shadow:inset 2px 0 0 color-mix(in srgb,#a78bfa 55%,transparent);padding-left:8px;}
 [data-reticle-log-row][data-kind="handover"]{align-items:center;gap:8px;margin:8px 0 4px;padding:0;
-  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--reticle-row-accent,var(--reticle-c-active));}
+  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--reticle-row-accent,var(--reticle-c-active));}
 [data-reticle-log-row][data-kind="handover"]::before,[data-reticle-log-row][data-kind="handover"]::after{
   content:"";flex:1;height:1px;background:color-mix(in srgb,var(--reticle-row-accent,var(--reticle-c-active)) 40%,transparent);}
 [data-reticle-log-row][data-kind="handover"] .reticle-log-text{flex:none;color:inherit;}
@@ -144,6 +156,23 @@ export function formatElapsed(ms) {
     return humanDuration(ms);
 }
 export function appendLogRow(container, kind, text, ts, logMax, actor = LOG_ACTOR.AGENT) {
+    const repeated = kind === LOG_KIND.READ ? sameReadAsLast(container, text, actor) : undefined;
+    if (repeated !== undefined) {
+        const times = Number(repeated.getAttribute(REPEAT_ATTR) ?? '1') + 1;
+        repeated.setAttribute(REPEAT_ATTR, String(times));
+        let count = repeated.querySelector(`.${LOG_REPEAT_CLASS}`);
+        if (null === count) {
+            count = document.createElement('span');
+            count.className = LOG_REPEAT_CLASS;
+            repeated.querySelector(`.${LOG_TEXT_CLASS}`)?.after(count);
+        }
+        count.textContent = `×${String(times)}`;
+        const time = repeated.querySelector(`[${LOG_TIME_ATTR}]`);
+        if (null !== time)
+            time.textContent = ts;
+        const res = repeated.querySelector(`.${LOG_RES_CLASS}`);
+        return null === res ? { result: () => undefined } : rowHandle(repeated, res);
+    }
     const driven = kind === LOG_KIND.ACT || kind === LOG_KIND.READ;
     if (driven && (container.getAttribute(LAST_ACTOR_ATTR) ?? LOG_ACTOR.AGENT) !== actor) {
         const divider = document.createElement('div');
@@ -200,6 +229,17 @@ export function appendLogRow(container, kind, text, ts, logMax, actor = LOG_ACTO
     requestAnimationFrame(() => {
         scrollLogToLatest(container);
     });
+    return rowHandle(row, resEl);
+}
+function sameReadAsLast(container, text, actor) {
+    const last = container.lastElementChild;
+    if (!(last instanceof HTMLElement) || !last.hasAttribute(DATA_RETICLE_LOG_ROW))
+        return undefined;
+    if (last.getAttribute(DATA_KIND) !== LOG_KIND.READ || last.getAttribute(DATA_ACTOR) !== actor)
+        return undefined;
+    return last.querySelector(`.${LOG_TEXT_CLASS}`)?.textContent === text ? last : undefined;
+}
+function rowHandle(row, resEl) {
     return {
         result: (r) => {
             row.setAttribute(DATA_STATE, r);

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

@@ -0,0 +1 @@
+export declare function morphHtml(target: Element, html: string): void;

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

@@ -0,0 +1,34 @@
+export function morphHtml(target, html) {
+    const next = document.createElement('template');
+    next.innerHTML = html;
+    morphChildren(target, next.content);
+}
+function morphChildren(from, to) {
+    const have = [...from.childNodes];
+    const want = [...to.childNodes];
+    want.forEach((node, i) => {
+        const old = have[i];
+        if (old === undefined)
+            from.appendChild(node);
+        else if (old.nodeType === node.nodeType && old.nodeName === node.nodeName)
+            morphNode(old, node);
+        else
+            from.replaceChild(node, old);
+    });
+    for (const extra of have.slice(want.length))
+        from.removeChild(extra);
+}
+function morphNode(old, node) {
+    if (!(old instanceof Element) || !(node instanceof Element)) {
+        if (old.nodeValue !== node.nodeValue)
+            old.nodeValue = node.nodeValue;
+        return;
+    }
+    for (const { name } of [...old.attributes])
+        if (!node.hasAttribute(name))
+            old.removeAttribute(name);
+    for (const { name, value } of [...node.attributes])
+        if (old.getAttribute(name) !== value)
+            old.setAttribute(name, value);
+    morphChildren(old, node);
+}

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

@@ -13,7 +13,7 @@ export declare const REPORT_TEXT: {
     readonly GLOBAL: "All projects";
     readonly GLOBAL_TITLE: "Every project on this computer";
     readonly SCOPE_LABEL: "Show impact for";
-    readonly HERO_DEFECTS: "checks Reticle refused to pass";
+    readonly heroDefects: (n: number) => string;
     readonly VERDICTS: "Verdicts";
     readonly PASSED: "passed";
     readonly FAILED: "failed";
@@ -35,18 +35,31 @@ export declare const REPORT_TEXT: {
     readonly DEFECTS_SEE_ALL_TITLE: "Sign up free, link this project, and see every bug Reticle caught";
     readonly DEFECT_LINK_TITLE: "Open on the dashboard to triage or push to GitHub";
     readonly LOCAL_ONLY: "This record stops at this machine.";
-    readonly LOCAL_ONLY_ACTION: "reticle login";
+    readonly LOCAL_ONLY_ACTION: "reticle connect";
     readonly LOCAL_ONLY_TAIL: "keeps it, and lets a team see it.";
     readonly UNLINKED: "Signed in, but this repo is not linked.";
-    readonly UNLINKED_ACTION: "reticle link";
+    readonly UNLINKED_ACTION: "reticle connect";
     readonly UNLINKED_TAIL: "sends this record to your workspace.";
     readonly DEFECTS_NONE: "Nothing has failed a declared consequence yet.";
     readonly EMPTY: "Nothing recorded yet. Drive the app once and this fills in.";
     readonly SHARE: "Share";
     readonly COPY: "Copy";
     readonly COPIED: "Copied";
-    readonly REFER: "Send to a friend";
+    readonly SEE_RUN: "See it in your dashboard";
+    readonly KEY_REFUSED: "Key refused";
+    readonly NOT_SENT: "not synced";
+    readonly NOT_SENT_HELP: "Runs saved on this machine but not on your dashboard yet. Run reticle connect in this project to send them.";
+    readonly INSTRUMENTATION: "What Reticle can see";
+    readonly INSTRUMENTATION_HELP: "What Reticle can see in this app, from its handshake and the gaps its verdicts recorded";
+    readonly covered: (covered: number, total: number) => string;
+    readonly NOT_SEEN_YET: "not checked yet";
+    readonly COPY_PROMPT: "Copy prompt for your coding agent";
+    readonly SHARE_LABEL: "Share";
+    readonly POST_X: "X";
+    readonly POST_IN: "LinkedIn";
+    readonly REFER: "Invite a friend";
 };
+export declare const CAPABILITY_WORDS: Readonly<Record<string, string>>;
 export declare function compactNumber(n: number): string;
 export declare function compactDuration(ms: number): string;
 export declare function buildShareText(scope: ImpactScope, projectName?: string): string;

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

@@ -14,7 +14,7 @@ export const REPORT_TEXT = {
     GLOBAL: 'All projects',
     GLOBAL_TITLE: 'Every project on this computer',
     SCOPE_LABEL: 'Show impact for',
-    HERO_DEFECTS: 'checks Reticle refused to pass',
+    heroDefects: (n) => `failed check${1 === n ? '' : 's'} caught before you shipped`,
     VERDICTS: 'Verdicts',
     PASSED: 'passed',
     FAILED: 'failed',
@@ -36,17 +36,39 @@ export const REPORT_TEXT = {
     DEFECTS_SEE_ALL_TITLE: 'Sign up free, link this project, and see every bug Reticle caught',
     DEFECT_LINK_TITLE: 'Open on the dashboard to triage or push to GitHub',
     LOCAL_ONLY: 'This record stops at this machine.',
-    LOCAL_ONLY_ACTION: 'reticle login',
+    LOCAL_ONLY_ACTION: 'reticle connect',
     LOCAL_ONLY_TAIL: 'keeps it, and lets a team see it.',
     UNLINKED: 'Signed in, but this repo is not linked.',
-    UNLINKED_ACTION: 'reticle link',
+    UNLINKED_ACTION: 'reticle connect',
     UNLINKED_TAIL: 'sends this record to your workspace.',
     DEFECTS_NONE: 'Nothing has failed a declared consequence yet.',
     EMPTY: 'Nothing recorded yet. Drive the app once and this fills in.',
     SHARE: 'Share',
     COPY: 'Copy',
     COPIED: 'Copied',
-    REFER: 'Send to a friend',
+    SEE_RUN: 'See it in your dashboard',
+    KEY_REFUSED: 'Key refused',
+    NOT_SENT: 'not synced',
+    NOT_SENT_HELP: 'Runs saved on this machine but not on your dashboard yet. Run reticle connect in this project to send them.',
+    INSTRUMENTATION: 'What Reticle can see',
+    INSTRUMENTATION_HELP: 'What Reticle can see in this app, from its handshake and the gaps its verdicts recorded',
+    covered: (covered, total) => `${String(covered)} of ${String(total)}`,
+    NOT_SEEN_YET: 'not checked yet',
+    COPY_PROMPT: 'Copy prompt for your coding agent',
+    SHARE_LABEL: 'Share',
+    POST_X: 'X',
+    POST_IN: 'LinkedIn',
+    REFER: 'Invite a friend',
+};
+export const CAPABILITY_WORDS = {
+    'page connected': 'Page connected',
+    'DOM actions': 'Clicks and typing',
+    network: 'Network requests',
+    console: 'Console errors',
+    'app state (store registered)': 'App state',
+    'signals on mutation': 'Success signals from your code',
+    'file:line source mapping': 'Source file and line',
+    'stable test ids': 'Stable test ids',
 };
 export function compactNumber(n) {
     if (n < 1000)

package/dist/presenter/hud-telemetry.js

@@ -1,9 +1,12 @@
 import { HUD_KEYED_ATTRS, isHudControl } from '@reticlehq/core/hud';
-import { HudPanel, HudToggle, HudView } from '@reticlehq/core';
+import { HudPanel, HudPromptSurface, 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';
 import { CAROUSEL_SLIDE_ATTR } from './carousel/carousel.js';
+import { ACCOUNT_MENU_ATTR, ACCOUNT_SIGNIN_ATTR, TEAM_SAVE_ATTR } from './presenter-account.js';
+import { HARNESS_LINK_ATTR } from './presenter-harness-row.js';
+import { RAIL_SIGNIN_ATTR } from './presenter-frame.js';
 const PREFIX = 'data-reticle-';
 const PAGE_OPEN_ATTR = 'data-reticle-page-open';
 const TOGGLE_ROLES = new Set(['switch', 'checkbox']);
@@ -30,6 +33,14 @@ function controlOf(path) {
     return undefined;
 }
 function viewOf(root) {
+    const page = pageOf(root);
+    if (HudView.BUBBLE === page.view)
+        return page;
+    return null === root.querySelector(`[${ACCOUNT_MENU_ATTR}]:not([hidden])`)
+        ? page
+        : { view: page.view, panel: HudPanel.ACCOUNT };
+}
+function pageOf(root) {
     if ('1' === root.getAttribute(MIN_ATTR))
         return { view: HudView.BUBBLE, panel: HudPanel.NONE };
     if ('1' === root.getAttribute(SETTINGS_ATTR)) {
@@ -43,10 +54,30 @@ function viewOf(root) {
         return { view: HudView.EXPANDED, panel: HudPanel.FLOWS };
     if ('annotations' === page)
         return { view: HudView.EXPANDED, panel: HudPanel.NOTES };
+    if ('harness' === page)
+        return { view: HudView.EXPANDED, panel: HudPanel.HARNESS };
     if ('1' === root.getAttribute(CHAT_ATTR))
         return { view: HudView.EXPANDED, panel: HudPanel.CHAT };
     return { view: HudView.COLLAPSED, panel: HudPanel.NONE };
 }
+const PROMPTS = [
+    {
+        surface: HudPromptSurface.RAIL,
+        selector: `[${RAIL_SIGNIN_ATTR}]`,
+        shown: (at) => HudView.EXPANDED === at.view,
+    },
+    {
+        surface: HudPromptSurface.HARNESS,
+        selector: `[data-reticle-page-panel="harness"] :is([${ACCOUNT_SIGNIN_ATTR}],[${HARNESS_LINK_ATTR}])`,
+        shown: (at) => HudPanel.HARNESS === at.panel,
+    },
+    {
+        surface: HudPromptSurface.HEADER,
+        selector: `[${TEAM_SAVE_ATTR}]`,
+        shown: (at) => HudView.BUBBLE !== at.view,
+    },
+];
+const visible = (el) => null === el.closest('[hidden]');
 export function installHudTelemetry(doc, root, report) {
     const send = (use) => {
         try {
@@ -91,9 +122,27 @@ export function installHudTelemetry(doc, root, report) {
         lastSlide = slide;
         send({ slide });
     };
-    const slides = new MutationObserver(onSlide);
-    slides.observe(root, {
+    const prompted = new Set();
+    const onPrompt = () => {
+        const at = viewOf(root);
+        for (const prompt of PROMPTS) {
+            if (prompted.has(prompt.surface) || !prompt.shown(at))
+                continue;
+            const el = root.querySelector(prompt.selector);
+            if (null === el || !visible(el))
+                continue;
+            prompted.add(prompt.surface);
+            send({ prompt: prompt.surface });
+        }
+    };
+    const inside = new MutationObserver(() => {
+        onSlide();
+        onChange();
+        onPrompt();
+    });
+    inside.observe(root, {
         subtree: true,
+        childList: true,
         attributes: true,
         attributeFilter: ['data-active', 'hidden'],
     });
@@ -102,15 +151,17 @@ export function installHudTelemetry(doc, root, report) {
         onChange();
         if (0 < records.length)
             onSlide();
+        onPrompt();
     });
     observer.observe(root, {
         attributes: true,
         attributeFilter: [MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR, REPORT_ATTR, PAGE_OPEN_ATTR],
     });
     onChange();
+    onPrompt();
     return () => {
         doc.removeEventListener('click', onPress, true);
         observer.disconnect();
-        slides.disconnect();
+        inside.disconnect();
     };
 }

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

@@ -36,7 +36,7 @@ export const ACCOUNT_CSS = `
 .reticle-account-trigger[aria-expanded="true"]{box-shadow:0 0 0 2px rgba(255,255,255,.28);}
 
 .reticle-account-signin{
-  border:none;border-radius:6px;padding:2px 9px;cursor:pointer;font:inherit;font-size:10.5px;
+  border:none;border-radius:6px;padding:2px 9px;cursor:pointer;font:inherit;font-size:11px;
   background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);transition:background .12s,color .12s;}
 .reticle-account-signin:hover{background:rgba(255,255,255,.12);color:#fff;}
 
@@ -64,7 +64,7 @@ export const ACCOUNT_CSS = `
   font-size:11.5px;font-weight:600;color:rgba(255,255,255,.95);
   overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .reticle-account-email{
-  font-size:10.5px;color:rgba(255,255,255,.55);
+  font-size:11px;color:rgba(255,255,255,.55);
   overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 
 .reticle-account-rows{
@@ -90,7 +90,7 @@ export const ACCOUNT_CSS = `
 /* The unlinked hint is a sentence, not a verb: it wraps rather than truncating, because a clipped
    instruction is worse than a tall menu. */
 .reticle-account-action--hint{
-  color:rgba(255,255,255,.5);font-size:10.5px;line-height:1.35;white-space:normal;cursor:pointer;}
+  color:rgba(255,255,255,.5);font-size:11px;line-height:1.35;white-space:normal;cursor:pointer;}
 
 .reticle-account-dashboard{
   display:inline-flex;align-items:center;justify-content:center;

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

@@ -1,14 +1,23 @@
-import type { AccountState } from '@reticlehq/core';
+import { type AccountState, type HarnessConfig } from '@reticlehq/core';
 export declare const ACCOUNT_ROOT_ATTR = "data-reticle-account";
 export declare const ACCOUNT_SIGNIN_ATTR = "data-reticle-account-signin";
 export declare const SYNC_BTN_ATTR = "data-reticle-sync-now";
 export declare const ACCOUNT_TRIGGER_ATTR = "data-reticle-account-trigger";
 export declare const ACCOUNT_MENU_ATTR = "data-reticle-account-menu";
 export declare const ACCOUNT_SIGNOUT_ATTR = "data-reticle-account-signout";
+export declare const TEAM_OPEN_ATTR = "data-reticle-team-open";
+export declare const TEAM_SAVE_ATTR = "data-reticle-team-save";
+export declare const TEAM_SLOT_ATTR = "data-reticle-team";
+export declare const TEAM_TEXT: {
+    readonly OPEN: "Open on dashboard ↗";
+    readonly OPEN_TITLE: "This project's runs, kept for your team on the Reticle dashboard";
+    readonly SAVE_LINK: "Save runs for your team";
+    readonly SAVE_TITLE: `Keep every run, flow and Harness result on a dashboard your team shares. On Reticle, ${string}.`;
+};
 export declare const ACCOUNT_TEXT: {
     readonly SIGNED_OUT: "Sign in";
-    readonly SIGNIN_TITLE: "Sign in through your browser. Also copies `reticle login`, for a terminal";
-    readonly SIGNIN_COMMAND: "reticle login";
+    readonly SIGNIN_TITLE: "Sign in through your browser. Also copies `reticle connect`, for a terminal";
+    readonly SIGNIN_COMMAND: "reticle connect";
     readonly DASHBOARD_TITLE: "Open this project on the dashboard";
     readonly SYNC_TITLE: "Push to the dashboard now, instead of waiting for the next sync";
     readonly COPIED: "Copied";
@@ -17,8 +26,8 @@ export declare const ACCOUNT_TEXT: {
     readonly TRIGGER_TITLE: "Your Reticle account";
     readonly SIGNED_IN_AS: "Signed in";
     readonly DASHBOARD_ACTION: "Open dashboard";
-    readonly LINK_HINT: "Not linked — run `reticle link` to keep a record on the dashboard";
-    readonly LINK_COMMAND: "reticle link";
+    readonly LINK_HINT: "Not linked — run `reticle connect` to keep a record on the dashboard";
+    readonly LINK_COMMAND: "reticle connect";
     readonly SIGNOUT_ACTION: "Copy sign-out command";
     readonly SIGNOUT_TITLE: "Copy `reticle logout` to run in your terminal";
     readonly SIGNOUT_COMMAND: "reticle logout";
@@ -27,15 +36,28 @@ export declare const ACCOUNT_TEXT: {
     readonly HOST_LABEL: "Host";
     readonly VERDICTS_LABEL: "Verdicts";
     readonly DEFECTS_LABEL: "Defects found";
+    readonly PLAN_LABEL: "Plan";
+    readonly CREDITS_LABEL: "Credits";
+    readonly HARNESS_RUNS_LABEL: "Harness runs";
+    readonly MEMORY_LABEL: "Memory";
+    readonly ON_PLATFORM_LABEL: "Runs on dashboard";
 };
 export interface AccountDetails {
     projectName?: string | undefined;
     dashboardUrl?: string | undefined;
     verdicts?: number | undefined;
     defects?: number | undefined;
+    plan?: string | undefined;
+    credits?: string | undefined;
+    harnessRuns?: string | undefined;
+    memory?: string | undefined;
+    onPlatform?: string | undefined;
 }
 export declare function accountInitials(org: string | undefined): string;
 export declare function accountControlHtml(account: AccountState | undefined, details?: AccountDetails, offerSignIn?: boolean): string;
+export declare function platformDetails(config: HarnessConfig | undefined, sync: Readonly<Record<string, unknown>> | undefined): Pick<AccountDetails, 'plan' | 'credits' | 'harnessRuns' | 'memory' | 'onPlatform'>;
+export declare function teamLinkHtml(account: AccountState | undefined, dashboardUrl: string | undefined): string;
+export declare function paintAccountSlot(slot: HTMLElement, html: string): void;
 export declare function accountCapsuleHtml(account: AccountState | undefined, dashboardUrl?: string, offerSignIn?: boolean): string;
 export declare function syncButtonHtml(dashboardUrl: string | undefined): string;
 export declare function mountAccountControl(root: HTMLElement, onSignIn?: () => void): () => void;