[dyad] Added image file size analysis - wrote 3 file(s)

src/components/image-alt-display.tsx

@@ -6,6 +6,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import { ImageOff } from "lucide-react";
+import { formatBytes } from "@/lib/utils";
 
 interface ImageAltDisplayProps {
   images: ImageAltData[];
@@ -25,6 +26,13 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
     setImageErrors((prev) => ({ ...prev, [src]: true }));
   };
 
+  const getSizeBadgeVariant = (size: number | null) => {
+    if (size === null) return "outline";
+    if (size > 500000) return "destructive"; // > 500KB
+    if (size > 100000) return "secondary"; // > 100KB
+    return "outline";
+  };
+
   return (
     <div className="space-y-4">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-muted/50 rounded-lg">
@@ -67,10 +75,20 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
                 />
               )}
             </div>
-            <div className="flex-grow">
-              <p className="text-sm text-muted-foreground break-all">
-                {image.src}
-              </p>
+            <div className="flex-grow min-w-0">
+              <div className="flex justify-between items-start gap-2">
+                <p className="text-sm text-muted-foreground break-all flex-grow">
+                  {image.src}
+                </p>
+                {image.size !== null && (
+                  <Badge
+                    variant={getSizeBadgeVariant(image.size)}
+                    className="flex-shrink-0"
+                  >
+                    {formatBytes(image.size)}
+                  </Badge>
+                )}
+              </div>
               <div className="mt-2">
                 {image.alt ? (
                   <p className="text-sm text-foreground bg-muted/50 p-2 rounded-md">