opendevbrowser 0.0.16 → 0.0.18

package/extension/dist/popup.js

@@ -1,5 +1,6 @@
 import { DEFAULT_AUTO_CONNECT, DEFAULT_AUTO_PAIR, DEFAULT_DISCOVERY_PORT, DEFAULT_NATIVE_ENABLED, DEFAULT_PAIRING_ENABLED, DEFAULT_PAIRING_TOKEN, DEFAULT_RELAY_PORT } from "./relay-settings.js";
 import { logError } from "./logging.js";
+import { describeAnnotationItem, filterAnnotationPayload, formatAnnotationDispatchReceipt } from "./annotation-payload.js";
 const statusEl = document.getElementById("status");
 const statusIndicator = document.getElementById("statusIndicator");
 const statusPill = document.getElementById("statusPill");
@@ -22,6 +23,9 @@ const nativeEnabledInput = document.getElementById("nativeEnabled");
 const annotationContextInput = document.getElementById("annotationContext");
 const annotationStartButton = document.getElementById("annotationStart");
 const annotationCopyButton = document.getElementById("annotationCopy");
+const annotationSendButton = document.getElementById("annotationSend");
+const annotationRefreshButton = document.getElementById("annotationRefresh");
+const annotationItems = document.getElementById("annotationItems");
 const annotationNote = document.getElementById("annotationNote");
 if (!statusEl
     || !statusIndicator
@@ -45,12 +49,26 @@ if (!statusEl
     || !annotationContextInput
     || !annotationStartButton
     || !annotationCopyButton
+    || !annotationSendButton
+    || !annotationRefreshButton
+    || !annotationItems
     || !annotationNote) {
     throw new Error("Popup DOM missing required elements");
 }
-const defaultNote = "Local relay only. Tokens stay on-device.";
+const defaultNote = "Local relay only. Page data and tokens stay on-device.";
+const defaultHealthNote = "Health check pending.";
 const defaultAnnotationNote = "No annotations captured yet.";
 const LAST_ANNOTATION_META_KEY = "annotationLastMeta";
+const MISSING_EXTENSION_RECEIVER_MESSAGE = "Could not establish connection. Receiving end does not exist.";
+let lastAnnotationPayload = null;
+let currentHealthNote = defaultHealthNote;
+const normalizePopupErrorMessage = (error) => {
+    const message = error instanceof Error ? error.message : String(error ?? "Unknown error");
+    if (message.includes(MISSING_EXTENSION_RECEIVER_MESSAGE)) {
+        return "Extension background is unavailable. Reload the extension and retry.";
+    }
+    return message;
+};
 const setNote = (message) => {
     const next = message && message.trim() ? message : defaultNote;
     statusNote.textContent = next;
@@ -59,6 +77,11 @@ const setAnnotationNote = (message) => {
     const next = message && message.trim() ? message : defaultAnnotationNote;
     annotationNote.textContent = next;
 };
+const setHealthNote = (message) => {
+    const next = message && message.trim() ? message : defaultHealthNote;
+    currentHealthNote = next;
+    healthNote.textContent = next;
+};
 const setStatus = (status) => {
     const isConnected = status === "connected";
     statusEl.textContent = isConnected ? "Connected" : "Disconnected";
@@ -87,7 +110,7 @@ const setHealth = (health) => {
         setHealthValue(healthInjected, "Unknown", "off");
         setHealthValue(healthCdp, "Unknown", "off");
         setHealthValue(healthPairing, "Unknown", "off");
-        healthNote.textContent = "Health check pending.";
+        setHealthNote();
         return;
     }
     setHealthValue(healthRelay, health.ok ? "Online" : "Offline", health.ok ? "ok" : "warn");
@@ -98,26 +121,28 @@ const setHealth = (health) => {
     setHealthValue(healthPairing, health.pairingRequired ? "Required" : "Not required", health.pairingRequired ? "warn" : "ok");
     if (health.lastHandshakeError) {
         const detail = health.lastHandshakeError.message ? ` ${health.lastHandshakeError.message}` : "";
-        healthNote.textContent = `Last handshake error: ${health.lastHandshakeError.code}.${detail}`;
+        setHealthNote(`Last handshake error: ${health.lastHandshakeError.code}.${detail}`);
     }
     else if (!health.ok) {
-        healthNote.textContent = `Relay health: ${formatReason(health.reason)}.`;
+        setHealthNote(`Relay health: ${formatReason(health.reason)}.`);
     }
     else {
-        healthNote.textContent = "Relay health OK.";
+        setHealthNote("Relay health OK.");
     }
 };
 const setInjectionStatus = (injected, detail) => {
     if (injected === null) {
         setHealthValue(healthInjected, "Unknown", "off");
+        healthNote.textContent = currentHealthNote;
         return;
     }
     if (injected) {
         setHealthValue(healthInjected, "Injected", "ok");
+        healthNote.textContent = currentHealthNote;
         return;
     }
     setHealthValue(healthInjected, "Not injected", "warn");
-    if (detail && healthNote.textContent === "Relay health OK.") {
+    if (detail && healthNote.textContent === currentHealthNote) {
         healthNote.textContent = `Annotation UI: ${detail}`;
     }
 };
@@ -150,8 +175,8 @@ const setNativeHealth = (health, enabled) => {
     }
     const formatted = formatNativeHealth(health);
     setHealthValue(healthNative, formatted.label, formatted.tone);
-    if (formatted.note && healthNote.textContent === "Relay health OK.") {
-        healthNote.textContent = `${healthNote.textContent} ${formatted.note}`;
+    if (formatted.note && currentHealthNote === "Relay health OK.") {
+        setHealthNote(`${currentHealthNote} ${formatted.note}`);
     }
 };
 const applyStatus = (response) => {
@@ -165,7 +190,7 @@ const sendMessage = (message) => {
         chrome.runtime.sendMessage(message, (response) => {
             const lastError = chrome.runtime.lastError;
             if (lastError) {
-                reject(new Error(lastError.message));
+                reject(new Error(normalizePopupErrorMessage(lastError.message)));
                 return;
             }
             if (!response) {
@@ -176,6 +201,17 @@ const sendMessage = (message) => {
         });
     });
 };
+const getPopupTabId = async () => {
+    try {
+        const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+        const tabId = tabs[0]?.id;
+        return typeof tabId === "number" ? tabId : undefined;
+    }
+    catch (error) {
+        logError("popup.tab_query", error, { code: "tab_query_failed" });
+        return undefined;
+    }
+};
 const setStorage = (items) => {
     return new Promise((resolve) => {
         chrome.storage.local.set(items, () => resolve());
@@ -183,7 +219,11 @@ const setStorage = (items) => {
 };
 const refreshInjectionStatus = async () => {
     try {
-        const response = await sendMessage({ type: "annotation:probe" });
+        const tabId = await getPopupTabId();
+        const response = await sendMessage({
+            type: "annotation:probe",
+            ...(typeof tabId === "number" ? { tabId } : {})
+        });
         setInjectionStatus(response.injected, response.detail);
     }
     catch (error) {
@@ -207,13 +247,24 @@ const refreshStatus = async () => {
         setInjectionStatus(null);
     }
 };
-const setCopyEnabled = (enabled) => {
+const setAnnotationActionsEnabled = (enabled) => {
     annotationCopyButton.disabled = !enabled;
+    annotationSendButton.disabled = !enabled;
 };
 const buildPopupAnnotationOptions = () => {
     const context = annotationContextInput.value.trim();
     return context ? { context } : undefined;
 };
+const withPopupContext = (payload) => {
+    const context = annotationContextInput.value.trim();
+    if (!context) {
+        return payload;
+    }
+    return {
+        ...payload,
+        context
+    };
+};
 const fetchTokenFromPlugin = async (port) => {
     try {
         const response = await fetch(`http://127.0.0.1:${port}/pair`, {
@@ -332,16 +383,76 @@ const formatAnnotationSummary = (meta) => {
     const target = meta.url ? ` on ${meta.url}` : "";
     return `Last annotation: ${count} item${count === 1 ? "" : "s"}${target}.`;
 };
+const renderAnnotationItems = (payload) => {
+    annotationItems.innerHTML = "";
+    if (!payload || payload.annotations.length === 0) {
+        const empty = document.createElement("div");
+        empty.className = "annotation-empty";
+        empty.textContent = "No annotation items available.";
+        annotationItems.append(empty);
+        return;
+    }
+    for (const item of payload.annotations) {
+        const row = document.createElement("div");
+        row.className = "annotation-item";
+        const summary = document.createElement("div");
+        summary.className = "annotation-item-summary";
+        summary.textContent = describeAnnotationItem(item);
+        const meta = document.createElement("div");
+        meta.className = "annotation-item-meta";
+        meta.textContent = `${item.tag} • ${Math.round(item.rect.width)}×${Math.round(item.rect.height)}`;
+        const actions = document.createElement("div");
+        actions.className = "annotation-item-actions";
+        const copyButton = document.createElement("button");
+        copyButton.className = "secondary";
+        copyButton.type = "button";
+        copyButton.textContent = "Copy item";
+        copyButton.addEventListener("click", () => {
+            void copySelectedAnnotation([item.id], "Copied annotation item payload.");
+        });
+        const sendButton = document.createElement("button");
+        sendButton.className = "secondary";
+        sendButton.type = "button";
+        sendButton.textContent = "Send item";
+        sendButton.addEventListener("click", () => {
+            void sendSelectedAnnotation([item.id], "popup_item", describeAnnotationItem(item), "Sent annotation item to agent inbox.");
+        });
+        actions.append(copyButton, sendButton);
+        row.append(summary, meta, actions);
+        annotationItems.append(row);
+    }
+};
+const loadAnnotationPayload = async (preferScreenshots) => {
+    let response = await sendMessage({
+        type: "annotation:getPayload",
+        includeScreenshots: preferScreenshots
+    });
+    if (!response.payload && preferScreenshots) {
+        response = await sendMessage({
+            type: "annotation:getPayload",
+            includeScreenshots: false
+        });
+    }
+    return response;
+};
+const refreshAnnotationPayload = async () => {
+    const response = await loadAnnotationPayload(false);
+    lastAnnotationPayload = response.payload ? withPopupContext(response.payload) : null;
+    renderAnnotationItems(lastAnnotationPayload);
+};
 const refreshLastAnnotationMeta = async () => {
     try {
         const response = await sendMessage({ type: "annotation:lastMeta" });
         const meta = response.meta;
         if (meta && meta.status === "ok") {
-            setCopyEnabled(true);
+            setAnnotationActionsEnabled(true);
             setAnnotationNote(formatAnnotationSummary(meta));
+            await refreshAnnotationPayload();
             return;
         }
-        setCopyEnabled(false);
+        setAnnotationActionsEnabled(false);
+        lastAnnotationPayload = null;
+        renderAnnotationItems(null);
         if (meta) {
             setAnnotationNote(formatAnnotationSummary(meta));
         }
@@ -351,7 +462,9 @@ const refreshLastAnnotationMeta = async () => {
     }
     catch (error) {
         logError("popup.annotation_meta", error, { code: "annotation_meta_failed" });
-        setCopyEnabled(false);
+        setAnnotationActionsEnabled(false);
+        lastAnnotationPayload = null;
+        renderAnnotationItems(null);
         setAnnotationNote("Annotation status unavailable.");
     }
 };
@@ -377,6 +490,50 @@ const copyTextToClipboard = async (text) => {
         throw new Error("Clipboard copy failed");
     }
 };
+const copyPayloadToClipboard = async (payload, message) => {
+    await copyTextToClipboard(JSON.stringify(payload, null, 2));
+    setAnnotationNote(message);
+};
+const sendPayloadToAgent = async (payload, source, label) => {
+    const response = await sendMessage({
+        type: "annotation:sendPayload",
+        payload,
+        source,
+        label
+    });
+    if (!response.ok) {
+        throw new Error(response.error?.message ?? "Agent dispatch failed.");
+    }
+    setAnnotationNote(formatAnnotationDispatchReceipt(response.receipt));
+};
+const copySelectedAnnotation = async (annotationIds, successMessage = "Copied annotation payload to clipboard.") => {
+    const response = await loadAnnotationPayload(true);
+    if (!response.payload) {
+        setAnnotationActionsEnabled(false);
+        setAnnotationNote("No completed annotation payload available.");
+        renderAnnotationItems(null);
+        return;
+    }
+    const payload = withPopupContext(annotationIds && annotationIds.length > 0
+        ? filterAnnotationPayload(response.payload, annotationIds, { includeScreenshots: Boolean(response.payload.screenshots?.length) })
+        : response.payload);
+    await copyPayloadToClipboard(payload, response.warning ? `${successMessage} ${response.warning}` : successMessage);
+    await refreshLastAnnotationMeta();
+};
+const sendSelectedAnnotation = async (annotationIds, source, label, successMessage) => {
+    const response = await loadAnnotationPayload(true);
+    if (!response.payload) {
+        setAnnotationActionsEnabled(false);
+        setAnnotationNote("No completed annotation payload available.");
+        renderAnnotationItems(null);
+        return;
+    }
+    const payload = withPopupContext(annotationIds && annotationIds.length > 0
+        ? filterAnnotationPayload(response.payload, annotationIds, { includeScreenshots: Boolean(response.payload.screenshots?.length) })
+        : response.payload);
+    void successMessage;
+    await sendPayloadToAgent(payload, source, label);
+};
 const toggle = async () => {
     const isConnected = statusEl.textContent === "Connected";
     setNote();
@@ -438,56 +595,57 @@ annotationStartButton.addEventListener("click", () => {
     (async () => {
         setAnnotationNote("Starting annotation...");
         const options = buildPopupAnnotationOptions();
+        const tabId = await getPopupTabId();
         const response = await sendMessage({
             type: "annotation:start",
-            options
+            options,
+            ...(typeof tabId === "number" ? { tabId } : {})
         });
         if (!response.ok) {
             const message = response.error?.message ?? "Annotation start failed.";
             setAnnotationNote(message);
-            setCopyEnabled(false);
+            setAnnotationActionsEnabled(false);
+            lastAnnotationPayload = null;
+            renderAnnotationItems(null);
             return;
         }
         setAnnotationNote("Annotation started. Switch to the tab to select elements.");
-        setCopyEnabled(false);
+        setAnnotationActionsEnabled(false);
+        lastAnnotationPayload = null;
+        renderAnnotationItems(null);
         void refreshInjectionStatus();
     })().catch((error) => {
         const message = error instanceof Error ? error.message : "Annotation start failed.";
         setAnnotationNote(message);
-        setCopyEnabled(false);
+        setAnnotationActionsEnabled(false);
+        lastAnnotationPayload = null;
+        renderAnnotationItems(null);
     });
 });
 annotationCopyButton.addEventListener("click", () => {
     (async () => {
         setAnnotationNote("Preparing annotation payload...");
-        let response = await sendMessage({
-            type: "annotation:getPayload",
-            includeScreenshots: true
-        });
-        if (!response.payload) {
-            response = await sendMessage({
-                type: "annotation:getPayload",
-                includeScreenshots: false
-            });
-        }
-        if (!response.payload) {
-            setAnnotationNote("No completed annotation payload available.");
-            setCopyEnabled(false);
-            return;
-        }
-        await copyTextToClipboard(JSON.stringify(response.payload, null, 2));
-        if (response.warning) {
-            setAnnotationNote(`Copied payload (${response.warning.replace(/\.$/, "")}).`);
-        }
-        else {
-            setAnnotationNote("Copied annotation payload to clipboard.");
-        }
-        await refreshLastAnnotationMeta();
+        await copySelectedAnnotation(undefined, "Copied annotation payload to clipboard.");
     })().catch((error) => {
         const message = error instanceof Error ? error.message : "Copy failed.";
         setAnnotationNote(message);
     });
 });
+annotationSendButton.addEventListener("click", () => {
+    (async () => {
+        setAnnotationNote("Sending annotation payload to agent inbox...");
+        await sendSelectedAnnotation(undefined, "popup_all", "Popup annotation payload", "Sent annotation payload to agent inbox.");
+    })().catch((error) => {
+        const message = error instanceof Error ? error.message : "Send failed.";
+        setAnnotationNote(message);
+    });
+});
+annotationRefreshButton.addEventListener("click", () => {
+    refreshLastAnnotationMeta().catch((error) => {
+        const message = error instanceof Error ? error.message : "Refresh failed.";
+        setAnnotationNote(message);
+    });
+});
 autoPairInput.addEventListener("change", () => {
     const enabled = autoPairInput.checked;
     pairingTokenInput.disabled = !pairingEnabledInput.checked || enabled;
@@ -560,7 +718,8 @@ loadSettings().catch((error) => {
 });
 refreshLastAnnotationMeta().catch((error) => {
     logError("popup.annotation_meta", error, { code: "annotation_meta_failed" });
-    setCopyEnabled(false);
+    setAnnotationActionsEnabled(false);
+    renderAnnotationItems(null);
     setAnnotationNote();
 });
 chrome.storage.onChanged.addListener((changes, areaName) => {