Update browser_automation_ui.html

browser_automation_ui.html

@@ -97,6 +97,12 @@
           <div class="api-header"><i class="lucide lucide-camera"></i><h3>Screenshot</h3></div>
           <div class="api-body">
             <button class="btn btn-primary" onclick="takeScreenshot()"><i class="lucide lucide-camera"></i>Capture</button>
+            <a id="downloadBtn"
+               class="btn btn-secondary"
+               style="display:none;margin-left:8px;"
+               download="screenshot.png">
+               <i class="lucide lucide-download"></i>Download
+            </a>
             <div id="shotPreview" style="margin-top:16px;"></div>
             <div class="response-area" id="shotResp"></div>
           </div>
@@ -224,12 +230,28 @@ All endpoints return { ok: true/false, data, error }
       document.getElementById('browserResp').textContent = JSON.stringify(out,null,2);
     }
 
-    async function takeScreenshot(){
+    async function takeScreenshot () {
       const out = await api('/browser/screenshot');
-      document.getElementById('shotResp').textContent = JSON.stringify(out,null,2);
-      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;"/>`; }
+    
+      // Separate the big base64 string so we don’t dump it in the response box
+      const { b64, ...meta } = out;
+      document.getElementById('shotResp').textContent = JSON.stringify(meta, null, 2);
+    
+      if (b64) {
+        const dataUrl = `data:image/png;base64,${b64}`;
+    
+        // Show thumbnail
+        document.getElementById('shotPreview').innerHTML =
+          `<img src="${dataUrl}" style="max-width:100%;border:1px solid #e2e8f0;border-radius:8px;">`;
+    
+        // Wire up & reveal the download button
+        const dl = document.getElementById('downloadBtn');
+        dl.href = dataUrl;
+        dl.style.display = 'inline-flex';
+      }
     }
 
+
     async function elementAction() {
       const selector = document.getElementById('selector').value.trim();
       if (!selector) return alert('Enter selector');