@promakeai/inspector 0.1.2 → 0.2.1

package/README.md

@@ -1,6 +1,7 @@
 # @promakeai/inspector
 
 [![Build Status](https://github.com/promakeai/inspector/actions/workflows/build.yml/badge.svg)](https://github.com/promakeai/inspector/actions/workflows/build.yml)
+[![Tests](https://github.com/promakeai/inspector/actions/workflows/test.yml/badge.svg)](https://github.com/promakeai/inspector/actions/workflows/test.yml)
 [![npm version](https://badge.fury.io/js/@promakeai%2Finspector.svg)](https://www.npmjs.com/package/@promakeai/inspector)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
@@ -24,7 +25,12 @@ Visual element inspector for React apps in iframe with AI prompt support. Perfec
 - 🔍 **Text Node Detection** - Automatically detect if selected element is a text node
 - 🖼️ **Image Node Detection** - Automatically detect if selected element is an image
 - 🏷️ **Promake Badge** - Optional "Built by Promake" badge with smooth animations
+- 🔍 **Element Highlighting** - Revisit and highlight previously inspected elements
+- 🆔 **Persistent Element IDs** - Structural signature-based IDs that survive page reloads
+- 🔄 **Reload-Safe Highlighting** - Same element gets same ID even after refresh
+- 🎯 **Smart Fallback** - Position-based matching when DOM structure changes
 - 📦 **TypeScript** - Full type safety
+- ✅ **Well Tested** - 42 unit tests + 35 e2e tests with 90%+ coverage
 
 ## Installation
 
@@ -211,6 +217,8 @@ function App() {
 - **showContentInput**: `(show: boolean, updateImmediately?: boolean) => void` - Show or hide text content input dynamically. If `updateImmediately` is true, DOM is updated immediately on submit (useful for slow backend responses)
 - **showImageInput**: `(show: boolean, updateImmediately?: boolean) => void` - Show or hide image input dynamically. If `updateImmediately` is true, DOM is updated immediately on submit (useful for slow backend responses)
 - **setBadgeVisible**: `(visible: boolean) => void` - Show or hide "Built by Promake" badge in bottom-right corner
+- **highlightElement**: `(identifier: string | ElementIdentifier, options?: HighlightOptions) => void` - Highlight an element in the iframe by ID or selector
+- **getElementByInspectorId**: `(inspectorId: string) => void` - Request element info by unique inspector ID
 
 ## Types
 
@@ -227,9 +235,115 @@ interface SelectedElementData {
   textContent?: string; // Text content of the element (if text node)
   isImageNode?: boolean; // Whether the element is an image node
   imageUrl?: string; // Image URL (if image node)
+  inspectorId?: string; // Unique inspector ID for element tracking
+  selector?: string; // CSS selector for element identification
 }
 ```
 
+### `ElementIdentifier`
+
+```typescript
+interface ElementIdentifier {
+  inspectorId: string; // Unique ID (primary)
+  selector: string; // CSS selector (fallback)
+  position?: {
+    // Position (for disambiguation)
+    top: number;
+    left: number;
+  };
+  component?: {
+    // Component info (metadata)
+    name: string;
+    fileName: string;
+    lineNumber?: number;
+  };
+}
+```
+
+### `HighlightOptions`
+
+```typescript
+interface HighlightOptions {
+  duration?: number; // Highlight duration in ms (default: 3000)
+  scrollIntoView?: boolean; // Scroll to element (default: true)
+  color?: string; // Highlight color (default: '#4417db')
+  animation?: "pulse" | "fade" | "none"; // Animation type (default: 'pulse')
+}
+```
+
+## Element Identification & Persistence
+
+Inspector uses a **structural signature-based ID system** to ensure the same element gets the same ID across page reloads, making it perfect for features like chat history highlighting.
+
+### How Persistent IDs Work
+
+#### ID Format
+
+```
+pi-{hash}
+```
+
+Example: `pi-1f2a3b4c`
+
+#### ID Generation
+
+IDs are generated based on element's structural properties:
+
+1. **XPath** - DOM tree position (primary identifier)
+2. **Static Identifiers** - `id`, `data-id`, `data-testid`, `data-component`, `data-cy`
+3. **Semantic Properties** - `tag`, `role`, `type`, `name`, `href`, `src`
+4. **Structural Context** - sibling index, parent tag (if no static ID)
+
+**Excluded for Stability:**
+
+- ❌ Class names (frequently change)
+- ❌ Text content (dynamic)
+- ❌ Style attributes (dynamic)
+
+#### Consistency Guarantees
+
+✅ **Same element → Same ID** (across page reloads)  
+✅ **Class changes → ID unchanged**  
+✅ **Text changes → ID unchanged**  
+✅ **Style changes → ID unchanged**  
+❌ **DOM position changes → Different ID** (new structure = new ID)
+
+#### Best Practices for Maximum Consistency
+
+To ensure the most reliable element identification:
+
+```html
+<!-- ✅ Best: Use data-id for elements you want to reliably track -->
+<div data-id="hero-section">...</div>
+<button data-id="cta-button">...</button>
+
+<!-- ✅ Good: Use element.id -->
+<div id="main-content">...</div>
+
+<!-- ✅ Good: Use data-testid -->
+<button data-testid="submit-form">...</button>
+
+<!-- ⚠️ Okay: Relies on DOM position (changes if DOM structure changes) -->
+<div class="card">...</div>
+```
+
+#### Fallback System
+
+If an element's ID changes (e.g., DOM restructure), the system uses smart fallbacks:
+
+1. **Primary**: Try to find by `inspectorId`
+2. **Fallback 1**: Use CSS selector
+3. **Fallback 2**: Use position matching (if multiple matches)
+
+```typescript
+// Full identifier with fallback support
+highlightElement({
+  inspectorId: "pi-1f2a3b4c", // Primary
+  selector: "button.cta-primary", // Fallback 1
+  position: { top: 500, left: 100 }, // Fallback 2
+});
+```
+
 ### `ComponentInfo`
 
 ```typescript
@@ -556,6 +670,57 @@ Perfect for integrating with error tracking services like Sentry, LogRocket, or
 
 ## Examples
 
+### Element Highlighting from Chat History
+
+```typescript
+const { highlightElement, getElementByInspectorId } = useInspector(iframeRef, {
+  onElementSelected: (data) => {
+    // Store inspectorId in your chat message
+    const message = {
+      text: `Selected ${data.tagName} element`,
+      inspectorId: data.inspectorId,
+      selector: data.selector,
+      position: data.position,
+    };
+    saveToChatHistory(message);
+  },
+  onElementInfoReceived: (data) => {
+    if (data.found) {
+      console.log("Element found:", data.element);
+    } else {
+      console.log("Element not found:", data.error);
+    }
+  },
+});
+
+// Later: Click on a chat message to re-highlight the element
+function handleChatMessageClick(message) {
+  // Highlight with full identifier (with fallback support)
+  highlightElement(
+    {
+      inspectorId: message.inspectorId,
+      selector: message.selector,
+      position: message.position,
+    },
+    {
+      duration: 4000,
+      color: "#10b981",
+      animation: "pulse",
+    }
+  );
+}
+
+// Or simply by ID
+function quickHighlight(inspectorId) {
+  highlightElement(inspectorId);
+}
+
+// Request element info
+function checkElementStatus(inspectorId) {
+  getElementByInspectorId(inspectorId);
+}
+```
+
 ### Dynamic Content Input Based on AI Response
 
 ```typescript

package/dist/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../src/hook.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6GG;AAEH,OAAO,EAAoC,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EACV,kBAAkB,EAClB,eAAe,EACf,cAAc,EACd,kBAAkB,EAOnB,MAAM,SAAS,CAAC;AAsDjB,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,EACvC,SAAS,CAAC,EAAE,kBAAkB,EAC9B,MAAM,CAAC,EAAE,eAAe,EACxB,KAAK,CAAC,EAAE,cAAc,GACrB,kBAAkB,CA4LpB;AAGD,mBAAmB,SAAS,CAAC"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../src/hook.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6GG;AAEH,OAAO,EAAoC,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EACV,kBAAkB,EAClB,eAAe,EACf,cAAc,EACd,kBAAkB,EAUnB,MAAM,SAAS,CAAC;AAmEjB,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,EACvC,SAAS,CAAC,EAAE,kBAAkB,EAC9B,MAAM,CAAC,EAAE,eAAe,EACxB,KAAK,CAAC,EAAE,cAAc,GACrB,kBAAkB,CA6NpB;AAGD,mBAAmB,SAAS,CAAC"}

package/dist/hook.js

@@ -182,6 +182,25 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
             badgeText: labels?.badgeText,
         });
     }, [sendMessage, labels]);
+    /**
+     * Highlight an element in the iframe
+     */
+    const highlightElement = useCallback((identifier, options) => {
+        sendMessage({
+            type: "HIGHLIGHT_ELEMENT",
+            identifier: identifier,
+            options: options,
+        });
+    }, [sendMessage]);
+    /**
+     * Request element info by inspector ID
+     */
+    const getElementByInspectorId = useCallback((inspectorId) => {
+        sendMessage({
+            type: "GET_ELEMENT_BY_ID",
+            inspectorId: inspectorId,
+        });
+    }, [sendMessage]);
     /**
      * Listen for messages from iframe
      */
@@ -227,6 +246,9 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
                 case "INSPECTOR_ERROR":
                     callbacks?.onError?.(messageData.data);
                     break;
+                case "ELEMENT_INFO_RESPONSE":
+                    callbacks?.onElementInfoReceived?.(messageData.data);
+                    break;
                 default:
                     // Unknown message type - ignore
                     break;
@@ -260,5 +282,7 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
         showContentInput,
         showImageInput,
         setBadgeVisible,
+        highlightElement,
+        getElementByInspectorId,
     };
 }

package/dist/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,wBAAgB,eAAe,IAAI,MAAM,CA4vCxC"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,wBAAgB,eAAe,IAAI,MAAM,CA2uDxC"}

package/dist/plugin.js

@@ -54,6 +54,347 @@ export function inspectorPlugin() {
                         },
                         children: `
 (function() {
+  // ElementTracker class - inline implementation
+  class ElementTracker {
+    constructor() {
+      this.ID_ATTRIBUTE = 'data-inspector-id';
+    }
+    
+    ensureElementId(element) {
+      const existingId = element.getAttribute(this.ID_ATTRIBUTE);
+      if (existingId) return existingId;
+      
+      const persistentId = this.generatePersistentId(element);
+      element.setAttribute(this.ID_ATTRIBUTE, persistentId);
+      return persistentId;
+    }
+    
+    generatePersistentId(element) {
+      const hasUniqueId = element.id || element.getAttribute('data-id');
+      
+      const signatureParts = [];
+      
+      signatureParts.push(\`xpath:\${this.getXPath(element)}\`);
+      
+      if (element.id) signatureParts.push(\`id:\${element.id}\`);
+      
+      const dataId = element.getAttribute('data-id');
+      if (dataId) signatureParts.push(\`data-id:\${dataId}\`);
+      
+      const dataTestId = element.getAttribute('data-testid');
+      if (dataTestId) signatureParts.push(\`data-testid:\${dataTestId}\`);
+      
+      const dataComponent = element.getAttribute('data-component');
+      if (dataComponent) signatureParts.push(\`data-component:\${dataComponent}\`);
+      
+      const dataCy = element.getAttribute('data-cy');
+      if (dataCy) signatureParts.push(\`data-cy:\${dataCy}\`);
+      
+      signatureParts.push(\`tag:\${element.tagName.toLowerCase()}\`);
+      
+      const role = element.getAttribute('role');
+      if (role) signatureParts.push(\`role:\${role}\`);
+      
+      const type = element.getAttribute('type');
+      if (type) signatureParts.push(\`type:\${type}\`);
+      
+      const name = element.getAttribute('name');
+      if (name) signatureParts.push(\`name:\${name}\`);
+      
+      const href = element.getAttribute('href');
+      if (href) signatureParts.push(\`href:\${href}\`);
+      
+      const src = element.getAttribute('src');
+      if (src) signatureParts.push(\`src:\${src}\`);
+      
+      if (!hasUniqueId) {
+        signatureParts.push(\`sibling:\${this.getTypedSiblingIndex(element)}\`);
+        const parentTag = element.parentElement?.tagName.toLowerCase();
+        if (parentTag) signatureParts.push(\`parent:\${parentTag}\`);
+      }
+      
+      const signature = signatureParts.join('|');
+      const hash = this.createStableHash(signature);
+      return \`pi-\${hash}\`;
+    }
+    
+    getXPath(element) {
+      if (element.id) {
+        return \`//*[@id="\${element.id}"]\`;
+      }
+      
+      const dataId = element.getAttribute('data-id');
+      if (dataId) {
+        return \`//*[@data-id="\${dataId}"]\`;
+      }
+      
+      const parts = [];
+      let current = element;
+      
+      while (current && current.nodeType === Node.ELEMENT_NODE) {
+        const tagName = current.tagName.toLowerCase();
+        const index = this.getTypedSiblingIndex(current);
+        parts.unshift(\`\${tagName}[\${index}]\`);
+        current = current.parentElement;
+      }
+      
+      return '/' + parts.join('/');
+    }
+    
+    getTypedSiblingIndex(element) {
+      let index = 1;
+      let sibling = element.previousElementSibling;
+      
+      while (sibling) {
+        if (sibling.tagName === element.tagName) {
+          index++;
+        }
+        sibling = sibling.previousElementSibling;
+      }
+      
+      return index;
+    }
+    
+    createStableHash(str) {
+      let hash = 5381;
+      for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = ((hash << 5) + hash) + char;
+        hash = hash | 0;
+      }
+      return (hash >>> 0).toString(36);
+    }
+    
+    findElementById(doc, id) {
+      return doc.querySelector(\`[\${this.ID_ATTRIBUTE}="\${id}"]\`);
+    }
+    
+    findElementWithFallback(doc, identifier) {
+      const byId = this.findElementById(doc, identifier.inspectorId);
+      if (byId) return byId;
+      
+      if (identifier.selector && identifier.position) {
+        return this.findByPositionMatch(doc, identifier.selector, identifier.position);
+      }
+      
+      if (identifier.selector) {
+        return doc.querySelector(identifier.selector);
+      }
+      
+      return null;
+    }
+    
+    findByPositionMatch(doc, selector, expectedPosition) {
+      const elements = Array.from(doc.querySelectorAll(selector));
+      
+      if (elements.length === 0) return null;
+      if (elements.length === 1) return elements[0];
+      
+      return elements.reduce((closest, element) => {
+        const rect = element.getBoundingClientRect();
+        const distance = Math.sqrt(
+          Math.pow(rect.top - expectedPosition.top, 2) +
+          Math.pow(rect.left - expectedPosition.left, 2)
+        );
+        
+        const closestRect = closest.getBoundingClientRect();
+        const closestDistance = Math.sqrt(
+          Math.pow(closestRect.top - expectedPosition.top, 2) +
+          Math.pow(closestRect.left - expectedPosition.left, 2)
+        );
+        
+        return distance < closestDistance ? element : closest;
+      });
+    }
+  }
+  
+  // ElementHighlighter class - inline implementation
+  class ElementHighlighter {
+    constructor() {
+      this.activeOverlay = null;
+      this.scrollListener = null;
+      this.resizeListener = null;
+      this.cleanupTimeout = null;
+    }
+    
+    highlight(element, options = {}) {
+      this.clearHighlight();
+      
+      const duration = options.duration || 3000;
+      const scrollIntoView = options.scrollIntoView !== false;
+      const color = options.color || '#4417db';
+      const animation = options.animation || 'pulse';
+      
+      if (scrollIntoView) {
+        element.scrollIntoView({ 
+          behavior: 'smooth', 
+          block: 'nearest',
+          inline: 'center'
+        });
+      }
+      
+      const rect = element.getBoundingClientRect();
+      const overlay = document.createElement('div');
+      overlay.id = 'inspector-highlight-overlay';
+      
+      overlay.style.cssText = \`
+        position: fixed;
+        top: \${rect.top}px;
+        left: \${rect.left}px;
+        width: \${rect.width}px;
+        height: \${rect.height}px;
+        border: 3px solid \${color};
+        background: \${color}22;
+        border-radius: 8px;
+        pointer-events: none;
+        z-index: 999999;
+        box-shadow: 0 0 20px \${color}66;
+      \`;
+      
+      if (animation === 'pulse') {
+        overlay.style.animation = 'inspectorPulse 0.6s ease-in-out infinite';
+      } else if (animation === 'fade') {
+        overlay.style.animation = 'inspectorFade 0.5s ease-in-out';
+      }
+      
+      this.injectStyles();
+      
+      document.body.appendChild(overlay);
+      this.activeOverlay = overlay;
+      
+      const updatePosition = () => {
+        const newRect = element.getBoundingClientRect();
+        overlay.style.top = \`\${newRect.top}px\`;
+        overlay.style.left = \`\${newRect.left}px\`;
+      };
+      
+      this.scrollListener = updatePosition;
+      this.resizeListener = updatePosition;
+      
+      window.addEventListener('scroll', this.scrollListener, true);
+      window.addEventListener('resize', this.resizeListener);
+      
+      this.cleanupTimeout = setTimeout(() => {
+        this.clearHighlight();
+      }, duration);
+    }
+    
+    clearHighlight() {
+      if (this.activeOverlay) {
+        this.activeOverlay.remove();
+        this.activeOverlay = null;
+      }
+      
+      if (this.scrollListener) {
+        window.removeEventListener('scroll', this.scrollListener, true);
+        this.scrollListener = null;
+      }
+      
+      if (this.resizeListener) {
+        window.removeEventListener('resize', this.resizeListener);
+        this.resizeListener = null;
+      }
+      
+      if (this.cleanupTimeout !== null) {
+        clearTimeout(this.cleanupTimeout);
+        this.cleanupTimeout = null;
+      }
+    }
+    
+    injectStyles() {
+      const styleId = 'inspector-highlight-styles';
+      
+      if (document.getElementById(styleId)) return;
+      
+      const style = document.createElement('style');
+      style.id = styleId;
+      style.textContent = \`
+        @keyframes inspectorPulse {
+          0%, 100% { opacity: 0.7; transform: scale(1); }
+          50% { opacity: 1; transform: scale(1.005); }
+        }
+        
+        @keyframes inspectorFade {
+          0% { opacity: 0; transform: scale(0.98); }
+          100% { opacity: 0.7; transform: scale(1); }
+        }
+      \`;
+      
+      document.head.appendChild(style);
+    }
+  }
+  
+  // Initialize tracker and highlighter
+  const elementTracker = new ElementTracker();
+  const elementHighlighter = new ElementHighlighter();
+  
+  // Assign IDs to all elements on page load
+  function assignIdsToAllElements() {
+    // Wait for DOM to be ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => {
+        assignIdsToAllElements();
+      });
+      return;
+    }
+    
+    // Get all elements in the document
+    const allElements = document.querySelectorAll('body *');
+    allElements.forEach(element => {
+      // Skip inspector's own elements
+      if (element.hasAttribute('data-inspector-ignore') || 
+          element.closest('[data-inspector-ignore]')) {
+        return;
+      }
+      elementTracker.ensureElementId(element);
+    });
+    console.log(\`🆔 Inspector: Assigned IDs to \${allElements.length} elements\`);
+  }
+  
+  // Watch for dynamically added elements
+  function observeNewElements() {
+    if (!document.body) return;
+    
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach(mutation => {
+        mutation.addedNodes.forEach(node => {
+          // Only process element nodes
+          if (node.nodeType === 1) {
+            const element = node;
+            
+            // Skip inspector's own elements
+            if (element.hasAttribute('data-inspector-ignore') || 
+                element.closest('[data-inspector-ignore]')) {
+              return;
+            }
+            
+            // Assign ID to the new element
+            elementTracker.ensureElementId(element);
+            
+            // Also assign IDs to all children
+            const children = element.querySelectorAll('*');
+            children.forEach(child => {
+              if (!child.hasAttribute('data-inspector-ignore') && 
+                  !child.closest('[data-inspector-ignore]')) {
+                elementTracker.ensureElementId(child);
+              }
+            });
+          }
+        });
+      });
+    });
+    
+    // Start observing
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+  
+  // Initialize on page load
+  assignIdsToAllElements();
+  observeNewElements();
+  
   let inspectMode = false;
   let isPaused = false;
   let hoveredElement = null;
@@ -137,53 +478,13 @@ export function inspectorPlugin() {
     controlBox.setAttribute('data-is-image-element', isImageElement);
     controlBox.setAttribute('data-current-image-url', currentImageUrl);
     
-    // Calculate position with viewport bounds
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    const padding = 10; // Minimum padding from viewport edges
-    
-    // Calculate box width (responsive, between 320 and 600px, but never wider than viewport)
-    const maxWidth = Math.min(600, viewportWidth - (padding * 2));
-    const minWidth = Math.min(320, maxWidth);
-    const boxWidth = Math.max(minWidth, Math.min(rect.width, maxWidth));
-    
-    // Calculate horizontal position (centered on element, but within viewport)
-    let centerLeft = rect.left + (rect.width / 2) - (boxWidth / 2);
-    // Ensure box doesn't overflow left or right
-    centerLeft = Math.max(padding, Math.min(centerLeft, viewportWidth - boxWidth - padding));
-    
-    // Calculate vertical position
-    const spaceBelow = viewportHeight - rect.bottom;
-    const spaceAbove = rect.top;
-    
-    // Estimate box height (only prompt input now, smaller)
-    const estimatedBoxHeight = 100;
-    
-    // Calculate available space and max height
-    const maxBoxHeight = Math.min(400, viewportHeight - (padding * 4)); // Max 400px or viewport - padding
-    
-    // Determine if box should be above or below element
-    let topPosition;
-    if (spaceBelow < estimatedBoxHeight + padding && spaceAbove > spaceBelow) {
-      // Show above element
-      topPosition = Math.max(padding, rect.top - maxBoxHeight - 10);
-      controlBox.setAttribute('data-position', 'above');
-    } else {
-      // Show below element
-      topPosition = rect.bottom + 10;
-      // Ensure box fits in viewport
-      if (topPosition + maxBoxHeight > viewportHeight - padding) {
-        topPosition = Math.max(padding, viewportHeight - maxBoxHeight - padding);
-      }
-      controlBox.setAttribute('data-position', 'below');
-    }
-    
+    // Initial CSS (position will be calculated after render)
     controlBox.style.cssText = \`
       position: fixed;
-      top: \${topPosition}px;
-      left: \${centerLeft}px;
-      width: \${boxWidth}px;
-      max-height: \${maxBoxHeight}px;
+      top: 0px;
+      left: 0px;
+      width: 320px;
+      max-height: 400px;
       background: \${theme.backgroundColor};
       border: 1px solid #e5e7eb;
       border-radius: 14px;
@@ -196,6 +497,8 @@ export function inspectorPlugin() {
       flex-direction: column;
       gap: 0;
       overflow-y: auto;
+      opacity: 0;
+      pointer-events: none;
     \`;
     
     // Only prompt input and buttons (always shown)
@@ -281,8 +584,13 @@ export function inspectorPlugin() {
       unpauseInspection();
     });
     
-    // Focus prompt input
-    setTimeout(() => promptInput.focus(), 100);
+    // Calculate and set proper position after DOM render
+    setTimeout(() => {
+      adjustControlBoxPosition();
+      controlBox.style.opacity = '1';
+      controlBox.style.pointerEvents = 'auto';
+      promptInput.focus();
+    }, 10);
   }
   
   // Show or hide content input section
@@ -388,23 +696,23 @@ export function inspectorPlugin() {
       // Prevent input events from bubbling
       textInput.addEventListener('click', (e) => e.stopPropagation());
       
-      // Focus text input
-      setTimeout(() => textInput.focus(), 100);
-      
-      // Adjust box height
-      adjustControlBoxPosition();
+      // Adjust box height and focus text input after DOM update
+      setTimeout(() => {
+        adjustControlBoxPosition();
+        textInput.focus();
+      }, 10);
     } else if (!show && contentSection) {
       // Remove content input section
       contentSection.remove();
       
-      // Refocus prompt input
-      const promptInput = controlBox.querySelector('#inspector-prompt-input');
-      if (promptInput) {
-        setTimeout(() => promptInput.focus(), 100);
-      }
-      
-      // Adjust box height
-      adjustControlBoxPosition();
+      // Adjust box height and refocus prompt input after DOM update
+      setTimeout(() => {
+        adjustControlBoxPosition();
+        const promptInput = controlBox.querySelector('#inspector-prompt-input');
+        if (promptInput) {
+          promptInput.focus();
+        }
+      }, 10);
     }
   }
   
@@ -615,20 +923,22 @@ export function inspectorPlugin() {
         toggleInspectMode(false);
       });
       
-      // Adjust box height
-      adjustControlBoxPosition();
+      // Adjust box height after DOM update
+      setTimeout(() => {
+        adjustControlBoxPosition();
+      }, 10);
     } else if (!show && imageSection) {
       // Remove image input section
       imageSection.remove();
       
-      // Refocus prompt input
-      const promptInput = controlBox.querySelector('#inspector-prompt-input');
-      if (promptInput) {
-        setTimeout(() => promptInput.focus(), 100);
-      }
-      
-      // Adjust box height
-      adjustControlBoxPosition();
+      // Adjust box height and refocus prompt input after DOM update
+      setTimeout(() => {
+        adjustControlBoxPosition();
+        const promptInput = controlBox.querySelector('#inspector-prompt-input');
+        if (promptInput) {
+          promptInput.focus();
+        }
+      }, 10);
     }
   }
   
@@ -654,22 +964,30 @@ export function inspectorPlugin() {
     const spaceBelow = viewportHeight - rect.bottom;
     const spaceAbove = rect.top;
     
-    // Get actual box height and apply max height
+    // Get actual box height and calculate max height
     const boxHeight = controlBox.offsetHeight;
     const maxBoxHeight = Math.min(400, viewportHeight - (padding * 4));
     
+    // Use the smaller of actual height or max height
+    const effectiveHeight = Math.min(boxHeight, maxBoxHeight);
+    
     // Determine position with viewport bounds
     let topPosition;
-    if (spaceBelow < boxHeight + padding && spaceAbove > spaceBelow) {
-      // Show above element
-      topPosition = Math.max(padding, rect.top - maxBoxHeight - 10);
+    if (spaceBelow < effectiveHeight + padding && spaceAbove > spaceBelow) {
+      // Show above element - use actual box height, not max
+      topPosition = rect.top - effectiveHeight - 10;
+      // Ensure it doesn't go above viewport
+      if (topPosition < padding) {
+        topPosition = padding;
+      }
       controlBox.setAttribute('data-position', 'above');
     } else {
       // Show below element
       topPosition = rect.bottom + 10;
       // Ensure box fits in viewport
-      if (topPosition + maxBoxHeight > viewportHeight - padding) {
-        topPosition = Math.max(padding, viewportHeight - maxBoxHeight - padding);
+      if (topPosition + effectiveHeight > viewportHeight - padding) {
+        // If it doesn't fit below, try to fit it as much as possible
+        topPosition = Math.max(padding, viewportHeight - effectiveHeight - padding);
       }
       controlBox.setAttribute('data-position', 'below');
     }
@@ -728,6 +1046,24 @@ export function inspectorPlugin() {
     }
   }
 
+  // Generate CSS selector for an element
+  function generateSelector(element) {
+    if (element.id) {
+      return '#' + element.id;
+    }
+    
+    let selector = element.tagName.toLowerCase();
+    
+    if (element.className && typeof element.className === 'string') {
+      const classes = element.className.trim().split(/\\s+/).filter(c => c);
+      if (classes.length > 0) {
+        selector += '.' + classes.join('.');
+      }
+    }
+    
+    return selector;
+  }
+  
   // Get React Fiber node from DOM element
   function getReactFiber(element) {
     const key = Object.keys(element).find(k => 
@@ -865,6 +1201,11 @@ export function inspectorPlugin() {
     e.stopPropagation();
     
     const element = e.target;
+    
+    // Assign unique inspector ID
+    const inspectorId = elementTracker.ensureElementId(element);
+    const selector = generateSelector(element);
+    
     const fiber = getReactFiber(element);
     const componentInfo = fiber ? getComponentInfo(fiber) : null;
     
@@ -890,7 +1231,10 @@ export function inspectorPlugin() {
       isTextNode: isTextNode,
       textContent: textContent,
       isImageNode: isImageNode,
-      imageUrl: imageUrl
+      imageUrl: imageUrl,
+      inspectorId: inspectorId,
+      selector: selector,
+      currentRoute: window.location.pathname
     };
     
     // Send info to parent window
@@ -969,6 +1313,95 @@ export function inspectorPlugin() {
         labels.badgeText = event.data.badgeText;
       }
       setBadgeVisible(event.data.visible);
+    } else if (event.data.type === 'HIGHLIGHT_ELEMENT') {
+      // Handle highlight element request
+      const identifier = event.data.identifier;
+      const options = event.data.options || {};
+      
+      // Handle route navigation if needed
+      (async () => {
+        if (options.targetRoute && window.location.pathname !== options.targetRoute) {
+          window.history.pushState(null, '', options.targetRoute);
+          // Wait for route change to process
+          await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        
+        let element = null;
+        
+        if (typeof identifier === 'string') {
+          // Try as inspector ID first
+          element = elementTracker.findElementById(document, identifier);
+          
+          // Fallback to selector
+          if (!element) {
+            element = document.querySelector(identifier);
+          }
+        } else {
+          // Full identifier object with fallback
+          element = elementTracker.findElementWithFallback(document, identifier);
+        }
+        
+        if (element) {
+          elementHighlighter.highlight(element, options);
+        } else {
+          console.warn('[Inspector] Element not found for highlighting:', identifier);
+        }
+      })();
+    } else if (event.data.type === 'GET_ELEMENT_BY_ID') {
+      // Handle get element by ID request
+      const inspectorId = event.data.inspectorId;
+      const element = elementTracker.findElementById(document, inspectorId);
+      
+      if (element) {
+        const fiber = getReactFiber(element);
+        const componentInfo = fiber ? getComponentInfo(fiber) : null;
+        const isTextNode = element.textContent && element.children.length === 0;
+        const textContent = isTextNode ? element.textContent.trim() : '';
+        const isImageNode = element.tagName === 'IMG';
+        const imageUrl = isImageNode ? element.src : '';
+        const selector = generateSelector(element);
+        
+        const elementData = {
+          tagName: element.tagName,
+          className: element.className,
+          id: element.id,
+          component: componentInfo,
+          position: {
+            top: element.getBoundingClientRect().top,
+            left: element.getBoundingClientRect().left,
+            width: element.getBoundingClientRect().width,
+            height: element.getBoundingClientRect().height
+          },
+          isTextNode: isTextNode,
+          textContent: textContent,
+          isImageNode: isImageNode,
+          imageUrl: imageUrl,
+          inspectorId: inspectorId,
+          selector: selector
+        };
+        
+        if (window.parent !== window) {
+          const message = JSON.stringify({
+            type: 'ELEMENT_INFO_RESPONSE',
+            data: {
+              found: true,
+              element: elementData
+            }
+          });
+          window.parent.postMessage(message, '*');
+        }
+      } else {
+        if (window.parent !== window) {
+          const message = JSON.stringify({
+            type: 'ELEMENT_INFO_RESPONSE',
+            data: {
+              found: false,
+              error: 'Element not found'
+            }
+          });
+          window.parent.postMessage(message, '*');
+        }
+      }
     }
   });
 
@@ -1245,52 +1678,76 @@ export function inspectorPlugin() {
     console.log('🏷️ Badge auto-enabled for preview.promake.ai');
   }
 
-  // 🖼️ Auto cache-bust all images on page load
+  // 🖼️ Auto cache-bust all images on page load and for dynamically added images
   // This ensures images are always fresh when page is refreshed/reloaded
-  function cacheBustAllImages() {
-    const timestamp = Date.now();
-    let imageCount = 0;
+  const cacheBustTimestamp = Date.now();
+  
+  function cacheBustImage(img) {
+    if (img.src && !img.src.startsWith('data:') && !img.hasAttribute('data-cache-busted')) {
+      try {
+        const url = new URL(img.src);
+        // Remove old cache busting params
+        url.searchParams.delete('_t');
+        url.searchParams.delete('_cache_bust');
+        url.searchParams.delete('v');
+        // Add new timestamp
+        url.searchParams.set('_t', cacheBustTimestamp.toString());
+        
+        const newSrc = url.toString();
+        
+        // Force reload by clearing and resetting src
+        img.removeAttribute('src');
+        // Use setTimeout to ensure the browser registers the change
+        setTimeout(() => {
+          img.src = newSrc;
+        }, 0);
+        
+        img.setAttribute('data-cache-busted', 'true');
+        return true;
+      } catch (e) {
+        // Ignore invalid URLs
+      }
+    }
+    return false;
+  }
+  
+  function cacheBustBackgroundImage(el) {
+    if (el.hasAttribute('data-cache-busted')) return false;
     
-    // Cache-bust all <img> tags
-    const images = document.querySelectorAll('img');
-    images.forEach((img) => {
-      if (img.src && !img.src.startsWith('data:')) {
+    const bgImage = window.getComputedStyle(el).backgroundImage;
+    if (bgImage && bgImage !== 'none' && bgImage.includes('url(')) {
+      const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
+      if (urlMatch && urlMatch[1] && !urlMatch[1].startsWith('data:')) {
         try {
-          const url = new URL(img.src);
-          // Remove old cache busting params
+          const url = new URL(urlMatch[1], window.location.origin);
           url.searchParams.delete('_t');
           url.searchParams.delete('_cache_bust');
           url.searchParams.delete('v');
-          // Add new timestamp
-          url.searchParams.set('_t', timestamp.toString());
-          img.src = url.toString();
-          imageCount++;
+          url.searchParams.set('_t', cacheBustTimestamp.toString());
+          el.style.backgroundImage = 'url("' + url.toString() + '")';
+          el.setAttribute('data-cache-busted', 'true');
+          return true;
         } catch (e) {
           // Ignore invalid URLs
         }
       }
+    }
+    return false;
+  }
+  
+  function cacheBustAllImages() {
+    let imageCount = 0;
+    
+    // Cache-bust all <img> tags
+    const images = document.querySelectorAll('img');
+    images.forEach((img) => {
+      if (cacheBustImage(img)) imageCount++;
     });
     
     // Cache-bust background images
     const allElements = document.querySelectorAll('*');
     allElements.forEach((el) => {
-      const bgImage = window.getComputedStyle(el).backgroundImage;
-      if (bgImage && bgImage !== 'none' && bgImage.includes('url(')) {
-        const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
-        if (urlMatch && urlMatch[1] && !urlMatch[1].startsWith('data:')) {
-          try {
-            const url = new URL(urlMatch[1], window.location.origin);
-            url.searchParams.delete('_t');
-            url.searchParams.delete('_cache_bust');
-            url.searchParams.delete('v');
-            url.searchParams.set('_t', timestamp.toString());
-            el.style.backgroundImage = 'url("' + url.toString() + '")';
-            imageCount++;
-          } catch (e) {
-            // Ignore invalid URLs
-          }
-        }
-      }
+      if (cacheBustBackgroundImage(el)) imageCount++;
     });
     
     if (imageCount > 0) {
@@ -1298,12 +1755,50 @@ export function inspectorPlugin() {
     }
   }
   
+  // Watch for dynamically added images
+  function observeNewImages() {
+    if (!document.body) return;
+    
+    const imageObserver = new MutationObserver((mutations) => {
+      mutations.forEach(mutation => {
+        mutation.addedNodes.forEach(node => {
+          if (node.nodeType === 1) {
+            const element = node;
+            
+            // If it's an img element, cache-bust it
+            if (element.tagName === 'IMG') {
+              cacheBustImage(element);
+            }
+            
+            // Check for img children
+            const imgChildren = element.querySelectorAll('img');
+            imgChildren.forEach(img => cacheBustImage(img));
+            
+            // Check for background images
+            if (cacheBustBackgroundImage(element)) {
+              // Successfully cache-busted
+            }
+          }
+        });
+      });
+    });
+    
+    imageObserver.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+  
   // Run cache-bust after DOM is fully loaded
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', cacheBustAllImages);
+    document.addEventListener('DOMContentLoaded', () => {
+      cacheBustAllImages();
+      observeNewImages();
+    });
   } else {
     // DOM already loaded, run immediately
     cacheBustAllImages();
+    observeNewImages();
   }
 
   console.log('🔍 Inspector plugin loaded');

package/dist/types.d.ts

@@ -26,6 +26,9 @@ export interface SelectedElementData {
     textContent?: string;
     isImageNode?: boolean;
     imageUrl?: string;
+    inspectorId?: string;
+    selector?: string;
+    currentRoute?: string;
 }
 export interface UrlChangeData {
     url: string;
@@ -61,6 +64,31 @@ export interface ErrorData {
     columnNumber?: number;
     timestamp: number;
 }
+export interface ElementIdentifier {
+    inspectorId: string;
+    selector: string;
+    position?: {
+        top: number;
+        left: number;
+    };
+    component?: {
+        name: string;
+        fileName: string;
+        lineNumber?: number;
+    };
+}
+export interface HighlightOptions {
+    duration?: number;
+    scrollIntoView?: boolean;
+    color?: string;
+    animation?: 'pulse' | 'fade' | 'none';
+    targetRoute?: string;
+}
+export interface ElementInfoData {
+    found: boolean;
+    element?: SelectedElementData;
+    error?: string;
+}
 export interface InspectorLabels {
     editText?: string;
     textPlaceholder?: string;
@@ -95,6 +123,7 @@ export interface InspectorCallbacks {
     onImageUpdated?: (data: ImageUpdatedData) => void;
     onInspectorClosed?: () => void;
     onError?: (data: ErrorData) => void;
+    onElementInfoReceived?: (data: ElementInfoData) => void;
 }
 export interface UseInspectorReturn {
     isInspecting: boolean;
@@ -104,5 +133,7 @@ export interface UseInspectorReturn {
     showContentInput: (show: boolean, updateImmediately?: boolean) => void;
     showImageInput: (show: boolean, updateImmediately?: boolean) => void;
     setBadgeVisible: (visible: boolean) => void;
+    highlightElement: (identifier: string | ElementIdentifier, options?: HighlightOptions) => void;
+    getElementByInspectorId: (inspectorId: string) => void;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promakeai/inspector",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Visual element inspector for React apps in iframe with AI prompt support",
   "author": "Promake",
   "type": "module",
@@ -33,6 +33,14 @@
   "scripts": {
     "build": "tsc && tsc -p tsconfig.plugin.json",
     "dev": "concurrently -n \"HOOK,PLUGIN\" -c \"blue,magenta\" \"tsc --watch\" \"tsc -p tsconfig.plugin.json --watch\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "cd test && npm test",
+    "test:e2e:ui": "cd test && npm run test:ui",
+    "test:e2e:headed": "cd test && npm run test:headed",
+    "test:all": "npm test && npm run test:e2e",
     "prepublishOnly": "npm run build",
     "release": "npm run build && npm publish --access public"
   },
@@ -48,13 +56,21 @@
     "prompt"
   ],
   "peerDependencies": {
-    "react": ">18.0.0",
-    "vite": ">5.0.0"
+    "vite": ">=5.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@types/react": "^18.2.0",
+    "@vitest/coverage-v8": "^4.0.8",
+    "@vitest/ui": "^4.0.8",
     "concurrently": "^9.1.0",
+    "happy-dom": "^20.0.10",
+    "jsdom": "^27.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "typescript": "^5.3.0",
-    "vite": "^5.4.0"
+    "vite": "^5.4.0",
+    "vitest": "^4.0.8"
   }
 }