@agent-native/core 0.163.4 → 0.164.1

package/corpus/templates/design/app/pages/design-editor/commands/screen-visual-style-change.ts

@@ -0,0 +1,151 @@
+import { buildCodeLayerProjection } from "@shared/code-layer";
+import type { InteractionState } from "@shared/interaction-states";
+import { normalizeDesignSourceType } from "@shared/source-mode";
+import type { RefObject } from "react";
+
+import type { ElementInfo } from "@/components/design/types";
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import {
+  codeLayerPatchMessage,
+  resolveCodeLayerNodeFromBridge,
+  resolveCodeLayerNodeFromElementInfo,
+} from "@/pages/design-editor/code-layer-state";
+import type { ResponsiveEditScope } from "@/pages/design-editor/command-types";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import { applyScopedVisualStyleEdit } from "@/pages/design-editor/pending-edits";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface ScreenVisualStyleChangeArgs {
+  activeBreakpointUpperBoundPx: number | null;
+  activeBreakpointWidthStateRef: RefObject<number | undefined>;
+  activeFile: DesignFile;
+  applyFileContentUpdate: (
+    fileId: string,
+    nextContent: string,
+    options?: {
+      refreshPreview?: boolean;
+      skipPreview?: boolean;
+      forcePreviewFullDocument?: boolean;
+      persist?: boolean;
+      recordHistory?: boolean;
+      updatedAt?: string;
+      clipboardMutation?: ClipboardContentMutationPublication;
+    },
+  ) => void;
+  canEditDesign: boolean;
+  designSourceType: "inline" | "localhost" | "fusion";
+  getScreenContent: (screenId: string) => string;
+  handleVisualStyleChange: (
+    selector: string,
+    styles: Record<string, string>,
+    elementInfo?: ElementInfo,
+    metadata?: { originalStyles?: Record<string, string> },
+  ) => void;
+  overviewScreens: OverviewScreen[];
+  recordPendingVisualStyleEdit: (
+    screenId: string,
+    selector: string,
+    styles: Record<string, string>,
+    elementInfo?: ElementInfo,
+    metadata?: {
+      originalStyles?: Record<string, string>;
+      interactionState?: InteractionState;
+    },
+  ) => void;
+  responsiveEditScopeRef: RefObject<ResponsiveEditScope>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runScreenVisualStyleChange(
+  {
+    activeBreakpointUpperBoundPx,
+    activeBreakpointWidthStateRef,
+    activeFile,
+    applyFileContentUpdate,
+    canEditDesign,
+    designSourceType,
+    getScreenContent,
+    handleVisualStyleChange,
+    overviewScreens,
+    recordPendingVisualStyleEdit,
+    responsiveEditScopeRef,
+    t,
+  }: ScreenVisualStyleChangeArgs,
+  screenId: string,
+  selector: string,
+  styles: Record<string, string>,
+  elementInfo?: ElementInfo,
+  metadata?: { originalStyles?: Record<string, string> },
+) {
+  if (screenId === activeFile?.id) {
+    handleVisualStyleChange(selector, styles, elementInfo, metadata);
+    return;
+  }
+  // §gesture-persistence — mirror handleVisualStyleChange's source-type
+  // branch for overview screens other than the active one: localhost
+  // still queues for agent apply, inline/fusion screens persist the
+  // gesture commit immediately (breakpoint-aware, single history step),
+  // matching commitStylesToSelectedLayers's established per-file write
+  // pattern below.
+  const overviewScreen = overviewScreens.find(
+    (screen) => screen.id === screenId,
+  );
+  const screenSourceType =
+    normalizeDesignSourceType(overviewScreen?.sourceType) ?? designSourceType;
+  if (screenSourceType === "localhost") {
+    recordPendingVisualStyleEdit(
+      screenId,
+      selector,
+      styles,
+      elementInfo,
+      metadata,
+    );
+    return;
+  }
+  if (!canEditDesign) return;
+  const entries = Object.entries(styles).filter(
+    ([, value]) => value !== undefined,
+  );
+  if (entries.length === 0) return;
+  const baseContent = getScreenContent(screenId);
+  if (!baseContent) return;
+  const projection = buildCodeLayerProjection(baseContent);
+  const targetInfo = elementInfo ? { ...elementInfo, selector } : null;
+  const targetNode = targetInfo
+    ? resolveCodeLayerNodeFromElementInfo(projection, targetInfo)
+    : resolveCodeLayerNodeFromBridge(projection, selector);
+  const stylePatch = entries.reduce<{
+    content: string;
+    failed: string | null;
+  }>(
+    (current, [property, value]) => {
+      if (current.failed) return current;
+      const patch = applyScopedVisualStyleEdit({
+        content: current.content,
+        target: targetNode ? { nodeId: targetNode.id } : { selector },
+        property,
+        value,
+        upperBoundPx: activeBreakpointUpperBoundPx,
+        lowerBoundPx:
+          responsiveEditScopeRef.current === "only"
+            ? activeBreakpointWidthStateRef.current
+            : null,
+      });
+      if (patch.result.status !== "applied") {
+        return {
+          content: current.content,
+          failed: codeLayerPatchMessage(
+            patch.result.message,
+            t("designEditor.patchProof.selectorMissing"),
+          ),
+        };
+      }
+      return { content: patch.content, failed: null };
+    },
+    { content: baseContent, failed: null },
+  );
+  if (stylePatch.failed || stylePatch.content === baseContent) return;
+  applyFileContentUpdate(screenId, stylePatch.content, {
+    skipPreview: true,
+  });
+}

package/corpus/templates/design/app/pages/design-editor/commands/send-overview-annotations.ts

@@ -0,0 +1,88 @@
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import type { DrawAnnotation } from "@/components/visual-editor/DrawOverlay";
+import { sendToDesignAgentChatAndConfirm } from "@/lib/agent-chat";
+import { prettyScreenName } from "@/lib/screen-names";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import {
+  collectOverviewAnnotationViewportMap,
+  formatOverviewAnnotationMessage,
+} from "@/pages/design-editor/overview-annotation-context";
+import type { DesignData } from "@/pages/design-editor/types";
+
+export interface SendOverviewAnnotationsArgs {
+  canvasContainerRef: RefObject<HTMLDivElement | null>;
+  design: DesignData | null;
+  handleExitOverviewDrawMode: () => void;
+  id: string | undefined;
+  overviewAnnotationSendingRef: RefObject<boolean>;
+  overviewCanvasZoom: number;
+  overviewScreens: OverviewScreen[];
+  setOverviewAnnotationSending: Dispatch<SetStateAction<boolean>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export async function runSendOverviewAnnotations(
+  {
+    canvasContainerRef,
+    design,
+    handleExitOverviewDrawMode,
+    id,
+    overviewAnnotationSendingRef,
+    overviewCanvasZoom,
+    overviewScreens,
+    setOverviewAnnotationSending,
+    t,
+  }: SendOverviewAnnotationsArgs,
+  annotations: DrawAnnotation[],
+  instruction: string,
+  canvasSize: { width: number; height: number },
+) {
+  if (overviewAnnotationSendingRef.current) return;
+  const container = canvasContainerRef.current;
+  const viewportMap = container
+    ? collectOverviewAnnotationViewportMap({
+        container,
+        screens: overviewScreens.map((screen) => ({
+          id: screen.id,
+          name: prettyScreenName(screen.filename),
+        })),
+        zoom: overviewCanvasZoom,
+      })
+    : {
+        width: canvasSize.width,
+        height: canvasSize.height,
+        zoom: overviewCanvasZoom,
+        screens: [],
+      };
+  const message = formatOverviewAnnotationMessage({
+    designId: id ?? "",
+    designTitle: design?.title,
+    annotations,
+    instruction,
+    viewportMap,
+  });
+
+  overviewAnnotationSendingRef.current = true;
+  setOverviewAnnotationSending(true);
+  try {
+    const result = await sendToDesignAgentChatAndConfirm({
+      message,
+      submit: true,
+      openSidebar: true,
+    });
+    if (!result.delivered) {
+      throw new Error(
+        `Overview annotation message was not delivered to the agent chat (${result.reason ?? "unknown"})`,
+      );
+    }
+    handleExitOverviewDrawMode();
+  } catch (error) {
+    console.error("[DesignEditor] failed to submit overview drawing:", error);
+    toast.error(t("designEditor.toasts.annotationSendError"));
+  } finally {
+    overviewAnnotationSendingRef.current = false;
+    setOverviewAnnotationSending(false);
+  }
+}

package/corpus/templates/design/app/pages/design-editor/commands/send-runtime-layer-move-semantic-handoff.ts

@@ -0,0 +1,122 @@
+import type { CodeLayerNode, CodeLayerTreeNode } from "@shared/code-layer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import { sendToDesignAgentChat } from "@/lib/agent-chat";
+import { elementInfoFromCodeLayerNode } from "@/pages/design-editor/code-layer-state";
+import type { RuntimeLayerSnapshot } from "@/pages/design-editor/command-types";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import { runtimeMultiplicityForElementProvenance } from "@/pages/design-editor/editor-helpers";
+import {
+  reactSourceAnchorForPendingEdit,
+  reactSourceAnchorUnavailableReason,
+} from "@/pages/design-editor/pending-edits";
+import { buildRuntimeReactStructureMoveHandoff } from "@/pages/design-editor/react-semantic-handoff";
+import type { DesignLeftPanel } from "@/pages/design-editor/types";
+
+export interface SendRuntimeLayerMoveSemanticHandoffArgs {
+  codeLayerOwnerByNodeIdRef: RefObject<
+    Map<
+      string,
+      {
+        fileId: string;
+        node: CodeLayerNode;
+        tree: CodeLayerTreeNode[];
+        runtimeOnly: boolean;
+      }
+    >
+  >;
+  localhostConnectionRootPathByIdRef: RefObject<Map<string, string>>;
+  overviewScreens: OverviewScreen[];
+  runtimeLayerSnapshotsById: Record<string, RuntimeLayerSnapshot>;
+  setActiveLeftPanel: Dispatch<SetStateAction<DesignLeftPanel>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runSendRuntimeLayerMoveSemanticHandoff(
+  {
+    codeLayerOwnerByNodeIdRef,
+    localhostConnectionRootPathByIdRef,
+    overviewScreens,
+    runtimeLayerSnapshotsById,
+    setActiveLeftPanel,
+    t,
+  }: SendRuntimeLayerMoveSemanticHandoffArgs,
+  subjectLayerId: string,
+  targetLayerId: string,
+  placement: "before" | "after" | "inside",
+): boolean {
+  const subjectOwner = codeLayerOwnerByNodeIdRef.current.get(subjectLayerId);
+  const targetOwner = codeLayerOwnerByNodeIdRef.current.get(targetLayerId);
+  if (!subjectOwner || !targetOwner) return false;
+
+  const sourceAnchorForOwner = (
+    owner: typeof subjectOwner,
+    anchorId: "subject" | "target",
+  ) => {
+    const screen = overviewScreens.find(
+      (candidate) => candidate.id === owner.fileId,
+    );
+    const rootPath = screen?.connectionId
+      ? localhostConnectionRootPathByIdRef.current.get(screen.connectionId)
+      : undefined;
+    const info = elementInfoFromCodeLayerNode(owner.node);
+    return reactSourceAnchorForPendingEdit({
+      info,
+      id: anchorId,
+      rootPath,
+      runtimeMultiplicity: runtimeMultiplicityForElementProvenance(
+        runtimeLayerSnapshotsById,
+        info,
+      ),
+      reason:
+        anchorId === "subject"
+          ? `Runtime Layers-panel move subject in screen ${owner.fileId}.`
+          : `Runtime Layers-panel move target in screen ${owner.fileId}.`,
+    });
+  };
+
+  const subjectAnchor = sourceAnchorForOwner(subjectOwner, "subject");
+  const targetAnchor = sourceAnchorForOwner(targetOwner, "target");
+  if (!subjectAnchor || !targetAnchor) {
+    // Mixed runtime/source moves are only safe when BOTH endpoints carry
+    // exact compiler provenance. Never fall back to selectors or a generic
+    // source/AST move for the missing side.
+    toast.error(
+      reactSourceAnchorUnavailableReason([
+        elementInfoFromCodeLayerNode(subjectOwner.node),
+        elementInfoFromCodeLayerNode(targetOwner.node),
+      ])
+        ? t("designEditor.toasts.reactSourceAnchorsUnavailable")
+        : t("designEditor.toasts.reactSourceAnchorsLoading"),
+    );
+    return true;
+  }
+
+  const handoff = buildRuntimeReactStructureMoveHandoff({
+    subjectAnchor,
+    targetAnchor,
+    placement,
+    sourceScreenId: subjectOwner.fileId,
+    targetScreenId: targetOwner.fileId,
+  });
+  if (!handoff.ok) {
+    toast.error(handoff.rejection.reason);
+    return true;
+  }
+
+  sendToDesignAgentChat({
+    message: t("designEditor.pendingVisualStyles.agentMessage"),
+    context: [
+      "Apply this runtime Layers-panel move/reparent to the connected React source.",
+      `The exact subject belongs to screen ${subjectOwner.fileId}; the exact target belongs to screen ${targetOwner.fileId}.`,
+      "Compiler provenance is for anchoring and validation only, and only as precise as each anchor's positionPrecision says. Never apply a generic AST reparent or structure transform.",
+      "Read every affected file first, obtain human write consent, write with each read's expectedVersionHash and requireExpectedVersionHash: true, re-read/re-plan on conflict, and keep any optimistic preview pending only until HMR confirms the intended runtime relationship.",
+      JSON.stringify(handoff.handoff, null, 2),
+    ].join("\n\n"),
+    submit: true,
+    openSidebar: true,
+  });
+  setActiveLeftPanel("agent");
+  return true;
+}

package/corpus/templates/design/app/pages/design-editor/commands/send-runtime-layer-semantic-handoff.ts

@@ -0,0 +1,143 @@
+import type { CodeLayerNode, CodeLayerTreeNode } from "@shared/code-layer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import { sendToDesignAgentChat } from "@/lib/agent-chat";
+import { elementInfoFromCodeLayerNode } from "@/pages/design-editor/code-layer-state";
+import type { RuntimeLayerSnapshot } from "@/pages/design-editor/command-types";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import { runtimeMultiplicityForElementProvenance } from "@/pages/design-editor/editor-helpers";
+import {
+  reactSourceAnchorForPendingEdit,
+  reactSourceAnchorUnavailableReason,
+} from "@/pages/design-editor/pending-edits";
+import { buildReactSemanticHandoff } from "@/pages/design-editor/react-semantic-handoff";
+import type { DesignLeftPanel } from "@/pages/design-editor/types";
+
+export interface SendRuntimeLayerSemanticHandoffArgs {
+  codeLayerOwnerByNodeIdRef: RefObject<
+    Map<
+      string,
+      {
+        fileId: string;
+        node: CodeLayerNode;
+        tree: CodeLayerTreeNode[];
+        runtimeOnly: boolean;
+      }
+    >
+  >;
+  localhostConnectionRootPathByIdRef: RefObject<Map<string, string>>;
+  overviewScreens: OverviewScreen[];
+  runtimeLayerSnapshotsById: Record<string, RuntimeLayerSnapshot>;
+  setActiveLeftPanel: Dispatch<SetStateAction<DesignLeftPanel>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runSendRuntimeLayerSemanticHandoff(
+  {
+    codeLayerOwnerByNodeIdRef,
+    localhostConnectionRootPathByIdRef,
+    overviewScreens,
+    runtimeLayerSnapshotsById,
+    setActiveLeftPanel,
+    t,
+  }: SendRuntimeLayerSemanticHandoffArgs,
+  operation: "group" | "ungroup" | "auto-layout",
+  layerIds: readonly string[],
+  options: {
+    desiredChange?: string;
+    description?: string;
+    commandContext?: string;
+  } = {},
+): boolean {
+  const owners = layerIds
+    .map((layerId) => codeLayerOwnerByNodeIdRef.current.get(layerId))
+    .filter(
+      (
+        owner,
+      ): owner is NonNullable<
+        ReturnType<typeof codeLayerOwnerByNodeIdRef.current.get>
+      > => Boolean(owner?.runtimeOnly),
+    );
+  if (owners.length !== layerIds.length || owners.length === 0) return false;
+  const screenId = owners[0]!.fileId;
+  if (owners.some((owner) => owner.fileId !== screenId)) return false;
+  const connectionId = overviewScreens.find(
+    (screen) => screen.id === screenId,
+  )?.connectionId;
+  const rootPath = connectionId
+    ? localhostConnectionRootPathByIdRef.current.get(connectionId)
+    : undefined;
+  const infos = owners.map((owner) => elementInfoFromCodeLayerNode(owner.node));
+  const sourceAnchors = infos.map((info, index) =>
+    reactSourceAnchorForPendingEdit({
+      info,
+      id: `subject-${index + 1}`,
+      rootPath,
+      runtimeMultiplicity: runtimeMultiplicityForElementProvenance(
+        runtimeLayerSnapshotsById,
+        info,
+      ),
+    }),
+  );
+  if (sourceAnchors.some((anchor) => !anchor)) {
+    toast.error(
+      reactSourceAnchorUnavailableReason(infos)
+        ? t("designEditor.toasts.reactSourceAnchorsUnavailable")
+        : t("designEditor.toasts.reactSourceAnchorsLoading"),
+    );
+    return true;
+  }
+  const subjectAnchorIds = sourceAnchors.map(
+    (_anchor, index) => `subject-${index + 1}`,
+  );
+  const handoff = buildReactSemanticHandoff({
+    operation,
+    desiredChange:
+      options.desiredChange ??
+      (operation === "group"
+        ? "Wrap the selected runtime React elements in one new group container while preserving their visual order and layout."
+        : operation === "ungroup"
+          ? "Remove the selected runtime React container wrapper and preserve its children in the same visual position and order."
+          : owners.length > 1
+            ? "Wrap the selected runtime React elements in an inferred auto-layout container while preserving their visual order."
+            : "Convert the selected runtime React container to inferred auto layout without changing unrelated behavior."),
+    sourceAnchors: sourceAnchors.filter(
+      (anchor): anchor is NonNullable<typeof anchor> => Boolean(anchor),
+    ),
+    runtimeRelationship: {
+      kind:
+        operation === "group"
+          ? "wrap"
+          : operation === "ungroup"
+            ? "unwrap"
+            : owners.length > 1
+              ? "wrap"
+              : "style",
+      subjectAnchorIds,
+      screenId,
+      description:
+        options.description ??
+        `${operation} ${owners.length} selected runtime React layer${owners.length === 1 ? "" : "s"}`,
+    },
+    versionHashes: [],
+  });
+  if (!handoff.ok) {
+    toast.error(handoff.rejection.reason);
+    return true;
+  }
+  sendToDesignAgentChat({
+    message: t("designEditor.pendingVisualStyles.agentMessage"),
+    context: [
+      options.commandContext ??
+        "Apply this runtime Layers-panel command to the connected React source.",
+      "The compiler metadata is for source anchoring and validation only; do not use a generic AST structural transform. Respect each anchor's positionPrecision — a non-authored line is the dev server's, not the file's.",
+      "Read every target file, obtain human write consent, write with expectedVersionHash and requireExpectedVersionHash: true, then verify the resulting HMR/runtime relationship.",
+      JSON.stringify(handoff.handoff, null, 2),
+    ].join("\n\n"),
+    submit: true,
+    openSidebar: true,
+  });
+  setActiveLeftPanel("agent");
+  return true;
+}

package/corpus/templates/design/app/pages/design-editor/commands/send-runtime-layer-state-semantic-handoff.ts

@@ -0,0 +1,115 @@
+import type { CodeLayerNode, CodeLayerTreeNode } from "@shared/code-layer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import { sendToDesignAgentChat } from "@/lib/agent-chat";
+import {
+  elementInfoFromCodeLayerNode,
+  runtimeLayerStateHandoffMode,
+} from "@/pages/design-editor/code-layer-state";
+import type { RuntimeLayerSnapshot } from "@/pages/design-editor/command-types";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import { runtimeMultiplicityForElementProvenance } from "@/pages/design-editor/editor-helpers";
+import {
+  reactSourceAnchorForPendingEdit,
+  reactSourceAnchorUnavailableReason,
+} from "@/pages/design-editor/pending-edits";
+import { buildRuntimeReactLayerStateHandoff } from "@/pages/design-editor/react-semantic-handoff";
+import type { DesignLeftPanel } from "@/pages/design-editor/types";
+
+export interface SendRuntimeLayerStateSemanticHandoffArgs {
+  codeLayerOwnerByNodeIdRef: RefObject<
+    Map<
+      string,
+      {
+        fileId: string;
+        node: CodeLayerNode;
+        tree: CodeLayerTreeNode[];
+        runtimeOnly: boolean;
+      }
+    >
+  >;
+  localhostConnectionRootPathByIdRef: RefObject<Map<string, string>>;
+  overviewScreens: OverviewScreen[];
+  runtimeLayerSnapshotsById: Record<string, RuntimeLayerSnapshot>;
+  setActiveLeftPanel: Dispatch<SetStateAction<DesignLeftPanel>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runSendRuntimeLayerStateSemanticHandoff(
+  {
+    codeLayerOwnerByNodeIdRef,
+    localhostConnectionRootPathByIdRef,
+    overviewScreens,
+    runtimeLayerSnapshotsById,
+    setActiveLeftPanel,
+    t,
+  }: SendRuntimeLayerStateSemanticHandoffArgs,
+  layerId: string,
+  state: "locked" | "hidden",
+  enabled: boolean,
+): true | "preview-only" | false {
+  const owner = codeLayerOwnerByNodeIdRef.current.get(layerId);
+  if (!owner) return "preview-only";
+
+  const screen = overviewScreens.find(
+    (candidate) => candidate.id === owner.fileId,
+  );
+  const rootPath = screen?.connectionId
+    ? localhostConnectionRootPathByIdRef.current.get(screen.connectionId)
+    : undefined;
+  const info = elementInfoFromCodeLayerNode(owner.node);
+  if (
+    runtimeLayerStateHandoffMode({
+      runtimeOnly: owner.runtimeOnly,
+      provenanceSourceFile: info.provenance?.sourceFile,
+    }) === "preview-only"
+  ) {
+    return "preview-only";
+  }
+  const subjectAnchor = reactSourceAnchorForPendingEdit({
+    info,
+    id: "subject",
+    rootPath,
+    runtimeMultiplicity: runtimeMultiplicityForElementProvenance(
+      runtimeLayerSnapshotsById,
+      info,
+    ),
+    reason: `Runtime Layers-panel ${state} state for layer ${layerId} in screen ${owner.fileId}.`,
+  });
+  if (!subjectAnchor) {
+    toast.error(
+      reactSourceAnchorUnavailableReason([info])
+        ? t("designEditor.toasts.reactSourceAnchorsUnavailable")
+        : t("designEditor.toasts.reactSourceAnchorsLoading"),
+    );
+    return false;
+  }
+
+  const handoff = buildRuntimeReactLayerStateHandoff({
+    subjectAnchor,
+    screenId: owner.fileId,
+    state,
+    enabled,
+  });
+  if (!handoff.ok) {
+    toast.error(handoff.rejection.reason);
+    return false;
+  }
+
+  const attributeName = `data-agent-native-${state}`;
+  sendToDesignAgentChat({
+    message: t("designEditor.pendingVisualStyles.agentMessage"),
+    context: [
+      `Apply this runtime Layers-panel ${state} change to the connected React source.`,
+      `Use the compiler anchor to ${enabled ? `set ${attributeName}=\"true\" on` : `remove ${attributeName} from`} the existing JSX host element. The runtime Layers snapshot recognizes this durable source metadata; do not replace it with CSS, a transient DOM mutation, or a wrapper.`,
+      "Compiler provenance is for anchoring and validation only, and only as precise as each anchor's positionPrecision says. Never apply a generic AST transform.",
+      "Read the affected file first, obtain human write consent, write with that read's expectedVersionHash and requireExpectedVersionHash: true, re-read/re-plan on conflict, and keep the optimistic layer-state preview only until HMR confirms the source metadata.",
+      JSON.stringify(handoff.handoff, null, 2),
+    ].join("\n\n"),
+    submit: true,
+    openSidebar: true,
+  });
+  setActiveLeftPanel("agent");
+  return true;
+}