updated

Author: PavanMudigonda

docs/css/style.css

@@ -480,6 +480,14 @@ body {
     background: #1e1e1e;
     color: #d4d4d4;
     resize: vertical;
+    line-height: 1.5;
+    tab-size: 4;
+    -moz-tab-size: 4;
+}
+
+.code-editor:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: -2px;
 }
 
 .output-section {

docs/editor.html

@@ -91,7 +91,7 @@ <h2><i class="fas fa-code"></i> Code Editor</h2>
                 </div>
             </div>
 
-            <textarea id="code-editor" class="code-editor" spellcheck="false"># Write your Python code here
+            <textarea id="code-editor" class="code-editor" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"># Write your Python code here
 print("Hello World")
 </textarea>
 
@@ -125,10 +125,11 @@ <h3><i class="fas fa-terminal"></i> Output</h3>
     </div>
 
     <!-- PyScript code execution -->
-    <script type="py" config='{"packages": ["numpy"]}' id="python-runner" style="display: none;">
+    <script type="py" config='{"packages": []}' id="python-runner" style="display: none;">
 from js import document, console
 import sys
 from io import StringIO
+import traceback
 
 def run_user_code():
     output_div = document.getElementById("output")
@@ -147,7 +148,7 @@ <h3><i class="fas fa-terminal"></i> Output</h3>
 
     try:
         # Execute the code
-        exec(code, globals())
+        exec(code, {})
 
         # Get output
         output = sys.stdout.getvalue()
@@ -159,13 +160,17 @@ <h3><i class="fas fa-terminal"></i> Output</h3>
             output_div.innerHTML = '<div class="output-info">Code executed successfully (no output)</div>'
 
     except Exception as e:
-        # Display error
-        output_div.innerHTML = f'<pre class="output-error"><strong>Error:</strong>\n{str(e)}</pre>'
+        # Display error with traceback
+        error_msg = traceback.format_exc()
+        output_div.innerHTML = f'<pre class="output-error"><strong>Error:</strong>\n{error_msg}</pre>'
 
     finally:
         # Restore stdout
         sys.stdout = old_stdout
         loading_div.style.display = "none"
+
+# Make function available globally
+window.run_user_code = run_user_code
     </script>
 
     <script src="js/progress.js"></script>

docs/js/editor.js

@@ -29,26 +29,23 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 function runCode() {
-    // This triggers the PyScript execution
-    try {
-        const code = document.getElementById('code-editor').value;
-        const outputDiv = document.getElementById('output');
-        const loadingDiv = document.getElementById('loading');
-        
-        // Show loading
-        loadingDiv.style.display = 'block';
-        outputDiv.innerHTML = '';
-        
-        // PyScript will handle execution
-        // The python-runner script will capture and display output
-        
-        // Note: PyScript execution is handled by the embedded Python code in editor.html
-        // This function just triggers the UI updates
-        
-    } catch (error) {
+    // Check if PyScript is loaded
+    if (typeof window.run_user_code === 'function') {
+        // Call PyScript function
+        window.run_user_code();
+    } else if (typeof pyscript !== 'undefined') {
+        // PyScript is available, try to run
+        try {
+            pyscript.run_user_code();
+        } catch (e) {
+            // Fallback: show that PyScript is loading
+            document.getElementById('output').innerHTML = 
+                '<div class="output-info">⏳ PyScript is still loading... Please wait a moment and try again.</div>';
+        }
+    } else {
+        // PyScript not loaded yet
         document.getElementById('output').innerHTML = 
-            `<pre class="output-error">Error: ${error.message}</pre>`;
-        document.getElementById('loading').style.display = 'none';
+            '<div class="output-info">⏳ Python runtime is loading... This may take a few seconds on first visit. Please wait and try again.</div>';
     }
 }