@fraczak/k 6.8.0 → 6.10.1

package/scripts/build-repl-html.mjs

@@ -12,7 +12,40 @@ const workspaceRoot = path.resolve(projectRoot, "..");
 
 console.log("=== Building Self-Contained K REPL HTML ===");
 
-// 1. Scan and generate browser/vfs-data.mjs
+// 1. Node shims plugin for esbuild
+const nodeShimsPlugin = {
+  name: "node-shims",
+  setup(build) {
+    const shims = {
+      "fs": path.join(projectRoot, "browser/shims/fs.mjs"),
+      "node:fs": path.join(projectRoot, "browser/shims/fs.mjs"),
+      "path": path.join(projectRoot, "browser/shims/path.mjs"),
+      "node:path": path.join(projectRoot, "browser/shims/path.mjs"),
+      "crypto": path.join(projectRoot, "browser/shims/crypto.mjs"),
+      "node:crypto": path.join(projectRoot, "browser/shims/crypto.mjs"),
+      "buffer": path.join(projectRoot, "browser/shims/buffer.mjs"),
+      "node:buffer": path.join(projectRoot, "browser/shims/buffer.mjs"),
+      "os": path.join(projectRoot, "browser/shims/os.mjs"),
+      "node:os": path.join(projectRoot, "browser/shims/os.mjs"),
+      "process": path.join(projectRoot, "browser/shims/process.mjs"),
+      "node:process": path.join(projectRoot, "browser/shims/process.mjs"),
+      "readline": path.join(projectRoot, "browser/shims/readline.mjs"),
+      "node:readline": path.join(projectRoot, "browser/shims/readline.mjs"),
+      "url": path.join(projectRoot, "browser/shims/url.mjs"),
+      "node:url": path.join(projectRoot, "browser/shims/url.mjs"),
+      "assert": path.join(projectRoot, "browser/shims/assert.mjs"),
+      "node:assert": path.join(projectRoot, "browser/shims/assert.mjs"),
+    };
+
+    build.onResolve({ filter: /^(node:)?(fs|path|crypto|buffer|os|process|readline|url|assert)$/ }, (args) => {
+      if (shims[args.path]) {
+        return { path: shims[args.path] };
+      }
+    });
+  }
+};
+
+// 2. Scan and generate browser/vfs-data.mjs
 console.log("1. Generating VFS data...");
 const vfsFiles = {};
 
@@ -40,15 +73,48 @@ for (const filename of verifiedExamples) {
   }
 }
 
-// Add verified codecs: json.mjs, utf8.mjs, int.mjs, unit.mjs, ieee.mjs
+// Bundle verified codecs for browser VFS as 100% self-contained ES modules
 const verifiedCodecs = ["json.mjs", "utf8.mjs", "int.mjs", "unit.mjs", "ieee.mjs"];
 const codecsDir = path.join(projectRoot, "codecs");
+
+const browserCodecSdkShim = `
+export { Value, isProduct, isVariant, withPattern } from "../../Value.mjs";
+export function runCodecCLI() {}
+export function encodeToWire() {}
+export function decodeWire() {}
+export function patternFromFilter(script, options) {
+  if (typeof globalThis !== "undefined" && typeof globalThis.patternFromFilter === "function") {
+    return globalThis.patternFromFilter(script, options);
+  }
+  throw new Error("patternFromFilter is not available in browser environment");
+}
+`;
+
 for (const filename of verifiedCodecs) {
   const fullPath = path.join(codecsDir, filename);
   if (fs.existsSync(fullPath) && fs.statSync(fullPath).isFile()) {
-    const content = fs.readFileSync(fullPath, "utf8");
-    vfsFiles[filename] = content;
-    vfsFiles[`codecs/${filename}`] = content;
+    const buildRes = await esbuild.build({
+      entryPoints: [fullPath],
+      bundle: true,
+      format: "esm",
+      write: false,
+      plugins: [{
+        name: "codec-sdk-shim",
+        setup(build) {
+          build.onResolve({ filter: /(codec-sdk|pattern-k)\.mjs$/ }, (args) => ({
+            path: args.path,
+            namespace: "codec-sdk-shim"
+          }));
+          build.onLoad({ filter: /.*/, namespace: "codec-sdk-shim" }, () => ({
+            contents: browserCodecSdkShim,
+            resolveDir: path.join(codecsDir, "runtime")
+          }));
+        }
+      }]
+    });
+    const bundledContent = buildRes.outputFiles[0].text;
+    vfsFiles[filename] = bundledContent;
+    vfsFiles[`codecs/${filename}`] = bundledContent;
   }
 }
 
@@ -59,39 +125,6 @@ const vfsDataPath = path.join(projectRoot, "browser/vfs-data.mjs");
 fs.writeFileSync(vfsDataPath, vfsDataContent, "utf8");
 console.log(`   Generated ${vfsDataPath} with ${Object.keys(vfsFiles).length} files.`);
 
-// 2. Node shims plugin for esbuild
-const nodeShimsPlugin = {
-  name: "node-shims",
-  setup(build) {
-    const shims = {
-      "fs": path.join(projectRoot, "browser/shims/fs.mjs"),
-      "node:fs": path.join(projectRoot, "browser/shims/fs.mjs"),
-      "path": path.join(projectRoot, "browser/shims/path.mjs"),
-      "node:path": path.join(projectRoot, "browser/shims/path.mjs"),
-      "crypto": path.join(projectRoot, "browser/shims/crypto.mjs"),
-      "node:crypto": path.join(projectRoot, "browser/shims/crypto.mjs"),
-      "buffer": path.join(projectRoot, "browser/shims/buffer.mjs"),
-      "node:buffer": path.join(projectRoot, "browser/shims/buffer.mjs"),
-      "os": path.join(projectRoot, "browser/shims/os.mjs"),
-      "node:os": path.join(projectRoot, "browser/shims/os.mjs"),
-      "process": path.join(projectRoot, "browser/shims/process.mjs"),
-      "node:process": path.join(projectRoot, "browser/shims/process.mjs"),
-      "readline": path.join(projectRoot, "browser/shims/readline.mjs"),
-      "node:readline": path.join(projectRoot, "browser/shims/readline.mjs"),
-      "url": path.join(projectRoot, "browser/shims/url.mjs"),
-      "node:url": path.join(projectRoot, "browser/shims/url.mjs"),
-      "assert": path.join(projectRoot, "browser/shims/assert.mjs"),
-      "node:assert": path.join(projectRoot, "browser/shims/assert.mjs"),
-    };
-
-    build.onResolve({ filter: /^(node:)?(fs|path|crypto|buffer|os|process|readline|url|assert)$/ }, (args) => {
-      if (shims[args.path]) {
-        return { path: shims[args.path] };
-      }
-    });
-  }
-};
-
 // 3. Bundle browser/repl-browser.mjs
 console.log("2. Bundling with esbuild...");
 const entryPoint = path.join(projectRoot, "browser/repl-browser.mjs");
@@ -214,6 +247,25 @@ const htmlContent = `<!DOCTYPE html>
       border: 1px solid rgba(88, 166, 255, 0.3);
       padding: 2px 8px;
       border-radius: 12px;
+      cursor: pointer;
+      user-select: none;
+      transition: all 0.15s ease;
+    }
+
+    .engine-badge:hover {
+      background: rgba(88, 166, 255, 0.3);
+      border-color: rgba(88, 166, 255, 0.6);
+    }
+
+    .engine-badge.js-mode {
+      background: rgba(240, 180, 41, 0.15);
+      color: #e3b341;
+      border-color: rgba(240, 180, 41, 0.4);
+    }
+
+    .engine-badge.js-mode:hover {
+      background: rgba(240, 180, 41, 0.3);
+      border-color: rgba(240, 180, 41, 0.7);
     }
 
     .status-indicator {
@@ -1531,110 +1583,6 @@ const htmlContent = `<!DOCTYPE html>
       min-height: 20px;
     }
 
-    /* Input Popup Modal */
-    .input-popup-dialog {
-      max-width: 580px;
-      width: 90%;
-    }
-
-    .input-popup-body {
-      padding: 16px 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    .input-popup-banner {
-      background: var(--bg-base);
-      border: 1px solid var(--border-color);
-      border-radius: 6px;
-      padding: 10px 14px;
-      font-size: 12px;
-      color: var(--text-main);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .input-popup-form-row {
-      display: flex;
-      gap: 12px;
-      flex-wrap: wrap;
-    }
-
-    .input-popup-field {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .input-popup-textarea {
-      width: 100%;
-      background: #090d12;
-      color: var(--text-main);
-      border: 1px solid var(--border-color);
-      border-radius: 6px;
-      padding: 10px 12px;
-      font-family: var(--font-mono);
-      font-size: 13px;
-      line-height: 1.4;
-      resize: vertical;
-      min-height: 90px;
-      max-height: 280px;
-    }
-
-    .input-popup-textarea:focus {
-      border-color: var(--border-focus);
-      box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
-      outline: none;
-    }
-
-    .input-popup-samples {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 11px;
-      color: var(--text-muted);
-      flex-wrap: wrap;
-    }
-
-    .samples-list {
-      display: flex;
-      gap: 6px;
-      flex-wrap: wrap;
-    }
-
-    .sample-pill {
-      background: var(--bg-subtle);
-      border: 1px solid var(--border-color);
-      color: var(--color-prompt);
-      padding: 2px 8px;
-      border-radius: 12px;
-      cursor: pointer;
-      font-family: var(--font-mono);
-      font-size: 11px;
-      transition: all 0.15s;
-    }
-
-    .sample-pill:hover {
-      background: rgba(88, 166, 255, 0.2);
-      border-color: var(--border-focus);
-    }
-
-    .input-popup-status {
-      font-size: 12px;
-      min-height: 22px;
-      border-radius: 4px;
-      padding: 4px 8px;
-      background: rgba(22, 27, 34, 0.5);
-    }
-
-    .input-popup-actions {
-      display: flex;
-      justify-content: flex-end;
-      gap: 8px;
-      border-top: 1px solid var(--border-color);
-      padding-top: 12px;
-    }
 
     /* Responsive */
     @media (max-width: 768px) {
@@ -1680,7 +1628,7 @@ const htmlContent = `<!DOCTYPE html>
       <div class="nav-left">
         <div class="brand">
           <span class="brand-name">k repl</span>
-          <span class="engine-badge">wasm-in-process</span>
+          <span id="engine-badge" class="engine-badge" title="Click to toggle engine (wasm/js)">wasm-in-process</span>
         </div>
         <div class="status-indicator">
           <span id="status-dot" class="status-dot ready"></span>
@@ -1706,18 +1654,22 @@ const htmlContent = `<!DOCTYPE html>
               <option value="expr:{10 x, 5 y} plus">{10 x, 5 y} plus (bits)</option>
               <option value="expr:1 succ">1 succ</option>
               <option value="expr:{10 int x, 5 int y} plus">{10 int x, 5 int y} plus (int)</option>
-              <option value="expr::codes">:codes (list types)</option>
+              <option value="expr::types">:types (list types)</option>
               <option value="expr::rels">:rels (list relations)</option>
+              <option value="expr::engine">:engine (show engine)</option>
+              <option value="expr::engine wasm">:engine wasm</option>
+              <option value="expr::engine js">:engine js</option>
             </optgroup>
             <optgroup label="Codecs &amp; Format Adapters">
               <option value="expr::codecs">:codecs</option>
               <option value="expr::input">:input (interactive dialog)</option>
-              <option value="expr::codec load int">:codec load int</option>
-              <option value="expr::codec load utf8">:codec load utf8</option>
-              <option value="expr::codec load json">:codec load json</option>
-              <option value="expr::codec load ieee">:codec load ieee</option>
-              <option value="expr::codec load unit">:codec load unit</option>
-              <option value="expr::input {float64 x, string n} json">:input {float64 x, string n} json</option>
+              <option value="expr::codec load int.mjs">:codec load int.mjs</option>
+              <option value="expr::codec load utf8.mjs">:codec load utf8.mjs</option>
+              <option value="expr::codec load json.mjs">:codec load json.mjs</option>
+              <option value="expr::codec load ieee.mjs">:codec load ieee.mjs</option>
+              <option value="expr::codec load unit.mjs">:codec load unit.mjs</option>
+              <option value="expr::input json.mjs {&quot;a&quot;:12,&quot;b&quot;:&quot;hello&quot;}">:input json.mjs {"a":12,"b":"hello"}</option>
+              <option value="expr::input int.mjs [0,1,2]">:input int.mjs [0,1,2]</option>
             </optgroup>
           </select>
           <button id="btn-load-example" class="btn btn-primary">Load</button>
@@ -1735,8 +1687,6 @@ const htmlContent = `<!DOCTYPE html>
         <!-- Codecs Subsystem -->
         <button id="btn-codecs" class="btn btn-secondary" title="Codecs &amp; Custom Serializers (:codecs)">⚙ Codecs <span id="codecs-count-badge" class="badge-count">0</span></button>
 
-        <!-- Codec Input Popup -->
-        <button id="btn-input-popup" class="btn btn-secondary" title="Open Codec Input Popup (:input)">📥 Input</button>
 
         <!-- Clear -->
         <button id="btn-clear" class="btn btn-secondary" title="Clear terminal screen (Ctrl+L)">⌫ Clear</button>
@@ -1805,245 +1755,25 @@ const htmlContent = `<!DOCTYPE html>
       <div class="modal-dialog codecs-dialog">
         <div class="modal-header">
           <div style="display: flex; align-items: center; gap: 10px;">
-            <h3>Format Codecs &amp; Custom Serializers / Deserializers</h3>
+            <h3>Enabled Codecs</h3>
             <span class="engine-badge">:codecs subsystem</span>
           </div>
           <button id="btn-close-codecs" class="btn-close">&times;</button>
         </div>
         <div class="modal-body codecs-body">
-          <!-- Section 1: Available Format Codecs -->
-          <div class="codecs-section">
-            <div class="codecs-section-header">
-              <h4>Available Format Codecs</h4>
-              <span class="section-subtitle">External adapters translating between text formats and typed <code>(filter, tree)</code> values. Click 'Load' to activate in current session.</span>
-            </div>
-            <div class="codec-grid">
-              <!-- int card -->
-              <div class="codec-card" id="card-codec-int">
-                <div class="codec-card-top">
-                  <div class="codec-card-title">
-                    <span class="codec-icon">🔢</span>
-                    <span class="codec-name">int</span>
-                    <span id="codec-badge-int" class="codec-status-badge">Inactive</span>
-                  </div>
-                  <div class="codec-types">Target: <span class="badge-type">$ int</span></div>
-                  <div class="codec-desc">Converts decimal integers to/from <code>$ int = &lt; bits '+', bits '-' &gt;</code>.</div>
-                </div>
-                <div class="codec-card-footer">
-                  <div class="codec-caps">
-                    <span class="cap-badge print">Serializer</span>
-                    <span class="cap-badge parse">Deserializer</span>
-                  </div>
-                  <button id="btn-toggle-codec-int" class="btn btn-sm btn-primary">Load</button>
-                </div>
-              </div>
-
-              <!-- utf8 card -->
-              <div class="codec-card" id="card-codec-utf8">
-                <div class="codec-card-top">
-                  <div class="codec-card-title">
-                    <span class="codec-icon">🔤</span>
-                    <span class="codec-name">utf8</span>
-                    <span id="codec-badge-utf8" class="codec-status-badge">Inactive</span>
-                  </div>
-                  <div class="codec-types">Target: <span class="badge-type">$ string ($ utf8)</span></div>
-                  <div class="codec-desc">Converts text to/from <code>$ string</code>, a list of Unicode scalar values (<code>$ unicode</code>) partitioned by Unicode planes.</div>
-                </div>
-                <div class="codec-card-footer">
-                  <div class="codec-caps">
-                    <span class="cap-badge print">Serializer</span>
-                    <span class="cap-badge parse">Deserializer</span>
-                  </div>
-                  <button id="btn-toggle-codec-utf8" class="btn btn-sm btn-primary">Load</button>
-                </div>
-              </div>
-
-              <!-- json card -->
-              <div class="codec-card" id="card-codec-json">
-                <div class="codec-card-top">
-                  <div class="codec-card-title">
-                    <span class="codec-icon">📋</span>
-                    <span class="codec-name">json</span>
-                    <span id="codec-badge-json" class="codec-status-badge">Inactive</span>
-                  </div>
-                  <div class="codec-types">Target: <span class="badge-type parameterized">Pattern / Universal</span></div>
-                  <div class="codec-desc">Universal / pattern-driven codec. Deserializes JSON text into <i>k</i> values using a pattern expression (e.g. <code>:input ? {float64 x, string n} json</code> or <code>:input json</code>), or serializes <i>k</i> values to JSON.</div>
-                </div>
-                <div class="codec-card-footer">
-                  <div class="codec-caps">
-                    <span class="cap-badge print">Serializer</span>
-                    <span class="cap-badge parse">Deserializer</span>
-                  </div>
-                  <button id="btn-toggle-codec-json" class="btn btn-sm btn-primary">Load</button>
-                </div>
-              </div>
-
-              <!-- ieee card -->
-              <div class="codec-card" id="card-codec-ieee">
-                <div class="codec-card-top">
-                  <div class="codec-card-title">
-                    <span class="codec-icon">🧮</span>
-                    <span class="codec-name">ieee</span>
-                    <span id="codec-badge-ieee" class="codec-status-badge">Inactive</span>
-                  </div>
-                  <div class="codec-types">Target: <span class="badge-type">$ float64</span></div>
-                  <div class="codec-desc">IEEE 754 floating point numbers serialized to/from sign, exponent, and fraction fields.</div>
-                </div>
-                <div class="codec-card-footer">
-                  <div class="codec-caps">
-                    <span class="cap-badge print">Serializer</span>
-                    <span class="cap-badge parse">Deserializer</span>
-                  </div>
-                  <button id="btn-toggle-codec-ieee" class="btn btn-sm btn-primary">Load</button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Section 2: Active Registered Codecs -->
           <div class="codecs-section">
             <div class="codecs-section-header">
-              <h4>Active Registered Codecs in Current Session</h4>
-              <span class="section-subtitle">Active codecs intercept evaluation formatting and :input commands</span>
+              <h4>Active Codecs in Current Session</h4>
+              <span class="section-subtitle">Codecs format evaluation results and parse input for <code>:input &lt;codec.mjs&gt; [text]</code>. Codecs can only be loaded through <code>:codec load &lt;file.mjs&gt;</code> in the REPL or through the <b>Files</b> explorer.</span>
             </div>
-            <div class="codecs-table-container">
-              <table class="codec-table">
-                <thead>
-                  <tr>
-                    <th>Codec Name</th>
-                    <th>Target Type Binding</th>
-                    <th>Capabilities</th>
-                    <th>Source</th>
-                    <th>Action</th>
-                  </tr>
-                </thead>
-                <tbody id="active-codecs-tbody">
-                  <!-- dynamically populated by renderCodecsModal() -->
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <!-- Section 3: Custom Codec Studio -->
-          <div class="codecs-section">
-            <div class="codecs-section-header">
-              <h4>Custom Serializer &amp; Deserializer Studio</h4>
-              <span class="section-subtitle">Codecs convert external text representations to/from <i>k</i> values defined as pairs <code>(filter, tree)</code>.</span>
-            </div>
-
-            <div class="codec-studio-box">
-              <div class="studio-top-bar">
-                <div class="studio-field">
-                  <label for="codec-preset-select">Preset Template:</label>
-                  <select id="codec-preset-select">
-                    <option value="yn">Yes / No ($ yes_no)</option>
-                    <option value="hex">Hexadecimal 0x... ($ int)</option>
-                    <option value="currency">Currency $XX.YY ($ int cents)</option>
-                    <option value="blank">Blank / Custom</option>
-                  </select>
-                </div>
-
-                <div class="studio-field">
-                  <label for="codec-custom-name">Codec Name:</label>
-                  <input type="text" id="codec-custom-name" placeholder="e.g. yn" value="yn">
-                </div>
-
-                <div class="studio-field" style="flex: 1;">
-                  <label for="codec-custom-type">Target Type:</label>
-                  <select id="codec-custom-type">
-                    <!-- populated dynamically from state.typeAliases -->
-                  </select>
-                </div>
-              </div>
-
-              <div class="studio-editors-grid">
-                <div class="studio-editor-pane">
-                  <div class="pane-title">
-                    <span class="cap-badge parse">Deserializer (parse)</span>
-                    <span class="pane-hint"><code>(text, context) =&gt; Value</code></span>
-                  </div>
-                  <textarea id="codec-custom-parse" class="codec-code-area" spellcheck="false" rows="7"></textarea>
-                </div>
-
-                <div class="studio-editor-pane">
-                  <div class="pane-title">
-                    <span class="cap-badge print">Serializer (print)</span>
-                    <span class="pane-hint"><code>(value, context) =&gt; string</code></span>
-                  </div>
-                  <textarea id="codec-custom-print" class="codec-code-area" spellcheck="false" rows="7"></textarea>
-                </div>
-              </div>
-
-              <div class="studio-test-bar">
-                <div class="studio-test-input-wrap">
-                  <label for="codec-test-input">Test Input:</label>
-                  <input type="text" id="codec-test-input" placeholder="e.g. yes or 0xFF or $42.50" value="yes">
-                </div>
-                <button id="btn-test-parse" class="btn btn-secondary btn-sm" title="Test parse function against test input">🧪 Test Parse</button>
-                <button id="btn-test-print" class="btn btn-secondary btn-sm" title="Test print function against current REPL value">🖨 Test Print</button>
-                <button id="btn-register-codec" class="btn btn-primary btn-sm" title="Register codec in active REPL state">✓ Register in REPL</button>
-                <button id="btn-save-codec-vfs" class="btn btn-secondary btn-sm" title="Export as standalone .mjs file to VFS">💾 Save to VFS</button>
-              </div>
-
-              <div id="codec-studio-status" class="studio-status-box"></div>
+            <div id="enabled-codecs-grid" class="codec-grid">
+              <!-- dynamically populated: cards for only enabled/loaded codecs -->
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Input Popup Modal -->
-    <div id="input-popup-modal" class="modal">
-      <div class="modal-dialog input-popup-dialog">
-        <div class="modal-header">
-          <div style="display: flex; align-items: center; gap: 10px;">
-            <h3>📥 Code Input</h3>
-            <span class="engine-badge">:input directive</span>
-          </div>
-          <button id="btn-close-input-popup" class="btn-close">&times;</button>
-        </div>
-        <div class="modal-body input-popup-body">
-          <div id="input-popup-banner" class="input-popup-banner">
-            <span id="input-popup-hint">Enter input string to deserialize into a K value:</span>
-          </div>
-
-          <div class="input-popup-form-row">
-            <div class="studio-field" style="flex: 1;">
-              <label for="input-popup-type">Target Pattern:</label>
-              <input type="text" id="input-popup-type" list="input-popup-type-list" placeholder="e.g. (...) or $ int or ? {float64 x, string n}" autocomplete="off">
-              <datalist id="input-popup-type-list"></datalist>
-            </div>
-            <div class="studio-field" style="flex: 1;">
-              <label for="input-popup-codec">Deserializer Codec:</label>
-              <select id="input-popup-codec">
-                <!-- populated dynamically -->
-              </select>
-              <div id="input-popup-codec-hint" class="input-popup-codec-hint" style="font-size:11px;color:var(--text-muted);margin-top:4px;"></div>
-            </div>
-          </div>
-
-          <div class="input-popup-field">
-            <div class="pane-title" style="margin-bottom: 6px;">
-              <label for="input-popup-text" style="font-size: 11px; color: var(--text-muted); font-weight: 500;">Input String / Payload:</label>
-              <span class="pane-hint">Enter: submit &bull; Shift+Enter: newline</span>
-            </div>
-            <textarea id="input-popup-text" class="input-popup-textarea" rows="4" spellcheck="false" placeholder="Type or paste input string (e.g. 42, yes, hello, {...})..."></textarea>
-          </div>
-
-          <div id="input-popup-samples" class="input-popup-samples">
-            <span class="samples-label">Quick samples:</span>
-            <div id="input-samples-list" class="samples-list"></div>
-          </div>
-
-          <div id="input-popup-status" class="input-popup-status"></div>
-
-          <div class="input-popup-actions">
-            <button id="btn-cancel-input" class="btn btn-secondary">Cancel</button>
-            <button id="btn-submit-input" class="btn btn-primary">✓ Submit to REPL</button>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <!-- Help Modal -->
     <div id="help-modal" class="modal">
@@ -2148,17 +1878,16 @@ const htmlContent = `<!DOCTYPE html>
           <div class="help-section">
             <h4>REPL Commands</h4>
             <table class="help-table">
+              <tr><td><code>:engine [wasm|js]</code></td><td>Display or switch evaluation engine (<code>wasm</code> or <code>js</code>)</td></tr>
               <tr><td><code>:load &lt;file&gt;</code></td><td>Load a <code>.k</code> source or <code>.klib</code> library into current state</td></tr>
-              <tr><td><code>:t &lt;name&gt;</code></td><td>Display the derived type of relation <code>&lt;name&gt;</code></td></tr>
-              <tr><td><code>:d &lt;name&gt;</code></td><td>Display definition of relation <code>&lt;name&gt;</code></td></tr>
+              <tr><td><code>:rel &lt;name&gt;</code></td><td>Display definition of relation <code>&lt;name&gt;</code></td></tr>
               <tr><td><code>:type &lt;name&gt;</code></td><td>Display definition of type <code>&lt;name&gt;</code></td></tr>
-              <tr><td><code>:codes</code></td><td>List all type aliases and canonical hashes</td></tr>
+              <tr><td><code>:types</code></td><td>List all type aliases and canonical hashes</td></tr>
               <tr><td><code>:rels</code></td><td>List all relation aliases</td></tr>
-              <tr><td><code>:codecs</code></td><td>List all registered format codecs</td></tr>
-              <tr><td><code>:codec load &lt;name|file&gt;</code></td><td>Load a format codec (<code>int</code>, <code>utf8</code>, <code>json</code>, <code>ieee</code>, <code>unit</code>) or file</td></tr>
-              <tr><td><code>:codec unload &lt;name&gt;</code></td><td>Unload a registered codec</td></tr>
-              <tr><td><code>:input [&lt;filter=(...)&gt; [codec]]</code></td><td>Read next input line using specified codec (opens dialog in browser)</td></tr>
-              <tr><td><code>:time &lt;expr&gt;</code></td><td>Evaluate <code>&lt;expr&gt;</code> and report execution time</td></tr>
+              <tr><td><code>:codecs</code></td><td>List all loaded format codecs</td></tr>
+              <tr><td><code>:codec load &lt;file.mjs&gt;</code></td><td>Load a codec from file (or load through Files)</td></tr>
+              <tr><td><code>:codec unload &lt;file.mjs&gt;</code></td><td>Unload a loaded codec</td></tr>
+              <tr><td><code>:input &lt;codec.mjs&gt; [text]</code></td><td>Parse input using specified codec (opens dialog if text omitted)</td></tr>
               <tr><td><code>:klib &lt;file&gt;</code></td><td>Export current state as a <code>.klib</code> binary file</td></tr>
               <tr><td><code>:reset</code></td><td>Clear state and reset to initial environment</td></tr>
               <tr><td><code>:help</code></td><td>Show command reference</td></tr>

package/scripts/run-tests.mjs

@@ -19,6 +19,7 @@ const tests = [
   ["tests/test-hash-fuzz.mjs", node, ["tests/test-hash-fuzz.mjs"]],
   ["tests/test-hash-normalization.mjs", node, ["tests/test-hash-normalization.mjs"]],
   ["tests/test-structural-values.mjs", node, ["tests/test-structural-values.mjs"]],
+  ["tests/test-codecs.mjs", node, ["tests/test-codecs.mjs"]],
   ["tests/test-deep-wire-value.mjs", node, ["tests/test-deep-wire-value.mjs"]],
   ["tests/test-k-object.mjs", node, ["tests/test-k-object.mjs"]],
   ["tests/test-kir.mjs", node, ["tests/test-kir.mjs"]],