From ae0bd17b4ae84ae7aee962ae83a39396d695de28 Mon Sep 17 00:00:00 2001
From: DreamTeam Mobile <contact@dreamteam-mobile.com>
Date: Thu, 19 Feb 2026 21:22:00 -0800
Subject: [PATCH 1/2] Add multi-language code execution (Python, C/C++, Go,
 Ruby, Lua)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Expand in-browser code execution from JS/TS-only to 7 languages using
a persistent Web Worker architecture with lazy-loaded runtimes.

New language runtimes:
- Python: Pyodide (CPython compiled to WASM, ~5MB from jsDelivr CDN)
- C/C++: Compiler Explorer / Godbolt API (GCC 14.2, server-side compilation)
- Go: Go Playground API (play.golang.org/compile, server-side compilation)
- Ruby: ruby.wasm (@ruby/3.3-wasm-wasi, ~36MB WASM from jsDelivr CDN)
- Lua: Wasmoon (Lua 5.4 compiled to WASM, ~300KB)

Architecture:
- Persistent workers per language (loaded once, reused across executions)
- Lazy loading: no WASM downloaded until user selects a language
- Progress tracking for large downloads (Python, Ruby) via fetch interception
- Runtime status store (Zustand) drives UI state for run button and output panel

UI changes:
- Run button shows progress ring while runtime downloads, error icon on failure
- Output panel shows download progress percentage for WASM runtimes
- Language selector triggers background preload on switch
- All executable languages marked with ▶ prefix in dropdown
- Lua added as 16th language option with Prism syntax highlighting

Fixes:
- Vite optimizeDeps.include prevents page reload on first worker dep import
---
 package-lock.json                             |  67 ++++++-
 package.json                                  |   3 +
 src/__tests__/LanguageSelector.test.tsx       |  10 +-
 src/components/CodeEditor/CodeEditor.tsx      |   1 +
 .../CodeEditor/LanguageSelector.tsx           |  13 +-
 src/components/CodeEditor/OutputPanel.tsx     |  39 +++-
 src/components/TabBar.tsx                     |  54 +++++-
 src/hooks/useExecutionSync.ts                 |  47 ++++-
 src/services/code-editor-logic.ts             |   1 +
 src/services/code-executor.ts                 |  20 +-
 src/services/runtimes/cpp.worker.ts           | 143 ++++++++++++++
 src/services/runtimes/go.worker.ts            | 122 ++++++++++++
 src/services/runtimes/lua.worker.ts           |  96 ++++++++++
 src/services/runtimes/python.worker.ts        | 127 ++++++++++++
 src/services/runtimes/ruby.worker.ts          | 149 +++++++++++++++
 src/services/wasm-runtime-manager.ts          | 180 ++++++++++++++++++
 src/stores/runtimeStore.ts                    |  72 +++++++
 src/styles.css                                |  34 ++++
 vite.config.ts                                |   8 +
 19 files changed, 1162 insertions(+), 24 deletions(-)
 create mode 100644 src/services/runtimes/cpp.worker.ts
 create mode 100644 src/services/runtimes/go.worker.ts
 create mode 100644 src/services/runtimes/lua.worker.ts
 create mode 100644 src/services/runtimes/python.worker.ts
 create mode 100644 src/services/runtimes/ruby.worker.ts
 create mode 100644 src/services/wasm-runtime-manager.ts
 create mode 100644 src/stores/runtimeStore.ts

diff --git a/package-lock.json b/package-lock.json
index 82a1552..c101dd0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,21 @@
 {
   "name": "duocode",
-  "version": "2.1.0",
+  "version": "2.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "duocode",
-      "version": "2.1.0",
+      "version": "2.4.0",
       "license": "UNLICENSED",
       "dependencies": {
+        "@ruby/wasm-wasi": "^2.8.1",
         "jspdf": "^2.5.2",
         "prismjs": "^1.29.0",
+        "pyodide": "^0.29.3",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
+        "wasmoon": "^1.16.0",
         "zustand": "^5.0.11"
       },
       "devDependencies": {
@@ -470,6 +473,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/@bjorn3/browser_wasi_shim": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@bjorn3/browser_wasi_shim/-/browser_wasi_shim-0.3.0.tgz",
+      "integrity": "sha512-FlRBYttPRLcWORzBe6g8nmYTafBkOEFeOqMYM4tAHJzFsQy4+xJA94z85a9BCs8S+Uzfh9LrkpII7DXr2iUVFg==",
+      "license": "MIT OR Apache-2.0"
+    },
     "node_modules/@csstools/color-helpers": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
@@ -1495,6 +1504,16 @@
         "win32"
       ]
     },
+    "node_modules/@ruby/wasm-wasi": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/@ruby/wasm-wasi/-/wasm-wasi-2.8.1.tgz",
+      "integrity": "sha512-xtisFn9V2U45nE2goni9UAd8LERHAzwFEsQk3+mG6+hXf4imYfDRRXnBqX6jERR0rysCH15IDzEkxjMQmIZ3qA==",
+      "license": "MIT",
+      "dependencies": {
+        "@bjorn3/browser_wasi_shim": "^0.3.0",
+        "tslib": "^2.8.1"
+      }
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
@@ -1649,6 +1668,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/emscripten": {
+      "version": "1.41.5",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.41.5.tgz",
+      "integrity": "sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -3684,6 +3709,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/pyodide": {
+      "version": "0.29.3",
+      "resolved": "https://registry.npmjs.org/pyodide/-/pyodide-0.29.3.tgz",
+      "integrity": "sha512-22UBuhOJawj7vKUnS7/F3xK+515LJdjiMAHoCfuS6/PbHiOrSQVnYwDe+2sbVwiOZ3sMMexdXICew6NqOMQGgA==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "@types/emscripten": "^1.41.4",
+        "ws": "^8.5.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -4267,6 +4305,12 @@
         "node": ">=20"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-fest": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
@@ -4539,6 +4583,24 @@
         "node": ">=18"
       }
     },
+    "node_modules/wasmoon": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/wasmoon/-/wasmoon-1.16.0.tgz",
+      "integrity": "sha512-FlRLb15WwAOz1A9OQDbf6oOKKSiefi5VK0ZRF2wgH9xk3o5SnU11tNPaOnQuAh1Ucr66cwwvVXaeVRaFdRBt5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/emscripten": "1.39.10"
+      },
+      "bin": {
+        "wasmoon": "bin/wasmoon"
+      }
+    },
+    "node_modules/wasmoon/node_modules/@types/emscripten": {
+      "version": "1.39.10",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.10.tgz",
+      "integrity": "sha512-TB/6hBkYQJxsZHSqyeuO1Jt0AB/bW6G7rHt9g7lML7SOF6lbgcHvw/Lr+69iqN0qxgXLhWKScAon73JNnptuDw==",
+      "license": "MIT"
+    },
     "node_modules/webidl-conversions": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
@@ -4644,7 +4706,6 @@
       "version": "8.19.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
       "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
diff --git a/package.json b/package.json
index 3056987..2eca813 100644
--- a/package.json
+++ b/package.json
@@ -28,10 +28,13 @@
   "author": "DreamTeam Mobile <contact@dreamteam-mobile.com>",
   "license": "UNLICENSED",
   "dependencies": {
+    "@ruby/wasm-wasi": "^2.8.1",
     "jspdf": "^2.5.2",
     "prismjs": "^1.29.0",
+    "pyodide": "^0.29.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "wasmoon": "^1.16.0",
     "zustand": "^5.0.11"
   },
   "devDependencies": {
diff --git a/src/__tests__/LanguageSelector.test.tsx b/src/__tests__/LanguageSelector.test.tsx
index 6a8ee72..589a8e7 100644
--- a/src/__tests__/LanguageSelector.test.tsx
+++ b/src/__tests__/LanguageSelector.test.tsx
@@ -15,19 +15,19 @@ describe('LanguageSelector', () => {
     expect(select.value).toBe('javascript');
   });
 
-  it('renders all 15 supported languages', () => {
+  it('renders all 16 supported languages', () => {
     const { container } = render(<LanguageSelector />);
     const options = container.querySelectorAll('option');
-    expect(options).toHaveLength(15);
+    expect(options).toHaveLength(16);
   });
 
   it('displays human-readable labels', () => {
     const { getByText } = render(<LanguageSelector />);
-    // Executable languages get a ▶ prefix
+    // Executable languages get a ▶ prefix (JS, TS, Python, C, C++, Go, Ruby, Lua)
     expect(getByText(/JavaScript/)).toBeInTheDocument();
     expect(getByText(/TypeScript/)).toBeInTheDocument();
-    expect(getByText('Python')).toBeInTheDocument();
-    expect(getByText('C++')).toBeInTheDocument();
+    expect(getByText(/Python/)).toBeInTheDocument();
+    expect(getByText(/C\+\+/)).toBeInTheDocument();
     expect(getByText('C#')).toBeInTheDocument();
   });
 
diff --git a/src/components/CodeEditor/CodeEditor.tsx b/src/components/CodeEditor/CodeEditor.tsx
index 5c37e2c..7d57dd5 100644
--- a/src/components/CodeEditor/CodeEditor.tsx
+++ b/src/components/CodeEditor/CodeEditor.tsx
@@ -10,6 +10,7 @@ import 'prismjs/components/prism-csharp';
 import 'prismjs/components/prism-go';
 import 'prismjs/components/prism-rust';
 import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-lua';
 import 'prismjs/components/prism-swift';
 import 'prismjs/components/prism-scala';
 import 'prismjs/components/prism-markup';
diff --git a/src/components/CodeEditor/LanguageSelector.tsx b/src/components/CodeEditor/LanguageSelector.tsx
index 5645788..07f8c8d 100644
--- a/src/components/CodeEditor/LanguageSelector.tsx
+++ b/src/components/CodeEditor/LanguageSelector.tsx
@@ -1,6 +1,6 @@
 import { useEditorStore } from '../../stores/editorStore';
 import { codeTemplates } from '../../services/code-editor-logic';
-import { isExecutable } from '../../services/code-executor';
+import { isExecutable, isWasmLanguage, preloadRuntime } from '../../services/code-executor';
 
 const LANGUAGES = Object.keys(codeTemplates);
 
@@ -16,6 +16,7 @@ const LANGUAGE_LABELS: Record<string, string> = {
   go: 'Go',
   rust: 'Rust',
   ruby: 'Ruby',
+  lua: 'Lua',
   swift: 'Swift',
   scala: 'Scala',
   php: 'PHP',
@@ -26,11 +27,19 @@ export default function LanguageSelector() {
   const language = useEditorStore((s) => s.language);
   const setLanguage = useEditorStore((s) => s.setLanguage);
 
+  const handleChange = (newLang: string) => {
+    setLanguage(newLang);
+    // Start preloading WASM runtime in background when user switches
+    if (isWasmLanguage(newLang)) {
+      preloadRuntime(newLang);
+    }
+  };
+
   return (
     <div id="languageSelector">
       <select
         value={language}
-        onChange={(e) => setLanguage(e.target.value)}
+        onChange={(e) => handleChange(e.target.value)}
         aria-label="Select language"
       >
         {LANGUAGES.map((lang) => (
diff --git a/src/components/CodeEditor/OutputPanel.tsx b/src/components/CodeEditor/OutputPanel.tsx
index 2f896d3..91e77c8 100644
--- a/src/components/CodeEditor/OutputPanel.tsx
+++ b/src/components/CodeEditor/OutputPanel.tsx
@@ -1,7 +1,17 @@
 import { useRef, useEffect } from 'react';
 import { useExecutionStore } from '../../stores/executionStore';
 import { useEditorStore } from '../../stores/editorStore';
-import { isExecutable } from '../../services/code-executor';
+import { useRuntimeStore } from '../../stores/runtimeStore';
+import { isExecutable, isWasmLanguage } from '../../services/code-executor';
+
+const LANGUAGE_NAMES: Record<string, string> = {
+  python: 'Python',
+  c: 'C',
+  cpp: 'C++',
+  go: 'Go',
+  ruby: 'Ruby',
+  lua: 'Lua',
+};
 
 export default function OutputPanel() {
   const isRunning = useExecutionStore((s) => s.isRunning);
@@ -9,8 +19,12 @@ export default function OutputPanel() {
   const panelExpanded = useExecutionStore((s) => s.panelExpanded);
   const togglePanel = useExecutionStore((s) => s.togglePanel);
   const language = useEditorStore((s) => s.language);
+  const runtimeInfo = useRuntimeStore((s) => s.getRuntime(language === 'c' ? 'cpp' : language));
   const outputRef = useRef<HTMLPreElement>(null);
 
+  const isWasm = isWasmLanguage(language);
+  const isLoading = isWasm && runtimeInfo.status === 'loading';
+
   // Auto-scroll to bottom when output changes
   useEffect(() => {
     if (outputRef.current && panelExpanded) {
@@ -18,17 +32,20 @@ export default function OutputPanel() {
     }
   }, [output, panelExpanded]);
 
-  // Hide when language doesn't support execution, or no output and not running
-  if (!isExecutable(language) || (!output && !isRunning)) return null;
+  // Hide when language doesn't support execution, or no output/loading/running
+  if (!isExecutable(language) || (!output && !isRunning && !isLoading)) return null;
 
   const hasError = output && output.exitCode !== 0;
   const hasOutput = output && (output.stdout || output.stderr);
+  const langName = LANGUAGE_NAMES[language] || language;
 
   return (
     <div className={`output-panel${panelExpanded ? ' expanded' : ' collapsed'}`}>
       <div className="output-header" onClick={togglePanel}>
         <div className="output-header-left">
-          {isRunning ? (
+          {isLoading ? (
+            <span className="output-spinner" />
+          ) : isRunning ? (
             <span className="output-spinner" />
           ) : output ? (
             <span className={`output-status-icon ${hasError ? 'error' : 'success'}`}>
@@ -39,7 +56,12 @@ export default function OutputPanel() {
           {output && (
             <span className="output-duration">{output.duration}ms</span>
           )}
-          {isRunning && (
+          {isLoading && (
+            <span className="output-running-label">
+              Downloading {langName} runtime... {runtimeInfo.progress > 0 ? `${runtimeInfo.progress}%` : ''}
+            </span>
+          )}
+          {isRunning && !isLoading && (
             <span className="output-running-label">Running...</span>
           )}
         </div>
@@ -60,7 +82,12 @@ export default function OutputPanel() {
       </div>
       {panelExpanded && (
         <pre className="output-body" ref={outputRef}>
-          {isRunning && !hasOutput && (
+          {isLoading && !hasOutput && (
+            <span className="output-placeholder">
+              Loading {langName} runtime... {runtimeInfo.progress > 0 ? `${runtimeInfo.progress}%` : 'please wait'}
+            </span>
+          )}
+          {isRunning && !hasOutput && !isLoading && (
             <span className="output-placeholder">Executing...</span>
           )}
           {output?.stdout && (
diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx
index 047e664..a595c15 100644
--- a/src/components/TabBar.tsx
+++ b/src/components/TabBar.tsx
@@ -1,7 +1,8 @@
 import { useUIStore } from '../stores/uiStore';
 import { useEditorStore } from '../stores/editorStore';
 import { useExecutionStore } from '../stores/executionStore';
-import { isExecutable } from '../services/code-executor';
+import { useRuntimeStore } from '../stores/runtimeStore';
+import { isExecutable, isWasmLanguage } from '../services/code-executor';
 import LanguageSelector from './CodeEditor/LanguageSelector';
 
 export default function TabBar() {
@@ -11,8 +12,18 @@ export default function TabBar() {
   const isRunning = useExecutionStore((s) => s.isRunning);
   const runCode = useExecutionStore((s) => s.runCode);
   const cancelCode = useExecutionStore((s) => s.cancelCode);
+  const runtimeInfo = useRuntimeStore((s) => s.getRuntime(language === 'c' ? 'cpp' : language));
 
   const showRunButton = activeTab === 'code' && isExecutable(language);
+  const isWasm = isWasmLanguage(language);
+  const isLoading = isWasm && runtimeInfo.status === 'loading';
+  const hasError = isWasm && runtimeInfo.status === 'error';
+  const progress = runtimeInfo.progress;
+
+  // SVG progress ring params
+  const radius = 6;
+  const circumference = 2 * Math.PI * radius;
+  const strokeOffset = circumference - (progress / 100) * circumference;
 
   return (
     <div id="tabBarWrapper">
@@ -43,6 +54,47 @@ export default function TabBar() {
               <rect x="3" y="3" width="10" height="10" rx="1" />
             </svg>
           </button>
+        ) : isLoading ? (
+          <button
+            className="icon-btn run-btn loading"
+            disabled
+            title={`Loading runtime... ${progress}%`}
+            aria-label={`Loading runtime ${progress}%`}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16">
+              {/* Background circle */}
+              <circle
+                cx="8" cy="8" r={radius}
+                fill="none"
+                stroke="var(--text-secondary)"
+                strokeWidth="2"
+                opacity="0.3"
+              />
+              {/* Progress arc */}
+              <circle
+                cx="8" cy="8" r={radius}
+                fill="none"
+                stroke="var(--accent)"
+                strokeWidth="2"
+                strokeDasharray={circumference}
+                strokeDashoffset={progress > 0 ? strokeOffset : 0}
+                strokeLinecap="round"
+                transform="rotate(-90 8 8)"
+                className={progress === 0 ? 'progress-ring-indeterminate' : ''}
+              />
+            </svg>
+          </button>
+        ) : hasError ? (
+          <button
+            className="icon-btn run-btn error"
+            onClick={() => runCode?.()}
+            title={`Runtime error — click to retry: ${runtimeInfo.error ?? ''}`}
+            aria-label="Retry loading runtime"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="var(--danger)">
+              <path d="M8 1l7 14H1L8 1zm0 5v4m0 2v1" fill="none" stroke="var(--danger)" strokeWidth="1.5" strokeLinecap="round" />
+            </svg>
+          </button>
         ) : (
           <button
             className="icon-btn run-btn"
diff --git a/src/hooks/useExecutionSync.ts b/src/hooks/useExecutionSync.ts
index cd1d376..1fd9bcf 100644
--- a/src/hooks/useExecutionSync.ts
+++ b/src/hooks/useExecutionSync.ts
@@ -1,7 +1,9 @@
 import { useCallback, useEffect } from 'react';
 import { useExecutionStore } from '../stores/executionStore';
 import { useEditorStore } from '../stores/editorStore';
-import { runCode, stopExecution as stopWorker, isExecutable } from '../services/code-executor';
+import { runCode, stopExecution as stopWorker, isExecutable, isWasmLanguage, preloadRuntime } from '../services/code-executor';
+import { stopWasmExecution } from '../services/wasm-runtime-manager';
+import { useRuntimeStore } from '../stores/runtimeStore';
 import type { DataChannelMessage } from '../services/connection-manager';
 
 interface UseExecutionSyncOptions {
@@ -18,6 +20,7 @@ interface UseExecutionSyncReturn {
  * - executeCode() reads the current editor code/language, runs it in a Worker,
  *   broadcasts execution-start and execution-result to peers.
  * - handleMessage() receives execution events from peers and updates the store.
+ * - Preloads WASM runtimes when the user switches to a WASM language.
  */
 export function useExecutionSync({
   sendMessage,
@@ -26,11 +29,46 @@ export function useExecutionSync({
   const setResult = useExecutionStore((s) => s.setResult);
   const stopExecution = useExecutionStore((s) => s.stopExecution);
   const setCallbacks = useExecutionStore((s) => s.setCallbacks);
+  const language = useEditorStore((s) => s.language);
+
+  // Preload WASM runtime when user switches to a WASM language
+  useEffect(() => {
+    if (isWasmLanguage(language)) {
+      preloadRuntime(language);
+    }
+  }, [language]);
 
   const executeCode = useCallback(async () => {
     const { code, language } = useEditorStore.getState();
     if (!isExecutable(language)) return;
 
+    // For WASM languages, ensure runtime is loaded before executing
+    if (isWasmLanguage(language)) {
+      const runtimeInfo = useRuntimeStore.getState().getRuntime(language === 'c' ? 'cpp' : language);
+      if (runtimeInfo.status === 'idle' || runtimeInfo.status === 'error') {
+        // Trigger preload and inform user
+        preloadRuntime(language);
+        const errorResult = {
+          stdout: '',
+          stderr: 'Runtime is loading... Please try again in a moment.',
+          exitCode: 1,
+          duration: 0,
+        };
+        setResult(errorResult);
+        return;
+      }
+      if (runtimeInfo.status === 'loading') {
+        const errorResult = {
+          stdout: '',
+          stderr: 'Runtime is still loading... Please wait.',
+          exitCode: 1,
+          duration: 0,
+        };
+        setResult(errorResult);
+        return;
+      }
+    }
+
     startExecution();
 
     if (sendMessage) {
@@ -73,7 +111,12 @@ export function useExecutionSync({
   }, [sendMessage, startExecution, setResult]);
 
   const cancelExecution = useCallback(() => {
-    stopWorker();
+    const { language } = useEditorStore.getState();
+    if (isWasmLanguage(language)) {
+      stopWasmExecution(language);
+    } else {
+      stopWorker();
+    }
     stopExecution();
   }, [stopExecution]);
 
diff --git a/src/services/code-editor-logic.ts b/src/services/code-editor-logic.ts
index c46504e..4d01b28 100644
--- a/src/services/code-editor-logic.ts
+++ b/src/services/code-editor-logic.ts
@@ -30,6 +30,7 @@ export const codeTemplates: Record<string, string> = {
     ruby: '# Write your code here\nputs "Hello, World!"',
     swift: '// Write your code here\nimport Foundation\n\nprint("Hello, World!")',
     scala: '// Write your code here\nobject Main extends App {\n    println("Hello, World!")\n}',
+    lua: '-- Write your code here\nprint("Hello, World!")',
     php: '<?php\n// Write your code here\necho "Hello, World!";',
     sql: '-- Write your SQL query here\nSELECT * FROM users WHERE id = 1;'
 };
diff --git a/src/services/code-executor.ts b/src/services/code-executor.ts
index 6ab7267..35bca06 100644
--- a/src/services/code-executor.ts
+++ b/src/services/code-executor.ts
@@ -1,17 +1,21 @@
 /**
- * code-executor.ts — Framework-agnostic service for running JS/TS code
- * in a sandboxed Web Worker.
+ * code-executor.ts — Framework-agnostic service for running code.
+ *
+ * JS/TS: sandboxed Web Worker (fresh per execution).
+ * WASM languages (Python, C/C++, Go, Ruby, Lua): persistent workers via wasm-runtime-manager.
  */
 
 import type { ExecutionResult } from '../stores/executionStore';
+import { isWasmLanguage, executeWasm, stopWasmExecution, preloadRuntime } from './wasm-runtime-manager';
 
-const EXECUTABLE_LANGUAGES = new Set(['javascript', 'typescript']);
+const JS_LANGUAGES = new Set(['javascript', 'typescript']);
+const WASM_LANGUAGES = new Set(['python', 'c', 'cpp', 'go', 'ruby', 'lua']);
 
 let worker: Worker | null = null;
 let currentReject: ((reason: string) => void) | null = null;
 
 export function isExecutable(language: string): boolean {
-  return EXECUTABLE_LANGUAGES.has(language);
+  return JS_LANGUAGES.has(language) || WASM_LANGUAGES.has(language);
 }
 
 export function runCode(
@@ -19,7 +23,11 @@ export function runCode(
   language: string,
   timeout = 10_000,
 ): Promise<ExecutionResult> {
-  // Terminate any in-progress run
+  if (isWasmLanguage(language)) {
+    return executeWasm(language, code, timeout);
+  }
+
+  // JS/TS: fresh worker per execution
   terminateWorker();
 
   return new Promise<ExecutionResult>((resolve, reject) => {
@@ -53,6 +61,8 @@ export function stopExecution(): void {
   terminateWorker();
 }
 
+export { preloadRuntime, isWasmLanguage } from './wasm-runtime-manager';
+
 function terminateWorker(): void {
   if (worker) {
     worker.terminate();
diff --git a/src/services/runtimes/cpp.worker.ts b/src/services/runtimes/cpp.worker.ts
new file mode 100644
index 0000000..fcf7d3f
--- /dev/null
+++ b/src/services/runtimes/cpp.worker.ts
@@ -0,0 +1,143 @@
+/**
+ * cpp.worker.ts — C/C++ execution via the Compiler Explorer (Godbolt) API.
+ *
+ * Uses the Godbolt REST API to compile and execute C/C++ code server-side.
+ * No WASM binary needed — requires internet (same as WebRTC).
+ */
+
+const GODBOLT_API = 'https://godbolt.org/api/compiler';
+
+// GCC 14.2 for C++ and C
+const COMPILERS: Record<string, string> = {
+  cpp: 'g142',
+  c: 'cg142',
+};
+
+self.onmessage = async (event: MessageEvent) => {
+  const { data } = event;
+
+  if (data.type === 'init') {
+    // No runtime to download — compiles server-side via Godbolt.
+    // Verify connectivity with a quick test.
+    try {
+      const response = await fetch(`${GODBOLT_API}/${COMPILERS.cpp}/compile`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+        },
+        body: JSON.stringify({
+          source: 'int main() { return 0; }',
+          options: {
+            userArguments: '-O2',
+            compilerOptions: { executorRequest: true },
+            filters: { execute: true },
+          },
+        }),
+      });
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      self.postMessage({ type: 'ready' });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      self.postMessage({ type: 'error', error: `Compiler Explorer unavailable: ${message}` });
+    }
+    return;
+  }
+
+  if (data.type === 'run') {
+    const { code, language = 'cpp', timeout = 15000 } = data;
+    const start = performance.now();
+    const compilerId = COMPILERS[language] || COMPILERS.cpp;
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+    try {
+      const response = await fetch(`${GODBOLT_API}/${compilerId}/compile`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+        },
+        body: JSON.stringify({
+          source: code,
+          options: {
+            userArguments: '-O2',
+            compilerOptions: { executorRequest: true },
+            filters: { execute: true },
+          },
+        }),
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+      const duration = Math.round(performance.now() - start);
+
+      if (!response.ok) {
+        self.postMessage({
+          type: 'result',
+          stdout: '',
+          stderr: `Compiler Explorer returned HTTP ${response.status}`,
+          exitCode: 1,
+          duration,
+        });
+        return;
+      }
+
+      const result = await response.json();
+
+      // Build errors (compilation failed)
+      if (result.buildResult && result.buildResult.code !== 0) {
+        const stderr = (result.buildResult.stderr || [])
+          .map((e: { text: string }) => e.text.replace(/\x1b\[[0-9;]*m/g, ''))
+          .join('\n');
+        self.postMessage({
+          type: 'result',
+          stdout: '',
+          stderr: stderr || 'Compilation failed',
+          exitCode: 1,
+          duration,
+        });
+        return;
+      }
+
+      // Execution result
+      const stdout = (result.stdout || [])
+        .map((e: { text: string }) => e.text)
+        .join('\n');
+      const stderr = (result.stderr || [])
+        .map((e: { text: string }) => e.text.replace(/\x1b\[[0-9;]*m/g, ''))
+        .join('\n');
+
+      self.postMessage({
+        type: 'result',
+        stdout,
+        stderr,
+        exitCode: result.code ?? 0,
+        duration,
+      });
+    } catch (error: unknown) {
+      clearTimeout(timeoutId);
+      const duration = Math.round(performance.now() - start);
+
+      if (error instanceof DOMException && error.name === 'AbortError') {
+        self.postMessage({
+          type: 'result',
+          stdout: '',
+          stderr: `[Execution timed out after ${timeout / 1000}s]`,
+          exitCode: 1,
+          duration,
+        });
+      } else {
+        const message = error instanceof Error ? error.message : String(error);
+        self.postMessage({
+          type: 'result',
+          stdout: '',
+          stderr: `Compiler Explorer error: ${message}`,
+          exitCode: 1,
+          duration,
+        });
+      }
+    }
+  }
+};
diff --git a/src/services/runtimes/go.worker.ts b/src/services/runtimes/go.worker.ts
new file mode 100644
index 0000000..c2afb70
--- /dev/null
+++ b/src/services/runtimes/go.worker.ts
@@ -0,0 +1,122 @@
+/**
+ * go.worker.ts — Go execution via the Go Playground API.
+ *
+ * Uses the official Go Playground compile endpoint (play.golang.org/compile)
+ * which has full CORS support. No WASM binary needed — requires internet.
+ */
+
+const GO_PLAYGROUND_URL = 'https://play.golang.org/compile';
+
+self.onmessage = async (event: MessageEvent) => {
+  const { data } = event;
+
+  if (data.type === 'init') {
+    // No runtime to download — Go compiles server-side via Playground API.
+    // Just verify connectivity with a quick test.
+    try {
+      const response = await fetch(GO_PLAYGROUND_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: new URLSearchParams({ body: 'package main\nfunc main() {}', version: '2' }),
+      });
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      self.postMessage({ type: 'ready' });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      self.postMessage({ type: 'error', error: `Go Playground unavailable: ${message}` });
+    }
+    return;
+  }
+
+  if (data.type === 'run') {
+    const { code, timeout = 15000 } = data;
+    const start = performance.now();
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+    try {
+      const response = await fetch(GO_PLAYGROUND_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: new URLSearchParams({ body: code, version: '2' }),
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+      const duration = Math.round(performance.now() - start);
+
+      if (!response.ok) {
+        self.postMessage({
+          type: 'result',
+          stdout: '',
+          stderr: `Go Playground returned HTTP ${response.status}`,
+          exitCode: 1,
+          duration,
+        });
+        return;
+      }
+
+      const result = await response.json();
+
+      // Compile errors
+      if (result.Errors) {
+        self.postMessage({
+          type: 'result',
+          stdout: '',
+          stderr: result.Errors,
+          exitCode: 1,
+          duration,
+        });
+        return;
+      }
+
+      // Parse events into stdout/stderr
+      let stdout = '';
+      let stderr = '';
+
+      if (result.Events) {
+        for (const event of result.Events) {
+          if (event.Kind === 'stdout') {
+            stdout += event.Message;
+          } else if (event.Kind === 'stderr') {
+            stderr += event.Message;
+          } else {
+            // Default to stdout for unknown kinds
+            stdout += event.Message;
+          }
+        }
+      }
+
+      self.postMessage({
+        type: 'result',
+        stdout,
+        stderr,
+        exitCode: result.Status ?? 0,
+        duration,
+      });
+    } catch (error: unknown) {
+      clearTimeout(timeoutId);
+      const duration = Math.round(performance.now() - start);
+
+      if (error instanceof DOMException && error.name === 'AbortError') {
+        self.postMessage({
+          type: 'result',
+          stdout: '',
+          stderr: `[Execution timed out after ${timeout / 1000}s]`,
+          exitCode: 1,
+          duration,
+        });
+      } else {
+        const message = error instanceof Error ? error.message : String(error);
+        self.postMessage({
+          type: 'result',
+          stdout: '',
+          stderr: `Go Playground error: ${message}`,
+          exitCode: 1,
+          duration,
+        });
+      }
+    }
+  }
+};
diff --git a/src/services/runtimes/lua.worker.ts b/src/services/runtimes/lua.worker.ts
new file mode 100644
index 0000000..1f5e004
--- /dev/null
+++ b/src/services/runtimes/lua.worker.ts
@@ -0,0 +1,96 @@
+/**
+ * lua.worker.ts — Wasmoon-based Lua execution in a Web Worker.
+ *
+ * Uses Wasmoon (Lua 5.4 compiled to WASM, ~300KB) for Lua code execution.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let luaFactory: any = null;
+
+self.onmessage = async (event: MessageEvent) => {
+  const { data } = event;
+
+  if (data.type === 'init') {
+    try {
+      const { LuaFactory } = await import('wasmoon');
+      luaFactory = new LuaFactory();
+      // Pre-create an engine to verify the WASM loads correctly
+      const testEngine = await luaFactory.createEngine();
+      testEngine.global.close();
+      self.postMessage({ type: 'ready' });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      self.postMessage({ type: 'error', error: `Failed to load Lua runtime: ${message}` });
+    }
+    return;
+  }
+
+  if (data.type === 'run') {
+    if (!luaFactory) {
+      self.postMessage({ type: 'error', error: 'Lua runtime not initialized' });
+      return;
+    }
+
+    const { code, timeout = 10000 } = data;
+    const stdoutLines: string[] = [];
+    const stderrLines: string[] = [];
+    const start = performance.now();
+
+    const timeoutId = setTimeout(() => {
+      const duration = Math.round(performance.now() - start);
+      self.postMessage({
+        type: 'result',
+        stdout: stdoutLines.join('\n'),
+        stderr: stderrLines.join('\n') + `\n[Execution timed out after ${timeout / 1000}s]`,
+        exitCode: 1,
+        duration,
+      });
+    }, timeout);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let engine: any = null;
+    try {
+      engine = await luaFactory.createEngine();
+
+      // Override print to capture output
+      engine.global.set('print', (...args: unknown[]) => {
+        stdoutLines.push(args.map(String).join('\t'));
+      });
+
+      // Override io.write for direct output
+      engine.global.set('io', {
+        write: (...args: unknown[]) => {
+          stdoutLines.push(args.map(String).join(''));
+        },
+      });
+
+      await engine.doString(code);
+      clearTimeout(timeoutId);
+      const duration = Math.round(performance.now() - start);
+
+      self.postMessage({
+        type: 'result',
+        stdout: stdoutLines.join('\n'),
+        stderr: stderrLines.join('\n'),
+        exitCode: 0,
+        duration,
+      });
+    } catch (error: unknown) {
+      clearTimeout(timeoutId);
+      const duration = Math.round(performance.now() - start);
+      const message = error instanceof Error ? error.message : String(error);
+
+      self.postMessage({
+        type: 'result',
+        stdout: stdoutLines.join('\n'),
+        stderr: stderrLines.join('\n') + (stderrLines.length ? '\n' : '') + message,
+        exitCode: 1,
+        duration,
+      });
+    } finally {
+      if (engine) {
+        try { engine.global.close(); } catch { /* ignore */ }
+      }
+    }
+  }
+};
diff --git a/src/services/runtimes/python.worker.ts b/src/services/runtimes/python.worker.ts
new file mode 100644
index 0000000..a254a6b
--- /dev/null
+++ b/src/services/runtimes/python.worker.ts
@@ -0,0 +1,127 @@
+/**
+ * python.worker.ts — Pyodide-based Python execution in a Web Worker.
+ *
+ * Uses the pyodide npm package which loads the WASM binary from CDN.
+ * Intercepts fetch to track download progress of the .wasm file.
+ */
+
+import type { loadPyodide as LoadPyodideType } from 'pyodide';
+
+type PyodideInterface = Awaited<ReturnType<typeof LoadPyodideType>>;
+
+const PYODIDE_CDN = 'https://cdn.jsdelivr.net/pyodide/v0.29.3/full/';
+
+let pyodide: PyodideInterface | null = null;
+
+// Intercept fetch to track .wasm download progress
+const originalFetch = globalThis.fetch;
+globalThis.fetch = async function (input: RequestInfo | URL, init?: RequestInit) {
+  const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+
+  if (url.endsWith('.wasm')) {
+    const response = await originalFetch(input, init);
+    const contentLength = Number(response.headers.get('content-length')) || 0;
+
+    if (!response.body || contentLength === 0) {
+      return response;
+    }
+
+    const reader = response.body.getReader();
+    const chunks: Uint8Array[] = [];
+    let loaded = 0;
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      chunks.push(value);
+      loaded += value.length;
+      self.postMessage({ type: 'progress', loaded, total: contentLength });
+    }
+
+    // Reconstruct response from chunks
+    const body = new Uint8Array(loaded);
+    let offset = 0;
+    for (const chunk of chunks) {
+      body.set(chunk, offset);
+      offset += chunk.length;
+    }
+
+    return new Response(body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: response.headers,
+    });
+  }
+
+  return originalFetch(input, init);
+};
+
+self.onmessage = async (event: MessageEvent) => {
+  const { data } = event;
+
+  if (data.type === 'init') {
+    try {
+      const { loadPyodide } = await import('pyodide');
+      pyodide = await loadPyodide({ indexURL: PYODIDE_CDN });
+      self.postMessage({ type: 'ready' });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      self.postMessage({ type: 'error', error: `Failed to load Python runtime: ${message}` });
+    }
+    return;
+  }
+
+  if (data.type === 'run') {
+    if (!pyodide) {
+      self.postMessage({ type: 'error', error: 'Python runtime not initialized' });
+      return;
+    }
+
+    const { code, timeout = 10000 } = data;
+    const stdoutLines: string[] = [];
+    const stderrLines: string[] = [];
+
+    pyodide.setStdout({ batched: (text: string) => stdoutLines.push(text) });
+    pyodide.setStderr({ batched: (text: string) => stderrLines.push(text) });
+
+    const start = performance.now();
+
+    // Timeout guard
+    const timeoutId = setTimeout(() => {
+      const duration = Math.round(performance.now() - start);
+      self.postMessage({
+        type: 'result',
+        stdout: stdoutLines.join('\n'),
+        stderr: stderrLines.join('\n') + `\n[Execution timed out after ${timeout / 1000}s]`,
+        exitCode: 1,
+        duration,
+      });
+    }, timeout);
+
+    try {
+      await pyodide.runPythonAsync(code);
+      clearTimeout(timeoutId);
+      const duration = Math.round(performance.now() - start);
+
+      self.postMessage({
+        type: 'result',
+        stdout: stdoutLines.join('\n'),
+        stderr: stderrLines.join('\n'),
+        exitCode: 0,
+        duration,
+      });
+    } catch (error: unknown) {
+      clearTimeout(timeoutId);
+      const duration = Math.round(performance.now() - start);
+      const message = error instanceof Error ? error.message : String(error);
+
+      self.postMessage({
+        type: 'result',
+        stdout: stdoutLines.join('\n'),
+        stderr: stderrLines.join('\n') + (stderrLines.length ? '\n' : '') + message,
+        exitCode: 1,
+        duration,
+      });
+    }
+  }
+};
diff --git a/src/services/runtimes/ruby.worker.ts b/src/services/runtimes/ruby.worker.ts
new file mode 100644
index 0000000..a4d0e50
--- /dev/null
+++ b/src/services/runtimes/ruby.worker.ts
@@ -0,0 +1,149 @@
+/**
+ * ruby.worker.ts — Ruby execution via ruby.wasm in a Web Worker.
+ *
+ * Downloads the Ruby WASM binary from CDN, initializes via DefaultRubyVM,
+ * and captures stdout/stderr by overriding console methods.
+ */
+
+const RUBY_WASM_URL = 'https://cdn.jsdelivr.net/npm/@ruby/3.3-wasm-wasi@2.8.1/dist/ruby+stdlib.wasm';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let rubyVM: any = null;
+
+// Capture console output (DefaultRubyVM routes puts/print → console.log)
+let capturedStdout: string[] = [];
+let capturedStderr: string[] = [];
+let capturing = false;
+
+const originalLog = console.log;
+const originalError = console.error;
+const originalWarn = console.warn;
+
+console.log = (...args: unknown[]) => {
+  if (capturing) {
+    capturedStdout.push(args.map(String).join(' '));
+  } else {
+    originalLog(...args);
+  }
+};
+
+console.error = (...args: unknown[]) => {
+  if (capturing) {
+    capturedStderr.push(args.map(String).join(' '));
+  } else {
+    originalError(...args);
+  }
+};
+
+console.warn = (...args: unknown[]) => {
+  if (capturing) {
+    capturedStderr.push(args.map(String).join(' '));
+  } else {
+    originalWarn(...args);
+  }
+};
+
+async function fetchWithProgress(url: string): Promise<ArrayBuffer> {
+  const response = await fetch(url);
+  const contentLength = Number(response.headers.get('content-length')) || 0;
+
+  if (!response.body || contentLength === 0) {
+    return response.arrayBuffer();
+  }
+
+  const reader = response.body.getReader();
+  const chunks: Uint8Array[] = [];
+  let loaded = 0;
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    chunks.push(value);
+    loaded += value.length;
+    self.postMessage({ type: 'progress', loaded, total: contentLength });
+  }
+
+  const result = new Uint8Array(loaded);
+  let offset = 0;
+  for (const chunk of chunks) {
+    result.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return result.buffer;
+}
+
+self.onmessage = async (event: MessageEvent) => {
+  const { data } = event;
+
+  if (data.type === 'init') {
+    try {
+      // Download WASM binary with progress tracking
+      const wasmBuffer = await fetchWithProgress(RUBY_WASM_URL);
+      const module = await WebAssembly.compile(wasmBuffer);
+
+      // Import DefaultRubyVM from the browser entry
+      const { DefaultRubyVM } = await import('@ruby/wasm-wasi/dist/browser');
+      const { vm } = await DefaultRubyVM(module, { consolePrint: true });
+      rubyVM = vm;
+
+      self.postMessage({ type: 'ready' });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      self.postMessage({ type: 'error', error: `Failed to load Ruby runtime: ${message}` });
+    }
+    return;
+  }
+
+  if (data.type === 'run') {
+    if (!rubyVM) {
+      self.postMessage({ type: 'error', error: 'Ruby runtime not initialized' });
+      return;
+    }
+
+    const { code, timeout = 10000 } = data;
+    capturedStdout = [];
+    capturedStderr = [];
+    capturing = true;
+
+    const start = performance.now();
+    const timeoutId = setTimeout(() => {
+      capturing = false;
+      const duration = Math.round(performance.now() - start);
+      self.postMessage({
+        type: 'result',
+        stdout: capturedStdout.join('\n'),
+        stderr: capturedStderr.join('\n') + `\n[Execution timed out after ${timeout / 1000}s]`,
+        exitCode: 1,
+        duration,
+      });
+    }, timeout);
+
+    try {
+      rubyVM.eval(code);
+      clearTimeout(timeoutId);
+      capturing = false;
+      const duration = Math.round(performance.now() - start);
+
+      self.postMessage({
+        type: 'result',
+        stdout: capturedStdout.join('\n'),
+        stderr: capturedStderr.join('\n'),
+        exitCode: 0,
+        duration,
+      });
+    } catch (error: unknown) {
+      clearTimeout(timeoutId);
+      capturing = false;
+      const duration = Math.round(performance.now() - start);
+      const message = error instanceof Error ? error.message : String(error);
+
+      self.postMessage({
+        type: 'result',
+        stdout: capturedStdout.join('\n'),
+        stderr: capturedStderr.join('\n') + (capturedStderr.length ? '\n' : '') + message,
+        exitCode: 1,
+        duration,
+      });
+    }
+  }
+};
diff --git a/src/services/wasm-runtime-manager.ts b/src/services/wasm-runtime-manager.ts
new file mode 100644
index 0000000..74870ce
--- /dev/null
+++ b/src/services/wasm-runtime-manager.ts
@@ -0,0 +1,180 @@
+/**
+ * wasm-runtime-manager.ts — Central orchestrator for WASM language runtimes.
+ *
+ * Manages persistent Web Workers per language. Each worker loads its runtime
+ * once and accepts multiple run messages. Progress is tracked and exposed
+ * via the runtimeStore.
+ */
+
+import type { ExecutionResult } from '../stores/executionStore';
+import { useRuntimeStore } from '../stores/runtimeStore';
+
+// Languages supported via WASM/external runtimes (not native JS)
+const WASM_LANGUAGES = new Set(['python', 'c', 'cpp', 'go', 'ruby', 'lua']);
+
+// Worker factory map — uses Vite's `new Worker(new URL(...))` pattern for code splitting
+function createWorker(lang: string): Worker {
+  switch (lang) {
+    case 'python':
+      return new Worker(new URL('./runtimes/python.worker.ts', import.meta.url), { type: 'module' });
+    case 'c':
+    case 'cpp':
+      return new Worker(new URL('./runtimes/cpp.worker.ts', import.meta.url), { type: 'module' });
+    case 'go':
+      return new Worker(new URL('./runtimes/go.worker.ts', import.meta.url), { type: 'module' });
+    case 'ruby':
+      return new Worker(new URL('./runtimes/ruby.worker.ts', import.meta.url), { type: 'module' });
+    case 'lua':
+      return new Worker(new URL('./runtimes/lua.worker.ts', import.meta.url), { type: 'module' });
+    default:
+      throw new Error(`No WASM runtime for language: ${lang}`);
+  }
+}
+
+// Canonical language key (c and cpp share a worker, but we track them separately)
+function workerKey(lang: string): string {
+  return lang === 'c' ? 'cpp' : lang;
+}
+
+interface WorkerEntry {
+  worker: Worker;
+  ready: boolean;
+  pendingRun: {
+    resolve: (result: ExecutionResult) => void;
+    reject: (reason: string) => void;
+  } | null;
+}
+
+const workers = new Map<string, WorkerEntry>();
+
+export function isWasmLanguage(lang: string): boolean {
+  return WASM_LANGUAGES.has(lang);
+}
+
+/**
+ * Start loading the runtime for a language in the background.
+ * Safe to call multiple times — no-ops if already loading or ready.
+ */
+export function preloadRuntime(lang: string): void {
+  // Guard: Web Workers not available (e.g. test environment)
+  if (typeof Worker === 'undefined') return;
+
+  const key = workerKey(lang);
+  const store = useRuntimeStore.getState();
+  const info = store.getRuntime(key);
+
+  // Already loading or ready
+  if (info.status === 'loading' || info.status === 'ready') return;
+
+  store.setStatus(key, 'loading');
+  store.setProgress(key, 0);
+
+  const worker = createWorker(lang);
+  const entry: WorkerEntry = { worker, ready: false, pendingRun: null };
+  workers.set(key, entry);
+
+  worker.onmessage = (event: MessageEvent) => {
+    const { data } = event;
+    const store = useRuntimeStore.getState();
+
+    switch (data.type) {
+      case 'progress': {
+        const pct = data.total > 0 ? Math.round((data.loaded / data.total) * 100) : 0;
+        store.setProgress(key, pct);
+        break;
+      }
+
+      case 'ready':
+        entry.ready = true;
+        store.setStatus(key, 'ready');
+        break;
+
+      case 'result':
+        if (entry.pendingRun) {
+          entry.pendingRun.resolve({
+            stdout: data.stdout ?? '',
+            stderr: data.stderr ?? '',
+            exitCode: data.exitCode ?? 0,
+            duration: data.duration ?? 0,
+          });
+          entry.pendingRun = null;
+        }
+        break;
+
+      case 'error':
+        if (entry.pendingRun) {
+          entry.pendingRun.reject(data.error ?? 'Runtime error');
+          entry.pendingRun = null;
+        } else {
+          // Initialization error
+          store.setError(key, data.error ?? 'Failed to load runtime');
+        }
+        break;
+    }
+  };
+
+  worker.onerror = (event: ErrorEvent) => {
+    const store = useRuntimeStore.getState();
+    store.setError(key, event.message || 'Worker error');
+    if (entry.pendingRun) {
+      entry.pendingRun.reject(event.message || 'Worker error');
+      entry.pendingRun = null;
+    }
+  };
+
+  worker.postMessage({ type: 'init' });
+}
+
+/**
+ * Execute code using the WASM runtime for the given language.
+ * Will preload if not already loaded. Returns a promise with the result.
+ */
+export function executeWasm(
+  lang: string,
+  code: string,
+  timeout = 10_000,
+): Promise<ExecutionResult> {
+  const key = workerKey(lang);
+  const entry = workers.get(key);
+
+  if (!entry || !entry.ready) {
+    return Promise.reject('Runtime not loaded');
+  }
+
+  // Cancel any pending run
+  if (entry.pendingRun) {
+    entry.pendingRun.reject('Superseded by new execution');
+  }
+
+  return new Promise<ExecutionResult>((resolve, reject) => {
+    entry.pendingRun = { resolve, reject };
+    entry.worker.postMessage({ type: 'run', code, language: lang, timeout });
+  });
+}
+
+/**
+ * Stop execution by terminating the worker and re-creating it as ready.
+ * This is the nuclear option — the runtime must be re-initialized.
+ */
+export function stopWasmExecution(lang: string): void {
+  const key = workerKey(lang);
+  const entry = workers.get(key);
+  if (!entry) return;
+
+  if (entry.pendingRun) {
+    entry.pendingRun.reject('Execution stopped by user');
+    entry.pendingRun = null;
+  }
+
+  // Terminate and remove — next execution will trigger preload again
+  entry.worker.terminate();
+  workers.delete(key);
+  useRuntimeStore.getState().setStatus(key, 'idle');
+}
+
+/**
+ * Get the runtime status for a language (convenience wrapper).
+ */
+export function getRuntimeStatus(lang: string) {
+  return useRuntimeStore.getState().getRuntime(workerKey(lang));
+}
diff --git a/src/stores/runtimeStore.ts b/src/stores/runtimeStore.ts
new file mode 100644
index 0000000..2edaae9
--- /dev/null
+++ b/src/stores/runtimeStore.ts
@@ -0,0 +1,72 @@
+import { create } from 'zustand';
+
+export type RuntimeStatus = 'idle' | 'loading' | 'ready' | 'error';
+
+export interface RuntimeInfo {
+  status: RuntimeStatus;
+  progress: number; // 0-100
+  error?: string;
+}
+
+interface RuntimeState {
+  runtimes: Record<string, RuntimeInfo>;
+}
+
+interface RuntimeActions {
+  setStatus: (lang: string, status: RuntimeStatus) => void;
+  setProgress: (lang: string, progress: number) => void;
+  setError: (lang: string, error: string) => void;
+  getRuntime: (lang: string) => RuntimeInfo;
+  reset: () => void;
+}
+
+export type RuntimeStore = RuntimeState & RuntimeActions;
+
+const DEFAULT_RUNTIME: RuntimeInfo = { status: 'idle', progress: 0 };
+
+export const useRuntimeStore = create<RuntimeStore>((set, get) => ({
+  runtimes: {},
+
+  setStatus: (lang, status) =>
+    set((state) => ({
+      runtimes: {
+        ...state.runtimes,
+        [lang]: {
+          ...DEFAULT_RUNTIME,
+          ...state.runtimes[lang],
+          status,
+          ...(status === 'ready' ? { progress: 100 } : {}),
+          ...(status === 'idle' ? { progress: 0, error: undefined } : {}),
+        },
+      },
+    })),
+
+  setProgress: (lang, progress) =>
+    set((state) => ({
+      runtimes: {
+        ...state.runtimes,
+        [lang]: {
+          ...DEFAULT_RUNTIME,
+          ...state.runtimes[lang],
+          status: 'loading',
+          progress,
+        },
+      },
+    })),
+
+  setError: (lang, error) =>
+    set((state) => ({
+      runtimes: {
+        ...state.runtimes,
+        [lang]: {
+          status: 'error',
+          progress: 0,
+          error,
+        },
+      },
+    })),
+
+  getRuntime: (lang) => get().runtimes[lang] ?? DEFAULT_RUNTIME,
+
+  reset: () => set({ runtimes: {} }),
+}));
diff --git a/src/styles.css b/src/styles.css
index 21cbb14..45a5568 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -968,6 +968,40 @@ button:disabled {
     color: white !important;
 }
 
+/* Loading / Error state run button */
+.run-btn.loading {
+    color: var(--text-secondary) !important;
+    border-color: var(--border-color) !important;
+    cursor: wait;
+    opacity: 0.7;
+    margin-left: 4px;
+    margin-bottom: 4px;
+}
+
+.run-btn.error {
+    color: #f59e0b !important;
+    border-color: #f59e0b !important;
+    margin-left: 4px;
+    margin-bottom: 4px;
+}
+
+.run-btn.error:hover {
+    background-color: #f59e0b !important;
+    color: white !important;
+}
+
+/* Indeterminate progress ring animation (when progress is 0%) */
+@keyframes progress-ring-spin {
+    0% { transform: rotate(-90deg); }
+    100% { transform: rotate(270deg); }
+}
+
+.progress-ring-indeterminate {
+    stroke-dasharray: 20 20;
+    animation: progress-ring-spin 1.2s linear infinite;
+    transform-origin: 8px 8px;
+}
+
 /* Output Panel */
 .output-panel {
     display: flex;
diff --git a/vite.config.ts b/vite.config.ts
index 20a4b91..99b4355 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -23,6 +23,14 @@ export default defineConfig({
       },
     },
   },
+  optimizeDeps: {
+    include: [
+      'pyodide',
+      'wasmoon',
+      '@ruby/wasm-wasi',
+      '@bjorn3/browser_wasi_shim',
+    ],
+  },
   build: {
     outDir: 'dist',
   },

From f512335545175ed38400413a9e9d19a4e81c8aca Mon Sep 17 00:00:00 2001
From: DreamTeam Mobile <contact@dreamteam-mobile.com>
Date: Thu, 19 Feb 2026 21:25:14 -0800
Subject: [PATCH 2/2] Fix production build: set worker.format to ES modules

Vite's default worker format (iife) doesn't support code-splitting,
which is needed by our WASM runtime workers that use dynamic imports.
Setting worker.format to 'es' fixes the Rollup build error.
---
 vite.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/vite.config.ts b/vite.config.ts
index 99b4355..a582c2a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -31,6 +31,9 @@ export default defineConfig({
       '@bjorn3/browser_wasi_shim',
     ],
   },
+  worker: {
+    format: 'es',
+  },
   build: {
     outDir: 'dist',
   },