@agent-native/core 0.79.27 → 0.80.0

package/corpus/templates/design/app/components/visual-editor/CanvasCommentPins.tsx

@@ -1,11 +1,14 @@
 import { sendToAgentChat, useT } from "@agent-native/core/client";
 import {
+  IconAlertTriangle,
+  IconBolt,
+  IconCircleCheck,
   IconMessage,
   IconMessageCheck,
   IconSend,
   IconX,
 } from "@tabler/icons-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
@@ -23,10 +26,14 @@ export interface CanvasPin {
   yPct: number;
   /** Optional CSS selector of the element under the click, for context */
   targetSelector?: string;
+  /** Best-effort stable canvas/code-layer id when the clicked layer exposes one. */
+  targetAnchorId?: string;
   /** Optional snippet of text content the user clicked near */
   targetText?: string;
   /** Pending comment text the user is composing */
   draft?: string;
+  /** Held locally until the user batch-applies queued comments. */
+  queued?: boolean;
   /** Submitted state — the marker stays visible as confirmation. */
   submitted?: boolean;
 }
@@ -34,8 +41,16 @@ export interface CanvasPin {
 interface CanvasCommentPinsProps {
   /** Whether the pin tool is active. When true, clicks drop pins. */
   active: boolean;
+  /** In queue mode, pin Send adds to the shared annotation batch. */
+  submitMode?: "direct" | "queue";
   /** Disable / exit the pin mode (called on Escape, after submit, etc.) */
   onClose: () => void;
+  /** Mirrors local pins to a parent that can submit them with other annotations. */
+  onPinsChange?: (pins: CanvasPin[]) => void;
+  /** Increment to mark queued pins as submitted by a parent action. */
+  submitQueuedSignal?: number;
+  /** Keep the click plane below a sibling draw toolbar in combined annotate mode. */
+  clickPlaneUnderToolbar?: boolean;
   /**
    * Selector for the canvas surface (e.g. `.slide-content`). Pins are anchored
    * to this element's bounding rect; clicks outside are ignored.
@@ -49,6 +64,210 @@ interface CanvasCommentPinsProps {
   contextLabel?: string;
 }
 
+type PinCapabilityStatus =
+  | "deterministic"
+  | "needs-agent"
+  | "conflict"
+  | "unsupported";
+
+interface PinStatusMeta {
+  status: PinCapabilityStatus;
+  label: string;
+  shortLabel: string;
+  detail: string;
+  markerClassName: string;
+  badgeClassName: string;
+}
+
+const STATUS_META: Record<PinCapabilityStatus, PinStatusMeta> = {
+  deterministic: {
+    status: "deterministic",
+    label: "",
+    shortLabel: "",
+    detail: "",
+    markerClassName: "bg-emerald-500 text-white ring-emerald-200",
+    badgeClassName:
+      "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+  },
+  "needs-agent": {
+    status: "needs-agent",
+    label: "",
+    shortLabel: "",
+    detail: "",
+    markerClassName: "bg-amber-400 text-amber-950 ring-amber-200",
+    badgeClassName:
+      "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  },
+  conflict: {
+    status: "conflict",
+    label: "",
+    shortLabel: "",
+    detail: "",
+    markerClassName:
+      "bg-destructive text-destructive-foreground ring-destructive/30",
+    badgeClassName: "border-destructive/30 bg-destructive/10 text-destructive",
+  },
+  unsupported: {
+    status: "unsupported",
+    label: "",
+    shortLabel: "",
+    detail: "",
+    markerClassName: "bg-muted text-muted-foreground ring-border",
+    badgeClassName: "border-border bg-muted text-muted-foreground",
+  },
+};
+
+function localizePinStatus(
+  status: PinStatusMeta,
+  t: (key: string, options?: Record<string, unknown>) => string,
+): PinStatusMeta {
+  return {
+    ...status,
+    label: t(`visualEditor.pinStatus.${status.status}.label`),
+    shortLabel: t(`visualEditor.pinStatus.${status.status}.shortLabel`),
+    detail: t(`visualEditor.pinStatus.${status.status}.detail`),
+  };
+}
+
+function escapeAttributeValue(value: string): string {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+
+function escapeCssIdentifier(value: string): string {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/[^a-zA-Z0-9_-]/g, "\\$&");
+}
+
+function getTargetAnchor(target?: HTMLElement | null): {
+  targetSelector?: string;
+  targetAnchorId?: string;
+} {
+  const anchor = target?.closest(
+    "[data-agent-native-node-id], [data-builder-id], [data-loc], [id]",
+  );
+  if (!(anchor instanceof HTMLElement)) return {};
+
+  for (const attribute of [
+    "data-agent-native-node-id",
+    "data-builder-id",
+    "data-loc",
+  ]) {
+    const value = anchor.getAttribute(attribute);
+    if (value) {
+      return {
+        targetSelector: `[${attribute}="${escapeAttributeValue(value)}"]`,
+        targetAnchorId: value,
+      };
+    }
+  }
+
+  if (anchor.id) {
+    return {
+      targetSelector: `#${escapeCssIdentifier(anchor.id)}`,
+      targetAnchorId: anchor.id,
+    };
+  }
+
+  return {};
+}
+
+function wordsIncludePair(
+  text: string,
+  first: string,
+  second: string,
+): boolean {
+  return (
+    new RegExp(`\\b${first}\\b`, "i").test(text) &&
+    new RegExp(`\\b${second}\\b`, "i").test(text)
+  );
+}
+
+function hasContradictoryLanguage(text: string): boolean {
+  return [
+    ["bigger", "smaller"],
+    ["larger", "smaller"],
+    ["hide", "show"],
+    ["remove", "keep"],
+    ["delete", "keep"],
+    ["left", "right"],
+    ["top", "bottom"],
+    ["dark", "light"],
+  ].some(([first, second]) => wordsIncludePair(text, first, second));
+}
+
+function pinsLikelyOverlap(pin: CanvasPin, other: CanvasPin): boolean {
+  if (pin.id === other.id || other.submitted) return false;
+  if (pin.targetSelector && pin.targetSelector === other.targetSelector)
+    return true;
+  const xDelta = Math.abs(pin.xPct - other.xPct);
+  const yDelta = Math.abs(pin.yPct - other.yPct);
+  return xDelta <= 4 && yDelta <= 4;
+}
+
+function derivePinStatus(pin: CanvasPin, pins: CanvasPin[]): PinStatusMeta {
+  const text = (pin.draft || "").toLowerCase();
+  const anchored = Boolean(pin.targetSelector || pin.targetAnchorId);
+  const unsupported =
+    /\b(api|backend|database|server|auth|login|oauth|stripe|payment|email|webhook|permission|role|roles|deploy|domain|routing|route|video|audio|3d|three\.js|pdf|spreadsheet)\b/i.test(
+      text,
+    );
+  if (unsupported) return STATUS_META.unsupported;
+
+  const overlaps = pins.some(
+    (other) =>
+      pinsLikelyOverlap(pin, other) &&
+      (pin.draft || "").trim() &&
+      (other.draft || "").trim() &&
+      (pin.draft || "").trim() !== (other.draft || "").trim(),
+  );
+  if (overlaps || hasContradictoryLanguage(text)) {
+    return STATUS_META.conflict;
+  }
+
+  const directEdit =
+    /\b(color|font|copy|text|label|spacing|gap|margin|padding|radius|rounded|border|align|center|move|resize|width|height|background|image|button|headline|section|swap|replace)\b/i.test(
+      text,
+    );
+  const vagueInstruction =
+    /\b(polish|improve|better|nice|clean up|fix it|make it work|decide|surprise me)\b/i.test(
+      text,
+    );
+
+  if (anchored && directEdit && !vagueInstruction) {
+    return STATUS_META.deterministic;
+  }
+
+  return STATUS_META["needs-agent"];
+}
+
+function PinStatusBadge({ status }: { status: PinStatusMeta }) {
+  const Icon =
+    status.status === "deterministic"
+      ? IconCircleCheck
+      : status.status === "unsupported" || status.status === "conflict"
+        ? IconAlertTriangle
+        : IconBolt;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          className={cn(
+            "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium leading-none",
+            status.badgeClassName,
+          )}
+        >
+          <Icon className="size-3" />
+          {status.label}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>{status.detail}</TooltipContent>
+    </Tooltip>
+  );
+}
+
 /**
  * Click-to-comment pins anchored to the canvas.
  *
@@ -67,7 +286,11 @@ interface CanvasCommentPinsProps {
  */
 export function CanvasCommentPins({
   active,
+  submitMode = "direct",
   onClose,
+  onPinsChange,
+  submitQueuedSignal,
+  clickPlaneUnderToolbar = false,
   canvasSelector,
   contextId,
   contextLabel,
@@ -76,6 +299,7 @@ export function CanvasCommentPins({
   const [pins, setPins] = useState<CanvasPin[]>([]);
   const [activePinId, setActivePinId] = useState<string | null>(null);
   const containerRef = useRef<HTMLElement | null>(null);
+  const lastSubmitQueuedSignalRef = useRef(submitQueuedSignal);
   const [canvasEl, setCanvasEl] = useState<HTMLElement | null>(null);
 
   // Reset pins when the context (slide) changes — they're scoped to one view.
@@ -113,12 +337,7 @@ export function CanvasCommentPins({
       // Build a best-effort selector for parent-DOM canvases. For iframe
       // canvases the transparent overlay captures the click, so target details
       // are intentionally omitted but the precise position is preserved.
-      let targetSelector: string | undefined;
-      const builderId = target
-        ?.closest("[data-builder-id]")
-        ?.getAttribute("data-builder-id");
-      if (builderId) targetSelector = `[data-builder-id="${builderId}"]`;
-
+      const { targetSelector, targetAnchorId } = getTargetAnchor(target);
       const targetText = target?.textContent?.trim().slice(0, 80) || undefined;
 
       const newPin: CanvasPin = {
@@ -126,6 +345,7 @@ export function CanvasCommentPins({
         xPct,
         yPct,
         targetSelector,
+        targetAnchorId,
         targetText,
         draft: "",
       };
@@ -181,34 +401,140 @@ export function CanvasCommentPins({
     if (activePinId === id) setActivePinId(null);
   };
 
-  const submitPin = (pin: CanvasPin) => {
-    const text = (pin.draft || "").trim();
-    if (!text) {
-      removePin(pin.id);
+  const queuedPins = useMemo(
+    () =>
+      pins.filter(
+        (pin) => pin.queued && !pin.submitted && (pin.draft || "").trim(),
+      ),
+    [pins],
+  );
+
+  useEffect(() => {
+    onPinsChange?.(pins);
+  }, [onPinsChange, pins]);
+
+  useEffect(() => {
+    if (
+      submitQueuedSignal === undefined ||
+      submitQueuedSignal === lastSubmitQueuedSignalRef.current
+    ) {
       return;
     }
+    lastSubmitQueuedSignalRef.current = submitQueuedSignal;
+    if (queuedPins.length === 0) return;
+    const submittedIds = new Set(queuedPins.map((pin) => pin.id));
+    setPins((prev) =>
+      prev.map((pin) =>
+        submittedIds.has(pin.id)
+          ? { ...pin, queued: false, submitted: true }
+          : pin,
+      ),
+    );
+    setActivePinId(null);
+  }, [queuedPins, submitQueuedSignal]);
+
+  const submittedCount = pins.filter((pin) => pin.submitted).length;
+  const statusCounts = useMemo(
+    () =>
+      pins.reduce<Record<PinCapabilityStatus, number>>(
+        (counts, pin) => {
+          const status = derivePinStatus(pin, pins).status;
+          counts[status] += 1;
+          return counts;
+        },
+        {
+          deterministic: 0,
+          "needs-agent": 0,
+          conflict: 0,
+          unsupported: 0,
+        },
+      ),
+    [pins],
+  );
+
+  const buildPinLines = (pin: CanvasPin, index?: number) => {
+    const status = localizePinStatus(derivePinStatus(pin, pins), t);
     const lines = [
-      `[Comment pin on ${contextLabel || contextId}]`,
+      index === undefined
+        ? `[Comment pin on ${contextLabel || contextId}]`
+        : `[${index + 1}] Comment pin on ${contextLabel || contextId}`,
       `Position: ${pin.xPct.toFixed(1)}% from left, ${pin.yPct.toFixed(1)}% from top`,
+      `Capability: ${status.label} - ${status.detail}`,
     ];
+    if (pin.targetAnchorId) lines.push(`Anchor id: ${pin.targetAnchorId}`);
     if (pin.targetSelector) lines.push(`Element: ${pin.targetSelector}`);
     if (pin.targetText) lines.push(`Nearby text: "${pin.targetText}"`);
     lines.push("");
-    lines.push(text);
+    lines.push((pin.draft || "").trim());
+    return lines;
+  };
+
+  const sendPinsToAgent = (targetPins: CanvasPin[], batch = false) => {
+    const message = batch
+      ? [
+          `[Comment batch on ${contextLabel || contextId}]`,
+          `Annotations: ${targetPins.length}`,
+          "",
+          ...targetPins.flatMap((pin, index) => [
+            ...buildPinLines(pin, index),
+            "",
+          ]),
+        ].join("\n")
+      : buildPinLines(targetPins[0]!).join("\n");
+
     try {
       // Use `sendToAgentChat` (not the shared `agentChat.submit`) so the
       // request routes correctly when design is embedded in Builder/Frame
       // and so the agent sidebar is reliably opened via the `agent-panel:open`
       // custom event even if the user has it collapsed.
       sendToAgentChat({
-        message: lines.join("\n"),
+        message,
         submit: true,
         openSidebar: true,
       });
     } catch (err) {
       console.error("[CanvasCommentPins] failed to send to agent:", err);
     }
-    updatePin(pin.id, { submitted: true });
+  };
+
+  const queuePin = (pin: CanvasPin) => {
+    const text = (pin.draft || "").trim();
+    if (!text) {
+      removePin(pin.id);
+      return;
+    }
+    updatePin(pin.id, { draft: text, queued: true });
+    setActivePinId(null);
+  };
+
+  const submitPin = (pin: CanvasPin) => {
+    const text = (pin.draft || "").trim();
+    if (!text) {
+      removePin(pin.id);
+      return;
+    }
+    if (submitMode === "queue") {
+      queuePin(pin);
+      return;
+    }
+    const nextPin = { ...pin, draft: text };
+    sendPinsToAgent([nextPin]);
+    updatePin(pin.id, { draft: text, queued: false, submitted: true });
+    setActivePinId(null);
+  };
+
+  const submitQueuedPins = () => {
+    if (queuedPins.length === 0) return;
+    if (submitMode === "queue") return;
+    sendPinsToAgent(queuedPins, true);
+    const submittedIds = new Set(queuedPins.map((pin) => pin.id));
+    setPins((prev) =>
+      prev.map((pin) =>
+        submittedIds.has(pin.id)
+          ? { ...pin, queued: false, submitted: true }
+          : pin,
+      ),
+    );
     setActivePinId(null);
   };
 
@@ -218,6 +544,8 @@ export function CanvasCommentPins({
   const canvas = containerRef.current ?? canvasEl;
   if (!canvas) return null;
   const rect = canvas.getBoundingClientRect();
+  const summaryLeft = Math.min(rect.right - 8, window.innerWidth - 8);
+  const summaryTop = Math.max(rect.top + 8, 72);
 
   return (
     <>
@@ -226,7 +554,10 @@ export function CanvasCommentPins({
       {active && (
         <div
           data-pin-click-overlay
-          className="fixed z-[54] cursor-crosshair"
+          className={cn(
+            "fixed cursor-crosshair",
+            clickPlaneUnderToolbar ? "z-[20]" : "z-[54]",
+          )}
           style={{
             left: rect.left,
             top: rect.top,
@@ -261,12 +592,73 @@ export function CanvasCommentPins({
         </div>
       )}
 
+      {/* Compact queue/result summary for local annotation batching. */}
+      {pins.length > 0 && (
+        <div
+          data-pin-popover
+          className="fixed z-[56] w-64 -translate-x-full rounded-lg border border-border bg-popover p-3 shadow-xl"
+          style={{ left: summaryLeft, top: summaryTop }}
+        >
+          <div className="mb-2 flex items-center justify-between gap-2">
+            <div className="min-w-0">
+              <p className="truncate text-xs font-semibold text-foreground">
+                {t("visualEditor.annotationQueue")}
+              </p>
+              <p className="text-[10px] text-muted-foreground">
+                {t("visualEditor.annotationQueueCounts", {
+                  queued: queuedPins.length,
+                  sent: submittedCount,
+                })}
+              </p>
+            </div>
+            {submitMode === "direct" ? (
+              <Button
+                size="sm"
+                className="h-7 gap-1 px-2 text-[10px]"
+                onClick={submitQueuedPins}
+                disabled={queuedPins.length === 0}
+              >
+                <IconBolt className="size-3" />
+                {t("visualEditor.batchApply")}
+              </Button>
+            ) : (
+              <span className="rounded-md bg-muted px-2 py-1 text-[10px] font-medium text-muted-foreground">
+                {t("visualEditor.queued")}
+              </span>
+            )}
+          </div>
+          <div className="grid grid-cols-2 gap-1 text-[10px]">
+            <span className="rounded-md bg-muted/45 px-2 py-1 text-muted-foreground">
+              {t("visualEditor.pinStatusCount.direct", {
+                count: statusCounts.deterministic,
+              })}
+            </span>
+            <span className="rounded-md bg-muted/45 px-2 py-1 text-muted-foreground">
+              {t("visualEditor.pinStatusCount.agent", {
+                count: statusCounts["needs-agent"],
+              })}
+            </span>
+            <span className="rounded-md bg-muted/45 px-2 py-1 text-muted-foreground">
+              {t("visualEditor.pinStatusCount.conflict", {
+                count: statusCounts.conflict,
+              })}
+            </span>
+            <span className="rounded-md bg-muted/45 px-2 py-1 text-muted-foreground">
+              {t("visualEditor.pinStatusCount.blocked", {
+                count: statusCounts.unsupported,
+              })}
+            </span>
+          </div>
+        </div>
+      )}
+
       {/* Pin overlays */}
       {pins.map((pin) => {
         const left = rect.left + (pin.xPct / 100) * rect.width;
         const top = rect.top + (pin.yPct / 100) * rect.height;
         const isActive = activePinId === pin.id;
         const PinIcon = pin.submitted ? IconMessageCheck : IconMessage;
+        const status = localizePinStatus(derivePinStatus(pin, pins), t);
         return (
           <div
             key={pin.id}
@@ -288,23 +680,37 @@ export function CanvasCommentPins({
                     if (!pin.submitted) setActivePinId(pin.id);
                   }}
                   className={cn(
-                    "absolute -translate-x-1/2 -translate-y-full -mt-1 flex items-center justify-center w-7 h-7 rounded-full rounded-bl-none shadow-lg cursor-pointer",
-                    pin.submitted
-                      ? "bg-emerald-500 text-white"
-                      : "bg-[#609FF8] text-black",
-                    "hover:scale-110 transition-transform",
+                    "absolute -mt-1 flex size-7 -translate-x-1/2 -translate-y-full cursor-pointer items-center justify-center rounded-full rounded-bl-none shadow-lg ring-2 transition-transform hover:scale-110",
+                    status.markerClassName,
+                    pin.submitted && "opacity-95",
                   )}
                 >
-                  <PinIcon className="w-3.5 h-3.5" />
+                  <PinIcon className="size-3.5" />
                 </button>
               </TooltipTrigger>
               <TooltipContent className="pointer-events-none">
-                {pin.draft ||
-                  (pin.submitted
-                    ? t("visualEditor.commentSent")
-                    : t("visualEditor.comment"))}
+                {pin.queued
+                  ? t("visualEditor.queuedStatus", { status: status.label })
+                  : pin.draft ||
+                    (pin.submitted
+                      ? t("visualEditor.commentSentStatus", {
+                          status: status.label,
+                        })
+                      : t("visualEditor.commentStatus", {
+                          status: status.label,
+                        }))}
               </TooltipContent>
             </Tooltip>
+            <span
+              className={cn(
+                "pointer-events-none absolute left-3 -top-10 rounded-full border px-1.5 py-0.5 text-[9px] font-medium leading-none shadow-sm",
+                status.badgeClassName,
+              )}
+            >
+              {pin.queued && !pin.submitted
+                ? t("visualEditor.queued")
+                : status.shortLabel}
+            </span>
 
             {/* Inline composer. z-[260] keeps it above the shadcn floating-UI
              * tier (z-[250] — Tooltip, Popover, Dialog overlay, etc.) so a
@@ -314,13 +720,21 @@ export function CanvasCommentPins({
                 data-pin-popover
                 className="absolute z-[260] left-3 top-1 w-72 rounded-lg border border-border bg-popover shadow-xl p-2"
               >
-                <p className="mb-2 text-xs font-semibold text-foreground">
-                  {t("visualEditor.editDesign")}
-                </p>
+                <div className="mb-2 flex items-center justify-between gap-2">
+                  <p className="text-xs font-semibold text-foreground">
+                    {t("visualEditor.editDesign")}
+                  </p>
+                  <PinStatusBadge status={status} />
+                </div>
                 <Textarea
                   autoFocus
                   value={pin.draft || ""}
-                  onChange={(e) => updatePin(pin.id, { draft: e.target.value })}
+                  onChange={(e) =>
+                    updatePin(pin.id, {
+                      draft: e.target.value,
+                      queued: false,
+                    })
+                  }
                   onKeyDown={(e) => {
                     if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                       e.preventDefault();
@@ -334,15 +748,28 @@ export function CanvasCommentPins({
                   placeholder={t("visualEditor.tellAgentWhatToChange")}
                   className="resize-none text-xs min-h-[60px]"
                 />
+                <p className="mt-1 text-[10px] leading-4 text-muted-foreground">
+                  {status.detail}
+                </p>
+                {pin.targetAnchorId && (
+                  <div className="mt-1 truncate rounded-md bg-muted/45 px-2 py-1 text-[10px] text-muted-foreground">
+                    {t("visualEditor.anchorLabel", {
+                      id: pin.targetAnchorId,
+                    })}
+                  </div>
+                )}
                 {pin.targetText && (
                   <div className="text-[10px] text-muted-foreground mt-1 italic line-clamp-1">
-                    near "{pin.targetText}"
+                    {t("visualEditor.nearText", { text: pin.targetText })}
                   </div>
                 )}
                 <div className="flex items-center justify-between mt-2">
                   <span className="text-[10px] text-muted-foreground">
-                    {/Mac|iPhone|iPad/.test(navigator.userAgent) ? "⌘" : "Ctrl"}
-                    +Enter to submit
+                    {t("visualEditor.submitShortcut", {
+                      mod: /Mac|iPhone|iPad/.test(navigator.userAgent)
+                        ? "⌘"
+                        : "Ctrl",
+                    })}
                   </span>
                   <div className="flex gap-1">
                     <Button
@@ -355,13 +782,24 @@ export function CanvasCommentPins({
                     </Button>
                     <Button
                       size="sm"
+                      variant="outline"
                       className="h-6 gap-1 px-2 text-[10px] cursor-pointer"
-                      onClick={() => submitPin(pin)}
+                      onClick={() => queuePin(pin)}
                       disabled={!(pin.draft || "").trim()}
                     >
-                      <IconSend className="w-3 h-3" />
-                      {t("visualEditor.send")}
+                      {t("visualEditor.queue")}
                     </Button>
+                    {submitMode === "direct" && (
+                      <Button
+                        size="sm"
+                        className="h-6 gap-1 px-2 text-[10px] cursor-pointer"
+                        onClick={() => submitPin(pin)}
+                        disabled={!(pin.draft || "").trim()}
+                      >
+                        <IconSend className="w-3 h-3" />
+                        {t("visualEditor.send")}
+                      </Button>
+                    )}
                   </div>
                 </div>
               </div>