sonance-brand-mcp 1.3.110 → 1.3.112

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

@@ -1,15 +1,18 @@
 "use client";
 
 import React, { useState, useMemo, useCallback, useEffect } from "react";
-import { Box, X, RotateCcw } from "lucide-react";
+import { Box, X, RotateCcw, MousePointer, Sparkles, Info, MessageCircle } from "lucide-react";
+import { useTheme } from "next-themes";
 import { cn } from "../../../lib/utils";
-import { DetectedElement, AnalysisResult, ComponentStyle, PendingEdit, AIEditResult, ComponentStyleOverride, VisionFocusedElement, VisionPendingEdit, ApplyFirstSession, ApplyFirstStatus } from "../types";
+import { DetectedElement, AnalysisResult, ComponentStyle, PendingEdit, AIEditResult, ComponentStyleOverride, VisionFocusedElement, VisionPendingEdit, ApplyFirstSession, ApplyFirstStatus, ElementFilters, ImageOverride, PublicImageAsset, LogoAsset } from "../types";
 import { COMPONENT_CONFIG_MAP, getVisibleSections } from "../constants";
 import { componentSnippets, ThemeConfig } from "../../../lib/brand-system";
 import { ChatInterface } from "../components/ChatInterface";
 import { DiffPreview } from "../components/DiffPreview";
 import { VisionDiffPreview } from "../components/VisionDiffPreview";
 import { ApplyFirstPreview } from "../components/ApplyFirstPreview";
+import { PropertiesPanel, PropertyEdits } from "../components/PropertiesPanel";
+import { useElementFromCoordinates } from "../hooks/useComputedStyles";
 
 type ComponentsViewMode = "visual" | "inspector";
 
@@ -54,10 +57,26 @@ export interface ComponentsPanelProps {
   applyFirstSession?: ApplyFirstSession | null;
   applyFirstStatus?: ApplyFirstStatus;
   onApplyFirstComplete?: (session: ApplyFirstSession) => void;
-  onApplyFirstAccept?: () => void;
-  onApplyFirstRevert?: () => void;
+  onApplyFirstAccept?: () => Promise<void>;
+  onApplyFirstRevert?: () => Promise<void>;
   onApplyFirstForceClear?: () => void;
   onApplyPreview?: () => void; // Apply previewed modifications to files
+  // Unified element filters (new)
+  elementFilters?: ElementFilters;
+  selectedLogoId?: string | null;
+  onSelectLogo?: (logoId: string | null) => void;
+  selectedTextId?: string | null;
+  onSelectText?: (textId: string | null) => void;
+  // Image editing props
+  imageOverrides?: Record<string, ImageOverride>;
+  onImageOverrideChange?: (imageId: string, override: ImageOverride) => void;
+  onSaveImageChanges?: (imageId: string) => void;
+  isImageSaving?: boolean;
+  publicImages?: PublicImageAsset[];
+  publicImagesByFolder?: Record<string, PublicImageAsset[]>;
+  logoAssets?: LogoAsset[];
+  logoAssetsByBrand?: Record<string, LogoAsset[]>;
+  onImageUpload?: (file: File) => Promise<string | null>;
 }
 
 export function ComponentsPanel({ 
@@ -99,7 +118,27 @@ export function ComponentsPanel({
   onApplyFirstRevert,
   onApplyFirstForceClear,
   onApplyPreview,
+  // Unified element filters
+  elementFilters,
+  selectedLogoId,
+  onSelectLogo,
+  selectedTextId,
+  onSelectText,
+  // Image editing
+  imageOverrides = {},
+  onImageOverrideChange,
+  onSaveImageChanges,
+  isImageSaving = false,
+  publicImages = [],
+  publicImagesByFolder = {},
+  logoAssets = [],
+  logoAssetsByBrand = {},
+  onImageUpload,
 }: ComponentsPanelProps) {
+  // Theme detection for mode-specific color changes
+  const { resolvedTheme } = useTheme();
+  const currentTheme = resolvedTheme || "light";
+
   // Auto-activate inspector when entering this tab
   useEffect(() => {
     if (!inspectorEnabled && selectedComponentType === "all") {
@@ -404,45 +443,261 @@ export function ComponentsPanel({
     }
   };
 
+  // Handle property changes from PropertiesPanel (AI-assisted save)
+  const handlePropertySave = useCallback(async (edits: PropertyEdits, element: VisionFocusedElement) => {
+    // Build a natural language description of the changes
+    const changeDescriptions: string[] = [];
+
+    // Text content change (put first as it's the most significant change)
+    if (edits.textContent) {
+      const truncated = edits.textContent.length > 50
+        ? `${edits.textContent.substring(0, 50)}...`
+        : edits.textContent;
+      changeDescriptions.push(`text content to "${truncated}"`);
+    }
+    if (edits.width) changeDescriptions.push(`width to ${edits.width}`);
+    if (edits.height) changeDescriptions.push(`height to ${edits.height}`);
+    if (edits.opacity) changeDescriptions.push(`opacity to ${edits.opacity}%`);
+    if (edits.borderRadius) changeDescriptions.push(`border-radius to ${edits.borderRadius}`);
+    if (edits.fontSize) changeDescriptions.push(`font-size to ${edits.fontSize}`);
+    if (edits.fontWeight) changeDescriptions.push(`font-weight to ${edits.fontWeight}`);
+    if (edits.lineHeight) changeDescriptions.push(`line-height to ${edits.lineHeight}`);
+    if (edits.letterSpacing) changeDescriptions.push(`letter-spacing to ${edits.letterSpacing}`);
+    if (edits.color) changeDescriptions.push(`text color to ${edits.color}`);
+    // Theme-specific color changes
+    if (edits.colorLight) changeDescriptions.push(`text color (light mode) to ${edits.colorLight}`);
+    if (edits.colorDark) changeDescriptions.push(`text color (dark mode) to ${edits.colorDark}`);
+    if (edits.backgroundColor) changeDescriptions.push(`background color to ${edits.backgroundColor}`);
+    if (edits.padding) changeDescriptions.push(`padding to ${edits.padding}`);
+    if (edits.margin) changeDescriptions.push(`margin to ${edits.margin}`);
+    if (edits.gap) changeDescriptions.push(`gap to ${edits.gap}`);
+
+    if (changeDescriptions.length === 0) return;
+
+    // Detect if this is a text-only change (only textContent is set, no style properties)
+    const editKeys = Object.keys(edits).filter(k => edits[k as keyof PropertyEdits] !== undefined);
+    const isTextOnlyChange = editKeys.length === 1 && editKeys[0] === 'textContent';
+
+    const prompt = `Change the ${changeDescriptions.join(", ")} for this ${element.name} element.`;
+
+    try {
+      // Use "apply" action so changes are written immediately with backups
+      // This allows HMR to show the changes, then user can accept/revert
+      const response = await fetch("/api/sonance-vision-apply", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "apply",
+          focusedElements: [element],
+          userPrompt: prompt,
+          propertyEdits: edits,
+          pageRoute: window.location.pathname,
+          currentTheme: currentTheme, // Include theme for mode-specific color changes
+        }),
+      });
+
+      const result = await response.json();
+
+      if (result.success && result.modifications && result.modifications.length > 0) {
+        if (isTextOnlyChange) {
+          // For text-only changes, auto-accept immediately (user already clicked "Save Changes")
+          // This deletes the backup - no need to ask again
+          try {
+            await fetch("/api/sonance-vision-apply", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                action: "accept",
+                sessionId: result.sessionId,
+              }),
+            });
+            console.log("[Text Edit] Auto-accepted text change, backup deleted");
+          } catch (acceptError) {
+            console.warn("[Text Edit] Failed to auto-accept:", acceptError);
+          }
+          // Don't trigger applyFirstSession - change is complete
+        } else if (onApplyFirstComplete) {
+          // For component/style changes, trigger the apply-first flow for review
+          onApplyFirstComplete({
+            sessionId: result.sessionId,
+            modifications: result.modifications,
+            appliedAt: Date.now(),
+            status: "applied",
+            backupPaths: result.backupPaths || [],
+            isPreview: false,
+            isTextOnlyChange: false,
+          });
+        }
+      } else if (!result.success) {
+        console.error("Failed to save property changes:", result.error);
+      } else if (result.modifications?.length === 0) {
+        console.log("No changes needed or AI could not locate the element");
+      }
+    } catch (error) {
+      console.error("Failed to save property changes:", error);
+    }
+  }, [onApplyFirstComplete, currentTheme]);
+
+  // Get the first focused element for properties panel
+  const primaryFocusedElement = visionFocusedElements.length > 0 ? visionFocusedElements[0] : null;
+  // Pass full element to hook for multi-strategy element finding (robust after HMR)
+  const computedStyles = useElementFromCoordinates(primaryFocusedElement);
+
+  // Determine if we should show the properties panel (Vision mode with focused elements)
+  const showPropertiesPanel = visionMode && visionFocusedElements.length > 0;
+
+  // Panel tab state - "details" or "chat"
+  // Default to "chat" for AI-first workflow
+  type PanelTab = "details" | "chat";
+  const [panelTab, setPanelTab] = useState<PanelTab>("details");
+
+  // NOTE: Removed auto-switch to details when element is focused
+  // Users want to stay on the AI chat tab when clicking elements
+  // The element info is shown in the chat context anyway
+
   return (
-    <div className="space-y-4">
-      {/* Selected Component State */}
-      {selectedComponentType !== "all" && (
-        <>
-          {/* Selected Component Header */}
-          <div className="p-3 rounded border border-[#00A3E1] bg-[#00A3E1]/5">
+    <div className="flex flex-col h-full">
+      {/* ===== TAB BAR - Dark theme matching the app ===== */}
+      <div className="flex items-center gap-1 px-3 py-1.5 bg-[#1a1d21] border-b border-white/10 flex-shrink-0">
+        <button
+          onClick={() => setPanelTab("details")}
+          className={cn(
+            "relative flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium transition-all duration-150 rounded",
+            panelTab === "details"
+              ? "text-white after:absolute after:bottom-0 after:left-1 after:right-1 after:h-[2px] after:bg-[#00A3E1] after:rounded-full"
+              : "text-gray-400 hover:text-white hover:bg-white/5"
+          )}
+        >
+          <Info className="h-3 w-3" />
+          <span id="span-details">Details</span>
+        </button>
+        <button
+          onClick={() => setPanelTab("chat")}
+          className={cn(
+            "relative flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium transition-all duration-150 rounded",
+            panelTab === "chat"
+              ? "text-white after:absolute after:bottom-0 after:left-1 after:right-1 after:h-[2px] after:bg-[#00A3E1] after:rounded-full"
+              : "text-gray-400 hover:text-white hover:bg-white/5"
+          )}
+        >
+          <MessageCircle className="h-3 w-3" />
+          <span id="span-ai-chat">AI Chat</span>
+          {visionMode && visionFocusedElements.length > 0 && (
+            <span id="span-visionfocusedelement" className="ml-0.5 min-w-[16px] h-4 px-1 flex items-center justify-center text-[9px] font-semibold bg-[#00A3E1]/20 text-[#00A3E1] rounded-full">
+              {visionFocusedElements.length}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== TAB CONTENT ===== */}
+      <div className="flex-1 overflow-y-auto min-h-0 bg-background">
+        {/* DETAILS TAB */}
+        {panelTab === "details" && (
+          <>
+            {/* Vision Mode: Properties Inspector */}
+            {showPropertiesPanel && (
+              <div className="border-b border-border">
+                <PropertiesPanel
+                  element={primaryFocusedElement}
+                  styles={computedStyles}
+                  onSaveChanges={handlePropertySave}
+                  textChangeSession={applyFirstSession?.isTextOnlyChange ? applyFirstSession : null}
+                  onTextChangeAccept={onApplyFirstAccept}
+                  onTextChangeRevert={onApplyFirstRevert}
+                  imageOverride={(() => {
+                    // Use elementId, variantId, or generate from name for image identification
+                    const imageId = primaryFocusedElement?.elementId || primaryFocusedElement?.variantId || primaryFocusedElement?.name;
+                    return imageId ? imageOverrides[imageId] : undefined;
+                  })()}
+                  onImageOverrideChange={onImageOverrideChange 
+                    ? (override) => {
+                        // Use elementId, variantId, or generate from name for image identification
+                        const imageId = primaryFocusedElement?.elementId || primaryFocusedElement?.variantId || primaryFocusedElement?.name;
+                        if (imageId) {
+                          onImageOverrideChange(imageId, override);
+                        }
+                      }
+                    : undefined
+                  }
+                  onSaveImageChanges={onSaveImageChanges 
+                    ? () => {
+                        const imageId = primaryFocusedElement?.elementId || primaryFocusedElement?.variantId || primaryFocusedElement?.name;
+                        if (imageId) {
+                          onSaveImageChanges(imageId);
+                        }
+                      }
+                    : undefined
+                  }
+                  isImageSaving={isImageSaving}
+                  publicImages={publicImages}
+                  publicImagesByFolder={publicImagesByFolder}
+                  logoAssets={logoAssets}
+                  logoAssetsByBrand={logoAssetsByBrand}
+                  onImageUpload={onImageUpload}
+                />
+                {/* Multiple Selections Indicator */}
+                {visionFocusedElements.length > 1 && (
+                  <div className="px-2 py-1.5 bg-purple-50 dark:bg-purple-900/30 border-t border-purple-100 dark:border-purple-800">
+                    <p id="p-visionfocusedelement" className="text-[10px] text-purple-600 dark:text-purple-400 font-medium">
+                      +{visionFocusedElements.length - 1} more selected
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Empty State for Vision Mode */}
+            {visionMode && visionFocusedElements.length === 0 && (
+              <div className="flex flex-col items-center justify-center py-6 text-center px-3">
+                <div className="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/40 flex items-center justify-center mb-2">
+                  <MousePointer className="h-5 w-5 text-purple-500 dark:text-purple-400" />
+                </div>
+                <p id="p-vision-mode-active" className="text-[11px] font-medium text-foreground mb-1">
+                  Vision Mode Active
+                </p>
+                <p id="p-click-elements-on-th" className="text-[10px] text-foreground-secondary">
+                  Click elements on the page to inspect and select them for AI-powered editing.
+                </p>
+              </div>
+            )}
+
+        {/* Non-Vision Mode: Component Selection Interface */}
+        {!visionMode && selectedComponentType !== "all" && (
+          <div className="space-y-3 p-2">
+            {/* Selected Component Header - Compact */}
+            <div className="p-2 rounded border border-[#00A3E1] bg-[#00A3E1]/5">
             <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Box className="h-4 w-4 text-[#00A3E1]" />
+                <div className="flex items-center gap-1.5">
+                  <Box className="h-3.5 w-3.5 text-[#00A3E1]" />
                 <div className="flex flex-col">
-                  <span id="brand-panel-span-selectedcomponentnam" className="text-sm font-semibold text-gray-900">{selectedComponentName}</span>
+                    <span id="brand-panel-span-selectedcomponentnam" className="text-[11px] font-semibold text-foreground">{selectedComponentName}</span>
                   {selectedVariantId && (
-                    <span id="brand-panel-span-variant-selectedvari" className="text-[10px] text-gray-500 font-mono">
-                      Variant: {selectedVariantId.substring(0, 6)}
+                      <span id="brand-panel-span-variant-selectedvari" className="text-[9px] text-foreground-secondary font-mono">
+                        #{selectedVariantId.substring(0, 6)}
                     </span>
                   )}
                 </div>
               </div>
               <button
                 onClick={() => onSelectComponentType("all")}
-                className="text-xs text-gray-400 hover:text-gray-600"
+                  className="p-1 text-foreground-muted hover:text-foreground hover:bg-secondary rounded"
               >
-                <X className="h-4 w-4" />
+                  <X className="h-3.5 w-3.5" />
               </button>
             </div>
             
-            {/* Stats */}
-            <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
-              <span id="brand-panel-span"><strong className="text-gray-700">{pageCount}</strong> on this page</span>
+              {/* Stats - Compact */}
+              <div className="flex items-center gap-3 mt-1.5 text-[10px] text-foreground-secondary">
+                <span id="brand-panel-span"><strong className="text-foreground">{pageCount}</strong> on page</span>
               {appCount > 0 && (
-                <span id="brand-panel-span"><strong className="text-gray-700">{appCount}</strong> in entire app</span>
+                  <span id="brand-panel-span"><strong className="text-foreground">{appCount}</strong> in app</span>
               )}
             </div>
           </div>
 
-          {/* Variants List - show all unique variants */}
+            {/* Variants Grid - Compact */}
           {(() => {
-            // Get unique variants for this component type
             const variantMap = new Map<string, { count: number; variantId: string }>();
             pageInstances.forEach((el) => {
               if (el.variantId) {
@@ -459,32 +714,32 @@ export function ComponentsPanel({
             
             if (variants.length > 1) {
               return (
-                <div className="space-y-2">
+                  <div className="space-y-1.5">
                   <div className="flex items-center justify-between">
-                    <span className="text-xs font-medium text-gray-600">Variants ({variants.length})</span>
+                      <span id="span-variants" className="text-[10px] font-medium text-foreground-secondary">Variants</span>
                     {selectedVariantId && (
                       <button
                         onClick={() => onSelectVariant(null)}
-                        className="text-xs text-[#00A3E1] hover:underline"
+                          className="text-[10px] text-[#00A3E1] hover:underline"
                       >
-                        Clear selection
+                          Clear
                       </button>
                     )}
                   </div>
-                  <div className="grid grid-cols-2 gap-2">
+                    <div className="flex flex-wrap gap-1">
                     {variants.map(({ variantId, count }) => (
                       <button
                         key={variantId}
                         onClick={() => onSelectVariant(selectedVariantId === variantId ? null : variantId)}
                         className={cn(
-                          "p-2 rounded border text-left transition-colors",
+                            "px-1.5 py-1 rounded text-[9px] font-mono transition-colors",
                           selectedVariantId === variantId
-                            ? "border-[#00A3E1] bg-[#00A3E1]/10"
-                            : "border-gray-200 hover:border-gray-300 bg-white"
+                              ? "bg-[#00A3E1] text-white"
+                              : "bg-secondary text-foreground-secondary hover:bg-secondary-hover"
                         )}
                       >
-                        <span className="text-xs font-mono text-gray-700">#{variantId.substring(0, 6)}</span>
-                        <span className="text-[10px] text-gray-400 ml-1">({count})</span>
+                          #{variantId.substring(0, 4)}
+                          <span id="span-count" className="opacity-60 ml-0.5">({count})</span>
                       </button>
                     ))}
                   </div>
@@ -495,137 +750,135 @@ export function ComponentsPanel({
             return null;
           })()}
 
-          {/* No instances on page */}
+            {/* No instances warning */}
           {pageInstances.length === 0 && (
-            <div className="p-2 rounded border border-amber-200 bg-amber-50 text-center">
-              <span id="brand-panel-span-no-instances-on-this" className="text-xs text-amber-700">
-                No instances on this page. Navigate to a page with this component.
+              <div className="p-1.5 rounded border border-amber-200 bg-amber-50 text-center">
+                <span id="brand-panel-span-no-instances-on-this" className="text-[10px] text-amber-700">
+                  No instances on this page
               </span>
             </div>
           )}
 
-          {/* Edit Scope Toggle - only show when a variant is selected */}
+            {/* Edit Scope Toggle - Compact */}
           {selectedVariantId && (
-            <div className="flex items-center gap-2 p-2 bg-gray-50 rounded border border-gray-200">
-              <span className="text-xs text-gray-500">Apply changes to:</span>
-              <div className="flex gap-1 flex-1">
+              <div className="flex items-center gap-1 p-1.5 bg-secondary/50 rounded border border-border">
+                <span id="span-scope" className="text-[9px] text-foreground-secondary">Scope:</span>
+                <div className="flex gap-0.5 flex-1">
                 <button
                   onClick={() => setEditScope("component")}
                   className={cn(
-                    "flex-1 px-2 py-1.5 text-xs font-medium rounded transition-colors",
+                      "flex-1 px-1.5 py-1 text-[9px] font-medium rounded transition-colors",
                     editScope === "component"
                       ? "bg-[#00A3E1] text-white"
-                      : "bg-white text-gray-600 border border-gray-200 hover:bg-gray-100"
+                        : "text-foreground-secondary hover:bg-secondary"
                   )}
                 >
-                  All {selectedComponentName}s
+                    All
                 </button>
                 <button
                   onClick={() => setEditScope("variant")}
                   className={cn(
-                    "flex-1 px-2 py-1.5 text-xs font-medium rounded transition-colors",
+                      "flex-1 px-1.5 py-1 text-[9px] font-medium rounded transition-colors",
                     editScope === "variant"
                       ? "bg-[#00A3E1] text-white"
-                      : "bg-white text-gray-600 border border-gray-200 hover:bg-gray-100"
+                        : "text-foreground-secondary hover:bg-secondary"
                   )}
                 >
-                  This Variant
+                    Variant
                 </button>
               </div>
             </div>
           )}
+          </div>
+        )}
 
-        </>
-      )}
-
-      {/* How it works - only when no component selected */}
-      {selectedComponentType === "all" && (
-        <div className="bg-blue-50/50 rounded-lg p-3 border border-blue-100">
-          <h4 id="h4-how-it-works" className="text-xs font-semibold text-blue-900 mb-2 uppercase tracking-wide">How it works</h4>
-          <ol className="text-xs text-blue-800 space-y-1 list-decimal list-inside">
-            <li>Hover & click any element on the page to select it</li>
-            <li>Describe how you want to change it below</li>
-          </ol>
-        </div>
-      )}
-
-      {/* AI Component Editor */}
-      <div className="space-y-4 pt-2">
-            {/* Pending Edit Preview (single-file component edit) */}
+        {/* Non-Vision Mode: Empty State */}
+        {!visionMode && selectedComponentType === "all" && (
+          <div className="flex flex-col items-center justify-center py-6 text-center px-3">
+            <div className="w-10 h-10 rounded-full bg-secondary flex items-center justify-center mb-2">
+              <Box className="h-5 w-5 text-foreground-muted" />
+            </div>
+            <p id="p-select-a-component" className="text-[11px] font-medium text-foreground mb-1">
+              Select a Component
+            </p>
+            <p id="p-click-a-component-on" className="text-[10px] text-foreground-secondary">
+              Click a component on the page or enable Vision Mode for AI-powered editing.
+            </p>
+          </div>
+        )}
+          </>
+        )}
+
+        {/* AI CHAT TAB - Full Height Cursor-Style Interface */}
+        {panelTab === "chat" && (
+          <div className="flex flex-col h-full bg-background">
+            {/* Selected Element Indicator - Shows what's selected without leaving chat */}
+            {visionMode && visionFocusedElements.length > 0 && (
+              <div className="flex items-center gap-1.5 px-3 py-1.5 bg-background-secondary border-b border-border">
+                <MousePointer className="h-3 w-3 text-foreground-muted flex-shrink-0" />
+                <span className="text-[11px] font-medium text-foreground truncate">
+                  {primaryFocusedElement?.name || visionFocusedElements[0]?.type}
+                </span>
+                {visionFocusedElements.length > 1 && (
+                  <span className="text-[10px] text-foreground-muted flex-shrink-0">
+                    +{visionFocusedElements.length - 1}
+                  </span>
+                )}
+              </div>
+            )}
+            
+            {/* Chat Interface - Always visible with inline diffs */}
+            <ChatInterface
+              componentType={selectedComponentType}
+              componentName={selectedComponentName || selectedComponentType}
+              onEditComplete={handleAIEditComplete}
+              onSaveRequest={setPendingEdit}
+              pendingEdit={pendingEdit}
+              onClearPending={handleClearPendingEdit}
+              editScope={editScope}
+              variantId={selectedVariantId}
+              variantStyles={variantStyles}
+              visionMode={visionMode}
+              visionFocusedElements={visionFocusedElements}
+              onVisionEditComplete={onVisionEditComplete}
+              onApplyFirstComplete={onApplyFirstComplete}
+              applyFirstSession={applyFirstSession}
+              applyFirstStatus={applyFirstStatus}
+              onApplyFirstAccept={onApplyFirstAccept}
+              onApplyFirstRevert={onApplyFirstRevert}
+            />
+
+            {/* Legacy Diff Previews (fallback for non-inline mode) */}
             {pendingEdit && (
-              <DiffPreview
-                pendingEdit={pendingEdit}
-                componentType={selectedComponentType}
-                onSave={handleSaveAIEdit}
-                onCancel={handleClearPendingEdit}
-                onPreviewToggle={handlePreviewToggle}
-                isPreviewActive={isPreviewActive}
-                saveStatus={aiSaveStatus}
-                saveMessage={aiSaveMessage}
-                variantId={selectedVariantId}
-              />
+              <div className="border-t border-border p-2">
+                <DiffPreview
+                  pendingEdit={pendingEdit}
+                  componentType={selectedComponentType}
+                  onSave={handleSaveAIEdit}
+                  onCancel={handleClearPendingEdit}
+                  onPreviewToggle={handlePreviewToggle}
+                  isPreviewActive={isPreviewActive}
+                  saveStatus={aiSaveStatus}
+                  saveMessage={aiSaveMessage}
+                  variantId={selectedVariantId}
+                />
+              </div>
             )}
 
-            {/* Vision Mode Pending Edit Preview (multi-file) - OLD: CSS preview */}
             {visionPendingEdit && onSaveVisionEdit && onClearVisionPendingEdit && !applyFirstSession && (
-              <VisionDiffPreview
-                pendingEdit={visionPendingEdit}
-                onSave={onSaveVisionEdit}
-                onCancel={onClearVisionPendingEdit}
-              />
-            )}
-
-            {/* Preview-First Mode - Shows diff, user accepts/rejects before applying */}
-            {applyFirstSession && onApplyFirstAccept && onApplyFirstRevert && (
-              <ApplyFirstPreview
-                session={applyFirstSession}
-                status={applyFirstStatus}
-                onAccept={onApplyFirstAccept}
-                onRevert={onApplyFirstRevert}
-                onForceClear={onApplyFirstForceClear}
-                onApplyPreview={onApplyPreview}
-              />
-            )}
-
-            {/* AI Chat Interface - hide when any pending edit is present */}
-            {/* Apply-First mode: Files written immediately with backups for instant HMR preview
-                User sees structural + CSS changes live, then clicks Accept or Revert
-                Original files are always backed up and can be restored */}
-            {!pendingEdit && !visionPendingEdit && !applyFirstSession && (
-              <ChatInterface
-                componentType={selectedComponentType}
-                componentName={selectedComponentName || selectedComponentType}
-                onEditComplete={handleAIEditComplete}
-                onSaveRequest={setPendingEdit}
-                pendingEdit={pendingEdit}
-                onClearPending={handleClearPendingEdit}
-                editScope={editScope}
-                variantId={selectedVariantId}
-                variantStyles={variantStyles}
-                visionMode={visionMode}
-                visionFocusedElements={visionFocusedElements}
-                onVisionEditComplete={onVisionEditComplete}
-                onApplyFirstComplete={onApplyFirstComplete}
-              />
+              <div className="border-t border-border p-2">
+                <VisionDiffPreview
+                  pendingEdit={visionPendingEdit}
+                  onSave={onSaveVisionEdit}
+                  onCancel={onClearVisionPendingEdit}
+                />
+              </div>
             )}
 
-            {/* Reset Button */}
-            <button
-              onClick={() => {
-                onReset();
-                onResetComponentOverrides();
-                handleClearPendingEdit();
-              }}
-              className={cn(
-                "w-full flex items-center justify-center gap-2 py-2.5",
-                "text-xs font-medium text-gray-500 hover:text-gray-700",
-                "border border-gray-200 rounded hover:bg-gray-50 transition-colors"
-              )}
-            >
-              <RotateCcw className="h-3.5 w-3.5" />
-              Reset
-            </button>
+            {/* ApplyFirstPreview is now displayed inline in the chat via InlineDiffPreview */}
           </div>
+        )}
+      </div>
     </div>
   );
 }