Update browser_automation_ui.html

browser_automation_ui.html

@@ -99,6 +99,20 @@
             <div class="response-area" id="browserResp"></div>
           </div>
         </section>
+        <section class="api-section" id="sessionManager">
+          <div class="api-header">
+            <i class="lucide lucide-layout-list"></i>
+            <h3>Session Manager</h3>
+          </div>
+          <div class="api-body">
+            <ul id="sessionList" class="session-list"></ul>
+            <div style="margin-top:8px;">
+              <button class="btn btn-danger" onclick="closeAllSessions()">
+                <i class="lucide lucide-x-circle"></i> Close all sessions
+              </button>
+            </div>
+          </div>
+        </section>
 
         <!-- Screenshot -->
         <section class="api-section">
@@ -170,8 +184,40 @@
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/lucide/0.263.1/lucide.min.js"></script>
   <script>
-    // --- State ---
+    // --- Session Manager -----------------------------------------------------------
     let sessionId = null;
+    const sessions = [];
+  
+    function renderSessionList() {
+      const ul = document.getElementById('sessionList');
+      if (!ul) return;
+      ul.innerHTML = sessions
+        .map(
+          (id) => `
+            <li style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
+              <code style="flex:1;word-break:break-all;">${id}</code>
+              <button class="btn btn-sm btn-danger" onclick="closeSession('${id}')">✖</button>
+            </li>`
+        )
+        .join('');
+    }
+  
+    async function closeSession(id) {
+      try {
+        await api(`/browser/close/${id}`, 'DELETE');
+      } catch (err) {
+        console.error(err);
+      } finally {
+        const idx = sessions.indexOf(id);
+        if (idx !== -1) sessions.splice(idx, 1);
+        renderSessionList();
+      }
+    }
+  
+    function closeAllSessions() {
+      // create a shallow copy to avoid mutation issues while iterating
+      [...sessions].forEach((id) => closeSession(id));
+    }
 
     // Tab switching
     document.querySelectorAll('.tab-btn').forEach(btn => {
@@ -223,12 +269,20 @@
       setDot('seleniumDot', up);
     }
 
-    async function launchBrowser(){
-      const out = await api('/browser/launch');
-      sessionId = out.session_id || out.sessionId || sessionId;
-      //sessionId = out.sessionId || sessionId;
-      document.getElementById('browserResp').textContent = JSON.stringify(out,null,2);
-      checkStatus();
+    // async function launchBrowser(){
+    //   const out = await api('/browser/launch');
+    //   sessionId = out.session_id || out.sessionId || sessionId;
+    //   //sessionId = out.sessionId || sessionId;
+    //   document.getElementById('browserResp').textContent = JSON.stringify(out,null,2);
+    //   checkStatus();
+    // }
+    async function launchBrowser() {
+      const resp = await api('/browser/launch', 'POST', {});
+      if (resp.session_id) {
+        sessions.push(resp.session_id);
+        renderSessionList();
+        showToast(`Launched browser: ${resp.session_id.substring(0, 8)}…`, 'success');
+      }
     }
 
     async function navigate(){