Address PR review comments

- Fix data-loss bug: sendStyleModification now preserves imageSrc and imageUpload in pending changes
- Extract duplicated image src extraction logic into extractStaticSrc helper
- Add image load error feedback: preview iframe now shows toast when image fails to load

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: azizmejri1

src/components/preview_panel/PreviewIframe.tsx

@@ -548,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);

src/components/preview_panel/VisualEditingToolbar.tsx

@@ -173,6 +173,8 @@ export function VisualEditingToolbar({
         lineNumber: selectedComponent.lineNumber,
         styles: newStyles,
         textContent: existing?.textContent || "",
+        imageSrc: existing?.imageSrc,
+        imageUpload: existing?.imageUpload,
       });
       return updated;
     });

src/pro/main/utils/visual_editing_utils.ts

@@ -16,6 +16,27 @@ interface ComponentAnalysis {
   imageSrc?: string;
 }
 
+/**
+ * Extracts the static src value from a JSX opening element's attributes.
+ * Handles both StringLiteral and JSXExpressionContainer wrapping a StringLiteral.
+ */
+function extractStaticSrc(openingElement: any): string | undefined {
+  const srcAttr = openingElement.attributes.find(
+    (attr: any) => attr.type === "JSXAttribute" && attr.name?.name === "src",
+  );
+  if (!srcAttr?.value) return undefined;
+  if (srcAttr.value.type === "StringLiteral") {
+    return srcAttr.value.value;
+  }
+  if (
+    srcAttr.value.type === "JSXExpressionContainer" &&
+    srcAttr.value.expression.type === "StringLiteral"
+  ) {
+    return srcAttr.value.expression.value;
+  }
+  return undefined;
+}
+
 /**
  * Pure function that transforms JSX/TSX content by applying style and text changes
  * @param content - The source code content to transform
@@ -418,19 +439,7 @@ export function analyzeComponent(
   // Check if the element itself is an <img>
   if (tagName.type === "JSXIdentifier" && tagName.name === "img") {
     hasImage = true;
-    const srcAttr = foundElement.openingElement.attributes.find(
-      (attr: any) => attr.type === "JSXAttribute" && attr.name?.name === "src",
-    );
-    if (srcAttr?.value) {
-      if (srcAttr.value.type === "StringLiteral") {
-        imageSrc = srcAttr.value.value;
-      } else if (
-        srcAttr.value.type === "JSXExpressionContainer" &&
-        srcAttr.value.expression.type === "StringLiteral"
-      ) {
-        imageSrc = srcAttr.value.expression.value;
-      }
-    }
+    imageSrc = extractStaticSrc(foundElement.openingElement);
   }
 
   // Recursively check descendants for <img> elements
@@ -444,20 +453,7 @@ export function analyzeComponent(
         node.openingElement.name.name === "img"
       ) {
         hasImage = true;
-        const srcAttr = node.openingElement.attributes.find(
-          (attr: any) =>
-            attr.type === "JSXAttribute" && attr.name?.name === "src",
-        );
-        if (srcAttr?.value) {
-          if (srcAttr.value.type === "StringLiteral") {
-            imageSrc = srcAttr.value.value;
-          } else if (
-            srcAttr.value.type === "JSXExpressionContainer" &&
-            srcAttr.value.expression.type === "StringLiteral"
-          ) {
-            imageSrc = srcAttr.value.expression.value;
-          }
-        }
+        imageSrc = extractStaticSrc(node.openingElement);
         return;
       }
 

worker/dyad-visual-editor-client.js

@@ -275,7 +275,21 @@
       };
 
       imgEl.addEventListener("load", sendCoordinates, { once: true });
-      imgEl.addEventListener("error", sendCoordinates, { once: true });
+      imgEl.addEventListener(
+        "error",
+        () => {
+          sendCoordinates();
+          window.parent.postMessage(
+            {
+              type: "dyad-image-load-error",
+              elementId,
+              src,
+            },
+            "*",
+          );
+        },
+        { once: true },
+      );
       imgEl.src = src;
     }
   }