ghost-bridge 0.7.0 → 0.8.0

package/extension/offscreen.js

@@ -4,6 +4,7 @@
 let ws = null
 let reconnectTimer = null
 let manualDisconnect = false  // 用户主动断开标志，防止 onclose 触发重连
+let connectionGeneration = 0
 let config = {
   basePort: 33333,
   token: '',
@@ -17,12 +18,42 @@ function log(msg) {
 
 const DEFAULT_TOKEN = 'ghost-bridge-local'
 
+function clearReconnectTimer() {
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer)
+    reconnectTimer = null
+  }
+}
+
+function isCurrentConnection(generation, socket) {
+  return generation === connectionGeneration && socket === ws
+}
+
+function scheduleReconnect(generation, delay) {
+  if (generation !== connectionGeneration) return
+  clearReconnectTimer()
+  reconnectTimer = setTimeout(() => {
+    if (generation === connectionGeneration) connect()
+  }, delay)
+}
+
+function closeCurrentSocket() {
+  if (!ws) return
+  try {
+    ws.close()
+  } catch {}
+  ws = null
+}
+
 // 连接到服务器
 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,12 +63,13 @@ 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 秒
 
@@ -45,19 +77,22 @@ function connect() {
   let socketOpened = false
   let terminalErrorMessage = ''
 
-  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') {
@@ -68,6 +103,13 @@ function connect() {
             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'
@@ -94,7 +136,8 @@ function connect() {
     }
   }
 
-  ws.onclose = (event) => {
+  socket.onclose = (event) => {
+    if (!isCurrentConnection(generation, socket)) return
     clearTimeout(connectionTimeout)
 
     // 用户主动断开，不重连
@@ -110,22 +153,28 @@ function connect() {
           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)
+    scheduleReconnect(generation, 1000)
   }
 
-  ws.onerror = () => {
+  socket.onerror = () => {
+    if (!isCurrentConnection(generation, socket)) return
     clearTimeout(connectionTimeout)
   }
 }
@@ -142,14 +191,9 @@ function sendToServer(data) {
 // 断开连接
 function disconnect() {
   manualDisconnect = true  // 标记为手动断开，阻止 onclose 重连
-  if (reconnectTimer) {
-    clearTimeout(reconnectTimer)
-    reconnectTimer = null
-  }
-  if (ws) {
-    ws.close()
-    ws = null
-  }
+  connectionGeneration++
+  clearReconnectTimer()
+  closeCurrentSocket()
   log('已断开连接')
 }
 
@@ -158,7 +202,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 })

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">

package/extension/popup.js

@@ -7,11 +7,13 @@ const detailContainer = document.getElementById('detailContainer')
 const portVal = document.getElementById('portVal')
 const tabRow = document.getElementById('tabRow')
 const tabVal = document.getElementById('tabVal')
-const errorRow = document.getElementById('errorRow')
-const errorVal = document.getElementById('errorVal')
-const errorList = document.getElementById('errorList')
+const viewingRow = document.getElementById('viewingRow')
+const viewingVal = document.getElementById('viewingVal')
 const headerGhost = document.getElementById('headerGhost')
 
+const targetBtn = document.getElementById('targetBtn')
+const targetBtnText = document.getElementById('targetBtnText')
+const targetIcon = document.getElementById('targetIcon')
 const connectBtn = document.getElementById('connectBtn')
 const disconnectBtn = document.getElementById('disconnectBtn')
 const scanInfo = document.getElementById('scanInfo')
@@ -19,6 +21,7 @@ const scanInfo = document.getElementById('scanInfo')
 let lastStableStatus = null
 let pendingStatus = null
 let statusChangeTimer = null
+let latestState = null
 const STATUS_DEBOUNCE_MS = 300
 
 const STATUS_MAP = {
@@ -53,8 +56,24 @@ const STATUS_MAP = {
 }
 
 function renderUI(state) {
-  const { status, port, enabled, currentPort, basePort, connectionError, errorCount, recentErrors, tabTitle } = state
+  latestState = state
+  const {
+    status,
+    port,
+    enabled,
+    currentPort,
+    basePort,
+    connectionError,
+    targetMode = 'focused',
+    targetTab,
+    viewingTab,
+    tabTitle,
+  } = state
+  const isPinned = targetMode === 'pinned'
   const config = STATUS_MAP[status] || STATUS_MAP.disconnected
+  const statusLabel = status === 'connected'
+    ? isPinned ? 'ON / Pinned' : 'ON / Following'
+    : config.text
 
   // Update classes for color & animations
   dotWrapper.className = `status-dot-wrapper ${config.statusClass}`
@@ -75,10 +94,10 @@ function renderUI(state) {
   }
 
   // Animate text change
-  if (statusText.textContent !== config.text) {
+  if (statusText.textContent !== statusLabel) {
     statusText.style.opacity = '0'
     setTimeout(() => {
-      statusText.textContent = config.text
+      statusText.textContent = statusLabel
       statusText.style.opacity = '1'
     }, 150)
   }
@@ -88,34 +107,21 @@ function renderUI(state) {
     portVal.textContent = port
     portVal.className = 'detail-value highlight'
     
-    if (tabTitle) {
+    const targetTitle = targetTab?.title || tabTitle
+    if (targetTitle) {
       tabRow.classList.remove('hidden')
-      tabVal.textContent = tabTitle
-      tabVal.title = tabTitle
+      tabVal.textContent = targetTitle
+      tabVal.title = targetTab?.url || targetTitle
     } else {
       tabRow.classList.add('hidden')
     }
 
-    errorRow.classList.remove('hidden')
-    errorVal.textContent = errorCount || 0
-    errorVal.className = errorCount > 0 ? 'detail-value warning' : 'detail-value'
-    
-    // Render error list
-    if (recentErrors && recentErrors.length > 0) {
-      errorList.innerHTML = recentErrors.map(err => {
-        const text = err.text ? err.text.substring(0, 100) : 'Unknown Error'
-        const file = err.url ? err.url.split('/').pop() : 'inline'
-        const loc = err.line ? `${file}:${err.line}` : file
-        return `
-          <div class="error-item" title="${err.text || ''}">
-            <div class="err-msg">${text}${err.text && err.text.length > 100 ? '...' : ''}</div>
-            <div class="err-loc">${loc}</div>
-          </div>
-        `
-      }).join('')
+    if (isPinned && viewingTab && targetTab && viewingTab.id !== targetTab.id) {
+      viewingRow.classList.remove('hidden')
+      viewingVal.textContent = viewingTab.title || 'Untitled'
+      viewingVal.title = viewingTab.url || viewingTab.title || ''
     } else {
-      errorList.innerHTML = '<div class="error-item" style="text-align:center;color:#64748b;border:none;">No recent errors recorded.</div>'
-      errorList.classList.add('collapsed')
+      viewingRow.classList.add('hidden')
     }
     
     detailContainer.classList.remove('collapsed')
@@ -123,21 +129,21 @@ function renderUI(state) {
     portVal.textContent = `Connecting: ${currentPort}`
     portVal.className = 'detail-value highlight'
     tabRow.classList.add('hidden')
-    errorRow.classList.add('hidden')
+    viewingRow.classList.add('hidden')
     detailContainer.classList.remove('collapsed')
   } else if (status === 'disconnected') {
     detailContainer.classList.add('collapsed')
   } else if (status === 'not_found') {
-    portVal.textContent = 'Launch Claude Code'
+    portVal.textContent = 'No Bridge'
     portVal.className = 'detail-value warning'
     tabRow.classList.add('hidden')
-    errorRow.classList.add('hidden')
+    viewingRow.classList.add('hidden')
     detailContainer.classList.remove('collapsed')
   } else if (status === 'error') {
     portVal.textContent = `Port ${currentPort || basePort || '-'} blocked`
     portVal.className = 'detail-value warning'
     tabRow.classList.add('hidden')
-    errorRow.classList.add('hidden')
+    viewingRow.classList.add('hidden')
     detailContainer.classList.remove('collapsed')
   } else {
     detailContainer.classList.add('collapsed')
@@ -152,12 +158,24 @@ function renderUI(state) {
     connectBtn.disabled = false
   }
 
+  targetBtn.classList.toggle('pinned', isPinned)
+  targetBtnText.textContent = isPinned ? 'Locked' : 'Pin'
+  targetIcon.textContent = isPinned ? '●' : '○'
+  targetBtn.title = isPinned
+    ? 'Unpin target tab and follow the focused tab'
+    : 'Pin current tab as the Ghost Bridge target'
+  targetBtn.setAttribute('aria-label', targetBtn.title)
+  targetBtn.disabled = status !== 'connected' || !port
+
   // Scan info text
   if (status === 'error' && connectionError) {
     scanInfo.textContent = connectionError
     scanInfo.classList.remove('collapsed')
+  } else if (status === 'connected' && state.targetError) {
+    scanInfo.textContent = state.targetError
+    scanInfo.classList.remove('collapsed')
   } else if (status === 'not_found' && basePort) {
-    scanInfo.textContent = `Port ${basePort} unavailable. Is your MCP server running on this port?`
+    scanInfo.textContent = connectionError || `No ghost-bridge WebSocket service was found on port ${basePort}. Start a configured MCP client, then reconnect.`
     scanInfo.classList.remove('collapsed')
   } else {
     scanInfo.classList.add('collapsed')
@@ -212,6 +230,27 @@ async function fetchStatus() {
   }
 }
 
+targetBtn.addEventListener('click', async () => {
+  try {
+    const isPinned = latestState?.targetMode === 'pinned'
+    targetBtnText.textContent = isPinned ? 'Unlocking' : 'Pinning'
+    targetBtn.disabled = true
+    const response = await chrome.runtime.sendMessage({
+      type: isPinned ? 'unpinTab' : 'pinCurrentTab',
+    })
+    if (response && !response.ok) {
+      scanInfo.textContent = response.error || 'Target action failed'
+      scanInfo.classList.remove('collapsed')
+    }
+  } catch (e) {
+    console.error('Target action failed:', e)
+    scanInfo.textContent = e.message
+    scanInfo.classList.remove('collapsed')
+  } finally {
+    setTimeout(fetchStatus, 100)
+  }
+})
+
 connectBtn.addEventListener('click', async () => {
   try {
     // Add visual click feedback
@@ -240,12 +279,3 @@ chrome.runtime.onMessage.addListener((message) => {
     updateUI(message.state)
   }
 })
-
-// Error List Toggle Logic
-errorRow.addEventListener('click', () => {
-  if (errorList.classList.contains('collapsed')) {
-    errorList.classList.remove('collapsed')
-  } else {
-    errorList.classList.add('collapsed')
-  }
-})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghost-bridge",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "private": false,
   "type": "module",
   "description": "Ghost Bridge: Zero-restart Chrome debugger bridge for Claude MCP. Includes CLI for easy setup.",