implement wp testing

chat/public/builder.js

@@ -32,7 +32,8 @@ const builderState = savedState || {
   lastUserRequest: '',
   lastPlanText: '',
   pluginPrompt: '',
-  subsequentPrompt: ''
+  subsequentPrompt: '',
+  externalTestingEnabled: false
 };
 
 // Auto-save builderState changes to localStorage
@@ -117,6 +118,21 @@ async function proceedWithBuild(planContent) {
 
 async function executeBuild(planContent) {
   console.log('executeBuild called with planContent:', planContent ? planContent.substring(0, 100) + '...' : 'null');
+  // Ensure external testing is still allowed if enabled
+  if (builderState.externalTestingEnabled) {
+    await loadUsageSummary();
+    const summary = state.usageSummary?.externalTesting || null;
+    const limit = summary ? summary.limit : null;
+    const used = summary ? summary.used : 0;
+    if (Number.isFinite(limit) && used >= limit) {
+      // show modal and abort
+      const modal = document.getElementById('external-testing-limit-modal');
+      if (modal) modal.style.display = 'flex';
+      setStatus('External testing limit reached. Disable external testing or upgrade your plan.');
+      return;
+    }
+  }
+
   builderState.mode = 'build';
   builderState.planApproved = true;
   updateBuildModeUI();
@@ -160,7 +176,8 @@ async function executeBuild(planContent) {
       model: selectedModel,
       cli: 'opencode',
       isProceedWithBuild: true,
-      planContent: planContent
+      planContent: planContent,
+      externalTestingEnabled: !!builderState.externalTestingEnabled
     };
     // Preserve opencodeSessionId for session continuity
     if (session && session.opencodeSessionId) {
@@ -188,7 +205,16 @@ async function executeBuild(planContent) {
     console.log('Build process initiated successfully');
   } catch (e) {
     console.error('Failed to start build:', e);
-    alert('Failed to start build: ' + (e.message || 'Unknown error'));
+    const msg = (e && e.message) ? e.message : 'Unknown error';
+    if (msg && msg.toLowerCase().includes('external wp cli testing')) {
+      // Show upgrade modal
+      const modal = document.getElementById('external-testing-limit-modal');
+      if (modal) modal.style.display = 'flex';
+      setStatus(msg, true);
+    } else {
+      alert('Failed to start build: ' + msg);
+    }
+
     builderState.mode = 'plan'; // Revert
     updateBuildModeUI();
     hideLoadingIndicator();
@@ -603,6 +629,9 @@ async function loadUsageSummary() {
         usageMeterTrack: !!el.usageMeterTrack
       });
       updateUsageProgressBar(state.usageSummary);
+      if (typeof window.updateExternalTestingUI === 'function') {
+        try { updateExternalTestingUI(); } catch (e) { console.warn('external testing UI update failed', e); }
+      }
       if (typeof window.checkTokenLimitAndShowModal === 'function') {
         setTimeout(() => window.checkTokenLimitAndShowModal(), 500);
       }
@@ -618,6 +647,92 @@ async function loadUsageSummary() {
 // Expose for builder.html
 window.loadUsageSummary = loadUsageSummary;
 
+// --- External testing UI helpers ---
+function updateExternalTestingUI() {
+  const elToggle = document.getElementById('external-testing-toggle');
+  const elUsage = document.getElementById('external-testing-usage');
+  const infoBtn = document.getElementById('external-testing-info');
+  if (!elToggle || !elUsage) return;
+
+  const et = state.usageSummary?.externalTesting || null;
+  if (!et) {
+    elUsage.textContent = 'Not configured';
+    elToggle.disabled = true;
+    elToggle.checked = false;
+    builderState.externalTestingEnabled = false;
+    saveBuilderState(builderState);
+    return;
+  }
+
+  const used = Number(et.used || 0);
+  const limit = Number.isFinite(Number(et.limit)) ? et.limit : 'unlimited';
+  elUsage.textContent = Number.isFinite(Number(et.limit)) ? `${used} / ${limit}` : `${used} / ∞`;
+
+  if (typeof builderState.externalTestingEnabled === 'boolean') {
+    elToggle.checked = !!builderState.externalTestingEnabled;
+  } else {
+    elToggle.checked = false;
+    builderState.externalTestingEnabled = false;
+    saveBuilderState(builderState);
+  }
+
+  if (infoBtn) {
+    infoBtn.onclick = (e) => {
+      e.preventDefault();
+      alert('External WP tests run a series of WP-CLI checks on an external WordPress site. Tests are counted against your monthly allowance.');
+    };
+  }
+
+  elToggle.addEventListener('change', async (e) => {
+    const wantOn = e.target.checked === true;
+    if (!wantOn) {
+      builderState.externalTestingEnabled = false;
+      saveBuilderState(builderState);
+      elToggle.checked = false;
+      return;
+    }
+
+    // Re-check usage before enabling
+    await loadUsageSummary();
+    const summary = state.usageSummary?.externalTesting || null;
+    const limit = summary ? summary.limit : null;
+    const used = summary ? summary.used : 0;
+    if (Number.isFinite(limit) && used >= limit) {
+      // show modal suggesting upgrade
+      const modal = document.getElementById('external-testing-limit-modal');
+      if (modal) modal.style.display = 'flex';
+      elToggle.checked = false;
+      return;
+    }
+
+    builderState.externalTestingEnabled = true;
+    saveBuilderState(builderState);
+    elToggle.checked = true;
+  });
+}
+
+(function wireExternalTestingModal() {
+  const modal = document.getElementById('external-testing-limit-modal');
+  if (!modal) return;
+  const closeBtn = document.getElementById('external-testing-limit-close');
+  const cancelBtn = document.getElementById('external-testing-limit-cancel');
+  const upgradeBtn = document.getElementById('external-testing-limit-upgrade');
+  const upgradeHeaderBtn = document.getElementById('upgrade-header-btn');
+  const closeModal = () => { modal.style.display = 'none'; };
+  if (closeBtn) closeBtn.addEventListener('click', closeModal);
+  if (cancelBtn) cancelBtn.addEventListener('click', closeModal);
+  if (upgradeBtn) {
+    upgradeBtn.addEventListener('click', () => {
+      closeModal();
+      if (upgradeHeaderBtn) upgradeHeaderBtn.click(); else window.location.href = '/topup';
+    });
+  }
+})();
+
+// Expose to global scope
+window.updateExternalTestingUI = updateExternalTestingUI;
+
+
 function checkTokenLimitAndShowModal() {
   const remaining = state.usageSummary?.remaining || 0;
   if (remaining <= 5000) {
@@ -1273,6 +1388,8 @@ async function hydrateUserIdFromServerSession() {
   // Load usage summary on page load
   loadUsageSummary().catch(err => {
     console.warn('[USAGE] Initial loadUsageSummary failed:', err.message);
+  }).then(() => {
+    try { if (typeof window.updateExternalTestingUI === 'function') window.updateExternalTestingUI(); } catch (e) { console.warn('updateExternalTestingUI failed on init', e); }
   });
 })();
 
@@ -2065,7 +2182,9 @@ window.renderMessages = renderMessages;
 function renderContentWithTodos(text) {
   const wrapper = document.createElement('div');
   if (!text) return document.createTextNode('');
-  const processedText = String(text).replace(/([.:])\s+(?=[A-Z])/g, '$1\n\n');
+  const processedText = String(text)
+    .replace(/:\s*(?=[A-Z])/g, ':\n\n')
+    .replace(/([.])\s+(?=[A-Z])/g, '$1\n\n');
   const lines = processedText.split(/\r?\n/);
   let currentList = null;
   let inCodeBlock = false;