Update browser_automation_ui.html

browser_automation_ui.html

@@ -175,18 +175,38 @@ All endpoints return { ok: true/false, data, error }
     });
 
     // Helpers
-    async function api(path, body={}) {
-      const res = await fetch(`/api${path}`, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ sessionId, ...body }) });
+    // Helper for POST requests that include sessionId automatically
+    async function api(path, body = {}) {
+      const res = await fetch(`/api${path}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ session_id: sessionId, ...body })
+      });
+      return res.json();
+    }
+
+    // Simple GET helper (no JSON body)
+    async function apiGet(path) {
+      const res = await fetch(`/api${path}`);
+      return res.json();
+    }
+
+    // Health (non‑/api) helper
+    async function health() {
+      const res = await fetch('/health');
       return res.json();
     }
     function setDot(id, ok){ const el=document.getElementById(id); el.classList.toggle('status-online',ok); el.classList.toggle('status-offline',!ok);}    
 
     // --- Actions ---
-    async function checkStatus(){
-      const out = await api('/status',{}).catch(()=>({ok:false}));
-      setDot('poolDot',out.ok);
-      setDot('playwrightDot',out.ok && out.playwright);
-      setDot('seleniumDot',out.ok && out.selenium);
+    async function checkStatus() {
+      const out = await health().catch(() => ({ status: 'down' }));
+      const up = out.status === 'healthy';
+      // We don't have separate pool/playwright/selenium flags from backend yet,
+      // so treat health OK as all‑green.
+      setDot('poolDot', up);
+      setDot('playwrightDot', up);
+      setDot('seleniumDot', up);
     }
 
     async function launchBrowser(){
@@ -209,25 +229,33 @@ All endpoints return { ok: true/false, data, error }
       if(out.b64){ document.getElementById('shotPreview').innerHTML = `<img src="data:image/png;base64,${out.b64}" style="max-width:100%;border:1px solid #e2e8f0;border-radius:8px;"/>`; }
     }
 
-    async function elementAction(){
-      const selector=document.getElementById('selector').value.trim();
-      if(!selector) return alert('Enter selector');
-      const action=document.getElementById('action').value;
-      const text=document.getElementById('typeText').value;
-      const out = await api('/browser/eval',{selector,action,text});
-      document.getElementById('elementResp').textContent = JSON.stringify(out,null,2);
+    async function elementAction() {
+      const selector = document.getElementById('selector').value.trim();
+      if (!selector) return alert('Enter selector');
+      const action = document.getElementById('action').value;
+      const value = document.getElementById('typeText').value;
+      const out = await api('/elements/action', {
+        selector,
+        action,
+        value
+      });
+      document.getElementById('elementResp').textContent = JSON.stringify(out, null, 2);
     }
 
-    async function inspectPage(){
-      const out = await api('/browser/inspect');
-      document.getElementById('inspectResp').textContent = JSON.stringify(out,null,2);
-      const list=document.getElementById('selectorList');
-      list.innerHTML='';
-      (out.selectors||[]).slice(0,50).forEach(sel=>{
-        const chip=document.createElement('span');
-        chip.className='selector-chip';
-        chip.textContent=sel;
-        chip.onclick=()=>{ document.getElementById('selector').value=sel; document.getElementById('action').focus(); };
+    async function inspectPage() {
+      if (!sessionId) return alert('Launch browser first');
+      const out = await apiGet(`/elements/inspect/${sessionId}`);
+      document.getElementById('inspectResp').textContent = JSON.stringify(out, null, 2);
+      const list = document.getElementById('selectorList');
+      list.innerHTML = '';
+      (out.elements || []).slice(0, 50).forEach(el => {
+        const chip = document.createElement('span');
+        chip.className = 'selector-chip';
+        chip.textContent = el.selector;
+        chip.onclick = () => {
+          document.getElementById('selector').value = el.selector;
+          document.getElementById('action').focus();
+        };
         list.appendChild(chip);
       });
     }