Add image selection and swapping in the visual editor

e2e-tests/fixtures/engine/image-basic.md

@@ -0,0 +1,24 @@
+OK, I'm going to write an app with an image now...
+
+<dyad-write path="src/pages/Index.tsx" description="write-description">
+import { MadeWithDyad } from "@/components/made-with-dyad";
+
+const Index = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
+        <img src="/placeholder.svg" alt="Hero image" className="mx-auto mb-4 w-64 h-64" />
+        <p className="text-xl text-gray-600">
+          Start building your amazing project here!
+        </p>
+      </div>
+      <MadeWithDyad />
+    </div>
+  );
+};
+
+export default Index;
+</dyad-write>
+
+And it's done!

e2e-tests/snapshots/visual_editing.spec.ts_visual-editing-swap-image.txt

@@ -0,0 +1,21 @@
+=== src/pages/Index.tsx ===
+import { MadeWithDyad } from "@/components/made-with-dyad";
+
+const Index = () => {
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-100">
+            <div className="text-center">
+                <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
+                <img
+                    src="https://example.com/new-hero.png"
+                    alt="Hero image"
+                    className="mx-auto mb-4 w-64 h-64" />
+                <p className="text-xl text-gray-600">Start building your amazing project here!
+                            </p>
+            </div>
+            <MadeWithDyad />
+        </div>
+    );
+};
+
+export default Index;

e2e-tests/visual_editing.spec.ts

@@ -140,6 +140,80 @@ testSkipIfWindows("edit text of the selected component", async ({ po }) => {
   });
 });
 
+testSkipIfWindows("swap image via URL", async ({ po }) => {
+  await po.setUpDyadPro();
+  await po.sendPrompt("tc=image-basic");
+  await po.approveProposal();
+
+  // Wait for the app to rebuild with the new code
+  await po.previewPanel.clickPreviewPickElement();
+
+  // Wait for the image element to appear in the iframe after rebuild
+  const heroImage = po.previewPanel
+    .getPreviewIframeElement()
+    .contentFrame()
+    .getByRole("img", { name: "Hero image" });
+  await expect(heroImage).toBeVisible({ timeout: Timeout.LONG });
+
+  // Select the image element in the preview
+  await heroImage.click();
+
+  // Wait for the toolbar to appear (check for the Margin button which is always visible)
+  const marginButton = po.page.getByRole("button", { name: "Margin" });
+  await expect(marginButton).toBeVisible({
+    timeout: Timeout.MEDIUM,
+  });
+
+  // Ensure the toolbar has proper coordinates before clicking
+  await expect(async () => {
+    const box = await marginButton.boundingBox();
+    expect(box).not.toBeNull();
+    expect(box!.y).toBeGreaterThan(0);
+  }).toPass({ timeout: Timeout.MEDIUM });
+
+  // Click the Swap Image button to open the image popover
+  const swapImageButton = po.page.getByRole("button", { name: "Swap Image" });
+  await expect(swapImageButton).toBeVisible({ timeout: Timeout.LONG });
+  await swapImageButton.click();
+
+  // Wait for the Image Source popover to appear
+  const imagePopover = po.page
+    .locator('[role="dialog"]')
+    .filter({ hasText: "Image Source" });
+  await expect(imagePopover).toBeVisible({
+    timeout: Timeout.LONG,
+  });
+
+  // Enter a new image URL
+  const urlInput = po.page.getByLabel("Image URL");
+  await urlInput.fill("https://example.com/new-hero.png");
+
+  // Click Apply to submit the new URL
+  await po.page.getByRole("button", { name: "Apply" }).click();
+
+  // Close the popover
+  await po.page.keyboard.press("Escape");
+
+  // Verify the visual changes dialog appears
+  await expect(po.page.getByText(/\d+ component[s]? modified/)).toBeVisible({
+    timeout: Timeout.MEDIUM,
+  });
+
+  // Save the changes
+  await po.page.getByRole("button", { name: "Save Changes" }).click();
+
+  // Wait for the success toast
+  await po.toastNotifications.waitForToastWithText(
+    "Visual changes saved to source files",
+  );
+
+  // Verify that the changes are applied to the codebase
+  await po.snapshotAppFiles({
+    name: "visual-editing-swap-image",
+    files: ["src/pages/Index.tsx"],
+  });
+});
+
 testSkipIfWindows("discard changes", async ({ po }) => {
   await po.setUpDyadPro();
   await po.sendPrompt("tc=basic");

src/components/preview_panel/ImageSwapPopover.tsx

@@ -0,0 +1,207 @@
+import { useState, useRef, useEffect } from "react";
+import { ImageIcon, Upload, Link, Check } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { StylePopover } from "./StylePopover";
+import { VALID_IMAGE_MIME_TYPES } from "@/ipc/types/visual-editing";
+
+export interface ImageUploadData {
+  fileName: string;
+  base64Data: string;
+  mimeType: string;
+}
+
+interface ImageSwapPopoverProps {
+  currentSrc: string;
+  onSwap: (newSrc: string, uploadData?: ImageUploadData) => void;
+}
+
+export function ImageSwapPopover({
+  currentSrc,
+  onSwap,
+}: ImageSwapPopoverProps) {
+  const [mode, setMode] = useState<"url" | "upload">("url");
+  const [urlValue, setUrlValue] = useState(currentSrc);
+  const [selectedFileName, setSelectedFileName] = useState<string | null>(null);
+  const [fileError, setFileError] = useState<string | null>(null);
+  const [urlError, setUrlError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Sync urlValue when a different component is selected
+  useEffect(() => {
+    setUrlValue(currentSrc);
+    setSelectedFileName(null);
+    setFileError(null);
+    setUrlError(null);
+  }, [currentSrc]);
+
+  const handleUrlSubmit = () => {
+    const trimmed = urlValue.trim();
+    if (!trimmed) {
+      setUrlError("Please enter a URL.");
+      return;
+    }
+    // Accept absolute URLs (http/https/protocol-relative) and root-relative paths
+    if (
+      !/^https?:\/\//i.test(trimmed) &&
+      !trimmed.startsWith("//") &&
+      !trimmed.startsWith("/")
+    ) {
+      setUrlError(
+        "Please enter a valid URL (https://...) or an absolute path (/...).",
+      );
+      return;
+    }
+    setUrlError(null);
+    onSwap(trimmed);
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!(VALID_IMAGE_MIME_TYPES as readonly string[]).includes(file.type)) {
+      setFileError("Unsupported file type. Please use JPG, PNG, GIF, or WebP.");
+      return;
+    }
+    if (file.size > 7.5 * 1024 * 1024) {
+      setFileError(
+        "Image is too large (max 7.5 MB). Please choose a smaller file.",
+      );
+      return;
+    }
+    setFileError(null);
+
+    setSelectedFileName(file.name);
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64DataUrl = reader.result as string;
+
+      // The backend will generate the final unique filename.
+      // We just need a placeholder path for the pending change.
+      const sanitizedName = file.name.replace(/[^a-zA-Z0-9._-]/g, "_");
+      const newSrc = `/images/${sanitizedName}`;
+
+      onSwap(newSrc, {
+        fileName: file.name,
+        base64Data: base64DataUrl,
+        mimeType: file.type,
+      });
+    };
+    reader.onerror = () => {
+      setFileError(
+        "Failed to read the file. Please try again or choose a different file.",
+      );
+      setSelectedFileName(null);
+    };
+    reader.readAsDataURL(file);
+
+    // Clear input so same file can be selected again
+    e.target.value = "";
+  };
+
+  return (
+    <StylePopover
+      icon={<ImageIcon size={16} />}
+      title="Image Source"
+      tooltip="Swap Image"
+    >
+      <div className="space-y-3">
+        {/* Mode toggle tabs */}
+        <Tabs
+          value={mode}
+          onValueChange={(val) => setMode(val as "url" | "upload")}
+        >
+          <TabsList className="w-full h-8">
+            <TabsTrigger value="url" className="flex-1 gap-1 text-xs">
+              <Link size={12} />
+              URL
+            </TabsTrigger>
+            <TabsTrigger value="upload" className="flex-1 gap-1 text-xs">
+              <Upload size={12} />
+              Upload
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+
+        {mode === "url" ? (
+          <div className="space-y-2">
+            <Label htmlFor="image-url" className="text-xs">
+              Image URL
+            </Label>
+            <Input
+              id="image-url"
+              type="text"
+              placeholder="https://example.com/image.png"
+              className="h-8 text-xs"
+              value={urlValue}
+              aria-invalid={!!urlError}
+              aria-describedby={urlError ? "image-url-error" : undefined}
+              onChange={(e) => {
+                setUrlValue(e.target.value);
+                setUrlError(null);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleUrlSubmit();
+              }}
+            />
+            {urlError && (
+              <p
+                id="image-url-error"
+                role="alert"
+                className="text-xs text-red-500"
+              >
+                {urlError}
+              </p>
+            )}
+            <Button size="sm" onClick={handleUrlSubmit} className="w-full">
+              <Check size={14} className="mr-1" />
+              Apply
+            </Button>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <Label className="text-xs">Upload Image</Label>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/jpeg,image/png,image/gif,image/webp"
+              className="hidden"
+              onChange={handleFileSelect}
+            />
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => fileInputRef.current?.click()}
+              className="w-full"
+            >
+              <Upload size={14} className="mr-1 shrink-0" />
+              <span className="truncate">
+                {selectedFileName || "Choose File"}
+              </span>
+            </Button>
+            {fileError && (
+              <p role="alert" className="text-xs text-red-500">
+                {fileError}
+              </p>
+            )}
+            <p className="text-xs text-gray-500">
+              Supports: JPG, PNG, GIF, WebP
+            </p>
+          </div>
+        )}
+
+        {/* Current source display */}
+        <div className="pt-2 border-t">
+          <Label className="text-xs text-gray-500">Current source</Label>
+          <p className="text-xs font-mono truncate mt-1" title={currentSrc}>
+            {currentSrc || "none"}
+          </p>
+        </div>
+      </div>
+    </StylePopover>
+  );
+}

src/components/preview_panel/PreviewIframe.tsx

@@ -238,6 +238,8 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
   // AST Analysis State
   const [isDynamicComponent, setIsDynamicComponent] = useState(false);
   const [hasStaticText, setHasStaticText] = useState(false);
+  const [hasImage, setHasImage] = useState(false);
+  const [currentImageSrc, setCurrentImageSrc] = useState("");
 
   // Device mode state
   const deviceMode: DeviceMode = settings?.previewDeviceMode ?? "desktop";
@@ -262,6 +264,8 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
       });
       setIsDynamicComponent(result.isDynamic);
       setHasStaticText(result.hasStaticText);
+      setHasImage(result.hasImage);
+      setCurrentImageSrc(result.imageSrc || "");
 
       // Automatically enable text editing if component has static text
       if (result.hasStaticText && iframeRef.current?.contentWindow) {
@@ -280,6 +284,8 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
       console.error("Failed to analyze component", err);
       setIsDynamicComponent(false);
       setHasStaticText(false);
+      setHasImage(false);
+      setCurrentImageSrc("");
     }
   };
 
@@ -542,6 +548,11 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
         return;
       }
 
+      if (event.data?.type === "dyad-image-load-error") {
+        showError("Image failed to load. Please check the URL and try again.");
+        return;
+      }
+
       if (event.data?.type === "dyad-component-coordinates-updated") {
         if (event.data.coordinates) {
           setCurrentComponentCoordinates(event.data.coordinates);
@@ -1368,6 +1379,8 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
                       iframeRef={iframeRef}
                       isDynamic={isDynamicComponent}
                       hasStaticText={hasStaticText}
+                      hasImage={hasImage}
+                      currentImageSrc={currentImageSrc}
                     />
                   )}
               </>