big prompt improvement to mcp

chat/public/admin.js

@@ -128,6 +128,9 @@
     systemTestsRun: document.getElementById('system-tests-run'),
     systemTestsStatus: document.getElementById('system-tests-status'),
     systemTestsOutput: document.getElementById('system-tests-output'),
+    validatorMcpTestRun: document.getElementById('validator-mcp-test-run'),
+    validatorMcpStatus: document.getElementById('validator-mcp-status'),
+    validatorMcpOutput: document.getElementById('validator-mcp-output'),
   };
 
   function ensureAvailableDatalist() {
@@ -230,6 +233,122 @@
     el.systemTestsStatus.style.color = isError ? 'var(--danger)' : 'inherit';
   }
 
+  function setValidatorMcpStatus(msg, isError = false) {
+    if (!el.validatorMcpStatus) return;
+    el.validatorMcpStatus.textContent = msg || '';
+    el.validatorMcpStatus.style.color = isError ? 'var(--danger)' : 'inherit';
+  }
+
+  function renderValidatorMcpOutput(data) {
+    if (!el.validatorMcpOutput) return;
+    el.validatorMcpOutput.innerHTML = '';
+    if (!data) return;
+
+    const summaryRow = document.createElement('div');
+    summaryRow.className = 'admin-row';
+    const summaryLabel = document.createElement('div');
+    summaryLabel.style.minWidth = '180px';
+    summaryLabel.style.color = 'var(--muted)';
+    summaryLabel.textContent = 'Test Summary';
+    const summaryValue = document.createElement('div');
+    const statusSpan = document.createElement('span');
+    statusSpan.textContent = data.ok ? 'PASSED' : 'FAILED';
+    statusSpan.style.color = data.ok ? 'var(--shopify-green)' : 'var(--danger)';
+    statusSpan.style.fontWeight = '600';
+    summaryValue.appendChild(statusSpan);
+    
+    if (data.durationMs) {
+      const timing = document.createElement('span');
+      timing.textContent = ` (${data.durationMs}ms)`;
+      timing.style.color = 'var(--muted)';
+      timing.style.marginLeft = '8px';
+      summaryValue.appendChild(timing);
+    }
+    
+    summaryRow.appendChild(summaryLabel);
+    summaryRow.appendChild(summaryValue);
+    el.validatorMcpOutput.appendChild(summaryRow);
+
+    if (data.error) {
+      const errorRow = document.createElement('div');
+      errorRow.className = 'admin-row';
+      errorRow.style.background = 'rgba(220, 38, 38, 0.1)';
+      errorRow.style.padding = '12px';
+      errorRow.style.borderRadius = '6px';
+      errorRow.style.marginTop = '8px';
+      
+      const errorLabel = document.createElement('div');
+      errorLabel.style.minWidth = '180px';
+      const errorStrong = document.createElement('strong');
+      errorStrong.textContent = 'Error';
+      errorStrong.style.color = 'var(--danger)';
+      errorLabel.appendChild(errorStrong);
+      
+      const errorValue = document.createElement('div');
+      errorValue.textContent = data.error;
+      errorValue.style.color = 'var(--danger)';
+      errorValue.style.fontFamily = 'monospace';
+      errorValue.style.fontSize = '12px';
+      errorValue.style.wordBreak = 'break-word';
+      
+      errorRow.appendChild(errorLabel);
+      errorRow.appendChild(errorValue);
+      el.validatorMcpOutput.appendChild(errorRow);
+    }
+
+    const details = [
+      ['MCP Server Path', data.mcpServerPath || '—'],
+      ['Validation Script', data.validationScriptPath || '—'],
+      ['Test Plugin Path', data.testPluginPath || '—'],
+      ['Tool Invoked', data.toolInvoked ? 'Yes' : 'No'],
+      ['Response Valid', data.responseValid ? 'Yes' : 'No'],
+    ];
+
+    details.forEach(([label, value]) => {
+      const row = document.createElement('div');
+      row.className = 'admin-row';
+      const labelWrap = document.createElement('div');
+      labelWrap.style.minWidth = '180px';
+      const strong = document.createElement('strong');
+      strong.textContent = label;
+      labelWrap.appendChild(strong);
+      const valueWrap = document.createElement('div');
+      valueWrap.textContent = value;
+      row.appendChild(labelWrap);
+      row.appendChild(valueWrap);
+      el.validatorMcpOutput.appendChild(row);
+    });
+
+    if (data.validationResult) {
+      const resultSection = document.createElement('div');
+      resultSection.style.marginTop = '12px';
+      resultSection.style.padding = '12px';
+      resultSection.style.background = 'var(--bg-subtle)';
+      resultSection.style.borderRadius = '6px';
+      
+      const resultHeader = document.createElement('div');
+      resultHeader.style.fontWeight = '600';
+      resultHeader.style.marginBottom = '8px';
+      resultHeader.textContent = 'Validation Result';
+      resultSection.appendChild(resultHeader);
+      
+      const resultPre = document.createElement('pre');
+      resultPre.style.margin = '0';
+      resultPre.style.padding = '8px';
+      resultPre.style.background = 'var(--bg)';
+      resultPre.style.borderRadius = '4px';
+      resultPre.style.fontSize = '11px';
+      resultPre.style.overflow = 'auto';
+      resultPre.style.maxHeight = '200px';
+      resultPre.textContent = typeof data.validationResult === 'string' 
+        ? data.validationResult 
+        : JSON.stringify(data.validationResult, null, 2);
+      resultSection.appendChild(resultPre);
+      
+      el.validatorMcpOutput.appendChild(resultSection);
+    }
+  }
+
   function renderExternalTestingConfig(config) {
     if (!el.externalTestingConfig) return;
     el.externalTestingConfig.innerHTML = '';
@@ -2935,6 +3054,33 @@
     });
   }
 
+  // WordPress Validator MCP Test button handler
+  if (el.validatorMcpTestRun) {
+    el.validatorMcpTestRun.addEventListener('click', async () => {
+      el.validatorMcpTestRun.disabled = true;
+      setValidatorMcpStatus('Testing WordPress Validator MCP...');
+      if (el.validatorMcpOutput) el.validatorMcpOutput.innerHTML = '';
+      
+      try {
+        const data = await api('/api/admin/validator-mcp-test', { method: 'POST' });
+        renderValidatorMcpOutput(data);
+        
+        if (data.ok) {
+          setValidatorMcpStatus(`Test passed! (${data.durationMs}ms)`);
+        } else {
+          setValidatorMcpStatus(`Test failed: ${data.error || 'Unknown error'}`, true);
+        }
+      } catch (err) {
+        setValidatorMcpStatus(err.message || 'Test failed', true);
+        if (el.validatorMcpOutput) {
+          renderValidatorMcpOutput({ ok: false, error: err.message || 'Request failed' });
+        }
+      } finally {
+        el.validatorMcpTestRun.disabled = false;
+      }
+    });
+  }
+
   if (el.logout) {
     el.logout.addEventListener('click', async () => {
       await api('/api/admin/logout', { method: 'POST' }).catch(() => { });