opendevbrowser 0.0.16 → 0.0.17

package/extension/dist/ops/ops-session-store.js

@@ -1,4 +1,5 @@
 import { DEFAULT_OPS_PARALLELISM_POLICY, createOpsGovernorState } from "./parallelism-governor.js";
+import { createCoordinatorId, TargetSessionCoordinator } from "./target-session-coordinator.js";
 export class OpsRefStore {
     refsByTarget = new Map();
     snapshotByTarget = new Map();
@@ -7,7 +8,7 @@ export class OpsRefStore {
         for (const entry of entries) {
             map.set(entry.ref, entry);
         }
-        const snapshotId = createId();
+        const snapshotId = createCoordinatorId();
         this.refsByTarget.set(targetId, map);
         this.snapshotByTarget.set(targetId, snapshotId);
         return { snapshotId, targetId, count: entries.length };
@@ -31,32 +32,12 @@ export class OpsRefStore {
     }
 }
 export class OpsSessionStore {
-    sessions = new Map();
-    tabToSession = new Map();
+    coordinator = new TargetSessionCoordinator();
     createSession(ownerClientId, tabId, leaseId, info, options) {
-        const id = createId();
-        const targetId = `tab-${tabId}`;
         const parallelismPolicy = options?.parallelismPolicy ?? DEFAULT_OPS_PARALLELISM_POLICY;
-        const target = {
-            targetId,
-            tabId,
-            url: info?.url,
-            title: info?.title
-        };
-        const session = {
-            id,
-            ownerClientId,
-            leaseId,
-            state: "active",
-            tabId,
-            targetId,
-            activeTargetId: targetId,
-            createdAt: Date.now(),
-            lastUsedAt: Date.now(),
-            targets: new Map([[targetId, target]]),
-            nameToTarget: new Map(),
-            targetToName: new Map(),
+        return this.coordinator.createSession(ownerClientId, tabId, leaseId, info, {
             refStore: new OpsRefStore(),
+            syntheticTargets: new Map(),
             consoleEvents: [],
             networkEvents: [],
             networkRequests: new Map(),
@@ -72,132 +53,58 @@ export class OpsSessionStore {
             frozenSignals: 0,
             parallelismPolicy,
             parallelismState: createOpsGovernorState(parallelismPolicy, "extensionOpsHeaded")
-        };
-        this.sessions.set(id, session);
-        this.tabToSession.set(tabId, id);
-        return session;
+        });
     }
     get(sessionId) {
-        return this.sessions.get(sessionId) ?? null;
+        return this.coordinator.get(sessionId);
     }
     getByTabId(tabId) {
-        const id = this.tabToSession.get(tabId);
-        if (!id)
-            return null;
-        return this.sessions.get(id) ?? null;
+        return this.coordinator.getByTabId(tabId);
     }
     listOwnedBy(clientId) {
-        return Array.from(this.sessions.values()).filter((session) => session.ownerClientId === clientId);
+        return this.coordinator.listOwnedBy(clientId);
     }
     delete(sessionId) {
-        const session = this.sessions.get(sessionId) ?? null;
-        if (!session)
-            return null;
-        this.sessions.delete(sessionId);
-        for (const target of session.targets.values()) {
-            this.tabToSession.delete(target.tabId);
-        }
-        return session;
+        return this.coordinator.delete(sessionId);
     }
     addTarget(sessionId, tabId, info) {
-        const session = this.requireSession(sessionId);
-        const targetId = `tab-${tabId}`;
-        const target = {
-            targetId,
-            tabId,
-            url: info?.url,
-            title: info?.title
-        };
-        session.targets.set(targetId, target);
-        this.tabToSession.set(tabId, sessionId);
-        if (!session.activeTargetId) {
-            session.activeTargetId = targetId;
-        }
-        return target;
+        return this.coordinator.addTarget(sessionId, tabId, info);
     }
     removeTarget(sessionId, targetId) {
+        const target = this.coordinator.removeTarget(sessionId, targetId);
         const session = this.requireSession(sessionId);
-        const target = session.targets.get(targetId) ?? null;
         if (!target)
             return null;
-        session.targets.delete(targetId);
-        this.tabToSession.delete(target.tabId);
-        const name = session.targetToName.get(targetId);
-        if (name) {
-            session.targetToName.delete(targetId);
-            session.nameToTarget.delete(name);
-        }
-        if (session.activeTargetId === targetId) {
-            const [first] = session.targets.keys();
-            session.activeTargetId = first ?? "";
-        }
         session.targetQueues.delete(targetId);
         session.targetQueueDepth.delete(targetId);
         session.targetQueueOldestAt.delete(targetId);
         session.refStore.clearTarget(targetId);
+        session.syntheticTargets.delete(targetId);
         return target;
     }
     getTargetIdByTabId(sessionId, tabId) {
-        const session = this.requireSession(sessionId);
-        for (const target of session.targets.values()) {
-            if (target.tabId === tabId) {
-                return target.targetId;
-            }
-        }
-        return null;
+        return this.coordinator.getTargetIdByTabId(sessionId, tabId);
     }
     removeTargetByTabId(sessionId, tabId) {
-        const targetId = this.getTargetIdByTabId(sessionId, tabId);
+        const targetId = this.coordinator.getTargetIdByTabId(sessionId, tabId);
         if (!targetId)
             return null;
         return this.removeTarget(sessionId, targetId);
     }
     setActiveTarget(sessionId, targetId) {
-        const session = this.requireSession(sessionId);
-        if (!session.targets.has(targetId)) {
-            throw new Error(`Unknown targetId: ${targetId}`);
-        }
-        session.activeTargetId = targetId;
+        this.coordinator.setActiveTarget(sessionId, targetId);
     }
     setName(sessionId, targetId, name) {
-        const session = this.requireSession(sessionId);
-        const trimmed = name.trim();
-        if (!trimmed) {
-            throw new Error("Name must be non-empty");
-        }
-        if (!session.targets.has(targetId)) {
-            throw new Error(`Unknown targetId: ${targetId}`);
-        }
-        const existing = session.nameToTarget.get(trimmed);
-        if (existing && existing !== targetId) {
-            throw new Error(`Name already in use: ${trimmed}`);
-        }
-        const previousName = session.targetToName.get(targetId);
-        if (previousName && previousName !== trimmed) {
-            session.nameToTarget.delete(previousName);
-        }
-        session.nameToTarget.set(trimmed, targetId);
-        session.targetToName.set(targetId, trimmed);
+        this.coordinator.setName(sessionId, targetId, name);
     }
     getTargetIdByName(sessionId, name) {
-        const session = this.requireSession(sessionId);
-        return session.nameToTarget.get(name.trim()) ?? null;
+        return this.coordinator.getTargetIdByName(sessionId, name);
     }
     listNamedTargets(sessionId) {
-        const session = this.requireSession(sessionId);
-        return Array.from(session.nameToTarget.entries()).map(([name, targetId]) => ({ name, targetId }));
+        return this.coordinator.listNamedTargets(sessionId);
     }
     requireSession(sessionId) {
-        const session = this.sessions.get(sessionId);
-        if (!session) {
-            throw new Error(`Unknown sessionId: ${sessionId}`);
-        }
-        return session;
+        return this.coordinator.requireSession(sessionId);
     }
 }
-const createId = () => {
-    if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
-        return crypto.randomUUID();
-    }
-    return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
-};
+export const createOpsSessionId = () => createCoordinatorId();

package/extension/dist/ops/target-session-coordinator.js

@@ -0,0 +1,157 @@
+export class TargetSessionCoordinator {
+    sessions = new Map();
+    tabToSession = new Map();
+    createSession(ownerClientId, tabId, leaseId, info, extra, sessionId) {
+        const id = sessionId ?? createCoordinatorId();
+        const targetId = `tab-${tabId}`;
+        const target = {
+            targetId,
+            tabId,
+            url: info?.url,
+            title: info?.title
+        };
+        const createdAt = Date.now();
+        const session = {
+            id,
+            ownerClientId,
+            leaseId,
+            state: "active",
+            tabId,
+            targetId,
+            activeTargetId: targetId,
+            createdAt,
+            lastUsedAt: createdAt,
+            targets: new Map([[targetId, target]]),
+            nameToTarget: new Map(),
+            targetToName: new Map(),
+            ...extra
+        };
+        this.sessions.set(id, session);
+        this.tabToSession.set(tabId, id);
+        return session;
+    }
+    get(sessionId) {
+        return this.sessions.get(sessionId) ?? null;
+    }
+    getByTabId(tabId) {
+        const sessionId = this.tabToSession.get(tabId);
+        if (!sessionId) {
+            return null;
+        }
+        return this.sessions.get(sessionId) ?? null;
+    }
+    listOwnedBy(clientId) {
+        return Array.from(this.sessions.values()).filter((session) => session.ownerClientId === clientId);
+    }
+    delete(sessionId) {
+        const session = this.sessions.get(sessionId) ?? null;
+        if (!session) {
+            return null;
+        }
+        this.sessions.delete(sessionId);
+        for (const target of session.targets.values()) {
+            this.tabToSession.delete(target.tabId);
+        }
+        return session;
+    }
+    addTarget(sessionId, tabId, info) {
+        const session = this.requireSession(sessionId);
+        const targetId = `tab-${tabId}`;
+        const target = {
+            targetId,
+            tabId,
+            url: info?.url,
+            title: info?.title
+        };
+        session.targets.set(targetId, target);
+        this.tabToSession.set(tabId, sessionId);
+        if (!session.activeTargetId) {
+            session.activeTargetId = targetId;
+        }
+        return target;
+    }
+    removeTarget(sessionId, targetId) {
+        const session = this.requireSession(sessionId);
+        const target = session.targets.get(targetId) ?? null;
+        if (!target) {
+            return null;
+        }
+        session.targets.delete(targetId);
+        this.tabToSession.delete(target.tabId);
+        const name = session.targetToName.get(targetId);
+        if (name) {
+            session.targetToName.delete(targetId);
+            session.nameToTarget.delete(name);
+        }
+        if (session.activeTargetId === targetId) {
+            const [first] = session.targets.keys();
+            session.activeTargetId = first ?? "";
+        }
+        return target;
+    }
+    getTargetIdByTabId(sessionId, tabId) {
+        const session = this.requireSession(sessionId);
+        for (const target of session.targets.values()) {
+            if (target.tabId === tabId) {
+                return target.targetId;
+            }
+        }
+        return null;
+    }
+    removeTargetByTabId(sessionId, tabId) {
+        const targetId = this.getTargetIdByTabId(sessionId, tabId);
+        if (!targetId) {
+            return null;
+        }
+        return this.removeTarget(sessionId, targetId);
+    }
+    setActiveTarget(sessionId, targetId) {
+        const session = this.requireSession(sessionId);
+        if (!session.targets.has(targetId)) {
+            throw new Error(`Unknown targetId: ${targetId}`);
+        }
+        session.activeTargetId = targetId;
+    }
+    setName(sessionId, targetId, name) {
+        const session = this.requireSession(sessionId);
+        const trimmed = name.trim();
+        if (!trimmed) {
+            throw new Error("Name must be non-empty");
+        }
+        if (!session.targets.has(targetId)) {
+            throw new Error(`Unknown targetId: ${targetId}`);
+        }
+        const existing = session.nameToTarget.get(trimmed);
+        if (existing && existing !== targetId) {
+            throw new Error(`Name already in use: ${trimmed}`);
+        }
+        const previousName = session.targetToName.get(targetId);
+        if (previousName && previousName !== trimmed) {
+            session.nameToTarget.delete(previousName);
+        }
+        session.nameToTarget.set(trimmed, targetId);
+        session.targetToName.set(targetId, trimmed);
+    }
+    getTargetIdByName(sessionId, name) {
+        const session = this.requireSession(sessionId);
+        return session.nameToTarget.get(name.trim()) ?? null;
+    }
+    listNamedTargets(sessionId) {
+        const session = this.requireSession(sessionId);
+        return Array.from(session.nameToTarget.entries()).map(([name, targetId]) => ({ name, targetId }));
+    }
+    requireSession(sessionId) {
+        const session = this.sessions.get(sessionId);
+        if (!session) {
+            throw new Error(`Unknown sessionId: ${sessionId}`);
+        }
+        session.lastUsedAt = Date.now();
+        return session;
+    }
+}
+export const createCoordinatorId = () => {
+    if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+        return crypto.randomUUID();
+    }
+    return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+};

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/ConnectionManager.js

@@ -55,6 +55,7 @@ export class ConnectionManager {
     connectPromise = null;
     annotationHandler = null;
     opsHandler = null;
+    canvasHandler = null;
     heartbeatTimer = null;
     heartbeatInFlight = false;
     heartbeatIntervalMs = 25_000;
@@ -91,6 +92,9 @@ export class ConnectionManager {
     onOpsMessage(handler) {
         this.opsHandler = handler;
     }
+    onCanvasMessage(handler) {
+        this.canvasHandler = handler;
+    }
     sendAnnotationResponse(response) {
         if (!this.relay)
             return;
@@ -121,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;
     }
@@ -370,6 +384,9 @@ export class ConnectionManager {
             onOpsMessage: (message) => {
                 this.opsHandler?.(message);
             },
+            onCanvasMessage: (message) => {
+                this.canvasHandler?.(message);
+            },
             onClose: (detail) => {
                 this.handleRelayClose(detail);
             }