Add debug logging to annotation button and create debug guide

- Add detailed logging to handleTextSelection and showAnnotationButton
- Log when annotations are disabled, selection validation fails, button clicks
- Create ANNOTATION_DEBUG.md with troubleshooting steps
- Helps diagnose why annotation button isn't appearing

Author: JOHN

ANNOTATION_DEBUG.md

@@ -0,0 +1,78 @@
+# Annotation Feature Debug Guide
+
+## How Annotations Should Work
+
+1. **Select text** on any webpage
+2. A purple **"Add Annotation"** button should appear near your selection
+3. Click the button to open the annotation modal
+4. Enter your comment and submit
+
+## Troubleshooting
+
+### Check if Content Script is Loaded
+
+1. Open any webpage
+2. Open browser DevTools (F12 or Cmd+Option+I)
+3. Go to Console tab
+4. Type: `window.__graphitiContentScriptLoaded`
+5. Should return `true` if loaded
+
+### Check if Annotations are Enabled
+
+1. Open extension popup
+2. Look for "Annotations" toggle switch
+3. Make sure it's ON (enabled)
+
+Or in console:
+```javascript
+chrome.storage.local.get('annotationsEnabled', (result) => {
+  console.log('Annotations enabled:', result.annotationsEnabled !== false);
+});
+```
+
+### Check Console for Errors
+
+1. Open DevTools Console
+2. Look for errors starting with `[Graphiti]`
+3. Check for:
+   - "Content script loaded" message
+   - "Annotation manager initialized" message
+   - Any red error messages
+
+### Test Selection
+
+1. Select some text (at least 1 character, max 1000 characters)
+2. Check console for:
+   - "handleTextSelection called"
+   - "Text selected" with length
+   - "Showing annotation button"
+   - "Annotation button added to DOM"
+
+### Common Issues
+
+**Button doesn't appear:**
+- Content script not loaded → Reload extension
+- Annotations disabled → Enable in popup
+- Text too short/long → Select 1-1000 characters
+- Selection collapsed → Make sure you actually selected text
+
+**Button appears but clicking does nothing:**
+- Check console for errors
+- Try clicking the button directly (not just the text)
+
+### Manual Test
+
+1. Open any webpage (e.g., example.com)
+2. Open DevTools Console
+3. Select some text
+4. You should see debug logs like:
+   ```
+   [Graphiti] [DEBUG] ContentScript: handleTextSelection called
+   [Graphiti] [DEBUG] ContentScript: Text selected {length: 10, preview: "..."}
+   [Graphiti] [INFO] ContentScript: Showing annotation button
+   [Graphiti] [INFO] ContentScript: Annotation button added to DOM
+   ```
+
+### Keyboard Shortcut
+
+Press `Alt+Shift+A` (Mac: `Option+Shift+A`) to toggle annotations on/off.

src/content/AnnotationManager.ts

@@ -375,8 +375,15 @@ export class AnnotationManager {
   }
 
   private handleTextSelection(event: MouseEvent) {
+    logger.debug('ContentScript', 'handleTextSelection called', { 
+      annotationsEnabled: this.annotationsEnabled,
+      pageX: event.pageX,
+      pageY: event.pageY 
+    });
+
     // Don't process if annotations are disabled
     if (!this.annotationsEnabled) {
+      logger.debug('ContentScript', 'Annotations disabled, skipping');
       return;
     }
 
@@ -385,12 +392,14 @@ export class AnnotationManager {
     if (target && typeof target === 'object' && 'closest' in target) {
       const element = target as HTMLElement;
       if (element.closest('.pubky-annotation-button') || element.closest('.pubky-annotation-modal')) {
+        logger.debug('ContentScript', 'Clicked on annotation UI, ignoring');
         return;
       }
     }
 
     const selection = window.getSelection();
     if (!selection || selection.isCollapsed) {
+      logger.debug('ContentScript', 'No selection or collapsed selection');
       // Delay hiding to allow button click to register
       setTimeout(() => {
         const button = document.querySelector('.pubky-annotation-button');
@@ -402,16 +411,27 @@ export class AnnotationManager {
     }
 
     const selectedText = selection.toString().trim();
+    logger.debug('ContentScript', 'Text selected', { 
+      length: selectedText.length,
+      preview: selectedText.substring(0, 50) 
+    });
 
     // Validate selected text using centralized validation
     const validation = validateSelectedText(selectedText);
     if (!validation.valid) {
-      logger.debug('ContentScript', 'Selection validation failed', { error: validation.error });
+      logger.warn('ContentScript', 'Selection validation failed', { 
+        error: validation.error,
+        textLength: selectedText.length 
+      });
       return;
     }
 
     const range = selection.getRangeAt(0);
     this.currentSelection = { range, text: validation.sanitized || selectedText };
+    logger.info('ContentScript', 'Showing annotation button', { 
+      x: event.pageX,
+      y: event.pageY 
+    });
     this.showAnnotationButton(event.pageX, event.pageY);
   }
 
@@ -434,6 +454,7 @@ export class AnnotationManager {
     button.onmousedown = (e) => {
       e.preventDefault();
       e.stopPropagation();
+      logger.info('ContentScript', 'Annotation button clicked (mousedown)');
       // Show modal immediately on mousedown to prevent button from being hidden
       this.showAnnotationModal();
     };
@@ -442,13 +463,18 @@ export class AnnotationManager {
     button.onclick = (e) => {
       e.preventDefault();
       e.stopPropagation();
+      logger.info('ContentScript', 'Annotation button clicked (click)');
       // If modal isn't already showing, show it
       if (!document.querySelector('.pubky-annotation-modal')) {
         this.showAnnotationModal();
       }
     };
 
     document.body.appendChild(button);
+    logger.info('ContentScript', 'Annotation button added to DOM', { 
+      x: button.style.left,
+      y: button.style.top 
+    });
   }
 
   private hideAnnotationButton() {

test-annotation-debug.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Annotation Debug Test</title>
+</head>
+<body>
+  <h1>Test Page for Annotations</h1>
+  <p>Select some text on this page. A button should appear.</p>
+  <p>This is a test paragraph with some text that you can select to test the annotation feature.</p>
+  
+  <script>
+    // Check if content script loaded
+    setTimeout(() => {
+      if (window.__graphitiContentScriptLoaded) {
+        console.log('✅ Content script loaded');
+      } else {
+        console.error('❌ Content script NOT loaded');
+      }
+      
+      // Check if annotations are enabled
+      if (typeof chrome !== 'undefined' && chrome.storage) {
+        chrome.storage.local.get('annotationsEnabled', (result) => {
+          console.log('Annotations enabled:', result.annotationsEnabled !== false);
+        });
+      }
+      
+      // Listen for selection
+      document.addEventListener('mouseup', () => {
+        const selection = window.getSelection();
+        if (selection && !selection.isCollapsed) {
+          console.log('Text selected:', selection.toString().substring(0, 50));
+          console.log('Selection length:', selection.toString().length);
+        }
+      });
+    }, 2000);
+  </script>
+</body>
+</html>