munchboka-edutools 0.1.0__py3-none-any.whl

munchboka_edutools/static/js/interactive_code/interactiveCodeSetup.js

@@ -0,0 +1,252 @@
+class InteractiveCodeSetup {
+	constructor(containerId, initialCode, preloadPackages = null) {
+		this.containerId = containerId;
+		this.initialCode = initialCode;
+		this.preloadPackages = preloadPackages;
+		this.uniqueId = this.generateUUID();
+
+		// HTML element IDs
+		this.editorId = `code-editor-${this.uniqueId}`;
+		this.runButtonId = `run-button-${this.uniqueId}`;
+		this.resetButtonId = `reset-button-${this.uniqueId}`;
+		this.cancelButtonId = `cancel-button-${this.uniqueId}`;
+		this.outputId = `output-${this.uniqueId}`;
+		this.errorBoxId = `error-box-${this.uniqueId}`;
+
+		this.editorInstance = null;
+		this.runnerInstance = null;
+
+		this.createEditorHTML();
+		this.setupInteractiveEditor();
+	}
+
+	generateUUID() {
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+			const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+			return v.toString(16);
+		});
+	}
+
+	createEditorHTML() {
+		const container = document.getElementById(this.containerId);
+		if (!container) return;
+
+		const runIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
+ </svg>`;
+		const resetIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+  <path fill-rule="evenodd" d="M9.53 2.47a.75.75 0 0 1 0 1.06L4.81 8.25H15a6.75 6.75 0 0 1 0 13.5h-3a.75.75 0 0 1 0-1.5h3a5.25 5.25 0 1 0 0-10.5H4.81l4.72 4.72a.75.75 0 1 1-1.06 1.06l-6-6a.75.75 0 0 1 0-1.06l6-6a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
+</svg>`;
+		const cancelIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 7.5A2.25 2.25 0 0 1 7.5 5.25h9a2.25 2.25 0 0 1 2.25 2.25v9a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-9Z" />
+</svg>`;
+
+		const html = `
+			<div>
+				<textarea id="${this.editorId}" name="code-${this.uniqueId}">${this.initialCode}</textarea>
+                
+				<button id="${this.runButtonId}" class="button button-run">Kjør kode ${runIcon}</button>
+				<button id="${this.resetButtonId}" class="button button-reset">Reset kode ${resetIcon}</button>
+				<button id="${this.cancelButtonId}" class="button button-cancel">Avbryt kjøring ${cancelIcon}</button>
+			</div>
+			<div id="${this.errorBoxId}"></div>
+			<pre id="${this.outputId}" class="pythonoutput"></pre>
+		`;
+
+		container.innerHTML = html;
+	}
+
+	setupInteractiveEditor() {
+		this.editorInstance = new CodeEditor(this.editorId);
+		this.runnerInstance = new PythonRunner(this.outputId, this.errorBoxId, this.preloadPackages);
+
+		// Wait for editor to be ready before attaching listeners
+		this.editorInstance.editorReady.then(() => {
+			const runBtn = document.getElementById(this.runButtonId);
+			const resetBtn = document.getElementById(this.resetButtonId);
+			const cancelBtn = document.getElementById(this.cancelButtonId);
+			
+			if (runBtn) runBtn.addEventListener("click", () => this.runCode());
+			if (resetBtn) resetBtn.addEventListener("click", () => this.resetCode());
+			if (cancelBtn) cancelBtn.addEventListener("click", () => this.cancelCodeExecution());
+		});
+	}
+
+	runCode() {
+		this.clearOutput();
+		this.runnerInstance.run(this.editorInstance);
+	}
+
+	resetCode() {
+		this.clearOutput();
+		this.editorInstance.resetEditor(this.initialCode);
+	}
+
+	cancelCodeExecution() {
+		if (this.runnerInstance.workerManager) {
+			this.runnerInstance.workerManager.restartWorker();
+		}
+	}
+
+	clearOutput() {
+		const out = document.getElementById(this.outputId);
+		const err = document.getElementById(this.errorBoxId);
+		if (out) out.textContent = "";
+		if (err) err.textContent = "";
+	}
+}
+
+function makeInteractiveCode(containerId, initialCode, preloadPackages = null) {
+	return new InteractiveCodeSetup(containerId, initialCode, preloadPackages);
+}
+
+class PredictionInteractiveCodeSetup extends InteractiveCodeSetup {
+	constructor(containerId, initialCode) {
+		super(containerId, initialCode);
+		this.predictionInputId = `prediction-input-${this.uniqueId}`;
+		this.lockPredictionButtonId = `lock-prediction-button-${this.uniqueId}`;
+		this.predictionDisplayId = `prediction-display-${this.uniqueId}`;
+		this.predictionOutputId = `prediction-output-${this.uniqueId}`;
+		this.predictionOutputContainerId = `prediction-output-container-${this.uniqueId}`;
+		this.predictionContainerId = `prediction-container-${this.uniqueId}`;
+
+		this.predictionDisplayed = false;
+
+		this.addPredictionHTML();
+		this.setupPredictionFeature();
+	}
+
+	addPredictionHTML() {
+		const container = document.getElementById(this.containerId);
+		if (!container) return;
+
+		const predictionHtml = `
+			<div id="${this.predictionContainerId}" class="prediction-container">
+			<textarea id="${this.predictionInputId}" rows="3" placeholder="Skriv inn svaret ditt her! \n \nTrykk på Enter (&#9166;) for en ny linje."></textarea>
+			<button id="${this.lockPredictionButtonId}" class="button button-run">Sjekk svaret!</button>
+			</div>
+		`;
+		container.insertAdjacentHTML('beforeend', predictionHtml);
+
+		const predictionOutputContainer = document.createElement('div');
+		predictionOutputContainer.id = this.predictionOutputContainerId;
+		predictionOutputContainer.className = 'prediction-output-container';
+		predictionOutputContainer.style.display = 'none';
+
+		const predictionDisplay = document.createElement('div');
+		predictionDisplay.className = 'prediction-display';
+		predictionDisplay.innerHTML = `
+			<h3>Ditt svar:</h3>
+			<pre id="${this.predictionDisplayId}"></pre>
+		`;
+
+		const outputDisplay = document.createElement('div');
+		outputDisplay.className = 'output-display';
+		outputDisplay.innerHTML = `
+			<h3>Faktisk utskrift:</h3>
+			<pre id="${this.predictionOutputId}" class="pythonoutput"></pre>
+		`;
+
+		predictionOutputContainer.appendChild(predictionDisplay);
+		predictionOutputContainer.appendChild(outputDisplay);
+
+		const errorBoxElement = document.getElementById(this.errorBoxId);
+		if (errorBoxElement) {
+			errorBoxElement.insertAdjacentElement('afterend', predictionOutputContainer);
+		} else {
+			container.appendChild(predictionOutputContainer);
+		}
+
+		this.originalOutputElement = document.getElementById(this.outputId);
+	}
+
+	setupPredictionFeature() {
+		// Wait for editor to be ready before setting read-only and attaching listeners
+		this.editorInstance.editorReady.then(() => {
+			this.editorInstance.editor.setOption('readOnly', true);
+			const rb = document.getElementById(this.runButtonId);
+			const rsb = document.getElementById(this.resetButtonId);
+			const cb = document.getElementById(this.cancelButtonId);
+			if (rb) rb.style.display = 'none';
+			if (rsb) rsb.style.display = 'none';
+			if (cb) cb.style.display = 'none';
+			
+			const lockBtn = document.getElementById(this.lockPredictionButtonId);
+			if (lockBtn) lockBtn.addEventListener("click", () => this.lockPrediction());
+		});
+	}
+
+	lockPrediction() {
+		const prediction = (document.getElementById(this.predictionInputId) || { value: '' }).value;
+		this.prediction = prediction;
+
+		const predictionContainer = document.getElementById(this.predictionContainerId);
+		if (predictionContainer) predictionContainer.style.display = 'none';
+
+		// Wait for editor to be ready before modifying
+		this.editorInstance.editorReady.then(() => {
+			this.editorInstance.editor.setOption('readOnly', false);
+
+			const rb = document.getElementById(this.runButtonId);
+			const rsb = document.getElementById(this.resetButtonId);
+			const cb = document.getElementById(this.cancelButtonId);
+			if (rb) rb.style.display = 'inline-block';
+			if (rsb) rsb.style.display = 'inline-block';
+			if (cb) cb.style.display = 'inline-block';
+
+			this.runCode();
+		});
+	}
+
+	runCode() {
+		if (this.predictionDisplayed) {
+			this.initialCode = this.editorInstance.getValue();
+			this.replaceWithInteractiveCodeSetup();
+		} else {
+			this.clearOutput();
+			this.runnerInstance.run(this.editorInstance, this.predictionOutputId);
+			this.displayPredictionAndOutput();
+			this.predictionDisplayed = true;
+		}
+	}
+
+	resetCode() {
+		if (this.predictionDisplayed) {
+			this.replaceWithInteractiveCodeSetup();
+		} else {
+			this.clearOutput();
+			this.editorInstance.resetEditor(this.initialCode);
+		}
+	}
+
+	cancelCodeExecution() {
+		if (this.predictionDisplayed) {
+			this.replaceWithInteractiveCodeSetup();
+		} else if (this.runnerInstance.workerManager) {
+			this.runnerInstance.workerManager.restartWorker();
+		}
+	}
+
+	replaceWithInteractiveCodeSetup() {
+		const container = document.getElementById(this.containerId);
+		if (container) {
+			container.innerHTML = '';
+			new InteractiveCodeSetup(this.containerId, this.initialCode);
+		}
+	}
+
+	displayPredictionAndOutput() {
+		const pred = document.getElementById(this.predictionDisplayId);
+		if (pred) pred.textContent = this.prediction;
+		if (this.originalOutputElement) this.originalOutputElement.style.display = 'none';
+		const poc = document.getElementById(this.predictionOutputContainerId);
+		if (poc) poc.style.display = 'flex';
+	}
+}
+
+function makePredictionInteractiveCode(containerId, initialCode) {
+	return new PredictionInteractiveCodeSetup(containerId, initialCode);
+}

munchboka_edutools/static/js/interactive_code/pythonRunner.js

@@ -0,0 +1,145 @@
+// Ported pythonRunner.js (simplified) - full version lives in original book assets
+// This is a near-direct copy from matematikk_r1 interactiveCode/pythonRunner.js
+
+class PythonRunner {
+    constructor(outputId, errorBoxId, preloadPackages = ['casify']) {
+        this.outputId = outputId;
+        this.errorBoxId = errorBoxId;
+        this.workerManager = WorkerManager.getInstance(preloadPackages);
+        this.preloadPackages = preloadPackages;
+    }
+
+    async run(editor, outputId = null) {
+        try {
+            await this.workerManager.workerReadyPromise;
+        } catch (error) {
+            console.error("Worker failed to initialize:", error);
+            this.handleErrorMessage("Failed to initialize Python environment.");
+            return;
+        }
+
+        this.editorInstance = editor;
+        this.editorInstance.clearLineHighlights();
+        let code = editor.getValue();
+        this.currentCode = code;
+        if (outputId) this.outputId = outputId;
+
+        const inputStatements = this.findInputStatements(this.currentCode);
+        if (inputStatements.length > 0) {
+            const userValues = await this.getUserInputs(inputStatements);
+            this.currentCode = this.replaceInputStatements(this.currentCode, userValues);
+        }
+
+        const packages = this.extractPackageNames(this.currentCode);
+        if (!packages.includes('matplotlib')) packages.push('matplotlib');
+        if (packages.length > 0) {
+            try { await this.workerManager.loadPackages(packages); } catch (error) {
+                console.error("Failed to load packages:", error);
+                this.handleErrorMessage(error.message);
+                return;
+            }
+        }
+
+        const callback = (data) => {
+            if (data.type === 'stdout') {
+                this.handleWorkerMessage(data);
+            } else if (data.type === 'stderr') {
+                this.handleErrorMessage(data.msg);
+            } else if (data.type === 'plot') {
+                const outputElement = document.getElementById(this.outputId);
+                if (!outputElement) return;
+                const img = document.createElement('img');
+                img.src = 'data:image/png;base64,' + data.data;
+                img.style.width = '100%';
+                img.style.height = 'auto';
+                img.style.maxHeight = '500px';
+                outputElement.appendChild(img);
+                this.scrollToBottom(outputElement);
+            }
+        };
+        this.workerManager.runCode(this.currentCode, callback);
+    }
+
+    handleWorkerMessage(data) {
+        const { type, msg } = data;
+        const outputElement = document.getElementById(this.outputId);
+        if (!outputElement) return;
+        if (type === 'stdout') {
+            let formattedMsg = msg
+                .replace(/And\(([^)]+)\)/g, (match, p1) => {
+                    const conditions = p1.split(',').map(cond => cond.trim());
+                    return conditions.map(cond => `(${cond})`).join(' ∧ ');
+                })
+                .replace(/oo/g, '∞')
+                .replace(/\|/g, '∨');
+            outputElement.innerHTML += this.formatErrorMessage(formattedMsg);
+            this.highlightLine(this.editorInstance, data.msg);
+            this.scrollToBottom(outputElement);
+        }
+    }
+
+    scrollToBottom(element) { element.scrollTop = element.scrollHeight; }
+
+    handleErrorMessage(msg) {
+        const errorElement = document.getElementById(this.errorBoxId);
+        if (errorElement) errorElement.innerHTML = this.formatErrorMessage(msg);
+        this.highlightLine(this.editorInstance, msg);
+    }
+
+    formatErrorMessage(errorMsg) {
+        let formattedMessage = errorMsg;
+        const fileLinePattern = /File "<exec>", line (\d+)/g;
+        formattedMessage = formattedMessage.replace(fileLinePattern, (match, p1) => match.replace(`line ${p1}`, `<span class="error-line">line ${p1}</span>`));
+        const errorTypeMatch = errorMsg.match(/(\w+Error):/);
+        if (errorTypeMatch) formattedMessage = formattedMessage.replace(errorTypeMatch[1], `<span class="error-type">${errorTypeMatch[1]}</span>`);
+        return formattedMessage;
+    }
+
+    extractPackageNames(code) {
+        const importRegex = /^\s*import\s+([^;\s]+)\s*/gm;
+        const fromImportRegex = /^\s*from\s+([^;\s]+)\s+import/gm;
+        const packages = new Set();
+        const standardLibs = new Set(['abc','argparse','array','ast','asyncio','base64','binascii','bisect','bz2','calendar','collections','contextlib','copy','csv','dataclasses','datetime','functools','hashlib','heapq','html','http','io','itertools','json','logging','math','operator','os','pathlib','pickle','platform','random','re','statistics','string','sys','textwrap','time','typing','unittest','urllib','uuid']);
+        let match;
+        while ((match = importRegex.exec(code)) !== null) { const pn = match[1].split('.')[0]; if (!standardLibs.has(pn)) packages.add(pn); }
+        while ((match = fromImportRegex.exec(code)) !== null) { const pn = match[1].split('.')[0]; if (!standardLibs.has(pn)) packages.add(pn); }
+        return Array.from(packages);
+    }
+
+    findInputStatements(code) {
+        // Python identifiers with Unicode: first char letter/_ then letters/digits/_
+        const inputRegex = /([\p{L}_][\p{L}\p{N}_]*)\s*=\s*(int|float|eval)?\(?input\(["'](.*?)["']\)\)?/gu;
+        let match; const inputs = [];
+        while ((match = inputRegex.exec(code)) !== null) { inputs.push({ variable: match[1], promptText: match[3] }); }
+        return inputs;
+    }
+
+    async getUserInputs(inputs) {
+        const userValues = {}; for (const input of inputs) { userValues[input.variable] = await this.promptUser(input.promptText.replace(/["']+/g, '')); } return userValues;
+    }
+
+    promptUser(promptText) { return new Promise((resolve) => { resolve(prompt(promptText)); }); }
+
+    replaceInputStatements(code, userValues) {
+        const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        let codeLines = code.split('\n');
+        codeLines = codeLines.map(line => {
+            for (let variable in userValues) {
+                const vEsc = escapeRe(variable);
+                // Match beginning or non-identifier char before var to avoid partial matches
+                const inputRegex = new RegExp(`(^|[^\\p{L}\\p{N}_])(${vEsc})\\s*=\\s*(?:float|int|eval)?\\(?input\\(.*?\\)\\)?`, 'gu');
+                line = line.replace(inputRegex, (m, prefix, v) => {
+                    let userValue = userValues[variable];
+                    if (isNaN(userValue) && typeof userValue === 'string') userValue = `"${userValue}"`;
+                    return `${prefix}${v} = ${userValue}`;
+                });
+            }
+            return line;
+        });
+        return codeLines.join('\n');
+    }
+
+    highlightLine(editor, msg) {
+        const linePattern = /File "<exec>", line (\d+)/; const match = linePattern.exec(msg); if (match) { const lineNumber = parseInt(match[1]) - 1; editor.highlightLine(lineNumber); }
+    }
+}

munchboka_edutools/static/js/interactive_code/turtleCode.js

@@ -0,0 +1,56 @@
+// Ported turtleCode.js minimal wrapper that uses CodeEditor + Skulpt
+
+function generateUUID() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}
+
+class TurtleCode {
+    constructor(containerId, initialCode = "", cmOptions = {}) {
+        this.containerId = containerId;
+        this.container = document.getElementById(containerId);
+        if (!this.container) throw new Error(`Container ${containerId} not found`);
+        this.initialCode = initialCode;
+        this.cmOptions = cmOptions;
+        this.uniqueSuffix = generateUUID();
+        this.createUI();
+        this.editor = new CodeEditor(this.textAreaEl.id);
+        setTimeout(() => { this.editor.setValue(this.initialCode); }, 200);
+        this.runButtonEl.addEventListener("click", () => this.runCode());
+    }
+
+    createUI() {
+        this.container.innerHTML = "";
+        const wrap = document.createElement('div');
+        wrap.style.display = 'flex'; wrap.style.flexWrap = 'wrap'; wrap.style.width = '100%';
+        const left = document.createElement('div'); left.style.flex = '1'; left.style.minWidth = '220px'; left.style.display='flex'; left.style.flexDirection='column';
+        const right = document.createElement('div'); right.style.flex = '1'; right.style.minWidth = '320px'; right.style.display='flex'; right.style.flexDirection='column'; right.style.alignItems='center'; right.style.justifyContent='center';
+        this.textAreaEl = document.createElement('textarea'); this.textAreaEl.id = `skulpt-editor-${this.uniqueSuffix}`; this.textAreaEl.style.display='none'; left.appendChild(this.textAreaEl);
+        this.runButtonEl = document.createElement('button'); this.runButtonEl.className='button button-run'; this.runButtonEl.textContent='Kjør kode'; this.runButtonEl.style.margin='1em 0'; left.appendChild(this.runButtonEl);
+        this.outputEl = document.createElement('pre'); this.outputEl.className='pythonoutput'; this.outputEl.style.minHeight='2em'; left.appendChild(this.outputEl);
+        this.canvasEl = document.createElement('div'); this.canvasEl.id = `skulpt-canvas-${this.uniqueSuffix}`; this.canvasEl.style.border='1px solid #ccc'; this.canvasEl.style.width='95%'; this.canvasEl.style.height='400px'; right.appendChild(this.canvasEl);
+        wrap.appendChild(left); wrap.appendChild(right); this.container.appendChild(wrap);
+    }
+
+    runCode() {
+        let userCode = this.editor.getValue();
+        this.outputEl.innerHTML = '';
+        const mode = document.documentElement.getAttribute('data-mode');
+        let forcedColor = 'black';
+        if (mode === 'dark') forcedColor = 'white';
+        else if (mode === 'auto') forcedColor = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'white' : 'black';
+        const snippet = `\ntry:\n    import turtle\n    turtle.color("${forcedColor}")\n    screen = turtle.Screen()\nexcept: pass\n`;
+        userCode = snippet + userCode;
+        const outf = (text) => { this.outputEl.innerHTML += text; };
+        const builtinRead = (filename) => { if (!Sk.builtinFiles || !Sk.builtinFiles['files'][filename]) { throw new Error('File not found: ' + filename); } return Sk.builtinFiles['files'][filename]; };
+        Sk.pre = this.outputEl.id;
+        Sk.configure({ output: outf, read: builtinRead, python3: true });
+        (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = this.canvasEl.id;
+        Sk.misceval.asyncToPromise(() => Sk.importMainWithBody('<stdin>', false, userCode, true)).catch(err => { this.outputEl.innerHTML = err.toString(); });
+    }
+}
+
+function makeTurtleCode(containerId, initialCode = '', cmOptions = {}) { return new TurtleCode(containerId, initialCode, cmOptions); }

munchboka_edutools/static/js/interactive_code/workerManager.js

@@ -0,0 +1,204 @@
+// Ported workerManager.js from matematikk_r1 interactiveCode
+
+class WorkerManager {
+    static instance = null;
+
+    static getInstance(preloadPackages = null) {
+        if (!WorkerManager.instance) {
+            const defaultPreloadPackages = ['matplotlib', 'numpy', 'scipy', 'sympy', 'micropip'];
+            const combinedPreloadPackages = Array.from(new Set(preloadPackages ? [...defaultPreloadPackages, ...preloadPackages] : defaultPreloadPackages));
+            WorkerManager.instance = new WorkerManager(combinedPreloadPackages);
+            setTimeout(() => {
+                WorkerManager.instance.warmUpPyodide().catch(err => console.warn('Pyodide warm-up failed:', err));
+            }, 1000);
+        } else if (preloadPackages) {
+            const packagesToLoad = preloadPackages.filter(pkg => !WorkerManager.instance.loadedPackages.has(pkg));
+            const combinedPreloadPackages = Array.from(new Set(['matplotlib', 'numpy', 'scipy', 'sympy', 'micropip', ...packagesToLoad]));
+            if (combinedPreloadPackages.length > 0) WorkerManager.instance.loadPackages(combinedPreloadPackages);
+        }
+        return WorkerManager.instance;
+    }
+
+    constructor(preloadPackages = []) {
+        if (WorkerManager.instance) return WorkerManager.instance;
+        this.worker = null;
+        this.callbacks = {};
+        this.preloadPackages = preloadPackages;
+        this.loadedPackages = new Set();
+        this.packageLoadPromises = {};
+        this.workerReadyPromise = new Promise((resolve, reject) => { this.workerReadyResolve = resolve; this.workerReadyReject = reject; });
+        this.initWorker();
+        WorkerManager.instance = this;
+    }
+
+    initWorker() {
+        // Inline Python template kept inside JS string carefully escaped.
+            const workerScript = `importScripts('https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js');
+
+let pyodideReadyPromise = loadPyodide();
+let initialGlobals = new Set();
+
+async function resetPyodide(pyodide, initialGlobals) {
+    const currentGlobals = new Set(pyodide.globals.keys());
+    const globalsToClear = Array.from(currentGlobals).filter(x => !initialGlobals.has(x));
+    for (const key of globalsToClear) { pyodide.globals.delete(key); }
+}
+
+async function installPackages(pyodide, packages) {
+    if (packages.length > 0) {
+        await pyodide.loadPackage('micropip');
+        const micropip = pyodide.pyimport('micropip');
+        await micropip.install(packages);
+    }
+}
+
+onmessage = async (event) => {
+    const messageId = event.data.messageId;
+    if (event.data.type === 'init') {
+        const { preloadPackages } = event.data;
+        const pyodide = await pyodideReadyPromise;
+        initialGlobals = new Set(pyodide.globals.keys());
+        const pyodidePackages = preloadPackages.filter(pkg => ['matplotlib','numpy','scipy','sympy','micropip'].includes(pkg));
+        const pypiPackages = preloadPackages.filter(pkg => !['matplotlib','numpy','scipy','sympy','micropip'].includes(pkg));
+        if (pyodidePackages.length > 0) await pyodide.loadPackage(pyodidePackages);
+        await installPackages(pyodide, pypiPackages);
+        postMessage(JSON.stringify({ type: 'initReady' }));
+    }
+
+    if (event.data.type === 'runCode') {
+        const { code } = event.data;
+        try {
+            const pyodide = await pyodideReadyPromise;
+            await resetPyodide(pyodide, initialGlobals);
+            const pyCode = \`import sys, json, io, base64
+from js import postMessage
+import matplotlib
+matplotlib.use('Agg')
+import matplotlib.pyplot as plt
+
+MESSAGE_ID = "${messageId}"
+
+class PyConsole:
+    def __init__(self, message_id):
+        self.message_id = message_id
+        self.buffer = ''
+    def write(self, msg):
+        self.buffer += msg
+        if '\\\\\\\\n' in msg:
+            self.flush()
+    def flush(self):
+        if self.buffer:
+            postMessage(json.dumps({'type':'stdout','msg':self.buffer,'messageId':self.message_id}))
+            self.buffer = ''
+
+sys.stdout = PyConsole(MESSAGE_ID)
+sys.stderr = PyConsole(MESSAGE_ID)
+
+def show_override():
+    buf = io.BytesIO()
+    plt.savefig(buf, format='png')
+    fig = plt.gcf()
+    width_in = fig.get_figwidth(); height_in = fig.get_figheight(); dpi = fig.get_dpi()
+    width_px = int(width_in * dpi); height_px = int(height_in * dpi)
+    buf.seek(0)
+    image_base64 = base64.b64encode(buf.read()).decode('utf-8')
+    postMessage(json.dumps({'type':'plot','data':image_base64,'messageId':MESSAGE_ID,'width':width_px,'height':height_px}))
+    plt.clf()
+    sys.stdout.write('\\\\\\\\n')
+    sys.stdout.write('\\\\\\\\n')
+    sys.stdout.flush()
+
+plt.show = lambda: show_override()\`;
+            // Send back the Python code for debugging before execution
+            postMessage(JSON.stringify({ type: 'debugPyCode', messageId, pyCode }));
+            await pyodide.runPythonAsync(pyCode);
+            await pyodide.runPythonAsync(code);
+            // Ensure any buffered output gets emitted even if no trailing newline
+            await pyodide.runPythonAsync('import sys; sys.stdout.flush(); sys.stderr.flush()');
+            postMessage(JSON.stringify({ type: 'executionComplete', messageId }));
+        } catch (err) {
+            postMessage(JSON.stringify({ type: 'stderr', msg: String(err), messageId }));
+        }
+    }
+
+    if (event.data.type === 'loadPackage') {
+        const { packages, packageRequestId } = event.data;
+        try {
+            const pyodide = await pyodideReadyPromise;
+            const pyodidePackages = packages.filter(pkg => ['matplotlib','numpy','scipy','sympy','micropip'].includes(pkg));
+            const pypiPackages = packages.filter(pkg => !['matplotlib','numpy','scipy','sympy','micropip'].includes(pkg));
+            if (pyodidePackages.length > 0) await pyodide.loadPackage(pyodidePackages);
+            await installPackages(pyodide, pypiPackages);
+            postMessage(JSON.stringify({ type: 'packagesLoaded', packageRequestId }));
+        } catch (err) {
+            postMessage(JSON.stringify({ type: 'stderr', msg: String(err), packageRequestId }));
+        }
+    }
+};
+`;
+                const workerBlob = new Blob([workerScript], { type: 'application/javascript' });
+        this.worker = new Worker(URL.createObjectURL(workerBlob));
+        this.worker.onmessage = this.handleMessage.bind(this);
+        this.worker.onerror = this.handleError.bind(this);
+        this.worker.postMessage({ type: 'init', preloadPackages: this.preloadPackages });
+        this.pyodideWarmedUp = false;
+    }
+
+    warmUpPyodide() {
+        if (this.pyodideWarmedUp) return Promise.resolve();
+        return this.workerReadyPromise.then(() => new Promise((resolve) => {
+            const messageId = this.generateMessageId();
+            this.callbacks[messageId] = (data) => { if (data.type === 'executionComplete') { this.pyodideWarmedUp = true; resolve(); } };
+            this.worker.postMessage({ type: 'runCode', code: '# warmup', messageId });
+        }));
+    }
+
+    generateMessageId() { return 'msg-' + Math.random().toString(36).substr(2, 9); }
+
+    loadPackages(packages) {
+        const packagesToLoad = packages.filter(pkg => !this.loadedPackages.has(pkg));
+        if (packagesToLoad.length === 0) return Promise.resolve();
+        const packageRequestId = 'pkg-' + Math.random().toString(36).substr(2, 9);
+        return new Promise((resolve, reject) => {
+            this.packageLoadPromises[packageRequestId] = { resolve, reject, packages: packagesToLoad };
+            this.worker.postMessage({ type: 'loadPackage', packages: packagesToLoad, packageRequestId });
+        });
+    }
+
+    runCode(code, onMessageCallback) {
+        const messageId = this.generateMessageId();
+        this.callbacks[messageId] = onMessageCallback;
+        this.worker.postMessage({ type: 'runCode', code, messageId });
+        return messageId;
+    }
+
+    handleMessage(event) {
+        let data; try { data = JSON.parse(event.data); } catch (e) { console.error('Worker message JSON parse failed:', e, event.data); return; }
+        const { messageId, packageRequestId } = data;
+        if (data.type === 'debugPyCode') {
+            // Surface embedded Python for inspection
+            console.log('Embedded Python received (messageId=' + data.messageId + '):\n' + data.pyCode);
+        }
+        if (messageId && this.callbacks[messageId]) {
+            this.callbacks[messageId](data);
+            if (data.type === 'executionComplete') delete this.callbacks[messageId];
+        } else if (packageRequestId && this.packageLoadPromises[packageRequestId]) {
+            const pkgPromise = this.packageLoadPromises[packageRequestId];
+            if (data.type === 'packagesLoaded') { for (const pkg of pkgPromise.packages) this.loadedPackages.add(pkg); pkgPromise.resolve(); }
+            else if (data.type === 'stderr') { pkgPromise.reject(new Error(data.msg)); }
+            delete this.packageLoadPromises[packageRequestId];
+        } else if (data.type === 'initReady') {
+            this.workerReadyResolve();
+        }
+    }
+
+    handleError(error) { console.error('Worker error:', error); if (this.workerReadyReject) this.workerReadyReject(error); }
+
+    restartWorker() {
+        if (this.worker) { this.worker.terminate(); this.worker = null; }
+        this.loadedPackages = new Set(); this.pyodideWarmedUp = false;
+        this.workerReadyPromise = new Promise((resolve, reject) => { this.workerReadyResolve = resolve; this.workerReadyReject = reject; });
+        this.initWorker();
+        setTimeout(() => { this.warmUpPyodide().catch(err => console.warn('Warm-up failed after restart:', err)); }, 1000);
+    }
+}