@reticlehq/browser 3.6.0 → 3.7.0

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,43 @@
-import { type AccountState, type HarnessConfig } from '@reticlehq/core';
+import { type AccountState, type HarnessConfig, type AgentLink, type HarnessDrive } from '@reticlehq/core';
 import type { AnnotationItem } from '../review/annotator.js';
-export type ChatView = 'activity' | 'flows' | 'annotations';
+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 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;
-    paintHarness(config: HarnessConfig | 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;
 }