sonance-brand-mcp 1.3.93 → 1.3.94

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,11 @@ 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);
+  
   // Auto-dismiss toast after 5 seconds
   useEffect(() => {
     if (toastMessage) {
@@ -164,6 +170,33 @@ 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
+  const handleAnnotationConfirm = useCallback((annotated: string, bounds: Rectangle) => {
+    console.log("[Vision Mode] Annotation confirmed:", { bounds });
+    setAnnotatedScreenshot(annotated);
+    setManualFocusBounds(bounds);
+    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
+  const clearAnnotation = useCallback(() => {
+    setAnnotatedScreenshot(null);
+    setManualFocusBounds(null);
+  }, []);
+
   // Handle vision mode edit request
   const handleVisionEdit = async (prompt: string) => {
     // Use Apply-First mode if callback is provided (new Cursor-style workflow)
@@ -188,22 +221,34 @@ 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");
+        screenshot = annotatedScreenshot;
+        // Clear the annotation after use
+        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 && 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),
+            });
+          }
         }
       }
 
@@ -595,6 +640,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 +679,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 +711,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,352 @@
+"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";
+
+export interface Rectangle {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface ScreenshotAnnotatorProps {
+  /** Called when user confirms their selection with captured screenshot */
+  onConfirm: (annotatedScreenshot: string, bounds: Rectangle) => 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: capture screenshot and annotate it
+  const handleConfirm = useCallback(async () => {
+    if (!currentRect || isCapturing) return;
+    
+    setIsCapturing(true);
+
+    try {
+      // 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);
+      onConfirm(annotatedScreenshot, currentRect);
+    } 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.94",
   "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",