@fraczak/k 6.8.0 → 6.10.1

package/browser/repl-browser.mjs

@@ -14,18 +14,25 @@ import {
   formatDuration,
   resolveInputTypeHash,
   resolveInputPattern,
-  valueForPattern
+  valueForPattern,
+  codecNames,
+  ensureEnveloped,
+  patternFromFilter
 } from "../repl.mjs";
-import { Value, isProduct, isVariant } from "../Value.mjs";
+import { Value, isProduct, isVariant, withPattern } from "../Value.mjs";
 import { encodeLibrary } from "../object.mjs";
 import { setVfsFile, getVfsFile, getAllVfsFiles } from "./shims/fs.mjs";
 import { createOutputEntryElement } from "./tree-view.mjs";
 
-// Make Value and helpers globally available for custom codecs
+// Make Value and helpers globally available in browser console
 if (typeof window !== "undefined") {
-  window.Value = Value;
-  window.isProduct = isProduct;
-  window.isVariant = isVariant;
+  Object.assign(window, {
+    Value,
+    isProduct,
+    isVariant,
+    withPattern,
+    patternFromFilter
+  });
 }
 
 // Global REPL state
@@ -60,18 +67,8 @@ let helpModal;
 let dropOverlay;
 let codecsModal;
 let codecsBadgeEl;
-let activeCodecsTbody;
-let codecTypeSelect;
-
-// Input Popup Modal Elements
-let inputPopupModal;
-let inputPopupType;
-let inputPopupCodec;
-let inputPopupText;
-let inputPopupStatus;
-let inputPopupHint;
-let inputPopupCodecHint;
-let inputSamplesList;
+let enabledCodecsGrid;
+
 
 function escapeHtml(str) {
   return String(str)
@@ -115,17 +112,7 @@ function ansiToHtml(str) {
 
 function countActiveCodecs() {
   const store = state.codecs || {};
-  let count = 0;
-  const seen = new Set();
-  for (const list of Object.values(store)) {
-    for (const c of list) {
-      if (!seen.has(c.name)) {
-        seen.add(c.name);
-        count++;
-      }
-    }
-  }
-  return count;
+  return Object.keys(store).length;
 }
 
 function updateCodecsBadge() {
@@ -264,12 +251,6 @@ export async function executeCommand(input) {
   const trimmed = input.trim();
   if (!trimmed && !state.pendingInput) return;
 
-  // Intercept :input without args -> open input popup
-  if (trimmed === ":input") {
-    openInputPopup();
-    return;
-  }
-
   // Add to history
   if (history.length === 0 || history[history.length - 1] !== input) {
     history.push(input);
@@ -321,14 +302,21 @@ export async function executeCommand(input) {
   // Re-create completer with updated state
   completer = createCompleter(state);
   updateCodecsBadge();
+  updateEngineUI();
   if (codecsModal && codecsModal.classList.contains("open")) {
     renderCodecsModal();
   }
+}
 
-  // If :input <type> [codec] was executed, state.pendingInput is now set!
-  // Open the Input Popup immediately to prompt the user for the input string!
-  if (errors.length === 0 && state.pendingInput && trimmed.startsWith(":input ")) {
-    openInputPopup();
+function updateEngineUI() {
+  const badge = document.getElementById("engine-badge");
+  if (!badge) return;
+  badge.textContent = state.engine === "js" ? "js-in-process" : "wasm-in-process";
+  badge.title = `Engine: ${state.engine} (click to toggle wasm/js)`;
+  if (state.engine === "js") {
+    badge.classList.add("js-mode");
+  } else {
+    badge.classList.remove("js-mode");
   }
 }
 
@@ -353,14 +341,7 @@ function handleAutocomplete() {
   }
 
   if (matches.length === 1) {
-    hideAutocomplete();
-    const tokenStart = lineBeforeCursor.lastIndexOf(" ") + 1;
-    const match = matches[0];
-    const beforeToken = text.slice(0, cursorPos - (lineBeforeCursor.length - tokenStart));
-    const afterCursor = text.slice(cursorPos);
-    inputEl.value = beforeToken + match + (afterCursor.startsWith(" ") ? "" : " ") + afterCursor;
-    inputEl.selectionStart = inputEl.selectionEnd = beforeToken.length + match.length + 1;
-    adjustInputHeight();
+    applyAutocomplete(matches[0]);
     return;
   }
 
@@ -402,11 +383,12 @@ function applyAutocomplete(match) {
   const text = inputEl.value;
   const cursorPos = inputEl.selectionStart;
   const lineBeforeCursor = text.slice(0, cursorPos).split("\n").pop();
-  const tokenStart = Math.max(0, lineBeforeCursor.lastIndexOf(" ") + 1);
-  const beforeToken = text.slice(0, cursorPos - (lineBeforeCursor.length - tokenStart));
+  const lineStart = cursorPos - lineBeforeCursor.length;
+  const beforeLine = text.slice(0, lineStart);
   const afterCursor = text.slice(cursorPos);
-  inputEl.value = beforeToken + match + (afterCursor.startsWith(" ") ? "" : " ") + afterCursor;
-  inputEl.selectionStart = inputEl.selectionEnd = beforeToken.length + match.length + 1;
+  const insertSpace = (match.endsWith("/") || afterCursor.startsWith(" ")) ? "" : " ";
+  inputEl.value = beforeLine + match + insertSpace + afterCursor;
+  inputEl.selectionStart = inputEl.selectionEnd = beforeLine.length + match.length + insertSpace.length;
   hideAutocomplete();
   adjustInputHeight();
   inputEl.focus();
@@ -566,98 +548,6 @@ function exportKlib() {
 // CODECS SUBSYSTEM UI & CONTROLS
 // ==========================================
 
-const CODEC_PRESETS = {
-  yn: {
-    name: "yn",
-    type: "yes_no",
-    universal: false,
-    parse: `// Parse 'yes', 'no', 'true', 'false' into $yes_no (< {} yes, {} no >)
-const tag = text.trim().toLowerCase();
-if (tag === "yes" || tag === "true" || tag === "1") {
-  return Value.variant("yes", Value.product({}));
-}
-if (tag === "no" || tag === "false" || tag === "0") {
-  return Value.variant("no", Value.product({}));
-}
-throw new Error("Expected yes/no or true/false");`,
-    print: `// Serialize yes_no value to YES / NO
-return value.tag === "yes" ? "YES" : "NO";`
-  },
-  hex: {
-    name: "hex",
-    type: "int",
-    universal: false,
-    parse: `// Parse decimal or hex (e.g. 0x2a, 42, -0x10) into $int
-let str = text.trim();
-let sign = "+";
-if (str.startsWith("-")) { sign = "-"; str = str.slice(1).trim(); }
-else if (str.startsWith("+")) { str = str.slice(1).trim(); }
-
-const num = str.startsWith("0x") || str.startsWith("0X") ? BigInt(str) : BigInt(str);
-if (num === 0n) sign = "+";
-
-const bitChars = num === 0n ? ["0"] : num.toString(2).split("");
-let v = Value.variant("_", Value.product({}));
-for (let i = bitChars.length - 1; i >= 0; i--) {
-  v = Value.variant(bitChars[i], v);
-}
-return Value.variant(sign, v);`,
-    print: `// Serialize $int to hexadecimal string (0x...)
-if (!isVariant(value) || (value.tag !== "+" && value.tag !== "-")) {
-  throw new Error("Not a valid int value");
-}
-let bits = "";
-let node = value.value;
-while (isVariant(node) && node.tag !== "_") {
-  bits += node.tag;
-  node = node.value;
-}
-const n = bits === "" ? 0n : BigInt("0b" + bits);
-const hex = "0x" + n.toString(16).toUpperCase();
-return (value.tag === "-" && n !== 0n ? "-" : "") + hex;`
-  },
-  currency: {
-    name: "currency",
-    type: "int",
-    universal: false,
-    parse: `// Parse currency e.g. $42.50 or $100 into cents int
-const clean = text.trim().replace(/^\\$/, "").trim();
-const parts = clean.split(".");
-const dollars = BigInt(parts[0] || "0");
-const cents = BigInt((parts[1] || "0").padEnd(2, "0").slice(0, 2));
-const total = dollars * 100n + cents;
-
-const bitChars = total === 0n ? ["0"] : total.toString(2).split("");
-let v = Value.variant("_", Value.product({}));
-for (let i = bitChars.length - 1; i >= 0; i--) {
-  v = Value.variant(bitChars[i], v);
-}
-return Value.variant("+", v);`,
-    print: `// Format cents int as currency string ($X.XX)
-let bits = "";
-let node = value.value;
-while (isVariant(node) && node.tag !== "_") {
-  bits += node.tag;
-  node = node.value;
-}
-const n = bits === "" ? 0n : BigInt("0b" + bits);
-const dollars = n / 100n;
-const cents = (n % 100n).toString().padStart(2, "0");
-return "$" + dollars.toString() + "." + cents;`
-  },
-  blank: {
-    name: "custom",
-    type: "",
-    universal: false,
-    parse: `// Parse text string and return a K Value
-// Available: Value.product({ field: val }), Value.variant("tag", val)
-return Value.product({});`,
-    print: `// Serialize K Value into string
-// value is a Value instance: inspect value.fields or value.tag & value.value
-return String(value);`
-  }
-};
-
 function openCodecsModal() {
   if (!codecsModal) return;
   renderCodecsModal();
@@ -670,567 +560,105 @@ function closeCodecsModal() {
 
 function renderCodecsModal() {
   updateCodecsBadge();
+  const grid = enabledCodecsGrid || document.getElementById("enabled-codecs-grid");
+  if (!grid) return;
+  grid.innerHTML = "";
 
-  // 1. Built-in codec buttons state
-  const standardCodecs = ["int", "utf8", "json", "ieee"];
-  for (const name of standardCodecs) {
-    const btn = document.getElementById(`btn-toggle-codec-${name}`);
-    const badge = document.getElementById(`codec-badge-${name}`);
-    const isLoaded = isCodecRegistered(name);
-    if (btn) {
-      btn.textContent = isLoaded ? "Unload" : "Load";
-      btn.className = isLoaded ? "btn btn-sm btn-secondary" : "btn btn-sm btn-primary";
-    }
-    if (badge) {
-      badge.textContent = isLoaded ? "Active" : "Inactive";
-      badge.className = isLoaded ? "codec-status-badge active" : "codec-status-badge";
-    }
-  }
-
-  // 2. Populate target type dropdown
-  if (codecTypeSelect) {
-    const prev = codecTypeSelect.value;
-    codecTypeSelect.innerHTML = `<option value="">-- Choose Type Alias or Code Hash --</option>`;
-    const typeGroup = document.createElement("optgroup");
-    typeGroup.label = "Available Type Aliases in State";
-    const aliases = Object.entries(state.typeAliases || {}).sort(([a], [b]) => a.localeCompare(b));
-    for (const [alias, hash] of aliases) {
-      const opt = document.createElement("option");
-      opt.value = alias;
-      opt.textContent = `$ ${alias} (${hash.slice(0, 10)}...)`;
-      typeGroup.appendChild(opt);
-    }
-    codecTypeSelect.appendChild(typeGroup);
-
-    const universalOpt = document.createElement("option");
-    universalOpt.value = "*";
-    universalOpt.textContent = "* (Universal - all types)";
-    codecTypeSelect.appendChild(universalOpt);
-
-    if (prev) codecTypeSelect.value = prev;
-  }
-
-  // 3. Render active codecs table
-  if (activeCodecsTbody) {
-    activeCodecsTbody.innerHTML = "";
-    const store = state.codecs || {};
-    const entries = [];
-    for (const [codeHash, list] of Object.entries(store)) {
-      for (const c of list) {
-        entries.push({ codeHash, ...c });
-      }
-    }
-
-    if (entries.length === 0) {
-      const tr = document.createElement("tr");
-      tr.innerHTML = `<td colspan="5" style="text-align:center;color:var(--text-muted);padding:16px;">No codecs currently loaded. Load a built-in codec or register a custom serializer/deserializer below.</td>`;
-      activeCodecsTbody.appendChild(tr);
-      return;
-    }
-
-    // Invert type aliases for display
-    const hashToAlias = {};
-    for (const [name, hash] of Object.entries(state.typeAliases || {})) {
-      hashToAlias[hash] = name;
-    }
-
-    for (const entry of entries) {
-      const tr = document.createElement("tr");
-
-      const nameTd = document.createElement("td");
-      nameTd.className = "codec-cell-name";
-      nameTd.textContent = entry.name;
-      tr.appendChild(nameTd);
-
-      const typeTd = document.createElement("td");
-      typeTd.className = "codec-cell-type";
-      if (entry.codeHash === "*") {
-        typeTd.innerHTML = `<span class="badge-type universal">Universal (*)</span>`;
-      } else {
-        const alias = hashToAlias[entry.codeHash];
-        typeTd.innerHTML = `<span class="badge-type">${alias ? `$${alias} ` : ""}<code title="${entry.codeHash}">${entry.codeHash.slice(0, 10)}...</code></span>`;
-      }
-      tr.appendChild(typeTd);
-
-      const capTd = document.createElement("td");
-      const caps = [];
-      if (typeof entry.print === "function") caps.push(`<span class="cap-badge print">Serializer</span>`);
-      if (typeof entry.parse === "function") caps.push(`<span class="cap-badge parse">Deserializer</span>`);
-      capTd.innerHTML = caps.join(" ");
-      tr.appendChild(capTd);
-
-      const srcTd = document.createElement("td");
-      srcTd.className = "codec-cell-src";
-      srcTd.textContent = entry.source ? (entry.source === "built-in" ? "Built-in" : entry.source.split("/").pop()) : "Custom";
-      tr.appendChild(srcTd);
-
-      const actTd = document.createElement("td");
-      const unloadBtn = document.createElement("button");
-      unloadBtn.className = "btn btn-sm btn-danger";
-      unloadBtn.textContent = "Unload";
-      unloadBtn.onclick = () => {
-        executeCommand(`:codec unload ${entry.name}`);
-        renderCodecsModal();
-      };
-      actTd.appendChild(unloadBtn);
-      tr.appendChild(actTd);
-
-      activeCodecsTbody.appendChild(tr);
-    }
-  }
-}
-
-function isCodecRegistered(name) {
   const store = state.codecs || {};
-  for (const list of Object.values(store)) {
-    if (list.some(c => c.name === name)) return true;
-  }
-  return false;
-}
-
-function applyCodecPreset(presetKey) {
-  const preset = CODEC_PRESETS[presetKey];
-  if (!preset) return;
-  const nameInput = document.getElementById("codec-custom-name");
-  const parseArea = document.getElementById("codec-custom-parse");
-  const printArea = document.getElementById("codec-custom-print");
-
-  if (nameInput) nameInput.value = preset.name;
-  if (parseArea) parseArea.value = preset.parse;
-  if (printArea) printArea.value = preset.print;
-  if (codecTypeSelect) {
-    if (preset.type) {
-      codecTypeSelect.value = preset.type;
-    }
-  }
-}
-
-function registerCustomCodecFromForm() {
-  const nameInput = document.getElementById("codec-custom-name");
-  const parseArea = document.getElementById("codec-custom-parse");
-  const printArea = document.getElementById("codec-custom-print");
-  const statusBox = document.getElementById("codec-studio-status");
-
-  const name = nameInput?.value.trim();
-  const rawType = codecTypeSelect?.value.trim() || "*";
-  const parseCode = parseArea?.value.trim();
-  const printCode = printArea?.value.trim();
-
-  if (!name) {
-    if (statusBox) statusBox.innerHTML = `<span class="line-error">Codec name is required.</span>`;
+  const entries = Object.values(store).sort((a, b) => a.name.localeCompare(b.name));
+
+  if (entries.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "codecs-empty-state";
+    empty.style.gridColumn = "1 / -1";
+    empty.style.padding = "32px 16px";
+    empty.style.textAlign = "center";
+    empty.style.color = "var(--text-muted)";
+    empty.style.background = "var(--bg-base)";
+    empty.style.border = "1px dashed var(--border-color)";
+    empty.style.borderRadius = "6px";
+    empty.innerHTML = `
+      <div style="font-size: 24px; margin-bottom: 8px;">📦</div>
+      <div style="font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 6px;">No codecs currently loaded</div>
+      <div style="font-size: 12px; line-height: 1.5;">Codecs are ordinary <code>.mjs</code> files.<br>Load a codec using <code>:codec load &lt;file.mjs&gt;</code> in the terminal, or select a codec file in <b>Files</b> and click <b>Load into REPL</b>.</div>
+    `;
+    grid.appendChild(empty);
     return;
   }
 
-  try {
-    let parseFn = null;
-    let printFn = null;
-
-    if (parseCode) {
-      parseFn = new Function(
-        "text", "context",
-        `const { Value, isProduct, isVariant } = globalThis;\n${parseCode}`
-      );
-    }
-
-    if (printCode) {
-      printFn = new Function(
-        "value", "context",
-        `const { Value, isProduct, isVariant } = globalThis;\n${printCode}`
-      );
-    }
-
-    let codeHash = "*";
-    if (rawType !== "*") {
-      codeHash = resolveInputTypeHash(state, rawType);
-    }
-
-    registerCodec(state, {
-      name,
-      codes: [codeHash],
-      universal: codeHash === "*",
-      parse: parseFn,
-      print: printFn
-    }, "<custom-studio>");
-
-    if (statusBox) {
-      statusBox.innerHTML = `<span class="line-output">✓ Successfully registered codec <b>${name}</b> for ${codeHash === "*" ? "all types" : codeHash}!</span>`;
-    }
-
-    appendSystemMessage(`⚙ Registered custom codec <b>${name}</b> (serializer/deserializer) for ${codeHash === "*" ? "all types" : codeHash}.`);
-    renderCodecsModal();
-  } catch (err) {
-    if (statusBox) {
-      statusBox.innerHTML = `<span class="line-error">Error: ${escapeHtml(err.message)}</span>`;
-    }
-  }
-}
-
-function testCustomParse() {
-  const parseArea = document.getElementById("codec-custom-parse");
-  const testInput = document.getElementById("codec-test-input");
-  const statusBox = document.getElementById("codec-studio-status");
-
-  try {
-    const parseFn = new Function(
-      "text", "context",
-      `const { Value, isProduct, isVariant } = globalThis;\n${parseArea.value}`
-    );
-    const result = parseFn(testInput.value, { Value, isProduct, isVariant, state });
-    if (statusBox) {
-      statusBox.innerHTML = `<span class="line-output"><b>Parse Result:</b> ${escapeHtml(JSON.stringify(result, null, 2))}</span>`;
-    }
-  } catch (err) {
-    if (statusBox) {
-      statusBox.innerHTML = `<span class="line-error">Parse Error: ${escapeHtml(err.message)}</span>`;
-    }
-  }
-}
-
-function testCustomPrint() {
-  const printArea = document.getElementById("codec-custom-print");
-  const statusBox = document.getElementById("codec-studio-status");
-
-  try {
-    const printFn = new Function(
-      "value", "context",
-      `const { Value, isProduct, isVariant } = globalThis;\n${printArea.value}`
-    );
-    const result = printFn(state.value, { Value, isProduct, isVariant, state });
-    if (statusBox) {
-      statusBox.innerHTML = `<span class="line-output"><b>Print Output:</b> ${escapeHtml(String(result))}</span>`;
-    }
-  } catch (err) {
-    if (statusBox) {
-      statusBox.innerHTML = `<span class="line-error">Print Error: ${escapeHtml(err.message)}</span>`;
-    }
-  }
-}
-
-function saveCustomCodecToVfs() {
-  const nameInput = document.getElementById("codec-custom-name");
-  const parseArea = document.getElementById("codec-custom-parse");
-  const printArea = document.getElementById("codec-custom-print");
-  const statusBox = document.getElementById("codec-studio-status");
-
-  const name = nameInput?.value.trim() || "custom";
-  const rawType = codecTypeSelect?.value.trim() || "*";
-  const codeHash = rawType === "*" ? "*" : state.typeAliases[rawType] || rawType;
-  const fileName = `codecs/${name}-codec.mjs`;
-
-  const fileContent = `// Custom K Codec: ${name}
-import { Value, isProduct, isVariant } from "../Value.mjs";
-
-export const name = ${JSON.stringify(name)};
-export const codes = [${JSON.stringify(codeHash)}];
-export const universal = ${codeHash === "*"};
-
-export function parse(text, context) {
-  ${parseArea?.value || ""}
-}
-
-export function print(value, context) {
-  ${printArea?.value || ""}
-}
-`;
-
-  setVfsFile(fileName, fileContent);
-  if (statusBox) {
-    statusBox.innerHTML = `<span class="line-output">💾 Saved codec file to VFS as <b>${fileName}</b></span>`;
-  }
-  appendSystemMessage(`💾 Saved codec file to VFS: <b>${fileName}</b>. You can reload it anytime via <code>:codec load ${fileName}</code>.`);
-}
-
-// ==========================================
-// CODEC INPUT POPUP SUBSYSTEM (:input)
-// ==========================================
-
-const CODEC_SAMPLES = {
-  int: ["0", "10", "42", "-15", "1000000"],
-  utf8: ["hello", "hello world", "k repl", "abc"],
-  json: ['{"x":12,"n":"Woj"}', '{"name":"Alice"}', 'true', '[1, 2, 3]'],
-  ieee: ["0.0", "3.14159", "-2.718", "1e6"],
-  yn: ["yes", "no", "true", "false"],
-  hex: ["0x2A", "0xFF", "0x1000", "-0x10"],
-  currency: ["$10.00", "$42.50", "$99.99"]
-};
-
-export function openInputPopup(preselectedType = null, preselectedCodec = null) {
-  if (!inputPopupModal) return;
-
-  populateInputPopupDropdowns(preselectedType, preselectedCodec);
-
-  if (inputPopupText) {
-    inputPopupText.value = "";
-  }
-  updateLiveValidation();
-
-  inputPopupModal.classList.add("open");
-  setTimeout(() => {
-    if (inputPopupText) inputPopupText.focus();
-  }, 50);
-}
-
-export function closeInputPopup() {
-  if (inputPopupModal) {
-    inputPopupModal.classList.remove("open");
-  }
-  if (inputEl) inputEl.focus();
-}
-
-export function cancelInputPopup() {
-  if (state.pendingInput) {
-    state.pendingInput = null;
-    updatePrompt();
-    appendSystemMessage("Input cancelled.");
-  }
-  closeInputPopup();
-}
-
-function renderInputSamples(codecName) {
-  if (!inputSamplesList) return;
-  inputSamplesList.innerHTML = "";
-  const samples = CODEC_SAMPLES[codecName] || ["()"];
-  for (const s of samples) {
-    const btn = document.createElement("span");
-    btn.className = "sample-pill";
-    btn.textContent = s;
-    btn.title = `Click to insert sample "${s}"`;
-    btn.onclick = () => {
-      if (inputPopupText) {
-        inputPopupText.value = s;
-        if (codecName === "json" && s === '{"x":12,"n":"Woj"}' && (!inputPopupType?.value || inputPopupType.value === "*")) {
-          inputPopupType.value = "{float64 x, string n}";
-          updateInputPopupCodecs();
-        }
-        inputPopupText.focus();
-        updateLiveValidation();
-      }
+  for (const entry of entries) {
+    const card = document.createElement("div");
+    card.className = "codec-card active";
+    card.id = `card-codec-${entry.name.replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+
+    const titleEl = document.createElement("div");
+    titleEl.className = "codec-card-title";
+    titleEl.innerHTML = `
+      <span class="codec-icon">📦</span>
+      <span class="codec-name">${escapeHtml(entry.name)}</span>
+      <span class="codec-status-badge active">Active</span>
+    `;
+    card.appendChild(titleEl);
+
+    let targetDesc = "Self-describing";
+    if (entry.name === "int.mjs") {
+      targetDesc = "Pattern Family: $ int & lists";
+    } else if (entry.name === "utf8.mjs") {
+      targetDesc = "$ string";
+    } else if (entry.name === "ieee.mjs") {
+      targetDesc = "$ float64";
+    } else if (entry.name === "unit.mjs") {
+      targetDesc = "{}";
+    } else if (entry.name === "json.mjs") {
+      targetDesc = "Self-describing JSON";
+    } else if (Array.isArray(entry.patterns) && entry.patterns.length > 0) {
+      targetDesc = `Pattern Family (${entry.patterns.length})`;
+    } else if (entry.pattern) {
+      targetDesc = "Pattern Recipe";
+    }
+
+    const typeDiv = document.createElement("div");
+    typeDiv.className = "codec-types";
+    typeDiv.innerHTML = `Target: <span class="badge-type">${escapeHtml(targetDesc)}</span>`;
+    card.appendChild(typeDiv);
+
+    const descDiv = document.createElement("div");
+    descDiv.className = "codec-desc";
+    const src = entry.source || entry.name;
+    descDiv.innerHTML = `Source: <code>${escapeHtml(src)}</code>`;
+    card.appendChild(descDiv);
+
+    const footer = document.createElement("div");
+    footer.className = "codec-card-footer";
+
+    const capsDiv = document.createElement("div");
+    capsDiv.className = "codec-caps";
+    const caps = [];
+    if (typeof entry.print === "function") caps.push('<span class="cap-badge print">Serializer</span>');
+    if (typeof entry.parse === "function") caps.push('<span class="cap-badge parse">Deserializer</span>');
+    capsDiv.innerHTML = caps.join(" ");
+    footer.appendChild(capsDiv);
+
+    const unloadBtn = document.createElement("button");
+    unloadBtn.className = "btn btn-sm btn-danger";
+    unloadBtn.textContent = "Unload";
+    unloadBtn.onclick = async () => {
+      await executeCommand(`:codec unload ${entry.name}`);
+      renderCodecsModal();
     };
-    inputSamplesList.appendChild(btn);
-  }
-}
+    footer.appendChild(unloadBtn);
 
-function updateInputPopupHint() {
-  if (!inputPopupHint) return;
-  const rawPattern = inputPopupType ? inputPopupType.value.trim() : "(...)";
-  const codecName = inputPopupCodec?.value || state.pendingInput?.codecName;
-  if (state.pendingInput) {
-    const displayPattern = rawPattern || state.pendingInput.rawExpr || "(...)";
-    inputPopupHint.innerHTML = `Enter input value for <b>${escapeHtml(displayPattern)}</b> using codec <b>${escapeHtml(codecName || "default")}</b>:`;
-  } else {
-    inputPopupHint.innerHTML = `Choose target pattern &amp; deserializer, then enter input string:`;
-  }
-
-  if (inputPopupCodecHint) {
-    if (codecName === "json") {
-      inputPopupCodecHint.textContent = "Parameterized codec: deserializes JSON into the specified Target Pattern.";
-    } else {
-      inputPopupCodecHint.textContent = "";
-    }
+    card.appendChild(footer);
+    grid.appendChild(card);
   }
 }
 
-function updateInputPopupCodecs() {
-  if (!inputPopupCodec) return;
-  const rawPattern = inputPopupType ? inputPopupType.value.trim() : "(...)";
-  let codeHash = null;
-  if (rawPattern && rawPattern !== "*" && rawPattern !== "(...)") {
-    try {
-      const resolved = resolveInputPattern(state, rawPattern);
-      codeHash = resolved.codeHash;
-    } catch {
-      codeHash = null;
-    }
-  }
-  const prev = inputPopupCodec.value;
-
-  inputPopupCodec.innerHTML = "";
-  const matchingCodecs = [];
+function isCodecRegistered(name) {
   const store = state.codecs || {};
-
-  const candidates = [
-    ...(codeHash ? (store[codeHash] || []) : []),
-    ...(store["*"] || [])
-  ];
-
-  const seen = new Set();
-  for (const c of candidates) {
-    if (typeof c.parse === "function" && !seen.has(c.name)) {
-      seen.add(c.name);
-      matchingCodecs.push(c.name);
-    }
-  }
-
-  const bareName = rawPattern.replace(/^(\?|\$)\s*/, "").trim();
-  if (!seen.has("json")) {
-    matchingCodecs.push("json");
-    seen.add("json");
-  }
-  if ((bareName === "int" || (codeHash && codeHash === state.typeAliases?.int)) && !seen.has("int")) {
-    matchingCodecs.push("int");
-    seen.add("int");
-  }
-  if ((bareName === "string" || bareName === "utf8" || (codeHash && (codeHash === state.typeAliases?.string || codeHash === state.typeAliases?.utf8))) && !seen.has("utf8")) {
-    matchingCodecs.push("utf8");
-    seen.add("utf8");
-  }
-  if ((bareName === "float64" || bareName === "ieee" || (codeHash && codeHash === state.typeAliases?.float64)) && !seen.has("ieee")) {
-    matchingCodecs.push("ieee");
-    seen.add("ieee");
-  }
-  if ((bareName === "yes_no" || bareName === "bool" || (codeHash && codeHash === state.typeAliases?.yes_no)) && !seen.has("yn")) {
-    matchingCodecs.push("yn");
-    seen.add("yn");
-  }
-
-  for (const name of matchingCodecs) {
-    const opt = document.createElement("option");
-    opt.value = name;
-    opt.textContent = name;
-    inputPopupCodec.appendChild(opt);
-  }
-
-  if (prev && matchingCodecs.includes(prev)) {
-    inputPopupCodec.value = prev;
-  } else if (matchingCodecs.length > 0) {
-    inputPopupCodec.value = matchingCodecs[0];
-  }
-
-  renderInputSamples(inputPopupCodec.value);
-  updateInputPopupHint();
-  updateLiveValidation();
+  return Boolean(store[name]);
 }
 
-function populateInputPopupDropdowns(preselectedPattern = null, preselectedCodec = null) {
-  if (!inputPopupType) return;
-
-  const datalist = document.getElementById("input-popup-type-list");
-  if (datalist) {
-    datalist.innerHTML = "";
-    const aliases = Object.entries(state.typeAliases || {}).sort(([a], [b]) => a.localeCompare(b));
-    for (const [alias, hash] of aliases) {
-      const opt = document.createElement("option");
-      opt.value = `$ ${alias}`;
-      opt.textContent = `$ ${alias} (${hash.slice(0, 10)}...)`;
-      datalist.appendChild(opt);
-    }
-    const universalOpt = document.createElement("option");
-    universalOpt.value = "(...)";
-    universalOpt.textContent = "(...) (Any document)";
-    datalist.appendChild(universalOpt);
-  }
 
-  let prevPattern = preselectedPattern;
-  if (!prevPattern && state.pendingInput) {
-    prevPattern = state.pendingInput.rawExpr;
-    if (!prevPattern && state.pendingInput.codeHash) {
-      const foundAlias = Object.entries(state.typeAliases || {}).find(([, h]) => h === state.pendingInput.codeHash);
-      prevPattern = foundAlias ? `$ ${foundAlias[0]}` : state.pendingInput.codeHash;
-    }
-  }
-  if (!prevPattern) {
-    prevPattern = inputPopupType.value || "(...)";
-  }
-
-  inputPopupType.value = prevPattern;
-  updateInputPopupCodecs();
-
-  const targetCodec = preselectedCodec || state.pendingInput?.codecName;
-  if (targetCodec && inputPopupCodec) {
-    inputPopupCodec.value = targetCodec;
-    renderInputSamples(targetCodec);
-  }
-}
-
-function updateLiveValidation() {
-  if (!inputPopupStatus) return;
-  const text = inputPopupText ? inputPopupText.value : "";
-  if (!text) {
-    inputPopupStatus.innerHTML = `<span style="color:var(--text-muted);font-size:11px;">Ready for input.</span>`;
-    return;
-  }
-
-  const rawPattern = inputPopupType ? inputPopupType.value.trim() : "(...)";
-  const codecName = inputPopupCodec?.value;
-  if (!rawPattern && !codecName) {
-    inputPopupStatus.innerHTML = `<span class="line-warning" style="margin:0;padding:2px 6px;">Specify a target pattern or codec first.</span>`;
-    return;
-  }
-
-  let pattern = null;
-  let codeHash = null;
-  if (rawPattern && rawPattern !== "*" && rawPattern !== "(...)") {
-    try {
-      const resolved = resolveInputPattern(state, rawPattern);
-      pattern = resolved.pattern;
-      codeHash = resolved.codeHash;
-    } catch (err) {
-      inputPopupStatus.innerHTML = `<span class="line-warning" style="margin:0;padding:2px 6px;">⚠ Pattern Error: ${escapeHtml(err.message || String(err))}</span>`;
-      return;
-    }
-  }
-
-  try {
-    const codec = resolveCodec(state, codeHash, codecName || null, "parse");
-    const resolvedPattern = pattern || (codeHash && codeHash !== "*" ? codeHashToPattern(codeHash, (h) => state.codes?.[h]) : null);
-    const parsed = codec.parse(text, {
-      codeHash,
-      pattern: resolvedPattern,
-      state,
-      Value,
-      isProduct,
-      isVariant
-    });
-    const validated = valueForPattern(parsed, resolvedPattern, text, codec.name);
-    const repr = validated instanceof Value ? validated.toJSON() : (typeof validated === "object" ? JSON.stringify(validated) : String(validated));
-    inputPopupStatus.innerHTML = `<span class="line-output" style="margin:0;padding:2px 6px;">✓ Valid: <code>${escapeHtml(String(repr))}</code></span>`;
-  } catch (err) {
-    inputPopupStatus.innerHTML = `<span class="line-warning" style="margin:0;padding:2px 6px;">⚠ ${escapeHtml(err.message || String(err))}</span>`;
-  }
-}
-
-export async function submitInputPopup() {
-  const text = inputPopupText?.value ?? "";
-  const rawPattern = inputPopupType ? inputPopupType.value.trim() : "(...)";
-  const codecName = inputPopupCodec?.value;
-
-  if (!rawPattern && !codecName) {
-    if (inputPopupStatus) inputPopupStatus.innerHTML = `<span class="line-error">Please specify a target pattern or codec.</span>`;
-    return;
-  }
-
-  let pattern = null;
-  let codeHash = null;
-  let rawExpr = rawPattern || "(...)";
-  if (rawPattern && rawPattern !== "*" && rawPattern !== "(...)") {
-    try {
-      const resolved = resolveInputPattern(state, rawPattern);
-      pattern = resolved.pattern;
-      codeHash = resolved.codeHash;
-      rawExpr = rawPattern;
-    } catch (err) {
-      if (inputPopupStatus) inputPopupStatus.innerHTML = `<span class="line-error">Pattern Error: ${escapeHtml(err.message || String(err))}</span>`;
-      return;
-    }
-  }
-
-  try {
-    const codec = resolveCodec(state, codeHash, codecName || null, "parse");
-    state.pendingInput = {
-      pattern,
-      codeHash,
-      codecName: codec.name,
-      promptName: codec.name,
-      rawExpr: rawExpr || codec.name
-    };
-  } catch (err) {
-    if (inputPopupStatus) inputPopupStatus.innerHTML = `<span class="line-error">${escapeHtml(err.message || String(err))}</span>`;
-    return;
-  }
-
-  closeInputPopup();
-  await executeCommand(text);
-}
 
 // Initialization on DOMContentLoaded
 export function initRepl() {
@@ -1248,17 +676,8 @@ export function initRepl() {
   dropOverlay = document.getElementById("drop-overlay");
   codecsModal = document.getElementById("codecs-modal");
   codecsBadgeEl = document.getElementById("codecs-count-badge");
-  activeCodecsTbody = document.getElementById("active-codecs-tbody");
-  codecTypeSelect = document.getElementById("codec-custom-type");
-
-  inputPopupModal = document.getElementById("input-popup-modal");
-  inputPopupType = document.getElementById("input-popup-type");
-  inputPopupCodec = document.getElementById("input-popup-codec");
-  inputPopupText = document.getElementById("input-popup-text");
-  inputPopupStatus = document.getElementById("input-popup-status");
-  inputPopupHint = document.getElementById("input-popup-hint");
-  inputPopupCodecHint = document.getElementById("input-popup-codec-hint");
-  inputSamplesList = document.getElementById("input-samples-list");
+  enabledCodecsGrid = document.getElementById("enabled-codecs-grid");
+
 
   updatePrompt();
 
@@ -1459,78 +878,7 @@ export function initRepl() {
   const closeCodecsBtn = document.getElementById("btn-close-codecs");
   if (closeCodecsBtn) closeCodecsBtn.onclick = closeCodecsModal;
 
-  // Toggle built-in codecs buttons
-  ["int", "utf8", "json", "ieee"].forEach(name => {
-    const btn = document.getElementById(`btn-toggle-codec-${name}`);
-    if (btn) {
-      btn.onclick = () => {
-        if (isCodecRegistered(name)) {
-          executeCommand(`:codec unload ${name}`);
-        } else {
-          executeCommand(`:codec load ${name}`);
-        }
-        renderCodecsModal();
-      };
-    }
-  });
-
-  // Codec Studio controls
-  const presetSelect = document.getElementById("codec-preset-select");
-  if (presetSelect) {
-    presetSelect.addEventListener("change", () => {
-      if (presetSelect.value) applyCodecPreset(presetSelect.value);
-    });
-  }
-
-  const btnRegisterCodec = document.getElementById("btn-register-codec");
-  if (btnRegisterCodec) btnRegisterCodec.onclick = registerCustomCodecFromForm;
-
-  const btnTestParse = document.getElementById("btn-test-parse");
-  if (btnTestParse) btnTestParse.onclick = testCustomParse;
-
-  const btnTestPrint = document.getElementById("btn-test-print");
-  if (btnTestPrint) btnTestPrint.onclick = testCustomPrint;
-
-  const btnSaveCodecVfs = document.getElementById("btn-save-codec-vfs");
-  if (btnSaveCodecVfs) btnSaveCodecVfs.onclick = saveCustomCodecToVfs;
-
-  // Codec Input Popup controls
-  const btnInputNavbar = document.getElementById("btn-input-popup");
-  if (btnInputNavbar) btnInputNavbar.onclick = () => openInputPopup();
-
-  const btnCloseInput = document.getElementById("btn-close-input-popup");
-  if (btnCloseInput) btnCloseInput.onclick = cancelInputPopup;
-
-  const btnCancelInput = document.getElementById("btn-cancel-input");
-  if (btnCancelInput) btnCancelInput.onclick = cancelInputPopup;
 
-  const btnSubmitInput = document.getElementById("btn-submit-input");
-  if (btnSubmitInput) btnSubmitInput.onclick = submitInputPopup;
-
-  if (inputPopupType) {
-    inputPopupType.addEventListener("change", updateInputPopupCodecs);
-    inputPopupType.addEventListener("input", updateInputPopupCodecs);
-  }
-
-  if (inputPopupCodec) {
-    inputPopupCodec.addEventListener("change", () => {
-      renderInputSamples(inputPopupCodec.value);
-      updateLiveValidation();
-    });
-  }
-
-  if (inputPopupText) {
-    inputPopupText.addEventListener("input", updateLiveValidation);
-    inputPopupText.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" && (e.ctrlKey || e.metaKey || !e.shiftKey)) {
-        e.preventDefault();
-        submitInputPopup();
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        cancelInputPopup();
-      }
-    });
-  }
 
   // Export .klib button
   const exportBtn = document.getElementById("btn-export");
@@ -1589,7 +937,6 @@ export function initRepl() {
     if (e.target === vfsModal) closeVfsModal();
     if (e.target === helpModal) helpModal.classList.remove("open");
     if (e.target === codecsModal) closeCodecsModal();
-    if (e.target === inputPopupModal) cancelInputPopup();
   });
 
   // Focus input when clicking anywhere in the input bar
@@ -1615,8 +962,15 @@ export function initRepl() {
     }
   });
 
-  // Apply initial yn preset to custom form
-  applyCodecPreset("yn");
+  // Engine Badge toggle (wasm <-> js)
+  const engineBadge = document.getElementById("engine-badge");
+  if (engineBadge) {
+    engineBadge.onclick = () => {
+      const nextEngine = state.engine === "wasm" ? "js" : "wasm";
+      executeCommand(`:engine ${nextEngine}`);
+    };
+  }
+  updateEngineUI();
 
   inputEl.focus();
 }
@@ -1634,14 +988,12 @@ if (typeof window !== "undefined") {
     executeCommand,
     initRepl,
     getState: () => state,
+    getEngine: () => state.engine,
+    setEngine: (engine) => executeCommand(`:engine ${engine}`),
     getVfsFile,
     setVfsFile,
     getAllVfsFiles,
     openCodecsModal,
-    openInputPopup,
-    closeInputPopup,
-    submitInputPopup,
-    cancelInputPopup,
     registerCodec,
     unregisterCodec
   };