feat: enable edit source code

src/components/app-container.tsx

@@ -187,6 +187,30 @@ export function AppContainer() {
     latestVersionIdRef.current = null;
   }
 
+  const handleManualCodeEdit = (newCode: string) => {
+    setCode(newCode);
+    
+    if (currentVersionId) {
+      updateVersionWithCode(newCode);
+    }
+  };
+
+  const updateVersionWithCode = (editedCode: string) => {    // Get existing versions
+    const storedVersions = localStorage.getItem('novita-versions');
+    if (!storedVersions || !currentVersionId) return;
+    
+    let versions: Version[] = JSON.parse(storedVersions);
+    
+    const updatedVersions = versions.map(version => {
+      if (version.id === currentVersionId) {
+        return { ...version, code: editedCode };
+      }
+      return version;
+    });
+    
+    localStorage.setItem('novita-versions', JSON.stringify(updatedVersions));
+  };
+
   return (
     <div className="flex flex-col h-screen bg-novita-dark text-white">
       <Header 
@@ -196,7 +220,11 @@ export function AppContainer() {
       />
       <div className="flex flex-1 overflow-hidden relative">
         <div className="w-1/3 border-r border-novita-gray/20 flex flex-col relative">
-          <CodeEditor code={code} isLoading={loading} />
+          <CodeEditor 
+            code={code} 
+            isLoading={loading} 
+            onCodeChange={handleManualCodeEdit}
+          />
           
           <AuthErrorPopup 
             show={showAuthError} 

src/components/code-editor.tsx

@@ -1,15 +1,38 @@
 "use client"
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
+import { debounce } from "@/lib/utils";
 
 interface CodeEditorProps {
   code: string;
   isLoading?: boolean;
+  onCodeChange?: (code: string) => void;
 }
 
-export function CodeEditor({ code, isLoading = false }: CodeEditorProps) {
+export function CodeEditor({ code, isLoading = false, onCodeChange }: CodeEditorProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
+  const [localCode, setLocalCode] = useState(code);
+
+  const debouncedSave = useCallback(
+    debounce((newCode: string) => {
+      if (onCodeChange) {
+        onCodeChange(newCode);
+      }
+    }, 1000),
+    [onCodeChange]
+  );
+
+  useEffect(() => {
+    setLocalCode(code);
+  }, [code]);
+
+  const handleCodeChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newCode = e.target.value;
+    setLocalCode(newCode);
+    debouncedSave(newCode);
+  };
 
   // Check if user is near bottom when scrolling
   const handleScroll = () => {
@@ -30,22 +53,48 @@ export function CodeEditor({ code, isLoading = false }: CodeEditorProps) {
   }, []);
 
   useEffect(() => {
-    // Only auto-scroll if user was already at the bottom
-    if (isAtBottom && containerRef.current) {
+    // Only auto-scroll if user was already at the bottom and not focused on textarea
+    if (isAtBottom && containerRef.current && document.activeElement !== textareaRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
-  }, [code, isLoading, isAtBottom]);
+  }, [localCode, isLoading, isAtBottom]);
+
+  // Auto-resize textarea
+  const adjustTextareaHeight = () => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
+    }
+  };
+
+  useEffect(() => {
+    adjustTextareaHeight();
+  }, [localCode]);
 
   return (
     <div className="flex-1 overflow-auto p-4">
       <div 
         ref={containerRef} 
-        className="code-area p-4 rounded-md font-mono text-sm h-full overflow-auto border border-novita-gray/20"
+        className="code-area p-4 rounded-md font-mono text-sm h-full overflow-auto border border-novita-gray/20 relative"
       >
-        <pre className="whitespace-pre-wrap">
-          {code}
-          {isLoading && <span className="inline-block h-4 w-2 bg-white/70 animate-pulse"></span>}
-        </pre>
+        <textarea
+          ref={textareaRef}
+          value={localCode}
+          onChange={handleCodeChange}
+          disabled={isLoading}
+          className="w-full min-h-full bg-transparent text-white resize-none outline-none whitespace-pre-wrap font-mono text-sm leading-relaxed"
+          style={{ 
+            minHeight: '100%',
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            lineHeight: 'inherit'
+          }}
+          placeholder="Your generated code will appear here..."
+          spellCheck={false}
+        />
+        {isLoading && (
+          <span className="absolute bottom-4 right-4 inline-block h-4 w-2 bg-white/70 animate-pulse"></span>
+        )}
       </div>
     </div>
   )

src/lib/utils.ts

@@ -4,3 +4,14 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout;
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}