opendevbrowser 0.0.16 → 0.0.18

package/extension/dist/annotate-content.css

@@ -23,7 +23,8 @@
   position: fixed;
   top: 16px;
   right: 16px;
-  width: 320px;
+  width: min(396px, calc(100vw - 24px));
+  max-width: calc(100vw - 24px);
   background: var(--odb-panel);
   border: 1px solid var(--odb-border);
   border-radius: 14px;
@@ -37,21 +38,29 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   padding: 12px 14px 8px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   cursor: grab;
   user-select: none;
 }
 
-.odb-title {
+.odb-panel-header .odb-title {
   font-weight: 600;
   letter-spacing: 0.02em;
   font-size: 13px;
+  white-space: nowrap;
+  flex: 0 0 auto;
 }
 
-.odb-actions {
+.odb-panel-header .odb-actions {
   display: flex;
-  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-left: auto;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 .odb-btn {
@@ -65,8 +74,8 @@
 }
 
 .odb-btn-icon {
-  width: 24px;
-  height: 24px;
+  width: 28px;
+  height: 28px;
   padding: 0;
   line-height: 1;
   font-weight: 600;

package/extension/dist/annotate-content.js

@@ -1,4 +1,5 @@
 "use strict";
+// This file is injected with chrome.scripting.executeScript, so keep runtime helpers local.
 const logError = (context, error, options) => {
     const detail = error instanceof Error
         ? { message: error.message, name: error.name, stack: error.stack }
@@ -27,6 +28,8 @@ const DEFAULT_OPTIONS = {
     includeScreenshots: false,
     debug: true
 };
+const BOOT_ID = crypto.randomUUID();
+const annotationWindow = window;
 const state = {
     session: { requestId: null, options: DEFAULT_OPTIONS, active: false, completed: false },
     selections: new Map(),
@@ -69,6 +72,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 +136,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();
         }
@@ -159,6 +169,7 @@ const teardown = () => {
     state.hoverIndex = 0;
     state.session.active = false;
     state.session.completed = false;
+    syncBridgeActive();
     if (state.root) {
         state.root.remove();
     }
@@ -194,6 +205,16 @@ const removeListeners = () => {
     window.removeEventListener("scroll", scheduleConnectorUpdate, true);
     window.removeEventListener("resize", scheduleConnectorUpdate, true);
 };
+const syncBridgeActive = () => {
+    if (annotationWindow.__odbAnnotate) {
+        annotationWindow.__odbAnnotate.active = state.session.active;
+    }
+};
+const buildBridgeStatus = () => ({
+    ok: true,
+    bootId: BOOT_ID,
+    active: state.session.active
+});
 const isUiElement = (element) => {
     if (!element)
         return false;
@@ -214,6 +235,7 @@ const startSession = (requestId, options) => {
         state.globalNote.value = state.session.options.context;
     }
     state.session.active = true;
+    syncBridgeActive();
     addListeners();
     scheduleConnectorUpdate();
 };
@@ -246,6 +268,7 @@ const submitSession = async () => {
 const finalizeSubmission = () => {
     state.session.completed = true;
     state.session.active = false;
+    syncBridgeActive();
     removeListeners();
     if (state.highlight) {
         state.highlight.style.opacity = "0";
@@ -275,9 +298,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 +401,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 +543,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 +566,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 +898,85 @@ 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 formatAnnotationDispatchReceipt = (receipt) => {
+    if (!receipt) {
+        return "Stored only; fetch with annotate --stored";
+    }
+    if (receipt.deliveryState === "delivered" || receipt.deliveryState === "consumed") {
+        return "Delivered to agent";
+    }
+    return "Stored only; fetch with annotate --stored";
+};
+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);
+    const response = 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;
+            }
+            const typed = response;
+            if (!typed || typed.ok !== true) {
+                reject(new Error(typed?.error?.message ?? "Send failed"));
+                return;
+            }
+            resolve(typed);
+        });
+    });
+    if (button) {
+        setButtonFeedback(button, formatAnnotationDispatchReceipt(response.receipt));
+        return;
+    }
+    setCopyFeedback(formatAnnotationDispatchReceipt(response.receipt));
+};
 const writeClipboard = async (value) => {
     if (navigator.clipboard?.writeText) {
         try {
@@ -874,23 +1004,48 @@ 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) {
-        return;
+const handleRuntimeMessage = (message, _sender, sendResponse) => {
+    if (message.type === "annotation:ping") {
+        sendResponse(buildBridgeStatus());
+        return true;
     }
-    window.__odbAnnotate = {
+    if (message.type === "annotation:toggle") {
+        annotationWindow.__odbAnnotate?.toggle();
+        sendResponse(buildBridgeStatus());
+        return true;
+    }
+    if (message.type === "annotation:start") {
+        annotationWindow.__odbAnnotate?.start(message.requestId, message.options);
+        sendResponse(buildBridgeStatus());
+        return true;
+    }
+    if (message.type === "annotation:cancel") {
+        annotationWindow.__odbAnnotate?.cancel(message.requestId);
+        sendResponse(buildBridgeStatus());
+        return true;
+    }
+    return false;
+};
+const bootstrap = () => {
+    annotationWindow.__odbAnnotate = {
         active: false,
         toggle: () => {
             if (state.session.active) {
@@ -908,27 +1063,12 @@ const bootstrap = () => {
         },
         cancel: () => cancelSession()
     };
-    chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-        if (message.type === "annotation:ping") {
-            sendResponse({ ok: true });
-            return true;
-        }
-        if (message.type === "annotation:toggle") {
-            window.__odbAnnotate?.toggle();
-            sendResponse({ ok: true });
-            return true;
-        }
-        if (message.type === "annotation:start") {
-            window.__odbAnnotate?.start(message.requestId, message.options);
-            sendResponse({ ok: true });
-            return true;
-        }
-        if (message.type === "annotation:cancel") {
-            window.__odbAnnotate?.cancel(message.requestId);
-            sendResponse({ ok: true });
-            return true;
-        }
-        return false;
-    });
+    syncBridgeActive();
+    const previousListener = annotationWindow.__odbAnnotateMessageListener;
+    if (previousListener) {
+        chrome.runtime.onMessage.removeListener?.(previousListener);
+    }
+    annotationWindow.__odbAnnotateMessageListener = handleRuntimeMessage;
+    chrome.runtime.onMessage.addListener(handleRuntimeMessage);
 };
 bootstrap();

package/extension/dist/annotation-payload.js

@@ -0,0 +1,199 @@
+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 formatAnnotationDispatchReceipt(receipt) {
+    if (!receipt) {
+        return "Stored only; fetch with annotate --stored";
+    }
+    if (receipt.deliveryState === "delivered" || receipt.deliveryState === "consumed") {
+        return "Delivered to agent";
+    }
+    return "Stored only; fetch with annotate --stored";
+}
+export function buildCanvasAnnotationPayload(options) {
+    const nodesById = new Map(options.page.nodes.map((node) => [node.id, node]));
+    const annotations = options.drafts.flatMap((draft) => {
+        if (draft.kind === "region") {
+            const annotation = {
+                id: draft.regionId,
+                selector: `[data-canvas-region="${draft.regionId}"]`,
+                tag: "canvas-region",
+                idAttr: draft.regionId,
+                classes: ["canvas-region"],
+                text: readString(draft.label) ?? undefined,
+                rect: {
+                    x: draft.rect.x,
+                    y: draft.rect.y,
+                    width: draft.rect.width,
+                    height: draft.rect.height
+                },
+                attributes: {
+                    "data-canvas-region": draft.regionId,
+                    "data-canvas-kind": "region"
+                },
+                a11y: {},
+                styles: {
+                    position: "absolute"
+                },
+                note: readString(draft.note) ?? undefined
+            };
+            return [annotation];
+        }
+        const node = nodesById.get(draft.nodeId);
+        if (!node) {
+            return [];
+        }
+        const tag = resolveCanvasTag(node);
+        const annotation = {
+            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 [annotation];
+    });
+    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
+    };
+}