lumbda/wasm/app/index.html
russell@unturf.com 7e32eefd6b
playground+repl: bend dispatch from WASM + 1.33 zoom + free-form runner
bend!-call from the WAT tier
  - New WAT import: (import "env" "bend_call"). The host loader supplies
    a sync XMLHttpRequest that POSTs the payload to a configured URL
    (workers only — sync XHR isn't allowed on main thread).
  - New primitive (bend!-call "<payload>") returns the response as a
    lumbda string. Works in playground and REPL once the bend URL is
    saved in the new top bar.
  - bendUrl persists in plain localStorage (not encrypted — it's a
    server address, not a secret).
  - Tests stub the import with a no-op so unit / integration / functional
    suites keep instantiating cleanly.

Playground + REPL zoom 133% by default
  - html { zoom: 1.33 } so the styleguide sizes read comfortably without
    requiring browser-level zoom.

Free-form default = cross-tier assertion runner in Lisp
  - The default editor content for "free form" is now a small assertion
    framework matching tests/functional.lsp's PASS/FAIL convention. A
    starter the user can extend, runs identically on the three tiers.

C tier + Python tier (bend) are wired through the runner stub; full
bend integration in those tiers comes next once their loaders learn
about setBendUrl.
2026-06-14 13:05:06 -04:00

103 lines
4.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lumbda playground — lisp in your browser, three tiers</title>
<link rel="stylesheet" href="style.css">
<script type="importmap">
{
"imports": {
"@codemirror/state": "https://esm.sh/*@codemirror/state@6.4.1",
"@codemirror/view": "https://esm.sh/*@codemirror/view@6.34.1",
"@codemirror/commands": "https://esm.sh/*@codemirror/commands@6.6.2",
"@codemirror/language": "https://esm.sh/*@codemirror/language@6.10.3",
"@codemirror/legacy-modes/mode/scheme": "https://esm.sh/*@codemirror/legacy-modes@6.4.1/mode/scheme",
"@codemirror/theme-one-dark": "https://esm.sh/*@codemirror/theme-one-dark@6.1.2",
"@lezer/highlight": "https://esm.sh/*@lezer/highlight@1.2.1",
"@lezer/common": "https://esm.sh/*@lezer/common@1.2.3",
"style-mod": "https://esm.sh/*style-mod@4.1.2",
"crelt": "https://esm.sh/*crelt@1.0.6",
"w3c-keyname": "https://esm.sh/*w3c-keyname@2.2.8"
}
}
</script>
</head>
<body>
<header>
<a class="brand" href="../" aria-label="lumbda home">
<img class="logo" src="lumbda-logo-green.png" alt="" aria-hidden="true">
<h1 aria-label="lumbda.">lumbda<span class="period" aria-hidden="true">.</span></h1>
</a>
<p class="tagline">lisp/scheme in your browser, three tiers in parallel</p>
<p class="lede">
same lisp source. three implementations compiled to webassembly:
<strong>python</strong> (cpython via pyodide hosting <code>lumbda.py</code>),
<strong>c</strong> (emscripten build of the tree-walker + bytecode vm),
<strong>asm</strong> (hand-written webassembly text format &mdash; parallel to <code>asm/lumbda.s</code>).
</p>
</header>
<section class="controls">
<fieldset class="program">
<legend>demo program</legend>
<label><input type="radio" name="program" value="mandelbrot" checked> mandelbrot</label>
<label><input type="radio" name="program" value="fib-ack"> fib + ackermann</label>
<label><input type="radio" name="program" value="sieve"> sieve of eratosthenes</label>
<label><input type="radio" name="program" value="self-interp"> lisp-in-lisp meta-eval</label>
<label><input type="radio" name="program" value="free-form"> free form (encrypted)</label>
</fieldset>
<fieldset class="tier">
<legend>tier</legend>
<label><input type="radio" name="tier" value="python"> python (pyodide)</label>
<label><input type="radio" name="tier" value="c" checked> c (emcc)</label>
<label><input type="radio" name="tier" value="asm"> asm (wat)</label>
<label><input type="radio" name="tier" value="all"> all three</label>
</fieldset>
<button id="run" class="primary">run</button>
<button id="cancel" class="secondary">cancel</button>
<span id="status" class="status"></span>
</section>
<section class="bend-bar">
<span class="bend-icon" title="gpu-worker bend URL"></span>
<label>bend URL
<input id="bend-url" type="url" placeholder="https://your-gpu-worker.example/bend (sets (bend!-call ...) destination)">
</label>
<button id="bend-save" class="secondary">save</button>
<span id="bend-state" class="bend-state"></span>
</section>
<section class="vault-bar" id="vault-bar" hidden>
<span class="vault-icon" title="local vault">🔒</span>
<span id="vault-state" class="vault-state">locked</span>
<input id="vault-pw" type="password" autocomplete="off" placeholder="password to unlock free-form vault">
<button id="vault-unlock" class="secondary">unlock</button>
<button id="vault-lock" class="secondary" hidden>lock</button>
<span id="vault-note" class="vault-note"></span>
</section>
<section class="panes">
<div class="pane code-pane">
<h2>code</h2>
<div id="editor"></div>
</div>
<div class="pane output-pane">
<h2>output</h2>
<div id="output"></div>
</div>
</section>
<footer>
<p>
same lisp source, three implementations &mdash; verify yourself by
eyeballing each tier's output, or by running
<code>make wasm-test</code> against the cross-tier suite.
asm tier (<code>asm/lumbda.wat</code>) is growing toward feature parity
with <code>asm/lumbda.s</code>; see <a href="../">lumbda.</a>
</p>
</footer>
<script type="module" src="app.js"></script>
</body>
</html>