@agent-native/pinpoint 0.1.1 → 0.1.5

package/README.md

@@ -234,6 +234,7 @@ All options can be passed as props to `<Pinpoint />` or as the config object to
 | `outputFormat`       | `'compact' \| 'standard' \| 'detailed'` | `'standard'` | Detail level in agent output                      |
 | `autoSubmit`         | `boolean`                               | `true`       | Auto-submit annotations to agent chat             |
 | `clearOnSend`        | `boolean`                               | `false`      | Clear pins after sending                          |
+| `sendToAgent`        | `(output) => void \| Promise<void>`     | —            | Custom bridge for annotation delivery             |
 | `blockInteractions`  | `boolean`                               | `false`      | Block page clicks during selection                |
 | `compactPopup`       | `boolean`                               | `true`       | Hide technical details behind toggle              |
 | `freezeJSTimers`     | `boolean`                               | `false`      | Freeze JS timers during selection                 |
@@ -395,6 +396,9 @@ Inside [Builder.io's Fusion](https://builder.io), annotations are sent via `send
 
 No additional configuration needed when running inside a Builder.io project.
 
+Hosts with their own chat implementation can pass `sendToAgent` to reuse Pinpoint's pin,
+draw, queue, and prompt UI while delivering `{ message, context, submit }` themselves.
+
 ## Architecture
 
 - **SolidJS overlay** in **Shadow DOM** — zero interference with host app styles or React reconciliation

package/dist/{agent-context-76ZW6ODH.js → agent-context-OICFLRJ7.js}

@@ -3,11 +3,11 @@ import {
   formatPinsForAgent,
   formatQueueForAgent,
   formatRichPinContext
-} from "./chunk-EPXBFDY6.js";
+} from "./chunk-C5OZ7ZT5.js";
 import "./chunk-BB7X7W3H.js";
 export {
   formatPinsForAgent,
   formatQueueForAgent,
   formatRichPinContext
 };
-//# sourceMappingURL=agent-context-76ZW6ODH.js.map
+//# sourceMappingURL=agent-context-OICFLRJ7.js.map

package/dist/{chunk-EPXBFDY6.js → chunk-C5OZ7ZT5.js}

@@ -85,4 +85,4 @@ export {
   formatPinsForAgent,
   formatQueueForAgent
 };
-//# sourceMappingURL=chunk-EPXBFDY6.js.map
+//# sourceMappingURL=chunk-C5OZ7ZT5.js.map

package/dist/chunk-C5OZ7ZT5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/output/agent-context.ts"],"sourcesContent":["// @agent-native/pinpoint — Split output for sendToAgentChat()\n// MIT License\n//\n// Splits annotation output into { message, context } for the agent chat bridge.\n// The message is shown in chat UI. The context is hidden, appended for the agent.\n\nimport type {\n  AgentOutput,\n  Pin,\n  OutputFormat,\n  QueuedAnnotation,\n} from \"../types/index.js\";\nimport { formatPins } from \"./formatter.js\";\n\nexport type { AgentOutput } from \"../types/index.js\";\n\n/**\n * Format a single pin into rich context for the agent.\n *\n * ```\n * [Annotation on <button class=\"primary\"> in <Header> component]\n * Comment: \"This button should be blue instead of gray\"\n * Element: button.primary at (120, 45)\n * Source: src/components/Header.tsx:42\n * ```\n */\nexport function formatRichPinContext(pin: Pin): string {\n  const lines: string[] = [];\n\n  // Build element descriptor\n  const tagName = pin.element.tagName.toLowerCase();\n  const classes =\n    pin.element.classNames.length > 0\n      ? ` class=\"${pin.element.classNames.join(\" \")}\"`\n      : \"\";\n  const component = pin.framework?.componentPath\n    ? ` in ${pin.framework.componentPath} component`\n    : \"\";\n\n  lines.push(`[Annotation on <${tagName}${classes}>${component}]`);\n  lines.push(`Comment: \"${pin.comment}\"`);\n\n  const rect = pin.element.boundingRect;\n  const classStr =\n    pin.element.classNames.length > 0\n      ? `.${pin.element.classNames.join(\".\")}`\n      : \"\";\n  lines.push(\n    `Element: ${tagName}${classStr} at (${Math.round(rect.x)}, ${Math.round(rect.y)})`,\n  );\n\n  if (pin.framework?.sourceFile) {\n    lines.push(`Source: ${pin.framework.sourceFile}`);\n  }\n\n  if (pin.element.textContent) {\n    const truncated = pin.element.textContent.slice(0, 80);\n    lines.push(\n      `Text: \"${truncated}${pin.element.textContent.length > 80 ? \"...\" : \"\"}\"`,\n    );\n  }\n\n  return lines.join(\"\\n\");\n}\n\n/**\n * Format pins for agent chat.\n * The full formatted output goes into message (visible in chat UI) so the user\n * can see exactly what context the agent is working with.\n */\nexport function formatPinsForAgent(\n  pins: Pin[],\n  format: OutputFormat = \"standard\",\n): AgentOutput {\n  if (pins.length === 0) {\n    return { message: \"No annotations to send.\", context: \"\" };\n  }\n\n  // Use rich context format for each pin\n  const richAnnotations = pins\n    .map((pin) => formatRichPinContext(pin))\n    .join(\"\\n\\n\");\n\n  const instruction = `The user has annotated ${pins.length} element${pins.length === 1 ? \"\" : \"s\"} on the page with visual feedback. Review each annotation and make the requested changes.\\n\\n`;\n\n  // Also include the structured format as context for the agent\n  const details = formatPins(pins, format);\n  const message = instruction + richAnnotations;\n\n  return { message, context: details };\n}\n\n/**\n * Format queued annotations for batch sending.\n */\nexport function formatQueueForAgent(\n  queue: QueuedAnnotation[],\n  format: OutputFormat = \"standard\",\n): AgentOutput {\n  if (queue.length === 0) {\n    return { message: \"No queued annotations to send.\", context: \"\" };\n  }\n\n  const parts: string[] = [];\n  const pins: Pin[] = [];\n\n  parts.push(\n    `The user has queued ${queue.length} annotation${queue.length === 1 ? \"\" : \"s\"} for batch review. Process each one:\\n`,\n  );\n\n  for (let i = 0; i < queue.length; i++) {\n    const item = queue[i];\n    parts.push(`--- Item ${i + 1} ---`);\n\n    if (item.pin) {\n      parts.push(formatRichPinContext(item.pin));\n      pins.push(item.pin);\n    }\n\n    if (item.drawings && item.drawings.length > 0) {\n      parts.push(`[Drawing: ${item.drawings.length} stroke(s) on the page]`);\n      for (const stroke of item.drawings) {\n        const startPt = stroke.points[0];\n        const endPt = stroke.points[stroke.points.length - 1];\n        parts.push(\n          `  ${stroke.type} from (${Math.round(startPt.x)}, ${Math.round(startPt.y)}) to (${Math.round(endPt.x)}, ${Math.round(endPt.y)}) [${stroke.color}]`,\n        );\n      }\n    }\n\n    if (item.textNotes && item.textNotes.length > 0) {\n      for (const note of item.textNotes) {\n        parts.push(\n          `[Text note at (${Math.round(note.x)}, ${Math.round(note.y)}): \"${note.text}\"]`,\n        );\n      }\n    }\n\n    parts.push(\"\");\n  }\n\n  const message = parts.join(\"\\n\");\n  const context = pins.length > 0 ? formatPins(pins, format) : \"\";\n\n  return { message, context };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-5OW42OKO.js → chunk-SI7E6GTM.js}

@@ -2955,14 +2955,40 @@ var LINE_WIDTHS = [{
   width: 8,
   name: "Thick"
 }];
+var EDGE_GAP = 16;
+var COLLAPSED_TOOLBAR_SIZE = 60;
+var EXPANDED_TOOLBAR_WIDTH = 320;
+var AGENT_SIDEBAR_SELECTOR = ".agent-sidebar-panel";
+function clampRightOffset(right, toolbarWidth) {
+  if (typeof window === "undefined") return right;
+  const maxRight = Math.max(0, window.innerWidth - toolbarWidth - EDGE_GAP);
+  return Math.min(right, maxRight);
+}
+function getVisibleRightSidebarInset() {
+  if (typeof window === "undefined") return 0;
+  let inset = 0;
+  for (const panel of document.querySelectorAll(AGENT_SIDEBAR_SELECTOR)) {
+    const style2 = window.getComputedStyle(panel);
+    if (style2.display === "none" || style2.visibility === "hidden" || panel.getAttribute("aria-hidden") === "true") {
+      continue;
+    }
+    const rect = panel.getBoundingClientRect();
+    const isVisible = rect.width > 0 && rect.height > 0;
+    const isAnchoredToRight = rect.right >= window.innerWidth - 1 && rect.left < window.innerWidth - 1;
+    if (!isVisible || !isAnchoredToRight) continue;
+    inset = Math.max(inset, Math.ceil(window.innerWidth - rect.left));
+  }
+  return inset;
+}
 var Toolbar = (props) => {
   const [pos, setPos] = createSignal(props.position ? {
     right: window.innerWidth - props.position.x,
     bottom: window.innerHeight - props.position.y
   } : {
-    right: 16,
-    bottom: 16
+    right: EDGE_GAP,
+    bottom: EDGE_GAP
   });
+  const [reservedRight, setReservedRight] = createSignal(0);
   const [dragging, setDragging] = createSignal(false);
   const [dragStart, setDragStart] = createSignal({
     x: 0,
@@ -2971,6 +2997,39 @@ var Toolbar = (props) => {
     bottom: 0
   });
   const [didDrag, setDidDrag] = createSignal(false);
+  onMount(() => {
+    if (typeof window === "undefined") return;
+    let resizeObserver;
+    const updateReservedRight = () => {
+      setReservedRight(getVisibleRightSidebarInset());
+      resizeObserver?.disconnect();
+      if (typeof ResizeObserver === "undefined") return;
+      resizeObserver = new ResizeObserver(() => {
+        setReservedRight(getVisibleRightSidebarInset());
+      });
+      for (const panel of document.querySelectorAll(AGENT_SIDEBAR_SELECTOR)) {
+        resizeObserver.observe(panel);
+      }
+    };
+    updateReservedRight();
+    const mutationObserver = new MutationObserver(updateReservedRight);
+    mutationObserver.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["class", "style", "aria-hidden"],
+      childList: true,
+      subtree: true
+    });
+    window.addEventListener("resize", updateReservedRight);
+    onCleanup(() => {
+      mutationObserver.disconnect();
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", updateReservedRight);
+    });
+  });
+  const toolbarRight = () => {
+    const toolbarWidth = props.expanded ? EXPANDED_TOOLBAR_WIDTH : COLLAPSED_TOOLBAR_SIZE;
+    return clampRightOffset((props.expanded ? EDGE_GAP : pos().right) + reservedRight(), toolbarWidth);
+  };
   function handleMouseDown(e) {
     if (props.expanded) return;
     setDragging(true);
@@ -2986,9 +3045,10 @@ var Toolbar = (props) => {
       const start = dragStart();
       const dx = e2.clientX - start.x;
       const dy = e2.clientY - start.y;
+      const maxRight = Math.max(0, window.innerWidth - reservedRight() - COLLAPSED_TOOLBAR_SIZE);
       setPos({
-        right: Math.max(0, Math.min(window.innerWidth - 60, start.right - dx)),
-        bottom: Math.max(0, Math.min(window.innerHeight - 60, start.bottom - dy))
+        right: Math.max(0, Math.min(maxRight, start.right - dx)),
+        bottom: Math.max(0, Math.min(window.innerHeight - COLLAPSED_TOOLBAR_SIZE, start.bottom - dy))
       });
     };
     const handleUp = () => {
@@ -3347,10 +3407,10 @@ var Toolbar = (props) => {
     createRenderEffect((_p$) => {
       var _v$ = `pp-toolbar ${props.expanded ? "pp-toolbar--expanded" : "pp-toolbar--collapsed"}`, _v$2 = {
         ...props.expanded ? {
-          bottom: "16px",
-          right: "16px"
+          bottom: `${EDGE_GAP}px`,
+          right: `${toolbarRight()}px`
         } : {
-          right: `${pos().right}px`,
+          right: `${toolbarRight()}px`,
           bottom: `${pos().bottom}px`
         }
       };
@@ -4076,6 +4136,24 @@ var PinpointApp = (props) => {
   const [blockInteractions, setBlockInteractions] = createSignal(props.config.blockInteractions ?? false);
   const [autoSubmit, setAutoSubmit] = createSignal(props.config.autoSubmit ?? true);
   const [compactPopup, setCompactPopup] = createSignal(props.config.compactPopup ?? true);
+  async function deliverToAgent(output) {
+    const agentOutput = {
+      ...output,
+      submit: output.submit ?? autoSubmit()
+    };
+    if (props.config.sendToAgent) {
+      await props.config.sendToAgent(agentOutput);
+      return;
+    }
+    try {
+      const {
+        sendToAgentChat
+      } = await import("@agent-native/core/client");
+      sendToAgentChat(agentOutput);
+    } catch {
+      await navigator.clipboard.writeText([agentOutput.message, agentOutput.context].filter(Boolean).join("\n\n"));
+    }
+  }
   const storage = props.config.storage || (props.config.endpoint ? new RestClient(props.config.endpoint) : new MemoryStore());
   const picker = new ElementPicker({
     ignoreSelector: "#pinpoint-root, [data-pinpoint-marker]",
@@ -4353,25 +4431,15 @@ var PinpointApp = (props) => {
     if (items.length === 0) return;
     const {
       formatQueueForAgent
-    } = await import("./agent-context-76ZW6ODH.js");
+    } = await import("./agent-context-OICFLRJ7.js");
     const {
       message,
       context
     } = formatQueueForAgent(items, outputFormat());
-    try {
-      const {
-        sendToAgentChat
-      } = await import("@agent-native/core/client");
-      sendToAgentChat({
-        message,
-        context,
-        submit: autoSubmit()
-      });
-    } catch {
-      await navigator.clipboard.writeText(`${message}
-
-${context}`);
-    }
+    await deliverToAgent({
+      message,
+      context
+    });
     setQueue([]);
     if (clearOnSend()) {
       const pageUrl = window.location.pathname;
@@ -4399,25 +4467,15 @@ ${context}`);
     const selected = pins().filter((p) => ids.has(p.id));
     const {
       formatPinsForAgent
-    } = await import("./agent-context-76ZW6ODH.js");
+    } = await import("./agent-context-OICFLRJ7.js");
     const {
       message,
       context
     } = formatPinsForAgent(selected, outputFormat());
-    try {
-      const {
-        sendToAgentChat
-      } = await import("@agent-native/core/client");
-      sendToAgentChat({
-        message,
-        context,
-        submit: autoSubmit()
-      });
-    } catch {
-      await navigator.clipboard.writeText(`${message}
-
-${context}`);
-    }
+    await deliverToAgent({
+      message,
+      context
+    });
     setSelectedPinIds(/* @__PURE__ */ new Set());
   }
   function toggleActive() {
@@ -4501,20 +4559,12 @@ ${context}`);
     const pin = addPin(el, comment);
     const {
       formatRichPinContext
-    } = await import("./agent-context-76ZW6ODH.js");
+    } = await import("./agent-context-OICFLRJ7.js");
     const richMessage = `Please fix: ${formatRichPinContext(pin)}`;
-    try {
-      const {
-        sendToAgentChat
-      } = await import("@agent-native/core/client");
-      sendToAgentChat({
-        message: richMessage,
-        context: "",
-        submit: autoSubmit()
-      });
-    } catch {
-      await navigator.clipboard.writeText(richMessage);
-    }
+    await deliverToAgent({
+      message: richMessage,
+      context: ""
+    });
   }
   function openEditPopup(pin) {
     setShowPopup(false);
@@ -4552,25 +4602,15 @@ ${context}`);
   async function sendPins() {
     const {
       formatPinsForAgent
-    } = await import("./agent-context-76ZW6ODH.js");
+    } = await import("./agent-context-OICFLRJ7.js");
     const {
       message,
       context
     } = formatPinsForAgent(pins(), outputFormat());
-    try {
-      const {
-        sendToAgentChat
-      } = await import("@agent-native/core/client");
-      sendToAgentChat({
-        message,
-        context,
-        submit: autoSubmit()
-      });
-    } catch {
-      await navigator.clipboard.writeText(`${message}
-
-${context}`);
-    }
+    await deliverToAgent({
+      message,
+      context
+    });
     if (clearOnSend()) {
       const pageUrl = window.location.pathname;
       await storage.clear(pageUrl);
@@ -4807,18 +4847,11 @@ ${context}`);
       return selectedElement();
     },
     onSend: async (instruction) => {
-      try {
-        const {
-          sendToAgentChat
-        } = await import("@agent-native/core/client");
-        const context = buildElementContext(selectedElement());
-        sendToAgentChat({
-          message: instruction,
-          context: JSON.stringify(context, null, 2),
-          submit: autoSubmit()
-        });
-      } catch {
-      }
+      const context = buildElementContext(selectedElement());
+      await deliverToAgent({
+        message: instruction,
+        context: JSON.stringify(context, null, 2)
+      });
       setShowPrompt(false);
     },
     onCancel: () => setShowPrompt(false)
@@ -4894,4 +4927,4 @@ export {
   mountPinpoint,
   unmountPinpoint
 };
-//# sourceMappingURL=chunk-5OW42OKO.js.map
+//# sourceMappingURL=chunk-SI7E6GTM.js.map