add species prefix mismatch validation

frontend/index.html

@@ -339,6 +339,20 @@ input[type="range"]::-webkit-slider-thumb:hover {
   font-weight: 500;
 }
 
+.mismatch-warning {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #FFF7ED;
+  border: 1.5px solid #FED7AA;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  margin-top: 0.75rem;
+  font-size: 13px;
+  color: #9A3412;
+  line-height: 1.5;
+}
+
 /* ── Run section ─────────────────────── */
 .run-section {
   margin-top: 2.5rem;
@@ -598,6 +612,9 @@ footer a:hover { color: var(--ink); }
     </div>
   </div>
 
+  <!-- Prefix mismatch warning -->
+  <div class="mismatch-warning hidden" id="prefixWarning"></div>
+
   <!-- Run -->
   <div class="run-section">
     <button class="btn-run" id="runBtn" onclick="startJob()">
@@ -660,6 +677,30 @@ function updateSlider(val) {
 
 window.addEventListener('DOMContentLoaded', () => updateSlider(1000));
 
+function getPrefix(filename) {
+  return filename.split('_')[0].toLowerCase();
+}
+
+function checkPrefixMatch() {
+  const warn = document.getElementById('prefixWarning');
+  if (!state.model.length || !state.mapping.length) {
+    warn.classList.add('hidden');
+    return true;
+  }
+  const modelPrefixes   = state.model.map(f => getPrefix(f.name)).sort();
+  const mappingPrefixes = state.mapping.map(f => getPrefix(f.name)).sort();
+  const mismatch =
+    modelPrefixes.length !== mappingPrefixes.length ||
+    modelPrefixes.some((p, i) => p !== mappingPrefixes[i]);
+  if (mismatch) {
+    warn.innerHTML = `⚠️ <span>Species prefix mismatch — model files (${modelPrefixes.join(', ')}) don't match mapping files (${mappingPrefixes.join(', ')}). Make sure files are uploaded in the same order and belong to the same species.</span>`;
+    warn.classList.remove('hidden');
+    return false;
+  }
+  warn.classList.add('hidden');
+  return true;
+}
+
 function handleFiles(type, files) {
   state[type] = Array.from(files);
   const key = { model: 'chipsModel', mapping: 'chipsMapping', expr: 'chipsExpr' }[type];
@@ -667,6 +708,7 @@ function handleFiles(type, files) {
   document.getElementById(key).innerHTML =
     state[type].map(f => `<div class="chip">✓ ${f.name}</div>`).join('');
   document.getElementById(num).classList.add('done');
+  checkPrefixMatch();
 }
 
 ['dropModel','dropMapping','dropExpr'].forEach(id => {
@@ -680,6 +722,7 @@ async function startJob() {
   if (!state.model.length)   { alert('Please upload at least one model file.'); return; }
   if (!state.mapping.length) { alert('Please upload at least one mapping file.'); return; }
   if (!state.expr.length)    { alert('Please upload a gene expression CSV.'); return; }
+  if (!checkPrefixMatch())   { alert('Fix the species prefix mismatch before running.'); return; }
 
   document.getElementById('runBtn').disabled = true;
   document.getElementById('progressSection').classList.remove('hidden');