@agent-native/core 0.100.2 → 0.101.2

package/corpus/templates/design/app/components/design/ReviewCommentsPanel.tsx

@@ -0,0 +1,161 @@
+import {
+  ReviewThreadPanel,
+  type ReviewThread,
+  useT,
+} from "@agent-native/core/client";
+import type { ReviewComment } from "@agent-native/core/review";
+import { IconSend } from "@tabler/icons-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+export interface ReviewCommentsPanelProps {
+  designId: string;
+  activeFileId?: string | null;
+  canComment: boolean;
+  /** Caller-derived editor capability for resolving threads. */
+  canResolve?: boolean;
+  /** Caller authorization for deleting a specific root comment. */
+  canDeleteComment?: (comment: ReviewComment, thread: ReviewThread) => boolean;
+  showComposer?: boolean;
+  signInHref?: string;
+  onSelectThread?: (thread: ReviewThread) => void;
+  canDispatchToAgent?: boolean;
+  sendingThreadId?: string | null;
+  onDispatchCommentToAgent?: (comment: ReviewComment) => void;
+  onSendThreadToAgent?: (thread: ReviewThread) => void;
+  className?: string;
+}
+
+export function ReviewCommentsPanel({
+  designId,
+  activeFileId,
+  canComment,
+  canResolve,
+  canDeleteComment,
+  showComposer = true,
+  signInHref,
+  onSelectThread,
+  canDispatchToAgent = false,
+  sendingThreadId,
+  onDispatchCommentToAgent,
+  onSendThreadToAgent,
+  className,
+}: ReviewCommentsPanelProps) {
+  const t = useT();
+  const [scope, setScope] = useState<"screen" | "all">("screen");
+  const targetId = scope === "screen" ? activeFileId : undefined;
+
+  return (
+    <div
+      data-review-comments-panel
+      className={cn("flex min-h-0 flex-1 flex-col", className)}
+    >
+      <div className="shrink-0 border-b border-border px-3 py-2">
+        <Tabs
+          value={scope}
+          onValueChange={(value) => setScope(value as "screen" | "all")}
+          className="w-full"
+        >
+          <TabsList className="grid h-8 w-full grid-cols-2 rounded-md bg-muted p-0.5">
+            <TabsTrigger value="screen" className="h-7 px-2 text-xs">
+              {t("review.thisScreen")}
+            </TabsTrigger>
+            <TabsTrigger value="all" className="h-7 px-2 text-xs">
+              {t("review.allScreens")}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {!canComment && signInHref ? (
+        <Button
+          asChild
+          variant="outline"
+          size="sm"
+          className="mx-3 mt-3 h-8 shrink-0"
+        >
+          <a href={signInHref}>{t("review.signInToComment")}</a>
+        </Button>
+      ) : null}
+
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <ReviewThreadPanel
+          resourceType="design"
+          resourceId={designId}
+          targetId={targetId}
+          title={t("review.panelTitle")}
+          placeholder={t("review.placeholder")}
+          emptyState={t("review.emptyState")}
+          loadingLabel={t("review.loading")}
+          replyLabel={t("review.reply")}
+          replyPlaceholder={t("review.replyPlaceholder")}
+          cancelReplyLabel={t("review.cancelReply")}
+          resolveLabel={t("review.resolve")}
+          deleteLabel={t("review.deleteComment")}
+          moreActionsLabel={t("review.moreActions")}
+          resolvedLabel={t("review.resolved")}
+          reviewerLabel={t("review.reviewer")}
+          includeResolved
+          showHeader={false}
+          variant="plain"
+          showComposer={canComment && showComposer}
+          canReply={canComment}
+          canResolve={canResolve ?? canDispatchToAgent}
+          canDeleteComment={canDeleteComment}
+          showComposerTargetPicker={canComment && showComposer}
+          composerCommentLabel={t("review.commentMode")}
+          composerAgentLabel={t("review.sendToAgent")}
+          onCommentCreated={(comment) => {
+            if (comment.resolutionTarget === "agent") {
+              onDispatchCommentToAgent?.(comment);
+            }
+          }}
+          onSelectThread={onSelectThread}
+          renderThreadActions={
+            canDispatchToAgent && onSendThreadToAgent
+              ? (thread) => {
+                  if (thread.root.status !== "open") return null;
+                  const alreadyQueued =
+                    thread.root.resolutionTarget !== "human" &&
+                    !thread.root.consumedAt;
+                  if (alreadyQueued) return null;
+                  const sending = sendingThreadId === thread.root.threadId;
+                  const dispatchPending = Boolean(sendingThreadId);
+                  return (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="h-7 gap-1.5 px-2 text-xs"
+                      disabled={dispatchPending}
+                      aria-busy={sending}
+                      aria-label={t("review.sendToAgent")}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        onSendThreadToAgent(thread);
+                      }}
+                    >
+                      {sending ? (
+                        <Spinner className="size-3.5" />
+                      ) : (
+                        <IconSend className="size-3.5" />
+                      )}
+                      <span className="hidden @xs/review:inline">
+                        {sending
+                          ? t("review.sendingToAgent")
+                          : t("review.sendToAgent")}
+                      </span>
+                    </Button>
+                  );
+                }
+              : undefined
+          }
+        />
+      </div>
+    </div>
+  );
+}

package/corpus/templates/design/app/components/design/ReviewStatusControl.tsx

@@ -0,0 +1,96 @@
+import {
+  ReviewStatusBadge,
+  useSetReviewStatus,
+  useT,
+} from "@agent-native/core/client";
+import type { ReviewStatus } from "@agent-native/core/review";
+import { IconChevronDown } from "@tabler/icons-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+const REVIEW_STATUSES: ReviewStatus[] = [
+  "draft",
+  "in_review",
+  "approved",
+  "changes_requested",
+];
+
+export interface ReviewStatusControlProps {
+  designId: string;
+  status?: ReviewStatus | null;
+  /** Explicit caller-derived capability. Pass true only for the owner. */
+  editable?: boolean;
+}
+
+export function ReviewStatusControl({
+  designId,
+  status,
+  editable = false,
+}: ReviewStatusControlProps) {
+  const t = useT();
+  const setStatus = useSetReviewStatus();
+  const currentStatus = status ?? "draft";
+  const label = (value: ReviewStatus) => t(`review.status.${value}`);
+  const compactBadgeClassName =
+    "max-w-[8.5rem] truncate px-1.5 py-0 text-[11px] leading-5";
+
+  if (!editable) {
+    return (
+      <ReviewStatusBadge
+        status={currentStatus}
+        className={compactBadgeClassName}
+      />
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-7 min-w-0 max-w-full gap-0.5 rounded-full px-0.5 text-xs hover:bg-accent"
+          disabled={setStatus.isPending}
+          aria-label={t("review.status.change")}
+        >
+          <ReviewStatusBadge
+            status={currentStatus}
+            className={compactBadgeClassName}
+          />
+          <IconChevronDown className="size-3 shrink-0 text-muted-foreground" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-44">
+        {REVIEW_STATUSES.map((nextStatus) => (
+          <DropdownMenuItem
+            key={nextStatus}
+            disabled={setStatus.isPending}
+            onSelect={() => {
+              if (nextStatus === currentStatus || setStatus.isPending) return;
+              setStatus.mutate(
+                {
+                  resourceType: "design",
+                  resourceId: designId,
+                  status: nextStatus,
+                },
+                {
+                  onError: () => toast.error(t("review.status.saveFailed")),
+                },
+              );
+            }}
+          >
+            {label(nextStatus)}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/corpus/templates/design/app/components/design/bridge/hit-test.bridge.ts

@@ -733,9 +733,175 @@
     }
   }
 
+  function reviewAnchorElementAtPoint(
+    clientX: number,
+    clientY: number,
+  ): Element | null {
+    var element = elementFromEditorPoint(clientX, clientY);
+    if (!element) return null;
+    return element.closest(
+      "[data-agent-native-node-id],[data-code-layer-id],[data-layer-id],[data-builder-id],[id]",
+    );
+  }
+
+  function reviewNodeElements(nodeIds: string[]): Record<string, Element> {
+    var wanted: Record<string, boolean> = {};
+    var found: Record<string, Element> = {};
+    for (var index = 0; index < nodeIds.length; index += 1) {
+      var nodeId = nodeIds[index];
+      if (nodeId) wanted[nodeId] = true;
+    }
+    var candidates = document.querySelectorAll(
+      "[data-agent-native-node-id],[data-code-layer-id],[data-layer-id],[data-builder-id],[id]",
+    );
+    for (
+      var candidateIndex = 0;
+      candidateIndex < candidates.length;
+      candidateIndex += 1
+    ) {
+      var candidate = candidates[candidateIndex];
+      var candidateId = getNodeId(candidate);
+      if (candidateId && wanted[candidateId] && !found[candidateId]) {
+        found[candidateId] = candidate;
+      }
+    }
+    return found;
+  }
+
+  function postReviewLayout(): void {
+    try {
+      (window.parent as Window).postMessage(
+        { type: "agent-native:review-layout" },
+        "*",
+      );
+    } catch (_err) {}
+  }
+
+  var reviewLayoutFrame = 0;
+  function scheduleReviewLayout(): void {
+    if (reviewLayoutFrame) return;
+    reviewLayoutFrame = window.requestAnimationFrame(function () {
+      reviewLayoutFrame = 0;
+      postReviewLayout();
+    });
+  }
+
+  window.addEventListener("scroll", scheduleReviewLayout, true);
+  window.addEventListener("resize", scheduleReviewLayout);
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", scheduleReviewLayout, {
+      once: true,
+    });
+  } else {
+    scheduleReviewLayout();
+  }
+
   window.addEventListener("message", function (e: MessageEvent) {
     if (e.source !== window.parent) return;
     if (!e.data) return;
+    if (e.data.type === "agent-native:review-anchor-at-point") {
+      var reviewPointCorrelationId: string = e.data.correlationId;
+      var reviewPointX: number = Number(e.data.x);
+      var reviewPointY: number = Number(e.data.y);
+      if (!reviewPointCorrelationId) return;
+      var reviewPointElement = reviewAnchorElementAtPoint(
+        reviewPointX,
+        reviewPointY,
+      );
+      try {
+        (window.parent as Window).postMessage(
+          {
+            type: "agent-native:review-anchor-at-point-result",
+            correlationId: reviewPointCorrelationId,
+            nodeId: reviewPointElement
+              ? getNodeId(reviewPointElement) || undefined
+              : undefined,
+            layerName:
+              reviewPointElement?.getAttribute(
+                "data-agent-native-layer-name",
+              ) || undefined,
+            tagName: reviewPointElement?.tagName?.toLowerCase() || undefined,
+          },
+          "*",
+        );
+      } catch (_err) {}
+      return;
+    }
+    if (e.data.type === "agent-native:review-node-rects") {
+      var reviewRectsCorrelationId: string = e.data.correlationId;
+      var rawReviewNodeIds: unknown = e.data.nodeIds;
+      if (!reviewRectsCorrelationId || !Array.isArray(rawReviewNodeIds)) return;
+      var reviewNodeIds = rawReviewNodeIds
+        .filter(function (value): value is string {
+          return typeof value === "string" && value.length > 0;
+        })
+        .slice(0, 500);
+      var reviewElements = reviewNodeElements(reviewNodeIds);
+      var reviewRects: Record<
+        string,
+        { left: number; top: number; width: number; height: number }
+      > = {};
+      for (
+        var reviewIndex = 0;
+        reviewIndex < reviewNodeIds.length;
+        reviewIndex += 1
+      ) {
+        var reviewNodeId = reviewNodeIds[reviewIndex];
+        var reviewElement = reviewElements[reviewNodeId];
+        if (!reviewElement) continue;
+        var reviewRect = reviewElement.getBoundingClientRect();
+        reviewRects[reviewNodeId] = {
+          left: reviewRect.left,
+          top: reviewRect.top,
+          width: reviewRect.width,
+          height: reviewRect.height,
+        };
+      }
+      try {
+        (window.parent as Window).postMessage(
+          {
+            type: "agent-native:review-node-rects-result",
+            correlationId: reviewRectsCorrelationId,
+            rects: reviewRects,
+            viewportWidth: window.innerWidth,
+            viewportHeight: window.innerHeight,
+          },
+          "*",
+        );
+      } catch (_err) {}
+      return;
+    }
+    if (e.data.type === "agent-native:review-focus") {
+      var reviewFocusCorrelationId: string = e.data.correlationId;
+      var reviewFocusNodeId: string = String(e.data.nodeId || "");
+      if (!reviewFocusCorrelationId || !reviewFocusNodeId) return;
+      var reviewFocusElement = reviewNodeElements([reviewFocusNodeId])[
+        reviewFocusNodeId
+      ] as HTMLElement | undefined;
+      if (reviewFocusElement) {
+        reviewFocusElement.scrollIntoView({
+          block: "center",
+          inline: "center",
+        });
+        var previousReviewBoxShadow = reviewFocusElement.style.boxShadow;
+        reviewFocusElement.style.boxShadow =
+          "0 0 0 2px var(--design-editor-accent-color, #2563eb)";
+        window.setTimeout(function () {
+          reviewFocusElement!.style.boxShadow = previousReviewBoxShadow;
+        }, 700);
+      }
+      try {
+        (window.parent as Window).postMessage(
+          {
+            type: "agent-native:review-focus-result",
+            correlationId: reviewFocusCorrelationId,
+            focused: Boolean(reviewFocusElement),
+          },
+          "*",
+        );
+      } catch (_err) {}
+      return;
+    }
     if (e.data.type === "agent-native:hit-test-preview-clear") {
       hideInsertionGuide();
       return;

package/corpus/templates/design/app/components/layout/Layout.tsx

@@ -81,6 +81,7 @@ export function Layout({ children }: LayoutProps) {
     ? `show-questions:${designScope.id}`
     : "show-questions";
   const { questions: pendingDesignQuestions } = useGuidedQuestionFlow({
+    enabled: hasSession,
     stateKey: designQuestionStateKey,
     queryKey: [designQuestionStateKey],
     browserTabId,