@hanzo/browser-extension 1.7.6 → 1.9.31

package/install-extension.sh

@@ -1,75 +0,0 @@
-#!/bin/bash
-# Hanzo Browser Extension Installer
-# Provides instructions and opens browser extension pages
-
-EXTENSION_DIR="$(dirname "$0")/dist/browser-extension"
-
-echo "=== Hanzo Browser Extension Installer ==="
-echo ""
-echo "Extension directories:"
-echo "  Chrome:  $EXTENSION_DIR/chrome"
-echo "  Firefox: $EXTENSION_DIR/firefox"
-echo "  Safari:  $EXTENSION_DIR/safari (requires Xcode)"
-echo ""
-
-# Check if servers are running
-if lsof -i :3001 > /dev/null 2>&1; then
-    echo "✓ Browser Extension Server running on port 3001"
-else
-    echo "✗ Browser Extension Server NOT running"
-    echo "  Start with: node dist/browser-extension/cli.js start"
-fi
-
-if lsof -i :9223 > /dev/null 2>&1; then
-    echo "✓ CDP Bridge Server running on port 9223"
-else
-    echo "✗ CDP Bridge Server NOT running"
-    echo "  Start with: node dist/cdp-bridge-server.js"
-fi
-
-echo ""
-echo "=== Installation Instructions ==="
-echo ""
-
-# Chrome
-echo "CHROME:"
-echo "  1. Open chrome://extensions/"
-echo "  2. Enable 'Developer mode'"
-echo "  3. Click 'Load unpacked'"
-echo "  4. Select: $EXTENSION_DIR"
-echo ""
-
-# Firefox
-echo "FIREFOX:"
-echo "  1. Open about:debugging#/runtime/this-firefox"
-echo "  2. Click 'Load Temporary Add-on...'"
-echo "  3. Select: $EXTENSION_DIR/firefox/manifest.json"
-echo ""
-
-# Safari
-echo "SAFARI:"
-echo "  1. Open Xcode"
-echo "  2. Create new Safari Web Extension project"
-echo "  3. Copy files from: $EXTENSION_DIR/safari/"
-echo "  4. Build and run"
-echo ""
-
-# Open browser extension pages based on arguments
-case "$1" in
-    chrome)
-        open -a "Google Chrome" "chrome://extensions/"
-        ;;
-    firefox)
-        open -a "Firefox Developer Edition" "about:debugging#/runtime/this-firefox" 2>/dev/null || \
-        open -a "Firefox" "about:debugging#/runtime/this-firefox"
-        ;;
-    all)
-        open -a "Google Chrome" "chrome://extensions/"
-        open -a "Firefox Developer Edition" "about:debugging#/runtime/this-firefox" 2>/dev/null || \
-        open -a "Firefox" "about:debugging#/runtime/this-firefox"
-        ;;
-    *)
-        echo "Usage: $0 [chrome|firefox|all]"
-        echo "  Opens the extension management page in the specified browser"
-        ;;
-esac

package/test/claude-integration.test.ts

@@ -1,251 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { BrowserExtensionServer } from '../src/browser-extension-server';
-import WebSocket from 'ws';
-import * as path from 'path';
-import * as fs from 'fs';
-
-describe('Claude Code Browser Extension Integration', () => {
-  let server: BrowserExtensionServer;
-  let ws: WebSocket;
-  const TEST_PORT = 3002;
-  
-  beforeEach(async () => {
-    // Start server
-    server = new BrowserExtensionServer(TEST_PORT, process.cwd());
-    
-    // Wait for server to be ready
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    // Connect WebSocket
-    ws = new WebSocket(`ws://localhost:${TEST_PORT}/browser-extension`);
-    await new Promise(resolve => ws.on('open', resolve));
-  });
-  
-  afterEach(() => {
-    ws.close();
-    server.close();
-  });
-  
-  describe('React source-map integration', () => {
-    it('should handle React component with __source', async () => {
-      const elementSelected = new Promise((resolve) => {
-        server.on('elementSelected', resolve);
-      });
-      
-      // Simulate React element click with source-map data
-      ws.send(JSON.stringify({
-        event: 'elementSelected',
-        framework: 'react',
-        domPath: 'div#root > div.App > button.submit-btn',
-        source: {
-          file: 'src/components/SubmitButton.tsx',
-          line: 42,
-          column: 12
-        }
-      }));
-      
-      const result = await elementSelected;
-      
-      expect(result).toMatchObject({
-        file: expect.stringContaining('SubmitButton.tsx'),
-        line: 42,
-        column: 12,
-        framework: 'react'
-      });
-    });
-    
-    it('should resolve webpack:// protocol paths', async () => {
-      const elementSelected = new Promise((resolve) => {
-        server.on('elementSelected', resolve);
-      });
-      
-      ws.send(JSON.stringify({
-        event: 'elementSelected',
-        framework: 'react',
-        domPath: 'header > nav > a',
-        source: {
-          file: 'webpack://my-app/./src/components/Navigation.jsx',
-          line: 15
-        }
-      }));
-      
-      const result = await elementSelected;
-      
-      expect(result).toMatchObject({
-        file: expect.stringContaining('Navigation.jsx'),
-        line: 15,
-        framework: 'react'
-      });
-    });
-  });
-  
-  describe('Vue source-map integration', () => {
-    it('should handle Vue component with __file', async () => {
-      const elementSelected = new Promise((resolve) => {
-        server.on('elementSelected', resolve);
-      });
-      
-      ws.send(JSON.stringify({
-        event: 'elementSelected',
-        framework: 'vue',
-        domPath: 'div#app > main > custom-button',
-        source: {
-          file: 'src/components/CustomButton.vue',
-          line: 28
-        }
-      }));
-      
-      const result = await elementSelected;
-      
-      expect(result).toMatchObject({
-        file: expect.stringContaining('CustomButton.vue'),
-        line: 28,
-        framework: 'vue'
-      });
-    });
-  });
-  
-  describe('Fallback to data-hanzo-id', () => {
-    it('should handle elements without source-map data', async () => {
-      // Create the .hanzo directory and id-map.json for test
-      const hanzoDir = path.join(process.cwd(), '.hanzo');
-      const mapFile = path.join(hanzoDir, 'id-map.json');
-      
-      if (!fs.existsSync(hanzoDir)) {
-        fs.mkdirSync(hanzoDir, { recursive: true });
-      }
-      
-      // Write test id map
-      fs.writeFileSync(mapFile, JSON.stringify({
-        'hanzo-abc123': {
-          file: path.join(process.cwd(), 'src/legacy/OldComponent.js'),
-          line: 55
-        }
-      }));
-      
-      const elementSelected = new Promise((resolve) => {
-        server.once('elementSelected', resolve);
-      });
-      
-      ws.send(JSON.stringify({
-        event: 'elementSelected',
-        framework: null,
-        domPath: 'body > div.legacy > span',
-        fallbackId: 'hanzo-abc123'
-      }));
-      
-      const result = await elementSelected;
-      
-      expect(result).toMatchObject({
-        file: expect.stringContaining('OldComponent.js'),
-        line: 55
-      });
-      
-      // Cleanup
-      if (fs.existsSync(mapFile)) {
-        fs.unlinkSync(mapFile);
-      }
-    });
-  });
-  
-  describe('Claude Code MCP integration', () => {
-    it('should format events for Claude Code consumption', async () => {
-      const events: any[] = [];
-      
-      server.on('elementSelected', (data) => {
-        events.push({
-          tool: 'browser_navigate_to_source',
-          arguments: {
-            file: data.file,
-            line: data.line,
-            column: data.column,
-            reason: `User clicked ${data.framework ? data.framework.charAt(0).toUpperCase() + data.framework.slice(1) : 'HTML'} element at ${data.domPath}`
-          }
-        });
-      });
-      
-      // Send multiple events
-      const testCases = [
-        {
-          framework: 'react',
-          source: { file: 'App.tsx', line: 10, column: 4 },
-          domPath: 'div#root > div.App'
-        },
-        {
-          framework: 'vue',
-          source: { file: 'Home.vue', line: 45 },
-          domPath: 'div#app > router-view > div.home'
-        }
-      ];
-      
-      for (const testCase of testCases) {
-        ws.send(JSON.stringify({
-          event: 'elementSelected',
-          ...testCase
-        }));
-        await new Promise(resolve => setTimeout(resolve, 50));
-      }
-      
-      expect(events).toHaveLength(2);
-      expect(events[0].tool).toBe('browser_navigate_to_source');
-      expect(events[0].arguments.reason).toContain('React element');
-      expect(events[1].arguments.reason).toContain('Vue element');
-    });
-  });
-  
-  describe('Error handling', () => {
-    it('should handle malformed messages gracefully', async () => {
-      // Server should not crash on bad input
-      ws.send('invalid json');
-      ws.send(JSON.stringify({ invalid: 'event' }));
-      ws.send(JSON.stringify({ event: 'unknown' }));
-      
-      // Give time for messages to process
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Server should still be responsive
-      const elementSelected = new Promise((resolve) => {
-        server.on('elementSelected', resolve);
-      });
-      
-      ws.send(JSON.stringify({
-        event: 'elementSelected',
-        framework: 'react',
-        source: { file: 'test.tsx', line: 1 }
-      }));
-      
-      const result = await elementSelected;
-      expect(result).toBeDefined();
-    });
-  });
-  
-  describe('Performance', () => {
-    it('should handle rapid clicks efficiently', async () => {
-      const events: any[] = [];
-      server.on('elementSelected', (data) => events.push(data));
-      
-      // Send 100 events rapidly
-      const startTime = Date.now();
-      
-      for (let i = 0; i < 100; i++) {
-        ws.send(JSON.stringify({
-          event: 'elementSelected',
-          framework: 'react',
-          domPath: `div#item-${i}`,
-          source: {
-            file: `Component${i}.tsx`,
-            line: i + 1
-          }
-        }));
-      }
-      
-      // Wait for all events to process
-      await new Promise(resolve => setTimeout(resolve, 500));
-      
-      const duration = Date.now() - startTime;
-      
-      expect(events).toHaveLength(100);
-      expect(duration).toBeLessThan(1000); // Should process 100 events in under 1 second
-    });
-  });
-});

package/test/server-frameworks-edge-cases.test.ts

@@ -1,145 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { ServerFrameworkDetector } from '../src/server-frameworks';
-import { JSDOM } from 'jsdom';
-
-describe('Server Framework Detection - Edge Cases', () => {
-  let detector: ServerFrameworkDetector;
-  let dom: JSDOM;
-  let document: Document;
-  
-  beforeEach(() => {
-    detector = new ServerFrameworkDetector();
-    dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
-    document = dom.window.document;
-    // @ts-ignore
-    global.document = document;
-  });
-  
-  describe('Django Debug Toolbar extraction', () => {
-    it('should handle Django with toolbar but no view info', () => {
-      // Create Django debug toolbar
-      const toolbar = document.createElement('div');
-      toolbar.id = 'djDebug';
-      document.body.appendChild(toolbar);
-      
-      const element = document.createElement('div');
-      const result = detector.detectDjango(element);
-      
-      expect(result).toMatchObject({
-        framework: 'django'
-      });
-    });
-  });
-  
-  describe('Code coverage for edge cases', () => {
-    it('should cover Django toolbar with specific panel', () => {
-      // Cover the Django Debug Toolbar code path
-      const toolbar = document.createElement('div');
-      toolbar.id = 'djDebugToolbar';
-      const panel = document.createElement('div');
-      panel.className = 'djDebugPanelContent';
-      const viewInfo = document.createElement('div');
-      viewInfo.className = 'view-info';
-      viewInfo.textContent = 'View: myapp.views.index';
-      panel.appendChild(viewInfo);
-      toolbar.appendChild(panel);
-      document.body.appendChild(toolbar);
-      
-      const element = document.createElement('div');
-      const info = detector['extractDjangoViewInfo']();
-      
-      // Just verify it doesn't crash and returns an object
-      expect(info).toBeDefined();
-      expect(typeof info).toBe('object');
-    });
-  });
-  
-  describe('Error handling', () => {
-    it('should handle missing Werkzeug traceback gracefully', () => {
-      const debuggerEl = document.createElement('div');
-      debuggerEl.id = 'werkzeug-debugger';
-      document.body.appendChild(debuggerEl);
-      
-      const element = document.createElement('div');
-      const result = detector.detectFlask(element);
-      
-      expect(result).toMatchObject({
-        framework: 'flask'
-      });
-      expect(result?.file).toBeUndefined();
-      expect(result?.line).toBeUndefined();
-    });
-  });
-  
-  describe('Rails edge cases', () => {
-    it('should handle Rails template without controller extraction', () => {
-      document.head.innerHTML = '<meta name="csrf-token" content="abc123">';
-      const element = document.createElement('div');
-      element.innerHTML = '<!-- BEGIN app/views/show.html.erb --><p>Content</p>';
-      
-      const result = detector.detectRails(element);
-      
-      expect(result).toMatchObject({
-        framework: 'rails',
-        template: 'app/views/show.html.erb',
-        controller: '',
-        action: 'show'
-      });
-    });
-    
-    it('should handle Rails without any comments', () => {
-      document.head.innerHTML = '<meta name="csrf-token" content="abc123">';
-      const element = document.createElement('div');
-      
-      const result = detector.detectRails(element);
-      
-      expect(result).toMatchObject({
-        framework: 'rails'
-      });
-    });
-  });
-  
-  describe('Real browser environment', () => {
-    it('should handle createTreeWalker in real browser', () => {
-      // Mock NodeFilter
-      global.NodeFilter = { SHOW_COMMENT: 8 };
-      
-      // Create a more realistic DOM structure
-      const element = document.createElement('div');
-      const parent = document.createElement('div');
-      parent.appendChild(element);
-      document.body.appendChild(parent);
-      
-      // Simulate TreeWalker behavior
-      const originalCreateTreeWalker = document.createTreeWalker;
-      let walkerCalled = false;
-      document.createTreeWalker = function() {
-        walkerCalled = true;
-        return {
-          nextNode: () => null
-        };
-      } as any;
-      
-      const comments = detector['extractHTMLComments'](element);
-      
-      expect(walkerCalled).toBe(true);
-      expect(comments).toEqual([]);
-      
-      // Restore
-      document.createTreeWalker = originalCreateTreeWalker;
-    });
-  });
-  
-  describe('All framework detection - null cases', () => {
-    it('should handle all detectors returning null', () => {
-      const element = document.createElement('div');
-      
-      // Ensure no framework markers are present
-      document.head.innerHTML = '';
-      document.body.innerHTML = '<div></div>';
-      
-      const result = detector.detect(element);
-      expect(result).toBeNull();
-    });
-  });
-});