Add Python IDE option to settings

package.json

@@ -14,6 +14,7 @@
     "@vercel/speed-insights": "^2.0.0",
     "lucide-react": "^1.14.0",
     "monaco-editor": "^0.55.1",
+    "pyodide": "^0.29.4",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "sql.js": "^1.14.1"

src/App.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PythonIDE from './PythonIDE';
 import { SpeedInsights } from "@vercel/speed-insights/react";
 import './App.css';
 import SqlEditor from './SqlEditor';
@@ -94,7 +95,7 @@ function useResizer(initialPx: number, direction: 'bottom' | 'right') {
 
   return { size, dragging, onMouseDown };
 }
-function IDE() {
+function IDE({ onSwitchToPython }: { onSwitchToPython: () => void }) {
   const { execute, schema, history, clearHistory, exportDb, importDb, ready, initError } = useSql();
 
   const handleDownload = useCallback(() => {
@@ -692,6 +693,18 @@ function IDE() {
                 </button>
               </div>
             </div>
+            <div className="settings-row">
+              <span className="settings-label">Other IDEs</span>
+              <div style={{ display: 'flex', gap: 4 }}>
+                <button 
+                  onClick={onSwitchToPython}
+                  className="btn btn-ghost"
+                  style={{ fontSize: 11, padding: '4px 10px', textDecoration: 'none' }}
+                >
+                  Python IDE
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       )}
@@ -720,10 +733,22 @@ function IDE() {
 }
 
 export default function App() {
+  const [ideMode, setIdeMode] = useState<'sql' | 'python'>('sql');
+
   return (
-    <SqlProvider>
-      <IDE />
-      <SpeedInsights />
-    </SqlProvider>
+    <>
+      {ideMode === 'sql' && (
+        <SqlProvider>
+          <IDE onSwitchToPython={() => setIdeMode('python')} />
+          <SpeedInsights />
+        </SqlProvider>
+      )}
+      {ideMode === 'python' && (
+        <>
+          <PythonIDE onSwitchToSql={() => setIdeMode('sql')} />
+          <SpeedInsights />
+        </>
+      )}
+    </>
   );
 }

src/PyEditor.tsx

@@ -0,0 +1,129 @@
+import { useCallback, useRef, useState, useMemo, useEffect } from 'react';
+import Editor from '@monaco-editor/react';
+
+interface PyEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  onRun: () => void;
+  height?: string;
+  fontSize?: number;
+  wordWrap?: boolean;
+  minimap?: boolean;
+  theme?: 'dark' | 'noir';
+  errorLine?: number;
+}
+
+type MonacoInstance = any;
+
+export default function PyEditor({
+  value, onChange, onRun, height = '100%',
+  fontSize = 14, wordWrap = false, minimap = false,
+  theme = 'dark', errorLine,
+}: PyEditorProps) {
+  const [cursorPos, setCursorPos] = useState({ line: 1, col: 1 });
+  const editorRef = useRef<MonacoInstance | null>(null);
+  const monacoRef = useRef<MonacoInstance | null>(null);
+  const decorationRef = useRef<string[]>([]);
+
+  const onRunRef = useRef(onRun);
+  onRunRef.current = onRun;
+
+  useEffect(() => {
+    if (!editorRef.current || !monacoRef.current) return;
+    const editor = editorRef.current;
+    const monaco = monacoRef.current;
+
+    if (errorLine && errorLine > 0) {
+      decorationRef.current = editor.deltaDecorations(decorationRef.current, [
+        {
+          range: new monaco.Range(errorLine, 1, errorLine, 1),
+          options: {
+            isWholeLine: true,
+            className: 'error-line-highlight',
+            glyphMarginClassName: 'error-glyph-margin',
+            hoverMessage: { value: 'Error detected around here.' },
+            zIndex: 10,
+          }
+        }
+      ]);
+      editor.revealLineInCenterIfOutsideViewport(errorLine);
+    } else {
+      decorationRef.current = editor.deltaDecorations(decorationRef.current, []);
+    }
+  }, [errorLine]);
+
+  const handleMount = useCallback((editor: MonacoInstance, monaco: MonacoInstance) => {
+    editorRef.current = editor;
+    monacoRef.current = monaco;
+
+    // We can reuse the same themes
+    monaco.editor.setTheme(theme === 'noir' ? 'sqlide-noir' : 'sqlide-dark');
+
+    editor.addCommand(
+      monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
+      () => onRunRef.current()
+    );
+
+    editor.onDidChangeCursorPosition((e: MonacoInstance) => {
+      setCursorPos({ line: e.position.lineNumber, col: e.position.column });
+    });
+
+    editor.focus();
+  }, [theme]);
+
+  const options = useMemo(() => ({
+    fontSize,
+    fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, monospace",
+    fontLigatures: true,
+    minimap: { enabled: minimap },
+    wordWrap: (wordWrap ? 'on' : 'off') as 'on' | 'off',
+    scrollBeyondLastLine: false,
+    lineNumbers: 'on' as 'on',
+    renderLineHighlight: 'gutter' as 'gutter',
+    cursorBlinking: 'smooth' as 'smooth',
+    cursorSmoothCaretAnimation: 'on' as 'on',
+    smoothScrolling: true,
+    padding: { top: 12, bottom: 12 },
+    tabSize: 4,
+    insertSpaces: true,
+    formatOnPaste: true,
+    bracketPairColorization: { enabled: true },
+    contextmenu: true,
+    scrollbar: {
+      vertical: 'auto' as 'auto',
+      horizontal: 'auto' as 'auto',
+      verticalScrollbarSize: 6,
+      horizontalScrollbarSize: 6,
+    },
+  }), [fontSize, wordWrap, minimap]);
+
+  return (
+    <div style={{ height, position: 'relative', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ flex: 1, minHeight: 0 }}>
+        <Editor
+          height="100%"
+          defaultLanguage="python"
+          value={value}
+          onChange={v => onChange(v ?? '')}
+          onMount={handleMount}
+          theme={theme === 'noir' ? 'sqlide-noir' : 'sqlide-dark'}
+          options={options}
+        />
+      </div>
+      <div style={{
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        padding: '2px 10px',
+        fontSize: 11,
+        fontFamily: "'JetBrains Mono', monospace",
+        color: theme === 'noir' ? '#666666' : '#565970',
+        background: theme === 'noir' ? 'rgba(10,10,10,0.8)' : 'rgba(13,14,20,0.8)',
+        borderTopLeftRadius: 4,
+        userSelect: 'none',
+      }}>
+        Ln {cursorPos.line}, Col {cursorPos.col}
+      </div>
+    </div>
+  );
+}