wip

app/editor/[storySlug]/page.tsx

@@ -1,191 +1,155 @@
-"use client"
+"use client";
 
-import { useState, useEffect } from "react"
+import { useState, useEffect } from "react";
-import { useParams } from "next/navigation"
+import { useParams } from "next/navigation";
-import { useToast } from "@/hooks/use-toast"
+import { useToast } from "@/hooks/use-toast";
-import { EditorToolbar } from "@/components/editor/editor-toolbar"
+import { EditorToolbar } from "@/components/editor/editor-toolbar";
-import { PageSidebar } from "@/components/editor/page-sidebar"
+import { PageSidebar } from "@/components/editor/page-sidebar";
-import { ComicCanvas } from "@/components/editor/comic-canvas"
+import { ComicCanvas } from "@/components/editor/comic-canvas";
-import { ApiKeyModal } from "@/components/api-key-modal"
+import { ApiKeyModal } from "@/components/api-key-modal";
-import { PageInfoSheet } from "@/components/editor/page-info-sheet"
+import { PageInfoSheet } from "@/components/editor/page-info-sheet";
-import { GeneratePageModal } from "@/components/editor/generate-page-modal"
+import { GeneratePageModal } from "@/components/editor/generate-page-modal";
-
-import { useS3Upload } from "next-s3-upload"
 
 interface PageData {
-  id: number // pageNumber for component compatibility
+  id: number; // pageNumber for component compatibility
-  title: string
+  title: string;
-  image: string
+  image: string;
-  prompt: string
+  prompt: string;
-  characterUploads?: string[]
+  characterUploads?: string[];
-  style: string
+  style: string;
-  dbId?: string // actual database UUID
+  dbId?: string; // actual database UUID
 }
 
 interface StoryData {
-  id: string
+  id: string;
-  title: string
+  title: string;
-  description?: string | null
+  description?: string | null;
-  userId?: string | null
+  userId?: string | null;
 }
 
 export default function StoryEditorPage() {
-  const params = useParams()
+  const params = useParams();
-  const slug = params.storySlug as string
+  const slug = params.storySlug as string;
 
-  const [story, setStory] = useState<StoryData | null>(null)
+  const [story, setStory] = useState<StoryData | null>(null);
-  const [pages, setPages] = useState<PageData[]>([])
+  const [pages, setPages] = useState<PageData[]>([]);
-  const [currentPage, setCurrentPage] = useState(0)
+  const [currentPage, setCurrentPage] = useState(0);
-  const [showApiModal, setShowApiModal] = useState(false)
+  const [showApiModal, setShowApiModal] = useState(false);
-  const [showInfoSheet, setShowInfoSheet] = useState(false)
+  const [showInfoSheet, setShowInfoSheet] = useState(false);
-  const [showGenerateModal, setShowGenerateModal] = useState(false)
+  const [showGenerateModal, setShowGenerateModal] = useState(false);
-  const [loadingPageId, setLoadingPageId] = useState<number | null>(null)
+  const [loadingPageId, setLoadingPageId] = useState<number | null>(null);
-  const [isLoading, setIsLoading] = useState(true)
+  const [isLoading, setIsLoading] = useState(true);
-  const [existingCharacterImages, setExistingCharacterImages] = useState<string[]>([])
+  const [existingCharacterImages, setExistingCharacterImages] = useState<
-  const { uploadToS3 } = useS3Upload()
+    string[]
-  const { toast } = useToast()
+  >([]);
+  const { toast } = useToast();
 
   // Load story and pages from API
   useEffect(() => {
     const loadStoryData = async () => {
       try {
-        const response = await fetch(`/api/stories/${slug}`)
+        const response = await fetch(`/api/stories/${slug}`);
         if (!response.ok) {
-          throw new Error("Story not found")
+          throw new Error("Story not found");
         }
 
-        const result = await response.json()
+        const result = await response.json();
-        const { story: storyData, pages: pagesData } = result
+        const { story: storyData, pages: pagesData } = result;
 
-        setStory(storyData)
+        setStory(storyData);
-        setPages(pagesData.map((page: any) => ({
+        setPages(
-          id: page.pageNumber,
+          pagesData.map((page: any) => ({
-          title: storyData.title,
+            id: page.pageNumber,
-          image: page.generatedImageUrl || "",
+            title: storyData.title,
-          prompt: page.prompt,
+            image: page.generatedImageUrl || "",
-          characterUploads: page.characterImageUrls,
+            prompt: page.prompt,
-          style: storyData.style || "noir",
+            characterUploads: page.characterImageUrls,
-          dbId: page.id,
+            style: storyData.style || "noir",
-        })))
+            dbId: page.id,
+          }))
+        );
 
         // Load existing character images for reuse
-        const uniqueImages = [...new Set(pagesData.flatMap((page: any) => page.characterImageUrls || []))]
+        const uniqueImages = [
-        setExistingCharacterImages(uniqueImages as string[])
+          ...new Set(
-
+            pagesData.flatMap((page: any) => page.characterImageUrls || [])
+          ),
+        ];
+        setExistingCharacterImages(uniqueImages as string[]);
       } catch (error) {
-        console.error("Error loading story:", error)
+        console.error("Error loading story:", error);
         toast({
           title: "Error loading story",
           description: "Failed to load story data.",
           variant: "destructive",
           duration: 4000,
-        })
+        });
       } finally {
-        setIsLoading(false)
+        setIsLoading(false);
       }
-    }
+    };
 
     if (slug) {
-      loadStoryData()
+      loadStoryData();
     }
-  }, [slug, toast])
+  }, [slug, toast]);
 
   // Keyboard navigation
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "ArrowRight") {
-        setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev))
+        setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev));
       } else if (e.key === "ArrowLeft") {
-        setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev))
+        setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev));
       }
-    }
+    };
 
-    window.addEventListener("keydown", handleKeyDown)
+    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [pages.length])
+  }, [pages.length]);
 
   const handleAddPage = () => {
-    const storedKey = localStorage.getItem("together_api_key")
+    const storedKey = localStorage.getItem("together_api_key");
     if (!storedKey && pages.length >= 1) {
-      setShowApiModal(true)
+      setShowApiModal(true);
-      return
+      return;
     }
-    setShowGenerateModal(true)
+    setShowGenerateModal(true);
-  }
+  };
-
-  const handleContinueStory = () => {
-    const storedKey = localStorage.getItem("together_api_key")
-    if (!storedKey) {
-      setShowApiModal(true)
-      return
-    }
-    setShowGenerateModal(true)
-  }
 
   const handleApiKeyClick = () => {
-    setShowApiModal(true)
+    setShowApiModal(true);
-  }
+  };
 
   const handleApiKeySubmit = (key: string) => {
-    localStorage.setItem("together_api_key", key)
+    localStorage.setItem("together_api_key", key);
-    setShowApiModal(false)
+    setShowApiModal(false);
-    const wasGenerating = showGenerateModal
+    const wasGenerating = showGenerateModal;
     if (wasGenerating) {
-      setShowGenerateModal(true)
+      setShowGenerateModal(true);
     }
 
     toast({
       title: "API key saved",
       description: "Your Together API key has been saved successfully",
       duration: 3000,
-    })
+    });
-  }
+  };
 
   const handleGeneratePage = async (data: {
-    prompt: string
+    prompt: string;
-    style: string
+    style: string;
-    characterFiles?: File[]
+    characterFiles?: File[];
-    characterUrls?: string[] // For reusing existing characters
+    characterUrls?: string[];
-    isContinuation?: boolean
+    isContinuation?: boolean;
   }) => {
-    if (!story) return
-
-    setShowGenerateModal(false)
-
     try {
-      // Handle new character uploads
+      const apiKey = localStorage.getItem("together_api_key");
-      let characterUploads: string[] = data.characterUrls || []
-
-      if (data.characterFiles && data.characterFiles.length > 0) {
-        const newUploads = await Promise.all(
-          data.characterFiles.map((file) => uploadToS3(file).then(({ url }) => url))
-        )
-        characterUploads = [...characterUploads, ...newUploads]
-      }
-
-      // Add loading page to UI
-      const nextPageNumber = pages.length + 1
-      const pageData: PageData = {
-        id: nextPageNumber,
-        title: story.title,
-        image: "",
-        prompt: data.prompt,
-        characterUploads,
-        style: data.style,
-      }
-
-      setPages([...pages, pageData])
-      setCurrentPage(pages.length)
-      setLoadingPageId(nextPageNumber)
-
-      // Generate the comic image
-      const apiKey = localStorage.getItem("together_api_key")
       if (!apiKey) {
-        throw new Error("API key not found")
+        setShowApiModal(true);
+        return;
       }
 
-      const previousPage = pages[pages.length - 1]
-
       const response = await fetch("/api/generate-comic", {
         method: "POST",
         headers: {
@@ -196,66 +160,48 @@ export default function StoryEditorPage() {
           prompt: data.prompt,
           apiKey,
           style: data.style,
-          characterImages: characterUploads,
+          characterImages: data.characterUrls || [],
-          isContinuation: data.isContinuation,
-          previousContext: data.isContinuation ? previousPage?.prompt : undefined,
         }),
-      })
+      });
 
       if (!response.ok) {
-        const errorData = await response.json()
+        const errorData = await response.json();
-        throw new Error(errorData.error || "Failed to generate image")
+        throw new Error(errorData.error || "Failed to generate image");
       }
 
-      const result = await response.json()
+      const result = await response.json();
 
-      // Update page with generated image
+      setPages((prevPages) => [
-      setPages((prevPages) =>
+        ...prevPages,
-        prevPages.map((page) =>
+        {
-          page.id === nextPageNumber
+          id: pages.length + 1,
-            ? {
+          title: story?.title || "",
-                ...page,
+          image: result.imageUrl,
-                image: result.imageUrl,
+          prompt: data.prompt,
-                dbId: result.pageId,
+          characterUploads: data.characterUrls || [],
-              }
+          style: data.style,
-            : page,
+        },
-        ),
+      ]);
-      )
+      setCurrentPage(pages.length);
-
+      setShowGenerateModal(false);
-      // Update existing character images for future reuse
-      if (characterUploads.length > 0) {
-        const updatedImages = [...new Set([...existingCharacterImages, ...characterUploads])]
-        setExistingCharacterImages(updatedImages)
-      }
-
-      toast({
-        title: "Page generated successfully",
-        description: `Page ${nextPageNumber} is ready`,
-        duration: 4000,
-      })
     } catch (error) {
-      console.error("Error generating page:", error)
+      console.error("Error generating page:", error);
       toast({
         title: "Generation failed",
-        description: error instanceof Error ? error.message : "Failed to generate comic page. Please try again.",
+        description:
+          error instanceof Error ? error.message : "Failed to generate page",
         variant: "destructive",
         duration: 4000,
-      })
+      });
-
-      // Remove failed page from state
-      setPages((prevPages) => prevPages.filter((page) => page.id !== loadingPageId))
-      setCurrentPage(Math.max(0, pages.length - 1))
-    } finally {
-      setLoadingPageId(null)
     }
-  }
+  };
 
   if (isLoading) {
     return (
       <div className="h-screen flex items-center justify-center bg-background">
         <div className="text-white">Loading story...</div>
       </div>
-    )
+    );
   }
 
   if (!story) {
@@ -263,14 +209,13 @@ export default function StoryEditorPage() {
       <div className="h-screen flex items-center justify-center bg-background">
         <div className="text-white">Story not found</div>
       </div>
-    )
+    );
   }
 
   return (
     <div className="h-screen flex flex-col bg-background">
       <EditorToolbar
         title={story.title}
-        onContinueStory={handleContinueStory}
         onInfoClick={() => setShowInfoSheet(true)}
       />
 
@@ -286,18 +231,29 @@ export default function StoryEditorPage() {
         <ComicCanvas page={pages[currentPage]} />
       </div>
 
-      <ApiKeyModal isOpen={showApiModal} onClose={() => setShowApiModal(false)} onSubmit={handleApiKeySubmit} />
+      <ApiKeyModal
+        isOpen={showApiModal}
+        onClose={() => setShowApiModal(false)}
+        onSubmit={handleApiKeySubmit}
+      />
       <GeneratePageModal
         isOpen={showGenerateModal}
         onClose={() => setShowGenerateModal(false)}
         onGenerate={handleGeneratePage}
         pageNumber={pages.length + 1}
-        previousCharacters={[]} // Will be updated with character reuse
+        allPages={pages.map((page, index) => ({
-        previousPagePrompt={pages[pages.length - 1]?.prompt}
+          pageNumber: page.id,
-        previousPageStyle={pages[pages.length - 1]?.style?.toLowerCase()}
+          characterImages: page.characterUploads || [],
-        existingCharacterImages={existingCharacterImages}
+          prompt: page.prompt,
+          imageUrl: page.image,
+          style: page.style,
+        }))}
+      />
+      <PageInfoSheet
+        isOpen={showInfoSheet}
+        onClose={() => setShowInfoSheet(false)}
+        page={pages[currentPage]}
       />
-      <PageInfoSheet isOpen={showInfoSheet} onClose={() => setShowInfoSheet(false)} page={pages[currentPage]} />
     </div>
-  )
+  );
-}
+}

components/editor/editor-toolbar.tsx

@@ -6,11 +6,10 @@ import { useRouter } from "next/navigation"
 
 interface EditorToolbarProps {
   title: string
-  onContinueStory: () => void
   onInfoClick: () => void
 }
 
-export function EditorToolbar({ title, onContinueStory, onInfoClick }: EditorToolbarProps) {
+export function EditorToolbar({ title, onInfoClick }: EditorToolbarProps) {
   const router = useRouter()
 
   return (
@@ -53,15 +52,6 @@ export function EditorToolbar({ title, onContinueStory, onInfoClick }: EditorToo
           <Download className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
           <span>Download PDF</span>
         </Button>
-
-        <Button
-          onClick={onContinueStory}
-          className="gap-1.5 sm:gap-2 text-xs bg-white hover:bg-neutral-200 text-black h-8 sm:h-9 px-3 sm:px-4"
-        >
-          <Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-          <span className="hidden sm:inline">Continue story</span>
-          <span className="sm:hidden">Add</span>
-        </Button>
       </div>
     </header>
   )

components/editor/generate-page-modal.tsx

@@ -8,6 +8,14 @@ import { useToast } from "@/hooks/use-toast"
 import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils"
 import { COMIC_STYLES } from "@/lib/constants"
 
+interface PageReference {
+  pageNumber: number
+  characterImages: string[]
+  prompt: string
+  imageUrl?: string
+  style: string
+}
+
 interface GeneratePageModalProps {
   isOpen: boolean
   onClose: () => void
@@ -15,14 +23,11 @@ interface GeneratePageModalProps {
     prompt: string
     style: string
     characterFiles?: File[]
-    characterUrls?: string[] // For reusing existing characters
+    characterUrls?: string[]
     isContinuation?: boolean
   }) => void
   pageNumber: number
-  previousCharacters?: File[]
+  allPages: PageReference[]
-  previousPagePrompt?: string
-  previousPageStyle?: string
-  existingCharacterImages?: string[] // Character images from previous pages
 }
 
 export function GeneratePageModal({
@@ -30,55 +35,43 @@ export function GeneratePageModal({
   onClose,
   onGenerate,
   pageNumber,
-  previousCharacters,
+  allPages,
-  previousPagePrompt,
-  previousPageStyle,
-  existingCharacterImages = [],
 }: GeneratePageModalProps) {
   const [prompt, setPrompt] = useState("")
-  const [uploadedFiles, setUploadedFiles] = useState<File[]>(previousCharacters || [])
+  const [uploadedFiles, setUploadedFiles] = useState<File[]>([])
   const [selectedExistingCharacters, setSelectedExistingCharacters] = useState<string[]>([])
+  const [referencePageNumber, setReferencePageNumber] = useState<number>(allPages.length > 0 ? allPages.length : 1)
+  const [pageImage, setPageImage] = useState<string | null>(null)
   const [previews, setPreviews] = useState<string[]>([])
   const [showPreview, setShowPreview] = useState<number | null>(null)
   const [isGenerating, setIsGenerating] = useState(false)
-  const [isContinuing, setIsContinuing] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const { toast } = useToast()
 
-  const selectedStyleId = previousPageStyle || "noir"
+  const referencePage = allPages.find((p) => p.pageNumber === referencePageNumber) || null
-  const selectedStyle = useMemo(
+  const referenceStyleId = referencePage?.style || "noir"
-    () => COMIC_STYLES.find((s) => s.id === selectedStyleId)?.name || "Noir",
+  const selectedStyleName = COMIC_STYLES.find((s) => s.id === referenceStyleId)?.name || "Noir"
-    [selectedStyleId]
+  const selectedStyle = useMemo(() => selectedStyleName, [referenceStyleId])
-  )
 
   useEffect(() => {
-    if (previousCharacters && previousCharacters.length > 0) {
+    if (isOpen && referencePage) {
-      const newPreviews: string[] = []
+      setSelectedExistingCharacters(referencePage.characterImages)
-      previousCharacters.forEach((file, index) => {
+      setPageImage(referencePage.imageUrl || null)
-        const reader = new FileReader()
+    } else if (isOpen && !referencePage) {
-        reader.onload = (e) => {
+      setPageImage(null)
-          newPreviews[index] = e.target?.result as string
-          if (newPreviews.filter(Boolean).length === previousCharacters.length) {
-            setPreviews([...newPreviews])
-          }
-        }
-        reader.readAsDataURL(file)
-      })
     }
-  }, [previousCharacters])
+  }, [isOpen, referencePage])
 
   const handleFiles = async (newFiles: FileList | null) => {
     if (!newFiles) return
 
     const filesArray = Array.from(newFiles)
 
-    // Validate files (including WebP rejection)
     const validationResults = filesArray.map(file => ({
       file,
       validation: validateFileForUpload(file, true)
     }))
 
-    // Show errors for invalid files
     validationResults.forEach(({ validation }) => {
       if (!validation.valid && validation.error) {
         toast({
@@ -96,10 +89,9 @@ export function GeneratePageModal({
 
     if (validFiles.length === 0) return
 
-    const totalFiles = [...uploadedFiles, ...validFiles].slice(0, 2) // Max 2 files
+    const totalFiles = [...uploadedFiles, ...validFiles].slice(0, 2)
     setUploadedFiles(totalFiles)
 
-    // Generate previews for all files
     const newPreviews = await Promise.all(
       totalFiles.map((file) => generateFilePreview(file))
     )
@@ -125,34 +117,54 @@ export function GeneratePageModal({
     )
   }
 
-  const handleGenerate = () => {
+  const togglePageImage = () => {
+    setPageImage(prev => prev === null && referencePage?.imageUrl ? referencePage.imageUrl : null)
+  }
+
+  const handleGenerate = async () => {
     if (!prompt.trim()) return
     setIsGenerating(true)
+
+    const fileDataUrls = await Promise.all(
+      uploadedFiles.map((file, index) => {
+        return new Promise<string>((resolve) => {
+          const reader = new FileReader()
+          reader.onload = (e) => {
+            const base64 = e.target?.result as string
+            const [header, base64Data] = base64.split(",")
+            const base64String = base64Data.replace(/_/g, "/")
+            resolve(`data:image/jpeg;base64,${base64String}`)
+          }
+          reader.readAsDataURL(file)
+        })
+      })
+    )
+
+    const allCharacterUrls: string[] = [
+      ...selectedExistingCharacters,
+      ...fileDataUrls,
+      ...(pageImage ? [pageImage] : []),
+    ]
+
     onGenerate({
       prompt,
       style: selectedStyle,
       characterFiles: uploadedFiles.length > 0 ? uploadedFiles : undefined,
-      characterUrls: selectedExistingCharacters.length > 0 ? selectedExistingCharacters : undefined,
+      characterUrls: allCharacterUrls,
       isContinuation: false,
     })
   }
 
-  const handleContinue = () => {
-    setIsContinuing(true)
-    onGenerate({
-      prompt: prompt.trim() || `Continue the story from where it left off. Previous context: ${previousPagePrompt}`,
-      style: selectedStyle,
-      characterFiles: uploadedFiles.length > 0 ? uploadedFiles : undefined,
-      characterUrls: selectedExistingCharacters.length > 0 ? selectedExistingCharacters : undefined,
-      isContinuation: true,
-    })
-  }
-
   useEffect(() => {
     if (!isOpen) {
       setIsGenerating(false)
-      setIsContinuing(false)
       setPrompt("")
+      setUploadedFiles([])
+      setSelectedExistingCharacters([])
+      setPageImage(null)
+      if (allPages.length > 0) {
+        setReferencePageNumber(allPages.length)
+      }
     }
   }, [isOpen])
 
@@ -165,6 +177,26 @@ export function GeneratePageModal({
           </DialogHeader>
 
           <div className="space-y-4 mt-4">
+            {/* Reference Page Selection */}
+            {allPages.length > 0 && (
+              <div className="space-y-2">
+                <label className="text-xs text-muted-foreground uppercase tracking-[0.02em] font-medium">
+                  Reference Page
+                </label>
+                <select
+                  value={referencePageNumber}
+                  onChange={(e) => setReferencePageNumber(Number(e.target.value))}
+                  className="w-full bg-background/80 border border-border/50 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo/50"
+                >
+                  {allPages.map((page) => (
+                    <option key={page.pageNumber} value={page.pageNumber}>
+                      Page {page.pageNumber}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+
             <div className="relative glass-panel p-1 rounded-xl group focus-within:border-indigo/30 transition-colors">
               <div className="bg-background/80 rounded-lg p-4 border border-border/50">
                 <div className="flex justify-between items-center mb-3">
@@ -172,26 +204,55 @@ export function GeneratePageModal({
                     Prompt
                   </label>
                   <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
-                    <span className="capitalize">{selectedStyle}</span>
+                    <span className="capitalize">{selectedStyleName}</span>
                   </div>
                 </div>
 
                 <textarea
                   value={prompt}
                   onChange={(e) => setPrompt(e.target.value)}
-                  placeholder="Continue the story... Describe what happens next in the comic."
+                  placeholder="Continue the story... Describe what happens next in your comic."
                   className="w-full bg-transparent border-none text-sm text-white placeholder-muted-foreground/50 focus:ring-0 focus:outline-none resize-none h-20 leading-relaxed tracking-tight"
                 />
 
                 <div className="mt-3 pt-3 border-t border-border/30 space-y-3">
-                  {/* Existing Characters */}
+                  {/* Reference Page Image Toggle */}
-                  {existingCharacterImages.length > 0 && (
+                  {referencePage && referencePage.imageUrl && (
                     <div className="space-y-2">
                       <div className="text-xs text-muted-foreground uppercase tracking-[0.02em] font-medium">
-                        Reuse Characters from Story
+                        Include Page Image
+                      </div>
+                      <button
+                        onClick={togglePageImage}
+                        className={`w-8 h-8 rounded-md overflow-hidden border-2 transition-all ${
+                          pageImage
+                            ? "border-indigo shadow-sm shadow-indigo/20"
+                            : "border-border/50 hover:border-indigo/50"
+                        }`}
+                      >
+                        {pageImage ? (
+                          <img
+                            src={pageImage}
+                            alt="Page image"
+                            className="w-full h-full object-cover"
+                          />
+                        ) : (
+                          <span className="text-xs text-muted-foreground flex items-center justify-center h-full">
+                            Page
+                          </span>
+                        )}
+                      </button>
+                    </div>
+                  )}
+
+                  {/* Existing Characters */}
+                  {referencePage && referencePage.characterImages.length > 0 && (
+                    <div className="space-y-2">
+                      <div className="text-xs text-muted-foreground uppercase tracking-[0.02em] font-medium">
+                        Reuse Characters
                       </div>
                       <div className="flex items-center gap-2 flex-wrap">
-                        {existingCharacterImages.map((characterUrl, index) => {
+                        {referencePage.characterImages.map((characterUrl) => {
                           const isSelected = selectedExistingCharacters.includes(characterUrl)
                           return (
                             <button
@@ -205,7 +266,7 @@ export function GeneratePageModal({
                             >
                               <img
                                 src={characterUrl}
-                                alt={`Existing character ${index + 1}`}
+                                alt="Existing character"
                                 className="w-full h-full object-cover"
                               />
                               {isSelected && (
@@ -284,37 +345,20 @@ export function GeneratePageModal({
               </div>
             </div>
 
-            <div className="flex gap-3">
+            <Button
-              <Button
+              onClick={handleGenerate}
-                onClick={handleContinue}
+              disabled={!prompt.trim() || isGenerating}
-                disabled={isGenerating || isContinuing}
+              className="w-full gap-2 bg-white hover:bg-neutral-200 text-black tracking-tight"
-                variant="outline"
+            >
-                className="flex-1 gap-2 border-indigo/30 text-indigo hover:bg-indigo/10 hover:text-indigo tracking-tight bg-transparent"
+              {isGenerating ? (
-              >
+                <>
-                {isContinuing ? (
+                  <Loader2 className="w-4 h-4 animate-spin" />
-                  <>
+                  <span>Generating...</span>
-                    <Loader2 className="w-4 h-4 animate-spin" />
+                </>
-                    <span>Continuing...</span>
+              ) : (
-                  </>
+                `Generate Page ${pageNumber}`
-                ) : (
+              )}
-                  `Continue from Page ${pageNumber - 1}`
+            </Button>
-                )}
-              </Button>
-              <Button
-                onClick={handleGenerate}
-                disabled={!prompt.trim() || isGenerating || isContinuing}
-                className="flex-1 gap-2 bg-white hover:bg-neutral-200 text-black tracking-tight"
-              >
-                {isGenerating ? (
-                  <>
-                    <Loader2 className="w-4 h-4 animate-spin" />
-                    <span>Generating...</span>
-                  </>
-                ) : (
-                  `Generate Page ${pageNumber}`
-                )}
-              </Button>
-            </div>
           </div>
         </DialogContent>
       </Dialog>