sonance-brand-mcp 1.3.111 → 1.3.113

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

@@ -1,34 +1,206 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import {
   ChevronDown,
   ChevronRight,
   Check,
   RotateCcw,
   FileCode,
-  Clock,
   CheckCircle,
   XCircle,
+  Loader2,
+  AlertTriangle,
+  Info,
+  RefreshCw,
+  Plus,
+  Minus,
+  Code,
 } from "lucide-react";
 import { cn } from "../../../lib/utils";
-import { ChatMessageAction, ChatFileChange } from "../types";
+import { ChatMessageAction, ApplyFirstStatus } from "../types";
 
 export interface InlineDiffPreviewProps {
   action: ChatMessageAction;
   onAccept?: () => void;
   onRevert?: () => void;
+  // Live status from parent (for HMR indicator, loading states)
+  liveStatus?: ApplyFirstStatus;
+  isProcessing?: boolean;
+}
+
+// Helper to refresh the page to see component changes
+function handleRefreshPage() {
+  // Session is already persisted to localStorage, so it will survive the reload
+  window.location.reload();
+}
+
+/**
+ * Extract meaningful changes from a diff string
+ * Instead of showing full lines, extract what was actually modified
+ */
+interface ChangeSummary {
+  type: 'added' | 'removed' | 'modified';
+  element?: string;  // e.g., "Card", "Button"
+  change: string;    // e.g., "rounded-none", "bg-blue-500"
+  fullLine?: string; // Original full line for tooltip
+}
+
+function extractChangeSummary(diff: string): ChangeSummary[] {
+  const lines = diff.split('\n');
+  const changes: ChangeSummary[] = [];
+  
+  // Group consecutive - and + lines for comparison
+  const removedLines: string[] = [];
+  const addedLines: string[] = [];
+  
+  for (const line of lines) {
+    if (line.startsWith('-') && !line.startsWith('---')) {
+      removedLines.push(line.substring(1).trim());
+    } else if (line.startsWith('+') && !line.startsWith('+++')) {
+      addedLines.push(line.substring(1).trim());
+    }
+  }
+  
+  // If we have both removed and added lines, find the differences
+  if (removedLines.length > 0 && addedLines.length > 0) {
+    for (let i = 0; i < Math.max(removedLines.length, addedLines.length); i++) {
+      const removed = removedLines[i] || '';
+      const added = addedLines[i] || '';
+      
+      if (removed && added) {
+        // Find what changed between the lines
+        const diff = findLineDifference(removed, added);
+        if (diff) {
+          changes.push({
+            type: 'modified',
+            element: diff.element,
+            change: diff.change,
+            fullLine: added
+          });
+        }
+      } else if (added && !removed) {
+        changes.push({
+          type: 'added',
+          change: truncateChange(added),
+          fullLine: added
+        });
+      } else if (removed && !added) {
+        changes.push({
+          type: 'removed',
+          change: truncateChange(removed),
+          fullLine: removed
+        });
+      }
+    }
+  } else if (addedLines.length > 0) {
+    // Only additions
+    for (const line of addedLines) {
+      changes.push({
+        type: 'added',
+        change: truncateChange(line),
+        fullLine: line
+      });
+    }
+  } else if (removedLines.length > 0) {
+    // Only removals
+    for (const line of removedLines) {
+      changes.push({
+        type: 'removed',
+        change: truncateChange(line),
+        fullLine: line
+      });
+    }
+  }
+  
+  return changes;
+}
+
+/**
+ * Find the actual difference between two similar lines
+ */
+function findLineDifference(removed: string, added: string): { element?: string; change: string } | null {
+  // Try to find className differences
+  const classNameRegex = /className=["']([^"']+)["']/;
+  const removedClass = removed.match(classNameRegex);
+  const addedClass = added.match(classNameRegex);
+  
+  if (removedClass && addedClass) {
+    const removedClasses = new Set(removedClass[1].split(/\s+/));
+    const addedClasses = new Set(addedClass[1].split(/\s+/));
+    
+    // Find added classes
+    const newClasses = [...addedClasses].filter(c => !removedClasses.has(c));
+    // Find removed classes
+    const deletedClasses = [...removedClasses].filter(c => !addedClasses.has(c));
+    
+    if (newClasses.length > 0 || deletedClasses.length > 0) {
+      // Try to extract element name (e.g., <Card, <Button)
+      const elementMatch = added.match(/<(\w+)/);
+      const element = elementMatch ? elementMatch[1] : undefined;
+      
+      const changes: string[] = [];
+      if (newClasses.length > 0) {
+        changes.push(`+${newClasses.join(' ')}`);
+      }
+      if (deletedClasses.length > 0) {
+        changes.push(`-${deletedClasses.join(' ')}`);
+      }
+      
+      return { element, change: changes.join(', ') };
+    }
+  }
+  
+  // Try to find text content differences
+  const textRegex = />([^<]+)</;
+  const removedText = removed.match(textRegex);
+  const addedText = added.match(textRegex);
+  
+  if (removedText && addedText && removedText[1] !== addedText[1]) {
+    const elementMatch = added.match(/<(\w+)/);
+    return {
+      element: elementMatch ? elementMatch[1] : undefined,
+      change: `"${addedText[1].substring(0, 30)}${addedText[1].length > 30 ? '...' : ''}"`
+    };
+  }
+  
+  // Generic difference - show a summary
+  if (removed !== added) {
+    const elementMatch = added.match(/<(\w+)/);
+    return {
+      element: elementMatch ? elementMatch[1] : undefined,
+      change: 'modified'
+    };
+  }
+  
+  return null;
+}
+
+/**
+ * Truncate a change for display
+ */
+function truncateChange(line: string): string {
+  // Try to extract just the meaningful part
+  const elementMatch = line.match(/<(\w+)/);
+  if (elementMatch) {
+    return `<${elementMatch[1]}...>`;
+  }
+  return line.length > 40 ? line.substring(0, 40) + '...' : line;
 }
 
 export function InlineDiffPreview({
   action,
   onAccept,
   onRevert,
+  liveStatus,
+  isProcessing = false,
 }: InlineDiffPreviewProps) {
   const [expandedFiles, setExpandedFiles] = useState<Set<string>>(
     // Expand first file by default
     new Set(action.files?.slice(0, 1).map((f) => f.path) || [])
   );
+  // Track which files show full diff vs summary
+  const [showFullDiff, setShowFullDiff] = useState<Set<string>>(new Set());
 
   const toggleFile = (path: string) => {
     setExpandedFiles((prev) => {
@@ -42,10 +214,38 @@ export function InlineDiffPreview({
     });
   };
 
+  const toggleFullDiff = (path: string) => {
+    setShowFullDiff((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
+
+  // Pre-compute change summaries for all files
+  const fileSummaries = useMemo(() => {
+    const summaries: Record<string, ChangeSummary[]> = {};
+    for (const file of action.files || []) {
+      if (file.diff) {
+        summaries[file.path] = extractChangeSummary(file.diff);
+      }
+    }
+    return summaries;
+  }, [action.files]);
+
+  // Derive loading state from liveStatus or isProcessing
+  const isLoading = isProcessing || liveStatus === "accepting" || liveStatus === "reverting";
+  const isWaitingHMR = liveStatus === "waiting-hmr";
+  const isLive = liveStatus === "reviewing" || action.status === "pending";
+
   const getStatusColor = () => {
     switch (action.status) {
       case "pending":
-        return "border-amber-300 dark:border-amber-600 bg-amber-50 dark:bg-amber-900/20";
+        return "border-green-300 dark:border-green-600 bg-green-50 dark:bg-green-900/20";
       case "accepted":
         return "border-green-300 dark:border-green-600 bg-green-50 dark:bg-green-900/20";
       case "reverted":
@@ -58,12 +258,22 @@ export function InlineDiffPreview({
   };
 
   const getStatusBadge = () => {
+    // Show HMR status first if applicable
+    if (isWaitingHMR) {
+      return (
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-400 rounded-full">
+          <Loader2 className="h-3 w-3 animate-spin" />
+          Refreshing...
+        </span>
+      );
+    }
+
     switch (action.status) {
       case "pending":
         return (
-          <span className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-400 rounded-full">
-            <Clock className="h-3 w-3" />
-            Pending Review
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-400 rounded-full">
+            <Check className="h-3 w-3" />
+            Changes Live
           </span>
         );
       case "accepted":
@@ -114,7 +324,7 @@ export function InlineDiffPreview({
 
           return (
             <div key={i} className={cn("px-2 py-0.5", bgClass)}>
-              <span className={lineClass}>{line}</span>
+              <span id="inline-diff-preview-span-line" className={lineClass}>{line}</span>
             </div>
           );
         })}
@@ -133,33 +343,34 @@ export function InlineDiffPreview({
           </span>
           {getStatusBadge()}
         </div>
+      </div>
 
-        {/* Action Buttons - only show for pending */}
-        {action.status === "pending" && (
-          <div className="flex items-center gap-2">
-            <button
-              onClick={onRevert}
-              className="inline-flex items-center gap-1 px-2.5 py-1 text-[11px] font-medium text-foreground-secondary bg-background border border-border rounded-md hover:bg-secondary transition-colors"
-            >
-              <RotateCcw className="h-3 w-3" />
-              Revert
-            </button>
-            <button
-              onClick={onAccept}
-              className="inline-flex items-center gap-1 px-2.5 py-1 text-[11px] font-medium text-white bg-green-600 dark:bg-green-700 rounded-md hover:bg-green-700 dark:hover:bg-green-600 transition-colors"
-            >
-              <Check className="h-3 w-3" />
-              Accept
-            </button>
+      {/* Info Banner - Show when changes are live */}
+      {action.status === "pending" && (
+        <div className="flex items-start justify-between gap-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/20 border-b border-inherit">
+          <div className="flex items-start gap-2">
+            <Info className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
+            <span className="text-[11px] text-blue-700 dark:text-blue-300">
+              <strong>Changes saved!</strong> If you don&apos;t see them, click Refresh.
+            </span>
           </div>
-        )}
-      </div>
+          <button
+            onClick={handleRefreshPage}
+            className="flex items-center gap-1 px-2 py-1 text-[10px] font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800/50 hover:bg-blue-200 dark:hover:bg-blue-700/50 rounded transition-colors flex-shrink-0"
+          >
+            <RefreshCw className="h-3 w-3" />
+            Refresh
+          </button>
+        </div>
+      )}
 
       {/* File List */}
       <div className="divide-y divide-inherit">
         {action.files?.map((file) => {
           const isExpanded = expandedFiles.has(file.path);
+          const isShowingFullDiff = showFullDiff.has(file.path);
           const fileName = file.path.split("/").pop() || file.path;
+          const summary = fileSummaries[file.path] || [];
 
           return (
             <div key={file.path}>
@@ -176,15 +387,77 @@ export function InlineDiffPreview({
                 <span className="text-[11px] font-mono text-foreground truncate">
                   {fileName}
                 </span>
-                <span className="text-[10px] text-foreground-muted truncate">
+                <span className="text-[10px] text-foreground-muted truncate flex-1">
                   {file.path}
                 </span>
               </button>
 
-              {/* Diff Content */}
-              {isExpanded && file.diff && (
-                <div className="bg-background border-t border-inherit max-h-[200px] overflow-y-auto">
-                  {renderDiff(file.diff)}
+              {/* Change Summary (default view) */}
+              {isExpanded && file.diff && !isShowingFullDiff && (
+                <div className="bg-background border-t border-inherit px-3 py-2 space-y-1">
+                  {summary.length > 0 ? (
+                    <>
+                      {summary.map((change, i) => (
+                        <div
+                          key={i}
+                          className="flex items-center gap-2 text-[11px]"
+                          title={change.fullLine}
+                        >
+                          {change.type === 'added' || change.type === 'modified' ? (
+                            <Plus className="h-3 w-3 text-green-600 dark:text-green-400 flex-shrink-0" />
+                          ) : (
+                            <Minus className="h-3 w-3 text-red-600 dark:text-red-400 flex-shrink-0" />
+                          )}
+                          {change.element && (
+                            <span className="font-mono text-blue-600 dark:text-blue-400 flex-shrink-0">
+                              {change.element}:
+                            </span>
+                          )}
+                          <span className={cn(
+                            "font-mono",
+                            change.type === 'removed' 
+                              ? "text-red-600 dark:text-red-400" 
+                              : "text-green-600 dark:text-green-400"
+                          )}>
+                            {change.change}
+                          </span>
+                        </div>
+                      ))}
+                      {/* Toggle to show full diff */}
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleFullDiff(file.path);
+                        }}
+                        className="flex items-center gap-1 mt-2 text-[10px] text-foreground-muted hover:text-foreground transition-colors"
+                      >
+                        <Code className="h-3 w-3" />
+                        Show full diff
+                      </button>
+                    </>
+                  ) : (
+                    <span className="text-[11px] text-foreground-muted">No significant changes detected</span>
+                  )}
+                </div>
+              )}
+
+              {/* Full Diff Content (toggle view) */}
+              {isExpanded && file.diff && isShowingFullDiff && (
+                <div className="bg-background border-t border-inherit">
+                  <div className="overflow-x-auto">
+                    {renderDiff(file.diff)}
+                  </div>
+                  {/* Toggle back to summary */}
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleFullDiff(file.path);
+                    }}
+                    className="flex items-center gap-1 px-3 py-2 text-[10px] text-foreground-muted hover:text-foreground transition-colors border-t border-inherit w-full"
+                  >
+                    <ChevronRight className="h-3 w-3" />
+                    Show summary
+                  </button>
                 </div>
               )}
             </div>
@@ -192,10 +465,61 @@ export function InlineDiffPreview({
         })}
       </div>
 
-      {/* Explanation */}
-      {action.explanation && (
-        <div className="px-3 py-2 border-t border-inherit bg-background/30">
-          <p className="text-[11px] text-foreground-secondary italic">{action.explanation}</p>
+      {/* Warning about navigation - only show for pending */}
+      {action.status === "pending" && (
+        <div className="flex items-start gap-2 px-3 py-2 bg-amber-50 dark:bg-amber-900/20 border-t border-inherit">
+          <AlertTriangle className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
+          <span className="text-[11px] text-amber-700 dark:text-amber-300">
+            Navigating away will automatically revert changes. Make sure to accept or revert first.
+          </span>
+        </div>
+      )}
+
+      {/* Action Buttons - only show for pending */}
+      {action.status === "pending" && (
+        <div className="flex gap-2 px-3 py-2 border-t border-inherit bg-background/50">
+          <button
+            onClick={onAccept}
+            disabled={isLoading}
+            className={cn(
+              "flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 text-[11px] font-medium rounded-md transition-colors",
+              "bg-green-600 dark:bg-green-700 text-white hover:bg-green-700 dark:hover:bg-green-600",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            )}
+          >
+            {liveStatus === "accepting" ? (
+              <>
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Accepting...
+              </>
+            ) : (
+              <>
+                <Check className="h-3.5 w-3.5" />
+                Keep Changes
+              </>
+            )}
+          </button>
+          <button
+            onClick={onRevert}
+            disabled={isLoading}
+            className={cn(
+              "flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 text-[11px] font-medium rounded-md transition-colors",
+              "bg-background border border-border text-foreground-secondary hover:bg-secondary",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            )}
+          >
+            {liveStatus === "reverting" ? (
+              <>
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Reverting...
+              </>
+            ) : (
+              <>
+                <RotateCcw className="h-3.5 w-3.5" />
+                Revert
+              </>
+            )}
+          </button>
         </div>
       )}
     </div>

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

@@ -312,26 +312,26 @@ export function InspectorOverlay({
               {isChangedElement ? (
                 <>
                   <Check className="h-3 w-3" />
-                  <span>Changed: {el.name}</span>
-                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
+                  <span id="span-changed-elname">Changed: {el.name}</span>
+                  {el.variantId && <span id="span-elvariantidsubstring" className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
                 </>
               ) : previewMode && isMatchingType ? (
                 <>
                   <Sparkles className="h-3 w-3" />
-                  <span>Preview: {el.name}</span>
-                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
+                  <span id="span-preview-elname">Preview: {el.name}</span>
+                  {el.variantId && <span id="span-elvariantidsubstring" className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
                 </>
               ) : visionMode && isVisionFocused ? (
                 <>
                   <Eye className="h-3 w-3" />
-                  <span>Focused: {el.name}</span>
-                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
+                  <span id="span-focused-elname">Focused: {el.name}</span>
+                  {el.variantId && <span id="span-elvariantidsubstring" className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
                 </>
               ) : visionMode ? (
                 <>
                   <Eye className="h-3 w-3 opacity-60" />
                   {el.name}
-                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px] border-l border-white/30 pl-1">#{el.variantId.substring(0, 4)}</span>}
+                  {el.variantId && <span id="span-elvariantidsubstring" className="ml-1 opacity-80 font-mono text-[9px] border-l border-white/30 pl-1">#{el.variantId.substring(0, 4)}</span>}
                 </>
               ) : (
                 <>
@@ -339,8 +339,8 @@ export function InspectorOverlay({
                   {el.type === "component" && <Box className="h-3 w-3" />}
                   {el.type === "text" && <Type className="h-3 w-3" />}
                   {el.name}
-                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px] border-l border-white/30 pl-1">#{el.variantId.substring(0, 4)}</span>}
-                  {isSelected && <span className="ml-1">✓</span>}
+                  {el.variantId && <span id="span-elvariantidsubstring" className="ml-1 opacity-80 font-mono text-[9px] border-l border-white/30 pl-1">#{el.variantId.substring(0, 4)}</span>}
+                  {isSelected && <span id="span-title" className="ml-1">✓</span>}
                 </>
               )}
           </div>