@agent-native/core 0.80.10 → 0.81.0

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

@@ -57,6 +57,7 @@ export type LayersPanelNodeType =
   | "image"
   | "code"
   | "element"
+  | "board-element"
   | "unknown";
 
 export interface LayersPanelNode {
@@ -151,6 +152,7 @@ export interface LayersPanelProps {
   expandedIds: readonly string[];
   searchQuery: string;
   className?: string;
+  footer?: ReactNode;
   labels?: Partial<LayersPanelLabels>;
   onSearchQueryChange: (query: string) => void;
   onScreenSelect?: (id: string) => void;
@@ -168,9 +170,12 @@ export interface LayersPanelProps {
   onLeaveLayer?: (id: string) => void;
   onMoveLayer?: (intent: LayersPanelMoveIntent) => void;
   canMoveLayer?: (intent: LayersPanelMoveIntent) => boolean;
+  // Board elements — top-level layer nodes projected from the board file.
+  // When absent the panel is unchanged.
+  boardElements?: LayersPanelNode[];
 }
 
-interface FlatLayerRow {
+export interface FlatLayerRow {
   node: LayersPanelNode;
   rowKey: string;
   depth: number;
@@ -283,14 +288,16 @@ function buildRootNodes({
   layers,
   codeLayers,
   elementLayers,
+  boardElements,
   labels,
 }: Pick<
   LayersPanelProps,
-  "files" | "layers" | "codeLayers" | "elementLayers"
+  "files" | "layers" | "codeLayers" | "elementLayers" | "boardElements"
 > & {
   labels: LayersPanelLabels;
 }) {
   const roots: LayersPanelNode[] = [
+    ...(boardElements ?? []),
     ...(files?.map(asFileNode) ?? []),
     ...(layers ?? []),
   ];
@@ -412,6 +419,65 @@ function collectAncestorIds(
   return Array.from(ancestors);
 }
 
+export function getLayerSelectionAnchorFromExternalSelection(args: {
+  selectedIds: readonly string[];
+  selectableVisibleIds: readonly string[];
+}): string | null {
+  const selectableVisibleIdSet = new Set(args.selectableVisibleIds);
+  return (
+    [...args.selectedIds]
+      .reverse()
+      .find((id) => selectableVisibleIdSet.has(id)) ?? null
+  );
+}
+
+export function getTreeOrderedLayerIds(
+  ids: readonly string[],
+  visibleRows: readonly FlatLayerRow[],
+): string[] {
+  const idSet = new Set(ids.filter((id) => id && !id.startsWith("__")));
+  const orderedIds = visibleRows
+    .map((row) => row.node.id)
+    .filter((id) => idSet.has(id));
+  const orderedIdSet = new Set(orderedIds);
+  return [
+    ...orderedIds,
+    ...ids.filter((id) => id && !id.startsWith("__") && !orderedIdSet.has(id)),
+  ];
+}
+
+export function getDraggedLayerIdsForRows(args: {
+  selectedIds: readonly string[];
+  nodeId: string;
+  visibleRows: readonly FlatLayerRow[];
+}): string[] {
+  const rawDraggedIds = args.selectedIds.includes(args.nodeId)
+    ? getTreeOrderedLayerIds(args.selectedIds, args.visibleRows)
+    : [args.nodeId];
+  const draggedIdSet = new Set(rawDraggedIds);
+  return rawDraggedIds.filter((id) => {
+    const rowForId = args.visibleRows.find((row) => row.node.id === id);
+    return !rowForId?.ancestorIds.some((ancestorId) =>
+      draggedIdSet.has(ancestorId),
+    );
+  });
+}
+
+export function shouldResyncLayerSelectionAnchor(args: {
+  selectionSignature: string;
+  lastPanelSelectionSignature: string;
+  currentAnchor: string | null;
+  selectableVisibleIds: readonly string[];
+}) {
+  const anchorStillVisible =
+    args.currentAnchor !== null &&
+    args.selectableVisibleIds.includes(args.currentAnchor);
+  return (
+    args.selectionSignature !== args.lastPanelSelectionSignature ||
+    !anchorStillVisible
+  );
+}
+
 function layerCanShowBadge(node: LayersPanelNode) {
   return (
     node.type === "file" ||
@@ -432,6 +498,7 @@ export function LayersPanel({
   expandedIds,
   searchQuery,
   className,
+  footer,
   labels: labelsProp,
   onSearchQueryChange,
   onScreenSelect,
@@ -446,11 +513,13 @@ export function LayersPanel({
   onLeaveLayer,
   onMoveLayer,
   canMoveLayer,
+  boardElements,
 }: LayersPanelProps) {
   const t = useT();
   const labels = useMemo(() => mergeLabels(labelsProp, t), [labelsProp, t]);
   const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
   const selectedIdsRef = useRef<readonly string[]>(selectedIds);
+  const lastPanelSelectionSignatureRef = useRef(selectedIds.join("\0"));
   const expandedIdSet = useMemo(() => new Set(expandedIds), [expandedIds]);
   const lastSelectionAnchorRef = useRef<string | null>(selectedIds[0] ?? null);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -469,9 +538,10 @@ export function LayersPanel({
         layers,
         codeLayers,
         elementLayers,
+        boardElements,
         labels,
       }),
-    [codeLayers, elementLayers, files, labels, layers],
+    [boardElements, codeLayers, elementLayers, files, labels, layers],
   );
 
   const visibleRows = useMemo(() => {
@@ -486,9 +556,35 @@ export function LayersPanel({
     [roots, selectedIdSet],
   );
 
+  const selectableVisibleIds = useMemo(
+    () =>
+      visibleRows
+        .map(({ node }) => node)
+        .filter((node) => node.selectable !== false)
+        .map((node) => node.id),
+    [visibleRows],
+  );
+
   useLayoutEffect(() => {
     selectedIdsRef.current = selectedIds;
-  }, [selectedIds]);
+    const signature = selectedIds.join("\0");
+    if (
+      !shouldResyncLayerSelectionAnchor({
+        selectionSignature: signature,
+        lastPanelSelectionSignature: lastPanelSelectionSignatureRef.current,
+        currentAnchor: lastSelectionAnchorRef.current,
+        selectableVisibleIds,
+      })
+    ) {
+      return;
+    }
+    lastPanelSelectionSignatureRef.current = signature;
+    lastSelectionAnchorRef.current =
+      getLayerSelectionAnchorFromExternalSelection({
+        selectedIds,
+        selectableVisibleIds,
+      });
+  }, [selectableVisibleIds, selectedIds]);
 
   useEffect(() => {
     if (selectedAncestorIds.length === 0) return;
@@ -522,15 +618,6 @@ export function LayersPanel({
     return () => window.cancelAnimationFrame(frame);
   }, [selectedScrollRowKey]);
 
-  const selectableVisibleIds = useMemo(
-    () =>
-      visibleRows
-        .map(({ node }) => node)
-        .filter((node) => node.selectable !== false)
-        .map((node) => node.id),
-    [visibleRows],
-  );
-
   const selectNode = useCallback(
     (
       id: string,
@@ -582,6 +669,7 @@ export function LayersPanel({
       if (!options.range) {
         lastSelectionAnchorRef.current = id;
       }
+      lastPanelSelectionSignatureRef.current = nextIds.join("\0");
       onSelectionChange(nextIds, { id, selectedIds: nextIds, ...options });
     },
     [onSelectionChange, selectableVisibleIds],
@@ -838,6 +926,7 @@ export function LayersPanel({
           </div>
         )}
       </div>
+      {footer ? <div className="shrink-0">{footer}</div> : null}
     </aside>
   );
 }
@@ -948,12 +1037,15 @@ function LayerRow({
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
-    const focusVisibleButton = (nextIndex: number) => {
+    const getFocusableButtons = () => {
       const tree = event.currentTarget.closest('[role="tree"]');
-      if (!tree) return false;
-      const buttons = Array.from(
+      if (!tree) return [];
+      return Array.from(
         tree.querySelectorAll<HTMLButtonElement>("[data-layer-row-button]"),
       ).filter((button) => !button.disabled);
+    };
+    const focusVisibleButton = (nextIndex: number) => {
+      const buttons = getFocusableButtons();
       const target =
         buttons[Math.max(0, Math.min(buttons.length - 1, nextIndex))];
       target?.focus();
@@ -971,6 +1063,8 @@ function LayerRow({
     const currentIndex = visibleRows.findIndex(
       (visibleRow) => visibleRow.rowKey === row.rowKey,
     );
+    const focusableButtons = getFocusableButtons();
+    const currentFocusableIndex = focusableButtons.indexOf(event.currentTarget);
 
     if (event.key === "Enter" || event.key === " " || event.key === "Space") {
       event.preventDefault();
@@ -990,12 +1084,12 @@ function LayerRow({
     }
     if (event.key === "ArrowDown") {
       event.preventDefault();
-      focusVisibleButton(currentIndex + 1);
+      focusVisibleButton(currentFocusableIndex + 1);
       return;
     }
     if (event.key === "ArrowUp") {
       event.preventDefault();
-      focusVisibleButton(currentIndex - 1);
+      focusVisibleButton(currentFocusableIndex - 1);
       return;
     }
     if (event.key === "Home") {
@@ -1005,7 +1099,7 @@ function LayerRow({
     }
     if (event.key === "End") {
       event.preventDefault();
-      focusVisibleButton(visibleRows.length - 1);
+      focusVisibleButton(focusableButtons.length - 1);
       return;
     }
     if (event.key === "ArrowRight" && hasChildren && !isExpanded) {
@@ -1015,9 +1109,13 @@ function LayerRow({
     }
     if (event.key === "ArrowRight" && hasChildren && isExpanded) {
       event.preventDefault();
-      const child = visibleRows[currentIndex + 1];
+      const nextButton = focusableButtons[currentFocusableIndex + 1];
+      const childId = nextButton?.dataset.layerNodeId;
+      const child = childId
+        ? visibleRows.find((visibleRow) => visibleRow.node.id === childId)
+        : null;
       if (child?.ancestorIds.includes(node.id)) {
-        focusVisibleButton(currentIndex + 1);
+        focusVisibleButton(currentFocusableIndex + 1);
       }
       return;
     }
@@ -1038,17 +1136,10 @@ function LayerRow({
       event.preventDefault();
       return;
     }
-    const rawDraggedIds = selectedIds.includes(node.id)
-      ? selectedIds.filter((id) => !id.startsWith("__"))
-      : [node.id];
-    // Remove any node whose ancestor is also being dragged to avoid double-moves.
-    // When a parent is moved, its children move with it automatically.
-    const draggedIdSet = new Set(rawDraggedIds);
-    const draggedIds = rawDraggedIds.filter((id) => {
-      const rowForId = visibleRows.find((r) => r.node.id === id);
-      return !rowForId?.ancestorIds.some((ancestorId) =>
-        draggedIdSet.has(ancestorId),
-      );
+    const draggedIds = getDraggedLayerIdsForRows({
+      selectedIds,
+      nodeId: node.id,
+      visibleRows,
     });
     event.dataTransfer.effectAllowed = "move";
     event.dataTransfer.setData("application/x-design-layer-id", node.id);
@@ -1477,6 +1568,7 @@ function LayerGlyph({
     case "component":
     case "instance":
       return <ComponentLayerGlyph className={cn(common, componentColor)} />;
+    case "board-element":
     case "shape":
     case "rectangle":
       return <RectangleLayerGlyph className={common} />;

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

@@ -0,0 +1,161 @@
+import { callAction } from "@agent-native/core/client";
+import { IconDeviceFloppy, IconFolderOpen } from "@tabler/icons-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/spinner";
+
+export interface LocalhostWriteConsentPayload {
+  /** The path being granted write access. */
+  rootPath: string;
+  /** File(s) about to be written (for display only). */
+  files: string[];
+  /** Pending callback to invoke after user grants consent. */
+  onGranted: (grant: {
+    grantId: string;
+    bridgeToken: string;
+    rootPath: string;
+    grantedUntil: string;
+  }) => void;
+  /** Called when the user cancels. */
+  onCancel: () => void;
+}
+
+interface LocalhostWriteConsentDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  designId: string;
+  connectionId: string;
+  payload: LocalhostWriteConsentPayload | null;
+}
+
+/**
+ * Modal dialog requesting explicit user consent before the agent writes local
+ * files. Shows the rootPath that will be granted write access and the specific
+ * file(s) about to be modified. The grant expires after 8 hours and is scoped
+ * to that folder only.
+ */
+export function LocalhostWriteConsentDialog({
+  open,
+  onOpenChange,
+  designId,
+  connectionId,
+  payload,
+}: LocalhostWriteConsentDialogProps) {
+  const [granting, setGranting] = useState(false);
+
+  async function handleAllowWrites() {
+    if (!payload || !designId || !connectionId) return;
+    setGranting(true);
+    try {
+      const result = await callAction<{
+        grantId: string;
+        bridgeToken: string;
+        rootPath: string;
+        grantedUntil: string;
+      }>("grant-localhost-write-consent", {
+        designId,
+        connectionId,
+      });
+      onOpenChange(false);
+      payload.onGranted(result);
+    } catch {
+      // Silently close; the caller's onCancel path already guards the write.
+      onOpenChange(false);
+      payload.onCancel();
+    } finally {
+      setGranting(false);
+    }
+  }
+
+  function handleCancel() {
+    payload?.onCancel();
+    onOpenChange(false);
+  }
+
+  if (!payload) return null;
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) handleCancel();
+        else onOpenChange(next);
+      }}
+    >
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <IconDeviceFloppy className="size-4" />
+            {"Allow file writes" /* i18n-ignore */}
+          </DialogTitle>
+          <DialogDescription>
+            {
+              "The agent wants to write source files on your machine. This access is scoped to the folder below and expires automatically after 8 hours." /* i18n-ignore */
+            }
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3 py-1 text-sm">
+          <div className="rounded-lg border bg-muted/50 px-3 py-2">
+            <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground mb-1">
+              <IconFolderOpen className="size-3.5 shrink-0" />
+              {"Root folder" /* i18n-ignore */}
+            </div>
+            <code className="break-all text-xs text-foreground">
+              {payload.rootPath}
+            </code>
+          </div>
+
+          {payload.files.length > 0 && (
+            <div className="space-y-1">
+              <p className="text-xs font-medium text-muted-foreground">
+                {"Files to be written:" /* i18n-ignore */}
+              </p>
+              <ul className="space-y-0.5 pl-1">
+                {payload.files.map((file) => (
+                  <li key={file} className="flex items-center gap-1.5 text-xs">
+                    <span className="size-1 rounded-full bg-muted-foreground/50 shrink-0" />
+                    <code className="break-all">{file}</code>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          <p className="text-xs text-muted-foreground">
+            {
+              "Only .html and .css files can be written. Paths outside the root folder are always blocked." /* i18n-ignore */
+            }
+          </p>
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="outline" onClick={handleCancel} disabled={granting}>
+            {"Cancel" /* i18n-ignore */}
+          </Button>
+          <Button onClick={() => void handleAllowWrites()} disabled={granting}>
+            {
+              granting ? (
+                <>
+                  <Spinner className="mr-2 size-3.5" />
+                  {"Granting…" /* i18n-ignore */}
+                </>
+              ) : (
+                "Allow writes"
+              ) /* i18n-ignore */
+            }
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}