@reticlehq/browser 3.5.0 → 3.7.0

package/dist/presenter/hud-telemetry.js

@@ -1,9 +1,14 @@
 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']);
 export function controlIdOf(el) {
     for (const attr of Array.from(el.attributes)) {
@@ -28,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)) {
@@ -36,10 +49,35 @@ function viewOf(root) {
     if ('1' === root.getAttribute(REPORT_ATTR)) {
         return { view: HudView.EXPANDED, panel: HudPanel.REPORT };
     }
+    const page = root.getAttribute(PAGE_OPEN_ATTR);
+    if ('flows' === page)
+        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 {
@@ -73,15 +111,57 @@ export function installHudTelemetry(doc, root, report) {
         last = key;
         send(now);
     };
+    let lastSlide = '';
+    const onSlide = () => {
+        if (HudPanel.CHAT !== viewOf(root).panel)
+            return;
+        const shown = root.querySelector(`[${CAROUSEL_SLIDE_ATTR}]:not([hidden])`);
+        const slide = shown?.getAttribute(CAROUSEL_SLIDE_ATTR) ?? '';
+        if (0 === slide.length || slide === lastSlide)
+            return;
+        lastSlide = slide;
+        send({ slide });
+    };
+    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'],
+    });
     doc.addEventListener('click', onPress, true);
-    const observer = new MutationObserver(onChange);
+    const observer = new MutationObserver((records) => {
+        onChange();
+        if (0 < records.length)
+            onSlide();
+        onPrompt();
+    });
     observer.observe(root, {
         attributes: true,
-        attributeFilter: [MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR, REPORT_ATTR],
+        attributeFilter: [MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR, REPORT_ATTR, PAGE_OPEN_ATTR],
     });
     onChange();
+    onPrompt();
     return () => {
         doc.removeEventListener('click', onPress, true);
         observer.disconnect();
+        inside.disconnect();
     };
 }

package/dist/presenter/icons/presenter-heroicons-data.d.ts

@@ -14,6 +14,7 @@ declare const BODIES: {
     message: string;
     gear: string;
     layout: string;
+    notes: string;
     trash: string;
     help: string;
     'caret-right': string;

package/dist/presenter/icons/presenter-heroicons-data.js

@@ -6,14 +6,15 @@ const BODIES = {
     'caret-down': '<path d="m19 9l-7 7l-7-7"/>',
     check: '<path d="m5 13l4 4L19 7"/>',
     remove: '<path d="m4.5 19.5l15-15m-15 0l15 15"/>',
-    pause: '<path d="M10 9v6m4-6v6m7-3a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/>',
-    play: '<g><path d="m14.752 11.168l-3.197-2.132A1 1 0 0 0 10 9.87v4.263a1 1 0 0 0 1.555.832l3.197-2.132a1 1 0 0 0 0-1.664"/><path d="M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/></g>',
-    stop: '<g><path d="M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/><path d="M9 10a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z"/></g>',
+    pause: '<path d="M8 5v14M16 5v14"/>',
+    play: '<path d="M8 5.75v12.5L18 12 8 5.75Z"/>',
+    stop: '<rect x="6.5" y="6.5" width="11" height="11" rx="2"/>',
     copy: '<path d="M8 7v8a2 2 0 0 0 2 2h6M8 7V5a2 2 0 0 1 2-2h4.586a1 1 0 0 1 .707.293l4.414 4.414a1 1 0 0 1 .293.707V15a2 2 0 0 1-2 2h-2M8 7H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-2"/>',
     download: '<path d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>',
     message: '<path d="M8.625 9.75a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227c1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332a48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/>',
     gear: '<g><path d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87c.074.04.147.083.22.127c.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 0 1 0 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124c.072-.044.146-.087.22-.128c.332-.183.582-.495.644-.869l.214-1.281Z"/><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"/></g>',
     layout: '<path d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6Zm0 9.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6Zm0 9.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/>',
+    notes: '<path d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75a2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15a2.25 2.25 0 0 1 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"/>',
     trash: '<path d="m19 7l-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16"/>',
     help: '<path d="M8.228 9c.549-1.165 2.03-2 3.772-2c2.21 0 4 1.343 4 3c0 1.4-1.278 2.575-3.006 2.907c-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/>',
     'caret-right': '<path d="m9 5l7 7l-7 7"/>',

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

@@ -13,6 +13,7 @@ export declare const PresenterIcon: {
     readonly COPY: "copy";
     readonly DOWNLOAD: "download";
     readonly MESSAGE: "message";
+    readonly NOTES: "notes";
     readonly GEAR: "gear";
     readonly LAYOUT: "layout";
     readonly TRASH: "trash";
@@ -30,6 +31,7 @@ export declare const PRESENTER_ICON_SIZE: {
     readonly SEND: 14;
     readonly MIN: 12;
     readonly HELP: 12;
+    readonly NAV: 18;
     readonly TOOLBAR: 18;
     readonly FAB: 22;
 };

package/dist/presenter/icons/presenter-icons.js

@@ -13,6 +13,7 @@ export const PresenterIcon = {
     COPY: 'copy',
     DOWNLOAD: 'download',
     MESSAGE: 'message',
+    NOTES: 'notes',
     GEAR: 'gear',
     LAYOUT: 'layout',
     TRASH: 'trash',
@@ -29,6 +30,7 @@ export const PRESENTER_ICON_SIZE = {
     SEND: 14,
     MIN: 12,
     HELP: 12,
+    NAV: 18,
     TOOLBAR: 18,
     FAB: 22,
 };

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: "Run `reticle login` in your terminal — click to copy the command";
-    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,24 +26,38 @@ 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 SIGNOUT_ACTION: "Sign out";
-    readonly SIGNOUT_TITLE: "Run `reticle logout` in your terminal — click to copy the command";
+    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";
+    readonly SIGNOUT_COPY_FAILED: "Run reticle logout in terminal";
     readonly PROJECT_LABEL: "Project";
     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): () => void;
+export declare function mountAccountControl(root: HTMLElement, onSignIn?: () => void): () => void;

package/dist/presenter/presenter-account.js

@@ -1,15 +1,27 @@
+import { CreditKind } from '@reticlehq/core';
+import { TRIAL_OFFER } from '@reticlehq/core/hud';
 import { hiIconHtml, PRESENTER_ICON_SIZE, PresenterIcon } from './icons/presenter-icons.js';
 import { esc, isSafeDashboardUrl } from './chrome/presenter-safe-html.js';
+import { morphHtml } from './chrome/presenter-morph.js';
 export const ACCOUNT_ROOT_ATTR = 'data-reticle-account';
 export const ACCOUNT_SIGNIN_ATTR = 'data-reticle-account-signin';
 export const SYNC_BTN_ATTR = 'data-reticle-sync-now';
 export const ACCOUNT_TRIGGER_ATTR = 'data-reticle-account-trigger';
 export const ACCOUNT_MENU_ATTR = 'data-reticle-account-menu';
 export const ACCOUNT_SIGNOUT_ATTR = 'data-reticle-account-signout';
+export const TEAM_OPEN_ATTR = 'data-reticle-team-open';
+export const TEAM_SAVE_ATTR = 'data-reticle-team-save';
+export const TEAM_SLOT_ATTR = 'data-reticle-team';
+export const TEAM_TEXT = {
+    OPEN: 'Open on dashboard ↗',
+    OPEN_TITLE: "This project's runs, kept for your team on the Reticle dashboard",
+    SAVE_LINK: 'Save runs for your team',
+    SAVE_TITLE: `Keep every run, flow and Harness result on a dashboard your team shares. On Reticle, ${TRIAL_OFFER}.`,
+};
 export const ACCOUNT_TEXT = {
     SIGNED_OUT: 'Sign in',
-    SIGNIN_TITLE: 'Run `reticle login` in your terminal — click to copy the command',
-    SIGNIN_COMMAND: 'reticle login',
+    SIGNIN_TITLE: 'Sign in through your browser. Also copies `reticle connect`, for a terminal',
+    SIGNIN_COMMAND: 'reticle connect',
     DASHBOARD_TITLE: 'Open this project on the dashboard',
     SYNC_TITLE: 'Push to the dashboard now, instead of waiting for the next sync',
     COPIED: 'Copied',
@@ -18,15 +30,21 @@ export const ACCOUNT_TEXT = {
     TRIGGER_TITLE: 'Your Reticle account',
     SIGNED_IN_AS: 'Signed in',
     DASHBOARD_ACTION: 'Open dashboard',
-    LINK_HINT: 'Not linked — run `reticle link` to keep a record on the dashboard',
-    LINK_COMMAND: 'reticle link',
-    SIGNOUT_ACTION: 'Sign out',
-    SIGNOUT_TITLE: 'Run `reticle logout` in your terminal — click to copy the command',
+    LINK_HINT: 'Not linked — run `reticle connect` to keep a record on the dashboard',
+    LINK_COMMAND: 'reticle connect',
+    SIGNOUT_ACTION: 'Copy sign-out command',
+    SIGNOUT_TITLE: 'Copy `reticle logout` to run in your terminal',
     SIGNOUT_COMMAND: 'reticle logout',
+    SIGNOUT_COPY_FAILED: 'Run reticle logout in terminal',
     PROJECT_LABEL: 'Project',
     HOST_LABEL: 'Host',
     VERDICTS_LABEL: 'Verdicts',
     DEFECTS_LABEL: 'Defects found',
+    PLAN_LABEL: 'Plan',
+    CREDITS_LABEL: 'Credits',
+    HARNESS_RUNS_LABEL: 'Harness runs',
+    MEMORY_LABEL: 'Memory',
+    ON_PLATFORM_LABEL: 'Runs on dashboard',
 };
 const ACCOUNT_COPIED_MS = 1200;
 export function accountInitials(org) {
@@ -69,12 +87,20 @@ function accountMenuHtml(account, details) {
         `<span class="reticle-account-org">${org.length > 0 ? esc(org) : ACCOUNT_TEXT.SIGNED_IN_AS}</span>` +
         (account.email !== undefined && account.email.length > 0
             ? `<span class="reticle-account-email" title="${esc(account.email)}">${esc(account.email)}</span>`
-            : `<span class="reticle-account-email">${ACCOUNT_TEXT.SIGNED_IN_AS}</span>`) +
+            :
+                org.length > 0
+                    ? `<span class="reticle-account-email">${ACCOUNT_TEXT.SIGNED_IN_AS}</span>`
+                    : '') +
         `</span></div>`;
     const rows = detailRow(ACCOUNT_TEXT.HOST_LABEL, account.host) +
         detailRow(ACCOUNT_TEXT.PROJECT_LABEL, details.projectName) +
         detailRow(ACCOUNT_TEXT.VERDICTS_LABEL, details.verdicts !== undefined ? String(details.verdicts) : undefined) +
-        detailRow(ACCOUNT_TEXT.DEFECTS_LABEL, details.defects !== undefined ? String(details.defects) : undefined);
+        detailRow(ACCOUNT_TEXT.DEFECTS_LABEL, details.defects !== undefined ? String(details.defects) : undefined) +
+        detailRow(ACCOUNT_TEXT.ON_PLATFORM_LABEL, details.onPlatform) +
+        detailRow(ACCOUNT_TEXT.PLAN_LABEL, details.plan) +
+        detailRow(ACCOUNT_TEXT.CREDITS_LABEL, details.credits) +
+        detailRow(ACCOUNT_TEXT.HARNESS_RUNS_LABEL, details.harnessRuns) +
+        detailRow(ACCOUNT_TEXT.MEMORY_LABEL, details.memory);
     const linked = details.dashboardUrl !== undefined && isSafeDashboardUrl(details.dashboardUrl);
     const dashboard = linked
         ? `<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>`
@@ -87,6 +113,58 @@ function accountMenuHtml(account, details) {
         `<div class="reticle-account-actions">${dashboard}${signOut}</div>` +
         `</div>`);
 }
+const PLAN_NAME = {
+    [CreditKind.FREE]: 'Free',
+    [CreditKind.TRIAL]: 'Trial',
+    [CreditKind.PAID]: 'Pro',
+};
+const plural = (n, one, many) => `${String(n)} ${1 === n ? one : many}`;
+export function platformDetails(config, sync) {
+    const plan = config?.plan;
+    const onPlatform = sync?.['onPlatform'];
+    return {
+        ...(plan === undefined
+            ? {}
+            : {
+                plan: [
+                    PLAN_NAME[plan.kind],
+                    plan.daysLeft === undefined ? '' : `${plural(plan.daysLeft, 'day', 'days')} left`,
+                    plan.seats === undefined ? '' : plural(plan.seats, 'seat', 'seats'),
+                ]
+                    .filter((part) => part.length > 0)
+                    .join(' · '),
+            }),
+        ...(config?.credits === undefined
+            ? {}
+            : {
+                credits: `${Math.max(0, config.credits.limit - config.credits.used).toLocaleString('en-US')} of ${config.credits.limit.toLocaleString('en-US')} left`,
+            }),
+        ...(config?.harnessRuns === undefined ? {} : { harnessRuns: String(config.harnessRuns) }),
+        ...(config?.memoryEntries === undefined
+            ? {}
+            : { memory: plural(config.memoryEntries, 'entry', 'entries') }),
+        ...('number' === typeof onPlatform ? { onPlatform: String(onPlatform) } : {}),
+    };
+}
+export function teamLinkHtml(account, dashboardUrl) {
+    if (account === undefined || !account.signedIn)
+        return '';
+    if (dashboardUrl !== undefined && isSafeDashboardUrl(dashboardUrl))
+        return `<a ${TEAM_OPEN_ATTR} class="reticle-team-link" href="${esc(dashboardUrl)}" target="_blank" rel="noreferrer noopener" title="${esc(TEAM_TEXT.OPEN_TITLE)}">${TEAM_TEXT.OPEN}</a>`;
+    return `<button type="button" ${TEAM_SAVE_ATTR} class="reticle-team-link" title="${esc(TEAM_TEXT.SAVE_TITLE)}"><span>${TEAM_TEXT.SAVE_LINK}</span></button>`;
+}
+export function paintAccountSlot(slot, html) {
+    const open = null !== slot.querySelector(`[${ACCOUNT_MENU_ATTR}]:not([hidden])`);
+    morphHtml(slot, html);
+    if (!open)
+        return;
+    const menu = slot.querySelector(`[${ACCOUNT_MENU_ATTR}]`);
+    if (null === menu)
+        return;
+    menu.removeAttribute('hidden');
+    menu.setAttribute('aria-hidden', 'false');
+    slot.querySelector(`[${ACCOUNT_TRIGGER_ATTR}]`)?.setAttribute('aria-expanded', 'true');
+}
 export function accountCapsuleHtml(account, dashboardUrl, offerSignIn = false) {
     return accountControlHtml(account, { dashboardUrl }, offerSignIn);
 }
@@ -95,7 +173,7 @@ export function syncButtonHtml(dashboardUrl) {
         return '';
     return `<button type="button" class="reticle-sync-now" ${SYNC_BTN_ATTR} title="${ACCOUNT_TEXT.SYNC_TITLE}" aria-label="${ACCOUNT_TEXT.SYNC_TITLE}">${hiIconHtml(PresenterIcon.SYNC, PRESENTER_ICON_SIZE.HELP)}</button>`;
 }
-export function mountAccountControl(root) {
+export function mountAccountControl(root, onSignIn) {
     const controller = new AbortController();
     const { signal } = controller;
     const closeAll = (except) => {
@@ -111,14 +189,27 @@ export function mountAccountControl(root) {
             trigger.setAttribute('aria-expanded', 'false');
         }
     };
-    const flashCopied = (el) => {
+    const flashLabel = (el, value) => {
         const label = el.querySelector('span') ?? el;
         const previous = label.textContent;
-        label.textContent = ACCOUNT_TEXT.COPIED;
+        label.textContent = value;
         setTimeout(() => {
             label.textContent = previous;
         }, ACCOUNT_COPIED_MS);
     };
+    const copyCommand = async (command, el) => {
+        try {
+            if (navigator.clipboard === undefined)
+                throw new Error('Clipboard unavailable');
+            await navigator.clipboard.writeText(command);
+            flashLabel(el, ACCOUNT_TEXT.COPIED);
+        }
+        catch {
+            flashLabel(el, command === ACCOUNT_TEXT.SIGNOUT_COMMAND
+                ? ACCOUNT_TEXT.SIGNOUT_COPY_FAILED
+                : `Run ${command} in terminal`);
+        }
+    };
     root.addEventListener('click', (event) => {
         const target = event.target;
         if (!(target instanceof Element))
@@ -145,16 +236,15 @@ export function mountAccountControl(root) {
             event.stopPropagation();
             const command = copier.getAttribute('data-reticle-copy') ?? '';
             if (command.length > 0)
-                void navigator.clipboard?.writeText(command).catch(() => undefined);
-            flashCopied(copier);
+                void copyCommand(command, copier);
             return;
         }
         const signin = target.closest(`[${ACCOUNT_SIGNIN_ATTR}]`);
         if (signin instanceof HTMLElement) {
             event.preventDefault();
             event.stopPropagation();
-            void navigator.clipboard?.writeText(ACCOUNT_TEXT.SIGNIN_COMMAND).catch(() => undefined);
-            flashCopied(signin);
+            onSignIn?.();
+            void copyCommand(ACCOUNT_TEXT.SIGNIN_COMMAND, signin);
             return;
         }
         closeAll();

package/dist/presenter/presenter-agent-link.d.ts

@@ -0,0 +1,9 @@
+import { type AgentLink } from '@reticlehq/core';
+export declare const AGENT_LINK_HTML: string;
+export declare const AGENT_LINK_CSS = "\n[data-reticle-chat-panel] .reticle-agent-spot{flex:none;display:flex;flex-direction:column;gap:3px;}\n[data-reticle-chat-panel] .reticle-agent-spot[hidden]{display:none;}\n[data-reticle-chat-panel] .reticle-agent-row{display:flex;align-items:center;gap:8px;min-width:0;min-height:30px;padding:0 var(--reticle-hud-space-2);}\n[data-reticle-chat-panel] .reticle-agent-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--reticle-hud-text-faint);}\n[data-reticle-chat-panel] .reticle-agent-row[data-connected=\"1\"] .reticle-agent-dot{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.15);}\n[data-reticle-chat-panel] .reticle-agent-said{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text-muted);}\n[data-reticle-chat-panel] .reticle-agent-copy:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:0;}\n[data-reticle-chat-panel] .reticle-agent-copy{flex:none;height:22px;padding:0 9px;border:1px solid var(--reticle-hud-border-strong);border-radius:11px;background:transparent;color:var(--reticle-hud-text);font:inherit;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;}\n[data-reticle-chat-panel] .reticle-agent-copy:hover{border-color:var(--reticle-hud-brand);color:var(--reticle-hud-brand);}\n[data-reticle-chat-panel] .reticle-agent-copy[hidden]{display:none;}\n";
+export declare class AgentLinkView {
+    #private;
+    mount(root: HTMLElement, signal: AbortSignal): void;
+    teardown(): void;
+    paint(link: AgentLink | undefined): void;
+}

package/dist/presenter/presenter-agent-link.js

@@ -0,0 +1,62 @@
+import {} from '@reticlehq/core';
+import { REPORT_TEXT } from './chrome/presenter-report-copy.js';
+const COPIED_FLASH_MS = 1600;
+const TEXT = {
+    NONE: 'No coding agent connected',
+    named: (names) => `${names} connected`,
+    COPY: 'Copy prompt',
+    prompt: (url) => `Use Reticle to check ${url} in my running app, then tell me the verdict.`,
+};
+export const AGENT_LINK_HTML = `<div data-reticle-agent-spot class="reticle-agent-spot" hidden>
+  <div class="reticle-agent-row"><span data-reticle-agent-dot class="reticle-agent-dot" aria-hidden="true"></span><span data-reticle-agent-said class="reticle-agent-said">${TEXT.NONE}</span><button type="button" data-reticle-agent-copy class="reticle-agent-copy" aria-label="${REPORT_TEXT.COPY_PROMPT}" title="${REPORT_TEXT.COPY_PROMPT}">${TEXT.COPY}</button></div>
+</div>`;
+export const AGENT_LINK_CSS = `
+[data-reticle-chat-panel] .reticle-agent-spot{flex:none;display:flex;flex-direction:column;gap:3px;}
+[data-reticle-chat-panel] .reticle-agent-spot[hidden]{display:none;}
+[data-reticle-chat-panel] .reticle-agent-row{display:flex;align-items:center;gap:8px;min-width:0;min-height:30px;padding:0 var(--reticle-hud-space-2);}
+[data-reticle-chat-panel] .reticle-agent-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--reticle-hud-text-faint);}
+[data-reticle-chat-panel] .reticle-agent-row[data-connected="1"] .reticle-agent-dot{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.15);}
+[data-reticle-chat-panel] .reticle-agent-said{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--reticle-hud-size-sm);color:var(--reticle-hud-text-muted);}
+[data-reticle-chat-panel] .reticle-agent-copy:focus-visible{outline:2px solid var(--reticle-hud-brand);outline-offset:0;}
+[data-reticle-chat-panel] .reticle-agent-copy{flex:none;height:22px;padding:0 9px;border:1px solid var(--reticle-hud-border-strong);border-radius:11px;background:transparent;color:var(--reticle-hud-text);font:inherit;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;}
+[data-reticle-chat-panel] .reticle-agent-copy:hover{border-color:var(--reticle-hud-brand);color:var(--reticle-hud-brand);}
+[data-reticle-chat-panel] .reticle-agent-copy[hidden]{display:none;}
+`;
+export class AgentLinkView {
+    #root;
+    mount(root, signal) {
+        this.#root = root;
+        root.querySelector('[data-reticle-agent-copy]')?.addEventListener('click', (event) => {
+            const button = event.currentTarget;
+            void navigator.clipboard
+                ?.writeText(TEXT.prompt(location.href))
+                .catch(() => undefined)
+                .finally(() => {
+                if (!(button instanceof HTMLElement))
+                    return;
+                button.textContent = REPORT_TEXT.COPIED;
+                window.setTimeout(() => (button.textContent = REPORT_TEXT.COPY_PROMPT), COPIED_FLASH_MS);
+            });
+        }, { signal });
+    }
+    teardown() {
+        this.#root = undefined;
+    }
+    paint(link) {
+        const root = this.#root;
+        const spot = root?.querySelector('[data-reticle-agent-spot]');
+        if (root === undefined || null === spot || spot === undefined)
+            return;
+        spot.hidden = link === undefined;
+        if (link === undefined)
+            return;
+        const connected = 0 < link.agents.length;
+        spot.querySelector('.reticle-agent-row')?.setAttribute('data-connected', connected ? '1' : '0');
+        const said = spot.querySelector('[data-reticle-agent-said]');
+        if (said !== null)
+            said.textContent = connected ? TEXT.named(link.agents.join(', ')) : TEXT.NONE;
+        const copy = spot.querySelector('[data-reticle-agent-copy]');
+        if (copy !== null)
+            copy.hidden = connected;
+    }
+}

package/dist/presenter/presenter-chat-views.d.ts

@@ -0,0 +1,43 @@
+import { type AccountState, type HarnessConfig, type AgentLink, type HarnessDrive } from '@reticlehq/core';
+import type { AnnotationItem } from '../review/annotator.js';
+import { type HarnessGateView } from './presenter-harness-row.js';
+export type ChatView = 'activity' | 'flows' | 'annotations' | 'harness';
+export declare function platformBase(config: HarnessConfig | undefined, account: AccountState): string;
+export interface HudDriveHost {
+    run(persona?: string): void;
+    stop(): void;
+    setHarness(on: boolean): void;
+    link(): void;
+}
+export declare const CHAT_VIEWS_HTML: string;
+export declare const FLOWS_PAGE_HTML: string;
+export declare const NAV_LABEL: {
+    readonly LOG: "Log";
+    readonly FLOWS: "Flows";
+    readonly NOTES: "Notes";
+    readonly IMPACT: "Impact";
+    readonly HARNESS: "Harness";
+    readonly SETTINGS: "Settings";
+    readonly HIDE: "Hide";
+};
+export declare const navLabelHtml: (text: string) => string;
+export declare const CHAT_VIEWS_NAV_HTML: string;
+export declare const HARNESS_PAGE_HTML: string;
+export declare const ANNOTATIONS_HTML: string;
+export declare const CHAT_VIEWS_CSS: string;
+export declare class ChatViews {
+    #private;
+    constructor(onImpact: () => void, onOpenChat: (view: ChatView) => void, drive?: HudDriveHost);
+    mount(root: HTMLElement): void;
+    teardown(): void;
+    open(view: ChatView): void;
+    closePage(): void;
+    setProjectId(projectId: string | undefined): void;
+    paintAgent(link: AgentLink | undefined): void;
+    paintAccount(account: AccountState | undefined): void;
+    paintDrive(drive: HarnessDrive | undefined): void;
+    paintHarness(config: HarnessConfig | undefined, gate?: HarnessGateView): void;
+    paintImpact(verdicts: number): void;
+    setImpactOpen(open: boolean): void;
+    paintAnnotations(items: readonly AnnotationItem[]): void;
+}