f1shyfang · f1shyfang · May 30, 2026 · May 30, 2026
diff --git a/app/components/ImageUpload.tsx b/app/components/ImageUpload.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
+import Image from 'next/image'
 
 export interface UploadedImage {
   id: string
@@ -117,10 +118,12 @@ export function ImageUpload({
               key={img.id}
               className="relative group w-20 h-20 rounded-lg overflow-hidden border border-white/10"
             >
-              <img
+              <Image
                 src={img.preview}
                 alt="Upload preview"
-                className="w-full h-full object-cover"
+                fill
+                unoptimized
+                className="object-cover"
               />
               <button
                 type="button"

diff --git a/app/examples/ai-personas/page.tsx b/app/examples/ai-personas/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
 import type { AiPersona } from '@/lib/db/schema'
 
@@ -104,10 +104,6 @@ export default function AIPersonasPage() {
     fetchPersonas()
   }, [])
 
-  useEffect(() => {
-    applyFilter()
-  }, [personas, searchQuery, selectedTags])
-
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (filterWrapRef.current && !filterWrapRef.current.contains(event.target as Node)) {
@@ -136,7 +132,7 @@ export default function AIPersonasPage() {
     }
   }
 
-  const applyFilter = () => {
+  const applyFilter = useCallback(() => {
     let base = personas
 
     if (searchQuery.trim()) {
@@ -160,7 +156,11 @@ export default function AIPersonasPage() {
     }
 
     setFiltered(base)
-  }
+  }, [personas, searchQuery, selectedTags])
+
+  useEffect(() => {
+    applyFilter()
+  }, [applyFilter])
 
   const getAllTags = (): string[] => {
     const set = new Set<string>()

diff --git a/app/examples/simulation/page.tsx b/app/examples/simulation/page.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import type { AiPersona } from '@/lib/db/schema'
 
@@ -441,7 +442,7 @@ export default function SimulationPage() {
                     <div className="thumbs">
                       {imagePreviews.map((url, i) => (
                         <div key={i} className="thumb">
-                          <img alt="" src={url} />
+                          <Image alt="" src={url} fill unoptimized />
                           <div className="x" onClick={() => handleRemoveImage(i)} title="Remove">
                             ×
                           </div>

diff --git a/app/examples/simulation/results/[id]/page.tsx b/app/examples/simulation/results/[id]/page.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
+import Image from 'next/image'
 import { useParams, useRouter } from 'next/navigation'
 import type { Draft, CouncilFeedback as CouncilFeedbackRow } from '@/lib/db/schema'
 
@@ -22,11 +23,7 @@ export default function SimulationResultsPage() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  useEffect(() => {
-    fetchData()
-  }, [draftId])
-
-  const fetchData = async () => {
+  const fetchData = useCallback(async () => {
     try {
       setLoading(true)
       setError(null)
@@ -44,7 +41,11 @@ export default function SimulationResultsPage() {
     } finally {
       setLoading(false)
     }
-  }
+  }, [draftId])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
 
   if (loading) {
     return (
@@ -360,10 +361,13 @@ export default function SimulationResultsPage() {
                   {draft.imageUrls && draft.imageUrls.length > 0 && (
                     <div className="images">
                       {draft.imageUrls.map((url, index) => (
-                        <img
+                        <Image
                           key={index}
                           src={url}
                           alt={`Content image ${index + 1}`}
+                          width={120}
+                          height={120}
+                          unoptimized
                           className="image"
                         />
                       ))}

diff --git a/app/manufacturing/ab-tests/[id]/page.tsx b/app/manufacturing/ab-tests/[id]/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useParams } from 'next/navigation'
 import Link from 'next/link'
 import type { ABTest as ABTestRow, ABTestVariant, ABTestEvaluation } from '@/lib/db/schema'
@@ -37,11 +37,7 @@ export default function ABTestDetailPage() {
   const [error, setError] = useState<string | null>(null)
   const [running, setRunning] = useState(false)
 
-  useEffect(() => {
-    fetchABTest()
-  }, [abTestId])
-
-  const fetchABTest = async () => {
+  const fetchABTest = useCallback(async () => {
     try {
       setLoading(true)
       setError(null)
@@ -60,7 +56,11 @@ export default function ABTestDetailPage() {
     } finally {
       setLoading(false)
     }
-  }
+  }, [abTestId])
+
+  useEffect(() => {
+    fetchABTest()
+  }, [fetchABTest])
 
   const handleRunTest = async () => {
     try {

diff --git a/app/manufacturing/drafts/[id]/page.tsx b/app/manufacturing/drafts/[id]/page.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import Link from 'next/link'
+import Image from 'next/image'
 import type { Draft, CouncilFeedback as CouncilFeedbackRow } from '@/lib/db/schema'
 
 type CouncilFeedback = CouncilFeedbackRow & {
@@ -38,11 +39,7 @@ export default function DraftDetailPage() {
   const [imagePreviews, setImagePreviews] = useState<string[]>([])
   const [deletingImages, setDeletingImages] = useState<string[]>([])
 
-  useEffect(() => {
-    fetchDraft()
-  }, [draftId])
-
-  const fetchDraft = async () => {
+  const fetchDraft = useCallback(async () => {
     try {
       setLoading(true)
       setError(null)
@@ -60,7 +57,11 @@ export default function DraftDetailPage() {
     } finally {
       setLoading(false)
     }
-  }
+  }, [draftId])
+
+  useEffect(() => {
+    fetchDraft()
+  }, [fetchDraft])
 
   const handleProcess = async () => {
     try {
@@ -241,11 +242,13 @@ export default function DraftDetailPage() {
                 {draft.imageUrls
                   .filter(url => !deletingImages.includes(url))
                   .map((url, index) => (
-                    <div key={index} className="relative group">
-                      <img
+                    <div key={index} className="relative group h-48">
+                      <Image
                         src={url}
                         alt={`Draft image ${index + 1}`}
-                        className="w-full h-48 object-cover rounded-lg border border-gray-300 dark:border-gray-600"
+                        fill
+                        unoptimized
+                        className="object-cover rounded-lg border border-gray-300 dark:border-gray-600"
                       />
                       {editingImages && (
                         <button
@@ -287,11 +290,13 @@ export default function DraftDetailPage() {
               {imagePreviews.length > 0 && (
                 <div className="mt-2 grid grid-cols-4 gap-2">
                   {imagePreviews.map((preview, idx) => (
-                    <div key={idx} className="relative">
-                      <img
+                    <div key={idx} className="relative h-24">
+                      <Image
                         src={preview}
                         alt={`Preview ${idx + 1}`}
-                        className="w-full h-24 object-cover rounded border"
+                        fill
+                        unoptimized
+                        className="object-cover rounded border"
                       />
                     </div>
                   ))}
@@ -499,9 +504,12 @@ export default function DraftDetailPage() {
                         <div className="mt-2 flex gap-2 flex-wrap">
                           {shipFormData.variantImagePreviews[index].map((preview, imgIdx) => (
                             <div key={imgIdx} className="relative">
-                              <img
+                              <Image
                                 src={preview}
                                 alt={`Preview ${imgIdx + 1}`}
+                                width={80}
+                                height={80}
+                                unoptimized
                                 className="w-20 h-20 object-cover rounded border"
                               />
                             </div>

diff --git a/app/manufacturing/page.tsx b/app/manufacturing/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import Link from 'next/link'
+import Image from 'next/image'
 import type { Draft } from '@/lib/db/schema'
 
 export default function ManufacturingPage() {
@@ -194,11 +195,13 @@ export default function ManufacturingPage() {
                 </label>
                 <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                   {imagePreviews.map((preview, index) => (
-                    <div key={index} className="relative group">
-                      <img
+                    <div key={index} className="relative group h-32">
+                      <Image
                         src={preview}
                         alt={`Preview ${index + 1}`}
-                        className="w-full h-32 object-cover rounded-lg border border-gray-300 dark:border-gray-600"
+                        fill
+                        unoptimized
+                        className="object-cover rounded-lg border border-gray-300 dark:border-gray-600"
                       />
                       <button
                         type="button"
@@ -267,10 +270,13 @@ export default function ManufacturingPage() {
                         {draft.imageUrls && draft.imageUrls.length > 0 && (
                           <div className="mt-2 flex gap-2">
                             {draft.imageUrls.slice(0, 3).map((url, idx) => (
-                              <img
+                              <Image
                                 key={idx}
                                 src={url}
                                 alt={`Draft image ${idx + 1}`}
+                                width={64}
+                                height={64}
+                                unoptimized
                                 className="w-16 h-16 object-cover rounded border border-gray-300 dark:border-gray-600"
                               />
                             ))}