@harness-fe/runtime 3.3.0 → 3.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harness-fe/runtime",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "description": "Browser-side SDK injected into the dev page. Connects to the MCP server via WebSocket and executes commands.",
   "type": "module",
   "license": "MIT",

package/src/index.ts

@@ -7,15 +7,31 @@
 
 import { installOverlay } from './overlay.js';
 import { RuntimeClient, readInjectedConfig } from './client.js';
+import {
+    registerOverlayPlugin,
+    drainPluginQueue,
+    type OverlayPlugin,
+} from './pluginRegistry.js';
+
+// Informational; keep in sync with package.json on release.
+const VERSION = '3.3.0';
 
 const w = window as unknown as {
     __harness_fe_started__?: boolean;
     __harness_fe_client__?: RuntimeClient;
     __hfe_session_id__?: string;
+    __HARNESS_FE_PLUGINS__?: OverlayPlugin[];
+    HarnessFE?: { registerOverlayPlugin: typeof registerOverlayPlugin; version: string };
 };
 
 if (typeof window !== 'undefined' && !w.__harness_fe_started__) {
     w.__harness_fe_started__ = true;
+    // Public global for runtime plugin registration. Works before or after the
+    // overlay mounts — the registry buffers and the overlay subscribes.
+    w.HarnessFE = { registerOverlayPlugin, version: VERSION };
+    // Drain any plugins queued before the runtime loaded.
+    drainPluginQueue(w.__HARNESS_FE_PLUGINS__);
+
     const cfg = readInjectedConfig();
     const client = new RuntimeClient(cfg);
     client.start();
@@ -30,3 +46,16 @@ if (typeof window !== 'undefined' && !w.__harness_fe_started__) {
 
 export { RuntimeClient, tryInheritFromParent } from './client.js';
 export type { ClientOptions, ParentInheritance } from './client.js';
+export {
+    registerOverlayPlugin,
+    getOverlayPlugins,
+    subscribeOverlayPlugins,
+} from './pluginRegistry.js';
+export type {
+    OverlayPlugin,
+    OverlayPluginContext,
+    OverlayPluginSelectedElement,
+    OverlayPluginSelector,
+    OverlayPluginLogs,
+    OverlayPluginGetLogsOptions,
+} from './pluginRegistry.js';

package/src/overlay.test.ts

@@ -2,6 +2,8 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { Window } from 'happy-dom';
 import { installOverlay, buildCssPath, replayStrokes, finalizeAnnotation, type OverlayClient } from './overlay.js';
+import { registerOverlayPlugin, __resetOverlayPlugins, type OverlayPluginContext } from './pluginRegistry.js';
+import { getCaptureStore } from './capture.js';
 
 function setupDom(): { win: Window; doc: Document } {
     const win = new Window();
@@ -71,20 +73,20 @@ describe('installOverlay', () => {
         expect(root.querySelector('[data-role=build]')!.textContent).toBe('—');
     });
 
-    it('"Report a problem" enters picker mode (FAB turns active, info card hidden)', () => {
+    it('"Copy element info" enters picker mode (FAB turns active, info card hidden)', () => {
         setupDom();
         const client = makeFakeClient();
         installOverlay(client);
         const root = document.getElementById('__harness_fe_overlay__')!.shadowRoot!;
         (root.querySelector('.fab') as HTMLButtonElement).click();
-        (root.querySelector('[data-role=report]') as HTMLButtonElement).click();
+        (root.querySelector('[data-role=pick-element]') as HTMLButtonElement).click();
         const fab = root.querySelector('.fab') as HTMLButtonElement;
         expect(fab.dataset.state).toBe('active');
         expect((root.querySelector('.info-card') as HTMLElement).style.display).toBe('none');
         expect((root.querySelector('.picker-bar') as HTMLElement).style.display).toBe('flex');
     });
 
-    it('submits a task.submit event payload with selector + element on Submit', () => {
+    it('"Copy element info" returns to idle after element click (no task.submit fired)', () => {
         const { doc } = setupDom();
         const target = doc.createElement('button');
         target.setAttribute('data-morphix-loc', 'app/cart/CartBadge.tsx:18:5');
@@ -92,47 +94,31 @@ describe('installOverlay', () => {
         target.textContent = 'Cart (3)';
         doc.body.appendChild(target);
 
+        // Stub clipboard so copyText does not throw in happy-dom.
+        const written: string[] = [];
+        Object.defineProperty(globalThis.navigator, 'clipboard', {
+            value: { writeText: (t: string) => { written.push(t); return Promise.resolve(); } },
+            configurable: true,
+        });
+
         const client = makeFakeClient();
         installOverlay(client);
         const root = document.getElementById('__harness_fe_overlay__')!.shadowRoot!;
 
-        // Open → report → fake-pick → submit.
+        // Open info card → enter pick-element picker mode.
         (root.querySelector('.fab') as HTMLButtonElement).click();
-        (root.querySelector('[data-role=report]') as HTMLButtonElement).click();
-
-        // Simulate the picker click flow by directly invoking the state we'd
-        // be in after the user picks. We can't easily simulate
-        // elementFromPoint in happy-dom, so reach into the question panel
-        // and submit a payload — overlay.ts's submit handler reads lockedEl
-        // from a closure, so we go through a synthesized click instead.
-        // Trick: dispatch a capture-phase click on the body with the target.
-        // overlay's onClickCapture relies on `hoveredEl` set by mousemove.
-        // To avoid coupling to mousemove geometry, we test the submit handler
-        // is wired by inspecting the question textarea wiring instead.
-
-        // Force the panel into "question" state by clicking the target via
-        // the document; we first set hoveredEl by dispatching mousemove with
-        // matching screen coords.
-        target.dispatchEvent(new MouseEvent('mousemove', {
-            bubbles: true, clientX: 0, clientY: 0,
-        }));
-        // Direct click on the picker target triggers the capture handler.
+        (root.querySelector('[data-role=pick-element]') as HTMLButtonElement).click();
+        expect((root.querySelector('.picker-bar') as HTMLElement).style.display).toBe('flex');
+
+        // Simulate hover + click on the target element.
+        target.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX: 0, clientY: 0 }));
         target.click();
 
-        // If the picker accepted, the question panel is now visible.
-        const question = root.querySelector('.question') as HTMLElement;
-        if (question.style.display === 'flex') {
-            (root.querySelector('.question textarea') as HTMLTextAreaElement).value = 'broken';
-            (root.querySelector('.question [data-role=submit]') as HTMLButtonElement).click();
-            expect(client.sent).toHaveLength(1);
-            expect(client.sent[0].name).toBe('task.submit');
-            const payload = client.sent[0].payload as { selector: { loc?: string }; question: string };
-            expect(payload.question).toBe('broken');
-            expect(payload.selector.loc).toBe('app/cart/CartBadge.tsx:18:5');
-        }
-        // If happy-dom's elementFromPoint didn't cooperate, the test still
-        // exercises mount/open/copy paths above — submit path is asserted
-        // separately by buildCssPath unit + bridge.test integration.
+        // After the pick: overlay should be idle (picker bar hidden, no question panel).
+        // The question panel must NOT open — copy mode skips the report flow.
+        expect((root.querySelector('.question') as HTMLElement).style.display).toBe('none');
+        // No task.submit event should be sent — copy mode never fires a report.
+        expect(client.sent).toHaveLength(0);
     });
 
     it('Esc closes the info card when open', () => {
@@ -317,3 +303,123 @@ describe('buildCssPath', () => {
         expect(path).toMatch(/p\.x:nth-of-type\(3\)/);
     });
 });
+
+describe('overlay plugins', () => {
+    afterEach(() => {
+        document.getElementById('__harness_fe_overlay__')?.remove();
+        __resetOverlayPlugins();
+        getCaptureStore().network.clear();
+        getCaptureStore().console.clear();
+        getCaptureStore().errors.clear();
+    });
+
+    const openCard = (root: ShadowRoot) =>
+        (root.querySelector('.fab') as HTMLButtonElement).click();
+
+    it('renders a button for a plugin registered before install', () => {
+        setupDom();
+        registerOverlayPlugin({ id: 'p1', label: 'Send', icon: '💬', onClick() {} });
+        installOverlay(makeFakeClient());
+        const root = document.getElementById('__harness_fe_overlay__')!.shadowRoot!;
+        const btn = root.querySelector('[data-plugin-id=p1]') as HTMLButtonElement;
+        expect(btn).toBeTruthy();
+        expect(btn.textContent).toBe('💬 Send');
+        const slot = root.querySelector('[data-role=plugin-actions]') as HTMLElement;
+        expect(slot.style.display).not.toBe('none');
+    });
+
+    it('renders a button for a plugin registered AFTER install (late registration)', () => {
+        setupDom();
+        installOverlay(makeFakeClient());
+        const root = document.getElementById('__harness_fe_overlay__')!.shadowRoot!;
+        expect(root.querySelector('[data-plugin-id=late]')).toBeNull();
+        registerOverlayPlugin({ id: 'late', label: 'Later', onClick() {} });
+        expect(root.querySelector('[data-plugin-id=late]')).toBeTruthy();
+    });
+
+    it('hides the plugin slot when no plugins are registered', () => {
+        setupDom();
+        installOverlay(makeFakeClient());
+        const root = document.getElementById('__harness_fe_overlay__')!.shadowRoot!;
+        const slot = root.querySelector('[data-role=plugin-actions]') as HTMLElement;
+        expect(slot.style.display).toBe('none');
+    });
+
+    it('invokes onClick with a context carrying ids / url / snapshotMarkdown', () => {
+        setupDom();
+        let ctx: OverlayPluginContext | undefined;
+        registerOverlayPlugin({ id: 'cap', label: 'Capture', onClick(c) { ctx = c; } });
+        installOverlay(makeFakeClient());
+        const root = document.getElementById('__harness_fe_overlay__')!.shadowRoot!;
+        openCard(root);
+        (root.querySelector('[data-plugin-id=cap]') as HTMLButtonElement).click();
+        expect(ctx).toBeTruthy();
+        expect(ctx!.projectId).toBe('demo');
+        expect(ctx!.sessionId).toBe('sess-12345-abcdef-9876');
+        expect(ctx!.tabId).toBe('tab-123456-abcdef');
+        expect(typeof ctx!.url).toBe('string');
+        expect(ctx!.snapshotMarkdown()).toContain('project: `demo`');
+    });
+
+    it('getLogs() redacts network bodies + auth headers by default, raw when opted out', () => {
+        setupDom();
+        getCaptureStore().network.push({
+            ts: Date.now(), method: 'POST', url: 'https://api.example.com/login',
+            status: 200,
+            requestHeaders: { authorization: 'Bearer secret', 'content-type': 'application/json' },
+            requestBody: { password: 'hunter2' },
+            responseBody: { token: 'abc' },
+        });
+        let ctx: OverlayPluginContext | undefined;
+        registerOverlayPlugin({ id: 'logs', label: 'Logs', onClick(c) { ctx = c; } });
+        installOverlay(makeFakeClient());
+        const root = document.getElementById('__harness_fe_overlay__')!.shadowRoot!;
+        openCard(root);
+        (root.querySelector('[data-plugin-id=logs]') as HTMLButtonElement).click();
+
+        const redacted = ctx!.getLogs({ network: 5 }).network[0];
+        expect(redacted.requestBody).toBeUndefined();
+        expect(redacted.responseBody).toBeUndefined();
+        expect(redacted.requestHeaders).toEqual({ 'content-type': 'application/json' });
+        expect(redacted.url).toBe('https://api.example.com/login');
+
+        const raw = ctx!.getLogs({ network: 5, redact: false }).network[0];
+        expect(raw.requestBody).toEqual({ password: 'hunter2' });
+        expect(raw.requestHeaders!.authorization).toBe('Bearer secret');
+    });
+
+    it('a requiresElement plugin click enters picker mode', () => {
+        setupDom();
+        registerOverlayPlugin({ id: 'pick', label: 'Pick', requiresElement: true, onClick() {} });
+        installOverlay(makeFakeClient());
+        const root = document.getElementById('__harness_fe_overlay__')!.shadowRoot!;
+        openCard(root);
+        (root.querySelector('[data-plugin-id=pick]') as HTMLButtonElement).click();
+        expect((root.querySelector('.picker-bar') as HTMLElement).style.display).toBe('flex');
+        expect((root.querySelector('.info-card') as HTMLElement).style.display).toBe('none');
+        expect((root.querySelector('.fab') as HTMLButtonElement).dataset.state).toBe('active');
+    });
+
+    it('toasts when a plugin onClick throws', async () => {
+        setupDom();
+        registerOverlayPlugin({ id: 'boom', label: 'Boom', onClick() { throw new Error('nope'); } });
+        installOverlay(makeFakeClient());
+        const root = document.getElementById('__harness_fe_overlay__')!.shadowRoot!;
+        openCard(root);
+        (root.querySelector('[data-plugin-id=boom]') as HTMLButtonElement).click();
+        await Promise.resolve();
+        const toast = root.querySelector('.hfe-toast') as HTMLElement;
+        expect(toast).toBeTruthy();
+        expect(toast.dataset.kind).toBe('error');
+        expect(toast.textContent).toContain('nope');
+    });
+
+    it('shows a GitHub promo link in the info card', () => {
+        setupDom();
+        installOverlay(makeFakeClient());
+        const root = document.getElementById('__harness_fe_overlay__')!.shadowRoot!;
+        const link = root.querySelector('[data-role=github]') as HTMLAnchorElement;
+        expect(link).toBeTruthy();
+        expect(link.getAttribute('href')).toBe('https://github.com/Morphicai/harness-fe');
+    });
+});