feat: Enhance app with WYSIWYG editor and saved pages

- Fixed AI response rendering issues with better HTML content detection
- Added WYSIWYG visual editor for modifying generated content without breaking structure
- Implemented a saved pages system to store and retrieve previously generated pages
- Improved error handling and user feedback throughout the application
- Added toggle to switch between code and visual editing modes

🤖 Generated with [Claude Code](https://claude.ai/code)

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

src/components/App.tsx

@@ -11,6 +11,8 @@ import Tabs from "./tabs/tabs";
 import AskAI from "./ask-ai/ask-ai";
 import { Auth } from "../utils/types";
 import Preview from "./preview/preview";
+import WysiwygEditor from "./wysiwyg/wysiwyg-editor";
+import SavedPages from "./saved-pages/saved-pages";
 
 function App() {
   const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
@@ -25,6 +27,7 @@ function App() {
   const [html, setHtml] = useState((htmlStorage as string) ?? defaultHTML);
   const [isAiWorking, setisAiWorking] = useState(false);
   const [auth, setAuth] = useState<Auth | undefined>(undefined);
+  const [editMode, setEditMode] = useState<'code' | 'wysiwyg'>('code');
 
   const fetchMe = async () => {
     const res = await fetch("/api/@me");
@@ -151,7 +154,22 @@ function App() {
           }
         }}
       >
-        <DeployButton html={html} error={error} auth={auth} />
+        <div className="flex space-x-2">
+          <SavedPages 
+            currentHtml={html} 
+            onLoadPage={(savedHtml) => {
+              setHtml(savedHtml);
+              setError(false);
+            }} 
+          />
+          <button
+            className="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white rounded text-sm"
+            onClick={() => setEditMode(editMode === 'code' ? 'wysiwyg' : 'code')}
+          >
+            {editMode === 'code' ? 'Visual Editor' : 'Code Editor'}
+          </button>
+          <DeployButton html={html} error={error} auth={auth} />
+        </div>
       </Header>
       <main className="max-lg:flex-col flex w-full">
         <div
@@ -166,36 +184,45 @@ function App() {
           }}
         >
           <Tabs />
-          <Editor
-            language="html"
-            theme="vs-dark"
-            className={classNames(
-              "h-[calc(30dvh-41px)] lg:h-[calc(100dvh-96px)]",
-              {
-                "pointer-events-none": isAiWorking,
-              }
-            )}
-            value={html}
-            onValidate={(markers) => {
-              if (markers?.length > 0) {
-                setError(true);
-              }
-            }}
-            onChange={(value) => {
-              const newValue = value ?? "";
-              setHtml(newValue);
-              setError(false);
-            }}
-            // Removed onMount for editorRef
-          />
+          {editMode === 'code' ? (
+            <Editor
+              language="html"
+              theme="vs-dark"
+              className={classNames(
+                "h-[calc(30dvh-41px)] lg:h-[calc(100dvh-96px)]",
+                {
+                  "pointer-events-none": isAiWorking,
+                }
+              )}
+              value={html}
+              onValidate={(markers) => {
+                if (markers?.length > 0) {
+                  setError(true);
+                }
+              }}
+              onChange={(value) => {
+                const newValue = value ?? "";
+                setHtml(newValue);
+                setError(false);
+              }}
+            />
+          ) : (
+            <div className="h-[calc(30dvh-41px)] lg:h-[calc(100dvh-96px)] overflow-hidden bg-gray-950">
+              <WysiwygEditor 
+                html={html}
+                onSave={(updatedHtml) => {
+                  setHtml(updatedHtml);
+                  setError(false);
+                }}
+              />
+            </div>
+          )}
           <AskAI
             html={html}
-            setHtml={setHtml} // Used for both full and diff updates now
-            // Removed editorRef prop
+            setHtml={setHtml}
             isAiWorking={isAiWorking}
             setisAiWorking={setisAiWorking}
             onScrollToBottom={() => {
-              // Consider if scrolling is still needed here, maybe based on html length change?
               // For now, removing the direct editor scroll.
             }}
           />

src/components/ask-ai/ask-ai.tsx

@@ -117,14 +117,58 @@ function AskAI({
             } else {
               // Final update for full HTML mode
               const finalDoc = fullContentResponse.match(/<!DOCTYPE html>[\s\S]*<\/html>/)?.[0];
-                 if (finalDoc) {
-                     setHtml(finalDoc); // Ensure final complete HTML is set
-                 } else if (fullContentResponse.trim()) {
-                     // If we got content but it doesn't look like HTML, maybe it's an error message or explanation?
-                     console.warn("[AI Response] Final response doesn't look like HTML:", fullContentResponse);
-                     // Decide if we should show this to the user? Maybe a toast?
-                     // For now, let's assume the throttled updates were sufficient or it wasn't HTML.
-                 }
+              if (finalDoc) {
+                console.log("[AI Response] Found complete HTML document");
+                setHtml(finalDoc); // Ensure final complete HTML is set
+              } else if (fullContentResponse.includes("<html") && fullContentResponse.includes("</html>")) {
+                // Try to match HTML without DOCTYPE
+                const htmlMatch = fullContentResponse.match(/<html[\s\S]*<\/html>/);
+                if (htmlMatch) {
+                  console.log("[AI Response] Found HTML without DOCTYPE, adding DOCTYPE");
+                  setHtml(`<!DOCTYPE html>\n${htmlMatch[0]}`);
+                }
+              } else if (fullContentResponse.trim()) {
+                console.warn("[AI Response] Final response doesn't contain proper HTML");
+                
+                // Search for any HTML-like content
+                if (fullContentResponse.includes("<body") || 
+                    (fullContentResponse.includes("<div") && fullContentResponse.includes("</div>"))) {
+                  
+                  console.log("[AI Response] Found partial HTML content, wrapping it");
+                  // Wrap the content in a basic HTML structure
+                  const wrappedContent = `<!DOCTYPE html>
+<html>
+<head>
+  <title>AI Generated Content</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  ${fullContentResponse}
+</body>
+</html>`;
+                  setHtml(wrappedContent);
+                } else {
+                  // If it's just text, wrap it in pre tag
+                  console.log("[AI Response] No HTML found, creating preview with text content");
+                  const textContent = `<!DOCTYPE html>
+<html>
+<head>
+  <title>AI Generated Text</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    body { font-family: Arial, sans-serif; padding: 20px; }
+    pre { white-space: pre-wrap; word-break: break-word; }
+  </style>
+</head>
+<body>
+  <pre>${fullContentResponse}</pre>
+</body>
+</html>`;
+                  setHtml(textContent);
+                }
+              }
              }
 
             toast.success("AI processing complete");

src/components/saved-pages/saved-pages.tsx

@@ -0,0 +1,179 @@
+import React, { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+
+interface SavedPage {
+  id: string;
+  title: string;
+  html: string;
+  createdAt: number;
+}
+
+interface SavedPagesProps {
+  currentHtml: string;
+  onLoadPage: (html: string) => void;
+}
+
+const SavedPages: React.FC<SavedPagesProps> = ({ currentHtml, onLoadPage }) => {
+  const [pages, setPages] = useState<SavedPage[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [newPageTitle, setNewPageTitle] = useState('');
+  const [isAdding, setIsAdding] = useState(false);
+
+  // Load saved pages from localStorage
+  useEffect(() => {
+    const savedPagesJson = localStorage.getItem('autosite_saved_pages');
+    if (savedPagesJson) {
+      try {
+        const savedPages = JSON.parse(savedPagesJson);
+        setPages(savedPages);
+      } catch (error) {
+        console.error('Error loading saved pages:', error);
+      }
+    }
+  }, []);
+
+  // Save pages to localStorage when they change
+  useEffect(() => {
+    localStorage.setItem('autosite_saved_pages', JSON.stringify(pages));
+  }, [pages]);
+
+  // Save current page
+  const savePage = () => {
+    if (!currentHtml) {
+      toast.error('No content to save');
+      return;
+    }
+
+    if (!newPageTitle.trim()) {
+      toast.error('Please enter a title for your page');
+      return;
+    }
+
+    // Create a new page
+    const newPage: SavedPage = {
+      id: `page_${Date.now()}`,
+      title: newPageTitle,
+      html: currentHtml,
+      createdAt: Date.now()
+    };
+
+    setPages([newPage, ...pages]);
+    setNewPageTitle('');
+    setIsAdding(false);
+    toast.success('Page saved successfully');
+  };
+
+  // Load a page
+  const loadPage = (page: SavedPage) => {
+    if (window.confirm('Are you sure you want to load this page? Your current work will be replaced.')) {
+      onLoadPage(page.html);
+      setIsOpen(false);
+      toast.info(`Loaded page: ${page.title}`);
+    }
+  };
+
+  // Delete a page
+  const deletePage = (e: React.MouseEvent, pageId: string) => {
+    e.stopPropagation();
+    if (window.confirm('Are you sure you want to delete this page?')) {
+      setPages(pages.filter(page => page.id !== pageId));
+      toast.info('Page deleted');
+    }
+  };
+
+  return (
+    <div className="saved-pages-container">
+      <button
+        className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {isOpen ? 'Close Saved Pages' : 'Saved Pages'}
+      </button>
+
+      {isOpen && (
+        <div className="saved-pages-modal fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-gray-900 rounded-lg w-full max-w-2xl p-5 max-h-[80vh] overflow-y-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl text-white font-bold">Saved Pages</h2>
+              <button
+                className="text-gray-400 hover:text-white"
+                onClick={() => setIsOpen(false)}
+              >
+                ✕
+              </button>
+            </div>
+
+            {/* Add new page form */}
+            {isAdding ? (
+              <div className="mb-6 bg-gray-800 p-4 rounded-lg">
+                <input
+                  type="text"
+                  className="w-full bg-gray-700 border border-gray-600 text-white px-3 py-2 rounded mb-3"
+                  placeholder="Page Title"
+                  value={newPageTitle}
+                  onChange={(e) => setNewPageTitle(e.target.value)}
+                />
+                <div className="flex space-x-2">
+                  <button
+                    className="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded"
+                    onClick={savePage}
+                  >
+                    Save Page
+                  </button>
+                  <button
+                    className="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 text-white rounded"
+                    onClick={() => {
+                      setIsAdding(false);
+                      setNewPageTitle('');
+                    }}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <button
+                className="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded mb-6"
+                onClick={() => setIsAdding(true)}
+              >
+                Save Current Page
+              </button>
+            )}
+
+            {/* List of saved pages */}
+            {pages.length === 0 ? (
+              <p className="text-gray-400 text-center py-4">No saved pages yet</p>
+            ) : (
+              <div className="space-y-3">
+                {pages.map((page) => (
+                  <div
+                    key={page.id}
+                    className="bg-gray-800 p-3 rounded cursor-pointer hover:bg-gray-700 flex justify-between items-center"
+                    onClick={() => loadPage(page)}
+                  >
+                    <div>
+                      <h3 className="text-white font-medium">{page.title}</h3>
+                      <p className="text-gray-400 text-sm">
+                        {new Date(page.createdAt).toLocaleString()}
+                      </p>
+                    </div>
+                    <div className="flex space-x-2">
+                      <button
+                        className="text-red-500 hover:text-red-400"
+                        onClick={(e) => deletePage(e, page.id)}
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SavedPages;

src/components/wysiwyg/wysiwyg-editor.tsx

@@ -0,0 +1,230 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { toast } from 'react-toastify';
+
+// Define interface for editable elements
+interface EditableElement {
+  id: string;
+  originalText: string;
+  currentText: string;
+  type: 'text' | 'heading' | 'paragraph' | 'image';
+  tag?: string;
+  src?: string;
+  alt?: string;
+}
+
+interface WysiwygEditorProps {
+  html: string;
+  onSave: (updatedHtml: string) => void;
+}
+
+const WysiwygEditor: React.FC<WysiwygEditorProps> = ({ html, onSave }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editableElements, setEditableElements] = useState<EditableElement[]>([]);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  
+  // Parse HTML to find editable elements when html changes
+  useEffect(() => {
+    if (!html) return;
+    
+    // Reset editing state when HTML changes
+    setIsEditing(false);
+    
+    // Schedule parsing to happen after render
+    setTimeout(() => {
+      extractEditableElements();
+    }, 500);
+  }, [html]);
+  
+  // Extract editable elements from the iframe
+  const extractEditableElements = () => {
+    if (!iframeRef.current) return;
+    
+    try {
+      const iframeDoc = iframeRef.current.contentDocument;
+      if (!iframeDoc) return;
+      
+      const elements: EditableElement[] = [];
+      
+      // Find text elements (headings, paragraphs, spans with text)
+      const textElements = iframeDoc.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span:not(:empty)');
+      let elementId = 0;
+      
+      textElements.forEach((el) => {
+        // Skip elements with no text content
+        if (!el.textContent?.trim()) return;
+        
+        // Skip elements that are part of script, style tags or have specific classes
+        const closestNonEditable = el.closest('script, style, nav, footer');
+        if (closestNonEditable) return;
+        
+        const id = `editable-${elementId++}`;
+        el.id = id; // Add ID to the element for easier access later
+        
+        elements.push({
+          id,
+          originalText: el.textContent || '',
+          currentText: el.textContent || '',
+          type: el.tagName.toLowerCase().startsWith('h') ? 'heading' : 'paragraph',
+          tag: el.tagName.toLowerCase()
+        });
+      });
+      
+      // Find image elements
+      const imageElements = iframeDoc.querySelectorAll('img');
+      imageElements.forEach((el) => {
+        const id = `editable-${elementId++}`;
+        el.id = id;
+        
+        elements.push({
+          id,
+          originalText: el.alt || '',
+          currentText: el.alt || '',
+          type: 'image',
+          tag: 'img',
+          src: el.src,
+          alt: el.alt
+        });
+      });
+      
+      setEditableElements(elements);
+    } catch (error) {
+      console.error('Error extracting editable elements:', error);
+    }
+  };
+  
+  // Update HTML content with edited text
+  const applyChanges = () => {
+    if (!iframeRef.current) return;
+    
+    try {
+      const iframeDoc = iframeRef.current.contentDocument;
+      if (!iframeDoc) return;
+      
+      // Apply text changes
+      editableElements.forEach((element) => {
+        const el = iframeDoc.getElementById(element.id);
+        if (!el) return;
+        
+        if (element.type === 'image') {
+          // Update image alt text
+          if (el instanceof HTMLImageElement) {
+            el.alt = element.currentText;
+          }
+        } else {
+          // Update text content
+          if (element.currentText !== element.originalText) {
+            el.textContent = element.currentText;
+          }
+        }
+      });
+      
+      // Get the updated HTML
+      const updatedHtml = iframeDoc.documentElement.outerHTML;
+      onSave(updatedHtml);
+      toast.success('Changes saved successfully');
+      setIsEditing(false);
+    } catch (error) {
+      console.error('Error applying changes:', error);
+      toast.error('Failed to save changes');
+    }
+  };
+  
+  // Handle text changes
+  const handleTextChange = (id: string, newText: string) => {
+    setEditableElements((prev) => 
+      prev.map((element) => 
+        element.id === id ? { ...element, currentText: newText } : element
+      )
+    );
+  };
+  
+  return (
+    <div className="wysiwyg-container">
+      {/* Editor toolbar */}
+      <div className="wysiwyg-toolbar bg-gray-900 border-b border-gray-700 p-2">
+        {!isEditing ? (
+          <button 
+            className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm"
+            onClick={() => setIsEditing(true)}
+          >
+            Edit Content
+          </button>
+        ) : (
+          <div className="flex gap-2">
+            <button 
+              className="px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700 text-sm"
+              onClick={applyChanges}
+            >
+              Save Changes
+            </button>
+            <button 
+              className="px-3 py-1 bg-gray-600 text-white rounded hover:bg-gray-700 text-sm"
+              onClick={() => {
+                setIsEditing(false);
+                // Reset to original text
+                setEditableElements((prev) => 
+                  prev.map((element) => ({ ...element, currentText: element.originalText }))
+                );
+              }}
+            >
+              Cancel
+            </button>
+          </div>
+        )}
+      </div>
+      
+      {/* Editing interface */}
+      {isEditing && (
+        <div className="wysiwyg-editor bg-gray-800 p-4 overflow-y-auto max-h-[60vh]">
+          <h3 className="text-white text-lg mb-4">Edit Page Content</h3>
+          <div className="space-y-4">
+            {editableElements.map((element) => (
+              <div key={element.id} className="flex flex-col">
+                <label className="text-gray-300 text-sm mb-1">
+                  {element.type === 'heading' ? `Heading (${element.tag})` : 
+                   element.type === 'image' ? 'Image Alt Text' : 'Text'}
+                </label>
+                {element.type === 'image' ? (
+                  <div className="flex items-center gap-2">
+                    <img 
+                      src={element.src} 
+                      alt={element.alt} 
+                      className="w-10 h-10 object-cover"
+                    />
+                    <input
+                      type="text"
+                      value={element.currentText}
+                      onChange={(e) => handleTextChange(element.id, e.target.value)}
+                      className="flex-1 bg-gray-700 border border-gray-600 text-white px-3 py-2 rounded"
+                      placeholder="Alt text"
+                    />
+                  </div>
+                ) : (
+                  <textarea
+                    value={element.currentText}
+                    onChange={(e) => handleTextChange(element.id, e.target.value)}
+                    className="w-full bg-gray-700 border border-gray-600 text-white px-3 py-2 rounded min-h-[100px]"
+                    placeholder={`Edit ${element.type}...`}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      
+      {/* Preview iframe */}
+      <div className="wysiwyg-preview">
+        <iframe 
+          ref={iframeRef}
+          srcDoc={html}
+          title="WYSIWYG Preview"
+          className="w-full h-full border-0"
+          sandbox="allow-same-origin"
+        ></iframe>
+      </div>
+    </div>
+  );
+};
+
+export default WysiwygEditor;