@agent-native/core 0.105.0 → 0.106.1

package/corpus/templates/design/actions/resolve-node-rewrite.ts

@@ -0,0 +1,257 @@
+import { defineAction } from "@agent-native/core";
+import {
+  compareAndSetAppState,
+  listAppState,
+  readAppState,
+} from "@agent-native/core/application-state";
+import { accessFilter, assertAccess } from "@agent-native/core/sharing";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import {
+  readLiveSourceFile,
+  writeInlineSourceFile,
+  type SourceWorkspaceFile,
+} from "../server/source-workspace.js";
+import type { CodeLayerSource } from "../shared/code-layer.js";
+import {
+  DESIGN_REPROMPT_PROPOSAL_STATE_PREFIX,
+  designRepromptPendingStateKey,
+  designRepromptProposalStateKey,
+  isPendingDesignReprompt,
+  spliceNodeRewriteVariant,
+  type NodeHtmlPreviewBridgeMessage,
+  type NodeRewriteProposal,
+} from "../shared/node-rewrite.js";
+import { designSourceTypeFromData } from "../shared/source-mode.js";
+
+const targetSchema = z
+  .object({
+    nodeId: z.string().min(1).optional(),
+    selector: z.string().min(1).optional(),
+  })
+  .superRefine((target, ctx) => {
+    if (!target.nodeId && !target.selector) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["nodeId"],
+        message: "target.nodeId or target.selector is required",
+      });
+    }
+  });
+
+const proposalSchema = z.object({
+  proposalId: z.string().min(1),
+  repromptId: z.string().min(1),
+  designId: z.string().min(1),
+  fileId: z.string().min(1),
+  filename: z.string().min(1),
+  target: targetSchema,
+  resolvedTarget: z.object({
+    nodeId: z.string().min(1),
+    selector: z.string().min(1),
+  }),
+  baseVersionHash: z.string().min(1),
+  variants: z
+    .array(
+      z.object({
+        html: z.string().min(1).max(250_000),
+        summary: z.string().min(1).max(240),
+      }),
+    )
+    .min(1)
+    .max(3),
+  chosenIndex: z.number().int().min(0),
+  createdAt: z.string(),
+});
+
+interface EditableDesignFile extends SourceWorkspaceFile {
+  designData: string | null;
+}
+
+async function resolveProposal(proposalId: string): Promise<{
+  key: string;
+  proposal: NodeRewriteProposal;
+}> {
+  const candidates = await listAppState(DESIGN_REPROMPT_PROPOSAL_STATE_PREFIX);
+  const matches = candidates.filter(
+    ({ value }) => value.proposalId === proposalId,
+  );
+  if (matches.length !== 1) {
+    throw new Error(
+      matches.length === 0
+        ? "Node rewrite proposal not found or already resolved."
+        : "Multiple node rewrite proposals matched this id.",
+    );
+  }
+  const match = matches[0]!;
+  const proposal = proposalSchema.parse(match.value) as NodeRewriteProposal;
+  const expectedKey = designRepromptProposalStateKey(
+    proposal.designId,
+    proposal.fileId,
+    proposal.repromptId,
+  );
+  if (match.key !== expectedKey) {
+    throw new Error("Node rewrite proposal state is scoped to the wrong file.");
+  }
+  return { key: match.key, proposal };
+}
+
+async function resolveEditableDesignFile(
+  proposal: NodeRewriteProposal,
+): Promise<EditableDesignFile> {
+  const db = getDb();
+  const [file] = await db
+    .select({
+      id: schema.designFiles.id,
+      designId: schema.designFiles.designId,
+      filename: schema.designFiles.filename,
+      fileType: schema.designFiles.fileType,
+      content: schema.designFiles.content,
+      createdAt: schema.designFiles.createdAt,
+      updatedAt: schema.designFiles.updatedAt,
+      designData: schema.designs.data,
+    })
+    .from(schema.designFiles)
+    .innerJoin(
+      schema.designs,
+      eq(schema.designFiles.designId, schema.designs.id),
+    )
+    .where(
+      and(
+        accessFilter(schema.designs, schema.designShares),
+        eq(schema.designFiles.id, proposal.fileId),
+        eq(schema.designFiles.designId, proposal.designId),
+      ),
+    )
+    .limit(1);
+
+  if (!file) throw new Error("Design HTML file not found.");
+  if (file.filename !== proposal.filename || file.fileType !== "html") {
+    throw new Error("Node rewrite proposal no longer matches its HTML file.");
+  }
+  if (designSourceTypeFromData(file.designData) !== "inline") {
+    throw new Error("Node rewrites only support inline design screens.");
+  }
+  await assertAccess("design", proposal.designId, "editor");
+  return file;
+}
+
+async function clearProposalState(
+  proposalKey: string,
+  proposal: NodeRewriteProposal,
+  pending: Record<string, unknown>,
+): Promise<void> {
+  const pendingKey = designRepromptPendingStateKey(
+    proposal.designId,
+    proposal.fileId,
+  );
+  const [proposalCleared] = await Promise.all([
+    compareAndSetAppState(
+      proposalKey,
+      proposal as unknown as Record<string, unknown>,
+      null,
+    ),
+    compareAndSetAppState(pendingKey, pending, null),
+  ]);
+  if (!proposalCleared) {
+    throw new Error("Node rewrite proposal changed while it was resolving.");
+  }
+}
+
+export default defineAction({
+  agentTool: false,
+  description:
+    "Accept or reject a pending scoped Design node rewrite. Accept performs one " +
+    "version-checked inline/Yjs content transaction; reject changes no design content. " +
+    "Both resolutions clear the proposal and its matching paired pending reprompt.",
+  schema: z.object({
+    proposalId: z.string().min(1),
+    resolution: z.enum(["accept", "reject"]),
+    variantIndex: z.number().int().min(0).optional(),
+  }),
+  run: async ({ proposalId, resolution, variantIndex }) => {
+    const { key: proposalKey, proposal } = await resolveProposal(proposalId);
+    const pendingKey = designRepromptPendingStateKey(
+      proposal.designId,
+      proposal.fileId,
+    );
+    const pending = await readAppState(pendingKey);
+    if (
+      !isPendingDesignReprompt(pending) ||
+      pending.repromptId !== proposal.repromptId
+    ) {
+      throw new Error(
+        "A newer regeneration request replaced this proposal. Review the latest candidates instead.",
+      );
+    }
+    const restoreMessage: NodeHtmlPreviewBridgeMessage = {
+      type: "node-html-preview",
+      proposalId,
+      target: proposal.resolvedTarget,
+      operation: "restore",
+    };
+
+    if (resolution === "reject") {
+      await assertAccess("design", proposal.designId, "editor");
+      await clearProposalState(proposalKey, proposal, pending);
+      return {
+        proposalId,
+        repromptId: proposal.repromptId,
+        resolution,
+        changed: false,
+        bridgeMessages: [restoreMessage],
+      };
+    }
+
+    const file = await resolveEditableDesignFile(proposal);
+    const chosenIndex = variantIndex ?? proposal.chosenIndex;
+    const variant = proposal.variants[chosenIndex];
+    if (!variant) {
+      throw new Error(
+        `Variant index ${chosenIndex} is out of range for this proposal.`,
+      );
+    }
+
+    const live = await readLiveSourceFile(file);
+    if (live.versionHash !== proposal.baseVersionHash) {
+      throw new Error(
+        "Screen changed since proposal — regenerate before accepting.",
+      );
+    }
+    const source: CodeLayerSource = {
+      kind: "design-file",
+      sourceType: "inline",
+      designId: file.designId,
+      fileId: file.id,
+      filename: file.filename,
+    };
+    const rewrite = spliceNodeRewriteVariant({
+      content: live.content,
+      target: proposal.resolvedTarget,
+      variant,
+      source,
+      fileType: file.fileType,
+    });
+    const write = await writeInlineSourceFile({
+      designId: file.designId,
+      file,
+      content: rewrite.content,
+      expectedVersionHash: proposal.baseVersionHash,
+    });
+    await clearProposalState(proposalKey, proposal, pending);
+
+    return {
+      proposalId,
+      repromptId: proposal.repromptId,
+      resolution,
+      variantIndex: chosenIndex,
+      summary: variant.summary,
+      changed: write.changed,
+      designId: file.designId,
+      fileId: file.id,
+      versionHash: write.versionHash,
+    };
+  },
+});

package/corpus/templates/design/actions/view-screen.ts

@@ -9,6 +9,7 @@
 
 import { defineAction } from "@agent-native/core";
 import {
+  listAppState,
   readAppState,
   readAppStateForCurrentTab,
 } from "@agent-native/core/application-state";
@@ -30,6 +31,14 @@ import { getDb, schema } from "../server/db/index.js";
 import { parseCanvasFrameGeometryById } from "../shared/canvas-frames.js";
 import { getDesignTemplatePreset } from "../shared/design-template-presets.js";
 import { designGenerationSessionKey } from "../shared/generation-session.js";
+import {
+  DESIGN_REPROMPT_PENDING_STATE_PREFIX,
+  DESIGN_REPROMPT_PROPOSAL_STATE_PREFIX,
+  designRepromptPendingStateKey,
+  designRepromptProposalStateKey,
+  isNodeRewriteProposal,
+  isPendingDesignReprompt,
+} from "../shared/node-rewrite.js";
 
 interface ReviewThreadSummary {
   openCount: number;
@@ -309,14 +318,101 @@ export default defineAction({
             data = {};
           }
         }
+        const activeScreen = resolveActiveScreen(
+          files,
+          navigation,
+          designSelection,
+        );
         screen.design = {
           id: designId,
           title: (access.resource as { title?: unknown }).title ?? null,
           screens: files,
-          activeScreen: resolveActiveScreen(files, navigation, designSelection),
+          activeScreen,
           activeCodeFile: resolveActiveCodeFile(files, designSelection),
           canvasFrames: parseCanvasFrameGeometryById(data.canvasFrames),
         };
+        const proposalPrefix = `${DESIGN_REPROMPT_PROPOSAL_STATE_PREFIX}${designId}:`;
+        const pendingPrefix = `${DESIGN_REPROMPT_PENDING_STATE_PREFIX}${designId}:`;
+        const [proposalEntries, pendingEntries] = await Promise.all([
+          listAppState(proposalPrefix),
+          listAppState(pendingPrefix),
+        ]);
+        const filesById = new Map(files.map((file) => [file.id, file]));
+        const pendingByFileId = new Map(
+          pendingEntries.flatMap(({ key, value }) => {
+            if (
+              !isPendingDesignReprompt(value) ||
+              value.designId !== designId ||
+              !filesById.has(value.fileId) ||
+              key !== designRepromptPendingStateKey(designId, value.fileId)
+            ) {
+              return [];
+            }
+            return [[value.fileId, value] as const];
+          }),
+        );
+        const proposalsByReprompt = new Map(
+          proposalEntries.flatMap(({ key, value }) => {
+            if (
+              !isNodeRewriteProposal(value) ||
+              value.designId !== designId ||
+              !filesById.has(value.fileId) ||
+              key !==
+                designRepromptProposalStateKey(
+                  designId,
+                  value.fileId,
+                  value.repromptId,
+                )
+            ) {
+              return [];
+            }
+            return [[`${value.fileId}:${value.repromptId}`, value] as const];
+          }),
+        );
+        const proposalsByFileId = new Map(
+          [...pendingByFileId.entries()].flatMap(([fileId, pending]) => {
+            const current = proposalsByReprompt.get(
+              `${fileId}:${pending.repromptId}`,
+            );
+            const prior = pending.priorRepromptId
+              ? proposalsByReprompt.get(`${fileId}:${pending.priorRepromptId}`)
+              : undefined;
+            const proposal =
+              current ??
+              (prior?.proposalId === pending.priorProposalId
+                ? prior
+                : undefined);
+            return proposal ? [[fileId, proposal] as const] : [];
+          }),
+        );
+        const pendingCandidateReviews = [...proposalsByFileId.values()].map(
+          (proposal) => {
+            const file = filesById.get(proposal.fileId)!;
+            return {
+              proposalId: proposal.proposalId,
+              fileId: proposal.fileId,
+              filename: proposal.filename || file.filename,
+              candidateCount: proposal.variants.length,
+              chosenIndex: proposal.chosenIndex,
+              target: proposal.target,
+              createdAt: proposal.createdAt,
+            };
+          },
+        );
+        if (pendingCandidateReviews.length > 0) {
+          (screen.design as Record<string, unknown>).pendingCandidateReviews =
+            pendingCandidateReviews;
+        }
+        if (activeScreen?.id) {
+          const pendingReprompt = pendingByFileId.get(activeScreen.id);
+          const proposal = proposalsByFileId.get(activeScreen.id);
+          if (pendingReprompt || proposal) {
+            (screen.design as Record<string, unknown>).reprompt = {
+              pending: pendingReprompt ?? null,
+              proposal: proposal ?? null,
+            };
+          }
+        }
         const reviewContext = ctx as ReviewResourceContext | undefined;
         const reviewScope = {
           userEmail: reviewContext?.userEmail ?? null,
@@ -357,7 +453,7 @@ export default defineAction({
           redactReviewIdentity
             ? redactPublicReviewStatusIdentity(reviewStatus)
             : reviewStatus,
-          resolveActiveScreen(files, navigation, designSelection)?.id,
+          activeScreen?.id,
           reviewSummary,
         );
       }

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

@@ -92,6 +92,7 @@ export type CanvasContextMenuAction =
   | "add-auto-layout"
   | "suggest-auto-layout"
   | "create-component"
+  | "reprompt"
   | "go-to-main-component"
   | "swap-instance"
   | "detach-instance"
@@ -135,6 +136,7 @@ export type CanvasContextMenuActionHandler = (
 
 export interface CanvasContextMenuLabels {
   selectLayer: string;
+  reprompt: string;
   pasteHere: string;
   selectAll: string;
   zoomToFit: string;
@@ -231,6 +233,10 @@ export interface CanvasContextMenuProps {
   selectedCount?: number;
   layerCandidates?: readonly CanvasLayerHitCandidate[];
   onSelectLayer?: (candidate: CanvasLayerHitCandidate) => void;
+  onRepromptLayer?: (
+    candidate: CanvasLayerHitCandidate,
+    details: CanvasContextMenuActionDetails,
+  ) => void;
   hasClipboard?: boolean;
   hasPropsClipboard?: boolean;
   hasAnimationClipboard?: boolean;
@@ -261,6 +267,7 @@ export interface CanvasContextMenuProps {
   canAddAutoLayout?: boolean;
   canSuggestAutoLayout?: boolean;
   canCreateComponent?: boolean;
+  canReprompt?: boolean;
   // Whether the current selection IS a component instance — gates the
   // whole Go to main component / Swap instance / Detach instance cluster on
   // (rather than showing them permanently disabled for non-instance
@@ -330,6 +337,7 @@ export interface CanvasContextMenuProps {
   onAddAutoLayout?: CanvasContextMenuActionHandler;
   onSuggestAutoLayout?: CanvasContextMenuActionHandler;
   onCreateComponent?: CanvasContextMenuActionHandler;
+  onReprompt?: CanvasContextMenuActionHandler;
   onGoToMainComponent?: CanvasContextMenuActionHandler;
   onSwapInstance?: CanvasContextMenuActionHandler;
   onDetachInstance?: CanvasContextMenuActionHandler;
@@ -361,6 +369,7 @@ export interface CanvasContextMenuProps {
 
 const DEFAULT_LABELS: CanvasContextMenuLabels = {
   selectLayer: "Select layer",
+  reprompt: "Regenerate…",
   pasteHere: "Paste here",
   selectAll: "Select all",
   zoomToFit: "Zoom to fit",
@@ -481,6 +490,7 @@ export const CanvasContextMenu = forwardRef<
     selectedCount = 0,
     layerCandidates = [],
     onSelectLayer,
+    onRepromptLayer,
     hasClipboard = false,
     hasPropsClipboard = false,
     hasAnimationClipboard = false,
@@ -500,6 +510,7 @@ export const CanvasContextMenu = forwardRef<
     canAddAutoLayout = selectedCount > 0,
     canSuggestAutoLayout = false,
     canCreateComponent = selectedCount > 0,
+    canReprompt = selectedCount > 0 || layerCandidates.length > 0,
     isComponentInstance = false,
     canGoToMainComponent = isComponentInstance,
     canSwapInstance = isComponentInstance,
@@ -540,6 +551,7 @@ export const CanvasContextMenu = forwardRef<
     onAddAutoLayout,
     onSuggestAutoLayout,
     onCreateComponent,
+    onReprompt,
     onGoToMainComponent,
     onSwapInstance,
     onDetachInstance,
@@ -624,6 +636,7 @@ export const CanvasContextMenu = forwardRef<
       "add-auto-layout": onAddAutoLayout,
       "suggest-auto-layout": onSuggestAutoLayout,
       "create-component": onCreateComponent,
+      reprompt: onReprompt,
       "go-to-main-component": onGoToMainComponent,
       "swap-instance": onSwapInstance,
       "detach-instance": onDetachInstance,
@@ -654,6 +667,7 @@ export const CanvasContextMenu = forwardRef<
       onCopyAsSvg,
       onCopyProps,
       onCreateComponent,
+      onReprompt,
       onDetachInstance,
       onFlipHorizontal,
       onFlipVertical,
@@ -772,6 +786,62 @@ export const CanvasContextMenu = forwardRef<
             <CanvasMenuSeparator />
           </>
         ) : null}
+        {canReprompt && (onReprompt || onRepromptLayer) ? (
+          <>
+            <ContextMenuGroup>
+              {layerCandidates.length > 1 && onRepromptLayer ? (
+                <ContextMenuSub>
+                  <ContextMenuSubTrigger className={MENU_SUB_TRIGGER_CLASS}>
+                    {labels.reprompt}
+                  </ContextMenuSubTrigger>
+                  <ContextMenuSubContent
+                    className={cn(MENU_CONTENT_CLASS, "w-56")}
+                  >
+                    {layerCandidates.map((candidate) => (
+                      <CanvasLayerCandidateItem
+                        key={`reprompt:${candidate.key}`}
+                        candidate={candidate}
+                        onSelect={(event) => {
+                          onRepromptLayer(candidate, {
+                            action: "reprompt",
+                            point,
+                            selectedCount,
+                            originalEvent: event,
+                          });
+                          handleOpenChange(false);
+                        }}
+                      />
+                    ))}
+                  </ContextMenuSubContent>
+                </ContextMenuSub>
+              ) : (
+                <CanvasMenuItem
+                  hidden={isHiddenAction("reprompt")}
+                  disabled={
+                    !canReprompt ||
+                    (!onReprompt &&
+                      !(onRepromptLayer && layerCandidates.length === 1))
+                  }
+                  label={labels.reprompt}
+                  onSelect={(event) => {
+                    const candidate = layerCandidates[0];
+                    if (!onReprompt && onRepromptLayer && candidate) {
+                      onRepromptLayer(candidate, {
+                        action: "reprompt",
+                        point,
+                        selectedCount,
+                        originalEvent: event,
+                      });
+                      return;
+                    }
+                    runAction("reprompt", event);
+                  }}
+                />
+              )}
+            </ContextMenuGroup>
+            <CanvasMenuSeparator />
+          </>
+        ) : null}
         {hasSelection ? (
           <>
             {/* LIVE-VERIFIED Figma "with selection" canvas menu. */}
@@ -1083,7 +1153,7 @@ function CanvasLayerCandidateItem({
   onSelect,
 }: {
   candidate: CanvasLayerHitCandidate;
-  onSelect: () => void;
+  onSelect: (event: Event) => void;
 }) {
   const tag = candidate.info.tagName.toLowerCase();
   const Icon = candidate.info.componentName

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

@@ -24,6 +24,7 @@ import {
   type PenPath,
   type PenPoint,
 } from "@shared/pen-path";
+import { sourceContentHash } from "@shared/source-workspace";
 import { IconPlugConnectedX, IconRefresh } from "@tabler/icons-react";
 import {
   useCallback,
@@ -43,6 +44,7 @@ import { Button } from "@/components/ui/button";
 import {
   DrawOverlay as SharedDrawOverlay,
   ReviewCanvasPins,
+  type RepromptDraftRequest,
   type ReviewFocusRequest,
 } from "@/components/visual-editor";
 import { sendToDesignAgentChatAndConfirm } from "@/lib/agent-chat";
@@ -556,6 +558,11 @@ interface DesignCanvasProps {
   previewFrameId?: string;
   /** Human-readable label for comment-pin prompts. */
   commentContextLabel?: string;
+  /** Opens an ephemeral, pre-anchored regenerate composer for this screen. */
+  repromptDraftRequest?: RepromptDraftRequest | null;
+  onRepromptDraftConsumed?: (nonce: number) => void;
+  /** Marks the one base canvas used for pending rewrite previews. */
+  nodeRewriteCanvasTarget?: boolean;
   /**
    * Called when a link inside the prototype points to another screen (a
    * relative href or `data-screen`). Lets the editor switch the active screen
@@ -1053,6 +1060,9 @@ export function DesignCanvas({
   commentContextId,
   screenId,
   previewFrameId,
+  repromptDraftRequest,
+  onRepromptDraftConsumed,
+  nodeRewriteCanvasTarget = false,
   onPrototypeNavigate,
   motionTracks,
   motionDefaultEase,
@@ -4027,6 +4037,9 @@ export function DesignCanvas({
   const iframeElement = (
     <div
       data-review-canvas-id={reviewCanvasId}
+      data-node-rewrite-canvas-target={
+        nodeRewriteCanvasTarget ? "true" : undefined
+      }
       className="design-canvas-iframe-wrapper relative inline-block ring-1 ring-border/60 shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_8px_24px_-12px_rgba(0,0,0,0.45)]"
       onDragEnter={handleWrapperDragEnter}
       onDragOver={handleWrapperDragOver}
@@ -4548,6 +4561,12 @@ export function DesignCanvas({
           onDispatchCommentToAgent={onDispatchCommentToAgent}
           onSendThreadToAgent={onSendThreadToAgent}
           sendingThreadId={reviewSendingThreadId}
+          sourceType={
+            sourceType ?? (externalPreviewUrl ? "localhost" : "inline")
+          }
+          sourceVersionHash={sourceContentHash(content)}
+          repromptDraftRequest={repromptDraftRequest}
+          onRepromptDraftConsumed={onRepromptDraftConsumed}
         />
       ) : null}
     </div>

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

@@ -398,6 +398,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   hiddenScreenIds = EMPTY_SCREEN_IDS,
   lockedScreenIds = EMPTY_SCREEN_IDS,
   fullViewScreenIds,
+  pendingReviewScreenIds = EMPTY_SCREEN_IDS,
+  onReviewPendingScreen,
   interactMode = false,
   activeScreenHasHoveredChild = false,
   hoveredChildScreenId,
@@ -525,6 +527,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     () => new Set(lockedScreenIds),
     [lockedScreenIds],
   );
+  const pendingReviewScreenIdSet = useMemo(
+    () => new Set(pendingReviewScreenIds),
+    [pendingReviewScreenIds],
+  );
   const renderedScreens = useMemo(
     () => screens.filter((screen) => !hiddenScreenIdSet.has(screen.id)),
     [hiddenScreenIdSet, screens],
@@ -7609,6 +7615,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                 !isBreakpointSelectionTarget(screen)
               }
               showFullView={fullViewIdSet.has(screen.id)}
+              pendingReview={pendingReviewScreenIdSet.has(screen.id)}
+              onReviewPendingScreen={onReviewPendingScreen}
               interactMode={interactMode}
               isDirectlyHovered={screen.id === directlyHoveredScreenId}
               isFileDragOver={
@@ -8898,6 +8906,8 @@ interface ScreenProps {
   isSelected: boolean;
   isTopScreen: boolean;
   showFullView: boolean;
+  pendingReview: boolean;
+  onReviewPendingScreen?: (screenId: string) => void;
   interactMode: boolean;
   isDirectlyHovered: boolean;
   /** True while a native OS file drag is hovering this frame (Figma parity §1). */
@@ -8966,6 +8976,8 @@ const Screen = memo(function Screen({
   isSelected,
   isTopScreen,
   showFullView,
+  pendingReview,
+  onReviewPendingScreen,
   interactMode,
   isDirectlyHovered,
   isFileDragOver,
@@ -9174,6 +9186,27 @@ const Screen = memo(function Screen({
           >
             {display}
           </span>
+          {pendingReview && onReviewPendingScreen ? (
+            <button
+              type="button"
+              data-node-rewrite-review-badge
+              className="flex h-5 shrink-0 items-center gap-1 rounded-full border border-border bg-background/95 px-1.5 !text-[9px] font-medium text-foreground shadow-sm hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              title={t("designEditor.nodeRewrite.reviewCandidate")}
+              aria-label={t("designEditor.nodeRewrite.reviewCandidate")}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                onReviewPendingScreen(screen.id);
+              }}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+              }}
+            >
+              <span className="size-1.5 rounded-full bg-primary" />
+              {t("designEditor.nodeRewrite.reviewCandidate")}
+            </button>
+          ) : null}
           {metadata.source === "fusion" ? (
             <span
               data-frame-source-badge="fusion"