@reticlehq/browser 3.6.0 → 3.8.0

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,17 +35,25 @@ 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 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 function compactNumber(n: number): string;
 export declare function compactDuration(ms: number): 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,25 @@ 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.',
+    COPY_PROMPT: 'Copy prompt for your coding agent',
+    SHARE_LABEL: 'Share',
+    POST_X: 'X',
+    POST_IN: 'LinkedIn',
+    REFER: 'Invite a friend',
 };
 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) => HudPanel.CHAT === at.panel,
+    },
+    {
+        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;

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: 'Sign in through your browser. Also copies `reticle login`, for a terminal',
-    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,8 +30,8 @@ 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',
+    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',
@@ -28,6 +40,11 @@ export const ACCOUNT_TEXT = {
     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) {
@@ -70,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>`
@@ -88,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);
 }

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

@@ -1,21 +1,42 @@
-import { type AccountState, type HarnessConfig } from '@reticlehq/core';
+import { type AccountState, type HarnessConfig, type AgentLink, type HarnessDrive, type LastDrive } from '@reticlehq/core';
 import type { AnnotationItem } from '../review/annotator.js';
-export type ChatView = 'activity' | 'flows' | 'annotations';
+export type ChatView = 'activity' | 'flows' | 'annotations' | 'harness';
 export declare function platformBase(config: HarnessConfig | undefined, account: AccountState): string;
-export declare const CHAT_VIEWS_HTML = "\n  <div data-reticle-harness-spot class=\"reticle-harness-spot\" hidden></div>";
+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(onHarness: (enabled: boolean) => void, onImpact: () => void, onOpenChat: (view: ChatView) => void);
+    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, last?: LastDrive): void;
     paintHarness(config: HarnessConfig | undefined): void;
     paintImpact(verdicts: number): void;
+    setImpactOpen(open: boolean): void;
     paintAnnotations(items: readonly AnnotationItem[]): void;
 }