lumbda/wasm/app/app.js

// wasm/app/app.js
// Single-page app shell — CodeMirror 6 editor + tier runner.

import { EditorState } from "@codemirror/state";
import { EditorView, keymap, lineNumbers, drawSelection } from "@codemirror/view";
import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
import { syntaxHighlighting, defaultHighlightStyle, StreamLanguage } from "@codemirror/language";
import { scheme } from "@codemirror/legacy-modes/mode/scheme";
import { oneDark } from "@codemirror/theme-one-dark";

import { runOnTiers } from "./runner.js";

const DEMOS = ["mandelbrot", "fib-ack", "sieve", "self-interp"];
const TIERS = { python: "Python (Pyodide)", c: "C (emcc)", asm: "Asm (WAT)" };

const demoSources = {};

async function loadDemoSource(name) {
    if (!demoSources[name]) {
        const resp = await fetch(`demos/${name}.lsp`);
        demoSources[name] = await resp.text();
    }
    return demoSources[name];
}

const editorParent = document.getElementById("editor");
const outputEl = document.getElementById("output");
const statusEl = document.getElementById("status");
const runBtn = document.getElementById("run");

const editorView = new EditorView({
    state: EditorState.create({
        doc: "",
        extensions: [
            lineNumbers(),
            history(),
            drawSelection(),
            syntaxHighlighting(defaultHighlightStyle),
            StreamLanguage.define(scheme),
            keymap.of([...defaultKeymap, ...historyKeymap]),
            oneDark,
            EditorView.theme({ "&": { height: "100%" } }),
        ],
    }),
    parent: editorParent,
});

function setEditorText(text) {
    editorView.dispatch({
        changes: { from: 0, to: editorView.state.doc.length, insert: text },
    });
}

function getEditorText() {
    return editorView.state.doc.toString();
}

async function loadCurrentDemo() {
    const sel = document.querySelector('input[name="program"]:checked').value;
    const src = await loadDemoSource(sel);
    setEditorText(src);
}

function selectedTiers() {
    const sel = document.querySelector('input[name="tier"]:checked').value;
    return sel === "all" ? ["python", "c", "asm"] : [sel];
}

function setStatus(text, cls) {
    statusEl.textContent = text || "";
    statusEl.className = "status" + (cls ? " " + cls : "");
}

function renderResults(results) {
    outputEl.innerHTML = "";
    for (const r of results) {
        const block = document.createElement("div");
        block.className = "tier-block";
        const h = document.createElement("h3");
        h.textContent = TIERS[r.tier] || r.tier;
        const t = document.createElement("span");
        t.className = "time";
        t.textContent = `  (${r.elapsed.toFixed(0)} ms)`;
        h.appendChild(t);
        block.appendChild(h);
        const pre = document.createElement("pre");
        if (r.error) {
            pre.className = "err";
            pre.textContent = r.error;
        } else {
            pre.textContent = r.output;
        }
        block.appendChild(pre);
        outputEl.appendChild(block);
    }
}

async function runAll() {
    runBtn.disabled = true;
    setStatus("loading tiers…", "busy");
    outputEl.innerHTML = "";
    try {
        const tiers = selectedTiers();
        const src = getEditorText();
        const results = await runOnTiers(tiers, src, (msg) => setStatus(msg, "busy"));
        renderResults(results);
        const anyErr = results.some((r) => r.error);
        setStatus(anyErr ? "completed with errors" : "ok", anyErr ? "err" : "ok");
    } catch (e) {
        setStatus(`fatal: ${e.message}`, "err");
        outputEl.textContent = e.stack || e.message;
    } finally {
        runBtn.disabled = false;
    }
}

document.querySelectorAll('input[name="program"]').forEach((el) => {
    el.addEventListener("change", loadCurrentDemo);
});
runBtn.addEventListener("click", runAll);
loadCurrentDemo();