@reticlehq/browser 3.6.0 → 3.8.0

package/dist/presenter/presenter.js

@@ -1,11 +1,13 @@
-import { ActionType, HudCorner, HudVisibility, HumanControlKind, ReticleCommand, PresenterMode, SessionState, isPresenterTone, isSessionState, } from '@reticlehq/core';
+import { ActionType, HudCorner, HudVisibility, HUD_RELOAD_TO_RESTORE, HumanControlKind, ReticleCommand, PresenterMode, SessionState, isPresenterTone, isSessionState, } from '@reticlehq/core';
 import { refs } from '../dom/addressing/refs.js';
-import { unreachableStripText } from '../transport/unreachable-message.js';
+import { UNREACHABLE_HEADLINE, unreachableMessage } from '../transport/unreachable-message.js';
 import { actionVerb } from './chrome/presenter-verbs.js';
 import { nativeSetTimeout, nativeClearTimeout, nativeNow } from '../timers/native/native-timers.js';
-import { LOG_KIND, CHIP_LABEL, DATA_RETICLE_LOG, clampLogMax, formatElapsed, humanDuration, appendLogRow, clearLogRows, trimLogRows, } from './chrome/presenter-log.js';
+import { LOG_KIND, CHIP_LABEL, LOG_ACTOR, DATA_RETICLE_LOG, clampLogMax, formatElapsed, humanDuration, appendLogRow, clearLogRows, trimLogRows, } from './chrome/presenter-log.js';
 import { PRESENTER_CSS } from './presenter-styles.js';
 import { HudShell } from './presenter-shell.js';
+import { HARNESS_LOG_ATTR } from './presenter-harness-row.js';
+import { platformDetails } from './presenter-account.js';
 import { parseImpactSnapshot } from './chrome/presenter-report-copy.js';
 import { scheduleSyncDockLayout } from './presenter-dock-layout.js';
 import { applyHudPosition, clampHudPosition, hudLayoutBox, resetHudDockPosition, } from './presenter-hud-position.js';
@@ -15,12 +17,12 @@ import { moveCursor, ringAround, spawnRipple, pace } from './chrome/presenter-ef
 import { GlowController } from './presenter-glow.js';
 import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon } from './icons/presenter-icons.js';
 import { renderTally } from './chrome/presenter-tally.js';
-import { CONTROLS_BANNER_HTML, CONTROLS_FLOWS_HTML, CONTROLS_MARKS_HTML, CONTROLS_FOOT_HTML, CONTROLS_STATUS_HTML, ENDED_FADE_MS, ControlPanel, } from './presenter-controls.js';
-import { statusTheme, blockerHtml, getPresenterSettings, OutputDetail, syncPageBlocker, } from './presenter-settings.js';
+import { CONTROLS_BANNER_HTML, CONTROLS_MARKS_HTML, CONTROLS_FOOT_HTML, CONTROLS_STATUS_HTML, ENDED_FADE_MS, ControlPanel, } from './presenter-controls.js';
+import { statusTheme, blockerHtml, getPresenterSettings, OutputDetail, syncPageBlocker, paintSdkVersion, } from './presenter-settings.js';
 import { Annotator } from '../review/annotator.js';
-import { shouldAutoOpenChat } from './presenter-shell.js';
+import { shouldAutoOpenChat, shouldReopenPanel } from './presenter-shell.js';
 import { installHudTelemetry } from './hud-telemetry.js';
-import { PLAN_HTML, PlanBoard, parsePlanView } from './presenter-plan.js';
+import { PlanBoard, parsePlanView } from './presenter-plan.js';
 import { claimLog, readRememberedLog, rememberLog, } from './chrome/log-memory.js';
 const COPIED_FLASH_MS = 1600;
 export { GlowPhase } from './presenter-config.js';
@@ -46,6 +48,7 @@ export class Presenter {
     #borderMode;
     #glowCtl;
     #lastActionText = '';
+    #lastActor;
     #heartbeatTimer;
     #idleEndMs;
     #sessionId;
@@ -53,8 +56,12 @@ export class Presenter {
     #endMs;
     #runLog = [];
     #sessionActive = false;
+    #agentOpened = false;
     #logMax;
     #log;
+    #harnessLog;
+    #harnessRunId;
+    #harnessSteps;
     #plan = new PlanBoard();
     #remembered = [];
     #logBaseMs;
@@ -64,6 +71,7 @@ export class Presenter {
     #panel;
     #shell;
     #annotator;
+    #removed = false;
     constructor(options = {}) {
         this.#paceMs = effectivePaceMs(options.paceMs);
         this.#now = options.now ?? nativeNow;
@@ -100,6 +108,12 @@ export class Presenter {
             onSyncNow: () => this.#onControl?.({ kind: HumanControlKind.SYNC }),
             onSignIn: () => this.#onControl?.({ kind: HumanControlKind.SIGNIN }),
             onHarness: (enabled) => this.#onControl?.({ kind: HumanControlKind.HARNESS, text: enabled ? 'on' : 'off' }),
+            onHarnessRun: (persona) => this.#onControl?.({
+                kind: HumanControlKind.HARNESS_RUN,
+                ...(persona === undefined ? {} : { text: persona }),
+            }),
+            onHarnessStop: () => this.#onControl?.({ kind: HumanControlKind.HARNESS_STOP }),
+            onHarnessLink: () => this.#onControl?.({ kind: HumanControlKind.HARNESS_LINK }),
             settings: {
                 onBeforeOpen: () => {
                     if (this.#shell.isCollapsed())
@@ -111,6 +125,7 @@ export class Presenter {
                 onHarness: (enabled) => this.#onControl?.({ kind: HumanControlKind.HARNESS, text: enabled ? 'on' : 'off' }),
             },
         });
+        this.#shell.setProjectId(options.projectId);
     }
     setControlHandler(handler) {
         this.#onControl = handler;
@@ -127,6 +142,10 @@ export class Presenter {
     refilterFlows() {
         this.#panel.refilterFlows();
     }
+    showSdkVersion(version) {
+        if (this.#root !== undefined)
+            paintSdkVersion(this.#root, version);
+    }
     handlePush(command) {
         const a = command.args;
         if (command.name === ReticleCommand.FLOWS)
@@ -143,8 +162,11 @@ export class Presenter {
             const snapshot = parseImpactSnapshot(a['snapshot']);
             if (snapshot !== undefined) {
                 this.#shell.report.setSnapshot(snapshot);
-                this.#shell.paintOffer(snapshot.harnessOffer, snapshot.notices);
+                this.#shell.paintNotices(snapshot.notices);
                 this.#shell.paintHarness(snapshot.harnessConfig);
+                this.#shell.paintHarnessDrive(snapshot.harnessDrive, snapshot.lastDrive);
+                this.#paintHarnessRun(snapshot.harnessDrive);
+                this.#shell.paintAgent(snapshot.agent);
                 this.#shell.paintImpact(snapshot.project.counts.verdicts);
                 const owner = true === snapshot.account?.signedIn ? snapshot.account.email : undefined;
                 if (claimLog(owner))
@@ -154,6 +176,7 @@ export class Presenter {
                     dashboardUrl: snapshot.dashboardUrl,
                     verdicts: snapshot.project.counts.verdicts,
                     defects: snapshot.project.counts.failed,
+                    ...platformDetails(snapshot.harnessConfig, snapshot.sync),
                 });
             }
             return;
@@ -180,13 +203,13 @@ export class Presenter {
         document.head.appendChild(style);
         const root = document.createElement('div');
         root.setAttribute('data-reticle-overlay', '');
-        const actStrip = `<div class="reticle-act-strip" data-liveness="idle"><span class="reticle-act-dot" aria-hidden="true"></span><span class="reticle-act">${ACT_STRIP.READY}</span>${CONTROLS_BANNER_HTML}<span class="reticle-chip" data-reticle-chip></span><div class="reticle-act-actions">${CONTROLS_STATUS_HTML}</div></div>`;
+        const actStrip = `<div class="reticle-act-strip" data-liveness="idle"><span class="reticle-act-dot" aria-hidden="true"></span><span class="reticle-act" data-reticle-act-line>${ACT_STRIP.READY}</span>${CONTROLS_BANNER_HTML}<span class="reticle-chip" data-reticle-chip></span><div class="reticle-act-actions">${CONTROLS_STATUS_HTML}</div></div>`;
         root.innerHTML = `
       ${blockerHtml()}
       <div data-reticle-glow></div>
       <div data-reticle-cursor></div>
       <div data-reticle-ring></div>
-      ${HudShell.dockHtml(actStrip, PLAN_HTML, DATA_RETICLE_LOG, CONTROLS_MARKS_HTML + CONTROLS_FLOWS_HTML, CONTROLS_FOOT_HTML)}`;
+      ${HudShell.dockHtml(actStrip, '', DATA_RETICLE_LOG, CONTROLS_MARKS_HTML, CONTROLS_FOOT_HTML)}`;
         document.body.appendChild(root);
         this.#root = root;
         this.#glow = root.querySelector('[data-reticle-glow]') ?? undefined;
@@ -200,6 +223,7 @@ export class Presenter {
         this.#chatPillTime =
             root.querySelector('[data-reticle-chat-pill-time]') ?? undefined;
         this.#log = root.querySelector(`[${DATA_RETICLE_LOG}]`) ?? undefined;
+        this.#harnessLog = root.querySelector(`[${HARNESS_LOG_ATTR}]`) ?? undefined;
         this.#chip = root.querySelector('[data-reticle-chip]') ?? undefined;
         this.#tally = root.querySelector('[data-reticle-tally]') ?? undefined;
         this.#shell.mount(root);
@@ -215,13 +239,14 @@ export class Presenter {
         this.#renderTally();
     }
     #restoreLog() {
-        const log = this.#log;
-        if (log === undefined || 0 < this.#remembered.length)
+        if (this.#log === undefined || 0 < this.#remembered.length)
             return;
         for (const row of readRememberedLog().slice(-this.#logMax)) {
-            const handle = appendLogRow(log, row.kind, row.text, row.ts, this.#logMax, row.actor);
-            if (row.result !== undefined)
-                handle.result(row.result);
+            for (const log of this.#logsFor(row.actor, true === row.summary)) {
+                const handle = appendLogRow(log, row.kind, row.text, row.ts, this.#logMax, row.actor);
+                if (row.result !== undefined)
+                    handle.result(row.result);
+            }
             this.#logBaseMs = this.#now() - row.at;
             this.#runLog.push({
                 at: row.at,
@@ -295,6 +320,7 @@ export class Presenter {
         this.#sessionActive = false;
         this.#logBaseMs = undefined;
         this.#log = undefined;
+        this.#harnessLog = undefined;
         this.#remembered = [];
         rememberLog([]);
         this.#root?.remove();
@@ -316,7 +342,7 @@ export class Presenter {
         this.#showSession();
         this.#glowCtl.resetActivity(this.#now());
         this.#startHeartbeat();
-        if (shouldAutoOpenChat(getPresenterSettings().autoOpenChat)) {
+        if (shouldReopenPanel()) {
             this.#shell.openChat();
         }
     }
@@ -327,10 +353,12 @@ export class Presenter {
         const dock = this.#root?.querySelector('[data-reticle-dock]');
         dock?.setAttribute(DATA_ON, GLOW_ON);
         this.#hud?.setAttribute(DATA_ON, GLOW_ON);
-        this.#lastActionText = unreachableStripText(url, attempts);
+        this.#lastActionText = UNREACHABLE_HEADLINE;
         this.#paintActStrip(this.#lastActionText, true);
-        if (shouldAutoOpenChat(getPresenterSettings().autoOpenChat))
+        this.#actLine?.setAttribute('title', unreachableMessage(url, attempts));
+        if (shouldReopenPanel()) {
             this.#shell.openChat();
+        }
     }
     #showSession() {
         const dock = this.#root?.querySelector('[data-reticle-dock]');
@@ -406,9 +434,29 @@ export class Presenter {
         this.#lastActionText = text;
         this.#paintActStrip(text, false);
     }
-    #paintActStrip(text, idle) {
-        if (this.#actLine !== undefined)
+    #paintHarnessRun(drive) {
+        const log = this.#harnessLog;
+        if (drive !== undefined && drive.runId !== this.#harnessRunId) {
+            this.#harnessRunId = drive.runId;
+            if (log !== undefined)
+                clearLogRows(log);
+        }
+        if (log !== undefined && 0 === log.childElementCount)
+            for (const line of drive?.lines ?? [])
+                appendLogRow(log, LOG_KIND.NARRATION, line, '', this.#logMax, LOG_ACTOR.HARNESS);
+        const was = this.#harnessSteps;
+        this.#harnessSteps = drive?.steps;
+        if (drive !== undefined)
+            this.#paintActStrip(this.#lastActionText, false);
+        else if (was !== undefined)
+            this.#paintActStrip(ACT_STRIP.READY, true);
+    }
+    #paintActStrip(raw, idle) {
+        const text = this.#harnessSteps === undefined ? raw : ACT_STRIP.harnessTesting(this.#harnessSteps);
+        if (this.#actLine !== undefined) {
             this.#actLine.textContent = text;
+            this.#actLine.removeAttribute('title');
+        }
         const liveness = idle ? 'idle' : 'active';
         if (this.#actStrip !== undefined)
             this.#actStrip.setAttribute('data-liveness', liveness);
@@ -444,6 +492,12 @@ export class Presenter {
             return;
         if ('' === this.#lastActionText)
             return;
+        if (this.#harnessSteps !== undefined)
+            return;
+        if (LOG_ACTOR.HARNESS === this.#lastActor) {
+            this.#paintActStrip(ACT_STRIP.READY, true);
+            return;
+        }
         const since = ACT_STRIP.SINCE_LAST;
         this.#paintActStrip(`${ACT_STRIP.PLANNING_PREFIX}${humanDuration(idleMs)}${since}`, true);
         if (this.#chatPillTime !== undefined)
@@ -460,10 +514,14 @@ export class Presenter {
     }
     placeHud(visibility, corner) {
         const root = this.#root;
-        if (root === undefined)
+        if (root === undefined) {
+            if (this.#removed)
+                return [HUD_RELOAD_TO_RESTORE];
             return [];
+        }
         const applied = [];
         if (HudVisibility.REMOVED === visibility) {
+            this.#removed = true;
             this.destroy();
             return [visibility];
         }
@@ -526,6 +584,8 @@ export class Presenter {
         this.#tallied = { passes: 0, fails: 0 };
         if (this.#log !== undefined)
             clearLogRows(this.#log);
+        if (this.#harnessLog !== undefined)
+            clearLogRows(this.#harnessLog);
         this.#renderTally();
     }
     #applyHideUntilRestart() {
@@ -542,9 +602,17 @@ export class Presenter {
         }
         this.#syncAnnotator();
     }
-    log(kind, text, result, actor) {
+    #logsFor(actor, summary) {
+        const agent = this.#log;
+        const harness = this.#harnessLog;
+        if (LOG_ACTOR.HARNESS !== actor || harness === undefined)
+            return agent === undefined ? [] : [agent];
+        return summary && agent !== undefined ? [agent, harness] : [harness];
+    }
+    log(kind, text, result, actor, summary = false) {
         const ms = this.#now();
         this.#glowCtl.markActivity(ms);
+        this.#lastActor = actor;
         if (this.#log === undefined)
             return undefined;
         const trimmed = text.trim();
@@ -558,7 +626,8 @@ export class Presenter {
         while (this.#runLog.length > this.#logMax)
             this.#runLog.shift();
         const ts = formatElapsed(ms - this.#logBaseMs);
-        const handle = appendLogRow(this.#log, kind, trimmed, ts, this.#logMax, actor);
+        const handles = this.#logsFor(actor, summary).map((log) => appendLogRow(log, kind, trimmed, ts, this.#logMax, actor));
+        const handle = { result: (r) => handles.forEach((h) => h.result(r)) };
         if (result !== undefined)
             handle.result(result);
         const kept = {
@@ -567,12 +636,14 @@ export class Presenter {
             ts,
             at: ms - this.#logBaseMs,
             ...(actor === undefined ? {} : { actor }),
+            ...(summary ? { summary: true } : {}),
             ...(result === undefined ? {} : { result }),
         };
         this.#remembered.push(kept);
         while (this.#remembered.length > this.#logMax)
             this.#remembered.shift();
         rememberLog(this.#remembered);
+        this.#openForAgent(kind);
         if (this.#shell.isCollapsed())
             this.#shell.pulseFab(true);
         this.#renderTally();
@@ -586,6 +657,15 @@ export class Presenter {
             },
         };
     }
+    #openForAgent(kind) {
+        if (this.#agentOpened || LOG_KIND.HUMAN === kind) {
+            return;
+        }
+        this.#agentOpened = true;
+        if (shouldAutoOpenChat(getPresenterSettings().autoOpenChat)) {
+            this.#shell.openChat();
+        }
+    }
     #renderTally() {
         if (!getPresenterSettings().showTally) {
             this.#tally?.setAttribute('hidden', '');
@@ -593,14 +673,16 @@ export class Presenter {
         }
         this.#tallied = renderTally(this.#tally, this.#runLog, this.#tallied);
     }
-    narrate(text, level = 'info') {
+    narrate(text, level = 'info', actor = LOG_ACTOR.AGENT, summary = false) {
         const line = 'info' === level ? text : `[${level}] ${text}`;
-        return this.log(LOG_KIND.NARRATION, line);
+        return this.log(LOG_KIND.NARRATION, line, undefined, actor, summary);
     }
     #pruneLog() {
         if (this.#log === undefined)
             return;
         trimLogRows(this.#log, this.#logMax);
+        if (this.#harnessLog !== undefined)
+            trimLogRows(this.#harnessLog, this.#logMax);
     }
     setThrottled(throttled) {
         this.#root?.setAttribute(THROTTLED_ATTR, throttled ? '1' : '0');

package/dist/registry/declared-platform.js

@@ -25,11 +25,13 @@ export const SERVED_COMMANDS = [
     ReticleCommand.PRESENTER,
     ReticleCommand.IMPACT,
     ReticleCommand.CAPTURE,
+    ReticleCommand.RENDER,
     ReticleCommand.NAVIGATE,
     ReticleCommand.REFRESH,
     ReticleCommand.FLOWS,
     ReticleCommand.FLOW_PROGRESS,
     ReticleCommand.PLAN,
+    ReticleCommand.MARKERS,
 ];
 export function declaredCommands() {
     return [...SERVED_COMMANDS];

package/dist/registry/store-adapters.d.ts

@@ -9,6 +9,7 @@ interface QueryLike {
             message?: string;
         } | null;
         data?: unknown;
+        isInvalidated?: boolean;
     };
     isStale?: () => boolean;
 }
@@ -23,16 +24,18 @@ export interface QuerySnapshot {
     status: string;
     fetchStatus: string | undefined;
     isStale: boolean | undefined;
+    isInvalidated: boolean | undefined;
     dataUpdatedAt: number | undefined;
     error: string | null;
     data: unknown;
 }
 export declare function tanstackQueryStore(client: QueryClientLike): StoreLike;
+type Deferred<T> = [T][T extends unknown ? 0 : never];
 interface JotaiStoreLike<A> {
     get: (atom: A) => unknown;
     sub: (atom: A, listener: () => void) => () => void;
 }
-export declare function jotaiStore<A>(store: JotaiStoreLike<A>, atoms: Record<string, A>): StoreLike;
+export declare function jotaiStore<A>(store: JotaiStoreLike<A>, atoms: Record<string, Deferred<A>>): StoreLike;
 interface ActorLike {
     getSnapshot: () => unknown;
     subscribe: (listener: () => void) => {
@@ -54,7 +57,7 @@ export interface RecoilAtomSnapshot {
     value: unknown;
     error: string | null;
 }
-export declare function recoilStore<A>(atoms: Record<string, A>, snapshot: () => RecoilSnapshotLike<A>, subscribe: StoreSubscribe): StoreLike;
+export declare function recoilStore<A>(atoms: Record<string, Deferred<A>>, snapshot: () => RecoilSnapshotLike<A>, subscribe: StoreSubscribe): StoreLike;
 interface SvelteReadable {
     subscribe: (run: (value: unknown) => void) => (() => void) | {
         unsubscribe: () => void;

package/dist/registry/store-adapters.js

@@ -9,37 +9,63 @@ function snapshotLive(value) {
     }
 }
 function copyPlain(value, seen) {
-    if ('object' !== typeof value || null === value)
+    if ('object' !== typeof value || null === value) {
         return value;
+    }
     const done = seen.get(value);
-    if (done !== undefined)
+    if (done !== undefined) {
         return done;
+    }
     if (Array.isArray(value)) {
         const out = [];
         seen.set(value, out);
-        for (const item of value)
+        for (const item of value) {
             out.push(copyPlain(item, seen));
+        }
         return out;
     }
     const proto = Object.getPrototypeOf(value);
-    if (proto !== Object.prototype && proto !== null)
+    if (proto !== Object.prototype && proto !== null) {
         return value;
+    }
     const out = {};
     seen.set(value, out);
-    for (const [key, item] of Object.entries(value))
+    for (const [key, item] of Object.entries(value)) {
         out[key] = copyPlain(item, seen);
+    }
     return out;
 }
+function queryKeyPart(part) {
+    if ('object' !== typeof part || null === part) {
+        return String(part);
+    }
+    return JSON.stringify(part, (_key, value) => {
+        if ('object' !== typeof value || null === value || Array.isArray(value)) {
+            return value;
+        }
+        const proto = Object.getPrototypeOf(value);
+        if (proto !== Object.prototype && proto !== null) {
+            return value;
+        }
+        const plain = value;
+        const sorted = {};
+        for (const key of Object.keys(plain).sort()) {
+            sorted[key] = plain[key];
+        }
+        return sorted;
+    });
+}
 export function tanstackQueryStore(client) {
     const store = {
         getState: () => {
             const out = {};
             for (const query of client.getQueryCache().getAll()) {
-                const key = query.queryKey.map((part) => String(part)).join('/');
+                const key = query.queryKey.map(queryKeyPart).join('/');
                 out[key] = {
                     status: query.state.status,
                     fetchStatus: query.state.fetchStatus,
                     isStale: query.isStale?.(),
+                    isInvalidated: query.state.isInvalidated,
                     dataUpdatedAt: query.state.dataUpdatedAt,
                     error: query.state.error?.message ?? null,
                     data: query.state.data,
@@ -56,15 +82,17 @@ export function jotaiStore(store, atoms) {
     return {
         getState: () => {
             const out = {};
-            for (const [name, atom] of Object.entries(atoms))
+            for (const [name, atom] of Object.entries(atoms)) {
                 out[name] = store.get(atom);
+            }
             return out;
         },
         subscribe: (listener) => {
             const unsubs = Object.values(atoms).map((atom) => store.sub(atom, listener));
             return () => {
-                for (const unsub of unsubs)
+                for (const unsub of unsubs) {
                     unsub();
+                }
             };
         },
     };
@@ -151,8 +179,9 @@ export function svelteStore(readable, warn = nativeWarn) {
         subscribe: (listener) => {
             let inSubscribeCall = true;
             const handle = readable.subscribe(() => {
-                if (!inSubscribeCall)
+                if (!inSubscribeCall) {
                     listener();
+                }
             });
             inSubscribeCall = false;
             return () => stopSubscription(handle);
@@ -177,8 +206,9 @@ export function pushStore(initial) {
         store: { getState: () => current, subscribe },
         push: (value) => {
             current = value;
-            for (const listener of listeners)
+            for (const listener of listeners) {
                 listener();
+            }
         },
     };
 }