sonance-brand-mcp 1.3.111 → 1.3.113

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

@@ -2,8 +2,9 @@
 
 import React, { useState, useMemo, useCallback, useEffect } from "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, ElementFilters } 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";
@@ -56,8 +57,8 @@ 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)
@@ -66,6 +67,16 @@ export interface ComponentsPanelProps {
   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({ 
@@ -113,7 +124,21 @@ export function ComponentsPanel({
   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") {
@@ -423,6 +448,13 @@ export function ComponentsPanel({
     // 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}%`);
@@ -432,6 +464,9 @@ export function ComponentsPanel({
     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}`);
@@ -439,89 +474,116 @@ export function ComponentsPanel({
 
     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: "preview",
+          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 && onApplyFirstComplete) {
-        // Trigger the apply-first preview flow
-        onApplyFirstComplete({
-          id: `property-edit-${Date.now()}`,
-          userPrompt: prompt,
-          focusedElements: [element],
-          originalCode: result.originalCode || "",
-          modifiedCode: result.modifiedCode || "",
-          filePath: result.filePath || "",
-          diff: result.diff || "",
-          backupId: result.backupId,
-          createdAt: new Date(),
-        });
+      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]);
+  }, [onApplyFirstComplete, currentTheme]);
 
   // Get the first focused element for properties panel
   const primaryFocusedElement = visionFocusedElements.length > 0 ? visionFocusedElements[0] : null;
-  const focusedCoords = primaryFocusedElement?.coordinates || null;
-  const computedStyles = useElementFromCoordinates(focusedCoords);
+  // 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");
 
-  // Auto-switch to details when an element is focused
-  useEffect(() => {
-    if (showPropertiesPanel) {
-      setPanelTab("details");
-    }
-  }, [showPropertiesPanel]);
+  // 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="flex flex-col h-full">
-      {/* ===== TAB BAR - Cursor-style underline tabs ===== */}
-      <div className="flex items-center gap-1 px-3 py-1.5 bg-transparent border-b border-gray-200/50 dark:border-white/10 flex-shrink-0">
+      {/* ===== 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 bg-transparent",
+            "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-gray-900 dark:text-white after:absolute after:bottom-0 after:left-1 after:right-1 after:h-[2px] after:bg-[#00A3E1] after:rounded-full"
-              : "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100/30 dark:hover:bg-white/10"
+              ? "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>Details</span>
+          <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 bg-transparent",
+            "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-gray-900 dark:text-white after:absolute after:bottom-0 after:left-1 after:right-1 after:h-[2px] after:bg-[#00A3E1] after:rounded-full"
-              : "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100/30 dark:hover:bg-white/10"
+              ? "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>AI Chat</span>
+          <span id="span-ai-chat">AI Chat</span>
           {visionMode && visionFocusedElements.length > 0 && (
-            <span className="ml-0.5 min-w-[16px] h-4 px-1 flex items-center justify-center text-[9px] font-semibold bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full">
+            <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>
           )}
@@ -540,11 +602,44 @@ export function ComponentsPanel({
                   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 className="text-[10px] text-purple-600 dark:text-purple-400 font-medium">
+                    <p id="p-visionfocusedelement" className="text-[10px] text-purple-600 dark:text-purple-400 font-medium">
                       +{visionFocusedElements.length - 1} more selected
                     </p>
                   </div>
@@ -558,10 +653,10 @@ export function ComponentsPanel({
                 <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 className="text-[11px] font-medium text-foreground mb-1">
+                <p id="p-vision-mode-active" className="text-[11px] font-medium text-foreground mb-1">
                   Vision Mode Active
                 </p>
-                <p className="text-[10px] text-foreground-secondary">
+                <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>
@@ -621,7 +716,7 @@ export function ComponentsPanel({
               return (
                   <div className="space-y-1.5">
                   <div className="flex items-center justify-between">
-                      <span className="text-[10px] font-medium text-foreground-secondary">Variants</span>
+                      <span id="span-variants" className="text-[10px] font-medium text-foreground-secondary">Variants</span>
                     {selectedVariantId && (
                       <button
                         onClick={() => onSelectVariant(null)}
@@ -644,7 +739,7 @@ export function ComponentsPanel({
                         )}
                       >
                           #{variantId.substring(0, 4)}
-                          <span className="opacity-60 ml-0.5">({count})</span>
+                          <span id="span-count" className="opacity-60 ml-0.5">({count})</span>
                       </button>
                     ))}
                   </div>
@@ -667,7 +762,7 @@ export function ComponentsPanel({
             {/* Edit Scope Toggle - Compact */}
           {selectedVariantId && (
               <div className="flex items-center gap-1 p-1.5 bg-secondary/50 rounded border border-border">
-                <span className="text-[9px] text-foreground-secondary">Scope:</span>
+                <span id="span-scope" className="text-[9px] text-foreground-secondary">Scope:</span>
                 <div className="flex gap-0.5 flex-1">
                 <button
                   onClick={() => setEditScope("component")}
@@ -703,10 +798,10 @@ export function ComponentsPanel({
             <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 className="text-[11px] font-medium text-foreground mb-1">
+            <p id="p-select-a-component" className="text-[11px] font-medium text-foreground mb-1">
               Select a Component
             </p>
-            <p className="text-[10px] text-foreground-secondary">
+            <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>
@@ -717,6 +812,21 @@ export function ComponentsPanel({
         {/* 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}
@@ -732,6 +842,10 @@ export function ComponentsPanel({
               visionFocusedElements={visionFocusedElements}
               onVisionEditComplete={onVisionEditComplete}
               onApplyFirstComplete={onApplyFirstComplete}
+              applyFirstSession={applyFirstSession}
+              applyFirstStatus={applyFirstStatus}
+              onApplyFirstAccept={onApplyFirstAccept}
+              onApplyFirstRevert={onApplyFirstRevert}
             />
 
             {/* Legacy Diff Previews (fallback for non-inline mode) */}
@@ -761,18 +875,7 @@ export function ComponentsPanel({
               </div>
             )}
 
-            {applyFirstSession && onApplyFirstAccept && onApplyFirstRevert && (
-              <div className="border-t border-border p-2">
-                <ApplyFirstPreview
-                  session={applyFirstSession}
-                  status={applyFirstStatus}
-                  onAccept={onApplyFirstAccept}
-                  onRevert={onApplyFirstRevert}
-                  onForceClear={onApplyFirstForceClear}
-                  onApplyPreview={onApplyPreview}
-                />
-              </div>
-            )}
+            {/* ApplyFirstPreview is now displayed inline in the chat via InlineDiffPreview */}
           </div>
         )}
       </div>

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

@@ -65,8 +65,8 @@ export function TextPanel({
   return (
       <div className="flex flex-col items-center justify-center h-full text-center p-6 text-gray-500">
         <Type className="h-12 w-12 mb-4 opacity-20" />
-        <p className="text-sm font-medium mb-2">Text Inspector Disabled</p>
-        <p className="text-xs max-w-[200px]">
+        <p id="text-panel-p-text-inspector-disab" className="text-sm font-medium mb-2">Text Inspector Disabled</p>
+        <p id="text-panel-p-enable-the-inspector" className="text-xs max-w-[200px]">
           Enable the inspector using the mouse icon in the top bar to select and edit text.
         </p>
       </div>
@@ -82,12 +82,12 @@ export function TextPanel({
         <div className="flex items-center justify-between mb-2">
           <div className="flex items-center gap-2">
             <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
-            <span className="text-xs font-medium text-amber-800">
+            <span id="text-panel-span-modifiedcount-text-e" className="text-xs font-medium text-amber-800">
               {modifiedCount} text element{modifiedCount !== 1 ? 's' : ''} modified
             </span>
           </div>
         </div>
-        <p className="text-[10px] text-amber-600 mb-3">
+        <p id="text-panel-p-changes-are-previewe" className="text-[10px] text-amber-600 mb-3">
           Changes are previewed on the page. Save to keep them or revert to discard.
         </p>
         <div className="flex gap-2">
@@ -131,8 +131,8 @@ export function TextPanel({
               <Type className="h-3 w-3 text-white" />
             </div>
               </div>
-          <p className="text-sm font-medium mb-2">Select Text to Edit</p>
-          <p className="text-xs max-w-[200px]">
+          <p id="text-panel-p-select-text-to-edit" className="text-sm font-medium mb-2">Select Text to Edit</p>
+          <p id="text-panel-p-click-on-any-text-el" className="text-xs max-w-[200px]">
             Click on any text element on the page to adjust its typography and content.
           </p>
         </div>
@@ -153,16 +153,16 @@ export function TextPanel({
         <div className="flex items-center justify-between pb-2 border-b border-gray-100">
           <div className="flex flex-col">
             <div className="flex items-center gap-2">
-              <span className="text-xs font-medium text-gray-900 truncate max-w-[180px]">
+              <span id="text-panel-span-selectedelementnames" className="text-xs font-medium text-gray-900 truncate max-w-[180px]">
                 {selectedElement.name.split(':')[0]}
               </span>
               {currentHasChanges && (
-                <span className="px-1.5 py-0.5 text-[9px] font-medium bg-amber-100 text-amber-700 rounded">
+                <span id="text-panel-span-modified" className="px-1.5 py-0.5 text-[9px] font-medium bg-amber-100 text-amber-700 rounded">
                   Modified
                 </span>
               )}
             </div>
-            <span className="text-[10px] text-gray-400 font-mono">
+            <span id="text-panel-span-selectedtextid" className="text-[10px] text-gray-400 font-mono">
               {selectedTextId}
             </span>
           </div>
@@ -320,7 +320,7 @@ export function TextPanel({
                   className="flex-1 h-7 px-2 text-xs border border-gray-200 rounded focus:border-[#00A3E1] focus:outline-none font-mono"
                 />
               </div>
-              <p className="text-[10px] text-gray-400">
+              <p id="text-panel-p-switch-theme-to-set-" className="text-[10px] text-gray-400">
                 Switch theme to set color for {currentTheme === "dark" ? "light" : "dark"} mode
               </p>
             </div>

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

@@ -42,6 +42,8 @@ export interface DetectedElement {
   elementId?: string;
   /** IDs of child elements for more precise targeting */
   childIds?: string[];
+  /** The src attribute for image elements (for tracing to source code) */
+  imageSrc?: string;
 }
 
 // Logo asset from the API
@@ -93,6 +95,43 @@ export interface OriginalLogoState {
   srcset?: string;
 }
 
+// ---- Image Editing Types ----
+
+// Image override configuration (for general images, not just logos)
+export interface ImageOverride {
+  src?: string;           // New image source URL
+  width?: number;         // Override width in pixels
+  height?: number;        // Override height in pixels
+  scale?: number;         // Scale factor (1 = 100%)
+  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+  reset?: boolean;        // If true, indicates this config is resetting to defaults
+}
+
+// Original image state for reset functionality
+export interface OriginalImageState {
+  src: string;
+  width: number;
+  height: number;
+  objectFit: string;
+  srcset?: string;
+}
+
+// Public folder image asset
+export interface PublicImageAsset {
+  id: string;
+  name: string;
+  path: string;            // Relative path from /public (e.g., "/banners/hero.jpg")
+  folder: string;          // Parent folder name for grouping
+  extension: string;
+  dimensions?: {
+    width: number;
+    height: number;
+  };
+}
+
+// Image save status
+export type ImageSaveStatus = "idle" | "saving" | "success" | "error";
+
 // Original text state for reset
 export interface OriginalTextState {
   textContent: string | null;
@@ -299,6 +338,8 @@ export interface VisionFocusedElement {
   childIds?: string[];
   /** Parent section context for section-level targeting */
   parentSection?: ParentSectionInfo;
+  /** The src attribute for image elements (for tracing to source code) */
+  imageSrc?: string;
 }
 
 export interface VisionEditRequest {
@@ -344,6 +385,7 @@ export interface ApplyFirstSession {
   status: 'preview' | 'applied' | 'accepted' | 'reverted';
   backupPaths: string[];
   isPreview?: boolean; // True if changes are not yet written to disk
+  isTextOnlyChange?: boolean; // True if only text content was changed (show in Details tab instead of AI Chat)
 }
 
 export type ApplyFirstStatus =