fix code formatting

frontend/src/components/CodeEditor.tsx

@@ -12,6 +12,8 @@ interface CodeEditorProps {
 
 export default function CodeEditor({ code, language, onChange, readOnly = false }: CodeEditorProps) {
   const editorRef = useRef<any>(null);
+  const lastFormattedCodeRef = useRef<string>('');
+  const formatTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   // Map our language names to Monaco language IDs
   const getMonacoLanguage = (lang: string): string => {
@@ -30,8 +32,35 @@ export default function CodeEditor({ code, language, onChange, readOnly = false
     editorRef.current = editor;
   };
 
+  // Format code intelligently - only when generation appears complete
+  useEffect(() => {
+    if (editorRef.current && code && code.length > 100) {
+      // Clear existing timeout
+      if (formatTimeoutRef.current) {
+        clearTimeout(formatTimeoutRef.current);
+      }
+      
+      // Only format if code hasn't been formatted yet or if it's different
+      if (code !== lastFormattedCodeRef.current) {
+        // Wait 1 second after code stops changing before formatting
+        formatTimeoutRef.current = setTimeout(() => {
+          if (editorRef.current) {
+            editorRef.current.getAction('editor.action.formatDocument')?.run();
+            lastFormattedCodeRef.current = code;
+          }
+        }, 1000);
+      }
+    }
+    
+    return () => {
+      if (formatTimeoutRef.current) {
+        clearTimeout(formatTimeoutRef.current);
+      }
+    };
+  }, [code]);
+
   return (
-    <div className="h-full overflow-hidden">
+    <div className="h-full overflow-hidden bg-[#1e1e1e]">
       <Editor
         height="100%"
         language={getMonacoLanguage(language)}
@@ -43,14 +72,26 @@ export default function CodeEditor({ code, language, onChange, readOnly = false
           minimap: { enabled: true },
           fontSize: 14,
           fontFamily: "'SF Mono', 'JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', monospace",
-          wordWrap: 'on',
+          wordWrap: 'off',
           lineNumbers: 'on',
+          lineNumbersMinChars: 3,
+          glyphMargin: false,
+          folding: true,
+          lineDecorationsWidth: 10,
           scrollBeyondLastLine: false,
           automaticLayout: true,
           tabSize: 2,
+          insertSpaces: true,
           padding: { top: 16, bottom: 16 },
           lineHeight: 22,
           letterSpacing: 0.5,
+          renderLineHighlight: 'line',
+          formatOnPaste: true,
+          formatOnType: false,
+          scrollbar: {
+            verticalScrollbarSize: 10,
+            horizontalScrollbarSize: 10,
+          },
         }}
         onMount={handleEditorDidMount}
       />