sonance-brand-mcp 1.3.57 → 1.3.59

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

@@ -1,16 +1,148 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
-import { X, Zap, Loader2, Check, Undo, ChevronDown, ChevronRight, FileCode, AlertTriangle, RefreshCw, Info } from "lucide-react";
+import React, { useState, useEffect, useCallback } from "react";
+import { X, Zap, Loader2, Check, ChevronDown, ChevronRight, FileCode, AlertTriangle, Info, Eye, EyeOff } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { ApplyFirstSession, ApplyFirstStatus, VisionFileModification } from "../types";
 
+// CSS Injection Preview ID
+const PREVIEW_STYLE_ID = "sonance-preview-css";
+
+/**
+ * Extract className changes from a diff
+ * Returns: { removed: string[], added: string[] }
+ */
+function extractClassNameChanges(diff: string): { removed: string[]; added: string[] } {
+  const removed: string[] = [];
+  const added: string[] = [];
+  
+  // Regex to find className="..." patterns
+  const classNameRegex = /className=["']([^"']+)["']/g;
+  
+  const lines = diff.split("\n");
+  for (const line of lines) {
+    if (line.startsWith("-") && !line.startsWith("---")) {
+      // Removed line - extract className
+      let match;
+      while ((match = classNameRegex.exec(line)) !== null) {
+        removed.push(...match[1].split(/\s+/));
+      }
+    } else if (line.startsWith("+") && !line.startsWith("+++")) {
+      // Added line - extract className
+      let match;
+      while ((match = classNameRegex.exec(line)) !== null) {
+        added.push(...match[1].split(/\s+/));
+      }
+    }
+  }
+  
+  return { removed, added };
+}
+
+/**
+ * Common Tailwind class to CSS mapping for preview
+ * Only covers the most common styling classes for quick previews
+ */
+const TAILWIND_TO_CSS: Record<string, string> = {
+  // Text colors
+  "text-white": "color: white !important;",
+  "text-black": "color: black !important;",
+  "text-gray-900": "color: rgb(17, 24, 39) !important;",
+  "text-gray-700": "color: rgb(55, 65, 81) !important;",
+  "text-gray-500": "color: rgb(107, 114, 128) !important;",
+  
+  // Sonance brand colors
+  "text-sonance-charcoal": "color: #333F48 !important;",
+  "text-sonance-blue": "color: #00D3C8 !important;",
+  "border-sonance-charcoal": "border-color: #333F48 !important;",
+  "border-sonance-blue": "border-color: #00D3C8 !important;",
+  "bg-sonance-charcoal": "background-color: #333F48 !important;",
+  "bg-sonance-blue": "background-color: #00D3C8 !important;",
+  
+  // Semantic colors
+  "text-primary": "color: var(--primary) !important;",
+  "text-primary-foreground": "color: var(--primary-foreground) !important;",
+  "text-accent": "color: var(--accent) !important;",
+  "text-accent-foreground": "color: var(--accent-foreground) !important;",
+  "bg-primary": "background-color: hsl(var(--primary)) !important;",
+  "bg-accent": "background-color: hsl(var(--accent)) !important;",
+  
+  // Common backgrounds
+  "bg-white": "background-color: white !important;",
+  "bg-black": "background-color: black !important;",
+  "bg-gray-100": "background-color: rgb(243, 244, 246) !important;",
+  "bg-gray-200": "background-color: rgb(229, 231, 235) !important;",
+  
+  // Borders
+  "border-gray-200": "border-color: rgb(229, 231, 235) !important;",
+  "border-gray-300": "border-color: rgb(209, 213, 219) !important;",
+};
+
+/**
+ * Generate CSS for preview based on class changes
+ */
+function generatePreviewCSS(modifications: VisionFileModification[]): string {
+  const cssRules: string[] = [];
+  
+  for (const mod of modifications) {
+    const { added } = extractClassNameChanges(mod.diff);
+    
+    // Generate CSS for added classes
+    for (const cls of added) {
+      if (TAILWIND_TO_CSS[cls]) {
+        // We can't know the exact selector, so we apply to elements with data-sonance-preview
+        cssRules.push(TAILWIND_TO_CSS[cls]);
+      }
+    }
+  }
+  
+  if (cssRules.length === 0) return "";
+  
+  // Apply to changed elements (marked by InspectorOverlay)
+  return `
+    [data-sonance-changed="true"] {
+      ${cssRules.join("\n      ")}
+      outline: 2px dashed #00D3C8 !important;
+      outline-offset: 2px !important;
+    }
+  `;
+}
+
+/**
+ * Inject preview CSS into the document
+ */
+function injectPreviewCSS(css: string): void {
+  // Remove existing preview styles first
+  removePreviewCSS();
+  
+  if (!css.trim()) return;
+  
+  const style = document.createElement("style");
+  style.id = PREVIEW_STYLE_ID;
+  style.textContent = css;
+  document.head.appendChild(style);
+  
+  console.log("[Preview CSS] Injected:", css.substring(0, 200));
+}
+
+/**
+ * Remove preview CSS from the document
+ */
+function removePreviewCSS(): void {
+  const existing = document.getElementById(PREVIEW_STYLE_ID);
+  if (existing) {
+    existing.remove();
+    console.log("[Preview CSS] Removed");
+  }
+}
+
 export interface ApplyFirstPreviewProps {
   session: ApplyFirstSession;
   status: ApplyFirstStatus;
   onAccept: () => void;
   onRevert: () => void;
   onForceClear?: () => void; // Force clear stale sessions
+  onApplyPreview?: () => void; // Apply previewed changes (for preview mode)
 }
 
 function FileModificationCard({
@@ -78,7 +210,7 @@ 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" />
+        <Loader2 className="h-3 w-3 animate-spin" />
         Refreshing...
       </span>
     );
@@ -92,6 +224,15 @@ function HMRStatusBadge({ status }: { status: ApplyFirstStatus }) {
       </span>
     );
   }
+  
+  if (status === "previewing") {
+    return (
+      <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-700">
+        <Eye className="h-3 w-3" />
+        Preview Mode
+      </span>
+    );
+  }
 
   return null;
 }
@@ -102,8 +243,10 @@ export function ApplyFirstPreview({
   onAccept,
   onRevert,
   onForceClear,
+  onApplyPreview,
 }: ApplyFirstPreviewProps) {
   const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
+  const [cssPreviewEnabled, setCssPreviewEnabled] = useState(true);
 
   // Expand first file by default
   useEffect(() => {
@@ -111,6 +254,32 @@ export function ApplyFirstPreview({
       setExpandedFiles(new Set([session.modifications[0].filePath]));
     }
   }, [session]);
+  
+  // CSS Preview injection for preview mode
+  useEffect(() => {
+    const isPreviewMode = session.isPreview === true;
+    
+    if (isPreviewMode && cssPreviewEnabled) {
+      // Generate and inject preview CSS
+      const previewCSS = generatePreviewCSS(session.modifications);
+      if (previewCSS) {
+        injectPreviewCSS(previewCSS);
+      }
+    } else {
+      // Remove preview CSS when not in preview mode or disabled
+      removePreviewCSS();
+    }
+    
+    // Cleanup on unmount
+    return () => {
+      removePreviewCSS();
+    };
+  }, [session, cssPreviewEnabled]);
+  
+  // Toggle CSS preview
+  const toggleCssPreview = useCallback(() => {
+    setCssPreviewEnabled(prev => !prev);
+  }, []);
 
   const toggleFile = (filePath: string) => {
     setExpandedFiles((prev) => {
@@ -125,26 +294,55 @@ export function ApplyFirstPreview({
   };
 
   const fileCount = session.modifications.length;
-  const isLoading = status === "accepting" || status === "reverting";
+  const isLoading = status === "accepting" || status === "reverting" || status === "applying";
   const isStaleSession = fileCount === 0 || status === "error";
+  const isPreviewMode = session.isPreview === true;
 
   return (
-    <div className="space-y-3 p-3 rounded border border-green-300 bg-green-50">
+    <div className={cn(
+      "space-y-3 p-3 rounded border",
+      isPreviewMode 
+        ? "border-blue-300 bg-blue-50" 
+        : "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" />
+          <Zap className={cn("h-4 w-4", isPreviewMode ? "text-blue-600" : "text-green-600")} />
           <span className="text-xs font-semibold text-gray-900">
-            Changes Applied
+            {isPreviewMode ? "Proposed Changes" : "Changes Applied"}
           </span>
-          <span className="text-[10px] px-1.5 py-0.5 rounded bg-green-200 text-green-700 font-medium">
+          <span className={cn(
+            "text-[10px] px-1.5 py-0.5 rounded font-medium",
+            isPreviewMode 
+              ? "bg-blue-200 text-blue-700" 
+              : "bg-green-200 text-green-700"
+          )}>
             {fileCount} file{fileCount !== 1 ? "s" : ""}
           </span>
         </div>
-        <HMRStatusBadge status={status} />
+        <div className="flex items-center gap-2">
+          {/* CSS Preview Toggle (only in preview mode) */}
+          {isPreviewMode && (
+            <button
+              onClick={toggleCssPreview}
+              className={cn(
+                "flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded transition-colors",
+                cssPreviewEnabled
+                  ? "bg-blue-200 text-blue-700"
+                  : "bg-gray-200 text-gray-500"
+              )}
+              title={cssPreviewEnabled ? "Hide CSS preview" : "Show CSS preview"}
+            >
+              {cssPreviewEnabled ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
+              CSS
+            </button>
+          )}
+          <HMRStatusBadge status={status} />
+        </div>
       </div>
 
-      {/* Info Banner - show different message for stale sessions */}
+      {/* Info Banner - different messages for preview vs applied vs stale */}
       {isStaleSession ? (
         <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" />
@@ -153,6 +351,14 @@ export function ApplyFirstPreview({
             Use &quot;Force Clear&quot; to dismiss this panel.
           </span>
         </div>
+      ) : isPreviewMode ? (
+        <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>Review the changes below.</strong> Click Accept to apply them to your files,
+            or Reject to discard.
+          </span>
+        </div>
       ) : (
         <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" />
@@ -175,43 +381,47 @@ export function ApplyFirstPreview({
         ))}
       </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>
+      {/* Warning about navigation - only show for applied mode */}
+      {!isPreviewMode && (
+        <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 - hide for stale sessions */}
+        {/* Accept/Apply Button - behavior depends on mode */}
         {!isStaleSession && (
           <button
-            onClick={onAccept}
+            onClick={isPreviewMode && onApplyPreview ? onApplyPreview : 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",
+              isPreviewMode 
+                ? "bg-blue-600 text-white hover:bg-blue-700"
+                : "bg-green-600 text-white hover:bg-green-700",
               "disabled:opacity-50 disabled:cursor-not-allowed"
             )}
           >
-            {status === "accepting" ? (
+            {status === "accepting" || status === "applying" ? (
               <>
                 <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                Accepting...
+                {isPreviewMode ? "Applying..." : "Accepting..."}
               </>
             ) : (
               <>
                 <Check className="h-3.5 w-3.5" />
-                Keep Changes
+                {isPreviewMode ? "Accept & Apply" : "Keep Changes"}
               </>
             )}
           </button>
         )}
 
-        {/* Revert Button */}
+        {/* Reject/Revert Button */}
         <button
           onClick={onRevert}
           disabled={isLoading}
@@ -225,12 +435,12 @@ export function ApplyFirstPreview({
           {status === "reverting" ? (
             <>
               <Loader2 className="h-3.5 w-3.5 animate-spin" />
-              Reverting...
+              {isPreviewMode ? "Discarding..." : "Reverting..."}
             </>
           ) : (
             <>
-              <Undo className="h-3.5 w-3.5" />
-              Revert
+              <X className="h-3.5 w-3.5" />
+              {isPreviewMode ? "Reject" : "Revert"}
             </>
           )}
         </button>
@@ -255,7 +465,7 @@ export function ApplyFirstPreview({
 
       {/* Session Info (for debugging) */}
       <div className="text-[10px] text-gray-400 font-mono">
-        Session: {session.sessionId} | Applied: {new Date(session.appliedAt).toLocaleTimeString()}
+        {isPreviewMode ? "Preview" : "Session"}: {session.sessionId} | {isPreviewMode ? "Generated" : "Applied"}: {new Date(session.appliedAt).toLocaleTimeString()}
       </div>
     </div>
   );

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

@@ -144,6 +144,7 @@ export function ChatInterface({
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
+          // Apply-First: write files immediately so HMR shows changes
           action: useApplyFirst ? "apply" : "edit",
           screenshot,
           pageRoute: window.location.pathname,
@@ -176,7 +177,7 @@ export function ChatInterface({
 
       if (data.success && data.modifications) {
         if (useApplyFirst && onApplyFirstComplete) {
-          // Apply-First mode: files are already written
+          // Apply-First mode: files are already written, user can see changes via HMR
           console.log("[Apply-First] Calling onApplyFirstComplete with:", {
             sessionId: data.sessionId,
             modifications: data.modifications.map((m: { filePath: string }) => m.filePath),

package/dist/assets/dev-tools/panels/ComponentsPanel.tsx

@@ -50,13 +50,14 @@ export interface ComponentsPanelProps {
   visionPendingEdit?: VisionPendingEdit | null;
   onSaveVisionEdit?: () => void;
   onClearVisionPendingEdit?: () => void;
-  // Apply-First Mode props
+  // Apply-First Mode props (now Preview-First for Cursor-style flow)
   applyFirstSession?: ApplyFirstSession | null;
   applyFirstStatus?: ApplyFirstStatus;
   onApplyFirstComplete?: (session: ApplyFirstSession) => void;
   onApplyFirstAccept?: () => void;
   onApplyFirstRevert?: () => void;
   onApplyFirstForceClear?: () => void;
+  onApplyPreview?: () => void; // Apply previewed modifications to files
 }
 
 export function ComponentsPanel({ 
@@ -97,6 +98,7 @@ export function ComponentsPanel({
   onApplyFirstAccept,
   onApplyFirstRevert,
   onApplyFirstForceClear,
+  onApplyPreview,
 }: ComponentsPanelProps) {
   // Auto-activate inspector when entering this tab
   useEffect(() => {
@@ -573,7 +575,7 @@ export function ComponentsPanel({
               />
             )}
 
-            {/* Apply-First Mode Preview - NEW: Changes already applied */}
+            {/* Preview-First Mode - Shows diff, user accepts/rejects before applying */}
             {applyFirstSession && onApplyFirstAccept && onApplyFirstRevert && (
               <ApplyFirstPreview
                 session={applyFirstSession}
@@ -581,6 +583,7 @@ export function ComponentsPanel({
                 onAccept={onApplyFirstAccept}
                 onRevert={onApplyFirstRevert}
                 onForceClear={onApplyFirstForceClear}
+                onApplyPreview={onApplyPreview}
               />
             )}
 

package/dist/assets/dev-tools/types.ts

@@ -255,28 +255,31 @@ export interface VisionPendingEdit {
   explanation: string;
 }
 
-// ---- Apply-First Mode Types (Cursor-style instant preview) ----
+// ---- Preview-First Mode Types (Cursor-style) ----
+// Flow: LLM generates patches -> Show diff preview -> User accepts/rejects -> Apply to files
 
 export interface ApplyFirstSession {
   sessionId: string;
   modifications: VisionFileModification[];
   appliedAt: number;
-  status: 'applied' | 'accepted' | 'reverted';
+  status: 'preview' | 'applied' | 'accepted' | 'reverted';
   backupPaths: string[];
+  isPreview?: boolean; // True if changes are not yet written to disk
 }
 
 export type ApplyFirstStatus =
   | 'idle'           // No active session
   | 'generating'     // AI is generating changes
+  | 'previewing'     // User is reviewing proposed changes (not yet applied)
   | 'applying'       // Writing files to disk
   | 'waiting-hmr'    // Waiting for HMR to show changes
-  | 'reviewing'      // User is reviewing actual changes
+  | 'reviewing'      // User is reviewing actual changes (files written)
   | 'accepting'      // User clicked accept, cleaning up backups
   | 'reverting'      // User clicked revert, restoring backups
   | 'error';         // Something went wrong
 
 export interface ApplyFirstRequest {
-  action: "apply" | "accept" | "revert";
+  action: "apply" | "preview" | "accept" | "revert";
   sessionId?: string;
   screenshot?: string;
   pageRoute?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.57",
+  "version": "1.3.59",
   "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",