ghost-bridge 0.7.1 → 0.9.0

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.1",
+  "version": "0.9.0",
   "private": false,
   "type": "module",
   "description": "Ghost Bridge: Zero-restart Chrome debugger bridge for Claude MCP. Includes CLI for easy setup.",
@@ -17,12 +17,12 @@
   "author": "<Author>",
   "repository": {
     "type": "git",
-    "url": "https://github.com/<Username>/ghost-bridge.git"
+    "url": "https://github.com/learnStop163/ghost-bridge.git"
   },
   "bugs": {
-    "url": "https://github.com/<Username>/ghost-bridge/issues"
+    "url": "https://github.com/learnStop163/ghost-bridge/issues"
   },
-  "homepage": "https://github.com/<Username>/ghost-bridge#readme",
+  "homepage": "https://github.com/learnStop163/ghost-bridge#readme",
   "license": "MIT",
   "engines": {
     "node": ">=18.0.0"