openfox 2.0.39 → 2.0.41

package/dist/web/__inspect__.js

@@ -2,12 +2,13 @@
   'use strict'
 
   window.__foxInspectMode = false
-  window.__foxSessionId = null
-  window.__foxSessionTitle = null
   window.__foxInspectEnabled = true
   window.__foxSentPending = false
   window.__foxPopupOpen = false
   window.__foxHighlightedEl = null
+  window.__foxSelectedSessionId = null
+  window.__foxSessions = []
+  window.__foxSessionsError = false
 
   var overlayStyle = document.createElement('style')
   overlayStyle.textContent = [
@@ -19,18 +20,23 @@
     '#__fox-toggle.__fox-active{background:#ef4444}',
     '#__fox-toggle.__fox-active:hover{background:#dc2626}',
     '.__fox-highlight{outline:2px solid #3b82f6!important;outline-offset:1px!important}',
-    '#__fox-popup{position:fixed;background:#1e1e1e;color:#e0e0e0;padding:12px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.5);z-index:2147483647;min-width:300px;max-width:400px;pointer-events:auto;font-family:system-ui,sans-serif}',
+    '#__fox-popup{position:fixed;background:#1e1e1e;color:#e0e0e0;padding:12px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.5);z-index:2147483647;min-width:320px;max-width:420px;pointer-events:auto;font-family:system-ui,sans-serif}',
     '#__fox-popup .__fox-selector{font-family:monospace;font-size:11px;color:#888;background:#2a2a2a;padding:4px 8px;border-radius:4px;word-break:break-all;margin-bottom:8px;max-height:80px;overflow:auto}',
     '#__fox-popup .__fox-tag{font-size:12px;color:#aaa;margin-bottom:8px}',
     '#__fox-popup .__fox-tag span{color:#3b82f6}',
     '#__fox-popup textarea{width:100%;background:#2a2a2a;color:#e0e0e0;border:1px solid #444;border-radius:4px;padding:6px 8px;font-size:12px;resize:vertical;min-height:60px;box-sizing:border-box;font-family:inherit}',
     '#__fox-popup textarea:focus{border-color:#3b82f6;outline:none}',
+    '#__fox-popup .__fox-session-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:11px}',
+    '#__fox-popup .__fox-session-row label{color:#888;white-space:nowrap}',
+    '#__fox-popup .__fox-session-picker{background:#2a2a2a;color:#e0e0e0;border:1px solid #444;border-radius:4px;padding:3px 6px;font-size:11px;font-family:inherit;flex:1;cursor:pointer}',
+    '#__fox-popup .__fox-session-picker:focus{border-color:#3b82f6;outline:none}',
+    '#__fox-popup .__fox-session-picker.__fox-error{border-color:#ef4444}',
+    '#__fox-popup .__fox-session-picker option{background:#1e1e1e;color:#e0e0e0}',
     '#__fox-popup .__fox-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}',
     '#__fox-popup button.__fox-send{background:#3b82f6;color:#fff;border:none;padding:6px 14px;border-radius:4px;cursor:pointer;font-size:12px;font-family:inherit}',
     '#__fox-popup button.__fox-send:hover{background:#2563eb}',
     '#__fox-popup button.__fox-cancel{background:transparent;color:#888;border:1px solid #444;padding:6px 14px;border-radius:4px;cursor:pointer;font-size:12px;font-family:inherit}',
     '#__fox-popup button.__fox-cancel:hover{color:#aaa;border-color:#666}',
-    '#__fox-popup .__fox-hint{font-size:11px;color:#666;margin-top:6px;line-height:1.4}',
   ].join('\n')
 
   var overlay = document.createElement('div')
@@ -83,7 +89,7 @@
       }
       var text = (clone.textContent || '').replace(/\s+/g, ' ').trim()
       return text.slice(0, 500) || null
-    } catch (e) {
+    } catch {
       return null
     }
   }
@@ -124,8 +130,8 @@
 
     var left = x + 10
     var top = y + 10
-    if (left + 340 > viewportWidth) left = x - 350
-    if (top + 280 > viewportHeight) top = y - 290
+    if (left + 360 > viewportWidth) left = x - 370
+    if (top + 320 > viewportHeight) top = y - 330
     if (left < 8) left = 8
     if (top < 8) top = 8
 
@@ -136,6 +142,14 @@
 
     var tagDisplay = data.tag + (data.id ? '#' + data.id : data.className ? '.' + data.className.split(' ')[0] : '')
 
+    // Build session options
+    var sessionOpts = '<option value="">Select session...</option>'
+    for (var i = 0; i < window.__foxSessions.length; i++) {
+      var s = window.__foxSessions[i]
+      var sel = s.id === window.__foxSelectedSessionId ? ' selected' : ''
+      sessionOpts += '<option value="' + s.id + '"' + sel + '>' + (s.title || s.id) + '</option>'
+    }
+
     popup.innerHTML =
       '<div class="__fox-tag">Element: <span>' +
       tagDisplay +
@@ -143,10 +157,13 @@
       '<div class="__fox-selector">' +
       data.xpath +
       '</div>' +
-      '<textarea placeholder="What\'s wrong with this element?"></textarea>' +
-      '<div class="__fox-hint">Sending to: ' +
-      (window.__foxSessionTitle || window.__foxSessionId || 'none') +
-      '. To target a different session, close this, navigate to that session in OpenFox, and reopen the inspect window.</div>' +
+      '<textarea placeholder="What\'s wrong with this element?" id="__fox-feedback-textarea"></textarea>' +
+      '<div class="__fox-session-row">' +
+      '<label>Session:</label>' +
+      '<select class="__fox-session-picker" id="__fox-popup-session-picker">' +
+      sessionOpts +
+      '</select>' +
+      '</div>' +
       '<div class="__fox-actions">' +
       '<button class="__fox-cancel">Cancel</button>' +
       '<button class="__fox-send">Send to Agent</button>' +
@@ -154,9 +171,18 @@
 
     document.body.appendChild(popup)
 
-    var textarea = popup.querySelector('textarea')
+    var textarea = popup.querySelector('#__fox-feedback-textarea')
+    var picker = popup.querySelector('#__fox-popup-session-picker')
     textarea.focus()
 
+    // Sync picker changes back to global state
+    picker.addEventListener('change', function () {
+      window.__foxSelectedSessionId = picker.value || null
+      try {
+        sessionStorage.setItem('__foxSelectedSessionId', picker.value)
+      } catch {}
+    })
+
     textarea.addEventListener('keydown', function (ke) {
       if (ke.key === 'Enter' && !ke.shiftKey) {
         ke.preventDefault()
@@ -175,6 +201,16 @@
       e.preventDefault()
       e.stopPropagation()
       if (window.__foxSentPending) return
+
+      var sessionId = picker.value
+      if (!sessionId) {
+        picker.classList.add('__fox-error')
+        setTimeout(function () {
+          picker.classList.remove('__fox-error')
+        }, 2000)
+        return
+      }
+
       window.__foxSentPending = true
       setTimeout(function () {
         window.__foxSentPending = false
@@ -189,7 +225,7 @@
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          sessionId: window.__foxSessionId,
+          sessionId: sessionId,
           element: data,
           annotation: annotation,
           pageUrl: window.location.href,
@@ -255,18 +291,27 @@
     }
   })
 
-  window.addEventListener('message', function (e) {
-    if (e.data && e.data.type === 'setFoxSessionId') {
-      window.__foxSessionId = e.data.sessionId
-    }
-    if (e.data && e.data.type === 'setFoxSessionTitle') {
-      window.__foxSessionTitle = e.data.sessionTitle
-    }
-    if (e.data && e.data.type === 'setFoxInspectEnabled') {
-      window.__foxInspectEnabled = e.data.enabled
-      overlay.style.display = e.data.enabled ? '' : 'none'
-    }
-  })
+  function fetchSessions() {
+    fetch('/__openfox_sessions')
+      .then(function (res) {
+        if (!res.ok) throw new Error('Failed to fetch sessions')
+        return res.json()
+      })
+      .then(function (data) {
+        window.__foxSessionsError = false
+        window.__foxSessions = data.sessions || []
+        // Auto-select most recent if none selected
+        if (!window.__foxSelectedSessionId && window.__foxSessions.length > 0) {
+          window.__foxSelectedSessionId = window.__foxSessions[0].id
+          try {
+            sessionStorage.setItem('__foxSelectedSessionId', window.__foxSelectedSessionId)
+          } catch {}
+        }
+      })
+      .catch(function () {
+        window.__foxSessionsError = true
+      })
+  }
 
   function init() {
     if (window.__foxInspectInit) return
@@ -274,22 +319,24 @@
     document.head.appendChild(overlayStyle)
     document.body.appendChild(overlay)
     toggleBtn = document.getElementById('__fox-toggle')
-    var widget = document.getElementById('__fox-widget')
-    widget.addEventListener(
-      'mousedown',
-      function (e) {
-        e.preventDefault()
-        e.stopPropagation()
-      },
-      true,
-    )
+
+    // Restore previously selected session
+    try {
+      var saved = sessionStorage.getItem('__foxSelectedSessionId')
+      if (saved) window.__foxSelectedSessionId = saved
+    } catch {}
+
     toggleBtn.addEventListener('click', function (e) {
       e.preventDefault()
       e.stopPropagation()
       if (window.__foxInspectMode) clearHighlights()
       setInspectMode(!window.__foxInspectMode)
     })
+
     overlay.style.display = window.__foxInspectEnabled ? '' : 'none'
+
+    fetchSessions()
+    setInterval(fetchSessions, 30000)
   }
 
   if (document.body) {