opendevbrowser 0.0.15 → 0.0.17

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 } 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,16 @@ 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 defaultAnnotationNote = "No annotations captured yet.";
 const LAST_ANNOTATION_META_KEY = "annotationLastMeta";
+let lastAnnotationPayload = null;
 const setNote = (message) => {
     const next = message && message.trim() ? message : defaultNote;
     statusNote.textContent = next;
@@ -207,13 +215,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 +351,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 +430,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 +458,49 @@ 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, successMessage) => {
+    const response = await sendMessage({
+        type: "annotation:sendPayload",
+        payload,
+        source,
+        label
+    });
+    if (!response.ok) {
+        throw new Error(response.error?.message ?? "Agent dispatch failed.");
+    }
+    setAnnotationNote(successMessage);
+};
+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);
+    await sendPayloadToAgent(payload, source, label, successMessage);
+};
 const toggle = async () => {
     const isConnected = statusEl.textContent === "Connected";
     setNote();
@@ -445,49 +569,48 @@ annotationStartButton.addEventListener("click", () => {
         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 +683,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) => {

package/extension/dist/services/CDPRouter.js

@@ -64,14 +64,47 @@ export class CDPRouter {
             }
             await this.safeDetach(debuggee);
             if (allowRetry && this.isStaleTabError(error)) {
+                const attemptedTabIds = new Set([tabId]);
+                let lastStaleError = error;
                 const activeTabId = await this.tabManager.getActiveTabId();
-                if (activeTabId && activeTabId !== tabId) {
-                    return await this.attachInternal(activeTabId, false);
+                if (activeTabId && !attemptedTabIds.has(activeTabId)) {
+                    attemptedTabIds.add(activeTabId);
+                    try {
+                        return await this.attachInternal(activeTabId, false);
+                    }
+                    catch (candidateError) {
+                        if (!this.isStaleTabError(candidateError)) {
+                            throw candidateError;
+                        }
+                        lastStaleError = candidateError;
+                    }
                 }
                 const fallbackTabId = await this.tabManager.getFirstHttpTabId();
-                if (fallbackTabId && fallbackTabId !== tabId) {
-                    return await this.attachInternal(fallbackTabId, false);
+                if (fallbackTabId && !attemptedTabIds.has(fallbackTabId)) {
+                    attemptedTabIds.add(fallbackTabId);
+                    try {
+                        return await this.attachInternal(fallbackTabId, false);
+                    }
+                    catch (candidateError) {
+                        if (!this.isStaleTabError(candidateError)) {
+                            throw candidateError;
+                        }
+                        lastStaleError = candidateError;
+                    }
                 }
+                try {
+                    const createdTab = await this.tabManager.createTab("about:blank", true);
+                    if (typeof createdTab.id === "number" && !attemptedTabIds.has(createdTab.id)) {
+                        return await this.attachInternal(createdTab.id, false);
+                    }
+                }
+                catch (candidateError) {
+                    if (!this.isStaleTabError(candidateError)) {
+                        throw candidateError;
+                    }
+                    lastStaleError = candidateError;
+                }
+                throw lastStaleError;
             }
             throw error;
         }
@@ -503,7 +536,23 @@ export class CDPRouter {
         return sessionId;
     }
     async sendCommand(debuggee, method, params) {
-        return new Promise((resolve, reject) => {
+        try {
+            return await this.sendCommandOnce(debuggee, method, params);
+        }
+        catch (error) {
+            const hasChildSession = typeof debuggee.sessionId === "string";
+            if (!this.isStaleTabError(error) || hasChildSession) {
+                throw error;
+            }
+            const recovered = await this.recoverFromStaleTab(debuggee);
+            if (!recovered) {
+                throw error;
+            }
+            return await this.sendCommandOnce(recovered, method, params);
+        }
+    }
+    async sendCommandOnce(debuggee, method, params) {
+        return await new Promise((resolve, reject) => {
             chrome.debugger.sendCommand(debuggee, method, params, (result) => {
                 const lastError = chrome.runtime.lastError;
                 if (lastError) {
@@ -514,6 +563,22 @@ export class CDPRouter {
             });
         });
     }
+    async recoverFromStaleTab(debuggee) {
+        const staleTabId = typeof debuggee.tabId === "number" ? debuggee.tabId : null;
+        if (staleTabId === null) {
+            return null;
+        }
+        this.debuggees.delete(staleTabId);
+        this.detachTabState(staleTabId);
+        await this.safeDetach({ tabId: staleTabId });
+        try {
+            await this.attachInternal(staleTabId, true);
+        }
+        catch {
+            return null;
+        }
+        return this.getPrimaryDebuggee();
+    }
     isStaleTabError(error) {
         const message = error instanceof Error ? error.message : String(error);
         return message.includes("No tab with given id");

package/extension/dist/services/ConnectionManager.js

@@ -29,6 +29,8 @@ const logInfo = (message) => {
 const logWarn = (message) => {
     console.warn(`[opendevbrowser] ${message}`);
 };
+const RECONNECT_INITIAL_DELAY_MS = 12_000;
+const RECONNECT_MAX_DELAY_MS = 30_000;
 export class ConnectionManager {
     status = "disconnected";
     lastError = null;
@@ -41,7 +43,7 @@ export class ConnectionManager {
     shouldReconnect = false;
     reconnectTimer = null;
     reconnectAttempts = 0;
-    reconnectDelayMs = 500;
+    reconnectDelayMs = RECONNECT_INITIAL_DELAY_MS;
     pairingToken = DEFAULT_PAIRING_TOKEN;
     pairingEnabled = DEFAULT_PAIRING_ENABLED;
     relayPort = DEFAULT_RELAY_PORT;
@@ -49,10 +51,11 @@ export class ConnectionManager {
     relayEpoch = null;
     relayConfirmedPort = null;
     relayNotice = null;
-    maxReconnectDelayMs = 5000;
+    maxReconnectDelayMs = RECONNECT_MAX_DELAY_MS;
     connectPromise = null;
     annotationHandler = null;
     opsHandler = null;
+    canvasHandler = null;
     heartbeatTimer = null;
     heartbeatInFlight = false;
     heartbeatIntervalMs = 25_000;
@@ -89,6 +92,9 @@ export class ConnectionManager {
     onOpsMessage(handler) {
         this.opsHandler = handler;
     }
+    onCanvasMessage(handler) {
+        this.canvasHandler = handler;
+    }
     sendAnnotationResponse(response) {
         if (!this.relay)
             return;
@@ -119,6 +125,16 @@ export class ConnectionManager {
             logError("relay.send_ops_message", error, { code: "relay_send_failed" });
         }
     }
+    sendCanvasMessage(message) {
+        if (!this.relay)
+            return;
+        try {
+            this.relay.sendCanvasMessage(message);
+        }
+        catch (error) {
+            logError("relay.send_canvas_message", error, { code: "relay_send_failed" });
+        }
+    }
     getCdpRouter() {
         return this.cdp;
     }
@@ -368,6 +384,9 @@ export class ConnectionManager {
             onOpsMessage: (message) => {
                 this.opsHandler?.(message);
             },
+            onCanvasMessage: (message) => {
+                this.canvasHandler?.(message);
+            },
             onClose: (detail) => {
                 this.handleRelayClose(detail);
             }
@@ -405,7 +424,7 @@ export class ConnectionManager {
             this.setStatus("connected");
             this.startHeartbeat();
             this.reconnectAttempts = 0;
-            this.reconnectDelayMs = 500;
+            this.reconnectDelayMs = RECONNECT_INITIAL_DELAY_MS;
         }
         catch (error) {
             const detail = error instanceof Error ? error.message : "Unknown error";

package/extension/dist/services/RelayClient.js

@@ -98,6 +98,9 @@ export class RelayClient {
                         this.handlers.onOpsMessage?.(record);
                         return;
                     }
+                    if (isCanvasEnvelope(record)) {
+                        this.handlers.onCanvasMessage?.(record);
+                    }
                 });
                 this.socket.addEventListener("close", (event) => {
                     if (this.pendingHandshakeAckReject) {
@@ -181,6 +184,9 @@ export class RelayClient {
     sendOpsMessage(message) {
         this.send(message);
     }
+    sendCanvasMessage(message) {
+        this.send(message);
+    }
     async sendHealthCheck(timeoutMs = 1500) {
         return await this.sendPing(timeoutMs);
     }
@@ -272,3 +278,6 @@ const isValidPong = (value) => {
 const isOpsEnvelope = (value) => {
     return typeof value.type === "string" && value.type.startsWith("ops_");
 };
+const isCanvasEnvelope = (value) => {
+    return typeof value.type === "string" && value.type.startsWith("canvas_");
+};

package/extension/dist/services/TabManager.js

@@ -16,33 +16,56 @@ export class TabManager {
         });
     }
     async waitForTabComplete(tabId, timeoutMs = 10000) {
-        const existing = await this.getTab(tabId);
-        if (existing?.status === "complete") {
+        const isComplete = async () => {
+            const current = await this.getTab(tabId);
+            return current?.status === "complete";
+        };
+        if (await isComplete()) {
             return;
         }
         await new Promise((resolve, reject) => {
             let settled = false;
-            const timeoutId = setTimeout(() => {
+            let pollId = null;
+            const settle = (error) => {
                 if (settled)
                     return;
                 settled = true;
+                clearTimeout(timeoutId);
+                if (pollId !== null) {
+                    clearInterval(pollId);
+                }
                 chrome.tabs.onUpdated.removeListener(listener);
-                reject(new Error("Tab load timeout"));
+                if (error) {
+                    reject(error);
+                    return;
+                }
+                resolve();
+            };
+            const timeoutId = setTimeout(() => {
+                settle(new Error("Tab load timeout"));
             }, timeoutMs);
-            const listener = (updatedId, changeInfo) => {
+            const listener = (updatedId, changeInfo, tab) => {
                 if (updatedId !== tabId) {
                     return;
                 }
-                if (changeInfo.status === "complete") {
-                    if (settled)
-                        return;
-                    settled = true;
-                    clearTimeout(timeoutId);
-                    chrome.tabs.onUpdated.removeListener(listener);
-                    resolve();
+                if (changeInfo.status === "complete" || tab?.status === "complete") {
+                    settle();
                 }
             };
             chrome.tabs.onUpdated.addListener(listener);
+            const poll = () => {
+                void isComplete()
+                    .then((complete) => {
+                    if (complete) {
+                        settle();
+                    }
+                })
+                    .catch(() => {
+                    // Ignore transient tab lookup failures and let the timeout decide.
+                });
+            };
+            pollId = setInterval(poll, Math.min(250, Math.max(50, Math.floor(timeoutMs / 20))));
+            poll();
         });
     }
     async closeTab(tabId) {

package/extension/dist/types.js

@@ -1,3 +1,5 @@
 export const OPS_PROTOCOL_VERSION = "1";
 export const MAX_OPS_PAYLOAD_BYTES = 12 * 1024 * 1024;
 export const MAX_SNAPSHOT_BYTES = 2 * 1024 * 1024;
+export const CANVAS_PROTOCOL_VERSION = "1";
+export const MAX_CANVAS_PAYLOAD_BYTES = 12 * 1024 * 1024;

package/extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "OpenDevBrowser Relay",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "Optional bridge to reuse existing Chrome tabs with OpenDevBrowser.",
   "permissions": [
     "debugger",

package/extension/popup.html

@@ -376,6 +376,51 @@
         gap: 10px;
       }
 
+      .annotation-list {
+        display: grid;
+        gap: 8px;
+        margin-top: 10px;
+        max-height: 180px;
+        overflow: auto;
+      }
+
+      .annotation-item {
+        display: grid;
+        gap: 8px;
+        padding: 10px;
+        border-radius: 12px;
+        border: 1px solid var(--stroke);
+        background: var(--panel-strong);
+      }
+
+      .annotation-item-summary {
+        font-size: 11px;
+        color: var(--text);
+        line-height: 1.4;
+        word-break: break-word;
+      }
+
+      .annotation-item-meta {
+        font-size: 10px;
+        color: var(--muted);
+      }
+
+      .annotation-item-actions {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+      }
+
+      .annotation-empty {
+        font-size: 10px;
+        color: var(--muted);
+        text-align: center;
+        padding: 12px;
+        border-radius: 12px;
+        border: 1px dashed var(--stroke);
+        background: rgba(255, 255, 255, 0.03);
+      }
+
       @media (prefers-reduced-motion: reduce) {
         * {
           transition: none !important;
@@ -503,6 +548,13 @@
           <button id="annotationStart" class="secondary">Annotate</button>
           <button id="annotationCopy" class="secondary" disabled>Copy payload</button>
         </div>
+        <div class="button-row">
+          <button id="annotationSend" class="secondary" disabled>Send to agent</button>
+          <button id="annotationRefresh" class="secondary">Refresh payload</button>
+        </div>
+        <div id="annotationItems" class="annotation-list">
+          <div class="annotation-empty">No annotation items available.</div>
+        </div>
       </section>
 
       <button id="toggle" class="primary">Connect</button>