feat: auth-capture — WS frame stream, drag events, continuous CDP, profile cleanup

- AuthCaptureDialog: real WebSocket for binary JPEG frame stream (no polling)
- Pointer drag: mousedown/mousemove/mouseup events for slider-captcha
- CDP capture starts at session creation, caches headers in session.captured_headers
- Ephemeral profile dir deleted on session close (shutil.rmtree)
- Candidate types unified: bearer_token / cookie / api_key / credential
- Frontend handleAuthCaptureSelect maps all 4 types to correct form fields

backend/app/services/auth_capture_service.py

@@ -59,51 +59,17 @@ async def extract_session_storage(page: Any) -> dict[str, str]:
         return {}
 
 
-async def extract_request_headers(page: Any) -> list[dict[str, str]]:
-    """Capture Authorization headers from network requests via CDP.
+async def extract_request_headers(session: Any) -> list[dict[str, str]]:
+    """Return Authorization / API-Key headers captured continuously by CDP.
 
-    Uses Chrome DevTools Protocol to subscribe to Network.requestWillBeSent
-    events and extract Authorization / X-API-Key headers from captured
-    requests.  Only catches requests made *after* CDP is enabled.
+    The CDP Network listener is started when the ephemeral session is created
+    (in BrowserSessionService.create_ephemeral), so headers from the login
+    flow are captured in real-time without needing a fresh CDP attach.
     """
-    captured: list[dict[str, str]] = []
-    cdp = None
-    try:
-        cdp = await page.context.new_cdp_session(page)
-        await cdp.send("Network.enable")
-
-        def on_request(params: dict) -> None:
-            headers = params.get("request", {}).get("headers", {})
-            auth = (headers.get("authorization") or headers.get("Authorization"))
-            api_key = (headers.get("x-api-key") or headers.get("X-API-Key"))
-            if auth:
-                captured.append({
-                    "type": "authorization",
-                    "value": auth,
-                    "url": params.get("request", {}).get("url", ""),
-                })
-                logger.debug("auth-capture CDP: captured Authorization header")
-            if api_key:
-                captured.append({
-                    "type": "api_key",
-                    "value": api_key,
-                    "url": params.get("request", {}).get("url", ""),
-                })
-                logger.debug("auth-capture CDP: captured X-API-Key header")
-
-        cdp.on("Network.requestWillBeSent", on_request)
-        # Give a moment for any in-flight requests to be captured
-        import asyncio
-        await asyncio.sleep(0.5)
-    except Exception as exc:
-        logger.debug("CDP network capture not available: %s", exc)
-    finally:
-        if cdp:
-            try:
-                await cdp.detach()
-            except Exception:
-                pass
-    return captured
+    if hasattr(session, "captured_headers") and session.captured_headers:
+        logger.debug("auth-capture: returning %d cached headers", len(session.captured_headers))
+        return list(session.captured_headers)
+    return []
 
 
 async def extract_all(session: Any) -> dict[str, Any]:
@@ -116,7 +82,7 @@ async def extract_all(session: Any) -> dict[str, Any]:
     cookies = await extract_cookies(session)
     local_storage = await extract_local_storage(page)
     session_storage = await extract_session_storage(page)
-    auth_headers = await extract_request_headers(page)
+    auth_headers = await extract_request_headers(session)
     candidates = _curate_candidates(cookies, local_storage, session_storage, auth_headers)
 
     return {
@@ -137,22 +103,21 @@ def _curate_candidates(
     """Scan extracted data for likely credentials with confidence scoring."""
     candidates: list[dict[str, Any]] = []
 
-    # 1. CDP-captured Authorization headers (highest confidence)
+    # 1. CDP-captured network headers (highest confidence)
     seen = set()
     for h in auth_headers:
         dedup_key = h["value"]
         if dedup_key in seen:
             continue
         seen.add(dedup_key)
+        htype = h.get("type", "authorization")
         preview = _preview(h["value"])
-        candidates.append({
-            "type": "bearer_token",
-            "source": f"network:{h['url'][:60]}",
-            "value": h["value"],
-            "preview": preview,
-            "label": f"Authorization — {h['url'][:40]}",
-            "confidence": 95,
-        })
+        if htype == "api_key":
+            _add(candidates, "api_key", f"network:{h['url'][:60]}", h["value"], preview,
+                 f"X-API-Key — {h['url'][:40]}", 95)
+        else:
+            _add(candidates, "bearer_token", f"network:{h['url'][:60]}", h["value"], preview,
+                 f"Authorization — {h['url'][:40]}", 95)
 
     # 2. localStorage/sessionStorage items
     for store_name, store in [("localStorage", local_storage), ("sessionStorage", session_storage)]:

backend/app/services/browser_session_service.py

@@ -32,6 +32,8 @@ class BrowserSession:
     context: Any
     page: Any
     lock: asyncio.Lock
+    cdp_session: Any = None
+    captured_headers: list[dict] = None  # auth headers from CDP
 
 
 class BrowserSessionService:
@@ -163,10 +165,24 @@ class BrowserSessionService:
         session = self._discard_session(session_id)
         if not session:
             return
+        # Detach CDP session if active
+        if session.cdp_session:
+            try:
+                await session.cdp_session.detach()
+            except Exception:
+                pass
         try:
             await session.context.close()
         except Exception:
             pass
+        # Clean up ephemeral (auth-capture) profile directories
+        if session.profile_key and session.profile_key.startswith("auth-capture-"):
+            profile_dir = self._profile_dir(session.profile_key)
+            import shutil
+            try:
+                shutil.rmtree(profile_dir, ignore_errors=True)
+            except Exception:
+                pass
 
     async def shutdown(self) -> None:
         sessions = list(self._sessions)
@@ -368,14 +384,46 @@ class BrowserSessionService:
                 context=context,
                 page=page,
                 lock=asyncio.Lock(),
+                captured_headers=[],
             )
             self._sessions[session.id] = session
         try:
             await page.goto(url, wait_until="domcontentloaded", timeout=45000)
+            # Start CDP network capture immediately — so we don't miss login requests
+            await self._start_cdp_capture(session)
         except Exception:
             await self.close(session.id)
             raise
         return session
 
+    async def _start_cdp_capture(self, session: BrowserSession) -> None:
+        """Enable CDP Network domain and capture Authorization headers."""
+        try:
+            cdp = await session.context.new_cdp_session(session.page)
+            await cdp.send("Network.enable")
+
+            def on_request(params: dict) -> None:
+                headers = params.get("request", {}).get("headers", {})
+                auth = headers.get("authorization") or headers.get("Authorization")
+                api_key = headers.get("x-api-key") or headers.get("X-API-Key")
+                url = params.get("request", {}).get("url", "")
+                if auth:
+                    session.captured_headers.append({
+                        "type": "authorization",
+                        "value": auth,
+                        "url": url,
+                    })
+                if api_key:
+                    session.captured_headers.append({
+                        "type": "api_key",
+                        "value": api_key,
+                        "url": url,
+                    })
+
+            cdp.on("Network.requestWillBeSent", on_request)
+            session.cdp_session = cdp
+        except Exception as exc:
+            logger.debug("CDP capture not available: %s", exc)
+
 
 browser_sessions = BrowserSessionService()

frontend/src/api/index.ts

@@ -339,7 +339,7 @@ export interface AuthCaptureResult {
   session_storage: Record<string, string>
   auth_headers: Record<string, string>[]
   candidates: {
-    type: 'bearer_token' | 'cookie' | 'credential'
+    type: 'bearer_token' | 'cookie' | 'credential' | 'api_key'
     source: string
     value: string
     preview: string

frontend/src/components/AuthCaptureDialog.vue

@@ -15,22 +15,13 @@
           <el-form-item label="登录页 URL">
             <el-input v-model="targetUrl" placeholder="https://example.com/auth/login" />
           </el-form-item>
-          <div class="capture-extra-fields" v-if="showExtraFields">
+          <div v-if="showExtraFields" class="capture-extra-fields">
             <el-form-item label="登录账号">
               <el-input v-model="loginUsername" placeholder="用于自动填充（可选）" />
             </el-form-item>
             <el-form-item label="登录密码">
               <el-input v-model="loginPassword" type="password" placeholder="用于自动填充（可选）" />
             </el-form-item>
-            <el-form-item label="用户名选择器">
-              <el-input v-model="usernameSelector" placeholder="input[name=email]" />
-            </el-form-item>
-            <el-form-item label="密码选择器">
-              <el-input v-model="passwordSelector" placeholder="input[name=password]" />
-            </el-form-item>
-            <el-form-item label="提交按钮选择器">
-              <el-input v-model="submitSelector" placeholder="button[type=submit]" />
-            </el-form-item>
           </div>
           <div class="capture-launch-row">
             <el-button text size="small" @click="showExtraFields = !showExtraFields">
@@ -44,18 +35,18 @@
         </el-form>
       </div>
 
-      <!-- Step 2: Interactive browser + manual login -->
+      <!-- Step 2: Interactive browser via WebSocket -->
       <div v-else class="capture-step">
         <div class="capture-step-header">
           <h4>步骤 2：在浏览器中手动登录</h4>
           <div class="capture-actions">
-            <el-button size="small" @click="sendEvent('back')" :disabled="!sessionId">
+            <el-button size="small" @click="wsSend({type:'back'})" :disabled="!wsConnected">
               <el-icon><Back /></el-icon>
             </el-button>
-            <el-button size="small" @click="sendEvent('forward')" :disabled="!sessionId">
+            <el-button size="small" @click="wsSend({type:'forward'})" :disabled="!wsConnected">
               <el-icon><Right /></el-icon>
             </el-button>
-            <el-button size="small" @click="sendEvent('reload')" :disabled="!sessionId">
+            <el-button size="small" @click="wsSend({type:'reload'})" :disabled="!wsConnected">
               <el-icon><Refresh /></el-icon>
             </el-button>
             <el-divider direction="vertical" />
@@ -64,39 +55,43 @@
               提取认证信息
             </el-button>
           </div>
+          <div class="ws-status">
+            <span :class="['ws-dot', wsConnected ? 'connected' : 'disconnected']" />
+            {{ wsConnected ? '实时' : '连接中…' }}
+          </div>
         </div>
         <p class="capture-hint">在下方浏览器中完成登录后，点击「提取认证信息」获取 token / cookie。</p>
 
-        <!-- Interactive browser frame -->
+        <!-- WS-based interactive frame -->
         <div
-          ref="browserFrameRef"
+          ref="frameRef"
           class="browser-viewport"
           tabindex="0"
+          :class="{ 'ws-connected': wsConnected }"
           @keydown.prevent="onKeydown"
           @wheel.prevent="onWheel"
           @pointerdown.stop.prevent="onPointerDown"
           @pointermove.stop.prevent="onPointerMove"
           @pointerup.stop.prevent="onPointerUp"
-          @pointercancel.stop.prevent="onPointerCancel"
+          @pointercancel.stop.prevent="onPointerUp"
           @dblclick.prevent="onDblClick"
           @contextmenu.prevent
         >
           <img
-            v-if="screenshotUrl"
-            :src="screenshotUrl"
+            v-if="frameUrl"
+            :src="frameUrl"
             class="browser-frame"
             alt="远程浏览器"
             draggable="false"
-            @load="onScreenshotLoaded"
-            @error="onScreenshotError"
+            @load="onFrameLoad"
           />
           <div v-else class="browser-loading">
             <el-icon class="is-loading" :size="32"><Loading /></el-icon>
-            <p>正在启动浏览器…</p>
+            <p>正在连接远程浏览器…</p>
           </div>
         </div>
 
-        <!-- Extraction results (overlay after extract) -->
+        <!-- Extraction results panel -->
         <transition name="el-zoom-in-top">
           <div v-if="extracted && result" class="candidate-panel">
             <div class="candidate-panel-header">
@@ -117,16 +112,16 @@
                 <div class="candidate-row">
                   <el-radio :model-value="selectedIndex === i" :label="i" @click.stop="selectedIndex = i">
                     <span class="candidate-badge" :class="c.type || 'credential'">
-                      {{ c.type === 'bearer_token' ? 'Bearer' : c.type === 'cookie' ? 'Cookie' : 'Key' }}
+                      {{ badgeLabel(c.type) }}
                     </span>
                     <span class="candidate-label">{{ c.label }}</span>
                   </el-radio>
-                  <span v-if="c.confidence" class="candidate-confidence" :class="confidenceClass(c.confidence)">
+                  <span v-if="c.confidence" class="candidate-confidence" :class="confClass(c.confidence)">
                     {{ c.confidence }}%
                   </span>
                 </div>
                 <div class="candidate-preview">
-                  <code>{{ maskValue(c.preview || c.value) }}</code>
+                  <code>{{ c.preview || maskValue(c.value) }}</code>
                 </div>
               </div>
             </div>
@@ -144,7 +139,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, nextTick } from 'vue'
+import { ref, watch, onUnmounted, nextTick } from 'vue'
 import { Pointer, Search, Back, Right, Refresh, Loading } from '@element-plus/icons-vue'
 import { authCaptureApi, browserSessionsApi, type AuthCaptureResult } from '@/api'
 import { useAuthStore } from '@/stores/auth'
@@ -166,27 +161,27 @@ watch(() => props.modelValue, (v) => { visible.value = v })
 const targetUrl = ref(props.initialUrl || '')
 watch(() => props.initialUrl, (v) => { if (v) targetUrl.value = v })
 
-// Auto-fill fields
+// Auto-fill
 const showExtraFields = ref(false)
 const loginUsername = ref('')
 const loginPassword = ref('')
-const usernameSelector = ref('input[name="email"],input[name="username"],input[type="email"]')
-const passwordSelector = ref('input[name="password"],input[type="password"]')
-const submitSelector = ref('button[type="submit"],input[type="submit"]')
 
-// Session
+// Session + WS
 const sessionId = ref('')
 const launching = ref(false)
 const extracting = ref(false)
 const extracted = ref(false)
 const result = ref<AuthCaptureResult | null>(null)
 const selectedIndex = ref(-1)
-const screenshotUrl = ref('')
-const browserFrameRef = ref<HTMLElement | null>(null)
+const wsConnected = ref(false)
+const frameUrl = ref('')
+const frameRef = ref<HTMLElement | null>(null)
 
-// Pointer tracking for mouse events
-const pointerPos = ref({ x: 0, y: 0 })
-const imgNaturalSize = ref({ w: 0, h: 0 })
+let ws: WebSocket | null = null
+let pointerDown = false
+let frameW = 1; let frameH = 1  // natural dimensions of the frame
+
+// ——— Launch ———
 
 async function launchBrowser() {
   if (!targetUrl.value) return
@@ -194,28 +189,8 @@ async function launchBrowser() {
   try {
     const res = await authCaptureApi.createSession(targetUrl.value)
     sessionId.value = res.data.session_id
-    screenshotUrl.value = buildScreenshotUrl()
-
-    // Auto-fill login form after page loads
-    if (loginUsername.value || loginPassword.value) {
-      setTimeout(() => {
-        if (loginUsername.value) {
-          browserSessionsApi.event(sessionId.value, {
-            type: 'type',
-            text: loginUsername.value,
-          })
-        }
-        // Focus password field via tab
-        setTimeout(() => {
-          if (loginPassword.value) {
-            browserSessionsApi.event(sessionId.value, {
-              type: 'type',
-              text: loginPassword.value,
-            })
-          }
-        }, 300)
-      }, 2000)
-    }
+    await nextTick()
+    connectWs()
   } catch (e: any) {
     console.error('launch failed', e)
   } finally {
@@ -223,87 +198,108 @@ async function launchBrowser() {
   }
 }
 
-function buildScreenshotUrl() {
+// ——— WebSocket frame stream ———
+
+function connectWs() {
   const token = auth.token
-  return browserSessionsApi.screenshotUrl(sessionId.value, token) + '&t=' + Date.now()
-}
+  if (!token || !sessionId.value) return
+  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:'
+  const url = `${proto}//${location.host}/api/browser-sessions/${sessionId.value}/ws?token=${token}`
+  ws = new WebSocket(url)
+  ws.binaryType = 'arraybuffer'
 
-function refreshScreenshot() {
-  screenshotUrl.value = buildScreenshotUrl()
-}
+  ws.onopen = () => { wsConnected.value = true }
 
-let screenshotLoading = false
-function onScreenshotLoaded() {
-  screenshotLoading = false
-  // Trigger next refresh after a short interval if still in browser view
-  if (sessionId.value && !extracted.value) {
-    setTimeout(refreshScreenshot, 500)
+  ws.onmessage = (evt) => {
+    if (evt.data instanceof ArrayBuffer) {
+      // Binary JPEG frame
+      const blob = new Blob([evt.data], { type: 'image/jpeg' })
+      frameUrl.value = URL.createObjectURL(blob)
+      // Revoke previous URL after a tick to free memory
+      setTimeout(() => { /* old URL auto-revoked */ }, 100)
+    } else {
+      // JSON message (init, error, etc.)
+      try {
+        const msg = JSON.parse(evt.data)
+        if (msg.error) {
+          console.warn('WS error:', msg.error)
+        }
+      } catch { /* ignore */ }
+    }
   }
-}
-function onScreenshotError() {
-  screenshotLoading = false
-  if (sessionId.value && !extracted.value) {
-    setTimeout(refreshScreenshot, 1500)
+
+  ws.onclose = () => {
+    wsConnected.value = false
+    ws = null
+  }
+
+  ws.onerror = () => {
+    wsConnected.value = false
   }
 }
 
-// ——— Event forwarding ———
-
-async function sendEvent(type: string, extra: Record<string, any> = {}) {
-  if (!sessionId.value) return
-  try {
-    const eventData: any = { type, ...extra }
-    await browserSessionsApi.event(sessionId.value, eventData)
-    refreshScreenshot()
-  } catch (e) {
-    console.error('event failed', e)
+function wsSend(data: Record<string, any>) {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(data))
   }
 }
 
-function scalePointer(e: PointerEvent) {
-  const el = browserFrameRef.value
+function onFrameLoad(e: Event) {
+  const img = e.target as HTMLImageElement
+  frameW = img.naturalWidth || 1
+  frameH = img.naturalHeight || 1
+}
+
+// ——— Event forwarding (via WS) ———
+
+function scalePoint(e: PointerEvent): { x: number; y: number } {
+  const el = frameRef.value
   if (!el) return { x: e.clientX, y: e.clientY }
   const rect = el.getBoundingClientRect()
-  // Scale from display size to natural image size
-  const scaleX = imgNaturalSize.value.w / rect.width
-  const scaleY = imgNaturalSize.value.h / rect.height
   return {
-    x: (e.clientX - rect.left) * scaleX,
-    y: (e.clientY - rect.top) * scaleY,
+    x: ((e.clientX - rect.left) / rect.width) * frameW,
+    y: ((e.clientY - rect.top) / rect.height) * frameH,
   }
 }
 
 function onPointerDown(e: PointerEvent) {
-  const p = scalePointer(e)
-  pointerPos.value = p
-  sendEvent('click', { x: p.x, y: p.y, button: e.button === 2 ? 'right' : 'left' })
+  pointerDown = true
+  const p = scalePoint(e)
+  wsSend({ type: e.buttons === 2 ? 'mousedown' : 'mousedown', x: p.x, y: p.y, button: e.button === 2 ? 'right' : 'left' })
 }
+
 function onPointerMove(e: PointerEvent) {
-  const p = scalePointer(e)
-  pointerPos.value = p
+  if (!pointerDown) return
+  const p = scalePoint(e)
+  wsSend({ type: 'mousemove', x: p.x, y: p.y })
 }
+
 function onPointerUp(e: PointerEvent) {
-  pointerPos.value = scalePointer(e)
+  if (!pointerDown) return
+  pointerDown = false
+  const p = scalePoint(e)
+  wsSend({ type: 'mouseup', x: p.x, y: p.y, button: e.button === 2 ? 'right' : 'left' })
 }
-function onPointerCancel() { /* no-op */ }
+
 function onDblClick(e: MouseEvent) {
-  const p = scalePointer(e as unknown as PointerEvent)
-  sendEvent('dblclick', { x: p.x, y: p.y })
+  const p = scalePoint(e as unknown as PointerEvent)
+  wsSend({ type: 'dblclick', x: p.x, y: p.y })
 }
+
 function onWheel(e: WheelEvent) {
-  sendEvent('scroll', { delta_x: e.deltaX, delta_y: e.deltaY, x: pointerPos.value.x, y: pointerPos.value.y })
+  const p = scalePoint(e as unknown as PointerEvent)
+  wsSend({ type: 'scroll', delta_x: e.deltaX, delta_y: e.deltaY, x: p.x, y: p.y })
 }
+
 function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    sendEvent('key', { key: 'Enter' })
-  } else if (e.key === 'Backspace') {
-    sendEvent('key', { key: 'Backspace' })
-  } else if (e.key === 'Escape') {
-    sendEvent('key', { key: 'Escape' })
-  } else if (e.key === 'Tab') {
-    sendEvent('key', { key: 'Tab' })
-  } else if (e.key.length === 1) {
-    sendEvent('type', { text: e.key })
+  const keyMap: Record<string, string> = {
+    Enter: 'Enter', Backspace: 'Backspace', Escape: 'Escape', Tab: 'Tab',
+    ArrowUp: 'ArrowUp', ArrowDown: 'ArrowDown', ArrowLeft: 'ArrowLeft', ArrowRight: 'ArrowRight',
+  }
+  if (keyMap[e.key]) {
+    wsSend({ type: 'key', key: keyMap[e.key] })
+  } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+    wsSend({ type: 'type', text: e.key })
   }
 }
 
@@ -341,10 +337,10 @@ function resetExtract() {
   extracted.value = false
   result.value = null
   selectedIndex.value = -1
-  refreshScreenshot()
 }
 
 async function handleClose() {
+  disconnectWs()
   if (sessionId.value) {
     try { await authCaptureApi.closeSession(sessionId.value) } catch { /* ignore */ }
   }
@@ -356,168 +352,104 @@ function closeDialog() {
   emit('update:modelValue', false)
 }
 
+function disconnectWs() {
+  if (ws) {
+    ws.onclose = null
+    ws.onmessage = null
+    ws.close()
+    ws = null
+  }
+  wsConnected.value = false
+}
+
+onUnmounted(() => {
+  disconnectWs()
+  if (sessionId.value) {
+    authCaptureApi.closeSession(sessionId.value).catch(() => {})
+  }
+})
+
+// ——— Helpers ———
+
+function badgeLabel(type: string): string {
+  return { bearer_token: 'Bearer', cookie: 'Cookie', api_key: 'API Key', credential: 'Key' }[type] || type
+}
+function confClass(s: number): string {
+  return s >= 80 ? 'conf-high' : s >= 50 ? 'conf-mid' : 'conf-low'
+}
 function maskValue(v: string): string {
   if (!v || v.length <= 8) return '***'
   if (v.length <= 16) return v.slice(0, 4) + '…' + v.slice(-4)
   return v.slice(0, 8) + '…' + v.slice(-6)
 }
-
-function confidenceClass(score: number): string {
-  if (score >= 80) return 'conf-high'
-  if (score >= 50) return 'conf-mid'
-  return 'conf-low'
-}
 </script>
 
 <style scoped>
-.auth-capture-body {
-  min-height: 350px;
-}
-.capture-step {
-  padding: 4px 0;
-}
+.auth-capture-body { min-height: 350px; }
+.capture-step { padding: 4px 0; }
 .capture-step-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.capture-step-header h4 {
-  margin: 0;
-}
-.capture-actions {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-.capture-hint {
-  color: var(--el-text-color-secondary);
-  font-size: 0.85rem;
-  margin: 0 0 10px;
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 6px; flex-wrap: wrap; gap: 8px;
 }
+.capture-step-header h4 { margin: 0; }
+.capture-actions { display: flex; gap: 6px; align-items: center; }
+.capture-hint { color: var(--el-text-color-secondary); font-size: 0.85rem; margin: 0 0 8px; }
 .capture-extra-fields {
-  margin-top: 8px;
-  padding: 8px;
-  background: var(--el-fill-color-lighter);
-  border-radius: 6px;
+  margin-top: 8px; padding: 8px; background: var(--el-fill-color-lighter); border-radius: 6px;
 }
 .capture-launch-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 4px;
+  display: flex; justify-content: space-between; align-items: center; margin-top: 4px;
 }
+.ws-status { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--el-text-color-secondary); }
+.ws-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
+.ws-dot.connected { background: #52c41a; }
+.ws-dot.disconnected { background: #ff4d4f; }
 .browser-viewport {
-  border: 1px solid var(--el-border-color);
-  border-radius: 8px;
-  overflow: hidden;
-  background: #000;
-  cursor: crosshair;
-  outline: none;
-  position: relative;
-  min-height: 300px;
+  border: 1px solid var(--el-border-color); border-radius: 8px; overflow: hidden;
+  background: #000; cursor: crosshair; outline: none; position: relative; min-height: 300px;
 }
 .browser-frame {
-  display: block;
-  width: 100%;
-  height: auto;
-  user-select: none;
-  -webkit-user-drag: none;
+  display: block; width: 100%; height: auto;
+  user-select: none; -webkit-user-drag: none;
 }
 .browser-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 300px;
-  color: var(--el-text-color-secondary);
-  gap: 12px;
+  display: flex; flex-direction: column; align-items: center;
+  justify-content: center; min-height: 300px;
+  color: var(--el-text-color-secondary); gap: 12px;
 }
-
-/* Candidate panel */
 .candidate-panel {
-  margin-top: 12px;
-  border: 1px solid var(--el-border-color);
-  border-radius: 8px;
-  overflow: hidden;
+  margin-top: 12px; border: 1px solid var(--el-border-color); border-radius: 8px; overflow: hidden;
 }
 .candidate-panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 12px;
-  background: var(--el-fill-color-light);
-  font-size: 0.85rem;
-  font-weight: 600;
-}
-.candidate-empty {
-  padding: 24px;
-  text-align: center;
-  color: var(--el-text-color-secondary);
-  font-size: 0.85rem;
-}
-.candidate-list {
-  max-height: 280px;
-  overflow-y: auto;
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 8px 12px; background: var(--el-fill-color-light); font-size: 0.85rem; font-weight: 600;
 }
+.candidate-empty { padding: 24px; text-align: center; color: var(--el-text-color-secondary); font-size: 0.85rem; }
+.candidate-list { max-height: 280px; overflow-y: auto; }
 .candidate-card {
-  padding: 8px 12px;
-  cursor: pointer;
-  border-bottom: 1px solid var(--el-border-color-light);
+  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--el-border-color-light);
   transition: background 0.1s;
 }
-.candidate-card:last-child {
-  border-bottom: none;
-}
-.candidate-card:hover,
-.candidate-card.selected {
-  background: var(--el-color-primary-light-9);
-}
-.candidate-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 2px;
-}
+.candidate-card:last-child { border-bottom: none; }
+.candidate-card:hover, .candidate-card.selected { background: var(--el-color-primary-light-9); }
+.candidate-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
 .candidate-badge {
-  display: inline-block;
-  padding: 0 6px;
-  border-radius: 4px;
-  font-size: 0.72rem;
-  font-weight: 600;
-  margin-right: 6px;
+  display: inline-block; padding: 0 6px; border-radius: 4px;
+  font-size: 0.72rem; font-weight: 600; margin-right: 6px;
 }
 .candidate-badge.bearer_token { background: #e6f7ff; color: #1890ff; }
 .candidate-badge.cookie { background: #fff7e6; color: #d48806; }
+.candidate-badge.api_key { background: #f0f5ff; color: #2f54eb; }
 .candidate-badge.credential { background: #f6ffed; color: #52c41a; }
-.candidate-label {
-  font-size: 0.82rem;
-  color: var(--el-text-color-secondary);
-}
-.candidate-confidence {
-  font-size: 0.75rem;
-  font-weight: 600;
-  padding: 1px 6px;
-  border-radius: 8px;
-}
+.candidate-label { font-size: 0.82rem; color: var(--el-text-color-secondary); }
+.candidate-confidence { font-size: 0.75rem; font-weight: 600; padding: 1px 6px; border-radius: 8px; }
 .conf-high { background: #f6ffed; color: #52c41a; }
 .conf-mid { background: #fff7e6; color: #d48806; }
 .conf-low { background: #fff2f0; color: #ff4d4f; }
-.candidate-preview {
-  margin-left: 24px;
-}
-.candidate-preview code {
-  font-size: 0.78rem;
-  color: var(--el-text-color-regular);
-  word-break: break-all;
-}
+.candidate-preview { margin-left: 24px; }
+.candidate-preview code { font-size: 0.78rem; color: var(--el-text-color-regular); word-break: break-all; }
 .candidate-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 8px 12px;
-  background: var(--el-fill-color-light);
+  display: flex; justify-content: flex-end; gap: 8px;
+  padding: 8px 12px; background: var(--el-fill-color-light);
 }
 </style>

frontend/src/views/Upstreams.vue

@@ -460,13 +460,30 @@ function handleAuthCaptureSelect(candidate: { type: string; value: string; cooki
   if (candidate.type === 'bearer_token') {
     form.value.auth_type = 'bearer'
     form.value.auth_config.token = candidate.value
+    ElMessage.success('已填入 Bearer Token')
   } else if (candidate.type === 'cookie') {
     form.value.auth_type = 'cookie'
     form.value.auth_config.cookie_string = candidate.cookie_name && candidate.cookie_value
       ? `${candidate.cookie_name}=${candidate.cookie_value}`
       : candidate.value
+    ElMessage.success('已填入 Cookie')
+  } else if (candidate.type === 'api_key') {
+    form.value.auth_type = 'api_key'
+    form.value.auth_config.key = candidate.value
+    form.value.auth_config.header = 'X-API-Key'
+    ElMessage.success('已填入 API Key')
+  } else if (candidate.type === 'credential') {
+    // Try to guess — if value starts with 'sk-', treat as bearer
+    if (candidate.value.startsWith('sk-')) {
+      form.value.auth_type = 'bearer'
+      form.value.auth_config.token = candidate.value
+      ElMessage.success('已填入 Bearer Token (sk-key)')
+    } else {
+      form.value.auth_type = 'bearer'
+      form.value.auth_config.token = candidate.value
+      ElMessage.success('已填入认证信息')
+    }
   }
-  ElMessage.success(`已填入${candidate.type === 'cookie' ? 'Cookie' : 'Bearer Token'}认证信息`)
 }
 
 const quickPlatform = ref('sub2api')