function createModelsRenderer({
  modelsEl,
  modelViewState,
  getSelectedTransform,
  getTransformMeta,
  isRunnableTransform,
  commitRefFromModel,
  setStatus,
  tensorCountText,
}) {
  function _renderModuleHealth(host, moduleHealth) {
    host.innerHTML = "";
    if (!moduleHealth || typeof moduleHealth !== "object") return;
    const modules = Array.isArray(moduleHealth.modules) ? moduleHealth.modules : [];
    if (!modules.length) return;

    const maxAbsMean = modules.reduce((acc, item) => {
      const value = Number(item.abs_mean || 0);
      return Math.max(acc, Number.isFinite(value) ? value : 0);
    }, 0);
    const heading = document.createElement("div");
    heading.className = "insight-heading";
    heading.textContent = "module health (top by abs mean)";
    host.appendChild(heading);

    for (const item of modules) {
      const row = document.createElement("div");
      row.className = "insight-row";
      const label = document.createElement("div");
      label.className = "insight-row-label";
      const absMean = Number(item.abs_mean || 0);
      label.textContent = String(item.module || "(unknown)") + " · abs_mean=" + absMean.toPrecision(4);
      const barWrap = document.createElement("div");
      barWrap.className = "meter";
      const bar = document.createElement("div");
      bar.className = "meter-fill";
      const width = maxAbsMean > 0 ? Math.max(2, Math.round((absMean / maxAbsMean) * 100)) : 2;
      bar.style.width = width + "%";
      barWrap.appendChild(bar);
      row.appendChild(label);
      row.appendChild(barWrap);
      host.appendChild(row);
    }
  }

  function renderModels(models) {
    modelsEl.innerHTML = "";
    if (!models.length) {
      const empty = document.createElement("div");
      empty.className = "empty";
      empty.textContent = "No models loaded yet. Use load to import one.";
      modelsEl.appendChild(empty);
      return;
    }

    for (const model of models) {
      if (!modelViewState[model.alias]) {
        modelViewState[model.alias] = {
          format: "compact",
          verbosity: "shape",
          filter: "",
          valid: true,
          module_health_collapsed: false,
          dump_collapsed: false,
          lastDumpText: "",
          lastDumpSignature: "",
          lastMatchedCount: null,
          lastTotalCount: null,
          sourceTensorCount: null,
          lastModuleHealth: null,
        };
      }
      const state = modelViewState[model.alias];
      if (state.sourceTensorCount !== model.tensor_count) {
        state.sourceTensorCount = model.tensor_count;
        state.lastDumpText = "";
        state.lastDumpSignature = "";
        state.lastMatchedCount = null;
        state.lastTotalCount = null;
        state.lastModuleHealth = null;
      }
      const pane = document.createElement("div");
      pane.className = "model-pane";

      const head = document.createElement("div");
      head.className = "model-head";
      const left = document.createElement("span");
      left.textContent = model.alias;
      const right = document.createElement("div");
      right.style.display = "flex";
      right.style.alignItems = "center";
      right.style.gap = "6px";
      const currentSignature = state.format + "|" + String(state.verbosity || "shape") + "|" + state.filter;
      const hasCachedForCurrentView = state.lastDumpSignature === currentSignature && !!state.lastDumpText;
      const count = document.createElement("span");
      if (
        hasCachedForCurrentView &&
        typeof state.lastMatchedCount === "number" &&
        typeof state.lastTotalCount === "number"
      ) {
        count.textContent = tensorCountText(state.lastMatchedCount, state.lastTotalCount, state.filter || "");
      } else {
        count.textContent = tensorCountText(model.matched_count || model.tensor_count, model.total_count || model.tensor_count, state.filter || "");
      }
      const dumpToggleBtn = document.createElement("button");
      dumpToggleBtn.className = "secondary-btn toggle-dump-btn";
      dumpToggleBtn.textContent = state.dump_collapsed ? "Show Dump" : "Hide Dump";
      const healthToggleBtn = document.createElement("button");
      healthToggleBtn.className = "secondary-btn toggle-health-btn";
      healthToggleBtn.textContent = state.module_health_collapsed ? "Show Health" : "Hide Health";
      right.appendChild(count);
      right.appendChild(healthToggleBtn);
      right.appendChild(dumpToggleBtn);
      head.appendChild(left);
      head.appendChild(right);

      const controls = document.createElement("div");
      controls.className = "model-controls";
      const formatSelect = document.createElement("select");
      formatSelect.innerHTML = "<option value='compact'>compact</option><option value='tree'>tree</option>";
      formatSelect.value = state.format;
      const verbositySelect = document.createElement("select");
      verbositySelect.innerHTML = "<option value='shape'>shape</option><option value='stat'>stat</option>";
      verbositySelect.value = state.verbosity || "shape";
      const filterInput = document.createElement("input");
      filterInput.placeholder = "regex or JSON list";
      filterInput.value = state.filter;
      const livePill = document.createElement("span");
      livePill.className = "live-pill";
      livePill.textContent = "live";
      const commitWrap = document.createElement("div");
      commitWrap.className = "commit-wrap";

      const renderCommitButtons = () => {
        commitWrap.innerHTML = "";
        const selectedTransform = getSelectedTransform();
        const meta = getTransformMeta(selectedTransform);
        const canCommit = !!meta && isRunnableTransform(selectedTransform) && state.valid;
        if (!canCommit) return;
        const keys = Array.isArray(meta.reference_keys) ? meta.reference_keys : [];
        for (const key of keys) {
          if (meta.kind === "binary" && key === "to" && !meta.to_must_exist) continue;
          const btn = document.createElement("button");
          btn.className = "mini-btn";
          btn.textContent = key;
          btn.addEventListener("click", () => commitRefFromModel(key, model.alias, filterInput.value));
          commitWrap.appendChild(btn);
        }
      };

      const pre = document.createElement("pre");
      pre.textContent = hasCachedForCurrentView ? state.lastDumpText : "";
      pre.classList.toggle("hidden", !!state.dump_collapsed);
      const health = document.createElement("div");
      health.className = "module-health";
      _renderModuleHealth(health, state.lastModuleHealth);
      health.classList.toggle("hidden", !!state.module_health_collapsed);

      dumpToggleBtn.addEventListener("click", () => {
        state.dump_collapsed = !state.dump_collapsed;
        pre.classList.toggle("hidden", !!state.dump_collapsed);
        dumpToggleBtn.textContent = state.dump_collapsed ? "Show Dump" : "Hide Dump";
      });
      healthToggleBtn.addEventListener("click", () => {
        state.module_health_collapsed = !state.module_health_collapsed;
        health.classList.toggle("hidden", !!state.module_health_collapsed);
        healthToggleBtn.textContent = state.module_health_collapsed ? "Show Health" : "Hide Health";
      });

      let debounceHandle = null;
      const requestDump = async () => {
        state.format = formatSelect.value;
        state.verbosity = verbositySelect.value;
        state.filter = filterInput.value;
        setStatus("Applying filter for " + model.alias + "...");
        try {
          const response = await fetch("/api/model_dump", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              alias: model.alias,
              format: formatSelect.value,
              verbosity: verbositySelect.value,
              filter: filterInput.value,
            }),
          });
          const data = await response.json();
          if (!response.ok || !data.ok) {
            state.valid = false;
            filterInput.classList.add("invalid-field");
            renderCommitButtons();
            setStatus("Dump failed for " + model.alias + ": " + (data.error || "unknown error"));
            return;
          }
          state.valid = true;
          filterInput.classList.remove("invalid-field");
          pre.textContent = data.dump || "";
          state.lastDumpText = pre.textContent;
          state.lastDumpSignature = state.format + "|" + String(state.verbosity || "shape") + "|" + state.filter;
          state.lastMatchedCount = data.matched_count || 0;
          state.lastTotalCount = data.total_count || 0;
          state.lastModuleHealth = data.module_health || null;
          count.textContent = tensorCountText(data.matched_count || 0, data.total_count || 0, filterInput.value);
          _renderModuleHealth(health, state.lastModuleHealth);
          renderCommitButtons();
          setStatus("Updated dump for " + model.alias + ".");
        } catch (err) {
          state.valid = false;
          filterInput.classList.add("invalid-field");
          renderCommitButtons();
          setStatus("Dump failed for " + model.alias + ": " + String(err));
        }
      };

      formatSelect.addEventListener("change", () => requestDump());
      verbositySelect.addEventListener("change", () => requestDump());
      filterInput.addEventListener("input", () => {
        clearTimeout(debounceHandle);
        debounceHandle = setTimeout(requestDump, 220);
      });

      if (!pre.textContent) {
        pre.textContent = "(loading dump...)";
        requestDump();
      }

      controls.appendChild(formatSelect);
      controls.appendChild(verbositySelect);
      controls.appendChild(filterInput);
      controls.appendChild(livePill);
      controls.appendChild(commitWrap);
      renderCommitButtons();

      pane.appendChild(head);
      pane.appendChild(controls);
      pane.appendChild(health);
      pane.appendChild(pre);
      modelsEl.appendChild(pane);
    }
  }

  return { renderModels };
}

export { createModelsRenderer };
