@harness-fe/runtime 3.4.0 → 3.4.1

package/dist/overlay.js

@@ -249,6 +249,12 @@ export function installOverlay(client) {
     let pendingAttachment = null;
     /** Set while the picker is collecting an element for a `requiresElement` plugin. */
     let pluginAwaitingElement = null;
+    /**
+     * Purpose of the current picker session:
+     * - 'copy': copy element info to clipboard for use with an agent (default)
+     * - 'report': legacy report-a-problem flow (still used internally by plugins)
+     */
+    let pickerPurpose = 'copy';
     const setState = (next) => {
         state = next;
         infoCard.style.display = next === 'info' ? 'flex' : 'none';
@@ -322,7 +328,7 @@ export function installOverlay(client) {
         lockedEl = hoveredEl;
         setHighlight(lockedEl);
         // A plugin requested the element — hand it straight to its onClick and
-        // skip the report/question flow entirely.
+        // skip all other flows.
         if (pluginAwaitingElement) {
             const plugin = pluginAwaitingElement;
             pluginAwaitingElement = null;
@@ -332,9 +338,18 @@ export function installOverlay(client) {
             void invokePlugin(plugin, el);
             return;
         }
-        // Go straight to the question step. Screenshots are now opt-in via
-        // the "Add screenshot" button inside the question panel — users
-        // shouldn't have to draw on every report.
+        // Copy mode: build element info and copy to clipboard for agent use.
+        if (pickerPurpose === 'copy') {
+            const el = lockedEl;
+            lockedEl = null;
+            const text = buildElementCopyText(el);
+            void copyText(text).then(() => {
+                showToast('✓ Element info copied');
+            });
+            setState('idle');
+            return;
+        }
+        // Report mode (legacy, no longer exposed in UI but kept for plugin compatibility).
         pendingAttachment = null;
         const info = questionPanel.querySelector('[data-role=info]');
         info.textContent = describeElement(lockedEl);
@@ -358,6 +373,7 @@ export function installOverlay(client) {
                 lockedEl = null;
                 pendingAttachment = null;
                 pluginAwaitingElement = null;
+                pickerPurpose = 'copy';
                 setState('info');
             }
             else if (state === 'info') {
@@ -428,6 +444,31 @@ export function installOverlay(client) {
             }, 1200);
         }
     };
+    /**
+     * Build a compact element-info block for pasting into an agent prompt.
+     * Omits HTML (too verbose); includes source location, component name, css
+     * path, and session context — enough for the agent to locate and fix the
+     * element without any further investigation.
+     */
+    const buildElementCopyText = (el) => {
+        const tag = el.tagName.toLowerCase();
+        const comp = el.getAttribute('data-morphix-comp');
+        const loc = el.getAttribute('data-morphix-loc');
+        const css = buildCssPath(el);
+        const lines = [];
+        lines.push(`### Element context`);
+        lines.push('');
+        if (comp)
+            lines.push(`- component: \`${comp}\``);
+        if (loc)
+            lines.push(`- source: \`${loc}\``);
+        lines.push(`- tag: \`${tag}\``);
+        lines.push(`- css: \`${css}\``);
+        lines.push(`- project: \`${client.projectId}\`${client.displayName ? ` (${client.displayName})` : ''}`);
+        lines.push(`- session: \`${client.sessionId}\``);
+        lines.push(`- url: ${location.href}`);
+        return lines.join('\n') + '\n';
+    };
     const buildSnapshot = () => {
         const lines = [];
         lines.push(`### Harness-FE snapshot`);
@@ -525,6 +566,10 @@ export function installOverlay(client) {
             btn.addEventListener('click', () => {
                 if (plugin.requiresElement) {
                     pluginAwaitingElement = plugin;
+                    pickerPurpose = 'report'; // plugins use the legacy element-selection flow
+                    const label = pickerBar.querySelector('[data-role=picker-label]');
+                    if (label)
+                        label.textContent = '🎯 Click an element';
                     setState('picker');
                 }
                 else {
@@ -753,16 +798,17 @@ export function installOverlay(client) {
         setState(state === 'idle' ? 'info' : 'idle');
     });
     infoCard.querySelector('[data-role=close]').addEventListener('click', () => setState('idle'));
-    infoCard.querySelector('[data-role=report]').addEventListener('click', () => {
+    infoCard.querySelector('[data-role=pick-element]').addEventListener('click', () => {
+        pickerPurpose = 'copy';
+        const label = pickerBar.querySelector('[data-role=picker-label]');
+        if (label)
+            label.textContent = '🔍 Click element to copy info';
         setState('picker');
     });
     infoCard.querySelector('[data-role=copy-snapshot]').addEventListener('click', (ev) => {
         const btn = ev.currentTarget;
         void copyText(buildSnapshot(), btn);
     });
-    infoCard.querySelector('[data-role=view-reports]').addEventListener('click', () => {
-        setState('reports');
-    });
     // "Open dashboard" — derive the daemon's dashboard URL from mcpUrl and
     // pop it in a new tab, deep-linked to this session. Show the button
     // only when we actually know the daemon address (mcpUrl was supplied by
@@ -815,6 +861,7 @@ export function installOverlay(client) {
     pickerBar.querySelector('[data-role=cancel]').addEventListener('click', () => {
         lockedEl = null;
         pluginAwaitingElement = null;
+        pickerPurpose = 'copy';
         setState('info');
     });
     questionPanel.querySelector('[data-role=cancel]').addEventListener('click', () => {
@@ -1939,16 +1986,15 @@ function buildInfoCard() {
             <div class="row"><span class="key">url</span><span class="pill url" data-role="url"></span></div>
         </div>
         <div class="actions">
-            <button class="primary" data-role="report" type="button">
-                <span class="icon">🎯</span>
-                <span class="label">Report a problem</span>
-                <span class="hint">Pick an element →</span>
+            <button class="primary" data-role="pick-element" type="button">
+                <span class="icon">🔍</span>
+                <span class="label">Copy element info</span>
+                <span class="hint">pick element →</span>
             </button>
             <button class="secondary" data-role="open-dashboard" type="button" style="display:none">
                 <span class="icon">↗</span>
                 <span>Open dashboard</span>
             </button>
-            <button class="secondary" data-role="view-reports" type="button">📁 My reports</button>
             <button class="secondary" data-role="copy-snapshot" type="button">📋 Copy snapshot</button>
         </div>
         <div class="plugin-actions" data-role="plugin-actions" style="display:none"></div>
@@ -1979,7 +2025,7 @@ function buildPickerBar() {
     const bar = document.createElement('div');
     bar.className = 'picker-bar';
     bar.innerHTML = `
-        <span class="label">🎯 Click an element to flag it</span>
+        <span class="label" data-role="picker-label">🔍 Click element to copy info</span>
         <span class="hint">esc to cancel</span>
         <button data-role="cancel" type="button">Cancel</button>
     `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harness-fe/runtime",
-  "version": "3.4.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",
@@ -30,8 +30,8 @@
   "dependencies": {
     "@zumer/snapdom": "^2.12.0",
     "rrweb": "2.0.0-alpha.4",
-    "@harness-fe/sandbox": "^3.2.0",
-    "@harness-fe/protocol": "3.2.0"
+    "@harness-fe/protocol": "3.2.0",
+    "@harness-fe/sandbox": "^3.2.0"
   },
   "devDependencies": {
     "happy-dom": "^20.9.0",

package/src/overlay.test.ts

@@ -73,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');
@@ -94,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', () => {

package/src/overlay.ts

@@ -309,6 +309,12 @@ export function installOverlay(client: OverlayClient): void {
     let pendingAttachment: TaskAttachment | null = null;
     /** Set while the picker is collecting an element for a `requiresElement` plugin. */
     let pluginAwaitingElement: OverlayPlugin | null = null;
+    /**
+     * Purpose of the current picker session:
+     * - 'copy': copy element info to clipboard for use with an agent (default)
+     * - 'report': legacy report-a-problem flow (still used internally by plugins)
+     */
+    let pickerPurpose: 'copy' | 'report' = 'copy';
 
     const setState = (next: State) => {
         state = next;
@@ -381,7 +387,7 @@ export function installOverlay(client: OverlayClient): void {
         lockedEl = hoveredEl;
         setHighlight(lockedEl);
         // A plugin requested the element — hand it straight to its onClick and
-        // skip the report/question flow entirely.
+        // skip all other flows.
         if (pluginAwaitingElement) {
             const plugin = pluginAwaitingElement;
             pluginAwaitingElement = null;
@@ -391,9 +397,18 @@ export function installOverlay(client: OverlayClient): void {
             void invokePlugin(plugin, el);
             return;
         }
-        // Go straight to the question step. Screenshots are now opt-in via
-        // the "Add screenshot" button inside the question panel — users
-        // shouldn't have to draw on every report.
+        // Copy mode: build element info and copy to clipboard for agent use.
+        if (pickerPurpose === 'copy') {
+            const el = lockedEl;
+            lockedEl = null;
+            const text = buildElementCopyText(el);
+            void copyText(text).then(() => {
+                showToast('✓ Element info copied');
+            });
+            setState('idle');
+            return;
+        }
+        // Report mode (legacy, no longer exposed in UI but kept for plugin compatibility).
         pendingAttachment = null;
         const info = questionPanel.querySelector<HTMLElement>('[data-role=info]')!;
         info.textContent = describeElement(lockedEl);
@@ -417,6 +432,7 @@ export function installOverlay(client: OverlayClient): void {
                 lockedEl = null;
                 pendingAttachment = null;
                 pluginAwaitingElement = null;
+                pickerPurpose = 'copy';
                 setState('info');
             } else if (state === 'info') {
                 setState('idle');
@@ -486,6 +502,30 @@ export function installOverlay(client: OverlayClient): void {
         }
     };
 
+    /**
+     * Build a compact element-info block for pasting into an agent prompt.
+     * Omits HTML (too verbose); includes source location, component name, css
+     * path, and session context — enough for the agent to locate and fix the
+     * element without any further investigation.
+     */
+    const buildElementCopyText = (el: Element): string => {
+        const tag = el.tagName.toLowerCase();
+        const comp = el.getAttribute('data-morphix-comp');
+        const loc = el.getAttribute('data-morphix-loc');
+        const css = buildCssPath(el);
+        const lines: string[] = [];
+        lines.push(`### Element context`);
+        lines.push('');
+        if (comp) lines.push(`- component: \`${comp}\``);
+        if (loc) lines.push(`- source: \`${loc}\``);
+        lines.push(`- tag: \`${tag}\``);
+        lines.push(`- css: \`${css}\``);
+        lines.push(`- project: \`${client.projectId}\`${client.displayName ? ` (${client.displayName})` : ''}`);
+        lines.push(`- session: \`${client.sessionId}\``);
+        lines.push(`- url: ${location.href}`);
+        return lines.join('\n') + '\n';
+    };
+
     const buildSnapshot = (): string => {
         const lines: string[] = [];
         lines.push(`### Harness-FE snapshot`);
@@ -584,6 +624,9 @@ export function installOverlay(client: OverlayClient): void {
             btn.addEventListener('click', () => {
                 if (plugin.requiresElement) {
                     pluginAwaitingElement = plugin;
+                    pickerPurpose = 'report'; // plugins use the legacy element-selection flow
+                    const label = pickerBar.querySelector<HTMLElement>('[data-role=picker-label]');
+                    if (label) label.textContent = '🎯 Click an element';
                     setState('picker');
                 } else {
                     setState('idle');
@@ -803,7 +846,10 @@ export function installOverlay(client: OverlayClient): void {
 
     infoCard.querySelector('[data-role=close]')!.addEventListener('click', () => setState('idle'));
 
-    infoCard.querySelector('[data-role=report]')!.addEventListener('click', () => {
+    infoCard.querySelector('[data-role=pick-element]')!.addEventListener('click', () => {
+        pickerPurpose = 'copy';
+        const label = pickerBar.querySelector<HTMLElement>('[data-role=picker-label]');
+        if (label) label.textContent = '🔍 Click element to copy info';
         setState('picker');
     });
 
@@ -812,10 +858,6 @@ export function installOverlay(client: OverlayClient): void {
         void copyText(buildSnapshot(), btn);
     });
 
-    infoCard.querySelector('[data-role=view-reports]')!.addEventListener('click', () => {
-        setState('reports');
-    });
-
     // "Open dashboard" — derive the daemon's dashboard URL from mcpUrl and
     // pop it in a new tab, deep-linked to this session. Show the button
     // only when we actually know the daemon address (mcpUrl was supplied by
@@ -869,6 +911,7 @@ export function installOverlay(client: OverlayClient): void {
     pickerBar.querySelector('[data-role=cancel]')!.addEventListener('click', () => {
         lockedEl = null;
         pluginAwaitingElement = null;
+        pickerPurpose = 'copy';
         setState('info');
     });
 
@@ -2071,16 +2114,15 @@ function buildInfoCard(): HTMLDivElement {
             <div class="row"><span class="key">url</span><span class="pill url" data-role="url"></span></div>
         </div>
         <div class="actions">
-            <button class="primary" data-role="report" type="button">
-                <span class="icon">🎯</span>
-                <span class="label">Report a problem</span>
-                <span class="hint">Pick an element →</span>
+            <button class="primary" data-role="pick-element" type="button">
+                <span class="icon">🔍</span>
+                <span class="label">Copy element info</span>
+                <span class="hint">pick element →</span>
             </button>
             <button class="secondary" data-role="open-dashboard" type="button" style="display:none">
                 <span class="icon">↗</span>
                 <span>Open dashboard</span>
             </button>
-            <button class="secondary" data-role="view-reports" type="button">📁 My reports</button>
             <button class="secondary" data-role="copy-snapshot" type="button">📋 Copy snapshot</button>
         </div>
         <div class="plugin-actions" data-role="plugin-actions" style="display:none"></div>
@@ -2113,7 +2155,7 @@ function buildPickerBar(): HTMLDivElement {
     const bar = document.createElement('div');
     bar.className = 'picker-bar';
     bar.innerHTML = `
-        <span class="label">🎯 Click an element to flag it</span>
+        <span class="label" data-role="picker-label">🔍 Click element to copy info</span>
         <span class="hint">esc to cancel</span>
         <button data-role="cancel" type="button">Cancel</button>
     `;