Update browser_automation_ui.html

browser_automation_ui.html

@@ -61,6 +61,30 @@
     /* Simulate Lucide icons with simple shapes */
     .lucide-camera::before {content: "📷";font-size: 16px;}
     .lucide-download::before {content: "⬇️";font-size: 14px;}
+    #sessionManager .session-list {
+      list-style: none;
+      padding: 0;
+      margin: 4px 0 0 0;
+      max-height: 180px;
+      overflow-y: auto;
+      font-family: "Source Code Pro", monospace;
+      font-size: 12px;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+    }
+    #sessionManager .session-item {
+      padding: 4px 6px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: background 0.15s;
+    }
+    #sessionManager .session-item:hover {
+      background: #f1f5f9;
+    }
+    #sessionManager .session-item.active {
+      background: #38bdf8;
+      color: #fff;
+    }
   </style>
 </head>
 <body>
@@ -105,12 +129,15 @@
             <h3>Session Manager</h3>
           </div>
           <div class="api-body">
-            <ul id="sessionList" class="session-list"></ul>
-            <div style="margin-top:8px;">
+            <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px;">
+              <button class="btn btn-secondary" onclick="refreshSessions()">
+                <i class="lucide lucide-refresh-ccw"></i>Refresh
+              </button>
               <button class="btn btn-danger" onclick="closeAllSessions()">
-                <i class="lucide lucide-x-circle"></i> Close all sessions
+                <i class="lucide lucide-trash-2"></i>Close all sessions
               </button>
             </div>
+            <ul id="sessionList" class="session-list"></ul>
           </div>
         </section>
 
@@ -186,37 +213,90 @@
   <script>
     // --- Session Manager -----------------------------------------------------------
     let sessionId = null;
+    let currentSessionId = 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('');
+    // 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 listSessions() {
+      const res = await fetch("/api/browser/sessions");
+      if (!res.ok) return [];
+      const data = await res.json();
+      return data.sessions || [];
+    }
+
+
+    async function refreshSessions() {
+      const listEl = document.getElementById("sessionList");
+      listEl.innerHTML = "<li style='padding:4px 6px;'>Loading...</li>";
+      const sessions = await listSessions();
+      listEl.innerHTML = "";
+      sessions.forEach((s) => {
+        const li = document.createElement("li");
+        li.textContent = s.session_id;
+        li.className = "session-item" +
+          (s.session_id === currentSessionId ? " active" : "");
+        li.onclick = () => selectSession(li, s.session_id);
+  
+        // individual close button (🗑) inside each li
+        const closeBtn = document.createElement("span");
+        closeBtn.innerHTML = "&nbsp;🗑";
+        closeBtn.style.cursor = "pointer";
+        closeBtn.onclick = (e) => {
+          e.stopPropagation();
+          closeSession(s.session_id);
+        };
+        li.appendChild(closeBtn);
+  
+        listEl.appendChild(li);
+      });
+      if (sessions.length === 0) {
+        listEl.innerHTML = "<li style='padding:4px 6px;color:#94a3b8;'>No active sessions</li>";
+      }
+    }
+
+    function selectSession(li, id) {
+      document.querySelectorAll("#sessionList .session-item").forEach((el) =>
+        el.classList.remove("active")
+      );
+      li.classList.add("active");
+      currentSessionId = id;
+      sessionId = id; // update the global variable for other UI parts
     }
   
     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();
+      await fetch(`/api/browser/close/${id}`, { method: "DELETE" });
+      if (id === currentSessionId) {
+        currentSessionId = null;
+        sessionId = null;
       }
+      refreshSessions();
     }
   
-    function closeAllSessions() {
-      // create a shallow copy to avoid mutation issues while iterating
-      [...sessions].forEach((id) => closeSession(id));
+    async function closeAllSessions() {
+      const sessions = await listSessions();
+      if (sessions.length === 0) return;
+      if (!confirm(`Close ALL ${sessions.length} sessions?`)) return;
+      await Promise.all(
+        sessions.map((s) =>
+          fetch(`/api/browser/close/${s.session_id}`, { method: "DELETE" })
+        )
+      );
+      currentSessionId = null;
+      sessionId = null;
+      refreshSessions();
     }
 
     // Tab switching
@@ -234,7 +314,8 @@
       document.getElementById('typeTextGroup').style.display = e.target.value === 'type' ? 'block':'none';
     });
 
-    // Helpers
+    // --- Helpers -----------------------------------------------------------
+
     // Helper for POST requests that include sessionId automatically
     async function api(path, body = {}) {
       const res = await fetch(`/api${path}`, {
@@ -346,10 +427,8 @@
       });
     }
 
-    document.getElementById('action').addEventListener('change', e => {
-      document.getElementById('typeTextGroup').style.display = e.target.value === 'type' ? 'block' : 'none';
-    });
-
+    // auto‑refresh on page load
+    document.addEventListener("DOMContentLoaded", refreshSessions);
     // Init icons & status
     window.addEventListener('DOMContentLoaded',()=>{ lucide.createIcons(); checkStatus(); });
   </script>