ghost-bridge 0.7.1 → 0.8.0

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.1",
+  "version": "0.8.0",
   "private": false,
   "type": "module",
   "description": "Ghost Bridge: Zero-restart Chrome debugger bridge for Claude MCP. Includes CLI for easy setup.",