@agent-native/core 0.80.11 → 0.81.1

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,6 +170,9 @@ 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[];
 }
 
 export interface FlatLayerRow {
@@ -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 ?? []),
   ];
@@ -491,6 +498,7 @@ export function LayersPanel({
   expandedIds,
   searchQuery,
   className,
+  footer,
   labels: labelsProp,
   onSearchQueryChange,
   onScreenSelect,
@@ -505,6 +513,7 @@ export function LayersPanel({
   onLeaveLayer,
   onMoveLayer,
   canMoveLayer,
+  boardElements,
 }: LayersPanelProps) {
   const t = useT();
   const labels = useMemo(() => mergeLabels(labelsProp, t), [labelsProp, t]);
@@ -529,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(() => {
@@ -916,6 +926,7 @@ export function LayersPanel({
           </div>
         )}
       </div>
+      {footer ? <div className="shrink-0">{footer}</div> : null}
     </aside>
   );
 }
@@ -1557,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>
+  );
+}