@hanzo/browser-extension 1.7.2

package/src/webgpu.d.ts

@@ -0,0 +1,131 @@
+// Ambient WebGPU type declarations for browser extension
+// Full types available via @webgpu/types package if needed
+
+interface GPU {
+  requestAdapter(options?: GPURequestAdapterOptions): Promise<GPUAdapter | null>;
+}
+
+interface GPURequestAdapterOptions {
+  powerPreference?: 'low-power' | 'high-performance';
+}
+
+interface GPUAdapter {
+  features: ReadonlySet<string>;
+  requestDevice(descriptor?: GPUDeviceDescriptor): Promise<GPUDevice>;
+}
+
+interface GPUDeviceDescriptor {
+  requiredFeatures?: string[];
+  requiredLimits?: Record<string, number>;
+}
+
+interface GPUDevice {
+  queue: GPUQueue;
+  createBuffer(descriptor: GPUBufferDescriptor): GPUBuffer;
+  createShaderModule(descriptor: GPUShaderModuleDescriptor): GPUShaderModule;
+  createComputePipeline(descriptor: GPUComputePipelineDescriptor): GPUComputePipeline;
+  createBindGroup(descriptor: GPUBindGroupDescriptor): GPUBindGroup;
+  createBindGroupLayout(descriptor: GPUBindGroupLayoutDescriptor): GPUBindGroupLayout;
+  createCommandEncoder(): GPUCommandEncoder;
+}
+
+interface GPUQueue {
+  submit(commandBuffers: GPUCommandBuffer[]): void;
+  writeBuffer(buffer: GPUBuffer, offset: number, data: BufferSource): void;
+}
+
+interface GPUBuffer {
+  size: number;
+  mapAsync(mode: number): Promise<void>;
+  getMappedRange(): ArrayBuffer;
+  unmap(): void;
+}
+
+interface GPUShaderModule {}
+
+interface GPUComputePipeline {}
+
+interface GPUBindGroup {}
+
+interface GPUBindGroupLayout {}
+
+interface GPUCommandEncoder {
+  beginComputePass(): GPUComputePassEncoder;
+  copyBufferToBuffer(src: GPUBuffer, srcOff: number, dst: GPUBuffer, dstOff: number, size: number): void;
+  finish(): GPUCommandBuffer;
+}
+
+interface GPUComputePassEncoder {
+  setPipeline(pipeline: GPUComputePipeline): void;
+  setBindGroup(index: number, bindGroup: GPUBindGroup): void;
+  dispatchWorkgroups(x: number, y?: number, z?: number): void;
+  end(): void;
+}
+
+interface GPUCommandBuffer {}
+
+interface GPUBufferDescriptor {
+  size: number;
+  usage: number;
+}
+
+interface GPUShaderModuleDescriptor {
+  code: string;
+}
+
+interface GPUComputePipelineDescriptor {
+  layout: 'auto' | GPUPipelineLayout;
+  compute: { module: GPUShaderModule; entryPoint: string };
+}
+
+interface GPUPipelineLayout {}
+
+interface GPUBindGroupDescriptor {
+  layout: GPUBindGroupLayout;
+  entries: GPUBindGroupEntry[];
+}
+
+interface GPUBindGroupEntry {
+  binding: number;
+  resource: { buffer: GPUBuffer } | GPUExternalTexture;
+}
+
+interface GPUExternalTexture {}
+
+interface GPUBindGroupLayoutDescriptor {
+  entries: GPUBindGroupLayoutEntry[];
+}
+
+interface GPUBindGroupLayoutEntry {
+  binding: number;
+  visibility: number;
+  buffer?: { type: string };
+}
+
+// WebGPU constants
+declare const GPUBufferUsage: {
+  MAP_READ: number;
+  MAP_WRITE: number;
+  COPY_SRC: number;
+  COPY_DST: number;
+  INDEX: number;
+  VERTEX: number;
+  UNIFORM: number;
+  STORAGE: number;
+};
+
+declare const GPUShaderStage: {
+  VERTEX: number;
+  FRAGMENT: number;
+  COMPUTE: number;
+};
+
+declare const GPUMapMode: {
+  READ: number;
+  WRITE: number;
+};
+
+// Extend Navigator
+interface Navigator {
+  gpu: GPU;
+}

package/test/claude-integration.test.ts

@@ -0,0 +1,251 @@
+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

@@ -0,0 +1,145 @@
+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();
+    });
+  });
+});