@fraczak/k 6.7.0 → 6.9.0

package/browser/repl-browser.mjs

@@ -3,30 +3,36 @@ import {
   evaluateInput,
   createCompleter,
   promptForState,
-  helpText,
   analyzeRawSnippet,
   lineTerminatesSnippet,
   lineHasExplicitContinuation,
   savedLibrary,
-  listCodecs,
-  loadCodecModule,
   registerCodec,
   unregisterCodec,
   resolveCodec,
   codeHashToPattern,
-  BUILTIN_CODECS,
-  formatDuration
+  formatDuration,
+  resolveInputTypeHash,
+  resolveInputPattern,
+  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
@@ -61,17 +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 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);
@@ -324,12 +305,6 @@ export async function executeCommand(input) {
   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 adjustInputHeight() {
@@ -353,14 +328,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 +370,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,97 +535,6 @@ function exportKlib() {
 // CODECS SUBSYSTEM UI & CONTROLS
 // ==========================================
 
-const CODEC_PRESETS = {
-  yn: {
-    name: "yn",
-    type: "bool",
-    universal: false,
-    parse: `// Parse 'yes', 'no', 'true', 'false' into $bool
-const tag = text.trim().toLowerCase();
-if (tag === "yes" || tag === "true" || tag === "1") {
-  return Value.variant("true", Value.product({}));
-}
-if (tag === "no" || tag === "false" || tag === "0") {
-  return Value.variant("false", Value.product({}));
-}
-throw new Error("Expected yes/no or true/false");`,
-    print: `// Serialize boolean value to YES / NO
-return value.tag === "true" ? "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 or Buffer
-return JSON.stringify(value);`
-  }
-};
-
 function openCodecsModal() {
   if (!codecsModal) return;
   renderCodecsModal();
@@ -669,501 +547,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 = rawType === "*" ? "*" : state.typeAliases[rawType] || rawType;
-    if (!codeHash.startsWith("@") && codeHash !== "*") {
-      throw new Error(`Cannot resolve type '${rawType}' to a canonical code hash. Define the type first (e.g. :type ${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", "λ"],
-  json: ['{"name":"Alice"}', '{"x":10,"y":20}', '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;
-        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;
-  if (state.pendingInput) {
-    const rawType = inputPopupType?.value || state.pendingInput.codeHash;
-    const codecName = inputPopupCodec?.value || state.pendingInput.codecName;
-    inputPopupHint.innerHTML = `Enter input value for <b>$${escapeHtml(rawType)}</b> using codec <b>${escapeHtml(codecName || "default")}</b>:`;
-  } else {
-    inputPopupHint.innerHTML = `Choose target type &amp; deserializer, then enter input string:`;
+    card.appendChild(footer);
+    grid.appendChild(card);
   }
 }
 
-function updateInputPopupCodecs() {
-  if (!inputPopupCodec) return;
-  const rawType = inputPopupType?.value || "*";
-  const codeHash = rawType === "*" ? "*" : state.typeAliases?.[rawType] || rawType;
-  const prev = inputPopupCodec.value;
-
-  inputPopupCodec.innerHTML = "";
-  const matchingCodecs = [];
+function isCodecRegistered(name) {
   const store = state.codecs || {};
-
-  const candidates = [
-    ...(store[codeHash] || []),
-    ...(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);
-    }
-  }
-
-  if (matchingCodecs.length === 0) {
-    if (rawType === "int") matchingCodecs.push("int");
-    if (rawType === "bool") matchingCodecs.push("yn");
-    if (rawType === "string") matchingCodecs.push("utf8");
-    matchingCodecs.push("json");
-  }
-
-  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(preselectedType = null, preselectedCodec = null) {
-  if (!inputPopupType) return;
-
-  let prevType = preselectedType;
-  if (!prevType && state.pendingInput) {
-    const foundAlias = Object.entries(state.typeAliases || {}).find(([, h]) => h === state.pendingInput.codeHash);
-    prevType = foundAlias ? foundAlias[0] : state.pendingInput.codeHash;
-  }
-  if (!prevType) {
-    prevType = inputPopupType.value;
-  }
-
-  inputPopupType.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)}...)`;
-    inputPopupType.appendChild(opt);
-  }
-
-  const universalOpt = document.createElement("option");
-  universalOpt.value = "*";
-  universalOpt.textContent = "* (Universal / Any)";
-  inputPopupType.appendChild(universalOpt);
-
-  if (prevType && (aliases.some(([a]) => a === prevType) || prevType === "*")) {
-    inputPopupType.value = prevType;
-  } else if (aliases.length > 0) {
-    inputPopupType.value = aliases[0][0];
-  }
-
-  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 rawType = inputPopupType?.value;
-  const codecName = inputPopupCodec?.value;
-  if (!rawType) {
-    inputPopupStatus.innerHTML = `<span class="line-warning" style="margin:0;padding:2px 6px;">Select a target type first.</span>`;
-    return;
-  }
-
-  const codeHash = rawType === "*" ? "*" : state.typeAliases?.[rawType] || rawType;
-  try {
-    const codec = resolveCodec(state, codeHash, codecName || null, "parse");
-    const pattern = codeHashToPattern(codeHash, (h) => state.codes?.[h]);
-    const parsed = codec.parse(text, {
-      codeHash,
-      pattern,
-      state,
-      Value,
-      isProduct,
-      isVariant
-    });
-    const repr = parsed instanceof Value ? parsed.toJSON() : (typeof parsed === "object" ? JSON.stringify(parsed) : String(parsed));
-    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 ?? "";
-
-  // If state.pendingInput is not set, configure it from the popup selections
-  if (!state.pendingInput) {
-    const rawType = inputPopupType?.value;
-    const codecName = inputPopupCodec?.value;
-    if (!rawType) {
-      if (inputPopupStatus) inputPopupStatus.innerHTML = `<span class="line-error">Please select a target type.</span>`;
-      return;
-    }
-    const codeHash = rawType === "*" ? "*" : state.typeAliases?.[rawType] || rawType;
-    try {
-      const codec = resolveCodec(state, codeHash, codecName || null, "parse");
-      state.pendingInput = { codeHash, codecName: codec.name, promptName: codec.name };
-    } catch (err) {
-      if (inputPopupStatus) inputPopupStatus.innerHTML = `<span class="line-error">${escapeHtml(err.message)}</span>`;
-      return;
-    }
-  }
-
-  closeInputPopup();
-  await executeCommand(text);
-}
 
 // Initialization on DOMContentLoaded
 export function initRepl() {
@@ -1181,32 +663,15 @@ 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");
+  enabledCodecsGrid = document.getElementById("enabled-codecs-grid");
 
-  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");
-  inputSamplesList = document.getElementById("input-samples-list");
 
   updatePrompt();
 
   // Welcome message
   appendSystemMessage(`
 <div class="welcome-banner">
-  <div class="welcome-title">λ k interactive repl</div>
-  <div class="welcome-desc">First-order partial functions over algebraic data types &bull; WebAssembly execution engine &bull; Custom Serializers &amp; Deserializers (:codecs)</div>
-  <div class="welcome-tips">
-    <span>💡 Try: <a href="javascript:void(0)" class="quick-link" data-code=":load core.k">:load core.k</a></span>
-    <span>• <a href="javascript:void(0)" class="quick-link" data-code=":codec load int">:codec load int</a></span>
-    <span>• <a href="javascript:void(0)" class="quick-link" data-code="10 int">10 int</a></span>
-    <span>• <a href="javascript:void(0)" class="quick-link" data-code="{10 int x, 5 int y} plus">{10 int x, 5 int y} plus</a></span>
-    <span>• <a href="javascript:void(0)" class="quick-link" data-code=":codecs">:codecs</a></span>
-    <span>• <a href="javascript:void(0)" class="quick-link" data-code=":help">:help</a></span>
-  </div>
+  <div class="welcome-title">k interactive repl</div>
 </div>
 `, false, true);
 
@@ -1365,14 +830,6 @@ export function initRepl() {
   const clearBtn = document.getElementById("btn-clear");
   if (clearBtn) clearBtn.onclick = clearOutput;
 
-  // Reset button
-  const resetBtn = document.getElementById("btn-reset");
-  if (resetBtn) {
-    resetBtn.onclick = () => {
-      executeCommand(":reset");
-    };
-  }
-
   // Help button
   const helpBtn = document.getElementById("btn-help");
   if (helpBtn) {
@@ -1408,77 +865,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);
-  }
-
-  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");
@@ -1537,7 +924,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
@@ -1563,9 +949,6 @@ export function initRepl() {
     }
   });
 
-  // Apply initial yn preset to custom form
-  applyCodecPreset("yn");
-
   inputEl.focus();
 }
 
@@ -1586,10 +969,6 @@ if (typeof window !== "undefined") {
     setVfsFile,
     getAllVfsFiles,
     openCodecsModal,
-    openInputPopup,
-    closeInputPopup,
-    submitInputPopup,
-    cancelInputPopup,
     registerCodec,
     unregisterCodec
   };