Update context binding UI indicators

src/popup/popup.css

@@ -108,6 +108,10 @@ body {
   background: #28a745;
 }
 
+.status-dot.unbound {
+  background: #6c757d;
+}
+
 .status-text {
   font-size: 12px;
   font-weight: 500;

src/popup/popup.js

@@ -433,7 +433,10 @@ function updateConnectionStatus(connection) {
     if ((connection.mode === 'context') && connection.context) {
       console.log('Popup: Context mode, context:', connection.context);
       console.log('Popup: Context mode, workspace info:', connection.workspace);
-      contextId.textContent = `Bound to context ID: ${connection.context.id}`;
+
+      // Create green dot indicator for bound state
+      const boundIndicator = '<span class="status-dot connected" style="margin-right: 6px;"></span>';
+      contextId.innerHTML = `${boundIndicator}Bound to context ID: ${connection.context.id}`;
 
       // Get workspace name from context or use fallback
       const workspaceName = connection.context.workspaceName || connection.context.workspace ||
@@ -453,23 +456,32 @@ function updateConnectionStatus(connection) {
     } else if ((connection.mode === 'explorer') && connection.workspace) {
       const wsName = getWorkspaceName(connection.workspace);
       console.log('Popup: Explorer mode, workspace:', wsName);
-      contextId.textContent = `Current workspace: ${wsName}`;
+
+      // Create gray dot indicator for unbound state (explorer mode is not bound - no dynamic updates)
+      const unboundIndicator = '<span class="status-dot unbound" style="margin-right: 6px;"></span>';
+      contextId.innerHTML = `${unboundIndicator}Current workspace: ${wsName}`;
 
       // Format URL as workspace.name://path
       const workspacePath = currentWorkspacePath || '/';
       contextUrl.textContent = formatContextUrl(wsName, workspacePath);
       contextUrl.classList.add('clickable');
     } else {
       console.log('Popup: No context or workspace selected');
-      contextId.textContent = '-';
+
+      // Create gray button indicator for unbound state
+      const unboundIndicator = '<span class="status-dot unbound" style="margin-right: 6px;"></span>';
+      contextId.innerHTML = `${unboundIndicator}-`;
       contextUrl.textContent = 'Not bound';
       contextUrl.classList.remove('clickable');
     }
   } else {
     console.log('Popup: Setting status to DISCONNECTED');
     connectionStatus.className = 'status-dot disconnected';
     connectionText.textContent = 'Disconnected';
-    contextId.textContent = '-';
+
+    // Create gray button indicator for unbound state when disconnected
+    const unboundIndicator = '<span class="status-dot unbound" style="margin-right: 6px;"></span>';
+    contextId.innerHTML = `${unboundIndicator}-`;
     contextUrl.textContent = 'No context';
     contextUrl.classList.remove('clickable');
   }