sonance-brand-mcp 1.3.93 → 1.3.95

package/dist/assets/dev-tools/components/ChatInterface.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import React, { useState, useEffect, useCallback, useRef } from "react";
-import { Loader2, Send, Sparkles, Eye, AlertCircle, X } from "lucide-react";
+import { Loader2, Send, Sparkles, Eye, AlertCircle, X, Crop } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { ChatMessage, AIEditResult, PendingEdit, VisionFocusedElement, VisionPendingEdit, ApplyFirstSession } from "../types";
 import html2canvas from "html2canvas-pro";
+import { ScreenshotAnnotator, Rectangle } from "./ScreenshotAnnotator";
 
 // Helper to detect location failure in explanation
 function isLocationFailure(explanation: string | undefined): boolean {
@@ -108,6 +109,13 @@ export function ChatInterface({
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   
+  // Screenshot annotation state
+  const [isAnnotating, setIsAnnotating] = useState(false);
+  const [annotatedScreenshot, setAnnotatedScreenshot] = useState<string | null>(null);
+  const [manualFocusBounds, setManualFocusBounds] = useState<Rectangle | null>(null);
+  // Discovered elements from annotation tool (for targeting when no element was clicked)
+  const [annotationDiscoveredElements, setAnnotationDiscoveredElements] = useState<VisionFocusedElement[]>([]);
+  
   // Auto-dismiss toast after 5 seconds
   useEffect(() => {
     if (toastMessage) {
@@ -164,14 +172,61 @@ export function ChatInterface({
     }
   }, []);
 
+  // Start screenshot annotation - show drawing overlay on live app
+  const startAnnotation = useCallback(() => {
+    console.log("[Vision Mode] Starting screenshot annotation overlay...");
+    setIsAnnotating(true);
+  }, []);
+
+  // Handle annotation confirmation - screenshot is already captured and annotated
+  // Now also receives discovered elements from within the drawn rectangle
+  const handleAnnotationConfirm = useCallback((annotated: string, bounds: Rectangle, discoveredElements: VisionFocusedElement[]) => {
+    console.log("[Vision Mode] Annotation confirmed:", { 
+      bounds, 
+      discoveredElementsCount: discoveredElements.length,
+      discoveredElements: discoveredElements.map(e => ({
+        name: e.name,
+        text: e.textContent?.substring(0, 30),
+        id: e.elementId,
+      })),
+    });
+    setAnnotatedScreenshot(annotated);
+    setManualFocusBounds(bounds);
+    setAnnotationDiscoveredElements(discoveredElements);
+    setIsAnnotating(false);
+    // Focus the input so user can type their prompt
+    setTimeout(() => inputRef.current?.focus(), 100);
+  }, []);
+
+  // Handle annotation cancel
+  const handleAnnotationCancel = useCallback(() => {
+    setIsAnnotating(false);
+  }, []);
+
+  // Clear the current annotation and discovered elements
+  const clearAnnotation = useCallback(() => {
+    setAnnotatedScreenshot(null);
+    setManualFocusBounds(null);
+    setAnnotationDiscoveredElements([]);
+  }, []);
+
   // Handle vision mode edit request
   const handleVisionEdit = async (prompt: string) => {
     // Use Apply-First mode if callback is provided (new Cursor-style workflow)
     const useApplyFirst = !!onApplyFirstComplete;
 
+    // Determine which focused elements to use:
+    // - If user clicked an element, use visionFocusedElements (passed from parent)
+    // - If user used annotation tool without clicking, use annotationDiscoveredElements
+    const effectiveFocusedElements = visionFocusedElements.length > 0 
+      ? visionFocusedElements 
+      : annotationDiscoveredElements;
+
     console.log("[Vision Mode] Starting edit request:", {
       prompt,
-      focusedElements: visionFocusedElements.length,
+      focusedElementsFromClick: visionFocusedElements.length,
+      focusedElementsFromAnnotation: annotationDiscoveredElements.length,
+      effectiveFocusedElements: effectiveFocusedElements.length,
       mode: useApplyFirst ? "apply-first" : "preview-first"
     });
 
@@ -188,28 +243,49 @@ export function ChatInterface({
     setIsProcessing(true);
 
     try {
-      // Capture screenshot
-      console.log("[Vision Mode] Capturing screenshot...");
-      const rawScreenshot = await captureScreenshot();
-      console.log("[Vision Mode] Screenshot captured:", rawScreenshot ? `${rawScreenshot.length} bytes` : "null");
-
-      // Annotate screenshot with section highlight if parent section exists
-      // This helps the LLM visually identify the target area for modifications
-      let screenshot = rawScreenshot;
-      if (rawScreenshot && visionFocusedElements.length > 0) {
-        const parentSection = visionFocusedElements[0].parentSection;
-        if (parentSection?.coordinates) {
-          screenshot = await drawSectionHighlight(rawScreenshot, parentSection.coordinates);
-          console.log("[Vision Mode] Added section highlight to screenshot:", {
-            sectionType: parentSection.type,
-            sectionText: parentSection.sectionText?.substring(0, 30),
-          });
+      let screenshot: string | null;
+
+      // PRIORITY 1: Use manually annotated screenshot if available
+      // This is when user drew a focus area using the annotation tool
+      if (annotatedScreenshot) {
+        console.log("[Vision Mode] Using manually annotated screenshot with discovered elements:", {
+          discoveredCount: annotationDiscoveredElements.length,
+          elements: annotationDiscoveredElements.slice(0, 3).map(e => ({
+            name: e.name,
+            text: e.textContent?.substring(0, 20),
+            id: e.elementId,
+          })),
+        });
+        screenshot = annotatedScreenshot;
+        // Clear the annotation after use (but keep discovered elements for the API call)
+        setAnnotatedScreenshot(null);
+        setManualFocusBounds(null);
+      } else {
+        // PRIORITY 2: Capture fresh screenshot and auto-annotate with section highlight
+        console.log("[Vision Mode] Capturing screenshot...");
+        const rawScreenshot = await captureScreenshot();
+        console.log("[Vision Mode] Screenshot captured:", rawScreenshot ? `${rawScreenshot.length} bytes` : "null");
+
+        // Annotate screenshot with section highlight if parent section exists
+        // This helps the LLM visually identify the target area for modifications
+        screenshot = rawScreenshot;
+        if (rawScreenshot && effectiveFocusedElements.length > 0) {
+          const parentSection = effectiveFocusedElements[0].parentSection;
+          if (parentSection?.coordinates) {
+            screenshot = await drawSectionHighlight(rawScreenshot, parentSection.coordinates);
+            console.log("[Vision Mode] Added section highlight to screenshot:", {
+              sectionType: parentSection.type,
+              sectionText: parentSection.sectionText?.substring(0, 30),
+            });
+          }
         }
       }
 
       // Choose API endpoint based on mode
       const endpoint = useApplyFirst ? "/api/sonance-vision-apply" : "/api/sonance-vision-edit";
-      console.log("[Vision Mode] Sending to API:", endpoint);
+      console.log("[Vision Mode] Sending to API:", endpoint, {
+        effectiveFocusedElements: effectiveFocusedElements.length,
+      });
 
       const response = await fetch(endpoint, {
         method: "POST",
@@ -220,9 +296,13 @@ export function ChatInterface({
           screenshot,
           pageRoute: window.location.pathname,
           userPrompt: prompt,
-          focusedElements: visionFocusedElements,
+          // Use effective focused elements (from click OR from annotation discovery)
+          focusedElements: effectiveFocusedElements,
         }),
       });
+      
+      // Clear annotation discovered elements after API call
+      setAnnotationDiscoveredElements([]);
 
       const data = await response.json();
       console.log("[Vision Mode] API response:", {
@@ -595,6 +675,26 @@ export function ChatInterface({
             "disabled:opacity-50 disabled:bg-gray-50"
           )}
         />
+        
+        {/* Annotate screenshot button - only in vision mode */}
+        {visionMode && (
+          <button
+            onClick={startAnnotation}
+            onPointerDown={(e) => e.stopPropagation()}
+            disabled={isProcessing}
+            title="Draw on screenshot to focus AI attention"
+            className={cn(
+              "px-3 py-2 rounded transition-colors",
+              annotatedScreenshot
+                ? "bg-[#00D3C8] text-[#1a1a1a]" // Teal when annotation is active
+                : "bg-gray-100 text-gray-600 hover:bg-gray-200",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            )}
+          >
+            <Crop className="h-4 w-4" />
+          </button>
+        )}
+        
         <button
           onClick={() => handleSend(input || inputRef.current?.value || "")}
           onPointerDown={(e) => e.stopPropagation()}
@@ -614,6 +714,23 @@ export function ChatInterface({
           )}
         </button>
       </div>
+      
+      {/* Annotation indicator */}
+      {annotatedScreenshot && visionMode && (
+        <div className="flex items-center justify-between text-xs text-[#00D3C8] bg-[#00D3C8]/10 px-2 py-1 rounded">
+          <span className="flex items-center gap-1">
+            <Crop className="h-3 w-3" />
+            Focus area selected - your prompt will target this region
+          </span>
+          <button
+            onClick={clearAnnotation}
+            className="text-[#00D3C8] hover:text-[#00b3a8] p-0.5"
+            title="Clear annotation"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </div>
+      )}
 
       {/* Processing Indicator */}
       {isProcessing && (
@@ -629,6 +746,14 @@ export function ChatInterface({
           </span>
         </div>
       )}
+
+      {/* Screenshot Annotator Overlay - draws on live app */}
+      {isAnnotating && (
+        <ScreenshotAnnotator
+          onConfirm={handleAnnotationConfirm}
+          onCancel={handleAnnotationCancel}
+        />
+      )}
     </div>
   );
 }

package/dist/assets/dev-tools/components/InspectorOverlay.tsx

@@ -88,11 +88,14 @@ export function InspectorOverlay({
       const clickX = e.clientX;
       const clickY = e.clientY;
 
-      // Don't capture clicks on the DevTools panel or its portal container
-      const devToolsPanel = document.querySelector('[data-sonance-devtools="true"]');
+      // Don't capture clicks on ANY DevTools element (panel, annotation overlay, etc.)
+      // Check if the click target or any of its ancestors have data-sonance-devtools
+      const target = e.target as HTMLElement;
+      if (target.closest('[data-sonance-devtools="true"]')) return;
+      if (target.closest('[data-annotator-overlay="true"]')) return;
+      
       const devToolsRoot = document.getElementById('sonance-devtools-root');
-      if (devToolsPanel?.contains(e.target as Node)) return;
-      if (devToolsRoot?.contains(e.target as Node)) return;
+      if (devToolsRoot?.contains(target)) return;
 
       // Find ALL elements that contain the click point
       const matchingElements = elements.filter(el =>

package/dist/assets/dev-tools/components/ScreenshotAnnotator.tsx

@@ -0,0 +1,516 @@
+"use client";
+
+import React, { useEffect, useState, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { Check, X, RotateCcw, Crop } from "lucide-react";
+import html2canvas from "html2canvas-pro";
+import { VisionFocusedElement } from "../types";
+
+export interface Rectangle {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** Discovered element info for scoring and ranking */
+interface DiscoveredElement {
+  element: Element;
+  score: number;
+  textContent: string;
+  className: string;
+  elementId: string;
+  tagName: string;
+  rect: DOMRect;
+}
+
+/**
+ * Discover DOM elements within the given rectangle bounds.
+ * Uses a grid sampling approach to find all elements in the area,
+ * then scores and ranks them for targeting accuracy.
+ */
+function discoverElementsInBounds(rect: Rectangle): VisionFocusedElement[] {
+  const discoveredMap = new Map<Element, DiscoveredElement>();
+  
+  // Tags to skip - generic containers and non-content elements
+  const skipTags = new Set(['html', 'body', 'head', 'script', 'style', 'meta', 'link', 'noscript']);
+  
+  // Semantic elements get bonus points
+  const semanticElements = new Set(['section', 'article', 'form', 'header', 'footer', 'main', 'nav', 'aside', 'dialog']);
+  
+  // Sample points in a grid pattern within the rectangle
+  const gridSize = 5; // 5x5 grid = 25 sample points
+  const stepX = rect.width / (gridSize + 1);
+  const stepY = rect.height / (gridSize + 1);
+  
+  for (let i = 1; i <= gridSize; i++) {
+    for (let j = 1; j <= gridSize; j++) {
+      const x = rect.x + stepX * i;
+      const y = rect.y + stepY * j;
+      
+      // Get all elements at this point (from top to bottom)
+      const elementsAtPoint = document.elementsFromPoint(x, y);
+      
+      for (const el of elementsAtPoint) {
+        // Skip if already processed
+        if (discoveredMap.has(el)) continue;
+        
+        // Skip DevTools elements
+        if (el.hasAttribute('data-sonance-devtools') || 
+            el.hasAttribute('data-annotator-overlay') ||
+            el.hasAttribute('data-annotator-toolbar') ||
+            el.hasAttribute('data-vision-mode-border')) {
+          continue;
+        }
+        
+        const tagName = el.tagName.toLowerCase();
+        
+        // Skip generic/non-content elements
+        if (skipTags.has(tagName)) continue;
+        
+        // Get element info
+        const elRect = el.getBoundingClientRect();
+        const id = el.id || '';
+        const className = el.className && typeof el.className === 'string' ? el.className : '';
+        
+        // Extract meaningful text content (not from children with their own text)
+        let textContent = '';
+        for (const node of el.childNodes) {
+          if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent?.trim();
+            if (text) textContent += text + ' ';
+          }
+        }
+        textContent = textContent.trim().substring(0, 100);
+        
+        // If no direct text, try to get visible text from element
+        if (!textContent && el instanceof HTMLElement) {
+          // For inputs, use placeholder or value
+          if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+            textContent = el.placeholder || el.value || '';
+          } else if (el instanceof HTMLButtonElement || tagName === 'a') {
+            textContent = el.textContent?.trim().substring(0, 100) || '';
+          }
+        }
+        
+        // Calculate score for ranking
+        let score = 0;
+        
+        // ID is most valuable for targeting
+        if (id) score += 100;
+        
+        // Text content helps identify the element
+        if (textContent) score += 50;
+        
+        // Semantic elements are better targets
+        if (semanticElements.has(tagName)) score += 30;
+        
+        // Interactive elements are often targets
+        if (['button', 'a', 'input', 'select', 'textarea'].includes(tagName)) score += 25;
+        
+        // Component-like classNames (PascalCase patterns, not Tailwind utilities)
+        if (className) {
+          const classes = className.split(/\s+/);
+          const hasComponentClass = classes.some(c => 
+            /^[A-Z][a-zA-Z0-9]+/.test(c) || // PascalCase
+            /^[a-z]+-[a-z]+-/.test(c) // kebab-case with multiple segments (likely BEM)
+          );
+          if (hasComponentClass) score += 20;
+        }
+        
+        // Heading elements are important
+        if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) score += 20;
+        
+        // Penalize very large elements (probably containers)
+        if (elRect.width > window.innerWidth * 0.8 && elRect.height > window.innerHeight * 0.8) {
+          score -= 30;
+        }
+        
+        discoveredMap.set(el, {
+          element: el,
+          score,
+          textContent,
+          className,
+          elementId: id,
+          tagName,
+          rect: elRect,
+        });
+      }
+    }
+  }
+  
+  // Convert to array, sort by score descending, take top 10
+  const sorted = Array.from(discoveredMap.values())
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 10);
+  
+  // Convert to VisionFocusedElement format
+  return sorted.map((item): VisionFocusedElement => ({
+    name: item.elementId || item.tagName,
+    type: 'component', // Generic type since we're discovering
+    coordinates: {
+      x: item.rect.left + window.scrollX,
+      y: item.rect.top + window.scrollY,
+      width: item.rect.width,
+      height: item.rect.height,
+    },
+    textContent: item.textContent || undefined,
+    className: item.className || undefined,
+    elementId: item.elementId || undefined,
+    description: `${item.tagName}${item.elementId ? '#' + item.elementId : ''}${item.textContent ? ': "' + item.textContent.substring(0, 30) + '"' : ''}`,
+  }));
+}
+
+interface ScreenshotAnnotatorProps {
+  /** Called when user confirms their selection with captured screenshot and discovered elements */
+  onConfirm: (annotatedScreenshot: string, bounds: Rectangle, discoveredElements: VisionFocusedElement[]) => void;
+  /** Called when user cancels */
+  onCancel: () => void;
+}
+
+/**
+ * ScreenshotAnnotator displays a transparent overlay where users can
+ * draw a rectangle on the LIVE app to define the focus area.
+ * On confirm, it captures a screenshot and annotates it with the selection.
+ */
+export function ScreenshotAnnotator({
+  onConfirm,
+  onCancel,
+}: ScreenshotAnnotatorProps) {
+  const [mounted, setMounted] = useState(false);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [startPos, setStartPos] = useState<{ x: number; y: number } | null>(null);
+  const [currentRect, setCurrentRect] = useState<Rectangle | null>(null);
+  const [isCapturing, setIsCapturing] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    
+    // Handle escape key to cancel
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onCancel();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    
+    return () => {
+      setMounted(false);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onCancel]);
+
+  // Mouse handlers for drawing on the live page
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    // Ignore clicks on the toolbar buttons
+    if ((e.target as HTMLElement).closest('[data-annotator-toolbar]')) {
+      return;
+    }
+    
+    // Stop propagation to prevent InspectorOverlay from detecting this as element selection
+    e.stopPropagation();
+    
+    setStartPos({ x: e.clientX, y: e.clientY });
+    setIsDrawing(true);
+    setCurrentRect(null);
+  }, []);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!isDrawing || !startPos) return;
+    
+    // Calculate rectangle (handle drawing in any direction)
+    const x = Math.min(startPos.x, e.clientX);
+    const y = Math.min(startPos.y, e.clientY);
+    const width = Math.abs(e.clientX - startPos.x);
+    const height = Math.abs(e.clientY - startPos.y);
+    
+    setCurrentRect({ x, y, width, height });
+  }, [isDrawing, startPos]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDrawing(false);
+  }, []);
+
+  // Clear the current selection
+  const handleRedraw = useCallback(() => {
+    setCurrentRect(null);
+    setStartPos(null);
+  }, []);
+
+  // Confirm: discover elements in bounds, capture screenshot and annotate it
+  const handleConfirm = useCallback(async () => {
+    if (!currentRect || isCapturing) return;
+    
+    setIsCapturing(true);
+
+    try {
+      // FIRST: Discover DOM elements within the drawn rectangle
+      // This must happen BEFORE the overlay is removed to get accurate results
+      console.log("[ScreenshotAnnotator] Discovering elements in bounds:", currentRect);
+      const discoveredElements = discoverElementsInBounds(currentRect);
+      console.log("[ScreenshotAnnotator] Discovered elements:", {
+        count: discoveredElements.length,
+        elements: discoveredElements.map(e => ({
+          name: e.name,
+          text: e.textContent?.substring(0, 30),
+          id: e.elementId,
+        })),
+      });
+
+      // Capture the full page screenshot (excluding DevTools elements)
+      const canvas = await html2canvas(document.body, {
+        ignoreElements: (element) => {
+          return (
+            element.hasAttribute("data-sonance-devtools") ||
+            element.hasAttribute("data-vision-mode-border") ||
+            element.hasAttribute("data-annotator-overlay")
+          );
+        },
+        useCORS: true,
+        allowTaint: true,
+        scale: 1,
+      });
+
+      // Create annotated screenshot with the focus rectangle
+      const ctx = canvas.getContext("2d")!;
+      
+      // Draw the focus rectangle (teal dashed border)
+      ctx.strokeStyle = "#00D3C8";
+      ctx.lineWidth = 4;
+      ctx.setLineDash([12, 6]);
+      ctx.strokeRect(currentRect.x, currentRect.y, currentRect.width, currentRect.height);
+
+      // Semi-transparent fill
+      ctx.fillStyle = "rgba(0, 211, 200, 0.1)";
+      ctx.fillRect(currentRect.x, currentRect.y, currentRect.width, currentRect.height);
+
+      // Add "FOCUS AREA" label
+      ctx.setLineDash([]); // Reset dash
+      ctx.fillStyle = "#00D3C8";
+      ctx.font = "bold 14px Montserrat, system-ui, sans-serif";
+      const labelText = "FOCUS AREA";
+      const labelPadding = 8;
+      const labelHeight = 22;
+      const labelWidth = ctx.measureText(labelText).width + labelPadding * 2;
+      
+      // Position label above the rectangle
+      const labelX = currentRect.x;
+      const labelY = Math.max(currentRect.y - labelHeight - 4, 0);
+      
+      ctx.fillRect(labelX, labelY, labelWidth, labelHeight);
+      ctx.fillStyle = "#1a1a1a";
+      ctx.fillText(labelText, labelX + labelPadding, labelY + 16);
+
+      const annotatedScreenshot = canvas.toDataURL("image/png", 0.9);
+      
+      // Pass screenshot, bounds, AND discovered elements to callback
+      onConfirm(annotatedScreenshot, currentRect, discoveredElements);
+    } catch (error) {
+      console.error("Failed to capture screenshot:", error);
+      setIsCapturing(false);
+    }
+  }, [currentRect, isCapturing, onConfirm]);
+
+  if (!mounted) return null;
+
+  return createPortal(
+    <div
+      data-annotator-overlay="true"
+      data-sonance-devtools="true"
+      onMouseDown={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        handleMouseDown(e);
+      }}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      onClick={(e) => {
+        // Prevent clicks from bubbling to InspectorOverlay
+        e.stopPropagation();
+      }}
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 10000,
+        cursor: isDrawing ? "crosshair" : "crosshair",
+        // Transparent overlay - user sees the live app
+        backgroundColor: "rgba(0, 0, 0, 0.1)",
+        // Ensure we capture all pointer events
+        pointerEvents: "all",
+      }}
+    >
+      {/* Instructions banner at top */}
+      <div
+        data-sonance-devtools="true"
+        data-annotator-toolbar="true"
+        style={{
+          position: "fixed",
+          top: 20,
+          left: "50%",
+          transform: "translateX(-50%)",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          backgroundColor: "#00D3C8",
+          color: "#1a1a1a",
+          padding: "10px 20px",
+          borderRadius: 8,
+          fontSize: 14,
+          fontWeight: 600,
+          fontFamily: "'Montserrat', system-ui, -apple-system, sans-serif",
+          boxShadow: "0 4px 20px rgba(0, 211, 200, 0.4)",
+          pointerEvents: "none",
+          userSelect: "none",
+        }}
+      >
+        <Crop size={18} />
+        <span>Click and drag to select the area you want to focus on</span>
+      </div>
+
+      {/* Current rectangle selection */}
+      {currentRect && (
+        <div
+          data-sonance-devtools="true"
+          style={{
+            position: "fixed",
+            left: currentRect.x,
+            top: currentRect.y,
+            width: currentRect.width,
+            height: currentRect.height,
+            border: "3px dashed #00D3C8",
+            backgroundColor: "rgba(0, 211, 200, 0.15)",
+            borderRadius: 4,
+            boxShadow: "0 0 0 2px rgba(0, 211, 200, 0.3), 0 0 20px rgba(0, 211, 200, 0.2)",
+            pointerEvents: "none",
+          }}
+        />
+      )}
+
+      {/* Toolbar at bottom */}
+      <div
+        data-sonance-devtools="true"
+        data-annotator-toolbar="true"
+        style={{
+          position: "fixed",
+          bottom: 30,
+          left: "50%",
+          transform: "translateX(-50%)",
+          display: "flex",
+          gap: 12,
+        }}
+      >
+        {/* Cancel button */}
+        <button
+          data-sonance-devtools="true"
+          onClick={(e) => {
+            e.stopPropagation();
+            onCancel();
+          }}
+          onMouseDown={(e) => e.stopPropagation()}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "10px 20px",
+            backgroundColor: "rgba(30, 30, 30, 0.95)",
+            color: "white",
+            border: "1px solid rgba(255, 255, 255, 0.2)",
+            borderRadius: 6,
+            fontSize: 14,
+            fontWeight: 500,
+            fontFamily: "'Montserrat', system-ui, sans-serif",
+            cursor: "pointer",
+            transition: "all 0.2s",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
+          }}
+        >
+          <X size={16} />
+          Cancel
+        </button>
+
+        {/* Redraw button */}
+        <button
+          data-sonance-devtools="true"
+          onClick={(e) => {
+            e.stopPropagation();
+            handleRedraw();
+          }}
+          onMouseDown={(e) => e.stopPropagation()}
+          disabled={!currentRect}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "10px 20px",
+            backgroundColor: currentRect ? "rgba(30, 30, 30, 0.95)" : "rgba(30, 30, 30, 0.6)",
+            color: currentRect ? "white" : "rgba(255, 255, 255, 0.4)",
+            border: "1px solid rgba(255, 255, 255, 0.2)",
+            borderRadius: 6,
+            fontSize: 14,
+            fontWeight: 500,
+            fontFamily: "'Montserrat', system-ui, sans-serif",
+            cursor: currentRect ? "pointer" : "not-allowed",
+            transition: "all 0.2s",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
+          }}
+        >
+          <RotateCcw size={16} />
+          Redraw
+        </button>
+
+        {/* Confirm button */}
+        <button
+          data-sonance-devtools="true"
+          onClick={(e) => {
+            e.stopPropagation();
+            handleConfirm();
+          }}
+          onMouseDown={(e) => e.stopPropagation()}
+          disabled={!currentRect || isCapturing}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "10px 24px",
+            backgroundColor: currentRect ? "#00D3C8" : "rgba(0, 211, 200, 0.3)",
+            color: currentRect ? "#1a1a1a" : "rgba(26, 26, 26, 0.5)",
+            border: "none",
+            borderRadius: 6,
+            fontSize: 14,
+            fontWeight: 600,
+            fontFamily: "'Montserrat', system-ui, sans-serif",
+            cursor: currentRect && !isCapturing ? "pointer" : "not-allowed",
+            transition: "all 0.2s",
+            boxShadow: currentRect ? "0 4px 20px rgba(0, 211, 200, 0.4)" : "none",
+          }}
+        >
+          <Check size={16} />
+          {isCapturing ? "Capturing..." : "Confirm Selection"}
+        </button>
+      </div>
+
+      {/* Keyboard hint */}
+      <div
+        data-sonance-devtools="true"
+        style={{
+          position: "fixed",
+          bottom: 10,
+          left: "50%",
+          transform: "translateX(-50%)",
+          color: "rgba(255, 255, 255, 0.6)",
+          fontSize: 12,
+          fontFamily: "'Montserrat', system-ui, sans-serif",
+          textShadow: "0 1px 2px rgba(0, 0, 0, 0.5)",
+          pointerEvents: "none",
+        }}
+      >
+        Press <kbd style={{ padding: "2px 6px", backgroundColor: "rgba(0,0,0,0.4)", borderRadius: 4 }}>Esc</kbd> to cancel
+      </div>
+    </div>,
+    document.body
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.93",
+  "version": "1.3.95",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",