@agent-native/pinpoint 0.1.1 → 0.1.4

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-PQIWC4FE.js}

@@ -4076,6 +4076,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 +4371,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 +4407,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 +4499,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 +4542,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 +4787,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 +4867,4 @@ export {
   mountPinpoint,
   unmountPinpoint
 };
-//# sourceMappingURL=chunk-5OW42OKO.js.map
+//# sourceMappingURL=chunk-PQIWC4FE.js.map