sonance-brand-mcp 1.3.14 → 1.3.16

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

@@ -0,0 +1,230 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { X, Zap, Loader2, Check, Undo, ChevronDown, ChevronRight, FileCode, AlertTriangle, RefreshCw, Info } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { ApplyFirstSession, ApplyFirstStatus, VisionFileModification } from "../types";
+
+export interface ApplyFirstPreviewProps {
+  session: ApplyFirstSession;
+  status: ApplyFirstStatus;
+  onAccept: () => void;
+  onRevert: () => void;
+}
+
+function FileModificationCard({
+  modification,
+  isExpanded,
+  onToggle,
+}: {
+  modification: VisionFileModification;
+  isExpanded: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <div className="border border-gray-200 rounded bg-white overflow-hidden">
+      {/* File Header */}
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center gap-2 p-2 hover:bg-gray-50 transition-colors text-left"
+      >
+        {isExpanded ? (
+          <ChevronDown className="h-3.5 w-3.5 text-gray-400 flex-shrink-0" />
+        ) : (
+          <ChevronRight className="h-3.5 w-3.5 text-gray-400 flex-shrink-0" />
+        )}
+        <FileCode className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
+        <span className="text-xs font-mono text-gray-700 truncate flex-1">
+          {modification.filePath}
+        </span>
+      </button>
+
+      {/* Explanation */}
+      <div className="px-2 pb-2">
+        <p className="text-[10px] text-gray-500">{modification.explanation}</p>
+      </div>
+
+      {/* Expanded Diff */}
+      {isExpanded && (
+        <div className="border-t border-gray-100">
+          <div className="max-h-60 overflow-auto">
+            <pre className="p-2 text-[10px] font-mono whitespace-pre-wrap">
+              {modification.diff.split("\n").map((line, i) => (
+                <div
+                  key={i}
+                  className={cn(
+                    line.startsWith("+") && !line.startsWith("@@")
+                      ? "bg-green-50 text-green-700"
+                      : line.startsWith("-") && !line.startsWith("@@")
+                      ? "bg-red-50 text-red-700"
+                      : line.startsWith("@@")
+                      ? "bg-blue-50 text-blue-600 font-semibold"
+                      : "text-gray-600"
+                  )}
+                >
+                  {line || " "}
+                </div>
+              ))}
+            </pre>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function HMRStatusBadge({ status }: { status: ApplyFirstStatus }) {
+  if (status === "waiting-hmr") {
+    return (
+      <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-amber-100 text-amber-700">
+        <RefreshCw className="h-3 w-3 animate-spin" />
+        Refreshing...
+      </span>
+    );
+  }
+
+  if (status === "reviewing") {
+    return (
+      <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-green-100 text-green-700">
+        <Check className="h-3 w-3" />
+        Changes Live
+      </span>
+    );
+  }
+
+  return null;
+}
+
+export function ApplyFirstPreview({
+  session,
+  status,
+  onAccept,
+  onRevert,
+}: ApplyFirstPreviewProps) {
+  const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
+
+  // Expand first file by default
+  useEffect(() => {
+    if (session.modifications.length > 0) {
+      setExpandedFiles(new Set([session.modifications[0].filePath]));
+    }
+  }, [session]);
+
+  const toggleFile = (filePath: string) => {
+    setExpandedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(filePath)) {
+        next.delete(filePath);
+      } else {
+        next.add(filePath);
+      }
+      return next;
+    });
+  };
+
+  const fileCount = session.modifications.length;
+  const isLoading = status === "accepting" || status === "reverting";
+
+  return (
+    <div className="space-y-3 p-3 rounded border border-green-300 bg-green-50">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Zap className="h-4 w-4 text-green-600" />
+          <span className="text-xs font-semibold text-gray-900">
+            Changes Applied
+          </span>
+          <span className="text-[10px] px-1.5 py-0.5 rounded bg-green-200 text-green-700 font-medium">
+            {fileCount} file{fileCount !== 1 ? "s" : ""}
+          </span>
+        </div>
+        <HMRStatusBadge status={status} />
+      </div>
+
+      {/* Info Banner */}
+      <div className="flex items-start gap-2 p-2 rounded bg-blue-50 border border-blue-200">
+        <Info className="h-3.5 w-3.5 text-blue-600 mt-0.5 flex-shrink-0" />
+        <span className="text-xs text-blue-700">
+          <strong>Changes are live!</strong> Scroll around to see the actual result.
+          Your original files are safely backed up.
+        </span>
+      </div>
+
+      {/* File Modifications List */}
+      <div className="space-y-2 max-h-80 overflow-y-auto">
+        {session.modifications.map((mod) => (
+          <FileModificationCard
+            key={mod.filePath}
+            modification={mod}
+            isExpanded={expandedFiles.has(mod.filePath)}
+            onToggle={() => toggleFile(mod.filePath)}
+          />
+        ))}
+      </div>
+
+      {/* Warning about navigation */}
+      <div className="flex items-start gap-2 p-2 rounded bg-amber-50 border border-amber-200">
+        <AlertTriangle className="h-3.5 w-3.5 text-amber-600 mt-0.5 flex-shrink-0" />
+        <span className="text-xs text-amber-700">
+          Navigating away will automatically revert changes. Make sure to accept or revert first.
+        </span>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex gap-2">
+        {/* Accept Button */}
+        <button
+          onClick={onAccept}
+          disabled={isLoading}
+          className={cn(
+            "flex-1 flex items-center justify-center gap-2 py-2.5",
+            "text-xs font-medium rounded transition-colors",
+            "bg-green-600 text-white hover:bg-green-700",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          )}
+        >
+          {status === "accepting" ? (
+            <>
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              Accepting...
+            </>
+          ) : (
+            <>
+              <Check className="h-3.5 w-3.5" />
+              Keep Changes
+            </>
+          )}
+        </button>
+
+        {/* Revert Button */}
+        <button
+          onClick={onRevert}
+          disabled={isLoading}
+          className={cn(
+            "flex-1 flex items-center justify-center gap-2 py-2.5",
+            "text-xs font-medium rounded transition-colors",
+            "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          )}
+        >
+          {status === "reverting" ? (
+            <>
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              Reverting...
+            </>
+          ) : (
+            <>
+              <Undo className="h-3.5 w-3.5" />
+              Revert
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Session Info (for debugging) */}
+      <div className="text-[10px] text-gray-400 font-mono">
+        Session: {session.sessionId} | Applied: {new Date(session.appliedAt).toLocaleTimeString()}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,455 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Loader2, Send, Sparkles, Eye } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { ChatMessage, AIEditResult, PendingEdit, VisionFocusedElement, VisionPendingEdit, ApplyFirstSession } from "../types";
+import html2canvas from "html2canvas-pro";
+
+// Variant styles captured from the DOM
+export interface VariantStyles {
+  backgroundColor: string;
+  color: string;
+  borderColor: string;
+  borderRadius: string;
+  borderWidth: string;
+  padding: string;
+  fontSize: string;
+  fontWeight: string;
+  boxShadow: string;
+}
+
+export interface ChatInterfaceProps {
+  componentType: string;
+  componentName: string;
+  onEditComplete: (result: AIEditResult) => void;
+  onSaveRequest: (edit: PendingEdit) => void;
+  pendingEdit: PendingEdit | null;
+  onClearPending: () => void;
+  // Variant-scoped editing
+  editScope?: "component" | "variant";
+  variantId?: string | null;
+  variantStyles?: VariantStyles | null;
+  // Vision mode props
+  visionMode?: boolean;
+  visionFocusedElements?: VisionFocusedElement[];
+  onVisionEditComplete?: (result: VisionPendingEdit) => void;
+  // Apply-first mode - NEW: writes files immediately
+  onApplyFirstComplete?: (session: ApplyFirstSession) => void;
+}
+
+export function ChatInterface({
+  componentType,
+  componentName,
+  onEditComplete,
+  onSaveRequest,
+  pendingEdit,
+  onClearPending,
+  editScope = "component",
+  variantId,
+  variantStyles,
+  visionMode = false,
+  visionFocusedElements = [],
+  onVisionEditComplete,
+  onApplyFirstComplete,
+}: ChatInterfaceProps) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = useState("");
+  const [isProcessing, setIsProcessing] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  // Scroll to bottom when messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  // Dynamically discover component file path via API
+  const findComponentFile = useCallback(async (): Promise<string | null> => {
+    try {
+      const response = await fetch(
+        `/api/sonance-find-component?component=${encodeURIComponent(componentType)}`
+      );
+      const data = await response.json();
+      
+      if (data.found && data.filePath) {
+        return data.filePath;
+      }
+      
+      console.warn(`Component file not found for: ${componentType}`, data);
+      return null;
+    } catch (error) {
+      console.error("Error finding component file:", error);
+      return null;
+    }
+  }, [componentType]);
+
+  // Capture screenshot for vision mode
+  const captureScreenshot = useCallback(async (): Promise<string | null> => {
+    try {
+      const canvas = await html2canvas(document.body, {
+        ignoreElements: (element) => {
+          // Exclude DevTools overlay and vision mode border
+          return (
+            element.hasAttribute("data-sonance-devtools") ||
+            element.hasAttribute("data-vision-mode-border")
+          );
+        },
+        useCORS: true,
+        allowTaint: true,
+        scale: 1, // Lower scale for smaller file size
+      });
+
+      return canvas.toDataURL("image/png", 0.8);
+    } catch (error) {
+      console.error("Failed to capture screenshot:", error);
+      return null;
+    }
+  }, []);
+
+  // 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;
+
+    console.log("[Vision Mode] Starting edit request:", {
+      prompt,
+      focusedElements: visionFocusedElements.length,
+      mode: useApplyFirst ? "apply-first" : "preview-first"
+    });
+
+    const userMessage: ChatMessage = {
+      id: `msg-${Date.now()}`,
+      role: "user",
+      content: prompt,
+      timestamp: new Date(),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setInput("");
+    setIsProcessing(true);
+
+    try {
+      // Capture screenshot
+      console.log("[Vision Mode] Capturing screenshot...");
+      const screenshot = await captureScreenshot();
+      console.log("[Vision Mode] Screenshot captured:", screenshot ? `${screenshot.length} bytes` : "null");
+
+      // 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);
+
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: useApplyFirst ? "apply" : "edit",
+          screenshot,
+          pageRoute: window.location.pathname,
+          userPrompt: prompt,
+          focusedElements: visionFocusedElements,
+        }),
+      });
+
+      const data = await response.json();
+      console.log("[Vision Mode] API response:", {
+        success: data.success,
+        sessionId: data.sessionId,
+        modificationsCount: data.modifications?.length || 0,
+        hasCss: !!data.aggregatedPreviewCSS,
+        error: data.error,
+      });
+
+      const assistantMessage: ChatMessage = {
+        id: `msg-${Date.now()}-response`,
+        role: "assistant",
+        content: data.success
+          ? useApplyFirst
+            ? data.explanation || "Changes applied! Review and accept or revert."
+            : data.explanation || "Vision mode changes ready for preview."
+          : data.error || "Failed to generate changes.",
+        timestamp: new Date(),
+      };
+
+      setMessages((prev) => [...prev, assistantMessage]);
+
+      if (data.success && data.modifications) {
+        if (useApplyFirst && onApplyFirstComplete) {
+          // Apply-First mode: files are already written
+          console.log("[Apply-First] Calling onApplyFirstComplete with:", {
+            sessionId: data.sessionId,
+            modifications: data.modifications.map((m: { filePath: string }) => m.filePath),
+          });
+          onApplyFirstComplete({
+            sessionId: data.sessionId,
+            modifications: data.modifications,
+            appliedAt: Date.now(),
+            status: 'applied',
+            backupPaths: data.backupPaths || [],
+          });
+        } else if (onVisionEditComplete) {
+          // Preview-First mode (legacy): just preview CSS
+          console.log("[Vision Mode] Calling onVisionEditComplete with:", {
+            modifications: data.modifications.map((m: { filePath: string }) => m.filePath),
+            cssLength: data.aggregatedPreviewCSS?.length || 0,
+          });
+          onVisionEditComplete({
+            modifications: data.modifications,
+            aggregatedPreviewCSS: data.aggregatedPreviewCSS || "",
+            explanation: data.explanation || "",
+          });
+        }
+      } else if (!data.success) {
+        console.error("[Vision Mode] API returned error:", data.error);
+      }
+    } catch (error) {
+      console.error("[Vision Mode] Request failed:", error);
+      const errorMessage: ChatMessage = {
+        id: `msg-${Date.now()}-error`,
+        role: "assistant",
+        content: error instanceof Error ? error.message : "Vision mode error occurred",
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleSend = async (prompt: string) => {
+    if (!prompt.trim() || isProcessing) return;
+
+    // Use vision mode handler if vision mode is active
+    if (visionMode) {
+      return handleVisionEdit(prompt);
+    }
+
+    // If no component is selected, intercept the request
+    if (componentType === "all") {
+      const userMessage: ChatMessage = {
+        id: `msg-${Date.now()}`,
+        role: "user",
+        content: prompt,
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, userMessage]);
+      setInput("");
+      
+      setTimeout(() => {
+        const assistantMessage: ChatMessage = {
+          id: `msg-${Date.now()}-response`,
+          role: "assistant",
+          content: "Please select a component using the cursor icon in the header to edit it.",
+          timestamp: new Date(),
+        };
+        setMessages((prev) => [...prev, assistantMessage]);
+      }, 300);
+      return;
+    }
+
+    const userMessage: ChatMessage = {
+      id: `msg-${Date.now()}`,
+      role: "user",
+      content: prompt,
+      timestamp: new Date(),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setInput("");
+    setIsProcessing(true);
+
+    try {
+      // Dynamically find the component file
+      const filePath = await findComponentFile();
+      
+      if (!filePath) {
+        throw new Error(`Could not locate component file for "${componentType}". The component may not exist in the expected directories.`);
+      }
+
+      // First, fetch the current component source
+      const sourceResponse = await fetch(
+        `/api/sonance-component-source?file=${encodeURIComponent(filePath)}`
+      );
+
+      if (!sourceResponse.ok) {
+        throw new Error(`Could not read component file: ${filePath}`);
+      }
+
+      const sourceData = await sourceResponse.json();
+
+      // Then, send to AI for editing
+      const editResponse = await fetch("/api/sonance-ai-edit", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "edit",
+          componentType,
+          filePath,
+          currentCode: sourceData.content,
+          userRequest: prompt,
+          // Variant-scoped editing context
+          editScope,
+          variantId: editScope === "variant" ? variantId : undefined,
+          variantStyles: editScope === "variant" ? variantStyles : undefined,
+        }),
+      });
+
+      const editData = await editResponse.json();
+
+      const assistantMessage: ChatMessage = {
+        id: `msg-${Date.now()}-response`,
+        role: "assistant",
+        content: editData.success
+          ? editData.explanation || "Changes ready for preview."
+          : editData.error || "Failed to generate changes.",
+        timestamp: new Date(),
+        editResult: editData,
+      };
+
+      setMessages((prev) => [...prev, assistantMessage]);
+
+      if (editData.success && editData.modifiedCode) {
+        onEditComplete(editData);
+        // Set up pending edit for save
+        onSaveRequest({
+          filePath,
+          originalCode: sourceData.content,
+          modifiedCode: editData.modifiedCode,
+          diff: editData.diff || "",
+          explanation: editData.explanation || "",
+          // AI-provided CSS for live preview (no parsing needed)
+          previewCSS: editData.previewCSS || "",
+        });
+      }
+    } catch (error) {
+      const errorMessage: ChatMessage = {
+        id: `msg-${Date.now()}-error`,
+        role: "assistant",
+        content: error instanceof Error ? error.message : "An error occurred",
+        timestamp: new Date(),
+        editResult: { success: false, error: String(error) },
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      {/* Vision Mode Banner */}
+      {visionMode && (
+        <div className="p-2 bg-purple-50 border border-purple-200 rounded-md">
+          <div className="flex items-center gap-2 text-purple-700 font-medium text-xs mb-1">
+            <Eye className="h-3 w-3" />
+            <span>Vision Mode Active</span>
+          </div>
+          {visionFocusedElements.length > 0 ? (
+            <div className="text-purple-600 text-xs">
+              {visionFocusedElements.length} element{visionFocusedElements.length !== 1 ? "s" : ""} focused
+            </div>
+          ) : (
+            <div className="text-purple-500 text-xs">
+              Click elements to focus AI attention, then describe your changes
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* AI Hint - only show when no messages yet and not in vision mode */}
+      {messages.length === 0 && componentType !== "all" && !visionMode && (
+        <p className="text-xs text-gray-500 italic">
+          Describe any styling changes you'd like to make to this component.
+        </p>
+      )}
+
+      {/* Chat Messages */}
+      {messages.length > 0 && (
+        <div className="max-h-48 overflow-y-auto space-y-2 p-2 rounded border border-gray-200 bg-gray-50">
+          {messages.map((msg) => (
+            <div
+              key={msg.id}
+              className={cn(
+                "text-xs p-2 rounded",
+                msg.role === "user"
+                  ? "bg-[#00A3E1]/10 text-gray-800 ml-4"
+                  : "bg-white border border-gray-200 mr-4"
+              )}
+            >
+              <div className="flex items-start gap-2">
+                {msg.role === "assistant" && (
+                  <Sparkles className="h-3 w-3 text-[#00A3E1] mt-0.5 flex-shrink-0" />
+                )}
+                <span id="summary-row-span-msgcontent">{msg.content}</span>
+              </div>
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+      )}
+
+      {/* Input */}
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              handleSend(input);
+            }
+          }}
+          placeholder={
+            visionMode
+              ? "Describe what changes you want to make on this page..."
+              : componentType === "all"
+                ? "Select a component to start editing..."
+                : `Describe changes to ${componentName}...`
+          }
+          disabled={isProcessing}
+          className={cn(
+            "flex-1 px-3 py-2 text-xs rounded border",
+            visionMode
+              ? "border-purple-200 focus:ring-purple-500 focus:border-purple-500"
+              : "border-gray-200 focus:ring-[#00A3E1] focus:border-[#00A3E1]",
+            "focus:outline-none focus:ring-1",
+            "placeholder:text-gray-400",
+            "disabled:opacity-50 disabled:bg-gray-50"
+          )}
+        />
+        <button
+          onClick={() => handleSend(input)}
+          disabled={isProcessing || !input.trim()}
+          className={cn(
+            "px-3 py-2 rounded transition-colors",
+            visionMode
+              ? "bg-purple-600 text-white hover:bg-purple-700"
+              : "bg-[#00A3E1] text-white hover:bg-[#0090c8]",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          )}
+        >
+          {isProcessing ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Send className="h-4 w-4" />
+          )}
+        </button>
+      </div>
+
+      {/* Processing Indicator */}
+      {isProcessing && (
+        <div className={cn(
+          "flex items-center gap-2 text-xs",
+          visionMode ? "text-purple-600" : "text-gray-500"
+        )}>
+          <Loader2 className="h-3 w-3 animate-spin" />
+          <span>
+            {visionMode
+              ? "AI is analyzing the page screenshot and generating changes..."
+              : "AI is analyzing and generating changes..."}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}