russell@unturf.com
d4380c64c7
Adds a portal-bar to the REPL between tabbar and transcript: a save
button + chip strip showing all saved checkpoints for the active tab.
Click a chip to restore, click × to delete.
Per-tier strategy:
* c, python — call the tier's (portal-snapshot! NAME), then read the
JSON blob out of MEMFS (Emscripten/Pyodide FS) and stash it in the
encrypted vault entry. Restore reverses: hydrate MEMFS, then
(portal-load! NAME) merges the bindings into the live env.
* asm — no portal serializer in the WAT tier yet (would need a
Cheney-aware walk). Falls back to transcript replay: save snapshots
every successful prior input, restore reboots the tier and re-evals
them in order.
Plumbing:
* Worker bridge: new portal-save / portal-load message kinds wire
MEMFS reads/writes to the main thread.
* runner.js exposes portalSave / portalLoad — null when a tier
hasn't implemented portals (asm stays grey).
* C tier: replace EM_JS with extern + --js-library for js_lumbda_bend_call
(EM_JS-generated declaration was unreachable from wasmImports at
instantiate time, browsers threw "import object field ... not a
Function"). FS added to EXPORTED_RUNTIME_METHODS so JS can reach
pyodide.FS / Module.FS for MEMFS I/O.
Smoke-tested all three tiers headlessly: save → chip render → restore
round-trips clean on c / python / asm, zero console errors.
112 lines
5.3 KiB
HTML
112 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>lumbda repl — three tiers, persistent sessions</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="repl.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 class="repl">
|
|
|
|
<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">three tiers, persistent sessions</p>
|
|
</header>
|
|
|
|
<div id="lock-screen" class="lock-screen">
|
|
<div class="lock-card">
|
|
<h2>unlock</h2>
|
|
<p>type a password to unlock or create a vault. every keystroke and
|
|
transcript line stays inside your browser — nothing leaves
|
|
this tab.</p>
|
|
<details class="lock-explain">
|
|
<summary>how the encryption works</summary>
|
|
<ul>
|
|
<li>your password is run through <strong>PBKDF2</strong> (200,000
|
|
iterations, SHA-256) with a random 32-byte salt generated
|
|
once per device and stored in <code>localStorage</code>.</li>
|
|
<li>that derives an <strong>AES-GCM 256-bit key</strong>. all
|
|
transcripts are encrypted with this key before any
|
|
<code>localStorage.setItem()</code> call.</li>
|
|
<li>the <strong>vault id</strong> is
|
|
<code>SHA-256(password || salt)</code> — different
|
|
passwords on the same device address completely independent
|
|
vaults. wrong password = decryption fails, you don't see
|
|
other vaults' contents.</li>
|
|
<li>same protocol as <a href="https://unsandbox.com/blog/vault-encryption-design"
|
|
target="_blank">unsandbox's vault design</a>, implemented
|
|
on the native <code>crypto.subtle</code> API instead of a
|
|
shipped CryptoJS bundle. source:
|
|
<a href="crypto.js" target="_blank"><code>crypto.js</code></a>.</li>
|
|
<li>passwords are never sent anywhere — not to lumbda.com,
|
|
not to a backend, not to a worker. nothing to leak in
|
|
transit because nothing transits.</li>
|
|
<li><strong>ephemeral</strong> skips the vault entirely —
|
|
nothing is written to disk; closing the tab loses everything.
|
|
use this on a shared machine when persistence would be a
|
|
footgun.</li>
|
|
</ul>
|
|
</details>
|
|
<input id="password" type="password" autocomplete="off" autofocus placeholder="password">
|
|
<div class="lock-row">
|
|
<button id="unlock" class="primary">unlock vault</button>
|
|
<button id="fresh" class="secondary" title="skip the vault, run ephemerally — transcripts vanish on reload">ephemeral</button>
|
|
</div>
|
|
<p class="lock-note" id="lock-note"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<main id="repl-stream" class="repl-stream" hidden>
|
|
<section class="tabbar" id="tabbar">
|
|
<div class="tabs" id="tabs"></div>
|
|
<button id="new-tab" class="ghost" title="new repl session">+</button>
|
|
<span class="spacer"></span>
|
|
<button id="reset-tier" class="ghost" title="reboot the worker for the current tab — state lost">↻ reboot tier</button>
|
|
<button id="clear-log" class="ghost" title="clear the transcript">clear log</button>
|
|
<button id="cancel" class="ghost" disabled>cancel</button>
|
|
<button id="lock" class="ghost" title="lock vault — passes back to lock screen">lock</button>
|
|
</section>
|
|
<section class="portal-bar" id="portal-bar">
|
|
<span class="portal-label" title="save the current tab's tier state to your encrypted vault. comes back exactly the same after a tab close + reopen.">portals:</span>
|
|
<button id="portal-save" class="ghost" title="save tier state — names the snapshot by date+time">💾 save</button>
|
|
<div id="portal-chips" class="portal-chips"></div>
|
|
</section>
|
|
<div id="transcript" class="transcript"></div>
|
|
<div class="prompt-bar" id="prompt-bar">
|
|
<span class="prompt-sigil">λ></span>
|
|
<textarea id="input" rows="1" spellcheck="false"
|
|
placeholder="(+ 1 2)"></textarea>
|
|
<select id="tier-select" title="which tier evaluates this input">
|
|
<option value="python">python (pyodide)</option>
|
|
<option value="c" selected>c (emcc)</option>
|
|
<option value="asm">asm (wat)</option>
|
|
<option value="all">all three (race)</option>
|
|
</select>
|
|
<button id="send" class="primary">send</button>
|
|
</div>
|
|
</main>
|
|
|
|
<script type="module" src="repl.js"></script>
|
|
</body>
|
|
</html>
|