ghost-bridge 0.7.1 → 0.9.0

package/extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Ghost Bridge",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "Zero-restart Chrome debugger bridge for Claude MCP, optimized for no-sourcemap production debugging.",
   "permissions": [
     "debugger",
@@ -9,7 +9,8 @@
     "scripting",
     "storage",
     "tabs",
-    "offscreen"
+    "offscreen",
+    "idle"
   ],
   "host_permissions": [
     "ws://localhost/*",

package/extension/offscreen.js

@@ -3,26 +3,113 @@
 
 let ws = null
 let reconnectTimer = null
+let heartbeatTimer = null
 let manualDisconnect = false  // 用户主动断开标志，防止 onclose 触发重连
+let connectionGeneration = 0
 let config = {
   basePort: 33333,
   token: '',
 }
 
+const HEARTBEAT_INTERVAL_MS = 15000
+const HEARTBEAT_TIMEOUT_MS = 45000
+const DEFAULT_TOKEN = 'ghost-bridge-local'
+
 function log(msg) {
   console.log(`[ghost-bridge offscreen] ${msg}`)
   // 转发日志到 service worker
   chrome.runtime.sendMessage({ type: 'log', msg }).catch(() => {})
 }
 
-const DEFAULT_TOKEN = 'ghost-bridge-local'
+function clearReconnectTimer() {
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer)
+    reconnectTimer = null
+  }
+}
+
+function clearHeartbeatTimer() {
+  if (heartbeatTimer) {
+    clearInterval(heartbeatTimer)
+    heartbeatTimer = null
+  }
+}
+
+function isCurrentConnection(generation, socket) {
+  return generation === connectionGeneration && socket === ws
+}
+
+function scheduleReconnect(generation, delay) {
+  if (generation !== connectionGeneration) return
+  clearReconnectTimer()
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null
+    if (!manualDisconnect && generation === connectionGeneration) connect()
+  }, delay)
+}
+
+function closeCurrentSocket() {
+  clearHeartbeatTimer()
+  if (!ws) return
+  try {
+    ws.close()
+  } catch {}
+  ws = null
+}
+
+function describeCloseEvent(event) {
+  const reason = event.reason ? ` reason="${event.reason}"` : ''
+  return `code=${event.code}${reason} clean=${event.wasClean}`
+}
+
+function describeReadyState(socket) {
+  const states = ['CONNECTING', 'OPEN', 'CLOSING', 'CLOSED']
+  return states[socket.readyState] || String(socket.readyState)
+}
+
+function startHeartbeat(generation, socket, port, requireAck) {
+  clearHeartbeatTimer()
+  let lastAckAt = Date.now()
+
+  heartbeatTimer = setInterval(() => {
+    if (!isCurrentConnection(generation, socket) || socket.readyState !== WebSocket.OPEN) {
+      clearHeartbeatTimer()
+      return
+    }
+
+    const now = Date.now()
+    if (requireAck && now - lastAckAt > HEARTBEAT_TIMEOUT_MS) {
+      log(`端口 ${port} 心跳超时，关闭连接后重连...`)
+      try {
+        socket.close(4000, 'Heartbeat timeout')
+      } catch {}
+      return
+    }
+
+    try {
+      socket.send(JSON.stringify({ type: 'heartbeat', token: config.token, ts: now }))
+    } catch (e) {
+      log(`端口 ${port} 心跳发送失败：${e.message}`)
+      try {
+        socket.close(4001, 'Heartbeat send failed')
+      } catch {}
+    }
+  }, HEARTBEAT_INTERVAL_MS)
+
+  return () => {
+    lastAckAt = Date.now()
+  }
+}
 
 // 连接到服务器
 function connect() {
   // 如果已手动断开，不再尝试连接
   if (manualDisconnect) return
+  clearReconnectTimer()
+  closeCurrentSocket()
 
   const port = config.basePort
+  const generation = ++connectionGeneration
   const url = new URL(`ws://localhost:${port}`)
   url.searchParams.set('token', config.token)
   log(`尝试连接固定端口 ${port}...`)
@@ -32,42 +119,60 @@ function connect() {
     currentPort: port,
   }).catch(() => {})
 
-  ws = new WebSocket(url.toString())
-  ws.binaryType = 'blob' // 明确设置
+  const socket = new WebSocket(url.toString())
+  ws = socket
+  socket.binaryType = 'blob' // 明确设置
 
   const connectionTimeout = setTimeout(() => {
-    if (ws && ws.readyState === WebSocket.CONNECTING) {
-      ws.close()
+    if (isCurrentConnection(generation, socket) && socket.readyState === WebSocket.CONNECTING) {
+      socket.close()
     }
   }, 2000) // 增加到 2 秒
 
   let identityVerified = false
   let socketOpened = false
   let terminalErrorMessage = ''
+  let markHeartbeatAck = null
 
-  ws.onopen = () => {
+  socket.onopen = () => {
+    if (!isCurrentConnection(generation, socket)) return
     socketOpened = true
     clearTimeout(connectionTimeout)
     log(`WebSocket 已连接端口 ${port}，等待身份验证...`)
   }
 
-  ws.onmessage = async (event) => {
+  socket.onmessage = async (event) => {
     try {
+      if (!isCurrentConnection(generation, socket)) return
       // 处理 Blob 类型的消息
       let data = event.data
       if (data instanceof Blob) {
         data = await data.text()
       }
+      if (!isCurrentConnection(generation, socket)) return
       const msg = JSON.parse(data)
 
       if (msg.type === 'identity') {
         if (msg.service === 'ghost-bridge' && msg.token === config.token) {
           identityVerified = true
+          markHeartbeatAck = startHeartbeat(
+            generation,
+            socket,
+            port,
+            Array.isArray(msg.capabilities) && msg.capabilities.includes('heartbeat')
+          )
           log(`✅ 已连接到 ghost-bridge 服务 (端口 ${port})`)
           chrome.runtime.sendMessage({
             type: 'status',
             status: 'connected',
             port: port,
+            serverInfo: {
+              version: msg.version,
+              pid: msg.pid,
+              port: msg.port,
+              startedAt: msg.startedAt,
+              serverPath: msg.serverPath,
+            },
           }).catch(() => {})
         } else {
           terminalErrorMessage = msg.service === 'ghost-bridge'
@@ -80,11 +185,17 @@ function connect() {
             currentPort: port,
             errorMessage: terminalErrorMessage,
           }).catch(() => {})
-          ws.close()
+          socket.close()
         }
         return
       }
 
+      if (msg.type === 'heartbeat_ack') {
+        if (markHeartbeatAck) markHeartbeatAck()
+        if (pendingHealthCheck) resolveHealthCheck(true)
+        return
+      }
+
       // 转发命令到 service worker
       if (identityVerified && msg.id) {
         chrome.runtime.sendMessage({ type: 'command', data: msg }).catch(() => {})
@@ -94,62 +205,123 @@ function connect() {
     }
   }
 
-  ws.onclose = (event) => {
+  socket.onclose = (event) => {
+    if (!isCurrentConnection(generation, socket)) return
     clearTimeout(connectionTimeout)
+    clearHeartbeatTimer()
+    ws = null
+    const closeInfo = describeCloseEvent(event)
 
     // 用户主动断开，不重连
-    if (manualDisconnect) return
+    if (manualDisconnect) {
+      log(`连接已按用户请求关闭 (${closeInfo})`)
+      return
+    }
 
     if (!identityVerified) {
       if (terminalErrorMessage || socketOpened) {
         const errorMessage = terminalErrorMessage || `Port ${port} is occupied or responding with a non-ghost-bridge protocol.`
-        log(`${errorMessage} 2秒后重试...`)
+        log(`${errorMessage} (${closeInfo}) 2秒后重试...`)
         chrome.runtime.sendMessage({
           type: 'status',
           status: 'error',
           currentPort: port,
           errorMessage,
         }).catch(() => {})
-        reconnectTimer = setTimeout(() => connect(), 2000)
+        scheduleReconnect(generation, 2000)
         return
       }
       log(`固定端口 ${port} 未发现可用服务，2秒后重试...`)
-      chrome.runtime.sendMessage({ type: 'status', status: 'not_found', currentPort: port }).catch(() => {})
-      reconnectTimer = setTimeout(() => connect(), 2000)
+      chrome.runtime.sendMessage({
+        type: 'status',
+        status: 'not_found',
+        currentPort: port,
+        errorMessage: `No ghost-bridge WebSocket service was found on port ${port}.`,
+      }).catch(() => {})
+      scheduleReconnect(generation, 2000)
       return
     }
 
     // 连接断开，重试
-    log(`端口 ${port} 连接断开，尝试重连...`)
-    chrome.runtime.sendMessage({ type: 'status', status: 'disconnected' }).catch(() => {})
-    reconnectTimer = setTimeout(() => connect(), 1000)
+    log(`端口 ${port} 连接断开 (${closeInfo})，尝试重连...`)
+    chrome.runtime.sendMessage({
+      type: 'status',
+      status: 'disconnected',
+      currentPort: port,
+      errorMessage: `Connection closed: ${closeInfo}`,
+    }).catch(() => {})
+    scheduleReconnect(generation, 1000)
   }
 
-  ws.onerror = () => {
+  socket.onerror = () => {
+    if (!isCurrentConnection(generation, socket)) return
     clearTimeout(connectionTimeout)
+    log(`端口 ${port} WebSocket 错误，readyState=${describeReadyState(socket)}`)
   }
 }
 
 // 发送消息到服务器
 function sendToServer(data) {
   if (ws && ws.readyState === WebSocket.OPEN) {
-    ws.send(JSON.stringify(data))
-    return true
+    try {
+      ws.send(JSON.stringify(data))
+      return true
+    } catch (e) {
+      log(`发送消息到服务器失败：${e.message}`)
+    }
   }
   return false
 }
 
+// ========== 唤醒探活 ==========
+// 系统睡眠/锁屏唤醒后连接可能处于半开状态且 onclose 不会触发，
+// 由 background 的 idle 钩子通知这里立即发一次心跳，短超时内无响应就主动重连
+let pendingHealthCheck = null
+
+function resolveHealthCheck(alive) {
+  if (!pendingHealthCheck) return
+  clearTimeout(pendingHealthCheck.timer)
+  const resolve = pendingHealthCheck.resolve
+  pendingHealthCheck = null
+  resolve(alive)
+}
+
+function requestHealthCheck() {
+  return new Promise((resolve) => {
+    if (manualDisconnect) return resolve(false)
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      log('唤醒探活：连接未打开，立即重连')
+      connect()
+      return resolve(false)
+    }
+    // 收敛上一次未完成的探活
+    if (pendingHealthCheck) resolveHealthCheck(false)
+
+    const timer = setTimeout(() => {
+      log('唤醒探活：心跳无响应，判定为死连接，关闭后重连')
+      resolveHealthCheck(false)
+      try {
+        ws.close(4002, 'Health check timeout')
+      } catch {}
+    }, 5000)
+    pendingHealthCheck = { timer, resolve }
+
+    try {
+      ws.send(JSON.stringify({ type: 'heartbeat', token: config.token, ts: Date.now() }))
+    } catch (e) {
+      log(`唤醒探活：心跳发送失败 (${e.message})，立即重连`)
+      resolveHealthCheck(false)
+      connect()
+    }
+  })
+}
+
 // 断开连接
 function disconnect() {
   manualDisconnect = true  // 标记为手动断开，阻止 onclose 重连
-  if (reconnectTimer) {
-    clearTimeout(reconnectTimer)
-    reconnectTimer = null
-  }
-  if (ws) {
-    ws.close()
-    ws = null
-  }
+  connectionGeneration++
+  clearReconnectTimer()
+  closeCurrentSocket()
   log('已断开连接')
 }
 
@@ -158,7 +330,6 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.type === 'connect') {
     config.basePort = message.basePort || 33333
     config.token = message.token || DEFAULT_TOKEN
-    disconnect()
     manualDisconnect = false  // 用户重新连接，清除断开标志
     connect()
     sendResponse({ ok: true })
@@ -180,6 +351,17 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.type === 'getOffscreenStatus') {
     sendResponse({
       connected: ws && ws.readyState === WebSocket.OPEN,
+      readyState: ws ? describeReadyState(ws) : 'CLOSED',
+      port: config.basePort,
+    })
+    return true
+  }
+
+  // 唤醒钩子触发的立即探活（background 的 chrome.idle 监听转发）
+  if (message.type === 'healthCheck') {
+    requestHealthCheck().then((alive) => {
+      if (!alive) log('唤醒探活完成：连接已重建/重连中')
+      sendResponse({ alive })
     })
     return true
   }

package/extension/popup.html

@@ -163,9 +163,17 @@
     }
 
     .status-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+
+    .status-main {
       display: flex;
       align-items: center;
       gap: 12px;
+      min-width: 0;
     }
 
     /* Modern Ripple/Pulse Animations */
@@ -200,6 +208,58 @@
       font-weight: 600;
       letter-spacing: 0.3px;
       transition: color 0.3s ease;
+      white-space: nowrap;
+    }
+
+    .target-toggle {
+      flex: 0 0 auto;
+      min-width: 72px;
+      height: 28px;
+      padding: 0 10px;
+      border: 1px solid rgba(0, 210, 255, 0.28);
+      border-radius: 999px;
+      background: rgba(0, 210, 255, 0.08);
+      color: #9deaff;
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.2px;
+      cursor: pointer;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .target-toggle:hover:not(:disabled) {
+      background: rgba(0, 210, 255, 0.16);
+      border-color: rgba(0, 210, 255, 0.5);
+      color: #ffffff;
+      box-shadow: 0 0 14px rgba(0, 210, 255, 0.16);
+    }
+
+    .target-toggle:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    .target-toggle.pinned {
+      background: rgba(255, 159, 10, 0.13);
+      border-color: rgba(255, 159, 10, 0.5);
+      color: #ffc56b;
+      box-shadow: 0 0 16px rgba(255, 159, 10, 0.12);
+    }
+
+    .target-toggle.pinned:hover:not(:disabled) {
+      background: rgba(255, 159, 10, 0.2);
+      border-color: rgba(255, 159, 10, 0.72);
+      color: #fff3d6;
+    }
+
+    .target-toggle .target-icon {
+      font-size: 12px;
+      line-height: 1;
     }
 
     .status-detail-container {
@@ -262,50 +322,6 @@
       color: #ff9f0a;
     }
 
-    .error-list {
-      max-height: 180px;
-      overflow-y: auto;
-      margin-top: 12px;
-      padding: 8px;
-      background: rgba(0, 0, 0, 0.4);
-      border-radius: 8px;
-      border: 1px solid rgba(255, 59, 48, 0.2);
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      opacity: 1;
-    }
-    .error-list.collapsed {
-      max-height: 0;
-      opacity: 0;
-      margin-top: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-      border-color: transparent;
-      overflow: hidden;
-    }
-    
-    .error-item {
-      font-size: 11px;
-      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
-      padding: 6px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-      word-break: break-work;
-      color: #e2e8f0;
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-    }
-    .error-item:last-child {
-      border-bottom: none;
-    }
-    .error-item .err-msg {
-      color: #ff8a8a;
-      white-space: pre-wrap;
-    }
-    .error-item .err-loc {
-      color: #64748b;
-      font-size: 10px;
-    }
-
     .btn-row {
       display: flex;
       gap: 10px;
@@ -432,10 +448,16 @@
 
     <div class="status-card" id="statusCard">
       <div class="status-row">
-        <div class="status-dot-wrapper" id="dotWrapper">
-          <div class="status-dot"></div>
+        <div class="status-main">
+          <div class="status-dot-wrapper" id="dotWrapper">
+            <div class="status-dot"></div>
+          </div>
+          <span class="status-text" id="statusText">Checking...</span>
         </div>
-        <span class="status-text" id="statusText">Checking...</span>
+        <button class="target-toggle" id="targetBtn" type="button" title="Pin current tab">
+          <span class="target-icon" id="targetIcon">○</span>
+          <span id="targetBtnText">Pin</span>
+        </button>
       </div>
       
       <div class="status-detail-container" id="detailContainer">
@@ -447,15 +469,11 @@
           <span class="detail-label">Target Tab</span>
           <span class="detail-value" id="tabVal" title="">-</span>
         </div>
-        <div class="detail-row clickable" id="errorRow" title="Click to view recent errors">
-          <span class="detail-label">Rec. Errors</span>
-          <span class="detail-value warning" id="errorVal">0</span>
+        <div class="detail-row hidden" id="viewingRow">
+          <span class="detail-label">Viewing Now</span>
+          <span class="detail-value" id="viewingVal" title="">-</span>
         </div>
       </div>
-      
-      <div id="errorList" class="error-list collapsed">
-        <!-- JS dynamically injects errors here -->
-      </div>
     </div>
 
     <div class="btn-row">