opendevbrowser 0.0.15 → 0.0.17

package/extension/dist/annotate-content.js

@@ -69,6 +69,7 @@ const ensureRoot = () => {
       <div class="odb-title">Annotate</div>
       <div class="odb-actions">
         <button class="odb-btn odb-btn-ghost" data-action="copy">Copy</button>
+        <button class="odb-btn odb-btn-ghost" data-action="send">Send</button>
         <button class="odb-btn odb-btn-ghost" data-action="cancel">Cancel</button>
         <button class="odb-btn odb-btn-primary" data-action="submit">Submit</button>
         <button class="odb-btn odb-btn-icon" data-action="close" aria-label="Close">×</button>
@@ -132,6 +133,12 @@ const ensureRoot = () => {
                 setCopyFeedback("Copy failed");
             });
         }
+        if (action === "send") {
+            sendPayload(undefined, "annotate_all", "Annotation payload").catch((error) => {
+                logError("annotation.send_payload", error, { code: "annotation_send_failed" });
+                setCopyFeedback("Send failed");
+            });
+        }
         if (action === "cancel") {
             cancelSession();
         }
@@ -275,9 +282,15 @@ const handleClick = (event) => {
         return;
     event.preventDefault();
     event.stopPropagation();
-    const target = state.hoverEl;
+    const clickedTarget = event.target instanceof Element && !isUiElement(event.target)
+        ? event.target
+        : null;
+    const target = clickedTarget ?? state.hoverEl;
     if (!target)
         return;
+    state.hoverEl = target;
+    state.hoverChain = buildAncestorChain(target);
+    state.hoverIndex = 0;
     if (event.shiftKey) {
         toggleSelection(target);
     }
@@ -372,17 +385,36 @@ const createNote = (element, id) => {
     note.innerHTML = `
     <div class="odb-note-header">
       <span>${describeElement(element)}</span>
-      <button class="odb-note-close" aria-label="Remove">x</button>
+      <div class="odb-actions">
+        <button class="odb-btn odb-btn-ghost" data-role="copy-item" type="button">Copy</button>
+        <button class="odb-btn odb-btn-ghost" data-role="send-item" type="button">Send</button>
+        <button class="odb-note-close" data-role="remove-item" aria-label="Remove" type="button">x</button>
+      </div>
     </div>
     <textarea class="odb-note-input" rows="3" placeholder="Add annotation..."></textarea>
   `;
-    const close = note.querySelector("button");
+    const close = note.querySelector("button[data-role='remove-item']");
     close.addEventListener("click", () => {
         note.remove();
         state.selections.delete(id);
         updateCount();
         scheduleConnectorUpdate();
     });
+    const copyButton = note.querySelector("button[data-role='copy-item']");
+    copyButton.addEventListener("click", () => {
+        void copyPayload([id], copyButton).catch((error) => {
+            logError("annotation.copy_item_payload", error, { code: "annotation_copy_item_failed", extra: { id } });
+            setButtonFeedback(copyButton, "Copy failed");
+        });
+    });
+    const sendButton = note.querySelector("button[data-role='send-item']");
+    sendButton.addEventListener("click", () => {
+        const selection = state.selections.get(id);
+        void sendPayload([id], "annotate_item", selection ? describeAnnotationItem(buildAnnotationItem(selection)) : "Annotation item", sendButton).catch((error) => {
+            logError("annotation.send_item_payload", error, { code: "annotation_send_item_failed", extra: { id } });
+            setButtonFeedback(sendButton, "Send failed");
+        });
+    });
     const textarea = note.querySelector("textarea");
     textarea.addEventListener("input", () => {
         const selection = state.selections.get(id);
@@ -495,7 +527,7 @@ const updateConnectors = () => {
         state.connectorLayer.appendChild(line);
     }
 };
-const buildPayload = async () => {
+const buildCompletePayload = async () => {
     const url = window.location.href;
     const title = document.title;
     const timestamp = new Date().toISOString();
@@ -518,6 +550,15 @@ const buildPayload = async () => {
         annotations
     };
 };
+const buildPayload = async (annotationIds) => {
+    const payload = await buildCompletePayload();
+    if (!annotationIds || annotationIds.length === 0) {
+        return payload;
+    }
+    return filterAnnotationPayload(payload, annotationIds, {
+        includeScreenshots: Boolean(payload.screenshots?.length)
+    });
+};
 const extractBase64 = (dataUrl) => {
     if (!dataUrl.includes(","))
         return dataUrl;
@@ -841,12 +882,75 @@ const mergeOptions = (options) => {
         context: options?.context ?? DEFAULT_OPTIONS.context
     };
 };
-const copyPayload = async () => {
-    const payload = await buildPayload();
+const filterAnnotationPayload = (payload, annotationIds, options = {}) => {
+    const includeScreenshots = options.includeScreenshots ?? true;
+    const wanted = new Set(annotationIds);
+    const annotations = payload.annotations.filter((annotation) => wanted.has(annotation.id));
+    const screenshotIds = new Set(annotations
+        .map((annotation) => annotation.screenshotId)
+        .filter((value) => typeof value === "string" && value.length > 0));
+    const filtered = {
+        ...payload,
+        screenshotMode: includeScreenshots ? payload.screenshotMode : "none",
+        annotations: annotations.map((annotation) => {
+            if (includeScreenshots) {
+                return annotation;
+            }
+            const { screenshotId, ...next } = annotation;
+            void screenshotId;
+            return next;
+        })
+    };
+    if (includeScreenshots) {
+        filtered.screenshots = payload.screenshots?.filter((screenshot) => screenshotIds.has(screenshot.id));
+    }
+    else {
+        delete filtered.screenshots;
+    }
+    return filtered;
+};
+const describeAnnotationItem = (item) => {
+    const selector = item.selector?.trim().length ? item.selector : item.tag;
+    const label = item.note?.trim().length ? item.note.trim() : item.text?.trim();
+    return label ? `${selector} — ${label}` : selector;
+};
+const copyPayload = async (annotationIds, button) => {
+    const payload = await buildPayload(annotationIds);
     const text = JSON.stringify(payload);
     await writeClipboard(text);
+    if (button) {
+        setButtonFeedback(button, "Copied");
+        return;
+    }
     setCopyFeedback("Copied");
 };
+const sendPayload = async (annotationIds, source, label, button) => {
+    const payload = await buildPayload(annotationIds);
+    await new Promise((resolve, reject) => {
+        chrome.runtime.sendMessage({
+            type: "annotation:sendPayload",
+            payload,
+            source,
+            label
+        }, (response) => {
+            const lastError = chrome.runtime.lastError;
+            if (lastError) {
+                reject(new Error(lastError.message));
+                return;
+            }
+            if (!response || response.ok !== true) {
+                reject(new Error(response?.error?.message ?? "Send failed"));
+                return;
+            }
+            resolve();
+        });
+    });
+    if (button) {
+        setButtonFeedback(button, "Sent");
+        return;
+    }
+    setCopyFeedback("Sent");
+};
 const writeClipboard = async (value) => {
     if (navigator.clipboard?.writeText) {
         try {
@@ -874,17 +978,23 @@ const setCopyFeedback = (label) => {
     const button = state.copyButton;
     if (!button)
         return;
-    const original = button.dataset.originalLabel ?? button.textContent ?? "Copy";
+    setButtonFeedback(button, label, true);
+};
+const setButtonFeedback = (button, label, useSharedTimer = false) => {
+    const original = button.dataset.originalLabel ?? button.textContent ?? button.getAttribute("aria-label") ?? "Action";
     if (!button.dataset.originalLabel) {
         button.dataset.originalLabel = original;
     }
     button.textContent = label;
-    if (state.copyTimeout !== null) {
+    if (useSharedTimer && state.copyTimeout !== null) {
         window.clearTimeout(state.copyTimeout);
     }
-    state.copyTimeout = window.setTimeout(() => {
+    const restore = window.setTimeout(() => {
         button.textContent = original;
     }, 1500);
+    if (useSharedTimer) {
+        state.copyTimeout = restore;
+    }
 };
 const bootstrap = () => {
     if (window.__odbAnnotate) {

package/extension/dist/annotation-payload.js

@@ -0,0 +1,163 @@
+const isRecord = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+const readString = (value) => typeof value === "string" && value.trim().length > 0 ? value : null;
+const formatCanvasUrl = (documentId, page) => {
+    const safePath = page.path && page.path.trim().length > 0 ? page.path : page.id;
+    return `canvas://${documentId}${safePath.startsWith("/") ? safePath : `/${safePath}`}`;
+};
+const readCanvasNodeText = (node) => {
+    const raw = node.props.text ?? node.metadata.text ?? node.name;
+    if (raw === undefined || raw === null) {
+        return undefined;
+    }
+    const text = typeof raw === "string" ? raw.trim() : String(raw).trim();
+    return text.length > 0 ? text.slice(0, 240) : undefined;
+};
+const formatCanvasStyleValue = (value) => {
+    if (typeof value === "number" && Number.isFinite(value)) {
+        return `${value}px`;
+    }
+    if (typeof value === "string" && value.trim().length > 0) {
+        return value;
+    }
+    return undefined;
+};
+const buildCanvasStyles = (node) => {
+    const style = isRecord(node.style) ? node.style : {};
+    return {
+        color: formatCanvasStyleValue(style.color),
+        backgroundColor: formatCanvasStyleValue(style.backgroundColor),
+        fontSize: formatCanvasStyleValue(style.fontSize),
+        fontFamily: formatCanvasStyleValue(style.fontFamily),
+        fontWeight: formatCanvasStyleValue(style.fontWeight),
+        lineHeight: formatCanvasStyleValue(style.lineHeight),
+        display: formatCanvasStyleValue(style.display),
+        position: formatCanvasStyleValue(style.position ?? "absolute")
+    };
+};
+const buildCanvasAttributes = (node) => {
+    const propsAttributes = isRecord(node.props.attributes) ? node.props.attributes : {};
+    const result = {
+        "data-node-id": node.id,
+        "data-canvas-kind": node.kind
+    };
+    for (const [key, value] of Object.entries(propsAttributes)) {
+        const next = readString(value);
+        if (next) {
+            result[key] = next;
+        }
+    }
+    const tagName = readString(node.props.tagName);
+    if (tagName) {
+        result["data-tag-name"] = tagName;
+    }
+    return result;
+};
+const resolveCanvasTag = (node) => {
+    return readString(node.props.tagName)?.toLowerCase()
+        ?? readString(isRecord(node.metadata.codeSync) ? node.metadata.codeSync.tagName : null)?.toLowerCase()
+        ?? node.kind;
+};
+export function stripAnnotationPayloadScreenshots(payload) {
+    const { screenshots, annotations, ...rest } = payload;
+    void screenshots;
+    return {
+        ...rest,
+        screenshotMode: "none",
+        annotations: annotations.map((annotation) => {
+            const { screenshotId, ...next } = annotation;
+            void screenshotId;
+            return next;
+        })
+    };
+}
+export function filterAnnotationPayload(payload, annotationIds, options = {}) {
+    const includeScreenshots = options.includeScreenshots ?? true;
+    const wanted = new Set(annotationIds);
+    const annotations = payload.annotations.filter((annotation) => wanted.has(annotation.id));
+    if (annotations.length === payload.annotations.length && includeScreenshots) {
+        return payload;
+    }
+    const screenshotIds = new Set(annotations
+        .map((annotation) => annotation.screenshotId)
+        .filter((value) => typeof value === "string" && value.length > 0));
+    const filtered = {
+        ...payload,
+        screenshotMode: includeScreenshots ? payload.screenshotMode : "none",
+        annotations: annotations.map((annotation) => {
+            if (includeScreenshots) {
+                return annotation;
+            }
+            const { screenshotId, ...next } = annotation;
+            void screenshotId;
+            return next;
+        })
+    };
+    if (includeScreenshots) {
+        filtered.screenshots = payload.screenshots?.filter((screenshot) => screenshotIds.has(screenshot.id));
+        return filtered;
+    }
+    delete filtered.screenshots;
+    return filtered;
+}
+export function describeAnnotationItem(item) {
+    const selector = item.selector?.trim().length ? item.selector : item.tag;
+    const label = item.note?.trim().length ? item.note.trim() : item.text?.trim();
+    return label ? `${selector} — ${label}` : selector;
+}
+export function formatDispatchSourceLabel(source) {
+    switch (source) {
+        case "annotate_item":
+            return "annotation item";
+        case "annotate_all":
+            return "annotation payload";
+        case "popup_item":
+            return "popup annotation item";
+        case "popup_all":
+            return "popup annotation payload";
+        case "canvas_item":
+            return "canvas annotation item";
+        case "canvas_all":
+            return "canvas annotation payload";
+        default:
+            return "annotation payload";
+    }
+}
+export function buildCanvasAnnotationPayload(options) {
+    const nodesById = new Map(options.page.nodes.map((node) => [node.id, node]));
+    const annotations = options.drafts.flatMap((draft) => {
+        const node = nodesById.get(draft.nodeId);
+        if (!node) {
+            return [];
+        }
+        const tag = resolveCanvasTag(node);
+        return [{
+                id: node.id,
+                selector: `[data-node-id="${node.id}"]`,
+                tag,
+                idAttr: node.id,
+                classes: [`canvas-node`, `canvas-${node.kind}`],
+                text: readCanvasNodeText(node),
+                rect: {
+                    x: node.rect.x,
+                    y: node.rect.y,
+                    width: node.rect.width,
+                    height: node.rect.height
+                },
+                attributes: buildCanvasAttributes(node),
+                a11y: {
+                    role: readString(isRecord(node.metadata.accessibility) ? node.metadata.accessibility.role : null) ?? undefined,
+                    label: readString(isRecord(node.metadata.accessibility) ? node.metadata.accessibility.label : null) ?? undefined
+                },
+                styles: buildCanvasStyles(node),
+                note: readString(draft.note) ?? undefined
+            }];
+    });
+    return {
+        url: formatCanvasUrl(options.document.documentId, options.page),
+        title: `${options.document.title} • ${options.page.name}`,
+        timestamp: new Date().toISOString(),
+        context: options.context,
+        screenshotMode: "none",
+        annotations
+    };
+}

package/extension/dist/background.js

@@ -3,10 +3,17 @@ import { NativePortManager } from "./services/NativePortManager.js";
 import { DEFAULT_AUTO_CONNECT, DEFAULT_AUTO_PAIR, DEFAULT_DISCOVERY_PORT, DEFAULT_NATIVE_ENABLED, DEFAULT_PAIRING_ENABLED, DEFAULT_RELAY_PORT } from "./relay-settings.js";
 import { logError } from "./logging.js";
 import { OpsRuntime } from "./ops/ops-runtime.js";
+import { CanvasRuntime } from "./canvas/canvas-runtime.js";
+import { formatDispatchSourceLabel, stripAnnotationPayloadScreenshots } from "./annotation-payload.js";
 const connection = new ConnectionManager();
+const canvasRuntime = new CanvasRuntime({
+    send: (message) => connection.sendCanvasMessage(message)
+});
 const opsRuntime = new OpsRuntime({
     send: (message) => connection.sendOpsMessage(message),
-    cdp: connection.getCdpRouter()
+    cdp: connection.getCdpRouter(),
+    getCanvasPageState: (targetId) => canvasRuntime.getPageStateByTargetId(targetId),
+    performCanvasPageAction: (targetId, action, selector) => canvasRuntime.performPageAction(targetId, action, selector)
 });
 const nativePort = new NativePortManager({
     onMessage: (payload) => {
@@ -31,8 +38,13 @@ const ANNOTATION_MAX_PAYLOAD_BYTES = 10 * 1024 * 1024;
 const ANNOTATION_REQUEST_TIMEOUT_MS = 120_000;
 const LAST_ANNOTATION_META_KEY = "annotationLastMeta";
 const LAST_ANNOTATION_PAYLOAD_KEY = "annotationLastPayloadSansScreenshots";
+const LAST_AGENT_ANNOTATION_META_KEY = "annotationAgentMeta";
+const LAST_AGENT_ANNOTATION_PAYLOAD_KEY = "annotationAgentPayloadSansScreenshots";
+const BADGE_CONNECTED_DOT_COLOR = "#16a34a";
+const BADGE_DISCONNECTED_DOT_COLOR = "#dc2626";
 const annotationSessions = new Map();
 let lastAnnotationFull = null;
+let lastAgentAnnotationFull = null;
 connection.onAnnotationCommand((command) => {
     handleRelayAnnotationCommand(command).catch((error) => {
         logError("annotation.relay_command", error, { code: "annotation_command_failed" });
@@ -41,6 +53,9 @@ connection.onAnnotationCommand((command) => {
 connection.onOpsMessage((message) => {
     opsRuntime.handleMessage(message);
 });
+connection.onCanvasMessage((message) => {
+    canvasRuntime.handleMessage(message);
+});
 const RESTRICTED_PROTOCOLS = new Set([
     "chrome:",
     "chrome-extension:",
@@ -53,10 +68,14 @@ const RESTRICTED_PROTOCOLS = new Set([
 ]);
 const updateBadge = (status) => {
     const isConnected = status === "connected";
-    chrome.action.setBadgeText({ text: isConnected ? "ON" : "OFF" });
-    chrome.action.setBadgeBackgroundColor({
-        color: isConnected ? "#20d5c6" : "#5b667a"
-    });
+    const dotColor = isConnected ? BADGE_CONNECTED_DOT_COLOR : BADGE_DISCONNECTED_DOT_COLOR;
+    chrome.action.setBadgeText({ text: "●" });
+    if (typeof chrome.action.setBadgeTextColor === "function") {
+        chrome.action.setBadgeTextColor({ color: dotColor });
+        chrome.action.setBadgeBackgroundColor({ color: [0, 0, 0, 0] });
+        return;
+    }
+    chrome.action.setBadgeBackgroundColor({ color: dotColor });
 };
 const getEffectiveStatus = () => {
     if (connection.getStatus() === "connected") {
@@ -150,6 +169,8 @@ const buildRelayHealthNote = (health) => {
             return "Annotation channel disconnected. Keep the extension open and retry.";
         case "ops_disconnected":
             return "Ops channel disconnected. Start a new session and retry.";
+        case "canvas_disconnected":
+            return "Canvas channel disconnected. Reopen the design canvas command and retry.";
         case "cdp_disconnected":
             return "No CDP clients connected. Start a session and retry.";
         case "relay_down":
@@ -297,6 +318,7 @@ const fetchRelayHealth = async (port) => {
         const cdpConnected = data.cdpConnected === true;
         const annotationConnected = data.annotationConnected === true;
         const opsConnected = data.opsConnected === true;
+        const canvasConnected = data.canvasConnected === true;
         const pairingRequired = data.pairingRequired === true;
         const ok = extensionConnected && handshake;
         return {
@@ -307,6 +329,7 @@ const fetchRelayHealth = async (port) => {
             cdpConnected,
             annotationConnected,
             opsConnected,
+            canvasConnected,
             pairingRequired
         };
     }
@@ -669,19 +692,7 @@ const validatePayloadSize = (payload) => {
 const generateAnnotationRequestId = () => {
     return crypto.randomUUID();
 };
-const stripScreenshots = (payload) => {
-    const { screenshots, annotations, ...rest } = payload;
-    void screenshots;
-    return {
-        ...rest,
-        annotations: annotations.map((item) => {
-            const { screenshotId, ...restItem } = item;
-            void screenshotId;
-            return restItem;
-        })
-    };
-};
-const buildLastAnnotationMeta = (requestId, response, hasFullPayloadInMemory) => {
+const buildLastAnnotationMeta = (requestId, response, hasFullPayloadInMemory, extras = {}) => {
     const payload = response.payload;
     const annotationCount = payload ? payload.annotations.length : undefined;
     const screenshotCount = payload?.screenshots?.length ?? 0;
@@ -689,6 +700,8 @@ const buildLastAnnotationMeta = (requestId, response, hasFullPayloadInMemory) =>
         requestId,
         status: response.status,
         error: response.error,
+        source: extras.source,
+        label: extras.label,
         url: payload?.url,
         title: payload?.title,
         timestamp: payload?.timestamp,
@@ -706,6 +719,12 @@ const persistLastAnnotation = async (meta, payload) => {
         [LAST_ANNOTATION_PAYLOAD_KEY]: payload
     });
 };
+const persistAgentAnnotation = async (meta, payload) => {
+    await setStorage({
+        [LAST_AGENT_ANNOTATION_META_KEY]: meta,
+        [LAST_AGENT_ANNOTATION_PAYLOAD_KEY]: payload
+    });
+};
 const loadPersistedLastAnnotation = async () => {
     const data = await new Promise((resolve) => {
         chrome.storage.local.get([LAST_ANNOTATION_META_KEY, LAST_ANNOTATION_PAYLOAD_KEY], (items) => resolve(items));
@@ -716,6 +735,77 @@ const loadPersistedLastAnnotation = async () => {
     const payload = payloadRecord && typeof payloadRecord === "object" ? payloadRecord : null;
     return { meta, payload };
 };
+const loadPersistedAgentAnnotation = async () => {
+    const data = await new Promise((resolve) => {
+        chrome.storage.local.get([LAST_AGENT_ANNOTATION_META_KEY, LAST_AGENT_ANNOTATION_PAYLOAD_KEY], (items) => resolve(items));
+    });
+    const metaRecord = data[LAST_AGENT_ANNOTATION_META_KEY];
+    const payloadRecord = data[LAST_AGENT_ANNOTATION_PAYLOAD_KEY];
+    const meta = metaRecord && typeof metaRecord === "object" ? metaRecord : null;
+    const payload = payloadRecord && typeof payloadRecord === "object" ? payloadRecord : null;
+    return { meta, payload };
+};
+const isAnnotationPayload = (value) => {
+    if (!value || typeof value !== "object") {
+        return false;
+    }
+    const payload = value;
+    return typeof payload.url === "string"
+        && typeof payload.timestamp === "string"
+        && typeof payload.screenshotMode === "string"
+        && Array.isArray(payload.annotations);
+};
+const storeAgentAnnotationPayload = async (payload, source, label) => {
+    if (!validatePayloadSize(payload)) {
+        throw new Error("Annotation payload exceeded size limits.");
+    }
+    const response = {
+        version: 1,
+        requestId: crypto.randomUUID(),
+        status: "ok",
+        payload
+    };
+    const meta = buildLastAnnotationMeta(response.requestId, response, true, {
+        source,
+        label: label?.trim().length ? label.trim() : formatDispatchSourceLabel(source)
+    });
+    lastAgentAnnotationFull = { meta, payload };
+    await persistAgentAnnotation(meta, stripAnnotationPayloadScreenshots(payload));
+    return meta;
+};
+const loadAgentAnnotationPayload = async (includeScreenshots) => {
+    if (includeScreenshots && lastAgentAnnotationFull) {
+        return {
+            version: 1,
+            requestId: crypto.randomUUID(),
+            status: "ok",
+            payload: lastAgentAnnotationFull.payload
+        };
+    }
+    if (lastAgentAnnotationFull) {
+        return {
+            version: 1,
+            requestId: crypto.randomUUID(),
+            status: "ok",
+            payload: stripAnnotationPayloadScreenshots(lastAgentAnnotationFull.payload)
+        };
+    }
+    const stored = await loadPersistedAgentAnnotation();
+    if (stored.payload) {
+        return {
+            version: 1,
+            requestId: crypto.randomUUID(),
+            status: "ok",
+            payload: stored.payload
+        };
+    }
+    return {
+        version: 1,
+        requestId: crypto.randomUUID(),
+        status: "error",
+        error: { code: "payload_unavailable", message: "No agent-dispatched annotation payload available." }
+    };
+};
 async function handleNativePortMessage(payload) {
     if (!payload || typeof payload !== "object") {
         return;
@@ -740,6 +830,14 @@ const handleRelayAnnotationCommand = async (command, transport = "relay") => {
         await cancelAnnotationSession(payload.requestId, transport);
         return;
     }
+    if (payload.command === "fetch_stored") {
+        const stored = await loadAgentAnnotationPayload(payload.options?.includeScreenshots === true);
+        sendAnnotationResponse({
+            ...stored,
+            requestId: payload.requestId
+        }, transport);
+        return;
+    }
     try {
         await startAnnotationSession(payload, transport);
         sendAnnotationEvent({
@@ -799,7 +897,7 @@ const handleAnnotationComplete = (requestId, payload) => {
     const meta = buildLastAnnotationMeta(requestId, response, true);
     lastAnnotationFull = { meta, payload };
     const storageMeta = { ...meta, hasFullPayloadInMemory: false };
-    const sanitizedPayload = stripScreenshots(payload);
+    const sanitizedPayload = stripAnnotationPayloadScreenshots(payload);
     persistLastAnnotation(storageMeta, sanitizedPayload).catch((error) => {
         logError("annotation.persist_sanitized_payload", error, { code: "annotation_persist_failed" });
     });
@@ -1231,9 +1329,9 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
             if (message.includeScreenshots) {
                 const response = {
                     type: "annotation:payloadResult",
-                    payload: null,
+                    payload: stored.payload,
                     meta: storedMeta,
-                    source: "none",
+                    source: stored.payload ? "storage" : "none",
                     warning: "Full payload not available; screenshots may have been dropped."
                 };
                 sendResponse(response);
@@ -1242,7 +1340,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
             if (lastAnnotationFull) {
                 const response = {
                     type: "annotation:payloadResult",
-                    payload: stripScreenshots(lastAnnotationFull.payload),
+                    payload: stripAnnotationPayloadScreenshots(lastAnnotationFull.payload),
                     meta: { ...lastAnnotationFull.meta, hasFullPayloadInMemory: true },
                     source: "memory"
                 };
@@ -1279,6 +1377,39 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
         });
         return true;
     }
+    if (message.type === "annotation:sendPayload") {
+        (async () => {
+            if (!isAnnotationPayload(message.payload)) {
+                const response = {
+                    type: "annotation:sendPayloadResult",
+                    ok: false,
+                    meta: null,
+                    error: { code: "invalid_request", message: "Invalid annotation payload." }
+                };
+                sendResponse(response);
+                return;
+            }
+            const meta = await storeAgentAnnotationPayload(message.payload, message.source ?? "popup_all", message.label);
+            const response = {
+                type: "annotation:sendPayloadResult",
+                ok: true,
+                meta: { ...meta, hasFullPayloadInMemory: true }
+            };
+            sendResponse(response);
+        })().catch((error) => {
+            const response = {
+                type: "annotation:sendPayloadResult",
+                ok: false,
+                meta: null,
+                error: {
+                    code: "payload_too_large",
+                    message: error instanceof Error ? error.message : "Annotation dispatch failed."
+                }
+            };
+            sendResponse(response);
+        });
+        return true;
+    }
     if (message.type === "annotation:capture") {
         (async () => {
             const tab = sender.tab;
@@ -1313,3 +1444,8 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     }
     return false;
 });
+chrome.runtime.onConnect.addListener((port) => {
+    if (port.name === "canvas-page") {
+        canvasRuntime.attachPort(port);
+    }
+});